/* ==========================================================================
   Seam — front door
   The five public pages: home, platform, pricing, briefings, contact.

   This is a SEPARATE stylesheet from styles.css on purpose. styles.css is
   239KB, every one of the thirty-odd register pages depends on it, and it has
   twice lost work to a concurrent session committing a stale copy. Nothing
   here is needed by any other page, so keeping it out of that file means the
   front door can never be the reason styles.css is rewritten.

   Every rule is namespaced .fd- ("front door"). No .fd- class exists anywhere
   else in the codebase, so nothing here can collide with styles.css,
   fw-controls.js's chips, or any page script.

   All colour, type and spacing comes from the styles.css :root tokens — this
   file defines no palette of its own. Load it AFTER styles.css.
   ========================================================================== */

/* --- Hero -------------------------------------------------------------- */
.fd-hero { border-bottom: 1px solid var(--divider); padding-block: clamp(2.5rem, 5vw, 5rem); }
.fd-hero__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.fd-hero h1 { max-width: 15ch; }
.fd-hero__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.6rem; }

/* The two figures under the hero copy. A 2-col grid that collapses to one
   column on a phone; each cell is ruled off the top in full-strength ink so
   the numbers read as a table of results rather than decoration. */
.fd-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 1.5rem;
  max-width: 34rem;
  margin-top: clamp(2rem, 4vw, 2.8rem);
}
.fd-stat { border-top: 2px solid var(--ink); padding-top: 0.8rem; }
.fd-stat__fig {
  font-family: var(--font-heading); font-weight: 400;
  font-size: clamp(2rem, 3.5vw, 2.8rem); line-height: 1; letter-spacing: -0.03em;
}
.fd-stat__cap { font-size: 0.92rem; color: var(--ink-soft); margin: 0.35rem 0 0; }

/* --- The pyramid figure ------------------------------------------------ */
.fd-pyr {
  margin: 0; background: var(--surface); border: 1px solid var(--divider);
  box-shadow: var(--shadow-sm); padding: clamp(1.25rem, 2.4vw, 2rem);
}
.fd-pyr__head {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  border-bottom: 1px solid var(--divider); padding-bottom: 0.9rem;
}
.fd-pyr__mode { display: flex; align-items: center; gap: 0.55rem; }
.fd-pyr__dot {
  width: 9px; height: 9px; flex: none; background: var(--divider-2);
  transition: background 0.3s ease;
}
.fd-pyr.is-fw .fd-pyr__dot { background: var(--lime); }
.fd-pyr__label {
  font-family: var(--font-mono); font-weight: 400; font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: 0.14em;
}
.fd-pyr__key {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted);
}
.fd-pyr__body { display: grid; grid-template-columns: auto 1fr; gap: 0 1rem; padding-top: 1.1rem; }

/* The vertical axis. Rotating the text puts "higher value" at the top
   reading upwards, which is how an axis label is normally set. */
.fd-pyr__axis {
  display: grid; grid-template-rows: auto 1fr auto; justify-items: center;
  gap: 0.5rem; padding-bottom: 0.2rem;
}
.fd-pyr__axistext {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; white-space: nowrap;
}
.fd-pyr__axistext--hi { color: var(--accent); }
.fd-pyr__axistext--lo { color: var(--muted); }
.fd-pyr__axisline { width: 2px; background: var(--divider-2); justify-self: center; }

.fd-pyr__rows { display: grid; gap: 0.9rem; }
.fd-pyr__rowlabel { font-family: var(--font-heading); font-weight: 600; font-size: 0.86rem; margin: 0 0 0.35rem; }
.fd-pyr__track {
  height: 40px; background: var(--paper-2); border: 1px solid var(--divider);
  display: flex; justify-content: center;
}
.fd-pyr__bar {
  height: 100%; background: var(--ink);
  transition: width 0.75s cubic-bezier(0.16, 0.84, 0.3, 1);
}
.fd-pyr__row:first-child .fd-pyr__bar { background: var(--lime); }
.fd-pyr__cap { font-size: 0.86rem; color: var(--ink-soft); margin: 1.1rem 0 0; }

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

/* --- Square bullet lists ----------------------------------------------- */
/* The 9px lime square with an ink ring is the site's own list marker, used
   here instead of a disc so the lists match the brand's square-edged look. */
.fd-list { display: grid; gap: 1.1rem; list-style: none; margin: 1.6rem 0 0; padding: 0; }
.fd-list > li { display: grid; grid-template-columns: 12px 1fr; gap: 0.8rem; align-items: start; }
.fd-list > li::before {
  content: ""; width: 9px; height: 9px; margin-top: 0.42em;
  background: var(--lime); box-shadow: 0 0 0 1.5px var(--ink);
}
.fd-list p { margin: 0; }
.fd-list b { font-family: var(--font-heading); }

/* --- "In practice" tabs and the screenshot frame ------------------------ */
.fd-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.4rem; }
.fd-tab {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-body); font-weight: 500; font-size: 0.92rem;
  text-transform: lowercase; padding: 0.42em 0.8em; cursor: pointer;
  background: transparent; color: var(--ink-soft);
  border: 1px solid transparent;
}
.fd-tab::before { content: ""; width: 6px; height: 6px; background: var(--divider-2); flex: none; }
.fd-tab[aria-selected="true"] { background: var(--surface); border-color: var(--ink); color: var(--ink); }
.fd-tab[aria-selected="true"]::before { background: var(--lime); }
.fd-tab:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* The carousel pause button (fw-front.js builds it; see the note there).
   It sits beside the tablist rather than inside it, because a tablist's
   children have to be tabs. Pushed to the far end of the row so it reads as
   a control on the picture rather than a fifth tab. */
.fd-tabrow {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.4rem 0.8rem; margin-bottom: 1.4rem;
}
.fd-tabrow .fd-tabs { margin-bottom: 0; }
.fd-pause {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin-left: auto; cursor: pointer;
  font-family: var(--font-body); font-weight: 500; font-size: 0.82rem;
  text-transform: lowercase; letter-spacing: 0.02em;
  padding: 0.38em 0.7em;
  background: transparent; color: var(--ink);
  border: 1px solid var(--divider-2);
}
.fd-pause:hover { border-color: var(--ink); }
.fd-pause:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Two bars for pause, one triangle for play. Drawn as inline SVG in
   fw-front.js and filled with currentColor, so the icon follows the button's
   text colour in both themes and in forced colours. */
.fd-pause__icon { flex: none; display: block; }

@media (max-width: 520px) {
  .fd-pause { margin-left: 0; }
}

.fd-shots { position: relative; aspect-ratio: 16 / 9; background: var(--surface); border: 1px solid var(--divider); }
.fd-shot {
  position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s ease;
  display: flex; align-items: center; justify-content: center;
}
.fd-shot.is-on { opacity: 1; }
.fd-shot img { width: 100%; height: 100%; object-fit: cover; }
.fd-caption { font-size: 0.92rem; color: var(--muted); margin: 0.9rem 0 0; }
@media (prefers-reduced-motion: reduce) { .fd-shot { transition: none; } }

/* A placeholder that says plainly it is a placeholder, rather than a grey
   box that could be mistaken for a broken image. */
.fd-slot {
  width: 100%; height: 100%; display: grid; place-content: center; gap: 0.4rem;
  text-align: center; padding: 1.5rem;
  background: repeating-linear-gradient(135deg, var(--paper-2) 0 12px, var(--surface) 12px 24px);
}
.fd-slot__label {
  font-family: var(--font-mono); font-weight: 400; font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted);
}
.fd-slot__what { font-size: 0.95rem; color: var(--ink-soft); max-width: 34ch; margin: 0; }

/* --- Tier tiles --------------------------------------------------------- */
/* gap:1px with an outline rather than a border means neighbouring tiles share
   a single hairline instead of doubling it. */
.fd-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px; list-style: none; margin: clamp(1.6rem, 3vw, 2.4rem) 0 0; padding: 0;
}
.fd-tile {
  background: var(--surface); outline: 1px solid var(--divider);
  box-shadow: var(--shadow-sm); padding: 1.3rem 1.3rem 1.4rem;
}
.fd-tile__name {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--muted); display: block; margin-bottom: 0.6rem;
}
.fd-tile__price {
  font-family: var(--font-heading); font-weight: 400; font-size: 2.2rem;
  letter-spacing: -0.03em; line-height: 1; display: block;
}
.fd-tile--top .fd-tile__price { color: var(--accent); }
.fd-tile__per { font-size: 0.85rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.fd-tile__sub { font-size: 0.86rem; color: var(--ink-soft); margin: 0.7rem 0 0; }
.fd-tile__layer { font-size: 0.78rem; color: var(--muted); margin: 0.5rem 0 0; }
.fd-tile__points {
  list-style: none; margin: 0.9rem 0 0; padding: 0.9rem 0 0;
  border-top: 1px solid var(--divider); display: grid; gap: 0.5rem; font-size: 0.84rem;
}
.fd-tile__points li { display: grid; grid-template-columns: 9px 1fr; gap: 0.6rem; align-items: start; }
.fd-tile__points li::before {
  content: ""; width: 7px; height: 7px; margin-top: 0.45em;
  background: var(--lime); box-shadow: 0 0 0 1.5px var(--ink);
}

/* Selectable variant, pricing page only. */
.fd-tile--pick {
  cursor: pointer; text-align: left; width: 100%; font: inherit; color: inherit; border: 0;
  /* A <button> centres its content box vertically, so a tile whose neighbour
     has more text sits half a row lower than the one beside it. Making it a
     flex column that starts at the top puts every tile's name on one line. */
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
}
.fd-tile--pick:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.fd-tile--pick[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--lime), var(--shadow-sm); }
.fd-tile__picked { color: var(--accent); font-weight: 700; }

/* --- The four layers banner (platform) ---------------------------------- */
.fd-layers {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  border-top: 2px solid var(--ink); list-style: none; margin: clamp(1.8rem, 3vw, 2.6rem) 0 0; padding: 0;
  counter-reset: fdlayer;
}
.fd-layers li + li { border-left: 1px solid var(--divider); }
.fd-layers a { display: block; padding: 0.9rem 1rem; text-decoration: none; }
.fd-layers a:hover { background: var(--paper-2); }
.fd-layers a[aria-current="page"] { background: var(--paper-2); box-shadow: inset 0 -3px var(--accent); }
.fd-layers__num { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.fd-layers__name {
  display: block; font-family: var(--font-body); font-weight: 500;
  font-size: 0.92rem; text-transform: lowercase; margin-top: 0.2rem;
}

/* --- The static mini pyramid (platform intro) --------------------------- */
.fd-intro { display: grid; grid-template-columns: 1fr auto; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
@media (max-width: 760px) { .fd-intro { grid-template-columns: 1fr; } }
.fd-minipyr { display: grid; grid-template-columns: 120px auto; gap: 6px 0.8rem; align-items: center; margin: 0; }
.fd-minipyr__bar { height: 22px; background: var(--ink); justify-self: center; }
.fd-minipyr__bar--top { background: var(--lime); border: 1.5px solid var(--ink); }
.fd-minipyr__label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.fd-minipyr__label--top { color: var(--ink); }

/* --- Inclusion tag (platform tiers 02-04) ------------------------------- */
.fd-tag {
  display: inline-block; font-family: var(--font-heading); font-size: 0.72rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink);
  background: color-mix(in srgb, var(--lime) 35%, transparent);
  border: 1px solid var(--ink); padding: 0.3em 0.6em; margin-top: 0.5rem;
}

/* --- Comparison table (pricing) ----------------------------------------- */
.fd-cmpwrap { overflow-x: auto; }
.fd-cmp { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.92rem; }
.fd-cmp th {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
  border-bottom: 2px solid var(--ink); text-align: left; padding: 0.7rem 0.6rem; vertical-align: bottom;
}
.fd-cmp td { padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--divider); }
.fd-cmp tbody th { font-size: 0.92rem; text-transform: none; letter-spacing: 0; color: var(--ink); font-weight: 500; border-bottom: 1px solid var(--divider); }
.fd-cmp td:not(:first-child) { text-align: center; }
.fd-cmp th:not(:first-child) { text-align: center; }
.fd-cmp__no { color: var(--muted); }

/* --- Notes -------------------------------------------------------------- */
.fd-note {
  border-left: 2px solid var(--lime); padding-left: 0.9rem;
  font-size: 0.9rem; color: var(--ink-soft); max-width: 62ch; margin: 1.2rem 0 0;
}

/* --- Contact chips ------------------------------------------------------ */
.fd-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fd-pill {
  font-size: 0.88rem; padding: 0.45rem 0.8rem; cursor: pointer;
  background: var(--surface); border: 1px solid var(--divider); color: var(--ink);
  font-family: var(--font-body);
}
.fd-pill[aria-pressed="true"] { border-color: var(--lime); box-shadow: inset 0 0 0 1px var(--lime); font-weight: 600; }
.fd-pill:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.fd-hint { font-size: 0.88rem; color: var(--muted); margin: 0 0 0.5rem; }

/* --- Contact detail blocks ---------------------------------------------- */
.fd-detail { border-top: 2px solid var(--ink); padding-top: 0.8rem; margin-top: 1.6rem; }
.fd-detail__label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin: 0 0 0.4rem; }
.fd-detail__value { font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; margin: 0; }

/* --- Two-column section grids ------------------------------------------- */
.fd-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(2rem, 4vw, 3.5rem); }
.fd-two--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.fd-two--start { align-items: start; }
.fd-two__end { align-self: end; }

/* --- Slim front-door footer --------------------------------------------- */
.fd-footer__top {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;
  gap: 2rem; padding-block: clamp(2.5rem, 5vw, 4rem);
}
.fd-footer__links {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
  gap: 0.6rem 1.8rem; font-family: var(--font-body); font-weight: 500;
  font-size: 0.95rem; text-transform: lowercase;
}

/* --- Integrations, in the footer ---------------------------------------
   A third item in the .fd-footer__top row rather than a column of its own:
   that row is a flex line, so it wraps onto its own line on a narrow screen
   without any breakpoint. The icons are 1em so they sit on the text baseline
   whatever the reader's font size. */
.footer-int__wrap { min-width: 12rem; }
.footer-int__head {
  font-family: var(--font-body); font-weight: 500; font-size: 0.95rem;
  text-transform: lowercase; margin: 0 0 0.6rem;
}
.footer-int { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.footer-int li, .footer-int a {
  display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem;
}
.footer-int svg {
  width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: 0.75;
}

/* --- Success state ------------------------------------------------------ */
.fd-done { padding: clamp(1.25rem, 2.5vw, 2rem); }

/* The submit button is a grid child of .form, which would stretch it the
   full width of the panel; the site sets its buttons inline everywhere else. */
.fd-done, [data-fd-form] button[type="submit"] { justify-self: start; }

/* --- The second row on the platform's own pages -------------------------
   Sits under the masthead on every page behind the login. Four links, one
   per layer of the platform, each pointing at its section on the platform
   page. Register-to-register jumps are the side rail's job, not this row's. */
.fd-subnav { border-top: 1px solid var(--divider); }
.fd-subnav__list {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
  gap: 0 1.6rem;
}
.fd-subnav__list a {
  display: flex; align-items: baseline; gap: 0.5rem; padding: 0.6rem 0;
  font-family: var(--font-body); font-weight: 500; font-size: 0.9rem;
  text-transform: lowercase; text-decoration: none; color: var(--ink-soft);
}
.fd-subnav__list a:hover { color: var(--ink); }
.fd-subnav__list a[aria-current="page"] { color: var(--accent); font-weight: 700; }
.fd-subnav__num {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; color: var(--muted);
}

/* The footer on those pages: the front-door row on top, the existing link
   columns kept underneath. Without the brand cell the grid would leave a
   hole where it used to be, so the columns re-flow on their own. */
.fd-footer__cols { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; }

/* --- The register directory on the platform page ------------------------ */
.fd-dir { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 1.6rem 2rem; margin-top: 1.6rem; }
.fd-dir h4 {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted); margin: 0 0 0.6rem; padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--ink);
}
.fd-dir ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; font-size: 0.9rem; }

/* --- The empty hover box -------------------------------------------------
   styles.css draws a description panel for a menu heading with
   `content: attr(data-tip)`, on a 20rem dark ground. The register headings
   all carry a data-tip. The Platform heading does not, so the attribute
   resolved to an empty string and hovering it painted a 320px black bar with
   nothing in it.

   `content: none` removes the pseudo-element altogether rather than leaving
   it empty, so nothing is drawn and nothing takes up width. Written here
   rather than in styles.css, and as a guard rather than a one-off, so any
   heading that ever ships without a description is silently fine instead of
   painting a black bar. */
.submenu__head:not([data-tip])::after,
.submenu__head[data-tip=""]::after { content: none; }

/* A LIGHT CARD STANDING IN A DARK SECTION.
   -----------------------------------------------------------------------
   The holding page drops the contact form into the dark call-to-action band
   at the foot of the home page. That band sets its text to paper so that the
   heading and the lead read against the ink background - and the form card
   is white, so every label inside it became white on white. The fields were
   there, the questions were invisible, and the form read as a column of
   empty boxes.

   TEXT COLOUR BELONGS TO THE SURFACE IT SITS ON, not to the section the
   surface happens to be standing in. So the card sets its own, and it is
   then the same form wherever it is put: on contact.html against paper, and
   in the dark band on the way in. Found on the live holding page, 15
   September 2026. */
.contact-form { color: var(--ink); }
.contact-form .lead,
.contact-form .form__note,
.contact-form .field__hint { color: var(--muted); }
/* The submit button is lime with ink on it either way; nothing to do. */

/* The hint under a question. It was inheriting the label's weight, so a
   one-line aside about Scotland read as loudly as the question itself and
   the eye had nothing to land on. Scoped to the front-door form: .field is
   a site-wide class and the register pages are not part of this. */
[data-fd-form] .field label em {
  display: block;
  margin-top: 0.2rem;
  font-style: normal;
  font-weight: 400;
  font-size: 0.9em;
  opacity: 0.7;
}

/* ==========================================================================
   ACCESSIBILITY, 15 September 2026
   Two findings from the axe-core and high-contrast run of that date. Both
   live here rather than in styles.css: every page that carries the new nav
   loads front.css, styles.css is 239KB and has twice lost work to a
   concurrent session, and nothing below is needed by anything older.
   ========================================================================== */

/* 1. The lime "Get a briefing" button.
   .btn--accent in styles.css sets `color: var(--ink)`. On the light front
   door --ink is #22211c and the button reads at 11.9:1. On the darker
   pages --ink flips to #f1ebe1, so the same button rendered pale grey on
   pale lime at 1.21:1 — text you could not see. The background is a fixed
   lime in both themes, so the text on it should be a fixed ink too.
   The second rule is the "you are here" state: site.js writes
   aria-current="page" onto the link matching the current page, and
   .mainnav a[aria-current="page"] { color: var(--accent) } was repainting
   this button olive-on-lime at 4.41:1, just under the 4.5:1 floor. */
.btn--accent,
.nav .btn--accent,
.mainnav .btn--accent,
.mainnav__cta .btn--accent,
.mainnav .btn--accent[aria-current="page"],
.mainnav__cta .btn--accent[aria-current="page"] { color: #f6f3ee; }   /* Seam: paper on deep ochre, 5.4:1 */

/* 2. Windows high contrast mode (and any other forced-colours setting).
   styles.css got a forced-colors block in September; front.css never did,
   so every state the front door carries in lime — which tab is showing,
   which price tile is picked, which chips are on — vanished, because
   forced colours throws our palette away and paints everything in the
   reader's two colours. Each of these gets a border or an underline to say
   the same thing in a way the mode cannot flatten. */
@media (forced-colors: active) {

  /* The four home-page tabs. Selected was carried by a lime bar. */
  .fd-tab { border: 1px solid ButtonBorder; }
  .fd-tab[aria-selected="true"] {
    border: 2px solid Highlight;
    text-decoration: underline;
  }
  .fd-tab[aria-selected="true"]::before { background: Highlight; }
  .fd-tab:focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }

  /* The price tiles. A radio group whose chosen state was an inset lime
     ring; inset shadows are not drawn at all in forced colours. */
  .fd-tile--pick { border: 1px solid ButtonBorder; }
  .fd-tile--pick[aria-checked="true"] {
    border: 3px solid Highlight;
    text-decoration: underline;
  }
  .fd-tile--pick:focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }

  /* The contact-form chips. Pressed was an inset lime ring, same problem. */
  .fd-pill { border: 1px solid ButtonBorder; }
  .fd-pill[aria-pressed="true"] {
    border: 3px solid Highlight;
    text-decoration: underline;
  }
  .fd-pill:focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }

  /* The plan comparison table. Its rules are 1px of var(--divider), which
     forced colours drops, leaving nine columns of unseparated text. */
  .fd-cmp th,
  .fd-cmp td { border: 1px solid CanvasText; }
  .fd-cmp__no { color: GrayText; }

  /* The "image to come" placeholders and the layer diagram, which are
     drawn with backgrounds and no border. */
  .fd-slot,
  .fd-stat,
  .fd-minipyr { border: 1px solid CanvasText; }

  /* The carousel pause button. Its icon is a clipped block of currentColor,
     which forced colours repaints for us; the border is what it needs. */
  .fd-pause { border: 1px solid ButtonBorder; }
  .fd-pause:focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }

  /* The second-row links under the main menu, separated by colour alone. */
  .fd-subnav__list a { text-decoration: underline; }
}

/* [U2-22] The briefing-form and sign-in cards are plain boxes, not the
   fold-out <details> card that .contact-form .form was written for, so
   its divider and second layer of padding drew an empty strip above the
   first field. */
.contact-form:not(details) > .form { padding: 0; border-top: 0; }

/* [U2-24] The comparison table is wider than a phone. Say so there only. */
.fd-cmp__hint { display: none; font-size: .8rem; color: var(--muted); margin: 0 0 .4rem; }
@media (max-width: 720px) { .fd-cmp__hint { display: block; } }

/* The subscriber band on briefings.html (UX review IV, B1, 22 Sep 2026) -
   drawn by fw-paid.js. front.css is the stylesheet the front-door pages
   load, which is where the band appears; styles.css is left alone. */
.fw-paid { background: var(--ink); color: var(--paper); }
.fw-paid__row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding-block: 0.7rem; }
.fw-paid__tag { margin: 0; font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--lime); }
.fw-paid__when { margin: 0; font-size: 0.92rem; flex: 1 1 auto; }
.fw-paid .btn { font-size: 0.85rem; }

/* Seam type, 22 September 2026: small uppercase labels in IBM Plex Mono */
.fd-tile__name, .fd-pyr__key, .fd-dir h4 {
  font-family: var(--font-mono); font-weight: 400; font-size: 0.69rem; letter-spacing: 0.14em;
}