/* Hang marketing site — design tokens + shared primitives (Meridian).
   Single source of truth for colors, type, spacing personality, radii, shadows,
   the canonical phone frame, motion, and marquee patterns. Pages link this
   BEFORE their inline page styles; page CSS may override locally but must not
   redefine tokens. Filename stays tokens.v1.css — pages hardcode the path.

   Doctrine: HANG-DESIGN-SYSTEM.md, palette per the product's Meridian light
   theme. Paper-only: the marketing site never inverts for prefers-color-scheme.
   Tokens still carry light-dark() pairs in oklch (hex in comments); they
   resolve to the light value because html is `color-scheme: only light`. */

/* ---------- fonts ---------- */
@font-face { font-family:'Archivo'; font-style:normal; font-weight:300 900; font-stretch:100%; font-display:swap; src:url("/v4/fonts/archivo-ext.woff2") format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Archivo'; font-style:normal; font-weight:300 900; font-stretch:100%; font-display:swap; src:url("/v4/fonts/archivo.woff2") format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:100 900; font-display:swap; src:url("/v4/fonts/fraunces-latin.woff2") format('woff2'); }
@font-face { font-family:'Fraunces'; font-style:italic; font-weight:100 900; font-display:swap; src:url("/v4/fonts/fraunces-latin-italic.woff2") format('woff2'); }
/* Metric-matched local fallbacks (computed from the font files) — no visible reflow when the webfonts land */
@font-face { font-family:'Archivo Fallback'; src:local('Arial'); size-adjust:101.9%; ascent-override:86.16%; descent-override:20.61%; line-gap-override:0%; }
@font-face { font-family:'Fraunces Fallback'; src:local('Georgia'); size-adjust:116.28%; ascent-override:84.11%; descent-override:21.93%; line-gap-override:0%; }

/* ---------- tokens ---------- */
/* Each color is a light-dark(oklch, oklch) pair; the oklch values are exact
   conversions of the hex shown in the trailing comment (light | dark). */
:root{
  /* surfaces */
  /* Night surfaces follow the product's Obsidian ladder (cdp-frontend
     app/globals.css .dark): warm charcoal with chroma cut below the
     hue-naming threshold — instrument-grade, never brown. Site and app
     share one dark room. */
  --paper:light-dark(oklch(97.6% 0.0082 91.48), oklch(21.38% 0.0042 84.59));      /* #F9F7F1 | #1A1917 — the page */
  --panel:light-dark(oklch(100% 0 0), oklch(24.88% 0.0063 78.21));                /* #FFFFFF | #23211E — cards, windows */
  --chat:light-dark(oklch(93.72% 0.0112 89.73), oklch(26.1% 0.0079 84.59));       /* #EDEAE2 | #262420 — chat/composer track floor */
  --wash:light-dark(oklch(95.55% 0.0099 87.47), oklch(29.28% 0.0126 93.86));      /* #F3F0E9 | #2E2C25 — soft tinted fills */

  /* ink ramp */
  --ink:light-dark(oklch(21.08% 0.0098 173.15), oklch(93.72% 0.0112 89.73));      /* #141A18 | #EDEAE2 */
  --ink-hover:light-dark(oklch(33.03% 0.0089 173.78), oklch(87.57% 0.0181 92.7)); /* #313735 | #DAD6C9 */
  --body:light-dark(oklch(40.78% 0.0065 106.69), oklch(82.3% 0.0184 92.72));      /* #4A4A46 | #C9C5B8 */
  --label:light-dark(oklch(49.1% 0.0078 106.68), oklch(70.92% 0.0163 90.28));     /* #61615C | #A5A196 */
  --muted:light-dark(oklch(63.19% 0.0073 106.61), oklch(64.97% 0.0194 92.77));    /* #8A8A85 | #938F82 */
  --icon:light-dark(oklch(49.1% 0.0078 106.68), oklch(70.92% 0.0163 90.28));      /* #61615C | #A5A196 */
  --faint:light-dark(oklch(73.98% 0.0071 106.57), oklch(51.03% 0.0191 91.69));    /* #ABABA6 | #6A665A */

  /* lines */
  --hairline:light-dark(oklch(88.35% 0.0026 165.07), oklch(31.79% 0.0128 87.56));  /* #D7D9D8 | #35322B */
  --border:light-dark(oklch(82.16% 0.0026 165.06), oklch(39.43% 0.0202 91.76));   /* #C3C5C4 | #4A463A */
  --line-soft:light-dark(oklch(88.35% 0.0026 165.07), oklch(31.79% 0.0128 87.56)); /* #D7D9D8 | #35322B */
  --heavy:light-dark(oklch(69.57% 0.0048 179.67), oklch(47.81% 0.0208 92.87));     /* #9A9E9D | #615D50 */
  --dot:light-dark(oklch(86.54% 0.0068 106.54), oklch(31.75% 0.0144 89.89));      /* #D3D3CE | #35322A */

  /* signals */
  --green:light-dark(oklch(54.38% 0.1189 152.21), oklch(73.69% 0.1073 154.99));         /* #2C834C | #6FBE8C */
  --green-deep:light-dark(oklch(48.54% 0.1002 152.16), oklch(79.3% 0.0893 155.47));     /* #2A6F42 | #8CCDA3 */
  --green-tint:light-dark(oklch(94.57% 0.0191 152.81), oklch(28.13% 0.0325 154.62));    /* #E4F1E7 | #1C2E22 */
  --green-border:light-dark(oklch(87.52% 0.0356 150.49), oklch(37.19% 0.0425 154.16));  /* #C6DDCA | #2E4736 */
  --amber:light-dark(oklch(54.54% 0.1052 83.99), oklch(75.43% 0.1208 83.37));           /* #8D6A14 | #D4A84C — product-UI only */
  --amber-tint:light-dark(oklch(94.45% 0.0172 84.59), oklch(26.25% 0.0273 88.61));      /* #F2ECE0 | #2A2415 */
  --error:light-dark(oklch(43.47% 0.1081 31.62), oklch(71.9% 0.1093 32.58));            /* #823629 | #E08A78 */

  /* type */
  --font-ui:'Archivo','Archivo Fallback',system-ui,sans-serif;
  --font-prose:'Fraunces','Fraunces Fallback',Georgia,serif;

  /* radii */
  --r-btn:6px; --r-card:12px; --r-window:10px; --r-note:13px; --r-sheet:28px;

  /* shadows — marketing chrome is cool ink; product windows keep the product's
     own warm shadow (drawn pixels ship as-is) */
  --shadow-note:0 28px 56px -20px rgba(20,26,24,.3), 0 4px 14px -8px rgba(20,26,24,.14);
  --shadow-card:0 1px 2px rgba(20,26,24,.04), 0 28px 48px -30px rgba(20,26,24,.22);
  --shadow-window:0 30px 56px -30px rgba(20,26,24,.3);
  --shadow-sheet:0 -22px 44px rgba(20,26,24,.08);
  --shadow-phone:0 24px 48px -20px rgba(20,26,24,.45);
  --shadow-product-window:0 1px 2px rgba(16,15,12,.05), 0 18px 40px -24px rgba(16,15,12,.2);

  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-fast:.15s; --t-med:.32s; --t-slow:.5s;

  /* layout */
  --page-max:1296px; --page-pad:64px;

  /* ---- vertical rhythm (2026 harmonization audit) ----
     8px-grid spacing scale, then role tokens: heading-block internals
     (gap-*) and section-boundary pads (pad-*). Chapter hairlines sit
     centered: --pad-chapter above and below. Seams (sheet edges) clear
     --pad-seam-chapter to the next eyebrow; utility bands (logo strip,
     footer) run the tighter utility pads. */
  --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-5:40px; --sp-6:48px; --sp-8:64px; --sp-10:80px; --sp-13:104px; --sp-16:128px;
  --gap-eyebrow:var(--sp-2); --gap-eyebrow-display:var(--sp-3); --gap-sub:var(--sp-3); --gap-actions:var(--sp-4); --gap-content:var(--sp-5); --gap-artifact:var(--sp-8);
  --pad-chapter:var(--sp-13); --pad-coda:var(--sp-10); --pad-seam-chapter:var(--sp-16); --pad-seam-utility:var(--sp-6); --pad-utility-b:var(--sp-4);
  --rhythm-mobile:.625;
}

/* Tablet / hamburger chrome (≤1080): 40px gutters. Desktop ≥1081 keeps 64px. */
@media (max-width:1080px){
  :root{ --page-pad:40px; }
}

/* Mobile rhythm law (≤760): macro pads (≥80px) scale by --rhythm-mobile
   snapped to the 8-grid (104→64, 128→80, 80→48); micro gaps (≤64px) hold. */
@media (max-width:760px){
  :root{
    --pad-chapter:calc(8px * round(nearest, var(--sp-13) * var(--rhythm-mobile) / 8px));
    --pad-seam-chapter:calc(8px * round(nearest, var(--sp-16) * var(--rhythm-mobile) / 8px));
    --pad-coda:calc(8px * round(nearest, var(--sp-10) * var(--rhythm-mobile) / 8px));
  }
  .eyebrow{font-size:12px;}
}

/* ---------- cross-document view transitions ---------- */
/* Same-origin navigations crossfade; the site header keeps its own snapshot
   (view-transition-name:site-header is set per page on the header element). */
@view-transition { navigation: auto; }

/* ---------- base ---------- */
*{box-sizing:border-box;}
html{color-scheme:only light;scroll-behavior:smooth;overflow-x:clip;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;font-optical-sizing:auto;overflow-x:clip;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
::selection{background:var(--ink);color:var(--paper);}
a:focus-visible, button:focus-visible, input:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
.skip-link{position:fixed;left:-9999px;top:12px;z-index:100;padding:10px 16px;background:var(--ink);color:var(--paper);border-radius:var(--r-btn);font-size:13px;font-weight:600;}
.skip-link:focus{left:16px;}

/* ---------- shared keyframes ---------- */
@keyframes hb-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}
@keyframes hb-rise{from{transform:translateY(9px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes wb-breathe{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.86)}}
@keyframes wb-shim{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes lb-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Reduced motion: kill animation/transition globally; each living element must
   also ship a composed still (game engines paint a mid-game frame; scenes ship
   settled). */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
  html{scroll-behavior:auto !important;}
  /* view transitions snap instead of animating (the * selector can't reach these pseudos) */
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){animation:none !important;}
}

/* ---------- shared utilities ---------- */
.wrap{max-width:var(--page-max);margin:0 auto;padding-left:var(--page-pad);padding-right:var(--page-pad);}
.eyebrow{margin:0;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--label);}
.btn-primary{display:inline-flex;align-items:center;padding:14px 26px;border-radius:var(--r-btn);background:var(--ink);color:var(--paper);font-weight:600;font-size:14.5px;border:none;cursor:pointer;font-family:var(--font-ui);}
.btn-secondary{display:inline-flex;align-items:center;padding:14px 22px;border-radius:var(--r-btn);border:1px solid var(--border);color:var(--ink);font-weight:600;font-size:14.5px;}
.link-arrow{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;}
.nav-link{font-size:13.5px;font-weight:500;color:var(--body);}
.dot-grid{position:absolute;inset:0;background-image:radial-gradient(var(--dot) 1px, transparent 1px);background-size:24px 24px;}

/* hover utilities shared by hand-built pages (style-attribute-safe overrides).
   Gated so a first tap on iOS does not stick hover paint. */
@media (hover:hover) and (pointer:fine){
  .hv1:hover{color:var(--ink) !important;}
  .hv2:hover{background:var(--ink-hover) !important;}
  .hv3:hover{border-color:var(--ink) !important;}
  .hv4:hover{opacity:.7 !important;}
  .hv5:hover{border-color:var(--paper) !important;}
  .hv7:hover{color:var(--ink) !important;border-color:var(--faint) !important;}
  .btn-primary:hover{background:var(--ink-hover);}
  .btn-secondary:hover{border-color:var(--ink);}
  .link-arrow:hover{opacity:.7;}
  .nav-link:hover{color:var(--ink);}
}

/* ---------- canonical phone frame (443/924 — never stretch a device) ---------- */
/* Titanium CSS frame whose screen hosts baked webps or a live game canvas.
   Device hardware keeps its own material colors — not page palette. */
.mg-phone{position:relative;aspect-ratio:443/924;border-radius:15.2%/7.3%;overflow:hidden;background:linear-gradient(145deg,#46464A,#1B1B1E 28%,#0D0D10 72%,#323236);}
.mg-phone::after{content:'';position:absolute;inset:.4% .84%;border-radius:14%/6.72%;border:1.5px solid rgba(255,255,255,.14);pointer-events:none;}
.mg-phone .mg-screen{position:absolute;inset:1.6% 3.34%;border-radius:12.3%/5.7%;overflow:clip;background:#FFEED2;}

/* ---------- end-user stage (product pages) ---------- */
/* The homepage loyalty-fan grammar, shared: end-user phone shots sit upright
   on a dot-grid paper stage that dissolves at the edges. The stage fixes the
   composition's aspect ratio; each .eu-shot is a transparent 443/924 webp
   placed with inline left/top/width/z-index (geometry stays per-section, the
   material language is shared). The lead shot carries the heavier paper
   shadow. The homepage keeps its own inline copy of this pattern. */
.eu-stage{position:relative;max-width:640px;margin:0 auto;}
.eu-fan{position:relative;aspect-ratio:620/656;}
.eu-grid{position:absolute;inset:0;display:var(--grid-disp,block);background-image:radial-gradient(var(--dot) 1px, transparent 1px);background-size:24px 24px;-webkit-mask-image:radial-gradient(ellipse at 50% 48%, #000 45%, transparent 84%);mask-image:radial-gradient(ellipse at 50% 48%, #000 45%, transparent 84%);}
.eu-shot{position:absolute;aspect-ratio:443/924;height:auto;filter:drop-shadow(0 26px 44px rgba(20,26,24,.18)) brightness(.985);}
.eu-shot--lead{filter:drop-shadow(0 38px 60px rgba(20,26,24,.3));}

/* Portal-scene wallpaper (§7.2): the painting stays lit; a floor-loading
   scrim gives the window's shadow a place to land. Never a flat dark slab. */
.scene-dim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(20,26,24,.08) 0%,rgba(20,26,24,.13) 52%,rgba(20,26,24,.24) 100%);}

/* ---------- marquee pattern ---------- */
/* A marquee track is a duplicated flex row animated with lb-marq; the viewport
   gets the edge dissolve. Hover pauses. Reverse rows use `animation-direction:
   reverse`. */
.edge-fade{-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);}
.marq-track{display:flex;width:max-content;align-items:center;animation:lb-marq linear infinite;}
@media (hover:hover) and (pointer:fine){
  .marq-viewport:hover .marq-track{animation-play-state:paused;}
}

/* ---------- browser chrome (§5.5 — one window pattern, every page) ---------- */
/* Web software wears honest chrome: 34px titlebar, three traffic lights,
   centered URL pill. Drawn windows stay paper documents, so the chrome
   keeps literal light values, not tokens. */
.capture-bar{height:34px;padding:0 14px;display:flex;align-items:center;gap:6px;background:#F9F7F1;border-bottom:1px solid #D7D9D8;position:relative;z-index:8;}
.capture-dots{display:flex;align-items:center;gap:6px;flex:none;}
.capture-dots i{width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12);}
.capture-dots i:nth-child(1){background:#FF5F57;}
.capture-dots i:nth-child(2){background:#FEBC2E;}
.capture-dots i:nth-child(3){background:#28C840;}
.capture-url{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:6px;padding:3px 12px;border-radius:6px;background:#FFFFFF;border:1px solid #D7D9D8;font-size:10.5px;color:#61615C;letter-spacing:.02em;white-space:nowrap;}

/* ---------- scroll reveals (JS-armed, /site/reveal.v1.js) ---------- */
/* The homepage rise-in grammar, shared: reveal targets (.v-rise, section
   heads) and ledger rows rise 18px as they enter the viewport. The reveal
   script arms elements (.rv, lists as .rv-list) and an IntersectionObserver
   settles them (.is-in) on entry — rows staggered per index via --rvd.
   These rode view() timelines before, but Chromium snapshots a composited
   view timeline against the scroll offset: when layout shifts under a held
   scroll position (lazy images, font swaps, restored mid-page reloads) the
   progress goes stale and rows strand half-faded until the next scroll.
   No JS, no IO, or reduced motion → nothing armed, settled state. */
.rv, .rv-list > li{opacity:.001;transform:translateY(18px);}
/* settled transform is none, not 0 — the pre-reveal grammar left no transform
   behind, and a kept transform would mint stacking contexts that never
   existed (none still interpolates as identity, so the rise animates). */
.rv.is-in, .rv-list.is-in > li{opacity:1;transform:none;transition:opacity .6s ease var(--rvd,0s),transform .6s var(--ease) var(--rvd,0s);}
@media (prefers-reduced-motion: reduce){
  .rv, .rv-list > li{opacity:1;transform:none;transition:none;}
}

/* ---------- the close (§8) ---------- */
/* One serif close for every page: Fraunces display with an italic beat. */
.close-display{font-family:var(--font-prose);font-optical-sizing:auto;font-size:clamp(40px,4.7vw,64px);line-height:1.04;font-weight:560;letter-spacing:-.022em;margin:0;color:var(--ink);text-wrap:balance;}
.close-display em{font-style:italic;font-weight:520;letter-spacing:-.01em;}

/* ---------- feature ledger (product-page "Everything included") ---------- */
/* The homepage index grammar, exhaustive: grouped newspaper columns with
   hairline rules, short Title-case rows. Column count matches group count
   (.fl-3 for three groups); ≤1080 two columns, ≤760 stacked with two-up rows. */
.fl-head{display:flex;align-items:flex-end;justify-content:space-between;gap:26px 32px;flex-wrap:wrap;margin-bottom:6px;}
.fl-head h3{max-width:600px;margin:var(--gap-eyebrow) 0 0;font-size:clamp(28px,3.2vw,42px);line-height:1.07;font-weight:650;letter-spacing:-.038em;color:var(--ink);text-wrap:balance;}
.fl-sub{max-width:500px;margin:var(--gap-sub) 0 0;font-size:0.938rem;line-height:1.62;color:var(--body);text-wrap:pretty;}
.fl-grid{display:grid;grid-template-columns:repeat(4,1fr);column-gap:48px;row-gap:52px;margin-top:var(--gap-content);}
.fl-grid.fl-3{grid-template-columns:repeat(3,1fr);}
.fl-col{min-width:0;}
.fl-col + .fl-col{border-left:1px solid var(--hairline);margin-left:-24px;padding-left:24px;}
.fl-colhead{display:flex;align-items:baseline;padding-bottom:11px;border-bottom:1px solid var(--hairline);}
.fl-colhead h4{margin:0;font:600 11px/1 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);}
.fl-list{margin:0;padding:0;list-style:none;}
.fl-list li{padding:11px 0;border-bottom:1px solid var(--hairline);font-size:14.5px;font-weight:600;letter-spacing:-.015em;line-height:1.35;color:var(--ink);}
@media (max-width:1080px){
  .fl-grid, .fl-grid.fl-3{grid-template-columns:1fr 1fr;row-gap:46px;}
  .fl-col + .fl-col{border-left:0;margin-left:0;padding-left:0;}
  .fl-col:nth-child(even){border-left:1px solid var(--hairline);margin-left:-24px;padding-left:24px;}
}
@media (max-width:760px){
  .fl-grid, .fl-grid.fl-3{display:block;margin-top:26px;}
  .fl-col:nth-child(even){border-left:0;margin-left:0;padding-left:0;}
  .fl-col + .fl-col{margin-top:34px;}
  .fl-list{display:grid;grid-template-columns:1fr 1fr;column-gap:14px;}
  .fl-list li{padding:10px 0;font-size:13px;}
  /* Portal peek: keep the 880px desktop window, zoom it into the scene.
     Never reflow chat/canvas into a phone-shaped stack, never flex-shrink
     the artifact. Zoom .50 fits a whole canvas beat (~616px metrics row +
     chart, both journey arms) in a ~332px scene; settled --peek-x is a
     modest pan that frames the Mac window and centers the editor canvas
     (not the chat rail, not a strip of leftover painting). 300px-chat
     bands pan a little further past the wider thread. Motion-OK visitors
     ease there from the chat+canvas start via .peek-armed / .is-panned
     (reveal.v1.js). Hover lift stays desktop-only. #lo4 is a phone frame,
     not a window. */
  .scene.band{padding:18px 0 0 !important;}
  .scene.band > [data-anim]:not(.mg-phone){
    --peek-x:-130px;
    width:880px !important;
    max-width:none !important;
    min-width:880px !important;
    flex:none !important;
    margin-top:0 !important;
    margin-right:0 !important;
    margin-bottom:20px !important;
    margin-left:var(--peek-x) !important;
    zoom:.50 !important;
    -webkit-mask-image:none;
    mask-image:none;
  }
  .scene.band > [data-anim]:not(.mg-phone).peek-armed{--peek-x:0px;}
  .scene.band > [data-anim]:not(.mg-phone).peek-armed.is-panned{
    --peek-x:-130px;
    transition:margin-left 1.25s var(--ease);
  }
  /* 300px chat (CDP AI-agent band) — pan just past the thread. */
  .scene.band > [data-anim]:not(.mg-phone):has([data-pane="chat"][style*="width:300px"]){--peek-x:-180px;}
  .scene.band > [data-anim]:not(.mg-phone):has([data-pane="chat"][style*="width:300px"]).peek-armed{--peek-x:0px;}
  .scene.band > [data-anim]:not(.mg-phone):has([data-pane="chat"][style*="width:300px"]).peek-armed.is-panned{--peek-x:-180px;}
  .scene.band [data-pane="canvas"]{width:616px !important;right:auto !important;}
  .scene.band::after{
    content:"";
    position:absolute;
    inset:0 0 0 auto;
    width:36px;
    z-index:4;
    pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(20,26,24,.16));
    border-radius:0 12px 12px 0;
  }
  /* Three-phone fan stays a fan — tighter overlap, every phone visible.
     !important beats per-shot inline left/width. */
  .eu-fan:has(> .eu-shot--lead) > .eu-shot:not(.eu-shot--lead){width:36% !important;}
  .eu-fan:has(> .eu-shot--lead) > img.eu-shot:nth-of-type(1){left:0 !important;top:10% !important;}
  .eu-fan:has(> .eu-shot--lead) > img.eu-shot:nth-of-type(2){left:62% !important;top:10% !important;}
  .eu-fan > .eu-shot--lead{width:42% !important;left:28% !important;top:2% !important;}
}
@media (max-width:520px){
  .fl-list{grid-template-columns:1fr;}
}

/* Invisible tap expansion for SOC 2 / GDPR chips — desktop 9.5px look stays. */
@media (max-width:1080px){
  .badge, .xl-tap{position:relative;}
  .badge::after, .xl-tap::after{content:"";position:absolute;left:0;right:0;top:-13px;bottom:-13px;}
}