/* Stickler website. Colours mirror the app (brand.ts, theme.ts); band colours are the app's TIER table. No web fonts:
   the system face for text, ui-rounded (SF Pro Rounded on Apple devices) for headings and numbers. Every animation
   ends on the element's default styling, so the page is complete with animations or JavaScript off. */

:root {
  color-scheme: light;
  --green: #12814A; --green-deep: #0B5E36; --cream: #F7F5F0; --ink: #173C2D; --muted: #567064; --line: #DCE4DA;
  --pale: #E8EFE5; --yellow: #FFE372; --card: #FFFFFF; --focus-ring: #173C2D;
  /* TIER.color: solid fills that carry white type, and number ink on white. TIER.bar: scale segments. */
  --t0: #12814A; --t1: #4A7C0F; --t2: #85730A; --t3: #C04A12; --t4: #B3261E;
  --b0: #129C51; --b1: #77AC18; --b2: #E3B10D; --b3: #EE6A22; --b4: #D93932;
  --tc: var(--t0); --tb: var(--b0);
  --round: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 24px; --gutter: 20px;
  --shadow: 0 1px 2px rgba(23, 60, 45, .06), 0 10px 30px rgba(23, 60, 45, .08);
  /* Motion vocabulary. Only transform, opacity, clip-path and filter animate. */
  --d1: 120ms; --d2: 200ms; --d3: 320ms; --d4: 480ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: var(--ease);
}
@supports (transition-timing-function: linear(0, 1)) {
  /* A small overshoot, about 6 per cent, settling by 60 per cent of the duration. */
  :root { --spring: linear(0, .06 3%, .23 7%, .52 13%, .78 19%, .95 25%, 1.04 31%, 1.06 36%, 1.05 42%, 1.02 50%, 1 58%, .995 70%, 1); }
}
.tier-0 { --tc: var(--t0); --tb: var(--b0); }
.tier-1 { --tc: var(--t1); --tb: var(--b1); }
.tier-2 { --tc: var(--t2); --tb: var(--b2); }
.tier-3 { --tc: var(--t3); --tb: var(--b3); }
.tier-4 { --tc: var(--t4); --tb: var(--b4); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 16px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--cream); color: var(--ink); font: 17px/1.55 var(--sans); overflow-x: hidden; }
@media (min-width: 768px) { body { font-size: 18px; } }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--round); line-height: 1.1; margin: 0 0 .5em; letter-spacing: -.01em; text-wrap: balance; }
h2 { font-size: clamp(28px, 4.4vw, 46px); }
h3 { font-size: clamp(20px, 2.2vw, 24px); line-height: 1.2; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
@media (max-width: 400px) { :root { --gutter: 16px; } }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }
.num, .tabular { font-variant-numeric: tabular-nums; }

/* Focus rings animate their offset, never their colour. */
:where(a, button, input, summary, textarea, select) { outline: 3px solid transparent; outline-offset: 0; transition: outline-offset var(--d1) var(--ease); }
:where(a, button, input, summary, textarea, select):focus-visible { outline-color: var(--focus-ring); outline-offset: 3px; }
.on-green { --focus-ring: var(--yellow); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 10; background: var(--yellow); color: var(--ink); padding: 10px 16px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* Links: a faint rule at rest, a full one drawn left to right on hover. Body-copy links keep a plain underline. */
.link { position: relative; text-decoration: none; font-weight: 600; }
.link::before, .link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: currentColor; border-radius: 2px; }
.link::before { opacity: .3; }
.link::after { transform: scaleX(0); transform-origin: left; transition: transform var(--d2) var(--ease); }
.link:hover::after, .link:focus-visible::after { transform: scaleX(1); }
.prose a, .doc a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Buttons press to .97 and spring back. */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px; border-radius: 999px; border: 0; font: 700 17px/1.2 var(--sans); text-decoration: none; cursor: pointer; transition: transform var(--d2) var(--spring), outline-offset var(--d1) var(--ease); }
.button:active { transform: scale(.97); transition-duration: 80ms; }
.button-cream { background: var(--cream); color: var(--green-deep); }
.button-ink { background: var(--ink); color: var(--cream); }
.button-yellow { background: var(--yellow); color: var(--ink); }
.text-button { background: none; border: 0; padding: 10px 2px; font: 600 16px/1.2 var(--sans); color: var(--green-deep); cursor: pointer; }

/* Header */
.site-header { background: var(--green); color: var(--cream); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 8px; color: var(--cream); text-decoration: none; }
.brand img { width: 36px; height: 36px; }
.brand svg { width: 112px; height: auto; color: var(--cream); }
.main-nav { display: flex; align-items: center; gap: 22px; font-size: 16px; }
.main-nav a { color: var(--cream); }
.nav-pill { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 16px; border-radius: 999px; background: var(--yellow); color: var(--ink) !important; font-weight: 700; text-decoration: none; transition: transform var(--d2) var(--spring), outline-offset var(--d1) var(--ease); }
.nav-pill:active { transform: scale(.97); transition-duration: 80ms; }
@media (max-width: 399px) { .nav-how { display: none; } .main-nav { gap: 14px; } .brand svg { width: 96px; } }

/* Hero */
.hero { background: var(--green); color: var(--cream); padding: 22px 0 26px; overflow: hidden; }
.hero-grid { display: grid; gap: 22px; align-items: center; }
@media (min-width: 1024px) { .hero { padding: 48px 0 60px; } .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; } }
.hero h1 { font-size: clamp(38px, 4.7vw, 60px); line-height: 1.02; margin-bottom: 14px; }
.hero h1 .accent { color: var(--yellow); }
.hero .lead { font-size: clamp(17px, 2vw, 21px); max-width: 30em; margin-bottom: 18px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.actions .link { color: var(--cream); }

/* The scene: an illustrative app screen standing behind the shelf, and three drawn packs in front wearing their
   score stickers. The phone and the shelf share one grid cell, both sitting on the plank. */
.hero-scene { display: grid; width: 100%; max-width: 560px; margin: 0 auto; }
.hero-phone, .shelf-scene { grid-area: 1 / 1; align-self: end; }
.hero-phone { justify-self: center; width: 46%; margin-bottom: 6px; transform: translateX(8%) rotate(2deg); }
.hero-phone img { width: 100%; height: auto; border-radius: 22px; box-shadow: 0 18px 40px rgba(0, 0, 0, .28); }
/* Proportional columns, so the three packs scale together from 320 px up and never force a sideways scroll. */
.shelf-scene { position: relative; isolation: isolate; display: grid; grid-template-columns: 26fr 30fr 32fr; align-items: end; column-gap: 5%; padding: 0 4%; }
.shelf-scene::after { content: ""; position: absolute; left: 0; right: 0; bottom: -18px; height: 18px; border-radius: 4px; background: #E9DDC4; box-shadow: inset 0 -7px 0 #D3C4A4, 0 10px 18px rgba(0, 0, 0, .18); }
.shelf-pack { position: relative; min-width: 0; }
.shelf-pack svg { width: 100%; height: 100%; }
.shelf-pack.pb { aspect-ratio: 100 / 130; }
.shelf-pack.salmon { aspect-ratio: 120 / 100; }
.shelf-pack.bar { aspect-ratio: 140 / 60; }
.hero-scene figcaption { margin-top: 28px; font-size: 13px; line-height: 1.4; text-align: center; text-wrap: balance; opacity: .9; }

.sticker { --r: -3deg; --w: clamp(58px, 16vw, 84px); position: absolute; left: 50%; top: 42%; z-index: 2; width: var(--w); margin-left: calc(var(--w) / -2); color: var(--ink); text-decoration: none; transform: rotate(var(--r)); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .22)); transition: transform var(--d2) var(--spring), filter var(--d2) var(--ease), outline-offset var(--d1) var(--ease); }
.shelf-pack.salmon .sticker { --r: 3deg; top: 30%; }
.shelf-pack.bar .sticker { --r: -2deg; top: -30%; }
.sticker-face { display: grid; background: var(--cream); border-radius: 12px; overflow: hidden; clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 0 100%); }
.sticker-num { padding: 8px 4px 5px; font: 800 clamp(26px, 6vw, 36px)/1 var(--round); color: var(--tc); text-align: center; font-variant-numeric: tabular-nums; }
.sticker-band { padding: 4px 2px 5px; background: var(--tc); color: #FFFFFF; font: 700 clamp(11px, 2.6vw, 13px)/1.1 var(--sans); text-align: center; }
/* A static sticker (receipt, portraits): the same face, tilted, with the same peel. */
.tag { --r: -4deg; position: relative; display: block; width: 84px; transform: rotate(var(--r)); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .22)); }
.tag .sticker-num { font-size: 30px; }
.tag .sticker-band { font-size: 12px; }
.sticker-face.is-stop .sticker-num { position: relative; color: var(--muted); }
.sticker-face.is-stop .sticker-num::after { content: ""; position: absolute; left: 16%; right: 16%; top: 42%; height: 4px; border-radius: 2px; background: var(--t4); }
/* The peel: the folded-over corner shows the band colour, like the mascot's own peel. */
.tag::after, .sticker::after { content: ""; position: absolute; top: 0; right: 0; width: 15px; height: 15px; background: var(--tc); border-bottom-left-radius: 4px; clip-path: polygon(0 0, 0 100%, 100% 100%); transform-origin: 100% 0; transition: transform var(--d2) var(--spring); }
.sticker:hover, .sticker:focus-visible { transform: rotate(calc(var(--r) + 2deg)) translateY(-3px); filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .28)); }
.sticker:hover::after, .sticker:focus-visible::after { transform: scale(1.45); }
@media (prefers-reduced-motion: no-preference) {
  /* Stickers slap on one after another once the headline has painted, like someone pricing a shelf. */
  .sticker { animation: slap 420ms var(--spring) calc(250ms + var(--i, 0) * 90ms) backwards; }
}
@keyframes slap {
  from { opacity: 0; transform: rotate(-8deg) scale(1.12); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45)); }
  to { opacity: 1; transform: rotate(var(--r)) scale(1); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .22)); }
}

/* Sections */
.section { padding: 36px 0; }
@media (min-width: 1024px) { .section { padding: 88px 0; } }
.section-head { max-width: 40em; margin-bottom: 16px; }
.section-head p { margin: 0; }
.lead-text { font-size: clamp(17px, 2vw, 20px); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.pad { padding: 24px; }
@media (min-width: 768px) { .pad { padding: 30px; } }

/* Demo */
.demo { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.demo-grid { display: grid; gap: 14px; grid-template-areas: "head" "picker" "reading"; }
.demo-head { grid-area: head; } .picker { grid-area: picker; } .reading { grid-area: reading; }
@media (min-width: 1024px) {
  .demo-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); grid-template-areas: "head reading" "picker reading" ". reading"; grid-template-rows: auto auto 1fr; column-gap: 56px; row-gap: 24px; align-items: start; }
}
.demo-head h2 { margin-bottom: 10px; }
.demo-head p { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; font: 700 16px/1.3 var(--round); margin-bottom: 8px; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 1024px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.tile { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 10px 4px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--card); text-align: center; cursor: pointer; transition: transform var(--d2) var(--spring); }
.tile input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tile svg { width: 40px; height: 40px; }
.tile-name { font: 700 13px/1.15 var(--round); }
.tile-teaser { display: none; }
@media (min-width: 640px) { .tile { padding: 14px 8px 12px; gap: 6px; } .tile svg { width: 56px; height: 56px; } .tile-name { font-size: 16px; } .tile-teaser { display: block; font-size: 14px; line-height: 1.3; color: var(--muted); } }
.tile:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.tile:has(input:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.tile:active { transform: scale(.97); transition-duration: 80ms; }
.tile:has(input:disabled) { cursor: default; }

.reading { scroll-margin-top: 16px; padding: 18px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); }
@media (min-width: 640px) { .reading { padding: 28px; } }
.reading:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.reading-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.reading-art { width: 44px; height: 44px; flex: none; view-transition-name: pack-art; }
.reading-label { margin: 0; font-size: 14px; color: var(--muted); }
.reading-pack { margin: 0; font: 700 18px/1.25 var(--round); }
.reading-pack .qty { font: 400 15px var(--sans); color: var(--muted); }
.score { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 14px; view-transition-name: score-badge; transform-origin: 30% 50%; }
.score-num { position: relative; display: inline-flex; align-items: baseline; gap: 4px; color: var(--tc); font-family: var(--round); }
.score-num .num { font-size: clamp(60px, 15vw, 84px); font-weight: 800; line-height: .9; letter-spacing: -.02em; }
.score-num .of { font-size: 20px; font-weight: 700; color: var(--muted); }
/* A stop strikes the number through; nothing counts down. */
.score-num::after { content: ""; position: absolute; left: -6%; right: -6%; top: 46%; height: 6px; border-radius: 3px; background: var(--t4); transform: scaleX(0); transform-origin: left; transition: transform var(--d1) var(--ease); }
.is-stop .score-num { color: var(--muted); }
.is-stop .score-num::after { transform: scaleX(1); }
.score-side { display: grid; gap: 4px; justify-items: start; }
.band-pill { display: grid; }
.band-pill > span { grid-area: 1 / 1; padding: 5px 14px; border-radius: 999px; color: #FFFFFF; font: 700 16px/1.2 var(--sans); transition: opacity var(--d2) var(--ease); }
.band-pill > span[aria-hidden="true"] { opacity: 0; }
.pill-t0 { background: var(--t0); } .pill-t1 { background: var(--t1); } .pill-t2 { background: var(--t2); } .pill-t3 { background: var(--t3); } .pill-t4 { background: var(--t4); }
.verdict { font-size: 15px; color: var(--muted); }
.is-stop .band-pill { animation: stamp 160ms var(--ease); }
.is-stop .band-pill > span { transition: none; }
@keyframes stamp { from { transform: scale(1.15); } to { transform: none; } }
.score.press { animation: press var(--d3) var(--spring); }
@keyframes press { 35% { transform: scale(.95); } to { transform: none; } }
.dim { transition: opacity var(--d1) var(--ease); }
.is-stop .dim { opacity: .6; }

.scale { margin: 0 0 16px; }
.scale-track { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; height: 12px; }
.scale-track > i { border-radius: 3px; }
.scale-track > i:nth-child(1) { background: var(--b0); } .scale-track > i:nth-child(2) { background: var(--b1); } .scale-track > i:nth-child(3) { background: var(--b2); } .scale-track > i:nth-child(4) { background: var(--b3); } .scale-track > i:nth-child(5) { background: var(--b4); }
.marker { position: absolute; inset: 0; pointer-events: none; transform: translateX(calc(var(--pos, 10) * 1%)); transition: transform var(--d4) var(--spring); }
/* Stops are instant; only a nudge glides. */
.is-stop .marker { transition-duration: 0s; }
.marker::before { content: ""; position: absolute; left: 0; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: #FFFFFF; border: 4px solid var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.scale-labels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; margin-top: 8px; font-size: clamp(10px, 2.7vw, 12px); color: var(--muted); text-align: center; }
.scale-labels span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.before { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 14px; border-radius: 14px; background: var(--cream); font-size: 15px; }
.before b { font: 800 17px var(--round); font-variant-numeric: tabular-nums; }
.gap { position: relative; flex: 1 0 90px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; opacity: 0; transition: opacity var(--d2) var(--ease); }
.gap > i { position: absolute; inset: 0; background: var(--muted); transform-origin: left; transform: translateX(calc(var(--now, 100) * 1%)) scaleX(calc(var(--gap, 0) / 100)); transition: transform var(--d3) var(--ease); }
.has-gap .gap { opacity: 1; }
.receipt { margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 15px; line-height: 1.45; clip-path: inset(0 0 0 0); transition: clip-path 180ms var(--ease); }
.receipt.is-out { clip-path: inset(0 0 100% 0); }

.label-text { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.label-text b { margin-right: 4px; color: var(--ink); font-weight: 600; }
.label-item { border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.label-item.hit { background: #FBE3DF; color: var(--t4); font-weight: 700; box-shadow: 0 0 0 2px #FBE3DF; }
/* Your rules sit inside the reading, as they do in the app. A chip's tint fades in; nothing else about it animates. */
.rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.rule-group legend { font-size: 15px; margin-bottom: 6px; }
.rule-group.avoid { --chip: var(--t4); --chip-bg: #FBE3DF; }
.rule-group.prefer { --chip: var(--green); --chip-bg: #E1F1E6; }
.rule-chips { display: grid; gap: 8px; }
.rule-chip { position: relative; display: flex; align-items: center; min-height: 46px; padding: 7px 30px 7px 11px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); cursor: pointer; transition: transform var(--d2) var(--spring); }
.rule-chip input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rule-chip::before { content: ""; position: absolute; inset: -1.5px; border: 2px solid var(--chip); border-radius: inherit; background: var(--chip-bg); opacity: 0; transition: opacity var(--d2) var(--ease); }
.rule-chip::after { content: ""; position: absolute; right: 10px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; border: 2px solid #B9C7BC; background: var(--card) no-repeat center / 12px; }
.rule-chip:has(input:checked)::before { opacity: 1; }
.rule-chip:has(input:checked)::after { border-color: var(--chip); background-color: var(--chip); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.rule-chip > span { position: relative; display: grid; }
.rule-chip b { font-size: 14px; line-height: 1.2; }
@media (min-width: 640px) { .rule-chip b { font-size: 15px; } }
.rule-chip small { display: none; font-size: 13px; line-height: 1.25; color: var(--muted); }
@media (min-width: 640px) { .rule-chip small { display: block; } }
.rule-chip:has(input:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.rule-chip:active { transform: scale(.97); transition-duration: 80ms; }
.rule-chip:has(input:disabled) { cursor: default; }
.static-packs { display: grid; gap: 16px; }
.static-pack h3 { margin-bottom: 6px; }
.static-pack ul { margin: 10px 0 0; padding-left: 20px; font-size: 16px; }

/* How the score works: one receipt, the kinds of cost, the five bands. */
.how-grid { display: grid; gap: 18px; grid-template-areas: "head" "receipt" "side"; }
.how .section-head { grid-area: head; margin: 0; }
@media (min-width: 900px) { .how-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "receipt head" "receipt side"; column-gap: 56px; row-gap: 24px; align-items: start; } }
.receipt-card { grid-area: receipt; position: relative; margin: 0; padding: 16px 18px 18px; border: 1px solid var(--line); border-radius: 8px; background: #FFFEFA; box-shadow: var(--shadow); }
.rc-head { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1.5px dashed #C9D3C8; font-size: 16px; }
.rc-head svg { width: 40px; height: 40px; flex: none; }
.rc-head b { font: 700 17px/1.25 var(--round); }
.qty { font-weight: 400; color: var(--muted); }
.rc-lines { list-style: none; margin: 0; padding: 8px 0; border-bottom: 1.5px dashed #C9D3C8; }
.rc-lines li { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 5px 0; font-size: 15px; line-height: 1.3; }
.rc-lines b { font: 800 17px var(--round); text-align: right; font-variant-numeric: tabular-nums; color: var(--t4); }
.rc-lines .rc-start b { color: var(--ink); }
.rc-lines .rc-zero b, .rc-lines .rc-zero span { color: var(--muted); }
.rc-total { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 0; font: 700 18px var(--round); }
.rc-total .tag { margin: -6px 2px -8px 0; }
.how-side { grid-area: side; }
.cost-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cost-chips li { display: flex; align-items: center; gap: 6px; min-height: 38px; padding: 6px 11px 6px 9px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); font-size: 14px; font-weight: 600; line-height: 1.2; }
.cost-chips svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--t3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.band-scale { list-style: none; margin: 20px 0 18px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
.band-scale li { display: grid; align-content: start; gap: 1px; text-align: center; font-size: 11.5px; line-height: 1.25; color: var(--muted); }
.band-scale li::before { content: ""; height: 12px; margin-bottom: 7px; border-radius: 3px; background: var(--tb); }
.band-scale li:first-child::before { border-radius: 6px 3px 3px 6px; }
.band-scale li:last-child::before { border-radius: 3px 6px 6px 3px; }
.band-scale b { font: 700 12.5px/1.2 var(--round); color: var(--tc); }
@media (min-width: 640px) { .band-scale li { font-size: 14px; } .band-scale b { font-size: 15px; } }

/* Same pack, different people */
.family-grid { display: grid; gap: 20px; }
@media (min-width: 1024px) {
  .family-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); grid-template-areas: "head phones" "people phones"; column-gap: 56px; row-gap: 28px; align-items: center; }
  .family .section-head { grid-area: head; align-self: end; margin: 0; }
  .people { grid-area: people; align-self: start; }
  .phones { grid-area: phones; }
}
.people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .people { gap: 20px; } }
.person { display: grid; align-content: start; gap: 1px; text-align: center; }
.portrait { position: relative; display: block; margin-bottom: 12px; }
.portrait img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 20px; background: var(--pale); }
.portrait .tag { --r: 4deg; position: absolute; right: -6px; bottom: -10px; width: clamp(58px, 16vw, 80px); }
.portrait .sticker-num { font-size: clamp(22px, 6vw, 30px); }
.portrait .sticker-band { font-size: clamp(10.5px, 2.8vw, 12px); }
.person-name { font: 700 17px/1.2 var(--round); }
.person-rule { font-size: 14px; line-height: 1.3; color: var(--muted); }
.phones { margin: 0; }
.phones img { width: 100%; max-width: min(440px, 76vw); height: auto; margin: 0 auto; border-radius: 24px; box-shadow: var(--shadow); }
.phones figcaption, .strip-note { margin: 8px 0 0; font-size: 13px; color: var(--muted); text-align: center; }

/* At the shelf: three app screens, a swipe strip on phones and a row on wider screens. */
.screens h2 { margin-bottom: 14px; }
.strip { list-style: none; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 10px; display: grid; grid-auto-flow: column; grid-auto-columns: 64%; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip li { scroll-snap-align: start; }
@media (min-width: 768px) { .strip { margin: 0; padding: 0; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; overflow: visible; } }
.strip figure { margin: 0; }
.strip img { width: 100%; height: auto; aspect-ratio: 600 / 839; object-fit: cover; border-radius: 22px; box-shadow: var(--shadow); background: var(--pale); }
.strip figcaption { margin-top: 10px; font-size: 15px; line-height: 1.35; }
.screens .strip-note { text-align: left; }

/* The beta, and what Stickler never asks for */
.beta { background: var(--green); color: var(--cream); }
.beta-grid { display: grid; gap: 24px; }
@media (min-width: 900px) { .beta-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 56px; } }
.beta-card { display: grid; gap: 14px; justify-items: start; }
.beta-card h2, .beta-card p { margin: 0; }
.beta-status { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-weight: 700; }
.beta .link { color: var(--cream); }
.beta small { font-size: 15px; }
.trust { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.trust li { display: grid; justify-items: center; align-content: start; gap: 8px; padding: 14px 6px; border-radius: 18px; background: rgba(255, 255, 255, .1); text-align: center; font-size: 14px; font-weight: 700; line-height: 1.25; }
.trust svg { width: 28px; height: 28px; fill: none; stroke: var(--yellow); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 900px) { .trust { grid-template-columns: 1fr; } .trust li { grid-auto-flow: column; justify-content: start; gap: 14px; padding: 14px 18px; text-align: left; font-size: 17px; } }

/* Footer */
.site-footer { padding: 40px 0 48px; font-size: 15px; }
.footer-inner { display: grid; gap: 14px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-links a { color: var(--ink); }
.site-footer p { margin: 0; color: var(--muted); }

/* Documents: support, privacy, terms */
/* Top and bottom only: the side gutters come from .wrap. */
.doc-page { padding-top: 40px; padding-bottom: 72px; }
.doc { max-width: 68ch; font-size: 18px; line-height: 1.6; }
.doc h1 { font-size: clamp(36px, 6vw, 56px); margin-bottom: 18px; }
.doc h2 { font-size: clamp(24px, 3vw, 30px); margin: 1.8em 0 .5em; }
.doc h3 { margin-top: 1.4em; }
.doc ul { padding-left: 22px; }
.doc li { margin-bottom: .5em; }
.anchor { margin-left: .3em; color: var(--muted); text-decoration: none; opacity: 0; transition: opacity var(--d1) var(--ease); }
:is(h2, h3):hover > .anchor, .anchor:focus-visible { opacity: 1; }
.toc { margin: 0 0 28px; padding: 16px 20px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.toc ul { margin: 6px 0 0; padding-left: 20px; }
.contact-box { margin-top: 40px; padding: 20px 22px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.contact-box p { margin: 0; }

/* Contact form */
.form-card { margin: 8px 0 36px; padding: 24px; }
.form-card h2 { margin-top: 0; }
.field { display: grid; gap: 6px; margin-bottom: 18px; }
.field label, .field legend { font-weight: 700; font-size: 17px; }
.hint { font-size: 15px; color: var(--muted); }
.field input[type=email], .field input[type=text], .field textarea { width: 100%; padding: 12px 14px; border: 1.5px solid #B9C7BC; border-radius: 12px; background: #FFFFFF; font: 17px/1.4 var(--sans); color: var(--ink); }
.field textarea { min-height: 160px; resize: vertical; }
.field [aria-invalid="true"] { border-color: var(--t4); }
.topics { display: grid; gap: 4px; }
.topics label { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 400; }
.topics input { width: 20px; height: 20px; accent-color: var(--green); }
.error { color: var(--t4); font-size: 15px; font-weight: 600; }
.error-summary { margin-bottom: 18px; padding: 14px 16px; border-radius: 12px; background: #FBE3DF; }
.error-summary h3 { font-size: 18px; margin-bottom: 6px; }
.error-summary ul { margin: 0; padding-left: 20px; }
.form-note { margin: 14px 0 0; font-size: 15px; }
.trap { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.sent-panel h2 { margin-top: 0; }
[hidden] { display: none !important; }

/* 404: an empty shelf and one wobbler that swings once on its hinge. */
.not-found { padding-top: 48px; padding-bottom: 80px; text-align: center; }
.not-found h1 { font-size: clamp(36px, 6vw, 60px); }
.not-found p { max-width: 32em; margin-left: auto; margin-right: auto; }
/* The wobbler hangs from the shelf's front edge on a clear strip and swings about that hinge. */
.nf-scene { position: relative; width: min(100%, 420px); height: 236px; margin: 0 auto 28px; }
.nf-shelf { position: absolute; left: 0; right: 0; top: 86px; height: 18px; border-radius: 4px; background: #E9DDC4; box-shadow: inset 0 -7px 0 #D3C4A4, 0 8px 14px rgba(23, 60, 45, .12); }
.wobbler { position: absolute; left: 62%; top: 100px; width: 96px; height: 130px; margin-left: -48px; transform-origin: 50% 0; }
.wobbler::before { content: ""; position: absolute; left: 50%; top: 0; width: 6px; height: 30px; margin-left: -3px; border-radius: 2px; background: rgba(154, 167, 160, .75); }
.wobbler .sticker-face { position: absolute; top: 26px; left: 0; right: 0; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .2)); }
.wobbler .sticker-num { font-size: 34px; }
.nf-mascot { position: absolute; left: 8%; top: 0; width: 88px; height: auto; }
@media (prefers-reduced-motion: no-preference) { .wobbler { animation: wobble 1.5s var(--ease) .3s 1 both; } }
@keyframes wobble { 0% { transform: rotate(0); } 12% { transform: rotate(14deg); } 28% { transform: rotate(-10deg); } 44% { transform: rotate(6deg); } 60% { transform: rotate(-3.5deg); } 76% { transform: rotate(1.5deg); } 90% { transform: rotate(-.5deg); } 100% { transform: rotate(0); } }
.nf-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; margin-top: 22px; }

/* Method */
.bands { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.bands li { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.bands .pill { display: inline-block; min-width: 96px; padding: 4px 12px; border-radius: 999px; color: #FFFFFF; font-weight: 700; text-align: center; }
.method-layout { display: grid; gap: 28px; }
@media (min-width: 1024px) { .method-layout { grid-template-columns: 220px minmax(0, 720px); gap: 56px; } .method-toc { position: sticky; top: 24px; align-self: start; } .toc-mobile { display: none; } }
@media (max-width: 1023px) { .toc-desktop { display: none; } }
.method-toc a, .toc-mobile a, .toc a { color: var(--green-deep); text-decoration: none; }
.method-toc a:hover, .toc-mobile a:hover, .toc a:hover { text-decoration: underline; }
.method-toc ul, .toc-mobile ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; font-size: 15px; }
.toc-mobile summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.method > h1 { font-size: clamp(36px, 6vw, 56px); }
.method h2 { font-size: clamp(26px, 3.4vw, 34px); margin-top: 1.6em; }
.method > section:first-child h2 { margin-top: 0; }
.rule { padding: 18px 0; border-bottom: 1px solid var(--line); }
.rule-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.rule-head h3 { margin: 0; font-size: 20px; }
.basis { padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--pale); color: var(--ink); }
.basis.stance { background: #FFF3C4; }
.points { position: relative; padding: 2px 10px; border-radius: 999px; font: 800 14px var(--round); color: #FFFFFF; overflow: hidden; background: var(--line); }
.points::before { content: ""; position: absolute; inset: 0; background: var(--t3); transform-origin: left; z-index: -1; }
.rule-line { margin: 6px 0 8px; }
.cites { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15px; }
.cites li { padding-left: 14px; border-left: 3px solid var(--line); }
.cites .kind { color: var(--muted); }
.small-print { margin-top: 40px; font-size: 14px; color: var(--muted); }
.short-list { padding-left: 20px; }

/* Scroll entrances: a 12 px rise and fade, driven by scroll position only, inside a support check. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal > *, .rise { animation: rise linear both; animation-timeline: view(); animation-range: entry calc(4% + var(--k, 0) * 3%) entry calc(46% + var(--k, 0) * 3%); }
    .reveal > :nth-child(2) { --k: 1; } .reveal > :nth-child(3) { --k: 2; } .reveal > :nth-child(4) { --k: 3; } .reveal > :nth-child(n+5) { --k: 4; }
    .points::before { animation: fill linear both; animation-timeline: view(); animation-range: entry 10% entry 60%; }
  }
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fill { from { transform: scaleX(0); } to { transform: none; } }

/* Pack switch: a same-document view transition on the pack art and the score badge. */
::view-transition-group(pack-art), ::view-transition-group(score-badge) { animation-duration: 250ms; animation-timing-function: var(--ease); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0s !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  /* State changes may cross-fade, briefly. */
  .band-pill > span, .dim, .rule-chip::before { transition: opacity 120ms linear !important; }
}

@media print {
  .site-header, .site-footer, .skip, .form-card, .anchor { display: none !important; }
  body { background: #FFFFFF; font-size: 12pt; }
  .doc { max-width: none; }
  .doc a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10pt; }
}