/* =========================================================================
   CoLateral home page - everything below the first screen
   -------------------------------------------------------------------------
   index.html keeps the rules the first paint needs in its own <style>: the
   palette, the reset, the canvas backdrop, the top bar, the headline scale,
   the buttons and the whole .intro-hero block. Everything a visitor only
   reaches by scrolling is here, and this sheet is fetched without blocking
   the render, so it comes after the inline rules in the cascade.

   The look is the shared atmosphere layer (site-atmosphere.css): .atm-card
   surfaces, soft pools of light behind groups of cards, and [data-reveal] for
   the scroll reveal. Two rules keep the page honest while it animates:
   - Nothing that carries content a visitor came for (the reel, the film, the
     price ladder, the packs) is ever hidden by a reveal. Headings and the
     small explanatory cards fade up; the proof is simply there.
   - Glows sit behind content at low alpha and never pulse.
   ========================================================================= */

/* ---- Section rhythm ---------------------------------------------------- */
/* One section head on every core page (home, about, pricing, FAQ): the dot
   eyebrow the product pages use, a short h2 with no trailing period, and at
   most one sentence under it, centred. */
.section{position:relative;padding:88px 0}
.anchor{display:block;position:relative;top:-72px;visibility:hidden}
.section-head{max-width:860px;margin:0 auto 48px;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;letter-spacing:.14em;font-weight:800}
.eyebrow::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 16%,transparent)}
.section-head h2{margin:14px 0 0;font-size:clamp(34px,4.2vw,52px);font-weight:820;line-height:1.05;letter-spacing:-.04em;text-wrap:balance}
/* Ragged, never justified, and one sentence. */
.section-head p{max-width:640px;margin:14px auto 0;color:var(--muted);font-size:clamp(16px,1.5vw,18px);line-height:1.55;text-wrap:balance;hyphens:none}
/* A link that reads as a link. Used where a band already has its one filled
   button and a second route still has to be offered. */
.text-link{display:inline-flex;align-items:center;gap:7px;min-height:42px;color:var(--link-ink);font-size:14px;font-weight:750;border-bottom:1px solid color-mix(in srgb,currentColor 35%,transparent)}
.text-link svg{width:15px;height:15px;transition:transform .2s ease}
.text-link:hover{border-bottom-color:currentColor}
.text-link:hover svg{transform:translateX(3px)}

/* A soft pool of light behind a group of cards. Painted on a pseudo element
   under the group, so the cards' own fills stay solid and readable, and
   static: it never breathes. */
.reel-glow,.demo-glow,.how-grid,#get-it .wrap{position:relative;isolation:isolate}
.reel-glow::before,.demo-glow::before,.how-grid::before,#get-it .wrap::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%;
  inset:4% 8% 0;
  background:
    radial-gradient(closest-side at 30% 45%,var(--atm-glow-a,rgba(0,120,212,.13)),transparent 100%),
    radial-gradient(closest-side at 72% 58%,var(--atm-glow-b,rgba(112,96,255,.08)),transparent 100%);
  filter:blur(40px)}

/* ---- How it works -------------------------------------------------------- */
.how-grid{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.how-step{display:flex;flex-direction:column}
.how-copy h3{margin:0;line-height:1.12;font-weight:780;letter-spacing:-.025em;text-wrap:balance}
.how-copy p{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--muted);text-wrap:pretty}

/* The mini canvas card: the real card chrome at a quarter of the size. */
.mc,.tv-tool{background:var(--mc-bg,#ffffff);border:1px solid var(--mc-line,rgba(15,23,42,.12));border-radius:10px;box-shadow:var(--mc-shadow,0 12px 28px -14px rgba(15,23,42,.3))}
.mc-head{display:flex;align-items:center;gap:6px;min-width:0;height:26px;padding:0 9px;border-bottom:1px solid var(--mc-line,rgba(15,23,42,.08))}
.mc-head svg{flex:none;width:12px;height:12px;color:var(--blue)}
.mc-head b{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:10.5px;font-weight:750;color:var(--ink)}
.mc-head em{margin-left:auto;flex:none;font-style:normal;font-size:8px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--quiet)}

.mc-lines{display:grid;gap:5px;padding:9px 10px 10px}
.mc-lines i,.tv-lines i,.tv-doc i{display:block;height:4px;border-radius:3px;background:var(--bar,rgba(15,23,42,.12))}
.mc-lines i.s,.tv-lines i.s,.tv-doc i.s{width:58%}
.mc-cells{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:8px 9px 9px}
.mc-cells i,.tv-cells i{height:9px;border-radius:2px;background:var(--cell,rgba(15,23,42,.07))}
.mc-cells i.on,.tv-cells i.on{background:color-mix(in srgb,var(--green) 28%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--green) 70%,transparent)}
.mc-checks{display:grid;gap:6px;padding:9px 10px 10px}
.mc-checks span{display:flex;align-items:center;gap:6px}
.mc-checks i{flex:none;width:9px;height:9px;border-radius:3px;border:1px solid var(--quiet)}
.mc-checks .on i{border-color:var(--green);background:color-mix(in srgb,var(--green) 30%,transparent)}
.mc-checks u{display:block;flex:1;height:4px;border-radius:3px;background:var(--bar,rgba(15,23,42,.12))}
.mc-code{padding:9px 10px 11px;font:600 9.5px/1.4 "JetBrains Mono","SFMono-Regular",Menlo,Consolas,monospace;color:var(--quiet);white-space:nowrap}
.mc-code .c{color:var(--ink)}

/* ---- The reel ----------------------------------------------------------
   These are captures of the running workspace rather than drawings of it, cut
   by `capture-tool-previews.mjs --home` at a full 1600 by 1000 viewport so
   every slide is the same shape and the reel does not change size as it turns.
   Each picture is painted as a background-image: an <img> inside a transform
   is what blurs mid-animation.

   Two layouts, and the plain one is the one in the HTML: a scroll-snapping row
   that works with no JavaScript, under a reader, and with a thumb. src/public/
   canvas-reel.js adds .is-live above 900px, where the reel becomes one picture
   face on with its neighbours set back flat either side: smaller, dimmer and
   faded out at the reel's edges. No turn, no perspective - the neighbours are
   there to say "there is more", not to perform. */
.reel{position:relative;z-index:1;margin:0 auto;max-width:1240px}
.reel-stage{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 2px 14px;scrollbar-width:none}
.reel-stage::-webkit-scrollbar{width:0;height:0;display:none}
.reel-slide{flex:0 0 min(88%,760px);scroll-snap-align:center;display:flex;flex-direction:column;margin:0;border:1px solid var(--atm-card-line,var(--line));border-radius:18px;background:var(--paper);box-shadow:var(--atm-card-shadow,0 18px 50px rgba(15,23,42,.12));overflow:hidden}
.reel-shot{aspect-ratio:1.6;background-color:#e9f0f8;background-position:center;background-repeat:no-repeat;background-size:contain;border-bottom:1px solid var(--line)}
.reel-body{padding:14px 20px 16px}
.reel-name{margin:0 0 4px;font-size:16px;font-weight:800;letter-spacing:-.015em;color:var(--ink)}
.reel-line{margin:0;font-size:14px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.reel-nav,.reel-dots{display:none}
/* The stage is taller than the slides by 120px above and below so the front
   slide's shadow fades out inside it: the mask clips everything to the
   stage's box, and with less room the shadow ended on a straight line under
   the reel. The slides sit 120px down to match, the negative margin gives the
   height back to the page, and the stage itself takes no pointer events, so
   the band it overlaps above the reel stays selectable. `overflow-x:clip`
   keeps a side slide out of the document's scroll width, and the mask fades
   both neighbours out before the reel's edge instead of cutting them. */
.reel.is-live .reel-stage{display:block;position:relative;height:calc(var(--reel-h,520px) + 240px);margin:-120px 0;overflow-x:clip;overflow-y:visible;padding:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.reel.is-live .reel-slide{position:absolute;top:120px;pointer-events:auto;left:50%;width:var(--reel-w,760px);margin-left:calc(var(--reel-w,760px) / -2);cursor:pointer;transition:transform .55s cubic-bezier(.22,.61,.36,1),opacity .55s,box-shadow .55s;will-change:transform}
/* The first frame only: without this the reel opens by throwing every
   picture out sideways from the middle of the stage. */
.reel.is-still .reel-slide{transition:none}
/* A slide that changes sides as the reel wraps is moved in one frame and
   faded in where it lands (canvas-reel.js), instead of flying across the
   stage behind the front picture. */
.reel.is-live .reel-slide.is-wrapping{transition:none;animation:reel-wrap .55s cubic-bezier(.22,.61,.36,1)}
@keyframes reel-wrap{from{opacity:0}}
/* Only the front picture carries its caption: on a set-back slide it was a
   half-cut line of grey text at the edge of the stage. */
.reel.is-live .reel-body{transition:opacity .35s,visibility .35s}
.reel.is-live .reel-slide:not([data-at="0"]) .reel-body{opacity:0;visibility:hidden}
.reel.is-live .reel-slide[data-at="0"]{cursor:default;transform:none;opacity:1;z-index:6;box-shadow:0 1px 2px rgba(15,23,42,.05),0 40px 90px -30px rgba(0,80,160,.4)}
.reel.is-live .reel-slide[data-at="1"]{transform:translateX(56%) scale(.9);opacity:.35;z-index:5}
.reel.is-live .reel-slide[data-at="-1"]{transform:translateX(-56%) scale(.9);opacity:.35;z-index:5}
.reel.is-live .reel-slide[data-at="2"],.reel.is-live .reel-slide[data-at="3"]{transform:translateX(100%) scale(.8);opacity:0;z-index:4;pointer-events:none}
.reel.is-live .reel-slide[data-at="-2"],.reel.is-live .reel-slide[data-at="-3"]{transform:translateX(-100%) scale(.8);opacity:0;z-index:4;pointer-events:none}
.reel.is-live .reel-nav{display:grid;place-items:center;position:absolute;top:calc(var(--reel-h,520px) / 2);z-index:8;width:46px;height:46px;padding:0;border:1px solid var(--atm-card-line,var(--line));border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 12px 30px rgba(15,23,42,.16);color:var(--ink);cursor:pointer;transform:translateY(-50%);transition:background .2s,border-color .2s}
.reel.is-live .reel-nav:hover{border-color:var(--line-strong);background:#fff}
.reel-nav svg{width:20px;height:20px}
.reel-prev{left:-6px}
.reel-next{right:-6px}
.reel.is-live .reel-dots{display:flex;gap:9px;justify-content:center;margin-top:18px}
.reel-dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(15,23,42,.20);cursor:pointer;transition:background .2s,transform .2s}
.reel-dot[aria-current="true"]{background:var(--blue);transform:scale(1.25)}
.reel-dot:focus-visible,.reel-nav:focus-visible,.reel-slide:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.reel-shot{background-image:var(--reel-image-light)}
html[data-site-theme="dark"] .reel-shot{background-image:var(--reel-image-dark,var(--reel-image-light))}

/* ---- Everything on one canvas: the bento ------------------------------- */
/* Four columns. The agents tile takes two columns and two rows and is sized
   to hold about what two rows of small tiles hold, so the grid packs with no
   hole beside it; its drawing sits at its foot. */
.atm-glow.bento-glow::before{inset:-4% -3%}
.bento{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(200px,auto);gap:16px}
.tile{display:flex;flex-direction:column;min-width:0;padding:22px 22px 20px;overflow:hidden}
.tile:hover{border-color:var(--atm-card-line-hover,var(--line-strong))}
.tile-agents{grid-column:span 2;grid-row:span 2;padding:28px}
.tile-build{grid-column:span 2}
.tile-top{display:flex;align-items:center;gap:12px}
.tile-ic{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:10px;border:1px solid color-mix(in srgb,var(--blue) 26%,transparent);background:color-mix(in srgb,var(--blue) 10%,transparent);color:var(--blue-ink)}
.tile-ic svg{width:19px;height:19px}
.tile h3{margin:0;font-size:17px;font-weight:780;letter-spacing:-.02em}
.tile-agents h3{font-size:clamp(20px,2vw,26px);letter-spacing:-.03em}
.tile p{margin:12px 0 0;font-size:14.5px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.tile-agents>p{font-size:16px;max-width:420px}
.tile-vis{margin-top:auto;padding-top:18px}
.tile-chips{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tile-chips li{display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 9px;border-radius:999px;border:1px solid var(--atm-card-line,var(--line));font-size:12.5px;font-weight:650;color:var(--ink)}
.tile-chips li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}

.tv-agents{position:relative;display:grid;padding-top:22px}
.tv-term{border:1px solid var(--mc-line,rgba(15,23,42,.12));border-radius:12px;background:var(--term-bg,#0d1422);box-shadow:0 22px 50px -24px rgba(15,23,42,.5);overflow:hidden}
.tv-term-head{display:flex;align-items:flex-end;gap:2px;height:34px;padding:0 12px 0 8px;border-bottom:1px solid rgba(148,178,220,.14)}
.tv-tab{padding:7px 12px 8px;border-radius:8px 8px 0 0;font-size:11px;font-weight:750;color:#8b9cb1}
.tv-tab.is-on{background:rgba(124,192,255,.12);color:#e6edf5;box-shadow:inset 0 -2px 0 #4da6ff}
.tv-term-head em{align-self:center;margin-left:auto;font-style:normal;font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#8b9cb1}
.tv-term-body{padding:11px 14px 13px;font:600 11.5px/1.7 "JetBrains Mono","SFMono-Regular",Menlo,Consolas,monospace;color:#e6edf5}
.tv-term-body p{margin:0;font-size:inherit;color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-term-body .p{color:#7cc0ff}
.tv-term-body .d{color:#8b9cb1}
.tv-term-body .d::before{content:"\2192  ";color:#4da6ff}
.tv-term-body .g{color:#5fe39a}

.tv-shell{padding:10px 12px;border-radius:10px;background:var(--term-bg,#0d1422);font:600 11px/1.6 "JetBrains Mono","SFMono-Regular",Menlo,Consolas,monospace;color:#e6edf5}
.tv-shell p{margin:0;font-size:inherit;color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-shell span{color:#7cc0ff}
.tv-shell b{font-weight:inherit}
.tv-shell .d{color:#8b9cb1}
.tv-lines,.tv-doc{display:grid;gap:7px;padding:14px 14px;border-radius:10px;border:1px solid var(--mc-line,rgba(15,23,42,.1));background:var(--mc-bg,#fff)}
.tv-doc b{display:block;width:46%;height:7px;margin-bottom:3px;border-radius:3px;background:color-mix(in srgb,var(--blue) 45%,transparent)}
.tv-cells{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:10px;border-radius:10px;border:1px solid var(--mc-line,rgba(15,23,42,.1));background:var(--mc-bg,#fff)}
.tv-cells i{height:12px}
.tv-todo{display:grid;gap:8px;padding:12px 14px;border-radius:10px;border:1px solid var(--mc-line,rgba(15,23,42,.1));background:var(--mc-bg,#fff)}
.tv-todo span{display:flex;align-items:center;gap:8px}
.tv-todo i{display:grid;place-items:center;flex:none;width:13px;height:13px;border-radius:4px;border:1px solid var(--quiet);color:var(--green)}
.tv-todo i svg{width:9px;height:9px}
.tv-todo .on i{border-color:var(--green);background:color-mix(in srgb,var(--green) 16%,transparent)}
.tv-todo u{display:block;flex:1;height:5px;border-radius:3px;background:var(--bar,rgba(15,23,42,.12))}
.tv-todo .on u{opacity:.55}
.tv-build{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px}
.tv-ask{padding:12px 14px;border-radius:12px 12px 12px 4px;border:1px solid color-mix(in srgb,var(--blue) 30%,transparent);background:color-mix(in srgb,var(--blue) 8%,var(--mc-bg,#fff));font-size:13px;font-weight:600;line-height:1.4;color:var(--ink)}
.tv-arrow{width:18px;height:18px;color:var(--blue)}
.tv-tool-body{display:grid;gap:4px;padding:8px 11px 10px}
.tv-tool-body p{display:flex;justify-content:space-between;gap:10px;margin:0;font-size:11px;color:var(--muted)}
.tv-tool-body b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.tv-tool-body .r{margin-top:3px;padding-top:6px;border-top:1px solid var(--mc-line,rgba(15,23,42,.08))}
.tv-tool-body .r b{color:var(--add-ink,#08662f)}
/* Three tools in the Store, drawn as the header row of their canvas cards. */
.tv-store{display:grid;gap:6px}
.tv-store .mc{border-radius:9px;box-shadow:none}
.tv-store .mc-head{border-bottom:0;height:28px}

/* ---- The walkthrough film ----------------------------------------------
   The stage is written into the page at build time, so the frame, the poster
   and the play control are there before any script runs; it is never a
   blank band. */
.video-frame{position:relative;z-index:1;margin:0;border:1px solid var(--atm-card-line,var(--line));border-radius:18px;background:var(--paper);overflow:hidden;box-shadow:0 1px 2px rgba(15,23,42,.05),0 40px 100px -40px rgba(0,80,160,.45)}
.vf-chrome{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;height:40px;padding:0 84px;background:var(--paper2);border-bottom:1px solid var(--line)}
.vf-chrome::before{content:"";position:absolute;left:16px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:rgba(15,23,42,.16);box-shadow:15px 0 0 rgba(15,23,42,.16),30px 0 0 rgba(15,23,42,.16)}
.vf-url{min-width:0;max-width:100%;padding:3px 14px;border-radius:7px;background:rgba(255,255,255,.8);border:1px solid var(--line);color:var(--muted);font-size:11.5px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vf-stage{position:relative;width:100%;aspect-ratio:16/9;background:#e9eef6}
.vf-video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;background:#e9eef6}
.vf-video:focus-visible{outline:2px solid var(--blue);outline-offset:-3px}
.vf-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;text-decoration:none}
.vf-play{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:var(--blue,#0078d4);border:1px solid var(--blue,#0078d4);box-shadow:0 18px 50px rgba(15,23,42,.35)}
.vf-play svg{width:34px;height:34px;margin-left:5px;fill:#ffffff}
.vf-ph-label{color:var(--muted);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.vf-caption{padding:12px 18px;border-top:1px solid var(--line);background:var(--paper2);color:var(--muted);font-size:13px;line-height:1.5;text-align:center}
@media(max-width:560px){.vf-play{width:64px;height:64px}.vf-play svg{width:26px;height:26px}}
/* The frame's title bar holds the name of the recording, and a title that is
   ellipsised is not a title. On a narrow screen the bar grows a line instead of
   cutting the words, and the three window dots step aside. */
@media(max-width:720px){
  .vf-chrome{height:auto;min-height:38px;padding:7px 12px}
  .vf-chrome::before{display:none}
  .vf-url{white-space:normal;overflow:visible;text-overflow:clip;text-align:center;line-height:1.35}
}
/* The film is a 16:9 composition. Below this width every word in it is too
   small to read, so the phone leads with crops of the same render (styled in
   film-captions.css) and the film moves underneath them. */
@media(max-width:640px){
  #homeDemoStage{display:flex;flex-direction:column}
  .video-frame{order:2;margin:20px 0 0}
  /* Two frames, not three: the agent at work and the stop before a delete.
     The opening frame is the poster of the film right under them. */
  #homeDemoStage .demo-stills li:first-child{display:none}
}

.film-glow{max-width:1160px;margin:0 auto}
.atm-glow.film-glow::before{inset:-6% -4%}
.film-frame .vf-stage{background:#05080f}
.hf-video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;background:#05080f;color:#fff}
.hf-video:focus-visible{outline:2px solid var(--blue);outline-offset:-3px}
.film-frame .vf-cover{background:radial-gradient(circle at 50% 50%,rgba(5,8,15,.4),transparent 22%)}
.film-points{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;padding:14px 18px;border-top:1px solid var(--line);background:var(--paper2);color:var(--muted);font-size:13.5px;font-weight:650;line-height:1.4}
.film-points span{display:inline-flex;align-items:center;gap:9px}
.film-points span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 18%,transparent)}
.film-cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 26px;margin:34px 0 0}
@media(max-width:640px){.film-points{flex-direction:column;align-items:flex-start;gap:8px}}

/* ---- Built in the open ------------------------------------------------
   The founder livestream player, the same module /about carries. Its layout
   lives in livestreams.css; this only sets its width and the follow links. */
#live .founder-streams{max-width:1160px;margin:0 auto}
.atm-glow.live-glow::before{inset:-6% -4%}
.live-follow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 22px;margin:22px 0 0}
.live-follow .community-count{margin:0}
.live-follow .community-count:not([hidden]){display:inline}

/* ---- Pricing ----------------------------------------------------------- */
.atm-glow.plan-glow::before{inset:-8% -3%}
/* The pack tick is a checkout control, and checkout lives on /pricing. The
   build renders it after every ladder, so on the home page it is simply not
   drawn; an unticked, undrawn box adds nothing to the basket. */
#pricing .pack-addons{display:none}
#pricing .pricing-note{margin:24px auto 0;max-width:640px;font-size:12.5px;line-height:1.5;color:var(--muted);text-align:center}
#pricing .pricing-note[hidden]{display:none}
#pricing{padding-bottom:0}
/* A balanced entry to the module collection, beneath the license ladder. */
.home-modules{margin-top:54px;scroll-margin-top:100px}
.home-modules-head{display:flex;justify-content:space-between;align-items:end;gap:16px 28px;margin-bottom:20px}
.home-modules-head h2{margin:8px 0;font-size:clamp(27px,3vw,36px);letter-spacing:-.035em}
.home-modules-head p{max-width:620px;margin:0;color:var(--muted);font-size:15px;line-height:1.55}
.home-modules-browse{flex:none;gap:10px;min-height:44px}
.home-modules-browse svg{width:16px;height:16px}
.home-modules-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.home-module{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid var(--atm-card-line);border-radius:var(--atm-radius,18px);background:var(--atm-card);box-shadow:var(--atm-card-shadow);transition:transform .3s var(--site-ease,ease),box-shadow .3s ease,border-color .3s ease}
.home-module:hover{transform:translateY(-3px);border-color:var(--atm-card-line-hover);box-shadow:var(--atm-card-shadow-hover)}
.home-module:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.home-module-preview{position:relative;aspect-ratio:8/5;overflow:hidden;border-bottom:1px solid var(--atm-card-line);background:var(--surface-2,#f3f6fa)}
.home-module-preview img{display:block;width:100%;height:100%;object-fit:contain}
.home-module-preview.is-arcade img{object-fit:cover}
.home-module-preview-label{position:absolute;left:14px;bottom:14px;padding:6px 10px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(7,11,21,.82);color:#fff;font-size:11px;font-weight:750;line-height:1.2}
.home-module-copy{display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:9px;padding:24px;min-width:0}
.home-module-copy h3{margin:0;color:var(--ink);font-size:clamp(20px,2vw,24px);font-weight:820;line-height:1.16;letter-spacing:-.025em}
.home-module-copy p{margin:0 0 10px;font-size:14px;line-height:1.6;color:var(--muted)}
.home-module-status{font-size:10px;font-weight:850;letter-spacing:.085em;text-transform:uppercase;color:var(--blue-ink)}
.home-module-action{display:inline-flex;align-items:center;gap:8px;margin-top:auto;color:var(--link-ink);font-size:13px;font-weight:800}
.home-module-action svg{width:15px;height:15px}
@media(max-width:940px){.home-modules-head{align-items:start;flex-direction:column}}
@media(max-width:640px){.home-modules-grid{grid-template-columns:minmax(0,1fr)}.home-module-copy{padding:20px}}
@media(prefers-reduced-motion:reduce){.home-module{transition:none}.home-module:hover{transform:none}}


/* ---- The close ---------------------------------------------------------- */
.home-cta{max-width:880px;margin:0 auto;padding:60px clamp(22px,5vw,64px) 56px;border-radius:var(--atm-radius,18px);text-align:center}
.home-cta h2{margin:14px 0 0;font-size:clamp(34px,4.2vw,52px);font-weight:820;line-height:1.05;letter-spacing:-.04em;text-wrap:balance}
.home-cta p{margin:16px auto 0;color:var(--muted);font-size:clamp(16px,1.5vw,18px);text-wrap:balance}
.home-cta .hero-actions{justify-content:center;align-items:center;gap:12px 26px;margin-top:30px}
#get-it{padding-top:88px}
#get-it .wrap::before{inset:-6% 14%}

/* ---- Widths -------------------------------------------------------------- */
@media(max-width:940px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row dense}
  .tile-agents{grid-row:span 1}
}
@media(max-width:720px){
  .section{padding:64px 0}
  .section-head{margin-bottom:32px}
  #get-it{padding-top:64px}
  .home-cta .hero-actions{flex-direction:column}
}
@media(max-width:640px){
  /* Two small tiles a row on a phone, the two large ones across both. */
  .bento{gap:12px;grid-auto-rows:auto}
  .tile{padding:16px 16px 16px}
  .tile-agents{padding:22px}
  .tile:not(.tile-agents):not(.tile-build) .tile-top{flex-direction:column;align-items:flex-start;gap:10px}
  .tile:not(.tile-agents):not(.tile-build) h3{font-size:15.5px}
  .tile:not(.tile-agents):not(.tile-build) > p{margin-top:6px;font-size:13px}
  .tile:not(.tile-agents):not(.tile-build) .tile-vis{padding-top:14px}
  .tv-shell{padding:8px 7px;font-size:9.5px}
  .tv-store .mc-head em{display:none}
  .tv-build{grid-template-columns:1fr;justify-items:stretch}
  .tv-arrow{justify-self:center;transform:rotate(90deg)}
  .tile{min-height:0}
}
/* The narrowest phones: the prompt drops its path so the command still reads
   whole in a half-width tile. */
@media(max-width:380px){.tv-shell .tv-path{display:none}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reel-stage{scroll-behavior:auto}
  .reel.is-live .reel-slide{transition:none}
  .reel.is-live .reel-slide.is-wrapping{animation:none}
  .reel.is-live .reel-body{transition:none}
  .text-link svg{transition:none}
}

/* ---- Dark ---------------------------------------------------------------
   Every value from the site palette (site-prefs.css) and the atmosphere
   tokens (site-atmosphere.css): near-black navy, hairline borders, Office
   Blue light. */
html[data-site-theme="dark"]{
  --pack-lead-ink:#7cc0ff;
  --vis-bg:#0a101c;--vis-dot:rgba(160,190,230,.1);
  --mc-bg:#121a2c;--mc-line:rgba(148,178,220,.16);--mc-shadow:0 16px 34px -16px rgba(0,0,0,.8);
  --bar:rgba(148,178,220,.2);--cell:rgba(148,178,220,.1);--wire:rgba(124,192,255,.35);
  --term-bg:#060a13;--draft-ink:#f5c96a;--add-ink:#5fe39a;--del-ink:#ff8a8a;
  --how-line:rgba(124,192,255,.2);--how-sheen:rgba(124,192,255,.55);
  --how-glow:0 1px 0 rgba(255,255,255,.06) inset,0 0 0 1px rgba(77,166,255,.05),0 30px 80px -36px rgba(0,0,0,.85),0 0 64px -16px rgba(77,166,255,.3);
  --brand-copilot:#a371f7;--brand-kiro:#a879ff;--brand-deepseek:#6b84ff}
html[data-site-theme="dark"] .section-head .eyebrow,html[data-site-theme="dark"] .home-cta .eyebrow{color:var(--blue2)}
html[data-site-theme="dark"] .reel-slide{background:var(--paper)}
html[data-site-theme="dark"] .reel-shot{background-color:#070b15;box-shadow:inset 0 0 0 1px rgba(124,192,255,.1)}
/* The front capture is the largest lit area on a dark page; taken down a
   step it sits in the page instead of glowing out of it. */
html[data-site-theme="dark"] .reel-slide .reel-shot{filter:brightness(.88)}
html[data-site-theme="dark"] .reel.is-live .reel-slide[data-at="0"]{box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 40px 100px -30px rgba(0,0,0,.9),0 0 120px -30px rgba(77,166,255,.35)}
html[data-site-theme="dark"] .reel.is-live .reel-nav{background:rgba(14,21,36,.94);box-shadow:0 12px 30px rgba(0,0,0,.5)}
html[data-site-theme="dark"] .reel.is-live .reel-nav:hover{background:#141d30}
html[data-site-theme="dark"] .reel-dot{background:rgba(255,255,255,.24)}
html[data-site-theme="dark"] .reel-dot[aria-current="true"]{background:var(--blue)}
html[data-site-theme="dark"] .tv-term{border-color:rgba(148,178,220,.16);box-shadow:0 24px 60px -24px rgba(0,0,0,.9)}
html[data-site-theme="dark"] .tv-shell{box-shadow:inset 0 0 0 1px rgba(148,178,220,.12)}
html[data-site-theme="dark"] .video-frame{background:var(--paper);box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 40px 110px -40px rgba(0,0,0,.9),0 0 140px -40px rgba(77,166,255,.35)}
html[data-site-theme="dark"] .vf-chrome{background:#0b111e}
html[data-site-theme="dark"] .vf-chrome::before{background:rgba(148,178,220,.2);box-shadow:15px 0 0 rgba(148,178,220,.2),30px 0 0 rgba(148,178,220,.2)}
html[data-site-theme="dark"] .vf-url{background:rgba(255,255,255,.04)}
html[data-site-theme="dark"] .vf-stage,html[data-site-theme="dark"] .vf-video{background:#0b111e}
/* The film is rendered on a light canvas, so on the dark page its poster was
   a flat grey slab - the one surface on the page that was not navy. While the
   play cover is up (film-captions.js adds .has-film-cover and drops it the
   moment the film starts) the poster is faded right back behind a navy scrim
   with a soft blue light in the middle, and the cover carries the play mark
   and the film's name: a dark window waiting to be played. Once it plays the
   film is shown as rendered, at full brightness. The light theme keeps the
   poster itself as the cover. */
.vf-cover-text{display:none}
html[data-site-theme="dark"] .vf-stage.has-film-cover .vf-video{opacity:.18;filter:saturate(.5)}
html[data-site-theme="dark"] .vf-stage.has-film-cover .vf-cover{gap:20px;background:
  radial-gradient(ellipse 30% 42% at 50% 46%,rgba(77,166,255,.2),transparent 72%),
  radial-gradient(ellipse 70% 90% at 50% 60%,rgba(99,102,241,.08),transparent 75%),
  linear-gradient(180deg,rgba(7,11,21,.6),rgba(7,11,21,.86))}
html[data-site-theme="dark"] .vf-stage.has-film-cover .vf-cover-mark{width:74px;height:74px;border-color:rgba(255,255,255,.35);box-shadow:0 0 0 10px rgba(77,166,255,.1),0 0 70px -6px rgba(77,166,255,.6),0 18px 40px rgba(0,0,0,.5)}
html[data-site-theme="dark"] .vf-stage.has-film-cover .vf-cover-mark svg{width:28px;height:28px;stroke:#041018;fill:#041018}
html[data-site-theme="dark"] .vf-stage.has-film-cover .vf-cover-text{display:flex;flex-direction:column;align-items:center;gap:8px}
.vf-cover-kicker{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-ink,#7cc0ff)}
.vf-cover-title{font-size:clamp(20px,2.1vw,28px);font-weight:800;letter-spacing:-.03em;line-height:1.2;color:var(--ink)}
@media(max-width:640px){
  html[data-site-theme="dark"] .vf-stage.has-film-cover .vf-cover{gap:12px}
  html[data-site-theme="dark"] .vf-stage.has-film-cover .vf-cover-mark{width:50px;height:50px;box-shadow:0 0 0 6px rgba(77,166,255,.1),0 0 40px -6px rgba(77,166,255,.6)}
  html[data-site-theme="dark"] .vf-stage.has-film-cover .vf-cover-mark svg{width:21px;height:21px}
  html[data-site-theme="dark"] .vf-stage.has-film-cover .vf-cover-text{display:none}
}
html[data-site-theme="dark"] .vf-caption{background:#0b111e}
html[data-site-theme="dark"] #film .vf-stage.has-film-cover .vf-cover{background:radial-gradient(circle at 50% 50%,rgba(5,8,15,.4),transparent 22%)}
html[data-site-theme="dark"] .film-points{background:#0b111e;border-top-color:rgba(148,178,220,.14)}
html[data-site-theme="dark"] .film-points span::before{background:var(--blue2,#4da6ff);box-shadow:0 0 0 3px rgba(77,166,255,.18),0 0 14px rgba(77,166,255,.5)}
html[data-site-theme="dark"] .vf-play{box-shadow:0 18px 50px rgba(0,0,0,.55)}
html[data-site-theme="dark"] .vf-play svg{fill:var(--on-blue,#041018)}
html[data-site-theme="dark"] .tile-ic{color:var(--blue2)}
/* ---- How it works: two cards ---------------------------------------------
   Both cards run the full width. Each carries a soft halo of its own, on top
   of the pool behind the group, so the two surfaces lift off the dot grid
   instead of sitting flat in it, plus a hairline of light along the top edge. */
.how-grid{grid-template-columns:minmax(0,1fr);max-width:none;scroll-margin-top:100px}
.how-step{min-width:0;overflow:hidden;padding:12px 12px 26px;border-color:var(--how-line,rgba(0,103,192,.16));
  box-shadow:var(--how-glow,0 1px 2px rgba(15,23,42,.05),0 26px 64px -30px rgba(0,103,192,.34),0 0 0 1px rgba(0,103,192,.05))}
.how-step::after{content:"";position:absolute;top:0;left:14%;right:14%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--how-sheen,rgba(0,103,192,.35)),transparent)}
.how-step .how-copy{padding:20px 20px 0;max-width:860px}
.how-step h3{font-size:clamp(24px,3vw,32px)}
.community-count{display:block;margin-top:8px;font-size:13px;color:var(--muted)}

/* The provider carousel. It never pauses - not on hover, not on a click - and
   has no pause button. Each mark wears its own brand colour; the marks whose
   brand is black-and-white (xAI, Cursor, OpenCode) take the ink colour, which
   is exactly that in each theme. */
.provider-defs{position:absolute;width:0;height:0;overflow:hidden}
.provider-carousel{margin:24px -12px 0;overflow:hidden;mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent)}
.provider-track{display:flex;width:max-content;animation:provider-scroll 42s linear infinite}
.provider-track ul{display:flex;align-items:center;gap:40px;padding:12px 20px;margin:0;list-style:none}
.provider-track li{display:flex;align-items:center;gap:10px;white-space:nowrap;color:var(--ink);font-size:16px;font-weight:700}
.provider-track svg{width:30px;height:30px;flex:none;color:var(--ink)}
.provider-track li[data-brand="claude"] svg{color:#d97757}
.provider-track li[data-brand="openai"] svg{color:#10a37f}
.provider-track li[data-brand="github"] svg{color:var(--brand-copilot,#8250df)}
.provider-track li[data-brand="gemini"] svg path{fill:url(#brand-gemini)}
.provider-track li[data-brand="kiro"] svg{color:var(--brand-kiro,#8a3ffc)}
.provider-track li[data-brand="deepseek"] svg{color:var(--brand-deepseek,#4d6bfe)}
@keyframes provider-scroll{to{transform:translateX(-50%)}}

/* ---- The canvas mock ------------------------------------------------------
   A copy of the real Project Canvas, drawn in HTML: the floating brand, the
   dock, three agent cards working in chat view, the file each one is editing
   (its header wearing that agent's colour and naming it, which is how the app
   shows the link), and the Ask bar with Beamy. Every size, colour and label
   below is read off project-canvas.html (src/canvas/canvas.css,
   chatProviderVariant.css, beamy.css, the light Office Blue and dark palettes
   of src/styles/themes.css), so the mock is authored at the app's own pixel
   sizes and `zoom` shrinks it the way a screenshot would. The one addition is
   the running connector between each pair, kept for motion. */
.cvm{--cvm-bg:#f3f6fa;--cvm-s0:#fff;--cvm-s1:#f7f9fc;--cvm-s2:#eaf1f8;--cvm-tx:#17253a;--cvm-tx2:#405b78;--cvm-tx3:#566d85;
  --cvm-blue:#0078d4;--cvm-line:rgba(16,44,77,.22);--cvm-hair:color-mix(in srgb,var(--cvm-tx) 10%,transparent);
  --cvm-chat-line:color-mix(in srgb,var(--cvm-tx) 17%,transparent);--cvm-shadow:0 18px 44px rgba(16,36,62,.2);
  --cvm-on-ink:#004e8a;--cvm-send-bg:#c0dbf2;--cvm-send-ink:#004e8a;--cvm-go-ink:#fff;--cvm-desk:#e8edf3;
  --cvm-tint-claude:color-mix(in srgb,#b98262 10%,var(--cvm-s1));--cvm-tint-codex:color-mix(in srgb,var(--cvm-tx) 6%,var(--cvm-s1));--cvm-tint-gemini:color-mix(in srgb,#4785ed 10%,var(--cvm-s1));
  zoom:.8;timeline-scope:--cvm-x;position:relative;margin:34px 11px 0;border:1px solid var(--cvm-line);border-radius:18px;overflow:hidden;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:13px;color:var(--cvm-tx);
  background:radial-gradient(circle,color-mix(in srgb,var(--cvm-tx) 15%,transparent) 1.5px,transparent 1.8px) 0 0/150px 150px,
    radial-gradient(circle,color-mix(in srgb,var(--cvm-tx) 7%,transparent) 1px,transparent 1.4px) 0 0/30px 30px,var(--cvm-bg)}
html[data-site-theme="dark"] .cvm{--cvm-bg:#070c12;--cvm-s0:#0c1219;--cvm-s1:#111922;--cvm-s2:#16212e;--cvm-tx:#dce7f0;--cvm-tx2:#8ca5bc;--cvm-tx3:#6f8396;
  --cvm-blue:#4da6ff;--cvm-line:rgba(255,255,255,.14);--cvm-shadow:0 18px 48px rgba(0,0,0,.55);
  --cvm-on-ink:#eff8ff;--cvm-send-bg:#203955;--cvm-send-ink:#eff8ff;--cvm-go-ink:#070c12;--cvm-desk:#0c1219}
.cvm svg{flex:none;width:16px;height:16px}
.cvm i,.cvm em{font-style:normal}
.cvm-defs{position:absolute;width:0!important;height:0!important;overflow:hidden}

/* The top of the window: the brand floating on the canvas, the dock pill, and
   the account corner. */
.cvm-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:16px 22px 0}
.cvm-brand{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:850;letter-spacing:-.01em;color:var(--cvm-tx);opacity:.72}
.cvm-brand b{font-weight:inherit;color:var(--cvm-blue)}
.cvm-brand svg{width:26px;height:26px}
.cvm-dock{display:flex;align-items:center;gap:4px;height:44px;padding:5px;border:1px solid var(--cvm-line);border-radius:999px;
  background:color-mix(in srgb,var(--cvm-s1) 92%,transparent);box-shadow:var(--cvm-shadow)}
/* The tab under the dock that pulls the page strip down. */
.cvm-dock{position:relative}
.cvm-dock::after{content:"";position:absolute;left:50%;top:100%;width:72px;height:11px;margin-top:-1px;transform:translateX(-50%);
  border:1px solid var(--cvm-line);border-top:0;border-radius:0 0 7px 7px;clip-path:polygon(0 0,100% 0,calc(100% - 9px) 100%,9px 100%);
  background:linear-gradient(var(--cvm-grip),var(--cvm-grip)) 50% 4px/16px 1px no-repeat,linear-gradient(var(--cvm-grip),var(--cvm-grip)) 50% 6.5px/16px 1px no-repeat,var(--cvm-s1);
  --cvm-grip:color-mix(in srgb,var(--cvm-tx) 38%,transparent)}
.cvm-dock>i{display:flex;align-items:center;gap:6px;height:32px;padding:0 11px;border:1px solid transparent;border-radius:999px;white-space:nowrap;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--cvm-tx2)}
.cvm-dock>i svg{width:16px;height:16px}
.cvm-dock>i svg.cvm-dd{width:14px;height:14px;margin-left:4px}
.cvm-dock>i.on{border-color:var(--cvm-blue);background:color-mix(in srgb,var(--cvm-blue) 11%,transparent);color:var(--cvm-on-ink)}
.cvm-dock>.cvm-proj{gap:8px;padding:0 10px 0 11px;font-size:12.5px;font-weight:600;color:var(--cvm-tx)}
.cvm-dock>.cvm-proj svg{width:13px;height:13px}
.cvm-dock>.cvm-split svg.cvm-dd{margin-left:14px}
.cvm-dock>.cvm-sep{width:1px;height:20px;padding:0;margin:0 4px;border:0;border-radius:0;background:var(--cvm-hair)}
.cvm-dock>.cvm-cap{flex-direction:column;align-items:stretch;justify-content:center;gap:5px;min-width:76px;height:auto;padding:0;margin:0 8px;border:0;font-size:10.5px;font-weight:600;letter-spacing:.02em;color:var(--cvm-tx3)}
.cvm-cap u{display:block;height:3px;border-radius:2px;text-decoration:none;background:linear-gradient(90deg,var(--cvm-blue) 25%,color-mix(in srgb,var(--cvm-tx) 12%,transparent) 25%)}
.cvm-me{display:flex;align-items:center;justify-content:flex-end;gap:22px;color:var(--cvm-tx2)}
.cvm-me svg{width:19px;height:19px}
.cvm-me b{display:grid;place-items:center;width:30px;height:30px;border-radius:7px;background:#0078d4;color:#fff;font-size:11px;font-weight:700}

/* The page of six: agents on the top row, their files under them. */
.cvm-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 50px;padding:22px 34px 0}
.cvm-pair{display:grid;grid-template-rows:auto 50px auto;min-width:0}
.cvm-card{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid var(--cvm-hair);border-radius:12px;background:var(--cvm-s1);box-shadow:var(--cvm-shadow)}
/* The resize grip in the corner of every card. */
.cvm-card::after{content:"";position:absolute;right:3px;bottom:3px;width:6px;height:6px;border:solid color-mix(in srgb,var(--cvm-tx2) 70%,transparent);border-width:0 1.5px 1.5px 0;border-bottom-right-radius:1.5px;pointer-events:none}
/* Working, from across the board: the app's cv-card-agent-working ring, a
   blue frame that swells out and settles back to the hairline. Only agents
   ring, and one at a time - Maya, then Alex, then Sam, 3s apart - so the
   board reads as three agents taking turns rather than six cards flashing.
   The file cards keep the plain hairline; the document is the one selected
   card, drawn with the app's accent outline. */
.cvm-agent{animation:cvm-ring 9s ease-out infinite}
.cvm-pair:nth-child(2) .cvm-agent{animation-delay:3s}
.cvm-pair:nth-child(3) .cvm-agent{animation-delay:6s}
.cvm-sel{border-color:color-mix(in srgb,var(--cvm-blue) 92%,#fff);box-shadow:var(--cvm-shadow),0 0 0 1px var(--cvm-blue)}
.cvm-head{display:flex;align-items:center;gap:9px;flex:none;height:40px;padding:0 7px 0 13px;overflow:hidden;background:var(--c);color:#fff;
  border-bottom:1px solid color-mix(in srgb,var(--c) 78%,#000)}
.cvm-head>svg,.cvm-head>.cvm-kind{width:15px;height:15px}
.cvm-tw{display:flex;flex-direction:column;justify-content:center;flex:1 1 auto;min-width:0;white-space:nowrap}
.cvm-tw b{overflow:hidden;text-overflow:ellipsis;font-size:12.5px;font-weight:700;line-height:13.5px}
.cvm-tw em{font-size:9.5px;font-weight:700;line-height:10.5px;letter-spacing:.05em;text-transform:uppercase}
.cvm-tw small{overflow:hidden;text-overflow:ellipsis;font-size:10px;font-weight:600;line-height:11.5px}
.cvm-file .cvm-tw{padding-top:2px}
.cvm-dtools{display:flex;align-items:center;gap:14px;flex:none;margin-right:6px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.42)}
.cvm-dtools svg{width:13px;height:13px}
.cvm-st{display:flex;align-items:center;gap:6px;flex:none;font-size:11px;line-height:1}
.cvm-dots{display:inline-flex;gap:3px}
.cvm-dots i{width:4px;height:4px;border-radius:50%;background:currentColor;animation:cvm-work 1.2s ease-in-out infinite}
.cvm-dots i:nth-child(2){animation-delay:.16s}
.cvm-dots i:nth-child(3){animation-delay:.32s}
.cvm-mode{display:grid;grid-template-columns:1fr 1fr;flex:none;width:56px;height:28px;padding:2px;border:1px solid rgba(255,255,255,.34);border-radius:999px;background:rgba(255,255,255,.14)}
.cvm-mode i{display:grid;place-items:center;border-radius:999px;font-size:13px;line-height:1}
.cvm-mode i.on{border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.22)}
.cvm-acts{display:flex;align-items:center;gap:2px;flex:none;padding-left:8px;border-left:1px solid rgba(255,255,255,.3)}
.cvm-acts svg{box-sizing:content-box;width:16px;height:16px;padding:6px}
.cvm-acts .cvm-del{margin-left:4px;padding-left:12px;border-left:1px solid rgba(255,255,255,.3)}

/* An agent card in chat view, drawn the way chatProviderVariant.css draws it:
   the provider line, the engineer's prompt in the vendor's tint, the run of
   steps as a ruled receipt, the typing dots, then the composer. */
.cvm-agent{height:376px}
.cvm-pv{display:flex;align-items:baseline;gap:8px;flex:none;margin:10px 12px 0;padding:10px 18px;border-bottom:1px solid var(--cvm-chat-line);font-size:13px;font-weight:600;line-height:1.5}
.cvm-pv small{font-size:11px;font-weight:400;color:var(--cvm-tx2)}
.cvm-chat{display:flex;flex-direction:column;gap:10px;flex:1 1 auto;min-height:0;overflow:hidden;padding:8px 25px 4px}
.cvm-you{align-self:flex-end;max-width:85%;margin:0;padding:9px 16px;border-radius:16px;background:var(--tint);font-size:14px;line-height:1.55}
.cvm-run{padding:3px 0 3px 12px;border-left:2px solid var(--cvm-chat-line);font-size:12.5px;color:var(--cvm-tx2)}
.cvm-fold{display:flex;align-items:center;gap:7px}
.cvm-fold i{width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:5px solid currentColor;opacity:.7}
.cvm-run ul{display:flex;flex-direction:column;gap:4px;margin:4px 0 2px 7px;padding:0 0 0 9px;list-style:none;border-left:1px solid color-mix(in srgb,var(--cvm-tx) 14%,transparent)}
.cvm-run li{font-size:11.5px;line-height:1.2;color:var(--cvm-tx);opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cvm-run li.now{animation:cvm-step 6s ease-out infinite both}
.cvm-typing{display:inline-flex;align-self:flex-start;align-items:center;gap:5px;padding:1px 2px}
.cvm-typing i{width:7px;height:7px;border-radius:50%;background:color-mix(in srgb,var(--cvm-blue) 70%,var(--cvm-tx2));opacity:.45;transform:scale(.9);animation:cvm-typing 1.3s ease-in-out infinite}
.cvm-typing i:nth-child(2){animation-delay:.18s}
.cvm-typing i:nth-child(3){animation-delay:.36s}
.cvm-comp{display:flex;flex-direction:column;gap:6px;flex:none;margin:0 12px 12px;padding:10px 13px 0;border-top:1px solid var(--cvm-hair)}
.cvm-in{display:flex;align-items:center;justify-content:space-between;height:49px;padding:10px 10px 10px 16px;border:1px solid var(--cvm-chat-line);border-radius:14px;background:var(--tint);font-size:14px;color:color-mix(in srgb,var(--cvm-tx2) 85%,transparent)}
.cvm-in i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid color-mix(in srgb,var(--cvm-blue) 45%,transparent);background:var(--cvm-send-bg);color:var(--cvm-send-ink)}
.cvm-in svg{width:15px;height:15px}
.cvm-chips{display:flex;justify-content:flex-end;gap:2px;padding:0 4px}
.cvm-chips i{display:flex;align-items:center;gap:6px;padding:1px 6px;font-size:11px;line-height:1.5;color:var(--cvm-tx2)}
.cvm-chips svg{width:12px;height:12px}

/* The running connector, agent to file. */
.cvm-wire{position:relative;justify-self:center;width:2px;height:100%;
  background:repeating-linear-gradient(to bottom,var(--c) 0 5px,transparent 5px 10px);animation:cvm-flow .7s linear infinite}
.cvm-wire::after{content:"";position:absolute;left:50%;bottom:0;margin-left:-6px;border:6px solid transparent;border-bottom:0;border-top:8px solid var(--c)}

/* The three files. One body height so the row lines up. */
.cvm-file{height:376px}
.cvm-deck,.cvm-calc,.cvm-docx{display:grid;flex:1 1 auto;min-height:0;background:var(--cvm-s1)}
.cvm-foot{display:flex;justify-content:space-between;gap:24px;align-items:center;height:21px;padding:0 10px;border-top:1px solid var(--cvm-hair);background:var(--cvm-s1);font-size:10.5px;color:var(--cvm-tx2);white-space:nowrap;overflow:hidden}
.cvm-foot span:last-child{overflow:hidden;text-overflow:ellipsis}
.cvm-deck{grid-template:auto minmax(0,1fr) auto/148px minmax(0,1fr)}
.cvm-ribbon{grid-column:1/-1;display:flex;justify-content:flex-end;gap:3px;padding:3px 5px;border-bottom:1px solid var(--cvm-hair)}
.cvm-ribbon i{display:flex;align-items:center;gap:6px;line-height:1;height:27px;padding:0 10px;border:1px solid var(--cvm-hair);border-radius:7px;background:var(--cvm-s2);font-size:12.5px;color:var(--cvm-tx)}
.cvm-ribbon i.pri{border-color:transparent;background:#0078d4;color:#fff}
.cvm-ribbon svg{width:13px;height:13px}
.cvm-rail{display:flex;flex-direction:column;gap:7px;padding:8px 8px 0;border-right:1px solid var(--cvm-hair);overflow:hidden}
.cvm-rail>span{flex:none;display:flex;gap:9px;padding:3px 3px 3px 10px;border:1px solid transparent;border-radius:8px}
.cvm-rail>span.on{border-color:color-mix(in srgb,var(--cvm-blue) 60%,transparent);background:color-mix(in srgb,var(--cvm-blue) 12%,transparent)}
.cvm-rail small{font-size:11px;color:var(--cvm-tx2)}
.cvm-rail i{flex:1;display:flex;flex-direction:column;justify-content:center;gap:4px;aspect-ratio:16/10;min-width:0;padding:0 7px;border-radius:4px;border:1px solid rgba(255,255,255,.12);background:#0b1626;color:#fff;font-size:4.5px;line-height:1.35;overflow:hidden}
.cvm-rail b{font-size:6.5px;line-height:1.1}
.cvm-rail u{display:block;height:1.5px;background:#75d6cd;text-decoration:none;transform-origin:left;animation:cvm-grow 6s ease-in-out infinite}
.cvm-rail>.cvm-new{justify-content:center;align-items:center;gap:6px;padding:7px 0;border:1px dashed var(--cvm-line);font-size:11.5px;color:var(--cvm-tx2)}
.cvm-new svg{width:13px;height:13px}
.cvm-stage{display:grid;place-items:center;padding:10px 12px;background:var(--cvm-s0);overflow:hidden}
.cvm-stage>.cvm-slide{grid-area:1/1}
.cvm-slide{display:flex;flex-direction:column;gap:5px;width:100%;aspect-ratio:16/9;padding:6% 7% 7%;background:#112742;color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.cvm-slide small{font-size:6px;letter-spacing:.02em;text-transform:uppercase;color:#75d6cd}
.cvm-slide strong{margin-top:8%;font-size:17px;line-height:1.2;font-weight:700;letter-spacing:-.01em}
.cvm-slide span{font-size:6.5px;line-height:1.4;color:#b7d2e8}
.cvm-slide u{display:block;height:2.5px;margin-top:auto;background:#75d6cd;text-decoration:none;transform-origin:left;animation:cvm-grow 3.5s ease-in-out infinite}
/* Maya walking the deck: every 3.5s - twice per spreadsheet fill - the
   selection in the rail moves to the next slide, the stage shows it with its
   rule drawing in, and the footer counts along, 1 / 3 to 3 / 3. The three
   slides share one navy frame (the first); only their contents change, so
   the stage never flashes white between them. The change is sequential: the
   old slide is gone (.4s) before the new one fades in (.4s), so two headlines
   never show at half strength together, and the rail selection and the
   counter move at the moment the new slide starts to show. The rule restarts
   in that same blank moment. Without motion the first slide simply stays
   selected. */
.cvm-slide+.cvm-slide{background:none;box-shadow:none}
.cvm-slide+.cvm-slide>*{opacity:0}
.cvm-slide>*{animation:cvm-show 10.5s ease-in-out infinite}
.cvm-slide>u{animation:cvm-show 10.5s ease-in-out infinite,cvm-grow 3.5s ease-in-out -3.1s infinite}
.cvm-slide:nth-child(2)>*{animation-delay:-7s}
.cvm-slide:nth-child(3)>*{animation-delay:-3.5s}
.cvm-slide:nth-child(2)>u{animation-delay:-7s,-3.1s}
.cvm-slide:nth-child(3)>u{animation-delay:-3.5s,-3.1s}
.cvm-rail>span:not(.cvm-new){animation:cvm-thumb 10.5s ease-in-out infinite}
.cvm-rail>span:nth-child(2){animation-delay:-7s}
.cvm-rail>span:nth-child(3){animation-delay:-3.5s}
.cvm-sn{display:inline-grid;font-weight:inherit}
.cvm-sn i{grid-area:1/1;animation:cvm-num 10.5s step-end infinite}
.cvm-sn i+i{opacity:0}
.cvm-sn i:nth-child(2){animation-delay:-7s}
.cvm-sn i:nth-child(3){animation-delay:-3.5s}
.cvm-deck .cvm-foot{grid-column:1/-1}
.cvm-calc{grid-template-rows:auto minmax(0,1fr) auto;background:color-mix(in srgb,var(--cvm-s0) 78%,transparent)}
.cvm-fx{display:flex;align-items:center;gap:6px;padding:2px 4px 2px 6px;border-bottom:1px solid var(--cvm-hair)}
.cvm-fx i{font:italic 700 11px/1 Georgia,serif;color:var(--cvm-tx2)}
.cvm-fx span{flex:1;height:20px;overflow:hidden;padding:0 8px;border:1px solid var(--cvm-hair);border-radius:7px;background:var(--cvm-s0);font:10.5px/19px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
/* The formula bar follows the active cell: a column of the six formulas,
   rolled up one line as the cell moves. */
.cvm-fx b{display:block;font-weight:400;transform:translateY(-95px);animation:cvm-fx 7s step-end infinite}
.cvm-sheet{position:relative;display:grid;grid-template-columns:40px repeat(6,76px);grid-auto-rows:24px;overflow:hidden;font-size:12.5px;line-height:1}
/* The active cell, stepping down the Rate column as each value lands. */
.cvm-sheet::after{content:"";position:absolute;left:268px;top:48px;width:77px;height:25px;box-shadow:inset 0 0 0 2px var(--cvm-blue);transform:translateY(120px);animation:cvm-cursor 7s step-end infinite}
.cvm-sheet span{display:flex;align-items:center;min-width:0;padding:0 6px;border-right:1px solid var(--cvm-hair);border-bottom:1px solid var(--cvm-hair);white-space:nowrap;overflow:hidden}
.cvm-sheet .h,.cvm-sheet .n{justify-content:center;background:color-mix(in srgb,var(--cvm-s2) 70%,transparent);font-size:10.5px;font-weight:700;color:var(--cvm-tx2)}
.cvm-sheet{grid-template-rows:24px}
/* Alex filling the Rate column. The whole column clears at once as the
   active cell returns to D2, then each value is written strictly top-down in
   step with the outline and the formula bar, so no cell is ever blank while
   one below it holds a value. All six run on one clock (no delays, which
   would put each cell on its own phase); each has its own keyframes. */
.cvm-sheet .new{animation:cvm-cell2 7s ease-out infinite both}
.cvm-sheet span:nth-child(26){animation-name:cvm-cell3}
.cvm-sheet span:nth-child(33){animation-name:cvm-cell4}
.cvm-sheet span:nth-child(40){animation-name:cvm-cell5}
.cvm-sheet span:nth-child(47){animation-name:cvm-cell6}
.cvm-sheet span:nth-child(54){animation-name:cvm-cell7}
.cvm-tabs{display:flex;align-items:center;gap:6px;line-height:1.3;height:28px;padding:0 4px;border-top:1px solid var(--cvm-hair);background:var(--cvm-s1)}
.cvm-tabs i{padding:2px 7px;border:1px solid var(--cvm-hair);border-radius:7px;background:var(--cvm-s0);font-size:11.5px;font-weight:600}
.cvm-tabs b{display:grid;place-items:center;width:22px;height:20px;border:1px solid var(--cvm-hair);border-radius:7px;font-size:11px;font-weight:400;color:var(--cvm-tx2)}
.cvm-docx{grid-template-rows:minmax(0,1fr) auto}
.cvm-desk{padding:12px 14px 0;overflow:hidden;background:var(--cvm-desk)}
.cvm-page{height:100%;padding:20px 50px 0;background:#fff;box-shadow:0 2px 14px rgba(0,0,0,.22);font-family:Calibri,Carlito,"Segoe UI",Arial,sans-serif;color:#16202a}
.cvm-page h4,.cvm-page h5{margin:0;font-family:"Calibri Light",Calibri,Carlito,"Segoe UI",Arial,sans-serif;font-weight:700;color:#2f5496}
.cvm-page h4{margin:12px 0 6px;font-size:21.3px;line-height:1.3}
.cvm-page h5{margin:16px 0 5px;font-size:17.3px;line-height:1.3}
.cvm-page p{margin:0 0 9px;font-size:14.7px;line-height:22px}
/* Sam typing the rest of the paragraph, a word at a time. --cvm-t counts the
   words written; each word shows once the count passes it, and the caret
   sits after the last one. Left still, the count is 10: every word shows. */
@property --cvm-t{syntax:"<number>";inherits:true;initial-value:10}
.cvm-typed{--cvm-t:10;animation:cvm-words 6s infinite}
.cvm-typed span{opacity:clamp(0,calc(var(--cvm-t) - var(--i)),1)}
.cvm-typed span::after{content:"";display:inline-block;width:1.5px;height:1.05em;margin:0 -2.5px 0 1px;vertical-align:-.15em;background:var(--c);
  opacity:calc(clamp(0,calc(var(--cvm-t) - var(--i)),1) * clamp(0,calc(var(--i) + 2 - var(--cvm-t)),1))}

/* The Ask bar at the foot of the window, and Beamy beside it. */
.cvm-ask{display:flex;align-items:center;justify-content:center;gap:10px;padding:30px 0 16px}
/* The usage strip in the bottom-left corner of the canvas, as it reads before
   an agent card is paired to a subscription. Only where the board has room. */
.cvm-usage{display:none}
@media(min-width:1100px){
  .cvm-usage{display:flex;align-items:center;gap:11px;width:46%;height:33px;margin:2px 0 0 12px;padding:0 15px;border:1px solid var(--cvm-line);border-radius:999px;
    background:color-mix(in srgb,var(--cvm-s1) 94%,transparent);box-shadow:0 8px 24px rgba(16,36,62,.1);font-size:11.5px;font-weight:600;letter-spacing:.07em;color:var(--cvm-tx2);white-space:nowrap}
  html[data-site-theme="dark"] .cvm-usage{box-shadow:0 8px 24px rgba(0,0,0,.45)}
  .cvm-uo{width:7px;height:7px;border:1.5px solid currentColor;border-radius:50%;opacity:.8}
  .cvm-usep{width:1px;height:16px;margin:0 2px;background:var(--cvm-hair)}
  .cvm-usage svg{width:14px;height:14px;color:var(--cvm-tx3)}
  .cvm-ask{padding-top:20px}
}
.cvm-hist{display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--cvm-line);border-radius:50%;background:var(--cvm-s1);color:var(--cvm-tx2);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.cvm-hist svg{width:13px;height:13px}
.cvm-askbar{display:flex;align-items:center;gap:6px;width:350px;height:47px;padding:7px 8px 7px 16px;border:1px solid color-mix(in srgb,var(--cvm-blue) 50%,transparent);border-radius:999px;background:var(--cvm-s1);box-shadow:0 8px 22px rgba(16,36,62,.18);color:var(--cvm-tx3)}
html[data-site-theme="dark"] .cvm-askbar{box-shadow:0 8px 22px rgba(0,0,0,.5)}
.cvm-askbar>span{flex:1;padding-left:6px;font-size:14px;color:var(--cvm-tx2)}
.cvm-askbar svg{width:15px;height:15px}
.cvm-askbar .cvm-q{box-sizing:content-box;padding:6px}
.cvm-voice,.cvm-go{display:grid;place-items:center;width:30px;height:30px;border-radius:50%}
.cvm-voice{border:1px solid color-mix(in srgb,var(--cvm-blue) 45%,transparent);color:var(--cvm-tx2)}
.cvm-voice svg{width:18px;height:18px}
.cvm-go{background:var(--cvm-blue);color:var(--cvm-go-ink)}
.cvm-ask .cvm-beamy{width:46px;height:46px;margin-left:12px;--beamy-mark-plate:transparent}

@keyframes cvm-work{0%,80%,100%{opacity:.35}40%{opacity:1}}
@keyframes cvm-typing{0%,58%,100%{opacity:.45;transform:scale(.9)}29%{opacity:1;transform:scale(1.18)}}
@keyframes cvm-step{0%,12%{opacity:0;transform:translateY(-3px)}22%,100%{opacity:.85;transform:none}}
@keyframes cvm-flow{to{background-position:0 10px}}
@keyframes cvm-grow{0%,10%{transform:scaleX(0)}45%,100%{transform:scaleX(1)}}
@keyframes cvm-words{0%{--cvm-t:0;animation-timing-function:steps(10,end)}60%,100%{--cvm-t:10}}
@keyframes cvm-ring{0%{border-color:color-mix(in srgb,var(--cvm-blue) 55%,var(--cvm-line));box-shadow:var(--cvm-shadow),0 0 0 0 color-mix(in srgb,var(--cvm-blue) 45%,transparent)}
  15%{box-shadow:var(--cvm-shadow),0 0 0 14px color-mix(in srgb,var(--cvm-blue) 0%,transparent)}
  24%,100%{border-color:var(--cvm-hair);box-shadow:var(--cvm-shadow),0 0 0 0 color-mix(in srgb,var(--cvm-blue) 0%,transparent)}}
/* Each slide owns a third of the 10.5s loop, counted from the moment the
   slide before it starts to leave: 0-3.8% that one fades out, 3.8-7.6% this
   one fades in, and at 33.3% it starts to leave in turn. */
@keyframes cvm-show{0%,3.8%{opacity:0}7.6%,33.3%{opacity:1}37.1%,100%{opacity:0}}
@keyframes cvm-num{0%{opacity:0}3.8%{opacity:1}37.1%,100%{opacity:0}}
@keyframes cvm-thumb{0%,3.8%{border-color:transparent;background-color:transparent}
  5%,36%{border-color:color-mix(in srgb,var(--cvm-blue) 60%,transparent);background-color:color-mix(in srgb,var(--cvm-blue) 12%,transparent)}
  37.1%,100%{border-color:transparent;background-color:transparent}}
@keyframes cvm-cursor{0%{transform:none}13%{transform:translateY(24px)}18%{transform:translateY(48px)}23%{transform:translateY(72px)}28%{transform:translateY(96px)}33%{transform:translateY(120px)}94%,100%{transform:none}}
@keyframes cvm-fx{0%{transform:none}13%{transform:translateY(-19px)}18%{transform:translateY(-38px)}23%{transform:translateY(-57px)}28%{transform:translateY(-76px)}33%{transform:translateY(-95px)}94%,100%{transform:none}}
@keyframes cvm-pager{to{transform:translateX(40px)}}
@keyframes cvm-caret{50%{opacity:0}}
/* Cell Dn is written as the outline reaches it (7, 13, 18, 23, 28, 33%),
   flashes, settles to a tint, and all six clear together at 94-98% while the
   outline jumps back to D2 for the next pass. */
@keyframes cvm-cell2{0%,7%{color:transparent;background:transparent}11%,33%{color:inherit;background:color-mix(in srgb,var(--c) 35%,transparent)}57%,94%{color:inherit;background:color-mix(in srgb,var(--c) 12%,transparent)}98%,100%{color:transparent;background:transparent}}
@keyframes cvm-cell3{0%,13%{color:transparent;background:transparent}17%,39%{color:inherit;background:color-mix(in srgb,var(--c) 35%,transparent)}63%,94%{color:inherit;background:color-mix(in srgb,var(--c) 12%,transparent)}98%,100%{color:transparent;background:transparent}}
@keyframes cvm-cell4{0%,18%{color:transparent;background:transparent}22%,44%{color:inherit;background:color-mix(in srgb,var(--c) 35%,transparent)}68%,94%{color:inherit;background:color-mix(in srgb,var(--c) 12%,transparent)}98%,100%{color:transparent;background:transparent}}
@keyframes cvm-cell5{0%,23%{color:transparent;background:transparent}27%,49%{color:inherit;background:color-mix(in srgb,var(--c) 35%,transparent)}73%,94%{color:inherit;background:color-mix(in srgb,var(--c) 12%,transparent)}98%,100%{color:transparent;background:transparent}}
@keyframes cvm-cell6{0%,28%{color:transparent;background:transparent}32%,54%{color:inherit;background:color-mix(in srgb,var(--c) 35%,transparent)}78%,94%{color:inherit;background:color-mix(in srgb,var(--c) 12%,transparent)}98%,100%{color:transparent;background:transparent}}
@keyframes cvm-cell7{0%,33%{color:transparent;background:transparent}37%,59%{color:inherit;background:color-mix(in srgb,var(--c) 35%,transparent)}83%,94%{color:inherit;background:color-mix(in srgb,var(--c) 12%,transparent)}98%,100%{color:transparent;background:transparent}}

/* The swipe pager: three dots under the board, the lit one riding the
   board's own scroll position. Shown only where the board scrolls. */
.cvm-board{scroll-timeline:--cvm-x x}
.cvm-pager{display:none}

/* Wide windows: the how-it-works pair breaks out of the text column so the
   mock is drawn near the app's own size and its type stays readable. */
@media(min-width:1440px){.how-grid{margin-inline:calc((100% - min(100vw - 96px,1400px)) / 2)}}
/* From 1600 the grid leaves the floating-card gutters room (site-canvas-float.js):
   180px each side at 1600, the full 1400px from 1760. Below 1600 the mock needs
   the extra width more than the gutters need cards. */
@media(min-width:1600px){.how-grid{margin-inline:calc((100% - max(1160px,min(100vw - 360px,1400px))) / 2)}}
@media(min-width:1680px){.cvm{zoom:.88}}
/* Below that the three cards stay across at .78; the dock sheds what the
   app's own dock tucks into More first, and each header folds a little. */
@media(max-width:1439px){
  .cvm{zoom:.78}
  .cvm-dock>.cvm-x{display:none}
  .cvm-acts svg:is(:nth-child(2),:nth-child(4)){display:none}
}
/* Below 1180px the three pairs do not fit across, so the board becomes what
   the canvas is: a surface you swipe across, one pair at a time. */
@media(max-width:1179px){
  .cvm{zoom:.8}
  .cvm-me svg{display:none}
  .cvm-dock>i:not(.on):not(.cvm-proj):not(.cvm-sep):not(.cvm-cap){font-size:0;gap:0}
  .cvm-dock>.cvm-cap{min-width:0;margin:0 2px 0 6px}
  .cvm-board{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(84%,440px);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding:22px 22px 40px;gap:0 26px}
  .cvm-board::-webkit-scrollbar{display:none}
  .cvm-pair{scroll-snap-align:center}
  .cvm-acts svg:not(:first-child):not(.cvm-del){display:none}
  .cvm-dtools{display:none}
  .cvm-pager{position:relative;display:flex;gap:10px;width:max-content;margin:-18px auto 0}
  .cvm-pager i{width:10px;height:10px;border-radius:50%;background:color-mix(in srgb,var(--cvm-tx) 22%,transparent)}
  .cvm-pager b{position:absolute;left:0;top:0;width:10px;height:10px;border-radius:50%;background:var(--cvm-blue);animation:cvm-pager linear both;animation-timeline:--cvm-x}
  .cvm-ask{padding-top:22px}
}
@media(max-width:900px){
  .cvm-top{grid-template-columns:auto 1fr;padding:14px 16px 0}
  .cvm-board{grid-auto-columns:90%}
  .cvm-head{gap:7px}
  .cvm-me{display:none}
  .cvm-dock{justify-self:end}
  .cvm-dock>i:is(.cvm-x,.cvm-cap,.cvm-sep,.cvm-split),.cvm-dock>i.on+i{display:none}
  .cvm-dock>i:not(.on){font-size:0;gap:0}
  .cvm-askbar{width:auto;flex:1;max-width:350px}
  .cvm-ask{padding:22px 16px 16px}
  .cvm-ask .cvm-beamy{display:none}
}
@media(max-width:600px){
  .cvm-dock>i:not(.on):not(.cvm-proj):not(:last-child){display:none}
  .cvm-head{gap:6px;padding:0 5px 0 10px}
}
/* On a phone the prompt wraps to more lines as the card narrows, and how many
   depends on the visitor's fonts, so the agent card sizes to its chat there:
   the typing dots always sit inside it with no dead band under them. Each
   pair keeps its own height (align-content:start), so a pair whose prompt
   wraps less is not stretched to match its neighbour. */
@media(max-width:400px){
  .cvm-agent{height:auto}
  .cvm-chat{flex:none;padding-bottom:10px}
  .cvm-pair{align-content:start}
}
@media(max-width:340px){.cvm-mode{display:none}}
@media(prefers-reduced-motion:reduce){.cvm-pager b{display:none}}

/* Three short beats under the mock: the whole loop in a line each. */
.how-beats{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:22px 0 0;padding:0 20px}
.how-beats li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:2px;align-items:start;align-content:start}
.how-beats svg{grid-row:span 2;width:34px;height:34px;padding:8px;border-radius:10px;color:var(--blue-ink);background:color-mix(in srgb,var(--blue) 10%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--blue) 18%,transparent)}
.how-beats b{font-size:14.5px;font-weight:780;letter-spacing:-.01em}
.how-beats span{font-size:13.5px;line-height:1.45;color:var(--muted)}

@media(max-width:900px){
  .how-beats{grid-template-columns:minmax(0,1fr);gap:14px}
}
@media(max-width:760px){
  .how-step .how-copy{padding-inline:12px}
  .cvm{margin-inline:0}
  .how-beats{padding:0 12px}
}
@media(prefers-reduced-motion:reduce){
  .provider-track{animation:none;transform:none;width:100%}
  .provider-carousel{margin-inline:20px;mask-image:none}
  .provider-track ul{flex-wrap:wrap;gap:20px;padding:12px 0}
  .provider-track ul[aria-hidden=true]{display:none}
  .cvm *,.cvm *::before,.cvm *::after{animation:none!important}
}

[data-discord-members][hidden]{display:none}

/* Finish the existing canvas story with a more deliberate editorial rhythm.
   All surfaces use the site's tokens, including the saved dark preference. */
.section { padding-block: clamp(64px, 7vw, 104px); }
.section-head { margin-bottom: clamp(30px, 4vw, 52px); }
.section-head h2 { line-height: 1.1; }
.section-head::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin: 22px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
}
@media (prefers-reduced-motion: no-preference) {
  html.atm-motion .section-head.is-in::after {
    animation: home-rule-in 0.65s var(--site-ease) both;
  }
}
@keyframes home-rule-in {
  from { transform: scaleX(0.35); opacity: 0.4; }
  to { transform: scaleX(1); opacity: 1; }
}
.ih-tagline { font-weight: 550; line-height: 1.55; }
.ih-stage .hero-actions { gap: 12px 24px; }
.intro-hero .btn.primary {
  box-shadow: 0 2px 4px rgba(0, 67, 124, 0.12), var(--site-primary-shadow);
}
.how-grid { gap: 28px; }
.how-step { overflow: hidden; }
.how-step .how-copy { padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 32px) 0; }
.how-copy h3 { font-size: clamp(21px, 2.2vw, 28px); line-height: 1.2; }
.how-copy p { max-width: 70ch; font-size: 16px; line-height: 1.65; }
.how-beats { padding-block: 10px 14px; }
.reel-body { padding: 20px 24px 22px; }
.reel-name { font-size: 18px; line-height: 1.4; }
.home-modules-head { padding-top: 30px; border-top: 1px solid var(--line); }
.home-module-copy { padding: clamp(24px, 3vw, 40px); gap: 12px; }
.home-module-status {
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--blue) 20%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--blue) 7%, transparent);
}
.home-module img { transition: transform 0.4s var(--site-ease); }
.home-cta {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--blue) 24%, var(--atm-card-line));
  background: radial-gradient(ellipse at 50% 0, var(--atm-glow-a), transparent 65%), var(--atm-card);
}
.home-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .home-module:hover img { transform: scale(1.025); }
}
@media (max-width: 760px) {
  .how-step .how-copy { padding: 22px 18px 0; }
  .how-copy h3 { font-size: 21px; }
  .how-copy p { font-size: 15px; }
  .how-beats { padding-inline: 18px; }
  .reel-body { padding: 16px 18px 18px; }
  .home-modules-head { padding-top: 24px; }
  .home-module-copy { padding: 24px; }
  .home-cta { padding-block: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-module img { transition: none; }
  .home-module:hover img { transform: none; }
}