@import url("https://fonts.googleapis.com/css2?family=Cormorant:wght@500;600&family=Inter:wght@400;500;600&family=Courier+Prime&display=swap");
/* fsi.css: the Frontier Security Institute's look, laid over the invite kernel's structure.
   Same kernel as the Strangeland and PDW invites (brief.css keeps every shape, app.js every motion).
   FSI brand (repo os/wiki/brand.md): navy #1c1d5f field, white, SeasonMix display serif,
   SeasonSans body, the horizontal lockup as the wordmark, the flywheel mark only as a watermark.
   Calm authority: no photograph, no gradient, no glow, and no boxes (Mike, 10-05: "not a fan of
   the boxes vibe"): hairline rows only. CAIS cyan is affiliate-only, so it's
   not used here at all (this is about FSI after Nov 1). The one accent is paper white: the
   commit is a white pill with a navy dot. Uppercase micro type keeps its tracking on purpose. */
@font-face{font-family:"SeasonMix";src:url(fonts/SeasonMix-Regular.otf) format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"SeasonMix";src:url(fonts/SeasonMix-Bold.otf) format("opentype");font-weight:700;font-display:swap}
@font-face{font-family:"SeasonSans";src:url(fonts/SeasonSans-Regular.otf) format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"SeasonSans";src:url(fonts/SeasonSans-Medium.otf) format("opentype");font-weight:500;font-display:swap}
@font-face{font-family:"SeasonSans";src:url(fonts/SeasonSans-Bold.otf) format("opentype");font-weight:700;font-display:swap}
@font-face{font-family:"JJannon";src:url(fonts/JJannon-Italic.otf) format("opentype");font-style:italic;font-display:swap}

:root{
  --navy:#1c1d5f; --deep:#15164a; --plate:rgba(255,255,255,.045); --line:rgba(255,255,255,.16);
  --black:#15164a; --paper:#ffffff; --bone:rgba(255,255,255,.84); --ash:rgba(255,255,255,.6);
  --steel:rgba(255,255,255,.18); --iron:rgba(255,255,255,.26);
  --gold:#ffffff; --go:#ffffff; --nogo:#f0a08a; --sage:#b9c4ff;
  --dim:rgba(255,255,255,.62); --hair:rgba(255,255,255,.12);
  --glass:rgba(255,255,255,.045); --glass-line:rgba(255,255,255,.16); --radius:4px; --tile:4px;
  --display:"SeasonMix",Georgia,"Times New Roman",serif; --body:"SeasonSans","Helvetica Neue",Helvetica,Arial,sans-serif;
}
html{background:var(--navy)}
body{background:var(--navy);font-size:16px;line-height:1.5;color:var(--bone)}
body::before{content:"";position:fixed;right:-14vmin;bottom:-18vmin;width:72vmin;height:72vmin;z-index:-1;
  background:url(img/fsi-mark-white.svg) center/contain no-repeat;opacity:.05;pointer-events:none}
.ground{display:none}
.page{z-index:0}

/* the small words: tracked caps, quiet */
.eyebrow,.to dt,.facts dt,.stages li,.cal-dow span,.ph .no,.homefoot,.status,.terms,.weeks .mono{
  font-family:var(--body)!important;text-transform:uppercase;letter-spacing:.14em!important;font-weight:500!important;font-size:11px}
.eyebrow{color:var(--dim)}
.eyebrow.gold{color:var(--paper)}
.terms{font-size:12px;color:var(--paper)}

/* masthead: the FSI lockup left, Signalform + status pills right */
.bar{height:68px}
.brand{display:block;height:30px;width:auto}
.brand img{height:100%;width:auto;display:block}
.pills{display:flex;align-items:center;gap:8px}
.sf,.status{display:inline-flex!important;align-items:center;gap:8px;min-height:32px;padding:0 13px!important;border:1px solid var(--line);border-radius:999px;
  font-family:var(--body)!important;font-size:10.5px!important;letter-spacing:.12em!important;text-transform:uppercase;color:var(--paper);background:transparent;
  transition:border-radius .15s ease-out,border-color .15s ease-out}
.sf::before{content:"";width:6px;height:6px;border-radius:50%;border:1px solid currentColor}
.sf[aria-expanded="true"]::before{background:currentColor}
.sf i{display:none}
.sf:active{border-radius:4px}
.status{color:var(--dim)}

/* the seal: a white disc with a navy dot */
.mark .ring{fill:var(--paper);stroke:none}
.mark line{display:none}
.mark .dot{fill:var(--navy)}
.mark{width:44px;height:44px}

/* display: SeasonMix, the brand serif */
.stage h1,.ph h2,.legend h2,.done h2,.answer h2,.about h2{font-family:var(--display)!important;font-weight:400!important;letter-spacing:-.01em;color:var(--paper)}
.stage h1{font-size:clamp(38px,5.2vw,74px);line-height:1.02}
.stage h1 em{font-family:"JJannon",var(--display);font-style:italic}

/* buttons: the commit is white with a navy dot */
.btn{border-radius:999px!important;min-height:44px;padding:0 22px!important;font-family:var(--body)!important;font-weight:500!important;font-size:15px!important;transition:border-radius .15s ease-out,border-color .15s,background .15s}
.btn:active{border-radius:4px!important}
.btn.primary,.btn.confirm,.btn.pay.open{background:var(--paper)!important;color:var(--navy)!important;border:0!important}
.btn.primary::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--navy);flex:none}
.btn.primary:hover{background:#e9ebf7!important}
.btn.ghost{border:1px solid var(--line)!important;color:var(--paper);background:transparent}
.btn.ghost::before{content:"";width:6px;height:6px;border-radius:50%;border:1px solid currentColor;flex:none}
.btn.ghost:has(.ar)::before{display:none}
.btn.confirm .fill{display:none}
.btn.confirm .led{border-color:var(--navy)!important;background:var(--navy)}
.btn.pay{border:1px solid var(--line)!important;color:var(--dim)}

/* memo head: a hairline plate */
.head{background:none;border:0!important;border-bottom:1px solid var(--hair)!important;border-radius:0;padding:14px 0;margin-bottom:6px}
.to dt{font-size:10px;color:var(--dim)}
.to dd{font-size:15px;color:var(--paper)}
.foot{border-top:1px solid var(--hair)}

/* paragraphs: plates with a hairline, square corners like the brand book */
.para .rule{display:none}
.paras.grid{column-gap:12px!important;row-gap:12px;padding-bottom:12px}
.grid .para{background:none;border:0;border-top:1px solid var(--hair);border-radius:0;padding:18px 0 16px!important}
.grid .lead{padding:20px 0!important;border-top:1px solid var(--paper)}
.ph .no{color:var(--paper);font-size:11px}
.pbi p,.weeks li{color:var(--bone)}
.weeks li{border-top:1px solid var(--hair)}
.weeks .mono{font-size:10.5px;color:var(--paper)}
.facts{border-top:1px solid var(--hair)}
.facts dt{font-size:10px;color:var(--dim)}
.facts dd{font-family:var(--display);font-weight:400;font-size:17px;color:var(--paper);font-variant-numeric:tabular-nums}
.more{font-family:var(--body)!important;text-transform:uppercase;letter-spacing:.12em;font-size:11px!important;font-weight:500!important;color:var(--paper)!important;border-bottom:0!important}
.more:hover{color:#dfe3ff!important}
.paras.dim .para:not(.focus){opacity:.62}

.paras.list{gap:0;border-bottom:0}
.list .para{background:none;border:0;border-bottom:1px solid var(--hair);border-radius:0;padding:0}
.list .ph{grid-template-columns:26px minmax(0,1fr) 22px}
.list .ph .eyebrow{display:none}
.list .ph h2{grid-column:2}
.list .para.on .chev{border-color:var(--paper)}

/* questions */
.qlist .q b{font-weight:500}
.answer{background:none;border:0;border-left:1px solid var(--hair);border-radius:0;padding:4px 0 4px 24px}

/* the confirm flow */
.stages li::before{background:var(--hair)}
.stages li.ok::before{background:var(--sage)}
.stages .bar2{box-shadow:none}
.cal,.msg textarea{background:none!important;border:1px solid var(--line)!important;border-radius:var(--tile)!important}
.day.open i{background:var(--paper)}
.day.on,.chip.on{background:var(--paper);color:var(--navy);border-color:var(--paper)}
.chip,.own input{border-radius:999px;border-color:var(--line)}
.person input{border-bottom-color:var(--line)}
.done .stamp{color:var(--paper)}
.about{background:var(--deep)!important;border:1px solid var(--line)!important;border-radius:var(--radius)!important}

@media (prefers-reduced-motion:reduce){.btn,.sf{transition:none}}

@media (max-width:699px){
  .head{padding:10px 0;margin-bottom:4px;gap:14px}
  .to > div:first-child{display:none}
  .to dd{font-size:14px}
  .mark{width:34px;height:34px}
  .paras.list{overflow-y:auto;gap:0;touch-action:pan-y;overscroll-behavior:contain;scrollbar-width:none}
  .list .para{flex:0 0 auto;max-height:none}
  .list .ph{padding:13px 0}
  .list .ph h2{font-size:17px}
  .facts dd{font-size:15px}
  .btn{white-space:nowrap;padding:0 16px!important;font-size:14px!important}
  .brand{height:22px}
  .sf,.status{padding:0 10px!important;font-size:9.5px!important}
}

/* desktop: bigger type at 100% zoom (Mike, 10-05, on the Strangeland invite) */
@media (min-width:1000px){
  .eyebrow,.to dt,.facts dt,.stages li,.cal-dow span,.ph .no,.status,.weeks .mono{font-size:12.5px}
  .to dd{font-size:18px}.to dd.mono{font-size:16px}
  .ph h2{font-size:clamp(22px,1.9vw,28px)!important}
  .grid .lead .ph h2,.list .lead.on .ph h2{font-size:clamp(32px,3vw,44px)!important}
  .list .ph h2{font-size:clamp(20px,1.7vw,26px)!important}
  .pbi p,.grid .lead .pbi p{font-size:19px!important;line-height:1.55}
  .weeks li{font-size:18px}
  .facts dd{font-size:19px}
  .more{font-size:13px!important}
  .qlist .q b{font-size:19px}
  .answer p{font-size:20px!important}
  .answer h2{font-size:clamp(34px,3.2vw,50px)!important}
  .sig{font-size:15px}.sig b{font-size:17px}
  .btn{font-size:16px!important;min-height:48px}
  .terms{font-size:15px}
  .homefoot{font-size:12.5px}
  .legend h2{font-size:clamp(32px,3vw,44px)!important}
  .person input,.msg textarea{font-size:19px}
  .review b{font-size:19px}
  .startnote{font-size:19px}
  .done p{font-size:19px}
  .ahead li{font-size:17px}
  .ydl dd{font-size:17px}
  .about p{font-size:17px}
}

/* calm pass, carried over from the Signalform site (10-05): no terminal status pill */
.status{display:none!important}
.list .ph:hover h2{color:var(--paper)}

/* the map: a page you scroll and work through with Susan on a call (src/build.py, plan) */
body.scopepage{height:auto;min-height:100dvh;overflow:visible;touch-action:auto}
.scopepage .body{overflow:visible;contain:none}
.sc{max-width:1040px;padding:8px 0 120px}
.sc h2{margin:6px 0 14px;font:400 clamp(34px,4vw,56px)/1.05 var(--display);color:var(--paper);letter-spacing:-.01em}
.sc h3{margin:0 0 14px;font:500 13px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.sc p{margin:0 0 14px;font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:var(--bone);max-width:62ch}
.sc-intro{padding-bottom:28px;border-bottom:1px solid var(--hair)}
.sc-block{padding:30px 0;border-bottom:1px solid var(--hair)}
.sc-since,.sc-list{list-style:none;margin:0;padding:0}
.sc-since li{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:10px 0;border-top:1px solid var(--hair);font-size:clamp(15px,1.3vw,18px);line-height:1.5;color:var(--bone)}
.sc-when{font:500 12px/1.9 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--paper)}
.sc-note{font-size:15px!important;color:var(--dim)!important;margin-top:14px!important}
.sc-how{font-size:15px!important;color:var(--dim)!important}
.sc-group{padding:22px 0 8px;font:500 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.sc-row{display:grid;grid-template-columns:34px minmax(0,1fr) 70px 96px;gap:14px;align-items:baseline;padding:14px 0;border-top:1px solid var(--hair);cursor:pointer;transition:opacity .15s ease-out}
.sc-row:hover .sc-name b{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line)}
.sc-name b{display:block;font:400 clamp(19px,1.7vw,24px)/1.25 var(--display);color:var(--paper)}
.sc-name span{display:block;margin-top:3px;font-size:clamp(14px,1.2vw,16px);line-height:1.45;color:var(--dim)}
.sc-h{font:400 14px/1 var(--body);color:var(--dim);text-align:right;font-variant-numeric:tabular-nums}
.sc-v{font:400 clamp(17px,1.5vw,20px)/1 var(--display);color:var(--paper);text-align:right;font-variant-numeric:tabular-nums}
.sc-tog{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--paper);display:inline-flex;align-items:center;justify-content:center;align-self:center}
.sc-tog i{width:10px;height:10px;border-radius:50%;background:var(--paper);transition:transform .15s ease-out}
.sc-row.is-later{opacity:.42}
.sc-row.is-later .sc-tog i{transform:scale(0)}
.sc-row.is-later .sc-v{text-decoration:line-through;text-decoration-thickness:1px}
.sc-next p{margin-bottom:18px}
.sc-sum{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:10px 34px;
  padding:16px max(16px,calc((100vw - 1040px)/2)) calc(16px + env(safe-area-inset-bottom));background:var(--deep);border-top:1px solid var(--line);
  font:400 13px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.sc-sum b{font:400 22px/1 var(--display);letter-spacing:0;text-transform:none;color:var(--paper);font-variant-numeric:tabular-nums}
.sc-sum-p b{font-size:26px}
.scopepage .foot{padding-bottom:84px}
@media (max-width:699px){
  .sc-row{grid-template-columns:28px minmax(0,1fr) 78px;gap:10px}
  .sc-h{display:none}
  .sc-since li{grid-template-columns:1fr;gap:4px}
  .sc-sum{gap:6px 18px;font-size:11px}.sc-sum b{font-size:18px}.sc-sum-p b{font-size:21px}
}
@media (prefers-reduced-motion:reduce){.sc-row,.sc-tog i{transition:none}}

/* October and November, on offer: the rows on the left, the price beside them, always in view */
.pxplan .body{contain:none;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start;min-height:0}
.pxplan .paras{min-height:0}
.px{position:sticky;top:12px;align-self:start;padding:20px 22px;border:1px solid var(--line);border-radius:4px}
.px-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--hair);
  font:500 12px/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.px-row b{font:400 24px/1 var(--display);letter-spacing:0;text-transform:none;color:var(--paper);font-variant-numeric:tabular-nums}
.px-row:nth-child(2) b{color:var(--dim)}
.px-row.is-pay{border-bottom:0;padding-top:14px}
.px-row.is-pay b{font-size:36px}
.px-foot{margin:10px 0 0;font-size:13px!important;line-height:1.4;color:var(--dim)!important}
.px-lines{list-style:none;margin:4px 0 10px;padding:0}
.px-line{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--hair);cursor:pointer}
.px-line.is-onme{cursor:default}
.px-n{font-size:16px;line-height:1.3;color:var(--paper)}
.px-v{font-size:15px;color:var(--bone);font-variant-numeric:tabular-nums;white-space:nowrap}
.px-line.is-onme .px-v{color:var(--dim)}
.px-tog{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--paper);display:inline-flex;align-items:center;justify-content:center}
.px-tog i{width:8px;height:8px;border-radius:50%;background:var(--paper);transition:transform .15s ease-out}
.px-tog.is-fixed{border-style:dashed;opacity:.6}
.px-line.is-out{opacity:.4}
.px-line.is-out .px-tog i{transform:scale(0)}
.px-line.is-out .px-v{text-decoration:line-through;text-decoration-thickness:1px}
.px-hint{font-size:14px!important;color:var(--dim)!important;margin:0!important}
@media (min-width:1000px){.px-n{font-size:18px}.px-v{font-size:17px}.px{padding:24px 26px}}
@media (max-width:899px){
  .pxplan .body{grid-template-columns:1fr}
  .px{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:30;display:flex;gap:16px;justify-content:space-between;align-items:baseline;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));border:0;border-top:1px solid var(--line);border-radius:0;background:var(--deep)}
  .px-row{border:0;padding:0;flex-direction:column;align-items:flex-start;gap:4px;font-size:10px}
  .px-row b{font-size:18px}.px-row.is-pay b{font-size:22px}
  .px-row.is-pay{padding:0}
  .px-foot{display:none}
  .pxplan .foot{padding-bottom:72px}
}

/* the newer FSI identity (Sept 18 print set): the lattice lockup with red in the weave, brand off-white
   #F6F8FC for text, and the brand red #ED1C24 used sparingly: the labels, the seal's dot, row numbers,
   and the line over the price */
:root{--paper:#F6F8FC;--red:#ED1C24;--gold:#ED1C24}
.brand{height:34px}
.eyebrow.gold,.ph .no,.weeks .mono{color:var(--red)!important}
.mark .dot{fill:var(--red)}
.btn.primary::before{background:var(--red)}
.px{border-top:2px solid var(--red)}
.px-row.is-pay span{color:var(--red)}
.px-tog{border-color:var(--paper)}
@media (max-width:899px){.px{border-top:2px solid var(--red)}}
@media (max-width:699px){.brand{height:26px}}
.pxplan .ph .peek{display:none!important}
body::before{opacity:.03!important}

/* matched to the new FSI website (the Sept 30 homepage hero and brand guide v2): Cormorant for
   display, Inter for reading, Courier Prime for labels; navy deepening down the page; lavender for
   secondary text; red as a short rule before a label and on the arrow. No CAIS anywhere. */
:root{--display:"Cormorant",Georgia,serif;--body:"Inter",system-ui,sans-serif;--mono:"Courier Prime","Courier New",monospace;
  --dim:#a9abe0;--bone:#d4d5f2;--ash:#a9abe0;--line:rgba(255,255,255,.22);--hair:rgba(255,255,255,.14);--deep:#151647}
html{background:#0e0f3a}
body{background:linear-gradient(180deg,#1c1d5f 0%,#15164d 60%,#0e0f3a 100%) fixed}
.stage h1,.ph h2,.answer h2,.about h2,.sc h2,.cd-h{font-weight:500!important;letter-spacing:-.01em}
.stage h1{line-height:.98!important}
.eyebrow.gold{color:var(--dim)!important}
.eyebrow.gold::before{content:"";display:inline-block;width:1.6rem;height:2px;background:var(--red);vertical-align:middle;margin-right:.8rem}
.terms,.to dt,.facts dt,.px-row,.homefoot,.sf{font-family:var(--mono)!important;letter-spacing:.1em!important}
.ph .no{font-family:var(--mono)!important}
.facts dd,.px-row b,.px-v{font-family:var(--display)!important;font-weight:500}
.pbi p,.px-n{font-family:var(--body)}
.btn{font-family:var(--body)!important;font-weight:600!important}

/* the system page: six white cards in the new hero's style; opening one raises a sheet with today vs
   with the system and a drawing that draws in, then a dot keeps travelling its path */
.sypage .body{contain:none;display:flex;flex-direction:column;justify-content:center;min-height:0}
.sy{width:100%;max-width:1100px}
.sy-lede{margin:0 0 22px;font:500 clamp(26px,2.6vw,38px)/1.15 var(--display);color:var(--paper)}
.sy-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sy-card{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:150px;padding:18px 20px 16px;border-radius:3px;background:#fff;color:#1c1d5f;text-align:left;
  box-shadow:0 22px 40px -24px rgba(5,6,30,.7);transition:transform .2s ease-out,box-shadow .2s ease-out}
.sy-card:hover,.sy-card:focus-visible{transform:translateY(-3px);box-shadow:0 28px 46px -24px rgba(5,6,30,.8);outline:none}
.sy-card .sy-n{font:400 12px/1 var(--mono);letter-spacing:.1em;color:#6b6e9c}
.sy-t{font:600 clamp(22px,2vw,28px)/1.08 var(--display);color:#1c1d5f}
.sy-go{margin-top:auto;width:100%;display:flex;justify-content:space-between;padding-top:10px;border-top:1px solid #e3e5ef;font:600 14px/1 var(--body);color:#1c1d5f}
.sy-go b{color:#ED1C24}
.sy-card.is-seen .sy-n::after{content:" \00b7  opened";color:#ED1C24}
.sy-count{margin:16px 0 0;font:400 13px/1 var(--mono);letter-spacing:.1em;color:var(--dim)}
.sy-end{margin:14px 0 0;max-width:62ch;font:400 18px/1.5 var(--body);color:var(--paper)}
.sy-stage{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(9,10,40,.72)}
.sy-stage[hidden]{display:none}
.sy-sheet{position:relative;width:min(980px,100%);max-height:calc(100dvh - 48px);overflow:auto;padding:34px 36px 28px;border-radius:4px;background:#fff;color:#1c1d5f;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.sy-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center}
.sy-panel[hidden]{display:none}
.sy-panel .sy-n{font:400 12px/1 var(--mono);letter-spacing:.1em;color:#6b6e9c}
.sy-panel h2{margin:10px 0 18px;font:600 clamp(32px,3.4vw,46px)/1.02 var(--display);color:#1c1d5f}
.sy-now,.sy-then{margin:0 0 14px;font:400 17px/1.5 var(--body);color:#4a4c63}
.sy-now span,.sy-then span{display:block;margin-bottom:4px;font:400 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#6b6e9c}
.sy-then{color:#1c1d5f;font-weight:500}
.sy-then span{color:#ED1C24}
.sy-draw{width:100%;height:auto}
.sy-draw .d{fill:none;stroke:#1c1d5f;stroke-width:2;stroke-linecap:round;stroke-dasharray:400;stroke-dashoffset:0}
.sy-draw .o{fill:#fff;stroke:#1c1d5f;stroke-width:2}
.sy-draw .o-l{fill:none;stroke:#ED1C24;stroke-width:3;stroke-linecap:round}
.sy-draw .run{fill:#ED1C24}
.sy-draw .run-box{fill:#ED1C24;opacity:.85;animation:sy-blink 2.4s ease-in-out infinite}
.sy-panel.is-in .sy-text>*{animation:sy-rise .45s ease-out both}
.sy-panel.is-in .sy-text>*:nth-child(2){animation-delay:.05s}.sy-panel.is-in .sy-text>*:nth-child(3){animation-delay:.12s}.sy-panel.is-in .sy-text>*:nth-child(4){animation-delay:.2s}
.sy-panel.is-in .sy-draw .d{animation:sy-draw .9s ease-out both}
.sy-panel.is-in .sy-draw .o{animation:sy-rise .5s ease-out .4s both}
.sy-x{position:absolute;top:12px;right:14px;width:40px;height:40px;border-radius:50%;border:1px solid #d6d8e6;font-size:22px;color:#1c1d5f}
.sy-nav{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.sy-nav button{width:40px;height:40px;border-radius:50%;border:1px solid #d6d8e6;color:#1c1d5f;font-size:16px}
.sy-nav button:hover,.sy-x:hover{border-color:#1c1d5f}
@keyframes sy-draw{from{stroke-dashoffset:400}}
@keyframes sy-rise{from{opacity:0;transform:translateY(8px)}}
@keyframes sy-blink{50%{opacity:.35}}
@media (max-width:899px){
  .sypage{height:auto;min-height:100dvh;overflow:visible}
  .sy-grid{grid-template-columns:1fr 1fr;gap:10px}
  .sy-card{min-height:120px;padding:14px}
  .sy-panel{grid-template-columns:1fr;gap:10px}
  .sy-draw{max-height:200px;order:-1}
  .sy-sheet{padding:26px 20px 18px}
}
@media (prefers-reduced-motion:reduce){.sy-panel.is-in *,.sy-draw *{animation:none!important}.sy-draw animateMotion{display:none}}

/* ---- one section at a time (stepper.js): only the current section shows, so nothing resizes ---- */
.stepper .paras{display:block!important;overflow:visible!important;border:0}
.stepper .para{display:none!important;border:0!important;background:none!important;padding:0!important;opacity:1!important}
.stepper .para.is-cur{display:block!important}
.stepper .para .rule,.stepper .ph .chev,.stepper .ph .peek{display:none!important}
.stepper .ph{display:block!important;pointer-events:none;padding:4px 0 10px!important;text-align:left}
.stepper .ph .no{display:block;margin-bottom:10px}
.stepper .ph .eyebrow{display:block!important;margin-bottom:10px}
.stepper .pb{height:auto!important;overflow:visible!important;visibility:visible!important}
.stepper .pbi>*{opacity:1!important;visibility:visible!important;transform:none!important}
.stepper .para.is-cur .ph h2{font-size:clamp(40px,4.4vw,64px)!important;line-height:1.02!important;white-space:normal!important;color:var(--paper)!important;opacity:1!important}
.stepper .para.is-in-r{animation:stp-r .3s ease-out both}.stepper .para.is-in-l{animation:stp-l .3s ease-out both}
@keyframes stp-r{from{opacity:0;transform:translateX(18px)}}@keyframes stp-l{from{opacity:0;transform:translateX(-18px)}}
.stp{display:flex;align-items:center;gap:16px;margin-top:22px;padding-top:16px;border-top:1px solid var(--hair)}
.stp button{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 20px;border:1px solid var(--line);border-radius:999px;color:var(--paper);font:600 17px/1 var(--body)}
.stp .stp-prev{width:52px;padding:0;justify-content:center}
.stp .stp-next{margin-left:auto;background:var(--paper);color:#1c1d5f;border-color:var(--paper)}
.stp .stp-next::after{content:"";width:0}
.stp button:disabled{opacity:.25;cursor:default}
.stp-n{font:400 15px/1 var(--mono);letter-spacing:.1em;color:var(--dim)}
.stp-t{font:500 20px/1.2 var(--display);color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
.stp-t:not(:empty)::before{content:"next: ";font:400 13px/1 var(--mono);letter-spacing:.1em;color:var(--dim)}
.stepper .body{overflow-y:auto!important}

/* ---- price lines: no dots, the line itself is the switch ---- */
.px-tog{display:none!important}
.px-line{grid-template-columns:minmax(0,1fr) auto!important;padding:12px 0!important}
.px-line:not(.is-onme)::after{content:"take out";grid-column:1/-1;justify-self:end;margin-top:-4px;font:400 12px/1 var(--mono);letter-spacing:.08em;color:var(--dim);opacity:0;transition:opacity .15s ease-out}
.px-line:not(.is-onme):hover::after{opacity:1}
.px-line.is-out::after{content:"put back";opacity:1;color:var(--red)}
.px-line.is-onme .px-n::after{content:"";}

/* ---- bigger type at 100% (Cormorant runs small) ---- */
@media (min-width:1000px){
  .facts dt,.to dt,.eyebrow,.ph .no,.px-row,.homefoot,.terms,.sf{font-size:14px!important}
  .facts dd{font-size:30px!important;line-height:1.15}
  .to dd{font-size:22px!important}
  .pbi p{font-size:22px!important;line-height:1.55}
  .px-n{font-size:20px!important}.px-v{font-size:22px!important}
  .px-row b{font-size:32px!important}.px-row.is-pay b{font-size:46px!important}
  .more{font-size:15px!important}
  .weeks li{font-size:21px!important}
  .qlist .q b{font-size:22px!important}.answer p{font-size:22px!important}
  .sy-lede{font-size:44px}.sy-t{font-size:32px}.sy-now,.sy-then{font-size:20px}.sy-card .sy-n,.sy-panel .sy-n,.sy-count{font-size:14px}
}

/* ---- system page: dark cards, nothing blinding ---- */
.sy-card{background:rgba(255,255,255,.06);color:var(--paper);border:1px solid var(--line);box-shadow:none}
.sy-card:hover,.sy-card:focus-visible{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4);box-shadow:none}
.sy-card .sy-n{color:var(--dim)}
.sy-t{color:var(--paper)}
.sy-go{color:var(--paper);border-top-color:var(--hair)}
.sy-sheet{background:#1c1d5f;color:var(--paper);border:1px solid var(--line)}
.sy-panel h2{color:var(--paper)}
.sy-panel .sy-n{color:var(--dim)}
.sy-now{color:var(--bone)}.sy-now span{color:var(--dim)}
.sy-then{color:var(--paper)}
.sy-draw .d{stroke:#c9cbf0}.sy-draw .o{fill:#1c1d5f;stroke:#c9cbf0}
.sy-x,.sy-nav button{border-color:var(--line);color:var(--paper)}
.sy-nav button:hover,.sy-x:hover{border-color:var(--paper)}
.sy-stage{background:rgba(9,10,40,.8)}
/* stepper layout: the section, then its arrows; the price panel stays in its own column */
.stepper .body{overflow:visible!important}
.pxplan.stepper .body{grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"steps price" "nav price";grid-template-rows:auto auto;align-content:start}
.pxplan.stepper #paras{grid-area:steps}
.pxplan.stepper .stp{grid-area:nav}
.pxplan.stepper .px{grid-area:price}
.stepper .ph .eyebrow{color:var(--dim)!important}
.stepper.memo{grid-template-rows:auto auto minmax(0,1fr) auto}
@media (max-width:899px){.pxplan.stepper .body{grid-template-columns:1fr;grid-template-areas:"steps" "nav"}}
/* a long section scrolls the page; the footer follows the content instead of sitting under it */
body.page.stepper{height:auto!important;min-height:100dvh;overflow:visible!important;touch-action:auto!important}
.stepper .body{min-height:0;padding-bottom:12px}
.stepper .foot{position:relative}
body.page.stepper.memo{grid-template-rows:auto auto auto auto!important;align-content:start}
/* the kernel's wide "grid" mode squeezes a section's text into a narrow column; a stepper section is one column */
.stepper .paras .pbi{display:block!important;grid-template-columns:none!important}
.stepper .paras .pbi>p{max-width:64ch;margin:0 0 18px}
.stepper .paras .facts{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important;gap:14px 28px!important;margin:6px 0 18px;max-width:900px}
.stepper .paras .more{display:inline-flex!important;margin:4px 24px 0 0}
.stepper .paras .weeks{display:block!important}
.stepper .paras .px-lines{max-width:760px}
.stepper:not(.pxplan) .body{display:flex!important;flex-direction:column;height:auto!important}
.pxplan.stepper .body{height:auto!important}
.stepper #paras,.stepper .para,.stepper .pbi{min-width:0;max-width:100%}
.stepper .paras .facts{grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr))!important}
.stepper .paras .more{white-space:normal}
@media (max-width:699px){.stepper .paras .facts{grid-template-columns:1fr 1fr!important}.stepper .paras .facts dd{font-size:22px!important}.stp-t{display:none}}
.stepper .paras .facts{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))!important}
.stepper .paras .facts>div{display:block!important;min-width:0}
.stepper .paras .facts dd{white-space:normal!important;margin:4px 0 0}

/* headshot fills the full height of its row (Mike, 10-06: the gap under the photo).
   The text beside it runs taller than the old fixed 164px / 104px, so the photo now stretches to match. */
.about .who{align-items:stretch;margin-bottom:12px}
.about .who img{height:100%;object-position:50% 25%}

/* ==== 10-06 design pass (Mike: "the rest of the pages look shitty... proportions, ample white space, fine to scroll") ====
   One column of text that lines up with its heading, real room between parts, and on phones the price
   sits in the flow instead of pinned over the footer. */
.stepper .pb,.stepper .pbi,.stepper .paras .pbi>*{padding-left:0!important;margin-left:0!important}
.stepper .ph{padding:0!important;margin:0 0 28px!important;text-align:left}
.stepper .ph h2{margin-top:14px!important}
.stepper .paras .pbi>p{margin:0 0 28px!important;max-width:60ch}
.stepper .paras .facts{margin:8px 0 32px!important;gap:28px 48px!important;padding-top:24px;border-top:1px solid var(--hair)}
.stepper .paras .px-lines{margin:4px 0 20px}
.stepper .stp{margin-top:56px!important;padding-top:20px}
.stepper .foot{margin-top:64px;padding:24px 0 40px!important}
@media (min-width:900px){
  .stepper .body{padding-top:48px!important}
  .pxplan.stepper .body{column-gap:96px;grid-template-columns:minmax(0,1fr) 360px}
  .stepper .head{padding-bottom:8px}
}
@media (max-width:899px){
  .pxplan.stepper .body{grid-template-areas:"steps" "nav" "price"!important}
  .px{position:static!important;margin-top:32px;padding:18px 0 0!important;background:none!important;border:0!important;border-top:2px solid var(--red)!important;
    display:grid!important;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:12px}
  .pxplan .foot{padding-bottom:40px!important}
  .stepper .body{padding-top:28px!important}
  .stepper .stp{margin-top:40px!important}
  .stepper .foot{flex-wrap:wrap;gap:20px}
  .stepper .foot .go{flex-wrap:wrap;gap:10px}
}
/* nothing wider than the phone; no dead gap above the arrows */
html,body.page.stepper{overflow-x:clip}
.stepper .body>*,.stepper .paras,.stepper .para,.stepper .pb,.stepper .pbi{min-width:0!important;max-width:100%!important;min-height:0!important}
.stepper .para.is-cur{height:auto!important}
.stepper .ph h2{overflow-wrap:break-word}
@media (max-width:899px){
  .stepper .paras .facts{grid-template-columns:1fr 1fr!important;gap:22px 24px!important}
  .stepper .paras .more{display:flex!important;margin:0 0 16px!important;white-space:normal}
  .stepper .to{min-width:0}.stepper .to dd{overflow-wrap:anywhere}
}
.stepper #paras,.stepper #paras .para{height:auto!important;min-height:0!important;flex:0 0 auto!important}
/* on-me lines: the price shown, struck through, so nothing reads as charged */
.px-line.is-onme .px-v s{color:var(--dim);text-decoration-color:var(--red);text-decoration-thickness:1.5px}
/* no orphans, ever (Mike, 10-06). Headings and short lines balance; prose wraps "pretty" so the last
   line never holds one word. Dot-separated lines break only between items (.nb groups). */
h1,h2,h3,.eyebrow,.terms,.homefoot,.btn,.lede,.px-n,.k,dt,dd,b,figcaption{text-wrap:balance}
p,li,.pbi,.note,span{text-wrap:pretty}
.nb{white-space:nowrap}
/* the engagement cycle (After November): three phases in a ring, then a new season */
.cycle{margin:8px 0 28px;max-width:960px}
.cycle ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.cycle li{position:relative;padding:18px 28px 18px 0;display:flex;flex-direction:column;gap:6px}
.cycle li+li{padding-left:28px;border-left:1px solid var(--hair)}
.cycle li:not(:last-child)::after{content:"\2192";position:absolute;right:-8px;top:16px;font:400 16px/1 var(--body);color:var(--red);background:var(--navy);padding:0 2px}
.cycle i{font:500 11px/1 var(--body);font-style:normal;letter-spacing:.14em;color:var(--red)}
.cycle b{font:400 clamp(22px,2vw,28px)/1.1 var(--display);color:var(--paper)}
.cycle span{font:400 15px/1.45 var(--body);color:var(--dim)}
.cycle em{font:400 clamp(17px,1.5vw,21px)/1.3 var(--display);font-style:normal;color:var(--paper);margin-top:4px}
.cycle-close{margin:0!important;padding-top:14px;border-top:1px solid var(--hair);font:400 15px/1.5 var(--body)!important;color:var(--bone)!important}
.cycle-close::before{content:"\21BB  ";color:var(--red)}
@media (max-width:820px){
  .cycle ol{grid-template-columns:1fr}
  .cycle li,.cycle li+li{padding:12px 0;border-left:0;border-bottom:1px solid var(--hair)}
  .cycle li:not(:last-child)::after{content:"\2193";right:0;top:14px}
}
.cycle em span{font:inherit;color:inherit}
/* motion between pages and sections, not jump cuts (Mike, 10-06) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .35s cubic-bezier(.4,0,.2,1) both}
::view-transition-new(root){animation:vt-in .5s cubic-bezier(.22,.8,.24,1) both}
@keyframes vt-out{to{opacity:0;transform:translateX(-24px)}}
@keyframes vt-in{from{opacity:0;transform:translateX(32px)}}
.stepper .para.is-in-r{animation:stp-r2 .55s cubic-bezier(.22,.8,.24,1) both}
.stepper .para.is-in-l{animation:stp-l2 .55s cubic-bezier(.22,.8,.24,1) both}
@keyframes stp-r2{from{opacity:0;transform:translateX(36px)}}@keyframes stp-l2{from{opacity:0;transform:translateX(-36px)}}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root),.stepper .para{animation:none!important}}