/* ==========================================================================
   Own Your Numbers - ownyournumbers.com (EDITORIAL / DISCOVERY home, v2)
   Design system: "Ground Control (OYN)" - docs/DESIGN.md
   Palette: dark #16142B per canon (Stephen's ruling 25 Aug 2026, overriding the
   light-palette recommendation in docs/growth/dotcom-build-plan-2026-08-25.md).
   No webfonts, no external requests. System font stack only.

   v2 removed the gauge/persona-chip demo card and the pricing tier styles:
   both belong to ownyournumbers.app under the 25 Aug conversion/discovery
   split. Do not reintroduce them here.

   v3 (2026-08-26), from Stephen's recorded review:
   - the hero text column is wider and a size up, and the hero can go
     two-column on its own the moment a .hero-media block exists;
   - the award row is full width and 80px instead of 56px, with a white plate
     rule for the one dark-on-light mark (ACCA);
   - a compact two-person "who builds it" strip;
   - the testimonial grid holds six named cards, two rows of three;
   - the footer link grid and the trust "pills" are gone, replaced by the
     line-based layout ownyournumbers.app uses.
   ========================================================================== */

:root {
  /* --- colour tokens (docs/DESIGN.md frontmatter) --- */
  --surface: #16142b;
  --surface-container: rgba(255, 255, 255, 0.05);
  --surface-container-low: rgba(255, 255, 255, 0.03);
  --outline: rgba(255, 255, 255, 0.10);
  --outline-variant: rgba(255, 255, 255, 0.20);

  --on-surface: #ffffff;
  --on-surface-strong: #e8e8f5;
  --on-surface-variant: #d0d0e0;
  --on-surface-muted: #a0a0b8;

  --primary: #ff6b6b;          /* coral - the ONE action colour */
  --primary-hover: #ff5252;
  --secondary: #4ecdc4;        /* turquoise - links, positive */
  --secondary-hover: #45b8b0;
  --accent-pink: #e71e56;      /* wordmark / one-keyword treatment only */
  --xero: #008fe9;

  /* risk bands - the ONLY source for cash-risk results */
  --risk-low: #3dba48;
  --risk-medium: #ffc107;
  --risk-high: #f5a05a;
  --risk-veryhigh: #ed1b5c;
  --risk-critical: #c0392b;

  /* --- shape / spacing tokens --- */
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-full: 9999px;
  --s-xs: 4px; --s-sm: 8px; --s-md: 16px; --s-lg: 24px; --s-xl: 32px;
  --s-2xl: 40px; --s-3xl: 48px;
  --container: 900px;
  --container-wide: 1140px;

  --font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica,
          "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background: var(--surface);
  color: var(--on-surface);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--s-xl); }
.wrap-wide { max-width: var(--container-wide); }

a { color: var(--secondary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Focus: visible on every interactive element, on the dark canvas. */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--secondary);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--primary); color: var(--surface);
  font-weight: 700; padding: 12px 20px; border-radius: 0 0 var(--r-lg) 0;
}
.skip-link:focus { left: 0; text-decoration: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ==========================================================================
   1. Header
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(22, 20, 43, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--outline);
}
.site-header .wrap {
  display: flex; align-items: center; gap: var(--s-lg);
  padding-top: 12px; padding-bottom: 12px;
}
.wordmark { display: inline-flex; align-items: center; line-height: 0; flex: 0 0 auto; }
.wordmark img { width: 158px; max-width: none; height: auto; display: block; }
.wordmark:hover { text-decoration: none; }

.site-nav {
  display: flex; gap: 18px; margin-left: auto;
  align-items: center; flex-wrap: wrap;
}
.site-nav a {
  color: var(--on-surface-variant); font-size: 0.92rem; font-weight: 600;
  padding: 10px 2px; min-height: 44px; display: inline-flex; align-items: center;
}
.site-nav a:hover { color: var(--on-surface); text-decoration: none; }
.site-nav .nav-xero { color: var(--on-surface); }
.site-nav .nav-xero::before {
  content: ""; display: inline-block; width: 9px; height: 9px;
  border-radius: 50%; background: var(--xero); margin-right: 7px;
}
/* Below 860px there is only room for the wordmark and the one CTA. The nav
   links all have footer equivalents, so nothing becomes unreachable.
   Specificity note: this has to out-rank `.site-nav a`, hence the two classes. */
@media (max-width: 860px) {
  .site-nav .nav-collapse { display: none; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; cursor: pointer;
  background: var(--primary); color: var(--surface);
  font-family: var(--font); font-weight: 700; font-size: 1rem;
  padding: 15px 28px; min-height: 52px; border-radius: var(--r-lg);
  text-align: center; transition: background .15s ease, transform .15s ease,
                                  box-shadow .15s ease;
}
.btn:hover {
  background: var(--primary-hover); transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 107, 107, 0.30); text-decoration: none;
}
.btn.small { padding: 10px 18px; min-height: 44px; font-size: 0.92rem; white-space: nowrap; }
.btn.ghost {
  background: transparent; color: var(--on-surface-strong);
  border: 1px solid var(--outline-variant);
}
.btn.ghost:hover { background: var(--surface-container); box-shadow: none; }

/* ==========================================================================
   Section rhythm
   ========================================================================== */

/* Clears the sticky header when an in-page anchor is followed. */
section, [id] { scroll-margin-top: 110px; }

section { padding: 64px 0; }
section + section { border-top: 1px solid rgba(255, 255, 255, 0.06); }
section.band { background: var(--surface-container-low); }

.kicker {
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.8125rem; font-weight: 600; color: var(--on-surface-muted);
  text-align: center; margin-bottom: 10px;
}
.kicker.tq { color: var(--secondary); }

h1 {
  font-size: clamp(2rem, 5vw, 3rem); line-height: 1.15;
  letter-spacing: -0.01em; text-wrap: balance; text-align: center;
  font-weight: 700;
}
h2 {
  font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1.2;
  letter-spacing: -0.01em; text-align: center; text-wrap: balance;
  margin-bottom: 12px; font-weight: 700;
}
.accent { color: var(--accent-pink); }              /* large text only (AA) */
.keyword {                                          /* body-copy emphasis:  */
  color: var(--on-surface); font-weight: 700;       /* white text keeps AA,  */
  box-shadow: inset 0 -2px 0 var(--accent-pink);    /* pink stays a mark    */
}
.section-head { margin-bottom: var(--s-2xl); }

.card {
  background: var(--surface-container);
  border: 1px solid var(--outline);
  border-radius: var(--r-xl);
  padding: var(--s-xl);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ==========================================================================
   2. Hero
   ========================================================================== */

.hero {
  padding-top: 72px; text-align: center;
  background: radial-gradient(ellipse 90% 60% at 50% -10%,
              rgba(78, 205, 196, 0.10), transparent);
}
/* Readability fix, v3, second pass after Stephen saw it live ("an ugly wall of
   centred text"). Three things were wrong, not one:
   1. `text-wrap: balance` was evening out line lengths, which pulls a paragraph
      well inside its own max-width and made 620px behave like about 500px;
   2. three stacked paragraphs of CENTRED body copy have no left edge for the
      eye to return to, so they read as a block, not as prose. Centring now
      applies to the headline and the kicker only, never the narrative;
   3. the paragraphs had no visible separation. They do now.
   Measure is 60ch, which lands inside the 55 to 65 character band.
   The column itself is still centred on the page; only the text inside it is
   left-aligned. */
.hero-story {
  max-width: 60ch; margin: var(--s-lg) auto var(--s-xl); text-align: left;
}
.hero .sub {
  color: var(--on-surface-variant); font-size: 1.1875rem; line-height: 1.65;
  max-width: 40rem; margin: var(--s-lg) auto; text-wrap: pretty;
}
/* Inside the narrative the paragraph rhythm is owned by .hero-story, so the
   auto margins come off. The bare .hero .sub above still serves 404.html. */
.hero-story .sub { max-width: none; margin: 0; }
.hero-story .sub + .sub { margin-top: var(--s-lg); }
.hero-story .sub-last { color: var(--on-surface-strong); }
.micro { color: var(--on-surface-muted); font-size: 0.9rem; margin-top: 14px; }
/* Hero v5 (28 Aug, Ciaran's Loom review). The subline reads at h2 scale, one
   step below the h1 so the pair land together without competing; regular
   weight and the softer white keep it a subline, not a second headline. */
.hero .sub-hero {
  font-size: clamp(1.35rem, 3.4vw, 1.9rem); line-height: 1.35;
  color: var(--on-surface); font-weight: 400;
  max-width: 46rem; text-wrap: balance;
}
/* Credit + CTA + trial line below the film, per the same review: the video and
   the headline own the panel, the sell follows it. */
.hero-foot { margin-top: var(--s-xl); }
.hero-foot .kicker { margin-bottom: var(--s-md); }
.proofline {
  color: var(--on-surface-muted); font-size: 0.92rem;
  margin-top: var(--s-xl); text-align: center; max-width: 620px;
  margin-left: auto; margin-right: auto;
}
.proofline strong { color: var(--on-surface-variant); }

/* Two-column hero, v3. The grid is single-column until a .hero-media block
   actually exists in the markup, so the hero degrades to the wide centred
   column on its own while the marketing film is still private and its block
   stays commented out in index.html. Uncommenting that block is the only step
   needed: :has() flips the layout, left-aligns the copy and un-centres the
   headline without any further edit here. */
.hero-grid { display: grid; grid-template-columns: 1fr; }
.hero-grid:has(.hero-media) {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--s-2xl); align-items: center; text-align: left;
}
.hero-grid:has(.hero-media) h1,
.hero-grid:has(.hero-media) .kicker { text-align: left; }
.hero-grid:has(.hero-media) .hero-story { margin-left: 0; max-width: 34rem; }
.hero-grid:has(.hero-media) .micro { text-align: left; }
.hero-media { margin: 0; max-width: none; width: 100%; }
/* width:100% is load-bearing: with align-items:center the grid item stops
   stretching, and without a definite inline size the aspect-ratio box
   collapses to ~300px once the facade img is swapped for the iframe. */
@media (max-width: 900px) {
  .hero-grid:has(.hero-media) {
    grid-template-columns: 1fr; gap: var(--s-xl); text-align: center;
  }
  .hero-grid:has(.hero-media) h1,
  .hero-grid:has(.hero-media) .kicker,
  .hero-grid:has(.hero-media) .micro { text-align: center; }
  /* Text stacks ABOVE the film on a phone, and the narrative stays
     left-aligned inside its centred column. */
  .hero-grid:has(.hero-media) .hero-story {
    margin-left: auto; margin-right: auto; text-align: left;
  }
}

/* ==========================================================================
   3. Demo video: click-to-load facade
   ========================================================================== */

/* The 16:9 box is reserved by aspect-ratio, so swapping the still for the
   iframe on click does not shift the page. */
.video {
  position: relative; max-width: 820px; margin: var(--s-2xl) auto 0;
  aspect-ratio: 16 / 9; border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--outline); background: var(--surface-container);
}
.video-facade { display: block; width: 100%; height: 100%; position: relative; }
.video-facade:hover { text-decoration: none; }
.video-facade img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* CSS-only play button: a coral disc with a white triangle. No image request. */
.video-play {
  position: absolute; top: 50%; left: 50%;
  width: 78px; height: 78px; margin: -39px 0 0 -39px;
  border-radius: 50%; background: var(--primary);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  transition: background .15s ease, transform .15s ease;
}
.video-play::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  margin: -15px 0 0 -9px;
  border-style: solid; border-width: 15px 0 15px 24px;
  border-color: transparent transparent transparent #ffffff;
}
.video-facade:hover .video-play,
.video-facade:focus-visible .video-play {
  background: var(--primary-hover); transform: scale(1.06);
}
.video-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(transparent, rgba(8, 7, 17, 0.97) 55%);
  color: #ffffff; font-weight: 700; font-size: 0.95rem;
  padding: 48px var(--s-md) 16px; text-align: center;
}
.video-frame { width: 100%; height: 100%; border: 0; display: block; }
.caption {
  color: var(--on-surface-muted); font-size: 0.86rem;
  text-align: center; margin-top: var(--s-md);
}

/* ==========================================================================
   4. Prose
   ========================================================================== */

.prose {
  color: var(--on-surface-variant); font-size: 1.08rem;
  max-width: 640px; margin: 0 auto; text-align: left;
}
.prose + .prose { margin-top: var(--s-md); }
/* /compare/ only: the running order, one line, no links until the pages exist. */
.compare-coming { margin-top: var(--s-lg); }
.compare-coming strong { color: var(--on-surface); }

/* ==========================================================================
   5-6. Grids (steps, benefits)
   ========================================================================== */

.grid-3 {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-lg);
}
.grid-3 .card h3 { font-size: 1.06rem; margin-bottom: var(--s-sm); }
.grid-3 .card { display: flex; flex-direction: column; }
.grid-3 .card p { color: var(--on-surface-variant); font-size: 1rem; line-height: 1.65; }
.grid-3 .card p:last-child { margin-top: auto; padding-top: var(--s-md); }
/* Channel marks: the official platform logos in colour (Stephen's call,
   26 Aug), sat at the top of each card so the three cards balance. Full
   colour at rest; the Skool favicon carries its own white squircle plate. */
.card-mark {
  display: block; width: 40px; height: 40px;
  margin-bottom: var(--s-md); border-radius: 8px;
}
.step-num {
  display: inline-flex; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(78, 205, 196, 0.14); color: var(--secondary);
  align-items: center; justify-content: center; font-weight: 800;
  margin-bottom: 12px;
}
.steps-note {
  color: var(--on-surface-muted); font-size: 0.9rem;
  text-align: center; margin-top: var(--s-lg);
}

/* ==========================================================================
   4b. Ciaran: the named human
   ========================================================================== */

.person {
  display: grid; grid-template-columns: 300px 1fr; gap: var(--s-2xl);
  align-items: start;
}
.person-photo { margin: 0; }
.person-photo img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-xl); border: 1px solid var(--outline);
}
.person-photo figcaption,
.pointer-figure figcaption {
  color: var(--on-surface-muted); font-size: 0.82rem; margin-top: 10px;
}
.person-body .prose { margin-left: 0; text-align: left; }

.pull-quote {
  border-left: 3px solid var(--accent-pink);
  padding: 4px 0 4px var(--s-lg);
  margin: var(--s-lg) 0;
  font-style: normal;
}
.pull-quote p {
  font-size: 1.2rem; line-height: 1.45; font-weight: 600;
  color: var(--on-surface); text-wrap: balance;
}
.pull-quote footer {
  margin-top: 10px; color: var(--on-surface-muted); font-size: 0.86rem;
}

.creds { list-style: none; margin: var(--s-lg) 0 0; }
.creds li {
  color: var(--on-surface-variant); font-size: 0.98rem;
  padding: 7px 0 7px 24px; position: relative;
}
.creds strong { color: var(--on-surface); }
.creds li::before {
  content: ""; position: absolute; left: 2px; top: 15px;
  width: 6px; height: 10px; border: solid var(--secondary);
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* v3: the marks moved out of the body column and now run the full width of the
   section, spread evenly, at 80px instead of 56px. Three of the four are white
   line art on transparency and need no plate. The fourth (ACCA) is dark type on
   its own white ground, which is exactly how the shipped Xero listing carousel
   uses it, so it keeps that plate and only gets its corners softened. */
.awards {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: var(--s-lg) var(--s-2xl);
  align-items: center; justify-content: space-between;
  margin-top: var(--s-2xl); padding-top: var(--s-xl);
  border-top: 1px solid var(--outline);
}
.awards li { display: flex; align-items: center; justify-content: center; flex: 0 1 auto; }
.awards img { height: 80px; width: auto; opacity: 0.85; }
.awards .award-plate { opacity: 0.92; border-radius: var(--r-sm); }
/* Stephen's certification row (28 Aug): official issuer badges in full colour,
   so no dimming, and round/hex marks read smaller than the wide award logos at
   the same height, so they get a step up. No top rule of its own: it sits
   inside the team block, which already draws one. */
/* Stephen's certifications, text treatment (29 Aug - the official badge
   images were ruled too loud for the page, and greyscaling them killed
   recognition). The band draws the same full-width faint rule as the awards
   row above; the line itself stays a narrow centred measure. */
.creds-band {
  margin-top: var(--s-2xl); padding-top: var(--s-xl);
  border-top: 1px solid var(--outline);
}
.creds-line {
  text-align: center; color: var(--on-surface-muted);
  font-size: 0.92rem; line-height: 1.9; max-width: 660px;
  margin: 0 auto;
}
/* One credential family per line (Stephen, 29 Aug): Google Cloud / Kubernetes
   / Anthropic. On narrow screens each line simply wraps within itself. */
.creds-line span { display: block; }
.creds-line strong { color: var(--on-surface-variant); font-weight: 600; }

/* ==========================================================================
   4c. Who builds it: the two-person strip
   ========================================================================== */

/* Deliberately compact. This is a weave under the Ciaran block, not a team
   section: one row, two people, one line each. */
.team { margin-top: var(--s-2xl); padding-top: var(--s-xl); border-top: 1px solid var(--outline); }
.team-head {
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8125rem;
  font-weight: 600; color: var(--on-surface-muted); margin-bottom: var(--s-lg);
}
.team-row {
  list-style: none; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-xl);
}
.team-member { display: flex; gap: var(--s-md); align-items: flex-start; }
.team-face {
  flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%;
  object-fit: cover; object-position: 50% 22%;
  border: 1px solid var(--outline-variant);
}
.team-name { font-weight: 700; color: var(--on-surface); font-size: 1rem; }
.team-name span {
  display: block; font-weight: 400; font-size: 0.84rem;
  color: var(--on-surface-muted); letter-spacing: 0.02em;
}
.team-line {
  color: var(--on-surface-variant); font-size: 0.95rem; margin-top: 6px;
}

/* ==========================================================================
   7. Deep social proof
   ========================================================================== */

/* Six named cards, two rows of three on desktop, two across on a tablet, one
   on a phone. The 280px floor is what pins it to three columns inside the
   1140px wrap rather than letting a fourth squeeze in. */
.quote-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-lg);
}
.quote-grid .card { display: flex; }

/* The founders film, alongside the line it is famous for. */
.founders-film {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--s-2xl); align-items: center; margin-top: var(--s-2xl);
}
.founders-film .video { margin: 0; max-width: none; }
.founders-film-text .pull-quote { margin-top: 0; }
.founders-film-text .pull-quote p { font-size: 1.5rem; }
.founders-film-text .prose { margin-left: 0; max-width: none; }
@media (max-width: 820px) {
  .founders-film { grid-template-columns: 1fr; gap: var(--s-xl); }
}
blockquote { font-size: 1rem; color: var(--on-surface-strong); font-style: italic; }
blockquote footer {
  margin-top: 12px; color: var(--on-surface-muted); font-size: 0.86rem;
  font-style: normal;
}
.pull-card { text-align: center; margin-top: var(--s-lg); padding: 36px var(--s-xl); }
.pull-card blockquote { font-size: 1.35rem; font-weight: 600; font-style: normal; }
.cred-band { margin-top: var(--s-lg); padding: var(--s-lg) var(--s-xl); }
.cred-band p { color: var(--on-surface-variant); font-size: 0.95rem; }
.cred-band strong { color: var(--on-surface); }
.honest {
  color: var(--on-surface-muted); font-size: 0.92rem; margin-top: 22px;
  text-align: center; font-style: italic;
}

/* ==========================================================================
   8. Product pointer
   ========================================================================== */

.pointer {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2xl);
  align-items: center;
}
.pointer-body .prose { margin-left: 0; max-width: none; }
.pointer-body .prose + .prose { margin-top: var(--s-md); }
.pointer-body .btn { margin-top: var(--s-lg); }
.pointer-body .micro { text-align: left; }
.pointer-figure { margin: 0; }
.pointer-figure img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-xl); border: 1px solid var(--outline);
}

/* ==========================================================================
   9. FAQ
   ========================================================================== */

.faq { max-width: 740px; margin: 0 auto; }
.faq-item { border-top: 1px solid var(--outline); padding: 20px 0; }
.faq-item:last-child { border-bottom: 1px solid var(--outline); }
.faq-item h3 { font-size: 1.02rem; margin-bottom: 6px; }
.faq-item p { color: var(--on-surface-variant); font-size: 0.95rem; }

/* ==========================================================================
   10. Footer
   ========================================================================== */

/* v3: the four-column link grid and the trust pills are gone. This is the
   ownyournumbers.app footer shape: one wrapped row of links, then plain closing
   lines. Nothing but text and links, centred, quiet.
   Do not reintroduce .badge pills here. */
.site-footer {
  border-top: 1px solid var(--outline);
  background: var(--surface-container-low);
  padding: var(--s-2xl) 0 var(--s-xl);
  text-align: center;
}
.foot-links {
  color: var(--on-surface-muted); font-size: 0.92rem; line-height: 2.1;
  max-width: 900px; margin: 0 auto var(--s-lg);
}
.foot-links a { color: var(--on-surface-variant); overflow-wrap: anywhere; }
.foot-links a:hover { color: var(--on-surface); }
/* Footer links wrap into a dense row, so each one carries a real touch target
   without the 44px block breaking the line flow. */
.foot-links a { display: inline-block; padding: 8px 2px; }
.foot-line {
  color: var(--on-surface-muted); font-size: 0.88rem;
  max-width: 760px; margin: 0 auto 8px; text-wrap: pretty;
}
.foot-line a { color: var(--on-surface-variant); }
.foot-bottom {
  margin-top: var(--s-lg); padding-top: var(--s-md);
  border-top: 1px solid var(--outline); max-width: none;
}

/* ==========================================================================
   Legal / content pages (privacy)
   ========================================================================== */

.legal { padding: 56px 0 72px; }
.legal .wrap { max-width: 740px; }
.legal h1 { text-align: left; font-size: clamp(1.75rem, 4vw, 2.5rem); }
.legal h2 {
  text-align: left; font-size: 1.25rem; margin: var(--s-2xl) 0 var(--s-sm);
}
.legal p, .legal li { color: var(--on-surface-variant); }
.legal p { margin-bottom: var(--s-md); }
.legal ul { margin: 0 0 var(--s-md) var(--s-lg); }
.legal li { margin-bottom: var(--s-sm); }
.legal .updated { color: var(--on-surface-muted); font-size: 0.9rem; }
.notice {
  background: var(--surface-container); border: 1px solid var(--outline);
  border-left: 4px solid var(--primary); border-radius: var(--r-lg);
  padding: var(--s-lg); margin: var(--s-lg) 0;
}
.notice p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Two-column blocks stack before the columns get too narrow to read. */
@media (max-width: 820px) {
  .person, .pointer { grid-template-columns: 1fr; gap: var(--s-xl); }
  .person-photo { max-width: 280px; }
}

@media (max-width: 720px) {
  .wrap { padding: 0 var(--s-md); }
  .site-header .wrap { padding-top: 10px; padding-bottom: 10px; }
  .wordmark img { width: 118px; }
  .btn.small { padding: 10px 14px; font-size: 0.88rem; }
  section { padding: 48px 0; }
  .hero { padding-top: 48px; }
  .hero .sub { font-size: 1.0625rem; }
  .hero .sub-hero { font-size: 1.25rem; }
  .btn { width: 100%; }
  .site-nav .btn { width: auto; }
  .video-play { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
  .video-play::after {
    margin: -12px 0 0 -7px;
    border-width: 12px 0 12px 19px;
  }
  .pull-quote p { font-size: 1.08rem; }
  .founders-film-text .pull-quote p { font-size: 1.25rem; }
  /* Still bigger than the 56px of v2, and still spread, but centred once the
     row wraps to two-up rather than stranded against the edges. */
  .awards { gap: var(--s-lg) var(--s-xl); justify-content: center; }
  .awards img { height: 62px; }
  .team-row { gap: var(--s-lg); }
  .foot-links { line-height: 2.3; }
}

@media (max-width: 400px) {
  .video-label { font-size: 0.86rem; }
  .awards img { height: 52px; }
  .team-face { width: 60px; height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .btn:hover { transform: none; }
  .video-facade:hover .video-play { transform: none; }
}

/* Single-member team strip (Ciaran's card removed 26 Aug): one wider entry,
   bigger face, roomier line length. */
.team-solo { grid-template-columns: 1fr; max-width: 46rem; }
.team-solo .team-face { width: 112px; height: 112px; }
.team-solo .team-name { font-size: 1.15rem; }
.team-solo .team-line { font-size: 1.05rem; max-width: 34rem; }

/* ==========================================================================
   11. Learn / evidence pages (article shell)
   Added 2026-08-26 for the C evidence-page set (oyn-gtm tasks/BACKLOG-SEO-AEO.md
   section C, DEMO DRAFTS pending Ciaran's read). Reuses the .legal measure and
   adds the article furniture the work order requires: answer-first verdict box,
   byline strip with dates, methodology box, compact comparison table, one CTA.
   Cache pin bumped to 20260826d with this addition.
   ========================================================================== */

.article { padding: 48px 0 72px; }
.article .wrap { max-width: 740px; }
.article .kicker { text-align: left; margin-bottom: 6px; }
.article h1 {
  text-align: left; font-size: clamp(1.9rem, 4.4vw, 2.6rem);
  margin-bottom: var(--s-md);
}
.article h2 { text-align: left; font-size: 1.45rem; margin: var(--s-3xl) 0 var(--s-sm); }
.article h3 { font-size: 1.1rem; margin: var(--s-xl) 0 var(--s-sm); }
.article p, .article li { color: var(--on-surface-variant); }
.article p { margin-bottom: var(--s-md); max-width: 66ch; }
.article ul, .article ol { margin: 0 0 var(--s-md) var(--s-lg); }
.article li { margin-bottom: var(--s-sm); }
.article strong { color: var(--on-surface); }
.article blockquote { margin: var(--s-lg) 0; }

/* Amber flag on every draft. DELETE the element at publish, not the class. */
.draft-flag {
  display: inline-block; margin-bottom: var(--s-md);
  background: rgba(255, 193, 7, 0.10); border: 1px solid rgba(255, 193, 7, 0.35);
  color: var(--risk-medium); border-radius: var(--r-md);
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 5px 10px;
}

/* The verdict, first, in the prompt's own words. */
/* Standfirst, v2 (Stephen, 27 Aug: the boxed "bubble" read as AI slop).
   Editorial lede instead: larger type, no card, a hairline above and below,
   like a magazine standfirst. The opening <strong> carries the verdict. */
.answer-first {
  border-top: 1px solid var(--outline); border-bottom: 1px solid var(--outline);
  padding: var(--s-lg) 0; margin: var(--s-lg) 0 var(--s-xl);
}
.answer-first p {
  color: var(--on-surface-variant); font-size: 1.3rem; line-height: 1.55;
  margin: 0 0 var(--s-sm); max-width: none; text-wrap: pretty;
}
.answer-first strong { color: var(--on-surface-strong); }
.answer-first p:last-child { margin-bottom: 0; }

/* Byline strip: the named human, dated. */
.byline {
  display: flex; gap: var(--s-md); align-items: center;
  padding: var(--s-md) 0; margin: var(--s-lg) 0;
  border-top: 1px solid var(--outline); border-bottom: 1px solid var(--outline);
}
.byline img {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  object-position: 50% 25%; border: 1px solid var(--outline-variant);
  flex: 0 0 auto;
}
.byline p { margin: 0; font-size: 0.9rem; color: var(--on-surface-muted); max-width: none; }
.byline .byline-name { color: var(--on-surface); font-weight: 700; font-size: 1rem; }

/* Methodology / provenance box: small, quiet, present on every page. */
.methodology {
  background: var(--surface-container-low); border: 1px solid var(--outline);
  border-radius: var(--r-lg); padding: var(--s-md) var(--s-lg);
  margin: var(--s-xl) 0;
}
.methodology p { font-size: 0.88rem; color: var(--on-surface-muted); margin-bottom: var(--s-sm); }
.methodology p:last-child { margin-bottom: 0; }
.methodology strong { color: var(--on-surface-variant); }

/* Compact comparison table: redundant with the prose on purpose (AI crawlers
   read tables, people read sentences; the work order asks for both). */
.table-scroll { overflow-x: auto; margin: var(--s-lg) 0; }
.article table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.article th, .article td {
  text-align: left; padding: 10px 12px;
  border-bottom: 1px solid var(--outline);
  color: var(--on-surface-variant); vertical-align: top;
}
.article th {
  color: var(--on-surface); font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.article td strong { color: var(--on-surface); }

/* Worked example: the sums, shown, with the source stated. */
.worked {
  background: var(--surface-container); border: 1px solid var(--outline);
  border-radius: var(--r-lg); padding: var(--s-lg); margin: var(--s-lg) 0;
}
.worked p { margin-bottom: var(--s-sm); }
.worked .worked-note {
  color: var(--on-surface-muted); font-size: 0.92rem;
  margin-bottom: var(--s-md);
}
.worked .sum { font-size: 1.12rem; color: var(--on-surface); font-weight: 700; }
.worked p:last-child { margin-bottom: 0; }

/* ONE action link per page, left-aligned inside the measure. */
.article-cta { margin: var(--s-2xl) 0 0; }
.article-cta .micro { text-align: left; }

/* Related pages, quiet. */
.crosslinks { margin-top: var(--s-2xl); padding-top: var(--s-lg); border-top: 1px solid var(--outline); }
.crosslinks p { font-size: 0.92rem; color: var(--on-surface-muted); margin-bottom: 0; }

/* Video inside an article sits flush with the measure. */
.article .video { max-width: none; margin: var(--s-lg) 0; }

/* --------------------------------------------------------------------------
   Learn index: editorial rows (Stephen's review, 26 Aug: "vertical segments,
   smaller version of the whole page - thumbnail, title, hook, then the click
   in"). The pattern is the editorial-index one good publications and the best
   SaaS blogs use: one column, thumbnail left in a fixed 16:9 plate, kicker +
   title + teaser + meta right, hairline dividers, the WHOLE row is the link.
   Scales to the C2 learn library (89 pieces) where a card grid would not.
   -------------------------------------------------------------------------- */
.index-list { max-width: 980px; margin: var(--s-2xl) auto 0; }
a.index-row {
  display: grid; grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--s-xl); align-items: center;
  padding: var(--s-xl) 0; border-top: 1px solid var(--outline);
}
a.index-row:hover { text-decoration: none; }
a.index-row:last-of-type { border-bottom: 1px solid var(--outline); }
.index-thumb {
  aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--outline); background: var(--surface-container);
}
.index-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .25s ease;
}
a.index-row:hover .index-thumb img { transform: scale(1.03); }
.index-thumb { display: block; }
.index-kicker {
  display: block; font-size: 0.78rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--secondary); font-weight: 700;
  margin-bottom: 6px;
}
.index-title {
  display: block; font-size: 1.35rem; font-weight: 700; color: var(--on-surface);
  line-height: 1.25; margin-bottom: 8px; text-wrap: balance;
}
a.index-row:hover .index-title { text-decoration: underline; text-underline-offset: 3px; }
.index-teaser {
  display: block; color: var(--on-surface-variant); font-size: 0.98rem;
  line-height: 1.55; max-width: 58ch; margin-bottom: 10px;
}
.index-meta { display: block; color: var(--on-surface-muted); font-size: 0.84rem; }
@media (max-width: 720px) {
  a.index-row { grid-template-columns: 1fr; gap: var(--s-md); }
  .index-thumb { max-width: 480px; }
}
@media (prefers-reduced-motion: reduce) {
  a.index-row:hover .index-thumb img { transform: none; }
}

/* Hero layout D (picked from A-D proofs on Desktop, 26 Aug): 50/50 columns,
   film centred against the paragraph block so the whitespace is symmetric. the kicker and
   headline span the full container; below them the paragraphs+CTA sit left and
   the film right, TOPS ALIGNED. This kills the floating-video diagonal that two
   earlier passes had. */
.hero-head { text-align: center; }  /* centred headline over the columns won on review */
.hero-head h1 { margin: 0 0 2.5rem 0; }
.hero-grid:has(.hero-media) {
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem; align-items: center;
}
.hero-grid:has(.hero-media) .hero-media.video { margin-top: 0; }

/* ==========================================================================
   Hero v4 film slot (27 Aug): the marketing film sits full-width UNDER the
   hero message (meeting ruling: message stretched full-width with room to
   breathe; Stephen's constraint: the film keeps its hero slot). Width capped
   so the film reads as an invitation, not a second hero. .video supplies the
   aspect-ratio box and facade behaviour as everywhere else.
   ========================================================================== */
.hero-film { max-width: 880px; margin: var(--s-2xl) auto 0; }
.hero .kicker { margin-bottom: var(--s-md); }