/* Steady Path Careers home page, r37. Built from the approved prototype (r36/proto/index.html).
   Part 1 is the prototype's own stylesheet with a few scoped selectors. Part 2 (bottom) holds what the real site needs on top. */
:root{
  color-scheme:light;
  --night:#0B1830; --dusk:#1B2F55; --navy:#1F3A5F; --ink:#10213A; --ink-2:#44536B;
  --gold:#E3B341; --gold-2:#F2D98A; --gold-ink:#10213A; --rose:#D9A08F;
  --page:#FBF6EE; --paper:#FFFFFF; --line:#E4D9C3; --soft:#F3E8D2;
  --ok:#1F7A46; --ok-bg:#E3F3E8; --bad:#A8382D; --bad-bg:#F8E4E0;
  --sky-a:#FBF6EE; --sky-b:#F6E7CB; --sky-c:#F2D7A3;
  --r-s:10px; --r-m:18px; --r-l:28px;
  --shadow:0 1px 2px rgba(16,33,58,.06),0 12px 32px -12px rgba(16,33,58,.28);
  --wrap:1120px; --accent:#1F3A5F; --on-accent:#FFFFFF; --focus:#1F3A5F;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark; --focus:#E3B341; --accent:#E3B341; --on-accent:#10213A; --ink:#EEF1F7; --ink-2:#B4BED0; --page:#0D1B33; --paper:#15284A; --line:#2B4168; --soft:#1B315A;
  --ok:#7ED6A0; --ok-bg:#173B2C; --bad:#F2A297; --bad-bg:#45211E; --sky-a:#0D1B33; --sky-b:#12274A; --sky-c:#1D3763;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 14px 34px -14px rgba(0,0,0,.7);}}
:root[data-theme="dark"]{
  color-scheme:dark; --focus:#E3B341; --accent:#E3B341; --on-accent:#10213A; --ink:#EEF1F7; --ink-2:#B4BED0; --page:#0D1B33; --paper:#15284A; --line:#2B4168; --soft:#1B315A;
  --ok:#7ED6A0; --ok-bg:#173B2C; --bad:#F2A297; --bad-bg:#45211E; --sky-a:#0D1B33; --sky-b:#12274A; --sky-c:#1D3763;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 14px 34px -14px rgba(0,0,0,.7);}
*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);font:500 17px/1.6 Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-weight:800;letter-spacing:-.035em;line-height:1.04;margin:0;text-wrap:balance}
h2{font-size:clamp(2rem,4.6vw,3.3rem)}
h3{font-size:1.15rem;letter-spacing:-.02em;line-height:1.25}
p{margin:0}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.voice{font-family:Newsreader,Georgia,serif;font-style:italic;font-weight:400;letter-spacing:0}
.lede{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--ink-2);max-width:34em}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:52px;padding:0 26px;border-radius:999px;font:800 1rem/1 Manrope,sans-serif;text-decoration:none;border:0;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.btn.gold{background:var(--gold);color:var(--gold-ink);box-shadow:0 2px 0 #B98B1E,0 14px 30px -12px rgba(227,179,65,.75)}
.btn.gold:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn.ghost:hover{background:rgba(255,255,255,.08)}

/* header */
.top{position:absolute;inset:0 0 auto;z-index:5;color:var(--top-ink);background:var(--top-bg);border-bottom:1px solid var(--top-rule)}
.top .wrap{display:flex;align-items:center;gap:22px;min-height:76px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.02em;text-decoration:none;margin-right:auto;font-size:1.06rem}
.brand img{width:38px;height:38px;border-radius:10px}
.top nav.main{display:flex;gap:26px;font-weight:600;font-size:.95rem}
.top nav.main a{text-decoration:none;opacity:.86;padding:12px 0}
.top nav.main a:hover{opacity:1}
.top .btn{min-height:44px;padding:0 20px;font-size:.95rem}
.themeb{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--top-line);background:var(--top-chip);color:inherit;cursor:pointer;padding:0;display:grid;place-content:center}

/* hero: before dawn */
.hero{position:relative;color:#fff;background:var(--hero-sky);overflow:hidden;padding:132px 0 0}
.stars{position:absolute;inset:0 0 40%;opacity:.8;background-image:radial-gradient(1.4px 1.4px at 12% 22%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 31% 9%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 47% 31%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 63% 14%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 78% 27%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 91% 8%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 22% 47%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 85% 52%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 56% 58%,#fff 50%,transparent 51%);pointer-events:none}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center}
.hero h1{font-size:clamp(2.7rem,7.4vw,5.6rem);letter-spacing:-.045em;line-height:.98}
.hero .where{font-size:1.25rem;color:var(--hero-where);margin-bottom:18px}
.hero .lede{color:var(--hero-soft);margin-top:22px}
.seg{margin-top:30px}
.seg-label{font-size:.95rem;color:var(--hero-soft-2);margin-bottom:10px}
.seg-row{display:inline-flex;flex-wrap:wrap;gap:6px;padding:6px;border-radius:999px;background:var(--hero-chip)}
.seg-row button{min-height:44px;padding:0 18px;border-radius:999px;border:0;background:transparent;color:var(--hero-soft);font:700 .93rem/1 Manrope,sans-serif;cursor:pointer}
.seg-row button[aria-pressed="true"]{background:#fff;color:var(--night)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.price-line{margin-top:16px;font-size:.96rem;color:var(--hero-soft-2);max-width:36em}
.price-line b{color:#fff}

/* deck */
.deck{position:relative;justify-self:center;width:min(100%,380px)}
.deck-tag{display:inline-block;font-size:.82rem;font-weight:700;color:var(--night);background:var(--gold-2);border-radius:999px;padding:5px 12px;margin-bottom:12px}
.cards{position:relative;height:300px}
.jcard{position:absolute;inset:0;background:#fff;color:#10213A;border-radius:var(--r-l);padding:24px 24px 20px;box-shadow:0 30px 60px -24px rgba(0,0,0,.6);transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s;touch-action:pan-y;user-select:none}
.jcard:not(:last-child)>*{visibility:hidden}
.jcard:nth-last-child(2){transform:translateY(12px) scale(.96);opacity:.7}
.jcard:nth-last-child(n+3){transform:translateY(24px) scale(.92);opacity:.4}
.jcard.out-yes{transform:translateX(130%) rotate(14deg);opacity:0}
.jcard.out-no{transform:translateX(-130%) rotate(-14deg);opacity:0}
.jcard .jt{font-size:1.42rem;font-weight:800;letter-spacing:-.02em;line-height:1.25;text-wrap:balance}
.jcard .pay{font-weight:800;font-size:1.22rem;margin-top:6px}
.jcard .src{font-size:.86rem;color:#5B6880}
.jcard .co{margin-top:10px;font-size:.96rem}
.pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.pill{font-size:.8rem;font-weight:700;border-radius:999px;padding:5px 11px;background:#EEF1F6;color:#22395C}
.pill.ok{background:#E3F3E8;color:#1F7A46}
.pill.fresh{background:#FBEFC9;color:#6B4E00}
.jcard .why{margin-top:14px;font-size:.95rem;color:#3B4A63;line-height:1.45}
.deck-btns{display:flex;justify-content:center;gap:12px;margin-top:20px}
.deck-btns button{min-height:52px;min-width:124px;border-radius:999px;border:0;font:800 1rem/1 Manrope,sans-serif;cursor:pointer}
.b-no{background:#fff;color:#A8382D}
.b-yes{background:#1F7A46;color:#fff}
.deck-note{text-align:center;font-size:.86rem;color:#C5CEDF;margin-top:12px;min-height:2.6em}
.deck-done{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:24px;border-radius:var(--r-l);border:1.5px dashed rgba(255,255,255,.4);color:#fff}
.deck-done button{margin-top:14px;justify-self:center;background:none;border:0;color:var(--gold-2);font:700 1rem Manrope,system-ui,sans-serif;text-decoration:underline;cursor:pointer;min-height:44px}

/* horizon */
.horizon{position:relative;z-index:1;margin-top:64px;height:210px}
.horizon svg{position:absolute;inset:auto 0 0;width:100%;height:100%}
.sun{fill:var(--sun-fill);transform:translateY(var(--sun-lift));transform-origin:50% 100%;animation:rise 2.6s cubic-bezier(.2,.7,.2,1) .2s both}
.rays{stroke:var(--ray);transform:translateY(var(--sun-lift))}
.horizon .hill-a{fill:var(--hill-a)}
.rays{animation:glow 2.6s ease 1.2s both}
@keyframes rise{from{transform:translateY(74px)}to{transform:translateY(var(--sun-lift))}}
@keyframes glow{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.sun,.rays{animation:none}.jcard{transition:none}}

/* sections */
.sec{padding:clamp(72px,10vw,128px) 0}
.sec.sky{background:linear-gradient(180deg,var(--sky-c),var(--sky-b) 40%,var(--sky-a))}
.sec.soft{background:var(--soft)}
.sec-head{max-width:40em;margin-bottom:44px}
.sec-head .voice{font-size:1.2rem;color:var(--ink-2);margin-bottom:10px}
.sec-head .lede{margin-top:16px}

/* checker */
.chk{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px;align-items:start}
.posts{display:grid;gap:10px}
.post{all:unset;box-sizing:border-box;cursor:pointer;display:block;width:100%;padding:18px 20px;border-radius:var(--r-m);background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line)}
.post[aria-pressed="true"]{box-shadow:inset 0 0 0 2.5px var(--accent),var(--shadow)}
.post b{display:block;font-size:1.08rem;letter-spacing:-.01em}
.post span{font-size:.92rem;color:var(--ink-2)}
.ticket{background:var(--paper);border-radius:var(--r-l);padding:28px;box-shadow:var(--shadow)}
.ticket h3{font-size:1.3rem}
.ticket .meta{color:var(--ink-2);font-size:.95rem;margin-top:4px}
.steps{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:4px}
.steps li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;padding:11px 0;border-top:1px solid var(--line);opacity:.35;transition:opacity .3s}
.steps li.on{opacity:1}
.steps i{width:26px;height:26px;border-radius:50%;display:grid;place-content:center;font-style:normal;font-weight:800;font-size:.85rem;background:var(--soft);color:var(--ink-2)}
.steps li.pass i{background:var(--ok-bg);color:var(--ok)}
.steps li.fail i{background:var(--bad-bg);color:var(--bad)}
.steps small{display:block;color:var(--ink-2);font-size:.9rem}
.verdict{margin-top:18px;padding:14px 16px;border-radius:var(--r-s);font-weight:700;min-height:3.4em}
.verdict.pass{background:var(--ok-bg);color:var(--ok)}
.verdict.fail{background:var(--bad-bg);color:var(--bad)}
.fine{font-size:.88rem;color:var(--ink-2);margin-top:14px}

/* fit */
.fit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.radar{width:100%;max-width:520px;justify-self:center}
.radar text{font:700 13px Manrope,sans-serif;fill:var(--ink)}
.fit ul{margin:22px 0 28px;padding:0;list-style:none;display:grid;gap:10px}
.fit li{padding-left:28px;position:relative}
.fit li::before{content:"";position:absolute;left:0;top:.5em;width:14px;height:14px;border-radius:50%;background:var(--gold)}
.btn.navy{background:var(--accent);color:var(--on-accent)}

/* week */
.week{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;counter-reset:w}
.week li{position:relative;padding:34px 24px 0 0;counter-increment:w}
.week li::before{content:"";position:absolute;top:8px;left:0;right:0;height:3px;background:var(--gold);border-radius:2px}
.week li::after{content:"";position:absolute;top:0;left:0;width:19px;height:19px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--page)}
.sec.soft .week li::after{box-shadow:0 0 0 4px var(--soft)}
.week .when{font-family:Newsreader,serif;font-style:italic;font-size:1.12rem;color:var(--ink-2)}
.week h3{margin:6px 0 8px}
.week p{font-size:.96rem;color:var(--ink-2)}

/* tools */
.tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1.5px solid var(--line)}
.tools a{display:block;padding:24px 24px 26px 0;border-bottom:1.5px solid var(--line);text-decoration:none}
.tools a:hover h3{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:3px;text-underline-offset:5px}
.tools p{font-size:.95rem;color:var(--ink-2);margin-top:6px;max-width:26em}

/* price */
.price{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start}
.pbox{background:var(--night);color:#fff;border-radius:var(--r-l);padding:36px;box-shadow:var(--shadow)}
.pbox .big{font-size:clamp(3rem,7vw,4.6rem);font-weight:800;letter-spacing:-.05em;line-height:1}
.pbox .then{margin-top:14px;font-size:1.12rem;color:#D5DCEA}
.pbox .then b{color:var(--gold-2)}
.pbox ul{margin:22px 0 26px;padding:0;list-style:none;display:grid;gap:9px;color:#D5DCEA;font-size:.98rem}
.pbox li::before{content:"✓";color:var(--gold-2);font-weight:800;margin-right:10px}
.faq details{border-bottom:1.5px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:18px 34px 18px 0;font-weight:800;font-size:1.06rem;position:relative;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:14px;font-size:1.5rem;font-weight:500;color:var(--ink-2)}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 0 20px;color:var(--ink-2);max-width:38em}

/* close: full sunrise */
.close{position:relative;text-align:center;color:#10213A;background:linear-gradient(180deg,var(--page) 0%,#F6DFA9 34%,#F0BE6B 68%,#E99A5B 100%);padding:clamp(80px,11vw,140px) 0 0;overflow:hidden}
:root[data-theme="dark"] .close{background:linear-gradient(180deg,var(--page) 0%,#3B3A6B 30%,#B5796A 66%,#E9A867 100%);color:#fff}
.close h2{font-size:clamp(2.4rem,6.5vw,4.6rem)}
.close p{margin:18px auto 30px;max-width:30em;font-size:1.12rem}
.close svg{margin-top:56px;width:100%;height:auto}
footer{background:var(--night);color:#C5CEDF;font-size:.92rem;padding:34px 0 calc(34px + env(safe-area-inset-bottom,0px))}
footer .wrap{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}
footer .brand{color:#fff;margin-right:auto}


/* r2: razzle + restored content */
#sky{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.watch{display:inline-flex;align-items:center;gap:12px;margin-top:22px;padding:6px 18px 6px 6px;border-radius:999px;border:0;background:var(--hero-chip);color:#fff;font:700 .95rem/1.2 Manrope,sans-serif;cursor:pointer;min-height:56px;text-align:left}
.watch:hover{background:var(--hero-chip-2)}
.watch i{width:44px;height:44px;border-radius:50%;background:var(--gold);display:grid;place-content:center;flex:none;position:relative}
.watch i::before{content:"";border-left:13px solid var(--night);border-block:8px solid transparent;margin-left:4px}
.watch i::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--gold);opacity:.6;animation:ping 2.4s ease-out infinite}
.watch small{display:block;font-weight:500;color:var(--hero-soft-2);font-size:.84rem}
@keyframes ping{from{transform:scale(.85);opacity:.7}to{transform:scale(1.35);opacity:0}}

.theater{background:#10213A;color:#fff;padding:clamp(56px,8vw,104px) 0}
.theater .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,330px);gap:64px;align-items:center}
.theater h2{font-size:clamp(2rem,4.4vw,3.1rem)}
.theater .lede{color:#C5CEDF;margin-top:16px}
.chapters{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:2px}
.chapters li{display:grid;grid-template-columns:64px 1fr;gap:14px;padding:13px 0;border-top:1px solid rgba(255,255,255,.14)}
.chapters b{font-family:Newsreader,serif;font-style:italic;font-weight:400;color:var(--gold-2);font-size:1.05rem}
.screen{position:relative;aspect-ratio:9/16;width:100%;max-width:330px;justify-self:center;border-radius:36px;overflow:hidden;border:0;padding:0;cursor:pointer;background:linear-gradient(180deg,#081326 0%,#1D2F5C 46%,#6A4C73 70%,#D38F6B 88%,#F0B865 100%);box-shadow:0 0 0 9px #0A1528,0 0 0 10.5px rgba(255,255,255,.16),0 50px 90px -30px rgba(0,0,0,.8);color:#fff;font:inherit}
.screen .cap{position:absolute;left:26px;right:26px;top:16%;text-align:left;font:800 1.7rem/1.08 Manrope,sans-serif;letter-spacing:-.03em}
.screen .cap em{display:block;font:400 1.02rem Newsreader,serif;font-style:italic;color:var(--gold-2);margin-bottom:10px;letter-spacing:0}
.screen .play{position:absolute;left:50%;top:58%;translate:-50% -50%;width:84px;height:84px;border-radius:50%;background:var(--gold);display:grid;place-content:center;box-shadow:0 18px 40px -10px rgba(227,179,65,.8);transition:transform .2s}
.screen:hover .play{transform:scale(1.07)}
.screen .play::before{content:"";border-left:24px solid var(--night);border-block:15px solid transparent;margin-left:7px}
.screen .len{position:absolute;left:0;right:0;top:calc(58% + 58px);text-align:center;font-size:.92rem;color:#E6EBF4;font-weight:700}
.screen svg{position:absolute;inset:auto 0 0;width:100%}
dialog.vid{border:0;padding:0;background:transparent;max-width:min(92vw,420px,calc((100vh - 120px)*9/16));width:100%}
dialog.vid::backdrop{background:rgba(6,12,24,.9)}
dialog.vid .box{aspect-ratio:9/16;border-radius:28px;overflow:hidden;background:#0B1830;display:grid;place-content:center;color:#C5CEDF;text-align:center;padding:24px}
dialog.vid video{width:100%;height:100%;object-fit:cover}
dialog.vid .x{display:block;margin:14px auto 0;min-height:44px;padding:0 22px;border-radius:999px;border:0;background:#fff;color:#10213A;font:800 .95rem Manrope,system-ui,sans-serif;cursor:pointer}

.tailor{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center}
.tabs{display:inline-flex;gap:6px;padding:5px;border-radius:999px;background:var(--soft);margin-bottom:18px}
.sec.soft .tabs{background:var(--page)}
.tabs button{min-height:44px;padding:0 18px;border-radius:999px;border:0;background:transparent;color:var(--ink);font:700 .93rem Manrope,system-ui,sans-serif;cursor:pointer}
.tabs button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.sheet{background:var(--paper);border-radius:var(--r-l);box-shadow:var(--shadow);padding:28px}
.sheet .ask{font-size:.94rem;color:var(--ink-2)}
.sheet .ask b{color:var(--ink)}
.ba{margin-top:18px;display:grid;gap:10px}
.ba p{margin:0;padding:18px 22px;border-radius:var(--r-m);font-size:1.05rem;line-height:1.5}
.ba p span{display:block;font:400 .95rem Newsreader,Georgia,serif;font-style:italic;margin-bottom:4px}
.ba .before{background:var(--soft);color:var(--ink-2)}
.ba .before b{font-weight:500;text-decoration:line-through;text-decoration-color:rgba(168,56,45,.55)}
.ba .after{background:var(--night);color:#fff;font-weight:700;box-shadow:var(--shadow),inset 0 0 0 1.5px rgba(227,179,65,.45)}
.ba .after span{color:var(--gold-2)}
.ba.swap .after{animation:pop .5s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.phone{justify-self:center;width:min(100%,290px);border-radius:38px;padding:9px;background:#0A1528;box-shadow:0 40px 70px -30px rgba(16,33,58,.6)}
.phone img{border-radius:30px;width:100%;height:auto}

.ticker{position:relative;overflow:hidden;padding:6px 0;--tk-bg:var(--soft)}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:8%;z-index:1;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--tk-bg),transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,var(--tk-bg),transparent)}
.ticker.off div{animation-play-state:paused}
.ticker div{display:flex;gap:10px;width:max-content;animation:slide 60s linear infinite}
.ticker:nth-of-type(2) div{animation-direction:reverse;animation-duration:74s}
.ticker:hover div{animation-play-state:paused}
.ticker span{white-space:nowrap;padding:11px 18px;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line);font-weight:700;font-size:.95rem}
.ticker span.f{background:var(--accent);color:var(--on-accent);box-shadow:none}
@keyframes slide{to{transform:translateX(-50%)}}

.foryou{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:44px}
.foryou>div{border-radius:var(--r-l);padding:30px}
.foryou .yes{background:var(--ok-bg)}
.foryou .no{background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line)}
.foryou h3{font-size:1.3rem;margin-bottom:14px}
.foryou ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.foryou li{padding-left:30px;position:relative}
.foryou li::before{position:absolute;left:0;font-weight:800}
.foryou .yes li::before{content:"✓";color:var(--ok)}
.foryou .no li::before{content:"✕";color:var(--bad)}

.hold{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:56px;border-top:1.5px solid var(--line)}
.hold div{padding:22px 22px 0 0}
.hold p{font-size:.95rem;color:var(--ink-2);margin-top:6px}

#radarShape{transform-origin:210px 190px;transition:transform 1.1s cubic-bezier(.2,.8,.2,1),opacity .6s}
.radar.wait #radarShape{transform:scale(.05);opacity:0}
.week li::before{transform-origin:left;transition:transform 1s ease}
.week.wait li::before{transform:scaleX(0)}
.week li:nth-child(2)::before{transition-delay:.25s}.week li:nth-child(3)::before{transition-delay:.5s}.week li:nth-child(4)::before{transition-delay:.75s}
.tools a{transition:padding-left .2s ease}
.tools a:hover{padding-left:10px}
@media (max-width:900px){.theater .wrap,.tailor{grid-template-columns:minmax(0,1fr);gap:40px}.foryou{grid-template-columns:minmax(0,1fr)}.hold{grid-template-columns:repeat(2,minmax(0,1fr))}.week.wait li::before{transform:none}}
@media (prefers-reduced-motion:reduce){.ticker div{animation:none;flex-wrap:wrap;width:auto}.watch i::after{animation:none}.radar.wait #radarShape,.week.wait li::before{transform:none;opacity:1}}

@media (max-width:900px){
  .hero{padding-top:108px}
  .hero-grid,.chk,.fit,.price{grid-template-columns:minmax(0,1fr)}
  .hero-grid{gap:44px}
  .week{grid-template-columns:minmax(0,1fr);gap:0}
  .week li{padding:0 0 30px 40px}
  .week li::before{top:0;bottom:0;left:8px;right:auto;width:3px;height:auto}
  .tools{grid-template-columns:minmax(0,1fr)}
  .horizon{height:150px;margin-top:44px}
  .seg-row{border-radius:22px}
}

/* ---------- Part 2: additions for the real site ---------- */
[hidden]{display:none!important}
.skip{position:absolute;left:12px;top:-80px;z-index:20;background:#fff;color:#10213A;padding:12px 18px;border-radius:10px;font-weight:800;text-decoration:none}
.skip:focus{top:12px}
.anc{display:block;height:0;scroll-margin-top:16px}
section[id],[id].foryou,#faq{scroll-margin-top:12px}
.hero,.theater,.pbox,footer,dialog.vid,.menu-panel{--focus:#E3B341}
.top{--focus:var(--top-focus)}
.close{--focus:#10213A}
.post:focus-visible,.cards:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.cards:focus-visible{border-radius:var(--r-l)}
.faq details a,.fine a{text-decoration-thickness:1.5px;text-underline-offset:3px}

/* header: brand, links, menu */
.brand{min-height:44px;line-height:1.15}
.brand img,.themeb,.menu,.top .wrap>.btn{flex:none}
.top nav.main a{min-width:44px;text-align:center}
.top .btn{white-space:nowrap}
.menu{display:none;position:relative}
.menu summary{list-style:none;width:44px;height:44px;border-radius:50%;background:var(--top-chip);border:1.5px solid var(--top-line);display:grid;place-content:center;gap:4px;cursor:pointer}
.menu summary::-webkit-details-marker{display:none}
.menu summary i{display:block;width:18px;height:2px;border-radius:2px;background:currentColor}
.menu-panel{position:absolute;right:0;top:54px;width:min(270px,calc(100vw - 40px));display:grid;gap:2px;padding:10px;border-radius:20px;background:#10213A;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 30px 60px -20px rgba(0,0,0,.8)}
.menu-panel a{display:flex;align-items:center;min-height:48px;padding:0 16px;border-radius:12px;text-decoration:none;font-weight:700;color:#fff}
.menu-panel a:hover{background:rgba(255,255,255,.08)}
.menu-panel a.go{justify-content:center;margin-top:6px;background:var(--gold);color:var(--gold-ink);border-radius:999px;font-weight:800}
@media (max-width:1020px){.top nav.main{display:none}.menu{display:block}.top .wrap{gap:12px}}
@media (max-width:480px){.top .wrap>.btn{display:none}.top .wrap{gap:10px}}

/* hero */
.btn{text-align:center}
@media (max-width:420px){.cta .btn{padding:0 20px;flex:1 1 auto}.cta .btn.ghost{line-height:1.2;padding-block:8px}}
.deck-btns button:disabled{cursor:default}
/* the card stack grows with its text, so a long card on a narrow phone never spills over the Pass and Yes buttons */
.cards{display:grid;height:auto;min-height:300px}
.jcard{position:relative;inset:auto;grid-area:1/1}
html:not(.js) .seg,html:not(.js) .deck-btns,html:not(.js) .deck-note,html:not(.js) #sky{display:none}
html.js .stars{display:none}

/* checker, resume line and fields without JavaScript */
html:not(.js) .post,html:not(.js) .tabs,html:not(.js) .ticker{display:none}
html:not(.js) .chk{grid-template-columns:minmax(0,1fr)}
html:not(.js) .chk .posts{order:2}
html.js .fields-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.fields-text{color:var(--ink-2);max-width:46em}
.fields-text b{color:var(--ink)}

/* sample labels under the phone and the chart */
.shot{justify-self:center;margin:0;display:grid;justify-items:center;gap:14px;width:100%}
.shot .phone{justify-self:center}
.shot figcaption,.radar-fig figcaption{font-size:.88rem;color:var(--ink-2);text-align:center}
.radar-fig{margin:0;display:grid;justify-items:center;gap:6px}
.credit{font-size:.88rem;color:var(--ink-2);margin:0 0 24px;max-width:38em}
.fit ul{margin-bottom:18px}

/* price box and FAQ */
.pbox ul{margin-bottom:18px}
.pbox li{display:grid;grid-template-columns:22px 1fr}
.pbox li::before{margin-right:0}
.pbox .terms{font-size:.92rem;color:#C5CEDF;margin:0 0 26px}
@media (min-width:901px){.pbox{position:sticky;top:24px}}
.faq h2{margin-bottom:22px}
.faq details p{overflow-wrap:anywhere}

/* closing sunrise follows the system setting too */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .close{background:linear-gradient(180deg,var(--page) 0%,#3B3A6B 30%,#B5796A 66%,#E9A867 100%);color:#fff;--focus:#fff}}
:root[data-theme="dark"] .close{--focus:#fff}

/* footer */
footer nav{display:flex;flex-wrap:wrap;gap:0 24px}
footer nav a,footer .where a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
footer .where{flex-basis:100%;display:flex;flex-wrap:wrap;gap:0 22px;align-items:center;border-top:1px solid rgba(255,255,255,.14);padding-top:10px;margin-top:6px}
footer .where span{display:inline-flex;align-items:center;min-height:44px}
footer .brand img{width:30px;height:30px;border-radius:8px}

/* contrast (fix round 1): every piece of text at 4.5:1 or better on what is really behind it */
.deck-note{color:#fff;background:rgba(8,19,38,.62);border-radius:14px;padding:9px 14px}
.deck-done{background:rgba(8,19,38,.5)}
.b-no{color:#8F2B21}
.deck-btns button:disabled{opacity:1;background:#D5DCEA;color:#33415A}
/* steps not reached yet are marked by a lighter weight, a hollow number and the words "Not checked", never by faded text */
.steps li{opacity:1;transition:none}
.steps li:not(.on) b{font-weight:500;color:var(--ink-2)}
.steps li:not(.on) small{font-style:italic}
.steps li:not(.on) i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink-2)}

/* page-to-page fade, the same opt-in the other pages make in r17.css (off for reduced motion) */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:vtOut .18s cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(root){animation:vtIn .26s cubic-bezier(0,0,.2,1) both}
}
@keyframes vtOut{to{opacity:0;transform:translateY(-6px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(10px)}}

/* reduced motion: nothing waits, nothing slides */
@media (prefers-reduced-motion:reduce){
  .ba.swap .after{animation:none}
  .steps li,.btn,.tools a,.screen .play,#radarShape,.week li::before{transition:none}
  .ticker::before,.ticker::after{display:none}
  .ticker div{justify-content:center;padding:0 20px}
}

/* r40: link to the checks page under the commitments */
.more{margin:22px 0 0}.more a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:inherit;text-decoration:underline;text-underline-offset:4px}

/* ---------- r41: light-mode dawn hero, clear theme switch, lighter scrolling ---------- */
/* Light mode: a dawn sky (deep blue easing to peach and gold at the horizon, sun higher, almost no stars) under a light header.
   Dark mode: the night sky, as before, under a dark header. The warm colours start below the hero's text (--hz is the height
   of the horizon art plus its margin), so white text always sits on blue. */
:root{
  --hz:274px;
  --hero-sky:linear-gradient(180deg,#153A72 0,#1D4C8E 34%,#2C62A6 calc(100% - var(--hz) + 6px),#7682B4 calc(100% - var(--hz) + 60px),#D99A86 calc(100% - var(--hz)*.62),#F4B877 calc(100% - var(--hz)*.36),#FBD38C calc(100% - 50px),#FDE3A8 100%);
  --hero-soft:#FFFFFF; --hero-soft-2:#F1F5FB; --hero-where:#FFE9B0; --hero-chip:rgba(8,19,38,.34); --hero-chip-2:rgba(8,19,38,.48);
  --sun-fill:#FFE49A; --sun-lift:-34px; --ray:#FFF6D6; --hill-a:#27477A;
  --top-bg:#FBF6EE; --top-ink:#10213A; --top-rule:#E4D9C3; --top-line:rgba(16,33,58,.6); --top-chip:#FFFFFF; --top-focus:#1F3A5F;
}
@media (max-width:900px){:root{--hz:194px}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --hero-sky:linear-gradient(180deg,#081326 0%,var(--night) 30%,#1D2F5C 62%,#55436E 82%,#B5796A 96%,#E2A56E 100%);
  --hero-soft:#E6EBF4; --hero-soft-2:#C5CEDF; --hero-where:var(--gold-2); --hero-chip:rgba(255,255,255,.11); --hero-chip-2:rgba(255,255,255,.17);
  --sun-fill:#F4C95D; --sun-lift:0px; --ray:#F6D27A; --hill-a:#1B2F55;
  --top-bg:#081326; --top-ink:#FFFFFF; --top-rule:rgba(255,255,255,.1); --top-line:rgba(255,255,255,.62); --top-chip:rgba(255,255,255,.1); --top-focus:#E3B341;}
  :root:not([data-theme="light"]) .themeb .i-sun{display:block}
  :root:not([data-theme="light"]) .themeb .i-moon{display:none}}
:root[data-theme="dark"]{
  --hero-sky:linear-gradient(180deg,#081326 0%,var(--night) 30%,#1D2F5C 62%,#55436E 82%,#B5796A 96%,#E2A56E 100%);
  --hero-soft:#E6EBF4; --hero-soft-2:#C5CEDF; --hero-where:var(--gold-2); --hero-chip:rgba(255,255,255,.11); --hero-chip-2:rgba(255,255,255,.17);
  --sun-fill:#F4C95D; --sun-lift:0px; --ray:#F6D27A; --hill-a:#1B2F55;
  --top-bg:#081326; --top-ink:#FFFFFF; --top-rule:rgba(255,255,255,.1); --top-line:rgba(255,255,255,.62); --top-chip:rgba(255,255,255,.1); --top-focus:#E3B341;}
.horizon svg{overflow:visible}
.themeb svg{width:22px;height:22px;max-width:none}
.themeb .i-sun{display:none}
.themeb .i-moon{display:block}
:root[data-theme="dark"] .themeb .i-sun{display:block}
:root[data-theme="dark"] .themeb .i-moon{display:none}
.themeb:hover,.menu summary:hover{border-color:currentColor}
.top nav.main a{opacity:1}
.top nav.main a:hover{text-decoration:underline;text-underline-offset:5px}
.deck-done{background:rgba(8,19,38,.62)}
.deck-note{background:rgba(8,19,38,.78)}
/* the play ring only pulses while the hero is on screen */
.hero.off .watch i::after{animation-play-state:paused}

/* r41: welcome video. Portrait 9:16 in the theater and the dialog; the poster fills the theater screen. */
dialog.vid .box.has-video{padding:0;display:block}
dialog.vid video{object-fit:contain;display:block;background:#0B1830}
.screen .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.screen.has-poster .cap,.screen.has-poster svg{display:none}
.screen.has-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,19,38,.15),rgba(8,19,38,.45))}
.screen.has-poster .play,.screen.has-poster .len{z-index:1}
.tx{margin-top:22px;max-width:60ch}.tx summary{cursor:pointer;min-height:44px;display:inline-flex;align-items:center;font-weight:700;color:#fff}
.tx p{margin-top:10px;color:#C5CEDF;line-height:1.6;font-size:.98rem}