/* ==========================================================================
   OUR GOOGLE ADS SERVICES — the section applied from
   /gads-card-colour-solid-k4/k01.html (Moment Rail on the Google Container
   palette). The lab's three stylesheets, copied verbatim apart from the
   scoping note below and the removal of its preview chrome.
   ========================================================================== */

/* ==========================================================================
   OUR GOOGLE ADS SERVICES — concept-visual cards
   No devices, no screens, no browser frames. Each card carries one large
   scene that fills its well and explains the service on sight.
   Hierarchy, in order of weight: title, scene, benefit, then everything else.
   Class prefix is `w4-` / `cv-` / `wc-`; nothing reuses a live-page name.
   ========================================================================== */
/* --------------------------------------------------------------------------
   TOKENS, SCOPED
   The lab page owned the document, so it set these on :root. Here the page
   already has its own :root with the same names and slightly different
   values, so the section's palette is scoped to the section itself and to
   the two overlays it opens at body level. Nothing outside them changes.
   Kept as a class, not an id, so `.sv{--maxw:1400px}` below still wins.
   -------------------------------------------------------------------------- */
.gsvc, .k-scrim, .k-panel, .hrv-scrim, .hrv{
  --paper:#FFFFFF; --ink:#0B0D12; --ink-2:#3A414C; --ink-3:#767E8B; --ink-4:#A7AEB9;
  --line:#E7EAEF; --line-2:#F1F3F7; --line-b:#E2E8F1;
  --ground:#F7F9FC; --ground-2:#EEF2F8; --mist:#F8FAFD;
  --g-blue:#1A73E8; --g-green:#188038; --g-green-b:#34A853; --brand:#0B57F5; --navy:#0F1B3D;
  --sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --shadow-xs:0 1px 2px rgba(15,27,61,.04);
  --shadow-s:0 1px 2px rgba(15,27,61,.04), 0 8px 22px rgba(15,27,61,.055);
  --shadow-m:0 2px 6px rgba(15,27,61,.05), 0 18px 44px rgba(15,27,61,.085);
  --shadow-l:0 4px 12px rgba(15,27,61,.06), 0 30px 66px rgba(15,27,61,.12);
  --ease:cubic-bezier(.4,0,.2,1); --rise:cubic-bezier(.22,1,.32,1);
  --maxw:1240px; --pad:clamp(18px,4vw,64px); --gut:18px;
  --h:#1A73E8; --hs:#EAF1FE; --he:#C8DDFC; --hd:#0B3FA8;
  color:var(--ink); font-family:var(--sans);
}
/* the four resets the section's markup relies on that the page does not
   already carry. Everything else in the lab's reset (box-sizing, p, a, img,
   h1-h3, [hidden], scroll-behavior) is identical on this page already. */
/* :where() so each one keeps the exact specificity it had as a bare element
   selector in the lab — a plain `.gsvc button` would out-rank `.sc` and strip
   the card's own border and background. */
:where(.gsvc, .k-panel, .hrv) h4{ margin:0; font-weight:800; letter-spacing:-.04em; text-wrap:balance; }
:where(.gsvc, .k-panel, .hrv) h2 i,
:where(.gsvc, .k-panel, .hrv) h3 i{ font-style:normal; color:var(--h); }
:where(.gsvc, .k-panel, .hrv) button{
  font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
:where(.gsvc, .k-panel, .hrv) ul{ margin:0; padding:0; list-style:none; }
/* the scroll lock the phone panel puts on the document */
body.k8-locked{ position:fixed; left:0; right:0; overflow:hidden; }


.k-wrap{ width:min(var(--maxw),100% - 2*var(--pad)); margin-inline:auto; }
.k-eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-2); font-weight:500; }
.k-h2{ margin:.42em 0 0; font-size:clamp(30px,4vw,50px); line-height:1.03; }
.k-sub{ margin-top:15px; font-size:clamp(15px,1.2vw,17.5px); line-height:1.6; color:var(--ink-2);
  max-width:58ch; }

/* ==========================================================================
   THE SCENE
   One well, one portrait composition, edge to edge. Everything scales from
   the well's own width so a scene reads the same at any card size, and the
   well itself carries a ground — a tinted wash, a soft glow and a hairline
   grid — so no frame is ever a flat white rectangle.
   ========================================================================== */
.cv-well{ container-type:inline-size; display:block; position:relative; width:100%;
  aspect-ratio:5/4; border-radius:16px; overflow:hidden; }
.cv{ position:absolute; inset:0; font-size:clamp(9px,4.4cqw,23px); line-height:1.3;
  background:
    radial-gradient(120% 78% at 8% -6%, var(--hs) 0%, rgba(255,255,255,0) 64%),
    radial-gradient(96% 62% at 110% 108%, var(--hs) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg,#FFFFFF 0%,#FBFCFE 46%,#F4F7FB 100%); }
.cv::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(var(--he) 1px,transparent 1px),
                   linear-gradient(90deg,var(--he) 1px,transparent 1px);
  background-size:2.4em 2.4em; opacity:.3;
  -webkit-mask-image:radial-gradient(130% 96% at 50% 4%,#000 0%,rgba(0,0,0,.35) 52%,transparent 84%);
          mask-image:radial-gradient(130% 96% at 50% 4%,#000 0%,rgba(0,0,0,.35) 52%,transparent 84%); }
/* .cv::after used to blow a 5.5em blurred wash of the service's own hue up from
   the foot of every drawing, so the bottom third of each picture — the product
   tiles, the result rows, the price line — sat under a haze. Removed
   2026-09-09: the well already carries the tint as a flat ground, and the
   drawing reads sharp to its own edge without it. */
.cv > *{ position:relative; z-index:1; }
.cv svg{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round;
  stroke-linejoin:round; }
.cv svg .f{ fill:currentColor; stroke:none; }
.cv svg .f2{ fill:var(--hs); stroke:none; }
.cv svg .sh{ fill:rgba(15,27,61,.09); stroke:none; }
.cv s{ display:block; height:.26em; border-radius:99px; background:#E4E9F1; }
.cv-tag{ align-self:flex-start; font-size:.5em; font-weight:750; letter-spacing:.06em;
  padding:.26em .58em; border-radius:.32em; background:var(--h); color:#fff; }

/* the rating mark, shared by Search and Shopping */
.cv-stars{ display:flex; align-items:center; gap:.4em; color:#F5A623; }
.cv-stars svg{ width:3.6em; height:auto; flex:none; }
.cv-stars svg .h{ opacity:.34; }
.cv-stars u{ display:none; }

/* 01 · SEARCH */
.cv-search{ display:flex; flex-direction:column; gap:.55em; padding:1.05em .95em; }
.cv-q{ flex:none; display:flex; align-items:center; gap:.5em; padding:.55em .5em .55em .85em;
  border-radius:99px; background:#fff; border:1px solid var(--line);
  box-shadow:0 .18em .5em rgba(15,27,61,.06); font-size:.68em; color:var(--ink-3); }
.cv-q svg{ width:1em; height:1em; color:var(--ink-4); stroke-width:2.4; flex:none; }
.cv-q span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cv-q em{ flex:none; font-style:normal; font-size:.78em; font-weight:700; color:#fff;
  background:var(--h); padding:.34em .8em; border-radius:99px; }
.cv-hero{ flex:none; display:flex; flex-direction:column; gap:.3em; padding:.85em .85em .9em;
  border-radius:.85em; background:#fff; border:1.5px solid var(--he);
  box-shadow:0 .7em 1.6em -.4em rgba(15,27,61,.18); }
.cv-name{ font-size:.9em; font-weight:800; letter-spacing:-.024em; color:var(--hd); line-height:1.2; }
.cv-url{ font-style:normal; font-size:.55em; color:#3C7A45; }
.cv-lines{ display:flex; flex-direction:column; gap:.22em; margin-top:.12em; }
.cv-lines s{ background:var(--he); }
.cv-acts{ display:flex; flex-wrap:wrap; gap:.32em; margin-top:.16em; }
.cv-acts u{ text-decoration:none; font-size:.52em; font-weight:700; padding:.34em .68em;
  border-radius:99px; background:var(--hs); color:var(--hd); }
.cv-div{ flex:none; display:flex; align-items:center; gap:.5em; font-family:var(--mono);
  font-size:.46em; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4); }
.cv-div::before,.cv-div::after{ content:""; flex:1; height:1px; background:var(--line); }
.cv-rest{ flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column;
  justify-content:space-between; gap:.4em; opacity:.9; }
.cv-r{ flex:1; display:flex; align-items:center; gap:.5em; }
.cv-r .cv-fav{ flex:none; width:1.05em; height:1.05em; border-radius:50%; background:#D3DBE7; }
.cv-rl{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.17em; }
.cv-rl s:nth-child(2){ height:.19em; background:#B9D0BE; }
.cv-rl s:first-child{ height:.3em; background:#BCC7D8; }
.cv-rl s:last-child{ background:#DCE2EB; }

/* 02 · SHOPPING */
.cv-shop{ display:flex; flex-direction:column; gap:.55em; padding:1.05em .95em; }
.cv-main{ position:relative; flex:1; min-height:0; display:flex; flex-direction:column; gap:.24em;
  padding:.7em; border-radius:.85em; background:#fff; border:1.5px solid var(--he);
  box-shadow:0 .7em 1.6em -.4em rgba(15,27,61,.18); }
.cv-main .cv-tag{ position:absolute; right:.55em; top:.55em; z-index:2; }
.cv-photo{ flex:1; min-height:0; display:grid; place-items:center; overflow:hidden;
  padding:.35em .5em;
  background:radial-gradient(58% 54% at 50% 44%, var(--hs) 0%, rgba(255,255,255,0) 74%); }
.cv-prod{ width:100%; height:100%; color:var(--hd); stroke-width:2.4; }
.cv-prod .f{ opacity:.16; }
.cv-prod .f2{ fill:#fff; }
.cv-pl{ margin-top:.2em; font-size:.55em; font-weight:650; color:var(--ink-2); line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cv-prow{ display:flex; align-items:baseline; gap:.45em; flex-wrap:wrap; }
.cv-price{ font-size:.98em; font-weight:800; letter-spacing:-.028em; color:var(--hd); }
.cv-was{ font-size:.5em; color:var(--ink-4); text-decoration:line-through; }
.cv-off{ font-size:.45em; font-weight:750; color:var(--hd); background:var(--hs);
  padding:.28em .55em; border-radius:99px; }
.cv-store{ font-style:normal; font-size:.5em; color:var(--ink-3); }
.cv-side{ flex:none; display:flex; flex-direction:row; gap:.45em; }
.cv-mini{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.18em; padding:.45em;
  border-radius:.6em; background:#fff; border:1px solid var(--line-2); opacity:.72; }
.cv-ph{ flex:none; width:100%; aspect-ratio:16/10; border-radius:.4em; background:#F3F6FA;
  display:grid; place-items:center; }
.cv-ph svg{ width:76%; height:auto; color:var(--ink-4); stroke-width:2.2; }
.cv-ph svg .f{ opacity:.16; }
.cv-mini em{ font-style:normal; font-size:.54em; font-weight:750; color:var(--ink-2); }
.cv-mini u{ text-decoration:none; font-size:.42em; color:var(--ink-4); }

/* 03 · REMARKETING */
.cv-remk{ display:flex; padding:1.05em .95em; }
.cv-jr{ position:relative; flex:1; display:flex; flex-direction:column; gap:.5em; }
.cv-jr::before{ content:""; position:absolute; left:.95em; top:1.6em; bottom:1.6em; width:2px;
  border-left:2px dashed var(--he); }
.cv-loop{ display:none; }
.cv-st{ position:relative; z-index:1; flex:1; display:flex; align-items:center; gap:.6em;
  padding:.7em .75em; border-radius:.7em; background:#fff; border:1px solid var(--line-2);
  box-shadow:0 .2em .6em -.2em rgba(15,27,61,.12); }
/* the node on the spine — a marker, not a numeral.  The last one is filled
   with a tick, because that row is the outcome and not another step. */
.cv-st > u{ flex:none; width:1.85em; height:1.85em; border-radius:50%; background:var(--hs);
  color:var(--hd); display:grid; place-items:center; text-decoration:none;
  font-size:.62em; font-weight:800; box-shadow:0 0 0 .3em #fff;
  border:.28em solid var(--he); }
.cv-st > u svg{ width:64%; height:64%; stroke-width:3.4; }
.cv-sm{ flex:1; min-width:0; }
.cv-st b{ display:block; font-size:.6em; font-weight:750; letter-spacing:-.018em; line-height:1.25;
  color:var(--ink); }
.cv-st i{ display:block; margin-top:.15em; font-style:normal; font-size:.48em; color:var(--ink-3); }
.cv-sg{ flex:none; display:grid; place-items:center; width:1.9em; height:1.9em; border-radius:.5em;
  background:var(--mist); box-shadow:inset 0 0 0 1px var(--line-2); }
.cv-sg svg{ width:1.05em; height:1.05em; color:var(--ink-4); stroke-width:1.9; }
.cv-st.is-end{ border-color:var(--he); background:var(--hs); }
.cv-st.is-end > u{ background:var(--g-green); color:#fff; border-color:var(--g-green); }
.cv-st.is-end b{ color:var(--hd); }
.cv-st.is-end .cv-sg{ background:#fff; box-shadow:inset 0 0 0 1px var(--he); }
.cv-st.is-end .cv-sg svg{ color:var(--hd); }

/* 04 · DISPLAY */
.cv-disp{ display:flex; padding:1.05em .95em 1.05em; }
.cv-page{ flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column;
  gap:.5em; padding:.9em .8em;
  border-radius:.8em; background:#fff; border:1px solid var(--line);
  box-shadow:0 .5em 1.2em -.5em rgba(15,27,61,.14); }
.cv-hl{ display:block; width:70%; height:.44em; border-radius:99px; background:#B7C1D1; }
.cv-by{ display:flex; }
.cv-by s{ height:.2em; background:#DCE2EB; }
.cv-para{ display:flex; flex-direction:column; gap:.26em; }
.cv-para s{ background:#DCE2EB; }
.cv-shot{ display:block; flex:none; width:100%; border-radius:.5em; overflow:hidden; }
.cv-scene-img{ width:100%; height:auto; color:var(--h); stroke-width:2.2; }
.cv-scene-img .f{ opacity:.2; }
.cv-scene-img .f2{ fill:var(--hs); }
.cv-disp .cv-para:last-child{ flex:1; justify-content:flex-start; }
.cv-ban{ position:absolute; left:10%; right:10%; bottom:9%; z-index:2; display:flex;
  flex-direction:column; gap:.24em; padding:.72em .8em; border-radius:.7em; background:#fff;
  border:1.5px solid var(--he); box-shadow:0 1em 2em -.5em rgba(15,27,61,.26); }
.cv-brand{ display:flex; align-items:center; gap:.45em; }
.cv-ban .cv-mk{ flex:none; width:1.45em; height:1.45em; border-radius:.38em;
  background:linear-gradient(140deg,var(--h),var(--hd)); }
.cv-ban b{ font-size:.74em; font-weight:800; letter-spacing:-.024em; color:var(--hd); }
.cv-ban u{ text-decoration:none; align-self:flex-start; margin-top:.2em; font-size:.5em;
  font-weight:700; padding:.36em .8em; border-radius:99px; background:var(--h); color:#fff; }

/* 05 · YOUTUBE */
.cv-yt{ display:flex; flex-direction:column; justify-content:center; gap:.7em;
  padding:1.05em .95em; }
.cv-plate{ position:relative; flex:none; aspect-ratio:16/9; border-radius:.85em; overflow:hidden;
  display:grid; place-items:center; background:#14161C;
  box-shadow:0 .7em 1.6em -.4em rgba(15,27,61,.32); }
.cv-stage{ position:absolute; inset:0;
  background:
    radial-gradient(52% 62% at 26% 24%, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 68%),
    radial-gradient(70% 90% at 84% 108%, var(--h) 0%, rgba(0,0,0,0) 62%),
    linear-gradient(155deg,#232833 0%,#14161C 58%,#0D0F14 100%); }
.cv-stage::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:42%;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.07) 100%);
  clip-path:polygon(0 62%,26% 22%,48% 52%,68% 30%,100% 68%,100% 100%,0 100%); }
.cv-play{ position:relative; z-index:1; width:3.1em; height:3.1em; border-radius:50%;
  background:rgba(255,255,255,.2); box-shadow:0 0 0 .22em rgba(255,255,255,.16); }
.cv-play::after{ content:""; position:absolute; left:56%; top:50%; transform:translate(-50%,-50%);
  border:.62em solid transparent; border-left:.95em solid #fff; }
.cv-adtag{ position:absolute; z-index:2; left:.6em; top:.6em; font-size:.5em; font-weight:750;
  padding:.24em .5em; border-radius:.26em; background:#FFC107; color:#231A00; }
.cv-skip{ position:absolute; z-index:2; right:.6em; bottom:.95em; font-size:.5em; font-weight:700;
  padding:.34em .68em; border-radius:.3em; background:rgba(255,255,255,.92); color:#14161C; }
.cv-scrub{ position:absolute; z-index:2; left:0; right:0; bottom:0; height:.24em;
  background:rgba(255,255,255,.22); }
.cv-scrub b{ display:block; width:26%; height:100%; background:#EA4335; }
.cv-chan{ flex:none; display:flex; align-items:center; gap:.55em; margin-top:.15em; }
.cv-chan .cv-av{ flex:none; width:1.5em; height:1.5em; border-radius:50%;
  background:linear-gradient(150deg,var(--he),var(--h)); }
.cv-cm{ min-width:0; }
.cv-cm b{ display:block; font-size:.6em; font-weight:750; letter-spacing:-.02em; color:var(--ink); }
.cv-cm i{ display:block; font-style:normal; font-size:.46em; color:var(--ink-3); margin-top:.1em; }
.cv-secs{ flex:none; display:flex; gap:.35em; }
.cv-secs span{ flex:1; text-align:center; font-size:.5em; font-weight:700; padding:.5em .3em;
  border-radius:.45em; background:#F1F4F9; color:var(--ink-4); }
.cv-secs span.on{ flex:0 0 56%; background:var(--hs); color:var(--hd);
  box-shadow:inset 0 0 0 1px var(--he); }
.cv-yt .cv-div{ margin-top:.1em; }
.cv-ups{ flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column;
  justify-content:space-between; gap:.4em; opacity:.6; }
.cv-up{ flex:1; display:flex; align-items:center; gap:.55em; }
.cv-yt .cv-th{ flex:none; width:3.6em; height:2.1em; border-radius:.35em;
  background:linear-gradient(150deg,#E1E7F0,#CFD7E3); }
.cv-um{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:.24em; }
.cv-um s{ background:#DCE2EB; }

/* 06 · PERFORMANCE MAX */
.cv-pmax{ display:flex; flex-direction:column; align-items:center; padding:1.05em .95em; }
.cv-hub{ flex:none; text-align:center; padding:.7em 1.1em; border-radius:.8em; background:#fff;
  border:1.5px solid var(--he); box-shadow:0 .7em 1.6em -.4em rgba(15,27,61,.18); }
.cv-hub b{ display:block; font-size:.82em; font-weight:800; letter-spacing:-.026em; color:var(--hd); }
.cv-hub i{ display:block; font-style:normal; font-size:.52em; color:var(--ink-3); margin-top:.12em; }
.cv-rays{ flex:none; width:88%; height:1.9em; margin:.3em 0 .45em; color:var(--he); }
.cv-rays path{ stroke-width:2; vector-effect:non-scaling-stroke; }
.cv-sfs{ flex:1; min-height:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr)); gap:.42em; width:100%; }
.cv-sf{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4em;
  padding:.5em .3em; border-radius:.6em; text-align:center;
  background:#fff; border:1px solid var(--he); box-shadow:0 .2em .6em -.25em rgba(15,27,61,.12); }
.cv-sf i{ flex:none; display:grid; place-items:center; width:1.8em; height:1.8em; border-radius:.5em;
  background:var(--hs); color:var(--hd); }
.cv-sf i svg{ width:1em; height:1em; stroke-width:2; }
.cv-sf b{ font-size:.54em; font-weight:750; letter-spacing:-.016em; color:var(--ink); }
.cv-sb{ display:none; }

/* 07 · CONVERSION TRACKING */
.cv-track{ display:flex; flex-direction:column; gap:.45em; padding:1.05em .9em; }
.cv-evs{ flex:1; min-height:0; display:flex; flex-direction:column; gap:.34em; }
.cv-ev{ flex:1; display:flex; align-items:center; gap:.5em; padding:.45em .6em; border-radius:.6em;
  background:#fff; border:1px solid var(--line-2); box-shadow:0 .2em .6em -.25em rgba(15,27,61,.12); }
.cv-eg{ flex:none; display:grid; place-items:center; width:1.7em; height:1.7em; border-radius:.45em;
  background:var(--hs); color:var(--hd); font-style:normal; }
.cv-eg svg{ width:1em; height:1em; stroke-width:1.9; }
.cv-ev b{ flex:1; min-width:0; font-size:.56em; font-weight:750; letter-spacing:-.018em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cv-ev u{ flex:none; width:1.2em; height:1.2em; border-radius:50%; background:var(--g-green);
  display:grid; place-items:center; text-decoration:none; }
.cv-ev u svg{ width:62%; height:62%; color:#fff; stroke-width:3.4; }
.cv-down{ flex:none; width:1.35em; height:1.35em; margin:.05em auto; color:var(--he);
  stroke-width:2.6; }
.cv-dest{ flex:none; text-align:center; padding:.7em .7em .75em; border-radius:.7em;
  background:var(--hs); border:1px solid var(--he); }
.cv-dest b{ display:block; font-size:.62em; font-weight:800; letter-spacing:-.024em; color:var(--hd); }
.cv-dest i{ display:block; font-style:normal; font-size:.46em; color:var(--hd); opacity:.78;
  margin-top:.12em; }
.cv-graph{ display:flex; align-items:flex-end; justify-content:center; gap:.24em; height:2.2em;
  margin-top:.5em; }
.cv-graph s{ width:.6em; height:40%; border-radius:.18em .18em 0 0; background:var(--he); }
.cv-graph s:last-child{ background:var(--h); }
.cv-graph s:nth-last-child(2){ background:var(--hd); opacity:.55; }

/* ---------- supporting cues, deliberately quiet ---------- */
.cv-cues{ display:flex; flex-wrap:wrap; gap:6px; margin-top:13px; }
.cv-cue{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 4px;
  border-radius:999px; background:var(--mist); border:1px solid var(--line-2);
  font-size:11.2px; font-weight:650; color:var(--ink-3); }
.cv-cue i{ width:19px; height:19px; border-radius:50%; background:var(--hs); color:var(--h);
  display:grid; place-items:center; flex:none; }
.cv-cue i svg{ width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }

/* ==========================================================================
   SHARED READ-OUT — the blocks, the rising panel and the reading card
   ========================================================================== */
/* ==========================================================================
   THE FIVE DETAIL BLOCKS
   One vocabulary everywhere: a marker, a label, a lead line, and whatever
   supporting shape the block needs. Never a wall of text.
   ========================================================================== */
.kb{ position:relative; }
.kb-i{ display:flex; align-items:center; gap:9px; }
.kb-ic{ flex:none; width:30px; height:30px; border-radius:9px; background:var(--hs); color:var(--h);
  display:grid; place-items:center; }
.kb-ic svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round; }
.kb-l{ font-size:15px; font-weight:750; letter-spacing:-.028em; color:var(--ink); line-height:1.25; }
.kb-d{ margin-top:9px; font-size:14px; line-height:1.58; color:var(--ink-2); }
.kb-list{ margin-top:10px; display:flex; flex-direction:column; gap:7px; }
.kb-list li{ position:relative; padding-left:22px; font-size:13.4px; line-height:1.5; color:var(--ink-2); }
.kb-list li svg{ position:absolute; left:0; top:2px; width:14px; height:14px; color:var(--h);
  fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.kb-chips{ margin-top:10px; display:flex; flex-wrap:wrap; gap:6px; }
.kb-chips span{ font-size:11.6px; padding:5px 10px; border-radius:999px; background:var(--hs);
  color:var(--ink-2); border:1px solid var(--he); }
.kb-note{ margin-top:10px; padding:11px 13px; border-radius:11px; background:var(--mist);
  border-left:2px solid var(--he); font-size:12.8px; line-height:1.55; color:var(--ink-3); }

.k-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; height:50px;
  padding:0 24px; border-radius:13px; background:var(--h); color:#fff; font-size:15px;
  font-weight:750; letter-spacing:-.012em; white-space:nowrap;
  transition:filter .18s var(--ease), transform .12s var(--ease); }
.k-btn:hover{ filter:brightness(.93); }
.k-btn:active{ transform:translateY(1px); }
.k-btn svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round; }
.k-time{ display:flex; align-items:center; gap:7px; font-size:12.6px; color:var(--ink-3); }
.k-time s{ width:5px; height:5px; border-radius:99px; background:var(--g-green-b);
  text-decoration:none; }
.k-act{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }

/* the read-out header shared by every reveal: title, objective, benefit */
.kd-kick{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--h); font-weight:600; }
.kd-t{ margin-top:9px; font-size:clamp(23px,2.5vw,34px); line-height:1.04; }
.kd-lede{ margin-top:12px; font-size:clamp(15px,1.2vw,17px); line-height:1.58; color:var(--ink-2);
  max-width:56ch; }
.kd-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.kd-meta span{ display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 13px;
  border-radius:9px; background:var(--hs); font-size:12.2px; color:var(--ink-2); }
.kd-meta span b{ color:var(--h); font-weight:750; }

/* ==========================================================================
   THE RISING PANEL — every phone layout, and some desktop ones
   It carries the chosen card with it: same colour, same picture, same title,
   so the connection between what was tapped and what opened is never in doubt.
   ========================================================================== */
.k-scrim{ position:fixed; inset:0; z-index:300; background:rgba(15,27,61,.32);
  opacity:0; transition:opacity .4s var(--ease); }
.k-scrim.is-on{ opacity:1; }

.k-panel{ position:fixed; left:0; right:0; bottom:0; z-index:310; display:flex; flex-direction:column;
  max-height:min(88dvh,900px); background:#fff; border-radius:26px 26px 0 0;
  box-shadow:var(--shadow-x); transform:translateY(101%);
  transition:transform .52s var(--rise); will-change:transform; }
.k-panel.is-on{ transform:translateY(0); }
.k-panel.is-drag{ transition:none; }

/* the chosen card, carried into the panel head */
.k-phead{ flex:none; background:var(--hs); border-bottom:1px solid var(--he);
  border-radius:26px 26px 0 0; padding:0 16px 14px; cursor:grab; }
.k-phead:active{ cursor:grabbing; }
.k-grab{ display:flex; justify-content:center; padding:9px 0 9px; }
.k-grab s{ width:42px; height:4px; border-radius:99px; background:#CBD3DF; text-decoration:none; }
.k-prow{ display:flex; align-items:center; gap:13px; }
/* a true miniature of the card's own picture, not a crop of it */
.k-thumb{ --tw:52; display:block; position:relative; flex:none; width:calc(var(--tw) * 1px);
  aspect-ratio:4/5; border-radius:10px; overflow:hidden; background:#fff;
  box-shadow:0 2px 8px rgba(15,27,61,.14); }
.k-thumb > span{ position:absolute; top:0; left:0; width:180px; height:225px;
  transform:scale(calc(var(--tw) / 180)); transform-origin:top left; }
.k-pid{ flex:1; min-width:0; }
.k-pid i{ display:block; font-style:normal; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--h); }
.k-pid b{ display:block; margin-top:3px; font-size:16px; font-weight:800; letter-spacing:-.034em;
  line-height:1.16; color:var(--ink); }
.k-pid span{ display:block; margin-top:4px; font-size:11.8px; font-weight:700; color:var(--h); }
.k-x{ flex:none; width:38px; height:38px; border-radius:50%; background:#fff; color:var(--ink-2);
  display:grid; place-items:center; box-shadow:var(--shadow-s); }
.k-x svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.4;
  stroke-linecap:round; }

.k-pbody{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch; padding:18px 16px 8px; }
.k-ptop{ display:flex; flex-direction:column-reverse; gap:16px; }
.k-plede{ font-size:15.2px; line-height:1.58; color:var(--ink-2); }
.k-pwords .kd-meta{ margin-top:14px; }
.k-pvis{ aspect-ratio:4/5; max-width:264px; border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow-m); }
.k-pblocks{ margin-top:20px; display:flex; flex-direction:column; gap:0; }
.k-pblocks .kb{ padding:17px 0; border-top:1px solid var(--line-2); }
.k-pblocks .kb:first-child{ border-top:0; padding-top:2px; }

.k-pfoot{ flex:none; padding:13px 16px calc(13px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line-2); background:#fff;
  box-shadow:0 -6px 18px rgba(15,27,61,.05); }
.k-pfoot .k-btn{ width:100%; }
.k-pfoot .k-time{ justify-content:center; margin-top:9px; }
.k-back{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-size:13.5px;
  font-weight:700; color:var(--ink-3); }
.k-back svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.3;
  stroke-linecap:round; stroke-linejoin:round; }

@media (min-width:861px){
  /* on a wide screen the same panel becomes a centred sheet, still carrying the card */
  .k-panel{ left:50%; right:auto; bottom:0; width:min(720px,92vw); transform:translate(-50%,101%);
    border-radius:26px 26px 0 0; max-height:min(90dvh,900px); }
  .k-panel.is-on{ transform:translate(-50%,0); }
  .k-phead{ padding:0 24px 18px; }
  .k-prow{ gap:16px; }
  .k-grab{ padding:12px 0 12px; }
  .k-thumb{ --tw:62; }
  .k-pid b{ font-size:19px; }
  .k-pbody{ padding:24px 24px 10px; }
  .k-ptop{ display:grid; grid-template-columns:238px minmax(0,1fr); gap:28px; align-items:center; }
  .k-pvis{ max-width:none; }
  .k-pfoot{ padding:16px 24px; }
  .k-pfoot .k-btn{ width:auto; }
  .k-pfoot .k-act{ justify-content:space-between; }
  .k-pfoot .k-time{ margin-top:0; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}

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

/* the phone fitted into the reading card and the miniature */
.cv-fit{ height:100%; display:block; }
.cv-fit .cv-well{ height:100%; aspect-ratio:auto; }

/* ==========================================================================
   THE READING CARD — the reveal the chosen design already used
   ========================================================================== */

.hrv-scrim{ position:fixed; inset:0; z-index:200; background:rgba(15,27,61,.32);
  opacity:0; transition:opacity .34s var(--ease); }
.hrv-scrim.is-on{ opacity:1; }
.hrv{ position:fixed; z-index:210; left:50%; top:50%; width:min(1020px,92vw); max-height:88dvh;
  display:flex; flex-direction:column; background:#fff; border-radius:26px; overflow:hidden;
  box-shadow:var(--shadow-l); border-top:5px solid var(--h);
  transform:translate(-50%,-46%) scale(.96); opacity:0;
  transition:transform .46s var(--rise), opacity .3s var(--ease); }
.hrv.is-on{ transform:translate(-50%,-50%) scale(1); opacity:1; }
.hrv-bar{ flex:none; display:flex; align-items:center; gap:15px; padding:18px 24px;
  background:var(--hs); border-bottom:1px solid var(--he); }
.hrv-id{ flex:1; min-width:0; }
.hrv-id i{ display:block; font-style:normal; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--h); }
.hrv-id b{ display:block; margin-top:3px; font-size:19px; font-weight:800; letter-spacing:-.036em; }
.hrv-id span{ display:block; margin-top:4px; font-size:12px; font-weight:700; color:var(--h); }
.hrv-body{ flex:1; min-height:0; overflow-y:auto; padding:clamp(24px,2.6vw,32px); }
.hrv-top{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:clamp(24px,2.8vw,40px);
  align-items:center; }
.hrv-top .kd-vis{ aspect-ratio:4/5; }
.hrv-blocks{ margin-top:28px; padding-top:26px; border-top:1px solid var(--line-2);
  display:grid; grid-template-columns:repeat(2,1fr); gap:24px 34px; }
.hrv-foot{ flex:none; padding:16px 24px; border-top:1px solid var(--line-2); background:var(--mist);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.hrv-foot .k-act{ margin-left:auto; }
.hrv-foot p{ font-size:13px; color:var(--ink-3); max-width:52ch; }
.hrv-foot p b{ color:var(--ink); font-weight:750; }
@media (max-width:1000px){
  .hrv-top{ grid-template-columns:1fr; align-items:start; }
  .hrv-top .kd-vis{ max-width:230px; }
  .hrv-blocks{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  .hsec{ --pad:var(--gut); padding:34px 0 44px; }
  .hrv-scrim,.hrv{ display:none; }
}

/* ==========================================================================
   THE SECTION — read top to bottom, once
   Four blocks, each answering one question and handing over to the next:

     1  what this is        six ways to reach customers, one way to know
     2  the six campaigns   pick where your customers already are
     3  the one underneath  not a campaign — the measurement
     4  what to do next     one call

   A card carries four things and nothing else: the picture, the name, one
   plain line of what it does for you, and the one way in.
   ========================================================================== */
.sv{ --maxw:1400px; padding:clamp(44px,4.6vw,78px) 0 clamp(52px,5.6vw,94px);
  background:linear-gradient(180deg,#FFFFFF 0%,#F6F8FC 22%,#F4F7FB 100%); }
.sv .k-wrap{ width:min(var(--maxw),100% - 2*var(--pad)); }

/* ---------- 1 · what this is ---------- */
.sv-head{ max-width:none; }
.sv-head .k-h2{ max-width:19ch; font-size:clamp(30px,3.4vw,46px); letter-spacing:-.045em;
  line-height:1.04; }
.sv-head .k-sub{ margin-top:16px; max-width:54ch; font-size:clamp(15px,1.1vw,17px); }

/* ---------- a group heading: a label and one line, nothing more ---------- */
.sv-group{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  margin-top:clamp(34px,3.6vw,52px); padding-bottom:14px; border-bottom:1px solid var(--line); }
.sv-group h3{ font-size:clamp(17px,1.35vw,20px); letter-spacing:-.036em; }
.sv-group p{ font-size:14px; line-height:1.5; color:var(--ink-3); }

/* A group row with no words in it — just the hairline the rail sits under.
   It used to dock the rail's two nav arrows on its right; those were removed
   on 2026-08-31, so the row is now only that line. Scoped to .is-bare so the
   labs that still carry a heading here are untouched. */
.sv-group.is-bare{ align-items:center; min-height:0; padding-bottom:12px; }
@media (max-width:760px){
  /* nothing sits in this row at any width now — drop the empty band under it */
  .sv-group.is-bare{ padding-bottom:0; }
}

/* ---------- 2 · the six ---------- */
.sv-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,1.6vw,24px); margin-top:clamp(20px,2.2vw,30px); align-items:stretch; }

.sc{ position:relative; display:flex; flex-direction:column; text-align:left; width:100%;
  border:1px solid #E4E9F1; border-radius:22px; overflow:hidden; cursor:pointer;
  background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 74%,var(--hs) 210%);
  box-shadow:0 1px 2px rgba(15,27,61,.05), 0 14px 30px -16px rgba(15,27,61,.22);
  transition:border-color .24s var(--ease), box-shadow .32s var(--ease), transform .32s var(--rise); }
.sc:hover{ transform:translateY(-5px); border-color:var(--he);
  box-shadow:0 2px 5px rgba(15,27,61,.06), 0 36px 66px -20px rgba(15,27,61,.32); }
.sc:focus-visible{ outline:2px solid var(--hd); outline-offset:3px; }
.sc.is-sel{ border-color:var(--h); box-shadow:0 0 0 3px var(--hs); }

/* the picture is mounted on a ground of the service's own colour, and it is
   the tall part of the card */
.sc-pic{ position:relative; display:block; padding:0;
  border-bottom:1px solid var(--he); }
.sc-pic .cv-well{ aspect-ratio:1/1; border-radius:0; box-shadow:none; }

.sc-txt{ display:flex; flex-direction:column; flex:1; padding:24px 24px 22px; }
.sc-name{ font-size:clamp(22px,1.95vw,28px); font-weight:800; letter-spacing:-.048em;
  line-height:1.04; color:var(--ink); text-wrap:balance; }
.sc-line{ flex:1; margin-top:12px; font-size:15.2px; line-height:1.5; color:var(--ink-2); }
.sc-go{ display:inline-flex; align-items:center; gap:8px; width:100%; margin-top:20px;
  padding-top:17px; border-top:1px solid var(--line-2);
  font-size:13.8px; font-weight:700; color:var(--hd); }
.sc-go svg{ width:15px; height:15px; flex:none; fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .24s var(--ease); }
.sc:hover .sc-go svg{ transform:translateX(4px); }

/* ---------- 3 · the one underneath ---------- */
.sv-one{ margin-top:clamp(20px,2.2vw,30px); }
/* one row, read left to right: the picture, what it is, the way in */
.sc-wide{ display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr); align-items:stretch; }
.sc-wide .sc-pic{ display:block; border-bottom:0; border-right:1px solid var(--he); }
.sc-wide .sc-pic .cv-well{ height:100%; min-height:360px; aspect-ratio:auto; }
.sc-wide .sc-txt{ display:flex; flex-direction:row; align-items:center;
  gap:clamp(24px,3vw,52px); padding:clamp(24px,2.4vw,38px) clamp(24px,2.6vw,40px); }
.sc-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.sc-wide .sc-name{ font-size:clamp(24px,2.15vw,31px); }
.sc-wide .sc-line{ flex:none; margin-top:12px; max-width:58ch; font-size:15.6px; }

/* the panel that carries the long row's second half */
.sc-aside{ flex:none; width:min(330px,36%); display:flex; flex-direction:column;
  padding:20px 20px 20px; border-radius:16px; background:var(--mist);
  box-shadow:inset 0 0 0 1px var(--line); }
.sc-aside-t{ font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-4); }
.sc-exp{ display:flex; flex-direction:column; gap:11px; margin-top:13px; }
.sc-exp span{ display:flex; gap:9px; font-size:13.3px; line-height:1.45; color:var(--ink-2); }
.sc-exp em{ font-style:normal; }
.sc-exp svg{ width:14px; height:14px; flex:none; margin-top:3px; color:var(--g-green);
  fill:none; stroke:currentColor; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; }
.sc-aside .sc-go{ margin-top:17px; padding-top:16px; border-top:1px solid var(--line); }
.sc-kick{ display:block; margin-bottom:10px; font-size:12.6px; font-weight:750; color:var(--hd); }

/* the four actions the measurement counts, named on the card itself */
.sc-counts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.sc-counts span{ display:inline-flex; align-items:center; gap:7px; padding:7px 13px 7px 9px;
  border-radius:999px; background:var(--hs); box-shadow:inset 0 0 0 1px var(--he);
  font-size:12.6px; font-weight:700; color:var(--hd); }
.sc-counts svg{ width:13px; height:13px; flex:none; fill:none; stroke:currentColor;
  stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- 4 · what to do next ---------- */
.sv-next{ display:flex; align-items:center; gap:clamp(18px,3vw,48px);
  margin-top:clamp(28px,3vw,44px); padding:clamp(22px,2.4vw,34px) clamp(22px,2.6vw,38px);
  border-radius:20px; background:#fff; border:1px solid #E4E9F1;
  box-shadow:0 1px 2px rgba(15,27,61,.05), 0 14px 30px -16px rgba(15,27,61,.24); }
.sv-next-t{ flex:1; min-width:0; }
.sv-next-t b{ display:block; font-size:clamp(18px,1.6vw,22px); font-weight:800;
  letter-spacing:-.036em; line-height:1.18; }
.sv-next-t p{ margin-top:8px; max-width:56ch; font-size:14.4px; line-height:1.55;
  color:var(--ink-2); }
.sv-next-a{ flex:none; display:flex; flex-direction:column; align-items:stretch; gap:10px; }
.sv-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; height:52px;
  padding:0 26px; border-radius:13px; background:var(--brand); color:#fff; font-size:15px;
  font-weight:750; letter-spacing:-.012em; white-space:nowrap;
  box-shadow:0 8px 20px -6px rgba(11,87,245,.5);
  transition:filter .18s var(--ease), transform .16s var(--ease); }
.sv-btn:hover{ filter:brightness(1.08); }
.sv-btn:active{ transform:translateY(1px); }
.sv-btn svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round; }
.sv-time{ text-align:center; font-size:12.6px; color:var(--ink-3); }

@media (max-width:1080px){
  .sv-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:860px){
  .sv{ --pad:var(--gut); padding:32px 0 44px; }
  .sv-grid{ grid-template-columns:minmax(0,1fr); gap:14px; }
  .sv-head .k-h2{ max-width:none; }
  .sv-group{ margin-top:30px; }
  .sc-wide{ grid-template-columns:minmax(0,1fr); }
  .sc-wide .sc-txt{ flex-direction:column; align-items:stretch; gap:20px; }
  .sc-aside{ width:100%; }
  .sc-wide .sc-pic{ border-right:0; border-bottom:1px solid var(--he); }
  .sc-wide .sc-pic{ border-right:0; border-bottom:1px solid var(--line-2); }
  .sc-txt{ padding:18px 17px 19px; }
  .sc-name{ font-size:20px; }
  /* one column — the picture keeps its square instead of growing with the card */
  .sc-wide .sc-pic{ border-right:0; border-bottom:1px solid var(--he); }
  .sc-wide .sc-pic .cv-well{ height:auto; min-height:0; aspect-ratio:1/1; }

  .sv-next{ flex-direction:column; align-items:stretch; }
  .sv-next-a{ width:100%; }
  .sv-btn{ width:100%; }
}

/* what opens from a card carries the same picture in the same shape */
.hrv-top{ grid-template-columns:minmax(0,286px) minmax(0,1fr); align-items:center; }
.hrv-top .kd-vis{ aspect-ratio:1/1; border-radius:14px;
  box-shadow:0 2px 4px rgba(15,27,61,.07), 0 16px 34px rgba(15,27,61,.16); }
.hrv-top .pa-cap,.k-ptop .pa-cap{ margin-top:12px; padding:9px 12px; border-radius:10px;
  background:var(--hs); box-shadow:inset 0 0 0 1px var(--he); font-size:11.8px; line-height:1.4;
  font-weight:650; color:var(--hd); }
.k-pvis{ aspect-ratio:5/4; max-width:none; border-radius:14px; }
@media (max-width:1000px){
  .hrv-top{ grid-template-columns:minmax(0,1fr); }
  .hrv-top .kd-vis{ max-width:340px; }
}


/* ==========================================================================
   ONE NEW PART, TEN WAYS
   Loaded after the main design's own stylesheet. Two jobs:

     1  keep the card exactly as it is, now that the way in sits in a row
     2  draw the new part, ten ways

   Nothing here changes .sc, .sc-pic, .cv-well, .sc-name, .sc-line or
   .sc-go's own type — only where the row sits, and what may travel in it.
   ========================================================================== */

/* ---------- 0 · preview chrome, so the lab index wears the same bar ------- */


/* ---------- 1 · the way in, now in a row that can carry one more thing ---- */
.sc-foot{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; width:100%;
  margin-top:20px; padding-top:17px; border-top:1px solid var(--line-2); }
.sc-foot > .sc-go{ width:auto; margin-top:0; padding-top:0; border-top:0; }
.sc-aside .sc-foot{ margin-top:17px; padding-top:16px; border-top:1px solid var(--line); }
.sc-foot > .sc-go{ order:0; }
.sc-foot > .sm-08{ order:1; margin-left:auto; }

/* ---------- 2 · the part ---------- */
.sm em{ font-style:normal; }
/* the mono micro-label, in the section eyebrow's own voice */
.sm-01 > em,.sm-03 em,.sm-04 em,.sm-05 > em,.sm-06 > em,.sm-07 em,.sm-09 em,.sm-10 em{
  font-family:var(--mono); font-size:9.4px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-4); }

/* 01 · MOMENT RAIL — the reference, under the picture ---------------------- */
.sm-01{ display:block; padding:15px 24px 16px; background:#fff;
  border-bottom:1px solid var(--line-2); }
.sm-01 > em{ display:block; }
.sm-rail{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:11px; }
.sm-stop{ display:block; }
.sm-stop u{ display:block; height:4px; border-radius:99px; background:var(--line); }
.sm-stop b{ display:block; margin-top:8px; font-size:11.4px; font-weight:650; line-height:1.25;
  letter-spacing:-.012em; color:var(--ink-4); }
.sm-stop.is-on u{ background:var(--h); box-shadow:0 3px 9px -3px var(--h); }
.sm-stop.is-on b{ color:var(--hd); font-weight:800; }

/* 02 · PLAIN SENTENCE — one more line, under the line ---------------------- */
.sm-02{ display:block; margin-top:9px; font-size:13.4px; line-height:1.5; color:var(--ink-3); }
.sm-02 b{ font-weight:750; color:var(--hd); letter-spacing:-.016em; }

/* 03 · PICTURE BAND — across the foot of the picture ----------------------- */
.sm-03{ position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; align-items:center;
  gap:11px; padding:13px 22px 14px;
  /* a flat white band with a hairline over it, not a blurred gradient wash:
     the picture above it stays sharp right up to the band's own edge
     (2026-09-09) */
  background:#FFFFFF; box-shadow:inset 0 1px 0 var(--he); }
.sm-03 i{ flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:11px;
  background:var(--hs); color:var(--hd); box-shadow:inset 0 0 0 1px var(--he); }
.sm-03 i svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; }
.sm-w{ min-width:0; }
.sm-03 em{ display:block; }
.sm-03 b{ display:block; margin-top:3px; font-size:14px; font-weight:800; letter-spacing:-.032em;
  line-height:1.15; color:var(--hd); }

/* 04 · OVERLINE — the moment reads before the name ------------------------- */
.sm-04{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin-bottom:10px; }
.sm-04 b{ font-size:12.4px; font-weight:800; letter-spacing:-.018em; color:var(--hd);
  padding:3px 9px; border-radius:99px; background:var(--hs);
  box-shadow:inset 0 0 0 1px var(--he); }

/* 05 · SEGMENTED BAR — one bar in four parts ------------------------------- */
.sm-05{ display:block; padding:15px 24px 17px; background:#fff;
  border-bottom:1px solid var(--line-2); }
.sm-05 > em{ display:block; }
.sm-bar{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; margin-top:11px;
  border-radius:99px; overflow:hidden; }
.sm-seg{ display:grid; place-items:center; min-height:34px; padding:6px 4px; text-align:center;
  background:var(--ground-2); font-size:10px; font-weight:700; line-height:1.18;
  letter-spacing:-.014em; color:var(--ink-4); overflow:hidden; }
.sm-seg.is-on{ background:var(--h); color:#fff; font-weight:800; }

/* 06 · SEAM DOTS — the stops sit on the picture's own hairline -------------- */
.sm-06{ position:relative; display:block; padding:0 24px 16px; background:#fff; }
.sm-06 > em{ display:block; padding-top:15px; }
.sm-dots{ position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:19px; }
.sm-dots::before{ content:''; position:absolute; left:12%; right:12%; top:0; height:2px;
  border-radius:99px; background:var(--line); }
.sm-dot{ display:block; text-align:center; }
.sm-dot u{ display:block; width:8px; height:8px; margin:-3px auto 0; border-radius:50%;
  background:var(--line-b); box-shadow:0 0 0 4px #fff; }
.sm-dot b{ display:block; margin-top:10px; font-size:11.2px; font-weight:650; line-height:1.22;
  color:var(--ink-4); }
.sm-dot.is-on u{ width:13px; height:13px; margin-top:-5.5px; background:var(--h);
  box-shadow:0 0 0 4px #fff, 0 4px 10px -3px var(--h); }
.sm-dot.is-on b{ color:var(--hd); font-weight:800; }

/* 07 · PULL QUOTE — a rule, and the phrase set larger than the line --------- */
.sm-07{ position:relative; display:block; margin-top:14px; padding-left:16px; }
.sm-07::before{ content:''; position:absolute; left:0; top:3px; bottom:3px; width:3px;
  border-radius:99px; background:linear-gradient(180deg,var(--h),var(--hd)); }
.sm-07 em{ display:block; }
.sm-07 b{ display:block; margin-top:6px; font-size:15.4px; font-weight:750; line-height:1.32;
  letter-spacing:-.028em; color:var(--ink); }

/* 08 · FOOT PILL — travelling in the row that already exists ---------------- */
.sm-08{ display:inline-flex; align-items:center; gap:8px; padding:6px 13px 6px 7px;
  border-radius:99px; background:var(--hs); box-shadow:inset 0 0 0 1px var(--he); }
.sm-08 i{ flex:none; display:grid; place-items:center; width:20px; height:20px; }
.sm-08 i svg{ width:16px; height:16px; fill:none; stroke:var(--hd); stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round; }
.sm-08 b{ font-size:12.2px; font-weight:750; letter-spacing:-.016em; color:var(--hd);
  white-space:nowrap; }

/* 09 · SPEC ROW — label left, moment right --------------------------------- */
.sm-09{ display:flex; align-items:baseline; gap:12px; margin-top:15px; padding-top:13px;
  border-top:1px solid var(--line-2); }
.sm-09 em{ flex:none; }
.sm-09::after{ content:''; flex:1; height:1px; margin-bottom:4px; background:var(--line-2); }
.sm-09 b{ order:3; flex:none; font-size:13.4px; font-weight:800; letter-spacing:-.028em;
  color:var(--hd); }

/* 10 · CORNER TAG — pinned inside the picture ------------------------------ */
.sm-10{ position:absolute; left:20px; bottom:20px; z-index:2; display:block; padding:9px 13px 10px;
  /* opaque, unblurred: the tag sits ON the picture, it does not smear it
     (2026-09-09) */
  border-radius:12px; background:#FFFFFF;
  box-shadow:0 0 0 1px var(--he), 0 12px 26px -12px rgba(15,27,61,.5); }
.sm-10 em{ display:block; }
.sm-10 b{ display:block; margin-top:3px; font-size:13px; font-weight:800; letter-spacing:-.03em;
  line-height:1.14; color:var(--hd); }

/* ---------- the wide card: the same parts, given the room it has ---------- */
.sc-wide .sc-pic{ display:flex; flex-direction:column; }
.sc-wide .sc-pic .cv-well{ flex:1; }
.sc-wide .sm-01,.sc-wide .sm-05,.sc-wide .sm-06{ flex:none; border-bottom:0;
  border-top:1px solid var(--line-2); padding-left:22px; padding-right:22px; }
.sc-wide .sm-06 > em{ padding-top:14px; }
.sc-wide .sm-02{ max-width:58ch; font-size:14px; }
.sc-wide .sm-07 b{ font-size:16px; }
.sc-wide .sm-09{ max-width:46ch; }
.sc-wide .sm-04 b{ font-size:13px; }

/* ---------- phones ---------- */
@media (max-width:860px){
  .sm-01,.sm-05{ padding:14px 17px 15px; }
  .sm-06{ padding:0 17px 15px; }
  .sm-03{ padding:12px 17px 13px; }
  .sm-10{ left:15px; bottom:15px; }
  .sm-stop b,.sm-dot b{ font-size:10.2px; }
  .sm-seg{ font-size:9.2px; padding:7px 3px; }
  .sm-09{ flex-wrap:wrap; }
  .sm-09::after{ display:none; }
  .sc-foot > .sm-08{ margin-left:0; }
}


/* ==========================================================================
   THE CARD'S COLOUR, PAINTED
   The finalised design sets the colour, then fades it out: the card is
   `#FFF 0%, #FFF 74%, var(--hs) 210%` and the picture's ground is a pair of
   corner washes over white. A strong colour put through that still reads as
   washed out — which is why every earlier set looked faded.

   These rules paint the same token flat, the way the colour reference does.
   That is all they do. No layout, no card height, no visual, no text, no
   spacing, no border weight and no interaction is touched.
   ========================================================================== */
.sc{ background:#FFFFFF; }              /* was a gradient dying to a hint of --hs */
.cv{ background:var(--hs); }            /* was two corner washes over white      */

/* Two colour corrections the flat ground makes necessary — both are colour
   values and nothing else. `.cv-div`'s label and rules were set for a white
   ground (--ink-4 text, --line hairlines) and drop out of sight once the
   ground carries real colour; the skeleton bars in the scenes were a
   near-white grey for the same reason. Restated in the service's own colour
   at the same weight, so the drawings read exactly as before. */
.cv-div{ color:var(--hd); opacity:.6; }
.cv-div::before,.cv-div::after{ background:currentColor; opacity:.4; }
.cv s{ background:color-mix(in srgb, var(--hd) 30%, #FFFFFF); }