/* Story System marketing site, pilot stylesheet.
   Written for the templates in site/. Token values restate the existing site's
   visual direction (palette, type pairing, radii); the rules are new. Brand
   rules kept: no cream page backgrounds, pills only for the hero's primary
   call to action, no gradient text, no italic accent words, no emoji. */

/* Self-hosted latin subsets (SIL OFL; licences next to each file). Inter and
   Newsreader are variable fonts, so one file serves every weight in range; the
   unicode-range matches the subset, other scripts fall back per glyph.
   Newsreader is limited to the weights (400-600) and optical sizes (12-72) the site
   uses; docs/fonts/README.md has the source and the rebuild command.
   Courier Prime (regular and bold) is used by the homepage demos in cofounder-demos.css. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/_revisions/619a61b1483084343f6a74b3a3a9035cb4bb0996/assets/fonts/inter/inter-latin.woff2?v=c940764593") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/_revisions/619a61b1483084343f6a74b3a3a9035cb4bb0996/assets/fonts/newsreader/newsreader-latin.woff2?v=a266ed3d48") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Stand-in for Newsreader until it loads, so headings reflow less when it swaps in.
   Georgia is scaled to Newsreader's average text width (size-adjust 97% is the fit
   to the site's own headings and text) and given Newsreader's vertical metrics
   (hhea ascent 1470, descent 530, line gap 0 of 2000 units per em), each divided
   by size-adjust because the overrides apply to the scaled size. Without Georgia
   (Android, Linux) the face is skipped and the stack continues as before. */
@font-face {
  font-family: "Newsreader Fallback";
  font-style: normal;
  font-weight: 400 600;
  src: local("Georgia");
  size-adjust: 97%;
  ascent-override: 75.77%;
  descent-override: 27.32%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Courier Prime";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/_revisions/619a61b1483084343f6a74b3a3a9035cb4bb0996/assets/courier-prime/courier-prime-regular.woff2?v=21bf7ff8d9") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Courier Prime";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/_revisions/619a61b1483084343f6a74b3a3a9035cb4bb0996/assets/courier-prime/courier-prime-bold.woff2?v=0662241571") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --canvas: #F2F4F7;
  --surface: #FFFFFF;
  --surface-2: #F8F9FB;
  --warm: #FCF7EF;
  --warm-2: #FBF3E6;
  --ink: #111418;
  --ink-2: #222831;
  --slate: #4B576A;
  --slate-2: #636F82;
  --line: #DCE0E6;
  --line-2: #E8EBEF;
  --line-strong: #C8CDD4;
  --blue: #386FA9;
  --blue-tint: #E6F0F9;
  --sky: #6EABD8;
  --amber: #F5B24A;
  --amber-tint: #F8EBD6;
  --amber-text: #7A4A00;

  --serif: "Newsreader", "Newsreader Fallback", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(72px, 10vw, 136px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow-panel: 0 1px 0 rgba(17, 20, 24, .04), 0 24px 60px -24px rgba(34, 40, 49, .28), 0 8px 24px -12px rgba(34, 40, 49, .12);
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -.028em;
  line-height: 1.05;
  text-wrap: balance;
}
p { margin: 0; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

.skip {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  padding: 10px 14px; border-radius: var(--r-sm);
  background: var(--ink); color: #fff; text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: calc(760px + 2 * var(--gutter)); }

/* Buttons: softly rounded; only the hero's primary action is a pill */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 20px;
  border: 1px solid transparent; border-radius: 9px;
  font: 500 15px/1 var(--sans); letter-spacing: -.005em;
  text-decoration: none;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.btn--primary { background: var(--ink); color: #fff; box-shadow: 0 6px 16px -8px rgba(17, 20, 24, .5); }
.btn--primary:hover { background: var(--ink-2); transform: translateY(-1px); }
.btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn--ghost:hover { background: var(--surface); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.cta-row--center { justify-content: center; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 249, 246, .86);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.brand {
  font: 500 22px/1 var(--serif); letter-spacing: -.02em;
  text-decoration: none; white-space: nowrap;
}
.nav { margin-left: auto; overflow-x: auto; }
.nav ul { display: flex; gap: 28px; margin: 0; padding: 0; list-style: none; }
.nav a { font-size: 14.5px; color: var(--slate); text-decoration: none; white-space: nowrap; transition: color .2s; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

/* Hero: the warm opening that the closing band answers */
.hero {
  padding: clamp(56px, 8vw, 120px) 0 clamp(64px, 8vw, 112px);
  background: linear-gradient(180deg, var(--warm) 0%, var(--warm) 46%, var(--canvas) 100%);
}
.hero-inner { display: grid; gap: clamp(40px, 6vw, 80px); align-items: center; }
.hero--media .hero-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.hero-title {
  max-width: 11em;
  font-size: clamp(44px, 5.4vw, 72px); line-height: .98; letter-spacing: -.035em;
}
.hero-text {
  max-width: 30em; margin-top: clamp(16px, 2vw, 24px);
  font-size: clamp(17px, 1.45vw, 20px); line-height: 1.55; color: var(--slate);
}
.hero .cta-row { margin-top: clamp(28px, 3vw, 40px); gap: 16px 24px; }
.hero .btn--primary { min-height: 54px; padding: 0 30px; border-radius: 999px; font-size: 17px; }
.hero .btn--ghost { min-height: 54px; font-size: 16px; }

/* Images */
.figure { margin: 0; }
.figure img { width: 100%; border-radius: var(--r-lg); background: var(--surface-2); }
.figure figcaption { margin-top: 10px; font-size: 14px; color: var(--slate-2); }
.hero-image img, .page-image img, .article-image img {
  aspect-ratio: 4 / 3; object-fit: cover;
  border: 1px solid var(--line); box-shadow: var(--shadow-panel);
}
.page-image { margin-top: clamp(32px, 4vw, 48px); }
.article-image { margin-bottom: clamp(40px, 5vw, 64px); }

/* Sections. Background follows the section's job, not its position:
   surface for showing, canvas for explaining and deciding. */
.sec { padding: var(--section) 0; }
.features, .article-list { background: var(--surface); }
.steps, .faq, .prose-sec, .sec--body { background: var(--canvas); }
:is(.steps, .faq, .prose-sec, .sec--body) + :is(.steps, .faq, .prose-sec, .sec--body) { padding-top: 0; }
/* A hairline inset to the content edge separates neighbours that share a background. */
:is(.steps, .faq, .prose-sec, .sec--body) + :is(.steps, .faq, .prose-sec, .sec--body) > .wrap {
  padding-top: var(--section);
  background: linear-gradient(var(--line), var(--line)) top center / calc(100% - 2 * var(--gutter)) 1px no-repeat;
}
.sec-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.sec-title { font-size: clamp(34px, 4.6vw, 56px); }
.sec-head .sec-title, .prose-sec .sec-title, .article-list .sec-title { margin-bottom: 20px; }
.prose-sec .sec-title { max-width: 760px; }
.article-list .sec-title { margin-bottom: clamp(32px, 4vw, 48px); }
.sec-lede { max-width: 40em; font-size: 18px; color: var(--slate); }

/* Feature grid and article cards */
.grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  margin: 0; padding: 0; list-style: none;
}
.card {
  height: 100%; padding: 28px;
  background: var(--canvas); border: 1px solid var(--line-2); border-radius: var(--r-lg);
}
.card-title { font-size: 23px; letter-spacing: -.015em; line-height: 1.2; margin-bottom: 10px; }
.card p { color: var(--slate); }
.card--article { transition: border-color .2s var(--ease), transform .2s var(--ease); }
.card--article:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.card--article a { text-decoration: none; }
.card--article a:hover { color: var(--blue); }
.card .meta { margin-top: 18px; font-size: 13.5px; color: var(--slate-2); }

/* Steps: an ordered row, numbered quietly */
.steps-list {
  display: grid; gap: 0 clamp(24px, 4vw, 56px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  margin: 0; padding: 0; list-style: none; counter-reset: step;
}
.step { counter-increment: step; padding: 24px 0 8px; border-top: 1px solid var(--ink); }
.step::before {
  content: counter(step);
  display: block; margin-bottom: 18px;
  font: 600 13px/1 var(--sans); letter-spacing: .08em; color: var(--blue);
}
.step p { color: var(--slate); }

/* FAQ */
.faq-inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); }
.faq-list { border-top: 1px solid var(--ink); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  position: relative; padding: 22px 40px 22px 0;
  list-style: none; cursor: pointer;
  font: 500 clamp(19px, 1.8vw, 22px)/1.3 var(--serif); letter-spacing: -.01em;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 11px; height: 11px; margin-top: -8px;
  border-right: 1.5px solid var(--slate); border-bottom: 1.5px solid var(--slate);
  transform: rotate(45deg); transition: transform .3s var(--ease);
}
.faq-list details[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.faq-list .answer { padding: 0 40px 24px 0; font-size: 16.5px; color: var(--slate); }
.faq-list .answer p { margin-bottom: 12px; }

/* Closing band: a warm bookend that answers the hero */
.band {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(96px, 12vw, 168px) 0; text-align: center;
  background: linear-gradient(180deg, var(--canvas) 0%, var(--warm) 55%, var(--warm-2) 100%);
}
.band::before {
  content: ""; position: absolute; inset: auto 0 0; height: 90%; z-index: -1;
  background:
    radial-gradient(46% 60% at 50% 100%, rgba(245, 178, 74, .2), transparent 70%),
    radial-gradient(36% 46% at 72% 100%, rgba(143, 189, 227, .24), transparent 70%);
}
.band-inner { display: flex; flex-direction: column; align-items: center; }
.band-title { max-width: 12em; margin-bottom: 22px; font-size: clamp(38px, 5.6vw, 68px); }
.band-text { max-width: 34em; margin-bottom: 34px; font-size: 19px; color: var(--slate); }
.band .cta-row { margin-top: 12px; }

/* Page and article headers */
.page-head {
  padding: clamp(56px, 8vw, 112px) 0 clamp(48px, 6vw, 80px);
  background: linear-gradient(180deg, var(--warm) 0%, var(--canvas) 100%);
}
/* The homepage hero heading's scale. */
.page-title { max-width: 14em; font-size: clamp(44px, 4.4vw, 66px); letter-spacing: -.035em; line-height: .98; }
.page-cta { padding-bottom: var(--section); }

.article { padding-bottom: var(--section); }
.article-head {
  padding: clamp(56px, 8vw, 112px) 0 clamp(40px, 5vw, 64px);
  background: linear-gradient(180deg, var(--warm) 0%, var(--canvas) 100%);
}
.article-title { font-size: clamp(42px, 6vw, 76px); letter-spacing: -.034em; line-height: 1; margin-bottom: 28px; }
.standfirst {
  max-width: 40em; padding-left: 20px; border-left: 3px solid var(--amber);
  font-size: clamp(18px, 1.7vw, 21px); line-height: 1.6; color: var(--ink-2);
}
.article .meta { display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 24px; font-size: 14px; color: var(--slate-2); }
.article .meta span + span::before { content: "\00B7"; margin: 0 10px; }
.article-cta { margin-top: 48px; }

/* Prose: Markdown bodies */
.prose { max-width: 680px; font-size: 18px; line-height: 1.7; color: var(--ink-2); }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin: 56px 0 18px; font-size: clamp(28px, 3vw, 38px); }
.prose h3 { margin: 32px 0 8px; font-size: 23px; letter-spacing: -.01em; }
.prose p, .prose ul, .prose ol, .prose table, .prose pre, .prose blockquote, .prose figure { margin: 0 0 20px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 6px; }
.prose a { color: var(--blue); text-underline-offset: 3px; }
.prose a:hover { color: var(--ink); }
.prose strong { font-weight: 600; color: var(--ink); }
.prose img { border-radius: var(--r); }
.prose blockquote { padding-left: 20px; border-left: 3px solid var(--line-strong); color: var(--slate); }
.prose code { padding: 2px 6px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line-2); font: .86em var(--mono); }
.prose pre { padding: 18px 20px; overflow-x: auto; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); line-height: 1.5; }
.prose pre code { padding: 0; border: 0; background: none; font-size: 14.5px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 16px; }
.prose th, .prose td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); text-align: left; }
.prose th { font-weight: 600; color: var(--ink); border-bottom-color: var(--ink); }
.prose-sec .prose { font-size: 18px; }
.sec--body .prose { color: var(--slate); }
/* A headed, text-only prose section (no presentation, image or demo), as on the product,
   contact and support pages, takes the homepage's split head: a serif heading on
   the left, slate text on the right, sections divided by a hairline at a
   document's spacing rather than a chapter's. */
.prose-sec--text { padding: clamp(40px, 5vw, 64px) 0; }
.prose-sec--text + .prose-sec--text { padding-top: 0; }
.prose-sec--text + .prose-sec--text > .wrap { padding-top: clamp(40px, 5vw, 64px); }
.prose-sec--text .section-copy { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 16px clamp(32px, 6vw, 96px); align-items: start; }
.prose-sec--text .section-copy > .prose { grid-column: 2; max-width: 40em; font-size: 17px; color: var(--slate); }
.prose-sec--text .sec-title { max-width: none; margin: 0; font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -.02em; line-height: 1.15; }
.prose-sec--text .prose strong { color: var(--ink); }
@media (max-width: 760px) {
  .prose-sec--text .section-copy { grid-template-columns: minmax(0, 1fr); }
  .prose-sec--text .section-copy > .prose { grid-column: 1; }
}

/* 404 */
.notfound { display: flex; align-items: center; min-height: 64vh; padding: var(--section) 0; }
.notfound .page-title { margin-bottom: 20px; }
.notfound p { max-width: 32em; margin-bottom: 28px; font-size: 18px; color: var(--slate); }

/* Footer: warm, like the closing band above it */
.site-footer { padding: 48px 0 40px; background: var(--warm-2); border-top: 1px solid rgba(122, 74, 0, .1); font-size: 14.5px; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.footer-name { font: 500 20px/1.2 var(--serif); letter-spacing: -.015em; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
.footer-links a { color: var(--slate); text-decoration: none; }
.footer-links a:hover { color: var(--ink); }

/* Narrow screens */
@media (max-width: 860px) {
  .hero--media .hero-inner, .faq-inner { grid-template-columns: minmax(0, 1fr); }
  .faq-inner { gap: 24px; }
  .header-inner { min-height: 60px; gap: 16px; }
  .brand { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* MAR-19 mapped presentation. The section vocabulary is renderer controlled.
   Candidate brand assets and provisional Newsreader require human visual review. */
[hidden] { display: none !important; }
.brand { display: inline-flex; align-items: center; gap: 9px; }
.brand img { flex: 0 0 29px; width: 29px; height: 34px; }
.mobile-menu { display: none; }
.header-cta { margin-left: auto; }
.eyebrow { margin-bottom: 18px; color: var(--blue); font-size: 13px; font-weight: 600; letter-spacing: .12em; }
.sec-head > h2 { font-size: clamp(34px, 4.6vw, 58px); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(32px, 6vw, 80px); }
.split > * { min-width: 0; }
.hero .sec-head h1 { max-width: 10em; font-size: clamp(44px, 4.6vw, 68px); line-height: .98; }
.hero .prose { margin-top: 24px; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.5; color: var(--slate); }
.audience { background: var(--surface); border-block: 1px solid var(--line-2); }
.audience :is(.cards, .grid) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.audience .card { padding: 8px 22px 8px 0; border: 0; border-radius: 0; background: none; }
.audience .card + .card { border-left: 1px solid var(--line); padding-left: 22px; }
.approach { background: var(--canvas); }
.develop, .security { background: var(--surface); border-block: 1px solid var(--line-2); }
.world, .pricing { background: var(--canvas); }
.cards, .pricing-grid, .commitment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.demo-slot { width: 100%; margin: 0; }
.demo-media { width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-panel); }
.demo-fallback { padding: clamp(24px, 4vw, 44px); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); }
.demo-caption { margin-top: 12px; color: var(--slate); font-size: 14px; }
.section-media .figure img { object-fit: contain; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 20px; border: 1px solid var(--line-strong); border-radius: 9px; font: 500 15px/1.2 var(--sans); text-decoration: none; }
.button.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.button.ghost, .button.secondary { background: transparent; }
.plan { padding: clamp(24px, 3vw, 40px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.plan h3 { margin-bottom: 18px; font: 500 28px/1.2 var(--serif); }
.plan-price { font: 500 48px/1 var(--serif); margin-bottom: 16px; }
.plan-terms { color: var(--slate); margin-top: 18px; font-size: 15px; }
.commitment { padding: 24px 0; border-top: 1px solid var(--line); }
.commitment h3 { margin-bottom: 12px; font-size: 24px; }
.beat-glossary > .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.beat-group { min-width: 0; }
.beat-entry { margin: 0; padding: 18px 0; border-top: 1px solid var(--line); }
.beat-entry dt { font-weight: 600; margin-bottom: 8px; }
.beat-entry dd { margin: 0; color: var(--slate); }
.beat-code { display: inline-block; min-width: 38px; margin-right: 10px; padding: 5px; border-radius: 6px; background: var(--blue-tint); font: 600 12px/1.3 var(--sans); text-align: center; }
.final { text-align: center; background: linear-gradient(var(--canvas), var(--warm)); }
.final .sec-head, .final .prose { margin-inline: auto; }
.final .actions { justify-content: center; }
.footer-inner { align-items: flex-start; }
.footer-groups { display: flex; flex-wrap: wrap; gap: 32px 64px; }
.footer-groups h2 { margin-bottom: 14px; font: 600 14px/1.4 var(--sans); }
.footer-groups .footer-links { flex-direction: column; gap: 9px; }
/* The inline navigation shows from 830px; below that the menu button takes over.
   830px is the narrowest width at which the five primary links fit beside the
   brand and the header offer on the homepage with 16px to spare, measured with
   web fonts loaded and a 17px classic scrollbar (other pages need less). The
   tighter link spacing at 900px and below is part of that fit.
   cofounder-demos.css uses the same width. */
@media (max-width: 900px) {
  .nav ul { gap: 20px; }
}
@media (max-width: 829px) {
  .desktop-nav, .header-cta { display: none; }
  .header-inner { position: relative; justify-content: space-between; }
  .mobile-menu { display: block; }
  .mobile-menu summary { padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 8px; cursor: pointer; font-size: 15px; }
  .mobile-menu[open] summary { background: var(--surface); }
  /* The open menu may use the window height below the header, less a 16px margin. */
  .mobile-nav { position: absolute; top: 100%; right: var(--gutter); left: var(--gutter); max-height: calc(100vh - 84px); max-height: calc(100dvh - 84px); overflow-y: auto; padding: 12px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-panel); }
  .mobile-nav a { display: block; padding: 12px 0; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); }
  .mobile-nav a:last-child { border-bottom: 0; }
}
@media (max-width: 1040px) {
  .audience :is(.cards, .grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .audience :is(.cards, .grid), .beat-glossary > .wrap { grid-template-columns: minmax(0, 1fr); }
  .audience .card, .audience .card + .card { border-left: 0; border-top: 1px solid var(--line); padding: 20px 0; }
  .footer-groups { width: 100%; gap: 28px 40px; }
}

.split > .section-copy:only-child { grid-column: 1 / -1; }
.beat-glossary .sec-head, .beat-resolutions { grid-column: 1 / -1; }
.beat-resolutions { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 12px 20px; border-top: 1px solid var(--line); padding-top: 24px; }
.beat-resolutions dt { font-weight: 600; }
.beat-resolutions dd { margin: 0; color: var(--slate); }
.demo-slot .figure + .demo-fallback { margin-top: 16px; }
.plan .btn { margin-top: 24px; }

.footer-policies { width: 100%; padding-top: 20px; border-top: 1px solid var(--line); }

.footer-copyright { width: 100%; color: var(--slate); font-size: 13px; }

/* Guides and blog: restore the reference site's editorial composition.
   Scoped rules keep the home, Contact and Support presentation unchanged. */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--slate-2); }
.crumbs a { color: var(--slate); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.guide { padding: clamp(32px, 5vw, 56px) 0 clamp(80px, 10vw, 128px); }
.guide .crumbs { margin-bottom: clamp(40px, 6vw, 72px); }
.guide-head { max-width: 880px; margin-bottom: clamp(48px, 6vw, 80px); }
.guide-head h1 { font-size: clamp(42px, 6.4vw, 84px); letter-spacing: -.034em; line-height: 1; margin-bottom: 32px; }
.guide-answer { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.6; max-width: 40em; padding-left: 20px; border-left: 3px solid var(--amber); }
.guide-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.guide-toc { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.guide-toc p { margin-bottom: 4px; font-weight: 600; }
.guide-toc a { color: var(--slate); text-decoration: none; }
.guide-toc a:hover { color: var(--ink); text-decoration: underline; }
.guide-copy { min-width: 0; }
.guide-copy:only-child { grid-column: 1 / -1; }
.guide-section, .glossary-definitions, .beat-definition, .definition-group { scroll-margin-top: 96px; }
.guide-section + .guide-section, .guide-section + .glossary-definitions, .glossary-definitions + .guide-section { margin-top: 56px; }
.guide-section > h2, .glossary-definitions > h2 { margin-top: 0; }
.guide-copy h3 { font-family: var(--serif); font-size: 22px; font-weight: 500; }
.guide-copy ul { padding-left: 0; list-style: none; }
.guide-copy li { padding: 10px 0; border-top: 1px solid var(--line); }
.guide-copy li + li { margin-top: 0; }
.guide .layers-table table { border-spacing: 0 2px; border-collapse: separate; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.guide .layers-table thead, .guide .resolutions-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.guide .layers-table td { padding: 18px 20px; border: 0; background: var(--surface); }
.guide .layers-table td:first-child { width: 180px; font-weight: 600; }
.guide .layers-table td:first-child::before { content: ''; display: inline-block; width: 14px; height: 18px; margin-right: 10px; border-radius: 3px; transform: skewY(-12deg); background: var(--amber-tint); vertical-align: middle; }
.guide .layers-table tr:nth-child(2) td:first-child::before { background: var(--amber); }
.guide .layers-table tr:nth-child(3) td:first-child::before { background: var(--sky); }
.guide .layers-table td:last-child { color: var(--slate); }
.guide .resolutions-table table { border-collapse: separate; border-spacing: 2px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.guide .resolutions-table tbody { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.guide .resolutions-table tr { padding: 16px 18px; background: var(--surface); }
.guide .resolutions-table td { display: block; border: 0; padding: 0; color: var(--slate); font-size: 15px; }
.guide .resolutions-table td:first-child { margin-bottom: 4px; color: var(--ink); font-size: 16px; font-weight: 600; }
.guide .resolutions-table tr:first-child td:first-child { color: #15803D; }
.guide .resolutions-table tr:last-child td:first-child { color: #B82020; }
.definition-list { display: grid; gap: 16px; }
.guide-copy .definition-group, .definition-group { margin: 36px 0 14px; font: 600 13px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--slate-2); }
.definition-group[data-group="hope"] { color: #15803D; }
.definition-group[data-group="fear"] { color: #B82020; }
.definition-group[data-group="core"] { color: #504AE6; }
.beat-definition { --beat-color: var(--blue-tint); padding: 22px 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.beat-definition[data-beat="lift"] { --beat-color: #5FD3D0; }
.beat-definition[data-beat="anticipation"] { --beat-color: #3D9AD6; }
.beat-definition[data-beat="relief"] { --beat-color: #6377D6; }
.beat-definition[data-beat="drop"] { --beat-color: #E3C92E; }
.beat-definition[data-beat="peril"] { --beat-color: #F46D43; }
.beat-definition[data-beat="tragedy"] { --beat-color: #E5576B; }
.beat-definition[data-beat="procedural"] { --beat-color: #A3DA8F; }
.beat-definition[data-beat="dramatic"] { --beat-color: #2E9A7A; }
.beat-definition[data-beat="emotion"] { --beat-color: #C39BE8; }
.beat-definition[data-beat="commentary"] { --beat-color: #BF9A6A; }
.beat-definition[data-beat="spectacle"] { --beat-color: #E164C4; }
.beat-definition[data-beat="undefined"] { --beat-color: #C8CDD4; }
.beat-definition h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 600 20px/1.2 var(--sans); }
.beat-definition .beat-code { min-width: 34px; height: 34px; margin: 0; display: inline-flex; justify-content: center; align-items: center; background: var(--beat-color); color: #111418; }
.beat-definition .definition-summary { font-size: 16px; font-weight: 500; line-height: 1.5; margin-bottom: 12px; }
.beat-definition .definition-group-label { margin: 2px 0 12px; font: 600 11px/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--slate-2); }
.beat-definition[data-group="hope"] .definition-group-label { color: #15803D; }
.beat-definition[data-group="fear"] .definition-group-label { color: #B82020; }
.beat-definition[data-group="core"] .definition-group-label { color: #504AE6; }
.beat-definition .definition-tagline { margin: -6px 0 12px; font: 600 14px/1.4 var(--sans); color: var(--ink-2); }
.definition-detail { font-size: 14.5px; line-height: 1.6; color: var(--slate); }
.definition-detail p { margin-bottom: 12px; }
.beat-definition .definition-label { margin: 16px 0 8px; font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--slate-2); }
.beat-definition .definition-examples { display: grid; gap: 8px; padding: 0; margin: 0; list-style: none; }
.beat-definition .definition-examples li { padding: 10px 12px; border: 0; border-left: 3px solid var(--beat-color); border-radius: 0 8px 8px 0; background: var(--surface-2); font-size: 14px; line-height: 1.5; }
.blog-head { padding: clamp(40px, 6vw, 88px) 0 clamp(28px, 3.4vw, 44px); background: linear-gradient(180deg, var(--warm), var(--canvas)); }
.blog-head h1 { font-size: clamp(40px, 5.4vw, 72px); letter-spacing: -.034em; line-height: 1; max-width: 13em; margin-bottom: 20px; }
.blog-head .crumbs { margin-bottom: 28px; }
.blog-lede { font-size: clamp(17px, 1.5vw, 20px); color: var(--slate); max-width: 36em; }
.topic-chips, .post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
.topic-chips a, .post-tags a { display: inline-block; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; font-size: 13.5px; color: var(--ink-2); }
.topic-chips a:hover, .post-tags a:hover { border-color: var(--line-strong); }
.topic-chips a[aria-current="page"] { border-color: var(--ink); }
.blog-body { padding: clamp(20px, 3vw, 40px) 0 clamp(80px, 10vw, 128px); }
.blog-empty { color: var(--slate); font-size: 18px; }
.featured { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); text-decoration: none; color: inherit; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 30px 60px -44px rgba(34,40,49,.4); }
.featured:hover { border-color: var(--line-strong); }
.featured--text { grid-template-columns: minmax(0, 1fr); }
.featured-cover { display: flex; align-items: center; background: var(--warm); min-height: 260px; }
.featured-cover img { width: 100%; height: auto; object-fit: contain; }
.featured-text { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 3vw, 40px); justify-content: center; }
.featured-label { font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.featured-title { font-family: var(--serif); font-size: clamp(26px, 2.6vw, 36px); font-weight: 400; line-height: 1.12; letter-spacing: -.02em; text-wrap: wrap; }
.featured-summary { color: var(--slate); font-size: 16px; line-height: 1.55; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--slate-2); }
.post-meta > * + *::before { content: '·'; margin-right: 8px; }
.blog-list-heading { font-size: clamp(24px, 2.4vw, 32px); margin: clamp(48px, 6vw, 72px) 0 8px; }
.post-list { border-top: 1px solid var(--ink); padding: 0; list-style: none; }
.post-row a { display: grid; grid-template-columns: 170px minmax(0, 1fr) 110px; gap: 24px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.post-row-main { display: grid; gap: 6px; }
.post-row-title { font-family: var(--serif); font-size: 22px; font-weight: 400; line-height: 1.25; letter-spacing: normal; text-wrap: wrap; }
.post-row-summary { font-size: 15px; line-height: 1.55; color: var(--slate); }
.post-row-date, .post-row-time, .blog-feed { font-size: 14px; color: var(--slate-2); }
.post-row-time { text-align: right; }
.blog-feed { margin-top: 32px; }
.post { padding: clamp(32px, 5vw, 64px) 0 clamp(64px, 8vw, 104px); background: linear-gradient(180deg, var(--warm), var(--canvas) 420px); }
.post-wrap { max-width: 860px; }
.post .crumbs { margin-bottom: clamp(28px, 4vw, 48px); }
.post-head h1 { font-size: clamp(36px, 4.8vw, 60px); letter-spacing: -.03em; line-height: 1.04; margin-bottom: 22px; }
.post-lede { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.55; margin-bottom: 22px; }
.post-head .post-meta { padding-top: 18px; border-top: 1px solid var(--line); }
.post-cover { margin: clamp(28px, 4vw, 44px) 0; }
.post-cover img { width: 100%; border: 1px solid var(--line-2); }
.post-body { max-width: 680px; margin-top: clamp(28px, 4vw, 44px); }
.post-body h2 { font-size: clamp(26px, 2.6vw, 34px); margin: 48px 0 16px; }
.post-body ul { padding: 0; list-style: none; }
.post-body li { padding: 10px 0; border-top: 1px solid var(--line); }
.post-body li + li { margin-top: 0; }
.post-body li em, .post-body p em { color: var(--slate); }
.post-tags { margin-top: 36px; }
.post-cta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center; margin-top: clamp(40px, 5vw, 64px); padding: 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.post-cta-heading { font-family: var(--serif); font-size: 21px; line-height: 1.25; margin-bottom: 4px; }
.post-cta p:not(.post-cta-heading) { color: var(--slate); font-size: 15px; }
.post-cta-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.post-cta--with-trial { grid-template-columns: auto minmax(0, 1fr); }
.post-cta--with-trial .post-cta-buttons { grid-column: 1 / -1; }
.post-more { padding: clamp(56px, 7vw, 96px) 0; background: var(--surface); border-top: 1px solid var(--line-2); }
.post-more h2 { font-size: clamp(26px, 2.6vw, 34px); margin-bottom: 20px; }
@media (max-width: 900px) {
  .guide-layout { grid-template-columns: minmax(0, 1fr); }
  .guide-toc { position: static; border-block: 1px solid var(--line); padding: 16px 0; }
  .guide .layers-table tr { display: grid; }
  .guide .layers-table td:first-child { width: auto; padding-bottom: 0; }
}
@media (max-width: 800px) {
  .featured { grid-template-columns: minmax(0, 1fr); }
  .featured-cover { min-height: 0; }
  .post-cta { grid-template-columns: auto minmax(0, 1fr); }
  .post-cta-buttons { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .guide .resolutions-table tbody { grid-template-columns: minmax(0, 1fr); }
  .beat-definition { padding: 18px; }
}
@media (max-width: 520px) {
  .post-row a { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .post-row-time { text-align: left; }
  .post-cta { grid-template-columns: minmax(0, 1fr); }
  .post-cta-buttons .btn { flex: 1 1 auto; }
}
.guide-head .eyebrow, .blog-head .eyebrow { display: flex; align-items: center; gap: 12px; text-transform: uppercase; }
.guide-head .eyebrow::before, .blog-head .eyebrow::before { content: ''; width: 14px; height: 17px; flex: none; background: url("/_revisions/619a61b1483084343f6a74b3a3a9035cb4bb0996/assets/img/brand/mark.svg?v=23dc1e5c05") center / contain no-repeat; }
.guide-copy > .cta-row { margin-top: 32px; }
.guide-copy .btn--primary { color: #fff; }
.guide-copy .btn--ghost { color: var(--ink); }
.guide-head .guide-image { margin-top: 28px; }

/* Chris's selected Final 26 wordmark, header offer and footer grouping. */
.brand .brand-wordmark { flex: 0 0 auto; width: 141px; height: auto; }
.footer-brand .brand-wordmark { width: 129px; height: auto; }
.brand-original .header-inner { min-height: 68px; }
.brand-original .header-cta { display: inline-flex; min-height: 38px; padding: 0 14px; font-size: 14px; white-space: nowrap; }
.brand-original .mobile-menu summary { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 8px; list-style: none; }
.brand-original .mobile-menu summary::-webkit-details-marker { display: none; }
.menu-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.menu-bars { display: block; width: 20px; height: 10px; border-block: 1.6px solid currentColor; }
.footer-original { padding: 56px 0 28px; }
.footer-original .footer-inner { display: grid; grid-template-columns: minmax(0,2fr) repeat(3,minmax(0,1fr)); gap: 32px; }
.footer-original .footer-groups { display: contents; }
.footer-original .footer-groups h2 { font-size: 14.5px; }
.footer-original .footer-groups .footer-links { gap: 10px; }
.footer-tagline { margin-top: 12px; color: var(--slate); }
.footer-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 24px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line-2); color: var(--slate-2); font-size: 13px; }
.footer-base .footer-copyright { width: auto; }
.footer-base .analytics-footer { padding: 0; font-size: inherit; }
.footer-base .analytics-footer a { color: var(--slate); text-decoration: none; }
.footer-base .analytics-footer a:hover { color: var(--ink); }
.footer-base noscript { flex-basis: 100%; }
@media(max-width:829px) { .brand-original .header-inner { gap: 12px; } }
@media(max-width:900px) { .footer-original .footer-inner { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; } }
@media(max-width:900px) { .footer-original .footer-identity { grid-column: 1 / -1; } }
@media(max-width:380px) { .brand-original .brand-wordmark { width: 110px; height: auto; } }

/* Optional v3 hero fields remain readable in the generic presentation. */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hero .hero-tag { display: block; font: 400 clamp(15px, 1.65vw, 24px)/1.6 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--slate); margin-bottom: 24px; }
.hero .hero-sub-lead { color: var(--ink); font-weight: 500; }
.hero .hero-fine { margin-top: 14px; font-size: 13.5px; color: var(--slate-2); }
.hero .hero-pillars { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 28px; padding: 0; list-style: none; }