/* ---------- Type, served from our own domain -----------------------------
 *
 * These two faces used to come from fonts.googleapis.com, which meant every
 * visitor's browser told Google it was here before it had read a word. The
 * privacy page lists Cloudflare, Resend and Stripe as the only third parties
 * involved in a visit, and that sentence is the product's whole argument, so
 * it had better be true on the page that makes it.
 *
 * Both faces are open licence (SIL Open Font Licence 1.1; the licences ship
 * beside the files in assets/fonts/). Only the weights and styles the
 * stylesheet actually asks for are here -- 400 and 500, plus one italic for
 * the About page -- in two subsets: `latin` covers English and, because it
 * runs to U+00FF, all of Spanish including a-acute and n-tilde and the
 * inverted marks; `latin-ext` is loaded only if a page ever needs a character
 * beyond it. A browser downloads a subset when it first meets a character in
 * that range and never otherwise.
 *
 * font-display: swap, so text is readable in the fallback face while the real
 * one arrives. On a tag page that is the difference between a finder reading
 * a phone number immediately and staring at nothing on a bad connection.
 * ------------------------------------------------------------------------ */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/newsreader-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/newsreader-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/newsreader-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/newsreader-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/newsreader-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/newsreader-latin-ext-400-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/hanken-grotesk-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/hanken-grotesk-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/hanken-grotesk-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/hanken-grotesk-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ============================================================
   Might As Well Co.

   THE IDEA IN ONE LINE: the tag is loud so the brand doesn't
   have to be.

   The site is achromatic. Every surface is a cool green-grey
   neutral and every piece of text is near-black. Exactly one
   saturated colour exists in the whole system — a hard teal —
   and it is spent only on the tag object itself. Never on a
   button, never on a link, never on a hover state. The moment
   the teal becomes interface it stops reading as the tag and
   starts reading as decoration, and the product loses the
   thing that makes it work.

   WHY TEAL AND NOT SAFETY ORANGE (decided 2026-08-29): safety
   orange is the mountain-rescue convention, and on a mountain
   it is right. These tags do not live on a mountain. They live
   on a playground, a gym floor, a bus seat, a pile of autumn
   leaves, wood chips, mulch — grounds that are already orange
   and brown. Orange camouflages exactly where the item gets
   dropped, and kids' packs are already saturated with orange
   and red, so the tag disappears into the object it is on.
   Teal has no analogue in that environment: nothing outdoors
   and almost nothing on a backpack is this colour, so it is
   the thing your eye catches. It also measures better — see
   the contrast note on .tag__band below.

   That restraint is still the brand. Arc'teryx, Mammut and
   Ortovox all run achromatic identities and put the loud
   colour on the gear; the loud colour is a property of the
   object, not of the company.

   THE PRINTED TAG MUST MATCH. This hex is the promise the site
   makes about the physical object. If the filament that comes
   off the AMS is a duller or bluer teal, change this value to
   the filament — not the other way round.

   Deliberately NOT: navy (reads scholastic, reads school
   district), and not the warm-cream-and-terracotta palette
   that became the tell of an AI-built brand site around 2025.

     paper     #F4F4F1  page ground, cool and faintly green
     surface   #E8E8E3  cards and alternating bands
     hairline  #D2D3CC  1px rules and input borders
     muted     #6E7069  secondary text — 4.55:1, 15px and up
     ink       #1E201C  all primary text — 14.9:1 on paper
     signal    #00BFAE  the tag. Almost nothing else.

   TYPE: hierarchy comes from SIZE, never from weight. Nothing
   in this file is heavier than 500. A big gap between the
   headline and the body with almost nothing in between is
   what restraint looks like; bold weights are what trying too
   hard looks like.

   The finder page deliberately loads NO web fonts — it renders
   on a stranger's phone on one bar of signal — so every stack
   below falls back to a system face that holds the layout.
   ============================================================ */

:root {
  --paper: #f4f4f1;
  --surface: #e8e8e3;
  --hairline: #d2d3cc;
  --muted: #6e7069;
  --ink: #1e201c;
  --signal: #00bfae;

  --display: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --tap: 56px; /* minimum touch target. A stranger, one-handed, outdoors. */
  --measure: 34rem; /* reading width */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--ink);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--hairline);
}

a:hover {
  text-decoration-color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

img {
  max-width: 100%;
}

/* ---------- The tag object -----------------------------------
   The signature element, and the only place colour lives.
   It renders the face a stranger is holding, so the first beat
   of any page is recognition rather than reading.

   Pure CSS on purpose: the finder page loads no web fonts and
   no images.
   ------------------------------------------------------------ */

.tag {
  width: 190px;
  border: 1px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  padding: 12px 12px 14px;
  position: relative;
  box-shadow: 0 1px 0 var(--hairline);
}

.tag__punch {
  width: 34px;
  height: 7px;
  margin: 2px auto 14px;
  border: 1px solid var(--ink);
  border-radius: 99px;
  background: var(--surface);
}

.tag__face {
  text-align: center;
}

.tag__wordmark {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

/* The one loud thing in the entire system. All-caps appears
   nowhere else at size, so the register shift itself reads as
   "this is the functional part" rather than as shouting.
   2026-09-03: the band went from teal to ink because the printed
   tags do not ship with a teal band (a third filament color costs
   swaps and time), and the site shows the product truthfully.
   Teal stays the brand color everywhere digital. Paper text on
   this ink measures about 13:1. */
.tag__band {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 7px 4px;
  margin: 0 -12px;
  line-height: 1.25;
}

.tag__id {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.16em;
  color: var(--ink);
  margin-top: 12px;
}

/* ---------- Finder and owner pages ---------------------------
   One column, one primary action, thumb-sized. Everything here
   is read by somebody standing up.
   ------------------------------------------------------------ */

.finder {
  max-width: 30rem;
  margin: 0 auto;
  padding: 40px 22px 72px;
}

.finder__tag {
  display: flex;
  justify-content: center;
  margin-bottom: 34px;
}

.finder h1 {
  font-family: var(--display);
  font-size: clamp(2.1rem, 8vw, 2.9rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 0 14px;
}

.finder__label {
  margin: -6px 0 18px;
  color: var(--muted);
  font-size: 15px;
}

/* "Not a tracker", on the homepage hero. Quiet but present: it is a correction,
   not a headline, and it has to land before the reader files us under AirTag. */
.hero__not {
  margin: 14px 0 0;
  padding-left: 12px;
  border-left: 3px solid var(--signal);
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

/* The demo QR. HIDDEN ON PHONES ON PURPOSE: a phone cannot scan its own
   screen, and that visitor already has the tappable button right above. It is
   for the laptop reader, where a link cannot reproduce the product -- the scan
   IS the product, so we hand them a way to do the real thing. */
.demoqr { display: none; }

@media (min-width: 760px) {
  .demoqr {
    display: flex;
    gap: 18px;
    align-items: center;
    margin: 26px 0 0;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    max-width: 520px;
  }
  .demoqr img { flex: 0 0 auto; border-radius: 4px; background: #fff; }
  .demoqr__h { margin: 0 0 4px; font-weight: 600; }
  .demoqr__body { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.45; }
}

/* The homepage hero's right column (2026-09-07). Same card, stood upright:
   the code big enough to scan from across a desk, the two lines under it.
   Between 760 and 860px the hero is still one column, so the card keeps
   its small row shape below the buttons; only on a wide screen does it
   move beside the headline and grow. Width is capped so it reads as an
   object in the space, not a poster filling it. */
/* The wrapper cell goes with the card: an empty grid cell would still
   cost the 48px row gap under the buttons on a phone. */
.hero__aside { display: none; }
@media (min-width: 760px) { .hero__aside { display: block; } }

@media (min-width: 860px) {
  .demoqr--hero {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 22px;
    margin: 0;
    padding: 32px 28px 28px;
    max-width: 340px;
  }
  .demoqr--hero img { width: 200px; height: 200px; border-radius: 6px; }
  .demoqr--hero .demoqr__h { font-size: 17px; margin-bottom: 6px; }
  .demoqr--hero .demoqr__body { max-width: 26ch; }
}

/* Shown only on the two SKUs that clear the $50 free-shipping line. If the
   threshold or the prices move, check which products still carry this. */
.product__ship {
  margin: -8px 0 10px;
  color: var(--signal-ink);
  font-size: 14px;
  font-weight: 600;
}

/* The optional name. Deliberately the most prominent thing after the item
   itself: a teacher holding a sweatshirt over a lost-and-found bin should be
   able to read it without looking for it. Ink, not muted -- this is an answer,
   not a caption. */
.finder__owner {
  margin: -2px 0 18px;
  color: var(--ink);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
}

.finder__thanks {
  margin: 0 0 18px;
  color: var(--muted);
}

.finder__creed {
  margin: 30px 0 0;
  font-size: 15px;
}

/* The setup orientation. Numbers stay achromatic: the teal belongs to the
   tag object above them, never to interface. */
.setup__how {
  list-style: none;
  counter-reset: n;
  margin: 4px 0 30px;
  padding: 0;
  text-align: left;
}

.setup__how li {
  counter-increment: n;
  position: relative;
  padding-left: 36px;
  margin: 12px 0;
  color: var(--ink);
  line-height: 1.55;
}

.setup__how li::before {
  content: counter(n);
  position: absolute;
  left: 0;
  top: 1px;
  width: 23px;
  height: 23px;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.finder__note {
  border-left: 2px solid var(--hairline);
  padding: 2px 0 2px 16px;
  margin: 24px 0;
  color: var(--ink);
}

.finder__note span {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}

.actions {
  display: grid;
  gap: 10px;
  margin: 30px 0;
}

/* ---------- Buttons ------------------------------------------
   Ink fill for the primary action, hairline outline for the
   secondary. The teal is never a button: it belongs
   to the object, not the interface.
   ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 26px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.btn--go {
  background: var(--ink);
  color: var(--paper);
}

.btn--go:hover {
  background: #000;
}

.btn--go:active {
  transform: translateY(1px);
}

.btn--plain {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline);
}

.btn--plain:hover {
  border-color: var(--ink);
}

.btn--plain:active {
  transform: translateY(1px);
}

.btn--wide {
  width: 100%;
}

/* ---------- The relay ---------------------------------------- */

.relay {
  margin: 30px 0 0;
  border-top: 1px solid var(--hairline);
  padding-top: 24px;
}

.relay h2 {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.relay summary {
  cursor: pointer;
  list-style: none;
  font-weight: 500;
  padding: 12px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.relay summary::-webkit-details-marker {
  display: none;
}

.relay summary::after {
  content: '+';
  font-family: var(--mono);
  color: var(--muted);
  font-size: 18px;
}

.relay[open] summary::after {
  content: '–';
}

.relay p {
  color: var(--muted);
  margin: 0 0 16px;
}

/* The finder's opt-out under the contact field. Default is share; the box
   is the exception, so it reads as a quiet note, not a card. */
/* The marketing question is the last thing before "Turn it on" now, since the
   setup page was reordered on 2026-09-06. Left at its old spacing it crowded
   the button, which made the most important control on the page look like an
   afterthought stuck to the bottom of a paragraph. */
.setup .check:last-of-type {
  margin-bottom: 22px;
}

/* "Did you mean sam@gmail.com?" It sits between the box and its own hint, so it
   reads as an answer to what was just typed rather than as another rule. Teal
   because it is the one line here that wants to be noticed; everything else in
   this colour on the page is a link, and this one carries a button. */
.hint--typo {
  color: var(--signal-ink);
}

.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 10px 0 0;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.field .check input[type='checkbox'] {
  margin: 3px 0 0;
  width: 17px;
  height: 17px;
  min-height: 0;
  padding: 0;
  flex: none;
  border: 1px solid var(--muted);
  border-radius: 2px;
  background: #fff;
  accent-color: var(--ink);
  appearance: auto;
  -webkit-appearance: auto;
}
.check b {
  font-weight: 500;
  color: var(--ink);
}
.relay__status {
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--muted);
}

.relay__status[data-state='error'] {
  color: #8c2f13;
}

.relay__status[data-state='sent'] {
  color: var(--ink);
}

/* "Calling or texting uses your own phone plan." Sits under the call and text
   buttons on a finder's page, centred with them, and small. It is a courtesy to
   a stranger about to spend their own minutes on somebody else's lost bag, not
   a legal notice, and it must never grow into one. */
.hint--rates {
  margin: 12px 0 0;
  text-align: center;
  font-size: 14px;
}

/* ---------- Forms -------------------------------------------- */

.field {
  margin: 0 0 20px;
}

.field label {
  display: block;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 7px;
}

.field input,
.field textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 14px 15px;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px; /* 16px or iOS zooms on focus */
  line-height: 1.5;
}

.field textarea {
  min-height: 116px;
  resize: vertical;
}

/* The one line on a product card set in ink, for the sentence that sells it. */
.lines .product__lead {
  color: var(--ink);
  font-weight: 500;
}

/* A colour name set in that colour (the /holiday colour list). Light ones
   sit on a dark chip, or white would be invisible on the paper. */
.ink {
  color: var(--c);
  font-weight: 600;
}
.ink--light {
  background: var(--ink);
  padding: 0 0.4em;
  border-radius: 3px;
}

/* ---------- Colour swatches (holiday ornaments, 2026-10-03) ----------
   A row of radio buttons drawn as colour dots with the colour's name, in
   place of a menu, so the shopper sees the colour before picking it. The
   dot colours are the filament makers' own hex codes (Ginger's call,
   2026-10-03): Bambu PLA Silk+ Blue #008BDA, Polymaker Panchroma Starlight
   Twilight #1E3445, the Sparkle one with white specks. */
.swatches {
  border: 0;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.swatches legend {
  display: block;
  width: 100%;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 9px;
  padding: 0;
}
.swatch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: var(--tap);
  cursor: pointer;
  font-size: 15px;
}
.swatch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.swatch__dot {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
  flex: none;
}
.swatch--sparkle .swatch__dot {
  background:
    radial-gradient(circle at 30% 32%, rgba(255, 255, 255, 0.95) 0 0.9px, transparent 1.6px),
    radial-gradient(circle at 66% 58%, rgba(255, 255, 255, 0.85) 0 0.8px, transparent 1.5px),
    radial-gradient(circle at 48% 78%, rgba(255, 255, 255, 0.75) 0 0.7px, transparent 1.4px),
    radial-gradient(circle at 74% 28%, rgba(255, 255, 255, 0.7) 0 0.6px, transparent 1.3px),
    var(--swatch);
}
.swatch input:checked + .swatch__dot {
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink);
}
.swatch input:focus-visible + .swatch__dot {
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--accent, #00BFAE);
}

/* ---------- The number, and the country in front of it ----------
   One row: a short country select, then the number. Ginger, 2026-09-16: "have
   a country code pick down so people do not need to enter the +1."

   The select is sized in ch so it holds "United States (+1)" without stretching
   to swallow the number box, and it shrinks on a narrow phone rather than
   pushing the number off the edge: min-width 0 on the input is what lets a flex
   item be narrower than its own content, and without it the pair overflows at
   320px. The select inherits the box styling below by class rather than by
   element, because `.field input` must not start matching radio buttons. */
.phone {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.phone__cc {
  flex: 0 1 auto;
  width: 10.5em;
  max-width: 45%;
  min-height: var(--tap);
  padding: 14px 10px;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px; /* 16px or iOS zooms on focus */
  line-height: 1.5;
}

.phone__num {
  flex: 1 1 auto;
  min-width: 0;
}

.phone__cc:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

/* "That is not the right number of digits." Shown under the box while the
   number is the wrong length, and it is the same sentence the browser puts in
   the bubble if they submit anyway, so nobody gets two different tellings-off
   for one mistake.

   ⚠️ NOT RED. There is no red in this palette and this line is not the place
   to introduce one: the page is read outdoors, on one bar, by somebody who has
   just found a stranger's things, and a warning colour that appears nowhere
   else would be the loudest thing on it. Full-strength ink and a little weight
   against the muted grey of every other hint is enough to separate "here is
   how this works" from "this bit is not right yet", which is exactly how
   .alert already does it. */
.hint--bad {
  color: var(--ink);
  font-weight: 500;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.field input::placeholder,
.field textarea::placeholder {
  color: #9a9c95;
}

.hint {
  margin: 7px 0 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

.hint--foot {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
}

.alert {
  border: 1px solid var(--ink);
  border-left-width: 3px;
  padding: 13px 16px;
  margin: 0 0 24px;
  font-size: 15px;
}

/* ---------- The contact choice ------------------------------- */

.choice {
  border: 0;
  padding: 0;
  margin: 0 0 22px;
}

.choice legend {
  font-size: 15px;
  font-weight: 500;
  padding: 0;
  margin-bottom: 12px;
}

.opt {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 15px 16px;
  margin-bottom: 9px;
  cursor: pointer;
  background: #fff;
  transition: border-color 0.12s ease;
}

.opt:has(input:checked) {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.opt input {
  margin: 3px 0 0;
  accent-color: var(--ink);
  width: 18px;
  height: 18px;
  flex: none;
}

.opt b {
  display: block;
  font-weight: 500;
  margin-bottom: 3px;
}

.opt span {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.45;
}

.opt b + br {
  display: none;
}

/* ---------- Collapsible extras ------------------------------- */

.field textarea.note {
  min-height: 0;
  height: auto;
}

/* The setup code. Big, spaced and monospaced, because it is read off a
   notification and typed with a thumb, and because a code that looks like a
   code is one nobody types into the wrong box. */
.field input.code {
  font-family: var(--mono);
  font-size: 30px;
  letter-spacing: 0.28em;
  text-align: center;
  padding: 16px 12px;
}

.verify__more {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 22px 0 0;
}

.notice--ship {
  max-width: var(--measure);
  margin-bottom: 26px;
}

.notice {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-left: 2px solid var(--signal);
  background: rgba(0, 191, 174, 0.07);
  font-size: 15px;
}

.ideas {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
}

.ideas__label {
  font-size: 13px;
  color: var(--muted);
}

.idea {
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 9px 12px;
  cursor: pointer;
}

.idea:hover,
.idea:focus-visible {
  border-color: var(--ink);
  outline: none;
}

.extra,
.danger {
  margin: 22px 0;
  border-top: 1px solid var(--hairline);
}

.extra summary,
.danger summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 0;
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 9px;
}

.extra summary::-webkit-details-marker,
.danger summary::-webkit-details-marker {
  display: none;
}

.extra summary::before,
.danger summary::before {
  content: '+';
  font-family: var(--mono);
  color: var(--muted);
}

.extra[open] summary::before,
.danger[open] summary::before {
  content: '–';
}

.danger p {
  font-size: 15px;
  color: var(--muted);
  margin: 0 0 16px;
}

.inactive {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}

/* ---------- The owner's own strip, and why it is fenced off ----------
   Ginger, 2026-09-16, looking at her own tag: "it needs to read as not needed
   for the finder."

   It used to sit 30px under the creed in the same small grey type, so the last
   three things on the page were a brand line, an owner line and a button, all
   looking alike and all looking like part of what a finder should do. A finder
   who has just picked up a stranger's water bottle should be able to stop
   reading at "Leave a message" and be finished.

   So this block is fenced: a lot of air above it, a rule, and a label that says
   who it is for. It is the only place on a finder's page that is not addressed
   to the finder, and it should look like it. */
.owner {
  margin-top: 64px;
  padding-top: 26px;
  border-top: 1px solid var(--hairline);
}

.owner__who {
  margin: 0 0 4px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.owner--mine { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.owner--mine .hint { margin: 0; }
.owner--mine .alert { margin: 0; }

.linkish {
  background: none;
  border: 0;
  padding: 12px 0;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--hairline);
  cursor: pointer;
}

.linkish:hover {
  color: var(--ink);
}

/* ---------- Page foot on tag pages --------------------------- */

.finder__foot {
  margin-top: 52px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
}

.finder__foot strong {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 5px;
}

.finder__lang {
  margin: 14px 0 0;
  font-size: 14px;
}

.finder__lang a {
  color: var(--muted);
}

/* ============================================================
   Marketing pages
   ============================================================ */

.wrap {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 26px;
}

.site-head {
  display: flex;
  align-items: center; /* was baseline; the header lockup has a mark taller than the type */
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  padding-top: 34px;
  padding-bottom: 34px;
}

.brand {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
}

/* Company headers only: the Found Things header keeps its stacked
   "Found Things / by Might As Well Co." and must not become a row. */
.brand--mark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-top: 7px; /* room for the bar over the M */
}

/* The company lockup (v3, 2026-10-03), laid out like the back of the Car
   Line sign: the dot and the triangle in a column just left of the name,
   centred on it, and the bar over the M. The bar is drawn here, not in the
   SVG, because it has to sit on live text. Sizes follow the plate's
   proportions at 15px type (cap about 10.5px): dot 5.7, triangle 6.5 x 5.7,
   bar 20 x 4 set 3px above the cap line. Found Things pages keep their own
   header (product name, "by Might As Well Co.") and no mark. */
.brand__mark {
  display: block;
  width: 6.5px;
  height: 14px;
  flex: none;
}
.brand--mark .brand__name {
  position: relative;
  display: block;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
  line-height: 1;
}
.brand--mark .brand__name::before {
  content: '';
  position: absolute;
  left: 0;
  top: -7px;
  width: 20px;
  height: 4px;
  border-radius: 2px;
  background: var(--ink);
}

.brand span {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.01em;
  margin-top: 2px;
}

.site-head nav {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 15px;
}

.site-head nav a {
  text-decoration: none;
  color: var(--muted);
}

.site-head nav a:hover {
  color: var(--ink);
}

/* ---------- Hero --------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
  padding: 40px 26px 76px;
}

@media (min-width: 860px) {
  .hero {
    grid-template-columns: 1.35fr 0.65fr;
    gap: 64px;
    align-items: center;
    padding-top: 64px;
    padding-bottom: 112px;
  }
}

/* Centers the tag graphic when a hero HAS one. This used to say
   div:last-child, which on a hero with no graphic grabbed the text block
   itself and flexed the headline, intro and button into one squeezed row
   (see /fundraising and /pickup before 2026-09-02). A second div exists
   only when a graphic follows the text, so target exactly that. */
.hero > div + div {
  display: flex;
  justify-content: flex-start;
}

@media (min-width: 860px) {
  .hero > div + div {
    justify-content: center;
  }
}

/* The gap below this is bigger than it looks like it should be, on purpose.
   The headline underneath runs at line-height 1.04 — tighter than the font's
   natural leading — so its ascenders ride UP out of the line box and eat into
   whatever margin sits above them. At 20px the eyebrow visually collided with
   a 4.5rem headline. 44px measures right rather than reads right
   (32px still crowded once the graphic left the right column). */
.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 44px;
}

.hero h1 {
  font-family: var(--display);
  font-size: clamp(2.75rem, 6.4vw, 4.5rem);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.04;
  margin: 0 0 28px;
  max-width: 15ch;
}

.hero p {
  margin: 0;
  max-width: var(--measure);
  color: var(--muted);
  font-size: 18px;
}

.hero__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 30px;
}

/* The finder's door, under the two buttons on the home page. Quiet: somebody
   who found a bag is not being sold to, and a second loud button next to the
   first one would only make the real call to action harder to see. Underlined
   because it is the one link in this block that does not look like a button
   and would otherwise read as a caption. */
.hero__found {
  margin: 16px 0 0;
  font-size: 15px;
}

.hero__found a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero__found a:hover,
.hero__found a:focus {
  color: var(--ink);
}

/* ---------- Homepage hero band ------------------------------
   The old hero boxed the tag into a bordered card on the right,
   which read as "our little product" rather than "the way things
   ought to leave the house". The band is the norm, drawn wide:
   the everyday carry, every piece already wearing its tag, and
   nothing containing it. Teal appears only as the tags, keeping
   the one-loud-thing rule. Decorative: aria-hidden in markup.
   ------------------------------------------------------------ */
.site-foot__addr {
  color: var(--muted);
  font-size: 12px;
  margin-top: 6px;
}

/* Homepage hero: text only, one confident column. The tagged-objects
   band moved to the Found Things page, where "everything that leaves
   the house deserves a way home" is the actual thesis. */
.hero--solo {
  grid-template-columns: 1fr;
}
/* A second hero paragraph (the holiday page) needs air above it. */
.hero p + p {
  margin-top: 14px;
}

/* The tagged-objects strip, now a Found Things section. The everyday
   carry, each piece already wearing its tag, nothing contained. */
.tagged {
  padding: 8px 26px 64px;
}

@media (min-width: 860px) {
  .tagged { padding: 8px 26px 88px; }
}

@media (min-width: 860px) {
  .hero--band {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

.heroband {
  margin-top: 8px;
  color: var(--muted);
}

@media (min-width: 860px) {
  .heroband { margin-top: 26px; }
}

.heroband svg {
  width: 100%;
  height: auto;
  display: block;
}

.heroband__tag {
  fill: var(--signal);
  stroke: none;
}

.heroband .heroband__caption {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin: 10px 0 0;
  text-align: right;
  max-width: none; /* .hero p caps paragraphs at the reading measure; the caption belongs to the drawing, full width */
}

/* The "want labels or stickers first?" line is an ask about the
   whole formats section, not a footnote to the last card. Space
   and a hairline separate the thought. */
.options__ask {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  max-width: var(--measure);
}

/* ---------- Sections ----------------------------------------- */

.section,
.steps {
  padding: 72px 26px;
  border-top: 1px solid var(--hairline);
}

.steps h2,
.section h2 {
  font-family: var(--display);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.12;
  margin: 0 0 12px;
  max-width: 22ch;
}

.section > p {
  margin: 0 0 40px;
  max-width: var(--measure);
  color: var(--muted);
}

.steps ol {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  gap: 34px;
  counter-reset: step;
}

@media (min-width: 760px) {
  .steps ol {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
}

.steps li {
  counter-increment: step;
  border-top: 1px solid var(--ink);
  padding-top: 16px;
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 14px;
  letter-spacing: 0.08em;
}

.steps h3 {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 500;
  margin: 0 0 6px;
}

.steps p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}

/* ---------- Claims ------------------------------------------- */

.claims {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 30px;
}

@media (min-width: 760px) {
  .claims {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 56px;
  }
}

.claims li {
  border-top: 1px solid var(--hairline);
  padding-top: 16px;
}

.claims strong {
  display: block;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 6px;
}

.claims p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}

/* ---------- Product lines, on the Might As Well Co. home ------
   A list rather than a grid of cards. There is one real product
   and pretending otherwise looks like a shop with nothing in it.
   -------------------------------------------------------------- */

.lines {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  gap: 26px;
}

@media (min-width: 760px) {
  .lines {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
}

.lines li {
  border-top: 1px solid var(--ink);
  padding-top: 18px;
}

.lines__soon {
  border-top-color: var(--hairline);
}

.lines__eyebrow {
  margin: 0 0 12px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.lines h3 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.lines p {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 16px;
  max-width: 40ch;
}

.lines__soon p {
  margin-bottom: 0;
}

/* ---------- Buy ---------------------------------------------- */

.buy {
  display: grid;
  gap: 34px;
  align-items: start;
  border-top: 1px solid var(--ink);
  padding-top: 26px;
}

@media (min-width: 760px) {
  .buy {
    grid-template-columns: 1fr auto;
    gap: 64px;
    align-items: center;
  }
}

.buy__price {
  font-family: var(--display);
  font-size: 3rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  line-height: 1;
}

.buy__price span {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 10px;
}

.buy__price span:first-child {
  margin: 0 0 10px;
}

.buy__blurb {
  margin: 0 0 20px;
  font-size: 16px;
  color: var(--muted);
  max-width: 44ch;
}

.buy__list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.buy__list li {
  font-size: 16px;
  color: var(--muted);
  padding-left: 18px;
  position: relative;
}

.buy__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 7px;
  height: 1px;
  background: var(--muted);
}

/* ---------- Foot --------------------------------------------- */

.site-foot {
  border-top: 1px solid var(--hairline);
  padding-top: 34px;
  padding-bottom: 60px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--muted);
}

.site-foot p {
  margin: 0;
}

.site-foot strong {
  font-weight: 500;
  color: var(--ink);
}

.site-foot a {
  color: var(--muted);
  text-decoration: none;
}

.site-foot a:hover {
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* ============================================================
   Long-form pages — privacy, and anything legal that follows.

   Set narrow and quiet on purpose. This is a page someone reads
   because they are checking up on us, so it should be easy to
   read all the way through rather than easy to skim past. The
   measure is the same as the rest of the site; hierarchy comes
   from size, as everywhere else, and nothing here is heavier
   than 500.
   ============================================================ */
.prose {
  max-width: var(--measure);
  /* padding-BLOCK only. The old shorthand (56px 0 96px) silently zeroed the
     horizontal padding inherited from .wrap, so on any phone the text ran
     hard into the screen edge. Vertical rhythm belongs to this class;
     horizontal breathing room belongs to .wrap. Never take it back. */
  padding-block: 44px 96px;
}

.prose h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 7.5vw, 3.25rem);
  line-height: 1.08;
  text-wrap: balance;
  letter-spacing: -0.018em;
  /* Same trick as the hero: the tight line-height lets the ascenders
     ride up, so this margin measures larger than it reads. */
  margin: 0 0 28px;
}

.prose__meta {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 28px;
}

.prose__lede {
  font-size: 19px;
  line-height: 1.55;
  margin: 0 0 8px;
}

.prose h2 {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 44px 0 10px;
}

.prose p {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.62;
}

/* The absence list is the product claim, not a disclaimer. It gets the
   only emphasis on the page — a hairline rule, not the signal colour,
   which belongs to the tag and nothing else. */
.prose__mark {
  border-left: 1px solid var(--hairline);
  padding-left: 18px;
  color: var(--ink);
}

/* --- the second adult, on the finder page ------------------------------- */
/* One quiet line under the primary buttons. Deliberately NOT a button: a
   finder wants a single obvious action, and this is the fallback for when
   the first phone is dead, not an equal choice. */
.finder__also {
  margin: 14px 0 0;
  font-size: 0.92rem;
  color: var(--ink-soft, #6b6560);
}
.finder__also a { color: inherit; text-decoration: underline; }

/* --- manage page -------------------------------------------------------- */
.manage__h2 { margin: 34px 0 10px; font-size: 1.05rem; }
.manage__list { list-style: none; margin: 0; padding: 0; }
.manage__tag {
  padding: 14px 0;
  border-bottom: 1px solid var(--line, #e4ded6);
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline;
}
.manage__tag code { font-size: 0.85rem; opacity: 0.7; }
.manage__inline { display: inline; }
.alert--ok { background: #e8f6f4; border-color: var(--signal, #00bfae); color: inherit; }

/* --- single checkbox row (invite form marketing consent) ---------------- */
.opt--single { margin: 18px 0; display: flex; }

/* --- about page --------------------------------------------------------- */
/* The call-and-response pairs: the passing thought in the writer's voice,
   then the company's whole philosophy as the reply. The reply gets weight
   through SIZE and the display face, per the type rules — never boldness. */
.about__sparks {
  list-style: none;
  margin: 26px 0 34px;
  padding: 0;
  display: grid;
  gap: 18px;
}
.about__sparks li {
  border-left: 2px solid var(--hairline);
  padding-left: 18px;
}
.about__sparks i {
  display: block;
  font-family: var(--display);
  font-style: italic;
  color: var(--muted);
}
.about__sparks b {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.15rem;
  margin-top: 2px;
}
.about__sparks--one { margin-top: 6px; }

/* A one-line paragraph given room to land. */
.about__beat {
  font-family: var(--display);
  font-size: 1.12rem;
  margin: 26px 0;
}

.about__cta { margin: 44px 0 10px; }

/* --- about page: scale and signal --------------------------------------- */
/* The one page that is allowed to warm up. Headers step up a full size, and
   the teal — elsewhere reserved strictly for the tag object — appears here
   in two disciplined places: the rail beside each "might as well" exchange,
   and the replies themselves. The replies ARE the brand speaking, which is
   the same rule the rest of the site runs on, read generously.
   Text never uses raw --signal on paper (2.2:1); --signal-ink is the
   darkened teal that reads at body sizes. */
:root { --signal-ink: #00776d; }

/* The tag's own words wear the tag's colour. Decided 2026-08-31: the one
   exception to "teal is never interface" — HELP ME HOME, "a way home",
   "lost things" and their Spanish forms render in the darker text-safe
   teal wherever they appear in prose, because those phrases ARE the tag
   speaking. Interface chrome (buttons, links, hovers) stays achromatic. */
.phrase {
  color: var(--signal-ink);
  font-weight: 500;
}
.about h2 {
  font-size: clamp(1.5rem, 5.5vw, 1.9rem);
  line-height: 1.15;
  margin-top: clamp(38px, 8vw, 54px);
  text-wrap: balance;
}
.about .prose__lede { font-size: 1.35rem; }
.about__sparks li { border-left-color: var(--signal); }
.about__sparks b { color: var(--signal-ink); font-size: 1.22rem; }
.about__beat { color: var(--signal-ink); }

/* ============================================================
   Small screens — phones, and the narrow cover screens on
   folding phones (down to ~320px).

   The finder page was designed for a stranger's phone from day
   one; these rules bring the MARKETING pages to the same
   standard, because a QR scan lands on a phone by definition —
   the person reading About on a laptop is the rare case, not
   the default.
   ============================================================ */
@media (max-width: 480px) {
  .wrap { padding-inline: 20px; }
  .hero { padding: 28px 20px 56px; }
  .prose { padding-block: 24px 72px; }
  .site-head { padding-block: 22px 14px; row-gap: 10px; }
  .site-head nav { gap: 16px; }
  .prose__lede { font-size: 17px; }
  .about .prose__lede { font-size: 1.2rem; }
}

@media (max-width: 350px) {
  .wrap { padding-inline: 16px; }
  .hero { padding-inline: 16px; }
  .prose h1 { font-size: 1.8rem; }
}

/* Checkable promises, not adjectives. Plain links with the same rail as the
   spark list — evidence gets the accent, self-description never did. */
.about__proof {
  list-style: none;
  margin: 22px 0 10px;
  padding: 0;
  display: grid;
  gap: 14px;
}
.about__proof li {
  border-left: 2px solid var(--signal);
  padding-left: 18px;
}
.about__proof a { color: inherit; }

.about__sig {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.35rem;
  margin: 40px 0 0;
}

/* --- the demo button wears a miniature tag ------------------------------ */
/* The system's rule holds: teal belongs to the tag, never to interface.
   The demo button is the doorway to the tag experience, so it carries a
   small effigy of the product — teal, with the punched hole — rather than
   being coloured itself. The colour still only ever marks the tag. */
.btn--demo { gap: 10px; }
.btn__tag {
  display: inline-block;
  width: 15px;
  height: 15px;
  background: var(--signal);
  border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  position: relative;
  flex: none;
}
.btn__tag::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}
/* /products: the same list, two-up on wide screens, with a price line.
   The price uses the display face at card size; the unit line under it is
   the same micro-caps as .buy__price span so the two pages read as one. */
.lines--grid {
  gap: 30px 40px;
}
.lines .product__price {
  font-family: var(--display);
  font-size: 1.9rem;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0 0 16px;
  color: var(--ink);
  max-width: none;
}
.lines .product__price span {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 8px;
}
.product--soon {
  border-top-color: var(--hairline);
}
/* Real photos of the real thing, two up: closed, then open. Added
   2026-10-02 for the Money Maze, where the open picture is what explains
   the product. width/height on the img reserve the space, so the card does
   not jump when a lazy photo arrives. */
.product__photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 18px;
}
.product__photos img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
  background: var(--hairline);
}
/* One photo per colour (Castle Rock ornament), square because the round
   ornament fills the frame and a 4:3 crop cuts off the hanger or the year.
   The caption repeats the colour name from the menu below it. */
.product__photos--square img {
  aspect-ratio: 1 / 1;
}
.product__photos figure {
  margin: 0;
}
.product__photos figcaption {
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.lines + .hint {
  margin-top: 30px;
}
.lines__soon .lines__actions {
  margin-top: 22px;
}
@media (min-width: 760px) {
  .lines--grid {
    grid-template-columns: 1fr 1fr;
  }
}
.lines__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* ---------- The order (cart) ---------------------------------- *
 * Added 2026-09-05 with the cart. Before it, every product was a Stripe
 * Payment Link and there was no page where two things sat together, which is
 * why the site could promise "free over $50" and never deliver it.
 */

/* The count beside "Order" in the nav. It is hidden, not removed, when the
   basket is empty, so the nav does not jump about as things go in. */
.cartcount {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 9px;
  background: var(--signal);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}

.cartlines {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}

.cartline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline);
}

.cartline__name {
  margin: 0;
  font-weight: 600;
  flex: 1 1 220px;
}

/* What the buyer typed for a made-to-order holder, shown back to them. Their
   words, not ours, so it is quoted rather than tidied. */
.cartline__note {
  flex: 1 1 100%;
  order: 3;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.cartline__controls {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cartline__qty {
  width: 62px;
  padding: 6px 8px;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  font: inherit;
  font-size: 15px;
}

.cartline__price {
  min-width: 68px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.cartline__rm {
  border: 0;
  background: none;
  padding: 4px;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}

.cartline__rm:hover { color: var(--ink); }

.carttotals {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 18px;
  margin: 22px 0 6px;
  max-width: 380px;
}

.carttotals dt { color: var(--muted); }

.carttotals dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.carttotals__big {
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
}

/* Shown when checkout fails. Deliberately loud: the one thing the shopper
   needs to know is that nothing was charged. */
.cart-error {
  color: var(--signal-ink);
  font-weight: 600;
}

/* The word that appears beside a button after it is pressed. */
.said {
  display: inline-block;
  margin-left: 12px;
  color: var(--signal-ink);
  font-size: 14px;
  font-weight: 600;
}

/* The style menu on /pickup, matching the text inputs it sits beside. */
.field select {
  width: 100%;
  max-width: 420px;
  padding: 11px 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--paper, #fff);
  font: inherit;
  font-size: 16px;
  color: var(--ink);
}