/* ════════ DEMO v5 — additions on top of the production design ════════ */

    /* ── living memory demo (hero) ── */
    .cd-chat-wrap { padding: .9rem 1rem 1rem; }
    .cd-chat { display: flex; flex-direction: column; gap: .5rem; min-height: 252px; }
    .cd-m {
      max-width: 90%; padding: .55rem .8rem; border-radius: 10px;
      font-family: "JetBrains Mono", monospace; font-size: .74rem; line-height: 1.55;
      opacity: 0; translate: 0 10px; transition: opacity .35s ease-out, translate .4s cubic-bezier(.3,1.4,.5,1);
    }
    .cd-m.on { opacity: 1; translate: 0 0; }
    .cd-u { align-self: flex-end; background: rgba(94,226,255,.12); border: 1px solid rgba(94,226,255,.3); }
    .cd-a { align-self: flex-start; background: rgba(34,211,168,.1); border: 1px solid rgba(34,211,168,.28); }
    .cd-a b { color: #7BE0A8; font-weight: 800; }
    .cd-cur { display: inline-block; width: 6px; height: 11px; background: #7BE0A8; margin-left: 2px; vertical-align: -1px; animation: cs-cursor 1s step-end infinite; }
    .cd-badge {
      align-self: flex-start; font-family: "JetBrains Mono", monospace; font-size: .56rem; font-weight: 800;
      letter-spacing: .12em; text-transform: uppercase; color: #fbbf24 !important;
      padding: .25rem .55rem; border: 1px dashed rgba(251,191,36,.45); border-radius: 6px;
      opacity: 0; translate: 0 8px; transition: opacity .35s, translate .4s cubic-bezier(.3,1.4,.5,1);
    }
    .cd-badge.on { opacity: 1; translate: 0 0; }
    .cd-x-row { display: flex; gap: .4rem; flex-wrap: wrap; align-self: flex-end; }
    .cd-x {
      font-family: "JetBrains Mono", monospace; font-size: .58rem; font-weight: 800;
      padding: .25rem .5rem; border-radius: 6px;
      background: var(--c-mustard); color: #1A3555 !important; border: 1.5px solid #1A3555;
      opacity: 0; scale: .7; transition: opacity .3s, scale .35s cubic-bezier(.3,1.4,.5,1), translate .5s ease-in, rotate .5s;
    }
    .cd-x.on { opacity: 1; scale: 1; }
    .cd-x.fly { opacity: 0; translate: -120px -60px; rotate: -10deg; }
    .cd-mem-empty {
      font-family: "JetBrains Mono", monospace; font-size: .62rem; letter-spacing: .14em;
      text-transform: uppercase; color: #8DA8C7 !important; text-align: center; padding: 2rem 0;
    }
    .cd-day-flip { animation: c-tick-up .45s ease; display: inline-block; }
    .c-stack { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M3 23 L5 17 L18 4 a2.2 2.2 0 0 1 3.1 0 l0.9 0.9 a2.2 2.2 0 0 1 0 3.1 L9 21 Z' fill='%23E8A934' stroke='%2311294A' stroke-width='1.6'/%3E%3Cpath d='M5 17 L9 21' stroke='%2311294A' stroke-width='1.4'/%3E%3C/svg%3E") 3 23, auto; }

    /* ── giant sentence (cream, staircased) ── */
    .cd-giant { padding: 4.5rem clamp(1.5rem, 6vw, 7rem) 2.6rem; text-align: left; max-width: 1440px; margin: 0 auto; }
    .cd-giant h2 {
      font-family: "Outfit", sans-serif; font-weight: 900;
      font-size: clamp(2.6rem, 8.5vw, 8.2rem); line-height: .96; letter-spacing: -.045em;
      color: var(--c-ink); margin: 0;
    }
    .cd-giant em {
      font-style: normal; display: block; color: var(--c-ink);
      background: linear-gradient(180deg, transparent 58%, var(--c-mustard) 58%, var(--c-mustard) 94%, transparent 94%);
      width: fit-content; margin: .1em 0 0 clamp(1.2rem, 9vw, 9rem); padding: 0 .15em;
    }
    .cd-giant .w { display: inline-block; opacity: 0; translate: 0 36px; transition: opacity .55s ease-out, translate .75s var(--ease-out-2); transition-delay: calc(var(--wi) * 95ms); }
    .cd-giant.c-in .w { opacity: 1; translate: 0 0; }
    .cd-g-note { font-family: "Caveat", cursive; font-size: 1.6rem; font-weight: 700; color: var(--c-terra); rotate: -2.4deg; margin: 1rem 0 0 clamp(1.2rem, 9vw, 9rem); width: fit-content; }

    /* ── polaroids (cream) ── */
    .cd-shots { display: flex; gap: clamp(1rem, 3vw, 2.4rem); justify-content: center; align-items: flex-start; flex-wrap: wrap; padding: 2.6rem 1.5rem 2.2rem; position: relative; max-width: 1200px; margin: 0 auto; }
    .cd-shots-note { position: absolute; top: .6rem; left: 50%; translate: -120% 0; rotate: -4deg; font-family: "Caveat", cursive; font-size: 1.5rem; font-weight: 700; color: var(--c-terra); }
    .cd-pol {
      background: #FBF5E4; padding: 10px 10px 14px; margin: 0; rotate: var(--pr, 0deg);
      border: 1px solid var(--c-line);
      box-shadow: 0 18px 38px -14px rgba(20,20,30,.35);
      width: min(300px, 84vw); position: relative;
      transition: rotate .45s cubic-bezier(.3,1.4,.5,1), translate .45s cubic-bezier(.3,1.4,.5,1), box-shadow .4s;
    }
    .cd-pol:hover { rotate: 0deg; translate: 0 -8px; box-shadow: 0 28px 50px -16px rgba(20,20,30,.42); z-index: 3; }
    .cd-pol::before {
      content: ""; position: absolute; top: -12px; left: 50%; translate: -50% 0; rotate: -3deg;
      width: 86px; height: 26px; background: rgba(232,169,52,.55);
      border-left: 1px dashed rgba(17,41,74,.3); border-right: 1px dashed rgba(17,41,74,.3);
    }
    .cd-pol-img { background: #10141E; border-radius: 4px; overflow: hidden; min-height: 170px; }
    .cd-pol-bar { display: flex; align-items: center; gap: .3rem; padding: .45rem .6rem; background: rgba(0,0,0,.4); font-family: "JetBrains Mono", monospace; font-size: .54rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8DA8C7; }
    .cd-pol-bar i { width: 7px; height: 7px; border-radius: 50%; }
    .cd-pol-bar i:nth-child(1) { background: #ff5f57; } .cd-pol-bar i:nth-child(2) { background: #ffbd2e; } .cd-pol-bar i:nth-child(3) { background: #28ca41; }
    .cd-pol-body { display: grid; gap: .45rem; padding: .9rem .8rem; }
    .cd-pol-body > span { display: block; height: 9px; border-radius: 4px; background: rgba(220,237,249,.1); }
    .cd-pol-net { position: relative; min-height: 130px; }
    .cd-pol-net b { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: #22d3a8; box-shadow: 0 0 8px currentColor; }
    .cd-pol-net u { position: absolute; height: 1.5px; background: rgba(220,237,249,.22); transform-origin: left center; }
    .cd-pol-term { font-family: "JetBrains Mono", monospace; font-size: .68rem; line-height: 1.7; padding: .9rem .8rem; }
    .cd-pol-term span { display: block; height: auto; background: none; border-radius: 0; }
    .cd-pol figcaption { font-family: "Caveat", cursive; font-size: 1.25rem; font-weight: 700; color: #2A4868; text-align: center; padding-top: .55rem; }

    /* ── click-through module deck (cream section, terra-accented cards) ── */
    .cd-deck-wrap { max-width: 760px; margin: 0 auto; position: relative; z-index: 2; }
    .cd-deck { position: relative; height: 340px; rotate: -.5deg; }
    .cd-card {
      position: absolute; inset: 0;
      background: var(--c-paper);
      background-image: repeating-linear-gradient(180deg, transparent 0 30px, rgba(17,41,74,.05) 30px 31px);
      border: 2.5px solid var(--c-ink); border-radius: 16px;
      padding: 2.1rem 2.3rem; cursor: pointer;
      box-shadow: 7px 7px 0 var(--c-terra);
      transition: translate .55s cubic-bezier(.3,1.3,.5,1), rotate .55s cubic-bezier(.3,1.3,.5,1), scale .5s, opacity .4s, box-shadow .4s;
    }
    .cd-card[data-pos="0"] { z-index: 5; rotate: 0deg; translate: 0 0; scale: 1; opacity: 1; }
    .cd-card[data-pos="1"] { z-index: 4; rotate: 2.1deg; translate: 16px 12px; scale: .985; opacity: 1; box-shadow: 5px 5px 0 var(--c-line); }
    .cd-card[data-pos="2"] { z-index: 3; rotate: -1.7deg; translate: -14px 22px; scale: .968; opacity: 1; box-shadow: 4px 4px 0 var(--c-line); }
    .cd-card[data-pos="deep"] { z-index: 2; rotate: 1deg; translate: 4px 28px; scale: .955; opacity: 0; }
    .cd-card.fly { translate: -440px -90px !important; rotate: -16deg !important; opacity: 0 !important; z-index: 7 !important; }
    .cd-card-tier {
      position: absolute; top: 1rem; right: 1.1rem;
      font-family: "JetBrains Mono", monospace; font-size: .56rem; font-weight: 900; letter-spacing: .18em;
      text-transform: uppercase; padding: .3rem .6rem; border-radius: 99px; border: 1.5px solid var(--c-ink);
    }
    .cd-card-tier.t-pro { background: var(--c-terra-tint); color: var(--c-terra) !important; }
    .cd-card-tier.t-prem { background: var(--c-plum-soft); color: var(--c-plum) !important; }
    .cd-card h3 { font-family: "Outfit", sans-serif; font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 900; letter-spacing: -.025em; color: var(--c-ink); margin: .4rem 0 .8rem; line-height: 1.05; }
    .cd-card p { font-size: 1.02rem; line-height: 1.6; color: var(--c-ink-2); max-width: 50ch; }
    .cd-card-n { font-family: "JetBrains Mono", monospace; font-size: .62rem; font-weight: 800; letter-spacing: .22em; color: var(--c-terra) !important; text-transform: uppercase; }
    .cd-card.cd-card-gold { background: var(--c-mustard); background-image: none; box-shadow: 7px 7px 0 var(--c-ink); }
    .cd-card.cd-card-gold p { color: #6B500F; }
    .cd-card.cd-card-gold .cd-card-n { color: var(--c-ink) !important; }
    .cd-deck-ctrl { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 3.2rem; }
    .cd-deck-btn {
      width: 46px; height: 46px; border-radius: 50%;
      background: var(--c-paper); border: 2.5px solid var(--c-ink); color: var(--c-ink);
      font-size: 1.15rem; font-weight: 900; cursor: pointer;
      box-shadow: 3px 3px 0 var(--c-ink);
      transition: translate .3s cubic-bezier(.3,1.4,.5,1), box-shadow .25s;
    }
    .cd-deck-btn:hover { translate: -2px -2px; box-shadow: 5px 5px 0 var(--c-ink); }
    .cd-deck-btn:active { translate: 1px 1px; box-shadow: 2px 2px 0 var(--c-ink); }
    .cd-deck-count { font-family: "JetBrains Mono", monospace; font-size: .8rem; font-weight: 800; color: var(--c-ink); letter-spacing: .1em; min-width: 52px; text-align: center; }
    .cd-deck-hint { font-family: "Caveat", cursive; font-size: 1.3rem; font-weight: 700; color: var(--c-terra); rotate: -2deg; }

    /* ── connector doodles + handwritten notes on the chapter breaks ── */
    .c-break { height: 84px; }
    .c-break svg { display: none !important; }
    .c-break::before {
      content: ""; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 130px;
      translate: -50% 0;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 92'%3E%3Cpath d='M65 5 C 30 28, 100 50, 62 80' stroke='%2311294A' stroke-width='3' fill='none' stroke-linecap='round' stroke-dasharray='1 9'/%3E%3Cpath d='M53 71 L62 84 L72 72' stroke='%2311294A' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
      opacity: 0; translate: -50% -12px;
      transition: opacity .6s ease-out, translate .7s var(--ease-out-2);
    }
    .c-break.c-in::before { opacity: .9; translate: -50% 0; }
    .c-break::after {
      content: attr(data-note);
      position: absolute; left: calc(50% + 52px); top: 26px;
      font-family: "Caveat", "Outfit", cursive; font-size: 1.45rem; font-weight: 700;
      color: var(--c-terra); rotate: -3deg; white-space: nowrap;
      opacity: 0; transition: opacity .5s ease-out .25s;
    }
    .c-break.c-in::after { opacity: 1; }
    .c-break:nth-of-type(even)::after { left: auto; right: calc(50% + 52px); rotate: 2.5deg; }

    /* ── chapter visuals: gently alive ── */
    .c-route-row { transition: border-color .35s, background .35s, translate .35s; }
    .c-route-row.hot { border-color: rgba(34,211,168,.55); background: rgba(34,211,168,.07); translate: 3px 0; }
    .c-agent-row:nth-child(1) .c-agent-bar span { animation: cd-grow-a 5.5s ease-in-out infinite; }
    .c-agent-row:nth-child(2) .c-agent-bar span { animation: cd-grow-b 7s ease-in-out .8s infinite; }
    @keyframes cd-grow-a { 0%, 100% { width: 32%; } 55% { width: 86%; } }
    @keyframes cd-grow-b { 0%, 100% { width: 14%; } 60% { width: 58%; } }
    .c-mem-ext { animation: cd-extpulse 7.5s ease-in-out infinite; }
    .c-mem-ext:nth-of-type(2) { animation-delay: 2.5s; }
    .c-mem-ext:nth-of-type(3) { animation-delay: 5s; }
    @keyframes cd-extpulse {
      0%, 16%, 100% { border-color: rgba(34,211,168,.2); }
      8% { border-color: rgba(34,211,168,.75); box-shadow: 0 0 14px rgba(34,211,168,.18); }
    }

    /* ── micro-details ── */
    ::selection { background: var(--c-mustard); color: #11294A; }
    html { scrollbar-color: #11294A #DCCCA4; }
    ::-webkit-scrollbar { width: 13px; }
    ::-webkit-scrollbar-track { background: #DCCCA4; }
    ::-webkit-scrollbar-thumb { background: #11294A; border-radius: 7px; border: 3px solid #DCCCA4; }
    :focus-visible { outline: 3px solid var(--c-mustard); outline-offset: 2px; }
    .cd-arcade { font-family: "Caveat", cursive; font-size: 1.25rem; font-weight: 700; color: var(--c-terra); rotate: -1.5deg; margin-top: .3rem; }
    .cd-arcade b { color: var(--c-ink); border-bottom: 2px dashed var(--c-terra); }
    .cd-flag {
      position: fixed; left: 14px; bottom: 14px; z-index: 200;
      font-family: "JetBrains Mono", monospace; font-size: .58rem; font-weight: 900; letter-spacing: .18em;
      text-transform: uppercase; padding: .45rem .8rem;
      background: var(--c-mustard); color: #11294A; border: 2px solid #11294A;
      box-shadow: 3px 3px 0 #11294A; rotate: -2deg; pointer-events: none;
    }

    @media (max-width: 680px) {
      .cd-giant { padding: 3.5rem 1.2rem 2rem; }
      .cd-shots-note { translate: -50% 0; }
      .cd-deck { height: 400px; }
      .cd-card { padding: 1.5rem 1.4rem; }
      .c-break::after { display: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      .cd-giant .w, .cd-m, .cd-badge, .cd-x, .c-break::before, .c-break::after { opacity: 1 !important; translate: none !important; scale: none !important; }
    }

    /* ── V5.1: HEADER, editorial treatment ── */
    .light-mode .header {
      background: rgba(242,232,207,.97) !important;
      backdrop-filter: blur(10px);
      border-bottom: 2.5px solid var(--c-ink) !important;
      box-shadow: 0 3px 0 rgba(17,41,74,.07) !important;
    }
    .light-mode .header.scrolled { box-shadow: 0 6px 16px rgba(10,31,54,.14) !important; }
    .light-mode .logo {
      font-family: "Outfit", sans-serif; font-weight: 900 !important;
      font-size: 1.22rem; letter-spacing: -.02em;
      display: inline-flex; align-items: center; gap: .6rem;
    }
    .light-mode .logo-icon {
      width: 34px; height: 34px; padding: 5px; box-sizing: border-box;
      background: var(--c-mustard); border: 2px solid var(--c-ink);
      border-radius: 9px; box-shadow: 2px 2px 0 var(--c-ink);
      transition: rotate .35s cubic-bezier(.3,1.4,.5,1), box-shadow .25s, translate .3s;
    }
    .light-mode .logo:hover .logo-icon { rotate: -8deg; translate: -1px -1px; box-shadow: 3px 3px 0 var(--c-ink); }
    .light-mode .header-nav a {
      font-weight: 700; color: var(--c-ink-2) !important;
      padding: .45rem .75rem; border-radius: 9px; position: relative;
      transition: background .2s, color .2s;
    }
    .light-mode .header-nav a:hover { color: var(--c-ink) !important; background: var(--c-mustard-tint); }
    .light-mode .header-nav a.active { color: var(--c-ink) !important; background: transparent; }
    .light-mode .header-nav a.active::after {
      content: ""; position: absolute; left: .6rem; right: .6rem; bottom: -1px; height: 7px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 Q 10 2, 18 5 T 34 5 T 50 5 T 58 4' stroke='%23C9632F' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
      border-radius: 0;
    }
    .light-mode .btn-cta {
      background: var(--c-ink) !important; color: var(--c-cream) !important;
      border: 2px solid var(--c-ink) !important; border-radius: 11px;
      font-weight: 800 !important; padding: .6rem 1.25rem !important;
      box-shadow: 3px 3px 0 var(--c-mustard) !important;
      transition: translate .35s cubic-bezier(.3,1.4,.5,1), box-shadow .25s, background .2s !important;
      transform: none !important;
    }
    .light-mode .btn-cta:hover {
      translate: -2px -2px;
      box-shadow: 5px 5px 0 var(--c-mustard) !important;
      background: var(--c-sage-deep) !important;
    }

    /* ── V5.1: refined paper-curl leaf ── */
    .c-fold { width: 110px; height: 110px; }
    .c-fold svg { overflow: visible; transform-origin: 100% 0; animation: cd-flutter 7s ease-in-out 2.5s infinite; }
    .c-fold:hover { transform: scale(1.07); }
    .c-fold:hover svg { animation-play-state: paused; filter: brightness(1.04); }
    @keyframes cd-flutter {
      0%, 22%, 100% { rotate: 0deg; }
      8%  { rotate: -2.6deg; }
      15% { rotate: 1.1deg; }
    }
    .c-fold-label {
      top: 34px; right: 14px; left: auto;
      translate: none; rotate: -38deg; transform: none;
      font-family: "Caveat", "Outfit", cursive;
      font-size: 1.18rem; font-weight: 700; letter-spacing: 0;
      color: #233F63; opacity: .92;
      text-shadow: 0 1px 0 rgba(255,250,232,.75);
      white-space: nowrap;
    }
    .c-fold:hover .c-fold-label { opacity: 1; scale: 1.05; }
    @media (max-width: 900px) {
      .c-fold { width: 86px; height: 86px; }
      .c-fold-label { font-size: .95rem; top: 27px; right: 11px; }
    }
    @media (max-width: 480px) {
      .c-fold { width: 66px; height: 66px; }
      .c-fold-label { font-size: .72rem; top: 20px; right: 8px; }
    }


    /* ── V5.2 BLEND: routing chips in the hero chat ── */
    .cd-route {
      align-self: flex-start;
      font-family: "JetBrains Mono", monospace; font-size: .6rem; font-weight: 700;
      letter-spacing: .04em; color: #C7B6FF !important;
      padding: .3rem .6rem; border-radius: 6px;
      background: rgba(180,157,255,.1); border: 1px solid rgba(180,157,255,.32);
      opacity: 0; translate: 0 8px; transition: opacity .35s, translate .4s cubic-bezier(.3,1.4,.5,1);
    }
    .cd-route b { color: #E4DAFF; font-weight: 800; }
    .cd-route.on { opacity: 1; translate: 0 0; }
    .cd-route-local { color: #22d3a8 !important; background: rgba(34,211,168,.08); border-color: rgba(34,211,168,.3); }
    .cd-route-local b { color: #7BE0A8; }
    .cd-route-l {
      font-size: .5rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase;
      padding: .1rem .35rem; border-radius: 4px; margin-right: .35rem;
      background: rgba(255,255,255,.1); color: inherit !important;
    }

    /* ── V5.2: deck progress dots ── */
    .cd-deck-dots { display: flex; gap: .45rem; justify-content: center; margin-top: 1.1rem; position: relative; z-index: 2; }
    .cd-dot {
      width: 11px; height: 11px; border-radius: 50%; padding: 0; cursor: pointer;
      background: transparent; border: 2px solid var(--c-ink); opacity: .45;
      transition: opacity .25s, background .25s, scale .3s cubic-bezier(.3,1.4,.5,1);
    }
    .cd-dot:hover { opacity: .8; scale: 1.15; }
    .cd-dot.on { background: var(--c-terra); border-color: var(--c-ink); opacity: 1; scale: 1.15; }

    /* ── V5.2: giant-line marker sweeps in ── */
    .cd-giant em { background-size: 0% 100%; background-repeat: no-repeat; transition: background-size .7s cubic-bezier(.4,0,.2,1) .8s; }
    .cd-giant.c-in em { background-size: 100% 100%; }

    /* ── V5.2: polaroids develop like real photos ── */
    .cd-shots > .cd-pol { filter: sepia(.55) contrast(.82) brightness(1.1) blur(1.2px); }
    .cd-shots.c-in > .cd-pol { filter: none; transition: filter 1.1s ease .35s, rotate .45s cubic-bezier(.3,1.4,.5,1), translate .45s cubic-bezier(.3,1.4,.5,1), box-shadow .4s; }
    .cd-shots.c-in > .cd-pol:nth-of-type(2) { transition-delay: .55s, 0s, 0s, 0s; }
    .cd-shots.c-in > .cd-pol:nth-of-type(3) { transition-delay: .75s, 0s, 0s, 0s; }

    /* mini lead-tile grid above the deck */
    .cd-lead { margin-bottom: 1.4rem; }

    /* ════════ V5.3 POLISH PASS ════════ */

    /* chat: typing dots before every AI reply */
    .cd-typing { display: inline-flex; gap: 4px; align-items: center; min-width: 34px; min-height: 1.1em; }
    .cd-typing i {
      width: 6px; height: 6px; border-radius: 50%;
      background: #7BE0A8; display: inline-block;
      animation: cd-tdot 1.1s ease-in-out infinite;
    }
    .cd-typing i:nth-child(2) { animation-delay: .18s; }
    .cd-typing i:nth-child(3) { animation-delay: .36s; }
    @keyframes cd-tdot { 0%, 60%, 100% { translate: 0 0; opacity: .5; } 30% { translate: 0 -4px; opacity: 1; } }

    /* chat: bubbles pop in with a touch of scale */
    .cd-m { scale: .96; transition: opacity .35s ease-out, translate .4s cubic-bezier(.3,1.4,.5,1), scale .4s cubic-bezier(.3,1.4,.5,1); }
    .cd-m.on { scale: 1; }

    /* chat: scene wipe — messages drift up and out */
    .cd-m.out, .cd-badge.out, .cd-route.out, .cd-x-row.out {
      opacity: 0 !important; translate: 0 -12px !important;
      transition: opacity .28s ease-in, translate .28s ease-in !important;
    }

    /* chips: each flies on its own arc */
    .cd-x:nth-child(1).fly { translate: -132px -74px; rotate: -15deg; }
    .cd-x:nth-child(2).fly { translate: -108px -52px; rotate: -6deg; }
    .cd-x:nth-child(3).fly { translate: -88px -66px; rotate: -20deg; }

    /* memory card: green flash when a fact lands, amber pulse when injected */
    .c-stack-card.cs-2 { transition: box-shadow .3s ease; }
    .c-stack-card.cs-2.cd-flash { box-shadow: -6px 6px 0 #22d3a8 !important; }
    .cs-mem.cd-inj { animation: cd-injpulse .7s ease; }
    @keyframes cd-injpulse {
      40% { border-color: rgba(251,191,36,.85); box-shadow: 0 0 12px rgba(251,191,36,.28); translate: 2px 0; }
    }

    /* deck: top card's content staggers in on every flip; lift on hover */
    .cd-card[data-pos="0"] .cd-card-n { animation: cd-cin .4s cubic-bezier(.2,.8,.2,1) both; }
    .cd-card[data-pos="0"] h3        { animation: cd-cin .4s cubic-bezier(.2,.8,.2,1) .06s both; }
    .cd-card[data-pos="0"] p         { animation: cd-cin .4s cubic-bezier(.2,.8,.2,1) .12s both; }
    @keyframes cd-cin { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
    .cd-card[data-pos="0"]:hover { translate: 0 -4px; box-shadow: 9px 11px 0 var(--c-terra); }
    .cd-card.cd-card-gold[data-pos="0"]:hover { box-shadow: 9px 11px 0 var(--c-ink); }

    /* connectors: the dotted arrow draws itself downward */
    .c-break::before {
      clip-path: inset(-8% -8% 105% -8%);
      transition: opacity .3s ease-out, clip-path .8s cubic-bezier(.4, 0, .2, 1);
      translate: -50% 0;
    }
    .c-break.c-in::before { clip-path: inset(-8% -8% -8% -8%); opacity: .9; translate: -50% 0; }

    /* routing chapter: the pill pops when its row is hot */
    .c-route-pill { transition: scale .3s cubic-bezier(.3,1.4,.5,1); }
    .c-route-row.hot .c-route-pill { scale: 1.09; }

    /* giant line: handwritten aside waits for the marker sweep */
    .cd-g-note { opacity: 0; translate: 0 6px; transition: opacity .5s ease-out 1.5s, translate .5s cubic-bezier(.3,1.4,.5,1) 1.5s; }
    .cd-giant.c-in .cd-g-note { opacity: 1; translate: 0 0; }

    /* smooth anchor scrolling (leaf → v2.0 section) */
    html { scroll-behavior: smooth; }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .cd-g-note { opacity: 1 !important; translate: none !important; }
      .cd-card[data-pos="0"] .cd-card-n, .cd-card[data-pos="0"] h3, .cd-card[data-pos="0"] p { animation: none !important; opacity: 1 !important; }
    }

    /* ── V5.4: polaroid miniatures, properly detailed ── */
    .cd-pol-img { min-height: 186px; }
    /* dashboard mini */
    .cd-pol-dash { display: grid; grid-template-columns: 42px 1fr; gap: 6px; padding: 8px; }
    .cd-pd-side { background: rgba(255,255,255,.03); border: 1px solid rgba(220,237,249,.06); border-radius: 4px; padding: 7px 5px; display: flex; flex-direction: column; gap: 6px; }
    .cd-pd-side i { display: block; height: 6px; border-radius: 3px; background: rgba(220,237,249,.13); }
    .cd-pd-side i.on { background: rgba(34,211,168,.6); box-shadow: 0 0 5px rgba(34,211,168,.35); }
    .cd-pd-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
    .cd-pd-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
    .cd-pd-stats b {
      display: block; background: rgba(255,255,255,.04); border: 1px solid rgba(220,237,249,.09);
      border-radius: 4px; padding: 5px 2px 4px; text-align: center;
      font-family: "JetBrains Mono", monospace; font-size: .6rem; font-weight: 800; line-height: 1;
    }
    .cd-pd-stats b u {
      display: block; text-decoration: none; font-size: .4rem; font-weight: 600;
      color: #64748B !important; letter-spacing: .1em; text-transform: uppercase; margin-top: 3px;
    }
    .cd-pd-row {
      display: flex; align-items: center; gap: 5px;
      background: rgba(255,255,255,.03); border: 1px solid rgba(220,237,249,.06);
      border-radius: 4px; padding: 4px 6px;
    }
    .cd-pd-row s { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; text-decoration: none; }
    .cd-pd-row span { height: 5px; border-radius: 2px; background: rgba(220,237,249,.16); }
    .cd-pd-row em {
      margin-left: auto; flex-shrink: 0; font-style: normal;
      font-family: "JetBrains Mono", monospace; font-size: .42rem; font-weight: 700;
      padding: 1px 4px; border-radius: 3px; border: 1px solid;
    }
    /* brain view mini */
    .cd-pol-net2 { padding: 4px 4px 2px; }
    .cd-pol-net2 svg { width: 100%; height: 148px; display: block; }
    .cd-pn-flow { stroke-dasharray: 3 5; animation: cd-edgeflow 1.1s linear infinite; }
    @keyframes cd-edgeflow { to { stroke-dashoffset: -16; } }
    .cd-pn-halo { animation: cd-halo 2.4s ease-in-out infinite; transform-origin: 130px 62px; }
    @keyframes cd-halo { 0%, 100% { opacity: .5; scale: 1; } 50% { opacity: 1; scale: 1.35; } }
    /* TUI mini */
    .cd-pol-term { font-size: .64rem; line-height: 1.65; padding: .8rem .8rem .7rem; }
    .cd-pt-panels { display: grid; grid-template-columns: 1.2fr 1fr; gap: 5px; margin: 5px 0 4px; }
    .cd-pt-panel { border: 1px solid rgba(220,237,249,.12); border-radius: 4px; padding: 4px 6px 5px; }
    .cd-pt-panel > b {
      display: block; font-family: "JetBrains Mono", monospace; font-size: .4rem; font-weight: 700;
      letter-spacing: .14em; text-transform: uppercase; color: #64748B !important; margin-bottom: 4px;
    }
    .cd-pt-spark { display: flex; gap: 2px; align-items: flex-end; height: 17px; }
    .cd-pt-spark i { width: 5px; background: linear-gradient(180deg, #5EC8F8, #2A7FB8); border-radius: 1.5px 1.5px 0 0; display: block; }
    .cd-pt-spark i:nth-child(8) { background: linear-gradient(180deg, #7BE0A8, #2E9E6B); }
    .cd-pt-gauge { height: 7px; border-radius: 3px; background: rgba(220,237,249,.1); overflow: hidden; margin-top: 3px; }
    .cd-pt-gauge span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #E8A934, #F2C24E); }
    .cd-pt-pct { font-family: "JetBrains Mono", monospace; font-size: .5rem; color: #E8A934 !important; font-weight: 800; margin-top: 2px; }

    /* ════════ V5.5: HIGH-FIDELITY POLAROID SCREENS ════════ */
    .cd-pol-lg { width: min(430px, 92vw); }
    .cd-pol-md { width: min(330px, 88vw); }
    .cd-shots { max-width: 1280px; align-items: flex-start; }

    /* screen realism: scanlines + gloss + inner glow */
    .cd-scr { position: relative; background: #0D1220; }
    .cd-scr::before {
      content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
      background: repeating-linear-gradient(180deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px);
    }
    .cd-scr::after {
      content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4;
      background:
        linear-gradient(112deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.02) 22%, transparent 40%),
        radial-gradient(ellipse at 50% 120%, rgba(34,211,168,.05), transparent 60%);
    }
    .cd-pol-bar em { font-style: normal; color: #C9D6E8; font-weight: 700; margin-left: .1rem; }
    .cd-pol-bar u {
      text-decoration: none; margin-left: auto;
      font-size: .48rem; color: #64748B; letter-spacing: .04em;
      background: rgba(255,255,255,.05); border: 1px solid rgba(220,237,249,.08);
      border-radius: 99px; padding: 1px 7px;
    }
    .cd-live-b { font-size: .48rem; color: #22d3a8; font-weight: 800; letter-spacing: .08em; margin-left: 6px; flex-shrink: 0; }

    /* — dashboard miniature — */
    .cd-d2 { display: grid; grid-template-columns: 64px 1fr; min-height: 218px; }
    .cd-d2 aside {
      background: rgba(255,255,255,.025); border-right: 1px solid rgba(220,237,249,.07);
      padding: 7px 6px; display: flex; flex-direction: column; gap: 3px;
      font-family: "JetBrains Mono", monospace; font-size: .44rem; color: #7D93B2;
    }
    .cd-d2-logo {
      width: 16px; height: 16px; border-radius: 4px; margin-bottom: 4px;
      background: linear-gradient(135deg, #22d3a8, #38bdf8);
      color: #04120a; font-weight: 900; font-size: .5rem;
      display: grid; place-items: center;
    }
    .cd-d2-nav { padding: 3px 5px; border-radius: 4px; white-space: nowrap; overflow: hidden; }
    .cd-d2-nav.on { background: rgba(34,211,168,.12); color: #22d3a8; font-weight: 700; box-shadow: inset 2px 0 0 #22d3a8; }
    .cd-d2-on { margin-top: auto; color: #22d3a8; font-size: .4rem; letter-spacing: .1em; }
    .cd-d2-main { padding: 8px 9px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
    .cd-d2-head { display: flex; align-items: baseline; gap: 6px; }
    .cd-d2-head b { font-family: "Outfit", sans-serif; font-size: .68rem; font-weight: 800; color: #E8F0F9; }
    .cd-d2-head span { font-family: "JetBrains Mono", monospace; font-size: .42rem; color: #64748B; }
    .cd-d2-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
    .cd-d2-stats > div {
      background: rgba(255,255,255,.04); border: 1px solid rgba(220,237,249,.08);
      border-radius: 5px; padding: 5px 4px 4px; text-align: center; position: relative;
    }
    .cd-d2-stats b { display: block; font-family: "JetBrains Mono", monospace; font-size: .62rem; font-weight: 800; line-height: 1; }
    .cd-d2-stats span { display: block; font-family: "JetBrains Mono", monospace; font-size: .36rem; color: #64748B; letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }
    .cd-d2-stats u { position: absolute; top: 2px; right: 3px; text-decoration: none; font-family: "JetBrains Mono", monospace; font-size: .34rem; font-weight: 700; }
    .cd-d2-chart {
      background: rgba(255,255,255,.03); border: 1px solid rgba(220,237,249,.07);
      border-radius: 5px; padding: 5px 6px 2px; position: relative;
    }
    .cd-d2-cl { font-family: "JetBrains Mono", monospace; font-size: .38rem; color: #64748B; letter-spacing: .1em; text-transform: uppercase; }
    .cd-d2-chart svg { width: 100%; height: 40px; display: block; margin-top: 2px; }
    .cd-pn-halo2 { animation: cd-halo2 2s ease-in-out infinite; transform-origin: 220px 12px; }
    @keyframes cd-halo2 { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
    .cd-d2-row {
      display: flex; align-items: center; gap: 5px;
      background: rgba(255,255,255,.03); border: 1px solid rgba(220,237,249,.06);
      border-radius: 5px; padding: 4px 6px;
      font-family: "JetBrains Mono", monospace; font-size: .48rem; color: #C9D6E8;
      white-space: nowrap; overflow: hidden;
    }
    .cd-d2-row s { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; text-decoration: none; }
    .cd-d2-row em { margin-left: auto; flex-shrink: 0; font-style: normal; font-size: .38rem; font-weight: 700; padding: 1px 5px; border-radius: 3px; letter-spacing: .06em; }

    /* — brain view miniature — */
    .cd-net3 { padding: 0; }
    .cd-net3 svg { width: 100%; height: 176px; display: block; }

    /* — TUI miniature — */
    .cd-t2 { padding: 7px 8px 8px; font-family: "JetBrains Mono", monospace; }
    .cd-t2-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 6px; }
    .cd-t2-p { border: 1px solid rgba(220,237,249,.14); border-radius: 5px; padding: 5px 7px 6px; display: flex; flex-direction: column; gap: 2px; }
    .cd-t2-p > b { font-size: .4rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #64748B; margin-bottom: 2px; }
    .cd-t2-l { font-size: .5rem; color: #A9BBD4; white-space: nowrap; overflow: hidden; }
    .cd-t2-l i { font-style: normal; }
    .cd-t2-sprow { display: flex; align-items: flex-end; gap: 7px; }
    .cd-t2-big { font-size: .85rem; font-weight: 800; color: #38bdf8; line-height: 1; }
    .cd-t2-log { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
    .cd-t2-log span { font-size: .48rem; color: #A9BBD4; white-space: nowrap; overflow: hidden; }
    .cd-t2-log u { text-decoration: none; color: #5B7290; margin-right: 4px; }
    .cd-t2-log i { font-style: normal; font-weight: 800; letter-spacing: .06em; margin-right: 3px; }

    /* ════════ V5.6: HEAVY MOBILE PASS (≤900px, matches mobile.css breakpoint) ════════ */
    @media (max-width: 900px) {

      /* ── hero chat demo: cards are stacked vertically by mobile.css,
           so extraction chips fly DOWN into the memory card below ── */
      .cd-chat-wrap { padding: .8rem .8rem .9rem; }
      .cd-chat { min-height: 216px; }
      .cd-m { font-size: .78rem; max-width: 94%; }
      .cd-x.fly { translate: 0 120px !important; rotate: 6deg !important; }
      .cd-x:nth-child(1).fly { translate: -20px 130px !important; rotate: 10deg !important; }
      .cd-x:nth-child(2).fly { translate: 0 118px !important; rotate: 4deg !important; }
      .cd-x:nth-child(3).fly { translate: 16px 126px !important; rotate: 12deg !important; }
      .cd-route { white-space: normal; line-height: 1.55; }
      #cdMem { min-height: 96px; }

      /* ── giant line: tighter, still staircased ── */
      .cd-giant { padding: 2.8rem 1.2rem 1.6rem; }
      .cd-giant h2 { font-size: clamp(2.4rem, 11.5vw, 4rem); }
      .cd-giant em { margin-left: clamp(.8rem, 7vw, 2.5rem); }
      .cd-g-note { font-size: 1.25rem; margin-left: clamp(.8rem, 7vw, 2.5rem); }

      /* ── polaroids: horizontal swipe carousel with snap ── */
      .cd-shots {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: .9rem;
        padding: 2.6rem .9rem 1.4rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 96.5%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 96.5%, transparent 100%);
      }
      .cd-shots::-webkit-scrollbar { display: none; }
      .cd-pol, .cd-pol-lg, .cd-pol-md {
        flex: 0 0 84vw; width: 84vw;
        scroll-snap-align: center;
        margin-top: .4rem !important;
      }
      .cd-pol:nth-of-type(odd) { rotate: -.8deg; }
      .cd-pol:nth-of-type(even) { rotate: .7deg; }
      .cd-shots-note { top: .3rem; left: 1.2rem; translate: 0 0; rotate: -3deg; font-size: 1.3rem; }
      .cd-shots::before {
        content: "swipe →";
        position: absolute; top: .55rem; right: 1.2rem;
        font-family: "Caveat", "Outfit", cursive; font-size: 1.25rem; font-weight: 700;
        color: var(--c-terra); rotate: 2deg;
      }
      .cd-d2 { min-height: 196px; }

      /* ── module deck: thumb-sized ── */
      .cd-deck { height: 372px; rotate: 0deg; }
      .cd-card { padding: 1.4rem 1.3rem; border-radius: 14px; box-shadow: 5px 5px 0 var(--c-terra); }
      .cd-card h3 { font-size: clamp(1.3rem, 5.6vw, 1.7rem); }
      .cd-card p { font-size: .92rem; line-height: 1.55; }
      .cd-card.fly { translate: -92vw -60px !important; }
      .cd-card:active { scale: .985; }
      .cd-deck-ctrl { margin-top: 2.4rem; gap: .8rem; flex-wrap: wrap; justify-content: center; }
      .cd-deck-btn { width: 52px; height: 52px; }
      .cd-deck-hint { width: 100%; text-align: center; rotate: 0deg; margin-top: .1rem; }
      .cd-deck-dots { margin-top: .9rem; gap: .6rem; }
      .cd-dot { width: 14px; height: 14px; }

      /* ── lead tiles: compact ── */
      .cd-lead { margin-bottom: 1rem; }
      .cd-lead .c-tile-hero { min-height: 0; padding: 1.6rem 1.4rem; }

      /* ── connectors: shorter, arrows only ── */
      .c-break { height: 58px; }
      .c-break::after { display: none; }

      /* ── header: compact chunky ── */
      .light-mode .logo { font-size: 1.08rem; }
      .light-mode .logo-icon { width: 30px; height: 30px; }
      .light-mode .btn-cta { padding: .5rem .95rem !important; font-size: .82rem !important; box-shadow: 2px 2px 0 var(--c-mustard) !important; }

      /* demo badge: clear the sticky action bar */
      .cd-flag { bottom: 86px; left: 10px; font-size: .5rem; }

      /* arcade hint is a desktop toy (needs a keyboard) */
      .cd-arcade { display: none; }
    }

    /* extra-small phones */
    @media (max-width: 420px) {
      .cd-chat { min-height: 200px; }
      .cd-m { font-size: .74rem; }
      .cd-deck { height: 396px; }
      .cd-pol, .cd-pol-lg, .cd-pol-md { flex-basis: 88vw; width: 88vw; }
      .cd-giant h2 { font-size: 2.15rem; }
    }

    /* ════════ V5.7: MOBILE PERSONALITY — the desktop's soul, phone-sized ════════
       mobile.css flattens everything for safety; this layer puts the charm
       back deliberately: peeking watermarks, garnish shapes, hand-placed
       tilts, entrance animation, handwritten notes, a scroll progress bar. */
    @media (max-width: 900px) {

      /* chapter numerals peek from the edges again (small, behind content) */
      .c-wm {
        display: block !important;
        font-size: 6.4rem !important;
        opacity: .55;
        z-index: 0;
      }

      /* a few floating shapes return as garnish — small, faint, out of the way */
      .c-hero .c-deco, .c-closing .c-deco {
        display: block !important;
        scale: .58;
        opacity: .5;
      }

      /* stickers: back to a tilted hand-slapped pair, not full-width banners */
      .c-sticker, .c-sticker + .c-sticker {
        display: inline-flex !important;
        width: auto !important;
        margin: 0 .4rem .4rem 0 !important;
        rotate: -2.2deg;
      }
      .c-sticker + .c-sticker { rotate: 2.4deg; }

      /* hero cards deal in on load (mobile.css kills transform anims;
         these use translate/opacity so they survive) */
      .c-stack-card.cs-1 { animation: cs-deal .8s cubic-bezier(.3,1.3,.5,1) .1s both !important; }
      .c-stack-card.cs-2 { animation: cs-deal .8s cubic-bezier(.3,1.3,.5,1) .28s both !important; }
      .c-stack-card.cs-3 { animation: cs-deal .8s cubic-bezier(.3,1.3,.5,1) .44s both !important; }

      /* hand-placed micro-tilts so full-width cards don't read as slabs */
      .c-stack-card.cs-1 { rotate: -.5deg; }
      .c-stack-card.cs-2 { rotate: .7deg; }
      .c-stack-card.cs-3 { rotate: -.4deg; }
      .c-band:nth-of-type(odd) .c-visual { rotate: .6deg; }
      .c-band:nth-of-type(even) .c-visual { rotate: -.5deg; }
      .c-tiers .c-t:nth-child(odd) { rotate: -.4deg; }
      .c-tiers .c-t:nth-child(even) { rotate: .4deg; }
      .c-wn-card:nth-child(odd) { rotate: -.35deg !important; }
      .c-wn-card:nth-child(even) { rotate: .3deg !important; }

      /* giant line becomes a full-viewport stop moment */
      .cd-giant {
        min-height: 44vh;
        display: flex; flex-direction: column; justify-content: center;
      }

      /* connector notes return, centered under the arrow */
      .c-break { height: 82px; }
      .c-break::after,
      .c-break:nth-of-type(even)::after {
        display: block;
        left: 50%; right: auto; top: auto; bottom: -4px;
        translate: -50% 0; rotate: -2deg;
        font-size: 1.2rem;
      }

      /* everything tappable squishes — cheap haptics */
      .c-tile:active, .c-t:active, .c-wn-card:active, .c-visual:active,
      .c-btn:active, .c-ship-cta:active, .c-t-cta:active, .cd-pol:active {
        scale: .98;
        transition: scale .12s ease;
      }

      /* thin terra scroll-progress ribbon (injected by demo js) */
      #cdProg {
        position: fixed; top: 0; left: 0; height: 3px; width: 0;
        background: linear-gradient(90deg, var(--c-terra), var(--c-mustard));
        z-index: 130; pointer-events: none;
        box-shadow: 0 1px 4px rgba(201,99,47,.4);
      }
    }
    @media (max-width: 900px) and (prefers-reduced-motion: reduce) {
      .c-stack-card.cs-1, .c-stack-card.cs-2, .c-stack-card.cs-3 { animation: none !important; }
      #cdProg { display: none; }
    }

    /* ════════ V5.8: MOBILE SCROLL DIET — vertical becomes horizontal ════════ */
    @media (max-width: 900px) {

      /* chapters become one swipeable carousel (JS builds .cd-chapwrap) */
      .cd-chapwrap { padding: .6rem 0 1.6rem; }
      .cd-chapnote {
        font-family: "Caveat", "Outfit", cursive; font-size: 1.35rem; font-weight: 700;
        color: var(--c-terra); rotate: -2deg; padding: 0 1.2rem .5rem;
      }
      .cd-chapcar {
        display: flex; gap: .8rem;
        overflow-x: auto; scroll-snap-type: x mandatory;
        padding: .4rem 1rem 1rem;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
      }
      .cd-chapcar::-webkit-scrollbar { display: none; }
      .cd-chapslide {
        flex: 0 0 88vw; width: 88vw;
        scroll-snap-align: center;
        border: 2px solid var(--c-ink) !important;
        border-radius: 16px;
        padding: 1.4rem 1.1rem 1.5rem !important;
        margin: 0 !important;
        box-shadow: 4px 4px 0 var(--c-line);
        overflow: hidden;
        position: relative;
      }
      .cd-chapslide:nth-child(odd) { rotate: -.4deg; }
      .cd-chapslide:nth-child(even) { rotate: .4deg; }
      .cd-chapslide .c-band-inner { padding: 0 !important; }
      .cd-chapslide .c-band-grid { gap: 1.1rem !important; }
      .cd-chapslide .c-display { font-size: clamp(1.5rem, 6.4vw, 2rem) !important; }
      .cd-chapslide .c-band-sub {
        font-size: .92rem !important;
        display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
      }
      /* trim inside slides: 3 bullets, 4 route rows, 2 agents, extraction tighter */
      .cd-chapslide .c-feat-list { margin-top: 1rem !important; gap: .45rem !important; }
      .cd-chapslide .c-feat-list li { font-size: .84rem !important; padding-bottom: .45rem !important; }
      .cd-chapslide .c-feat-list li:nth-child(n+4) { display: none; }
      .cd-chapslide .c-route-row:nth-child(n+5) { display: none; }
      .cd-chapslide .c-agent-row:nth-child(n+3) { display: none; }
      .cd-chapslide .c-mem-flow { padding: 1rem !important; }
      .cd-chapslide .c-mem-msg { font-size: .82rem !important; padding: .7rem .8rem !important; }
      .cd-chapslide .cd-note { font-size: 1.2rem; margin-top: .5rem; }
      .cd-chapdots { display: flex; gap: .55rem; justify-content: center; margin-top: .9rem; }
      .cd-chapdots i {
        width: 12px; height: 12px; border-radius: 50%;
        border: 2px solid var(--c-ink); opacity: .4; transition: opacity .25s, background .25s;
      }
      .cd-chapdots i.on { background: var(--c-terra); opacity: 1; }

      /* what's-new band: desktop-only (the deck already tells v2.0) */
      .c-whatsnew { display: none !important; }

      /* dashboard mock: stats only — the polaroids show the rest */
      .mock-dash-cols { display: none !important; }
      .c-dash-inner .mock-dash-grid { min-height: 0 !important; }
      .c-dash { padding: 2.6rem 0 !important; }

      /* lead tiles: hero tile only (gold deck card repeats the stat) */
      .cd-lead .c-tile-stat { display: none; }

      /* tighter global rhythm */
      .c-band { padding: 2.4rem 0 !important; }
      .c-hero { padding: 3.2rem 0 1.8rem !important; }
      .c-pricing-band { padding: 2.6rem 0 !important; }
      .c-closing { padding: 3.2rem 0 2.4rem !important; }
      .c-ship-inner { padding: 1.6rem 1.2rem 1.4rem !important; }
      .cd-shots { padding-bottom: 1rem; }
      .cd-giant { min-height: 38vh; }
      .c-break { height: 66px; }
    }

    /* ════════ V5.9: MOBILE BREATHING ROOM + STICKY BAR FIX ════════ */
    @media (max-width: 900px) {

      /* sticky bar: pinned, no scroll-toggle bounce (behavior neutralized in JS) */
      #m-stickybar {
        transition: opacity .2s ease !important;
        transform: none !important;
      }
      #m-stickybar.m-hidden { transform: none !important; opacity: 1 !important; }
      /* content never hides underneath it */
      .c-foot { padding-bottom: 108px !important; }

      /* ── breathing room where it got cramped ── */
      .c-hero { padding: 3.7rem 0 2.2rem !important; }
      .c-hero-sub { margin-top: 1.2rem !important; line-height: 1.65 !important; }
      .c-hero-cta { margin-top: 1.6rem !important; }
      .c-hero-meta { margin-top: 1.5rem !important; gap: .7rem 1.3rem !important; }
      .c-band-inner { padding: 0 1.4rem !important; }
      .c-ship-inner { padding: 2rem 1.4rem 1.8rem !important; gap: 1.5rem !important; }
      .c-ship-right { gap: .65rem !important; }
      .c-marquee { margin: .9rem 0 !important; }
      .cd-chapwrap { padding: 1rem 0 2rem; }
      .cd-chapnote { padding-bottom: .7rem; }
      .cd-chapcar { gap: 1rem; padding: .4rem 1.1rem 1.1rem; }
      .cd-chapslide { padding: 1.7rem 1.35rem 1.8rem !important; }
      .cd-chapslide .c-band-grid { gap: 1.4rem !important; }
      .cd-chapslide .c-feat-list { margin-top: 1.2rem !important; gap: .55rem !important; }
      .c-dash-head { margin-bottom: 1.7rem !important; }
      .c-dash-hint { margin-top: 1.3rem !important; }
      .cd-shots { padding-top: 3.1rem; gap: 1.1rem; }
      #coming .c-band-inner > div:first-child { margin-bottom: 2rem !important; }
      .cd-lead { margin-bottom: 1.5rem; }
      .cd-deck-ctrl { margin-top: 2.6rem; }
      .c-pricing-head { margin-bottom: 1.6rem !important; }
      .cd-giant { min-height: 40vh; padding-top: 3.2rem; padding-bottom: 2.2rem; }
      .c-closing-inner { padding: 0 1.4rem !important; }
      .c-closing .c-eyebrow { margin-bottom: .4rem; }
      .c-closing-note { margin-top: 1.1rem !important; }
    }

    /* ════════ V6: SCREENSHOT-VERIFIED MOBILE FIXES ════════ */

    /* eyebrows inside dark sections were washed out by the global
       light-pill override — restore their dark-section styling (all viewports) */
    .light-mode .c-dash .c-eyebrow,
    .light-mode .cd-chapslide.b-dark .c-eyebrow {
      background: rgba(34,211,168,.12) !important;
      color: #22d3a8 !important;
      border-color: rgba(34,211,168,.35) !important;
    }
    .light-mode .c-closing .c-eyebrow {
      background: rgba(34,211,168,.1) !important;
      color: #22d3a8 !important;
      border-color: rgba(34,211,168,.3) !important;
    }
    /* dark hero tile: badge was a washed pill overlapping the title */
    .c-tile-dark .c-tile-badge.b-pro {
      background: rgba(34,211,168,.14) !important;
      color: #22d3a8 !important;
      border: 1px solid rgba(34,211,168,.35);
    }

    /* connector doodles: arrow draws in the upper zone, note sits fully below it */
    .c-break::before { bottom: 30px; }
    .c-break::after { top: auto; bottom: 2px; }
    .c-break:nth-of-type(even)::after { top: auto; bottom: 2px; }
    .c-break { height: 96px; }

    @media (max-width: 900px) {
      /* hero headline: strike + circle lines were colliding */
      .c-hero h1 { line-height: 1.06 !important; }
      .c-hero h1 .hl.hl-3 { margin-top: .16em; }
      .c-hero h1 .hl.hl-2 { margin-left: 0 !important; }
      .c-hero h1 .hl.hl-3 { margin-left: clamp(.4rem, 3vw, 1.6rem) !important; }
      /* the mustard star sat behind the headline text */
      .c-hero .c-deco.float-a { display: none !important; }

      /* chapter slides: narrower so the next card peeks, shorter inside */
      .cd-chapcar { gap: .7rem; }
      .cd-chapslide { flex: 0 0 82vw; width: 82vw; }
      .cd-chapslide .c-mem-ext:nth-of-type(3) { display: none; }
      .cd-chapslide .c-mem-arrow-v { padding: .5rem 0 !important; }
      .cd-chapslide .c-mem-ext { padding: .6rem .8rem !important; }
      .cd-chapslide .c-display { margin-top: .8rem !important; }

      /* demo flag: bottom-left, above the sticky bar, away from the chatbot */
      .cd-flag {
        bottom: 100px; left: 8px; top: auto; right: auto;
        font-size: .44rem; padding: .28rem .5rem;
        opacity: .9; rotate: -2deg;
      }

      /* chatbot bubble: sat on top of the sticky action bar */
      #ucb-root { bottom: 96px !important; right: 10px !important; }
      #ucb-bubble { width: 52px !important; height: 52px !important; font-size: 1.3rem !important; }

      /* dashboard watermark numeral: quieter behind the heading */
      .c-dash .c-wm { opacity: .3; }

      /* connector zones on mobile */
      .c-break { height: 88px; }
      .c-break::before { bottom: 26px; }

      /* ship chips: two columns even on small phones */
      .c-ship-right { grid-template-columns: 1fr 1fr !important; }
      .c-ship-chip { font-size: .68rem !important; padding: .5rem .55rem !important; }

      /* lead tile badge: static above the title instead of overlapping it */
      .cd-lead .c-tile-badge {
        position: static !important;
        display: inline-flex; width: fit-content;
        margin-bottom: .6rem;
      }
      .cd-lead .c-tile-hero { display: block; }
    }

    /* ════════ V6.1: CONTRAST FIXES (automated audit) ════════
       Root cause on most: uplift's global link-sage + color:inherit rules
       overpaint component text. Scoped !important restorations. */

    /* buttons that were dark-on-dark or sage-on-sage until hover */
    .light-mode .cta-banner .btn-ghost {
      color: var(--c-cream) !important;
      border-color: rgba(232,220,189,.55) !important;
    }
    .light-mode .cta-banner .btn-ghost:hover { color: var(--c-ink) !important; }
    .light-mode .c-btn-primary { color: var(--c-cream) !important; }
    .light-mode .c-closing .c-btn-primary { color: #04120a !important; }
    .light-mode .c-btn-ghost { color: var(--c-ink) !important; }
    .light-mode .c-closing .c-btn-ghost { color: var(--c-dark-text) !important; }
    .light-mode .c-ship-cta { color: var(--c-cream) !important; }
    .light-mode .c-t-cta { color: var(--c-cream) !important; }
    .light-mode .c-t-pro .c-t-cta { color: #04120a !important; }
    .light-mode .cc-btn { color: var(--c-ink) !important; }              /* base: mustard bg */
    .light-mode .cc-trial .cc-btn,
    .light-mode .cc-pro .cc-btn,
    .light-mode .cc-premium .cc-btn,
    .light-mode .cc-enterprise .cc-btn { color: var(--c-cream) !important; }
    .light-mode .cc-business .cc-btn { color: var(--c-mustard) !important; }

    /* homepage bits uplift overpainted to ink-on-dark */
    .light-mode .c-t-min-pill, .light-mode .c-t-min-pill b { color: var(--c-mustard) !important; }
    .light-mode .ts-more { color: var(--c-cream) !important; }
    .light-mode .plug-cmd-title { color: #7A8FAA !important; }

    /* polaroid miniature text (was inherited ink on near-black) */
    .light-mode .cd-d2 aside, .light-mode .cd-d2-nav { color: #7D93B2 !important; }
    .light-mode .cd-d2-nav.on { color: #22d3a8 !important; }
    .light-mode .cd-d2-on { color: #22d3a8 !important; }
    .light-mode .cd-d2-head b { color: #E8F0F9 !important; }
    .light-mode .cd-d2-head span { color: #64748B !important; }
    .light-mode .cd-d2-cl { color: #64748B !important; }
    .light-mode .cd-d2-row { color: #C9D6E8 !important; }
    .light-mode .cd-d2-stats span { color: #64748B !important; }
    .light-mode .cd-t2-l { color: #A9BBD4 !important; }
    .light-mode .cd-t2-log span { color: #A9BBD4 !important; }
    .light-mode .cd-t2-log u { color: #5B7290 !important; }
    .light-mode .cd-pol-bar { color: #8DA8C7 !important; }
    .light-mode .cd-pol-bar em { color: #C9D6E8 !important; }
    .light-mode .cd-pol-bar u { color: #64748B !important; }

    /* washed inline colors on light sections (scoped to .page-section so
       dark-card inline colors are untouched) */
    .light-mode .page-section [style*="a78bfa"] { color: var(--c-plum) !important; }
    .light-mode .page-section div[style*="color:#fff"], .light-mode .page-section h4[style*="color:#fff"],
    .light-mode .page-section span[style*="color:#fff"], .light-mode .page-section a[style*="color:#fff"] { color: var(--c-ink) !important; }
    .light-mode .page-section [style*="var(--c-sage)"] { color: var(--c-sage-deep) !important; }
    .light-mode .tc-behavior { color: var(--c-mustard-deep) !important; }
    .light-mode .b-learn, .light-mode .r-link { color: var(--c-sage-deep) !important; }
    .light-mode #ucb-root small { color: #1F5C2E !important; }

    /* general link + footer contrast bump on cream */
    .light-mode .c-foot-links a, .light-mode .eb-footer a { color: var(--c-sage-deep) !important; }
    .light-mode main a:not([class]) { color: var(--c-sage-deep) !important; }

    /* ════════ V6.2: CONTRAST ROUND 2 ════════ */
    /* inline colors written as var() that round 1's literal matches missed */
    .light-mode .page-section [style*="var(--purple)"] { color: var(--c-plum) !important; }
    .light-mode .page-section [style*="var(--neon)"] { color: #14805F !important; }
    .light-mode .page-section [style*="var(--gold)"] { color: var(--c-mustard-deep) !important; }
    .light-mode .page-section [style*="var(--text)"] { color: var(--c-ink) !important; }
    .light-mode .page-section [style*="var(--c-mustard)"] { color: var(--c-mustard) !important; }

    /* homepage: what's-new tape (ink-on-plum), pro-card CTA, chapter accents */
    html .light-mode .c-wn-tape { color: var(--c-cream) !important; }
    html .light-mode .c-t-pro .c-t-cta { color: #04120a !important; }
    .light-mode .c-band:not(.b-dark) .c-display em { color: var(--c-sage-deep); }

    /* multi-user diagram labels: pale teal/blue on white boxes */
    .light-mode .iso-user, .light-mode .sc-label { color: #1A3555 !important; }
    .light-mode .mu-eyebrow { color: var(--c-sage-deep) !important; }

    /* accent words: sage was borderline everywhere on cream */
    .light-mode .acc { color: var(--c-sage-deep) !important; }

    /* ════════ V6.3: eyebrow + pricing-band accent contrast ════════ */
    .light-mode [class*="eyebrow"] { color: var(--c-sage-deep) !important; }
    /* restate dark-section eyebrows AFTER the global bump */
    .light-mode .c-dash .c-eyebrow,
    .light-mode .cd-chapslide.b-dark .c-eyebrow,
    .light-mode .c-band.b-dark .c-eyebrow { color: #22d3a8 !important; }
    .light-mode .c-closing .c-eyebrow { color: #22d3a8 !important; }
    .light-mode .c-eyebrow.e-terra { color: var(--c-terra) !important; }
    .light-mode .c-eyebrow.e-mustard { color: var(--c-mustard-deep) !important; }
    .light-mode .c-pricing-band .c-display em { color: var(--c-sage-deep); }

    /* V6.4: last audit stragglers */
    .light-mode .c-band.b-dark .c-eyebrow {
      background: rgba(34,211,168,.12) !important;
      border-color: rgba(34,211,168,.35) !important;
    }
    .light-mode .c-agent-st.idle { color: #64748B !important; }

    /* ════════ V6.5: EDITORIAL LOGO ════════ */
    .light-mode svg.logo-icon { display: block; }
    .light-mode .cd-logoword {
      font-family: "Outfit", sans-serif; font-weight: 900;
      letter-spacing: -.02em; color: var(--c-ink);
    }
    .light-mode .cd-logoword b { color: var(--c-terra); font-weight: 900; }
    /* scissors snip on hover */
    .cd-lb-l, .cd-lb-r {
      transform-origin: 24px 27px;
      transition: rotate .45s cubic-bezier(.3,1.6,.5,1);
    }
    .light-mode .logo:hover .cd-lb-l { rotate: -7deg; }
    .light-mode .logo:hover .cd-lb-r { rotate: 7deg; }

    /* ════════ V6.6: DESKTOP RHYTHM — close the dead air ════════ */
    .c-hero { padding: 7rem 0 3.2rem; }
    .c-break { height: 72px; margin: -.6rem auto; }
    .c-ship { margin-top: .5rem; }
    .c-band { padding: 4.8rem 0; }
    .c-dash { padding: 5rem 0 3.8rem; }
    .c-dash-head { margin-bottom: 2.2rem; }
    .c-dash-hint { margin-top: 1.2rem; }
    .c-pricing-band { padding: 5rem 0; }
    .c-closing { padding: 6rem 0 4.2rem; }
    .cd-giant { padding-top: 3.4rem; padding-bottom: 1.8rem; }
    .cd-shots { padding-top: 1.6rem; padding-bottom: 1.4rem; }
    #coming .cd-lead { margin-bottom: 1.2rem; }
    .cd-deck-ctrl { margin-top: 2.2rem; }
    .c-whatsnew { margin-top: .4rem; }
    .c-hero-meta { margin-top: 2rem; }

    /* V6.7: mobile collision fixes */
    @media (max-width: 900px) {
      .c-ship { margin-top: 1.5rem !important; }
      .c-break { margin-bottom: .4rem; }
    }

    /* ════════ V7: READABILITY PASS (WCAG-driven) ════════ */

    /* dim text was 3.5:1 — one variable fixes it everywhere */
    :root.light-mode { --c-dim: #47617F; }

    /* links: sage-deep was still only 3.2:1 on cream */
    .light-mode main a:not([class]) { color: #1E5FA5 !important; }
    .light-mode .c-foot-links a, .light-mode .eb-footer a { color: #1E5FA5 !important; }
    .light-mode .b-learn, .light-mode .r-link { color: #1E5FA5 !important; }
    .light-mode main a[style*="color:#fff"] { color: #1E5FA5 !important; }

    /* closing: teal button was cream-on-teal — go ink like everything else */
    .light-mode .c-closing .c-btn-primary {
      background: var(--c-ink) !important;
      color: var(--c-cream) !important;
    }
    .light-mode .c-closing .c-btn-primary:hover { background: var(--c-sage-deep) !important; }

    /* terra accents on cream: deepen to pass */
    .light-mode .c-band.b-cream-2 .c-display em { color: var(--c-terra-deep); }
    .light-mode .c-eyebrow.e-terra { color: var(--c-terra-deep) !important; }
    .light-mode .c-sticker.c-sticker-terra { background: var(--c-terra-deep); }
    .light-mode .page-section [style*="var(--c-terra)"] { color: var(--c-terra-deep) !important; }
    .light-mode .how-demo-badge { color: var(--c-terra-deep) !important; font-size: .72rem !important; }

    /* mustard-deep numbers on cream (file limits, uptime) */
    .light-mode .c-t-free .c-t-limit-v, .light-mode .plug-core-stat:nth-child(3) .plug-core-stat-v { color: #8A5E0B !important; }

    /* tier CTAs: cream on mid-sage/terra → deep variants */
    .light-mode .c-tiers .c-t:nth-child(2) .c-t-cta { background: var(--c-sage-deep) !important; }
    .light-mode .c-tiers .c-t:nth-child(2) .c-t-cta:hover { background: #25659F !important; }

    /* footers */
    .light-mode .c-foot, .light-mode .eb-footer { color: var(--c-ink-2) !important; }

    /* tiny type floor: badges and labels under ~11px get bumped */
    .light-mode .cd-card-tier { font-size: .64rem !important; }
    .light-mode .c-wn-tier { font-size: .62rem !important; }
    .light-mode .c-tile .c-tile-badge { font-size: .6rem !important; }
    .light-mode .c-stat-label { font-size: .72rem !important; }
    .light-mode [style*="font-size:.55rem"] { font-size: .62rem !important; }
    .light-mode [style*="font-size:.6rem"] { font-size: .66rem !important; }
    .light-mode #ucb-root small { font-size: .6rem !important; }
    .light-mode .c-eyebrow { letter-spacing: .14em; }

    /* ════════ V7.1: READABILITY ROUND 2 ════════ */
    /* badge text colors that were mid-tone on tint */
    .light-mode .cd-card-tier.t-pro { color: var(--c-terra-deep) !important; }
    .light-mode .c-wn-tier { color: var(--c-terra-deep) !important; }
    .light-mode .c-wn-plum .c-wn-tier { color: var(--c-plum) !important; }
    .light-mode .c-tile-badge.b-pro { color: #25659F !important; }
    .light-mode [class*="eyebrow"] { color: #1E5FA5 !important; }
    .light-mode .c-dash .c-eyebrow, .light-mode .c-band.b-dark .c-eyebrow,
    .light-mode .c-closing .c-eyebrow { color: #22d3a8 !important; }
    .light-mode .c-eyebrow.e-terra { color: var(--c-terra-deep) !important; }
    .light-mode .c-eyebrow.e-mustard { color: #8A5E0B !important; }

    /* hero em: 2.9 → just over the large-text line, same terra feel */
    .light-mode .c-hero h1 em { color: #B85422; }

    /* waitlist CTAs on sage: go ink (pro card keeps its teal) */
    .light-mode .c-t-cta { background: var(--c-ink) !important; color: var(--c-cream) !important; }
    .light-mode .c-t-cta:hover { background: var(--c-sage-deep) !important; }
    .light-mode .c-t-pro .c-t-cta { background: #22d3a8 !important; color: #04120a !important; }
    .light-mode .c-t-pro .c-t-cta:hover { background: #2AE8BB !important; }

    /* stat tile label on terra */
    .light-mode .c-tile-terra .c-stat-label { color: #FFF3E0 !important; }
    .light-mode .c-t-limit-v { color: #8A5E0B !important; }
    .light-mode .c-t:nth-child(2) .c-t-limit-v { color: #25659F !important; }
    .light-mode .c-t:nth-child(4) .c-t-limit-v { color: var(--c-plum) !important; }
    .light-mode .c-t-pro .c-t-limit-v { color: #7BE0A8 !important; }

    /* inline mid-tone rescues */
    .light-mode main [style*="var(--c-mustard-deep)"] { color: #7A5407 !important; }
    .light-mode main [style*="var(--c-sage-deep)"] { color: #25659F !important; }
    .light-mode main [style*="color:#76b900"], .light-mode main h4[style*="#4F7D0A"] { color: #365D00 !important; }

    /* micro-type floor: nothing readable below ~10.5px */
    .light-mode [style*="font-size:.5rem"], .light-mode [style*="font-size:.52rem"],
    .light-mode [style*="font-size:.55rem"], .light-mode [style*="font-size:.58rem"],
    .light-mode [style*="font-size:.6rem"], .light-mode [style*="font-size:.62rem"] { font-size: .68rem !important; }
    .light-mode .cd-card-tier, .light-mode .c-wn-tier, .light-mode .c-agent-st,
    .light-mode .plug-core-tape, .light-mode .plug-cmd-title, .light-mode .next-label { font-size: .68rem !important; }
    .light-mode .c-agent-st.idle { color: #47617F !important; }

    /* ════════ V7.2: READABILITY FINAL ════════ */
    /* standard-tier button: my earlier sage-deep rule outranked the ink fix */
    .light-mode .c-tiers .c-t:nth-child(2) .c-t-cta { background: var(--c-ink) !important; }
    .light-mode .c-tiers .c-t:nth-child(2) .c-t-cta:hover { background: var(--c-sage-deep) !important; }

    /* idle agent label lives on a DARK card — go lighter, not darker */
    .light-mode .c-agent-st.idle { color: #7E94B0 !important; }

    /* v2.0 stat tile: mustard bg + ink family */
    .light-mode .c-tile-terra.c-tile-stat { background: var(--c-mustard) !important; }
    .light-mode .c-tile-terra .c-stat-num { color: var(--c-ink) !important; }
    .light-mode .c-tile-terra .c-stat-label { color: #5B3E06 !important; }

    /* gold deck card copy + mustard-tint numbers: darker */
    .light-mode .cd-card-gold p { color: #523D08 !important; }
    .light-mode .c-t-limit-v { color: #745006 !important; }
    .light-mode main [style*="var(--c-sage)"] { color: #25659F !important; }
    .light-mode main [style*="var(--c-mustard-deep)"] { color: #745006 !important; }

    /* marquee dim items on coffee band */
    .light-mode .c-mq-item.u-dim { color: #9FB6D6 !important; }

    /* white inline links: blue on cream, but stay white inside navy banners */
    .light-mode .cta-banner a[style*="color:#fff"] { color: #fff !important; }

    /* remaining sub-10.5px labels (all already high-contrast) */
    .light-mode .c-ship-tape, .light-mode .c-wn-tape { font-size: .66rem !important; }
    .light-mode .c-t-min-pill { font-size: .64rem !important; }
    .light-mode .cd-mem-empty { font-size: .68rem !important; }
    .light-mode .cd-card-n { font-size: .68rem !important; }
    .light-mode .c-t-limit-l, .light-mode .c-t-seats { font-size: .56rem !important; }
    .light-mode .plug-core-trio { font-size: .66rem !important; }
    .light-mode .plug-core-stat-l { font-size: .62rem !important; }

    /* V7.3 */
    .light-mode .c-t-free .c-t-limit-v { color: #745006 !important; }
    .light-mode .c-t:nth-child(2) .c-t-limit-v { color: #1E5FA5 !important; }

    /* ═══ DEMO SITE LAYOUT POLISH — subpages only ═══
       Brings every inner page's layout up to the demo homepage's energy:
       chunky editorial cards with scattered tilts, tighter rhythm. */

    /* section rhythm: less dead air */
    .light-mode .page-section { padding: 3.2rem 1.5rem !important; }
    .light-mode .sec-head { margin-bottom: 1.8rem !important; }
    .light-mode .sec-head p { max-width: 58ch; margin-left: auto; margin-right: auto; }
    .light-mode .section-bridge { padding: .6rem 0 !important; }

    /* generic cards → chunky editorial with rotating accent shadows */
    .light-mode .int-card, .light-mode .dl-card, .light-mode .res-card,
    .light-mode .step-card, .light-mode .trust-card, .light-mode .stat-card,
    .light-mode .pillar, .light-mode .ch-card, .light-mode .faq-item {
      background: var(--c-paper) !important;
      border: 2px solid var(--c-ink) !important;
      border-radius: 14px !important;
      box-shadow: 4px 4px 0 var(--c-line) !important;
      transition: translate .4s cubic-bezier(.3,1.4,.5,1), box-shadow .3s, rotate .3s !important;
    }
    .light-mode :is(.int-card, .dl-card, .res-card, .step-card, .trust-card, .stat-card, .pillar, .ch-card):nth-child(3n+1) { box-shadow: 4px 4px 0 var(--c-sage) !important; rotate: -.35deg; }
    .light-mode :is(.int-card, .dl-card, .res-card, .step-card, .trust-card, .stat-card, .pillar, .ch-card):nth-child(3n+2) { box-shadow: 4px 4px 0 var(--c-terra) !important; rotate: .3deg; }
    .light-mode :is(.int-card, .dl-card, .res-card, .step-card, .trust-card, .stat-card, .pillar, .ch-card):nth-child(3n) { box-shadow: 4px 4px 0 var(--c-mustard) !important; rotate: -.25deg; }
    .light-mode :is(.int-card, .dl-card, .res-card, .step-card, .trust-card, .stat-card, .pillar, .ch-card):hover {
      translate: -3px -3px; rotate: 0deg;
      box-shadow: 7px 7px 0 var(--c-ink) !important;
    }
    .light-mode .faq-item { rotate: 0deg !important; }

    /* headings get the editorial weight */
    .light-mode .sec-head h2 { font-weight: 900 !important; letter-spacing: -.03em !important; }

    @media (max-width: 900px) {
      .light-mode .page-section { padding: 2.4rem 1.1rem !important; }
      .light-mode :is(.int-card, .dl-card, .res-card, .step-card, .trust-card, .stat-card, .pillar, .ch-card):active { scale: .98; }
    }

    /* ═══ SPRUCE LAYER — homepage signatures on every page ═══ */

    /* accent words get the mustard marker swipe (sweeps in on reveal) */
    .light-mode .sec-head .acc {
      color: var(--c-ink) !important;
      -webkit-text-fill-color: var(--c-ink) !important;
      background-image: linear-gradient(180deg, transparent 58%, var(--c-mustard) 58%, var(--c-mustard) 94%, transparent 94%) !important;
      background-repeat: no-repeat !important;
      background-size: 100% 100%;
      padding: 0 .12em;
    }
    .light-mode .sec-head:is(.reveal, .reveal-dramatic) .acc { background-size: 0% 100%; transition: background-size .65s cubic-bezier(.4,0,.2,1) .45s; }
    .light-mode .sec-head:is(.reveal, .reveal-dramatic).show .acc { background-size: 100% 100%; }

    /* section bridges → hand-drawn dotted arrow + handwritten note */
    .light-mode .cd-bridge { position: relative; height: 92px !important; padding: 0 !important; }
    .light-mode .cd-bridge::before { display: none; }
    .light-mode .cd-bridge .bridge-icon { display: none !important; }
    .light-mode .cd-bridge::after {
      content: ""; position: absolute; left: 50%; top: 2px; bottom: 30px; width: 120px;
      translate: -50% 0;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 92'%3E%3Cpath d='M65 5 C 30 28, 100 50, 62 80' stroke='%2311294A' stroke-width='3' fill='none' stroke-linecap='round' stroke-dasharray='1 9'/%3E%3Cpath d='M53 71 L62 84 L72 72' stroke='%2311294A' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
      opacity: .85;
    }
    .light-mode .cd-bridge b.cd-bridge-note {
      position: absolute; left: 50%; bottom: 0; translate: -50% 0; rotate: -2.5deg;
      font-family: "Caveat", "Outfit", cursive; font-size: 1.3rem; font-weight: 700;
      color: var(--c-terra); white-space: nowrap;
    }

    /* floating garnish shapes (JS-injected) */
    .light-mode main { position: relative; }
    .cd-garnish { position: absolute; pointer-events: none; z-index: 1; opacity: .6; animation: c-float-a 8s ease-in-out infinite; }
    .cd-garnish:nth-of-type(2) { animation-duration: 10s; animation-delay: 1s; }
    @media (max-width: 900px) { .cd-garnish { scale: .6; opacity: .4; } }

    /* CTA banner: navy closing band on every page (was product-only) */
    .light-mode .cta-banner {
      background: var(--c-dark) !important;
      border: 2.5px solid var(--c-ink) !important;
      border-radius: 22px;
      max-width: 1080px; margin: 3rem auto 2rem;
      padding: 4rem 2rem;
      box-shadow: 8px 8px 0 var(--c-mustard);
    }
    .light-mode .cta-banner h2 { color: var(--c-dark-text) !important; }
    .light-mode .cta-banner h2 .acc {
      color: #22d3a8 !important; -webkit-text-fill-color: #22d3a8 !important;
      background-image: none !important;
    }
    .light-mode .cta-banner p { color: var(--c-dark-dim) !important; }
    @media (max-width: 900px) {
      .light-mode .cta-banner { padding: 2.6rem 1.2rem; margin: 2rem .8rem 1.4rem; }
    }

    /* ═══ POLISH ROUND: screenshot-audit fixes ═══ */

    /* marker swipe only on SHORT accents (JS tags .cd-mark); long ones
       killed the product heading with wall-to-wall mustard bars */
    .light-mode .sec-head .acc {
      background-image: none !important;
      color: var(--c-terra) !important;
      -webkit-text-fill-color: var(--c-terra) !important;
    }
    .light-mode .sec-head .acc.cd-mark {
      color: var(--c-ink) !important;
      -webkit-text-fill-color: var(--c-ink) !important;
      background-image: linear-gradient(180deg, transparent 58%, var(--c-mustard) 58%, var(--c-mustard) 94%, transparent 94%) !important;
    }

    /* integrations: CSS content can't hold HTML entities — this is live-site
       bug too (literal "→" text); use the real glyph */
    .light-mode .int-card ul li::before { content: "\2192" !important; color: var(--c-terra) !important; }

    /* neon-gradient submit buttons (login, contact, earlybird forms) → editorial */
    .light-mode .submit-btn {
      background: var(--c-ink) !important;
      color: var(--c-cream) !important;
      border: 2px solid var(--c-ink) !important;
      border-radius: 11px !important;
      font-weight: 800 !important;
      box-shadow: 3px 3px 0 var(--c-mustard) !important;
      transition: translate .3s cubic-bezier(.3,1.4,.5,1), box-shadow .25s, background .2s !important;
      transform: none !important;
    }
    .light-mode .submit-btn:hover {
      translate: -2px -2px;
      box-shadow: 5px 5px 0 var(--c-mustard) !important;
      background: var(--c-sage-deep) !important;
    }

    /* login: glass card → paper with ink border + chunky shadow */
    .light-mode .auth-card {
      background: var(--c-paper) !important;
      border: 2.5px solid var(--c-ink) !important;
      border-radius: 18px !important;
      box-shadow: 7px 7px 0 var(--c-sage) !important;
      backdrop-filter: none !important;
    }
    .light-mode .auth-tab { font-weight: 800 !important; color: var(--c-dim) !important; }
    .light-mode .auth-tab.active { color: var(--c-terra) !important; border-color: var(--c-terra) !important; }
    .light-mode .auth-card + div, .light-mode .auth-footer + div { border-radius: 14px; }

    /* washed mono tag pills (multi-user trust modes, earlybird stats) */
    .light-mode [class*="-tag"], .light-mode [class*="stat-pill"] { font-weight: 800; }

    /* ═══ CONTRAST ROUND 3 (subpage inline-style rescues, main-wide) ═══ */
    .light-mode main [style*="a78bfa"], .light-mode main [style*="A78BFA"] { color: var(--c-plum) !important; }
    .light-mode main h4[style*="color:#fff"], .light-mode main div[style*="color:#fff"]:not([class]) { color: var(--c-ink) !important; }
    .light-mode main [style*="var(--blue)"] { color: #1D6FA8 !important; }
    .light-mode .cc-min-pill, .light-mode .cc-min-pill span, .light-mode .cc-min-pill b { color: var(--c-mustard) !important; }
    .light-mode .cc-trial .cc-btn { background: var(--c-sage-deep) !important; }
    .light-mode .pc-eyebrow { color: var(--c-sage-deep) !important; }
    .light-mode [style*="a78bfa"], .light-mode [style*="A78BFA"] { color: var(--c-plum) !important; }
    .light-mode main h4[style*="color: #fff"], .light-mode main h4[style*="#ffffff"],
    .light-mode main h4[style*="var(--text)"], .light-mode main span[style*="var(--text)"] { color: var(--c-ink) !important; }
    .light-mode [style*="e2e8f0"], .light-mode [style*="E2E8F0"] { color: var(--c-ink) !important; }
    .light-mode [style*="var(--purple)"] { color: var(--c-plum) !important; }
    .light-mode [style*="76b900"] { color: #3E6B00 !important; }

    /* ═══ MOCK PANELS: crisp paper wireframes (no dark slabs) ═══ */
    .light-mode .b-visual, .light-mode .zz-visual-box {
      background: #FBF5E4 !important;
      border: 2px solid var(--c-ink) !important;
      border-radius: 10px !important;
      box-shadow: 4px 4px 0 var(--c-mustard) !important;
      backdrop-filter: none !important;
      overflow: hidden;
      rotate: -1.4deg;
      transition: rotate .35s cubic-bezier(.3,1.4,.5,1), translate .35s;
    }
    .light-mode .bento-card:nth-child(even) .b-visual { rotate: 1.2deg; box-shadow: 4px 4px 0 var(--c-sage) !important; }
    .light-mode .bento-card:hover .b-visual, .light-mode .zz-visual-box:hover { rotate: 0deg; translate: 0 -2px; }
    .light-mode .mock-bar {
      background: var(--c-cream) !important;
      border-bottom: 1.5px solid var(--c-ink) !important;
    }
    .light-mode .mock-dot { border: 1px solid rgba(17,41,74,.35); }
    .light-mode .mock-dot:nth-child(1) { background: #ff5f57 !important; }
    .light-mode .mock-dot:nth-child(2) { background: #ffbd2e !important; }
    .light-mode .mock-dot:nth-child(3) { background: #28ca41 !important; }
    .light-mode .mock-line { background: rgba(17,41,74,.14) !important; }
    .light-mode .mock-line[style*="gradient"] { background: linear-gradient(90deg, var(--c-sage), #6FC2E8) !important; }
    .light-mode .mock-line:nth-child(4)[style*="gradient"] { background: linear-gradient(90deg, var(--c-terra), var(--c-mustard)) !important; }
    .light-mode .mock-block {
      background: var(--c-sage-tint) !important;
      border: 1.5px dashed var(--c-sage-deep) !important;
      border-radius: 6px !important;
    }
    .light-mode .bv-bar { background: var(--c-cream) !important; border-bottom: 1.5px solid var(--c-ink) !important; }
    .light-mode .bv-dot { border: 1px solid rgba(17,41,74,.35); }
    .light-mode .bv-line { background: rgba(17,41,74,.14) !important; }
    .light-mode .bv-line[style*="gradient"], .light-mode .bv-line:nth-child(1) { background: linear-gradient(90deg, var(--c-sage), #6FC2E8) !important; }
    .light-mode .bv-block { background: var(--c-sage-tint) !important; border: 1.5px dashed var(--c-sage-deep) !important; }

    /* support/product bento cards: less dead air */
    .light-mode .bento { grid-auto-rows: auto !important; }
    .light-mode .bento-card.b-big { min-height: 0 !important; }

    /* ═══ DETAILED MINIATURES inside mock windows (spruce.js injects) ═══ */
    .cdm-bar {
      display: flex; align-items: center; gap: .3rem;
      padding: .38rem .55rem;
      background: var(--c-cream); border-bottom: 1.5px solid var(--c-ink);
    }
    .cdm-bar i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid rgba(17,41,74,.35); }
    .cdm-bar i:nth-child(1) { background: #ff5f57; } .cdm-bar i:nth-child(2) { background: #ffbd2e; } .cdm-bar i:nth-child(3) { background: #28ca41; }
    .cdm-bar b {
      margin-left: .25rem; font-family: "JetBrains Mono", monospace;
      font-size: .5rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
      color: var(--c-dim) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .cdm-body { padding: .55rem .6rem; display: flex; flex-direction: column; gap: .32rem; font-family: "JetBrains Mono", monospace; }
    .cdm-body > * { flex-shrink: 0; }
    /* terminal lines */
    .cdm-t { font-size: .58rem; color: var(--c-ink) !important; white-space: nowrap; overflow: hidden; }
    .cdm-t b { color: var(--c-terra) !important; font-weight: 800; }
    .cdm-t i { font-style: normal; color: #14805F !important; font-weight: 800; }
    .cdm-cur { display: inline-block; width: 5px; height: 9px; background: #14805F; margin-left: 3px; vertical-align: -1px; animation: cs-cursor 1s step-end infinite; }
    /* memory rows */
    .cdm-m {
      display: flex; align-items: center; gap: .4rem;
      background: #fff; border: 1px solid var(--c-line); border-radius: 5px;
      padding: .28rem .45rem; font-size: .56rem; color: var(--c-ink) !important;
      white-space: nowrap; overflow: hidden;
    }
    .cdm-m s { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; text-decoration: none; }
    .cdm-m em {
      margin-left: auto; font-style: normal; font-size: .44rem; font-weight: 800;
      padding: 1px 5px; border-radius: 3px; border: 1px solid; letter-spacing: .04em;
    }
    .cdm-chip {
      align-self: flex-start; font-size: .5rem; font-weight: 800;
      background: var(--c-mustard-tint); color: var(--c-mustard-deep) !important;
      border: 1.5px dashed var(--c-mustard-deep); border-radius: 99px; padding: .14rem .5rem;
    }
    /* checklist rows */
    .cdm-c { display: flex; align-items: center; gap: .4rem; font-size: .56rem; color: var(--c-ink-2) !important; }
    .cdm-c i { font-style: normal; font-weight: 900; }
    /* flow chips */
    .cdm-f { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
    .cdm-f span {
      font-size: .52rem; font-weight: 800; padding: .2rem .45rem; border-radius: 5px;
      border: 1.5px solid var(--c-ink); background: #fff; color: var(--c-ink) !important;
    }
    .cdm-f span.hot { background: var(--c-mustard); }
    .cdm-f b { color: var(--c-terra) !important; font-weight: 900; }
    /* mini chart */
    .cdm-chart { border: 1px solid var(--c-line); border-radius: 5px; background: #fff; padding: .3rem .35rem .1rem; }
    .cdm-chart svg { width: 100%; height: 34px; display: block; }
    .cdm-stats { display: flex; gap: .35rem; }
    .cdm-stats span {
      flex: 1; text-align: center; background: #fff; border: 1px solid var(--c-line);
      border-radius: 5px; padding: .22rem .2rem; font-size: .5rem; font-weight: 700; color: var(--c-dim) !important;
    }
    .cdm-stats span b { display: block; font-size: .68rem; font-weight: 900; }

    /* ═══ SUPPORT + CONTACT UPGRADE ═══ */

    /* v2.0 preview banner (all pages): washed lavender glass → paper + plum chunk */
    .light-mode div[style*="rgba(167,139,250,.08)"] {
      background: var(--c-paper) !important;
      border: 2.5px solid var(--c-ink) !important;
      border-radius: 16px !important;
      box-shadow: 6px 6px 0 var(--c-plum) !important;
      backdrop-filter: none !important;
    }
    .light-mode div[style*="radial-gradient(circle at 90% 50%"] { display: none !important; }
    .light-mode a[style*="167,139,250"] {
      background: var(--c-plum) !important;
      color: var(--c-cream) !important;
      -webkit-text-fill-color: var(--c-cream) !important;
      border: 2px solid var(--c-ink) !important;
      border-radius: 10px !important;
      box-shadow: 3px 3px 0 var(--c-ink) !important;
      font-weight: 800 !important;
      transition: translate .3s cubic-bezier(.3,1.4,.5,1), box-shadow .25s !important;
    }
    .light-mode a[style*="167,139,250"]:hover { translate: -2px -2px; box-shadow: 5px 5px 0 var(--c-ink) !important; }

    /* numbered steps: gradient circles → editorial chips + dashed track */
    .light-mode .step-dot {
      background: var(--c-mustard) !important;
      background-image: none !important;
      color: var(--c-ink) !important;
      border: 2px solid var(--c-ink) !important;
      border-radius: 12px !important;
      box-shadow: 3px 3px 0 var(--c-ink) !important;
      font-weight: 900 !important;
      text-shadow: none !important;
    }
    .light-mode .step:nth-child(2) .step-dot { background: var(--c-terra) !important; color: var(--c-cream) !important; }
    .light-mode .step:nth-child(3) .step-dot { background: var(--c-sage) !important; color: var(--c-cream) !important; }
    .light-mode .steps-track::before {
      display: block !important;
      background: none !important;
      border-top: 2px dashed var(--c-line) !important;
      height: 0 !important;
    }

    /* contact rows: plain lines → paper chips with icon tiles */
    .light-mode .ch-contact-line, .light-mode .channel-item {
      background: #FBF5E4 !important;
      border: 1.5px solid var(--c-ink) !important;
      border-radius: 10px !important;
      box-shadow: 2px 2px 0 var(--c-line) !important;
      font-weight: 700 !important;
      transition: translate .25s cubic-bezier(.3,1.4,.5,1), box-shadow .25s;
    }
    .light-mode .ch-contact-line:hover, .light-mode .channel-item:hover { translate: -1px -1px; box-shadow: 3px 3px 0 var(--c-ink) !important; }
    .light-mode .ch-icon, .light-mode .channel-icon {
      background: var(--c-mustard-tint) !important;
      border: 1.5px solid var(--c-ink) !important;
      border-radius: 8px !important;
      box-shadow: 1.5px 1.5px 0 var(--c-ink) !important;
    }

    /* forms: editorial inputs with a satisfying focus */
    .light-mode input:not([type="checkbox"]):not([type="radio"]),
    .light-mode textarea, .light-mode select {
      background: #FBF5E4 !important;
      border: 2px solid var(--c-ink) !important;
      border-radius: 10px !important;
      transition: box-shadow .2s, border-color .2s, translate .2s !important;
    }
    .light-mode input:focus, .light-mode textarea:focus, .light-mode select:focus {
      border-color: var(--c-sage-deep) !important;
      box-shadow: 3px 3px 0 var(--c-mustard) !important;
      translate: -1px -1px;
      outline: none !important;
    }

    /* V7 readability: pricing-page specifics */
    .light-mode .cc-limit-v { color: #8A5E0B !important; }
    .light-mode .cc-limit-v.is-word { color: var(--c-terra-deep) !important; }
    .light-mode .cc-cat { font-size: .62rem !important; }
    .light-mode .cc-tape { font-size: .62rem !important; }
    .light-mode .cc-period { color: var(--c-ink-2) !important; }
    .light-mode .cc-trial .cc-btn:hover, .light-mode .cc-pro .cc-btn:hover { filter: brightness(.94); }
    .light-mode .cc-pro .cc-btn { background: var(--c-terra-deep) !important; }

    /* V7.1 pricing-page micro fixes */
    .light-mode .cc-tape { color: var(--c-cream) !important; font-size: .66rem !important; }
    .light-mode .cc-cat { background: var(--c-mustard-tint) !important; font-size: .68rem !important; }
    .light-mode .cc-sticker { font-size: .66rem !important; }
    .light-mode .ts-chip { font-size: .66rem !important; }
    .light-mode .plug-col-back .plug-col-sub { color: #25659F !important; }
    .light-mode .plug-col-front .plug-col-sub { color: #7A5407 !important; }
    .light-mode .plug-core-stat:nth-child(2) .plug-core-stat-v { color: var(--c-terra-deep) !important; }

    /* V7.2 pricing tapes: per-tier text colors (blanket cream broke the mustard tape) */
    .light-mode .cc-hot .cc-tape { color: var(--c-ink) !important; }
    .light-mode .ts-count-l { font-size: .68rem !important; }
    .light-mode .cc-limit-l { font-size: .56rem !important; }
    .light-mode .cc-min-pill { font-size: .62rem !important; }

    /* V7.3: final collisions */
    .light-mode .page-section [style*="var(--c-sage)"] { color: #25659F !important; }
    .light-mode .cc-tape { background: var(--c-ink) !important; color: var(--c-cream) !important; }
    .light-mode .cc-trial .cc-btn { background: var(--c-ink) !important; color: var(--c-cream) !important; }
    .light-mode main a[style*="167,139,250"] { color: var(--c-cream) !important; }
    .light-mode .cc-hot .cc-tape { color: var(--c-cream) !important; }
    .light-mode .cc-limit-v { color: #745006 !important; }
    .light-mode .cc-limit-v[class*="sage"], .light-mode .compare-card:nth-child(2) .cc-limit-v { color: #1E5FA5 !important; }