/* ==========================================================
   RSI X AI — landing
   Visual language (from the reference):
   · cool off-white page, deep navy ink, navy footer
   · tight grotesk headlines, bold + regular split ledes
   · every section: big title left → hairline rule → 2-col split,
     content lives in the right column, left often empty
   · hanging-indent paragraphs, hairline rows, outlined chips
   · pill buttons with a detached round arrow
   · surreal lavender→pink→peach skies with glass architecture
   ========================================================== */

:root {
  /* motion: one curve per job */
  --ease-out: cubic-bezier(.16,1,.3,1);     /* things arriving: reveals, intro, hover lifts */
  --ease-in-out: cubic-bezier(.65,0,.35,1); /* lines drawing, loops, things travelling */
  --ease-ui: cubic-bezier(.4,0,.2,1);       /* colour / background / opacity on hover */
  --bg: #f7fbfd;
  --ink: #101a35;
  --ink-2: #3b4566;
  --muted: #636a80; /* 4.5:1+ on every light surface (WCAG AA) */
  --line: #a9aebf;
  --line-soft: #d9dce6;
  --lav: #e9ebfb;
  --lav-2: #f1f2fd;
  --blue: #6c80d6;
  --navy: #0d1430;

  --sans: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --head: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --accent: #db62b2;
  --content-x: 50%; /* main content line: right column of every .split; the header menu starts on it */
  --pink: #f3bddb;
  --gut: clamp(16px, 2.2vw, 36px);
  --indent: clamp(36px, 5vw, 76px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
figure { margin: 0; }
svg { display: block; }
b { font-weight: 600; }
h1, h2, h3, .lede, .stat__n, .stat__big, .note strong, .hero__float strong { font-family: var(--head); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 12px; font-weight: 500; letter-spacing: -.01em;
  cursor: pointer; border: 0; padding: 0; background: none; color: var(--ink);
  font-family: inherit;
}
.btn span, .btn i {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; border-radius: 999px; background: #fff;
  transition: background .3s var(--ease-ui), color .3s var(--ease-ui), transform .4s var(--ease-out);
}
.btn span { padding: 0 22px; }
.btn i { width: 34px; font-style: normal; }
.btn:hover span, .btn:hover i { background: var(--ink); color: #fff; }
.btn:hover i { transform: translateX(3px) rotate(-45deg); }
.btn--line span, .btn--line i { background: transparent; border: 1px solid var(--ink); }
.btn--light span, .btn--light i { background: #fff; color: var(--ink); }
.btn--light:hover span, .btn--light:hover i { background: var(--blue); color: #fff; }

/* ---------- Header ---------- */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center;
  padding: 16px 30px; /* logo 20px inside the plate (plate is inset 10px) */
  font-size: 14px; line-height: 16.5px;
  transition: background .35s var(--ease-ui), padding .35s var(--ease-ui), box-shadow .35s var(--ease-ui);
}
/* Full-width translucent plate behind logo + menu */
.hdr::before {
  content: ""; position: absolute; inset: 8px 10px; z-index: -1; border-radius: 999px;
  background: rgba(247,251,253,.22); border: 1px solid rgba(255,255,255,.45);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background .35s var(--ease-ui);
}
.hdr.is-scrolled::before { background: rgba(247,251,253,.72); }
.logo { display: inline-flex; align-items: center; gap: 8px; }
.logo__mark { display: flex; align-items: flex-end; gap: 2px; width: 22px; height: 17px; color: var(--ink); }
.logo__mark i { display: block; flex: 1; background: currentColor; }
.logo__mark i:nth-child(1) { height: 50%; } .logo__mark i:nth-child(2) { height: 100%; }
.logo__mark i:nth-child(3) { background: var(--accent); } .logo__mark i:nth-child(3) { height: 72%; }
.logo__text { font-size: 12px; font-weight: 600; letter-spacing: -.04em; line-height: 18px; }
.logo__text i { font-style: normal; color: var(--accent); }
.logo__text small { display: block; font-size: 6px; font-weight: 500; letter-spacing: .02em; line-height: 8px; text-transform: uppercase; }
.logo--light .logo__mark, .logo--light { color: #fff; }
/* Menu plate: all items in one frosted pill, vertically centred on the logo, same size and colour */
.hdr__nav {
  position: absolute; left: var(--content-x); right: 30px; top: 50%; transform: translateY(-50%); /* from the content line; Contact us 20px inside the plate's right edge */
  display: flex; align-items: center; gap: 30px; white-space: nowrap;
  padding: 10px 0;
}
.hdr__nav a { font-size: 14px; font-weight: 500; letter-spacing: -.01em; text-transform: uppercase; color: var(--ink); transition: color .2s var(--ease-ui); }
.hdr__nav a:hover { color: var(--accent); }
.hdr__contact { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; } /* pushed to the right end of the plate */
.hdr__contact-ico { display: grid; place-items: center; width: 13px; height: 13px; border-radius: 2px; background: #d6c6ee; color: #1f2a4d; transition: background .2s var(--ease-ui), color .2s var(--ease-ui); }
.hdr__contact:hover .hdr__contact-ico { background: var(--ink); color: #fff; }

/* ---------- Hero (Figma 111:12) ---------- */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding: 120px 20px 150px;
  background: #cfd7fb;
  overflow: hidden;
}
/* Photo at its natural framing: fills the hero (cover), no extra zoom */
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(214,218,250,.45) 0%, rgba(214,218,250,.2) 38%, rgba(214,218,250,0) 55%); }
.hero__copy { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; max-width: 837px; padding: 35px 0 20px; }
.eyebrow { font-size: 14px; line-height: 15px; font-weight: 600; text-transform: uppercase; color: var(--ink); }
.eyebrow span { color: var(--accent); }
.hero__title {
  font-family: var(--head); font-weight: 400;
  font-size: clamp(52px, 6.95vw, 100px);
  line-height: .85; letter-spacing: -.05em;
  max-width: 7.6em;
  text-wrap: balance;
  margin-left: -.07em; /* optical alignment with the eyebrow: Work Sans side bearing */
}
.hero__title em { font-style: italic; color: var(--accent); font-size: .9015em; }
.hero__lead { max-width: 638px; padding-top: 20px; font-size: 16px; line-height: 1.3; color: var(--ink); }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding-top: 26px; }
.btn--hero span, .btn--hero i { height: 40px; background: #f8fdfe; }
.btn--hero { gap: 0; }
.btn--hero span { min-width: 185px; padding: 0 22px; font-size: 14px; font-weight: 600; color: #2b3b56; text-transform: uppercase; letter-spacing: -.01em; }
.btn--hero i { width: 40px; color: #2b3b56; }
.btn--hero:hover i { transform: translateX(3px); }
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 39px; padding: 8px 10px; border-radius: 18px;
  border: 1px solid rgba(16,26,53,.22);
  font-size: 14px; line-height: 15px; color: var(--ink);
}

/* ---------- Section shell ---------- */
.sec { padding: clamp(80px, 11vw, 150px) var(--gut) 0; }
.sec__title {
  font-weight: 500;
  font-size: clamp(40px, 5.56vw, 80px); /* h2: 80px medium */
  letter-spacing: -.04em;
  line-height: 1;
  padding-bottom: 14px;
  border-bottom: 1.5px solid var(--line);
  margin-bottom: 22px;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
}
.sec__title span { font-size: 10px; font-weight: 400; letter-spacing: .06em; color: var(--muted); padding-bottom: 4px; }
/* column-gap 0 puts the right column exactly on the content line (50% of the page) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 0; align-items: start; }
.split > :first-child:not(figure) { padding-right: clamp(24px, 4vw, 64px); }
.lede {
  font-size: clamp(20px, 1.95vw, 28px);
  font-weight: 400; line-height: 1.12; letter-spacing: -.025em;
  max-width: 25ch;
  margin-bottom: 22px;
}
.lede b { font-weight: 600; }
.lede em, .cta__copy h2 em { font-style: italic; font-weight: 400; }
.lede em { color: var(--accent); }
.hang {
  font-size: 16px; line-height: 1.3; color: var(--ink-2);
  padding-left: var(--indent); text-indent: calc(var(--indent) * -1);
  max-width: 560px;
}
.hang b { color: var(--ink); }

/* ---------- Rows ---------- */
.rows { list-style: none; margin: 34px 0 0; padding: 0; }
.rows li {
  display: grid; grid-template-columns: var(--indent) 1fr; align-items: start;
  padding: 16px 0; border-top: 1px solid var(--line-soft);
  font-size: 16px; color: var(--muted);
}
.rows li:last-child { border-bottom: 1px solid var(--line-soft); }
.rows b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.ico { width: 18px; height: 18px; fill: var(--ink); stroke: var(--ink); stroke-width: 0; }
.tr .ico path[d*="M4 12h16"] { stroke-width: 3; }

/* ---------- Art frames ---------- */
.art { overflow: hidden; background: var(--lav); }
.art svg { width: 100%; height: 100%; }
.art--sq { aspect-ratio: 1; max-width: 460px; width: 76%; }
.art--photo { position: relative; }
.art--photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.art--photo figcaption { position: absolute; left: 16px; bottom: 14px; font-size: 11px; line-height: 1.2; color: var(--ink); }

/* ---------- Mock ---------- */
.mock {
  margin: 34px 0 20px; max-width: 470px;
  background: var(--navy); color: #e8ebff;
  border-radius: 10px; padding: 14px 16px 18px;
  box-shadow: 0 20px 50px -20px rgba(13,20,48,.45);
}
.mock__bar { display: flex; align-items: center; gap: 12px; font-size: 11px; }
.mock__live { display: inline-flex; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: .08em; font-size: 10px; }
.mock__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff6b6b; animation: pulse-r 1.6s var(--ease-in-out) infinite; }
@keyframes pulse-r { 50% { opacity: .3; } }
.mock__select select {
  appearance: none; -webkit-appearance: none;
  font: inherit; color: #fff;
  background: rgba(255,255,255,.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23fff' fill='none'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid rgba(255,255,255,.2); border-radius: 999px;
  padding: 5px 28px 5px 12px; cursor: pointer;
}
.mock__select select option { color: var(--ink); }
.mock__wave { margin-left: auto; display: flex; align-items: center; gap: 3px; height: 18px; }
.mock__wave i { width: 2px; height: 100%; background: #9fb0ff; border-radius: 2px; animation: wave 1.1s var(--ease-in-out) infinite; }
.mock__wave i:nth-child(2) { animation-delay: -.2s; } .mock__wave i:nth-child(3) { animation-delay: -.5s; }
.mock__wave i:nth-child(4) { animation-delay: -.1s; } .mock__wave i:nth-child(5) { animation-delay: -.7s; }
.mock__wave i:nth-child(6) { animation-delay: -.3s; } .mock__wave i:nth-child(7) { animation-delay: -.9s; }
@keyframes wave { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.mock__cap { margin-top: 14px; font-size: 15px; line-height: 1.35; letter-spacing: -.01em; min-height: 2.7em; transition: opacity .25s var(--ease-ui); }
.mock__cap.is-fading { opacity: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { font-size: 14px; font-weight: 400; letter-spacing: -.01em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; }
/* two rows; the first two tags start on the 2nd guide (--indent), the next two on the content line */
.chips { gap: 8px; }
.chips__br { flex-basis: 100%; height: 0; content: ""; display: block; }
.chips span:nth-child(1) { margin-left: var(--indent); }

/* ---------- Stats ---------- */
.stats {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 40%);
  gap: 0; margin: 60px calc(var(--gut) * -1) 0; padding: 0 var(--gut);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.stats::-webkit-scrollbar { display: none; }
.stat { scroll-snap-align: start; }
.stat__n { font-size: clamp(30px, 3.4vw, 50px); font-weight: 500; letter-spacing: -.05em; line-height: 1; margin-bottom: 14px; }
.stat__card {
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  min-height: 210px; background: var(--lav); padding: 14px 16px 18px;
  border-right: 1px solid #fff;
  transition: background .3s var(--ease-ui);
}
.stat:hover .stat__card { background: #dfe3fa; }
.stat__card header { display: grid; grid-template-columns: auto 1fr; gap: 20px; font-size: 10.5px; }
.stat__card header span { text-align: right; color: var(--ink-2); max-width: 230px; justify-self: end; }
.stat__big { font-size: clamp(18px, 1.6vw, 24px); line-height: 1.08; letter-spacing: -.03em; max-width: 15ch; }
.stat__big span { color: var(--blue); opacity: .75; }
.stat__big b { font-weight: 600; }

/* ---------- Band ---------- */
.band { margin-top: clamp(90px, 11vw, 150px); height: clamp(280px, 38vw, 560px); overflow: hidden; }
.band { position: relative; }
.band img { display: block; width: 100%; height: 100%; object-fit: cover; }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(13,20,48,.4)); pointer-events: none; }
.band__label { position: absolute; z-index: 1; left: var(--gut); right: var(--gut); bottom: 16px; display: flex; justify-content: space-between; gap: 16px; color: #fff; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- Cards / offer ---------- */
.split--offer { align-items: start; }
.cards { display: grid; gap: 10px; }
.card {
  background: var(--lav-2); border: 1px solid var(--line-soft);
  padding: 16px 18px 18px;
  transition: background .3s var(--ease-ui);
}
.card:hover { background: var(--lav); }
.card h3 {
  display: flex; align-items: center; gap: 16px;
  font-size: 17px; font-weight: 400; letter-spacing: .01em; text-transform: uppercase;
}
.card__sub { font-size: 16px; margin: 6px 0 12px; color: var(--ink-2); }
.art--card { aspect-ratio: 2 / 1; }
.card__txt { font-size: 16px; line-height: 1.3; color: var(--ink-2); margin-top: 12px; max-width: 560px; }
.card__txt b { color: var(--ink); }
.offer { position: sticky; top: 90px; }
.offer .hang { font-style: normal; }
.offer .hang i { font-style: italic; }
.offer__box { border: 1px solid var(--line-soft); padding: 18px 20px; margin: 30px 0 22px; font-size: 16px; color: var(--ink-2); background: #fff; }
.offer__box p + p { margin-top: 10px; }
.offer__title { font-family: var(--head); font-weight: 600; font-size: 18px; color: var(--ink); letter-spacing: -.02em; }
.offer__box b { color: var(--ink); }

.note {
  display: flex; flex-direction: column; justify-content: space-between; gap: 50px;
  min-height: 230px; max-width: 460px; padding: 24px;
  background: linear-gradient(145deg, #dfe3ff, #f7cada);
  border: 1px solid rgba(27,35,64,.2);
}
.label-sm { font-size: 9.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-2); }
.note strong { font-size: clamp(24px, 2.2vw, 32px); font-weight: 500; line-height: .98; letter-spacing: -.05em; }
.note p { font-size: 16px; color: var(--ink-2); margin-top: -34px; }

/* ---------- Modes (blog-like) ---------- */
.modes {
  display: grid; grid-template-columns: repeat(4, 1fr); /* four equal columns */
  margin-top: 40px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  padding: 14px 0;
}
.mode { position: relative; padding: 0 14px 44px; border-right: 1px solid var(--line-soft); }
.art--mode { aspect-ratio: 4 / 3; margin-bottom: 14px; }
.mode h3 { font-size: 16px; font-weight: 400; line-height: 1.3; margin-bottom: 8px; }
.mode h3 b { font-weight: 600; }
.mode p { font-size: 16px; color: var(--muted); max-width: 32ch; }
.mode__n { position: absolute; left: 14px; bottom: 0; font-size: 10px; color: var(--muted); }
.modes__more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 11px; color: var(--muted); }
.circle { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; transition: background .3s var(--ease-ui), color .3s var(--ease-ui); }
.modes__more:hover { color: var(--ink); }
.modes__more:hover .circle { background: var(--ink); color: #fff; }

/* ---------- Table ---------- */
.table { display: grid; grid-template-columns: 1fr 5fr; gap: 20px; margin-top: 40px; align-items: center; }
.table__img { aspect-ratio: 5 / 6; max-width: 150px; }
.tr {
  display: grid; grid-template-columns: 40px 1.3fr 1fr 30px; align-items: center;
  padding: 11px 0; border-top: 1px solid var(--line-soft); font-size: 16px; color: var(--ink-2);
  transition: background .25s var(--ease-ui);
}
.tr:last-child { border-bottom: 1px solid var(--line-soft); }
.tr:not(.th):hover { background: var(--lav-2); }
.th { color: var(--muted); font-size: 10px; }
.plus { width: 16px; height: 16px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; font-size: 11px; color: var(--muted); line-height: 1; }

/* ---------- FAQ ---------- */
/* FAQ: sticky left column (lede + question card), numbered accordion on the content line */
.split--faq { align-items: start; }
.faq__aside { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 28px; padding-right: clamp(24px, 4vw, 64px); }
.faq__card { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; max-width: 420px; padding: 24px; background: linear-gradient(160deg, #e3e6fb 0%, #ecdff3 60%, #f6dce6 100%); }
.faq__card-t { font-family: var(--head); font-weight: 600; font-size: 20px; letter-spacing: -.02em; }
.faq__card p:not(.faq__card-t) { color: var(--ink-2); }
.faq__card .btn { margin-top: 8px; }
.faq { border-top: 0; } /* the section title rule already sits above the first question */
.qa { border-bottom: 1px solid var(--line); }
.qa summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: var(--indent) 1fr 32px; align-items: center;
  padding: 22px 0; transition: color .25s var(--ease-ui);
}
.qa summary::-webkit-details-marker { display: none; }
.qa__n { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.qa__q { font-family: var(--head); font-weight: 500; font-size: clamp(18px, 1.55vw, 22px); letter-spacing: -.02em; line-height: 1.2; padding-right: 20px; }
.qa__ico { position: relative; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; transition: background .3s var(--ease-ui), border-color .3s var(--ease-ui), transform .4s var(--ease-out); }
.qa__ico::before, .qa__ico::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.4px; background: var(--ink); transform: translate(-50%, -50%); transition: background .3s var(--ease-ui); }
.qa__ico::after { transform: translate(-50%, -50%) rotate(90deg); }
.qa summary:hover .qa__q { color: var(--accent); }
.qa summary:hover .qa__ico { border-color: var(--accent); }
.qa[open] .qa__ico { background: var(--accent); border-color: var(--accent); transform: rotate(45deg); }
.qa[open] .qa__ico::before, .qa[open] .qa__ico::after { background: #fff; }
.qa[open] .qa__n { color: var(--accent); }
.qa__a { padding: 0 52px 26px var(--indent); }
.qa__a p { max-width: 560px; color: var(--ink-2); }
.qa[open] .qa__a { animation: qa-in .45s var(--ease-out); }
@keyframes qa-in { from { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 960px) {
  .faq__aside { position: static; padding-right: 0; }
  .qa summary { grid-template-columns: 36px 1fr 32px; }
  .qa__a { padding-left: 36px; padding-right: 0; }
}

/* ---------- CTA ---------- */
.cta {
  position: relative; margin-top: clamp(100px, 12vw, 170px);
  display: grid; grid-template-columns: 1fr 1fr; min-height: 420px;
  background: linear-gradient(180deg, #d8dbf8 0%, #e6e1f7 60%, #efe5f3 100%);
  overflow: hidden;
}
.cta__copy { position: relative; z-index: 2; align-self: center; padding: 60px var(--gut); }
.cta__copy h2 { font-size: clamp(40px, 5.56vw, 80px); font-weight: 500; letter-spacing: -.04em; line-height: 1; max-width: 16ch; }
.cta__copy p { font-size: 16px; margin: 20px 0 18px; color: var(--ink-2); }

/* ---------- Footer ---------- */
.ftr { background: var(--navy); color: #d6daea; padding: clamp(60px, 8vw, 110px) var(--gut) 18px; }
/* Footer on the guides: left half = logo + form; right half starts on the content line (50%) */
.ftr__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.ftr__left { padding-right: clamp(24px, 4vw, 64px); }
.ftr__right { display: grid; grid-template-columns: 1fr minmax(220px, 40%); gap: 0 30px; align-items: start; }
.label { font-size: 14px; text-transform: uppercase; letter-spacing: -.01em; color: #fff; margin-bottom: 12px; }
.form { margin-top: clamp(50px, 8vw, 110px); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label { display: block; margin-top: 14px; }
.form label span { display: block; font-size: 14px; color: #aeb4cc; margin-bottom: 4px; }
.form input, .form textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid #3a4266;
  color: #fff; font: inherit; font-size: 16px; padding: 6px 0; outline: none; resize: vertical;
  transition: border-color .3s var(--ease-ui);
}
.form input::placeholder { color: #545c7c; }
.form input:focus, .form textarea:focus { border-color: #a9b6ff; }
.form__submit { display: flex; align-items: center; gap: 20px; justify-content: center; margin-top: 26px; }
.form__ok { font-size: 14px; color: #a9b6ff; }
.ftr__cols { display: grid; grid-template-columns: 1fr; gap: 36px; font-size: 14px; }
.ftr__cols a { padding-left: var(--indent); } /* links on the 2nd guide, labels on the content line */
.ftr__cols a { display: block; line-height: 1.7; transition: color .2s var(--ease-ui); }
.ftr__cols a:hover { color: #fff; }
.ftr__note { font-size: 10.5px; color: #8189a8; margin-top: 10px; max-width: 22ch; }
.ftr__about { margin-top: 18px; max-width: 36ch; font-size: 14px; color: #aeb4cc; }
.ftr__art .art { aspect-ratio: 965 / 1630; }
.ftr__photo img { transition: transform 1.2s var(--ease-out); }
.ftr__photo:hover img { transform: scale(1.04); }
.ftr__bottom {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 0;
  margin-top: 60px; padding-top: 14px; border-top: 1px solid #2a3150;
  font-size: 10px; color: #8189a8;
}

/* ---------- Motion ---------- */
.float-a { animation: float 9s ease-in-out infinite; }
.float-b { animation: float 11s ease-in-out infinite reverse; }
@keyframes float { 50% { transform: translateY(-8px); } }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-ui), transform 1s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Tablet ---------- */
@media (max-width: 960px) {
  .hdr { padding-inline: 28px; }
  .hdr__nav { left: auto; right: 28px; padding: 10px 0; }
  .hdr::before { inset: 8px; }
  .hero { min-height: 0; padding-top: 110px; padding-bottom: 300px; align-items: flex-start; }
  .hero__bg { top: 0; left: 0; right: auto; transform: none; width: 100%; height: 100%; object-fit: cover; object-position: 78% bottom; }
  .hero::after { display: none; }
  .hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(207,215,251,.85) 0%, rgba(220,214,246,.7) 60%, rgba(220,214,246,0) 92%); }
  .hero__copy { z-index: 2; }
  .note { min-height: 0; }
  .hero__copy { padding-top: 36px; }
  .split { grid-template-columns: 1fr; }
  .split > div:empty { display: none; }
  .split > :first-child:not(figure) { padding-right: 0; }
  .band { height: 300px; }
  .band__label span:first-child { display: none; }
  .art--sq { width: 100%; max-width: none; }
  .stats { grid-auto-columns: minmax(280px, 78%); }
  .offer { position: static; }
  .modes { grid-template-columns: 1fr 1fr; row-gap: 20px; }
  .modes__more { padding: 30px 0; }
  .table { grid-template-columns: 1fr; }
  .table__img { display: none; }
  .ftr__grid { grid-template-columns: 1fr; row-gap: 48px; }
  .ftr__left { padding-right: 0; }
  .ftr__right { grid-template-columns: 1fr; row-gap: 36px; }
  .ftr__cols a { padding-left: 0; }
  .ftr__bottom { grid-template-columns: 1fr; }
  .ftr__art { max-width: 260px; }
}

/* ---------- Phone ---------- */
@media (max-width: 560px) {
  .hero__lead { font-size: 16px; }
  .btn--hero span { width: auto; }
  .hang { padding-left: 0; text-indent: 0; }
  .chips span:nth-child(1) { margin-left: 0; }
  .rows li { grid-template-columns: 36px 1fr; }
  .modes { grid-template-columns: 1fr; }
  .mode { border-right: 0; border-bottom: 1px solid var(--line-soft); padding-bottom: 40px; margin-bottom: 16px; }
  .tr { grid-template-columns: 30px 1.2fr 1fr 24px; }
  .tr { grid-template-columns: 30px 1.3fr 1fr 24px; }
  .form__row { grid-template-columns: 1fr; gap: 0; }
  .ftr__cols { grid-template-columns: 1fr; }
}

/* Header logo: +20% and 10px higher */
.hdr .logo { gap: 10px; margin-top: 0; }
.hdr .logo__mark { width: 26px; height: 20px; gap: 2.4px; }
.hdr .logo__text { font-size: 14.4px; line-height: 21.6px; }
.hdr .logo__text small { font-size: 7.2px; line-height: 9.6px; }


/* Copy v2 additions */
.hang + .hang { margin-top: 12px; }
.card__txt + .card__txt { margin-top: 10px; }
.text-link { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--ink); border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: color .2s var(--ease-ui); }
.text-link:hover { color: var(--accent); }
.modes__more { text-align: center; line-height: 1.3; }
.badge { height: auto; min-height: 39px; max-width: 360px; line-height: 1.25; }
.badge svg { flex: none; }

/* Animated sound wave: main.js redraws the wave band of the hero photo with a travelling vertical ripple */
.hero__wave { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Hero latency stat: bottom-left, no plate */
.hero__foot { position: absolute; left: 20px; bottom: 58px; z-index: 2; color: var(--ink); display: flex; flex-wrap: wrap; gap: 20px 56px; }
.hero__stat { display: flex; align-items: center; gap: 14px; }
.hero__stat strong { font-family: var(--head); font-weight: 500; font-size: 44px; line-height: 1; letter-spacing: -.05em; }
.hero__stat strong small { font-size: .45em; letter-spacing: 0; margin-left: 2px; color: var(--accent); }
.hero__stat p { font-size: 14px; line-height: 1.3; }
@media (max-width: 960px) {
  .hero__foot { position: relative; left: auto; bottom: auto; margin-top: 36px; }
  .hero { flex-direction: column; }
}
.hero__fg { pointer-events: none; }
.ico--brand { width: 24px; height: 24px; fill: var(--ink); }
.card h3 .ico--brand { width: 20px; height: 20px; }

/* Performance as a numbered list of full-width rows (number · big figure · body · tags), hover fill */
.perf { list-style: none; margin: 56px 0 0; padding: 0; border-bottom: 1px solid var(--line); }
.perf__row {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 60px calc(50% - 60px) 1fr auto; /* 3rd column starts exactly on the content line */ align-items: start;
  padding: 26px 0 28px; border-top: 1px solid var(--line);
}
.perf__row::before {
  content: ""; position: absolute; inset: 0 calc(var(--gut) * -1); z-index: -1;
  background: var(--lav); transform: scaleY(0); transform-origin: bottom;
  transition: transform .5s var(--ease-out);
}
.perf__row:hover::before { transform: scaleY(1); }
.perf__n { font-size: 14px; color: var(--muted); padding-top: 10px; font-variant-numeric: tabular-nums; }
.perf__title { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; font-weight: 500; }
.perf__num { font-size: clamp(44px, 5.56vw, 80px); line-height: .9; letter-spacing: -.05em; }
.perf__num small { font-size: .38em; margin-left: 4px; letter-spacing: -.02em; color: var(--accent); }
.perf__label { font-size: clamp(20px, 1.95vw, 28px); letter-spacing: -.025em; }
.perf__body { max-width: 440px; padding-top: 10px; padding-left: 0; /* starts on the content line (1st guide) */ color: var(--ink-2); transition: transform .5s var(--ease-out); }
.perf__row:hover .perf__body { transform: translateX(6px); }
.perf__tags { list-style: none; margin: 0; padding: 10px 0 0 24px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: 260px; } /* one tag per line in every row */
.perf__tags li { font-size: 14px; letter-spacing: -.01em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
@media (max-width: 960px) {
  .perf__row { grid-template-columns: 40px 1fr; row-gap: 12px; }
  .perf__body, .perf__tags { grid-column: 2; padding-left: 0; padding-top: 0; justify-content: flex-start; max-width: none; }
  .perf__tags { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

/* Band animation layer: signals travelling from participants to the hub + breathing light ring */
.band__fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.band__label { z-index: 2; }

/* How it fits in: three-step flow, signal travelling along the connector */
.flow { position: relative; list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.flow::before {
  content: ""; position: absolute; left: 0; right: 0; top: 58px; height: 1px; z-index: 0;
  background: linear-gradient(90deg, transparent, var(--line) 8%, var(--line) 92%, transparent);
}
.flow::after {
  content: ""; position: absolute; top: 55px; left: 0; width: 7px; height: 7px; border-radius: 50%; z-index: 0;
  background: var(--accent); box-shadow: 0 0 0 4px rgba(219,98,178,.18);
  animation: flow-signal 4.5s var(--ease-in-out) infinite;
}
@keyframes flow-signal { 0% { left: 4%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 96%; opacity: 0; } }
.flow__step { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 18px; padding: 22px 24px 26px; background: var(--lav-2); border: 1px solid var(--line-soft); }
.flow__step--core { background: var(--navy); color: #e8ebff; border-color: var(--navy); }
.flow .flow__step--core .ico--brand { fill: #fff; }
.flow .flow__step--core p { color: #c9cfe6; }
.flow__n { font-size: 14px; letter-spacing: -.01em; text-transform: uppercase; color: var(--muted); }
.flow__step--core .flow__n { color: #fff; }
.flow__step .ico--brand { width: 28px; height: 28px; }
.flow__step p { color: var(--ink-2); max-width: 32ch; }
.flow__note { margin-top: 28px; padding-left: var(--content-x); font-size: 14px; letter-spacing: -.01em; text-transform: uppercase; color: var(--ink); }

/* Built for real-world use: two panels meeting on the content line */
.rw { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 40px; }
.rw__panel { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 24px 28px 30px; min-height: 520px; overflow: hidden; }
.rw__panel--light { background: linear-gradient(160deg, #e3e6fb 0%, #ecdff3 60%, #f6dce6 100%); color: var(--ink); }
.rw__panel--dark { background: var(--navy); color: #e8ebff; }
.rw__tag { font-size: 14px; letter-spacing: -.01em; text-transform: uppercase; color: var(--muted); }
.rw__panel--dark .rw__tag { color: #fff; }
.rw__fig { margin-top: auto; font-family: var(--head); font-weight: 500; font-size: clamp(64px, 8.3vw, 120px); line-height: .85; letter-spacing: -.06em; }
.rw__fig small { font-size: .3em; letter-spacing: -.02em; margin-left: 8px; color: var(--accent); }
.rw__cap { font-size: clamp(18px, 1.6vw, 22px); letter-spacing: -.02em; margin-top: -6px; }
.rw__bars { display: flex; align-items: flex-end; gap: 4px; height: 44px; }
.rw__bars i { flex: 1; background: var(--ink); opacity: .85; border-radius: 1px; height: 30%; animation: rw-bar 1.6s ease-in-out infinite; }
.rw__bars i:nth-child(3n) { animation-delay: -.4s; } .rw__bars i:nth-child(3n+1) { animation-delay: -.9s; }
.rw__bars i:nth-child(4n) { animation-duration: 1.2s; } .rw__bars i:nth-child(5n) { animation-duration: 2s; background: var(--accent); }
@keyframes rw-bar { 0%, 100% { height: 20%; } 50% { height: 100%; } }
.rw__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rw__facts li { font-size: 14px; letter-spacing: -.01em; text-transform: uppercase; color: var(--ink-2); border: 1px solid rgba(16,26,53,.25); border-radius: 999px; padding: 6px 12px; }
.rw__txt { max-width: 46ch; color: var(--ink-2); }
.rw__panel--dark .rw__txt { color: #c9cfe6; }
.rw__uses { list-style: none; margin: auto 0 0; padding: 0; border-top: 1px solid rgba(255,255,255,.18); }
.rw__uses li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.18);
  font-family: var(--head); font-weight: 500; font-size: clamp(22px, 2.2vw, 32px); letter-spacing: -.035em; line-height: 1.1;
  transition: padding .35s var(--ease-ui), color .35s var(--ease-ui);
}
.rw__uses li i { font-style: normal; font-size: .6em; color: #fff; opacity: 0; transform: translateX(-8px); transition: opacity .35s var(--ease-ui), transform .45s var(--ease-out); }
.rw__uses li:hover { padding-left: 10px; color: #fff; }
.rw__uses li:hover i { opacity: 1; transform: none; }
.rw__cta { align-self: flex-start; }
@media (prefers-reduced-motion: reduce) { .rw__bars i { animation: none; height: 60%; } }
@media (max-width: 960px) { .rw { grid-template-columns: 1fr; } .rw__panel { min-height: 0; } .rw__fig { margin-top: 24px; } }

@media (max-width: 960px) {
  .flow { grid-template-columns: 1fr; }
  .flow::before, .flow::after { display: none; }
  .flow__note { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .flow::after { display: none; } }

/* Responsive flow cards: the hovered/focused card takes the dark "active" look, the others stay light */
.flow__step { transition: background .35s var(--ease-ui), color .35s var(--ease-ui), border-color .35s var(--ease-ui), transform .45s var(--ease-out), box-shadow .45s var(--ease-ui); outline: none; cursor: default; }
.flow__step p, .flow__n { transition: color .35s var(--ease-ui); }
.flow__step .ico--brand { transition: fill .35s var(--ease-ui), transform .45s var(--ease-out); }
.flow:hover .flow__step--core:not(:hover), .flow:focus-within .flow__step--core:not(:focus) { background: var(--lav-2); color: var(--ink); border-color: var(--line-soft); }
.flow:hover .flow__step--core:not(:hover) p, .flow:focus-within .flow__step--core:not(:focus) p { color: var(--ink-2); }
.flow:hover .flow__step--core:not(:hover) .flow__n, .flow:focus-within .flow__step--core:not(:focus) .flow__n { color: var(--muted); }
.flow:hover .flow__step--core:not(:hover) .ico--brand, .flow:focus-within .flow__step--core:not(:focus) .ico--brand { fill: var(--ink); }
.flow .flow__step:hover, .flow .flow__step:focus-visible { background: var(--navy); color: #e8ebff; border-color: var(--navy); transform: translateY(-6px); box-shadow: 0 24px 40px -24px rgba(13,20,48,.55); }
.flow .flow__step:hover p, .flow .flow__step:focus-visible p { color: #c9cfe6; }
.flow .flow__step:hover .flow__n, .flow .flow__step:focus-visible .flow__n { color: #fff; }
.flow .flow__step:hover .ico--brand, .flow .flow__step:focus-visible .ico--brand { fill: #fff; transform: scale(1.15) rotate(-6deg); }
@media (hover: none) { .flow .flow__step:hover { transform: none; box-shadow: none; } }
/* Dark panel CTA: on hover the white pill turns into a white outline */
.rw__cta span, .rw__cta i { border: 1px solid #fff; }
.rw__cta:hover span, .rw__cta:hover i { background: transparent; color: #fff; border-color: #fff; }

.modes__more .circle { width: 44px; height: 44px; color: var(--accent); border-color: var(--accent); font-size: 18px; }
.modes__more:hover .circle { background: var(--accent); color: #fff; border-color: var(--accent); }
.flow__step .ico--flow { width: 27px; height: 21px; }
/* FAQ: answer height animated by main.js */
.qa__a { overflow: hidden; }
.qa[open] .qa__a { animation: none; }

/* Final CTA in the hero's style: full-bleed booth render, copy on the open sky */
.cta { display: flex; align-items: center; aspect-ratio: 1942 / 809; min-height: 520px; background: #cfd7fb; } /* full render visible on desktop, booths to the right of the copy */
.cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.cta::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(200,206,248,.7) 0%, rgba(200,206,248,.45) 30%, rgba(200,206,248,0) 48%); }
.cta__copy { padding: 80px 20px; max-width: 760px; }
.cta__copy h2 em { color: var(--accent); }
.cta__copy p { color: var(--ink); max-width: 46ch; }
@media (max-width: 960px) {
  .cta { aspect-ratio: auto; min-height: 640px; align-items: flex-start; }
  .cta__bg { object-position: 70% bottom; }
  .cta::before { background: linear-gradient(180deg, rgba(214,218,250,.85) 0%, rgba(214,218,250,.5) 55%, rgba(214,218,250,0) 80%); }
}

/* Where it fits: each card's diagram has its own quiet loop */
.mode svg * { transform-box: fill-box; transform-origin: center; }
/* 01 On its own: a signal drops down the line, gets processed in the middle, lands below */
.m1-top { animation: m1-top 4s var(--ease-in-out) infinite; }
.m1-mid { animation: m1-mid 4s ease-in-out infinite; }
.m1-bot { animation: m1-bot 4s ease-in-out infinite; }
@keyframes m1-top { 0%, 15% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(50px) scale(.35); opacity: .2; } 51% { transform: translateY(0) scale(.6); opacity: 0; } 70%, 100% { transform: none; opacity: 1; } }
@keyframes m1-mid { 0%, 40%, 70%, 100% { transform: none; } 50% { transform: scale(2.2); } }
@keyframes m1-bot { 0%, 50% { transform: none; } 62% { transform: scale(1.18); } 80%, 100% { transform: none; } }
/* 02 Alongside interpreters: sonar rings around the interpreter */
.m2-ring { animation: m2-ring 3.2s var(--ease-out) infinite; }
.m2-ring--2 { animation-delay: 1.6s; }
.m2-halo { animation: m2-halo 3.2s ease-in-out infinite; }
@keyframes m2-ring { 0% { transform: scale(.35); opacity: 0; } 15% { opacity: 1; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes m2-halo { 50% { transform: scale(1.12); opacity: .75; } }
/* 03 High-stakes: the four points are checked one by one, the core breathes */
.m3-dot { animation: m3-dot 4s ease-in-out infinite; }
.m3-dot:nth-child(2) { animation-delay: 1s; } .m3-dot:nth-child(3) { animation-delay: 2s; } .m3-dot:nth-child(4) { animation-delay: 3s; }
.m3-sq { animation: m3-sq 4s ease-in-out infinite; }
@keyframes m3-dot { 0%, 30%, 100% { transform: none; fill: #141838; } 12% { transform: scale(2.6); fill: #db62b2; } }
@keyframes m3-sq { 50% { transform: scale(1.12) rotate(4deg); } }
/* hover: the card lifts a little */
.mode .art--mode { transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-ui); }
.mode:hover .art--mode { transform: translateY(-6px); box-shadow: 0 22px 36px -24px rgba(13,20,48,.5); }
@media (prefers-reduced-motion: reduce) { .mode svg * { animation: none !important; } }
.cta__fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Legal pages */
.legal-page .hdr__nav { left: auto; right: 30px; }
.legal { padding: 140px var(--gut) 100px; }
.legal__meta p { font-size: 14px; color: var(--muted); }
.legal__meta { padding-right: clamp(24px, 4vw, 64px); }
.legal__body { max-width: 68ch; }
.legal__body h2 { font-size: clamp(20px, 1.95vw, 26px); font-weight: 600; letter-spacing: -.02em; margin: 36px 0 12px; }
.legal__body p { color: var(--ink-2); margin-bottom: 14px; }
.legal__body a, .ftr__legal a, .ftr--legal a { text-decoration: underline; text-underline-offset: 3px; }
.legal__body a:hover { color: var(--accent); }
.ftr--legal { padding-top: 0; }
.ftr--legal .ftr__bottom { margin-top: 0; padding-top: 18px; border-top: 0; }
.legal__body ul { margin: 0 0 14px; padding-left: 20px; color: var(--ink-2); }
.legal__body li { margin-bottom: 10px; }
.legal__body li b { color: var(--ink); }
.ftr__credit a { text-decoration: underline; text-underline-offset: 3px; }
.ftr__credit a:hover, .ftr__legal a:hover { color: #fff; }
.ftr__bottom-r { display: flex; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; } /* starts on the content line */
.ftr--legal .ftr__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; }
/* Footer submit = site CTA; on hover becomes a white outline (dark background) */
.form .btn--hero span, .form .btn--hero i { border: 1px solid #f8fdfe; }
.form .btn--hero:hover span, .form .btn--hero:hover i { background: transparent; color: #fff; }
.form__submit { justify-content: flex-start; }
.form label { margin-top: 20px; }

/* ---------- Type scale (single source): 100 · 80 · 44 · 28 · 22 · 16 · 14 ---------- */
.hero__title em { font-size: 1em; }
.rw__fig { font-size: clamp(48px, 5.56vw, 80px); }
.rw__fig small, .perf__num small { font-size: 28px; }
.hero__stat strong small { font-size: 22px; }
.rw__uses li { font-size: clamp(22px, 1.95vw, 28px); }
.rw__uses li i, .modes__more .circle { font-size: 16px; }
.faq__card-t { font-size: 22px; }
.mock__cap { font-size: 16px; }
.art--photo figcaption, .modes__more, .mock__bar,
.sec__title span, .mode__n, .mock__live, .band__label, .ftr__bottom { font-size: 14px; }
.logo--light .logo__text { font-size: 14.4px; line-height: 21.6px; }
.logo--light .logo__mark { width: 26px; height: 20px; gap: 2.4px; }
.faq .qa:first-child summary { padding-top: 3px; } /* first question lines up with the "Straight answers" lede */

/* ---------- Mobile menu (burger) ---------- */
.hdr__burger { display: none; }
@media (max-width: 960px) {
  .hdr__burger {
    display: grid; place-content: center; gap: 6px; margin-left: auto; position: relative; z-index: 3;
    width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--ink); cursor: pointer;
  }
  .hdr__burger i { display: block; width: 16px; height: 1.5px; background: #fff; transition: transform .35s var(--ease-out); }
  .hdr.is-open .hdr__burger i:first-child { transform: translateY(3.75px) rotate(45deg); }
  .hdr.is-open .hdr__burger i:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  .hdr .hdr__nav {
    position: fixed; inset: 0; left: 0; right: 0; top: 0; transform: none; z-index: 2;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 22px;
    padding: 100px 28px 40px; background: var(--navy);
    opacity: 0; visibility: hidden; transition: opacity .35s var(--ease-ui), visibility .35s var(--ease-ui);
  }
  .hdr.is-open .hdr__nav { opacity: 1; visibility: visible; }
  .hdr.is-open .logo { position: relative; z-index: 3; color: #fff; }
  .hdr.is-open .logo__mark { color: #fff; }
  .hdr .hdr__nav a { font-size: 28px; font-weight: 500; letter-spacing: -.02em; color: #fff; text-transform: none; }
  .hdr .hdr__nav .hdr__contact { margin: 24px 0 0; }
  body.menu-open { overflow: hidden; }
}
/* CTA buttons with long labels: let the pill grow to two lines instead of squashing */
.btn span { text-align: center; }
@media (max-width: 560px) {
  .btn--hero span { padding: 0 clamp(12px, 4vw, 20px); font-size: clamp(11px, 3.4vw, 14px); }
}
/* CTA labels and hero figures never break inside */
.btn--hero span, .hero__stat strong { white-space: nowrap; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* phones: hero stats on one grid - figures in an equal column, captions start on the same line */
@media (max-width: 960px) {
  .hero__foot { flex-direction: column; flex-wrap: nowrap; }
  .hero__stat { gap: 16px; }
  .hero__stat strong { flex: 0 0 76px; }
}
@media (max-width: 960px) {
  .hdr.is-open .hdr__burger { background: #fff; }
  .hdr.is-open .hdr__burger i { background: var(--ink); }
  .hdr.is-open::before { opacity: 0; }
}
.art--photo figcaption { color: #fff; text-transform: uppercase; letter-spacing: -.01em; } /* white caption, like the band photo label */

/* Mobile renders: portrait images, no desktop overlays (wave, booth layer, caption animation) */
@media (max-width: 960px) {
  .hero__wave, .hero__fg, .cta__fx { display: none; }
  .hero { min-height: 100svh; padding-bottom: 60px; }
  .hero__bg { object-position: center bottom; }
  .hero::before { background: linear-gradient(180deg, rgba(200,206,248,.55) 0%, rgba(200,206,248,.25) 45%, rgba(200,206,248,0) 65%); }
  .cta { min-height: 100svh; }
  .cta__bg { object-position: center bottom; }
  .cta::before { background: linear-gradient(180deg, rgba(200,206,248,.6) 0%, rgba(200,206,248,.25) 35%, rgba(200,206,248,0) 50%); }
}
/* Phones: stack copy over the open sky, image anchored at the bottom at its natural ratio so the booths sit below the text */
@media (max-width: 960px) {
  .hero, .cta { min-height: 0; display: block; }
  .hero__bg, .cta__bg { top: auto; bottom: 0; height: auto; object-fit: fill; }
  .hero { background: #8f9df0; padding-bottom: calc(177.7vw - 300px); }
  .cta { background: #8a98ee; padding-bottom: calc(177.9vw - 220px); }
  .cta__copy { padding-top: 90px; padding-bottom: 0; }
  .hero::before, .cta::before { background: linear-gradient(180deg, rgba(200,206,248,.5) 0%, rgba(200,206,248,.2) 40%, rgba(200,206,248,0) 60%); }
}
@media (max-width: 960px) {
  .hero__bg, .cta__bg { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%); mask-image: linear-gradient(180deg, transparent 0, #000 22%); }
  .cta { padding-bottom: calc(177.9vw - 110px); }
  .cta__copy { padding-top: 110px; }
}
.rw__panel--light { background: var(--lav-2); border: 1px solid var(--line-soft); } /* same surface as the flow cards in 04 */
.rw__bars i { background: var(--navy); opacity: 1; } /* same dark as the corporate panel */
.rw__bars i:nth-child(5n) { background: var(--accent); } /* pink accents stay */
.faq__card { background: var(--lav-2); border: 1px solid var(--line-soft); } /* same surface as the flow cards and the Ultra-light panel */

/* Vertical rhythm between blocks: 150px desktop, 120px mobile */
:root { --sec-gap: 150px; }
@media (max-width: 960px) { :root { --sec-gap: 120px; } }
.sec { padding-top: var(--sec-gap); }
.band, .cta { margin-top: var(--sec-gap); }

/* ---------- Text reveal: words slide up from a mask (hero on load, headings on scroll) ---------- */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .06em .14em 0; margin: 0 -.06em -.14em 0; }
.w > span { display: inline-block; transform: translateY(110%); transition: transform 1s var(--ease-out); transition-delay: calc(var(--d, 0ms) + var(--i, 0) * var(--step, 45ms)); }
.is-in .w > span, .w.is-in > span { transform: none; }
/* hero intro sequence */
/* photo, wave and booth overlay settle together as one layer stack, so they never drift apart */
.hero__bg, .hero__wave { transform-origin: 50% 50%; backface-visibility: hidden; }
.js-intro .hero__bg, .js-intro .hero__wave { transform: scale(1.06); will-change: transform; transition: transform 2.8s var(--ease-out), opacity 1.8s var(--ease-ui) .5s; }
.js-intro .hero__wave, .js-intro .hero__fg { opacity: 0; }
.js-intro .hdr::before, .js-intro .logo, .js-intro .hero__cta {
  opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease-ui), transform 1s var(--ease-out);
}
.js-intro .hdr::before, .js-intro .logo { transform: translateY(-12px); }
.js-intro.is-loaded .hero__bg, .js-intro.is-loaded .hero__wave { transform: none; }
.js-intro.is-loaded .hero__wave, .js-intro.is-loaded .hero__fg { opacity: 1; }
.js-intro.is-loaded .hdr::before, .js-intro.is-loaded .logo, .js-intro.is-loaded .hero__cta { opacity: 1; transform: none; }
.js-intro.is-loaded .hdr::before, .js-intro.is-loaded .logo { transition-delay: .1s; }
.js-intro.is-loaded .hero__lead { transition-delay: .85s; }
.js-intro.is-loaded .hero__cta { transition-delay: 1.05s; }
.js-intro.is-loaded .hero__foot .hero__stat:nth-child(1) { transition-delay: 1.15s; }
.js-intro.is-loaded .hero__foot .hero__stat:nth-child(2) { transition-delay: 1.25s; }
@media (prefers-reduced-motion: reduce) {
  .w > span { transform: none !important; transition: none !important; }
  .js-intro * { transition: none !important; }
}
.sec__t { display: block; }
.sec__title .sec__t, .sec__title .sec__t span { font-size: inherit; font-weight: inherit; letter-spacing: inherit; color: inherit; padding-bottom: 0; }
.sec__title .sec__t .w { padding-bottom: .14em; }
.hdr__nav a .w { padding: .14em .06em .22em 0; margin: -.14em -.06em -.22em 0; }   /* room for C/Q tops and y/p tails */
.w { padding-top: .08em; margin-top: -.08em; }
.js-intro .hdr__contact-ico { opacity: 0; transition: opacity .6s var(--ease-ui) .6s; }
.js-intro.is-loaded .hdr__contact-ico { opacity: 1; }

/* ---------- Hairlines draw in on scroll (left → right) ---------- */
.sec__title { position: relative; border-bottom-color: transparent; }
.sec__title::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1.5px; height: 1.5px; background: var(--line);
  transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease-in-out) .15s;
}
.sec__title.is-in::after { transform: none; }
.rows li, .perf__row, .qa {
  border-top-color: transparent; border-bottom-color: transparent;
  background-repeat: no-repeat;
  transition: opacity .9s var(--ease-ui), transform 1s var(--ease-out), background-size 1.3s var(--ease-in-out) .1s;
}
.rows li { background-image: linear-gradient(var(--line-soft), var(--line-soft)); background-position: left top; background-size: 0 1px; }
.perf__row { background-image: linear-gradient(var(--line), var(--line)); background-position: left top; background-size: 0 1px; }
.qa { background-image: linear-gradient(var(--line), var(--line)); background-position: left bottom; background-size: 0 1px; }
.rows li:last-child { background-image: linear-gradient(var(--line-soft), var(--line-soft)), linear-gradient(var(--line-soft), var(--line-soft)); background-position: left top, left bottom; background-size: 0 1px, 0 1px; }
.perf__row:last-child { background-image: linear-gradient(var(--line), var(--line)), linear-gradient(var(--line), var(--line)); background-position: left top, left bottom; background-size: 0 1px, 0 1px; }
.perf { border-bottom-color: transparent; }
.rows li.is-in, .perf__row.is-in, .qa.is-in { background-size: 100% 1px; }
.rows li:last-child.is-in, .perf__row:last-child.is-in { background-size: 100% 1px, 100% 1px; }
@media (prefers-reduced-motion: reduce) {
  .sec__title::after { transform: none; transition: none; }
  .rows li, .perf__row, .qa { background-size: 100% 1px !important; }
  .rows li:last-child, .perf__row:last-child { background-size: 100% 1px, 100% 1px !important; }
}

/* images can't be dragged out or selected */
img, picture, canvas { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* ---------- Voice & captions: animated render + macOS-style listener window ---------- */
.art__fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mock.mac { padding: 0; border-radius: 12px; background: #1d2238; border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.6), 0 24px 60px -18px rgba(13,20,48,.55);
  font-family: var(--sans); -webkit-font-smoothing: antialiased; color: #e8ebff; }
.mac__bar { position: relative; display: flex; align-items: center; justify-content: center; height: 30px; padding: 0 12px;
  background: linear-gradient(#2c3150, #252a45); border-bottom: 1px solid rgba(0,0,0,.45); border-radius: 12px 12px 0 0; }
.mac__dots { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: flex; gap: 8px; }
.mac__dots i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.25); }
.mac__dots i:nth-child(2) { background: #febc2e; } .mac__dots i:nth-child(3) { background: #28c840; }
.mac__title { font-size: 13px; font-weight: 600; letter-spacing: -.01em; color: rgba(232,235,255,.82); }
.mac__body { padding: 14px 16px 18px; }
.mock.mac .mock__bar { font-size: 13px; }
.mock.mac .mock__live { font-size: 11px; font-weight: 600; letter-spacing: .06em; }
/* popup button (Big Sur style: pill + accent chevron square) */
.msel { position: relative; }
.msel__btn { display: inline-flex; align-items: center; gap: 8px; height: 24px; padding: 0 3px 0 10px; border-radius: 6px;
  font: 500 13px/1 var(--sans); letter-spacing: -.01em; color: #fff; cursor: pointer;
  background: rgba(255,255,255,.12); border: .5px solid rgba(255,255,255,.18); box-shadow: 0 1px 1px rgba(0,0,0,.25);
  -webkit-appearance: none; appearance: none; transition: background .15s var(--ease-ui); }
.msel__btn:hover { background: rgba(255,255,255,.18); }
.msel__btn:focus-visible { outline: 3px solid rgba(219,98,178,.55); outline-offset: 1px; }
.msel__chev { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; background: var(--accent); color: #fff; }
.msel__menu { position: absolute; z-index: 20; top: calc(100% + 4px); left: -4px; min-width: 170px; margin: 0; padding: 5px; list-style: none;
  background: rgba(40,44,66,.97); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  border: .5px solid rgba(255,255,255,.16); border-radius: 8px; outline: none;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.4);
  animation: msel-in .16s var(--ease-out); }
@keyframes msel-in { from { opacity: 0; transform: translateY(-3px); } }
.msel__menu li { position: relative; padding: 4px 12px 4px 24px; border-radius: 4px; font: 400 13px/18px var(--sans); color: #eef0ff; cursor: default; white-space: nowrap; }
.msel__menu li[aria-selected="true"]::before { content: ""; position: absolute; left: 9px; top: 7px; width: 7px; height: 4px;
  border-left: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); }
.msel__menu li.is-hi { background: var(--accent); color: #fff; }

/* Ultra-light panel: thin-strand sound wave (replaces the bar chart) */
.rw__wave { display: block; width: 100%; height: 72px; }

/* ---------- Hero video (desktop): always rendered under the photo (Safari won't autoplay a hidden video);
   once it plays, the photo, wave and booth layer step aside — under the preloader, so nothing visibly switches ---------- */
.hero__clip { position: absolute; inset: 0; z-index: 0; isolation: isolate; overflow: hidden; pointer-events: none; } /* own stacking context: the two players' z-index stays inside, the fog stays on top */
.hero__clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; } /* colour is graded in the file: no CSS filter */
.hero__veil { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background:
    linear-gradient(90deg, rgba(218,221,250,.82) 0%, rgba(218,221,250,.68) 34%, rgba(218,221,250,.36) 50%, rgba(218,221,250,.12) 62%, rgba(218,221,250,0) 74%), /* fog under the copy */
    linear-gradient(0deg, rgba(232,226,246,.4) 0%, rgba(232,226,246,0) 30%),                                                                  /* low fog over the clouds */
    rgba(226,229,250,.06); }                                                                                                                  /* faint haze over the frame */                                                                                                                                       /* light haze over the whole frame */
.hero.has-video .hero__veil { opacity: 1; }
.hero.has-video .hero__bg, .hero.has-video .hero__wave { visibility: hidden; }
@media (max-width: 960px), (prefers-reduced-motion: reduce) { .hero__clip, .hero__veil { display: none; } }

/* ---------- Preloader: the name types itself in ---------- */
.pre { display: none; }
.js .pre { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: linear-gradient(180deg, #b0bcd8 0%, #c2c4dd 45%, #dac3c8 76%, #e6cdc6 100%); /* the clip's own sky: blue on top, warm haze at the horizon */
  transition: opacity 1.1s var(--ease-in-out) .15s, visibility 0s 1.3s; /* the name leaves first, then the curtain dissolves */
  animation: pre-safety 0s 7s forwards; } /* never block the page if a script fails */
@keyframes pre-safety { to { opacity: 0; visibility: hidden; } }
.pre.is-done { opacity: 0; visibility: hidden; }
.pre__word { margin: 0; display: flex; overflow: hidden; padding: .08em .18em .14em .06em; font: 500 clamp(44px, 6vw, 84px)/1 var(--sans); letter-spacing: -.045em; color: var(--ink); } /* right padding: room for the italic I */
.pre__ch { display: inline-block; transform: translateY(105%); opacity: 0; will-change: transform, opacity;
  animation: pre-ch .9s var(--ease-out) forwards; animation-delay: calc(120ms + var(--i) * 75ms); }
.pre__ch--a { color: var(--accent); font-style: italic; }
@keyframes pre-ch { to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .js .pre { display: none; } }

/* over the video, the header plate skips backdrop blur (re-blurring every video frame stutters, esp. in Firefox) */
.hero-video .hdr:not(.is-scrolled)::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(235,238,252,.42); }

/* ---------- Typography clean-up ---------- */
/* no single word left alone on the last line: balanced headings, "pretty" paragraphs (main.js also glues the last two words for browsers without text-wrap: pretty) */
h1, h2, h3, .lede, .cta__copy h2, .faq__card-t, .rw__cap, .perf__label { text-wrap: balance; }
p, li, .qa__q, .hang { text-wrap: pretty; }
/* h3: on the type scale (22), not body size */
.mode h3 { font-size: 22px; line-height: 1.2; letter-spacing: -.02em; font-weight: 500; margin-bottom: 10px; }
.mode h3 b { font-weight: 600; }
/* one distance from text to button everywhere: 28px */
:root { --to-btn: 28px; }
.hero__cta { padding-top: calc(var(--to-btn) - 10px); }              /* .hero__copy has a 10px gap */
.rw__cta { margin-top: calc(var(--to-btn) - 18px); }                 /* .rw__panel has an 18px gap */
.faq__card .btn { margin-top: calc(var(--to-btn) - 12px); }          /* .faq__card has a 12px gap */
.cta__copy p { margin-bottom: var(--to-btn); }
.form__submit { margin-top: var(--to-btn); }

/* preloader → site: the name drifts up and fades, the hero settles from a slight zoom underneath */
.pre__word { transition: transform .8s var(--ease-out), opacity .6s var(--ease-ui); }
.pre.is-done .pre__word { transform: translateY(-14px); opacity: 0; }
.js-intro .hero__clip { transform: scale(1.05); transition: transform 2.6s var(--ease-out); }
.js-intro.is-loaded .hero__clip { transform: none; }
@media (prefers-reduced-motion: reduce) { .js-intro .hero__clip { transform: none; transition: none; } }

/* phones: the hero stats sit over the photo, give them a soft frosted plate so they stay readable */
@media (max-width: 960px) {
  .hero__foot { align-self: flex-start; padding: 14px 16px; border-radius: 14px; gap: 14px 28px;
    background: rgba(241,243,253,.62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.5); }
}

/* ---------- Language switch (EN / JP) in the menu ---------- */
.hdr__lang { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 14px; font-weight: 500; }
.hdr__lang + .hdr__contact { margin-left: 30px; }
.hdr__nav .hdr__lang a { color: rgba(16,26,53,.5); }
.hdr__nav .hdr__lang a[aria-current] { color: var(--ink); }
.hdr__nav .hdr__lang a:hover { color: var(--accent); }
.hdr__lang i { font-style: normal; color: var(--line); }
@media (max-width: 960px) {
  .hdr .hdr__nav .hdr__lang { margin: 24px 0 0; font-size: 20px; gap: 10px; }
  .hdr .hdr__nav .hdr__lang a { font-size: 20px; color: rgba(255,255,255,.55); }
  .hdr .hdr__nav .hdr__lang a[aria-current] { color: #fff; }
  .hdr .hdr__nav .hdr__lang + .hdr__contact { margin: 12px 0 0; }
}

/* ---------- Japanese page (ja.html) ---------- */
html[lang="ja"] { --sans: "Inter", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif; --head: var(--sans); }
html[lang="ja"] body { line-height: 1.6; }
html[lang="ja"] :where(p, li, h1, h2, h3, summary, .lede, .qa__q, .hang, figcaption, .eyebrow) { word-break: auto-phrase; line-break: strict; }
/* no tight tracking on Japanese text; numbers keep theirs */
html[lang="ja"] :is(.hero__title, .sec__t, .lede, .cta__copy h2, .perf__label, .rw__cap, .rw__uses li, .qa__q, .faq__card-t, .mode h3, .hang, .hdr__nav a) { letter-spacing: 0; }
html[lang="ja"] em { font-style: normal; }
html[lang="ja"] .hero__title { font-size: clamp(38px, 4.6vw, 66px); line-height: 1.15; max-width: 11.5em; font-weight: 500; }
html[lang="ja"] .hero__title em { font-size: 1em; }
html[lang="ja"] .sec__title { font-size: clamp(32px, 4.2vw, 60px); line-height: 1.15; }
html[lang="ja"] .lede { line-height: 1.4; font-size: clamp(19px, 1.7vw, 24px); }
html[lang="ja"] .cta__copy h2 { font-size: clamp(32px, 4.2vw, 60px); line-height: 1.2; }
html[lang="ja"] .perf__label { font-size: clamp(18px, 1.6vw, 24px); }
html[lang="ja"] .rw__uses li { font-size: clamp(19px, 1.6vw, 24px); }
html[lang="ja"] .eyebrow { letter-spacing: .04em; }
html[lang="ja"] .hdr__nav a { text-transform: none; }

/* Japanese glyphs sit lower than Latin: give the word-reveal mask more room so nothing is clipped */
html[lang="ja"] .w { padding-top: .2em; margin-top: -.2em; padding-bottom: .24em; margin-bottom: -.24em; }
html[lang="ja"] .hdr__nav a .w, html[lang="ja"] .sec__title .sec__t .w { padding-top: .2em; padding-bottom: .24em; }

/* ---------- Cookie consent card (consent.js) ---------- */
.cc { position: fixed; z-index: 90; right: 20px; bottom: 20px; width: min(400px, calc(100vw - 40px)); padding: 20px 22px 22px;
  background: rgba(247,251,253,.9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.7); border-radius: 16px; box-shadow: 0 24px 60px -24px rgba(13,20,48,.45);
  color: var(--ink); font-family: var(--sans);
  opacity: 0; transform: translateY(16px); visibility: hidden;
  transition: opacity .5s var(--ease-ui), transform .7s var(--ease-out), visibility 0s .7s; }
.cc.is-on { opacity: 1; transform: none; visibility: visible; transition: opacity .5s var(--ease-ui), transform .7s var(--ease-out), visibility 0s; }
.cc__t { margin: 0 0 8px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.cc__p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink-2); text-wrap: pretty; }
.cc__p a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.cc__p a:hover { color: var(--accent); }
.cc__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--to-btn); }
.cc__b { height: 40px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--ink); background: transparent; color: var(--ink);
  font: 600 14px/1 var(--sans); letter-spacing: -.01em; text-transform: uppercase; cursor: pointer;
  transition: background .3s var(--ease-ui), color .3s var(--ease-ui), border-color .3s var(--ease-ui); }
.cc__b:hover { border-color: var(--accent); color: var(--accent); }
.cc__b--main { background: var(--ink); color: #fff; }
.cc__b--main:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.cc__b:focus-visible { outline: 3px solid rgba(219,98,178,.45); outline-offset: 2px; }
html[lang="ja"] .cc__b { text-transform: none; letter-spacing: 0; }
@media (max-width: 560px) { .cc { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 18px 18px 18px; } .cc__b { flex: 1; padding: 0 12px; font-size: 13px; white-space: nowrap; } }
@media (prefers-reduced-motion: reduce) { .cc, .cc.is-on { transition: none; transform: none; } }
/* footer "Cookie settings" looks like the other legal links */
.ftr__cookie { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ftr__cookie:hover { color: #fff; }

/* contact form: bot trap stays out of sight; status line colours */
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__ok { color: var(--accent); font-size: 16px; font-weight: 500; }
.form__ok[data-kind="err"] { color: #ff9cc9; }
.form button[disabled] { opacity: .6; cursor: progress; }

/* ---------- Accessibility additions ---------- */
/* skip link: first tab stop, visible only on keyboard focus */
.skip { position: fixed; z-index: 200; left: 16px; top: 12px; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600;
  transform: translateY(-160%); transition: transform .25s var(--ease-out); }
.skip:focus-visible { transform: none; outline: 3px solid rgba(219,98,178,.55); outline-offset: 2px; }
/* pause/play for the moving hero (WCAG 2.2.2): stops the video, canvases and CSS loops site-wide */
.motion-btn { position: absolute; z-index: 3; right: 20px; bottom: 20px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.6); background: rgba(247,251,253,.55); color: var(--ink); cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .3s var(--ease-ui); }
.motion-btn:hover { background: rgba(247,251,253,.85); }
.motion-btn:focus-visible { outline: 3px solid rgba(219,98,178,.55); outline-offset: 2px; }
.motion-btn .i-play { display: none; }
.motion-paused .motion-btn .i-play { display: block; } .motion-paused .motion-btn .i-pause { display: none; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .motion-btn { display: none; } }
/* privacy notice under the contact form (GDPR art. 13) */
.form__note { margin-top: 14px; font-size: 14px; line-height: 1.4; color: #aeb4cc; max-width: 52ch; }
.form__note a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }