/* PenPigeon "original-zoom" re-skin layer.

   WHAT THIS IS
   Loaded AFTER the site's own css/tokens.css, base.css, page sheets and funnel.css. It does not
   replace them. It (1) redefines the SAME custom-property names the original CSS reads with the
   original-zoom palette and fonts, and (2) restyles the real component classes (buttons, cards,
   forms, tabs, badges, dialogs, header, footer...) so a page that keeps its ORIGINAL markup still
   comes out in the new look. Pages written with new markup use the same classes, so everything
   looks like one site.

   THE LOOK, in one paragraph
   Cream paper cards (14px) with a flat hard 8px shadow and a dashed inner outline, sitting on a
   fixed paper-cut countryside (scene.css). Terracotta buttons (10px) with a hard 4px bottom edge
   that presses down. Young Serif for headings, Newsreader for reading text, Karla for every piece
   of UI (buttons, labels, inputs, tags), Reenie Beanie for handwriting. No soft glows, no blur
   shadows, no gradients on surfaces. Light by default; a warm dark-brown paper version follows the OS or the toggle.

   RULES FOR PAGE AUTHORS
   - Put content on a cream surface: .card (or one of the surfaces listed in section 6). Never put
     body text straight onto the scene.
   - Use the tokens (--cream, --terra, --ink...), never new hex values.
   - Do not edit anything under ../js or ../css. Fix a look HERE, with a selector at least as
     specific as the original one (the original funnel.css uses !important in places, so a few
     rules below do too).
   - Dark mode is the 3-way token convention: light in :root, dark in @media (prefers-color-scheme: dark)
     :root:not([data-theme="light"]), and again in :root[data-theme="dark"] (keep the two dark blocks identical).
     Never define a colour only inside a dark block, and never hard-code one: use a token (--ink-rgb for
     tints of the ink, --cream-hi for a hover fill, --ok-text, --note-tint ...).
   - The PRINTED postcard stays cream paper with blue/dark pen ink in both themes: use --card-paper /
     --card-paper-2 and --card-ink for anything that is the card itself, never --cream / --ink.

   CONTENTS
   1 tokens   2 base type + links + focus   3 pigeon colours   4 header + footer + skip link
   5 buttons  6 surfaces (cards, panels, plates)   7 tags, badges, facts   8 forms
   9 messages (alerts, toasts)   10 dialogs + overlays   11 tabs, steppers, chips
   12 tables, details/FAQ, lists   13 account / wizard / order / capture odds and ends
   14 info pages (pricing, faq, contact, legal)   15 motion + small screens */

/* ================================================================== 1. TOKENS
   Same names the original CSS reads. Light lives in :root; dark is repeated twice (OS dark unless the
   page is forced light, and forced dark), exactly like css/tokens.css. The <head> of every page sets
   data-theme from localStorage "pp-theme" before first paint; js/theme.js runs the toggle. */
:root {
  color-scheme: light;

  /* ground / surfaces */
  --paper: #fbf1de;            /* cream: the card colour */
  --paper-raised: #fffaf0;     /* cream-2: a surface sitting ON a card (inputs, tiles) */
  --paper-sunken: #f3e6c9;     /* a recess on a card */
  --bed: #ecdcbc;              /* deepest step: wells, table heads */

  /* ink */
  --ink: #3a2a24;
  --ink-dim: #6a5249;          /* 6.5:1 on cream */
  --ink-faint: #7b6559;        /* 5:1 on cream: captions, meta */
  --card-ink: #1f2f57;         /* pen ink on the PRINTED card (blue), never --ink */

  /* the one accent: terracotta */
  --pen: #b0472d;              /* 5.3:1 on cream: fine for text */
  --pen-deep: #7f2f1c;
  --pen-wash: rgb(var(--terra-rgb) / .12);

  /* second voice: sage (fills, check bullets) */
  --accent-2: #5f7048;
  --accent-2-deep: #44532f;
  --accent-2-wash: rgb(107 124 82 / .18);

  /* dividers: the original-zoom look uses dotted rules and a 2px dashed edge */
  --grid-line: transparent;
  --tick: rgb(var(--ink-rgb) / .35);
  --rule: rgb(var(--ink-rgb) / .2);
  --rule-strong: rgb(var(--ink-rgb) / .42);
  --travel: rgb(var(--ink-rgb) / .28);

  --on-ink: #fbf1de;
  --on-ink-dim: #f3ead6;
  --on-ink-faint: #cdbf9f;

  /* state colours (all clear 4.5:1 on cream) */
  --flag: #a8281d;
  --flag-wash: rgb(168 40 29 / .1);
  --ok: #3d6b3f;
  --ok-wash: rgb(61 107 63 / .12);
  --warn: #8a5a00;

  /* type */
  --font-heading: "Young Serif", Georgia, "Times New Roman", serif;
  --font-heading-weight: 400;
  --font-display: var(--font-heading);
  --font-body: "Newsreader", Georgia, "Times New Roman", serif;
  --font-ui: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand: "Reenie Beanie", "Bradley Hand", cursive;
  /* the original calls this "mono" for little labels; here those are Karla. Real code uses ui-monospace below. */
  --font-mono: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tracking-display: -.005em;
  --tracking-mono-label: .06em;

  --step--1: .9375rem;
  --step-0: 1.0625rem;
  --step-1: 1.1875rem;
  --step-2: clamp(1.45rem, 1.25rem + .8vw, 1.75rem);
  --step-3: clamp(1.9rem, 1.2rem + 2.2vw, 2.9rem);
  --step-4: clamp(2.2rem, 1.3rem + 3.2vw, 3.6rem);
  --step-5: clamp(2.8rem, 1.6rem + 4.4vw, 5rem);

  --container: 1200px;

  /* the radius rule: 14 cards, 10 buttons and fields, 6 small tags */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 6px;
  --perf-radius: 6px;

  /* flat, hard shadows only */
  --edge: rgb(var(--ink-rgb) / .18);
  --shadow-card: 8px 8px 0 var(--edge);
  --shadow-lift: 5px 5px 0 rgb(var(--ink-rgb) / .24);
  /* the three numbers every panel shares (cards, the plan card, the ticket, the question sheet, the stage heading) */
  --panel-radius: 14px;
  --panel-shadow: 8px 8px 0 var(--edge);
  --panel-edge: rgb(var(--ink-rgb) / .2);
  /* and the small tier (tags, captions, the stage's progress plate) */
  --chip-radius: 6px;
  --chip-shadow: 3px 3px 0 rgb(var(--shade-rgb) / .2);

  --ease-out: cubic-bezier(.2, 0, 0, 1);

  /* names introduced by this theme (use these in new CSS) */
  --cream: #fbf1de;
  --cream-2: #fffaf0;
  --footer-ink: #fff6e2;   /* text on the footer ground: 5.2:1 on the lightest ground the scene paints (dawn), 5.4:1 on the day-time green */
  --terra: #b0472d;
  --terra-deep: #7f2f1c;
  --sage: #6b7c52;
  --blue: #1f2f57;
  --btn-on: #fdf3e2;           /* label on terracotta */

  /* tints and fills that used to be hard-coded (the -rgb ones are "r g b" so rgb(var(--ink-rgb) / .2) works) */
  --ink-rgb: 58 42 36;
  --shade-rgb: 58 42 36;       /* hard shadows: the ink in light, black in dark */
  --room-dim: 0;               /* dims the About wall in dark */
  --cream-rgb: 251 241 222;
  --cream-2-rgb: 255 250 240;
  --terra-rgb: 176 71 45;
  --cream-hi: #ffffff;         /* hover fill of a cream-2 control */
  --terra-hover: #bd5034;      /* primary button hover */
  --terra-edge: #7f2f1c;       /* the hard edge under a terracotta button */
  --on-sage: #fbf1de;          /* tick on a sage disc */
  --on-flag: #ffffff;          /* label on a red (danger) button */
  --flag-hover: #b83024;
  --flag-edge: #6e1710;
  --ok-text: #2c5230;          /* green text on a pale ground */
  --note-tint: #f0d678;        /* yellow note fill (mixed 28% into cream-2) */
  --note-edge: rgb(176 138 40 / .55); /* the note's border (was a self-reference, so light notes had no border) */
  --scrim: rgb(44 30 26 / .62);
  --focus: #1f2f57;            /* focus ring */
  --hi-text: #ffffff;          /* hovered footer link */
  /* the PRINTED postcard: cream paper, never themed */
  --hand-ink: #1f2f57; /* handwriting on a PAGE card (the printed card uses --card-ink) */
  --card-paper: #fbf1de;
  --card-paper-2: #fffaf0;
  --card-text: #3a2a24;
  --card-text-dim: #6a5249;
  --card-rule: rgb(58 42 36 / .35);
  --card-terra: #b0472d;
  --card-terra-deep: #7f2f1c;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%233a2a24' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* aliases the older sheets read: pointed back at the new names */
  --postal-red: var(--pen);
  --postal-red-dark: var(--pen-deep);
  --postal-red-tint: var(--pen-wash);
  --red-text: var(--pen);
  --airmail-blue: var(--pen);
  --airmail-blue-bright: var(--pen);
  --airmail-blue-tint: var(--pen-wash);
  --postmark-ink: var(--pen);
  --band-red-b: var(--ink);
  --stamp-gray: var(--ink-faint);
  --tape: var(--pen-wash);
  --tape-stripe: var(--rule);
  --border: var(--rule);
  --border-strong: var(--rule-strong);
  --border-on-surface: var(--rule);
  --surface-edge: var(--rule);
  --guide-line: rgb(120 150 190 / .55);
}

/* dark: warm brown paper. OS dark unless the page is forced light... */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    /* warm dark brown paper, cream ink, lifted terracotta */
    --paper: #2b211c;
    --paper-raised: #34281f;
    --paper-sunken: #241b16;
    --bed: #1f1713;

    --ink: #f1e6cf;
    --ink-dim: #d3c5a9;          /* 8.4:1 on cream-2 */
    --ink-faint: #b6a78d;        /* 6:1 */
    --card-ink: #1f2f57;         /* the printed card is still cream: blue pen on it, as in light */

    --pen: #e0785a;              /* 4.8:1 on cream-2 */
    --pen-deep: #f2a089;
    --pen-wash: rgb(224 120 90 / .18);

    --accent-2: #a9bd8c;
    --accent-2-deep: #c5d6a8;
    --accent-2-wash: rgb(169 189 140 / .2);

    --on-ink: #2b211c;
    --on-ink-dim: #3a2d24;
    --on-ink-faint: #5c4b3f;

    --flag: #f4887d;
    --flag-wash: rgb(244 136 125 / .16);
    --ok: #8fcf93;
    --ok-wash: rgb(143 207 147 / .16);
    --warn: #e0b050;

    --edge: rgb(0 0 0 / .38);
    --shadow-lift: 5px 5px 0 rgb(0 0 0 / .45);

    --cream: #2b211c;
    --cream-2: #34281f;
    --footer-ink: #f1e6cf;
    --terra: #e0785a;
    --terra-deep: #f2a089;
    --sage: #8fa874;
    --btn-on: #2a1810;

    --ink-rgb: 241 230 207;
    --shade-rgb: 0 0 0;
    --room-dim: .4;
    --cream-rgb: 43 33 28;
    --cream-2-rgb: 52 40 31;
    --terra-rgb: 224 120 90;
    --cream-hi: #3f3126;
    --terra-hover: #ea8a6f;
    --terra-edge: #8c3a25;
    --on-sage: #1f1812;
    --on-flag: #1c1410;
    --flag-hover: #f59a90;
    --flag-edge: #8a2c24;
    --ok-text: #9fd3a1;
    --note-tint: #c9a640;
    --note-edge: rgb(224 190 90 / .5);
    --scrim: rgb(10 6 4 / .74);
    --focus: #ffd98a;
    --hi-text: #ffffff;
    --hand-ink: #b9c8f0;
    --card-paper: #fbf1de;
    --card-paper-2: #fffaf0;
    --card-text: #3a2a24;
    --card-text-dim: #6a5249;
    --card-rule: rgb(58 42 36 / .35);
    --card-terra: #b0472d;
    --card-terra-deep: #7f2f1c;
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%23f1e6cf' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}
/* ...and forced dark. Keep identical to the block above. */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* warm dark brown paper, cream ink, lifted terracotta */
  --paper: #2b211c;
  --paper-raised: #34281f;
  --paper-sunken: #241b16;
  --bed: #1f1713;

  --ink: #f1e6cf;
  --ink-dim: #d3c5a9;          /* 8.4:1 on cream-2 */
  --ink-faint: #b6a78d;        /* 6:1 */
  --card-ink: #1f2f57;         /* the printed card is still cream: blue pen on it, as in light */

  --pen: #e0785a;              /* 4.8:1 on cream-2 */
  --pen-deep: #f2a089;
  --pen-wash: rgb(224 120 90 / .18);

  --accent-2: #a9bd8c;
  --accent-2-deep: #c5d6a8;
  --accent-2-wash: rgb(169 189 140 / .2);

  --on-ink: #2b211c;
  --on-ink-dim: #3a2d24;
  --on-ink-faint: #5c4b3f;

  --flag: #f4887d;
  --flag-wash: rgb(244 136 125 / .16);
  --ok: #8fcf93;
  --ok-wash: rgb(143 207 147 / .16);
  --warn: #e0b050;

  --edge: rgb(0 0 0 / .38);
  --shadow-lift: 5px 5px 0 rgb(0 0 0 / .45);

  --cream: #2b211c;
  --cream-2: #34281f;
  --footer-ink: #f1e6cf;
  --terra: #e0785a;
  --terra-deep: #f2a089;
  --sage: #8fa874;
  --btn-on: #2a1810;

  --ink-rgb: 241 230 207;
  --shade-rgb: 0 0 0;
  --room-dim: .4;
  --cream-rgb: 43 33 28;
  --cream-2-rgb: 52 40 31;
  --terra-rgb: 224 120 90;
  --cream-hi: #3f3126;
  --terra-hover: #ea8a6f;
  --terra-edge: #8c3a25;
  --on-sage: #1f1812;
  --on-flag: #1c1410;
  --flag-hover: #f59a90;
  --flag-edge: #8a2c24;
  --ok-text: #9fd3a1;
  --note-tint: #c9a640;
  --note-edge: rgb(224 190 90 / .5);
  --scrim: rgb(10 6 4 / .74);
  --focus: #ffd98a;
  --hi-text: #ffffff;
  --hand-ink: #b9c8f0;
  --card-paper: #fbf1de;
  --card-paper-2: #fffaf0;
  --card-text: #3a2a24;
  --card-text-dim: #6a5249;
  --card-rule: rgb(58 42 36 / .35);
  --card-terra: #b0472d;
  --card-terra-deep: #7f2f1c;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%23f1e6cf' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ================================================================== 2. BASE */
html { overflow-x: clip; scroll-padding-top: 5.5rem; }
/* anything the keyboard can reach scrolls clear of the sticky header (and the scroll tag at the bottom) instead of landing under it */
:where(a, button, summary, input, select, textarea, [tabindex]) { scroll-margin-block: 5.5rem 5rem; }
body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink);
  background-color: var(--paper);
  overflow-x: clip;
}
h1, h2, h3, h4, h5 { font-family: var(--font-heading); font-weight: 400; letter-spacing: var(--tracking-display); color: var(--ink); line-height: 1.1; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
code, kbd, samp, pre { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
code, kbd, samp { background: var(--pen-wash); }

a { color: var(--pen); text-decoration-color: color-mix(in srgb, var(--pen) 50%, transparent); }
a:hover { color: var(--pen-deep); text-decoration-color: var(--pen-deep); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgb(240 214 120 / .8); color: #3a2a24; }
::-moz-selection { background: rgb(240 214 120 / .8); color: #3a2a24; }

/* no JS: site-header.js never ran, so show the signed-out buttons only */
html:not(.is-signed-in):not(.is-signed-out) .auth-only-in { display: none !important; }

/* light/dark toggle (js/theme.js fills the sun or moon): the same 44px square, hard-edged button as the menu toggle */
.theme-toggle, [data-theme-toggle] {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; padding: 0; cursor: pointer;
  border: 2px solid rgb(var(--ink-rgb) / .5); border-radius: 10px; background: var(--cream-2); color: var(--ink);
  box-shadow: 0 3px 0 rgb(var(--shade-rgb) / .3);
}
.theme-toggle:hover, [data-theme-toggle]:hover { background: var(--cream-hi); color: var(--ink); border-color: rgb(var(--ink-rgb) / .5); }
.theme-toggle:active, [data-theme-toggle]:active { transform: translateY(3px); box-shadow: none; }
.theme-toggle svg, [data-theme-toggle] svg { display: block; width: 22px; height: 22px; stroke-width: 1.8; }
.site-header-inner .theme-toggle { margin-left: 0; }
.site-header-inner .theme-toggle + .nav-toggle { margin-left: 0; }
.site-header-actions + .theme-toggle { margin-left: 0; }

/* the "fill in" yellow used for placeholder blanks */
.fill { color: #3a2a24; background: rgb(240 214 120 / .7); box-shadow: 0 0 0 2px rgb(240 214 120 / .7); border-radius: 3px; }
.hand { font-family: var(--font-hand); font-size: 1.9rem; line-height: 1; }
.eyebrow { font: 700 .8125rem/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }

/* ================================================================== 3. PIGEON COLOURS
   For inline <svg><use href="#pigeon"> and any drawn pigeon. Override --pg-* on a parent to repaint. */
.pg-leg { stroke: var(--pg-leg, #b5532f); }
.pg-tail { fill: var(--pg-tail, #6f7681); }
.pg-tail2 { fill: var(--pg-tail2, #4a5058); }
.pg-body { fill: var(--pg-body, #a8adb4); }
.pg-breast { fill: var(--pg-breast, #b9b4b8); }
.pg-neck { fill: var(--pg-neck, #5f8a82); opacity: .9; }
.pg-neck2 { fill: var(--pg-neck2, #8c5d86); opacity: .55; }
.pg-wing { fill: var(--pg-wing, #8b9199); }
.pg-wingtip { fill: var(--pg-wingtip, #4a5058); }
.pg-bar { stroke: var(--pg-bar, #2e3238); }
.pg-beak { fill: var(--pg-beak, #3a3f46); }
.pg-cere { fill: var(--pg-cere, #e9e1d3); }
.pg-eye-ring { fill: var(--pg-eye-ring, #d9822b); }
.pg-eye { fill: var(--pg-eye, #1d1a17); }
.pg-glint { fill: var(--pg-glint, #fff); }

/* ================================================================== 4. HEADER, FOOTER, SKIP LINK */
.skip-link, .skip {
  background: var(--cream); color: var(--ink); border-radius: 10px;
  font: 700 .9375rem/1 var(--font-ui); padding: 15px 16px; min-height: 44px; box-shadow: 4px 4px 0 var(--edge);
}
.skip-link:focus { left: 12px; top: 12px; outline-color: var(--focus); }

.site-header {
  background: rgb(var(--cream-rgb) / .97);
  border-bottom: 0;
  box-shadow: 0 2px 0 rgb(var(--shade-rgb) / .14);
}
.site-header.is-scrolled { background: rgb(var(--cream-rgb) / .97); border-bottom-color: transparent; }
.site-header-inner { max-width: 1280px; height: auto; min-height: 66px; gap: 26px; padding-inline: clamp(16px, 3vw, 32px); }
@media (min-width: 640px) { .site-header-inner { height: auto; gap: 26px; } }
.wordmark { gap: 10px; min-height: 44px; font: 400 1.5rem/1 var(--font-heading); color: var(--ink); text-decoration: none; letter-spacing: 0; }
.wordmark:hover { color: var(--ink); }
.wordmark-mark { width: 46px; height: 36px; transform: none; flex: none; color: inherit; }
img.wordmark-mark { object-fit: contain; }
@media (max-width: 760px) { .wordmark { font-size: 1.3rem; } }

.site-nav a {
  font: 700 .9375rem/1.2 var(--font-ui); color: var(--ink) !important; text-decoration: none;
  display: flex; align-items: center; min-height: 44px;
  padding: 10px 12px; border-radius: 8px; border-bottom: 0;
}   /* !important: funnel.css colours every body link with the pen */
.site-nav a:hover { background: rgb(var(--ink-rgb) / .08); color: var(--ink) !important; }
.site-nav a.is-active { color: var(--terra-deep) !important; border-bottom-color: transparent; background: rgb(var(--terra-rgb) / .1); }
.site-nav-auth { color: var(--terra-deep) !important; }

.site-header-actions { gap: 14px; }
/* "Log in" / "Account" read as a plain link; the solid button is the call to action */
.site-header-actions .btn-outline {
  background: none !important; border-color: transparent; box-shadow: none; min-height: 44px; padding: 0 10px;
  color: var(--ink); font: 700 .9375rem/1.2 var(--font-ui);
}
.site-header-actions .btn-outline:hover { background: none !important; text-decoration: underline; text-underline-offset: 4px; transform: none; }
.site-header-actions .btn-primary { min-height: 44px; padding: 0 18px; }
.site-header .btn { min-height: 44px; }   /* account and operator headers: Sign out is a .btn-sm */

.nav-toggle { width: 44px; height: 44px; border: 2px solid rgb(var(--ink-rgb) / .5); border-radius: 10px; background: var(--cream-2); box-shadow: 0 3px 0 rgb(var(--shade-rgb) / .3); }
.nav-toggle:active { transform: translateY(3px); box-shadow: none; }
.nav-toggle span { background: var(--ink); height: 2px; }

/* mobile drawer: a cream sheet with a flat edge */
.site-nav {
  background: var(--cream); border-top: 0; border-radius: 0 0 14px 14px;
  box-shadow: 0 6px 0 rgb(var(--shade-rgb) / .2);
}
.site-nav a { border-bottom: 2px dotted rgb(var(--ink-rgb) / .22); border-radius: 0; padding: 14px 0; }
.site-nav a:hover { background: none; }
.site-nav a.is-active { background: none; border-bottom-color: rgb(var(--ink-rgb) / .22); }
@media (min-width: 900px) {
  .site-nav { background: none; box-shadow: none; border-radius: 0; margin-left: 10px; gap: 4px; }
  .site-nav a { padding: 10px 12px; border-bottom: 0; border-radius: 8px; }
  .site-nav a:hover { background: rgb(var(--ink-rgb) / .08); }
  .site-nav a.is-active { background: rgb(var(--terra-rgb) / .1); border-bottom-color: transparent; }
}
@media (max-width: 639px) { .site-header-actions .btn-outline { display: none; } }
/* the nav's own Log in link is for the mobile menu only; the .site-nav a rule above sets display, so hide it again here */
@media (min-width: 900px) { .site-nav a.site-nav-auth { display: none; } }

/* footer takes the colour of the ground in the scene (green by default, darker at night) */
.site-footer {
  background: var(--ground, #566b47); color: var(--footer-ink); border-top: 0;
  padding: 34px 0 30px; font-family: var(--font-body); font-size: var(--step--1);
}
/* same column as the header, so the two line up */
.site-footer-inner { max-width: 1280px; margin: 0 auto; padding-inline: clamp(16px, 3vw, 32px); gap: 18px; align-items: flex-start; }
.site-footer .wordmark { color: var(--footer-ink); font-size: 1.5rem; }
/* --footer-ink clears 4.5:1 on every ground the scene paints under the footer (5.2:1 on the day-time green, more at dusk and night) */
.site-footer-tag { color: var(--footer-ink); font-size: var(--step--1); }
.site-footer-nav { gap: 0 22px; }
.site-footer-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--footer-ink) !important; font: 700 .9375rem/1.2 var(--font-ui); padding: 0; text-decoration: none; }
.site-footer-nav a:hover { color: var(--hi-text) !important; text-decoration: underline; text-underline-offset: 4px; }
.site-footer-credit { color: var(--footer-ink); border-top: 0; padding-top: 0; font-size: var(--step--1); }
.site-footer-credit a { display: inline-flex; align-items: center; min-height: 44px; color: var(--footer-ink) !important; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 760px) {
  .site-footer-inner { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; justify-content: flex-start; }
  .site-footer-tag, .site-footer-credit { order: 0; flex-basis: auto; }
}

/* ================================================================== 5. BUTTONS
   .btn            secondary (cream, ink outline)      .btn-primary  terracotta
   .btn-outline    cream with terracotta edge           .btn-ghost    bare text
   .btn-danger     destructive (red)                    .btn-sm / .btn-lg / .btn-block */
.btn {
  min-height: 46px; padding: 0 24px; gap: 8px;
  font: 700 1rem/1.1 var(--font-ui); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  color: var(--ink); background: var(--cream-2);
  border: 2px solid rgb(var(--ink-rgb) / .55); border-radius: 10px;
  box-shadow: 0 4px 0 rgb(var(--shade-rgb) / .35);
  transition: transform .1s ease, box-shadow .1s ease, background-color .1s;
}
.btn:hover { background: var(--cream-hi); color: var(--ink); }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 transparent; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: 0 4px 0 rgb(var(--shade-rgb) / .2); }
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.btn-primary { background: var(--terra); border-color: var(--terra); color: var(--btn-on); box-shadow: 0 4px 0 var(--terra-edge); }
.btn-primary:hover { background: var(--terra-hover); border-color: var(--terra-hover); color: var(--btn-on); }
.btn-primary:active { box-shadow: 0 0 0 transparent; }
.btn-primary:disabled, .btn-primary[aria-disabled="true"] { box-shadow: 0 4px 0 var(--terra-edge); }
/* belt and braces: the old dark-mode label flip must never apply */
:root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .btn-primary:hover,
:root:not([data-theme="light"]) .btn-primary, :root:not([data-theme="light"]) .btn-primary:hover { color: var(--btn-on); }

.btn-outline { background: var(--cream-2); border-color: var(--terra); color: var(--terra-deep); box-shadow: 0 4px 0 rgb(var(--terra-rgb) / .4); }
.btn-outline:hover { background: var(--cream-hi); border-color: var(--terra-deep); color: var(--terra-deep); }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 2px solid transparent; border-radius: 10px; box-shadow: none; min-height: 44px; padding: 0 14px;
  color: var(--ink-dim) !important; font: 700 .9375rem/1.2 var(--font-ui); text-decoration: none; cursor: pointer;
}
.btn-ghost:hover { background: rgb(var(--ink-rgb) / .08); color: var(--ink) !important; }
.btn-ghost:active { transform: none; }

.btn-danger {
  background: var(--flag) !important; border-color: var(--flag) !important; color: var(--on-flag) !important;
  box-shadow: 0 4px 0 var(--flag-edge);
}
.btn-danger:hover { background: var(--flag-hover) !important; border-color: var(--flag-hover) !important; color: var(--on-flag) !important; }
.btn-danger:active { box-shadow: 0 0 0 transparent; }
:root[data-theme="dark"] .btn-danger, :root:not([data-theme="light"]) .btn-danger,
:root[data-theme="dark"] .btn-danger:hover, :root:not([data-theme="light"]) .btn-danger:hover { color: var(--on-flag) !important; }

.btn-sm { min-height: 40px; padding: 0 16px; font-size: .9375rem; }
.btn-lg { min-height: 54px; padding: 0 30px; font-size: 1.0625rem; }
.btn-block { display: flex; width: 100%; }
.btn-oauth { font: 700 1rem/1.1 var(--font-ui); min-height: 46px; border-radius: 10px !important; background: var(--cream-2) !important; border: 2px solid rgb(var(--ink-rgb) / .55) !important; color: var(--ink) !important; box-shadow: 0 4px 0 rgb(var(--shade-rgb) / .3); }
.btn-oauth:hover { background: var(--cream-hi) !important; }

.link-btn { font: 700 .9375rem/1.3 var(--font-ui); color: var(--pen); text-decoration-color: color-mix(in srgb, var(--pen) 50%, transparent); }
.link-btn:hover { color: var(--pen-deep); }
.link-btn.hw-danger, .link-btn.pm-danger, .link-btn.saddr-danger, .link-btn.pk-danger,
.link-btn.sub-danger, .link-btn.adm-danger { color: var(--flag) !important; }

/* ================================================================== 6. SURFACES
   .card  is THE cream surface: 14px, flat 8px shadow, dashed inner outline.
   The same look is applied to the panels the original pages already use.
   .plate is a smaller, quieter strip for loose headings/controls that would otherwise sit on the scene. */
/* colour hooks, so a variant never needs !important:  --card-bg  --card-fg  --card-outline  --card-shadow */
.card, .wizard-panel, .auth-card, .pricing-card, .modal, .hw-shell, .hw-pad, .send-result, .sig-shell, .font-dialog, .postmark-dialog {
  background: var(--card-bg, var(--cream)) !important; color: var(--card-fg, var(--ink));
  border: 0 !important; border-radius: var(--panel-radius) !important;
  box-shadow: var(--card-shadow, var(--panel-shadow)) !important;
  outline: 2px dashed var(--card-outline, var(--panel-edge)); outline-offset: -11px;
}
/* dialogs have their own head/foot dividers; the dashed edge would cut across them */
.font-dialog, .postmark-dialog, .hw-shell, .hw-pad, .sig-shell { outline: 0; }
.card, .auth-card, .pricing-card { padding: clamp(24px, 3vw, 38px); }
.wizard-panel { padding-block: clamp(26px, 3.4vw, 40px); }
.card h2, .card h3 { color: var(--card-fg, var(--ink)); }
.card h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.12; margin: 0 0 .5rem; }
.card > p.card-sub, .card-sub { font: 500 var(--step--1)/1.45 var(--font-ui); color: var(--ink-dim); }
.card-eyebrow { font: 700 .75rem/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.card.is-danger { outline-color: color-mix(in srgb, var(--flag) 50%, transparent); }
.card.is-danger h2, .card.is-danger .card-eyebrow { color: var(--flag) !important; }

/* a card inside a card: no second outline or big shadow */
.card .card, .wizard-panel .card, .auth-card .card, .modal .card {
  background: var(--cream-2) !important; outline: 0; box-shadow: 3px 3px 0 var(--edge) !important;
  border: 1.5px solid rgb(var(--ink-rgb) / .2) !important; border-radius: 10px !important;
}

/* a card with no hard shadow or dashed edge (use sparingly) */
.card--flat { --card-shadow: none; --card-outline: transparent; }

/* plates: loose headings and control strips get a paper backing so nothing floats on the scene */
.plate, .wizard-intro, .page-hero, .app-head, .step-rail, .wizard-controls, .section-head, .app-nav, .adm-filter, .hw-view-head, .ord-view-head, .contact-info {
  background: var(--cream); border-radius: 12px; box-shadow: 5px 5px 0 var(--edge);
}
.plate { padding: clamp(16px, 2.2vw, 26px) clamp(20px, 2.6vw, 34px); }
.plate > * + * { margin-top: .6rem; }
.wizard-intro, .app-head, .section-head, .hw-view-head, .ord-view-head, .contact-info { padding: clamp(16px, 2.2vw, 26px) clamp(20px, 2.6vw, 34px); }
.page-hero { padding: clamp(24px, 3.4vw, 44px); }
.section-head { max-width: none; }
.step-rail { padding: 14px 16px; }
.wizard-controls { padding: 14px 18px; }
.app-nav { padding: 8px; border: 0; }
.adm-filter { padding: 8px; }
.wizard-intro h1, .page-hero h1, .app-head h1 { margin-bottom: .3rem; }
.wizard-intro p, .page-hero p, .app-head p, .section-head p { color: var(--ink-dim); }
/* …but inside a card these revert to plain blocks */
.card .plate, .card .section-head, .card .hw-view-head, .card .ord-view-head, .card .app-head,
.wizard-panel .plate, .wizard-panel .wizard-controls, .modal .plate { background: none; box-shadow: none; padding-inline: 0; }

/* ================================================================== 7. TAGS, BADGES, FACTS */
.badge, .kicker, .tag, .hw-profile-badge, .pm-badge, .ord-status, .sub-gift-status {
  font: 700 .75rem/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
  border-radius: 6px; padding: 6px 10px 5px; color: var(--pen-deep);
  background: var(--cream-2); box-shadow: 2px 2px 0 var(--edge);
}
.tag-accent, .badge { background: rgb(var(--terra-rgb) / .14); color: var(--terra-deep); }
.tag-accent-2 { background: rgb(107 124 82 / .22); color: var(--accent-2-deep); }
.tag-neutral { background: var(--cream-2); color: var(--ink-dim); }
.tag-outline { background: none; box-shadow: none; border: 1.5px solid var(--terra); color: var(--terra-deep); }
/* order status colours */
.ord-status-mailed, .ord-status-stamped { background: var(--ok-wash); color: var(--ok-text); }
.ord-status-paid, .ord-status-ready_to_print, .ord-status-printing, .ord-status-plotting { background: rgb(var(--terra-rgb) / .14); color: var(--terra-deep); }
.ord-status-canceled { background: rgb(var(--ink-rgb) / .1); color: var(--ink-dim); }
.sub-gift-claimed { color: var(--ok-text); }
.sub-gift-revoked { color: var(--ink-dim); }

.readout { font: 500 var(--step--1)/1.4 var(--font-ui); color: var(--ink-dim); }
.readout b { color: var(--ink); }
.readout .sep { color: var(--ink-faint); }

/* "facts": little tag-stitched labels */
.facts { list-style: none; margin: 2.2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 14px; }
.facts li { position: relative; padding: 10px 16px 9px 30px; background: var(--cream); border-radius: 6px; font: 700 .9375rem/1 var(--font-ui); box-shadow: 3px 3px 0 var(--edge); }
.facts li::before { content: ""; position: absolute; left: 11px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: rgb(var(--ink-rgb) / .35); box-shadow: inset 0 1px 1px rgb(0 0 0 / .3); }
.facts li:nth-child(1) { transform: rotate(-1.6deg); }
.facts li:nth-child(2) { transform: rotate(1.2deg); }
.facts li:nth-child(3) { transform: rotate(-.8deg); }

/* tick bullets (sage disc with a cream tick) */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.checks li { position: relative; padding-left: 34px; font-size: 1.125rem; }
.checks li::before { content: ""; position: absolute; left: 0; top: .2em; width: 22px; height: 22px; border-radius: 50%; background: var(--sage); }
.checks li::after { content: ""; position: absolute; left: 6px; top: calc(.2em + 6px); width: 10px; height: 5px; border-left: 2.5px solid var(--on-sage); border-bottom: 2.5px solid var(--on-sage); transform: rotate(-48deg); }

/* ================================================================== 8. FORMS */
label { font-family: var(--font-ui); }
.field label, .pay-field label, .sub-field label, .sub-field-label, .mini-label, .pay-field-label {
  font: 700 .875rem/1.3 var(--font-ui); color: var(--ink);
}
.mini-opt { font: 500 .8125rem var(--font-ui); color: var(--ink-faint); }
.hint, .field .hint, .sub-hint { font: 500 var(--step--1)/1.4 var(--font-ui); color: var(--ink-dim); }
.field-error { font: 700 .8125rem/1.3 var(--font-ui) !important; letter-spacing: 0 !important; color: var(--flag); }

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]),
textarea, select,
body :where(input, textarea, select):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
.field input, .pay-field input, .sub-field input, .address-grid input, .pm-search {
  background: var(--cream-2) !important; color: var(--ink) !important;
  font: 500 1rem/1.3 var(--font-ui);
  min-height: 46px; padding: 10px 14px;
  border: 2px solid rgb(var(--ink-rgb) / .45) !important; border-radius: 10px !important;
  box-shadow: inset 0 2px 0 rgb(var(--shade-rgb) / .06);
  width: 100%;
}
textarea { min-height: 7rem; line-height: 1.45; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--ink-faint) !important; opacity: 1; font-weight: 500; }
input:focus, textarea:focus, select:focus,
input:focus-visible, textarea:focus-visible, select:focus-visible,
body :where(input, textarea, select):focus-visible {
  outline: 3px solid var(--focus) !important; outline-offset: 2px !important;
  border-color: var(--terra) !important;
}
input:disabled, textarea:disabled, select:disabled { opacity: .55; background: var(--paper-sunken) !important; cursor: not-allowed; }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"], .pay-field input.is-bad {
  border-color: var(--flag) !important; background: color-mix(in srgb, var(--flag) 5%, var(--cream-2)) !important;
}
select {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 2.6rem;
  background-image: var(--chevron);
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
}
select[multiple] { background-image: none; padding-right: 14px; }
input[type="file"] { font: 500 .9375rem var(--font-ui); color: var(--ink); width: 100%; }
input[type="file"]::file-selector-button {
  font: 700 .875rem var(--font-ui); color: var(--ink); background: var(--cream-2); cursor: pointer;
  border: 2px solid rgb(var(--ink-rgb) / .55); border-radius: 8px; padding: 8px 14px; margin-right: 12px; box-shadow: 0 3px 0 rgb(var(--shade-rgb) / .3);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--terra); width: 1.2rem; height: 1.2rem; flex: none; }
input[type="range"] { accent-color: var(--terra); width: 100%; background: none !important; border: 0 !important; min-height: 0; padding: 0; box-shadow: none; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; background: var(--paper-sunken); border: 1.5px solid rgb(var(--ink-rgb) / .45); border-radius: 6px; }
input[type="range"]::-moz-range-track { height: 6px; background: var(--paper-sunken); border: 1.5px solid rgb(var(--ink-rgb) / .45); border-radius: 6px; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: var(--terra); border: 3px solid var(--cream-2); box-shadow: 0 2px 0 rgb(var(--shade-rgb) / .5); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--terra); border: 3px solid var(--cream-2); box-shadow: 0 2px 0 rgb(var(--shade-rgb) / .5); }
input[type="range"]:focus-visible { outline: 3px solid var(--focus) !important; }
input[type="color"] { width: 3rem; height: 2.6rem; padding: 2px; border: 2px solid rgb(var(--ink-rgb) / .45); border-radius: 8px; background: var(--cream-2); }
fieldset { border: 2px dashed rgb(var(--ink-rgb) / .25); border-radius: 10px; padding: 14px 16px; }
legend { font: 700 .875rem var(--font-ui); padding: 0 6px; }
progress { accent-color: var(--terra); }
.oauth-sep, .oauth-row .oauth-sep span { font: 700 .75rem var(--font-ui) !important; color: var(--ink-faint); }

/* ================================================================== 9. MESSAGES (alerts, toasts, notes)
   Colour comes from the tokens; this is just the shape. */
.form-msg, .warning, .wizard-error, .again-status, .pay-err, .guest-note, .pay-mock-note, .legal-note, .co-fine {
  font: 500 var(--step--1)/1.45 var(--font-ui); border-radius: 6px; padding: 10px 14px;
}
.form-msg { border: 2px solid rgb(var(--ink-rgb) / .3); background: var(--cream-2); color: var(--ink); box-shadow: 3px 3px 0 var(--edge); }
.form-msg.is-error { border-width: 2px; background: color-mix(in srgb, var(--flag) 10%, var(--cream-2)); }
.form-msg.is-ok { color: var(--ok-text); background: color-mix(in srgb, var(--ok) 12%, var(--cream-2)); border: 2px solid color-mix(in srgb, var(--ok) 55%, transparent); }
.form-msg.is-info { color: var(--ink); background: color-mix(in srgb, var(--note-tint) 28%, var(--cream-2)); border: 2px solid var(--note-edge); }
.warning, .guest-note, .pay-mock-note { background: color-mix(in srgb, var(--note-tint) 28%, var(--cream-2)); border: 2px solid var(--note-edge); color: var(--ink); }
.wizard-error, .pay-err, .again-status.is-error { color: var(--flag); background: var(--flag-wash); border: 2px solid color-mix(in srgb, var(--flag) 45%, transparent); }
.wizard-error:empty, .pay-err:empty { display: none; }
.legal-note { background: color-mix(in srgb, var(--note-tint) 28%, var(--cream-2)); border: 2px solid var(--note-edge); }
.note-fit { font: 700 .8125rem/1.3 var(--font-ui); color: var(--ink-dim); }
.note-fit.is-over, .note-fit.is-tight { color: var(--flag) !important; }
/* toast-like floating messages, if a script adds them */
.toast, [role="status"].toast { background: var(--ink); color: var(--on-ink); border-radius: 10px; box-shadow: 5px 5px 0 rgb(0 0 0 / .3); font: 700 .9375rem var(--font-ui); padding: 12px 18px; }

/* ================================================================== 10. DIALOGS + OVERLAYS
   The world dims and softens behind a dialog, like the card in focus on the home page. */
.modal-scrim, .hw-capture-overlay, .hw-pad-overlay {
  background: var(--scrim) !important;
}
dialog::backdrop, .font-dialog::backdrop, .postmark-dialog::backdrop { background: var(--scrim) !important; }
.modal { max-width: 27rem; padding: clamp(22px, 3vw, 30px); }
.modal h3 { font-size: 1.5rem; }
.modal p { color: var(--ink-dim); font-size: var(--step-0); }
.modal-actions { gap: 12px; }
dialog { color: var(--ink); }
.font-dialog-head, .pm-head { border-bottom: 2px dotted rgb(var(--ink-rgb) / .28); }
.font-dialog-title, .pm-title { font: 400 1.5rem/1.1 var(--font-heading); }
.font-dialog-close, .pm-close { border: 2px solid rgb(var(--ink-rgb) / .5); border-radius: 8px; background: var(--cream-2); color: var(--ink); box-shadow: 0 3px 0 rgb(var(--shade-rgb) / .3); }
.hw-shell { color: var(--ink); }
.hw-head { border-bottom: 2px dotted rgb(var(--ink-rgb) / .28); }
.hw-head h2, .hw-pad h3 { font-family: var(--font-heading); color: var(--ink); }
.hw-sub, .hw-shell .hint, .hw-pad .hint { font-family: var(--font-ui); color: var(--ink-dim); }
.hw-x { border: 2px solid rgb(var(--ink-rgb) / .5); border-radius: 8px; background: var(--cream-2); color: var(--ink); }
.hw-foot { border-top: 2px dotted rgb(var(--ink-rgb) / .28); }
.creation-overlay, .send-overlay { background: var(--cream) !important; }

/* ================================================================== 11. TABS, STEPPERS, CHIPS */
.app-nav button, .app-nav-admin {
  font: 700 .9375rem/1.2 var(--font-ui); color: var(--ink); border: 0; border-left: 0; border-radius: 8px;
  padding: 10px 14px; background: none;
}
.app-nav button:hover { background: rgb(var(--ink-rgb) / .08); color: var(--ink); }
.app-nav button.is-active {
  background: var(--terra); color: var(--btn-on); border-left-color: transparent; box-shadow: 0 3px 0 var(--terra-edge);
}
.app-nav-admin { color: var(--terra-deep); border-top: 2px dotted rgb(var(--ink-rgb) / .25); border-radius: 0; margin-top: 6px; }
.adm-filter button, .pe-chip, .stamp-chip span, .saved-addr-chip, .co-side-tab, .hw-photo-ctrls button {
  font-family: var(--font-ui); font-weight: 700; border-radius: 8px;
}
.adm-filter button { border: 2px solid rgb(var(--ink-rgb) / .4); background: var(--cream-2); color: var(--ink); padding: 8px 14px; box-shadow: 0 3px 0 rgb(var(--shade-rgb) / .22); }
.adm-filter button:hover { background: var(--cream-hi); }
.adm-filter button.is-active { background: var(--terra); color: var(--btn-on); border-color: var(--terra); box-shadow: 0 3px 0 var(--terra-edge); }

/* wizard step rail */
.step-rail { gap: 8px; }
.step-rail-item { border: 0 !important; border-radius: 10px; font-family: var(--font-ui); }
.step-rail-item.is-current { background: var(--paper-sunken); }
.step-rail-item.is-done:hover { background: var(--pen-wash); }
.step-rail-dot {
  border-radius: 50% !important; font: 700 .875rem var(--font-ui); background: var(--cream-2); color: var(--ink);
  border: 2px solid rgb(var(--ink-rgb) / .5) !important;
}
.step-rail-text strong { font: 700 .9375rem/1.2 var(--font-ui); color: var(--ink); }
.step-rail-text small { font: 500 .8125rem/1.2 var(--font-ui); color: var(--ink-dim); }
.step-rail-item.is-current .step-rail-dot, .step-rail-item.is-current > .step-rail-dot {
  background: var(--terra) !important; border-color: var(--terra) !important; color: var(--btn-on) !important;
}
.step-rail-item.is-done .step-rail-dot { background: var(--cream-2) !important; color: var(--terra) !important; border-color: var(--terra) !important; }
.step-panel-title { font-family: var(--font-heading); color: var(--ink); }
.step-panel-hint { font: 500 var(--step--1)/1.45 var(--font-ui); color: var(--ink-dim); }

/* two-way switch on checkout (Message | Photo) */
.co-side-toggle { border: 2px solid rgb(var(--ink-rgb) / .5); border-radius: 10px; background: var(--cream-2); overflow: hidden; box-shadow: 0 3px 0 rgb(var(--shade-rgb) / .3); }
.co-side-tab { font: 700 .875rem/1 var(--font-ui); color: var(--ink); background: none; border: 0; border-radius: 0; box-shadow: none; padding: 10px 16px; }
.co-side-tab.is-active, .co-side-tab[aria-selected="true"] { background: var(--terra); color: var(--btn-on); }

/* selectable tiles */
.font-option, .hw-cell, .saved-addr-chip, .saved-card, .co-summary, .cart-strip, .stamp-look, .pm-card, .hw-profile, .ord-card, .saddr-card, .sub-card, .adm-card, .passkey-item, .cart-thumb {
  background: var(--cream-2) !important; color: var(--ink);
  border: 2px solid rgb(var(--ink-rgb) / .3) !important; border-radius: 10px !important; box-shadow: 3px 3px 0 var(--edge) !important;
}
.hw-profile, .ord-card, .saddr-card, .sub-card, .adm-card, .pm-card { border-radius: 12px !important; }
.font-option.is-selected, .hw-cell.is-selected, .saved-addr-chip.is-selected, .saved-card.is-selected, .pm-card.is-default, .hw-profile.is-default {
  border-color: var(--terra) !important; box-shadow: 3px 3px 0 rgb(var(--terra-rgb) / .35) !important;
}
.stamp-chip span, .pm-item span, .pe-chip { background: var(--cream-2); color: var(--ink); border: 2px solid rgb(var(--ink-rgb) / .35); border-radius: 8px; box-shadow: 0 3px 0 rgb(var(--shade-rgb) / .2); }
.stamp-chip input:checked + span, .pm-item input:checked + span { background: var(--terra); color: var(--btn-on); border-color: var(--terra); }

/* ================================================================== 12. TABLES, DETAILS, LISTS */
table { border-collapse: collapse; width: 100%; font: 500 var(--step--1)/1.4 var(--font-ui); color: var(--ink); }
th { text-align: left; font: 700 .75rem/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); background: var(--bed); padding: 10px 12px; }
td { padding: 10px 12px; border-bottom: 2px dotted rgb(var(--ink-rgb) / .25); vertical-align: top; }
tbody tr:hover td { background: rgb(var(--cream-2-rgb) / .7); }
caption { text-align: left; font: 700 .875rem var(--font-ui); padding-bottom: 8px; color: var(--ink-dim); }

details > summary { cursor: pointer; }
/* a FAQ list on its own page sits on a cream sheet; inside a .card it is just the dotted list */
.faq-list { background: var(--cream); border-radius: var(--panel-radius); box-shadow: var(--panel-shadow); padding: 6px clamp(20px, 3vw, 38px); }
.card .faq-list { background: none; box-shadow: none; padding: 0; border-radius: 0; border-top: 2px dotted rgb(var(--ink-rgb) / .3); }
.faq-item, .q { background: none; border: 0; border-bottom: 2px dotted rgb(var(--ink-rgb) / .3); border-radius: 0; box-shadow: none; padding: 0; }
.faq-item > summary, .q > summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 62px; padding: 12px 0;
  font: 400 clamp(1.15rem, 1.7vw, 1.35rem)/1.25 var(--font-heading); color: var(--ink);
}
.faq-item > summary::-webkit-details-marker, .q > summary::-webkit-details-marker { display: none; }
.faq-item .faq-icon { flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--terra); color: var(--btn-on); transition: transform .2s; }
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-item > p, .q > p { padding: 0 0 20px; color: var(--ink-dim); max-width: 38em; font-size: var(--step-1); }
.faq-item:hover { transform: none; }

.hw-review summary, .pe-more > summary, .front-stamp > summary, .adm-log summary { font-family: var(--font-ui); font-weight: 700; color: var(--ink); }
hr:not([class]) { border-top: 2px dotted rgb(var(--ink-rgb) / .28); }
.travel-move { border-top: 2px dotted rgb(var(--ink-rgb) / .28); }

/* ================================================================== 13. ODDS AND ENDS (account, wizard, order, capture) */
.auth-brand { font-family: var(--font-heading); font-weight: 400; font-size: 1.5rem; color: var(--ink) !important; gap: 10px; text-decoration: none; }
.auth-brand svg, .auth-brand img { width: 46px; height: 36px; transform: none; }
.auth-card h1 { font-size: 1.9rem; }
.auth-card > p.sub { font: 500 var(--step--1)/1.45 var(--font-ui); color: var(--ink-dim); }
.auth-card::before, .auth-card::after { display: none !important; }
.auth-alt { border-top: 2px dotted rgb(var(--ink-rgb) / .28); font-family: var(--font-ui); }
.auth-alt button { color: var(--pen); font-weight: 700; }
.auth-alt button:hover { color: var(--pen-deep); }
.app-head p { font: 500 var(--step--1)/1.4 var(--font-ui); }
.kv { font-family: var(--font-ui); }
.mfa-qr { background: #fff; border: 2px solid rgb(var(--ink-rgb) / .3); border-radius: 10px; }
.mfa-secret { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.ord-price, .sub-price, .plan-price { font-family: var(--font-heading); color: var(--terra); }

.dropzone, #photo-drop { border: 2px dashed rgb(var(--ink-rgb) / .45) !important; border-radius: 12px !important; background: var(--cream-2) !important; }
.dropzone:hover, .dropzone:focus-visible { border-color: var(--terra) !important; background: var(--cream-hi) !important; }
.photo-editor-stage, #photo-editor-stage { background: var(--paper-sunken) !important; border-radius: 10px; border: 2px solid rgb(var(--ink-rgb) / .3); }
.hw-strip, .hw-done-sample, .custom-font-preview, .sig-preview, .note-preview, #note-preview { border-radius: 10px; border-color: rgb(var(--ink-rgb) / .3); }
#note-preview svg path, .note-preview svg path { stroke: var(--card-ink) !important; }
.hw-progress-track { background: var(--paper-sunken); border: 2px solid rgb(var(--ink-rgb) / .35); border-radius: 6px; }
.hw-progress-fill { background: var(--terra); }
.postcard-face { background: var(--card-paper-2) !important; border: 2px solid rgb(var(--ink-rgb) / .35) !important; border-radius: 6px !important; }
.co-sum-title, .co-sum-body, .co-sum-sub { font-family: var(--font-ui); }
.saved-cards .cc-brand, .cc-brand, .pm-brand { font-family: var(--font-ui); font-weight: 700; }
.stripe-payment-element { border-radius: 10px; }

/* ================================================================== 14. INFO PAGES */
.page-hero h1 { font-size: var(--step-4); }
.page-hero > p { font-size: var(--step-1); }
.pricing-grid { gap: 28px; }
.pricing-card { display: grid; gap: 20px; }
@media (min-width: 680px) { .pricing-card { grid-template-columns: 1fr 1fr; align-items: center; } }
.pricing-price { font: 400 clamp(3rem, 6vw, 5rem)/1 var(--font-heading); color: var(--terra); letter-spacing: -.02em; }
.pricing-price small { font: 500 1.15rem var(--font-body); color: var(--ink-dim); letter-spacing: 0; }
.pricing-desc { font: 700 .8125rem/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.pricing-features { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.pricing-features li { position: relative; padding-left: 34px; font-size: 1.125rem; color: var(--ink); }
.pricing-features li::before { left: 0; top: .2em; width: 22px; height: 22px; border-radius: 50%; background: var(--sage); box-shadow: none; }
.pricing-features li::after { left: 6px; top: calc(.2em + 6px); width: 10px; height: 5px; border-left: 2.5px solid var(--on-sage); border-bottom: 2.5px solid var(--on-sage); transform: rotate(-48deg); }
.legal { margin-inline: auto; background: var(--cream); border-radius: var(--panel-radius); box-shadow: var(--panel-shadow); padding: clamp(24px, 3.4vw, 44px); }
.legal h2 { font-size: var(--step-2); }
.legal p, .legal li { font-size: var(--step-0); }
.contact-info h1 { font-size: var(--step-4); }
.contact-form .field textarea { min-height: 9rem; }

/* ================================================================== 15. MOTION + SMALL SCREENS */
@media (prefers-reduced-motion: reduce) {
  .btn, .faq-item .faq-icon, .q > summary::after { transition: none; }
}
@media (max-width: 459px) {
  .btn { padding-inline: 18px; }
  .site-header-actions .btn-primary { padding-inline: 14px; }
}
/* small phones: keep the name next to the bird (base.css hides it under 420px) */
@media (max-width: 639px) {
  .site-header-inner { gap: 10px; }
  .site-header-actions { gap: 8px; margin-left: auto; }
  .nav-toggle { margin-left: 0; }
}
@media (max-width: 420px) {
  .wordmark-text { display: inline; }
  .wordmark { font-size: 1.15rem; gap: 8px; }
  .wordmark-mark { width: 38px; height: 30px; }
  .site-header-actions .btn-primary { padding-inline: 12px; }
}
@media (max-width: 339px) { .site-header .wordmark-text { display: none; } }

/* ---- small + short windows (round 3) ---- */
/* the header's height, so the first screen of a page can be sized from it */
:root { --hdr-h: 66px; }
.site-header-inner { min-height: var(--hdr-h); }
.wordmark { min-width: 44px; }
/* notches: the strip and the footer keep their words out of the cut-outs (viewport-fit=cover on every page) */
.site-header-inner, .site-footer-inner { padding-left: max(clamp(16px, 3vw, 32px), env(safe-area-inset-left, 0px)); padding-right: max(clamp(16px, 3vw, 32px), env(safe-area-inset-right, 0px)); }
.site-footer { padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px)); }
main { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.creation-overlay { padding: max(2rem, env(safe-area-inset-top, 0px)) max(1.25rem, env(safe-area-inset-right, 0px)) max(2rem, env(safe-area-inset-bottom, 0px)) max(1.25rem, env(safe-area-inset-left, 0px)); }
@media (max-width: 760px), (max-height: 480px) { :root { --step--1: 1rem; } }
@media (max-width: 899px) { .site-nav a { font-size: 1rem; } }
@media (max-width: 899px) { .site-nav { max-height: calc(100svh - var(--hdr-h)); overflow-y: auto; overscroll-behavior: contain; } }   /* a short window: the menu scrolls instead of running off the bottom */
.hw-cta .btn { max-width: 100%; }
@media (max-width: 420px) { .hw-cta .btn { padding-inline: 14px; white-space: normal; } }   /* small print is 16px on a phone */
.site-footer-nav { gap: 0 4px; }
.site-footer-nav a { font-size: 1rem; padding-inline: 9px; }   /* even gaps between words; the padding is what makes every link 44px wide at least (FAQ is the short one) */
.btn-sm { min-height: 44px; }
.legal-toc a { padding: 11px 10px; }
.link-btn { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; }
p .link-btn, .guest-note .link-btn, .co-fine .link-btn { min-height: 0; min-width: 0; display: inline; }   /* a link inside a sentence stays in the sentence */
input[type="range"] { min-height: 44px; }
.adm-filter button { min-height: 44px; }
@media (max-width: 760px), (max-height: 480px) {
  body .hint, body .stamp-when-note, body .stamp-when-note[hidden], body .co-fine, body .co-building, body .wizard-panel .hint { font-size: 1rem; }
  .facts li { font-size: 1rem; }
}
@media (max-width: 420px) {
  .site-header-inner { gap: 6px; padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
  .site-header-actions { gap: 6px; }
  .wordmark { font-size: 1.05rem; gap: 6px; }
  .wordmark-mark { width: 34px; height: 27px; }
  .site-header-actions .btn-primary { padding-inline: 10px; }
}
@media (max-width: 379px) { .site-header-inner { gap: 4px; } .site-header-actions { gap: 4px; } .wordmark { font-size: .95rem; gap: 4px; min-width: 44px; justify-content: center; } .wordmark-mark { width: 30px; height: 24px; } .site-header-actions .btn-primary { padding-inline: 8px; font-size: .9375rem; } }
@media (max-width: 339px) { .site-header .wordmark-text { display: none; } }
/* signed in, the button says "Send a postcard", which is longer: the name gives way where the row would not fit */
@media (max-width: 364px), (min-width: 421px) and (max-width: 449px) { html.is-signed-in .site-header .wordmark-text { display: none; } }
/* a short window (a phone on its side): a compact strip that scrolls away with the page instead of riding on top of it */
@media (max-height: 480px) {
  :root { --hdr-h: 54px; }
  .site-header { position: relative; }
  .wordmark-mark { width: 38px; height: 30px; }
}