/* ============================================================

html{scrollbar-gutter:stable}


   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: ADOPTED site-wide 2026-09-14 (Yuval). Was rejected here on 2026-07-07
   for an anti-slop ban plus a locked Hanken body; the ban lost to one-family coherence.
   ============================================================ */
: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:#fff; /* designer 2026-07-13: white text on orange buttons (was #1a1200; note: white on #f37f00 ≈ 2.5:1, below AA - designer decision) */
  --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);
   --on-primary is white per designer (2026-07-13); hover darkens the orange to claw back contrast. */
/* kit buttons: white text on primary orange, 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:'Inter',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) ===== */
/* ===== MEGA-MENU · designer dropdown pack, 2026-10-12 (projects/digidoe/Dropdown menu/) =====
   One shell for the three menus. The panels #menu-biz / #menu-ind / #menu-ptr stay in the
   markup where every tool reads them (sync-menus.py, readiness, the freeze); alt-home.js
   moves them into .alt-shell-panel at load. The shell paints the two column backgrounds
   and unfolds (§10); the panels crossfade inside it. Every number below is the spec's
   (§5 to §8), checked against the Figma PDFs. The audience hover-filter (data-aud /
   data-for, alt-home.js) is untouched: it lives inside each panel. */
:root{--dd-ink:#121212;--dd-muted:#5C5750;--dd-orange:#F37F00;--dd-link:#B75F00;--dd-sand:#F4F3F0;
  --dd-left-hover:#E9E7E2;--dd-left-active:#CCC8BC;--dd-right-hover:#F6F6F3;--dd-right-active:#D6D2C7;
  --dd-ease-out:cubic-bezier(.2,0,0,1);--dd-ease-in:cubic-bezier(.4,0,1,1)}

/* §5 overlay: 30% black over the page AND the bar (alt-home.js moves it inside header.site),
   under the panel, never in the pointer's way */
.alt-scrim{position:fixed;inset:0;background:rgba(0,0,0,.30);z-index:1;pointer-events:none;
  opacity:0;visibility:hidden;transition:opacity 150ms var(--dd-ease-in),visibility 0s linear 150ms}
.alt-scrim.on{opacity:1;visibility:visible;transition:opacity 200ms var(--dd-ease-out),visibility 0s}

/* §6.1 shell: 1040 x 520 at x=160 of the 1440 bar (the .wrap puts it there), 20px bridge above */
.alt-shell{position:absolute;top:100%;left:0;right:0;z-index:120;pointer-events:none}
.alt-shell > .wrap{max-width:1280px!important;padding:0 80px!important;margin:0 auto!important;pointer-events:none}
.alt-shell-panel{position:relative;width:1040px;height:520px;pointer-events:auto;
  visibility:hidden;clip-path:inset(0 0 100% 0);transform:translateY(-6px);
  transition:clip-path 200ms var(--dd-ease-in),transform 200ms var(--dd-ease-in),visibility 0s linear 200ms}
.alt-shell-panel.is-open{visibility:visible;clip-path:inset(-20px 0 0 0);transform:none;
  transition:clip-path 360ms var(--dd-ease-out),transform 360ms var(--dd-ease-out),visibility 0s}
.alt-shell-panel::before{content:"";position:absolute;left:0;right:0;top:-20px;height:20px}
.alt-shell-bg{position:absolute;inset:0;display:flex;pointer-events:none}
.alt-shell-bg-l{width:380px;height:520px;background:var(--dd-sand);border-radius:24px 0 0 24px}
.alt-shell-bg-r{width:660px;height:520px;background:#fff;border-radius:0 24px 24px 0}

/* the three panels, stacked in the shell; §10 fade + drop on switch */
.alt-menupanel{position:absolute;inset:0;width:1040px;height:520px;background:transparent;border-radius:0;box-shadow:none;z-index:auto;
  pointer-events:none;visibility:hidden;opacity:0;transform:translate3d(0,-14px,0);
  transition:opacity 140ms var(--dd-ease-in),transform 0s linear 140ms,visibility 0s linear 140ms}
.alt-menupanel.open{visibility:visible;opacity:1;transform:translate3d(0,0,0);pointer-events:auto;
  transition:opacity 240ms var(--dd-ease-out) 40ms,transform 320ms var(--dd-ease-out) 40ms,visibility 0s}
.alt-shell-panel.instant > .alt-menupanel{transition:none}
/* four class parts and !important on purpose: sept-ind2909.css:348 re-pads the panel's .wrap at
   (0,3,0)!important, and partners.html carries an inline .alt-menu-grid{background:#fff} */
.alt-shell .alt-shell-panel > .alt-menupanel > .wrap{max-width:none!important;padding:0!important;margin:0!important;width:1040px;pointer-events:auto}
.alt-menu-grid,.alt-shell .alt-shell-panel .alt-menu-grid{display:grid;grid-template-columns:380px 660px;column-gap:0;width:1040px;max-width:none;height:520px;min-height:0;
  position:relative;padding:0;background:transparent!important;border-radius:0;box-shadow:none;overflow:visible}
.alt-menu-x,.alt-menu-visual,.alt-menu-scene,.alt-menu-badges,.alt-menu-certs{display:none}

/* §10 rows drop in one after another on the first open (alt-home.js stamps --i per column) */
.alt-shell-panel.unfolding > .alt-menupanel.open .stg{animation:ddRowDrop 340ms var(--dd-ease-out) both;animation-delay:calc(70ms + var(--i,0) * 28ms)}
@keyframes ddRowDrop{from{opacity:0;transform:translate3d(0,-10px,0)}to{opacity:1;transform:none}}

/* §6.3 left column, "Who you are" */
.alt-menu-side{width:380px;height:520px;padding:30px;margin:0;background:transparent;border:0;border-radius:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:0;overflow:hidden}
.alt-menu-side .side-label{margin:0;width:320px;height:48px;padding:14px 20px;display:flex;align-items:center;
  font-size:14px;line-height:17px;font-weight:500;letter-spacing:0;text-transform:uppercase;color:var(--dd-ink);white-space:nowrap}
.alt-menu-side .side-label:not(:first-child){margin-top:0}
/* §7 option rows: 52 tall, radius 16, 12 between icon and label; the 1px active border is an
   inset shadow so nothing shifts */
.alt-menu-side a{display:flex;justify-content:flex-start;align-items:center;gap:12px;width:320px;height:52px;padding:16px 20px;margin:0;
  border:0;border-radius:16px;background:transparent;box-shadow:inset 0 0 0 1px transparent;
  font-size:16px;line-height:19px;font-weight:400;letter-spacing:0;color:var(--dd-ink);text-decoration:none;white-space:nowrap;
  transition:background-color 120ms ease,box-shadow 120ms ease}
.alt-menu-side a:last-of-type{margin-bottom:0}
.alt-menu-side a:hover,.alt-menu-side a.on,.alt-menu-side a:focus-visible{background:var(--dd-left-hover)}
.alt-menu-side a.is-here,.alt-menu-side a[aria-current="page"],.alt-menu-side a:active{box-shadow:inset 0 0 0 1px var(--dd-left-active)}
.alt-menu-side .chev{display:none}
.alt-menu-side .mic,.alt-menu-card .mic{width:20px;height:20px;flex:0 0 20px;display:block;background:none;place-items:initial}
.alt-menu-side .mic svg,.alt-menu-card .mic svg{display:block;width:20px;height:20px}
.alt-menu-side .mic{color:var(--dd-ink)}
.alt-menu-card .mic{color:var(--dd-orange)}
/* §8.3 Partner Hub: a 280 x 1 hairline before "Legal, accounting & trustees", 15 above, 15 below */
.alt-menu-side a.side-div{margin-top:31px;position:relative}
.alt-menu-side a.side-div::before{content:"";position:absolute;left:20px;right:20px;top:-16px;height:1px;background:var(--dd-left-active)}

/* §6.4 right column, "What you need": heading block 73 tall, then rows, footer pinned 30 from the bottom */
.alt-menu-main{width:660px;height:520px;padding:30px;margin:0;background:transparent;
  display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;overflow:hidden}
.alt-menu-main h4{margin:0;width:600px;padding:15.5px 20px 0;font-size:14px;line-height:17px;font-weight:500;letter-spacing:0;
  text-transform:uppercase;color:var(--dd-ink);white-space:nowrap}
.alt-menu-main h4:not(:first-child){margin-top:0}
.alt-menu-main .desc{margin:0;width:600px;padding:8px 20px 15.5px;border:0;font-size:14px;line-height:17px;font-weight:400;
  color:var(--dd-muted);white-space:nowrap;overflow:visible}
.alt-menu-main .alt-menu-cards{display:flex;flex-direction:column;gap:0;width:600px;margin:10px 0 0;flex:0 0 auto}
.alt-menu-card{display:flex;flex-direction:row;align-items:center;gap:12px;width:600px;height:52px;padding:16px 20px;margin:0;
  border:0;border-radius:16px;background:transparent;box-shadow:inset 0 0 0 1px transparent;text-align:left;
  font-size:16px;line-height:19px;font-weight:400;letter-spacing:0;color:var(--dd-ink);text-decoration:none;white-space:nowrap;
  transition:background-color 120ms ease,box-shadow 120ms ease}
.alt-menu-card:last-child{margin-bottom:0}
.alt-menu-card b{font-weight:400;display:inline-flex;align-items:center}
.alt-menu-card:hover,.alt-menu-card:focus-visible{background:var(--dd-right-hover)}
.alt-menu-card.is-here,.alt-menu-card[aria-current="page"],.alt-menu-card:active{box-shadow:inset 0 0 0 1px var(--dd-right-active)}
.alt-menu-card[hidden]{display:none!important} /* the hover-filter's hidden cards leave the flow and the tab order */
.alt-menu-side a:focus,.alt-menu-card:focus{outline:none}
.alt-menu-side a:focus-visible,.alt-menu-card:focus-visible{outline:2px solid var(--dd-orange);outline-offset:-2px}
.alt-menu-main .menu-links{display:block;box-sizing:border-box;margin:auto 0 0;width:600px;height:29px;padding:6px 20px;
  font-size:14px;line-height:17px;font-weight:400;letter-spacing:0;color:var(--dd-link);white-space:nowrap}
.alt-menu-main .menu-links a{color:var(--dd-link);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;
  text-decoration-thickness:1px;transition:text-decoration-color 120ms ease}
.alt-menu-main .menu-links a:hover{color:var(--dd-link);text-decoration-color:var(--dd-link)}

/* §7.2 NEW badge (stamped at runtime by dd-shell.js DD_PROMOS) */
.alt-menupanel .chip-new{display:inline-flex;align-items:center;justify-content:center;margin:0;padding:4px 8px;border-radius:100px;
  background:var(--dd-orange);color:#fff;font-size:12px;line-height:15px;font-weight:700;letter-spacing:0;text-transform:uppercase;
  vertical-align:middle;flex:none}
.alt-menu-card .chip-new{margin-left:12px}

/* §4.1 chevron under the tab whose panel is open (alt-home.js appends one per tab) */
.dd-chev{position:absolute;top:41px;left:50%;width:10px;height:6px;display:block;color:inherit;opacity:0;transform:translate(-50%,-3px);pointer-events:none;
  transition:opacity 140ms var(--dd-ease-in),transform 140ms var(--dd-ease-in)}
.is-open > .dd-chev{opacity:1;transform:translate(-50%,0);transition:opacity 200ms var(--dd-ease-out) 60ms,transform 200ms var(--dd-ease-out) 60ms}

@media (prefers-reduced-motion:reduce){
  .alt-scrim,.alt-shell-panel,.alt-menupanel,.dd-chev{transition-duration:.01ms!important;transition-delay:0s!important}
  .alt-shell-panel,.alt-shell-panel.is-open,.alt-menupanel,.alt-menupanel.open{transform:none}
  .alt-shell-panel.unfolding > .alt-menupanel.open .stg{animation:none}
  .dd-chev,.is-open > .dd-chev{transform:translate(-50%,0)}
}
/* (mobile rule moved to MOBILE SOURCE OF TRUTH block at end of file) */

/* cross-document view transitions (premium lane-switch: soft fade instead of hard reload; designer 2026-07-13) */
@view-transition{navigation:auto}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* nav segmented control */
.alt-seg{display:inline-flex;background:var(--surface2);border:1px solid var(--line);border-radius:100px;padding:3px;gap:2px}
/* equal fixed segment widths (designer 2026-07-13): the control keeps ONE footprint on both lanes,
   so switching Business↔Individuals never reflows the nav. Desktop only - 132px ×2 overflows a 390px nav. */
@media (min-width:940px){.alt-seg button,.alt-seg .seg-link{min-width:132px;justify-content:center;text-align:center}}
.alt-seg button{display:inline-flex;align-items:center;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 .28s var(--ease),color .28s var(--ease),transform .18s var(--ease)}
.alt-seg button[aria-pressed="true"]{background:var(--brand-btn);color:#fff;animation:seg-settle .34s var(--ease)} /* designer 2026-07-13: selected segment = brand orange, not black */
.alt-seg button:active{transform:scale(.96)}
@keyframes seg-settle{0%{transform:scale(.94)}60%{transform:scale(1.015)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.alt-seg button[aria-pressed="true"]{animation:none}.alt-seg button:active{transform:none}}
.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)}
/* aug05: the hero shares the nav's shell so its edges land on the nav's edges (it used to sit in
   the body .wrap at --maxw 1440 while the nav ran to 1600, hence the 80px-per-side inset). */
.alt-hero>.wrap{max-width:var(--shell-w);padding-left:0;padding-right:0}
.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:rgba(250,250,247,.94);max-width:48ch}
/* aug04: hero copy sits on a photo now, not a dark plate. Near-white sub + a whisper of shadow
   so the type separates from the image without needing a heavier scrim. */
.alt-hero-copy h1,.alt-hero-copy .sub{text-shadow:0 1px 3px rgba(10,10,12,.34)}
.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)}
/* aug06 (Yuval): CENTRED, was right. The right default had drifted: 13 pages inherited it while 6
   pages overrode it to centre one at a time as they were rebuilt to comp, and two of those
   overrides cite the comp explicitly ("comp: centred 13px line under card"). Centre is what the
   designer shows; the per-page overrides are now redundant and removed. */
.alt-hero-legal{font-size:var(--s--1);color:var(--faint);text-align:center;padding:.7rem .3rem 0}
/* hero bottom-right compliance anchor (rule 13 amendment 2026-07-07): disclosure, not decoration */
/* designer pass 2026-07-13: disclosure chips moved bottom-right → TOP-LEFT (over the scrim, where the
   photo never has a subject) and fused into ONE quiet glass pill with a shield mark - seen, not loud. */
.alt-hero-anchor{position:absolute;top:clamp(1rem,2.5vw,1.6rem);left:clamp(1rem,2.5vw,1.6rem);right:auto;bottom:auto;display:inline-flex;align-items:center;border-radius:100px;border:1px solid rgba(250,250,247,.24);background:rgba(12,10,8,.36);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.alt-hero-anchor::before{content:"";flex:none;width:12px;height:14px;margin-left:.85rem;background:rgba(250,250,247,.85);-webkit-mask:url(shield-reverse.svg) center/contain no-repeat;mask:url(shield-reverse.svg) center/contain no-repeat}
.alt-hero-anchor .bdg{background:none;border:0;border-radius:0;padding:.4rem .8rem .4rem .55rem;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:rgba(250,250,247,.88)}
.alt-hero-anchor .bdg+.bdg{border-left:1px solid rgba(250,250,247,.2);padding-left:.8rem;margin-left:-.25rem}
@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}
/* icon variant (individuals, designer 2026-07-13): explanatory line icon replaces the sentence */
.alt-tellme.tellme-icons a{align-items:center}
/* aug05: the row icon is a HOVER AFFORDANCE (designer "Show icon on hover" comp).
   Space is reserved at rest so no row reflows when it appears; colour is baked into the
   designer SVG (#F37F00) so nothing here sets it. */
.alt-tellme .ticon{flex:none;width:56px;height:56px;opacity:0;transform:translateX(-8px);
  transition:opacity .22s var(--ease),transform .22s var(--ease)}
.alt-tellme a:hover .ticon,.alt-tellme a:focus-visible .ticon{opacity:1;transform:none}
/* touch has no hover: the icon would be permanently invisible, so show it */
@media (hover:none){.alt-tellme .ticon{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.alt-tellme .ticon{transition:opacity .01ms;transform:none}}
/* current-page marker in dropdown panels + mobile drawer (designer 2026-07-13) */
/* CURRENT-PAGE MARK, per designer comps (Business/Individual dropdown MENU.png):
   a FILL and nothing else. No orange ring, no bold, no text-colour shift, and no injected
   "You're here" label - all four of those were inventions and none appear in the comps.
   The mark is deliberately identical to the hover block. */
/* 2026-10-12: the current-page row is the 1px inset border in the MEGA-MENU block (spec §7.3,
   fill only on hover), so the old fills are gone */
.mobile a.is-here{font-weight:700}

/* ===== 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(--dark);border-color:var(--dark);color:#fff} /* aug03 comp: selected tab is dark, superseding the 2026-07-13 orange call */
.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. */
/* aug03 comp: the money-flow tiles are LIGHT cream cards, with the designer's render sitting on top
   and dark copy beneath, not full-bleed dark photo cards with a scrim over white text. */
/* aug05 comp: the illustration is its OWN panel (each render already carries a uniform #FAF8F6
   ground and gets its corners from .tile-art), and the heading + body sit BELOW and OUTSIDE it,
   directly on the page background. The old outer card wrapped image AND text in one box, which
   double-framed the artwork. No card, no border, no padding here. */
.alt-tile.art{background:none;border:0;border-radius:0;padding:0;min-height:0;overflow:visible;color:var(--ink);justify-content:flex-start}
.alt-tile.art .tile-art{display:block;width:100%;height:auto;border-radius:var(--radius-md,16px);margin-bottom:1.1rem}
/* natural 16:9, never force-cropped: the renders are authored at 1200x675 with their own ground */
.alt-tile.art .glyph,.alt-tile.art .arrow{display:none} /* comp tiles carry no icon/arrow chrome */
/* height:auto is load-bearing: without it the img's height="675" presentational hint wins over the
   CSS aspect-ratio and every tile ships a fixed 675px-tall image (the "tiles too damn high" bug). */
/* aug03 comp: the app-band phone screenshot is a full portrait with UI only in its upper region;
   the comp displays the populated area (~345px). Crop the display box, keep the asset intact. */
.alt-band.app .art.appshot img{width:300px;height:352px;object-fit:cover;object-position:top;border-radius:var(--radius-md,24px)}
.alt-tile.art h3{color:var(--ink)}
.alt-tile.art p{color:var(--faint)}
.alt-tile.art .glyph{width:22px;height:22px;color:var(--ink);margin-bottom:.6rem}
.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(10,10,12,.32);color:#fff} /* legible on light 3D renders too */
.alt-tile.has-img .glyph{display:none} /* the 3D render carries the meaning; white glyph was invisible on white renders */
/* 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)}
/* aug04: menu art on white - natural proportions (height:auto), no rotation/crop, soft lift.
   Entrance is one orchestrated fade+rise on panel open, expo-out, reduced-motion respected. */
.alt-menu-visual .photo-card{width:min(380px,94%);height:auto;object-fit:contain;
  border:none;border-radius:var(--radius-md,16px);
  box-shadow:0 18px 44px -26px rgba(10,10,12,.30);
  transform:translate(-50%,-50%)}
@keyframes dd-menu-art{from{opacity:0;transform:translate(-50%,calc(-50% + 16px))}
  to{opacity:1;transform:translate(-50%,-50%)}}
.alt-menupanel.open .alt-menu-visual .photo-card{animation:dd-menu-art .5s cubic-bezier(.16,1,.3,1) both}
@media (prefers-reduced-motion:reduce){.alt-menupanel.open .alt-menu-visual .photo-card{animation:none}}
/* Vibe images - display as-is, no filters or darkening */
.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}
/* aug06 (Yuval): fold captions CENTRE under the component they annotate. They are capped-width
   blocks, and without auto margins a cap makes them flush left - `.alt-caro-foot` even set
   text-align:center, which centred the text inside an off-centre box and landed it 314px left.
   grid-column:1/-1 is the other half: when the caption is a direct child of a 2-column component
   grid (the carousel), it otherwise drops into COLUMN ONE rather than sitting under the whole
   thing. companies.html had already been hand-patched inline for exactly this; those are now
   redundant and removed. */
.alt-foot{font-size:var(--s--1);color:var(--faint);margin:1rem auto 0;max-width:88ch;text-align:center;grid-column:1/-1}
/* 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}
/* aug03 comp: folds that sit inside a cream card split evenly rather than 0.85/1.15. */
.alt-split.even{grid-template-columns:1fr 1fr}

/* aug03 comp: a fold wrapped in its own full-width cream card (fraud prevention on the business
   home). Same ground and radius as .alt-caro, but it carries an arbitrary 2-col fold. */
.fold-card{background:var(--surface2);border-radius:var(--radius-card,28px);padding:clamp(1.8rem,4.4vw,3.4rem)}
.fold-card .alt-split-media{background:none;border:0;min-height:0}
/* comp: radar box 335x383 in a 540 card = 71% of card height, right-of-centre with air all round */
.fold-card .alt-split-media img{display:block;width:auto;max-width:78%;max-height:360px;height:auto;margin:auto}
/* same presentational-hint guard for every designer image dropped in via aug03 */
img[src*="aug03"],img[src*="aug05"]{max-width:100%;height:auto}
/* aug03 comp: the descriptive capability line becomes three bordered chips. */
.fold-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem;padding:0;list-style:none}
.fold-chips li{border:1px solid var(--line);border-radius:100px;padding:.34rem .8rem;font-size:.78rem;color:var(--ink);background:var(--surface)}
.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:flex;flex-direction:column;align-items:flex-start;grid-row:2;grid-column:1;visibility:hidden;opacity:0;transition:opacity .35s var(--ease,ease)}
/* CTA pinned to one baseline across slides - copy length must never move the button */
.alt-caro-slide .caro-cta{margin-top:auto;padding-top:1.2rem}
.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 bottom strip de-chunked (designer 2026-07-13): was max-width:96ch - certs + 3 legal paragraphs
   stacked in the left half with dead space right. Now: full-width hairline, certs | main disclosure |
   trademark+copyright laid out across the whole footer. */
/* aug03 comp: the compliance strip is FOUR columns (badges | disclosure | trademark | copyright),
   where this was three with trademark and copyright stacked in the last one. */
footer.site .compliance{margin-top:1.6rem;max-width:none;display:grid;grid-template-columns:auto 1.25fr .85fr .85fr;gap:.2rem 2.4rem;align-items:start}
footer.site .compliance .cert-row--foot{grid-column:1;grid-row:1/span 2;margin:0;display:flex;gap:.6rem}
footer.site .compliance .alt-cert-lg{width:72px!important;height:72px!important}
footer.site .compliance p{font-size:.74rem;line-height:1.55;margin:0 0 .55rem;color:var(--faint)}
footer.site .compliance p:nth-of-type(1){grid-column:2;grid-row:1/span 2}
footer.site .compliance p:nth-of-type(2){grid-column:3;grid-row:1/span 2}
footer.site .compliance p:nth-of-type(3){grid-column:4;grid-row:1/span 2}
@media (max-width:939px){footer.site .compliance{display:block}footer.site .compliance .cert-row--foot{margin-bottom:.8rem}}

/* 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)}
/* === help-rows: service-lane channel list on contact.html#help - hairline rows, no cards === */
.help-rows{border-top:1px solid var(--line)}
.help-row{padding:1.15rem 0;border-bottom:1px solid var(--line)}
.help-row b{display:block;font-weight:600}
.help-row .muted{margin:.3rem 0 0;max-width:52ch;font-size:var(--s--1)}
.help-links{margin:.45rem 0 0;font-size:var(--s--1)}
.help-links a{color:var(--brand-ink);font-weight:600;text-decoration:none}
.help-links a:hover{text-decoration:underline}

/* === seg-rows: per-segment menu-anchor landings - typographic rows, hairline rules (no card grid) === */
.seg-rows{border-top:1px solid var(--line)}
.seg-row{display:grid;grid-template-columns:.42fr 1fr;gap:clamp(1.2rem,3vw,3rem);padding:clamp(1.6rem,3vw,2.4rem) 0;border-bottom:1px solid var(--line)}
.seg-row-label .num{display:block;font-weight:250;font-size:var(--s-2);color:var(--brand-btn);opacity:.38;line-height:1;background:none;padding:0;border:0} /* reset: dd-shell .num stat-block rule leaks a dark box otherwise */
.seg-row-label h3{margin-top:.5rem;font-size:var(--s-1);font-weight:600;max-width:14ch}
.seg-row-body p{max-width:58ch}
.seg-row-body .tile-spec{margin-top:1rem}
/* reusable contained cream card (was inline-duplicated across converted pages, 2026-07-14) */
.alt-cardsurface{background:var(--surface2);border-radius:var(--radius-card,28px);padding:clamp(1.8rem,4vw,3rem)}
.seg-row-cta{display:inline-block;margin-top:1.1rem;font-weight:700;color:var(--brand-deep);text-decoration:none} /* delta rule 5: small orange text on white uses --brand-deep, not --brand-btn (contrast) */
.seg-row-cta:hover{text-decoration:underline}
.seg-row:target{background:var(--surface2)}
.seg-row:target .seg-row-label .num{opacity:1}
@media(max-width:720px){.seg-row{grid-template-columns:1fr;gap:.9rem}}
/* anchor targets land below the sticky nav */
main [id]{scroll-margin-top:calc(var(--nav-h,58px) + 28px)}

/* 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}
/* Four-lane variant: the partner routes fold gained an EMI door (2026-08-21) and a 4th card
   in a 3-column grid leaves a visible hole. Wider cap because four 30ch columns need the room. */
.alt-trio.four{grid-template-columns:repeat(4,1fr);max-width:1240px;gap:clamp(1.2rem,2.6vw,2rem)}
@media (max-width:1100px){.alt-trio.four{grid-template-columns:repeat(2,1fr);max-width:760px}}
@media (max-width:600px){.alt-trio.four{grid-template-columns:1fr;max-width:420px}}
/* aug03 comp: bare line icons in bright brand orange, no lavender circle behind them. */
.alt-trio .ic{width:60px;height:60px;display:grid;place-items:center;margin:0 auto 1rem}
.alt-trio .ic svg{width:60px;height:60px} /* designer 3x60 set: ink lands at the comp's 47-56px */
.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}
/* aug03 comp: grid icons are dark ink, not orange, and carry no white disc. */
.alt-grid6 .g .ic{width:40px;height:40px;display:grid;place-items:center;color:var(--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:1.66/1;border-radius:8px;overflow:hidden;background:var(--surface2)}
.sec-device{filter:drop-shadow(0 30px 34px rgba(12,9,6,.5))} /* premium grounding shadow on the safeguarding device (designer 2026-07-13) */ /* matches the real mockup screen ratio - 16/10 was cover-cropping the UI sidebar (designer note 2026-07-13) */
.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(132px,27%,180px);aspect-ratio:9/19;background:#0c0c0e;border-radius:20px;padding:7px;box-shadow:var(--shadow-pop)} /* enlarged ~36% (designer 2026-07-13): screen UI was illegible at 132px */
@media (max-width:939px){.dev-phone{right:12px;width:clamp(96px,24%,132px)}} /* mobile: keep the phone inside the viewport (390px overflow fix) */
.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,.alt-shell{display:none!important} /* desktop pattern only; the drawer is the mobile nav */
  /* 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) */
/* aug03 precision fix (measured off the approved PDF render, not guessed): the comp's hero ground
   is a WARM TAUPE, text zone RGB ~(115,97,82) lum ~98, and the photo is essentially UNDIMMED.
   Our old near-black base (#16151A) + heavy .94/.72 scrim was the reason every hero rendered far
   darker than the PDF. New: taupe base at the comp's measured value; over the photo only a narrow
   seam blend (gone by 58%), no full-card dimming. */
.alt-hero-scene.photo{background:
  linear-gradient(96deg,rgba(96,80,66,.80) 0%,rgba(96,80,66,.55) 34%,rgba(96,80,66,.22) 47%,rgba(96,80,66,0) 58%),
  var(--hero-img) right center/auto 100% no-repeat,
  linear-gradient(160deg,#5f5347 0%,#6e6156 55%,#786a5c 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(aug03/hero-meeting-b.webp)} /* aug03: designer's native frame (no jacket, no laptop logo), cropped right-side 1.138:1 so the photo fills ~60% of the card per the client's Hero Section.png; full frame kept at hero-meeting.webp */
.photo-ind{--hero-img:url(july14/ind-hero-photo.webp)} /* july14 lifestyle hero (was hero-individuals.webp) */
.photo-emiaas{--hero-img:url(july21/hero-emiaas.webp)} /* jul21 designer comp crop (Business 3) */
.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 (july14 v14): device on a plain cream card - the 3-surface rule
   (white / #f4f3f0 / #121212) forbids the old warm-gradient media panel */
@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:var(--surface2)}
.sec-device{width:100%;height:auto;display:block;border-radius:14px;box-shadow:0 24px 48px -28px rgba(26,22,18,.35)}
.alt-sec2 .devwrap .alt-foot{color:var(--faint);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:'Inter',system-ui,sans-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)}
/* journey right column (designer 2026-07-13): the editorial whitespace read as a broken/empty
   component - a theme 3D render now anchors the right side, sticky-centered against the steps */
.dd-jvisual{margin:0;display:none}
@media (min-width:940px){
  .dd-journey.with-visual{display:grid;grid-template-columns:1.15fr .85fr;column-gap:clamp(2rem,4vw,4rem)}
  .dd-journey.with-visual .dd-jstage{grid-column:1}
  .dd-journey.with-visual .dd-jvisual{display:block;grid-column:2;grid-row:1/span 3;align-self:center;position:sticky;top:14vh}
  .dd-journey.with-visual .dd-jvisual img{width:100%;height:auto;border-radius:var(--radius-md,16px)}
  /* stagger tightened so steps stay inside their column */
  .dd-journey.with-visual .dd-jstage:nth-child(2){margin-left:6%}
  .dd-journey.with-visual .dd-jstage:nth-child(3){margin-left:12%}
}
.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(july21/hero-companies.webp)} /* jul21 designer comp crop (Business 2) */
.photo-careers{--hero-img:url(dd-web-images/hero-careers.webp)}
.photo-contact{--hero-img:url(dd-web-images/hero-contact.webp)}
.photo-pricing{--hero-img:url(july21/hero-pricing.webp)} /* jul21 designer comp crop (Business 5) */
.photo-developers{--hero-img:url(dd-web-images/hero-developers.webp)}
.photo-launch{--hero-img:url(dd-web-images/hero-launch.webp)}
.photo-teams{--hero-img:url(july21/hero-teams.webp)} /* jul21 designer comp crop (Business 4) */
.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}}


/* ===== scroll-register v5 additions (designer 2026-07-13): richer, still restrained.
   All motion-safe, expo-out language, transform/opacity only. ===== */
@media (prefers-reduced-motion: no-preference){
  /* hero copy: one orchestrated load entrance (eyebrow → h1 → sub → CTAs, 50ms steps) */
  .alt-hero-copy > div > *, .alt-hero-copy > div + div{animation:dd-heroin .7s var(--ease) both}
  .alt-hero-copy .eyebrow{animation-delay:.05s}
  .alt-hero-copy h1{animation-delay:.1s}
  .alt-hero-copy .sub{animation-delay:.15s}
  .alt-hero-copy > div + div{animation-delay:.2s}
  .alt-hero-anchor{animation:dd-heroin .7s var(--ease) .3s both}
  @keyframes dd-heroin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

  @supports (animation-timeline: view()){
    /* tellme rows cascade in as a rank */
    .alt-tellme li{animation:alt-rise-soft both;animation-timeline:view();animation-range:entry 0% entry 45%}
    .alt-tellme li:nth-child(2){animation-range:entry 4% entry 49%}
    .alt-tellme li:nth-child(3){animation-range:entry 8% entry 53%}
    .alt-tellme li:nth-child(4){animation-range:entry 12% entry 57%}
    .alt-tellme li:nth-child(5){animation-range:entry 16% entry 61%}
    /* journey visual settles with a soft zoom as its column enters */
    .dd-jvisual img{animation:dd-imgsettle both;animation-timeline:view();animation-range:entry 0% entry 55%}
    /* footer bottom strip drifts up gently */
    footer.site .compliance{animation:alt-rise-soft both;animation-timeline:view();animation-range:entry 0% entry 60%}
    /* 3D tile renders get a slow parallax drift inside their tiles */
    .alt-tile.has-img .tile-img{animation:dd-tiledrift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    @keyframes dd-tiledrift{from{transform:scale(1.08) translateY(2%)}to{transform:scale(1.08) translateY(-2%)}}
  }
}


/* ══════════════════════════════════════════════════════════════════════
   ICP fix-pass (2026-07-13) · C/D/E/G components - appended last so these
   override earlier same-specificity rules by cascade order.
   ══════════════════════════════════════════════════════════════════════ */

/* === C · dd-pipeline: Onboard→Operate→Protect as a real pipeline (framed stages, drawn connectors) === */
.dd-pipeline{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:clamp(.6rem,1.5vw,1.1rem);align-items:stretch;margin-top:2rem}
.pl-stage{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md,16px);padding:1.35rem 1.4rem;box-shadow:0 18px 40px -30px rgba(26,22,18,.35)}
.pl-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.85rem}
.pl-glyph{width:38px;height:38px;border-radius:10px;background:var(--lav);display:grid;place-items:center;color:var(--brand-ink)}
.pl-glyph svg{width:20px;height:20px}
.pl-num{font-size:2rem;font-weight:250;line-height:1;color:var(--brand);opacity:.34;font-variant-numeric:tabular-nums;background:none;border:0;padding:0}
.pl-stage h3{font-size:var(--s-1);font-weight:600;margin:0 0 .3rem}
.pl-stage p{color:var(--soft);font-size:var(--s--1);margin:0;max-width:32ch}
.pl-link{align-self:center;display:flex;color:var(--brand)}
.pl-link svg{width:clamp(24px,3vw,40px);height:12px;overflow:visible}
.pl-link path{stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:819px){.dd-pipeline{grid-template-columns:1fr}.pl-link{justify-content:center;transform:rotate(90deg);padding:.15rem 0}}
@media (prefers-reduced-motion: no-preference){@supports (animation-timeline: view()){
  .pl-stage{animation:alt-rise-soft both;animation-timeline:view()}
  .dd-pipeline .pl-stage:nth-of-type(1){animation-range:entry 0% entry 38%}
  .dd-pipeline .pl-stage:nth-of-type(3){animation-range:entry 8% entry 46%}
  .dd-pipeline .pl-stage:nth-of-type(5){animation-range:entry 16% entry 54%}
  .pl-link path{stroke-dasharray:60;stroke-dashoffset:60;animation:pl-draw linear both;animation-timeline:view();animation-range:entry 20% entry 60%}
}}
@keyframes pl-draw{to{stroke-dashoffset:0}}


/* === D · psol: the solution card earns figure-ground + pulled-out proof pills === */
.psol-solution{background:linear-gradient(150deg,#fff,color-mix(in oklab,var(--lav) 34%,#fff));border:1px solid color-mix(in oklab,var(--brand) 22%,var(--line));box-shadow:0 26px 54px -30px rgba(232,117,42,.38)}
.psol-facts{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.05rem}
.psol-facts span{border:1px solid color-mix(in oklab,var(--brand) 30%,var(--line));background:#fff;border-radius:100px;padding:.32rem .78rem;font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-ink)}

/* === D · showcase copy items framed for prominence beside the device scroll scene === */
.sc-item{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;margin-top:1rem}
.sc-item.hl{border-color:color-mix(in oklab,var(--brand) 30%,var(--line))}

/* === E · journey rhythm tightened; sticky generic-render slot retired; spec chips fill the line === */
.dd-jstage{padding:clamp(1.1rem,2vw,1.7rem) 0}
/* grid auto-placement fix (vision-verify 2026-07-13): with 4 direct children the 2-col grid
   alternated num/h3/p/chips across columns - pin the ordinal to col 1, everything else to col 2 */
.dd-jstage .num{grid-column:1;grid-row:1/span 3}
.dd-jstage h3,.dd-jstage p,.dd-jstage .tile-spec{grid-column:2}
/* journey stage mini-diagrams (2026-07-13): the de-visualed stages left a dead right column -
   each stage now carries a small diagram in the seg-viz language, like the segment rows above */
@media(min-width:940px){
  .dd-jstage{grid-template-columns:minmax(84px,120px) 1fr minmax(210px,250px)}
  .dd-jstage .seg-viz{grid-column:3;grid-row:1/span 3;align-self:center}
}
.dd-jstage .tile-spec{margin-top:.9rem}
@media (min-width:940px){
  .dd-jstage:nth-child(2){margin-left:5%}
  .dd-jstage:nth-child(3){margin-left:10%}
}

/* === F · seg-row visual slot: mini-diagram panel (desktop; mobile pass deferred per Yuval) === */
@media(min-width:940px){
  .seg-row{grid-template-columns:.36fr .94fr .5fr}
  .seg-viz{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1rem;display:grid;place-items:center;min-height:128px}
  .seg-viz svg{width:100%;max-width:230px;height:auto;display:block}
}
@media(max-width:939px){.seg-viz{display:none}}
.seg-viz .k{font:700 9.5px 'Inter',system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;fill:var(--faint)}
.seg-viz .bx{fill:none;stroke:var(--line);stroke-width:1.4}
.seg-viz .ln{stroke:var(--line);stroke-width:1.4;fill:none}
.seg-viz .acc{fill:var(--brand)}
.seg-viz .acl{stroke:var(--brand);stroke-width:1.6;fill:none;stroke-linecap:round}

/* === G · straight answers: drawn hairlines + scroll-staggered rise === */
.faqs .faq{border-top:1px solid var(--line);padding-top:1.2rem;position:relative}
.faqs .faq::before{content:"";position:absolute;top:-1px;left:0;width:100%;height:1px;background:var(--brand);transform-origin:left}
@media (prefers-reduced-motion: no-preference){@supports (animation-timeline: view()){
  .faqs .faq{animation:alt-rise-soft both;animation-timeline:view();animation-range:entry 0% entry 42%}
  .faqs .faq::before{animation:dd-jline linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
}}


/* === C · API card micro-diagram + live-terminal cursor (launch + developers) === */
.api-micro{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:.9rem 0;font:700 .64rem/1 'Inter',system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.api-micro span{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:.5rem .7rem;color:var(--soft)}
.api-micro span.hot{border-color:color-mix(in oklab,var(--brand) 40%,var(--line));color:var(--brand-ink)}
.api-micro svg{width:18px;height:9px;color:var(--brand);flex:0 0 auto}
.devcode .tk-cursor{display:inline-block;width:.55em;height:1em;background:var(--brand);vertical-align:-.15em;animation:tkblink 1.1s steps(1) infinite}
@keyframes tkblink{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.devcode .tk-cursor{animation:none}}


/* === R3 (2026-07-13) · tile-row text alignment: headings share one line across a row.
   Root cause: flex-end bottom-anchoring made h3 position depend on copy length and on
   whether a tile has a .tile-spec chip row (some don't). Grid rows reserve deterministic
   slots: [1fr air | h3 | 3-line copy slot | chip slot] - glyph/arrow are absolute, unaffected. */
/* justify-content:start is load-bearing (aug06, Yuval). .alt-tile sets justify-content:flex-end for
   its ORIGINAL flex layout, where it bottom-anchors the content. This rule switched the tile to
   GRID, where the same property means "push the column tracks to the right" instead - so the text
   column (sized to the widest child, .tm-journey p at max-width:21rem = 336px) was shoved to the
   right edge of a 367px content box and sat 31px clear of the absolutely-positioned glyph. The comp
   ranges tile copy hard left, in line with the icon. */
.alt-tilerow .alt-tile{display:grid;grid-template-rows:1fr auto minmax(6.1em,auto) minmax(1.9rem,auto);align-items:start;justify-content:start} /* copy slot fits 4 lines - the longest tile copy in any current row */
.alt-tilerow .alt-tile h3{grid-row:2;align-self:end;margin-bottom:0}
.alt-tilerow .alt-tile p{grid-row:3;margin-top:.4rem}
.alt-tilerow .alt-tile .tile-spec{grid-row:4;align-self:end;margin-top:.4rem}


/* === R6/R7 (2026-07-13) · footer ISO badges restored to 118px (Yuval) + UKAS-compliant caption.
   Amtivo hard rules (docs/iso-badge-rules.md): never crop, recolor or restyle badge artwork;
   approved wording only. Caption uses the approved claim template. */
footer.site .compliance .alt-cert-lg{width:118px!important;height:118px!important}
footer.site .compliance .cert-row--foot{flex-wrap:wrap;max-width:262px;align-self:center;row-gap:.45rem}
.cert-cap{width:100%;font-size:.64rem;color:var(--faint);line-height:1.45;margin:0}


/* === R2 (2026-07-13) · featured pricing card centered each text line (ragged left edges vs its
   siblings). Unify on left-aligned, per house style - every tier's text now shares the same edge. */
.tier.feat{align-items:stretch}


/* === R4v2 (2026-07-13) · currency-change feedback: everything that re-denominates pulses once,
   so the selector's effect is perceivable. Brand-tinted background fade, motion-safe. === */
.ccy-flash{animation:ccy-flash .9s var(--ease) both;border-radius:6px}
@keyframes ccy-flash{0%{background-color:color-mix(in oklab,var(--brand) 26%,transparent)}100%{background-color:transparent}}
@media(prefers-reduced-motion:reduce){.ccy-flash{animation:none}}


/* === R4v3 (2026-07-13) · price lens disclosure + selector hover-nudge === */
.price-note{font-size:var(--s--1);color:var(--faint);margin:.8rem auto 0;max-width:64ch;text-align:center;grid-column:1/-1}
table[data-price-zone]+ .price-note{padding:0 .2rem}
@keyframes ccy-nudge{0%,100%{transform:none}12%{transform:translateX(-4px) rotate(-2.2deg)}28%{transform:translateX(4px) rotate(2.2deg)}44%{transform:translateX(-3px) rotate(-1.4deg)}60%{transform:translateX(3px) rotate(1.4deg)}76%{transform:translateX(-1.5px)}}
.ccysel{position:relative}
.ccysel.nudge .ccysel-btn{animation:ccy-nudge .7s var(--ease);border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in oklab,var(--brand) 22%,transparent)}
.ccysel .ccysel-btn{transition:box-shadow .45s var(--ease),border-color .3s var(--ease)}
.ccysel-hint{position:absolute;top:calc(100% + 9px);right:0;z-index:140;background:var(--dark);color:#fff;font-size:.72rem;font-weight:600;line-height:1;padding:.55rem .8rem;border-radius:9px;white-space:nowrap;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;pointer-events:none}
.ccysel-hint::before{content:"";position:absolute;top:-4px;right:22px;width:8px;height:8px;background:var(--dark);transform:rotate(45deg)}
.ccysel-hint.on{opacity:1;visibility:visible;transform:none}
@media(prefers-reduced-motion:reduce){.ccysel.nudge .ccysel-btn{animation:none;border-color:var(--brand)}}


/* ===== v14 · July-14 Business-master fold system (pilot: index) ===== */
:root{--fold-gap:clamp(3rem,5.5vw,5rem)}
/* master rhythm: ~120-160px between major sections (was 70-116px combined) */
.alt-gap{padding-block:var(--fold-gap)}
/* cream contained card: matches clay-render crops (#f4f3f0 = --surface2) */
.alt-band.cream{background:var(--surface2);color:var(--ink)}
/* light-surface chip variant: base .chiprow is styled for dark bands (QA fix jul21: ~1:1 contrast on cream) */
.alt-band.cream .chiprow span{color:var(--ink);background:rgba(25,25,25,.04);border-color:rgba(25,25,25,.16)}
/* jul21: fraud-prevention home folds, light radar panel (shared by index + individuals; dark variant lives on solution-fraud.html) */
.fraud-panel{background:radial-gradient(120% 120% at 70% 20%,#fdf4ea 0%,#f3ede4 55%,#ece4d8 100%);border-radius:var(--radius-card,28px);aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden;width:100%}
.fraud-panel svg{width:min(68%,340px);height:auto;display:block}
.fraud-panel .ring{fill:none;stroke:rgba(25,25,25,.16);stroke-width:1}
.fraud-panel .sweep{transform-origin:100px 100px;animation:ddfzsweep 9s linear infinite}
.fraud-panel .dot{fill:rgba(25,25,25,.55);opacity:0;animation:ddfzdot 9s linear infinite}
.fraud-panel .dot.o{fill:var(--brand,#f37f00)}
.fraud-panel .dot.d2{animation-delay:3s}
.fraud-panel .dot.d3{animation-delay:6s}
@keyframes ddfzsweep{to{transform:rotate(360deg)}}
@keyframes ddfzdot{0%,4%{opacity:0}8%,42%{opacity:1}55%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.fraud-panel .sweep{animation:none;opacity:.35}.fraud-panel .dot{animation:none;opacity:.8}}
.alt-band.cream .muted{color:var(--soft)}
/* app band: matches phone-accounts crop bg exactly (#121212) */
.alt-band.app{background:#121212;color:var(--dark-ink)}
.alt-band.app .muted{color:var(--dark-soft)}
/* clay 3D render art slot (bigger than icon .art) */
.alt-band .art.clay{width:clamp(200px,26vw,320px);aspect-ratio:auto}
.alt-band .art.clay img{width:100%;height:auto;display:block}
/* phone mockup art slot: bleeds off the band bottom (master §20) */
.alt-band.app{overflow:hidden}
.alt-band .art.appshot{width:clamp(210px,27vw,330px);aspect-ratio:auto;align-self:end;margin-bottom:calc(-1*clamp(1.8rem,4vw,3rem) - 30px)}
.alt-band .art.appshot img{width:100%;height:auto;display:block;border-radius:var(--radius-card,28px)}
/* jul21: photo panel inside a dark CTA band (Business 3/5 comps) */
.alt-band .art.banner{width:clamp(220px,30vw,380px);aspect-ratio:auto}
.alt-band .art.banner img{width:100%;height:auto;display:block;border-radius:18px}
@media (max-width:939px){.alt-band .art.banner{margin-inline:auto;margin-top:1rem}}
/* black pill CTA (master: "Speak to sales" is the one non-orange primary) */
.btn-ink{background:var(--ink);color:#fff}
/* unframed split media: renders/devices that sit directly on the white page */
.alt-split-media.plain{background:none;border:0;min-height:0}
.alt-split-media.plain img{object-fit:contain;height:auto}
/* testimonial: center card + two empty cream flanks (master §22) */
.alt-quote-row{display:grid;grid-template-columns:.55fr 1.3fr .55fr;gap:clamp(1rem,2.5vw,2rem);align-items:stretch}
.alt-quote-row .alt-quote{height:100%}
.alt-quote-flank{background:var(--surface2);border-radius:var(--radius-card,28px);min-height:220px}
@media (max-width:939px){.alt-quote-row{grid-template-columns:1fr}.alt-quote-flank{display:none}
/* app band mobile: text first, phone bleeds off the card bottom below it */
.alt-band.app .art.appshot{order:2;margin-top:1rem;margin-inline:auto}}


/* ===== v15 · Figma changelist (docs/figma-changelist-business.md) ===== */
:root{
  --radius-card:48px;   /* large image/hero cards (was 28) */
  --radius-md:24px;     /* small feature cards (was 16) */
  --faint:#666666;      /* designer text-secondary */
  --line:#cdcdcd;       /* designer border grey */
}

/* --- §8 pricing stack: active card enlarged in front, others peek behind --- */
.alt-stack{display:grid;grid-template-columns:44px 1fr 44px;grid-template-rows:auto auto;gap:clamp(.8rem,2vw,1.4rem);align-items:center;margin-top:1.2rem}
.stk-arrow{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)}
.stk-arrow:hover{border-color:var(--brand)}
.stk-cards{position:relative;grid-column:2;grid-row:1;height:clamp(340px,30vw,400px)}
.stk-card{position:absolute;inset:0;margin:auto;width:min(720px,94%);height:100%;background:var(--surface);border-radius:var(--radius-md,24px);box-shadow:var(--shadow-card);padding:clamp(1.4rem,3vw,2.4rem);display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(1rem,2.5vw,1.8rem);align-items:center;transition:transform .45s var(--ease),box-shadow .45s var(--ease);pointer-events:none}
.stk-card.front{transform:none;z-index:3;pointer-events:auto;box-shadow:var(--shadow-pop)}
.stk-card.left{transform:translateX(-13%) translateY(4%) scale(.9);z-index:1}
.stk-card.right{transform:translateX(13%) translateY(4%) scale(.9);z-index:1}
.stk-card h3{font-size:1.75rem;font-weight:500;margin-bottom:.5rem} /* 28px */
.stk-card p{font-size:1rem;color:var(--faint);line-height:1.5;margin:0 0 .5rem}
.stk-card .stk-cta{margin-top:.9rem}
.stk-card .tile-spec{margin-top:.5rem}
/* plan graphic column: mini account-card visual (asset-free, reuses fan palette) */
.stk-viz{aspect-ratio:1.586;border-radius:16px;display:flex;align-items:flex-end;padding:1rem;color:#fff;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;box-shadow:0 18px 36px -20px rgba(26,22,18,.45)}
.stk-viz.v-core{background:linear-gradient(150deg,#2c2b33,#141418)}
.stk-viz.v-dyn{background:linear-gradient(150deg,#8A420C,var(--brand-deep))}
.stk-viz.v-prem{background:linear-gradient(150deg,#F09952,#f6d9bd);color:var(--ink)}
.stk-dots{grid-column:2;grid-row:2;display:flex;gap:.5rem;justify-content:center}
.stk-dots button{width:9px;height:9px;border-radius:50%;border:0;padding:0;background:var(--line);cursor:pointer;transition:background .2s var(--ease)}
.stk-dots button.on{background:var(--brand)}
@media (max-width:939px){
  .alt-stack{grid-template-columns:36px 1fr 36px}
  .stk-arrow{width:36px;height:36px}
  .stk-cards{height:auto;min-height:360px}
  .stk-card{grid-template-columns:1fr;align-content:start}
  .stk-card .stk-viz{max-width:220px}
  .stk-card.left,.stk-card.right{transform:translateX(0) translateY(4%) scale(.94);opacity:.4}
}
@media (prefers-reduced-motion:reduce){.stk-card{transition:none}}

/* --- §4/§6 unframed splits: image on white, no card, no blend --- */
.alt-split-media.plain img{mix-blend-mode:normal}

/* --- §9 tab styling: active dark pill, inactive warm grey --- */
.alt-tabs button{background:var(--surface2);color:var(--faint)}
.alt-tabs button[aria-selected="true"]{background:#221a14;color:#fff;font-weight:700}

/* --- §9 tile cards: image fill + scrim + white text (was image-top layout) --- */
.alt-tile.has-img{position:relative;overflow:hidden;border-radius:var(--radius-md,24px);min-height:413px;color:#fff;display:flex;flex-direction:column;justify-content:flex-end}
.alt-tile.has-img .tile-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.alt-tile.has-img::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(12,10,8,.06) 40%,rgba(12,10,8,.62) 100%)} /* legibility scrim */
.alt-tile.has-img>*:not(.tile-img){position:relative;z-index:2}
.alt-tile.has-img h3{color:#fff;font-size:1.75rem;font-weight:500}
.alt-tile.has-img p{color:rgba(255,255,255,.72);font-size:.875rem}
.alt-tile.has-img .glyph{display:none}
.alt-tile.has-img .tile-spec span{border-color:rgba(255,255,255,.6);color:#fff;opacity:1}
@media (max-width:939px){.alt-tile.has-img{min-height:300px}}

/* --- §10 security: centered heading + icon strip + centered button --- */
.sec-strip{max-width:1100px;margin:2.4rem auto 0}
.sec-strip+.sec-btn{text-align:center;margin-top:2.2rem}

/* --- §12 testimonial slider: clickable peeks + auto-advance (JS in alt-home.js) --- */
.alt-quote-flank{cursor:pointer;border:0;padding:1.4rem;text-align:left;color:var(--faint);font-size:.85rem;transition:transform .3s var(--ease)}
.alt-quote-flank:hover{transform:translateY(-3px)}
.alt-quote .qmark{font-size:3.2rem;line-height:.6;color:var(--brand);display:block;margin-bottom:.6rem}

/* batch-A QA: dark band 2-col: copy left, capability chips fill the right column */
.alt-band.dark.cols2{grid-template-columns:1.05fr .95fr;align-items:center}
.alt-band.dark.cols2 .chipcol{display:flex;flex-wrap:wrap;gap:.5rem;align-content:center;justify-content:flex-end}
@media (max-width:939px){.alt-band.dark.cols2{grid-template-columns:1fr}.alt-band.dark.cols2 .chipcol{justify-content:flex-start}}
/* batch-A QA: hairline divider for white→white section seams */
.hairline-top>.wrap{border-top:1px solid var(--line);padding-top:clamp(2.2rem,4.5vw,3.4rem)}

/* --- §13 FAQ typography --- */
.faq h3{font-size:1.75rem;font-weight:500}
.faq p{font-size:1rem;color:var(--faint)}

/* --- §8 carousel, Figma-master details (user target 2026-07-14 15:57):
   arrows at card edges vertically centered · dots bottom-center · foot below card --- */
.alt-caro{position:relative}
.alt-caro .alt-caro-nav{margin-bottom:0}
.alt-caro .alt-caro-nav [data-prev],.alt-caro .alt-caro-nav [data-next]{position:absolute;top:50%;transform:translateY(-50%);z-index:4;background:transparent;display:grid;place-items:center}
.alt-caro .alt-caro-nav button svg{width:16px;height:16px;display:block}
.alt-caro .alt-caro-nav [data-prev]{left:clamp(.6rem,1.5vw,1.4rem)}
.alt-caro .alt-caro-nav [data-next]{right:clamp(.6rem,1.5vw,1.4rem)}
/* reserve a gutter so slide copy never runs under the edge arrows (right arrow overlaps long slides on desktop; both arrows overlap in the single-column layout) */
.alt-caro-slide{padding-right:clamp(2rem,3vw,2.8rem)}
.alt-caro-dots{display:flex;gap:.5rem;justify-content:center;margin-top:1.6rem}
.alt-caro-dots button{width:9px;height:9px;border-radius:50%;border:0;padding:0;background:#d9d5cc;cursor:pointer;transition:background .2s var(--ease)}
.alt-caro-dots button.on{background:var(--ink)}
.alt-caro-foot{text-align:center;margin:1rem auto 0;grid-column:1/-1}
@media (max-width:939px){
  .alt-caro .alt-caro-nav [data-prev]{left:.4rem}
  .alt-caro .alt-caro-nav [data-next]{right:.4rem}
  .alt-caro .alt-caro-nav button{width:36px;height:36px}
  .alt-caro-slide{padding-left:clamp(2rem,7vw,2.8rem);padding-right:clamp(2rem,7vw,2.8rem)}
}

/* ===== JUL21 COMP LANGUAGE PASS (Yuval-approved 2026-07-21): orange budget, chip case, glow signature.
   Supersedes "selected segment = brand orange" (designer 2026-07-13) per the Jul-21 comps + kit 5-15% orange rule. */
/* 1 · Orange budget: primary CTAs = ink on light surfaces; orange survives inside dark bands + as accent/glow */
/* aug03 comp: primary CTAs are brand orange, not ink. This line had every primary button on every
   alt page rendering near-black, which was the single biggest reason the build did not read like the
   comp. White-on-orange follows the site-wide --on-primary decision of 2026-07-13. */
.btn-primary{background:var(--brand-btn);color:var(--on-primary)}
.alt-band.dark .btn-primary{background:var(--brand-btn);color:var(--on-primary)}
.alt-seg button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
/* eyebrows: calm grey; dark surfaces keep a soft light tone */
.eyebrow{color:var(--muted)}
.alt-hero-copy .eyebrow,.alt-band.dark .eyebrow{color:rgba(250,250,247,.72)}
/* 2 · Chips/tags: sentence-case, thin outline, muted (was ALL-CAPS bold capsules) */
.tile-spec span,.uc .t,.feat .ftag,.fz-threat .t{text-transform:none;letter-spacing:.01em;font-weight:500;font-size:.74rem}
.uc .t,.feat .ftag{background:transparent;border:1px solid var(--line);padding:.16rem .6rem;border-radius:100px;color:var(--muted);display:inline-block}
/* 3 · Glow signature: THE highlighted element gets a soft orange bloom */
.glow-o{box-shadow:0 0 0 1.5px var(--brand),0 10px 44px rgba(243,127,0,.30)}
.alt-band.dark .glow-o,.dark .glow-o{box-shadow:0 0 0 1.5px var(--brand),0 0 42px rgba(243,127,0,.38)}
/* 4 · jul21 comp: flat color trio for value-prop tiles (Business 2) + cream icon tiles; AA text per kit tokens */
.alt-tile.t-flame{background:linear-gradient(165deg,#f78a10,#ee7900);color:#1a1200;border:0}
.alt-tile.t-amber{background:linear-gradient(165deg,#a06a40,#8f5c34);color:#fff;border:0}
.alt-tile.t-taupe{background:linear-gradient(165deg,#8d7a63,#7e6c56);color:#fff;border:0}
.alt-tile.t-flame .glyph,.alt-tile.t-amber .glyph,.alt-tile.t-taupe .glyph,.alt-tile.t-cream .glyph{display:block}
.alt-tile.t-flame p{color:rgba(26,18,0,.82)}
.alt-tile.t-amber p,.alt-tile.t-taupe p{color:rgba(255,255,255,.88)}
.alt-tile.t-flame .tile-spec span{border-color:rgba(26,18,0,.45);color:#1a1200;opacity:1}
.alt-tile.t-amber .tile-spec span,.alt-tile.t-taupe .tile-spec span{border-color:rgba(255,255,255,.55);color:#fff;opacity:1}
/* aug06 (Yuval): t-cream is GREY, not peach. --lav (#FBEADB) was the stale global: companies and
   teams had each overridden it back to #F4F3F0 locally, and pixel-sampling the designer renders for
   careers, for-teams and launch-on-our-licence all return #F4F3F0 as the dominant card colour with
   no peach present. Same drift shape as the hero legal line - wrong default, patched page by page.
   The two local overrides are now redundant and removed. */
.alt-tile.t-cream{background:var(--surface2);border:0}
/* comp glyphs on these tinted tiles are black line icons, not orange. teams.html already did this
   locally; hoisted so launch and careers get it too. Inverse tiles keep their white glyph below. */
.alt-tile.t-cream .glyph{color:var(--ink);opacity:.85}
/* numerals calm grey per comp (orange budget) */
.seg-row .num,.dd-jstage .num,.fz-op .n{color:var(--faint)}
/* 5 · jul21 comp: outlined arrow affordance (was filled), corner numerals, soft band, explicit brand CTA */
.alt-tile .arrow{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor;opacity:.55}
.alt-tile .corner-num{position:absolute;top:1.1rem;right:1.2rem;font-size:2.1rem;font-weight:600;line-height:1;color:rgba(25,25,25,.13)}
.alt-tile.t-ink .corner-num{color:rgba(250,250,247,.22)}
.tm-band{background:var(--surface2);padding-block:clamp(2.2rem,5vw,4rem)}
.btn-brand{background:var(--brand-btn);color:var(--on-primary)}
/* 6 · jul21 comp (Business 3): psol neutral treatment, safeguarding stack light + glow, API window float, pipeline filled cards */
.psol-problem{background:#3b3733}
.psol-arrow{color:var(--muted)}
.psol-facts span{text-transform:none;letter-spacing:.01em;font-weight:500;color:var(--muted);border-color:var(--line)}
.psol-tag{text-transform:none;letter-spacing:.01em}
.mock-float{transform:rotate(-1.5deg);box-shadow:0 26px 60px -26px rgba(26,22,18,.4);border:0}
.mock-float .qbar{box-shadow:0 0 0 1.5px var(--brand),0 8px 34px rgba(243,127,0,.32);border-radius:10px}
@media(prefers-reduced-motion:reduce){.mock-float{transform:none}}
.pl-stage{background:var(--surface2);border:0;box-shadow:none} /* light-grey per comp, not peach */
.pl-num{color:var(--faint)}
.pl-link{display:none}
/* uc cards per comp: filled light-grey, borderless, icon slot */
.uc{background:var(--surface2);border:0} /* light-grey per comp, not peach */
.uc .glyph{width:26px;height:26px;display:block;margin-bottom:.6rem;color:var(--ink)}
/* 7 · jul21 comp (Business 5): pricing treatments */
.pricetoggle button.active{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.tier .pop{position:static;background:var(--lav);color:var(--brand-ink);box-shadow:none;margin-bottom:.7rem;align-self:flex-start}
.tier .tierfit{color:var(--soft)}
.tier.feat{box-shadow:0 0 0 1.5px var(--brand),0 16px 56px rgba(243,127,0,.24)} /* orange ambient glow */
/* how-fees diagram: vertical glassy stack, rotated connectors, glowing top tier */
.sechead:has(+ .feeviz2), .feeviz2-head{text-align:center}
@media(min-width:900px){.feeviz2{grid-template-columns:minmax(0,560px);justify-content:center;gap:.4rem}.fvz-arrow{transform:rotate(90deg);min-height:26px}}
.fvz{background:linear-gradient(180deg,#fbfaf7,#efe9df);border:0;box-shadow:inset 0 1px 0 #fff,0 26px 50px -32px rgba(26,22,18,.4)}
.feeviz2 figure.fvz:nth-of-type(3) svg rect[fill="#E8752A"]{filter:drop-shadow(0 0 9px rgba(243,127,0,.5))}
/* FAQ dividers calm grey */
[data-pricing] .faq, .faq{border-color:var(--line)}
.pmatrix th.feat{border-top:0;box-shadow:none} /* jul21 comp: orange text only on Core column head */
/* A proposed rate must never read as an approved one. The introducer share has no MLRO ruling
   yet (it is the first on referral compensation), so the figure is withheld and the status is
   stated in the cell rather than in a footnote nobody reads. */
.pmatrix .pm-note{display:block;margin-top:.3rem;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:#B0651F}
.sc-item .glyph{width:22px;height:22px;display:block;margin-bottom:.45rem;color:var(--ink)}
/* 8 · aug03 precision fix, supersedes the jul21 de-seam values. This is the LAST .alt-hero-scene.photo
   declaration, it wins the cascade (the jul21 block here overrode an identical earlier fix and kept
   heroes dark for another round). Measured off the approved PDF render: ground lum ~98 warm taupe
   (RGB ~115,97,82), photo essentially undimmed, seam blend gone by 58%. */
.alt-hero-scene.photo{background:
  var(--hero-scrim,radial-gradient(115% 105% at -5% 55%,rgba(18,15,12,.60) 0%,rgba(18,15,12,.40) 30%,rgba(18,15,12,.18) 55%,rgba(18,15,12,.05) 72%,rgba(18,15,12,0) 88%)),
  var(--hero-img) var(--hero-pos,right center)/var(--hero-size,cover) no-repeat,
  linear-gradient(160deg,#5f5347 0%,#6e6156 55%,#786a5c 100%)}
@media (max-width:939px){
  .alt-hero-scene.photo{background:
    linear-gradient(180deg,rgba(96,80,66,.60),rgba(80,68,57,.82)),
    var(--hero-img) center/cover no-repeat,#5f5347}
}
/* aug03 scrim refit, measured against the client's approved hero export
   (hero-check/0-TRUTH-hero-section.png) vs the RAW hero-meeting.webp asset. Matched columns at
   x = 0/20/40/60/80/95% of the card give darkening ratios of ~1.03/1.05/1.08/1.02/1.18/0.88
   (mean ~1.0): the designer ships the photo UNSCRIMMED, cover-fit across the whole card
   (fitted scale 0.769 = cover width, ~87% of the vertical crop taken off the top), and the white
   copy reads because the wall in the photo is itself dark (~lum 100). So on index the full frame
   goes back in at the designer's crop and the scrim drops to a whisper that stays within 4
   luminance points of the raw photo. Pricing keeps its own full-frame photo at auto 100%: its
   scrim becomes a narrow base-coloured seam that is fully gone by 18%, before the first measured
   column, so the photo region renders at ratio ~1.0 like the export. Default --hero-scrim above
   is untouched for the other pages' pre-cropped heroes. */
.photo-biz{--hero-img:url(aug03/hero-meeting.webp);--hero-pos:right 87%;--hero-size:cover}
.photo-ind{--hero-size:cover;--hero-pos:right center}
/* .photo-pricing scrim override removed aug04: its .9 left plate was the same "colour bulge"; it now inherits the light default */
.alt-hero-copy .btn-primary{background:var(--brand-btn);color:var(--on-primary)} /* aug03 comp: hero CTA is orange on the photo, was white */
/* chiprow joins the sentence-case chip language (QA catch: tile-spec got it, chiprow didn't) */
.chiprow span{text-transform:none;letter-spacing:.01em;font-weight:500;font-size:.74rem}


/* AUG03 FINAL OVERRIDES: keep at end of file; earlier sections redefine these. */
/* Yuval 2026-08-03: hero FCA/FRN chips DROPPED site-wide (cleaner heroes; disclosure carried by
   .alt-hero-legal under every hero + footer strip). Supersedes 2026-07-13 top-left placement.
   Markup kept so this is one line to revert. [MLRO] confirm at next compliance review.
   !important because .alt-hero-anchor is re-declared display:inline-flex at :141; an earlier
   attempt without it was silently overridden, which shipped the chips for another hour. */
.alt-hero-anchor{display:none!important}
/* aug03 comp: two container widths. 2-col text+image folds run a narrow ~1024px column
   (comp measures ~210px gutters at 1444); hero/carousel/band folds keep the wide 1280px wrap. */
.wrap.alt-split{max-width:1104px}
/* hero card height per the client's Hero Section.png (715px card at 1440; comp render 639) */
.alt-hero-card{min-height:var(--hero-h,640px)}
/* AUG06 (Yuval): every hero is exactly 1280x640 inside the 1440 site width. Width comes from
   --shell-w on .alt-hero>.wrap; height is locked here so a long headline stretches the type, not
   the card. Below the shell breakpoint the card is allowed to grow again (see the 940px block). */
@media(min-width:940px){.alt-hero-card{height:var(--hero-h,640px);min-height:var(--hero-h,640px)}}
/* segment track per Navbar.png: flat grey rail, NO outer border; the active segment is a white
   pill lifted by a soft shadow, not an inset hairline ring.
   HEIGHT is the fix for "the switch fills the nav bar": the comp track is 47px inside an 87px bar,
   so it must be sized explicitly rather than left to grow with the nav's line-box. */
.alt-seg{background:#F3F1ED;border-color:transparent;height:var(--seg-h,47px);padding:4px;align-items:center;font-family:var(--nav-font)}
@media(min-width:940px){
  /* comp track is 219 wide: an active pill of 118 and a second segment of 101, both hugging their
     label with ~12px of side padding. The old min-width:132px forced 264+ and made the whole
     control read oversized next to the logo. */
  .alt-seg button,.alt-seg .seg-link{height:calc(var(--seg-h,47px) - 8px);min-height:0;min-width:0;padding:0 .78rem;font-size:var(--nav-fs,16px);letter-spacing:-.005em}
  .alt-seg button{font-weight:500}
  .alt-seg .seg-link{font-weight:400}
}
.alt-seg button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(18,18,18,.10),0 3px 8px -4px rgba(18,18,18,.18)}
.alt-seg .seg-link:hover{background:rgba(255,255,255,.6);box-shadow:none}
/* photo boxes in 2-col folds fill their frame edge-to-edge (comp crops them near-square);
   fb4 fix: the swapped landscape team photo left a dead cream band under itself otherwise.
   .plain media (unframed illustrations: key, shield, radar) keeps natural flow. */
.alt-split-media:not(.plain){aspect-ratio:1/1;min-height:0}
.alt-split-media:not(.plain) img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 40%} /* subject sits right-of-centre in the landscape source; default 50% crop centred on the wall */
/* aug03 fraud fold (index): measured 1:1 against layout-business ref-1x y3336-3876. Card 1280x540
   pad 80; h2 39/44 (balance off: comp breaks after "prevention,"); body 17/27 #666; chips 27px tall,
   transparent fill, #666 border and text; btn 262x46; radar render 411px tall so its VISIBLE extent
   (glow-trimmed) hits the comp's 339x377 box, nudged +9/+16 to the comp's visible centre (937,280).
   Scoped .fraud-fold so other pages' fold-cards are untouched. */
.fraud-fold h2{text-wrap:wrap;font-size:39px;line-height:44px;margin-bottom:20px;letter-spacing:-.02em}
.fraud-fold .lead{font-size:19px;line-height:27px;color:#666;margin-bottom:0;max-width:512px} /* comp body measure is 500px; the 532px grid col lets line 1 steal "move" otherwise */
.fraud-fold .fold-chips{margin-top:19px;gap:8px}
.fraud-fold .fold-chips li{font-size:13px;line-height:19px;padding:3px 11px;background:transparent;border-color:#666;color:#666}
.fraud-fold .btn{font-size:16.5px;line-height:22px;padding:10.5px 26px}
.fraud-fold .alt-split>div p:last-child{margin-bottom:0}
@media (max-width:939px){
  /* pre-existing gap: the 940px collapse rule lists .alt-split and .flip but not .even, so this
     fold rendered two crushed columns on phones. Scoped fix, not a shared-rule change. */
  .fraud-fold .alt-split.even{grid-template-columns:1fr}
}
@media (min-width:940px){
  .fraud-fold .wrap{max-width:1376px}
  .fraud-fold .fold-card{height:540px;padding:80px}
  /* img renders 411 tall so its glow-trimmed visible box hits the comp's 339x377; the negative
     block margin keeps the grid row at the card's 380px content height (else the row inflates
     and the whole fold slides 16px down), and the relative nudge lands the visible centre on
     the comp's (937,280). */
  .fraud-fold .fold-card .alt-split-media{overflow:visible} /* base rule clips at the grid row; the glow must bleed into the card padding like the comp */
  .fraud-fold .fold-card .alt-split-media img{max-height:none;height:465px;width:auto;position:relative;left:9px;top:16px;margin:-42px auto}
  /* aug04: asset re-cropped 690x814 -> 830x920 because the old crop sliced the dial's glow sharp on
     both sides (edge deviation 16 vs clean <=2, the "image is cut" report). Height rescaled
     411 -> 465 = same dial size on screen, wider margins absorb the added air. */
}


/* ===== horizontal variant of the .alt-secitem strip =====
   The strip stacks one row per item down the page. On partner-professional that is five rows, which
   pushed the audit fold past two screens of scroll. This lays the same items across instead of down,
   keeping the hairline-rule language (no cards, no boxes), so five items cost one row of scroll.
   auto-fit wraps it to 3-up, then 2-up, then back to the original stack as the viewport narrows.
   (Yuval, 2026-08-19: "should be horizontal so user don't need to scroll as much".) */
.alt-secgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr));gap:0 clamp(1.2rem,2.5vw,2.2rem);margin-top:clamp(1.6rem,3vw,2.4rem)}
.alt-secgrid .alt-secitem,
.alt-secgrid .alt-secitem:first-child{display:block;margin:0;padding:1.1rem 0 0;border-top:1px solid var(--line)}
.alt-secgrid .alt-secitem b{display:block;margin-bottom:.35rem}
.alt-secgrid .alt-secitem p{max-width:none}


/* ===== "Take DigiDoe with you" app band, shared =====
   These rules already existed, but only inside page-level <style> blocks on index.html and
   individuals.html. The partner pages now carry the same band, and without this they inherit the
   stale rule at line 226 (width:300px;height:352px;object-fit:cover) which forces a tall asset
   into a short box and makes the phone read elongated. Promoted to the shared sheet so every page
   carrying .alt-band.app renders the device at native proportions. The two page-level copies are
   byte-identical, so they stay valid and simply win by source order. (2026-08-19.)
   aug05 designer crop is 734x720: the device bleeds off the bottom edge and the crop's own ground
   is #121212, the same as the band, so it merges with no visible box. No radius, plate or shadow:
   any of those redraw the box the crop exists to remove. */
.alt-band.app .art.appshot{align-self:end;margin-bottom:calc(-1 * clamp(1.8rem, 4vw, 3rem))}
.alt-band.app .art.appshot img{width:300px;height:auto;object-fit:initial;object-position:initial;border-radius:0;background:none;box-shadow:none}


/* === BUSINESS HOME, Pavel + Rohit review 2026-08-24 ===================== */

/* P2 . accounts fold goes HORIZONTAL: four accounts side by side, one shared
   CTA beneath, no per-account "Apply for..." links. Overrides both the base
   .seg-row grid and the >=940px three-column variant at ~line 822 (higher
   specificity AND later in the cascade, so it wins on either count). */
.seg-rows.horizontal{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.2vw,2rem);border-top:0}
.seg-rows.horizontal .seg-row{display:block;padding:1.4rem 0 0;border-bottom:0;border-top:1px solid var(--line)}
.seg-rows.horizontal .seg-row-label h3{max-width:none;margin-top:.45rem}
.seg-rows.horizontal .seg-row-body{margin-top:.85rem}
.seg-rows.horizontal .seg-row-body p{max-width:34ch}
.seg-rows.horizontal .seg-row-body .tile-spec{margin-top:.85rem}
.seg-rows-cta{margin:2.4rem 0 0;text-align:center}
/* 3-up variant for the individual lane's audience routing fold. The base horizontal
   rule is repeat(4,1fr), sized for the business home's four currency accounts; three
   rows in it leave a ragged empty column. Additive only: index.html carries no .three. */
.seg-rows.horizontal.three{grid-template-columns:repeat(3,1fr)}
/* the base responsive rules are .seg-rows.horizontal (2 classes) and lose to the .three
   selector above (3 classes) even inside their media queries, so .three needs its own. */
@media (max-width:1100px){.seg-rows.horizontal.three{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.seg-rows.horizontal.three{grid-template-columns:1fr}}
@media (max-width:1100px){.seg-rows.horizontal{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.seg-rows.horizontal{grid-template-columns:1fr}}

/* P1 . ISO 27001 and ISO 22301 are now two separate items, each carrying its
   OWN badge. iso-badge-rules.md section 3 is the reason: a badge is
   standard-specific and cannot support the other standard's claim. Artwork is
   the supplied non-UKAS file, scaled UNIFORMLY and never restyled: no
   border-radius, no filter, no recolour, no crop, no object-fit.
   120px, not 96: at 96 the badge interiors ("British Assessment Bureau",
   "Information Security Management") turn to mush, and rule section 2 says a
   badge must not be used at a size where its type stops being legible. */
.cert-inline{display:block;width:120px;height:120px;margin:0 auto 1rem;border-radius:0}

/* The trust row now mixes one line-art icon with two badge photographs, which
   have very different intrinsic proportions. Without a fixed media slot the
   short icon lets its heading climb ~36px above the other two and the row
   loses its baseline. One slot height, three different marks inside it. */
.sec-strip .ic{width:auto;height:120px;display:grid;place-items:center;margin:0 auto 1rem}
/* 96, not 64: the badge PNGs carry internal whitespace, so a 120px badge is ~100px
   of actual ink. A 64px line-art glyph beside them read as 2.2x smaller. Matching
   the INK, not the box, is what makes the three marks look like one row. */
.sec-strip .ic svg{width:96px;height:96px}
/* The FCA heading wraps to two lines while both ISO headings sit on one, which
   dropped its body copy 33px below the others. Two lines' worth of reserved
   height keeps all three paragraphs on one line. */
.sec-strip b{max-width:26ch;margin-left:auto;margin-right:auto;text-wrap:balance;min-height:2.8em}

/* P3 . price fold loses the fanned plastic cards. They read as "DigiDoe issues
   cards", which is not the product. Deleting the graphic left the plan block
   stranded in the old left-hand column with ~700px of dead card beside it, so
   the slide centres to match the heading and the dots. */
.alt-caro-grid.single{grid-template-columns:1fr;max-width:760px;margin:0 auto}
.alt-caro-grid.single .alt-caro-slide{align-items:center;text-align:center;padding-left:clamp(2rem,3vw,2.8rem)}
.alt-caro-grid.single .alt-caro-slide .caro-cta{margin-inline:auto}
/* The chevrons are absolutely positioned against the CARD, which was right when
   the card held two columns. With the graphic gone they sat ~226px out from the
   content they page, reading as card furniture. Pull them to the edges of the
   760px content band instead. Desktop only: below 940 the card is already narrow
   enough that the original edge positions are correct. */
@media (min-width:940px){
  .alt-caro:has(.alt-caro-grid.single) .alt-caro-nav [data-prev]{left:calc(50% - 400px)}
  .alt-caro:has(.alt-caro-grid.single) .alt-caro-nav [data-next]{right:calc(50% - 400px)}
}


/* ── PM notes 2026-08-28 ─────────────────────────────────────────────────────
   I19 + P16 footer: lane-scoped links, and a 5th column on the partner lane.
   I14 plans: three simultaneous cards on desktop, carousel below 760. */
footer.site .fcol a[hidden]{display:none!important}
@media(min-width:820px){
  html.icp-ptr footer.site .fgrid{grid-template-columns:1.3fr repeat(4,1fr)}
}
@media(min-width:761px){
  .alt-caro-grid.plans3 [data-alt-caro]{grid-template-columns:repeat(3,1fr);column-gap:clamp(1rem,2.4vw,2rem)}
  .alt-caro-grid.plans3 .alt-caro-slide{visibility:visible;opacity:1;grid-row:2;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md,16px);padding:1.5rem 1.4rem}
  .alt-caro-grid.plans3 .plan-1{grid-column:1}
  .alt-caro-grid.plans3 .plan-2{grid-column:2}
  .alt-caro-grid.plans3 .plan-3{grid-column:3}
  .alt-caro-grid.plans3 .alt-caro-nav,.alt-caro-grid.plans3 .alt-caro-dots{display:none}
}

/* Phase C (PM notes 2026-08-28 P7-P13): grid variants the partner detail sections need.
   .dd-pipeline base is 1fr auto 1fr auto 1fr (3 stages + 2 connectors); these are plain
   n-up stage rows with no connector glyphs. */
.alt-tilerow.two{grid-template-columns:repeat(2,1fr)}
.dd-pipeline.pipe-4{grid-template-columns:repeat(4,1fr)}
.dd-pipeline.pipe-5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1099px){.dd-pipeline.pipe-5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:819px){.alt-tilerow.two,.dd-pipeline.pipe-4,.dd-pipeline.pipe-5{grid-template-columns:1fr}}
.cert-cta{margin-top:.6rem;font-size:var(--s--1)}

/* Phase C fix (vision review 2026-09-07): .alt-tilerow .alt-tile reserves a 1fr row for
   .tile-art, and .alt-band is a 2-col art+copy grid. The partner detail tiles and the
   commission callout ship without artwork, so those reserved slots rendered as dead space.
   These modifiers collapse the empty slot instead of faking an asset. */
.alt-tilerow .alt-tile.no-art{grid-template-rows:auto minmax(6.1em,auto) minmax(1.9rem,auto);row-gap:.15rem}
.alt-tilerow .alt-tile.no-art h3{grid-row:1;align-self:start}
.alt-tilerow .alt-tile.no-art p{grid-row:2}
.alt-tilerow .alt-tile.no-art .tile-spec,.alt-tilerow .alt-tile.no-art .caro-cta{grid-row:3;align-self:end}
.alt-band.solo{grid-template-columns:1fr}

/* PM note I4 "CTA to be center aligned" (vision/measure 2026-09-07): .seg-rows-cta already had
   text-align:center, but it is a GRID ITEM inside .seg-rows - so it centred its text inside one
   narrow column at the far left, 1032px off true centre at 1440. It has to span every column. */
.seg-rows > .seg-rows-cta{grid-column:1/-1;justify-self:center}


/* ============================================================
   FOOTER PROPORTIONS - the designer's boards, 2026-09-14.
   Source: .claude/skills/dd-skin/references/proportions.md §Rule 6.
   Measured off all three finalised boards, which agree to the pixel:
   footer top padding 80 (was 41.6), bottom 40 (was 25.6), and the link
   columns on a 340 pitch with an 80 gutter (was a 256 pitch from
   1.5fr+repeat(3,1fr), which put "Platform" at x533 instead of x422).
   Column maths, inside the 1280 content column:
     4 cols  260*4 + 80*3  = 1280   starts x82 / 422 / 762 / 1102
     5 cols (partner lane, his partners board)
             268 + 181*4 + 72*4 = 1280   starts x82 / 422 / 675 / 928 / 1181
   ============================================================ */
footer.site{padding:80px 0 40px}
footer.site .wrap{padding-top:0}
/* his boards set the column head 36px above its first link; ours sat at 28 */
footer.site .fcol .fh{margin:0 0 18px}

/* The fixed track widths only hold where the 1280 column actually fits. Below
   that the grid must stay fluid - pinning 260px tracks at 390 pushed the page
   914px wide. His boards are 1440-only and say nothing about mobile. */
@media(min-width:1200px){
  /* .wrap carries margin:0 80px AND padding:0 80px, so its content box started
     at x160 and every column sat 78px right of the board. */
  footer.site .wrap{padding-left:0;padding-right:0}
  footer.site .fgrid{grid-template-columns:repeat(4,260px);column-gap:80px;margin-bottom:1.2rem}
  html.icp-ptr footer.site .fgrid{grid-template-columns:268px repeat(4,181px);column-gap:72px}
}

/* PM brief 2026-10-06 note 3: partner service audiences (Introducers, EMD Agents, EMIs) sit together;
   a hairline before Legal, accounting & trustees, whose offer is digital onboarding, not a partnership model. */
/* 2026-10-12: the hairline, the hidden-card rule and the column flex now live in the
   MEGA-MENU block near the top of this file (designer dropdown pack). */

/* Dropdown panels sit on the homes' grid (1280 max, 80px gutter) on every page. Yuval 2026-10-08: "align shared too". Desktop only. */
@media (min-width:940px){
.alt-menupanel .wrap{max-width:1280px!important;padding:0 80px!important;margin:0 auto!important}
}