/* Generated by scripts/build.mjs (src/pages.mjs): Home's stylesheet, the shared chrome, Home's letterhead, then the inner pages' own rules. */
@font-face{font-family:Switzer;src:url(/assets/fonts/switzer-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Switzer;src:url(/assets/fonts/switzer-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
/* Metric-matched fallback, measured from the two woff2 files against Arial (frequency-weighted advance widths), so a late swap moves nothing. */
@font-face{font-family:"Switzer Fallback";src:local("Arial"),local("ArialMT");font-weight:400;size-adjust:100.54%;ascent-override:97.47%;descent-override:24.87%;line-gap-override:8.95%}
@font-face{font-family:"Switzer Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:600;size-adjust:95.45%;ascent-override:102.67%;descent-override:26.19%;line-gap-override:9.43%}
/* Portal tokens (brandConfig Direction B). The desk is the portal ground; documents are white paper. Red is the wordmark's period and the signature, one per view. */
:root{--ground:#F6F6F7;--ground-2:#E4E5E9;--ink:#111214;--graphite:#4B4E55;--graphite-text:#63676F;--rule:#AEB0B7;--red:#E41613;--red-text:#C41411;--paper:#FFFFFF;--edge:#D9DADF;--night:#111214;
  /* the footer's 11.5–12px fine print: #63676F rendered under 4.5:1 at 1x (antialiasing never reaches the stroke colour); this holds */
  --graphite-small:#575A61;
  --dm:clamp(8px,1.67vw,24px);--g:clamp(24px,5.5vw,80px);--cg:clamp(16px,1.67vw,24px);--ease:cubic-bezier(.2,.7,.1,1);
  --sheet-shadow:0 0 0 1px var(--edge),0 1px 2px rgba(17,18,20,.05),0 22px 44px -26px rgba(17,18,20,.28);
  /* scale: 11 · 12.5 · 13 · 15 · 16 · 17 · 19 · 24 · h3 28–42 · h2 36–64 · H1 44–112 (broadsheet) */
  --t-h3:clamp(28px,2.9vw,42px);--t-h2:clamp(36px,4.45vw,64px);
  --font:Switzer,"Switzer Fallback",Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:24px}
body{margin:0;background:var(--ground);color:var(--ink);font:400 16px/1.5 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-kerning:normal;text-rendering:optimizeLegibility;overflow-x:clip}
[hidden]{display:none!important}
h1,h2,h3,p,ol,ul,dl,dd,figure,blockquote{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.24em}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
main:focus{outline:none}
strong{font-weight:600}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.wrap{width:100%;max-width:1680px;margin-inline:auto;padding-inline:var(--g)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg)}
.tnum{font-feature-settings:"tnum" 1,"lnum" 1}
.fine{font-size:13px;line-height:1.6;color:var(--graphite-text)}
h2.sec{font-size:var(--t-h2);font-weight:600;letter-spacing:-.042em;line-height:1.02}
/* A sheet of paper on the desk: hairline edge and contact shadow, no layout cost. */
.sheet{position:relative;background:var(--paper);box-shadow:var(--sheet-shadow)}
.desk-block{max-width:1680px;margin-inline:auto;padding-inline:var(--dm)}


/* HERO: one sheet of letterhead. The header is its head; the price is set as its terms; the compliance line is its foot. */
.hero{position:relative;z-index:1;display:flex;flex-direction:column;padding-top:clamp(22px,4vh,44px);padding-top:clamp(22px,4svh,44px);padding-bottom:clamp(14px,2.2vh,22px);padding-bottom:clamp(14px,2.2svh,22px)}
.hero::before{content:"";position:absolute;z-index:-1;left:var(--dm);right:var(--dm);top:-72px;bottom:0;background:var(--paper);box-shadow:var(--sheet-shadow)}
.hero::after{content:"";position:absolute;z-index:-2;left:calc(var(--dm) + 3%);right:calc(var(--dm) + 3%);bottom:4px;height:40%;background:rgba(17,18,20,.16);filter:blur(28px);opacity:0;transform:translateY(0)}
.motion .hero::after{opacity:calc(var(--lift,0)*1);transform:translateY(calc(var(--lift,0)*26px))}
.hero h1{font-size:clamp(44px,7.4vw,112px);font-size:clamp(44px,min(7.4vw,11.2svh),112px);font-weight:600;letter-spacing:-.05em;line-height:.96}
.hero h1 .ln{display:inline}
/* From 640px the H1 still breaks after "counsel", but as ONE inline run, so it stays one LCP candidate (a block per line made two,
   each smaller than the lede). The optical margin (the round O hangs to the column edge) moves onto the H1's first line. */
@media (min-width:640px){.hero h1{text-indent:-.05em}.hero h1 .ln:first-child::after{content:"\A";white-space:pre}}
.hero-body{margin-top:clamp(22px,4vh,40px);margin-top:clamp(22px,4svh,40px);row-gap:24px;align-items:start}
.letter{grid-column:1/span 7}
.lede p{font-size:clamp(16px,2.1vh,19px);font-size:clamp(16px,2.1svh,19px);line-height:1.5;letter-spacing:-.006em;max-width:58ch}
.lede p+p{margin-top:.6em;color:var(--graphite)}
.reasons{margin-top:clamp(16px,2.8vh,26px);margin-top:clamp(16px,2.8svh,26px);display:grid;grid-template-columns:1fr 1fr;column-gap:var(--cg)}
.reasons>div{border-top:1px solid var(--ink);padding-top:12px}
.reasons dt{font-size:clamp(17px,2.1vh,19px);font-size:clamp(17px,2.1svh,19px);font-weight:600;letter-spacing:-.016em;line-height:1.25}
.reasons dd{margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--graphite);max-width:40ch}
.terms{grid-column:9/span 4;border-left:1px solid var(--ink);padding-left:var(--cg);display:flex;flex-direction:column;gap:14px;align-self:stretch}
.price{line-height:1.45;font-size:16px}
.price-fig{display:block;margin-bottom:6px;font-size:clamp(28px,min(2.6vw,4.4vh),38px);font-size:clamp(28px,min(2.6vw,4.4svh),38px);font-weight:600;letter-spacing:-.035em;line-height:1.05;white-space:nowrap;font-feature-settings:"tnum" 1,"lnum" 1}
.plans{font-size:15px;line-height:1.5;color:var(--graphite)}
.dateline{font-size:12px;line-height:1.5;letter-spacing:.02em;color:var(--graphite-text);font-feature-settings:"tnum" 1,"lnum" 1}
.terms .cta{margin-top:auto;padding-top:6px}
.cta{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.hero-foot{padding-top:14px;border-top:1px solid var(--rule);font-size:12px;letter-spacing:.01em;color:var(--graphite-text)}
.hero-body{margin-bottom:clamp(18px,3vh,32px);margin-bottom:clamp(18px,3svh,32px)}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;min-height:54px;padding:0 20px 0 22px;background:var(--ink);color:#fff;font-size:15px;font-weight:600;letter-spacing:-.004em;text-decoration:none}
.button svg{width:15px;height:15px;flex:none;transition:transform .35s var(--ease)}
.button:hover svg{transform:translate(2px,-2px)}
.button-secondary{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
/* The quiet door in the middle of the page */
.inline-cta{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:16px;font-weight:600;text-decoration:none;border-bottom:1px solid var(--ink)}
.inline-cta svg{width:13px;height:13px;transition:transform .35s var(--ease)}
.inline-cta:hover svg{transform:translateX(3px)}

/* THE SHOWPIECE. Default (no JS, reduced motion): a composed still, four plates beside four beats.
   Night to day (from B): the ground is night through Understand and brightens as it gets clear, reaching day at the signature.
   Live, the script sets --sky and the text tones per frame (every tone held at AA against the ground of that frame);
   still, each beat's row carries one stop of the same progression. Below the hero, a lead-in dusk with no text on it. */
.sp{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--cg);
  --lead:clamp(180px,36vh,340px);--sky:var(--night);--fg:#F6F6F7;--fg2:#B9BCC4;--fg3:#8E929B;--rl:#3A3C42;color:var(--fg)}
.sp::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;
  background:linear-gradient(var(--ground),var(--ground) 20%,#cbccce 44%,#7c7d81 66%,#2c2d31 86%,var(--night)) top/100% var(--lead) no-repeat,var(--sky)}
.sp :focus-visible{outline-color:currentColor}
.sp .inline-cta{border-bottom-color:currentColor}
.sky-row{grid-column:1/-1;position:relative;z-index:-1;margin-block:-1px}
.sky-row::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;background:linear-gradient(var(--from,var(--c)),var(--c) 32px)}
.sky-row[data-row="0"]{grid-row:2;--c:#111214}.sky-row[data-row="1"]{grid-row:3;--c:#434446;--from:#111214}.sky-row[data-row="2"]{grid-row:4;--c:#A8A8AA;--from:#434446}.sky-row[data-row="3"]{grid-row:5;--c:#F6F6F7;--from:#A8A8AA}.sky-row[data-row="4"]{grid-row:6;--c:#F6F6F7}
/* still rows: the tones are the live tone function's output for each row's ground (secondary 7:1, small labels 5:1, never under 4.5:1) */
html:not(.motion) .beat[data-beat="1"]{--fg:#F6F6F7;--fg2:#DADADB;--fg3:#B9B9BB}
html:not(.motion) .beat[data-beat="2"]{--fg:#111214;--fg2:#1E1F21;--fg3:#373739}
html:not(.motion) .beat[data-beat="3"],html:not(.motion) .sp-close{--fg:#111214;--fg2:#4B4E55;--fg3:#63676F}
.sp-close{color:var(--fg)}
.motion .sky-row{display:none}
.sp-head{grid-column:1/-1;grid-row:1;padding-top:calc(var(--lead) + clamp(32px,4vw,64px));padding-bottom:clamp(8px,2vw,24px)}
.beat{grid-column:1;align-self:center;padding-block:clamp(36px,5vw,72px);color:var(--fg)}
.beat[data-beat="0"]{grid-row:2}.beat[data-beat="1"]{grid-row:3}.beat[data-beat="2"]{grid-row:4}.beat[data-beat="3"]{grid-row:5}
.beat-k{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--fg3)}
.beat-k::before{content:"";width:28px;height:1px;background:var(--fg)}
.beat-k .n{color:var(--fg)}
.beat h3{margin-top:18px;font-size:var(--t-h3);font-weight:600;letter-spacing:-.036em;line-height:1.04;max-width:14ch}
.beat p.body{margin-top:18px;font-size:19px;line-height:1.55;color:var(--fg2);max-width:34ch}
/* The approved margin note (S-4n), as real text: beside the page in the live stage where it fits, in the caption otherwise. */
.beat-note{margin-top:20px;padding-top:12px;border-top:1px solid var(--fg3);font-size:15px;line-height:1.5;color:var(--fg2);max-width:34ch}
.note-in-stage .beat-note{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.sp-stage{display:contents}
.sp-stage>canvas,.sp-overlay,.sp-rail{display:none}
.plate{grid-column:2;align-self:center;padding-block:clamp(16px,3vw,40px)}
.plate[data-plate="0"]{grid-row:2}.plate[data-plate="1"]{grid-row:3}.plate[data-plate="2"]{grid-row:4}.plate[data-plate="3"]{grid-row:5}
.plate-art{position:relative;max-width:620px;margin-inline:auto}
.plate svg{display:block;width:100%;height:auto;font-family:var(--font)}
/* The Plan still's labels: real text at a fixed 12.5px on a paper tag, placed in percent of the drawing, readable at every width. */
.pl{position:absolute;padding:3px 6px;background:var(--paper);box-shadow:0 0 0 1px rgba(17,18,20,.06);font-size:12.5px;font-weight:600;letter-spacing:.06em;line-height:1.2;text-transform:uppercase;white-space:nowrap;color:var(--graphite);transform:translate(14px,-50%)}
.pl[data-k="0"]{color:var(--ink)}
.sp-close{grid-column:1/-1;grid-row:6;padding-block:clamp(48px,7vw,104px) clamp(72px,9vw,128px)}
.sp-close p{font-size:clamp(26px,2.7vw,40px);font-weight:600;letter-spacing:-.034em;line-height:1.14;max-width:24ch}
.sp-close .inline-cta{margin-top:28px}

/* Motion: the stage pins and the scroll plays the beats. */
.motion .sp-stage{display:block;position:sticky;top:0;grid-column:2;grid-row:1/span 6;align-self:start;height:100vh;height:100svh;margin-right:calc(-1*var(--g));overflow:hidden;background:transparent}
.motion .sp-head{grid-column:1}
/* The run (stage, still rows, beats) is a box only on phones; on wider screens its children are the grid's own items. */
.sp-run{display:contents}
/* Desktop: the closing line is the section's last thing, so it leaves with the stage (no caption-less signed page after it). */
.motion .sp-close{grid-column:1;min-height:0;display:block;padding-block:22vh 5vh;padding-block:22svh 5svh}
.motion .beat{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:48px}
.motion .sp-stage>canvas{display:block;position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .9s var(--ease)}
.motion .sp-stage.gl-ready>canvas{opacity:1}
.motion .plate{position:absolute;inset:6% 6% 15%;display:flex;align-items:center;justify-content:center;padding:0;opacity:0;transition:opacity .5s var(--ease)}
.motion .plate{container-type:size;align-self:stretch}
.motion .plate-art{width:min(100cqw,calc(100cqh*600/560));max-width:none}
.motion .plate.on{opacity:1}
.motion .sp-stage.gl-ready .plate{opacity:0;transition-delay:.4s}
.motion .sp-overlay{display:block;position:absolute;inset:0;pointer-events:none}
.tl-svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.tl-label{position:absolute;left:0;top:0;padding:3px 6px;background:var(--paper);box-shadow:0 0 0 1px rgba(17,18,20,.06);font-size:12.5px;font-weight:600;letter-spacing:.06em;line-height:1.2;text-transform:uppercase;white-space:nowrap;color:var(--graphite);opacity:0}
.tl-label[data-tl="0"]{color:var(--ink)}
.mnote{position:absolute;left:0;top:0;max-width:230px;font-size:14.5px;line-height:1.45;color:var(--fg);opacity:0}
.mnote-leader{position:absolute;left:0;top:0;width:0;height:1px;background:var(--fg)}
.motion .sp-rail{display:grid;position:absolute;left:clamp(16px,3vw,40px);right:clamp(16px,3vw,40px);bottom:clamp(14px,3.2vh,32px);bottom:clamp(14px,3.2svh,32px);grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.rail-seg{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--fg3);white-space:nowrap}
.rail-seg .bar{position:relative;display:block;height:1px;margin-bottom:10px;background:var(--rl);overflow:hidden}
.rail-seg .bar i{position:absolute;inset:0;background:var(--fg);transform:scaleX(0);transform-origin:left}
.rail-seg.on{color:var(--fg)}

/* PROOF: a typeset proof sheet. The page turns from story to evidence. */
.section{padding-block:clamp(64px,8vw,128px)}
.proof-sheet{margin-right:clamp(0px,8vw,120px);padding:clamp(28px,5vw,72px) calc(var(--g) - var(--dm))}
.proof-sheet .sec{grid-column:1/span 4;align-self:start}
.proof-list{grid-column:5/span 8;border-top:1px solid var(--ink);counter-reset:proof}
.proof-list li{display:grid;grid-template-columns:44px minmax(0,1fr);padding:16px 0 17px;border-bottom:1px solid var(--rule);font-size:19px;line-height:1.45;letter-spacing:-.008em;counter-increment:proof}
.proof-list li::before{content:counter(proof,decimal-leading-zero);content:counter(proof,decimal-leading-zero) / "";padding-top:4px;font-size:12px;font-weight:600;color:var(--graphite-text);font-feature-settings:"tnum" 1}
.proof-list li>span{max-width:58ch}
.proof-sheet .sec{grid-row:1}.proof-list{grid-row:1/span 2}.proof-sheet .fine{grid-row:3}
.proof-sheet .fine{grid-column:5/span 8;margin-top:16px}
/* The portrait, printed on the proof sheet under "Who you're hiring." Lazy, below the fold: never the LCP. */
.portrait{grid-column:1/span 3;grid-row:2;align-self:start;margin-top:clamp(20px,2.5vw,36px);max-width:300px}
.portrait img{display:block;width:100%;height:auto;aspect-ratio:560/784;background:var(--ground-2);box-shadow:0 0 0 1px var(--edge)}

/* THE MEMO: subscription and hourly, printed and ruled. Both columns in ink, at one weight (MRPC 7.1(c)). */
.memo{margin-left:clamp(0px,6vw,96px);padding:clamp(28px,5vw,72px) calc(var(--g) - var(--dm))}
.memo-head{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg);padding-bottom:22px;border-bottom:3px double var(--ink)}
.memo .sec{grid-column:1/span 7;font-size:clamp(32px,3.6vw,52px)}
.compare-intro{grid-column:8/span 5;align-self:end;font-size:17px;line-height:1.5;color:var(--graphite);max-width:44ch}
.table-wrap{grid-column:1/-1;margin-top:clamp(20px,2.5vw,32px)}
table{width:100%;border-collapse:collapse}
thead th{padding:0 24px 14px 0;text-align:left;vertical-align:bottom;font-size:15px;font-weight:600;letter-spacing:-.005em;border-bottom:1px solid var(--ink)}
tbody tr{border-bottom:1px solid var(--rule)}
tbody th{width:22%;padding:18px 24px 20px 0;text-align:left;vertical-align:top;font-size:15px;font-weight:600;line-height:1.45}
tbody td{width:39%;padding:18px 24px 20px 0;vertical-align:top;font-size:16px;line-height:1.5}
caption{caption-side:bottom;padding-top:16px;text-align:left;font-size:13px;line-height:1.6;color:var(--graphite-text)}

/* THE NUMBERED PAGE: the first week, with hanging figures in the margin */
.page{margin-right:clamp(0px,14vw,220px);padding:clamp(28px,5vw,72px) calc(var(--g) - var(--dm))}
.page .sec{grid-column:2/-1}
.steps{grid-column:1/-1;margin-top:clamp(28px,3.5vw,48px);counter-reset:step}
.steps li{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg);padding:18px 0 22px;border-top:1px solid var(--rule);counter-increment:step}
.steps li:first-child{border-top-color:var(--ink)}
.steps li::before{content:counter(step);content:counter(step) / "";grid-column:1;grid-row:1/span 2;margin-top:-6px;font-size:clamp(40px,4.4vw,64px);font-weight:600;letter-spacing:-.04em;line-height:1;font-feature-settings:"tnum" 1,"lnum" 1;color:var(--ink)}
.steps h3{grid-column:2/span 4;font-size:22px;font-weight:600;letter-spacing:-.022em;line-height:1.25}
.steps p{grid-column:6/span 7;font-size:16px;line-height:1.6;color:var(--graphite);max-width:58ch}
.page-foot{grid-column:2/-1;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 48px;margin-top:20px;padding-top:18px;border-top:1px solid var(--ink)}
.page-foot .fine{max-width:66ch}

/* THE Q&A SHEET: five questions printed in full (no accordions), matched word for word by the FAQPage JSON-LD. */
.faq-sheet{margin-left:clamp(0px,6vw,96px);padding:clamp(28px,5vw,72px) calc(var(--g) - var(--dm))}
.faq-sheet .sec{grid-column:1/span 4;align-self:start}
.faq-list{grid-column:5/span 8;border-top:1px solid var(--ink)}
.qa{padding:18px 0 20px;border-bottom:1px solid var(--rule)}
.qa h3{font-size:19px;font-weight:600;letter-spacing:-.014em;line-height:1.3}
.qa p{margin-top:8px;font-size:16px;line-height:1.6;color:var(--graphite);max-width:62ch}

/* Closing: the letter's sign-off */
.closing .grid{row-gap:28px;align-items:end}
.closing h2{grid-column:1/span 7;font-size:clamp(44px,6.1vw,92px);font-weight:600;letter-spacing:-.046em;line-height:.98}
.closing-body{grid-column:8/span 5}
.closing-body p{font-size:19px;line-height:1.5;max-width:40ch}
.closing-body .cta{margin-top:24px}


@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* Under 1024: the letterhead restacks on the same grid */
@media (max-width:1023.98px){
  .letter{grid-column:1/-1}
  .terms{grid-column:1/-1;border-left:0;border-top:1px solid var(--ink);padding-left:0;padding-top:16px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--cg);row-gap:12px}
  .terms .price{grid-column:1/-1}.terms .cta{grid-column:1/-1;margin-top:4px}
  .proof-sheet,.memo,.page{margin-inline:0}
  .proof-sheet .sec,.proof-list,.proof-sheet .fine{grid-column:1/-1}.proof-list{margin-top:28px}
  .proof-sheet .sec,.portrait,.proof-list,.proof-sheet .fine{grid-row:auto}.portrait{grid-column:1/-1;max-width:220px}
  .faq-sheet{margin-inline:0}.faq-sheet .sec,.faq-list{grid-column:1/-1}.faq-list{margin-top:28px}
  .memo .sec,.compare-intro{grid-column:1/-1}.compare-intro{margin-top:16px}
  .page .sec,.page-foot{grid-column:1/-1}
  .steps h3{grid-column:2/span 5}.steps p{grid-column:7/span 6}
  .closing h2,.closing-body{grid-column:1/-1}
}
/* Under 900: the showpiece stacks. Still: plate after each beat. Motion: the stage pins on top, each beat docks under it. */
@media (max-width:899.98px){
  .sp{grid-template-columns:minmax(0,1fr)}
  .beat,.plate{grid-column:1}
  .beat[data-beat="0"]{grid-row:2}.plate[data-plate="0"]{grid-row:3}.beat[data-beat="1"]{grid-row:4}.plate[data-plate="1"]{grid-row:5}
  .beat[data-beat="2"]{grid-row:6}.plate[data-plate="2"]{grid-row:7}.beat[data-beat="3"]{grid-row:8}.plate[data-plate="3"]{grid-row:9}.sp-close{grid-row:10}
  .sp{--lead:clamp(96px,14vh,132px);--lead:clamp(96px,14svh,132px)}
  .sky-row[data-row="0"]{grid-row:2/span 2}.sky-row[data-row="1"]{grid-row:4/span 2}.sky-row[data-row="2"]{grid-row:6/span 2}.sky-row[data-row="3"]{grid-row:8/span 2}.sky-row[data-row="4"]{grid-row:10}
  .beat{padding-block:40px 8px}
  .motion .sp{display:block}
  .motion .sp-stage{z-index:2;height:56vh;height:56svh;margin-inline:calc(-1*var(--g));overflow:visible;border-bottom:1px solid var(--rl);background:var(--sky)}
  .motion .sp-stage>canvas,.motion .sp-overlay{overflow:hidden}
  .motion .beat,.motion .sp-close{display:block;min-height:50vh;min-height:50svh;padding-block:0}
  .motion .beat-inner,.motion .sp-close .close-inner{position:sticky;top:calc(56vh + 36px);top:calc(56svh + 36px);padding-bottom:24px}
  .motion .beat[data-beat="2"]{min-height:68vh;min-height:68svh}
  .motion .beat[data-beat="0"]{margin-top:36px}
  /* phones: the stage is sticky inside the run, which ends where the closing block starts; the closing block is 36px plus its
     line, so the line is pushed up at the same moment the stage is, 36px under it, and they leave together */
  .motion .sp-run{display:block}
  .motion .sp-close{min-height:0;padding:36px 0 0}
  .motion .sp-close .close-inner{padding-bottom:28px}
  .motion .beat h3{margin-top:12px;font-size:28px}
  .motion .beat p.body{margin-top:10px}
  .motion .plate{inset:4% 4% 16%}
  .rail-seg .w{display:none}
}
@media (max-width:767.98px){.tl-label,.pl{padding:2px 5px;font-size:11px;letter-spacing:.05em}}
/* Shorter phones (under 720px tall): the stage takes half the height, so the longest caption (Execute, with its note) fits whole.
   The closing block's top gap equals the dock gap, which keeps the stage and the closing line leaving together. */
@media (max-width:899.98px) and (max-height:719.98px){
  .motion .sp-stage{height:50vh;height:50svh}
  .motion .beat-inner,.motion .sp-close .close-inner{top:calc(50vh + 28px);top:calc(50svh + 28px)}
  .motion .beat[data-beat="0"]{margin-top:28px}
  .motion .sp-close{padding-top:28px}
  .motion .beat h3{font-size:26px}.motion .beat p.body{font-size:16px}.motion .beat-note{margin-top:14px;font-size:14px}
}
@media (max-width:639.98px){
  .hero::before{top:-64px}
  .hero{min-height:0;padding-top:24px}
  .hero h1 .ln{display:inline}
  .hero h1{font-size:44px;line-height:.98}
  .hero-body{margin-top:22px}
  .lede p{font-size:17px}
  .reasons{grid-template-columns:minmax(0,1fr);row-gap:18px}
  .terms{grid-template-columns:minmax(0,1fr)}
  .price-fig{font-size:32px}
  .cta .button{width:100%}
  .hero-foot{max-width:44ch}
  .beat p.body{font-size:17px}
  .proof-list li{font-size:17px;grid-template-columns:34px minmax(0,1fr)}
  .compare-intro{font-size:16px}
  table{display:flex;flex-direction:column}
  thead,tbody,tr,th,td,caption{display:block}
  caption{order:2}tbody{order:1}
  thead tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px;border-bottom:1px solid var(--ink)}
  thead td{display:none}
  thead th{padding:0 0 10px;border:0;font-size:13px;line-height:1.35}
  tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px;padding:16px 0 18px}
  tbody th{grid-column:1/-1;width:auto;padding:0 0 10px}
  tbody td{width:auto;padding:0;font-size:15px}
  .steps li{grid-template-columns:40px minmax(0,1fr);row-gap:8px}
  .steps li::before{font-size:34px}
  .steps h3{grid-column:2;font-size:20px}.steps p{grid-column:2;font-size:15px}
  .closing h2{font-size:44px}
  .closing-body p{font-size:17px}
}

/* The shared header and footer on Home's letterhead (the review seat, 2026-10-20 4:13 PM): the same markup, words and order as every
   page; Home adds one class. The header's rule is inset to the hero's text column, inside the sheet, the wordmark aligns with the
   hero's text (0px), and the footer stands on the page's own ground, not the ivory. */
.home-letterhead .site-header{max-width:1680px;margin-inline:auto;padding-inline:var(--g);border-bottom:0}
.home-letterhead .site-header::after{content:"";position:absolute;left:var(--g);right:var(--g);bottom:0;height:1px;background:var(--rule)}
.home-letterhead .site-footer{background:transparent}
/* The shared header and footer, styled as on every page: lifted from /assets/site.css at build time (src/home.mjs). */
:where(.skip-link,.site-header,.site-footer){--ivory:#F7F5F0;--paper:#EFECE3;--ink:#26251F;--slab:#1B1B18;--graphite:#75746C;--muted:#69685F;--rule:#AEA795;--rule-dark:#FAF8F2;--red:#E41613;--ease:cubic-bezier(.16,1,.3,1);color:var(--ink);font:400 16px Switzer,Arial,sans-serif;font-kerning:auto;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:auto}
:where(.site-header,.site-footer) p{margin:0;line-height:1.55;text-wrap:wrap}
a:where(.skip-link),:where(.site-header,.site-footer) a{text-decoration-thickness:auto;text-underline-offset:.25em}
a:where(.skip-link):hover,:where(.site-header,.site-footer) a:hover{text-decoration:none}
:where(.skip-link,.site-header,.site-footer):focus-visible,:where(.site-header,.site-footer) :focus-visible{outline:2px solid var(--ink);outline-offset:5px}
.site-header{height:92px;padding:0 4.5vw;display:flex;align-items:center;justify-content:space-between;gap:32px;position:relative;z-index:5;border-bottom:1px solid var(--rule)}
.wordmark{display:inline-block;font-size:38px;font-weight:600;line-height:1;letter-spacing:-.05em;text-decoration:none;white-space:nowrap}
.wordmark-dot{color:transparent;background:var(--red);display:inline-block;width:.135em;height:.135em;border-radius:50%;margin-left:.035em;overflow:hidden}
.desktop-nav{display:flex;gap:32px;align-items:center}
.desktop-nav a{font-size:13px;text-decoration:none;padding:16px 0;position:relative}
.desktop-nav a::after{content:'';position:absolute;bottom:8px;left:0;right:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left}
.desktop-nav a[aria-current=page]::after,.desktop-nav a:hover::after{transform:scaleX(1)}
.desktop-nav a:last-child{margin-left:10px;border:1px solid var(--ink);padding:12px 23px}
.desktop-nav a:last-child::after{display:none}
.mobile-navigation{display:none}
.skip-link{position:absolute;left:4.5vw;top:-80px;z-index:10;background:var(--ink);color:var(--ivory);padding:12px 16px;font-size:14px;font-weight:600;text-decoration:none}
.skip-link:focus-visible{top:12px}
.text-link span{display:inline-block}
.link-arrow{display:inline-block;width:1.2em;height:1.2em;flex:none;vertical-align:-.15em}
.link-arrow svg{display:block;width:100%;height:100%}
.text-link{display:inline-flex;align-items:center;gap:16px;min-height:44px;font-size:14px;text-decoration:none}
.text-link{margin-top:28px;border-bottom:1px solid var(--ink)}
.site-footer{padding:55px 4.5vw 32px;border-top:1px solid var(--rule);background:var(--ivory);--fine-print:#575A61}
.footer-top{display:grid;grid-template-columns:1fr 1fr;gap:9vw;align-items:start}
.footer-signature{font-size:27px;font-weight:400;line-height:1.2;letter-spacing:-.03em;max-width:21ch;margin-top:22px}
.footer-email{display:inline-flex;gap:30px;align-items:center;font-size:17px;min-height:44px}
.footer-nav{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin-top:25px}
.footer-nav a{font-size:13px;border:0;margin:0;min-height:42px;justify-content:space-between;max-width:190px}
.footer-wordmark{font-size:36px;line-height:1.07;letter-spacing:-.05em;margin:0;max-width:100%}
.footer-descriptor{font-size:12px;color:var(--fine-print);line-height:1.65;margin-top:36px}
.disclosures{border-top:1px solid var(--rule);margin-top:26px;padding-top:25px;display:grid;grid-template-columns:1fr 2fr;gap:12px 42px;font-size:11px;line-height:1.65;color:var(--fine-print)}
.disclosures p:nth-child(2){grid-column:2;grid-row:1/4}
.disclosures p:last-child{grid-column:2;grid-row:4}
@media(prefers-reduced-motion:no-preference){.motion-enabled .desktop-nav a::after,.motion-enabled .text-link span{transition:transform .4s var(--ease)}
.motion-enabled .text-link:hover span{transform:translate(3px,-3px)}}
@media(max-width:1100px){.desktop-nav{gap:19px}
.desktop-nav a:last-child{margin-left:0;padding:12px 16px}}
@media(max-width:760px){.site-header{height:74px;padding:0 22px;gap:15px}
.wordmark{font-size:31px}
.desktop-nav{display:none}
.mobile-navigation{display:flex;gap:17px;align-items:center}
.mobile-door{display:inline-flex;align-items:center;gap:9px;font-size:12px;min-height:44px;text-decoration:none}
.menu summary{list-style:none;display:flex;align-items:center;justify-content:center;width:38px;height:44px;cursor:pointer}
.menu summary::-webkit-details-marker{display:none}
.menu-icon{height:1px;width:20px;background:var(--ink);box-shadow:0 6px 0 var(--ink)}
.menu nav{display:flex;position:absolute;left:0;right:0;top:100%;background:var(--ivory);flex-direction:column;align-items:stretch;gap:0;border-bottom:1px solid var(--rule);padding:15px 22px 22px;box-shadow:0 15px 25px #26251F15}
.menu nav a{font-size:22px;padding:15px 0;min-height:48px;text-decoration:none;letter-spacing:-.02em}
.text-link{font-size:13px;gap:13px}
.site-footer{padding:55px 22px 30px}
.footer-top{display:block}
.footer-signature{font-size:25px;max-width:20ch;margin:20px 0 32px}
.footer-email{font-size:15px}
.footer-nav{gap:0 24px;margin-top:22px}
.footer-nav a{font-size:12px;min-height:44px}
.footer-wordmark{font-size:31px;margin:0;letter-spacing:-.05em}
.footer-descriptor{font-size:11px}
.disclosures{display:flex;flex-direction:column;gap:14px;font-size:11px;padding-top:24px}}
@media(max-width:360px){.wordmark{font-size:28px}
.mobile-navigation{gap:9px}
.mobile-door{font-size:11px}}
.letterhead .site-header{max-width:1680px;margin-inline:auto;padding-inline:var(--g);border-bottom:0}
.letterhead .site-header::after{content:"";position:absolute;left:var(--g);right:var(--g);bottom:0;height:1px;background:var(--rule)}
.letterhead .site-footer{background:transparent}
/* The inner pages' own rules, after Home's stylesheet (src/pages.mjs). Home's tokens, type and sheets do the rest. */
button,input,textarea{font:inherit}
button.button{border:0;cursor:pointer}
button:disabled{cursor:wait;opacity:.75}
main{display:block}

/* The page head: Home's letterhead (.hero), with a page's label above a smaller headline. */
.page-head .kicker{margin-bottom:14px;font-size:12.5px;font-weight:600;letter-spacing:.06em;line-height:1.2;text-transform:uppercase;color:var(--graphite-text)}
.page-head h1{font-size:clamp(38px,min(5.6vw,9.5svh),88px);letter-spacing:-.048em;line-height:.98;text-indent:0;max-width:20ch}
.page-head .letter.wide{grid-column:1/span 9}
.page-head .letter .cta{margin-top:clamp(18px,3svh,28px)}
.page-head .lede p{max-width:62ch}
.page-head .dateline{margin-top:14px}
.page-head .terms{gap:12px}
/* A page that is only its letterhead (404, the form's replies) fills the first view, so the footer's red dot never shares it with the header's. */
main>.page-head:only-child{min-height:calc(100vh - 92px);min-height:calc(100svh - 92px)}
main>.page-head:only-child .hero-body{flex:1}
/* The leaf: a second sheet under the letterhead, the one thing the pointer moves (drift.js). It carries no words. */
.page-head .leaf{position:absolute;z-index:-3;left:calc(var(--dm) + 10px);right:calc(var(--dm) - 6px);top:-62px;bottom:-9px;background:var(--paper);box-shadow:var(--sheet-shadow);
  transform:translate(calc(var(--dx,0) * -9px),calc(var(--dy,0) * -6px)) rotate(calc(.35deg + var(--dx,0) * .22deg));transform-origin:50% 0;pointer-events:none}
.page-portrait{max-width:240px}
.page-portrait img{display:block;width:100%;height:auto;aspect-ratio:560/784;background:var(--ground-2);box-shadow:0 0 0 1px var(--edge)}
.terms-name .name{font-size:19px;font-weight:600;letter-spacing:-.016em;line-height:1.25}
.terms-name .plans{margin-top:4px}
.contact-direct .inline-cta{overflow-wrap:anywhere;font-size:17px}
.contact-direct .plans{margin-top:8px}
.contact-book .cta{margin-top:12px}

/* The sheets. Home alternates its sheets left and right on the desk; .alt sets a Q&A sheet to the other side. */
.section+.section{padding-top:0}
/* A sheet's title at the size of Home's memo title: these pages' titles run longer than Home's. */
.sheet .sec{font-size:clamp(32px,3.6vw,52px)}
.faq-sheet.alt{margin-left:0;margin-right:clamp(0px,8vw,120px)}
.faq-list>.fine,.faq-list .fine{margin-top:16px}
.qa h3+p{margin-top:8px}
.qa>p:first-child{margin-top:0}
.prose>p{margin-top:18px;font-size:19px;line-height:1.55;letter-spacing:-.008em;max-width:58ch}
.prose>p.fine{font-size:13px;line-height:1.6;letter-spacing:0;color:var(--graphite-text)}
.beat-tag{display:flex;gap:4px;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--graphite-text)}
.beat-tag .tnum{color:var(--ink)}
.qa .beat-tag+h3{margin-top:6px}
.beats-close{margin-top:28px;font-size:clamp(20px,1.9vw,26px);font-weight:600;letter-spacing:-.024em;line-height:1.25;max-width:36ch}
/* Links to other pages, as cards (Paul, via the review seat, 2026-10-21 10:09 AM item (3)); the one component, src/render.mjs card().
   Each is a sheet of Home's paper with its shadow and a fine rule; the whole card is the link. The title keeps the type it had as
   the services index's row title. Hover and keyboard focus lift the sheet (its shadow deepens) and slide the arrow 4px, in 180ms on
   Home's ease; under reduced motion nothing moves and only the colour changes (the rule and the arrow go to ink). */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cg)}
/* A card list under its own heading: the heading on the desk, in the page's text column, at a sheet title's size. */
.cards-head{margin-bottom:clamp(24px,3vw,40px)}
.cards-head .sec{font-size:clamp(32px,3.6vw,52px)}
.cards>li{display:flex}
.card{--card-rule:var(--rule);--card-mark:var(--graphite);flex:1;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr;column-gap:24px;min-height:44px;
  padding:clamp(22px,2.6vw,36px) clamp(22px,2.6vw,36px) clamp(24px,2.8vw,40px);background:var(--paper);box-shadow:var(--sheet-shadow);color:var(--ink);text-decoration:none;
  transition:box-shadow .18s var(--ease),transform .18s var(--ease)}
.card-title{grid-column:1;grid-row:1;font-size:22px;font-weight:600;letter-spacing:-.022em;line-height:1.25}
.card-line{grid-column:1/-1;grid-row:2;margin-top:14px;padding-top:14px;border-top:1px solid var(--card-rule);font-size:16px;line-height:1.6;color:var(--graphite);transition:border-color .18s var(--ease)}
.card-arrow{grid-column:2;grid-row:1;display:flex;padding-top:5px;color:var(--card-mark);transition:transform .18s var(--ease),color .18s var(--ease)}
.card-arrow svg{display:block;width:16px;height:16px}
.card:hover,.card:focus-visible{--card-rule:var(--ink);--card-mark:var(--ink)}
.card:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
@media (prefers-reduced-motion:no-preference){
  .card:hover,.card:focus-visible{transform:translateY(-3px);box-shadow:0 0 0 1px var(--edge),0 2px 4px rgba(17,18,20,.06),0 30px 54px -26px rgba(17,18,20,.36)}
  .card:hover .card-arrow,.card:focus-visible .card-arrow{transform:translateX(4px)}
}
/* Writing, once an article is approved: the index is a card list (above); its one fine line sits under the cards. */
.cards-foot{margin-top:clamp(20px,2.5vw,32px)}
.article-body{grid-column:2/span 9}
.article-body>*+*{margin-top:1em}
.article-body p,.article-body li{font-size:18px;line-height:1.65;max-width:64ch}
.article-body h2{margin-top:1.6em;font-size:28px;font-weight:600;letter-spacing:-.03em;line-height:1.15}
.article-body h3{margin-top:1.4em;font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.article-body ul,.article-body ol{padding-left:1.2em}
.article-body ul{list-style:disc}.article-body ol{list-style:decimal}

/* The contact form, ruled on the sheet. */
.contact-sheet .faq-list{padding-top:24px}
.form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 24px}
.field{display:flex;flex-direction:column;gap:10px;font-size:14px;font-weight:600;letter-spacing:-.004em}
.field.full{grid-column:1/-1}
.field input,.field textarea{display:block;width:100%;min-width:0;min-height:44px;padding:10px 0;border:0;border-bottom:1px solid var(--graphite);border-radius:0;background:transparent;color:var(--ink);font-size:17px;font-weight:400;line-height:1.5}
.field textarea{min-height:132px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-bottom:2px solid var(--ink);padding-bottom:9px}
.honeypot{display:none}
.consent{display:flex;gap:14px;align-items:flex-start;margin:28px 0 14px;font-size:14px;line-height:1.55;color:var(--graphite);cursor:pointer}
.consent input{width:22px;height:22px;flex:none;margin:0;accent-color:var(--ink)}
.contact-form .fineprint{font-size:13px;line-height:1.6;color:var(--graphite-text);max-width:66ch}
.form-submit{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:28px}
.form-submit a{display:flex;align-items:center;min-height:44px;font-size:14px;overflow-wrap:anywhere}
.form-status{margin-top:20px;font-size:16px;line-height:1.5}
.form-status:empty{margin-top:0}

@media (max-width:1023.98px){
  .page-head .letter.wide{grid-column:1/-1}
  .faq-sheet.alt{margin-inline:0}
  .article-body{grid-column:1/-1}
  .page-head .terms>.page-portrait{max-width:200px}
}
@media (max-width:639.98px){
  .page-head h1{font-size:clamp(34px,10vw,44px);line-height:1}
  .cards{grid-template-columns:minmax(0,1fr)}
  .card-title{font-size:20px}
  .prose>p{font-size:17px}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .page-head .leaf{top:-56px}
}