/* ===================================================================
   Durusi homepage — blank-slate rebuild (home.css)
   Scoped to index.html only. Other pages keep main.css untouched.
   Locked brand tokens only: Frost canvas, Mint CTA, Fredoka, gradients.
   =================================================================== */

:root {
  /* Real Durusi app palette (DBB Figma): Forest -> Teal -> Electric, mint CTA, dark glass */
  --frost:#F2F5F7; --white:#FFFFFF; --ivory:#FFFFFF;
  /* inks: near-black body, forest-green / teal headings + links */
  --espresso:#16181B; --forest:#102718; --cocoa:#586863; --link:#017579; --deep-teal:#0C333B;
  /* accents (names kept for the existing rules; values are the green family) */
  --pink:#45FBB2; --violet:#00E0E8; --purple:#0C333B; --gold:#F5C842;
  --mint:#45FBB2; --mint-deep:#15AC76; --lilac:#CA9FFF; --magenta:#FE019A; --electric:#00E0E8;
  /* signature green gradients, dark glass, forest at the bottom where CTAs live */
  /* The five brand gradients (DBB p26), defined here because this page does NOT
     load main.css — home.css is its only base sheet. Until 2026-08-31 these five
     lines held green ramps instead: --grad-lilac-currant had no lilac in it and
     --grad-magenta-currant was mint-to-teal. That is why the homepage read as
     green whichever token a surface asked for. Values now match main.css exactly;
     if you change one, change both. */
  --grad-mint-teal:        linear-gradient(167deg,#45FBB2 -70%,#0C333B 46%,#102718 100%);
  --grad-lilac-currant:    linear-gradient(167deg,#CA9FFF -70%,#3A2350 46%,#2A1B38 100%);
  --grad-electric-currant: linear-gradient(167deg,#00E0E8 -70%,#123244 46%,#2A1B38 100%);
  --grad-magenta-currant:  linear-gradient(167deg,#FE019A -70%,#46163A 46%,#2A1B38 100%);
  --grad-electric-magenta: linear-gradient(150deg,#00E0E8 -55%,#2A1B38 52%,#FE019A 128%);
  /* radii + cool border */
  --r-card:20px; --r-inset:12px; --line:#E2E6E9;
  --sans:"Fredoka",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --maxw:1200px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--sans); background:var(--ivory); color:var(--espresso);
  font-size:16px; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img { max-width:100%; display:block; }
a { color:var(--link); text-decoration:none; }
.container { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.section { padding:96px 0; position:relative; }
@media (max-width:760px){ .section{ padding:64px 0; } }

/* type scale (Stripe-style, -1% tracking on Latin headings) */
h1,h2,h3,h4 { color:var(--forest); font-weight:600; letter-spacing:-0.02em; line-height:1.08; }
h1 { font-size:clamp(2.5rem,5.2vw,4rem); }
h2 { font-size:clamp(2rem,3.6vw,2.9rem); }
h3 { font-size:1.3rem; letter-spacing:-0.01em; }
.lead { font-size:1.14rem; line-height:1.6; color:var(--cocoa); }
.eyebrow { font-size:0.74rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--link); }
.section-head { max-width:680px; }
.section-head.center { margin:0 auto; text-align:center; }
.section-head h2 { margin:0.5rem 0 0; }
.section-head .sub { margin-top:1rem; font-size:1.08rem; color:var(--cocoa); line-height:1.6; }

/* buttons — pill, one accent (mint) */
.btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-weight:600; font-size:0.98rem; border-radius:999px; padding:13px 26px; border:1.5px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .2s ease, background .2s ease; white-space:nowrap; }
.btn-primary { background:var(--mint); color:var(--forest); box-shadow:0 8px 24px rgba(69,251,178,0.35); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 14px 34px rgba(69,251,178,0.45); }
.btn-primary::after { content:"\2192"; transition:transform .15s ease; }
.btn-primary:hover::after { transform:translateX(3px); }
.btn-ghost { background:transparent; color:var(--forest); border-color:var(--line); }
.btn-ghost:hover { background:var(--white); border-color:var(--mint); transform:translateY(-2px); }
.hero .btn-ghost { color:var(--white); border-color:rgba(255,255,255,0.5); }
.hero .btn-ghost:hover { background:rgba(255,255,255,0.12); border-color:#fff; }

/* announce bar */
.announce { background:var(--ivory); color:var(--espresso); text-align:center; font-size:0.84rem; padding:9px 16px; border-bottom:1px solid var(--line); }
.announce a { color:var(--link); font-weight:600; }
.announce a:hover { text-decoration:underline; }

/* header — single line, <=72px */
.site-header { position:sticky; top:0; z-index:60; background:rgba(255,255,255,0.82); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:border-color .2s, box-shadow .2s; }
.site-header.scrolled { border-bottom-color:var(--line); box-shadow:0 4px 20px rgba(16,18,27,0.05); }
.site-header .container { display:flex; align-items:center; justify-content:space-between; gap:20px; height:70px; }
.logo-img { height:34px; width:auto; display:block; }
.nav { display:flex; align-items:center; gap:28px; }
.nav a { color:var(--espresso); font-size:0.94rem; font-weight:500; opacity:0.82; transition:opacity .15s, color .15s; }
.nav a:hover, .nav a[aria-current="page"] { opacity:1; color:var(--link); }
.nav .lang { opacity:1; color:var(--cocoa); }
.nav-toggle { display:none; background:none; border:none; font-size:1.4rem; color:var(--forest); cursor:pointer; }
@media (max-width:880px){
  .nav { display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:flex-start; gap:18px; background:var(--frost); padding:20px 24px 26px; border-bottom:1px solid var(--line); }
  .nav.open { display:flex; }
  .nav-toggle { display:block; }
}

/* =====================================================================
   HERO — split layout, brand gradient, white product mockup
   ===================================================================== */
.hero { position:relative; overflow:hidden; background:var(--grad-electric-magenta); color:#fff; padding:72px 0 88px; }
.hero .ribbon { position:absolute; inset:-30% -10% auto auto; width:70%; height:120%; background:radial-gradient(42% 48% at 60% 40%, rgba(255,255,255,0.20), transparent 70%); filter:blur(30px); pointer-events:none; }
.hero .container { position:relative; z-index:1; }
.hero-grid { display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; }
.hero-copy { max-width:540px; }
.hero .eyebrow { color:rgba(255,255,255,0.9); }
.hero h1 { color:#fff; margin:0.8rem 0 0; max-width:none; font-size:clamp(2.4rem,4.6vw,3.5rem); }
.hero .hero-sub { margin-top:1.2rem; font-size:1.16rem; line-height:1.55; color:rgba(255,255,255,0.94); max-width:42ch; }
.hero .actions { display:flex; gap:14px; margin-top:2rem; flex-wrap:wrap; }
@media (max-width:880px){
  .hero-grid { grid-template-columns:1fr; gap:40px; }
  .hero h1 { max-width:none; }
  .hero-art { order:2; }
}

/* app mockup (real product preview, not a fake screenshot) */
.hero-art { position:relative; display:flex; justify-content:center; }
.appwin { width:min(320px,100%); background:var(--white); border:1px solid rgba(255,255,255,0.5); border-radius:26px; box-shadow:0 34px 80px rgba(16,18,27,0.32); padding:16px 16px 18px; display:grid; gap:12px; }
.aw-head { display:flex; align-items:center; justify-content:space-between; }
.aw-brand { font-weight:700; color:var(--espresso); font-size:0.98rem; letter-spacing:-0.02em; }
.aw-dots { color:var(--cocoa); letter-spacing:2px; }
.aw-greet { font-size:0.76rem; color:var(--cocoa); }
.aw-card { background:var(--frost); border:1px solid var(--line); border-radius:14px; padding:12px; display:grid; gap:9px; }
.aw-row { display:flex; align-items:center; gap:10px; }
.aw-av { width:38px; height:38px; border-radius:11px; background:var(--mint); color:var(--forest); font-weight:700; font-size:0.82rem; display:flex; align-items:center; justify-content:center; flex:none; }
.aw-name { font-size:0.85rem; font-weight:600; color:var(--forest); }
.aw-meta { font-size:0.7rem; color:var(--cocoa); }
.aw-rate { margin-left:auto; font-size:0.76rem; font-weight:700; color:var(--forest); white-space:nowrap; }
.aw-rate b { color:var(--mint-deep); }
.aw-note { font-size:0.74rem; color:var(--espresso); line-height:1.5; }
.aw-note b { color:var(--forest); }
.aw-pill { display:inline-flex; align-self:start; font-size:0.62rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--mint-deep); background:rgba(69,251,178,0.16); border-radius:999px; padding:4px 9px; }
.aw-stat { font-size:1.7rem; font-weight:700; color:var(--forest); line-height:1; }
.aw-stat em { font-style:normal; color:var(--mint-deep); }
.aw-chart { display:flex; align-items:flex-end; gap:6px; height:54px; }
.aw-chart i { flex:1; background:linear-gradient(180deg,var(--mint),var(--mint-deep)); border-radius:4px 4px 0 0; }
.aw-btn { background:var(--mint); color:var(--forest); border-radius:10px; padding:10px; font-weight:700; font-size:0.8rem; text-align:center; }
.float-card { position:absolute; bottom:6%; left:-2%; background:var(--white); border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 44px rgba(16,18,27,0.22); padding:11px 15px; font-size:0.78rem; }
.float-card .up { color:var(--mint-deep); font-weight:700; display:block; }
.float-card .lbl { font-size:0.66rem; color:var(--cocoa); }

/* subtle entrance (motion 6, motivated: hierarchy on load) */
@media (prefers-reduced-motion:no-preference){
  .reveal { opacity:0; transform:translateY(18px); animation:rise .7s cubic-bezier(.16,1,.3,1) forwards; }
  .reveal.d1{animation-delay:.08s}.reveal.d2{animation-delay:.16s}.reveal.d3{animation-delay:.24s}.reveal.d4{animation-delay:.34s}
  @keyframes rise { to { opacity:1; transform:none; } }
  .reveal-on-scroll { opacity:0; transform:perspective(1200px) translateY(40px) translateZ(-90px) rotateX(7deg); transition:opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1); }
  .reveal-on-scroll.in { opacity:1; transform:perspective(1200px) translateY(0) translateZ(0) rotateX(0deg); }
}

/* =====================================================================
   PROOF BAR — trust checks + university marquee (under hero)
   ===================================================================== */
.proofbar { padding:34px 0 8px; }
.proof-checks { display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(14px,2.6vw,40px); }
.proof-check { display:inline-flex; align-items:center; gap:8px; font-size:0.9rem; font-weight:500; color:var(--espresso); white-space:nowrap; }
.proof-check svg { width:18px; height:18px; flex:none; }
.proof-check svg circle { fill:var(--mint); }
.proof-check svg path { stroke:var(--forest); stroke-width:2.2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.trusted { padding:32px 0 8px; }
.trusted-label { text-align:center; font-size:0.74rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--cocoa); margin-bottom:18px; }
.marquee { overflow:hidden; -webkit-mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent); mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent); }
.marquee-track { display:flex; align-items:center; gap:72px; width:max-content; animation:marquee 34s linear infinite; padding-right:72px; }
.marquee-track img { height:40px; width:auto; opacity:0.85; filter:grayscale(1) contrast(1.15); transition:opacity .25s ease, filter .25s ease; }
.marquee-track img:hover { opacity:1; filter:grayscale(0); }
@keyframes marquee { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marquee-track { animation:none; flex-wrap:wrap; width:auto; justify-content:center; } }

/* =====================================================================
   HOW IT WORKS — 3 steps (distinct layout family: numbered, no cards)
   ===================================================================== */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:3rem; counter-reset:step; }
.step { position:relative; padding-top:18px; border-top:2px solid var(--line); }
.step::before { counter-increment:step; content:counter(step); position:absolute; top:-20px; left:0; width:38px; height:38px; border-radius:12px; background:var(--mint); color:var(--forest); font-weight:700; display:flex; align-items:center; justify-content:center; font-size:1.05rem; }
.step h3 { margin:0.4rem 0 0.4rem; }
.step p { color:var(--cocoa); font-size:0.96rem; }
@media (max-width:760px){ .steps { grid-template-columns:1fr; gap:36px; } }

/* helper indicators */
.app-pill { display:inline-flex; align-items:center; gap:8px; background:rgba(69,251,178,0.16); color:var(--mint-deep); font-size:0.8rem; font-weight:600; border-radius:999px; padding:6px 14px; }
.app-pill .dot-live { width:8px; height:8px; border-radius:999px; background:var(--mint-deep); animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:0.45; transform:scale(0.8);} }
.sc-link { display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--link); text-decoration:none; font-size:0.95rem; }
.sc-link::after { content:"\2192"; transition:transform .15s ease; }
.sc-link:hover::after { transform:translateX(3px); }

/* =====================================================================
   APP SHOWCASE — expandable boxes (payments demo, live map, booking)
   ===================================================================== */
.app-showcase { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:3rem; text-align:left; }
.sc-card { position:relative; background:var(--white); border:1px solid var(--line); border-radius:var(--r-card); padding:30px 30px 0; overflow:hidden; box-shadow:0 18px 50px rgba(16,18,27,0.08); display:flex; flex-direction:column; min-height:380px; cursor:pointer; transition:transform .18s ease, box-shadow .25s ease; }
.sc-card:hover { transform:translateY(-3px); box-shadow:0 26px 64px rgba(16,18,27,0.13); }
.sc-card.wide { grid-column:1 / -1; }
.sc-card .sc-eyebrow { font-size:0.7rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--link); margin-bottom:0.7rem; }
.sc-card h3 { font-size:1.34rem; line-height:1.2; margin-bottom:0.5rem; max-width:19ch; }
.sc-card .sc-desc { color:var(--cocoa); font-size:0.95rem; line-height:1.55; max-width:40ch; }
.sc-expand { position:absolute; top:22px; right:22px; width:40px; height:40px; border:1px solid var(--line); background:var(--frost); border-radius:12px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--forest); transition:background .15s, transform .15s, border-color .15s; z-index:6; }
.sc-expand:hover { background:var(--mint); border-color:var(--mint); transform:scale(1.06); }
.sc-expand svg { width:16px; height:16px; }
.sc-stage { position:relative; margin:26px -30px 0; padding:30px 30px 0; flex:1; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; }
.sc-stage::before { content:""; position:absolute; inset:0; z-index:0; background:radial-gradient(85% 78% at 50% 118%, rgba(69,251,178,0.22), rgba(0,224,232,0.06) 55%, transparent 76%); }
.sc-stage > * { position:relative; z-index:1; }
.app-showcase > .sc-card:nth-of-type(2) .sc-stage::before { background:radial-gradient(85% 78% at 50% 118%, rgba(0,224,232,0.20), rgba(202,159,255,0.13) 55%, transparent 76%); }
.sc-card.wide { flex-direction:row; align-items:stretch; gap:0; padding:0; min-height:400px; }
.sc-card.wide .sc-copy { flex:1 1 0; align-self:center; padding:46px 12px 46px 46px; max-width:42ch; }
.sc-card.wide .sc-copy h3 { font-size:1.75rem; max-width:none; }
.sc-card.wide .sc-stage { flex:1 1 auto; margin:0; padding:44px 44px 0; align-items:flex-end; justify-content:center; }
.sc-card.wide .sc-stage::before { background:linear-gradient(150deg, rgba(0,224,232,0.18) 0%, rgba(202,159,255,0.16) 50%, rgba(254,1,154,0.13) 100%); }

/* app mockup bleed variant (in-card) */
.appwin.bleed { border-radius:22px 22px 0 0; box-shadow:0 -1px 0 var(--line), 0 24px 50px rgba(16,18,27,0.10); padding-bottom:26px; }
.aw-line { height:9px; border-radius:6px; background:#eef1f3; }

/* payments animated demo */
.paydemo { position:relative; width:300px; height:352px; flex:none; align-self:flex-end; }
.pay-step { position:absolute; inset:auto 0 0 0; opacity:0; animation:payCycle 12s ease-in-out infinite; }
.pay-step.s2{animation-delay:3s}.pay-step.s3{animation-delay:6s}.pay-step.s4{animation-delay:9s}
@keyframes payCycle { 0%{opacity:0;transform:translateY(12px) scale(.985)}3%{opacity:1;transform:translateY(0) scale(1)}25%{opacity:1;transform:translateY(0) scale(1)}28%{opacity:0;transform:translateY(-8px) scale(.985)}100%{opacity:0;transform:translateY(-8px) scale(.985)} }
.pkg { display:flex; align-items:center; gap:10px; background:var(--white); border:1.5px solid var(--line); border-radius:12px; padding:10px 12px; }
.pkg.sel { border-color:var(--mint); background:rgba(69,251,178,0.10); }
.pkg .h { font-size:0.82rem; font-weight:600; color:var(--forest); }
.pkg .save { font-size:0.62rem; font-weight:700; color:var(--mint-deep); }
.pkg .pr { margin-left:auto; font-size:0.84rem; font-weight:700; color:var(--forest); white-space:nowrap; }
.pkg .tick { width:18px; height:18px; border-radius:99px; border:1.5px solid var(--line); flex:none; }
.pkg.sel .tick { background:var(--mint); border-color:var(--mint); }
.pay-meth { display:flex; align-items:center; gap:9px; font-size:0.78rem; font-weight:600; color:var(--forest); background:var(--white); border:1.5px solid var(--line); border-radius:12px; padding:11px 12px; }
.pay-meth.sel { border-color:var(--mint); }
.pay-meth .col { display:flex; flex-direction:column; line-height:1.25; }
.pay-meth .sub { font-size:0.62rem; font-weight:500; color:var(--cocoa); }
.pay-total { display:flex; align-items:baseline; justify-content:space-between; padding:2px 2px 0; }
.pay-total .l { font-size:0.74rem; color:var(--cocoa); }
.pay-total .v { font-size:1.1rem; font-weight:700; color:var(--forest); }
.pay-ok { display:grid; gap:10px; justify-items:center; text-align:center; padding:14px 6px 6px; }
.pay-ok .check { width:54px; height:54px; border-radius:99px; background:var(--mint); color:var(--forest); display:flex; align-items:center; justify-content:center; font-size:1.6rem; font-weight:800; }
.pay-ok .t { font-size:0.95rem; font-weight:700; color:var(--forest); }
.pay-ok .s { font-size:0.74rem; color:var(--cocoa); }
.pay-dots { display:flex; gap:6px; justify-content:center; }
.pay-dots i { width:6px; height:6px; border-radius:99px; background:#d7dde2; transition:width .2s ease; }
.pay-dots i.on { width:18px; background:var(--mint-deep); }
.pay-field { border:1.5px solid var(--line); border-radius:12px; padding:8px 12px; display:grid; gap:2px; }
.pay-field.focus { border-color:var(--mint); box-shadow:0 0 0 3px rgba(69,251,178,0.18); }
.pay-field .lab { font-size:0.58rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--cocoa); }
.pay-field .val { font-size:0.86rem; font-weight:600; color:var(--forest); font-variant-numeric:tabular-nums; display:flex; align-items:center; }
.pay-field .cur { display:inline-block; width:1.5px; height:15px; background:var(--mint-deep); margin-left:3px; animation:blink 1.1s steps(1) infinite; }
.pay-2col { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
@keyframes blink { 0%,50%{opacity:1} 51%,100%{opacity:0} }
.pm-logo { height:19px; width:auto; display:block; }
.pay-meth.pay-applepay { padding-top:13px; padding-bottom:13px; }
.pm-cards { margin-left:auto; display:inline-flex; align-items:center; gap:7px; }
.pm-cards img { height:15px; width:auto; display:block; }
.pm-tabby-img { height:22px; width:auto; display:block; }

/* live-map booking mockup */
.appmap { width:100%; max-width:300px; background:var(--white); border:1px solid var(--line); border-radius:22px; box-shadow:0 24px 50px rgba(16,18,27,0.14); overflow:hidden; }
.appmap.bleed { border-radius:22px 22px 0 0; box-shadow:0 -1px 0 var(--line), 0 24px 50px rgba(16,18,27,0.10); }
.appmap .map { position:relative; height:178px; background:linear-gradient(180deg,#e9f1ee,#e0eae7); }
.appmap .map svg { width:100%; height:100%; display:block; }
.appmap .map-sheet { padding:13px 15px 16px; display:grid; gap:9px; }
.map-eta { margin-left:auto; font-weight:700; color:var(--mint-deep); font-size:0.84rem; white-space:nowrap; }
.map-bar { height:6px; border-radius:99px; background:#eef1f3; overflow:hidden; }
.map-bar i { display:block; height:100%; width:40%; background:linear-gradient(90deg,var(--mint),var(--mint-deep)); border-radius:99px; animation:mapfill 6s ease-in-out infinite; }
@keyframes mapfill { 0%{width:10%}100%{width:92%} }
.map-status { font-size:0.72rem; color:var(--cocoa); }
.map-status b { color:var(--forest); }

/* expand modal */
.scm { position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:24px; }
.scm.open { display:flex; }
.scm-back { position:absolute; inset:0; background:rgba(16,18,27,0.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.scm-box { position:relative; z-index:2; width:min(960px,100%); max-height:90vh; overflow:auto; background:var(--white); border-radius:24px; box-shadow:0 40px 90px rgba(16,18,27,0.35); animation:scmrise .25s ease; }
@keyframes scmrise { from{opacity:0;transform:translateY(18px) scale(.98)} to{opacity:1;transform:none} }
.scm-close { position:absolute; top:18px; right:18px; width:38px; height:38px; border:1px solid var(--line); background:var(--frost); border-radius:11px; cursor:pointer; font-size:1.1rem; color:var(--forest); display:inline-flex; align-items:center; justify-content:center; z-index:5; }
.scm-close:hover { background:var(--mint); border-color:var(--mint); }
.scm-grid { display:grid; grid-template-columns:1.05fr 0.95fr; }
.scm-text { padding:48px 44px; }
.scm-text .sc-eyebrow { font-size:0.72rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--link); margin-bottom:0.9rem; display:block; }
.scm-text h3 { font-size:1.9rem; line-height:1.15; margin-bottom:0.8rem; }
.scm-text p { color:var(--cocoa); font-size:1rem; line-height:1.6; margin-bottom:1.4rem; }
.scm-checks { list-style:none; display:grid; gap:12px; margin-bottom:1.8rem; }
.scm-checks li { display:flex; align-items:flex-start; gap:10px; font-size:0.95rem; color:var(--espresso); }
.scm-checks li svg { width:20px; height:20px; flex:none; margin-top:1px; }
.scm-checks li svg circle { fill:var(--mint); }
.scm-checks li svg path { stroke:var(--forest); stroke-width:2.2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.scm-stage { background:var(--frost); border-left:1px solid var(--line); border-radius:0 24px 24px 0; display:flex; align-items:center; justify-content:center; padding:40px 30px; position:relative; overflow:hidden; }
.scm-stage::before { content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 70% 10%, rgba(69,251,178,0.16), transparent 60%); }
.scm-stage .appwin, .scm-stage .paydemo, .scm-stage .appmap { position:relative; z-index:1; }
.scm-stage .paydemo { align-self:center; }
@media (max-width:880px){
  .app-showcase { grid-template-columns:1fr; }
  .sc-card.wide { flex-direction:column; padding:0; min-height:0; }
  .sc-card.wide .sc-copy { padding:30px 30px 0; max-width:none; }
  .sc-card.wide .sc-stage { width:100%; padding:30px 30px 0; }
  .paydemo { width:100%; max-width:300px; margin:0 auto; }
  .scm-grid { grid-template-columns:1fr; }
  .scm-text { padding:40px 28px 28px; }
  .scm-stage { border-left:none; border-top:1px solid var(--line); border-radius:0; padding:30px 24px; }
}
@media (prefers-reduced-motion:reduce){
  .pay-step { animation:none; }
  .pay-step.s1 { opacity:1; }
  .pay-step.s2,.pay-step.s3,.pay-step.s4 { display:none; }
  .map-bar i { animation:none; width:64%; }
}

/* =====================================================================
   WAYS TO LEARN — brand gradient band + dark-glass cards (loved section)
   ===================================================================== */
.grad-section { background:var(--grad-mint-teal); color:#fff; border-radius:32px; margin:0 24px; padding:80px 0; position:relative; overflow:hidden; }
.grad-section .container { position:relative; z-index:1; }
.grad-section .section-head h2 { color:#fff; }
.grad-section .section-head .sub { color:rgba(255,255,255,0.9); }
.grad-section .eyebrow { color:rgba(255,255,255,0.85); }
.glass-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:2.6rem; text-align:left; }
@media (max-width:880px){ .glass-grid { grid-template-columns:1fr; } .grad-section { margin:0 12px; border-radius:24px; } }
.glass-card { background:rgba(16,18,27,0.42); -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%); border:1px solid rgba(255,255,255,0.16); border-radius:18px; padding:26px; box-shadow:inset 0 1px 0 rgba(255,255,255,0.12); }
.glass-card h3 { color:#fff; }.glass-card p { color:rgba(255,255,255,0.88); font-size:0.95rem; line-height:1.55; }
.btn-glass { display:inline-flex; align-items:center; gap:6px; background:rgba(16,18,27,0.5); border:1.5px solid var(--mint); color:var(--mint); border-radius:999px; padding:11px 22px; font-weight:600; font-family:var(--sans); font-size:0.9rem; margin-top:1.3rem; transition:background .18s, color .18s; }
.btn-glass::after { content:"\2192"; }
.btn-glass:hover { background:var(--mint); color:var(--forest); }

/* =====================================================================
   WHY DURUSI — editorial differentiators (border-top, no cards)
   ===================================================================== */
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px 40px; margin-top:3rem; }
.why-item { border-top:2px solid var(--line); padding-top:18px; }
.why-item .ic { width:40px; height:40px; border-radius:12px; background:rgba(69,251,178,0.16); color:var(--mint-deep); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.why-item .ic svg { width:22px; height:22px; }
.why-item h3 { font-size:1.12rem; margin-bottom:0.4rem; }
.why-item p { color:var(--cocoa); font-size:0.95rem; line-height:1.55; }
@media (max-width:760px){ .why-grid { grid-template-columns:1fr; gap:28px; } }

/* =====================================================================
   RESULTS — testimonials + stats band
   ===================================================================== */
.quotes { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:3rem; }
.quote { background:var(--white); border:1px solid var(--line); border-radius:var(--r-card); padding:30px; box-shadow:0 14px 40px rgba(16,18,27,0.06); }
.quote .stars { color:var(--mint-deep); font-size:0.9rem; letter-spacing:2px; }
.quote blockquote { font-size:1.08rem; line-height:1.55; color:var(--forest); margin:0.8rem 0 1.2rem; }
.quote .res { display:inline-block; font-size:0.78rem; font-weight:700; color:var(--mint-deep); background:rgba(69,251,178,0.16); border-radius:999px; padding:4px 11px; margin-bottom:1rem; }
.quote cite { display:flex; align-items:center; gap:10px; font-style:normal; font-size:0.86rem; color:var(--cocoa); }
.quote cite .av { width:34px; height:34px; border-radius:99px; background:var(--forest); color:#fff; font-weight:700; font-size:0.78rem; display:flex; align-items:center; justify-content:center; }
.stats-band { margin-top:24px; background:var(--white); border:1px solid var(--line); border-radius:var(--r-card); padding:34px; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; box-shadow:0 14px 40px rgba(16,18,27,0.06); }
.stats-band .num { font-size:2.2rem; font-weight:700; color:var(--forest); line-height:1; }
.stats-band .num em { font-style:normal; color:var(--mint-deep); }
.stats-band .label { display:block; font-size:0.82rem; color:var(--cocoa); margin-top:8px; }
@media (max-width:880px){ .quotes { grid-template-columns:1fr; } .stats-band { grid-template-columns:1fr 1fr; gap:26px; } }

/* =====================================================================
   TWO PATHS — parents / become a mentor
   ===================================================================== */
.paths { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:3rem; text-align:left; }
.path { border-radius:var(--r-card); padding:36px; }
.path.parents { background:var(--white); border:1px solid var(--line); box-shadow:0 14px 40px rgba(16,18,27,0.06); }
.path.mentor { background:var(--grad-lilac-currant); color:#fff; }
.path.mentor h3, .path.mentor .tag { color:#fff; }
.path .tag { display:inline-block; font-size:0.72rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--link); margin-bottom:0.8rem; }
.path.mentor .tag { color:var(--mint); }
.path h3 { font-size:1.4rem; margin-bottom:0.6rem; }
.path p { color:var(--cocoa); font-size:0.98rem; margin-bottom:1.2rem; }
.path.mentor p { color:rgba(255,255,255,0.9); }
.path ul { list-style:none; display:grid; gap:9px; margin-bottom:1.5rem; }
.path li { font-size:0.94rem; padding-left:24px; position:relative; }
.path li::before { content:"\2713"; position:absolute; left:0; color:var(--mint-deep); font-weight:700; }
.path.mentor li::before { color:var(--mint); }
@media (max-width:760px){ .paths { grid-template-columns:1fr; } }

/* =====================================================================
   FAQ — accordion
   ===================================================================== */
.faq { max-width:760px; margin:3rem auto 0; }
.faq details { border-bottom:1px solid var(--line); padding:6px 0; }
.faq summary { cursor:pointer; list-style:none; padding:16px 40px 16px 0; font-weight:600; color:var(--forest); position:relative; font-size:1.04rem; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:6px; top:14px; font-size:1.4rem; font-weight:400; color:var(--mint-deep); transition:transform .2s; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { color:var(--cocoa); padding:0 40px 18px 0; line-height:1.6; }

/* =====================================================================
   CTA BAND + FOOTER
   ===================================================================== */
.cta-band { background:var(--grad-electric-magenta); border-radius:32px; margin:0 24px; padding:72px 24px; text-align:center; color:#fff; }
.cta-band h2 { color:#fff; max-width:18ch; margin:0 auto; }
.cta-band p { color:rgba(255,255,255,0.92); margin:1rem auto 2rem; max-width:46ch; font-size:1.08rem; }
.cta-band .btn-primary { background:#fff; color:var(--forest); }
@media (max-width:760px){ .cta-band { margin:0 12px; border-radius:24px; } }

/* Footer — green gradient brand-moment with a giant fading wordmark */
.site-footer { position:relative; overflow:hidden; border:0; margin-top:96px; padding:84px 0 0; background:var(--foot-grad, linear-gradient(180deg,#0C5C42 0%,#15AC76 46%,#7FE3BD 76%,#EAF7F0 100%)); color:#fff; }
.site-footer .container { position:relative; z-index:2; }
.foot-cols { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; }
.foot-cols h4 { font-size:0.74rem; letter-spacing:0.12em; text-transform:uppercase; font-weight:600; color:rgba(255,255,255,0.62); margin-bottom:1rem; }
.foot-cols ul { list-style:none; display:grid; gap:11px; }
.foot-cols a { color:rgba(255,255,255,0.88); font-size:0.95rem; text-decoration:none; transition:color .15s; }
.foot-cols a:hover { color:#fff; }
.foot-brand .logo-img { height:30px; margin-bottom:0.8rem; filter:brightness(0) invert(1); }
.foot-brand p { font-size:0.92rem; color:rgba(255,255,255,0.82); max-width:300px; line-height:1.6; }
.foot-license { display:inline-flex; align-items:center; gap:7px; font-size:0.82rem; color:rgba(255,255,255,0.82); margin-top:1rem; }
.foot-license svg { width:16px; height:16px; flex:none; }
.foot-license svg circle { fill:#fff; } .foot-license svg path { stroke:#15AC76; stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.foot-bottom { position:relative; z-index:2; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:52px; padding-top:22px; border-top:1px solid rgba(255,255,255,0.20); font-size:0.84rem; color:rgba(255,255,255,0.78); }
.foot-bottom a { color:rgba(255,255,255,0.78); }
.site-footer::after { content:"durusi"; display:block; position:relative; z-index:1; margin:34px 0 -0.16em; font-family:var(--sans); font-weight:700; letter-spacing:-0.03em; font-size:26vw; line-height:0.8; text-align:center; white-space:nowrap; color:#fff; -webkit-mask-image:linear-gradient(180deg,rgba(255,255,255,0.95) 28%,rgba(255,255,255,0) 86%); mask-image:linear-gradient(180deg,rgba(255,255,255,0.95) 28%,rgba(255,255,255,0) 86%); pointer-events:none; user-select:none; }
@media (max-width:880px){ .foot-cols { grid-template-columns:1fr 1fr; } .foot-brand { grid-column:1 / -1; } .site-footer{ margin-top:64px; } .site-footer::after{ font-size:33vw; } }

/* WhatsApp float */
.wa-float { position:fixed; right:20px; bottom:20px; width:54px; height:54px; border-radius:99px; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(37,211,102,0.4); z-index:80; }
.wa-float svg { width:30px; height:30px; fill:#fff; }

/* =====================================================================
   App design-language overrides (pink/violet/purple + ivory glass)
   ===================================================================== */
.section-head h2 { color:var(--forest); }
.grad-section .section-head h2, .cta-band h2 { color:#fff; }
.eyebrow, .sc-card .sc-eyebrow, .scm-text .sc-eyebrow, .path .tag { color:var(--mint-deep); }
/* eyebrows on the dark green sections go bright mint for contrast */
.hero .eyebrow, .grad-section .eyebrow, .cta-band .eyebrow { color:var(--mint); }
.path.mentor .tag { color:#fff; }
/* dark forest text on filled mint elements (mint is light) */
.btn-primary, .aw-btn, .aw-av, .pay-ok .check { color:var(--forest); }
.btn-primary { box-shadow:0 8px 24px rgba(69,251,178,0.40); }
.btn-primary:hover { box-shadow:0 14px 34px rgba(69,251,178,0.52); }
/* soft neutral / teal glow shadows */
.sc-card, .quote, .stats-band, .path.parents { box-shadow:0 18px 46px rgba(16,40,24,0.10); }
.sc-card:hover { box-shadow:0 26px 64px rgba(16,40,24,0.16); }
.appwin { box-shadow:0 24px 54px rgba(12,51,59,0.22); }
.appwin.bleed, .appmap.bleed { box-shadow:0 -1px 0 var(--line), 0 24px 50px rgba(12,51,59,0.16); }
/* green accent tints */
.aw-pill, .app-pill { color:var(--mint-deep); background:rgba(69,251,178,0.16); }
.app-pill .dot-live { background:var(--mint-deep); }
.aw-pill { color:var(--mint-deep); background:rgba(69,251,178,0.16); }
.why-item .ic { background:rgba(69,251,178,0.16); color:var(--mint-deep); }
.pkg.sel { background:rgba(69,251,178,0.10); }
.pay-field.focus { box-shadow:0 0 0 3px rgba(69,251,178,0.25); }
.sc-stage::before { background:radial-gradient(85% 78% at 50% 118%, rgba(69,251,178,0.22), rgba(0,224,232,0.07) 55%, transparent 76%); }
.app-showcase > .sc-card:nth-of-type(2) .sc-stage::before { background:radial-gradient(85% 78% at 50% 118%, rgba(0,224,232,0.20), rgba(69,251,178,0.12) 55%, transparent 76%); }
.sc-card.wide .sc-stage::before { background:linear-gradient(150deg, rgba(0,224,232,0.16) 0%, rgba(69,251,178,0.16) 50%, rgba(21,172,118,0.14) 100%); }
.scm-stage::before { background:radial-gradient(120% 90% at 70% 10%, rgba(69,251,178,0.16), transparent 60%); }
/* "coming soon" badge for roadmap features */
.sc-soon { position:absolute; top:22px; left:30px; z-index:6; display:inline-flex; align-items:center; gap:6px; font-size:0.62rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--deep-teal); background:rgba(69,251,178,0.18); border:1px solid rgba(21,172,118,0.32); border-radius:999px; padding:5px 11px; }
.sc-card.wide .sc-soon { left:46px; top:30px; }
.sc-card.is-soon .sc-eyebrow { color:var(--deep-teal); }

/* ---- hero subject chips (replaces +2 grades) ---- */
.aw-cardlabel { font-size:0.74rem; font-weight:700; color:var(--forest); }
.aw-chips { display:flex; flex-wrap:wrap; gap:6px; }
.aw-chips span { font-size:0.68rem; font-weight:600; color:var(--cocoa); background:var(--white); border:1px solid var(--line); border-radius:999px; padding:4px 10px; }
.aw-chips span.on { background:var(--mint); color:var(--forest); border-color:var(--mint); }

/* ---- iPhone app preview (payments box) ---- */
.iphone { width:272px; flex:none; background:#0d0d11; border-radius:54px; padding:12px; position:relative; box-shadow:0 36px 80px rgba(12,51,59,0.36), inset 0 0 0 2px rgba(255,255,255,0.07); pointer-events:none; -webkit-user-select:none; user-select:none; }
.iphone img { -webkit-user-drag:none; user-drag:none; }
.iphone__screen { position:relative; height:560px; border-radius:44px; overflow:hidden; background:#fff; }
.iphone__island { position:absolute; top:12px; left:50%; transform:translateX(-50%); width:88px; height:26px; background:#000; border-radius:99px; z-index:20; }
.iphone__status { position:absolute; top:0; left:0; right:0; height:46px; display:flex; align-items:center; justify-content:space-between; padding:16px 26px 0; font-size:0.72rem; font-weight:700; color:#fff; z-index:15; }
.iphone__status .bars { display:inline-flex; gap:5px; align-items:center; font-size:0.62rem; }
.iphone__home { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); width:118px; height:5px; border-radius:99px; background:rgba(255,255,255,0.5); z-index:20; }
.payscreen { position:absolute; inset:0; display:flex; flex-direction:column; opacity:0; animation:payCycle3 13.5s ease-in-out infinite; }
.payscreen.p2 { animation-delay:4.5s; } .payscreen.p3 { animation-delay:9s; }
@keyframes payCycle3 { 0%{opacity:0} 2.5%{opacity:1} 30%{opacity:1} 33%{opacity:0} 100%{opacity:0} }
.ps-head { background:var(--grad-electric-magenta); color:#fff; padding:54px 20px 20px; }
.ps-head .t { font-size:1.1rem; font-weight:700; letter-spacing:-0.01em; }
.ps-head .s { font-size:0.76rem; opacity:0.92; margin-top:3px; }
.ps-body { flex:1; padding:16px; display:flex; flex-direction:column; gap:10px; background:#fff; }
.ps-btn { margin-top:auto; background:var(--mint); color:var(--forest); border-radius:14px; padding:14px; text-align:center; font-weight:700; font-size:0.92rem; box-shadow:0 8px 20px rgba(69,251,178,0.4); }
.ps-check { width:62px; height:62px; border-radius:99px; background:var(--pink); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.9rem; font-weight:800; margin:6px auto 0; }
.ps-okt { font-size:1.05rem; font-weight:700; color:var(--forest); text-align:center; }
.ps-oks { font-size:0.8rem; color:var(--cocoa); margin-top:2px; text-align:center; }
.sc-card.wide .sc-stage.sc-stage-phone { align-items:center; padding:42px 40px; min-height:0; }
.sc-card.wide:has(.iphone) { min-height:0; }
.scm-stage .iphone { box-shadow:0 30px 70px rgba(12,51,59,0.3); }
@media (prefers-reduced-motion:reduce){ .payscreen { animation:none; } .payscreen.p1 { opacity:1; } .payscreen.p2,.payscreen.p3 { display:none; } }
@media (max-width:880px){ .iphone { width:248px; } .iphone__screen { height:510px; } .sc-card.wide .sc-stage.sc-stage-phone { padding:30px; } }

/* ---- Zenda-style alternating app showcase: one column, big cards, zig-zag ---- */
.app-showcase { display:flex; flex-direction:column; gap:24px; margin-top:3rem; text-align:left; }
.app-showcase > .sc-card { grid-column:auto; }
.app-showcase > .sc-card.wide { flex-direction:row; align-items:stretch; gap:0; padding:0; min-height:440px; }
.app-showcase > .sc-card.wide:nth-child(even) { flex-direction:row-reverse; }
.sc-card.wide .sc-copy { flex:1 1 0; align-self:center; padding:54px; max-width:46ch; }
.sc-card.wide .sc-copy h3 { font-size:1.95rem; line-height:1.16; max-width:18ch; margin-bottom:0.7rem; }
.sc-card.wide .sc-copy .sc-desc { font-size:1.02rem; line-height:1.6; max-width:38ch; }
.sc-card.wide .sc-stage.sc-stage-phone { flex:1 1 0; align-items:center; justify-content:center; padding:48px 40px; min-height:0; margin:0; }
.sc-link { display:inline-block; margin-top:20px; font-weight:700; font-size:0.94rem; color:var(--mint-deep); }
.sc-link::after { content:" \2192"; }

.sc-soon-inline { display:inline-flex; align-items:center; vertical-align:middle; margin-left:10px; font-size:0.6rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--deep-teal); background:rgba(69,251,178,0.18); border:1px solid rgba(21,172,118,0.32); border-radius:999px; padding:4px 9px; }

/* ============================================================
   Checkout screens (payments iPhone) = dark green glass app UI.
   Scoped to .payscreen so the Book/Live phones stay light.
   ============================================================ */
.iphone:has(.payscreen) .iphone__screen { background:#0c2018; }
.iphone:has(.payscreen) .iphone__home { background:rgba(255,255,255,0.5); }
.payscreen { background:linear-gradient(172deg,#0C3D45 0%,#0C333B 46%,#0d2218 100%); }
.payscreen::before { content:""; position:absolute; inset:0 0 auto 0; height:52%; background:radial-gradient(125% 80% at 50% -8%, rgba(0,224,232,0.20), transparent 72%); pointer-events:none; z-index:0; }
.payscreen > * { position:relative; z-index:1; }
.payscreen .ps-head { background:transparent; padding:56px 22px 12px; }
.payscreen .ps-head .s { color:rgba(255,255,255,0.72); opacity:1; }
.payscreen .ps-body { background:transparent; }
/* glass selectable cards */
.payscreen .pkg, .payscreen .pay-meth { background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.15); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:#fff; }
.payscreen .pkg .h, .payscreen .pkg .pr, .payscreen .pay-meth { color:#fff; }
.payscreen .pkg .save { color:var(--mint); }
.payscreen .pkg .tick { border-color:rgba(255,255,255,0.5); }
.payscreen .pkg.sel, .payscreen .pay-meth.sel { border-color:var(--mint); background:rgba(69,251,178,0.13); box-shadow:0 0 0 1px rgba(69,251,178,0.55), 0 10px 26px rgba(69,251,178,0.16); }
.payscreen .pkg.sel .tick { background:var(--mint); border-color:var(--mint); }
.payscreen .pay-meth .sub { color:rgba(255,255,255,0.62); }
.payscreen .pay-total { color:#fff; border-top:1px solid rgba(255,255,255,0.14); margin-top:4px; padding:12px 2px 0; }
.payscreen .pay-total .l { color:rgba(255,255,255,0.72); }
.payscreen .pay-total .v { color:#fff; }
/* brand logos on dark: Apple Pay -> white via invert, Visa/MC -> white chips, Tabby stays green */
.payscreen .pay-applepay .pm-logo { filter:brightness(0) invert(1); }
.payscreen .pm-cards img { height:16px; width:auto; filter:brightness(0) invert(1); opacity:0.9; }
.payscreen .pm-cards { gap:9px; }
/* Tabby keeps its real green badge (not a white silhouette) */
.payscreen .pm-tabby img { filter:none; opacity:1; height:18px; border-radius:4px; }
/* confirmed screen */
.payscreen .ps-check { background:var(--mint); color:var(--forest); box-shadow:0 10px 28px rgba(69,251,178,0.4); }
.payscreen .ps-okt { color:#fff; }
.payscreen .ps-oks { color:rgba(255,255,255,0.7); }

/* static (non-cycling) app screen inside the phone = dark green glass too */
.appscreen { position:absolute; inset:0; display:flex; flex-direction:column; background:linear-gradient(172deg,#0C3D45 0%,#0C333B 46%,#0d2218 100%); }
.appscreen::before { content:""; position:absolute; inset:0 0 auto 0; height:52%; background:radial-gradient(125% 80% at 50% -8%, rgba(0,224,232,0.20), transparent 72%); pointer-events:none; z-index:0; }
.appscreen > * { position:relative; z-index:1; }
.appscreen .ps-head { background:transparent; padding:56px 22px 12px; }
.appscreen .ps-head .s { color:rgba(255,255,255,0.72); opacity:1; }
.appscreen .ps-body { background:transparent; }
/* hero phone home screen bits */
.hs-note { font-size:0.72rem; color:rgba(255,255,255,0.85); background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:12px; padding:9px 12px; }
.hs-note b { color:#fff; }
.hs-label { font-size:0.7rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:rgba(255,255,255,0.55); margin-top:2px; }
.hs-chips { display:flex; flex-wrap:wrap; gap:7px; }
.hs-chips span { font-size:0.72rem; font-weight:600; color:rgba(255,255,255,0.85); background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); border-radius:999px; padding:5px 11px; }
.hs-chips span.on { background:var(--mint); color:var(--forest); border-color:var(--mint); }
/* hero phone: stronger depth + faint edge so it separates from the dark hero */
.hero-art .iphone { box-shadow:0 44px 90px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.07); }

/* in-phone mentor list (Book) = dark glass */
.ps-mentor { display:flex; align-items:center; gap:10px; border:1px solid rgba(255,255,255,0.14); border-radius:13px; padding:8px 11px; background:rgba(255,255,255,0.06); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.ps-mentor.sel { border-color:var(--mint); background:rgba(69,251,178,0.12); box-shadow:0 0 0 1px rgba(69,251,178,0.5), 0 8px 22px rgba(69,251,178,0.14); }
.ps-av { width:34px; height:34px; border-radius:11px; background:var(--mint); color:var(--forest); font-weight:700; font-size:0.76rem; display:flex; align-items:center; justify-content:center; flex:none; }
.ps-mn { font-size:0.84rem; font-weight:600; color:#fff; letter-spacing:-0.01em; }
.ps-mm { font-size:0.68rem; color:rgba(255,255,255,0.55); }
.ps-rate { margin-left:auto; font-size:0.74rem; font-weight:700; color:var(--mint); white-space:nowrap; }

/* in-phone live map (Live) = dark map + glass sheet */
.ps-map { position:relative; flex:1; overflow:hidden; background:#0d2017; }
.ps-mapimg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.ps-route { position:absolute; inset:0; width:100%; height:100%; display:block; }
.ps-mapattr { position:absolute; top:6px; right:9px; z-index:3; font-size:0.52rem; letter-spacing:0.01em; color:rgba(255,255,255,0.45); }
.ps-sheet { position:absolute; left:12px; right:12px; bottom:16px; background:rgba(16,36,29,0.82); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,0.14); border-radius:18px; padding:12px 14px; box-shadow:0 18px 40px rgba(0,0,0,0.38); display:flex; flex-direction:column; gap:9px; }
.ps-eta { margin-left:auto; font-size:0.85rem; font-weight:800; color:var(--mint); white-space:nowrap; }
.ps-track { position:relative; height:7px; border-radius:6px; background:rgba(255,255,255,0.16); overflow:hidden; }
.ps-track i { position:absolute; inset:0 38% 0 0; border-radius:6px; background:linear-gradient(90deg,#45FBB2,#00E0E8,#15AC76); }
.ps-status { font-size:0.74rem; color:rgba(255,255,255,0.6); }
.ps-status b { color:#fff; }

@media (max-width:880px){
  .app-showcase > .sc-card.wide,
  .app-showcase > .sc-card.wide:nth-child(even) { flex-direction:column; padding:0; min-height:0; }
  .sc-card.wide .sc-copy { flex:none; padding:32px 28px 0; max-width:none; }
  .sc-card.wide .sc-copy h3 { font-size:1.6rem; }
  .sc-card.wide .sc-stage.sc-stage-phone { flex:none; padding:32px 28px; }
}

/* ============================================================
   Motion graphics for the product phones (reduced-motion safe)
   ============================================================ */
/* Book: the match highlight scans down the mentor list */
@keyframes matchCycle {
  0%, 33%, 100% { border-color:rgba(255,255,255,0.14); background:rgba(255,255,255,0.06); box-shadow:0 0 0 0 rgba(69,251,178,0); }
  9%, 24% { border-color:var(--mint); background:rgba(69,251,178,0.12); box-shadow:0 0 0 1px rgba(69,251,178,0.5), 0 8px 22px rgba(69,251,178,0.16); }
}
.appscreen.book .ps-mentor { animation:matchCycle 3.6s ease-in-out infinite; }
.appscreen.book .ps-mentor:nth-child(2) { animation-delay:1.2s; }
.appscreen.book .ps-mentor:nth-child(3) { animation-delay:2.4s; }

/* Hero: the active subject highlight cycles across the chips */
@keyframes chipCycle {
  0%, 36%, 100% { background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.85); border-color:rgba(255,255,255,0.14); }
  10%, 26% { background:var(--mint); color:var(--forest); border-color:var(--mint); }
}
.hs-chips span:nth-child(1), .hs-chips span:nth-child(2), .hs-chips span:nth-child(3) { animation:chipCycle 3.4s ease-in-out infinite; }
.hs-chips span:nth-child(2) { animation-delay:1.1s; }
.hs-chips span:nth-child(3) { animation-delay:2.2s; }

/* Live: the arrival progress fills as the mentor approaches */
.ps-track i { animation:etaFill 4.5s ease-in-out infinite; }
@keyframes etaFill { 0% { right:74%; } 100% { right:26%; } }

@media (prefers-reduced-motion:reduce){
  .appscreen.book .ps-mentor, .hs-chips span, .ps-track i { animation:none !important; }
  .appscreen.book .ps-mentor:first-child { border-color:var(--mint); background:rgba(69,251,178,0.12); }
  .hs-chips span:first-child { background:var(--mint); color:var(--forest); border-color:var(--mint); }
}

/* ============================================================
   Round 2: uni logos, scroll-in boxes, Face ID, progress box
   ============================================================ */
/* university logo beside the uni name in the mentor rows (white on dark) */
/* university logos removed per request */

/* showcase cards rise a touch more as they scroll into view */
/* showcase cards use the shared 3D reveal-on-scroll rise (see media block) */

/* payments: 4-screen cycle with the Face ID step */
.payscreen { animation:payCycle4 12s ease-in-out infinite; }
.payscreen.p2 { animation-delay:3s; }
.payscreen.pface { animation-delay:6s; }
.payscreen.p3 { animation-delay:9s; }
@keyframes payCycle4 { 0%{opacity:0} 2%{opacity:1} 22%{opacity:1} 25%{opacity:0} 100%{opacity:0} }

/* Face ID confirm: face glyph scans, then a check pops in (loops) */
.faceid { position:relative; width:90px; height:90px; }
.faceid-face, .faceid-tick { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.faceid-face { filter:drop-shadow(0 0 12px rgba(69,251,178,0.4)); animation:fidFace 2.6s ease-in-out infinite; }
.faceid-tick { opacity:0; transform:scale(.5); filter:drop-shadow(0 0 16px rgba(69,251,178,0.55)); animation:fidTick 2.6s ease-in-out infinite; }
.faceid-label { font-size:0.92rem; font-weight:700; color:#fff; letter-spacing:0.01em; }
@keyframes fidFace { 0%{opacity:1;transform:scale(.96)} 22%{transform:scale(1.05)} 44%{opacity:1;transform:scale(1)} 54%,92%{opacity:0} 100%{opacity:1;transform:scale(.96)} }
@keyframes fidTick { 0%,50%{opacity:0;transform:scale(.4)} 60%{opacity:1;transform:scale(1.14)} 68%,90%{opacity:1;transform:scale(1)} 97%,100%{opacity:0;transform:scale(.4)} }

/* progress box screen */
.appscreen.progress .ps-body { gap:11px; }
.prog-card, .prog-note { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.13); border-radius:14px; padding:12px 13px; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.prog-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; }
.prog-top .l { font-size:0.72rem; color:rgba(255,255,255,0.7); }
.prog-top .v { font-size:0.8rem; font-weight:700; color:var(--mint); }
.prog-chart { display:flex; align-items:flex-end; gap:7px; height:62px; }
.prog-chart i { flex:1; border-radius:4px 4px 0 0; background:linear-gradient(180deg,var(--mint),var(--mint-deep)); transform-origin:bottom; animation:progGrow 3.8s ease-out infinite; }
.prog-chart i:nth-child(2){animation-delay:.09s}.prog-chart i:nth-child(3){animation-delay:.18s}.prog-chart i:nth-child(4){animation-delay:.27s}.prog-chart i:nth-child(5){animation-delay:.36s}.prog-chart i:nth-child(6){animation-delay:.45s}.prog-chart i:nth-child(7){animation-delay:.54s}
@keyframes progGrow { 0%{transform:scaleY(0)} 26%,100%{transform:scaleY(1)} }
.pn-head { display:flex; align-items:center; gap:9px; margin-bottom:8px; }
.pn-h { font-size:0.76rem; font-weight:700; color:#fff; }
.pn-sub { font-size:0.64rem; color:rgba(255,255,255,0.55); margin-top:1px; }
.pn-body { font-size:0.74rem; line-height:1.5; color:rgba(255,255,255,0.82); }

@media (prefers-reduced-motion:reduce){ .payscreen.pface{display:none} .prog-chart i{animation:none} .faceid-tick{display:none} .faceid-face{animation:none} }

/* ============================================================
   More realistic iPhone frame + Apple Pay side-button cue
   ============================================================ */
.iphone { background:linear-gradient(135deg,#23242b 0%,#0c0c10 42%,#17181d 100%); }
.iphone__screen { box-shadow:inset 0 0 0 2px #000; }
.iphone__screen::after { content:""; position:absolute; inset:0; z-index:26; pointer-events:none; background:linear-gradient(128deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 13%, transparent 30%); }
/* physical buttons */
.iphone::after { content:""; position:absolute; right:-2px; top:168px; width:3px; height:58px; border-radius:0 3px 3px 0; background:linear-gradient(180deg,#3a3b42,#55565f,#3a3b42); }
.iphone::before { content:""; position:absolute; left:-2px; top:150px; width:3px; height:122px; border-radius:3px 0 0 3px; background:linear-gradient(180deg,#3a3b42 0 16px,transparent 16px 32px,#3a3b42 32px 66px,transparent 66px 82px,#3a3b42 82px 122px); }
@media (max-width:880px){ .iphone::after{top:150px;height:52px} .iphone::before{top:134px;height:110px} }
/* Apple Pay: the payments phone side button lights up + chevrons point to it */
.iphone:has(.payscreen)::after { background:linear-gradient(180deg,#45FBB2,#15AC76); animation:sideGlow 1.3s ease-in-out infinite; }
@keyframes sideGlow { 0%,100%{box-shadow:0 0 8px 1px rgba(69,251,178,0.45)} 50%{box-shadow:0 0 18px 5px rgba(69,251,178,0.95)} }
.ap-cue { position:absolute; top:182px; right:9px; z-index:7; display:flex; align-items:center; font-size:1.1rem; font-weight:800; color:var(--mint); line-height:1; }
.ap-cue::after { content:"\00BB"; animation:apChev 1.0s ease-in-out infinite; }
@keyframes apChev { 0%,100%{opacity:.25;transform:translateX(0)} 50%{opacity:1;transform:translateX(4px)} }

/* ============================================================
   3D depth on scroll: boxes rise from depth (via reveal-on-scroll
   above), plus a gentle parallax on the hero phone where supported.
   Targets the inner .iphone so it never fights the hero entrance.
   ============================================================ */
@supports (animation-timeline: scroll()) {
  /* No-JS safety net. The reveal rules below start at opacity:0 and only become
     visible when motion.js adds .in. If that script fails to load or errors, 13
     blocks on this page — most of the homepage — stay invisible with no way to
     recover. html.no-js is set by the inline snippet in the <head>, which JS
     immediately removes, so this only ever applies when scripting is off. */
  html.no-js .reveal, html.no-js .reveal-on-scroll{ opacity:1 !important; transform:none !important; animation:none !important; }

  @media (prefers-reduced-motion:no-preference){
    .hero-art .iphone { animation:heroDepth linear both; animation-timeline:scroll(root); animation-range:0 75vh; will-change:transform; }
    @keyframes heroDepth { to { transform:perspective(1300px) translateY(-26px) translateZ(50px) rotateX(-5deg); } }
  }
}

/* ── Frost demo integration additions (2026-07-11) ─────────────────────── */
.sc-detail{ display:none; }
button.sc-link{ background:none; border:0; padding:0; cursor:pointer; font:inherit; color:var(--link); font-weight:600; }
.scm-cta{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:4px; }
.scm-cta .sc-link{ margin-top:0; }

/* =====================================================================
   2026-08-24 · HOMEPAGE RHYTHM PASS  (index.html + ar/index.html)
   The page ran three consecutive rows-of-three. Now:
     1 · "in three steps"      -> numbered process line, no cards
     2 · "Find your perfect mentor" -> full-bleed brand gradient band,
          editorial split, dark-glass rows
     3 · "Why families choose Durusi" -> keeps the card grid (the one
          section whose three items are genuinely parallel and equal)
   Appended only. Nothing above this line was edited.
   ===================================================================== */

/* --- brand gradients, realigned to the brand book (slide 26) ----------
   The five sanctioned pairs, under their existing token names. The
   values in :root above had drifted to teal/forest-only ramps.
   Live consumers on this page: .hero is background:transparent
   !important (glass.css) and .path.mentor is white glass (glass.css),
   so neither is affected. .cta-band reads --page-grad -> --grad-mint-teal
   and its white text was tuned against the drifted ramp, so it is
   pinned to what it renders today; unpin when that band is redesigned. */
/* The five gradient tokens are defined ONCE, in main.css. This file used to
   redefine all five at :root with different stop positions, which meant the
   homepage silently used a second set and any fix applied in main.css never
   reached it. Removed 2026-08-31. */
/* .cta-band background removed 2026-08-31: this hardcoded a SIXTH gradient
   outside the brand set, and glass.css already overrode it with var(--page-grad)
   anyway (later sheet wins on equal !important). It was dead and misleading. */
@media (max-width:900px){}

/* =====================================================================
   2 · WAYS TO LEARN — full-bleed brand gradient band
   Brand gradient 1 · Vivid Mint (#45FBB2) -> Deep Teal (#0C333B).
   Stated use is "hero bands, success"; this is the page's principal
   offer band and the site theme is the green family (body.rb-a-green),
   so pair 1 is the fit.
   Rotated to 0deg so the DEEP end carries every piece of copy and the
   vivid mint lands on the bottom edge, where only padding sits. That
   is the accessibility strategy: text over the dark end, no scrim, so
   the brand colours stay exactly the brand colours.
   The second stop at 46% keeps the top 54% of the band solid #0C333B
   (white 13.5:1, .82 white 9.6:1). The intro column bottoms out at 49%
   of the band height at 1440px and higher up at every smaller width,
   so it never leaves that zone; the floor at 55% is still 13.0:1.
   Everything below rides on dark-glass rows: 9.4:1 white, worst case.
   ===================================================================== */
.grad-section.ways{
  margin:0;
  border-radius:0;
  padding-block:clamp(64px,7.5vw,104px) clamp(76px,8.5vw,124px);
  /* Electric -> Blackcurrant, one of the five sanctioned pairs. Same structure as
       before: the bright stop sits off-canvas so the visible band stays in the dark
       zone where white text holds its contrast. */
    background:linear-gradient(0deg, var(--electric, #00E0E8) -18%, #1B2A3D 34%, #2A1B38 100%);
}.ways .section-head{ max-inline-size:none; margin:0; text-align:start; }
.ways .section-head h2{ margin:0.55rem 0 0; }@media (max-width:900px){  .ways .section-head{ max-inline-size:42rem; }
}
@media (max-width:520px){}
@supports not ((backdrop-filter:blur(6px)) or (-webkit-backdrop-filter:blur(6px))){}
@media (prefers-reduced-transparency: reduce){}

/* =====================================================================
   4 · (2026-08-24) HOMEPAGE RHYTHM — after the bento came out, five
   sections in a row were "centred heading + grid of equal boxes".
   Each section below is given a different SHAPE so the page reads as a
   sequence rather than a stack of the same card grid.
   ===================================================================== */

/* ── 4a · How it works: a connected timeline ────────────────────────
   The old rail was a grey hairline behind floating mint discs, which
   read as decoration. Here the numeral IS the marker: it sits on a live
   gradient rail and masks it with the page colour, so the three steps
   are visibly linked left to right. */
.hiw{
  --hiw-gap:clamp(26px,4vw,48px);
  list-style:none;
  margin:clamp(2.8rem,5vw,3.6rem) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--hiw-gap);
}
.hiw-item{ position:relative; }
/* The rule starts AFTER the numeral and bridges the grid gap, so nothing has
   to be masked — an earlier version painted the page colour behind the
   numeral, which showed as a pale box wherever the canvas is not flat white. */
.hiw-top{ display:flex; align-items:center; gap:14px; }
.hiw-rule{
  flex:1 1 auto;
  min-inline-size:0;
  block-size:2px;
  border-radius:2px;
  margin-inline-end:calc(var(--hiw-gap) * -1);
  background:linear-gradient(90deg,var(--mint) 0%,var(--soul) 100%);
}
.hiw-item:last-child .hiw-rule{
  margin-inline-end:0;
  background:linear-gradient(90deg,var(--soul) 0%,rgba(21,172,118,0) 100%);
}
.hiw-n{
  flex:0 0 auto;
  font-family:var(--sans);
  font-weight:600;
  font-size:clamp(2.3rem,3.6vw,3rem);
  line-height:0.92;
  letter-spacing:-0.045em;
  color:var(--forest);
}
.hiw-item h3{ margin:20px 0 0; font-size:1.16rem; }
.hiw-item p{ margin:0.5rem 0 0; font-size:0.96rem; line-height:1.62; color:var(--cocoa); max-inline-size:34ch; }
.hiw-meta{
  display:inline-block;
  margin-block-start:15px;
  padding:5px 12px;
  border-radius:999px;
  background:rgba(69,251,178,0.16);
  color:var(--mint-deep);
  font-size:0.74rem;
  font-weight:600;
  letter-spacing:0.05em;
  text-transform:uppercase;
}
@media (max-width:900px){
  .hiw{ grid-template-columns:minmax(0,1fr); gap:0; }
  .hiw-item{ padding-inline-start:52px; padding-block-end:30px; }
  .hiw-item:last-child{ padding-block-end:0; }
  .hiw-top{ display:block; }
  .hiw-n{
    position:absolute;
    inset-inline-start:0;
    inset-block-start:-2px;
    font-size:1.5rem;
    line-height:1.1;
  }
  /* one continuous vertical rule per step, running the full height */
  .hiw-rule{
    position:absolute;
    inset-inline-start:16px;
    inset-block:30px 0;
    inline-size:2px;
    block-size:auto;
    margin:0;
    background:linear-gradient(180deg,var(--mint) 0%,var(--soul) 100%);
  }
  .hiw-item:last-child .hiw-rule{ display:none; }
  .hiw-item h3{ margin-block-start:0; }
  .hiw-item p{ max-inline-size:56ch; }
}

/* ── 4b · Ways to learn: three glass cards, one CTA ─────────────────
   Was a 2-col split whose three rows each carried their own identical
   "Book a free trial" button — the same ask three times in 200px. */
.ways .section-head.center{ max-inline-size:680px; margin-inline:auto; text-align:center; }
.ways .section-head.center h2{ margin-block-start:0.55rem; }
.ways-cards{
  list-style:none;
  margin:clamp(2.4rem,4vw,3.1rem) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.way{
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:26px 24px 28px;
  border-radius:22px;
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.20);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.18);
}
.way h3{ margin:0; font-size:1.14rem; color:#fff; }
.way .way-meta{
  margin:0;
  font-size:0.74rem;
  font-weight:600;
  letter-spacing:0.07em;
  text-transform:uppercase;
  color:var(--mint);
}
.way .way-body{ margin:0; font-size:0.95rem; line-height:1.6; color:rgba(255,255,255,0.88); }
.ways-cta{ margin-block-start:clamp(1.9rem,3vw,2.5rem); display:flex; justify-content:center; }
@media (max-width:900px){
  .ways-cards{ grid-template-columns:minmax(0,1fr); gap:14px; }
  .ways-cta .btn-glass{ inline-size:100%; justify-content:center; }
}

/* ── 4c · Why Durusi: let the brand tile lead ───────────────────────
   The card surface itself is the site-wide glass treatment (glass.css
   :39, set with !important) and is deliberately shared — overriding it
   here would make this one section inconsistent rather than better. So
   the differentiation is the icon: bigger, and carrying the gradient. */
.why-grid{ margin-block-start:3.2rem; gap:22px; }
.why-item .ic{
  inline-size:50px;
  block-size:50px;
  border-radius:16px;
  background:linear-gradient(150deg,rgba(69,251,178,0.34) 0%,rgba(21,172,118,0.15) 100%) !important;
  color:var(--mint-deep);
  margin-block-end:18px;
}
.why-item .ic svg{ inline-size:25px; block-size:25px; }
.why-item h3{ font-size:1.14rem; margin-block-end:0.45rem; }

/* ── 4d · Results: the numbers lead, the quotes support ─────────────
   The stats are the strongest proof on the page, so they now come
   first and carry the weight; the quotes read as corroboration. */
.stats-band{
  margin-block-start:3rem;
  padding:40px 34px;
  border-radius:26px;
}
.stats-band .num{ font-size:clamp(2.3rem,4vw,2.9rem); letter-spacing:-0.02em; }
.stats-band .label{ font-size:0.86rem; margin-block-start:10px; }
.quotes{ margin-block-start:20px; }
@media (max-width:760px){
  .stats-band{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 20px; padding:32px 24px; }
}

/* ── Item 6 (2026-08-31): break the centred rhythm ──────────────────────────
   The homepage ran six centred .section-head blocks in a row, which is what
   made the scroll feel same-y. Two of them now sit asymmetric. Logical
   properties throughout so the Arabic RTL homepage mirrors without extra CSS. */

/* Heading left, supporting line right, sharing a baseline. */
.section-head.split{
  max-inline-size:none; margin-inline:0; text-align:start;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
  gap:20px 56px; align-items:end;
}
.section-head.split h2{ margin:0.5rem 0 0; }
.section-head.split .sub{ margin:0; padding-block-end:0.4em; max-inline-size:46ch; }

/* Heading left, nothing beside it — the grid below carries the width. */
.section-head.start{ max-inline-size:42rem; margin-inline:0; text-align:start; }

@media (max-width:860px){
  .section-head.split{ grid-template-columns:1fr; gap:12px; }
  .section-head.split .sub{ padding-block-end:0; margin-top:0.5rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Homepage redesign — 2026-08-31
   Two structural changes, both asked for directly by the client:

   1. "Ways to learn" stops being a flat CSS gradient and becomes the page's
      single Electric Teal band, carrying the animated soft-ribbon artwork
      from the DBB spec (see ribbon.css / ribbon.js). It was named as the
      section whose background he disliked, and it is the only gradient
      section on the page.
   2. The bento returns to the slot it was deleted from, as an asymmetric
      mosaic rather than a row of equal tiles.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1 · the Electric Teal ribbon band ─────────────────────────────────
   Full-bleed, square corners: the old .grad-section inset it by 24px with a
   32px radius, which made it read as a card rather than a band. Padding is
   deliberately tall — the ribbon artwork is proportional to the band's own
   height, so a short band produces a flat, uninteresting wave. */
.ways-band {
  margin: 0;
  border-radius: 0;
  /* Asymmetric on purpose. The heading takes dark ink, so it has to sit in the
     genuinely bright top of the ramp — a tall top padding pushed it down to
     ~28% of the band, where R1's cyan and R2's blackcurrant overlap into a
     mid-tone and the dark ink lost its contrast. A short top padding keeps the
     heading around 10%, and the deep bottom padding drops the white cards past
     40% into R2's dark zone. */
  padding-block: clamp(56px, 5.5vw, 76px) clamp(96px, 11vw, 160px);
}

/* Heading sits in the bright upper third, so it takes the dark ink; the
   cards sit lower on the blackcurrant end and stay white. Both pairings are
   AAA — see the note at the top of ribbon.css. */
.ways-band .section-head { max-inline-size: none; margin: 0; text-align: start; }
.ways-band .section-head h2 { margin: 0.55rem 0 0; }
.ways-band .ways-cards { margin-block-start: clamp(4rem, 8.5vw, 7rem); }

/* Glass cards need a touch more presence over artwork than over a flat
   gradient, or the ribbons read straight through them. */
/* The scrim is sized so the cards clear AA even in the worst case — directly
   over undimmed #00E0E8. 0.52 is the first value at which BOTH the white body
   copy (5.3:1) and the small uppercase cyan meta label (4.7:1) clear the 4.5:1
   small-text threshold there. The cards actually sit around 35% of the band
   where it is far darker — white measures 9.7:1 in the typical case — so this
   is a floor, not the norm. It also stops the ribbon artwork reading straight
   through the card text. */
.ways-band .way {
  background: rgba(8, 22, 34, 0.52);
  border-color: rgba(255, 255, 255, 0.30);
}

.ways-band .way .way-body { color: #fff; }
.ways-band .way .way-meta { color: #C9FAFC; }

/* glass.css:1690 sets `main p a{color:#1A1914 !important}` to force body links
   to ink, which is right on the light sections and wrong on a dark band — the
   in-card links rendered near-black on deep teal. This predates the redesign;
   the old .grad-section had the same hole, because its overrides covered p and
   h3 but never a. !important is required to answer !important. */
.ways-band .way .way-body a,
.ways-band .way a { color: #fff !important; text-decoration-color: rgba(255, 255, 255, 0.65); }

/* .eyebrow is forced to var(--soul) by glass.css:267 — green on this page. The
   band's eyebrow sits on bright cyan and takes the same dark ink as the heading. */
.ways-band .ink-top .eyebrow { color: var(--ribbon-bottom) !important; opacity: 0.78; }

.ways-band .ways-cta { justify-content: flex-start; }

@media (max-width: 900px) {
  .ways-band .ways-cta { justify-content: stretch; }
}

/* ── 2 · the bento mosaic ──────────────────────────────────────────────
   bento.css/bento.js are reused verbatim; this is only a layout modifier.
   .bento is a flex column by default, which is the single-card layout used
   on careers.html. Here it becomes a six-column grid with uneven spans so
   no two rows repeat the same rhythm. */
.bento-sec.mosaic { padding-block: clamp(72px, 8vw, 112px); }

/* Doubled class: bento.css loads after home.css and sets .bento{display:flex},
   which ties on specificity and wins on order. .bento.bento--mosaic outranks it
   regardless of sheet order. */
.bento.bento--mosaic {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  max-width: 1060px;
  margin-inline: auto;
}

.bento.bento--mosaic > .bento-card { grid-column: span 2; min-height: 232px; }
.bento.bento--mosaic > .bento-card:nth-child(1) { grid-column: span 3; min-height: 268px; }
.bento.bento--mosaic > .bento-card:nth-child(2) { grid-column: span 3; min-height: 268px; }

@media (max-width: 900px) {
  .bento.bento--mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento.bento--mosaic > .bento-card,
  .bento.bento--mosaic > .bento-card:nth-child(1),
  .bento.bento--mosaic > .bento-card:nth-child(2) { grid-column: span 2; min-height: 0; }
}

/* Cards that navigate rather than expand still need to look like cards. */
a.bento-card { text-decoration: none; display: block; }

/* Media-less mosaic cards. bento.css sizes .bento-card__inner for a tall phone
   screenshot — min-height:556px with the text column pinned to flex:0 0 43% so
   the image gets the other 57%. These cards carry no image, so the text takes
   the whole card and the height comes from the grid row instead. */
.bento.bento--mosaic .bento-card__inner {
  min-height: 0;
  height: 100%;
  align-items: stretch;
}

.bento.bento--mosaic .bento-card__text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 2.4vw, 38px) clamp(26px, 2.2vw, 34px);
}

.bento.bento--mosaic .bento-card__title { max-width: 18ch; }

/* Hint sits on the card's floor whatever the title length, so the five cards
   share a baseline instead of each floating at its own height. */
.bento.bento--mosaic .bento-card__hint { margin-top: auto; padding-top: 20px; }