/* ============================================================
   MYZADAK — components & sections
   Logical properties only. RTL is structural, not a patch.
   ============================================================ */

/* ---------- layout primitives ---------- */
.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--wide{max-width:var(--container-wide)}
.wrap--narrow{max-width:var(--container-narrow)}
.band{padding-block:var(--space-3xl)}
.band--tall{padding-block:var(--space-4xl)}
.band--deep{background:var(--surface-deep)}
.rule{border:0;border-block-start:1px solid var(--border-subtle);margin:0}

.label{
  display:flex;align-items:center;gap:.7rem;
  font-size:var(--step--1);font-weight:var(--weight-semibold);
  color:var(--brand-500);margin-block-end:var(--space-s);
}
.label::before{content:"";inline-size:1.75rem;block-size:2px;background:var(--brand-500);flex:0 0 auto;border-radius:2px}

.section-head{max-width:46rem;margin-block-end:var(--space-xl)}
.section-head h2{font-size:var(--step-4)}
.section-head p{margin-block-start:var(--space-m);color:var(--text-secondary);font-size:var(--step-1)}
.lede{color:var(--text-secondary);font-size:var(--step-1)}
.muted{color:var(--text-muted)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-block-size:3rem;padding:.85rem 1.6rem;border-radius:var(--radius-pill);
  font:inherit;font-weight:var(--weight-semibold);text-decoration:none;
  border:1px solid transparent;cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),filter var(--dur-fast) var(--ease-out);
}
.btn--primary{background-image:linear-gradient(100deg,var(--coral-500),var(--brand-500));color:var(--text-on-brand);box-shadow:0 10px 26px -14px rgba(240,146,76,.9)}
.btn--primary:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn--primary:active{transform:translateY(0);filter:brightness(.97)}
.btn--ghost{border-color:var(--border-default);color:var(--text-primary);background:rgba(246,244,241,.03)}
.btn--ghost:hover{border-color:var(--border-brand);color:var(--brand-400)}

.badge{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.4rem .9rem .45rem;border-radius:var(--radius-pill);
  background:rgba(240,146,76,.1);border:1px solid var(--border-brand);
  color:var(--brand-400);font-size:var(--step--1);font-weight:var(--weight-semibold);
}
.badge::before{content:"";inline-size:.45rem;block-size:.45rem;border-radius:50%;background:var(--brand-500);flex:0 0 auto}

/* ---------- wordmark ---------- */
.wordmark{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;line-height:1}
.wordmark__latin{font-family:var(--font-latin);font-weight:700;font-size:1.32rem;letter-spacing:-.02em;color:var(--text-primary)}
/* MY is the quiet prefix; ZADAK is the name people say */
.wordmark__my{font-size:.48em;font-weight:var(--weight-semibold);letter-spacing:.1em;
  color:var(--text-muted);margin-inline-end:.08em;vertical-align:.06em}
/* on the Arabic side زادك leads and the Latin lockup supports it */
[lang="ar"] .wordmark__latin{font-size:1rem;color:var(--text-secondary);font-weight:var(--weight-semibold)}
[lang="ar"] .wordmark__my{font-size:.55em;color:var(--text-muted)}
[lang="ar"] .wordmark__ar{font-size:1.42rem;font-weight:var(--weight-bold)}
.wordmark__div{inline-size:1px;block-size:1.15em;background:var(--border-strong)}
.wordmark__ar{font-family:var(--font-arabic);font-weight:var(--weight-semibold);font-size:1.02rem;color:var(--brand-500)}

/* ---------- navigation ---------- */
.nav{position:fixed;inset-block-start:0;inset-inline:0;z-index:var(--z-nav);block-size:var(--nav-h);display:flex;align-items:center;
  transition:background-color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);
  border-block-end:1px solid transparent}
.nav.is-stuck{background:rgba(14,13,18,.85);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border-block-end-color:var(--border-subtle)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-m)}
.nav__menu{display:flex;align-items:center;gap:clamp(1rem,2.1vw,2rem);list-style:none;padding:0;margin:0}
.nav__link{font-size:.95rem;color:var(--text-secondary);text-decoration:none;position:relative;padding-block:.45rem;transition:color var(--dur-fast) var(--ease-out)}
.nav__link::after{content:"";position:absolute;inset-block-end:0;inset-inline-start:0;inline-size:100%;block-size:1px;background:var(--brand-500);transform:scaleX(0);transform-origin:inline-start;transition:transform var(--dur-fast) var(--ease-out)}
.nav__link:hover{color:var(--text-primary)}
.nav__link:hover::after,.nav__link[aria-current="true"]::after{transform:scaleX(1)}
.nav__side{display:flex;align-items:center;gap:.75rem}
.lang{display:inline-flex;align-items:center;min-block-size:2.5rem;padding:.35rem 1rem;border:1px solid var(--border-default);border-radius:var(--radius-pill);
  font-size:.9rem;font-weight:var(--weight-semibold);text-decoration:none;color:var(--text-primary);
  transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.lang:hover{border-color:var(--border-brand);color:var(--brand-400)}
.lang--ar{font-family:var(--font-arabic)}
.lang--en{font-family:var(--font-latin)}

.nav__toggle{display:none;align-items:center;justify-content:center;inline-size:2.75rem;block-size:2.75rem;
  background:transparent;border:1px solid var(--border-default);border-radius:var(--radius-s);cursor:pointer;color:var(--text-primary)}
.nav__toggle span{display:block;inline-size:1.05rem;block-size:1.5px;background:currentColor;border-radius:2px;position:relative;transition:transform var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out)}
.nav__toggle span::before,.nav__toggle span::after{content:"";position:absolute;inset-inline-start:0;inline-size:100%;block-size:1.5px;background:currentColor;border-radius:2px;transition:inherit}
.nav__toggle span::before{inset-block-start:-.32rem}
.nav__toggle span::after{inset-block-start:.32rem}
.nav__toggle[aria-expanded="true"] span{background:transparent}
.nav__toggle[aria-expanded="true"] span::before{transform:translateY(.32rem) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span::after{transform:translateY(-.32rem) rotate(-45deg)}

.nav__panel{position:fixed;inset:var(--nav-h) 0 0;z-index:calc(var(--z-nav) - 1);
  background:rgba(8,7,11,.97);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  padding:var(--space-xl) var(--gutter) var(--space-2xl);display:none;overflow-y:auto}
.nav__panel[data-open="true"]{display:block}
.nav__panel ul{list-style:none;padding:0;margin:0;display:grid;gap:.35rem}
.nav__panel a{display:block;padding-block:.9rem;font-size:var(--step-2);font-weight:var(--weight-semibold);text-decoration:none;border-block-end:1px solid var(--border-subtle)}
.nav__panel .lang{margin-block-start:var(--space-l)}

@media (max-width:60rem){
  .nav__menu,.nav__side .lang{display:none}
  .nav__toggle{display:flex}
}

/* ---------- device frames ---------- */
.device{
  --dw:17rem;
  inline-size:var(--dw);padding:.42rem;border-radius:var(--radius-device);
  background:linear-gradient(155deg,#33313c,#141319 62%);
  border:1px solid rgba(246,244,241,.09);
  box-shadow:var(--shadow-device);
}
.device img{inline-size:100%;border-radius:calc(var(--radius-device) - .42rem);background:var(--ink-800)}
.frag{border-radius:var(--radius-m);border:1px solid var(--border-subtle);box-shadow:var(--shadow-lift)}

.stage{position:relative;display:flex;justify-content:center;align-items:center}
.stage__main{--dw:clamp(15rem,25vw,18.5rem);position:relative;z-index:2}
.stage__aside{--dw:clamp(9rem,15vw,12rem);position:absolute;inset-block-start:16%;inset-inline-start:0;z-index:1;
  transform:rotate(-4deg);opacity:.94;display:none}
[dir="rtl"] .stage__aside{transform:rotate(4deg)}
.stage__frag{position:absolute;inset-block-end:4%;inset-inline-end:0;inline-size:clamp(11rem,17vw,14rem);z-index:3;display:none}
@media (min-width:64rem){
  .stage{min-block-size:34rem}
  .stage__aside,.stage__frag{display:block}
  .stage__main{margin-inline-start:6%}
}

/* ---------- hero ---------- */
.hero{position:relative;padding-block:calc(var(--nav-h) + clamp(2.5rem,6vw,4.5rem)) var(--space-3xl);overflow:clip}
.hero::before{content:"";position:absolute;inset-block-start:-18%;inset-inline-end:-10%;inline-size:min(60rem,105%);block-size:48rem;
  background:var(--glow-brand);pointer-events:none;z-index:0}
.hero .wrap{position:relative;z-index:1}
.hero__grid{display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:center}
@media (min-width:64rem){.hero__grid{grid-template-columns:1.02fr .98fr}}
.hero h1{font-size:var(--step-6);margin-block-start:var(--space-m)}
.hero__lede{margin-block-start:var(--space-m);font-size:var(--step-1);color:var(--text-secondary);max-width:34ch}
[lang="ar"] .hero__lede{max-width:38ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-block-start:var(--space-l)}

/* ---------- product proof rail ---------- */
.rail-wrap{position:relative}
.rail{display:flex;gap:clamp(1rem,2.4vw,1.75rem);overflow-x:auto;padding-block:var(--space-s) var(--space-m);
  scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--ink-400) transparent;
  margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
.rail::-webkit-scrollbar{block-size:6px}
.rail::-webkit-scrollbar-thumb{background:var(--ink-400);border-radius:99px}
.rail .device{--dw:clamp(11rem,19vw,14rem);flex:0 0 auto;scroll-snap-align:center}
.rail__cap{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;align-items:baseline;color:var(--text-muted);font-size:var(--step--1);margin-block-start:var(--space-s)}

/* ---------- split composition ---------- */
.split{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (min-width:60rem){
  .split{grid-template-columns:1fr 1fr}
  .split--media-first .split__media{order:-1}
}
.split__media{display:flex;justify-content:center}
.split__media .device{--dw:clamp(14rem,23vw,17rem)}
.split__body h2{font-size:var(--step-3)}
.split__body p{margin-block-start:var(--space-m);color:var(--text-secondary)}
.split__note{margin-block-start:var(--space-m);padding-inline-start:var(--space-s);border-inline-start:2px solid var(--border-brand);color:var(--text-muted);font-size:var(--step--1)}

/* ---------- the everyday question ---------- */
.ask{text-align:center}
.ask__q{font-size:var(--step-5)}
.ask__alt{margin-block-start:.75rem;font-size:var(--step-2);color:var(--brand-500);font-weight:var(--weight-semibold)}
.ask__alt--ar{font-family:var(--font-arabic);direction:rtl}
.ask__alt--en{font-family:var(--font-latin);direction:ltr}
.ask p{margin-inline:auto;margin-block-start:var(--space-l);color:var(--text-secondary);font-size:var(--step-1)}

/* ---------- ledger (feature index, not cards) ---------- */
.ledger{border-block-start:1px solid var(--border-subtle)}
.ledger__row{display:grid;gap:.4rem 2.5rem;padding-block:var(--space-m);border-block-end:1px solid var(--border-subtle)}
@media (min-width:48rem){.ledger__row{grid-template-columns:16rem 1fr;align-items:baseline}}
.ledger__row h3{font-size:var(--step-1)}
.ledger__row p{color:var(--text-secondary);max-width:52ch}

/* ---------- warm ember band (Arabic-first) ---------- */
.ember{background:linear-gradient(180deg,var(--ember-900),var(--ember-800) 50%,var(--ember-900));
  border-block:1px solid rgba(240,146,76,.14);position:relative;overflow:clip}
.ember::after{content:"";position:absolute;inset-block-end:-40%;inset-inline-start:-10%;inline-size:40rem;block-size:40rem;
  background:radial-gradient(circle,rgba(237,109,82,.14),transparent 65%);pointer-events:none}
.ember__grid{display:grid;gap:var(--space-xl);align-items:center;position:relative;z-index:1}
@media (min-width:60rem){.ember__grid{grid-template-columns:1.15fr .85fr;gap:var(--space-4xl)}}
.ember h2{font-size:var(--step-4)}
.ember p{margin-block-start:var(--space-m);color:var(--text-secondary)}
.ember__type{font-family:var(--font-arabic);direction:rtl;font-weight:var(--weight-bold);
  font-size:clamp(2.75rem,7.5vw,5.25rem);line-height:1.3;color:var(--brand-500);text-align:end}
[dir="rtl"] .ember__type{font-family:var(--font-latin);direction:ltr;text-align:start;letter-spacing:-.03em;line-height:1.05}
.ember__list{list-style:none;padding:0;margin-block-start:var(--space-l);display:flex;flex-wrap:wrap;gap:.5rem}
.ember__list li{padding:.4rem .9rem;border:1px solid rgba(240,146,76,.22);border-radius:var(--radius-pill);
  font-size:var(--step--1);color:var(--brand-400);background:rgba(240,146,76,.06)}

/* ---------- how it works ---------- */
.steps{list-style:none;padding:0;display:grid;gap:var(--space-l)}
@media (min-width:60rem){.steps{grid-template-columns:repeat(5,1fr);gap:var(--space-m)}}
.steps li{position:relative;padding-block-start:var(--space-m);border-block-start:1px solid var(--border-subtle)}
.steps li::before{content:"";position:absolute;inset-block-start:-1px;inset-inline-start:0;inline-size:2.75rem;block-size:2px;background:var(--brand-500);border-radius:2px}
.steps__n{display:block;font-size:var(--step--1);font-weight:var(--weight-bold);color:var(--brand-500);letter-spacing:.08em}
[lang="ar"] .steps__n{letter-spacing:0}
.steps h3{margin-block-start:.5rem;font-size:var(--step-1)}

/* ---------- community ---------- */
.community{display:grid;gap:var(--space-xl);align-items:center}
@media (min-width:60rem){.community{grid-template-columns:1fr 1fr;gap:var(--space-4xl)}}
.community__frag{inline-size:min(100%,26rem);justify-self:center}

/* ---------- launch ---------- */
.launch{position:relative;text-align:center;overflow:clip}
.launch::before{content:"";position:absolute;inset-block-start:10%;inset-inline-start:50%;translate:-50% 0;
  inline-size:min(48rem,110%);block-size:26rem;background:var(--glow-brand);pointer-events:none}
.launch>*{position:relative;z-index:1}
.launch h2{font-size:var(--step-5)}
.launch__lead{margin-inline:auto;margin-block-start:var(--space-m);font-size:var(--step-2);font-weight:var(--weight-semibold)}
.launch p{margin-inline:auto;color:var(--text-secondary)}
.launch .btn{margin-block-start:var(--space-l)}

/* ---------- about / mission / vision ---------- */
.about{display:grid;gap:var(--space-xl)}
@media (min-width:60rem){.about{grid-template-columns:1.15fr .85fr;gap:var(--space-4xl)}}
.about p{color:var(--text-secondary)}
.statement{padding-block:var(--space-m);border-block-start:1px solid var(--border-subtle)}
.statement span{display:block;font-size:var(--step--1);color:var(--brand-500);font-weight:var(--weight-semibold);margin-block-end:.5rem}
.statement h3{font-size:var(--step-2)}

/* ---------- contact ---------- */
.contact__primary{display:inline-block;margin-block-start:var(--space-s);font-size:var(--step-3);font-weight:var(--weight-bold);
  text-decoration:none;border-block-end:2px solid var(--border-brand);padding-block-end:.15rem;
  transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.contact__primary:hover{color:var(--brand-400);border-block-end-color:var(--brand-500)}
.contact__list{display:grid;gap:var(--space-m);margin-block-start:var(--space-2xl)}
@media (min-width:48rem){.contact__list{grid-template-columns:repeat(3,1fr)}}
.contact__item{border-block-start:1px solid var(--border-subtle);padding-block-start:var(--space-s)}
.contact__item span{display:block;color:var(--text-muted);font-size:var(--step--1);margin-block-end:.3rem}
.contact__item a{font-weight:var(--weight-semibold);text-decoration:none}
.contact__item a:hover{color:var(--brand-400)}

/* ---------- footer ---------- */
.footer{background:var(--surface-deep);border-block-start:1px solid var(--border-subtle);padding-block:var(--space-2xl) var(--space-xl)}
.footer__grid{display:grid;gap:var(--space-xl)}
@media (min-width:56rem){.footer__grid{grid-template-columns:1.5fr 1fr 1fr}}
.footer p{color:var(--text-secondary);font-size:var(--step--1);margin-block-start:var(--space-s);max-width:32ch}
.footer h3{font-size:var(--step--1);color:var(--text-muted);font-weight:var(--weight-semibold);margin-block-end:var(--space-s)}
.footer ul{list-style:none;padding:0;display:grid;gap:.6rem}
.footer a{font-size:.95rem;color:var(--text-secondary);text-decoration:none}
.footer a:hover{color:var(--brand-400)}
.footer__bottom{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;align-items:center;
  margin-block-start:var(--space-2xl);padding-block-start:var(--space-m);border-block-start:1px solid var(--border-subtle);
  color:var(--text-muted);font-size:var(--step--1)}

/* ---------- legal pages ---------- */
.legal{padding-block:calc(var(--nav-h) + var(--space-2xl)) var(--space-3xl)}
.legal h1{font-size:var(--step-4)}
.legal .meta{margin-block-start:var(--space-s);color:var(--text-muted);font-size:var(--step--1)}
.legal h2{font-size:var(--step-2);margin-block-start:var(--space-xl)}
.legal p,.legal li{color:var(--text-secondary);margin-block-start:var(--space-s);max-width:68ch}
.legal ul{padding-inline-start:1.15rem;margin-block-start:var(--space-s)}
.legal li{margin-block-start:.5rem}
.legal a{color:var(--brand-400)}

/* ---------- reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(14px);
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);
  transition-delay:calc(var(--i,0) * var(--stagger))}
[data-reveal].is-in{opacity:1;transform:none}
.no-js [data-reveal]{opacity:1;transform:none}

/* ============================================================
   MULTI-PAGE ADDITIONS
   ============================================================ */

/* hero sub-headline under the question */
.hero__tag{margin-block-start:var(--space-s);font-size:var(--step-2);font-weight:var(--weight-semibold);
  color:var(--brand-400);max-width:22ch;letter-spacing:var(--tracking-display)}

/* inner-page hero */
.page-hero{position:relative;overflow:clip;border-block-end:1px solid var(--border-subtle);
  padding-block:calc(var(--nav-h) + clamp(2.5rem,6vw,4.5rem)) var(--space-2xl)}
.page-hero::before{content:"";position:absolute;inset-block-start:-30%;inset-inline-end:-5%;
  inline-size:min(48rem,90%);block-size:34rem;background:var(--glow-brand);pointer-events:none}
.page-hero .wrap{position:relative;z-index:1}
.page-hero__body{max-width:44rem}
.page-hero h1{font-size:var(--step-5)}
.page-hero p{margin-block-start:var(--space-m);font-size:var(--step-1);color:var(--text-secondary)}

/* signpost: ledger rows that are links */
.signpost__row{text-decoration:none;padding-inline:var(--space-s);margin-inline:calc(var(--space-s) * -1);
  transition:background-color var(--dur-fast) var(--ease-out)}
.signpost__row:hover{background:rgba(246,244,241,.035)}
.signpost__row h3{display:flex;align-items:baseline;gap:.6rem}
.signpost__arrow{display:inline-block;color:var(--brand-500);font-weight:var(--weight-regular);
  transition:transform var(--dur-fast) var(--ease-out)}
[dir="rtl"] .signpost__arrow{transform:scaleX(-1)}
.signpost__row:hover .signpost__arrow{transform:translateX(4px)}
[dir="rtl"] .signpost__row:hover .signpost__arrow{transform:scaleX(-1) translateX(4px)}

/* how-it-works, expanded */
.steps--detail li p{margin-block-start:.5rem;color:var(--text-secondary);font-size:var(--step--1);max-width:34ch}

/* active navigation item */
.nav__link[aria-current="page"]{color:var(--text-primary)}
.nav__link[aria-current="page"]::after{transform:scaleX(1)}
.nav__panel a[aria-current="page"]{color:var(--brand-400)}

/* client-side navigation: no white flash, no full reload */
main{transition:opacity var(--dur-fast) var(--ease-out)}
body.is-navigating main{opacity:.35}
.route-bar{position:fixed;inset-block-start:0;inset-inline:0;block-size:2px;background:var(--brand-500);
  transform:scaleX(0);transform-origin:inline-start;z-index:calc(var(--z-nav) + 1);
  transition:transform var(--dur-slow) var(--ease-out),opacity var(--dur-fast) var(--ease-out);opacity:0}
body.is-navigating .route-bar{transform:scaleX(.75);opacity:1}

/* ============================================================
   BRAND LOCKUP — MY is always the quiet half of the name
   ============================================================ */
.lockup{font-family:var(--font-latin);white-space:nowrap;font-weight:inherit}
.lockup__my{font-size:.7em;letter-spacing:.05em;font-weight:var(--weight-semibold);opacity:.72;
  margin-inline-end:.02em}
/* display sizes: the bigger the type, the quieter MY gets */
h1 .lockup__my,h2 .lockup__my,.hero__tag .lockup__my,.ask__q .lockup__my{font-size:.5em;letter-spacing:.09em;opacity:.55}
h3 .lockup__my,.btn .lockup__my,.launch__lead .lockup__my{font-size:.58em;letter-spacing:.07em;opacity:.62}
.footer__bottom .lockup__my,.legal .lockup__my{font-size:.72em;opacity:.7}
[lang="ar"] .lockup{direction:ltr;unicode-bidi:isolate}

/* ============================================================
   REFINEMENT PASS
   ============================================================ */

/* device frames: a real bezel has a lit top edge */
.device{box-shadow:var(--shadow-device),inset 0 1px 0 rgba(246,244,241,.08)}
.device img{box-shadow:0 0 0 1px rgba(0,0,0,.5)}

/* the screenshot rail should fade at the edges, not get guillotined */
.rail{-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);
  padding-block-end:var(--space-l)}
.rail .device{transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.rail .device:hover{transform:translateY(-6px)}

/* hero: tighter vertical rhythm, less dead space under the composition */
.hero{padding-block-end:var(--space-2xl)}
@media (min-width:64rem){
  .stage{min-block-size:31rem}
  .hero__grid{align-items:center;gap:clamp(2rem,4vw,3.5rem)}
}

/* split sections: a shorter measure reads better beside a tall device */
.split__body p{max-width:44ch}
[lang="ar"] .split__body p{max-width:40ch}
@media (min-width:60rem){.split{grid-template-columns:1.04fr .96fr;gap:clamp(2.5rem,6vw,5.5rem)}}

/* band transitions: a hairline instead of a hard colour switch */
.band--deep{position:relative}
.band--deep::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;block-size:1px;
  background:linear-gradient(to right,transparent,var(--border-subtle) 20%,var(--border-subtle) 80%,transparent)}

/* page hero: soften the hard rule into a gradient */
.page-hero{border-block-end:0}
.page-hero::after{content:"";position:absolute;inset-block-end:0;inset-inline:0;block-size:1px;
  background:linear-gradient(to right,transparent,var(--border-default) 25%,var(--border-default) 75%,transparent)}

/* section intros keep a comfortable measure */
.section-head p{max-width:52ch}

/* small screens: full-width tap targets, tighter hero */
@media (max-width:30rem){
  .hero__cta{gap:.6rem}
  .hero__cta .btn{flex:1 1 100%}
  .hero__tag{max-width:none}
}

/* legal pages read as documents, not as marketing */
.legal h2{font-size:var(--step-2);border-block-start:1px solid var(--border-subtle);padding-block-start:var(--space-l)}
.legal h2:first-of-type{border-block-start:0}