:root{
  --brand-50:#EFF6FF;--brand-100:#DBEAFE;--brand-600:#2563EB;
  --brand-700:#1D4ED8;--brand-800:#1E40AF;
  --teal-50:#F0FDFA;--teal-600:#0D9488;--teal-700:#0F766E;
  --violet-700:#6D28D9;
  --ink:#0F172A;--ink-muted:#475569;--ink-faint:#64748B;
  --surface:#FFFFFF;--surface-2:#F8FAFC;--surface-3:#F1F5F9;
  --line:#E2E8F0;--line-strong:#CBD5E1;
  --field-border:#94A3B8;
  --ok:#15803D;--ok-bg:#F0FDF4;--ok-line:#BBF7D0;
  --warn:#B45309;--warn-bg:#FFFBEB;--warn-line:#FDE68A;
  --stop:#B91C1C;--stop-bg:#FEF2F2;--stop-line:#FECACA;
  --info:var(--brand-700);--info-bg:var(--brand-50);--info-line:var(--brand-100);
  --font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --fs-900:clamp(2.125rem,1.5rem + 2.6vw,3.5rem);
  --fs-800:clamp(1.75rem,1.35rem + 1.7vw,2.5rem);
  --fs-700:clamp(1.375rem,1.2rem + .8vw,1.75rem);
  --fs-600:1.25rem;--fs-500:1.125rem;--fs-400:1rem;--fs-300:.875rem;--fs-200:.78125rem;
  --lh-tight:1.15;--lh-heading:1.25;--lh-body:1.6;--measure:68ch;
  --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.5rem;
  --s6:2rem;--s7:3rem;--s8:4rem;--s9:6rem;
  --r-sm:8px;--r:12px;--r-lg:16px;--r-pill:999px;
  --shadow-1:0 1px 2px rgb(15 23 42 / 6%);
  --shadow-2:0 8px 28px rgb(15 23 42 / 8%);
  --w-wide:1120px;--w-page:880px;--w-read:720px;
  --focus:var(--ink);--tap:44px;
  --w:var(--w-page);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-size:var(--fs-400);line-height:var(--lh-body);
     color:var(--ink);background:var(--surface);overflow-wrap:anywhere}
.page--wide{--w:var(--w-wide)}
.page--app{--w:var(--w-page)}
.page--read{--w:var(--w-read)}
.shell{max-width:var(--w);margin-inline:auto;padding-inline:var(--s5)}

h1,h2,h3,h4{line-height:var(--lh-heading);margin:0 0 var(--s3)}
h1{font-size:var(--fs-700);font-weight:800;letter-spacing:-.02em}
h2{font-size:var(--fs-600);font-weight:800;margin-top:var(--s6)}
h3{font-size:var(--fs-600);font-weight:700}
.page--wide h1{font-size:var(--fs-900);letter-spacing:-.03em;line-height:1.06}
.page--wide h2{font-size:var(--fs-800);letter-spacing:-.02em}
p,ul,ol{margin:0 0 var(--s4);max-width:var(--measure)}
ul,ol{padding-left:1.35em}
li{margin-bottom:var(--s2)}
.lede{font-size:var(--fs-500);color:var(--ink-muted);max-width:var(--measure)}
.hint,.muted{color:var(--ink-muted);font-size:var(--fs-300)}
.meta{color:var(--ink-faint);font-size:var(--fs-300)}
.eyebrow{font-size:var(--fs-200);font-weight:800;letter-spacing:.06em;
         text-transform:uppercase;color:var(--ink-muted);margin:0 0 var(--s2)}
.mono,code{font-family:var(--mono);background:var(--surface-3);border-radius:6px;
           padding:2px 5px;overflow-wrap:anywhere}
strong{font-weight:700}
hr{border:0;border-top:1px solid var(--line);margin:var(--s6) 0}

/* Prose links carry no size floor: WCAG 2.2 SC 2.5.8 exempts targets "in a
   sentence or its associated text", and forcing 44px on an inline <a> breaks
   the line box. The floor belongs on controls, below. */
a{color:var(--brand-700)}
a:hover{color:var(--brand-800)}

.skip-link{position:fixed;z-index:10;left:16px;top:-80px;padding:10px 14px;
           background:var(--surface);color:var(--ink);border:3px solid var(--ink);
           border-radius:var(--r-sm);font-weight:800;text-decoration:none;
           transition:top .15s ease}
.skip-link:focus,.skip-link:focus-visible{top:16px}
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm)}
.band--ink :where(a,button):focus-visible{outline-color:var(--surface-2)}

.site-header{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;
             justify-content:space-between;padding-block:var(--s4);
             border-bottom:1px solid var(--line)}
/* The header lockup is a link home, so it is a control and carries the tap
   floor. It measured 40.8px tall: the two stacked text lines happened to fall
   just short, which no rule caught because the floor was only ever applied to
   .nav a. */
.brand{font-weight:800;font-size:var(--fs-600);color:var(--ink);text-decoration:none;
       display:inline-flex;flex-direction:column;justify-content:center;
       min-height:var(--tap);line-height:1.2}
.brand small{font-weight:400;font-size:var(--fs-300);color:var(--ink-muted)}
.nav{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.nav a{font-size:var(--fs-300);font-weight:700;text-decoration:none;
       min-height:var(--tap);min-width:var(--tap);display:inline-flex;
       align-items:center;justify-content:center}
.nav a:hover{text-decoration:underline}
.nav a.button{font-size:var(--fs-300)}

main{display:block;padding-block:var(--s6) var(--s7)}
main:focus{outline:none}

.site-footer{border-top:1px solid var(--line);padding-block:var(--s5) var(--s7);
             color:var(--ink-muted);font-size:var(--fs-300)}
.site-footer .brandline{font-weight:700;color:var(--ink);margin-bottom:var(--s2)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);margin-bottom:var(--s3)}
/* min-width as well as min-height: a short footer link such as "Terms" was
   41px wide, so it met the floor in one axis only. */
.site-footer a{min-height:var(--tap);min-width:var(--tap);display:inline-flex;
               align-items:center;justify-content:center}
.site-footer p{max-width:var(--measure);margin:0}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
      padding:var(--s5);box-shadow:var(--shadow-1);margin-block:var(--s5)}
.card--raised{box-shadow:var(--shadow-2)}
.card--soft{background:var(--surface-2);box-shadow:none}
.card > :first-child{margin-top:0}
.card > :last-child{margin-bottom:0}
.card h2,.card h3{margin-top:0}

.notice{border:1px solid;border-left-width:4px;border-radius:var(--r);
        padding:var(--s4) var(--s5);margin-block:var(--s5)}
.notice > strong{display:block;margin-bottom:var(--s1)}
.notice > :last-child{margin-bottom:0}
.notice--info{background:var(--info-bg);border-color:var(--info-line);border-left-color:var(--info)}
.notice--ok{background:var(--ok-bg);border-color:var(--ok-line);border-left-color:var(--ok)}
.notice--wait{background:var(--warn-bg);border-color:var(--warn-line);border-left-color:var(--warn)}
.notice--stop{background:var(--stop-bg);border-color:var(--stop-line);border-left-color:var(--stop)}
.notice--quiet{background:var(--surface-2);border-color:var(--line);border-left-color:var(--ink-muted)}

.chip{display:inline-flex;align-items:center;gap:var(--s2);border:1px solid;
      border-radius:var(--r-pill);padding:var(--s1) var(--s3);
      font-size:var(--fs-300);font-weight:700;line-height:1.4}
.chip .chip__mark{font-weight:400;opacity:.9}
.chip--waiting,.chip--refunded,.chip--deleted{background:var(--surface-2);border-color:var(--line);color:var(--ink-muted)}
.chip--paid,.chip--checking,.chip--looking{background:var(--info-bg);border-color:var(--info-line);color:var(--info)}
.chip--paused{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.chip--ready{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.chip--stopped{background:var(--stop-bg);border-color:var(--stop-line);color:var(--stop)}

.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
        min-height:var(--tap);min-width:var(--tap);padding:var(--s3) var(--s5);
        border-radius:var(--r-sm);font-weight:800;text-decoration:none;
        border:1px solid transparent;cursor:pointer;font:inherit;font-weight:800}
.button--primary{background:var(--brand-600);color:#fff}
.button--primary:hover{background:var(--brand-700);color:#fff}
.button--primary:active{background:var(--brand-800)}
.button--secondary{background:var(--surface);color:var(--brand-700);border-color:var(--field-border)}
.button--quiet{background:none;color:var(--brand-700);text-decoration:underline;
               padding-inline:0;min-width:0}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--s3);margin-block:var(--s4)}
button,[role="button"]{min-height:var(--tap);min-width:var(--tap)}
summary{cursor:pointer;font-weight:700;padding-block:var(--s2);min-height:var(--tap);
        display:list-item}

.field{display:block;margin-top:var(--s5)}
.field__label{display:block;font-weight:700;margin-bottom:var(--s1)}
.field__hint{display:block;color:var(--ink-muted);font-size:var(--fs-300);
             font-weight:400;margin-top:var(--s1);max-width:var(--measure)}
.field input,.field textarea,.field select,
input,textarea,select{width:100%;min-height:var(--tap);padding:var(--s3);
  border:1px solid var(--field-border);border-radius:var(--r-sm);
  font:inherit;font-size:max(16px,1rem);background:var(--surface);color:var(--ink)}
.field textarea,textarea{min-height:6.5rem;line-height:1.5}
.field--invalid input,.field--invalid textarea{border-color:var(--stop);border-width:2px}
.field__error{color:var(--stop);font-weight:700;font-size:var(--fs-300);margin-top:var(--s1)}
.field--check{display:flex;gap:var(--s3);align-items:flex-start;font-weight:400;
              min-height:var(--tap);padding:var(--s2) 0;margin-top:var(--s4);
              max-width:var(--measure);cursor:pointer}
.field--check input{width:1.5rem;height:1.5rem;min-height:0;flex:0 0 auto;margin-top:.15rem}

.price{font-size:var(--fs-800);font-weight:900;line-height:1.1;margin:var(--s2) 0 var(--s3)}
.price__unit{font-size:var(--fs-400);font-weight:600;color:var(--ink-muted)}
.price__note{font-size:var(--fs-300);color:var(--ink-muted)}

.stack{display:grid;gap:var(--s4)}
.grid{display:grid;grid-template-columns:1fr;gap:var(--s4)}
.tiles{display:grid;grid-template-columns:1fr;gap:var(--s3)}
.tile{background:var(--surface-2);border:1px solid var(--line);
      border-left:4px solid var(--brand-600);border-radius:var(--r-sm);padding:var(--s4)}
.tile b{display:block;font-size:var(--fs-800);line-height:1.05}
.steps{display:grid;grid-template-columns:1fr;gap:var(--s4);padding:0;margin:0 0 var(--s5);
       list-style:none;counter-reset:step}
.steps li{background:var(--surface-2);border-left:4px solid var(--brand-600);
          border-radius:var(--r-sm);padding:var(--s4);margin:0}
.steps li strong{display:block;margin-bottom:var(--s1)}

table{border-collapse:collapse;width:100%;font-size:var(--fs-300);margin-bottom:var(--s5)}
th,td{border:1px solid var(--line);padding:var(--s3);vertical-align:top;text-align:left}
th{background:var(--surface-2);font-weight:800}

.file-list{list-style:none;padding:0;margin:0}
.file-list li{border-bottom:1px solid var(--line);margin:0}
.file-list li:last-child{border-bottom:0}
.file-list a{min-height:var(--tap);display:inline-flex;align-items:center;font-weight:700}
.file-list p{margin:0 0 var(--s3);color:var(--ink-muted);font-size:var(--fs-300)}

@media(min-width:640px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:960px){
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(4,1fr)}
  .tiles{grid-template-columns:repeat(4,1fr)}
  .steps{grid-template-columns:repeat(5,1fr)}
  main{padding-block:var(--s7) var(--s8)}
}
@media(max-width:639px){
  .cta-row{display:grid}
  .cta-row .button{width:100%}
  /* A three-column table does not fit a 360px phone. Each row becomes a card
     and each cell announces which column it came from. */
  table,thead,tbody,tr,th,td{display:block;width:100%}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  tr{border:1px solid var(--line);border-radius:var(--r-sm);margin:0 0 var(--s4);
     padding:var(--s2);background:var(--surface)}
  td{border:0;padding:var(--s2)}
  td::before{display:block;font-size:var(--fs-200);font-weight:800;
             text-transform:uppercase;letter-spacing:.06em;color:var(--ink-muted)}
  td:nth-child(1)::before{content:"Label"}
  td:nth-child(2)::before{content:"What it means"}
  td:nth-child(3)::before{content:"What to do"}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .skip-link{transition:none}
}
@media print{
  .skip-link,.site-header .nav,.site-footer nav{display:none!important}
  body{color:#000}
  a{color:#000;text-decoration:underline}
}