/* Print-sheet variant (STAGING ONLY, 2026-10-22): Connor's visual standard on / and /get-started/.
   Loaded last through pageCss, so it only touches pages that list it. Fonts are the site's own
   (Bricolage Grotesque, Schibsted Grotesk); labels use the system monospace, no new font load.
   Rules: paper + ink, one cobalt accent doing one job, 1px ink lines, no gradients or shadows,
   black pill buttons with a trailing arrow, mono UPPERCASE labels, one playful element per page. */

:root {
  --sheet-paper: #F7F5F0; --sheet-grid: #ECE9E1; --sheet-ink: #111111; --sheet-ink-soft: #4B5563; --sheet-card: #FFFFFF;
  --sheet-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --bg: var(--sheet-paper); --surface: var(--sheet-card); --surface-sunk: var(--sheet-paper);
  --text: var(--sheet-ink); --text-mut: var(--sheet-ink-soft);
  --line: var(--sheet-ink); --line-strong: var(--sheet-ink);
  --hair: rgba(17,17,17,.16); --hair-strong: var(--sheet-ink);
  --shadow-1: none; --shadow-2: none; --shadow-photo: none; --sh-1: none; --sh-2: none; --sh-3: none;
}
@media (prefers-color-scheme: dark) {
  /* dark mode swaps paper and ink */
  :root { --sheet-paper: #111111; --sheet-grid: #1E1E1E; --sheet-ink: #F7F5F0; --sheet-ink-soft: #B9BEC7; --sheet-card: #191919;
          --hair: rgba(247,245,240,.18); }
}

/* labels: mono, uppercase, a dot in front */
.eyebrow { display: inline-flex; gap: 8px; align-items: center; font: 500 .75rem/1.3 var(--sheet-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--sheet-ink-soft); background: none; box-shadow: none; padding: 0; border-radius: 0; }
.eyebrow::before { content: "\25CF"; color: var(--sheet-ink); font-size: .7em; }
.eyebrow .ph { display: none; }
.funnel-intro .eyebrow { color: var(--sheet-ink-soft); }

/* buttons: black pill, outline pill */
.btn-primary, .btn-primary:hover { background: var(--sheet-ink); color: var(--sheet-paper); box-shadow: none; }
.btn-primary:hover { opacity: .86; }
.btn-ghost, .btn-secondary { background: transparent; color: var(--sheet-ink); box-shadow: inset 0 0 0 1px var(--sheet-ink); border-color: transparent; }
.btn-ghost:hover, .btn-secondary:hover { background: var(--sheet-card); box-shadow: inset 0 0 0 1px var(--sheet-ink); }
.bar, .scrolled .bar, .menu-btn, .mobile-nav { box-shadow: 0 0 0 1px var(--hair); }

/* hero: flat paper grid, ink outlines, the accent only on the highlight words */
.hero::before { display: none; }
.hero-v2 { background-color: var(--sheet-paper);
  background-image: linear-gradient(var(--sheet-grid) 1px, transparent 1px), linear-gradient(90deg, var(--sheet-grid) 1px, transparent 1px);
  background-size: 24px 24px; border-bottom: 1px solid var(--sheet-ink); }
.hero-v2 .hero-title { color: var(--sheet-ink); }
.hero-v2 .hero-accent { color: var(--accent); }
.hero-v2 .hero-accent::after { display: none; }
.hero-v2 .hero-card { box-shadow: none; border: 1px solid var(--sheet-ink); border-radius: 20px; }
.hero-v2 .hero-card::after { display: none; }
.hero-v2 .hero-chip { background: var(--sheet-card); color: var(--sheet-ink); border: 1px solid var(--sheet-ink); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 999px; }
.hero-v2 .hero-chip-check { background: var(--sheet-ink); color: var(--sheet-paper); }
.hero-v2 .hero-chip-text small { color: var(--sheet-ink-soft); font: 500 .68rem/1.3 var(--sheet-mono); letter-spacing: .06em; text-transform: uppercase; }
.hero-gina img, .hero-v2 .hero-gina img { filter: none; }

/* how it works: bento cards, mono step labels */
.how3-step { background: var(--sheet-card); border: 1px solid var(--sheet-ink); border-radius: 20px; box-shadow: none; }
.how3-n { width: auto; height: auto; background: none; border-radius: 0; display: block; color: var(--sheet-ink-soft);
  font: 500 .75rem/1.3 var(--sheet-mono); letter-spacing: .08em; }
.how3-n::before { content: "STEP 0"; }
.how3-bubble { background: var(--sheet-ink); color: var(--sheet-paper); }
.how3-log { background: var(--sheet-paper); border: 1px solid var(--hair); font-family: var(--sheet-mono); font-size: .78rem; }
.how3-log li::before { background: var(--sheet-ink); border-radius: 0; width: 6px; height: 6px; }
.how3-approve { border-color: var(--sheet-ink); box-shadow: none; }
.how3-btn { box-shadow: inset 0 0 0 1px var(--sheet-ink); border-radius: 999px; }
.how3-btn.is-yes { background: var(--sheet-ink); color: var(--sheet-paper); }
.how3-note { font: 500 .72rem/1.4 var(--sheet-mono); letter-spacing: .06em; text-transform: uppercase; }

/* fact row: mono label + value between ink rules */
.facts-strip { border-block: 1px solid var(--sheet-ink); background: var(--sheet-paper); }
.facts-strip li + li { border-left: 1px solid var(--sheet-ink); }
.facts-strip .ph { color: var(--sheet-ink); }
.facts-strip strong { font: 600 .74rem/1.35 var(--sheet-mono); letter-spacing: .07em; text-transform: uppercase; margin-bottom: 6px; }
.facts-strip li { color: var(--sheet-ink); }

/* jobs: bento cards, one bold claim each */
.jobs-list { border-top: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.jobs-list li { border: 1px solid var(--sheet-ink); border-radius: 20px; background: var(--sheet-card); }
.jobs-list a { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 24px; }
.jobs-list strong { font: 700 var(--fs-h4)/1.2 var(--font-display); letter-spacing: -.015em; }
.jobs-list span { align-self: auto; }
.jobs-list a::after { content: "\2192"; margin-top: auto; font: 500 1.1rem/1 var(--font-body); color: var(--sheet-ink); }
.jobs-list a:hover strong { color: var(--accent); }
@media (max-width: 960px) { .jobs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .jobs-list { grid-template-columns: minmax(0, 1fr); gap: 12px; } .jobs-list a { padding: 20px; } }

/* cards, photos and grids: ink outlines instead of shadows */
.rail-card { box-shadow: none; border: 1px solid var(--sheet-ink); border-radius: 20px; }
.rail-card:hover { box-shadow: none; transform: translateY(-2px); }
.trail-grid { background: var(--sheet-ink); border: 1px solid var(--sheet-ink); box-shadow: none; }
.trail-cell h3 .ph, #runs-on .facts dt .ph { color: var(--sheet-ink); }
#runs-on .facts dt .ph { background: none; box-shadow: inset 0 0 0 1px var(--sheet-ink); }
.team-photo img, .week-media img { box-shadow: none; border: 1px solid var(--sheet-ink); }
.team-panel { border-color: var(--sheet-ink); box-shadow: none; }
.section-sunk { background: var(--sheet-paper); border-block: 1px solid var(--sheet-ink); }
.runsheet li + li { border-top: 1px solid var(--hair); }
.runsheet time { font: 500 .78rem/1.6 var(--sheet-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--sheet-ink-soft); }
.c-faq, .c-faq details { border-color: var(--sheet-ink); }
.c-faq summary::after { color: var(--sheet-ink); }

/* the ink band: flat ink, no glow */
.band-ink::before { display: none; }
.band-ink { background: #111111; }
.band-ink .eyebrow { color: rgba(247,245,240,.72); background: none; box-shadow: none; }
.band-ink .eyebrow::before { color: #F7F5F0; }

/* one playful element per page: the hero mascot stays, section poses go */
main .with-gina > .gm-pose { display: none; }
main .with-gina { grid-template-columns: minmax(0, 1fr); }

/* page close: a print sheet with crop marks and a margin note */
#fit .fit-grid { position: relative; border: 1px solid var(--sheet-ink); background: var(--sheet-card); padding: clamp(24px, 4vw, 56px); }
#fit .fit-grid::before, .funnel-form::before { content: ""; position: absolute; inset: -14px; pointer-events: none; --c: var(--sheet-ink);
  background:
    linear-gradient(var(--c), var(--c)) left 0 top 13px / 9px 1px no-repeat, linear-gradient(var(--c), var(--c)) left 13px top 0 / 1px 9px no-repeat,
    linear-gradient(var(--c), var(--c)) right 0 top 13px / 9px 1px no-repeat, linear-gradient(var(--c), var(--c)) right 13px top 0 / 1px 9px no-repeat,
    linear-gradient(var(--c), var(--c)) left 0 bottom 13px / 9px 1px no-repeat, linear-gradient(var(--c), var(--c)) left 13px bottom 0 / 1px 9px no-repeat,
    linear-gradient(var(--c), var(--c)) right 0 bottom 13px / 9px 1px no-repeat, linear-gradient(var(--c), var(--c)) right 13px bottom 0 / 1px 9px no-repeat; }
#fit .fit-grid::after, .funnel-form::after { position: absolute; top: -30px; left: 0; right: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 500 .66rem/1 var(--sheet-mono); letter-spacing: .1em; color: var(--sheet-ink-soft); text-transform: uppercase; }
#fit .fit-grid::after { content: "Talk To Gina \00B7  Sheet 01 \00B7  See if Gina fits"; }
.form { border: 0; padding: 0; background: none; }
.field input, .field select, .field textarea { border: 1px solid var(--sheet-ink); border-radius: 10px; background: var(--sheet-card); box-shadow: none; }
.field label { font: 500 .72rem/1.3 var(--sheet-mono); letter-spacing: .07em; text-transform: uppercase; }

/* /get-started/: the form is the sheet; the accent's one job here is the progress bar */
.funnel-intro .gm-pose { display: block; margin-bottom: var(--s-4); }
.funnel-form { position: relative; border: 1px solid var(--sheet-ink); border-radius: 0; background: var(--sheet-card); margin-top: 44px; }
.funnel-form::after { content: "Talk To Gina \00B7  Get started"; }
.funnel-progress { height: 3px; background: var(--sheet-grid); border-radius: 0; }
.funnel-progress span { background: var(--accent); }
.funnel-count { font: 500 .72rem/1.3 var(--sheet-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sheet-ink-soft); }
.funnel-opt { border: 1px solid var(--sheet-ink); border-radius: 12px; background: var(--sheet-card); }
.funnel-opt:hover { border-color: var(--sheet-ink); background: var(--sheet-paper); }
.funnel-opt:has(input:focus-visible) { outline: 2px solid var(--sheet-ink); }
.funnel-opt:has(input:checked) { border-color: var(--sheet-ink); background: var(--sheet-ink); color: var(--sheet-paper); }
.funnel-key { border: 1px solid var(--sheet-ink); border-radius: 4px; font: 500 .72rem/1 var(--sheet-mono); color: var(--sheet-ink); background: var(--sheet-paper); }
.funnel-opt:has(input:checked) .funnel-key { background: var(--sheet-paper); border-color: var(--sheet-paper); color: var(--sheet-ink); }
.funnel-trust { border-top: 1px solid var(--sheet-ink); padding-top: var(--s-5); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.funnel-trust strong { display: block; font: 600 .72rem/1.35 var(--sheet-mono); letter-spacing: .07em; text-transform: uppercase; margin-bottom: 6px; }
@media (max-width: 700px) { .funnel-trust { grid-template-columns: minmax(0, 1fr); } }
#fit, .funnel { overflow-x: clip; }
@media (max-width: 600px) { #fit .fit-grid::before, .funnel-form::before { inset: -10px; } }
/* keep the closing sheet on the content column */
#fit .fit-grid { width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--container) - 2 * var(--gutter)); margin-inline: auto; }
.funnel-form { margin-top: 56px; }
#fit .fit-grid::after, .funnel-form::after { top: -36px; }
/* the accent keeps one job: no cobalt buttons or chips in the connect block */
.cx-copy, .cx-copy:hover { background: var(--sheet-ink); color: var(--sheet-paper); }
.cx-q[aria-checked="true"] { background: var(--sheet-ink); border-color: var(--sheet-ink); color: var(--sheet-paper); }
.cx-q:hover { border-color: var(--sheet-ink); }

/* /get-started/ dead space (Connor, 2026-10-23): less padding, mascot beside the heading,
   and on desktop the intro + trust notes sit left of the form instead of above and below it. */
.funnel.section { padding-block: clamp(28px, 4vw, 56px) clamp(40px, 5vw, 72px); }
.funnel-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-4); align-items: start; margin-bottom: 0; }
.funnel-intro > * { grid-column: 1; }
.funnel-intro .gm-pose { grid-column: 2; grid-row: 1 / span 2; width: 88px; margin: 0; }
.funnel-intro .lead { margin-top: var(--s-3); }
.funnel-form { margin-top: 48px; padding: clamp(20px, 3vw, 36px); }
.funnel-step .funnel-nav { margin-top: var(--s-4); }
.funnel-trust { margin-top: var(--s-6); }
@media (min-width: 960px) {
  .funnel-wrap { max-width: 1180px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 5vw, 80px); align-items: start; }
  .funnel-intro { grid-column: 1; grid-row: 1; padding-top: 36px; }
  .funnel-form { grid-column: 2; grid-row: 1 / span 2; margin-top: 36px; }
  .funnel-trust { grid-column: 1; grid-row: 2; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); margin-top: var(--s-6); align-self: start; }
  .funnel-intro .gm-pose { width: 104px; }
}
@media (max-width: 600px) {
  .funnel-intro .gm-pose { width: 64px; }
  .funnel-form { margin-top: 40px; }
}
.funnel-intro .lead { grid-column: 1 / -1; }
@media (max-width: 600px) { .funnel-form { margin-top: 52px; } }
@media (prefers-color-scheme: dark) { .band-ink { border-block: 1px solid var(--hair); } }