/* ============================================================================
   THE WEB APP'S COMPONENTS - from stackup-docs/design/mockups/web-app-mockups.html, the sheet the
   owner decided on 2026-09-29 (web-design-language.md, "The web app"), without the sheet's own
   chrome and without the rejected top-bar comparison. The tokens are tokens.css; nothing here
   defines a colour. Change a rule here and in the design language together.
   ============================================================================ */

:focus-visible{outline:2px solid var(--teal); outline-offset:2px; border-radius:2px;}
.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;}
/* The approved skip link. */
.skip{position:absolute; left:16px; top:-60px; z-index:50; background:var(--panel); color:var(--teal); border:1px solid var(--teal); border-radius:var(--radius-sm); padding:12px 18px; font-weight:600; text-decoration:none; transition:top .12s ease;}
.skip:focus{top:12px;}
@media (prefers-reduced-motion: reduce){ .skip{transition:none;} }

*{box-sizing:border-box;}
body{margin:0; background:var(--ground); color:var(--ink); font:400 16px/1.6 Inter, "Inter fallback", system-ui, sans-serif; -webkit-font-smoothing:antialiased;}
.wrap{max-width:var(--col); margin:0 auto; padding-inline:var(--gutter);}
h1,h2,h3{font-family:"Barlow Condensed", "Barlow Condensed fallback", Inter, sans-serif; text-wrap:balance; margin:0;}
h1{font-size:clamp(38px,6vw,62px); font-weight:700; line-height:.98; letter-spacing:-.01em;}
h2{font-size:clamp(27px,3.4vw,38px); font-weight:700; line-height:1.05;}
p{margin:0 0 1em; max-width:68ch;}
a{color:var(--teal);}
code{font-family:ui-monospace,"Cascadia Code",Menlo,Consolas,monospace; font-size:.9em; background:var(--teal-soft); color:var(--ink); padding:.12em .4em; border-radius:6px;}
.eyebrow{font-family:"Barlow Condensed",sans-serif; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--teal); margin:0 0 6px;}
.lede{color:var(--ink-2); max-width:68ch; margin:10px 0 0;}
.caption{font-size:12.5px; color:var(--ink-3);}
.label{font:600 12px/1.3 "Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3);}

/* ============================================================
   SITE COMPONENTS - copied from web-mockups.html (approved), unchanged
   ============================================================ */
.masthead{background:var(--panel); border-bottom:1px solid var(--line); position:relative;}
.masthead .inner{display:flex; align-items:center; gap:24px; min-height:64px;}
.brand{font:700 21px/1 "Barlow Condensed",sans-serif; letter-spacing:.01em; color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:8px; min-height:44px;}
.brand .dot{width:9px;height:9px;border-radius:999px;background:var(--teal);}
.nav{display:flex; gap:22px; margin-left:auto; align-items:center;}
.nav a{font-size:14.5px; font-weight:500; color:var(--ink-2); text-decoration:none; display:inline-flex; align-items:center; min-height:44px; border-bottom:2px solid transparent;}
.nav a:hover{color:var(--ink);}
.nav a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--teal); font-weight:600;}
.masthead-actions{display:flex; align-items:center; gap:12px; margin-left:auto;}
.nav + .masthead-actions, .navtoggle + .masthead-actions{margin-left:0;}
.lang{display:flex; align-items:center; gap:2px;}
.lang a,.lang b{display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; font-size:13.5px; text-decoration:none; border-bottom:2px solid transparent;}
.lang b{color:var(--ink); font-weight:600; border-bottom-color:var(--teal);}
.lang a{color:var(--ink-3);}
.lang a:hover{color:var(--ink);}
.navtoggle{display:none;}
.navtoggle > summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:0 12px; border:1px solid var(--ink-3); border-radius:var(--radius-sm); color:var(--ink); font:600 14px Inter,sans-serif;}
.navtoggle > summary::-webkit-details-marker{display:none;}
.navtoggle[open] > .navpanel{position:absolute; left:0; right:0; top:100%; background:var(--panel); border-bottom:1px solid var(--line); padding:8px 0 16px; z-index:20;}
.navpanel a{display:flex; align-items:center; min-height:48px; padding:0 var(--gutter); color:var(--ink); text-decoration:none; font-size:16px; font-weight:500;}
.navpanel a[aria-current="page"]{color:var(--teal); font-weight:600;}
@media (max-width:820px){ .nav{display:none;} .navtoggle{display:block; margin-left:auto;} .nav + .masthead-actions{margin-left:auto;} }
/* The masthead at phone width - the website's fix (stackup-website global.css), which this sheet never
   had: at 390px the row needed ~440px and the page scrolled sideways (ui-critic on A3). Nothing is
   hidden; the row tightens. A flex item will not shrink below its content (min-width:auto), which is
   what pushed Sign in off the edge. Targets stay 44px tall; the language switch narrows (SC 2.5.8). */
@media (max-width:560px){
  .masthead .inner{gap:10px; min-width:0;}
  .masthead-actions{gap:6px; min-width:0;}
  .masthead .brand{flex:none;}
  .masthead-actions .btn{flex:none; padding:12px 14px; font-size:14px; white-space:nowrap;}
  .lang a,.lang b{min-width:32px;}
  .navtoggle > summary{padding:0 8px;}
}
/* Under ~380px even the tightened row does not fit. The brand keeps the wordmark (this brand has no
   separate mark) and gives up its "Web" tag, visually only - a screen reader still hears it. */
@media (max-width:380px){
  .masthead:has(.masthead-signin) .brand small{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
  .masthead .inner{gap:8px;}
}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font:600 15px/1 Inter,sans-serif; text-decoration:none; cursor:pointer; padding:13px 22px; border-radius:var(--radius-sm); border:1px solid transparent; min-height:44px;}
.btn-primary{background:var(--teal); color:var(--on-teal);}
.btn-primary:hover{filter:brightness(1.08);}
.btn-secondary{background:var(--teal-soft); color:var(--teal); border-color:var(--teal);}
.btn-quiet{background:transparent; color:var(--ink-2); border-color:var(--ink-3);}
.btn-quiet:hover{color:var(--ink); border-color:var(--ink);}
.btn-row{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-start;}

.hero{padding-block:64px 56px;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;}
.hero p.lede{font-size:18px; margin-top:16px;}
.hero .btn-row{margin-top:28px;}
.promises{display:flex; gap:6px 18px; flex-wrap:wrap; margin-top:22px; padding:0; list-style:none;}
.promises li{font-size:13.5px; color:var(--ink-3); display:flex; align-items:center; gap:7px;}
.promises li::before{content:""; width:5px; height:5px; border-radius:999px; background:var(--teal); flex:none;}
@media (max-width:860px){ .hero-grid{grid-template-columns:1fr; gap:32px;} }

/* Sections alternate --ground and --panel, keep the hairline; components on --panel drop the shadow. */
.band{padding-block:var(--section-y); border-top:1px solid var(--line);}
.band.panel{background:var(--panel);}
.band.panel .card{box-shadow:none;}
.band h2 + .lede{margin-bottom:24px;}

.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:16px; align-items:start;}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px;}
.card h3{font:700 15px/1.3 Inter,sans-serif;}
.card p{font-size:14.5px; line-height:1.55; color:var(--ink-2); margin:8px 0 0;}
.card-feature{border-left:3px solid var(--teal); padding:28px 20px;}
.stat{font:700 34px/1 "Barlow Condensed",sans-serif; color:var(--teal); font-variant-numeric:tabular-nums;}
.pill{display:inline-flex; align-items:center; min-height:32px; font-size:12.5px; color:var(--ink-2); background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:5px 12px;}
.callout{background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--teal); border-radius:0 var(--radius) var(--radius) 0; padding:18px 20px;}
.callout.good{border-left-color:var(--up);}
.callout.warn{border-left-color:var(--down);}
.callout p{margin:0; font-size:14.5px; color:var(--ink-2);}
.callout strong{color:var(--ink);}

.footer{background:var(--panel); border-top:1px solid var(--line); padding:44px 0 32px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px;}
.footer h4{font:600 12px/1.3 "Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3); margin:0 0 12px;}
.footer ul{list-style:none; padding:0; margin:0; display:grid; gap:9px;}
.footer a{font-size:14px; color:var(--ink-2); text-decoration:none;}
.footer a:hover{color:var(--teal);}
.footer .legal{margin-top:28px; padding-top:20px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-3);}
.footer .legal p{max-width:none; margin:0 0 4px;}
@media (max-width:820px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:480px){ .footer-grid{grid-template-columns:1fr;} }

/* ============================================================
   NEW for the web app - every rule below is listed as a decision on this sheet
   ============================================================ */

/* N1 - the "Web" brand tag. --teal on --teal-soft: 4.75:1 light. */
.brand small{font:600 12px/1 "Barlow Condensed",sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); background:var(--teal-soft); border-radius:999px; padding:4px 8px;}

/* N2 - the drawn marks inline in running text, 18px (the approved sheet draws them 22px in a row). */
.mark{width:18px; height:18px; display:inline-block; vertical-align:-3px;}
.mark.up{color:var(--up);} .mark.keep{color:var(--keep);} .mark.down{color:var(--down);}
/* A drawn check, replacing U+2713, which is outside the latin/latin-ext subset. */
.check{width:16px; height:16px; color:var(--up); flex:none; margin-top:4px;}

/* N3 - disabled: flat grey, no border, --ink-3 text. "Grey means you cannot." */
.btn[disabled]{background:var(--line); color:var(--ink-3); border-color:transparent; cursor:not-allowed;}
.btn[disabled]:hover,.btn[aria-disabled="true"]:hover{filter:none;}
.btn-quiet[aria-disabled="true"]:hover{color:var(--ink-2); border-color:var(--ink-3);}

/* Decision 3 - the destructive button, as the owner chose it (2026-09-29): a filled red with
   white text. The first draft (a red border, ink text) was too faint on the dark panel. */
.btn-danger{background:var(--danger); color:var(--on-danger); border-color:var(--danger);}
.btn-danger:hover{filter:brightness(1.08);}

/* N4 - the plan card (a stat card with a button). */
.plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; align-items:start; max-width:760px;}
.plan{padding:24px;}
.plan .top{display:flex; justify-content:space-between; align-items:center; gap:10px;}
.plan .price{display:flex; align-items:baseline; gap:8px; margin-top:10px;}
.plan .price span{color:var(--ink-2); font-size:15px;}
.plan .onsale{margin:16px 0 0; font-size:14px; color:var(--ink-2); border-top:1px solid var(--line); padding-top:12px;}
.included{list-style:none; padding:0; margin:14px 0 0; display:grid; gap:10px; max-width:68ch;}
.included li{display:flex; gap:10px; font-size:15px; color:var(--ink-2);}
.included li b{color:var(--ink);}
.faq{display:grid; gap:18px; max-width:68ch; margin-top:14px;}
.faq h3{font:700 15px/1.3 Inter,sans-serif;}
.faq p{font-size:15px; color:var(--ink-2); margin:6px 0 0;}

/* Hero illustration of the report (C designs the real one). */
.preview{padding:22px; margin:0;}
.preview figcaption{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap;}
.preview .stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:16px;}
.preview .stats div{background:var(--ground); border-radius:var(--radius-sm); padding:12px;}
.preview .stats .label{display:block; margin-top:6px; hyphens:auto;}
.preview .marksum{display:flex; gap:18px; flex-wrap:wrap; margin-top:16px; font-size:14.5px; color:var(--ink-2);}
.preview .marksum b{color:var(--ink); font-variant-numeric:tabular-nums;}
.preview .pr{margin:16px 0 0; padding-top:14px; border-top:1px solid var(--line); font-size:14.5px; color:var(--ink-2); max-width:none;}
.preview .pr b{color:var(--ink);}

/* Sign in with Google - Google's branding for a custom button (checked 2026-09-30): Google Sans
   Medium 14/20, their 20px "G" (img/google-g.png, from their pre-approved bundle), 12px before it, 10px
   after it, 12px after the text, 4px corners, their colours (--g-*). 44px tall rather than their 40px:
   every target here is 44px. */
.gbtn{display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 12px; background:var(--g-fill); color:var(--g-ink); border:1px solid var(--g-stroke); border-radius:4px; font:500 14px/20px "Google Sans", Inter, sans-serif; text-decoration:none; cursor:pointer;}
.gbtn img{width:20px; height:20px; flex:none;}
.signin{max-width:560px; padding-block:56px 64px;}
.signin .card{padding:28px; margin-top:24px;}
.signin .fine{font-size:13.5px; color:var(--ink-2); margin:16px 0 0;}

/* Decision 1 - the console shell: a side rail. Current item = a 3px --teal edge bar
   (5.96:1 light, 7.88:1 dark on --panel) plus --ink text at 600: the masthead's
   underline turned 90 degrees, and the callouts' left edge. No filled pill. */
/* The shell fills the viewport and the rail stays sticky at its full height. The sheet's 600px
   minimum was its frame's, not the page's: the rail stopped at 600px on a taller screen, and below
   860px the spare height was shared out to the top bar (ui-critic on A3). */
.console{display:grid; grid-template-columns:232px minmax(0,1fr); min-height:100vh; min-height:100dvh; background:var(--ground);}
.rail{background:var(--panel); border-right:1px solid var(--line); padding:18px 12px; display:flex; flex-direction:column; gap:2px; position:sticky; top:0; height:100vh; height:100dvh; overflow-y:auto;}
.rail .brand{padding:6px 12px 16px;}
.rail-links{display:flex; flex-direction:column; gap:2px;}
.rail-links a{display:flex; align-items:center; min-height:44px; padding:0 12px; border-left:3px solid transparent; color:var(--ink-2); text-decoration:none; font-size:14.5px; font-weight:500;}
.rail-links a:hover{color:var(--ink);}
.rail-links a[aria-current="page"]{border-left-color:var(--teal); color:var(--ink); font-weight:600;}
.rail .group{margin:14px 15px 2px;}
.rail .spacer{flex:1; min-height:16px;}
.rail-foot{border-top:1px solid var(--line); padding:12px 12px 0; display:grid; gap:4px; font-size:13px; color:var(--ink-2);}
.rail-foot .who{overflow-wrap:anywhere; color:var(--ink);}
.rail-foot .row{display:flex; align-items:center; gap:4px; flex-wrap:wrap;}
/* Sign out with its failure line under it (Layout/SignOutButton.razor); in the rail foot it shares the
   row with EN/DE, as in the mockup. */
.signout-wrap{display:inline-flex; flex-direction:column; align-items:flex-start;}
.rail-foot .row .signout-wrap{margin-right:auto;}
.railpanel .signout-wrap{display:flex; align-items:stretch;}
.rail-foot .legalrow{display:flex; flex-wrap:wrap; gap:4px 12px; font-size:12.5px;}
.rail-foot .legalrow a{color:var(--ink-2); display:inline-flex; align-items:center; min-height:32px;}
.railmenu{display:none;}
.console main{padding:32px 36px 44px; min-width:0;}
.console main h1{font-size:clamp(34px,4.4vw,48px);}
.console .legal-foot{display:none;}
@media (max-width:860px){
  .console{grid-template-columns:1fr; grid-template-rows:auto 1fr;}
  .rail{position:relative; height:auto; overflow:visible; flex-direction:row; align-items:center; border-right:0; border-bottom:1px solid var(--line); padding:10px 16px; min-height:64px;}
  .rail .brand{padding:0;}
  .rail-links,.rail .group,.rail .spacer,.rail-foot{display:none;}
  .railmenu{display:block; margin-left:auto;}
  .railmenu > summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:0 12px; border:1px solid var(--ink-3); border-radius:var(--radius-sm); color:var(--ink); font:600 14px Inter,sans-serif;}
  .railmenu > summary::-webkit-details-marker{display:none;}
  .railmenu[open] > .railpanel{position:absolute; left:0; right:0; top:100%; background:var(--panel); border-bottom:1px solid var(--line); padding:8px 0 12px; z-index:20;}
  .railpanel a{display:flex; align-items:center; min-height:48px; padding:0 16px; color:var(--ink); text-decoration:none; font-size:16px; font-weight:500; border-left:3px solid transparent;}
  .railpanel a[aria-current="page"]{border-left-color:var(--teal); font-weight:600;}
  .console main{padding:24px 16px 32px;}
  .console .legal-foot{display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:32px; padding-top:16px; border-top:1px solid var(--line); font-size:13px;}
  .console .legal-foot a{color:var(--ink-2); display:inline-flex; align-items:center; min-height:44px;}
}

/* Decision 2 - account page. */
.acct{display:grid; gap:16px; max-width:760px; margin-top:22px;}
.acct .card h2{font-size:24px;}
.kv{display:grid; grid-template-columns:150px minmax(0,1fr); gap:8px 16px; margin:14px 0 0; font-size:14.5px;}
.kv dt{color:var(--ink-3);}
.kv dd{margin:0; color:var(--ink); overflow-wrap:anywhere;}
@media (max-width:520px){ .kv{grid-template-columns:1fr; gap:2px;} .kv dd{margin-bottom:8px;} }
.devices{list-style:none; margin:14px 0 0; padding:0; display:grid;}
.devices li{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; padding:12px 0; border-top:1px solid var(--line); align-items:center;}
.devices li:first-child{border-top:0;}
.devices b{font-size:15px;}
.devices .meta{grid-column:1 / -1; font-size:13px; color:var(--ink-2);}
.devices .this{grid-row:1; grid-column:2; font-size:12.5px; color:var(--teal); background:var(--teal-soft); border-radius:999px; padding:3px 10px;}
.devices .stale{grid-row:1; grid-column:2; font-size:12.5px; color:var(--ink-2); border:1px solid var(--line); border-radius:999px; padding:3px 10px;}
/* On a phone the badge takes its own row under the name: beside it, the German "Seit 30 Tagen nicht
   benutzt" left the device name a third of the card (A3 screenshots). */
@media (max-width:520px){ .devices li{grid-template-columns:minmax(0,1fr);} .devices .this,.devices .stale{grid-row:auto; grid-column:1; justify-self:start;} }
.acct .btn-row{margin-top:16px;}
.confirm{margin-top:14px; padding:16px; background:var(--ground); border:1px solid var(--line); border-radius:var(--radius-sm);}
.confirm label{display:grid; grid-template-columns:22px 1fr; gap:10px; font-size:14.5px; color:var(--ink-2); align-items:start; cursor:pointer;}
.confirm input{width:20px; height:20px; margin:2px 0 0; accent-color:var(--teal);}
.gate{max-width:640px;}
.gate .callout{margin-top:20px;}
.loading{display:flex; align-items:center; gap:12px; font-size:15px; color:var(--ink-2); margin-top:20px;}

/* ---- the build's own additions ---- */
/* The footer's column heads are h2 in the markup (a real outline); they look like the sheet's h4. */
.footer .footer-head{font:600 12px/1.3 "Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3); margin:0 0 12px;}
main:focus{outline:none;}
/* The symbol sprite (Layout/Sprites.razor): no box, no layout. A class, not a style attribute - the CSP
   has no 'unsafe-inline', so no element may carry style="". */
.sprites{position:absolute; width:0; height:0; overflow:hidden;}
/* The mockup's one-off spacing, as classes for the same reason - and !important, because the inline
   styles they replace always won, and a helper that loses to .callout p or .card p does nothing. */
.mt-16{margin-top:16px !important;} .mt-20{margin-top:20px !important;} .mt-24{margin-top:24px !important;} .mt-48{margin-top:48px !important;}
.plans-narrow{max-width:760px;}
.signin-page{padding-block:56px 64px;}
.page-pad{padding-block:56px;}
.mt-8{margin-top:8px !important;} .mt-12{margin-top:12px !important;} .mt-14{margin-top:14px !important;}
.h-callout{font-size:24px;}
/* Sign out is a button (it POSTs), dressed as the rail's link and the menu panel's rows. */
.rail-foot button.signout{display:inline-flex; align-items:center; min-height:44px; padding:0; border:0; background:none; color:var(--teal); font:600 13px Inter,"Inter fallback",sans-serif; cursor:pointer; margin-right:auto;}
.railpanel button.signout{display:flex; width:100%; align-items:center; min-height:48px; padding:0 16px; border:0; border-left:3px solid transparent; background:none; color:var(--ink); font:500 16px Inter,"Inter fallback",sans-serif; text-align:left; cursor:pointer;}
/* Busy: a button whose request is running says so in its label ("Signing out…") and ignores clicks
   (aria-disabled, not disabled: disabled is the flat grey of "you cannot", and it drops the keyboard
   focus to <body>). Its neighbours wait with it. */
.btn[aria-disabled="true"], button.signout[aria-disabled="true"]{cursor:progress;}
button.signout[disabled]{opacity:.6; cursor:progress;}
/* A failed action says so next to the button that failed, not at the end of the page. */
.act-failed{margin:10px 0 0; font-size:14px; color:var(--ink); border-left:3px solid var(--down); padding-left:10px; max-width:68ch;}
.rail-foot .act-failed{margin:0 0 6px; font-size:12.5px;}
.railpanel .act-failed{margin:4px 16px 8px;}
/* An element focused by the page rather than by Tab - an outcome callout on load (data-focus,
   Routes.razor), the delete heading a link lands on - is where a screen reader starts, not a control:
   no ring on it. */
[tabindex="-1"]:focus{outline:none;}
/* The console without its runtime: scripts off (noscript), or the runtime failed (Blazor's own
   error UI, which blazor.web.js shows by setting its display). */
.console .noscript{margin-bottom:20px;}
#blazor-error-ui{display:none; position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--panel); border-top:3px solid var(--down); padding:14px var(--gutter); font-size:14.5px; color:var(--ink);}
#blazor-error-ui a{margin-left:12px; font-weight:600;}
/* The account's devices: when no phone is signed in with it, the list says so. */
.devices-none{margin:12px 0 0; font-size:14px; color:var(--ink-2);}
/* The illustration tag (from the mockup sheet's own chrome, which the build dropped). */
.example{font:600 11px/1 "Barlow Condensed",sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); border:1px dashed var(--ink-3); border-radius:999px; padding:4px 8px; display:inline-block;}
/* The legal pages' long-form prose (rendered from release/*.md by LegalTexts): one readable column,
   the same headings as elsewhere, generous spacing between sections. */
.prose{max-width:760px;}
.prose h1{margin-bottom:12px;}
.prose h2{font-size:clamp(22px,2.6vw,27px); margin:36px 0 10px;}
.prose p,.prose li{color:var(--ink-2); max-width:68ch;}
.prose strong{color:var(--ink);}
.prose ul{padding-left:20px; margin:0 0 1em;}
.prose li{margin-bottom:6px;}
.prose em{color:var(--ink-3);}
.footer .legal{margin-top:28px; padding-top:20px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-3);}