/* ==========================================================================
   SUCCESS STORIES (#ss1) on the Google Ads page — added 2026-09-24.
   A copy of every rule the homepage applies to #ss1 that the Google Ads page
   did not already load, taken in the homepage's own cascade order.
   Three files, each linked where its source sits in the homepage's order:
     ss.css       index.html's inline rules  — before gads-clients/q7-base.css
     ss-scale.css s9/home-scale.css's rules  — before site/shelf.css
     ss-after.css home-system/home.css's rules — after site/heads.css The shared
   site sheets (site/heads.css, shelf.css, cta.css, align.css, rhythm-09.css)
   carry the rest and are already linked on this page.
   The homepage is untouched: its rules still live in index.html and
   home-system/home.css. Change one, change the other.
   ========================================================================== */

/* The homepage's tokens, mirrored onto #ss1 — the same way the homepage itself
   mirrors tokens onto #wcu8 and #svc3. The Google Ads page's :root carries its
   own ink and accent values; these keep this section identical to the homepage's.
   color: the homepage body's ink, which every uncoloured element inherits. */
#ss1{
  color:#0D1526;
  --accent:#1E4FD6; --cta:#1E4FD6; --cta-a:#163A9E;
  --cta-edge-1:#1E4FD6; --cta-h:#1A45BA; --fs-card-r:10px;
  --gridline:rgba(30,79,214,.035); --hd-desc-ink:#34405A; --hd-ink:#0D1526;
  --hd-kicker-ink:#34405A; --ink:#0D1526; --ink-2:#34405A;
  --ink-3:#526079; --ink-4:#526079; --k3-accent:#1E4FD6;
  --k3-after-ink:#0D1526; --k3-ba-bg:transparent; --k3-card-bd:#D3E0F6;
  --k3-card-bd-h:#8795AE; --k3-card-bg:#FFFFFF; --k3-card-sh:none;
  --k3-card-sh-h:none; --k3-dis-bg:#E1EBFC; --k3-dis-ink:#8795AE;
  --k3-dot:#B9CBEE; --k3-dot-on:#0D1526; --k3-dot-on-sh:none;
  --k3-edge:#B9CBEE; --k3-ground:#FFFFFF; --k3-ground-2:#E1EBFC;
  --k3-ink:#0D1526; --k3-ink-3:#526079; --k3-kicker:#34405A;
  --k3-line:#DAE5F8; --k3-mark-r:0px; --k3-r-card:4px;
  --k3-r-ctl:4px; --k3-url-icon:#8795AE; --line:#DAE5F8;
  --line-2:#DAE5F8; --n4-act:#1E4FD6; --n4-card:#D3E0F6;
  --n4-edge:#B9CBEE; --n4-ground:#FFFFFF; --n4-ink:#0D1526;
  --n4-ink-2:#34405A; --n4-ink-3:#526079; --n4-line:#DAE5F8;
  --n4-paper:#FFFFFF; --s9-h2:clamp(28px, 3.9vw, 62px); --s9-h2-lh:1.03;
  --s9-h2-ls:-.045em; --sh-close:#E1EBFC;
}

/* ---- from index.html inline <style> ---- */
#ss1 { scroll-margin-top: var(--barh); }
#ss1 { position: relative; padding: clamp(40px, 5.4vw, 80px) 0px clamp(48px, 5.4vw, 88px); background: var(--paper); --cardw: 244px; --gap: 18px; }
#ss1 .ss-grid { position: absolute; inset: 0px; pointer-events: none; z-index: 0; background-image: linear-gradient(to right, var(--gridline) 1px, transparent 1px),
    linear-gradient(to bottom, var(--gridline) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(130% 62% at 50% 0%, rgb(0, 0, 0) 6%, transparent 74%); }
#ss1 .ss-inner { position: relative; z-index: 1; }
#ss1 .ss-head { position: relative; padding: 0 var(--grid-edge); display: flex; align-items: flex-start; justify-content: center; }
#ss1 .ss-mid { text-align: center; max-width: 760px; }
#ss1 .ss-eyebrow { margin: 0px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; }
#ss1 .ss-mid h2 { margin: 0.4em 0px 0px; font-weight: 800; letter-spacing: -0.05em; line-height: 0.98; font-size: clamp(40px, 6.6vw, 76px); text-wrap: balance; }
#ss1 .ss-mid h2 i { font-style: normal; color: var(--accent); }
#ss1 .ss-sub { margin: clamp(14px, 1.6vw, 20px) auto 0px; max-width: 52ch; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.58; color: var(--ink-2); }
#ss1 .ss-all { position: absolute; right: var(--grid-edge); top: 2px; display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px; border: 1px solid var(--accent); border-radius: 999px; background: var(--paper); color: var(--accent); font-size: 14px; font-weight: 650; white-space: nowrap; text-decoration: none; transition: background 0.18s; }
#ss1 .ss-all:hover { background: rgb(243, 247, 254); }
#ss1 .ss-all svg { width: 15px; height: 15px; fill: none; stroke: currentcolor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#ss1 .ss-deck { position: relative; margin-top: clamp(28px, 3.6vw, 46px); }
#ss1 .ss-rail { display: flex; gap: var(--gap); padding: 4px var(--pad) 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: var(--pad); scrollbar-width: none; }
#ss1 .ss-rail::-webkit-scrollbar { display: none; }
#ss1 .ss-card { flex: 0 0 var(--cardw); scroll-snap-align: start; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s; }
#ss1 .ss-card:hover { border-color: rgb(210, 216, 224); transform: translateY(-2px); box-shadow: rgba(11, 13, 18, 0.07) 0px 10px 26px; }
#ss1 .ss-body { padding: 13px 14px 15px; display: flex; flex-direction: column; gap: 10px; }
#ss1 .ss-name { margin: 0px; font-size: 16px; font-weight: 750; letter-spacing: -0.022em; line-height: 1.2; }
#ss1 .ss-trade { margin: -6px 0px 0px; font-size: 13px; line-height: 1.3; color: var(--ink-3); }
#ss1 .ss-url { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; font-size: 13px; font-weight: 550; color: var(--accent); text-decoration: none; }
#ss1 .ss-url:hover { text-decoration: underline; }
#ss1 .ss-url svg { width: 11px; height: 11px; flex: 0 0 auto; fill: none; stroke: currentcolor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#ss1 .ss-ba { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 12px; padding-top: 2px; }
#ss1 .ss-sep { background: var(--line-2); }
#ss1 .ss-k { margin: 0px 0px 4px; font-size: 11px; font-weight: 550; color: var(--ink-3); }
#ss1 .ss-v { display: block; font-size: 24px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
#ss1 .ss-before .ss-v { color: var(--ink-3); }
#ss1 .ss-after .ss-v { color: var(--ink); }
#ss1 .ss-u { display: block; margin-top: 5px; font-size: 10.5px; line-height: 1.25; color: var(--ink-4); }
#ss1 .ss-lift { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 7px 12px; border-radius: 8px; background: rgb(237, 247, 240); color: var(--g-green); font-size: 12.5px; font-weight: 750; font-variant-numeric: tabular-nums; }
#ss1 .ss-lift svg { width: 12px; height: 12px; fill: none; stroke: currentcolor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#ss1 .ss-say { margin: 2px 0px 0px; padding-top: 11px; border-top: 1px solid var(--line-2); font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
#ss1 .ss-ab { position: absolute; top: 126px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; box-shadow: rgba(11, 13, 18, 0.1) 0px 4px 14px; transition: opacity 0.15s, border-color 0.18s, color 0.18s, background 0.18s; }
#ss1 .ss-ab:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: rgb(245, 249, 255); }
#ss1 .ss-ab:disabled { opacity: 0.3; cursor: default; box-shadow: none; }
#ss1 .ss-ab svg { width: 19px; height: 19px; fill: none; stroke: currentcolor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#ss1 .ss-prev { left: max(10px, calc(var(--pad) - 56px)); }
#ss1 .ss-next { right: max(10px, calc(var(--pad) - 56px)); }
#ss1 .ss-navrow { display: flex; justify-content: center; }
#ss1 .ss-dots { display: flex; justify-content: center; gap: 7px; margin-top: 10px; }
#ss1 .ss-navrow { max-width: 100%; padding-inline: 16px; box-sizing: border-box; }
#ss1 .ss-dots { flex-wrap: wrap; row-gap: 8px; max-width: 100%; }
#ss1 .ss-dots button { width: 9px; height: 9px; padding: 0px; border: 0px; border-radius: 999px; background: rgb(217, 222, 229); cursor: pointer; transition: width 0.2s, background 0.2s; }
#ss1 .ss-dots button[aria-current="true"] { width: 26px; background: var(--accent); }
#ss1 .ss-card:nth-child(8n+1) .ss-shot .banner .art { background: radial-gradient(120% 90% at 80% 20%, var(--k) 0%, transparent 60%); }
#ss1 .ss-card:nth-child(8n+2) .ss-shot .banner .art { background: linear-gradient(135deg, var(--k) 0%, transparent 65%); border-radius: 50% 12% 40%; }
#ss1 .ss-card:nth-child(8n+3) .ss-shot .banner .art { background: conic-gradient(from 210deg at 70% 40%, var(--k), transparent 55%); }
#ss1 .ss-card:nth-child(8n+4) .ss-shot .banner .art { background: linear-gradient(20deg, var(--k) 0%, transparent 70%); border-radius: 18% 60%; }
#ss1 .ss-card:nth-child(8n+5) .ss-shot .banner .art { background: radial-gradient(90% 120% at 30% 80%, var(--k) 0%, transparent 62%); }
#ss1 .ss-card:nth-child(8n+6) .ss-shot .banner .art { background: linear-gradient(300deg, var(--k) 0%, transparent 68%); border-radius: 45% 45% 12% 12%; }
#ss1 .ss-card:nth-child(8n+7) .ss-shot .banner .art { background: conic-gradient(from 40deg at 40% 60%, var(--k), transparent 50%); }
#ss1 .ss-card:nth-child(8n+8) .ss-shot .banner .art { background: linear-gradient(75deg, var(--k) 0%, transparent 72%); border-radius: 12% 50% 50% 12%; }
#ss1 .ss-shot { position: relative; display: block; margin: 0px; container-type: inline-size; aspect-ratio: 16 / 10; overflow: hidden; background: rgb(255, 255, 255); border-bottom: 1px solid var(--line-2); }
#ss1 .ss-shot.is-photo { background-size: cover; background-position: center top; background-repeat: no-repeat; }
#ss1 .ss-shot .chrome { position: absolute; inset: 0px 0px auto; height: 8.4cqw; display: flex; align-items: center; gap: 1.2cqw 1.2cqw; padding: 0px 2.4cqw 0px 2.4cqw; background: rgb(241, 243, 246); border-bottom: 1px solid var(--line-2); }
#ss1 .ss-shot .chrome i { width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: rgb(203, 210, 218); }
#ss1 .ss-shot .chrome s { margin-left: 1.4cqw; flex: 1 1 0%; display: flex; align-items: center; height: 5cqw; padding: 0px 2cqw 0px 2cqw; border-radius: 2.5cqw 2.5cqw 2.5cqw 2.5cqw / 2.5cqw 2.5cqw 2.5cqw 2.5cqw; background: rgb(255, 255, 255); border: 1px solid var(--line-2); font-size: 2.4cqw; color: var(--ink-4); text-decoration: none; overflow: hidden; white-space: nowrap; }
#ss1 .ss-shot .page { position: absolute; inset: 8.4cqw 0px 0px; display: flex; flex-direction: column; }
#ss1 .ss-shot .topbar { flex: 0 0 auto; height: 8.6cqw; display: flex; align-items: center; gap: 2.2cqw 2.2cqw; padding: 0px 3.4cqw 0px 3.4cqw; border-bottom: 1px solid var(--line-2); }
#ss1 .ss-shot .topbar b { font-size: 3.1cqw; font-weight: 800; letter-spacing: -0.03em; color: var(--k); white-space: nowrap; overflow: hidden; }
#ss1 .ss-shot .topbar em { width: 5cqw; height: 1.1cqw; border-radius: 0.6cqw 0.6cqw 0.6cqw 0.6cqw / 0.6cqw 0.6cqw 0.6cqw 0.6cqw; background: rgb(223, 228, 234); }
#ss1 .ss-shot .topbar em:first-of-type { margin-left: auto; }
#ss1 .ss-shot .topbar u { margin-left: 1.4cqw; padding: 1.3cqw 2.4cqw 1.3cqw 2.4cqw; border-radius: 1.1cqw 1.1cqw 1.1cqw 1.1cqw / 1.1cqw 1.1cqw 1.1cqw 1.1cqw; background: var(--k); color: rgb(255, 255, 255); font-size: 2.3cqw; font-weight: 700; text-decoration: none; white-space: nowrap; }
#ss1 .ss-shot .banner { flex: 1 1 0%; display: flex; align-items: center; gap: 3.2cqw 3.2cqw; padding: 4.4cqw 4cqw 4.4cqw 4cqw; color: rgb(255, 255, 255); background: linear-gradient(118deg, var(--k), color-mix(in srgb, var(--k) 62%, #05070C)); }
#ss1 .ss-shot .banner .copy { flex: 1.2 1 0%; min-width: 0px; }
#ss1 .ss-shot .banner b { display: block; font-size: 5.2cqw; line-height: 1.05; font-weight: 800; letter-spacing: -0.035em; }
#ss1 .ss-shot .banner i { display: block; margin-top: 1.8cqw; font-style: normal; font-size: 2.5cqw; line-height: 1.4; opacity: 0.78; }
#ss1 .ss-shot .banner u { display: inline-flex; margin-top: 3cqw; padding: 1.8cqw 3.2cqw 1.8cqw 3.2cqw; border-radius: 1.3cqw 1.3cqw 1.3cqw 1.3cqw / 1.3cqw 1.3cqw 1.3cqw 1.3cqw; background: rgb(255, 255, 255); color: var(--k); font-size: 2.5cqw; font-weight: 750; text-decoration: none; }
#ss1 .ss-shot .banner .art { flex: 1 1 0%; align-self: stretch; border-radius: 2cqw 2cqw 2cqw 2cqw / 2cqw 2cqw 2cqw 2cqw; min-width: 0px; background: radial-gradient(72% 62% at 32% 24%, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.04) 70%), linear-gradient(158deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.42)); }
#ss1 .ss-shot .strip { flex: 0 0 auto; height: 22%; display: flex; gap: 2.4cqw 2.4cqw; padding: 2.8cqw 4cqw 2.8cqw 4cqw; }
#ss1 .ss-shot .strip i { flex: 1 1 0%; border-radius: 1.6cqw 1.6cqw 1.6cqw 1.6cqw / 1.6cqw 1.6cqw 1.6cqw 1.6cqw; background: rgb(245, 247, 249); border: 1px solid var(--line-2); }
@media (max-width: 1180px) { #ss1 { --cardw: 252px; } }
@media (max-width: 1180px) { #ss1 .ss-head { flex-direction: column; align-items: center; gap: 20px; } }
@media (max-width: 1180px) { #ss1 .ss-all { position: static; } }
@media (max-width: 760px) { #ss1 { --cardw: min(78vw, 340px); --gap: 14px; padding-top: 26px; } }
@media (max-width: 760px) { #ss1 .ss-mid h2 { font-size: clamp(38px, 12.5vw, 54px); } }
@media (max-width: 760px) { #ss1 .ss-sub { font-size: 15.5px; } }
@media (max-width: 760px) { #ss1 .ss-body { padding: 15px 16px 17px; gap: 11px; } }
@media (max-width: 760px) { #ss1 .ss-name { font-size: 18px; } }
@media (max-width: 760px) { #ss1 .ss-url { font-size: 14px; } }
@media (max-width: 760px) { #ss1 .ss-trade { font-size: 14px; } }
@media (max-width: 760px) { #ss1 .ss-v { font-size: 27px; } }
@media (max-width: 760px) { #ss1 .ss-u { font-size: 11px; } }
@media (max-width: 760px) { #ss1 .ss-say { font-size: 13.5px; } }
@media (max-width: 760px) { #ss1 .ss-lift { font-size: 13px; } }
@media (max-width: 760px) { #ss1 .ss-ab { position: static; } }
@media (max-width: 760px) { #ss1 .ss-navrow { align-items: center; gap: 16px; margin-top: 14px; } }
@media (max-width: 760px) { #ss1 .ss-dots { margin-top: 0px; } }
@media (prefers-reduced-motion: reduce) { #ss1 *, #ss1 ::before, #ss1 ::after { transition: none !important; } }
@media (prefers-reduced-motion: reduce) { #ss1 .ss-rail { scroll-behavior: auto; } }
@media (max-width: 760px) { #ss1 { background: rgb(244, 247, 251); padding: 50px 0px 54px; } }
@media (max-width: 760px) { #ss1 .ss-grid { display: none; } }
@media (max-width: 760px) { #ss1 .ss-inner { display: flex; flex-direction: column; } }
@media (max-width: 760px) { #ss1 .ss-head { display: contents; } }
@media (max-width: 760px) { #ss1 .ss-mid { padding: 0 var(--gut); } }
@media (max-width: 760px) { #ss1 .ss-mid h2 { font-size: clamp(38px, 11.6vw, 50px); } }
@media (max-width: 760px) { #ss1 .ss-sub { margin-top: 13px; font-size: 15px; line-height: 1.5; } }
@media (max-width: 760px) { #ss1 .ss-deck { order: 2; margin-top: 24px; } }
@media (max-width: 760px) { #ss1 .ss-rail { padding: 2px var(--gut) 14px; } }
@media (max-width: 760px) { #ss1 .ss-card { border-color: rgb(228, 233, 240); } }
@media (max-width: 760px) { #ss1 .ss-ab { display: none; } }
@media (max-width: 760px) { #ss1 .ss-navrow { margin-top: 2px; } }
@media (max-width: 760px) { #ss1 .ss-dots { margin-top: 0px; } }
@media (max-width: 760px) { #ss1 .ss-all { order: 3; align-self: stretch; justify-content: center; margin: 18px var(--gut) 0; padding: 14px 20px; background: var(--paper); } }
#ss1 { scroll-margin-top: calc(var(--barh) + 14px); }