/* Punch · Content Wireframe — canonical stylesheet
 *
 * Newspaper-greyscale wireframe rendering for any Punch client website project.
 * Single visual restraint: no color, no imagery — EXCEPT primary CTAs which
 * use Punch red (#FF1449). Everything else (layout, structure, interactivity,
 * animation) is the real thing.
 *
 * TYPOGRAPHY INHERITS FROM THE CLIENT'S FIGMA FORK.
 *
 * The skill copies the project's `sandbox/tokens.css` and
 * `sandbox/text-styles.css` into `sandbox/wireframe/` on every render. The
 * @imports below pull them in; if either file is missing, fonts gracefully
 * fall back to system sans / mono via the var(...) defaults.
 *
 * NAVIGATION + FOOTER INHERIT FROM THE DESIGNED HOMEPAGE.
 *
 * The skill extracts <header> and <footer> from `sandbox/index.html` (the
 * homepage that's been picked and polished at Gate 3) and applies them to
 * every wireframe page. The newspaper-greyscale color overrides in this file
 * strip the homepage's color tokens without touching its structure or typography.
 *
 * SEO heading labels (H1, H2, H3...) ride next to every in-content heading
 * — a CSS pseudo-element handles them, no markup required.
 *
 * LIGHT / DARK THEME TOGGLE.
 *
 * The :root token block is the LIGHT NEWSPAPER variant; the
 * [data-theme="dark"] block is the DARK NEWSPAPER variant. Both are
 * greyscale — only paper/ink invert. RGB tokens drive every rgba() tint
 * so the whole site retones with one attribute flip. See _wireframe.js
 * for the toggle handler and the inline FOUC-prevention init script
 * documented at the top of the SKILL.md.
 */

/* Pull the client's tokens (color + spacing + typography variables) and
 * text-style class system (.h1 / .h2 / .body / .eyebrow / .button etc.).
 * Imports are relative — the skill copies both files into this directory. */
@import url("./tokens.css");
@import url("./text-styles.css");

/* ============================================================
 * Variables (self-contained, no external token deps)
 * ============================================================ */
:root {
  /* Greyscale palette. The two RGB triplets below drive every rgba()
   * tint, hairline, and surface used across the wireframe — so flipping
   * them inside a `[data-theme="dark"]` block is enough to invert the
   * entire palette without touching individual rules. */
  --wf-ink-rgb:   26, 26, 26;    /* dark charcoal ink (light mode default) */
  --wf-paper-rgb: 238, 238, 238; /* neutral light gray paper               */

  --wf-bg: rgb(var(--wf-paper-rgb));
  --wf-bg-elev: #F4F4F4;        /* slightly lighter (raised cards / hover) */
  --wf-bg-deep: #E5E5E5;        /* slightly darker (splash background)     */
  --wf-text: rgb(var(--wf-ink-rgb));
  --wf-text-body:       rgba(var(--wf-ink-rgb), 0.82);
  --wf-text-dim:        rgba(var(--wf-ink-rgb), 0.60);
  --wf-text-muted:      rgba(var(--wf-ink-rgb), 0.40);
  --wf-hairline:        rgba(var(--wf-ink-rgb), 0.16);
  --wf-hairline-strong: rgba(var(--wf-ink-rgb), 0.34);
}

/* Dark-mode override — flips ink/paper. Most components inherit
 * automatically via the rgba(var(--wf-ink-rgb), X) pattern; surfaces
 * that need a specific dark shade override their hex below. */
[data-theme="dark"] {
  --wf-ink-rgb:   237, 237, 238; /* off-white ink */
  --wf-paper-rgb: 38, 39, 43;    /* neutral dark grey paper */

  --wf-bg-elev: #2F3036;
  --wf-bg-deep: #1C1D21;
}

/* Logo color handling. NEVER invert a colored client logo — inversion mangles
 * the brand colors. The renderer emits BOTH a full-color logo <img>
 * (.wf-logo--full) and a reverse logo <img> (.wf-logo--reverse, from
 * logo-reverse.svg) in the nav and the splash; we show the correct one per
 * theme and explicitly cancel any inherited invert filter. */
.wf-nav__brand-logo,
.wf-opening__brand img { filter: none; }
/* Brand-scoped so these out-specify the `.wf-nav__brand-logo { display:block }`
 * and `.wf-opening__brand img { display:block }` rules below (which would
 * otherwise win on source order / higher specificity and keep the reverse logo
 * visible). Light: show full, hide reverse. Dark: hide full, show reverse. */
.wf-nav__brand .wf-logo--reverse,
.wf-opening__brand .wf-logo--reverse { display: none; }
[data-theme="dark"] .wf-nav__brand .wf-logo--full,
[data-theme="dark"] .wf-opening__brand .wf-logo--full { display: none; }
[data-theme="dark"] .wf-nav__brand .wf-logo--reverse,
[data-theme="dark"] .wf-opening__brand .wf-logo--reverse { display: block; }

:root {
  --wf-font-display: "Hubot Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wf-font-body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wf-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --wf-container: 1200px;
  --wf-gutter: 24px;

  /* Logo sizing. The 64px nav bar needs a substantial mark — 16px reads as a
     favicon. Bump to 32px in the bar and 24px on the splash. Token so a client
     fork can tune it without hunting through rules. */
  --wf-nav-logo-h: 32px;
  --wf-opening-logo-h: 24px;

  --wf-s1: 4px;
  --wf-s2: 8px;
  --wf-s3: 12px;
  --wf-s4: 16px;
  --wf-s5: 24px;
  --wf-s6: 32px;
  --wf-s7: 40px;
  --wf-s8: 56px;
  --wf-s9: 72px;
  --wf-s10: 96px;
  --wf-s11: 128px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body.wireframe {
  margin: 0;
  font-family: var(--wf-font-body);
  background: var(--wf-bg);
  color: var(--wf-text-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 150ms ease;
}
a:hover { opacity: 0.7; }

img, svg { display: block; max-width: 100%; }

::selection { background: var(--wf-text); color: var(--wf-bg); }

/* Wireframe-stage toolbox — fixed flex container in the bottom-left
 * that holds the View Instructions + Theme Toggle pills. Flex `gap`
 * keeps the two pills cleanly spaced no matter how long their labels
 * are. The whole group disappears with the rest of the wireframe
 * scaffolding at design phase. */
.wf-toolbox {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  max-width: calc(100vw - 36px);
}

/* Shared pill style — both buttons share padding, type, and shadow. */
.wf-view-instructions,
.wf-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--wf-text);
  color: var(--wf-bg);
  border: 1px solid var(--wf-text);
  border-radius: 999px;
  font-family: var(--wf-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(var(--wf-ink-rgb), 0.18);
  transition: opacity 200ms ease, transform 200ms ease, background 200ms ease;
  opacity: 0.7;
}
.wf-view-instructions:hover,
.wf-view-instructions:focus-visible,
.wf-theme-toggle:hover,
.wf-theme-toggle:focus-visible {
  opacity: 1;
  transform: translateY(-2px);
  outline: none;
}
.wf-view-instructions svg,
.wf-theme-toggle__icon { color: currentColor; }

/* Theme-toggle icon swap — moon in light mode, sun in dark. */
.wf-theme-toggle__icon--sun  { display: none; }
[data-theme="dark"] .wf-theme-toggle__icon--moon { display: none; }
[data-theme="dark"] .wf-theme-toggle__icon--sun  { display: inline-block; }

@media (max-width: 640px) {
  .wf-view-instructions span,
  .wf-theme-toggle__label { display: none; }
  .wf-view-instructions,
  .wf-theme-toggle { padding: 10px; }
}

/* ============================================================
 * Line-break auto-layer — handles ~80%+ of awkward wraps without
 * needing manual <br> tags in the briefs. Headlines stay tight via
 * text-wrap: balance; body copy stays even-rivered via text-wrap:
 * pretty and gets automatic hyphenation as a last resort. Buttons
 * never break mid-label.
 * Author override: a literal `\n` in any brief headline string becomes
 * <br> in the rendered wireframe — use sparingly, CSS handles most.
 * ============================================================ */
h1, h2, h3, h4 {
  text-wrap: balance;
}
p, li, dd, blockquote {
  text-wrap: pretty;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.wf-main h1 { max-width: 22ch; }
.wf-main h2 { max-width: 28ch; }
.wf-main h3 { max-width: 36ch; }
.wf-main p, .wf-main li, .wf-main dd, .wf-main blockquote { max-width: 64ch; }
button, .wf-cta, .wf-nav__cta, .wf-card__cta { white-space: nowrap; }

/* ============================================================
 * NAV — sticky horizontal bar with clean dropdowns
 * ============================================================ */
.wf-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(var(--wf-paper-rgb), 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--wf-hairline);
  padding: 0;
}
.wf-nav__inner {
  display: flex;
  align-items: stretch;
  height: 64px;
  max-width: 100%;
}
.wf-nav__brand {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--wf-s6);
  color: var(--wf-text);
  text-decoration: none;
  border-right: 1px solid var(--wf-hairline);
  flex-shrink: 0;
}
.wf-nav__brand:hover { background: rgba(var(--wf-ink-rgb), 0.04); opacity: 1; }
.wf-nav__brand-logo {
  height: var(--wf-nav-logo-h);
  width: auto;
  display: block;
  color: var(--wf-text);  /* SVG paths use currentColor */
  fill: currentColor;
}

.wf-nav__menu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  align-items: stretch;
}
@media (min-width: 960px) {
  .wf-nav__menu { display: flex; }
}
.wf-nav__item {
  display: flex;
  align-items: stretch;
  border-right: 1px solid var(--wf-hairline);
  flex: 1 1 0;
  position: relative;
}
.wf-nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 64px;
  padding: 0 var(--wf-s4);
  background: transparent;
  border: none;
  font-family: var(--wf-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wf-text-dim);
  text-decoration: none;
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease;
}
.wf-nav__link:hover { color: var(--wf-text); background: rgba(var(--wf-ink-rgb), 0.04); opacity: 1; }
/* Top-bar trigger active state: underline indicator anchored at the
 * bottom of the bar — like avinc's current-item indicator. */
.wf-nav__link--top.is-active {
  color: var(--wf-text);
  position: relative;
}
.wf-nav__link--top.is-active::after {
  content: "";
  position: absolute;
  left: var(--wf-s4);
  right: var(--wf-s4);
  bottom: 0;
  height: 2px;
  background: var(--wf-text);
}

/* ============================================================
 * MEGA-PANEL — full-width overlay anchored below the top nav bar.
 * One panel per top-level item (Missions, Products, Company, News,
 * Careers). Triggered by click; only one open at a time. Layout
 * mirrors avinc.com — small label + close X in the header, lead
 * column on the left, multi-column grid on the right.
 * ============================================================ */
.wf-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  /* Fill the viewport below the nav so the panel reads as a full
   * takeover (like avinc) instead of a short shelf. Internal content
   * scrolls when it exceeds the available height. */
  min-height: calc(100vh - 64px);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  background: var(--wf-bg-elev);
  border-bottom: 1px solid var(--wf-hairline-strong);
  box-shadow: 0 12px 32px rgba(var(--wf-ink-rgb), 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 240ms ease,
              transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
              visibility 240ms;
  z-index: 49;
}
.wf-mega.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.wf-mega__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--wf-s7) var(--wf-s7) var(--wf-s8);
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.wf-mega__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--wf-s6);
}
.wf-mega__label {
  font-family: var(--wf-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wf-text-dim);
}
.wf-mega__close {
  background: transparent;
  border: 1px solid var(--wf-hairline);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wf-text);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.wf-mega__close:hover {
  background: rgba(var(--wf-ink-rgb), 0.08);
  border-color: var(--wf-hairline-strong);
  transform: rotate(90deg);
}
.wf-mega__close:focus-visible {
  outline: 2px solid var(--wf-text);
  outline-offset: 2px;
}
.wf-mega__body {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 3fr;
  gap: var(--wf-s7);
}
@media (max-width: 960px) {
  .wf-mega__body { grid-template-columns: 1fr; gap: var(--wf-s5); }
}
.wf-mega__lead {
  display: flex;
  flex-direction: column;
  gap: var(--wf-s4);
}
.wf-mega__desc {
  font-family: var(--wf-font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--wf-text-body);
  margin: 0;
  max-width: 40ch;
}
.wf-mega__lead-cta {
  font-family: var(--wf-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wf-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--wf-hairline-strong);
  align-self: flex-start;
  transition: gap 200ms ease, border-color 160ms ease;
}
.wf-mega__lead-cta:hover { gap: 14px; border-bottom-color: var(--wf-text); opacity: 1; }

.wf-mega__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--wf-s6) var(--wf-s5);
}
/* All mega-panel grids share the same airy 2-column rhythm — matches
 * avinc.com and keeps every panel visually consistent regardless of
 * child count. Long product lists still flow into internal sub-columns
 * via the `wf-mega__col-list--multi` modifier. */
.wf-mega__grid,
.wf-mega__grid[data-cols="2"],
.wf-mega__grid[data-cols="3"],
.wf-mega__grid[data-cols="4"],
.wf-mega__grid[data-cols="5"],
.wf-mega__grid[data-cols="6"],
.wf-mega__grid--products {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--wf-s7) var(--wf-s7);
}
@media (max-width: 480px) {
  .wf-mega__grid,
  .wf-mega__grid[data-cols],
  .wf-mega__grid--products { grid-template-columns: 1fr; }
}
.wf-mega__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wf-mega__col-title {
  font-family: var(--wf-font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--wf-text);
  text-decoration: none;
  border-bottom: 1px solid var(--wf-hairline);
  padding-bottom: 8px;
  transition: opacity 160ms ease;
}
.wf-mega__col-title:hover { opacity: 0.7; }
.wf-mega__col-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Multi-column variant — applied when a family has 6+ products so the
 * column doesn't tower over its neighbors. Flips from flex-column to
 * CSS columns so items flow into two sub-columns within the same card. */
.wf-mega__col-list--multi {
  display: block;
  column-count: 2;
  column-gap: var(--wf-s4);
}
.wf-mega__col-list--multi li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 6px;
}
@media (max-width: 1100px) {
  /* When the outer grid collapses to 2 cols, each family card is wider
   * but two sub-columns inside still read OK. Keep the variant. */
}
@media (max-width: 600px) {
  /* On single-column outer layout, collapse multi back to single column
   * so the list isn't a postage-stamp grid. */
  .wf-mega__col-list--multi { column-count: 1; }
}
.wf-mega__col-list a {
  font-family: var(--wf-font-body);
  font-size: 13px;
  line-height: 1.4;
  color: var(--wf-text-body);
  text-decoration: none;
  transition: color 160ms ease, opacity 160ms ease;
}
.wf-mega__col-list a:hover { color: var(--wf-text); opacity: 1; }
.wf-mega__col-summary {
  font-family: var(--wf-font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--wf-text-body);
  margin: 0;
}
.wf-mega__col-more {
  font-family: var(--wf-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wf-text-dim);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  transition: color 160ms ease, gap 200ms ease;
}
.wf-mega__col-more:hover { color: var(--wf-text); gap: 10px; opacity: 1; }

.wf-nav__cta {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 0 var(--wf-s6);
  background: var(--wf-text);
  color: var(--wf-bg) !important;
  font-family: var(--wf-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-left: 1px solid var(--wf-hairline);
  flex-shrink: 0;
  transition: background 150ms ease;
}
.wf-nav__cta:hover { background: rgba(var(--wf-ink-rgb), 0.85); opacity: 1; }
@media (min-width: 720px) { .wf-nav__cta { display: inline-flex; } }

/* Mobile collapse */
@media (max-width: 959px) {
  .wf-nav__menu {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--wf-bg-elev);
    border-bottom: 1px solid var(--wf-hairline);
    flex-direction: column;
    padding: var(--wf-s3) 0;
  }
  .wf-nav__menu.is-mobile-open { display: flex; }
  .wf-nav__item { border-right: none; border-bottom: 1px solid var(--wf-hairline); }
  .wf-nav__link { justify-content: flex-start; padding: 0 var(--wf-s5); height: 48px; }
  /* Mega-panel fills viewport on mobile so the full content fits. */
  .wf-mega { position: fixed; top: 64px; bottom: 0; overflow-y: auto; }
  .wf-mega__inner { padding: var(--wf-s5) var(--wf-s4); }
}

/* ============================================================
 * MAIN container + sections
 * ============================================================ */
.wf-main {
  position: relative;
  z-index: 1;
}
section[data-section] {
  position: relative;
  padding: var(--wf-s10) var(--wf-gutter);
  max-width: var(--wf-container);
  margin: 0 auto;
  border-bottom: 1px solid var(--wf-hairline);
}
section[data-section]:last-of-type { border-bottom: none; }

/* Hero sits closer to a full-viewport height like a real marketing site.
 * Content vertically centered inside the available space. Clamp keeps it
 * sensible on tall vs short displays. */
section[data-section="hero"] {
  min-height: clamp(560px, 82vh, 820px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--wf-s11, 96px);
  padding-bottom: var(--wf-s11, 96px);
}

/* ============================================================
 * Reveal animation
 * ============================================================ */
.wf-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.wf-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .wf-reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
 * Headings — display face, with SEO labels
 * ============================================================ */
.wf-main h1, .wf-main h2, .wf-main h3, .wf-main h4, .wf-main h5 {
  font-family: var(--wf-font-display);
  color: var(--wf-text);
  margin: 0 0 var(--wf-s5);
  font-weight: 600;
  position: relative;
}
section[data-section="hero"] h1 {
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 var(--wf-s5);
  max-width: 18ch;
}
section[data-section] h2 {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  margin: 0 0 var(--wf-s6);
  max-width: 28ch;
}
section[data-section] h2.wf-lead {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  margin: 0 0 var(--wf-s7);
  max-width: 32ch;
}
/* Intro paragraph — used when a section's lead is paragraph-length
 * rather than a single short headline. Reads as normal-case prose so
 * long content doesn't get rendered in unreadable all-caps. */
section[data-section] p.wf-intro {
  font-family: var(--wf-font-body);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.55;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--wf-text);
  font-weight: 400;
  margin: 0 0 var(--wf-s7);
  max-width: 64ch;
}
section[data-section] p.wf-intro::before {
  /* No SEO chip on intro paragraphs — they're prose, not a heading. */
  content: none;
}
section[data-section] h3 {
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-transform: none;
  font-weight: 600;
  margin: 0 0 var(--wf-s3);
}
section[data-section] p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--wf-text-body);
  margin: 0 0 var(--wf-s4);
  max-width: 64ch;
}

/* Heading hierarchy chips removed from wireframe pages — see the Type
 * Hierarchy sandbox on the splash screen for the H1–H4 / body / eyebrow
 * reference. Keeping wireframe pages clean of any wireframe-stage label
 * is the standing rule. */

/* Eyebrow */
.wf-eyebrow {
  font-family: var(--wf-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wf-text-dim);
  margin: 0 0 var(--wf-s5);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.wf-eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--wf-hairline-strong);
}
.wf-subhead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--wf-text-body);
  margin: 0 0 var(--wf-s6);
  max-width: 58ch;
}

/* CTAs */
.wf-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--wf-s2);
  font-family: var(--wf-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 13px 22px;
  border: 1px solid var(--wf-text);
  color: var(--wf-text);
  background: transparent;
  text-decoration: none;
  margin-right: var(--wf-s3);
  margin-top: var(--wf-s3);
  transition: background 200ms ease, color 200ms ease;
}
.wf-cta:hover { background: var(--wf-text); color: var(--wf-bg); opacity: 1; }
.wf-cta + .wf-cta {
  border-color: var(--wf-hairline-strong);
  color: var(--wf-text-body);
}
.wf-cta-section {
  background: var(--wf-bg-deep);
  border-top: 1px solid var(--wf-hairline);
  border-bottom: 1px solid var(--wf-hairline);
  margin-left: calc(var(--wf-gutter) * -1);
  margin-right: calc(var(--wf-gutter) * -1);
  padding-left: var(--wf-gutter);
  padding-right: var(--wf-gutter);
}

/* ============================================================
 * Card-level type / CTA shared across all patterns
 * ============================================================ */
.wf-card__eyebrow {
  font-family: var(--wf-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wf-text-dim);
  margin: 0 0 var(--wf-s3);
}
.wf-card__title {
  font-family: var(--wf-font-display);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--wf-text);
  margin: 0 0 var(--wf-s4);
  max-width: 16ch;
}
.wf-card__body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--wf-text-body);
  margin: 0 0 var(--wf-s5);
  max-width: 56ch;
}
.wf-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--wf-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wf-text);
  text-decoration: none;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--wf-hairline-strong);
  transition: border-color 200ms ease, gap 200ms ease;
}
.wf-card__cta:hover {
  border-bottom-color: var(--wf-text);
  gap: 14px;
  opacity: 1;
}

/* Uniform placeholder box — appears on every card's visual side. */
.wf-placeholder {
  width: 100%;
  min-height: 220px;
  border: 1px solid var(--wf-hairline);
  background:
    linear-gradient(135deg, transparent calc(50% - 0.5px), var(--wf-hairline) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(45deg, transparent calc(50% - 0.5px), var(--wf-hairline) 50%, transparent calc(50% + 0.5px));
  opacity: 0.6;
  transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
.wf-reveal.is-revealed .wf-placeholder { opacity: 1; }

/* ============================================================
 * PATTERN: Sticky stacked cards (5+ items)
 * ============================================================ */
.wf-stack {
  margin: var(--wf-s7) 0 0;
  display: flex;
  flex-direction: column;
}
.wf-stack__card {
  position: sticky;
  top: 80px;
  background: var(--wf-bg);
  border-top: 1px solid var(--wf-hairline);
  padding: var(--wf-s7) 0 var(--wf-s7);
  z-index: calc(10 + var(--stack-i, 0));
  margin-bottom: var(--wf-s5);
}
.wf-stack__card:first-child { border-top: none; }
.wf-stack__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wf-s6);
  padding-top: var(--wf-s6);
}
@media (min-width: 960px) {
  .wf-stack__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--wf-s7);
  }
}
.wf-stack__content {
  align-self: center;
  max-width: 540px;
}
.wf-stack__visual {
  min-height: 220px;
  display: flex;
  align-items: stretch;
}

/* ============================================================
 * PATTERN: Tabs (4 items)
 * ============================================================ */
.wf-tabs {
  margin: var(--wf-s7) 0 0;
  border-top: 1px solid var(--wf-hairline);
  border-bottom: 1px solid var(--wf-hairline);
}
.wf-tabs__bar {
  display: grid;
  grid-template-columns: 1fr;
  border-bottom: 1px solid var(--wf-hairline);
}
@media (min-width: 720px) {
  .wf-tabs__bar { grid-template-columns: repeat(4, 1fr); }
}
.wf-tabs__btn {
  background: transparent;
  border: none;
  border-right: 1px solid var(--wf-hairline);
  padding: var(--wf-s5) var(--wf-s4);
  font-family: var(--wf-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wf-text-dim);
  cursor: pointer;
  text-align: left;
  transition: color 200ms ease, background-color 200ms ease;
}
.wf-tabs__btn:last-child { border-right: none; }
.wf-tabs__btn:hover { color: var(--wf-text); background: rgba(var(--wf-ink-rgb), 0.03); }
.wf-tabs__btn.is-active {
  color: var(--wf-text);
  background: rgba(var(--wf-ink-rgb), 0.04);
  position: relative;
}
.wf-tabs__btn.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--wf-text);
}
.wf-tabs__panels { padding: var(--wf-s7) 0; }
.wf-tabs__panel { display: none; }
.wf-tabs__panel.is-active { display: block; }
.wf-tabs__panel-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wf-s6);
  align-items: center;
}
@media (min-width: 960px) {
  .wf-tabs__panel-inner { grid-template-columns: 1fr 1fr; gap: var(--wf-s7); }
}
.wf-tabs__panel-content { max-width: 540px; }
.wf-tabs__panel-visual {
  min-height: 180px;
  display: flex;
  align-items: stretch;
}
.wf-tabs__panel-visual .wf-placeholder { min-height: 180px; }

/* ============================================================
 * PATTERN: N-up card grid (3 or fewer items)
 * ============================================================ */
.wf-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wf-s7);
  margin: var(--wf-s7) 0 0;
}
@media (min-width: 720px) {
  .wf-cols--2 { grid-template-columns: 1fr 1fr; }
  .wf-cols--3 { grid-template-columns: repeat(3, 1fr); }
}
.wf-card {
  display: flex;
  flex-direction: column;
  gap: var(--wf-s5);
}
.wf-card__visual {
  min-height: 200px;
  display: flex;
  align-items: stretch;
}
.wf-card .wf-card__title {
  font-size: clamp(20px, 1.8vw, 26px);
}

/* ============================================================
 * PATTERN: Vertical tabs (4 items, alternative)
 * Tab list on left, panel on right
 * ============================================================ */
.wf-vtabs {
  margin: var(--wf-s7) 0 0;
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--wf-hairline);
  border-bottom: 1px solid var(--wf-hairline);
}
@media (min-width: 720px) {
  .wf-vtabs { grid-template-columns: 280px 1fr; }
}
.wf-vtabs__bar {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--wf-hairline);
}
@media (max-width: 719px) {
  .wf-vtabs__bar {
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--wf-hairline);
  }
}
.wf-vtabs__btn {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--wf-hairline);
  padding: var(--wf-s5);
  font-family: var(--wf-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--wf-text-dim);
  cursor: pointer;
  text-align: left;
  transition: color 200ms ease, background-color 200ms ease;
  position: relative;
  white-space: normal;
  word-break: break-word;
  hyphens: auto;
}
.wf-vtabs__btn:last-child { border-bottom: none; }
.wf-vtabs__btn:hover { color: var(--wf-text); background: rgba(var(--wf-ink-rgb), 0.03); }
.wf-vtabs__btn.is-active {
  color: var(--wf-text);
  background: rgba(var(--wf-ink-rgb), 0.04);
}
.wf-vtabs__btn.is-active::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  right: -1px;
  width: 2px;
  background: var(--wf-text);
}
@media (max-width: 719px) {
  .wf-vtabs__btn { border-bottom: none; border-right: 1px solid var(--wf-hairline); }
  .wf-vtabs__btn.is-active::after { top: auto; bottom: -1px; left: 0; right: 0; width: auto; height: 2px; }
}
.wf-vtabs__panels {
  padding: var(--wf-s7) var(--wf-s7);
  display: flex;
  flex-direction: column;
  min-height: 360px;
}
.wf-vtabs__panel { display: none; flex: 1 1 auto; flex-direction: column; }
.wf-vtabs__panel.is-active { display: flex; }
.wf-vtabs__visual {
  margin-top: var(--wf-s5);
  flex: 1 1 auto;
  min-height: 160px;
  display: flex;
  align-items: stretch;
}
.wf-vtabs__visual .wf-placeholder { min-height: 160px; }

/* ============================================================
 * PATTERN: 2x2 grid (4 items, alternative)
 * All cards visible simultaneously, no visual placeholders
 * ============================================================ */
.wf-grid22 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: var(--wf-s7) 0 0;
  border-top: 1px solid var(--wf-hairline);
  border-left: 1px solid var(--wf-hairline);
}
@media (min-width: 720px) {
  .wf-grid22 { grid-template-columns: 1fr 1fr; }
}
.wf-grid22__cell {
  padding: var(--wf-s7) var(--wf-s6);
  border-right: 1px solid var(--wf-hairline);
  border-bottom: 1px solid var(--wf-hairline);
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.wf-grid22__cell .wf-card__title {
  font-size: clamp(20px, 1.8vw, 26px);
  margin-bottom: var(--wf-s4);
}
.wf-grid22__cell .wf-card__body {
  font-size: 15px;
  margin-bottom: var(--wf-s4);
}

/* ============================================================
 * PATTERN: Numbered vertical list (3 items, alternative)
 * Compact left-rail mono numbers + title + body
 * ============================================================ */
.wf-numlist {
  margin: var(--wf-s7) 0 0;
  border-top: 1px solid var(--wf-hairline);
}
.wf-numlist__row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--wf-s5);
  padding: var(--wf-s7) 0;
  border-bottom: 1px solid var(--wf-hairline);
  align-items: start;
}
.wf-numlist__num {
  font-family: var(--wf-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wf-text-muted);
  padding-top: 6px;
}
.wf-numlist__body { max-width: 64ch; }
.wf-numlist__title {
  font-family: var(--wf-font-display);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--wf-text);
  margin: 0 0 var(--wf-s3);
}
.wf-numlist__text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--wf-text-body);
  margin: 0;
}

/* ============================================================
 * PATTERN: Team grid (5+ items with short bios — Leadership, etc.)
 * 3-up on wide / 2-up on tablet / 1-up on mobile, with a portrait
 * placeholder above each card's name + title + bio.
 * ============================================================ */
.wf-team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wf-s7) var(--wf-s6);
  margin: var(--wf-s7) 0 0;
}
@media (min-width: 720px) {
  .wf-team-grid { grid-template-columns: repeat(2, 1fr); }
}
.wf-team-card {
  display: flex;
  flex-direction: column;
  gap: var(--wf-s4);
}
.wf-team-card__visual {
  width: 100%;
  display: flex;
}
.wf-placeholder--portrait {
  aspect-ratio: 4 / 5;
  min-height: 0;
  width: 100%;
}
.wf-team-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--wf-s3);
}
.wf-team-card__name {
  font-family: var(--wf-font-display);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--wf-text);
  margin: 0;
}
.wf-team-card__title {
  font-family: var(--wf-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wf-text-dim);
  line-height: 1.4;
  margin: 4px 0 0;
}
.wf-team-card__bio {
  font-size: 14px;
  line-height: 1.55;
  color: var(--wf-text-dim);
  margin: 0;
}

/* Team-card profile link — quiet editorial "View profile →" CTA
 * No box, no border-radius button. Just a small caps label with arrow
 * that opens an editorial profile modal on click. */
.wf-team-card__profile-link {
  position: relative;
  margin: 6px 0 0;
  padding: 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--wf-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wf-text);
  transition: gap 180ms ease, color 120ms ease;
}
.wf-team-card__profile-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 18px;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transition: opacity 160ms ease;
  pointer-events: none;
}
.wf-team-card__profile-link:hover { gap: 12px; }
.wf-team-card__profile-link:hover::after,
.wf-team-card__profile-link:focus-visible::after { opacity: 0.5; }
.wf-team-card__profile-link:focus-visible {
  outline: 2px solid var(--wf-text);
  outline-offset: 4px;
}
.wf-team-card__profile-arrow {
  font-family: var(--wf-font-mono);
  font-size: 13px;
  letter-spacing: 0;
  line-height: 1;
  transform: translateY(1px);
}

/* ============================================================
 * EDITORIAL PROFILE FLYOUT
 * Click "View profile →" on a leader card → side drawer slides in
 * from the right. Full viewport height, fixed width. Portrait on
 * top, editorial bio content scrollable beneath. Full width on
 * mobile.
 * ============================================================ */
.wf-profile-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear 360ms;
}
.wf-profile-modal.is-open {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s linear 0s;
}
.wf-profile-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 10, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  outline: none;
  opacity: 0;
  transition: opacity 280ms ease;
}
.wf-profile-modal.is-open .wf-profile-modal__backdrop {
  opacity: 1;
}
.wf-profile-modal__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: var(--wf-bg);
  color: var(--wf-text);
  width: min(640px, 100vw);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-left: 1px solid var(--wf-hairline);
  transform: translateX(100%);
  transition: transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.wf-profile-modal.is-open .wf-profile-modal__panel {
  transform: translateX(0);
}
.wf-profile-modal__close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wf-bg);
  color: var(--wf-text);
  border: 1px solid var(--wf-hairline);
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 160ms ease;
}
.wf-profile-modal__close:hover,
.wf-profile-modal__close:focus-visible {
  background: var(--wf-text);
  color: var(--wf-bg);
  border-color: var(--wf-text);
  outline: none;
  transform: scale(1.06);
}
.wf-profile-modal__visual {
  flex: 0 0 auto;
  height: clamp(260px, 38vh, 360px);
  background: var(--wf-placeholder-bg, rgba(var(--wf-ink-rgb), 0.06));
  display: flex;
  position: relative;
}
.wf-profile-modal__visual .wf-placeholder--portrait {
  aspect-ratio: auto;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
}
.wf-profile-modal__content {
  flex: 1 1 auto;
  padding: clamp(28px, 4vw, 48px) clamp(24px, 3.5vw, 44px) clamp(40px, 5vw, 64px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.wf-profile-modal__eyebrow {
  font-family: var(--wf-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wf-text-dim);
  margin: 0 0 var(--wf-s4);
}
.wf-profile-modal__name {
  font-family: var(--wf-font-display);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--wf-text);
  margin: 0;
}
.wf-profile-modal__title {
  font-family: var(--wf-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wf-text-dim);
  margin: var(--wf-s3) 0 0;
}
.wf-profile-modal__preview {
  font-family: var(--wf-font-display);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.5;
  font-weight: 400;
  color: var(--wf-text);
  margin: var(--wf-s5) 0 0;
  padding-bottom: var(--wf-s5);
  border-bottom: 1px solid var(--wf-hairline);
}
.wf-profile-modal__bio {
  margin-top: var(--wf-s5);
}
.wf-profile-modal__bio p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--wf-text-dim);
  margin: 0;
}
/* Lock page scroll when a flyout is open */
body.wf-modal-open { overflow: hidden; }

/* ============================================================
 * PATTERN: Alternating L/R blades (5+ items, alternative to stack)
 * ============================================================ */
.wf-blades { margin: var(--wf-s7) 0 0; }
.wf-blade {
  border-top: 1px solid var(--wf-hairline);
  position: relative;
}
.wf-blade:first-child { border-top: none; }
.wf-blade__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wf-s7);
  align-items: center;
  padding: var(--wf-s9) 0;
}
@media (min-width: 960px) {
  .wf-blade__inner { grid-template-columns: 1fr 1fr; gap: var(--wf-s9); }
  .wf-blade--right .wf-blade__content { order: 2; }
  .wf-blade--right .wf-blade__visual { order: 1; }
}
.wf-blade__content { max-width: 540px; }
.wf-blade__visual { min-height: 280px; display: flex; align-items: stretch; }

/* ============================================================
 * PATTERN: FAQ accordion
 * ============================================================ */
.wf-accordion {
  margin: var(--wf-s7) 0 0;
  border-top: 1px solid var(--wf-hairline);
}
.wf-accordion__item {
  border-bottom: 1px solid var(--wf-hairline);
}
.wf-accordion__item[open] { background: rgba(var(--wf-ink-rgb), 0.02); }
.wf-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wf-s5);
  padding: var(--wf-s6) 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: padding 200ms ease;
}
.wf-accordion__summary::-webkit-details-marker { display: none; }
.wf-accordion__q {
  font-family: var(--wf-font-display);
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--wf-text);
  line-height: 1.3;
}
.wf-accordion__icon {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.wf-accordion__icon-bar {
  position: absolute;
  background: var(--wf-text);
  transition: transform 200ms ease, opacity 200ms ease;
}
.wf-accordion__icon-bar--h {
  top: 50%;
  left: 0; right: 0;
  height: 1px;
  transform: translateY(-50%);
}
.wf-accordion__icon-bar--v {
  left: 50%;
  top: 0; bottom: 0;
  width: 1px;
  transform: translateX(-50%);
}
.wf-accordion__item[open] .wf-accordion__icon-bar--v { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.wf-accordion__panel {
  padding: 0 0 var(--wf-s6) calc(34px + var(--wf-s4));
  max-width: 70ch;
}
.wf-accordion__a {
  font-size: 16px;
  line-height: 1.6;
  color: var(--wf-text-body);
  margin: 0;
}

/* ============================================================
 * PATTERN: Trust logo marquee
 * ============================================================ */
.wf-marquee {
  margin: var(--wf-s5) 0 var(--wf-s6);
  border-top: 1px solid var(--wf-hairline);
  border-bottom: 1px solid var(--wf-hairline);
  overflow: hidden;
  position: relative;
}
.wf-marquee__label {
  font-family: var(--wf-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wf-text-dim);
  margin: var(--wf-s6) 0 var(--wf-s3);
}
.wf-marquee__track {
  display: flex;
  width: max-content;
  animation: wf-marquee-scroll 40s linear infinite;
}
.wf-marquee--right .wf-marquee__track {
  animation-direction: reverse;
}
.wf-marquee__set {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.wf-marquee__item {
  font-family: var(--wf-font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wf-text-dim);
  padding: var(--wf-s5) var(--wf-s7);
  border-right: 1px solid var(--wf-hairline);
  white-space: nowrap;
  min-height: 64px;
  display: flex;
  align-items: center;
}
@keyframes wf-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.wf-marquee:hover .wf-marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .wf-marquee__track { animation: none; }
}

/* ============================================================
 * PATTERN: Hero rotating tagline
 * ============================================================ */
.wf-hero__rotate {
  position: relative;
  height: 1.6em;
  margin-top: var(--wf-s4);
  font-family: var(--wf-font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wf-text-dim);
}
.wf-hero__rotate-line {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.wf-hero__rotate-line.is-active {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .wf-hero__rotate-line { transition: none; }
}

/* ============================================================
 * Stat strip / Bento layout
 *
 * Numeric stats (e.g. "8,000+ STARCOM users") get a standard cell with
 * a big count-up value + mono label. Prose facts (e.g. "Government,
 * commercial, and international customers") render in wider bento
 * cells that span 2 columns and use a smaller display headline so the
 * whole phrase fits cleanly.
 * ============================================================ */
/* Bento is a 12-col grid with per-count packing templates so items
 * always fill rows cleanly — no empty cells. Each count from 2-12 gets
 * a deterministic span pattern. Prose "fact" cells get a wide span to
 * accommodate the longer phrase, which `grid-auto-flow: dense` packs
 * tightly with neighboring numeric cells. */
.wf-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: dense;
  gap: 0;
  border-top: 1px solid var(--wf-hairline);
  border-left: 1px solid var(--wf-hairline);
  margin-top: var(--wf-s6);
}
.wf-bento__cell {
  grid-column: span 12;  /* mobile-first: full width */
  padding: var(--wf-s6) var(--wf-s5);
  border-right: 1px solid var(--wf-hairline);
  border-bottom: 1px solid var(--wf-hairline);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 180px;
}
@media (min-width: 720px) {
  /* Per-count packing — picks a span pattern that fills 12 cols evenly */
  .wf-bento[data-count="2"] > .wf-bento__cell { grid-column: span 6; }
  .wf-bento[data-count="3"] > .wf-bento__cell { grid-column: span 4; }
  .wf-bento[data-count="4"] > .wf-bento__cell { grid-column: span 6; }
  /* 5 items: top row 3 × 4cols, bottom row 2 × 6cols */
  .wf-bento[data-count="5"] > .wf-bento__cell:nth-child(-n+3) { grid-column: span 4; }
  .wf-bento[data-count="5"] > .wf-bento__cell:nth-child(n+4) { grid-column: span 6; }
  .wf-bento[data-count="6"] > .wf-bento__cell { grid-column: span 4; }
  /* 7 items: top row 3 × 4cols, bottom row 4 × 3cols */
  .wf-bento[data-count="7"] > .wf-bento__cell:nth-child(-n+3) { grid-column: span 4; }
  .wf-bento[data-count="7"] > .wf-bento__cell:nth-child(n+4) { grid-column: span 3; }
  .wf-bento[data-count="8"] > .wf-bento__cell { grid-column: span 3; }
  .wf-bento[data-count="9"] > .wf-bento__cell { grid-column: span 4; }
  /* 10 items: 2 rows of 4 wider + 1 row of 2 wide, or 2x5 */
  .wf-bento[data-count="10"] > .wf-bento__cell:nth-child(-n+4) { grid-column: span 3; }
  .wf-bento[data-count="10"] > .wf-bento__cell:nth-child(n+5) { grid-column: span 2; }
  .wf-bento[data-count="11"] > .wf-bento__cell { grid-column: span 4; }
  .wf-bento[data-count="12"] > .wf-bento__cell { grid-column: span 3; }
  /* Prose/fact cells always span at least 6 cols regardless of count */
  .wf-bento__cell--wide { grid-column: span 6 !important; }
}
@media (min-width: 1024px) {
  /* On wider screens, prose cells can be a touch narrower to fit more cells */
  .wf-bento[data-count="6"] > .wf-bento__cell--wide,
  .wf-bento[data-count="8"] > .wf-bento__cell--wide,
  .wf-bento[data-count="9"] > .wf-bento__cell--wide,
  .wf-bento[data-count="12"] > .wf-bento__cell--wide {
    grid-column: span 6 !important;
  }
}
/* Numeric cells with a long label still keep a comfortable min-height */
.wf-bento__cell--wide { min-height: 180px; }
.wf-bento__fact {
  font-family: var(--wf-font-display);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--wf-text);
  font-weight: 600;
  margin: 0;
  max-width: 30ch;
}

/* ============================================================
 * content_split / stat_strip / integration_grid / quote / faq
 * ============================================================ */
section[data-section="content_split"] {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wf-s7);
}
@media (min-width: 768px) {
  section[data-section="content_split"] { grid-template-columns: 1fr 1fr; }
}
section[data-section="content_split"] ul {
  list-style: none; padding: 0; margin: 0;
}
section[data-section="content_split"] li {
  padding: var(--wf-s3) 0;
  border-top: 1px solid var(--wf-hairline);
  color: var(--wf-text-body);
}
section[data-section="content_split"] li strong { color: var(--wf-text); font-weight: 600; }

/* Stat value/label styling — used by the count-up stat strip */
.wf-stat-value {
  display: block;
  font-family: var(--wf-font-display);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 600;
  color: var(--wf-text);
  letter-spacing: -0.025em;
  line-height: 1;
  margin-bottom: 12px;
}
.wf-stat-label {
  display: block;
  font-family: var(--wf-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wf-text-dim);
  line-height: 1.4;
}

blockquote[data-section="quote"] {
  margin: 0 auto;
  padding: var(--wf-s11) var(--wf-gutter);
  border-top: 1px solid var(--wf-hairline);
  border-bottom: 1px solid var(--wf-hairline);
  max-width: var(--wf-container);
}
blockquote[data-section="quote"] p {
  font-family: var(--wf-font-display);
  font-size: clamp(26px, 3.5vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--wf-text);
  font-weight: 500;
  margin: 0 0 var(--wf-s5);
  max-width: 32ch;
}
blockquote[data-section="quote"] cite {
  font-family: var(--wf-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wf-text-dim);
  font-style: normal;
}

.wf-tbd {
  display: inline-block;
  font-family: var(--wf-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--wf-text);
  color: var(--wf-bg);
  padding: 2px 6px;
  font-weight: 600;
}

/* ============================================================
 * FOOTER
 * ============================================================ */
.footer {
  background: var(--wf-bg-deep);
  border-top: 1px solid var(--wf-hairline);
  padding: var(--wf-s10) 0 0;
  position: relative;
  overflow: hidden;
}
.footer__container {
  max-width: var(--wf-container);
  margin: 0 auto;
  padding: 0 var(--wf-gutter);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wf-s9);
  margin-bottom: var(--wf-s9);
}
@media (min-width: 768px) {
  .footer__grid {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: var(--wf-s8);
    align-items: start;
  }
}
.footer__brand-block {
  display: flex;
  flex-direction: column;
  gap: var(--wf-s5);
  max-width: 36ch;
}
.footer__brand {
  display: inline-flex;
  align-items: center;
  color: #FFFFFF;
  text-decoration: none;
  margin: 0;
}
.footer__brand:hover { opacity: 0.7; }
.footer__brand-logo {
  height: 22px;
  width: auto;
  display: block;
}
.footer__tagline {
  color: var(--wf-text-dim);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}
.footer__brand-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--wf-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wf-text);
  text-decoration: none;
  padding-top: var(--wf-s2);
  transition: gap 200ms ease;
}
.footer__brand-cta:hover { gap: 14px; opacity: 1; }
.footer__cell { display: block; }
.footer__heading {
  font-family: var(--wf-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wf-text-dim);
  margin: 0 0 var(--wf-s4);
}
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin: 0 0 var(--wf-s3); }
.footer__list a {
  font-family: var(--wf-font-body);
  font-size: 14px;
  color: var(--wf-text);
  text-decoration: none;
  transition: opacity 150ms ease;
}
.footer__list a:hover { opacity: 0.65; }
.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--wf-s3);
  padding-top: var(--wf-s7);
  border-top: 1px solid var(--wf-hairline);
  font-family: var(--wf-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wf-text-dim);
}
@media (min-width: 768px) {
  .footer__bottom {
    flex-direction: row;
    align-items: center;
    gap: var(--wf-s7);
  }
  .footer__copy { flex: 0 0 auto; }
  .footer__legend { flex: 1 1 auto; text-align: center; color: var(--wf-text-muted); }
  .footer__bottom-links { margin-left: auto; }
}
.footer__bottom-links {
  display: flex;
  gap: var(--wf-s5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer__bottom-links a { color: var(--wf-text-dim); text-decoration: none; }
.footer__bottom-links a:hover { color: var(--wf-text); }
/* Footer signature (giant logo at bottom) removed at user request. */

/* ============================================================
 * OPENING SPLASH on index.html
 * ============================================================ */
.wf-opening {
  position: fixed;
  inset: 0;
  background: var(--wf-bg-deep);
  color: var(--wf-text);
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--wf-s5) var(--wf-s4);
  overflow-y: auto;
  opacity: 1;
  transition: opacity 550ms ease, visibility 0s linear 0s;
}
.wf-opening.is-dismissed {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 550ms ease, visibility 0s linear 550ms;
}
.wf-opening__inner {
  width: 100%;
  max-width: 880px;
  display: flex;
  flex-direction: column;
  gap: var(--wf-s5);
  min-height: calc(100vh - 2 * var(--wf-s5));
}

/* ---- Wizard chrome (persistent header + footer across all 3 screens) ---- */
.wf-opening__chrome-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wf-s4);
  padding-bottom: var(--wf-s4);
  border-bottom: 1px solid var(--wf-hairline);
}
.wf-opening__meta {
  font-family: var(--wf-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wf-text-dim);
}

/* Wizard content area — fills the remaining vertical space so the bottom
 * chrome stays pinned at the foot of the splash even on tall viewports.
 * Made a flex column so the active screen can vertically center itself
 * via `margin: auto 0` (which also gracefully degrades to natural flow
 * with overflow scrolling when content is taller than the wizard). */
.wf-opening__wizard {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  position: relative;
}
.wf-opening__screen {
  display: none;
  flex-direction: column;
  gap: var(--wf-s5);
}
.wf-opening__screen.is-active {
  display: flex;
  width: 100%;
  /* Center the screen vertically inside the wizard when there's extra
   * room; collapses to natural flow when content is taller, letting the
   * outer cover handle scrolling without clipping the top. */
  margin: auto 0;
  animation: wf-opening-screen-in 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes wf-opening-screen-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);  }
}

/* Bottom chrome — step dots on the left, back/next on the right. */
.wf-opening__chrome-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wf-s4);
  padding-top: var(--wf-s4);
  border-top: 1px solid var(--wf-hairline);
  flex-wrap: wrap;
}
.wf-opening__steps {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.wf-opening__step {
  width: 28px;
  height: 4px;
  border-radius: 2px;
  background: rgba(var(--wf-ink-rgb), 0.18);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 220ms ease, width 220ms ease;
}
.wf-opening__step.is-active {
  background: var(--wf-text);
  width: 44px;
}
.wf-opening__step:hover {
  background: rgba(var(--wf-ink-rgb), 0.45);
}
.wf-opening__step:focus-visible {
  outline: 2px solid var(--wf-text);
  outline-offset: 3px;
}
.wf-opening__buttons {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.wf-opening__btn--secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--wf-s2, 8px);
  background: transparent;
  color: var(--wf-text-body);
  border: 1px solid var(--wf-hairline);
  padding: 12px 18px;
  font-family: var(--wf-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, opacity 160ms ease;
}
.wf-opening__btn--secondary:hover:not(:disabled) {
  background: rgba(var(--wf-ink-rgb), 0.08);
  color: var(--wf-text);
  border-color: var(--wf-hairline-strong);
}
.wf-opening__btn--secondary:focus-visible {
  outline: 2px solid var(--wf-text);
  outline-offset: 3px;
}
.wf-opening__btn--secondary:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.wf-opening__brand { display: inline-flex; color: var(--wf-text); }
.wf-opening__brand img { height: var(--wf-opening-logo-h); width: auto; display: block; }
/* Splash H1 — Punch H1 weight (300) and size. No eyebrow above it; the
 * title carries the meaning. */
.wf-opening__title {
  font-family: var(--wf-font-display);
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--wf-text);
  margin: 0;
  max-width: 22ch;
}
.wf-opening__lede {
  font-family: var(--wf-font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--wf-text-body);
  margin: 0;
  max-width: 64ch;
}
.wf-opening__how {
  border-top: 1px solid var(--wf-hairline);
  border-bottom: 1px solid var(--wf-hairline);
  padding: var(--wf-s5) 0;
  display: grid;
  gap: var(--wf-s3);
}
.wf-opening__how h2 {
  /* Real H2 — display face, not a mono-caps eyebrow. Matches the
   * H2 style used across wireframe pages. */
  font-family: var(--wf-font-display);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--wf-text);
  margin: 0;
}
.wf-opening__how p {
  font-family: var(--wf-font-body);
  font-size: 15px;
  color: var(--wf-text-body);
  margin: 0;
  line-height: 1.6;
  max-width: 64ch;
}

/* ============================================================
 * Splash-screen Feedback Tutorial — "How to leave feedback"
 * Self-animating walkthrough of the Punch Docs feedback flow:
 * the floating P button → toolbar → comment-or-edit fork.
 * Canonical pattern — ships with every Punch wireframe; the
 * only thing that varies per client is the typography (inherited
 * from text-styles.css). UI is rendered in CSS so it's crisp at
 * any size and smooth to animate. Honors prefers-reduced-motion.
 * ============================================================ */
.wf-tutorial {
  --wf-punch-red: #FF1449;  /* Punch red — reserved for primary CTAs and the Punch Docs P button */
  border-top: 1px solid var(--wf-hairline);
  border-bottom: 1px solid var(--wf-hairline);
  padding: var(--wf-s6) 0 var(--wf-s7);
  display: grid;
  gap: var(--wf-s5);
}
.wf-tutorial__heading {
  /* Real H2 — display face, not a mono-caps eyebrow. */
  font-family: var(--wf-font-display);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--wf-text);
  margin: 0;
}
.wf-tutorial__lede {
  font-family: var(--wf-font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--wf-text-body);
  margin: 0;
  max-width: 64ch;
}

/* Hub mock — a 1:1 representation of the Punch Docs floating tools sitting
 * in the corner of a viewport. The whole cluster cascades in, and the P
 * gets a continuous outward pulse so it reads as the entry point. */
.wf-tutorial__hub {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wf-s5);
  align-items: center;
}
@media (min-width: 720px) {
  .wf-tutorial__hub { grid-template-columns: 220px 1fr; }
}
.wf-tutorial__hub-mock {
  position: relative;
  width: 220px;
  height: 160px;
  background:
    radial-gradient(circle at 22% 30%, rgba(var(--wf-ink-rgb), 0.04), transparent 60%),
    var(--wf-bg-elev);
  border: 1px solid var(--wf-hairline);
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
}
.wf-tutorial__hub-mock::before {
  /* hairline mock-content lines to suggest a page underneath the toolbar */
  content: "";
  position: absolute;
  top: 16px;
  left: 16px;
  width: 110px;
  height: 8px;
  background: rgba(var(--wf-ink-rgb), 0.18);
  box-shadow:
    0 16px 0 rgba(var(--wf-ink-rgb), 0.10),
    0 28px 0 rgba(var(--wf-ink-rgb), 0.10),
    0 40px 0 rgba(var(--wf-ink-rgb), 0.06);
  border-radius: 2px;
}
/* Pencil + chat icons arc up-and-left from the P (not stacked above) so
 * the cluster mirrors how Punch Docs actually opens the floating toolbar. */
.wf-tutorial__hub-pencil,
.wf-tutorial__hub-chat {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #FFFFFF;
  color: #1A1B20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
  animation: tutorial-fade-up 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Layout mirrors the Punch Docs cluster in the reference:
 *   - P sits at the bottom-right corner
 *   - Pencil sits to the LOWER-LEFT of the toolset (further left, lower up)
 *   - Chat sits to the UPPER-RIGHT of the toolset (higher up, closer to
 *     vertically above the P)
 * So the arc reads P → pencil (up + left) → chat (up + right of pencil). */
.wf-tutorial__hub-pencil {
  bottom: 62px;
  right: 64px;
  animation-delay: 500ms;
}
.wf-tutorial__hub-chat {
  bottom: 98px;
  right: 30px;
  animation-delay: 700ms;
}
.wf-tutorial__hub-p {
  position: absolute;
  bottom: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--wf-punch-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(255, 20, 73, 0.45);
  z-index: 2;
  animation: tutorial-fade-up 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
  overflow: hidden;
}
.wf-tutorial__hub-p-svg {
  width: 16px;
  height: auto;
  display: block;
}
.wf-tutorial__hub-ring {
  position: absolute;
  bottom: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid rgba(255, 20, 73, 0.6);
  pointer-events: none;
  animation: tutorial-ring-pulse 2.4s ease-out infinite;
  animation-delay: 1.4s;
  z-index: 1;
}
.wf-tutorial__hub-cap {
  font-family: var(--wf-font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--wf-text-body);
  margin: 0;
  max-width: 36ch;
}
.wf-tutorial__hub-cap strong {
  color: var(--wf-text);
  font-weight: 600;
}

/* Two paths — Comment / Edit */
.wf-tutorial__paths {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wf-s4);
}
@media (min-width: 720px) {
  .wf-tutorial__paths { grid-template-columns: 1fr 1fr; }
}
.wf-tutorial__path {
  background: rgba(var(--wf-ink-rgb), 0.03);
  border: 1px solid var(--wf-hairline);
  border-radius: 10px;
  padding: var(--wf-s5);
  display: grid;
  gap: var(--wf-s3);
  align-content: start;
  animation: tutorial-fade-up 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.wf-tutorial__path--comment { animation-delay: 800ms; }
.wf-tutorial__path--edit    { animation-delay: 1000ms; }
.wf-tutorial__path-head {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.wf-tutorial__path-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--wf-text);
  color: var(--wf-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wf-tutorial__path h3 {
  font-family: var(--wf-font-display);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--wf-text);
  margin: 0;
}
.wf-tutorial__path > p {
  font-family: var(--wf-font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--wf-text-body);
  margin: 0;
}
.wf-tutorial__path > p strong {
  color: var(--wf-text);
  font-weight: 600;
}

/* Comment-path visual — mock wireframe block with a pinned marker */
.wf-tutorial__comment-mock {
  position: relative;
  background: rgba(var(--wf-ink-rgb), 0.04);
  border: 1px solid var(--wf-hairline);
  border-radius: 8px;
  padding: 16px 16px 18px;
  margin-top: var(--wf-s2, 8px);
  display: grid;
  gap: 8px;
}
.wf-tutorial__comment-mock-h {
  width: 60%;
  height: 12px;
  background: rgba(var(--wf-ink-rgb), 0.22);
  border-radius: 2px;
}
.wf-tutorial__comment-mock-line {
  height: 8px;
  background: rgba(var(--wf-ink-rgb), 0.10);
  border-radius: 2px;
  width: 92%;
}
.wf-tutorial__comment-mock-line--short { width: 64%; }
.wf-tutorial__comment-marker {
  position: absolute;
  top: -12px;
  right: -10px;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  background: var(--wf-punch-red);
  color: #FFFFFF;
  border-radius: 50% 50% 50% 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wf-font-display);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(255, 20, 73, 0.4);
  animation: tutorial-marker-bounce 2.2s ease-in-out infinite;
  animation-delay: 1.6s;
}

/* Edit-path visual — the New Edit Version modal */
.wf-tutorial__modal {
  background: #FFFFFF;
  color: #16171B;
  border-radius: 12px;
  padding: 16px 18px 14px;
  display: grid;
  gap: 6px;
  margin-top: var(--wf-s2, 8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.2);
}
.wf-tutorial__modal-title {
  font-family: var(--wf-font-display);
  font-size: 15px;
  font-weight: 600;
  color: #16171B;
}
.wf-tutorial__modal-sub {
  font-family: var(--wf-font-body);
  font-size: 12px;
  color: #6A6F78;
  margin: 0 0 4px;
}
.wf-tutorial__modal-field {
  font-family: var(--wf-font-mono);
  font-size: 10px;
  color: #3A3D44;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 4px;
}
.wf-tutorial__modal-input {
  background: #FFFFFF;
  border: 2px solid var(--wf-punch-red);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: var(--wf-font-body);
  font-size: 13px;
  color: #16171B;
  display: inline-flex;
  align-items: center;
}
.wf-tutorial__modal-caret {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: #16171B;
  margin-left: 2px;
  animation: tutorial-caret-blink 1s steps(2, end) infinite;
}
.wf-tutorial__modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}
.wf-tutorial__modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wf-font-body);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 6px;
}
.wf-tutorial__modal-btn--cancel {
  color: #6A6F78;
  background: transparent;
}
.wf-tutorial__modal-btn--create {
  background: var(--wf-punch-red);
  color: #FFFFFF;
}

/* Animations */
@keyframes tutorial-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes tutorial-shelf-in {
  from { opacity: 0; transform: translateY(8px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0)  scale(1);   }
}
@keyframes tutorial-ring-pulse {
  0%   { transform: scale(1);   opacity: 0.85; }
  80%  { transform: scale(2.4); opacity: 0;    }
  100% { transform: scale(2.4); opacity: 0;    }
}
@keyframes tutorial-marker-bounce {
  0%, 100% { transform: translateY(0);    }
  50%      { transform: translateY(-4px); }
}
@keyframes tutorial-caret-blink {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-tutorial__hub-p,
  .wf-tutorial__hub-pencil,
  .wf-tutorial__hub-chat,
  .wf-tutorial__path,
  .wf-tutorial__hub-ring,
  .wf-tutorial__comment-marker,
  .wf-tutorial__modal-caret {
    animation: none;
  }
}

/* ============================================================
 * Splash-screen Type Hierarchy sandbox
 * Reference card showing the H1–H4 / body / eyebrow styles used
 * across the wireframe. Lives ONLY on the splash so the actual
 * pages stay free of wireframe-stage chrome.
 * ============================================================ */
.wf-typespec {
  border-top: 1px solid var(--wf-hairline);
  border-bottom: 1px solid var(--wf-hairline);
  padding: var(--wf-s5) 0;
  display: grid;
  gap: var(--wf-s4);
}
.wf-typespec__heading {
  /* Real H2 — display face, not a mono-caps eyebrow. */
  font-family: var(--wf-font-display);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--wf-text);
  margin: 0;
}
.wf-typespec__note {
  font-family: var(--wf-font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--wf-text-body);
  margin: 0;
  max-width: 64ch;
}
.wf-typespec__grid {
  display: grid;
  gap: var(--wf-s3);
  margin-top: var(--wf-s2, 8px);
}
.wf-typespec__row {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: baseline;
  gap: var(--wf-s4);
  padding: var(--wf-s2, 8px) 0;
  border-top: 1px dashed var(--wf-hairline);
}
.wf-typespec__row:first-child { border-top: none; padding-top: 0; }
/* Left-column role label for a specimen row (e.g. "Display", "H1", "Body").
 * Mono, dim, uppercase — names the role without competing with the sample. */
.wf-typespec__label {
  font-family: var(--wf-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wf-text-dim);
  padding-top: 6px;
  margin: 0;
}
.wf-typespec__tag {
  font-family: var(--wf-font-mono);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wf-text);
  padding-top: 4px;
  /* base size — modifier classes below override per row to keep each tag
   * proportional to the heading it labels. Darker color + proportional
   * sizing makes the hierarchy of the labels match the hierarchy of the
   * samples beside them. */
  font-size: 13px;
}
.wf-typespec__tag--h1      { font-size: 22px; letter-spacing: 0.08em; }
.wf-typespec__tag--h2      { font-size: 17px; letter-spacing: 0.10em; }
.wf-typespec__tag--h3      { font-size: 14px; }
.wf-typespec__tag--h4      { font-size: 12px; }
.wf-typespec__tag--h5      { font-size: 13px; }
.wf-typespec__tag--h6      { font-size: 12px; }
.wf-typespec__tag--body    { font-size: 12px; }
.wf-typespec__tag--eyebrow { font-size: 11px; }
.wf-typespec__sample {
  color: var(--wf-text);
  margin: 0;
  font-family: var(--wf-font-display);
}
.wf-typespec__sample--h1 {
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.wf-typespec__sample--h2 {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}
.wf-typespec__sample--h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.wf-typespec__sample--h4 {
  font-family: var(--wf-font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wf-text-dim);
}
.wf-typespec__sample--h5 {
  font-family: var(--wf-font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--wf-text);
}
.wf-typespec__sample--h6 {
  font-family: var(--wf-font-display);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wf-text);
}
.wf-typespec__sample--body {
  font-family: var(--wf-font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--wf-text-body);
}
.wf-typespec__sample--eyebrow {
  font-family: var(--wf-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wf-text-dim);
}

.wf-opening__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0;
  border-top: 1px solid var(--wf-hairline);
  border-left: 1px solid var(--wf-hairline);
}
.wf-opening__stats > div {
  padding: var(--wf-s4);
  border-right: 1px solid var(--wf-hairline);
  border-bottom: 1px solid var(--wf-hairline);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wf-opening__stats .wf-stat-value {
  font-family: var(--wf-font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--wf-text);
  letter-spacing: -0.015em;
}
.wf-opening__stats .wf-stat-label {
  font-family: var(--wf-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wf-text-dim);
}
/* Splash CTA — Punch red, right-aligned in the splash content column,
 * with depth and a hover lift so it clearly reads as a tappable button
 * (not just label text). Stays the same regardless of light/dark theme. */
.wf-opening__btn {
  align-self: flex-end;                 /* right-align in the flex column */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ff1449;
  color: #ffffff;
  border: 1px solid #ff1449;
  padding: 14px 28px;
  font-family: var(--wf-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(255, 20, 73, 0.32);
  transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.wf-opening__btn:hover {
  background: #e6103f;
  border-color: #e6103f;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(255, 20, 73, 0.42);
}
.wf-opening__btn:focus-visible {
  outline: 2px solid #ff1449;
  outline-offset: 3px;
}
.wf-opening__btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 14px rgba(255, 20, 73, 0.32);
}
@media (max-width: 640px) {
  .wf-opening { padding: var(--wf-s4) var(--wf-s4); }
}
@media (prefers-reduced-motion: reduce) {
  .wf-opening { transition: opacity 10ms linear; }
  .wf-opening.is-dismissed { transition: opacity 10ms linear, visibility 0s linear 10ms; }
}

/* ============================================================
 * Print
 * ============================================================ */
@media print {
  body.wireframe { background: #FFFFFF; color: #000000; }
  .wf-nav, .footer { background: #FFFFFF; color: #000000; border-color: #000000; }
  .wf-main h1, .wf-main h2, .wf-main h3, .wf-main h4 { color: #000000; }
  .wf-blade__visual { display: none; }
  .wf-blade__inner { grid-template-columns: 1fr; }
  .wf-blade__content { padding: 24px 0; max-width: none; }
  .wf-reveal { opacity: 1; transform: none; }
  body { font-size: 11pt; }
}