/* Bash Tail, 2026-10 redesign: the >_ bash tail mark, light or dark, gears turning in the background.
   Colours are written ONLY in :root (checks/check_css.py fails on anything else, or on a colour that is not a design token).
   Light and dark: the system setting picks one; the header switch (#theme-flip, a plain checkbox) flips it. No JavaScript.
   Motion is only inside @media (prefers-reduced-motion: no-preference). */
@font-face{font-family:"Geist"; src:url("/assets/fonts/geist-latin-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap}
@font-face{font-family:"Geist"; src:url("/assets/fonts/geist-latin-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap}
@font-face{font-family:"Geist"; src:url("/assets/fonts/geist-latin-600.woff2") format("woff2"); font-weight:600 800; font-style:normal; font-display:swap}
@font-face{font-family:"JetBrains Mono"; src:url("/assets/fonts/jetbrains-mono-latin-500.woff2") format("woff2"); font-weight:400 500; font-style:normal; font-display:swap}
@font-face{font-family:"JetBrains Mono"; src:url("/assets/fonts/jetbrains-mono-latin-700.woff2") format("woff2"); font-weight:600 800; font-style:normal; font-display:swap}

/* ---------- tokens ---------- */
:root{
  /* raw palette: light (l-) and dark (d-) */
  --l-bg:#F4F5F7; --l-surface:#FFFFFF; --l-fg:#0A0C10; --l-muted:#555D6B; --l-blue:#1F6FEB; --l-cyan:#1A98D6; --l-mint:#0B7A5B;
  --l-line:rgba(10,12,16,.12); --l-line2:rgba(10,12,16,.26); --l-header:rgba(244,245,247,.86);
  --l-glow1:rgba(31,111,235,.12); --l-glow2:rgba(11,122,91,.08);
  --d-bg:#0A0C10; --d-surface:#11151C; --d-fg:#F2F4F7; --d-muted:#9AA3B2; --d-blue:#2E8BFF; --d-cyan:#3FB4FB; --d-mint:#62F2C2;
  --d-line:rgba(242,244,247,.12); --d-line2:rgba(242,244,247,.26); --d-header:rgba(10,12,16,.82);
  --d-glow1:rgba(46,139,255,.20); --d-glow2:rgba(98,242,194,.09);
  --fill:#62F2C2; --on-fill:#0A0C10;

  /* active set (light) */
  --bg:var(--l-bg); --surface:var(--l-surface); --fg:var(--l-fg); --muted:var(--l-muted); --blue:var(--l-blue); --cyan:var(--l-cyan);
  --mint:var(--l-mint); --line:var(--l-line); --line2:var(--l-line2); --header:var(--l-header); --glow1:var(--l-glow1); --glow2:var(--l-glow2);
  color-scheme:light;

  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --display:"Geist",ui-sans-serif,system-ui,sans-serif;
  --wide:min(71rem,100% - 2.5rem);
  --r:4px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:var(--d-bg); --surface:var(--d-surface); --fg:var(--d-fg); --muted:var(--d-muted); --blue:var(--d-blue); --cyan:var(--d-cyan);
    --mint:var(--d-mint); --line:var(--d-line); --line2:var(--d-line2); --header:var(--d-header); --glow1:var(--d-glow1); --glow2:var(--d-glow2);
    color-scheme:dark;
  }
}
:root:has(#theme-flip:checked){
  --bg:var(--d-bg); --surface:var(--d-surface); --fg:var(--d-fg); --muted:var(--d-muted); --blue:var(--d-blue); --cyan:var(--d-cyan);
  --mint:var(--d-mint); --line:var(--d-line); --line2:var(--d-line2); --header:var(--d-header); --glow1:var(--d-glow1); --glow2:var(--d-glow2);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:has(#theme-flip:checked){
    --bg:var(--l-bg); --surface:var(--l-surface); --fg:var(--l-fg); --muted:var(--l-muted); --blue:var(--l-blue); --cyan:var(--l-cyan);
    --mint:var(--l-mint); --line:var(--l-line); --line2:var(--l-line2); --header:var(--l-header); --glow1:var(--l-glow1); --glow2:var(--l-glow2);
    color-scheme:light;
  }
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:5.5rem}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--sans); font-size:1.0625rem; line-height:1.6; min-height:100vh;
  display:flex; flex-direction:column; -webkit-font-smoothing:antialiased}
main{flex:1; padding-bottom:4rem; position:relative}
main:focus{outline:none}
.wrap{width:var(--wide); margin-inline:auto}
img,svg{max-width:100%}
a{color:var(--fg); text-decoration-color:var(--mint); text-decoration-thickness:2px; text-underline-offset:3px}
a:hover{color:var(--mint)}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:2px}
.skip{position:absolute; left:1rem; top:-5rem; z-index:30; background:var(--fg); color:var(--bg); padding:.7rem 1rem; border-radius:0 0 var(--r) var(--r)}
.skip:focus{top:0; color:var(--bg)}
.vh,.theme-flip{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; margin:-1px; padding:0}
.defs{position:absolute; width:0; height:0}
.s1{stop-color:var(--blue)} .s2{stop-color:var(--cyan)} .s3{stop-color:var(--fill)}

h1,h2,h3{font-family:var(--sans); font-weight:600; line-height:1.08; margin:0 0 .7rem; letter-spacing:-.035em; text-wrap:balance}
h1{font-size:clamp(2.2rem,5.6vw,3.6rem); max-width:22ch}
h2{font-size:clamp(1.65rem,3.6vw,2.35rem); margin-top:3.25rem}
h3{font-size:1.25rem; letter-spacing:-.02em; line-height:1.25}
h1 .hot{color:var(--mint)}
p{margin:0 0 1rem; max-width:44rem}
ul,ol{padding-left:1.25rem; max-width:44rem}
li{margin-bottom:.4rem}
strong{font-weight:600}
.lead{font-size:clamp(1.1rem,2vw,1.25rem); max-width:40rem; color:var(--muted)}
.muted{color:var(--muted)}
.eyebrow{font:700 .8rem/1.4 var(--mono); letter-spacing:.02em; color:var(--muted); margin:0 0 .6rem}
.eyebrow::before{content:"# "; color:var(--mint)}
code{background:var(--surface); border:1px solid var(--line); padding:.05rem .35rem; border-radius:3px; font-family:var(--mono); font-size:.88em}

/* ---------- header ---------- */
.site-header{position:sticky; top:0; z-index:20; background:var(--header); border-bottom:1px solid var(--line); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px)}
.bar{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1.6rem; min-height:4.1rem; padding-block:.4rem}
.logo{display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--fg); min-height:2.75rem}
.logo:hover{color:var(--fg)}
.logo-mark{width:2.05rem; height:1.37rem; flex:none}
.logo-word{font:600 1.4rem/1 var(--sans); letter-spacing:-.045em}
.bar>nav{margin-left:auto}
.nav{display:flex; flex-wrap:wrap; gap:0 1.4rem; list-style:none; margin:0; padding:0; max-width:none}
.nav li{margin:0}
.nav a{display:inline-flex; min-height:2.75rem; align-items:center; font:500 .86rem/1 var(--mono); color:var(--muted); text-decoration:none}
.nav a::before{content:"./"; opacity:.5}
.nav a:hover,.nav a[aria-current="page"]{color:var(--fg)}
.nav a[aria-current="page"]{text-decoration:underline; text-decoration-color:var(--mint)}
.theme-switch{display:inline-grid; grid-auto-flow:column; gap:2px; padding:3px; border:1px solid var(--line2); border-radius:var(--r); cursor:pointer}
.theme-switch svg{width:30px; height:26px; padding:5px 7px; border-radius:2px; fill:none; stroke:var(--muted); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.theme-switch .moon{background:var(--fg); stroke:var(--bg)}
:root:has(#theme-flip:focus-visible) .theme-switch{outline:2px solid var(--cyan); outline-offset:3px}
@media (prefers-color-scheme:light){.theme-switch .sun{background:var(--fg); stroke:var(--bg)} .theme-switch .moon{background:none; stroke:var(--muted)}}
:root:has(#theme-flip:checked) .theme-switch .sun{background:none; stroke:var(--muted)}
:root:has(#theme-flip:checked) .theme-switch .moon{background:var(--fg); stroke:var(--bg)}
@media (prefers-color-scheme:dark){
  :root:has(#theme-flip:checked) .theme-switch .sun{background:var(--fg); stroke:var(--bg)}
  :root:has(#theme-flip:checked) .theme-switch .moon{background:none; stroke:var(--muted)}
}
@media (max-width:44rem){
  .site-header{position:relative}
  .bar{gap:0 1rem}
  .theme-switch{margin-left:auto}
  .bar>nav{order:3; width:100%; min-width:0}
  .nav{margin:0; gap:0 .85rem; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; white-space:nowrap}
  .nav a{min-height:2.5rem; font-size:.78rem}
}

/* ---------- gears (drawn by scripts/gears.py) ---------- */
.gear{fill:none; stroke:var(--fg); stroke-opacity:.26; transform-box:fill-box; transform-origin:center}
.gear path{vector-effect:non-scaling-stroke; stroke-width:1.1}
.gear .body{stroke-width:1.4; fill:var(--fg); fill-opacity:.02}
.gear .fine{stroke-width:.7}
.gear.drive{stroke:var(--blue); stroke-opacity:.6}
.axis{fill:none; stroke:var(--fg); stroke-opacity:.14; stroke-width:1; stroke-dasharray:6 5; vector-effect:non-scaling-stroke}
.hub-mark{opacity:.8}
/* seconds per turn, set by scripts/gears.py from the tooth counts (a class, because the CSP allows no inline style) */
.sp-16-6{--t:16.6s} .sp-27-7{--t:27.7s} .sp-36-9{--t:36.9s} .sp-41-2{--t:41.2s} .sp-48-0{--t:48.0s} .sp-70-0{--t:70.0s}

/* ---------- home hero ---------- */
.hero{position:relative; overflow:hidden; padding-top:clamp(3rem,8vw,6rem)}
.hero-bg{position:absolute; inset:0; pointer-events:none; z-index:0}
.hero-train{position:absolute; right:-7rem; top:-6rem; width:min(52rem,72vw); aspect-ratio:1/1;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,var(--fg) 30%); mask-image:linear-gradient(90deg,transparent 0,var(--fg) 30%)}
.hero-train svg{display:block; width:100%; height:100%; overflow:visible}
.bglog{position:absolute; right:max(1.25rem,calc((100vw - 71rem) / 2)); bottom:6rem; margin:0; padding:0; list-style:none; font:500 .78rem/1.8 var(--mono); color:var(--muted); max-width:none}
.bglog li{margin:0; white-space:nowrap; opacity:.55}
.bglog time{opacity:.6; margin-right:.5rem}
.bglog i{font-style:normal; color:var(--mint)}
.hero-copy{position:relative; z-index:1; padding-bottom:4.5rem}
.prompt{font:500 .9rem/1.5 var(--mono); color:var(--muted); margin:0 0 1.1rem}
.prompt .who{color:var(--mint)}
.typed{display:inline-block; vertical-align:bottom; white-space:nowrap; overflow:hidden}
.hero h1{font-family:var(--display); font-weight:600; font-size:clamp(2.4rem,5.6vw,4.4rem); line-height:1.04; letter-spacing:-.035em; max-width:15ch; hyphens:manual}
.caret{display:inline-block; width:.45em; height:.85em; margin-left:.1em; background:var(--fill); vertical-align:-.06em}
.hero .lead{margin-top:1.4rem}
.actions{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem}
.founding{margin-top:1.6rem; color:var(--muted)}
@media (max-width:60rem){.hero-train{right:-14rem; top:-3rem; width:36rem; opacity:.6; -webkit-mask-image:none; mask-image:none} .hub-mark{display:none} .bglog{display:none}}

.ticker{position:relative; z-index:1; border-block:1px solid var(--line); overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,var(--fg) 8%,var(--fg) 92%,transparent); mask-image:linear-gradient(90deg,transparent,var(--fg) 8%,var(--fg) 92%,transparent)}
.track{display:flex; width:max-content; list-style:none; margin:0; padding:0; max-width:none; font:500 .82rem/1 var(--mono); color:var(--muted)}
.track li{display:inline-flex; align-items:center; gap:1.1rem; margin:0; padding:.95rem 1.25rem .95rem 0; white-space:nowrap}
.track svg{width:1.1rem; height:.75rem; flex:none}

/* ---------- products ---------- */
.section-title{margin-top:.2rem}
section>.eyebrow{margin-top:4.5rem}
.status{display:inline-block; margin:0; font:700 .75rem/1.5 var(--mono); color:var(--muted); white-space:nowrap}
.status::before{content:"[ "} .status::after{content:" ]"}
.status-available{color:var(--mint)}
.cards{list-style:none; padding:0; margin:1.75rem 0 0; max-width:none; border-top:1px solid var(--line)}
.card{position:relative; display:grid; grid-template-columns:10rem minmax(0,1fr) minmax(0,1.5fr); gap:.4rem 1.75rem; align-items:baseline; margin:0; padding:1.35rem 0; border-bottom:1px solid var(--line)}
.card h3,.card .card-h{margin:0}
.card h3 a,.card .card-h a{text-decoration:none}
.card h3 a::after,.card .card-h a::after{content:""; position:absolute; inset:0}
.card p{margin:0; max-width:none; color:var(--muted)}
.card:hover h3 a{color:var(--mint)}
.card:has(a:focus-visible){outline:2px solid var(--cyan); outline-offset:4px}
.card a:focus-visible{outline:none}
@media (max-width:50rem){.card{grid-template-columns:1fr; gap:.3rem}}
.guides-list .card{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
.guides-list .card-h{font-size:1.2rem; font-weight:600; letter-spacing:-.02em}
@media (max-width:50rem){.guides-list .card{grid-template-columns:1fr}}

.checks{list-style:none; padding:0; margin:1rem 0}
.checks li{position:relative; padding-left:1.8rem}
.checks li::before{content:"\2713"; position:absolute; left:0; top:0; font:700 .9rem/1.6 var(--mono); color:var(--mint)}
.checks.no li::before{content:"\00d7"; color:var(--muted)}

/* steps: a numbered rail */
.steps{counter-reset:s; list-style:none; padding:0 0 0 1.6rem; margin:1.5rem 0 1.5rem .7rem; border-left:1px dashed var(--line2); max-width:46rem}
.steps li{counter-increment:s; position:relative; margin:0 0 1.9rem}
.steps li:last-child{margin-bottom:0}
.steps li::before{content:counter(s); position:absolute; left:calc(-1.6rem - .75rem); top:.05rem; width:1.5rem; height:1.5rem; display:grid; place-items:center;
  background:var(--bg); border:1px solid var(--line2); border-radius:3px; font:700 .72rem/1 var(--mono)}
.steps h3{margin:0 0 .25rem}
.steps p{margin:0; color:var(--muted)}

.callout{background:var(--surface); border:1px solid var(--line2); border-radius:var(--r); padding:1.1rem 1.3rem; margin:1.5rem 0; max-width:44rem}
.callout p:last-child,.callout ul:last-child{margin-bottom:0}
.callout h3{margin-bottom:.35rem}
.callout-inline{background:var(--surface); border:1px solid var(--line2); border-left:3px solid var(--mint); padding:.8rem 1.1rem; max-width:none; border-radius:var(--r)}

.price{background:var(--surface); border:1px solid var(--line2); border-radius:var(--r); padding:1.1rem 1.3rem; margin:1.5rem 0; max-width:44rem}
.price p{margin:0 0 .4rem}
.price .amount{font:600 2rem/1 var(--display); letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.price p:last-child{margin-bottom:0}

.crumbs{padding-top:1.3rem; font:500 .85rem/1.4 var(--mono); color:var(--muted)}
.crumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:.25rem .6rem; padding:0; margin:0; max-width:none}
.crumbs li{margin:0}
.crumbs li+li::before{content:"/"; margin-right:.6rem; opacity:.6}
.crumbs a{display:inline-block; padding-block:.55rem; color:var(--muted)}

.page-head{padding-top:1.5rem}
.page-head h1{margin-top:.6rem}
.facts{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr)); margin:1.25rem 0; max-width:none}
.facts div{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:.9rem 1.1rem}
.facts dt{font-weight:600; font-size:1.05rem; margin:0}
.facts dd{margin:.2rem 0 0; color:var(--muted)}

/* ---------- reminders and /start/: sticker, text bubble, coupon, stamp ---------- */
.showcase{display:grid; gap:1.5rem 2rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr)); align-items:start; margin:1.5rem 0}
.sticker-set{position:relative; min-height:21.5rem; max-width:22rem}
.sticker{position:absolute; top:.5rem; left:.4rem; width:min(15rem,86%); background:var(--surface); border:1px solid var(--line2); border-radius:10px; overflow:hidden}
.sticker-head{background:var(--fill); color:var(--on-fill); text-align:center; padding:.45rem 0 .35rem; font:700 .9rem/1.2 var(--mono); letter-spacing:.12em}
.sticker-body{padding:.5rem .9rem .7rem}
.sticker-row{display:flex; align-items:baseline; gap:.6rem; border-bottom:1px solid var(--line2)}
.sticker-row b{font:700 .72rem/1 var(--mono); letter-spacing:.1em; width:3.2rem}
.sticker-row span{font:500 1.5rem/1.5 var(--mono)}
.sticker-foot{font:500 .72rem/1.4 var(--mono); text-align:center; padding-top:.3rem; color:var(--muted)}
.sms{background:var(--surface); color:var(--fg); border:1px solid var(--line2); border-radius:16px 16px 16px 4px; padding:.75rem .95rem; line-height:1.45; font-size:.95rem}
.sms p{margin:0}
.center-note{text-align:center; margin:1rem auto 0}
.frame{text-align:center; padding-block:1rem 2rem} .frame h1,.frame .lead{margin-inline:auto}
.frame-actions{display:flex; flex-wrap:wrap; gap:.75rem 1rem; justify-content:center; margin:1.5rem 0 0}
.sms small{display:block; color:var(--muted); font-size:.82rem; margin-top:.25rem}
.sticker-set .sms{position:absolute; top:10.8rem; left:2.6rem; width:min(15.5rem,88%)}
.example-note{font:500 .82rem/1.5 var(--mono); color:var(--muted); margin:.5rem 0 0}
.coupon{position:relative; border:1px dashed var(--line2); border-radius:var(--r); background:var(--surface); padding:1.4rem 1.3rem 1.1rem; margin:1.5rem 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem}
.coupon .scissors{position:absolute; top:-12px; left:14px; background:var(--bg); padding:0 4px; display:flex; color:var(--muted)}
.coupon-label{font:700 .8rem/1.4 var(--mono); letter-spacing:.06em; margin:0; color:var(--muted)}
.coupon-price{font:600 clamp(2.8rem,8vw,3.8rem)/1 var(--display); letter-spacing:-.05em; margin:0; font-variant-numeric:tabular-nums}
.coupon-price small{font:600 1.05rem var(--sans); margin-left:.4rem; letter-spacing:0}
.coupon p{margin:0; max-width:none}
.coupon-detail{font-weight:500; line-height:1.35}
.coupon-list{list-style:none; padding:0; margin:.4rem 0 0; max-width:none; line-height:1.4}
.coupon-list li{margin:.15rem 0; padding-left:1.4rem; position:relative}
.coupon-list li::before{content:"\2713"; position:absolute; left:0; color:var(--mint); font-weight:700}
.coupon-fine{font:500 .82rem/1.4 var(--mono); color:var(--muted); margin-top:.3rem !important}
.stamp{flex:none; display:inline-flex; align-items:baseline; gap:.6rem; padding:.55rem .8rem; border:1px solid var(--line2); border-left:3px solid var(--fill); border-radius:var(--r); background:var(--bg)}
.stamp b{font:600 1.15rem/1 var(--display); letter-spacing:-.03em; white-space:nowrap}
.stamp span{font:500 .72rem/1.3 var(--mono); color:var(--muted)}

/* service menu: a dark panel with dotted leaders, in both themes */
.menu{background:var(--surface); color:var(--fg); border:1px solid var(--line2); padding:.9rem 1.3rem 1.1rem; border-radius:var(--r); margin:1.75rem 0}
.menu-title{display:flex; align-items:center; gap:.8rem; font:700 .95rem/1.2 var(--mono); letter-spacing:.14em; text-transform:uppercase; margin:0 0 .5rem}
.menu-title::before,.menu-title::after{content:""; flex:1; height:1px; background:var(--line2)}
.menu h2.menu-title,.menu h3.menu-title{color:var(--fg); margin-top:0}
.menu-cols{display:grid; gap:0 2rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
.menu ul{list-style:none; padding:0; margin:0; max-width:none}
.menu li{display:flex; align-items:baseline; gap:.4rem; margin:0; line-height:1.8}
.menu .dots{flex:1; border-bottom:1px dotted var(--line2); min-width:1rem}
.menu .amt{font-family:var(--mono); font-weight:700; white-space:nowrap}
.menu .soon{font:700 .8rem var(--mono); color:var(--muted)}
.menu .note{color:var(--muted); font-size:.9rem; margin:.7rem 0 0; max-width:none}

/* /start/ plan picker */
.deal{list-style:none; padding:0 0 0 1.1rem; margin:1.5rem 0; border-left:3px solid var(--fill); font-family:var(--mono); font-size:.95rem; max-width:none}
.deal li{margin:.25rem 0}
.deal li::before{content:"\2713\00a0 "; color:var(--mint); font-weight:700}
.plans{display:grid; gap:1.1rem; grid-template-columns:repeat(3,minmax(0,1fr)); margin:2rem 0}
.plan{position:relative; background:var(--surface); border:1px solid var(--line2); border-radius:var(--r); padding:1.3rem 1.25rem 1.25rem; display:flex; flex-direction:column; gap:.6rem; min-width:0}
.plan.pick{border-color:var(--mint); box-shadow:0 0 0 1px var(--mint)}
.plan h2{margin:0; font-size:1.6rem}
.plan ul{margin:0; padding-left:1.1rem; color:var(--muted)}
.plan .tag{align-self:flex-start; margin:0; background:var(--fill); color:var(--on-fill); font:700 .72rem/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; padding:.15rem .5rem; border-radius:2px}
.plan .price{margin:0; padding:0; border:0; background:transparent; font:600 2.6rem/1 var(--display); letter-spacing:-.05em; font-variant-numeric:tabular-nums}
.plan .price small{font:500 1rem var(--sans); color:var(--muted); letter-spacing:0}
.plan .today{margin:0; font-size:.92rem; color:var(--muted)}
.buy{margin-top:auto; display:flex; align-items:center; justify-content:center; min-height:3rem; text-align:center; background:var(--fg); color:var(--bg); text-decoration:none; font-weight:600; padding:.7rem 1rem; border-radius:var(--r)}
.buy:hover{color:var(--bg); opacity:.9}
.plan.pick .buy{background:var(--fill); color:var(--on-fill)}
.notes{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 2rem; max-width:56rem; margin-bottom:1.5rem}
.notes h3{margin:0 0 .25rem; font-size:1.1rem}
.notes p{margin:0; color:var(--muted); font-size:.98rem}
@media (max-width:760px){.plans,.notes{grid-template-columns:minmax(0,1fr)} .plan.pick{order:-1}}

/* ---------- call to action and buttons ---------- */
.cta{position:relative; background:var(--surface); border:1px solid var(--line2); border-radius:var(--r); padding:clamp(1.5rem,4vw,2.4rem); margin:4.5rem 0 0}
.cta h2{margin-top:0}
.cta p{color:var(--muted)}
.cta p:last-child{margin-bottom:0}
.btn{display:inline-flex; align-items:center; gap:.5rem; min-height:3rem; padding:.7rem 1.3rem; background:var(--fg); color:var(--bg); font-weight:600; text-decoration:none; border:1px solid var(--fg); border-radius:var(--r)}
.btn:hover{color:var(--bg); opacity:.88}
.btn-ghost{background:transparent; color:var(--fg); border-color:var(--line2)}
.btn-ghost:hover{color:var(--fg); border-color:var(--fg); opacity:1}
.cta .btn{overflow-wrap:anywhere}
.related{margin-top:3rem}
.related ul{list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; max-width:none}
.related li{margin:0}
.related a{display:inline-block; padding:.5rem 0}

/* ---------- footer ---------- */
.site-footer{position:relative; overflow:hidden; border-top:1px solid var(--line); padding:2.6rem 0 1.6rem; margin-top:auto; color:var(--muted)}
.foot-gears{position:absolute; right:-6rem; top:-4rem; width:24rem; aspect-ratio:1/1; pointer-events:none; opacity:.8}
.foot-gears svg{display:block; width:100%; height:100%}
.site-footer a{color:var(--fg)}
.site-footer a:hover{color:var(--mint)}
.foot-grid{position:relative; display:grid; gap:1.75rem; grid-template-columns:1fr}
@media (min-width:44rem){.foot-grid{grid-template-columns:1.5fr 1.1fr 1fr}}
.foot-title{font:700 .8rem/1.4 var(--mono); color:var(--muted); margin-bottom:.5rem}
.foot-title::before{content:"# "; color:var(--mint)}
.foot-signup{font-family:var(--mono); font-weight:700; margin:.4rem 0; overflow-wrap:anywhere}
.site-footer .logo{margin-bottom:.6rem}
.site-footer ul{list-style:none; padding:0; margin:0}
.site-footer li{margin:0}
.site-footer li a{display:inline-block; padding:.3rem 0}
.site-footer p{margin-bottom:.4rem}
.foot-base{position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; gap:.4rem 2rem; margin-top:1.75rem; padding-top:1rem; border-top:1px solid var(--line); font:500 .82rem/1.5 var(--mono)}
.foot-base p{margin:0}

/* ---------- guides ---------- */
.article{max-width:46rem}
.article h2{margin-top:2.25rem}
.article h3{margin-top:1.5rem}
.article p,.article li{max-width:none}
.article .meta{color:var(--muted); font:500 .85rem/1.5 var(--mono); margin-bottom:1rem}
.sources{margin-top:3rem; padding-top:1.5rem; border-top:1px dashed var(--line2)}
.sources ol{padding-left:1.4rem}
.sources li{margin-bottom:.8rem; overflow-wrap:anywhere}
.small{font-size:.9rem; margin-top:.5rem !important}
.table-wrap{position:relative; overflow-x:auto; margin:1.25rem 0; border:1px solid var(--line2); border-radius:var(--r)}
.table-wrap table{border-collapse:collapse; min-width:36rem; width:100%; background:var(--surface)}
.table-wrap caption{text-align:left; font-weight:600; padding:.6rem .8rem; caption-side:top}
.table-wrap th,.table-wrap td{border:1px solid var(--line); padding:.55rem .75rem; text-align:left; vertical-align:top}
.table-wrap thead th{background:var(--bg); font:700 .8rem/1.4 var(--mono)}

/* ---------- product tours ---------- */
.tour{list-style:none; padding:0; margin:1.25rem 0 0; max-width:none; display:grid; gap:2.25rem}
.tour li{margin:0}
.tour figure{margin:0}
.tour picture{display:block}
.tour img{display:block; max-width:100%; height:auto; border:1px solid var(--line2); border-radius:var(--r); background:var(--surface)}
.tour figcaption{margin-top:.9rem; max-width:46rem; font:500 .9rem/1.5 var(--mono); color:var(--muted)}
@media (min-width:48rem){.tour img{max-width:min(100%,68rem)}}

/* ---------- motion: only for people who have not asked for less. Nothing here is needed to read or use the page. ---------- */
@media (prefers-reduced-motion:no-preference){
  body{transition:background-color .3s ease, color .3s ease}
  .gear{animation:spin var(--t,60s) linear infinite}
  .gear.rev{animation-direction:reverse}
  .typed{width:0; animation:type 1.9s steps(30,end) .4s forwards}
  .caret{animation:blink 1s steps(1) infinite}
  .track{animation:tick 60s linear infinite}
  .bglog li{opacity:0; animation:logline 16s linear infinite}
  .bglog li:nth-child(2){animation-delay:2s} .bglog li:nth-child(3){animation-delay:4s} .bglog li:nth-child(4){animation-delay:6s}
  .bglog li:nth-child(5){animation-delay:8s} .bglog li:nth-child(6){animation-delay:10s} .bglog li:nth-child(7){animation-delay:12s}
  .bglog li:nth-child(8){animation-delay:14s}
  .btn,.buy{transition:opacity .15s ease, border-color .15s ease}
  @keyframes spin{to{transform:rotate(360deg)}}
  @keyframes type{to{width:30ch}}
  @keyframes blink{50%{opacity:0}}
  @keyframes tick{to{transform:translateX(-50%)}}
  @keyframes logline{0%{opacity:0} 3%{opacity:.75} 45%{opacity:.75} 52%{opacity:0} 100%{opacity:0}}
}
@media (prefers-reduced-motion:reduce){.typed{width:auto}}

@media (forced-colors:active){
  .btn,.buy,.card,.plan,.callout,.price,.coupon,.cta,.menu{border:1px solid CanvasText}
  :focus-visible{outline:2px solid Highlight}
  .hero-bg,.foot-gears{display:none}
}
@media print{.site-header,.site-footer,.cta,.skip,.hero-bg,.ticker{display:none}}