/* App Store polish pass — 2026-08-25.
 * Presentation only: depth, motion, responsive composition, and interaction
 * feedback. This layer deliberately changes no layout semantics or state.
 */

:root{
  --bg:#F3F5F9;
  --accent:#2D67DE;
  --accent-deep:#173E93;
  --accent-blue:#3E82ED;
  --accent-sky:#73D1FA;
  --accent-coral:#FF6D60;
  --panel-edge:rgba(255,255,255,.92);
  --panel-edge-blue:rgba(47,106,224,.15);
  --shadow-panel:0 1px 2px rgba(22,43,88,.025),0 18px 48px rgba(22,43,88,.07),0 42px 90px rgba(22,43,88,.035);
  --shadow-accent:0 10px 20px rgba(47,106,224,.18),0 20px 42px rgba(47,106,224,.13);
  --ease-spring:cubic-bezier(.2,.82,.25,1);
}

html{ scroll-behavior:smooth }
body{
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(900px 560px at 103% -8%,rgba(98,199,248,.15),transparent 68%),
    radial-gradient(760px 520px at -12% 102%,rgba(47,106,224,.10),transparent 69%),
    linear-gradient(180deg,#F7F8FB 0%,var(--bg) 48%,#F5F7FB 100%);
}
body::before{
  display:block;
  background:
    radial-gradient(520px 300px at 84% 4%,rgba(92,189,244,.10),transparent 70%),
    radial-gradient(480px 320px at 9% 82%,rgba(47,106,224,.07),transparent 72%);
}
body::after{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.24;
  background-image:
    linear-gradient(rgba(47,106,224,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(47,106,224,.025) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 78%,transparent 100%);
}

::selection{ color:#fff; background:rgba(47,106,224,.82) }
::-webkit-scrollbar{ width:10px; height:10px }
::-webkit-scrollbar-track{ background:transparent }
::-webkit-scrollbar-thumb{ border:3px solid transparent; border-radius:999px; background:rgba(47,106,224,.22); background-clip:padding-box }
::-webkit-scrollbar-thumb:hover{ background-color:rgba(47,106,224,.38) }

.app{ position:relative; isolation:isolate; min-height:100dvh }
.shell{ position:relative }
.shell__main{ min-width:0 }

h1,h2,h3{ text-wrap:balance }
p{ text-wrap:pretty }
.eyebrow{ display:flex; align-items:center; gap:8px }
.eyebrow::before{
  content:''; width:18px; height:2px; flex:none; border-radius:2px;
  background:linear-gradient(90deg,var(--accent-sky),var(--accent));
}

.panel,
.pill,
.journey-phase,
.land-stage,
.account-section{
  border-color:rgba(255,255,255,.86);
  box-shadow:var(--shadow-panel);
}
.panel{
  background:linear-gradient(145deg,rgba(255,255,255,.91),rgba(255,255,255,.72));
}
.panel--quiet{ background:rgba(255,255,255,.54); box-shadow:0 12px 36px rgba(22,43,88,.035) }
.panel--current{
  border-color:rgba(47,106,224,.22);
  box-shadow:0 1px 0 rgba(255,255,255,.92) inset,0 22px 58px rgba(47,106,224,.12);
}

.btn{
  position:relative; isolation:isolate; overflow:hidden;
  min-inline-size:0; max-inline-size:100%;
  background-image:
    linear-gradient(112deg,transparent 0,rgba(255,255,255,.18) 34%,transparent 52%),
    linear-gradient(135deg,var(--accent-deep) -18%,var(--accent) 43%,var(--accent-blue) 79%,var(--accent-sky) 145%);
  background-size:230% 100%,100% 100%;
  background-position:110% 0,0 0;
  box-shadow:var(--shadow-accent);
  transition:transform .18s var(--ease-spring),box-shadow .18s var(--ease-spring),filter .18s var(--ease),background-position .42s var(--ease);
}
.btn:hover{ background-position:-80% 0,0 0; box-shadow:0 12px 22px rgba(47,106,224,.20),0 26px 48px rgba(47,106,224,.14) }
.btn:active{ transform:translateY(1px) scale(.985); box-shadow:0 7px 16px rgba(47,106,224,.18) }
.btn--secondary,.btn--quiet{
  background-image:none; box-shadow:none;
}
.btn--secondary{ background:rgba(255,255,255,.52) }
.btn[disabled]{ background-image:none }

:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:3px solid rgba(47,106,224,.28) !important;
  outline-offset:3px !important;
}
.field{
  border-top-color:rgba(29,29,31,.11);
  transition:border-color .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease);
}
.field:focus{
  border-top-color:var(--accent);
  background:linear-gradient(180deg,rgba(47,106,224,.025),transparent 42%);
  box-shadow:0 -1px 0 rgba(47,106,224,.05);
}

/* Navigation feels like one instrument, not a collection of white boxes. */
.side{ position:sticky; top:28px; align-self:start }
.side__brand{
  position:relative; overflow:hidden;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,255,255,.74));
}
.side__brand::after{
  content:''; position:absolute; inset-inline:18px; inset-block-end:0; height:2px;
  border-radius:2px; background:linear-gradient(90deg,transparent,var(--accent-sky),var(--accent),transparent); opacity:.55;
}
.side__resume{
  border:1px solid rgba(255,255,255,.24);
  background:
    radial-gradient(160px 100px at 90% -10%,rgba(255,255,255,.22),transparent 65%),
    linear-gradient(135deg,#1A49AD 0%,#2F6AE0 57%,#55B8F4 125%);
  box-shadow:0 20px 44px rgba(35,84,179,.24),0 1px 0 rgba(255,255,255,.22) inset;
}
.side__resume::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 18%,rgba(255,255,255,.11) 39%,transparent 58%);
  transform:translateX(70%);
}
.side__nav a,.tabbar a{ transition:color .18s var(--ease),background .18s var(--ease),transform .18s var(--ease-spring),box-shadow .18s var(--ease) }
.side__nav a:hover{ color:var(--accent); background:rgba(47,106,224,.055); transform:translateX(-2px) }
.side__nav a[aria-current="page"]{ box-shadow:0 6px 16px rgba(47,106,224,.075) inset }
.side__foot{ background:linear-gradient(145deg,rgba(255,255,255,.91),rgba(245,248,255,.76)) }
.tabbar{
  border:1px solid rgba(255,255,255,.86); border-bottom:0;
  background:rgba(255,255,255,.88);
  box-shadow:0 -1px 0 rgba(255,255,255,.8),0 -14px 38px rgba(22,43,88,.10);
}
.tabbar a[aria-current="page"]{
  background:linear-gradient(145deg,#2458C9,#397AE8 68%,#64BDF3 145%);
  box-shadow:0 9px 24px rgba(47,106,224,.24),0 1px 0 rgba(255,255,255,.22) inset;
}

/* Landing — the orbit communicates the complete idea → build → store path. */
.land-bar .pill--brand,.land-bar.pill--brand,.bar .pill--brand{
  border-color:rgba(255,255,255,.94);
  background:rgba(255,255,255,.76);
  box-shadow:0 12px 36px rgba(22,43,88,.055);
}
.land-hero.land-hero--journey{ position:relative }
.land-hero.land-hero--journey::before{
  content:''; position:absolute; z-index:-1; width:680px; height:440px;
  inset-inline-end:-220px; inset-block-start:70px; border-radius:50%;
  background:radial-gradient(circle,rgba(87,185,243,.10),rgba(47,106,224,.045) 48%,transparent 72%);
  filter:blur(3px);
}
.land-kicker span{ box-shadow:0 0 16px rgba(47,106,224,.35) }
.land-hero__visual::before{
  background:radial-gradient(circle,rgba(47,106,224,.22),rgba(90,200,250,.09) 48%,transparent 72%);
  filter:drop-shadow(0 24px 44px rgba(47,106,224,.10));
}
.land-orbit--one{ box-shadow:0 0 70px rgba(47,106,224,.055) inset }
.land-float{
  border-color:rgba(255,255,255,.96);
  background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(255,255,255,.75));
  box-shadow:0 20px 48px rgba(25,55,112,.12),0 1px 0 #fff inset;
}
.land-float::before{
  content:''; width:7px; height:7px; margin-block-end:5px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 5px rgba(47,106,224,.08),0 0 18px rgba(47,106,224,.24);
}
.land-stage{
  overflow:hidden;
  background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(255,255,255,.58));
  transition:transform .24s var(--ease-spring),border-color .24s var(--ease),box-shadow .24s var(--ease);
}
.land-stage::after{
  content:''; position:absolute; inset-inline:0; inset-block-end:0; height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-sky)); opacity:.18;
}
.land-stage--active::after{ opacity:1 }
.land-test{
  position:relative; overflow:hidden;
  background:
    radial-gradient(430px 230px at 100% 0,rgba(90,200,250,.11),transparent 72%),
    linear-gradient(145deg,rgba(47,106,224,.075),rgba(255,255,255,.52));
  box-shadow:0 28px 70px rgba(24,55,113,.075);
}
.land-test::before{
  content:''; position:absolute; width:220px; height:220px; inset-inline-start:-130px; inset-block-end:-150px;
  border:1px solid rgba(47,106,224,.12); border-radius:50%; box-shadow:0 0 0 28px rgba(47,106,224,.025);
}
.land-dump{ box-shadow:0 22px 56px rgba(24,55,113,.10),0 1px 0 #fff inset }

/* Journey — reinforce motion, current state, and destination. */
.journey-head{
  background:
    radial-gradient(430px 260px at 4% 112%,rgba(115,209,250,.34),transparent 70%),
    radial-gradient(320px 240px at 94% -20%,rgba(255,255,255,.12),transparent 72%),
    linear-gradient(135deg,#153A8D 0%,#2D67DE 56%,#4E9FF0 122%);
  box-shadow:0 30px 70px rgba(32,77,164,.27),0 1px 0 rgba(255,255,255,.14) inset;
}
.journey-head::before{ box-shadow:0 0 0 24px rgba(255,255,255,.035),0 0 0 52px rgba(255,255,255,.02) }
.journey-next{ box-shadow:0 10px 30px rgba(9,37,97,.09) inset,0 1px 0 rgba(255,255,255,.13) }
.journey-progress__ring,.account-progress__ring{ position:relative }
.journey-progress__ring::after,.account-progress__ring::after{
  content:''; position:absolute; inset:-7px; border-radius:50%; border:1px solid rgba(255,255,255,.16);
}
.journey-goal{
  border:1px solid rgba(255,255,255,.96);
  background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(246,249,255,.88));
  box-shadow:0 22px 54px rgba(24,55,113,.12),0 1px 0 #fff inset;
}
.journey-phase{
  overflow:hidden;
  background:linear-gradient(145deg,rgba(255,255,255,.80),rgba(255,255,255,.54));
  box-shadow:0 16px 44px rgba(24,55,113,.055),0 1px 0 rgba(255,255,255,.95) inset;
}
.journey-phase::after{
  content:''; position:absolute; inset-block:18px; inset-inline-end:0; width:3px; border-radius:3px 0 0 3px;
  background:linear-gradient(var(--accent-sky),var(--accent)); opacity:.22;
}
.journey-phase--active::after{ width:4px; opacity:1; background:linear-gradient(var(--accent-coral),#FF9A91) }
.journey-mission{
  transition:transform .2s var(--ease-spring),border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
}
.journey-mission--current{
  border-color:rgba(255,255,255,.38);
  background:
    radial-gradient(140px 80px at 94% -10%,rgba(255,255,255,.18),transparent 70%),
    linear-gradient(135deg,#FA5E52,#FF7F73);
  box-shadow:0 16px 34px rgba(255,107,94,.25),0 1px 0 rgba(255,255,255,.25) inset;
}
.journey-mission--current .journey-mission__mark{ box-shadow:0 7px 18px rgba(144,42,35,.18) }
.journey-origin{ box-shadow:0 10px 26px rgba(47,106,224,.08) }

/* Workbench and support surfaces. */
.mission-flow{
  border-color:rgba(255,255,255,.9);
  background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(255,255,255,.66));
  box-shadow:0 26px 70px rgba(24,55,113,.075),0 1px 0 #fff inset;
}
.mission-flow > .panel{ transition:background .2s var(--ease) }
.mission-section__icon,.learning-card__icon,.mission-brief__icon{
  box-shadow:0 9px 22px rgba(47,106,224,.10),0 1px 0 #fff inset;
}
.mission-stage--active .mission-stage__n{ box-shadow:0 8px 22px rgba(47,106,224,.26),0 0 0 5px rgba(47,106,224,.07) }
.prompt-body{ scrollbar-width:thin; scrollbar-color:rgba(47,106,224,.25) transparent }

.qa2-hero,
.account-hero{
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 28px 68px rgba(34,79,165,.22),0 1px 0 rgba(255,255,255,.16) inset;
}
.qa2-hero{
  background:
    radial-gradient(280px 180px at 105% -10%,rgba(90,200,250,.16),transparent 70%),
    linear-gradient(145deg,rgba(255,255,255,.96),rgba(240,246,255,.82));
  border-color:rgba(255,255,255,.92);
  box-shadow:0 26px 64px rgba(24,55,113,.10),0 1px 0 #fff inset;
}
.qa2-human-card{
  background:
    radial-gradient(180px 130px at 100% 0,rgba(255,255,255,.18),transparent 70%),
    linear-gradient(145deg,#1C4DB2,#2F6AE0 62%,#4B9BEC 130%);
  box-shadow:0 20px 44px rgba(35,84,179,.26),0 1px 0 rgba(255,255,255,.2) inset;
}
.qa2-empty{ background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(255,255,255,.56)) }
.qa2-empty__mark{ box-shadow:0 10px 24px rgba(47,106,224,.10),0 1px 0 #fff inset }

.account-hero{
  background:
    radial-gradient(330px 210px at 4% 112%,rgba(115,209,250,.28),transparent 70%),
    radial-gradient(260px 210px at 96% -20%,rgba(255,255,255,.12),transparent 72%),
    linear-gradient(135deg,#173D91,#2F6AE0 60%,#4B9BEF 125%);
}
.account-section{
  background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(255,255,255,.64));
  box-shadow:0 16px 44px rgba(24,55,113,.055),0 1px 0 rgba(255,255,255,.94) inset;
}
.account-identity__avatar{ box-shadow:0 10px 24px rgba(47,106,224,.11),0 1px 0 #fff inset }

/* Funnel, result, cards, and sheets share the same premium finish. */
.fsteps{ border-color:rgba(255,255,255,.88) }
.fstep--at{ text-shadow:0 0 22px rgba(47,106,224,.18) }
.scope-item,.opt,.pick,.quizx__q,.tool-acct,.tick-row,.walk .check{
  box-shadow:0 1px 0 rgba(255,255,255,.82) inset;
}
.scope-item,.opt,.pick,.tick-row,.walk .check{
  transition:transform .18s var(--ease-spring),border-color .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease);
}
#result-root .res-cta{
  position:relative; overflow:hidden;
  border-color:rgba(47,106,224,.18);
  background:
    radial-gradient(360px 220px at 100% 0,rgba(90,200,250,.13),transparent 70%),
    linear-gradient(150deg,rgba(255,255,255,.98),rgba(235,243,255,.88));
  box-shadow:0 26px 70px rgba(35,84,179,.12);
}
.paywall-sheet{
  background:
    radial-gradient(420px 240px at 100% 0,rgba(90,200,250,.12),transparent 72%),
    linear-gradient(155deg,rgba(255,255,255,.98),rgba(240,246,255,.94));
  box-shadow:0 -22px 80px rgba(21,48,104,.18),0 1px 0 #fff inset;
}
.paywall-sheet__lock,.mission-paywall-view__lock,.access-check__icon{
  box-shadow:0 12px 26px rgba(47,106,224,.12),0 1px 0 #fff inset;
}
.lost__mark,.graduate-hero__mark{ filter:drop-shadow(0 18px 32px rgba(47,106,224,.24)) }

@media (hover:hover) and (pointer:fine){
  .land-stage:hover{ transform:translateY(-5px); border-color:rgba(47,106,224,.18); box-shadow:0 24px 56px rgba(24,55,113,.09) }
  .land-float:hover{ transform:translateY(-4px); box-shadow:0 25px 56px rgba(25,55,112,.15),0 1px 0 #fff inset }
  .journey-phase:hover{ border-color:rgba(47,106,224,.14) !important; box-shadow:0 20px 52px rgba(24,55,113,.075),0 1px 0 rgba(255,255,255,.95) inset }
  a.journey-mission:hover,button.journey-mission:hover{ transform:translateY(-2px) scale(1.005); box-shadow:0 13px 28px rgba(24,55,113,.08) }
  .scope-item:hover,.opt:hover,.pick:hover,.tick-row:hover,.walk .check:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(24,55,113,.055),0 1px 0 #fff inset }
}

@keyframes polish-float{
  0%,100%{ transform:translateY(0) }
  50%{ transform:translateY(-7px) }
}
@keyframes polish-orbit{
  to{ transform:rotate(1turn) }
}
@keyframes polish-current{
  0%,100%{ box-shadow:0 16px 34px rgba(255,107,94,.24),0 1px 0 rgba(255,255,255,.25) inset }
  50%{ box-shadow:0 19px 42px rgba(255,107,94,.32),0 1px 0 rgba(255,255,255,.25) inset }
}
@keyframes polish-rise{
  from{ opacity:0; transform:translateY(10px) scale(.994) }
  to{ opacity:1; transform:none }
}

@media (prefers-reduced-motion:no-preference){
  .land-orbit--two{ animation:polish-orbit 48s linear infinite }
  .land-float--idea{ animation:polish-float 5.2s ease-in-out infinite }
  .land-float--build{ animation:polish-float 5.8s .8s ease-in-out infinite }
  .land-float--store{ animation:polish-float 5.5s .35s ease-in-out infinite }
  .journey-mission--current{ animation:polish-current 2.8s ease-in-out infinite }
  .journey-head,.qa2-hero,.account-hero,.land-hero__copy,.land-test,#result-root > .panel{ animation:polish-rise .42s var(--ease-spring) both }
}

@media (max-width:720px){
  body::after{ background-size:38px 38px; opacity:.16 }
  .app{ padding-inline:max(0px,env(safe-area-inset-left)) max(0px,env(safe-area-inset-right)) }
  .shell{ padding-inline:12px; padding-block-start:max(12px,env(safe-area-inset-top)) }
  .shell__main{ padding-bottom:calc(104px + env(safe-area-inset-bottom)) }
  .panel{ border-radius:22px }
  /* Long Arabic action labels must grow vertically on iPhone. The base
     control intentionally used nowrap; that pushed next-mission, preview,
     and review labels outside their buttons at 320–390px. */
  .btn{
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:normal;
    text-wrap:balance;
    line-height:1.65;
    height:auto;
  }
  .btn .ltr{ max-inline-size:100%; overflow-wrap:anywhere }
  .actions,
  .actions > *,
  .row,
  .row > *,
  .pagehead,
  .pagehead > *,
  .prompt-head,
  .prompt-head > *,
  .tool-strip,
  .mission-pager,
  .mission-bottom-nav,
  .mission-nav-card,
  .mission-nav-card__copy{
    min-inline-size:0;
    max-inline-size:100%;
  }
  .mission-preview .row,.mission-preview .btn{ width:100% }
  .mission-pager--top{ flex-wrap:wrap }
  .mission-bottom-nav{ width:100%; overflow:hidden }
  .mission-nav-card{
    width:100%;
    overflow:hidden;
    white-space:normal;
  }
  .mission-nav-card small,
  .mission-nav-card strong{
    display:block;
    width:100%;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:normal;
  }
  .mission-nav-card__arrow{ flex:none }
  .crumb{ overflow-wrap:anywhere; word-break:normal }
  .tool-badge{ max-width:100%; white-space:normal; overflow-wrap:anywhere; line-height:1.65 }
  .step__cmd{ width:100%; min-width:0; overflow:hidden }
  .step__cmd code{ min-width:0; max-width:100%; overflow-x:auto }
  .eyebrow::before{ width:13px }
  .land-bar{ padding-inline:2px }
  .land-hero.land-hero--journey::before{ width:440px; height:360px; inset-inline-end:-230px; inset-block-start:40px }
  .land-hero__visual{ min-height:286px }
  .land-float{ box-shadow:0 14px 34px rgba(25,55,112,.11),0 1px 0 #fff inset }
  .land-proof{ border-radius:20px; background:rgba(255,255,255,.34) }
  .land-stage{ border-radius:20px }
  .land-test{ box-shadow:0 22px 56px rgba(24,55,113,.07) }
  .journey-head,.account-hero,.qa2-hero{ border-radius:24px }
  .journey-head{ box-shadow:0 20px 48px rgba(32,77,164,.22) }
  .journey-goal{ box-shadow:0 15px 36px rgba(24,55,113,.10) }
  .journey-phase{ box-shadow:0 10px 30px rgba(24,55,113,.045),0 1px 0 rgba(255,255,255,.94) inset }
  .journey-phase::after{ inset-block:14px }
  .account-section{ box-shadow:0 10px 30px rgba(24,55,113,.045),0 1px 0 rgba(255,255,255,.94) inset }
  .tabbar{ inset-inline:8px; width:auto; bottom:0; padding-bottom:max(7px,env(safe-area-inset-bottom)); border-radius:22px 22px 0 0 }
}

@media (max-width:420px){
  .shell{ padding-inline:10px }
  .land-hero.land-hero--journey h1{ font-size:36px; line-height:1.16 }
  .land-hero__actions{ gap:9px }
  .land-assurances{ gap:8px 15px }
  .journey-head h1{ font-size:27px }
  .journey-mission__body strong{ font-size:11.8px }
  .pagehead{ column-gap:8px; row-gap:8px }
  .mission-pager--top{
    width:100%;
    margin-inline-start:0;
    justify-content:space-between;
  }
  .mission-pager--top .back{ flex:0 1 auto }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important }
}

@media (prefers-contrast:more){
  :root{ --hairline:rgba(29,29,31,.22); --ink-60:rgba(29,29,31,.72) }
  .panel,.pill,.journey-phase,.land-stage,.account-section{ border-color:rgba(29,29,31,.18) }
}