/* ---------- themes: light & dark ----------
         Every colour on the page is a variable. The toggle in the
         header flips data-theme on <html> and the whole page —
         hero, stories, offers, CSS panel, footer — follows. */
      :root, :root[data-theme="light"] {
        color-scheme: light;
        --bg: #ffffff;
        --surface: #f4f4f1;
        --surface-2: #ececea;
        --ink: #232323;
        --gray: #3f3f3f;
        --muted: #5d5d5d;
        --line: #dededb;
        --teal: #00adee;
        --teal-text: #00719c;
        --teal-ink: #032530;
        --sun: #ffc53d;
        --sun-ink: #4a3200;
        --coral: #ff6b5e;
        --coral-text: #c93a2e;
        --mint: #2fbf9a;
        --dark: #22333a;
        --dark-2: #18262c;
        --on-dark: #f5f5f3;
        --on-dark-muted: #c9d4d6;
        --star: #b7791f;
        --panel-line: #3d4a4f;
        --code: #d7f3ff;
      }
      :root[data-theme="dark"] {
        color-scheme: dark;
        --bg: #14181a;
        --surface: #1f2426;
        --surface-2: #282e30;
        --ink: #f4f4f2;
        --gray: #dcdcd8;
        --muted: #b3b3ae;
        --line: #3d4345;
        --teal: #00adee;
        --teal-text: #4cc9f7;
        --teal-ink: #032530;
        --sun: #ffc53d;
        --sun-ink: #4a3200;
        --coral: #ff6b5e;
        --coral-text: #ff9a8f;
        --mint: #2fbf9a;
        --dark: #0c2229;
        --dark-2: #08181d;
        --on-dark: #f5f5f3;
        --on-dark-muted: #b9c8cb;
        --star: #f2c14e;
        --panel-line: #2e444b;
        --code: #d7f3ff;
      }
      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
      body {
        margin: 0;
        font-family: "Archivo", system-ui, -apple-system, sans-serif;
        background: var(--bg);
        color: var(--ink);
        line-height: 1.6;
        font-size: 17px;
        -webkit-font-smoothing: antialiased;
        transition: background-color 0.25s ease, color 0.25s ease;
      }
      @media (prefers-reduced-motion: reduce) { body { transition: none; } }
      img { max-width: 100%; display: block; }
      a { color: var(--teal-text); }
      .wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
      .mono {
        font-family: "IBM Plex Mono", ui-monospace, monospace;
        font-size: 0.72rem; font-weight: 600;
        letter-spacing: 0.14em; text-transform: uppercase;
      }

      /* ---------- header ---------- */
      header {
        position: sticky; top: 0; z-index: 50;
        background: var(--bg);
        border-bottom: 3px solid var(--ink);
      }
      .header-in {
        display: flex; align-items: center; justify-content: space-between;
        gap: 16px; padding: 14px 0; flex-wrap: wrap;
      }
      /* Wordmark — "kalyn.ai" in Poiret One, letterspaced. No photo. */
      .brand {
        font-family: "Poiret One", "Archivo", system-ui, sans-serif;
        font-weight: 400; font-size: 1.85rem; letter-spacing: 0.14em;
        line-height: 1; text-transform: lowercase;
        color: var(--ink); text-decoration: none; white-space: nowrap;
        display: inline-flex; align-items: center;
      }

      /* Light / dark toggle — flips data-theme, variables do the rest */
      .theme-toggle {
        display: inline-flex; align-items: center; gap: 8px;
        font: inherit; font-weight: 700; font-size: 0.88rem;
        color: var(--ink); background: var(--surface);
        border: 2px solid var(--ink); border-radius: 999px;
        padding: 8px 15px; cursor: pointer; white-space: nowrap;
      }
      .theme-toggle:hover { border-color: var(--teal-text); color: var(--teal-text); }
      .theme-toggle .tt-icon { font-size: 1rem; line-height: 1; }
      /* The button names the mode it switches TO */
      :root[data-theme="light"] .tt-sun { display: none; }
      :root[data-theme="light"] .tt-to-light { display: none; }
      :root[data-theme="dark"] .tt-moon { display: none; }
      :root[data-theme="dark"] .tt-to-dark { display: none; }
      nav.main { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
      nav.main a {
        color: var(--gray); text-decoration: none; font-weight: 600; font-size: 0.92rem;
      }
      nav.main a:hover { color: var(--teal-text); }
      .btn {
        display: inline-block; text-decoration: none; font-weight: 700;
        padding: 12px 22px; border-radius: 3px; font-size: 0.98rem;
        border: 2px solid transparent; cursor: pointer; text-align: center;
      }
      .btn-teal { background: var(--teal); color: var(--teal-ink); border-color: var(--teal); }
      .btn-teal:hover { background: transparent; color: var(--teal-text); }
      .btn-outline-light { border-color: var(--on-dark); color: var(--on-dark); background: transparent; }
      .btn-outline-light:hover { border-color: var(--teal); color: var(--teal); }
      .btn-outline { border-color: var(--ink); color: var(--ink); background: transparent; }
      .btn-outline:hover { border-color: var(--teal-text); color: var(--teal-text); }
      .btn-small { padding: 9px 16px; font-size: 0.9rem; }
      .btn-buy { background: var(--sun); color: var(--sun-ink); border-color: var(--sun); font-size: 1.05rem; padding: 14px 26px; box-shadow: 4px 4px 0 rgba(0,0,0,0.35); }
      .btn-buy:hover { background: transparent; color: var(--sun); border-color: var(--sun); }
      .cta-band .btn-buy:hover, .use-block .btn-buy:hover { color: var(--sun-ink); background: var(--teal); border-color: var(--teal); box-shadow: none; }
      header .btn { white-space: nowrap; }

      /* ---------- hero ---------- */
      .hero { background: var(--dark); color: var(--on-dark); }
      .hero-in {
        display: grid; grid-template-columns: 1.7fr 0.72fr; gap: 40px;
        padding: 26px 0 34px; align-items: center;
      }
      .hero .mono { color: var(--teal); margin: 0; }
      .hero h1 {
        font-family: "Poiret One", "Archivo", system-ui, sans-serif;
        font-size: clamp(2.3rem, 4.6vw, 3.7rem);
        line-height: 1.08; font-weight: 400; letter-spacing: 0.02em;
        margin: 10px 0 14px; color: var(--on-dark);
      }
      .hero-subline {
        font-size: clamp(1.25rem, 2.4vw, 1.55rem); font-weight: 800;
        letter-spacing: -0.01em; color: var(--teal); margin: 0 0 14px;
      }
      .hero-body {
        font-size: 1.12rem; line-height: 1.55; color: var(--on-dark-muted);
        margin: 0 0 18px; max-width: 36em;
      }
      .hero-credentials {
        font-family: "IBM Plex Mono", monospace; font-size: 0.82rem;
        letter-spacing: 0.05em; line-height: 1.7; color: var(--sun);
        border-top: 1px solid var(--panel-line); padding-top: 14px;
        margin: 0 0 20px; max-width: 40em;
      }
      .consult-quote {
        margin: 0 0 26px; padding-left: 16px; border-left: 4px solid var(--teal);
        font-size: 1.05rem; line-height: 1.55; color: var(--gray); max-width: 44em;
      }
      .consult-quote cite {
        display: block; margin-top: 8px; font-style: normal; font-size: 0.86rem;
        color: var(--muted);
        font-family: "IBM Plex Mono", monospace; letter-spacing: 0.04em;
      }
      .hero h1 .ai { color: var(--teal); }
      .hero-identity {
        font-size: clamp(1.18rem, 2.2vw, 1.42rem); line-height: 1.35;
        color: var(--on-dark); font-weight: 700; margin: 0 0 12px; max-width: 32em;
      }
      .hero-identity span { color: var(--teal); }
      .hero-offer {
        font-size: 1.05rem; line-height: 1.5; color: var(--on-dark-muted);
        margin: 0 0 20px; max-width: 36em;
        border-left: 4px solid var(--sun); padding-left: 16px;
      }
      .hero-offer strong { color: var(--on-dark); }
      .hero-offer .price-line { color: var(--sun); font-weight: 800; }
      .hero .lead { font-size: 1.18rem; color: var(--on-dark-muted); max-width: 34em; margin: 0 0 18px; }
      .hero .lead strong { color: var(--on-dark); }
      .byline { font-size: 0.92rem; color: var(--on-dark-muted); margin: 14px 0 0; }
      .byline strong { color: var(--on-dark); }
      .hero-quote {
        margin: 20px 0 0; padding-left: 16px; border-left: 4px solid var(--teal);
        font-size: 1.02rem; line-height: 1.55; color: var(--on-dark); max-width: 36em;
      }
      .hero-quote cite {
        display: block; margin-top: 8px; font-style: normal; font-size: 0.86rem;
        color: var(--on-dark-muted);
        font-family: "IBM Plex Mono", monospace; letter-spacing: 0.04em;
      }
      .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
      .hero-ctas .btn-buy { font-size: 1.12rem; padding: 16px 28px; }
      .hero-sub { margin: 12px 0 0; font-size: 0.94rem; color: var(--on-dark-muted); }
      .hero-sub a { color: var(--teal); font-weight: 700; }
      .hero-photo { position: relative; max-width: 300px; justify-self: end; width: 100%; }
      .hero-photo img {
        width: 100%; height: 360px; max-height: 360px; object-fit: cover; object-position: top;
        border-radius: 3px;
        box-shadow: 10px 10px 0 var(--teal);
      }
      .hero-photo figcaption {
        margin-top: 18px; font-size: 0.78rem; color: var(--on-dark-muted);
        font-family: "IBM Plex Mono", monospace; letter-spacing: 0.06em;
      }

      /* Hero banner — Kalyn's own photo: green fireworks over the
         water at night. The photo is square (1800 × 1800), so the
         banner now shows it at its natural square ratio, much
         smaller and centred, instead of stretching it full-width
         and cropping it with object-fit: cover. The whole frame
         stays visible: both fireworks bursts, the water, the rail,
         and the silhouettes watching. Rules are scoped to the
         banner figure's image only, so they can never touch any
         other image on the page. */
      .hero-banner { padding: 32px 0 0; }
      .hero-banner figure { margin: 0; text-align: center; }
      .hero-banner figure > img {
        width: 360px; max-width: 86vw; height: auto; aspect-ratio: 1 / 1;
        object-fit: contain; object-position: center;
        margin: 0 auto;
        border-radius: 14px; border: 2px solid var(--teal-ink);
        box-shadow: 8px 8px 0 var(--teal);
      }
      .hero-banner figcaption {
        margin-top: 16px; font-size: 0.85rem; color: var(--on-dark-muted);
        font-family: "IBM Plex Mono", monospace; letter-spacing: 0.06em;
        text-align: center;
      }
      @media (max-width: 900px) {
        .hero-banner { padding-top: 24px; }
        .hero-banner figure > img {
          width: 300px; box-shadow: 5px 5px 0 var(--teal);
        }
      }

      /* ---------- worst day strip ---------- */
      .worst { padding: 64px 0 8px; }
      .worst h2, .section h2 {
        font-family: "Poiret One", "Archivo", system-ui, sans-serif;
        font-size: clamp(2rem, 4vw, 3rem); font-weight: 400;
        letter-spacing: 0.02em; line-height: 1.15; margin: 10px 0 14px;
      }
      .kicker { color: var(--teal-text); }
      .worst-rows { border-top: 2px solid var(--ink); margin-top: 28px; }
      .worst-row {
        display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px 40px;
        padding: 22px 0; border-bottom: 1px solid var(--line);
      }
      .worst-row h3 { margin: 0; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; }
      .worst-row p { margin: 0; color: var(--muted); }

      /* ---------- sections ---------- */
      .section { padding: 72px 0; }
      .section.alt { background: var(--surface); }
      .two-col { display: grid; grid-template-columns: 1fr 1.5fr; gap: 48px; }
      .two-col .sticky { position: sticky; top: 96px; align-self: start; }
      .prose p { margin: 0 0 18px; color: var(--gray); font-size: 1.06rem; }
      .prose p strong { color: var(--ink); }
      .prose p:first-child { font-size: 1.16rem; color: var(--ink); }

      /* ---------- self-check ---------- */
      .check-grid { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 34px; }
      .check {
        background: var(--bg); border: 1px solid var(--line); border-top: 5px solid var(--teal);
        border-radius: 3px; padding: 28px;
      }
      .check-head { display: flex; gap: 16px; align-items: baseline; margin-bottom: 8px; }
      .check-num {
        font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 0.85rem;
        background: var(--ink); color: var(--bg); padding: 3px 9px; border-radius: 2px; white-space: nowrap;
      }
      .check h3 { margin: 0; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.015em; }
      .check > p { color: var(--muted); margin: 6px 0 16px; max-width: 46em; }
      .check ul { margin: 0; padding: 0; list-style: none; }
      .check ul li {
        padding: 10px 0 10px 26px; position: relative; border-top: 1px solid var(--line);
        color: var(--gray);
      }
      .check ul li::before {
        content: ""; position: absolute; left: 2px; top: 19px;
        width: 9px; height: 9px; background: var(--teal);
      }
      .check ul li strong { color: var(--ink); }
      .gen {
        display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0 6px;
      }
      .gen label { display: block; font-size: 0.82rem; font-weight: 700; margin-bottom: 6px; }
      .gen input {
        width: 100%; padding: 11px 12px; font: inherit; font-size: 0.98rem;
        border: 2px solid var(--line); border-radius: 3px;
        background: var(--bg); color: var(--ink);
      }
      .gen input:focus { outline: none; border-color: var(--teal); }
      .prompt-list { margin-top: 14px; display: grid; gap: 10px; }
      .prompt-row {
        display: flex; gap: 10px; align-items: stretch;
        background: var(--surface); border: 1px solid var(--line); border-radius: 3px;
      }
      .prompt-text {
        flex: 1; padding: 13px 16px; font-size: 0.99rem; color: var(--gray);
        display: flex; align-items: center;
      }
      .copy-btn {
        flex: 0 0 auto; border: none; border-left: 1px solid var(--line);
        background: transparent; color: var(--teal-text);
        font: inherit; font-weight: 700; font-size: 0.86rem;
        padding: 0 18px; cursor: pointer; border-radius: 0 3px 3px 0;
      }
      .copy-btn:hover { background: var(--teal); color: var(--teal-ink); }
      .check .note { font-size: 0.92rem; color: var(--muted); margin-top: 14px; }
      #toast {
        position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
        background: var(--ink); color: var(--bg); font-weight: 700; font-size: 0.92rem;
        padding: 11px 20px; border-radius: 3px; opacity: 0; pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease; z-index: 100;
        box-shadow: 0 8px 24px rgba(0,0,0,0.25);
      }
      #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

      /* ---------- positions ---------- */
      .positions { border-top: 2px solid var(--ink); margin-top: 30px; }
      .position {
        display: grid; grid-template-columns: 90px 1fr 1.6fr; gap: 8px 32px;
        padding: 28px 0; border-bottom: 1px solid var(--line); align-items: baseline;
      }
      .position .num {
        font-family: "IBM Plex Mono", monospace; font-size: 1.6rem; font-weight: 600;
        color: var(--teal-text);
      }
      .position h3 { margin: 0; font-size: 1.35rem; font-weight: 850; letter-spacing: -0.015em; line-height: 1.25; }
      .position p { margin: 0; color: var(--muted); }

      /* ---------- watch ---------- */
      .watch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 32px; }
      .watch-card {
        border: 1px solid var(--line); border-radius: 3px; padding: 28px;
        display: flex; flex-direction: column; gap: 14px; background: var(--bg);
      }
      .watch-card h3 { margin: 0; font-size: 1.35rem; font-weight: 850; letter-spacing: -0.015em; }
      .watch-card p { margin: 0; color: var(--muted); flex: 1; }
      .watch-card .btn { align-self: flex-start; }
      /* ---------- offers ---------- */
      .offers { background: var(--dark); color: var(--on-dark); }
      .offers h2 { color: var(--on-dark); }
      .offers .kicker { color: var(--teal); }
      .offers .sub { color: var(--on-dark-muted); max-width: 44em; }
      .offer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 34px; }
      .offer {
        background: var(--dark-2); border: 1px solid var(--panel-line); border-radius: 3px;
        padding: 30px; display: flex; flex-direction: column; gap: 12px;
      }
      .offer.wide { grid-column: 1 / -1; border-top: 5px solid var(--teal); }
      .offer h3 { margin: 0; font-size: 1.45rem; font-weight: 850; letter-spacing: -0.015em; color: var(--on-dark); }
      .offer p { margin: 0; color: var(--on-dark-muted); }
      .offer p strong { color: var(--on-dark); }
      .price { font-size: 2rem; font-weight: 900; letter-spacing: -0.02em; color: var(--on-dark); line-height: 1.1; }
      .price span { font-size: 1rem; font-weight: 600; color: var(--on-dark-muted); }
      .offer ul { margin: 4px 0 8px; padding: 0; list-style: none; }
      .offer ul li { padding: 7px 0 7px 24px; position: relative; color: var(--on-dark-muted); border-top: 1px solid var(--panel-line); }
      .offer ul li::before { content: ""; position: absolute; left: 2px; top: 16px; width: 9px; height: 9px; background: var(--teal); }
      .offer .spacer { flex: 1; }
      .offer .fineprint { font-size: 0.9rem; }
      .offer .fineprint a { color: var(--teal); }

      /* ---------- clients ---------- */
      .clients-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 32px; }
      .client-card {
        border: 1px solid var(--line); border-top: 5px solid var(--teal);
        border-radius: 3px; padding: 28px; background: var(--bg);
        display: flex; flex-direction: column; gap: 10px;
      }
      .client-card h3 { margin: 0; font-size: 1.25rem; font-weight: 850; letter-spacing: -0.015em; line-height: 1.25; }
      .client-card p { margin: 0; color: var(--muted); flex: 1; }
      .client-card a { font-weight: 700; text-decoration: none; }
      .client-card a:hover { text-decoration: underline; }

      /* ---------- reviews ---------- */
      .reviews-head { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: baseline; justify-content: space-between; }
      .reviews-summary { font-size: 1.1rem; font-weight: 700; color: var(--ink); margin: 0; }
      .reviews-summary .stars { color: var(--star); letter-spacing: 0.08em; }
      .reviews-link { font-weight: 700; white-space: nowrap; }
      .reviews-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 32px; }
      .review-card {
        border: 1px solid var(--line); border-top: 5px solid var(--teal);
        border-radius: 3px; padding: 28px; background: var(--bg);
        display: flex; flex-direction: column; gap: 10px;
      }
      .review-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
      .review-meta h3 { margin: 0; font-size: 1.1rem; font-weight: 850; letter-spacing: -0.01em; }
      .review-meta .when { font-size: 0.9rem; color: var(--muted); font-family: "IBM Plex Mono", monospace; }
      .review-stars { color: var(--star); letter-spacing: 0.12em; font-size: 1rem; line-height: 1; }
      .review-card blockquote { margin: 0; color: var(--gray); font-size: 1rem; line-height: 1.6; }
      .review-card blockquote p { margin: 0; }
      .opinion-reviews { margin: 28px 0 32px; }
      .opinion-h {
        font-family: "Poiret One", "Archivo", system-ui, sans-serif;
        font-size: clamp(1.8rem, 3.6vw, 2.5rem); font-weight: 400;
        letter-spacing: 0.02em; line-height: 1.15; margin: 0 0 12px;
      }

      /* ---------- speaking ---------- */
      .speaking-card {
        border: 1px solid var(--line); border-top: 5px solid var(--teal);
        border-radius: 3px; padding: 32px; background: var(--bg);
        display: grid; grid-template-columns: 1.6fr auto; gap: 24px; align-items: center;
      }
      .speaking-card p { margin: 0; color: var(--gray); font-size: 1.08rem; max-width: 44em; }
      @media (max-width: 900px) {
        .reviews-grid { grid-template-columns: 1fr; }
        .speaking-card { grid-template-columns: 1fr; }
      }

      /* ---------- capabilities ---------- */
      .cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 32px; }
      .cap-card {
        border: 1px solid var(--line); border-top: 5px solid var(--teal);
        border-radius: 3px; padding: 28px; background: var(--bg);
      }
      .cap-card h3 { margin: 0 0 12px; font-size: 1.2rem; font-weight: 850; letter-spacing: -0.015em; line-height: 1.25; }
      .cap-card ul { margin: 0; padding: 0; list-style: none; }
      .cap-card ul li { padding: 8px 0 8px 22px; position: relative; color: var(--muted); border-top: 1px solid var(--line); }
      .cap-card ul li:first-child { border-top: none; }
      .cap-card ul li::before { content: ""; position: absolute; left: 2px; top: 16px; width: 8px; height: 8px; background: var(--teal); }
      .cap-card ul li strong { color: var(--ink); }

      /* ---------- timeline ---------- */
      .timeline { border-top: 2px solid var(--ink); margin-top: 30px; }
      .tl-row {
        display: grid; grid-template-columns: 170px 1fr 1.6fr; gap: 8px 32px;
        padding: 26px 0; border-bottom: 1px solid var(--line); align-items: baseline;
      }
      .tl-row .when {
        font-family: "IBM Plex Mono", monospace; font-size: 1.05rem; font-weight: 600;
        color: var(--teal-text); white-space: nowrap;
      }
      .tl-row h3 { margin: 0; font-size: 1.3rem; font-weight: 850; letter-spacing: -0.015em; line-height: 1.25; }
      .tl-row p { margin: 0; color: var(--muted); }

      /* ---------- about ---------- */
      .truth { margin-top: 44px; border-top: 2px solid var(--ink); padding-top: 30px; }
      .truth h3 {
        font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 850;
        letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 16px;
      }
      .truth p { margin: 0 0 18px; color: var(--gray); font-size: 1.06rem; }
      .truth p:last-child { margin-bottom: 0; }
      .about-photo { margin-top: 30px; }
      .about-photo img { width: 100%; max-height: 420px; object-fit: cover; border-radius: 3px; }
      .about-photo figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 10px; font-family: "IBM Plex Mono", monospace; }
      blockquote.creed {
        margin: 34px 0; padding: 6px 0 6px 26px; border-left: 6px solid var(--teal);
        font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-weight: 700; line-height: 1.4;
        letter-spacing: -0.01em; color: var(--ink);
      }
      blockquote.creed cite {
        display: block; margin-top: 12px; font-size: 0.88rem; font-style: normal;
        font-weight: 600; color: var(--muted);
        font-family: "IBM Plex Mono", monospace; letter-spacing: 0.06em; text-transform: uppercase;
      }

      /* ---------- photo breaks ---------- */
      .photo-break { padding: 56px 0 0; }
      .photo-break figure { margin: 0; }
      .photo-break img {
        width: 100%; height: 380px; object-fit: cover; object-position: center 62%;
        border-radius: 3px;
      }
      .photo-break figcaption {
        font-size: 0.85rem; color: var(--muted); margin-top: 10px;
        font-family: "IBM Plex Mono", monospace; letter-spacing: 0.06em;
      }
      .watch-photo { margin: 0; display: flex; flex-direction: column; gap: 10px; }
      .watch-photo img {
        width: 100%; height: 100%; min-height: 260px; object-fit: cover; object-position: top;
        border-radius: 3px; flex: 1;
      }
      .watch-photo figcaption {
        font-size: 0.85rem; color: var(--muted);
        font-family: "IBM Plex Mono", monospace; letter-spacing: 0.06em;
      }
      @media (max-width: 900px) {
        .photo-break img { height: 240px; }
      }

      /* ---------- life band, use photos, about gallery ---------- */
      .life-band { padding: 56px 0 0; }
      .life-band .band-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
      .life-band figure { margin: 0; }
      .life-band img { width: 100%; height: 300px; object-fit: cover; border-radius: 3px; display: block; }
      .life-band figcaption {
        font-size: 0.85rem; color: var(--muted); margin-top: 10px;
        font-family: "IBM Plex Mono", monospace; letter-spacing: 0.06em;
      }
      .use-photo { margin: 22px 0 6px; max-width: 440px; }
      .use-photo img { width: 100%; height: auto; border-radius: 3px; display: block; }
      .use-photo.cap img { max-height: 520px; object-fit: cover; }
      .use-photo figcaption {
        font-size: 0.85rem; color: var(--muted); margin-top: 10px;
        font-family: "IBM Plex Mono", monospace; letter-spacing: 0.03em;
      }
      .about-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px; margin: 36px 0 8px; }
      .about-gallery figure { margin: 0; }
      .about-gallery img { width: 100%; height: 250px; object-fit: cover; border-radius: 3px; display: block; }
      .about-gallery figcaption {
        font-size: 0.85rem; color: var(--muted); margin-top: 10px;
        font-family: "IBM Plex Mono", monospace; letter-spacing: 0.06em;
      }
      @media (max-width: 900px) {
        .life-band .band-grid { grid-template-columns: 1fr; }
        .life-band img { height: 240px; }
      }

      /* ---------- footer ---------- */
      footer { background: var(--dark-2); color: var(--on-dark-muted); padding: 56px 0 40px; }
      .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
      footer .brand { color: var(--on-dark); }
      footer h4 { color: var(--on-dark); margin: 0 0 12px; font-size: 0.95rem; }
      footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
      footer a { color: var(--on-dark-muted); text-decoration: none; }
      footer a:hover { color: var(--teal); }
      .foot-base {
        border-top: 1px solid var(--panel-line); margin-top: 40px; padding-top: 20px;
        display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 0.88rem;
      }

      /* ==========================================================
         THE FUN LAYER — stickers, ticker, stories, pull-quotes.
         This is the exact CSS shown in "The CSS" section below.
         ========================================================== */

      /* Sticker badge on the hero photo */
      .sticker {
        position: absolute; top: 18px; left: -14px; z-index: 2;
        background: var(--sun); color: var(--sun-ink);
        font-family: "IBM Plex Mono", monospace; font-weight: 600;
        font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
        padding: 9px 14px; border: 2px solid var(--teal-ink);
        border-radius: 999px; transform: rotate(-6deg);
        box-shadow: 4px 4px 0 var(--teal-ink);
      }

      /* Scrolling ticker under the hero */
      .ticker { background: var(--teal); color: var(--teal-ink); overflow: hidden; padding: 12px 0; }
      .ticker-track {
        display: flex; align-items: center; gap: 28px; width: max-content;
        font-weight: 800; font-size: 1.02rem; letter-spacing: 0.01em; white-space: nowrap;
        animation: tick 30s linear infinite;
      }
      .tick-star { color: #ffffff; font-size: 0.9rem; }
      @keyframes tick { to { transform: translateX(-50%); } }
      @media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

      /* Story cards (the blog index) */
      .story-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 34px; }
      .story-card {
        background: var(--bg); border: 2px solid var(--ink); border-radius: 14px;
        overflow: hidden; display: flex; flex-direction: column;
        box-shadow: 6px 6px 0 var(--ink); text-decoration: none; color: var(--ink);
        transition: transform 0.15s ease, box-shadow 0.15s ease;
      }
      .story-card:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 var(--ink); }
      .story-card img { width: 100%; height: 210px; object-fit: cover; }
      .story-card .sc-body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
      .story-tag {
        align-self: flex-start; font-family: "IBM Plex Mono", monospace;
        font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
        padding: 5px 10px; border-radius: 999px; border: 2px solid var(--ink);
      }
      .tag-teal { background: var(--teal); color: var(--teal-ink); }
      .tag-sun { background: var(--sun); color: var(--sun-ink); }
      .tag-coral { background: var(--coral); color: #4d0f08; }
      .tag-mint { background: var(--mint); color: #06382a; }
      .story-card h3 { margin: 0; font-family: "Poiret One", "Archivo", system-ui, sans-serif; font-size: 1.75rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1.2; }
      .story-card p { margin: 0; color: var(--muted); flex: 1; }
      .story-card .sc-meta { font-family: "IBM Plex Mono", monospace; font-size: 0.8rem; color: var(--muted); }
      .story-card .sc-go { font-weight: 800; color: var(--teal-text); }

      /* Full story pages */
      .story-wrap { max-width: 800px; margin: 0 auto; padding: 0 24px; }
      .story-article { padding: 56px 0 72px; }
      .back-link { font-weight: 800; text-decoration: none; display: inline-block; margin-bottom: 28px; }
      .story-article h1 {
        font-family: "Poiret One", "Archivo", system-ui, sans-serif;
        font-size: clamp(2.6rem, 6.5vw, 4.1rem); font-weight: 400;
        letter-spacing: 0.02em; line-height: 1.08; margin: 14px 0 16px;
      }
      .story-article .byline2 { color: var(--muted); font-size: 1rem; margin: 0 0 30px; }
      .story-article h2 {
        font-family: "Poiret One", "Archivo", system-ui, sans-serif;
        font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 400;
        letter-spacing: 0.02em; line-height: 1.15; margin: 48px 0 16px;
      }
      .story-article p { font-size: 1.13rem; color: var(--gray); margin: 0 0 20px; }
      .story-article p strong { color: var(--ink); }
      .story-article figure { margin: 34px 0; }
      .story-article figure img { width: 100%; border-radius: 14px; border: 2px solid var(--ink); }
      .story-article figcaption {
        font-size: 0.9rem; color: var(--muted); margin-top: 12px;
        font-family: "IBM Plex Mono", monospace; letter-spacing: 0.03em;
      }
      .story-article figure.tall img { max-height: 560px; object-fit: cover; object-position: center 30%; }
      .story-article figure.wide img { max-height: 420px; object-fit: cover; }

      /* Big pull-quote callouts */
      .pull {
        border-radius: 14px; padding: 30px 32px; margin: 36px 0;
        border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
      }
      .pull .pull-big { font-family: "Poiret One", "Archivo", system-ui, sans-serif; font-size: clamp(2rem, 5vw, 2.9rem); font-weight: 400; letter-spacing: 0.02em; line-height: 1.12; margin: 0 0 8px; }
      .pull p { margin: 0; font-size: 1.05rem; }
      .pull-teal { background: var(--teal); color: var(--teal-ink); }
      .pull-teal p { color: var(--teal-ink); }
      .pull-sun { background: var(--sun); color: var(--sun-ink); }
      .pull-sun p { color: var(--sun-ink); }
      .pull-dark { background: var(--dark); color: var(--on-dark); box-shadow: 6px 6px 0 var(--teal); }
      .pull-dark p { color: var(--on-dark-muted); }
      .pull-dark .pull-big { color: var(--coral); }

      /* Stat cards */
      .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 30px 0; }
      .stat {
        background: var(--surface); border: 2px solid var(--ink); border-radius: 14px;
        padding: 20px; text-align: center;
      }
      .stat .stat-num { display: block; font-size: 2.1rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1; color: var(--ink); }
      .stat .stat-label { display: block; margin-top: 8px; font-size: 0.88rem; color: var(--muted); font-weight: 600; }

      /* Checklist chips inside stories */
      .story-article ul.checklist { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
      .story-article ul.checklist li {
        background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
        padding: 14px 18px 14px 46px; position: relative; font-size: 1.08rem; color: var(--gray);
      }
      .story-article ul.checklist li::before {
        content: "\2713"; position: absolute; left: 16px; top: 12px;
        font-weight: 900; color: var(--teal-text); font-size: 1.15rem;
      }
      .story-article ul.checklist li strong { color: var(--ink); }

      /* Two unbreakable rules (RV story) */
      .rule-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 30px 0; }
      .rule { border-radius: 14px; padding: 26px; border: 2px solid var(--ink); }
      .rule h3 { margin: 0 0 8px; font-size: 1.35rem; font-weight: 900; letter-spacing: -0.015em; }
      .rule p { margin: 0; font-size: 1.02rem; }
      .rule-fit { background: var(--teal); color: var(--teal-ink); }
      .rule-fit p { color: var(--teal-ink); }
      .rule-sky { background: var(--dark); color: var(--on-dark); }
      .rule-sky p { color: var(--on-dark-muted); }

      /* Author box at the foot of each story */
      .author-box {
        display: flex; gap: 20px; align-items: center; margin-top: 48px;
        background: var(--surface); border-radius: 14px; padding: 24px;
      }
      .author-box img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 2px solid var(--ink); flex: 0 0 auto; }
      .author-box p { margin: 0; font-size: 1rem; }

      /* "Show me the CSS" panel */
      .css-panel { background: var(--dark-2); border-radius: 14px; padding: 28px; margin-top: 30px; }
      .css-panel pre {
        margin: 0; white-space: pre-wrap; word-break: break-word;
        font-family: "IBM Plex Mono", monospace; font-size: 0.84rem; line-height: 1.65;
        color: var(--code); max-height: 520px; overflow-y: auto;
      }
      .css-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }

      @media (max-width: 900px) {
        .story-grid { grid-template-columns: 1fr; }
        .stat-row { grid-template-columns: 1fr; }
        .rule-row { grid-template-columns: 1fr; }
        .author-box { flex-direction: column; text-align: center; }
        .sticker { left: 8px; }
      }



      /* ---------- routed pages (home / uses / stories / speaking / about / contact / sitemap) ---------- */
      nav.main a.nav-on { color: var(--teal-text); }
      .page { padding: 52px 0 76px; }
      .page-head { max-width: 800px; margin-bottom: 10px; }
      .page-head h1, .page h1 {
        font-family: "Poiret One", "Archivo", system-ui, sans-serif;
        font-size: clamp(2.6rem, 6vw, 4rem); font-weight: 400;
        letter-spacing: 0.02em; line-height: 1.1; margin: 12px 0 16px;
      }
      .page-lead { font-size: 1.15rem; color: var(--gray); margin: 0 0 30px; max-width: 44em; }
      .page-lead strong { color: var(--ink); }

      /* Home highlight list */
      .hl-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
      .hl-list li {
        padding: 16px 0; border-bottom: 1px solid var(--line);
        color: var(--muted); font-size: 1.05rem;
      }
      .hl-list li strong { color: var(--ink); }

      /* Depth blocks on the How I Use AI / Speaking / About pages */
      .use-block {
        background: var(--bg); border: 1px solid var(--line); border-top: 5px solid var(--teal);
        border-radius: 3px; padding: 30px; margin-top: 26px; max-width: 880px;
      }
      .use-block h2 {
        font-family: "Poiret One", "Archivo", system-ui, sans-serif;
        font-size: clamp(1.8rem, 3.6vw, 2.4rem); font-weight: 400;
        letter-spacing: 0.02em; line-height: 1.15; margin: 14px 0 14px;
      }
      .use-block p { color: var(--gray); font-size: 1.07rem; margin: 0 0 16px; max-width: 44em; }
      .use-block p:last-child { margin-bottom: 0; }
      .use-block p strong { color: var(--ink); }
      .use-block .note-line { font-size: 0.95rem; color: var(--muted); margin-top: 14px; }
      /* Scope & liability terms on the consult page — deliberately plain */
      .terms-block {
        border: 1px solid var(--line); border-radius: 3px;
        padding: 22px 30px; margin-top: 26px; max-width: 880px;
        background: var(--surface);
      }
      .terms-block h2 {
        font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em;
        margin: 0 0 10px; color: var(--ink);
      }
      .terms-block p { color: var(--muted); font-size: 0.95rem; margin: 0; max-width: 46em; }
      .terms-block p strong { color: var(--ink); }
      /* FAQ on the consult page — static Q&A, answers always visible */
      .faq-list { margin-top: 8px; }
      .faq-item { border-top: 1px solid var(--line); padding: 18px 0 4px; }
      .faq-item:first-child { border-top: none; padding-top: 6px; }
      .faq-item h3 { margin: 0 0 8px; font-size: 1.12rem; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
      .faq-item p { margin: 0 0 14px; }
      ul.story-checks { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
      ul.story-checks li {
        background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
        padding: 14px 18px 14px 46px; position: relative; font-size: 1.04rem; color: var(--gray);
      }
      ul.story-checks li::before {
        content: "\2713"; position: absolute; left: 16px; top: 12px;
        font-weight: 900; color: var(--teal-text); font-size: 1.15rem;
      }
      ul.story-checks li strong { color: var(--ink); }

      /* Book a Consult — CTA band (Home + How I Use AI) */
      .cta-band {
        background: var(--dark); color: var(--on-dark);
        border-radius: 14px; border: 2px solid var(--ink);
        box-shadow: 6px 6px 0 var(--ink);
        padding: 32px; margin-top: 26px; max-width: 880px;
      }
      .cta-band h2, .cta-band h3 {
        font-family: "Poiret One", "Archivo", system-ui, sans-serif;
        font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 400;
        letter-spacing: 0.02em; line-height: 1.15; margin: 10px 0 12px; color: var(--on-dark);
      }
      .cta-band p { color: var(--on-dark-muted); font-size: 1.07rem; margin: 0 0 20px; max-width: 44em; }
      .cta-band p strong { color: var(--on-dark); }
      .cta-band .mono { color: var(--teal); }
      .cta-band.full { max-width: none; margin-top: 0; }

      /* Contact cards */
      .contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 8px; }
      .contact-card {
        border: 2px solid var(--ink); border-radius: 14px; padding: 26px;
        background: var(--bg); text-decoration: none; color: var(--ink);
        box-shadow: 6px 6px 0 var(--ink); display: flex; flex-direction: column; gap: 8px;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
      }
      .contact-card:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 var(--ink); }
      .cc-label { font-family: "IBM Plex Mono", monospace; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-text); }
      .cc-value { font-size: 1.35rem; font-weight: 850; letter-spacing: -0.015em; }
      .cc-go { font-weight: 800; color: var(--teal-text); font-size: 0.95rem; }

      /* Site map */
      .sm-h {
        font-family: "Poiret One", "Archivo", system-ui, sans-serif;
        font-size: clamp(1.7rem, 3.4vw, 2.2rem); font-weight: 400;
        letter-spacing: 0.02em; line-height: 1.15; margin: 42px 0 8px;
      }
      .sitemap-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); max-width: 880px; }
      .sitemap-list li {
        display: grid; grid-template-columns: 240px 1fr; gap: 6px 28px;
        padding: 16px 0; border-bottom: 1px solid var(--line); align-items: baseline;
      }
      .sitemap-list a { font-weight: 800; font-size: 1.08rem; text-decoration: none; }
      .sitemap-list a:hover { text-decoration: underline; }
      .sitemap-list span { color: var(--muted); font-size: 0.99rem; }
      @media (max-width: 900px) {
        .contact-grid { grid-template-columns: 1fr; }
        .sitemap-list li { grid-template-columns: 1fr; }
        .use-block { padding: 24px; }
      }


      /* ---------- legal pages (privacy / terms) ---------- */
      .legal-doc { max-width: 800px; }
      .legal-doc h2 {
        font-size: 1.28rem; font-weight: 800; letter-spacing: -0.01em;
        line-height: 1.3; margin: 38px 0 10px; color: var(--ink);
      }
      .legal-doc h2:first-child { margin-top: 6px; }
      .legal-doc p { color: var(--gray); font-size: 1.02rem; margin: 0 0 14px; max-width: 46em; }
      .legal-doc p strong { color: var(--ink); }
      .legal-doc ul { margin: 0 0 16px; padding-left: 22px; color: var(--gray); font-size: 1.02rem; }
      .legal-doc li { margin-bottom: 8px; }
      .legal-doc li strong { color: var(--ink); }
      .legal-updated {
        font-family: "IBM Plex Mono", monospace; font-size: 0.85rem;
        color: var(--muted); letter-spacing: 0.04em; margin: 0 0 8px;
      }
      .legal-contact {
        border: 1px solid var(--line); border-radius: 3px; background: var(--surface);
        padding: 20px 24px; margin-top: 34px; max-width: 800px;
      }
      .legal-contact p { margin: 0; color: var(--gray); font-size: 1rem; }
      .legal-contact p strong { color: var(--ink); }

      /* ---------- hidden OKF document page ---------- */
      .okf-wrap { max-width: 800px; margin: 0 auto; padding: 0 24px; }
      .okf-article { padding: 48px 0 72px; }
      .okf-frontmatter {
        background: var(--dark-2); color: var(--code); border-radius: 10px;
        padding: 22px 24px; margin: 0 0 36px; overflow-x: auto;
        border: 1px solid var(--panel-line);
      }
      .okf-frontmatter pre {
        margin: 0; white-space: pre-wrap; word-break: break-word;
        font-family: "IBM Plex Mono", ui-monospace, monospace;
        font-size: 0.86rem; line-height: 1.7;
      }
      .okf-article h1 {
        font-family: "Poiret One", "Archivo", system-ui, sans-serif;
        font-size: clamp(2.4rem, 6vw, 3.6rem); font-weight: 400;
        letter-spacing: 0.02em; line-height: 1.1; margin: 0 0 18px;
      }
      .okf-article h2 {
        font-family: "Poiret One", "Archivo", system-ui, sans-serif;
        font-size: clamp(1.7rem, 3.6vw, 2.3rem); font-weight: 400;
        letter-spacing: 0.02em; line-height: 1.15; margin: 40px 0 14px;
      }
      .okf-article p { font-size: 1.1rem; color: var(--gray); margin: 0 0 18px; }
      .okf-article ul { margin: 0 0 10px; padding-left: 22px; color: var(--gray); font-size: 1.05rem; }
      .okf-article li { margin-bottom: 8px; }
      .okf-article li strong { color: var(--ink); }
      .okf-small-link { font-size: 0.82rem; }

      /* ---------- responsive ---------- */
      @media (max-width: 900px) {
        .hero-in { grid-template-columns: 1.55fr 0.85fr; padding: 20px 0 26px; gap: 22px; align-items: start; }
        .hero-photo { max-width: 220px; }
        .hero-photo img { height: 280px; max-height: 280px; }
        .hero-photo figcaption { display: none; }
        .hero-photo .sticker { display: none; }
        .two-col { grid-template-columns: 1fr; gap: 20px; }
        .two-col .sticky { position: static; }
        .position { grid-template-columns: 56px 1fr; }
        .position p { grid-column: 2; }
        .watch-grid, .offer-grid, .clients-grid, .cap-grid { grid-template-columns: 1fr; }
        .tl-row { grid-template-columns: 1fr; gap: 4px; }
        .tl-row .when { white-space: normal; }
        .foot-grid { grid-template-columns: 1fr; gap: 28px; }
        .gen { grid-template-columns: 1fr; }
        nav.main { gap: 14px; }
        nav.main a:not(.btn) { font-size: 0.88rem; }
      }
      @media (max-width: 560px) {
        .worst-row { grid-template-columns: 1fr; }
        .prompt-row { flex-direction: column; }
        .copy-btn { border-left: none; border-top: 1px solid var(--line); padding: 11px 16px; text-align: left; }
        .header-in { padding: 12px 0; }
        header .audit-btn { display: none; }
        .brand { font-size: 1.45rem; }
        .theme-toggle { padding: 7px 12px; font-size: 0.82rem; }
        .hero h1 { font-size: 2rem; line-height: 1.12; margin: 8px 0 10px; }
        .hero-in { display: block; padding: 18px 0 24px; }
        .hero-photo { position: static; width: 100%; max-width: 100%; margin-top: 20px !important; }
        .hero-photo img { box-shadow: 6px 6px 0 var(--teal); height: 180px; max-height: 180px; width: 100%; object-position: center 22%; }
        .hero-photo figcaption { display: block; margin-top: 14px; }
        .hero-identity { font-size: 1.05rem; margin-bottom: 10px; }
        .hero-offer { font-size: 0.95rem; line-height: 1.5; margin-bottom: 16px; padding-left: 11px; }
        .hero-ctas { flex-wrap: wrap; }
        .hero-ctas .btn-buy { font-size: 1rem; padding: 14px 16px; flex: 1 1 100%; }
        .hero-ctas .btn-outline-light { padding: 10px 12px; font-size: 0.86rem; }
        .hero-sub { display: none; }
        .byline { font-size: 0.82rem; margin-top: 10px; }
        .section { padding: 52px 0; }
        .check, .story-card .sc-body, .css-panel { padding: 22px; }
        .pull { padding: 24px; }
      }

      /* Last-updated line on content pages */
      .last-updated { font-family: "IBM Plex Mono", monospace; font-size: 0.82rem; letter-spacing: 0.04em; color: var(--muted); margin: 34px 0 0; }