/* Selected direction — «من الفكرة إلى المتجر».
 * Bright optical surfaces, one continuous cobalt route, coral current state.
 * This file intentionally loads last so existing screen behavior stays intact.
 */

:root{
  --bg:#F5F5F7;
  --ink:#1D1D1F;
  --ink-80:rgba(29,29,31,.82);
  --ink-72:rgba(29,29,31,.72);
  --ink-60:rgba(29,29,31,.60);
  --ink-45:rgba(29,29,31,.45);
  --ink-38:rgba(29,29,31,.38);
  --hairline:rgba(29,29,31,.10);
  --accent:#2F6AE0;
  --accent-press:#2457C3;
  --accent-sky:#5AC8FA;
  --accent-coral:#FF6B5E;
  --accent-tint:rgba(47,106,224,.08);
  --accent-tint-2:rgba(47,106,224,.20);
  --glass:rgba(255,255,255,.86);
  --glass-quiet:rgba(255,255,255,.58);
  --glass-bar:rgba(255,255,255,.82);
  --glass-edge:rgba(255,255,255,.96);
  --blur:blur(24px) saturate(1.25);
  --blur-bar:blur(20px) saturate(1.2);
  --shadow-panel:0 18px 54px rgba(24,39,75,.075), 0 2px 8px rgba(24,39,75,.04);
  --shadow-bar:0 10px 30px rgba(24,39,75,.07);
  --shadow-accent:0 14px 30px rgba(47,106,224,.22);
  --r-panel:26px;
  --r-sub:20px;
}

body{
  color:var(--ink-72);
  background:
    radial-gradient(800px 460px at 82% -8%, rgba(90,200,250,.12), transparent 66%),
    radial-gradient(620px 420px at 8% 108%, rgba(47,106,224,.08), transparent 64%),
    var(--bg);
}
body::before{ display:none }

h1,h2,h3{ letter-spacing:-.025em }
h1{ font-weight:600 }
h2,h3{ font-weight:500 }
.eyebrow{ color:var(--accent); font-weight:500 }

.panel{
  background:var(--glass);
  border:1px solid rgba(29,29,31,.055);
  box-shadow:var(--shadow-panel);
}
.panel--quiet{ background:rgba(255,255,255,.55); border-color:rgba(29,29,31,.05) }
.panel--current{ border-color:var(--accent-tint-2); box-shadow:0 20px 56px rgba(47,106,224,.11) }

.btn{
  border-radius:16px;
  background:linear-gradient(135deg, var(--accent) 0%, #3478EA 64%, var(--accent-sky) 140%);
  box-shadow:0 12px 28px rgba(47,106,224,.22);
  min-height:48px;
  letter-spacing:-.01em;
}
.btn--compact{ min-height:38px; border-radius:12px }
.btn--secondary{ background:transparent; box-shadow:none; border-color:rgba(29,29,31,.16) }
.btn--quiet{ background:none; box-shadow:none; border-radius:10px; color:var(--accent) }
.btn[disabled]{ background:rgba(29,29,31,.10); color:var(--ink-38) }

.pill{
  background:var(--glass-bar);
  border-color:rgba(29,29,31,.06);
  box-shadow:var(--shadow-bar);
}
.bar{ align-items:center }
.pill--brand{ box-shadow:none; background:rgba(255,255,255,.64) }
.brandmark{ filter:drop-shadow(0 6px 11px rgba(47,106,224,.18)) }
.field{ color:var(--ink); border-top-color:var(--hairline) }

/* ── App shell ─────────────────────────────────────────── */
.shell{ max-width:1360px; gap:28px; padding-block:28px }
.side{ width:218px; gap:14px }
.side__brand,.side__nav,.side__foot{
  background:rgba(255,255,255,.78);
  border:1px solid rgba(29,29,31,.055);
  box-shadow:0 16px 44px rgba(24,39,75,.06);
}
.side__resume{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, #2864DC, #3A83EF 72%, #65CFFA 145%);
  border-radius:22px; box-shadow:0 18px 38px rgba(47,106,224,.22);
}
.side__resume::after{
  content:''; position:absolute; width:110px; height:110px; border-radius:50%;
  inset-inline-end:-46px; inset-block-end:-70px;
  border:1px solid rgba(255,255,255,.36); box-shadow:0 0 0 16px rgba(255,255,255,.06);
}
.side__nav a{ border-radius:14px }
.side__nav a[aria-current="page"]{
  background:var(--accent-tint); color:var(--accent); box-shadow:none;
}
.side__nav a[aria-current="page"] svg{ stroke:var(--accent) }
.tabbar{
  background:rgba(255,255,255,.88); border:1px solid rgba(29,29,31,.07);
  box-shadow:0 18px 50px rgba(24,39,75,.14); backdrop-filter:blur(22px) saturate(1.2);
}
.tabbar a{ border-radius:15px }
.tabbar a[aria-current="page"]{
  background:linear-gradient(145deg, #2F6AE0, #3D7DE9); box-shadow:0 8px 20px rgba(47,106,224,.20);
}

/* ── Landing: living microphone + text canvas ──────────── */
.land-hero{ padding-block:22px 26px; max-width:760px }
.land-hero__mark{
  display:block; width:104px; height:104px; margin:0 auto 20px;
  filter:drop-shadow(0 14px 26px rgba(47,106,224,.24));
}
.land-hero h1{
  max-width:640px; margin-inline:auto; font-size:clamp(36px,5vw,62px);
  line-height:1.25; letter-spacing:-.045em;
}
.land-hero__sub{ color:var(--ink-60); font-size:14px; margin-top:8px }
.land-dump{ max-width:760px; padding:0; overflow:hidden; border-radius:30px }
.land-mode{
  display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:6px;
  border-bottom:1px solid var(--hairline); background:rgba(245,245,247,.72);
}
.land-mode__btn{
  border:0; min-height:46px; border-radius:14px; background:transparent;
  color:var(--ink-60); font:500 13px var(--font); cursor:pointer;
}
.land-mode__btn--active{ color:var(--accent); background:#fff; box-shadow:0 6px 18px rgba(24,39,75,.07) }
.land-mode__btn[disabled]{ opacity:.38; cursor:not-allowed }
.land-input-stage{ padding:26px 32px 0 }
.land-dump .field{ min-height:128px; font-size:14px; line-height:2.05 }
.land-mic-stage{ position:relative; padding:22px 32px 28px; overflow:hidden }
.land-mic-stage::before{
  content:''; position:absolute; inset-inline:32px; inset-block-start:50%; height:1px;
  background:linear-gradient(to left, transparent, rgba(47,106,224,.36), var(--accent-sky), rgba(47,106,224,.36), transparent);
}
.land-mic-stage .mic{
  position:relative; display:grid; grid-template-columns:1fr 122px 1fr;
  align-items:center; justify-items:center; gap:18px; min-height:150px;
}
.land-mic-stage .mic__btn{
  grid-column:2; width:112px; height:112px; position:relative; z-index:2;
  background:radial-gradient(circle at 36% 28%, #77CFFA 0%, #377CEB 36%, #2358C8 72%, #163B90 100%);
  border:1px solid rgba(255,255,255,.88);
  box-shadow:0 0 0 10px rgba(47,106,224,.06), 0 0 0 22px rgba(47,106,224,.035), 0 22px 46px rgba(47,106,224,.26), inset 0 2px 4px rgba(255,255,255,.65);
}
.land-mic-stage .mic__btn svg{ width:34px; height:34px }
.land-mic-stage .level{
  position:absolute; inset-inline:0; inset-block-start:50%; transform:translateY(-50%);
  height:62px; align-items:center; justify-content:space-between; gap:0; z-index:1;
}
.land-mic-stage .level i{ width:2px; height:18px; background:rgba(47,106,224,.30) }
.land-mic-stage .level i:nth-child(2),.land-mic-stage .level i:nth-child(5){ height:34px }
.land-mic-stage .level i:nth-child(3),.land-mic-stage .level i:nth-child(4){ height:48px }
.land-mic-stage .land-micnote{ grid-column:1 / -1; text-align:center; align-items:center; z-index:2 }
.land-mic-stage .land-timer{ position:absolute; inset-block-start:10px; inset-inline-end:10px }
.land-dump .hero-outs{
  max-width:none; margin:0; padding:0 32px 28px;
  grid-template-columns:repeat(4,1fr); gap:0;
}
.land-dump .hero-out{
  display:block; padding:12px 14px; border:0; border-inline-start:1px solid var(--hairline);
  border-radius:0; background:transparent; text-align:center; font-size:11.5px;
}
.land-dump .hero-out:first-child{ border-inline-start:0 }
.land-dump .hero-out__n{ margin:0 auto 8px; background:transparent; font-size:11px }
.land-dump > .actions{ margin:0; padding:0 28px 28px }
.land-dump > .actions .btn{ width:100% }
.land-dump .gate-note{ margin:0 32px 24px }

/* ── Journey: one route from idea to both stores ───────── */
.journey-canvas{
  max-width:980px; margin-inline:auto; padding:30px 34px 34px;
  border:1px solid rgba(29,29,31,.055); border-radius:32px;
  background:rgba(255,255,255,.82); box-shadow:var(--shadow-panel);
  backdrop-filter:blur(24px) saturate(1.2);
}
.journey-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:28px; padding-bottom:24px; border-bottom:1px solid var(--hairline) }
.journey-head h1{ font-size:42px; margin-bottom:4px }
.journey-head p:last-child{ max-width:560px; color:var(--ink-60) }
.journey-progress{ text-align:end; padding-top:8px }
.journey-progress strong{ display:block; color:var(--accent); font-size:22px; font-weight:500 }
.journey-progress span{ display:block; font-size:11.5px; color:var(--ink-45) }
.journey-route{ position:relative; max-width:820px; margin:0 auto; padding:30px 28px 0 }
.route-destinations{ position:relative; display:flex; justify-content:center; gap:16px; padding-bottom:48px }
.store-target{
  min-width:180px; min-height:68px; display:flex; align-items:center; justify-content:center; gap:12px;
  border-radius:18px; background:rgba(255,255,255,.92); border:1px solid rgba(29,29,31,.07);
  box-shadow:0 12px 30px rgba(24,39,75,.09); color:var(--ink); font-size:14px; font-weight:500;
}
.store-mark{
  width:32px; height:32px; display:block; flex:none; object-fit:contain;
  filter:drop-shadow(0 5px 8px rgba(24,39,75,.14));
}
.store-mark--apple{ padding:2px }
.route-fork{
  position:absolute; inset-block-end:0; inset-inline:0; width:210px; height:38px; margin-inline:auto;
  border-block-start:5px solid rgba(47,106,224,.14); border-inline:5px solid rgba(47,106,224,.14); border-radius:22px 22px 0 0;
}
.route-fork::after{ content:''; position:absolute; inset-inline:0; inset-block-end:-20px; width:5px; height:24px; margin-inline:auto; background:rgba(47,106,224,.14) }
.route-phase{ position:relative; display:grid; grid-template-columns:128px 1fr; gap:20px; align-items:center; padding-block:18px 26px }
.route-phase::after{ content:''; position:absolute; inset-inline-end:0; inset-block-end:-12px; width:46%; height:28px; border-block-end:3px solid rgba(47,106,224,.14); border-inline-end:3px solid rgba(47,106,224,.14); border-radius:0 0 20px 0 }
.route-phase--turn::after{ inset-inline-end:auto; inset-inline-start:0; border-inline-end:0; border-inline-start:3px solid rgba(47,106,224,.14); border-radius:0 0 0 20px }
.route-phase__head{ display:flex; align-items:flex-start; gap:10px }
.route-phase__n{ font-size:28px; line-height:1; color:rgba(47,106,224,.30); font-weight:300 }
.route-phase__head strong{ display:block; color:var(--ink); font-size:14px }
.route-phase__head small{ display:block; color:var(--ink-45); font-size:10.5px; margin-top:4px }
.route-phase__line{ position:relative; min-height:72px; display:flex; align-items:center; gap:12px; padding:10px 18px; direction:ltr }
.route-phase--turn .route-phase__line{ direction:rtl }
.route-phase__line::before{
  content:''; position:absolute; inset-inline:0; inset-block-start:50%; height:4px; transform:translateY(-50%);
  border-radius:999px; background:rgba(29,29,31,.07);
}
.route-phase--active .route-phase__line::before{ background:linear-gradient(90deg, rgba(47,106,224,.16), rgba(47,106,224,.90), rgba(255,107,94,.35)) }
.route-stop{
  position:relative; z-index:2; flex:none; display:grid; place-items:center; direction:rtl;
  color:var(--ink-45); text-decoration:none;
}
.route-stop__id{
  width:38px; height:38px; display:grid; place-items:center; border-radius:50%;
  background:#fff; border:1px solid rgba(29,29,31,.13); font-size:11px; box-shadow:0 5px 14px rgba(24,39,75,.06);
}
.route-stop--done .route-stop__id{ color:#fff; background:var(--accent); border-color:var(--accent); box-shadow:0 7px 18px rgba(47,106,224,.24) }
.route-stop--open .route-stop__id{ color:var(--accent); border-color:var(--accent-tint-2) }
.route-stop--locked{ cursor:not-allowed }
.route-stop--current{
  display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center;
  min-width:300px; min-height:88px; padding:13px 16px; border-radius:21px;
  background:rgba(255,255,255,.95); border:1px solid rgba(255,107,94,.22);
  box-shadow:0 16px 38px rgba(24,39,75,.10); color:var(--ink);
}
.route-stop--current .route-stop__id{
  width:52px; height:52px; color:#fff; background:var(--accent-coral); border-color:var(--accent-coral);
  box-shadow:0 9px 20px rgba(255,107,94,.26); font-size:14px;
}
.route-stop__body{ display:flex; flex-direction:column; min-width:0; line-height:1.55 }
.route-stop__body strong{ color:var(--ink); font-size:15px }
.route-stop__body > span:last-child{ color:var(--ink-45); font-size:10.5px }
.route-stop__eyebrow{ color:var(--accent-coral); font-size:10px }
.route-stop__go{ color:var(--accent-coral); font-size:11.5px; white-space:nowrap }
.route-origin{ display:inline-flex; align-items:center; gap:10px; margin-top:16px; padding:10px 16px; border-radius:16px; color:var(--accent); background:var(--accent-tint) }
.route-origin small,.route-origin strong{ display:block }
.route-origin small{ color:var(--ink-45); font-size:10px }
.route-origin strong{ font-size:14px }
.route-origin__lamp{ width:20px; height:20px; border:2px solid var(--accent); border-radius:50%; position:relative }
.route-origin__lamp::after{ content:''; position:absolute; inset-inline:0; inset-block-end:-6px; width:8px; height:2px; margin-inline:auto; background:var(--accent); border-radius:3px }

/* ── Funnel, estimates, purchase ────────────────────────── */
.bar--funnel{ margin-bottom:28px }
.fsteps{ box-shadow:none; background:rgba(255,255,255,.68) }
.fstep-sep{ flex:1; max-width:34px; background:rgba(47,106,224,.16) }
.fstep--at{ color:var(--accent) }
.scope-item{ background:rgba(255,255,255,.70); border-color:rgba(29,29,31,.08); border-radius:15px; box-shadow:0 5px 15px rgba(24,39,75,.035) }
.scope-move{ border-radius:10px }
.nums{ position:relative; gap:0; padding-block:16px }
.nums::before{ content:''; position:absolute; inset-inline:10%; inset-block-start:50%; height:3px; background:rgba(47,106,224,.13); transform:translateY(-50%) }
.num{ position:relative; z-index:1; background:transparent; padding:14px 10px }
.num::before{ content:''; display:block; width:60px; height:60px; margin:0 auto -48px; border-radius:50%; background:#fff; box-shadow:0 8px 24px rgba(47,106,224,.10) }
.num__v{ position:relative }
.vs,.vs--us{ border-radius:20px; background:rgba(255,255,255,.62); border-color:rgba(29,29,31,.08) }
.vs--us{ background:var(--accent-tint); border-color:var(--accent-tint-2) }
.big-range{ color:var(--accent); letter-spacing:-.045em }

/* ── Mission: one document with a four-stage route ─────── */
.mission-stagebar{
  max-width:760px; margin:0 auto 18px; display:flex; align-items:center; padding:0 14px;
}
.mission-stage{ flex:1; position:relative; display:flex; flex-direction:column; align-items:center; gap:5px; color:var(--ink-38); font-size:11px }
.mission-stage::before{ content:''; position:absolute; inset-inline-start:50%; inset-inline-end:-50%; inset-block-start:16px; height:3px; background:rgba(29,29,31,.08) }
.mission-stage:first-child::before{ display:none }
.mission-stage__n{ position:relative; z-index:1; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:#fff; border:1px solid var(--hairline); font-size:10px }
.mission-stage--active{ color:var(--accent); font-weight:500 }
.mission-stage--active .mission-stage__n{ color:#fff; background:var(--accent); border-color:var(--accent); box-shadow:0 7px 18px rgba(47,106,224,.20) }
.mission-flow{
  max-width:820px; gap:0; padding:12px 28px 28px; border-radius:30px;
  background:rgba(255,255,255,.82); border:1px solid rgba(29,29,31,.055); box-shadow:var(--shadow-panel);
}
.mission-flow > .panel{
  padding:24px 8px; border:0; border-radius:0; box-shadow:none; background:transparent; backdrop-filter:none;
}
.mission-flow > .panel + .panel{ border-top:1px solid var(--hairline) }
.mission-flow > .panel--quiet{ background:transparent }
.mission-flow .mfacts{ gap:0; border-block:1px solid var(--hairline); margin-top:18px }
.mission-flow .mfact{ flex:1; border:0; border-radius:0; background:transparent; padding:14px 18px }
.mission-flow .mfact + .mfact{ border-inline-start:1px solid var(--hairline) }
.mission-flow .prompt-body{ max-height:420px; padding:18px; border:1px solid var(--hairline); border-radius:18px; background:rgba(245,245,247,.72) }
.mission-flow .pitfalls li::before{ background:var(--accent-coral) }

/* ── Human support ─────────────────────────────────────── */
.qa2-human{ color:var(--accent); font-size:12.5px; margin-top:-2px }
#qa2-root > .stack{ max-width:860px; margin-inline:auto }
#qa2-root .stack > .panel{ border-radius:25px }
#qa2-root article.panel{ position:relative; padding-inline-start:36px }
#qa2-root article.panel::before{ content:''; position:absolute; inset-inline-start:18px; inset-block:25px; width:3px; border-radius:3px; background:linear-gradient(var(--accent),rgba(47,106,224,.08)) }
.qa2-q{ font-size:16px }
.qa2-role--founder{ background:var(--accent-tint); color:var(--accent) }
.qa2-scopes{ box-shadow:none; background:transparent }
#qa2-composer .field{ min-height:130px; border:1px solid var(--hairline); border-radius:18px; padding:16px; background:rgba(245,245,247,.58) }

/* ── Account: one vertical settings spine ──────────────── */
#ac-root{ max-width:820px }
#ac-root > .panel{ padding:30px 34px }
.account-journey{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 0 20px; border-bottom:1px solid var(--hairline) }
.account-journey > div:first-child strong{ display:block; color:var(--accent); font-size:22px; font-weight:500 }
.account-journey > div:first-child span{ display:block; color:var(--ink-45); font-size:11px }
.account-destinations{ display:flex; align-items:center; gap:9px; color:var(--ink-60); font-size:11.5px }
.account-destinations__dot{ width:5px; height:5px; border-radius:50%; background:var(--accent) }
#ac-root .end-rows{ position:relative }
#ac-root .end-row{ position:relative; padding-block:15px; padding-inline:26px 4px; align-items:center }
#ac-root .end-row::before{ content:''; position:absolute; inset-inline-start:3px; inset-block-start:27px; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px var(--accent-tint) }
#ac-root .end-row::after{ content:''; position:absolute; inset-inline-start:6px; inset-block-start:35px; inset-block-end:-15px; width:2px; background:rgba(47,106,224,.12) }
#ac-root .end-row:last-child::after{ display:none }
#ac-root .end-row__k{ color:var(--ink); font-weight:500 }
#ac-root #ac-del{ color:var(--accent-coral); border-color:rgba(255,107,94,.34) }

/* ── Mobile ────────────────────────────────────────────── */
@media (max-width:720px){
  body{ background:var(--bg) }
  .app,.shell{ padding-inline:14px }
  .panel{ border-radius:22px }
  .bar{ position:relative; background:transparent; padding-block:4px }
  .land-hero__mark{ width:84px; height:84px; margin-bottom:14px }
  .land-hero h1{ font-size:35px }
  .land-dump{ border-radius:24px }
  .land-input-stage{ padding-inline:20px }
  .land-mic-stage{ padding-inline:20px }
  .land-mic-stage .mic{ grid-template-columns:1fr 96px 1fr }
  .land-mic-stage .mic__btn{ width:88px; height:88px }
  .land-dump .hero-outs{ grid-template-columns:1fr 1fr; padding-inline:20px }
  .land-dump .hero-out:nth-child(3){ border-inline-start:0; border-top:1px solid var(--hairline) }
  .land-dump .hero-out:nth-child(4){ border-top:1px solid var(--hairline) }
  .land-dump > .actions{ padding-inline:20px }

  .journey-canvas{ padding:22px 14px 26px; border-radius:24px }
  .journey-head{ align-items:flex-end }
  .journey-head h1{ font-size:32px }
  .journey-head p:last-child{ font-size:12px }
  .journey-route{ padding-inline:2px }
  .store-target{ min-width:0; flex:1; min-height:60px; border-radius:16px; font-size:12px }
  .route-fork{ width:52%; }
  .route-phase{ grid-template-columns:1fr; gap:8px; padding-block:16px 24px }
  .route-phase__head{ padding-inline:8px }
  .route-phase__n{ font-size:22px }
  .route-phase__line,.route-phase--turn .route-phase__line{ direction:ltr; flex-wrap:wrap; padding-inline:8px; justify-content:flex-start }
  .route-phase::after,.route-phase--turn::after{ inset-inline-start:18px; inset-inline-end:auto; width:42%; border-inline:0; border-inline-start:3px solid rgba(47,106,224,.14); border-radius:0 0 0 18px }
  .route-stop--current{ order:-1; width:100%; min-width:0; grid-template-columns:auto 1fr; padding:12px }
  .route-stop--current .route-stop__go{ grid-column:1 / -1; padding-top:10px; border-top:1px solid var(--hairline) }
  .route-stop__id{ width:34px; height:34px }
  .route-origin{ margin-inline:8px }

  .mission-stagebar{ padding-inline:0 }
  .mission-flow{ padding:8px 18px 24px; border-radius:24px }
  .mission-flow > .panel{ padding-block:20px }
  .mission-flow .mfacts{ flex-direction:column }
  .mission-flow .mfact + .mfact{ border-inline-start:0; border-top:1px solid var(--hairline) }

  .nums{ grid-template-columns:1fr 1fr }
  .nums::before{ display:none }
  #ac-root > .panel{ padding:24px 20px }
  .account-journey{ align-items:flex-start; flex-direction:column }
  #ac-root .end-row{ padding-inline-start:26px }
}

@media (max-width:390px){
  .route-destinations{ gap:8px }
  .store-target{ padding-inline:8px }
  .store-mark{ width:26px; height:26px }
  .land-dump .hero-outs{ grid-template-columns:1fr }
  .land-dump .hero-out{ border-inline-start:0; border-top:1px solid var(--hairline) }
  .land-dump .hero-out:first-child{ border-top:0 }
}

@media (prefers-reduced-motion:reduce){
  .land-mic-stage .level i{ animation:none !important }
}

/* ── Whole-app finish: shared interaction language ─────── */
::selection{ color:#fff; background:var(--accent) }
.pagehead{ min-height:44px; margin-bottom:18px }
.back{
  min-height:40px; padding:8px 14px; border-radius:13px;
  background:rgba(255,255,255,.72); border-color:rgba(29,29,31,.08);
  box-shadow:0 7px 18px rgba(24,39,75,.045); color:var(--ink-60);
}
.crumb{ color:var(--ink-38) }
.chip{
  min-height:38px; border-radius:13px; background:rgba(255,255,255,.76);
  border-color:rgba(29,29,31,.10); box-shadow:0 4px 12px rgba(24,39,75,.035);
}
.chip[aria-pressed="true"]{
  background:var(--accent); border-color:var(--accent); box-shadow:0 8px 18px rgba(47,106,224,.18);
}
.field{
  border:1px solid rgba(29,29,31,.10); border-radius:16px; padding:14px 16px;
  background:rgba(245,245,247,.62); transition:border-color .16s var(--ease),box-shadow .16s var(--ease),background .16s var(--ease);
}
.field:focus{ border-color:rgba(47,106,224,.48); background:#fff; box-shadow:0 0 0 4px rgba(47,106,224,.075) }
.field--single{ min-height:48px; padding-block:11px }
.gate-note{ color:var(--ink-45) }
.gate-fail{ color:var(--accent-coral) }
.gate-pass{ color:var(--accent) }
.panel--pass{ border-color:rgba(47,106,224,.24); box-shadow:0 20px 56px rgba(47,106,224,.10) }
.panel--pass::before{ background:var(--accent) }
.fact{ border-radius:15px; background:var(--accent-tint) }
.ring{ background:conic-gradient(var(--accent) 0 var(--p,0%),rgba(29,29,31,.07) var(--p,0%)); box-shadow:0 15px 34px rgba(47,106,224,.13) }
.ring__disc{ background:#fff }

/* ── Idea funnel: one calm editing canvas ──────────────── */
.flow-screen,#result-root{ max-width:860px }
.flow-screen > .row:first-child,#result-root > .row:first-child{ min-height:42px }
.flow-screen > .panel{
  padding:34px 38px; border-radius:30px; position:relative; overflow:hidden;
}
.flow-screen > .panel::before,#result-root > .panel::before{
  content:''; position:absolute; inset-block-start:0; inset-inline:34px; height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),var(--accent-sky),transparent); opacity:.65;
}
#idea-root .idea-pulse{ gap:8px }
#idea-root .idea-pulse i{ width:58px; height:4px; border-radius:999px }
#idea-root .idea-row{
  margin-top:8px; padding:15px 16px; border:1px solid transparent; border-radius:17px;
  background:rgba(245,245,247,.58); transition:border-color .16s var(--ease),background .16s var(--ease);
}
#idea-root .idea-row + .idea-row{ border-top-color:transparent }
#idea-root .idea-row:hover{ border-color:rgba(47,106,224,.12); background:#fff }
#idea-root .idea-row--off{ opacity:.52 }
#idea-root .idea-tog{ padding:0; background:transparent; box-shadow:none }
#idea-root .need-ask{
  position:relative; padding:18px 20px; border:1px solid rgba(47,106,224,.13);
  border-radius:18px; background:linear-gradient(135deg,rgba(47,106,224,.07),rgba(90,200,250,.04));
}
#idea-root .need-ask::before{ content:''; position:absolute; inset-inline-start:-1px; inset-block:18px; width:3px; border-radius:3px; background:var(--accent) }
#idea-root .tbl__row{ padding:15px 4px }

#scope-root > .panel:first-of-type{ padding-bottom:36px }
#scope-root .scope-nums{ gap:0; border-block:1px solid var(--hairline); padding-block:18px }
#scope-root .scope-nums .num{ border-radius:0 }
#scope-root .scope-nums .num + .num{ border-inline-start:1px solid var(--hairline) }
#scope-root .split{
  gap:14px; border:0; padding-top:0; overflow:visible;
}
#scope-root .split > div{
  min-height:250px; padding:20px; border:1px solid rgba(29,29,31,.075); border-radius:20px;
  background:rgba(245,245,247,.50);
}
#scope-root .split > div:first-child{ border-color:rgba(47,106,224,.17); background:linear-gradient(145deg,rgba(47,106,224,.07),rgba(255,255,255,.66)) }
#scope-root .split > div:last-child{ padding-inline-start:20px }
#scope-root .split h3{ font-size:14px; color:var(--ink); margin-bottom:14px }
#scope-root .scope-list{ gap:8px }
#scope-root .scope-item{ padding:10px 12px; background:#fff; border-radius:14px }
#scope-root .scope-add{ padding-top:8px }
#scope-root .scope-move{ min-height:34px; background:transparent; box-shadow:none }

/* ── Assessment and purchase: editorial product page ───── */
#result-root{ gap:22px }
#result-root > .panel{ position:relative; overflow:hidden; padding:34px 38px; border-radius:30px }
#result-root > .panel:first-of-type{ min-height:310px; background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(236,244,255,.78)) }
#result-root .verdict{ max-width:620px; font-size:clamp(34px,5vw,52px); letter-spacing:-.05em }
#result-root .nums{ margin-top:24px }
#result-root .num::before{ width:68px; height:68px; margin-bottom:-54px }
#result-root .tvs{ padding:22px; border-radius:20px; background:rgba(255,255,255,.68) }
#result-root .ticks li{ padding:4px 0 }
#result-root .vs{ box-shadow:0 12px 30px rgba(24,39,75,.05) }
#result-root .res-cta{ padding:38px; background:linear-gradient(150deg,rgba(255,255,255,.97),rgba(238,245,255,.88)) }
#result-root .res-cta .btn--wide{ max-width:520px; margin-inline:auto }
#result-root .panel--current::after{
  content:''; position:absolute; width:190px; height:190px; border-radius:50%;
  inset-inline-end:-110px; inset-block-start:-110px; border:1px solid rgba(47,106,224,.14); box-shadow:0 0 0 24px rgba(47,106,224,.025);
}
#result-root .faq-q{ font-size:14px }

/* ── Language: a decisive two-path selector ────────────── */
#lg-root{ max-width:780px; padding-top:clamp(24px,7vh,70px) }
#lg-root > .panel{ padding:42px; border-radius:32px; text-align:center; overflow:hidden; position:relative }
#lg-root > .panel::before{
  content:''; display:block; width:76px; height:76px; margin:0 auto 22px; border-radius:22px;
  background:url('../img/mark-192.png') center/cover no-repeat; box-shadow:0 15px 34px rgba(47,106,224,.20);
}
#lg-root > .panel > p{ max-width:620px; margin-inline:auto }
#lg-root .lang-opts{ gap:14px; margin-top:28px; text-align:start }
#lg-root .lang-opt{
  min-height:150px; position:relative; padding:24px; border-radius:21px;
  background:rgba(245,245,247,.68); border-color:rgba(29,29,31,.07); box-shadow:0 9px 24px rgba(24,39,75,.04);
}
#lg-root .lang-opt::after{
  content:''; position:absolute; inset-inline-end:20px; inset-block-start:20px; width:18px; height:18px;
  border:1.5px solid rgba(29,29,31,.18); border-radius:50%; background:#fff;
}
#lg-root .lang-opt[aria-pressed="true"]{ background:var(--accent-tint); border-color:rgba(47,106,224,.44); box-shadow:0 14px 28px rgba(47,106,224,.10) }
#lg-root .lang-opt[aria-pressed="true"]::after{ border:5px solid var(--accent) }
#lg-root .lang-opt__name{ font-size:20px; margin-bottom:8px }
#lg-root .actions{ justify-content:center }

/* ── Payment states: one unambiguous status object ─────── */
#pr-root{ max-width:660px; padding-top:clamp(26px,8vh,86px) }
#pr-root > .panel{ min-height:360px; padding:46px 42px; border-radius:32px; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center }
#pr-root > .panel::before{
  content:''; width:78px; height:78px; margin-bottom:24px; border-radius:24px;
  background:radial-gradient(circle at 36% 28%,#7AD1FA,#3476E8 42%,#1E4CAB 100%);
  box-shadow:0 0 0 10px rgba(47,106,224,.055),0 18px 34px rgba(47,106,224,.22);
}
#pr-root > .panel--pass::before{ background:url('../img/mark-192.png') center/cover no-repeat }
#pr-root .sep{ width:100% }
#pr-root .actions{ justify-content:center }
#pr-root .pay-dot{ width:10px; height:10px; box-shadow:0 0 0 7px var(--accent-tint) }

/* ── Sign-in: compact optical sheet, same in-place flow ── */
.sheet-wrap::before{ background:rgba(17,24,39,.30); backdrop-filter:blur(18px) saturate(.9) }
.sheet{
  width:min(470px,100%); padding:36px; border-radius:30px; text-align:center;
  background:rgba(255,255,255,.94); border-color:rgba(255,255,255,.96); box-shadow:0 28px 90px rgba(16,31,68,.20);
}
.sheet__mark{ display:block; margin:0 auto 18px; filter:drop-shadow(0 12px 22px rgba(47,106,224,.20)) }
.sheet > p:not(.eyebrow):not(.gate-note){ color:var(--ink-60) }
.sheet .lbl{ margin-top:22px; text-align:start }
.sheet .field{ text-align:center; font-size:18px; letter-spacing:.08em }
.sheet .actions{ justify-content:center }

/* ── Idea card and editor: a tangible product artifact ─── */
#cv-root,#ce-root{ max-width:840px }
#cv-root > .panel,#ce-root > .panel{ padding:36px 40px; border-radius:30px }
#cv-root > .panel > h1{ max-width:650px; font-size:clamp(32px,4.6vw,48px) }
#cv-root > .panel > .sep{ display:grid; grid-template-columns:150px 1fr; gap:24px }
#cv-root > .panel > .sep h3{ color:var(--accent); font-size:12px; padding-top:3px }
#cv-root > .panel > .sep > p{ color:var(--ink-80) }
#cv-root > .panel > .sep:has(.cv-raw),#cv-root > .panel > .sep:last-child{ display:block }
.cv-share{ align-items:center; padding:26px 0 12px }
.cv-share .share{
  position:relative; width:min(390px,100%); border-radius:34px; overflow:hidden;
  background:
    radial-gradient(220px 220px at 18% 8%,rgba(90,200,250,.19),transparent 72%),
    linear-gradient(150deg,rgba(255,255,255,.98),rgba(237,244,255,.90));
  border:1px solid rgba(29,29,31,.06); box-shadow:0 30px 70px rgba(24,39,75,.15);
}
.cv-share .share::after{ content:''; position:absolute; width:220px; height:220px; border-radius:50%; inset-inline-end:-150px; inset-block-end:-130px; border:1px solid rgba(47,106,224,.15); box-shadow:0 0 0 24px rgba(47,106,224,.025) }
.share__mark{ flex:none; filter:drop-shadow(0 7px 12px rgba(47,106,224,.18)) }
.cv-share .share__idea{ font-size:26px; letter-spacing:-.035em }
.cv-share .fact{ background:rgba(255,255,255,.68); border:1px solid rgba(29,29,31,.055) }
#ce-root .ce-field{ min-height:112px; margin-top:8px }
#ce-root .panel > .sep{ padding-top:20px }
#ce-root .panel > .sep:focus-within .lbl{ color:var(--accent) }

/* ── Store submission and graduation ───────────────────── */
#pf-root,#gr-root,#pv-root{ max-width:840px }
#pf-root > .panel,#gr-root > .panel,#pv-root > .panel{ padding:36px 40px; border-radius:30px }
#pf-root > .panel::before{
  content:''; display:block; width:84px; height:84px; margin-bottom:22px; border-radius:24px;
  background:url('../img/mark-192.png') center/cover no-repeat; box-shadow:0 16px 34px rgba(47,106,224,.18);
}
#pf-root .end-lbl{ margin-top:24px; padding-top:18px; color:var(--ink); font-weight:500 }
#pf-root #pf-ios,#pf-root #pf-play{ min-height:58px; background:#fff; box-shadow:0 8px 18px rgba(24,39,75,.045) }
#pf-root #pf-ios{ border-inline-start:4px solid var(--accent) }
#pf-root #pf-play{ border-inline-start:4px solid var(--accent-sky) }
.graduate-hero{ display:flex; align-items:center; gap:22px; padding-bottom:24px; border-bottom:1px solid var(--hairline) }
.graduate-hero__mark{ flex:none; filter:drop-shadow(0 16px 26px rgba(47,106,224,.22)) }
#gr-root .graduate-hero + .end-rows{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding-top:22px }
#gr-root .graduate-hero + .end-rows .end-row{ display:block; padding:18px; border:1px solid rgba(29,29,31,.07); border-radius:18px; background:rgba(245,245,247,.55) }
#gr-root .graduate-hero + .end-rows .end-row + .end-row{ border-top:1px solid rgba(29,29,31,.07) }
#gr-root .graduate-hero + .end-rows .end-row__k{ display:block; min-width:0; color:var(--accent); font-weight:500 }
#gr-root .graduate-hero + .end-rows .end-row__v{ display:block; margin-top:5px; overflow-wrap:anywhere }
#gr-root .end-sum{ padding:28px; border:0; border-radius:22px; background:rgba(245,245,247,.56) }

/* ── Privacy and settings documents ────────────────────── */
#pv-root .panel > .sep{ position:relative; padding-inline-start:26px }
#pv-root .panel > .sep::before{
  content:''; position:absolute; inset-inline-start:2px; inset-block-start:28px; width:8px; height:8px;
  border-radius:50%; background:var(--accent); box-shadow:0 0 0 6px var(--accent-tint);
}
#pv-root .panel > .sep::after{ content:''; position:absolute; inset-inline-start:5px; inset-block-start:38px; inset-block-end:-24px; width:2px; background:rgba(47,106,224,.11) }
#pv-root .panel > .sep:last-child::after{ display:none }

/* ── Missing route: intentional, not a dead end ────────── */
#nf-root{ min-height:520px; padding:72px 30px; display:flex; flex-direction:column; align-items:center; justify-content:center }
.lost__mark{ margin-bottom:20px; filter:drop-shadow(0 16px 28px rgba(47,106,224,.22)) }
#nf-root h1{ font-size:clamp(34px,5vw,52px) }
#nf-root .ltr{ margin:14px 0; padding:7px 14px; border-radius:10px; background:rgba(29,29,31,.045) }
#nf-root .actions{ min-width:240px }

/* ── Comprehensive responsive finish ───────────────────── */
@media (max-width:720px){
  .flow-screen > .panel,#result-root > .panel,#cv-root > .panel,#ce-root > .panel,
  #pf-root > .panel,#gr-root > .panel,#pv-root > .panel{ padding:25px 20px }
  #idea-root .idea-row{ padding:14px }
  #scope-root .scope-nums{ grid-template-columns:1fr 1fr }
  #scope-root .scope-nums .num + .num{ border-inline-start:0 }
  #scope-root .scope-nums .num:nth-child(2n){ border-inline-start:1px solid var(--hairline) }
  #scope-root .split{ gap:10px }
  #scope-root .split > div,#scope-root .split > div:last-child{ padding:17px }
  #result-root .tvs{ grid-template-columns:1fr; gap:14px }
  #result-root .tvs__sep{ height:1px; width:100%; overflow:hidden; background:var(--hairline) }
  #lg-root{ padding-top:8px }
  #lg-root > .panel,#pr-root > .panel,.sheet{ padding:28px 20px }
  #lg-root .lang-opt{ min-height:126px }
  #pr-root{ padding-top:12px }
  #pr-root > .panel{ min-height:420px }
  #cv-root > .panel > .sep{ grid-template-columns:1fr; gap:5px }
  .graduate-hero{ align-items:flex-start; flex-direction:column }
  #gr-root .graduate-hero + .end-rows{ grid-template-columns:1fr }
  .sheet{ border-radius:28px 28px 0 0; padding-bottom:calc(28px + env(safe-area-inset-bottom)) }
  #nf-root{ min-height:420px; padding-inline:12px }
}

@media (max-width:390px){
  #scope-root .scope-nums{ grid-template-columns:1fr }
  #scope-root .scope-nums .num:nth-child(2n){ border-inline-start:0 }
  .cv-share .facts{ grid-template-columns:1fr }
}

/* ── Responsive integrity pass ───────────────────────────
 * Keep every decorative route, progress rail and long value inside the
 * surface that owns it. These are layout constraints, not visual clipping. */
html,body{ max-width:100%; overflow-x:clip }
.app,.shell,.shell__main,.panel,.row,.actions,.tbl__row,.end-row,
.journey-canvas,.journey-route,.route-phase,.route-phase__line,
.mission-flow,.mission-flow > .panel,.mfacts,.mfact{ min-width:0; max-width:100% }
.panel h1,.panel h2,.panel h3,.panel p,.route-stop__body,
.end-row__v,.tbl__v,.mfact__v,.mfact__note,.prompt-body,.ltr{
  overflow-wrap:anywhere; word-break:normal;
}
.field,.prompt-body,.actions > *{ max-width:100% }
.step,.step > div,.step__cmd{ min-width:0; max-width:100% }
.step__cmd{ overflow:hidden }
.step__cmd code{ min-width:0; max-width:100% }
.mfact__v,.mfact__v > span{ min-width:0; max-width:100% }

/* The route can contain a large current-mission card and several stops.
   Let the stops wrap instead of increasing the document width. */
.journey-progress strong{ white-space:nowrap; direction:ltr; unicode-bidi:isolate }
.journey-route{ width:100% }
.route-destinations{ flex-wrap:wrap }
.route-phase{ grid-template-columns:minmax(104px,128px) minmax(0,1fr) }
.route-phase__line{
  width:100%; flex-wrap:wrap; gap:9px; overflow:clip;
}
.route-stop--current{
  width:min(300px,100%); min-width:0; flex:1 1 278px;
}

/* A single contained rail replaces four half-width pseudo-elements. */
.mission-stagebar{ position:relative; overflow:hidden; isolation:isolate }
.mission-stagebar::before{
  content:''; position:absolute; z-index:0; inset-inline:12.5%; inset-block-start:16px;
  height:3px; border-radius:999px; background:rgba(29,29,31,.08);
}
.mission-stage{ min-width:0; z-index:1; text-align:center }
.mission-stage::before{ display:none }

/* The optional development controls must remain usable on narrow devices. */
.demo{ max-width:calc(100vw - 28px); flex-wrap:wrap; overflow:auto }
.demo select{ min-width:0; max-width:100% }

/* The sidebar stops competing with the journey before the route becomes
   cramped. Tablets get the same persistent bottom navigation as phones. */
@media (max-width:1080px){
  .shell{ flex-direction:column; width:100%; padding:20px 20px 132px }
  .side{ display:none }
  .tabbar{ display:flex }
  .shell__main{ width:100% }

  .journey-route{ padding-inline:4px }
  .route-phase{ grid-template-columns:1fr; gap:9px; padding-block:17px 25px }
  .route-phase__head{ padding-inline:9px }
  .route-phase__line,.route-phase--turn .route-phase__line{
    direction:ltr; padding-inline:10px; justify-content:flex-start;
  }
  .route-phase::after,.route-phase--turn::after{
    inset-inline-start:18px; inset-inline-end:auto; width:42%;
    border-inline:0; border-inline-start:3px solid rgba(47,106,224,.14);
    border-radius:0 0 0 18px;
  }
  .route-stop--current{ order:-1; width:min(430px,100%) }
}

@media (max-width:720px){
  .shell{ padding:14px 14px calc(132px + env(safe-area-inset-bottom)) }

  /* Keep a real logo button beside compact, equally-sized funnel stages. */
  .bar--funnel{ width:100%; gap:8px; align-items:center }
  .bar--funnel .pill--brand{
    width:48px; min-width:48px; height:48px; flex:0 0 48px;
    padding:0; justify-content:center; border-radius:16px;
  }
  .bar--funnel .brand,.bar--funnel .brand-div,.bar--funnel .slogan{ display:none }
  .bar--funnel .brandmark{ width:28px; height:28px; flex:none }
  .fsteps{
    flex:1 1 auto; width:calc(100% - 56px); min-width:0; gap:4px;
    justify-content:space-between; padding:8px 9px; overflow:hidden;
  }
  .fstep{ flex:1 1 0; min-width:0; overflow:hidden; text-overflow:ellipsis; text-align:center }
  .fstep-sep{ flex:0 1 12px; min-width:4px; max-width:12px }

  .journey-head{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:12px }
  .journey-progress{ min-width:54px; padding-top:3px }
  .journey-progress strong{ font-size:19px }
  .journey-progress span{ max-width:64px; line-height:1.4 }
  .route-stop--current{ width:100%; flex-basis:100% }

  .demo{
    inset-inline:12px; width:auto; max-width:none; max-height:112px;
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
  .demo select{ width:100% }
  .demo select:first-child{ grid-column:1 / -1 }
}

@media (max-width:390px){
  .mission-flow{ overflow:hidden; padding-inline:14px }
  .mission-flow .mfact{ padding-inline:8px }
  .mission-flow .mfact__v{ flex:1 1 auto; justify-content:flex-end }
  .mission-flow .mfact__v > span{ overflow-wrap:anywhere; text-align:end }
  .mission-stage{ font-size:9.5px }
  .journey-canvas{ padding-inline:11px }
  .route-phase__line,.route-phase--turn .route-phase__line{ padding-inline:4px }
}

@media (max-width:340px){
  .bar--funnel .pill--brand{ display:none }
  .fsteps{ width:100%; flex-basis:100%; font-size:9.5px }
}