/* Motion and depth. Everything here is progressive: without JS, or with reduced motion,
   the page is complete and still. The html.motion class is set by an inline head script. */

/* Page-to-page cross-fade (supporting browsers). */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.28s; }

/* Hero: a slow light sweep across the yellow band. */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: -40% -20% auto auto; width: 70%; height: 140%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.55), transparent 70%); opacity: 0.55; }
html.motion .hero::before { animation: band-light 16s ease-in-out infinite alternate; }
@keyframes band-light { from { transform: translate(0, 0); } to { transform: translate(-45%, 12%); } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero::before { background: radial-gradient(closest-side, rgba(212, 166, 72, 0.16), transparent 70%); } }
:root[data-theme="dark"] .hero::before { background: radial-gradient(closest-side, rgba(212, 166, 72, 0.16), transparent 70%); }

/* Hero entrance: copy settles in on load and ends fully visible. */
html.motion .hero__copy > * { animation: rise 0.8s cubic-bezier(.2, .7, .2, 1) both; }
html.motion .hero__copy > :nth-child(2) { animation-delay: 0.06s; }
html.motion .hero__copy > :nth-child(3) { animation-delay: 0.12s; }
html.motion .hero__copy > :nth-child(4) { animation-delay: 0.18s; }
html.motion .hero__copy > :nth-child(5) { animation-delay: 0.24s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Scroll reveal: elements below the fold rise in as they enter. */
html.motion [data-reveal] { opacity: 0; transform: translateY(26px) scale(0.985); transition: opacity 0.7s cubic-bezier(.2, .7, .2, 1), transform 0.7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 70ms); }
html.motion [data-reveal].is-in { opacity: 1; transform: none; }

/* Depth: tilt with a metallic sheen that follows the pointer (fine pointers only). */
[data-tilt] { transform-style: preserve-3d; will-change: transform; transition: transform 0.35s cubic-bezier(.2, .7, .2, 1), box-shadow 0.35s; position: relative; }
[data-tilt]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.35s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.38), transparent 45%); mix-blend-mode: soft-light; }
[data-tilt].is-tilting { transition: transform 0.08s linear, box-shadow 0.35s; box-shadow: 0 18px 40px rgba(22, 24, 29, 0.12); }
[data-tilt].is-tilting::after { opacity: 1; }
.post[data-tilt]:hover, a.card[data-tilt]:hover { box-shadow: 0 18px 40px rgba(22, 24, 29, 0.12), inset 0 0 0 2px var(--sun-deep); }

/* Buttons: a light sweep across the main action, a lift on the others. */
.psg-btn--flame { position: relative; overflow: hidden; isolation: isolate; }
.psg-btn--flame::after { content: ""; position: absolute; inset: 0 auto 0 -60%; width: 45%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent); transform: skewX(-18deg); }
html.motion .psg-btn--flame:hover::after { animation: sweep 0.9s ease; }
@keyframes sweep { to { left: 120%; } }
html.motion .psg-btn--sun, html.motion .psg-btn--line { transition: transform 0.15s, box-shadow 0.2s; }
html.motion .psg-btn--sun:hover, html.motion .psg-btn--line:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(22, 24, 29, 0.1); }

/* Header tightens and lifts once the page scrolls. */
.site-head { transition: box-shadow 0.25s, background 0.25s; }
.site-head .wrap { transition: height 0.25s; }
.site-head.is-scrolled { box-shadow: 0 8px 24px rgba(22, 24, 29, 0.08); }
.site-head.is-scrolled .wrap { height: 60px; }

/* Reading progress on articles. */
.progress { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
.progress span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--sun-deep), var(--flame-1)); }

/* Logo band: two rows drifting in opposite directions; pauses on hover. */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee + .marquee { margin-top: var(--space-10); }
.marquee__track { display: flex; gap: var(--space-10); width: max-content; animation: drift var(--dur, 48s) linear infinite; }
.marquee--rev .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track > div { flex: 0 0 168px; background: var(--panel); border-radius: var(--radius-ticket); aspect-ratio: 3 / 2; display: grid; place-items: center; padding: 14px; }
.marquee__track img { max-height: 52px; width: auto; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: 0.85; transition: filter 0.2s, opacity 0.2s; }
.marquee__track > div:hover img { filter: none; opacity: 1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .marquee__track > div { background: var(--chrome-1); } }
:root[data-theme="dark"] .marquee__track > div { background: var(--chrome-1); }
@keyframes drift { to { transform: translateX(calc(-50% - var(--space-10) / 2)); } }

/* Video hero (home): a muted montage of ProjectSG photos under a dark wash, copy on top. */
.hero--video { background: #0e0f12; color: #fff; }
.hero--video::before { display: none; }
.hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #0e0f12; }
.hero__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero__media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(12, 13, 16, 0.9) 0%, rgba(12, 13, 16, 0.66) 42%, rgba(12, 13, 16, 0.3) 100%),
    linear-gradient(180deg, rgba(12, 13, 16, 0.3) 0%, transparent 28%, transparent 58%, rgba(12, 13, 16, 0.92) 100%); }
.hero--video .wrap { grid-template-columns: minmax(0, 1fr); min-height: clamp(440px, 62vh, 660px); align-content: center; padding-block: clamp(40px, 7vw, 96px) clamp(24px, 4vw, 48px); }
.hero--video .hero__copy { max-width: 780px; }
.hero--video .display { color: #fff; font-size: clamp(42px, 6.2vw, 88px); line-height: 0.98; }
.hero--video .display em { font-style: inherit; color: var(--sun); }
.hero--video .hero__copy .lead { color: rgba(255, 255, 255, 0.86); opacity: 1; max-width: 62ch; }
.hero--video .psg-btn--line { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7); }
.hero--video .psg-btn--line:hover { background: rgba(255, 255, 255, 0.1); }
.hero--video .wrap.hero__below { min-height: 0; }
.hero--video .recog > a, .hero--video .recog > div { color: var(--ink); }
.hero__toggle { top: 14px; right: 14px; background: rgba(12, 13, 16, 0.5); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
@media (max-width: 760px) {
  .hero--video .wrap { min-height: 72svh; align-content: end; }
  .hero__media { bottom: auto; height: calc(72svh + 72px); } /* the award cards below sit on the plain dark background */
  .hero__media::after { background: linear-gradient(180deg, rgba(12, 13, 16, 0.45) 0%, rgba(12, 13, 16, 0.72) 45%, #0e0f12 100%); }
}

/* 3D hero stage. */
.hero--3d .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); padding-block: clamp(28px, 5vw, 64px) clamp(16px, 3vw, 28px); }
.hero3d { position: relative; min-height: clamp(320px, 42vw, 540px); margin-right: calc(-1 * clamp(0px, 4vw, 48px)); }
.hero3d canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity 0.9s ease; }
.hero3d.is-live canvas, .hero3d canvas { opacity: 1; }
.hero .wrap.hero__below { display: block; padding-block: 0 clamp(24px, 4vw, 40px); }
.hero3d__legend { z-index: 1; position: absolute; left: 6%; bottom: 6%; display: grid; gap: 6px; font: 700 12.5px/1.2 var(--font-body); color: var(--ink-2); pointer-events: none; }
.hero3d__legend span { display: inline-flex; align-items: center; gap: 8px; }
.hero3d__legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--sun-deep); box-shadow: 0 0 10px var(--sun); }
.hero3d__legend i.dot { border-radius: 50%; width: 8px; height: 8px; }
.hero3d__legend i.dot--click { background: var(--muted); box-shadow: none; }
.hero3d__legend i.dot--spam { background: var(--flame-1); box-shadow: 0 0 8px var(--flame-1); }
.hero3d__legend i.dot--live { background: var(--trust); box-shadow: 0 0 8px var(--trust); }
.hero3d--tall { min-height: clamp(380px, 46vw, 600px); }
@media (min-width: 861px) { .hero--split.hero--3d .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 860px) { .hero3d.hero3d--tall { min-height: 420px; } .hero3d__legend { left: 4%; bottom: 2%; } }
.recog { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-10); }
.recog > a, .recog > div { background: var(--bar); backdrop-filter: blur(10px) saturate(1.4); border-radius: var(--radius-card); padding: 14px 16px; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; text-decoration: none; color: inherit; box-shadow: inset 0 0 0 1px var(--line); }
.recog .medal { width: 44px; height: 44px; font-size: 20px; }
/* Award wall: the real award logos sit on a white tile (they are drawn for light backgrounds), text below. */
.recog--logos > a { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 10px; padding: 12px; }
.recog__logo { height: 72px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px rgba(22, 24, 29, 0.06); display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 12px; overflow: hidden; }
.recog__logo img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; min-width: 0; }
.recog__logo img + img { max-width: 50%; }
.recog__logo--badge { padding: 3px; }
.recog__logo--icon { color: var(--ink-2); background: var(--chip); box-shadow: none; }
.recog__logo--icon .psg-ic { width: 26px; height: 26px; }
.recog--logos > a > span:last-child { padding: 0 4px 2px; }
.recog b { display: block; font: 700 15px/1.25 var(--font-body); }
.recog span span { font: 500 13px/1.3 var(--font-body); color: var(--muted); }
@media (max-width: 960px) { .recog { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .hero--3d .wrap { grid-template-columns: minmax(0, 1fr); } .hero3d { min-height: 300px; margin: -8px 0 0; } }
@media (max-width: 520px) { .recog { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  html.motion [data-reveal] { opacity: 1; transform: none; transition: none; }
  .marquee__track { animation: none; flex-wrap: wrap; width: auto; }
  [data-tilt] { transition: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ProjectSG brand layer, loaded last: DM Sans for all text and numbers, upright headings with tight
   tracking, and more generous spacing. Weights are loaded up to 700, so any 800 in the components
   renders as 700. Italic is loaded at 400 to 500 for real emphasis in articles only. */
:root {
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sec: clamp(64px, 8.5vw, 120px);
  --wrap: 1200px;
  --head-h: 72px;
  --space-14: 16px;
  --space-24: 28px;
}
body { font-size: 16.5px; line-height: 1.65; letter-spacing: -0.006em; font-optical-sizing: auto; text-rendering: optimizeLegibility; }

/* Display and number styles were condensed italics: set them upright. */
.display, .h-page, .disc h3, .journey b, .trio__c b, .demo__steps b, .proj__big b, .proj__step legend b, .proj-bar b,
.cpc-card__now, .res-fig .psg-figure, .pp-proof__fig .psg-figure, .price-plan__flag, .smock__flag, .psg-tag-new,
.psg-tier__big, .psg-cert__amt, .psg-cert__sig, .step::before, .tl__when, .person .pc-initials, .definition dfn { font-style: normal; }

/* Type scale. */
.display { font-weight: 700; font-size: clamp(40px, 5.2vw, 68px); line-height: 1.04; letter-spacing: -0.038em; }
.hero--video .display { font-size: clamp(40px, 5.4vw, 74px); line-height: 1.02; }
.h-page { font-weight: 700; font-size: clamp(34px, 4vw, 54px); line-height: 1.06; letter-spacing: -0.034em; }
.h-sec { font-weight: 700; font-size: clamp(28px, 3.1vw, 42px); line-height: 1.12; letter-spacing: -0.028em; }
.h-card { font-weight: 600; font-size: 20px; line-height: 1.3; letter-spacing: -0.015em; }
.eyebrow { font-weight: 600; font-size: 12px; letter-spacing: 0.14em; color: var(--muted); }
.lead { font-weight: 400; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.6; letter-spacing: -0.01em; max-width: 60ch; }
.body-2 { line-height: 1.65; }
.small { line-height: 1.55; }
.psg-price, .psg-figure, .psg-tier__big, .proj__big b, .cpc-card__now, .res-fig .psg-figure, .credit-row > b, .price-bar__total b,
.path__price b, .journey b, .trio__c b, .disc h3, .cpc-table td:nth-child(2) { letter-spacing: -0.012em; font-variant-numeric: tabular-nums; }
.disc h3, .trio__c b, .proj__big b { letter-spacing: -0.03em; }
.disc h3 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; }
.journey b { font-size: 15px; letter-spacing: 0.02em; }
.trio__c b { font-size: 26px; }
.proj__big b { font-size: clamp(48px, 5.4vw, 68px); }
h3, .pp-feats h3, .path h3, .cross b { letter-spacing: -0.018em; }
.path h3 { font-weight: 700; }

/* Buttons and chips. */
.psg-btn { font-weight: 600; letter-spacing: -0.01em; padding: 14px 24px; }
.psg-btn--big { padding: 17px 28px; }
.psg-btn--sm { padding: 10px 18px; }
.psg-chip, .psg-tag { letter-spacing: 0; }

/* Spacing. */
.hero .wrap { padding-block: clamp(56px, 8vw, 112px) clamp(40px, 5vw, 72px); gap: clamp(32px, 5vw, 72px); }
.hero--page .wrap { padding-block: clamp(48px, 7vw, 96px) clamp(28px, 4vw, 48px); }
.hero__copy { gap: var(--space-24); }
.hero__actions { gap: 12px; margin-top: 8px; }
.sec__head { gap: 16px; margin-bottom: clamp(32px, 4.5vw, 56px); max-width: 800px; }
/* Row heads (text plus a figure or button) span the full width so the side column sits on the right edge;
   the text keeps the normal reading width. */
.sec__head--row { max-width: none; }
.sec__head--row > :first-child { max-width: 800px; }
.grid, .discs, .paths, .results3, .price-plans, .trio, .journey, .demo-pair, .pp-shots, .ladder, .recog, .steps { gap: clamp(16px, 2vw, 24px); }
.card { padding: clamp(24px, 2.8vw, 36px); gap: 14px; }
.disc, .path, .trio__c, .journey li { padding: clamp(22px, 2.6vw, 32px); }
.disc, .path { gap: 16px; }
.pp-feats { padding: clamp(28px, 3.6vw, 48px); gap: clamp(28px, 3.2vw, 44px) clamp(24px, 3vw, 40px); }
.feature__body { padding: clamp(28px, 4vw, 56px); gap: 18px; }
.faq { gap: 10px; }
.faq summary { padding: 20px 22px; font-weight: 600; letter-spacing: -0.01em; }
.faq details > div { padding: 0 22px 20px; }
.cta { padding: clamp(28px, 4vw, 56px); gap: clamp(28px, 4vw, 56px); }
.checks { gap: 12px; }
.logos-label { margin-bottom: 20px; }

/* Header and nav. */
.nav > a, .nav-dd > button { font-weight: 500; letter-spacing: -0.01em; }
.nav [aria-current="page"], .nav-dd.is-current > button { font-weight: 700; }
.head-link { font-weight: 500; }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .display { letter-spacing: -0.03em; }
  .hero .wrap { padding-block: 40px 32px; }
  .card { padding: 22px; }
}

/* Product pages in the GEO page pattern. */
.feature > img.feature__shot { object-position: top center; }
.sec__more { margin-top: 18px; }
.pp-feats .eyebrow { color: var(--sun-ink); letter-spacing: 0.12em; }
.price-line { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: clamp(22px, 3vw, 36px); border-radius: var(--radius-card); background: var(--panel); text-decoration: none; color: inherit; box-shadow: inset 0 0 0 2px var(--sun-deep); }
.price-line:hover { background: var(--sun-wash); }
.price-line__l { display: grid; gap: 8px; }
.price-line__l b { font: 600 18px/1.3 var(--font-body); color: var(--ink); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price-line__l > span:last-child { font: 400 14.5px/1.5 var(--font-body); color: var(--ink-2); }
.price-line .more { flex: none; }
@media (max-width: 640px) { .price-line { flex-direction: column; align-items: flex-start; } }

/* ---------- Landing page creation: scroll story with a before/after page mock (always light, like a screenshot). */
.hero--lp .display em { font-style: normal; color: #c2410c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero--lp .display em { color: var(--sun); } }
:root[data-theme="dark"] .hero--lp .display em { color: var(--sun); }
.story { padding-top: var(--sec); }
.story__wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.story__stage { position: sticky; top: calc(var(--head-h) + 28px); display: grid; gap: 14px; }
.story__steps { display: grid; }
.story__step { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; }
.story__step:first-child { min-height: 60vh; justify-content: flex-start; padding-top: 6vh; }
.story__step:last-child { min-height: 90vh; }
.story__card { display: grid; gap: 14px; opacity: 0.32; transition: opacity 0.4s; }
.story__step.is-on .story__card, html:not(.motion) .story__card { opacity: 1; }
.story__card h3 { font: 700 clamp(26px, 2.8vw, 38px)/1.1 var(--font-body); letter-spacing: -0.03em; color: var(--ink); }
.story__card p { font: 400 clamp(16px, 1.3vw, 18px)/1.6 var(--font-body); color: var(--ink-2); max-width: 44ch; }
.leaks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.leaks li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; font: 500 16px/1.45 var(--font-body); color: var(--ink-2); }
.leaks b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #0b0c0e; color: #fff; font: 700 12px/1 var(--font-body); }
.story__device { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 24px 60px rgba(22, 24, 29, 0.16); }
.story__bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #eef0f3; }
.story__bar i { width: 9px; height: 9px; border-radius: 50%; background: #d5d8de; }
.story__bar span { margin: 0 auto; transform: translateX(-20px); font: 600 11.5px/1 var(--font-body); color: #676d78; background: #fff; border-radius: 9999px; padding: 5px 14px; }
.story__meter { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 12px 16px; border-radius: var(--radius-ticket); background: var(--panel); font: 600 14px/1.2 var(--font-body); color: var(--ink-2); }
.story__meter b { font: 700 22px/1 var(--font-body); letter-spacing: -0.02em; color: #0b0c0e; transition: color 0.3s; }
.story__meter b::before { content: "→ "; color: var(--muted); }
.story__meter b.is-up { color: var(--trust); }
.story__meter-n { margin-left: auto; font: 500 12px/1.2 var(--font-body); color: var(--muted); }

.lp { position: relative; container-type: inline-size; aspect-ratio: 16 / 11; overflow: hidden; background: #fff; color: #16181d; font-family: var(--font-body); text-align: left; }
.lp-x--after, .lp-x--proof, .lp-x--friction { display: none !important; }
.lp.is-hook .lp__h-before, .lp.is-hook .lp__dots, .lp.is-offer .lp__links, .lp.is-offer .lp__cta-before, .lp.is-proof .lp__about, .lp.is-friction .lp__form-before { display: none !important; }
.lp.is-hook .lp__h-after, .lp.is-offer .lp__cta-after, .lp.is-offer .lp__navcta, .lp.is-proof .lp__trust, .lp.is-proof .lp__quote, .lp.is-friction .lp__form-after, .lp.is-friction .lp__bar { display: flex !important; animation: lp-in 0.5s cubic-bezier(.2, .7, .2, 1); }
.lp.is-hook .lp__h-after, .lp.is-proof .lp__quote, .lp.is-friction .lp__form-after { display: grid !important; }
@keyframes lp-in { from { opacity: 0; transform: translateY(1.2cqw); } }
.lp-pin { display: none; position: absolute; z-index: 3; top: -1.6cqw; left: -1.6cqw; width: 3cqw; height: 3cqw; place-items: center; border-radius: 50%; background: #0b0c0e; color: #fff; font: 700 1.6cqw/1 var(--font-body); font-style: normal; box-shadow: 0 0 0 0.5cqw rgba(226, 61, 11, 0.22); }
.lp.is-flaws .lp-pin { display: grid; animation: lp-pop 0.4s cubic-bezier(.2, .9, .3, 1.4); }
.lp.is-flaws.is-proof .lp-pin--proof { display: none; }
@keyframes lp-pop { from { transform: scale(0); } }
.lp__nav { display: flex; align-items: center; gap: 2cqw; padding: 1.8cqw 3cqw; border-bottom: 1px solid #eef0f3; font-size: 1.45cqw; }
.lp__logo { margin-right: auto; font: 800 1.8cqw/1 var(--font-body); letter-spacing: 0.24em; }
.lp__links { position: relative; display: flex; gap: 1.7cqw; color: #676d78; }
.lp__wa { display: inline-flex; align-items: center; gap: 0.6cqw; padding: 0.9cqw 1.6cqw; border-radius: 99px; background: #1fae5b; color: #fff; font-weight: 700; }
.lp svg { width: 1.9cqw; height: 1.9cqw; fill: currentColor; flex: none; }
.lp__hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2cqw; align-items: center; padding: 4.4cqw 3cqw; background: radial-gradient(80% 120% at 80% 20%, #3a4150, #121419); color: #fff; transition: background 0.5s; }
.lp.is-hook .lp__hero { background: linear-gradient(140deg, #f8f2e4, #ead6a2); color: #16181d; }
.lp__copy { display: grid; gap: 1.8cqw; align-content: center; }
.lp__h-before { position: relative; display: grid; gap: 1.2cqw; }
.lp__h-before b { font: italic 400 4.6cqw/1.08 Georgia, "Times New Roman", serif; letter-spacing: 0.01em; }
.lp__h-before span { font: 300 1.6cqw/1.3 var(--font-body); letter-spacing: 0.3em; text-transform: uppercase; color: #b9bec8; }
.lp__h-after { gap: 1.2cqw; }
.lp__h-after b { font: 700 4.1cqw/1.06 var(--font-body); letter-spacing: -0.03em; }
.lp__h-after span { font: 500 1.7cqw/1.4 var(--font-body); color: #4b505a; }
.lp__cta-before { position: relative; display: flex; align-items: center; gap: 1.2cqw; }
.lp__cta-before .lp-pin { position: static; }
.lp__ghost { font: 500 1.4cqw/1 var(--font-body); color: #9aa0ab; border-bottom: 1px solid #5c6370; padding-bottom: 0.4cqw; letter-spacing: 0.1em; text-transform: uppercase; }
.lp__cta-after { flex-wrap: wrap; align-items: center; gap: 1.2cqw; }
.lp__btn { display: inline-flex; align-items: center; padding: 1.3cqw 2.3cqw; border-radius: 99px; background: linear-gradient(90deg, #2a2d33, #0b0c0e); color: #fff; font: 700 1.6cqw/1 var(--font-body); box-shadow: 0 0.8cqw 2cqw rgba(226, 61, 11, 0.28); }
.lp__chip { display: inline-flex; align-items: center; gap: 0.6cqw; padding: 1.1cqw 1.8cqw; border-radius: 99px; box-shadow: inset 0 0 0 1.5px #1fae5b; color: #0d7f37; font: 700 1.5cqw/1 var(--font-body); }
.lp__trust { flex-wrap: wrap; gap: 0.8cqw; }
.lp__trust span { padding: 0.7cqw 1.2cqw; border-radius: 99px; background: rgba(255, 255, 255, 0.8); color: #0d7f37; font: 700 1.25cqw/1 var(--font-body); }
.lp__art { position: relative; display: grid; justify-items: center; gap: 1.6cqw; }
.lp .lp-car { width: 100%; max-width: 34cqw; height: auto; }
.lp-car__body { fill: #e9ebef; transition: fill 0.5s; }
.lp-car__win { fill: #7f8b9c; }
.lp-car__wheel { fill: #16181d; stroke: #c9ccd2; stroke-width: 3; }
.lp.is-hook .lp-car__body { fill: #16181d; }
.lp.is-hook .lp-car__win { fill: #9fb3c8; }
.lp__dots { display: flex; gap: 0.8cqw; }
.lp__dots i { width: 1cqw; height: 1cqw; border-radius: 50%; background: #5c6370; }
.lp__dots i:first-child { background: #fff; }
.lp__body { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2.4cqw; padding: 3cqw; }
.lp__about { display: grid; gap: 1cqw; align-content: start; }
.lp__about b { font: italic 400 2.4cqw/1.2 Georgia, serif; }
.lp__about span { font: 400 1.4cqw/1.6 var(--font-body); color: #676d78; }
.lp__quote { gap: 1cqw; align-content: start; padding: 2cqw; border-radius: 1.4cqw; background: #f6f4ef; }
.lp__quote span { font: 500 1.65cqw/1.45 var(--font-body); }
.lp__quote b { font: 700 1.3cqw/1.2 var(--font-body); color: #676d78; }
.lp__form { position: relative; }
.lp__form-before { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.8cqw; }
.lp__form-before b, .lp__form-after b { grid-column: 1 / -1; font: 700 1.6cqw/1.2 var(--font-body); }
.lp__form-before i, .lp__form-after i { display: block; height: 2.6cqw; border-radius: 0.6cqw; box-shadow: inset 0 0 0 1px #d5d8de; }
.lp__submit { grid-column: 1 / -1; justify-self: start; padding: 1cqw 2cqw; border-radius: 0.6cqw; background: #e8eaee; color: #9aa0ab; font: 600 1.4cqw/1 var(--font-body); }
.lp__form-after { gap: 1cqw; padding: 2cqw; border-radius: 1.4cqw; box-shadow: inset 0 0 0 0.25cqw #d4a648; background: #faf6ec; }
.lp__form-after .lp__btn { justify-self: start; }
.lp-pin--proof { top: auto; bottom: 4cqw; left: 2cqw; }
.lp__bar { position: absolute; left: 0; right: 0; bottom: 0; justify-content: center; align-items: center; gap: 1cqw; padding: 1.2cqw; background: rgba(255, 255, 255, 0.94); box-shadow: 0 -1px 0 #eef0f3; }
.ba { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.ba__col { margin: 0; display: grid; gap: 12px; }
.ba__col figcaption { display: flex; align-items: center; gap: 10px; font: 600 16px/1.2 var(--font-body); color: var(--ink); }
.ba .lp-pin { display: none !important; }
.vladder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); align-items: end; }
.vladder li { position: relative; display: grid; align-content: start; gap: 6px; min-height: calc(150px + var(--n, 0) * 44px); padding: 20px; border-radius: var(--radius-card); background: var(--panel); }
.vladder li:last-child { background: linear-gradient(160deg, var(--sun), var(--sun-deep)); }
.vladder li:last-child strong, .vladder li:last-child span, .vladder li:last-child b { color: var(--on-sun, #16181d); }
.vladder b { font: 700 15px/1 var(--font-body); color: var(--sun-ink); letter-spacing: 0.02em; }
.vladder strong { font: 700 18px/1.25 var(--font-body); letter-spacing: -0.015em; color: var(--ink); }
.vladder span { font: 400 14.5px/1.45 var(--font-body); color: var(--ink-2); }
@media (max-width: 900px) {
  .story__wrap { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .story__stage { top: calc(var(--head-h) + 8px); z-index: 2; padding-bottom: 10px; background: var(--bg); }
  .story__meter { padding: 8px 12px; font-size: 12.5px; }
  .story__meter b { font-size: 17px; }
  .story__meter-n { display: none; }
  .story__step, .story__step:first-child { min-height: 70vh; justify-content: flex-end; padding: 0 0 8vh; }
  .story__card { padding: 18px 20px; border-radius: var(--radius-card); background: var(--panel); box-shadow: 0 8px 24px rgba(22, 24, 29, 0.08); }
  .story__card h3 { font-size: 24px; }
  .ba { grid-template-columns: minmax(0, 1fr); }
  .vladder { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; }
  .vladder li { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .lp *, .lp { animation: none !important; transition: none !important; } .story__card { transition: none; } }

/* ---------- Domain registration */
.dom { display: grid; gap: 14px; padding: clamp(20px, 2.6vw, 30px); border-radius: var(--radius-card); background: var(--panel); box-shadow: inset 0 0 0 2px var(--sun-deep); }
.dom__label { font: 700 18px/1.25 var(--font-body); letter-spacing: -0.015em; color: var(--ink); }
.dom__search { display: grid; gap: 6px; }
.dom__search input { width: 100%; box-sizing: border-box; height: 58px; padding: 0 20px; border: 0; border-radius: 9999px; background: var(--chip); color: var(--ink); font: 600 20px/1 var(--font-body); letter-spacing: -0.01em; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.dom__search input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--ink); background: var(--panel); }
.dom__hint { padding-left: 20px; font: 500 12.5px/1.2 var(--font-body); color: var(--muted); }
.dom__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dom__list label { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 12px; align-items: center; padding: 12px 14px; border-radius: var(--radius-ticket); background: var(--bg); cursor: pointer; box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow 0.15s, background 0.15s; }
.dom__list input { width: 18px; height: 18px; margin: 0; accent-color: var(--sun-deep); grid-row: span 2; }
.dom__list label:has(input:checked) { background: var(--sun-wash); box-shadow: inset 0 0 0 1.5px var(--sun-deep); }
.dom__name { font: 600 17px/1.2 var(--font-body); color: var(--ink); word-break: break-all; }
.dom__name b { font-weight: 700; }
.dom__who { font: 500 13px/1.35 var(--font-body); color: var(--muted); }
.dom__tip { margin: 0; font: 500 13.5px/1.45 var(--font-body); color: var(--ink-2); }
.ext { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.ext__c { display: grid; gap: 12px; align-content: start; padding: clamp(22px, 2.6vw, 32px); border-radius: var(--radius-card); background: var(--panel); }
.ext__c--sun { background: linear-gradient(160deg, var(--sun), var(--sun-deep)); }
.ext__c--sun * { color: var(--on-sun, #16181d) !important; }
.ext__tld { font: 700 clamp(34px, 3.4vw, 46px)/1 var(--font-body); letter-spacing: -0.04em; color: var(--ink); }
.ext__c > p { margin: 0; font: 500 16px/1.45 var(--font-body); color: var(--ink-2); }
.ext__c dl { margin: 0; display: grid; gap: 10px; }
.ext__c dt { font: 600 11.5px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.ext__c dd { margin: 4px 0 0; font: 500 15px/1.45 var(--font-body); color: var(--ink); }
@media (max-width: 860px) { .ext { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Theme switch (header) */
:root[data-theme="light"] { color-scheme: light; }
.theme-btn { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--chip); color: var(--ink); cursor: pointer; transition: background 0.2s; }
.theme-btn:hover { background: var(--line-2); }
.theme-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.theme-btn .psg-ic { font-size: 19px; }
:root[data-theme="dark"] .theme-btn__moon, :root[data-theme="light"] .theme-btn__sun { display: none; }

/* ---------- Gold accents (ProjectSG metal palette). Gold carries emphasis only: text uses
   --accent-text, which holds 4.5:1 on the page and cards in both themes; gold fills carry gold-ink. */
:root, :root[data-theme="light"] { --accent-text: #8a5a26; --gold-line: #d4a648; --gold-soft: #fbf3df; --gold-grad: linear-gradient(135deg, var(--gold-1), var(--gold-2)); }
:root[data-theme="dark"] { --accent-text: #e9cf8a; --gold-line: #b58a35; --gold-soft: #2a2416; }
.eyebrow { color: var(--accent-text); }
.sec__head > .eyebrow, .sec__head .stack > .eyebrow, .story__card > .eyebrow, .feature__body > .eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.sec__head > .eyebrow::before, .sec__head .stack > .eyebrow::before, .story__card > .eyebrow::before, .feature__body > .eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--gold-grad); }
.hero__copy .crumbs a:hover { color: var(--accent-text); }
/* Numbered steps get gold badges. */
.journey b, .vladder b, .proj__step legend b { display: inline-grid; place-items: center; justify-self: start; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 9999px; background: var(--gold-grad); color: var(--gold-ink); font: 700 13px/1 var(--font-body); letter-spacing: 0.02em; }
.vladder li:last-child b { background: var(--panel); color: var(--ink); }
.pp-feats .eyebrow, .demo__steps b, .aib__checks li.is-on .psg-ic { color: var(--accent-text); }
.demo__steps button::after { background: linear-gradient(90deg, var(--gold-2), var(--sun-deep)); }
/* Default tag is gold; selling and status tags keep their own fills. */
.psg-tag:not([class*="psg-tag--"]) { background: var(--gold-grad); color: var(--gold-ink); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 11.5px; padding: 5px 9px; }
.trio__c--sun .psg-tag:not([class*="psg-tag--"]), .ext__c--sun .psg-tag:not([class*="psg-tag--"]) { background: rgba(22, 24, 29, 0.88); color: var(--gold-1); }
.psg-tag--laurel { font-weight: 700; }
.price-plan__flag.psg-tag { position: absolute; top: -11px; right: 16px; z-index: 1; padding: 6px 10px; text-transform: uppercase; font-size: 11.5px; letter-spacing: 0.05em; font-style: normal; }
/* Hover and focus rings in gold. */
.path:hover, .show:hover, .cross:hover, a.card:hover, .post:hover { box-shadow: inset 0 0 0 2px var(--gold-line); }
.price-line { box-shadow: inset 0 0 0 2px var(--gold-line); }
.price-line:hover { background: var(--gold-soft); }
.price-plan.is-picked { box-shadow: inset 0 0 0 2px var(--gold-line), 0 18px 44px rgba(181, 138, 53, 0.18); }
/* A gold hairline under the header. */
.site-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-line) 20%, var(--gold-line) 80%, transparent); opacity: 0.55; pointer-events: none; }
/* Feature lists and FAQ details pick up gold. */
.faq details[open] { box-shadow: inset 3px 0 0 var(--gold-line); }
.faq details[open] summary .psg-ic { color: var(--accent-text); }
.checks .psg-ic { color: var(--trust); }
.goal { background: var(--gold-soft); color: var(--ink-2); box-shadow: inset 3px 0 0 var(--gold-line); }
.goal b { color: var(--accent-text); }

/* ---------- Light mode polish: warm grey page, crisp white cards with a hairline, gold details. */
:root[data-theme="light"] { --bg: #f4f3ef; --chip: #eceae3; --line: #e6e3da; }
:root[data-theme="light"] .card, :root[data-theme="light"] .pp-feats, :root[data-theme="light"] .faq details, :root[data-theme="light"] .trio__c:not(.trio__c--sun),
:root[data-theme="light"] .path:not(.path--hero):not(.path--quiet), :root[data-theme="light"] .journey li, :root[data-theme="light"] .ext__c:not(.ext__c--sun),
:root[data-theme="light"] .disc, :root[data-theme="light"] .show, :root[data-theme="light"] .cross, :root[data-theme="light"] .proj__step, :root[data-theme="light"] .feature,
:root[data-theme="light"] .demo, :root[data-theme="light"] .recog > a, :root[data-theme="light"] .recog > div, :root[data-theme="light"] .price-plan, :root[data-theme="light"] .vladder li:not(:last-child) { box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(60, 50, 20, 0.04); }
:root[data-theme="light"] .path:not(.path--hero):not(.path--quiet):hover, :root[data-theme="light"] .show:hover, :root[data-theme="light"] .cross:hover, :root[data-theme="light"] a.card:hover { box-shadow: 0 0 0 2px var(--gold-line), 0 10px 30px rgba(140, 100, 30, 0.1); }
:root[data-theme="light"] .price-plan.is-picked { box-shadow: 0 0 0 2px var(--gold-line), 0 18px 44px rgba(181, 138, 53, 0.18); }
:root[data-theme="light"] .site-head { background: rgba(255, 255, 255, 0.92); }
:root[data-theme="light"] .lead { color: #4a4740; }
/* The video hero stays dark in both themes, so its intro keeps the light text set in motion.css. */
:root[data-theme="light"] .hero--video .hero__copy .lead { color: rgba(255, 255, 255, 0.86); }

/* Proof strip cards: the second line was an inline span sitting on the body's tall line height, so
   wrapped lines spread apart. Set both lines as blocks with their own, tighter rhythm. */
.recog > a > span:last-child, .recog > div > span:last-child { display: grid; gap: 4px; line-height: 1.3; min-width: 0; }
.recog b { line-height: 1.3; }
.recog span span { display: block; font-size: 13.5px; line-height: 1.45; }
.recog > a, .recog > div { padding: 16px; gap: 12px; }

/* ---------- Property Ecosystem: 3D trademark certificate (motion in src/js/cert3d.js)
   The certificate is a physical object, so its paper stays cream in both themes. Sizes inside it use
   container units of the stage, so the whole card scales as one piece. */
.tm-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 440px); gap: clamp(28px, 5vw, 72px); align-items: center; margin-bottom: clamp(32px, 4.5vw, 56px); }
.tm-row > .sec__head { margin-bottom: 0; }
@media (max-width: 860px) { .tm-row { grid-template-columns: minmax(0, 1fr); } .cert { max-width: 440px; width: 100%; justify-self: center; } }
.cert { margin: 0; display: grid; gap: 6px; }
.cert__stage { position: relative; perspective: 1100px; container-type: inline-size; padding: 4% 0 9%; }
.cert__card { position: relative; aspect-ratio: 1.414 / 1; transform-style: preserve-3d; transform: translateY(var(--fy, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; will-change: transform; border-radius: 12px; }
.cert__card:active { cursor: grabbing; }
.cert__card:focus-visible { outline: 3px solid var(--gold-line); outline-offset: 10px; }
.cert__edge { position: absolute; inset: 0; border-radius: 12px; background: #a77d2e; transform: translateZ(var(--z)); }
.cert__face { position: absolute; inset: 0; border-radius: 12px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1.6cqi solid transparent;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.75), transparent 62%) padding-box,
    repeating-radial-gradient(circle at 0% 100%, transparent 0 5px, rgba(181, 138, 53, 0.11) 5px 6px) padding-box,
    repeating-radial-gradient(circle at 100% 0%, transparent 0 5px, rgba(181, 138, 53, 0.08) 5px 6px) padding-box,
    linear-gradient(#fbf6ea, #f6eedb) padding-box,
    linear-gradient(135deg, #f7e1a6, #b58a35 32%, #f7e1a6 52%, #9a7128 78%, #e9cf8a) border-box; }
.cert__face--front { transform: translateZ(4px); }
.cert__face--back { transform: rotateY(180deg) translateZ(4px); }
.cert__face::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.55) 50%, transparent 62%); background-size: 260% 100%; background-position: var(--shine, 50%) 0; }
.cert__frame { position: absolute; z-index: 1; inset: 2cqi; border: 1px solid rgba(181, 138, 53, 0.55); border-radius: 6px; padding: 5cqi 6cqi 4.5cqi; display: flex; flex-direction: column; align-items: flex-start; gap: 1.6cqi; color: #2a1f0e; text-align: left; }
.cert__logo { height: 4.4cqi; width: auto; margin-bottom: 1.4cqi; }
.cert__kicker { font: 700 2.5cqi/1 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; color: #8a5a26; }
.cert__mark { font: 700 6.6cqi/1.06 var(--font-body); letter-spacing: -0.025em; color: #1f170a; max-width: 94%; }
.cert__mark sup { font-size: 0.42em; vertical-align: 0.9em; margin-left: 0.1em; }
.cert__text { font: 500 3cqi/1.4 var(--font-body); color: #5a4a2e; max-width: 66%; }
.cert__foot { margin-top: auto; }
.cert__no { display: block; font: 600 2.6cqi/1.45 var(--font-body); color: #4a3a20; letter-spacing: 0.03em; font-variant-numeric: tabular-nums; }
.cert__no small { display: block; margin-bottom: 0.4cqi; font-size: 2.1cqi; letter-spacing: 0.16em; text-transform: uppercase; color: #8a5a26; }
.cert__seal { position: absolute; right: 4.5cqi; bottom: 3.6cqi; width: 21cqi; height: 21cqi; transform: rotate(-8deg); filter: drop-shadow(0 1px 1.5px rgba(74, 45, 6, 0.35)); }
.cert__seal-o { fill: #d4a648; stroke: #9a7128; stroke-width: 2; }
.cert__seal-i { fill: #e9cf8a; stroke: #fbf6ea; stroke-width: 1.5; }
.cert__seal-t { font: 700 9.6px/1 var(--font-body); letter-spacing: 0.04em; fill: #4a2d06; }
.cert__seal-c { font: 800 21px/1 var(--font-body); letter-spacing: -0.03em; fill: #4a2d06; }
.cert__frame--back { align-items: center; justify-content: center; text-align: center; gap: 2.4cqi; }
.cert__frame--back .cert__seal { position: static; width: 20cqi; height: 20cqi; transform: none; }
.cert__frame--back .cert__text { max-width: 86%; font-size: 2.6cqi; }
.cert__tools { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2cqi; max-width: 92%; }
.cert__tools li { font: 600 2.7cqi/1 var(--font-body); padding: 1.3cqi 2.1cqi; border-radius: 9999px; background: rgba(212, 166, 72, 0.18); color: #4a2d06; box-shadow: inset 0 0 0 1px rgba(181, 138, 53, 0.45); }
.cert__shadow { position: absolute; left: 14%; right: 14%; bottom: 1%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.32), transparent); transform: scaleX(var(--sh, 1)); pointer-events: none; }
:root[data-theme="dark"] .cert__shadow { background: radial-gradient(closest-side, rgba(233, 207, 138, 0.22), transparent); }
.cert__cap { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 14px; }
.cert__spin { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 9999px; background: var(--panel); color: var(--ink); font: 700 14px/1 var(--font-body); box-shadow: inset 0 0 0 1.5px var(--gold-line); cursor: pointer; }
.cert__spin:hover { background: var(--gold-soft); }
.cert__spin:focus-visible { outline: 3px solid var(--gold-line); outline-offset: 2px; }
.cert__spin svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cert__hint { font: 500 13px/1.3 var(--font-body); color: var(--muted); }

/* ---------- Property Ecosystem: interactive Google Search Ads section (motion in src/js/search-ads.js)
   State classes on .sads: is-typing (query being typed), is-ad (ad shown), is-click (cursor clicks the ad),
   is-lead (verified enquiry card). Without motion the final state shows. */
.sads { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(28px, 4.5vw, 64px); align-items: center; padding: clamp(24px, 4vw, 56px); border-radius: var(--radius-card); background: var(--panel); }
/* Narrow screens: the search sits right under the picks, before the steps it illustrates. */
@media (max-width: 960px) { .sads { grid-template-columns: minmax(0, 1fr); gap: 16px; } .sads__copy { display: contents; } .sads__mock { order: 1; margin: 6px 0 4px; } .sads__steps, .sads__partner { order: 2; } }
:root[data-theme="light"] .sads { box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(60, 50, 20, 0.04); }
.sads__copy { display: grid; gap: 16px; align-content: start; min-width: 0; }
.sads__copy > .eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.sads__copy > .eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--gold-grad); }
.sads__try { display: grid; gap: 10px; margin-top: 4px; }
.sads__label { font: 700 12px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.sads__picks { display: flex; flex-wrap: wrap; gap: 8px; }
.sads__picks button { min-height: 38px; padding: 0 14px; border: 0; border-radius: var(--radius-pill); background: var(--chip); color: var(--ink); font: 600 14px/1 var(--font-body); cursor: pointer; box-shadow: inset 0 0 0 1.5px transparent; transition: background 0.2s, box-shadow 0.2s; }
.sads__picks button:hover { box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.sads__picks button[aria-pressed="true"] { background: var(--gold-grad); color: var(--gold-ink); box-shadow: none; }
.sads__picks button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sads__steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.sads__steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 12px; border-radius: 14px; transition: background 0.35s; }
.sads__steps li.is-on { background: var(--gold-soft); }
.sads__steps b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9999px; background: var(--chip); color: var(--muted); font: 700 13px/1 var(--font-body); transition: background 0.35s, color 0.35s; }
.sads__steps li.is-on b { background: var(--gold-grad); color: var(--gold-ink); }
.sads__steps strong { display: block; font: 700 15.5px/1.3 var(--font-body); color: var(--ink); }
.sads__steps span span { display: block; margin-top: 3px; font: 500 14px/1.45 var(--font-body); color: var(--muted); }
.sads__partner { display: grid; gap: 8px; justify-items: start; padding-top: 16px; border-top: 1px solid var(--line); }
.sads__partner .small { margin: 0; color: var(--muted); }
.sads__mock { margin: 0; display: grid; gap: 10px; min-width: 0; }
.sads__screen { position: relative; padding: clamp(12px, 2.2vw, 26px); border-radius: 22px; background: radial-gradient(120% 120% at 100% 0%, rgba(212, 166, 72, 0.28), transparent 55%), var(--chip); overflow: hidden; }
.sads__cap { font: 500 13px/1.4 var(--font-body); color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sads .gm { padding-bottom: 10px; }
.sads .gm-q { display: inline-flex; align-items: center; }
.sads__caret { display: none; width: 1.5px; height: 18px; margin-left: 1px; background: #1f1f1f; animation: aib-blink 1s steps(1) infinite; }
.sads.is-typing .sads__caret { display: inline-block; }
.sads__results { position: relative; padding-top: 6px; }
.gm-ad { position: relative; padding: 12px 2px 14px; transition: opacity 0.45s, transform 0.45s; }
.gm-ad::before { content: ""; position: absolute; inset: 4px -10px; border-radius: 12px; box-shadow: inset 0 0 0 2px var(--sun-deep); opacity: 0; transition: opacity 0.4s 0.3s; pointer-events: none; }
.sads.is-ad .gm-ad::before { opacity: 1; }
.gm-ad__spons { display: block; margin-bottom: 6px; font: 700 12.5px/1 Arial, sans-serif; color: #1f1f1f; }
.gm-ad .gm-res__t { transition: color 0.2s; }
.sads.is-click .gm-ad .gm-res__t { color: #681da8; text-decoration: underline; }
.gm-ad__links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 13.5px; color: #1a0dab; }
.gm-skel { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 14px 2px; border-top: 1px solid #f1f3f4; }
.gm-skel .gm-fav { width: 26px; height: 26px; }
.gm-skel span { display: grid; gap: 8px; align-content: start; }
.gm-skel span i { display: block; height: 10px; border-radius: 5px; background: #eef0f3; }
.gm-skel span i:nth-child(1) { width: 38%; } .gm-skel span i:nth-child(2) { width: 82%; height: 14px; background: #e3e8f4; } .gm-skel span i:nth-child(3) { width: 64%; }
.sads__cursor { position: absolute; left: 0; top: 0; width: 26px; height: 26px; fill: #16181d; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3)); transform: translate(var(--cx, 88%), var(--cy, 300px)); opacity: 0; pointer-events: none; transition: transform 0.75s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.3s; }
.sads.is-aim .sads__cursor { opacity: 1; }
.sads.is-click .sads__cursor { animation: sads-press 0.3s ease; }
@keyframes sads-press { 50% { scale: 0.82; } }
.sads__lead { position: absolute; right: clamp(12px, 2.2vw, 26px); bottom: clamp(12px, 2.2vw, 26px); display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 16px; background: #16181d; color: #fff; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28); font: 500 13.5px/1.35 var(--font-body); opacity: 0; transform: translateY(14px) scale(0.96); transition: opacity 0.4s, transform 0.5s cubic-bezier(0.3, 0.7, 0.2, 1.2); max-width: calc(100% - 24px); }
.sads__lead b { display: block; font-weight: 700; color: var(--gold-1); }
.sads__lead-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #1f7a3d; color: #fff; flex: none; }
.sads__lead-ic .psg-ic { width: 18px; height: 18px; stroke-width: 2.6; }
.sads.is-lead .sads__lead { opacity: 1; transform: none; }
/* Motion on: the ad waits for the search; without motion (or for reduced motion) everything shows. */
.gm-ad > * { transition: opacity 0.4s; }
.motion .sads.is-run:not(.is-ad) .gm-ad > * { opacity: 0; }
.motion .sads.is-run:not(.is-ad) .gm-ad { background: linear-gradient(#eef0f3, #eef0f3) 2px 14px / 18% 10px no-repeat, linear-gradient(#eef0f3, #eef0f3) 2px 36px / 46% 10px no-repeat, linear-gradient(#e3e8f4, #e3e8f4) 2px 64px / 78% 16px no-repeat, linear-gradient(#eef0f3, #eef0f3) 2px 94px / 92% 10px no-repeat, linear-gradient(#eef0f3, #eef0f3) 2px 114px / 58% 10px no-repeat; }
.motion .sads.is-run:not(.is-ad) .gm-skel span i { background: linear-gradient(90deg, #eef0f3, #f7f8fa, #eef0f3); background-size: 200% 100%; animation: gm-shimmer 1.1s linear infinite; }
@media (max-width: 520px) { .gm-ad__links { gap: 6px 12px; font-size: 13px; } .sads__lead { left: 12px; right: 12px; } .sads__screen { padding: 10px; } }
@media (prefers-reduced-motion: reduce) { .sads__caret { animation: none; } }

/* ---------- Corporate Google Ads page: hero search look-alike (reuses .sads), budget leaks, account check
   (src/js/ads-check.js) */
.sads--hero { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 0; background: none; align-items: start; }
:root[data-theme="light"] .sads--hero { box-shadow: none; }
@media (max-width: 960px) { .sads--hero .sads__mock { order: 0; margin: 0; } }
.gads-partner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 4px; font: 500 14px/1.45 var(--font-body); color: var(--muted); }
.gads-leaks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
@media (max-width: 900px) { .gads-leaks { grid-template-columns: minmax(0, 1fr); } }
.gads-leaks > li { display: grid; gap: 12px; align-content: start; padding: clamp(22px, 2.6vw, 32px); border-radius: var(--radius-card); background: var(--panel); }
.gads-leaks .psg-status { justify-self: start; letter-spacing: 0.06em; text-transform: uppercase; }
.gads-leaks h3 { margin: 0; font: 700 20px/1.25 var(--font-body); color: var(--ink); }
.gads-leaks p { margin: 0; font: 500 15px/1.55 var(--font-body); color: var(--muted); }
.gads-leaks .gads-fix { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink-2); }
.gads-fix .psg-ic { width: 20px; height: 20px; color: var(--trust); margin-top: 1px; }
.gads-fix b { color: var(--trust); margin-right: 4px; }
.gads-check { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; padding: clamp(24px, 4vw, 56px); border-radius: var(--radius-card); background: var(--panel); }
@media (max-width: 960px) { .gads-check { grid-template-columns: minmax(0, 1fr); } }
.gads-check__head { grid-column: 1 / -1; display: grid; gap: 14px; max-width: 760px; }
.gads-check__head > .eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.gads-check__head > .eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--gold-grad); }
.gads-qs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: gq; }
.gads-qs > li { counter-increment: gq; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--bg); transition: box-shadow 0.2s; }
.gads-qs > li::before { content: counter(gq, decimal-leading-zero); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9999px; background: var(--chip); color: var(--muted); font: 700 12.5px/1 var(--font-body); }
.gads-qs > li.is-answered::before { background: var(--gold-grad); color: var(--gold-ink); }
.gads-qs > li > span { font: 600 15px/1.4 var(--font-body); color: var(--ink); }
.gads-ans { display: flex; gap: 4px; margin: 0; padding: 3px; border: 0; border-radius: 9999px; background: var(--chip); }
.gads-ans label { position: relative; cursor: pointer; }
.gads-ans input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.gads-ans span { display: block; padding: 8px 12px; border-radius: 9999px; font: 700 13px/1 var(--font-body); color: var(--muted); white-space: nowrap; }
.gads-ans input:checked + span { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); }
.gads-ans label:first-of-type input:checked + span { background: var(--trust); color: #fff; }
.gads-ans input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 1px; }
@media (max-width: 560px) { .gads-qs > li { grid-template-columns: 34px minmax(0, 1fr); } .gads-ans { grid-column: 2; justify-self: start; } }
.gads-result { position: sticky; top: 96px; display: grid; gap: 14px; padding: clamp(20px, 2.4vw, 28px); border-radius: 18px; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.gads-check:not(.is-ready) .gads-result { display: none; }
.gads-result__score { display: flex; align-items: baseline; gap: 10px; }
.gads-result__score b { font: 700 64px/0.9 var(--font-body); letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.gads-result__score span { font: 600 15px/1.3 var(--font-body); color: var(--muted); }
.gads-meter { height: 10px; border-radius: 9999px; background: var(--chip); overflow: hidden; }
.gads-meter i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--gold-grad); transition: width 0.45s cubic-bezier(0.3, 0.7, 0.2, 1); }
.gads-result > .psg-tag { justify-self: start; }
.gads-result__fixes { display: grid; gap: 8px; }
.gads-result__fixes > b { font: 700 12px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); }
.gads-result__fixes ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; font: 500 14.5px/1.5 var(--font-body); color: var(--ink-2); }
.gads-result__note { margin: 0; font: 500 13px/1.45 var(--font-body); color: var(--muted); }
@media (max-width: 960px) { .gads-result { position: static; } }
:root[data-theme="light"] .gads-leaks > li, :root[data-theme="light"] .gads-check { box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(60, 50, 20, 0.04); }
:root[data-theme="light"] .gads-qs > li, :root[data-theme="light"] .gads-result { background: #faf9f6; }

/* ---------- Black, white and dark gold (user, 2026-10-30): the logo is black, so yellow fills become dark gold
   and the orange main button becomes black in light mode and white in dark mode. */
:root, :root[data-theme="light"] {
  --sun: #8a6420; --sun-deep: #6f4f16; --on-sun: #ffffff; --sun-wash: #f3ead6; --sun-ink: #6b4d16;
  --band-1: #ffffff; --band-2: #f8f5ee; --band-3: #efe8d8;
  --flame-1: #23252b; --flame-2: #0b0c0e; --on-flame: #ffffff; --shadow-flame: 0 6px 16px rgba(0, 0, 0, 0.22);
  --price: #111214; --price-text: #7a581c; --peach: #f5eedf; --deal: #16181d;
}
:root[data-theme="dark"] {
  --sun: #c9a24f; --sun-deep: #a9833a; --on-sun: #111214; --sun-wash: #2a2416; --sun-ink: #e9cf8a;
  --band-1: #1f1b13; --band-2: #17161a; --band-3: #121418;
  --flame-1: #ffffff; --flame-2: #e6e2d9; --on-flame: #111214; --shadow-flame: 0 6px 16px rgba(0, 0, 0, 0.45);
  --price: #ffffff; --price-text: #e9cf8a; --peach: #2a2416; --deal: #3a3f48;
}
/* The video hero is dark in both themes, so its gold word is always the light gold. */
.hero--video .display em { color: #e0bf6e; }
:root[data-theme="dark"] .hero::before { background: radial-gradient(closest-side, rgba(201, 162, 79, 0.14), transparent 70%); }
/* The recommended tier was the sun card; it now uses the light gold metal with dark ink, the brand's accent. */
.psg-tier--sun { background: linear-gradient(135deg, var(--gold-1), var(--gold-2)); color: var(--gold-ink); }