@font-face {
    font-family: "Geist";
    src: url("fonts/geist.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
  }
  @font-face {
    font-family: "Geist Mono";
    src: url("fonts/geist-mono.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
  }
  :root {
    --bg: #FBFBFA;
    --surface: #FFFFFF;
    --surface-warm: #F7F6F3;
    --ink: #111111;
    --body: #2F3437;
    --muted: #787774;
    --border: #EAEAEA;
    --green-tx: #346538;
    --yellow-tx: #956400;
    --red-tx: #9F2F2D;
    --blue-tx: #1F6C9F;
    --sans: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;
    --mono: "Geist Mono", "SF Mono", ui-monospace, Menlo, monospace;
    --hairline: rgba(17, 17, 17, 0.07);
    --radius: 12px;
    --ease: cubic-bezier(0.32, 0.72, 0, 1);
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--body);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
  }
  ::selection { background: var(--border); }

  main, nav, footer { position: relative; z-index: 1; }

  .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
  .narrow { max-width: 720px; margin: 0 auto; }

  /* ---------- Nav ---------- */
  nav {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 50;
    background: var(--bg);
    border-bottom: 1px solid var(--hairline);
    white-space: nowrap;
  }
  .nav-inner {
    position: relative;
    max-width: 1120px; margin: 0 auto; padding: 13px 24px;
    display: flex; align-items: center; gap: 30px;
  }
  .nav-inner .btn.small { margin-left: auto; }
  .wordmark { font-family: var(--mono); font-size: 16px; font-weight: 600; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
  .nav-links {
    display: flex; align-items: center; gap: 26px;
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  }
  .nav-links a.plain { color: var(--body); text-decoration: none; font-size: 14px; transition: color 300ms var(--ease); display: inline-block; padding: 6px 0; }
  .nav-links a.plain:hover { color: var(--ink); }
  /* ---------- Buttons ---------- */
  .btn {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--ink); color: #FFFFFF;
    border: none; border-radius: 9999px;
    padding: 11px 12px 11px 24px;
    font-family: var(--sans); font-size: 15px; font-weight: 500;
    text-decoration: none; cursor: pointer;
    transition: background 400ms var(--ease), transform 300ms var(--ease);
    white-space: nowrap;
  }
  .btn .arrow {
    width: 27px; height: 27px; flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.16);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; line-height: 1;
    transition: transform 500ms var(--ease), background 400ms var(--ease);
  }
  .btn:hover { background: #2A2A28; }
  .btn:hover .arrow { transform: translate(2px, -2px); background: rgba(255,255,255,0.24); }
  .btn:active { transform: scale(0.98); }
  .btn.small { padding: 8px 9px 8px 18px; font-size: 14px; }
  .btn.small .arrow { width: 24px; height: 24px; font-size: 11px; }

  .textlink {
    color: var(--ink); font-size: 15px; text-decoration: none;
    border-bottom: 1px solid var(--border);
    padding-bottom: 1px;
    transition: border-color 180ms ease;
    white-space: nowrap;
  }
  .textlink:hover { border-color: var(--ink); }

  /* ---------- Type ---------- */
  h1 {
    color: var(--ink);
    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.06;
    letter-spacing: -0.045em;
    font-weight: 640;
    text-wrap: balance;
  }
  h2 {
    color: var(--ink);
    font-size: clamp(27px, 3.3vw, 40px);
    line-height: 1.12;
    letter-spacing: -0.035em;
    font-weight: 630;
    text-wrap: balance;
  }
  h3 { color: var(--ink); font-size: 18px; letter-spacing: -0.01em; font-weight: 600; }
  .sub { color: var(--muted); font-size: 17px; max-width: 54ch; text-wrap: pretty; }
  .eyebrow {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 16px;
  }

  /* ---------- Semantic state text (colored text only, never a filled badge) ---------- */
  .v { font-weight: 500; }
  .v.positive { color: var(--green-tx); }
  .v.negative { color: var(--red-tx); }
  .v.caution  { color: var(--yellow-tx); }
  .v.info     { color: var(--blue-tx); }

  /* ---------- Hero ---------- */
  .hero {
    position: relative;
    display: flex; flex-direction: column; justify-content: center;
    min-height: 100dvh;
    padding: 96px 0 96px;
  }
  .hero-top { margin-bottom: 36px; text-align: center; }
  .hero-top .eyebrow { margin-bottom: 22px; }
  .hero-top h1 { font-size: clamp(40px, 5.2vw, 72px); }
  .hero-copy { text-align: center; }
  .hero-copy .sub { font-size: 18px; max-width: 52ch; margin: 0 auto 34px; }
  .hero-cta {
    display: flex; align-items: center; justify-content: center;
    gap: 22px; flex-wrap: wrap; margin-bottom: 20px;
  }
  .hero-copy .form-note { max-width: 60ch; margin: 0 auto; line-height: 1.7; }

  /* Stacked hero: centered text, wide composer image below (skills stay legible) */
  .hero-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 52px;
    /* .hero centers its children, which would shrink this to its content width.
       Force it to fill the full container so the media matches the nav width. */
    width: 100%;
    align-self: stretch;
  }
  .hero-lead { max-width: 780px; }
  .hero-lead .hero-top,
  .hero-lead .hero-copy { text-align: center; }
  .hero-lead .hero-top h1 { white-space: normal; }
  .hero-lead .hero-copy .sub,
  .hero-lead .hero-copy .form-note { margin-left: auto; margin-right: auto; }
  .hero-lead .hero-cta { justify-content: center; }

  .hero-media { margin: 0; width: 100%; min-width: 0; }
  .hero-frame {
    position: relative; width: 100%;
    aspect-ratio: 1480 / 760;
    border-radius: var(--radius); overflow: hidden;
    border: 1px solid var(--border);
  }
  .hero-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 50%;
    display: block;
  }
  .hero-credit {
    margin-top: 12px;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
    color: var(--muted);
  }
  .hero-credit a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
  .hero-credit a:hover { color: var(--ink); }
  .capture { display: flex; gap: 10px; max-width: 440px; }
  .capture input[type="email"] {
    flex: 1; min-width: 0;
    border: 1px solid var(--hairline); border-radius: var(--radius);
    background: var(--surface);
    padding: 12px 20px; font-size: 15px; font-family: var(--sans);
    color: var(--ink);
  }
  .capture input[type="email"]::placeholder { color: var(--muted); }
  .capture input[type="email"]:focus {
    outline: 2px solid var(--ink); outline-offset: -1px; border-color: var(--ink);
  }
  .after-capture { margin-top: 16px; font-size: 15px; }
  .after-capture a { margin-left: 0; }
  .form-note { font-size: 13px; color: var(--muted); margin-top: 10px; }
  .form-done {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1 1 100%;
    padding: 6px 0;
    color: var(--green-tx);
    animation: form-done-in 0.45s var(--ease) both;
  }
  .form-done svg { flex: none; margin-top: 3px; }
  .form-done span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .form-done strong { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
  .form-done em { font-style: normal; font-size: 13px; color: var(--body); }
  @keyframes form-done-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .form-done { animation: none; }
  }

  /* ---------- Sample output: typographic document ---------- */
  .sample-doc {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 36px 40px 40px;
  }
  .doc-eyebrow {
    display: block;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--muted);
  }
  .doc-rule { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }
  .doc-sub { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 8px; }

  /* Input the founder pasted */
  .doc-input-text {
    margin-top: 12px; color: var(--body);
    font-size: 15px; line-height: 1.7;
  }
  .paste-tag { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }

  /* Latency line between input and output */
  .doc-latency {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--muted);
    margin: 26px 0;
    padding-top: 26px; border-top: 1px solid var(--border);
  }

  /* The memo document (also the trigger that opens the full memo) */
  .memo-doc {
    display: block; width: 100%; text-align: left;
    font-family: var(--mono); font-size: 13px; line-height: 1.7;
    color: var(--body);
  }
  .memo-verdict { margin-top: 14px; color: var(--ink); }
  .memo-verdict .v { font-weight: 500; }

  /* Scores: two columns, hairline rules between rows. No bars, badges, stars. */
  .score-list { margin-top: 18px; }
  .score-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
    padding: 10px 0; border-bottom: 1px solid var(--border);
  }
  .score-row:first-child { border-top: 1px solid var(--border); }
  .score-row .s-main { min-width: 0; }
  .score-row .s-cat { color: var(--ink); font-weight: 500; }
  .score-row .s-basis { color: var(--muted); }
  .score-row .s-basis::before { content: "·"; margin: 0 7px 0 8px; }
  .score-row .s-num {
    color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums;
    flex-shrink: 0;
  }
  .score-row.score-total .s-cat,
  .score-row.score-total .s-num { color: var(--ink); font-weight: 600; }

  /* Flags and gaps use semantic text colour only. */
  .memo-line {
    margin-top: 16px;
  }
  .memo-line.flag { color: var(--red-tx); }
  .memo-line.gap  { color: var(--yellow-tx); }
  .memo-line.note { color: var(--blue-tx); }

  /* "Open the full memo" affordance */
  .doc-more {
    display: flex; align-items: center; gap: 7px;
    margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--border);
    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  }
  .doc-more .mm-caret { margin-left: auto; transition: transform 300ms var(--ease); }

  /* Full-memo table inside the modal document */
  .score-table {
    border-collapse: collapse; width: 100%; margin: 4px 0 0;
    font-variant-numeric: tabular-nums;
  }
  .score-table th, .score-table td {
    text-align: left; padding: 8px 12px 8px 0;
    border-bottom: 1px solid var(--border);
    font-weight: 400; vertical-align: top;
  }
  .score-table th {
    color: var(--muted); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  .score-table td:first-child { white-space: nowrap; }
  .score-table td.num, .score-table th.ta-r { text-align: right; }
  .score-table td.num { color: var(--ink); font-weight: 500; }
  .score-table tr.total-row td { color: var(--ink); font-weight: 600; border-bottom: none; }

  /* Cookie consent */
  .consent {
    position: fixed; right: 20px; bottom: 20px; z-index: 70;
    width: min(400px, calc(100vw - 40px));
    background: var(--bg);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    padding: 24px;
    opacity: 0; transform: translateY(16px); pointer-events: none;
    transition: opacity 600ms var(--ease), transform 600ms var(--ease);
  }
  .consent.show { opacity: 1; transform: none; pointer-events: auto; }
  .consent h3 { font-size: 16px; margin-bottom: 8px; }
  .consent p { font-size: 13.5px; color: var(--muted); line-height: 1.55; }
  .consent p a { color: var(--body); }
  .consent-actions { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
  .consent .btn.small { padding: 8px 18px; }
  .consent .btn-ghost {
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--hairline); border-radius: var(--radius);
    padding: 8px 18px; font-family: var(--sans); font-size: 14px; font-weight: 500;
    cursor: pointer;
    transition: background 300ms var(--ease);
  }
  .consent .btn-ghost:hover { background: var(--surface-warm); }
  .consent .textlink { font-size: 13.5px; cursor: pointer; background: none; border: none; border-bottom: 1px solid var(--border); padding: 0 0 1px; font-family: var(--sans); color: var(--ink); }
  .consent-prefs { display: none; margin-top: 16px; border-top: 1px solid var(--border); padding-top: 4px; }
  .consent-prefs.open { display: block; }
  .consent-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); }
  .consent-row .l b { display: block; font-size: 13.5px; color: var(--ink); font-weight: 600; }
  .consent-row .l span { font-size: 12.5px; color: var(--muted); }
  .consent-row .state { font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
  .consent-row input[type="checkbox"] { accent-color: var(--ink); width: 16px; height: 16px; cursor: pointer; }
  @media (prefers-reduced-motion: reduce) { .consent { transition: none; } }

  /* FAQ accordion */
  .faq { border-top: 1px solid var(--border); }
  .faq details { border-bottom: 1px solid var(--border); }
  .faq summary {
    list-style: none; cursor: pointer;
    padding: 22px 0;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    color: var(--ink); font-weight: 600; font-size: 17px; letter-spacing: -0.01em;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: "+"; font-family: var(--mono); font-size: 18px;
    color: var(--muted); flex-shrink: 0;
  }
  .faq details[open] summary::after { content: "\2212"; }
  .faq .a { padding: 0 0 24px; color: var(--muted); font-size: 15px; max-width: 62ch; }

  /* ---------- Sections ---------- */
  section { padding: 108px 0; scroll-margin-top: 40px; }
  section.tight { padding: 80px 0; }
  .tier[id] { scroll-margin-top: 110px; }
  .section-head { margin-bottom: 56px; }
  .section-head .sub { margin-top: 14px; }

  /* Steps */
  .steps { border-top: 1px solid var(--border); }
  .step {
    display: grid; grid-template-columns: 72px minmax(0,1fr) minmax(0,1.4fr);
    gap: 32px; padding: 32px 0;
    border-bottom: 1px solid var(--border);
    align-items: baseline;
  }
  .step .n { font-family: var(--mono); font-size: 13px; color: var(--muted); }
  .step p { color: var(--muted); font-size: 15px; }

  /* How-it-works: image cards */
  .how-cards {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  }
  .how-card { margin: 0; }
  .how-shot {
    border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden; background: var(--surface-warm);
    aspect-ratio: 16 / 11;
  }
  .how-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .how-card figcaption { padding-top: 20px; }
  .how-card .n { font-size: 15px; font-weight: 700; color: var(--ink); display: block; margin-bottom: 8px; }
  .how-card h3 { margin-bottom: 8px; }
  .how-card p { color: var(--muted); font-size: 15px; }
  #how .bb-close { text-align: center; max-width: 60ch; margin-left: auto; margin-right: auto; }

  /* Library */
  .lib-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px;
    border-top: 1px solid var(--border);
    padding-top: 40px;
  }
  .lib-item .n { font-family: var(--mono); font-size: 12px; color: var(--muted); display: block; margin-bottom: 14px; }
  .lib-item h3 { margin-bottom: 8px; }
  .lib-item p { color: var(--muted); font-size: 15px; }

  /* Backbone: one spine, first look to portfolio */
  .bb-intro { max-width: 62ch; margin-bottom: 8px; }
  .backbone { border-top: 1px solid var(--border); }
  .bb-stage {
    display: grid; grid-template-columns: 210px minmax(0, 1fr);
    gap: 40px; padding: 30px 0;
    border-bottom: 1px solid var(--border);
    align-items: baseline;
  }
  .bb-label { display: flex; align-items: baseline; gap: 14px; }
  .bb-label .bb-n { font-family: var(--mono); font-size: 13px; color: var(--muted); }
  .bb-label h3 { font-size: 20px; }
  .bb-skills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
  .bb-skills code {
    font-family: var(--mono); font-size: 12.5px; color: var(--body);
    background: transparent; border: 0;
    border-radius: 0; padding: 0; white-space: nowrap;
  }
  .bb-line { color: var(--muted); font-size: 15px; max-width: 62ch; }
  .bb-line + .bb-line { margin-top: 4px; }
  .bb-line b {
    color: var(--ink); font-family: var(--mono); font-size: 11px;
    letter-spacing: 0.07em; text-transform: uppercase; font-weight: 600;
    margin-right: 9px;
  }
  .bb-close {
    margin-top: 36px; color: var(--muted); font-size: 15px; max-width: 66ch;
    line-height: 1.7;
  }
  .bb-close .textlink { font-size: 15px; }

  /* Advantages: center-glow grid with a dashed cross */
  .section-head.centered { text-align: center; }
  .section-head.centered .sub { margin-left: auto; margin-right: auto; }
  .glow { position: relative; border-radius: 16px; isolation: isolate; }
  .glow .grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    position: relative; z-index: 1;
  }
  .glow .cell { padding: clamp(32px, 4vw, 46px) clamp(32px, 4vw, 50px); }
  .glow .n { font-family: var(--mono); font-size: 12px; color: var(--muted); display: block; margin-bottom: 14px; }
  .glow h3 { font-size: 18px; margin-bottom: 8px; }
  .glow p { color: var(--muted); font-size: 15px; max-width: 42ch; }
  .glow kbd { white-space: nowrap; }
  /* radial wash: warm at the center, fades out to the page color */
  .glow::before {
    content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit;
    background: radial-gradient(70% 64% at 50% 50%, #F1EFE8 0%, #F6F4EF 40%, var(--bg) 80%);
  }
  /* solid cross that meets in the middle and fades out at both ends */
  .glow .grid::before {
    content: ""; position: absolute; left: 50%; top: 7%; bottom: 7%;
    width: 1px; transform: translateX(-0.5px);
    background: linear-gradient(to bottom, transparent 0%, rgba(17,17,17,0.18) 14%, rgba(17,17,17,0.18) 86%, transparent 100%);
  }
  .glow .grid::after {
    content: ""; position: absolute; top: 50%; left: 7%; right: 7%;
    height: 1px; transform: translateY(-0.5px);
    background: linear-gradient(to right, transparent 0%, rgba(17,17,17,0.18) 14%, rgba(17,17,17,0.18) 86%, transparent 100%);
  }
  kbd {
    font-family: var(--mono); font-size: 12px;
    border: 1px solid var(--border); border-radius: 4px;
    background: var(--surface); padding: 2px 7px; color: var(--body);
  }

  /* Pricing */
  .tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .tier {
    border: 1px solid var(--hairline); border-radius: var(--radius);
    background: var(--surface); padding: 40px 36px;
    display: flex; flex-direction: column;
    transition: transform 500ms var(--ease);
  }
  .tier:hover { transform: translateY(-3px); }
  .tier.lead {
    background: var(--ink); border-color: var(--ink);
  }
  .tier.lead h3, .tier.lead .price { color: #FFFFFF; }
  .tier.lead p { color: #B8B6B2; }
  .tier .price {
    font-family: var(--mono); font-size: 14px; color: var(--muted);
    margin: 6px 0 18px;
  }
  .tier h3 { font-size: 20px; }
  .tier p { color: var(--muted); font-size: 15px; flex: 1; }
  .tier .cta { margin-top: 28px; }
  .tier.lead .btn { background: #FFFFFF; color: var(--ink); box-shadow: none; }
  .tier.lead .btn:hover { background: #EDECEA; }
  .tier.lead .btn .arrow { background: rgba(17,17,17,0.08); }
  .no-strings {
    margin-top: 40px;
    font-size: 15px; color: var(--muted);
    max-width: 62ch;
  }

  /* Final CTA */
  .final {
    text-align: center;
    padding: 56px 0;
    background: var(--surface-warm);
    border-top: 1px solid var(--hairline);
  }
  .final h2 { margin: 0 auto 16px; max-width: 22ch; }
  .final .sub { margin: 0 auto 36px; }
  .final .capture { margin: 0 auto; }
  .final .after-capture { margin-top: 20px; }
  .final-cta { margin-bottom: 36px; }
  .final-cta.compact { margin-bottom: 8px; }
  .sample-note { margin-top: 20px; }
  .final-note { margin-top: 16px; }

  /* Footer */
  footer {
    border-top: 1px solid var(--border);
    padding: 40px 0;
    font-size: 13px; color: var(--muted);
  }
  .foot-inner { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
  .foot-inner .wordmark { font-size: 15px; }
  .foot-inner, .foot-links { font-family: var(--mono); }
  .foot-links { display: flex; gap: 16px; flex-wrap: wrap; }
  .foot-links a { color: var(--muted); text-decoration: none; }
  .foot-links a:hover { color: var(--ink); }

  /* Reveal animation (only hidden when JS is running, so no-JS still renders) */
  html.js .reveal {
    opacity: 0; transform: translateY(18px);
    transition: opacity 800ms var(--ease), transform 800ms var(--ease);
  }
  html.js .reveal.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    html.js .reveal { opacity: 1; transform: none; filter: none; transition: none; }
    html { scroll-behavior: auto; }
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 900px) {
    .lib-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
    .tiers { grid-template-columns: 1fr; }
    .glow .grid { grid-template-columns: 1fr; }
    .glow .grid::before, .glow .grid::after { display: none; }
    .glow .cell { border-bottom: 1px solid var(--hairline); }
    .glow .cell:last-child { border-bottom: 0; }
    .step { grid-template-columns: 48px 1fr; }
    .step p { grid-column: 2; }
    .how-cards { grid-template-columns: 1fr; gap: 40px; max-width: 460px; margin: 0 auto; }
    /* Stack the hero: text first, image below, back to centered */
    .hero-grid { grid-template-columns: 1fr; gap: 36px; }
    .hero-lead { order: 1; }
    .hero-media { order: 2; }
    .hero-lead .hero-top,
    .hero-lead .hero-copy { text-align: center; }
    .hero-lead .hero-copy .sub,
    .hero-lead .hero-copy .form-note { margin-left: auto; margin-right: auto; }
    .hero-lead .hero-cta { justify-content: center; }
    /* Let the forced two-line headline wrap instead of overflowing on narrow screens */
    .hero-lead .hero-top h1 { white-space: normal; }
    .hero-frame { aspect-ratio: 1480 / 760; }
  }
  @media (max-width: 560px) {
    section { padding: 64px 0; }
    .hero { min-height: 100dvh; padding: 96px 0 64px; }
    .capture { flex-direction: column; }
    .capture .btn { justify-content: space-between; }
    .nav-links { display: none; }
    .nav-inner { gap: 14px; padding: 10px 18px; }
    .lib-grid { grid-template-columns: 1fr; }
    .hero-copy .form-note br { display: none; }
    .sample-doc { padding: 26px 22px 30px; }
    .modal-card .modal-doc { padding: 26px 22px 30px; }
    .score-table { font-size: 12px; }
    .score-table th:nth-child(2), .score-table td:nth-child(2) { display: none; }
  }

  /* ---------- Sub-page hero (library, contact) ---------- */
  .page-hero { padding: 152px 0 24px; }
  .page-hero .eyebrow { margin-bottom: 18px; }
  .page-hero h1 { font-size: clamp(36px, 4.6vw, 60px); }
  .page-hero .sub { font-size: 18px; margin-top: 18px; max-width: 60ch; }
  .page-hero .hero-cta { justify-content: flex-start; margin: 30px 0 6px; }
  .back-link {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--muted); text-decoration: none;
    margin-bottom: 28px; transition: color 300ms var(--ease);
  }
  .back-link:hover { color: var(--ink); }

  /* ---------- Library page: per-workflow detail ---------- */
  .stage-group { padding: 56px 0; border-bottom: 1px solid var(--border); }
  .library-stages { padding-top: 24px; }
  .stage-group:last-of-type { border-bottom: none; }
  .stage-group > .stage-head {
    display: flex; align-items: baseline; gap: 16px; margin-bottom: 32px;
  }
  .stage-group .stage-head .bb-n { font-family: var(--mono); font-size: 13px; color: var(--muted); }
  .stage-group .stage-head h2 { font-size: 28px; }
  .stage-group .stage-head .stage-note { color: var(--muted); font-size: 15px; }
  .skill-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .skill-card {
    border: 1px solid var(--hairline); border-radius: var(--radius);
    background: var(--surface); padding: 30px 30px 32px;
    transition: transform 500ms var(--ease);
  }
  .skill-card:hover { transform: translateY(-3px); }
  .skill-card code {
    display: inline-block; font-family: var(--mono); font-size: 12.5px; color: var(--body);
    background: transparent; border: 0;
    border-radius: 0; padding: 0; margin-bottom: 16px;
  }
  .skill-card h3 { font-size: 18px; margin-bottom: 8px; }
  .skill-card p { color: var(--muted); font-size: 15px; }
  .skill-card .sc-line { margin-top: 14px; font-size: 14.5px; color: var(--muted); }
  .skill-card .sc-line b {
    display: block; color: var(--ink); font-family: var(--mono); font-size: 10.5px;
    letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; margin-bottom: 2px;
  }

  /* ---------- Contact form ---------- */
  .form-card {
    background: var(--surface); border: 1px solid var(--hairline);
    border-radius: var(--radius); padding: clamp(28px, 4vw, 48px);
  }
  .field { margin-bottom: 26px; }
  .field > label, .field > .label {
    display: block; font-size: 14px; font-weight: 600; color: var(--ink);
    letter-spacing: -0.01em; margin-bottom: 9px;
  }
  .field .hint { font-weight: 400; color: var(--muted); font-size: 13px; margin-left: 6px; }
  .field input[type="text"], .field input[type="email"], .field select, .field textarea {
    width: 100%; font-family: var(--sans); font-size: 15px; color: var(--ink);
    background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--radius);
    padding: 12px 15px;
    transition: border-color 200ms var(--ease), outline-color 200ms var(--ease);
  }
  .field textarea { resize: vertical; min-height: 108px; line-height: 1.6; }
  .field select { appearance: none; -webkit-appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23787774' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
  .field input:focus, .field select:focus, .field textarea:focus {
    outline: 2px solid var(--ink); outline-offset: 2px; border-color: var(--ink);
  }
  .field input::placeholder, .field textarea::placeholder { color: var(--muted); }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .check {
    display: flex; align-items: flex-start; gap: 11px;
    border: 1px solid var(--hairline); border-radius: var(--radius); padding: 13px 15px;
    cursor: pointer; background: var(--bg);
    transition: border-color 200ms var(--ease), background 200ms var(--ease);
  }
  .check:hover { border-color: rgba(17,17,17,0.2); }
  .check:has(input:checked) { border-color: var(--ink); background: var(--surface); }
  .check input { accent-color: var(--ink); width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; cursor: pointer; }
  .check span { font-size: 14.5px; color: var(--body); }
  .check b { display: block; font-weight: 600; color: var(--ink); font-size: 14.5px; }
  .form-submit { margin-top: 8px; }
  .form-reassure { margin-top: 22px; font-size: 14px; color: var(--muted); line-height: 1.7; max-width: 58ch; }

  .contact-page .contact-fit {
    min-height: 100dvh;
    padding: 104px 0 34px;
  }
  .contact-wrap { max-width: 960px; }
  .contact-page .back-link { margin-bottom: 18px; }
  .contact-page .form-card { padding: 26px 28px 24px; }
  .scope-card-head {
    margin-bottom: 22px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
  }
  .scope-card-head h1 { font-size: clamp(32px, 3vw, 40px); max-width: none; }
  .contact-page .field { margin-bottom: 14px; }
  .contact-page .field > label,
  .contact-page .field > .label { margin-bottom: 6px; font-size: 13.5px; }
  .contact-page .field input[type="text"],
  .contact-page .field input[type="email"],
  .contact-page .field select,
  .contact-page .field textarea { padding: 9px 12px; font-size: 14.5px; }
  .contact-page .field textarea { min-height: 58px; }
  .contact-page .field-row { gap: 14px; }
  .contact-page .checks { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .contact-page .check { gap: 8px; padding: 9px 10px; min-height: 64px; }
  .contact-page .check input { width: 15px; height: 15px; }
  .contact-page .check span,
  .contact-page .check b { font-size: 13.5px; line-height: 1.25; }
  .contact-page .check span { font-size: 13px; line-height: 1.35; }
  .contact-page .form-submit { margin-top: 4px; }
  .scope-alt { margin-top: 18px; text-align: center; }

  @media (max-width: 980px) {
    .contact-page .contact-fit { padding: 104px 0 70px; }
    .contact-page .checks { grid-template-columns: 1fr 1fr; }
    .scope-alt { margin-top: 22px; text-align: center; }
  }

  @media (max-width: 700px) {
    .skill-grid { grid-template-columns: 1fr; }
    .field-row { grid-template-columns: 1fr; }
    .checks { grid-template-columns: 1fr; }
  }

  /* ---------- Library page: wider layout, no fade ---------- */
  .lib-page .wrap { max-width: 1340px; }
  .lib-page .page-hero .sub { max-width: 76ch; }
  .lib-page .final .sub { max-width: 60ch; }
  .skill-grid.single { grid-template-columns: 1fr; }
  .skill-card.wide {
    display: grid; grid-template-columns: 1.25fr 1fr;
    gap: 48px; align-items: center;
  }
  .skill-card.wide .sc-main p { max-width: 46ch; }
  .skill-card.wide .sc-lines .sc-line:first-child { margin-top: 0; }
  @media (max-width: 760px) {
    .skill-card.wide { grid-template-columns: 1fr; gap: 0; }
    .skill-card.wide .sc-lines .sc-line:first-child { margin-top: 14px; }
  }

  /* ---------- Claude output: tool steps + click-to-expand memo ---------- */
  .tool-steps {
    display: flex; flex-direction: column; gap: 12px;
    margin-bottom: 18px; padding-left: 2px; max-width: 88%;
  }
  .tool-step {
    display: flex; align-items: center; gap: 11px;
    font-size: 14px; color: var(--muted); line-height: 1.45;
  }
  .tool-step .ts-ico { width: 15px; height: 15px; flex-shrink: 0; }

  /* ---------- Sample: document width + click-to-open memo + modal ---------- */
  .sample-wrap { max-width: 820px; }

  /* memo document is a button that opens the full memo in a modal */
  .memo-trigger {
    -webkit-appearance: none; appearance: none;
    background: none; border: none; cursor: pointer;
    transition: none;
  }
  .memo-trigger:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
  .memo-trigger:hover .doc-more { color: var(--ink); }
  .memo-trigger:hover .doc-more .mm-caret { transform: translate(2px, -2px); }

  /* modal overlay */
  .modal-overlay {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background: rgba(17,17,17,0.42);
    opacity: 0; transition: opacity 300ms var(--ease);
  }
  .modal-overlay.show { opacity: 1; }
  .modal-overlay[hidden] { display: none; }
  .modal-card {
    position: relative; width: 100%; max-width: 640px; max-height: 86vh;
    display: flex;
    transform: translateY(14px) scale(0.985);
    transition: transform 380ms var(--ease);
  }
  .modal-overlay.show .modal-card { transform: none; }
  .modal-card .modal-doc {
    width: 100%; overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 36px 40px 40px;
  }
  .modal-close {
    position: absolute; top: 12px; right: 14px; z-index: 2;
    width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(17,17,17,0.06); color: var(--body);
    font-size: 20px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background 200ms var(--ease);
  }
  .modal-close:hover { background: rgba(17,17,17,0.12); }
  @media (prefers-reduced-motion: reduce) {
    .modal-overlay, .modal-card { transition: none; }
  }

  /* Booking pop-up: the Google appointment page inside the site modal. */
  .booking-card { max-width: 780px; height: min(720px, 90vh); max-height: none; }
  .booking-frame-wrap {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden;
  }
  .booking-frame { width: 100%; height: 100%; border: 0; display: block; }
  @media (max-width: 640px) {
    .booking-overlay { padding: 10px; }
    .booking-card { height: 94vh; }
  }

  /* ---------- Footer tagline (v2) ---------- */
  .foot-brand { display: flex; flex-direction: column; gap: 8px; }
  .foot-tag { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: 0.01em; }

  /* ---------- Library shelf: filter row + skill cards (v2) ---------- */
  .library-shelf { padding-top: 8px; }
  .lib-filter {
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px;
    padding-bottom: 28px; margin-bottom: 36px;
    border-bottom: 1px solid var(--border);
  }
  .filter-group { display: flex; flex-wrap: wrap; gap: 8px; }
  .filter-group + .filter-group { position: relative; }
  .chip {
    font-family: var(--sans); font-size: 13.5px; line-height: 1;
    color: var(--body); background: var(--surface);
    border: 1px solid var(--hairline); border-radius: 9999px;
    padding: 8px 15px; cursor: pointer;
    transition: border-color 200ms var(--ease), background 200ms var(--ease), color 200ms var(--ease);
  }
  .chip:hover { border-color: rgba(17,17,17,0.22); }
  .chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .chip.is-active { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
  .chip:disabled { opacity: 0.35; cursor: default; }
  .chip:disabled:hover { border-color: var(--hairline); }

  .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  /* The card: opaque surface, one radius, stacked slots, footer pinned to the
     bottom so equal-height cards in a grid never grow dead space above it. */
  .card {
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--hairline); border-radius: var(--radius);
    overflow: hidden;
    transition: transform 500ms var(--ease), border-color 300ms var(--ease);
  }
  .card:hover { transform: translateY(-3px); border-color: rgba(17,17,17,0.14); }
  .card-media {
    aspect-ratio: 16 / 7;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(120% 120% at 30% 20%, #EAF1F7 0%, #F6F4EF 72%);
    border-bottom: 1px solid var(--hairline);
  }
  .card-glyph { font-family: var(--mono); font-size: 15px; color: var(--blue-tx); letter-spacing: -0.01em; }
  .card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 22px 24px 0;
  }
  .card-title { font-size: 18px; }
  .card-badge {
    font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
    padding: 3px 9px; border-radius: 9999px; border: 1px solid var(--hairline);
    color: var(--muted); white-space: nowrap;
  }
  .card-badge.original { color: var(--green-tx); border-color: rgba(52,101,56,0.32); }
  .card-badge.verified { color: var(--blue-tx); border-color: rgba(31,108,159,0.32); }
  .card-body { padding: 10px 24px 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
  .card-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
    padding: 16px 24px 0;
    font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.01em;
  }
  .card-meta .dot { opacity: 0.55; }
  .card-foot {
    margin-top: auto;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
    padding: 22px 24px;
  }
  /* Per-card download gate: skill name travels as a hidden field. */
  .dl-form { display: flex; gap: 8px; flex: 1 1 100%; min-width: 0; }
  .dl-form .dl-email {
    flex: 1; min-width: 0;
    border: 1px solid var(--hairline); border-radius: var(--radius);
    background: var(--surface);
    padding: 8px 14px; font-size: 13.5px; font-family: var(--sans);
    color: var(--ink);
  }
  .dl-form .dl-email::placeholder { color: var(--muted); }
  .dl-form .dl-email:focus {
    outline: 2px solid var(--ink); outline-offset: -1px; border-color: var(--ink);
  }
  .dl-form .btn.small { white-space: nowrap; }
  .lib-empty { text-align: center; margin-top: 36px; }

  /* Deep-linkable cards, delivery note, expandable details (v3) */
  .card[id] { scroll-margin-top: 110px; }
  .lib-note { margin: -16px 0 32px; }
  button.card-toggle {
    appearance: none; background: none; border: none; cursor: pointer;
    font-family: var(--sans); border-bottom: 1px solid var(--border); padding: 0 0 1px;
  }
  .card-details { padding: 18px 24px 2px; }
  .card-details .cd-line { margin-top: 12px; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
  .card-details .cd-line:first-child { margin-top: 0; }
  .card-details .cd-line b {
    display: block; color: var(--ink); font-family: var(--mono); font-size: 10.5px;
    letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; margin-bottom: 2px;
  }

  /* Library modal: the card itself moves into a full-screen details view (v3) */
  .lib-modal {
    position: fixed; inset: 0; z-index: 90;
    display: flex; align-items: center; justify-content: center;
    background: rgba(24,22,18,0.34);
    -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 240ms var(--ease), visibility 0s linear 240ms;
  }
  .lib-modal.is-open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity 240ms var(--ease);
  }
  /* Fixed-size slot: the popup never resizes between cards; long content
     scrolls inside the card, short content stretches (footer pins bottom). */
  /* The slot doubles as the mat: a padded paper frame around the card. */
  .lib-modal-slot {
    width: min(92vw, 520px); height: min(88vh, 648px);
    background: #FBFAF8; padding: 16px;
    border: 1px solid rgba(17,17,17,0.16);
    border-radius: calc(var(--radius) + 16px);
    box-shadow: 0 34px 100px rgba(20,18,14,0.38);
    transform: translateY(10px) scale(0.985);
    transition: transform 240ms var(--ease);
  }
  .lib-modal.is-open .lib-modal-slot { transform: none; }
  /* Sized so the tallest card's content fits with no scrolling (measured
     613px at 488px wide). The scrollbar is hidden either way; on very short
     viewports the card can still be scrolled invisibly. */
  .lib-modal-slot .card, .lib-modal-slot .card:hover {
    transform: none; height: 100%; overflow-y: auto; overscroll-behavior: contain;
    border: 1px solid var(--hairline);
    scrollbar-width: none;
  }
  .lib-modal-slot .card::-webkit-scrollbar { display: none; }
  /* Slim header (option D): the glyph band becomes a compact command row so
     the content and the email form sit high in the popup. */
  .lib-modal-slot .card-media { aspect-ratio: auto; flex: none; padding: 14px 24px; justify-content: flex-start; }
  .lib-modal-slot .card-glyph { font-size: 13px; }
  .lib-modal-slot .card-toggle { display: none; }
  .lib-modal-slot .card-badge { display: none; }
  /* In the modal the changelog reads as a quiet footnote, and a reassurance
     line sits directly above the email form, where the decision happens. */
  .lib-modal-slot .card-details { padding: 14px 24px 0; }
  .lib-modal-slot .card-details .cd-line { margin-top: 10px; }
  .lib-modal-slot .card-details .cd-line:last-child { font-size: 12px; opacity: 0.75; }
  .lib-modal-slot .card-foot { padding: 18px 24px 20px; }
  .lib-modal-slot .card-foot::before {
    content: "Free. The skill arrives in your inbox as a folder with install instructions.";
    flex: 1 1 100%; font-size: 12.5px; color: var(--muted);
  }
  .card-ghost { visibility: hidden; }
  .lib-modal-nav, .lib-modal-close {
    position: fixed; z-index: 2; appearance: none; cursor: pointer;
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--hairline); background: var(--surface); color: var(--ink);
    font-size: 17px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: transform 200ms var(--ease), border-color 200ms var(--ease);
  }
  .lib-modal-nav:hover, .lib-modal-close:hover { border-color: rgba(17,17,17,0.34); transform: scale(1.06); }
  .lib-modal-nav:focus-visible, .lib-modal-close:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
  .lib-modal-nav.prev { left: max(14px, calc(50vw - 260px - 74px)); top: 50%; margin-top: -22px; }
  .lib-modal-nav.next { right: max(14px, calc(50vw - 260px - 74px)); top: 50%; margin-top: -22px; }
  .lib-modal-close { top: 20px; right: 20px; }
  .lib-modal-count {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em;
    color: #FFFFFF; opacity: 0.82;
  }
  @media (max-width: 780px) {
    .lib-modal-slot { max-height: 80vh; }
    .lib-modal-nav.prev { left: 10px; top: auto; bottom: 14px; margin-top: 0; }
    .lib-modal-nav.next { right: 10px; top: auto; bottom: 14px; margin-top: 0; }
  }

  @media (max-width: 900px) {
    .card-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 560px) {
    .card-grid { grid-template-columns: 1fr; }
    .lib-filter { gap: 12px 16px; }
  }

  /* ---------- Proof: pick your seat ---------- */
  #memo .sub strong { color: var(--ink); font-weight: 500; }
  .seat-tabs { display: flex; justify-content: center; gap: 6px; margin: -16px 0 14px; }
  .seat-tab {
    appearance: none; border: none; background: transparent;
    font: 500 15px var(--sans); color: var(--muted);
    padding: 10px 20px; border-radius: 999px; cursor: pointer;
    transition: background 200ms var(--ease), color 200ms var(--ease); white-space: nowrap;
  }
  .seat-tab:hover { color: var(--ink); }
  .seat-tab[aria-selected="true"] { background: #EFEDE7; color: var(--ink); }
  .seat-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

  .seat-recognition {
    text-align: center; font-family: Georgia, "Times New Roman", serif; font-style: italic;
    font-size: 17px; color: var(--muted); min-height: 26px;
    margin: 0 0 28px; transition: opacity 250ms var(--ease);
  }

  .seat-panel {
    position: relative; border-radius: 24px; overflow: hidden;
    height: 720px; isolation: isolate;
    --sky-a: #DEE4E3; --sky-b: #EAE4D5; --sky-c: #F1E5C8;
    --dune-a: #DCC9A4; --dune-b: #CDB58C; --dune-c: #C2AC85;
  }
  .seat-sky, .seat-dune-far, .seat-dune-near { position: absolute; inset: 0; z-index: -1; }
  .seat-sky { background: linear-gradient(180deg, var(--sky-a) 0%, var(--sky-b) 55%, var(--sky-c) 100%); }
  .seat-dune-far {
    background:
      radial-gradient(120% 65% at 18% 108%, var(--dune-a) 0%, transparent 60%),
      radial-gradient(110% 55% at 88% 112%, var(--dune-b) 0%, transparent 58%);
  }
  .seat-dune-near { background: radial-gradient(140% 42% at 50% 118%, var(--dune-c) 0%, transparent 62%); }
  .seat-panel::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
  }

  .seat-stage { position: absolute; inset: 0; transition: opacity 300ms var(--ease); }
  .seat-stage.is-fading { opacity: 0; }
  .cut {
    position: absolute;
    background: #FFFFFF;
    box-shadow: 0 22px 54px rgba(46, 38, 24, 0.24), 0 4px 12px rgba(46, 38, 24, 0.12);
    border-radius: 8px;
    overflow: hidden;
  }
  .cut--click { cursor: zoom-in; }
  .cut--click:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }

  /* Claude output card */
  .cl-card { font-family: var(--sans); text-align: left; }
  .cl-bar { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid #EFECE5; }
  .cl-spark { font-size: 15px; line-height: 1; color: #3D3D3A; }
  .cl-name { font-size: 13px; font-weight: 600; color: #3D3D3A; }
  .cl-url { margin-left: auto; font: 400 11px var(--mono); color: #C2BFB8; }
  .cl-body { padding: 18px; }
  .cl-user {
    margin-left: 48px; background: #F0EEE9; border-radius: 14px 14px 4px 14px;
    padding: 11px 14px; font-size: 12.5px; color: #3A362E; margin-bottom: 14px;
  }
  .cl-user .mono { font-family: var(--mono); font-weight: 500; }
  .cl-user .attach {
    display: inline-block; margin-top: 7px; font: 400 11px var(--mono);
    color: #8A8579; border: 1px dashed #D8D4C9; border-radius: 5px; padding: 3px 8px;
  }
  .cl-reply { font-size: 12.5px; line-height: 1.6; color: #3A362E; margin-right: 26px; }
  .cl-reply p { margin: 0; }
  .cl-reply p + p { margin-top: 8px; }
  .cl-chip {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
    border: 1px solid #E7E3D9; border-radius: 8px; padding: 8px 12px;
    font: 500 11.5px var(--mono); color: #3A362E; background: #FBFAF7;
  }
  .cl-chip svg { flex: none; }

  /* Excel-style tracker */
  .xl { font-family: "Segoe UI", Calibri, Arial, sans-serif; font-size: 12px; color: #262626; text-align: left; }
  .xl-formula {
    display: flex; align-items: center; gap: 8px;
    border-bottom: 1px solid #D4D4D4; background: #FFF; padding: 6px 10px; font-size: 11px; color: #444;
  }
  .xl-fx { font-style: italic; font-family: Georgia, serif; color: #6E6E6E; }
  .xl-cellref { border: 1px solid #D4D4D4; padding: 1px 9px; font-size: 10.5px; }
  .xl table { border-collapse: collapse; width: 100%; table-layout: fixed; }
  .xl th, .xl td { border: 1px solid #E1E1E1; padding: 6px 8px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .xl thead th { background: #F5F5F5; color: #6E6E6E; font-weight: 400; text-align: center; font-size: 10.5px; padding: 3px; }
  .xl .rownum { background: #F5F5F5; color: #6E6E6E; text-align: center; width: 28px; font-size: 10.5px; }
  .xl .hdr td { background: #EDEDED; font-weight: 600; }
  .xl .sel td { background: #EAF3EC; }
  .xl .sel td:nth-child(2) { outline: 2px solid #217346; outline-offset: -2px; }
  .xl .num { text-align: right; }

  /* Serif memo / letter */
  .pdoc { font-family: Georgia, "Times New Roman", serif; color: #1B1B1B; padding: 30px 34px; text-align: left; }
  .pdoc-conf {
    font-family: Arial, sans-serif; font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
    color: #8A8A8A; text-align: center; border-bottom: 1px solid #DDD; padding-bottom: 9px; margin-bottom: 15px;
  }
  .pdoc h3 { font-size: 20px; font-weight: 700; margin: 0 0 3px; letter-spacing: 0; }
  .pdoc-meta { font-family: Arial, sans-serif; font-size: 10.5px; color: #777; margin: 0 0 13px; }
  .pdoc h4 { font-size: 12.5px; margin: 13px 0 5px; }
  .pdoc p { font-size: 12px; line-height: 1.6; color: #333; margin: 0; }
  .pdoc .ask { border: 1.5px solid #1B1B1B; padding: 8px 12px; margin-top: 13px; font: 700 11px Arial, sans-serif; }
  .pdoc table { width: 100%; border-collapse: collapse; font-size: 11.5px; margin: 9px 0; font-family: Arial, sans-serif; }
  .pdoc table td, .pdoc table th { border-bottom: 1px solid #E5E5E5; padding: 5px 3px; text-align: left; }
  .pdoc table td:last-child { text-align: right; }
  .pdoc-letterhead {
    display: flex; justify-content: space-between; align-items: baseline;
    border-bottom: 2px solid #1B1B1B; padding-bottom: 9px; margin-bottom: 15px;
  }
  .pdoc-wordmark { font-size: 16px; font-weight: 700; letter-spacing: 0.04em; }
  .pdoc-lh-right { font-family: Arial, sans-serif; font-size: 9px; color: #999; letter-spacing: 0.1em; text-transform: uppercase; }
  .pdoc .co-block { font-family: Arial, sans-serif; font-size: 11px; line-height: 1.55; background: #FAFAFA; border: 1px solid #EEE; padding: 10px 12px; margin: 9px 0; }
  .pdoc-sig { margin-top: 14px; }
  .pdoc-sig svg { display: block; }

  /* Newsletter */
  .news { font-family: Georgia, serif; padding: 28px 30px; color: #1B1B1B; text-align: left; }
  .news-mast { text-align: center; border-bottom: 3px double #1B1B1B; padding-bottom: 9px; margin-bottom: 14px; }
  .news-mast h5 { font-size: 19px; letter-spacing: 0.06em; margin: 0; }
  .news-mast span { font-family: Arial, sans-serif; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: #999; }
  .news h6 { font-size: 13px; margin: 0 0 5px; }
  .news p { font-size: 11px; line-height: 1.55; color: #444; margin: 0 0 10px; }

  /* Google-Sheets content calendar */
  .gsheet { font-family: Roboto, Arial, sans-serif; font-size: 12px; color: #202124; text-align: left; }
  .gsheet-bar { background: #FFF; border-bottom: 1px solid #E0E0E0; padding: 8px 12px; font-size: 12.5px; font-weight: 500; color: #444; display: flex; gap: 8px; align-items: center; }
  .gsheet-dot { width: 8px; height: 8px; border-radius: 50%; background: #34A853; }
  .gsheet table { border-collapse: collapse; width: 100%; table-layout: fixed; }
  .gsheet th, .gsheet td { border: 1px solid #E8EAED; padding: 6px 9px; text-align: left; white-space: nowrap; overflow: hidden; }
  .gsheet thead th { background: #F8F9FA; font-weight: 500; color: #5F6368; font-size: 11px; }
  .gsheet .chip { display: inline-block; border-radius: 10px; padding: 1px 9px; font-size: 10.5px; background: #E8EAED; color: #3C4043; }
  .gsheet .chip--done { background: #E6F4EA; color: #137333; }
  .gsheet .chip--prog { background: #FEF7E0; color: #B06000; }

  /* Composer (static) */
  .composer {
    position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%);
    width: min(760px, calc(100% - 48px));
    background: #FFF; border-radius: 26px;
    box-shadow: 0 14px 36px rgba(46, 38, 24, 0.18);
    padding: 18px 22px 14px; z-index: 5;
    pointer-events: none; user-select: none;
  }
  .composer-line { display: flex; align-items: baseline; font-size: 17px; }
  .composer-cmd { font: 500 16px var(--mono); color: #2D2D2A; }
  .composer-hint { color: #B4B2AD; margin-left: 2px; }
  .composer-caret {
    display: inline-block; width: 1.5px; height: 18px; background: #2D2D2A;
    margin: 0 4px; transform: translateY(3px); animation: caret-blink 1.1s steps(1) infinite;
  }
  @keyframes caret-blink { 50% { opacity: 0; } }
  .composer-row { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
  .composer-right { display: flex; align-items: center; gap: 12px; }
  .icon-circle { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid #DBDAD6; display: grid; place-items: center; }
  .composer svg { display: block; }
  .composer-send { width: 40px; height: 40px; border-radius: 50%; background: #1A1A1E; display: grid; place-items: center; }

  /* Section footer */
  .proof-ctas { margin-top: 34px; display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap; }
  .seat-note { text-align: center; margin-top: 16px; }

  /* Lightbox */
  .seat-lightbox {
    position: fixed; inset: 0; z-index: 50; background: rgba(31, 28, 23, 0.55);
    display: none; align-items: center; justify-content: center; padding: 40px 20px;
  }
  .seat-lightbox.is-open { display: flex; }
  .seat-lightbox-inner { max-height: 88vh; max-width: min(720px, 94vw); overflow: auto; background: #FFF; border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,0.4); }

  @media (max-width: 860px) {
    .seat-tabs { overflow-x: auto; justify-content: safe center; padding: 0 4px 6px;
                 mask-image: linear-gradient(90deg, #000 86%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); }
    .seat-panel { height: 600px; }
    .cut--m-hide { display: none; }
    .cut--m-full { left: 5% !important; right: auto !important; top: 6% !important; width: 90% !important; transform: rotate(0.8deg) !important; }
    .composer { bottom: 22px; padding: 14px 16px 10px; }
    .composer-line, .composer-cmd { font-size: 14px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .seat-stage, .seat-recognition { transition: none !important; }
    .composer-caret { animation: none; }
  }

  /* ---------- FAQ ---------- */
  .faq-list { border-top: 1px solid var(--border); }
  .faq-item { border-bottom: 1px solid var(--border); }
  .faq-item summary {
    list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
    padding: 22px 0; cursor: pointer;
    font-size: 17px; font-weight: 550; color: var(--ink); letter-spacing: -0.01em;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after {
    content: "+"; font-family: var(--mono); font-size: 18px; line-height: 1;
    color: var(--muted); flex-shrink: 0; align-self: center;
    transition: transform 300ms var(--ease);
  }
  .faq-item[open] summary::after { transform: rotate(45deg); }
  .faq-item summary:hover { color: var(--ink); }
  .faq-item summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .faq-item p { margin: -6px 0 0; padding: 0 0 22px; font-size: 15.5px; line-height: 1.7; color: var(--body); max-width: 60ch; }

  /* ---------- Comparison table (why a skill) ---------- */
  .visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .cmp-scroll { overflow-x: auto; padding: 20px 2px; }
  .cmp-inner { position: relative; min-width: 780px; }
  .cmp-card {
    position: absolute; z-index: 2; pointer-events: none;
    left: 19%; width: 27%; top: -18px; bottom: -18px;
    background: var(--surface);
    border: 1px solid var(--hairline); border-radius: 16px;
    box-shadow: 0 18px 44px rgba(17, 17, 17, 0.09), 0 3px 10px rgba(17, 17, 17, 0.05);
  }
  .cmp-frame {
    position: relative;
    border: 1px solid var(--border); border-radius: 16px;
  }
  .cmp-table th.hl, .cmp-table td.hl { position: relative; z-index: 3; }
  .cmp-table {
    width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed;
    font-size: 15px; line-height: 1.45;
  }
  .cmp-table col:first-child, .cmp-table th:first-child, .cmp-table td:first-child { width: 19%; }
  .cmp-table th.hl, .cmp-table td.hl { width: 27%; }
  .cmp-table thead th {
    padding: 22px 20px; text-align: center;
    font-weight: 600; font-size: 15.5px; color: var(--muted); letter-spacing: -0.01em;
  }
  .cmp-table thead th.hl { color: var(--ink); }
  .cmp-table tbody th, .cmp-table tbody td { padding: 14px 20px; height: 92px; border-top: 1px solid var(--border); }
  .cmp-table tbody td.hl { border-top: none; }
  .cmp-table tbody tr + tr td.hl { border-top: 1px solid var(--hairline); }
  .cmp-table tbody th {
    text-align: left; font-weight: 600; font-size: 15px; color: var(--ink);
  }
  .cmp-table tbody td { text-align: center; color: var(--muted); }
  .cmp-table tbody td.hl { color: var(--ink); font-weight: 500; border-top-color: var(--hairline); }
  .cmp-note { text-align: center; margin-top: 26px; }

  @media (max-width: 860px) {
    .cmp-scroll { margin: 0 -24px; padding-left: 24px; padding-right: 24px; }
  }

  /* ---------- Newsletter page ---------- */
  .news-page .page-hero { padding-bottom: 140px; }
  .news-page .page-hero .capture { margin-top: 34px; }
  .news-page .page-hero .form-note { margin-top: 14px; max-width: 52ch; }