/* Sticker Maker marketing site - self-contained design system.
   Same skeleton as the sibling IDCT sites (Helena / NUTS / Gentastic): one
   accent family, a system font stack for body copy, dark-first, responsive,
   no framework and no CDN. Everything below ships from this repository.

   What differs from the siblings, deliberately:
   - The accent is violet/pink (the app's own palette), not Helena green.
   - Two self-hosted OFL fonts (Fredoka for headings, Bangers for display
     flourishes) instead of a pure system stack - the product is playful.
   - There is no repository: nothing here styles a "star / fork / issues" CTA.
   - The product art is hand-built CSS (`.phone`, `.checker`, `.sticker`,
     `.toolbar`), not screenshots, so the site has no image dependencies. */

/* ---- Self-hosted fonts -------------------------------------------------
   Paths are relative to THIS file, not to the document, so they survive the
   `/sticker-maker` baseurl without any Liquid help.
   Each family ships next to its OFL licence in assets/fonts/ (the SIL Open
   Font Licence requires the licence to travel with the font).
   `font-display: swap` keeps first paint on the system stack - headings are
   never invisible while a 160 KB variable font loads.
   The variable faces are listed twice: browsers that understand
   `truetype-variations` take the first URL, everything else falls through to
   the plain `truetype` entry and renders the default instance. */
@font-face {
  font-family: "Fredoka";
  src: url("../fonts/Fredoka-Variable.ttf") format("truetype-variations"),
       url("../fonts/Fredoka-Variable.ttf") format("truetype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bangers";
  src: url("../fonts/Bangers-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand - mirrors the app's approved design tokens 1:1. */
  --violet: #a78bfa;        /* primary accent (the "Helena green" equivalent) */
  --violet-brt: #c4b5fd;    /* hover / emphasis */
  --violet-deep: #7c5cff;   /* gradient head, large text only (4.3:1 on --bg) */
  --pink: #f472b6;
  --pink-deep: #b06bff;     /* mid stop of the hero gradient */

  /* Tool accents - each one is the colour that tool has in the editor. */
  --cyan: #38bdf8;          /* Adjust + canvas selection */
  --amber: #fbbf24;         /* Erase */
  --green: #34d399;         /* Cut out */
  --orange: #fb923c;        /* Frames */

  /* Surfaces */
  --ink: #0f0819;           /* deepest well: inputs, code, CTA label colour */
  --bg: #131019;
  --bg-2: #1a1624;
  --surface: #1c1826;
  --surface-2: #221d2e;
  --line: #2f2a3b;          /* decorative hairline (1.4:1 - never load-bearing) */
  --line-strong: #625a78;   /* 3.0:1 on --ink: form controls, meter track, focusable edges */

  /* Type */
  --text: #efeaf4;          /* 15.9:1 on --bg */
  --muted: #8b8399;         /* 5.2:1 on --bg, 4.8:1 on --surface - AA body everywhere */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
    Helvetica, Arial, sans-serif;
  --font-head: "Fredoka", var(--font-body);
  --font-display: "Bangers", "Fredoka", var(--font-body);

  /* Geometry */
  --radius: 16px;
  --radius-sm: 10px;
  --maxw: 1080px;

  /* Depth */
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --glow: 0 0 0 1px rgba(167, 139, 250, .25), 0 12px 40px rgba(167, 139, 250, .18);

  /* The app's Export button gradient, reused verbatim for every primary CTA.
     Sized at 200% so it can be swept without redeclaring the stops. */
  --grad: linear-gradient(100deg, #7c5cff 0%, #b06bff 46%, #f472b6 100%);

  /* Checkerboard defaults - overridable per instance. */
  --checker-size: 16px;
  --checker-a: #201b2b;
  --checker-b: #2a2436;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(167, 139, 250, .16), transparent 60%),
    radial-gradient(700px 400px at -10% 10%, rgba(244, 114, 182, .10), transparent 55%),
    var(--bg);
  line-height: 1.6;
}

h1, h2, h3, h4, .page-title { font-family: var(--font-head); font-weight: 600; }

a { color: var(--violet); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Keyboard focus ring (only for keyboard nav, not mouse clicks). WCAG 2.4.7;
   --violet-brt on the dark bg is ~10.2:1, far past the 3:1 UI-component floor,
   and it stays visible on the light surfaces too (store badges, IDCT chip). */
:focus-visible { outline: 2px solid var(--violet-brt); outline-offset: 2px; }

/* Skip-to-content link: off-screen until focused, then pinned top-left. WCAG 2.4.1. */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; }
.skip-link:focus {
  left: 8px; top: 8px; padding: 8px 14px; border-radius: 10px;
  background: var(--surface); color: var(--text); border: 1px solid var(--violet);
}
#main { scroll-margin-top: 72px; }

/* <picture> may wrap responsive <img>; keep it a plain block so the
   `.shot` / `.page-hero-art img` rules govern size. */
picture { display: block; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ---- Top nav ---- */
.nav {
  position: sticky; top: 0; z-index: 20;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  /* Near-opaque on purpose. The hero floats pure-white die-cut stickers
     (`.sticker` has a 5px #fff ring, `.sticker.caption` is solid #fff) that
     scroll straight behind this bar; at .72 the --muted nav links measured
     2.1:1 over that white, and .92 still only reached 4.3:1. At .97 the worst
     case is 4.9:1, so the links clear AA even before site.js adds `.scrolled`
     (i.e. with JavaScript off, where `.scrolled` never arrives at all). */
  background: rgba(19, 16, 25, .97);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s ease, background .25s ease;
}
.nav.scrolled { background: var(--bg); box-shadow: 0 8px 30px rgba(0, 0, 0, .45); }
/* `min-height`, never `height`: a fixed height cannot contain its own content,
   so any future nav item that needs a second row would spill out of the bar
   and over the page instead of growing it. */
.nav .wrap { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.brand {
  display: flex; align-items: center; gap: 11px; font-family: var(--font-head);
  font-weight: 600; font-size: 19px; color: var(--text); letter-spacing: -.01em;
}
.brand:hover { text-decoration: none; }
/* Logo: the app mark on a gradient squircle, drawn in CSS so the nav has no
   image dependency. `.logo img` is still supported if a PNG is dropped in. */
.brand .logo {
  width: 40px; height: 40px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--grad);
  box-shadow: 0 6px 18px rgba(124, 92, 255, .32);
  font-size: 20px; line-height: 1;
  transition: transform .2s ease;
}
.brand:hover .logo { transform: translateY(-1px) rotate(-6deg) scale(1.05); }
.brand .logo img { width: 40px; height: 40px; display: block; border-radius: 12px; }

.nav-links { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nav-links a {
  color: var(--muted); padding: 8px 12px; border-radius: 10px; font-size: 15px;
  transition: color .15s ease, background .15s ease;
}
.nav-links a:hover { color: var(--text); background: var(--surface); text-decoration: none; }
/* Right-hand button cluster in the nav. */
.nav-cta { display: flex; align-items: center; gap: 8px; margin-left: 8px; padding-left: 12px; border-left: 1px solid var(--line); }
/* Child combinator, not descendant: `.nav-cta span` would also match the label
   <span> nested INSIDE each button and give it a second 8px/14px of padding
   (Helena's equivalent rule is `.nav-cta a` alone). `nowrap` keeps a store
   label on one line rather than breaking to "Get it on Google / Play". */
.nav-cta > a, .nav-cta > span {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
  border-radius: 10px; font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.nav-cta a:hover { transform: translateY(-1px); text-decoration: none; }
.nav-cta a.icon-only { padding: 9px; }
.nav-cta a .ic { font-size: 15px; }
.nav-cta a.icon-only .ic { font-size: 17px; }
.nav-cta .ghost { color: var(--text); border: 1px solid var(--line); background: var(--surface); }
.nav-cta .ghost:hover { border-color: var(--violet); color: var(--violet-brt); }
/* Primary nav CTA: the app's own gradient, static here (an animated sweep in a
   sticky header would follow the reader down every page). */
.nav-cta .solid {
  color: var(--ink); background: var(--grad);
  box-shadow: 0 6px 18px rgba(124, 92, 255, .3);
}
.nav-cta .solid:hover { box-shadow: 0 10px 24px rgba(124, 92, 255, .42); }

/* Inline icons (Font Awesome Free paths). Inherit the text colour so they
   recolour with their button/link. */
.ic { width: 1em; height: 1em; fill: currentColor; display: inline-block; vertical-align: -0.125em; flex: 0 0 auto; }
/* Raster brand marks inside icon-only nav buttons. */
.ic-img { height: 18px; width: auto; display: inline-block; vertical-align: -0.28em; flex: 0 0 auto; }

/* ---- Buttons ---- */
.btn {
  display: inline-block; padding: 12px 22px; border-radius: 12px;
  font-family: var(--font-head); font-weight: 600; font-size: 16px;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-2px); }
/* Primary CTA = the app's Export button. --ink on the gradient's darkest stop
   (#7c5cff) is 4.5:1, so the label clears AA across the whole sweep. */
.btn-primary {
  color: var(--ink);
  background: var(--grad);
  background-size: 200% 100%;
  background-position: 0 0;
  box-shadow: 0 8px 22px rgba(124, 92, 255, .32);
  animation: sweep 10s ease-in-out infinite alternate;
}
.btn-primary:hover {
  text-decoration: none; color: var(--ink);
  box-shadow: 0 12px 32px rgba(176, 107, 255, .45);
}
.btn-ghost { border-color: var(--line); color: var(--text); background: var(--surface); }
.btn-ghost:hover { border-color: var(--violet); text-decoration: none; }
/* A slow left/right drift of the gradient - the "sweep" the app's CTA has.
   `alternate` avoids the hard jump a looped translate would give. */
@keyframes sweep { to { background-position: 100% 0; } }

/* ---- Hero ---- */
.hero { padding: 76px 0 44px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.04fr .96fr; gap: 44px; align-items: center; }
/* `min-width: 0` so a long unbroken word in the copy can never push the grid
   wider than its column (the classic grid-blowout / horizontal-scroll bug). */
.hero-copy { min-width: 0; }
.hero h1 { font-size: clamp(34px, 5.4vw, 56px); line-height: 1.06; margin: 0 0 16px; letter-spacing: -.02em; }
/* Accent word inside a heading. */
.accent { color: var(--violet-brt); }
.hero p.lead { font-size: clamp(17px, 2.2vw, 20px); color: var(--muted); max-width: 560px; margin: 0 0 26px; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero .sub { margin-top: 18px; color: var(--muted); font-size: 14px; }
.hero .sub b { color: var(--text); font-weight: 700; }
/* Bangers is a comic display face: caps, tight, slightly loose tracking. */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 15px; letter-spacing: .04em;
  color: var(--text);
  border: 1px solid var(--line); background: var(--surface); padding: 6px 14px;
  border-radius: 999px; margin-bottom: 20px;
}
.pill .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .5); }
  70% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

/* ---- Hero box: the CSS phone floating over a violet glow, with die-cut
   stickers peeling off it ---- */
.hero-box { position: relative; min-height: 460px; display: grid; place-items: center; }
/* Shared soft halo behind hero / page-hero art. Alpha per host via --glow-a. */
.glow {
  position: absolute; inset: -8% -6% -12% -6%; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 55% 45%, rgba(167, 139, 250, var(--glow-a, .3)), transparent 70%);
  filter: blur(10px);
}
.hero-box .glow { --glow-a: .34; }
.hero-box .phone { position: relative; z-index: 2; rotate: -2deg; --bob-y: -12px; animation: bob 7s ease-in-out infinite; }
/* One shared "bob" for every floating element. Each element keeps its own
   static tilt via the independent `rotate` property, so the keyframe only
   moves `translate` and never has to re-declare a rotation. Distance per
   element via --bob-y, phase via --bob-delay. */
@keyframes bob { 50% { translate: 0 var(--bob-y, -10px); } }

/* ---- Hero divider: a hairline that brightens to the accent at the centre,
   with the app mark bobbing in the middle ---- */
.hero-divider { display: flex; align-items: center; gap: 18px; max-width: 760px; margin: 26px auto 6px; padding: 0 20px; }
.hero-divider .line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line) 25%, rgba(167, 139, 250, .45) 50%, var(--line) 75%, transparent); }
.hero-divider .mark {
  width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line); background: var(--surface);
  box-shadow: 0 0 0 7px rgba(167, 139, 250, .07), var(--shadow);
  font-size: 20px; line-height: 1;
  --bob-y: -4px; animation: bob 6s ease-in-out infinite;
}
.hero-divider .mark img { width: 28px; height: 28px; display: block; }

/* ---- Per-page hero: a two-column header with art on the right, so every
   page opens with a visual instead of an empty gap ---- */
.page-hero { overflow: hidden; padding: 56px 0; }
.page-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.page-hero-grid.no-art { display: block; }
.page-hero-copy { min-width: 0; }
.page-title { font-size: clamp(30px, 5vw, 44px); letter-spacing: -.015em; margin: .15em 0 .3em; }
.page-lead { color: var(--muted); max-width: 560px; font-size: 18px; margin: 0; }
.no-art .page-lead { max-width: 720px; }
.page-hero-art { position: relative; display: grid; place-items: center; }
.page-hero-art .glow { inset: -10% -6% -14% -6%; --glow-a: .26; }
.page-hero-art > * { position: relative; z-index: 1; }
.page-hero-art img { width: 100%; height: auto; display: block; }
.page-hero-art .phone,
.page-hero-art > img { rotate: -1.5deg; --bob-y: -9px; animation: bob 7s ease-in-out infinite; }

/* ---- Section ---- */
section { padding: 56px 0; }
.section-head { margin-bottom: 28px; }
.section-head h2 { font-size: clamp(26px, 4vw, 34px); margin: 0 0 8px; letter-spacing: -.01em; }
.section-head p { color: var(--muted); margin: 0; max-width: 680px; }
/* Bangers again for the eyebrow: it reads as a sticker caption, and at 15px
   caps on --bg the violet is 6.9:1. */
.eyebrow {
  color: var(--violet); font-family: var(--font-display); letter-spacing: .1em;
  text-transform: uppercase; font-size: 15px; margin: 0 0 2px;
}

/* Headline band between sections. */
.band { text-align: center; padding: 26px 0; }
.band h2 { font-size: clamp(24px, 4vw, 34px); margin: 0 auto; max-width: 760px; letter-spacing: -.02em; }
.band h2 .accent { color: var(--violet-brt); }
.band p { color: var(--muted); margin: 10px auto 0; max-width: 620px; }

/* ---- Cards grid ----
   A card inherits whatever `--tool` / `--tool-soft` pair it is given by a
   `.tool-*` modifier, so the feature grid can carry each tool's own colour
   (the rhythm the editor's tab bar has). Violet is the default. */
.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card {
  --tool: var(--violet);
  --tool-soft: rgba(167, 139, 250, .16);
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 22px;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-4px); border-color: var(--tool); box-shadow: var(--shadow); }
.card h3 { margin: 0 0 8px; font-size: 19px; display: flex; align-items: center; gap: 10px; }
.card p { margin: 0; color: var(--muted); font-size: 15px; }
.card p + p { margin-top: 10px; }
.card .ico {
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px;
  background: var(--tool-soft); color: var(--tool); flex: 0 0 auto; font-size: 18px;
  transition: transform .2s ease;
}
.card:hover .ico { transform: scale(1.08) rotate(-4deg); }

/* ---- Tool accent modifiers ----
   The six editor tools and their colours. Usable on `.tool` (the phone's tab
   bar) and on `.card` (the feature grid). Each sets a solid accent plus the
   ~16%-alpha wash used behind icons. */
.tool-layers { --tool: var(--violet); --tool-soft: rgba(167, 139, 250, .16); }
.tool-adjust { --tool: var(--cyan);   --tool-soft: rgba(56, 189, 248, .16); }
.tool-text   { --tool: var(--pink);   --tool-soft: rgba(244, 114, 182, .16); }
.tool-erase  { --tool: var(--amber);  --tool-soft: rgba(251, 191, 36, .16); }
.tool-cutout { --tool: var(--green);  --tool-soft: rgba(52, 211, 153, .16); }
.tool-frames { --tool: var(--orange); --tool-soft: rgba(251, 146, 60, .16); }

/* ---- Chips & badges ---- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
  padding: 4px 10px; border-radius: 999px;
}
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: var(--tool-soft, rgba(167, 139, 250, .16)); color: var(--tool, var(--violet-brt));
}
/* Named variants; each pairs a ~16% wash with its full-strength accent, all of
   which clear 6:1 on the surfaces they sit on. */
.badge.done { background: rgba(52, 211, 153, .16); color: var(--green); }
.badge.soon { background: rgba(251, 191, 36, .16); color: var(--amber); }
.badge.info { background: rgba(56, 189, 248, .16); color: var(--cyan); }
.badge.neutral { background: rgba(139, 131, 153, .18); color: var(--muted); }

/* progress meter (e.g. "what's shipped" bars) */
.meter { height: 10px; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--grad); }
.meter-label { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; margin: 6px 2px 0; }

/* ---- The checkerboard ----------------------------------------------------
   The universal "this PNG is transparent" signal and the app's signature
   backdrop. One conic-gradient tile, no image, no JS. Tune per instance with
   --checker-size / --checker-a / --checker-b. */
.checker {
  background-color: var(--checker-a);
  background-image: conic-gradient(
    var(--checker-b) 0 25%, transparent 0 50%,
    var(--checker-b) 0 75%, transparent 0);
  background-size: var(--checker-size) var(--checker-size);
  background-position: 0 0;
}

/* ---- The phone -----------------------------------------------------------
   A hand-built device frame. There are no app screenshots in this repo, so
   every piece of product imagery on the site is a CSS recreation of one of the
   app's three screens (Home / Editor / Export) using the real design tokens.
   The page author composes a variant purely in markup:

     .phone > .phone-screen > [.phone-notch] [.phone-bar] .phone-body
                              [.phone-panel] [.toolbar]

   Everything is token-driven: set --phone-w on `.phone` to resize the whole
   device and the internals follow. */
.phone {
  --phone-w: 268px;
  width: var(--phone-w); flex: 0 0 auto;
  padding: 9px; border-radius: 40px;
  background: linear-gradient(160deg, #3a3348, #1a1624 42%, #241f30);
  border: 1px solid var(--line);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.phone-screen {
  position: relative; overflow: hidden;
  border-radius: 32px; background: var(--bg);
  /* A device PROPORTION as a floor, not a fixed height. `aspect-ratio` here
     would make the height definite, and the only flexible child (the square
     `.phone-canvas`) would then be shrunk to absorb every extra pixel of
     chrome - the 512x512 canvas rendered as a ~1.8:1 letterbox. With a
     min-height the screen grows instead and the canvas stays square.
     2.0556 = 18.5/9; the 18px is `.phone`'s 9px padding on each side. */
  min-height: calc((var(--phone-w) - 18px) * 2.0556);
  display: flex; flex-direction: column;
  font-size: 11px; line-height: 1.35;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}
.phone-notch {
  position: absolute; top: 7px; left: 50%; translate: -50% 0; z-index: 5;
  width: 34%; height: 16px; border-radius: 999px; background: #05030a;
}
/* Top bar: title + subtitle on the left, small round buttons on the right. */
.phone-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 26px 12px 10px; border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.phone-bar-title { font-family: var(--font-head); font-weight: 600; font-size: 13px; margin: 0; }
.phone-bar-sub { color: var(--muted); font-size: 10px; margin: 1px 0 0; }
.phone-bar-btn {
  width: 24px; height: 24px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 8px; border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); font-size: 11px;
}
.phone-bar .phone-cta { margin-left: auto; }
/* Scrollable-looking content column. `.phone-body` never actually scrolls -
   it just clips, so the composition stays fixed at any width. */
.phone-body { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
/* Contextual bottom panel (the editor's per-tool drawer). */
.phone-panel {
  background: var(--surface-2); border-top: 1px solid var(--line);
  padding: 11px 12px; display: flex; flex-direction: column; gap: 9px;
}
.phone-panel-title { font-family: var(--font-head); font-weight: 600; font-size: 12px; margin: 0; }
.phone-panel p { margin: 0; color: var(--muted); font-size: 10px; }
/* The in-app gradient action button (Export / Remove background). */
.phone-cta {
  display: block; text-align: center; border-radius: 10px; padding: 8px 12px;
  font-family: var(--font-head); font-weight: 600; font-size: 12px;
  color: var(--ink); background: var(--grad);
  box-shadow: 0 6px 16px rgba(124, 92, 255, .3);
}
.phone-cta.sm { padding: 5px 12px; font-size: 11px; border-radius: 8px; }
/* Square checkerboard canvas, optionally wearing the animated selection frame. */
.phone-canvas {
  /* `flex: 0 0 auto` so the canvas is never the shock absorber for the fixed-px
     chrome around it - without it, flex shrinking beats `aspect-ratio` and the
     square canvas silently letterboxes. */
  position: relative; aspect-ratio: 1; flex: 0 0 auto;
  border-radius: 14px; overflow: hidden;
  display: grid; place-items: center;
  border: 1px solid var(--line); box-shadow: var(--shadow);
  --checker-size: 14px;
}
.phone-canvas.selected::after {
  content: ""; position: absolute; inset: 10%; pointer-events: none;
  /* "Marching ants": four dashed edges drawn as repeating gradients so the
     dash can be animated (a dashed `border` cannot be). */
  background-image:
    repeating-linear-gradient(90deg, var(--cyan) 0 7px, transparent 7px 14px),
    repeating-linear-gradient(0deg,  var(--cyan) 0 7px, transparent 7px 14px),
    repeating-linear-gradient(90deg, var(--cyan) 0 7px, transparent 7px 14px),
    repeating-linear-gradient(0deg,  var(--cyan) 0 7px, transparent 7px 14px);
  background-size: 14px 1.5px, 1.5px 14px, 14px 1.5px, 1.5px 14px;
  background-position: 0 0, 100% 0, 0 100%, 0 100%;
  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
  animation: ants 1.1s linear infinite;
}
@keyframes ants { to { background-position: 14px 0, 100% 14px, -14px 100%, 0 calc(100% - 14px); } }
/* Corner handles for the selection frame. */
.phone-handle {
  position: absolute; width: 8px; height: 8px; border-radius: 3px; z-index: 3;
  background: var(--bg); border: 1.5px solid var(--cyan);
}
.phone-handle.tl { top: calc(10% - 4px); left: calc(10% - 4px); }
.phone-handle.tr { top: calc(10% - 4px); right: calc(10% - 4px); }
.phone-handle.bl { bottom: calc(10% - 4px); left: calc(10% - 4px); }
.phone-handle.br { bottom: calc(10% - 4px); right: calc(10% - 4px); }
/* Full-canvas "Removing background…" overlay. */
.phone-overlay {
  position: absolute; inset: 0; z-index: 4; display: grid; place-items: center;
  gap: 8px; align-content: center; text-align: center;
  background: rgba(19, 16, 25, .74); color: var(--text); font-size: 10px;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid rgba(167, 139, 250, .28); border-top-color: var(--violet);
  animation: spin .9s linear infinite;
}
@keyframes spin { to { rotate: 360deg; } }
/* Home screen: the 2-up "Recent stickers" grid. */
.thumb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.thumb {
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: var(--surface);
}
.thumb-art { position: relative; aspect-ratio: 1; display: grid; place-items: center; --checker-size: 10px; }
.thumb-meta { padding: 6px 8px; }
.thumb-name { font-family: var(--font-head); font-weight: 600; font-size: 10px; margin: 0; }
.thumb-sub { color: var(--muted); font-size: 9px; margin: 1px 0 0; }
.thumb-art .badge { position: absolute; top: 5px; right: 5px; font-size: 8px; padding: 2px 6px; }
/* Editor: a labelled slider row (Brightness / Contrast / …). --fill is the
   0-100 position of the knob. */
.slider-row { display: grid; grid-template-columns: 56px 1fr 30px; align-items: center; gap: 8px; font-size: 10px; color: var(--muted); }
.slider-track { position: relative; height: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.slider-track::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--fill, 50%); border-radius: 999px; background: var(--tool, var(--violet)); }
.slider-track::after { content: ""; position: absolute; top: 50%; left: var(--fill, 50%); translate: -50% -50%; width: 10px; height: 10px; border-radius: 50%; background: var(--tool, var(--violet)); box-shadow: 0 0 0 3px rgba(19, 16, 25, .9); }
/* Frames tool: the horizontal frame strip. */
.frame-strip { display: flex; gap: 6px; overflow: hidden; }
.frame-thumb {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 8px;
  border: 1px solid var(--line); display: grid; place-items: center; font-size: 14px;
  --checker-size: 8px;
}
.frame-thumb.is-active { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(251, 146, 60, .3); }
.frame-thumb.add { border-style: dashed; color: var(--muted); background: none; }
/* Export: the Static / Animated segmented control. */
.seg { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.seg-btn { flex: 1; text-align: center; padding: 5px 8px; border-radius: 8px; font-size: 10px; font-weight: 600; color: var(--muted); }
.seg-btn.is-active { background: var(--surface-2); color: var(--text); box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
/* Export: the "Send to" target rows. */
.target { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-size: 10px; }
.target .dotmark { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--line-strong); margin-left: auto; flex: 0 0 auto; }
.target.is-active { border-color: var(--violet); background: var(--surface-2); }
.target.is-active .dotmark { border-color: var(--violet); box-shadow: inset 0 0 0 2.5px var(--violet); }
/* App-wide toast, reused as a decorative "done" cue. */
.toast {
  display: inline-flex; align-items: center; gap: 7px; font-size: 10px;
  padding: 6px 11px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
  box-shadow: var(--shadow);
}
.toast::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

/* ---- The tool bar --------------------------------------------------------
   The editor's six coloured tabs. Also usable outside the phone as a
   decorative motif (give the wrapper a width and it stays on one row). */
.toolbar {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px;
  padding: 7px 6px; background: var(--bg-2); border-top: 1px solid var(--line);
}
.tool {
  --tool: var(--muted);
  --tool-soft: rgba(139, 131, 153, .14);
  display: grid; gap: 3px; place-items: center; text-align: center;
  padding: 6px 2px; border-radius: 9px;
  border: 1px solid transparent; background: transparent;
  color: var(--muted); font-size: 8.5px; letter-spacing: .01em; line-height: 1.2;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.tool .tool-ico { font-size: 14px; line-height: 1; }
/* Active tab wears its own accent; each of the six clears 6:1 on --bg-2. */
.tool.is-active { color: var(--tool); background: var(--tool-soft); border-color: var(--tool); }
.tool:hover { color: var(--tool); }

/* ---- Die-cut stickers ----------------------------------------------------
   A floating cut-out with the app's signature thick white outline. The ring is
   a real border (crisp at any zoom, unlike stacked drop-shadows) plus a soft
   shadow underneath so it reads as a peeled vinyl sticker.
   Compose: `.sticker .sticker-tilt .sticker-float`. */
.sticker {
  --sticker-size: 84px;
  --sticker-ring: 5px;
  width: var(--sticker-size); height: var(--sticker-size);
  display: grid; place-items: center; flex: 0 0 auto;
  font-size: calc(var(--sticker-size) * .46); line-height: 1;
  background: var(--sticker-bg, linear-gradient(150deg, #2c2440, #1c1826));
  border: var(--sticker-ring) solid #fff;
  /* Slightly irregular radii - a die cut, not a circle. */
  border-radius: 30% 34% 28% 36% / 32% 28% 36% 30%;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .18);
}
.sticker.round { border-radius: 50%; }
.sticker.square { border-radius: 26%; }
/* Sticker captions use the comic display face, as in the app. */
.sticker.caption {
  width: auto; height: auto; padding: 6px 16px 4px;
  font-family: var(--font-display); font-size: calc(var(--sticker-size) * .3);
  letter-spacing: .04em; color: var(--ink); background: #fff;
  border-radius: 999px; border-width: 0;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .5);
}
/* A small rotation that straightens (and peels up) on hover. */
.sticker-tilt { rotate: var(--tilt, -7deg); transition: rotate .25s ease, translate .25s ease, box-shadow .25s ease; }
.sticker-tilt:hover { rotate: 0deg; translate: 0 -4px; box-shadow: 0 18px 38px rgba(124, 92, 255, .38), 0 0 0 1px rgba(0, 0, 0, .18); }
/* Independent bob; give each sticker its own --bob-y / --bob-delay so they
   drift out of phase around the phone. */
.sticker-float { animation: bob var(--bob-dur, 6.5s) ease-in-out infinite; animation-delay: var(--bob-delay, 0s); }
/* Placement presets inside `.hero-box` / `.page-hero-art`, so a page author
   never needs an inline style. Percentages, so they scale with the box.
   CHILD combinator throughout: a `.sticker` is also the subject sitting inside
   a `.phone-canvas`, and only the ones floating AROUND the art box are direct
   children. Matching descendants would absolutely-position (and, in the
   narrow-screen blocks below, hide) the sticker inside the phone. */
.hero-box > .sticker, .page-hero-art > .sticker { position: absolute; z-index: 3; }
.sticker.pos-tl { top: 4%; left: 2%; }
.sticker.pos-tr { top: 8%; right: 1%; }
.sticker.pos-l  { top: 44%; left: -2%; }
.sticker.pos-r  { top: 38%; right: -2%; }
.sticker.pos-bl { bottom: 8%; left: 4%; }
.sticker.pos-br { bottom: 5%; right: 2%; }

/* ---- Store badges --------------------------------------------------------
   Google Play is a real link (to a placeholder listing URL - see _config.yml).
   The App Store badge is `.soon`: a non-interactive <span>, never an <a>, so
   nothing on the site points at an App Store page that does not exist. */
.store-badges { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; }
.store-badge {
  display: inline-flex; align-items: center; gap: 12px; min-width: 200px;
  padding: 10px 18px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
a.store-badge:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--violet); box-shadow: var(--glow); }
.store-badge .ic, .store-badge .store-badge-ico { font-size: 24px; line-height: 1; flex: 0 0 auto; }
.store-badge-text { display: flex; flex-direction: column; line-height: 1.25; }
.store-badge-sub { font-size: 10px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
.store-badge-name { font-family: var(--font-head); font-weight: 600; font-size: 16px; }
/* Disabled "Coming soon" badge: not clickable, and it must not look like a
   link - but its TEXT is never faded. A blanket `opacity` took the
   "Coming soon" sub-line (--muted, 10px) down to 2.6:1 against the page, and
   that line is the only sighted signal that iOS hasn't shipped, so it is
   content, not chrome. This is also not an "inactive UI component" in WCAG's
   sense: it's a plain <span> with no disabled control semantics. Dim the
   SURFACE (recessed background + dashed edge) and put the sub-line on the
   accent instead - --violet on --bg-2 is 6.9:1. */
.store-badge.soon {
  cursor: default; border-style: dashed; background: var(--bg-2);
}
.store-badge.soon .store-badge-sub { color: var(--violet); }
.store-badge.soon:hover { transform: none; border-color: var(--line); box-shadow: none; }

/* ---- FAQ (details/summary disclosure list) ---- */
.faq { display: grid; gap: 10px; }
.faq-item {
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .2s ease;
}
.faq-item[open] { border-color: rgba(167, 139, 250, .45); }
.faq-item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 18px; cursor: pointer;
  font-family: var(--font-head); font-weight: 600; font-size: 17px;
  list-style: none;
}
.faq-item > summary::-webkit-details-marker { display: none; }
/* A "+" that rotates into an "×" - no icon font, no SVG. */
.faq-item > summary::after {
  content: "+"; flex: 0 0 auto;
  font-size: 22px; line-height: 1; color: var(--violet);
  transition: rotate .2s ease;
}
.faq-item[open] > summary::after { rotate: 45deg; }
.faq-body { padding: 0 18px 16px; color: var(--muted); }
.faq-body > :first-child { margin-top: 0; }
.faq-body > :last-child { margin-bottom: 0; }

/* ---- Legal pages: table of contents + prose ---- */
.legal-toc {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 20px; margin: 0 0 30px;
}
.legal-toc h2, .legal-toc p.legal-toc-title {
  margin: 0 0 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); font-family: var(--font-body); font-weight: 700;
}
.legal-toc ol, .legal-toc ul { margin: 0; padding-left: 20px; columns: 2; column-gap: 26px; }
.legal-toc li { margin: 3px 0; break-inside: avoid; }
.legal-toc a { color: var(--text); }
.legal-toc a:hover { color: var(--violet-brt); }

/* ---- prose (markdown content pages) ---- */
.prose h2 { margin-top: 36px; scroll-margin-top: 84px; }
.prose h3 { margin-top: 26px; }
.prose ul, .prose ol { color: var(--muted); }
.prose li { margin: 4px 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.prose th { color: var(--text); font-weight: 700; }
.prose td { color: var(--muted); }
.prose blockquote {
  margin: 18px 0; padding: 2px 18px; color: var(--muted);
  border-left: 3px solid var(--violet-deep);
}
pre, code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
pre { background: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 16px; overflow-x: auto; font-size: 14px; }
code { background: var(--surface-2); padding: .12em .4em; border-radius: 6px; font-size: .9em; }
pre code { background: none; padding: 0; }

/* ---- Figures / product art in the flow ---- */
.shot { margin: 18px 0 6px; }
.shot img {
  width: 100%; height: auto; border-radius: var(--radius);
  border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--ink);
  transition: transform .25s ease, box-shadow .25s ease;
}
.shot img:hover { transform: translateY(-4px) scale(1.006); box-shadow: var(--glow); }
.shot figcaption { color: var(--muted); font-size: 14px; margin-top: 10px; }

/* ---- CTA rows ---- */
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; align-items: center; }

/* ---- Contact form (Web3Forms) ---- */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 36px; align-items: start; }
.contact-form { background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
/* Input borders use --line-strong (3.0:1 on the --ink well) - WCAG 1.4.11
   non-text contrast applies to form-control boundaries, and the decorative
   --line hairline would not clear it. */
.field input, .field textarea {
  width: 100%; background: var(--ink); color: var(--text); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: 11px 13px; font: inherit; font-size: 15px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* --muted on the --ink well is 5.4:1; the old one-off #7c7390 was 4.41:1 and
   missed the 4.5:1 AA floor for this 15px text. */
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--violet-brt); box-shadow: 0 0 0 3px rgba(167, 139, 250, .22); }
.field textarea { resize: vertical; min-height: 130px; }
.contact-form .h-captcha { margin: 6px 0 14px; }
.form-note { color: var(--muted); font-size: 13px; margin-top: 12px; }

/* ---- Footer ---- */
.footer { border-top: 1px solid var(--line); padding: 34px 0; color: var(--muted); font-size: 14px; }
.footer .wrap { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
.footer a { color: var(--muted); }
.footer a:hover { color: var(--violet-brt); }

/* IDCT brand lockup: the logo is black-on-white, so it sits on a white chip. */
.idct-badge {
  display: inline-flex; align-items: center; margin-top: 12px; background: #fff;
  border-radius: 10px; padding: 7px 12px; box-shadow: 0 2px 12px rgba(0, 0, 0, .4);
  transition: transform .15s ease, box-shadow .15s ease;
}
.idct-badge:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }
.idct-badge img { height: 30px; width: auto; display: block; }

/* ---- Scroll reveal (progressive enhancement; visible by default) ---- */
.reveal { opacity: 1; }
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }

/* ---- Tablet / small laptop ---- */
@media (max-width: 860px) {
  .hero { padding: 52px 0 28px; }
  .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  /* The desktop hero is a tilted, bobbing phone ringed by floating stickers;
     that composition doesn't read at column width. Straighten everything,
     centre it, and keep only the two stickers that still have room - rotation
     and negative offsets are the classic source of horizontal overflow. */
  .hero-box { min-height: 0; margin: 8px auto 0; max-width: 520px; }
  .hero-box .glow { inset: -6% 0 -6% 0; }
  .hero-box .phone { rotate: none; translate: none; animation: none; }
  .hero-box > .sticker.pos-l, .hero-box > .sticker.pos-tl { display: none; }
  .hero-box > .sticker { --sticker-size: 68px; }
  .hero-box > .sticker.pos-tr { right: 4%; }
  .hero-box > .sticker.pos-r { right: 2%; }
  .hero-box > .sticker.pos-br { right: 4%; }
  .contact-grid { grid-template-columns: 1fr; gap: 22px; }
  .page-hero-grid { grid-template-columns: 1fr; gap: 22px; }
  .page-hero-art { max-width: 460px; margin: 0 auto; }
  .page-hero-art .phone, .page-hero-art > img { rotate: none; translate: none; animation: none; }
  .page-hero-art > .sticker { display: none; }
}

/* ---- Phone (<=640px): all narrow-screen overrides live here ---- */
@media (max-width: 640px) {
  /* Stacked, centred nav: brand on top, button cluster below it, page links
     last - every row centred on its own line. */
  .nav .wrap { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; row-gap: 10px; }
  .brand { order: 1; width: 100%; justify-content: center; }
  .nav-cta { order: 2; width: 100%; margin-left: 0; justify-content: center; border-left: 0; padding-left: 0; }
  .nav-links { order: 3; width: 100%; margin-left: 0; justify-content: center; gap: 2px; }
  .nav-links a { padding: 6px 10px; }
  .hero { padding: 36px 0 20px; }
  /* No decorative transforms at all below this width. Only the stickers
     floating around the phone go - the subject inside the canvas stays. */
  .hero-box > .sticker { display: none; }
  .hero-box .phone { --phone-w: min(240px, 72vw); }
  .btn { width: auto; }
  .store-badge { min-width: 0; flex: 1 1 100%; }
  /* The sticky header stacks into three rows down here, so it is far taller
     than the 72/84px desktop offsets. Without this, every legal-page TOC jump,
     the homepage #faq anchor and the skip link land underneath it. */
  #main { scroll-margin-top: 165px; }
  .prose h2 { scroll-margin-top: 165px; }
  .legal-toc ol, .legal-toc ul { columns: 1; }
  .prose table { display: block; overflow-x: auto; }
  .footer .wrap { justify-content: center; text-align: center; }
}

/* ---- Reduced motion: every animation and every hover transform added
   anywhere in this file must be neutralised here ---- */
@media (prefers-reduced-motion: reduce) {
  /* `*` matches ELEMENTS only - it never reaches generated content, and the
     one infinite animation in this file that lives on a pseudo-element is the
     `ants` marching-ants selection frame (`.phone-canvas.selected::after`),
     which is on screen at page load on / and /features/. */
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .card:hover, .shot img:hover, a.store-badge:hover,
  .idct-badge:hover, .brand:hover .logo, .card:hover .ico,
  .nav-cta a:hover { transform: none; }
  .sticker-tilt, .sticker-tilt:hover { transition: none; rotate: var(--tilt, -7deg); translate: none; }
  .faq-item > summary::after { transition: none; }
  /* The CTA keeps its gradient, just frozen at the start of the sweep. */
  .btn-primary { background-position: 0 0; }
}

/* ---- Small utilities (replace one-off inline styles) ---- */
.muted { color: var(--muted); }
.text-center { text-align: center; }
/* `.lead` / `.page-lead` carry a 560px measure cap that is deliberate in the
   two-column heroes. In a centred single column that cap left-aligns the
   paragraph BOX, so its centre drifts ~50px off the headline's - centre the
   box too rather than widening the measure. (`p.lead` matches the specificity
   of `.hero p.lead` above and is declared later, so it wins.) */
.text-center p.lead, .text-center .page-lead { margin-left: auto; margin-right: auto; }
.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }
.btn-block { width: 100%; }
/* Visually hidden but announced to screen readers (e.g. the "opens in new tab"
   cue appended to external links by site.js). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- Cookie-consent banner (prior-consent GA; see _includes/consent.html).
   Note this is the *website's* analytics only - the app itself ships no
   analytics at all, and the privacy page keeps the two apart. ---- */
.consent-banner { position: fixed; inset-inline: 0; bottom: 0; z-index: 70; padding: 12px; }
.consent-banner.hidden { display: none; }
.consent-inner {
  max-width: 860px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px 18px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 15px 18px; box-shadow: 0 14px 44px rgba(0, 0, 0, .6);
}
.consent-text { flex: 1 1 320px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.consent-actions { display: flex; gap: 8px; flex-shrink: 0; }
.consent-btn { padding: 8px 18px; font-size: 14px; }
.consent-open { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.consent-open:hover { color: var(--violet-brt); }

/* ---- Print: the legal pages are the only ones anyone prints ---- */
@media print {
  body { background: #fff; color: #000; }
  .nav, .footer, .consent-banner, .skip-link, .hero-divider,
  .page-hero-art, .store-badges, .cta-row, .phone, .sticker { display: none !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  main, .wrap { max-width: none; padding: 0; }
  .prose a { color: #000; text-decoration: underline; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; word-break: break-all; }
  .prose td, .muted, .page-lead { color: #333; }
  .legal-toc { border: 1px solid #999; }
  h1, h2, h3 { break-after: avoid; }
}