/* ─────────────────────────────────────────────────────────────
   WearTags shared stylesheet.

   Shared by every marketing page (4a home, 4b how-it-works,
   4c privacy, 4d compare). The finder page does NOT link this file:
   it ships its own inlined CSS so it loads in one request with no
   external dependency. See docs/SITE_AND_FINDER_SPEC.md §7.1.

   Tokens are from design/design_handoff_weartags_site/README.md.
   Two groups, both authoritative: base neutrals carry structure,
   WearTags accents carry the new page elements.
   ───────────────────────────────────────────────────────────── */

/* ── Type ───────────────────────────────────────────────────
   Self-hosted, latin subset, variable. These are the only files
   the site loads from anywhere, and `font-src 'self'` in _headers
   exists solely for them: the CSP is `default-src 'none'`, so
   without that line these fail silently to fallback type. */
@font-face{
  font-family:'Inter';
  src:url('/fonts/inter-var.woff2') format('woff2-variations');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Inter Tight';
  src:url('/fonts/inter-tight-var.woff2') format('woff2-variations');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  /* Base neutrals */
  --ink:#12263F;
  --paper:#FFFFFF;
  --panel:#EFF4FA;
  --tint:#EAF2FD;
  --card:#FFFFFF;
  --rule:#0B63CE;
  --rule-hover:#094FA6;
  --body:#4A5568;
  --meta:#647085;
  --border:#DCE4EE;
  --border-mid:#C3D8EF;

  /* WearTags accents */
  --wt-find:#2563eb;
  --wt-identify:#1a4fa3;
  --wt-notify:#0d2b6b;
  --wt-band-end:#1a3f8f;
  --wt-footer:#05152e;
  --wt-respond:#f59e0b;
  --wt-document:#fbbf24;
  --wt-amber-text:#b45309;
  --wt-amber-deep:#92400e;
  --surface-inset:#eff6ff;
  --surface-subtle:#f8fafc;
  --navy-100:#dbeafe;
  --navy-400:#60a5fa;
  --border-default:#e2e8f0;
  --border-strong:#cbd5e1;
  --text-muted:#64748b;
  --text-body:#334155;

  /* Stage colours used by the hero diagram's inline styles. */
  --find:var(--wt-find);
  --identify:var(--wt-identify);
  --notify:var(--wt-notify);
  --respond:var(--wt-respond);
  --document:var(--wt-amber-text);

  /* Shape and spacing */
  --radius:6px;
  --radius-card:10px;
  /* 1240, not the handoff's 1080. The wireframe was drawn on a ~920px
     canvas where 1080 read as near full-bleed; on a real 1280+ desktop
     it left the page floating in a narrow column. Owner's call, and
     their live judgement outranks the spec value. */
  --frame:1240px;
  --measure:38rem;
  --gutter:32px;
  /* Stage hues.
     The handoff palette is three blues plus two ambers, which gave the
     cards almost no variation: at a tint they read as one colour with a
     warm outlier. The owner asked repeatedly for more colour, warmer and
     happier, so the five stages now span the wheel. Mid-tone rather than
     neon, so a 26% tint is cheerful and the ink stays readable.

     This is a deliberate departure from
     design/design_handoff_weartags_site/README.md, on the owner's
     instruction. The brand blue is untouched and still owns every button,
     link and focus ring, so the identity holds. */
  --h-sky:#0ea5e9;      --h-sky-ink:#0369a1;
  --h-teal:#14b8a6;     --h-teal-ink:#0f766e;
  --h-amber:#f59e0b;    --h-amber-ink:#b45309;
  --h-green:#22c55e;    --h-green-ink:#15803d;
  --h-violet:#8b5cf6;   --h-violet-ink:#6d28d9;

  /* Warm grounds. The slate neutrals read cold on a product sold to
     parents about their children, so the off-whites carry a little red
     and yellow instead of a little blue. */
  --warm-50:#fdfaf6;
  --warm-100:#faf4ec;
  --warm-line:#efe6da;

  /* A shadow scale rather than one value. Cards were flat because there
     was only ever one step available. */
  --shadow-sm:0 1px 2px rgba(18,38,63,.05),0 1px 3px rgba(18,38,63,.04);
  --shadow:0 1px 2px rgba(18,38,63,.05),0 6px 16px rgba(18,38,63,.06);
  --shadow-md:0 2px 4px rgba(18,38,63,.06),0 10px 26px rgba(18,38,63,.09);
  --shadow-lg:0 4px 8px rgba(18,38,63,.07),0 18px 44px rgba(18,38,63,.12);

  /* One vertical rhythm value. 104 each side meant 208px between two
     adjacent sections, which is what made the pages feel loose. */
  --section-y:clamp(56px,6.5vw,84px);

  --sans:'Inter',system-ui,'Segoe UI',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --display:'Inter Tight','Inter',system-ui,'Segoe UI',-apple-system,sans-serif;
}

/* Dark counterparts. Every token above has one, deliberately:
   the spec calls this out as the thing most likely to be forgotten. */
@media (prefers-color-scheme:dark){
  :root{
    --ink:#EAF1FA;
    --paper:#0D1725;
    --panel:#141F30;
    --tint:#152234;
    --card:#131E2E;
    --rule:#6BA9F0;
    --rule-hover:#93C2F7;
    --body:#AFBFD2;
    --meta:#8394A8;
    --border:#22344B;
    --border-mid:#2C4564;

    --wt-find:#60a5fa;
    --wt-identify:#7fb3f5;
    --wt-notify:#3b6fd4;
    --wt-band-end:#1a3f8f;
    --wt-footer:#04101f;
    --wt-respond:#fbbf24;
    --wt-document:#fcd34d;
    --wt-amber-text:#f0b849;
    --wt-amber-deep:#fcd34d;
    --surface-inset:#16233a;
    --surface-subtle:#111c2c;
    --navy-100:#dbeafe;
    --navy-400:#60a5fa;
    --border-default:#22344B;
    --border-strong:#2C4564;
    --text-muted:#8394A8;
    --text-body:#AFBFD2;

    --h-sky-ink:#7dd3fc;
    --h-teal-ink:#5eead4;
    --h-amber-ink:#fcd34d;
    --h-green-ink:#6ee7b7;
    --h-violet-ink:#c4b5fd;

    --warm-50:#141210;
    --warm-100:#1a1614;
    --warm-line:#2b2420;
    --shadow-sm:0 1px 2px rgba(0,0,0,.3);
    --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 16px rgba(0,0,0,.22);
    --shadow-md:0 2px 4px rgba(0,0,0,.3),0 10px 26px rgba(0,0,0,.28);
    --shadow-lg:0 4px 8px rgba(0,0,0,.32),0 18px 44px rgba(0,0,0,.34);
  }
}

/* ── Base ───────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:78px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--paper);
  color:var(--body);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* Horizontal movement is not possible on this site, by construction.
     `clip` rather than `hidden`: hidden makes body a scroll container
     and breaks the sticky header. */
  overflow-x:clip;
  overscroll-behavior-x:none;
}
.frame{max-width:var(--frame);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:var(--measure)}
.center{text-align:center}
.center .narrow{margin-left:auto;margin-right:auto}
@media (max-width:640px){:root{--gutter:20px}body{font-size:16.5px}}

h1,h2,h3{font-family:var(--display);color:var(--ink);margin:0;line-height:1.15;letter-spacing:-.02em}
h1{font-size:clamp(32px,5.6vw,54px);font-weight:660;text-wrap:balance}
h2{font-size:clamp(26px,3.6vw,38px);font-weight:650;text-wrap:balance}
h3{font-size:18px;font-weight:640;letter-spacing:-.008em;line-height:1.35}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
a{color:var(--rule);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{color:var(--rule-hover)}
:focus-visible{outline:2px solid var(--rule);outline-offset:3px;border-radius:3px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gutter);top:10px;z-index:60;background:var(--card);color:var(--ink);
  padding:10px 16px;border:1px solid var(--border-mid);border-radius:var(--radius)}

.eyebrow{display:inline-block;font-size:12px;font-weight:660;letter-spacing:.09em;
  text-transform:uppercase;color:var(--rule)}
.section{padding:var(--section-y) 0}
/* Pairs a heading section with the block that belongs to it, instead of
   the inline `style="padding-top:0"` this used to need in four places.

   NOT zero. Zero was the first attempt and it put a large bordered table
   38px under a pill on /compare, which read as no padding at all. Half
   the rhythm plus the head's own bottom padding gives ~80px, which is
   the same air a single section gets, while still reading as one unit
   rather than two. */
.section-flush{padding-top:calc(var(--section-y) * .5)}
.section-tight{padding-bottom:calc(var(--section-y) * .5)}
.section-tint{background:linear-gradient(180deg,var(--surface-subtle),var(--card))}
.section-warm{background:linear-gradient(180deg,var(--warm-100),var(--warm-50))}
.section-cream{background:var(--warm-50)}
.section-dark{background:linear-gradient(165deg,var(--wt-footer),var(--wt-notify));color:var(--navy-100)}
.section-dark h2{color:#fff}
.section-dark .eyebrow{color:var(--wt-document)}
.section-dark .section-lead{color:var(--navy-100)}
.section+.section{border-top:1px solid var(--border)}
.section-lead{margin-top:18px;font-size:clamp(17px,1.9vw,19px);max-width:var(--measure)}

/* ── Header ─────────────────────────────────────────────────
   Solid. No backdrop-filter: removed from this codebase after iOS
   Safari repaint artifacts during momentum scroll. Do not reinstate. */
.site-head{position:sticky;top:0;z-index:40;background:var(--paper);
  border-bottom:1px solid var(--border)}
.site-head .frame{display:flex;align-items:center;justify-content:space-between;gap:16px;height:62px}
.wordmark{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);
  font-weight:660;font-size:17px;color:var(--ink);text-decoration:none;letter-spacing:-.015em}
.glyph{width:26px;height:26px;border-radius:7px;background:var(--rule);
  display:grid;place-items:center;flex:0 0 auto}
.head-nav{display:flex;align-items:center;gap:26px}
.head-nav a{color:var(--body);text-decoration:none;font-size:15px;font-weight:520}
.head-nav a:hover{color:var(--ink)}
.head-nav a[aria-current=page]{color:var(--ink);font-weight:600}
/* `.head-nav a` is 0,1,1 and `.btn-primary` is 0,1,0, so without this the
   nav link color wins and the CTA renders as slate on blue. */
.head-nav a.btn-primary,.head-nav a.btn-primary:hover{color:#fff}
/* Links hide below 760px. The button never hides. */
@media (max-width:760px){.head-nav a.hide-sm{display:none}}

/* ── Buttons ────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:var(--radius);font-size:15.5px;font-weight:600;
  font-family:inherit;text-decoration:none;border:1px solid transparent;cursor:pointer;
  min-height:44px;transition:background .15s,border-color .15s,color .15s}
.btn-primary{background:var(--wt-identify);color:#fff;border-color:var(--wt-identify)}
.btn-primary:hover{background:var(--wt-notify);border-color:var(--wt-notify);color:#fff}
.btn-secondary{background:var(--card);color:var(--ink);border-color:var(--border-strong)}
.btn-secondary:hover{border-color:var(--rule);color:var(--rule)}
.btn-sm{padding:8px 15px;min-height:38px;font-size:14.5px}

.status-pill{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;
  border-radius:999px;background:var(--tint);border:1px solid var(--border-mid);
  font-size:12px;font-weight:660;letter-spacing:.09em;text-transform:uppercase;color:var(--rule)}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--rule);flex:0 0 auto}

/* ── Hero ─────────────────────────────────────────────────────
   Two columns, carried over from the production page at the owner's
   request. The right column is the conceptual system diagram, which is
   real artwork that already exists, so this hero has no empty slot. */
.hero{padding:clamp(52px,7vw,88px) 0 clamp(56px,7vw,92px)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,5vw,64px);align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:40px}}
.hero h1{margin:16px 0 20px}
.hero .sub{font-size:clamp(18px,2.1vw,20px);color:var(--body);max-width:34rem;line-height:1.5}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

.diagram{background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-card);padding:26px;box-shadow:var(--shadow)}
.diagram svg{display:block;width:100%;height:auto}
.diagram figcaption{margin-top:14px;font-size:13px;color:var(--meta);text-align:center}

/* Illustration slot. Intentionally empty: real artwork does not exist
   and the handoff is explicit that a placeholder drawn here would have
   to be removed later. The box reserves the space. */
/* Reserved slot for artwork that does not exist yet. Kept for future use. */
.slot{border:1px dashed var(--border-mid);background:var(--tint);border-radius:var(--radius-card);
  display:grid;place-items:center;color:var(--rule);font-size:12.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase}

/* Door icons.
   The handoff says not to draw icons by hand and to ship the slots empty.
   The owner overrode that on 2026-09-07: square badges with real icons.
   Square rather than the wireframe's wide bar, also their call.
   Colour comes from the door via `currentColor`, so each badge tints
   itself and there is no per-icon colour to keep in sync. */
.door-icon{width:64px;height:64px;border-radius:16px;display:grid;place-items:center;
  margin-bottom:16px;
  /* Icon keeps its own colour, owner's call. So the badge carries the
     weight instead: a stronger tint than a wash, plus a hairline of the
     same colour to give the square an edge. */
  background:color-mix(in srgb,currentColor 15%,transparent);
  border:1px solid color-mix(in srgb,currentColor 26%,transparent)}
.door-icon svg{display:block}

/* ── Trust band ─────────────────────────────────────────────── */
.trust{background:linear-gradient(135deg,var(--wt-notify),var(--wt-band-end));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 30px rgba(13,43,107,.18)}
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);max-width:var(--frame);margin:0 auto}
.trust-cell{padding:24px var(--gutter)}
.trust-cell+.trust-cell{border-left:1px solid rgba(255,255,255,.2)}
.trust-label{display:block;color:var(--wt-document);font-size:9.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;margin-bottom:8px}
.trust-line{color:#fff;font-size:18px;font-weight:640;font-family:var(--display);line-height:1.3}
@media (max-width:620px){
  .trust-grid{grid-template-columns:1fr}
  .trust-cell+.trust-cell{border-left:0;border-top:1px solid rgba(255,255,255,.2)}
}

/* ── Cards and grids ────────────────────────────────────────── */
.cards{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.grid-4{grid-template-columns:repeat(2,1fr)}}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-card);
  padding:24px 22px;box-shadow:var(--shadow-sm)}
/* 46px vertical, not 26. The row layout is only as tall as the 64px badge,
   which left the card at 579x121 (4.8:1) and reading as a thin bar. This
   takes it to 579x160, 3.6:1: still a wide rectangle, no longer a strip.
   Owner's call on the ratio. */
/* 30px all round. With the icon stacked above the text this lands the
   card near square rather than the wide bar it was. */
.cards .door{padding:30px 26px}
@media (max-width:620px){.cards .door{padding:26px 22px}}
.card h3{margin-bottom:8px}
.card p{font-size:15.5px;line-height:1.6;margin:0}

/* Doors.
   These read as a compliance table in their first form: white card, grey
   hairline, dark text. WearTags is meant to sit in the WearableDocs family
   with more energy, so the colour does the work here rather than sitting
   in a 4px strip at the top.

   Each card tints itself from its own accent through `currentColor`, so
   there is one rule, not four, and changing an accent moves the card, the
   badge, the border and the link together. */
.door{display:flex;flex-direction:column;align-items:flex-start;gap:16px;
  text-decoration:none;
  border-radius:20px;
  /* 22%, not 9%. At 9% the two dark navy accents mixed to slate and the
     row read as four shades of grey. Tint strength is what makes this a
     colour, not an accent. */
  background:
    linear-gradient(160deg,
      color-mix(in srgb,var(--tone) 26%,var(--card)),
      color-mix(in srgb,var(--tone) 10%,var(--card)));
  border:1px solid color-mix(in srgb,var(--tone) 38%,transparent);
  box-shadow:0 1px 2px color-mix(in srgb,var(--tone) 18%,transparent);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.door:hover{transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--tone) 62%,transparent);
  box-shadow:0 12px 30px color-mix(in srgb,var(--tone) 34%,transparent)}

/* Circle, not a rounded square. Softer, and it stops the badge reading as
   another box inside a box. */
.door .door-icon{margin-bottom:0;flex:0 0 auto;width:66px;height:66px;
  border-radius:50%;border:0;
  background:color-mix(in srgb,var(--tone) 34%,var(--card));
  transition:transform .18s ease}
.door:hover .door-icon{transform:scale(1.06) rotate(-3deg)}

.door-text{min-width:0}
.door h3{color:var(--ink);font-size:19px}

/* The link takes the accent instead of grey, and the arrow moves. */
/* `inline`, not `inline-flex`. As a flex box the label and the arrow were
   separate children, so a two-line label left the arrow stranded on the
   right, vertically centred against both lines. Inline keeps the arrow in
   the text flow, so it follows the last word wherever that lands. */
.door .go{display:inline;margin-top:6px;font-size:15px;font-weight:560;color:currentColor}
/* `inline`, and animated with margin rather than transform.
   As an inline-block the arrow was an ATOMIC INLINE, which creates a line
   break opportunity on both sides of the box no matter what whitespace
   sits next to it. Two attempts to bind it with   failed for that
   reason: door 3's label wraps to two lines and the arrow kept landing
   alone on the second. A plain inline has no such break opportunity, so
   the   in the markup now actually holds it to the last word.
   Transform does not apply to non-replaced inlines, so the hover nudge is
   a margin instead. */
.door .arw{display:inline;margin-left:0;transition:margin-left .18s ease}
.door:hover .arw{margin-left:5px}
/* Below 620px the grid is already one column, so a row still reads well
   and keeps each card compact rather than tall. */
/* `--tone` tints the card; `color` inks the icon and link. They differ
   on the dark accents on purpose: #1a4fa3 and #0d2b6b make a grey wash,
   so those two borrow a lighter blue to tint with and keep the dark
   value for the parts that have to stay readable. */
.door-1{--tone:var(--h-sky);color:var(--h-sky-ink)}
.door-2{--tone:var(--h-teal);color:var(--h-teal-ink)}
.door-3{--tone:var(--h-violet);color:var(--h-violet-ink)}
.door-4{--tone:var(--h-amber);color:var(--h-amber-ink)}

/* ── Signup ─────────────────────────────────────────────────── */
.signup{background:var(--panel);border-top:1px solid var(--border)}
.signup h2{margin-bottom:14px}
.signup .sub{color:var(--body);margin-bottom:28px}
.signup-form{max-width:var(--measure)}
.field-row{display:flex;gap:12px;flex-wrap:wrap}
input[type=email]{flex:1 1 240px;padding:12px 13px;font-size:16px;font-family:inherit;
  color:var(--ink);background:var(--paper);border:1px solid var(--border-strong);
  border-radius:var(--radius);min-height:46px}
input[type=email]:focus{outline:2px solid var(--rule);outline-offset:1px;border-color:var(--rule)}

/* Role pills: one tap, not a dropdown. Real radios, visually replaced,
   so the form works with JavaScript disabled. */
.roles{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.roles input{position:absolute;opacity:0;width:1px;height:1px}
.roles label{display:inline-block;padding:8px 14px;border-radius:999px;
  border:1px solid var(--border-strong);background:var(--card);color:var(--text-body);
  font-size:14px;cursor:pointer;min-height:38px;line-height:1.45}
.roles label:hover{border-color:var(--rule)}
.roles input:checked+label{background:var(--wt-identify);border-color:var(--wt-identify);color:#fff}
.roles input:focus-visible+label{outline:2px solid var(--rule);outline-offset:2px}
.caption{font-size:13.5px;color:var(--text-muted);margin-top:12px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{margin-top:14px;font-size:15px;padding:12px 14px;border-radius:var(--radius);display:none}
.form-msg.show{display:block}
.form-msg.ok{background:var(--surface-inset);color:var(--wt-identify);
  border:1px solid var(--border-mid)}
.form-msg.err{background:#fffbeb;color:var(--wt-amber-deep);border:1px solid #fcd34d}

/* ── Footer ─────────────────────────────────────────────────── */
.site-foot{background:var(--wt-footer);color:var(--navy-100);padding:40px 0 56px}
.foot-label{display:block;color:var(--wt-document);font-size:9.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;margin-bottom:14px}
.foot-links{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:20px}
.foot-links a{color:var(--navy-100);text-decoration:none;font-size:12.5px}
.foot-links a:hover{color:#fff;text-decoration:underline}
.foot-note{font-size:11px;color:var(--navy-400);max-width:60rem;margin:0}

/* ── Reveal on scroll ───────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ── Technology strip ────────────────────────────────────────
   The credibility half of the page. Dark ground, amber labels, one line
   per layer. This is where a reader decides whether we are a toy or a
   company that has thought about radios. */
.tech{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:38px}
@media (max-width:900px){.tech{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.tech{grid-template-columns:1fr}}
/* One line each now, so the card is a labelled row rather than a paragraph
   block. List markup, because that is what six parallel items are. */
.tech{list-style:none;padding:0}
.tech-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:14px;padding:20px 20px 18px;box-shadow:0 6px 18px rgba(0,0,0,.22)}
.tech-label{display:block;color:var(--wt-document);font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:7px}
.tech-line{display:block;color:#fff;font-family:var(--display);font-size:17px;
  font-weight:600;letter-spacing:-.01em;line-height:1.3}

.lead-strong{font-weight:600;color:#fff;margin-top:14px}
.tech-close{color:#fff;font-size:clamp(20px,2.4vw,26px);margin-top:34px;
  letter-spacing:-.015em}
.tech-note{margin-top:26px;font-size:14px;color:var(--navy-400);max-width:56rem}

/* ── Page heads ─────────────────────────────────────────────── */
.pagehead{padding-bottom:calc(var(--section-y) * .45)}
.pagehead h1{max-width:18ch}
.notepill{display:inline-block;margin-top:20px;padding:7px 14px;border-radius:999px;
  background:var(--surface-inset);border:1px solid var(--border-mid);
  font-size:13px;color:var(--wt-identify);font-weight:560}

/* ── 4b: the five-job strip ─────────────────────────────────
   Square cards, not the wide bars this was. Each is tinted in its own
   stage colour with a large number and an icon, so the strip reads as
   five things rather than one grey band. */
.jobstrip{list-style:none;padding:0;margin:0;display:grid;gap:14px;
  grid-template-columns:repeat(5,1fr)}
@media (max-width:1000px){.jobstrip{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.jobstrip{grid-template-columns:repeat(2,1fr)}}

.job-chip a{display:flex;flex-direction:column;justify-content:space-between;
  aspect-ratio:1/1;text-decoration:none;padding:20px 18px;border-radius:20px;
  min-width:0;
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--tone) 28%,var(--card)),
    color-mix(in srgb,var(--tone) 10%,var(--card)));
  border:1px solid color-mix(in srgb,var(--tone) 40%,transparent);
  box-shadow:0 1px 2px color-mix(in srgb,var(--tone) 18%,transparent);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.job-chip a:hover{transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--tone) 66%,transparent);
  box-shadow:0 12px 30px color-mix(in srgb,var(--tone) 34%,transparent)}
.job-chip a:hover .job-ico{transform:scale(1.08) rotate(-4deg)}

.job-num{display:block;font-family:var(--display);font-size:30px;font-weight:700;
  line-height:1;letter-spacing:-.03em;color:var(--ink-on-tone);
  /* .8, not .5. At half opacity the measured contrast against the card's
     own tint fell to roughly 2:1 on four of the five chips, which fails
     even the 3:1 large-text threshold these 30px numbers qualify for.
     They are the stage number, not a watermark. */
  opacity:.8}
.job-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:color-mix(in srgb,var(--card) 72%,transparent);
  color:var(--ink-on-tone);margin:10px 0;transition:transform .18s ease}
.job-name{display:block;font-family:var(--display);font-size:19px;font-weight:660;
  color:var(--ink);letter-spacing:-.015em}

/* `--tone` tints the chip and draws the section's left edge.
   `--ink-on-tone` is the readable value for the number, icon and eyebrow.
   They differ because a tint needs a light colour and text needs a dark
   one: the dark navies mix to grey at 28%, and light amber is unreadable
   as ink. The dark Notify section sets its own ground explicitly and does
   not use --tone, so these can be light without affecting it.

   These were lost once when this block was rewritten, which left every
   chip with an invalid color-mix and therefore no background at all. */
.j-find{--tone:var(--h-sky);--ink-on-tone:var(--h-sky-ink)}
.j-identify{--tone:var(--h-teal);--ink-on-tone:var(--h-teal-ink)}
.j-notify{--tone:var(--h-amber);--ink-on-tone:var(--h-amber-ink)}
.j-respond{--tone:var(--h-green);--ink-on-tone:var(--h-green-ink)}
.j-document{--tone:var(--h-violet);--ink-on-tone:var(--h-violet-ink)}

/* ── 4b: one block per job ──────────────────────────────────── */
.job{border-top:0}
/* A distinct ground per job, so five blocks in a row have rhythm instead
   of reading as one wall. Notify goes dark: a strong beat in the middle
   breaks the page in half and the section is about alerts, which suits it. */
/* Scoped to `.job`, deliberately. The chips in the strip carry the same
   `.j-*` classes to pick up `--tone`, so an unscoped ground rule painted
   chip 03 navy and left its label as dark ink on a dark square. */
.job.j-find{background:var(--paper)}
.job.j-identify{background:linear-gradient(180deg,color-mix(in srgb,var(--h-teal) 9%,var(--card)),var(--card))}
/* Notify is a light amber wash, not the dark navy it was.
   Owner's rule, 2026-09-07: a dark blue ground must never sit in the
   middle of a page, and never inside a numbered sequence that explains a
   product or a workflow. It breaks reading. This block is step 03 of 05,
   so it was the worst possible place for it: a reader following the
   sequence hit a wall of reversed text and lost the thread. Dark grounds
   are fine near the bottom of a page, which is where the technology
   section sits. */
.job.j-notify{background:linear-gradient(180deg,
  color-mix(in srgb,var(--h-amber) 10%,var(--card)),var(--card))}
.job.j-respond{background:linear-gradient(180deg,color-mix(in srgb,var(--h-green) 9%,var(--card)),var(--card))}
.job.j-document{background:var(--warm-50)}
.job-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-on-tone);margin-bottom:14px}
.job-eyebrow::before{content:attr(data-n);display:grid;place-items:center;
  width:34px;height:34px;border-radius:50%;font-size:14px;letter-spacing:0;
  background:color-mix(in srgb,var(--tone) 20%,var(--card));
  border:1px solid color-mix(in srgb,var(--tone) 40%,transparent)}
/* Job 01 runs beside the system diagram. The rest are single column, which
   is the variety the page needed. */
.job-split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,52px);
  align-items:center}
@media (max-width:900px){.job-split{grid-template-columns:1fr;gap:32px}}
.job h2{margin-bottom:18px}
.job .narrow{font-size:17px}
.blind{margin-top:24px;padding:18px 20px;border-radius:var(--radius-card);
  background:var(--warm-50);border:1px solid var(--warm-line);
  box-shadow:var(--shadow-sm);
  font-size:15px;color:var(--text-body);max-width:var(--measure)}
.blind b{color:var(--ink)}

/* ── 4b: flow rows (shared with 4a's finder explanation) ────── */
.flow{display:grid;gap:0;border:1px solid var(--border);border-radius:var(--radius-card);
  overflow:hidden;background:var(--card);box-shadow:var(--shadow-md)}
.flow-row{display:grid;grid-template-columns:52px 1fr;gap:16px;padding:18px 20px;
  align-items:start}
.flow-row+.flow-row{border-top:1px solid var(--border)}
.flow-step{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  font-size:13px;font-weight:700;color:#fff;background:var(--wt-identify);margin-top:2px}
.flow-row h3{margin-bottom:4px}
.flow-row p{font-size:15.5px;margin:0}

/* ── CTA band ───────────────────────────────────────────────── */
.ctaband{background:linear-gradient(180deg,var(--warm-100),var(--warm-50));
  border-top:1px solid var(--warm-line)}
.ctaband .hero-cta{justify-content:flex-start}

/* ── 4d: comparison table ───────────────────────────────────── */
.cmp{width:100%;border-collapse:collapse;background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;
  font-size:15px;table-layout:fixed;box-shadow:var(--shadow-md)}
.cmp th,.cmp td{padding:14px 12px;text-align:left;border-bottom:1px solid var(--border)}
.cmp thead th{background:var(--panel);font-size:12.5px;font-weight:700;color:var(--ink);
  letter-spacing:.03em}
.cmp tbody th{font-weight:600;color:var(--ink);width:24%}
.cmp td{text-align:center}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}
/* Our column, on every row including the header. */
.cmp .us{background:var(--surface-inset)}
.cmp thead .us{color:var(--wt-identify)}
.cmp td.us{color:var(--wt-identify);font-weight:600}
.yes{color:var(--wt-identify);font-weight:700}
.lim{color:var(--text-muted);font-weight:700}
.no{color:var(--border-strong);font-weight:700}
.des{color:var(--wt-identify);font-weight:700}
.legend{margin-top:20px;font-size:14px;color:var(--text-muted);display:flex;
  flex-wrap:wrap;gap:6px 18px;align-items:center}
.legend span{margin-right:4px}

/* Below 720px the table becomes one card per capability. Deliberately not a
   horizontal scroll: a nested scroll region here made the page feel like it
   drifted sideways under a thumb. */
@media (max-width:719px){
  .cmp{display:block;border:0;background:transparent;table-layout:auto}
  .cmp thead{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .cmp tbody{display:block}
  .cmp tbody tr{display:block;background:var(--card);border:1px solid var(--border);
    border-radius:var(--radius-card);padding:16px 16px 8px;margin-bottom:12px}
  .cmp tbody th{display:block;width:auto;padding:0 0 10px;margin-bottom:10px;
    border-bottom:1px solid var(--border);font-size:16px}
  .cmp tbody td{display:flex;justify-content:space-between;align-items:center;
    padding:7px 0;border-bottom:0;text-align:right}
  .cmp tbody td::before{content:attr(data-col);color:var(--text-muted);
    font-size:13.5px;font-weight:600}
  .cmp tbody td.us{background:var(--surface-inset);margin:6px -8px 0;
    padding:10px 8px;border-radius:var(--radius)}
}

/* ── 4d: the honest part. Load-bearing for trust. ───────────── */
.honest{border-left:4px solid var(--wt-respond);
  background:linear-gradient(180deg,var(--warm-100),var(--warm-50));
  border:1px solid var(--warm-line);border-left:4px solid var(--wt-respond);
  border-radius:var(--radius-card);padding:30px 32px;max-width:56rem;
  box-shadow:var(--shadow-md)}
.honest h2{font-size:clamp(22px,2.6vw,28px);margin-bottom:16px}
.honest p{font-size:16.5px}
.honest .caption{margin-top:16px;font-size:14px;color:var(--text-muted)}

/* ── Centred reading column ─────────────────────────────────
   The 1240 frame is right for grids and bands, and wrong for prose: a
   600px paragraph inside it sits hard against the left edge with 600px
   of nothing beside it, which reads as the page having drifted. Text
   sections use a narrower frame that is itself centred, so the column
   sits in the middle of the screen and the text stays left-aligned
   inside it. */
/* 1000, not 880. Every section on an interior page uses this one column,
   so the whole page shares a single left edge. It was 880 while tables and
   grids sat in the 1240 frame, which put every heading 180px to the right
   of the block it introduced: measured, not guessed. Prose is still capped
   narrower inside here by .narrow and .section-lead, so widening the
   column does not widen the reading measure. */
.frame-text{max-width:1000px;margin:0 auto;padding:0 var(--gutter)}
.frame-text .section-lead,
.frame-text .narrow,
.frame-text .blind,
.frame-text .honest,
.frame-text .flow{max-width:none}

/* The job blocks keep their accent edge, now on the centred column. */
.job .frame-text{border-left:4px solid var(--tone);padding-left:calc(var(--gutter) - 4px)}
.job .frame-wide{max-width:var(--frame);margin:0 auto;padding:0 var(--gutter)}

/* ── Scroll reveal, extended ────────────────────────────────
   Same mechanism as the home page: position measured on a passive
   scroll listener, with a 1.5s backstop so nothing can stay invisible.
   Sections use a slightly longer travel than cards so the page feels
   like it is assembling rather than flickering. */
.reveal-up{opacity:0;transform:translateY(22px);
  transition:opacity .55s ease,transform .55s ease}
.reveal-up.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal-up{opacity:1;transform:none;transition:none}
}

/* ── Mobile menu ────────────────────────────────────────────
   `<details>`, so the menu opens with no JavaScript. app.js is not
   load-bearing anywhere on this site and the nav is not going to be the
   first exception. */
.navmenu{display:none;position:relative}
.navmenu>summary{list-style:none;cursor:pointer;display:grid;place-items:center;
  width:44px;height:44px;margin-right:-8px;border-radius:var(--radius)}
.navmenu>summary::-webkit-details-marker{display:none}
.navmenu>summary:focus-visible{outline:2px solid var(--rule);outline-offset:2px}

/* Three bars that become a cross when open. */
.bars{position:relative;width:20px;height:14px}
.bars::before,.bars::after{content:"";position:absolute;left:0;right:0;height:2px;
  border-radius:2px;background:var(--ink);transition:transform .18s ease,top .18s ease,bottom .18s ease}
.bars::before{top:0;box-shadow:0 6px 0 var(--ink)}
.bars::after{bottom:0}
.navmenu[open] .bars::before{top:6px;transform:rotate(45deg);box-shadow:none}
.navmenu[open] .bars::after{bottom:6px;transform:rotate(-45deg)}

.navpanel{position:absolute;right:0;top:calc(100% + 10px);z-index:50;
  min-width:min(74vw,260px);background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-card);box-shadow:0 12px 34px rgba(18,38,63,.16);
  padding:8px;display:grid}
.navpanel a{display:block;padding:13px 14px;border-radius:var(--radius);
  color:var(--body);text-decoration:none;font-size:16px;font-weight:520}
.navpanel a:hover{background:var(--panel);color:var(--ink)}
.navpanel a[aria-current=page]{color:var(--wt-identify);font-weight:640;
  background:var(--surface-inset)}

/* Below 760px the inline links go and the hamburger arrives. The Join
   button never hides, per the handoff. */
@media (max-width:760px){
  .navmenu{display:block}
  .head-nav{gap:10px}
}

/* ── 4c: toggles and live preview ───────────────────────────── */
.privgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
@media (max-width:900px){
  /* Preview first on narrow screens: it is the argument, the controls
     are the mechanism. */
  .privgrid{grid-template-columns:1fr}
  .privpreview{order:-1}
}
.priv-group{display:block;font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:10px}
.privcard{padding:28px 26px;box-shadow:var(--shadow-md)}
.priv-row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 0;border-bottom:1px solid var(--border);font-size:16px;color:var(--ink);
  cursor:pointer}
.priv-row:last-of-type{border-bottom:0}
.priv-fixed{font-size:13px;color:var(--text-muted);font-weight:600}

/* Real checkbox, visually replaced. Keyboard and no-JS both keep working. */
.tog{position:absolute;opacity:0;width:1px;height:1px}
.pill{flex:0 0 auto;width:44px;height:24px;border-radius:999px;position:relative;
  border:1px solid var(--border-strong);background:var(--paper);transition:background .15s,border-color .15s}
.pill::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;
  border-radius:50%;background:var(--border-strong);transition:transform .15s,background .15s}
.tog:checked+.pill{background:var(--wt-identify);border-color:var(--wt-identify)}
.tog:checked+.pill::after{transform:translateX(20px);background:#fff}
.tog:focus-visible+.pill{outline:2px solid var(--rule);outline-offset:2px}

.priv-never{margin-top:22px;padding:14px 16px;border-radius:var(--radius);
  background:var(--surface-subtle);border:1px solid var(--border-default);
  font-size:14.5px;color:var(--text-body)}
.priv-never b{color:var(--ink)}

/* A phone shell, so the preview reads as a phone and not as more page. */
.phone{border:1px solid var(--border-strong);border-radius:22px;overflow:hidden;
  background:var(--paper);box-shadow:var(--shadow-lg);max-width:390px}
.phone-bar{background:var(--wt-footer);color:var(--navy-100);font-size:11.5px;
  padding:9px 14px;text-align:center}
.phone-screen{min-height:320px}
.privpreview .caption{margin-top:16px;max-width:390px}

/* ── The finder page itself. Shared by the preview and the real page. ── */
.fp-act{background:var(--surface-subtle);border-bottom:1px solid var(--border);padding:16px}
.fp-act-cap{font-size:14.5px;color:var(--text-muted);margin:0 0 10px}
.fp-call{display:block;width:100%;min-height:52px;border-radius:var(--radius-card);
  background:var(--wt-identify);color:#fff;text-decoration:none;font-size:16px;
  font-weight:660;text-align:center;line-height:52px}
.fp-call:hover{background:var(--wt-notify);color:#fff}
.fp-act-sub{font-size:12.5px;color:var(--text-muted);margin:10px 0 0}
.fp-body{padding:16px;display:grid;gap:12px}
.fp-id{display:flex;align-items:center;gap:14px}
.fp-photo{width:48px;height:48px;border-radius:50%;background:var(--tint);
  border:1px solid var(--border-mid);flex:0 0 auto}
.fp-name{font-family:var(--display);font-size:20px;font-weight:660;color:var(--ink);margin:0}
.fp-context{font-size:14.5px;color:var(--body);margin:2px 0 0}
.fp-card{border:1px solid var(--border);border-radius:var(--radius-card);padding:14px}
.fp-label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--wt-identify);margin-bottom:8px}
.fp-line{font-size:14.5px;color:var(--body);margin:0 0 4px}
.fp-share{display:block;text-align:center;font-size:14.5px;font-weight:560;
  color:var(--wt-identify);text-decoration:none;padding:12px;border-radius:var(--radius);
  border:1px solid var(--border-mid)}
.fp-pill{display:inline-block;font-size:12.5px;font-weight:600;color:var(--wt-identify);
  background:var(--surface-inset);border-radius:999px;padding:6px 12px;margin:0}
.fp-foot{font-size:12px;color:var(--text-muted);margin:4px 0 0;
  border-top:1px dashed var(--border);padding-top:12px}
.fp-quiet{padding:40px 20px;text-align:center}
.fp-quiet-h{font-family:var(--display);font-size:18px;font-weight:640;color:var(--ink);margin:0 0 8px}
.fp-quiet-p{font-size:14.5px;color:var(--text-muted);margin:0}

/* ── 4c: access record ──────────────────────────────────────── */
.acc{width:100%;border-collapse:collapse;margin-top:26px;background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;
  font-size:15px;box-shadow:var(--shadow-md)}
.acc th,.acc td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--border)}
.acc thead th{background:var(--surface-subtle);font-size:12.5px;font-weight:700;color:var(--ink)}
.acc tr:last-child td{border-bottom:0}
.ok-pill{display:inline-block;font-size:12.5px;font-weight:600;padding:4px 10px;
  border-radius:999px;background:var(--surface-inset);color:var(--wt-identify);
  border:1px solid var(--border-mid)}
.deny-pill{display:inline-block;font-size:12.5px;font-weight:600;padding:4px 10px;
  border-radius:999px;background:#fffbeb;color:var(--wt-amber-deep);border:1px solid #fcd34d}
@media (max-width:600px){
  .acc thead{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .acc,.acc tbody{display:block}
  .acc tbody tr{display:block;padding:14px;border-bottom:1px solid var(--border)}
  .acc tbody td{display:flex;justify-content:space-between;gap:12px;border-bottom:0;padding:5px 0}
  .acc tbody td[data-col]::before{content:attr(data-col);color:var(--text-muted);font-size:13px;font-weight:600}
}

/* ── 4c: timeline ───────────────────────────────────────────── */
.tl{margin-top:28px;border:1px solid var(--border);border-radius:var(--radius-card);
  background:var(--card);padding:clamp(22px,3vw,32px);box-shadow:var(--shadow-md)}
.tl-label{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text-muted);border:1px solid var(--border-strong);
  border-radius:999px;padding:4px 11px;margin-bottom:22px}
.tl-list{list-style:none;margin:0;padding:0;position:relative}
.tl-list::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:1px;background:var(--border)}
.tl-item{position:relative;padding:0 0 20px 34px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:2px;top:6px;width:11px;height:11px;
  border-radius:50%;background:var(--card);border:2px solid var(--border-strong)}
.tl-item.hit::before{border-color:var(--wt-identify);background:var(--wt-identify)}
.tl-time{display:block;font-size:12.5px;font-weight:700;letter-spacing:.05em;
  color:var(--text-muted);font-variant-numeric:tabular-nums}
.tl-text{color:var(--ink);font-size:15.5px;font-weight:520}
.tl-note{margin-top:20px;padding-top:16px;border-top:1px solid var(--border);
  font-size:13.5px;color:var(--text-muted)}

/* ── 4c: FAQ ────────────────────────────────────────────────── */
.faq{margin-top:28px;display:grid;gap:16px}
.faq-item{border-left:3px solid var(--border-mid);padding-left:18px}
.faq-item h3{margin-bottom:6px}
.faq-item p{font-size:16px;margin:0}

/* ── Glow ────────────────────────────────────────────────────
   Borrowed as a technique from launch-ui's `Glow` component (MIT), which
   layers two radial gradients behind a section. Their version is React
   plus Tailwind plus CVA; this is the same idea in CSS, on a pseudo
   element, with no markup and no dependency.

   It is doing real work rather than decoration: the dark sections were
   flat navy rectangles, and a light source behind the heading makes them
   read as lit space instead of a filled box. */
/* `overflow:clip` is load-bearing, not tidiness.
   The glows below are `width: min(1100px, 120%)` centred with a
   translate, so on a narrow screen they hang ~10% off each edge of their
   own section. That widened the document past the viewport, and on a
   phone the browser answers by widening the layout viewport itself, which
   is felt as the page drifting left and right under a thumb.
   Measured at 390: document 429 against a 390 viewport, which is exactly
   the 39px the hero glow hangs over. `body{overflow-x:clip}` did not
   catch it, because that value propagates to the viewport and leaves the
   body itself visible. Clip the glow where it is generated. */
.hero,.section-dark,.trust{position:relative;isolation:isolate;overflow:clip}
.hero>*,.section-dark>*,.trust>*{position:relative;z-index:1}

.hero::before{
  content:"";position:absolute;left:50%;top:-120px;
  width:min(1100px,120%);height:520px;transform:translateX(-50%);
  background:
    radial-gradient(50% 50% at 50% 50%,color-mix(in srgb,var(--wt-find) 16%,transparent),transparent 62%),
    radial-gradient(40% 40% at 62% 40%,color-mix(in srgb,var(--wt-respond) 10%,transparent),transparent 60%);
  z-index:0;pointer-events:none;
}

.section-dark::before{
  content:"";position:absolute;left:50%;top:-160px;
  width:min(1000px,110%);height:560px;transform:translateX(-50%);
  background:
    radial-gradient(50% 50% at 50% 50%,rgba(96,165,250,.30),transparent 64%),
    radial-gradient(38% 38% at 66% 46%,rgba(251,191,36,.13),transparent 62%);
  z-index:0;pointer-events:none;
}

/* The trust band gets a narrower, warmer one so the three claims sit in
   light rather than on a slab. */
.trust::before{
  content:"";position:absolute;left:50%;top:-90px;
  width:min(760px,100%);height:300px;transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%,rgba(251,191,36,.16),transparent 66%);
  z-index:0;pointer-events:none;
}

@media (prefers-reduced-motion:reduce){
  /* Static anyway, but keep the hook here if it ever animates. */
}

/* ── FAQ accordion ──────────────────────────────────────────
   `<details>`/`<summary>`, so it opens with no JavaScript and arrives
   keyboard- and screen-reader-accessible without any ARIA of our own.

   The first item is `open` on purpose: a page of four closed rows gives a
   visitor nothing to read, and the shape of the answers is part of the
   argument this page is making. */
.faq{margin-top:28px;display:grid;gap:12px}
.faq-item{background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-card);box-shadow:var(--shadow-sm);
  border-left:3px solid var(--border-mid);overflow:hidden;padding:0}
.faq-item[open]{border-left-color:var(--wt-identify);box-shadow:var(--shadow-md)}

.faq-item>summary{display:flex;align-items:center;justify-content:space-between;
  gap:16px;cursor:pointer;list-style:none;padding:18px 20px;
  font-family:var(--display);font-size:17.5px;font-weight:640;color:var(--ink);
  letter-spacing:-.008em;line-height:1.35}
.faq-item>summary::-webkit-details-marker{display:none}
.faq-item>summary:hover{background:var(--surface-subtle)}
.faq-item>summary:focus-visible{outline:2px solid var(--rule);outline-offset:-2px}

/* A plus that becomes a minus. Two bars, one rotated away when open. */
.faq-mark{position:relative;flex:0 0 auto;width:16px;height:16px}
.faq-mark::before,.faq-mark::after{content:"";position:absolute;background:var(--wt-identify);
  border-radius:2px;transition:transform .18s ease,opacity .18s ease}
.faq-mark::before{top:7px;left:0;right:0;height:2px}
.faq-mark::after{left:7px;top:0;bottom:0;width:2px}
.faq-item[open] .faq-mark::after{transform:rotate(90deg);opacity:0}

.faq-a{padding:0 20px 20px}
.faq-a p{font-size:16px;margin:0;color:var(--body);max-width:56ch}

/* ── Container rails ────────────────────────────────────────
   Two dashed vertical rules marking the content column, fixed, running
   the full height of the viewport. Borrowed as an idea from launch-ui's
   `LayoutLines` (MIT); the implementation is ours.

   ## Why it is an overlay and not a backdrop
   Their version sits behind the page, which works because their sections
   are transparent. Ours are not: the page deliberately alternates white,
   warm cream and dark navy bands, and the owner asked for that variety.
   Fixed rules behind opaque grounds are simply invisible.

   So this paints ON TOP, at a low enough alpha that it reads as a
   technical overlay rather than a line through the text. One colour for
   both light and dark grounds: a mid slate at 24% is visible against
   white and against #05152e without needing two rules.

   `pointer-events:none` so it can never intercept a click, and it sits
   below the sticky header's z-index so the bar stays clean. */
body::before{
  content:"";
  position:fixed;top:0;bottom:0;left:0;right:0;
  max-width:var(--rail-w,1240px);
  margin-inline:auto;
  border-left:1px dashed rgba(148,163,184,.24);
  border-right:1px dashed rgba(148,163,184,.24);
  pointer-events:none;
  z-index:5;
}

/* The interior pages use the narrower column, so the rails follow it.
   `:has()` keeps this in CSS rather than needing a class on every page. */
body:has(.frame-text){--rail-w:1000px}

/* The rails are structure, not decoration, but they are still lines over
   text. Anyone who has asked for less motion has usually asked for less
   visual noise too. */
@media (prefers-reduced-motion:reduce){
  body::before{border-left-style:solid;border-right-style:solid;
    border-left-color:rgba(148,163,184,.14);border-right-color:rgba(148,163,184,.14)}
}

/* No rails on a phone: at 390px they would sit inside the 20px gutter,
   which reads as a broken border rather than a column marker. */
@media (max-width:760px){body::before{display:none}}

/* ── Signup: message box and Turnstile ─────────────────────── */
.signup-form .field{margin-bottom:18px}
.signup-form label{display:flex;align-items:baseline;gap:8px;font-size:14px;
  font-weight:620;color:var(--ink);margin-bottom:7px}
.signup-form .opt{font-weight:450;font-size:13px;color:var(--text-muted)}
.signup-form .field-row{margin-bottom:18px}
textarea{width:100%;padding:12px 13px;font-size:16px;font-family:inherit;line-height:1.55;
  color:var(--ink);background:var(--paper);border:1px solid var(--border-strong);
  border-radius:var(--radius);resize:vertical;min-height:96px}
textarea:focus{outline:2px solid var(--rule);outline-offset:1px;border-color:var(--rule)}
textarea::placeholder{color:var(--text-muted)}

/* Turnstile renders its own iframe; this just reserves the row so the
   button does not jump when the widget loads. */
.cf-turnstile{margin:0 0 18px;min-height:65px}

.signup-form button[type=submit]{width:100%}
@media (min-width:620px){.signup-form button[type=submit]{width:auto;min-width:200px}}

/* ── Compare: the WearTags column header ────────────────────
   Two lines, so "in development" sits under the name rather than beside
   it. The status has to be part of the column, not a footnote: the ◆ in
   every cell is a design goal, and a reader scanning the table must not
   be able to mistake it for a shipping feature. */
.cmp thead .us{padding-top:10px;padding-bottom:10px}
.us-name{display:block;font-size:13px;font-weight:700;color:var(--wt-identify)}
.us-status{display:block;margin-top:2px;font-size:10.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--wt-amber-ink)}

/* Row notes, for the two capabilities whose names do not explain
   themselves. Hidden from the mobile card layout, where the row header is
   already a full-width heading with room to breathe. */
.cmp-note{display:block;margin-top:3px;font-size:12.5px;font-weight:400;
  line-height:1.45;color:var(--text-muted)}

.legend{align-items:baseline}
.legend .des{color:var(--wt-identify)}

/* ── Pull quote ─────────────────────────────────────────────
   Restored 2026-09-07. This rule was lost in an earlier rewrite of a
   neighbouring block, which silently demoted every pull quote on the site
   to body text: two on the home page and the core line on /compare. It
   was invisible in the markup, because the class was still there.
   Second time a block rewrite has dropped a rule; both were caught by
   measuring computed styles rather than reading the CSS. */
.pull{font-size:clamp(20px,2.8vw,28px);line-height:1.35;font-weight:600;
  color:var(--ink);letter-spacing:-.015em;margin:0;text-wrap:balance;
  font-family:var(--display)}

/* ── Compare: the five questions ────────────────────────────
   The question labels are much longer than the stage names this component
   was built for ("Where is the child?" against "Find"), so the square
   aspect ratio produced five chips of unequal height. The questions get
   an even row instead: every anchor fills its grid cell, so all five
   match the tallest. */
.jobstrip .job-chip{display:flex}
.jobstrip .job-chip a{flex:1 1 auto}
#questions .job-chip a{aspect-ratio:auto;min-height:184px}


/* ── Chips: drop the square below the two-up breakpoint ─────
   `aspect-ratio: 1/1` sizes the box in whichever direction is not already
   determined. In a narrow grid column the content sets the height, so the
   ratio then forced an equal WIDTH: a chip needing 165px of height became
   165px wide, and two of those plus a gap do not fit in a 320px screen.
   The result was horizontal overflow, which on a phone is felt as drift.
   Square is a look, and it is not worth a broken page, so below 620px the
   chips size to their content instead. */
@media (max-width:620px){
  .jobstrip .job-chip a{aspect-ratio:auto;min-height:0}
  #questions .job-chip a{min-height:0}
}