/* SPEC v4 section 3.7 visual mobile cards: vendored from Design assets/mcards.css (12:14 ET). Changes: `.story.v4` -> `.s4` (the PR's
   pinned story); Eng cards-header pill at the end. */
/* v4 mobile/tablet story (<1100px): 4 visual cards, normal scroll. Desktop pinned story hidden below 1100, cards hidden at >=1100. */
.mcards{display:none}
@media (max-width:1099.98px){ .s4{display:none!important} .mcards{display:block;padding:2.5rem 0 1rem} }
@media (min-width:700px) and (max-width:1099.98px){ .mcards .wrap{max-width:40rem} }
.mc-head{text-align:left;margin-bottom:1.1rem}.mc-head h2{font-size:1.55rem;line-height:1.12;margin:.35rem 0 .8rem;font-weight:800}
.mc{position:relative;border-radius:22px;padding:1rem .95rem 1.05rem;margin:0 0 .75rem;background:linear-gradient(180deg,#122039,#0c182c);border:1px solid rgba(255,255,255,.08);box-shadow:var(--hairline);overflow:hidden}
.mc,#story-m{scroll-margin-top:76px}
.mc-kick{font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-soft,#e7c08f);margin:0 0 .35rem}
.mc-h{font-size:1.3rem;line-height:1.15;font-weight:800;margin:0 0 .35rem;color:#f5f7fa}.mc-h.big{font-size:1.9rem}
.mc-b{font-size:.9rem;line-height:1.4;color:#c9cfd8;margin:0 0 .8rem}
.mc .ea{display:inline-flex;align-items:center;border:1px solid #c89968;color:#c89968;background:transparent;border-radius:999px;font-size:.6875rem;font-weight:600;padding:.12rem .5rem;white-space:nowrap;line-height:1.3}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- card 1: short bubble -> request chips -> funnel -> Likely need ---- */
.mc-bubble{width:fit-content;max-width:85%;margin-left:auto;background:linear-gradient(180deg,#2b3d5c,#22324d);color:#eef1f5;border-radius:16px 16px 4px 16px;padding:.55rem .8rem;font-size:.875rem;line-height:1.4;box-shadow:var(--hairline)}
.mc-typed{font-size:.75rem;color:#9ca3af;margin:.3rem 0 .75rem;text-align:right}
.mc-ask{position:relative;background:#0a1628;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:.6rem .6rem .65rem}
.mc-to{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:600;color:#c9cfd8;margin:0 0 .5rem}
.mc-to .mono,.mc-url .mono{width:1.15rem;height:1.15rem;border-radius:5px;background:#c89968;color:#0a1628;font-weight:800;font-size:.6875rem;display:grid;place-items:center}
.mc-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.mc-chip{display:inline-flex;align-items:center;gap:.35rem;font-size:.8125rem;font-weight:600;line-height:1.2;border-radius:999px;padding:.38rem .6rem .38rem .7rem;white-space:nowrap}
.mc-chip.ok{color:#eef1f5;background:rgba(79,191,152,.10);border:1px solid rgba(79,191,152,.45)}
.mc-chip .ck{width:1rem;height:1rem;border-radius:50%;background:#4fbf98;color:#0a1628;display:grid;place-items:center}.mc-chip .ck svg{width:.7rem;height:.7rem}
.mc-chip.nr{color:#9ca3af;font-weight:500;background:transparent;border:1px dashed #6b7280;white-space:normal}
.mc-funnel{display:block;width:100%;height:28px;transform-origin:top}
.mc-funnel path{fill:none;stroke:#c89968;stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:.85}
.mc-intent{display:flex;flex-wrap:wrap;gap:.25rem .5rem;align-items:center;background:rgba(220,176,92,.12);border:1px solid rgba(220,176,92,.6);border-radius:14px;padding:.55rem .75rem;box-shadow:0 10px 30px -16px rgba(220,176,92,.6)}
.mc-intent small{flex-basis:100%;font-size:.75rem;color:#c9cfd8}.mc-intent b{font-size:.9375rem;line-height:1.3;color:#f5e3c4;font-weight:700}

/* ---- card 2: two grey generic pages, Valdren lit ---- */
.mc-gr{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:.7rem}
.mc-tn,.mc-vl{margin:0}
.mc-tn figcaption,.mc-vl figcaption{font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8b95a3;margin:0 0 .3rem}
.mc-vl figcaption{color:#e7c08f}
.mc-g{height:116px;border-radius:12px;background:#d9dce1;padding:6px 7px;display:flex;flex-direction:column;gap:5px;filter:grayscale(1);opacity:.78;overflow:hidden}
.tb{display:flex;gap:3px}.tb i{width:5px;height:5px;border-radius:50%;background:#b3b8bf}
.gb .nv{display:flex;gap:4px;align-items:center}.gb .nv i{height:4px;width:14%;border-radius:2px;background:#b3b8bf}.gb .nv i.lg{width:18%;height:7px;background:#9ca1a8;margin-right:auto}
.gb .sale{align-self:stretch;text-align:center;font-size:.75rem;font-weight:700;color:#4b5563;background:#c3c7ce;border-radius:4px;padding:1px 0}
.gb .hb{flex:1;border-radius:6px;background:linear-gradient(135deg,#c3c7ce,#aeb3ba);display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 8px}.gb .hb i{height:5px;width:60%;border-radius:3px;background:#e5e7ea}.gb .hb i+i{width:36%}
.gb .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.gb .tiles i{height:18px;border-radius:4px;background:#c3c7ce}
.gc .im{height:58px;border-radius:6px;background:#c9cdd3;display:grid;place-items:center;padding:3px}.gc .im svg{height:100%;width:auto}
.gc .rw{display:flex;gap:5px;align-items:center}.gc .rw i{flex:1;height:6px;border-radius:3px;background:#b3b8bf}
.gc .dflt{flex:none;font-size:.75rem;line-height:1.35;color:#374151;background:#c3c7ce;border:1px solid #9ca1a8;border-radius:999px;padding:0 .4rem;white-space:nowrap}.gc .dflt b{color:#111827}
.gc i.bt{display:block;height:12px;border-radius:5px;background:#9ca1a8;margin-top:auto}
.mc-lit{border-radius:16px;background:linear-gradient(180deg,#17294a,#0f1d36);border:1px solid rgba(200,153,104,.6);box-shadow:0 0 0 1px rgba(200,153,104,.12),0 18px 44px -18px rgba(220,176,92,.6);padding:.55rem .75rem .8rem}
.mc-url{display:flex;align-items:center;gap:.5rem;margin:0 0 .6rem}.mc-url .tb i{background:#3a4c6b}
.mc-url .u{flex:1;min-width:0;font-size:.75rem;color:#aeb6c2;background:#0a1628;border-radius:999px;padding:.12rem .6rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-vp.vp{font-size:13px}
.mc-vp .vp-h{font-size:1.3em}

/* ---- card 3: compact See strip + icon ring ---- */
.mc-ring{position:relative;width:100%;max-width:340px;height:236px;margin:.6rem auto 0}
.mc-ring .rg{position:absolute;inset:0;width:100%;height:100%}.mc-ring ellipse{fill:none;stroke:rgba(200,153,104,.5);stroke-width:1.2;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.mc-hub{position:absolute;left:50%;top:47%;width:30px;height:30px;transform:translate(-50%,-50%);color:rgba(200,153,104,.6)}.mc-hub svg{width:100%;height:100%}
.mc-ring ol{list-style:none;margin:0;padding:0}
.mc-node{position:absolute;width:0;height:0}
.mc-node .ic{position:absolute;left:-22px;top:-22px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#0f1d33;border:1px solid rgba(200,153,104,.55);color:#c89968;box-shadow:0 0 0 4px #0e1a2f}
.mc-node .ic svg{width:22px;height:22px}
.mc-node .ic::after{content:"";position:absolute;inset:-7px;border-radius:50%;background:radial-gradient(circle,rgba(220,176,92,.5),rgba(220,176,92,0) 70%);opacity:0;pointer-events:none}
.mc-node b{position:absolute;left:0;top:26px;transform:translateX(-50%);font-size:.8125rem;line-height:1.2;color:#eef1f5;font-weight:600;white-space:nowrap}
.mc-node .ea{position:absolute;left:0;top:45px;transform:translateX(-50%)}

/* ---- card 3 'See' strip (11:55): fictional-sample AI Visibility + Site Audit + Top opportunities ---- */
.ms{margin:.2rem 0 .2rem}
.ms-lbl{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#c89968;margin:0 0 .4rem}
.ms-row{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.ms-t{position:relative;background:#0f1d33;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:.55rem .6rem 1.7rem}
.ms-h{font-size:.75rem;font-weight:600;color:#c9cfd8}
.ms-sc{display:flex;align-items:baseline;gap:.2rem;margin:.1rem 0 .35rem}.ms-sc b{font-size:1.9rem;font-weight:800;color:#f5e3c4;line-height:1}.ms-sc span{font-size:.75rem;color:#8b95a3}
.ms-bars{display:grid;gap:.28rem}
.ms-er{display:grid;grid-template-columns:16px 1fr 1.4rem;gap:.35rem;align-items:center}
.ms-er .lg .engine-tile{width:16px;height:16px;border-radius:4px}.ms-er .lg img{width:11px;height:11px}.ms-er .lg .is-app-icon img{width:16px;height:16px}
.ms-bar{display:block;height:6px;border-radius:6px;background:#1b2a44;overflow:hidden}
.ms-bar i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--v))}.ms-bar i.ok{background:#4fbf98}.ms-bar i.lo{background:#dcb05c}
.ms-er b{font-size:.75rem;text-align:right}.ms-er b.ok{color:#4fbf98}.ms-er b.lo{color:#dcb05c}
.ms-th{position:relative;height:58px;border-radius:8px;background:#16284a;border:1px solid rgba(200,153,104,.35);overflow:hidden;padding:6px;display:grid;grid-template-columns:1fr 1fr;gap:4px;align-content:start}
.ms-th i{display:block;height:6px;border-radius:3px;background:#2a3e60;grid-column:1/-1}.ms-th i.hl{width:70%;height:8px;background:#3a5279}
.ms-th .miss{height:15px;border-radius:4px;border:1.2px dashed #dcb05c;color:#dcb05c;font-size:11px;font-weight:800;display:grid;place-items:center;line-height:1}
.ms-th .mc-scan{position:absolute;left:0;right:0;top:0;height:16px;background:linear-gradient(180deg,rgba(226,195,155,0),rgba(226,195,155,.8));border-bottom:1.5px solid #e2c39b;opacity:0;grid-column:auto}
.ms-gaps{display:grid;gap:.3rem;margin-top:.4rem}
.ms-gap{display:flex;gap:.3rem;align-items:flex-start;font-size:.75rem;line-height:1.3;color:#f3dfb5}
.ms-gap i{flex:none;width:15px;height:15px;border-radius:50%;background:#dcb05c;color:#0a1628;font-style:normal;font-weight:800;font-size:11px;display:grid;place-items:center;line-height:1}
.ms-samp{position:absolute;left:.6rem;bottom:.45rem;font-size:.6875rem;color:#aeb6c2;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:0 .4rem}
.ms-oh{font-size:.75rem;font-weight:600;color:#c9cfd8;margin:.55rem 0 .3rem}
.ms-opps{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.ms-opps li{display:grid;grid-template-columns:auto 1fr auto;gap:.45rem;align-items:center;font-size:.8125rem;color:#eef1f5;background:#0f1d33;border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:.35rem .5rem}
.ms-src{font-size:.6875rem;font-weight:600;border-radius:999px;padding:0 .45rem;white-space:nowrap}.ms-src.visibility{border:1px solid #c89968;color:#e7c08f}.ms-src.audit{border:1px solid #6f8fbf;color:#a9c0e6;background:rgba(30,58,95,.35)}
.ms-imp{font-size:.6875rem;font-weight:700;border-radius:999px;padding:0 .45rem}.ms-imp.high{background:rgba(220,176,92,.18);color:#f3dfb5}.ms-imp.med{background:#1b2a44;color:#c9cfd8}
.ms-links{font-size:.8125rem;margin:.55rem 0 0;color:#aeb6c2}.ms-links a{color:#e7c08f;text-decoration:underline;text-underline-offset:2px}

/* ---- card 4 (unchanged) ---- */
.mc4{text-align:center;padding:1rem .95rem 1.05rem;background:radial-gradient(120% 80% at 50% 0,rgba(200,153,104,.22),transparent 60%),linear-gradient(180deg,#14233b,#0c182c)}
.mc4 .mc-b{margin-bottom:1.2rem}.mc4 .ms-links{margin-top:.9rem}

/* ---- motion: only when JS is on and reduced motion is off (html.mc-anim). Transform + opacity only, play once. ---- */
.mc-anim .mc :is(.mc-kick,.mc-h,.mc-b,.mc-in){opacity:0;transform:translateY(10px)}
.mc-anim .mc .mc-pop{opacity:0;transform:scale(.86)}
.mc-anim .mc .mc-grow{opacity:0;transform:scaleY(0)}
.mc-anim .mc .mc-rise{opacity:0;transform:translateY(26px)}
.mc-anim .mc .mc-node .ic{opacity:.35;transform:scale(.85)}
.mc-anim .mc .mc-node :is(b,.ea){opacity:.35}
.mc-anim .mc.play :is(.mc-kick,.mc-h,.mc-b,.mc-in,.mc-pop,.mc-grow,.mc-rise){opacity:1;transform:none;transition:opacity .4s cubic-bezier(.16,1,.3,1) var(--d,0s),transform .45s cubic-bezier(.16,1,.3,1) var(--d,0s)}
.mc-anim .mc.play .mc-pop{transition:opacity .3s ease var(--d),transform .45s cubic-bezier(.34,1.56,.64,1) var(--d)}
.mc-anim .mc.play .mc-node .ic{opacity:1;transform:none;transition:opacity .35s ease var(--d),transform .5s cubic-bezier(.34,1.56,.64,1) var(--d)}
.mc-anim .mc.play .mc-node :is(b,.ea){opacity:1;transition:opacity .35s ease var(--d)}
.mc-anim .mc.play .mc-node .ic::after{animation:mc-lit .7s ease var(--d) 1 both}
@keyframes mc-lit{0%{opacity:0;transform:scale(.7)}45%{opacity:1;transform:scale(1.12)}100%{opacity:0;transform:scale(1.3)}}
.mc-anim .mc .mc-bar{transform:scaleX(0)}
.mc-anim .mc.play .mc-bar{transform:scaleX(var(--v));transition:transform .7s cubic-bezier(.16,1,.3,1) var(--d)}
.mc-anim .mc.play .mc-scan{animation:ms-scan 1s ease-in-out .6s 1 both}
@keyframes ms-scan{0%{opacity:0;transform:translateY(0)}10%{opacity:1}90%{opacity:1;transform:translateY(44px)}100%{opacity:0;transform:translateY(44px)}}
/* card 2 Valdren page parts land in order after the frame rises */
.mc-anim .mc2 .mc-vp > *{opacity:0;transform:translateY(8px)}
.mc-anim .mc2.play .mc-vp > *{opacity:1;transform:none;transition:opacity .4s ease,transform .45s cubic-bezier(.16,1,.3,1)}
.mc-anim .mc2.play .mc-vp > :nth-child(1){transition-delay:1s}.mc-anim .mc2.play .mc-vp > :nth-child(2){transition-delay:1.15s}.mc-anim .mc2.play .mc-vp > :nth-child(3){transition-delay:1.3s}
.mc-anim .mc2.play .mc-vp > :nth-child(4),.mc-anim .mc2.play .mc-vp > :nth-child(5){transition-delay:1.45s}.mc-anim .mc2.play .mc-vp > :nth-child(n+6){transition-delay:1.6s}

/* Eng: the cards-header pill (Design's .stage-label lives in loop.css, which the PR scopes to .s4) */
.mc-head .stage-label{display:inline-flex;align-items:center;gap:.45rem;font-size:.72rem;font-weight:600;color:#c9cfd8;background:rgba(8,16,30,.66);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:.3rem .7rem .3rem .55rem;margin:.6rem 0 0}
.mc-head .stage-label i{width:6px;height:6px;border-radius:50%;background:var(--brass-soft,#e7c08f)}
/* Eng (Design 11:45 call 3): the 'Why this page' pill in card 2's Valdren page renders >=12px (vp is 13px, pill .86em). */
.mc-vp .vp-why b{font-size:max(.86em,12px)}