/* ============================================================
   DigiDoe — ALT homepage (Monzo structure steal, 2026-07-06)
   Linked ONLY by index-alt.html. Depends on dd-shell.css tokens.
   One skeleton, ICP toggle at nav level: html.icp-ind shows
   [data-icp="ind"] copy, default shows [data-icp="biz"].
   ============================================================ */

/* ============================================================
   OFFICIAL DESIGN-LANGUAGE KIT (web/design language/digidoe-ui-kit.html,
   asserted 2026-07-07). Token override layer: alt pages only (this file
   loads after dd-shell.css and remaps its custom properties).
   Kit font is Inter: NOT adopted (anti-slop ban + locked Hanken); flagged to Yuval.
   ============================================================ */
:root{
  --bg:#ffffff; --surface:#ffffff; --surface2:#f4f3f0; --lav:#fdf0e1;
  --ink:#121212; --soft:#2b2b2b; --faint:#5c5f66;
  --brand:#f37f00; --brand-soft:#f9dcb8; --brand-deep:#b85e00; --brand-ink:#b85e00; --brand-btn:#f37f00; --brand-bright:#f37f00;
  --on-primary:#1a1200;
  --dark:#0c0c0e; --dark2:#161616; --dark-ink:#f4f5f8; --dark-soft:#b7b7b7;
  --line:#e7e5de; --line-d:#33333a;
  --radius-sm:10px; --radius-md:16px; --radius-lg:24px; --radius-card:28px;
  --shadow-card:0 1px 2px rgba(20,25,30,.04),0 12px 28px rgba(20,25,30,.06);
  --shadow-pop:0 20px 50px rgba(20,25,30,.16);
  /* kit semantics (for future components) */
  --success:#1fa97a; --success-soft:#e3f6ee; --danger:#e5484d; --danger-soft:#fdeaea;
  --warning:#e2932a; --warning-soft:#fdf1de; --info:#3b6fe0; --info-soft:#eaf0fd;
}
/* Kit usage rules (digidoe-ui-kit.html): orange 5-15% of visible color, never dominant;
   dark bands sparingly, one or two per page. Kit's white-on-primary buttons fail AA (~2.6:1);
   we use the kit's own --on-primary (#1a1200) on primary buttons instead (~8:1). */
/* kit buttons: dark text on primary orange (kit --on-primary), hover darkens */
.btn-primary{background:var(--brand-btn);color:var(--on-primary)}
.btn-primary:hover{background:#d96e00;color:var(--on-primary)}
::selection{background:#f9dcb8}

/* One typeface page-wide (same as the nav toggles): dd-shell:3190 forces Spectral on h1/h2
   with !important; this file loads after dd-shell, so an equal-specificity !important wins. */
h1,h2{font-family:"Hanken Grotesk",system-ui,sans-serif!important}

/* ===== ICP toggle mechanics (no layout shift: pairs share one grid cell) ===== */
.icp-pair{display:grid}
.icp-pair>[data-icp]{grid-area:1/1;transition:opacity .35s var(--ease)}
html:not(.icp-ind) .icp-pair>[data-icp="ind"]{opacity:0;visibility:hidden;pointer-events:none}
html.icp-ind .icp-pair>[data-icp="biz"]{opacity:0;visibility:hidden;pointer-events:none}
@media (prefers-reduced-motion:reduce){.icp-pair>[data-icp]{transition:none}}

/* whole-section swap (page re-skin per ICP; unlike .icp-pair, these may change height) */
html:not(.icp-ind) .icp-block[data-icp="ind"]{display:none}
html.icp-ind .icp-block[data-icp="biz"]{display:none}

/* ===== ICP dropdown menus (Monzo pattern: panel under nav, sidebar + cards + trust visual) ===== */
.alt-scrim{position:fixed;inset:0;background:rgba(10,10,12,.55);z-index:99;opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility .25s}
.alt-scrim.on{opacity:1;visibility:visible}
.alt-menupanel{position:absolute;top:100%;left:0;right:0;background:#fff;border-radius:0 0 12px 12px;box-shadow:var(--shadow-pop);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;z-index:120}
.alt-menupanel.open{opacity:1;visibility:visible;transform:none}
.alt-menupanel .wrap{max-width:1340px} /* wider than page wrap (1180): Monzo panels span nearly full viewport */
.alt-menu-grid{display:grid;grid-template-columns:.8fr 1.25fr 1fr;column-gap:2.4rem;min-height:480px;position:relative} /* R10: compact panel, hairline structure */
.alt-menu-x{position:absolute;top:.9rem;right:.9rem;z-index:2;width:40px;height:40px;border-radius:50%;border:1px solid rgba(250,250,247,.35);background:rgba(10,10,12,.35);color:var(--dark-ink);cursor:pointer;display:grid;place-items:center;transition:background .18s var(--ease)}
.alt-menu-x:hover{background:rgba(10,10,12,.6)}
.alt-menu-x svg{width:16px;height:16px}
/* R10 de-puff (vision rx): NO solid fills anywhere; hairlines carry the structure.
   Fill appears ONLY on hover/active, and only the soft kit peach. */
.alt-menu-side{background:none;border-right:1px solid var(--line);border-radius:0;padding:1.6rem 1.2rem 1.6rem 0;display:flex;flex-direction:column;gap:0}
.alt-menu-side a{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.72rem .7rem;border-radius:6px;border-bottom:1px solid var(--line);font-weight:500;font-size:.94rem;color:var(--ink);transition:background .18s ease}
.alt-menu-side a:last-of-type{border-bottom:0}
.alt-menu-side a:hover,.alt-menu-side a.on{background:var(--lav)}
.alt-menu-side .chev{color:var(--faint);font-size:.85rem;line-height:1}
.alt-menu-side a:hover .chev{color:var(--brand-ink)}
.alt-menu-side .chev{color:var(--faint);font-size:1.05rem;line-height:1}
.alt-menu-main{padding:2rem .6rem 2rem 0}
.alt-menupanel svg{stroke-width:1.5} /* premium optical weight on all menu line icons */
/* R11: "What you need" heads match the sidebar eyebrow language; hairline closes the group head */
.alt-menu-main h4{margin:0 0 .3rem;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--faint)}
.alt-menu-main h4+ .desc,.alt-menu-main .desc{color:var(--soft);font-size:var(--s--1);margin-bottom:.9rem;padding-bottom:.9rem;border-bottom:1px solid var(--line)}
.alt-menu-main .menu-links{margin-top:1.1rem} /* last row's hairline separates; no double line */
.alt-menu-main h4:not(:first-child){margin-top:1.6rem}
/* R10: cards become a compact hairline LIST (Monzo row pattern), not floating islands */
.alt-menu-cards{display:block}
.alt-menu-card{background:none;border-radius:6px;border-bottom:1px solid var(--line);padding:.78rem .5rem;display:flex;flex-direction:row;align-items:center;gap:.8rem;font-size:.94rem;text-align:left;transition:background .18s ease}
.alt-menu-card:hover{background:var(--lav)}
.alt-menu-card .mic{width:18px;height:18px;display:grid;place-items:center;background:none;color:var(--brand-ink);flex:0 0 18px}
.alt-menu-card .mic svg{width:18px;height:18px}
.alt-menu-card b{font-weight:500}
.alt-menu-card.wide{border-bottom:1px solid var(--line);padding:.78rem .5rem;gap:.8rem}
/* R11: continuous hairline rhythm; every row keeps its divider */
.alt-menu-visual{position:relative;border-radius:12px;overflow:hidden;margin:1.6rem 1.6rem 1.6rem 0;min-height:calc(100% - 3.2rem)}
.alt-menu-scene{position:absolute;inset:0;background:radial-gradient(110% 90% at 80% 15%,rgba(232,117,42,.35),transparent 55%),linear-gradient(160deg,#16151A 25%,#241a12 75%,#3a2413 100%)}
.alt-menu-badges{position:absolute;top:4rem;right:1.1rem;display:flex;flex-direction:column;gap:.45rem;align-items:flex-end} /* top:4rem clears the 40px X close button in the same corner */
.alt-menu-badges .bdg{background:rgba(250,250,247,.1);border:1px solid rgba(250,250,247,.24);border-radius:100px;padding:.32rem .75rem;font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;font-weight:700;color:var(--dark-ink)}
.alt-menu-certs{position:absolute;bottom:1rem;left:1.1rem;display:flex;gap:.6rem}
.alt-menu-certs img{width:96px;height:96px;border-radius:50%;background:#fff;object-fit:contain}
.alt-menu-side .side-label{margin:0 0 .35rem;padding:.3rem .9rem 0;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--faint)}
.alt-menu-main .menu-links{margin-top:1rem;font-size:var(--s--1);color:var(--faint)}
.alt-menu-main .menu-links a{color:var(--faint);transition:color .18s var(--ease)}
.alt-menu-main .menu-links a:hover{color:var(--brand-ink)}
/* (mobile rule moved to MOBILE SOURCE OF TRUTH block at end of file) */

/* nav segmented control */
.alt-seg{display:inline-flex;background:var(--surface2);border:1px solid var(--line);border-radius:100px;padding:3px;gap:2px}
.alt-seg button{border:0;background:none;font:inherit;font-size:var(--s--1);font-weight:700;color:var(--faint);padding:.34rem .95rem;border-radius:100px;cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease)}
.alt-seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
.alt-seg .segcv{display:inline-grid;place-items:center;margin-left:.4rem;width:16px;height:16px;border-radius:50%;background:rgba(250,250,247,.18);transition:transform .2s var(--ease)}
.alt-seg button:not([aria-pressed="true"]) .segcv{background:rgba(20,20,24,.08)}
.alt-seg .segcv svg{width:9px;height:9px;display:block}
.alt-seg button[aria-expanded="true"] .segcv{transform:rotate(180deg)}
.alt-seg button:not([aria-pressed="true"]):hover{color:var(--ink)}

/* ===== 2 · HERO card (full-width rounded media card, text overlay) ===== */
.alt-hero{padding-top:clamp(1.2rem,2.5vw,2rem)}
.alt-hero-card{position:relative;border-radius:var(--radius-card,28px);overflow:hidden;background:var(--dark);color:var(--dark-ink);min-height:520px;display:flex;align-items:flex-end;isolation:isolate}
.alt-hero-scene{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(120% 90% at 82% 12%,rgba(232,117,42,.34),transparent 55%),
  radial-gradient(90% 80% at 12% 95%,rgba(240,153,82,.16),transparent 60%),
  linear-gradient(160deg,#16151A 20%,#241a12 70%,#3a2413 100%)}
.alt-hero-scene::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(250,250,247,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(250,250,247,.045) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(80% 70% at 70% 30%,#000,transparent 75%)}
.alt-hero-copy{padding:clamp(1.6rem,4vw,3.2rem);max-width:620px}
.alt-hero-copy .eyebrow{color:var(--brand-soft)} /* --brand-ink is AA on light only; soft reads ~8.8:1 on the dark card */
.alt-hero-copy h1{font-size:var(--s-4);font-weight:300;max-width:16ch;margin:.6rem 0 .9rem}
.alt-hero-copy .sub{color:var(--dark-soft);max-width:48ch}
.alt-hero-badges{position:absolute;top:clamp(1rem,2.5vw,1.8rem);right:clamp(1rem,2.5vw,1.8rem);display:flex;gap:.5rem}
.alt-hero-badges .bdg{background:rgba(250,250,247,.1);border:1px solid rgba(250,250,247,.22);backdrop-filter:none;border-radius:100px;padding:.34rem .8rem;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--dark-ink)}
.alt-hero-legal{font-size:var(--s--1);color:var(--faint);text-align:right;padding:.7rem .3rem 0}
/* hero bottom-right compliance anchor (rule 13 amendment 2026-07-07): disclosure, not decoration */
.alt-hero-anchor{position:absolute;bottom:clamp(1rem,2.5vw,1.6rem);right:clamp(1rem,2.5vw,1.6rem);display:flex;gap:.5rem}
.alt-hero-anchor .bdg{background:rgba(10,10,12,.45);border:1px solid rgba(250,250,247,.28);border-radius:100px;padding:.34rem .8rem;font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;font-weight:700;color:var(--dark-ink)}
@media (max-width:939px){.alt-hero-anchor{display:none}} /* mobile hero too tight; disclosure carried by hero legal line + footer */

/* ===== 3 · "Tell me about..." catalog list ===== */
.alt-tellme{background:var(--surface2);border-radius:var(--radius-card,28px);padding:clamp(1.8rem,4vw,3rem)}
.alt-tellme h2{font-size:var(--s-3);font-weight:300;margin-bottom:1rem}
.alt-tellme ol{list-style:none;margin:0;padding:0}
.alt-tellme li{border-top:1px solid var(--line)}
.alt-tellme li:last-child{border-bottom:1px solid var(--line)}
.alt-tellme a{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:1.05rem .2rem;font-size:var(--s-2);font-weight:500;color:var(--brand-ink);transition:padding-left .25s var(--ease)}
.alt-tellme a:hover{padding-left:.8rem}
.alt-tellme a small{font-size:var(--s--1);color:var(--faint);font-weight:400;text-align:right;max-width:34ch}

/* ===== 4/7 · tabbed tile sections ===== */
.alt-tabs{display:inline-flex;gap:.4rem;margin:1.2rem 0 1.8rem}
.alt-tabs button{border:1.5px solid var(--line);background:var(--surface);font:inherit;font-size:var(--s--1);font-weight:700;color:var(--soft);padding:.5rem 1.15rem;border-radius:100px;cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.alt-tabs button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.alt-tabs button:not([aria-selected="true"]):hover{border-color:var(--brand-soft);color:var(--ink)}
.alt-tilerow{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.alt-tilerow.three{grid-template-columns:repeat(3,1fr)}
.alt-tilepanel{display:none}.alt-tilepanel.on{display:grid}
.alt-tile{position:relative;border-radius:var(--radius-lg,24px);min-height:380px;padding:1.3rem;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;border:1px solid var(--line);transition:transform .25s var(--ease)}
.alt-tile:hover{transform:translateY(-3px)}
.alt-tile .arrow{position:absolute;top:1rem;right:1rem;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(10,10,12,.14);color:currentColor}
.alt-tile h3{font-size:var(--s-1);font-weight:600;margin-bottom:.4rem}
.alt-tile p{font-size:var(--s--1);line-height:1.5}
/* photo tiles (Monzo pattern: image card, text overlaid bottom, gradient scrim for legibility).
   Source PNGs are 287x236: tiles render ~280px wide so they stay sharp. */
.alt-tile.has-img{border:0;color:#fff}
.alt-tile.has-img .tile-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.alt-tile.has-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,12,0) 30%,rgba(10,10,12,.82) 82%);z-index:-1}
.alt-tile.has-img p{color:rgba(250,250,247,.85)}
.alt-tile.has-img .arrow{background:rgba(250,250,247,.22);color:#fff}
/* photo card: small image floated as a rounded card on larger surfaces (keeps 287px sharp) */
.photo-card{display:block;width:min(287px,80%);border-radius:var(--radius-md,16px);box-shadow:0 28px 56px -26px rgba(10,10,12,.55);border:1px solid rgba(250,250,247,.18)}
.alt-split-media .photo-card,.alt-menu-visual .photo-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-2deg)}
.alt-menu-visual .photo-card{width:min(320px,86%)} /* rebalanced after compliance marks removed */
.alt-trustband .photo-card{position:absolute;right:clamp(1.5rem,6vw,5rem);top:50%;transform:translateY(-50%) rotate(2.5deg)}
/* (mobile rule moved to MOBILE SOURCE OF TRUTH block at end of file) */

/* tint variants: rhythm without identical cards */
.alt-tile.t-ink{background:linear-gradient(170deg,#1d1c22,#2c2118);color:var(--dark-ink)}.alt-tile.t-ink p{color:var(--dark-soft)}
.alt-tile.t-cream{background:var(--surface2);color:var(--ink)}.alt-tile.t-cream p{color:var(--soft)}
.alt-tile.t-brand{background:linear-gradient(165deg,var(--lav),#f6d9bd);color:var(--ink)}.alt-tile.t-brand p{color:var(--soft)}
.alt-tile.t-paper{background:var(--surface);color:var(--ink)}.alt-tile.t-paper p{color:var(--soft)}
.alt-tile .glyph{position:absolute;top:1.1rem;left:1.1rem;width:40px;height:40px;color:var(--brand);opacity:.9}
.alt-foot{font-size:var(--s--1);color:var(--faint);margin-top:1rem;max-width:88ch}
/* informative spec chips on money-flow tiles */
.tile-spec{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.6rem}
.tile-spec span{font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;padding:.18rem .55rem;border-radius:100px;border:1px solid currentColor;opacity:.72}

/* ===== 5/14 · asymmetric split (40/60) ===== */
.alt-split{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.alt-split.flip{grid-template-columns:1.15fr .85fr}
.alt-split h2{font-size:var(--s-3);font-weight:300;margin-bottom:.9rem}
.alt-split .lead{margin-bottom:1.5rem}
.alt-split-media{border-radius:var(--radius-card,28px);min-height:380px;overflow:hidden;position:relative;background:var(--surface2);border:1px solid var(--line)}
.alt-split-media.dark{background:linear-gradient(150deg,#16151A,#2e2015);border:0}
.alt-split-media img{width:100%;height:100%;object-fit:cover;display:block}

/* ===== 6/9 · rounded promo bands ===== */
.alt-band{border-radius:var(--radius-card,28px);padding:clamp(1.8rem,4vw,3rem);display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.alt-band.dark{background:var(--dark);color:var(--dark-ink)}
.alt-band.dark .muted{color:var(--dark-soft)}
.alt-band.brand{background:linear-gradient(150deg,#7A3A0A,#96470D);color:#fff} /* darker stops: white text ~6:1 AA */
.alt-band.brand .muted{color:#fff}
.alt-band h2{font-size:var(--s-3);font-weight:300;margin-bottom:.7rem}
.alt-band .art{width:clamp(120px,16vw,200px);aspect-ratio:1;display:grid;place-items:center}
.alt-band .art svg{width:100%;height:auto}

/* ===== 8 · product carousel (soft card, fan left / copy right) ===== */
.alt-caro{background:var(--surface2);border-radius:var(--radius-card,28px);padding:clamp(1.8rem,4vw,3rem)}
.alt-caro h2{font-size:var(--s-3);font-weight:300;text-align:center;max-width:22ch;margin:0 auto 2rem}
.alt-caro-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.alt-fan{position:relative;min-height:300px}
.alt-fan .card{position:absolute;width:min(300px,72%);aspect-ratio:1.586;border-radius:var(--radius-md,16px);left:50%;top:50%;box-shadow:0 24px 48px -24px rgba(26,22,18,.45);border:1px solid rgba(255,255,255,.16);padding:1rem;color:#fff;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;transform:var(--tf);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.alt-fan .card:nth-child(1){--tf:translate(-62%,-46%) rotate(-9deg);background:linear-gradient(150deg,#2c2b33,#141418)}
.alt-fan .card:nth-child(2){--tf:translate(-50%,-50%) rotate(-2deg);background:linear-gradient(150deg,#8A420C,var(--brand-deep))}
.alt-fan .card:nth-child(3){--tf:translate(-38%,-54%) rotate(6deg);background:linear-gradient(150deg,#F09952,#f6d9bd);color:var(--ink)}
/* selected plan pops out of the fan (synced to carousel slide) */
.alt-fan .card.pop{transform:var(--tf) translateY(-28px) scale(1.07);z-index:3;box-shadow:0 36px 64px -26px rgba(26,22,18,.55)}
@media (prefers-reduced-motion:reduce){.alt-fan .card{transition:none}}
.alt-caro-nav{display:flex;gap:.5rem;margin-bottom:1rem}
.alt-caro-nav button{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);cursor:pointer;font-size:1rem;color:var(--ink);transition:border-color .2s var(--ease)}
.alt-caro-nav button:hover{border-color:var(--brand)}
/* grid-stack slides: container height = tallest slide, no jump between plans */
[data-alt-caro]{display:grid;grid-template-columns:1fr}
[data-alt-caro] .alt-caro-nav{grid-row:1;grid-column:1}
.alt-caro-slide{display:block;grid-row:2;grid-column:1;visibility:hidden;opacity:0;transition:opacity .35s var(--ease,ease)}
.alt-caro-slide.on{visibility:visible;opacity:1}
.alt-caro-slide h3{font-size:var(--s-2);font-weight:500;margin-bottom:.6rem}

/* ===== 10 · security: airy Monzo split (device left, few items right, big spacing) ===== */
.alt-sec2{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:center;margin-top:clamp(2rem,4vw,3.2rem)}
.alt-sec2 .devwrap{width:min(360px,100%);margin-inline:auto}
.alt-secitem{display:flex;gap:1.1rem;margin-top:2.1rem}
.alt-secitem:first-child{margin-top:0}
.alt-secitem .ic{flex:0 0 44px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--lav);color:var(--brand-ink)}
.alt-secitem b{display:block;font-size:var(--s-1);font-weight:600;margin-bottom:.25rem}
.alt-secitem p{font-size:var(--s-0);color:var(--faint);line-height:1.55;max-width:44ch}

/* ===== 11 · full-bleed trust band ===== */
.alt-trustband{border-radius:var(--radius-card,28px);overflow:hidden;position:relative;min-height:380px;display:flex;align-items:flex-end;background:
  radial-gradient(100% 90% at 85% 10%,rgba(232,117,42,.3),transparent 55%),
  linear-gradient(160deg,#1a1820,#241a12)}
.alt-trustband .copy{padding:clamp(1.6rem,4vw,3rem);color:var(--dark-ink);max-width:640px}
.alt-trustband h2{font-size:var(--s-3);font-weight:300}

/* ===== 12 · access band: classic phone + Cleared check ===== */
.alt-phone{width:clamp(120px,13vw,168px);aspect-ratio:9/19;border-radius:var(--radius-card,28px);border:2px solid rgba(255,255,255,.5);background:#16151A;padding:10px;margin-inline:auto;transform:rotate(-3deg)}
.alt-phone-screen{height:100%;border-radius:var(--radius-md,16px);background:var(--bg);display:grid;place-items:center;text-align:center}
.alt-clear{width:56px;height:56px;border-radius:50%;background:var(--brand-btn);color:#fff;display:grid;place-items:center;margin-inline:auto}
.alt-clear svg{width:26px;height:26px}
.alt-phone-screen b{display:block;color:var(--ink);font-size:.95rem;margin-top:.55rem}
.alt-phone-screen span{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}

/* ===== 13 · stat callout (layered card) ===== */
.alt-stat{text-align:center}
.alt-stat h2{font-size:var(--s-3);font-weight:300;margin-bottom:2rem}
.alt-statcard{position:relative;display:inline-block;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg,24px);padding:2.2rem 3.2rem;box-shadow:0 24px 48px -28px rgba(26,22,18,.3)}
.alt-statcard::before,.alt-statcard::after{content:"";position:absolute;inset:0;border-radius:var(--radius-lg,24px);z-index:-1}
.alt-statcard::before{background:var(--brand);transform:rotate(-2.5deg) translateY(6px)}
.alt-statcard::after{background:var(--dark);transform:rotate(2deg) translateY(10px);z-index:-2}
.alt-statcard b{display:block;font-size:var(--s-3);font-weight:500}
.alt-statcard span{color:var(--faint)}

/* ===== 14 · compliance blocks ===== */
.alt-comp{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}
.alt-comp .tag{display:inline-block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--faint);border:1px solid var(--line);border-radius:100px;padding:.3rem .8rem;margin-bottom:1rem}
.alt-comp h2{font-size:var(--s-2);font-weight:400;margin-bottom:.8rem}
.alt-compcard{background:var(--surface2);border:1px solid var(--line);border-radius:var(--radius-md,16px);padding:1.5rem;margin-bottom:1rem}
.alt-compcard h3{font-size:var(--s-0);font-weight:700;margin-bottom:.6rem}
.alt-compcard p{font-size:var(--s--1);color:var(--soft);line-height:1.55}

/* footer: enlarged ISO cert badges (wordmark removed 2026-07-06 per Yuval) + compression */
.alt-cert-lg{width:118px!important;height:118px!important}
footer.site .wrap{padding-top:1.6rem}
footer.site .fgrid{gap:1.4rem;margin-bottom:1.2rem}
footer.site .fcol a{padding:.18rem 0;font-size:var(--s--1)}
footer.site .compliance{margin-top:1rem}
footer.site .compliance p{font-size:.78rem;line-height:1.45;margin:.4rem 0}

/* nav segment as plain link (inactive lane navigates to sibling home, Monzo pattern).
   R11: it must FEEL clickable when the other lane's menu is open: pill preview on hover. */
.alt-seg .seg-link{display:inline-flex;align-items:center;font-size:var(--s--1);font-weight:700;color:var(--faint);padding:.34rem .95rem;border-radius:100px;text-decoration:none;transition:background .18s ease,color .18s ease,box-shadow .18s ease;min-height:44px}
.alt-seg .seg-link:hover{color:var(--ink);background:#fff;box-shadow:inset 0 0 0 1.5px var(--line)}
/* wf chip: small designer-awareness marker on placeholder scenes */
.wf-chip{position:absolute;left:clamp(1rem,2.5vw,1.6rem);bottom:clamp(1rem,2.5vw,1.6rem);z-index:2;border:1.5px dashed rgba(250,250,247,.5);border-radius:100px;padding:.3rem .75rem;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:rgba(250,250,247,.75);background:rgba(10,10,12,.35)}
/* trio strip: 3-col icon+title+copy (Monzo business trust row) */
.alt-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,3rem);text-align:center;max-width:980px;margin:0 auto}
.alt-trio .ic{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--lav);color:var(--brand-ink);margin:0 auto 1rem}
.alt-trio b{display:block;font-size:var(--s-1);font-weight:600;margin-bottom:.35rem}
.alt-trio p{font-size:var(--s--1);color:var(--faint);max-width:30ch;margin:0 auto}
/* 6-card feature grid (Monzo business "packed with everything") */
.alt-grid6{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.alt-grid6 .g{background:var(--surface2);border-radius:var(--radius-md,16px);padding:1.6rem 1.4rem}
.alt-grid6 .g .ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--brand-ink);margin-bottom:.8rem}
.alt-grid6 .g b{display:block;font-weight:600;margin-bottom:.3rem}
.alt-grid6 .g p{font-size:var(--s--1);color:var(--faint)}
/* testimonial quote fold (Monzo business pattern) */
.alt-quote{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;background:var(--surface2);border-radius:var(--radius-card,28px);padding:clamp(1.8rem,4vw,3rem)}
.alt-quote blockquote{margin:0;font-size:var(--s-1);font-weight:300;line-height:1.5}
.alt-quote figcaption{margin-top:1rem;font-size:var(--s--1);color:var(--faint)}
@media (max-width:939px){.alt-trio{grid-template-columns:1fr}.alt-grid6{grid-template-columns:1fr 1fr}.alt-quote{grid-template-columns:1fr}}
@media (max-width:560px){.alt-grid6{grid-template-columns:1fr}}

/* ===== platform showcase fold (R9, Monzo security-fold pattern): big flat devices,
   flanking plain-language blurbs, no callout lines. Screens are .wf slots until real
   platform screenshots land (enlarged + legible, so users won't fear the product). ===== */
.alt-showcase{display:grid;grid-template-columns:1fr minmax(340px,560px) 1fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
.alt-showcase .sc-copy h2{font-size:var(--s-3);font-weight:300;margin-bottom:.7rem}
.alt-showcase .sc-copy .lead{margin-bottom:1.4rem}
.sc-item{margin-top:1.8rem}
.sc-item b{display:block;font-weight:600;margin-bottom:.3rem}
.sc-item p{font-size:var(--s--1);color:var(--faint);line-height:1.55;max-width:34ch}
.sc-item.hl{background:var(--lav);border-radius:var(--radius-md,16px);padding:1.2rem 1.3rem;margin-top:1.4rem}
.sc-devices{position:relative;padding-bottom:3.5rem}
.dev-laptop{background:#0c0c0e;border-radius:14px;padding:12px 12px 20px;box-shadow:var(--shadow-pop)}
.dev-laptop .screen{aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:var(--surface2)}
.dev-laptop::after{content:"";display:block;height:8px;margin:0 -22px -20px;background:#1c1b20;border-radius:0 0 12px 12px}
.dev-phone{position:absolute;right:-4%;bottom:0;width:clamp(96px,22%,132px);aspect-ratio:9/19;background:#0c0c0e;border-radius:20px;padding:7px;box-shadow:var(--shadow-pop)}
.dev-phone .screen{height:100%;border-radius:14px;overflow:hidden;background:var(--surface2)}
.sc-devices .wf{border-radius:0;min-height:100%;height:100%;border-width:1.5px}
.sc-devices .wf .wf-label{font-size:.56rem;padding:.3rem .6rem}
@media (max-width:939px){.alt-showcase{grid-template-columns:1fr}.sc-devices{order:-1;max-width:480px;margin-inline:auto;width:100%}}

/* ===== wireframe placeholder (R8): marks a designer-asset slot; see deliverables/alt-design-handoff/fold-narratives.md ===== */
.wf{position:relative;border:2px dashed var(--faint);border-radius:var(--radius-md,16px);min-height:220px;display:grid;place-items:center;background:
  linear-gradient(to top right,transparent calc(50% - 1px),rgba(120,122,128,.28) 50%,transparent calc(50% + 1px)),
  linear-gradient(to bottom right,transparent calc(50% - 1px),rgba(120,122,128,.28) 50%,transparent calc(50% + 1px)),var(--surface2)}
.wf .wf-label{background:var(--surface);border:1px solid var(--line);border-radius:100px;padding:.45rem 1rem;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--faint);text-align:center;max-width:80%}
.wf.wf-dark{background:
  linear-gradient(to top right,transparent calc(50% - 1px),rgba(250,250,247,.22) 50%,transparent calc(50% + 1px)),
  linear-gradient(to bottom right,transparent calc(50% - 1px),rgba(250,250,247,.22) 50%,transparent calc(50% + 1px)),#1a191e;border-color:rgba(250,250,247,.35)}
.wf.wf-dark .wf-label{background:rgba(10,10,12,.6);border-color:rgba(250,250,247,.3);color:var(--dark-soft)}
.wf.wf-tall{min-height:380px}.wf.wf-hero{min-height:520px;border-radius:var(--radius-card,28px)}

/* rhythm helpers */
.alt-gap{padding-block:clamp(2.2rem,4vw,3.6rem)}
@media (prefers-reduced-motion:reduce){.alt-tile:hover{transform:none}}

/* QA hook: fullPage screenshots leave scroll-driven animations at their from-state (opacity 0).
   QA scripts add html.qa-static before capturing to force everything visible. Not for production use. */
html.qa-static main *{animation:none!important}
html.qa-static .reveal{opacity:1!important;transform:none!important;transition:none!important}

/* ============================================================
   PREMIUM SCROLL EFFECTS (R4, Yuval: every section, sexy + premium)
   CSS scroll-driven animations (animation-timeline: view()).
   Browsers without support keep the JS .reveal system (dd-shell).
   Only transform + opacity animate. Containers are animated, never
   hover-carrying children (fill-mode would pin their transforms).
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    /* scroll timelines take over from the JS reveal */
    .reveal{opacity:1;transform:none;transition:none}
    .stagger>.reveal{transition:none}

    main{overflow-x:clip} /* slide-in keyframes translate horizontally mid-scroll; never let that create page overflow */
    @keyframes alt-rise{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
    @keyframes alt-rise-soft{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
    @keyframes alt-scale-in{from{opacity:0;transform:translateY(28px) scale(.965)}to{opacity:1;transform:none}}
    @keyframes alt-slide-l{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
    @keyframes alt-slide-r{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
    @keyframes alt-parallax{from{transform:scale(1.12) translateY(2.5%)}to{transform:scale(1.12) translateY(-2.5%)}}

    /* big surfaces breathe in */
    .alt-hero-card,.alt-tellme,.alt-band,.alt-caro,.alt-trustband{
      animation:alt-scale-in both;animation-timeline:view();animation-range:entry 0% entry 42%}
    /* headings + leads rise */
    main section h2,main section .lead{
      animation:alt-rise-soft both;animation-timeline:view();animation-range:entry 0% entry 45%}
    /* tile rows rise as a rank (hover lift on tiles stays intact) */
    .alt-tilerow{animation:alt-rise both;animation-timeline:view();animation-range:entry 0% entry 48%}
    /* splits: copy from the left, media from the right */
    .alt-split>div:first-child{animation:alt-slide-l both;animation-timeline:view();animation-range:entry 0% entry 50%}
    .alt-split-media{animation:alt-slide-r both;animation-timeline:view();animation-range:entry 0% entry 50%}
    /* security device floats up a touch later than its column */
    .alt-sec2 .devwrap{animation:alt-rise both;animation-timeline:view();animation-range:entry 5% entry 60%}
    .alt-sec2 .stagger{animation:alt-rise-soft both;animation-timeline:view();animation-range:entry 0% entry 50%}
    /* scenic backdrops drift (parallax) while their card crosses the viewport */
    .alt-hero-scene,.alt-trustband{background-attachment:scroll}
    .alt-hero-scene{animation:alt-parallax linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}

/* ============================================================
   MOBILE SOURCE OF TRUTH (owner: mobile pass, 2026-07-06)
   EVERY mobile rule for index-alt.html lives HERE and only here.
   Contract: zero horizontal overflow 320-430px, both ICP states;
   44px tap targets; drawer = mobile nav (menu panels desktop-only);
   sticky conversion CTA. dd-shell.css mobile rules still apply
   (shared shell); this block owns the alt-page layer on top.
   ============================================================ */
@media (max-width:939px){
  /* nav: logo + seg + burger fit one row on narrow phones */
  .burger{padding:.6rem .8rem;min-height:44px;min-width:44px}
  .brand-logo{height:27px}
  .alt-seg{padding:2px}
  .alt-seg button{padding:.34rem .5rem;font-size:.7rem;min-height:44px}
  .alt-seg .segcv{display:none} /* caret implies a dropdown; panels are desktop-only */
  .wrap.nav{gap:.4rem}
  /* ICP menu panels: desktop pattern only; drawer is the mobile nav */
  .alt-menupanel{display:none!important}
  /* grids collapse */
  .alt-tilerow,.alt-tilerow.three{grid-template-columns:1fr 1fr}
  .alt-tile{min-height:260px}
  .alt-split,.alt-split.flip,.alt-caro-grid,.alt-comp,.alt-sec2{grid-template-columns:1fr}
  .alt-sec2 .devwrap{width:min(330px,80vw)}
  .alt-band{grid-template-columns:1fr;text-align:left}
  .alt-hero-card{min-height:420px}
  .alt-tellme a{font-size:var(--s-1);flex-direction:column;align-items:flex-start;gap:.2rem}
  /* photo cards: trustband hides (band is short on mobile); S5/S12 stay, statically sized */
  .alt-trustband .photo-card{display:none}
  .alt-split-media{min-height:300px}
  /* mobile conversion CTA: OWNED by dd-shell.js .stickycta (auto-injected, appears after 1.2vh
     scroll, coordinates with chatbot FAB + cookiebar). Do NOT add a page-level duplicate. */
}
@media (max-width:560px){
  .alt-tilerow,.alt-tilerow.three{grid-template-columns:1fr}
}



/* ===== v-pack (2026-07-09) · designed-pack photography integration =====
   Assets cropped from `designed pack/` comps (fold-narratives.md slots).
   Heroes: photo sits under a left scrim so live HTML type stays AA on all widths. */
.alt-hero-scene.photo::after{display:none} /* grid overlay off on photo heroes */
/* one pattern, per-page image via custom property (photos are left-alpha-feathered crops) */
.alt-hero-scene.photo{background:
  linear-gradient(96deg,rgba(18,15,12,.94) 0%,rgba(18,15,12,.72) 40%,rgba(18,15,12,.22) 66%,rgba(18,15,12,0) 82%),
  var(--hero-img) right center/auto 100% no-repeat,
  linear-gradient(160deg,#16151A 20%,#241a12 70%,#3a2413 100%)}
@media (max-width:939px){ /* text spans full card: photo goes cover + heavy even scrim */
  .alt-hero-scene.photo{background:
    linear-gradient(180deg,rgba(18,15,12,.72),rgba(18,15,12,.88)),
    var(--hero-img) center/cover no-repeat,#16151A}
}
.photo-biz{--hero-img:url(dd-web-images/hero-business.webp)}
.photo-ind{--hero-img:url(dd-web-images/hero-individuals.webp)}
.photo-emiaas{--hero-img:url(dd-web-images/hero-emiaas.webp)}
.photo-pay{--hero-img:url(dd-web-images/hero-payments.webp)}
.photo-mc{--hero-img:url(dd-web-images/hero-multicur.webp)}
.photo-about{--hero-img:url(dd-web-images/photo-about-feather.webp)}
/* security split recomposed (v-pack2): device anchored on a warm dark media panel,
   controls as a structured divided list — no more orphaned mockup on flat beige */
@media (min-width:940px){.alt-sec2{grid-template-columns:1.1fr .9fr}}
.alt-sec2 .devwrap{width:100%;margin:0;border-radius:var(--radius-card,28px);padding:clamp(1.8rem,3.5vw,3rem);background:
  radial-gradient(120% 110% at 80% -5%,rgba(232,117,42,.30),transparent 55%),
  radial-gradient(80% 70% at 8% 100%,rgba(240,153,82,.12),transparent 60%),
  linear-gradient(150deg,#16151A 25%,#2b1d11 100%)}
.sec-device{width:100%;height:auto;display:block;border-radius:14px;box-shadow:0 40px 70px -30px rgba(0,0,0,.6),0 8px 22px -12px rgba(0,0,0,.4)}
.alt-sec2 .devwrap .alt-foot{color:rgba(250,250,247,.62);text-align:left;margin-top:1.2rem}
.alt-secitem{padding:1.35rem 0;margin:0;border-top:1px solid var(--line)}
.alt-secitem:first-child{border-top:0;padding-top:0}
.alt-secitem p{margin:.3rem 0 0;color:var(--soft);font-size:var(--s--1);max-width:38ch}
.alt-sec2 .stagger>p:last-child{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--line)}
@media (max-width:939px){
  .alt-sec2 .devwrap{width:100%;padding:1.2rem}
  .sc-devices{padding-inline:22px} /* dev-laptop lid bar has -22px margins; keep it inside the viewport */
}


/* ===== v-pack2 (2026-07-09) · showcase screens + scroll choreography ===== */
/* real screenshot fills a device screen edge-to-edge */
.sc-shot{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
/* branded screen for folds without an honest platform screenshot yet — deliberate, not a wireframe */
.sc-brand{height:100%;display:grid;place-content:center;justify-items:center;gap:.7rem;background:
  radial-gradient(120% 100% at 80% -5%,rgba(232,117,42,.28),transparent 55%),
  linear-gradient(150deg,#16151A 30%,#2b1d11 100%)}
.sc-brand img{width:42%;max-width:150px;opacity:.92}
.sc-brand span{color:rgba(250,250,247,.55);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.dev-phone .sc-brand img{width:60%}
.dev-phone .sc-brand span{display:none}
.sc-devices .sc-note{position:absolute;left:2px;bottom:1.1rem;font-size:.62rem;color:var(--faint);letter-spacing:.04em}
/* quote-only testimonial (portrait joins when a consented photo exists) */
.alt-quote-solo{grid-template-columns:1fr;position:relative;overflow:hidden}
.alt-quote-solo>div{max-width:56ch;margin-inline:auto;text-align:left;position:relative;z-index:1}
.alt-quote-solo blockquote{font-size:var(--s-2)}
.alt-quote-solo .qmark{position:absolute;top:-1.6rem;left:-2.4rem;font-family:"Spectral",serif;font-size:7rem;line-height:1;color:rgba(232,117,42,.18);pointer-events:none;user-select:none}
/* scroll choreography: laptop and phone arrive separately (view-timeline, motion-safe only) */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .sc-devices .dev-laptop{animation:alt-rise both;animation-timeline:view();animation-range:entry 0% entry 55%}
    .sc-devices .dev-phone{animation:alt-slide-r both;animation-timeline:view();animation-range:entry 12% entry 70%}
    .alt-trustband .photo-card{animation:tb-settle both;animation-timeline:view();animation-range:entry 0% entry 60%}
    @keyframes tb-settle{from{opacity:0;transform:translateY(-42%) rotate(6deg)}to{opacity:1;transform:translateY(-50%) rotate(2.5deg)}}
  }
}


/* ===== v-pack3 (2026-07-09) · messaging-hierarchy components ===== */
/* L4 journey — editorial ordinals (v2, 2026-07-09): oversized ghost numerals in the type
   hierarchy, asymmetric stagger, drawn hairlines. No circles, no rail, no stepper. */
.dd-journey{margin-top:clamp(1.6rem,3vw,2.6rem)}
.dd-jstage{position:relative;display:grid;grid-template-columns:minmax(84px,140px) 1fr;gap:clamp(1rem,3vw,2.4rem);align-items:start;padding:clamp(1.6rem,3vw,2.4rem) 0;border-top:1px solid var(--line)}
.dd-jstage::before{content:"";position:absolute;top:-1px;left:0;width:100%;height:1px;background:var(--brand);transform-origin:left;transform:scaleX(1)}
.dd-jstage .num{font-size:clamp(3.2rem,7vw,5.6rem);font-weight:250;line-height:.9;letter-spacing:-.03em;color:var(--brand);opacity:.34;font-variant-numeric:tabular-nums;background:none;padding:0;border:0} /* reset: dd-shell .num stat-block rule leaks a dark box otherwise */
.dd-jstage h3{font-size:var(--s-1);font-weight:500;margin-bottom:.5rem}
.dd-jstage p{color:var(--soft);max-width:52ch}
/* asymmetric stagger — each stage steps deeper into the grid */
@media (min-width:940px){
  .dd-jstage:nth-child(2){margin-left:8%}
  .dd-jstage:nth-child(3){margin-left:16%}
}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .dd-jstage::before{animation:dd-jline linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    .dd-jstage .num{animation:dd-numslide both;animation-timeline:view();animation-range:entry 5% entry 55%}
  }
}
@keyframes dd-jline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes dd-numslide{from{opacity:0;transform:translateX(-18px)}to{opacity:.34;transform:none}}
/* chip row (L6 feature chips on dark bands) */
.chiprow{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.chiprow span{border:1px solid rgba(250,250,247,.28);background:rgba(250,250,247,.07);border-radius:100px;padding:.4rem .9rem;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:rgba(250,250,247,.85)}
.photo-companies{--hero-img:url(dd-web-images/hero-companies.webp)}
.photo-teams{--hero-img:url(dd-web-images/hero-teams.webp)}
.photo-compliance{--hero-img:url(dd-web-images/hero-compliance.webp)}
.alt-tilerow.four{grid-template-columns:repeat(4,1fr)}
.alt-tilerow.compact .alt-tile{min-height:230px}
@media (max-width:939px){.alt-tilerow.four{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.alt-tilerow.four{grid-template-columns:1fr}}


/* ===== v-pack3b · scroll choreography extension (motion-safe, view-timeline) ===== */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    /* L6 chips ripple in */
    .chiprow span{animation:alt-rise-soft both;animation-timeline:view()}
    .chiprow span:nth-child(odd){animation-range:entry 5% entry 45%}
    .chiprow span:nth-child(even){animation-range:entry 15% entry 55%}
    /* feature grid rises as a rank */
    .alt-grid6 .g{animation:alt-rise-soft both;animation-timeline:view()}
    .alt-grid6 .g:nth-child(3n+1){animation-range:entry 0% entry 42%}
    .alt-grid6 .g:nth-child(3n+2){animation-range:entry 8% entry 50%}
    .alt-grid6 .g:nth-child(3n){animation-range:entry 16% entry 58%}
    /* dark-band art drifts a touch slower than the band (parallax depth) */
    .alt-band .art{animation:dd-artdrift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    /* ghost quote-mark settles */
    .alt-quote-solo .qmark{animation:dd-qmark both;animation-timeline:view();animation-range:entry 0% entry 60%}
  }
}
@keyframes dd-numpop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes dd-artdrift{from{transform:translateY(6%)}to{transform:translateY(-6%)}}
@keyframes dd-qmark{from{opacity:0;transform:translateY(14px) scale(.92)}to{opacity:1;transform:none}}


/* ===== v-pack4 (2026-07-09) · premium media scroll-settle, sitewide consistency ===== */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    /* every designed visual settles from a slight zoom as it enters — one shared register */
    .alt-split-media img:not(.photo-card),.sec-device,.alt-tile .tile-img,.sc-shot,.alt-band .art img{
      animation:dd-imgsettle both;animation-timeline:view();animation-range:entry 0% entry 55%}
    /* trustband photo-card keeps its own settle (rotation-aware) */
    .alt-trustband .photo-card{animation:tb-settle both;animation-timeline:view();animation-range:entry 0% entry 60%}
    /* blog cards rise as a rank, thumbnails settle */
    .bloggrid .bcard{animation:alt-rise-soft both;animation-timeline:view()}
    .bloggrid .bcard:nth-child(3n+1){animation-range:entry 0% entry 42%}
    .bloggrid .bcard:nth-child(3n+2){animation-range:entry 8% entry 50%}
    .bloggrid .bcard:nth-child(3n){animation-range:entry 16% entry 58%}
    .feature .fmedia img{animation:dd-imgsettle both;animation-timeline:view();animation-range:entry 0% entry 55%}
    /* emiaas flow nodes cascade */
    .flow .node{animation:alt-rise-soft both;animation-timeline:view()}
    .flow .node:nth-child(1){animation-range:entry 0% entry 40%}
    .flow .node:nth-child(2){animation-range:entry 10% entry 50%}
    .flow .node:nth-child(3){animation-range:entry 20% entry 60%}
  }
}
@keyframes dd-imgsettle{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:none}}