/* A good deed doesn't make a good person. Site by hershal.io */
:root{font-family:Arial,Helvetica,sans-serif;font-size:16px;color:#141414;background:#fff;font-synthesis:none;--paper:#fff;--ink:#141414;--muted:#626262;--line:#d3d3d3;--faint:#f5f5f5;--gutter:clamp(22px,5vw,80px)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);padding-bottom:66px}body.inverse{--paper:#141414;--ink:#fff;--muted:#b8b8b8;--line:#484848;--faint:#222}::selection{color:var(--paper);background:var(--ink)}a{color:inherit;text-underline-offset:5px}button{font:inherit;color:inherit;cursor:pointer}button,a,summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid currentColor;outline-offset:6px}button{min-height:44px}#header{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 var(--gutter);padding:25px 0;border-bottom:1px solid var(--ink)}.wordmark{font-size:19px;letter-spacing:-.03em;font-weight:600;text-decoration:none}.wordmark-period{display:none}.page-nav{display:flex;gap:28px;margin-left:auto;margin-right:28px;font-size:14px}.page-nav a{text-decoration:none}.page-nav a:hover{text-decoration:underline}.tools{display:flex;gap:12px}.tools button{border:0;background:none;padding:8px 2px;min-width:36px;font-size:14px}.tools #language{padding-right:12px}.tools #theme,.tools #motion{font-size:18px}.tools button:hover{opacity:.55}.eyebrow,.meta,.form-note,.memo-address,.step-index,.detail-index,.read-on,.signature{font-family:'Courier New',monospace}.eyebrow{text-transform:uppercase;font-size:12px;font-weight:400;letter-spacing:.08em;line-height:1.6;margin:0 0 20px}.hero{padding:46px var(--gutter) 0}.memo-address{font-size:13px;line-height:1.55;margin:0 0 46px}.memo-address>div{display:flex;gap:18px}.memo-address dt{width:42px;color:var(--muted);flex-shrink:0}.memo-address dd{margin:0}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(42px,5.8vw,90px);font-weight:500;line-height:1.06;letter-spacing:-.055em;margin-bottom:32px}.headline-line{display:block}.headline-line.second{animation:ink-in 1s .12s both}h2{font-size:clamp(30px,3.4vw,50px);font-weight:500;letter-spacing:-.045em;line-height:1.15}h3{font-size:21px;letter-spacing:-.025em;font-weight:500;line-height:1.25}.hero-bottom{display:grid;grid-template-columns:minmax(0,560px) 1fr;gap:clamp(30px,8vw,140px);align-items:start}.lead{font-size:18px;line-height:1.6;max-width:48ch;margin-bottom:0}.request{display:inline-flex;align-items:center;justify-content:space-between;gap:50px;min-height:56px;padding:16px 22px;background:var(--ink);color:var(--paper);text-decoration:none;font-size:16px;line-height:1.3;position:relative;overflow:hidden;transition:padding .25s,background .2s}.request:hover{padding-left:27px;padding-right:17px}.arrow{font-size:22px;line-height:1;transition:transform .25s}.request:hover .arrow{transform:translate(2px,-2px)}.meta{font-size:12px;line-height:1.7;margin:15px 0 3px;max-width:44ch}.form-note{font-size:12px;line-height:1.5;color:var(--muted)}.read-on{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);margin-top:48px;padding:19px 0;text-decoration:none;font-size:12px;text-transform:uppercase;letter-spacing:.08em}.read-on span{font-size:20px}.content-section{margin:0 var(--gutter);padding:70px 0;border-top:1px solid var(--ink)}.process{display:grid;grid-template-columns:minmax(230px,.7fr) 1.3fr;gap:46px}.section-heading h2{max-width:12ch;margin:0 0 20px}.section-intro{font-size:16px;line-height:1.6;color:var(--muted);max-width:32ch;margin-bottom:24px}.steps{display:grid;grid-template-columns:1fr 1fr;gap:38px}.step-index{display:block;margin:0 0 20px;padding-top:13px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}.step h3{margin:0 0 12px}.step p{font-size:16px;line-height:1.6;color:var(--muted);margin:0}.privacy-note{grid-column:2;display:flex;gap:15px;padding-top:24px;border-top:1px solid var(--line)}.privacy-note span{font-size:28px}.privacy-note p{font-size:14px;line-height:1.6;max-width:60ch;margin:0}.deep{display:grid;grid-template-columns:minmax(230px,.7fr) 1.3fr;gap:46px}.expand{display:inline-flex;align-items:center;gap:26px;border:0;border-bottom:1px solid var(--ink);padding:6px 0;background:none;font-size:14px}.expand span{font-size:22px}.disclosures{border-top:1px solid var(--ink)}details{border-bottom:1px solid var(--line)}summary{list-style:none;display:grid;grid-template-columns:32px 1fr 18px;gap:12px;align-items:center;min-height:82px;padding:24px 0;font-size:19px;line-height:1.35;cursor:pointer}summary::-webkit-details-marker{display:none}.detail-index{font-size:12px;color:var(--muted)}.plus{width:14px;height:14px;position:relative;transition:transform .25s}.plus:before,.plus:after{content:'';position:absolute;top:6px;left:0;width:14px;height:1px;background:currentColor}.plus:after{transform:rotate(90deg);transition:transform .25s}details[open] .plus:after{transform:rotate(0)}.detail-body{overflow:hidden}.detail-body>div{padding:0 28px 27px 44px;max-width:70ch}.detail-body p{font-size:16px;line-height:1.75;color:var(--muted);margin:0 0 18px}.detail-body p:last-child{margin:0}.detail-body h3{font-size:17px;letter-spacing:0;margin:24px 0 9px}.detail-body h3:first-child{margin-top:0}.closing{margin:0 var(--gutter);padding:66px 0;border-top:1px solid var(--ink)}.closing h2{margin:0 0 14px;max-width:20ch}.closing>p:not(.eyebrow){font-size:18px;line-height:1.5;margin-bottom:28px}#footer{display:grid;grid-template-columns:1fr 1fr auto;gap:32px;margin:0 var(--gutter);padding:26px 0 40px;border-top:1px solid var(--line);font-size:12px;line-height:1.7;color:var(--muted)}#footer p{margin:0;max-width:45ch}#footer a{white-space:nowrap}.reading-line{position:fixed;top:0;left:0;width:100%;height:2px;background:#888;transform:scaleX(0);transform-origin:left;z-index:10}.skip{position:fixed;top:-100px;left:20px;background:var(--paper);color:var(--ink);padding:12px;z-index:30}.skip:focus{top:10px}.reveal{transition:opacity .75s,transform .75s}.enhanced .reveal:not(.visible){opacity:0;transform:translateY(18px)}.step:nth-child(2){transition-delay:.09s}.step:nth-child(3){transition-delay:.18s}.step:nth-child(4){transition-delay:.27s}.design-switch{position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;gap:4px;align-items:center;justify-content:center;background:#fff;color:#111;border-top:1px solid #ccc;padding:9px 24px;font-family:Arial,sans-serif;font-size:13px;box-shadow:0 -3px 16px #00000005}.design-switch a{text-decoration:none;display:inline-flex;gap:8px;padding:12px 18px;min-height:42px;align-items:center;border:1px solid transparent;transition:background .2s}.design-switch a[aria-current=page]{background:#111;color:#fff}.design-switch a:hover{border-color:#111}.design-switch a span{opacity:.6;font-size:11px}.design-switch .all-directions{margin-right:auto;padding-left:0}.review-label{font-size:10px;letter-spacing:.08em;margin-left:auto;color:#666}.paused{scroll-behavior:auto!important}.paused *, .paused *:before,.paused *:after{animation:none!important;transition:none!important}.paused .reveal{opacity:1!important;transform:none!important}@keyframes ink-in{from{opacity:.15;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
/* Direction 02 — Direct: a typographic signal, then an open working surface. */
[data-design=direct]{--paper:#fff;--ink:#111;--muted:#606060;--line:#cecece;--faint:#f5f5f5}[data-design=direct] #header{background:#111;color:#fff;margin:0;padding:22px var(--gutter);border-bottom:1px solid #4b4b4b}[data-design=direct] .wordmark{font-size:16px;letter-spacing:-.02em}[data-design=direct] .hero{background:#111;color:#fff;padding-top:40px}[data-design=direct] .hero .eyebrow{color:#b8b8b8}[data-design=direct] h1{font-weight:600;font-size:clamp(44px,6.7vw,108px);letter-spacing:-.07em;line-height:1.01;margin:28px 0 36px}[data-design=direct] h1 .second{color:#bfbfbf}[data-design=direct] .hero-bottom{grid-template-columns:1.15fr 1fr;gap:8vw}[data-design=direct] .hero .lead{font-size:17px;color:#c8c8c8;max-width:49ch}[data-design=direct] .hero .request{color:#111;background:#fff}[data-design=direct] .hero .form-note{color:#b8b8b8}[data-design=direct] .hero-baseline{display:flex;justify-content:space-between;gap:24px;border-top:1px solid #4b4b4b;margin-top:42px;padding:22px 0;font-size:12px;font-family:'Courier New',monospace}[data-design=direct] .hero-baseline a{text-decoration:none}[data-design=direct] .process{display:block;padding-top:74px;border:0}[data-design=direct] .section-heading h2{max-width:20ch}[data-design=direct] .process .section-heading{display:grid;grid-template-columns:1fr 2fr;gap:0 30px;align-items:baseline}[data-design=direct] .process .section-heading .section-intro{grid-column:2;max-width:none}[data-design=direct] .steps{grid-template-columns:repeat(4,1fr);gap:28px;margin-top:32px}[data-design=direct] .step-index{font-family:Arial,sans-serif;font-size:clamp(40px,5vw,72px);letter-spacing:-.07em;color:var(--ink);padding-top:23px}[data-design=direct] .privacy-note{margin-top:36px;padding-top:25px}[data-design=direct] .quiet-section{border-top:1px solid var(--ink);margin:0 var(--gutter);padding:66px 0;display:grid;grid-template-columns:1fr 1fr;gap:10vw;align-items:end}[data-design=direct] .quiet-section h2{font-size:clamp(44px,6vw,84px);font-weight:600;line-height:1.03;letter-spacing:-.06em;margin:0}[data-design=direct] .quiet-section p{max-width:34ch;font-size:18px;line-height:1.65;margin:0}[data-design=direct] .deep{grid-template-columns:1fr 1.5fr}[data-design=direct] .closing{padding:56px var(--gutter);background:#111;color:#fff;margin:0;border:none}[data-design=direct] .closing .request{background:#fff;color:#111}[data-design=direct] .closing .form-note{color:#bbb}[data-design=direct] #footer{border:none}[data-design=direct].inverse{--paper:#111;--ink:#fff;--muted:#bbb;--line:#454545}[data-design=direct].inverse #header,[data-design=direct].inverse .hero,[data-design=direct].inverse .closing{background:#fff;color:#111}[data-design=direct].inverse .hero .request,[data-design=direct].inverse .closing .request{background:#111;color:#fff}[data-design=direct].inverse .hero .eyebrow,[data-design=direct].inverse .hero .lead,[data-design=direct].inverse h1 .second,[data-design=direct].inverse .hero .form-note,[data-design=direct].inverse .closing .form-note{color:#555}
/* Direction 03 — Letter: personal, unhurried typography with a fast first action. */
[data-design=letter]{--gutter:clamp(24px,7vw,110px)}[data-design=letter] #header{padding-top:30px;padding-bottom:25px;border-bottom:1px solid var(--line)}[data-design=letter] .wordmark{font-family:Georgia,'Times New Roman',serif;font-size:22px;font-weight:400}[data-design=letter] .hero{display:grid;grid-template-columns:210px minmax(0,800px);gap:6vw;padding-top:62px;padding-bottom:55px}[data-design=letter] .letter-margin .eyebrow{max-width:16ch;margin-bottom:15px}[data-design=letter] .letter-margin>p:not(.eyebrow){color:var(--muted);font-size:13px;line-height:1.7;max-width:20ch}[data-design=letter] .margin-rule{width:28px;height:1px;background:var(--ink);display:block;margin-top:30px;transform-origin:left;animation:rule-in 1.2s both}[data-design=letter] .salutation{font-family:Georgia,serif;font-size:17px;margin:0 0 22px}[data-design=letter] h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(42px,4.5vw,68px);font-weight:400;line-height:1.13;letter-spacing:-.055em;margin-bottom:26px}[data-design=letter] h1 .second{font-style:italic}[data-design=letter] .lead{font-family:Georgia,'Times New Roman',serif;font-size:19px;line-height:1.6;max-width:47ch;margin-bottom:25px}[data-design=letter] .request{background:transparent;color:var(--ink);border-bottom:1px solid var(--ink);padding:10px 0;min-height:46px;font-size:18px;gap:70px}[data-design=letter] .request:hover{padding-left:0;padding-right:0}[data-design=letter] .request:hover .arrow{transform:translate(4px,-4px)}[data-design=letter] .meta{margin-top:12px}[data-design=letter] .letter-bridge{margin:0 var(--gutter);padding:38px 0 55px calc(210px + 6vw);border-top:1px solid var(--line)}[data-design=letter] .letter-bridge p{font-family:Georgia,serif;font-size:21px;line-height:1.6;max-width:45ch;margin-bottom:20px}[data-design=letter] .signature{font-size:12px;line-height:1.6}[data-design=letter] .content-section{grid-template-columns:210px minmax(0,800px);gap:6vw;padding-top:50px;padding-bottom:50px;border-top:1px solid var(--line)}[data-design=letter] .section-heading h2{font-family:Georgia,serif;letter-spacing:-.04em;font-size:31px;line-height:1.2;max-width:12ch}[data-design=letter] .section-intro{font-size:14px;max-width:24ch}[data-design=letter] .steps{display:flex;flex-direction:column;gap:30px}[data-design=letter] .step{display:grid;grid-template-columns:36px 1fr;gap:16px}[data-design=letter] .step-index{border:none;padding:4px 0;margin:0}[data-design=letter] .step h3{font-family:Georgia,serif;font-size:23px;margin-bottom:8px;font-weight:400}[data-design=letter] .step p{max-width:48ch}[data-design=letter] .privacy-note{margin-top:-16px}[data-design=letter] summary{font-family:Georgia,serif;font-size:23px;letter-spacing:-.02em;min-height:85px}[data-design=letter] .detail-body p{font-family:Georgia,serif;font-size:18px;line-height:1.7}[data-design=letter] .detail-body h3{font-family:Georgia,serif;font-size:19px}[data-design=letter] .closing{padding:50px 0 50px calc(210px + 6vw);border-top:1px solid var(--line)}[data-design=letter] .closing h2{font-family:Georgia,serif;font-weight:400;font-size:39px}[data-design=letter] .closing>p:not(.eyebrow){font-family:Georgia,serif;font-size:19px}@keyframes rule-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(min-width:1500px){#header,.content-section,.closing,#footer,.hero,.letter-bridge,.quiet-section{max-width:1600px;margin-left:auto!important;margin-right:auto!important}.content-section,.closing,#footer,.letter-bridge,.quiet-section{padding-left:var(--gutter)!important;padding-right:var(--gutter)!important}[data-design=direct] #header,[data-design=direct] .hero,[data-design=direct] .closing{max-width:none}[data-design=letter] .closing,[data-design=letter] .letter-bridge{padding-left:calc(210px + 6vw + var(--gutter))!important}}
@media(max-width:1000px){.page-nav{gap:18px;margin-right:10px}h1{font-size:clamp(42px,6.1vw,72px)}.hero-bottom{gap:30px}.process,.deep{grid-template-columns:1fr 1.6fr;gap:32px}.steps{gap:28px 20px}.request{gap:30px}.meta{font-size:12px}.section-heading h2{font-size:34px}[data-design=letter] .hero,[data-design=letter] .content-section{grid-template-columns:160px 1fr;gap:36px}[data-design=letter] .hero{padding-top:45px}[data-design=letter] .closing,[data-design=letter] .letter-bridge{padding-left:196px}[data-design=letter] h1{font-size:47px}[data-design=direct] .steps{grid-template-columns:1fr 1fr;gap:35px}[data-design=direct] .step-index{font-size:52px}.review-label{display:none}}
@media(max-width:700px){body{padding-bottom:64px}:root{--gutter:22px}#header{gap:8px;padding:16px 0}.wordmark{font-size:17px}.page-nav{display:none}.tools{gap:5px}.tools #language{padding-right:4px;font-size:13px}.tools button{min-width:32px}.hero{padding-top:26px}.memo-address{font-size:11px;line-height:1.65;margin-bottom:29px}.memo-address>div{gap:8px}.memo-address dt{width:28px}.hero h1{font-size:clamp(36px,7.5vw,54px);line-height:1.08;letter-spacing:-.05em;margin-bottom:24px}.hero-bottom{grid-template-columns:1fr;gap:22px}.lead{font-size:16px;line-height:1.6;max-width:44ch}.request{min-height:52px;padding:14px 20px;gap:50px}.meta{font-size:11px;margin-top:12px;max-width:100%}.form-note{font-size:11px}.read-on{margin-top:31px;padding:17px 0;font-size:11px}.content-section{padding:40px 0}.process,.deep{display:block}.section-heading{margin-bottom:27px}.section-heading h2{font-size:32px;max-width:20ch;margin-bottom:13px}.section-intro{max-width:40ch;margin-bottom:18px}.steps{gap:28px 22px}.step h3{font-size:19px}.step p{font-size:15px;line-height:1.65}.step-index{margin-bottom:15px}.privacy-note{margin-top:28px}.privacy-note p{font-size:13px}.deep .section-heading{margin-bottom:30px}.expand{font-size:13px}.disclosures summary{min-height:72px;font-size:17px;grid-template-columns:25px 1fr 14px;gap:10px;padding:20px 0}.detail-body>div{padding-left:35px;padding-right:5px}.detail-body p{font-size:16px}.closing{padding:40px 0}.closing h2{font-size:34px}.closing>p:not(.eyebrow){font-size:16px}.eyebrow{font-size:11px;margin-bottom:17px}#footer{grid-template-columns:1fr;gap:14px;padding:22px 0 30px}.design-switch{padding:7px 10px;gap:4px;justify-content:space-between}.design-switch a{padding:11px 13px;font-size:12px;gap:5px}.design-switch .all-directions{font-size:0;margin-right:0;padding:11px 8px}.design-switch .all-directions:before{content:'←';font-size:17px}.review-label{display:none}[data-design=direct] #header{padding:15px var(--gutter)}[data-design=direct] .hero{padding-top:26px}[data-design=direct] h1{font-size:clamp(39px,8.3vw,57px)!important;line-height:1.04;letter-spacing:-.06em;margin:22px 0 24px}[data-design=direct] .hero .eyebrow{max-width:34ch}[data-design=direct] .hero-bottom{grid-template-columns:1fr;gap:23px}[data-design=direct] .hero .lead{font-size:16px}[data-design=direct] .hero-baseline{font-size:10px;margin-top:26px;padding:20px 0;gap:10px}[data-design=direct] .process{padding-top:42px}[data-design=direct] .process .section-heading{display:block}[data-design=direct] .steps{gap:28px 22px;margin-top:28px}[data-design=direct] .step-index{font-size:42px;margin-bottom:17px;padding-top:17px}[data-design=direct] .quiet-section{padding:42px 0;grid-template-columns:1fr;gap:27px}[data-design=direct] .quiet-section h2{font-size:51px}[data-design=direct] .quiet-section p{font-size:16px;max-width:39ch}[data-design=direct] .closing{padding:40px var(--gutter)}[data-design=letter]{--gutter:24px}[data-design=letter] #header{padding-top:17px;padding-bottom:17px}[data-design=letter] .wordmark{font-size:20px}[data-design=letter] .hero{display:block;padding-top:26px;padding-bottom:32px}[data-design=letter] .letter-margin{display:none}[data-design=letter] .salutation{font-size:14px;margin-bottom:21px}[data-design=letter] .hero h1{font-size:clamp(37px,7.9vw,53px);line-height:1.13;letter-spacing:-.055em;margin-bottom:21px}[data-design=letter] .lead{font-size:17px;line-height:1.55;margin-bottom:19px}[data-design=letter] .request{font-size:17px;padding:10px 0;min-height:45px;gap:65px}[data-design=letter] .letter-bridge{padding:30px 0}[data-design=letter] .letter-bridge p{font-size:20px;line-height:1.6}[data-design=letter] .signature{font-size:11px}[data-design=letter] .content-section{padding:36px 0;display:block}[data-design=letter] .section-heading h2{max-width:20ch;font-size:32px}[data-design=letter] .section-intro{max-width:35ch;font-size:15px}[data-design=letter] .step h3{font-size:23px}[data-design=letter] .step p{font-size:16px}[data-design=letter] .step{grid-template-columns:25px 1fr;gap:12px}[data-design=letter] .privacy-note{margin-top:27px}[data-design=letter] summary{font-size:21px;min-height:76px}[data-design=letter] .detail-body p{font-size:17px}[data-design=letter] .closing{padding:36px 0}[data-design=letter] .closing h2{font-size:34px}}
@media(max-width:360px){:root{--gutter:18px}.tools{gap:1px}.wordmark{font-size:16px}.tools #language{font-size:12px}.tools button{min-width:29px}.memo-address{font-size:10px}.hero h1{font-size:34px}.steps{grid-template-columns:1fr}.design-switch a{padding:11px 10px}.design-switch a span{display:none}[data-design=direct] .steps{grid-template-columns:1fr}[data-design=direct] h1{font-size:36px!important}[data-design=letter]{--gutter:20px}[data-design=letter] .wordmark{font-size:18px}[data-design=letter] .hero h1{font-size:34px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.enhanced .reveal{opacity:1!important;transform:none!important}}@media print{.design-switch,.tools,.reading-line,.page-nav,.read-on{display:none}.reveal{opacity:1!important;transform:none!important}body{padding:0}.hero,.content-section{break-inside:avoid}#header{padding-top:10px}}
/* Keep the privacy promise and form expectations comfortably readable. */
.meta{font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.55;max-width:44ch}.form-note{font-size:12px}.signature{font-size:13px}.eyebrow{font-size:12px}.memo-address{font-size:14px}.read-on{font-size:12px}
[data-design=memo] .read-on{position:relative;border-top-color:transparent}[data-design=memo] .read-on:before{content:'';position:absolute;top:-1px;left:0;width:100%;height:1px;background:var(--line);transform-origin:left;animation:rule-in 1s .3s both}
[data-design=letter] .signature{font-size:13px}
@media(max-width:700px){.memo-address{font-size:12px}.meta{font-size:14px}.form-note{font-size:12px}.eyebrow{font-size:12px}.read-on{font-size:12px}[data-design=direct] .hero-baseline{font-size:11px}[data-design=letter] .signature{font-size:12px}}
@media(max-width:360px){.memo-address{font-size:12px}.memo-address dt{width:30px}}
.mobile-audience{display:none}.tools button:disabled{cursor:default;opacity:.5}@media(max-width:700px){[data-design=letter] .mobile-audience{display:block;font-family:'Courier New',monospace;max-width:38ch;font-size:11px;margin:0 0 18px}[data-design=letter] .salutation{margin-bottom:16px}}

/* Selected Memo page has no design-review toolbar. */
body{padding-bottom:0}
/* Memo refinements: a warm reading palette and a quiet MISD gold accent. */
:root{--misd-gold:#FFCB00}
.page-nav{text-transform:uppercase;letter-spacing:.065em}
.tools #language{letter-spacing:.06em}
.tools #warm{display:inline-flex;align-items:center;justify-content:center;position:relative}
.tools #warm[aria-pressed=true]:after{content:'';position:absolute;bottom:6px;left:50%;width:12px;height:1px;background:currentColor;transform:translateX(-50%)}
body.warm{--paper:#faf6ed;--ink:#241f17;--muted:#69604f;--line:#d6cebf;--faint:#f1eadc}
body.warm.inverse{--paper:#211e18;--ink:#f6ecd9;--muted:#c6bba7;--line:#534b3d;--faint:#2e281e}
body{transition:background-color .3s ease,color .3s ease}
.request{box-shadow:0 0 0 1px rgb(255 203 0 / .48),0 0 22px rgb(255 203 0 / .24);transition:padding .25s,background .2s,box-shadow .3s}
.request:hover,.request:focus-visible{box-shadow:0 0 0 1px var(--misd-gold),0 0 28px rgb(255 203 0 / .42),0 6px 16px rgb(255 203 0 / .16)}
@media print{.request{box-shadow:none}}
/* A quiet, breathing glow around the request action. */
.request{animation:gold-glow 4.8s ease-in-out infinite}
.request:hover,.request:focus-visible{animation:none}
@keyframes gold-glow{
  0%,100%{box-shadow:0 0 0 1px rgb(255 203 0 / .38),0 0 12px rgb(255 203 0 / .16)}
  50%{box-shadow:0 0 0 1px rgb(255 203 0 / .78),0 0 30px rgb(255 203 0 / .4),0 4px 16px rgb(255 203 0 / .12)}
}
.hero-rule{border:0;border-top:1px solid var(--ink);height:0;margin:48px 0 0}
.hero+.process{border-top:0}
@media(max-width:700px){.hero-rule{margin-top:32px}}
@media print{.request{animation:none;box-shadow:none}}
/* Instrument Sans site-wide, replacing the Arial body and Courier accents. Accents keep their tracking so the hierarchy survives. */
:root{font-family:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
.eyebrow,.meta,.form-note,.memo-address,.step-index,.detail-index,.read-on,.signature,.design-switch{font-family:inherit}
.eyebrow,.read-on{letter-spacing:.1em}.memo-address dt{text-transform:uppercase;font-size:12px;letter-spacing:.08em;padding-top:2px}.step-index,.detail-index{letter-spacing:.06em}
/* Sections read top-down: title → subtitle → content, instead of a heading column beside a content column. */
.hero-bottom,.process,.deep{display:block}
.hero-bottom .lead{margin-bottom:30px}
.section-heading{margin-bottom:36px}.section-heading h2{max-width:24ch;margin-bottom:16px}.section-intro{max-width:56ch;margin-bottom:0}.deep .section-heading .section-intro{margin-bottom:22px}
.privacy-note{grid-column:auto;margin-top:40px}
@media(max-width:1000px){.process,.deep{display:block}}
/* Full-round buttons. Icons are collapsed at rest and slide in on hover/focus, so the button visibly grows. */
.request,.expand,.tools button,.nav-cta,.page-nav a,.nav-back{border-radius:999px}
.request{justify-content:flex-start;gap:0;padding:16px 26px}
.request:hover,.request:focus-visible{padding-left:26px;padding-right:26px}
.request .arrow,.expand span,.nav-cta .arrow{display:inline-block;max-width:0;opacity:0;margin-left:0;overflow:hidden;transform:translateX(-6px);transition:max-width .25s ease-out,opacity .2s ease-out,margin-left .25s ease-out,transform .25s ease-out}
.request:hover .arrow,.request:focus-visible .arrow,.nav-cta:hover .arrow,.nav-cta:focus-visible .arrow{max-width:1.4em;opacity:1;margin-left:14px;transform:translateX(0)}
.expand{border:1px solid var(--ink);padding:10px 18px;gap:0;line-height:1.3}
.expand:hover span,.expand:focus-visible span{max-width:1em;opacity:1;margin-left:12px;transform:translateX(0)}
.nav-back .arrow{display:inline-block;max-width:0;opacity:0;margin-right:0;overflow:hidden;transform:translateX(6px);transition:max-width .25s ease-out,opacity .2s ease-out,margin-right .25s ease-out,transform .25s ease-out}
.nav-back:hover .arrow,.nav-back:focus-visible .arrow{max-width:1em;opacity:1;margin-right:8px;transform:translateX(0)}
/* Condensing sticky nav. Sticky (not fixed) floats below the top edge; past 140px it pulls into a blurred pill and the wordmark wipes away, expanding again under 90px. State lives on the static #header so re-rendering its innerHTML keeps it. */
html{scroll-padding-top:96px}
.skip{z-index:50}
#header{position:sticky;top:12px;z-index:40;display:block;margin:12px 0 0;padding:0 var(--gutter);border:0;gap:0}
.nav__bar{margin-inline:auto;max-width:100%;border:1px solid var(--line);border-radius:20px;background:var(--paper);box-shadow:0 10px 30px -18px rgb(0 0 0/.25);transition:max-width .24s ease-out,border-radius .24s ease-out,background-color .24s ease-out,box-shadow .24s ease-out}
.nav__row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:12px 22px;transition:padding .24s ease-out}
#header[data-condensed=true] .nav__bar{max-width:1080px;border-radius:999px;background:var(--paper);background:color-mix(in srgb,var(--paper) 86%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 16px 44px -18px rgb(0 0 0/.42)}
#header[data-condensed=true] .nav__row{padding:8px 18px}
.nav__left{display:flex;align-items:center;gap:4px;min-width:0}
.page-nav{display:flex;gap:2px;margin:0;font-size:12px}
.page-nav a,.nav-back{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;text-decoration:none;white-space:nowrap;transition:background-color .2s}
.page-nav a:hover,.page-nav a:focus-visible,.nav-back:hover,.nav-back:focus-visible{text-decoration:none;background:var(--faint)}
.nav-back{font-size:13px}
.brand{display:inline-flex;align-items:center;gap:9px;justify-self:center;min-height:38px;text-decoration:none;color:inherit;transition:gap .24s ease-out}
.brand .emblem{display:block;width:22px;height:22px;flex:none;color:var(--ink)}
.brand .word{font-size:19px;font-weight:600;letter-spacing:-.03em;white-space:nowrap;display:inline-block;overflow:hidden;max-width:180px;opacity:1;clip-path:inset(0 0 0 0);transition:max-width .24s ease-out,opacity .19s ease-out,clip-path .19s ease-out}
#header[data-condensed=true] .brand{gap:0}
#header[data-condensed=true] .brand .word{max-width:0;opacity:0;clip-path:inset(0 0 0 100%);transition:max-width .24s ease-out,opacity .19s ease-out,clip-path .19s ease-out .06s}
.nav__right{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0}
.tools{gap:2px}
.tools button,.tools #language,.tools #theme,.tools #warm{width:38px;min-width:38px;height:38px;min-height:38px;padding:0;font-size:13px;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;transition:background-color .2s,border-color .2s}
.tools #theme{font-size:17px}
.tools button:hover,.tools button:focus-visible{opacity:1;background:var(--faint)}
.tools #warm[aria-pressed=true]{border-color:var(--line)}.tools #warm[aria-pressed=true]:after{bottom:7px}
.nav-cta{display:inline-flex;align-items:center;min-height:38px;padding:0 16px;margin-left:6px;background:var(--ink);color:var(--paper);text-decoration:none;font-size:13px;font-weight:500;white-space:nowrap;box-shadow:0 0 0 1px rgb(255 203 0/.45);transition:padding .24s ease-out,font-size .24s ease-out,min-height .24s ease-out,box-shadow .3s}
.nav-cta:hover,.nav-cta:focus-visible{box-shadow:0 0 0 1px var(--misd-gold),0 0 18px rgb(255 203 0/.35)}
.nav-cta .arrow{font-size:16px}
#header[data-condensed=true] .nav-cta{padding:0 13px;font-size:12.5px;min-height:34px}
@media(max-width:700px){#header{top:8px;margin-top:8px;padding:0 var(--gutter);gap:0}.nav__row{display:flex;justify-content:space-between;gap:8px;padding:8px 10px 8px 12px}.nav__left{display:none}#header[data-condensed=true] .nav__row{padding:6px 8px 6px 10px}.brand .word{font-size:17px;max-width:150px}.nav-cta,.nav-back,.page-nav{display:none}.tools{gap:0}.tools button{width:36px;min-width:36px;height:36px;min-height:36px}.tools #language{font-size:12px}}
@media print{#header{position:static}.nav__bar{box-shadow:none;border:0;border-radius:0;border-bottom:1px solid var(--ink)}.nav-cta,.tools{display:none}}
/* The theme lives on <html> as well as <body>. A tiny inline script in each page's <head> puts .inverse/.warm on <html> from the URL before the first paint, so the canvas, the root and the body carry the theme color from the first frame in every browser: no white stripe above the sticky header's top margin and no light flash on load. The body.* rules below stay for the toggles. */
:root{background:var(--paper);transition:background-color .3s ease}
:root.inverse{--paper:#141414;--ink:#fff;--muted:#b8b8b8;--line:#484848;--faint:#222}
:root.warm{--paper:#faf6ed;--ink:#241f17;--muted:#69604f;--line:#d6cebf;--faint:#f1eadc}
:root.warm.inverse{--paper:#211e18;--ink:#f6ecd9;--muted:#c6bba7;--line:#534b3d;--faint:#2e281e}
/* Join-the-team section on the landing page (03), between the details and the closing. */
.join-section .action{margin-top:0}
.join-section .section-intro{max-width:56ch}
.join-section .meta{margin-top:14px}
/* Footer version line: v.Name.YYYY.MM.DD.commit (dist/version.js + build.js). It spans the footer grid as a last row. The name is a button; hovering or focusing it, or tapping it on a touch screen (.open), shows the "Version Names" tooltip above it (the footer sits at the page bottom, so it opens upward). The tooltip's bottom padding bridges the gap so the pointer can move up into it. */
.version{grid-column:1/-1;position:relative;font-size:12px;line-height:1.7;color:var(--muted)}
.version-string{font-variant-numeric:tabular-nums;letter-spacing:.01em;white-space:nowrap}
.version-name{border:0;background:none;padding:0;min-height:0;font:inherit;color:inherit;text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:4px;cursor:help;transition:color .2s}
.version-name:hover,.version-name:focus-visible,.version.open .version-name{color:var(--ink)}
.version-tip{position:absolute;left:0;bottom:100%;z-index:5;width:min(380px,calc(100vw - 2*var(--gutter)));padding-bottom:10px;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .15s,transform .15s,visibility .15s;pointer-events:none}
.version:has(.version-name:hover) .version-tip,.version:not(.dismissed):has(.version-name:focus-visible) .version-tip,.version.open .version-tip,.version-tip:hover{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.version-tip-box{display:block;background:var(--paper);color:var(--ink);border:1px solid var(--ink);padding:14px 16px 15px;font-size:12.5px;line-height:1.55;box-shadow:0 10px 30px rgba(0,0,0,.09)}
.version-tip-title{display:block;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.version-tip-text{display:block;color:var(--muted)}
.version-tip-text+.version-tip-text{margin-top:8px}
.version-tip-text strong{color:var(--ink);font-weight:500}
.version-tip-build{font-size:11.5px}
@media(max-width:700px){.version{font-size:11px}.version-tip-box{padding:12px 13px 13px}}
/* Toolbar toggle icons, driven by the theme classes on <html> so the icon always matches the state (set pre-paint by the head script, no flash, no JS needed to swap them). Theme toggle: the moon shows in light mode (a click gives you dark), the sun shows in dark mode. Warm toggle: the sunglasses wear golden lenses normally (the tint you'd put on) and clear lenses once warm mode is on. */
.tools .tool-icon{display:block}
#theme .icon-sun{display:none}
:root.inverse #theme .icon-moon{display:none}
:root.inverse #theme .icon-sun{display:block}
#warm .lens{fill:var(--misd-gold,#ffcb00)}
:root.warm #warm .lens{fill:none}
/* Mobile hamburger menu (landing page only — the form pages carry a single back link and an in-page one). On <=700px the left page-nav is replaced by a toggle that drops a panel of the same links (plus Request items) below the nav bar. The links reuse the .join-cta/.contact-cta/.nav-cta classes so controls() keeps their hrefs (language, theme, district) in sync with the desktop nav. */
.nav__bar{position:relative}
.nav-toggle{display:none}
.nav-toggle .nav-ico{display:block}
.nav-toggle .nav-ico-close{display:none}
.nav-toggle[aria-expanded=true] .nav-ico-open{display:none}
.nav-toggle[aria-expanded=true] .nav-ico-close{display:block}
.nav-menu{display:none}
@media(max-width:700px){
  .nav__left:has(.nav-toggle){display:flex}
  .nav__left .page-nav{display:none}
  /* The brand emblem is itself a three-bar glyph; hide it beside the hamburger so the two do not read as duplicate menu icons. The wordmark still carries the brand and the home link. */
  #header:has(.nav-toggle) .brand .emblem{display:none}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;min-width:38px;height:38px;min-height:38px;padding:0;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--ink);cursor:pointer;transition:background-color .2s,border-color .2s}
  .nav-toggle:hover,.nav-toggle:focus-visible{background:var(--faint)}
  .nav-toggle[aria-expanded=true]{background:var(--faint)}
  .nav-menu:not([hidden]){display:flex;flex-direction:column;gap:2px;position:absolute;top:calc(100% + 8px);left:0;right:0;padding:8px;background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 44px -18px rgb(0 0 0/.5);z-index:50}
  .nav-menu a{display:flex;align-items:center;min-height:46px;padding:0 15px;border-radius:12px;text-decoration:none;font-size:15px;color:inherit;white-space:nowrap}
  .nav-menu a:hover,.nav-menu a:focus-visible{background:var(--faint)}
  .nav-menu .nav-cta{margin:4px 0 0;background:var(--ink);color:var(--paper);font-weight:500}
  .nav-menu .nav-cta:hover,.nav-menu .nav-cta:focus-visible{background:var(--ink);box-shadow:0 0 0 1px var(--misd-gold),0 0 18px rgb(255 203 0/.35)}
}

/* ==========================================================================
   Clay + bento (Oct 2026). Every page sits on one page color; content lives in
   clay tiles on a 12-column bento grid. Tiles sit flush with the page: their
   depth comes only from inner shading (light inside the top-left edge, shade
   inside the bottom-right), never a drop shadow, so nothing floats. "Pressed"
   surfaces (inputs, chosen options, notices, "Coming next") are the inverse.
   One spacing scale: --gap between tiles, --pad inside a tile, --stack between
   items in a tile. Four palettes follow the theme classes on <html> and <body>.
   ========================================================================== */
:root,body{
  --paper:#e8ebf3;--ink:#1b2130;--text:#2f3748;--muted:#566074;--line:rgba(27,33,48,.12);--faint:rgba(27,33,48,.06);
  --tile:#f7f8fc;--tile-gold:#ffe6a0;--tile-sky:#dbe5ff;--tile-mint:#d3f0e5;--tile-peach:#ffdccd;
  --clay-hi:rgba(255,255,255,.80);--clay-lo:rgba(60,70,110,.14);
  --press-lo:rgba(92,102,140,.20);--press-hi:rgba(255,255,255,.95);
  --lift:rgba(27,33,48,.45);--lift-soft:rgba(92,102,140,.20);
}
:root.warm,body.warm{
  --paper:#efe9de;--ink:#241f17;--text:#3a3326;--muted:#69604f;--line:rgba(36,31,23,.12);--faint:rgba(36,31,23,.06);
  --tile:#faf6ee;--tile-gold:#fde0a0;--tile-sky:#e6e2f2;--tile-mint:#dcebd6;--tile-peach:#fbd5c2;
  --clay-hi:rgba(255,255,255,.75);--clay-lo:rgba(110,90,50,.16);
  --press-lo:rgba(120,100,60,.22);--press-hi:rgba(255,255,255,.85);
  --lift:rgba(36,31,23,.45);--lift-soft:rgba(120,100,60,.20);
}
:root.inverse,body.inverse{
  --paper:#14161c;--ink:#eef1f6;--text:#d3d8e2;--muted:#a3abba;--line:rgba(255,255,255,.10);--faint:rgba(255,255,255,.06);
  --tile:#1f222a;--tile-gold:#3a3120;--tile-sky:#1f2840;--tile-mint:#182e27;--tile-peach:#3a2620;
  --clay-hi:rgba(255,255,255,.06);--clay-lo:rgba(0,0,0,.45);
  --press-lo:rgba(0,0,0,.55);--press-hi:rgba(255,255,255,.05);
  --lift:rgba(0,0,0,.6);--lift-soft:rgba(0,0,0,.35);
}
:root.warm.inverse,body.warm.inverse{
  --paper:#1a1712;--ink:#f6ecd9;--text:#e3d8c3;--muted:#c6bba7;--line:rgba(246,236,217,.10);--faint:rgba(246,236,217,.06);
  --tile:#25211a;--tile-gold:#3d311a;--tile-sky:#2a2734;--tile-mint:#20291c;--tile-peach:#3a251b;
  --clay-hi:rgba(255,240,210,.06);--clay-lo:rgba(0,0,0,.45);
  --press-lo:rgba(0,0,0,.55);--press-hi:rgba(255,240,210,.05);
  --lift:rgba(0,0,0,.6);--lift-soft:rgba(0,0,0,.35);
}
:root{--gap:20px;--pad:32px;--stack:16px;--radius:32px;--wrap:1180px}
:root,body{
  --shadow-clay:inset 9px 9px 18px var(--clay-hi),inset -9px -9px 18px var(--clay-lo);
  --shadow-press:inset 9px 9px 18px var(--press-lo),inset -9px -9px 18px var(--press-hi);
  --shadow-press-sm:inset 3px 3px 6px var(--press-lo),inset -3px -3px 6px var(--press-hi);
  --shadow-chip:3px 4px 8px var(--lift-soft),inset -2px -2px 4px var(--clay-lo),inset 2px 2px 4px var(--clay-hi);
}
@media(max-width:600px){:root{--gap:16px;--pad:24px;--radius:28px}}

/* Header: the existing condensing nav, as a flush clay pill the width of the grid. */
.nav__bar,.form-page .nav__bar{max-width:var(--wrap);border:0;border-radius:999px;background:var(--tile);box-shadow:var(--shadow-clay)}
#header[data-condensed=true] .nav__bar{max-width:var(--wrap);background:var(--tile);background:color-mix(in srgb,var(--tile) 90%,transparent);box-shadow:var(--shadow-clay)}
.nav__row{padding:10px 10px 10px 14px}
#header[data-condensed=true] .nav__row{padding:8px 8px 8px 12px}
.nav-cta,.nav-menu .nav-cta{background:var(--ink);color:var(--paper);min-height:40px;box-shadow:inset 0 -3px 6px rgba(0,0,0,.28),inset 0 2px 4px rgba(255,255,255,.16)}
.nav-cta:hover,.nav-cta:focus-visible,.nav-menu .nav-cta:hover,.nav-menu .nav-cta:focus-visible{background:var(--ink);box-shadow:inset 0 -3px 6px rgba(0,0,0,.28),inset 0 2px 4px rgba(255,255,255,.16)}
.nav-menu:not([hidden]){background:var(--tile);border:0;border-radius:24px;box-shadow:var(--shadow-clay),0 18px 40px -18px var(--lift)}

/* Buttons. Primary: a dark clay pill with its arrow showing. Secondary: a light clay pill. */
.request{animation:none;display:inline-flex;align-items:center;justify-content:flex-start;gap:0;min-height:48px;padding:0 22px;border:0;border-radius:999px;
  background:var(--ink);color:var(--paper);font-size:15px;font-weight:500;line-height:1;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;
  box-shadow:0 10px 20px -8px var(--lift),inset 0 -3px 6px rgba(0,0,0,.28),inset 0 2px 4px rgba(255,255,255,.16);transition:transform .2s ease}
.request:hover,.request:focus-visible{padding:0 22px;transform:translateY(-2px);box-shadow:0 10px 20px -8px var(--lift),inset 0 -3px 6px rgba(0,0,0,.28),inset 0 2px 4px rgba(255,255,255,.16)}
.request .arrow,.request:hover .arrow,.request:focus-visible .arrow{max-width:none;opacity:1;margin-left:10px;font-size:17px;transform:none;transition:transform .2s ease}
.request:hover .arrow,.request:focus-visible .arrow{transform:translateX(3px)}
.btn-light,.expand{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border:0;border-radius:999px;background:var(--tile);color:var(--ink);
  font:inherit;font-size:15px;font-weight:500;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:6px 8px 16px var(--lift-soft),inset -3px -3px 6px var(--clay-lo),inset 3px 3px 6px var(--clay-hi);transition:transform .2s ease}
.btn-light:hover,.btn-light:focus-visible,.expand:hover,.expand:focus-visible{transform:translateY(-2px)}
.expand span,.expand:hover span,.expand:focus-visible span{max-width:none;opacity:1;margin-left:0;transform:none}
@media(prefers-reduced-motion:reduce){.request:hover,.request:focus-visible,.btn-light:hover,.expand:hover{transform:none}}

/* The bento grid and its tiles. */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);width:min(var(--wrap),calc(100% - 2*var(--gutter)));margin:var(--gap) auto 0}
.tile{position:relative;display:flex;flex-direction:column;gap:var(--stack);min-width:0;padding:var(--pad);border-radius:var(--radius);background:var(--tile);color:var(--ink);box-shadow:var(--shadow-clay)}
.tile.gold{background:var(--tile-gold)}.tile.sky{background:var(--tile-sky)}.tile.mint{background:var(--tile-mint)}.tile.peach{background:var(--tile-peach)}
.tile.press{background:var(--paper);box-shadow:var(--shadow-press)}
.tile>*,.tile h1,.tile h2,.tile h3,.tile p{margin:0}
.tile h1{font-size:clamp(40px,5vw,64px);font-weight:500;line-height:1.06;letter-spacing:-.055em;max-width:none;text-wrap:balance}
.tile h2{font-size:clamp(26px,2.4vw,34px);font-weight:500;line-height:1.15;letter-spacing:-.045em;max-width:none;text-wrap:balance}
.tile h3{font-size:20px;font-weight:500;line-height:1.25;letter-spacing:-.025em}
.tile .eyebrow{font-size:12px;font-weight:400;line-height:1.6;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tile .lead{font-size:18px;line-height:1.6;max-width:44ch;text-wrap:pretty}
.tile .copy{font-size:16px;line-height:1.6;max-width:52ch;color:var(--text);text-wrap:pretty}
.tile .copy.lg{font-size:18px}
.tile .note{font-size:13px;line-height:1.5;color:var(--muted)}
.tile .end{margin-top:auto;padding-top:var(--stack);display:flex;align-items:center;gap:var(--stack);flex-wrap:wrap}
.tile .statement{font-size:clamp(21px,2vw,26px);font-weight:500;line-height:1.35;letter-spacing:-.03em;text-wrap:pretty}
.tile-top{display:flex;align-items:center;justify-content:space-between;gap:var(--stack)}
.chip{font-size:11px;font-weight:600;line-height:1;text-transform:uppercase;letter-spacing:.08em;color:#4a3a00;background:#ffcb00;padding:6px 12px;border-radius:999px;
  box-shadow:inset -2px -2px 4px rgba(120,90,0,.20),inset 2px 2px 4px rgba(255,255,255,.55)}
.group{display:flex;flex-direction:column;gap:8px}
.items{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.items li{font-size:13px;font-weight:500;line-height:1;padding:9px 12px;border-radius:999px;color:var(--ink);background:color-mix(in srgb,var(--tile) 72%,transparent);box-shadow:var(--shadow-chip)}
.fact-n{font-size:clamp(38px,3.6vw,52px);font-weight:500;line-height:1;letter-spacing:-.055em;font-variant-numeric:tabular-nums}
.fact-l{font-size:15px;line-height:1.5;color:var(--text);max-width:24ch}
.tile.fact{gap:8px}

/* Hero tile: copy on the left, the three-bar mark as clay bars on the right; the action sits at the bottom so it lines up with the tile beside it. */
.t-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--stack) var(--pad);align-content:stretch;align-items:start}
.t-hero .stack{display:flex;flex-direction:column;gap:var(--stack);min-width:0;align-self:stretch}
.t-hero .end{margin-top:auto}
.clay-mark{display:flex;flex-direction:column;gap:12px;width:140px;flex:none;transform:rotate(-6deg);margin:8px 8px 0 0}
.clay-mark i{display:block;height:28px;border-radius:14px;box-shadow:6px 8px 14px var(--lift-soft),inset -3px -4px 7px rgba(0,0,0,.08),inset 3px 4px 7px rgba(255,255,255,.75)}
.clay-mark i:nth-child(1){width:100%;background:#ffcb00}
.clay-mark i:nth-child(2){width:70%;background:#9db6ff}
.clay-mark i:nth-child(3){width:100%;background:#7fd8b9}

/* Footer: plain text under the grid, aligned with the text inside the tiles. */
body #footer,body.form-page #footer{width:min(var(--wrap),calc(100% - 2*var(--gutter)))!important;max-width:none!important;margin:0 auto!important;
  padding:var(--gap) var(--pad) 40px!important;border-top:0;gap:8px 32px;font-size:12px}
.version-tip-box{background:var(--tile);border:0;border-radius:18px;box-shadow:var(--shadow-clay),0 18px 40px -18px var(--lift)}
@media(max-width:600px){body #footer,body.form-page #footer{padding:var(--gap) 8px 32px!important}}

/* Accordions inside a tile. */
.tile .disclosures{border-top:0}
.tile details{border-bottom:1px solid var(--line)}
.tile details:last-child{border-bottom:0}
.tile summary{min-height:72px;padding:20px 0;font-size:18px;line-height:1.35}
.tile .detail-body>div{padding:0 8px 24px 44px}
.tile .detail-body p{color:var(--text)}

.btn-light .arrow{display:inline-block;font-size:17px;transition:transform .2s ease}
.btn-light:hover .arrow,.btn-light:focus-visible .arrow{transform:translateX(3px)}

/* Home (/): 8|4, 6|6, 4|4|4, 8|4. Ready to Learn and "Coming next" share the right-hand column. */
.h-hero,.h-involve{grid-column:span 8}
.h-rtl,.h-soon,.h-fact{grid-column:span 4}
.h-mission,.h-do{grid-column:span 6}
.h-soon{align-items:center;justify-content:center;text-align:center}
.h-soon .copy{max-width:22ch;color:var(--muted)}
@media(max-width:920px){.h-hero,.h-rtl{grid-column:span 12}.h-do .copy.lg{font-size:16px}}
@media(max-width:600px){
  .h-mission,.h-do,.h-involve,.h-soon{grid-column:span 12}
  .tile.fact{grid-column:span 12;flex-direction:row;align-items:center;gap:var(--stack)}
  .tile.fact .fact-n{flex:none;width:64px;font-size:36px}
  .t-hero{grid-template-columns:1fr}
  .t-hero .clay-mark{order:-1;width:84px;gap:8px;margin:0}
  .t-hero .clay-mark i{height:18px;border-radius:9px}
  .tile .lead{font-size:16px}
}

/* Ready to Learn (/ready-to-learn/): hero 8 | request 4; "How it works" 4 (two rows) | steps 2×2 (the privacy rule pressed into the bottom of the "How it works" tile); details heading 4 | accordion 8; join 6 | closing 6. */
.p-hero{grid-column:span 8}.p-ask{grid-column:span 4}
.p-how{grid-column:span 4;grid-row:span 2}.p-step{grid-column:span 4}
.press-note{margin:0;padding:16px 18px;border-radius:20px;font-size:15px;font-weight:500;line-height:1.5;color:var(--ink);box-shadow:inset 5px 5px 10px var(--press-lo),inset -5px -5px 10px var(--press-hi)}
.p-details-head{grid-column:span 4}.p-details{grid-column:span 8;padding-block:8px}
.p-join,.p-close{grid-column:span 6}
.p-times{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--stack)}
.p-times li{display:flex;flex-direction:column;gap:2px}
.p-times strong{font-size:22px;font-weight:500;line-height:1.2;letter-spacing:-.03em}
.p-times span{font-size:14px;line-height:1.5;color:var(--text)}
.step-n{font-size:clamp(30px,2.6vw,38px);font-weight:500;line-height:1;letter-spacing:-.05em;color:var(--muted)}
.p-hero .headline-line{display:block}
@media(max-width:920px){.p-hero,.p-ask,.p-details-head,.p-details{grid-column:span 12}.p-how{grid-column:span 12;grid-row:auto}.p-step{grid-column:span 6}}
@media(max-width:600px){.p-step,.p-join,.p-close{grid-column:span 12}}