@charset "UTF-8";
/* index.html page styles, moved out of the document head (build-static) */
  /* pointer-events none on the root: the teaser and panel are transparent overlays that
     blanket the hero's right-hand side, so nothing here may take a click unless it is
     actually on screen. Interactive parts opt back in individually. */
  #vc-root { position: fixed; right: 24px; bottom: 24px; z-index: 200; font-family: var(--font-sans); pointer-events: none; }
  #vc-root *, #vc-root *::before, #vc-root *::after { box-sizing: border-box; }

  /* launcher */
  .vc-launcher {
    position: relative; width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer;
    pointer-events: auto;
    background: var(--green); color: var(--on-green); display: grid; place-items: center; margin-left: auto;
    box-shadow: 0 2px 6px rgba(63,105,3,.30), 0 14px 34px rgba(110,183,4,.40);
    transition: transform .2s var(--ease), box-shadow .2s, background .18s;
  }
  .vc-launcher:hover { transform: translateY(-2px) scale(1.03); background: #63A303; }
  .vc-launcher:active { transform: translateY(0) scale(1); }
  html[data-theme="dark"] .vc-launcher { color: #11140a; }
  .vc-launcher .vc-ic { width: 26px; height: 26px; transition: opacity .2s, transform .2s; }
  .vc-launcher .vc-ic-close { position: absolute; opacity: 0; transform: rotate(-45deg) scale(.6); }
  #vc-root.open .vc-launcher .vc-ic-chat { opacity: 0; transform: rotate(45deg) scale(.6); }
  #vc-root.open .vc-launcher .vc-ic-close { opacity: 1; transform: rotate(0) scale(1); }
  .vc-badge {
    position: absolute; top: -2px; right: -2px; width: 20px; height: 20px; border-radius: 50%;
    background: #f0605c; color: #fff; font-size: 12px; font-weight: 600; display: grid; place-items: center;
    border: 2px solid var(--bg); transition: opacity .2s, transform .2s;
  }
  #vc-root.open .vc-badge, #vc-root.read .vc-badge { opacity: 0; transform: scale(.4); pointer-events: none; }

  /* teaser nudge */
  .vc-teaser {
    position: absolute; right: 0; bottom: 76px; width: 286px;
    background: rgba(247,246,243,.62); border: 1px solid rgba(255,255,255,.55); border-radius: 16px; padding: 16px 16px 16px 16px;
    backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
    box-shadow: var(--shadow-lg); cursor: pointer;
    opacity: 0; transform: translateY(10px) scale(.96); transform-origin: bottom right; pointer-events: none;
    visibility: hidden;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
  }
  .vc-teaser.show { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
  #vc-root.open .vc-teaser { opacity: 0 !important; transform: translateY(10px) scale(.96) !important; pointer-events: none !important; visibility: hidden !important; }
  .vc-teaser::after {
    content: ""; position: absolute; right: 22px; bottom: -7px; width: 14px; height: 14px;
    background: var(--card); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg);
  }
  .vc-teaser-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
  .vc-teaser-head .vc-name { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
  .vc-teaser-head .vc-status { font-size: 11px; color: var(--green-ink); font-family: "Geist Mono", monospace; display: flex; align-items: center; gap: 5px; }
  .vc-teaser-head .vc-status .d { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
  .vc-teaser p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
  .vc-teaser-x {
    position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border: none; background: transparent;
    color: var(--muted-2); cursor: pointer; border-radius: 6px; display: grid; place-items: center; padding: 0;
  }
  .vc-teaser-x:hover { background: rgba(127,127,118,.12); color: var(--ink); }
  .vc-teaser-x svg { width: 13px; height: 13px; }

  /* avatar */
  .vc-ava { display: none; }
  .vc-ava svg { width: 17px; height: 17px; }

  /* panel */
  .vc-panel {
    position: absolute; right: 0; bottom: 76px; width: 372px; max-width: calc(100vw - 32px);
    height: 540px; max-height: calc(100vh - 120px);
    background: rgba(247,246,243,.72); border: 1px solid rgba(255,255,255,.6); border-radius: 22px; overflow: hidden;
    backdrop-filter: blur(26px) saturate(165%); -webkit-backdrop-filter: blur(26px) saturate(165%);
    display: flex; flex-direction: column; box-shadow: var(--shadow-lg);
    opacity: 0; transform: translateY(14px) scale(.97); transform-origin: bottom right; pointer-events: none;
    visibility: hidden;
    transition: opacity .26s var(--ease), transform .26s var(--ease);
  }
  #vc-root.open .vc-panel { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }

  .vc-header { display: flex; align-items: center; gap: 11px; padding: 15px 16px; background: transparent; border-bottom: 1px solid rgba(20,24,12,.07); }
  .vc-header .vc-ava { width: 38px; height: 38px; }
  .vc-header .vc-ava svg { width: 21px; height: 21px; }
  .vc-htext { min-width: 0; }
  .vc-nrow { display: flex; align-items: center; gap: 8px; }
  .vc-htext .vc-name { font-size: 15px; font-weight: 600; letter-spacing: -0.015em; }
  .vc-live { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
    font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--green-deep); background: var(--green-tint);
    border-radius: 100px; padding: 3px 8px; }
  .vc-live i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
  .vc-htext .vc-status { font-size: 11.5px; color: var(--nav-link); margin-top: 2px; }
  .vc-close { margin-left: auto; width: 32px; height: 32px; border: none; background: transparent; color: var(--muted); cursor: pointer; border-radius: 9px; display: grid; place-items: center; padding: 0; transition: background .15s, color .15s; }
  .vc-close:hover { background: rgba(127,127,118,.12); color: var(--ink); }
  .vc-close svg { width: 17px; height: 17px; }

  /* messages */
  .vc-body { flex: 1; overflow-y: auto; padding: 20px 16px 8px; display: flex; flex-direction: column; gap: 12px; }
  .vc-body::-webkit-scrollbar { width: 8px; }
  .vc-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
  .vc-row { display: flex; gap: 9px; align-items: flex-end; align-self: flex-start; max-width: 90%; opacity: 0; transform: translateY(8px); }
  .vc-row.in { animation: vcIn .34s var(--ease) forwards; }
  @keyframes vcIn { to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .vc-row { opacity: 1; transform: none; } .vc-row.in { animation: none; } }
  .vc-bubble { background: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.72); border-radius: 16px 16px 16px 5px; padding: 11px 14px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); box-shadow: var(--shadow-sm); }
  .vc-bubble strong { color: var(--ink); font-weight: 600; }
  .vc-bubble .vc-mail { color: var(--green-ink); font-weight: 600; }

  /* typing indicator */
  .vc-typing { display: flex; gap: 4px; padding: 14px 14px; }
  .vc-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); animation: vcBounce 1.1s infinite ease-in-out; }
  .vc-typing i:nth-child(2) { animation-delay: .15s; } .vc-typing i:nth-child(3) { animation-delay: .3s; }
  @keyframes vcBounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

  /* footer / input zone */
  .vc-foot { padding: 12px 16px 16px; border-top: 1px solid rgba(20,24,12,.07); background: transparent; }
  .vc-form { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 15px;
    border-radius: 100px; border: 1px solid rgba(20,24,12,.12); background: rgba(255,255,255,.7);
    transition: border-color .16s, box-shadow .16s, background .16s; }
  .vc-form:focus-within { border-color: var(--green); background: rgba(255,255,255,.9);
    box-shadow: 0 0 0 3px rgba(110,183,4,.16); }
  .vc-at { flex: 0 0 auto; width: 17px; height: 17px; color: var(--muted-2); transition: color .16s; }
  .vc-form:focus-within .vc-at { color: var(--green-deep); }
  .vc-form input { flex: 1; min-width: 0; font-family: inherit; font-size: 14.5px; letter-spacing: -.01em; color: var(--ink); padding: 11px 0; border: 0; background: transparent; }
  html[data-theme="dark"] .vc-form { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
  html[data-theme="dark"] .vc-form:focus-within { background: rgba(255,255,255,.1); }
  html[data-theme="dark"] .vc-send { background: rgba(255,255,255,.1); color: var(--muted); }
  html[data-theme="dark"] .vc-panel { background: rgba(27,29,24,.6); border-color: rgba(255,255,255,.1); }
  html[data-theme="dark"] .vc-header, html[data-theme="dark"] .vc-foot { border-color: rgba(255,255,255,.09); }
  html[data-theme="dark"] .vc-bubble { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.09); }
  .vc-form input::placeholder { color: var(--muted-2); }
  .vc-form input:focus { outline: none; }
  .vc-send { flex: 0 0 auto; width: 40px; height: 40px; border: none; border-radius: 50%;
    background: rgba(20,24,12,.07); color: var(--nav-link); cursor: pointer; display: grid;
    place-items: center; transition: background .18s, color .18s, transform .14s; }
  .vc-form:focus-within .vc-send, .vc-form.ready .vc-send { background: var(--green); color: var(--on-green); }
  html[data-theme="dark"] .vc-send { color: #11140a; }
  .vc-send:hover { background: var(--green); color: var(--on-green); }
  .vc-form:focus-within .vc-send:hover, .vc-form.ready .vc-send:hover { background: #63A303; }
  .vc-send:active { transform: scale(.94); }
  .vc-send svg { width: 17px; height: 17px; }
  .vc-err { color: #d4596f; }
  .vc-hint { font-family: "Geist Mono", monospace; font-size: 11px; letter-spacing: .03em; color: var(--muted-2); text-align: center; margin: 8px 0 0; }

  @media (max-width: 520px) {
    #vc-root { right: 16px; bottom: 16px; }
    .vc-teaser { width: calc(100vw - 32px); }
  }

  /* ===== value segments (zigzag) ===== */
  /* 01 · the knowledge tracker as a dark instrument — it should stand out */
  .ktk{background:#141611;border:1px solid rgba(255,255,255,.09);border-radius:20px;padding:18px 22px 18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 2px 5px rgba(20,24,12,.1),0 8px 18px rgba(20,24,12,.16),0 34px 72px rgba(20,24,12,.3);transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
  .ktk-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font:600 10.5px var(--font-mono);letter-spacing:.2em;text-transform:uppercase}
  .ktk-h em{font-style:normal;color:#8FD213}
  .ktk-h span{color:rgba(255,255,255,.32)}
  .ktk-mod{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:9px}
  .ktk-mod b{font:600 21px var(--font-display);letter-spacing:-.02em;color:#fff;transition:opacity .42s var(--ease),transform .42s var(--ease)}
  .ktk-bar{display:flex;gap:3px;height:6px;margin-top:12px}
  .ktk-bar i{border-radius:4px;transition:width .8s var(--ease)}
  .ktk-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px;min-height:30px;align-content:flex-start;transition:opacity .42s var(--ease) .07s,transform .42s var(--ease) .07s}
  .ktk-chips .kchip{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.13);background:none;border-radius:100px;padding:6px 12px;font:500 12px var(--font-sans);letter-spacing:-.008em;color:rgba(255,255,255,.88);transition:background .2s ease,border-color .2s ease}
  .ktk-chips .kchip:hover{border-color:rgba(255,255,255,.3)}
  .ktk-chips .kchip.on{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.34)}
  .ktk-chips .kchip i{flex:none;width:8px;height:8px;border-radius:50%}
  /* trend markers: rising or decaying, per the product */
  .ktk-chips .kchip s{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;margin-left:1px;flex:none}
  .ktk-chips .kchip s svg{width:11px;height:11px}
  .ktk-chips .kchip s.up{color:#8FD213}
  .ktk-chips .kchip s.down{display:grid;place-items:center;width:14px;height:14px;border-radius:50%;background:rgba(226,113,127,.16);color:#E2717F;font:700 9px var(--font-sans)}
  .ktk-det h5 s{text-decoration:none;display:inline-flex;align-items:center;gap:5px;margin-left:2px;font:600 9px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;border-radius:100px;padding:3px 8px}
  .ktk-det h5 s svg{width:9px;height:9px}
  .ktk-det h5 s.up{color:#8FD213;background:rgba(143,210,19,.14)}
  .ktk-det h5 s.down{color:#E2717F;background:rgba(226,113,127,.14)}
  .ktk-det{margin-top:14px;padding-top:13px;border-top:1px solid rgba(255,255,255,.08)}
  .ktk-det h5{margin:0;display:flex;align-items:center;gap:8px;font:600 14.5px var(--font-display);letter-spacing:-.014em;color:#fff;transition:opacity .42s var(--ease) .12s,transform .42s var(--ease) .12s}
  .ktk-det h5 span{color:rgba(255,255,255,.4);font-size:14px}
  .ktk-det p{margin:8px 0 0;font:400 12px/1.55 var(--font-sans);color:rgba(255,255,255,.66);text-wrap:pretty;height:56px;overflow:hidden;transition:opacity .42s var(--ease) .17s,transform .42s var(--ease) .17s}
  .ktk-foot{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin-top:12px}
  .ktk-foot u{text-decoration:none;font:600 9.5px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.32)}
  .ktk-cta{display:inline-flex;align-items:center;gap:7px;border-radius:100px;padding:8px 15px;font:600 12px var(--font-sans);letter-spacing:-.008em;color:#1E1A0C;background:#E0AE3C;text-decoration:none;cursor:default}
  .ktk-cta svg{width:12px;height:12px}
  .ktk.sw .ktk-mod b,.ktk.sw .ktk-chips,.ktk.sw .ktk-det h5,.ktk.sw .ktk-det p{opacity:0;transform:translateY(5px);transition-duration:.2s;transition-delay:0s}
  .kn-dots i{width:6px;height:6px;border-radius:100px;background:rgba(255,255,255,.2);transition:background .3s ease,width .3s ease;display:inline-block}
  .kn-dots{display:inline-flex;gap:5px;text-decoration:none}
  .kn-dots i.on{background:#8FD213;width:16px}
  /* 1fr is minmax(auto,1fr): min-content can blow a column past its share, so pin both to minmax(0,1fr) */
  #values .feature{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  #z01{align-items:start}
  #z01 .ktk{margin-top:54px}
  @media (max-width:980px){#values .feature{grid-template-columns:minmax(0,1fr)}}
  /* the diagrams use the wordmark's own face throughout */
  .fg,.mx,.nwin,.knstack,.kev{font-family:var(--font-display)}
  .fg *:not(svg):not(path):not(circle):not(line):not(rect):not(polyline):not(polygon):not(text),
  .mx *:not(svg):not(path):not(circle):not(line):not(rect):not(polyline):not(polygon):not(text),
  .nwin *:not(svg):not(path):not(circle):not(line):not(rect):not(polyline):not(polygon):not(text),
  .klog-h em,.klog-h span{font-family:var(--font-display)}
  /* mono stays mono where it carries data: logs, stamps, counts */
  .kev-r u,.cnt,.rec-r,.mx-ring b,.kn-dots,.mx-b u,.vf-tags span,.rc-cl u,.rc-m u{font-family:var(--font-mono)}
  /* every figure lifts, matching the chatbot cards below */
  .fg,.mx,.nwin,.fg-ink5{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
  .fg:hover{transform:translateY(-3px);box-shadow:0 4px 10px rgba(20,24,12,.05),0 26px 56px rgba(20,24,12,.1)}
  /* 03: the note and its explanation card lift together as one diagram */
  .fg-ink5:hover{transform:translateY(-3px);box-shadow:0 6px 14px rgba(20,24,12,.14),0 32px 68px rgba(20,24,12,.26)}

  .kchip{transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s ease}
  .kchip:hover{transform:translateY(-1px);border-color:var(--line);box-shadow:0 2px 5px rgba(20,24,12,.06)}
  .rec-r{transition:background .2s ease}
  .rec-r:hover{background:rgba(110,183,4,.05)}
  .fo-t{transition:background .2s ease,border-color .2s ease,transform .2s var(--ease)}
  .fo-t:hover{background:rgba(143,210,19,.13);border-color:rgba(143,210,19,.3);transform:translateY(-1px)}
  .fq div{transition:background .2s ease,transform .2s var(--ease)}
  .fq div:hover{transform:translateY(-2px)}
  /* 01 — the event chip and state flip */
  /* 01 — tracker chips + the evidence stream */
  /* two rows’ worth only when the chips actually wrap; no dead band otherwise */
  .kchips{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px;min-height:28px;align-content:flex-start}
  /* the module reads as a card being dealt in: out to the left, next in from the right */
  .fg-kn{position:relative}
  #knModCount{transition:opacity .24s ease}
  .fg-kn.sw #knModCount,.fg-kn.sw-in #knModCount{opacity:0}
  /* the module cards live in a shallow stack; the swap is one soft cross-glide */
  .kn-card{position:relative;z-index:1;background:var(--card);will-change:transform,opacity;transition:transform .8s cubic-bezier(.22,1,.36,1),opacity .5s ease}
  .fg-kn.sw .kn-card{opacity:0;transform:translateY(-14px) scale(.99)}
  .fg-kn.sw-in .kn-card{opacity:0;transform:translateY(16px) scale(.99)}
  @media (prefers-reduced-motion:reduce){.kn-card{transition:none}}
  .kchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);background:var(--card);border-radius:100px;padding:5.5px 12px;font:500 11.5px var(--font-sans);letter-spacing:-.005em;color:var(--ink-2);box-shadow:0 1px 2px rgba(20,24,12,.03)}
  .kchip i{flex:none;width:7px;height:7px;border-radius:50%;transition:background .5s ease}
  .kchip em{font:600 8px var(--font-mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;border-radius:100px;padding:2.5px 7px;margin-left:2px;transition:background .5s ease,color .5s ease}
  /* the topic the evidence panel is explaining */
  .kchip.on{border-color:#C9DDA4;box-shadow:0 0 0 3px rgba(110,183,4,.09)}
  .kchip em.t-fade{color:#8a6d1f;background:#F6EED3}
  .kchip em.t-solid{color:var(--green-deep);background:var(--green-tint)}
  .knstack{display:flex;flex-direction:column;gap:8px;min-width:0}
  .knstack .fg-kn{padding:22px 28px 18px !important;border-radius:22px;box-shadow:0 2px 6px rgba(20,24,12,.05),0 22px 50px rgba(20,24,12,.09)}
  .fg-kn .kn-mod b{font-size:21px}
  .fg-kn .kn-bar{height:6px;border-radius:5px;overflow:hidden}
  .fg-kn{overflow:hidden}
  /* the evidence stream is its own card, below the tracker */
  /* docked to the tracker: one silhouette, squared where they meet */
  /* the sources that feed the rating, each with an arrow into the card above */
  .kn-feed{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:18px -28px -18px;padding:16px 28px;background:linear-gradient(180deg,rgba(26,26,26,.035),rgba(26,26,26,.015));border-top:1px solid var(--line-2)}
  html[data-theme="dark"] .kn-feed{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015))}
  .kn-fh{font:600 8.5px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
  .kn-src{position:relative;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 13px;border-radius:100px;border:1px solid var(--line);background:var(--card);color:var(--ink-2);font-size:12px;font-weight:600;letter-spacing:-.008em;box-shadow:0 1px 2px rgba(20,24,12,.05);transition:border-color .2s ease,box-shadow .2s ease,transform .2s var(--ease)}
  html[data-theme="dark"] .kn-src{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.85);box-shadow:none}
  .kn-src svg{width:13px;height:13px;color:var(--green-ink);flex:none}
  /* the arrow up into the tracker */
  .kn-src::after{content:"";position:absolute;left:50%;top:-16px;width:1.5px;height:12px;background:linear-gradient(0deg,rgba(110,183,4,.15),var(--green));opacity:0;transition:opacity .3s var(--ease),transform .3s var(--ease);transform:translateY(4px)}
  .kn-src::before{content:"";position:absolute;left:50%;top:-18px;margin-left:-3px;border:3px solid transparent;border-bottom-color:var(--green);opacity:0;transition:opacity .3s var(--ease)}
  .reveal.in .kn-src::after{opacity:1;transform:none}
  .reveal.in .kn-src::before{opacity:.85}
  .reveal.in .kn-src:nth-of-type(2)::after,.reveal.in .kn-src:nth-of-type(2)::before{transition-delay:.08s}
  .reveal.in .kn-src:nth-of-type(3)::after,.reveal.in .kn-src:nth-of-type(3)::before{transition-delay:.16s}
  .reveal.in .kn-src:nth-of-type(4)::after,.reveal.in .kn-src:nth-of-type(4)::before{transition-delay:.24s}
  .kn-src:hover{border-color:#C9DDA4;box-shadow:0 0 0 3px rgba(110,183,4,.09),0 2px 5px rgba(20,24,12,.06);transform:translateY(-2px)}
  .kn-more{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font:600 10.5px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--green-ink);text-decoration:none}
  .kn-more svg{width:11px;height:11px;transition:transform .2s cubic-bezier(.34,1.4,.5,1)}
  .kn-more:hover svg{transform:translateX(3px)}
  @media (prefers-reduced-motion:reduce){.kn-src::after,.kn-src::before{opacity:1;transform:none}}
  /* quieter rows: no rules, softer weights */
  .klog-line{display:flex;align-items:baseline;gap:9px;padding:3.5px 18px;font:500 9px var(--font-mono);letter-spacing:.01em;white-space:nowrap}
  .klog-line:hover{background:rgba(255,255,255,.5)}
  html[data-theme="dark"] .klog-line:hover{background:rgba(255,255,255,.04)}
  .klog-line .lt{text-decoration:none;flex:none;color:var(--muted-2);opacity:.55;font-variant-numeric:tabular-nums}
  .klog-line .lvl{flex:none;text-decoration:none;width:32px;font-weight:600;font-size:7.5px;letter-spacing:.1em;opacity:.75}
  .klog-line .lvl.info{color:var(--muted-2)}
  .klog-line .lvl.ok{color:var(--green-ink)}
  .klog-line .lvl.warn{color:#B08B2A}
  .klog-line .lk{flex:none;font-weight:500;color:var(--ink-2)}
  .klog-line .lp{font-style:normal;color:var(--muted-2);opacity:.65;overflow:hidden;text-overflow:ellipsis}
  .klog-line .lv{font-style:normal;flex:none;margin-left:auto;color:var(--muted);opacity:.85}
  .kn-bar i{transition:width .8s var(--ease)}
  .kn-row i{transition:background .5s ease}
  .kn-row em{transition:background .5s ease,color .5s ease}
  #knNoteT{transition:opacity .3s ease}
  #knNoteT.sw{opacity:0}
  /* 02 — curve in the copy column */
  .vf-curve{position:relative;margin-top:26px;max-width:440px}
  .vf-curve>svg{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%);mask-image:linear-gradient(90deg,transparent 0,#000 7%)}
  /* the chart floor and the evening band settle first, the curve draws over them, then
     the peak names itself: drop line to the axis, dot, and a ring breathing out of it */
  .vf-grid{opacity:0;transition:opacity .7s var(--ease) .15s}
  .reveal.in .vf-grid{opacity:1}
  .vf-band{opacity:.85}
  .vf-base{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
  html[data-theme="dark"] .vf-band{opacity:1}
  .vf-glow{stroke-dasharray:1;stroke-dashoffset:1;opacity:.1}
  .reveal.in .vf-glow{animation:vfDraw 1.5s var(--ease) .35s forwards}
  .vf-tick{stroke:var(--green-ink);stroke-width:1.6;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .5s var(--ease) 1.75s}
  .reveal.in .vf-tick{opacity:.55}
  .vf-drop{stroke:var(--green-ink);stroke-width:1.3;stroke-dasharray:2.5 3.5;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .5s var(--ease) 1.75s}
  .reveal.in .vf-drop{opacity:.4}
  .vf-dip{fill:var(--bg);stroke:#C6982F;stroke-width:1.4;opacity:0;transition:opacity .5s var(--ease) 1.6s}
  .reveal.in .vf-dip{opacity:.85}
  .vf-dot{opacity:0;stroke:var(--bg);stroke-width:2;transition:opacity .45s var(--ease) 1.8s}
  .reveal.in .vf-dot{opacity:1}
  .vf-halo{stroke:var(--green-ink);stroke-width:1.6;opacity:0}
  .reveal.in .vf-halo{animation:vfHalo 2.6s ease-out 2.1s infinite}
  @keyframes vfHalo{0%{r:5.5;opacity:.45}75%{r:14;opacity:0}100%{r:14;opacity:0}}
  .vf-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
  .vf-tags span{display:inline-flex;align-items:center;gap:8px;border-radius:100px;padding:5px 12px 5px 9.5px;font:600 9px var(--font-mono);letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;cursor:default;opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease),background-color .25s var(--ease)}
  .vf-tags i{flex:none;width:7px;height:7px;border-radius:50%;transition:box-shadow .25s var(--ease)}
  .vf-tags .up i{background:var(--green-ink);box-shadow:0 0 0 2.5px rgba(110,183,4,.14)}
  .vf-tags .dn i{background:var(--bg);border:1.5px solid #C6982F}
  .vf-tags .up:hover i{box-shadow:0 0 0 4px rgba(110,183,4,.16)}
  /* hovering a key lifts the marker it names */
  .vf-curve:has(.up:hover) .vf-dot{r:7.2}
  .vf-curve:has(.dn:hover) .vf-dip{r:4;stroke-width:1.8}
  .vf-dot{transition:r .25s var(--ease),opacity .45s var(--ease) 1.8s}
  .vf-dip{transition:r .25s var(--ease),stroke-width .25s var(--ease),opacity .5s var(--ease) 1.6s}
  .vf-tags .up{color:var(--green-deep);background:rgba(110,183,4,.07)}
  .vf-tags .dn{color:#8a6d1f;background:rgba(246,238,211,.6)}
  .vf-tags .up:hover{background:var(--green-tint)}
  .vf-tags .dn:hover{background:#F6EED3}
  html[data-theme="dark"] .vf-tags .up{background:rgba(143,210,19,.1)}
  html[data-theme="dark"] .vf-tags .dn{background:rgba(214,178,74,.1)}
  .reveal.in .vf-tags span{opacity:1;transform:none}
  .reveal.in .vf-tags span:first-child{transition-delay:1.9s}
  .reveal.in .vf-tags span:last-child{transition-delay:2.05s}
  @media (prefers-reduced-motion:reduce){.reveal.in .vf-halo{animation:none}.vf-tags span{opacity:1;transform:none}.vf-grid,.vf-drop,.vf-dip,.vf-dot,.vf-tick{transition:none;opacity:1}.vf-glow{animation:none;stroke-dashoffset:0}}
  .vf-curve-h{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:12px;font:600 9.5px var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)}
  .vf-curve-h em{font-style:normal;color:var(--green-ink)}
  .vf-line{stroke-dasharray:1;stroke-dashoffset:1}
  .reveal.in .vf-line{animation:vfDraw 1.5s var(--ease) .35s forwards}
  @keyframes vfDraw{to{stroke-dashoffset:0}}
  @media (prefers-reduced-motion:reduce){.vf-line{animation:none;stroke-dashoffset:0}.vf-dot{opacity:1}}
  /* 02 — metrics cluster */
  /* the metrics tray: tiles on a soft tray, lifting on hover (value-tray language) */
  .mx{position:relative;display:flex;flex-direction:column;gap:10px;background:rgba(255,255,255,.62);border-radius:26px;padding:12px}
  html[data-theme="dark"] .mx{background:rgba(255,255,255,.05)}
  .mx-row2{display:grid;grid-template-columns:.8fr 1.2fr;gap:10px}
  .mx-tile{border:0 !important;transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
  /* orchestrated arrival: tiles rise in sequence */
  .mx .mx-tile{opacity:0;transform:translateY(12px)}
  .reveal.in .mx .mx-tile{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .55s var(--ease),box-shadow .28s var(--ease)}
  .reveal.in .mx .mx-ai{transition-delay:.05s}
  .reveal.in .mx .mx-row .mx-tile:first-child{transition-delay:.16s}
  .reveal.in .mx .mx-peak{transition-delay:.27s}
  .reveal.in .mx .mx-str{transition-delay:.38s}
  .reveal.in .mx .mx-rings{transition-delay:.49s}

  /* insight strip: one sheen pass */
  .mx-ai{position:relative;overflow:hidden}
  .mx-ai::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);transform:translateX(-130%);pointer-events:none}
  .mx-ai::after{display:none}
  @keyframes mxSheen{to{transform:translateX(130%)}}
  /* bars: average line, hover tooltips, today pulses */
  .mx-bars{position:relative}
  .mx-avg{position:absolute;left:-4px;right:-4px;bottom:calc(37px + 20px);border-top:1px dashed rgba(26,26,26,.14);pointer-events:none}
  .mx-avg u{position:absolute;right:0;top:-16px;text-decoration:none;font:600 8px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);opacity:.7}
  .mx-b{position:relative;cursor:default}
  .mx-b i{cursor:default}
  .mx-b:hover i{background:rgba(110,183,4,.6)}
  .mx-b.on:hover i{background:var(--green)}
  .mx-b .tt{position:absolute;left:50%;top:-6px;transform:translate(-50%,4px) scale(.9);font:600 8.5px var(--font-mono);letter-spacing:.03em;color:#fff;background:var(--dark);border-radius:6px;padding:3px 7px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .25s var(--ease);z-index:3}
  .mx-b:hover .tt{opacity:1;transform:translate(-50%,0) scale(1)}
  .mx-b.on i{animation:none}
  @keyframes mxToday{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18)}}
  /* peak tile: sky depth, moon glow, twinkle */
  .mx-peak::before{content:"";position:absolute;inset:0;background:radial-gradient(120px 90px at 82% 12%, rgba(255,255,255,.08), transparent 70%);pointer-events:none}
  .mx-moon{filter:drop-shadow(0 0 9px rgba(232,230,218,.35));transition:filter .3s ease}

  .mx-s{opacity:.4}
  .s1{box-shadow:-30px 34px 0 rgba(255,255,255,.22),14px 52px 0 rgba(255,255,255,.16)}
  .s2{animation-delay:1.1s}
  .s3{animation-delay:2.2s}
  @keyframes mxTwk{0%,100%{opacity:.3}50%{opacity:.95}}
  /* streak: flame, count, then the week as letters */
  .mx-str{display:flex;flex-direction:column}
  .mx-str-b{display:flex;align-items:center;gap:11px;margin-top:12px}
  .mx-fl{flex:none;width:34px;height:34px;border-radius:11px;background:#F6EED3;color:#B8862B;display:grid;place-items:center}
  .mx-fl svg{width:18px;height:18px;transform-origin:50% 88%}
  .mx-str b{display:flex;align-items:baseline;gap:5px;font:600 26px var(--font-display);letter-spacing:-.022em;line-height:1;color:var(--ink)}
  .mx-str b i{font:600 10px var(--font-mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
  .mx-wk{display:flex;gap:6px;margin-top:14px}
  .mx-wk span{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1}
  .mx-wk i{width:100%;height:6px;border-radius:4px;background:var(--line-2)}
  .mx-wk u{text-decoration:none;font:500 8.5px var(--font-mono);letter-spacing:.08em;color:var(--muted-2)}
  .mx-wk .d-on i{background:var(--green)}
  .mx-wk .d-now i{background:var(--green-tint);box-shadow:inset 0 0 0 1.5px var(--green)}
  .mx-wk .d-now u{color:var(--green-deep);font-weight:600}
  .mx-str .mx-cap{margin-top:auto;padding-top:12px}

  @keyframes mxFlick{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(1.08,1.12) rotate(-2.5deg)}65%{transform:scale(.97,1.04) rotate(2deg)}}
  /* rings cascade */
  .mx-ringrow .mx-ring:nth-child(2) .mr{transition-delay:.45s}
  .mx-ringrow .mx-ring:nth-child(3) .mr{transition-delay:.6s}
  .mx-ringrow .mx-ring:nth-child(4) .mr{transition-delay:.75s}
  @media (prefers-reduced-motion:reduce){.mx .mx-tile{opacity:1;transform:none}.mx-ai::after,.mx-b.on i,.mx-s,.mx-wk .d-now i{animation:none}.mx-str:hover .mx-fl svg{animation:none}}
  /* the tray lifts as one; the tiles inside stay put */
  .mx{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
  .mx-ai{display:flex;align-items:flex-start;gap:11px;background:var(--card);border:1px solid var(--line-2);border-radius:16px;padding:13px 16px;box-shadow:0 1px 3px rgba(20,24,12,.04)}
  .mx-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--green);margin-top:5px}
  .mx-ai-b u{display:flex;align-items:center;gap:7px;text-decoration:none;margin-bottom:6px}
  .mx-wm{height:10px;width:auto;display:block}
  html[data-theme="dark"] .mx-wm{content:url("assets/desk-wordmark-reversed.png")}
  .mx-ai-b u em{font:600 8.5px var(--font-mono);font-style:normal;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)}
  .mx-ai-b p{margin:0;font-size:12.5px;line-height:1.6;color:var(--ink-2);text-wrap:pretty}
  .mx-ai-b p b{font-weight:600;color:var(--ink)}
  html[data-theme="dark"] .mx-ai{background:rgba(255,255,255,.05)}
  .mx-ai p{margin:0;font-size:12.5px;line-height:1.55;color:var(--muted);text-wrap:pretty}
  .mx-ai p b{font-weight:600;color:var(--ink)}
  .mx-row{display:grid;grid-template-columns:1.15fr .85fr;gap:10px}
  .mx-tile{background:var(--card);border:1px solid var(--line-2);border-radius:16px;padding:16px 18px;box-shadow:0 1px 3px rgba(20,24,12,.04),0 12px 28px rgba(20,24,12,.05)}
  .mx-k{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:600 9.5px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
  .mx-k b{font:600 15px var(--font-display);letter-spacing:-.012em;color:var(--ink);text-transform:none}
  .mx-bars{display:flex;justify-content:space-between;align-items:flex-end;gap:7px;height:84px;margin-top:14px}
  .mx-b{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;align-self:stretch;justify-content:flex-end}
  .mx-b i{width:100%;max-width:18px;height:4px;border-radius:5px;background:rgba(110,183,4,.24);transition:height .7s var(--ease)}
  .mx-b.on i{background:var(--green)}
  .reveal.in .mx-b i{height:var(--h)}
  .mx-b u{text-decoration:none;font:500 8.5px var(--font-mono);letter-spacing:.08em;color:var(--muted-2)}
  .mx-b:nth-child(2) i{transition-delay:.06s}.mx-b:nth-child(3) i{transition-delay:.12s}.mx-b:nth-child(4) i{transition-delay:.18s}.mx-b:nth-child(5) i{transition-delay:.24s}.mx-b:nth-child(6) i{transition-delay:.3s}.mx-b:nth-child(7) i{transition-delay:.36s}
  .mx-peak{position:relative;background:var(--dark);border:0;overflow:hidden;display:flex;flex-direction:column}
  .mx-moon{position:absolute;top:14px;right:16px;width:26px;height:26px;color:#E8E6DA;opacity:.9}
  .mx-s{position:absolute;border-radius:50%;background:rgba(255,255,255,.55)}
  .s1{width:2.5px;height:2.5px;top:22px;right:52px}
  .s2{width:2px;height:2px;top:40px;right:30px;opacity:.6}
  .s3{width:2px;height:2px;top:14px;right:78px;opacity:.4}
  .mx-pk{font:600 9.5px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.4)}
  .mx-peak b{font:600 30px var(--font-display);letter-spacing:-.02em;color:#fff;margin-top:6px}
  .mx-owl{display:block;margin-top:auto;padding-top:14px;font:500 11px var(--font-sans);color:rgba(255,255,255,.55)}
  .mx-rings{padding:13px 18px 14px}
  .mxk-s{font:500 8.5px var(--font-mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
  .mx-ringrow{display:flex;justify-content:space-between;gap:8px;margin-top:12px}
  .mx-cap{margin:11px 0 0;font:500 10.5px var(--font-sans);line-height:1.5;color:var(--muted)}
  .mx-cloud{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
  /* same frosted pill as the 01–05 index chips at the top of the section */
  .mx-cloud span{display:inline-flex;align-items:center;gap:9px;height:32px;padding:0 7px 0 13px;border-radius:100px;border:1px solid rgba(255,255,255,.55);background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.34));backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 1px 2px rgba(20,24,12,.04),0 8px 20px rgba(20,24,12,.05);transition:border-color .2s,background .2s,transform .2s var(--ease),box-shadow .2s}
  .mx-cloud span:hover{border-color:rgba(255,255,255,.9);background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.56));transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 5px rgba(20,24,12,.05),0 14px 32px rgba(20,24,12,.1)}
  .mx-cloud span b{font:500 12.5px var(--font-sans);letter-spacing:-.008em;color:var(--ink-2)}
  .mx-cloud span i{display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:100px;font:600 9.5px var(--font-mono);font-style:normal;letter-spacing:.04em;color:var(--muted);background:rgba(26,26,26,.05);transition:background .2s,color .2s}
  .mx-cloud span:hover i{background:var(--green);color:var(--on-green)}
  html[data-theme="dark"] .mx-cloud span{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.05));border-color:rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
  html[data-theme="dark"] .mx-cloud span b{color:rgba(255,255,255,.82)}
  html[data-theme="dark"] .mx-cloud span i{background:rgba(143,210,19,.18);color:#A9D95E}
  .mx-ring{display:flex;flex-direction:column;align-items:center;gap:2px;position:relative}
  .mx-ring svg{width:44px;height:44px}
  /* centre the figure in its ring on both axes */
  .mx-ring b{position:absolute;top:0;left:50%;transform:translateX(-50%);width:44px;height:44px;display:grid;place-items:center;font:600 9.5px var(--font-mono);letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--ink)}
  .mx-ring span{margin-top:4px;font:500 9px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
  .mr{transition:stroke-dasharray 1s var(--ease) .3s}
  .reveal.in .mr{stroke-dasharray:var(--p) 100}
  /* 03 — notes analysis */
  /* the note editor, as in product: toolbar pills, doc title, selection toolbar */
  .nstage{position:relative;padding:0 0 34px}
  /* the note arrives first, then its toolbar, then the explanation */
  .nstage .nwin{opacity:0;transform:translateY(12px)}
  .reveal.in .nstage .nwin{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .55s var(--ease)}
  /* 03 hover: the note lifts, its parts respond */
  .nte2 .nte-p mark.nt-hl{transition:background-color .2s ease}
  .nte-tb{transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
  .nte-tb:hover{box-shadow:0 4px 9px rgba(20,24,12,.11),0 20px 44px rgba(20,24,12,.2)}
  .nte-ex{transition:background .18s ease,transform .18s var(--ease)}
  .nte-ex:hover{background:#DCEBC0;transform:translateY(-1px)}
  .nte-ed:hover{color:var(--ink)}
  .exq{transition:box-shadow .3s var(--ease),transform .3s var(--ease)}

  .nwin{position:relative;z-index:2;box-shadow:0 2px 6px rgba(20,24,12,.05),0 22px 48px rgba(20,24,12,.1)}
  .nwin .window-bar .nte-sv{margin-left:auto}
  .nte2{position:relative;background:var(--card);padding:22px 26px 150px;min-height:420px}
  .nte2-t{display:flex;justify-content:space-between;align-items:center;gap:14px}
  .nte2-t h5{margin:0;font:600 18px var(--font-display);letter-spacing:-.016em;color:var(--ink)}
  .nte2-t span{font:600 8.5px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
  .nte2 .nte-p{font-size:13px;line-height:1.8;margin-top:13px}
  @media (prefers-reduced-motion:reduce){.nstage .nwin{opacity:1;transform:none}}
  .nte-sv{display:inline-flex;align-items:center;gap:5px;font:600 8.5px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
  .nte-sv svg{width:9px;height:9px;color:var(--green)}
  .nte-g{transition:transform .18s var(--ease),color .18s ease,border-color .18s ease}
  .nte-g:hover{transform:translateY(-1px);color:var(--ink);border-color:var(--line)}
  .nte-mic{transition:color .18s ease,border-color .18s ease}
  .nte-mic:hover{color:var(--green-deep);border-color:#C9DDA4}
  /* the second paragraph runs out like a longer document */
  .nte-dim{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 74%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 74%,transparent 100%)}
  /* Explain visibly presses just before the card lands */
  .reveal.in .nte-ex{animation:ntePress .36s ease 2.02s}
  @keyframes ntePress{0%,100%{transform:scale(1)}45%{transform:scale(.92);background:#DCEBC0}}
  /* the explanation card: notch back to the note, desk header, starred style */
  .exq-tail{position:absolute;top:-7px;left:30px;width:13px;height:13px;background:var(--card);border-left:1px solid var(--line-2);border-top:1px solid var(--line-2);border-top-left-radius:3px;transform:rotate(45deg)}
  .exq-h{display:flex;align-items:center;gap:8px;font:600 9px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
  .exq-dot{width:8px;height:8px;border-radius:50%;background:var(--green)}
  .exq-h u{margin-left:auto;text-decoration:none;color:var(--muted-2);opacity:.75}
  .exc button em{display:inline-block;font-size:.82em;line-height:1;position:relative;top:-.06em;animation:exStar 2.8s ease-in-out infinite}
  @keyframes exStar{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.18)}}
  @media (prefers-reduced-motion:reduce){.nstage .nte{opacity:1;transform:none}.reveal.in .nte-ex{animation:none}.exc button em{animation:none}}
  .nte{position:relative;background:#fff;border:1px solid var(--line-2);border-radius:16px;padding:18px 22px 52px;box-shadow:0 2px 6px rgba(20,24,12,.04),0 18px 42px rgba(20,24,12,.07)}
  html[data-theme="dark"] .nte{background:rgba(255,255,255,.06)}
  .nte-bar{display:flex;gap:8px;align-items:center}
  .nte-g{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line-2);border-radius:100px;padding:5px 11px;color:var(--muted);box-shadow:0 1px 2px rgba(20,24,12,.03)}
  .nte-g svg{width:12px;height:12px}
  .nte-g u{text-decoration:none;font:600 10.5px var(--font-sans);letter-spacing:0}
  .nte-t{margin:14px 0 0;font:600 17px var(--font-display);letter-spacing:-.016em;color:var(--ink)}
  .nte-p{margin:9px 0 0;font-size:12.5px;line-height:1.7;color:var(--ink-2);text-wrap:pretty}
  /* selection toolbar pops in once the highlight lands */
  /* floats over the note, anchored to the highlighted line — as in product */
  .nte-tb{position:absolute;left:26px;top:0;z-index:7;display:flex;align-items:center;gap:10px;width:fit-content;background:#fff;border:1px solid var(--line-2);border-radius:100px;padding:5px 12px 5px 6px;box-shadow:0 3px 7px rgba(20,24,12,.09),0 16px 38px rgba(20,24,12,.18);opacity:0;transform:translateY(6px) scale(.92);transform-origin:14% 50%}
  html[data-theme="dark"] .nte-tb{background:#22241d;border-color:rgba(255,255,255,.1)}
  .reveal.in .nte-tb{animation:ntePop .5s cubic-bezier(.3,1.45,.45,1) 1.65s forwards}
  .nte-g-r{margin-left:auto}
  .nte-dim{color:var(--muted);opacity:.85}
  .nte-mic{position:absolute;left:16px;bottom:12px;width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--muted);box-shadow:0 1px 2px rgba(20,24,12,.05)}
  .nte-mic svg{width:12px;height:12px}
  /* the tailored explanation pops off the note, bottom-left, once Explain lands */
  .exq{position:absolute;left:26px;top:0;z-index:6;width:min(404px,calc(100% - 52px));display:flex;flex-direction:column;gap:10px;background:var(--card);border:1px solid var(--line-2);border-radius:16px;padding:14px 16px;box-shadow:0 3px 8px rgba(20,24,12,.07),0 22px 50px rgba(20,24,12,.15);opacity:0;transform:translate(-8px,12px) scale(.94);transform-origin:20% 100%}
  .reveal.in .exq.open{animation:exqPop .5s cubic-bezier(.3,1.4,.45,1) forwards}
  .exq.shut{animation:none !important;opacity:0;transform:translate(0,-8px) scale(.96);pointer-events:none}
  /* thinking pass before the answer resolves */
  .exq-think{display:flex;flex-direction:column;justify-content:flex-start;gap:10px;height:112px;overflow:hidden;font:500 12px var(--font-sans);color:var(--muted);transition:height .52s cubic-bezier(.22,1,.36,1),opacity .26s ease,transform .42s cubic-bezier(.22,1,.36,1)}
  .exq-think .tk{display:flex;align-items:center;gap:9px}
  /* the first pass ticks off, and only then does the second start */
  .exq-think .tkd{display:none;flex:none;width:12px;height:12px;color:var(--green)}
  .exq-think .tkd svg{width:12px;height:12px;display:block}
  .exq.p1 .exq-think .tk1 i{display:none}
  .exq.p1 .exq-think .tk1 .tkd{display:block}
  .exq-think .tk2{opacity:0;transform:translateY(4px)}
  .exq.p1 .exq-think .tk2{animation:tkIn .3s var(--ease) forwards}
  @keyframes tkIn{to{opacity:1;transform:none}}
  .exq-think i{flex:none;width:12px;height:12px;border-radius:50%;border:1.8px solid var(--green-tint);border-top-color:var(--green);animation:ntSpin .8s linear infinite}
  @media (prefers-reduced-motion:reduce){.exq.p1 .exq-think .tk2{animation:none;opacity:1;transform:none}}
  .exq-think{margin-bottom:0;transition:height .52s cubic-bezier(.22,1,.36,1),margin-bottom .52s cubic-bezier(.22,1,.36,1),opacity .26s ease,transform .42s cubic-bezier(.22,1,.36,1)}
  .exq.ready .exq-think{height:0;margin-bottom:-10px;opacity:0;gap:0;transform:translateY(-5px)}
  /* the conclusion replaces the spinner once desk has read the note */
  .exq-found{display:flex;align-items:center;gap:9px;height:0;margin-bottom:-10px;overflow:hidden;opacity:0;transform:translateY(5px);font:500 12px var(--font-sans);letter-spacing:-.005em;color:var(--green-deep);transition:height .46s cubic-bezier(.22,1,.36,1) .12s,margin-bottom .46s cubic-bezier(.22,1,.36,1) .12s,opacity .34s ease .26s,transform .46s cubic-bezier(.22,1,.36,1) .26s}
  .exq.ready .exq-found{height:18px;margin-bottom:0;opacity:1;transform:none}
  .exq-found svg{width:12px;height:12px;flex:none;color:var(--green)}
  .exq:not(.ready) .exc,.exq:not(.ready) .exp,.exq:not(.ready) .nt-an{display:none}
  /* until desk has picked a style, no chip reads as selected and the answer waits */
  .exq:not(.picked) .exc button[data-on="true"]{background:none;border-color:var(--line);color:var(--muted);cursor:default}
  .exq:not(.picked) .exc button em{display:none}
  .exq:not(.picked) .exp{opacity:0;transform:translateY(4px)}
  .exq .exp{transition:opacity .4s var(--ease),transform .4s var(--ease)}
  .exq.picked .exc button[data-on="true"]{animation:exPick .5s cubic-bezier(.3,1.4,.5,1)}
  @keyframes exPick{0%{transform:scale(.94)}60%{transform:scale(1.04)}100%{transform:none}}
  @media (prefers-reduced-motion:reduce){.exq.picked .exc button[data-on="true"]{animation:none}.exq-think,.exq-found{transition:none}}
  .nte-ex{cursor:pointer;user-select:none}
  .nte-tb{cursor:default}
  @keyframes exqPop{to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){.reveal.in .exq{animation:none;opacity:1;transform:none}}
  .exq .exc{margin-top:0}
  .exq .exc button{padding:5.5px 11px;font-size:11px}
  .exq .exp{margin:0;min-height:106px;height:auto;font-size:12px;padding:12px 14px}
  .exq .nt-an{margin-top:2px;min-height:18px}
  @keyframes ntePop{to{opacity:1;transform:none}}
  .nte-ex{display:inline-flex;align-items:center;gap:6px;font:600 12px var(--font-sans);color:var(--green-deep);background:var(--green-tint);border-radius:100px;padding:6px 12px}
  .nte-ex svg{width:12px;height:12px}
  .nte-ed{display:inline-flex;align-items:center;gap:6px;font:500 12px var(--font-sans);color:var(--ink-2)}
  .nte-ed svg{width:11px;height:11px;color:var(--muted)}
  .nte-sep{width:1px;height:16px;background:var(--line-2)}
  .nte-f{display:inline-flex;align-items:center;gap:10px;font-size:11.5px;color:var(--ink-2)}
  .nte-f b{font-weight:700}
  .nte-f em{font-style:italic}
  .nte-f u{text-decoration:underline}
  .nte-dots{display:inline-flex;align-items:center;gap:6px}
  .nte-d{width:11px;height:11px;border-radius:50%}
  @media (prefers-reduced-motion:reduce){.reveal.in .nte-tb{animation:none;opacity:1;transform:none}}
  /* the text is selected first — a full-height selection wash sweeps across — and only
     then does it settle into the note's highlight colour, as the toolbar arrives */
  .nt-hl{background:linear-gradient(90deg,rgba(139,168,86,.34) 0 0) no-repeat;background-size:0% 100%;background-position:0 88%;color:inherit;padding:0 1px}
  .reveal.in .nt-hl{animation:ntSel 1.9s var(--ease) .5s forwards}
  @keyframes ntSel{
    0%{background-size:0% 100%;background-image:linear-gradient(90deg,rgba(139,168,86,.34) 0 0)}
    40%{background-size:100% 100%;background-image:linear-gradient(90deg,rgba(139,168,86,.34) 0 0)}
    58%{background-size:100% 100%;background-image:linear-gradient(90deg,rgba(139,168,86,.34) 0 0)}
    60%{background-image:linear-gradient(90deg,rgba(139,168,86,.34) 0 0)}
    100%{background-size:100% 62%;background-image:linear-gradient(90deg,rgba(139,168,86,.34) 0 0)}
  }
  @media (prefers-reduced-motion:reduce){.reveal.in .nt-hl{animation:none;background-image:linear-gradient(90deg,rgba(139,168,86,.34) 0 0);background-size:100% 62%}}
  .nt-an{position:relative;display:flex;align-items:center;gap:9px;margin-top:14px;min-height:20px;font:500 12px var(--font-sans);color:var(--muted)}
  .nt-an i{flex:none;width:12px;height:12px;border-radius:50%;border:1.8px solid var(--green-tint);border-top-color:var(--green);animation:ntSpin .8s linear infinite;opacity:0}
  @keyframes ntSpin{to{transform:rotate(360deg)}}
  .nt-an .a1,.nt-an .a2{position:absolute;left:22px;right:0;opacity:0;transition:opacity .35s ease}
  .nt-an .a2{display:inline-flex;align-items:center;gap:7px;color:var(--green-deep);font-weight:600;font-size:11.5px}
  .nt-an .a2 svg{width:11px;height:11px;flex:none}
  .exq.ready .nt-an > i{animation:ntSpin .8s linear infinite,ntSpinHide .1s linear 1.5s forwards;opacity:1}
  .nt-an .a1 .th{display:inline-block;width:3.5px;height:3.5px;border-radius:50%;background:currentColor;margin-left:3px;vertical-align:2px;animation:ntTh 1.05s ease-in-out infinite}
  .nt-an .a1 .th:nth-child(2){animation-delay:.16s}
  .nt-an .a1 .th:nth-child(3){animation-delay:.32s}
  @keyframes ntTh{0%,100%{opacity:.3;transform:none}50%{opacity:1;transform:translateY(-2.5px)}}
  @keyframes ntSpinHide{to{opacity:0;visibility:hidden}}
  .exq.ready .nt-an .a1{animation:ntA1 1.5s ease forwards}
  @keyframes ntA1{0%{opacity:0}12%{opacity:1}90%{opacity:1}100%{opacity:0}}
  .exq.ready .nt-an .a2{animation:ntA2 .5s cubic-bezier(.3,1.4,.5,1) 1.55s forwards}
  .nt-an .a2{transform:translateY(4px)}
  @keyframes ntA2{to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){.nt-hl{background-size:100% 62%}.reveal.in .nt-an i{animation:none;opacity:0}.reveal.in .nt-an .a1{animation:none;opacity:0}.reveal.in .nt-an .a2{animation:none;opacity:1}}
  .exc button{position:relative}
  .exc button em{font-style:normal;margin-left:6px;color:var(--green);font-size:10px}
  .exc button[data-on="true"] em{color:#A9D95E}
  /* 04 — standing, deltas, milestones */
  .fg-rec{position:relative;overflow:hidden}
  .rc-hero{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-top:16px;padding:18px 20px;border-radius:16px;background:var(--green-tint)}
  html[data-theme="dark"] .rc-hero{background:rgba(143,210,19,.08)}
  .rc-hl{min-width:0}
  .rc-k{display:block;font:600 9px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--green-deep)}
  .rc-big{display:block;margin:6px 0 4px;font:600 32px var(--font-display);letter-spacing:-.026em;line-height:1;color:var(--ink)}
  .rc-sub{display:block;font:500 11.5px var(--font-sans);color:var(--muted)}
  /* where you sit against the cohort */
  .rc-cohort{flex:none;width:150px}
  .rc-ct{position:relative;display:block;height:7px;border-radius:5px;background:rgba(26,26,26,.09)}
  .rc-you{position:absolute;top:-3.5px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--green);border:2.5px solid var(--card);box-shadow:0 1px 3px rgba(20,24,12,.2);transform:scale(0);transition:transform .5s cubic-bezier(.3,1.5,.5,1) .5s}
  .reveal.in .rc-you{transform:scale(1)}
  .rc-cl{display:flex;justify-content:space-between;margin-top:9px}
  .rc-cl u{text-decoration:none;font:600 8px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
  .rc-cl u:last-child{color:var(--green-deep)}
  .rc-list{margin-top:8px}
  .rc-streak{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-2)}
  .rc-sh{display:flex;align-items:baseline;gap:10px}
  .rc-sh span{font:600 9px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
  .rc-sh b{font:600 17px var(--font-display);letter-spacing:-.016em;color:var(--ink)}
  .rc-sh em{margin-left:auto;font:600 9px var(--font-mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--green-deep);background:var(--green-tint);border-radius:100px;padding:3.5px 9px}
  .rc-track{position:relative;height:7px;margin-top:12px;border-radius:5px;background:var(--bg)}
  .rc-track i{display:block;height:100%;width:0;border-radius:5px;background:var(--green);transition:width 1.2s var(--ease) .4s}
  .reveal.in .rc-track i{width:75%}
  .rc-m{position:absolute;top:-4px;width:1.5px;height:15px;background:var(--line);text-decoration:none}
  .rc-m u{position:absolute;left:50%;top:17px;transform:translateX(-50%);text-decoration:none;font:600 8.5px var(--font-mono);letter-spacing:.1em;color:var(--muted-2);white-space:nowrap}
  /* the term's milestones, two down one to go */
  .rc-goals{display:flex;flex-wrap:wrap;gap:7px;margin-top:28px}
  .rc-goals span{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:26px;border-radius:100px;padding:0 12px;font:500 11px var(--font-sans);letter-spacing:-.005em;line-height:1;transition:transform .2s var(--ease)}
  .rc-goals span:hover{transform:translateY(-1px)}
  .rc-goals i{flex:none;display:grid;place-items:center;width:14px;height:14px;border-radius:50%;font:600 8px var(--font-mono);font-style:normal;line-height:1;text-align:center;padding-left:.5px}
  .rc-goals .done{color:var(--green-deep);background:var(--green-tint)}
  .rc-goals .done i{background:var(--green);color:var(--on-green)}
  .rc-goals .next{color:var(--muted);background:rgba(26,26,26,.045)}
  .rc-goals .next i{border:1.5px dashed var(--line);box-sizing:border-box}
  @media (prefers-reduced-motion:reduce){.rc-you{transform:scale(1)}.rc-track i{width:75%}}
  .rec-v{display:inline-flex;align-items:baseline;gap:9px}
  .cnt{transition:color .2s ease}
  .cnt.tick{animation:cntTick .6s var(--ease)}
  @keyframes cntTick{0%{color:var(--green-deep);transform:translateY(-1px)}100%{color:var(--ink);transform:none}}
  @media (prefers-reduced-motion:reduce){.cnt.tick{animation:none}}
  .rec-v .up{display:inline-flex;align-items:center;gap:3px;font:600 9px var(--font-mono);font-style:normal;letter-spacing:.08em;color:var(--green-deep);background:var(--green-tint);border-radius:100px;padding:3px 7px}
  .rec-v .up svg{width:8px;height:8px}
  .rec-v .pb{font:600 8.5px var(--font-mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:#8a6d1f;background:#F6EED3;border-radius:100px;padding:3px 7px}

  /* opener: centred, with the five values named as jump links (from the freedom mock) */
  .vo{text-align:center;max-width:760px;margin:0 auto}
  /* the wordmark set inline, cap-matched to the headline */
  .vo-wm{height:33px;width:auto;display:inline-block;vertical-align:-2px;margin:0 1px 0 6px}
  html[data-theme="dark"] .vo-wm{content:url("assets/desk-wordmark-reversed.png")}
  .vo h2{margin-top:0}
  .vo h2{font-size:44px;letter-spacing:-.03em;line-height:1.05;margin:0;color:var(--ink);text-wrap:balance}
  .vo h2 .g{color:var(--green)}
  .vo p{font-size:15.5px;line-height:1.62;color:var(--muted);margin:16px auto 0;max-width:46ch;text-wrap:pretty}
  .vo p b{font-weight:560;color:var(--ink-2)}
  .vo-i{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin-top:30px}
  .vo-i a{position:relative;display:inline-flex;align-items:center;gap:10px;height:38px;padding:0 8px 0 14px;border-radius:100px;font:500 13.5px var(--font-sans);letter-spacing:-.008em;white-space:nowrap;text-decoration:none;border:1px solid rgba(255,255,255,.55);background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.34));backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);color:var(--ink-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 1px 2px rgba(20,24,12,.04),0 10px 26px rgba(20,24,12,.06);transition:border-color .2s,color .2s,background .2s,transform .2s var(--ease),box-shadow .2s}
  /* the number rides in its own tinted well, so the pill reads as a numbered stop */
  .vo-i a i{display:grid;place-items:center;order:2;width:22px;height:22px;border-radius:50%;font:600 9.5px var(--font-mono);font-style:normal;letter-spacing:.06em;color:var(--muted);background:rgba(26,26,26,.05);transition:background .2s,color .2s}
  .vo-i a:hover{border-color:rgba(255,255,255,.9);background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.56));color:var(--ink);transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 5px rgba(20,24,12,.05),0 16px 38px rgba(20,24,12,.1)}
  .vo-i a:hover i{background:var(--green);color:var(--on-green)}
  .vo-i a:active{transform:translateY(0);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(20,24,12,.05),0 6px 16px rgba(20,24,12,.06)}
  html[data-theme="dark"] .vo-i a{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.05));border-color:rgba(255,255,255,.13);color:rgba(255,255,255,.82);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
  html[data-theme="dark"] .vo-i a i{background:rgba(143,210,19,.18);color:#A9D95E}
  html[data-theme="dark"] .vo-i a:hover{background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.08));border-color:rgba(255,255,255,.22);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}

  /* the section closes on the claim, with the features link as the next step */
  .vcl{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:120px;padding-top:30px;border-top:1px solid var(--line)}
  .vcl p{margin:0;font-family:var(--font-display);font-size:29px;font-weight:600;letter-spacing:-.024em;color:var(--ink)}
  .vcl p .g{color:var(--green)}
  /* the same frosted chip as the index above, one size down and quieter */
  .vcl-btn{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 15px;border-radius:100px;font:500 12.5px var(--font-sans);letter-spacing:-.008em;color:var(--ink-2);text-decoration:none;border:1px solid rgba(255,255,255,.55);background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.34));backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 1px 2px rgba(20,24,12,.04),0 6px 16px rgba(20,24,12,.05);transition:border-color .2s,background .2s,transform .2s var(--ease),box-shadow .2s,color .2s}
  .vcl-btn:hover{border-color:rgba(255,255,255,.9);background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.56));color:var(--ink);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 5px rgba(20,24,12,.05),0 10px 24px rgba(20,24,12,.08)}
  html[data-theme="dark"] .vcl-btn{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.05));border-color:rgba(255,255,255,.13);color:rgba(255,255,255,.82);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
  .vcl-btn svg{width:12px;height:12px;color:var(--green-ink);transition:transform .2s cubic-bezier(.34,1.4,.5,1)}
  .vcl-btn:hover svg{transform:translateX(3px)}
  @media (max-width:820px){.vcl{flex-direction:column;align-items:flex-start;gap:18px;margin-top:80px}.vcl p{font-size:24px}}
  /* numbered rule above each eyebrow */
  .fnum{display:flex;align-items:center;gap:12px;margin-bottom:20px}
  .fnum i{font:600 11px var(--font-mono);font-style:normal;letter-spacing:.14em;color:var(--green-ink)}
  .fnum span{flex:1;height:1px;background:var(--line);position:relative}
  /* the numbered rule, drawn by hand: three strokes, two lifts, pressure easing in and out.
     The mask sits on a pseudo-element, not the rule itself, or it would clip the books standing on it */
  .fnum span{height:8px;background:none}
  .fnum span::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:var(--line);
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 8' preserveAspectRatio='none'%3E%3Cpath d='M0 3.5Q96 2.9 196 3.4Q296 3.9 386 3.2' fill='none' stroke='%23fff' stroke-width='0.85' stroke-linecap='round'/%3E%3Cpath d='M397 3.25Q520 2.7 660 3.6Q792 4.35 806 4.1' fill='none' stroke='%23fff' stroke-width='1.35' stroke-linecap='round'/%3E%3Cpath d='M816 4.05Q930 3.5 1046 4.3Q1130 4.8 1200 4.15' fill='none' stroke='%23fff' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 8' preserveAspectRatio='none'%3E%3Cpath d='M0 3.5Q96 2.9 196 3.4Q296 3.9 386 3.2' fill='none' stroke='%23fff' stroke-width='0.85' stroke-linecap='round'/%3E%3Cpath d='M397 3.25Q520 2.7 660 3.6Q792 4.35 806 4.1' fill='none' stroke='%23fff' stroke-width='1.35' stroke-linecap='round'/%3E%3Cpath d='M816 4.05Q930 3.5 1046 4.3Q1130 4.8 1200 4.15' fill='none' stroke='%23fff' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
    -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
  /* 01, 02 and 03 were sharing one mask, so they were the same mark three times over. Each
     rule now has its own stroke sequence: different lift points, weights and wobble. */
  #z02 .fnum span::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4.1Q140 4.9 320 3.9Q500 2.95 690 3.7' fill='none' stroke='%23fff' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M702 3.75Q860 4.5 1020 3.5Q1120 2.9 1200 3.35' fill='none' stroke='%23fff' stroke-width='0.9' stroke-linecap='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4.1Q140 4.9 320 3.9Q500 2.95 690 3.7' fill='none' stroke='%23fff' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M702 3.75Q860 4.5 1020 3.5Q1120 2.9 1200 3.35' fill='none' stroke='%23fff' stroke-width='0.9' stroke-linecap='round'/%3E%3C/svg%3E");
    -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
  #z03 .fnum span::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 8' preserveAspectRatio='none'%3E%3Cpath d='M0 3.2Q70 2.6 150 3.5' fill='none' stroke='%23fff' stroke-width='0.75' stroke-linecap='round'/%3E%3Cpath d='M162 3.55Q300 4.5 430 3.4Q520 2.7 560 3.1' fill='none' stroke='%23fff' stroke-width='1.15' stroke-linecap='round'/%3E%3Cpath d='M574 3.15Q700 2.5 830 3.6Q900 4.2 928 4.0' fill='none' stroke='%23fff' stroke-width='0.95' stroke-linecap='round'/%3E%3Cpath d='M942 3.95Q1060 3.2 1200 4.4' fill='none' stroke='%23fff' stroke-width='0.7' stroke-linecap='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 8' preserveAspectRatio='none'%3E%3Cpath d='M0 3.2Q70 2.6 150 3.5' fill='none' stroke='%23fff' stroke-width='0.75' stroke-linecap='round'/%3E%3Cpath d='M162 3.55Q300 4.5 430 3.4Q520 2.7 560 3.1' fill='none' stroke='%23fff' stroke-width='1.15' stroke-linecap='round'/%3E%3Cpath d='M574 3.15Q700 2.5 830 3.6Q900 4.2 928 4.0' fill='none' stroke='%23fff' stroke-width='0.95' stroke-linecap='round'/%3E%3Cpath d='M942 3.95Q1060 3.2 1200 4.4' fill='none' stroke='%23fff' stroke-width='0.7' stroke-linecap='round'/%3E%3C/svg%3E");
    -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
  /* books standing on the 01 hairline — same pencil standard as shelf/desk */
  .fnum-books{position:absolute;bottom:3px;left:12px;width:min(118px,15vw);height:auto;display:block;color:rgba(26,26,26,.22);pointer-events:none}
  html[data-theme="dark"] .fnum-books{color:rgba(255,255,255,.2)}
  .fpts{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
  .fpts li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
  .fpts li::before{content:"";position:absolute;left:0;top:3px;width:15px;height:15px;border-radius:50%;background:var(--green-tint)}
  .fpts li::after{content:"";position:absolute;left:4.5px;top:7.5px;width:6px;height:6px;border-radius:50%;background:var(--green)}
  .fpts li b{font-weight:600;color:var(--ink)}
  /* same frosted chip as "See all features" */
  .flink{display:inline-flex;align-items:center;gap:8px;height:32px;margin-top:28px;padding:0 16px;border-radius:100px;font:500 13.5px var(--font-sans);letter-spacing:-.012em;color:var(--ink-2);text-decoration:none;border:1px solid rgba(255,255,255,.55);background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.34));backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 1px 2px rgba(20,24,12,.04),0 6px 16px rgba(20,24,12,.05);transition:border-color .2s,background .2s,transform .2s var(--ease),box-shadow .2s,color .2s}
  .flink{position:relative;overflow:hidden;isolation:isolate}
  .flink::before{content:"";position:absolute;z-index:-1;inset:-1px;border-radius:100px;background:#fff;transform:scaleX(0);transform-origin:right;transition:transform .3s cubic-bezier(.4,0,.2,1)}
  .flink:hover::before{transform:scaleX(1);transition:transform .44s cubic-bezier(.16,1,.3,1)}
  .flink:hover{border-color:#fff;color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 2px 6px rgba(20,24,12,.07),0 14px 30px rgba(20,24,12,.11);transition:border-color .26s,color .26s,box-shadow .34s}
  .flink:hover svg{color:var(--green);animation:flinkGo .46s cubic-bezier(.4,0,.2,1) .06s}
  @keyframes flinkGo{0%{transform:none}44%{transform:translateX(10px);opacity:0}45%{transform:translateX(-10px);opacity:0}100%{transform:none;opacity:1}}
  @media (prefers-reduced-motion:reduce){.flink:hover svg{animation:none}.flink::before{transition:none}}
  html[data-theme="dark"] .flink{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.05));border-color:rgba(255,255,255,.13);color:rgba(255,255,255,.82);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
  .flink svg{width:13px;height:13px;color:var(--green-ink);transition:transform .36s cubic-bezier(.4,0,.2,1)}

  /* each "see how" chip is paired with the waitlist CTA reduced to just its green disc */
  .fcta{display:flex;align-items:center;gap:10px;margin-top:28px;flex-wrap:wrap}
  .fcta .flink{margin-top:0}
  .fbtn{flex:none;width:32px;height:32px;padding:0;gap:0;justify-content:center;background:transparent}
  .fbtn::before{display:none}
  .fbtn .btn-cta-go{width:30px;height:30px}
  /* arrow matched to the chip's, and the same 1px lift on hover */
  .fbtn .btn-cta-go svg{width:13px;height:13px;left:calc(50% - 6.5px);top:calc(50% - 6.5px)}
  .fbtn{transition:transform .2s cubic-bezier(.34,1.4,.5,1),box-shadow .3s ease,background 0s linear 0s}

  /* figure shells — a full column each, room for real content */
  .fg{background:var(--card);border:1px solid var(--line-2);border-radius:22px;padding:26px 28px;box-shadow:0 2px 6px rgba(20,24,12,.04),0 20px 46px rgba(20,24,12,.07)}
  .fg-h{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font:600 9.5px var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)}
  .fg-h em{font-style:normal;color:var(--green-ink)}
  /* 01 · knowledge, kept calm: your topics and their state, on paper */
  .kn-ready{display:inline-flex;align-items:center;gap:5px;font:600 8.5px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
  .kn-ready b{font-weight:600;color:var(--green-deep)}
  .kn-mod{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:15px}
  .kn-mod b{font:600 20px var(--font-display);letter-spacing:-.016em;color:var(--ink)}
  .kn-mod u{text-decoration:none;font:500 11px var(--font-mono);letter-spacing:.06em;color:var(--muted-2)}
  .kn-bar{display:flex;gap:3px;height:5px;margin:12px 0 0}
  .kn-bar i{border-radius:4px}
  .kn-leg{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:11px}
  .kn-leg span{display:inline-flex;align-items:center;gap:6px;font:500 10px var(--font-mono);letter-spacing:.08em;color:var(--muted)}
  .kn-leg span em{font-style:normal;font-weight:600;color:var(--ink-2)}
  .kn-leg i{width:8px;height:8px;border-radius:50%}
  .kn-list{margin-top:18px;border-top:1px solid var(--line-2)}
  .kn-row{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line-2)}
  .kn-row i{flex:none;width:8px;height:8px;border-radius:50%}
  .kn-row b{font:600 14px var(--font-sans);letter-spacing:-.008em;color:var(--ink)}
  .kn-row em{margin-left:auto;font:600 9px var(--font-mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
  .kn-row.up em{color:var(--green-deep);background:var(--green-tint);border-radius:100px;padding:3.5px 9px}
  .kn-row.fade em{color:#8a6d1f;background:#F6EED3;border-radius:100px;padding:3.5px 9px}
  .kn-note{height:32px;overflow:hidden;display:flex;align-items:center;gap:10px;margin-top:16px;font-size:12.5px;line-height:1.5;color:var(--muted)}
  .kn-note b{font-weight:600;color:var(--ink-2)}
  .kn-note i{flex:none;width:20px;height:20px;border-radius:6px;background:var(--green-tint);color:var(--green-deep);display:grid;place-items:center}
  .kn-note svg{width:11px;height:11px}
  /* 02 · curve */
  .axis{display:flex;justify-content:space-between;margin-top:10px;font:500 10px var(--font-mono);letter-spacing:.08em;color:var(--muted-2)}
  .peak{display:inline-flex;align-items:center;gap:6px;padding:4px 11px 4px 8.5px;border-radius:100px;background:var(--green-tint);font:600 9.5px var(--font-mono);letter-spacing:.04em;text-transform:none;color:var(--green-deep)}
  .peak i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--green-ink);box-shadow:0 0 0 2.5px rgba(110,183,4,.15)}
  .peak u{text-decoration:none;font-size:8.5px;letter-spacing:.15em;text-transform:uppercase;opacity:.6}
  .sched{margin-top:20px;border-top:1px solid var(--line-2)}
  .sched-r{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid var(--line-2)}
  .sched-r u{text-decoration:none;flex:none;width:64px;font:600 10.5px var(--font-mono);letter-spacing:.06em;color:var(--muted-2)}
  .sched-r b{font:600 13.5px var(--font-sans);letter-spacing:-.008em;color:var(--ink)}
  .sched-r em{margin-left:auto;font:600 9px var(--font-mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
  .sched-r.deep em{color:var(--green-deep);background:var(--green-tint);border-radius:100px;padding:3.5px 9px}
  /* 03 · explanations */
  .exc{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
  .exc button{border:1px solid var(--line);background:none;border-radius:100px;padding:7px 14px;font:500 12px var(--font-sans);color:var(--muted);cursor:pointer;transition:border-color .18s ease,color .18s ease,background .18s ease}
  .exc button:hover{border-color:var(--ink);color:var(--ink)}
  .exc button[data-on="true"]{background:var(--dark);border-color:var(--dark);color:#fff;cursor:default}
  .exp{margin:16px 0 0;padding:16px 18px;background:var(--bg);border:1px solid var(--line-2);border-radius:14px;font-size:13.5px;line-height:1.66;color:var(--ink-2);height:132px;overflow:hidden;text-wrap:pretty}
  .exf{display:flex;align-items:center;gap:8px;margin:14px 0 0;font:600 9px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
  .exf i{width:16px;height:1px;background:var(--line)}
  /* 04 · receipt */
  .rec-head{font:600 9.5px var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--green-ink);padding-bottom:12px;border-bottom:1px solid var(--line-2);display:flex;justify-content:space-between}
  .rec-head span{color:var(--muted-2)}
  .rec-r{display:flex;justify-content:space-between;align-items:baseline;padding:11px 0;border-bottom:1px dotted var(--line-2);font:600 11px var(--font-mono);letter-spacing:.1em;color:var(--muted)}
  .rec-r b{font:600 19px var(--font-mono);letter-spacing:0;color:var(--ink)}
  .rec-r:last-of-type{border-bottom:0}
  .rec-f{margin-top:14px;font:500 9px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);text-align:center}
  /* 05b · how focus builds — a dark panel docked under the session card, cycling itself */
  .fostack{position:relative;display:flex;flex-direction:column;min-width:0}
  /* drawn on the paper below the card — no box, no fill */
  .foc{position:relative;margin-top:30px;padding:0 22px}
  .foc-h{display:flex;justify-content:space-between;align-items:center;gap:14px}
  .foc-h em{font:600 8.5px var(--font-mono);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
  .foc-now{display:inline-flex;align-items:center;gap:7px}
  .foc-dot{width:6px;height:6px;border-radius:50%;background:var(--green);transition:background .3s ease}
  .foc[data-v="else"] .foc-dot{background:#D9A514}
  .foc-now b{font:600 9.5px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--green-deep);transition:color .3s ease}
  .foc[data-v="else"] .foc-now b{color:#8a6d1f}
  .foc-svg{display:block;width:100%;height:46px;margin-top:8px}
  .foc-y{position:absolute;left:0;top:34px;font:500 8.5px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);opacity:.75;writing-mode:vertical-rl;transform:rotate(180deg)}
  .foc-svg path{vector-effect:non-scaling-stroke}
  .foc-line{stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
  .foc[data-v="desk"] .foc-d,.foc[data-v="else"] .foc-e{opacity:1;animation:focDraw 1.5s cubic-bezier(.22,1,.36,1) forwards}
  @keyframes focDraw{to{stroke-dashoffset:0}}
  .foc-fill{opacity:0;transition:opacity .5s ease}
  .foc[data-v="desk"] .foc-fill{opacity:1;transition-delay:1.1s}
  .foc-ax{display:flex;justify-content:space-between;margin-top:4px}
  .foc-ax span{font:500 9px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
  .foc-n{display:none;margin:8px 0 0;font:500 11.5px var(--font-sans);line-height:1.45;color:var(--muted)}
  .foc-n b{font-weight:600;color:var(--ink-2)}
  .foc[data-v="desk"] .foc-nd,.foc[data-v="else"] .foc-ne{display:block}
  .foc-f{display:flex;align-items:baseline;gap:9px;margin-top:11px;padding-top:11px;border-top:1px dashed var(--line)}
  .foc-f b{font:600 16px var(--font-display);letter-spacing:-.018em;color:var(--ink)}
  .foc-f span{font:500 11px var(--font-sans);line-height:1.45;color:var(--muted-2)}
  @media (prefers-reduced-motion:reduce){.foc-line{stroke-dashoffset:0}.foc[data-v="desk"] .foc-d,.foc[data-v="else"] .foc-e{animation:none}}
  /* 05 · focus — two tracks: fragmented across apps, unbroken on desk */

  .fg-ink5{position:relative;background:var(--dark);border:0;overflow:hidden;box-shadow:0 3px 8px rgba(20,24,12,.12),0 26px 56px rgba(20,24,12,.2)}
  .fg-ink5::before{content:"";position:absolute;inset:0;background:radial-gradient(340px 180px at 88% -10%,rgba(143,210,19,.13),transparent 70%);pointer-events:none}
  .fg-ink5 .fg-h{color:rgba(255,255,255,.34)}
  .fg-ink5 .fg-h em{color:#8FD213}
  /* the number the card is really about */
  .fo-big{display:flex;align-items:baseline;gap:12px;margin-top:18px}
  .fo-big b{font:600 42px var(--font-display);letter-spacing:-.03em;line-height:1;color:#fff}
  .fo-big b i{font-style:normal;font-size:22px;color:rgba(255,255,255,.42);margin-left:1px}
  .fo-big span{font:500 11.5px var(--font-sans);color:rgba(143,210,19,.8)}
  .fo-wm{display:inline-flex;align-items:center;gap:7px}
  .fo-wm img{height:14px;width:auto;display:block}
  .fo-cmp{position:relative;display:flex;flex-direction:column;gap:22px;margin-top:24px}
  /* the frame marks which track the graph below is drawing, sliding between rows */
  .fo-hl{position:absolute;left:-11px;right:-11px;top:0;height:0;border-radius:13px;border:1px solid rgba(143,210,19,.4);background:rgba(143,210,19,.05);opacity:0;pointer-events:none;transition:transform .62s var(--ease),height .62s var(--ease),border-color .45s ease,background .45s ease,opacity .45s ease}
  .fo-hl.on{opacity:1}
  .fo-track[tabindex]{cursor:pointer;outline:none}
  .fo-track[tabindex] .fo-tl2 b,.fo-track[tabindex] .fo-tl2 em{transition:color .2s ease}
  .fo-track[tabindex]:hover .fo-tl2 em,.fo-track[tabindex]:focus-visible .fo-tl2 em{color:rgba(255,255,255,.6)}
  .fo-hl[data-v="else"]{border-color:rgba(217,165,20,.42);background:rgba(217,165,20,.055)}
  @media (prefers-reduced-motion:reduce){.fo-hl{transition:opacity .3s ease}}
  .fo-tl2{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:10px}
  .fo-tl2 b{font:600 12.5px var(--font-sans);letter-spacing:-.008em;color:rgba(255,255,255,.9)}
  .fo-tl2 em{font:600 9px var(--font-mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.34)}
  .fo-bar{display:flex;align-items:center;gap:4px;height:18px}
  /* fragmented: short stints, each break marked with an exit */
  .frag .ft-seg{height:12px;border-radius:3px;background:rgba(255,255,255,.17);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
  .reveal.in .frag .ft-seg{transform:scaleX(1)}
  .frag .ft-seg:nth-of-type(2){transition-delay:.05s}
  .frag .ft-seg:nth-of-type(3){transition-delay:.1s}
  .frag .ft-seg:nth-of-type(4){transition-delay:.15s}
  .frag .ft-seg:nth-of-type(5){transition-delay:.2s}
  .frag .ft-seg:nth-of-type(6){transition-delay:.25s}
  .frag .ft-seg:nth-of-type(7){transition-delay:.3s}
  /* each break is an app that took the session */
  .ft-out{flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:5px;background:rgba(226,113,127,.16);color:#E88C97;opacity:0;transform:scale(.6);transition:opacity .3s ease,transform .34s cubic-bezier(.34,1.5,.5,1)}
  .ft-out svg{width:11px;height:11px}
  .reveal.in .ft-out{opacity:1;transform:none}
  .reveal.in .ft-out:nth-of-type(2){transition-delay:.42s}
  .reveal.in .ft-out:nth-of-type(3){transition-delay:.49s}
  .reveal.in .ft-out:nth-of-type(4){transition-delay:.56s}
  .reveal.in .ft-out:nth-of-type(5){transition-delay:.63s}
  .reveal.in .ft-out:nth-of-type(6){transition-delay:.7s}
  .reveal.in .ft-out:nth-of-type(1){transition-delay:.35s}
  /* unbroken: one continuous block */
  .fo-bar.one{height:12px;background:rgba(143,210,19,.12);border-radius:4px;overflow:hidden}
  .fo-fill2{position:relative;display:block;height:100%;width:0;border-radius:4px;overflow:hidden;background:linear-gradient(90deg,#6EB704,#8FD213);transition:width 2.6s cubic-bezier(.33,.7,.32,1) .55s}
  .reveal.in .fo-fill2{width:100%}
  /* a light sweep keeps travelling once it is full — the session is still going */
  .fo-fill2::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.42) 50%,transparent 62%);transform:translateX(-120%)}
  .reveal.in .fo-fill2::after{animation:foSweep 2.8s cubic-bezier(.4,0,.6,1) 3s infinite}
  @keyframes foSweep{to{transform:translateX(120%)}}
  .fo-note{display:block;margin-top:9px;font:500 10.5px var(--font-mono);letter-spacing:.06em;color:rgba(255,255,255,.36)}
  .fo-note b{font-weight:600;color:rgba(255,255,255,.62)}
  .fo-note.on{color:rgba(143,210,19,.7)}
  .fo-note.on b{color:#8FD213}
  /* what's in the room, so you never have to leave */
  .fo-room{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:24px;padding-top:17px;border-top:1px solid rgba(255,255,255,.08)}
  .fo-t{display:inline-flex;align-items:center;gap:7px;font:500 11px var(--font-sans);color:rgba(255,255,255,.74);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:100px;padding:6px 12px;transition:background .2s ease,border-color .2s ease,transform .2s var(--ease)}
  .fo-t:hover{background:rgba(143,210,19,.13);border-color:rgba(143,210,19,.3);transform:translateY(-1px)}
  .fo-t svg{width:11px;height:11px;color:#8FD213;flex:none}
  .fo-room em{margin-left:auto;font:600 8.5px var(--font-mono);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.3)}
  @media (prefers-reduced-motion:reduce){.reveal.in .frag .ft-seg{transform:scaleX(1)}.reveal.in .fo-fill2{width:100%}.reveal.in .fo-fill2::after{animation:none}.reveal.in .ft-out{opacity:1;transform:none}}
  .fq{display:flex;gap:10px;margin-top:18px}
  .fq div{flex:1;background:var(--bg);border:1px solid var(--line-2);border-radius:12px;padding:12px 13px}
  .fq b{display:block;font:600 17px var(--font-display);letter-spacing:-.016em;color:var(--ink)}
  .fq span{display:block;margin-top:3px;font:500 9.5px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
  /* closer */
  .vcl{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:120px;padding-top:28px;border-top:1px solid var(--line)}
  .vcl p{margin:0;font:600 19px var(--font-display);letter-spacing:-.018em;color:var(--ink)}
  .vcl p .g{color:var(--green)}
  /* the same frosted chip as the index above, one size down and quieter */
  .vcl-btn{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 15px;border-radius:100px;font:500 12.5px var(--font-sans);letter-spacing:-.008em;color:var(--ink-2);text-decoration:none;border:1px solid rgba(255,255,255,.55);background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.34));backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 1px 2px rgba(20,24,12,.04),0 6px 16px rgba(20,24,12,.05);transition:border-color .2s,background .2s,transform .2s var(--ease),box-shadow .2s,color .2s}
  .vcl-btn:hover{border-color:rgba(255,255,255,.9);background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.56));color:var(--ink);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 5px rgba(20,24,12,.05),0 10px 24px rgba(20,24,12,.08)}
  html[data-theme="dark"] .vcl-btn{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.05));border-color:rgba(255,255,255,.13);color:rgba(255,255,255,.82);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
  .vcl-btn svg{width:12px;height:12px;color:var(--green-ink);transition:transform .2s cubic-bezier(.34,1.4,.5,1)}
  .vcl-btn:hover svg{transform:translateX(3px)}
  @media (max-width:980px){.vcl{flex-direction:column;align-items:flex-start;gap:16px;margin-top:72px}}
  /* ===== value tray (bento) — retained for archive/Desk Value Tray (retired) ===== */
  .value-tray { --paper-v: linear-gradient(180deg, transparent 0, #000 12%, #000 86%, transparent 100%); padding-bottom: 56px; }
  .value-tray + .section { padding-top: 72px; }
  .bnf{background:rgba(255,255,255,.62);border-radius:38px;padding:16px}
  html[data-theme="dark"] .bnf{background:rgba(255,255,255,.05)}
  .bn-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
  .bn-cell{background:var(--card);border-radius:22px;padding:34px 36px;position:relative;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(20,24,12,.04),0 12px 32px rgba(20,24,12,.05);transition:transform .3s var(--ease),box-shadow .3s}
  .bn-cell:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(20,24,12,.06),0 18px 44px rgba(20,24,12,.09)}
  html[data-theme="dark"] .bn-cell{box-shadow:0 1px 2px rgba(0,0,0,.28),0 12px 32px rgba(0,0,0,.32)}
  .bn-k{font:600 11px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--green-ink)}
  .lx-hl{font-family:var(--font-display);font-weight:600;letter-spacing:-.022em;line-height:1.1;color:var(--ink)}
  .lx-hl .g{color:var(--green-ink)}
  .bn-hl{font-size:25px;margin:12px 0 10px}
  .bn-line{margin:0;font-size:15px;line-height:1.58;color:var(--muted);text-wrap:pretty}
  .bn-fig{margin-top:auto;padding-top:24px}
  .lx-bullets{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
  .lx-bullets li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
  .lx-bullets li::before{content:"";flex:none;width:15px;height:15px;margin-top:3px;background:var(--green-ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
  .lx-axis{display:flex;justify-content:space-between;font:10.5px var(--font-mono);color:var(--muted-2);margin-top:6px}
  .lx-legend{display:flex;gap:14px;margin-top:10px;font-size:11.5px;color:var(--muted)}
  .lx-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px}
  .bn-c1{grid-column:span 7;min-height:430px}
  .bn-c1 .bn-body{display:grid;grid-template-columns:1.02fr .98fr;gap:40px;flex:1}
  .bn-c1 .bn-fig{display:flex;flex-direction:column;justify-content:center;padding-top:0}
  .bn-c2{grid-column:span 5}
  .bn-c4{grid-column:span 3}
  .bn-c4 .bn-nums{display:flex;flex-direction:column;gap:20px;margin-top:auto;padding-top:22px}
  .bn-num b{display:block;font-family:var(--font-display);font-size:30px;font-weight:600;letter-spacing:-.03em;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
  .bn-num span{display:block;margin-top:4px;font-size:12.5px;color:var(--muted)}
  .bn-c5{grid-column:span 4;background:#00312D}
  .bn-c5 .bn-k{color:#8FD213}
  .bn-c5 .bn-hl{color:#fff}
  .bn-c5 .bn-line{color:rgba(244,246,239,.66)}
  .bn-peak{position:absolute;top:30px;right:32px;font:600 11px var(--font-mono);color:var(--green-ink);background:var(--green-tint);border-radius:100px;padding:5px 12px}
  html[data-theme="dark"] .bn-peak{color:#B6E062}
  .bn-chips{display:flex;flex-wrap:wrap;gap:9px}
  .bn-chip{display:inline-flex;padding:9px 15px;border-radius:100px;background:#F1F0EB;font:600 12.5px var(--font-sans);color:var(--muted)}
  .bn-chip.on{background:var(--green-tint);color:var(--green-deep)}
  html[data-theme="dark"] .bn-chip{background:rgba(255,255,255,.08)}
  html[data-theme="dark"] .bn-chip.on{background:var(--green-tint);color:#B6E062}
  .lx-draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--ease) .08s}
  .bn-cell:hover .lx-draw{stroke-dashoffset:0}
  .bn-pulse circle{transition:transform .35s var(--ease);transform-origin:center;transform-box:fill-box}
  .bn-cell:hover .bn-pulse circle{transform:scale(1.16)}
  .bn-cell:hover .bn-pulse circle:nth-child(2){transition-delay:.05s}
  .bn-cell:hover .bn-pulse circle:nth-child(3){transition-delay:.1s}
  .bn-cell:hover .bn-pulse circle:nth-child(4){transition-delay:.15s}
  .bn-cell:hover .bn-pulse circle:nth-child(5){transition-delay:.2s}
  .bn-cell:hover .bn-pulse circle:nth-child(6){transition-delay:.25s}
  /* "how it works" affordance — kept for reuse; no cell carries it at the moment. Add
     data-more="01".."05" to any element inside the tray to open the matching sheet. */
  .bn-more{position:absolute;right:22px;bottom:22px;z-index:3;width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--ink);cursor:pointer;opacity:0;transform:translateY(5px);transition:opacity .2s var(--ease),transform .2s var(--ease),border-color .18s,background .18s,box-shadow .25s}
  .bn-cell:hover .bn-more,.bn-more:focus-visible{opacity:1;transform:none}
  .bn-more:hover{border-color:transparent;background:rgba(255,255,255,.62);transform:translateY(-1px);box-shadow:0 1px 2px rgba(20,24,12,.04),0 12px 32px rgba(20,24,12,.07)}
  .bn-more svg{width:14px;height:14px;flex:none}
  .bn-c5 .bn-more{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#F4F6EF}
  .bn-c5 .bn-more:hover{background:rgba(255,255,255,.17);border-color:transparent;box-shadow:none}
  html[data-theme="dark"] .bn-more{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:#F4F6EF}
  html[data-theme="dark"] .bn-more:hover{background:rgba(255,255,255,.13);box-shadow:none}
  @media (hover:none){.bn-more{opacity:1;transform:none}}
  /* detail sheet */
  .dsheet-back{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:24px;background:rgba(20,24,12,.42);backdrop-filter:blur(3px);animation:dsFade .18s var(--ease)}
  .dsheet{position:relative;width:100%;max-width:560px;max-height:86vh;overflow:auto;background:var(--card);border-radius:26px;padding:34px 36px 30px;box-shadow:var(--shadow-lg);animation:dsRise .26s var(--ease)}
  .dsheet-x{position:absolute;z-index:5;top:20px;right:20px;width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;transition:color .18s,border-color .18s}
  .dsheet-x:hover{color:var(--ink);border-color:var(--ink-2)}
  .dsheet-x svg{width:13px;height:13px}
  .dsheet-h{font-family:var(--font-display);font-size:27px;font-weight:600;letter-spacing:-.028em;line-height:1.1;margin:12px 0 0;color:var(--ink);max-width:24ch}
  .dsheet-lede{margin:12px 0 0;font-size:15.5px;line-height:1.6;color:var(--muted);text-wrap:pretty;max-width:52ch}
  .dsteps{list-style:none;margin:26px 0 0;padding:0}
  .dstep{display:flex;gap:16px;padding:17px 0;border-top:1px solid var(--line-2)}
  .dstep b{flex:none;font:500 10.5px var(--font-mono);letter-spacing:.14em;color:var(--green-ink);padding-top:3px}
  .dstep em{display:block;font-style:normal;font-size:15px;font-weight:560;letter-spacing:-.014em;color:var(--ink)}
  .dstep span{display:block;margin-top:5px;font-size:14px;line-height:1.55;color:var(--muted)}
  .dsheet-note{margin:18px 0 0;padding-top:18px;border-top:1px solid var(--line-2);font:500 10.5px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
  @keyframes dsFade{from{opacity:0}to{opacity:1}}
  @keyframes dsRise{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){.dsheet,.dsheet-back{animation:none}}
  .vsx-cta{display:flex;justify-content:center;align-items:center;margin-top:28px}
  .bn2-btn{display:inline-flex;align-items:center;gap:9px;border-radius:100px;font-family:var(--font-sans);white-space:nowrap;transition:border-color .18s,color .18s,background .18s,transform .18s,box-shadow .25s}
  .bn2-btn.ghost{height:32px;padding:0 16px;font-size:13.5px;font-weight:500;border:1px solid var(--line);background:transparent;color:var(--ink)}
  .bn2-btn.ghost:hover{border-color:transparent;color:var(--ink);background:rgba(255,255,255,.62);transform:translateY(-1px);box-shadow:0 1px 2px rgba(20,24,12,.04),0 12px 32px rgba(20,24,12,.07)}
  html[data-theme="dark"] .bn2-btn.ghost:hover{background:rgba(255,255,255,.08);box-shadow:none}
  /* feature manifest — sits with the "available to all students" note, not with the tray:
     what every student gets, in prose, before the tray says what desk does with it */
  /* the availability note returns under the sign: dash, then the mono note */
  .avail2{display:flex;flex-direction:column;align-items:center;gap:26px;margin:-77px 0 0}
  .avail2 i{width:16px;height:1px;background:var(--green)}
  .avail2 span{font:500 10px var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
  .avail2 em{font-style:normal;color:var(--green-ink)}
  .whatis{display:flex;flex-direction:column;align-items:center;gap:18px;margin:-119px 0 69px;text-align:center;position:relative;z-index:1}
  .band-dash{display:block;width:30px;height:1px;background:var(--line);margin:-18px auto 30px}
  .whatis-k{display:inline-block;font:600 11px var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
  .whatis h2{font-size:clamp(30px,3.6vw,42px);letter-spacing:-.028em;line-height:1.06;max-width:22ch;margin:0}
  .whatis h2 .g{color:var(--green)}
  .whatis p{margin:2px 0 0;max-width:56ch;font-size:16.5px;line-height:1.62;letter-spacing:-.014em;color:var(--muted);text-wrap:pretty}
  .whatis p b{font-weight:560;color:var(--ink-2)}
  .avail2-line{margin:-6px 0 0;max-width:54ch;text-align:center;font-size:15.5px;line-height:1.6;letter-spacing:-.012em;color:var(--muted);text-wrap:pretty}
  /* the two-promise spread: statement left, the three doors right in tray furniture,
     "and it learns with you" starting inside the first band and hanging over the tray */
  .fsum{position:relative;margin:98px 0 42px}
  /* the page's dot paper reaches into the section's own empty ground: strongest in the band
     between the two trays, a touch lighter in the space left of the structure tray */
  .fsum::before,.fsum::after{content:"";position:absolute;z-index:0;pointer-events:none;
    background-image:radial-gradient(currentColor 1.05px,transparent 1.4px);background-size:18px 18px}
  .fsum::before{left:136px;top:96px;width:min(34%,330px);bottom:150px;color:rgba(26,26,26,.07);
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 22% 78%,transparent),linear-gradient(90deg,#000 62%,transparent);
    mask-image:linear-gradient(180deg,transparent,#000 22% 78%,transparent),linear-gradient(90deg,#000 62%,transparent);
    -webkit-mask-composite:source-in;mask-composite:intersect}
  .fsum::after{left:136px;right:0;bottom:-46px;height:150px;color:rgba(26,26,26,.062);
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 46%,#000 82%,transparent),linear-gradient(90deg,rgba(0,0,0,.42) 0,rgba(0,0,0,.62) 34%,#000 72%);
    mask-image:linear-gradient(180deg,transparent,#000 46%,#000 82%,transparent),linear-gradient(90deg,rgba(0,0,0,.42) 0,rgba(0,0,0,.62) 34%,#000 72%);
    -webkit-mask-composite:source-in;mask-composite:intersect}
  .fsum-grid,.fsum-p2{position:relative;z-index:1}
  .fsum+.bnf{margin-top:14px}
  html[data-theme="dark"] .fsum::before{color:rgba(255,255,255,.085)}
  html[data-theme="dark"] .fsum::after{color:rgba(255,255,255,.1)}
  /* the section's gutter dots stop short of the spread, whose own dot field takes over — no doubled dots */
  .value-tray.paper::before,.value-tray.paper::after{width:calc((100% - var(--maxw)) / 2 + 66px)}
  .value-tray.paper::after{background-position:100% 0}
  @media (max-width:1080px){.fsum::before,.fsum::after{display:none}}
  .fsum-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:58px;align-items:stretch}
  .fsum-left{display:flex;flex-direction:column;padding:14px 0 0 42px}
  .fsum-k{display:inline-block;font:600 11px var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
  .fsum-k i{display:none}
  .fsum-h{font-size:clamp(26px,2.4vw,31px);letter-spacing:-.028em;line-height:1.1;margin:14px 0 0;max-width:17ch;text-wrap:balance}
  .fsum-h .g{color:var(--green)}
  .fsum-lede{margin:12px 0 0;max-width:46ch;font-size:15px;line-height:1.6;letter-spacing:-.012em;color:var(--muted);text-wrap:pretty}
  .fsum-lede b{font-weight:540;color:var(--ink-2)}
  .fsum-p2{margin-top:auto;padding-top:59px}
  .fsum-p2-line{margin:14px 0 0;max-width:60ch;font-size:15px;line-height:1.6;letter-spacing:-.012em;color:var(--muted);text-wrap:pretty}
  .fsum-mtray{display:flex;flex-direction:column;gap:9px;padding:9px;margin-right:22px;align-self:start;border-radius:24px;background:rgba(255,255,255,.62)}
  html[data-theme="dark"] .fsum-mtray{background:rgba(255,255,255,.05)}
  .fmt{display:block;border:0;text-align:left;cursor:pointer;background:var(--card);border-radius:14px;padding:14px 16px;box-shadow:0 1px 2px rgba(20,24,12,.03),0 8px 22px rgba(20,24,12,.05);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
  .fmt:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(20,24,12,.04),0 14px 30px rgba(20,24,12,.09)}
  .fmt-k{display:block;font:500 9px var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--green-ink)}
  .fmt-h{font-family:var(--font-display);font-size:15.5px;font-weight:600;letter-spacing:-.022em;margin:8px 0 0;color:var(--ink)}
  .fmt-h .g{color:var(--green)}
  .fmt-p{margin:5px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}
  @media (max-width:860px){.fsum-grid{grid-template-columns:1fr;gap:30px}.fsum-left{padding-left:0}.fsum-p2{padding-top:44px}.fsum-mtray{margin-right:0}}
  /* a quiet aside, not a second CTA: no fill, no green rule — it only firms up on hover */
  .fsum-how{display:inline-flex;align-items:center;gap:6px;margin-top:34px;border:0;background:none;padding:0 0 3px;color:var(--muted);font:500 13.5px var(--font-sans);letter-spacing:-.008em;cursor:pointer;border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
  .fsum-how:hover{color:var(--ink-2);border-bottom-color:var(--line)}
  .fsum-how svg{width:12px;height:12px;color:var(--muted-2);transition:transform .22s var(--ease),color .18s}
  .fsum-how:hover svg{color:var(--green-ink);transform:translateX(2px)}
  /* ===== "a better starting point": what each system opens on ===== */
  .dsheet-start{max-width:900px;padding:44px 44px 38px}
  .dsheet-start .dsheet-h,.dsheet-work .dsheet-h{max-width:26ch}
  .dsheet-start .dsheet-lede,.dsheet-work .dsheet-lede{max-width:62ch}
  .trip{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
  .trip-c{position:relative}
  .trip-p{position:relative;height:296px;overflow:hidden;background:#fff;border:1px solid var(--line-2);border-radius:16px;box-shadow:0 1px 2px rgba(20,24,12,.04),0 10px 26px rgba(20,24,12,.06)}
  .trip-n{margin:12px 2px 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
  .trip-n b{font-weight:560;color:var(--ink-2)}
  .db{display:flex;flex-direction:column;height:100%;padding:13px 13px 0;background:#fff}
  .db-top{display:flex;align-items:baseline;justify-content:space-between;padding-bottom:11px;border-bottom:1px solid #F1F1ED}
  .db-top b{font:600 12px var(--font-sans);color:#22221f}
  .db-top i{font:500 8.5px var(--font-mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:#B4B4AC}
  .db-k{margin:12px 0 6px;font:500 8.5px var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:#B4B4AC}
  .db-due{position:relative;padding:9px 10px 10px 12px;border:1px solid #F0E4CB;border-radius:10px;background:#FFFCF5}
  .db-due::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:3px;background:#F0A81E}
  .db-due b{display:block;font:600 11px var(--font-sans);color:#22221f;line-height:1.3}
  .db-due span{display:block;margin-top:4px;font:500 9px var(--font-mono);letter-spacing:.06em;color:#A9A9A1}
  .db-task{display:flex;align-items:center;gap:8px;padding:6px 2px;font:500 10.5px var(--font-sans);color:#5D5D56}
  .db-task i{flex:none;width:12px;height:12px;border:1.4px solid #DCDCD5;border-radius:3.5px}
  .db-task.on i{border-color:#6EB704;background:#6EB704}
  .db-foot{margin-top:auto;padding:9px 0 12px;display:flex;gap:6px}
  .db-pill{padding:4px 9px;border-radius:100px;background:#EEF6DF;font:600 9px var(--font-mono);letter-spacing:.1em;color:#3F6903}
  .db-mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}
  .db-av{width:26px;height:26px;border-radius:50%;border:1px solid #E7E7E2;background:#FBFBF9}
  .db-ask{font:600 13px var(--font-sans);color:#22221f}
  .db-comp{display:flex;align-items:center;gap:8px;width:100%;margin-top:2px;padding:8px 10px;border:1px solid #E7E7E2;border-radius:12px}
  .db-comp span{flex:1;text-align:left;font:400 10.5px var(--font-sans);color:#C4C4BC}
  .db-comp .ic{width:13px;height:13px;color:#A9A9A1}
  .db-chips{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
  .db-chip{padding:4px 9px;border:1px solid #EDEDE8;border-radius:100px;font:500 9.5px var(--font-sans);color:#7A7A72}
  .db-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}
  .db-tile{display:flex;flex-direction:column;gap:6px;padding:9px 10px;border:1px solid #EFEFEC;border-radius:10px}
  .db-tile .ic{width:14px;height:14px;color:#A9A9A1}
  .db-tile span{font:500 9.5px var(--font-sans);color:#5D5D56;line-height:1.25}
  .db-more{margin:9px 0 12px;font:500 9px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:#B4B4AC}
  /* ===== "a better workspace": the room you work in ===== */
  .dsheet-work{max-width:920px;padding:44px 44px 38px}
  .duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:28px}
  .duo-p{position:relative;height:344px;overflow:hidden;background:#fff;border:1px solid var(--line-2);border-radius:16px;box-shadow:0 1px 2px rgba(20,24,12,.04),0 10px 26px rgba(20,24,12,.06)}
  .wsp{display:flex;flex-direction:column;height:100%;background:#fff}
  .wsp-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:13px 14px 11px;border-bottom:1px solid #F3F3EF}
  .wsp-top b{font:600 12px/1.3 var(--font-sans);color:#22221f;max-width:28ch}
  .wsp-due{flex:none;padding:3px 8px;border-radius:100px;background:#FFF4E0;font:600 8.5px var(--font-mono);letter-spacing:.08em;color:#B47A08;white-space:nowrap}
  .wsp-tabs{display:flex;gap:4px;padding:10px 14px;border-bottom:1px solid #F3F3EF;overflow:hidden}
  .wsp-tabs span{padding:5px 9px;border-radius:8px;font:500 10px var(--font-sans);color:#8A8A82;background:#F7F7F4;white-space:nowrap}
  .wsp-tabs span.on{background:#E8F5D2;color:#3F6903;font-weight:600}
  .wsp-b{flex:1;overflow:hidden;padding:12px 14px}
  .wsp-card{padding:10px 11px;border:1px solid #EFEFEC;border-radius:10px}
  .wsp-k{font:500 8.5px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:#B4B4AC}
  .wsp-card p{margin:6px 0 0;font:400 10.5px/1.5 var(--font-sans);color:#5D5D56}
  .wsp-list{display:flex;flex-direction:column;gap:6px;margin-top:11px}
  .wsp-list span{display:flex;align-items:center;gap:7px;font:500 10px var(--font-sans);color:#7A7A72}
  .wsp-list .ic{width:12px;height:12px;color:#A9A9A1}
  .cbx{display:flex;flex-direction:column;height:100%;background:#fff}
  .cbx-top{display:flex;align-items:center;justify-content:space-between;padding:13px 14px 11px;border-bottom:1px solid #F3F3EF}
  .cbx-top b{font:600 12px var(--font-sans);color:#22221f}
  .cbx-top .ic{width:15px;height:15px;color:#B4B4AC}
  .cbx-b{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;overflow:hidden;padding:12px 14px 0}
  .cbx-u{align-self:flex-end;max-width:84%;padding:7px 10px;border-radius:13px 13px 4px 13px;background:#F1F1ED;font:400 10.5px/1.45 var(--font-sans);color:#22221f}
  .cbx-a{display:flex;gap:7px}
  .cbx-a i{flex:none;width:16px;height:16px;border-radius:50%;border:1px solid #E7E7E2;background:#FBFBF9}
  .cbx-a p{margin:0;font:400 10.5px/1.5 var(--font-sans);color:#3d3d3b}
  .cbx-comp{display:flex;align-items:center;gap:8px;margin:10px 14px 0;padding:8px 10px;border:1px solid #E7E7E2;border-radius:13px}
  .cbx-comp span{flex:1;font:400 10.5px var(--font-sans);color:#C4C4BC}
  .cbx-comp .ic{width:13px;height:13px;color:#A9A9A1}
  .cbx-foot{padding:8px 14px 11px;font:500 8.5px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:#C4C4BC;text-align:center}
  .duo-n{margin:12px 2px 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
  .duo-n b{font-weight:560;color:var(--ink-2)}
  @media (max-width:940px){.dsheet-start,.dsheet-work{max-width:560px;padding:30px 28px 26px;max-height:86vh;overflow:auto}.trip,.duo{grid-template-columns:1fr;gap:16px}}
  /* how it's organised — 4a from the draft: three ways to arrange a degree, fanned like
     cards in a deck. Click a card or a switch row to deal it to the front. */
  .stext{position:relative;z-index:1}
  .sh-k{display:block;font:600 11px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--green-ink)}
  .sh-h{font-family:var(--font-display);font-weight:600;letter-spacing:-.03em;line-height:1.08;margin:12px 0 0}
  .sh-h .g{color:var(--green)}
  .sh-l{font-size:15.5px;line-height:1.6;color:var(--muted);text-wrap:pretty}
  .sh-l b{font-weight:560;color:var(--ink-2)}
  .note{padding-top:15px;border-top:1px solid var(--line-2);font:500 10px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
  /* the alternative panel: an endless menu, generic */
  .altui{display:flex;flex-direction:column;height:100%;padding:16px 14px 0;background:#fff}
  .altui-top{display:flex;align-items:center;justify-content:space-between;padding:0 4px 13px;border-bottom:1px solid #EFEFEC}
  .altui-top b{font:600 13px var(--font-sans);color:#2b2b28}
  .altui-top i{width:22px;height:22px;border:1px solid #E7E7E2;border-radius:6px}
  .altui-k{margin:13px 4px 5px;font:500 8.5px var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:#B4B4AC}
  .altui-l{display:flex;flex-direction:column;gap:1px;flex:1;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 0 74%,transparent 100%);mask-image:linear-gradient(180deg,#000 0 74%,transparent 100%)}
  .altui-r{display:flex;align-items:center;gap:9px;padding:6px;border-radius:8px;font:500 11.5px var(--font-sans);color:#7A7A72}
  .altui-r i{flex:none;width:12px;height:12px;border:1.2px solid #DCDCD5;border-radius:3px}
  .altui-r.on{background:#F3F3EF;color:#2b2b28}
  .altui-more{margin:0;padding:4px 6px 14px;font:500 9px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:#B4B4AC}
  /* ---- 4a: three mock-ups fanned like cards in a deck; the switch deals one to the top ---- */
  .dsheet-org{max-width:720px;padding:42px 292px 38px 44px;overflow:visible}
  .dsheet-org .sh-h{font-size:27px;max-width:19ch}
  .dsheet-org .sh-l{margin:12px 0 0;max-width:38ch;min-height:104px}
  /* the switch: a stack of labelled rows, active one marked with a green rule */
  .switch{display:flex;flex-direction:column;margin:22px 0 0;border-top:1px solid var(--line-2)}
  .switch button{position:relative;display:flex;align-items:baseline;gap:10px;padding:11px 2px 11px 14px;border:0;border-bottom:1px solid var(--line-2);background:none;text-align:left;cursor:pointer;color:var(--muted);transition:color .18s}
  .switch button::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:2px;border-radius:2px;background:transparent;transition:background .18s}
  .switch button:hover{color:var(--ink-2)}
  .switch b{font:600 11px var(--font-mono);letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}
  .switch span{font-size:12.5px;letter-spacing:-.01em;color:var(--muted-2)}
  .switch button[data-on="true"]{color:var(--ink)}
  .switch button[data-on="true"]::before{background:var(--green)}
  .switch button[data-view="tools"][data-on="true"]::before,.switch button[data-view="chat"][data-on="true"]::before{background:#FA5252}
  .switch button[data-on="true"] span{color:var(--muted)}
  /* the deck */
  .stack{position:absolute;right:-22px;bottom:-44px;width:278px;height:492px}
  .pan{position:absolute;inset:0;cursor:pointer;background:#fff;border:1px solid var(--line-2);border-radius:22px;box-shadow:0 8px 20px rgba(20,24,12,.09),0 34px 84px rgba(20,24,12,.16);transform-origin:50% 108%;transition:transform .42s var(--ease),opacity .3s var(--ease)}
  .pan > .altui,.pan > .chatui,.pan > .dm{overflow:hidden;border-radius:21px}
  .pan img{display:block;width:100%;height:100%;border-radius:21px}
  .pan-tag{position:absolute;z-index:5;top:-9px;right:18px;padding:3px 9px 4px;border-radius:7px;box-shadow:0 1px 3px rgba(20,24,12,.12);font:600 8.5px var(--font-mono);letter-spacing:.16em;text-transform:uppercase}
  .pan-tag-best{background:var(--green-tint);color:var(--green-deep)}
  .pan-tag-meh{background:#FDECEC;color:#D9614F}
  .pan-tag-poor{background:#F6D9D6;color:#A62D1C}
  .dsheet-org[data-view="desk"] .pan-chat,.dsheet-org[data-view="chat"] .pan-tools,.dsheet-org[data-view="tools"] .pan-desk{z-index:2;opacity:.94;transform:rotate(5.2deg)}
  .dsheet-org[data-view="desk"] .pan-tools,.dsheet-org[data-view="chat"] .pan-desk,.dsheet-org[data-view="tools"] .pan-chat{z-index:1;opacity:.86;transform:rotate(10.6deg)}
  .dsheet-org[data-view="desk"] .pan-desk,.dsheet-org[data-view="tools"] .pan-tools,.dsheet-org[data-view="chat"] .pan-chat{z-index:3;opacity:1;transform:rotate(-1.4deg);cursor:default}
  .dsheet-org[data-view="desk"] .pan-desk:hover,.dsheet-org[data-view="tools"] .pan-tools:hover,.dsheet-org[data-view="chat"] .pan-chat:hover{transform:rotate(-1.4deg) translateY(-7px);box-shadow:0 12px 26px rgba(20,24,12,.11),0 44px 100px rgba(20,24,12,.2)}
  /* a card behind lifts a little when you point at it, so it reads as dealable */
  .dsheet-org[data-view="desk"] .pan-chat:hover,.dsheet-org[data-view="chat"] .pan-tools:hover,.dsheet-org[data-view="tools"] .pan-desk:hover{opacity:1;transform:rotate(4deg) translateY(-6px)}
  .dsheet-org[data-view="desk"] .pan-tools:hover,.dsheet-org[data-view="chat"] .pan-desk:hover,.dsheet-org[data-view="tools"] .pan-chat:hover{opacity:.96;transform:rotate(9deg) translateY(-6px)}
  /* tool-menu mock */
  .altui-top .ic{width:19px;height:19px;color:#9C9C94}
  .altui-r .ic{flex:none;width:14px;height:14px;color:#A9A9A1}
  .altui-r.on .ic{color:#5D5D56}
  /* chat-history mock */
  .chatui{display:flex;flex-direction:column;height:100%;padding:16px 14px 0;background:#fff}
  .altui-new{margin-top:12px;color:#2b2b28}
  .altui-new .ic{color:#7A7A72}
  .chatui-l{display:flex;flex-direction:column;flex:1;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 0 74%,transparent 100%);mask-image:linear-gradient(180deg,#000 0 74%,transparent 100%)}
  .chatui-k{margin:14px 4px 4px;font:500 8.5px var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:#B4B4AC}
  .chatui-r{display:flex;align-items:center;gap:8px;padding:6px;border-radius:8px;font:500 11.5px var(--font-sans);color:#7A7A72;white-space:nowrap;overflow:hidden}
  .chatui-r em{font-style:normal;overflow:hidden;text-overflow:ellipsis}
  .chatui-r.on{background:#F3F3EF;color:#2b2b28}
  /* pinned chats: kept, but plainly out of date */
  .chatui-pin{color:#B4B4AC}
  .chatui-pin .ic{flex:none;width:12px;height:12px;color:#C9C9C1}
  .chatui-pin i{margin-left:auto;font:500 8px var(--font-mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:#C9C9C1;white-space:nowrap}
  /* desk's list drawn in the same mock style as the other two cards */
  .dm{display:flex;flex-direction:column;height:100%;padding:16px 14px 0;background:#fff}
  .dm-l{display:flex;flex-direction:column;flex:1;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 0 82%,transparent 100%);mask-image:linear-gradient(180deg,#000 0 82%,transparent 100%)}
  .dm-k{margin:14px 2px 8px;font:600 11px var(--font-sans);color:#9C9C94}
  .dm-k em{font-style:normal;color:#C4C4BC}
  .dm-r{position:relative;padding:2px 0 12px 12px;margin-bottom:8px}
  .dm-r::before{content:"";position:absolute;left:0;top:2px;bottom:8px;width:3px;border-radius:3px;background:var(--c)}
  .dm-s{display:flex;align-items:center;gap:5px;font:500 10px var(--font-sans);color:#9C9C94}
  .dm-s i{width:9px;height:9px;border-radius:2.5px;background:var(--c)}
  .dm-t{display:block;margin:3px 0 0;font:600 11.5px var(--font-sans);line-height:1.3;color:#22221f}
  .dm-m{display:flex;align-items:center;gap:8px;margin-top:6px;font:500 9px var(--font-mono);letter-spacing:.06em;color:#A9A9A1}
  .dm-bar{flex:1;height:4px;border-radius:4px;background:#F0F0EC;overflow:hidden}
  .dm-bar b{display:block;height:100%;border-radius:4px;background:var(--c)}
  .dm-m em{font-style:normal;color:#FA5252;font-family:var(--font-sans);font-size:10px}
  .dm-add{margin-left:auto;padding:2px 8px;border:1px solid #DBE2FB;border-radius:100px;font:600 9px var(--font-sans);color:#5C7CFA}
  .soloshot{width:380px;height:660px;overflow:hidden;background:#fff;border:1px solid var(--line-2);border-radius:24px;box-shadow:0 8px 20px rgba(20,24,12,.09),0 34px 84px rgba(20,24,12,.16)}
  .soloshot .ui-b{padding:16px 18px 0}
  .soloshot .cb-u,.soloshot .cb-a p,.soloshot .cb-a li{font-size:12.5px}
  .soloshot .ui-top b{font-size:14px}
  .soloshot .cb-comp{margin:12px 18px 0;padding:10px 12px}
  .soloshot .cb-comp span{font-size:12.5px}
  /* ===== turn 5: the second main card, whose body is the interface itself ===== */
  .v-f{max-width:860px;padding:24px}
  .mn-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding:14px 12px 20px}
  .mn-head .sh-h{font-size:24px;max-width:22ch;margin-top:9px}
  .segh{display:inline-flex;gap:3px;flex:none;padding:3px;border:1px solid var(--line);border-radius:100px;background:#FBFBF9}
  .segh button{border:0;border-radius:100px;padding:7px 13px;background:transparent;color:var(--muted);font:500 10px var(--font-mono);letter-spacing:.13em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:background .18s,color .18s}
  .segh button:hover{color:var(--ink-2)}
  .segh button[data-on="true"]{background:var(--green-tint);color:var(--green-deep)}
  .segh button[data-view2="tool"][data-on="true"],.segh button[data-view2="chat"][data-on="true"]{background:#FDECEC;color:#C0392B}
  .app{display:none;grid-template-columns:212px 1fr;height:432px;overflow:hidden;background:#fff;border:1px solid var(--line-2);border-radius:16px;box-shadow:0 1px 2px rgba(20,24,12,.04),0 10px 26px rgba(20,24,12,.06)}
  .v-f[data-view2="space"] .app-space,.v-f[data-view2="tool"] .app-tool,.v-f[data-view2="chat"] .app-chat{display:grid}
  .app-rail{height:100%;border-right:1px solid #EFEFEC;padding-top:0}
  .app-main{display:flex;flex-direction:column;overflow:hidden}
  .mn-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:14px 16px 12px;border-bottom:1px solid #F3F3EF}
  .mn-k{display:block;font:500 8.5px var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:#B4B4AC}
  .mn-top b{display:block;margin-top:4px;font:600 13px/1.3 var(--font-sans);color:#22221f;max-width:34ch}
  .mn-tabs{display:flex;gap:4px;padding:10px 16px;border-bottom:1px solid #F3F3EF}
  .mn-tabs span{padding:5px 10px;border-radius:8px;font:500 10.5px var(--font-sans);color:#8A8A82;background:#F7F7F4;white-space:nowrap}
  .mn-tabs span.on{background:#E8F5D2;color:#3F6903;font-weight:600}
  .mn-b{flex:1;display:grid;grid-template-columns:1.15fr .85fr;gap:0;overflow:hidden}
  .mn-b-1{display:flex;flex-direction:column;grid-template-columns:none}
  .mn-col{padding:14px 16px;overflow:hidden;display:flex;flex-direction:column;gap:10px}
  .mn-side{border-left:1px solid #F3F3EF;background:#FCFCFA;justify-content:space-between}
  .mn-ask{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid #E7E7E2;border-radius:12px;background:#fff}
  .mn-ask span{flex:1;font:400 10.5px var(--font-sans);color:#C4C4BC}
  .tl-row{display:flex;align-items:flex-start;gap:12px;margin-top:2px}
  .tl-row .tl-go{margin-top:0;flex:none;padding:9px 18px}
  .tl-row .tl-note{margin-top:0}
  .app-chat .ui-b{padding:12px 16px 0}
  .app-chat .cb-comp{margin:10px 16px 0}
  /* ===== old turn-5 deck styles (kept for reference) ===== what you land in — study space / single tool / chat thread ===== */
  .v-e{max-width:760px;padding:42px 320px 38px 44px}
  .v-e .sh-h{font-size:27px;max-width:19ch}
  .v-e .sh-l{margin:12px 0 0;max-width:38ch}
  .stack2{position:absolute;right:-24px;bottom:-46px;width:300px;height:531px}
  .v-e[data-view2="space"] .pan-space,.v-e[data-view2="tool"] .pan-tool,.v-e[data-view2="chat"] .pan-cb{z-index:3;opacity:1;transform:rotate(-1.4deg);cursor:default}
  .v-e[data-view2="space"] .pan-tool,.v-e[data-view2="tool"] .pan-cb,.v-e[data-view2="chat"] .pan-space{z-index:2;opacity:.94;transform:rotate(5.2deg)}
  .v-e[data-view2="space"] .pan-cb,.v-e[data-view2="tool"] .pan-space,.v-e[data-view2="chat"] .pan-tool{z-index:1;opacity:.86;transform:rotate(10.6deg)}
  .v-e[data-view2="space"] .pan-space:hover,.v-e[data-view2="tool"] .pan-tool:hover,.v-e[data-view2="chat"] .pan-cb:hover{transform:rotate(-1.4deg) translateY(-7px)}
  .v-e[data-view2="space"] .pan-tool:hover,.v-e[data-view2="tool"] .pan-cb:hover,.v-e[data-view2="chat"] .pan-space:hover{opacity:1;transform:rotate(4deg) translateY(-6px)}
  .v-e[data-view2="space"] .pan-cb:hover,.v-e[data-view2="tool"] .pan-space:hover,.v-e[data-view2="chat"] .pan-tool:hover{opacity:.96;transform:rotate(9deg) translateY(-6px)}
  .switch button[data-view2="tool"][data-on="true"]::before,.switch button[data-view2="chat"][data-on="true"]::before{background:#FA5252}
  /* shared chrome for the three interface mocks */
  .ui{display:flex;flex-direction:column;height:100%;background:#fff}
  .ui-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 14px 12px;border-bottom:1px solid #EFEFEC}
  .ui-top b{font:600 12.5px var(--font-sans);color:#22221f}
  .ui-top .ic{width:17px;height:17px;color:#9C9C94}
  .ui-b{flex:1;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding:12px 14px 0}
  .ui-foot{padding:8px 14px 12px;font:500 8.5px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:#C4C4BC;text-align:center}
  /* 1 — desk study space */
  .sp-h{display:flex;align-items:flex-start;gap:8px}
  .sp-h b{font:600 12.5px var(--font-sans);line-height:1.3;color:#22221f}
  .sp-due{flex:none;padding:3px 8px;border-radius:100px;background:#FFF4E0;font:600 8.5px var(--font-mono);letter-spacing:.08em;color:#B47A08;white-space:nowrap}
  .sp-tabs{display:flex;gap:4px;margin:12px -1px 0;overflow:hidden}
  .sp-tabs span{padding:5px 9px;border-radius:8px;font:500 10px var(--font-sans);color:#8A8A82;background:#F5F5F1;white-space:nowrap}
  .sp-tabs span.on{background:#E8F5D2;color:#3F6903;font-weight:600}
  .sp-card{margin-top:12px;padding:11px 12px;border:1px solid #EDEDE8;border-radius:11px}
  .sp-k{font:500 8.5px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:#B4B4AC}
  .sp-card p{margin:7px 0 0;font:400 10.5px/1.5 var(--font-sans);color:#5D5D56}
  .sp-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}
  .sp-list span{display:flex;align-items:center;gap:7px;font:500 10px var(--font-sans);color:#7A7A72}
  .sp-list .ic{width:12px;height:12px;color:#A9A9A1}
  .sp-bar{display:flex;align-items:center;gap:8px;margin-top:12px;font:500 8.5px var(--font-mono);letter-spacing:.08em;color:#A9A9A1}
  .sp-bar i{flex:1;height:5px;border-radius:5px;background:#F1F1ED;overflow:hidden}
  .sp-bar i b{display:block;height:100%;width:22%;border-radius:5px;background:#6EB704}
  /* 2 — one tool, no context */
  .tl-f{margin-top:10px}
  .tl-lab{font:500 8.5px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:#B4B4AC}
  .tl-in{margin-top:5px;padding:8px 10px;border:1px solid #EAEAE5;border-radius:9px;font:400 10.5px var(--font-sans);color:#C4C4BC}
  .tl-area{margin-top:5px;height:104px;padding:9px 10px;border:1px solid #EAEAE5;border-radius:9px;font:400 10.5px/1.5 var(--font-sans);color:#C4C4BC}
  .tl-go{margin-top:12px;padding:9px;border-radius:9px;background:#22221f;color:#fff;font:600 10.5px var(--font-sans);text-align:center}
  .tl-note{display:flex;gap:7px;margin-top:12px;padding:9px 10px;border:1px dashed #F0D6D6;border-radius:9px;font:400 9.5px/1.45 var(--font-sans);color:#C86A6A}
  /* 3 — chat thread */
  .cb-th{display:flex;flex-direction:column;justify-content:flex-end;min-height:100%;gap:12px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 100%);mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 100%)}
  .cb-u{align-self:flex-end;max-width:82%;padding:7px 11px;border-radius:14px 14px 4px 14px;background:#F1F1ED;font:400 10.5px/1.45 var(--font-sans);color:#22221f}
  .cb-a{display:flex;gap:8px}
  .cb-av{flex:none;width:17px;height:17px;border-radius:50%;border:1px solid #E7E7E2;background:#FBFBF9}
  .cb-a div{flex:1}
  .cb-a p{margin:0 0 6px;font:400 10.5px/1.5 var(--font-sans);color:#3d3d3b}
  .cb-a ul{margin:0 0 6px;padding-left:14px;list-style:disc}
  .cb-a li{font:400 10.5px/1.5 var(--font-sans);color:#5D5D56}
  .cb-a li b{font-weight:600;color:#22221f}
  .cb-tools{display:flex;gap:9px;margin-top:2px}
  .cb-tools .ic{width:12px;height:12px;color:#C4C4BC}
  .cb-typ{display:flex;gap:4px;padding:9px 0 2px}
  .cb-typ i{width:5px;height:5px;border-radius:50%;background:#D8D8D2;animation:cbDot 1.1s ease-in-out infinite}
  .cb-typ i:nth-child(2){animation-delay:.18s}
  .cb-typ i:nth-child(3){animation-delay:.36s}
  @keyframes cbDot{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
  .cb-comp{display:flex;align-items:center;gap:8px;margin:10px 14px 0;padding:8px 10px;border:1px solid #E7E7E2;border-radius:14px;box-shadow:0 1px 2px rgba(20,24,12,.03)}
  .cb-comp span{flex:1;font:400 10.5px var(--font-sans);color:#C4C4BC}
  .cb-comp .ic{width:14px;height:14px;color:#A9A9A1}
  .cb-send{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#22221f}
  .cb-send .ic{width:12px;height:12px;color:#fff}
  @media (prefers-reduced-motion:reduce){.cb-typ i{animation:none}}
  html[data-theme="dark"] .orgsw-x{}
  @media (max-width:940px),(max-height:640px){
    .dsheet-org{max-width:540px;padding:30px 30px 26px;max-height:86vh;overflow:auto}
    /* the deck flattens: the selected card sits in flow under the copy, the others drop out */
    .dsheet-org .stack{position:relative;right:auto;bottom:auto;width:100%;height:300px;margin:22px 0 0}
    .dsheet-org[data-view="desk"] .pan-desk,
    .dsheet-org[data-view="chat"] .pan-chat,
    .dsheet-org[data-view="tools"] .pan-tools{transform:none;opacity:1;cursor:default;box-shadow:0 1px 2px rgba(20,24,12,.04),0 10px 26px rgba(20,24,12,.07)}
    .dsheet-org[data-view="desk"] .pan-chat,.dsheet-org[data-view="desk"] .pan-tools,
    .dsheet-org[data-view="chat"] .pan-desk,.dsheet-org[data-view="chat"] .pan-tools,
    .dsheet-org[data-view="tools"] .pan-desk,.dsheet-org[data-view="tools"] .pan-chat{display:none}
    .dsheet-org .pan:hover{transform:none;opacity:1}
    .dsheet-org .pan-tag{top:-9px;right:18px}
  }

  @media (max-width:860px){.fsum-link{height:52px}.fsum-link b{display:none}.fsum-link::after{display:none}.fsum-link i{height:52px}}

  /* colophon — a second Desk. by Viaduct between pricing and the final ask */
  .colo{display:flex;flex-direction:column;align-items:center;gap:16px;padding:6px 0 0}
  .colo img{height:30px;width:auto;display:block}
  .colo img.colo-d{display:none}
  html[data-theme="dark"] .colo img.colo-l{display:none}
  html[data-theme="dark"] .colo img.colo-d{display:block}
  .colo-by{font:500 10px var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);line-height:1}
  .colo-dash{width:16px;height:1px;background:var(--green);margin:2px 0}
  .colo-avail{font:500 10px var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
  .colo-avail em{font-style:normal;color:var(--green-ink)}
  /* closing CTA — single ask, quiet mono trails */
  .cb-tlinks{position:relative;z-index:1;display:flex;gap:26px;justify-content:center;margin-top:30px}
  .cb-tlinks a{display:inline-flex;align-items:baseline;gap:6px;font:500 11px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.34);transition:color .2s var(--ease)}
  .cb-tlinks a:hover{color:rgba(255,255,255,.75)}
  .cb-tlinks a i{font-style:normal;color:rgba(143,210,19,.55);font-size:10px;transform:translateY(-.5px)}
  .cta-when{margin:44px 0 0;text-align:center;font:500 10.5px var(--font-mono);letter-spacing:.06em;color:var(--muted-2);line-height:1.5}
  .cta-mark{position:absolute;right:34px;bottom:28px;z-index:2;height:19px;width:auto;display:block;pointer-events:none}
  .cta-band .cta-markbox .cta-mark.cta-mark-l{right:auto;left:34px;left:2.99cqw;height:30px;height:2.64cqw}
  /* the band gets the faintest shadow on hover — the button inside it is still the
     only thing that really reacts. The reveal's own opacity/transform timings are
     restated here, since a transition declaration replaces them wholesale */
  .cta-band{padding-bottom:40px;cursor:pointer;transition:opacity .7s var(--ease),transform .7s var(--ease),translate .42s var(--ease),box-shadow .35s var(--ease)}
  .cta-band:hover{translate:0 -2px;box-shadow:0 26px 64px rgba(20,24,12,.22)}
  .cta-hit{position:absolute;inset:0;z-index:0;border-radius:inherit}
  .cta-band>div{pointer-events:none}
  .cta-band .btn-cta{pointer-events:auto}
  .cb-sign{position:absolute;right:30px;bottom:24px;z-index:1;display:flex;flex-direction:column;align-items:flex-end;gap:8px;opacity:.85}
  .cb-sign img{height:18px;width:auto;display:block}
  .cb-dash{width:16px;height:1px;background:var(--green);margin:1px 0}
  .cb-by,.cb-avail{font:500 9px var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.42);line-height:1;text-align:right}
  .cb-avail em{font-style:normal;color:var(--green)}
  .avail-big{margin:34px 0 0;text-align:center;font:500 10px var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
  .avail-big em{font-style:normal;color:var(--green-ink)}
  /* pricing paper: quieter, uneven — strength varies down the column, left fainter than right */
  #pricing{--paper-v:linear-gradient(180deg,transparent 0,rgba(0,0,0,.85) 16%,rgba(0,0,0,.3) 40%,rgba(0,0,0,.75) 58%,rgba(0,0,0,.22) 80%,transparent 100%)}
  #pricing.paper::before{color:rgba(26,26,26,.025)}
  #pricing.paper::after{color:rgba(26,26,26,.033)}
  html[data-theme="dark"] #pricing.paper::before{color:rgba(255,255,255,.025)}
  html[data-theme="dark"] #pricing.paper::after{color:rgba(255,255,255,.033)}
  /* pricing — ported 10a */
  #pricing .ink-plans{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:800px;margin:52px auto 0;align-items:stretch}
  #pricing .ink-basic{position:relative;border-radius:24px;padding:36px 34px 68px;background:rgba(255,255,255,.38);box-shadow:0 8px 22px rgba(20,24,12,.05);transition:background-color .45s var(--ease),box-shadow .45s var(--ease),transform .45s var(--ease)}
  #pricing .ink-basic:hover{background:rgba(255,255,255,.58);transform:translateY(-3px);box-shadow:0 12px 30px rgba(20,24,12,.08)}
  #pricing .ink-card{position:relative;background:var(--dark);border-radius:24px;padding:36px 34px 68px;box-shadow:0 18px 48px rgba(20,24,12,.12);transition:box-shadow .45s var(--ease),transform .45s var(--ease)}
  #pricing .ink-card:hover{transform:translateY(-3px);box-shadow:0 22px 54px rgba(20,24,12,.16)}
  #pricing .pc-brand{display:flex;align-items:flex-end;justify-content:flex-start;gap:12px}
  #pricing .pc-brand img{height:18px;display:block}
  #pricing .pc-tier{font:600 10.5px var(--font-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--muted-2);line-height:1;transform:translateY(-1.5px)}
  #pricing .ink-card .pc-tier{color:rgba(255,255,255,.4)}
  #pricing .pc-pop{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:600 9px var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--green)}
  #pricing .pc-pop i{width:5px;height:5px;border-radius:50%;background:var(--green)}
  #pricing .ik-price{margin-top:24px;display:flex;align-items:baseline;gap:10px}
  #pricing .ik-amt{font-family:var(--font-display);font-size:44px;font-weight:600;letter-spacing:-.028em;line-height:1;color:var(--ink)}
  #pricing .ink-card .ik-amt{color:#fff}
  #pricing .cur{color:var(--green-deep)}
  #pricing .ink-card .cur{color:var(--green)}
  #pricing .ik-per{font:500 14px var(--font-sans);color:var(--muted)}
  #pricing .ink-card .ik-per{color:rgba(255,255,255,.5)}
  #pricing .ik-line{margin:12px 0 0;font-size:13px;color:var(--muted)}
  #pricing .ink-card .ik-line{color:rgba(255,255,255,.52)}
  #pricing .fl{margin:26px 0 0;padding:14px 0 0;border-top:1px solid var(--line);list-style:none}
  #pricing .ink-card .fl{border-top:1px solid rgba(255,255,255,.14)}
  #pricing .fl li{padding:6px 0;font-size:13.5px;letter-spacing:-.01em;color:var(--ink-2)}
  #pricing .fl li span{color:var(--muted-2)}
  #pricing .fl li:first-child span{color:var(--green-ink)}
  #pricing .fl li.dim{color:var(--muted-2)}
  #pricing .ink-card .fl li{color:rgba(255,255,255,.9)}
  #pricing .ink-card .fl li span{color:rgba(255,255,255,.45)}
  #pricing .ink-card .fl li:first-child span{color:var(--green)}
  #pricing .corner-cta{position:absolute;right:22px;bottom:22px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:transparent;border:1px solid rgba(26,26,26,.25);color:var(--ink-2);font-size:14px;font-style:normal;cursor:pointer;transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
  #pricing .corner-cta:hover{border-color:var(--green);color:var(--green-deep);background:var(--green-tint)}
  #pricing .ink-card .corner-cta{border-color:rgba(255,255,255,.32);color:rgba(255,255,255,.85)}
  #pricing .ink-card .corner-cta:hover{border-color:var(--green);color:var(--green);background:rgba(110,183,4,.12)}
  /* the allowance, stated inside the card it belongs to */
  /* a pencilled note centred under the gap, with a caret pointing up into it */
  #pricing .soon{display:flex;flex-direction:column;align-items:center;gap:1px;max-width:800px;margin:22px auto 0;font:600 20px/1.15 "Caveat",cursive;letter-spacing:.01em;color:rgba(26,26,26,.56);text-align:center}
  #pricing .soon span{font:600 27px/0.55 "Caveat",cursive;color:rgba(26,26,26,.4)}
  #pricing .soon b{font-weight:600;white-space:nowrap}
  #pricing .soon em{font-style:normal;color:var(--green)}
  html[data-theme="dark"] #pricing .soon{color:rgba(255,255,255,.6)}
  html[data-theme="dark"] #pricing .soon span{color:rgba(255,255,255,.4)}
  /* pencilled note over the Basic card: caret first, pointing up into it, so the clearance is
     real space in normal flow rather than an offset resolved against the note's own height */
  #pricing .bnote{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:calc(50% - 20px);margin:0 auto 10px 0;text-align:left}
  #pricing .bnote span{order:1;font:600 27px/1.1 "Caveat",cursive;color:rgba(26,26,26,.4);transform:translate(30px,-8px) rotate(6deg) scaleY(-1)}
  #pricing .bnote b{font:600 20px/1.15 "Caveat",cursive;letter-spacing:.01em;font-weight:600;color:rgba(26,26,26,.56)}
  #pricing .bnote em{font-style:normal;color:var(--green)}
  html[data-theme="dark"] #pricing .bnote b{color:rgba(255,255,255,.6)}
  html[data-theme="dark"] #pricing .bnote span{color:rgba(255,255,255,.4)}
  #pricing .bnote b{transform:translate(95px,40px) rotate(-16deg)}
  #pricing .bnote span{transform:translate(153px,41px) rotate(-21deg) scaleY(-1)}
  @media (max-width:620px){#pricing .bnote{display:none}}
  /* the allowance: one lane per card, on the same columns */
  #pricing .alw{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:800px;margin:26px auto 0;align-items:start}
  #pricing .alw-col{padding:0 34px}
  #pricing .alw-k{display:block;font:500 10px var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
  #pricing .alw-bar{display:block;margin-top:11px;height:6px;border-radius:4px;background:rgba(20,24,12,.08);overflow:hidden}
  #pricing .alw-bar i{display:block;height:100%;border-radius:4px;background:var(--green)}
  #pricing .alw-col.basic .alw-bar i{background:var(--muted-2)}
  #pricing .alw-col em{display:block;margin-top:10px;font:500 12px var(--font-mono);font-style:normal;letter-spacing:.05em;color:var(--muted)}
  #pricing .alw-col.basic em{color:var(--muted-2)}
  html[data-theme="dark"] #pricing .alw-bar{background:rgba(255,255,255,.1)}
  @media (max-width:900px){#pricing .alw{grid-template-columns:1fr;gap:26px;max-width:460px}}
  /* caps in the air, between the plans and the final ask */
  #pricing .caps{width:min(830px,100%);margin:40px auto 0;color:rgba(26,26,26,.15);pointer-events:none}
  #pricing .caps svg{display:block;width:100%;height:auto}
  #pricing .caps .sd{fill:var(--bg)}
  #pricing .caps .gb{fill:var(--green);stroke:var(--green)}
  #pricing .caps .gb-s{stroke:var(--green);fill:none}
  #pricing .caps .tr{stroke-dasharray:2 8;opacity:.55}
  html[data-theme="dark"] #pricing .caps{color:rgba(255,255,255,.13)}

  #pricing .sqs-k{display:block;font:500 10px var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
  #pricing .tb-row{display:grid;grid-template-columns:88px 1fr;gap:18px;align-items:center;margin-top:16px}
  #pricing .tb-row>b{font-size:12.5px;font-weight:600;color:var(--ink)}
  #pricing .tb-line{display:flex;align-items:center;gap:12px}
  #pricing .tb-line i{display:block;height:12px;background:var(--green-tint);background-image:repeating-linear-gradient(90deg,transparent 0 11px,rgba(110,183,4,.45) 11px 12px);border-right:2px solid var(--green)}
  #pricing .tb-row.basic .tb-line i{background:#EAEAE5;background-image:repeating-linear-gradient(90deg,transparent 0 11px,rgba(139,168,86,.34) 11px 12px);border-right:2px solid #B9B9AF}
  #pricing .tb-line em{font-style:normal;font:500 10px var(--font-mono);letter-spacing:.03em;color:var(--muted);white-space:nowrap}
  #pricing .tb-line em b{color:var(--green-ink)}
  #pricing .tb-row.basic .tb-line em b{color:var(--muted-2)}
  html[data-theme="dark"] #pricing .ink-basic{background:rgba(255,255,255,.04)}
  html[data-theme="dark"] #pricing .ink-basic .pc-brand img{content:url("assets/desk-wordmark-reversed.png")}
  html[data-theme="dark"] #pricing .ink-basic:hover{background:rgba(255,255,255,.07)}
  html[data-theme="dark"] #pricing .ink-card{border:1px solid rgba(255,255,255,.09)}
  html[data-theme="dark"] #pricing .corner-cta{border-color:rgba(255,255,255,.25);color:rgba(255,255,255,.8)}
  html[data-theme="dark"] #pricing .tb-row.basic .tb-line i{background:rgba(255,255,255,.09);background-image:repeating-linear-gradient(90deg,transparent 0 11px,rgba(255,255,255,.14) 11px 12px);border-right-color:rgba(255,255,255,.3)}
  @media (max-width:900px){#pricing .ink-plans{grid-template-columns:1fr;gap:32px;max-width:460px}}

  /* ===== how it works: rail + live setup take (ported from layouts 1a) ===== */
  .hwA-url{transition:opacity .18s ease}
  .hwA-url.sw{opacity:0}
  .hwA-win{margin:0}
  .hwA-win .url{display:inline-flex;align-items:center;gap:6px}
  .fld label{display:block;font:600 10px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:7px}
  .fld-v{display:flex;align-items:center;min-height:21px;font-size:15px;font-weight:500;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 13px}
  .car{width:2px;height:17px;background:var(--green);margin-left:2px;opacity:0}
  .car.on{opacity:1;animation:blink 1s steps(1) infinite}
  @keyframes blink{50%{opacity:0}}
  .gbtn{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font:600 14px var(--font-sans);letter-spacing:-.008em;color:var(--on-green);background:linear-gradient(180deg,#7CC414,var(--green));border-radius:12px;padding:11px 20px 11px 22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,49,45,.12),0 1px 2px rgba(20,24,12,.1),0 7px 18px rgba(110,183,4,.26);transition:transform .16s cubic-bezier(.34,1.4,.5,1),box-shadow .2s ease,filter .2s ease}
  .gbtn svg{width:14px;height:14px;transition:transform .2s cubic-bezier(.34,1.4,.5,1)}
  .gbtn.press{transform:translateY(1px) scale(.965);filter:brightness(.96);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,49,45,.12),0 1px 2px rgba(20,24,12,.08),0 3px 9px rgba(110,183,4,.22),0 0 0 4px rgba(110,183,4,.16)}
  .gbtn.press svg{transform:translateX(2.5px)}
  .st{opacity:0;transform:translateY(8px);transition:opacity .42s cubic-bezier(.22,1,.36,1),transform .42s cubic-bezier(.22,1,.36,1)}
  .st.in{opacity:1;transform:none}

  /* ============ A ============ */
  .hwA{display:grid;grid-template-columns:210px 1fr;gap:38px;margin-top:52px;align-items:start;cursor:pointer}
  .hwA-rail{display:flex;flex-direction:column;gap:2px;padding-top:6px}
  .hwA-r{position:relative;display:grid;grid-template-columns:26px 1fr;gap:12px;padding:13px 0 15px}
  .hwA-r::before{content:"";position:absolute;left:12.5px;top:34px;bottom:-2px;width:1.5px;border-radius:2px;background:var(--line);background-image:linear-gradient(var(--green),var(--green));background-repeat:no-repeat;background-size:100% 0%;transition:background-size .5s cubic-bezier(.22,1,.36,1)}
  .hwA-r.done::before{background-size:100% 100%}
  .hwA-r:last-child::before{display:none}
  .hwA-n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:600 10.5px var(--font-mono);color:var(--muted-2);background:var(--bg);border:1px solid var(--line);transition:background .3s ease,color .3s ease,border-color .3s ease,transform .3s cubic-bezier(.34,1.4,.5,1)}
  .hwA-n{position:relative}
  .hwA-n u{text-decoration:none;transition:opacity .22s ease,transform .26s ease}
  .hwA-n svg{position:absolute;width:12px;height:12px;opacity:0;transform:scale(.4);transition:opacity .22s ease .06s,transform .3s cubic-bezier(.34,1.5,.5,1) .06s}
  .hwA-r.done .hwA-n u{opacity:0;transform:scale(.5)}
  .hwA-r.done .hwA-n svg{opacity:1;transform:none}
  .hwA-r.on .hwA-n{background:var(--green);border-color:var(--green);color:var(--on-green);transform:scale(1.08)}
  .hwA-r.done .hwA-n{background:var(--green-tint);border-color:var(--green-tint-2);color:var(--green-deep);transform:none}
  .hwA-t b{display:block;font:600 14px var(--font-sans);letter-spacing:-.012em;color:var(--muted-2);transition:color .3s ease}
  .hwA-r.on .hwA-t b,.hwA-r.done .hwA-t b{color:var(--ink)}
  .hwA-t span{display:block;margin-top:4px;font-size:12.5px;line-height:1.5;color:var(--muted-2);opacity:0;max-height:0;overflow:hidden;transition:opacity .35s ease,max-height .35s ease}
  .hwA-r.on .hwA-t span{opacity:1;max-height:60px}
  .hwA-body{position:relative;height:276px;transition:height .46s cubic-bezier(.22,1,.36,1)}
  .hwA-prog{position:absolute;left:0;right:0;top:0;height:2px;background:var(--line-2);z-index:2}
  .hwA-prog i{display:block;height:100%;width:0;background:var(--green);transition:width .55s cubic-bezier(.22,1,.36,1)}
  .fld-v.focus{border-color:#C4DE94;box-shadow:0 0 0 3px rgba(110,183,4,.13)}
  .fld-v{transition:border-color .25s ease,box-shadow .25s ease}
  .hwA-pane{position:absolute;inset:0;display:flex;flex-direction:column;gap:15px;padding:24px;box-sizing:border-box;opacity:0;transform:translateX(20px);pointer-events:none;transition:opacity .34s ease,transform .44s cubic-bezier(.22,1,.36,1)}
  /* Continue sits a fixed 24px off the window foot in both form panes */
  .hwA-pane .gbtn{margin-top:auto}
  .hwA-pane-d{gap:13px}
  .hwA-d2{flex:1;display:grid;grid-template-columns:1.08fr 1fr;gap:20px;min-height:0}
  .hwA-dcol{display:flex;flex-direction:column;gap:8px;min-width:0}
  .hwA-micro{font:600 9px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:1px}
  .hwA-ev{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line-2);border-radius:10px;background:var(--bg);font:500 11.5px var(--font-sans);color:var(--ink-2);white-space:nowrap;overflow:hidden}
  .hwA-ev svg{width:12px;height:12px;color:var(--green-deep);flex:none}
  .hwA-ev em{margin-left:auto;font:600 9px var(--font-mono);font-style:normal;letter-spacing:.08em;color:var(--muted-2);padding-left:8px}
  .hwA-d2 .hwB-meter b{width:86px;font-size:11.5px}
  .hwA-d2 .hwB-pct{width:30px}
  .d-st,.hwA-ev,.hwA-ins{opacity:0;transform:translateY(8px);transition:opacity .42s cubic-bezier(.22,1,.36,1),transform .42s cubic-bezier(.22,1,.36,1)}
  .d-st.in,.hwA-ev.in,.hwA-ins.in{opacity:1;transform:none}
  .hwA-ev.in{animation:evFlash 1.1s ease .05s}
  @keyframes evFlash{0%{background:var(--green-tint);border-color:var(--green-tint-2)}100%{background:var(--bg);border-color:var(--line-2)}}
  .hwA-mapk{transition:opacity .2s ease}
  .hwA-mapk.sw{opacity:0}
  .hwA-pane.show{opacity:1;transform:none;pointer-events:auto}
  .hwA-pane.out{opacity:0;transform:translateX(-20px)}
  .hwA-pane .fld{position:relative}
  .hwA-drop{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:4;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 3px 8px rgba(20,24,12,.06),0 16px 38px rgba(20,24,12,.13);padding:5px;opacity:0;transform:translateY(-5px);pointer-events:none;transition:opacity .26s ease,transform .34s cubic-bezier(.22,1,.36,1)}
  .hwA-drop.show{opacity:1;transform:none}
  .hwA-do{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:8px;font:500 13.5px var(--font-sans);color:var(--ink-2);transition:background .2s ease}
  .hwA-do svg{width:13px;height:13px;color:var(--muted-2);flex:none}
  .hwA-do.hot{background:var(--green-tint);color:var(--ink)}
  .hwA-do.hot svg{color:var(--green-deep)}
  .hwA-do.press{background:var(--green-tint-2)}
  .hwA-do.off{display:none}
  .hwA-cur{position:absolute;left:0;top:0;z-index:6;width:20px;height:20px;opacity:0;pointer-events:none;transition:transform .6s cubic-bezier(.3,1,.35,1),opacity .26s ease}
  .hwA-cur.show{opacity:1}
  .hwA-cur svg{width:20px;height:20px;display:block;transition:transform .15s ease;filter:drop-shadow(0 1.5px 2.5px rgba(0,0,0,.28))}
  .hwA-cur.press svg{transform:scale(.78)}
  .hwA-cur svg path{fill:var(--ink);stroke:var(--card);stroke-width:1.4;stroke-linejoin:round}
  .hwA-mods{display:flex;flex-direction:column;gap:7px}
  .hwA-yrs{display:flex;flex-wrap:wrap;gap:7px}
  .hwA-yr{display:inline-flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line-2);border-radius:11px;padding:8px 13px 8px 11px;font:500 13px var(--font-sans);color:var(--ink-2);box-shadow:0 1px 2px rgba(20,24,12,.03);transition:border-color .25s ease,color .25s ease}
  .hwA-yr.on{border-color:var(--green);color:var(--ink)}
  .hwA-mod{position:relative;display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line-2);border-radius:12px;padding:10px 13px 10px 15px;overflow:hidden;box-shadow:0 1px 2px rgba(20,24,12,.035);opacity:0;transform:translateY(9px);transition:opacity .34s cubic-bezier(.22,1,.36,1),transform .34s cubic-bezier(.22,1,.36,1)}
  .hwA-mod::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--green);transform:scaleY(0);transform-origin:center;transition:transform .42s cubic-bezier(.22,1,.36,1) .1s}
  .hwA-mod.show::before{transform:scaleY(1)}
  .hwA-mod.show{opacity:1;transform:none}
  .hwA-box{flex:none;width:18px;height:18px;border-radius:6px;background:var(--green);color:var(--on-green);display:grid;place-items:center;box-shadow:0 1px 3px rgba(110,183,4,.35);transform:scale(.55);transition:transform .42s cubic-bezier(.34,1.6,.5,1) .06s}
  .hwA-mod.show .hwA-box{transform:scale(1)}
  .hwA-box svg{width:11px;height:11px;stroke-dasharray:26;stroke-dashoffset:26;transition:stroke-dashoffset .4s ease .12s}
  .hwA-mod.show .hwA-box svg{stroke-dashoffset:0}
  .hwA-modt{min-width:0}
  .hwA-modt b{display:block;font:600 13px var(--font-sans);letter-spacing:-.008em;color:var(--ink)}
  .hwA-modt span{display:block;margin-top:1px;font:500 10.5px var(--font-sans);color:var(--muted)}
  .hwA-mod em{margin-left:auto;flex:none;font:600 9px var(--font-mono);font-style:normal;letter-spacing:.11em;color:var(--muted-2);background:var(--bg);border:1px solid var(--line-2);border-radius:6px;padding:3px 7px}
  .hwA-stage{display:flex;align-items:center;gap:11px;font:500 14px var(--font-sans);color:var(--muted-2);opacity:.45;transition:opacity .3s ease,color .3s ease}
  .hwA-stage.run,.hwA-stage.done{opacity:1;color:var(--ink)}
  .hwA-ic{position:relative;width:20px;height:20px;flex:none;display:grid;place-items:center}
  .hwA-ic i{width:16px;height:16px;border-radius:50%;border:2.2px solid var(--line);border-top-color:var(--green);opacity:0;transition:opacity .2s ease}
  .hwA-stage.run .hwA-ic i{opacity:1;animation:spin .8s linear infinite}
  .hwA-stage.done .hwA-ic i{opacity:0;animation:none}
  @keyframes spin{to{transform:rotate(360deg)}}
  .hwA-ic svg{position:absolute;inset:0;width:20px;height:20px;padding:4px;box-sizing:border-box;border-radius:50%;background:var(--green);color:var(--on-green);opacity:0;transform:scale(.5);transition:opacity .26s ease,transform .3s cubic-bezier(.34,1.5,.5,1)}
  .hwA-stage.done .hwA-ic svg{opacity:1;transform:none}
  .hwA-chats{display:flex;flex-direction:column;gap:7px;margin:6px 0 0 31px}
  .hwA-chat{display:none;align-items:center;gap:11px;background:var(--card);border:1px solid var(--line-2);border-radius:11px;padding:8px 12px;box-shadow:0 1px 2px rgba(20,24,12,.03);opacity:0;transform:translateY(13px) scale(.955);transition:opacity .34s ease,transform .46s cubic-bezier(.3,1.45,.45,1)}
  .hwA-chat.show{display:flex}
  .hwA-chat.in{opacity:1;transform:none}
  .hwA-av{flex:none;display:flex;align-items:center}
  .hwA-av i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:600 8px var(--font-mono);font-style:normal;letter-spacing:.02em;color:var(--muted);background:var(--bg);border:1.5px solid var(--card);margin-left:-7px}
  .hwA-av i:first-child{margin-left:0;background:var(--green-tint);color:var(--green-deep)}
  .hwA-av i:nth-child(2){background:#E6E4DC}
  .hwA-av i:last-child{background:var(--dark);color:rgba(255,255,255,.8)}
  .hwA-chatt{min-width:0}
  .hwA-chatt b{display:block;font:600 12.5px var(--font-sans);letter-spacing:-.008em;color:var(--ink)}
  .hwA-chatt span{display:flex;align-items:center;gap:5px;margin-top:1.5px;font:500 10.5px var(--font-sans);color:var(--muted)}
  .hwA-chatt span u{text-decoration:none;font:600 9px var(--font-mono);letter-spacing:.09em;color:var(--muted-2)}
  .hwA-chatt span s{text-decoration:none;width:3px;height:3px;border-radius:50%;background:var(--line);flex:none}
  .hwA-chat em{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:5px;font:600 8.5px var(--font-mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--green-deep);background:var(--green-tint);border-radius:100px;padding:3.5px 9px}
  .hwA-chat em svg{width:9px;height:9px}
  .hwA-chat-top .hwA-chatt b{color:var(--ink)}

  .section.how .hwA{max-width:860px;margin:56px auto 0}
  /* Continue mirrors the hover CTA: same size, radius and corner */
  .section.how .hwA-pane .gbtn{position:absolute;left:16px;bottom:16px;align-self:auto;margin-top:0;gap:8px;padding:10px 16px 10px 18px;border-radius:100px;font:600 12.5px var(--font-sans);letter-spacing:-.006em;box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 2px 6px rgba(20,24,12,.12),0 10px 26px rgba(110,183,4,.24)}
  .section.how .hwA-pane .gbtn svg{width:13px;height:13px}
  /* quiet secondary action, sat beside Continue */
  .section.how .hwA-skip{position:absolute;left:150px;bottom:16px;display:inline-flex;align-items:center;height:35px;font:500 12.5px var(--font-sans);letter-spacing:-.008em;color:var(--muted-2);cursor:pointer;transition:color .2s ease}
  .section.how .hwA-skip:hover{color:var(--ink-2)}
  .section.how .hwA-pane .gbtn.press{transform:translateY(1px) scale(.97)}
  .hwA-win{position:relative}

  /* the how-it-works band sits on its own tinted ground, so setup reads as a step apart.
     --bg is re-pointed locally so the rail's step circles and the mock's canvas follow it. */
  .section.how{position:relative;--bg:#F1F4E7;background:#F1F4E7;border-top:1px solid #E6EBD8;border-bottom:1px solid #E6EBD8}
  html[data-theme="dark"] .section.how{--bg:#15180F;background:#15180F;border-color:rgba(255,255,255,.06)}
  .section.how .hwA-body{transition:none}
  .section.how .hwA-pane-c{justify-content:flex-start}
  /* pane-c's button stays in flow so the chats and it can't collide */
  .section.how .hwA-pane-c .hwA-chats{margin-bottom:26px}
  .section.how .hwA-pane-c .gbtn{position:static;left:auto;bottom:auto;align-self:flex-start;margin-top:auto}
  /* the rail is static: numbers stay, no ticks, no highlight, all three steps open */
  .section.how .hwA-r::before{background-image:none}
  .section.how .hwA-n svg{display:none}
  .section.how .hwA-r .hwA-n,.section.how .hwA-r.on .hwA-n,.section.how .hwA-r.done .hwA-n{background:var(--bg);border-color:var(--line);color:var(--muted-2);transform:none}
  .section.how .hwA-r .hwA-n u,.section.how .hwA-r.done .hwA-n u{opacity:1;transform:none}
  .section.how .hwA-t b{color:var(--ink)}
  .section.how .hwA-t span{opacity:1;max-height:none}