/* ── project page: hero ───────────────────────────── */
.phero{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:clamp(120px,14vh,164px) var(--pad) clamp(52px,6vw,84px)}
.pback{display:inline-flex;align-items:center;gap:8px;margin-bottom:clamp(22px,2.6vw,34px);font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pback .ic{width:14px;height:14px}
.pback:hover{color:var(--accent)}
.phero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.94fr);align-items:center;gap:clamp(28px,4vw,64px)}
.phero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.phero h1{font-size:clamp(34px,5vw,72px);letter-spacing:-.042em}
.phero .subline{max-width:38ch}
.phero-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.phero-shot{position:relative;aspect-ratio:var(--ar,16/10);border:1px solid var(--rule);border-radius:var(--r-box);overflow:hidden;background:var(--wash);box-shadow:0 34px 68px -46px rgba(10,10,10,.46)}
.phero-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:var(--fit,cover)}
.phero-shot{background:var(--plate,var(--wash))}

/* ── the problem: bento that converges on one answer ── */
.conv{position:relative}
.conv-lines{position:absolute;inset:0;z-index:3;width:100%;height:100%;overflow:visible;pointer-events:none}
.conv-lines path{fill:none;stroke:var(--ink-35);stroke-width:1.3;stroke-linecap:round;stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);transition:stroke-dashoffset .95s var(--ease) var(--d,0ms)}
.conv.go .conv-lines path{stroke-dashoffset:0}
.conv-node{fill:var(--accent);opacity:0;transition:opacity .45s var(--ease) var(--d,0ms)}
.conv.go .conv-node{opacity:.9}
/* overflow-x:clip, and this is the real mobile defect on this site.
   Each .pcell carries an inline entry offset (--ox:-78px / +78px) that the
   convergence animation starts from. Until .go lands, three cards sit up to
   78px outside the grid, and .pbento had no clipping ancestor - so the LAYOUT
   viewport widened and /work/e-commerce-content-agents opened at
   innerWidth 428 on a 375px phone, /work/ai-shopify-toolkit at 420. The page
   loads zoomed out and reflows as you scroll it.
   body{overflow-x:hidden} cannot mask this - it hides overflow, it does not
   stop the initial-scale shrink-to-fit - which is exactly why it survived to
   launch while looking fine on every desktop.
   `clip` and not `hidden`: `hidden` makes a scroll container, which forces
   overflow-y to auto and would put the cards' 46px drop shadows inside a
   scrollable box. `clip` just clips. Safari below 16 ignores it and gets
   today's behaviour back, which is a degradation, not a break.
   The offsets are entry-only - the resolved state is transform:none - so the
   settled layout this clips is identical to the settled layout without it. */
.pbento{position:relative;z-index:1;display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,1.4vw,20px);row-gap:clamp(44px,5vw,74px);overflow-x:clip}
.pcell{position:relative;z-index:1;display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px);padding:clamp(22px,2.3vw,34px);border:1px solid var(--rule);border-radius:var(--r-box);background:rgba(252,252,251,.74);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 20px 46px -34px rgba(10,10,10,.3);transition:opacity .7s var(--ease) var(--d,0ms),transform .95s var(--ease) var(--d,0ms)}
.js .pcell{opacity:0;transform:translate(var(--ox,0),var(--oy,0)) scale(.968)}
.conv.go .pcell{opacity:1;transform:none}
.pcell.w5{grid-column:span 5}
.pcell.w7{grid-column:span 7}
.pcell.w4{grid-column:span 4}
.p-head{display:flex;align-items:baseline;gap:12px}
.p-eyebrow{font:500 10.5px/1.3 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.p-figure{display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,2vw,28px);margin-top:auto}
.p-v{font-size:clamp(44px,5.6vw,84px);font-weight:600;letter-spacing:-.05em;line-height:.92;color:var(--accent)}
.p-v i{font-style:normal;font-size:.4em;font-weight:500;letter-spacing:-.02em;vertical-align:.62em;margin-left:.04em}
.pcell p{font-size:14.5px;line-height:1.5;color:var(--ink-70);max-width:40ch}
.pcell.type{justify-content:center}
.pcell.type p{max-width:22ch;font-size:clamp(20px,2.1vw,30px);font-weight:500;letter-spacing:-.032em;line-height:1.2;color:var(--ink)}
.donut{position:relative;display:grid;place-items:center;width:clamp(78px,7.4vw,104px);aspect-ratio:1;flex:none;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--p,30)*1%),var(--rule-soft) 0)}
.donut::after{content:"";position:absolute;inset:12px;border-radius:50%;background:var(--paper)}
.queue{display:flex;align-items:flex-end;gap:6px;height:clamp(40px,4vw,56px);flex:none}
.queue i{width:clamp(12px,1.2vw,16px);height:100%;border-radius:4px;background:var(--rule)}
.queue i.hot{background:var(--accent);box-shadow:0 8px 18px -10px rgba(255,77,0,.9)}

/* reveal: name over the equation, one box */
.conv-foot{position:relative;z-index:2;display:grid;place-items:center;margin-top:clamp(76px,9vw,140px)}
.conv-reveal{display:flex;flex-direction:column;align-items:center;gap:clamp(16px,1.8vw,24px);padding:clamp(20px,2.2vw,30px) clamp(26px,3.4vw,54px) clamp(22px,2.4vw,32px);border:1px solid var(--rule);border-radius:clamp(26px,2.8vw,40px);background:var(--paper);box-shadow:0 26px 56px -32px rgba(10,10,10,.46);transition:opacity .6s var(--ease) 1.05s,transform .6s var(--ease) 1.05s}
.js .conv-reveal{opacity:0;transform:translateY(16px)}
.conv.go .conv-reveal{opacity:1;transform:none}
.cr-name{display:inline-flex;align-items:center;gap:13px}
.cr-name .ic{width:20px;height:20px;color:var(--accent)}
.cr-name span{font-size:clamp(19px,2.1vw,30px);font-weight:600;letter-spacing:-.035em}
.cr-eq{display:flex;align-items:flex-start;justify-content:center;gap:clamp(12px,1.8vw,30px);flex-wrap:wrap;padding-top:clamp(15px,1.8vw,22px);border-top:1px solid var(--rule-soft)}

/* ── the equation ─────────────────────────────────── */
.eq-node{display:flex;flex-direction:column;align-items:center;gap:11px}
.eq-art{position:relative;display:grid;place-items:center;width:clamp(84px,8.6vw,116px);height:clamp(62px,6vw,82px)}
.eq-label{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.eq-op{align-self:center;margin-top:clamp(14px,1.6vw,22px);font-size:clamp(17px,1.8vw,24px);font-weight:500;letter-spacing:-.03em;color:var(--ink-35)}
.cr-eq .iso-inline{margin:0;font-size:clamp(46px,4.6vw,62px)}
.eq-one .cube:nth-child(1){--s:.72em;left:.44em;bottom:.04em}
.plane-8{grid-template-columns:repeat(4,15px);gap:3px;left:50%;bottom:50%;transform:translate(-50%,50%) rotateX(56deg) rotateZ(-45deg)}
.plane-8 .tile{width:15px;height:15px}
.cr-eq .part-doc{transform:scale(.8)}

/* ── what you get ─────────────────────────────────── */
.vbento{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.4vw,20px)}
.vcell{display:flex;flex-direction:column;gap:12px;padding:clamp(22px,2.3vw,34px);border:1px solid var(--rule);border-radius:var(--r-box);background:rgba(252,252,251,.74);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 20px 46px -34px rgba(10,10,10,.3);transition:border-color .35s var(--ease),transform .35s var(--ease)}
.vcell:hover{border-color:rgba(10,10,10,.2);transform:translateY(-3px)}
.vcell h3{margin-top:6px;font-size:clamp(19px,1.8vw,26px);max-width:20ch}
.vcell p{font-size:14.5px;line-height:1.55;color:var(--ink-70);max-width:38ch}
.vcell.w6{grid-column:span 6}
.vcell.w5{grid-column:span 5}
.vstate{grid-column:span 7;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(24px,3vw,40px);padding:clamp(28px,3.2vw,46px);border-radius:var(--r-box);background:var(--ink);color:#fff}
.vstate p{font-size:clamp(24px,3.1vw,44px);font-weight:600;letter-spacing:-.042em;line-height:1.06;max-width:19ch}
.vstate em{font-style:normal;color:var(--accent)}
.vstate-foot{display:flex;align-items:baseline;gap:14px}
.vstate-v{font-size:clamp(30px,3.4vw,48px);font-weight:600;letter-spacing:-.045em;line-height:1;color:var(--accent)}
.vstate-l{font:500 10.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);white-space:nowrap}

/* ── agents ───────────────────────────────────────── */
.agents{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.agent{display:flex;flex-direction:column;gap:10px;padding:clamp(20px,2.1vw,28px);border:1px solid var(--rule);border-radius:var(--r-card);background:rgba(255,255,255,.74);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .35s var(--ease),transform .35s var(--ease)}
.agent:hover{border-color:rgba(10,10,10,.24);transform:translateY(-3px)}
.agent h3{font-size:clamp(17px,1.4vw,21px)}
.agent p{font-size:14px;line-height:1.5;color:var(--ink-70)}
.agent-ico{position:relative;display:grid;place-items:center;height:96px;margin-bottom:4px}
.agent-ico .ico{width:190px;height:132px;margin:0;transform:scale(.62)}
.ico-qa .doc{position:absolute;left:50px;bottom:28px;width:58px;height:76px;transform:rotate(-4deg)}
.ico-qa .glass{left:92px;bottom:28px}
.ico-more{display:grid;place-items:center}
.ico-more .gear{width:104px;transform:rotateX(30deg)}
.agent-ico .part-doc{transform:scale(1.2)}
.agent-ico .iso-inline{margin:0;font-size:64px}
.agent.more{border-style:dashed;border-color:var(--ink-20);background:var(--wash);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.agent.more:hover{transform:none;border-color:var(--ink-20)}
.agent.more h3{color:var(--muted)}
.agent.more .agent-ico{opacity:.4}

/* ── cta chips ────────────────────────────────────── */
.cta-box .chips{justify-content:center;margin:2px 0 4px}

/* ── media hero: one shot, copy on the veil ───────── */
.mhero{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:clamp(112px,13vh,152px) var(--pad) clamp(48px,6vw,84px)}
.mhero-card{position:relative;height:clamp(470px,54vw,660px);border:1px solid var(--rule);border-radius:var(--r-box);overflow:hidden;background:var(--wash);box-shadow:0 34px 68px -46px rgba(10,10,10,.46)}
.mhero-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:var(--fit,cover)}
.mhero-card{background:var(--plate,var(--wash))}
.mhero-veil{position:absolute;left:0;right:0;bottom:0;height:74%;z-index:1;pointer-events:none;backdrop-filter:blur(22px) saturate(1.12);-webkit-backdrop-filter:blur(22px) saturate(1.12);-webkit-mask-image:linear-gradient(to top,#000 58%,transparent);mask-image:linear-gradient(to top,#000 58%,transparent);background:linear-gradient(to top,rgba(252,252,251,.95),rgba(252,252,251,.66) 52%,rgba(252,252,251,0))}
.mhero-body{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,1.6vw,20px);padding:clamp(24px,3.2vw,46px)}
.mhero-body h1{font-size:clamp(30px,4.6vw,68px);letter-spacing:-.042em;white-space:nowrap}
.mhero-body .subline{max-width:46ch}
.mhero-body .chips span{background:rgba(252,252,251,.72);border-color:rgba(10,10,10,.15);color:var(--ink-70)}

/* ── two-bar comparison (same bar vocabulary as .queue) ── */
.bars{display:flex;align-items:flex-end;gap:clamp(16px,1.8vw,24px);flex:none}
.bar{display:flex;flex-direction:column;align-items:center;gap:11px}
.bar span{display:block;width:clamp(26px,2.4vw,34px);height:var(--h);border-radius:4px;background:var(--ink-20)}
.bar span.hot{background:var(--accent);box-shadow:0 8px 18px -10px rgba(255,77,0,.9)}
.bar b{font:500 9.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.p-figure.pair{align-items:flex-end;justify-content:flex-start;gap:clamp(16px,2vw,26px)}
.p-figure.inline{align-items:baseline;justify-content:flex-start;gap:clamp(12px,1.4vw,18px)}
.p-from{font:500 10.5px/1.4 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--muted);white-space:nowrap}

/* ── the stack: three agents feeding one foundation ── */
.stack{position:relative;margin-top:clamp(56px,6.5vw,92px)}
.stack-lines{position:absolute;inset:0;z-index:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.stack-lines path{fill:none;stroke:var(--ink-35);stroke-width:1.3;stroke-linecap:round;stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);transition:stroke-dashoffset .95s var(--ease) var(--d,0ms)}
.stack.go .stack-lines path{stroke-dashoffset:0}
.stack-lines circle{fill:var(--accent);opacity:0;transition:opacity .45s var(--ease) var(--d,0ms)}
.stack.go .stack-lines circle{opacity:.9}
.stack-lab{display:block;margin-bottom:clamp(16px,1.8vw,22px)}
.stack-row{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stack-foot{position:relative;z-index:1;margin-top:clamp(72px,8vw,116px)}
.stack-band{display:flex;align-items:center;justify-content:center;gap:clamp(12px,1.4vw,18px);padding:clamp(24px,2.8vw,38px) clamp(20px,2.6vw,40px);border-radius:var(--r-box);background:var(--ink);color:#fff;text-align:center;transition:opacity .6s var(--ease) .5s,transform .6s var(--ease) .5s}
.js .stack-band{opacity:0;transform:translateY(14px)}
.stack.go .stack-band{opacity:1;transform:none}
.stack-band .ic{width:20px;height:20px;flex:none;color:var(--accent)}
.stack-band .band-txt{font-size:clamp(17px,2vw,28px);font-weight:600;letter-spacing:-.035em;line-height:1.15}
.band-copy{display:flex;flex-direction:column;align-items:center;gap:10px}

/* ── what it produces: centre spine, alternating bands ── */
.jrn{position:relative}
.jrn-spine{position:absolute;left:50%;top:0;bottom:clamp(90px,10vw,150px);width:1px;background:var(--rule);transform:translateX(-.5px)}
.jrn-spine i{position:absolute;left:0;top:0;width:100%;height:0;background:var(--accent);opacity:.85}
.jrn-row{position:relative;display:grid;grid-template-columns:1fr clamp(72px,8vw,116px) 1fr;align-items:center;gap:clamp(14px,2vw,30px);padding:clamp(26px,3.4vw,52px) 0}
.jrn-copy{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:12px;align-items:flex-start;transition:opacity .6s var(--ease),transform .7s var(--ease)}
.js .jrn-copy{opacity:0;transform:translateY(18px)}
.jrn-media{grid-column:3;grid-row:1;position:relative;aspect-ratio:var(--ar,4/3);border:1px solid var(--rule);border-radius:var(--r-box);overflow:hidden;background:var(--wash);box-shadow:0 26px 56px -42px rgba(10,10,10,.42);transition:opacity .6s var(--ease) .08s,transform .7s var(--ease) .08s}
.js .jrn-media{opacity:0;transform:translateY(18px) scale(.985)}
.jrn-row.flip .jrn-copy{grid-column:3}
.jrn-row.flip .jrn-media{grid-column:1}
.jrn-row.lit .jrn-copy,.jrn-row.lit .jrn-media{opacity:1;transform:none}
.jrn-node{grid-column:2;grid-row:1;justify-self:center;z-index:2;display:grid;place-items:center;width:clamp(46px,4.2vw,58px);height:clamp(46px,4.2vw,58px);border:1px solid var(--rule);border-radius:50%;background:var(--paper);font:500 11px/1 var(--mono);letter-spacing:.12em;color:var(--muted);transition:color .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease)}
.jrn-row.lit .jrn-node{color:var(--accent);border-color:var(--accent);box-shadow:0 0 0 7px rgba(255,77,0,.07)}
.jrn-ico{position:relative;display:grid;place-items:end start;width:100%;height:84px;margin-bottom:2px}
.jrn-ico .ico{width:150px;height:100px;margin:0;transform:scale(.58);transform-origin:0 100%}
.jrn-ico .iso-inline{margin:0;font-size:58px}
.jrn-ico .part-doc{transform:scale(1.1);transform-origin:0 100%}
.jrn-copy h3{font-size:clamp(21px,2.2vw,32px)}
.jrn-copy p{font-size:15px;line-height:1.5;color:var(--ink-70);max-width:34ch}
/* ── how a plate meets its box ─────────────────────
   `--ar` and `--fit` are set per slot, in the markup, from
   `scripts/media-manifest.mjs`. They are not styling knobs: the box was a
   hard-coded 4:3 landscape while every plate Max supplied for this page is
   PORTRAIT - the ghost shot 2:3, the try-on and campaign 3:4, the film 9:16.
   `cover` into 4:3 cut the try-on model off at the neck. Rather than crop four
   photographs to fit one number, each slot declares the shape of the picture
   it holds.

   `--fit:contain` exists for the two plates that must not be cropped at all:
   the film, which is 9:16 and pillarboxes on its own near-black interior, and
   the diagrams, whose ground is within a hair of --wash. `--plate` paints that
   ground so the letterbox is not visible AS a letterbox. */
.jrn-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:var(--fit,cover)}
.jrn-media{background:var(--plate,var(--wash))}
.jrn-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:var(--fit,cover);opacity:0;transition:opacity .5s var(--ease)}
.jrn-vid.on{opacity:1}
.jrn-tag{position:absolute;left:14px;bottom:14px;z-index:2;padding:5px 11px;border:1px solid rgba(10,10,10,.15);border-radius:var(--r-pill);background:rgba(252,252,251,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-70)}
.jrn-end{position:relative;display:grid;place-items:center;gap:14px;padding-top:clamp(30px,4vw,52px);text-align:center}
.jrn-end .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .jrn-end .dot{opacity:0;transform:scale(.4)}
.jrn-end p{font-size:clamp(26px,3.6vw,52px);font-weight:600;letter-spacing:-.042em;line-height:1}
.jrn-end p em{font-style:normal;color:var(--accent)}
.jrn-end.lit .dot{opacity:1;transform:none}

/* ── tall project hero (copy + product shot) ─────── */
.phero.tall{display:flex;flex-direction:column;justify-content:center;min-height:92svh;padding-bottom:clamp(56px,7vw,96px)}
.phero.tall h1{font-size:clamp(48px,7.4vw,96px);letter-spacing:-.05em}
.pkick{font-size:clamp(20px,2.2vw,32px);font-weight:500;letter-spacing:-.032em;line-height:1.2;color:var(--ink);max-width:20ch}
.phero.tall .subline{max-width:40ch}

/* ── pdf → excel, compact ─────────────────────── */
.diff{display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,.92fr);align-items:center;gap:clamp(24px,3.6vw,58px)}
.diff-copy{display:flex;flex-direction:column;gap:clamp(12px,1.4vw,18px);align-items:flex-start}
.diff-lead{font-size:clamp(22px,2.5vw,34px);font-weight:600;letter-spacing:-.038em;line-height:1.14;max-width:38ch;text-wrap:balance}
.diff-lead em{font-style:normal;color:var(--accent)}
.px{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:clamp(10px,1.1vw,14px);width:100%}
.px-col{display:flex;flex-direction:column;gap:13px;padding:clamp(16px,1.8vw,22px);border-radius:var(--r-in)}
.px-col.raw{border:1px dashed var(--ink-20);background:var(--wash)}
.px-col.out{border:1px solid rgba(255,77,0,.24);background:rgba(255,77,0,.055)}
.px-rows{display:flex;flex-direction:column;gap:5px;margin-top:auto}
.px-rows i{width:100%;height:4px;border-radius:2px;background:var(--ink);opacity:.14}
.px-rows i:nth-child(3n){width:88%}
.px-rows i:nth-child(4n){width:74%}
.px-rows i:nth-child(7n){width:94%}
.px-rows i.hit{width:100%;opacity:1;background:var(--accent)}
.px-tab{display:grid;grid-template-columns:1.6fr 1fr .7fr;gap:5px;margin-top:auto}
.px-tab i{height:8px;border-radius:2px;background:rgba(255,77,0,.26)}
.px-tab i.h{background:var(--ink);opacity:.7}
.px-n{font:500 10.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ── why: two pairs in one bento ──────────────── */
.vlab{grid-column:span 12;margin-top:clamp(10px,1.4vw,20px)}
.vlab.first{margin-top:0}
.vstate.full{grid-column:span 12;flex-direction:row;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:clamp(16px,2vw,32px)}
.vstate.full p{max-width:none}
.vcell .p-figure{margin-top:auto;padding-top:6px}

/* ── journey: iso icon instead of media ────────── */
.jrn-art{display:grid;place-items:center;aspect-ratio:16/11;overflow:hidden}
.jrn-art .ico{width:200px;height:140px;margin:0;transform:scale(1.25)}
.jrn-art .iso-inline{margin:0;font-size:clamp(140px,16vw,180px)}
.jrn-art .ico-pipe{transform:scale(1.45)}
.jrn-art .part-doc{transform:scale(1.95)}
.jrn-copy .p-eyebrow{order:-1}
.jrn-copy .chips{margin-top:2px}

/* ── memory graph hero ──────────────────────── */
.memg{position:relative;display:grid;place-items:center;aspect-ratio:1;width:100%;max-width:500px;justify-self:center}
.memg-ring{position:absolute;left:50%;top:50%;width:64%;aspect-ratio:1;transform:translate(-50%,-50%);border:1px dashed var(--rule);border-radius:50%}
.memg-ring.two{width:88%;border-style:solid;border-color:var(--rule-soft)}
.memg-hub{position:relative;z-index:2;display:grid;place-items:center}
.memg-hub .iso-inline{margin:0;font-size:clamp(72px,8.4vw,112px);transform:translate(.11em,-.13em)}
.spoke{position:absolute;left:50%;top:50%;z-index:1;height:1px;width:var(--len);transform-origin:0 50%;transform:rotate(var(--a));background:linear-gradient(90deg,rgba(10,10,10,0),var(--ink-20) 42%,var(--ink-20));animation:spokeDrift var(--t,9s) ease-in-out infinite alternate}
.nd{position:absolute;right:0;top:50%;display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--paper);font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap;box-shadow:0 12px 26px -20px rgba(10,10,10,.55);transform:translate(50%,-50%) rotate(calc(-1 * var(--a)))}
.nd i{width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.8}
@keyframes spokeDrift{0%{width:calc(var(--len) - 8px)}100%{width:calc(var(--len) + 8px)}}

/* ── lighter card row ────────────────────────── */
.agent.lite{gap:12px;background:rgba(252,252,251,.6)}
.agent.lite h3{max-width:14ch}
.agent.lite .chips{margin-top:auto;padding-top:8px}
.vcell.w4{grid-column:span 4}
.vcell .bars{margin-top:auto;padding-top:10px}
.vcell .axis{font-size:13.5px;line-height:1.5;color:var(--muted);max-width:32ch}

/* ── responsive ───────────────────────────────────── */
@media (max-width:1080px){
.phero-grid{grid-template-columns:1fr;gap:32px}
.memg{max-width:420px}
.vcell.w4{grid-column:span 12}
.diff{grid-template-columns:1fr;gap:clamp(24px,3.4vw,40px)}
.pcell.w5,.pcell.w7{grid-column:span 6}
.pcell.w4{grid-column:span 12}
.vcell.w6,.vcell.w5,.vstate{grid-column:span 12}
.agents{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
.stack-row{grid-template-columns:1fr;gap:14px}
.stack-foot{margin-top:clamp(40px,6vw,64px)}
.stack-lines{display:none}
.jrn-spine{left:22px;bottom:clamp(70px,9vw,110px)}
.jrn-row{grid-template-columns:44px minmax(0,1fr);gap:clamp(14px,3vw,22px);padding:clamp(20px,4vw,34px) 0}
.jrn-copy,.jrn-row.flip .jrn-copy{grid-column:2;grid-row:1}
.jrn-media,.jrn-row.flip .jrn-media{grid-column:2;grid-row:2;margin-top:16px}
.jrn-node{grid-column:1;grid-row:1;justify-self:start;align-self:start}
.jrn-ico{height:74px;justify-items:start;place-items:center start}
.jrn-end{place-items:start;text-align:left;padding-left:66px}
.jrn-row.art .jrn-copy,.jrn-row.art.flip .jrn-copy{grid-row:2}
.jrn-row.art .jrn-art,.jrn-row.art.flip .jrn-art{grid-row:1;margin-top:0;margin-bottom:18px}
.jrn-art{aspect-ratio:auto;height:clamp(186px,44vw,290px)}
.jrn-art .ico{transform:scale(1.05)}
.jrn-art .ico-pipe{transform:scale(1.15)}
.jrn-art .iso-inline{font-size:clamp(120px,28vw,168px)}
}
@media (max-width:767px){
.mhero-body h1{white-space:normal;font-size:clamp(29px,7.2vw,44px)}
.phero.tall{min-height:0}
.px{grid-template-columns:1fr}
.px .ba-go{justify-self:center;transform:rotate(90deg)}
.vstate.full{flex-direction:column;align-items:flex-start}
.pcell.w5,.pcell.w7,.pcell.w4{grid-column:span 12}
.agents{grid-template-columns:1fr}
.mhero-card{height:clamp(500px,132vw,660px)}
.cr-eq{flex-direction:column;gap:4px}
.eq-op{margin-top:0}
.eq-op.turn{transform:rotate(90deg)}
.p-figure{flex-direction:column;align-items:flex-start;gap:18px}
}
@media (prefers-reduced-motion:reduce){
.spoke{animation:none!important}
.pcell,.conv-reveal,.conv-lines path,.conv-node,.stack-lines path,.stack-lines circle,.stack-band,.jrn-copy,.jrn-media,.jrn-node,.jrn-end .dot{transition:none!important}
/* .js-prefixed to match the specificity of the `.js .pcell{opacity:0}` rules
   above. Without it these are (0,1,0) against their (0,2,0) and this safety
   net - the one that guarantees a reduced-motion reader sees a COMPLETE page
   rather than a still one - silently stopped working the moment the pre-hide
   rules were scoped. */
.js .pcell,.js .conv-reveal,.js .stack-band,.js .jrn-copy,.js .jrn-media,.js .jrn-end .dot{opacity:1;transform:none}
.conv-lines path,.stack-lines path{stroke-dashoffset:0}
.conv-node,.stack-lines circle{opacity:.9}
}