@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

  :root{
    /* Ink is a dark slate used for TEXT and borders — never a full-bleed background. */
    --ink:#1F2B2E;
    --ink-soft:#3A4A4D;
    --paper:#F7F5EF;
    --paper-dim:#ECE8DC;
    /* Blueprint blue: the one strong colour in the system, used sparingly and deliberately. */
    --accent:#2B5C7A;
    --accent-dim:#1E4258;
    --accent-warm:#C97C2E;
    --muted:#5C6B6C;
    --muted-on-ink:#CBD9DC;
    --line-on-paper:rgba(31,43,46,0.15);
    --line-on-ink:rgba(247,245,239,0.24);
    --serif:'IBM Plex Serif', Georgia, serif;
    --sans:'IBM Plex Sans', -apple-system, sans-serif;
    --mono:'IBM Plex Mono', 'Courier New', monospace;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--sans);
    color:var(--ink);
    background:var(--paper);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;}
  img{max-width:100%; display:block;}

  :focus-visible{
    outline:2px solid var(--accent);
    outline-offset:3px;
  }

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
  }

  .wrap{
    max-width:1080px;
    margin:0 auto;
    padding:0 32px;
  }

  .eyebrow{
    font-family:var(--mono);
    font-size:12.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--accent);
    margin-bottom:18px;
    display:block;
  }
  .eyebrow.on-ink{ color:var(--accent-warm); }

  h1,h2,h3{
    font-family:var(--serif);
    font-weight:600;
    line-height:1.14;
    letter-spacing:-0.01em;
  }

  /* ---------- BLUEPRINT CORNER MARKS ----------
     A recurring motif: small crosshair ticks at the corners of key panels,
     like registration marks on a technical drawing. Reinforces "spec before build". */
  .ticked{ position:relative; }
  .ticked::before, .ticked::after{
    content:"";
    position:absolute;
    width:10px; height:10px;
    border-top:1.5px solid var(--accent);
    border-left:1.5px solid var(--accent);
    top:-1px; left:-1px;
  }
  .ticked::after{
    top:auto; left:auto; bottom:-1px; right:-1px;
    border-top:none; border-left:none;
    border-bottom:1.5px solid var(--accent);
    border-right:1.5px solid var(--accent);
  }

  /* ---------- NAV ---------- */
  header.site{
    position:sticky; top:0; z-index:50;
    background:rgba(247,245,239,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line-on-paper);
  }
  nav.wrap{
    display:flex; align-items:center; justify-content:space-between;
    padding-top:20px; padding-bottom:20px;
  }
  .logo{
    font-family:var(--mono);
    font-weight:500;
    font-size:15px;
    letter-spacing:0.02em;
  }
  .logo span{color:var(--accent);}
  .navlinks{
    display:flex; gap:30px;
    font-family:var(--mono);
    font-size:12.5px;
    letter-spacing:0.04em;
  }
  .navlinks a{ text-decoration:none; color:var(--muted); transition:color .15s; }
  .navlinks a:hover{ color:var(--accent); }
  .nav-cta{
    font-family:var(--mono);
    font-size:12.5px;
    padding:9px 16px;
    border:1px solid var(--accent);
    color:var(--accent);
    text-decoration:none;
    white-space:nowrap;
    transition:background .15s, color .15s;
  }
  .nav-cta:hover{ background:var(--accent); color:var(--paper); }
  @media (max-width:760px){
    .navlinks{ display:none; }
  }

  /* ---------- HERO ---------- */
  .hero{
    padding:96px 0 84px;
  }
  .hero h1{
    font-size:clamp(30px, 4.4vw, 48px);
    max-width:24ch;
    margin-bottom:26px;
  }
  .hero .sub{
    font-size:18px;
    max-width:52ch;
    color:#3D4548;
    margin-bottom:40px;
  }

  .fork{
    border:1px solid var(--line-on-paper);
    background:var(--paper-dim);
    padding:24px 28px;
    max-width:640px;
    margin-bottom:40px;
  }
  .fork-row{
    display:flex; gap:14px;
    padding:10px 0;
  }
  .fork-row + .fork-row{ border-top:1px dashed var(--line-on-paper); }
  .fork-row .mark{
    font-family:var(--mono);
    color:var(--accent);
    font-size:14px;
    flex-shrink:0;
    padding-top:2px;
  }
  .fork-row p{ font-size:15px; }
  .fork-row a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:3px; }
  .fork-row a:hover{ color:var(--accent-dim); }

  .btn{
    display:inline-block;
    font-family:var(--mono);
    font-size:13.5px;
    letter-spacing:0.03em;
    text-decoration:none;
    padding:15px 26px;
    border:1px solid var(--accent);
    background:var(--accent);
    color:var(--paper);
    transition:background .15s, color .15s, border-color .15s;
  }
  .btn:hover{ background:var(--accent-warm); border-color:var(--accent-warm); color:#241a0c; }
  .btn.ghost{
    background:transparent; color:var(--ink);
    border-color:var(--ink);
  }
  .btn.ghost:hover{ background:var(--ink); color:var(--paper); }
  /* .btn.on-ink is used on the accent-blue panels: a light button on a coloured field */
  .btn.on-ink{ border-color:var(--paper); background:var(--paper); color:var(--accent-dim); }
  .btn.on-ink:hover{ background:var(--accent-warm); border-color:var(--accent-warm); color:#241a0c; }

  /* ---------- SECTION BASE ---------- */
  section{ padding:88px 0; }
  /* "on-ink" now means the accent-blue panel treatment — never black.
     Reserved for the two argument-anchoring moments: The Mistake, and the Readiness Review CTA. */
  section.on-ink{ background:var(--accent); color:var(--paper); }
  section.on-ink .muted{ color:var(--muted-on-ink); }
  .muted{ color:var(--muted); }

  h2{
    font-size:clamp(26px, 3.4vw, 36px);
    max-width:20ch;
    margin-bottom:30px;
  }

  .lede{
    font-size:16.5px;
    max-width:62ch;
  }
  .lede p + p{ margin-top:16px; }

  .pull{
    font-family:var(--serif);
    font-style:italic;
    font-size:21px;
    color:var(--accent-warm);
    max-width:44ch;
    margin-top:36px;
    padding-left:22px;
    border-left:2px solid var(--accent-warm);
  }

  /* ---------- QUESTIONS GRID ---------- */
  .qgrid{
    margin-top:44px;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:1px;
    background:var(--line-on-paper);
    border:1px solid var(--line-on-paper);
  }
  @media (max-width:700px){ .qgrid{ grid-template-columns:1fr; } }
  .qcard{
    background:var(--paper);
    padding:28px 26px;
  }
  .qcard .num{
    font-family:var(--mono);
    font-size:12px;
    color:var(--accent);
    display:block;
    margin-bottom:12px;
  }
  .qcard p{
    font-family:var(--serif);
    font-size:18px;
    line-height:1.35;
  }
  .qgrid .qcard:last-child{
    background:var(--accent);
    color:var(--paper);
    display:flex;
    align-items:center;
  }
  .qgrid .qcard:last-child p{ font-family:var(--sans); font-size:14.5px; color:var(--muted-on-ink); line-height:1.6; }

  /* ---------- FORK DIAGRAM (signature) ----------
     Both columns stay light. The difference is drawn, not lit: dashed vs solid,
     muted vs numbered, "default" vs "specified" — like a draft next to a final spec. */
  .diagram-section{ padding:0; }
  .diagram-head{
    padding:88px 0 56px;
    text-align:center;
  }
  .diagram-head .eyebrow{ display:block; margin:0 auto 18px; }
  .diagram-head h2{ margin:0 auto; }

  .diagram-split{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  @media (max-width:760px){ .diagram-split{ grid-template-columns:1fr; } }

  .diagram-col{ padding:56px 40px 80px; }
  .diagram-col.default{ background:var(--paper-dim); color:var(--muted); }
  .diagram-col.ours{ background:var(--paper); }

  .diagram-label{
    font-family:var(--mono);
    font-size:12.5px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    margin-bottom:36px;
    display:block;
  }
  .diagram-col.default .diagram-label{ color:var(--muted); }
  .diagram-col.ours .diagram-label{ color:var(--accent); }

  .steps{ max-width:340px; margin:0 auto; }
  .step{
    font-family:var(--mono);
    font-size:14.5px;
    padding:15px 18px;
    border:1px dashed var(--line-on-paper);
    color:var(--muted);
  }
  .diagram-col.ours .step{
    border:1px solid var(--ink);
    color:var(--ink);
    font-weight:500;
    background:var(--paper);
  }
  .arrow{
    text-align:center;
    font-family:var(--mono);
    padding:8px 0;
    opacity:0.5;
  }

  /* ---------- CTA SECTION ---------- */
  .cta-section .wrap{ max-width:720px; }
  .cta-section .lede{ margin-bottom:36px; }
  .cta-list{ list-style:none; margin:0 0 40px; }
  .cta-list li{
    font-size:15.5px;
    padding-left:20px;
    position:relative;
    margin-bottom:10px;
    color:var(--muted-on-ink);
  }
  .cta-list li::before{
    content:"—";
    position:absolute; left:0; color:var(--accent-warm);
  }
  .cta-actions{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:26px; }
  .cta-note{
    font-size:13.5px;
    color:var(--muted-on-ink);
  }
  .cta-note a{ color:var(--accent-warm); text-decoration:underline; text-underline-offset:3px; }

  /* ---------- ABOUT ---------- */
  .about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:start;
  }
  @media (max-width:760px){ .about-grid{ grid-template-columns:1fr; gap:36px; } }
  .not-list{ list-style:none; }
  .not-list li{
    font-family:var(--mono);
    font-size:14px;
    color:var(--muted);
    padding:9px 0;
    border-bottom:1px solid var(--line-on-paper);
  }
  .not-list li.is{
    color:var(--ink);
    font-weight:600;
  }
  .not-list li span{ color:var(--accent); margin-right:10px; }

  /* ---------- FAQ ---------- */
  .faq-item{
    border-top:1px solid var(--line-on-paper);
    padding:26px 0;
  }
  .faq-item:last-child{ border-bottom:1px solid var(--line-on-paper); }
  .faq-item h3{
    font-family:var(--sans);
    font-weight:600;
    font-size:16.5px;
    margin-bottom:10px;
  }
  .faq-item p{ font-size:15px; color:#3B4145; max-width:64ch; }

  /* ---------- FOOTER ---------- */
  footer{
    background:var(--accent-dim);
    color:var(--muted-on-ink);
    padding:56px 0 40px;
  }
  .footer-top{
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px;
    padding-bottom:32px;
    border-bottom:1px solid var(--line-on-ink);
    margin-bottom:24px;
  }
  .footer-links{
    display:flex; gap:22px; flex-wrap:wrap;
    font-family:var(--mono); font-size:12.5px;
  }
  .footer-links a{ text-decoration:none; color:var(--muted-on-ink); }
  .footer-links a:hover{ color:var(--paper); }
  .footer-bottom{
    font-family:var(--mono);
    font-size:12px;
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  }
  .footer-bottom a{ color:var(--accent-warm); text-decoration:none; }
  .footer-bottom a:hover{ text-decoration:underline; }

  .grid2{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:56px;
  }
  @media (max-width:760px){ .grid2{ grid-template-columns:1fr; } }

  /* ---------- LEGAL PAGES ---------- */
  .legal-hero{ padding:72px 0 40px; border-bottom:1px solid var(--line-on-paper); }
  .legal-hero h1{ font-size:clamp(28px, 4vw, 40px); max-width:20ch; }
  .legal-updated{ font-family:var(--mono); font-size:12.5px; color:var(--muted); margin-top:14px; }
  .legal-body{ padding:56px 0 96px; }
  .legal-body .wrap{ max-width:760px; }
  .legal-body h2{ font-size:20px; margin-top:44px; margin-bottom:14px; max-width:none; }
  .legal-body h2:first-child{ margin-top:0; }
  .legal-body p{ font-size:15.5px; color:#33393D; margin-bottom:14px; max-width:70ch; }
  .legal-body ul{ margin:0 0 14px 20px; }
  .legal-body li{ font-size:15.5px; color:#33393D; margin-bottom:8px; }
  .legal-body a.inline{ color:var(--accent-dim); text-decoration:underline; text-underline-offset:3px; }
  .placeholder{
    background:var(--paper-dim);
    border:1px dashed var(--line-on-paper);
    padding:2px 6px;
    font-family:var(--mono);
    font-size:0.92em;
    color:var(--accent-dim);
  }
  .legal-note{
    margin-top:44px;
    padding:18px 20px;
    border:1px solid var(--line-on-paper);
    background:var(--paper-dim);
    font-family:var(--mono);
    font-size:13px;
    color:var(--muted);
  }

  /* ---------- CROSS-PAGE NEXT LINK ---------- */
  .next-page{
    border-top:1px solid var(--line-on-ink);
    padding:36px 0;
    background:var(--accent);
  }
  .next-page .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
  .next-page .label{ font-family:var(--mono); font-size:12px; color:var(--muted-on-ink); text-transform:uppercase; letter-spacing:0.08em; }
  .next-page a.next-link{ font-family:var(--serif); font-size:19px; text-decoration:none; color:var(--paper); }
  .next-page a.next-link:hover{ color:var(--accent-warm); }
  .next-page.on-paper{ border-top:1px solid var(--line-on-paper); background:var(--paper-dim); }
  .next-page.on-paper .label{ color:var(--muted); }
  .next-page.on-paper a.next-link{ color:var(--ink); }
  .next-page.on-paper a.next-link:hover{ color:var(--accent-dim); }

  /* ---------- START HERE (index overview) ---------- */
  .starthere{ padding:88px 0; }
  .starthere-list{ margin-top:36px; }
  .starthere-item{
    display:flex; gap:26px; align-items:baseline;
    padding:24px 0;
    border-top:1px solid var(--line-on-paper);
    text-decoration:none;
    color:var(--ink);
  }
  .starthere-item:last-child{ border-bottom:1px solid var(--line-on-paper); }
  .starthere-item .si-num{ font-family:var(--mono); font-size:13px; color:var(--accent); flex-shrink:0; width:26px; }
  .starthere-item .si-title{ font-family:var(--serif); font-size:20px; flex-shrink:0; width:220px; }
  .starthere-item .si-desc{ font-size:14.5px; color:var(--muted); }
  .starthere-item:hover .si-title{ color:var(--accent-dim); }
  @media (max-width:700px){
    .starthere-item{ flex-wrap:wrap; }
    .starthere-item .si-title{ width:auto; }
  }