/* strategicsimon.ai — site styles.
   Ported from the accepted mockup spikes/full-page-v2.html (row B1, Brief 5).
   The custom properties below are the guide's Build tokens table verbatim.
   Light-only by ruling 11: there is no dark palette and no inversion. */

/* ---------- Faces (Brief 6, row B3) ----------
   Self-hosted, same-origin, replacing the Google Fonts stylesheet and its two
   preconnects. All four are SIL OFL; the licence for each sits beside the
   binaries in assets/fonts/.

   These nine declarations mirror what the Google Fonts css2 endpoint served for
   this exact family string, cut for cut, on purpose: identical files, identical
   weight and stretch ranges, identical unicode-range. That is what makes the
   before/after advance-width comparison a real test — the only variable changed
   is the origin the bytes come from, so any width that moves is a defect, not a
   difference of build.

   Six files, nine cuts. Archivo is one VARIABLE woff2 carrying fvar/gvar/avar/
   HVAR/STAT, declared across its full served axes (wght 400–800, wdth 62–125%),
   which is what lets `.d`'s `font-weight: 750` + `font-stretch: 80%` and
   `.proof b`'s `700` + `85%` resolve to real axis positions rather than to the
   nearest static cut. Source Sans 3 roman and Space Grotesk are likewise single
   variable files, each declared once per weight the page asks for — the same
   trick Google uses, and why those downloads were byte-identical across weights.
   IBM Plex Mono is genuinely static, one file per weight.

   `latin` subset only, as published by the foundry via Google — no subsetting
   tool was installed or written. Every character the page renders is inside the
   unicode-range below (checked; the only non-ASCII are U+00A9, U+00B7, U+2014).
   An out-of-range character falls to the stack in --archivo/--source/etc. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/assets/fonts/archivo-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Declared because the ruled face table names it. No rule in this file selects
   italic — .wordmark em, the page's only <em>, is explicitly font-style: normal. */
@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Declared because the ruled face table names it; no rule in this file asks for
   Space Grotesk 600 today. Costs nothing: same file as 400 and 500. */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono 500 is NOT declared, though the ruled face table names it.
   P10 fences this face to the diagram's source list, and that list sets one
   weight, so nothing can reach a second cut without breaking the principle
   first (orchestrator, 2026-10-09). Source Sans 3 italic and Space Grotesk
   600 are kept: the 600 is inside the variable file and costs nothing, and
   body copy is likely to want emphasis once B2 writes the 404 and meta text. */

:root {
  color-scheme: light;

  /* Faces. P10: one face per job, four faces maximum. */
  --archivo: "Archivo", "Arial Narrow", Arial, sans-serif;
  --source: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --plex: "IBM Plex Mono", Consolas, "Courier New", monospace;
  --grotesk: "Space Grotesk", "Segoe UI", system-ui, sans-serif;

  --stone: #EDECE6;        /* ground */
  --card: #D6D6D0;         /* cards */
  --card-text: #4E555D;    /* secondary text on cards */
  --hair: #C4C6C4;         /* rules */
  --ink: #002525;          /* headlines — bible dark teal */
  --body-ink: #222222;     /* body — bible */
  --slate: #5A626B;        /* secondary text on Stone */
  --slate-2: #717B87;
  --slate-3: #979CA1;
  --accent: #2E6B72;       /* accent words, step numbers */
  --teal-mid: #19464B;
  --steel: #425A72;        /* eyebrows */
  --gold: #C48439;         /* CTA fill */
  --gold-ink: #8A5A1F;     /* gold as text, if ever */
  --logo-h: 64px;
  --clip-s: 12px; --clip-m: 18px;
}

* { box-sizing: border-box; }

/* The map SVG is drawn from -10 to 530 and bleeds past its frame on purpose
   (xMidYMid slice). v2 contained that with overflow: clip on its .site
   wrapper; the site carries it here so no horizontal scrollbar appears. */
html, body { overflow-x: clip; }

html { background: var(--stone); }

body {
  margin: 0;
  background: var(--stone);
  color: var(--body-ink);
  font: 400 17px/1.55 var(--source);
}

/* Skip link: first focusable element, visually hidden until focused. */
.skip {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip:focus {
  position: absolute; left: 10px; top: 10px; z-index: 20;
  width: auto; height: auto; margin: 0; padding: 12px 18px;
  overflow: visible; clip-path: none;
  background: var(--ink); color: var(--stone);
  font: 500 15px/1 var(--grotesk); text-decoration: none;
}

.in { max-width: 1120px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 48px); }
a { color: inherit; }
.d { font-family: var(--archivo); font-stretch: 80%; font-weight: 750; letter-spacing: -.012em; }
.eyebrow { font-family: var(--grotesk); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--steel); }
.clip-s { clip-path: polygon(0 0, calc(100% - var(--clip-s)) 0, 100% var(--clip-s), 100% 100%, 0 100%); }
.clip-m { clip-path: polygon(0 0, calc(100% - var(--clip-m)) 0, 100% var(--clip-m), 100% 100%, 0 100%); }

.cta {
  display: inline-block; font: 600 16.5px/1 var(--source); color: #1A1B20; background: var(--gold);
  border: 0; cursor: pointer; text-decoration: none;
  padding: 16px 28px 16px 22px;
  clip-path: polygon(0 0, calc(100% - var(--clip-s)) 0, 100% var(--clip-s), 100% 100%, 0 100%);
  transition: filter .15s ease;
}
.cta:hover { filter: brightness(1.06); }
/* clip-path clips outlines, so focus shows as darker fill + underline */
.cta:focus-visible { outline: none; filter: brightness(.85); text-decoration: underline; text-underline-offset: 3px; }
.text-link { font-size: 15.5px; color: var(--ink); text-underline-offset: 4px; text-decoration-color: var(--slate-3); }
.text-link:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Scroll progress (P9). Only rendered where scroll timelines exist and motion is welcome. */
.progress { display: none; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .progress {
      display: block; position: sticky; top: 0; z-index: 5; height: 3px; margin-bottom: -3px;
      background: var(--accent); transform-origin: 0 50%;
      animation: grow linear both; animation-timeline: scroll(root);
    }
  }
}
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Nav ---------- */
header .in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; padding-block: 14px; }
.brand { display: flex; align-items: center; gap: calc(var(--logo-h) * .2); text-decoration: none; }
.brand img { height: var(--logo-h); width: auto; display: block; }
.wordmark { font-size: calc(var(--logo-h) * .42); line-height: 1; color: var(--ink); white-space: nowrap; }
.wordmark em { font-style: normal; color: var(--accent); }
nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 26px; font-family: var(--grotesk); font-size: 15px; }
nav a { color: var(--slate); text-decoration: none; }
nav a:hover { color: var(--ink); }
header { border-bottom: 1px solid var(--hair); }

/* ---------- Hero ---------- */
.hero .in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-block: clamp(36px, 6vw, 72px) clamp(40px, 6vw, 80px); }
.lock { display: grid; gap: 16px; }
.lock .pre { margin: 0; font-size: 19px; color: var(--slate); }
.lock h1 { margin: 0; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1; text-wrap: balance; color: var(--ink); }
.lock h1 span { color: var(--accent); }
.lock .post { margin: 0; font-size: 21px; font-weight: 600; color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 8px; }
.graphic svg { width: 100%; height: auto; display: block; }
.graphic text { font-family: var(--plex); }

/* ---------- Sections ---------- */
section { border-top: 1px solid var(--hair); }
section > .in { padding-block: clamp(44px, 7vw, 88px); display: grid; gap: 28px; }
.sec-head { display: grid; gap: 10px; max-width: 60ch; }
.sec-head h2 { margin: 0; font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.04; color: var(--ink); text-wrap: balance; }
.sec-head p { margin: 0; color: var(--slate); font-size: 17.5px; }

/* Tiers */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tier { background: var(--card); padding: 24px 22px 22px; display: grid; gap: 12px; grid-template-rows: auto auto auto 1fr auto; }
.tier h3 { margin: 0; font-size: 30px; line-height: 1.02; color: var(--ink); }
.tier .one { margin: 0; font-size: 16px; color: var(--body-ink); }
.tier ul { margin: 0; padding: 12px 0 0; list-style: none; display: grid; gap: 7px; border-top: 1px solid rgba(0,37,37,.14); align-content: start; }
.tier li { font-size: 15px; color: var(--card-text); padding-left: 16px; position: relative; line-height: 1.4; }
.tier li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; background: var(--steel); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.tier .price { font-family: var(--grotesk); font-size: 15px; font-weight: 500; color: var(--ink); padding-top: 12px; border-top: 1px solid rgba(0,37,37,.14); font-variant-numeric: tabular-nums; }
.tier .price small { display: block; font-weight: 400; font-size: 12.5px; color: var(--card-text); letter-spacing: .01em; }
.tiers-foot { margin: 0; font-size: 16px; color: var(--slate); }

/* How it works */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; position: relative; padding-top: 22px; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--hair); }
.steps::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent);
  transform-origin: 0 50%;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .steps::after { animation: fill linear both; animation-timeline: view(); animation-range: entry 40% cover 55%; }
  }
}
@keyframes fill { from { transform: scaleX(.12); } to { transform: scaleX(1); } }
.step { display: grid; gap: 8px; align-content: start; }
.step .n { font-size: 44px; line-height: 1; color: var(--accent); }
.step h3 { margin: 0; font-size: 23px; line-height: 1.1; color: var(--ink); }
.step p { margin: 0; font-size: 16px; color: var(--slate); max-width: 34ch; }

/* Why me */
.why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px 56px; align-items: start; }
.figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fig { background: var(--card); padding: 20px 20px 18px; display: grid; gap: 4px; }
.fig b { font-size: clamp(2.8rem, 6vw, 4.2rem); line-height: .92; color: var(--ink); }
.fig span { font-family: var(--grotesk); font-size: 13.5px; color: var(--card-text); letter-spacing: .02em; }
.proof { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.proof li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--hair); }
.proof li:first-child { padding-top: 0; }
.proof svg { width: 18px; height: 18px; margin-top: 4px; }
.proof b { display: block; font-family: var(--archivo); font-stretch: 85%; font-weight: 700; font-size: 20px; color: var(--ink); line-height: 1.15; }
.proof span { color: var(--slate); font-size: 16px; }

/* Workshop — ships hidden behind the CONFIG_SWITCHES workshop-visibility entry */
.workshop-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px 32px; align-items: center; background: var(--card); padding: 26px 28px; }
.date { display: grid; place-items: center; width: 92px; height: 92px; background: var(--ink); color: var(--stone); text-align: center; }
.date b { font-family: var(--archivo); font-stretch: 80%; font-weight: 750; font-size: 26px; line-height: 1; }
.date span { font-family: var(--grotesk); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.workshop-card h3 { margin: 0 0 4px; font-size: 26px; line-height: 1.05; color: var(--ink); }
.workshop-card p { margin: 0; color: var(--card-text); font-size: 16px; }

/* Visit */
.visit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px 56px; align-items: stretch; }
.contact { display: grid; gap: 22px; align-content: start; }
.contact dl { margin: 0; display: grid; gap: 14px; }
.contact dt { font-family: var(--grotesk); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--steel); }
.contact dd { margin: 2px 0 0; font-size: 19px; color: var(--ink); }
.contact dd a { text-decoration-color: var(--slate-3); text-underline-offset: 4px; }
/* The map is a link out to directions (ruling 12); it needs display: block. */
.map { display: block; background: var(--card); min-height: 300px; position: relative; }
.map svg { width: 100%; height: 100%; display: block; position: absolute; inset: 0; }
/* clip-m would clip an outset ring, so the map's focus ring sits inside the shape */
.map:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
/* Visible affordance for the map link (orchestrator ruling, 2026-10-08). Takes
   the deleted v2 chip's corner and token treatment, plus .text-link's underline
   tokens so it reads as a link. A label, not a button: no gold, and it is not a
   second interactive element -- the whole map is the one anchor. */
.map-label {
  position: absolute; left: 14px; bottom: 12px;
  font-family: var(--grotesk); font-size: 12px;
  color: var(--card-text); background: var(--stone); padding: 3px 8px;
  text-decoration: underline; text-decoration-color: var(--slate-3); text-underline-offset: 3px;
}
.map:hover .map-label { color: var(--ink); text-decoration-color: var(--ink); }

/* Footer */
footer { border-top: 1px solid var(--hair); }
footer .in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-block: 22px 26px; font-family: var(--grotesk); font-size: 13.5px; color: var(--slate); }
footer img { height: 32px; width: auto; display: block; }
footer .left { display: flex; align-items: center; gap: 12px; }

@media (max-width: 860px) {
  .hero .in, .why, .visit { grid-template-columns: 1fr; }
  .tiers, .steps { grid-template-columns: 1fr; }
  .steps { gap: 24px; }
  .workshop-card { grid-template-columns: auto minmax(0, 1fr); }
  .workshop-card .cta { grid-column: 1 / -1; justify-self: start; }

  /* Ruling 14 — 44px minimum touch height at narrow widths only, as equal
     vertical padding so the text stays optically centred. The four sites are
     the ones REPORT-brief-V1.md measured under 44px: nav 19px, footer link
     17px, contact links 27px, hero text link 24.02px. Above 860px the ruled
     desktop header and footer rhythm is untouched. */
  nav a { display: inline-block; padding-block: 13px; }
  footer .in a { display: inline-block; padding-block: 14px; }
  .contact dd a { display: inline-block; padding-block: 9px; }
  .text-link { display: inline-block; padding-block: 10.5px; }
}
@media (max-width: 480px) {
  .figs { grid-template-columns: 1fr; }
  .wordmark { white-space: normal; }
}