/* ==========================================================================
     Tokens/design-system.css
     Core design tokens — colors, gradients, glass surfaces. Everything below
     references these rather than hardcoding values, so the whole palette
     can be re-themed from this one block.
     ========================================================================== */
  :root{
    --brand-ink-950:#07080E;
    --surface-glass:rgba(255,255,255,0.035);
    --surface-glass-hover:rgba(255,255,255,0.07);
    --border-glass-subtle:rgba(255,255,255,0.10);
    --border-glass-strong:rgba(255,255,255,0.22);
    --text-primary:#F8F8FC;
    --text-secondary:#A7A9C9;
    --text-tertiary:#6E7092;
    --accent-rose-500:#FF4F8B;
    --accent-violet-500:#8B5CF6;
    --accent-cyan-400:#22C6FF;
    --brand-gradient: linear-gradient(135deg, var(--accent-rose-500) 0%, var(--accent-violet-500) 50%, var(--accent-cyan-400) 100%);
    --brand-gradient-soft: linear-gradient(135deg, rgba(255,79,139,0.14), rgba(139,92,246,0.12) 50%, rgba(34,198,255,0.14));
    --accent-violet-glow:rgba(139,92,246,0.35);
    --maxw: 1200px;
    /* soft gray-beige-white surround shown around the card on larger screens */
    --page-surround:#E9E5DE;
  }
  *{box-sizing:border-box; margin:0; padding:0; font-family:'Plus Jakarta Sans', sans-serif;}
  html{scroll-behavior:smooth; overflow-x:hidden; background:var(--page-surround);}
  body{
    background:var(--page-surround); color:var(--text-primary);
    font-size:18px; line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden; position:relative;
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
  }
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}

  /* custom scrollbar — thin, gradient thumb, matches the brand palette */
  ::-webkit-scrollbar{ width:10px; }
  ::-webkit-scrollbar-track{ background:var(--brand-ink-950); }
  ::-webkit-scrollbar-thumb{ background:var(--brand-gradient); border-radius:999px; border:2px solid var(--brand-ink-950); }
  html{ scrollbar-width:thin; scrollbar-color: var(--accent-violet-500) var(--brand-ink-950); }
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px; position:relative; z-index:1;}
  .mono{font-family:'JetBrains Mono', monospace;}
  .eyebrow{
    font-family:'JetBrains Mono', monospace; font-size:14.5px; font-weight:600;
    letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-cyan-400);
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
  }
  h1,h2,h3{font-family:'Plus Jakarta Sans', sans-serif; font-weight:800; letter-spacing:-0.02em; line-height:1.06;}
  .grad-text{
    background:var(--brand-gradient); background-size:200% 100%;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation: shimmer 6s ease-in-out infinite;
  }
  @keyframes shimmer{ 0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;} }
  .rule{height:1px; background:var(--border-glass-subtle); border:none;}
  :focus-visible{outline:2px solid var(--accent-cyan-400); outline-offset:3px;}

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

     Components/GlassSurface.css
     Shared frosted-glass surface + the two halo treatments: a static
     premium glow (default) and a slow-rotating ring (lead form only).
     ========================================================================== */
  .glass{
    background:var(--surface-glass);
    border:1px solid var(--border-glass-subtle);
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    border-radius:22px;
  }
  .glass-strong{ background:var(--surface-glass-hover); }

  /* rotating glow ring — reserved for the lead intake card only */
  .glow-ring{position:relative;}
  .glow-ring::before{
    content:""; position:absolute; inset:-2px; border-radius:inherit; z-index:-1;
    background:conic-gradient(from 0deg, var(--accent-rose-500), var(--accent-violet-500), var(--accent-cyan-400), var(--accent-rose-500));
    opacity:0.5; filter:blur(16px);
    animation: ringspin 7s linear infinite;
  }
  @keyframes ringspin{ to{ transform:rotate(360deg); } }

  /* "Why 1Eighty" graphic motion.
     360: never stops — a constant, going-nowhere loop.
     180: snaps a half turn, then holds, so you read each direction change.
     Full cycle is 2.4s: ~0.75s of turn, the rest is the hold. */
  .wg-spin-360{ animation: wgLoop 4s linear infinite; transform-origin:50% 50%; }
  .wg-spin-180{ animation: wgHalf 4.8s cubic-bezier(.65,0,.35,1) infinite; transform-origin:50% 50%; }
  @keyframes wgLoop{ to{ transform:rotate(360deg); } }
  /* Two half-turns per 4.8s cycle so the loop restart lands on 360deg — the
     same visual position as 0deg — and never snaps backwards. */
  @keyframes wgHalf{
    0%   { transform:rotate(0deg); }
    16%  { transform:rotate(180deg); }
    50%  { transform:rotate(180deg); }
    66%  { transform:rotate(360deg); }
    100% { transform:rotate(360deg); }
  }
  @media (prefers-reduced-motion: reduce){
    .wg-spin-360, .wg-spin-180{ animation:none; }
  }

  /* static premium halo — used elsewhere instead of the spinning ring */
  .glow-static{ position:relative; }
  .glow-static::before{
    content:""; position:absolute; inset:-1px; border-radius:inherit; z-index:-1;
    padding:1px;
    background:linear-gradient(135deg, rgba(255,79,139,0.55), rgba(139,92,246,0.5) 50%, rgba(34,198,255,0.55));
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    opacity:0.85;
  }
  .glow-static::after{
    content:""; position:absolute; inset:-90px; border-radius:90px; z-index:-2;
    background:radial-gradient(ellipse 65% 60% at 50% 32%, rgba(139,92,246,0.15), rgba(139,92,246,0.05) 48%, transparent 74%);
    animation: breathe 5s ease-in-out infinite;
  }
  @keyframes breathe{ 0%,100%{opacity:0.6;} 50%{opacity:1;} }

  /* ambient glow orbs */
  .orb{ position:absolute; border-radius:50%; filter:blur(120px); pointer-events:none; z-index:0; }

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

     Components/IconBadge.css
     Self-contained inline SVG icons (no external font/CDN dependency) sitting
     inside a round gradient badge. Meta/Google use a clean typographic
     letterform instead of a hand-traced logo — renders perfectly every time.
     ========================================================================== */
  .icon{ width:30px; height:30px; stroke:url(#iconGrad); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .icon-letter{ font-family:'Plus Jakarta Sans', sans-serif; font-weight:800; font-size:30px; line-height:1; background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }
  @keyframes iconFloat{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-5px);} }
  @keyframes iconPop{ 0%{transform:scale(0.5); opacity:0;} 100%{transform:scale(1); opacity:1;} }
  .in .process-icon, .in .service-icon{ animation:iconPop .5s cubic-bezier(.34,1.56,.64,1) both; }

  /* scroll progress bar */
  .progress-bar{position:fixed; top:0; left:0; height:3px; width:0%; background:var(--brand-gradient); z-index:100;}

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

     Components/Button.css
     ========================================================================== */
  .btn{
    font-weight:700; font-size:16.5px; padding:17px 30px; border-radius:999px;
    display:inline-flex; align-items:center; gap:10px; position:relative; overflow:hidden;
    transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s cubic-bezier(.22,1,.36,1);
    cursor:pointer; border:none;
  }
  .btn::before{
    content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
    background:linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent);
    transform:skewX(-18deg); transition:left .7s cubic-bezier(.19,1,.22,1); pointer-events:none;
  }
  .btn:hover::before{ left:130%; }
  .btn-primary{ background:var(--brand-gradient); color:#0A0A16; box-shadow:0 8px 30px rgba(139,92,246,0.25); }
  .btn-primary:hover{ box-shadow:0 0 34px rgba(255,79,139,0.75), 0 0 60px rgba(139,92,246,0.7), 0 0 90px rgba(34,198,255,0.55); transform:translateY(-3px) scale(1.03); }
  .btn-primary.pulse{ animation: pulseGlow 2.6s ease-in-out infinite; }
  @keyframes pulseGlow{ 0%,100%{ box-shadow:0 8px 30px rgba(139,92,246,0.15); } 50%{ box-shadow:0 8px 50px rgba(139,92,246,0.6), 0 0 26px rgba(255,79,139,0.3); } }
  .btn-ghost{ background:var(--surface-glass); border:1px solid var(--border-glass-strong); backdrop-filter:blur(10px); color:var(--text-primary); }
  .btn-ghost:hover{ box-shadow:0 0 44px var(--accent-violet-glow), 0 0 70px rgba(34,198,255,0.4), inset 0 0 24px rgba(255,255,255,0.09); background:var(--surface-glass-hover); transform:translateY(-3px) scale(1.02); }
  .ripple{ position:absolute; border-radius:50%; background:rgba(255,255,255,0.5); transform:scale(0); animation:rippleAnim .6s ease-out forwards; pointer-events:none; }
  @keyframes rippleAnim{ to{ transform:scale(2.6); opacity:0; } }

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

  /* ==========================================================================
     Components/DigitalCard.css — v2
     ========================================================================== */
  body{ overflow-x:hidden; background:var(--page-surround); }
  /* digital card: mobile-first, full-bleed on phones; on wider screens it caps
     at ~455px, rounds its corners, and floats on the soft gray-beige surround */
  /* WHITE-BAR FIX — root cause: overflow containment on the card shell was
     only ever added inside the >=476px desktop media query below (needed
     there anyway, for the rounded-corner floating card). On a real phone
     viewport (<476px, full-bleed) .card-shell had NO overflow constraint at
     all, so a purely decorative, intentionally-oversized element — e.g.
     .glow-static::after's inset:-90px ambient halo, used across several
     sections (How It Works, the offer/guarantee band, etc.) — bled up to
     90px past the real screen edge on every axis. body{overflow-x:hidden}
     alone did not fully contain it (confirmed live: document.body.scrollWidth
     still measured ~90px wider than window.innerWidth on a real 390px
     viewport, in both Chromium and WebKit). Past the real edge, that reveals
     this page's own --page-surround backdrop (a light gray-beige, close to
     white) as a vertical strip along the side the excess landed on — this is
     the reported "white vertical strip down the entire right side of the
     iPhone preview." overflow-x:clip here (not the desktop block's
     overflow:hidden) so it never touches vertical scroll behavior on a page
     that is already relying on body-level vertical scroll. Never a margin
     hack — this restores the same containment the desktop breakpoint always
     had, to the viewport width it was actually missing from. */
  /* PRODUCTION CORRECTION — Austin's real-Safari acceptance test confirmed
     the white-bar fix above (overflow-x:clip, verified live in Chromium and
     WebKit at the time) does NOT hold on real Safari. overflow-x:clip is a
     hard clip per spec, but this codebase has already hit this exact
     "overflow alone isn't enough once a descendant gets its own
     independent compositor layer" class of WebKit bug TWICE before — the
     Engagement gauge atmosphere canvases, and this same Digital Card's own
     Dashboard phone-preview iframe (search "known WebKit inconsistencies
     with a scaled iframe" in dashboard/styles.css) — and both needed
     contain:paint IN ADDITION to overflow:hidden/clip to actually hold in
     real Safari; overflow alone was verified sufficient in Chromium/tested-
     WebKit both times, exactly like the comment above verified for THIS
     bug. .glow-static::after's animated (breathe 5s), negative-z-index,
     inset:-90px halo (the already-confirmed source, per the comment above)
     is exactly the kind of animated, independently-compositable descendant
     this pattern applies to. contain:paint is a CSS-spec guarantee that
     nothing this element paints — including a descendant with its own
     compositor layer — can ever render outside its box, regardless of any
     overflow/clip behavior a specific engine does or doesn't fully honor;
     zero visual change, near-zero cost, purely additive to the existing
     overflow-x:clip (kept, not replaced). NOT independently confirmed
     against real Safari by this pass (no such browser available here) —
     needs Austin's real-browser re-test. */
  .card-shell{ max-width:455px; margin:0 auto; background:var(--brand-ink-950); color:var(--text-primary); min-height:100vh; position:relative; overflow-x:clip; contain:paint; }
  .card-wrap{ padding:0 20px; }
  /* SAFARI SCROLLBAR-GUTTER FIX (batch 2) — a second, distinct white-bar
     report, isolated to Safari, at the same full-bleed (<476px) width as
     the overflow-x:clip fix above but a different mechanism: Safari gives
     iframed documents (card/preview/index.html embedded by the dashboard's
     own Digital Card preview, and card/template01/index.html embedded by
     Card Studio's previewFrame) a classic, space-reserving vertical
     scrollbar even where the same page at the same width shows an overlay
     scrollbar in Chrome. .card-shell has no explicit width — it fills
     body's content box, which is correct — but the reserved scrollbar
     track itself paints with whatever sits behind/around the scrolling box
     at that edge, which on this light --page-surround body reads as a
     vertical white/beige strip hugging the right edge of the dark card,
     exactly where Chrome's overlay scrollbar draws with no reserved space
     at all. Confirmed Safari-only per the report; not reproducible in
     Chrome, which never reserves the gutter here.
     Fix: hide the scrollbar chrome itself (both the thumb this file
     already styles via ::-webkit-scrollbar above, AND the track/gutter
     Safari was reserving) at this exact full-bleed breakpoint, while
     leaving `overflow` untouched so real vertical scrolling is unaffected
     — scrollbar-width:none / -webkit-scrollbar{display:none} suppress the
     rendered scrollbar without disabling scroll. Scoped to <476px only:
     at >=476px the card is already inset with page-surround intentionally
     visible around it (the "soft gray-beige-white surround" this file's
     own tokens comment describes), and the styled gradient scrollbar is a
     deliberate desktop touch that should NOT be stripped there — this
     never touches that branch or the ::-webkit-scrollbar rules near the
     top of this file. */
  @media (max-width:475px){
    html, body{ scrollbar-width:none; -ms-overflow-style:none; }
    html::-webkit-scrollbar, body::-webkit-scrollbar{ width:0; height:0; background:transparent; }
  }
  @media (min-width:476px){
    .card-shell{
      min-height:auto; margin:28px auto; border-radius:30px; overflow:hidden;
      box-shadow:0 30px 80px -24px rgba(20,18,14,0.45), 0 0 0 1px rgba(20,18,14,0.05);
    }
  }

  /* ---------- HERO ----------
     Cover banner geometry, measured off the artwork (1841x731 px):
       • the dark circular cutout is centred at x = 50% of the cover
       • its centre sits at y = 98.95% of the cover height
       • its radius is 10.87% of the cover WIDTH  (diameter 21.74%)
     Every value below is a percentage of the card width, so the avatar stays
     nested inside the cutout at every viewport size — phone through desktop —
     with no breakpoint-specific pixel tweaks.
     ------------------------------------------------------------------------ */
  .card-hero{ position:relative; padding-bottom:4px; text-align:center; }
  /* the section immediately after the hero divider hugs the emoji tighter */
  .card-band.is-tight{ padding-top:14px; }
  .card-hero{
    --cover-ar: 1841 / 731;   /* intrinsic banner aspect ratio */
    --avatar-d: 41%;          /* slightly larger, so it reads as the hero */
    --avatar-drop: 6%;        /* sits lower than the cutout centre, off the strip */
    /* -(0.42% + d/2 - drop) keeps the avatar centred on the cutout's x-axis
       while riding lower than its centre */
    --avatar-pull: -13%;      /* raised up so the avatar nests into & covers the cutout */
    /* FIELD TEST BATCH 2, item 3 — was 16% ("halfway between the avatar
       edge and the card edge"), but field testing found Reviews/Form still
       read as crowding the avatar ring. Eased out another ~2.5 points
       toward the card edges; avatar geometry (--avatar-d/-pull/-drop)
       untouched. This is the shared template constant every card renders
       through (there is no per-card override of it in data.js/studio.js),
       so it is the correct "default positioning going forward" layer —
       it changes no stored design snapshot, including Austin's. */
    --side-inset: 13.5%;
  }
  /* on phones the avatar reads a touch larger and rides up into the cutout
     so it cleanly covers the dark cutout slot on the banner */
  @media (max-width:560px){
    .card-hero{ --avatar-d: 45%; --avatar-pull: -15%; --side-inset: 11%; }
  }
  /* break the cover out of the .card-wrap 20px padding so the banner runs
     edge-to-edge with the screen on every mobile device */
  .card-cover{ position:relative; width:calc(100% + 40px); margin-left:-20px; margin-right:-20px; line-height:0; }
  #cover-photo{
    display:block; width:100%; height:auto;
    aspect-ratio:var(--cover-ar); object-fit:cover; object-position:center bottom;
  }
  /* PHASE 2.2 — approved, disclosed Template 01 divergence from the
     original card/index.html (which keeps its own dark bottom scrim):
     Austin asked for a clean, hard bottom edge on the banner with no
     fade, since the original's dark blend was only ever unnoticeable
     against his own near-black background and reads as a defect on a
     light one. The element stays in markup (harmless, zero-size) so
     nothing else needs to change. */
  .card-cover-scrim{ display:none; }
  /* superseded by the banner artwork, which already carries the logo + skyline */
  .card-cover-glow, .card-cover-skyline, .card-cover-fade, .card-logo-small{ display:none !important; }

  .card-hero-content{ position:relative; z-index:3; }

  /* the avatar drops up into the cutout; Map / Form are pinned to the edges */
  .card-photo-row{
    position:relative; display:flex; justify-content:center;
    margin-top:var(--avatar-pull);
  }
  .card-side-btn{
    position:absolute; bottom:0; display:flex; flex-direction:column; align-items:center;
    gap:9px; padding:6px 2px; text-decoration:none; color:var(--text-primary);
    transition:transform .2s ease;
  }
  /* --side-inset is the midpoint of the gap between the avatar and the edge,
     so the button is centred in that space rather than jammed against it */
  .card-side-btn.is-left{ left:var(--side-inset); transform:translateX(-50%); }
  .card-side-btn.is-right{ right:var(--side-inset); transform:translateX(50%); }
  .card-side-btn.is-left:active{ transform:translateX(-50%) scale(0.94); }
  .card-side-btn.is-right:active{ transform:translateX(50%) scale(0.94); }
  .card-side-btn:active{ transform:scale(0.94); }
  /* identical treatment to the Email / Call / Text buttons below */
  .card-side-btn .sb-icon{
    width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    /* rgba(255,255,255,0.06) over the ink background, pre-flattened so the
       button reads identically whether it lands on the card or the skyline */
    background:rgba(28,29,38,0.82);
    backdrop-filter:blur(14px) saturate(130%); -webkit-backdrop-filter:blur(14px) saturate(130%);
    box-shadow:0 0 20px -6px var(--accent-violet-glow), inset 0 0 0 1px rgba(255,255,255,0.06);
    transition:box-shadow .3s ease, background .3s ease, transform .3s ease;
  }
  .card-side-btn:hover .sb-icon{
    background:rgba(255,255,255,0.12);
    box-shadow:0 0 30px 2px var(--accent-violet-glow), 0 0 48px 4px rgba(255,79,139,0.35), inset 0 0 0 1px rgba(255,255,255,0.16);
    transform:translateY(-2px);
  }
  .card-side-btn .sb-icon svg{ width:25px; height:25px; }
  /* full-colour Google mark keeps its own palette instead of currentColor */
  .card-side-btn .sb-icon svg.sb-google{ width:24px; height:24px; }
  .card-side-btn .sb-label{ font-size:13px; font-weight:700; color:var(--text-primary); }

  .card-photo-wrap{
    width:var(--avatar-d); aspect-ratio:1 / 1; border-radius:50%; padding:3px; flex:0 0 auto;
    background:conic-gradient(from 0deg, var(--accent-rose-500), var(--accent-violet-500), var(--accent-cyan-400), var(--accent-rose-500));
    box-shadow:0 0 34px -8px var(--accent-violet-glow);
  }
  .card-photo{ width:100%; height:100%; border-radius:50%; overflow:hidden; border:2px solid var(--brand-ink-950); }
  /* Portrait framing: the source photo is a 300x384 portrait, so a square
     "cover" crop only trims ~22% of the height. Instead of scaling the image up
     (which zoomed hard into the face), we now sit at ~1:1 zoom and shift the
     crop window toward the top of the frame with object-position. Net effect:
     zoomed out AND the subject pulled down, so the top of the hair clears the
     ring while the shoulders still read at the bottom. */
  .card-photo img{
    width:100%; height:100%; object-fit:cover; display:block;
    object-position:center 20%;
    transform:scale(1.02); transform-origin:center;
  }

  /* the "breathing" brand gradient (same shimmer as 1Eighty Media / 180 changes
     your direction) applied across whole headings + paragraphs in the About and
     What We Do sections */
  /* the breathing brand color — headings of About + What We Do, and every
     "What We Do" service title, share the same shimmering gradient */
  .grad-band, .grad-band b, .grad-band strong,
  .h-breathe, .h-breathe b, .h-breathe strong{
    background:var(--brand-gradient); background-size:200% 100%;
    -webkit-background-clip:text; background-clip:text;
    color:transparent; -webkit-text-fill-color:transparent;
    animation: shimmer 6s ease-in-out infinite;
  }
  /* plain, basic bold white body copy for Meet 1Eighty / Why 1Eighty / How It Works / About */
  .txt-white-bold{ color:var(--text-primary) !important; font-weight:700 !important; }
  /* keep any breathing-gradient span inside a bold-white paragraph on-brand */
  .txt-white-bold .grad-text{ -webkit-text-fill-color:transparent; }
  /* bold body copy that carries the same breathing brand gradient as the
     "Here's What We Build" heading — used for emphasis inside How It Works,
     About, and the service cards */
  .txt-grad-bold{
    font-weight:700;
    background:var(--brand-gradient); background-size:200% 100%;
    -webkit-background-clip:text; background-clip:text;
    color:transparent; -webkit-text-fill-color:transparent;
    animation: shimmer 6s ease-in-out infinite;
  }

  /* wide desktop: the shell caps at 560px, so nothing needs to change —
     this only guards against the avatar becoming uncomfortably small on
     very narrow phones by nudging the side buttons in a touch further. */
  @media (max-width:380px){
    .card-hero{ --side-inset:13.5%; }
    .card-side-btn .sb-icon{ width:52px; height:52px; }
    .card-side-btn .sb-icon svg{ width:22px; height:22px; }
    .card-side-btn .sb-label{ font-size:12px; }
  }

  .card-hero h1{ font-size:clamp(26px,7vw,30px); margin:18px 0 0; }
  .card-hero .card-company{
    margin-top:6px; font-size:17px; font-weight:800;
    background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .card-hero .card-title{
    margin-top:4px; font-family:'JetBrains Mono', monospace; font-size:13px; letter-spacing:0.06em;
    text-transform:uppercase; color:var(--text-secondary); font-weight:600;
  }

  /* ---------- ACTION GRID (borderless, large) ---------- */
  .card-actions{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px 4px; margin-top:13px; }
  .card-action{
    display:flex; flex-direction:column; align-items:center; gap:9px; padding:6px 2px;
    text-decoration:none; color:var(--text-primary); background:none; border:none; cursor:pointer;
    transition:transform .2s ease;
  }
  .card-action:active{ transform:scale(0.94); }
  .card-action .a-icon{
    width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,0.06); box-shadow:0 0 20px -6px var(--accent-violet-glow), inset 0 0 0 1px rgba(255,255,255,0.06);
    transition:box-shadow .3s ease, background .3s ease, transform .3s ease;
  }
  .card-action:hover .a-icon{
    background:rgba(255,255,255,0.12);
    box-shadow:0 0 30px 2px var(--accent-violet-glow), 0 0 50px 4px rgba(255,79,139,0.35), inset 0 0 0 1px rgba(255,255,255,0.16);
    transform:translateY(-3px);
  }
  .card-action.is-connect:hover .a-icon{
    box-shadow:0 0 34px 4px var(--accent-violet-glow), 0 0 60px 8px rgba(255,79,139,0.5);
  }
  .card-action .a-icon svg{ width:25px; height:25px; }
  .card-action .a-label{ font-size:13px; font-weight:700; }
  .card-action.is-connect .a-icon{
    background:var(--brand-gradient); box-shadow:0 0 26px -3px var(--accent-violet-glow);
  }
  .card-action.is-connect .a-label{
    background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
  }

  /* ---------- ACTION STYLE: COMMAND TILES (v2, 2026-10-21) ----------
     Opt-in per card via actions.layoutStyle = 'command-tiles'. Two-column
     tiles (icon chip · label), every action — Exchange included — in its
     configured position. Exchange is marked by a gradient edge and its
     own gradient symbol disc, not a fill, so Add to Contacts below stays
     the single primary control. With an odd count the last tile keeps its
     size and is centred (.is-solo) — nothing is promoted. No per-tile
     direction cues; Learn More keeps its ↗ (it leaves the card).
     Light themes get crisp white surfaces from themeCss (ct-light). */
  .card-actions[data-action-layout="command-tiles"]{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; margin-top:12px; }
  .card-actions[data-action-layout="command-tiles"] .card-action{
    flex-direction:row; align-items:center; justify-content:flex-start; gap:10px;
    min-height:48px; padding:6px 12px 6px 7px; border-radius:16px; text-align:left;
    background:var(--surface-glass); box-shadow:inset 0 0 0 1px var(--border-glass-subtle);
    transition:background .2s ease, box-shadow .2s ease, transform .15s ease;
  }
  .card-actions[data-action-layout="command-tiles"] .card-action.is-solo{ grid-column:1 / -1; justify-self:center; width:calc(50% - 4px); }
  .card-actions[data-action-layout="command-tiles"] .card-action:focus-visible{ outline-offset:2px; }
  .card-actions[data-action-layout="command-tiles"] .card-action:active{ transform:scale(0.98); box-shadow:inset 0 0 0 1px var(--accent-violet-500); }
  .card-actions[data-action-layout="command-tiles"] .card-action .a-icon{
    flex:none; width:36px; height:36px; border-radius:11px; border:0;
    background:var(--surface-glass-hover); box-shadow:inset 0 0 0 1px var(--border-glass-subtle);
    transition:transform .2s ease;
  }
  .card-actions[data-action-layout="command-tiles"] .card-action .a-icon svg{ width:20px; height:20px; }
  .card-actions[data-action-layout="command-tiles"] .card-action .a-label{
    flex:1 1 auto; min-width:0; font-size:14px; font-weight:650; line-height:1.2; color:var(--text-primary);
    overflow-wrap:break-word; word-break:normal; -webkit-hyphens:manual; hyphens:manual;
  }
  .card-actions[data-action-layout="command-tiles"] .card-action:hover,
  .card-actions[data-action-layout="command-tiles"] .card-action:focus-visible{
    background:var(--surface-glass-hover);
    box-shadow:inset 0 0 0 1px var(--accent-violet-500), 0 8px 22px -12px var(--accent-violet-glow);
  }
  .card-actions[data-action-layout="command-tiles"] .card-action:hover .a-icon,
  .card-actions[data-action-layout="command-tiles"] .card-action:focus-visible .a-icon{ transform:translateX(2px); border:0; }

  /* Exchange: an accented tile in the flow — gradient edge, a faint accent
     wash, the symbol on its own gradient disc (Circle) or as a gradient
     symbol (Bare). Same size and type as its neighbours. */
  .card-actions[data-action-layout="command-tiles"] .card-action.is-connect{
    min-height:48px; padding:4.5px 10.5px 4.5px 5.5px; color:var(--text-primary); border:1.5px solid transparent;
    background:linear-gradient(color-mix(in oklab, var(--accent-violet-500) 12%, var(--brand-ink-950)), color-mix(in oklab, var(--accent-violet-500) 12%, var(--brand-ink-950))) padding-box, var(--brand-gradient) border-box;
    box-shadow:0 8px 22px -14px var(--accent-violet-glow);
  }
  .card-actions[data-action-layout="command-tiles"] .card-action.is-connect:hover,
  .card-actions[data-action-layout="command-tiles"] .card-action.is-connect:focus-visible,
  .card-actions[data-action-layout="command-tiles"] .card-action.is-connect:active{ box-shadow:0 0 0 1px color-mix(in oklab, var(--accent-violet-500) 45%, transparent), 0 10px 26px -12px var(--accent-violet-glow); }
  .card-actions[data-action-layout="command-tiles"] .card-action.is-connect .a-label{
    background:none; -webkit-background-clip:border-box; background-clip:border-box; color:var(--text-primary);
    font-size:14px; font-weight:750; letter-spacing:0;
  }
  .card-actions[data-action-layout="command-tiles"] .card-action.is-exchange[data-treatment="circle"] .a-icon{ border-radius:50%; background:var(--brand-gradient); box-shadow:0 2px 8px -3px var(--accent-violet-glow); }

  @media (max-width:380px){
    .card-actions[data-action-layout="command-tiles"]{ gap:8px 6px; }
    .card-actions[data-action-layout="command-tiles"] .card-action{ gap:8px; padding:8px 8px 8px 7px; }
    .card-actions[data-action-layout="command-tiles"] .card-action.is-connect{ padding:6.5px 6.5px 6.5px 5.5px; }
    .card-actions[data-action-layout="command-tiles"] .card-action.is-solo{ width:calc(50% - 3px); }
    .card-actions[data-action-layout="command-tiles"] .card-action .a-icon{ width:32px; height:32px; border-radius:10px; }
    .card-actions[data-action-layout="command-tiles"] .card-action .a-icon svg{ width:18px; height:18px; }
    .card-actions[data-action-layout="command-tiles"] .card-action .a-label{ font-size:13.5px; }
  }
  @media (prefers-reduced-motion: reduce){
    .card-actions[data-action-layout="command-tiles"] .card-action,
    .card-actions[data-action-layout="command-tiles"] .card-action .a-icon{ transition:none; transform:none !important; }
  }

  /* Command Tiles: a slightly tighter photo → name step (18 → 14px) so the
     save group reaches the first screen; the profile itself is unchanged. */
  :is(.card-hero, .td-photo)[data-side-style="command-tiles"] .card-hero-content > h1{ margin-top:14px; }

  /* ---------- COMMAND TILES: COORDINATED HERO CONTROLS ----------
     Reviews/Form use the tiles' material (rounded-square chip, quiet
     surface, 1px edge — the same in both themes). The save group is set
     apart from the grid by space and hierarchy: Add to Contacts (global
     Button Style) is the one filled primary; Wallet/Share a quiet tile;
     Learn More a tertiary link with its ↗. Title Case throughout; Add to
     Contacts never wraps. Ids, destinations and behaviour unchanged. */
  :is(.card-hero, .td-photo)[data-side-style="command-tiles"] .card-side-btn .sb-icon{ border-radius:19px; border:0; background:color-mix(in oklab, var(--text-primary) 7%, var(--brand-ink-950)); box-shadow:inset 0 0 0 1px var(--border-glass-subtle); }
  :is(.card-hero, .td-photo)[data-side-style="command-tiles"] .card-side-btn:is(:hover, :focus-visible, :active) .sb-icon{ box-shadow:inset 0 0 0 1px var(--accent-violet-500), 0 8px 22px -12px var(--accent-violet-glow); transform:none; }
  .card-hero[data-bottom-style="command-tiles"] .card-secondary{
    display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:8px;
    margin:16px 0 0; border-radius:0; overflow:visible; box-shadow:none; transform:none;
  }
  .card-hero[data-bottom-style="command-tiles"] .card-secondary:hover{ box-shadow:none; transform:none; }
  .card-hero[data-bottom-style="command-tiles"] .card-secondary-btn{
    justify-content:flex-start; gap:10px; min-height:50px; padding:7px 12px 7px 7px; border-radius:16px; text-align:left;
    font-size:14px; font-weight:700; letter-spacing:0; line-height:1.2; white-space:nowrap; text-transform:none;
    transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
  }
  .card-hero[data-bottom-style="command-tiles"] .card-secondary-btn:active{ transform:scale(0.98); }
  .card-hero[data-bottom-style="command-tiles"] .card-secondary-btn svg{
    flex:none; width:36px; height:36px; padding:8px; border-radius:11px; box-sizing:border-box; background:rgba(255,255,255,0.22);
  }
  .card-hero[data-bottom-style="command-tiles"] .card-secondary-btn:not(.is-share) svg{ stroke:currentColor !important; }
  .card-hero[data-bottom-style="command-tiles"] .card-secondary-btn.is-share{
    border-left:0; background:var(--surface-glass); box-shadow:inset 0 0 0 1px var(--border-glass-subtle); color:var(--text-primary);
  }
  .card-hero[data-bottom-style="command-tiles"] .card-secondary-btn.is-share svg{ background:var(--surface-glass-hover); box-shadow:inset 0 0 0 1px var(--border-glass-subtle); }
  .card-hero[data-bottom-style="command-tiles"] .card-secondary-btn.is-share:hover,
  .card-hero[data-bottom-style="command-tiles"] .card-secondary-btn.is-share:focus-visible,
  .card-hero[data-bottom-style="command-tiles"] .card-secondary-btn.is-share:active{
    background:var(--surface-glass-hover); box-shadow:inset 0 0 0 1px var(--accent-violet-500), 0 8px 22px -12px var(--accent-violet-glow);
  }
  .card-hero[data-bottom-style="command-tiles"] .card-learn-more{
    position:relative; display:flex; align-items:center; justify-content:center; width:fit-content; min-height:44px;
    margin:6px auto 0; padding:10px 34px 10px 14px; border:0; border-radius:12px; text-align:center;
    font-size:14px; font-weight:650; color:var(--text-secondary); background:none; box-shadow:none;
    transition:color .2s ease, transform .15s ease;
  }
  .card-hero[data-bottom-style="command-tiles"] .card-learn-more:is(:hover, :focus-visible, :active){ color:var(--text-primary); background:none; box-shadow:none; transform:none; }
  /* The external-link cue (↗), drawn in currentColor. */
  .card-hero[data-bottom-style="command-tiles"] .card-learn-more::after{
    content:''; position:absolute; right:12px; top:50%; width:15px; height:15px; margin-top:-7.5px; opacity:0.8;
    background:currentColor; transition:transform .2s ease;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 16 16 8M9.5 8H16v6.5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 16 16 8M9.5 8H16v6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .card-hero[data-bottom-style="command-tiles"] .card-learn-more:is(:hover, :focus-visible, :active)::after{ transform:translate(2px,-2px); }
  @media (max-width:380px){
    .card-hero[data-bottom-style="command-tiles"] .card-secondary{ gap:6px; }
    .card-hero[data-bottom-style="command-tiles"] .card-secondary-btn{ gap:8px; padding:8px 10px 8px 7px; font-size:13.5px; }
    .card-hero[data-bottom-style="command-tiles"] .card-secondary-btn svg{ width:32px; height:32px; padding:7px; border-radius:10px; }
  }
  @media (max-width:340px){ .card-hero[data-bottom-style="command-tiles"] .card-secondary-btn svg{ display:none; } .card-hero[data-bottom-style="command-tiles"] .card-secondary-btn{ padding-left:12px; } }
  @media (prefers-reduced-motion: reduce){
    .card-hero[data-bottom-style="command-tiles"] .card-secondary-btn,
    .card-hero[data-bottom-style="command-tiles"] .card-learn-more,
    .card-hero[data-bottom-style="command-tiles"] .card-learn-more::after{ transition:none; }
    .card-hero[data-bottom-style="command-tiles"] .card-secondary-btn:active,
    .card-hero[data-bottom-style="command-tiles"] .card-learn-more:is(:hover, :focus-visible, :active)::after{ transform:none; }
  }

  /* ---------- ACTION STYLE: HALO (exploratory) ----------
     Actions ride an elliptical orbit, clockwise from 12 o'clock in
     configured order (renderer.js emits only each action's angle, --a).
     Geometry, all in CSS:
       - icon centres span x: [label/2 .. width - label/2]  (rx)
                        and y: [icon/2 .. H - icon/2 - below] (ry)
         where `below` is the room reserved under the lowest icon for its
         label, so nothing ever leaves the box;
       - the orbit path is that same ellipse, so every icon sits ON it;
       - the core is a purely visual hub at the ellipse centre.
     Height grows with action count (vertical room is cheap on a phone);
     label width and text size never shrink. */
  @property --halo-spin{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
  .card-actions[data-action-layout="halo"]{
    --halo-icon:58px; --halo-label:86px; --halo-below:56px; --halo-h:330px;
    display:block; position:relative; height:var(--halo-h); margin:20px auto 4px; max-width:410px;
  }
  .card-actions[data-action-layout="halo"][data-action-count="4"]{ --halo-h:350px; }
  .card-actions[data-action-layout="halo"][data-action-count="5"]{ --halo-h:360px; }
  .card-actions[data-action-layout="halo"][data-action-count="6"]{ --halo-h:370px; }
  .card-actions[data-action-layout="halo"][data-action-count="7"]{ --halo-h:384px; }
  .card-actions[data-action-layout="halo"][data-action-count="8"]{ --halo-h:396px; }

  .card-actions[data-action-layout="halo"] .halo-stage{ position:absolute; inset:0; pointer-events:none; }
  .card-actions[data-action-layout="halo"] .halo-orbit{
    position:absolute; border-radius:50%;
    left:calc(var(--halo-label) / 2); right:calc(var(--halo-label) / 2);
    top:calc(var(--halo-icon) / 2); bottom:calc(var(--halo-icon) / 2 + var(--halo-below));
    border:1px solid var(--border-glass-strong);
  }
  /* A slow comet of accent light travelling the outer orbit. */
  .card-actions[data-action-layout="halo"] .halo-orbit::after{
    content:''; position:absolute; inset:-1px; border-radius:50%; border:1.5px solid transparent;
    background:conic-gradient(from var(--halo-spin), transparent 0 72%, var(--accent-violet-500) 88%, var(--accent-cyan-400) 96%, transparent 100%) border-box;
    -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    animation:haloSpin 14s linear infinite;
  }
  @keyframes haloSpin{ to{ --halo-spin:360deg; } }
  .card-actions[data-action-layout="halo"] .halo-orbit.is-inner{ left:30%; right:30%; top:26%; bottom:calc(26% + var(--halo-below) / 2); border-style:dashed; border-color:var(--border-glass-subtle); }
  .card-actions[data-action-layout="halo"] .halo-orbit.is-inner::after{ display:none; }
  .card-actions[data-action-layout="halo"] .halo-core{
    position:absolute; left:50%; top:calc((var(--halo-h) - var(--halo-below)) / 2);
    width:86px; height:86px; margin:-43px 0 0 -43px; border-radius:50%;
    background:radial-gradient(circle at 34% 28%, rgba(255,255,255,0.55), rgba(255,255,255,0) 42%), var(--brand-gradient);
    box-shadow:0 0 46px 4px var(--accent-violet-glow), 0 0 90px 12px var(--accent-glow-lead);
    opacity:0.92; transition:transform .35s ease, box-shadow .35s ease;
  }
  .card-actions[data-action-layout="halo"] .halo-core::before{ content:''; position:absolute; inset:-15px; border-radius:50%; border:1px solid var(--border-glass-strong); }
  .card-actions[data-action-layout="halo"] .halo-core::after{ content:''; position:absolute; inset:11px; border-radius:50%; border:1px solid rgba(255,255,255,0.45); }
  /* Optional detail only: the hub answers when any action is hovered/focused. */
  .card-actions[data-action-layout="halo"]:has(.card-action:hover, .card-action:focus-visible) .halo-core{
    transform:scale(1.07); box-shadow:0 0 60px 8px var(--accent-violet-glow), 0 0 110px 18px var(--accent-glow-lead);
  }

  .card-actions[data-action-layout="halo"] .card-action{
    position:absolute; z-index:1; width:var(--halo-label); padding:0; gap:8px;
    left:calc(50% + (50% - var(--halo-label) / 2) * sin(var(--a)));
    top:calc(var(--halo-icon) / 2 + (var(--halo-h) - var(--halo-icon) - var(--halo-below)) / 2 * (1 - cos(var(--a))));
    transform:translate(-50%, calc(var(--halo-icon) / -2));
  }
  .card-actions[data-action-layout="halo"] .card-action:active{ transform:translate(-50%, calc(var(--halo-icon) / -2)) scale(0.95); }
  .card-actions[data-action-layout="halo"] .card-action:focus-visible{ outline-offset:4px; border-radius:16px; }
  /* Opaque disc so the orbit line passes BEHIND each icon, never through it. */
  .card-actions[data-action-layout="halo"] .card-action .a-icon{
    width:var(--halo-icon); height:var(--halo-icon);
    background:linear-gradient(var(--surface-glass-hover), var(--surface-glass-hover)), var(--brand-ink-950);
  }
  .card-actions[data-action-layout="halo"] .card-action .a-icon svg{ width:24px; height:24px; }
  .card-actions[data-action-layout="halo"] .card-action .a-label{
    max-width:100%; text-align:center; font-size:13px; line-height:1.2;
    overflow-wrap:break-word; word-break:normal; -webkit-hyphens:manual; hyphens:manual;
    padding:1px 5px; border-radius:7px; background:var(--brand-ink-950);
  }
  /* Connect: same position on the ring, a larger primary disc that follows
     the global Button Style (themeCss); icon follows the disc's text colour. */
  .card-actions[data-action-layout="halo"] .card-action.is-connect .a-icon{
    width:66px; height:66px; margin:-4px 0; color:#0A0A16;
    background:var(--brand-gradient); box-shadow:0 0 30px -2px var(--accent-violet-glow);
  }
  /* Original's gradient-clipped Connect label would clip to the label's
     backdrop and vanish — Halo marks Connect with its disc instead. */
  .card-actions[data-action-layout="halo"] .card-action.is-connect .a-label{
    -webkit-background-clip:border-box; background-clip:border-box; background:var(--brand-ink-950);
    color:var(--text-primary); font-weight:800;
  }
  .card-actions[data-action-layout="halo"] .card-action.is-connect .a-icon svg,
  .card-actions[data-action-layout="halo"] .card-action.is-connect:hover .a-icon svg,
  .card-actions[data-action-layout="halo"] .card-action.is-connect:focus-visible .a-icon svg{ stroke:currentColor !important; filter:none; width:27px; height:27px; }
  /* HALO TRAIL — the purposeful alternative when a ring would be cramped
     (renderer.js haloForm): the orbit unrolls into a vertical line with the
     core at its head; actions alternate left/right down it in configured
     order (DOM/focus order = top-to-bottom), each joined to the line by a
     tick. Labels get half the card width; rows grow with their content, so
     long labels can never collide. Children: 1 = .halo-stage, so action k
     is :nth-child(k+1) — even children sit left, odd right. */
  @keyframes haloTrail{ 0%{ background-position:0 -40%; } 100%{ background-position:0 140%; } }
  .card-actions[data-action-layout="halo"]:is([data-halo-form="spine"], [data-fit]){ display:grid; grid-template-columns:1fr 1fr; column-gap:30px; grid-auto-rows:minmax(50px, auto); height:auto; padding:96px 0 6px; }
  .card-actions[data-action-layout="halo"]:is([data-halo-form="spine"], [data-fit]) .halo-orbit{ left:50%; right:auto; width:0; top:92px; bottom:30px; border-radius:0; border-width:0 0 0 1px; }
  .card-actions[data-action-layout="halo"]:is([data-halo-form="spine"], [data-fit]) .halo-orbit::after{ inset:0 auto 0 -1px; width:2px; border:0; border-radius:1px; -webkit-mask:none; mask:none;
    background:linear-gradient(to bottom, transparent, var(--accent-violet-500), var(--accent-cyan-400), transparent) 0 0 / 100% 34% no-repeat;
    animation:haloTrail 6s ease-in-out infinite; }
  .card-actions[data-action-layout="halo"]:is([data-halo-form="spine"], [data-fit]) .halo-orbit.is-inner{ display:none; }
  .card-actions[data-action-layout="halo"]:is([data-halo-form="spine"], [data-fit]) .halo-core{ top:40px; width:66px; height:66px; margin:-33px 0 0 -33px; }
  .card-actions[data-action-layout="halo"]:is([data-halo-form="spine"], [data-fit]) .card-action{ position:relative; left:auto; top:auto; transform:none; width:min(100%, 136px); grid-row:span 2; }
  .card-actions[data-action-layout="halo"]:is([data-halo-form="spine"], [data-fit]) .card-action:active{ transform:scale(0.96); }
  .card-actions[data-action-layout="halo"]:is([data-halo-form="spine"], [data-fit]) .card-action:nth-child(even){ grid-column:1; justify-self:end; }
  .card-actions[data-action-layout="halo"]:is([data-halo-form="spine"], [data-fit]) .card-action:nth-child(odd){ grid-column:2; justify-self:start; }
  .card-actions[data-action-layout="halo"]:is([data-halo-form="spine"], [data-fit]) .card-action::after{ content:''; position:absolute; top:calc(var(--halo-icon) / 2); height:1px; width:calc(50% - var(--halo-icon) / 2 + 15px); background:var(--border-glass-strong); z-index:-1; }
  .card-actions[data-action-layout="halo"]:is([data-halo-form="spine"], [data-fit]) .card-action:nth-child(even)::after{ left:calc(50% + var(--halo-icon) / 2); }
  .card-actions[data-action-layout="halo"]:is([data-halo-form="spine"], [data-fit]) .card-action:nth-child(odd)::after{ right:calc(50% + var(--halo-icon) / 2); }
  .card-actions[data-action-layout="halo"]:is([data-halo-form="spine"], [data-fit]) .card-action.is-connect::after{ top:33px; }
  .card-actions[data-action-layout="halo"]:is([data-halo-form="spine"], [data-fit]) .card-action:nth-child(2){ grid-row:1 / span 2; }
  .card-actions[data-action-layout="halo"]:is([data-halo-form="spine"], [data-fit]) .card-action:nth-child(3){ grid-row:2 / span 2; }
  .card-actions[data-action-layout="halo"]:is([data-halo-form="spine"], [data-fit]) .card-action:nth-child(4){ grid-row:3 / span 2; }
  .card-actions[data-action-layout="halo"]:is([data-halo-form="spine"], [data-fit]) .card-action:nth-child(5){ grid-row:4 / span 2; }
  .card-actions[data-action-layout="halo"]:is([data-halo-form="spine"], [data-fit]) .card-action:nth-child(6){ grid-row:5 / span 2; }
  .card-actions[data-action-layout="halo"]:is([data-halo-form="spine"], [data-fit]) .card-action:nth-child(7){ grid-row:6 / span 2; }
  .card-actions[data-action-layout="halo"]:is([data-halo-form="spine"], [data-fit]) .card-action:nth-child(8){ grid-row:7 / span 2; }
  .card-actions[data-action-layout="halo"]:is([data-halo-form="spine"], [data-fit]) .card-action:nth-child(9){ grid-row:8 / span 2; }
  @media (max-width:340px){
    .card-actions[data-action-layout="halo"][data-halo-form="ring-wide"]{ display:grid; grid-template-columns:1fr 1fr; column-gap:30px; grid-auto-rows:minmax(50px, auto); height:auto; padding:96px 0 6px; }
    .card-actions[data-action-layout="halo"][data-halo-form="ring-wide"] .halo-orbit{ left:50%; right:auto; width:0; top:92px; bottom:30px; border-radius:0; border-width:0 0 0 1px; }
    .card-actions[data-action-layout="halo"][data-halo-form="ring-wide"] .halo-orbit::after{ inset:0 auto 0 -1px; width:2px; border:0; border-radius:1px; -webkit-mask:none; mask:none;
      background:linear-gradient(to bottom, transparent, var(--accent-violet-500), var(--accent-cyan-400), transparent) 0 0 / 100% 34% no-repeat;
      animation:haloTrail 6s ease-in-out infinite; }
    .card-actions[data-action-layout="halo"][data-halo-form="ring-wide"] .halo-orbit.is-inner{ display:none; }
    .card-actions[data-action-layout="halo"][data-halo-form="ring-wide"] .halo-core{ top:40px; width:66px; height:66px; margin:-33px 0 0 -33px; }
    .card-actions[data-action-layout="halo"][data-halo-form="ring-wide"] .card-action{ position:relative; left:auto; top:auto; transform:none; width:min(100%, 136px); grid-row:span 2; }
    .card-actions[data-action-layout="halo"][data-halo-form="ring-wide"] .card-action:active{ transform:scale(0.96); }
    .card-actions[data-action-layout="halo"][data-halo-form="ring-wide"] .card-action:nth-child(even){ grid-column:1; justify-self:end; }
    .card-actions[data-action-layout="halo"][data-halo-form="ring-wide"] .card-action:nth-child(odd){ grid-column:2; justify-self:start; }
    .card-actions[data-action-layout="halo"][data-halo-form="ring-wide"] .card-action::after{ content:''; position:absolute; top:calc(var(--halo-icon) / 2); height:1px; width:calc(50% - var(--halo-icon) / 2 + 15px); background:var(--border-glass-strong); z-index:-1; }
    .card-actions[data-action-layout="halo"][data-halo-form="ring-wide"] .card-action:nth-child(even)::after{ left:calc(50% + var(--halo-icon) / 2); }
    .card-actions[data-action-layout="halo"][data-halo-form="ring-wide"] .card-action:nth-child(odd)::after{ right:calc(50% + var(--halo-icon) / 2); }
    .card-actions[data-action-layout="halo"][data-halo-form="ring-wide"] .card-action.is-connect::after{ top:33px; }
    .card-actions[data-action-layout="halo"][data-halo-form="ring-wide"] .card-action:nth-child(2){ grid-row:1 / span 2; }
    .card-actions[data-action-layout="halo"][data-halo-form="ring-wide"] .card-action:nth-child(3){ grid-row:2 / span 2; }
    .card-actions[data-action-layout="halo"][data-halo-form="ring-wide"] .card-action:nth-child(4){ grid-row:3 / span 2; }
    .card-actions[data-action-layout="halo"][data-halo-form="ring-wide"] .card-action:nth-child(5){ grid-row:4 / span 2; }
    .card-actions[data-action-layout="halo"][data-halo-form="ring-wide"] .card-action:nth-child(6){ grid-row:5 / span 2; }
    .card-actions[data-action-layout="halo"][data-halo-form="ring-wide"] .card-action:nth-child(7){ grid-row:6 / span 2; }
    .card-actions[data-action-layout="halo"][data-halo-form="ring-wide"] .card-action:nth-child(8){ grid-row:7 / span 2; }
    .card-actions[data-action-layout="halo"][data-halo-form="ring-wide"] .card-action:nth-child(9){ grid-row:8 / span 2; }
  }
  @media (prefers-reduced-motion: reduce){
    .card-actions[data-action-layout="halo"] .halo-orbit::after,
    .card-actions[data-action-layout="halo"][data-halo-form] .halo-orbit::after{ animation:none; }
    .card-actions[data-action-layout="halo"] .halo-core,
    .card-actions[data-action-layout="halo"] .card-action .a-icon{ transition:none; }
    .card-actions[data-action-layout="halo"]:has(.card-action:hover, .card-action:focus-visible) .halo-core{ transform:none; }
  }

  /* ---------- HALO REFINED: compact orbit + Exchange hub ----------
     The orbit is solved per ring size (collision-free for 86px labels under
     58px icons from a 320px action area up): even rings start half a step
     past 12 so actions sit in mirrored pairs, and the highlighted action
     (Exchange) becomes the HUB at the centre when three or more others
     remain to ring it — the core finally means something, and eight actions
     need 328px instead of 396 (or the 616px trail at 360px wide).
     --halo-ry = orbit radius (vertical), --halo-ey = orbit top in the box.
     Narrower than 341px, or wherever labels still collide, the existing
     Halo Trail takes over (data-fit / spine) exactly as before. */
  @media (min-width:341px){
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-ring="3"]{ --halo-h:221px; --halo-ry:92px; --halo-ey:29px; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-ring="4"]{ --halo-h:171px; --halo-ry:62px; --halo-ey:11px; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-ring="5"]{ --halo-h:249px; --halo-ry:92px; --halo-ey:29px; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-ring="6"]{ --halo-h:267px; --halo-ry:92px; --halo-ey:29px; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-ring="7"]{ --halo-h:328px; --halo-ry:129px; --halo-ey:29px; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-ring="8"]{ --halo-h:331px; --halo-ry:124px; --halo-ey:29px; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-hub][data-halo-ring="3"]{ --halo-h:242px; --halo-ry:106px; --halo-ey:29px; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-hub][data-halo-ring="4"]{ --halo-h:295px; --halo-ry:150px; --halo-ey:-15px; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-hub][data-halo-ring="5"]{ --halo-h:275px; --halo-ry:106px; --halo-ey:29px; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-hub][data-halo-ring="6"]{ --halo-h:294px; --halo-ry:122px; --halo-ey:13px; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-hub][data-halo-ring="7"]{ --halo-h:328px; --halo-ry:129px; --halo-ey:29px; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-hub][data-halo-ring="8"]{ --halo-h:331px; --halo-ry:124px; --halo-ey:29px; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"]){ height:var(--halo-h); margin:14px auto 6px; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"]) .halo-orbit:not(.is-inner){ top:var(--halo-ey); bottom:auto; height:calc(var(--halo-ry) * 2); }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"]) .card-action{ gap:6px; top:calc(var(--halo-ey) + var(--halo-ry) * (1 - cos(var(--a)))); }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"]) .card-action .a-label{ line-height:1.15; padding:1px 6px 2px; }
    /* Decorative core (no hub): smaller, centred on the orbit. */
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"]) .halo-core{ top:calc(var(--halo-ey) + var(--halo-ry)); width:64px; height:64px; margin:-32px 0 0 -32px; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"]) .halo-core::before{ inset:-12px; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"]) .halo-orbit.is-inner{ left:50%; right:auto; width:112px; height:112px; margin:-56px 0 0 -56px; top:calc(var(--halo-ey) + var(--halo-ry)); bottom:auto; }
    /* Hub: the Exchange action at the centre of the orbit. */
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-hub] .card-action.is-hub{ left:50%; top:calc(var(--halo-ey) + var(--halo-ry) + var(--halo-hubdy, 0px) - 47.5px); width:80px; transform:translateX(-50%); z-index:2; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-hub] .card-action.is-hub:active{ transform:translateX(-50%) scale(0.95); }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-hub] .card-action.is-hub .a-icon{ width:70px; height:70px; margin:0; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-hub] .card-action.is-hub .a-icon svg{ width:28px; height:28px; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-hub] .halo-core{ top:calc(var(--halo-ey) + var(--halo-ry) + var(--halo-hubdy, 0px) - 12.5px); width:70px; height:70px; margin:-35px 0 0 -35px; background:none; opacity:1;
      box-shadow:0 0 42px 6px var(--accent-violet-glow), 0 0 84px 14px var(--accent-glow-lead); }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-hub] .halo-core::before{ inset:-13px; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-hub] .halo-core::after{ display:none; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-hub] .halo-orbit.is-inner{ top:calc(var(--halo-ey) + var(--halo-ry) + var(--halo-hubdy, 0px) - 12.5px); width:128px; height:128px; margin:-64px 0 0 -64px; }
  }
  @media (min-width:390px){
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-hub][data-halo-ring="4"]{ --halo-h:171px; --halo-ry:62px; --halo-ey:11px; }
  }
  /* Under 360px the 86px label boxes would touch by ~2px (labels themselves
     stay ≥20px apart): 84px boxes keep every tap area separate. */
  @media (max-width:359px){
    .card-actions[data-action-layout="halo"]{ --halo-label:84px; }
  }

  /* ---------- HALO: COORDINATED HERO CONTROLS ----------
     Halo's language — rings, orbits, glow, the travelling comet:
     Reviews/Form (subtle, same place): a fine orbit ring around their disc.
     Bottom group: pill capsules with icons in round discs; Add to Contacts
     keeps the global Button Style; Learn More is an outlined pill whose
     outline carries a slow comet (the orbit's signature, visible on
     phones). Press: a gentle squeeze + ring glow. Reduced motion: still. */
  :is(.card-hero, .td-photo)[data-side-style="halo"] .card-side-btn .sb-icon{ outline:1px solid var(--border-glass-strong); outline-offset:5px; transition:outline-color .25s ease, outline-offset .25s ease, box-shadow .3s ease; }
  :is(.card-hero, .td-photo)[data-side-style="halo"] .card-side-btn:hover .sb-icon,
  :is(.card-hero, .td-photo)[data-side-style="halo"] .card-side-btn:focus-visible .sb-icon,
  :is(.card-hero, .td-photo)[data-side-style="halo"] .card-side-btn:active .sb-icon{ outline-color:var(--accent-violet-500); outline-offset:3px; }

  .card-hero[data-bottom-style="halo"] .card-secondary{
    display:flex; gap:10px; margin:18px 0 0; border-radius:0; overflow:visible; box-shadow:none;
  }
  .card-hero[data-bottom-style="halo"] .card-secondary:hover{ box-shadow:none; transform:none; }
  .card-hero[data-bottom-style="halo"] .card-secondary-btn{
    gap:10px; min-height:54px; padding:6px 18px 6px 6px; border-radius:999px; justify-content:flex-start; text-align:left; line-height:1.2;
    transition:transform .18s ease, box-shadow .25s ease;
  }
  .card-hero[data-bottom-style="halo"] .card-secondary-btn:active{ transform:scale(0.97); }
  .card-hero[data-bottom-style="halo"] .card-secondary-btn svg{
    width:42px; height:42px; padding:10px; box-sizing:border-box; border-radius:50%; background:rgba(255,255,255,0.24);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.35);
  }
  .card-hero[data-bottom-style="halo"] .card-secondary-btn:not(.is-share) svg{ stroke:currentColor !important; }
  .card-hero[data-bottom-style="halo"] .card-secondary-btn.is-share{
    flex:1; border-left:0; background:var(--surface-glass); box-shadow:inset 0 0 0 1px var(--border-glass-strong);
  }
  .card-hero[data-bottom-style="halo"] .card-secondary-btn.is-share svg{
    background:linear-gradient(var(--surface-glass-hover), var(--surface-glass-hover)), var(--brand-ink-950);
    box-shadow:inset 0 0 0 1px var(--border-glass-strong), 0 0 18px -6px var(--accent-violet-glow);
  }
  .card-hero[data-bottom-style="halo"] .card-secondary-btn.is-share:hover,
  .card-hero[data-bottom-style="halo"] .card-secondary-btn.is-share:focus-visible,
  .card-hero[data-bottom-style="halo"] .card-secondary-btn.is-share:active{ box-shadow:inset 0 0 0 1px var(--accent-violet-500), 0 0 26px -8px var(--accent-violet-glow); }
  .card-hero[data-bottom-style="halo"] .card-learn-more{
    position:relative; display:block; width:min(100%, 280px); margin:10px auto 0; padding:13px 24px; border:0; border-radius:999px;
    background:transparent; box-shadow:inset 0 0 0 1px var(--border-glass-strong); font-size:14px; font-weight:700;
    transition:transform .18s ease, box-shadow .25s ease;
  }
  .card-hero[data-bottom-style="halo"] .card-learn-more:hover{ transform:none; background:transparent; box-shadow:inset 0 0 0 1px var(--border-glass-strong), 0 0 28px -8px var(--accent-violet-glow); }
  .card-hero[data-bottom-style="halo"] .card-learn-more:active{ transform:scale(0.97); }
  /* The orbit's comet, travelling the pill outline. */
  .card-hero[data-bottom-style="halo"] .card-learn-more::before{
    content:''; position:absolute; inset:0; border-radius:inherit; border:1.5px solid transparent; pointer-events:none;
    background:conic-gradient(from var(--halo-spin), transparent 0 74%, var(--accent-violet-500) 88%, var(--accent-cyan-400) 96%, transparent 100%) border-box;
    -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
    animation:haloSpin 9s linear infinite;
  }
  @media (prefers-reduced-motion: reduce){
    .card-hero[data-bottom-style="halo"] .card-learn-more::before{ animation:none; }
    :is(.card-hero, .td-photo)[data-side-style="halo"] .card-side-btn .sb-icon,
    .card-hero[data-bottom-style="halo"] .card-secondary-btn,
    .card-hero[data-bottom-style="halo"] .card-learn-more{ transition:none; }
    .card-hero[data-bottom-style="halo"] .card-secondary-btn:active,
    .card-hero[data-bottom-style="halo"] .card-learn-more:active{ transform:none; }
  }

  /* ---------- HALO — ORBITAL INSTRUMENT FINISH ----------
     One visual language for the whole Halo hero (ring, hub, side and
     bottom controls): darkness and negative space for depth, machined
     stations with a precise edge, monochrome glyphs, one hairline orbit.
     Bright light is reserved for two things: the comet's head and the
     Exchange lens rim. Everything derives from the card's theme tokens, so
     light themes get the same construction in their own values. */
  .card-actions[data-action-layout="halo"],
  .card-hero:is([data-side-style="halo"], [data-bottom-style="halo"]), .td-photo[data-side-style="halo"]{
    --halo-ink:color-mix(in oklab, var(--text-primary) 90%, var(--brand-ink-950));
    --halo-line:color-mix(in oklab, var(--text-primary) 15%, transparent);
    --halo-edge:color-mix(in oklab, var(--text-primary) 13%, transparent);
    --halo-hi:color-mix(in oklab, var(--text-primary) 30%, transparent);
    --halo-disc:linear-gradient(180deg, color-mix(in oklab, var(--text-primary) 10%, var(--brand-ink-950)) 0%, color-mix(in oklab, var(--text-primary) 3%, var(--brand-ink-950)) 100%);
    --halo-depth:0 10px 18px -12px rgba(0,0,0,0.6);
    --halo-station:inset 0 1px 0 var(--halo-hi), inset 0 0 0 1px var(--halo-edge), var(--halo-depth);
  }
  /* Instrument layer: hidden unless the ring form is showing. */
  .card-actions[data-action-layout="halo"] .halo-orbit-svg,
  .card-actions[data-action-layout="halo"] .halo-dial{ display:none; }

  /* Stations (every Halo action except the hub; ring and trail forms). */
  .card-actions[data-action-layout="halo"] .card-action:not(.is-hub) .a-icon{
    background:var(--halo-disc); box-shadow:var(--halo-station); color:var(--halo-ink); border:0;
    transition:box-shadow .25s ease, color .25s ease;
  }
  .card-actions[data-action-layout="halo"] .card-action:not(.is-hub) .a-icon svg{ width:22px; height:22px; stroke:currentColor; stroke-width:1.7; }
  .card-actions[data-action-layout="halo"] .card-action:not(.is-hub):is(:hover, :focus-visible) .a-icon{
    transform:none; color:var(--text-primary);
    box-shadow:inset 0 1px 0 var(--halo-hi), inset 0 0 0 1px color-mix(in oklab, var(--accent-violet-500) 70%, transparent), var(--halo-depth), 0 0 22px -6px var(--accent-violet-glow);
  }
  .card-actions[data-action-layout="halo"] .card-action:not(.is-hub):is(:hover, :focus-visible) .a-icon svg{ stroke:url(#hoGlyph); }
  .card-actions[data-action-layout="halo"] .card-action .a-label{
    color:var(--halo-ink); font-weight:600; letter-spacing:0.01em;
    /* Knockout that hugs the letters: the orbit pauses only right behind
       the glyphs — no box, so it works over any theme's colour wash. */
    background:none; border-radius:0; padding:1px 4px 2px;
    text-shadow:0 0 2px var(--brand-ink-950), 0 0 4px var(--brand-ink-950), 0 0 7px var(--brand-ink-950), 0 0 10px var(--brand-ink-950);
  }

  @media (min-width:341px){
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"]) :is(.halo-orbit, .halo-core){ display:none; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"]) .halo-orbit-svg{
      display:block; position:absolute; overflow:visible;
      left:calc(var(--halo-label) / 2); width:calc(100% - var(--halo-label)); top:var(--halo-ey); height:calc(var(--halo-ry) * 2);
    }
    .halo-orbit-svg path{ fill:none; vector-effect:non-scaling-stroke; }
    .halo-orbit-svg .ho-path{ stroke:var(--halo-line); stroke-width:1; }
    /* Tapered comet: four segments ending at one head — thinner and
       fainter the longer they are. Parked (static frame / reduced motion)
       just past 12 o'clock; animated, it rotates in the circle space. */
    .halo-orbit-svg .ho-comet{ transform-box:view-box; transform-origin:50px 50px; animation:hoOrbit var(--halo-period) linear infinite; }
    /* Track — glass/metal rail: a soft channel (bed) carrying a defined
       rail whose light runs from the upper left (same key light as the
       discs) through a darker belly to a faint lower-right return. */
    .halo-orbit-svg .ho-bed{ stroke:color-mix(in oklab, var(--text-primary) 7%, transparent); stroke-width:4; }
    .halo-orbit-svg .ho-path{ stroke:url(#hoRail); stroke-width:1.4; }
    .halo-orbit-svg .hr-a{ stop-color:color-mix(in oklab, var(--text-primary) 58%, transparent); }
    .halo-orbit-svg .hr-b{ stop-color:color-mix(in oklab, var(--text-primary) 26%, transparent); }
    .halo-orbit-svg .hr-c{ stop-color:color-mix(in oklab, var(--text-primary) 16%, transparent); }
    .halo-orbit-svg .hr-d{ stop-color:color-mix(in oklab, var(--text-primary) 34%, transparent); }
    /* Light ribbon — filled, continuously tapering shapes (renderer.js
       ribbon()): a white core with a rounded head and bloom inside a
       translucent cyan/violet body and soft edge, two refraction slivers,
       and the track's own wake (behind) and lead (ahead). */
    .halo-orbit-svg .ho-comet path, .halo-orbit-svg .ho-comet ellipse{ stroke:none; vector-effect:none; }
    .halo-orbit-svg .ho-wake{ fill:color-mix(in oklab, var(--halo-glint) 55%, var(--text-primary)); opacity:0.42; }
    .halo-orbit-svg .ho-lead{ fill:color-mix(in oklab, var(--halo-glint) 70%, var(--text-primary)); opacity:0.5; }
    .halo-orbit-svg .ho-halo{ fill:color-mix(in oklab, var(--accent-cyan-400) 55%, var(--accent-violet-500)); opacity:0.17; }
    .halo-orbit-svg .ho-body{ fill:var(--accent-violet-500); opacity:0.42; }
    .halo-orbit-svg .ho-mid{ fill:var(--accent-cyan-400); opacity:0.62; }
    .halo-orbit-svg .ho-rf-in{ fill:var(--accent-rose-500); opacity:0.8; }
    .halo-orbit-svg .ho-rf-out{ fill:color-mix(in oklab, var(--accent-cyan-400) 45%, #fff); opacity:0.75; }
    .halo-orbit-svg .ho-core{ fill:var(--halo-glint-core); }
    .halo-orbit-svg .ho-bloom{ fill:url(#hoBloom); }
    .halo-orbit-svg .hb-a{ stop-color:var(--halo-glint-core); stop-opacity:0.95; }
    .halo-orbit-svg .hb-b{ stop-color:var(--halo-glint); stop-opacity:0.35; }
    .halo-orbit-svg .hb-c{ stop-color:var(--halo-glint); stop-opacity:0; }
    @keyframes hoOrbit{ to{ transform:rotate(360deg); } }

    /* Hub — the Exchange lens: a deep lens with a fine spectral rim inside
       a hairline bezel, mounted on a graduated dial. */
    .card-actions[data-action-layout="halo"][data-halo-ring][data-halo-hub]:not([data-fit]):not([data-halo-form="spine"]) .halo-dial{
      display:block; position:absolute; left:50%; top:calc(var(--halo-ey) + var(--halo-ry) + var(--halo-hubdy, 0px) - 12.5px);
      width:116px; height:116px; margin:-58px 0 0 -58px; overflow:visible;
    }
    .halo-dial .hd-ring{ fill:none; stroke:var(--halo-edge); stroke-width:0.9; vector-effect:non-scaling-stroke; }
    .halo-dial .hd-ticks{ fill:none; stroke:var(--halo-line); stroke-width:0.9; vector-effect:non-scaling-stroke; }
    .halo-dial .hd-catch{ transform-box:view-box; transform-origin:52px 52px; animation:hoOrbit var(--halo-period) linear infinite; }
    .halo-dial .hd-glint{ fill:var(--halo-glint); opacity:0.75; }
    .card-actions[data-action-layout="halo"] .card-action.is-hub .a-icon{
      position:relative; color:var(--text-primary);
      background:radial-gradient(circle at 50% 28%, color-mix(in oklab, var(--accent-violet-500) 24%, var(--brand-ink-950)) 0%, var(--brand-ink-950) 74%);
      border:0; outline:1px solid var(--halo-edge); outline-offset:6px;
      box-shadow:0 16px 30px -14px color-mix(in oklab, var(--accent-violet-500) 60%, transparent);
      transition:box-shadow .3s ease, outline-color .3s ease;
    }
    .card-actions[data-action-layout="halo"] .card-action.is-hub .a-icon::before{
      content:''; position:absolute; inset:0; border-radius:50%; padding:1.5px; pointer-events:none;
      background:conic-gradient(from 220deg, var(--accent-rose-500), var(--accent-violet-500), var(--accent-cyan-400), color-mix(in oklab, var(--accent-cyan-400) 30%, transparent) 62%, color-mix(in oklab, var(--accent-rose-500) 30%, transparent) 86%, var(--accent-rose-500));
      -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
    }
    .card-actions[data-action-layout="halo"] .card-action.is-hub:is(:hover, :focus-visible) .a-icon{
      transform:none; outline-color:color-mix(in oklab, var(--accent-violet-500) 55%, transparent); box-shadow:0 16px 34px -12px color-mix(in oklab, var(--accent-violet-500) 75%, transparent);
    }
    .card-actions[data-action-layout="halo"] .card-action.is-hub.is-exchange[data-treatment="circle"] .ex-current path{ stroke:var(--text-primary); }
    .card-actions[data-action-layout="halo"] .card-action.is-hub.is-exchange[data-treatment="circle"] .ex-pass rect{ fill:var(--text-primary); }
    .card-actions[data-action-layout="halo"] .card-action.is-hub[data-treatment="bare"] .a-icon::before{ display:none; }
    .card-actions[data-action-layout="halo"] .card-action.is-hub .a-label{ color:var(--text-primary); font-weight:700; letter-spacing:0.02em; background:none; }
  }

  /* Coordinated controls in the same finish. */
  :is(.card-hero, .td-photo)[data-side-style="halo"] .card-side-btn .sb-icon{
    outline:0; border:0; background:var(--halo-disc); box-shadow:var(--halo-station); transition:box-shadow .25s ease;
  }
  :is(.card-hero, .td-photo)[data-side-style="halo"] .card-side-btn:is(:hover, :focus-visible, :active) .sb-icon{
    outline:0; box-shadow:inset 0 1px 0 var(--halo-hi), inset 0 0 0 1px color-mix(in oklab, var(--accent-violet-500) 70%, transparent), var(--halo-depth);
  }
  :is(.card-hero, .td-photo)[data-side-style="halo"] .card-side-btn .sb-icon svg:not(.sb-google){ stroke:var(--halo-ink); stroke-width:1.7; }
  :is(.card-hero, .td-photo)[data-side-style="halo"] .card-side-btn .sb-label{ color:var(--halo-ink); font-weight:600; }
  .card-hero[data-bottom-style="halo"] .card-secondary-btn.is-share{ background:var(--halo-disc); box-shadow:inset 0 1px 0 var(--halo-hi), inset 0 0 0 1px var(--halo-edge), var(--halo-depth); }
  .card-hero[data-bottom-style="halo"] .card-secondary-btn.is-share svg{ background:color-mix(in oklab, var(--text-primary) 6%, var(--brand-ink-950)); box-shadow:inset 0 0 0 1px var(--halo-edge); stroke:var(--halo-ink) !important; }
  .card-hero[data-bottom-style="halo"] .card-secondary-btn.is-share:is(:hover, :focus-visible, :active){ box-shadow:inset 0 1px 0 var(--halo-hi), inset 0 0 0 1px color-mix(in oklab, var(--accent-violet-500) 70%, transparent), var(--halo-depth); }
  .card-hero[data-bottom-style="halo"] .card-learn-more::before{ display:none; }
  .card-hero[data-bottom-style="halo"] .card-learn-more{ box-shadow:inset 0 0 0 1px var(--halo-edge); color:var(--halo-ink); font-weight:600; letter-spacing:0.01em; }
  .card-hero[data-bottom-style="halo"] .card-learn-more:hover{ box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--accent-violet-500) 70%, transparent); }

  /* ---- Halo: luminous finish (enhancement) ----
     One light system: a cool key light from the upper left, the same
     spectrum as the comet and the Exchange lens rim.
       - glyphs keep the theme gradient at rest (visible on phones), with a
         tight, low-alpha bloom — crisp strokes, no neon blur;
       - every disc gets a light-catching rim: brightest upper-left, tinted
         with the comet's cyan, resolving through the theme violet;
       - a soft specular sheen on the disc face from the same direction. */
  .card-actions[data-action-layout="halo"],
  .card-hero:is([data-side-style="halo"], [data-bottom-style="halo"]), .td-photo[data-side-style="halo"]{
    --halo-key:color-mix(in oklab, var(--accent-cyan-400) 50%, #fff);
    --halo-bloom:drop-shadow(0 0 1.5px color-mix(in oklab, var(--accent-violet-500) 45%, transparent)) drop-shadow(0 0 4px color-mix(in oklab, var(--accent-cyan-400) 18%, transparent));
    --halo-sheen:radial-gradient(60% 46% at 32% 14%, color-mix(in oklab, var(--text-primary) 12%, transparent) 0%, transparent 72%);
    --halo-rim:conic-gradient(from 285deg, var(--halo-key) 0deg, color-mix(in oklab, var(--accent-violet-500) 55%, transparent) 46deg, transparent 110deg, transparent 230deg, color-mix(in oklab, var(--text-primary) 18%, transparent) 300deg, var(--halo-key) 360deg);
  }
  .card-actions[data-action-layout="halo"] .card-action:not(.is-hub) .a-icon,
  :is(.card-hero, .td-photo)[data-side-style="halo"] .card-side-btn .sb-icon{ position:relative; background:var(--halo-sheen), var(--halo-disc); }
  .card-actions[data-action-layout="halo"] .card-action:not(.is-hub) .a-icon::before,
  :is(.card-hero, .td-photo)[data-side-style="halo"] .card-side-btn .sb-icon::before{
    content:''; position:absolute; inset:0; border-radius:50%; padding:1px; pointer-events:none; opacity:0.75;
    background:var(--halo-rim);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
    transition:opacity .25s ease;
  }
  .card-actions[data-action-layout="halo"] .card-action:not(.is-hub) .a-icon svg{ stroke:url(#hoGlyph); stroke-width:1.8; filter:var(--halo-bloom); }
  .card-actions[data-action-layout="halo"] .halo-defs{ position:absolute; width:0; height:0; overflow:hidden; }
  .td-photo[data-side-style="halo"] .card-side-btn.is-profile .sb-icon svg:not(.sb-google){ stroke:url(#hoGlyph); }
  :is(.card-hero, .td-photo)[data-side-style="halo"] .card-side-btn .sb-icon svg:not(.sb-google){ stroke:url(#iconGrad); stroke-width:1.8; filter:var(--halo-bloom); }
  .card-actions[data-action-layout="halo"] .card-action:not(.is-hub):is(:hover, :focus-visible) .a-icon::before,
  :is(.card-hero, .td-photo)[data-side-style="halo"] .card-side-btn:is(:hover, :focus-visible) .sb-icon::before{ opacity:1; }
  .card-actions[data-action-layout="halo"] .card-action:not(.is-hub):is(:hover, :focus-visible) .a-icon svg{
    filter:drop-shadow(0 0 2px color-mix(in oklab, var(--accent-violet-500) 60%, transparent)) drop-shadow(0 0 6px color-mix(in oklab, var(--accent-cyan-400) 28%, transparent));
  }
  /* Exchange lens: the same key light on its face and glyph. */
  @media (min-width:341px){
    .card-actions[data-action-layout="halo"] .card-action.is-hub .a-icon{
      background:var(--halo-sheen), radial-gradient(circle at 50% 28%, color-mix(in oklab, var(--accent-violet-500) 24%, var(--brand-ink-950)) 0%, var(--brand-ink-950) 74%);
    }
    .card-actions[data-action-layout="halo"] .card-action.is-hub .ex-mark{ filter:drop-shadow(0 0 2px color-mix(in oklab, var(--accent-cyan-400) 40%, transparent)); }
  }
  .card-hero[data-bottom-style="halo"] .card-secondary-btn.is-share svg{ stroke:url(#iconGrad) !important; filter:var(--halo-bloom); }
  @media (prefers-reduced-motion: reduce){
    .card-actions[data-action-layout="halo"] .card-action .a-icon::before,
    :is(.card-hero, .td-photo)[data-side-style="halo"] .card-side-btn .sb-icon::before{ transition:none; }
  }

  /* ---- Halo: one lighting system on one clock ----
     The comet ribbon, the track's wake/lead, the Exchange dial's
     catch-light and every station's light run on --halo-period; each
     station is offset by --t, the fraction of the lap at which the head
     reaches it (renderer.js, from the same angle that places it), so they
     stay aligned for any action count or width. At each station:
       1. a concentrated CRESCENT of light rises on the rim facing the
          approaching head (thick at the lit side, vanishing at its tips —
          a light circle minus an offset dark one) and turns over the outer
          edge as the head passes behind the orb;
       2. a crisp HIGHLIGHT sweeps across the glyph in the direction of
          travel (a second copy of the glyph, masked to a moving band with a
          sharp leading edge and a soft trailing one);
       3. a soft AFTERGLOW in the glyph's bloom fades behind it.
     Opacity, angle, mask and filter only — nothing moves or resizes. */
  @property --hg{ syntax:'<number>'; inherits:true; initial-value:0; }
  @property --hc{ syntax:'<number>'; inherits:true; initial-value:0; }
  @property --hp{ syntax:'<number>'; inherits:true; initial-value:-0.3; }
  @property --hs{ syntax:'<angle>'; inherits:true; initial-value:0deg; }
  .card-actions[data-action-layout="halo"]{ --halo-period:14s; }
  .card-actions[data-action-layout="halo"][data-halo-variant="orbit-cosmos"]{ --halo-period:7s; }
  :root{ --halo-glint:color-mix(in oklab, var(--accent-cyan-400) 62%, #fff); --halo-glint-core:#fff; }
  .card-actions[data-action-layout="halo"] .a-shine{ display:none; }
  @media (min-width:341px){
    /* Only the glyph sweep still animates a custom property (--hp, and only
       while the light passes). The crescent and afterglow animate
       transform/opacity alone — composited, no per-frame repaint — on the
       same period and offset, so they stay locked to the ribbon. */
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"]) .card-action:not(.is-hub) .a-icon{
      animation:haloSweep var(--halo-period) linear infinite; animation-delay:calc(var(--halo-period) * (var(--t, 0) - 1));
    }
    /* 1. Crescent */
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"]) .card-action:not(.is-hub) .a-icon::after{
      content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none; opacity:0;
      animation:haloCrescent var(--halo-period) linear infinite; animation-delay:calc(var(--halo-period) * (var(--t, 0) - 1)); will-change:transform, opacity;
      background:conic-gradient(from calc(var(--a) - 135deg), transparent 0deg, color-mix(in oklab, var(--halo-glint) 50%, transparent) 22deg, var(--halo-glint-core) 45deg, color-mix(in oklab, var(--halo-glint) 50%, transparent) 68deg, transparent 90deg);
      -webkit-mask:radial-gradient(circle 27.4px at calc(50% - sin(calc(var(--a) - 90deg)) * 2.8px) calc(50% + cos(calc(var(--a) - 90deg)) * 2.8px), transparent 97%, #000 100%);
      mask:radial-gradient(circle 27.4px at calc(50% - sin(calc(var(--a) - 90deg)) * 2.8px) calc(50% + cos(calc(var(--a) - 90deg)) * 2.8px), transparent 97%, #000 100%);
      filter:drop-shadow(0 0 2.5px color-mix(in oklab, var(--halo-glint) 65%, transparent));
    }
    /* 2. Highlight sweep across the glyph */
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"]) .card-action:not(.is-hub) .a-shine{
      display:flex; position:absolute; inset:0; align-items:center; justify-content:center; pointer-events:none;
    }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"]) .card-action:not(.is-hub) .a-icon .a-shine svg{
      stroke:var(--halo-glint-core); stroke-width:1.9;
      -webkit-mask-image:linear-gradient(calc(var(--a) + 90deg), transparent calc(var(--hp) * 100% - 30%), #000 calc(var(--hp) * 100% - 3%), #000 calc(var(--hp) * 100%), transparent calc(var(--hp) * 100% + 5%));
      mask-image:linear-gradient(calc(var(--a) + 90deg), transparent calc(var(--hp) * 100% - 30%), #000 calc(var(--hp) * 100% - 3%), #000 calc(var(--hp) * 100%), transparent calc(var(--hp) * 100% + 5%));
    }
    /* 3. Afterglow (the coloured glyph's own bloom) */
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"]) .card-action:not(.is-hub) .a-icon > svg{
      filter:drop-shadow(0 0 1.5px color-mix(in oklab, var(--accent-violet-500) 45%, transparent)) drop-shadow(0 0 4px color-mix(in oklab, var(--accent-cyan-400) 18%, transparent));
    }
  }
  @media (min-width:341px){
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"]) .card-action:not(.is-hub) .a-shine::before{
      content:''; position:absolute; inset:24%; border-radius:50%; pointer-events:none; opacity:0;
      background:radial-gradient(circle, color-mix(in oklab, var(--accent-cyan-400) 30%, transparent) 0%, color-mix(in oklab, var(--accent-violet-500) 14%, transparent) 50%, transparent 74%);
      animation:haloGlow var(--halo-period) linear infinite; animation-delay:calc(var(--halo-period) * (var(--t, 0) - 1)); will-change:opacity;
    }
  }
  /* Same timeline as haloLight (kept below for reference): --hs -> rotate,
     --hc -> crescent opacity, --hg -> afterglow opacity, --hp -> sweep. */
  @keyframes haloCrescent{
    0%  { transform:rotate(90deg);  opacity:1; }
    2%  { transform:rotate(112deg); opacity:0.85; }
    3%  { transform:rotate(124deg); opacity:0.7; }
    6%  { transform:rotate(160deg); opacity:0.28; }
    8%  { transform:rotate(180deg); opacity:0; }
    17% { transform:rotate(180deg); opacity:0; }
    89.99%{ transform:rotate(182deg); opacity:0; }
    90% { transform:rotate(360deg); opacity:0; }
    92% { transform:rotate(372deg); opacity:0; }
    97% { transform:rotate(422deg); opacity:0.7; }
    98% { transform:rotate(432deg); opacity:0.84; }
    100%{ transform:rotate(450deg); opacity:1; }
  }
  @keyframes haloGlow{
    0%{ opacity:0.85; } 2%, 3%{ opacity:1; } 6%{ opacity:0.7; } 8%{ opacity:0.52; } 17%, 92%{ opacity:0; } 97%{ opacity:0.1; } 98%{ opacity:0.28; } 100%{ opacity:0.85; }
  }
  @keyframes haloSweep{
    0%{ --hp:0.45; } 2%{ --hp:0.95; } 3%, 89.99%{ --hp:1.3; } 90%, 97%{ --hp:-0.3; } 98%{ --hp:-0.12; } 100%{ --hp:0.45; }
  }
  /* Lap = 14s (1% = 140ms); 100% = 0% = the head passing behind the orb.
     Crescent rises over ~1.1s as the lead and head arrive, rolls over the
     outer edge and is gone ~1.1s later; the glyph highlight crosses in
     ~0.7s around the pass; the afterglow lingers ~2s. */
  @keyframes haloLight{
    0%  { --hc:1;    --hs:90deg;  --hp:0.45;  --hg:0.85; }
    2%  { --hc:0.85; --hs:112deg; --hp:0.95;  --hg:1; }
    3%  { --hc:0.7;  --hs:124deg; --hp:1.3;   --hg:1; }
    6%  { --hc:0.28; --hs:160deg; --hp:1.3;   --hg:0.7; }
    8%  { --hc:0;    --hs:180deg; --hp:1.3;   --hg:0.52; }
    17% { --hc:0;    --hs:180deg; --hp:1.3;   --hg:0; }
    /* the highlight band jumps back off-glyph while dark (never sweeps in reverse) */
    89.99%{ --hc:0;  --hs:2deg;   --hp:1.3;   --hg:0; }
    90% { --hc:0;    --hs:0deg;   --hp:-0.3;  --hg:0; }
    92% { --hc:0;    --hs:12deg;  --hp:-0.3;  --hg:0; }
    97% { --hc:0.7;  --hs:62deg;  --hp:-0.3;  --hg:0.1; }
    98% { --hc:0.84; --hs:72deg;  --hp:-0.12; --hg:0.28; }
    100%{ --hc:1;    --hs:90deg;  --hp:0.45;  --hg:0.85; }
  }

  @media (prefers-reduced-motion: reduce){
    .halo-orbit-svg .ho-comet{ animation:none; }
    .card-actions[data-action-layout="halo"] .card-action .a-icon{ animation:none !important; }
    .card-actions[data-action-layout="halo"] .card-action .a-icon::after,
    .card-actions[data-action-layout="halo"] .card-action .a-shine{ display:none !important; }
    .halo-dial .hd-catch{ animation:none; }
    .card-actions[data-action-layout="halo"] .card-action .a-icon,
    :is(.card-hero, .td-photo)[data-side-style="halo"] .card-side-btn .sb-icon{ transition:none; }
  }

  /* ---------- ORBIT CENTRE TREATMENTS (previews) ----------
     Everything identical to Orbit except the centre around Exchange. */
  .halo-dial :is(.hd-groove, .hd-collar, .hd-inner){ display:none; }
  .card-actions[data-action-layout="halo"] :is(.hv-well, .hv-lensglint){ display:none; }
  @media (min-width:341px){
    /* A — Machined Seat: the track's rail material, lit by the same key
       light, seats the lens; the comet's catch-light rides the collar. */
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant="orbit-seat"] .halo-dial :is(.hd-groove, .hd-collar, .hd-inner){ display:block; fill:none; vector-effect:non-scaling-stroke; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant="orbit-seat"] .halo-dial .hd-groove{ stroke:color-mix(in oklab, var(--brand-ink-950) 55%, #000); stroke-width:3.4; stroke-linecap:round; opacity:0.6; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant="orbit-seat"] .halo-dial .hd-collar{ stroke:url(#hdRail); stroke-width:1.5; stroke-linecap:round; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant="orbit-seat"] .halo-dial .hd-inner{ stroke:color-mix(in oklab, var(--text-primary) 16%, transparent); stroke-width:0.8; stroke-linecap:round; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant="orbit-seat"] .halo-dial :is(.hr-a){ stop-color:color-mix(in oklab, var(--text-primary) 62%, transparent); }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant="orbit-seat"] .halo-dial :is(.hr-b){ stop-color:color-mix(in oklab, var(--text-primary) 26%, transparent); }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant="orbit-seat"] .halo-dial :is(.hr-c){ stop-color:color-mix(in oklab, var(--text-primary) 14%, transparent); }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant="orbit-seat"] .halo-dial :is(.hr-d){ stop-color:color-mix(in oklab, var(--text-primary) 36%, transparent); }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant="orbit-seat"] .halo-dial .hd-glint{ opacity:0.9; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant="orbit-seat"] .card-action.is-hub .a-icon{ outline-color:transparent; }

    /* B — Light Well: no rings. A recessed well of darkness under the lens,
       a meniscus of key light on its upper-left edge, and the comet's
       reflection travelling around the lens rim on the same clock. */
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant="orbit-well"] .halo-dial{ display:none; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant="orbit-well"] .card-action.is-hub .a-icon{ outline-color:transparent; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant="orbit-well"] .hv-well{
      display:block; position:absolute; z-index:-1; left:50%; top:var(--halo-cy); width:138px; height:138px; margin:-69px 0 0 -69px; border-radius:50%; pointer-events:none;
      background:
        radial-gradient(closest-side, var(--halo-recess, color-mix(in oklab, var(--brand-ink-950) 55%, #000)) 0%, var(--halo-recess-deep, color-mix(in oklab, var(--brand-ink-950) 75%, #000)) 58%, transparent 100%);
      box-shadow:inset 7px 9px 14px -10px color-mix(in oklab, var(--text-primary) 30%, transparent), inset -6px -8px 14px -10px color-mix(in oklab, var(--accent-violet-500) 30%, transparent);
    }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant="orbit-well"] .hv-lensglint{
      display:block; position:absolute; left:50%; top:var(--halo-cy); width:76px; height:76px; margin:-38px 0 0 -38px; border-radius:50%; pointer-events:none; z-index:3;
      background:conic-gradient(from 4deg, transparent 0deg, color-mix(in oklab, var(--halo-glint) 45%, transparent) 16deg, var(--halo-glint-core) 30deg, color-mix(in oklab, var(--halo-glint) 45%, transparent) 44deg, transparent 60deg, transparent 360deg);
      -webkit-mask:radial-gradient(circle closest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px), #000 calc(100% - 0.5px), transparent 100%);
      mask:radial-gradient(circle closest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px), #000 calc(100% - 0.5px), transparent 100%);
      filter:drop-shadow(0 0 3px color-mix(in oklab, var(--halo-glint) 60%, transparent));
      animation:hlRim var(--halo-period) linear infinite;
    }
    @keyframes hlRim{ to{ transform:rotate(360deg); } }
  }
  @media (prefers-reduced-motion: reduce){ .card-actions[data-action-layout="halo"] .hv-lensglint{ animation:none; } }

  /* Round geometry (data-halo-round): the orbit's horizontal radius is
     capped at its vertical one — a circle wherever the width allows, as
     round as it can be where it doesn't. Stations and the orbit drawing use
     the same radius, so the ribbon and glints stay on the stations. */
  @media (min-width:341px){
    /* Halfway between the full-width ellipse and a circle (never wider than the width allows). */
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-round]{ --halo-rxe:min(50% - var(--halo-label) / 2, (50% - var(--halo-label) / 2 + var(--halo-ry)) / 2); }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-round] .card-action:not(.is-hub){ left:calc(50% + var(--halo-rxe) * sin(var(--a))); }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-round] .halo-orbit-svg{ left:calc(50% - var(--halo-rxe)); width:calc(var(--halo-rxe) * 2); }
  }

  /* Orbit family only: a tighter identity block — photo to name 12px, a
     wrapped (two-line) name at 1.0 line-height (half the inter-line gap; a
     single-line name keeps its normal word space), title to orbit 8px. */
  .card-hero:has(> .card-hero-content .card-actions[data-action-layout="halo"]:is(:not([data-halo-variant]), [data-halo-variant^="orbit"])) h1,
  .card-hero:has(.card-actions[data-action-layout="halo"]:is(:not([data-halo-variant]), [data-halo-variant^="orbit"])) > .card-hero-content > h1{ margin-top:12px; line-height:1.0; }
  @media (min-width:341px){
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"]):is(:not([data-halo-variant]), [data-halo-variant^="orbit"]){ margin-top:8px; }
  }

  /* ---------- ORBIT — COSMIC (preview) ----------
     Orbit unchanged (geometry, dial, ribbon, orb light) plus: a wider
     atmosphere around Exchange, two outer light paths (only ever passing
     under the orbs), a sparse star field in empty zones, and two rare
     shooting stars. Decorative and non-interactive; still under reduced
     motion. Dark: deep space, crisp white points. Light: luminous — pale
     light, accent-coloured stars and paths (themeCss --halo-star). */
  .card-actions[data-action-layout="halo"] :is(.ho-cos, .hx-atmos, .hx-sky){ display:none; }
  @media (min-width:341px){
    /* Track: Compass's engraved rail — a dark channel edged by two lit hairlines. */
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant="orbit-cosmos"] .ho-groove{ display:block; fill:none; stroke:var(--halo-rail-edge, color-mix(in oklab, var(--text-primary) 26%, transparent)); stroke-width:0.75; vector-effect:non-scaling-stroke; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant="orbit-cosmos"] .ho-bed{ stroke-width:5.5; stroke:var(--halo-rail-bed, color-mix(in oklab, var(--text-primary) 5%, transparent)); }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant="orbit-cosmos"] .ho-path{ stroke-width:0.8; opacity:0.6; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant="orbit-cosmos"] .ho-cos{ display:block; fill:none; vector-effect:non-scaling-stroke; stroke-linecap:round; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant="orbit-cosmos"] .ho-cos.is-a{ stroke:url(#hoCosA); stroke-width:1; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant="orbit-cosmos"] .ho-cos.is-b{ stroke:url(#hoCosB); stroke-width:0.8; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant="orbit-cosmos"] .hca-a{ stop-color:var(--halo-star, color-mix(in oklab, var(--halo-glint) 60%, #fff)); stop-opacity:0.55; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant="orbit-cosmos"] .hca-b{ stop-color:var(--accent-violet-500); stop-opacity:0.16; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant="orbit-cosmos"] .hca-c{ stop-color:var(--accent-violet-500); stop-opacity:0; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant="orbit-cosmos"] .hx-atmos{
      display:block; position:absolute; z-index:-1; left:50%; top:var(--halo-cy); width:360px; height:300px; margin:-150px 0 0 -180px; pointer-events:none;
      width:320px; height:320px; margin:-160px 0 0 -160px; border-radius:50%;
      background:radial-gradient(closest-side, var(--halo-sky-core, color-mix(in oklab, var(--accent-violet-500) 15%, transparent)) 0%, var(--halo-sky-mid, color-mix(in oklab, var(--accent-violet-500) 6%, transparent)) 55%, transparent 100%);
    }
    /* A second, wider centred layer: depth that deepens toward the rail. */
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant="orbit-cosmos"] .hx-atmos.is-far{ width:400px; height:400px; margin:-200px 0 0 -200px; border-radius:50%;
      background:radial-gradient(closest-side, transparent 38%, var(--halo-sky-far, color-mix(in oklab, var(--accent-cyan-400) 6%, transparent)) 64%, transparent 100%); }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant="orbit-cosmos"] .hx-sky{ display:block; position:absolute; inset:0; pointer-events:none; }
    .hx-sky .hx-star{
      position:absolute; width:var(--s); height:var(--s); margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius:50%;
      background:var(--halo-star-2, var(--halo-star, color-mix(in oklab, var(--text-primary) 85%, var(--halo-glint)))); opacity:var(--b);
      box-shadow:0 0 calc(var(--s) * 0.9) calc(var(--s) * -0.1) color-mix(in oklab, var(--halo-star, var(--halo-glint)) 55%, transparent);
      animation:hxTwinkle 9s ease-in-out var(--d, 0s) infinite;
    }
    .hx-sky .hx-star.is-spark{
      border-radius:0; box-shadow:none;
      background:linear-gradient(transparent 46%, var(--halo-star, color-mix(in oklab, var(--text-primary) 90%, var(--halo-glint))) 46% 54%, transparent 54%), linear-gradient(90deg, transparent 46%, var(--halo-star, color-mix(in oklab, var(--text-primary) 90%, var(--halo-glint))) 46% 54%, transparent 54%), radial-gradient(closest-side, var(--halo-star, #fff) 18%, transparent 30%);
      -webkit-mask:radial-gradient(closest-side, #000 22%, transparent 100%); mask:radial-gradient(closest-side, #000 22%, transparent 100%);
    }
    .hx-sky .hx-star.is-in{ top:calc(var(--halo-cy) + 74px); }
    .hx-sky .hx-star.is-off{ display:none; }
    .hx-sky .hx-star.is-in + .hx-star.is-in{ top:calc(var(--halo-cy) + 88px); }
    @keyframes hxTwinkle{ 0%, 100%{ opacity:var(--b); } 50%{ opacity:calc(var(--b) * 0.45); } }
    /* Shooting stars: a ~0.5s tapered streak (110px trail) on staggered
       13s / 17s / 19s cycles — a pass every 5-9s. behavior.js chooses each
       path at runtime from candidates that stay clear of every label and orb
       over the whole travel (trail included) and sets --mx/--my (head start),
       --mdx/--mdy (travel) and --ma (angle); a meteor with no clear path
       stays hidden. */
    .hx-sky .hx-meteor{
      position:absolute; left:calc(var(--mx, 0px) - 110px); top:var(--my, 0px); width:110px; height:1.6px; margin-top:-0.8px; border-radius:1px; opacity:0; display:none;
      background:linear-gradient(90deg, transparent, color-mix(in oklab, var(--halo-meteor, var(--halo-glint)) 35%, transparent) 55%, var(--halo-meteor, var(--halo-glint)) 90%, var(--halo-meteor-core, #fff));
      transform-origin:100% 50%;
    }
    .hx-sky .hx-meteor.is-ready{ display:block; }
    .hx-sky .hx-meteor.is-a{ animation:hxShootA 13s linear -3s infinite; }
    .hx-sky .hx-meteor.is-b{ animation:hxShootB 17s linear -11s infinite; }
    .hx-sky .hx-meteor.is-c{ animation:hxShootC 19s linear -6s infinite; }
    @keyframes hxShootA{ 0%, 95.8%{ opacity:0; transform:translate(0, 0) rotate(var(--ma, 0deg)) scaleX(0.25); } 96.3%{ opacity:1; } 99.4%{ opacity:0.85; } 100%{ opacity:0; transform:translate(var(--mdx, 0px), var(--mdy, 0px)) rotate(var(--ma, 0deg)) scaleX(1); } }
    @keyframes hxShootB{ 0%, 96.8%{ opacity:0; transform:translate(0, 0) rotate(var(--ma, 0deg)) scaleX(0.25); } 97.2%{ opacity:1; } 99.5%{ opacity:0.85; } 100%{ opacity:0; transform:translate(var(--mdx, 0px), var(--mdy, 0px)) rotate(var(--ma, 0deg)) scaleX(1); } }
    @keyframes hxShootC{ 0%, 97.1%{ opacity:0; transform:translate(0, 0) rotate(var(--ma, 0deg)) scaleX(0.25); } 97.5%{ opacity:1; } 99.5%{ opacity:0.85; } 100%{ opacity:0; transform:translate(var(--mdx, 0px), var(--mdy, 0px)) rotate(var(--ma, 0deg)) scaleX(1); } }
  }
  /* Cosmic: a clean static disc edge (no travelling crescent — the glyph
     sweep and afterglow carry the illumination), and ONE track + ONE
     ribbon: the rail path and the ribbon body/core only. */
  .card-actions[data-action-layout="halo"][data-halo-variant="orbit-cosmos"] .card-action:not(.is-hub) .a-icon::after{ display:none !important; }
  .card-actions[data-action-layout="halo"][data-halo-variant="orbit-cosmos"] .halo-orbit-svg :is(.ho-groove, .ho-cos, .ho-bed, .ho-wake, .ho-lead, .ho-halo, .ho-mid, .ho-rf-in, .ho-rf-out){ display:none !important; }
  /* Trackless: no stationary rail — only the travelling ribbon describes
     the orbit (its path is gone once it has passed). */
  .card-actions[data-action-layout="halo"][data-halo-variant="orbit-cosmos"] .halo-orbit-svg .ho-path{ display:none !important; }
  /* Ribbon sparkle: three tiny glints just behind the head, twinkling. */
  .halo-orbit-svg :is(.ho-spark, .ho-cbody, .ho-ccore, .ho-ccore-s){ display:none; }
  .card-actions[data-action-layout="halo"][data-halo-variant="orbit-cosmos"] .halo-orbit-svg :is(.ho-body, .ho-core){ display:none; }
  .card-actions[data-action-layout="halo"][data-halo-variant="orbit-cosmos"] .halo-orbit-svg .ho-cbody{ display:block; fill:var(--accent-violet-500); opacity:0.5; }
  .card-actions[data-action-layout="halo"][data-halo-variant="orbit-cosmos"] .halo-orbit-svg .ho-ccore{ display:block; fill:var(--halo-glint-core); }
  .card-actions[data-action-layout="halo"][data-halo-variant="orbit-cosmos"] .halo-orbit-svg .ho-spark{ display:block; }
  .card-actions[data-action-layout="halo"][data-halo-variant="orbit-cosmos"] .halo-orbit-svg .ho-spark path{ fill:#fff; transform-box:fill-box; transform-origin:center; animation:hoTwinkle 0.9s ease-in-out infinite; }
  .card-actions[data-action-layout="halo"][data-halo-variant="orbit-cosmos"] .halo-orbit-svg .ho-spark path:nth-child(2){ animation-delay:-0.3s; animation-duration:1.1s; }
  .card-actions[data-action-layout="halo"][data-halo-variant="orbit-cosmos"] .halo-orbit-svg .ho-spark path:nth-child(3){ animation-delay:-0.65s; animation-duration:1.3s; }
  @keyframes hoTwinkle{ 0%, 100%{ opacity:0.25; transform:scale(0.55) rotate(0deg); } 50%{ opacity:1; transform:scale(1) rotate(45deg); } }
  /* Exchange gauge, vivid: accent-gradient ring and ticks, a fixed
     specular arc (upper left) and a brighter catch-light. */
  .card-actions[data-action-layout="halo"][data-halo-variant="orbit-cosmos"] .halo-dial .hv-a{ stop-color:var(--accent-rose-500); }
  .card-actions[data-action-layout="halo"][data-halo-variant="orbit-cosmos"] .halo-dial .hv-b{ stop-color:var(--accent-violet-500); }
  .card-actions[data-action-layout="halo"][data-halo-variant="orbit-cosmos"] .halo-dial .hv-c{ stop-color:var(--accent-cyan-400); }
  .card-actions[data-action-layout="halo"][data-halo-variant="orbit-cosmos"] .halo-dial .hd-ticks{ stroke:url(#hdVivid) !important; opacity:0.8; }
  .card-actions[data-action-layout="halo"][data-halo-variant="orbit-cosmos"] .halo-dial .hd-ring{ stroke:url(#hdVivid) !important; opacity:0.55; }
  .card-actions[data-action-layout="halo"][data-halo-variant="orbit-cosmos"] .halo-dial .hd-glint{ opacity:1 !important; }
  .card-actions[data-action-layout="halo"][data-halo-variant="orbit-cosmos"] .card-action.is-hub .a-icon::before{ padding:2px; filter:saturate(1.3) brightness(1.08); }
  @media (prefers-reduced-motion: reduce){
    .card-actions[data-action-layout="halo"][data-halo-variant="orbit-cosmos"] .halo-orbit-svg .ho-spark path{ animation:none; opacity:0.85; }
  }
  @media (prefers-reduced-motion: reduce){
    .hx-sky .hx-star{ animation:none; }
    .hx-sky .hx-meteor, .hx-sky .hx-meteor.is-ready{ display:none; }
  }

  /* ---------- HALO DESIGN VARIANTS (previews) ----------
     data-halo-variant on the action area; the ring, comet ribbon, orb
     lighting, action positions and height are shared with Orbit. Layers sit
     at the centre (--halo-cy: the hub lens centre, or the core's) or in the
     orbit's circle space, so nothing can move an action. */
  .card-actions[data-action-layout="halo"] :is(.ho-groove, .ho-outer, .hv-atmos, .hc-sky, .hv-celestial, .hv-compass){ display:none; }
  @media (min-width:341px){
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"]){ --halo-cy:calc(var(--halo-ey) + var(--halo-ry)); }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-hub]{ --halo-cy:calc(var(--halo-ey) + var(--halo-ry) + var(--halo-hubdy, 0px) - 12.5px); }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant] .halo-stage{ z-index:0; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant]:not([data-halo-variant="orbit-cosmos"]) :is(.hd-ticks, .hd-ring){ display:none; }

    /* ---- Celestial: a miniature cosmos anchored by the hub ----
       Hierarchy: hub (sun) > ribbon > orbs (moons) > fine paths > sparse
       points of light. Depth from a faint atmosphere; empty zones stay
       empty. */
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant="celestial"] .ho-outer{ display:block; fill:none; stroke:color-mix(in oklab, var(--text-primary) 10%, transparent); stroke-width:0.8; vector-effect:non-scaling-stroke; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant="celestial"] .ho-bed{ stroke-width:2.4; stroke:color-mix(in oklab, var(--text-primary) 5%, transparent); }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant="celestial"] .ho-path{ stroke-width:1; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant="celestial"] .hv-atmos{
      display:block; position:absolute; z-index:-1; left:50%; top:var(--halo-cy); width:320px; height:250px; margin:-125px 0 0 -160px; pointer-events:none;
      background:radial-gradient(closest-side, color-mix(in oklab, var(--accent-violet-500) 16%, transparent) 0%, color-mix(in oklab, var(--accent-cyan-400) 6%, transparent) 46%, transparent 100%);
    }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant="celestial"] .hv-celestial{
      display:block; position:absolute; left:50%; top:var(--halo-cy); width:220px; height:220px; margin:-110px 0 0 -110px; overflow:visible;
    }
    .hv-celestial .hc-orbit{ fill:none; stroke:color-mix(in oklab, var(--text-primary) 22%, transparent); stroke-width:0.8; }
    .hv-celestial .hc-orbit.is-b{ stroke:color-mix(in oklab, var(--text-primary) 13%, transparent); }
    .hv-celestial .hc-body{ fill:var(--halo-glint-core); stroke:color-mix(in oklab, var(--halo-glint) 30%, transparent); stroke-width:3.2; }
    .hv-celestial .hc-body.is-b{ fill:var(--accent-rose-500); stroke:color-mix(in oklab, var(--accent-rose-500) 25%, transparent); stroke-width:2.6; }
    .hv-celestial .hc-star path{ fill:color-mix(in oklab, var(--text-primary) 70%, var(--halo-glint)); }
    .hv-celestial .hc-star{ opacity:0.75; animation:hcTwinkle 7s ease-in-out var(--d, 0s) infinite; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant="celestial"] .hc-sky{ display:block; position:absolute; inset:0; pointer-events:none; }
    .hc-sky i{
      position:absolute; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; opacity:0.6; animation:hcTwinkle 8s ease-in-out var(--d, 0s) infinite;
      background:linear-gradient(transparent 44%, color-mix(in oklab, var(--text-primary) 75%, var(--halo-glint)) 44% 56%, transparent 56%), linear-gradient(90deg, transparent 44%, color-mix(in oklab, var(--text-primary) 75%, var(--halo-glint)) 44% 56%, transparent 56%);
      -webkit-mask:radial-gradient(closest-side, #000 20%, transparent 100%); mask:radial-gradient(closest-side, #000 20%, transparent 100%);
    }
    @keyframes hcTwinkle{ 0%, 100%{ opacity:0.75; } 50%{ opacity:0.3; } }
    /* Moons: the orb material gains a faint violet underglow (planetshine). */
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant="celestial"] .card-action:not(.is-hub) .a-icon{
      background:radial-gradient(110% 80% at 50% 118%, color-mix(in oklab, var(--accent-violet-500) 20%, transparent) 0%, transparent 62%), var(--halo-sheen), var(--halo-disc);
    }

    /* ---- Precision Compass: a crafted navigation instrument ----
       Hierarchy: graduated bezel (indices aimed at each station) > engraved
       track > socketed orbs. Materials: an engraved groove, a metal bezel,
       turned-metal orb faces in etched sockets. No numbers, no fake controls. */
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant^="compass"] .ho-groove{ display:block; fill:none; stroke:color-mix(in oklab, var(--text-primary) 24%, transparent); stroke-width:0.7; vector-effect:non-scaling-stroke; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant^="compass"] .ho-bed{ stroke-width:5.5; stroke:color-mix(in oklab, var(--text-primary) 4%, transparent); }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant^="compass"] .ho-path{ stroke-width:0.7; opacity:0.55; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant^="compass"] .hv-compass{
      display:block; position:absolute; left:50%; top:var(--halo-cy); width:160px; height:160px; margin:-80px 0 0 -80px; overflow:visible;
    }
    .hv-compass :is(.hp-bezel, .hp-etch){ fill:none; stroke-linecap:round; }
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant="celestial"] .halo-dial{ display:none; }
    .hv-compass .hp-bezel{ stroke:color-mix(in oklab, var(--text-primary) 30%, transparent); stroke-width:2.2; }
    .hv-compass .hp-etch{ stroke:color-mix(in oklab, var(--text-primary) 12%, transparent); stroke-width:0.7; }
    .hv-compass .hp-minor{ fill:none; stroke:color-mix(in oklab, var(--text-primary) 24%, transparent); stroke-width:0.7; }
    .hv-compass .hp-major{ fill:none; stroke:color-mix(in oklab, var(--text-primary) 72%, transparent); stroke-width:1.2; stroke-linecap:round; }
    .hv-compass .hp-reach{ fill:none; stroke:color-mix(in oklab, var(--text-primary) 26%, transparent); stroke-width:0.8; stroke-linecap:round; }
    .hv-compass .hp-index{ fill:color-mix(in oklab, var(--accent-violet-500) 60%, var(--accent-cyan-400)); }
    /* Socketed, turned-metal orbs. */
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant^="compass"] .card-action:not(.is-hub) .a-icon{
      outline:1px solid color-mix(in oklab, var(--text-primary) 15%, transparent); outline-offset:4px;
      background:repeating-radial-gradient(circle at 50% 50%, transparent 0 1.6px, color-mix(in oklab, var(--text-primary) 3%, transparent) 1.6px 2.2px), var(--halo-sheen), var(--halo-disc);
    }
  }
  @media (prefers-reduced-motion: reduce){
    .hv-celestial .hc-star, .hc-sky i{ animation:none; }
  }

  /* ---------- ACTION STYLE: EDITORIAL INDEX ----------
     A contents page, not settings rows: an opening double rule with a mono
     range marker, numbered entries set in large type with a dotted leader
     out to a small outlined icon, hairlines between entries, and Connect
     set as the feature entry (oversized gradient type, gradient underline,
     a filled disc following the global Button Style via themeCss) in its
     configured position. Whole row = tap target (>=58px tall). Numerals and
     leaders are aria-hidden, so each link's name is exactly its label. */
  .card-actions[data-action-layout="editorial-index"]{
    display:block; margin-top:8px; text-align:left;
    border-bottom:1px solid var(--border-glass-strong);
  }
  .card-actions[data-action-layout="editorial-index"] .ix-head{
    display:flex; align-items:center; gap:12px; padding:0 2px 9px;
    font-size:10.5px; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:var(--text-tertiary);
    border-bottom:3px double var(--border-glass-strong);
  }
  .card-actions[data-action-layout="editorial-index"] .ix-orn{ flex:1; height:1px; background:linear-gradient(90deg, var(--border-glass-strong), transparent); }
  .card-actions[data-action-layout="editorial-index"] .card-action{
    position:relative; flex-direction:row; align-items:baseline; justify-content:flex-start; gap:0;
    min-height:52px; padding:10px 4px 10px 2px; border-radius:0; text-align:left;
    background:linear-gradient(90deg, var(--surface-glass-hover), transparent 75%) no-repeat 0 0 / 0% 100%;
    transition:background-size .35s ease;
  }
  /* Hairlines start at the label column, so numerals hang in the margin
     like a printed index. */
  .card-actions[data-action-layout="editorial-index"] .card-action::after{
    content:''; position:absolute; left:46px; right:0; bottom:0; height:1px; background:var(--border-glass-subtle);
  }
  .card-actions[data-action-layout="editorial-index"] .card-action:last-child::after,
  .card-actions[data-action-layout="editorial-index"] .card-action.is-connect::after{ display:none; }
  .card-actions[data-action-layout="editorial-index"] .card-action:active{ transform:none; background-size:100% 100%; }
  .card-actions[data-action-layout="editorial-index"] .card-action:focus-visible{ outline-offset:-2px; border-radius:4px; }
  /* Large light numerals are the typographic anchor, sharing the label's
     baseline (row aligns on baseline; leader + icon re-centre themselves). */
  .card-actions[data-action-layout="editorial-index"] .a-num{
    flex:none; width:46px; font-size:24px; font-weight:400; letter-spacing:-0.02em; line-height:1;
    font-variant-numeric:tabular-nums; color:var(--text-tertiary); opacity:0.8; transition:color .25s ease, opacity .25s ease;
  }
  .card-actions[data-action-layout="editorial-index"] .card-action .a-label{
    flex:0 1 auto; min-width:0; font-size:19px; font-weight:700; letter-spacing:-0.012em; line-height:1.18;
    overflow-wrap:break-word;
  }
  .card-actions[data-action-layout="editorial-index"] .a-lead{
    position:relative; flex:1 1 18px; min-width:18px; height:0; margin:0 12px; align-self:last baseline;
    border-bottom:1.5px dotted var(--border-glass-strong);
  }
  .card-actions[data-action-layout="editorial-index"] .a-lead::after{
    content:''; position:absolute; left:0; right:0; bottom:-1.5px; height:1.5px; background:var(--brand-gradient);
    transform:scaleX(0); transform-origin:left center; transition:transform .4s ease;
  }
  /* The icon is the entry's "page number": a bare glyph at the end of the
     leader — no button chrome, so the list never reads as settings rows. */
  .card-actions[data-action-layout="editorial-index"] .card-action .a-icon,
  .card-actions[data-action-layout="editorial-index"] .card-action:hover .a-icon,
  .card-actions[data-action-layout="editorial-index"] .card-action:focus-visible .a-icon{
    flex:none; width:28px; height:28px; border:0; border-radius:0; background:transparent; box-shadow:none;
    align-self:center; justify-content:flex-end;
  }
  .card-actions[data-action-layout="editorial-index"] .card-action .a-icon{ transition:transform .3s ease, box-shadow .3s ease; }
  .card-actions[data-action-layout="editorial-index"] .card-action .a-icon svg{ width:21px; height:21px; }
  /* Optional detail: the entry "inks in" on hover/focus. */
  .card-actions[data-action-layout="editorial-index"] .card-action:hover,
  .card-actions[data-action-layout="editorial-index"] .card-action:focus-visible{ background-size:100% 100%; }
  .card-actions[data-action-layout="editorial-index"] .card-action:hover .a-num,
  .card-actions[data-action-layout="editorial-index"] .card-action:focus-visible .a-num{ color:var(--accent-violet-500); opacity:1; }
  .card-actions[data-action-layout="editorial-index"] .card-action:hover .a-lead::after,
  .card-actions[data-action-layout="editorial-index"] .card-action:focus-visible .a-lead::after{ transform:scaleX(1); }
  .card-actions[data-action-layout="editorial-index"] .card-action:hover .a-icon,
  .card-actions[data-action-layout="editorial-index"] .card-action:focus-visible .a-icon{ transform:translateX(3px); }

  /* Connect — the feature entry. */
  .card-actions[data-action-layout="editorial-index"] .card-action.is-connect{ min-height:74px; padding-top:13px; padding-bottom:13px; }
  .card-actions[data-action-layout="editorial-index"] .card-action.is-connect::before{
    content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--brand-gradient);
  }
  .card-actions[data-action-layout="editorial-index"] .card-action.is-connect .a-num{ color:var(--accent-violet-500); opacity:1; font-size:30px; }
  .card-actions[data-action-layout="editorial-index"] .card-action.is-connect .a-label{ font-size:28px; font-weight:800; letter-spacing:-0.025em; line-height:1.08; }
  /* Resting state only: hover/focus must not repaint the disc, or a non-
     gradient global Button Style (themeCss) would flip back on focus. */
  .card-actions[data-action-layout="editorial-index"] .card-action.is-connect .a-icon{
    justify-content:center; border-radius:50%; width:50px; height:50px; color:#0A0A16; background:var(--brand-gradient);
    box-shadow:0 0 26px -4px var(--accent-violet-glow);
  }
  .card-actions[data-action-layout="editorial-index"] .card-action.is-connect .a-icon svg,
  .card-actions[data-action-layout="editorial-index"] .card-action.is-connect:hover .a-icon svg,
  .card-actions[data-action-layout="editorial-index"] .card-action.is-connect:focus-visible .a-icon svg{ stroke:currentColor !important; filter:none; width:22px; height:22px; }
  @media (max-width:380px){
    .card-actions[data-action-layout="editorial-index"] .a-num{ width:40px; }
    .card-actions[data-action-layout="editorial-index"] .card-action::after{ left:40px; }
    .card-actions[data-action-layout="editorial-index"] .a-lead{ margin:0 10px; }
  }
  @media (prefers-reduced-motion: reduce){
    .card-actions[data-action-layout="editorial-index"] .card-action,
    .card-actions[data-action-layout="editorial-index"] .card-action .a-lead::after,
    .card-actions[data-action-layout="editorial-index"] .card-action .a-icon{ transition:none; }
    .card-actions[data-action-layout="editorial-index"] .card-action:hover .a-icon,
    .card-actions[data-action-layout="editorial-index"] .card-action:focus-visible .a-icon{ transform:none; }
  }

  /* ---------- EDITORIAL INDEX v2 (2026-10-20): two entries per row ----------
     Still a contents page — opening double rule + mono range, numbered
     entries, dotted leaders, hairlines, Exchange as the feature entry — set
     in two columns read left to right (configured order; DOM = visual =
     focus order), so eight actions take four rows. Each entry stacks:
     numeral · leader · icon over the label; a column rule separates the
     pair. Whole entry = tap target (>=64px tall). */
  .card-actions[data-action-layout="editorial-index"]{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:0; }
  .card-actions[data-action-layout="editorial-index"] .ix-head{ grid-column:1 / -1; }
  .card-actions[data-action-layout="editorial-index"] .card-action{
    display:grid; grid-template-columns:auto minmax(12px,1fr) auto; grid-template-areas:"num lead icon" "label label label";
    align-items:center; column-gap:8px; row-gap:2px; min-height:50px; padding:7px 12px 8px 2px;
  }
  .card-actions[data-action-layout="editorial-index"] .card-action:nth-child(odd){ padding-left:14px; padding-right:4px; border-left:1px solid var(--border-glass-subtle); }
  .card-actions[data-action-layout="editorial-index"] .card-action::after{ left:0; right:0; }
  .card-actions[data-action-layout="editorial-index"] .card-action:nth-child(odd)::after{ left:14px; }
  .card-actions[data-action-layout="editorial-index"] .card-action:last-child::after,
  .card-actions[data-action-layout="editorial-index"]:is([data-action-count="4"], [data-action-count="6"], [data-action-count="8"]) .card-action:nth-last-child(2)::after,
  .card-actions[data-action-layout="editorial-index"] .card-action.is-connect::after{ display:none; }
  .card-actions[data-action-layout="editorial-index"] .a-num{ grid-area:num; width:auto; font-size:15px; line-height:1; }
  .card-actions[data-action-layout="editorial-index"] .a-lead{ grid-area:lead; flex:none; min-width:12px; margin:0; align-self:center; }
  .card-actions[data-action-layout="editorial-index"] .card-action .a-icon,
  .card-actions[data-action-layout="editorial-index"] .card-action:hover .a-icon,
  .card-actions[data-action-layout="editorial-index"] .card-action:focus-visible .a-icon{ grid-area:icon; width:20px; height:20px; justify-content:center; }
  .card-actions[data-action-layout="editorial-index"] .card-action .a-icon svg{ width:18px; height:18px; }
  /* Larger glyphs in the same 20px slot: scaled visually, so rows, gaps and
     the action block keep their size. */
  .card-actions[data-action-layout="editorial-index"] .card-action:not(.is-connect) .a-icon > svg:not(.brand-icon){ transform:scale(1.4); transform-origin:50% 50%; }
  .card-actions[data-action-layout="editorial-index"] .card-action .a-label{ grid-area:label; font-size:17px; line-height:1.15; }
  /* Exchange — still the feature entry, now in its own cell. */
  .card-actions[data-action-layout="editorial-index"] .card-action.is-connect{ min-height:50px; padding-top:7px; padding-bottom:8px; }
  .card-actions[data-action-layout="editorial-index"] .card-action.is-connect .a-num{ font-size:16px; }
  .card-actions[data-action-layout="editorial-index"] .card-action.is-connect .a-label{ font-size:18px; font-weight:800; letter-spacing:-0.02em; line-height:1.15; }
  .card-actions[data-action-layout="editorial-index"] .card-action.is-connect .a-icon{ width:24px; height:24px; margin:-2px 0; }
  .card-actions[data-action-layout="editorial-index"] .card-action.is-connect .a-icon svg,
  .card-actions[data-action-layout="editorial-index"] .card-action.is-connect:hover .a-icon svg,
  .card-actions[data-action-layout="editorial-index"] .card-action.is-connect:focus-visible .a-icon svg{ width:14px; height:14px; }
  .card-actions[data-action-layout="editorial-index"] .card-action:hover .a-icon,
  .card-actions[data-action-layout="editorial-index"] .card-action:focus-visible .a-icon{ transform:translateX(2px); }
  @media (max-width:380px){
    .card-actions[data-action-layout="editorial-index"] .a-num{ width:auto; }
    .card-actions[data-action-layout="editorial-index"] .card-action::after{ left:0; }
    .card-actions[data-action-layout="editorial-index"] .card-action:nth-child(odd)::after{ left:12px; }
    .card-actions[data-action-layout="editorial-index"] .card-action{ padding-right:10px; }
    .card-actions[data-action-layout="editorial-index"] .card-action:nth-child(odd){ padding-left:12px; padding-right:2px; }
    .card-actions[data-action-layout="editorial-index"] .card-action .a-label{ font-size:16px; }
  }

  /* Editorial Index — the coloured leader line, visible at rest on every
     entry: the accents blend and drift slowly along it while its intensity
     breathes (staggered per entry). Labels and rows never move. Reduced
     motion: the same gradient, still. */
  .card-actions[data-action-layout="editorial-index"] .a-lead::after{
    transform:none; height:2px; bottom:-2px; opacity:0.8; border-radius:1px;
    background:linear-gradient(90deg, var(--accent-rose-500), var(--accent-violet-500), var(--accent-cyan-400), var(--accent-violet-500), var(--accent-rose-500)) 0 0 / 200% 100%;
    animation:ixDrift 7s linear infinite, ixBreathe 4.6s ease-in-out infinite;
  }
  /* An occasional soft highlight travels along the line (each entry on its own phase). */
  .card-actions[data-action-layout="editorial-index"] .a-lead::before{
    content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px; border-radius:1px; pointer-events:none; opacity:0;
    background:linear-gradient(90deg, transparent, color-mix(in srgb, #fff 85%, var(--accent-cyan-400)), transparent) no-repeat -40% 0 / 38% 100%;
    animation:ixGlint 9s ease-in-out infinite;
  }
  .card-actions[data-action-layout="editorial-index"] .card-action:nth-child(3n) .a-lead::after{ animation-delay:-2.3s, -1.3s; }
  .card-actions[data-action-layout="editorial-index"] .card-action:nth-child(3n+1) .a-lead::after{ animation-delay:-4.6s, -2.9s; }
  .card-actions[data-action-layout="editorial-index"] .card-action:nth-child(3n) .a-lead::before{ animation-delay:-3.1s; animation-duration:10.5s; }
  .card-actions[data-action-layout="editorial-index"] .card-action:nth-child(3n+1) .a-lead::before{ animation-delay:-6.2s; animation-duration:8.2s; }
  .card-actions[data-action-layout="editorial-index"] .card-action:is(:hover, :focus-visible, :active) .a-lead::after{ opacity:1; }
  @keyframes ixDrift{ from{ background-position:0 0; } to{ background-position:-200% 0; } }
  @keyframes ixBreathe{ 0%, 100%{ opacity:0.6; } 50%{ opacity:1; } }
  @keyframes ixGlint{ 0%, 62%{ opacity:0; background-position:-40% 0; } 66%{ opacity:0.9; } 78%{ opacity:0.9; } 82%, 100%{ opacity:0; background-position:140% 0; } }
  @media (prefers-reduced-motion: reduce){ .card-actions[data-action-layout="editorial-index"] .a-lead::after{ animation:none !important; opacity:0.85; background-position:0 0; } .card-actions[data-action-layout="editorial-index"] .a-lead::before{ display:none; } }

  /* ---------- EDITORIAL INDEX: COORDINATED HERO CONTROLS ----------
     The contents-page language continues: Reviews/Form (subtle, same
     place) lose their filled disc for a hairline ring, matching the bare
     index icons. The bottom group is set as a colophon — double rule above,
     hairline below and between, letterspaced capitals, Add to Contacts in
     the feature entry's gradient type — and Learn More as a closing entry
     with a dotted leader and ↗. Press: the entries' ink-in wash. */
  :is(.card-hero, .td-photo)[data-side-style="editorial-index"] .card-side-btn .sb-icon,
  :is(.card-hero, .td-photo)[data-side-style="editorial-index"] .card-side-btn:hover .sb-icon{
    background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; border:0;
    box-shadow:inset 0 0 0 1px var(--border-glass-strong);
  }
  :is(.card-hero, .td-photo)[data-side-style="editorial-index"] .card-side-btn:hover .sb-icon,
  :is(.card-hero, .td-photo)[data-side-style="editorial-index"] .card-side-btn:focus-visible .sb-icon,
  :is(.card-hero, .td-photo)[data-side-style="editorial-index"] .card-side-btn:active .sb-icon{ box-shadow:inset 0 0 0 1px var(--accent-violet-500); transform:none; }

  .card-hero[data-bottom-style="editorial-index"] .card-secondary{
    display:grid; grid-template-columns:1fr 1fr; margin:14px 0 0; border-radius:0; overflow:visible; box-shadow:none;
    border-top:3px double var(--border-glass-strong); border-bottom:1px solid var(--border-glass-subtle);
  }
  .card-hero[data-bottom-style="editorial-index"] .card-secondary:hover{ box-shadow:none; transform:none; }
  /* The save pair reads as two index entries: Title Case, the entry type
     size, Add to Contacts in the feature entry's gradient type with its
     gradient rule; Wallet/Share plain. Press: the entries' ink-in wash. */
  .card-hero[data-bottom-style="editorial-index"] .card-secondary-btn,
  .card-hero[data-bottom-style="editorial-index"] .card-secondary-btn:hover{
    position:relative; justify-content:flex-start; gap:10px; min-height:50px; padding:9px 10px 9px 2px; border-radius:0; filter:none; box-shadow:none; color:var(--text-primary);
    font-size:16px; font-weight:700; letter-spacing:-0.01em; line-height:1.2; white-space:nowrap; text-transform:none;
    background:linear-gradient(90deg, var(--surface-glass-hover), transparent 80%) no-repeat 0 0 / 0% 100%;
    transition:background-size .35s ease;
  }
  .card-hero[data-bottom-style="editorial-index"] .card-secondary-btn:active,
  .card-hero[data-bottom-style="editorial-index"] .card-secondary-btn:focus-visible{ background-size:100% 100%; transform:none; }
  @media (hover:hover){ .card-hero[data-bottom-style="editorial-index"] .card-secondary-btn:hover{ background-size:100% 100%; } }
  .card-hero[data-bottom-style="editorial-index"] .card-secondary-btn svg{ flex:none; width:19px; height:19px; stroke:var(--accent-violet-500) !important; }
  .card-hero[data-bottom-style="editorial-index"] .card-secondary-btn:not(.is-share){ background-color:transparent; color:var(--accent-violet-500); }
  .card-hero[data-bottom-style="editorial-index"] .card-secondary-btn:not(.is-share)::after{ content:''; position:absolute; left:0; right:8px; bottom:-1px; height:2px; background:var(--brand-gradient); }
  @supports (-webkit-background-clip:text) or (background-clip:text){
    .card-hero[data-bottom-style="editorial-index"] .card-secondary-btn:not(.is-share){
      background-image:linear-gradient(90deg, var(--surface-glass-hover), transparent 80%), var(--brand-gradient);
      background-size:0% 100%, 100% 100%; background-repeat:no-repeat;
      -webkit-background-clip:padding-box, text; background-clip:padding-box, text; color:transparent;
    }
    .card-hero[data-bottom-style="editorial-index"] .card-secondary-btn:not(.is-share):active,
    .card-hero[data-bottom-style="editorial-index"] .card-secondary-btn:not(.is-share):focus-visible{ background-size:100% 100%, 100% 100%; }
  }
  .card-hero[data-bottom-style="editorial-index"] .card-secondary-btn.is-share{ border-left:1px solid var(--border-glass-subtle); padding-left:14px; }
  @media (max-width:380px){ .card-hero[data-bottom-style="editorial-index"] .card-secondary-btn, .card-hero[data-bottom-style="editorial-index"] .card-secondary-btn:hover{ font-size:15px; gap:8px; } }

  .card-hero[data-bottom-style="editorial-index"] .card-learn-more{
    display:flex; align-items:baseline; gap:12px; margin:2px 0 0; padding:10px 4px 10px 2px; border:0; border-radius:0;
    border-bottom:1px solid var(--border-glass-subtle); text-align:left; font-size:16px; font-weight:700; letter-spacing:-0.01em;
    background:linear-gradient(90deg, var(--surface-glass-hover), transparent 80%) no-repeat 0 0 / 0% 100%;
    transition:background-size .35s ease;
  }
  .card-hero[data-bottom-style="editorial-index"] .card-learn-more:hover{ transform:none; box-shadow:none; }
  .card-hero[data-bottom-style="editorial-index"] .card-learn-more::before{
    content:''; order:2; flex:1 1 18px; min-width:18px; height:0; border-bottom:1.5px dotted var(--border-glass-strong);
  }
  .card-hero[data-bottom-style="editorial-index"] .card-learn-more::after{
    content:''; order:3; flex:none; width:18px; height:18px; align-self:center; background:var(--accent-violet-500); transition:transform .3s ease;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 16 16 8M9.5 8H16v6.5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 16 16 8M9.5 8H16v6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .card-hero[data-bottom-style="editorial-index"] .card-learn-more:active,
  .card-hero[data-bottom-style="editorial-index"] .card-learn-more:focus-visible{ background-size:100% 100%; }
  .card-hero[data-bottom-style="editorial-index"] .card-learn-more:active::before,
  .card-hero[data-bottom-style="editorial-index"] .card-learn-more:focus-visible::before{ border-bottom-style:solid; border-bottom-color:var(--accent-violet-500); }
  .card-hero[data-bottom-style="editorial-index"] .card-learn-more:active::after,
  .card-hero[data-bottom-style="editorial-index"] .card-learn-more:focus-visible::after{ transform:translate(2px,-2px); }
  @media (hover:hover){
    .card-hero[data-bottom-style="editorial-index"] .card-learn-more:hover{ background-size:100% 100%; }
    .card-hero[data-bottom-style="editorial-index"] .card-learn-more:hover::before{ border-bottom-style:solid; border-bottom-color:var(--accent-violet-500); }
  }
  @media (prefers-reduced-motion: reduce){
    .card-hero[data-bottom-style="editorial-index"] .card-secondary-btn,
    .card-hero[data-bottom-style="editorial-index"] .card-learn-more,
    .card-hero[data-bottom-style="editorial-index"] .card-learn-more::after{ transition:none; }
  }

  /* ---------- ACTION STYLE: PASS STACK (mobile-first) ----------
     Overlapping wallet passes, back (first action) to front (last). Each
     pass = strip (icon · label · cue; grows with its label) + a hidden body
     of --ps-body; the next pass's negative margin covers exactly that body,
     so a label can never be hidden and the only tappable area of a pass is
     its own visible strip (later passes paint above earlier ones). Depth:
     back passes are inset a little more per step. Colour: each pass is the
     theme surface tinted by its position along rose -> violet -> cyan, so
     the pile reads as one gradient in light and dark themes. Connect's pass
     follows the global Button Style (themeCss). Phone motion: press lifts a
     pass; the stack "deals" once as it scrolls into view (scroll-driven,
     where supported). prefers-reduced-motion: all of it off, fully settled. */
  .card-actions[data-action-layout="pass-stack"]{
    --ps-body:44px; --ps-front:66px; --ps-step:5px;
    display:flex; flex-direction:column; align-items:stretch; margin-top:24px;
  }
  .card-actions[data-action-layout="pass-stack"] .card-action{
    --t:calc(var(--i) / max(1, var(--n) - 1));
    --ps-c:color-mix(in oklab,
      color-mix(in oklab, var(--accent-rose-500), var(--accent-violet-500) calc(clamp(0, var(--t) * 2, 1) * 100%)),
      var(--accent-cyan-400) calc(clamp(0, var(--t) * 2 - 1, 1) * 100%));
    position:relative; z-index:calc(var(--i) + 1); display:block; overflow:hidden;
    margin:0 calc((var(--n) - 1 - var(--i)) * var(--ps-step)); padding:0 0 var(--ps-body);
    border-radius:18px; text-align:left; color:var(--text-primary);
    background:
      linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 38%),
      color-mix(in oklab, var(--ps-c) 30%, var(--brand-ink-950));
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.14), inset 0 0 0 1px color-mix(in oklab, var(--ps-c) 42%, transparent), 0 -12px 26px -16px rgba(0,0,0,0.55);
    transition:transform .22s cubic-bezier(.2,.8,.2,1);
  }
  .card-actions[data-action-layout="pass-stack"] .card-action + .card-action{ margin-top:calc(-1 * var(--ps-body)); }
  .card-actions[data-action-layout="pass-stack"] .card-action:last-child{ padding-bottom:var(--ps-front); }
  .card-actions[data-action-layout="pass-stack"] .card-action:active{ transform:translateY(-5px); }
  .card-actions[data-action-layout="pass-stack"] .card-action:focus-visible{ outline:none; }
  .card-actions[data-action-layout="pass-stack"] .card-action:focus-visible .ps-strip{ box-shadow:inset 0 0 0 2px var(--accent-cyan-400); border-radius:18px 18px 12px 12px; }
  .card-actions[data-action-layout="pass-stack"] .ps-strip{
    position:relative; z-index:1; display:flex; align-items:center; gap:12px; min-height:54px; padding:9px 16px 9px 12px;
  }
  .card-actions[data-action-layout="pass-stack"] .card-action .a-icon,
  .card-actions[data-action-layout="pass-stack"] .card-action:hover .a-icon{
    flex:none; width:36px; height:36px; border-radius:11px; border:0; transform:none;
    background:rgba(255,255,255,0.12); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.16);
  }
  .card-actions[data-action-layout="pass-stack"] .card-action .a-icon svg{ width:19px; height:19px; }
  .card-actions[data-action-layout="pass-stack"] .card-action .a-label{
    flex:1 1 auto; min-width:0; font-size:16px; font-weight:700; line-height:1.22; letter-spacing:-0.005em;
    overflow-wrap:break-word; word-break:normal; -webkit-hyphens:manual; hyphens:manual;
  }
  .card-actions[data-action-layout="pass-stack"] .ps-go{ flex:none; width:16px; height:16px; opacity:0.6; }
  .card-actions[data-action-layout="pass-stack"] .ps-go svg{ display:block; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
  /* Oversized cropped icon: a watermark that peeks into every strip and is
     seen whole only on the front pass. */
  .card-actions[data-action-layout="pass-stack"] .ps-mark{ position:absolute; right:-22px; top:4px; width:118px; height:118px; opacity:0.13; pointer-events:none; }
  .card-actions[data-action-layout="pass-stack"] .ps-mark svg{ width:100%; height:100%; stroke-width:1.4; }
  .card-actions[data-action-layout="pass-stack"] .card-action:last-child .ps-mark{ top:auto; bottom:-36px; right:-16px; width:128px; height:128px; opacity:0.18; }
  /* Light cards: pastel passes need a firmer edge + shadow to read as layers. */
  body.avatar-border-light-mode .card-actions[data-action-layout="pass-stack"] .card-action{
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.9), inset 0 0 0 1px color-mix(in oklab, var(--ps-c) 55%, transparent), 0 -10px 22px -12px rgba(20,20,40,0.32);
  }

  /* Connect pass (wherever it sits): global Button Style; content follows its text colour. */
  .card-actions[data-action-layout="pass-stack"] .card-action.is-connect{ background:var(--brand-gradient); color:#0A0A16; }
  .card-actions[data-action-layout="pass-stack"] .card-action.is-connect .a-label{
    background:none; -webkit-background-clip:border-box; background-clip:border-box; color:inherit; font-weight:800; font-size:17px;
  }
  .card-actions[data-action-layout="pass-stack"] .card-action.is-connect .a-icon,
  .card-actions[data-action-layout="pass-stack"] .card-action.is-connect:hover .a-icon{ background:rgba(255,255,255,0.28); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.35); }
  .card-actions[data-action-layout="pass-stack"] .card-action.is-connect svg,
  .card-actions[data-action-layout="pass-stack"] .card-action.is-connect:hover svg,
  .card-actions[data-action-layout="pass-stack"] .card-action.is-connect:focus-visible svg{ stroke:currentColor !important; filter:none; }
  .card-actions[data-action-layout="pass-stack"] .card-action.is-connect .ps-mark{ opacity:0.2; }

  /* Optional desktop extra: a hovered pass lifts slightly. */
  @media (hover:hover){
    .card-actions[data-action-layout="pass-stack"] .card-action:hover{ transform:translateY(-3px); }
  }
  /* Phone-first entrance: the stack deals into place once as it scrolls into view. */
  @supports (animation-timeline: view()){
    /* Starts slightly SPREAD (never bunched), so mid-animation a label can
       only be more exposed than at rest — never covered. */
    @keyframes psDeal{ from{ translate:0 calc(var(--i) * 9px); } to{ translate:0 0; } }
    .card-actions[data-action-layout="pass-stack"] .card-action{
      animation:psDeal linear both; animation-timeline:view(); animation-range:entry 0% cover 28%;
    }
  }
  @media (prefers-reduced-motion: reduce){
    .card-actions[data-action-layout="pass-stack"] .card-action{ animation:none; transition:none; }
    .card-actions[data-action-layout="pass-stack"] .card-action:active,
    .card-actions[data-action-layout="pass-stack"] .card-action:hover{ transform:none; }
  }

  /* ---------- ACTION STYLE: ENGRAVED PLATE (exploratory) ----------
     One composed trade card, after 18th-c. engraved tradesmen's cards and
     Victorian visiting cards: a pressed-in plate (the copperplate's plate
     mark), a thick-thin engraved frame with small lozenge corners and a
     keystone, a central axis with actions in mirrored pairs (medallions
     facing the axis), a lone odd item centred ON the axis, and Connect as
     the cartouche. Medallions: double ring with restrained hatching in the
     outer ring only. Wide plates set label beside medallion; narrow plates
     stack them (container query) — labels never shrink.
     Motion: on scroll-in, the frame draws outward, the axis draws down and
     the hatching settles (labels never move/fade); pressing a medallion
     presses it into the plate. Reduced motion: finished static state. */
  .card-actions[data-action-layout="engraved-plate"]{
    --ep-ink:var(--brand-ink-950);
    --ep-bg:linear-gradient(var(--surface-glass), var(--surface-glass)), var(--ep-ink);
    --ep-rule:var(--border-glass-strong);
    --ep-accent:var(--accent-violet-500);
    display:block; position:relative; container-type:inline-size;
    margin-top:24px; padding:30px 18px 28px; border-radius:6px; background:var(--ep-bg);
    box-shadow:inset 0 2px 6px rgba(0,0,0,0.35), inset 0 0 0 1px var(--border-glass-subtle), 0 1px 0 rgba(255,255,255,0.05);
  }
  /* The axis. */
  .card-actions[data-action-layout="engraved-plate"]::before{
    content:''; position:absolute; left:50%; top:30px; bottom:28px; width:1px; margin-left:-0.5px;
    background:linear-gradient(to bottom, transparent, var(--ep-rule) 12%, var(--ep-rule) 88%, transparent);
    transform-origin:top center;
  }
  .card-actions[data-action-layout="engraved-plate"] .ep-frame{ position:absolute; inset:8px; pointer-events:none; border:1.5px solid color-mix(in oklab, var(--ep-accent) 55%, var(--ep-rule)); border-radius:3px; }
  .card-actions[data-action-layout="engraved-plate"] .ep-frame::before{ content:''; position:absolute; inset:3px; border:1px solid var(--ep-rule); border-radius:2px; }
  .card-actions[data-action-layout="engraved-plate"] .ep-c,
  .card-actions[data-action-layout="engraved-plate"] .ep-key,
  .card-actions[data-action-layout="engraved-plate"] .ep-loz{
    position:absolute; width:9px; height:9px; rotate:45deg; background:var(--ep-ink);
    border:1.5px solid color-mix(in oklab, var(--ep-accent) 70%, var(--ep-rule));
  }
  .card-actions[data-action-layout="engraved-plate"] .ep-c.is-tl{ left:-5px; top:-5px; }
  .card-actions[data-action-layout="engraved-plate"] .ep-c.is-tr{ right:-5px; top:-5px; }
  .card-actions[data-action-layout="engraved-plate"] .ep-c.is-bl{ left:-5px; bottom:-5px; }
  .card-actions[data-action-layout="engraved-plate"] .ep-c.is-br{ right:-5px; bottom:-5px; }
  .card-actions[data-action-layout="engraved-plate"] .ep-key{ left:50%; top:-6px; margin-left:-5.5px; width:11px; height:11px; box-shadow:0 0 0 4px var(--ep-ink); }
  .card-actions[data-action-layout="engraved-plate"] .ep-key.is-bottom{ top:auto; bottom:-6px; }

  .card-actions[data-action-layout="engraved-plate"] .ep-row{ position:relative; z-index:1; }
  .card-actions[data-action-layout="engraved-plate"] .ep-row + .ep-row{ margin-top:10px; }
  .card-actions[data-action-layout="engraved-plate"] .ep-row.is-pair{ display:grid; grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr); align-items:center; }
  .card-actions[data-action-layout="engraved-plate"] .ep-loz{ position:relative; justify-self:center; width:8px; height:8px; }

  /* Entries (narrow default: medallion above label, mirrored about the axis). */
  .card-actions[data-action-layout="engraved-plate"] .card-action{
    flex-direction:column; align-items:center; justify-content:center; gap:9px;
    min-height:96px; padding:8px 4px; border-radius:10px; text-align:center; transform:none;
  }
  .card-actions[data-action-layout="engraved-plate"] .card-action:active{ transform:none; }
  .card-actions[data-action-layout="engraved-plate"] .card-action:focus-visible{ outline-offset:2px; }
  .card-actions[data-action-layout="engraved-plate"] .card-action .a-label{
    max-width:100%; font-size:15px; font-weight:600; line-height:1.2; letter-spacing:0.01em;
    overflow-wrap:break-word; word-break:normal; -webkit-hyphens:manual; hyphens:manual;
  }
  /* Medallion: clean centre disc, hatching only in the outer ring, double ring. */
  .card-actions[data-action-layout="engraved-plate"] .card-action .a-icon,
  .card-actions[data-action-layout="engraved-plate"] .card-action:hover .a-icon{
    flex:none; width:48px; height:48px; border:0; border-radius:50%; transform:none;
    background:
      radial-gradient(circle, var(--ep-ink) 0 15.5px, transparent 16px),
      repeating-linear-gradient(135deg, color-mix(in oklab, var(--ep-accent) 22%, transparent) 0 1px, transparent 1px 5px),
      var(--ep-ink);
    box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--ep-accent) 60%, var(--ep-rule)), 0 0 0 3px var(--ep-ink), 0 0 0 4px var(--ep-rule);
    transition:scale .15s ease, box-shadow .15s ease;
  }
  .card-actions[data-action-layout="engraved-plate"] .card-action .a-icon svg{ width:20px; height:20px; }
  .card-actions[data-action-layout="engraved-plate"] .card-action:active .a-icon{
    scale:0.94; box-shadow:inset 0 2px 6px rgba(0,0,0,0.55), inset 0 0 0 1px color-mix(in oklab, var(--ep-accent) 60%, var(--ep-rule)), 0 0 0 3px var(--ep-ink), 0 0 0 4px var(--ep-rule);
  }
  /* Wide plates: label beside medallion, medallions facing the axis. */
  /* >= ~375px phones (plate content >= 290px); narrower plates stay stacked. */
  @container (min-width: 290px){
    .card-actions[data-action-layout="engraved-plate"] .ep-row.is-pair .card-action{ flex-direction:row; justify-content:flex-start; gap:11px; min-height:60px; }
    .card-actions[data-action-layout="engraved-plate"] .ep-row.is-pair .card-action.ep-l{ flex-direction:row-reverse; text-align:right; }
    .card-actions[data-action-layout="engraved-plate"] .ep-row.is-pair .card-action.ep-r{ text-align:left; }
    .card-actions[data-action-layout="engraved-plate"] .ep-row.is-pair .card-action .a-label{ flex:0 1 auto; min-width:0; }
  }
  /* A lone item sits ON the axis; its label gets an opaque backing over the rule. */
  .card-actions[data-action-layout="engraved-plate"] .ep-row.is-solo{ display:flex; justify-content:center; }
  .card-actions[data-action-layout="engraved-plate"] .ep-row.is-solo .card-action{ width:min(100%, 220px); }
  .card-actions[data-action-layout="engraved-plate"] .ep-row.is-solo .a-label{ background:var(--ep-bg); padding:2px 8px; border-radius:4px; }

  /* Connect — the cartouche. */
  .card-actions[data-action-layout="engraved-plate"] .ep-row.is-cartouche{ margin:16px 0; }
  .card-actions[data-action-layout="engraved-plate"] .ep-row.is-cartouche + .ep-row,
  .card-actions[data-action-layout="engraved-plate"] .ep-row + .ep-row.is-cartouche{ margin-top:16px; }
  .card-actions[data-action-layout="engraved-plate"] .card-action.is-connect{
    position:relative; width:100%; min-height:112px; padding:18px 14px 16px; gap:11px; border-radius:4px;
    background:var(--ep-bg);
    box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--ep-accent) 55%, var(--ep-rule)), inset 0 0 0 4px var(--ep-ink), inset 0 0 0 5px var(--ep-rule);
  }
  .card-actions[data-action-layout="engraved-plate"] .card-action.is-connect::before,
  .card-actions[data-action-layout="engraved-plate"] .card-action.is-connect::after{
    content:''; position:absolute; top:50%; width:9px; height:9px; margin-top:-4.5px; rotate:45deg; background:var(--ep-ink);
    border:1.5px solid color-mix(in oklab, var(--ep-accent) 70%, var(--ep-rule));
  }
  .card-actions[data-action-layout="engraved-plate"] .card-action.is-connect::before{ left:-5px; }
  .card-actions[data-action-layout="engraved-plate"] .card-action.is-connect::after{ right:-5px; }
  /* Resting state only, so a non-gradient global Button Style keeps its own fill on hover/focus. */
  .card-actions[data-action-layout="engraved-plate"] .card-action.is-connect .a-icon{
    width:52px; height:52px; color:#0A0A16; background:var(--brand-gradient);
    box-shadow:0 0 0 3px var(--ep-ink), 0 0 0 4px var(--ep-rule), 0 0 22px -6px var(--accent-violet-glow);
  }
  .card-actions[data-action-layout="engraved-plate"] .card-action.is-connect .a-icon svg,
  .card-actions[data-action-layout="engraved-plate"] .card-action.is-connect:hover .a-icon svg,
  .card-actions[data-action-layout="engraved-plate"] .card-action.is-connect:focus-visible .a-icon svg{ stroke:currentColor !important; filter:none; width:23px; height:23px; }
  .card-actions[data-action-layout="engraved-plate"] .card-action.is-connect .a-label{
    display:flex; align-items:center; justify-content:center; gap:10px; max-width:100%;
    background:none; -webkit-background-clip:border-box; background-clip:border-box; color:var(--text-primary);
    font-size:15px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
  }
  .card-actions[data-action-layout="engraved-plate"] .card-action.is-connect .a-label::before,
  .card-actions[data-action-layout="engraved-plate"] .card-action.is-connect .a-label::after{
    content:''; flex:0 0 18px; height:1px; background:color-mix(in oklab, var(--ep-accent) 70%, var(--ep-rule));
  }

  @supports (animation-timeline: view()){
    .card-actions[data-action-layout="engraved-plate"]{ view-timeline-name:--ep-plate; }
    @keyframes epDraw{ from{ clip-path:inset(0 50% 0 50%); } to{ clip-path:inset(-8px -8px -8px -8px); } }
    @keyframes epAxis{ from{ scale:1 0; } to{ scale:1 1; } }
    @keyframes epHatch{ from{ background-position:0 0, -14px 0, 0 0; } to{ background-position:0 0, 0 0, 0 0; } }
    .card-actions[data-action-layout="engraved-plate"] .ep-frame{ animation:epDraw linear both; animation-timeline:--ep-plate; animation-range:entry 5% cover 32%; }
    .card-actions[data-action-layout="engraved-plate"]::before{ animation:epAxis linear both; animation-timeline:--ep-plate; animation-range:entry 15% cover 40%; }
    .card-actions[data-action-layout="engraved-plate"] .card-action:not(.is-connect) .a-icon{ animation:epHatch linear both; animation-timeline:--ep-plate; animation-range:entry 10% cover 38%; }
  }
  @media (prefers-reduced-motion: reduce){
    .card-actions[data-action-layout="engraved-plate"] .ep-frame,
    .card-actions[data-action-layout="engraved-plate"]::before,
    .card-actions[data-action-layout="engraved-plate"] .card-action .a-icon{ animation:none; transition:none; }
  }
  /* Light cards (themeCss/Studio flag the body): a gentler plate mark. */
  body.avatar-border-light-mode .card-actions[data-action-layout="engraved-plate"]{ box-shadow:inset 0 2px 5px rgba(20,20,40,0.10), inset 0 0 0 1px var(--border-glass-subtle), 0 1px 0 rgba(255,255,255,0.8); }

  /* ---------- PASS STACK: COORDINATED HERO CONTROLS ----------
     Wallet-pass language: Reviews/Form (subtle, same place) become small
     rounded passes tinted from the theme accents (rose / cyan). The bottom
     group is its own little stack: Add to Contacts (global Button Style)
     and Share (tinted) as side-by-side passes whose lower body is covered
     by a full-width Learn More pass — only the bodies overlap, never a
     label, and each pass's tappable area is what's visible. Press = lift. */
  :is(.card-hero, .td-photo)[data-side-style="pass-stack"] .card-side-btn .sb-icon,
  :is(.card-hero, .td-photo)[data-side-style="pass-stack"] .card-side-btn:hover .sb-icon{
    border-radius:17px; border:0;
    background:linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0) 45%), color-mix(in oklab, var(--accent-rose-500) 30%, var(--brand-ink-950));
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.16), inset 0 0 0 1px color-mix(in oklab, var(--accent-rose-500) 45%, transparent), 0 8px 18px -12px rgba(0,0,0,0.6);
  }
  :is(.card-hero, .td-photo)[data-side-style="pass-stack"] .card-side-btn.is-right .sb-icon,
  :is(.card-hero, .td-photo)[data-side-style="pass-stack"] .card-side-btn.is-right:hover .sb-icon{
    background:linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0) 45%), color-mix(in oklab, var(--accent-cyan-400) 30%, var(--brand-ink-950));
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.16), inset 0 0 0 1px color-mix(in oklab, var(--accent-cyan-400) 45%, transparent), 0 8px 18px -12px rgba(0,0,0,0.6);
  }
  :is(.card-hero, .td-photo)[data-side-style="pass-stack"] .card-side-btn:hover .sb-icon{ transform:translateY(-3px); }

  .card-hero[data-bottom-style="pass-stack"] .card-secondary{
    position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:10px;
    margin:24px 0 0; border-radius:0; overflow:visible; box-shadow:none;
  }
  .card-hero[data-bottom-style="pass-stack"] .card-secondary:hover{ box-shadow:none; transform:none; }
  .card-hero[data-bottom-style="pass-stack"] .card-secondary-btn{
    align-items:flex-start; justify-content:flex-start; gap:10px; min-height:84px; padding:13px 14px 34px 12px; border-radius:18px;
    text-align:left; line-height:1.2; font-size:13px; transition:transform .22s cubic-bezier(.2,.8,.2,1);
  }
  .card-hero[data-bottom-style="pass-stack"] .card-secondary-btn:active{ transform:translateY(-4px); }
  .card-hero[data-bottom-style="pass-stack"] .card-secondary-btn svg{
    width:34px; height:34px; padding:8px; margin-top:-7px; box-sizing:border-box; border-radius:11px; background:rgba(255,255,255,0.24);
  }
  .card-hero[data-bottom-style="pass-stack"] .card-secondary-btn:not(.is-share) svg{ stroke:currentColor !important; }
  .card-hero[data-bottom-style="pass-stack"] .card-secondary-btn.is-share{
    border-left:0; color:var(--text-primary);
    background:linear-gradient(160deg, rgba(255,255,255,0.12), rgba(255,255,255,0) 40%), color-mix(in oklab, var(--accent-violet-500) 30%, var(--brand-ink-950));
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.14), inset 0 0 0 1px color-mix(in oklab, var(--accent-violet-500) 42%, transparent);
  }
  .card-hero[data-bottom-style="pass-stack"] .card-secondary-btn.is-share svg{ background:rgba(255,255,255,0.12); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.16); }
  .card-hero[data-bottom-style="pass-stack"] .card-learn-more{
    position:relative; z-index:2; display:flex; align-items:center; min-height:60px; margin:-26px 0 0; padding:14px 46px 14px 18px;
    border:0; border-radius:18px; text-align:left; font-size:15px; font-weight:700;
    background:linear-gradient(160deg, rgba(255,255,255,0.12), rgba(255,255,255,0) 40%), color-mix(in oklab, var(--accent-cyan-400) 30%, var(--brand-ink-950));
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.14), inset 0 0 0 1px color-mix(in oklab, var(--accent-cyan-400) 42%, transparent), 0 -12px 26px -16px rgba(0,0,0,0.6);
    transition:transform .22s cubic-bezier(.2,.8,.2,1);
  }
  .card-hero[data-bottom-style="pass-stack"] .card-learn-more:hover{ transform:none; }
  .card-hero[data-bottom-style="pass-stack"] .card-learn-more:active{ transform:translateY(-4px); }
  .card-hero[data-bottom-style="pass-stack"] .card-learn-more::after{
    content:''; position:absolute; right:18px; top:50%; width:16px; height:16px; margin-top:-8px; opacity:0.7; background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 16 16 8M9.5 8H16v6.5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 16 16 8M9.5 8H16v6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  @media (hover:hover){
    .card-hero[data-bottom-style="pass-stack"] .card-secondary-btn:hover,
    .card-hero[data-bottom-style="pass-stack"] .card-learn-more:hover{ transform:translateY(-3px); }
  }
  @media (prefers-reduced-motion: reduce){
    .card-hero[data-bottom-style="pass-stack"] .card-secondary-btn,
    .card-hero[data-bottom-style="pass-stack"] .card-learn-more{ transition:none; }
    .card-hero[data-bottom-style="pass-stack"] .card-secondary-btn:active,
    .card-hero[data-bottom-style="pass-stack"] .card-secondary-btn:hover,
    .card-hero[data-bottom-style="pass-stack"] .card-learn-more:active,
    .card-hero[data-bottom-style="pass-stack"] .card-learn-more:hover{ transform:none; }
  }

  /* ---------- ACTION STYLE: SEGMENTED BARS (compact, exploratory) ----------
     Recessed trays (.sg-rail) with a thin accent-gradient rim, each holding
     two separate raised keys (icon chip · full-size label · link cue) — keys,
     not tabs: a visible gap between them, every key carries its own cue, and
     nothing is ever shown as "selected". Pairs follow the configured order;
     Connect is a key in the global Button Style wherever it falls; an odd
     total's last key spans its tray. Press: the key sinks into the tray with
     a brief accent edge and springs back on release (transient only). */
  .card-actions[data-action-layout="segmented-bars"],
  :is(.card-hero, .td-photo)[data-side-style="segmented-bars"],
  .card-hero[data-bottom-style="segmented-bars"]{
    --sg-tray:rgba(0,0,0,0.34);
    --sg-rim:linear-gradient(120deg, color-mix(in oklab, var(--accent-rose-500) 55%, transparent), color-mix(in oklab, var(--accent-violet-500) 40%, transparent) 50%, color-mix(in oklab, var(--accent-cyan-400) 55%, transparent));
    --sg-key:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025)), var(--brand-ink-950);
    --sg-key-shadow:inset 0 1px 0 rgba(255,255,255,0.10), 0 1px 2px rgba(0,0,0,0.5);
    --sg-press:inset 0 2px 6px rgba(0,0,0,0.55), inset 0 0 0 1px var(--accent-violet-500);
  }
  body.avatar-border-light-mode .card-actions[data-action-layout="segmented-bars"],
  body.avatar-border-light-mode :is(.card-hero, .td-photo)[data-side-style="segmented-bars"],
  body.avatar-border-light-mode .card-hero[data-bottom-style="segmented-bars"]{
    --sg-tray:rgba(20,20,40,0.07);
    --sg-key:linear-gradient(180deg, #FFFFFF, rgba(255,255,255,0.86));
    --sg-key-shadow:inset 0 -1px 0 rgba(20,20,40,0.06), 0 1px 3px rgba(20,20,40,0.16);
    --sg-press:inset 0 2px 5px rgba(20,20,40,0.18), inset 0 0 0 1px var(--accent-violet-500);
  }
  .card-actions[data-action-layout="segmented-bars"]{ display:flex; flex-direction:column; gap:8px; margin-top:16px; }
  .card-actions[data-action-layout="segmented-bars"] .sg-rail{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:4px; padding:4px; border-radius:17px;
    border:1px solid transparent; background:linear-gradient(var(--sg-tray), var(--sg-tray)) padding-box, var(--sg-rim) border-box;
    box-shadow:inset 0 1px 3px rgba(0,0,0,0.35);
  }
  .card-actions[data-action-layout="segmented-bars"] .sg-rail.is-single{ grid-template-columns:minmax(0,1fr); }
  .card-actions[data-action-layout="segmented-bars"] .card-action{
    flex-direction:row; align-items:center; justify-content:flex-start; gap:9px;
    min-height:50px; padding:7px 10px 7px 7px; border-radius:13px; text-align:left;
    background:var(--sg-key); box-shadow:var(--sg-key-shadow);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .card-actions[data-action-layout="segmented-bars"] .card-action:active{ transform:translateY(1px); box-shadow:var(--sg-press); transition-duration:.05s; }
  .card-actions[data-action-layout="segmented-bars"] .card-action:focus-visible{ outline-offset:1px; }
  .card-actions[data-action-layout="segmented-bars"] .card-action .a-icon,
  .card-actions[data-action-layout="segmented-bars"] .card-action:hover .a-icon{
    flex:none; width:32px; height:32px; border-radius:10px; border:0; transform:none;
    background:var(--surface-glass-hover); box-shadow:inset 0 0 0 1px var(--border-glass-subtle);
  }
  .card-actions[data-action-layout="segmented-bars"] .card-action .a-icon svg{ width:18px; height:18px; }
  /* Labels never break inside a word. Each key is a wrapping row: when the
     label can't sit on one line beside the icon (narrow phones, long
     labels), it drops under the icon, wraps between words, and the key
     grows taller. Where it fits, the layout is exactly the single row it
     was. break-word is only the emergency for one unbroken string (a URL)
     wider than the whole key. */
  .card-actions[data-action-layout="segmented-bars"] .card-action{ position:relative; flex-wrap:wrap; align-content:center; row-gap:6px; padding-right:33px; }
  /* The cue is decorative: pinned to the key's right edge (exactly where it
     sat in the row) so it can never wrap onto a line of its own; on very
     narrow rails it steps aside so the label keeps its room. */
  .card-actions[data-action-layout="segmented-bars"] .a-go{ position:absolute; right:10px; top:50%; margin-top:-7px; }
  .card-actions[data-action-layout="segmented-bars"] .sg-rail{ container-type:inline-size; }
  @container (max-width: 319px){
    .card-actions[data-action-layout="segmented-bars"] .card-action{ padding-right:10px; }
    .card-actions[data-action-layout="segmented-bars"] .a-go{ display:none; }
  }
  .card-actions[data-action-layout="segmented-bars"] .card-action .a-label{
    flex:1 1 auto; min-width:0; max-width:100%; font-size:14.5px; font-weight:650; line-height:1.2;
    overflow-wrap:break-word; word-break:normal; -webkit-hyphens:manual; hyphens:manual;
  }
  .card-actions[data-action-layout="segmented-bars"] .a-go{ flex:none; width:14px; height:14px; opacity:0.45; transition:opacity .2s ease, transform .2s ease; }
  .card-actions[data-action-layout="segmented-bars"] .a-go svg{ display:block; width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; }
  .card-actions[data-action-layout="segmented-bars"] .card-action:active .a-go{ opacity:1; transform:translateX(2px); }
  @media (hover:hover){
    .card-actions[data-action-layout="segmented-bars"] .card-action:hover .a-go{ opacity:0.9; transform:translateX(2px); }
  }
  /* Connect key — global Button Style; contents follow its text colour. */
  /* Primary keys rise OUT of their tray (overlapping its rim, lifted) rather
     than sitting flush — a flush filled segment would read as "selected". */
  .card-actions[data-action-layout="segmented-bars"] .card-action.is-connect{
    position:relative; z-index:1; margin:-6px -6px -6px 0; min-height:62px; border-radius:15px;
    background:var(--brand-gradient); color:#0A0A16;
    box-shadow:0 8px 18px -8px rgba(0,0,0,0.6), 0 0 22px -6px var(--accent-violet-glow), inset 0 1px 0 rgba(255,255,255,0.3);
  }
  .card-actions[data-action-layout="segmented-bars"] .card-action.is-connect:active{ transform:translateY(2px); }
  /* Lift only toward the tray's outer edges, never into the neighbouring key. */
  .card-actions[data-action-layout="segmented-bars"] .sg-rail > .card-action.is-connect:first-child{ margin:-6px 0 -6px -6px; }
  .card-actions[data-action-layout="segmented-bars"] .sg-rail.is-single > .card-action.is-connect{ margin:-6px; }
  .card-actions[data-action-layout="segmented-bars"] .card-action.is-connect .a-icon{ background:rgba(255,255,255,0.28); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.35); }
  .card-actions[data-action-layout="segmented-bars"] .card-action.is-connect svg,
  .card-actions[data-action-layout="segmented-bars"] .card-action.is-connect:hover svg,
  .card-actions[data-action-layout="segmented-bars"] .card-action.is-connect:focus-visible svg{ stroke:currentColor !important; filter:none; }
  .card-actions[data-action-layout="segmented-bars"] .card-action.is-connect .a-label{
    background:none; -webkit-background-clip:border-box; background-clip:border-box; color:inherit; font-weight:800;
  }
  .card-actions[data-action-layout="segmented-bars"] .card-action.is-connect .a-go{ opacity:0.75; }

  /* Companions. Reviews/Form (subtle, same place): the round icon becomes a
     raised key set in a small tray with the same rim. */
  :is(.card-hero, .td-photo)[data-side-style="segmented-bars"] .card-side-btn .sb-icon,
  :is(.card-hero, .td-photo)[data-side-style="segmented-bars"] .card-side-btn:hover .sb-icon{
    border-radius:16px; border:0; transform:none;
    background:var(--sg-key);
    box-shadow:var(--sg-key-shadow), 0 0 0 4px var(--sg-tray), 0 0 0 5px color-mix(in oklab, var(--accent-violet-500) 35%, transparent);
  }
  :is(.card-hero, .td-photo)[data-side-style="segmented-bars"] .card-side-btn:active .sb-icon{ box-shadow:var(--sg-press), 0 0 0 4px var(--sg-tray), 0 0 0 5px color-mix(in oklab, var(--accent-violet-500) 35%, transparent); }
  /* Bottom group: Add to Contacts + Share as two keys in one tray; Learn
     More as a single-key tray (its key surface is drawn by ::before). */
  .card-hero[data-bottom-style="segmented-bars"] .card-secondary{
    display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:4px; padding:4px; margin:12px 0 0;
    border-radius:17px; overflow:visible; transform:none;
    border:1px solid transparent; background:linear-gradient(var(--sg-tray), var(--sg-tray)) padding-box, var(--sg-rim) border-box;
    box-shadow:inset 0 1px 3px rgba(0,0,0,0.35);
  }
  .card-hero[data-bottom-style="segmented-bars"] .card-secondary:hover{ transform:none; box-shadow:inset 0 1px 3px rgba(0,0,0,0.35); }
  .card-hero[data-bottom-style="segmented-bars"] .card-secondary-btn{
    justify-content:flex-start; gap:9px; min-height:50px; padding:7px 10px 7px 7px; border-radius:13px; text-align:left;
    font-size:12.5px; letter-spacing:0.02em; line-height:1.2; transition:transform .25s ease, box-shadow .25s ease;
  }
  .card-hero[data-bottom-style="segmented-bars"] .card-secondary-btn svg{ width:32px; height:32px; padding:7px; border-radius:10px; box-sizing:border-box; background:rgba(255,255,255,0.26); }
  .card-hero[data-bottom-style="segmented-bars"] .card-secondary-btn:not(.is-share) svg{ stroke:currentColor !important; }
  .card-hero[data-bottom-style="segmented-bars"] .card-secondary-btn:not(.is-share){ position:relative; z-index:1; margin:-6px 0 -6px -6px; min-height:62px; border-radius:15px; }
  .card-hero[data-bottom-style="segmented-bars"] .card-secondary-btn.is-share{ border-left:0; color:var(--text-primary); background:var(--sg-key); box-shadow:var(--sg-key-shadow); }
  .card-hero[data-bottom-style="segmented-bars"] .card-secondary-btn.is-share svg{ background:var(--surface-glass-hover); box-shadow:inset 0 0 0 1px var(--border-glass-subtle); }
  .card-hero[data-bottom-style="segmented-bars"] .card-secondary-btn:active{ transform:translateY(1px); box-shadow:var(--sg-press); transition-duration:.05s; }
  .card-hero[data-bottom-style="segmented-bars"] .card-learn-more{
    position:relative; isolation:isolate; display:flex; align-items:center; min-height:58px; margin:8px 0 0; padding:4px 40px 4px 18px;
    border-radius:17px; text-align:left; font-size:14.5px; font-weight:650;
    border:1px solid transparent; background:linear-gradient(var(--sg-tray), var(--sg-tray)) padding-box, var(--sg-rim) border-box;
    box-shadow:inset 0 1px 3px rgba(0,0,0,0.35); transition:none;
  }
  .card-hero[data-bottom-style="segmented-bars"] .card-learn-more:hover{ transform:none; background:linear-gradient(var(--sg-tray), var(--sg-tray)) padding-box, var(--sg-rim) border-box; box-shadow:inset 0 1px 3px rgba(0,0,0,0.35); }
  .card-hero[data-bottom-style="segmented-bars"] .card-learn-more::before{
    content:''; position:absolute; inset:4px; z-index:-1; border-radius:13px; background:var(--sg-key); box-shadow:var(--sg-key-shadow);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .card-hero[data-bottom-style="segmented-bars"] .card-learn-more:active::before{ transform:translateY(1px); box-shadow:var(--sg-press); transition-duration:.05s; }
  .card-hero[data-bottom-style="segmented-bars"] .card-learn-more::after{
    content:''; position:absolute; right:16px; top:50%; width:14px; height:14px; margin-top:-7px; opacity:0.5; background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 16 16 8M9.5 8H16v6.5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 16 16 8M9.5 8H16v6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  @media (prefers-reduced-motion: reduce){
    .card-actions[data-action-layout="segmented-bars"] .card-action,
    .card-actions[data-action-layout="segmented-bars"] .a-go,
    .card-hero[data-bottom-style="segmented-bars"] .card-secondary-btn,
    .card-hero[data-bottom-style="segmented-bars"] .card-learn-more::before{ transition:none; }
    .card-actions[data-action-layout="segmented-bars"] .card-action:active,
    .card-hero[data-bottom-style="segmented-bars"] .card-secondary-btn:active,
    .card-hero[data-bottom-style="segmented-bars"] .card-learn-more:active::before{ transform:none; }
  }

  /* ---------- ACTION STYLE: AXIS (exploratory) ----------
     After Original's own strengths: one centred axis (the photo's), shared
     components, compact rhythm, prominent discs, a single filled accent.
     Two columns either side of a fine axis line continuing down from the
     photo. Every entry reads the SAME way — disc on the left, label on the
     right — so nobody alternates reading direction. Whole entry (disc +
     label) is the target (>=56px tall); a clear static fill shows on
     press, nothing depends on hover or motion. An odd final action sits
     centred on the axis. Reuses Original's entry markup and disc material
     (incl. Connect's filled disc), so Axis is pure composition. */
  .card-actions[data-action-layout="axis"]{
    position:relative; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6px 26px; margin-top:18px;
  }
  .card-actions[data-action-layout="axis"]::before{
    content:''; position:absolute; left:50%; top:2px; bottom:2px; width:1px; margin-left:-0.5px; pointer-events:none;
    background:linear-gradient(to bottom, transparent, var(--border-glass-strong) 12%, var(--border-glass-strong) 88%, transparent);
  }
  .card-actions[data-action-layout="axis"] .card-action{
    flex-direction:row; align-items:center; justify-content:flex-start; gap:12px;
    min-height:56px; padding:4px 8px 4px 4px; border-radius:30px; text-align:left;
    transition:background .15s ease;
  }
  .card-actions[data-action-layout="axis"] .card-action:active{ transform:none; background:var(--surface-glass-hover); }
  .card-actions[data-action-layout="axis"] .card-action:focus-visible{ outline-offset:2px; }
  .card-actions[data-action-layout="axis"] .card-action .a-icon{ flex:none; width:48px; height:48px; }
  .card-actions[data-action-layout="axis"] .card-action:hover .a-icon{ transform:none; }
  .card-actions[data-action-layout="axis"] .card-action .a-icon svg{ width:22px; height:22px; }
  .card-actions[data-action-layout="axis"] .card-action .a-label{
    flex:1 1 auto; min-width:0; font-size:16px; font-weight:650; line-height:1.2; letter-spacing:-0.005em;
    overflow-wrap:break-word; /* only splits a word that can't fit a line on its own */
  }
  /* An odd final action sits centred on the axis (with a backing so the line passes behind it). */
  .card-actions[data-action-layout="axis"] .card-action:last-child:nth-child(odd){
    grid-column:1 / -1; justify-self:center; width:min(100%, 220px); background:var(--brand-ink-950);
  }

  /* Reviews/Form (subtle, same place): a fine hairline ring and the same type scale. */
  :is(.card-hero, .td-photo)[data-side-style="axis"] .card-side-btn .sb-icon{ outline:1px solid var(--border-glass-strong); outline-offset:3px; }
  :is(.card-hero, .td-photo)[data-side-style="axis"] .card-side-btn .sb-label{ font-size:14px; font-weight:650; }
  :is(.card-hero, .td-photo)[data-side-style="axis"] .card-side-btn:active .sb-icon{ background:var(--surface-glass-hover); }

  /* Bottom group, composed with the actions: Add to Contacts is the one
     primary button (global Button Style), full width; Share and Learn More
     are the SAME component as the action entries, a final pair either side
     of the axis — which continues between them. */
  .card-hero[data-bottom-style="axis"] .card-secondary{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:26px; row-gap:10px;
    margin:22px 0 0; border-radius:0; overflow:visible; box-shadow:none; transform:none;
  }
  .card-hero[data-bottom-style="axis"] .card-secondary:hover{ box-shadow:none; transform:none; }
  .card-hero[data-bottom-style="axis"] .card-secondary-btn:not(.is-share){
    grid-column:1 / -1; justify-content:center; gap:12px; min-height:56px; padding:6px 18px 6px 6px; border-radius:30px;
    font-size:16px; font-weight:800; letter-spacing:0; line-height:1.2;
  }
  .card-hero[data-bottom-style="axis"] .card-secondary-btn:not(.is-share) svg{
    width:44px; height:44px; padding:12px; box-sizing:border-box; border-radius:50%; background:rgba(255,255,255,0.28); stroke:currentColor !important;
  }
  .card-hero[data-bottom-style="axis"] .card-secondary-btn:not(.is-share):active{ transform:scale(0.98); }
  .card-hero[data-bottom-style="axis"] .card-secondary-btn.is-share,
  .card-hero[data-bottom-style="axis"] .card-learn-more{
    justify-content:flex-start; align-items:center; gap:12px; min-height:56px; padding:4px 8px 4px 4px; border:0; border-radius:30px;
    background:transparent; box-shadow:none; color:var(--text-primary); text-align:left;
    font-size:16px; font-weight:650; letter-spacing:-0.005em; line-height:1.2; transition:background .15s ease;
  }
  .card-hero[data-bottom-style="axis"] .card-secondary-btn.is-share{ border-left:0; }
  .card-hero[data-bottom-style="axis"] .card-secondary-btn.is-share svg{
    width:48px; height:48px; padding:13px; box-sizing:border-box; border-radius:50%;
    background:var(--surface-glass-hover); box-shadow:0 0 20px -6px var(--accent-violet-glow), inset 0 0 0 1px var(--border-glass-subtle);
  }
  .card-hero[data-bottom-style="axis"] .card-secondary-btn.is-share:hover,
  .card-hero[data-bottom-style="axis"] .card-learn-more:hover{ background:transparent; filter:none; transform:none; box-shadow:none; }
  .card-hero[data-bottom-style="axis"] .card-secondary-btn.is-share:active,
  .card-hero[data-bottom-style="axis"] .card-learn-more:active{ background:var(--surface-glass-hover); transform:none; }
  /* Learn More sits beside Share (right column), its own disc drawn by ::before/::after. */
  .card-hero[data-bottom-style="axis"] .card-learn-more{
    position:relative; display:flex; width:calc(50% - 13px); margin:-56px 0 0 calc(50% + 13px);
  }
  .card-hero[data-bottom-style="axis"] .card-learn-more::before{
    content:''; flex:none; width:48px; height:48px; border-radius:50%;
    background:var(--surface-glass-hover); box-shadow:0 0 20px -6px var(--accent-violet-glow), inset 0 0 0 1px var(--border-glass-subtle);
  }
  .card-hero[data-bottom-style="axis"] .card-learn-more::after{
    content:''; position:absolute; left:17px; top:50%; width:22px; height:22px; margin-top:-11px; background:var(--brand-gradient);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.6v.01'/%3E%3C/svg%3E") center / contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.6v.01'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  /* The axis continues between Share and Learn More. */
  .card-hero[data-bottom-style="axis"] .card-secondary-btn.is-share{ position:relative; overflow:visible; }
  .card-hero[data-bottom-style="axis"] .card-secondary-btn.is-share::after{
    content:''; position:absolute; right:-13.5px; top:8px; bottom:8px; width:1px; background:var(--border-glass-strong); pointer-events:none;
  }
  /* Narrow phones: reclaim width from gaps and padding — never from the
     label size or the 48px disc. */
  @media (max-width:380px){
    .card-actions[data-action-layout="axis"]{ column-gap:16px; }
    .card-actions[data-action-layout="axis"] .card-action{ gap:9px; padding:4px 2px 4px 0; }
    .card-hero[data-bottom-style="axis"] .card-secondary{ column-gap:16px; }
    .card-hero[data-bottom-style="axis"] .card-secondary-btn.is-share,
    .card-hero[data-bottom-style="axis"] .card-learn-more{ gap:9px; padding:4px 2px 4px 0; }
    .card-hero[data-bottom-style="axis"] .card-learn-more{ width:calc(50% - 8px); margin-left:calc(50% + 8px); }
    .card-hero[data-bottom-style="axis"] .card-learn-more::after{ left:13px; }
    .card-hero[data-bottom-style="axis"] .card-secondary-btn.is-share::after{ right:-8.5px; }
  }
  @media (prefers-reduced-motion: reduce){
    .card-actions[data-action-layout="axis"] .card-action,
    .card-hero[data-bottom-style="axis"] .card-secondary-btn,
    .card-hero[data-bottom-style="axis"] .card-learn-more{ transition:none; }
    .card-hero[data-bottom-style="axis"] .card-secondary-btn:not(.is-share):active{ transform:none; }
  }

  /* ---------- ACTION STYLE: ORIGINAL REFINED ----------
     Opt-in via actions.layoutStyle = 'original-refined'. Same markup,
     four-column grid, icon-above-label entries, order and compact height as
     Original; only the material changes: icon discs become soft squircles
     (57px r23 ≈ the optical area of Original's 60px circle) with a
     hairline accent rim, a top highlight and a short contact shadow; labels
     are set a touch lighter and tighter; Connect keeps its gradient but
     gains a detached accent ring. Colours come only from the theme tokens,
     so dark and light themes need no extra rules. No new motion — hover and
     press reuse Original's own lift/press. Coordinated companions:
     data-side-style / data-bottom-style = "original-refined".
     Original — Contact First ('original-contact-first') shares this grid and
     side-button material via :is() (same specificity); its own Connect arc,
     contact tray, Learn More row and divider mark follow the bottom group. */
  .card-actions:is([data-action-layout="original-refined"], [data-action-layout="original-contact-first"]){ --or-rim:color-mix(in srgb, var(--accent-violet-500) 24%, var(--border-glass-strong)); gap:10px 4px; margin-top:14px; }
  .card-actions:is([data-action-layout="original-refined"], [data-action-layout="original-contact-first"]) .card-action{ gap:8px; padding:6px 2px 4px; }
  .card-actions:is([data-action-layout="original-refined"], [data-action-layout="original-contact-first"]) .card-action .a-icon{
    width:57px; height:57px; border-radius:23px; border:0;
    background:linear-gradient(180deg, var(--border-glass-subtle), var(--surface-glass));
    box-shadow:inset 0 0 0 1px var(--or-rim), inset 0 1px 0 rgba(255,255,255,0.10), 0 8px 16px -10px rgba(10,10,22,0.55), 0 0 18px -8px var(--accent-violet-glow);
  }
  .card-actions:is([data-action-layout="original-refined"], [data-action-layout="original-contact-first"]) .card-action:hover .a-icon,
  .card-actions:is([data-action-layout="original-refined"], [data-action-layout="original-contact-first"]) .card-action:focus-visible .a-icon{
    background:linear-gradient(180deg, var(--border-glass-strong), var(--surface-glass-hover));
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent-violet-500) 70%, transparent), inset 0 1px 0 rgba(255,255,255,0.14), 0 10px 20px -10px rgba(10,10,22,0.6), 0 0 26px -4px var(--accent-violet-glow);
  }
  .card-actions:is([data-action-layout="original-refined"], [data-action-layout="original-contact-first"]) .card-action .a-icon svg{ width:24px; height:24px; }
  .card-actions:is([data-action-layout="original-refined"], [data-action-layout="original-contact-first"]) .card-action .a-label{ font-size:13px; font-weight:600; letter-spacing:0.01em; line-height:1.2; text-align:center; }
  .card-actions:is([data-action-layout="original-refined"], [data-action-layout="original-contact-first"]) .card-action:focus-visible{ outline-offset:2px; border-radius:14px; }
  /* Connect: Original's gradient squircle, lifted off the page by a thin
     detached ring (page-colour gap + accent hairline). */
  .card-actions:is([data-action-layout="original-refined"], [data-action-layout="original-contact-first"]) .card-action.is-connect .a-icon{
    background:var(--brand-gradient);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.35), 0 0 0 2.5px var(--brand-ink-950), 0 0 0 4px color-mix(in srgb, var(--accent-violet-500) 65%, transparent), 0 10px 22px -10px var(--accent-violet-glow);
  }
  .card-actions:is([data-action-layout="original-refined"], [data-action-layout="original-contact-first"]) .card-action.is-connect:hover .a-icon,
  .card-actions:is([data-action-layout="original-refined"], [data-action-layout="original-contact-first"]) .card-action.is-connect:focus-visible .a-icon{
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.4), 0 0 0 2.5px var(--brand-ink-950), 0 0 0 4px var(--accent-violet-500), 0 0 30px 2px var(--accent-violet-glow);
  }
  .card-actions:is([data-action-layout="original-refined"], [data-action-layout="original-contact-first"]) .card-action.is-connect .a-label{ font-weight:800; }

  /* Reviews / Form: same squircle material at Original's size and position. */
  .card-hero:is([data-side-style="original-refined"], [data-side-style="original-contact-first"]) .card-side-btn{ gap:8px; }
  .card-hero:is([data-side-style="original-refined"], [data-side-style="original-contact-first"]) .card-side-btn .sb-icon{
    width:57px; height:57px; border-radius:23px; border:0;
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent-violet-500) 24%, var(--border-glass-strong)), inset 0 1px 0 rgba(255,255,255,0.10), 0 8px 16px -10px rgba(10,10,22,0.55), 0 0 18px -8px var(--accent-violet-glow);
  }
  .card-hero:is([data-side-style="original-refined"], [data-side-style="original-contact-first"]) .card-side-btn:hover .sb-icon,
  .card-hero:is([data-side-style="original-refined"], [data-side-style="original-contact-first"]) .card-side-btn:focus-visible .sb-icon{
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent-violet-500) 70%, transparent), inset 0 1px 0 rgba(255,255,255,0.14), 0 10px 20px -10px rgba(10,10,22,0.6), 0 0 26px -4px var(--accent-violet-glow);
  }
  .card-hero:is([data-side-style="original-refined"], [data-side-style="original-contact-first"]) .card-side-btn .sb-icon svg{ width:24px; height:24px; }
  .card-hero:is([data-side-style="original-refined"], [data-side-style="original-contact-first"]) .card-side-btn .sb-label{ font-size:13px; font-weight:600; letter-spacing:0.01em; }
  @media (max-width:380px){
    .card-hero:is([data-side-style="original-refined"], [data-side-style="original-contact-first"]) .card-side-btn .sb-icon{ width:51px; height:51px; border-radius:21px; }
    .card-hero:is([data-side-style="original-refined"], [data-side-style="original-contact-first"]) .card-side-btn .sb-icon svg{ width:21px; height:21px; }
    .card-hero:is([data-side-style="original-refined"], [data-side-style="original-contact-first"]) .card-side-btn .sb-label{ font-size:12px; }
  }

  /* Bottom group: one family. Add to Contacts + Share stay a joined bar
     (the primary keeps the global Button Style — nothing here sets its
     fill, colour or shadow); the bar gets a glass hairline edge and a
     short contact shadow instead of Original's wide bloom; both buttons
     and Learn More share tracked capitals, a 16px radius and the same rim.
     Learn More drops the heavy violet underline for that rim plus an
     accent ↗ cue (it always opens in a new tab). */
  .card-hero[data-bottom-style="original-refined"] .card-secondary{
    position:relative; margin-top:22px; border-radius:16px;
    box-shadow:0 10px 24px -14px rgba(10,10,22,0.6), 0 0 26px -10px var(--accent-violet-glow);
  }
  .card-hero[data-bottom-style="original-refined"] .card-secondary::after{
    content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    box-shadow:inset 0 0 0 1px var(--border-glass-strong), inset 0 1px 0 rgba(255,255,255,0.20);
  }
  .card-hero[data-bottom-style="original-refined"] .card-secondary:hover{ box-shadow:0 12px 28px -14px rgba(10,10,22,0.65), 0 0 34px -6px var(--accent-violet-glow); }
  .card-hero[data-bottom-style="original-refined"] .card-secondary-btn{ min-height:54px; padding:16px 12px; gap:9px; font-size:13px; letter-spacing:0.07em; }
  .card-hero[data-bottom-style="original-refined"] .card-secondary-btn svg{ width:18px; height:18px; }
  .card-hero[data-bottom-style="original-refined"] .card-secondary-btn.is-share{ border-left:0; box-shadow:inset 1px 0 0 var(--border-glass-strong); }
  .card-hero[data-bottom-style="original-refined"] .card-learn-more{
    display:flex; align-items:center; justify-content:center; gap:8px; min-height:50px; box-sizing:border-box;
    margin-top:10px; padding:14px 16px; border-radius:16px; border:0;
    background:linear-gradient(180deg, var(--surface-glass-hover), var(--surface-glass));
    box-shadow:inset 0 0 0 1px var(--border-glass-strong), inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 22px -16px rgba(10,10,22,0.55);
    font-size:13px; font-weight:800; letter-spacing:0.07em; text-transform:uppercase;
  }
  .card-hero[data-bottom-style="original-refined"] .card-learn-more::after{
    content:''; width:14px; height:14px; flex:none; background:var(--brand-gradient);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8.5 7H17v8.5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8.5 7H17v8.5'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .card-hero[data-bottom-style="original-refined"] .card-learn-more:hover,
  .card-hero[data-bottom-style="original-refined"] .card-learn-more:focus-visible{
    background:linear-gradient(180deg, var(--border-glass-subtle), var(--surface-glass-hover));
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent-violet-500) 60%, transparent), inset 0 1px 0 rgba(255,255,255,0.12), 0 0 30px -6px var(--accent-violet-glow);
  }
  /* Only the ↗ moves: a short diagonal up-right nudge, then a long rest, on
     a loop so phones see it without hover. The cue's 14px box is always in
     the flex row and only transform animates, so nothing reflows. The
     button itself never lifts (Original's hover translate is cancelled). */
  .card-hero[data-bottom-style="original-refined"] .card-learn-more,
  .card-hero[data-bottom-style="original-refined"] .card-learn-more:hover,
  .card-hero[data-bottom-style="original-refined"] .card-learn-more:active{ transform:none; }
  .card-hero[data-bottom-style="original-refined"] .card-learn-more::after{ animation:orArrow 2.8s cubic-bezier(.3,.7,.4,1) infinite; will-change:transform; }
  @keyframes orArrow{
    0%, 34%, 100%{ transform:translate(0, 0); }
    12%{ transform:translate(3px, -3px); }
    22%{ transform:translate(0, 0); }
    28%{ transform:translate(1.5px, -1.5px); }
  }
  @media (prefers-reduced-motion: reduce){
    .card-hero[data-bottom-style="original-refined"] .card-learn-more::after{ animation:none; }
  }

  /* ---------- ACTION STYLE: ORIGINAL — CONTACT FIRST ----------
     'original-contact-first'. Grid + Reviews/Form share Original Refined's
     material (see the :is() rules above). Its own pieces:
     · a 180° arc motif (the brand's half-turn), used in exactly two places:
       over Connect's disc and as the hero divider's centre mark;
     · Add to Contacts / Share: two separate raised keys in a recessed tray,
       placed by the renderer between the identity text and the actions;
     · Learn More: an open list row (hairline above, label left, still chip
       right) instead of a filled slab; only the ↗ inside the chip moves —
       one gentle diagonal glide and return, then a long rest. */
  .card-actions[data-action-layout="original-contact-first"] .card-action.is-connect .a-icon{
    position:relative;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.35), 0 10px 22px -10px var(--accent-violet-glow);
  }
  .card-actions[data-action-layout="original-contact-first"] .card-action.is-connect:hover .a-icon,
  .card-actions[data-action-layout="original-contact-first"] .card-action.is-connect:focus-visible .a-icon{
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.4), 0 0 30px 2px var(--accent-violet-glow);
  }
  .card-actions[data-action-layout="original-contact-first"] .card-action.is-connect .a-icon::before{
    content:''; position:absolute; inset:-6px; border-radius:29px; pointer-events:none;
    border:1.5px solid var(--accent-violet-500); border-left-color:var(--accent-rose-500); border-right-color:var(--accent-cyan-400);
    -webkit-mask:linear-gradient(180deg, #000 44%, transparent 50%); mask:linear-gradient(180deg, #000 44%, transparent 50%);
  }

  /* Contact tray (structure, not just colour: recessed tray + raised keys
     with icon chips beside the label, vs the grid's open icon-above-label). */
  .card-hero[data-bottom-style="original-contact-first"] .card-secondary{
    margin:18px 0 0; padding:5px; gap:5px; border-radius:20px; overflow:visible;
    background:var(--surface-glass);
    box-shadow:inset 0 2px 5px rgba(10,10,22,0.38), inset 0 0 0 1px var(--border-glass-subtle), 0 1px 0 rgba(255,255,255,0.05);
  }
  .card-hero[data-bottom-style="original-contact-first"] .card-secondary:hover{
    transform:none; box-shadow:inset 0 2px 5px rgba(10,10,22,0.38), inset 0 0 0 1px var(--border-glass-subtle), 0 1px 0 rgba(255,255,255,0.05);
  }
  .card-hero[data-bottom-style="original-contact-first"] .card-secondary-btn{
    min-height:48px; padding:8px 12px 8px 8px; gap:10px; border-radius:15px;
    font-size:14px; font-weight:700; letter-spacing:0; text-transform:none; white-space:nowrap;
  }
  .card-hero[data-bottom-style="original-contact-first"] .card-secondary-btn svg{
    width:30px; height:30px; padding:6px; box-sizing:border-box; border-radius:50%;
    background:rgba(10,10,22,0.12); box-shadow:inset 0 0 0 1px rgba(10,10,22,0.10);
  }
  .card-hero[data-bottom-style="original-contact-first"] .card-secondary-btn.is-share{
    border-left:0;
    box-shadow:inset 0 0 0 1px var(--border-glass-strong), inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 10px -6px rgba(10,10,22,0.6);
  }
  .card-hero[data-bottom-style="original-contact-first"] .card-secondary-btn.is-share svg{
    background:var(--surface-glass-hover); box-shadow:inset 0 0 0 1px var(--border-glass-subtle);
  }

  /* Learn More: Original Refined's bar and its ↗ nudge (transferred
     2026-10-20), set in Title Case like the rest of this preset. */
  .card-hero[data-bottom-style="original-contact-first"] .card-learn-more{
    display:flex; align-items:center; justify-content:center; gap:8px; min-height:50px; box-sizing:border-box;
    margin-top:10px; padding:14px 16px; border-radius:16px; border:0; transform:none;
    background:linear-gradient(180deg, var(--surface-glass-hover), var(--surface-glass));
    box-shadow:inset 0 0 0 1px var(--border-glass-strong), inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 22px -16px rgba(10,10,22,0.55);
    font-size:14px; font-weight:700; letter-spacing:0; text-transform:none;
  }
  .card-hero[data-bottom-style="original-contact-first"] .card-learn-more::after{
    content:''; width:14px; height:14px; flex:none; background:var(--brand-gradient);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8.5 7H17v8.5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8.5 7H17v8.5'/%3E%3C/svg%3E") center / contain no-repeat;
    animation:orArrow 2.8s cubic-bezier(.3,.7,.4,1) infinite; will-change:transform;
  }
  .card-hero[data-bottom-style="original-contact-first"] .card-learn-more:is(:hover, :active){ transform:none; }
  .card-hero[data-bottom-style="original-contact-first"] .card-learn-more:is(:hover, :focus-visible){
    background:linear-gradient(180deg, var(--border-glass-subtle), var(--surface-glass-hover));
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent-violet-500) 60%, transparent), inset 0 1px 0 rgba(255,255,255,0.12), 0 0 30px -6px var(--accent-violet-glow);
  }

  @media (prefers-reduced-motion: reduce){
    .card-hero[data-bottom-style="original-contact-first"] .card-learn-more::after{ animation:none; }
  }

  /* ---------- HERO DESIGN: THUMB DOCK ----------
     actions.heroDesign = 'thumb-dock' (renderer.js renderThumbDockHero).
     A separate whole-hero composition; the classic hero and its three
     style selectors are untouched. Order: cover · photo · identity ·
     actions · dock (Add to Contacts, Wallet/Share, Reviews, Form, Learn
     More) — the dock below the actions is final. Icons stand on their own (no
     discs); every target >= 44px; labels >= 13px. Theme tokens only. */
  /* The person keeps Original's prominence: the photo is Original's own
     avatar size (--avatar-d) at every width; only the composition around it
     (photo straddling the cover edge, spacing below) is Thumb Dock's. */
  .card-hero[data-hero="thumb-dock"]{ --td-photo:var(--avatar-d); }
  .card-hero[data-hero="thumb-dock"] .td-photo{ display:flex; justify-content:center; margin-top:var(--avatar-pull); position:relative; }
  .card-hero[data-hero="thumb-dock"] .td-photo .card-photo-wrap{ width:var(--td-photo); }
  .card-hero[data-hero="thumb-dock"] h1{ margin-top:12px; }
  .card-hero[data-hero="thumb-dock"] .card-actions[data-action-layout="thumb-dock"]{ grid-template-columns:repeat(4, 1fr); gap:6px 0; margin-top:20px; }
  .card-hero[data-hero="thumb-dock"] .card-actions[data-action-layout="thumb-dock"] .card-action{ justify-content:center; gap:10px; min-height:84px; padding:0 2px; border-radius:16px; }
  .card-hero[data-hero="thumb-dock"] .card-actions[data-action-layout="thumb-dock"] .card-action:active{ transform:none; background:var(--surface-glass-hover); }
  .card-hero[data-hero="thumb-dock"] .card-actions[data-action-layout="thumb-dock"] .card-action .a-icon,
  .card-hero[data-hero="thumb-dock"] .card-actions[data-action-layout="thumb-dock"] .card-action:hover .a-icon,
  .card-hero[data-hero="thumb-dock"] .card-actions[data-action-layout="thumb-dock"] .card-action:focus-visible .a-icon,
  .card-hero[data-hero="thumb-dock"] .card-actions[data-action-layout="thumb-dock"] .card-action.is-connect .a-icon,
  .card-hero[data-hero="thumb-dock"] .card-actions[data-action-layout="thumb-dock"] .card-action.is-connect:hover .a-icon{
    width:auto; height:auto; border-radius:0; border:0; background:none; box-shadow:none; transform:none;
  }
  .card-hero[data-hero="thumb-dock"] .card-actions[data-action-layout="thumb-dock"] .card-action .a-icon svg{ width:28px; height:28px; }
  .card-hero[data-hero="thumb-dock"] .card-actions[data-action-layout="thumb-dock"] .card-action .a-label{ font-size:13px; font-weight:600; line-height:1.15; }
  .card-hero[data-hero="thumb-dock"] .card-actions[data-action-layout="thumb-dock"] .card-action.is-connect .a-label{ font-weight:800; }
  .card-hero[data-hero="thumb-dock"] .card-actions[data-action-layout="thumb-dock"] .card-action:focus-visible{ outline:2px solid var(--accent-cyan-400); outline-offset:2px; }

  .card-hero[data-hero="thumb-dock"] .td-dock{
    margin:20px -8px 0; padding:10px; border-radius:24px; background:var(--surface-glass);
    box-shadow:inset 0 0 0 1px var(--border-glass-subtle), 0 16px 30px -24px rgba(0,0,0,0.8);
  }
  .card-hero[data-hero="thumb-dock"] .td-save{ display:grid; grid-template-columns:1fr auto; gap:8px; }
  .card-hero[data-hero="thumb-dock"] .td-save-primary,
  .card-hero[data-hero="thumb-dock"] .td-save-second{
    display:flex; align-items:center; justify-content:center; gap:9px; min-height:52px; padding:0 16px;
    border-radius:16px; border:0; font-family:inherit; font-size:15px; font-weight:800; line-height:1; white-space:nowrap; cursor:pointer;
  }
  .card-hero[data-hero="thumb-dock"] .td-save-primary{ background:var(--brand-gradient); color:#0A0A16; }
  .card-hero[data-hero="thumb-dock"] .td-save-primary svg{ width:19px; height:19px; stroke:currentColor !important; }
  .card-hero[data-hero="thumb-dock"] .td-save-second{ background:var(--surface-glass-hover); color:var(--text-primary); font-weight:700; box-shadow:inset 0 0 0 1px var(--border-glass-strong); }
  .card-hero[data-hero="thumb-dock"] .td-save-second svg{ width:19px; height:19px; }
  .card-hero[data-hero="thumb-dock"] .td-save-primary:active,
  .card-hero[data-hero="thumb-dock"] .td-save-second:active{ transform:scale(0.98); }
  .card-hero[data-hero="thumb-dock"] .td-util{ display:grid; grid-template-columns:1fr 1fr 1.25fr; margin-top:6px; }
  .card-hero[data-hero="thumb-dock"] .td-u,
  .card-hero[data-hero="thumb-dock"] .td-u.card-learn-more,
  .card-hero[data-hero="thumb-dock"] .td-u.card-learn-more:hover{
    display:flex; align-items:center; justify-content:center; gap:7px; min-height:46px; margin:0; padding:0 4px;
    border:0; border-radius:12px; background:none; transform:none; text-decoration:none;
    color:var(--text-secondary); font-size:13px; font-weight:700; line-height:1.15; box-shadow:none;
  }
  .card-hero[data-hero="thumb-dock"] .td-u{ position:relative; }
  .card-hero[data-hero="thumb-dock"] .td-u + .td-u::before{ content:''; position:absolute; left:0; top:12px; bottom:12px; width:1px; background:var(--border-glass-subtle); }
  .card-hero[data-hero="thumb-dock"] .td-u:focus-visible,
  .card-hero[data-hero="thumb-dock"] .td-save-primary:focus-visible,
  .card-hero[data-hero="thumb-dock"] .td-save-second:focus-visible{ outline:2px solid var(--accent-cyan-400); outline-offset:2px; }
  .card-hero[data-hero="thumb-dock"] .td-u-ic{ display:inline-flex; flex:none; }
  .card-hero[data-hero="thumb-dock"] .td-u-ic svg{ width:20px; height:20px; }
  .card-hero[data-hero="thumb-dock"] .td-arrow{ width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
  @media (max-width:340px){
    .card-hero[data-hero="thumb-dock"] .td-save-primary,
    .card-hero[data-hero="thumb-dock"] .td-save-second{ padding:0 12px; gap:7px; font-size:14px; }
    .card-hero[data-hero="thumb-dock"] .td-util{ grid-template-columns:1fr 1fr; }
    .card-hero[data-hero="thumb-dock"] .td-u.is-learn{ grid-column:1 / -1; }
    .card-hero[data-hero="thumb-dock"] .td-u.is-learn::before{ left:12px; right:12px; top:0; bottom:auto; width:auto; height:1px; }
  }

  /* ---------- HERO DIVIDERS (theme.heroDivider) ----------
     renderer.js renderHeroDivider. 'original' keeps the approved divider
     (no class added). Every other style is .card-hero-divider.is-styled
     .is-<style>, identical in the Classic and Thumb Dock heroes and
     independent of every style choice. Entry animations play once when
     behavior.js adds .is-in; SMIL ribbons are started there too.
     Reduced motion: the finished, static state of each — no sweeps,
     no ambient motion. */
  .card-hero-divider.is-styled{ display:block; position:relative; height:28px; gap:0; }
  .card-hero-divider.is-styled::before, .card-hero-divider.is-styled::after{ display:none; }
  .card-hero-divider.is-styled svg{ animation:none; filter:none; }

  /* Light Seam: defined hairline + restrained glow + one contained sweep. */
  .card-hero-divider.is-seam{ height:24px; }
  .card-hero-divider.is-seam .hs-line, .card-hero-divider.is-seam .hs-shadow, .card-hero-divider.is-seam .hs-track{ position:absolute; left:7%; right:7%; height:1px; }
  .card-hero-divider.is-seam .hs-line{ top:11px; background:linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--accent-violet-500) 45%, transparent) 14%, color-mix(in srgb, var(--accent-violet-500) 95%, transparent) 40%, color-mix(in srgb, var(--accent-cyan-400) 95%, transparent) 60%, color-mix(in srgb, var(--accent-cyan-400) 45%, transparent) 86%, transparent 100%); }
  .card-hero-divider.is-seam .hs-shadow{ top:12px; background:linear-gradient(90deg, transparent, rgba(0,0,0,0.45) 30%, rgba(0,0,0,0.45) 70%, transparent); }
  .card-hero-divider.is-seam .hs-glow{ position:absolute; left:28%; right:28%; top:6px; height:11px; border-radius:50%; background:radial-gradient(ellipse at center, color-mix(in srgb, var(--accent-violet-500) 22%, transparent), transparent 72%); }
  .card-hero-divider.is-seam .hs-track{ top:9px; height:5px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
  .card-hero-divider.is-seam .hs-sweep{ position:absolute; left:0; top:0; width:28%; height:5px; opacity:0; transform:translateX(-100%); will-change:transform, opacity;
    background:radial-gradient(ellipse 50% 50% at center, rgba(255,255,255,0.95), rgba(255,255,255,0.35) 45%, transparent 75%); }
  .card-hero-divider.is-seam.is-in .hs-sweep{ animation:hsSweep 2.4s cubic-bezier(.45,.05,.3,1) 0.25s 1 both; }
  @keyframes hsSweep{ 0%{ transform:translateX(-100%); opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ transform:translateX(357%); opacity:0; } }

  /* Half-turn: two halves of one circle, offset 5px; they draw in. */
  .card-hero-divider.is-halfturn{ display:flex; align-items:center; justify-content:center; height:30px; }
  .card-hero-divider.is-halfturn svg{ width:48px; height:29px; }
  .card-hero-divider.is-halfturn .hh-arc{ fill:none; stroke-width:1.2; stroke-linecap:round; stroke-dasharray:30; stroke-dashoffset:30; }
  .card-hero-divider.is-halfturn.is-in .hh-a{ animation:hhDraw 0.8s cubic-bezier(.45,0,.25,1) 1 both; }
  .card-hero-divider.is-halfturn.is-in .hh-b{ animation:hhDraw 0.8s cubic-bezier(.45,0,.25,1) 0.28s 1 both; }
  @keyframes hhDraw{ from{ stroke-dashoffset:30; } to{ stroke-dashoffset:0; } }

  /* Shared centre mark + glow (Hybrid, Refraction Centre). */
  .card-hero-divider.is-styled .hd-glow{ position:absolute; left:50%; top:4px; width:60px; height:20px; margin-left:-30px; border-radius:50%; opacity:0.35;
    background:radial-gradient(ellipse at center, color-mix(in srgb, var(--accent-violet-500) 40%, transparent), transparent 70%); }
  .card-hero-divider.is-styled .hd-centre{ position:absolute; left:50%; top:2px; width:40px; height:24px; margin-left:-20px; }
  .card-hero-divider.is-styled .hd-centre svg{ display:block; overflow:visible; width:40px; height:24px; }
  .card-hero-divider.is-styled .hd-centre path, .card-hero-divider.is-styled .hd-centre circle{ fill:none; stroke:url(#iconGrad); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
  .card-hero-divider.is-styled.is-in .hd-glow{ animation:hdGlow 1.6s ease-out 0.75s 1 both; }
  @keyframes hdGlow{ 0%{ opacity:0.35; } 25%{ opacity:1; } 100%{ opacity:0.35; } }
  /* Centre: 180° Half-turn — one deliberate eased half turn. */
  .card-hero-divider.is-styled[data-centre="half-turn"] .hd-turn{ transform-box:view-box; transform-origin:20px 12px; }
  .card-hero-divider.is-styled[data-centre="half-turn"].is-in .hd-turn{ animation:hdTurn 0.95s cubic-bezier(.65,0,.3,1) 0.2s 1 both; }
  @keyframes hdTurn{ from{ transform:rotate(0deg); } to{ transform:rotate(180deg); } }
  /* Centre: Breathing Checkmark — ring and tick draw in. (The breathing
     itself runs only in Hybrid; in Refraction Centre the ribbon carries the
     single ambient motion.) */
  .card-hero-divider.is-styled[data-centre="check"] .hd-ring{ stroke-dasharray:57; stroke-dashoffset:0; }
  .card-hero-divider.is-styled[data-centre="check"] .hd-tick{ stroke-dasharray:14; stroke-dashoffset:0; }
  .card-hero-divider.is-styled[data-centre="check"] .hd-breath{ transform-box:view-box; transform-origin:20px 12px; }
  .card-hero-divider.is-styled[data-centre="check"].is-in .hd-ring{ animation:hdDraw57 0.6s cubic-bezier(.45,0,.25,1) 0.1s 1 both; }
  .card-hero-divider.is-styled[data-centre="check"].is-in .hd-tick{ animation:hdDraw14 0.4s cubic-bezier(.45,0,.25,1) 0.5s 1 both; }
  @keyframes hdDraw57{ from{ stroke-dashoffset:57; } to{ stroke-dashoffset:0; } }
  @keyframes hdDraw14{ from{ stroke-dashoffset:14; } to{ stroke-dashoffset:0; } }

  /* Hybrid seam: tapered hairlines; light travels outward after the centre. */
  .card-hero-divider.is-hybrid{ --hd-light-delay:0.95s; }
  .card-hero-divider.is-hybrid[data-centre="check"]{ --hd-light-delay:0.9s; }
  .card-hero-divider.is-hybrid .hd-line, .card-hero-divider.is-hybrid .hd-track{ position:absolute; height:1px; top:14px; }
  .card-hero-divider.is-hybrid .is-l{ left:7%; right:calc(50% + 24px); }
  .card-hero-divider.is-hybrid .is-r{ left:calc(50% + 24px); right:7%; }
  .card-hero-divider.is-hybrid .hd-line.is-l{ background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-violet-500) 85%, transparent)); }
  .card-hero-divider.is-hybrid .hd-line.is-r{ background:linear-gradient(90deg, color-mix(in srgb, var(--accent-cyan-400) 85%, transparent), transparent); }
  .card-hero-divider.is-hybrid .hd-track{ top:12px; height:5px; overflow:hidden; }
  .card-hero-divider.is-hybrid .hd-track.is-l{ -webkit-mask-image:linear-gradient(90deg, transparent, #000 30%); mask-image:linear-gradient(90deg, transparent, #000 30%); }
  .card-hero-divider.is-hybrid .hd-track.is-r{ -webkit-mask-image:linear-gradient(90deg, #000 70%, transparent); mask-image:linear-gradient(90deg, #000 70%, transparent); }
  .card-hero-divider.is-hybrid .hd-sweep{ position:absolute; top:0; width:34%; height:5px; opacity:0; will-change:transform, opacity;
    background:radial-gradient(ellipse 50% 50% at center, rgba(255,255,255,0.95), rgba(255,255,255,0.3) 45%, transparent 75%); }
  .card-hero-divider.is-hybrid .hd-track.is-l .hd-sweep{ right:0; }
  .card-hero-divider.is-hybrid .hd-track.is-r .hd-sweep{ left:0; }
  .card-hero-divider.is-hybrid.is-in .hd-glow{ animation-delay:calc(var(--hd-light-delay) - 0.2s); }
  .card-hero-divider.is-hybrid.is-in .hd-track.is-l .hd-sweep{ animation:hdOutL 1.3s cubic-bezier(.3,.6,.25,1) var(--hd-light-delay) 1 both; }
  .card-hero-divider.is-hybrid.is-in .hd-track.is-r .hd-sweep{ animation:hdOutR 1.3s cubic-bezier(.3,.6,.25,1) var(--hd-light-delay) 1 both; }
  @keyframes hdOutL{ 0%{ transform:translateX(0); opacity:0; } 10%{ opacity:1; } 85%{ opacity:0.9; } 100%{ transform:translateX(-200%); opacity:0; } }
  @keyframes hdOutR{ 0%{ transform:translateX(0); opacity:0; } 10%{ opacity:1; } 85%{ opacity:0.9; } 100%{ transform:translateX(200%); opacity:0; } }
  .card-hero-divider.is-hybrid[data-centre="check"].is-in .hd-breath{ animation:hdBreath 4.8s ease-in-out 2.3s infinite; }
  .card-hero-divider.is-hybrid[data-centre="check"].is-in .hd-line{ animation:hdLineBreath 4.8s ease-in-out 2.3s infinite; }
  @keyframes hdBreath{ 0%, 100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }
  @keyframes hdLineBreath{ 0%, 100%{ opacity:0.8; } 50%{ opacity:1; } }

  /* Refraction (Ambient) + Refraction Centre ribbons (SVG; SMIL motion). */
  .card-hero-divider.is-refraction, .card-hero-divider.is-refraction-centre{ height:30px; }
  .card-hero-divider .hd-ribbon{ position:absolute; top:0; height:30px; overflow:visible; }
  .card-hero-divider.is-refraction .hd-ribbon{ left:0; width:100%; }
  .card-hero-divider.is-refraction-centre .hd-ribbon.is-l{ left:3%; width:calc(47% - 30px); }
  .card-hero-divider.is-refraction-centre .hd-ribbon.is-r{ right:3%; width:calc(47% - 30px); }
  .card-hero-divider .hd-rf-main, .card-hero-divider .hd-rf-split, .card-hero-divider .hd-rf-drift{ fill:none; }
  .card-hero-divider .hd-rf-main{ stroke-width:1; }
  .card-hero-divider .hd-rf-split{ stroke-width:0.7; }
  .card-hero-divider .hd-rf-drift{ stroke-width:1.4; }
  .card-hero-divider.is-refraction-centre .hd-centre{ top:3px; }
  .card-hero-divider.is-refraction .hd-rf-glow{ position:absolute; left:50%; top:6px; width:120px; height:18px; margin-left:-60px; border-radius:50%; opacity:0.3;
    background:radial-gradient(ellipse at center, color-mix(in srgb, var(--accent-violet-500) 30%, transparent), transparent 70%); }
  .card-hero-divider.is-refraction.is-in .hd-rf-glow{ animation:hdRfGlow 1.5s cubic-bezier(.42,0,.28,1) 1 both; }
  @keyframes hdRfGlow{ 0%{ opacity:0; } 45%{ opacity:0.9; } 100%{ opacity:0.3; } }

  @media (prefers-reduced-motion: reduce){
    .card-hero-divider.is-styled *{ animation:none !important; transition:none !important; }
    .card-hero-divider.is-styled .hs-sweep, .card-hero-divider.is-styled .hd-sweep, .card-hero-divider.is-styled .hd-rf-split, .card-hero-divider.is-styled .hd-rf-drift{ display:none; }
    .card-hero-divider.is-halfturn .hh-arc{ stroke-dashoffset:0; }
    .card-hero-divider.is-refraction-centre .hd-rf-main{ opacity:1; }
  }

  /* Profile-side buttons (Thumb Dock + Halo): the Halo side-button finish;
     on Cosmic they match the orbit's stations (no outer ring at rest). */

  /* Cosmic, mobile-first finish: what was the hover state is the resting
     state (phones have no hover) — the violet edge ring, outer glow, full
     rim and the bright glyph colour — for every station and the profile-side
     buttons. The passing-light highlights still play on top. Dark labels are
     crisp white. (Light themes override the materials in themeCss.) */
  /* Resting finish softened 2026-10-22: lower top highlight and sheen, a
     quieter rim and violet ring, a tighter outer glow — depth (the drop
     shadow) kept, so the coloured glyph leads. */
  .card-actions[data-action-layout="halo"][data-halo-variant="orbit-cosmos"] .card-action:not(.is-hub) .a-icon, .td-photo[data-halo-variant="orbit-cosmos"] .card-side-btn.is-profile .sb-icon{
    --halo-sheen:radial-gradient(60% 46% at 32% 14%, color-mix(in oklab, var(--text-primary) 6%, transparent) 0%, transparent 72%); }
  .card-actions[data-action-layout="halo"][data-halo-variant="orbit-cosmos"] .card-action:not(.is-hub) .a-icon{ color:var(--text-primary);
    box-shadow:inset 0 1px 0 color-mix(in oklab, var(--text-primary) 14%, transparent), inset 0 0 0 1px color-mix(in oklab, var(--accent-violet-500) 42%, transparent), var(--halo-depth), 0 0 14px -7px var(--accent-violet-glow); }
  .card-actions[data-action-layout="halo"][data-halo-variant="orbit-cosmos"] .card-action:not(.is-hub) .a-icon::before, .td-photo[data-halo-variant="orbit-cosmos"] .card-side-btn.is-profile .sb-icon::before{ opacity:0.55; }
  .td-photo[data-halo-variant="orbit-cosmos"] .card-side-btn.is-profile .sb-icon{ box-shadow:inset 0 1px 0 color-mix(in oklab, var(--text-primary) 14%, transparent), inset 0 0 0 1px color-mix(in oklab, var(--accent-violet-500) 42%, transparent), var(--halo-depth); }
  /* The hover glyph glow at rest (static); the passing light lifts it via the
     opacity-animated .a-shine::before glow. */
  @media (min-width:341px){
    .card-actions[data-action-layout="halo"][data-halo-ring]:not([data-fit]):not([data-halo-form="spine"])[data-halo-variant="orbit-cosmos"] .card-action:not(.is-hub) .a-icon > svg{
      filter:drop-shadow(0 0 2px color-mix(in oklab, var(--accent-violet-500) 60%, transparent)) drop-shadow(0 0 6px color-mix(in oklab, var(--accent-cyan-400) 28%, transparent));
    }
  }
  .card-actions[data-action-layout="halo"][data-halo-variant="orbit-cosmos"] .card-action .a-label{ color:#fff; }

  /* Cosmic upper stars (identity area). Sized and culled by behavior.js;
     hidden until placed, and on narrow screens. */
  .hx-upper{ display:none; position:absolute; left:0; right:0; top:0; height:0; pointer-events:none; }
  @media (min-width:341px){ .hx-upper.is-ready{ display:block; } }
  .hx-upper .hx-star.is-off{ display:none; }

  /* ---------- DIVIDERS: PRISM / PULSE / ETCHED (previews) + EMOJI CENTRES ----------
     All three take a centre from DIVIDER_CENTRES (symbols or emoji).
     Prism: hairlines that fan into three spectral rays at the centre,
     opening once on entry. Pulse: one soft wave crest travels outward on
     entry, then a calm repeat every 7s. Etched: static engraved linework.
     data-centre-motion="static" (and reduced motion / a Static section
     divider) shows every centre finished, without motion. */
  .card-hero-divider.is-prism, .card-hero-divider.is-pulse, .card-hero-divider.is-etched{ height:28px; --dv-line:color-mix(in srgb, var(--text-primary) 30%, transparent); }
  .card-hero-divider.is-prism .dp-line{ position:absolute; top:14px; height:1px; }
  .card-hero-divider.is-prism .dp-line.is-l{ left:7%; right:calc(50% + 26px); background:linear-gradient(90deg, transparent, var(--dv-line)); }
  .card-hero-divider.is-prism .dp-line.is-r{ left:calc(50% + 26px); right:7%; background:linear-gradient(90deg, var(--dv-line), transparent); }
  .card-hero-divider.is-prism .dp-fan{ position:absolute; top:14px; width:30%; height:1px; transition:none; }
  .card-hero-divider.is-prism .dp-fan.is-l{ right:calc(50% + 24px); transform-origin:100% 50%; }
  .card-hero-divider.is-prism .dp-fan.is-r{ left:calc(50% + 24px); transform-origin:0 50%; }
  .card-hero-divider.is-prism .dp-fan i{ position:absolute; left:0; right:0; top:0; height:1px; opacity:0.8; transform-origin:inherit; }
  .card-hero-divider.is-prism .dp-fan.is-l i:nth-child(1){ background:linear-gradient(90deg, transparent, var(--accent-rose-500)); transform:rotate(5deg); }
  .card-hero-divider.is-prism .dp-fan.is-l i:nth-child(2){ background:linear-gradient(90deg, transparent, var(--accent-violet-500)); }
  .card-hero-divider.is-prism .dp-fan.is-l i:nth-child(3){ background:linear-gradient(90deg, transparent, var(--accent-cyan-400)); transform:rotate(-5deg); }
  .card-hero-divider.is-prism .dp-fan.is-r i:nth-child(1){ background:linear-gradient(90deg, var(--accent-rose-500), transparent); transform:rotate(-5deg); }
  .card-hero-divider.is-prism .dp-fan.is-r i:nth-child(2){ background:linear-gradient(90deg, var(--accent-violet-500), transparent); }
  .card-hero-divider.is-prism .dp-fan.is-r i:nth-child(3){ background:linear-gradient(90deg, var(--accent-cyan-400), transparent); transform:rotate(5deg); }
  .card-hero-divider.is-prism:not(.is-in) .dp-fan{ transform:scaleX(0); }
  .card-hero-divider.is-prism.is-in .dp-fan{ animation:dpOpen 1.1s cubic-bezier(.2,.8,.2,1) calc(var(--hd-light-delay, 0.95s) - 0.35s) both; }
  @keyframes dpOpen{ from{ transform:scaleX(0); opacity:0; } to{ transform:scaleX(1); opacity:1; } }

  .card-hero-divider.is-pulse .du-line{ position:absolute; top:6px; height:16px; overflow:visible; background:none; }
  .card-hero-divider.is-pulse .du-line.is-l{ left:7%; right:auto; width:calc(43% - 24px); }
  .card-hero-divider.is-pulse .du-line.is-r{ left:calc(50% + 24px); right:auto; width:calc(43% - 24px); }
  .card-hero-divider.is-pulse .du-line path{ fill:none; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }

  .card-hero-divider.is-etched .hd-glow{ display:none; }
  .card-hero-divider.is-etched .de-rule{ position:absolute; top:11px; height:6px;
    background:linear-gradient(var(--dv-line), var(--dv-line)) top / 100% 1px no-repeat, linear-gradient(var(--dv-line), var(--dv-line)) bottom / 100% 1px no-repeat,
      repeating-linear-gradient(90deg, color-mix(in srgb, var(--text-primary) 20%, transparent) 0 1px, transparent 1px 7px) center / 100% 3px no-repeat; }
  .card-hero-divider.is-etched .de-rule.is-l{ left:6%; right:calc(50% + 21px); -webkit-mask-image:linear-gradient(90deg, transparent, #000 30%); mask-image:linear-gradient(90deg, transparent, #000 30%); }
  .card-hero-divider.is-etched .de-rule.is-r{ left:calc(50% + 21px); right:6%; -webkit-mask-image:linear-gradient(90deg, #000 70%, transparent); mask-image:linear-gradient(90deg, #000 70%, transparent); }
  .card-hero-divider.is-etched .de-term{ position:absolute; top:0.5px; width:5px; height:5px; transform:rotate(45deg); border:1px solid var(--dv-line); background:var(--brand-ink-950); box-sizing:border-box; }
  .card-hero-divider.is-etched .de-rule.is-l .de-term{ right:-2px; }
  .card-hero-divider.is-etched .de-rule.is-r .de-term{ left:-2px; }
  .card-hero-divider.is-etched .de-ring{ position:absolute; left:50%; top:-1px; width:30px; height:30px; margin-left:-15px; border-radius:50%;
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--text-primary) 32%, transparent), 0 0 0 3px var(--brand-ink-950), 0 0 0 4px color-mix(in srgb, var(--text-primary) 13%, transparent); }

  /* Etched: once the centre has settled, colour fills each double hairline
     from the ring out to both edges (and stays). */
  .card-hero-divider.is-etched .de-fill{ position:absolute; inset:0; pointer-events:none; }
  .card-hero-divider.is-etched .de-rule.is-l .de-fill{ background:linear-gradient(90deg, var(--accent-rose-500), var(--accent-violet-500)) top / 100% 1px no-repeat, linear-gradient(90deg, var(--accent-rose-500), var(--accent-violet-500)) bottom / 100% 1px no-repeat; }
  .card-hero-divider.is-etched .de-rule.is-r .de-fill{ background:linear-gradient(90deg, var(--accent-violet-500), var(--accent-cyan-400)) top / 100% 1px no-repeat, linear-gradient(90deg, var(--accent-violet-500), var(--accent-cyan-400)) bottom / 100% 1px no-repeat; }
  .card-hero-divider.is-etched:not(.is-in) .de-rule.is-l .de-fill{ clip-path:inset(0 0 0 100%); }
  .card-hero-divider.is-etched:not(.is-in) .de-rule.is-r .de-fill{ clip-path:inset(0 100% 0 0); }
  .card-hero-divider.is-etched.is-in .de-rule.is-l .de-fill{ animation:deFillL 1.15s cubic-bezier(.3,.6,.2,1) var(--hd-light-delay, 0.95s) both; }
  .card-hero-divider.is-etched.is-in .de-rule.is-r .de-fill{ animation:deFillR 1.15s cubic-bezier(.3,.6,.2,1) var(--hd-light-delay, 0.95s) both; }
  @keyframes deFillL{ from{ clip-path:inset(0 0 0 100%); } to{ clip-path:inset(0 0 0 0); } }
  @keyframes deFillR{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
  .card-hero-divider[data-centre-motion="static"].is-etched .de-fill,
  .card-section-divider[data-motion="static"] .card-hero-divider.is-etched .de-fill{ animation:none !important; clip-path:none !important; }

  /* Custom animated centres: Globe, Diamond, Compass (same drawn-line
     language as the 180° mark and the check). Each settles before the
     divider's lines answer (--hd-light-delay). */
  .card-hero-divider.is-styled[data-centre="globe"]{ --hd-light-delay:1s; }
  .card-hero-divider.is-styled[data-centre="diamond"]{ --hd-light-delay:0.95s; }
  .card-hero-divider.is-styled[data-centre="compass"]{ --hd-light-delay:1.05s; }
  .card-hero-divider.is-styled .hd-centre ellipse{ fill:none; stroke:url(#iconGrad); stroke-width:1.3; }
  .card-hero-divider.is-styled .hd-centre .hg-meridian{ transform-box:fill-box; transform-origin:center; transform:scaleX(0.42); }
  .card-hero-divider.is-styled .hd-centre .hg-lat{ stroke-width:1; opacity:0.7; }
  .card-hero-divider.is-styled[data-centre="globe"].is-in .hg-ring{ stroke-dasharray:57; animation:hdDraw57 .55s cubic-bezier(.45,0,.25,1) .1s both; }
  .card-hero-divider.is-styled[data-centre="globe"].is-in .hg-meridian{ animation:hgSpin .8s cubic-bezier(.5,0,.25,1) .3s both; }
  .card-hero-divider.is-styled[data-centre="globe"].is-in .hg-lat{ animation:hdmFacet .4s ease-out .7s both; }
  @keyframes hgSpin{ 0%{ transform:scaleX(1); } 55%{ transform:scaleX(0.06); } 100%{ transform:scaleX(0.42); } }
  @keyframes hdDraw18{ from{ stroke-dashoffset:18; } to{ stroke-dashoffset:0; } }
  .card-hero-divider.is-styled .hd-centre .hdm-facet{ stroke-width:1; opacity:0.7; }
  .card-hero-divider.is-styled .hd-centre .hdm-glint{ fill:color-mix(in srgb, var(--accent-cyan-400) 55%, #fff); stroke:none; opacity:0.6; transform-box:fill-box; transform-origin:center; }
  .card-hero-divider.is-styled[data-centre="diamond"].is-in .hdm-cut{ stroke-dasharray:50; animation:hdDraw50 .6s cubic-bezier(.45,0,.25,1) .1s both; }
  .card-hero-divider.is-styled[data-centre="diamond"].is-in .hdm-facet{ animation:hdmFacet .35s ease-out .55s both; }
  .card-hero-divider.is-styled[data-centre="diamond"].is-in .hdm-glint{ animation:hdmGlint .7s ease-out .75s both; }
  @keyframes hdDraw50{ from{ stroke-dashoffset:50; } to{ stroke-dashoffset:0; } }
  @keyframes hdmFacet{ from{ opacity:0; } to{ opacity:0.7; } }
  @keyframes hdmGlint{ 0%{ opacity:0; transform:scale(0.2) rotate(-30deg); } 45%{ opacity:1; transform:scale(1.35) rotate(10deg); } 100%{ opacity:0.6; transform:scale(1) rotate(0); } }
  .card-hero-divider.is-styled .hd-centre .hc-ticks{ stroke-width:1; opacity:0.6; }
  .card-hero-divider.is-styled .hd-centre .hc-needle{ transform-box:view-box; transform-origin:20px 12px; transform:rotate(40deg); }
  .card-hero-divider.is-styled .hd-centre .hc-n{ fill:url(#iconGrad); stroke:none; }
  .card-hero-divider.is-styled .hd-centre .hc-s{ fill:color-mix(in srgb, var(--text-primary) 38%, transparent); stroke:none; }
  .card-hero-divider.is-styled .hd-centre .hc-pin{ fill:var(--brand-ink-950); stroke:url(#iconGrad); stroke-width:1; }
  .card-hero-divider.is-styled[data-centre="compass"].is-in .hc-bezel{ stroke-dasharray:57; animation:hdDraw57 .5s cubic-bezier(.45,0,.25,1) .05s both; }
  .card-hero-divider.is-styled[data-centre="compass"].is-in .hc-ticks{ animation:hdmFacet .3s ease-out .4s both; }
  .card-hero-divider.is-styled[data-centre="compass"].is-in .hc-needle{ animation:hcSwing 1s cubic-bezier(.3,.7,.3,1) .3s both; }
  @keyframes hcSwing{ 0%{ transform:rotate(-150deg); } 60%{ transform:rotate(54deg); } 80%{ transform:rotate(34deg); } 100%{ transform:rotate(40deg); } }

  /* More custom centres: Eclipse, Infinity, Beacon, Aperture, Monogram 1E.
     Draws use pathLength="1" (dash 1 → 0). The resting (static) state of
     every element is its finished state; motion lives only under .is-in. */
  .card-hero-divider.is-styled[data-centre="eclipse"]{ --hd-light-delay:1.45s; }
  .card-hero-divider.is-styled[data-centre="infinity"]{ --hd-light-delay:1.05s; }
  .card-hero-divider.is-styled[data-centre="beacon"]{ --hd-light-delay:1s; }
  .card-hero-divider.is-styled[data-centre="aperture"]{ --hd-light-delay:1s; }
  .card-hero-divider.is-styled[data-centre="monogram-1e"]{ --hd-light-delay:1.25s; }
  @keyframes hdDrawU{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
  /* Eclipse */
  .card-hero-divider.is-styled .hd-centre :is(.he-sun, .he-moon, .he-corona){ transform-box:fill-box; transform-origin:center; }
  .card-hero-divider.is-styled .hd-centre .he-sun{ fill:url(#iconGrad); stroke:none; }
  .card-hero-divider.is-styled .hd-centre .he-moon{ fill:var(--brand-ink-950); stroke:none; transform:translateX(-4.6px); }
  .card-hero-divider.is-styled .hd-centre .he-rim{ fill:none; stroke:url(#iconGrad); stroke-width:0.9; opacity:0.9; }
  .card-hero-divider.is-styled .hd-centre .he-corona{ fill:url(#heCoronaG); stroke:none; opacity:0.45; }
  .card-hero-divider.is-styled[data-centre="eclipse"].is-in .he-sun{ animation:heSun .45s cubic-bezier(.2,.8,.3,1) .05s both; }
  .card-hero-divider.is-styled[data-centre="eclipse"].is-in .he-moon{ animation:heShadow 1.45s cubic-bezier(.35,.1,.25,1) .3s both; }
  .card-hero-divider.is-styled[data-centre="eclipse"].is-in .he-corona{ animation:heCoronaPeak 1.2s ease-in-out .7s both; }
  @keyframes heSun{ from{ transform:scale(0.6); opacity:0; } to{ transform:none; opacity:1; } }
  @keyframes heShadow{ 0%{ transform:translateX(17px); } 55%{ transform:translateX(0); } 70%{ transform:translateX(0); } 100%{ transform:translateX(-4.6px); } }
  @keyframes heCoronaPeak{ 0%{ opacity:0; transform:scale(0.85); } 45%{ opacity:1; transform:scale(1.08); } 100%{ opacity:0.45; transform:none; } }
  /* Infinity */
  .card-hero-divider.is-styled .hd-centre .hi-path{ stroke-width:1.45; stroke-linejoin:round; }
  .card-hero-divider.is-styled .hd-centre .hi-run{ stroke:color-mix(in srgb, var(--accent-cyan-400) 45%, #fff); stroke-width:2; stroke-dasharray:0.07 0.93; opacity:0; }
  .card-hero-divider.is-styled[data-centre="infinity"].is-in .hi-path{ stroke-dasharray:1; animation:hdDrawU .8s cubic-bezier(.45,0,.25,1) .05s both; }
  .card-hero-divider.is-styled[data-centre="infinity"].is-in .hi-run{ animation:hiRun .95s cubic-bezier(.4,0,.3,1) .8s both; }
  @keyframes hiRun{ 0%{ stroke-dashoffset:1; opacity:0; } 12%{ opacity:1; } 85%{ opacity:1; } 100%{ stroke-dashoffset:0; opacity:0; } }
  /* Beacon */
  .card-hero-divider.is-styled .hd-centre :is(.hb-core, .hb-glow, .hb-ring, .hb-wave){ transform-box:fill-box; transform-origin:center; }
  .card-hero-divider.is-styled .hd-centre .hb-core{ fill:url(#iconGrad); stroke:none; }
  .card-hero-divider.is-styled .hd-centre .hb-glow{ fill:url(#hbGlowG); stroke:none; opacity:0.9; }
  .card-hero-divider.is-styled .hd-centre .hb-ring.is-1{ opacity:0.7; }
  .card-hero-divider.is-styled .hd-centre .hb-ring.is-2{ opacity:0.35; stroke-width:1; }
  .card-hero-divider.is-styled .hd-centre .hb-wave{ stroke-width:1.1; opacity:0; }
  .card-hero-divider.is-styled[data-centre="beacon"].is-in .hb-core{ animation:hbCore .5s cubic-bezier(.2,.8,.3,1) .05s both; }
  .card-hero-divider.is-styled[data-centre="beacon"].is-in .hb-glow{ animation:hbGlow .9s ease-out .1s both; }
  .card-hero-divider.is-styled[data-centre="beacon"].is-in .hb-wave.is-a{ animation:hbWave 1.35s cubic-bezier(.2,.6,.3,1) .35s both; }
  .card-hero-divider.is-styled[data-centre="beacon"].is-in .hb-wave.is-b{ animation:hbWave 1.35s cubic-bezier(.2,.6,.3,1) 1.2s both, hbWaveCalm 7s cubic-bezier(.2,.6,.3,1) 6s infinite; }
  .card-hero-divider.is-styled[data-centre="beacon"].is-in .hb-ring{ animation:hbRingIn .7s ease-out 1.55s both; }
  @keyframes hbCore{ from{ transform:scale(0.3); opacity:0; } to{ transform:none; opacity:1; } }
  @keyframes hbGlow{ 0%{ opacity:0; transform:scale(0.5); } 60%{ opacity:1; } 100%{ opacity:0.9; transform:none; } }
  @keyframes hbWave{ 0%{ transform:scale(0.25); opacity:0; } 15%{ opacity:0.85; } 100%{ transform:scale(1.3); opacity:0; } }
  @keyframes hbWaveCalm{ 0%{ transform:scale(0.25); opacity:0; } 4%{ opacity:0.55; } 22%{ transform:scale(1.3); opacity:0; } 100%{ transform:scale(1.3); opacity:0; } }
  @keyframes hbRingIn{ from{ opacity:0; } }
  /* Aperture */
  .card-hero-divider.is-styled .hd-centre .ha-blades{ stroke-width:1.1; }
  .card-hero-divider.is-styled .hd-centre .ha-iris{ transform-box:view-box; transform-origin:20px 12px; }
  .card-hero-divider.is-styled[data-centre="aperture"].is-in .ha-bezel{ stroke-dasharray:1; animation:hdDrawU .5s cubic-bezier(.45,0,.25,1) .05s both; }
  .card-hero-divider.is-styled[data-centre="aperture"].is-in .ha-iris{ animation:haOpen .85s cubic-bezier(.3,.7,.2,1) .2s both; }
  @keyframes haOpen{ from{ transform:rotate(-60deg) scale(0.45); opacity:0; } 30%{ opacity:1; } to{ transform:none; opacity:1; } }
  /* Monogram 1E (brand mark) */
  .card-hero-divider.is-styled .hd-centre .hm-mark path{ stroke:url(#hmGradV); stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
  .card-hero-divider.is-styled .hd-centre .hm-sweep{ fill:none; stroke:url(#hmSweepG); stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
  .card-hero-divider.is-styled[data-centre="monogram-1e"].is-in .hm-one{ stroke-dasharray:1; animation:hdDrawU .42s cubic-bezier(.45,0,.25,1) .05s both; }
  .card-hero-divider.is-styled[data-centre="monogram-1e"].is-in .hm-bar.is-1{ stroke-dasharray:1; animation:hdDrawU .3s cubic-bezier(.4,0,.2,1) .42s both; }
  .card-hero-divider.is-styled[data-centre="monogram-1e"].is-in .hm-bar.is-2{ stroke-dasharray:1; animation:hdDrawU .3s cubic-bezier(.4,0,.2,1) .56s both; }
  .card-hero-divider.is-styled[data-centre="monogram-1e"].is-in .hm-bar.is-3{ stroke-dasharray:1; animation:hdDrawU .3s cubic-bezier(.4,0,.2,1) .7s both; }
  /* Every centre symbol ~15% larger (the box keeps its place; lines keep clearance). */
  .card-hero-divider.is-styled .hd-centre{ transform:scale(1.15); transform-origin:50% 50%; }

  /* Half-turn — revised (preview). */
  .card-hero-divider.is-halfturn-v2{ height:30px; }
  .card-hero-divider.is-halfturn-v2 .h2-line{ position:absolute; top:15px; height:1px; }
  .card-hero-divider.is-halfturn-v2 .h2-line.is-l{ left:8%; right:calc(50% + 34px); transform-origin:100% 50%; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-violet-500) 80%, transparent)); }
  .card-hero-divider.is-halfturn-v2 .h2-line.is-r{ left:calc(50% + 34px); right:8%; transform-origin:0 50%; background:linear-gradient(90deg, color-mix(in srgb, var(--accent-cyan-400) 80%, transparent), transparent); }
  .card-hero-divider.is-halfturn-v2 .h2-mark{ position:absolute; left:50%; top:-1px; width:54px; height:32px; margin-left:-27px; }
  .card-hero-divider.is-halfturn-v2 .h2-mark svg{ display:block; overflow:visible; width:54px; height:32px; }
  .card-hero-divider.is-halfturn-v2 .h2-arc{ fill:none; stroke-width:1.45; stroke-linecap:round; }
  .card-hero-divider.is-halfturn-v2 .h2-turn{ transform-box:view-box; transform-origin:20px 12px; transform:rotate(180deg); }
  .card-hero-divider.is-halfturn-v2:not(.is-in) .h2-line{ transform:scaleX(0); }
  .card-hero-divider.is-halfturn-v2.is-in .h2-arc.is-a{ stroke-dasharray:1; animation:hdDrawU .5s cubic-bezier(.45,0,.25,1) .05s both; }
  .card-hero-divider.is-halfturn-v2.is-in .h2-arc.is-b{ stroke-dasharray:1; animation:hdDrawU .5s cubic-bezier(.45,0,.25,1) .3s both; }
  .card-hero-divider.is-halfturn-v2.is-in .h2-dot{ animation:hdmFacet .25s ease-out .7s both; }
  .card-hero-divider.is-halfturn-v2.is-in .h2-turn{ animation:h2Turn .85s cubic-bezier(.65,0,.3,1) .85s both; }
  .card-hero-divider.is-halfturn-v2.is-in .h2-line{ animation:dpOpen .9s cubic-bezier(.2,.8,.2,1) 1.5s both; }
  @keyframes h2Turn{ 0%{ transform:rotate(0deg); } 82%{ transform:rotate(188deg); } 100%{ transform:rotate(180deg); } }
  .card-section-divider[data-motion="static"] .card-hero-divider.is-halfturn-v2 .h2-line{ transform:none; }
  @media (prefers-reduced-motion: reduce){ .card-hero-divider.is-halfturn-v2 .h2-line, .card-hero-divider.is-halfturn-v2:not(.is-in) .h2-line{ transform:none !important; } }

  /* Original and Half-turn with a chosen centre (renderer: chosen only).
     Original keeps its hairlines and flex layout; Half-turn shows the
     centre alone; Half-turn revised keeps its lines, timed to the centre. */
  .card-hero-divider.is-styled.is-original{ display:flex; align-items:center; gap:14px; height:auto; min-height:30px; }
  .card-hero-divider.is-styled.is-original .hd-centre, .card-hero-divider.is-styled.is-halfturn.has-centre .hd-centre{ position:relative; left:auto; top:auto; margin:0; flex:none; }
  .card-hero-divider.is-styled.is-original .hd-glow, .card-hero-divider.is-styled.is-halfturn.has-centre .hd-glow{ top:50%; margin-top:-10px; }
  .card-hero-divider.is-halfturn-v2.has-centre.is-in .h2-line{ animation-delay:var(--hd-light-delay, 0.95s); }
  /* Signal */
  .card-hero-divider.is-styled[data-centre="signal"]{ --hd-light-delay:1.2s; }
  .card-hero-divider.is-styled .hd-centre .hs-core{ fill:url(#iconGrad); stroke:none; }
  .card-hero-divider.is-styled .hd-centre .hs-wave{ transform-box:view-box; transform-origin:20px 12px; }
  .card-hero-divider.is-styled .hd-centre .hs-wave path{ stroke-width:1.3; }
  .card-hero-divider.is-styled .hd-centre .hs-wave.is-1{ opacity:0.9; }
  .card-hero-divider.is-styled .hd-centre .hs-wave.is-2{ opacity:0.45; }
  .card-hero-divider.is-styled[data-centre="signal"].is-in .hs-core{ animation:hbCore .4s cubic-bezier(.2,.8,.3,1) .05s both; }
  .card-hero-divider.is-styled[data-centre="signal"].is-in .hs-wave.is-1{ animation:hsSend1 .55s cubic-bezier(.25,.6,.3,1) .3s 2 both; }
  .card-hero-divider.is-styled[data-centre="signal"].is-in .hs-wave.is-2{ animation:hsSend2 .55s cubic-bezier(.25,.6,.3,1) .45s 2 both; }
  @keyframes hsSend1{ 0%{ transform:scale(0.55); opacity:0; } 35%{ opacity:1; } 100%{ transform:none; opacity:0.9; } }
  @keyframes hsSend2{ 0%{ transform:scale(0.6); opacity:0; } 35%{ opacity:0.8; } 100%{ transform:none; opacity:0.45; } }
  /* Optical sizing. Symbols keep the slight 1.15 lift; the 1E monogram is
     twice that. Emoji are sized one by one (visible glyph mass varies):
     the growth chart stays as it was; the rest are enlarged. */
  .card-hero-divider.is-styled[data-centre="monogram-1e"] .hd-centre{ transform:scale(2.3); }
  .card-hero-divider.is-etched[data-centre="monogram-1e"] .de-ring{ transform:scale(1.3); }
  .card-hero-divider.is-etched[data-centre="monogram-1e"] .de-rule.is-l{ right:calc(50% + 26px); }
  .card-hero-divider.is-etched[data-centre="monogram-1e"] .de-rule.is-r{ left:calc(50% + 26px); }
  .card-hero-divider.is-styled[data-centre^="emoji-"] .hd-centre{ transform:none; }
  .card-hero-divider.is-styled .hd-centre .hd-emoji{ font-size:var(--emoji-size, 30px); line-height:24px; width:auto; min-width:40px; height:24px; }
  .card-hero-divider.is-styled[data-centre="emoji-chart"]{ --emoji-size:21px; }
  .card-hero-divider.is-styled[data-centre="emoji-bulb"]{ --emoji-size:42px; }
  .card-hero-divider.is-styled[data-centre="emoji-handshake"]{ --emoji-size:40px; }
  .card-hero-divider.is-etched[data-centre^="emoji-"]{ --emoji-size:24px; }
  .card-hero-divider.is-etched[data-centre="emoji-chart"]{ --emoji-size:17px; }

  /* Emoji centres: decorative (aria-hidden), entrance pop when animated. */
  .card-hero-divider.is-styled .hd-centre .hd-emoji{ display:block; min-width:40px; height:24px; font-size:var(--emoji-size, 38px); line-height:24px; text-align:center;
    font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; filter:drop-shadow(0 0 6px var(--accent-violet-glow)); }
  .card-hero-divider.is-etched .hd-centre .hd-emoji{ filter:none; }
  .card-hero-divider.is-styled[data-centre^="emoji-"]{ --hd-light-delay:0.7s; }
  .card-hero-divider.is-styled[data-centre^="emoji-"]:not(.is-in) .hd-emoji{ opacity:0; }
  .card-hero-divider.is-styled[data-centre^="emoji-"].is-in .hd-emoji{ animation:hdEmojiPop .8s cubic-bezier(.2,.9,.25,1.25) .15s both; }
  @keyframes hdEmojiPop{ 0%{ transform:scale(0.4) rotate(-12deg); opacity:0; } 60%{ transform:scale(1.12) rotate(4deg); opacity:1; } 100%{ transform:none; opacity:1; } }
  /* Static centre: the finished mark, nothing moves around it. */
  .card-hero-divider[data-centre-motion="static"] .hd-centre *, .card-hero-divider[data-centre-motion="static"] .hd-glow{ animation:none !important; }
  .card-hero-divider[data-centre-motion="static"] .hd-emoji{ opacity:1 !important; transform:none !important; }
  .card-section-divider[data-motion="static"] .card-hero-divider.is-prism .dp-fan{ transform:none; }
    @media (prefers-reduced-motion: reduce){
    .card-hero-divider.is-prism .dp-fan, .card-hero-divider.is-prism:not(.is-in) .dp-fan{ animation:none !important; transform:none !important; }
    .card-hero-divider.is-styled .hd-emoji{ animation:none !important; opacity:1 !important; transform:none !important; }
  }

  /* ---------- SECTION DIVIDERS (module.dividerBefore; optional) ----------
     The card's divider family between two sections. Animated: the same
     entrance as the hero's, played when the divider is mostly in view.
     Static (and reduced motion): the settled divider, no motion at all. */
  .card-section-divider{ padding:6px 22px 2px; }
  .card-section-divider .card-hero-divider{ margin:0; }
  .card-section-divider[data-motion="static"] .card-hero-divider *{ animation:none !important; transition:none !important; }
  .card-section-divider[data-motion="static"] :is(.hs-sweep, .hd-sweep, .hd-rf-split, .hd-rf-drift){ display:none; }
  .card-section-divider[data-motion="static"] .is-halfturn .hh-arc{ stroke-dashoffset:0; }
  .card-section-divider[data-motion="static"] .is-refraction-centre .hd-rf-main{ opacity:1; }
  @media (prefers-reduced-motion: reduce){
    .card-section-divider .card-hero-divider *{ animation:none !important; transition:none !important; }
    .card-section-divider :is(.hs-sweep, .hd-sweep, .hd-rf-split, .hd-rf-drift){ display:none; }
    .card-section-divider .is-halfturn .hh-arc{ stroke-dashoffset:0; }
    .card-section-divider .is-refraction-centre .hd-rf-main{ opacity:1; }
  }

  /* ---------- EXCHANGE (Connect-flagged actions; actions.exchange) ----------
     renderer.js marks the action .is-exchange with data-exchange (current |
     pass-turn) and data-treatment (circle | bare). Only the symbol and the
     visible "Exchange" label change; the link is untouched. Motion is
     transform-only (the footprint never moves); reduced motion = static. */
  .card-action.is-exchange .ex-mark{ display:block; overflow:visible; width:27px; height:27px; }
  .card-action.is-exchange .ex-current path{ fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
  .card-action.is-exchange[data-treatment="circle"] .ex-current path{ stroke:#0A0A16; }
  .card-action.is-exchange[data-treatment="bare"] .ex-current path{ stroke:url(#iconGrad); }
  .card-action.is-exchange .ex-turn{ transform-box:view-box; transform-origin:12px 12px; }
  /* Current: two eased half turns per loop, each followed by stillness. */
  .card-action.is-exchange[data-exchange="current"] .ex-turn{ animation:exTurnTwo 7s cubic-bezier(.65,0,.35,1) 0.8s infinite; }
  @keyframes exTurnTwo{ 0%{ transform:rotate(0deg); } 13%, 50%{ transform:rotate(180deg); } 63%, 100%{ transform:rotate(360deg); } }
  /* Pass & Turn: arrows slide apart (passing), then ONE eased half turn. */
  .card-action.is-exchange[data-exchange="pass-turn"] .ex-turn{ animation:exPassTurn 4.6s cubic-bezier(.65,0,.3,1) 0.8s infinite; }
  .card-action.is-exchange[data-exchange="pass-turn"] .ex-top{ animation:exPassR 4.6s cubic-bezier(.4,0,.2,1) 0.8s infinite; }
  .card-action.is-exchange[data-exchange="pass-turn"] .ex-bot{ animation:exPassL 4.6s cubic-bezier(.4,0,.2,1) 0.8s infinite; }
  @keyframes exPassTurn{ 0%, 7%{ transform:rotate(0deg); } 30%, 100%{ transform:rotate(180deg); } }
  @keyframes exPassR{ 0%{ transform:translateX(0); } 9%{ transform:translateX(1.4px); } 30%, 100%{ transform:translateX(0); } }
  @keyframes exPassL{ 0%{ transform:translateX(0); } 9%{ transform:translateX(-1.4px); } 30%, 100%{ transform:translateX(0); } }
  .card-action.is-exchange[data-exchange="pass-turn"] .ex-pass{ width:29px; height:29px; }
  .card-action.is-exchange:active .a-icon{ transform:scale(0.93); transition:transform .12s ease; }

  /* Treatment: Bare — no disc, in any hero (Classic family: drop the
     gradient disc/squircle Connect normally gets). */
  .card-actions .card-action.is-connect.is-exchange[data-treatment="bare"] .a-icon,
  .card-actions .card-action.is-connect.is-exchange[data-treatment="bare"]:hover .a-icon{ background:none !important; box-shadow:none !important; border:0 !important; }
  .card-actions .card-action.is-connect.is-exchange[data-treatment="bare"] .ex-mark{ width:31px; height:31px; }
  .card-hero[data-hero="thumb-dock"] .card-actions[data-action-layout="thumb-dock"] .card-action.is-exchange[data-treatment="bare"] .ex-mark{ width:31px; height:31px; margin:-1.5px 0; }
  /* Bare on a button that is itself the gradient (Command Tiles, Pass Stack,
     Segmented Bars): a gradient symbol would vanish, so it takes the
     button's own ink, like its label. */
  .card-actions[data-action-layout="pass-stack"] .card-action.is-exchange[data-treatment="bare"] .ex-current path,
  .card-actions[data-action-layout="segmented-bars"] .card-action.is-exchange[data-treatment="bare"] .ex-current path{ stroke:currentColor; }
  .card-actions[data-action-layout="pass-stack"] .card-action.is-exchange[data-treatment="bare"] .ex-pass rect,
  .card-actions[data-action-layout="segmented-bars"] .card-action.is-exchange[data-treatment="bare"] .ex-pass rect{ fill:currentColor; }
  /* Engraved Plate's spaced capitals: keep EXCHANGE on one line. */
  .card-actions[data-action-layout="engraved-plate"] .card-action.is-exchange .a-label{ white-space:nowrap; -webkit-hyphens:manual; hyphens:manual; overflow-wrap:normal; }
  /* Treatment: Circle — in Thumb Dock (whose icons are disc-free) the
     symbol gets Original's gradient Connect disc. The disc keeps the 28px
     icon footprint (negative margins), so the Exchange label stays on the
     same line as Call / Text / Email. */
  .card-hero[data-hero="thumb-dock"] .card-actions[data-action-layout="thumb-dock"] .card-action.is-connect.is-exchange[data-treatment="circle"] .a-icon{
    width:42px !important; height:42px !important; margin:-10px 0 -4px; border-radius:50% !important; display:flex; align-items:center; justify-content:center;
    background:var(--brand-gradient) !important; box-shadow:0 0 18px -4px var(--accent-violet-glow) !important;
  }
  .card-hero[data-hero="thumb-dock"] .card-actions[data-action-layout="thumb-dock"] .card-action.is-exchange[data-treatment="circle"] .ex-mark{ width:23px; height:23px; }
  .card-hero[data-hero="thumb-dock"] .card-actions[data-action-layout="thumb-dock"] .card-action.is-exchange[data-treatment="circle"] .ex-pass{ width:25px; height:25px; }

  /* ---------- THUMB DOCK — CIRCLES (actions.thumbDockStyle 'circles') ----------
     renderer.js renders Original's own action grid here (no layout
     attribute), so the circles are Original's exactly — size, material,
     border, icon treatment, label spacing, states. Only the surrounding
     Thumb Dock composition differs. No rules of its own. */

  @media (prefers-reduced-motion: reduce){
    .card-action.is-exchange .ex-turn, .card-action.is-exchange .ex-top, .card-action.is-exchange .ex-bot{ animation:none !important; }
    .card-action.is-exchange:active .a-icon{ transition:none; }
  }

  .card-secondary{ display:flex; margin-top:26px; border-radius:18px; overflow:hidden; box-shadow:0 0 30px -8px var(--accent-violet-glow); transition:box-shadow .35s ease, transform .35s ease; }
  .card-secondary:hover{ box-shadow:0 0 40px 2px var(--accent-violet-glow), 0 0 70px 8px rgba(255,79,139,0.4); transform:translateY(-2px); }
  .card-secondary-btn{
    display:flex; align-items:center; justify-content:center; gap:9px; padding:19px 10px;
    color:#0A0A16; text-decoration:none; font-size:13.5px; letter-spacing:0.01em; font-weight:800; cursor:pointer;
    background:var(--brand-gradient); border:none; transition:transform .2s ease, box-shadow .35s ease; flex:2.1;
  }
  .card-secondary-btn.is-share{ background:rgba(255,255,255,0.08); color:var(--text-primary); flex:1; border-left:1px solid rgba(0,0,0,0.2); }
  .card-secondary-btn:hover{ filter:brightness(1.08); }
  .card-secondary-btn.is-share:hover{ background:rgba(255,255,255,0.16); }
  .card-secondary-btn:active{ transform:scale(0.97); }
  .card-secondary-btn svg{ width:19px; height:19px; flex-shrink:0; }

  .card-learn-more{
    display:block; text-align:center; margin-top:10px; padding:15px 10px; border-radius:16px;
    background:rgba(255,255,255,0.04); border:1px solid var(--border-glass-subtle);
    color:var(--text-primary); text-decoration:none; font-size:14px; font-weight:700;
    border-bottom:2px solid var(--accent-violet-500);
    transition:box-shadow .35s ease, transform .35s ease, background .35s ease;
  }
  .card-learn-more:hover{
    background:var(--surface-glass-hover); transform:translateY(-2px);
    box-shadow:0 0 34px 1px var(--accent-violet-glow), 0 0 56px 6px rgba(34,198,255,0.3);
  }

  .card-hero-divider{ display:flex; align-items:center; gap:14px; margin-top:26px; }
  .card-hero-divider .line{ flex:1; height:1px; background:var(--border-glass-subtle); }
  .card-hero-divider svg{
    width:30px; height:30px; opacity:1; flex-shrink:0;
    filter:drop-shadow(0 0 8px var(--accent-violet-glow)) drop-shadow(0 0 14px rgba(255,79,139,0.35));
    animation: dividerPulse 3.2s ease-in-out infinite;
  }
  @keyframes dividerPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.14); } }

  /* ---------- SECTION BANDS (visual distinction) ---------- */
  .card-band{ padding:40px 0; }
  .card-band.is-alt{ background:rgba(255,255,255,0.02); border-top:1px solid var(--border-glass-subtle); border-bottom:1px solid var(--border-glass-subtle); }
  .card-eyebrow{ font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent-cyan-400); font-weight:700; }
  .card-band h2{ font-size:clamp(21px,5.5vw,25px); margin-top:8px; }
  .card-band p{ color:var(--text-secondary); font-size:15px; line-height:1.7; margin-top:10px; }
  .card-band-head{ text-align:center; }

  /* ---------- VIDEO (headline, video, description, cta) ---------- */
  .card-video{
    position:relative; border-radius:20px; overflow:hidden; aspect-ratio:16/10; margin-top:18px;
    background:linear-gradient(135deg, rgba(255,79,139,0.18), rgba(139,92,246,0.22), rgba(34,198,255,0.18));
    border:1px solid var(--border-glass-strong); display:flex; align-items:center; justify-content:center;
  }
  .card-video-play{
    width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,0.14); backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,0.3); display:flex; align-items:center; justify-content:center;
  }
  .card-video-play svg{ width:24px; height:24px; margin-left:3px; }
  .card-video-label{
    position:absolute; bottom:14px; left:14px; font-family:'JetBrains Mono', monospace; font-size:11.5px;
    letter-spacing:0.05em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,0.35); padding:6px 10px; border-radius:8px;
  }

  /* ---------- WHY + ABOUT combined ---------- */
  .card-why-quote{ font-size:clamp(19px,5.5vw,23px); font-weight:800; line-height:1.35; margin-top:10px; }
  .card-about-divider{ height:1px; background:var(--border-glass-subtle); margin:22px 0; }

  /* ---------- SERVICES: horizontal scroll ---------- */
  .card-hscroll{
    display:flex; gap:14px; margin-top:18px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:6px; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .card-hscroll::-webkit-scrollbar{ display:none; }
  .card-service-card{
    flex:0 0 78%; scroll-snap-align:start; padding:22px 20px; border-radius:18px;
    background:var(--surface-glass); border:1px solid var(--border-glass-subtle);
  }
  .card-service-card .s-icon{
    width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
    background:var(--brand-gradient-soft); border:1px solid var(--border-glass-strong); margin-bottom:14px;
  }
  .card-service-card .s-icon svg{ width:20px; height:20px; }
  .card-service-card h4{ font-size:16px; color:var(--text-primary); }
  .card-service-card p{ font-size:13.5px; margin-top:6px; color:var(--text-tertiary); line-height:1.55; }
  .card-scroll-hint{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px; font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--text-tertiary); letter-spacing:0.05em; }
  .card-swipe-dot{
    width:8px; height:8px; border-radius:50%; background:var(--brand-gradient);
    animation: swipeBounce 1.3s ease-in-out infinite;
  }
  @keyframes swipeBounce{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(10px); } }

  /* ---------- PROCESS with scroll-fill line ---------- */
  .card-process-list{ display:flex; flex-direction:column; gap:0; margin-top:22px; position:relative; }
  .card-process-track{
    position:absolute; left:17px; top:18px; bottom:18px; width:2px; background:var(--border-glass-subtle); z-index:0;
  }
  .card-process-fill{
    position:absolute; left:17px; top:18px; width:2px; background:var(--brand-gradient); z-index:1;
    height:0%; transition:height .1s linear;
  }
  .card-process-item{ display:flex; gap:14px; padding-bottom:26px; position:relative; z-index:2; }
  .card-process-num{
    width:36px; height:36px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
    font-family:'JetBrains Mono', monospace; font-weight:800; font-size:13px; color:#0A0A16;
    background:var(--brand-gradient);
  }
  .card-process-item h4{ font-size:15px; margin:2px 0 4px; }
  .card-process-item p{ font-size:13.5px; margin:0; color:var(--text-secondary); line-height:1.6; }

  /* ---------- CLIENT LOGOS: card grid, distinct from main site ---------- */
  .card-logo-hscroll{
    display:flex; gap:14px; margin-top:18px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:6px; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .card-logo-hscroll::-webkit-scrollbar{ display:none; }
  .card-logo-card{
    flex:0 0 158px; scroll-snap-align:start; height:106px; border-radius:16px;
    background:#fff; border:1px solid var(--border-glass-subtle);
    display:flex; align-items:center; justify-content:center; padding:16px;
  }
  .card-logo-card img{ max-width:100%; max-height:100%; object-fit:contain; }

  /* client logos auto-scroll to the LEFT at a readable pace, pausing on hover.
     Edges fade out so logos slide in/out cleanly rather than popping. */
  .logo-marquee{
    margin-top:18px; overflow:hidden; position:relative;
    -webkit-mask:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }
  .logo-marquee-track{
    display:flex; width:max-content;
    will-change:transform;
    animation: logoMarquee var(--logo-loop-duration, 24s) linear infinite;
  }
  .logo-marquee-set{
    display:flex; flex:none; width:max-content;
  }
  .logo-marquee-track .card-logo-card{ margin-right:14px; flex:0 0 158px; }
  .logo-marquee:hover .logo-marquee-track{ animation-play-state:paused; }
  @keyframes logoMarquee{
    from{ transform:translate3d(0,0,0); }
    to{ transform:translate3d(var(--logo-loop-distance, -50%),0,0); }
  }

  /* ---------- PLACEHOLDER SECTIONS ---------- */
  .card-placeholder{
    margin-top:18px; padding:34px 20px; text-align:center; border-radius:18px;
    background:var(--surface-glass); border:1px dashed var(--border-glass-strong);
  }
  .card-placeholder svg{ width:28px; height:28px; opacity:0.5; margin-bottom:10px; }
  .card-placeholder .ph-label{ font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-tertiary); }

  .card-ph-slide{
    flex:0 0 84%; scroll-snap-align:start; border-radius:18px; overflow:hidden;
    background:var(--surface-glass); border:1px dashed var(--border-glass-strong);
  }
  .card-ph-video{
    aspect-ratio:16/10; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, rgba(255,79,139,0.14), rgba(139,92,246,0.16), rgba(34,198,255,0.14));
    border-bottom:1px dashed var(--border-glass-strong);
  }
  .card-ph-video svg{ width:26px; height:26px; opacity:0.6; }
  .card-ph-text{ padding:16px 18px; text-align:left; }
  .card-ph-text .ph-label{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-tertiary); }
  .card-ph-bar{ height:9px; border-radius:5px; background:rgba(255,255,255,0.08); margin-top:10px; }
  .card-ph-bar.w-70{ width:70%; } .card-ph-bar.w-45{ width:45%; } .card-ph-bar.w-90{ width:90%; }

  .card-ph-image{
    flex:0 0 60%; scroll-snap-align:start; aspect-ratio:4/5; border-radius:18px;
    background:linear-gradient(135deg, rgba(255,79,139,0.14), rgba(139,92,246,0.16), rgba(34,198,255,0.14));
    border:1px dashed var(--border-glass-strong); display:flex; align-items:center; justify-content:center;
  }
  .card-ph-image svg{ width:26px; height:26px; opacity:0.6; }

  /* ---------- WHY 1EIGHTY GRAPHIC ---------- */
  .card-why-graphic{ display:flex; align-items:center; justify-content:center; gap:22px; margin:20px 0 6px; }
  .card-why-graphic .wg-col{ display:flex; flex-direction:column; align-items:center; gap:8px; }
  .card-why-graphic .wg-label{ font-family:'JetBrains Mono', monospace; font-size:12px; font-weight:700; color:var(--text-tertiary); }
  .card-why-graphic .wg-label.is-active{
    background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .card-why-graphic .wg-arrow{ color:var(--text-tertiary); font-size:20px; }


  /* The .card-resource-list / .card-resource-item rules were removed along with
     the standalone Resources band. The compact .cta-res-links list under the
     final CTA is now the only resources treatment. */

  /* ---------- GUARANTEE (kept) ---------- */
  .card-guarantee{ text-align:center; }
  .card-guarantee .g-figure{ font-size:44px; font-weight:800; margin-top:10px; }
  .card-guarantee .g-sub{ font-family:'JetBrains Mono', monospace; font-size:11.5px; color:var(--text-tertiary); margin-top:2px; }

  .card-calc-cta{ text-align:center; }
  .card-final-cta{ text-align:center; padding:8px 0 6px; }
  .card-final-cta h2{ font-size:clamp(24px,7vw,30px); }
  /* Tight resource shortcuts under the booking button — deliberately compact:
     small caps label sitting close to the rows, rows only 40px tall, minimal
     gaps, so no dead space opens up at the bottom of the card. */
  .cta-resources{ margin-top:14px; text-align:left; }
  .cta-res-head{
    display:block; font-family:'JetBrains Mono',monospace; font-size:10px;
    letter-spacing:.16em; text-transform:uppercase;
    color:var(--accent-cyan-400); margin-bottom:6px; text-align:center;
  }
  .cta-res-links{ display:flex; flex-direction:column; gap:6px; }
  .cta-res-links a{
    display:flex; align-items:center; gap:10px;
    padding:0 12px; min-height:40px;
    border:1px solid var(--border-glass-subtle); border-radius:11px;
    background:var(--surface-glass);
    text-decoration:none; color:var(--text-primary);
    font-size:13px; font-weight:600; line-height:1.2;
    transition:border-color .2s ease, background .2s ease, transform .2s ease;
  }
  .cta-res-links a:hover{
    border-color:rgba(34,211,238,0.45);
    background:rgba(34,211,238,0.07);
    transform:translateY(-1px);
  }
  .cta-res-links a svg{ width:15px; height:15px; flex-shrink:0; }
  .cta-res-links a span{ flex:1; }
  .cta-res-links a em{ font-style:normal; color:var(--accent-cyan-400); font-size:14px; }

  /* ---------- FOOTER (centered) ---------- */
  .card-footer{ padding:16px 0 18px; text-align:center; }
    .card-footer .footer-logo-big{ width:120px; height:auto; margin:0 auto; display:block; cursor:pointer; transition:transform .25s ease, filter .25s ease; }
    .card-footer .footer-logo-big:hover{ transform:translateY(-2px) scale(1.04); filter:drop-shadow(0 0 14px var(--accent-violet-glow)); }
    .card-footer .footer-logo-big:active{ transform:scale(0.97); }
  .card-footer .footer-tagline{ font-size:13.5px; color:var(--text-tertiary); margin-top:12px; }
  .card-footer .footer-contact-line{ margin-top:16px; font-size:13.5px; color:var(--text-secondary); }
  .card-footer .footer-contact-line a{ color:var(--text-secondary); }
  .card-footer .card-legal-links{ margin-top:14px; font-size:12px; }
  .card-footer .card-legal-links a{ color:var(--text-tertiary); margin:0 8px; }

  /* footer social favicons — uniform round glass buttons with a neon hover glow */
  .card-social-btn{
    width:38px; height:38px; border-radius:50%; flex-shrink:0;
    background:var(--surface-glass); border:1px solid var(--border-glass-subtle);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 20px -8px var(--accent-violet-glow);
    transition:box-shadow .3s ease, background .3s ease, transform .3s ease;
  }
  .card-social-btn:hover{
    background:var(--surface-glass-hover); transform:translateY(-2px);
    box-shadow:0 0 26px 1px var(--accent-violet-glow), 0 0 44px 4px rgba(255,79,139,0.35), inset 0 0 0 1px rgba(255,255,255,0.16);
  }

  .toast{
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); opacity:0;
    background:var(--brand-ink-950); border:1px solid var(--border-glass-strong); color:#fff;
    padding:12px 20px; border-radius:999px; font-size:13.5px; font-weight:600; z-index:999;
    transition:opacity .3s ease, transform .3s ease; pointer-events:none; box-shadow:0 10px 30px rgba(0,0,0,0.4);
  }
  .toast.is-visible{ opacity:1; transform:translateX(-50%) translateY(0); }

  /* ---------- IMAGE LIGHTBOX ---------- */
  .js-zoom{ cursor:zoom-in; }
  .lightbox{
    position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
    background:rgba(4,5,10,0.92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    opacity:0; visibility:hidden; transition:opacity .28s ease, visibility .28s ease; padding:24px;
  }
  .lightbox.is-open{ opacity:1; visibility:visible; }
  .lightbox-img{
    max-width:100%; max-height:88vh; border-radius:18px; object-fit:contain;
    box-shadow:0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px var(--border-glass-strong);
    transform:scale(0.94); transition:transform .28s cubic-bezier(.22,1,.36,1); touch-action:pan-y;
    will-change:transform;
  }
  .lightbox.is-open .lightbox-img{ transform:scale(1); }
  .lightbox-close{
    position:absolute; top:18px; right:18px; width:44px; height:44px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2;
    background:rgba(255,255,255,0.10); border:1px solid var(--border-glass-strong); color:var(--text-primary);
    transition:background .25s ease, transform .25s ease;
  }
  .lightbox-close:hover{ background:rgba(255,255,255,0.2); transform:scale(1.06); box-shadow:0 0 24px var(--accent-violet-glow); }
  .lightbox-close svg{ width:20px; height:20px; }
  .lightbox-hint{
    position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
    font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--text-tertiary);
  }

  /* ---------- LEAD FORM (Netlify) ---------- */
  .card-form{ display:flex; flex-direction:column; gap:14px; margin-top:20px; text-align:left; }
  .card-form .field{ display:flex; flex-direction:column; gap:7px; }
  .card-form label{ font-family:'JetBrains Mono', monospace; font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-secondary); font-weight:700; }
  .card-form input, .card-form textarea{
    width:100%; padding:14px 16px; border-radius:12px; font-size:15px; color:var(--text-primary);
    background:rgba(255,255,255,0.04); border:1px solid var(--border-glass-subtle);
    transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
    font-family:'Plus Jakarta Sans', sans-serif;
  }
  .card-form textarea{ resize:vertical; min-height:110px; line-height:1.5; }
  .card-form input::placeholder, .card-form textarea::placeholder{ color:var(--text-tertiary); }
  .card-form input:focus, .card-form textarea:focus{
    outline:none; border-color:var(--accent-violet-500); background:rgba(255,255,255,0.06);
    box-shadow:0 0 0 3px rgba(139,92,246,0.18), 0 0 26px -6px var(--accent-violet-glow);
  }
  .card-form .hp{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }
  .card-form-success{
    margin-top:16px; padding:18px 20px; border-radius:14px; text-align:center;
    background:var(--brand-gradient-soft); border:1px solid var(--border-glass-strong); color:var(--text-primary);
    font-weight:700; font-size:15px;
  }


  /* ---------- POLISH PASS: wider mobile content below hero ---------- */
  .card-secondary,
  .card-learn-more,
  .card-hero-divider{ margin-left:-12px; margin-right:-12px; }
  .card-wrap > section:not(.card-hero),
  .card-wrap > footer{ margin-left:-12px; margin-right:-12px; }

  /* Why 1Eighty intentionally sits farther in from the mobile edge than the
     other widened sections so the quote/body copy has breathing room. */
  .card-why-section{
    margin-left:4px !important; margin-right:4px !important;
    padding-left:14px; padding-right:14px;
  }

  /* Services cards: large enough that the next card/icon is only peeking in. */
  .services-section .card-service-card{ flex-basis:84%; }

  /* Gallery uses real photography with a consistent crop and touch target. */
  .card-gallery-scroll{ gap:12px; }
  .card-gallery-image{
    flex:0 0 86%; scroll-snap-align:start; aspect-ratio:4/3; border:0; padding:0;
    border-radius:18px; overflow:hidden; background:#0A0A16; cursor:pointer;
    box-shadow:inset 0 0 0 1px var(--border-glass-subtle);
  }
  .card-gallery-image img{ width:100%; height:100%; object-fit:cover; display:block; }

  /* Trusted-by: one continuous edge-to-edge white stripe, not individual cards. */
  .trust-180{
    font-weight:900; white-space:nowrap;
    background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text;
    color:transparent; -webkit-text-fill-color:transparent;
  }
  .logo-marquee{
    margin-left:-8px; margin-right:-8px; padding:15px 0; background:#fff;
    -webkit-mask:none; mask:none; border-top:1px solid rgba(0,0,0,.06); border-bottom:1px solid rgba(0,0,0,.06);
  }
  .logo-marquee-track .card-logo-card{
    margin-right:18px; flex:0 0 152px; height:76px; padding:2px 3px; border:0; border-radius:0; background:transparent;
  }
  .logo-marquee-track .card-logo-card img{ max-width:100%; max-height:72px; object-fit:contain; }

  /* Resources sit almost flush with the mobile card edge. */
  .card-final-cta .cta-resources{ margin-left:-4px; margin-right:-4px; }

  /* PHASE 2.6 §5 FIX — ROOT CAUSE of "the side buttons still did not
     move": the Phase 2.5 attempt placed `.card-side-btn{ bottom:14%; }`
     EARLIER in this same file than the ORIGINAL .card-side-btn{ ...
     bottom:0; ... } rule (which sits further down, inside the untouched
     byte-identical prefix). Both rules share identical specificity (one
     class selector) — ties resolve by SOURCE ORDER, so the original,
     coming LATER in the file, silently won every time and the Phase 2.5
     change never actually rendered. Moved here — after ALL original
     content, in the one place in this file guaranteed to out-order any
     prefix rule — so it actually applies. Geometry math unchanged from
     the prior attempt (still bottom:14%, still leaves --side-inset,
     avatar position, and the 560px mobile breakpoint's own variables
     untouched); the fix here is purely about WHERE the rule lives. */
  /* Phase 2.7 §5 — now that §5/2.6 actually renders, Austin's next-pass
     visual judgment was "too high, too close to the banner." Eased back
     down (14% -> 8%) — still clearly above the original 0% flush-bottom
     position, comfortably centered nearer the avatar/name transition
     with more room under the cover banner, short of the original low
     placement. */
  .card-side-btn{ bottom:8%; }

  /* PHASE 2.6 §6 FIX — ROOT CAUSE of "right side perfect, left side still
     faint": the exact same source-order bug as §5 above, but partially
     masked. My Phase 2.5 .card-hero-divider .line rule (background
     gradient) and the ORIGINAL's .card-hero-divider .line rule (flat
     border color) share identical specificity — the original, declared
     LATER in the untouched prefix, won for the FIRST line, keeping it on
     the old faint background. The :last-child variant survived only
     because :last-child raises specificity above BOTH plain .line rules,
     so it always won regardless of order — which is exactly why only the
     right (last) line looked upgraded. Relocated here, after all
     original content, so the base .line rule actually applies to both
     lines; :last-child continues to layer the mirrored fade on top. */
  .card-hero-divider{ position:relative; }
  .card-hero-divider::before{
    content:''; position:absolute; left:50%; top:50%; width:64px; height:64px; transform:translate(-50%,-50%);
    background:radial-gradient(circle, var(--accent-violet-glow), transparent 70%); pointer-events:none; z-index:-1;
  }
  .card-hero-divider .line{
    height:2px; border-radius:1px;
    background:linear-gradient(90deg, transparent, var(--accent-violet-500) 88%, var(--accent-violet-500));
  }
  .card-hero-divider .line:last-child{
    background:linear-gradient(90deg, var(--accent-violet-500), var(--accent-violet-500) 12%, transparent);
  }

  /* Phase 2.6/2.7 — base styling for real testimonial content
     (.card-ph-quote/.card-ph-attribution/.card-ph-rating), introduced
     when renderTestimonials started rendering real entered copy but
     never given their own rules — they inherited plain unstyled text
     until now. Every Presentation Style's own CSS still layers on top
     of these via the shared .card-ph-text/.ph-label family. */
  .card-ph-quote{ font-size:14.5px; line-height:1.6; color:var(--text-primary); font-weight:600; }
  .card-ph-quote::before{ content:'\201C'; } .card-ph-quote::after{ content:'\201D'; }
  .card-ph-attribution{ margin-top:10px; font-size:12.5px; font-weight:700; color:var(--text-tertiary); }
  .card-ph-rating{ font-size:13px; letter-spacing:2px; color:var(--accent-cyan-400); margin-bottom:8px; }
  .card-ph-rating .is-empty{ color:var(--border-glass-strong); }

  /* ==========================================================================
     PHASE 2.1 — Card Studio theme/style hooks. Everything below is
     purely additive and purely opt-in: it only ever activates via a class
     that Card Studio itself adds (never present in Austin's approved
     default data), or via the injected `#cs2-theme-override` stylesheet
     Card Studio writes at runtime (studio.js:applyThemeVars). With no
     variant/theme selection made, none of it applies and output stays
     byte-identical to the Phase 1 approved version. None of it touches
     geometry (dimensions, spacing, positioning) — only color/surface/
     shadow/typography treatment, and every variant below consumes the
     active theme's CSS custom properties rather than hardcoding a color,
     so it recolors correctly under any theme preset (see Card Studio's
     module style-variant panel).
     ========================================================================== */

  /* Preview selection feedback (Phase 2.3 §10) — a brief pulse confirming
     what got selected, whichever side triggered it. Self-clearing (JS
     removes the class ~900ms later); never a persistent editor box drawn
     over the card. outline (not border) so it never affects layout/box
     size, and works identically regardless of the element's own border-
     radius/background. */
  @keyframes cs2PreviewFlash{
    0%{ outline-color:transparent; box-shadow:0 0 0 0 rgba(139,92,246,0); }
    18%{ outline-color:rgba(139,92,246,0.65); box-shadow:0 0 0 3px rgba(139,92,246,0.22), 0 0 46px 6px rgba(139,92,246,0.28); }
    100%{ outline-color:transparent; box-shadow:0 0 0 0 rgba(139,92,246,0); }
  }
  .cs2-preview-flash{
    outline:2px solid transparent; outline-offset:2px; border-radius:10px;
    animation:cs2PreviewFlash 0.9s ease-out;
  }
  @media (prefers-reduced-motion:reduce){ .cs2-preview-flash{ animation:none; outline-color:rgba(139,92,246,0.5); } }
  /* Card Studio preview only (classes never present on the public card). */
  body.cs2-edit-clicks section[id] *, body.cs2-edit-clicks footer[id] *{ cursor:pointer; }
  body.cs2-edit-clicks [data-cs2-editable]:focus-visible{ outline:2px solid var(--accent-cyan-400); outline-offset:3px; border-radius:6px; }

  /* Rich-text inline links (Card Studio's rich text editor, section 3) —
     no existing content used inline links before this, so this cannot
     change any current rendered output; it only activates the moment a
     link is actually created in a copy field. */
  .cs-rte-link{ color:var(--accent-cyan-400); text-decoration:underline; text-underline-offset:2px; }
  .cs-rte-link:hover{ color:var(--accent-violet-500); }

  /* ---- About / Video module style variants (5 total, default = Original) ---- */
  .style-glass-feature .card-video{ border:1.5px solid var(--accent-violet-500); box-shadow:0 0 40px -4px var(--accent-violet-glow), inset 0 0 24px var(--surface-glass-hover); }
  .style-cinematic .card-video{ border-radius:26px; box-shadow:0 24px 60px -18px rgba(0,0,0,0.65); }
  .style-cinematic .card-video::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%); border-radius:inherit; pointer-events:none; }
  /* Floating Media — the video frame breaks free of the section's own text
     column, reads as a tilted "floating card" with its own ambient shadow
     and a thin accent-gradient edge instead of a flat border. */
  .style-floating-media .card-video{
    border:none; border-radius:24px; transform:rotate(-1.2deg); margin:26px 6px 18px;
    box-shadow:0 26px 50px -18px rgba(0,0,0,0.5), 0 0 0 1px var(--border-glass-subtle);
  }
  .style-floating-media .card-video::before{
    content:''; position:absolute; inset:-1px; border-radius:inherit; z-index:-1; padding:2px;
    background:var(--brand-gradient); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
  }
  /* Editorial / Minimal — the video treatment steps back entirely: no
     frame, no glow, just a plain rounded-corner rectangle so the copy
     carries the section, matching a restrained editorial layout. */
  .style-editorial .card-video{ background:var(--surface-glass); border:none; border-radius:10px; }
  .style-editorial .card-video-play{ background:transparent; border:none; box-shadow:none; }

  /* PHASE 2.3 §1B FIX — root cause of "About styles do nothing": every
     rule above only ever targeted .card-video, which exists ONLY in the
     about-video instance. About's second instance (about-plain — no
     video, renderAboutPlain's own .card-section-inner glass card) shared
     the exact same style options in the dropdown but had ZERO matching
     CSS for any of them — every choice was a silent no-op. Each variant
     below gives that glass-card instance its own equivalent, genuinely
     different treatment (mirroring the video variant's character), so
     picking any option now visibly changes BOTH About instances. Uses
     !important only on the two properties the renderer bakes inline
     (padding/border-radius) — nothing else needed it. */
  .style-glass-feature .card-section-inner{ border-color:var(--border-glass-strong); box-shadow:0 0 40px -6px var(--accent-violet-glow), inset 0 0 24px var(--surface-glass-hover); }
  .style-cinematic .card-section-inner{ border-radius:28px !important; box-shadow:0 24px 60px -18px rgba(0,0,0,0.65); background:linear-gradient(160deg, var(--surface-glass-hover), var(--surface-glass)); }
  .style-floating-media .card-section-inner{ transform:rotate(-1deg); box-shadow:0 26px 50px -18px rgba(0,0,0,0.5), 0 0 0 1px var(--border-glass-subtle); margin:26px 6px 18px; }
  .style-editorial .card-section-inner{ background:none; border:none; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; padding:6px 4px !important; }

  /* PHASE 2.4 §7 CRITICAL FIX — root cause of the "massively elongated
     oval covering ~90% of the card" bug: .card-photo-wrap (the small
     circular avatar frame) was NEVER given `position:relative` anywhere
     in the original stylesheet (verified — it only sets width/aspect-
     ratio/padding/background/box-shadow). A `position:absolute` pseudo-
     element positions against the nearest POSITIONED ANCESTOR, not its
     own host element, when the host itself isn't positioned — so every
     ring in the Avatar Border Library was actually being laid out
     against .card-hero-content{ position:relative; }, which spans the
     FULL CARD WIDTH. border-radius:50% on that wide box is exactly what
     produces an elongated oval/stadium shape instead of a circle. This
     single missing property is the entire bug — every individual border
     was already geometrically correct relative to a properly-positioned
     host; none of the old-Studio-ported CSS needed changing. */
  .card-photo-wrap{ position:relative; }

  /* ==========================================================================
     AVATAR BORDER LIBRARY (Phase 2.3, section 7) — Diamond, 24K, Pulse,
     Orbit, Glow, Energy and Fire are ADAPTED from the existing, already-
     approved profile-border system in dashboard/app.js + dashboard/
     styles.css (search: PROFILE_BORDER_OPTIONS, .pb-ring-host) — same
     palettes, same animation choreography, same reduced-motion static
     fallbacks. dashboard/ itself is untouched; this is a parallel
     implementation for Template 01's own avatar (.card-photo-wrap),
     namespaced under [data-avatar-border] so it can't collide with or
     depend on dashboard/'s .pb-ring-host system.
     Ring technique: a ::after (and for the richer treatments, a second
     ::before sweep/flicker layer) sits BEHIND the host via a negative
     inset + z-index:-1 — the exact "glow peeks out from behind the opaque
     avatar" trick already used by .glow-static elsewhere in this file —
     so it needs no padding/layout change to .card-photo-wrap and cannot
     shift hero geometry. Diamond/24K/Pulse/Orbit/Glow/Energy/Fire are
     deliberately self-contained "material identities" (their own fixed
     premium palettes), NOT theme-recolored — matching the mission's own
     allowance for this ("may intentionally have their own material
     identity rather than fully inheriting the theme"); avatarBorderColor
     only ever applies to the plain Solid/Gradient treatments. ---- */
  .card-photo-wrap[data-avatar-border]:not([data-avatar-border="none"]):not([data-avatar-border="solid-ring"]):not([data-avatar-border="gradient-ring"])::after{
    content:""; position:absolute; border-radius:50%; z-index:-1; pointer-events:none;
  }
  /* NOTE: inset is set per-variant below (not in the shared rule above) —
     the shared rule's :not() chain gives it HIGHER specificity than a
     simple .card-photo-wrap[data-avatar-border="fire"] selector, so
     putting a default inset there would silently win over Fire's own
     -6px no matter what Fire's own rule said (exactly the "selector
     overridden by stronger CSS" failure mode section 15 warns about). */
  [data-avatar-border="pulse"]::after{
    inset:-5px;
    background:conic-gradient(from 215deg, #7C3AED 0deg, #9D5CF5 66deg, #5B21B6 140deg, #4F46E5 208deg, #8B5CF6 286deg, #7C3AED 360deg);
    box-shadow:0 0 16px -3px rgba(124,58,237,0.78), 0 0 7px 0 rgba(79,70,229,0.5);
    animation:pbPulseBreathe 2.6s ease-in-out infinite;
  }
  .card-photo-wrap[data-avatar-border="pulse"]::before{
    content:""; position:absolute; inset:-5px; border-radius:50%; z-index:-1; pointer-events:none;
    border:2px solid rgba(139,92,246,0.65); box-shadow:0 0 12px 1px rgba(124,58,237,0.5);
    animation:pbPulseWave 2.6s cubic-bezier(.22,.7,.3,1) infinite;
  }
  [data-avatar-border="orbit"]::after{
    inset:-5px;
    background:conic-gradient(from 0deg, #0B1E3F 0deg, #1E60D6 120deg, #4FC3FF 200deg, #1E60D6 280deg, #0B1E3F 360deg);
    box-shadow:0 0 20px -3px rgba(46,131,247,0.7);
    animation:pbOrbitSpin 3.4s linear infinite;
  }
  [data-avatar-border="glow"]::after{
    inset:-5px;
    background:conic-gradient(from 210deg, #0F9E52, #34F58A, #7CFFB4, #2BE86B, #0F9E52);
    box-shadow:0 0 24px -2px rgba(52,245,138,0.7), 0 0 12px 0 rgba(124,255,180,0.55);
    animation:pbGlowBreathe 3.2s ease-in-out infinite;
  }
  [data-avatar-border="energy"]::after{
    inset:-5px;
    background:linear-gradient(115deg, #FF3B2F, #FF9F1C, #FF3B2F, #C81E1E); background-size:280% 280%;
    box-shadow:0 0 22px -3px rgba(255,95,45,0.7);
    animation:pbEnergyFlow 2.6s linear infinite;
  }
  .card-photo-wrap[data-avatar-border="fire"]::after{
    inset:-6px;
    background:conic-gradient(from 0deg, #7A1500 0deg, #FF4500 42deg, #FF8C00 92deg, #FFC61A 132deg, #FFE9A6 158deg, #FF9E1F 200deg, #FF4A0A 262deg, #B31A00 318deg, #7A1500 360deg);
    box-shadow:0 0 28px -3px rgba(255,110,20,0.8), 0 0 13px 0 rgba(255,196,70,0.55);
    animation:pbFireSpin 6.5s linear infinite, pbFireFlicker 0.9s ease-in-out infinite;
  }
  .card-photo-wrap[data-avatar-border="fire"]::before{
    content:""; position:absolute; inset:-6px; border-radius:50%; z-index:-1; pointer-events:none;
    background:conic-gradient(from 140deg, transparent 0deg, rgba(255,214,110,0.92) 26deg, rgba(255,132,20,0.55) 66deg, transparent 104deg, rgba(255,90,12,0.75) 168deg, transparent 206deg, rgba(255,224,150,0.9) 258deg, rgba(255,120,20,0.5) 300deg, transparent 344deg);
    animation:pbFireSpinRev 4s linear infinite, pbFireFlicker 0.7s ease-in-out infinite reverse;
  }
  [data-avatar-border="gold24k"]::after{
    inset:-5px;
    background:conic-gradient(from 0deg, #8A671C 0deg, #D9AE3E 48deg, #F6DE86 90deg, #FFF6D2 116deg, #EBC85C 150deg, #B98A28 210deg, #E4BE4C 258deg, #FFF1C4 300deg, #A67A20 342deg, #8A671C 360deg);
    box-shadow:0 0 20px -3px rgba(232,192,92,0.72), 0 0 9px 0 rgba(255,244,200,0.5);
    animation:pb24kRotate 9s linear infinite, pb24kSheen 3s ease-in-out infinite;
  }
  .card-photo-wrap[data-avatar-border="gold24k"]::before{
    content:""; position:absolute; inset:-5px; border-radius:50%; z-index:-1; pointer-events:none;
    background:conic-gradient(from 0deg, transparent 0deg, rgba(255,253,240,0.95) 18deg, rgba(255,241,196,0.35) 34deg, transparent 62deg, transparent 360deg);
    animation:pb24kSweep 4.6s linear infinite;
  }
  [data-avatar-border="diamond"]::after{
    inset:-5px;
    background:conic-gradient(from 0deg, #FFFFFF 0deg, #C7D6EA 14deg, #FFFFFF 26deg, #E6EFFF 40deg, #B9C8DC 54deg, #FFFFFF 70deg, #D8E6FF 86deg, #FFFFFF 100deg, #C0D0E6 116deg, #F2F6FF 132deg, #FFFFFF 150deg, #CBD8EC 168deg, #EEF4FF 186deg, #B7C6DA 202deg, #FFFFFF 220deg, #D6E2F5 238deg, #FFFFFF 256deg, #C4D3E8 274deg, #F0F5FF 292deg, #FFFFFF 312deg, #BDCCE0 330deg, #E9F1FF 348deg, #FFFFFF 360deg);
    box-shadow:0 0 22px -2px rgba(214,230,255,0.85), 0 0 11px 0 rgba(255,255,255,0.6);
    animation:pbDiamondRotate 11s linear infinite, pbDiamondFlash 2.4s ease-in-out infinite;
  }
  .card-photo-wrap[data-avatar-border="diamond"]::before{
    content:""; position:absolute; inset:-5px; border-radius:50%; z-index:-1; pointer-events:none;
    background:conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,0.98) 12deg, rgba(210,200,255,0.4) 22deg, rgba(200,240,255,0.4) 30deg, transparent 46deg, transparent 200deg, rgba(255,255,255,0.7) 210deg, transparent 226deg, transparent 360deg);
    animation:pbDiamondSweep 3.2s linear infinite;
  }
  /* Phase 2.5 §6 — SMOKE. Black/charcoal material identity (not theme-
     tinted, matching Diamond/24K's own precedent) with two counter-
     drifting layered conic-gradient "wisps" (blurred, slowly rotating in
     opposite directions at different speeds — the layering + drift is
     what reads as vapor rather than a flat dark ring) plus a hairline
     neutral-silver rim so it stays visible through dimensional
     separation on a dark card, not just contrast on light. */
  [data-avatar-border="smoke"]::after{
    inset:-6px; filter:blur(1.5px);
    background:conic-gradient(from 0deg, #050505 0deg, #2A2A2E 70deg, #050505 140deg, #3A3A40 210deg, #050505 280deg, #232326 340deg, #050505 360deg);
    box-shadow:0 0 22px -4px rgba(0,0,0,0.65), inset 0 0 0 1px rgba(200,200,210,0.14);
    animation:pbSmokeDrift 13s ease-in-out infinite;
  }
  .card-photo-wrap[data-avatar-border="smoke"]::before{
    content:""; position:absolute; inset:-9px; border-radius:50%; z-index:-1; pointer-events:none; filter:blur(3px);
    background:conic-gradient(from 180deg, transparent 0deg, rgba(140,140,150,0.4) 30deg, transparent 70deg, transparent 180deg, rgba(90,90,100,0.35) 220deg, transparent 260deg, transparent 360deg);
    animation:pbSmokeDriftRev 19s linear infinite reverse;
  }
  @keyframes pbSmokeDrift{ 0%,100%{ transform:rotate(0deg) scale(1); } 50%{ transform:rotate(18deg) scale(1.04); } }
  @keyframes pbSmokeDriftRev{ to{ transform:rotate(-360deg); } }
  @keyframes pbDiamondRotate{ to{ transform:rotate(360deg); } }
  @keyframes pbDiamondSweep{ to{ transform:rotate(360deg); } }
  @keyframes pbDiamondFlash{
    0%, 100%{ filter:brightness(1) saturate(1) hue-rotate(0deg); }
    30%     { filter:brightness(1.16) saturate(1.1) hue-rotate(-6deg); }
    55%     { filter:brightness(0.97) saturate(1) hue-rotate(4deg); }
    80%     { filter:brightness(1.2) saturate(1.15) hue-rotate(8deg); }
  }
  @keyframes pbFireSpin{ to{ transform:rotate(360deg); } }
  @keyframes pbFireSpinRev{ to{ transform:rotate(-360deg); } }
  @keyframes pb24kRotate{ to{ transform:rotate(360deg); } }
  @keyframes pb24kSweep{ to{ transform:rotate(360deg); } }
  @keyframes pb24kSheen{ 0%,100%{ filter:brightness(1) saturate(1.05); } 50%{ filter:brightness(1.12) saturate(1.18); } }
  @keyframes pbFireFlicker{
    0%, 100%{ opacity:0.9;  filter:brightness(1) saturate(1.1); }
    20%     { opacity:1;    filter:brightness(1.18) saturate(1.3); }
    45%     { opacity:0.82; filter:brightness(0.94) saturate(1.05); }
    70%     { opacity:1;    filter:brightness(1.22) saturate(1.35); }
    85%     { opacity:0.88; filter:brightness(1.02) saturate(1.15); }
  }
  @keyframes pbOrbitSpin{ to{ transform:rotate(360deg); } }
  @keyframes pbPulseBreathe{
    0%, 100%{ box-shadow:0 0 12px -3px rgba(124,58,237,0.62), 0 0 6px 0 rgba(79,70,229,0.4); filter:brightness(0.97); }
    45%     { box-shadow:0 0 24px -1px rgba(139,92,246,0.92), 0 0 12px 1px rgba(99,102,241,0.62); filter:brightness(1.13); }
  }
  @keyframes pbPulseWave{ 0%{ transform:scale(1); opacity:0.7; } 55%{ opacity:0; } 70%,100%{ transform:scale(1.24); opacity:0; } }
  @keyframes pbEnergyFlow{ 0%{ background-position:0% 50%; } 100%{ background-position:280% 50%; } }
  @keyframes pbGlowBreathe{
    0%, 100%{ box-shadow:0 0 15px -3px rgba(52,245,138,0.55), 0 0 8px 0 rgba(124,255,180,0.4); opacity:0.82; }
    50%{ box-shadow:0 0 30px 0 rgba(52,245,138,0.85), 0 0 15px 2px rgba(124,255,180,0.6); opacity:1; }
  }
  /* Light-foundation contrast backstop — same fix the dashboard version
     uses: pale premium palettes (Diamond, 24K) can lose almost all
     contrast against a light card background, so a thin hairline outline
     is added (additively, doesn't touch any preset's own color/animation)
     whenever the working theme is light. Driven by studio.js adding
     .avatar-border-light-mode to <body> (see applyThemeVars). */
  body.avatar-border-light-mode .card-photo-wrap[data-avatar-border]:not([data-avatar-border="none"])::after{
    outline:1.5px solid rgba(20,20,30,0.18); outline-offset:-1px;
  }
  @media (prefers-reduced-motion:reduce){
    [data-avatar-border="orbit"]::after{ animation:none; background:conic-gradient(from 45deg, #0B1E3F, #1E60D6, #4FC3FF, #1E60D6, #0B1E3F); }
    [data-avatar-border="pulse"]::after{ animation:none; filter:none; opacity:1; box-shadow:0 0 16px -2px rgba(124,58,237,0.72), 0 0 8px 0 rgba(79,70,229,0.5); }
    .card-photo-wrap[data-avatar-border="pulse"]::before{ animation:none; opacity:0; }
    [data-avatar-border="glow"]::after{ animation:none; opacity:1; box-shadow:0 0 22px -1px rgba(52,245,138,0.8), 0 0 11px 0 rgba(124,255,180,0.6); }
    [data-avatar-border="energy"]::after{ animation:none; background-position:50% 50%; }
    .card-photo-wrap[data-avatar-border="fire"]::after{
      animation:none; opacity:1; filter:none;
      background:conic-gradient(from 18deg, #7A1500, #FF4500, #FF9E1F, #FFD966, #FF9E1F, #FF4500, #7A1500);
      box-shadow:0 0 22px -2px rgba(255,110,20,0.7), 0 0 11px 0 rgba(255,196,70,0.5);
    }
    .card-photo-wrap[data-avatar-border="fire"]::before{ animation:none; opacity:0.55; }
    [data-avatar-border="gold24k"]::after{
      animation:none; filter:none;
      background:conic-gradient(from 20deg, #8A671C, #D9AE3E, #FFF6D2, #EBC85C, #B98A28, #E4BE4C, #FFF1C4, #8A671C);
      box-shadow:0 0 20px -3px rgba(232,192,92,0.72), 0 0 9px 0 rgba(255,244,200,0.5);
    }
    .card-photo-wrap[data-avatar-border="gold24k"]::before{ animation:none; opacity:0.6; }
    [data-avatar-border="diamond"]::after{
      animation:none; filter:none;
      background:conic-gradient(from 12deg, #FFFFFF, #C7D6EA, #FFFFFF, #E6EFFF, #B9C8DC, #FFFFFF, #D8E6FF, #FFFFFF, #C0D0E6, #F2F6FF, #FFFFFF, #CBD8EC, #EEF4FF, #B7C6DA, #FFFFFF, #D6E2F5, #FFFFFF);
      box-shadow:0 0 20px -2px rgba(214,230,255,0.8), 0 0 10px 0 rgba(255,255,255,0.55);
    }
    .card-photo-wrap[data-avatar-border="diamond"]::before{ animation:none; opacity:0.55; }
    [data-avatar-border="smoke"]::after{
      animation:none; filter:blur(1px);
      background:conic-gradient(from 12deg, #050505, #2A2A2E, #050505, #3A3A40, #050505);
      box-shadow:0 0 20px -4px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(200,200,210,0.14);
    }
    .card-photo-wrap[data-avatar-border="smoke"]::before{ animation:none; opacity:0.5; }
  }

  /* ---- Why Us graphic variants (Phase 2.2, section 15) ----
     .card-why-graphic / .wg-col / .wg-label / .wg-arrow already exist
     (used by the preserved 1EIGHTY 360°→180° graphic) and are already
     generic, so the new variants below reuse them directly rather than
     duplicating the base layout. Everything consumes theme tokens —
     no hardcoded colors — so it recolors correctly under any preset. */
  .wg-chip{
    font-family:'JetBrains Mono', monospace; font-size:10px; font-weight:700; letter-spacing:0.08em;
    padding:3px 9px; border-radius:99px; border:1px solid var(--border-glass-strong); color:var(--text-tertiary);
  }
  .wg-chip-accent{ border-color:transparent; background:var(--brand-gradient); color:#0A0A16; }

  .wg-pillars{ display:flex; align-items:flex-start; justify-content:center; gap:14px; margin:20px 0 6px; }
  .wg-pillar{ flex:1; max-width:120px; display:flex; flex-direction:column; align-items:center; gap:8px; }
  .wg-pillar-num{
    width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-family:'JetBrains Mono', monospace; font-weight:800; font-size:13px; color:#0A0A16; background:var(--brand-gradient);
  }
  .wg-pillar-label{ font-size:12.5px; font-weight:700; color:var(--text-primary); text-align:center; line-height:1.3; }

  .wg-path{ position:relative; display:flex; align-items:flex-start; justify-content:space-between; margin:26px 4px 6px; }
  .wg-path-track{ position:absolute; left:6%; right:6%; top:5px; height:2px; background:var(--border-glass-subtle); z-index:0; }
  .wg-path-node{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:8px; flex:1; }
  .wg-path-dot{ width:12px; height:12px; border-radius:50%; background:var(--surface-glass); border:2px solid var(--accent-violet-500); }
  .wg-path-node.is-end .wg-path-dot{ background:var(--brand-gradient); border-color:transparent; box-shadow:0 0 14px -2px var(--accent-violet-glow); }
  .wg-path-label{ font-size:11.5px; font-weight:700; color:var(--text-secondary); text-align:center; }
  .wg-path-node.is-end .wg-path-label{ color:var(--text-primary); }

  .wg-compare{ display:flex; align-items:center; justify-content:center; gap:0; margin:20px 0 6px; }
  .wg-compare-side{
    flex:1; max-width:150px; display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 10px;
    border-radius:14px; border:1px solid var(--border-glass-subtle);
  }
  .wg-compare-side.is-new{ border-color:var(--accent-violet-500); background:var(--brand-gradient-soft); }
  .wg-compare-tag{ font-family:'JetBrains Mono', monospace; font-size:10px; font-weight:700; letter-spacing:0.08em; color:var(--text-tertiary); }
  .wg-compare-side.is-new .wg-compare-tag{ color:var(--accent-cyan-400); }
  .wg-compare-label{ font-size:13px; font-weight:700; color:var(--text-secondary); text-align:center; line-height:1.3; }
  .wg-compare-side.is-new .wg-compare-label{ color:var(--text-primary); }
  .wg-compare-vs{
    flex:0 0 auto; margin:0 -8px; width:30px; height:30px; border-radius:50%; z-index:1;
    display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono', monospace;
    font-size:10px; font-weight:800; background:var(--brand-ink-950); border:1px solid var(--border-glass-strong); color:var(--text-tertiary);
  }

  /* Phase 2.5 §2A — ORBIT / ECOSYSTEM (replaces Layered Value Stack,
     which Austin judged below the quality bar for having no motion/
     storytelling). A rotating orbital ring + traveling comet light
     around a fixed core, with 2-3 satellite value points anchored at
     rest — the ring's motion is what a static "3 boxes" composition
     could never do. Comet uses CSS motion-path (offset-path); browsers
     without support simply never render it — the ring and core still
     read correctly with zero visual breakage either way. */
  .wg-orbit{ position:relative; width:172px; height:172px; margin:22px auto 14px; }
  .wg-orbit-ring{
    position:absolute; inset:0; border-radius:50%;
    border:1.5px dashed color-mix(in srgb, var(--accent-violet-500) 55%, transparent);
    animation:wgOrbitSpin 22s linear infinite;
  }
  .wg-orbit-comet{
    position:absolute; top:0; left:50%; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%;
    background:var(--brand-gradient); box-shadow:0 0 12px 2px var(--accent-violet-glow);
    offset-path:circle(50%); animation:wgOrbitTravel 6s linear infinite;
  }
  .wg-orbit-core{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:78px; height:78px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; text-align:center; padding:6px;
    background:var(--surface-glass-hover); border:1px solid var(--border-glass-strong);
    box-shadow:0 0 26px -4px var(--accent-violet-glow); backdrop-filter:blur(6px);
    animation:wgOrbitCoreBreathe 4.6s ease-in-out infinite;
  }
  .wg-orbit-core-label{ font-size:11.5px; font-weight:800; color:var(--text-primary); line-height:1.2; }
  .wg-orbit-sat{ position:absolute; display:flex; flex-direction:column; align-items:center; gap:5px; transform:translate(-50%,-50%); }
  .wg-orbit-sat-1{ top:6%; left:50%; }
  .wg-orbit-sat-2{ top:78%; left:12%; }
  .wg-orbit-sat-3{ top:78%; left:88%; }
  .wg-orbit-sat-dot{
    width:12px; height:12px; border-radius:50%; background:var(--brand-gradient);
    box-shadow:0 0 10px -1px var(--accent-violet-glow); animation:wgOrbitSatPulse 3.4s ease-in-out infinite;
  }
  .wg-orbit-sat-2 .wg-orbit-sat-dot{ animation-delay:.5s; }
  .wg-orbit-sat-3 .wg-orbit-sat-dot{ animation-delay:1s; }
  .wg-orbit-sat-label{ font-size:10.5px; font-weight:700; color:var(--text-secondary); white-space:nowrap; }
  @keyframes wgOrbitSpin{ to{ transform:rotate(360deg); } }
  @keyframes wgOrbitTravel{ to{ offset-distance:100%; } }
  @keyframes wgOrbitCoreBreathe{ 0%,100%{ box-shadow:0 0 26px -4px var(--accent-violet-glow); } 50%{ box-shadow:0 0 38px 0px var(--accent-violet-glow); } }
  @keyframes wgOrbitSatPulse{ 0%,100%{ transform:scale(1); opacity:0.85; } 50%{ transform:scale(1.25); opacity:1; } }
  @media (prefers-reduced-motion:reduce){
    .wg-orbit-ring{ animation:none; }
    .wg-orbit-comet{ display:none; }
    .wg-orbit-core{ animation:none; }
    .wg-orbit-sat-dot{ animation:none; }
  }

  /* Phase 2.5 §2B — MOMENTUM / FLYWHEEL (replaces Constellation). A ring
     of stage markers chase-lights in sequence around a center label —
     motion tells the "repeatable cycle" story a static shape can't. */
  .wg-flywheel{ position:relative; width:150px; height:150px; margin:22px auto 14px; }
  .wg-flywheel-ring{ position:absolute; inset:0; }
  .wg-flywheel-dot{
    position:absolute; top:50%; left:50%; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%;
    background:var(--border-glass-strong);
    transform:rotate(calc(var(--i) * 60deg)) translateY(-67px);
    animation:wgFlywheelChase 3.6s linear infinite;
    animation-delay:calc(var(--i) * -0.6s);
  }
  .wg-flywheel-center{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:96px; height:96px; border-radius:50%;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center; padding:8px;
    background:var(--surface-glass-hover); border:1px solid var(--border-glass-strong); box-shadow:0 0 24px -4px var(--accent-violet-glow);
  }
  .wg-flywheel-label{ font-size:13px; font-weight:800; color:var(--text-primary); }
  .wg-flywheel-sub{ font-size:10px; font-weight:600; color:var(--text-tertiary); letter-spacing:0.02em; }
  @keyframes wgFlywheelChase{
    0%, 83.4%{ background:var(--border-glass-strong); box-shadow:none; transform:rotate(calc(var(--i) * 60deg)) translateY(-67px) scale(1); }
    8.3%{ background:var(--accent-violet-500); box-shadow:0 0 12px 2px var(--accent-violet-glow); transform:rotate(calc(var(--i) * 60deg)) translateY(-67px) scale(1.35); }
    16.6%{ background:var(--border-glass-strong); box-shadow:none; transform:rotate(calc(var(--i) * 60deg)) translateY(-67px) scale(1); }
  }
  @media (prefers-reduced-motion:reduce){
    .wg-flywheel-dot{ animation:none; background:var(--accent-violet-500); opacity:0.7; }
  }

  /* ---- Testimonials module style variants (5 total) ---- */
  .style-editorial .card-ph-slide{ background:transparent; border:none; border-left:2px solid var(--accent-violet-500); border-radius:0; padding-left:18px; box-shadow:none; }
  .style-editorial .card-ph-video{ display:none; }
  .style-media-forward .card-ph-slide{ padding:0; overflow:hidden; }
  .style-media-forward .card-ph-video{ width:100%; height:150px; border-radius:0; }
  .style-media-forward .card-ph-text{ padding:16px; }
  /* Quote Spotlight — the quote itself becomes the visual centerpiece
     (large serif-weight text, centered), media shrinks to a small round
     attribution avatar instead of a headline video/photo block. */
  .style-quote-spotlight .card-ph-slide{ text-align:center; padding:26px 20px; background:var(--surface-glass); }
  .style-quote-spotlight .card-ph-video{ width:56px; height:56px; border-radius:50%; margin:0 auto 14px; background:var(--brand-gradient-soft); }
  .style-quote-spotlight .card-ph-text{ text-align:center; }
  .style-quote-spotlight .ph-label{ font-size:15px; font-weight:700; color:var(--text-primary); text-transform:none; letter-spacing:0; font-family:'Plus Jakarta Sans', sans-serif; }
  /* Bordered Minimal — flat outline card, no fill, no shadow; quiet and
     content-forward, reads well against any theme or background. */
  .style-bordered .card-ph-slide{ background:transparent; border:1px solid var(--border-glass-strong); box-shadow:none; }

  /* ---- Services module style variants (5 total) ---- */
  .style-icon-forward .card-service-card{ text-align:center; }
  .style-icon-forward .card-service-card .s-icon{ width:52px; height:52px; margin:0 auto 12px; background:var(--brand-gradient-soft); border-radius:16px; display:flex; align-items:center; justify-content:center; }
  /* Phase 2.7 §8/9 — Image Feature replaces Clean Minimal (Austin didn't
     want it). Built around real business photography: each card's own
     uploaded photo becomes the dominant visual element, with the small
     icon badge stepping aside. .card-service-image is present in every
     variant's markup (uniform data model, see renderServices) but only
     ever visible here — everywhere else it stays display:none, so no
     other Services style changes shape. Falls back to an icon-in-frame
     treatment (via the icon() call already baked into the placeholder
     branch of that div) when no photo has been uploaded yet — never a
     fake stock photo. */
  .card-service-image{ display:none; }
  .style-image-feature .card-service-card{ padding:0; overflow:hidden; }
  .style-image-feature .card-service-image{
    display:flex; align-items:center; justify-content:center; aspect-ratio:16/10; margin:0 0 14px;
    background:var(--brand-gradient-soft); border-bottom:1px solid var(--border-glass-subtle);
  }
  .style-image-feature .card-service-image:not(.has-photo) .icon{ width:30px; height:30px; opacity:0.6; }
  .style-image-feature .card-service-card .s-icon{ display:none; }
  .style-image-feature .card-service-card h4, .style-image-feature .card-service-card p{ padding-left:20px; padding-right:20px; }
  .style-image-feature .card-service-card p{ padding-bottom:20px; }
  /* Numbered List — swaps the icon badge for a large ghost index numeral,
     an editorial "01 / 02 / 03" treatment. */
  .style-numbered .card-service-card{ position:relative; padding-top:8px; }
  .style-numbered .card-service-card .s-icon{ display:none; }
  .style-numbered .card-service-card h4::before{
    counter-increment:svc; content:counter(svc, decimal-leading-zero); display:block; margin-bottom:8px;
    font-family:'JetBrains Mono', monospace; font-size:26px; font-weight:700; background:var(--brand-gradient);
    -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  }
  .style-numbered .card-hscroll{ counter-reset:svc; }
  /* Bordered Card — strong 1.5px accent-toned outline instead of the soft
     glass fill, high-contrast and legible on any foundation. */
  .style-bordered .card-service-card{ background:transparent; border:1.5px solid var(--border-glass-strong); }

  /* ---- Logo Strip rebuild (Phase 2.5 §4/§5) ----
     ROOT PROBLEM: the section's ORIGINAL styles.css rule (line ~699,
     inside the byte-identical prefix, so it can't be edited directly)
     deliberately hardcodes background:#fff — literally titled "one
     continuous edge-to-edge white stripe" in its own source comment.
     That reads as a random disconnected strip on both dark AND light
     card foundations, exactly Austin's complaint. Overridden below via
     the same runtime-injected mechanism as everything else in Card
     Studio (applyThemeVars in studio.js) — this becomes the new
     DEFAULT/base logo-strip presentation for every foundation: the
     SECTION integrates into the card's own background (translucent
     surface tokens, same technique .card-band.is-alt already uses),
     while each LOGO TILE gets its own elevated card treatment for
     separation instead of relying on a hard white rectangle. A logo
     file that itself needs a white backing for legibility is a
     per-asset concern, deliberately kept separate — not solved here.
     PHASE 2.6 §1 FIX: the previous pass added a grayscale(1)+opacity(.72)
     resting filter with color only restored on :hover/:focus — a
     "premium logo wall" pattern that reads as a real bug on a business
     card (logos ARE the brand color; touch devices have no hover at all,
     so those logos would NEVER show real color). REMOVED outright. Logos
     now show full real color at rest, always. Hover/focus is lift +
     depth ONLY (transform/box-shadow) — never gates color. Framed goes
     further (stronger border/radius, its own elevated fill) for anyone
     who wants more separation than the integrated default. A true
     static/grid layout would need behavior.js's marquee-cloning builder
     restructured — not attempted, to avoid regressing the working
     carousel. */
  .card-logo-card{ transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
  /* Phase 2.7 §2/3 — three genuinely different compositions, not one
     concept restyled three times:
       default   — logos float directly on the integrated section
                   background, no card/surface at all, generous gaps.
       Framed    — the approved individual-card concept, kept.
       Glass Rail — a THIRD philosophy: not cardless, not many small
                   cards, but ONE shared elevated glass surface housing
                   all the (still uncarded) logos together. */
  /* Phase 2.8 §12/13 — the original 1EIGHTY marquee (protected prefix,
     line ~703) sized its tiles for a dense white stripe: flex:0 0 152px;
     height:76px; img max-height:72px. Every Card Studio variant inherits
     that same track/tile structure (the marquee-cloning builder in
     behavior.js isn't restructured per style — see the Phase 2.7 note
     above), so ALL THREE presentations were reading small/sparse. Sized
     up here via a controlled max-height/max-width + object-fit:contain
     system (not one fixed pixel logo size) so a wide horizontal logo, a
     near-square mark, and a tall narrow logo all scale to fit the SAME
     box without distortion or clipping — only the box itself got bigger. */
  .logo-marquee-track .card-logo-card{ margin-right:22px; flex:0 0 208px; height:98px; }
  .logo-marquee-track .card-logo-card img{ max-width:100%; max-height:80px; object-fit:contain; }
  /* Phase 2.8 Visual Addendum §1 — Framed Strip ONLY. The translucent
     surf()-based glass tile (var(--surface-glass-hover)) is barely-lit on
     DARK foundations — dark-lettered logos disappeared into it. Framed
     Strip's whole premise is "logos displayed on premium light
     presentation plaques," so it now uses a fixed light neutral (never
     theme-adaptive, unlike every other surface here) that reads the same
     plaque on both Dark and Light card foundations. Logos themselves are
     untouched — no filter/grayscale/inversion — full color, same
     object-fit/sizing as every other Logo Strip presentation. */
  .style-framed .card-logo-card{
    background:linear-gradient(180deg, #FFFFFF 0%, #F4EEE2 100%);
    border:1px solid rgba(20,16,8,0.09);
    border-radius:16px;
    box-shadow:0 10px 26px -16px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.7);
  }
  .style-framed .card-logo-card:hover{ transform:translateY(-3px); box-shadow:0 16px 32px -16px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.7), 0 0 0 1px var(--accent-violet-500); }
  .style-spotlight .logo-marquee{
    margin-left:16px; margin-right:16px; margin-top:18px; padding:20px 8px;
    border-radius:20px; background:var(--surface-glass); border:1px solid var(--border-glass-strong);
    box-shadow:0 20px 40px -24px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.04);
  }
  /* Glass Rail keeps its own identity as the "larger, spotlighted" of the
     three — sized a step above the (now also bigger) default Marquee. */
  .style-spotlight .logo-marquee-track .card-logo-card{ flex:0 0 236px; height:112px; margin-right:30px; }
  .style-spotlight .logo-marquee-track .card-logo-card img{ max-height:92px; }
  .style-spotlight .card-logo-card:hover{ transform:translateY(-2px) scale(1.03); }

  /* ---- Gallery rebuild (Phase 2.2, section 10) ----
     Placeholder state — a tasteful neutral tile with a media glyph, never
     an ugly gray box or fake stock photography. Adaptive to light/dark via
     the same surface tokens every other structural surface now uses. */
  .card-gallery-image.is-placeholder{
    display:flex; align-items:center; justify-content:center; cursor:default;
    background:var(--surface-glass); border:1px dashed var(--border-glass-strong);
  }
  .gallery-ph-inner{ display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--text-tertiary); }
  .gallery-ph-inner svg{ width:30px; height:30px; opacity:0.7; }
  .gallery-ph-inner span{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; }

  /* Real-image presentation variants — default (no class) is "Clean
     Portfolio", the original card-gallery-image treatment, unchanged. */
  .style-framed .card-gallery-image{ border:2px solid var(--border-glass-strong); padding:6px; background:var(--surface-glass); }
  /* Full Bleed — cards butt edge-to-edge, minimal radius, no inset border,
     reads as one continuous photo wall rather than separated cards. */
  .style-full-bleed .card-gallery-scroll{ gap:3px; }
  .style-full-bleed .card-gallery-image{ border-radius:4px; box-shadow:none; }
  /* Editorial — fewer, larger, immersive frames with no chrome at all;
     the photography carries the section instead of a card treatment. */
  .style-editorial .card-gallery-image{ flex-basis:94%; border-radius:6px; box-shadow:none; }
  /* Filmstrip Showcase — tighter, smaller frames (more visible at once)
     each carrying a frame-index badge, a contact-sheet/filmstrip feel. */
  .style-filmstrip .card-gallery-scroll{ gap:8px; counter-reset:frame; }
  .style-filmstrip .card-gallery-image{ flex-basis:46%; aspect-ratio:1/1; position:relative; counter-increment:frame; }
  .style-filmstrip .card-gallery-image::after{
    content:counter(frame, decimal-leading-zero); position:absolute; left:8px; bottom:8px; z-index:1;
    font-family:'JetBrains Mono', monospace; font-size:10px; font-weight:700; letter-spacing:0.05em;
    color:#fff; background:rgba(0,0,0,0.45); padding:3px 7px; border-radius:6px; pointer-events:none;
  }

  /* ---- Offer/CTA module style variants (5 total) ---- */
  .style-bold-feature .card-guarantee{ background:var(--brand-gradient); border:none; }
  .style-bold-feature .card-guarantee, .style-bold-feature .card-guarantee .g-figure, .style-bold-feature .card-guarantee .card-eyebrow{ color:#0A0A16; -webkit-text-fill-color:#0A0A16; }
  .style-minimal-cta .card-guarantee{ background:transparent; border:1px solid var(--border-glass-subtle); box-shadow:none; }
  /* Bordered Spotlight — no fill, a crisp 2px accent-color outline framing
     the whole offer as a "certificate" rather than a soft glass card. */
  .style-bordered-spotlight .card-guarantee{ background:transparent; border:2px solid var(--accent-violet-500); box-shadow:0 0 40px -12px var(--accent-violet-glow); }
  /* Compact Banner — a low, wide horizontal strip instead of the tall
     centered card; figure and copy share one row on desktop-ish widths. */
  /* PHASE 2.3 §1A FIX — root cause of the reported "mangled" layout: the
     renderer gives .card-guarantee's own inline style="padding:26px 22px;
     border-radius:20px;" (and the icon/CTA also carry their own inline
     width/height/margin), which no CSS class can beat regardless of
     specificity or source order — only !important can. The original
     version also set display:flex on a container with 6+ unwrapped flat
     children (icon/eyebrow/h2/figure/sub/paragraphs/button), which is
     what actually produced the mangled row. Redesigned as a legitimately
     DENSE, tight, low-profile vertical treatment instead — genuinely
     distinct from the roomier Glass/Bold/Bordered variants without
     fighting the flat DOM with a forced row layout. */
  .style-compact-banner .card-guarantee{ padding:16px 18px !important; border-radius:14px !important; background:var(--surface-glass); }
  .style-compact-banner .card-guarantee svg.icon{ width:24px !important; height:24px !important; }
  .style-compact-banner .card-guarantee .card-eyebrow{ margin-top:8px !important; }
  .style-compact-banner .card-guarantee h2{ font-size:18px; margin-top:2px; }
  .style-compact-banner .card-guarantee .g-figure{ font-size:26px; margin-top:6px; }
  .style-compact-banner .card-guarantee p{ font-size:13px; margin-top:6px; }
  .style-compact-banner .card-guarantee .btn-primary{ margin-top:12px !important; padding:12px 20px !important; font-size:13.5px; }

  /* ---- Promo / Free Resource module style variants (5 total) ---- */
  .style-bordered .card-calc-cta{ background:transparent; border:1.5px solid var(--accent-violet-500); box-shadow:none; }
  .style-solid-panel .card-calc-cta{ background:var(--brand-ink-950); border:1px solid var(--border-glass-strong); }
  /* Badge Highlight — a round icon badge leads the card, giving the
     resource a distinct "product" identity instead of plain text. */
  .style-badge-highlight .card-calc-cta{ text-align:center; }
  .style-badge-highlight .card-calc-cta::before{
    content:''; display:block; width:46px; height:46px; margin:0 auto 12px; border-radius:14px;
    background:var(--brand-gradient);
  }
  /* Minimal Link — nearly no chrome at all: nudges the module toward a
     plain inline text link with an arrow, for a resource that shouldn't
     compete visually with the rest of the card. */
  .style-minimal-link .card-calc-cta{ background:none; border:none; padding:6px 4px !important; text-align:left; }
  .style-minimal-link .card-calc-cta .btn-primary{
    background:none; color:var(--accent-cyan-400); box-shadow:none; padding:6px 0; width:auto !important; justify-content:flex-start !important;
    text-decoration:underline; text-underline-offset:3px;
  }

  /* ---- Contact Form module style variants (Phase 2.2 §7/§5) ---- */
  .style-minimal-line .card-form .card-section-inner{ background:none; border:none; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; padding-left:2px !important; padding-right:2px !important; }
  .style-minimal-line .card-form input, .style-minimal-line .card-form textarea{
    background:none; border:none; border-bottom:1.5px solid var(--border-glass-strong); border-radius:0; padding-left:2px; padding-right:2px;
  }
  .style-minimal-line .card-form input:focus, .style-minimal-line .card-form textarea:focus{ border-bottom-color:var(--accent-violet-500); box-shadow:none; }
  .style-bordered-card .card-form .card-section-inner{ background:transparent; border:1.5px solid var(--border-glass-strong); box-shadow:none; }
  .style-bordered-card .card-form input, .style-bordered-card .card-form textarea{ border-width:1.5px; }

  /* ---- Final CTA module style variant ---- */
  .style-compact-grid .cta-res-links{ flex-direction:row; flex-wrap:wrap; }
  .style-compact-grid .cta-res-links a{ flex:1 1 calc(50% - 6px); min-width:120px; }

  /* ==========================================================================
     SIGNATURE VARIANTS (Phase 2.3 §3) — one showpiece option per major
     module, deliberately more designed/memorable than the standard 5,
     still theme-token driven and safe on both foundations. Every module
     reuses the shared value 'signature' (scoped per-section like every
     other style-* class — no cross-module collision, see the note at the
     top of this hooks block). ========================================== */

  /* ABOUT — Split Identity: an offset gradient-framed media block on a
     diagonal-cut corner pairing, reads as a deliberate brand composition
     rather than a plain bordered box. */
  .style-signature .card-video{ position:relative; border:none; border-radius:6px 34px 6px 34px; box-shadow:0 24px 60px -18px rgba(0,0,0,0.55); }
  .style-signature .card-video::before{
    content:''; position:absolute; inset:-3px; border-radius:inherit; z-index:-1; padding:3px;
    background:var(--brand-gradient); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
  }
  .style-signature .card-video-label{ background:var(--brand-gradient); color:#0A0A16; }
  .style-signature .card-section-inner{ position:relative; border:none; border-radius:6px 34px 6px 34px !important; }
  .style-signature .card-section-inner::before{
    content:''; position:absolute; inset:-2px; border-radius:inherit; z-index:-1; padding:2px;
    background:var(--brand-gradient); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
  }
  .style-signature .card-eyebrow{
    background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; font-weight:800;
  }

  /* TESTIMONIALS — Oversized Quote: Phase 2.7 §1 — redesigned as
     DELIBERATELY TEXT-ONLY. An editorial, magazine-pullquote composition
     — a giant watermark quotation mark behind large-set copy. The
     placeholder's video-frame/play-button affordance made no sense for a
     style aimed at businesses with written-only testimonials, so
     .card-ph-video is hidden outright UNLESS a real photo was actually
     uploaded (.has-photo — see renderer.js), in which case it shows as a
     small round attribution avatar, never a play button. */
  /* NOTE: the quote glyph deliberately stays WITHIN .card-ph-slide's own
     box (no negative-offset escape). .card-hscroll (the horizontal
     scroller these slides live in) sets overflow-x:auto — per the CSS
     spec, a mixed overflow-x:auto/overflow-y:visible computes overflow-y
     to auto too, which would silently CLIP any content positioned above
     a slide's own top edge. An earlier version of this rule used
     top:-26px for a bigger escape and the glyph likely got clipped away
     almost entirely, which is the leading suspect for why this variant
     "didn't visibly change" in Austin's manual test — fixed by keeping
     the whole composition inside the slide's own bounds instead. */
  .style-signature .card-ph-slide{ position:relative; flex-basis:88%; background:none; border:none; box-shadow:none; padding:34px 10px 6px; overflow:hidden; }
  .style-signature .card-ph-slide::before{
    content:'\201C'; position:absolute; top:-6px; left:0; font-family:Georgia, 'Times New Roman', serif; font-size:96px; line-height:1;
    font-weight:800; background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
    opacity:0.9; pointer-events:none; z-index:0;
  }
  .style-signature .card-ph-video:not(.has-photo){ display:none; }
  .style-signature .card-ph-video.has-photo{ width:44px; height:44px; border-radius:50%; margin-bottom:10px; position:relative; z-index:1; box-shadow:0 0 0 2px var(--brand-ink-950), 0 0 0 3px var(--accent-violet-500); }
  .style-signature .card-ph-text{ position:relative; z-index:1; padding-left:2px; }
  .style-signature .card-ph-text .ph-label{
    font-size:19px; font-weight:700; text-transform:none; letter-spacing:0; line-height:1.4; color:var(--text-primary);
    font-family:'Plus Jakarta Sans', sans-serif; margin-bottom:8px;
  }
  .style-signature .card-ph-quote{ font-size:19px; font-weight:700; line-height:1.42; font-family:'Plus Jakarta Sans', sans-serif; }
  .style-signature .card-ph-quote::before, .style-signature .card-ph-quote::after{ content:''; }
  .style-signature .card-ph-attribution{ margin-top:14px; font-size:12.5px; color:var(--text-secondary); }
  .style-signature .card-ph-rating{ color:var(--accent-violet-500); }

  /* SERVICES — Index Deck: a giant translucent watermark numeral behind
     each card, icon becomes a small accent mark — a confident, editorial
     "index" feel instead of a plain icon-first card. */
  .style-signature .card-service-card{ position:relative; overflow:hidden; }
  .style-signature .card-service-card .s-icon{ width:34px; height:34px; background:none; border:none; margin-bottom:8px; }
  .style-signature .card-service-card h4::after{
    counter-increment:svc; content:counter(svc, decimal-leading-zero); position:absolute; right:10px; bottom:-10px;
    font-family:'JetBrains Mono', monospace; font-weight:800; font-size:64px; line-height:1; color:var(--text-primary);
    opacity:0.06; pointer-events:none; z-index:0;
  }
  .style-signature .card-hscroll{ counter-reset:svc; }
  .style-signature .card-service-card h4, .style-signature .card-service-card p{ position:relative; z-index:1; }

  /* OFFER — Statement: the number/figure becomes the dominant visual —
     huge scale, minimal surrounding chrome, reads like a premium
     announcement rather than a bordered card. */
  .style-signature .card-guarantee{ background:none !important; border:none !important; box-shadow:none !important; padding:10px 6px !important; text-align:center; }
  .style-signature .card-guarantee svg.icon{ display:none; }
  .style-signature .card-guarantee .card-eyebrow{ margin-top:0 !important; }
  .style-signature .card-guarantee .g-figure{
    font-size:clamp(52px, 16vw, 72px); margin-top:10px; line-height:1;
  }
  .style-signature .card-guarantee h2{ margin-top:8px; }
  .style-signature .card-guarantee .btn-primary{ margin-top:22px !important; }

  /* GALLERY — Stacked Deck: a premium overlapping photo-stack instead of
     a flat scroll row — each frame peeks out from behind the last. */
  .style-signature .card-gallery-scroll{ gap:0; padding-left:26px; padding-top:10px; }
  .style-signature .card-gallery-image{
    flex:0 0 72%; margin-left:-46px; border:3px solid var(--brand-ink-950); box-shadow:0 18px 40px -14px rgba(0,0,0,0.6); transition:transform .25s ease, z-index 0s;
  }
  .style-signature .card-gallery-image:first-child{ margin-left:0; }
  .style-signature .card-gallery-image:nth-child(1){ transform:rotate(-3deg); }
  .style-signature .card-gallery-image:nth-child(2){ transform:rotate(2deg); }
  .style-signature .card-gallery-image:nth-child(3){ transform:rotate(-2deg); }
  .style-signature .card-gallery-image:nth-child(4){ transform:rotate(3deg); }
  .style-signature .card-gallery-image:hover, .style-signature .card-gallery-image:focus-visible{ transform:rotate(0deg) translateY(-6px) scale(1.03); z-index:5; }

  /* FREE RESOURCE — Dossier: styled like a premium document/ticket —
     dashed "perforation" divider and a corner tab, reads as something
     tangible worth downloading rather than a plain promo card. */
  .style-signature .card-calc-cta{ position:relative; border:1px solid var(--border-glass-strong); background:var(--surface-glass); }
  .style-signature .card-calc-cta::before{
    content:''; position:absolute; top:0; bottom:0; right:74px; width:0;
    border-left:2px dashed var(--border-glass-strong); pointer-events:none;
  }
  .style-signature .card-calc-cta::after{
    content:'GET IT'; position:absolute; top:0; right:0; bottom:0; width:74px; display:flex; align-items:center; justify-content:center;
    writing-mode:vertical-rl; text-orientation:mixed; font-family:'JetBrains Mono', monospace; font-size:10px; font-weight:700;
    letter-spacing:0.12em; color:var(--accent-cyan-400); background:var(--brand-gradient-soft); border-radius:0 20px 20px 0; pointer-events:none;
  }
  .style-signature .card-calc-cta{ padding-right:96px !important; text-align:left; }
  .style-signature .card-calc-cta .btn-primary{ width:auto !important; }

  /* CONTACT FORM — Concierge: an elevated intake experience — a solid
     accent rail down the left edge and tightened, "handled personally"
     framing instead of the plain glass card. */
  .style-signature .card-form .card-section-inner{
    border-left:3px solid var(--accent-violet-500); border-radius:6px 20px 20px 6px !important; background:var(--surface-glass);
  }
  .style-signature .card-form .card-eyebrow{
    background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; font-weight:800;
  }
  .style-signature .card-form input, .style-signature .card-form textarea{ border-radius:8px; }

  /* FINAL CTA — Phase 2.5 §11: the previous "Marquee" gradient-banner
     concept is RETIRED after repeatedly failing readability QA (its
     root cause — grad-text painted against an identical background
     gradient — was fixed once already, but the direction itself is
     replaced rather than patched again per explicit instruction).
     HORIZON: the section keeps its normal dark/neutral card surface —
     headline stays in ordinary solid + .grad-text colors with zero
     collision risk, since there is no gradient fill behind it to
     collide with — and gets its drama from an illuminated horizon line
     low in the section (a soft shimmering light band) plus a gentle
     radial glow rising behind the headline/button. Motion supports the
     copy without ever competing with it. */
  .style-signature.card-final-cta{ position:relative; overflow:hidden; padding-top:8px; padding-bottom:26px; }
  .style-signature.card-final-cta::before{
    content:''; position:absolute; left:50%; bottom:38%; width:240px; height:240px; transform:translateX(-50%);
    background:radial-gradient(ellipse 60% 55% at 50% 100%, var(--accent-violet-glow), transparent 70%);
    pointer-events:none; z-index:0; animation:cs2HorizonBreathe 5s ease-in-out infinite;
  }
  .style-signature.card-final-cta::after{
    content:''; position:absolute; left:8%; right:8%; bottom:18px; height:1.5px; z-index:0; pointer-events:none;
    background:linear-gradient(90deg, transparent, var(--accent-rose-500) 20%, var(--accent-violet-500) 50%, var(--accent-cyan-400) 80%, transparent);
    background-size:200% 100%; opacity:0.7; animation:shimmer 6s ease-in-out infinite;
    box-shadow:0 0 16px 1px var(--accent-violet-glow);
  }
  .style-signature.card-final-cta > *{ position:relative; z-index:1; }
  .style-signature.card-final-cta .btn-primary{ box-shadow:0 0 0 1px var(--border-glass-strong), 0 10px 30px -8px var(--accent-violet-glow) !important; }
  @keyframes cs2HorizonBreathe{ 0%,100%{ opacity:0.7; } 50%{ opacity:1; } }
  @media (prefers-reduced-motion:reduce){
    .style-signature.card-final-cta::before, .style-signature.card-final-cta::after{ animation:none; }
  }

  /* ==========================================================================
     ACTION LABEL FIT — every Action Style and its Thumb Dock variant.
     Labels never break or hyphenate inside a word; they wrap between words
     (overflow-wrap:break-word only splits one unbroken string, e.g. a URL,
     wider than its whole control — the emergency fallback). Grids use
     minmax(0,1fr) so a label can never push a column off the card.
     behavior.js fitActions() measures the rendered labels and, only when a
     word would still break or two controls would overlap, sets
     data-fit="1" (then "2") on that .card-actions; each style below says
     what its roomier form is. Where everything fits, nothing changes.
     ========================================================================== */
  .card-action .a-label{ overflow-wrap:break-word; word-break:normal; -webkit-hyphens:manual; hyphens:manual; }
  .card-actions.is-fitting, .card-actions.is-fitting *{ transition:none !important; }
  .card-action .a-label.has-unbroken{ overflow-wrap:anywhere; }
  /* Original family + Thumb Dock grids (icon above label): centred wrapping;
     the approved 4 columns stay as they are, and when a label would push a
     column past the card (or break), 3 -> 2 equal columns that can never
     grow past it. */
  .card-actions:is(:not([data-action-layout]), [data-action-layout="original-refined"], [data-action-layout="original-contact-first"], [data-action-layout="thumb-dock"]) .card-action .a-label{ max-width:100%; text-align:center; }
  .card-actions:is(:not([data-action-layout]), [data-action-layout="original-refined"], [data-action-layout="original-contact-first"], [data-action-layout="thumb-dock"])[data-fit] .card-action{ min-width:0; }
  .card-actions:is(:not([data-action-layout]), [data-action-layout="original-refined"], [data-action-layout="original-contact-first"])[data-fit="1"]{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .card-actions:is(:not([data-action-layout]), [data-action-layout="original-refined"], [data-action-layout="original-contact-first"])[data-fit="2"]{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .card-hero[data-hero="thumb-dock"] .card-actions[data-action-layout="thumb-dock"][data-fit="1"]{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .card-hero[data-hero="thumb-dock"] .card-actions[data-action-layout="thumb-dock"][data-fit="2"]{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  /* Command Tiles: the label drops under the chip and the tile grows;
     still too tight: one tile per row (a solo tile then spans too). */
  .card-actions[data-action-layout="command-tiles"] .card-action{ position:relative; flex-wrap:wrap; align-content:center; row-gap:6px; }
  .card-actions[data-action-layout="command-tiles"] .card-action .a-label{ flex:1 1 auto; min-width:0; max-width:100%; }
  .card-actions[data-action-layout="command-tiles"][data-fit] .card-action{ grid-column:1 / -1; }
  .card-actions[data-action-layout="command-tiles"][data-fit] .card-action.is-solo{ width:auto; justify-self:stretch; }
  /* Pass Stack: a slightly smaller title step, then tighter strips. */
  .card-actions[data-action-layout="pass-stack"][data-fit] .card-action .a-label{ font-size:14.5px; }
  .card-actions[data-action-layout="pass-stack"][data-fit] .ps-strip{ gap:10px; padding-left:10px; padding-right:12px; }
  .card-actions[data-action-layout="pass-stack"][data-fit="2"] .card-action .a-label{ font-size:13.5px; }
  /* Editorial Index: a smaller type step (numeral, entry, Exchange). */
  .card-actions[data-action-layout="editorial-index"][data-fit]{ grid-template-columns:minmax(0,1fr); }
  .card-actions[data-action-layout="editorial-index"][data-fit] .card-action:nth-child(odd){ border-left:0; padding-left:2px; }
  .card-actions[data-action-layout="editorial-index"][data-fit] .card-action:nth-child(odd)::after{ left:0; }
  .card-actions[data-action-layout="editorial-index"][data-fit="2"] .card-action .a-label{ font-size:15.5px; }
  /* Engraved Plate: pairs take the plate's own narrow form (medallion above
     label); then a calmer letter-spacing. */
  .card-actions[data-action-layout="engraved-plate"][data-fit] .ep-row.is-pair .card-action,
  .card-actions[data-action-layout="engraved-plate"][data-fit] .ep-row.is-pair .card-action.ep-l{ flex-direction:column; justify-content:center; gap:9px; min-height:96px; text-align:center; }
  .card-actions[data-action-layout="engraved-plate"][data-fit] .ep-row.is-pair .card-action .a-label{ flex:none; max-width:100%; }
  .card-actions[data-action-layout="engraved-plate"][data-fit="2"] .card-action .a-label{ letter-spacing:0; font-size:14px; }
  /* Axis: icon above label on each side of the axis; then a smaller step. */
  .card-actions[data-action-layout="axis"][data-fit] .card-action{ flex-direction:column; justify-content:center; text-align:center; gap:8px; padding:6px 4px; border-radius:22px; }
  .card-actions[data-action-layout="axis"][data-fit] .card-action .a-label{ flex:none; max-width:100%; }
  .card-actions[data-action-layout="axis"][data-fit="2"] .card-action .a-label{ font-size:14.5px; }

  /* Official brand social icons (actions.socialIconStyle = 'brand'): the
     artwork keeps its own colours — no theme gradient, glow or recolouring
     from any action style. Same box as the themed glyph. */
  .card-hero svg.brand-icon{ stroke:none !important; filter:none !important; overflow:visible; }
  .card-hero svg.brand-icon *{ stroke:none !important; }
  .card-hero .a-shine svg.brand-icon{ display:none; }

  /* Official brand logos never render below the strictest published
     on-screen minimum (LinkedIn's [in]: 21px tall) — 22px floor in every
     preset; containers that size their icon smaller grow to fit it. */
  .card-hero .card-actions .a-icon > svg.brand-icon{ min-width:27px !important; min-height:27px !important; flex:none; }
  /* LinkedIn's bug keeps its native 635:540 proportion (with its ® mark): 22px tall. */
  .card-hero .card-actions .a-icon > svg.brand-icon.is-linkedin{ width:auto !important; aspect-ratio:635 / 540; min-width:32px !important; }
  .card-hero .card-actions .a-icon > svg.brand-icon.is-linkedin.is-white{ aspect-ratio:840 / 779; min-width:29px !important; }
  /* Instagram: Meta's stated minimum glyph size is 29 x 29px. */
  .card-hero .card-actions .a-icon > svg.brand-icon.is-instagram{ min-width:29px !important; min-height:29px !important; }
  .card-hero .card-actions[data-action-layout="editorial-index"] .a-icon:has(> svg.brand-icon){ width:24px !important; height:24px !important; }
  /* Clear space for brand logos (Facebook: a quarter of the logo's width)
     — chips that are tighter than 22 + 2x5.5px grow to 34px. */
  .card-hero .card-actions:is([data-action-layout="command-tiles"], [data-action-layout="segmented-bars"]) .a-icon:has(> svg.brand-icon){ min-width:34px !important; min-height:34px !important; }
  /* Room around the 29px Instagram glyph in the compact chips (Meta
     publishes no clear-space figure for the glyph; this is our spacing). */
  .card-hero .card-actions:is([data-action-layout="command-tiles"], [data-action-layout="segmented-bars"], [data-action-layout="pass-stack"]) .a-icon:has(> svg.brand-icon){ min-width:41px !important; min-height:41px !important; }

  /* External destinations (side buttons / Form set to a URL): a small ↗ after
     the label says it leaves the card; the accessible name says so too. */
  .card-hero a.is-external .sb-label::after,
  .card-hero a.td-u.is-external > span:last-child::after{ content:'\2009\2197'; font-size:0.85em; opacity:0.75; }

  /* Keeps the photo centred when the Form side button is withheld (external
     form chosen without a valid URL). */
  .card-hero .card-side-btn.is-placeholder{ visibility:hidden; pointer-events:none; }