/* ============================================================================
   uxjo 2.0 — marketing sections.
   Built from the existing uxjo/wa surfaces: the .bwin product window, the
   bento block grid, the flow diagram, the ink chapter band, the crew.
   New here: depth + motion staging only (.jg 3D graph, .mark spark, docking
   signal chips). Everything else is the system already in production.
   Mobile-first.
   ============================================================================ */

/* ============================ HERO ============================ */
.hero{padding-block:clamp(2rem,5vw,4rem) clamp(2.5rem,6vw,5rem);position:relative;overflow:hidden}
.hero-in{display:grid;gap:2.25rem;align-items:center}
.hero-copy{display:grid;gap:1.4rem;justify-items:start;max-width:34rem}
.kicker{display:inline-flex;align-items:center;gap:.55rem;font-weight:var(--fw-bold);color:var(--fg-1);font-size:var(--fs-base)}
.kicker .spark{color:var(--coral);font-size:1.15em;line-height:1}
.hero h1{font-size:clamp(2.35rem,1.5rem + 2.9vw,3.85rem);font-weight:var(--fw-black);letter-spacing:var(--track-mega);line-height:1.02;color:var(--fg-1);text-wrap:balance}
/* The DS reserves coral for the logo spark and forbids it as a UI colour, and
   as text it was 2.31:1 on canvas. The emphasis is now an ink word on a coral
   rule: same brand hit, 15:1, and it reads as deliberate editorial stress. */
.hero h1 em{font-style:normal;color:var(--fg-1);
  background:linear-gradient(var(--coral),var(--coral)) 0 88%/100% .085em no-repeat;
  padding-bottom:.02em}
.hero .sub{font-size:clamp(1.0625rem,.98rem + .45vw,1.25rem);color:var(--fg-2);line-height:1.55;max-width:46ch}
.hero .note{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .7rem;font-size:var(--fs-sm);color:var(--fg-3)}
.hero .note span{display:inline-flex;align-items:center;gap:.7rem}
.hero .note span:not(:last-child)::after{content:"";width:3px;height:3px;border-radius:50%;background:var(--border-3)}
@media (min-width:940px){.hero-in{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:3.5rem}.hero-copy{max-width:30rem}}
@media (min-width:1200px){.hero-copy{max-width:34rem}}

/* ---- product window (the .bwin language, resized for a split hero) ---- */
.bwin{background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--r-xl);box-shadow:var(--sh-xl);overflow:hidden;position:relative;z-index:2}
.bwin-bar{display:flex;align-items:center;gap:.8rem;padding:.7rem .9rem;border-bottom:1px solid var(--border-1);background:var(--neutral-50)}
.bwin-bar .dots{display:flex;gap:6px}
.bwin-bar .dots i{width:10px;height:10px;border-radius:50%}
.bwin-bar .url{flex:1;max-width:260px;margin:0 auto;background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--r-pill);padding:.3rem .8rem;font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--fg-3);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bw-head{display:flex;align-items:center;gap:.6rem;padding:.65rem .9rem;border-bottom:1px solid var(--border-1)}
.bw-head .a{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-weight:700;font-size:11px;background:linear-gradient(135deg,#FF9F45,#F2514D)}
.bw-head .m{flex:1;min-width:0}
.bw-head .m b{display:block;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--fg-1)}
.bw-head .m small{display:flex;align-items:center;gap:.35rem;font-size:var(--fs-2xs);color:var(--fg-3)}
.bw-head .m small i{width:6px;height:6px;border-radius:50%;background:var(--grass);flex:none}
.bw-thread{background-color:var(--wa-bg);background-image:var(--wa-paper);background-size:240px 240px;background-repeat:repeat;padding:1rem;display:flex;flex-direction:column;gap:9px;min-height:340px}
.bub{max-width:86%;padding:.55rem .75rem;border-radius:12px;font-size:var(--fs-sm);line-height:1.45;color:#E9EDF0;position:relative}
.bub.in{background:#1F2C33;border-bottom-left-radius:4px;align-self:flex-start}
.bub.out{background:#075E54;background:linear-gradient(180deg,#0d7a68,#075E54);border-bottom-right-radius:4px;align-self:flex-end;color:#fff}
.bub .tm{display:block;font-size:var(--fs-2xs);opacity:.6;margin-top:.2rem}
.typing{align-self:flex-start;display:inline-flex;gap:4px;padding:.6rem .8rem;background:#1F2C33;border-radius:12px;border-bottom-left-radius:4px}
.typing i{width:6px;height:6px;border-radius:50%;background:#7E8A92;animation:uxPulse 1.2s var(--ease-inout) infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
.appr{align-self:stretch;border:1px solid rgba(255,255,255,.16);border-left:3px solid var(--violet);background:rgba(255,255,255,.07);border-radius:12px;padding:.7rem .75rem;display:grid;gap:.5rem}
.appr .ttl{display:flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--violet-soft)}
.appr .ttl .sp{color:var(--coral)}
.appr p{font-size:var(--fs-sm);color:#fff;line-height:1.4}
.appr .acts{display:flex;gap:.4rem;flex-wrap:wrap}
.appr .acts b{font-size:var(--fs-2xs);font-weight:700;padding:.35rem .65rem;border-radius:var(--r-pill)}
.appr .ok{background:#fff;color:var(--ink)}
.appr .ed{border:1px solid rgba(255,255,255,.28);color:#D6DEE6}
.miniapp{align-self:flex-end;width:min(84%,270px);background:var(--bg-surface);border-radius:12px;overflow:hidden;box-shadow:var(--sh-md)}
.miniapp-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem .7rem;border-bottom:1px solid var(--border-1);font-size:var(--fs-xs);color:var(--fg-1);font-weight:var(--fw-bold)}
.miniapp-body{padding:.6rem .7rem;display:grid;gap:.3rem;font-size:var(--fs-sm);color:var(--fg-2)}
.miniapp-line{display:flex;justify-content:space-between;gap:1rem}
.miniapp-line.total{border-top:1px dashed var(--border-2);padding-top:.35rem;margin-top:.2rem;font-weight:var(--fw-bold);color:var(--fg-1)}
.bw-comp{display:flex;align-items:center;gap:.5rem;padding:.55rem .8rem;border-top:1px solid var(--border-1);background:var(--bg-surface)}
.bw-comp .fld{flex:1;height:34px;border-radius:var(--r-pill);background:var(--neutral-100);display:flex;align-items:center;padding:0 .8rem;font-size:var(--fs-xs);color:var(--fg-4)}
.bw-comp .snd{width:34px;height:34px;border-radius:50%;background:var(--grass);display:grid;place-items:center;color:#08381f;flex:none}

/* ---- signal chips: actors in the hero sequence, not floating labels ---- */
.hstage{position:relative}
.sigs{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1rem}
.sig{display:flex;align-items:center;gap:.5rem;background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--r-md);padding:.45rem .7rem;box-shadow:var(--sh-md);font-size:var(--fs-2xs);color:var(--fg-3);line-height:1.3;white-space:nowrap}
.sig b{display:block;color:var(--fg-1);font-size:var(--fs-xs);font-weight:var(--fw-bold)}
.sig .bi{width:18px;height:18px;flex:none;color:var(--c)}
.sig .cd{width:8px;height:8px;border-radius:50%;flex:none}
@media (min-width:940px){
  .sigs{display:contents}
  .sig{position:absolute;z-index:3}
  .s1{top:-1.25rem;left:-1.5rem}
  .s4{top:36%;right:-2rem}
  .s2{bottom:6%;left:-2.25rem}
}

/* ---- narrated hero loop ---------------------------------------------------
   Default state is fully visible so the story reads with JS off or motion
   reduced. `.play` is added only when we are allowed to animate. */
.beat{display:none}
.cursor{display:none}
@media (prefers-reduced-motion:no-preference){
  .hstage.play .beat{display:flex;align-items:center;gap:.55rem;justify-content:center;margin-top:1rem;font-size:var(--fs-sm);color:var(--fg-3)}
  .hstage.play .beat i{width:7px;height:7px;border-radius:2px;background:var(--coral);transform:rotate(12deg);flex:none;transition:background var(--t-base)}
  .hstage.play .beat b{color:var(--fg-1);font-weight:var(--fw-semibold);transition:opacity 260ms var(--ease-out)}
  .hstage.play .beat b.swap{opacity:0}

  .hstage.play .bw-thread>[data-seq]{opacity:0;transform:translateY(10px) scale(.985);transition:opacity 420ms var(--ease-out),transform 480ms var(--ease-out)}
  .hstage.play .bw-thread>[data-seq].on{opacity:1;transform:none}

  .hstage.play .attr-tag{opacity:0;transform:scale(.8);transition:opacity 300ms var(--ease-out),transform 380ms var(--ease-snap)}
  .hstage.play .attr-tag.on{opacity:1;transform:none;animation:uxRing 900ms var(--ease-out)}

  .hstage.play .sig{opacity:.32;filter:saturate(.25);transition:opacity 420ms var(--ease-out),filter 420ms,transform 480ms var(--ease-out),box-shadow 420ms}
  .hstage.play .sig.on{opacity:1;filter:none;transform:translateY(-3px);box-shadow:var(--sh-lg)}

  .hstage.play .cursor{display:block;position:absolute;z-index:6;left:0;top:0;width:19px;height:19px;color:var(--fg-1);opacity:0;pointer-events:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));transition:opacity 240ms,transform 620ms var(--ease-out)}
  .hstage.play .cursor svg{width:100%;height:100%}
  .hstage.play .cursor.on{opacity:1}
  .hstage.play .cursor.press{transform:scale(.82) translate(1px,1px)}
  .hstage.play .appr .ok{transition:transform 180ms var(--ease-snap),box-shadow 180ms}
  .hstage.play .appr.hit .ok{transform:scale(.94);box-shadow:0 0 0 3px var(--grass-soft)}
}
@keyframes uxRing{0%{box-shadow:0 0 0 0 rgba(255,125,122,.55)}100%{box-shadow:0 0 0 14px rgba(255,125,122,0)}}

/* the review that lands after the sale, proving the loop closes on Google */
.rev{position:absolute;z-index:4;left:50%;bottom:-.5rem;transform:translateX(-50%);display:none;align-items:center;gap:.6rem;background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--r-md);padding:.5rem .75rem;box-shadow:var(--sh-lg);white-space:nowrap}
.rev .bi{width:18px;height:18px;flex:none}
.rev b{display:block;font-size:var(--fs-xs);color:var(--fg-1);font-weight:var(--fw-bold)}
.rev small{font-size:var(--fs-2xs);color:var(--fg-3)}
.rev .st{color:var(--sun-deep);font-size:var(--fs-2xs);letter-spacing:.06em}
@media (prefers-reduced-motion:no-preference){
  .hstage.play .rev{display:flex;opacity:0;transform:translateX(-50%) translateY(12px);transition:opacity 460ms var(--ease-out),transform 560ms var(--ease-out)}
  .hstage.play .rev.on{opacity:1;transform:translateX(-50%) translateY(0)}
}

/* ============================ CHANNEL BOARD ============================ */
.chan-grid{display:grid;gap:1rem}
@media (min-width:640px){.chan-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.chan-grid{grid-template-columns:repeat(4,1fr)}}
.chan{display:flex;flex-direction:column;gap:.9rem;padding:1.4rem;border-radius:var(--r-2xl);background:var(--bg-surface);border:1px solid var(--border-1);transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base),border-color var(--t-base)}
.chan:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--c)}
.chan-top{display:flex;align-items:center;gap:.65rem}
.chan .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--cs);color:var(--cd);flex:none}
.chan h3{flex:1;font-size:var(--fs-lg);font-weight:var(--fw-extra);color:var(--fg-1);letter-spacing:var(--track-tight)}
.chan .lvl{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.06em;text-transform:uppercase;padding:.25rem .55rem;border-radius:var(--r-pill);background:var(--neutral-100);color:var(--fg-3);white-space:nowrap}
/* the badge is accented in the channel's own hue. It used to carry a .full
   tier that promoted two channels and muted four, which is the read-vs-act
   split encoded as a class. */
.chan .lvl{background:var(--cs);color:var(--cd)}
.chan ul{display:grid;gap:.5rem}
.chan li{position:relative;padding-left:1.15rem;font-size:var(--fs-sm);color:var(--fg-2);line-height:1.5}
.chan li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:2px;background:var(--c);transform:rotate(12deg)}
.honest{margin-top:1.5rem;display:flex;gap:1rem;align-items:flex-start;background:var(--bg-surface);border:1px solid var(--border-1);border-radius:var(--r-xl);padding:1.1rem 1.25rem;max-width:74ch}
.honest svg{flex:none;width:46px;height:58px}
.honest p{font-size:var(--fs-base);color:var(--fg-2);line-height:1.55}
.honest b{color:var(--fg-1)}

/* ============================ JOURNEY GRAPH (3D) ============================ */
.jg-scene{position:relative;margin-top:clamp(1.5rem,4vw,2.5rem)}
.jg-world{display:grid;gap:.1rem}
.jg-col{display:grid;gap:.6rem}
.jg-lbl{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-4);margin-bottom:.1rem}
.jg-node{display:flex;align-items:center;gap:.65rem;background:var(--bg-surface);border:1px solid var(--border-1);border-radius:var(--r-md);padding:.7rem .85rem;box-shadow:var(--sh-sm);transition:border-color var(--t-base),box-shadow var(--t-base),transform var(--t-base) var(--ease-out)}
.jg-node .cd{width:10px;height:10px;border-radius:3px;background:var(--c,var(--sky));transform:rotate(12deg);flex:none}
.jg-node b{display:block;font-size:var(--fs-sm);color:var(--fg-1);font-weight:var(--fw-bold)}
.jg-node small{display:block;font-size:var(--fs-2xs);color:var(--fg-3)}
.jg-node.firing{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 18%,transparent),var(--sh-md)}
@keyframes uxFire{0%,3%{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 20%,transparent),var(--sh-md)}14%,100%{border-color:var(--border-1);box-shadow:var(--sh-sm)}}
@media (prefers-reduced-motion:no-preference){[data-ticker] .jg-node{animation:uxFire 7.6s var(--ease-inout) infinite;animation-delay:calc(var(--i,0) * 1.9s)}}
.jg-hub{background:var(--ink);border-radius:var(--r-xl);padding:1.1rem;display:grid;gap:.65rem;box-shadow:var(--sh-lg);color:#fff}
.jg-hub .who{display:flex;align-items:center;gap:.6rem}
.jg-hub .av{width:38px;height:38px;border-radius:50%;background:var(--coral-soft);display:grid;place-items:center;flex:none;overflow:hidden}
.jg-hub .av svg{width:34px;height:34px}
.jg-hub .who b{color:#fff;font-size:var(--fs-base);font-weight:var(--fw-bold);display:block}
.jg-hub .who small{display:block;color:var(--fg-on-ink-3);font-size:var(--fs-2xs)}
.jg-tags{display:flex;flex-wrap:wrap;gap:.3rem}
.jg-tags span{font-size:var(--fs-2xs);padding:.22rem .5rem;border-radius:var(--r-pill);background:rgba(255,255,255,.1);color:var(--fg-on-ink-2)}
.jg-rail{width:2px;justify-self:center;height:24px;background:var(--border-3);margin-block:.35rem}
@media (min-width:1040px){
  .jg-scene{perspective:1600px;perspective-origin:50% 44%;min-height:500px;display:grid;place-items:center}
  .jg-world{position:relative;width:100%;max-width:1000px;height:460px;transform-style:preserve-3d;transform:rotateX(var(--gpitch,4deg)) rotateY(var(--gyaw,0deg));transition:transform 120ms linear}
  .jg-col{position:absolute;transform-style:preserve-3d}
  .jg-in{left:0;top:50%;width:272px;transform:translateY(-50%) translateZ(-130px)}
  .jg-mid{left:50%;top:50%;width:288px;transform:translate(-50%,-50%) translateZ(40px)}
  .jg-out{right:0;top:50%;width:272px;transform:translateY(-50%) translateZ(-60px)}
  .jg-rail{display:none}
  .jg-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:translateZ(-60px);pointer-events:none}
  .jg-node:hover{transform:translateZ(26px)}
  @keyframes uxYaw{from{transform:rotateX(12deg) rotateY(-17deg)}to{transform:rotateX(-6deg) rotateY(17deg)}}
  @supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
    .jg-world{animation:uxYaw both linear;animation-timeline:view();animation-range:cover}
  }}
}
@media (max-width:1039px){.jg-wires{display:none}}

/* ============================ BENTO ============================ */
.bento{display:grid;gap:1rem}
@media (min-width:600px){.bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:196px}}
@media (min-width:1000px){.bento{grid-template-columns:repeat(4,1fr);gap:1.1rem}}
.bt{border-radius:var(--r-2xl);padding:1.5rem;overflow:hidden;position:relative;display:flex;flex-direction:column;transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base)}
.bt:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.bt.light{background:var(--bg-surface);border:1px solid var(--border-1)}
.bt.ink{background:var(--ink);color:#fff}
.bt h3{font-size:var(--fs-2xl);font-weight:var(--fw-extra);letter-spacing:-.012em;color:var(--fg-1)}
.bt.ink h3{color:#fff}
.bt p{font-size:var(--fs-base);margin-top:.4rem;line-height:1.45;color:var(--fg-3)}
.bt.ink p{color:var(--fg-on-ink-2)}
.bt .vis{margin-top:auto}
.bt .bdot{width:44px;height:44px;border-radius:var(--r-md);display:grid;place-items:center;margin-bottom:auto;justify-self:start;align-self:start;flex:none}
.bt svg.crew{width:88px;height:110px;margin-bottom:auto}
/* Below 600px the grid has no fixed row height, so the auto margins that space
   the icon from the title on desktop collapse to zero and the two touch.
   Give them a real gap there. */
@media (max-width:599px){
  .bt{padding:1.25rem}
  .bt .bdot,.bt svg.crew{margin-bottom:1.15rem}
  .bt .vis{margin-top:0}
}
@media (min-width:600px){.bt.wide{grid-column:span 2}.bt.tall{grid-row:span 2}}

/* ============================ FLOW ============================ */
.who-row{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:1.25rem}
.who-chip{display:inline-flex;align-items:center;gap:.6rem;background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--r-pill);padding:.4rem 1rem .4rem .45rem;box-shadow:var(--sh-xs);font-weight:var(--fw-semibold);color:var(--fg-1);font-size:var(--fs-sm);white-space:nowrap}
.who-stack{display:inline-flex}
.who-stack .av{width:26px;height:26px;border-radius:50%;border:2px solid var(--bg-surface);margin-left:-9px;display:grid;place-items:center;color:#fff;box-shadow:var(--sh-xs);flex:none}
.who-stack .av:first-child{margin-left:0}
.who-stack .av svg{width:13px;height:13px}
.who-chip.tiles .av{border-radius:7px;margin-left:-7px}
.flowmini{margin:clamp(1.75rem,4vw,3rem) auto 0;max-width:720px;display:flex;flex-direction:column;align-items:center}
.fnode{width:min(460px,100%);background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:.9rem 1.1rem;display:flex;align-items:center;gap:.85rem}
.fnode.grad{border:2px solid transparent;background:linear-gradient(var(--bg-surface),var(--bg-surface)) padding-box,linear-gradient(90deg,var(--coral),var(--tangerine),var(--sky),var(--violet)) border-box}
.fnode .fic{width:38px;height:38px;border-radius:var(--r-md);display:grid;place-items:center;flex:none}
.fnode b{color:var(--fg-1);font-size:var(--fs-base);font-weight:var(--fw-bold);line-height:1.3}
.fnode small{display:block;font-size:var(--fs-xs);color:var(--fg-3);font-weight:var(--fw-regular)}
.fconn{width:2px;height:24px;background:var(--border-3)}
.fsplit{position:relative;width:min(560px,100%);height:26px}
.fsplit::before{content:"";position:absolute;left:50%;top:0;width:2px;height:13px;background:var(--border-3);transform:translateX(-50%)}
.fsplit::after{content:"";position:absolute;left:25%;right:25%;top:13px;height:2px;background:var(--border-3)}
.fsplit i{position:absolute;top:13px;width:2px;height:13px;background:var(--border-3)}
.fsplit i.l{left:25%}.fsplit i.r{left:calc(75% - 2px)}
.fbranch{display:flex;width:min(560px,100%);gap:.5rem}
.fbranch-arm{flex:1;text-align:center}
.fchip{display:inline-block;background:var(--bg-surface);border:1.5px solid var(--border-2);border-radius:var(--r-md);padding:.6rem 1rem;box-shadow:var(--sh-sm);font-size:var(--fs-sm);line-height:1.3}
.fchip b{display:block;font-weight:var(--fw-bold);color:var(--fg-1)}
.fchip span{display:block;color:var(--fg-3);font-size:var(--fs-xs)}

/* ============================ FEATURE ROWS ============================ */
/* tinted band: breaks the run of ink sections and gives the informed
   visitor a fast path to pricing without another full CTA */
.band{background:var(--violet-soft);border-radius:var(--r-2xl);padding:clamp(2rem,4.5vw,3.5rem) clamp(1.25rem,3vw,2.5rem);display:grid;gap:1rem;justify-items:center;text-align:center}
.band h2{font-size:clamp(1.65rem,1.1rem + 2.1vw,2.6rem);font-weight:var(--fw-extra);letter-spacing:var(--track-head);line-height:1.1;color:#14181B;max-width:20ch;text-wrap:balance}
.band p{font-size:var(--fs-lg);color:#3C464E;max-width:52ch}
.band .cta-row{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:.35rem}
.band .btn-ghost{color:#14181B;border-color:rgba(20,24,27,.22)}
.band .btn-ghost:hover{border-color:#14181B}

.frow{display:grid;gap:2rem;align-items:center}
.frow+.frow{margin-top:clamp(3rem,6vw,5rem)}
.frow-copy{display:grid;gap:1rem;justify-items:start}
.frow-copy h3{font-size:clamp(1.75rem,1.2rem + 2vw,2.75rem);font-weight:var(--fw-extra);letter-spacing:var(--track-head);color:var(--fg-1);line-height:1.1}
.section--ink .frow-copy h3{color:#fff}
.frow-copy p{font-size:var(--fs-lg);color:var(--fg-2);line-height:1.55}
.section--ink .frow-copy p{color:var(--fg-on-ink-2)}
.frow-copy ul{display:grid;gap:.65rem}
.frow-copy li{position:relative;padding-left:1.7rem;color:var(--fg-2);font-size:var(--fs-base);line-height:1.5}
.section--ink .frow-copy li{color:var(--fg-on-ink-2)}
.frow-copy li::before{content:"";position:absolute;left:0;top:.5em;width:11px;height:11px;border-radius:4px;background:var(--coral);transform:rotate(12deg)}
.frow-copy li b{color:var(--fg-1)}
.section--ink .frow-copy li b{color:#fff}
@media (min-width:960px){
  .frow{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2.5rem,5vw,4.5rem)}
  .frow.flip .frow-copy{order:2}
}

/* product panel used in feature rows */
.pan{background:var(--bg-surface);border:1px solid var(--border-1);border-radius:var(--r-2xl);box-shadow:var(--sh-md);overflow:hidden}
.section--ink .pan{background:var(--ink-700);border-color:var(--border-ink)}
.pan-bar{display:flex;align-items:center;gap:.6rem;padding:.6rem .85rem;border-bottom:1px solid var(--border-1);background:var(--neutral-50)}
.section--ink .pan-bar{background:rgba(255,255,255,.03);border-color:var(--border-ink)}
.pan-bar .dots{display:flex;gap:5px}
.pan-bar .dots i{width:9px;height:9px;border-radius:50%;background:var(--border-3)}
.pan-bar .url{font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--fg-4);margin-inline:auto}
.pan-body{padding:1.1rem;display:grid;gap:.6rem}
.qcard{border:1px solid var(--border-1);border-radius:var(--r-md);padding:.85rem;display:grid;gap:.45rem;background:var(--bg-surface)}
.qcard.hi{border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-soft)}
.qcard .lbl{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.qcard.hi .lbl{color:var(--violet-deep)}
.qcard p{font-size:var(--fs-sm);color:var(--fg-1);line-height:1.5}
.qcard .acts{display:flex;gap:.4rem;flex-wrap:wrap}

/* studio canvas */
.st-canvas{display:grid;gap:.5rem;background-image:radial-gradient(circle,var(--border-2) 1px,transparent 1px);background-size:18px 18px;padding:1rem;border-radius:var(--r-md)}
.st-node{display:flex;align-items:center;gap:.6rem;background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--r-md);padding:.55rem .7rem;box-shadow:var(--sh-xs);font-size:var(--fs-sm);color:var(--fg-1);font-weight:var(--fw-semibold)}
.st-node .ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none}
.st-node.sel{border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-soft)}
.st-wire{width:2px;height:15px;justify-self:center;background:var(--border-3)}
.st-branch{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}

/* analytics */
.an-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
@media (min-width:520px){.an-grid{grid-template-columns:repeat(4,1fr)}}
.an-cell{border:1px solid var(--border-1);border-radius:var(--r-md);padding:.6rem;display:grid;gap:.4rem;background:var(--neutral-50)}
.an-cell .k{font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--fg-3);text-transform:uppercase;letter-spacing:.08em}
.an-cell .spark{display:flex;align-items:flex-end;gap:2px;height:28px}
.an-cell .spark i{flex:1;border-radius:2px 2px 0 0;background:var(--c,var(--sky))}
.an-rows{display:grid;gap:.55rem;margin-top:.8rem}
.an-row{display:grid;grid-template-columns:1fr auto;gap:.35rem .75rem;align-items:center;font-size:var(--fs-sm);color:var(--fg-2)}
.an-row .meter{grid-column:1/-1}

/* attribution chain */
.attr{display:grid;gap:.6rem;margin-top:clamp(1.5rem,3vw,2rem)}
@media (min-width:760px){.attr{grid-template-columns:repeat(4,1fr)}}
.attr-step{position:relative;background:var(--bg-surface);border:1px solid var(--border-1);border-radius:var(--r-xl);padding:1.1rem;display:grid;gap:.35rem;align-content:start}
/* coral kept as a surface, not as 11px text */
.attr-step .n{font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--fg-1);letter-spacing:.1em;
  background:var(--coral-soft);border-radius:var(--r-pill);padding:.15rem .5rem;justify-self:start}
.attr-step b{font-size:var(--fs-base);color:var(--fg-1);font-weight:var(--fw-bold)}
.attr-step small{font-size:var(--fs-sm);color:var(--fg-3);line-height:1.45}
.attr-step::after{content:"";position:absolute;left:50%;bottom:-.6rem;width:2px;height:.6rem;background:var(--border-3)}
.attr-step:last-child::after{display:none}
@media (min-width:760px){.attr-step::after{left:auto;right:-.6rem;top:50%;bottom:auto;width:.6rem;height:2px}}

/* ============================ GOVERNANCE (ink) ============================ */
.gov{display:grid;gap:1.5rem 2rem}
@media (min-width:600px){.gov{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.gov{grid-template-columns:repeat(3,1fr);gap:2.25rem 2.5rem}}
.gov-item{display:grid;gap:.45rem;align-content:start;padding-top:1rem;border-top:1px solid var(--border-ink)}
.gov-item .n{font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--coral);letter-spacing:.1em}
.gov-item h3{font-size:var(--fs-xl);font-weight:var(--fw-bold);color:#fff}
.gov-item p{font-size:var(--fs-sm);color:var(--fg-on-ink-2);line-height:1.55}

/* ============================ JO STAGE (brand moment) ============================ */
.jo-stage{position:relative;display:grid;place-items:center;height:300px;perspective:1000px;margin-bottom:1.5rem}
@media (min-width:768px){.jo-stage{height:380px}}
.jo-stage::before{content:"";position:absolute;width:min(72%,420px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,159,69,.22),transparent 66%)}
.jo-stage .jo{position:relative;z-index:3;width:172px;height:215px;filter:drop-shadow(0 26px 38px rgba(0,0,0,.55))}
@media (min-width:768px){.jo-stage .jo{width:222px;height:278px}}
.ring{position:absolute;width:258px;height:258px;transform-style:preserve-3d;transform:rotateX(var(--rx,72deg)) rotateZ(var(--rz,0deg))}
@media (min-width:768px){.ring{width:334px;height:334px}}
.ring::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(255,255,255,.18)}
.ring::after{content:"";position:absolute;inset:16%;border-radius:50%;border:1px solid rgba(255,255,255,.07)}
.ring .o{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotateZ(var(--a)) translateX(var(--rr,129px))}
@media (min-width:768px){.ring .o{transform:rotateZ(var(--a)) translateX(167px)}}
.ring .o>i{position:absolute;transform:translate(-50%,-50%) rotateZ(calc(var(--a) * -1)) rotateX(calc(var(--rx,72deg) * -1)) scale(1.15);filter:drop-shadow(0 8px 16px rgba(0,0,0,.65))}
.ring .glyph--arrow{width:30px;height:30px}
.ring .glyph--arrow::before,.ring .glyph--arrow::after{height:6px;width:76%}
@media (prefers-reduced-motion:no-preference){.ring .o>i{animation:uxFloat 6.5s var(--ease-inout) infinite;animation-delay:calc(var(--i,0) * -1.6s)}}
@keyframes uxRingTilt{from{transform:rotateX(80deg) rotateZ(-22deg)}to{transform:rotateX(58deg) rotateZ(22deg)}}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  .ring{animation:uxRingTilt both linear;animation-timeline:view();animation-range:cover}
}}

/* ============================ TEMPLATES ============================ */
.tpl-grid{display:grid;gap:1rem;margin-top:clamp(1.5rem,3vw,2.25rem)}
@media (min-width:700px){.tpl-grid{grid-template-columns:repeat(3,1fr)}}
.tpl{background-color:var(--wa-bg);background-image:var(--wa-paper);background-size:240px 240px;background-repeat:repeat;border-radius:var(--r-2xl);padding:1rem;display:flex;flex-direction:column;gap:.75rem;box-shadow:var(--sh-md)}
.tpl-bub{background:var(--neutral-0);border-radius:14px;border-top-left-radius:5px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.tpl-bub .ph{display:block;position:relative;height:168px;background:var(--neutral-200);overflow:hidden}
.tpl-bub .ph img{width:100%;height:100%;object-fit:cover}
.tpl-bub .bd{padding:.7rem .8rem;display:grid;gap:.3rem}
.tpl-bub .bd b{font-size:var(--fs-sm);color:var(--fg-1);font-weight:var(--fw-bold)}
.tpl-bub .bd p{font-size:var(--fs-sm);color:var(--fg-2);line-height:1.45}
.tpl-bub .bd .var{background:var(--sun-soft);color:var(--sun-deep);border-radius:4px;padding:0 3px;font-family:var(--font-mono);font-size:.9em}
.tpl-bub .bd time{font-size:var(--fs-2xs);color:var(--fg-4);justify-self:end}
.tpl-bub .act{border-top:1px solid var(--border-1);display:grid;grid-auto-flow:column}
.tpl-bub .act span{padding:.55rem;text-align:center;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--sky-deep)}
.tpl-bub .act span+span{border-left:1px solid var(--border-1)}
.tpl-meta{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--fg-on-ink-3);text-transform:uppercase;letter-spacing:.08em}
.tpl-meta .ok{display:inline-flex;align-items:center;gap:.35rem;color:var(--grass)}
.tpl-meta .ok i{width:6px;height:6px;border-radius:50%;background:var(--grass)}

/* ============================ CTA BAND ============================ */
.cta-band{background:var(--ink)}
.cta-inner{max-width:1100px;margin:0 auto;padding:clamp(3rem,7vw,5.5rem) var(--gutter);text-align:center;position:relative;overflow:hidden}
.cta-inner h2{color:#fff;font-size:clamp(2.1rem,1.4rem + 3.6vw,4rem);font-weight:var(--fw-extra);letter-spacing:var(--track-mega);line-height:1.02;text-wrap:balance}
.cta-inner h2 em{font-style:normal;color:var(--coral)}
.cta-inner .sub{color:var(--fg-on-ink-2);font-size:var(--fs-xl);margin-top:1rem;max-width:52ch;margin-inline:auto}
.cta-inner .cta-row{justify-content:center;margin-top:2rem}
/* Jo shows up in the approval moment, where the product's promise lives */
.jo-tag{display:flex;align-items:center;gap:.45rem;font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--violet-soft)}
.jo-tag svg{width:26px;height:32px;margin:-6px 0;flex:none}
.qcard .jo-tag{color:var(--violet-deep)}
.qcard .jo-tag svg{width:24px;height:30px}
.cta-crew{display:flex;justify-content:center;gap:-.5rem;margin-bottom:1.5rem}
.cta-crew span{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;overflow:hidden;margin-left:-12px;border:2px solid var(--ink)}
.cta-crew span:first-child{margin-left:0}
.cta-crew svg{width:46px;height:46px}

/* six channels: let the board reflow instead of locking a column count */
.chan-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,248px),1fr))}


/* ---- the payoff panel: what uxjo does with everything it captured ----
   One vertical flow at every size, so mobile gets the same story. */
.chan-fuse{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;text-align:center;
  background:var(--bg-surface);border:1px solid var(--border-1);border-radius:var(--r-xl);
  padding:clamp(1.25rem,3vw,1.75rem) clamp(1rem,3vw,1.5rem);overflow:hidden}
@media (min-width:768px){.chan-fuse{grid-column:span 2}}
.fz-head .eyebrow{margin-bottom:.5rem}
.fz-head h3{font-size:clamp(1.125rem,1rem + .7vw,1.5rem);font-weight:var(--fw-extra);
  letter-spacing:var(--track-tight);color:var(--fg-1);line-height:1.15;text-wrap:balance}
.fz-rail{display:flex;justify-content:center;gap:clamp(.3rem,2vw,.6rem);margin-top:1.1rem;flex-wrap:nowrap}
.fz-ch{width:clamp(30px,8vw,36px);height:clamp(30px,8vw,36px);border-radius:10px;background:var(--cs);
  display:grid;place-items:center;flex:none;opacity:.35}
.fz-ch .bi{width:16px;height:16px;fill:var(--c)}
.fz-ch i,.fz-ch svg:not(.bi){width:15px;height:15px;color:var(--c)}
.fz-wires{width:100%;max-width:340px;height:52px;margin-top:.35rem;display:block}
.fz-wires path{fill:none;stroke:var(--border-2);stroke-width:1.5;stroke-linecap:round}
.fz-node{display:flex;align-items:center;gap:.6rem;background:var(--bg-subtle);border:1px solid var(--border-2);
  border-radius:var(--r-lg);padding:.6rem .85rem;text-align:left;max-width:100%}
.fz-node .av{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;
  font-size:.625rem;font-weight:var(--fw-bold);background:linear-gradient(135deg,#8B5CF6,#3A36C9)}
.fz-node b{display:block;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--fg-1);line-height:1.2}
.fz-node small{font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3)}
.fz-n{counter-reset:fzn var(--fzn,0)}
.fz-n::after{content:counter(fzn)}
.fz-out{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin-top:1rem}
.fz-o{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--border-2);border-radius:var(--r-pill);
  padding:.35rem .7rem;font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--fg-4);
  background:var(--bg-surface);white-space:nowrap}
.fz-o i{width:13px;height:13px}

/* the loop. Only runs while the panel is on screen. */
@property --fzn{syntax:'<integer>';initial-value:0;inherits:false}
.chan-fuse.run .fz-ch{animation:fzCh 7s var(--ease-out) infinite;animation-delay:calc(var(--i) * .16s)}
@keyframes fzCh{0%,4%{opacity:.35;transform:scale(1)}10%{opacity:1;transform:scale(1.12)}
  26%{opacity:1;transform:scale(1)}70%,100%{opacity:.35;transform:scale(1)}}
.chan-fuse.run .fz-wires path{stroke-dasharray:7 96;stroke-dashoffset:103;stroke:var(--border-3);
  animation:fzFlow 7s linear infinite;animation-delay:calc(var(--i) * .16s + .35s)}
@keyframes fzFlow{0%{stroke-dashoffset:103}22%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
.chan-fuse.run .fz-node{animation:fzNode 7s var(--ease-out) infinite}
@keyframes fzNode{0%,26%{border-color:var(--border-2);transform:scale(1)}
  33%{border-color:var(--violet);transform:scale(1.03)}46%,100%{border-color:var(--border-2);transform:scale(1)}}
.chan-fuse.run .fz-n{animation:fzCount 7s linear infinite}
@keyframes fzCount{0%,6%{--fzn:0}30%{--fzn:6}100%{--fzn:6}}
.chan-fuse.run .fz-o{animation:fzOut 7s var(--ease-out) infinite;animation-delay:calc(var(--i) * .28s + 3.3s)}
@keyframes fzOut{0%,2%{color:var(--fg-4);border-color:var(--border-2);background:var(--bg-surface)}
  8%{color:var(--fg-1);border-color:var(--fg-1);background:var(--bg-surface);transform:translateY(-2px)}
  30%{color:var(--fg-1);border-color:var(--fg-1);transform:translateY(0)}
  46%,100%{color:var(--fg-4);border-color:var(--border-2);transform:translateY(0)}}

@media (prefers-reduced-motion:reduce){
  .chan-fuse.run .fz-ch,.chan-fuse.run .fz-wires path,.chan-fuse.run .fz-node,
  .chan-fuse.run .fz-n,.chan-fuse.run .fz-o{animation:none}
  .fz-ch{opacity:1}
  .fz-n{--fzn:6}
  .fz-o{color:var(--fg-2);border-color:var(--border-3)}
  .fz-wires path{stroke:var(--border-3)}
}


/* ---- analytics: one grid, every channel in it -------------------------- */
.an-head{display:grid;gap:clamp(1rem,3vw,2.5rem);margin-bottom:clamp(1.5rem,4vw,2.5rem)}
@media (min-width:900px){.an-head{grid-template-columns:1.05fr 1fr;align-items:end}}
.an-head h2{margin-top:.7rem}
.an-head-r p{margin:0}
.an-head-r .btn-txt{margin-top:1rem}

.an-pan{overflow:hidden}
.an-tools{display:flex;align-items:center;gap:.75rem;padding:.6rem .75rem;border-bottom:1px solid var(--border-1);
  background:var(--bg-surface)}
.an-chips{display:flex;gap:.35rem;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;padding:2px}
.an-chips::-webkit-scrollbar{display:none}
/* No cursor:pointer and no :hover — .an-chip is the analytics MOCK's chip row, and it is spans now, not
   buttons (see index.html). A hand cursor and a hover response on something that cannot be clicked is the
   same false affordance the <button> was; the only reason they were here is that the chips were authored as
   buttons. Geometry is untouched, so the panel renders identically. */
.an-chip{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap;background:var(--bg-surface);
  border:1px solid var(--border-2);border-radius:var(--r-pill);padding:.3rem .7rem;font-family:var(--font-sans);
  font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--fg-2);
  transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast)}
.an-chip i{width:7px;height:7px;border-radius:50%;flex:none}
.an-chip b{font-family:var(--font-mono);font-size:.625rem;color:var(--fg-4);font-weight:var(--fw-medium)}
.an-chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.an-chip.on b{color:rgba(255,255,255,.55)}
.an-live{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--font-mono);font-size:.625rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);white-space:nowrap}
.an-live i{width:6px;height:6px;border-radius:50%;background:var(--grass);animation:anPulse 2.2s ease-in-out infinite}
@keyframes anPulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(37,211,102,.45)}50%{opacity:.7;box-shadow:0 0 0 4px rgba(37,211,102,0)}}

.an-tbl{display:block}
.an-th,.an-tr{display:grid;gap:.75rem;align-items:center;padding:.7rem .85rem}
.an-th{grid-template-columns:1fr;font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-4);border-bottom:1px solid var(--border-1);display:none}
.an-tr{border-bottom:1px solid var(--border-1);grid-template-columns:1fr auto;
  grid-template-areas:"it ch" "mt mt";row-gap:.5rem;color:var(--c)}
.an-tr:last-child{border-bottom:0}
.an-tr .it{grid-area:it;display:flex;align-items:center;gap:.6rem;min-width:0}
.an-tr .th{width:34px;height:34px;border-radius:var(--r-sm);flex:none;overflow:hidden;background:var(--bg-subtle);
  display:grid;place-items:center}
.an-tr .th img{width:100%;height:100%;object-fit:cover;display:block}
.an-tr .th.st{background:var(--sun-soft);color:var(--fg-1);font-size:0.6875rem;
  font-weight:var(--fw-extra);letter-spacing:-.01em;line-height:1;flex-direction:column;gap:1px}
.an-tr .th.st b{color:var(--sun-star);font-size:.75rem;line-height:1}
.an-tr .th.wa{background:var(--grass-soft);color:var(--grass-deep)}
.an-tr .th.wa svg{width:17px;height:17px;display:block}
.an-tr .tx{min-width:0}
.an-tr .tx b{display:block;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--fg-1);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an-tr .tx small{font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-4)}
.an-tr .ch{grid-area:ch;display:inline-flex;align-items:center;gap:.35rem;font-size:var(--fs-xs);
  font-weight:var(--fw-semibold);color:var(--fg-2);white-space:nowrap}
.an-tr .ch i{width:7px;height:7px;border-radius:50%;background:currentColor;color:var(--c);flex:none}
.an-tr .dt{display:none;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--fg-4)}
.an-tr .mt b{display:block;font-size:var(--fs-base);font-weight:var(--fw-extra);color:var(--fg-1);
  letter-spacing:-.02em;line-height:1.1}
.an-tr .mt small{font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-4)}
.an-tr .tr{display:none}
.an-sp{width:76px;height:22px;display:block;color:var(--c)}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .an-sp polyline{stroke-dasharray:120;animation:anDraw both linear;animation-timeline:view();
      animation-range:entry 8% cover 34%}
  }
}
@keyframes anDraw{from{stroke-dashoffset:120}to{stroke-dashoffset:0}}

/* the mobile row puts both metrics on their own line */
.an-tr .mt:nth-of-type(4),.an-tr .mt:nth-of-type(5){grid-area:auto}
@media (max-width:759px){
  .an-tr{grid-template-areas:"it ch" "m1 m2"}
  .an-tr .mt:nth-of-type(1){grid-area:m1}
  .an-tr .mt:nth-of-type(2){grid-area:m2}
}
@media (min-width:760px){
  .an-th,.an-tr{grid-template-columns:minmax(0,2.4fr) 7.5rem 4.5rem 5.5rem 6rem 5rem;
    grid-template-areas:none;row-gap:0}
  .an-th{display:grid}
  .an-tr .it,.an-tr .ch,.an-tr .dt,.an-tr .mt,.an-tr .tr{grid-area:auto}
  .an-tr .dt,.an-tr .tr{display:block}
  .an-tr{padding:.8rem .85rem;transition:background var(--t-fast)}
  .an-tr:hover{background:var(--neutral-50)}
}
.an-foot{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;padding:.65rem .85rem;background:var(--neutral-50);
  border-top:1px solid var(--border-1);font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--fg-4)}
.an-foot .rt{margin-left:auto;color:var(--fg-3)}

:root[data-theme="dark"] .an-tools,:root[data-theme="dark"] .an-chip{background:var(--bg-surface)}
:root[data-theme="dark"] .an-chip.on{background:#F2F5F8;border-color:#F2F5F8;color:#101012}
:root[data-theme="dark"] .an-chip.on b{color:rgba(16,16,18,.5)}
:root[data-theme="dark"] .an-tr:hover{background:var(--bg-subtle)}
:root[data-theme="dark"] .an-foot{background:var(--bg-subtle)}

@media (prefers-reduced-motion:reduce){
  .an-live i{animation:none}
}

/* sections that sit under a full-bleed neighbour suppress their own top pad */
.section.pt0{padding-top:0}

/* Every column in the measurement grid is rendered identically, because the
   claim above it is that every channel is measured the same way. The brand mark
   identifies the channel instead of a per-channel hue. */
.an-cell{--c:var(--fg-2)}
.an-cell .k{display:flex;align-items:center;gap:.3rem;min-width:0}
.an-cell .k .bi{width:11px;height:11px;flex:none;fill:var(--fg-3)}
@media (min-width:900px){.an-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* ============================================================================
   ANALYTICS PANEL. One table, every channel, identical columns — which is the
   claim the section makes. Each platform reports different primitives, so the
   number carries its own unit rather than being flattened into a fake shared
   metric, and Facebook's missing per-post reach is shown as missing.
   ========================================================================== */
.anx{display:grid;gap:.85rem}
.anx-top{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.anx-tabs{display:flex;gap:.15rem;background:var(--bg-subtle);border-radius:var(--r-pill);padding:.2rem}
.anx-tabs b,.anx-tabs span{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--fg-3);
  padding:.3rem .7rem;border-radius:var(--r-pill);white-space:nowrap}
.anx-tabs b{background:var(--bg-surface);color:var(--fg-1);box-shadow:var(--sh-xs)}
.anx-per{margin-left:auto;display:inline-flex;align-items:center;gap:.35rem;font-family:var(--font-mono);
  font-size:var(--fs-2xs);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-4);
  border:1px solid var(--border-2);border-radius:var(--r-pill);padding:.28rem .6rem}
.anx-per svg{width:12px;height:12px}

.anx-tbl{display:grid;gap:1px;background:var(--border-1);border:1px solid var(--border-1);
  border-radius:var(--r-lg);overflow:hidden}
.anx-hd,.anx-r{display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem;
  background:var(--bg-surface);padding:.65rem .75rem}
.anx-hd{display:none}
/* the header band sits on --bg-subtle, so it takes the raised muted step */
.anx-hd span{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--fg-4-raised)}

.anx-c{display:flex;align-items:center;gap:.6rem;min-width:0}
/* Six marks drawn at six different weights (a thin WhatsApp outline, a
   four-colour Google, a solid envelope) never sit together as a set. A tile
   normalises them: same box, same optical size, one shared surface. */
.anx-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:var(--bg-subtle)}
.anx-ic .bi{width:15px;height:15px;flex:none}
.anx-c .tx{min-width:0}
.anx-c b{display:block;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--fg-1);
  letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anx-c small{font-family:var(--font-mono);font-size:.625rem;color:var(--fg-4)}

.anx-n{position:relative;display:grid;align-content:start;gap:.05rem;min-width:0;padding-bottom:.35rem}
.anx-n b{font-size:var(--fs-base);font-weight:var(--fw-extra);color:var(--fg-1);letter-spacing:-.02em;line-height:1.1}
.anx-n small{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.04em;color:var(--fg-4);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* a real child, not a pseudo: view() is inactive on pseudo-elements, which left
   the bar pinned at its scaleX(0) from-state forever */
.anx-mag{position:absolute;left:0;bottom:0;height:3px;min-width:14px;width:var(--w,0);background:var(--fg-3);
  border-radius:2px;transform-origin:left;display:block}
/* No static from-state here. An inactive view() timeline contributes nothing, so
   a scaleX(0) declaration would win as plain CSS and collapse the bar forever.
   Both endpoints live in the keyframes, the way .rv/uxRise does, so the bar is
   full width by default and motion is only an enhancement. */
.anx-na b{color:var(--fg-4)}
.anx-na small{max-width:14ch}
/* the one label carrying the 2024 reach fact must never be cut */
.anx-na small{white-space:normal;overflow:visible;line-height:1.3}
.anx-hi b,.anx-hi small{color:var(--grass-deep)}

.anx-foot{display:grid;grid-template-columns:14px minmax(0,1fr);gap:.5rem;align-items:start;
  font-size:var(--fs-sm);line-height:1.5;color:var(--fg-2)}
.anx-foot svg{width:14px;height:14px;color:var(--fg-4);margin-top:.25em}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .anx-mag{animation:anxBar both linear;animation-timeline:view();
      animation-range:entry 12% entry 58%}
  }
}
@keyframes anxBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* mobile: each row is a card, content over three labelled figures */
@media (max-width:719px){
  .anx-r{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:.6rem}
  .anx-c{grid-column:1/-1}
  .anx-foot{font-size:var(--fs-xs)}
}
@media (min-width:720px){
  .anx-hd,.anx-r{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1.05fr) minmax(0,.95fr) minmax(0,.8fr);
    gap:.9rem;align-items:center}
  /* the title column carries the longest strings, so it gets the extra width
     and the numeric columns are sized to their real content */
  .anx-hd{padding-block:.5rem;background:var(--neutral-50)}
  .anx-r:hover{background:var(--bg-subtle)}
}
:root[data-theme="dark"] .anx-hd{background:var(--bg-subtle)}

/* dark: the tile keeps its own surface rather than vanishing into the row */


/* the stack section ends with a way into the full integration list */
.stk-cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:clamp(1.25rem,3vw,1.75rem)}