/* Neutral scale: indigo-tinted off-whites (deepened 2026-09-12): every step is a neutral grey with
   6-24 % indigo mixed in, hue held at 238.7 deg and lightness held at the original value so contrast is unchanged.
   grey 50 page canvas, grey 100 containers, grey 200/300 hairlines, g400+ text.
   Valento homepage — built from Figma "Valento Homepage — EN" (3015:3773), 1920 canvas / 1480 content column.
   Layout is authored at design pixels; js/site.js scales the body to the viewport (zoom) below 1920 px. */

:root {
  --white: #fff;
  --black: #000;
  --g900: #1c1c21;
  --g700: #585979;
  --g500: #9192b0;
  --g400: #b5b6c9;
  --g300: #cccce8;
  --g200: #dbdcf4;
  --g100: #eaeaf8;
  --g50: #f7f7fd;
  --indigo: #6366f1;
  --brand600: #4f46e5;
  --brand100: #e0e7ff;
  --slot: #eaeaf8;
  /* The ground the feature-card renders are composited on. It is NOT --g100: the cards would then show
     a tone step wherever the card's own background meets the video (the scrim wash at the top, the
     corners the video's radius clips, and the header band in the narrow layout). Sampled from the
     renders themselves. */
  --card-ground: #e9ebf5;
  --fborder: #222235;
  --font-display: "Space Grotesk", "Mona Sans", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--g50); }
/* Sticky footer. Without this a page shorter than the window ends its black footer bar halfway down
   and shows the page background below it. The body is zoomed onto the 1920 canvas, so 100vh has to
   be divided back out (js/site.js publishes the factor as --site-zoom). */
body { display: flex; flex-direction: column; min-height: calc(100vh / var(--site-zoom, 1)); }
body > footer { margin-top: auto; }
html { scroll-padding-top: 120px; }  /* the nav is fixed; in-page anchors must not land under it */
body {
  font-family: "Mona Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--black);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11" 0;
  overflow-x: hidden;
}
h1, h2, h3, h4, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, video { display: block; }
button { font: inherit; }

.wrap { position: relative; width: 1480px; margin: 0 auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  padding: 12px 16px; border-radius: 8px; border: 1px solid transparent;
  font-weight: 500; font-size: 18px; line-height: 24px; white-space: nowrap; cursor: pointer;
}
.btn .txt { padding: 0 2px; display: inline-flex; gap: 4px; align-items: center; }
.btn-ghost { background: var(--white); border-color: var(--g200); color: var(--g900); box-shadow: 0 2px 3px rgba(16,24,40,.06); }
.btn-ghost.g50 { background: var(--g50); }
.btn-dark {
  background: var(--g900); color: var(--white);
  box-shadow: inset 0 4px 6px rgba(0,0,0,.18), inset 0 -3px 3.9px rgba(255,255,255,.12), 0 1px .5px rgba(0,0,0,.03);
}
.btn-primary {
  background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 100%), var(--indigo);
  border-color: var(--indigo); color: var(--white);
}
.btn-primary.sh { box-shadow: 0 2px 3px rgba(16,24,40,.06); }
.btn-sm { padding: 10px 13px; border-radius: 6px; font-size: 14px; line-height: 19px; }
.btn .ico { width: 19px; height: 19px; display: inline-flex; align-items: center; justify-content: center; }
.btn .ico img { width: 16px; height: 16px; }

/* ---------- nav ---------- */
/* The bar is fixed, so the 20 px above it would otherwise show a sliver of whatever is scrolling past.
   This scrim dissolves that strip: it blurs the backdrop rather than painting a colour, so it works over
   every section background (g50, white, g100) without matching any of them. */
body::before {
  content: ""; position: fixed; left: 0; top: 0; width: 100%; height: 104px; z-index: 49;
  pointer-events: none;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  -webkit-mask-image: linear-gradient(180deg, #000 0 56px, transparent 104px);
  mask-image: linear-gradient(180deg, #000 0 56px, transparent 104px);
}
.nav {
  position: fixed; top: 20px; left: 50%; translate: -50% 0; z-index: 50;
  width: 1480px; height: 80px; background: var(--white); border-radius: 16px; overflow: hidden;
  -webkit-backdrop-filter: blur(35px); backdrop-filter: blur(35px);
  box-shadow: 0 8px 17px rgba(95,94,161,.03), 0 30px 30px rgba(95,94,161,.03), 0 68px 41px rgba(95,94,161,.02);
}
.nav-logo { position: absolute; left: 16px; top: 25px; width: 225px; height: 30px; }
.nav-logo img { width: 225px; height: 30px; }
.nav-links { position: absolute; left: calc(50% + .5px); top: 50%; translate: -50% -50%; display: flex; align-items: center; }
.nav-link {
  display: flex; align-items: center; gap: 4px; padding: 12px 16px; border-radius: 8px;
  font-weight: 500; font-size: 18px; line-height: 24px; color: var(--g900); white-space: nowrap;
}
.nav-link img { width: 16px; height: 16px; }
.nav-actions { position: absolute; right: 16px; top: 16px; display: flex; gap: 8px; align-items: center; }

/* ---------- hero ---------- */
.hero { position: relative; height: 1006px; background: var(--white); }
.hero-copy { position: absolute; left: 50px; top: 176px; width: 1380px; text-align: center; }
.hero-kicker { font-family: var(--font-display); font-size: 13px; line-height: 18px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--brand600); }
.hero-kicker + h1 { margin-top: 16px; }
.hero h1 { font-family: var(--font-display); font-size: 56px; line-height: 68px; font-weight: 500; letter-spacing: -1.9px; color: var(--black); white-space: nowrap; }
.hero-sub { margin: 13px auto 0; width: 900px; font-size: 16px; line-height: 22px; letter-spacing: .1px; color: var(--g700); }
.hero-btns { margin-top: 30px; display: flex; justify-content: center; gap: 10px; }
/* Since the ghost button went, this is the hero's only call to action -- it carries the whole
   section, so it sits a step above the nav button rather than below it. */
.hero-btns .btn { padding: 15px 24px; border-radius: 10px; font-size: 20px; line-height: 28px; }
.hero-stage { position: absolute; left: 0; top: 459px; width: 1480px; height: 547px; overflow: hidden; background: var(--white); }
.hero-stage video { width: 100%; height: 100%; object-fit: cover; }

/* ---------- logo band + testimonial + stats ---------- */
.band-sec { padding-top: 96px; }
.band { border: 1px solid var(--g200); border-radius: 20px; overflow: hidden; background: var(--white); }
.band-row1 { position: relative; height: 169px; border-bottom: 1px solid var(--g200); }
.band-title { position: absolute; left: 40px; top: 71px; width: 250px; font-size: 20px; line-height: 26px; font-weight: 500; }
.marquee {
  position: absolute; left: 380px; top: 54px; width: 1100px; height: 60px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
}
.reel { position: absolute; left: 0; top: 0; width: 3736px; height: 60px; animation: reel 32s linear infinite; will-change: transform; }
@keyframes reel { from { transform: translateX(0); } to { transform: translateX(-1923px); } }
.reel .logo { position: absolute; top: 0; height: 60px; }
.reel .logo img { width: 100%; height: 100%; object-fit: contain; }
.hatch-row { height: 121px; background: var(--white) url(../assets/hatch.svg) no-repeat -2.5px 0; border-bottom: 1px solid var(--g200); }
.band-row3 { position: relative; padding: 39.5px 39.5px 40px; background: var(--g100); }
.quote { width: 1000px; font-size: 30px; line-height: 42px; letter-spacing: -.4px; color: var(--g500); }
.quote b { font-weight: 500; color: var(--black); }
.quote b.dim { color: var(--g500); }
.author { position: absolute; left: 1160px; top: 96px; }
/* The numbers are cumulative across every Margin Scan, not this client's. Sitting in the same indigo
   panel as the quote they read as his, so they get their own white row and their own scope label. */
.band-row4 { padding: 36px 39.5px 40px; border-top: 1px solid var(--g200); background: var(--white); }
.stats-kicker { font-family: var(--font-display); font-size: 13px; line-height: 18px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--brand600); }
.author .name { font-size: 24px; line-height: 32px; font-weight: 500; white-space: nowrap; }
.author .role { margin-top: 6px; width: 280px; font-size: 16px; line-height: 24px; color: var(--g500); }
.stats { margin-top: 16px; display: flex; gap: 20px; align-items: stretch; }
.stat { flex: 1 0 0; min-width: 1px; background: var(--g50); border: 1px solid var(--g200); border-radius: 16px; padding: 28px 32px; }
.stat-num { font-family: var(--font-display); font-size: 40px; line-height: 48px; font-weight: 500; letter-spacing: -.6px; }
.stat-lbl { margin-top: 10px; font-size: 18px; line-height: 26px; font-weight: 450; letter-spacing: .1px; color: var(--g700); }

/* ---------- benefits ---------- */
.benefits { position: relative; margin-top: 95px; height: 1505px; background: var(--white); }
.h-big { font-family: var(--font-display); font-size: 56px; line-height: 72px; font-weight: 550; letter-spacing: -1.4px; text-align: center; color: var(--black); }
.benefits .h-big { position: absolute; left: 50%; translate: -50% 0; top: 134px; width: 760px; white-space: nowrap; }
.benefits .h-big span { color: var(--g700); font-weight: 500; }
.slot { position: absolute; left: 0; top: 365px; width: 1480px; height: 651px; background: var(--slot); overflow: hidden; }
.slot video { width: 100%; height: 100%; object-fit: cover; }
.feather { position: absolute; pointer-events: none; }
.feather.l { left: 0; top: 0; width: 150px; height: 100%; background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.45) 55%, rgba(255,255,255,0) 100%); }
.feather.r { right: 0; top: 0; width: 150px; height: 100%; background: linear-gradient(270deg, #fff 0%, rgba(255,255,255,.45) 55%, rgba(255,255,255,0) 100%); }
.feather.t { left: 0; top: 0; width: 100%; height: 95px; background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.45) 55%, rgba(255,255,255,0) 100%); }
.feather.b { left: 0; bottom: 0; width: 100%; height: 95px; background: linear-gradient(0deg, #fff 0%, rgba(255,255,255,.45) 55%, rgba(255,255,255,0) 100%); }
.stat-row { position: absolute; left: 0; top: 1108px; width: 1480px; display: flex; flex-wrap: wrap; gap: 60px 270px; align-content: flex-start; }
.item { display: flex; gap: 20px; align-items: flex-start; }
.icon {
  position: relative; flex: none; width: 105px; height: 105px; border: 1px solid var(--g200); border-radius: 12px; overflow: hidden;
  background: radial-gradient(52.5px at 52.5px 52.5px, rgba(177,178,255,.1) 5%, rgba(255,255,255,.2) 100%), var(--white);
}
.glyph { position: absolute; left: -1px; top: -1px; width: 105px; height: 105px; overflow: hidden; }
.glyph .g { position: absolute; }
.glyph .g img { width: 100%; height: 100%; }
.item-text { width: 480px; }
.item-text h3 { font-size: 30px; line-height: 38px; font-weight: 500; letter-spacing: -.4px; }
.item-text p { margin-top: 12px; font-size: 20px; line-height: 28px; font-weight: 450; letter-spacing: .1px; color: var(--g700); }

/* ---------- wave divider ---------- */
.wave { position: relative; height: 87px; background: var(--g50); border-top: 1px solid var(--g200); border-bottom: 1px solid var(--g200); overflow: hidden; }
.wave::before {
  content: ""; position: absolute; left: 50%; top: -15.5px; translate: -50% 0; width: 3060.5px; height: 117.9px;
  background: url(../assets/wave.svg) no-repeat center / 100% 100%;
}

/* ---------- feature cards ---------- */
.features { position: relative; height: 2370px; background: var(--g50); }
.features .h-big { position: absolute; left: 50%; translate: -50% 0; top: 125px; width: 840px; white-space: nowrap; }
.features .h-big span { font-weight: 300; }
.card { position: absolute; width: 730px; height: 628px; background: var(--card-ground); border: 1px solid var(--g200); border-radius: 20px; overflow: hidden; }
.card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 26px; /* renders carry a 20 px rounded stage on a black (ex-transparent) ground; the larger radius clips those black corners and the card bg shows through */ }
.card-hd { position: absolute; left: 39px; top: 39px; width: 563px; z-index: 2; }
.card-hd h3 { font-size: 30px; line-height: 38px; font-weight: 500; letter-spacing: -.4px; }
.card-hd p { margin-top: 12px; font-size: 20px; line-height: 28px; font-weight: 450; letter-spacing: .1px; color: var(--g700); }
.card.wide { width: 1480px; }
.card.wide .card-hd { left: 458px; top: 29px; text-align: center; }
.scrim { position: absolute; left: 0; top: 0; width: 100%; z-index: 1; pointer-events: none; background: linear-gradient(180deg, var(--card-ground) 0%, rgba(233,235,245,0) 100%); }
.c1 { left: 0; top: 358px; }
.c2 { left: 750px; top: 358px; }
.cw { left: 0; top: 1006px; }
.c3 { left: 0; top: 1654px; }
.c4 { left: 750px; top: 1654px; }

/* ---------- pricing ---------- */
.pricing { position: relative; padding: 87px 0 123px; background: var(--g50); }
.plans-box { position: relative; width: 1480px; border: 1px solid var(--g200); border-radius: 20px; overflow: hidden; background: var(--white); }
.plans-hd { position: relative; height: 223px; border-bottom: 1px solid var(--g200); }
.plans-hd-in { position: absolute; left: 50%; top: calc(50% + .5px); translate: -50% -50%; width: 1392px; display: flex; justify-content: space-between; align-items: center; }
.plans-hd h2 { font-family: var(--font-display); font-size: 56px; line-height: 72px; font-weight: 500; letter-spacing: -1.4px; white-space: nowrap; }
.plans-hd p { width: 550px; font-size: 20px; line-height: 28px; letter-spacing: .1px; color: var(--g700); }
.plans-box .hatch-row { border-bottom: 1px solid var(--g200); }
.plans { position: relative; padding: 44.5px 0 18.5px; }
.plans-row { width: max-content; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 450px); grid-template-rows: auto auto auto; column-gap: 20px; row-gap: 0; }
.plan { width: 450px; display: grid; grid-template-rows: subgrid; grid-row: 1 / span 3; }
.plan-content { position: relative; background: var(--g50); border: 1px solid var(--g200); border-radius: 16px 16px 0 0; padding: 32px; display: flex; flex-direction: column; gap: 36px; }
.plan-hd { position: relative; }
.plan-hd h3 { font-size: 30px; line-height: 38px; font-weight: 500; letter-spacing: -.4px; }
.plan-hd .desc { margin-top: 12px; text-wrap: balance; font-size: 17px; line-height: 26px; color: var(--g700); }
/* Big label left, the two-sentence note stacked on the right edge, both centred on the 64 px line (2026-09-10). */
.price { margin-top: auto; display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.price b { font-size: 48px; line-height: 64px; font-weight: 500; letter-spacing: -.4px; white-space: nowrap; }
.price span { flex: 0 1 auto; min-width: 0; text-align: right; font-size: 14px; line-height: 20px; letter-spacing: .2px; color: var(--g700); }
.plan .btn { width: 100%; }
.plan-hatch { height: 36px; border: 1px solid var(--g200); background: var(--white) url(../assets/hatch.svg) no-repeat -2.5px -43px; }
.plan-info { background: var(--white); border: 1px solid var(--g200); border-radius: 0 0 16px 16px; padding: 32px; display: flex; flex-direction: column; gap: 24px; }
.plan-info .lbl { font-size: 17px; line-height: 26px; font-weight: 500; }
.plan-info ul { display: flex; flex-direction: column; gap: 16px; }
.plan-info li { display: flex; gap: 10px; align-items: flex-start; font-size: 17px; line-height: 26px; color: var(--g700); }
.plan-info li img { width: 16px; height: 16px; flex: none; margin-top: 5px; }
.plan.featured { align-self: stretch; }
.plan.featured .plan-content {
  flex: none; overflow: hidden;
  background: linear-gradient(191.15deg, #6f61ff 0%, rgba(111,97,255,.55) 14%, rgba(111,97,255,.22) 26%, rgba(111,97,255,.06) 36%, rgba(111,97,255,0) 46%), var(--g50);
}
.mash { position: absolute; inset: -.5px; background: url(../assets/pricing/mash.png) 0 0 / 750px 750px; opacity: .3; mix-blend-mode: overlay; pointer-events: none; }
.badge {
  position: absolute; left: 258px; top: 3px; display: flex; gap: 7px; align-items: flex-start; justify-content: center;
  padding: 6px 12px; border-radius: 8px; background: var(--white);
  box-shadow: 0 1px 1px rgba(79,72,177,.05), -1px 4px 2px rgba(79,72,177,.04), -2px 9px 3px rgba(79,72,177,.03), -4px 17px 3.5px rgba(79,72,177,.01);
}
.badge .med { position: relative; width: 20px; height: 20px; }
.badge .med img { position: absolute; left: -3.3px; top: 0; width: 26.6px; height: 34.3px; }
.badge span { font-size: 16px; line-height: 20px; font-weight: 500; color: var(--brand600); white-space: nowrap; }
.plan.featured .btn-primary { box-shadow: 0 1px 1.5px rgba(79,69,222,.19), 0 5px 2.5px rgba(79,69,222,.17), 0 11px 3.5px rgba(79,69,222,.1), 0 20px 4px rgba(79,69,222,.03); }
.arc { position: absolute; left: 363px; top: -18.6px; width: 155.17px; height: 55.7px; rotate: 180deg; pointer-events: none; }
.arc img { width: 100%; height: 100%; }

/* ---------- CTA ---------- */
.cta { position: relative; height: 417px; background: var(--g100); border: 1px solid var(--g300); border-radius: 20px; overflow: hidden; }
.cta h2 { position: absolute; left: 50%; translate: -50% 0; top: 109px; text-align: center; font-family: var(--font-display); font-size: 48px; line-height: 64px; font-weight: 500; letter-spacing: -.4px; color: var(--g500); white-space: nowrap; z-index: 1; }
.cta-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.decor { position: absolute; top: -1px; height: 417px; pointer-events: none; }
.decor.l { left: -1px; width: 571px; }
.decor.r { right: -1px; width: 384px; }
.cta-btns { position: absolute; left: 541px; bottom: 109px; display: flex; gap: 12px; align-items: center; z-index: 1; }

/* ---------- footer ---------- */
.footer { position: relative; margin-top: 121px; height: 706px; background: var(--black); color: var(--white); }
.f-top, .f-bot { position: absolute; left: 0; width: 1480px; height: 73px; border: 1px solid var(--fborder); overflow: hidden; background: url(../assets/hatch-dark.svg) no-repeat -2.5px 0; }
.f-top { top: 0; }
.f-bot { bottom: 0; }
.f-cell { position: absolute; top: 73px; height: 560px; border: 1px solid var(--fborder); overflow: hidden; }
.f-left { left: 0; width: 480px; }
.f-mid { left: 480px; width: 521px; }
.f-right { left: 1000px; width: 480px; }
.f-cube { position: absolute; left: 0; top: 0; width: 522px; height: 561px; }
.f-mid img { position: absolute; left: 0; top: 0; width: 522px; height: 561px; }
/* "VA." mark laid flat on the cube's top face: the face is a true isometric square
   (side 134, centre 261/178), so the mark uses the isometric projection matrix. */
.f-va { position: absolute; left: 261px; top: 178px; width: 74px; height: 25.6px; color: var(--white);
  transform-origin: 0 0; transform: matrix(.866, -.5, .866, .5, 0, 0) translate(-50%, -50%); pointer-events: none; }
.f-col { position: absolute; top: 59.5px; display: flex; flex-direction: column; gap: 20px; font-size: 16px; line-height: 20px; }
.f-col h4 { font-size: 16px; line-height: 20px; font-weight: 500; color: var(--white); }
.f-col ul { display: flex; flex-direction: column; gap: 16px; color: var(--g400); white-space: nowrap; }
.f-tag { position: absolute; left: 130px; top: 491.5px; width: 280px; font-size: 16px; line-height: 20px; color: var(--g700); }
.f-social { position: absolute; left: 50%; top: calc(50% + 218px); translate: -50% -50%; display: flex; gap: 36px; align-items: center; }
.f-social a { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; }
.f-social a.x { width: 24px; height: 24px; }
.f-word { position: absolute; left: 285.75px; top: 0; width: 908px; height: 73px; pointer-events: none; }
.f-copy { position: absolute; left: 50%; top: calc(50% + .5px); translate: -50% -50%; font-size: 16px; line-height: 20px; color: var(--brand100); white-space: nowrap; }

/* ---------- hover motion (nav underline fill, button lift) ---------- */
.nav-link { position: relative; transition: color .25s ease; }
.nav-link::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 7px; height: 2px; border-radius: 1px;
  background: var(--g900); transform: scaleX(0); transform-origin: left center;
  transition: transform .42s cubic-bezier(.22,1,.36,1);
}
.nav-link:hover::after, .nav-link:focus-visible::after { transform: scaleX(1); }
.nav-link:hover img { transform: translateY(1px); }
.nav-link img { transition: transform .25s ease; }

.btn { position: relative; overflow: hidden; transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s cubic-bezier(.22,1,.36,1), background-color .25s ease, border-color .25s ease, color .25s ease; }
.btn .txt { position: relative; z-index: 1; }
.btn::before { /* light sweep that crosses the button once on hover */
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 30%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-120%) skewX(-18deg); transition: none; pointer-events: none;
}
.btn:hover::before { transform: translateX(520%) skewX(-18deg); transition: transform .7s cubic-bezier(.22,1,.36,1); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); transition-duration: .1s; }
.btn-primary:hover { background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 100%), var(--indigo); box-shadow: 0 8px 20px rgba(99,102,241,.32), 0 2px 4px rgba(16,24,40,.08); }
.btn-dark:hover { background: var(--white); color: var(--g900); border-color: var(--g900); box-shadow: 0 8px 20px rgba(28,28,33,.12); }
.btn-dark::before { background: linear-gradient(100deg, rgba(28,28,33,0) 0%, rgba(28,28,33,.06) 50%, rgba(28,28,33,0) 100%); }
.btn-ghost:hover { border-color: var(--g300); background: var(--white); box-shadow: 0 8px 20px rgba(16,24,40,.08), 0 2px 3px rgba(16,24,40,.06); }
.btn-ghost.g50:hover { background: var(--white); }
.btn-ghost::before { background: linear-gradient(100deg, rgba(99,102,241,0) 0%, rgba(99,102,241,.10) 50%, rgba(99,102,241,0) 100%); }

/* Guideline button states (Brand Guideline v1.0): hover darkens to brand600, focus grows a pale
   indigo ring, disabled goes flat and inert. These are additions -- the glide sweep and the 2 px
   lift the rest of the site already uses stay exactly as they are. */
.btn:focus-visible { outline: none; border-color: var(--brand600); box-shadow: 0 0 0 4px var(--brand100); }
.btn-primary:focus-visible { background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.04) 55%, rgba(0,0,0,.06) 100%), var(--indigo); box-shadow: 0 0 0 4px var(--brand100); }
.btn[aria-disabled="true"], .btn:disabled, .btn.is-disabled {
  pointer-events: none; background: var(--g100); border-color: var(--g100); color: var(--g400);
  box-shadow: none; transform: none;
}
.btn[aria-disabled="true"]::before, .btn:disabled::before, .btn.is-disabled::before,
.btn[aria-disabled="true"]::after, .btn:disabled::after, .btn.is-disabled::after { display: none; }

.f-col ul a, .f-social a img { transition: color .25s ease, opacity .25s ease, transform .25s ease; }
.f-col ul a:hover { color: var(--white); }
.f-social a:hover img { transform: translateY(-2px); opacity: .85; }

/* ---------- grain on indigo buttons (Figma "Start here" texture) ---------- */
.btn-primary { isolation: isolate; background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.04) 55%, rgba(0,0,0,.06) 100%), var(--indigo); }
.btn-primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='g' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  background-size: 120px 120px; opacity: .55; mix-blend-mode: overlay;
}
.btn-primary:hover { background: linear-gradient(180deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.08) 55%, rgba(0,0,0,.05) 100%), var(--brand600); }
.btn-primary:hover::after { opacity: .62; }

@media (prefers-reduced-motion: reduce) {
  .nav-link::after, .btn, .btn::before, .btn:hover::before, .f-col ul a, .f-social a img { transition: none; }
  .btn:hover { transform: none; }
}

/* ---------- language toggle (EN / DE), sits left of "Book a demo" in the nav ---------- */
/* EN · DE: plain text pair with a middle dot; the active language is ink with a black underline. */
.lang-toggle { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 4px; margin-right: 8px; }
.lang-toggle::before { content: ""; order: 1; width: 3px; height: 3px; border-radius: 50%; background: var(--g400); flex: none; }
.lang-toggle button { order: 0; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--g500); font: inherit; font-weight: 500; font-size: 15px; line-height: 20px; letter-spacing: .2px; padding: 2px 1px 3px; cursor: pointer; transition: color .25s ease, border-color .25s ease; }
.lang-toggle button[data-lang="de"] { order: 2; }
.lang-toggle button[aria-pressed="true"] { color: var(--g900); border-bottom-color: var(--g900); }
.lang-toggle button:not([aria-pressed="true"]):hover { color: var(--g900); }
.lang-toggle button:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }

/* ---- What waiting costs (added 2026-09-12) --------------------------------
   Sits between the benefits items and the wave divider, on white, per Shahad.
   Type comes straight from the homepage scale: .h-big for the headline with the
   grey second half, 20/28 g700 for body, 14/20 g500 for the kicker and note.
   Tiles copy the band's .stat geometry (150 px, --g50 on --g100, radius 16) but
   use their own class names so the band reveal cannot reach them. */
.math { position: relative; padding: 104px 0; background: var(--white); }
/* Boxed like .band and .plans-box -- header row, hatch strip, tinted row, foot -- so the section reads
   as part of the system instead of loose centred text on the page background. */
.math-box { position: relative; width: 1480px; border: 1px solid var(--g200); border-radius: 20px; overflow: hidden; background: var(--white); }
.math-hd { padding: 56px 40px 48px; text-align: center; border-bottom: 1px solid var(--g200); }
.math-kicker { font-family: var(--font-display); font-size: 13px; line-height: 18px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--brand600); }
.math .h-big { margin-top: 18px; }
.math .h-big span { color: var(--g700); font-weight: 500; }
.math-intro { margin: 24px auto 0; width: 1120px; text-wrap: balance; font-size: 20px; line-height: 28px; font-weight: 450; letter-spacing: .1px; color: var(--g700); }
.math-body { padding: 40px 40px 44px; background: var(--g100); }
/* Same proportions as the band's .stat tiles: stacked, left-aligned, 1120 px row so three tiles
   land near 360 px instead of stretching to 453 and reading as elongated bars. */
.math-stats { width: 1120px; margin: 0 auto; display: flex; gap: 20px; align-items: stretch; }
.mstat { flex: 1 0 0; min-width: 1px; padding: 28px 32px; background: var(--white); border: 1px solid var(--g200); border-radius: 16px; }
.mstat-num { font-family: var(--font-display); font-size: 40px; line-height: 48px; font-weight: 500; letter-spacing: -.6px; }
.mstat-lbl { margin-top: 10px; font-size: 18px; line-height: 26px; font-weight: 450; letter-spacing: .1px; color: var(--g700); }
.math-foot { margin-top: 36px; text-align: center; }
.math-close { font-size: 20px; line-height: 28px; font-weight: 450; letter-spacing: .1px; color: var(--g900); }
.math-note { margin-top: 10px; font-size: 14px; line-height: 20px; letter-spacing: .2px; color: var(--g700); }