/* ═══════════════════════════════════════════════════════════════════════
   /scrape/google — "The whole SERP, structured." (flagship scrape page)
   Google Search is dozens of feature blocks. Eight acts, each its own topology:
   SERP anatomy, feature atlas, rank tracking, locale x device, query builder,
   Google properties, the defense pipeline, closer. Solid bands (no clip bloom),
   real DS CTA variants, warm-dark text on teal. Chrome via _shared.
   ═══════════════════════════════════════════════════════════════════════ */
@import "../../_ds/fonts.css";
@import "../../_ds/theme.css";
@import "../../_shared/chrome.css";
@import "../../_shared/components.css";
@import "../../_shared/audience-switcher.css";

.gg-main { position: relative; overflow-x: clip; }
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 640ms cubic-bezier(0.22,1,0.36,1), transform 640ms cubic-bezier(0.22,1,0.36,1); }
[data-reveal].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   ACT 1 — the SERP, decomposed (dark, copy+readout left / SERP mock right)
   ═══════════════════════════════════════════════════════════════════════ */
.gg-hero { padding: clamp(112px, 15vh, 180px) clamp(20px, 5vw, 80px) clamp(60px, 9vh, 110px); }
.gg-hero-grid { max-width: 1360px; margin-inline: auto; display: grid; grid-template-columns: 0.86fr 1.14fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.gg-hero-copy .eyebrow { margin-bottom: 16px; }
.gg-hero-h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--mkt-hero-xl); line-height: 0.98; letter-spacing: -0.03em; color: var(--text-primary); margin: 0; }
.gg-hero-h1 .l2 { display: block; }
.gg-hero-sub { font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.5; color: var(--text-secondary); margin: 22px 0 0; max-width: 42ch; }
.gg-hero-cta { margin-top: 24px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.gg-hero-cta .link-cta { align-self: center; padding-top: 6px; }
.gg-readout { margin-top: clamp(26px, 4vh, 40px); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 16px 18px; max-width: 380px; }
.gg-readout-k { font-family: var(--font-code); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-quaternary); }
.gg-readout-kind { font-family: var(--font-display); font-size: var(--mkt-h4); color: #7C4FE8; margin: 8px 0 0; }
.gg-readout-meta { font-family: var(--font-code); font-size: 12.5px; color: var(--text-tertiary); margin: 10px 0 0; }
.gg-readout-meta b { color: var(--text-secondary); font-weight: 400; }
/* click a block → its parsed record extracts into the readout */
.gg-json { font-family: var(--font-code); font-size: 12px; line-height: 1.6; color: var(--text-secondary); white-space: pre; overflow-x: auto; margin: 0; max-height: 0; opacity: 0; transition: max-height 420ms cubic-bezier(0.22,1,0.36,1), opacity 320ms ease, margin 420ms ease; }
.gg-readout.is-extracted .gg-json { max-height: 240px; opacity: 1; margin: 14px 0 0; }
.gg-json .j-k { color: #7C4FE8; }
.gg-json .j-s { color: var(--text-primary); }
.gg-json .j-n { color: #7ADAE6; }
.gg-readout.is-extracted .gg-readout-hint { opacity: 0; }
.gg-readout-hint { font-family: var(--font-code); font-size: 11px; letter-spacing: 0.06em; color: var(--text-quaternary); margin: 14px 0 0; transition: opacity 260ms ease; }
.gg-readout-hint::before { content: "› "; color: #7C4FE8; }

/* the SERP mock */
.gg-serp { border: 1px solid var(--border-subtle); border-radius: 16px; padding: clamp(14px, 1.4vw, 20px); display: flex; flex-direction: column; gap: 10px; }
.gg-searchbar { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border-subtle); border-radius: 999px; padding: 11px 16px; font-family: var(--font-base); font-size: 14px; color: var(--text-secondary); }
.gg-searchbar::before { content: ""; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--text-quaternary); flex: 0 0 auto; }
.gg-block { border: 1px solid transparent; border-radius: 10px; padding: 11px 13px; cursor: pointer; transition: background 200ms ease, border-color 200ms ease; position: relative; }
.gg-block:hover, .gg-block.is-active { background: color-mix(in srgb, #7C4FE8 10%, transparent); border-color: color-mix(in srgb, #7C4FE8 50%, var(--border-subtle)); }
.gg-tag { position: absolute; top: 8px; right: 10px; font-family: var(--font-code); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-quaternary); opacity: 0; transition: opacity 200ms ease; }
.gg-block:hover .gg-tag, .gg-block.is-active .gg-tag { opacity: 1; color: #7C4FE8; }
.gg-bt { font-family: var(--font-base); font-size: 14px; color: var(--text-primary); }
.gg-bu { font-family: var(--font-code); font-size: 11px; color: #6FBF7F; margin-top: 2px; }
.gg-bl { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--text-primary) 12%, transparent); margin-top: 7px; }
.gg-bl.w80 { width: 80%; } .gg-bl.w60 { width: 60%; } .gg-bl.w90 { width: 90%; }
.gg-block .tag { margin-bottom: 6px; }
.gg-paa { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-base); font-size: 13px; color: var(--text-secondary); padding: 7px 0; border-top: 1px solid color-mix(in srgb, var(--border-subtle) 55%, transparent); }
.gg-paa:first-of-type { border-top: none; }
.gg-paa::after { content: "+"; color: var(--text-quaternary); }

/* ═══════════════════════════════════════════════════════════════════════
   ACT 2 — every feature, typed (SOLID teal band, atlas grid)
   ═══════════════════════════════════════════════════════════════════════ */
.gg-atlas { --rise: 0; position: relative; overflow: hidden; clip-path: circle(calc(var(--rise) * 155%) at 80% 0%); will-change: clip-path; background: #7ADAE6; padding: clamp(96px, 15vh, 190px) clamp(20px, 5vw, 80px); }
.gg-atlas-inner { max-width: 1200px; margin-inline: auto; }
.gg-atlas-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--mkt-h2); line-height: 1.02; letter-spacing: -0.024em; color: #1D1612; margin: 0; max-width: 18ch; }
.gg-atlas-lead { font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.5; color: rgba(29,22,18,0.82); margin: 20px 0 0; max-width: 56ch; }
.gg-atlas-grid { margin-top: clamp(40px, 6vh, 68px); display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.gg-feat { border: 1px solid rgba(29,22,18,0.24); border-radius: 10px; padding: 14px 16px; font-family: var(--font-base); font-size: 14.5px; color: #1D1612; }
.gg-feat span { display: block; font-family: var(--font-code); font-size: 10.5px; letter-spacing: 0.06em; color: rgba(29,22,18,0.55); margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════════════════
   ACT 3 — rank tracking (dark, line chart drawn on reveal)
   ═══════════════════════════════════════════════════════════════════════ */
.gg-rank-sec { padding: clamp(100px, 16vh, 200px) clamp(20px, 5vw, 80px); max-width: 1120px; margin-inline: auto; }
.gg-rank-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--mkt-h2); line-height: 1.05; letter-spacing: -0.02em; color: var(--text-primary); margin: 0; max-width: 16ch; }
.gg-rank-lead { font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.55; color: var(--text-secondary); margin: 18px 0 0; max-width: 54ch; }
.gg-rank { margin-top: clamp(44px, 7vh, 72px); position: relative; }
.gg-rank svg { width: 100%; height: auto; display: block; overflow: visible; }
.gg-rank .grid { stroke: color-mix(in srgb, var(--border-subtle) 60%, transparent); stroke-width: 1; }
.gg-rank .axis-l { font-family: var(--font-code); font-size: 12px; fill: var(--text-quaternary); }
.gg-rank .line { fill: none; stroke: #7ADAE6; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2400; stroke-dashoffset: 2400; }
/* JS scrubs stroke-dashoffset to scroll; is-drawn is the reduce-motion / no-JS fallback */
.gg-rank.is-drawn .line { stroke-dashoffset: 0; }
.gg-rank .dot { fill: #7ADAE6; opacity: 0; transform: scale(0.4); transform-box: fill-box; transform-origin: center; transition: opacity 260ms ease, transform 260ms cubic-bezier(0.22,1.4,0.4,1); }
.gg-rank.is-drawn .dot, .gg-rank .dot.is-lit { opacity: 1; transform: scale(1); }
.gg-rank .dot.hot { fill: #fff; }
.gg-rank-cap { font-family: var(--font-code); font-size: 12.5px; color: var(--text-tertiary); margin-top: 18px; }
.gg-rank-cap b { color: #7ADAE6; }

/* ═══════════════════════════════════════════════════════════════════════
   ACT 4 — any locale, any device (SOLID purple band, three mini-SERPs)
   ═══════════════════════════════════════════════════════════════════════ */
.gg-locale { --rise: 0; position: relative; overflow: hidden; clip-path: circle(calc(var(--rise) * 155%) at 20% 0%); will-change: clip-path; background: #7C4FE8; padding: clamp(96px, 15vh, 190px) clamp(20px, 5vw, 80px); }
.gg-locale-inner { max-width: 1200px; margin-inline: auto; }
.gg-locale-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--mkt-h2); line-height: 1.03; letter-spacing: -0.024em; color: #fff; margin: 0; max-width: 16ch; }
.gg-locale-lead { font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.5; color: #F3ECFF; margin: 20px 0 0; max-width: 54ch; }
.gg-locale-grid { margin-top: clamp(40px, 6vh, 68px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.gg-mini { border: 1px solid rgba(255,255,255,0.3); border-radius: 12px; padding: 18px; background: rgba(255,255,255,0.06); }
.gg-mini-head { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--font-code); font-size: 12px; color: #EBDDFF; margin-bottom: 14px; }
.gg-mini-head b { color: #fff; font-weight: 600; }
.gg-mini-row { display: flex; align-items: baseline; gap: 9px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,0.16); font-family: var(--font-base); font-size: 13.5px; color: #fff; }
.gg-mini-row:first-of-type { border-top: none; }
.gg-mini-row .n { font-family: var(--font-code); font-size: 11px; color: #EBDDFF; flex: 0 0 auto; }

/* ═══════════════════════════════════════════════════════════════════════
   ACT 5 — the query, parameterized (dark, interactive builder)
   ═══════════════════════════════════════════════════════════════════════ */
.gg-query { padding: clamp(100px, 16vh, 200px) clamp(20px, 5vw, 80px); max-width: 1080px; margin-inline: auto; }
.gg-query-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--mkt-h2); line-height: 1.05; letter-spacing: -0.02em; color: var(--text-primary); margin: 0; max-width: 16ch; }
.gg-query-lead { font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.55; color: var(--text-secondary); margin: 18px 0 0; max-width: 52ch; }
.gg-url-box { margin-top: clamp(36px, 5vh, 56px); border: 1px solid var(--border-subtle); border-radius: 12px; padding: clamp(18px, 2vw, 26px); }
.gg-url { font-family: var(--font-code); font-size: clamp(13px, 1.2vw, 17px); line-height: 1.6; color: var(--text-primary); word-break: break-all; }
.gg-params { margin-top: clamp(24px, 3vh, 34px); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.gg-params-label { font-family: var(--font-code); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-quaternary); margin-right: 6px; }
.gg-param { font-family: var(--font-code); font-size: 13px; color: var(--text-secondary); background: transparent; border: 1px solid var(--border-subtle); border-radius: 999px; padding: 8px 14px; cursor: pointer; transition: border-color 200ms ease, color 200ms ease, background 200ms ease; }
.gg-param:hover { border-color: color-mix(in srgb, var(--text-primary) 30%, var(--border-subtle)); color: var(--text-primary); }
.gg-param.is-on { color: #7ADAE6; border-color: color-mix(in srgb, #7ADAE6 55%, transparent); background: color-mix(in srgb, #7ADAE6 10%, transparent); }
.gg-param.is-on::before { content: "\2713 "; }

/* ═══════════════════════════════════════════════════════════════════════
   ACT 6 — every Google property (SOLID teal band, segmented preview)
   ═══════════════════════════════════════════════════════════════════════ */
.gg-props { --rise: 0; position: relative; overflow: hidden; background: #7ADAE6; padding: clamp(96px, 15vh, 190px) clamp(20px, 5vw, 80px); clip-path: circle(calc(var(--rise) * 155%) at 80% 0%); will-change: clip-path; }
@media (prefers-reduced-motion: reduce) { .gg-props { clip-path: none; } }
.gg-props-inner { max-width: 1120px; margin-inline: auto; }
.gg-props-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--mkt-h2); line-height: 1.03; letter-spacing: -0.024em; color: #1D1612; margin: 0; max-width: 16ch; }
.gg-props-lead { font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.5; color: rgba(29,22,18,0.82); margin: 20px 0 0; max-width: 54ch; }
.gg-pseg { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: clamp(32px, 5vh, 48px) 0 0; padding: 4px; border: 1px solid rgba(29,22,18,0.28); border-radius: 999px; }
.gg-pseg button { font-family: var(--font-base); font-size: 14px; color: rgba(29,22,18,0.7); background: transparent; border: none; border-radius: 999px; padding: 9px 18px; cursor: pointer; transition: background 200ms ease, color 200ms ease; }
.gg-pseg button:hover { color: #1D1612; }
.gg-pseg button.is-on { background: #1D1612; color: #fff; }
.gg-pane { display: none; margin-top: clamp(22px, 3vh, 32px); }
.gg-pane.is-on { display: block; }
.gg-pane pre { margin: 0; font-family: var(--font-code); font-size: var(--mkt-body-xs); line-height: 1.7; color: #12484F; white-space: pre; overflow-x: auto; background: rgba(29,22,18,0.05); border: 1px solid rgba(29,22,18,0.18); border-radius: 12px; padding: 20px 22px; }
.gg-pane .k { color: #1D1612; font-weight: 600; } .gg-pane .s { color: #12484F; }

/* ═══════════════════════════════════════════════════════════════════════
   ACT 7 — the hardest to read (dark, defense pipeline)
   ═══════════════════════════════════════════════════════════════════════ */
.gg-why { padding: clamp(100px, 16vh, 200px) clamp(20px, 5vw, 80px); max-width: 1000px; margin-inline: auto; }
.gg-why-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--mkt-h2); line-height: 1.05; letter-spacing: -0.02em; color: var(--text-primary); margin: 0; max-width: 16ch; }
.gg-why-lead { font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.55; color: var(--text-secondary); margin: 18px 0 0; max-width: 54ch; }
.gg-pipe { margin-top: clamp(44px, 7vh, 72px); display: flex; flex-direction: column; gap: 0; }
.gg-pstep { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 20px; padding: 22px 0; border-bottom: 1px solid color-mix(in srgb, var(--border-subtle) 60%, transparent); }
.gg-pstep:first-child { border-top: 1px solid var(--border-subtle); }
.gg-pn { font-family: var(--font-code); font-size: 13px; color: var(--text-quaternary); }
.gg-pmid .t { font-family: var(--font-display); font-size: var(--mkt-lead); color: var(--text-primary); }
.gg-pmid .d { font-family: var(--font-base); font-size: 13.5px; line-height: 1.5; color: var(--text-tertiary); margin-top: 4px; }
.gg-pmid .d b { color: var(--text-secondary); font-weight: 500; }
.gg-pok { display: inline-block; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════
   ACT 8 — closer (SOLID purple band). CTA = default teal (reads on purple).
   ═══════════════════════════════════════════════════════════════════════ */
.gg-closer { --rise: 0; position: relative; overflow: hidden; clip-path: circle(calc(var(--rise) * 155%) at 20% 0%); will-change: clip-path; background: #7C4FE8; padding: clamp(110px, 20vh, 240px) clamp(20px, 5vw, 80px); }
.gg-closer-inner { max-width: 1100px; margin-inline: auto; }
.gg-closer-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--mkt-hero); line-height: 0.95; letter-spacing: -0.03em; color: #fff; margin: 0; }
.gg-closer-sub { font-family: var(--font-base); font-size: var(--mkt-lead); line-height: 1.5; color: #F3ECFF; margin: 26px 0 0; max-width: 48ch; }
.gg-closer-cta { margin-top: 38px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.gg-closer-tagline { font-family: var(--font-code); font-size: 13px; letter-spacing: 0.04em; color: #EBDDFF; }
.gg-uses { margin: clamp(40px, 6vh, 64px) 0 0; padding-top: clamp(24px, 3vh, 36px); border-top: 1px solid rgba(255,255,255,0.28); }
.gg-uses-label { font-family: var(--font-code); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #EBDDFF; margin: 0 0 14px; }
.gg-uses-list { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.gg-use { font-family: var(--font-base); font-size: 14px; color: #fff; border: 1px solid rgba(255,255,255,0.3); border-radius: 999px; padding: 8px 15px; }

/* is-on-* topbar inversion (floating topbar). Teal band -> whole bar dark. */

/* ═══════════════════════════════════════════════════════════════════════
   Mobile / reduced-motion (<=900px)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .gg-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .gg-readout { max-width: none; }
  .gg-serp { order: -1; }
  .gg-locale-grid { grid-template-columns: 1fr; gap: 14px; }
  /* Keep the pill on ONE row and scroll it horizontally instead of wrapping
     to a tall stadium blob with the active pill floating. */
  .gg-pseg {
    display: flex; flex-wrap: nowrap;
    max-width: 100%; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .gg-pseg::-webkit-scrollbar { display: none; }
  .gg-pseg button { flex: 0 0 auto; white-space: nowrap; }
  .gg-pstep { grid-template-columns: 32px 1fr; }
  .gg-pok { grid-column: 2; justify-self: start; margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) { .gg-atlas, .gg-locale, .gg-closer { clip-path: none; } }