@charset "UTF-8";
/* EduSync revamp mockup (9 Oct 2026)
   Thesis: the school office, calmly in order.
   Photography carries the people; the interface stays quiet and exact.
   Tokens are the approved set (paper / board green / brass), AA in both themes. */

:root{
  --paper:#F3F5F0; --surface:#FFFFFF; --surface-2:#E9EDE6; --surface-3:#DFE5DB;
  --ink:#151B18; --ink-2:#434E46; --ink-3:#5A655D;
  --line:#D6DCD2; --line-2:#BFC8BA;
  --brass:#9E6716; --brass-ink:#7A4E0F; --brass-soft:#F4E8D3;
  --board:#1D4A3F; --board-ink:#FFFFFF; --board-soft:#DCE8E2;
  --good:#2C6A43; --good-soft:#DCEADF;
  --crit:#A03B26; --crit-soft:#F6DFD9;
  --slip:#FBFAF3; --slip-ink:#1A211D; --slip-line:#C9CFC2;
  --shadow:0 1px 2px rgba(21,27,24,.06), 0 10px 28px -14px rgba(21,27,24,.22);
  --shadow-lg:0 2px 6px rgba(21,27,24,.08), 0 28px 64px -28px rgba(21,27,24,.34);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --r:4px; --r-lg:8px; --tap:44px;
  --gut:20px;
  --sec:clamp(56px,8vw,104px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0E1210; --surface:#161C19; --surface-2:#1D2521; --surface-3:#27312B;
    --ink:#E6EBE4; --ink-2:#B0BAB2; --ink-3:#8F9A92; --line:#29322D; --line-2:#3E4942;
    --brass:#D9A155; --brass-ink:#F0C98A; --brass-soft:#2E2419;
    --board:#8FC4B3; --board-ink:#0E1210; --board-soft:#1B2A25;
    --good:#7FBE93; --good-soft:#18261C; --crit:#E08A73; --crit-soft:#2C1B16;
    --slip:#1A221E; --slip-ink:#E6EBE4; --slip-line:#3A453E;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.6);
    --shadow-lg:0 2px 6px rgba(0,0,0,.5), 0 28px 64px -28px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0E1210; --surface:#161C19; --surface-2:#1D2521; --surface-3:#27312B;
  --ink:#E6EBE4; --ink-2:#B0BAB2; --ink-3:#8F9A92; --line:#29322D; --line-2:#3E4942;
  --brass:#D9A155; --brass-ink:#F0C98A; --brass-soft:#2E2419;
  --board:#8FC4B3; --board-ink:#0E1210; --board-soft:#1B2A25;
  --good:#7FBE93; --good-soft:#18261C; --crit:#E08A73; --crit-soft:#2C1B16;
  --slip:#1A221E; --slip-ink:#E6EBE4; --slip-line:#3A453E;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.6);
  --shadow-lg:0 2px 6px rgba(0,0,0,.5), 0 28px 64px -28px rgba(0,0,0,.8);
  color-scheme:dark;
}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.14;margin:0;text-wrap:balance;letter-spacing:-.012em}
h1{font-size:clamp(34px,5.6vw,62px);letter-spacing:-.026em;line-height:1.04}
h2{font-size:clamp(26px,3.6vw,40px);letter-spacing:-.02em}
h3{font-size:clamp(18px,1.9vw,21px)}
h1 em,h2 em{font-style:italic;color:var(--brass-ink);font-weight:500}
p{margin:0;text-wrap:pretty}
img{max-width:100%;height:auto;display:block}
a{color:var(--brass-ink);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--brass);outline-offset:3px;border-radius:3px}
ul,ol{margin:0;padding:0}
figure{margin:0}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--board);color:var(--board-ink);padding:12px 18px;font-weight:700}
.skip:focus{left:8px;top:8px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:760px}
@media (min-width:760px){:root{--gut:32px}}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.eyebrow{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-3);margin-bottom:14px}
.lede{font-size:clamp(17px,1.6vw,19px);color:var(--ink-2);max-width:60ch;line-height:1.6}
.small{font-size:14px;color:var(--ink-2)}
.hint{font-size:13px;color:var(--ink-3);line-height:1.5}
.tag{display:inline-block;font:700 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border-radius:2px;background:var(--brass-soft);color:var(--brass-ink);vertical-align:middle}
.tag--ok{background:var(--good-soft);color:var(--good)}
.tag--info{background:var(--board-soft);color:var(--board)}

/* Header */
.topbar{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:12px;min-height:68px}
.wordmark{display:inline-flex;align-items:center;gap:9px;font:600 24px/1 var(--serif);letter-spacing:-.01em;color:var(--ink);text-decoration:none;min-height:var(--tap)}
.wordmark svg{width:22px;height:22px;color:var(--brass)}
.wordmark b{color:var(--brass);font-weight:600}
.nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.nav a:not(.btn){display:inline-flex;align-items:center;min-height:var(--tap);padding:0 12px;font-size:14.5px;font-weight:600;color:var(--ink-2);text-decoration:none;border-radius:var(--r)}
.nav a:not(.btn):hover{color:var(--ink);background:var(--surface-2)}
.nav a[aria-current="page"]:not(.btn){color:var(--brass-ink);box-shadow:inset 0 -3px 0 var(--brass);border-radius:0}
.nav .btn{margin-left:8px}
.iconbtn.navtoggle{display:none;margin-left:auto}
.iconbtn{display:inline-grid;place-items:center;width:var(--tap);height:var(--tap);border:1px solid var(--line-2);border-radius:var(--r);background:transparent;color:var(--ink-2);cursor:pointer;font:inherit}
.iconbtn:hover{border-color:var(--brass);color:var(--brass-ink)}
.iconbtn svg{width:20px;height:20px}
.theme-btn .moon{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .moon{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-btn .sun{display:none}:root:not([data-theme="light"]) .theme-btn .moon{display:block}}
@media (max-width:960px){
  .iconbtn.navtoggle{display:inline-grid}
  .topbar .theme-btn{margin-left:0}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--surface);border-bottom:1px solid var(--line);padding:8px var(--gut) 16px;box-shadow:var(--shadow)}
  .nav.open{display:flex}
  .nav a:not(.btn){padding:0 4px;border-bottom:1px solid var(--line);border-radius:0}
  .nav a[aria-current="page"]:not(.btn){box-shadow:inset 3px 0 0 var(--brass);padding-left:12px}
  .nav .btn{margin:12px 0 0}
}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:10px 22px;border-radius:var(--r);border:1px solid transparent;background:var(--board);color:var(--board-ink);font:700 15px/1.2 var(--sans);text-decoration:none;cursor:pointer;transition:filter .15s,border-color .15s,background .15s}
.btn:hover{filter:brightness(1.1);text-decoration:none}
.btn--brass{background:var(--brass);color:#fff}
:root[data-theme="dark"] .btn--brass{color:#0E1210}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn--brass{color:#0E1210}}
.btn--ghost{background:transparent;border-color:var(--line-2);color:var(--ink)}
.btn--ghost:hover{border-color:var(--brass);filter:none;background:var(--surface)}
.btn--wide{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btnrow{display:flex;flex-wrap:wrap;gap:12px}

/* Sections */
.sec{padding:var(--sec) 0;border-bottom:1px solid var(--line)}
.sec--tint{background:var(--surface)}
.sec--flush{padding-top:0}
.sechead{max-width:720px;margin-bottom:clamp(28px,4vw,48px)}
.sechead h2{margin-bottom:14px}
.split{display:grid;gap:clamp(28px,5vw,72px);align-items:center}
@media (min-width:900px){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .split--rev > :first-child{order:2}
  .split--wide{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .split--phone{grid-template-columns:minmax(0,1fr) 300px}
  .split--phone.split--rev{grid-template-columns:300px minmax(0,1fr)}
  .split--phones{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
  .split--top{align-items:start}
}
.stack > * + *{margin-top:18px}
.stack-lg > * + *{margin-top:28px}
.checks{list-style:none;display:grid;gap:12px}
.checks li{position:relative;padding-left:30px;color:var(--ink-2)}
.checks li::before{content:"";position:absolute;left:0;top:.38em;width:16px;height:9px;border-left:3px solid var(--good);border-bottom:3px solid var(--good);transform:rotate(-45deg) scale(.9);transform-origin:center}
.checks li b{color:var(--ink)}

/* Photography: natural light, board-green left rule, no overlays */
.ph{position:relative;border-left:4px solid var(--board);border-radius:0 var(--r-lg) var(--r-lg) 0;overflow:hidden;background:var(--surface-3);box-shadow:var(--shadow)}
.ph img{width:100%;height:auto}
.ph figcaption{padding:10px 14px;font-size:13px;color:var(--ink-3);background:var(--surface);border-top:1px solid var(--line)}
.ph--plain{border-left:0;border-radius:var(--r-lg)}
.ph--cap{max-width:360px}
.ph--sq{max-width:520px}

/* Phone frame (real screenshots of the app mockup) */
.phone{margin-inline:auto;width:min(272px,100%);border:1px solid var(--line-2);border-radius:34px;padding:10px;background:var(--surface-2);box-shadow:var(--shadow-lg)}
.phone img{border-radius:25px;width:100%;height:auto;background:var(--surface)}
.phone figcaption{text-align:center;font-size:12.5px;color:var(--ink-3);padding:10px 4px 2px}
.phones{display:flex;gap:20px;justify-content:center;align-items:flex-start;flex-wrap:wrap}
.phones .ph{flex:0 1 280px}
.phones .phone{flex:0 1 250px;margin-inline:0}
.phones .phone:nth-child(2){margin-top:34px}
@media (max-width:640px){.phones .phone:nth-child(2){margin-top:0}}

/* Hero */
.hero{padding:clamp(36px,6vw,72px) 0 clamp(36px,5vw,64px);border-bottom:1px solid var(--line)}
.hero-grid{display:grid;gap:clamp(28px,4vw,56px);align-items:center}
@media (min-width:1000px){.hero-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.hero h1{margin-bottom:20px}
.hero .lede{margin-bottom:28px}
.doors{display:grid;gap:12px}
.door{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;min-height:76px;padding:14px 18px 14px 20px;background:var(--surface);border:1px solid var(--line-2);border-left:4px solid var(--board);border-radius:0 var(--r) var(--r) 0;color:var(--ink);text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.door + .door{border-left-color:var(--brass)}
.door:hover{box-shadow:var(--shadow);border-color:var(--brass);text-decoration:none}
.door .t{display:block;font:600 22px/1.2 var(--serif)}
.door .s{display:block;font-size:13.5px;color:var(--ink-3);margin-top:2px}
.door svg{width:22px;height:22px;color:var(--brass-ink)}
.hero .ph img{aspect-ratio:16/9;object-fit:cover}

/* The send slip: the signature. A receipt, priced before you press send. */
.slipband{padding:var(--sec) 0;border-bottom:1px solid var(--line);background:var(--surface-2)}
.slipgrid{display:grid;gap:clamp(28px,5vw,64px);align-items:start}
@media (min-width:960px){.slipgrid{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.slip{position:relative;background:var(--slip);color:var(--slip-ink);padding:28px clamp(18px,3vw,32px) 30px;box-shadow:var(--shadow-lg);font-family:var(--mono);font-size:14px;line-height:1.5;max-width:560px;width:100%}
.slip::before,.slip::after{content:"";position:absolute;left:0;right:0;height:10px;background:radial-gradient(circle at 7px 0,transparent 6px,var(--slip) 6.5px) 0 0/14px 10px repeat-x}
.slip::before{top:-9px;transform:rotate(180deg)}
.slip::after{bottom:-9px}
.slip-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:2px solid var(--slip-ink);padding-bottom:10px;margin-bottom:6px}
.slip-head b{font:600 17px/1.1 var(--serif);letter-spacing:0}
.slip-head span{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
.slip-sub{font-size:12.5px;opacity:.85;margin-bottom:12px}
.slip-ctl{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin:14px 0 16px;padding:12px 0;border-top:1px dashed var(--slip-line);border-bottom:1px dashed var(--slip-line);font-family:var(--sans)}
.slip-ctl label{font-size:13px;font-weight:600}
.slip-ctl select{font:inherit;font-size:16px;min-height:var(--tap);padding:0 10px;border:1px solid var(--slip-line);border-radius:var(--r);background:var(--slip);color:var(--slip-ink)}
.slip-sw{display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);cursor:pointer;font-size:13.5px;font-weight:600}
.slip-sw input{position:absolute;opacity:0;width:44px;height:44px;margin:0;cursor:pointer}
.slip-sw .track{position:relative;flex:none;width:46px;height:26px;border-radius:999px;background:var(--line-2);transition:background .2s}
.slip-sw .track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--slip);box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .2s}
.slip-sw input:checked + .track{background:var(--crit)}
.slip-sw input:checked + .track::after{transform:translateX(20px)}
.slip-sw input:focus-visible + .track{outline:3px solid var(--brass);outline-offset:3px}
.slip-sw{position:relative}
.rung{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:8px 0}
.rung .n{font-size:12px;opacity:.7}
.rung .nm{font-family:var(--sans);font-weight:600;font-size:14px}
.rung .nm small{display:block;font-weight:400;font-size:12.5px;opacity:.8}
.rung .amt{text-align:right;white-space:nowrap}
.rung.off .nm,.rung.off .amt{opacity:.72}
.rung.on-crit .amt,.rung.on-crit .nm{color:var(--crit)}
.slip-total{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid var(--slip-ink);margin-top:10px;padding-top:12px;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase}
.slip-total .v{font-size:32px;letter-spacing:0;font-weight:700}
.slip-vs{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;margin-top:6px;opacity:.9}
.slip-msg{font-family:var(--sans);font-size:13.5px;margin-top:14px;padding:10px 12px;border-left:3px solid var(--good);background:var(--good-soft);color:var(--ink)}
.slip-msg.crit{border-left-color:var(--crit);background:var(--crit-soft)}
.slip-foot{font-family:var(--sans);font-size:12px;opacity:.75;margin-top:12px}
.month{margin-top:28px;max-width:560px}
.month h3{font:700 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.bar{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:12px;align-items:center;margin-bottom:12px;font-size:14px}
.bar .track{height:14px;background:var(--surface-3);border-radius:2px;position:relative}
.bar .fill{position:absolute;inset:0 auto 0 0;background:var(--board);border-radius:2px;min-width:4px}
.bar.sms .fill{background:var(--crit)}
.bar .v{font-family:var(--mono);font-weight:700;white-space:nowrap}
@media (max-width:520px){.bar{grid-template-columns:1fr auto}.bar .track{grid-column:1/-1;order:3}}
.js .slip .rung{opacity:0;transform:translateY(6px)}
.js .slip.in .rung{opacity:1;transform:none;transition:opacity .35s ease-out,transform .35s ease-out}
.js .slip.in .rung:nth-of-type(2){transition-delay:.07s}
.js .slip.in .rung:nth-of-type(3){transition-delay:.14s}
.js .slip.in .rung:nth-of-type(4){transition-delay:.21s}
.js .slip.in .rung:nth-of-type(5){transition-delay:.28s}
@media (prefers-reduced-motion:reduce){.js .slip .rung{opacity:1;transform:none;transition:none}.slip-sw .track,.slip-sw .track::after{transition:none}}

/* Facts row */
.facts{display:grid;gap:0;border-top:1px solid var(--line-2)}
@media (min-width:760px){.facts{grid-template-columns:repeat(3,1fr)}.facts > div + div{border-left:1px solid var(--line)}}
.facts > div{padding:20px 0}
@media (min-width:760px){.facts > div{padding:24px 24px 24px 24px}.facts > div:first-child{padding-left:0}}
.facts .k{font:700 clamp(28px,3.4vw,38px)/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.facts .v{font-size:14px;color:var(--ink-2);margin-top:8px;max-width:34ch}

/* Cards, grids */
.grid{display:grid;gap:20px}
@media (min-width:760px){.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1000px){.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:760px) and (max-width:999px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;display:flex;flex-direction:column;gap:10px}
.card h3{font-size:19px}
.card p{font-size:15px;color:var(--ink-2)}
.card .more{margin-top:auto;padding-top:6px;font-weight:700;font-size:14px}
.role{border-top:2px solid var(--board);padding-top:16px}
.role .eyebrow{margin-bottom:8px;color:var(--brass-ink)}
.role p{font-size:15px;color:var(--ink-2);margin-top:8px}
.callout{border:1px solid var(--line);border-left:4px solid var(--brass);border-radius:0 var(--r) var(--r) 0;padding:16px 18px;background:var(--surface)}
.callout b{display:block;margin-bottom:4px}
.callout p{font-size:15px;color:var(--ink-2)}
.quote{font:italic 500 clamp(22px,2.6vw,30px)/1.3 var(--serif);max-width:30ch}

/* Tables */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:15px}
caption{text-align:left;padding:14px 16px;font:700 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--line);background:var(--surface-2)}
th{text-align:left;font:700 12px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface-2)}
td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
td:first-child{font-weight:600}
td.n{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.old{color:var(--ink-3)}
@media (max-width:560px){th,td{padding:11px 10px;font-size:14px}td.n{white-space:normal}}

/* Pricing */
.plans{display:grid;gap:20px}
@media (min-width:860px){.plans{grid-template-columns:repeat(3,minmax(0,1fr))}}
.plan{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:26px;display:flex;flex-direction:column;gap:14px}
.plan--pick{border-color:var(--brass);border-width:2px;box-shadow:var(--shadow)}
.plan .nm{font:600 22px/1.2 var(--serif)}
.plan .members{font-size:14px;color:var(--ink-3)}
.plan .amt{font:700 clamp(34px,4vw,44px)/1 var(--mono);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.plan .amt small{font:400 15px var(--sans);color:var(--ink-3);letter-spacing:0}
.plan .yr{font-size:14px;color:var(--ink-2)}
.plan ul{list-style:none;display:grid;gap:8px;font-size:15px;color:var(--ink-2);margin-top:4px}
.plan ul li{padding-left:22px;position:relative}
.plan ul li::before{content:"";position:absolute;left:2px;top:.55em;width:8px;height:8px;background:var(--board)}
.plan .btn{margin-top:auto}

/* Forms */
.form{display:grid;gap:18px}
.field{display:grid;gap:6px}
.field label{font-size:13px;font-weight:700;color:var(--ink-2)}
.field input,.field select,.field textarea{font:inherit;font-size:16px;width:100%;min-height:var(--tap);padding:11px 13px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);color:var(--ink)}
.field textarea{min-height:110px;resize:vertical}
.field .help{font-size:13px;color:var(--ink-3)}
.row2{display:grid;gap:18px}
@media (min-width:640px){.row2{grid-template-columns:1fr 1fr}}
.check{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--ink-2)}
.check input{width:22px;height:22px;flex:none;margin:1px 0 0;accent-color:var(--board)}
.formmsg{display:none;padding:14px 16px;border-left:4px solid var(--good);background:var(--good-soft);font-size:15px}
.formmsg.show{display:block}

/* FAQ */
.faq{border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:12px 0;cursor:pointer;font:600 18px/1.3 var(--serif);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 24px/1 var(--sans);color:var(--brass-ink);flex:none;width:24px;text-align:center}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 0 18px;max-width:64ch;color:var(--ink-2)}

/* Language demo */
.lang{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.chip{min-height:var(--tap);padding:0 18px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--ink);font:600 14px var(--sans);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--board);border-color:var(--board);color:var(--board-ink)}
.notice{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;display:grid;gap:12px}
.notice h3{font-size:19px}
.notice p{font-size:15.5px;color:var(--ink-2)}
.notice .meta{font-size:13px;color:var(--ink-3)}

/* Timeline (a real sequence: the order matters) */
.steps{list-style:none;counter-reset:s;display:grid;gap:0;border-left:2px solid var(--line-2);margin-left:6px}
.steps li{counter-increment:s;position:relative;padding:0 0 26px 28px}
.steps li::before{content:counter(s);position:absolute;left:-15px;top:0;width:28px;height:28px;border-radius:50%;background:var(--board);color:var(--board-ink);font:700 13px/28px var(--mono);text-align:center}
.steps b{display:block;font:600 18px/1.3 var(--serif);margin-bottom:4px}
.steps span{color:var(--ink-2);font-size:15px}

/* Footer */
.sitefoot{background:var(--surface);border-top:1px solid var(--line);padding:56px 0 32px}
.cols{display:grid;gap:32px}
@media (min-width:760px){.cols{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.cols h4{font:700 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.cols ul{list-style:none}
.cols li a{display:flex;align-items:center;min-height:var(--tap);color:var(--ink-2);text-decoration:none;font-size:15px}
.cols li a:hover{color:var(--brass-ink);text-decoration:underline}
.legal{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-3);display:grid;gap:8px;max-width:90ch}
.totop{position:fixed;right:16px;bottom:16px;z-index:60;width:var(--tap);height:var(--tap);border-radius:50%;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);box-shadow:var(--shadow);display:grid;place-items:center;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s}
.totop.show{opacity:1;visibility:visible;transform:none}
.totop svg{width:20px;height:20px}
@media (prefers-reduced-motion:reduce){.totop,.door,.btn{transition:none}}

/* CTA */
.cta{padding:var(--sec) 0;text-align:center}
.cta .wrap{max-width:760px}
.cta h2{margin-bottom:14px}
.cta .lede{margin:0 auto 28px}
.cta .btnrow{justify-content:center}

.pagehead{padding:clamp(40px,6vw,80px) 0 clamp(28px,4vw,48px);border-bottom:1px solid var(--line)}
.pagehead h1{font-size:clamp(32px,5vw,54px);margin-bottom:16px;max-width:22ch}
.banner{margin-top:clamp(28px,4vw,44px)}
.banner img{aspect-ratio:16/9;object-fit:cover;width:100%}
.mocknote{font-size:13px;color:var(--ink-3);border:1px dashed var(--line-2);padding:10px 14px;border-radius:var(--r);margin-top:18px}

@media print{
  .topbar,.totop,.sitefoot,.navtoggle,.theme-btn,.skip{display:none!important}
  body,.sec--tint,.slipband,.slip{background:#fff!important;color:#000!important}
  .btn{background:#fff!important;color:#000!important;border:1px solid #000!important}
}

.crop43 img{aspect-ratio:4/3;object-fit:cover;object-position:50% 25%}
.crop169 img{aspect-ratio:16/9;object-fit:cover}