/* ==========================================================================
   v2-app.css — V2 CUTOVER, WAVE 1: legal + company pages and the app surface
   --------------------------------------------------------------------------
   Loaded AFTER design-system.css and after each page's own sheet
   (styles.css / seo-pages.css / admin.css), so it composes the shared
   V2 FOUNDATION contract rather than restating it.

   Read public/design-system.css `V2 FOUNDATION` first. The ten rules live
   there; nothing below re-derives them. In particular:

     · No hand-picked muted colours and NO ALPHA FOR TEXT. Every dimmed
       foreground here is one of the measured --ds-dim-on-* solids.
     · Emerald and lime are GROUNDS. Their only legal foreground is ink.
       Cream is legal on --ds-green-deep only.
     · Border = interactive. A keyline appears on something you can operate.
     · 44px is a floor. Every tap-target rule here is kept at low specificity
       so a page asking for a bigger control still wins.
     · Logical properties only: /privacy, /terms and /refund ship in Arabic.

   Scope: this sheet only styles classes that begin `v2-`, plus a short,
   deliberately-listed set of production classes whose v1 values break one of
   the ten rules (each is annotated with the measurement that condemned it).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. TOKENS THIS WAVE ADDS
   --------------------------------------------------------------------------
   Three severity grounds and one hairline. Nothing else: severity is carried
   by the head bar's WEIGHT (how dark it is, how loudly it is announced), not
   by hue. There is no amber and no red in this file — the instinctive alarm
   colours are exactly what the design law forbids, and a hue that carries
   meaning alone excludes any reader who cannot separate it.
   -------------------------------------------------------------------------- */
:root {
  --v2-notice-bg: #dfe4e0;      /* ink on this measures 14.6:1 */
  --v2-notice-fg: var(--ds-ink);
  --v2-blocked-bg: var(--ds-green-deep);
  --v2-blocked-fg: var(--ds-cream);   /* 8.9:1 — the only legal cream ground */
  --v2-broken-bg: var(--ds-ink);
  --v2-broken-fg: var(--ds-cream);    /* 15.9:1 */
  --v2-rule: #d3d8d2;           /* a real hairline, not cream at 16% alpha */
  --v2-plate-bg: #ffffff;
  --v2-quiet-bg: #f2f3ef;
}

/* --------------------------------------------------------------------------
   1. THE FAILURE PLATE  (templates/stage-f-contract.html, adopted verbatim)
   --------------------------------------------------------------------------
   One component, two sizes, three severity levels. Six slots in a fixed
   order, five mandatory: head bar, title, lede, ledger, actions, note. A
   reader who has parsed one plate can find the money line in the next one
   without reading it — which is the whole reason the order never changes.
   -------------------------------------------------------------------------- */

/* The live region is rendered EMPTY on first paint, in the place the plate
   will appear. A region created at the moment of failure is not reliably
   announced; that silence was the single biggest defect in the v1 errors. */
.v2-live {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  min-height: 0;
}
.v2-live:empty {
  display: block;
  height: 0;
  overflow: hidden;
}

.v2-plate {
  margin-block: 18px 0;
  overflow: hidden;
  border: 1px solid var(--v2-rule);
  border-radius: var(--ds-radius-md);
  background: var(--v2-plate-bg);
  color: var(--ds-ink);
  box-shadow: var(--ds-lift-1);
}

.v2-plate-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  justify-content: space-between;
  margin: 0;
  padding: 11px clamp(14px, 3vw, 20px);
  font-family: var(--ds-font-ui);
  font-size: 14px;
}
.v2-plate-head b {
  font-weight: 700;
  letter-spacing: -0.005em;
}
/* The HTTP code is a debugging aid and is never the headline. */
.v2-plate-head code {
  font-family: var(--ds-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.v2-plate--notice .v2-plate-head { background: var(--v2-notice-bg); color: var(--v2-notice-fg); }
.v2-plate--notice .v2-plate-head code { color: var(--ds-dim-on-light); }

.v2-plate--blocked .v2-plate-head { background: var(--v2-blocked-bg); color: var(--v2-blocked-fg); }
.v2-plate--blocked .v2-plate-head code { color: var(--ds-dim-on-deep); }

.v2-plate--broken .v2-plate-head { background: var(--v2-broken-bg); color: var(--v2-broken-fg); }
.v2-plate--broken .v2-plate-head code { color: var(--ds-dim-on-ink); }

/* Rule 6: deep green on either dark head is under 2:1. Anything focusable
   that lands on one takes the lime ring. (Registered for the shared list —
   see the cutover report.) */
.v2-plate--blocked .v2-plate-head :is(a, button, summary, [tabindex]):focus-visible,
.v2-plate--broken .v2-plate-head :is(a, button, summary, [tabindex]):focus-visible {
  outline: var(--ds-focus-width) solid var(--ds-focus-light);
  outline-offset: var(--ds-focus-offset);
}

.v2-plate-body {
  padding: clamp(16px, 3.4vw, 24px);
}

.v2-plate-title {
  margin: 0;
  color: var(--ds-ink);
  font-family: var(--ds-font-display);
  font-weight: 800;
  font-variation-settings: "wdth" 104, "wght" 800;
  font-size: clamp(1.24rem, 3.1vw, 1.62rem);
  line-height: 1.12;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.v2-plate-title:focus {
  outline: var(--ds-focus-width) solid var(--ds-focus);
  outline-offset: var(--ds-focus-offset);
}

.v2-plate-lede {
  margin: 10px 0 0;
  max-width: 62ch;
  color: var(--ds-ink);
  font-size: 15px;
  line-height: 1.6;
}

/* The ledger is REQUIRED, always, and the money leads it. "None" never
   travels alone: a bare "None" makes the reader ask "none of what?", and
   silence about money reads as a charge. */
.v2-ledger {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  margin: 16px 0 0;
  overflow: hidden;
  border: 1px solid var(--v2-rule);
  border-radius: var(--ds-radius-sm);
  background: var(--v2-rule);
}
.v2-ledger > div {
  display: grid;
  gap: 3px;
  padding: 11px 13px;
  background: var(--v2-quiet-bg);
}
.v2-ledger dt {
  margin: 0;
  color: var(--ds-dim-on-light);
  font-family: var(--ds-font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.v2-ledger dd {
  margin: 0;
  color: var(--ds-ink);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.v2-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 0;
}
/* Reuse, never restyle: .primary-action / .secondary-action already carry
   emerald + ink and a hover that lifts. These two only set the floor. */
.v2-actions > :is(a, button) {
  min-height: var(--ds-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.v2-linkaction {
  min-height: var(--ds-tap);
  display: inline-flex;
  align-items: center;
  color: var(--ds-green-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* One note, at the end, or none. A real date, never a countdown. */
.v2-note {
  margin: 14px 0 0;
  max-width: 62ch;
  color: var(--ds-dim-on-light);
  font-size: 13.5px;
  line-height: 1.55;
}

/* Full-page size: the plate becomes the document. */
.v2-plate--page {
  margin-block: 0;
}
.v2-plate--page .v2-plate-title {
  font-size: clamp(1.9rem, 6vw, 3.1rem);
  font-weight: 900;
  font-variation-settings: "wdth" 106, "wght" 900;
  letter-spacing: -0.038em;
}
.v2-plate--page .v2-plate-lede {
  font-size: 16.5px;
}

/* --------------------------------------------------------------------------
   2. LEGAL LONG-FORM: /privacy, /terms, /refund
   --------------------------------------------------------------------------
   The reader's job on these pages is to find ONE clause and understand it.
   Everything below serves that and nothing else:

     · A durable section rail, sticky on desktop, a compact chip list on a
       phone. v1 gave a 12-to-20 section document no navigation at all.
     · A permanent link on every heading — a quiet "#" that keeps a 44px
       target and is keyboard-reachable, with its keyline and the word "Link"
       arriving on hover and focus. Eleven boxed buttons down the margin
       competed with the prose they were meant to serve.
     · A version bar carrying the one date that governs, the contact, and the
       section count, above the first sentence rather than crowded into the
       head bar's baseline row.
     · Body copy at 16px. v1 set long-form legal text at 0.92rem (14.7px),
       which is the smallest type on the site on the page that is read the
       most carefully.
   -------------------------------------------------------------------------- */

/* v1: .pc-legal-body p/li at 0.92rem/1.6. Long-form legal reading, on a
   phone, in ten languages. 16px/1.72 with a 68ch measure. */
.v2-legal .pc-legal-body p,
.v2-legal .pc-legal-body li {
  max-width: 68ch;
  font-size: 1rem;
  line-height: 1.72;
}
.v2-legal .pc-legal-lede {
  max-width: 68ch;
  font-size: 1.08rem;
  line-height: 1.6;
}
.v2-legal .pc-legal-body ul {
  display: grid;
  gap: 8px;
  padding-inline-start: 22px;
}

/* Rule 7. v1 painted the head bar's metadata as cream at 55% and its link at
   80% alpha over ink; both are now the measured solids for that ground. */
.v2-legal .pc-legal-head .pc-mono { color: var(--ds-dim-on-ink); }
.v2-legal .pc-legal-head a { color: var(--ds-lime); }

/* The version bar. Real content, not chrome: the date that governs, who to
   write to, and how long the document is.

   Two fixes here.

   (a) THE PHANTOM CELL. The bar used to draw its hairlines with the
   gap-over-a-coloured-container trick (`gap: 1px` on a --v2-rule ground).
   That works only while the item count divides evenly into the column
   count: /terms has FOUR cells, so at three columns the unused fourth
   grid area painted the container ground and rendered as a grey rectangle
   that looks exactly like an empty, broken cell. The container ground is
   now the same quiet fill as the cells, and each cell paints its own
   hairline with an `outline` (which does not take part in layout, so the
   1px gap is still a single shared rule). Empty grid areas are now
   invisible, at every count and every width.

   (b) THE EMAIL. `overflow-wrap: anywhere` let support@instaseer.com break
   mid-domain as "support@instasee / r.com". Sensible break points only:
   the cell is wide enough for the address at every width it is used at,
   the address carries an explicit <wbr> before the "@", and the fallback
   is `break-word` (word boundaries first) rather than `anywhere`. */
.v2-legalbar {
  /* FLEX, not grid. A grid has fixed tracks, so a cell count that does not
     divide into them leaves a leftover area — which is what /terms (four
     cells, three tracks) painted as an empty grey rectangle. Flex items on
     the last row grow into whatever space is left, so there is no leftover
     area to paint, at any count and any width. */
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin: 0 0 22px;
  border: 1px solid var(--v2-rule);
  border-radius: var(--ds-radius-sm);
  background: var(--v2-quiet-bg);
}
.v2-legalbar > div {
  /* The 190px basis is a preference, not a floor: `min-width: 0` lets a
     320px page collapse the bar to one column instead of overflowing. */
  flex: 1 1 190px;
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 11px 13px;
  /* The hairline is drawn per cell as an outline (which takes no space), so
     the 1px gap between two neighbours reads as one shared rule. */
  outline: 1px solid var(--v2-rule);
  background: var(--v2-quiet-bg);
}
.v2-legalbar dt {
  margin: 0;
  color: var(--ds-dim-on-light);
  font-family: var(--ds-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.v2-legalbar dd {
  margin: 0;
  color: var(--ds-ink);
  font-size: 14.5px;
  font-weight: 600;
  /* Word boundaries first. `anywhere` is what produced the mid-domain break. */
  overflow-wrap: break-word;
  word-break: normal;
}
.v2-legalbar dd a {
  /* Rule 9: a standalone link in a metadata cell is a control, not a run of
     prose, so it gets a real target. It is a link, not a shout: a 1px rule
     at a 3px offset, not the 2px slab the rest of the sheet uses for
     buttons-that-are-links. */
  min-height: var(--ds-tap);
  display: inline-flex;
  align-items: center;
  color: var(--ds-green-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: break-word;
  word-break: normal;
}
.v2-legalbar dd a:hover {
  text-decoration-thickness: 2px;
}

/* Desktop: a two-column document. v1 capped the panel at 880px and the prose
   at 65ch inside it, which left a third of the panel empty on every desktop
   viewport; the rail now occupies that space with something useful. */
.v2-doclayout {
  display: grid;
  gap: 20px;
}

.v2-toc {
  align-self: start;
  padding: 14px 15px;
  border: 1px solid var(--v2-rule);
  border-radius: var(--ds-radius-md);
  background: var(--v2-quiet-bg);
}
.v2-legal .v2-toc h2,
.v2-toc h2 {
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  color: var(--ds-dim-on-light);
  font-family: var(--ds-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* A TABLE OF CONTENTS IS A LIST, AND IT HAS TO READ AS ONE.
   -----------------------------------------------------------------------
   What shipped: `grid-template-columns: repeat(auto-fill, minmax(104px, 1fr))`
   below 900px, so /terms rendered five ragged columns of twenty labels whose
   heights ranged from one line ("Refunds") to four ("Service Changes and
   Availability"). Every row was `align-items: center`, so each number floated
   to the vertical middle of whatever its neighbour's tallest label happened
   to be and the numeral column stopped being a column. The result was rubble,
   not navigation.

   The rebuild:
     · One column on a phone, two from 600px, one narrow rail from 900px.
       Never more than two, ever.
     · The numeral sits in a FIXED gutter and is top-aligned with a line-height
       matched to the label's, so its first baseline lands on the label's first
       baseline no matter how many lines the label runs to.
     · One row rhythm — the same 44px floor and the same 4px gap everywhere —
       so the list has a beat instead of an accident.
     · Numerals stay 1, 2, 3: they are authored in the markup, and nothing here
       generates or restyles them. */
.v2-toc ol {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.v2-toc li { margin: 0; }
.v2-toc a {
  display: grid;
  grid-template-columns: 1.9em minmax(0, 1fr);
  column-gap: 8px;
  /* Grid BASELINE alignment, not `start` and not `center`: the numeral is
     12px mono and the label is 13.5px sans, so matching the two line boxes
     still leaves the two baselines apart by the difference in font ascent.
     `baseline` aligns the numeral's baseline to the FIRST line of the label,
     whatever the label's height, which is the whole point of a gutter. */
  align-items: baseline;
  min-height: var(--ds-tap);
  padding: 9px 8px;
  border: 1px solid transparent;
  border-radius: var(--ds-radius-sm);
  color: var(--ds-ink);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  text-decoration: none;
}
.v2-toc a b {
  color: var(--ds-dim-on-light);
  font-family: var(--ds-font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  text-align: end;
}
.v2-toc a > span {
  min-width: 0;
  overflow-wrap: break-word;
}
/* Border = interactive, and it arrives when you reach for the control. */
.v2-toc a:hover {
  border-color: var(--ds-ink);
  background: #fff;
}
.v2-toc a:focus-visible {
  outline: var(--ds-focus-width) solid var(--ds-focus);
  outline-offset: var(--ds-focus-offset);
}

/* Below the rail breakpoint the list is bounded so it can never cost more
   than half a screen before the first sentence of the document. The 44px row
   is a floor and is NOT traded away to buy that space. */
@media (max-width: 899px) {
  .v2-toc {
    max-height: 46vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Two columns, and only two. Measured: /terms is twenty clauses, and one
   full-width row each puts 900px of navigation between the reader and the
   document. */
@media (min-width: 600px) and (max-width: 899px) {
  .v2-toc ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 10px;
  }
}

@media (min-width: 900px) {
  /* v1 capped the whole document at 880px and then capped the prose again at
     65ch inside it. With a rail in the layout the panel needs the rail's
     width back, or the measure ends up NARROWER than it was before. */
  .v2-legal.pc-legal { max-width: 1140px; }
  .v2-doclayout {
    grid-template-columns: minmax(0, 232px) minmax(0, 1fr);
    gap: 40px;
  }
  .v2-toc {
    position: sticky;
    /* Clears the sticky marketing header. */
    top: 96px;
    max-height: calc(100vh - 132px);
    overflow-y: auto;
  }
}

/* THE SECTION PERMALINK.
   -----------------------------------------------------------------------
   What shipped was a bordered pill containing a monospace "#" AND the word
   "LINK", both underlined, sitting inside the heading. Three problems:
   the hash and the word say the same thing twice; the keyline competes with
   the heading it is attached to (and "border = interactive" reads as a
   button, which this is not); and eleven of them down the margin shout over
   the prose they exist to serve.

   Now: one quiet glyph, no border, no monospace, no underline, riding the
   end of the heading's last line. The word "Link" stays in the accessible
   name (it is on the anchor's aria-label) and its visible twin is gone for
   good. It is a real link at a real 44px target, tab-reachable at every
   moment, and it takes a full deep-green focus ring — it is never
   hover-only, so a keyboard user is never hunting an invisible control. */
.v2-legal .pc-legal-body h2 {
  scroll-margin-top: 100px;
}
/* Qualified `.v2-legal a.v2-anchor` (0,2,1). styles.css carries
   `.legal-card a { color: var(--blue); text-decoration: underline;
   text-decoration-thickness: 2px }` at (0,1,1), which outranks a bare
   `.v2-anchor` (0,1,0) — measured on the rendered page, where the glyph came
   back deep green and underlined however the sheet was written. */
.v2-legal a.v2-anchor {
  vertical-align: baseline;
  margin-inline-start: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ds-tap);
  min-height: var(--ds-tap);
  border: 0;
  color: var(--ds-dim-on-light);
  font-family: var(--ds-font-ui);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  text-decoration: none;
}
/* The word never appears on screen. It is carried by the aria-label. */
.v2-anchor-word {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.v2-legal a.v2-anchor:hover,
.v2-legal a.v2-anchor:focus-visible {
  color: var(--ds-ink);
  text-decoration: none;
}
.v2-legal a.v2-anchor:focus-visible {
  outline: var(--ds-focus-width) solid var(--ds-focus);
  outline-offset: 0;
  border-radius: var(--ds-radius-sm);
}

/* D4: the "Filed" stamp. It is a rubber-stamp graphic that tells the reader
   nothing they need — the version bar directly beneath it already carries the
   date that governs, the contact, and the length. Cut from the three English
   templates; hidden here as well so a stray one cannot reappear. */
.v2-legal .pc-legal-stamp {
  display: none;
}

/* Rule 8: off-palette panels on the legal pages. v1 painted .legal-note as
   #134e4a on #f0fdfa behind a #16a085 rule — three colours, none of them in
   the kit — and .legal-card a as a bare colour with no keyline. */
.v2-legal .legal-note {
  border-inline-start: 4px solid var(--ds-green);
  border-left-width: 0;
  padding: 14px 16px;
  border-radius: var(--ds-radius-sm);
  background: var(--v2-quiet-bg);
  color: var(--ds-ink);
  font-weight: 600;
}
.v2-legal .legal-note { border-inline-start-width: 4px; }

/* --------------------------------------------------------------------------
   3. THE 404
   --------------------------------------------------------------------------
   A reader who lands here wants two things and nothing else: to be told that
   nothing broke, and to be put one click from the page they meant to open.

   What shipped instead: a grey status strip, a headline, a paragraph, a 2x2
   ledger grid whose FOURTH CELL WAS EMPTY (three facts, four grid areas — the
   phantom-cell bug again, and at 768px it was a plain grey rectangle in the
   middle of the page), two buttons wearing 4px hard-offset sticker shadows,
   a closing note that repeated the opening paragraph's last sentence
   verbatim, and only then the recovery links, behind a black bar.

   Cut, in order: the status strip (the h1 says it), the ledger (three cells
   to say "nothing happened" — now one line), the duplicated note, the sticker
   shadows, the ink bar, and the "common causes" bullet list (a reader who
   mistyped a URL does not need to be told they may have mistyped a URL). The
   one line that survived from it — write to support — is the closing sentence.

   Ground: main.page-main paints --paper (= --ds-cream, #f4f0e2). Every colour
   below is measured against cream, not against white.
   -------------------------------------------------------------------------- */
.v2-notfound {
  gap: clamp(26px, 5vw, 44px);
  /* The plate used to supply the inset. Without it the copy sat flush against
     the page shell at every width. Logical, because /404 is served in Arabic
     from the same sheet the day that tree moves to v2. */
  max-width: 1080px;
  margin-inline: auto;
  padding-block: clamp(28px, 6vw, 60px);
  padding-inline: clamp(18px, 4vw, 40px);
}

.v2-nf-hero {
  display: grid;
  justify-items: start;
  gap: 0;
}

/* The one diagnostic on the page, and it is the smallest thing on it. */
.v2-nf-code {
  margin: 0 0 12px;
  color: var(--ds-dim-on-light);   /* 6.65:1 on cream */
  font-family: var(--ds-font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.v2-nf-title {
  margin: 0;
  max-width: 18ch;
  color: var(--ds-ink);            /* 15.9:1 on cream */
  font-family: var(--ds-font-display);
  font-weight: 900;
  font-variation-settings: "wdth" 104, "wght" 900;
  font-size: clamp(2rem, 7vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.v2-nf-lede {
  margin: 14px 0 0;
  max-width: 56ch;
  color: var(--ds-ink);
  font-size: clamp(1rem, 2.6vw, 1.08rem);
  line-height: 1.62;
}

/* The three ledger cells, collapsed into the one sentence they were spending
   a grid to say. */
.v2-nf-calm {
  margin: 12px 0 0;
  max-width: 56ch;
  color: var(--ds-dim-on-light);
  font-size: 14.5px;
  line-height: 1.55;
}

.v2-nf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-block-start: 26px;
}

/* Soft elevation. The v1 pair carried `box-shadow: 4px 4px 0 0` from
   .ds-plated, which is the hard-offset sticker the design law rules out. */
.v2-nf-btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 20px;
  border-radius: var(--ds-radius-control);
  font-family: var(--ds-font-ui);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  /* Sentence case. */
  text-transform: none;
  transition: background-color 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.v2-nf-btn:focus-visible {
  outline: var(--ds-focus-width) solid var(--ds-focus);
  outline-offset: var(--ds-focus-offset);
}
/* Ink on emerald is 7.37:1; the hover LIFTS to #1cc582 (8.46:1). */
.v2-nf-btn--go {
  border: 1px solid transparent;
  background: var(--ds-green);
  color: var(--ds-on-green);
  box-shadow: var(--ds-lift-1);
}
.v2-nf-btn--go:hover {
  background: var(--ds-green-hover);
  box-shadow: var(--ds-lift-2);
}
/* Border = interactive, and this one is. Ink on white is 17.4:1. */
.v2-nf-btn--quiet {
  border: 1px solid var(--ds-ink);
  background: #ffffff;
  color: var(--ds-ink);
}
.v2-nf-btn--quiet:hover {
  background: #ffffff;
  box-shadow: var(--ds-lift-1);
}

/* WHERE TO GO INSTEAD. Real destinations, each with the one line that tells
   the reader whether it is the one they wanted. Eight cells, laid out with
   real gaps rather than the gap-over-a-coloured-ground trick, so an uneven
   count can never leave a phantom cell behind. */
.v2-nf-links {
  display: block;
}
.v2-nf-linkstitle {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  color: var(--ds-dim-on-light);
  font-family: var(--ds-font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.v2-nf-links ul {
  display: grid;
  /* Explicit counts, not auto-fit. There are EIGHT destinations, and eight
     divides evenly into one, two and four — so the block always ends on a
     full row. auto-fit chose five columns at 1280px and left a ragged 5 + 3,
     which is the same "unfinished grid" the ledger was cut for. */
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 560px) {
  .v2-nf-links ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .v2-nf-links ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.v2-nf-links li { margin: 0; }
.v2-nf-links li a {
  display: grid;
  gap: 3px;
  align-content: start;
  height: 100%;
  min-height: var(--ds-tap);
  padding: 13px 15px;
  border: 1px solid var(--v2-rule);
  border-radius: var(--ds-radius-control);
  background: #ffffff;
  color: var(--ds-ink);
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.v2-nf-links li a b {
  color: var(--ds-ink);            /* 17.4:1 on white */
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.v2-nf-links li a span {
  color: var(--ds-dim-on-light);   /* 7.59:1 on white */
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.45;
}
.v2-nf-links li a:hover {
  border-color: var(--ds-ink);
  box-shadow: var(--ds-lift-1);
}
.v2-nf-links li a:focus-visible {
  outline: var(--ds-focus-width) solid var(--ds-focus);
  outline-offset: var(--ds-focus-offset);
}

.v2-nf-foot {
  margin: 20px 0 0;
  max-width: 62ch;
  color: var(--ds-dim-on-light);
  font-size: 14px;
  line-height: 1.6;
}
.v2-nf-foot a {
  /* An inline prose link cannot take a 44px line box without wrecking the
     paragraph's rhythm, so the TARGET is grown instead: padding on an inline
     box enlarges the hit area without changing the line height. 18px of text
     plus 13px either side clears the 44px floor. */
  padding-block: 13px;
  color: var(--ds-green-ink);      /* deep green on cream, 9.6:1 */
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.v2-nf-foot a:hover { text-decoration-thickness: 2px; }
.v2-nf-foot a:focus-visible {
  outline: var(--ds-focus-width) solid var(--ds-focus);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   4. FOLLOWER CHECKERS  (public/follower-lookup.js, tiktok-follower-lookup.js)
   --------------------------------------------------------------------------
   These two widgets ship inside the guide shell (seo-pages.css). This block
   is loaded by the widget script itself, because the pages that host it are
   owned by another cutover wave — see the report.

   The defect that mattered: `.follower-note p` is set to
   `rgba(14, 17, 16, 0.72)` — INK, at 72% — and the JS appends .follower-note
   INSIDE .follower-result, which is an ink plate. That composites to
   rgb(78,79,75) on rgb(14,17,16) = 2.25:1. The paragraph carrying the single
   most important sentence on the page ("this is not an audience-quality
   verdict") has been effectively invisible in production.
   -------------------------------------------------------------------------- */
.follower-result .follower-note p { color: var(--ds-cream); }
.follower-result .follower-note strong { color: var(--ds-lime); }
.follower-result .follower-note {
  /* Physical resets FIRST: a later `padding-left: 0` re-zeroes the same
     physical property that `padding-inline-start` just set in LTR. */
  border-left: 0;
  padding-left: 0;
  border-inline-start: 3px solid var(--ds-green);
  padding-inline-start: 16px;
}

/* Rule 7 across the rest of the result plate: cream at 55%/62% alpha becomes
   the measured solid for an ink ground. */
.follower-result .follower-result-handle,
.follower-result .follower-count-label,
.follower-result .follower-meta,
.follower-result .follower-stats dt {
  color: var(--ds-dim-on-ink);
}
.follower-result .follower-stats > div {
  background: var(--ds-ink-3);
}

/* A SECOND production defect, found by measuring the rendered result rather
   than reading the sheet: seo-pages.css sets
   `.seo-article a:not(.seo-button):not(.seo-text-link):not(.seo-link-card):not(.sample-report-card)`
   to deep green at (0,5,1). The result plate lives inside .seo-article, so
   that rule outranks `.follower-result-handle a { color: var(--ds-lime) }`
   (0,1,1) and paints the profile link deep green ON INK — 1.73:1. Matched
   here at (0,6,1). This belongs in seo-pages.css; see the report.
   Rule 2: green is a ground, not an ink, and on an ink plate lime is 14.7:1. */
.seo-article .follower-result a:not(.seo-button):not(.seo-text-link):not(.seo-link-card):not(.sample-report-card),
.follower-result .follower-result-handle a {
  color: var(--ds-lime);
}

/* Rule 6: the result is an ink plate, so the deep-green ring (1.7:1 here)
   is illegal on anything inside it. */
.follower-result :is(a, button, summary, [tabindex]):focus-visible {
  outline: var(--ds-focus-width) solid var(--ds-focus-light);
  outline-offset: var(--ds-focus-offset);
}

/* No amber. v1 status tones were #a45b12 (tan) and #9c4530 (brick); severity
   on this widget is now carried by the plate the message arrives in, and the
   status line is one weight-differentiated colour family. */
.follower-status-warn,
.follower-status-bad {
  color: var(--ds-ink);
  font-weight: 600;
}
.follower-status-muted { color: var(--ds-dim-on-light); }
.follower-status-good { color: var(--ds-green-ink); font-weight: 600; }
.follower-status a {
  min-height: var(--ds-tap);
  display: inline-flex;
  align-items: center;
  color: var(--ds-green-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The allowance chip: what the reader spends, shown before they spend it.
   Ink on lime is 14.7:1; ink on the spent plate is 14.6:1. */
.follower-result .follower-meta.v2-allowance,
.v2-allowance {
  /* Element-qualified against `.follower-result .follower-meta`, which is
     (0,2,0) and otherwise painted the dim ink foreground onto the lime
     ground — the exact accent-plate trap the foundation warns about. */
  width: fit-content;
  max-width: 100%;
  margin-block-start: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--ds-lime);
  color: var(--ds-on-green);
  font-family: var(--ds-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.v2-allowance--spent {
  background: var(--v2-notice-bg);
  color: var(--ds-ink);
}

/* The checker's failure plate is rendered INTO the widget's live region, so
   the region carries the plate's own type rather than the status line's mono.
   One region, one announcement. */
.v2-statusregion {
  margin-block-start: 14px;
  font-family: var(--ds-font-ui);
  font-size: 15px;
}
.v2-statusregion .v2-plate { margin-block-start: 0; }
.v2-statusregion .v2-plate-title { font-size: clamp(1.15rem, 3vw, 1.4rem); }

/* --------------------------------------------------------------------------
   5. COMPANY PAGES: /about, /contact, /investors
   --------------------------------------------------------------------------
   These three were already close. The corrections are the shared-contract
   ones only — measure, the alpha-free dim foregrounds, and the tap floor.
   -------------------------------------------------------------------------- */
.v2-page .pc-panel-body > p,
.v2-page .legal-card p {
  max-width: 68ch;
}
.v2-page .pc-panel-head .pc-mono { color: var(--ds-dim-on-ink); }

/* THE ACCENT PLATE TRAP, in its production form, on /investors:
     · `.section-heading .pc-eyebrow` inherits the chapter's cream-at-78%
       while its own plate is emerald — 1.87:1, and cream-on-emerald is the
       one banned pairing in the system.
     · `dd.pc-metric-value` inherits white inside a MINT tile — 1.11:1, i.e.
       four of the eight headline investor figures are invisible.
   Both are plates nested in a chapter, carrying their own ground and the
   chapter's foreground. These two lines belong in the ACCENT PLATE RESET
   block at the end of styles.css; see the report. */
.v2-page .investor-section .section-heading > p.pc-eyebrow {
  /* styles.css carries `.investor-page .section-heading > p { color:
     rgba(244,240,226,.78) !important }`. On the section's own ink ground that
     is fine; on the EYEBROW, which is a chip carrying its own emerald plate,
     it paints cream on emerald at 1.87:1 — the one pairing the system bans
     outright. One selector, one ground, beaten at (0,4,1) with a matching
     !important. The sibling description keeps the chapter's foreground,
     because the chapter is what it is painted on. */
  color: var(--ds-on-green) !important;
}

/* Two more nested plates taking a foreground their own ground cannot carry:
   the note tile is an INK plate whose label was also ink (1.00:1 — the label
   was simply not there), and the scenario legend sits on the same ink plate
   at 3.41:1. */
.v2-page .pc-metric-tile--note > .pc-metric-bar {
  color: var(--ds-cream);
}
.v2-page .scenario-controls .pc-mono {
  color: var(--ds-dim-on-ink);
}
/* The unit suffix on every calculator field was white at 70% on near-white:
   1.04:1, i.e. the reader could not tell a percentage field from a dollar
   one. */
.v2-page .pc-field .pc-field-suffix {
  color: var(--ds-dim-on-light);
}
.v2-page .pc-metric-tile dd.pc-metric-value,
.v2-page .pc-metric-tile .pc-metric-value {
  color: var(--ds-ink);
}

/* Rule 9 on the investor calculator: the preset toggles and every numeric
   field measured 39–40px. Kept at low specificity so a page asking for a
   bigger control still wins. */
.v2-page .pc-toggle,
.v2-page input,
.v2-page select {
  min-height: var(--ds-tap);
}
/* One calculator field rendered 20px wide, which is under the 24px minor
   dimension a target is allowed to have. */
.v2-page .pc-field input {
  min-inline-size: 44px;
}

/* --------------------------------------------------------------------------
   6. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .v2-toc a,
  .v2-anchor,
  .v2-plate,
  .v2-nf-btn,
  .v2-nf-links li a,
  .v2-actions > :is(a, button) {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  /* Rule 10 belongs to design-system.css, which sets it top-level and
     !important. Restated here only so this sheet cannot be shipped alone
     with a smooth-scrolling html element behind it. */
  html {
    scroll-behavior: auto !important;
  }
}