/* ==========================================================================
   CitedGroup - citedgroup.ca
   World: The Printout. Receipt slips on an ink counter and a grey-green page.
   Type: Geist (prose, display) + Geist Mono (everything printed), self-hosted.
   Lime is a highlighter: one swipe per viewport, on the missing name or the action.
   Shapes: buttons are pills; paper is square with torn edges; nothing else is rounded.
   ========================================================================== */

@font-face{font-family:'Geist';font-style:normal;font-weight:300 800;font-display:swap;
  src:url('/assets/fonts/geist-latin.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;}
@font-face{font-family:'Geist';font-style:normal;font-weight:300 800;font-display:swap;
  src:url('/assets/fonts/geist-latin-ext.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;}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('/assets/fonts/geistmono-latin.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;}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('/assets/fonts/geistmono-latin-ext.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;}

/* ---------- tokens ---------- */
:root{
  --page:#F2F3F0;          /* brand paper */
  --page-2:#E8EAE3;        /* a shade darker, for banded sections */
  --text:#12181B;          /* brand ink */
  --muted:#535D61;
  --line:rgba(18,24,27,.14);
  --line-strong:rgba(18,24,27,.3);

  --counter:#12181B;       /* the ink counter the slips are handed across */
  --on-counter:#F2F3F0;
  --on-counter-2:rgba(242,243,240,.74);
  --on-counter-3:rgba(242,243,240,.6);

  --slip:#FBFBF8;          /* receipt paper stays paper in both themes */
  --print:#171D20;
  --faded:#5E676B;
  --print-line:rgba(23,29,32,.34);

  --lime:#D8E84B;
  --lime-hover:#E4F266;

  --shadow-counter:drop-shadow(0 22px 26px rgba(0,0,0,.42)) drop-shadow(0 2px 3px rgba(0,0,0,.3));
  --shadow-page:drop-shadow(0 16px 22px rgba(18,24,27,.13)) drop-shadow(0 1px 2px rgba(18,24,27,.1));

  --sans:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --gut:clamp(1rem,5vw,4rem);
  --maxw:1200px;
  --pad:clamp(4.5rem,9vw,7.5rem);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --page:#0C1113;
    --page-2:#121A1D;
    --text:#E8EBE5;
    --muted:#A2ABA7;
    --line:rgba(232,235,229,.12);
    --line-strong:rgba(232,235,229,.28);
    --counter:#172024;
    --slip:#EFF0EA;
    --shadow-page:drop-shadow(0 18px 24px rgba(0,0,0,.5)) drop-shadow(0 1px 2px rgba(0,0,0,.4));
    color-scheme:dark;
  }
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--page);color:var(--text);
  font-family:var(--sans);font-size:clamp(1rem,.96rem + .2vw,1.0625rem);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  caret-color:var(--text);
  overflow-wrap:break-word;
}
/* No sideways scroll on phones, even if a long word or a rotated slip pokes past the edge.
   clip, unlike hidden, doesn't create a scroll container, so the sticky nav still sticks. */
html,body{overflow-x:clip}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:500;letter-spacing:-.03em;line-height:1.06;text-wrap:balance}
ul,ol{margin:0;padding:0;list-style:none}
img,svg{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
b{font-weight:600}
hr{margin:0}
::selection{background:var(--lime);color:#12181B}
html{scrollbar-color:var(--line-strong) transparent}
:focus-visible{outline:2px solid var(--text);outline-offset:3px}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--pad)}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--lime);color:#12181B;padding:.6rem 1rem;border-radius:999px;font-weight:600;text-decoration:none}
.skip:focus{top:.75rem}

h2{font-size:clamp(2rem,1.3rem + 2.6vw,3.25rem);letter-spacing:-.035em}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;white-space:nowrap;
  font:600 .98rem/1 var(--sans);letter-spacing:-.01em;
  padding:1rem 1.5rem;border-radius:999px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:transform 160ms var(--ease-out),background-color 200ms ease,border-color 200ms ease,color 200ms ease;
}
.btn:active{transform:scale(.97)}
.btn-lime{background:var(--lime);color:#12181B}
.btn-line{color:var(--on-counter);border-color:rgba(242,243,240,.32)}
.btn-line-ink{color:var(--text);border-color:var(--line-strong)}
.btn-sm{padding:.7rem 1.1rem;font-size:.875rem}
.btn-block{width:100%}
.btn[aria-busy="true"]{opacity:.65;pointer-events:none}
.btn:focus-visible{outline-offset:3px}
.counter .btn:focus-visible,.nav .btn:focus-visible{outline-color:var(--on-counter)}
.nav-cta.is-lime{background:var(--lime);border-color:var(--lime);color:#12181B}
@media (hover:hover) and (pointer:fine){
  .btn-lime:hover{background:var(--lime-hover)}
  .btn-line:hover{border-color:var(--on-counter)}
  .nav-cta.is-lime:hover{background:var(--lime-hover);border-color:var(--lime-hover)}
  .btn-line-ink:hover{border-color:var(--text)}
}

/* ---------- nav: the top edge of the counter ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--counter);color:var(--on-counter);border-bottom:1px solid rgba(242,243,240,.08)}
.nav-in{height:64px;display:flex;align-items:center;gap:1.5rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;margin-right:auto}
.brand svg{width:26px;height:26px}
.brand b{font-size:1.02rem;letter-spacing:-.028em}
.nav-links{display:flex;gap:1.75rem}
.nav-links a{font-size:.92rem;color:var(--on-counter-2);text-decoration:none;transition:color 200ms ease}
.nav-links a:hover{color:var(--on-counter)}
.nav a:focus-visible{outline-color:var(--on-counter)}
@media (max-width:760px){.nav-links{display:none}}
@media (max-width:460px){.brand b{display:none}}
@media (max-width:340px){.nav-cta{padding-inline:.8rem;font-size:.8rem}}

/* Mobile menu: a <details> disclosure, so it opens with JS off. main.js closes it
   after a link is chosen, on Escape, and on a tap outside. The panel hangs from the
   sticky nav, which is its containing block. */
.menu{display:none}
.menu-btn{
  list-style:none;cursor:pointer;display:grid;place-items:center;
  width:44px;height:44px;margin-right:-10px;color:var(--on-counter);
  -webkit-tap-highlight-color:transparent;
}
.menu-btn::-webkit-details-marker{display:none}
.menu-btn:focus-visible{outline-color:var(--on-counter);outline-offset:-2px}
.burger,.burger::before,.burger::after{display:block;width:20px;height:1.5px;background:currentColor}
.burger{position:relative;transition:background-color 120ms ease}
.burger::before,.burger::after{content:'';position:absolute;left:0;transition:transform 200ms var(--ease-out)}
.burger::before{top:-6px}
.burger::after{top:6px}
.menu[open] .burger{background-color:transparent}
.menu[open] .burger::before{transform:translateY(6px) rotate(45deg)}
.menu[open] .burger::after{transform:translateY(-6px) rotate(-45deg)}
.menu-panel{
  position:absolute;left:0;right:0;top:100%;
  background:var(--counter);border-bottom:1px solid rgba(242,243,240,.08);
  padding:.25rem var(--gut) 1.5rem;box-shadow:0 18px 24px rgba(0,0,0,.28);
}
.menu-panel a{
  display:block;padding-block:.95rem;border-bottom:1px dashed rgba(242,243,240,.18);
  font-size:1.3rem;font-weight:500;letter-spacing:-.025em;color:var(--on-counter);text-decoration:none;
}
.menu-panel .menu-mail{margin-top:.4rem;border-bottom:0;font-size:.92rem;font-weight:400;letter-spacing:0;color:var(--on-counter-2);text-decoration:underline}
@media (max-width:760px){
  .menu{display:block}
  .nav-in{gap:.5rem}
}

/* ---------- hero: the counter ---------- */
.counter{background:var(--counter);color:var(--on-counter);overflow:hidden}
.hero{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(2.5rem,5vw,4.5rem);align-items:center;
  padding-block:clamp(2.75rem,6vw,5rem) clamp(3.5rem,7vw,5.5rem);
}
.hero h1{font-size:clamp(2.4rem,1rem + 4.1vw,4.4rem);letter-spacing:-.04em;line-height:1.02;max-width:15ch}
.lede{margin-top:1.5rem;font-size:clamp(1.06rem,1rem + .4vw,1.3rem);line-height:1.5;color:var(--on-counter-2);max-width:40ch;letter-spacing:-.012em}
.hero-note{margin-top:1rem;font:400 .82rem/1.5 var(--mono);color:var(--on-counter-3)}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.25rem}
.hero-slip{margin:0;justify-self:center;width:100%;max-width:25rem}
.hero-slip .drop{filter:var(--shadow-counter);transform:rotate(-1.4deg)}
.hero-slip figcaption{margin-top:1.4rem;font-size:.8rem;line-height:1.5;color:var(--on-counter-3)}
@media (max-width:640px){
  .hero{padding-top:2rem}
  .hero .cta-row{margin-top:1.75rem}
}
@media (max-width:1000px){
  .hero{grid-template-columns:1fr}
  .hero-slip{justify-self:start;max-width:24rem}
}

/* ---------- the slip: shared receipt material ---------- */
.drop{filter:var(--shadow-page)}
.slip{
  --tooth:14px;
  background:var(--slip);color:var(--print);
  font:400 .84rem/1.6 var(--mono);font-variant-numeric:tabular-nums;
  padding:1.9rem 1.4rem;
  -webkit-mask:
    conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/var(--tooth) 51% repeat-x,
    conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/var(--tooth) 51% repeat-x;
          mask:
    conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/var(--tooth) 51% repeat-x,
    conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/var(--tooth) 51% repeat-x;
}
.slip ::selection{background:var(--lime);color:#12181B}
.s-head{display:flex;justify-content:space-between;gap:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;font-size:.78rem}
.s-meta{color:var(--faded);font-size:.78rem}
.s-rule{border:0;border-top:1px dashed var(--print-line);margin:.85rem 0}
.s-rule-bold{border-top:3px double var(--print)}
.s-q{font-size:.86rem;line-height:1.5}
.s-label{text-transform:uppercase;letter-spacing:.07em;font-size:.72rem;color:var(--faded);margin-bottom:.35rem}
.s-list li{padding-block:.1rem}
.s-sources li{padding-block:.05rem}
.s-total{font-weight:600;text-transform:uppercase;letter-spacing:.03em}

/* a printed row: label, dotted leader, value */
.r{display:flex;align-items:baseline;gap:.6ch}
.r > :first-child{min-width:0}
.r .n{flex:none;width:1.6ch;color:var(--faded)}
.r .l{flex:1 1 2ch;min-width:2ch;border-bottom:1.5px dotted var(--print-line);transform:translateY(-.3em)}
.r .l-none{border-bottom-color:transparent}
.r .v{flex:none;text-align:right}
.rd{flex:none;display:inline-block;width:var(--w);max-width:58%;height:.82em;background:var(--print);transform:translateY(.1em)}
.hl{background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 60%/100% 88%;color:#12181B;padding-inline:.25ch;margin-inline:-.25ch;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* The one authored moment: the hero slip feeds out line by line, then gets highlighted. */
@media (prefers-reduced-motion:no-preference){
  .print{animation:feed 1.5s steps(19,end) .3s both}
  .print .hl{animation:swipe .5s var(--ease-out) 1.95s both}
  /* When the slip's last line starts below the fold (phones), skip the feed and
     swipe the highlight when that line scrolls into view instead. main.js adds these. */
  .print.late{animation:none}
  .print.late .hl{animation:none;background-size:0% 88%;transition:background-size .6s var(--ease-out) .15s}
  .print.late.seen .hl{background-size:100% 88%}
}
@keyframes feed{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes swipe{from{background-size:0% 88%}to{background-size:100% 88%}}

/* ---------- problem: two sourced facts and one statement ---------- */
.problem h2{max-width:20ch}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem clamp(2rem,5vw,5rem);margin-top:clamp(2.25rem,5vw,3.5rem)}
.facts li{border-top:2px dashed var(--line-strong);padding-top:1.4rem}
.fact-n{font:600 clamp(2.6rem,1.8rem + 3vw,4rem)/1 var(--mono);letter-spacing:-.04em;margin-bottom:.8rem;font-variant-numeric:tabular-nums}
.facts li p:last-child{color:var(--muted);font-size:1.06rem;max-width:36ch}
.statement{margin-top:clamp(2.5rem,5vw,3.75rem);font-size:clamp(1.4rem,1.05rem + 1.5vw,2.2rem);line-height:1.25;letter-spacing:-.024em;font-weight:500;max-width:30ch;text-wrap:pretty}
.cite{
  display:inline-block;vertical-align:super;margin-left:.3em;
  font:600 .62rem/1 var(--mono);padding:.3em .45em;border:1px solid var(--line-strong);
  text-decoration:none;color:var(--text);transform:translateY(-.1em);
}
.cite:hover{border-color:var(--text)}
.sources{display:flex;flex-wrap:wrap;gap:.5rem 2.5rem;margin-top:2rem;counter-reset:src;font:400 .8rem/1.5 var(--mono);color:var(--muted)}
.sources li{counter-increment:src;display:flex;gap:.6ch}
.sources li::before{content:counter(src)}
.sources a{color:var(--muted)}
.sources a:hover{color:var(--text)}
.sources li:target a{background:var(--lime);color:#12181B}
@media (max-width:640px){.facts{grid-template-columns:1fr}}

/* ---------- how: three stations on one tape ---------- */
.how{background:var(--page-2)}
.how h2{max-width:16ch}
.tape{margin-top:clamp(2.5rem,5vw,4rem);border-bottom:2px dashed var(--line-strong)}
.station{
  display:grid;grid-template-columns:minmax(7rem,.55fr) minmax(0,1fr);gap:1rem clamp(1.5rem,5vw,5rem);
  padding-block:clamp(1.75rem,3.5vw,2.75rem);border-top:2px dashed var(--line-strong);
}
.station h3{font-size:clamp(2rem,1.5rem + 1.9vw,3rem);letter-spacing:-.035em}
.st-body{max-width:36rem}
.st-body > p:first-child{color:var(--muted);font-size:1.06rem;margin-bottom:1.1rem}
.st-line,.mini .r{font:400 .84rem/1.9 var(--mono);font-variant-numeric:tabular-nums}
.st-line .l,.mini .l{border-bottom-color:var(--line-strong)}
.st-note{margin-top:1rem;font-size:.92rem;line-height:1.55;color:var(--muted);max-width:52ch}
.mini{border:1px solid var(--line-strong);padding:.6rem 1rem;max-width:24rem}
.mini .r:first-child{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:.72rem}
@media (max-width:640px){.station{grid-template-columns:1fr}}

/* ---------- included: the deliverables, as cards on one sheet ---------- */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(1.5rem,3vw,2.5rem);margin-top:clamp(2.5rem,5vw,3.5rem)}
.card{border-top:2px dashed var(--line-strong);padding-block:1.5rem 2.25rem}
.card-k{font:500 .78rem/1 var(--mono);color:var(--muted);letter-spacing:.06em;margin-bottom:1rem}
.card h3{font-size:clamp(1.35rem,1.15rem + .7vw,1.65rem);letter-spacing:-.03em;margin-bottom:.7rem}
.card p:last-child{color:var(--muted);max-width:40ch}
.inc-notes{border-top:2px dashed var(--line-strong);padding-top:1.5rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem clamp(1.5rem,3vw,2.5rem)}
.inc-notes p{color:var(--muted);max-width:52ch}
.inc-notes b{color:var(--text)}
@media (max-width:900px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cards,.inc-notes{grid-template-columns:1fr}}

/* ---------- city: one practice per city, on the counter ---------- */
.city-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2.5rem,6vw,6rem);align-items:center;padding-block:var(--pad)}
.city-copy h2{max-width:12ch}
.city-copy p{margin-top:1.5rem;font-size:clamp(1.06rem,1rem + .4vw,1.3rem);line-height:1.5;color:var(--on-counter-2);max-width:34ch}
.city-drop{filter:var(--shadow-counter);transform:rotate(1.2deg);width:100%;max-width:min(24rem,100%);justify-self:center}
@media (max-width:900px){.city-grid{grid-template-columns:1fr}.city-drop{justify-self:start}}

/* ---------- the Cited Guarantee: one printed certificate ---------- */
.g-drop{max-width:min(46rem,100%);margin-inline:auto}
.g-slip{padding:2.4rem clamp(1.4rem,5vw,3rem)}
.g-slip h2{font:500 clamp(2rem,1.5rem + 2vw,3rem)/1.05 var(--sans);letter-spacing:-.04em;color:var(--print);margin-block:1.25rem 1rem}
.g-body{font:400 clamp(1.08rem,1rem + .45vw,1.3rem)/1.5 var(--sans);letter-spacing:-.012em;color:var(--print);max-width:40ch}
.g-fine{display:grid;gap:.55rem;font-size:.8rem;line-height:1.55;color:var(--faded)}
.g-fine li{display:flex;gap:1ch}
.g-fine li::before{content:'*';flex:none;color:var(--print)}

/* ---------- pricing: two itemized slips, no checkout ---------- */
.pricing{background:var(--page-2)}
.pricing-head{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:1.25rem clamp(2rem,5vw,5rem);align-items:end}
.pricing-head p{color:var(--muted);font-size:1.06rem;max-width:40ch}
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,25rem));justify-content:start;gap:clamp(1.75rem,4vw,3rem);margin-top:clamp(2.5rem,5vw,3.5rem)}
.plan-drop{width:100%}
.bill{padding-block:2.1rem;height:100%;display:flex;flex-direction:column}
.bill .btn-block{margin-top:auto}
.bill-items{display:grid;gap:.45rem;margin-bottom:.25rem}
.bill-items li{display:flex;gap:1ch}
.bill-items li::before{content:'+';flex:none;color:var(--faded)}
.bill > .s-rule:last-of-type{margin-bottom:1.1rem}
.spots{background:var(--print);color:var(--slip);padding:.05em .5ch;letter-spacing:.05em;white-space:nowrap}
.bill .s-head{flex-wrap:wrap;row-gap:.4rem}
.total{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:.35rem 1rem}
.total-k{text-transform:uppercase;letter-spacing:.07em;font-size:.74rem;font-weight:600}
.total-v{grid-column:2;text-align:right;font-size:.84rem}
.total-v b{font:600 clamp(2rem,1.7rem + 1.2vw,2.5rem)/1 var(--mono);letter-spacing:-.02em}
.total-alt{color:var(--faded)}
.plans-note{margin-top:2rem;color:var(--muted);max-width:52ch}
.fine{margin-top:.8rem;font-size:.74rem;color:var(--faded);text-align:center}
@media (max-width:860px){
  .pricing-head{grid-template-columns:1fr}
  .plans{grid-template-columns:minmax(0,27rem)}
}

/* ---------- scan: the request ticket ---------- */
.scan{background:var(--page-2)}
.scan-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:2rem clamp(3rem,6vw,6rem);align-items:start}
.scan-copy h2{max-width:13ch}
@media (max-width:900px){.scan-grid{grid-template-columns:1fr}}
.scan-sub{margin-top:1.25rem;color:var(--muted);font-size:1.06rem;max-width:48ch}
.ticket-drop{max-width:44rem}
.ticket{padding:2.1rem clamp(1.25rem,4vw,2.25rem)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 1.75rem;margin-block:1.4rem 1.6rem}
.field-wide{grid-column:1/-1}
@media (max-width:640px){.fields{grid-template-columns:1fr}}
.field label{display:block;font:500 .9rem/1.3 var(--sans);letter-spacing:-.01em;color:var(--print);margin-bottom:.35rem}
.field .opt{font-weight:400;color:var(--faded)}
.field input:not([type="checkbox"]),.field select{
  width:100%;font:400 1rem/1.4 var(--sans);color:var(--print);caret-color:var(--print);
  background:transparent;border:0;border-bottom:1.5px solid var(--print);border-radius:0;
  padding:.5rem .15rem;transition:background-color 160ms ease;
}
.field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:1.6rem;
  background:linear-gradient(45deg,transparent 50%,var(--print) 50%) right .55rem center/5px 5px no-repeat,
             linear-gradient(-45deg,transparent 50%,var(--print) 50%) right .25rem center/5px 5px no-repeat;
}
.field select:invalid{color:var(--faded)}
.field select option{color:#12181B}
.field input:focus-visible,.field select:focus-visible{outline:2px solid var(--print);outline-offset:3px;background-color:rgba(216,232,75,.28)}
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{border-bottom-color:#A3261A;border-bottom-width:2px}
.checks{border:0;margin:0;padding:0;min-width:0}
.checks legend{padding:0;font:500 .9rem/1.3 var(--sans);letter-spacing:-.01em;color:var(--print)}
.checks .hint{margin-top:.25rem}
.check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.15rem 1rem;margin-top:.6rem}
.check-grid label{display:flex;align-items:center;gap:.6rem;min-height:44px;font:400 .98rem/1.3 var(--sans);color:var(--print);cursor:pointer}
.check-grid input{width:1.15rem;height:1.15rem;margin:0;flex:none;accent-color:#12181B}
.check-grid input:focus-visible{outline:2px solid var(--print);outline-offset:2px}
.checks[aria-invalid="true"] legend{color:#A3261A}
.hint{margin-top:.35rem;font-size:.8rem;color:var(--faded)}
.err{margin-top:.35rem;font:500 .82rem/1.4 var(--sans);color:#A3261A}
.hp{display:none}
.ticket .btn-block{font-size:1rem}
.form-error{margin-top:1rem;padding:.75rem .9rem;border:1px solid #A3261A;color:#A3261A;font:500 .88rem/1.5 var(--sans)}
.form-error a{color:inherit}
.done .done-h{font:500 clamp(1.3rem,1.15rem + .6vw,1.6rem)/1.25 var(--sans);letter-spacing:-.025em;margin-block:1rem}
.done p:not(.s-head):not(.done-h):not(.fine){font:400 .95rem/1.55 var(--sans)}
.done:focus{outline:none}

/* ---------- faq ---------- */
.faq-wrap{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:2rem clamp(2rem,6vw,6rem);align-items:start}
@media (max-width:860px){.faq-wrap{grid-template-columns:1fr}}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:center;
  padding-block:1.35rem;font-size:clamp(1.02rem,.98rem + .3vw,1.18rem);font-weight:500;letter-spacing:-.018em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';width:14px;height:14px;flex:none;
  background:linear-gradient(currentColor,currentColor) center/14px 1.5px no-repeat,
             linear-gradient(currentColor,currentColor) center/1.5px 14px no-repeat;
  transition:transform 200ms var(--ease-out);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:focus-visible{outline-offset:4px}
.faq .ans{padding-bottom:1.5rem;color:var(--muted);max-width:60ch}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding-block:var(--pad) 2.5rem}
.foot-h{font-size:clamp(2.2rem,1.4rem + 3.4vw,4.1rem);font-weight:500;letter-spacing:-.04em;line-height:1.02;max-width:14ch;text-wrap:balance}
.foot-bottom{margin-top:clamp(3.5rem,7vw,5.5rem);padding-top:1.5rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 2rem;justify-content:space-between;font-size:.86rem;color:var(--muted)}
.foot-links{display:flex;gap:0 1.5rem;flex-wrap:wrap}
/* Padding, not font size, makes these comfortable to tap on a phone. */
.foot-links a{display:inline-block;padding-block:.5rem;text-decoration:none}
.foot-links a:hover{color:var(--text)}
/* The compact footer on the inner pages: just the bottom line. */
.foot-sm{padding-block:1rem 2rem}
.foot-sm .foot-bottom{margin-top:0;padding-top:0;border-top:0}

/* ---------- small pages (thanks, scan-sent, 404) ---------- */
.plain{min-height:calc(100dvh - 64px);display:flex;align-items:center;padding-block:3rem}
.plain-drop{width:100%;max-width:34rem}
.plain h1{font:500 clamp(1.8rem,1.4rem + 1.6vw,2.4rem)/1.1 var(--sans);letter-spacing:-.035em;margin-block:1.1rem .9rem;color:var(--print)}
.plain .slip p:not(.s-head){font:400 1rem/1.6 var(--sans);color:var(--print);margin-bottom:.75rem}
.plain .slip a{color:var(--print)}
.plain .cta-row{margin-top:1.1rem}
.btn-line-slip{color:var(--print);border-color:var(--print-line)}
@media (hover:hover) and (pointer:fine){.btn-line-slip:hover{border-color:var(--print)}}
/* Keep the slip centred in the space above the footer where :has() is supported;
   elsewhere the footer simply sits below the first screen. */
body:has(> main.plain){display:flex;flex-direction:column;min-height:100dvh}
body:has(> main.plain) > main.plain{flex:1 0 auto;min-height:0}
/* 404: where everything is, printed as receipt rows */
.lost{margin-block:.25rem .75rem}
.lost a{text-decoration:none;padding-block:.45rem}
.lost a > :first-child{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.lost .v{color:var(--faded)}

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

/* ---------- terms and privacy ---------- */
.legal{padding-block:clamp(3rem,6vw,4.5rem) clamp(4rem,8vw,6rem);max-width:min(70ch,var(--maxw))}
.legal h1{font-size:clamp(2.2rem,1.6rem + 2.4vw,3.2rem);letter-spacing:-.04em}
.legal h2{font-size:1.2rem;font-weight:600;letter-spacing:-.02em;margin:2.75rem 0 .75rem}
.legal p,.legal li{color:var(--muted);max-width:68ch}
.legal p{margin-bottom:1rem}
.legal ul{list-style:disc;padding-left:1.2rem;margin-bottom:1rem}
.legal li{margin-bottom:.5rem}
.legal strong{color:var(--text);font-weight:600}
.legal a{color:var(--text)}
.legal .updated{font:400 .82rem/1.6 var(--mono);color:var(--faded);margin-top:.75rem}
.legal h1 + .updated{margin-bottom:2rem}

/* ---------- narrow screens (down to 320px) ---------- */
.hero-slip{max-width:min(25rem,100%)}
.ticket-drop{max-width:min(44rem,100%)}
.plain-drop{max-width:min(34rem,100%)}
/* Receipt rows wrap instead of overflowing: the value drops to its own line. */
.r{flex-wrap:wrap}
.r .v{margin-left:auto}
.rd{max-width:100%}
@media (max-width:360px){
  .slip{padding-inline:1.1rem;font-size:.8rem}
  .s-q{font-size:.82rem}
  .total-v b{font-size:1.9rem}
}

/* ---------- focus rings on the pale receipts ---------- */
/* Page tokens flip with the theme; receipt paper does not, so inherited focus
   colours can land at ~1:1 on the slips in dark mode. Pin them to the print ink. */
.slip :focus-visible{outline:2px solid var(--print);outline-offset:3px}
.slip .btn-lime:focus-visible{outline-color:#12181B}