/* snapit2share — one stylesheet for the marketing pages and the booth.
 *
 * The tokens below are the "Playful Design System" canvas, board 1 (Foundations) and board 2
 * (Components), transcribed. Where a value differs from that board it is marked DEVIATION with the
 * reason; there are four, and three of them are the board failing its own stated rule.
 *
 * Two rules learned the hard way on the previous build, both about the cascade:
 *   - Layout that must win goes LAST in this file. Four separate bugs came from a general rule
 *     written later quietly beating a specific one written earlier.
 *   - An id selector beats any number of classes, so anything overriding an `#id { display: … }`
 *     has to name that id too.
 */

:root {
  color-scheme: light;               /* never follow the device theme: see the note at the bottom */

  /* ── accents ──────────────────────────────────────────────────────────────
     Coral is the single primary — one primary action per screen. Mint, sky, sunny and lavender
     are supporting accents: feature borders, icon tiles, category cues. */
  --coral:        #ff7a4d;
  --coral-deep:   #e85f30;           /* hover / pressed */
  --coral-light:  #ff9e6b;           /* gradient partner, tints */
  --mint:         #4ec9a7;
  --sky:          #4aa8ff;
  --sunny:        #ffc94d;
  --lavender:     #b18cff;

  /* ── soft tints ───────────────────────────────────────────────────────── */
  --peach:        #ffe9dd;
  --mint-tint:    #eafaf4;
  --sky-tint:     #e6f1ff;
  --lavender-tint:#efeaff;
  --sunny-tint:   #fff3d6;

  /* ── text on a tint ───────────────────────────────────────────────────────
     DEVIATION, and the board asks for it: "Pair every tint with its deep accent for text (min AA
     contrast)". Measured against each tint, the board's own accent values do not reach 4.5:1 —
     sunny on its tint is 1.39:1, sky 2.21:1, coral-deep on peach 2.94:1. These are the darkened
     siblings that satisfy the rule, and they are what small text and icon glyphs use. The bright
     accents above stay exactly as drawn for fills, borders and large shapes. */
  --on-peach:     #b03d18;           /* 5.09:1 */
  --on-mint:      #177a5f;           /* 4.89:1 */
  --on-sky:       #1c6cb4;           /* 4.77:1 */
  --on-lavender:  #6544e0;           /* 5.17:1 */
  --on-sunny:     #7d5b12;           /* 5.64:1 */

  /* ── surfaces & ink ───────────────────────────────────────────────────────
     Warm cream ground, white surfaces, a plum-tinted ink ramp. Never pure black or pure grey. */
  --paper:        #fff8f1;           /* page */
  --surface:      #ffffff;           /* cards, inputs */
  --ink:          #2b2440;           /* headings, body, dark bands */
  --muted:        #6b6480;           /* body secondary, labels — 5.31:1 on cream */
  --placeholder:  #b0a8bc;           /* input placeholder ONLY, never prose */
  --line:         #efe8e0;           /* default border / divider */
  --line-active:  #ffd9c9;           /* focused field */

  /* DEVIATION: the board's Muted #8b849e is 3.39:1 on cream and is assigned to "meta, captions"
     at 11–12px, which fails AA outright. Captions use --muted instead; nothing on this site uses
     #8b849e for text. */

  /* ── type ─────────────────────────────────────────────────────────────────
     Fredoka for display and UI labels, Nunito for body. */
  --display: "Fredoka", system-ui, sans-serif;
  --text:    "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ── radius — generously rounded, nothing sharp ───────────────────────── */
  --r-thumb:  8px;
  --r-input: 13px;
  --r-btn:   16px;
  --r-tile:  20px;
  --r-card:  28px;
  --pill:    999px;

  /* Kept as aliases so nothing that already uses them breaks; both point at the board's values. */
  --radius:   var(--r-card);
  --radius-s: var(--r-input);

  /* ── elevation — soft, low-contrast plum. Coral glow under primary only. ─ */
  --shadow:       0 10px 24px rgb(43 36 64 / .06);   /* soft · cards */
  --shadow-raised:0 14px 30px rgb(43 36 64 / .07);   /* raised · feature cards */
  --shadow-l:     0 18px 40px rgb(43 36 64 / .10);   /* elevated · forms, modals */
  --glow:         0 12px 28px rgb(255 122 77 / .40); /* coral glow · primary */

  --wrap: 1120px;
}

* { box-sizing: border-box; }

/* The ground is painted on BOTH html and body, and `theme-color` matches it.
 *
 * This is what made an iPhone and an Android look like different sites after a scan. iOS Safari
 * tints its top toolbar AND its bottom bar with theme-color, so a coral theme-color put the cream
 * page inside coral chrome; Android Chrome tints only the status bar, leaving the toolbar light.
 * Same markup, two very different-looking screens.
 *
 * The background on `html` is the second half: body's background propagates to the canvas only
 * while html has none, and anything that gives html a background - a browser extension, a
 * reader mode, iOS rubber-band overscroll on a short page - exposes white. Paint both. */
html { background: var(--paper); }
html, body { min-height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  /* DEVIATION: the board specifies 15px. Held at 16px — this is read on phones in a crowd, and
     under 16px iOS also zooms the page whenever a field takes focus. Weight, line-height and every
     other step of the scale follow the board. */
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Display · Fredoka 600 · 46–66px · −0.02em.  H2 · 30–34px.  H3 / card title · 19–24px. */
h1, h2, h3, .display { font-family: var(--display); font-weight: 600; line-height: 1.12; margin: 0; }
h1 { font-size: clamp(2.4rem, 6vw, 4.1rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.75rem, 4vw, 2.125rem); letter-spacing: -.02em; }
h3 { font-size: 1.25rem; }
p  { margin: 0; }
a  { color: var(--on-peach); }


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

.skip { position: absolute; left: -9999px; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--r-input) 0; }
.skip:focus { left: 0; top: 0; z-index: 60; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; width: 100%; }

/* ── buttons ──────────────────────────────────────────────────────────────── */

/* Board: one primary action per screen. Height 52-56px, radius 16px, Fredoka 600, gap 9px for the
   trailing glyph. The coral glow belongs to the primary and nothing else. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--display); font-weight: 600; font-size: 1rem;
  padding: 0 30px; min-height: 54px;
  border: 2px solid transparent; border-radius: var(--r-btn);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.btn svg { flex: 0 0 auto; }
.btn-primary { background: var(--coral); color: #fff; box-shadow: var(--glow); }
.btn-primary:hover { background: var(--coral-deep); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--line-active); }
/* Pill / nav variant - the board keeps 999px for exactly this one shape. */
.btn-pill { border-radius: var(--pill); min-height: 44px; padding: 0 24px; font-size: .95rem; box-shadow: 0 8px 20px rgb(255 122 77 / .35); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* ── site header ──────────────────────────────────────────────────────────── */

.site-head {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap { display: flex; align-items: center; gap: 20px; height: 68px; }
/* Board: the wordmark sets the "2" in coral; the icon tile tilts -6deg for a playful lean. */
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 600; font-size: 1.25rem; color: var(--ink); text-decoration: none; }
.brand .dot {
  width: 38px; height: 38px; border-radius: 12px; background: var(--coral);
  display: grid; place-items: center; color: #fff; flex: 0 0 auto;
  transform: rotate(-6deg); box-shadow: 0 8px 18px rgb(255 122 77 / .35);
}
/* One flex item, not three. `.brand` is a flex row with a gap, so leaving the name as three text
   nodes put 12px of air on either side of the coral "2" and spelled it "snapit 2 share". */
.brand .wordmark { white-space: nowrap; }
.brand .two { color: var(--coral); }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.site-nav a { color: var(--muted); text-decoration: none; font-weight: 600; padding: 9px 14px; border-radius: var(--pill); font-size: .9375rem; }
.site-nav a:hover { color: var(--ink); background: var(--peach); }
.site-nav a[aria-current="page"] { color: var(--ink); background: var(--peach); }
.nav-toggle { display: none; }

@media (max-width: 760px) {
  .site-head .wrap { height: 60px; }
  .nav-toggle {
    display: inline-flex; margin-left: auto; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--surface); border: 1px solid var(--line); cursor: pointer; color: var(--ink);
  }
  .site-nav {
    position: absolute; inset: 60px 0 auto; margin: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 10px 16px 16px;
  }
  .site-nav[hidden] { display: none; }
  .site-nav a { padding: 13px 14px; font-size: 1.02rem; }
}

/* ── footer ───────────────────────────────────────────────────────────────── */

.site-foot { border-top: 2px solid var(--line); margin-top: 64px; padding: 34px 0 44px; color: var(--muted); font-size: .9375rem; }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: center; }
.site-foot a { color: var(--muted); text-decoration: none; }
.site-foot a:hover { color: var(--on-peach); }
.site-foot .spacer { margin-left: auto; }

/* ── marketing blocks ─────────────────────────────────────────────────────── */

/* `clip`, not `hidden`: the decorative blobs sit outside the content box on the right, and hidden
   would make the hero its own scroll container. Without either, the page scrolled 40px sideways on
   a phone — a whole-page defect caused entirely by two blurred circles nobody can point at. */
.hero { padding: clamp(40px, 7vw, 84px) 0 clamp(30px, 5vw, 56px); overflow: clip; }
.hero-grid { display: grid; gap: clamp(28px, 4vw, 44px); align-items: center; }
.hero-copy { max-width: 58ch; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--peach); color: var(--on-peach);
  font-weight: 700; font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase;
  padding: 7px 15px; border-radius: var(--pill); margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
/* Body large - the board's 17-19px, weight 500. */
.hero p.lead { font-size: 1.1875rem; color: var(--muted); margin: 18px 0 28px; max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* The hero artwork. Framed as a card rather than floated on the page background: the illustration
   carries its own warm gradient, and butting that against the page cream would show as a rectangle
   wherever the two did not quite agree. A radius and the board's raised shadow make it deliberate. */
.hero-art { max-width: 1040px; margin-inline: auto; }
.hero-art img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-raised);
}

.blob { position: absolute; border-radius: 50%; filter: blur(46px); opacity: .5; z-index: -1; }
.blob-1 { width: 320px; height: 320px; background: var(--coral-light); top: -60px; right: -40px; }
.blob-2 { width: 260px; height: 260px; background: var(--mint); bottom: -70px; left: -50px; opacity: .32; }
.hero .wrap { position: relative; }

/* Confetti dots: a named motif on the board, in the four supporting accents. Purely decorative,
   so they are aria-hidden in the markup. */
.confetti { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.confetti span { position: absolute; border-radius: 50%; display: block; }
/* Confined to the open ground beside the copy. The artwork sits below it and fills the width, so
   anything positioned from the bottom lands on top of the illustration. */
.confetti span:nth-child(1) { width: 13px; height: 13px; background: var(--sunny);    top: 8%;  right: 11%; }
.confetti span:nth-child(2) { width: 9px;  height: 9px;  background: var(--mint);     top: 26%; right: 4%; }
.confetti span:nth-child(3) { width: 11px; height: 11px; background: var(--sky);      top: 5%;  right: 27%; }
.confetti span:nth-child(4) { width: 8px;  height: 8px;  background: var(--lavender); top: 42%; right: 16%; }
/* Below 860px the hero is one column and the phone fills the right side, so the dots would land
   on the artwork. They are decoration; they can go. */
@media (max-width: 860px) { .confetti { display: none; } }

.section { padding: clamp(34px, 6vw, 68px) 0; }
.section-head { max-width: 60ch; margin-bottom: 34px; }
.section-head p { color: var(--muted); margin-top: 12px; font-size: 1.0625rem; }

/* Board: cards are radius 24-28px on a white surface with a soft shadow, and a feature card
   carries a 5px accent top-border that cues its category. The icon tile is 54px, radius 16. */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 20px; }
.card {
  background: var(--surface); border-radius: var(--r-card);
  padding: 30px; box-shadow: var(--shadow-raised);
  border-top: 5px solid var(--coral);
}
.card h3 { margin-bottom: 8px; font-size: 1.25rem; }
.card p { color: var(--muted); font-size: .9375rem; line-height: 1.55; }
.card .ico {
  width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
  background: var(--peach); color: var(--on-peach); margin-bottom: 16px;
}

/* The five-accent cycle, written out rather than generated so every pairing is a tint beside the
   deep sibling that actually reads on it. */
.card:nth-child(5n+2) { border-top-color: var(--mint); }
.card:nth-child(5n+2) .ico { background: var(--mint-tint); color: var(--on-mint); }
.card:nth-child(5n+3) { border-top-color: var(--sky); }
.card:nth-child(5n+3) .ico { background: var(--sky-tint); color: var(--on-sky); }
.card:nth-child(5n+4) { border-top-color: var(--sunny); }
.card:nth-child(5n+4) .ico { background: var(--sunny-tint); color: var(--on-sunny); }
.card:nth-child(5n+5) { border-top-color: var(--lavender); }
.card:nth-child(5n+5) .ico { background: var(--lavender-tint); color: var(--on-lavender); }

/* Renamed from `.step`. The booth's own step machine uses `section.step[data-for]`, booth.css
   loads after this file, and a numbered ::before circle was appearing on every booth screen. */
/* Board: a step card leads with a tinted icon tile, then a coral "Step n" label, then the title.
   The number is real information here - these are genuinely ordered - so it stays, as that label.
   ::after generates after the children, so flex `order` lifts it above the heading. */
.how { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; counter-reset: s; }
.how-step {
  counter-increment: s; background: var(--surface); border-radius: var(--r-card);
  padding: 30px; box-shadow: var(--shadow-raised);
  display: flex; flex-direction: column;
}
.how-step .ico {
  order: 1; width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
  background: var(--peach); color: var(--on-peach); margin-bottom: 16px;
}
.how-step::after {
  order: 2; content: "Step " counter(s);
  font-family: var(--display); font-weight: 600; font-size: .875rem;
  color: var(--on-peach); margin-bottom: 4px;
}
.how-step h3 { order: 3; font-size: 1.25rem; margin-bottom: 8px; }
.how-step p { order: 4; color: var(--muted); font-size: .9375rem; line-height: 1.55; }

.how-step:nth-child(5n+2) .ico { background: var(--mint-tint); color: var(--on-mint); }
.how-step:nth-child(5n+2)::after { color: var(--on-mint); }
.how-step:nth-child(5n+3) .ico { background: var(--sky-tint); color: var(--on-sky); }
.how-step:nth-child(5n+3)::after { color: var(--on-sky); }
.how-step:nth-child(5n+4) .ico { background: var(--sunny-tint); color: var(--on-sunny); }
.how-step:nth-child(5n+4)::after { color: var(--on-sunny); }

.cta-band {
  background: var(--ink); color: #fff; border-radius: var(--r-card);
  padding: clamp(30px, 5vw, 52px); text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #cfc8dd; margin: 12px auto 24px; max-width: 52ch; }

@media (max-width: 860px) {
  .hero-actions .btn { flex: 1 1 auto; }
}

/* ── events list ──────────────────────────────────────────────────────────── */

.event-card {
  display: block;
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--r-card);
  padding: 26px 28px; text-decoration: none; color: inherit; box-shadow: var(--shadow);
}
.event-card:hover { border-color: var(--line-active); }
.event-card h3 { margin-bottom: 4px; }
.event-card p { color: var(--muted); font-size: .94rem; }
/* Board: badges are pills, Nunito 700 - 13px, tint behind the deep sibling of the same accent. */
.badge {
  display: inline-block; font-size: .8125rem; font-weight: 700; letter-spacing: .03em;
  padding: 5px 12px; border-radius: var(--pill); margin-top: 10px;
}
.badge-live   { background: var(--mint-tint); color: var(--on-mint); }
.badge-soon   { background: var(--peach); color: var(--on-peach); }
.badge-closed { background: #f1eef4; color: var(--muted); }


/* ── an event's own page ──────────────────────────────────────────────────── */

.event-hero { padding: clamp(30px, 5vw, 58px) 0 clamp(20px, 3vw, 34px); }
.event-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 44px; align-items: start; }
.event-hero h1 { margin: 12px 0 0; font-size: clamp(1.9rem, 5vw, 3.1rem); }
.event-host { color: var(--muted); font-size: 1.0625rem; margin-top: 6px; }
.event-hero .lead { font-size: 1.1875rem; color: var(--ink); margin: 18px 0 26px; max-width: 52ch; }

/* Label above value, and each pair in ONE grid cell. Putting the dt and dd straight into the grid
   makes them separate items, so a three-column layout put "Where" in the last cell of one row and
   its answer in the first cell of the next. The wrapping div is what keeps a pair together. */
.event-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px 28px; margin: 0 0 30px; }
.event-facts > div { min-width: 0; }
.event-facts dt { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--on-peach); }
.event-facts dd { margin: 4px 0 0; color: var(--ink); }

.qr-card {
  background: var(--surface); border-radius: var(--r-card);
  padding: 30px; box-shadow: var(--shadow-l); text-align: center;
  position: sticky; top: 88px;
}
.qr-card h2 { font-size: 1.25rem; }
.qr-card > p { color: var(--muted); font-size: .95rem; margin-top: 6px; }
.qr-card img {
  display: block; width: 100%; max-width: 280px; height: auto; margin: 18px auto 12px;
  border-radius: var(--r-input); background: #fff;
}
.qr-url { font-size: .75rem; font-weight: 600; color: var(--muted); word-break: break-all; }

/* The copy sits directly under the hero, so it takes the hero's bottom padding and adds none of
   its own at the top. Two full section paddings stacked left a screen of empty cream. */
.event-copy-section { padding-top: 0; padding-bottom: clamp(24px, 3vw, 40px); }
.event-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.event-copy { display: flex; flex-direction: column; gap: 16px; max-width: 62ch; }
.event-copy p { font-size: 1.0625rem; color: var(--muted); }
.event-highlights {
  list-style: none; margin: 0; padding: 24px; display: flex; flex-direction: column; gap: 12px;
  background: var(--peach); border-radius: var(--r-card); color: var(--ink); font-size: .9375rem;
}
.event-highlights li { display: flex; gap: 10px; align-items: flex-start; }
/* A drawn tick, not a glyph: the board's rule is feather-style line icons and no emoji or
   decorative characters inside chrome. Encoded as a background so the list stays one <li> deep. */
.event-highlights li::before {
  content: ""; flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px;
  background: no-repeat center/20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b03d18' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.btn.is-disabled { opacity: .55; pointer-events: none; }

@media (max-width: 900px) {
  .event-hero-grid, .event-body { grid-template-columns: 1fr; gap: 30px; }
  /* Sticky is worth nothing in a single column and pins the card to the wrong place mid-scroll. */
  .qr-card { position: static; }
}

/* ── contact ──────────────────────────────────────────────────────────────── */

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }
.contact-list { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.contact-row { display: flex; gap: 14px; align-items: center; background: var(--surface); border: 2px solid var(--line); border-radius: var(--r-tile); padding: 16px 18px; text-decoration: none; color: inherit; }
.contact-row .ico { width: 48px; height: 48px; border-radius: 16px; background: var(--peach); color: var(--on-peach); display: grid; place-items: center; flex: 0 0 auto; }
.contact-row small { display: block; color: var(--muted); font-size: .8125rem; font-weight: 700; }
.contact-row strong { font-weight: 700; }
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } }

/* ── forms ────────────────────────────────────────────────────────────────── */

/* Board: height 50-54px, radius 13-16px, 2px border, cream fill. Label Nunito 700 - 13px.
   Default border #efe8e0, active #ffd9c9, placeholder #b0a8bc. */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.field label { font-weight: 700; font-size: .8125rem; color: var(--muted); }
.field input, .field textarea {
  -webkit-appearance: none; appearance: none;
  -webkit-text-fill-color: var(--ink);
  font: inherit; font-weight: 600;
  font-size: 16px;                          /* under 16px iOS zooms the page on focus */
  padding: 13px 15px; min-height: 52px;
  border: 2px solid var(--line); border-radius: 14px;
  background: var(--paper); color: var(--ink);
}
.field input::placeholder, .field textarea::placeholder { color: var(--placeholder); font-weight: 600; }
.field input:focus, .field textarea:focus { border-color: var(--line-active); }
.field textarea { min-height: 120px; resize: vertical; }
.field abbr { color: var(--coral); text-decoration: none; }
.error { color: #c62828; font-size: .8125rem; font-weight: 700; min-height: 1em; margin: 0; }
.error:empty { min-height: 0; }

/* Board: 24px, radius 8px, coral fill with a white tick when checked; unchecked is a 2px #efe8e0
   outline on white. `accent-color` cannot give a rounded box or that tick, so the control is drawn
   here - keeping the real <input> so the label, focus ring and keyboard behaviour are the browser's
   and not a reimplementation. */
.consent { display: flex; gap: 11px; align-items: flex-start; font-size: .8125rem; line-height: 1.5; font-weight: 600; color: var(--muted); margin: 6px 0 12px; }
.consent input {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; margin: 1px 0 0; flex: 0 0 auto; cursor: pointer;
  border: 2px solid var(--line); border-radius: 8px; background: var(--surface);
}
.consent input:checked {
  background: var(--coral) no-repeat center/14px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  border-color: var(--coral);
}
.fine { font-size: .8125rem; color: var(--muted); margin-top: 14px; }

/* ── notices ──────────────────────────────────────────────────────────────── */

.notice { background: var(--peach); border: 2px solid var(--line-active); color: var(--on-peach); border-radius: var(--r-input); padding: 13px 16px; font-size: .9375rem; font-weight: 600; margin: 0 0 14px; }
.notice-info { background: var(--sky-tint); border-color: #bcdcff; color: var(--on-sky); }
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 70;
  background: var(--ink); color: #fff; padding: 13px 18px; border-radius: var(--pill);
  font-size: .9375rem; font-weight: 600; max-width: 90vw; box-shadow: var(--shadow-l);
}

/* ── unavailable ──────────────────────────────────────────────────────────── */

.state { text-align: center; padding: clamp(46px, 10vw, 96px) 0; max-width: 34rem; margin-inline: auto; }
.state .mark { display: grid; place-items: center; width: 88px; height: 88px; margin: 0 auto 18px; border-radius: var(--r-tile); background: var(--peach); color: var(--on-peach); }
.state p { color: var(--muted); margin: 14px 0 26px; }
.state .btn { margin: 4px; }

/* No dark-mode variant, deliberately. This is used by strangers on phones nobody controls, and
   following each device's theme made form fields render black on an iPhone while an Android beside
   it looked entirely different. One light theme, stated explicitly, is worth more than adapting. */