/* Google Ads hero (option E, Evan's pick 2026-09-30): an ads-overview mockup with labeled example data.
   Full Google colors and example numbers are an explicit, scoped exception to the site palette and no-numbers rule.
   Interior design example business. No Google logo or font. */
.gah { position: relative; min-height: 100vh; overflow: hidden; color: #000; }
.gah-in { width: 100%; max-width: 1316px; margin: 0 auto; padding: 120px 24px 64px; box-sizing: border-box; }
.gah h1 { font-weight: 500; letter-spacing: -.035em; line-height: .96; margin: 0; color: #000; }
.gah .lede { max-width: 440px; font-size: 19px; line-height: 1.5; margin: 24px 0 0; }
.gah .buttons-flex-container { margin-top: 32px; }
/* E: Google style (Evan's pick: full Google colors + labeled example numbers, scoped to this mockup).
   Layout pattern of an ads overview; Meridian type, no Google logo. All numbers are example data. */
.ge { background: #f1f3f4; }
.ge .gah-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: center; min-height: 100vh; }
.ge h1 { font-size: clamp(48px, 5.2vw, 88px); }
.gx { --b: #1a73e8; --r: #d93025; --y: #f9ab00; --g: #188038; background: #fff; border: 1px solid #dadce0; border-radius: 8px; box-shadow: 0 1px 3px rgba(60,64,67,.15), 0 24px 60px rgba(0,0,0,.08); overflow: hidden; font-size: 13px; color: #3c4043; }
.gx-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #dadce0; }
.gx-top .gx-ttl { font-weight: 500; color: #202124; font-size: 15px; }
.gx-range { display: flex; gap: 8px; align-items: center; }
.gx-dd { border: 1px solid #dadce0; border-radius: 4px; padding: 5px 10px; font-weight: 500; }
.gx-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gx-tile { appearance: none; border: 0; text-align: left; font: inherit; color: #fff; padding: 12px 16px 14px; cursor: pointer; transition: filter .3s, opacity .3s; }
.gx-tile .k { display: block; font-size: 12px; font-weight: 500; opacity: .92; }
.gx-tile .k::after { content: " \25BE"; }
.gx-tile .v { display: block; font-size: 26px; font-weight: 400; letter-spacing: -.01em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.gx-tile[aria-pressed="false"] { background: #fff !important; color: #5f6368; box-shadow: inset 0 -1px 0 #dadce0; }
.gx-tile + .gx-tile { border-left: 1px solid rgba(255,255,255,.25); }
.gx-chart { position: relative; padding: 14px 18px 4px; }
.gx-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.gx-chart .grid line { stroke: #ebebeb; }
.gx-chart .ax { font-size: 10px; fill: #80868b; font-family: "Mona Sans", sans-serif; }
.gx-chart .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; transition: opacity .35s; }
.gx-chart .ln.off { opacity: 0; }
.gx-chart .ln.draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: gxdraw 1.6s cubic-bezier(.25,.74,.22,.99) forwards; }
@keyframes gxdraw { to { stroke-dashoffset: 0; } }
.gx-low { display: grid; grid-template-columns: 1fr; border-top: 1px solid #dadce0; }
.gx-low h4 { margin: 0; padding: 12px 18px 6px; font-size: 13px; font-weight: 500; color: #202124; }
.gx-tbl { width: 100%; border-collapse: collapse; font-family: "Mona Sans", sans-serif; font-variant-numeric: tabular-nums; }
.gx-tbl th, .gx-tbl td { font-family: inherit; font-size: 13px; }
.gx-tbl th, .gx-tbl td { padding: 7px 18px; text-align: right; border-top: 1px solid #f1f3f4; white-space: nowrap; }
.gx-tbl th { font-size: 11px; font-weight: 500; color: #5f6368; }
.gx-tbl th:first-child, .gx-tbl td:first-child { text-align: left; white-space: normal; }
.gx-tbl td:first-child { color: #1a73e8; }
.gx-foot { display: flex; justify-content: space-between; gap: 12px; padding: 10px 18px 12px; border-top: 1px solid #dadce0; font-size: 12px; color: #5f6368; }
.gx-foot a { color: #1a73e8; text-decoration: none; font-weight: 500; }
.gx-dd { appearance: none; -webkit-appearance: none; font: inherit; font-weight: 500; color: #3c4043; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%235f6368'/%3E%3C/svg%3E") no-repeat right 10px center; padding-right: 28px; cursor: pointer; }
.gx-dd:focus-visible, .gx-tile:focus-visible, .gx-tbl th button:focus-visible { outline: 2px solid #1a73e8; outline-offset: 2px; }
.gx-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gx-chart { cursor: crosshair; }
.gx-chart .ln { transition: opacity .35s, stroke-width .25s; }
.gx-chart.dim .ln { opacity: .18; }
.gx-chart.dim .ln.hl { opacity: 1; stroke-width: 3; }
.gx-chart .ln.off, .gx-chart.dim .ln.off { opacity: 0; }
.gx-cross { stroke: #9aa0a6; stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.gx-dot { opacity: 0; stroke: #fff; stroke-width: 2; }
.gx-chart.hover .gx-cross, .gx-chart.hover .gx-dot.on { opacity: 1; }
.gx-tip { position: absolute; top: 10px; min-width: 168px; background: #fff; border: 1px solid #dadce0; border-radius: 6px; box-shadow: 0 4px 14px rgba(60,64,67,.18); padding: 10px 12px; font-size: 12px; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; z-index: 2; }
.gx-chart.hover .gx-tip { opacity: 1; transform: none; }
.gx-tip .d { font-weight: 500; color: #202124; margin-bottom: 6px; }
.gx-tip .r { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 2px 0; }
.gx-tip .r i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.gx-tip .r b { font-weight: 500; font-variant-numeric: tabular-nums; color: #202124; }
.gx-tbl th button { appearance: none; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; padding: 0; }
.gx-tbl th button::after { content: ""; margin-left: 4px; }
.gx-tbl th[aria-sort="descending"] button::after { content: "\2193"; }
.gx-tbl tbody tr { transition: background .2s; }
.gx-tbl tbody tr:hover { background: #f8f9fa; }
.gx-low h4 span { font-weight: 400; color: #5f6368; margin-left: 6px; }
@media (max-width: 900px) { .ge .gah-in { grid-template-columns: 1fr; } .gx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gx-tbl th:nth-child(4), .gx-tbl td:nth-child(4) { display: none; } }
@media (prefers-reduced-motion: reduce) { .gx-chart .ln.draw { animation: none; stroke-dashoffset: 0; } }
.gah .buttons-flex-container { flex-wrap: wrap; row-gap: 12px; }
.gah-in > div:first-child { min-width: 0; }
/* Search terms collapse into a dropdown (closed by default) so the dashboard stays compact. */
details.gx-low > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding-right: 18px; }
details.gx-low > summary::-webkit-details-marker { display: none; }
details.gx-low > summary h4 { padding-bottom: 12px; }
details.gx-low > summary:hover { background: #f8f9fa; }
details.gx-low > summary:focus-visible { outline: 2px solid #1a73e8; outline-offset: -2px; }
.gx-chev { width: 9px; height: 9px; border-right: 1.5px solid #5f6368; border-bottom: 1.5px solid #5f6368; transform: rotate(45deg) translateY(-3px); transition: transform .35s cubic-bezier(.25,.74,.22,.99); }
details.gx-low[open] .gx-chev { transform: rotate(-135deg) translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .gx-chev { transition: none; } }
details.gx-low.is-anim { overflow: hidden; }
/* "The basics" strip: layout untouched; only the section background becomes a frosted glass film
   (same material as the earlier panel: light white tint, blur + saturation, bright top edge). The hero slides
   under it on scroll. !important beats the inline opaque background scroll-feel.js sets on sections. */
.ga-basics-sec { background-color: rgba(255, 255, 255, .24) !important;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: none; border: 0;
  transform: translateZ(0); isolation: isolate; } /* own stable compositor layer: steadier blur while the hero moves */
.gah { backface-visibility: hidden; }
/* White skirt under the hero's bottom edge: sits behind the glass strip so the sticky curtain footer
   (which lives under every section) never shows through it. It moves with the hero as it slides. */
.gah { overflow-x: clip; overflow-y: visible; }
.gah::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 480px; background: #f1f3f4; pointer-events: none; }
/* "The basics, in writing." title: larger, and pulled left of the content edge on wide screens (Evan 2026-10-01).
   The negative margin also cancels the title's extra width, so the four items do not move. */
.ga-basics-sec h2 { font-size: 30px; line-height: 1.1; letter-spacing: -.01em; }
@media (min-width: 1400px) { .ga-basics-sec h2 { margin-left: -48px; } }
/* The four basics: equal gaps between the text blocks, whatever each block's width, running from the
   title to the right edge. On wide screens the row reaches 48px past the content edge, mirroring the title. */
@media (min-width: 992px) {
  .ga-basics-sec .title-and-logo-strip > div:nth-child(2) { display: flex !important; justify-content: space-between; align-items: start; gap: 32px !important; }
  .ga-basics-sec .title-and-logo-strip > div:nth-child(2) > div { flex: 0 1 auto; max-width: 250px; }
}
@media (min-width: 1400px) { .ga-basics-sec .title-and-logo-strip > div:nth-child(2) { margin-right: -48px; } }
/* Accessibility, reflow at 320px (brand-pane 2026-10-05): the example table scrolls inside its card instead of widening the page. */
@media (max-width: 359px) { .gx-tbl { display: block; overflow-x: auto; } .gx-range { flex-wrap: wrap; } }