/* ==========================================================================
   Liffey - shared stylesheet
   Design tokens: monochrome ink, matched to the Liffey product (liffey.app).
   Base system: b2b-website design system, Inter self-hosted (EU/GDPR-clean).
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The display face is Inter, the same family as the body copy, so the site runs
   on one typeface. It replaced Literata on 2026-09-05: the serif read editorial,
   and the positioning is a platform. Dropping it also drops the Georgia
   size-adjust hack that kept the fallback from reflowing the hero headline.
   The serif alternates are still in assets/fonts if the decision is revisited:
   literata-var, sourceserif-var, newsreader-var, fraunces-var. */

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

:root {
  /* ---- INK ---- */
  --ink:                 #17150f;
  --text-primary:        #17150f;
  --text-secondary:      #56524a;
  --text-tertiary:       #635d4b;

  /* ---- ACCENT. Five permitted roles only. See DESIGN-MIGRATION.md section 2.3. ---- */
  --brand-primary:       #b5502f;   /* fills and marks */
  --brand-ink:           #963f25;   /* all orange TEXT. Darkened 2026-09-05 from
                                       #a3462a, which fell to 4.15:1 on the deeper
                                       --bg-mid and failed AA for the 11px labels. */
  --brand-primary-hover: #953f22;
  --brand-on-dark:       #cf7050;   /* accent on ink ground */
  --brand-tint:          rgba(181, 80, 47, 0.18);

  /* ---- PAPER ---- */
  --bg-white:            #fdfcf8;
  --bg-light:            #ece5d6;
  --bg-mid:              #dfd5be;
  --bg-dark:             #17150f;
  --bg-darker:           #100e0a;

  /* ---- SCREEN. Deliberately cool: the hero panel is a different material. ---- */
  --bg-screen:           #ffffff;
  --border-screen:       #e8e6e2;

  /* ---- RULES ---- */
  --border-light:        #e5e0d3;
  --border-medium:       #cdc6b6;
  --ok:                  #4a6b52;

  /* ---- TYPE ---- */
  --display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- RADIUS + SHADOW ---- */
  --radius: 10px;
  --radius-sm: 6px;
  --shadow-hover: 0 8px 24px rgba(23, 21, 15, 0.07);
}

html { scroll-behavior: smooth; }

/* Nothing may widen the page. Several hero elements are deliberately wider than
   the viewport and rely on an ancestor clipping them; this is the backstop for
   any that is missed, and for the ones only a real phone reveals.

   clip, not hidden. overflow-x: hidden on html or body creates a scroll
   container, which silently kills position:sticky on the nav. clip does the
   same containment without that side effect. */
html, body { overflow-x: clip; }

body {
  font-family: var(--sans);
  background: var(--bg-white);
  color: var(--text-primary);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1 { font-family: var(--display); font-size: 46px; font-weight: 600; line-height: 1.08; letter-spacing: -0.032em; }
h2 { font-family: var(--display); font-size: 36px; font-weight: 600; line-height: 1.14; letter-spacing: -0.026em; }
h3 { font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; }  /* sans: sub-heads are interface */
h4 { font-size: 16px; font-weight: 600; line-height: 1.4; }

/* Catch-all, deliberately placed ABOVE the p/li rules so equal specificity still
   resolves in their favour by source order. A link inside any other element
   matched nothing and fell through to the browser's default blue, which is the
   one colour the palette bans outright. /pricing has been shipping blue links in
   its procurement block since that section was built, because .cap-row b a is
   neither a p nor an li. Found 2026-08-15 while building the author page. */
main a { color: var(--text-primary); }
main a:hover { color: var(--brand-primary); }

p a, li a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 2px; transition: color 0.15s ease; }
p a:hover, li a:hover { color: var(--text-secondary); }

/* --- Layout primitives ---------------------------------------------------- */

.container { max-width: 1080px; margin: 0 auto; padding: 0 40px; }

.section { padding: 88px 0; }
.section-white { background: var(--bg-white); }
.section-light { background: var(--bg-light); }

.section-label {
  font-family: var(--mono); font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--brand-ink); margin-bottom: 12px;
}

.section-header { margin-bottom: 48px; max-width: 720px; }
.section-header.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-title { font-family: var(--display); font-size: 38px; font-weight: 600; line-height: 1.14; letter-spacing: -0.026em; }
.section-subtitle { font-size: 17px; color: var(--text-secondary); margin-top: 12px; }

/* --- Buttons --------------------------------------------------------------- */

.btn-primary {
  background: var(--brand-primary);
  color: #ffffff;
  padding: 12px 28px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  display: inline-block;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.btn-primary:hover {
  background: var(--brand-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(23, 21, 15, 0.16);
}

.btn-ghost {
  background: transparent;
  color: var(--text-primary);
  padding: 12px 28px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: 1.5px solid var(--border-medium);
  display: inline-block;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-ghost:hover { border-color: var(--text-primary); transform: translateY(-1px); }

/* Ghost buttons on dark sections only */
.closing-cta .btn-ghost, .dark-section .btn-ghost {
  color: #ffffff; border-color: rgba(255, 255, 255, 0.3);
}
.closing-cta .btn-ghost:hover, .dark-section .btn-ghost:hover { border-color: #ffffff; }

/* Primary button on dark sections: inverted */
.closing-cta .btn-primary, .dark-section .btn-primary {
  background: #ffffff; color: var(--text-primary);
}
.closing-cta .btn-primary:hover, .dark-section .btn-primary:hover {
  background: var(--bg-light); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.btn-group { display: flex; gap: 12px; flex-wrap: wrap; }

/* --- Cards ----------------------------------------------------------------- */

.card {
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 28px;
  background: var(--bg-white);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover {
  transform: translateY(-2px);
  border-color: var(--border-medium);
  box-shadow: var(--shadow-hover);
}

.card-icon {
  width: 40px; height: 40px; border-radius: 8px;
  background: rgba(23, 21, 15, 0.05);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  color: var(--text-primary);
}
.card-icon svg { flex-shrink: 0; }

.card h3 { font-size: 18px; margin-bottom: 8px; }
.card > p { font-size: 14px; color: var(--text-secondary); }
/* Cards held one paragraph until the build guide needed several, and with no
   margin between them they ran together into a block. */
.card > p + p { margin-top: 11px; }

.card-link {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  margin-top: 16px;
  display: inline-block;
  border-bottom: 1px solid var(--border-medium);
  padding-bottom: 1px;
  transition: border-color 0.15s ease;
}
.card-link:hover { border-color: var(--text-primary); }

/* --- Check list ------------------------------------------------------------ */

.check-list { list-style: none; margin: 16px 0 0; }
.check-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; color: var(--text-secondary);
  padding: 6px 0;
}
.check-list li svg { flex-shrink: 0; margin-top: 3px; color: var(--text-primary); }
.check-list li strong { color: var(--text-primary); font-weight: 600; }

/* --- Grids ------------------------------------------------------------------ */

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }

/* --- Quote block ------------------------------------------------------------ */

.quote {
  font-size: 20px;
  font-style: italic;
  line-height: 1.6;
  border-left: 3px solid var(--ink);
  padding-left: 24px;
  color: var(--text-primary);
}
.quote-attribution {
  font-size: 14px; color: var(--text-secondary);
  margin-top: 12px; font-style: normal;
}

/* --- Trust badges ------------------------------------------------------------ */

.trust-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 99px;
  padding: 7px 16px;
  font-size: 12.5px;
  color: var(--text-secondary);
  font-weight: 500;
  transition: opacity 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}
.trust-badge:hover { transform: translateY(-1px); border-color: var(--border-medium); }
.trust-badge svg { color: var(--text-primary); flex-shrink: 0; }
.trust-badge .pending { color: var(--text-tertiary); font-weight: 400; }

/* --- Closing CTA -------------------------------------------------------------- */

.closing-cta {
  background: var(--bg-dark);
  padding: 80px 0;
  color: #ffffff;
  text-align: center;
}
.closing-cta h2 { font-family: var(--display); color: #ffffff; font-size: 34px; font-weight: 600; letter-spacing: -0.026em; }
.closing-cta p { color: rgba(255, 255, 255, 0.72); max-width: 560px; margin: 16px auto 32px; }
.closing-cta .btn-group { justify-content: center; }

/* --- Footer -------------------------------------------------------------------- */

footer {
  background: var(--bg-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.7);
  padding: 64px 0 32px;
  font-size: 14px;
}
footer .footer-grid {
  display: grid;
  /* brand plus five link columns. Adding Compare made a sixth child, which the
     old five-track grid wrapped onto its own row below the fold. */
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr 1fr;
  gap: 40px 26px;
  margin-bottom: 48px;
}
footer .footer-brand img { height: 24px; width: auto; margin-bottom: 16px; }
footer .footer-brand p { font-size: 13px; color: rgba(255, 255, 255, 0.55); max-width: 260px; }
footer h4 {
  color: #ffffff; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px;
}
footer ul { list-style: none; }
footer ul li { padding: 5px 0; }
footer a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.15s ease;
}
footer a:hover { color: #ffffff; }
footer .footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 24px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 12.5px; color: rgba(255, 255, 255, 0.45);
}

/* --- Accessibility --------------------------------------------------------------- */

/* Visually hidden, still announced. Used for form labels. Deliberately NOT the
   .skip-link pattern: that one parks itself at top:-48px and slides in on focus,
   which only works while the page is its containing block. Give any ancestor
   position:relative and a -48px label reappears on screen. This technique has no
   such dependency. */
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -48px; left: 0;
  background: var(--brand-primary); color: #ffffff;
  padding: 10px 18px; z-index: 1000;
  text-decoration: none; font-weight: 600; transition: top 0.2s;
}
.skip-link:focus { top: 0; }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--brand-primary); outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* --- Motion ------------------------------------------------------------------------ */

.fade-in { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .fade-in { opacity: 1; transform: none; }
}

/* --- Responsive --------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .container { padding: 0 24px; }
  h1 { font-size: 38px; }
  h2, .section-title { font-size: 28px; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  footer .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  footer .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .section { padding: 48px 0; }
  .container { padding: 0 20px; }
  h1 { font-size: 30px; }
  h2, .section-title { font-size: 23px; }
  h3 { font-size: 18px; }
  .closing-cta h2 { font-size: 24px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .btn-group { flex-direction: column; }
  .btn-group .btn-primary, .btn-group .btn-ghost { width: 100%; text-align: center; }
  footer .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}


/* ---------- Template D: legal documents ---------- */
.legal { max-width: 1000px; margin: 0 auto; padding: 70px 24px 100px; }
.legal-head { padding-bottom: 26px; border-bottom: 1px solid var(--border-medium); margin-bottom: 40px; }
.legal-head h1 { font-family: var(--display); font-weight: 600; font-size: 40px; letter-spacing: -0.032em;
  letter-spacing: -0.018em; line-height: 1.12; margin-bottom: 12px; }
.legal-updated { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-tertiary); }
.legal-body { max-width: 720px; }
.legal-body > p { font-size: 16.5px; line-height: 1.75; color: var(--text-secondary); margin-bottom: 18px; }
.legal-body h2 { font-family: var(--display); font-weight: 600; font-size: 23px; letter-spacing: -0.020em;
  letter-spacing: -0.008em; margin-bottom: 14px; }
.legal-body h3 { font-size: 15.5px; font-weight: 600; margin: 22px 0 8px; }
.legal-body section { padding-top: 36px; }
.legal-body section p { font-size: 16px; line-height: 1.75; color: var(--text-secondary); margin-bottom: 15px; }
.legal-body section ul, .legal-body section ol { margin: 0 0 15px 20px; }
.legal-body section li { font-size: 16px; line-height: 1.7; color: var(--text-secondary); margin-bottom: 8px; }
.legal-body a { color: var(--text-primary); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px; }
.legal-body a:hover { color: var(--brand-primary); }
.legal-toc { background: var(--bg-light); border: 1px solid var(--border-light);
  border-radius: 10px; padding: 22px 26px 20px; margin: 30px 0 8px; }
.legal-toc h2 { font-family: var(--sans, inherit); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 12px; }
.legal-toc ol { margin: 0; list-style: none; }  /* headings carry their own numbers */
.legal-toc li { font-size: 14.5px; line-height: 1.55; margin-bottom: 6px; }
.legal-toc a { color: var(--text-secondary); text-decoration: none; }
.legal-toc a:hover { color: var(--brand-primary); text-decoration: underline; }
.legal-table { width: 100%; border-collapse: collapse; margin: 6px 0 18px; font-size: 14.5px; }
.legal-table th, .legal-table td { text-align: left; padding: 10px 12px;
  border-bottom: 1px solid var(--border-light); vertical-align: top; line-height: 1.55; }
.legal-table th { font-weight: 600; color: var(--text-primary); border-bottom-color: var(--border-medium); }
.legal-table td { color: var(--text-secondary); }
.legal-table-wrap { overflow-x: auto; }
@media (max-width: 768px) {
  .legal { padding: 48px 20px 70px; }
  .legal-head h1 { font-size: 29px; }
  .legal-body h2 { font-size: 20px; }
}


/* ---------- Template A: argument pages ---------- */
.page-hero { padding: 78px 0 62px; border-bottom: 1px solid var(--border-light); }
.page-hero .kicker { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--brand-primary); margin-bottom: 18px; }
/* h1 and lede share a measure. They were 860 and 700, so the standfirst stopped
   short of the headline and the hero block read as out of true. */
.page-hero h1 { font-family: var(--display); font-weight: 600; font-size: 44px; letter-spacing: -0.032em;
  line-height: 1.12; max-width: 780px; margin-bottom: 20px; }
.page-hero .lede { font-size: 18.5px; line-height: 1.62; color: var(--text-secondary);
  max-width: 780px; margin-bottom: 30px; }
/* A second line under a headline: the market's name for a role, set quietly
   beneath our name for it. */
.page-hero h1 .h1-sub { display: block; font-family: var(--sans); font-size: 19px;
  font-weight: 500; letter-spacing: 0; color: var(--text-tertiary); margin-top: 12px; }
@media (max-width: 768px) { .page-hero h1 .h1-sub { font-size: 16px; margin-top: 9px; } }

/* A hard line break in a headline is an editorial choice at desktop width and a
   liability on a phone, where it strands a two-word orphan line. */
@media (max-width: 768px) { .page-hero h1 br, .section-title br, .cap-grid h2 br { display: none; } }
/* A role title runs to "Commercial Architect | Marketing", which measures wider
   than a phone at the standard step and orphans the discipline after the pipe.
   It shrinks to hold on one line instead, tuned at the narrowest handsets: the
   container grows faster than the viewport does, so a value that fits at 360px
   fits at every width above it. */
@media (max-width: 768px) { .page-hero h1.h1-long { font-size: clamp(15px, 5.3vw, 26px); } }
/* Balance the page headings on a phone so the last line does not strand a single
   word. Scoped to the page hero: the home hero has a tuned three-line break that
   balancing would redistribute. Browsers without support wrap as before. */
@media (max-width: 768px) { .page-hero h1, .page-hero .lede { text-wrap: balance; } }
.page-hero .btn-group { display: flex; gap: 12px; flex-wrap: wrap; }

/* Numbered steps. A how-to guide needs a list that reads as a sequence rather than
   as bullets, and nothing in the prose sections styled <ol> before this. */
/* A step list had no bottom margin, so a paragraph after it butted straight
   against the last item. :last-child keeps the spacing off the end of a block. */
.steps { counter-reset: step; list-style: none; margin: 15px 0 22px; padding: 0; }
.steps:last-child { margin-bottom: 0; }
.steps li { counter-increment: step; position: relative; padding-left: 36px;
  margin-bottom: 12px; font-size: 15.5px; line-height: 1.65; color: var(--text-secondary); }
.steps li:last-child { margin-bottom: 0; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 0;
  width: 23px; height: 23px; border-radius: 50%; border: 1px solid var(--border-medium);
  font-family: var(--mono); font-size: 11px; color: var(--brand-ink);
  display: flex; align-items: center; justify-content: center; }
.steps li strong { color: var(--text-primary); font-weight: 600; }
/* A "decide this before you move on" line, closing a block of guidance. */
.decide { font-size: 14px; line-height: 1.6; color: var(--text-primary);
  border-top: 1px solid var(--border-light); margin-top: 14px; padding-top: 12px; }
.decide b { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--brand-ink); display: block; margin-bottom: 5px; }

/* The client quote in the dark closing band. Lived in index.html's style block
   until the band carried it on every page; a shared block needs shared CSS. */
/* Full container width. At 720px the quote wrapped far more than the headline
   under it, and the two blocks read as different columns. */
.close-quote { max-width: none; margin: 0 auto 44px; text-align: center;
  padding-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,0.14); }
/* .closing-cta p caps the CTA standfirst at 560px and matched this paragraph
   too, which is why the quote kept wrapping short of its own rule. */
.closing-cta .close-quote p { font-size: 20px; line-height: 1.58; font-style: italic;
  color: #fff; max-width: none; margin: 0; }
.close-quote cite { display: block; font-style: normal; font-size: 13px;
  letter-spacing: 0.02em; color: rgba(255,255,255,0.62); margin-top: 16px; }
.close-quote-logo { display: block; margin: 16px auto 0; width: 98px; height: 34px;
  object-fit: contain; opacity: 0.8; }
@media (max-width: 768px) { .closing-cta .close-quote p { font-size: 17px; } }

/* Brief box. Most people reaching the comparison pages arrive cold from a search
   result or an assistant's recommendation, with no idea who we are. This gives
   them the page's answer in a few lines before any argument starts, and it is the
   block an assistant is most likely to lift, which is why it is plain prose rather
   than a row of fragments. */
.brief { background: var(--bg-white); border: 1px solid var(--border-medium);
  border-left: 3px solid var(--brand-primary); border-radius: 10px;
  padding: 26px 30px; max-width: 780px; }
.brief h2 { font-family: var(--sans); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary);
  margin-bottom: 13px; }
.brief p { font-size: 16.5px; line-height: 1.7; color: var(--text-primary);
  margin-bottom: 13px; }
.brief p:last-child { margin-bottom: 0; }
.brief strong { font-weight: 600; }
/* Three registers inside the box, because a brief set as one weight of prose is a
   wall of text and gets skimmed past. The lead carries the definition, the note
   carries the qualifying detail, and the routes are a scannable index rather than
   a sentence listing them. */
.brief-lead { font-size: 18.5px; line-height: 1.58; font-weight: 500;
  color: var(--text-primary); letter-spacing: -0.005em; }
.brief .brief-note { font-size: 15.5px; line-height: 1.65; color: var(--text-secondary); }
.brief-ways { border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light); margin: 20px 0; padding: 17px 0 15px; }
.brief-ways > b { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--brand-ink); display: block; margin-bottom: 13px; }
.brief-ways ul { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 13px 30px; }
.brief-ways li { font-size: 14.5px; line-height: 1.45; }
.brief-ways li a { display: inline-block; font-weight: 600; color: var(--text-primary);
  text-decoration: none; border-bottom: 1px solid var(--border-medium); padding-bottom: 1px;
  transition: border-color 0.15s ease; }
.brief-ways li a:hover { border-color: var(--text-primary); }
.brief-ways li span { display: block; color: var(--text-tertiary); margin-top: 4px; }
@media (max-width: 768px) { .brief-ways ul { grid-template-columns: 1fr; gap: 12px; } }
@media (max-width: 768px) { .brief { padding: 22px 20px; } .brief p { font-size: 15.5px; } }
/* Named .brief rather than .answer: the homepage hero panel already owns
   .answer, and a global rule under that name reached straight into it. */

/* Jump bar: the six capabilities are sections on this page, so the reader needs a map. */
.jumpbar { border-bottom: 1px solid var(--border-light); background: var(--bg-white);
  position: sticky; top: 68px; z-index: 100; }
.jumpbar-inner { display: flex; gap: 4px; overflow-x: auto; padding: 11px 0; scrollbar-width: none; }
.jumpbar-inner::-webkit-scrollbar { display: none; }
.jumpbar a { font-size: 13.5px; font-weight: 500; color: var(--text-secondary); text-decoration: none;
  padding: 6px 13px; border-radius: 99px; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; }
.jumpbar a:hover { background: var(--bg-light); color: var(--text-primary); }

.cap { padding-top: 74px; padding-bottom: 74px; scroll-margin-top: 128px; }
.cap + .cap { border-top: 1px solid var(--border-light); }
.cap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.cap-num { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 14px; }
.cap h2 { font-family: var(--display); font-weight: 600; font-size: 30px; letter-spacing: -0.026em;
  line-height: 1.18; margin-bottom: 14px; }
.cap-decision { font-size: 16.5px; line-height: 1.6; color: var(--text-primary);
  font-weight: 500; margin-bottom: 16px; }
.cap p { font-size: 16px; line-height: 1.72; color: var(--text-secondary); margin-bottom: 14px; }
.cap p:last-child { margin-bottom: 0; }
.cap-list { margin: 0 0 14px; padding: 0; list-style: none; }
.cap-list li { font-size: 16px; line-height: 1.6; color: var(--text-secondary);
  padding-left: 20px; position: relative; margin-bottom: 9px; }
.cap-list li::before { content: ""; position: absolute; left: 3px; top: 10px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--brand-primary); opacity: 0.55; }

/* Rendered example, not a screenshot: nothing here claims a screen that does not exist. */
.cap-demo { background: var(--bg-light); border: 1px solid var(--border-light);
  border-radius: 12px; padding: 22px 24px; }
.cap-demo-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 14px; }
.cap-demo-q { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border-light); }
.cap-demo-a { font-size: 20px; font-weight: 700; letter-spacing: -0.012em; margin-bottom: 8px; }
.cap-demo-b { font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 14px; }
.cap-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cap-chips span { font-family: var(--mono); font-size: 10.5px; color: var(--text-tertiary);
  background: var(--bg-white); border: 1px solid var(--border-light);
  border-radius: 99px; padding: 4px 9px; }
.cap-rows { display: flex; flex-direction: column; gap: 9px; }
.cap-row { display: flex; align-items: center; gap: 11px; background: var(--bg-white);
  border: 1px solid var(--border-light); border-radius: 8px; padding: 11px 13px; }
.cap-row .tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-tertiary); border: 1px solid var(--border-light);
  border-radius: 99px; padding: 3px 8px; flex: none; }
.cap-row b { font-size: 14px; font-weight: 600; flex: 1; }
.cap-row em { font-family: var(--mono); font-size: 10.5px; font-style: normal; color: var(--brand-primary); }

/* .cap-grid is used inside plain .section blocks as well as inside .cap. The h2
   and p rules above are scoped to .cap, so on a page that uses the grid without
   that section class every paragraph rendered with no margin and butted into the
   heading. Same values, keyed to the grid. :not(.pull) keeps the pull-quote's own
   larger type, which a bare .cap-grid p would otherwise outrank. */
/* A .cap-grid holding a single child was still laying out two 1fr tracks, so the
   prose sat in a 512px left column with half the page empty beside it. Two-child
   grids (about, method, pricing) are a deliberate pair and keep the split; a lone
   child spans both tracks and is held to a reading measure instead. */
.cap-grid > *:only-child { grid-column: 1 / -1; max-width: 720px; }

.cap-grid h2 { font-family: var(--display); font-weight: 600; font-size: 30px; letter-spacing: -0.026em;
  letter-spacing: -0.014em; line-height: 1.18; margin-bottom: 14px; }
.cap-grid p:not(.pull) { font-size: 16px; line-height: 1.72; color: var(--text-secondary);
  margin-bottom: 14px; }
.cap-grid p:not(.pull):last-child { margin-bottom: 0; }

@media (max-width: 900px) { .cap-grid { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 768px) {
  .page-hero { padding: 46px 0 40px; }
  .page-hero h1 { font-size: 30px; }
  .page-hero .lede { font-size: 16.5px; }
  .jumpbar { position: static; }
  .cap { padding-top: 48px; padding-bottom: 48px; }
  .cap h2 { font-size: 24px; }
}


/* ---------- Template A extras: engagement steps and comparison ---------- */
.eng { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 8px; }
.eng-step { border-top: 2px solid var(--border-medium); padding-top: 16px; position: relative; }
.eng-step:first-child { border-top-color: var(--brand-primary); }
.eng-when { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--brand-primary); margin-bottom: 9px; }
.eng-step strong { display: block; font-size: 16px; margin-bottom: 6px; }
.eng-step span { display: block; font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); }

.compare-wrap { overflow-x: auto; }
.compare { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 14.5px; }
.compare th, .compare td { text-align: left; padding: 14px 16px; vertical-align: top;
  border-bottom: 1px solid var(--border-light); line-height: 1.55; }
.compare thead th { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-tertiary); border-bottom: 1px solid var(--border-medium); }
.compare thead th:nth-child(2) { color: var(--brand-primary); }
.compare tbody th { font-weight: 600; color: var(--text-primary); width: 21%; }
.compare td { color: var(--text-secondary); }
/* The comparison on /architects only. Cells hold sentences and were wrapping to
   three lines against single-line neighbours, which made the rows read ragged.
   Scoped away from .matrix, whose cells are marks rather than prose. */
.compare:not(.matrix) td { font-size: 13px; line-height: 1.5; }
.compare:not(.matrix) th, .compare:not(.matrix) td { padding: 13px 14px; }
.compare td:first-of-type { color: var(--text-primary); background: var(--bg-light); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }

.owns { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 6px; }
.owns-card { border: 1px solid var(--border-light); border-radius: 12px; padding: 24px 22px;
  background: var(--bg-white); }
.owns-card h3 { font-size: 15px; font-weight: 600; margin-bottom: 13px; }
.owns-card ul { margin: 0; padding: 0; list-style: none; }
/* Sized to hold each entry on one line: a wrapped bullet reads as two items at a
   glance, which is the wrong impression in a list about who owns what. */
/* pretty keeps the last line of a wrapped bullet from being a single orphan word,
   which is what these lists produce at this measure. */
.owns-card li { font-size: 13px; line-height: 1.55; color: var(--text-secondary); text-wrap: pretty;
  padding-left: 17px; position: relative; margin-bottom: 9px; }
.owns-card li:last-child { margin-bottom: 0; }
.owns-card li::before { content: ""; position: absolute; left: 3px; top: 8px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--brand-primary); opacity: 0.55; }

@media (max-width: 900px) { .eng { grid-template-columns: 1fr 1fr; } .owns { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .eng { grid-template-columns: 1fr; } }


/* ---------- /method: the 4x7 spine ---------- */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pillar { border: 1px solid var(--border-light); border-radius: 12px;
  background: var(--bg-white); padding: 24px 22px 22px; display: flex; flex-direction: column; }
.pillar-num { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--brand-primary); margin-bottom: 12px; }
.pillar h3 { font-family: var(--display); font-weight: 600; font-size: 21px; letter-spacing: -0.014em;
  letter-spacing: -0.01em; line-height: 1.2; margin-bottom: 6px;
  /* Three of four titles wrap to two lines; hold the row so the cards align. */
  min-height: 2.4em; }
.pillar-sub { font-size: 12.5px; color: var(--text-tertiary); margin-bottom: 8px; }
.pillar-purpose { font-size: 14.5px; line-height: 1.6; color: var(--text-secondary);
  margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border-light); }
.pillar ol { margin: 0; padding: 0; list-style: none; counter-reset: comp; }
.pillar li { font-size: 13.5px; line-height: 1.5; color: var(--text-secondary);
  padding-left: 22px; position: relative; margin-bottom: 8px; counter-increment: comp; }
.pillar li:last-child { margin-bottom: 0; }
.pillar li::before { content: counter(comp); position: absolute; left: 0; top: 0;
  font-family: var(--mono); font-size: 10px; color: var(--text-tertiary); }
@media (max-width: 1000px) { .pillars { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .pillars { grid-template-columns: 1fr; } }

/* The book */
/* The cover is a square photograph rather than the portrait CSS mock it replaced,
   so the column matches the image instead of cropping it. */
.book { display: grid; grid-template-columns: 320px 1fr; gap: 52px; align-items: center; }
.book-cover { display: block; width: 320px; }
.book-cover img {
  display: block; width: 100%; height: auto; border-radius: 8px;
  box-shadow: 0 14px 40px rgba(23, 21, 15, 0.14);
}
@media (max-width: 860px) { .book { grid-template-columns: 240px 1fr; gap: 36px; } .book-cover { width: 240px; } }
@media (max-width: 720px) { .book { grid-template-columns: 1fr; gap: 28px; } .book-cover { width: 260px; } }

/* Request a copy. Four fields, because the ask is a book rather than a meeting,
   and every extra field on a lead magnet is paid for in completions. */
.bookreq { margin-top: 4px; max-width: 520px; }
.bookreq-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.bookreq input {
  width: 100%; box-sizing: border-box; padding: 11px 14px; font-size: 14.5px;
  font-family: inherit; color: var(--text-primary); background: var(--bg-white);
  border: 1.5px solid var(--border-medium); border-radius: var(--radius-sm);
}
.bookreq input::placeholder { color: var(--text-tertiary); }
.bookreq input:focus { outline: 2px solid var(--brand-tint); outline-offset: 1px; border-color: var(--brand-primary); }
.bookreq-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.bookreq-micro { font-size: 12.5px; line-height: 1.5; color: var(--text-tertiary); margin: 0; flex: 1; min-width: 200px; }
@media (max-width: 520px) { .bookreq-row { grid-template-columns: 1fr; } }


/* ---------- /pricing ---------- */
.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
.tier { border: 1px solid var(--border-light); border-radius: 12px; background: var(--bg-white);
  padding: 26px 22px 24px; display: flex; flex-direction: column; }
.tier--feature { border-color: var(--brand-primary); box-shadow: 0 1px 0 var(--brand-primary); }
.tier-flag { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brand-primary); margin-bottom: 10px; min-height: 12px; }
.tier-name { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; margin-bottom: 12px; }
.tier-price { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
.tier-price span { font-size: 14px; font-weight: 500; color: var(--text-secondary); letter-spacing: 0; }
.tier-basis { font-size: 12.5px; color: var(--text-tertiary); margin-top: 6px; min-height: 32px; }
.tier-for { font-size: 13.5px; line-height: 1.55; color: var(--text-secondary);
  padding: 16px 0; margin: 14px 0 0; border-top: 1px solid var(--border-light); }
.tier ul { margin: 0 0 20px; padding: 0; list-style: none; flex: 1; }
/* Entitlements sit at the same size as the basis line under the price and are
   separated from it by colour rather than by scale: the basis is context and
   stays grey, the entitlements are the substance and take full ink. Four columns
   of 14px wrapped to five and six lines and made the cards look padded. */
.tier li { font-size: 12.5px; line-height: 1.5; color: var(--text-primary);
  padding-left: 18px; position: relative; margin-bottom: 9px; }
.tier li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--brand-primary); opacity: 0.5; }
.tier .btn-primary, .tier .btn-ghost { width: 100%; text-align: center; box-sizing: border-box; }

.everyplan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.everyplan-item strong { display: block; font-size: 15.5px; margin-bottom: 6px; }
.everyplan-item span { display: block; font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); }

.faq-list { max-width: 760px; }
.faq-item { border-top: 1px solid var(--border-light); padding: 22px 0; }
.faq-item:last-child { border-bottom: 1px solid var(--border-light); }
.faq-item h3 { font-size: 16.5px; font-weight: 600; margin-bottom: 8px; }
.faq-item p { font-size: 15.5px; line-height: 1.7; color: var(--text-secondary); }
.faq-item p + p { margin-top: 14px; }

@media (max-width: 1040px) { .tiers { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .everyplan { grid-template-columns: 1fr; gap: 18px; } }
@media (max-width: 560px) { .tiers { grid-template-columns: 1fr; } }


/* ---------- /security ---------- */
.ctrlgroup { padding-top: 46px; }
.ctrlgroup + .ctrlgroup { border-top: 1px solid var(--border-light); }
.ctrlgroup-grid { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: start; }
.ctrlgroup h2 { font-family: var(--display); font-weight: 600; font-size: 25px; letter-spacing: -0.020em;
  letter-spacing: -0.012em; line-height: 1.2; }
.ctrl-list { margin: 0; padding: 0; list-style: none; }
.ctrl-list li { font-size: 16px; line-height: 1.7; color: var(--text-secondary);
  padding: 0 0 16px 26px; position: relative; margin-bottom: 16px;
  border-bottom: 1px solid var(--border-light); }
.ctrl-list li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.ctrl-list li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 7px; height: 7px;
  border-radius: 2px; background: var(--brand-primary); opacity: 0.6; }

.rungs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rung { border: 1px solid var(--border-light); border-radius: 10px; background: var(--bg-white);
  padding: 22px 22px 20px; }
.rung-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--brand-primary); margin-bottom: 10px; }
.rung p { font-size: 15px; line-height: 1.62; color: var(--text-secondary); }
.honesty { font-size: 14px; line-height: 1.65; color: var(--text-tertiary); margin-top: 18px;
  max-width: 720px; }

.certs { max-width: 780px; }
.certs p { font-size: 16px; line-height: 1.72; color: var(--text-secondary); margin-bottom: 16px; }
.certs p:last-child { margin-bottom: 0; }
.compliance { font-size: 14.5px; line-height: 1.7; color: var(--text-tertiary); max-width: 780px; }

@media (max-width: 900px) {
  .ctrlgroup-grid { grid-template-columns: 1fr; gap: 20px; }
  .rungs { grid-template-columns: 1fr; }
}


/* ---------- /diagnostic ---------- */
.diag { max-width: 780px; }
/* Sits in the flow, not stuck to the viewport. One question at a time fits on a
   screen, so a bar that follows the scroll has nothing to follow and only ends up
   floating across the question it is meant to be measuring. */
.diag-progress { background: var(--bg-white); border-bottom: 1px solid var(--border-light);
  padding: 0; }
.diag-progress[hidden] { display: none; }
.diag-bar { height: 3px; background: var(--border-light); overflow: hidden; }
.diag-bar i { display: block; height: 100%; width: 0; background: var(--brand-primary);
  transition: width 0.32s ease; }

/* One question at a time. All twelve stay in the DOM and are stacked in the same
   place, so the swap is a cross-fade rather than a layout jump. */
.q-stage { position: relative; min-height: 210px; }
.q { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(10px);
  pointer-events: none; transition: opacity 0.28s ease, transform 0.28s ease; }
.q.is-current { position: relative; opacity: 1; transform: none; pointer-events: auto; }
.q-text { font-size: 21px; line-height: 1.45; color: var(--text-primary); margin-bottom: 22px;
  max-width: 640px; }
.q-num { font-family: var(--mono); font-size: 12px; color: var(--text-tertiary);
  display: block; margin-bottom: 12px; letter-spacing: 0.08em; }
.scale { display: flex; gap: 8px; max-width: 460px; }
.scale button { flex: 1; appearance: none; background: var(--bg-white); cursor: pointer;
  border: 1px solid var(--border-medium); border-radius: 8px; padding: 15px 0;
  font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--text-tertiary);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease; }
.scale button:hover { border-color: var(--text-primary); color: var(--text-primary); }
.scale button:active { transform: translateY(1px); }
.scale button[aria-checked="true"] { background: var(--brand-primary);
  border-color: var(--brand-primary); color: #fff; }
.scale-legend { display: flex; justify-content: space-between; max-width: 460px;
  margin-top: 10px; font-size: 12.5px; color: var(--text-tertiary); }
.scale-legend span:last-child { text-align: right; max-width: 62%; line-height: 1.35; }
.q-back { margin-top: 30px; min-height: 20px; }
.q-back button { appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--text-tertiary); text-decoration: underline;
  text-underline-offset: 3px; }
.q-back button:hover { color: var(--text-primary); }
.q-back button[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .q { transition: none; transform: none; }
  .q.is-current { transform: none; }
}

/* Result */
.result { display: none; }
.result.on { display: block; }
.result-head { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--brand-primary); margin-bottom: 14px; }
.result h2 { font-family: var(--display); font-weight: 600; font-size: 34px; letter-spacing: -0.026em;
  line-height: 1.15; margin-bottom: 14px; }
.result-lede { font-size: 17px; line-height: 1.65; color: var(--text-secondary); margin-bottom: 30px; }
.result-bars { margin-bottom: 32px; }
.rb { display: grid; grid-template-columns: 190px 1fr 62px; gap: 14px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--border-light); }
.rb-name { font-size: 15px; font-weight: 500; }
.rb-track { height: 8px; background: var(--border-light); border-radius: 99px; overflow: hidden; }
.rb-track i { display: block; height: 100%; background: var(--text-tertiary); border-radius: 99px; }
.rb.weak .rb-name { font-weight: 700; }
/* Orange means "act here" everywhere else on the site, so it marks the action
   rather than the bar. The bar stays neutral; length already carries the score. */
.rb-flag { display: inline-block; margin-left: 9px; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-primary);
  border: 1px solid var(--brand-primary); border-radius: 99px; padding: 2px 7px;
  vertical-align: 1px; }
.rb-score { font-family: var(--mono); font-size: 12.5px; color: var(--text-tertiary);
  text-align: right; white-space: nowrap; }
.gate { border-top: 1px solid var(--border-medium); padding-top: 28px; }
.gate form { display: flex; gap: 10px; flex-wrap: wrap; max-width: 520px; margin-top: 16px; }
.gate input { flex: 1; min-width: 240px; padding: 12px 14px; font-size: 15px; font-family: inherit;
  border: 1px solid var(--border-medium); border-radius: 8px; background: var(--bg-white); }
.gate input:focus { outline: 2px solid var(--brand-primary); outline-offset: 1px; }

@media (max-width: 700px) {
  .diag-progress { position: static; }
  .q-text { font-size: 18px; }
  .q-stage { min-height: 250px; }
  .rb { grid-template-columns: 1fr 62px; }
  .rb-track { grid-column: 1 / -1; order: 3; }
}


/* ---------- /diagnostic: page rhythm ---------- */
/* The hero, the progress bar and the first pillar each carried their own generous
   padding, which stacked into a dead band before the first question. */
.diag-page .page-hero { padding-bottom: 38px; }
.diag-page .page-hero .lede { margin-bottom: 14px; }
.diag-page .page-hero .lede:last-of-type { margin-bottom: 0; }
.diag-page #questions { padding-top: 46px; }
/* Clears the sticky nav, plus the progress bar while it is still on screen. */
.diag-page #result { scroll-margin-top: 84px; }

.gate-status { font-size: 14.5px; line-height: 1.6; margin-top: 14px; min-height: 20px; }
.gate-status.is-sent { color: var(--text-primary); font-weight: 500; }
.gate-status.is-error { color: var(--brand-primary); }


/* ---------- Template E: insights index and articles ---------- */
.ix { max-width: 860px; }
.ix-item { display: block; text-decoration: none; color: inherit;
  padding: 30px 0; border-bottom: 1px solid var(--border-light); }
.ix-item:first-child { border-top: 1px solid var(--border-medium); }
.ix-meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 10px; }
.ix-item h2 { font-family: var(--display); font-weight: 600; font-size: 27px; letter-spacing: -0.020em;
  letter-spacing: -0.014em; line-height: 1.22; margin-bottom: 10px;
  transition: color 0.15s ease; }
.ix-item:hover h2 { color: var(--brand-primary); }
.ix-stance { font-size: 16px; line-height: 1.65; color: var(--text-secondary); max-width: 660px; }

.article { max-width: 720px; margin: 0 auto; padding: 66px 24px 90px; }
.article-head { margin-bottom: 40px; }
.article-meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 18px; }
.article h1 { font-family: var(--display); font-weight: 600; font-size: 42px; letter-spacing: -0.032em;
  letter-spacing: -0.02em; line-height: 1.12; margin-bottom: 18px; }
.article-standfirst { font-size: 19px; line-height: 1.62; color: var(--text-secondary); }
.article-byline { display: flex; align-items: center; gap: 12px; margin-top: 28px;
  padding-top: 24px; border-top: 1px solid var(--border-light); }
.article-byline img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.article-byline b { display: block; font-size: 14.5px; font-weight: 600; }
.article-byline span { display: block; font-size: 13px; color: var(--text-tertiary); }

.article-body p { font-size: 17.5px; line-height: 1.72; color: var(--text-primary); margin-bottom: 22px; }
.article-body h2 { font-family: var(--display); font-weight: 600; font-size: 27px; letter-spacing: -0.020em;
  letter-spacing: -0.014em; line-height: 1.25; margin: 46px 0 16px; }
.article-body h3 { font-size: 17px; font-weight: 600; margin: 30px 0 8px; }
.article-body h3 + p { margin-bottom: 18px; }
.article-body ul { margin: 0 0 24px; padding: 0; list-style: none; }
.article-body li { font-size: 17px; line-height: 1.62; color: var(--text-primary);
  padding-left: 22px; position: relative; margin-bottom: 11px; }
.article-body li::before { content: ""; position: absolute; left: 3px; top: 11px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand-primary); opacity: 0.5; }
.article-body strong { font-weight: 600; }
.article-body a { color: var(--text-primary); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px; }
.article-body a:hover { color: var(--brand-primary); }
.article-body p.pull, .pull { font-family: var(--sans); font-size: 23px; font-weight: 600;
  line-height: 1.38; letter-spacing: -0.018em;
  color: var(--text-primary); margin: 36px 0; padding-left: 24px;
  border-left: 2px solid var(--brand-primary); }
.stat { background: var(--bg-light); border: 1px solid var(--border-light); border-radius: 12px;
  padding: 26px 28px; margin: 32px 0; }
.stat b { display: block; font-size: 34px; font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.05; margin-bottom: 8px; }
.stat span { font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.stat cite { display: block; font-family: var(--mono); font-size: 11px; font-style: normal;
  letter-spacing: 0.06em; color: var(--text-tertiary); margin-top: 12px; }

.article-cta { border-top: 1px solid var(--border-medium); margin-top: 46px; padding-top: 34px; }
.article-cta h2 { font-family: var(--display); font-weight: 600; font-size: 25px; letter-spacing: -0.020em;
  letter-spacing: -0.012em; margin-bottom: 10px; }
.article-cta p { font-size: 16px; line-height: 1.65; color: var(--text-secondary); margin-bottom: 20px; }

@media (max-width: 768px) {
  .article { padding: 44px 20px 64px; }
  .article h1 { font-size: 29px; }
  .article-standfirst { font-size: 17px; }
  .article-body p, .article-body li { font-size: 16.5px; }
  .ix-item h2 { font-size: 22px; }
  .article-body p.pull, .pull { font-size: 20px; }
  .stat b { font-size: 28px; }
}


/* ---------- Product screenshots, and their placeholders ---------- */
.shot { margin: 0; }
.shot-frame { position: relative; border: 1px solid var(--border-medium); border-radius: 12px;
  background: var(--bg-light); overflow: hidden; }
.shot-frame img { display: block; width: 100%; height: auto; }
/* Placeholder state: deliberate, labelled, and impossible to mistake for a screenshot.
   check-terms.sh lists every one of these so none can reach launch unnoticed. */
.shot-frame.is-pending { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; aspect-ratio: 16 / 10; text-align: center; padding: 24px;
  background-image: repeating-linear-gradient(135deg, transparent 0 9px, rgba(23,21,15,0.035) 9px 18px);
  border-style: dashed; }
.shot-frame.is-pending .shot-id { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--brand-primary); }
.shot-frame.is-pending .shot-want { font-size: 15.5px; font-weight: 600; color: var(--text-primary);
  max-width: 380px; line-height: 1.4; }
.shot-frame.is-pending .shot-note { font-size: 13px; color: var(--text-tertiary); max-width: 400px;
  line-height: 1.5; }
.shot figcaption { font-size: 13px; line-height: 1.55; color: var(--text-tertiary); margin-top: 10px; }

/* Fact lists: mechanism, stated flat. */
.facts { margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--border-light); }
.facts li { font-size: 15px; line-height: 1.6; color: var(--text-secondary);
  padding: 12px 0 12px 0; border-bottom: 1px solid var(--border-light); }
.facts li b { color: var(--text-primary); font-weight: 600; }


/* ---------- /platform, reset: artefact-led modules ---------- */

/* One view of the whole system, so the capabilities below have somewhere to hang. */
.sysmap { border: 1px solid var(--border-light); border-radius: 14px; background: var(--bg-white);
  padding: 34px 32px; }
.sysmap svg { display: block; width: 100%; height: auto; }

/* Hero capability: the artefact leads, the copy annotates it. */
.mod { padding: 84px 0; }
.mod + .mod { border-top: 1px solid var(--border-light); }
/* Tops aligned, not bottoms: the kicker and the first line of the annotation
   should start on the same line. */
.mod-head { display: grid; grid-template-columns: 1fr 400px; gap: 56px; align-items: start;
  margin-bottom: 34px; }
.mod-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--brand-primary); margin-bottom: 14px; }
.mod h2 { font-family: var(--display); font-weight: 600; font-size: 34px; letter-spacing: -0.026em;
  line-height: 1.14; max-width: 620px; }
.mod-annot { font-size: 15.5px; line-height: 1.7; color: var(--text-secondary); }
.mod-annot p + p { margin-top: 12px; }
.mod-stage { border: 1px solid var(--border-medium); border-radius: 14px; overflow: hidden;
  background: var(--bg-light); }
.mod-stage.is-plain { border: 0; border-radius: 0; background: none; }
.mod-stage img { display: block; width: 100%; height: auto; border-radius: 12px; }

/* Capability modules whose payload is substance rather than a screenshot.
   Same .mod head, different body, so the page keeps one rhythm. */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 44px; }
.facts--4 { grid-template-columns: repeat(4, 1fr); gap: 0 34px; }
.mod-stage + .facts { margin-top: 36px; }
.fact { padding: 18px 0 16px; border-top: 1px solid var(--border-light); }
.fact b { display: block; font-size: 14.5px; font-weight: 600; color: var(--text-primary);
  margin-bottom: 5px; }
.fact span { display: block; font-size: 14px; line-height: 1.6; color: var(--text-secondary); }

/* The connector wall. Every mark corresponds to a real entry in the product's
   connector registry (see assets/logos/README.md). Never carries a count. */
.connwall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 26px 16px;
  margin-bottom: 30px; }
.connwall figure { margin: 0; display: flex; flex-direction: column; align-items: center;
  gap: 10px; text-align: center; }
.connwall .m { height: 28px; display: flex; align-items: center; justify-content: center; }
.connwall .m svg, .connwall .m img { height: 26px; width: auto; max-width: 64px; display: block; }
/* Zoho and Otter are wordmarks, not icons: size them by width or they smear.
   Zoho's viewBox is already cropped to its glyph strip (assets/logos/README.md). */
.connwall .m svg.wm { height: auto; width: 46px; }
.connwall .m img.wm { height: auto; width: 38px; }
.connwall figcaption { font-size: 12.5px; line-height: 1.35; color: var(--text-tertiary); }
.connmore { font-size: 14.5px; line-height: 1.7; color: var(--text-secondary); max-width: 820px;
  padding-top: 26px; border-top: 1px solid var(--border-light); }
.connmore b { font-weight: 600; color: var(--text-primary); }

/* Sub-head above a fact grid, where one module carries more than one group. */
.facts-head { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--text-tertiary); margin: 46px 0 16px; }

/* The assistant marks, restated where the claim is actually made. */
.aistrip { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; margin-bottom: 30px;
  padding-bottom: 26px; border-bottom: 1px solid var(--border-light); }
.aistrip figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.aistrip img, .aistrip svg { width: 26px; height: 26px; object-fit: contain; }
.aistrip figcaption { font-size: 12.5px; color: var(--text-tertiary); }

/* The tail: compact, three across, no prose. */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* Line-mark illustrations. These lived in index.html's page style block until
   the compare pages reused them, at which point the marks rendered as solid
   black fills on every page but the homepage. Shared marks belong in the shared
   stylesheet. */
.ill { display: block; width: 100%; max-width: 128px; height: auto; margin-bottom: 18px; }
.ill .s { fill: none; stroke: var(--text-primary); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ill .dim { opacity: 0.32; }
.ill .accent { fill: var(--brand-primary); }
.ill .check { fill: none; stroke: var(--bg-white); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ill-trust { max-width: 132px; margin: 0 0 30px; }

/* Diagnostic hero. The copy holds the left, the drawing sits on the right and is
   the only thing on that page carrying the brand colour in line form, so the
   stroke is overridden here rather than in .ill, which is near-black everywhere
   else on the site. */
/* Primary call to action. The arrow nudges on hover so the button reads as a step
   forward, and the note under it sets the expectation before the click. On a dark
   closing panel the note takes the lighter grey, since the page grey disappears. */
.btn-primary .cta-arrow { display: inline-block; margin-left: 9px; transition: transform 0.16s ease; }
.btn-primary:hover .cta-arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .btn-primary .cta-arrow { transition: none; } }
.cta-note { margin-top: 13px; font-size: 13.5px; line-height: 1.5; color: var(--text-tertiary); }
.cta-note--centre { text-align: center; margin-top: 0; margin-bottom: 16px; }
.closing-cta .cta-note, .section-dark .cta-note { color: rgba(255,255,255,0.62); }

.ill-leak { max-width: 100%; width: 260px; margin: 0; }
/* Heavier than the 1.6 used on the small marks: this renders at twice their
   size, where 1.6 goes wiry. */
.ill-leak .s { stroke: var(--brand-primary); stroke-width: 2.2; }
.ill-leak .dim { opacity: 0.34; }
.ill-leak .accent { fill: var(--brand-primary); }
.ill-leak .accent-fill { fill: var(--brand-primary); opacity: 0.9; }
/* The crack follows the wall it splits. Drawn across it, a zigzag reads as a
   lightning bolt laid over the bucket rather than a break in the metal. Thinner
   than the wall stroke, with mitred joins so the turns stay sharp. */
.ill-leak .crack { fill: none; stroke: var(--brand-primary); stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: miter; }
.dhero { display: grid; grid-template-columns: 1fr auto; gap: 64px; align-items: center; }
.dhero-copy { min-width: 0; }
.dhero-art { display: flex; justify-content: flex-end; }
@media (max-width: 900px) {
  /* Stacked, smaller and centred. The drawing earns its place on a phone too,
     and at this size it costs little of the scroll before the first question. */
  .dhero { grid-template-columns: 1fr; gap: 28px; }
  .dhero-art { justify-content: center; }
  .ill-leak { width: 170px; }
}

/* A pasteable example. Monospace because it is something the reader copies out
   rather than reads as prose. */
.snippet { background: var(--bg-white); border: 1px solid var(--border-medium);
  border-radius: 8px; padding: 18px 20px; margin: 16px 0 0; max-width: 720px; }
.snippet b { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 11px; }
.snippet p { font-family: var(--mono); font-size: 13px; line-height: 1.75;
  color: var(--text-primary); margin: 0 0 9px; }
.snippet p:last-child { margin-bottom: 0; }
@media (max-width: 768px) { .snippet p { font-size: 12px; } }

/* Vendor mark at the head of a card, for the assistant comparison. */
.card-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.card-logo img { width: 22px; height: 22px; object-fit: contain; }
.card-logo b { font-size: 17px; font-weight: 600; color: var(--text-primary); }

/* The homepage triad marks, reused at tile scale. .ill carries the stroke and
   accent rules; this only changes the size and the space beneath. */
.tile-ill { max-width: 64px; margin-bottom: 16px; }

.tile { border: 1px solid var(--border-light); border-radius: 12px; background: var(--bg-white);
  padding: 24px 24px 22px; display: flex; flex-direction: column; }
.tile h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.tile p { font-size: 15px; line-height: 1.62; color: var(--text-secondary); margin-bottom: 14px; }
.tile-list { margin: auto 0 0; padding: 0; list-style: none; border-top: 1px solid var(--border-light); }
.tile-list li { font-size: 13.5px; line-height: 1.5; color: var(--text-tertiary);
  padding: 9px 0; border-bottom: 1px solid var(--border-light); }
.tile-list li:last-child { border-bottom: 0; }

/* The information flow: one document, arrival to retrieval to expiry. */
.flow { max-width: 940px; }
.flowstep { display: grid; grid-template-columns: 52px 1fr; gap: 0 24px; padding: 24px 0;
  border-top: 1px solid var(--border-light); }
.flowstep:last-child { border-bottom: 1px solid var(--border-light); }
.flowstep .n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--brand-primary); padding-top: 3px; }
.flowstep h3 { font-size: 16.5px; font-weight: 600; margin-bottom: 7px; }
.flowstep p { font-size: 14.5px; line-height: 1.68; color: var(--text-secondary); }
@media (max-width: 768px) {
  .flowstep { grid-template-columns: 1fr; gap: 6px; }
  .flowstep .n { padding-top: 0; }
}

/* The specification: density is the point. This is where completeness lives. */
.spec { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 56px; }
.spec-group { padding: 22px 0 4px; border-top: 1px solid var(--border-medium); }
.spec-group h3 { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 14px; }
.spec-row { display: grid; grid-template-columns: 168px 1fr; gap: 18px; padding: 9px 0;
  border-bottom: 1px solid var(--border-light); }
.spec-row:last-child { border-bottom: 0; }
.spec-row dt { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.spec-row dd { font-size: 14px; line-height: 1.55; color: var(--text-secondary); margin: 0; }

/* The boundary. Stating the edge is more persuasive than another feature. */
.bounds { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 900px; }
.bound { border-left: 2px solid var(--border-medium); padding: 2px 0 2px 18px; }
.bound b { display: block; font-size: 15.5px; margin-bottom: 5px; }
.bound span { font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); }

@media (max-width: 1000px) {
  .mod-head { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .facts, .facts--4 { grid-template-columns: repeat(2, 1fr); gap: 0 32px; }
  .connwall { grid-template-columns: repeat(4, 1fr); }
  .tiles { grid-template-columns: 1fr; }
  .spec { grid-template-columns: 1fr; gap: 0; }
  .bounds { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .mod { padding: 52px 0; }
  .mod h2 { font-size: 26px; }
  .facts, .facts--4 { grid-template-columns: 1fr; }
  .connwall { grid-template-columns: repeat(3, 1fr); gap: 22px 12px; }
  .sysmap { padding: 20px 16px; }
  .spec-row { grid-template-columns: 1fr; gap: 3px; }
}


/* ================= PLATFORM HERO: the dashboard, with pops =====================
   Illustrative figures only, and they reconcile against storyline-reset-spec.md.
   Never a real client's data (hero-spec.md rule, applies to every panel we draw). */
.phero { padding-bottom: 56px; }
.phero-grid { display: grid; grid-template-columns: 1fr 1.12fr; gap: 56px; align-items: center; }
.phero h1 { font-size: 40px; max-width: none; }
.phero .lede { font-size: 17.5px; }
.phero-art { position: relative; }
/* The pops anchor to the panel, not to the column: the caption below must not
   drag them down as it changes the wrapper height. */
.dash-wrap { position: relative; }

.dash { border: 1px solid var(--border-screen); border-radius: 12px; background: var(--bg-screen);
  box-shadow: 0 18px 46px rgba(23, 21, 15, 0.09); overflow: hidden; }
.dash-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px;
  border-bottom: 1px solid var(--border-screen); background: #fafaf9; }
.dash-bar i { width: 8px; height: 8px; border-radius: 50%; background: #d8d2c4; }
.dash-bar span { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-tertiary); margin-left: 8px; }
/* Deep bottom padding is deliberate: it is the empty ground the lower pop
   rests on, so the pop never lands on a line of text. */
.dash-body { padding: 14px 18px 48px; }

/* The four pillars, so the panel reads as the whole commercial team rather than
   a sales view. storyline-reset-spec.md: gap questions, never state questions. */
.dpills { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 13px; }
.dpills span { font-size: 9.5px; padding: 3px 8px; border-radius: 99px;
  border: 1px solid var(--border-screen); color: var(--text-tertiary); white-space: nowrap; }
.dpills span.on { border-color: var(--brand-tint); background: var(--brand-tint);
  color: var(--brand-ink); font-weight: 600; }

.dask { font-size: 13px; color: var(--text-secondary); padding: 8px 11px; border-radius: 7px;
  background: #f6f5f3; margin-bottom: 12px; }
.dask:before { content: "\203A"; color: var(--brand-ink); margin-right: 7px; font-weight: 700; }

/* The three beats: the prize, the gap with its anchor, then the route. */
.dans b { display: block; font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: -0.020em;
  line-height: 1.1; color: var(--text-primary); margin-bottom: 7px; }
.dans p { font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); margin-bottom: 5px; }
.dans p.route { color: var(--text-primary); font-weight: 600; }
.dprov { font-family: var(--mono); font-size: 9px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-tertiary); margin-top: 9px; padding-top: 9px;
  border-top: 1px solid var(--border-screen); }

.dash-list { display: grid; gap: 9px; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--border-screen); }
.drow em { display: block; font-style: normal; font-family: var(--mono); font-size: 8.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 2px; }
.drow b { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.drow span { display: block; font-size: 11.5px; line-height: 1.45; color: var(--text-tertiary); }

/* The pops: they overlap the panel edge, which is what makes it read as a product. */
.pop { position: absolute; background: var(--bg-screen); border: 1px solid var(--border-screen);
  border-radius: 10px; padding: 12px 14px; box-shadow: 0 12px 30px rgba(23, 21, 15, 0.13);
  max-width: 232px; }
.pop-a { top: -62px; right: -34px; max-width: 218px; }
.pop-b { bottom: -42px; left: -44px; max-width: 218px; }
.pop .pop-k { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--brand-ink); margin-bottom: 6px; }
.pop b { display: block; font-size: 13.5px; line-height: 1.35; color: var(--text-primary);
  margin-bottom: 5px; }
.pop span { display: block; font-size: 11.5px; line-height: 1.45; color: var(--text-tertiary); }

@media (max-width: 1000px) {
  .phero-grid { grid-template-columns: 1fr; gap: 54px; }
  .phero h1 { font-size: 34px; }
  .pop-a { top: -48px; right: -8px; }
  .pop-b { bottom: -34px; left: -8px; }
  }
@media (max-width: 620px) {
  .pop { position: static; max-width: none; margin-top: 12px; box-shadow: none; }
}

/* ================= CADENCE: a week, shaped like a week ========================= */
.rhythm { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative;
  margin-top: 44px; }
.rhythm::before { content: ""; position: absolute; left: 0; right: 0; top: 25px; height: 1px;
  background: var(--border-medium); }
.beat { position: relative; padding: 0 20px 0 0; }
.beat .when { font-family: var(--mono); font-size: 10px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--brand-ink); margin-bottom: 12px; }
.beat .node { width: 9px; height: 9px; border-radius: 50%; background: var(--brand-primary);
  position: relative; z-index: 2; margin-bottom: 22px; box-shadow: 0 0 0 5px var(--bg-light); }
.beat h3 { font-size: 15px; font-weight: 600; margin-bottom: 7px; }
.beat p { font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }
@media (max-width: 900px) {
  .rhythm { grid-template-columns: 1fr; gap: 0; margin-top: 34px; }
  .rhythm::before { top: 0; bottom: 0; left: 4px; right: auto; width: 1px; height: auto; }
  .beat { padding: 0 0 26px 30px; }
  .beat .node { position: absolute; left: 0; top: 4px; margin: 0; }
  .beat .when { margin-bottom: 6px; }
}

/* ================= DECISION TOOLS: the artefacts, named ======================== */
.arts { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 40px; }
.art { border: 1px solid var(--border-medium); border-radius: 99px; padding: 8px 16px;
  font-size: 13.5px; color: var(--text-primary); background: var(--bg-white); }

/* ================= BOOK A CALL ================================================
   Template B: short, decision-shaped, one action per screen. */
.call-grid { display: grid; grid-template-columns: 1fr 420px; gap: 56px; align-items: start; }
.call-marks { list-style: none; margin: 26px 0 0; padding: 0; }
.call-marks li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.6;
  color: var(--text-secondary); margin-bottom: 8px; }
.call-marks li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 7px;
  height: 7px; border-radius: 50%; background: var(--brand-primary); }

.booker { border: 1px solid var(--border-screen); border-radius: 12px; background: var(--bg-screen);
  box-shadow: 0 18px 46px rgba(23, 21, 15, 0.09); overflow: hidden; }
.booker-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px;
  border-bottom: 1px solid var(--border-screen); background: #fafaf9; }
.booker-bar i { width: 8px; height: 8px; border-radius: 50%; background: #d8d2c4; }
.booker-bar span { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-tertiary); margin-left: 8px; }
.booker-slot { display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 44px 26px 38px; color: var(--brand-primary); }
.booker-note { font-size: 16px; font-weight: 600; color: var(--text-primary); margin: 14px 0 20px; }
.booker-micro { font-size: 12.5px; line-height: 1.55; color: var(--text-tertiary); margin-top: 14px; }
.booker-micro a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.booker-micro a:hover { color: var(--text-primary); }

.who { display: grid; grid-template-columns: 132px 1fr; gap: 32px; align-items: start;
  max-width: 860px; }
.who img { border-radius: 10px; object-fit: cover; }
.who p { font-size: 15.5px; line-height: 1.7; color: var(--text-secondary); }
.who p + p { margin-top: 12px; }

.call-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 56px; max-width: 940px; }
.call-h { font-size: 18px; font-weight: 600; margin-bottom: 16px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border-medium); }
.call-list { list-style: none; margin: 0; padding: 0; }
.call-list li { font-size: 14.5px; line-height: 1.6; color: var(--text-secondary);
  padding: 10px 0 10px 20px; position: relative; border-bottom: 1px solid var(--border-light); }
.call-list li::before { content: ""; position: absolute; left: 2px; top: 18px; width: 6px;
  height: 1.5px; background: var(--brand-primary); }
.call-list li:last-child { border-bottom: 0; }
.call-note { font-size: 13px; color: var(--text-tertiary); margin-top: 14px; }

@media (max-width: 1000px) {
  .call-grid { grid-template-columns: 1fr; gap: 40px; }
  .call-cols { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 768px) {
  .who { grid-template-columns: 1fr; gap: 20px; }
}

/* ================= CONTACT FORM ===============================================
   The site's conversion event. No email address is published anywhere public,
   so this is the written route in. */
.cform { max-width: 720px; }
.cform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
/* Availability slider. One gesture on a phone, and the value is always visible,
   which a bare range input never is. */
.cslider { display: flex; align-items: center; gap: 18px; margin-top: 4px; }
/* .cfield input sets a border, padding and radius for text fields, and a range
   input inherits all three, which rendered the track as a chunky filled bar.
   Reset them here rather than narrowing the field rule. */
.cslider input[type="range"] { flex: 1; -webkit-appearance: none; appearance: none;
  height: 4px; padding: 0; border: 0; border-radius: 2px;
  background: var(--border-medium); outline: none; box-shadow: none; }
.cslider input[type="range"]:focus { box-shadow: none; }
.cslider input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: transparent; }
.cslider input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: transparent; }
.cslider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%; background: var(--brand-primary);
  border: 3px solid var(--bg-white); box-shadow: 0 1px 4px rgba(23,21,15,.25); cursor: pointer; }
.cslider input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%;
  background: var(--brand-primary); border: 3px solid var(--bg-white); cursor: pointer; }
.cslider input[type="range"]:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 4px; }
.cslider output { font-family: var(--mono); font-size: 13px; color: var(--text-primary);
  white-space: nowrap; min-width: 108px; text-align: right; }
.cslider-scale { display: flex; justify-content: space-between; font-family: var(--mono);
  font-size: 10.5px; color: var(--text-tertiary); margin-top: 8px; }
@media (max-width: 768px) { .cslider output { min-width: 92px; font-size: 12px; } }

.cfield { margin-bottom: 18px; }
.cfield label { display: block; font-size: 13.5px; font-weight: 600; color: var(--text-primary);
  margin-bottom: 7px; }
.cfield .opt { font-weight: 400; color: var(--text-tertiary); }
.cfield input, .cfield textarea {
  width: 100%; font-family: inherit; font-size: 15px; color: var(--text-primary);
  background: var(--bg-white); border: 1px solid var(--border-medium); border-radius: 8px;
  padding: 11px 13px; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cfield textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.cfield input:focus, .cfield textarea:focus {
  outline: none; border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-tint);
}
.cfield input::placeholder, .cfield textarea::placeholder { color: var(--text-tertiary); }

/* Off-screen rather than display:none, which some bots skip. */
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* margin-top was 6px, which sat the send button hard against the last field.
   The bottom margin gives whatever follows the form room to breathe. */
.cform-foot { display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  margin-top: 26px; margin-bottom: 8px; }
.cform-micro { font-size: 12.5px; line-height: 1.55; color: var(--text-tertiary); max-width: 340px; }
.cform-micro a { color: var(--text-secondary); }
.cform-status { font-size: 13.5px; margin-top: 14px; }
.cform-status.is-bad { color: var(--brand-ink); font-weight: 600; }
.cform button[disabled] { opacity: 0.55; cursor: default; }

.cform-done { border: 1px solid var(--border-medium); border-radius: 12px; padding: 30px 28px;
  background: var(--bg-light); }
.cform-done h3 { font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: -0.020em; margin-bottom: 10px; }
.cform-done p { font-size: 15.5px; line-height: 1.65; color: var(--text-secondary);
  margin-bottom: 20px; }

@media (max-width: 620px) {
  .cform-row { grid-template-columns: 1fr; gap: 0; }
}

/* ================= RELEASE LOG ================================================
   A dated spine, newest first. The date is what a reader navigates by, so it
   holds its own column and the rule runs through it. */
.rel { max-width: 900px; }
.rel-entry { display: grid; grid-template-columns: 132px 1fr; gap: 0 34px; padding-bottom: 40px; }
.rel-rail { position: relative; }
.rel-rail::before { content: ""; position: absolute; left: -21px; top: 9px; bottom: -40px;
  width: 1px; background: var(--border-light); }
.rel-entry:last-child .rel-rail::before { bottom: auto; height: 22px; }
.rel-rail::after { content: ""; position: absolute; left: -24px; top: 7px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--border-medium); box-shadow: 0 0 0 4px var(--bg-white); }
.rel-entry--latest .rel-rail::after { background: var(--brand-primary); width: 9px; height: 9px;
  left: -25px; top: 6px; }
.rel-date { font-family: var(--mono); font-size: 12px; color: var(--text-tertiary);
  display: block; padding-top: 1px; white-space: nowrap; }
.rel-latest { display: inline-block; margin-top: 9px; padding: 3px 8px; border-radius: 3px;
  background: var(--brand-tint); color: var(--brand-ink); font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.rel-body { min-width: 0; }
.rel-body h2 { font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: -0.020em; line-height: 1.2;
  letter-spacing: -0.012em; }
.rel-lede { font-size: 15px; line-height: 1.65; color: var(--text-secondary); margin-top: 10px; }
.rel-items { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 11px; }
.rel-items li { position: relative; padding-left: 17px; font-size: 14.5px; line-height: 1.6;
  color: var(--text-secondary); }
.rel-items li::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px;
  height: 1px; background: var(--brand-primary); }
.rel-items strong { color: var(--text-primary); font-weight: 600; }
@media (max-width: 768px) {
  .rel-entry { grid-template-columns: 1fr; gap: 8px; padding-top: 24px; padding-bottom: 30px;
    border-top: 1px solid var(--border-light); }
  .rel-rail::before, .rel-rail::after { display: none; }
  .rel-latest { margin-top: 0; margin-left: 10px; }
  .rel-date { display: inline-block; }
  .rel-body h2 { font-size: 21px; }
}


/* ---------- /architects: the room ---------- */
/* Full bleed, ink ground, photograph to the right. The panel is a solid colour
   rather than an overlay so the faces are never washed out to make type legible,
   which is what makes an image like this read as stock. */
.room {
  display: grid; grid-template-columns: 40% 60%;
  background: var(--bg-dark); align-items: stretch;
}
.room-panel { padding: 66px 56px 66px max(40px, calc((100vw - 1080px) / 2)); display: flex;
  flex-direction: column; justify-content: center; }
.room-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--brand-on-dark); margin-bottom: 18px; }
.room-quote { font-family: var(--display); font-weight: 600; font-size: 28px; letter-spacing: -0.020em; line-height: 1.32;
  letter-spacing: -0.012em; color: #ffffff; margin: 0; text-wrap: balance; }
.room-media { display: block; position: relative; min-height: 420px; }
.room-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 42% center; }
/* The photograph is lit from a window on its left, so it meets the panel on its
   brightest edge. A short gradient carries the ink across the seam. */
.room-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(23,21,15,0.92) 0%, rgba(23,21,15,0.45) 9%, rgba(23,21,15,0) 22%);
}
@media (max-width: 900px) {
  .room { grid-template-columns: 1fr; }
  .room-panel { padding: 46px 24px 34px; }
  .room-quote { font-size: 22px; }
  .room-media { min-height: 300px; }
  .room-media::after { background: linear-gradient(180deg, rgba(23,21,15,0.85) 0%, rgba(23,21,15,0) 26%); }
}

/* --- Founder band ---------------------------------------------------------
   Lived in index.html's page style block until 2026-08-15, so /about carried the
   same markup with no rules at all: portrait stacked, paragraphs at body size,
   and the signature running into the role on one line. Shared markup needs
   shared CSS, or the second page to use it silently renders raw. */
.founder { display: grid; grid-template-columns: 330px 1fr; gap: 52px; align-items: start; max-width: 980px; }
.founder-portrait { width: 330px; height: 412px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--border-medium); }
.founder-note .section-label { margin-bottom: 16px; }
.founder-note p { font-size: 16.5px; line-height: 1.7; color: var(--text-secondary); margin-bottom: 15px; }
.founder-note p:last-of-type { margin-bottom: 0; }
.founder-sign { margin-top: 26px; }
.founder-sig { display: block; font-family: var(--display); font-style: italic;
  font-size: 27px; color: var(--text-primary); line-height: 1.1; }
.founder-role { display: block; font-size: 13px; color: var(--text-tertiary); margin-top: 7px; }
/* The founder's own following is the credible one, so the profile link is given
   its own affordance rather than buried in prose. Monochrome: LinkedIn blue is
   the one colour the palette rules out. */
.founder-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: 13px; font-weight: 600; color: var(--text-secondary); text-decoration: none;
  border: 1px solid var(--border-medium); border-radius: 999px; padding: 7px 14px 7px 11px;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; }
.founder-link svg { width: 15px; height: 15px; flex-shrink: 0; fill: currentColor; }
.founder-link:hover { color: var(--brand-ink); border-color: var(--brand-primary); background: var(--bg-white); }

@media (max-width: 768px) {
  .founder { grid-template-columns: 1fr; gap: 26px; }
  .founder-portrait { width: 200px; height: 250px; }
  .founder-sig { font-size: 23px; }
}

/* The decorative rules behind the hero and the closing band are fixed 1440px
   plates pinned at left:50% with a -720px pull, so below 1440 they hang past the
   right edge and the whole page scrolls sideways: 80px of it at 1280, the most
   common laptop width. Clip rather than hide, because the nav is sticky and
   overflow:hidden on an ancestor kills that. */
.hero-art-wrap { overflow-x: clip; }
/* The section has to become the containing block first. While it stays static the
   plate is positioned against the viewport, so no ancestor can clip it. The
   section is full width, so 50% resolves to the same place either way. */
.section:has(> .close-art) { position: relative; overflow-x: clip; }


/* --- Metrics strip ---------------------------------------------------------
   A dark band of four claims, sized to read as one object. Introduced on the
   homepage 2026-09-05, directly under the logo wall: it is the only dark ground
   between the hero and the closing CTA. */

.metrics { background: var(--bg-dark); padding: 64px 0; }
.metrics .container { max-width: 1180px; }
.metrics-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
/* Subgrid so every label starts on the same line whatever the value above it
   does. Without it a two-line value drags its own label down and the row reads
   as four unrelated cards. */
@supports (grid-template-rows: subgrid) {
  .metrics-grid { grid-template-rows: auto auto; }
  .metric { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
}
.metric {
  padding: 34px 24px 30px;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.metric:first-child { padding-left: 0; }
.metric:last-child { border-right: none; padding-right: 0; }
/* nowrap: a value broken across two lines stops reading as a figure. Any new
   value has to fit the cell at this size, or the size comes down for all four. */
.metric b {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: 36px; line-height: 1.08; letter-spacing: -0.026em;
  color: #ffffff; margin-bottom: 14px; white-space: nowrap;
}
.metric span {
  display: block; align-self: start; font-size: 15px; line-height: 1.5;
  font-weight: 400; letter-spacing: 0; color: rgba(255, 255, 255, 0.66);
}

@media (max-width: 900px) {
  .metrics { padding: 48px 0; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  /* A 1fr track floors at its content width, and the values are set nowrap, so
     without this the widest value pushes the whole grid past the viewport. */
  .metric { min-width: 0; }
  .metric:nth-child(2) { border-right: none; padding-right: 0; }
  .metric:nth-child(3) { padding-left: 0; }
}
/* One column on a phone. Two-up leaves about 143px of usable cell, and
   "ISO 27001:2022" needs closer to 200px at this size, so the row ran off the
   right edge with the last column cut in half. Stacking is the only honest fix:
   shrinking the value far enough to fit two-up stops it reading as a figure.
   Subgrid comes off with it, since there is nothing left to align across. */
@media (max-width: 768px) {
  .metrics-grid { grid-template-columns: 1fr; }
  .metric { display: block; grid-row: auto; padding: 24px 0 22px; border-right: none; }
  .metric:first-child { padding-top: 26px; }
  .metric:last-child { border-bottom: none; padding-bottom: 4px; }
  .metric b { font-size: 30px; margin-bottom: 10px; }
}