@layer design;

/* The app's two faces (src/index.css), served from this origin rather than
   Google's, so a visit sends nobody's address to a third party. Each file is
   Google's own variable font, so one file per script covers every weight the
   app uses: Bricolage Grotesque 200-800 (with its optical-size axis), Public
   Sans 100-900. */
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/bricolage-latin-ext.1d04719f13.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/bricolage-latin.85f55a58a3.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/public-sans-latin-ext.1c8a26c0ed.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/public-sans-latin.c1b6da516e.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer design {
/* Tokens are the app's (src/index.css), by the app's names, so a rule copied
   from the app works here unchanged. site/tests/site.brand.test.js resolves
   both files and fails if any of these drifts from the app. */
:root, [data-theme="light"] {
  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Public Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
  --bg: #f1f3f6;
  --surface: #fbfcfd;
  --surface-elevated: #fbfcfd;
  --surface-hover: #e6e8ee;
  --surface-3: #e6e8ee;
  --ink: #122019;
  --ink-2: #4f5f56;
  --ink-3: #637269;
  --ink-inv: #ffffff;
  --ink-inv-2: rgba(255, 255, 255, 0.9);
  --ink-inv-3: rgba(255, 255, 255, 0.8);
  --border: #d2d6de;
  --border-hover: #bdc2cd;
  --rule-strong: var(--border-hover);
  --input-border-hover: var(--ink-3);
  --brand: #0f6b45;
  --brand-hover: #0b5538;
  --brand-active: #08462f;
  --brand-surface: var(--brand);
  --brand-surface-hover: var(--brand-hover);
  --brand-surface-active: var(--brand-active);
  --brand-tint: #edf8f2;
  --brand-tint-2: #d8eee3;
  --brand-ink: #08462f;
  --brand-panel-bg: var(--brand-surface);
  /* The logo's own colour: the tile behind the mark, and nothing else. Never
     overridden by the dark theme — a logo is not a theme colour. */
  --brand-forest: #0f5a3a;
  --brand-mark-bg: var(--brand-forest);
  --brand-mark-ink: #ffffff;
  --ok: #067647;
  --focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand);
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-full: 999px;
  --sh-1: 0 1px 2px rgba(18, 32, 25, 0.06), 0 1px 1px rgba(18, 32, 25, 0.04);
  --sh-2: 0 8px 18px -12px rgba(18, 32, 25, 0.22), 0 18px 42px -18px rgba(18, 32, 25, 0.18);
  --topbar-bg: rgba(247, 248, 246, 0.82);
  /* This site's own: the heavy rule that heads each section of the sheet. */
  --rule-heavy: var(--ink);
}
[data-theme="dark"] {
  --bg: #0d100f;
  --surface: #171c19;
  --surface-elevated: #1a211d;
  --surface-hover: #26302b;
  --surface-3: #26302b;
  --ink: #eff3f0;
  --ink-2: #c7d0cb;
  --ink-3: #98a49e;
  --ink-inv-3: rgba(255, 255, 255, 0.85);
  --border: rgba(199, 208, 203, 0.13);
  --border-hover: rgba(199, 208, 203, 0.24);
  --brand: #2fa873;
  --brand-hover: #7de2b8;
  --brand-active: #21a36f;
  --brand-surface: #19764e;
  --brand-surface-hover: #1e8459;
  --brand-surface-active: #15653f;
  --brand-tint: rgba(47, 191, 131, 0.14);
  --brand-tint-2: rgba(47, 191, 131, 0.22);
  --brand-ink: #7de2b8;
  --ok: #34d399;
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.34), 0 1px 1px rgba(0, 0, 0, 0.22);
  --sh-2: 0 12px 30px -18px rgba(0, 0, 0, 0.72), 0 24px 60px -28px rgba(0, 0, 0, 0.68);
  --topbar-bg: rgba(13, 16, 15, 0.76);
  --rule-heavy: #c7d0cb;
}
  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
  h1,h2,h3 { margin:0; font-family:var(--font-display); }
  p { margin:0; text-wrap:pretty; }
  a { color:var(--brand); text-decoration:none; }
  a:hover { color:var(--brand-hover); text-decoration:underline; }
  ::selection { background:var(--brand-tint-2); color:var(--brand-ink); }
  :focus { outline:none; }
  :focus-visible { outline:none; box-shadow:var(--focus); border-radius:var(--r-sm); }
  button, [data-btn] { border-radius:var(--r-sm); }
  [data-themebtn], [data-burger] { min-width:44px; min-height:44px; }
  @media (min-width:860px) { [data-themebtn] { min-width:36px; min-height:36px; } }
  [data-num] { color:var(--ink-3); }
  [data-num][data-state="on"] { color:var(--brand); }
  [data-stamp] { display:none !important; }
  [data-heroactive="1"] { background:var(--brand-tint); }
  [data-heroactive="1"] [data-signline] { display:none !important; }
  [data-heroactive="1"] [data-stamp] { display:inline-flex !important; }
  [data-gutter] { padding-left:20px !important; }
  [data-chapter] > div:not([data-gutter]) { padding-left:20px; }
  [data-railmark] { width:9px !important; height:9px !important; margin-left:-4.5px !important; margin-top:-4.5px !important; }
  @media (max-width:559px) {
    [data-navcta] { display:none !important; }
  }
  [data-menucta] { display:block; }
  @media (min-width:560px) { [data-menucta] { display:none !important; } }
  @media (min-width:860px) {
    [data-navlink] { display:inline-block !important; }
    [data-burger]  { display:none !important; }
    [data-grid]    { grid-template-columns:120px minmax(0,1fr) !important; }
    [data-gutter]  { padding-left:16px !important; }
    [data-chapter] > div:not([data-gutter]) { padding-left:0; }
    [data-railmark] { width:11px !important; height:11px !important; margin-left:-5.5px !important; margin-top:-5.5px !important; }
    [data-dlrow]   { grid-template-columns:250px minmax(0,1fr) !important; gap:24px !important; }
    [data-ledger]  { grid-template-columns:210px minmax(0,1fr) !important; gap:28px !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    *, *::before, *::after { transition-duration:1ms !important; animation-duration:1ms !important; }
  }
}

html, body { height: 100%; margin: 0; }
/* `hidden` must win over any class that sets display (the menu panel is one). */
[hidden] { display: none !important; }

.s1 { min-height:100vh; overflow-x:clip; background:var(--bg); color:var(--ink); }
.s3 { position:sticky; top:0; z-index:40; background:var(--topbar-bg); backdrop-filter:blur(10px); border-bottom:1px solid var(--border-hover); }
.s4 { max-width:1280px; margin:0 auto; padding:14px clamp(16px,4vw,44px); display:flex; align-items:center; gap:clamp(12px,3vw,34px); }
.s8 { display:flex; gap:clamp(10px,1.8vw,24px); align-items:center; margin-left:auto; font-size:14.5px; font-weight:500; }
.s9 { color:var(--ink-2); display:none; }
.s10 { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; background:none; border:1px solid var(--border-hover); cursor:pointer; padding:0; color:var(--ink); }
.s11 { display:block; position:relative; width:13px; height:13px; border:1.5px solid currentColor; overflow:hidden; }
.s12 { position:absolute; left:0; top:0; bottom:0; width:50%; background:currentColor; }
.s14 { display:inline-flex; flex-direction:column; gap:4px; background:none; border:1px solid var(--border-hover); padding:9px 10px; cursor:pointer; }
.s15 { display:block; width:16px; height:1.5px; background:var(--ink); }
.s16 { border-top:1px solid var(--border-hover); padding:8px clamp(16px,4vw,44px) 18px; display:flex; flex-direction:column; }
.s18 { padding:14px 0; border-bottom:1px solid var(--border); color:var(--ink); font-size:16px; }
.s19 { padding:14px 0; color:var(--ink); font-size:16px; }
.s20 { max-width:1280px; margin:0 auto; padding:clamp(44px,7vw,96px) clamp(16px,4vw,44px) clamp(36px,5vw,72px); display:grid; grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr)); gap:clamp(32px,5vw,72px); align-items:end; }
.s21 { font-family:var(--font-body); font-size:0.6875rem; letter-spacing:0.07em; text-transform:uppercase; color:var(--ink-3); margin-bottom:clamp(20px,3vw,34px); font-weight:700; }
.s22 { font-weight:800; font-size:clamp(42px,7.4vw,98px); line-height:0.93; letter-spacing:-0.035em; max-width:11ch; }
.s23 { margin-top:clamp(20px,2.6vw,30px); font-size:clamp(17px,1.42vw,21px); line-height:1.52; color:var(--ink-2); max-width:46ch; }
.s24 { margin-top:clamp(26px,3.4vw,40px); display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.s26 { font-family:var(--font-mono); font-size:13px; opacity:0.75; }
.s28 { margin-top:20px; font-size:13.5px; color:var(--ink-3); max-width:44ch; }
.s29 { display:flex; justify-content:space-between; align-items:baseline; gap:12px; border-bottom:2px solid var(--rule-heavy); padding-bottom:8px; }
.s30 { font-family:var(--font-body); font-size:0.6875rem; letter-spacing:0.07em; text-transform:uppercase; color:var(--ink); font-weight:700; }
.s31 { font-family:var(--font-body); font-size:0.6875rem; letter-spacing:0.07em; text-transform:uppercase; color:var(--ink-3); font-weight:700; }
.s32 { background:var(--surface); border:1px solid var(--border-hover); border-top:none; }
.s33 { display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:12px; padding:10px 14px; border-bottom:1px solid var(--border-hover); font-family:var(--font-body); font-size:0.6875rem; letter-spacing:0.07em; text-transform:uppercase; color:var(--ink-3); font-weight:700; }
.s34 { text-align:right; }
.s35 { display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:12px; padding:15px 14px; border-bottom:1px solid var(--border); align-items:center; }
.s36 { font-family:var(--font-mono); font-size:12px; color:var(--ink-3); line-height:1.3; }
.s37 { font-size:15.5px; font-weight:500; }
.s38 { display:flex; justify-content:flex-end; }
.s39 { display:block; width:64px; height:1px; background:var(--border-hover); }
.s40 { display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:12px; padding:15px 14px; border-bottom:1px solid var(--border); align-items:center; position:relative; }
.s41 { display:flex; justify-content:flex-end; align-items:center; gap:8px; }
.s45 { position:absolute; left:0; bottom:-1px; height:2px; width:0%; background:var(--brand); }
.s46 { display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:12px; padding:15px 14px; align-items:center; }
.s47 { margin-top:12px; font-size:13px; color:var(--ink-3); line-height:1.5; }
.s48 { position:relative; max-width:1280px; margin:0 auto; padding:0 clamp(16px,4vw,44px); }
.s49 { position:absolute; left:clamp(16px,4vw,44px); top:0; bottom:0; width:1px; background:var(--border-hover); }
.s50 { position:absolute; left:clamp(16px,4vw,44px); top:0; width:2px; height:0px; background:var(--brand); margin-left:-0.5px; }
.s51 { position:absolute; left:clamp(16px,4vw,44px); top:0; width:11px; height:11px; background:var(--brand); margin-left:-5.5px; margin-top:-5.5px; }
.s52 { border-top:2px solid var(--rule-heavy); padding:clamp(40px,5.5vw,84px) 0; display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(20px,3vw,40px); }
.s53 { padding-left:clamp(22px,3vw,34px); }
.s54 { font-family:var(--font-mono); font-size:12px; letter-spacing:0.1em; font-weight:600; }
.s55 { font-weight:700; font-size:clamp(29px,4.2vw,54px); line-height:1.03; letter-spacing:-0.028em; max-width:19ch; }
.s56 { margin-top:clamp(20px,2.4vw,30px); max-width:60ch; display:flex; flex-direction:column; gap:18px; font-size:17px; line-height:1.62; color:var(--ink-2); }
.s57 { margin:clamp(26px,3vw,38px) 0 0; padding:0; list-style:none; max-width:60ch; border-top:1px solid var(--border-hover); }
.s58 { padding:14px 0; border-bottom:1px solid var(--border); font-size:clamp(17px,1.6vw,21px); font-family:var(--font-display); font-weight:600; letter-spacing:-0.015em; }
.s59 { padding:14px 0; font-size:clamp(17px,1.6vw,21px); font-family:var(--font-display); font-weight:600; letter-spacing:-0.015em; }
.s60 { margin-top:26px; font-size:17px; line-height:1.62; color:var(--ink-2); max-width:58ch; }
.s61 { border-top:1px solid var(--border-hover); padding:clamp(40px,5.5vw,84px) 0; display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(20px,3vw,40px); }
.s62 { font-weight:700; font-size:clamp(29px,4.2vw,54px); line-height:1.03; letter-spacing:-0.028em; max-width:17ch; }
.s63 { margin-top:clamp(20px,2.4vw,30px); max-width:58ch; font-size:17px; line-height:1.62; color:var(--ink-2); }
.s64 { margin-top:clamp(28px,3.4vw,44px); max-width:74ch; border-top:2px solid var(--rule-heavy); }
.s65 { display:grid; grid-template-columns:minmax(0,1fr); gap:6px; padding:18px 0; border-bottom:1px solid var(--border); }
.s66 { font-family:var(--font-body); font-size:0.6875rem; letter-spacing:0.07em; text-transform:uppercase; color:var(--ink-3); padding-top:4px; font-weight:700; }
.s67 { font-size:16.5px; line-height:1.58; color:var(--ink-2); }
.s68 { display:grid; grid-template-columns:minmax(0,1fr); gap:6px; padding:18px 0; }
.s69 { font-weight:700; font-size:clamp(29px,4.2vw,54px); line-height:1.03; letter-spacing:-0.028em; max-width:20ch; }
.s70 { margin-top:clamp(20px,2.4vw,30px); max-width:58ch; display:flex; flex-direction:column; gap:16px; font-size:17px; line-height:1.62; color:var(--ink-2); }
.s71 { margin:clamp(28px,3.4vw,44px) 0 0; max-width:540px; border-top:2px solid var(--rule-heavy); padding-top:18px; }
.s72 { display:flex; align-items:flex-end; gap:clamp(10px,2vw,20px); height:160px; }
.s73 { flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:8px; height:100%; }
.s75 { font-family:var(--font-body); font-size:0.6875rem; letter-spacing:0.07em; text-transform:uppercase; color:var(--ink-2); font-weight:700; }
.s78 { margin-top:14px; font-size:13.5px; color:var(--ink-3); line-height:1.5; }
.s79 { font-weight:700; font-size:clamp(29px,4.2vw,54px); line-height:1.03; letter-spacing:-0.028em; max-width:18ch; }
.s80 { font-weight:700; font-size:clamp(29px,4.2vw,54px); line-height:1.03; letter-spacing:-0.028em; max-width:16ch; }
.s81 { margin:clamp(32px,3.8vw,52px) 0 0; max-width:24ch; border-top:2px solid var(--rule-heavy); border-bottom:2px solid var(--rule-heavy); padding:clamp(22px,2.6vw,32px) 0; }
.s82 { font-family:var(--font-display); font-weight:700; font-size:clamp(26px,3.6vw,46px); line-height:1.02; letter-spacing:-0.03em; color:var(--brand); }
.s83 { margin-top:22px; max-width:56ch; font-size:17px; line-height:1.62; color:var(--ink-2); }
.s84 { margin:clamp(28px,3.4vw,44px) 0 0; max-width:70ch; border-top:1px solid var(--border-hover); }
.s85 { display:grid; grid-template-columns:minmax(0,1fr); gap:4px; padding:16px 0; border-bottom:1px solid var(--border); }
.s86 { font-family:var(--font-display); font-weight:700; font-size:17.5px; letter-spacing:-0.015em; }
.s87 { margin:0; font-size:15.5px; line-height:1.58; color:var(--ink-2); }
.s88 { display:grid; grid-template-columns:minmax(0,1fr); gap:4px; padding:16px 0; }
.s89 { margin-top:24px; }
.s90 { font-weight:600; font-size:16px; border-bottom:2px solid var(--brand); padding-bottom:2px; }
.s91 { margin-top:clamp(26px,3vw,40px); border:1px solid var(--border-hover); background:var(--surface); max-width:560px; }
.s92 { display:flex; justify-content:space-between; gap:12px; padding:11px 16px; border-bottom:1px solid var(--border-hover); font-family:var(--font-body); font-size:0.6875rem; letter-spacing:0.07em; text-transform:uppercase; color:var(--ink-3); font-weight:700; }
.s93 { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border); font-size:15px; }
.s94 { color:var(--brand); font-weight:600; }
.s95 { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:14px 16px; font-size:15px; }
.s96 { color:var(--ink-3); font-weight:600; }
.s97 { margin-top:16px; font-size:14px; color:var(--ink-3); max-width:58ch; line-height:1.55; }
.s98 { margin-top:clamp(20px,2.4vw,30px); max-width:60ch; display:flex; flex-direction:column; gap:20px; font-size:17px; line-height:1.62; color:var(--ink-2); }
.s99 { color:var(--ink); font-weight:600; }
.s100 { margin-top:26px; }
.s101 { border-top:1px solid var(--border-hover); padding:clamp(40px,5.5vw,72px) 0 clamp(50px,6vw,90px); display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(20px,3vw,40px); }
.s102 { font-weight:700; font-size:clamp(26px,3.2vw,40px); line-height:1.06; letter-spacing:-0.025em; max-width:22ch; }
.s103 { margin-top:clamp(22px,2.8vw,36px); border-top:2px solid var(--rule-heavy); }
.s104 { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 20px; padding:20px 0; border-bottom:1px solid var(--border); color:var(--ink); }
.s105 { font-family:var(--font-display); font-weight:700; font-size:clamp(20px,2.4vw,30px); letter-spacing:-0.022em; line-height:1.1; }
.s106 { font-family:var(--font-body); font-size:0.6875rem; letter-spacing:0.07em; text-transform:uppercase; color:var(--ink-3); flex:0 0 auto; font-weight:700; }
.s107 { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 20px; padding:20px 0; color:var(--ink); }
.s108 { background:var(--brand-panel-bg); color:var(--ink-inv); }
.s109 { max-width:1280px; margin:0 auto; padding:clamp(52px,7vw,110px) clamp(16px,4vw,44px); }
.s111 { margin-top:clamp(26px,3.4vw,44px); font-family:var(--font-display); font-weight:700; font-size:clamp(38px,7vw,96px); line-height:0.96; letter-spacing:-0.035em; max-width:13ch; }
.s112 { margin-top:clamp(22px,2.8vw,34px); max-width:52ch; font-size:clamp(16px,1.3vw,19px); line-height:1.55; color:var(--ink-inv-2); }
.s113 { margin-top:clamp(28px,3.4vw,44px); display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.s115 { font-family:var(--font-mono); font-size:13px; opacity:0.6; }
.s116 { margin-top:clamp(40px,5vw,72px); padding-top:clamp(18px,2.2vw,26px); border-top:1px solid rgba(255,255,255,0.32); font-size:15px; color:var(--ink-inv-3); }
.s117 { max-width:1280px; margin:0 auto; padding:clamp(40px,6vw,84px) clamp(16px,4vw,44px) clamp(50px,6vw,90px); }
.s118 { font-family:var(--font-body); font-size:0.6875rem; letter-spacing:0.07em; text-transform:uppercase; color:var(--ink-3); font-weight:700; }
.s119 { margin-top:clamp(16px,2.4vw,28px); font-weight:800; font-size:clamp(38px,6.4vw,84px); line-height:0.95; letter-spacing:-0.035em; max-width:13ch; }
.s120 { margin-top:clamp(20px,2.4vw,30px); max-width:56ch; font-size:clamp(17px,1.4vw,20px); line-height:1.54; color:var(--ink-2); }
.s121 { margin:clamp(32px,4vw,56px) 0 0; max-width:72ch; border-top:2px solid var(--rule-heavy); }
.s122 { padding:20px 0; border-bottom:1px solid var(--border); }
.s123 { font-family:var(--font-display); font-weight:700; font-size:clamp(19px,1.9vw,24px); letter-spacing:-0.02em; }
.s124 { margin:8px 0 0; font-size:16.5px; line-height:1.6; color:var(--ink-2); max-width:60ch; }
.s125 { padding:20px 0; }
.s126 { margin-top:clamp(36px,4.4vw,64px); display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:clamp(22px,3vw,44px); border-top:2px solid var(--rule-heavy); padding-top:clamp(24px,3vw,36px); }
.s127 { font-weight:700; font-size:clamp(21px,2.2vw,28px); letter-spacing:-0.02em; line-height:1.1; }
.s128 { margin-top:12px; font-size:16px; line-height:1.6; color:var(--ink-2); }
.s129 { margin-top:clamp(34px,4vw,56px); }
.s131 { margin-top:clamp(16px,2.4vw,28px); font-weight:800; font-size:clamp(34px,5.6vw,74px); line-height:0.98; letter-spacing:-0.034em; max-width:16ch; }
.s132 { margin-top:clamp(20px,2.4vw,30px); max-width:58ch; font-size:clamp(17px,1.4vw,20px); line-height:1.54; color:var(--ink-2); }
.s133 { margin-top:clamp(32px,4vw,56px); border-top:2px solid var(--rule-heavy); max-width:78ch; }
.s134 { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; padding:22px 0; border-bottom:1px solid var(--border); }
.s135 { font-weight:700; font-size:clamp(19px,1.9vw,23px); letter-spacing:-0.02em; }
.s136 { font-size:16px; line-height:1.6; color:var(--ink-2); }
.s137 { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; padding:22px 0; }
.s138 { margin-top:clamp(36px,4.4vw,64px); max-width:62ch; }
.s139 { font-weight:700; font-size:clamp(24px,2.8vw,36px); letter-spacing:-0.025em; line-height:1.08; }
.s140 { margin-top:16px; font-size:16.5px; line-height:1.62; color:var(--ink-2); }
.s141 { margin-top:clamp(16px,2.4vw,28px); font-weight:800; font-size:clamp(36px,6vw,80px); line-height:0.96; letter-spacing:-0.035em; max-width:14ch; }
.s142 { font-family:var(--font-display); font-weight:700; font-size:clamp(18px,1.8vw,22px); letter-spacing:-0.02em; }
.s143 { margin:8px 0 0; font-size:16px; line-height:1.6; color:var(--ink-2); max-width:62ch; }
.s144 { margin-top:clamp(36px,4.4vw,60px); border-left:4px solid var(--brand); background:var(--brand-tint); padding:clamp(22px,2.8vw,32px); max-width:66ch; }
.s145 { font-weight:700; font-size:clamp(20px,2.2vw,26px); letter-spacing:-0.02em; line-height:1.14; color:var(--brand-hover); }
.s146 { margin-top:12px; font-size:16px; line-height:1.6; color:var(--brand-hover); }
.s147 { margin-top:clamp(34px,4vw,56px); font-size:16.5px; line-height:1.62; color:var(--ink-2); max-width:58ch; }
.s148 { margin-top:clamp(16px,2.4vw,28px); font-weight:800; font-size:clamp(36px,6vw,80px); line-height:0.96; letter-spacing:-0.035em; max-width:15ch; }
.s149 { font-weight:700; font-size:clamp(18px,1.8vw,22px); letter-spacing:-0.02em; }
.s150 { margin-top:clamp(36px,4.4vw,60px); max-width:62ch; }
.s151 { font-weight:700; font-size:clamp(22px,2.6vw,32px); letter-spacing:-0.025em; line-height:1.1; }
.s152 { margin-top:14px; font-size:16.5px; line-height:1.62; color:var(--ink-2); }
.s153 { margin-top:clamp(16px,2.4vw,28px); font-weight:800; font-size:clamp(38px,6.4vw,86px); line-height:0.95; letter-spacing:-0.035em; max-width:12ch; }
.s154 { margin-top:clamp(28px,3.4vw,44px); display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:clamp(28px,4vw,64px); align-items:start; }
.s155 { display:flex; flex-direction:column; gap:18px; font-size:17px; line-height:1.62; color:var(--ink-2); max-width:56ch; }
.s156 { border-top:2px solid var(--rule-heavy); padding-top:18px; }
.s157 { font-family:var(--font-body); font-size:0.6875rem; letter-spacing:0.07em; text-transform:uppercase; color:var(--ink-3); font-weight:700; }
.s158 { margin:16px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; }
.s159 { padding:14px 0; border-bottom:1px solid var(--border); font-family:var(--font-display); font-weight:600; font-size:17px; letter-spacing:-0.015em; line-height:1.28; }
.s160 { padding:14px 0; font-family:var(--font-display); font-weight:600; font-size:17px; letter-spacing:-0.015em; line-height:1.28; }
.s161 { margin-top:clamp(40px,5vw,72px); border-top:2px solid var(--rule-heavy); padding-top:clamp(26px,3vw,40px); max-width:62ch; }
.s162 { margin-top:22px; display:flex; align-items:baseline; gap:20px; border-top:2px solid var(--rule-heavy); border-bottom:1px solid var(--border); padding:16px 0; }
.s163 { display:block; font-family:var(--font-display); font-weight:700; font-size:17px; letter-spacing:-0.015em; }
.s164 { display:block; font-size:13.5px; color:var(--ink-3); margin-top:2px; }
.s165 { margin-top:22px; font-size:16.5px; line-height:1.62; color:var(--ink-2); }
.s166 { margin-top:clamp(36px,4.4vw,60px); border-top:2px solid var(--rule-heavy); padding-top:clamp(22px,2.6vw,32px); }
.s167 { margin-top:18px; display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:0 28px; }
.s168 { padding:12px 0; border-bottom:1px solid var(--border); font-size:15.5px; color:var(--ink); }
.s169 { padding:12px 0; border-bottom:1px solid var(--border); font-size:15.5px; color:var(--brand); font-weight:600; }
.s170 { margin-top:clamp(30px,3.6vw,48px); font-size:16.5px; line-height:1.62; color:var(--ink-2); max-width:58ch; }
.s171 { border-top:2px solid var(--rule-heavy); background:var(--bg); }
.s172 { max-width:1280px; margin:0 auto; padding:clamp(34px,4.4vw,64px) clamp(16px,4vw,44px) clamp(26px,3vw,40px); display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:clamp(26px,3vw,44px); }
.s176 { margin-top:14px; font-size:14px; line-height:1.55; color:var(--ink-2); max-width:30ch; }
.s177 { margin-top:12px; font-size:13px; color:var(--ink-3); }
.s178 { font-family:var(--font-body); font-size:0.6875rem; letter-spacing:0.07em; text-transform:uppercase; color:var(--ink-3); font-weight:700; }
.s179 { margin-top:12px; display:flex; flex-direction:column; gap:9px; font-size:14.5px; }
.s180 { color:var(--ink); }
.s181 { margin-top:12px; font-size:14px; line-height:1.55; color:var(--ink-2); max-width:30ch; }
.s183 { max-width:1280px; margin:0 auto; padding:16px clamp(16px,4vw,44px) 28px; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; font-size:12.5px; color:var(--ink-3); }

.h1:hover { text-decoration:none; }
.h2:hover { color:var(--brand); text-decoration:none; }
.h3:hover { border-color:var(--brand); }
.h6:hover { text-decoration:none; color:var(--brand-hover); }

/* ── Not found (404) ─────────────────────────────────────────────────────── */
.notfound { max-width: 760px; margin: 0 auto; padding: clamp(28px, 6vw, 72px) clamp(18px, 4vw, 40px) clamp(50px, 6vw, 90px); }
.notfound-sheet { border-top: 2px solid var(--rule-heavy); }
.notfound-code { padding: 12px 0; border-bottom: 1px solid var(--border-hover); font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.notfound-title { margin: 28px 0 0; font-size: clamp(36px, 7vw, 64px); line-height: 0.98; letter-spacing: -0.03em; font-weight: 800; }
.notfound-text { margin: 18px 0 0; max-width: 46ch; color: var(--ink-2); font-size: 17px; line-height: 1.55; }
.notfound-links { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ══════════════════════════════════════════════════════════════════════════
   From the app. Copied from src/index.css and
   src/components/common/wvMotion.css, so the logo, buttons, links, focus and
   motion here behave exactly as the app's. site/tests/site.brand.test.js
   checks the tokens they read; when the app changes one of these rules, copy
   the new version here.
   ══════════════════════════════════════════════════════════════════════════ */

/* — The lockup (src/components/common/BrandLockup.jsx) — */
.brand { display: flex; align-items: center; gap: 0.75rem; padding: 0 0.5rem; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand-mark { width: 32px; height: 32px; border-radius: 22.36%; background: var(--brand-mark-bg); color: var(--brand-mark-ink); display: grid; place-items: center; flex-shrink: 0; }
.brand-mark-lg { width: 64px; height: 64px; }
.brand-mark-glyph { display: block; width: 56.04%; height: 58%; overflow: visible; }
.brand-mark-inline { display: block; flex-shrink: 0; width: calc(32px * 86 / 89); height: 32px; overflow: visible; color: var(--brand); }
.brand-name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; letter-spacing: -0.02em; line-height: 1.15; }
/* This site's own: here the lockup sits on the page's edge, not inside a sidebar. */
.site-brand { padding: 0; flex: 0 0 auto; }

/* — Skip link: the first stop for a keyboard (App.jsx) — */
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 2000; background: var(--brand); color: var(--ink-inv); padding: 0.625rem 1rem; border-radius: var(--r-sm); font-size: 0.875rem; font-weight: 600; box-shadow: var(--sh-2); transition: top 120ms cubic-bezier(0.4, 0, 0.2, 1); }
.skip-link:focus { top: 1rem; text-decoration: none; }
main:focus { outline: none; box-shadow: none; }

/* — Buttons — */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4375rem; padding: 0.5rem 0.875rem; border-radius: var(--r-sm); border: 1px solid transparent; font-size: 0.875rem; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: background 120ms cubic-bezier(0.4, 0, 0.2, 1), border-color 120ms cubic-bezier(0.4, 0, 0.2, 1), color 120ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 120ms cubic-bezier(0.4, 0, 0.2, 1); }
.btn-primary { background: var(--brand-surface); color: var(--ink-inv); box-shadow: var(--sh-1); }
.btn-primary:not(:disabled):hover { background: var(--brand-surface-hover); }
.btn-primary:not(:disabled):active { background: var(--brand-surface-active); }
.btn-secondary { background: var(--surface-elevated); color: var(--ink); border-color: var(--rule-strong); box-shadow: var(--sh-1); }
.btn-secondary:not(:disabled):hover { background: var(--surface-hover); border-color: var(--input-border-hover); }
.btn-lg { padding: 0.625rem 1.125rem; font-size: 0.9375rem; }
.btn-sm { padding: 0.3125rem 0.625rem; font-size: 0.8125rem; gap: 0.375rem; }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:not(:disabled):hover { background: var(--surface-3); color: var(--ink); }

/* — Text for screen readers only — */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* — An address to write to (CopyableEmail): selectable text, then Copy — */
.copy-email { display: inline-flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
.copy-email-address { user-select: all; overflow-wrap: anywhere; color: var(--ink); font-weight: 600; }

/* — Status, and the confirmation beside it (EventShiftsTab, InlineConfirmation) — */
.status { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.status::before { content: ''; width: 6px; height: 6px; border-radius: var(--r-full); background: currentColor; flex-shrink: 0; }
.status-ok { color: var(--ok); }
.inline-confirm { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; }

/* — Links in running text are underlined: the colour alone is not enough to
     find them (WCAG 1.4.1). Buttons and navigation are not running text. — */
p a, li a, dd a, figcaption a, .lead a, .small a { text-decoration: underline; text-underline-offset: 0.15em; }
p a.btn, li a.btn, dd a.btn, nav a, a.btn { text-decoration: none; }

/* The Auto Select chart: bar heights are weights from the published formula. */
.chart-track { flex: 1; display: flex; align-items: flex-end; min-height: 0; }
.chart-bar { width: 100%; background: var(--brand); }
.chart-bar-0 { height: 100%; }
.chart-bar-200 { height: 57.5%; }
.chart-bar-500 { height: 39.3%; }
.chart-value { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }

/* The published documents, in the Legal Center's groups (built from the app's
   registry). A list of documents is not running text, so no underline. */
.legal-groups { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 24px 28px; }
.legal-group-title { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 6px; border-bottom: 1px solid var(--border-hover); }
.legal-list { margin: 0; padding: 0; list-style: none; }
li a.legal-link, a.legal-link { display: block; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 15.5px; color: var(--ink); text-decoration: none; }
a.legal-link:hover { color: var(--brand); text-decoration: none; }
.legal-all { margin-top: 12px; }
p a.legal-link-all { display: inline-block; border-bottom: 0; color: var(--brand); font-weight: 600; }

/* The header sticks, so anything scrolled to (a skip-link target, a chapter,
   a focused link) lands below it rather than under it (WCAG 2.4.11). */
html { scroll-padding-top: 88px; }

/* The page you are on, in every navigation list. */
nav a[aria-current="page"]:not(.brand), #wv-menu a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 2px; }

/* The footer's note on what the site stores and measures. */
.footer-note { max-width: 70ch; }

/* A short line under a call to action. */
.cta-note { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--ink-3); max-width: 56ch; }

/* This site's placements for the app's buttons. */
.menu-cta { margin: 10px 0 6px; }
.footer-cta { margin-top: 14px; }

/* The closing mark waits, undrawn, until the band reaches the reader; site.js
   then swaps this for the app's lockup motion. Only site.js ever adds it, so
   without the script the mark is complete. */
.wv-lock-wait { stroke-dasharray: 0 999; }
@media (prefers-reduced-motion: reduce) { .wv-lock-wait { stroke-dasharray: 225.4484 999 !important; } }
@media print { .wv-lock-wait { stroke-dasharray: 225.4484 999 !important; } }

/* — On the green panel the focus ring would be green on green, so it is white,
     as on the app's own green panels (.nextshift). — */
.band :focus-visible { outline: 2px solid var(--ink-inv); outline-offset: 2px; box-shadow: none; }

/* — Windows High Contrast and other forced-colour modes — */
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid Highlight; outline-offset: 2px; box-shadow: none; }
  .btn { border: 1px solid CanvasText; }
  .status { border: 1px solid CanvasText; }
}

/* — The logo's motion (wvMotion.css): only the two behaviours this site uses.
     "lockup" draws the closing mark once; "success" confirms the example row.
     Every animated path rests as the complete mark, so with no animation —
     reduced motion, print, no script — the logo is simply there. — */
:root {
  --wv-fall:   cubic-bezier(0.40, 0, 0.72, 0.30);
  --wv-climb:  cubic-bezier(0.22, 0.68, 0.52, 1);
  --wv-settle: cubic-bezier(0.33, 1.12, 0.66, 1);
  --wv-lockup:    4000ms;
  --wv-success:    900ms;
  --wv-pull-x:  0.423px;
  --wv-pull-y: -1.647px;
}
@keyframes wv-lock-line {
  0%      { stroke-dasharray: 0 999;        opacity: 0; animation-timing-function: var(--wv-fall); }
  2.000%  { opacity: 1; }
  5.813%  { stroke-dasharray: 54.7083 999;  animation-timing-function: linear; }
  7.441%  { stroke-dasharray: 54.7083 999;  animation-timing-function: var(--wv-climb); }
  15.500% { stroke-dasharray: 101.8782 999; animation-timing-function: var(--wv-fall); }
  20.460% { stroke-dasharray: 149.0481 999; animation-timing-function: linear; }
  21.622% { stroke-dasharray: 149.0481 999; animation-timing-function: var(--wv-climb); }
  38.750%, 100% { stroke-dasharray: 225.4484 999; }
}
@keyframes wv-lock-pull {
  0%, 22.500%   { transform: translate(0, 0);                             animation-timing-function: var(--wv-climb); }
  38.750%       { transform: translate(var(--wv-pull-x), var(--wv-pull-y)); animation-timing-function: var(--wv-settle); }
  44.250%, 100% { transform: translate(0, 0); }
}
@keyframes wv-tick {
  0%   { stroke-dasharray: 0 999;       opacity: 0; animation-timing-function: var(--wv-climb); }
  14.340% { opacity: 1; }
  100% { stroke-dasharray: 76.4003 999; }
}
@keyframes wv-fill {
  0%, 34% { opacity: 0.20; animation-timing-function: var(--wv-climb); }
  100%    { opacity: 1; }
}
@keyframes wv-tickpull {
  0%   { transform: translate(0, 0);                              animation-timing-function: var(--wv-climb); }
  62%  { transform: translate(var(--wv-pull-x), var(--wv-pull-y)); animation-timing-function: var(--wv-settle); }
  100% { transform: translate(0, 0); }
}
.wv-lock-line { stroke-dasharray: 225.4484 999; animation: wv-lock-line var(--wv-lockup) linear 1 both; }
.wv-lock-pull { animation: wv-lock-pull var(--wv-lockup) linear 1 both; }
.wv-ok-body { opacity: 1; animation: wv-fill var(--wv-success) linear 1 forwards; }
.wv-ok-tick { stroke-dasharray: 76.4003 999; animation: wv-tick calc(var(--wv-success) * 0.62) var(--wv-climb) 1 forwards; }
.wv-ok-pull { animation: wv-tickpull var(--wv-success) linear 1 forwards; }
@media (prefers-reduced-motion: reduce) {
  .wv-lock-line, .wv-lock-pull, .wv-ok-tick, .wv-ok-body, .wv-ok-pull { animation: none !important; }
  .wv-lock-pull, .wv-ok-pull { transform: none !important; }
  .wv-lock-line { stroke-dasharray: 225.4484 999 !important; stroke-dashoffset: 0 !important; }
  .wv-ok-tick { stroke-dasharray: 76.4003 999 !important; }
  .wv-ok-body { opacity: 1 !important; }
}