/* ============================================================
   FCL WEBSITE UPGRADE OPTIONS — deliverable + site shell stylesheet
   ============================================================
   INDEX
     1.  Fonts               @font-face
     2.  Theme variables      :root
     3.  Base / reset         *, html, body, .page
     4.  Masthead             .mast
     5.  Section headers      h2, .eyebrow-row, .eyebrow, .rule
     6.  Body text            p, .lead, strong, .muted, a
     7.  Callout              .note
     8.  Info rows             .rows-list, .price-row, .tag, .num, .caption
     9.  Upgrade cards        .card, .status-pill, .group-title
     10. Priority block       .priority-block
     11. Sign-off             .signoff
     12. Print                @page, @media print
     13. Back to top          .back-to-top
     14. Navbar               .navbar, .kebab-menu
     15. Dark mode             [data-theme="dark"] :root token overrides
     16. Guide hub             .guide-list, .guide-card, .contact-cta (index.html)
     17. Upgrade menu          .expect-list (upgrade-menu.html)
     18. New Features          .demo-link (new-features.html)
     19. Reading typography    .reading-prose (reading-font-demo.html)
     20. Checklist pattern     .check-list (reusable checklist component)
     21. Guide figure + code   .guide-figure, inline <code>
     22. At a Glance column    .rows-list--glance count column
     23. Mobile kebab          .kebab-home + accordion groups (Home row,
                                Upgrades/Live Demos)

   Brand notes:
     - Teal #39bcbe + dark teal-navy #004e65 are FCL's real accent/heading
       colors, pulled from flatheadcountylibrary.org's live computed styles
       (not guessed).
     - Raleway (variable weight, self-hosted in ./fonts/) is the real site's
       heading font, and a free Google Font (OFL-licensed), safe to
       redistribute in this document.
     - The site's body-copy font, Eagle-Book, is a separately-licensed
       custom font — NOT embedded here since Frostbyte doesn't hold a
       redistribution license for it. Body text uses a plain serif fallback
       instead; swap in Eagle-Book only if/when FCL confirms Frostbyte can
       use it here.
   Linked via <link rel="stylesheet" href="styles/styles.css"> from every
   page in site/ — a public static asset (see functions/_middleware.js),
   no build step involved.
   ============================================================ */

/* -------------------- 1. Fonts -------------------- */

@font-face {
  font-family: 'Raleway';
  src:
    url('../fonts/Raleway-Variable.ttf') format('truetype-variations'),
    url('../fonts/Raleway-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Raleway-Regular';
  src: url('../fonts/Raleway-Regular.woff') format('woff');
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Raleway-Bold';
  src: url('../fonts/Raleway-Bold.woff') format('woff');
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Raleway-Black';
  src: url('../fonts/Raleway-Black.woff') format('woff');
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* -------------------- 2. Theme variables -------------------- */

:root {
  /* Deliverable palette */
  --teal: #39bcbe;
  --teal-dark: #004e65;
  --teal-soft: #2a8f91;
  --gold: #c99a3e; /* warm accent for callouts, kept distinct from teal so tags/notes don't blend into headings */
  --gold-ink: #96721f;
  --ink: #16232b;
  --ink-soft: #52646d;
  --paper: #ffffff;
  --paper-warm: #f2f8f8;
  --line: #dbe8e8;
  --good: #2f6b4f;
  --gap: #9c4a41;
  --good-bg: #e4efe8;
  --gap-bg: #f4e5e3;
  --gold-bg: #f6edd8; /* soft gold fill for the gold status-pill */
  --rule: #a9c0c6; /* .rule divider color */
  /* Fixed-dark chip background (badge circle, table header row, .ref column
     text) paired with --white text — deliberately does NOT flip in dark mode,
     unlike --teal-dark below which is used for headings/text and does. */
  --surface-accent: #004e65;
  /* Menu/dropdown panel surface (kebab-menu) — separate
     from --white so dropdown backgrounds can go dark while --white stays a
     fixed "always white" token for text drawn on --surface-accent chips. */
  --surface: #ffffff;
  --head: 'Raleway', Helvetica, Arial, sans-serif; /* FCL's real heading/nav font */
  --serif: Georgia, 'Times New Roman', serif; /* body-copy fallback — see Eagle-Book note above */
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Navbar palette — authored for the site shell's navbar, then folded in
     alongside the deliverable palette above so both share one stylesheet.
     --navy was merged into --teal-dark (same #004e65/#7fd4e6 pair, same
     role) — use --teal-dark for navbar text/hover color too. */
  --orange: #f15b34;
  --text: #57595c;
  --white: #ffffff;
  --bg-light: #f2f2f2;
  --border: #e2e2e2;
  --font-bold: 'Raleway-Bold', Helvetica, Arial, sans-serif;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-lg: 24px;
  --text-sm: 0.9rem;
  --radius: 10px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* -------------------- 3. Base / reset -------------------- */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--sans);
  color: var(--ink);
  line-height: 1.55;
  background: var(--paper);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.page {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 25px;
}

/* -------------------- 4. Masthead -------------------- */

.mast {
  border-bottom: 3px solid var(--teal-dark);
  padding-bottom: 18px;
  margin-bottom: 26px;
}

.mast .brand {
  font-family: 'Raleway-Bold', Helvetica, Arial, sans-serif;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--teal-dark);
}

.mast .brand .mark {
  color: var(--teal);
}

.mast h1 {
  font-family: 'Raleway', Helvetica, Arial, sans-serif;
  font-weight: 800;
  color: var(--teal-dark);
  font-size: 30px;
  line-height: 1.15;
  margin: 12px 0 6px;
  text-wrap: balance;
}

.mast .sub {
  font-family: 'Raleway-Regular', Helvetica, Arial, sans-serif;
  font-size: 15px;
  color: var(--ink-soft);
}

.mast .prep {
  font-family: 'Raleway-Regular', Helvetica, Arial, sans-serif;
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 5px;
  letter-spacing: 0.05em;
}

/* -------------------- 5. Section headers -------------------- */

/* Each .section-page is its own printed page */
.section-page {
  page-break-before: always;
  break-before: page;
  padding-top: 8px;
}

.section-page:first-of-type {
  page-break-before: avoid;
  break-before: avoid;
}

section {
  margin: 0 0 26px;
}

h2 {
  font-family: 'Raleway', Helvetica, Arial, sans-serif;
  font-size: 24px;
  color: var(--teal-dark);
  margin: 22px 0 10px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
}

/* The first section heading on a page shouldn't repeat the divider
   that's already right above it (the masthead border, or a lead-in
   <hr class="rule">) — add this class to whatever wraps that heading
   (a <section> or a .section-page). See
   docs/design/section-spacing-options-preview.html option E. */
.first-section h2 {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* Headings shouldn't inherit the body's ~1.6 paragraph leading; tighten to
   match the .mast h1 reference so multi-line headings don't float apart.
   Scoped h3 rules omit line-height, so this element rule fills that gap. */
h3 {
  line-height: 1.15;
}

/* Eyebrow: icon/number badge stacked above a centered label. The
   .priority-block override below restores the original left-aligned row
   layout for the "Where to Start" callout specifically. */
/* Section eyebrow — "option F" ornamental treatment (see
   docs/design/eyebrow-element-options-preview.html). A haloed navy badge
   flanked by short teal rules, with a wide-tracked label below. Marks a
   whole page section, so it's deliberately pronounced. The compact inline
   variant inside .priority-block opts out of the halo/rules below. */
.eyebrow-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0 0 25px;
  text-align: center;
}

.eyebrow-row .badge {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface-accent);
  color: var(--white);
  font-family: 'Raleway-Bold', Helvetica, Arial, sans-serif;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  /* soft teal halo ring; literal rgba (not --teal) so the tint reads the
     same subtle way over both the light paper and the dark page bg. */
  box-shadow: 0 0 0 5px rgba(57, 188, 190, .18);
}

/* SVG icon inside an eyebrow badge (e.g. the sliders on the navbar demo's
   "What You Can Do" header). Glyph badges ($, ★) size via font-size above. */
.eyebrow-row .badge svg {
  width: 19px;
  height: 19px;
}

/* Short teal rules flanking the badge — the "symbolic section break".
   Real spans (not ::before/::after) so each one can be animated
   independently on scroll reveal — see .eyebrow-row[data-reveal] below. */
.eyebrow-row .rule-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.eyebrow-row .flank {
  width: 46px;
  height: 1px;
  background: var(--teal);
  opacity: .55;
  flex-shrink: 0;
}

.eyebrow {
  font-family: 'Raleway-Bold', Helvetica, Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.rule {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 26px 0;
}

/* -------------------- 6. Body text -------------------- */

p {
  margin: 0 0 12px;
  font-size: 14px;
}

.lead {
  font-size: 15px;
}

strong {
  color: var(--ink);
}

.muted {
  color: var(--ink-soft);
}

a {
  color: var(--teal-soft);
}

/* Numbered-badge list: used where a short set of reasons/points benefits
   from a visible count (e.g. "four costs" in the lead-in sentence above
   it). See docs/design/section01-list-options-preview.html option B. */
.reason-list {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.reason-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}

.reason-list .num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface-accent);
  color: var(--white);
  font-family: 'Raleway-Bold', Helvetica, Arial, sans-serif;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.reason-list li strong {
  color: var(--teal-dark);
}

/* navbar-self-service-demo.html swaps the two badge treatments: the "What You
   Can Do" list is numbered and the "Why It's Worth" list is checked. These
   scoped modifiers do the swap without touching the shared .check-item__mark
   (option D, also used elsewhere on the site) or .reason-list .num
   (navy, also used elsewhere on the site). */

/* number badge inside a check-list mark — mirrors .reason-list .num's navy
   look. Compound selector so it outranks the base .check-item__mark rule,
   which is declared later in the file (§20). */
.check-item__mark.check-item__mark--num {
  background: var(--surface-accent);
  border: none;
  color: var(--white);
  font-family: 'Raleway-Bold', Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
}

/* checkmark badge inside a reason-list num — mirrors option D's soft tint */
.reason-list .num--check {
  background: var(--paper-warm);
  border: 1.5px solid var(--teal);
  color: var(--teal-dark);
}

.reason-list .num--check svg {
  width: 13px;
  height: 13px;
}

/* -------------------- 7. Callout -------------------- */

.note {
  background: var(--paper-warm);
  border-left: 3px solid var(--teal);
  padding: 12px 16px;
  font-size: 13.5px;
  margin: 0 0 16px;
}

.note strong {
  color: var(--teal-dark);
}

/* -------------------- 8. Info rows (table-free) -------------------- */

/* Replaces plain HTML tables on this page so nothing has to horizontally
   scroll or squeeze columns at narrow/print widths — each block is a
   <ul> of CSS-grid rows that collapses to one column below 560px. See
   docs/webguides-design/design/process-steps-options-preview.html for
   the design comparison "D" that this pattern is drawn from. */

.rows-head {
  display: grid;
  gap: 9px 14px;
  padding: 7px 9px;
  background: var(--surface-accent);
  color: var(--white);
  font-family: var(--head);
  font-weight: 700;
  font-size: 11.5px;
}

.rows-list {
  list-style: none;
  margin: 16px 16px 16px;
  padding: 0;
}

.rows-list > li {
  padding: 12px 0;
}

.rows-list--2col > li {
  border-bottom: 1px solid var(--line);
}

.rows-list--2col > li:last-child {
  border-bottom: none;
}

/* Two-column: feature/description */
.rows-list--2col > li,
.rows-head--2col {
  grid-template-columns: 26% 1fr;
}

.rows-list--2col > li {
  display: grid;
  gap: 9px 14px;
}

.rows-list--2col .row-head {
  font-family: var(--head);
  font-weight: 700;
  color: var(--teal-dark);
  font-size: 12px;
}

.rows-list--2col .row-body {
  font-size: 11.5px;
}

/* Three-column comparison: rowhead + two value columns */
.rows-list--compare > li,
.rows-head--compare {
  grid-template-columns: 22% 1fr 1fr;
}

.rows-list--compare > li {
  display: grid;
  gap: 9px 14px;
}

.rows-list--compare .row-head {
  font-family: var(--mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  background: var(--paper-warm);
  padding: 4px 6px;
  align-self: start;
}

.rows-list--compare .row-cell {
  font-size: 11px;
}

.rows-list--compare .col-label {
  display: none;
}

@media (max-width: 560px) {
  .rows-head {
    display: none;
  }

  .rows-list--2col > li {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  /* Comparison table (multi-column option comparisons) folds each row
     into a stack of full-width blocks: the category label, then each option
     as its own rounded block. Replaces the flat single-column stack where
     rows ran together. Scoped :not(--glance) so the 2-col At-a-Glance table
     gets its own card collapse in section 22 instead. */
  .rows-list--compare:not(.rows-list--glance) > li {
    display: block;
    padding: 12px 0;
  }

  .rows-list--compare:not(.rows-list--glance) .row-head {
    display: block;
    background: none;
    padding: 0;
    margin-bottom: 8px;
  }

  .rows-list--compare:not(.rows-list--glance) .row-cell {
    background: var(--paper-warm);
    border-radius: 7px;
    padding: 9px 11px;
    line-height: 1.3;
  }

  .rows-list--compare:not(.rows-list--glance) .row-cell + .row-cell {
    margin-top: 8px;
  }

  .rows-list--compare:not(.rows-list--glance) .col-label {
    display: block;
    font-family: var(--mono);
    font-size: 8.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    margin-bottom: 3px;
  }

  /* Best-Value highlight: on tables that opt in with --best-2nd, the second
     option column (the recommended pick) gets a green tint + star. Applied
     via a modifier, not by column position, because other compare tables
     put the recommended option in the FIRST column.
     Mobile-only; on desktop the header row already carries the "Best Value"
     label. */
  .rows-list--best-2nd .row-cell + .row-cell {
    background: var(--good-bg);
    box-shadow: inset 0 0 0 1px #bcdcc9; /* soft green edge, no matching token */
  }

  .rows-list--best-2nd .row-cell + .row-cell .col-label {
    color: var(--teal-dark);
  }

  /* At-a-Glance mobile collapse lives in section 22, colocated with its
     desktop rules — it has to come after the .cat-cell desktop rule to win. */
}

/* Single-row price/description line (e.g. maintenance retainer) */
.price-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 0 0 16px;
}

.price-row__title {
  display: block;
  font-family: var(--head);
  font-weight: 700;
  color: var(--teal-dark);
  font-size: 12.5px;
  margin: 0 0 3px;
}

.price-row__desc {
  font-size: 11.5px;
  margin: 0;
}

.price-row__amount {
  font-family: var(--head);
  font-weight: 700;
  color: var(--teal-dark);
  font-size: 13px;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .price-row {
    flex-direction: column;
  }
}

.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.03em;
  padding: 1px 6px;
  border-radius: 3px;
}

.tag.good {
  background: var(--good-bg);
  color: var(--good);
}

.tag.gap {
  background: var(--gap-bg);
  color: var(--gap);
}

.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.caption {
  font-size: 10.5px;
  color: var(--ink-soft);
  margin-top: 8px;
}

/* -------------------- 9. Upgrade cards -------------------- */

.card {
  border: 2px solid var(--line);
  border-radius: 6px;
  padding: 15px 20px 20px;
  margin: 0 0 20px;
  background: var(--paper);
}

/* Items 1 and 4 on new-features.html use <a class="card"> to make the whole
   card the click target for their demo link, instead of just the .demo-link
   line — reset the anchor defaults so it reads identically to the <div> cards. */
a.card {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Item 3 (Sitewide Darkmode) uses <button class="card"> instead, since
   clicking it performs an action (toggles the theme, wired in ui.js) rather
   than navigating — reset the button defaults the same way as a.card. */
button.card {
  display: block;
  width: 100%;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
}

.card-head h3 {
  font-family: 'Raleway', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--teal-dark);
  margin: 0;
}

.card .kick {
  font-family: 'Raleway-Bold', Helvetica, Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--gold-ink);
  text-transform: uppercase;
}

.card .est {
  font-family: 'Raleway-Bold', Helvetica, Arial, sans-serif;
  font-size: 12px;
  color: var(--ink-soft);
  white-space: nowrap;
  text-align: right;
}

.card .est b {
  color: var(--teal-dark);
  font-size: 13px;
}

@media (max-width: 480px) {
  .card-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .card .est {
    text-align: left;
    white-space: normal;
  }
}

.card p.body {
  margin: 10px 0 0;
  font-size: 13px;
}

.card .why {
  margin: 10px 0 0;
  padding: 9px 13px;
  background: var(--paper-warm);
  border-left: 3px solid var(--gold);
  font-size: 12.5px;
  font-style: italic;
  color: var(--ink-soft);
}

.card .why b {
  color: var(--teal-dark);
  font-style: normal;
}

/* Demo chips: outline pill with a small teal dot, signals "free demo
   available" for each à la carte feature — see docs/design/2026-08-21-
   alacarte-demo-chips/alacarte-demo-chips-options-preview.html (option E,
   chosen). */
.chip-label {
  font-family: 'Raleway-Bold', Helvetica, Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 12px 0 0;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.demo-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Raleway-Bold', Helvetica, Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 4px 12px 4px 10px;
  border-radius: 999px;
  background: transparent;
  border: 1.5px solid var(--teal-dark);
  color: var(--teal-dark);
}

.demo-chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  display: inline-block;
}

.status-pill {
  display: inline-block;
  font-family: 'Raleway-Bold', Helvetica, Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  background: transparent;
  border: 1.5px solid var(--teal-dark);
  color: var(--teal-dark);
}

/* Gold badge: soft gold fill (no outline), small, sits inline on the
   price-row title's line — see .price-row__title--pill. */
.status-pill--gold {
  border: none;
  background: var(--gold-bg);
  color: var(--gold-ink);
  font-size: 8.5px;
  padding: 2px 8px;
  letter-spacing: 0.05em;
  position: relative;
  top: -0.5px;
}

/* Price-row title carrying an inline status-pill: flex so the pill sits on
   the same line, vertically centered, and wraps as a unit if space is tight. */
.price-row__title--pill {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.group-title {
  font-family: var(--head);
  font-size: 15px;
  color: var(--teal-dark);
  margin: 22px 0 3px;
  font-weight: 700;
}

.group-sub {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 0 0 14px;
}

/* Numbered process/step list (e.g. "What Happens Next") — table-free
   CSS-grid rows (design "D" in
   docs/webguides-design/design/process-steps-options-preview.html),
   reusable by any future guide needing a step-by-step layout. Reflows
   to two lines per step below 480px instead of squeezing columns. */
.process-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}

.process-list li {
  display: grid;
  grid-template-columns: 22px 170px 1fr;
  gap: 4px 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}

.process-list li:last-child {
  border-bottom: none;
}

.process-list .step-num {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: var(--paper-warm);
  border: 1px solid var(--teal);
  color: var(--teal-dark);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.process-list .step-title {
  font-family: var(--head);
  font-weight: 700;
  color: var(--teal-dark);
  font-size: 12.5px;
}

.process-list .step-desc {
  font-size: 12.5px;
  margin: 0;
}

@media (max-width: 480px) {
  .process-list li {
    grid-template-columns: 22px 1fr;
  }

  .process-list .step-desc {
    grid-column: 2 / -1;
  }
}

/* -------------------- 10. Priority block -------------------- */

/* "Where to Start" callout on page 1 */
.priority-block {
  background: var(--paper-warm);
  border-left: 4px solid var(--teal);
  padding: 14px 18px;
  margin: 14px 0 18px;
}

.priority-block .eyebrow-row {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  margin: 0 0 4px;
}

/* Compact inline eyebrow inside a priority callout opts out of the section
   "option F" treatment — no enlarged badge, halo, or flanking rules. */
.priority-block .eyebrow-row .badge {
  width: 20px;
  height: 20px;
  font-size: 11px;
  box-shadow: none;
}

.priority-block .eyebrow-row .badge svg {
  width: 12px;
  height: 12px;
}

.priority-block .eyebrow {
  font-size: 10px;
  letter-spacing: 0.06em;
}

.priority-block p {
  margin: 0;
  font-size: 13.5px;
  font-style: italic;
  color: var(--ink-soft);
}

/* -------------------- 11. Sign-off -------------------- */

.signoff {
  margin-top: 30px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-soft);
}

/* -------------------- 12. Print -------------------- */

@page {
  size: letter;
  margin: 0.6in 0.55in;
}

@media print {
  .page {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .card,
  .rows-list li,
  .process-list li,
  .price-row,
  .note,
  .priority-block {
    break-inside: avoid;
  }

  h2,
  .group-title {
    break-after: avoid;
  }

  .rows-head {
    break-after: avoid;
  }
}

/* -------------------- 13. Back to top -------------------- */

.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--surface-accent);
  color: var(--white);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 55;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.back-to-top:hover {
  transform: translateY(-2px);
}

.back-to-top:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: none !important;
  }
}

@media print {
  .back-to-top {
    display: none;
  }
}

/* -------------------- 14. Navbar -------------------- */
/* Ported as-is from fcl-webguides/styles.css so this deliverable can sit
   inside the guides site shell. */

.navbar {
  --nav-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --nav-ease-strong: cubic-bezier(0.34, 2.4, 0.64, 1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  padding: 0 var(--space-lg);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 50;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.navbar.scrolled {
  box-shadow: var(--shadow-sm);
}

/* hide-on-scroll (driven by scripts/ui.js toggling .is-hidden) */
.navbar.is-hidden {
  transform: translateY(-100%);
}

.navbar__brand {
  position: relative;
  height: 100%;
  width: 190px;
}

.navbar__brand-text {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-family: 'Manrope', Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.01em;
  color: var(--teal-dark);
  white-space: nowrap;
  opacity: 1;
  transition: opacity 0.22s var(--nav-ease-strong), transform 0.22s var(--nav-ease-strong);
}

.navbar__brand-logo {
  position: absolute;
  width: 190px;
  top: -2px;
  left: -18px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.14s var(--nav-ease-strong), transform 0.14s var(--nav-ease-strong);
}

.navbar.is-brand-swapped .navbar__brand-text {
  opacity: 0;
  transform: translateY(-50%) translateY(-8px);
  transition: opacity 0.14s var(--nav-ease-strong), transform 0.14s var(--nav-ease-strong);
}

.navbar.is-brand-swapped .navbar__brand-logo {
  opacity: 1;
  transform: translateY(0);
}

.navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-xs);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}

.icon-btn:hover {
  background: var(--bg-light);
}

.icon-btn:active {
  transform: scale(0.92);
}

.icon-btn svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--text);
  stroke-width: 2;
}

.kebab-btn svg {
  fill: var(--text);
  stroke: none;
}

.navbar__links {
  display: flex;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-bold);
  font-size: var(--text-sm);
}

.navbar__links a {
  display: inline-flex;
  width: 100%;
  align-items: center;
  color: var(--text);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius);
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease;
}

.navbar__links a:hover {
  color: var(--teal-dark);
  background: var(--bg-light);
  text-decoration: none;
}

.navbar__links a.active {
  color: var(--orange);
  text-decoration: none;
}

/* Marks the guide matching the current page inside the Guides dropdown /
   mobile kebab menu — same "you are here" role as .active above, just
   scoped to dropdown items instead of top-level nav links. */
.nav-dropdown-item.is-current,
.kebab-menu a.is-current {
  color: var(--orange);
}

.nav-dropdown-item.is-current:hover,
.kebab-menu a.is-current:hover {
  color: var(--orange);
}

/* ---- Guides dropdown (placeholder nested pages) ---- */
.nav-dropdown-wrap {
  position: relative;
}

.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text);
  padding: var(--space-xs) var(--space-sm);
  border: none;
  background: none;
  border-radius: var(--radius);
  font-family: var(--font-bold);
  font-size: var(--text-sm);
  line-height: inherit;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}

.nav-dropdown-trigger:hover {
  color: var(--teal-dark);
  background: var(--bg-light);
}

.nav-dropdown-trigger.active {
  color: var(--orange);
}

.chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.25s var(--nav-ease);
}

.external-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  margin-left: 5px;
  opacity: 0.7;
  vertical-align: -1px;
}

/* Quarter-turn to point LEFT at the label when open (matches the mobile
   accordion caret), rather than a half-turn to point up. */
.nav-dropdown-wrap.open .chevron {
  transform: rotate(90deg);
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  min-width: 260px;
  padding: var(--space-xs);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* "Pop from top-center": scale up from 0.86 with an 8px downward settle
     on the spring ease. */
  transform: translateX(-50%) translateY(-8px) scale(0.86);
  transform-origin: top center;
  transition: opacity 0.18s ease, transform 0.3s var(--nav-ease), visibility 0.18s ease;
  z-index: 60;
}

.nav-dropdown-wrap.open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}

.nav-dropdown-item {
  display: block;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-bold);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}

.nav-dropdown-item:hover {
  background: var(--bg-light);
  color: var(--orange);
}

/* Visibly-marked placeholder items — not live links yet, so they must not
   read as normal or broken. pointer-events: none + tabindex="-1" in markup
   keep them fully inert for mouse and keyboard alike. */
.is-placeholder,
.nav-dropdown-item.is-placeholder {
  color: var(--ink-soft);
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
}

.is-placeholder:hover,
.nav-dropdown-item.is-placeholder:hover {
  background: none;
  color: var(--ink-soft);
  transform: none;
}

.coming-soon-tag {
  display: inline-block;
  margin-left: 6px;
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.8;
}

.kebab-btn {
  display: inline-flex;
}

.kebab-menu {
  display: flex;
  position: absolute;
  /* Aligns with the dropdowns: they hang 8px below their vertically-centered
     triggers, and the kebab button sits on that same line, so we drop 8px
     below it rather than the full navbar height. */
  top: calc(100% - 8px);
  right: var(--space-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: var(--space-xs);
  min-width: 250px;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Same "G" pop as the dropdowns, kept anchored top-right so it emanates
     from the kebab button. */
  transform: translateY(-8px) scale(0.86);
  transform-origin: top right;
  transition: opacity 0.18s ease, transform 0.3s var(--nav-ease), visibility 0.18s ease;
  z-index: 60;
}

.kebab-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.kebab-menu a {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-bold);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}

.kebab-menu a:hover {
  background: var(--bg-light);
  text-decoration: none;
  color: var(--orange);
}

.kebab-menu__divider {
  height: 1px;
  margin: var(--space-xs) var(--space-sm);
  background: var(--border);
}

/* Home/Guides only duplicate the desktop nav links — same breakpoint as
   .navbar__links, inverted, so they show up in the kebab menu exactly
   where the top nav disappears and nowhere else. */
.kebab-menu__mobile-nav {
  display: contents;
}

@media (min-width: 781px) {
  .kebab-menu__mobile-nav {
    display: none;
  }
}

/* Log out + Dark Mode rows ("block E": plain rows, no section header, no
   icon badge). */
.settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-xs) var(--space-sm);
  border: none;
  background: transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.15s ease;
}

.settings-item:hover {
  background: var(--bg-light);
}

.settings-item-label {
  display: block;
  font-family: var(--font-bold);
  font-size: var(--text-sm);
  color: var(--text);
}

.toggle-switch {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 12px;
  background: var(--border);
  flex-shrink: 0;
  transition: background 0.3s ease;
}

.toggle-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--nav-ease);
}

.toggle-switch.active {
  background: var(--orange);
}

.toggle-switch.active::after {
  transform: translateX(18px);
}

@media (prefers-reduced-motion: reduce) {
  .navbar,
  .icon-btn,
  .navbar__links a,
  .kebab-menu,
  .kebab-menu a,
  .toggle-switch,
  .toggle-switch::after,
  .nav-dropdown,
  .chevron,
  .nav-dropdown-item,
  .navbar__brand-text,
  .navbar__brand-logo {
    transition: none !important;
  }
}

@media (max-width: 780px) {
  .navbar__links {
    display: none;
  }
}

@media print {
  .navbar,
  .kebab-btn {
    display: none;
  }
}

/* -------------------- 15. Dark mode -------------------- */
/* Applied via data-theme="dark" on <html>, set pre-paint by the inline
   no-flash <head> script and toggled by scripts/ui.js. Re-points the same
   semantic vars used everywhere above, so navbar/content/footer all pick up
   dark styling automatically without per-selector overrides.

   Color inventory (light → dark), decided before writing any rules below:
     --teal        #39bcbe → #4fd0d2  accent (brand mark, note borders)
     --teal-dark   #004e65 → #7fd4e6  HEADINGS/TEXT role (mast, h2, item
                                      titles, note/why strongs, group-title,
                                      status-pill, navbar link hover text)
                                      — lightened because most uses are
                                      text, not background
     --teal-soft   #2a8f91 → #5cc9cc  body links
     --gold        #c99a3e → #d9ac55  why-callout border, .ref column bg
     --gold-ink    #96721f → #d9ad55  kick labels, gold status-pill text
     --ink         #16232b → #e8edf0  body text
     --ink-soft    #52646d → #9db0ba  muted/secondary text
     --paper       #ffffff → #10181d  page background
     --paper-warm  #f2f8f8 → #17232a  note/why/priority/rowhead panels
     --line        #dbe8e8 → #2a3a42  table + signoff borders
     --good        #2f6b4f → #6fcf9e  "good" tag text
     --gap         #9c4a41 → #e08277  "gap" tag text
     --good-bg     #e4efe8 → #1c3327  "good" tag background
     --gap-bg      #f4e5e3 → #33201d  "gap" tag background
     --rule        #a9c0c6 → #3a4d54  section-divider <hr>
     --orange      #f15b34 → #ff7a54  active link / toggle-switch accent
     --text        #57595c → #c7d0d4  navbar icon/link base text
     --bg-light    #f2f2f2 → #1f2b31  navbar/menu hover background
     --border      #e2e2e2 → #2a3940  navbar/menu borders
     --surface-accent  #004e65 → #004e65  UNCHANGED — badge/thead/.ref chip
                                      backgrounds paired with fixed --white
                                      text; these are small fixed-dark chips,
                                      not page surface, so they don't invert
     --surface     #ffffff → #1a262c  kebab-menu panel
     --white       #ffffff → #ffffff  UNCHANGED — fixed white text drawn on
                                      --surface-accent chips (badge, thead) */
[data-theme="dark"] {
  --teal: #4fd0d2;
  --teal-dark: #7fd4e6;
  --teal-soft: #5cc9cc;
  --gold: #d9ac55;
  --gold-ink: #d9ad55;
  --ink: #e8edf0;
  --ink-soft: #9db0ba;
  --paper: #10181d;
  --paper-warm: #17232a;
  --line: #2a3a42;
  --good: #6fcf9e;
  --gap: #e08277;
  --good-bg: #1c3327;
  --gap-bg: #33201d;
  --gold-bg: #322a17;
  --rule: #3a4d54;
  --orange: #ff7a54;
  --text: #c7d0d4;
  --bg-light: #1f2b31;
  --border: #2a3940;
  --surface: #1a262c;
}

/* -------------------- 16. Guide hub (index.html) -------------------- */
/* index.html's landing/hub layout: a list of guide-cards linking out to
   each standalone guide document (website-upgrade-options.html today,
   more over time). Reuses the same tokens as the .card/.priority-block
   deliverable styling above so hub and guide pages read as one system,
   and picks up dark mode for free since every color here is a semantic
   var already re-pointed in section 15. */

.guide-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 20px 0 28px;
}

/* Top-level landing tiles (FCL Dev / FCL Upgrades) — same card language
   as .guide-card below, but larger and side-by-side since these are the
   two primary destinations rather than a growing reference list. */
.hub-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 24px 0 28px;
}

@media (max-width: 640px) {
  .hub-tiles {
    grid-template-columns: 1fr;
  }
}

.hub-tile {
  display: block;
  border: 2px solid var(--line);
  border-radius: 6px;
  padding: 20px 22px;
  background: var(--paper);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.hub-tile:hover {
  border-color: var(--teal-dark);
  background: var(--paper-warm);
  box-shadow: 0 8px 20px rgba(0, 78, 101, 0.16), 0 2px 6px rgba(0, 78, 101, 0.1);
  transform: translateY(-3px);
}

.hub-tile h3 {
  font-family: 'Raleway-Bold', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--teal-dark);
  margin: 0 0 6px;
}

.hub-tile p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
}

.hub-tile .tag {
  display: inline-block;
  margin-left: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--surface-accent);
}

.guide-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  border: 2px solid var(--line);
  border-radius: 6px;
  padding: 16px 20px;
  background: var(--paper);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.guide-card:hover {
  border-color: var(--teal-dark);
  background: var(--paper-warm);
  box-shadow: 0 8px 20px rgba(0, 78, 101, 0.16), 0 2px 6px rgba(0, 78, 101, 0.1);
  transform: translateY(-3px);
}

/* Press state reverses the hover lift/shadow fast, same mechanism as
   .card-hover:active on new-features.html, so a click reads as a real
   press instead of the hover animation just holding. */
.guide-card:active {
  transition: border-color .1s ease, background .1s ease, box-shadow .1s ease-in, transform .1s ease-in;
  box-shadow: 0 1px 4px rgba(0, 78, 101, 0.12);
  transform: translateY(0);
}

/* Coming-soon guide cards reuse the generic .is-placeholder treatment
   (opacity, inert pointer-events) but need their own hover reset since
   .guide-card:hover is declared later in the file and would otherwise
   win over the earlier .is-placeholder:hover rule at equal specificity. */
.guide-card.is-placeholder:hover {
  border-color: var(--line);
  background: var(--paper);
  box-shadow: none;
  transform: none;
}

.guide-card__num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-accent);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Raleway-Bold', Helvetica, Arial, sans-serif;
  font-size: 14px;
}

.guide-card__body h3 {
  font-family: 'Raleway', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--teal-dark);
  margin: 0 0 4px;
}

.guide-card__body p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
}

.contact-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  background: var(--paper-warm);
  border-left: 4px solid var(--gold);
  padding: 18px 20px;
  margin: 28px 0 0;
}

.contact-cta h3 {
  font-family: 'Raleway', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--teal-dark);
  margin: 0 0 4px;
}

.contact-cta p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
}

.btn-cta {
  flex-shrink: 0;
  display: inline-block;
  background: var(--surface-accent);
  color: var(--white);
  font-family: 'Raleway-Bold', Helvetica, Arial, sans-serif;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.btn-cta:hover {
  opacity: 0.85;
}

/* Reveal-on-scroll (ui.js toggles .is-visible via IntersectionObserver).
   Scoped to .js so a [data-reveal] element stays visible if JS never runs.
   Unlike nsp-webguides' source (which reveals once and stops observing),
   .contact-cta toggles both ways here: fades/scales out again if scrolled
   back above it, not just a one-time entrance — a deliberate deviation,
   not a gap. Every .contact-cta carries data-reveal now, including on
   pages with a section eyebrow (index, upgrade-menu,
   navbar-self-service-demo) — the eyebrow itself is one-shot (see §5
   below), so it no longer competes with the CTA for a second reversible
   scroll "event" on the same page. */
.js [data-reveal] {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Eyebrow reveal — fade only (no scale), plus the flanking rules drawing
   open once the row has settled in. Dropped the shared [data-reveal]
   scale(.96->1): scaling the whole row nudges the badge a fraction of a
   pixel off-center as it settles, which read as the badge "moving" right
   as the rules started drawing. Fade avoids that entirely. One-shot: ui.js
   unobserves the eyebrow after its first reveal, so there's no exit to
   choreograph — the row stays visible once triggered. Only the
   .is-visible rules carry a transition; the base (pre-reveal) rules just
   set the hidden resting state. See
   docs/design/eyebrow-scroll-animation-options-preview.html option A. */
.js .eyebrow-row[data-reveal] {
  transform: none;
}

.js .eyebrow-row[data-reveal].is-visible {
  transition: opacity 0.4s ease;
}

.js .eyebrow-row[data-reveal] .flank {
  transform: scaleX(0);
}

.js .eyebrow-row[data-reveal] .flank--l { transform-origin: right center; }
.js .eyebrow-row[data-reveal] .flank--r { transform-origin: left center; }

.js .eyebrow-row[data-reveal].is-visible .flank {
  transform: scaleX(1);
  transition: transform 0.35s ease 0.35s;
}

@media (prefers-reduced-motion: reduce) {
  .js .eyebrow-row[data-reveal] .flank {
    transform: none;
  }
}

/* -------------------- 17. Upgrade menu -------------------- */

/* "What You Can Expect" bullet list — reuses .card's card language
   (border/radius/padding) instead of a plain <ul> so each benefit reads as
   its own scannable block rather than a wall of list items. */
.expect-list {
  display: grid;
  gap: 12px;
  margin: 20px 0 28px;
}

@media (min-width: 720px) {
  .expect-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.expect-item {
  border: 1.5px solid var(--line);
  border-radius: 6px;
  padding: 12px 16px;
  background: var(--paper);
}

.expect-item h4 {
  font-family: 'Raleway', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--teal-dark);
  margin: 0 0 4px;
}

.expect-item p {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-soft);
}


/* -------------------- 18. New Features -------------------- */

/* Link out of a .card to that item's demo — either an external site
   (Editable Navbar) or another page in this guide (Reading Font). Items
   whose "demo" is an action on this same page (Navbar Design opens the
   kebab menu, Darkmode toggles the theme) use .action-callout below
   instead, so a same-page action reads differently from "go somewhere else". */
.demo-link {
  display: inline-block;
  margin-top: 10px;
  font-family: 'Raleway-Bold', Helvetica, Arial, sans-serif;
  font-size: 12.5px;
  color: var(--teal-soft);
  text-decoration: none;
}

.demo-link:hover {
  text-decoration: underline;
}

/* Action-trigger callout for items whose "demo" happens on this same page
   (Navbar Design opens the kebab menu, Darkmode toggles the theme) instead
   of navigating away — gives that instruction its own visual weight instead
   of reusing .demo-link's plain "go to another page" styling. Badge/icon
   sizing chosen in docs/design/action-callout-b-variations-preview.html
   ("B3.2"). */
.action-callout {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--paper-warm);
  border-left: 3px solid var(--teal);
  font-size: 12.5px;
  color: var(--teal-dark);
}

.action-callout b {
  font-family: 'Raleway-Bold', Helvetica, Arial, sans-serif;
}

.action-callout__badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* --teal lightens to a pale cyan in dark mode (see section 15), which washes
   out a white icon on top of it — swap to a fixed dark navy fill instead of
   white so the pointer stays legible against the lighter badge. */
[data-theme="dark"] .action-callout__badge {
  color: var(--surface-accent);
}

.action-callout__badge svg {
  width: 21px;
  height: 21px;
}

/* Hover/press affordance for all four cards on new-features.html — moderate
   lift/shadow from the item4-card-lift-intensity-options-preview.html
   comparison ("A2"). Items 1 and 4 are <a class="card"> wrapping their real
   demo link; items 2 and 3 are <button class="card"> triggering an action
   (open the kebab menu, toggle dark mode) instead of navigating. Press
   state snaps flat fast so a click still feels responsive either way. */
.card-hover {
  transition: border-color .22s ease, box-shadow .22s cubic-bezier(.22, .61, .36, 1), transform .22s cubic-bezier(.22, .61, .36, 1);
}

.card-hover:hover {
  border-color: var(--teal-soft);
  box-shadow: 0 12px 28px rgba(0, 78, 101, 0.18);
  transform: translateY(-4px);
}

.card-hover:active {
  transition: border-color .1s ease, box-shadow .1s ease-in, transform .1s ease-in;
  box-shadow: 0 1px 4px rgba(0, 78, 101, 0.12);
  transform: translateY(0);
}

/* -------------------- 19. Reading typography -------------------- */

/* Scoped to the Reading Font demo page's article body only — matches the
   rest of the site's sans typography (same font/size as .lead body copy
   and the real h2 on website-upgrade-options.html) rather than a
   standalone serif "book" treatment, per design-preview decision in
   docs/design/reading-font-typography-options-preview.html. */
.reading-prose {
  max-width: 640px;
  margin: 0 auto;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.reading-prose p {
  margin: 0 0 20px;
  font-size: inherit;
}

.reading-prose strong {
  color: var(--ink);
}

.reading-prose h2 {
  font-family: var(--head);
  font-size: 24px;
  font-weight: 700;
  color: var(--teal-dark);
}

.reading-prose figure {
  margin: 24px 0;
}

.reading-prose figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.reading-prose figcaption {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-soft);
  text-align: center;
}

/* -------------------- 20. Checklist pattern -------------------- */

/* Static styled list for a scope-of-work checklist — a checkmark badge
   instead of a real interactive checkbox, since this is public
   scope-of-work content, not a progress tracker (that lives in a separate
   internal tracking doc). Reuses .expect-item's card language for visual
   consistency with the Upgrade Menu's "What You Can Expect" list. */
.check-list {
  display: grid;
  gap: 10px;
  margin: 20px 0 28px;
  /* Real <ol> for machine readers: reset the native marker + indent, since
     the numbered badge is the visual number. role="list" on the element
     keeps list semantics in Safari/VoiceOver where list-style:none can
     otherwise strip them. */
  list-style: none;
  padding: 0;
}

.check-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  padding: 12px 16px;
  background: var(--paper);
}

.check-item__mark {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  /* Option D — "soft tint": paper-warm fill, teal ring, navy (--teal-dark)
     check. A quieter badge that blends into the card rather than the loud
     navy fill. All three are theme tokens, so in dark mode the fill flips
     dark and the check/ring flip to light cyan — check stays legible in
     both themes. */
  background: var(--paper-warm);
  border: 1.5px solid var(--teal);
  color: var(--teal-dark);
  line-height: 1;
  margin-top: 1px;
}

.check-item__mark svg {
  width: 13px;
  height: 13px;
}

.check-item h4 {
  font-family: 'Raleway', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--teal-dark);
  margin: 0 0 4px;
}

.check-item p {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-soft);
}

/* -------------------- 21. Guide figure + inline code -------------------- */

/* Standalone screenshot/figure for regular guide pages (e.g. the WP-Admin
   Menus shot on navbar-self-service-demo.html). Mirrors the .reading-prose
   figure treatment but isn't scoped to the reading article, so any guide can
   drop in an image with a caption. Uses only semantic tokens, so it picks up
   dark mode for free. */
.guide-figure {
  margin: 22px 0;
}

.guide-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.guide-figure figcaption {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-align: center;
}

/* Inline code (e.g. the `navlink-icon icon-new` CSS-class snippet) — subtle
   warm chip so a code token reads as literal text a user would type without
   shouting on the page. */
code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--paper-warm);
  color: var(--teal-dark);
  padding: 1px 5px;
  border-radius: 4px;
}

/* -------------------- 22. At a Glance count column -------------------- */

/* The "At a Glance" table pattern folds its item count into the Category
   cell as a small pill and runs 2-column (Category / Why), instead of
   stranding a single digit in its own 1fr column. Scoped modifier applied
   alongside --compare so multi-column comparison tables keep their 3-col
   layout untouched; the 560px collapse below re-flattens it to one column
   on mobile. */
.rows-head--glance,
.rows-list--glance > li {
  grid-template-columns: 30% 1fr;
}

/* Category chip becomes a vertical stack: name on top, count pill beneath. */
.rows-list--glance .cat-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.rows-list--glance .count-pill {
  display: inline-block;
  font-family: 'Raleway-Bold', Helvetica, Arial, sans-serif;
  font-size: 9px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--teal-dark);
  /* --paper (not --paper-warm) so the pill reads as a distinct chip on top
     of the paper-warm .row-head background it sits inside. */
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
}

@media (max-width: 560px) {
  /* Plain header line — category name (left) and count pill (right) on one
     row, no shading, with the "why" text below and a hairline between rows.
     The repeated "What Improves" label is dropped; the text stands on its
     own. Placed after the desktop .cat-cell rule above so the flex-row
     override wins over the desktop column layout. */
  .rows-list--glance > li {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }

  .rows-list--glance > li:last-child {
    border-bottom: none;
  }

  .rows-list--glance .cat-cell {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: none;
    padding: 0;
    margin-bottom: 5px;
  }

  .rows-list--glance .count-pill {
    flex-shrink: 0;
  }

  .rows-list--glance .row-cell {
    line-height: 1.3;
  }

  .rows-list--glance .col-label {
    display: none;
  }
}

/* ============================================================
   23. Mobile kebab: Home row + nested accordion groups
   ============================================================
   The kebab sheet's mobile nav: Home as a peer row, then the
   Upgrades / Live Demos groups as collapsible accordions.
     - reveal "C": grid-template-rows 0fr->1fr height slide on the
       spring ease
     - caret quarter-turns to point LEFT at the group title when open
   (The desktop dropdowns' "G" open animation, the kebab alignment,
   and the chevron quarter-turn live with the base navbar rules above;
   the bottom "block E" rows need no extra CSS — the markup simply drops
   the old section header and icon badge.)
   ============================================================ */

/* Home as a peer of the group rows (navy, bold, no caret) */
.kebab-home {
  display: block;
  padding: 11px var(--space-sm);
  border-radius: var(--radius);
  font-family: var(--font-bold);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--teal-dark);
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}

.kebab-home:hover {
  background: var(--bg-light);
  color: var(--teal-dark);
}

.kebab-home.is-current {
  color: var(--orange);
}

/* Separator above each group: a spaced divider matching .kebab-menu__divider
   (same var(--space-sm) inset + var(--space-xs) vertical margin) so every
   separating line in the sheet is the same length and has breathing room
   between the line and the button below it. Applied to every group,
   including the first, so Home is separated from Upgrades the same way. */
.kebab-group::before {
  content: "";
  display: block;
  height: 1px;
  margin: var(--space-xs) var(--space-sm);
  background: var(--border);
}

.kebab-group__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 11px var(--space-sm);
  border: 0;
  border-radius: var(--radius);
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-bold);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--teal-dark);
}

.kebab-group__btn:hover {
  background: var(--bg-light);
}

/* Caret is a border wedge. Closed = rotate(45deg) -> tip points DOWN
   ("tap to expand"). Open adds a quarter turn to rotate(135deg) -> the
   tip swings to point LEFT, at the group title. Rides the same spring
   ease as the height slide so caret and panel move as one. */
.kebab-group__caret {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-right: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  transform: rotate(45deg);
  transition: transform 0.34s var(--nav-ease);
}

.kebab-group.open .kebab-group__caret {
  transform: rotate(135deg);
}

/* Reveal "C": animate natural height via grid-template-rows 0fr -> 1fr.
   The inner wrapper must clip overflow and allow min-height:0 so the
   grid row can collapse fully. */
.kebab-group__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.34s var(--nav-ease);
}

.kebab-group.open .kebab-group__panel {
  grid-template-rows: 1fr;
}

.kebab-group__inner {
  overflow: hidden;
  min-height: 0;
}

/* The group's links sit in a plain div (not the kebab's flex column), so
   set them block and indent them beneath their header. */
.kebab-group__inner a {
  display: block;
  padding-left: calc(var(--space-sm) + 12px);
}

@media (prefers-reduced-motion: reduce) {
  .kebab-group__caret,
  .kebab-group__panel {
    transition: none !important;
  }
}