/* Websites Questions (meridian-ads-main, Evan picked "Big window", 2026-10-04): one big blue window at the scale of the
   Google Ads "How we work". With .fh-live (js/web-faq.js) the section pins and scrolling steps through four questions:
   on the left the question, its answer, then the detail; on the right a picture of the answer, scrubbed by scroll.
   Without JS or with reduced motion: the four questions and answers in the window, no pictures. */
.fh { background: #fff; color: #000; padding-block: clamp(96px, 10vw, 140px); }
.fh-win { position: relative; border-radius: 32px; overflow: hidden; color: #fff;
  background: radial-gradient(circle, rgba(255, 255, 255, .07) 40%, transparent 46%) 0 0 / 5px 5px, linear-gradient(160deg, #0b2bd6, #081f9e 70%, #06177a);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .3), 0 40px 80px -40px rgba(11, 43, 214, .55); }
/* soft pools of the hero's pink (sampled from the hero still) drifting in the window, moved by js/web-faq.js (Evan picked Aurora) */
.fh-glow { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.fh-l, .fh-r { z-index: 1; }
.fh-l { position: relative; padding: clamp(32px, 4vw, 56px); }
.fh-k { margin-bottom: 32px; }
.fh-title { margin: 0; font-size: 15px; line-height: 1.4; font-weight: 500; letter-spacing: 0; color: rgba(255, 255, 255, .8); }
.fh-it + .fh-it { margin-top: 40px; }
.fh-q { margin: 0 0 20px; font-size: clamp(42px, 4.8vw, 80px); line-height: .98; letter-spacing: -.045em; font-weight: 500; color: #fff; }
.fh-a { margin: 0 0 8px; font-size: clamp(22px, 2vw, 30px); line-height: 1.15; letter-spacing: -.02em; font-weight: 500; color: #c9d4ff; }
.fh-d { margin: 0; max-width: 440px; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.fh-d a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.fh-r { display: none; }
/* the last question ends on the two ways to climb: Google Ads now, SEO over time */
.fh-go { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.fh-btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 999px; background: #fff; color: #0b2bd6; font-size: 17px; text-decoration: none; transition: transform .2s, background .25s, color .25s; }
.fh-btn span { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); } .fh-btn:hover span { transform: translateX(4px); } .fh-btn:active { transform: scale(.97); }
.fh-btn.ol { background: none; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); } .fh-btn.ol:hover { background: rgba(255, 255, 255, .12); }

/* pinned mode */
.fh.fh-live { height: 520vh; padding: 0; }
.fh-live > .w-container { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 72px; }
.fh-live .fh-win { height: min(calc(100vh - 150px), 720px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.fh-live .fh-k { margin: 0; }
.fh-live .fh-txt { position: absolute; left: clamp(32px, 4vw, 56px); right: clamp(24px, 3vw, 40px); bottom: clamp(32px, 4vw, 56px); }
.fh-live .fh-it { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; }
.fh-live .fh-it > * { opacity: 0; will-change: transform, opacity; }
.fh-live .fh-r { display: block; position: relative; }
.fh-vis { position: absolute; inset: clamp(24px, 3vw, 40px); display: grid; place-items: center; opacity: 0; will-change: transform, opacity; }

/* The four picture cards share one shape: a header (what you are looking at, one line of context),
   the picture, and a footer line that names the result once it happens. */
.fh .ui { display: flex; flex-direction: column; width: min(100%, 440px); height: min(100%, 420px); border-radius: 24px; background: #fff; color: #000; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5); overflow: hidden; font-size: 15px; }
.ui-top { padding: 18px 22px; border-bottom: 1px solid #ececf0; }
.ui-top b { display: block; font-weight: 500; font-size: 17px; line-height: 1.2; } .ui-top span { font-size: 13px; color: #6e6e73; }
.ui-body { flex: 1; min-height: 0; padding: 14px 22px; overflow: hidden; }
.ui-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 60px; padding: 0 22px; border-top: 1px solid #ececf0; background: #fafafc; font-size: 13px; color: #6e6e73; }
.ui-foot > span:last-child { padding: 8px 14px; border-radius: 999px; background: #0b2bd6; color: #fff; font-size: 14px; white-space: nowrap; opacity: 0; }
/* 1 cost: features tick on, then "Quoted to your site" */
.qt-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; font-size: 16px; }
.qt-row + .qt-row { border-top: 1px solid #f0f0f2; }
/* the tick: an empty ring that fills blue with a small pop, then the check draws itself */
.qt-row i { position: relative; flex: none; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #d2d2d7; transition: box-shadow .3s; }
.qt-row i::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #0b2bd6; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .35), inset 0 -1px 2px rgba(0, 0, 40, .3); transform: scale(0); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.qt-row i svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset .35s ease .15s; }
.qt-row.on i { box-shadow: 0 0 0 4px rgba(11, 43, 214, .12); }
.qt-row.on i::before { transform: none; }
.qt-row.on i svg { stroke-dashoffset: 0; }
.qt-row span { transition: color .3s; } .qt-row:not(.on) span { color: #6e6e73; }
/* 2 languages: three tilted ribbons of flags and language names slide in alternating directions (js/web-faq.js).
   Flags: flag-icons (MIT) in img/flags; flags with orange left out (no orange on this site). */
.fl-body { position: relative; padding: 0; display: flex; flex-direction: column; justify-content: center; gap: 14px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.fl-lane { display: flex; align-items: center; width: 130%; height: 54px; margin-left: -15%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -1px 0 rgba(255, 255, 255, .25); }
.fl-lane:nth-child(1) { rotate: -5deg; } .fl-lane:nth-child(2) { rotate: 2deg; } .fl-lane:nth-child(3) { rotate: -3deg; }
.fl-rib { display: flex; gap: 60px; width: max-content; padding-left: 60px; will-change: transform; }
.fl-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; white-space: nowrap; }
.fl-chip img { width: 32px; height: 24px; border-radius: 4px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
/* 3 leads: the form fills, sends, and the enquiry lands in the inbox */
.ld { display: flex; flex-direction: column; gap: 6px; }
.ld label { font-size: 12px; color: #6e6e73; }
.ld-in { flex: none; height: 42px; margin-bottom: 4px; padding: 0 16px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px #d2d2d7; line-height: 42px; font-size: 15px; white-space: nowrap; overflow: hidden; }
.ld-in.ph { color: #aeaeb2; }
.ld-send { flex: none; height: 44px; margin-top: 6px; border-radius: 22px; background: #0b2bd6; color: #fff; display: grid; place-items: center; font-size: 15px; transition: transform .15s; }
/* 4 #1 on Google: the card shows the SEO work itself, "Your business" climbing the results (the left side says no one can promise #1) */
.gg-bar { display: flex; align-items: center; gap: 10px; height: 42px; margin-bottom: 8px; padding: 0 16px; border-radius: 21px; box-shadow: 0 0 0 1px #e5e5ea, 0 4px 12px -6px rgba(0, 0, 0, .2); font-size: 14px; }
.gg-bar svg { width: 16px; height: 16px; color: #6e6e73; }
.sr { position: relative; height: 216px; }
.sr-r { position: absolute; left: 0; right: 0; top: 0; height: 54px; padding: 10px 0; border-top: 1px solid #f0f0f2; transform: translateY(calc(var(--slot, 0) * 54px)); transition: transform .7s cubic-bezier(.7, 0, .3, 1); }
.sr-r b { display: block; margin-bottom: 7px; font-weight: 500; font-size: 15px; color: #8e8e93; }
.sr-r i { display: block; width: 85%; height: 8px; border-radius: 4px; background: #e5e5ea; }
.sr-you { z-index: 1; background: #fff; } .sr-you b { color: #0b2bd6; } .sr-you i { background: #c7d2ff; }
.sr-you b::after { content: "\2191"; display: inline-block; margin-left: 8px; color: #0b2bd6; opacity: var(--up, 0); transform: translateY(calc((1 - var(--up, 0)) * 4px)); }

@media (max-width: 860px) {
  .fh-live .fh-win { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1.25fr) minmax(0, 1fr); }
  .fh-live .fh-txt { bottom: 20px; }
  .fh-q { font-size: 34px; margin-bottom: 12px; } .fh-d { font-size: 15px; } .fh-go { flex-wrap: nowrap; gap: 8px; margin-top: 12px; } .fh-btn { gap: 6px; height: 40px; padding: 0 14px; font-size: 14px; white-space: nowrap; }
  .fh-it:last-child .fh-q { font-size: 30px; } .fh-it:last-child .fh-d { font-size: 14px; }
  .fh-vis { inset: 0 14px 14px; } .fh .ui { height: 100%; }
  .ui-top { padding: 12px 16px; } .ui-body { padding: 10px 16px; } .ui-foot { height: 50px; padding: 0 16px; }
  .qt-row { padding: 6px 0; font-size: 14px; } .ld-in { height: 34px; line-height: 34px; } .ld-send { height: 36px; } .ld label { display: none; } .qt-row:nth-child(n+5) { display: none; } .sr { height: 176px; } .sr-r { height: 44px; padding: 6px 0; transform: translateY(calc(var(--slot, 0) * 44px)); }
}

/* Glass cards (Evan, 2026-10-05): the cards use the Google Ads "basics" strip material (css/ga-hero.css .ga-basics-sec),
   a light white tint with a 16px blur, so the blue and pink show through. Text goes white; key buttons stay solid white. */
.fh .ui { background: rgba(255, 255, 255, .24); color: #fff; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), inset 0 1px 1px rgba(255, 255, 255, .45), 0 30px 60px -30px rgba(0, 0, 30, .55); }
.ui-top { border-color: rgba(255, 255, 255, .18); } .ui-top span { color: rgba(255, 255, 255, .7); }
.ui-foot { background: transparent; border-color: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .7); }
.ui-foot > span:last-child { background: #fff; color: #0b2bd6; }
.qt-row + .qt-row { border-color: rgba(255, 255, 255, .14); } .qt-row:not(.on) span { color: rgba(255, 255, 255, .6); }
.qt-row i { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); } .qt-row.on i { box-shadow: 0 0 0 4px rgba(255, 255, 255, .15); }
.qt-row i::before { background: #fff; } .qt-row i svg { stroke: #0b2bd6; }
.fl-chip { color: #fff; }
.ld label { color: rgba(255, 255, 255, .7); }
.ld-in { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); } .ld-in.ph { color: rgba(255, 255, 255, .5); }
.ld-send { background: #fff; color: #0b2bd6; }
.gg-bar { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); } .gg-bar svg { color: rgba(255, 255, 255, .7); }
.sr-r { border-color: rgba(255, 255, 255, .14); } .sr-r b { color: rgba(255, 255, 255, .6); } .sr-r i { background: rgba(255, 255, 255, .18); }
.sr-you { background: none; } .sr-you b, .sr-you b::after { color: #fff; } .sr-you i { background: rgba(255, 255, 255, .55); }
/* Phones (Evan approved 2026-10-05, mobile lab 2 #4): the same 4 questions over 3 screens instead of 5.2. */
@media (max-width: 767px) { .fh.fh-live { height: 300vh; } }