/* Senin Agency, one look: Sunrise Monday.
   White page, navy ink, one sunny yellow accent, Plus Jakarta Sans headlines and Inter text. Mobile first.
   Motion is subtle and optional. The hero entrance, the drifting shape, the line that draws itself, the floating chips,
   the travelling dashes and the pulse dots are CSS keyframes. Each one that repeats plays for about five seconds and then
   comes to rest. The one exception is the logo strip, which slides for ever with a pause button (its rules say how).
   demo.js adds a few classes (is-live, js-rise, in, is-on, is-sliding, is-paused, is-chosen) and runs the count-up. Only
   transform, opacity and stroke-dashoffset move. A hidden "before" state lives only inside a keyframe or in a class the
   script adds, so with scripts or motion off the whole page shows. */

:root {
  color-scheme: light;
  --white: #ffffff;
  --band: #f5f7fb;
  --navy: #0b2545;
  --ink: #1b2a41;
  --muted: #4b5b73;
  --accent: #ffc83d;
  --tint: #fff1c2;
  --halo: rgba(255, 200, 61, 0.16);
  --line: #d6deeb;
  --soft: 0 0.5rem 1.25rem rgba(11, 37, 69, 0.07);
  --head: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 1rem/1.6 var(--body); }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: var(--navy); }
strong { font-weight: 600; }
h1, h2, h3 { color: var(--navy); font-family: var(--head); font-weight: 700; text-wrap: balance; }
h2 { font-size: clamp(1.625rem, 1.15rem + 1.9vw, 2.5rem); line-height: 1.15; letter-spacing: -0.02em; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.wrap { width: min(100% - 2rem, 68rem); margin-inline: auto; }
.lead { max-width: 38rem; margin-top: 0.5rem; font-size: 1.0625rem; line-height: 1.55; }

/* Buttons and links */
.btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 3rem; padding: 0.5rem 1.25rem;
  border: 2px solid var(--navy); border-radius: 999px;
  background: var(--accent); color: var(--navy);
  font: 600 1rem/1.2 var(--body); text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn:hover, .btn:focus-visible { background: var(--navy); color: var(--accent); }
.btn-lg { width: 100%; min-height: 3.5rem; padding: 0.625rem 1.5rem; font-size: 1.0625rem; }
.nb { white-space: nowrap; }
.quiet {
  display: inline-block; padding: 0.75rem 0.125rem;
  color: var(--navy); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--navy);
  text-decoration-thickness: 2px; text-underline-offset: 0.2em;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.quiet:hover, .quiet:focus-visible { color: var(--muted); text-decoration-color: var(--muted); }

/* Sticky top bar: slim, opaque, no motion. The Senin mark is a picture, the words name the link. */
.bar { position: sticky; top: 0; z-index: 20; background: var(--white); border-bottom: 1px solid var(--line); }
.bar-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  width: min(100% - 1rem, 68rem); margin-inline: auto; padding-block: 0.375rem;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.3rem; min-height: 3rem;
  color: var(--navy); font: 500 0.9375rem/1 var(--head); letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap;
  transition: color 0.15s ease;
}
.brand:hover, .brand:focus-visible { color: var(--muted); }
.wm-a { font-weight: 800; }
.mark { flex: none; width: 1.75rem; height: auto; }
.btn-bar { flex: 0 1 auto; min-width: 0; padding: 0.375rem 0.625rem; font-size: 0.875rem; }

/* Hero: copy first, then the demo scene. The scene is the one data-demo block. */
.hero { position: relative; overflow: hidden; isolation: isolate; padding-block: 1.75rem 2.5rem; }
.hero::before {
  content: ""; position: absolute; z-index: -1; top: -4.5rem; right: -6rem;
  width: 17rem; height: 17rem; border-radius: 50%;
  background: var(--tint); box-shadow: 0 0 0 1.25rem var(--halo);
  animation: drift 5s ease-in-out;
}
.hero::after {
  content: ""; position: absolute; z-index: -1; top: 1.1rem; right: 1.25rem;
  width: 1.75rem; height: 1.75rem; border: 3px solid var(--navy); border-radius: 50%;
}
.hero-line { position: absolute; z-index: -1; top: 0.5rem; right: -3rem; width: 22rem; height: auto; opacity: 0.2; pointer-events: none; }
.trace {
  fill: none; stroke: var(--navy); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 0; animation: trace 5s ease-in-out backwards;
}
.trace-glow { stroke: var(--accent); stroke-width: 12; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
.hero-copy { max-width: 40rem; container-type: inline-size; }
.kicker {
  display: inline-block; padding: 0.3rem 0.8rem;
  border: 1.5px solid var(--navy); border-radius: 999px; background: var(--white);
  color: var(--navy); font: 600 0.8125rem/1.3 var(--body); letter-spacing: 0.01em;
}
.hero h1 {
  margin-top: 0.875rem; font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; text-wrap: wrap;
}
@supports (font-size: 1cqi) { .hero h1 { font-size: clamp(1.75rem, 9.2cqi, 4.5rem); } }
.ln { display: block; white-space: nowrap; clip-path: inset(-0.25em -1em -0.25em -1em); }
.ln-in { display: block; animation: line-up 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
.ln + .ln .ln-in { animation-delay: 0.12s; }
.hl {
  display: inline-block; padding: 0 0.1em 0.06em; border-radius: 0.14em;
  background: var(--accent); transform: rotate(-1deg);
}
.hero .lead { margin-top: 1rem; animation: rise-in 0.5s ease-out 0.35s backwards; }
.hero .note { margin-top: 1rem; color: var(--muted); font-size: 0.9375rem; line-height: 1.5; animation: rise-in 0.5s ease-out 0.45s backwards; }
.hero .btn-lg { margin-top: 0.875rem; box-shadow: 0 0.25rem 0 var(--navy); animation: rise-in 0.5s ease-out 0.55s backwards; }

/* The demo scene: the report card, then the three chips (a row on phones, floating on larger screens).
   The card holds trend values only, each against last week, and no amount. Its title frames it. */
.scene { position: relative; width: 100%; max-width: 32rem; margin-inline: auto; }
.dash {
  --tilt: -1.5deg;
  container-type: inline-size;
  position: relative; padding: 1.25rem 1rem 1rem;
  background: var(--white); border: 2px solid var(--navy); border-radius: 1.5rem;
  box-shadow: 0.5rem 0.5rem 0 var(--tint), 0 1.25rem 2.5rem rgba(11, 37, 69, 0.12);
  transform: rotate(var(--tilt)); animation: card-in 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s backwards;
}
.dash-title { color: var(--navy); font: 600 1.25rem/1.2 var(--head); text-wrap: balance; }
/* Where the chips float the title must stay on one line, so it is sized to the card. */
@supports (font-size: 1cqi) { .dash-title { font-size: clamp(0.875rem, 4.6cqi, 1.25rem); } }
.switch {
  display: inline-flex; gap: 0.5rem; margin-top: 0.5rem; padding: 0.25rem;
  background: var(--band); border: 2px solid var(--navy); border-radius: 999px; visibility: hidden;
}
.is-live .switch { visibility: visible; }
.switch-btn {
  min-height: 3rem; padding: 0.25rem 1rem; border: 0; border-radius: 999px;
  background: transparent; color: var(--navy); font: 600 0.9375rem/1.2 var(--body); cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.switch-btn:hover { background: var(--tint); }
.switch-btn[aria-pressed="true"] { background: var(--navy); color: var(--white); }
/* Three trend rows: name, the change as a percentage with a plain triangle, and "vs last week". */
.trends { display: grid; gap: 0.5rem; margin-top: 0.75rem; }
.trend {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 0.5rem;
  padding: 0.5rem 0.75rem; background: var(--band); border-radius: 1rem;
}
.t-name { min-width: 0; color: var(--navy); font-size: 0.9375rem; font-weight: 600; line-height: 1.3; }
.delta {
  position: relative; display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.125rem 0.625rem;
  background: var(--tint); border-radius: 999px; color: var(--navy);
  font: 600 1.125rem/1.3 var(--body); font-variant-numeric: tabular-nums;
}
.t-vs { color: var(--muted); font-size: 0.8125rem; line-height: 1.3; }
/* The triangle is a plain shape. Up and down look the same colour: a lower cost per lead is good news. */
.tri { flex: none; width: 0.625rem; height: 0.5rem; background: var(--navy); }
.tri-up { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.tri-down { clip-path: polygon(0 0, 100% 0, 50% 100%); }
/* Hidden from view but kept for screen readers and the unstyled page: the word up or down (the triangle shows it)
   and the logo button's names. */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; }
/* A narrow card (a small desktop column or a very small phone) trims the three rows so they stay on one line each. */
@container (max-width: 19rem) {
  .t-name { font-size: 0.875rem; }
  .delta { padding-inline: 0.5rem; font-size: 1rem; }
  .t-vs { font-size: 0.75rem; }
}
.chart { margin-top: 0.75rem; padding: 0.75rem 0.625rem 0.375rem; border: 1.5px solid var(--line); border-radius: 1rem; }
.chart-title { color: var(--navy); font-size: 0.9375rem; font-weight: 600; }
.chart svg { width: 100%; max-width: 26rem; height: auto; margin: 0.375rem auto 0; }
.chart .axis { stroke: var(--navy); stroke-width: 1.5; }
.chart .bar { fill: var(--accent); stroke: var(--navy); stroke-width: 1.5; }
.chart .tline { fill: none; stroke: var(--navy); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart .tdot { fill: var(--white); stroke: var(--navy); stroke-width: 2.5; }
.chart .day { fill: var(--muted); font: 400 12px var(--body); text-anchor: middle; }
.insight {
  display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 0.75rem; padding: 0.5rem 0.75rem;
  background: var(--tint); border-radius: 0.875rem; color: var(--navy); font-weight: 600; line-height: 1.4;
}
.spark { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.125rem; fill: var(--accent); stroke: var(--navy); stroke-width: 2; stroke-linejoin: round; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: -0.5rem; padding-inline: 0.75rem; }
.chip {
  position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 0.4rem 0.75rem;
  background: var(--white); border: 2px solid var(--navy); border-radius: 0.875rem; box-shadow: 0.25rem 0.25rem 0 var(--tint);
  color: var(--navy); line-height: 1.2;
}
.chip-label { color: var(--muted); font-size: 0.75rem; font-weight: 600; }
.chip-val { position: relative; display: inline-flex; align-items: center; gap: 0.375rem; font: 600 1.25rem/1.2 var(--body); font-variant-numeric: tabular-nums; }
.chip-3 { flex-direction: row; align-items: center; gap: 0.5rem; font-size: 0.9375rem; font-weight: 600; }
.chip-dot { flex: none; width: 0.625rem; height: 0.625rem; border: 2px solid var(--navy); border-radius: 50%; background: var(--accent); }

/* Logo strip, right under the hero. The slide is CSS only. The script adds is-sliding (the repeated sets, the slide and
   the pause button then show), toggles is-paused, and adds is-chosen on the first press. Without the script, or with
   less movement asked for, the logos sit still on one line (wrapping only on a very small phone), "and more" after
   them or below, and no button. Logos are drawn once in the sprite and used by every set. While they slide, the window
   shows about two logos on a phone and about one set from 48rem, edges faded, and gives up a little width just past
   64rem to keep one row. Hard Rock is tallest (small script, thin rings). --speed: a set's width at about 20 px a second. */
.logos { --gap: 2.5rem; --view: 17.5rem; --fade: 1.5rem; --speed: 20s; position: relative; padding-block: 1.25rem 1.5rem; border-top: 1px solid var(--line); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.logos-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 2.25rem; }
.logos-title { color: var(--muted); font-size: 0.9375rem; font-weight: 600; line-height: 1.3; }
.logos-btn {
  position: relative; display: none; align-items: center; justify-content: center; flex: none;
  width: 3rem; height: 3rem; margin-block: -0.375rem; padding: 0;
  border: 1.5px solid var(--line); border-radius: 50%; background: var(--white); color: var(--navy); cursor: pointer;
  transition: background-color 0.15s ease;
}
.is-sliding .logos-btn { display: inline-flex; }
.logos-btn:hover { background: var(--tint); }
.logos-btn svg { width: 1.125rem; height: 1.125rem; fill: currentColor; }
.logos-btn :is(.ic-play, .t-play), .is-paused .logos-btn :is(.ic-pause, .t-pause) { display: none; }
.is-paused .logos-btn :is(.ic-play, .t-play) { display: block; }
.logos-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 0.5rem; }
.is-sliding .logos-row { flex-wrap: nowrap; }
.logos-view { flex: 0 1 auto; min-width: 0; }
.is-sliding .logos-view {
  flex: 0 1 var(--view); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
}
.logos-set { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; }
.logos-set + .logos-set { display: none; }
.logos-set li { flex: none; }
.lg { width: auto; max-width: none; height: 2.25rem; overflow: visible; color: var(--muted); }
.lg-hr { height: 3.25rem; aspect-ratio: 413 / 249; }
.lg-sia { height: 2.5rem; aspect-ratio: 300 / 91.86; }
.lg-mc { aspect-ratio: 1000 / 618; }
.logos-more { flex: none; color: var(--navy); font-weight: 600; }
.is-sliding .logos-track { display: flex; width: max-content; animation: slide var(--speed) linear infinite; }
.is-sliding .logos-set { flex: none; flex-wrap: nowrap; gap: 0; }
.is-sliding .logos-set li { padding-right: var(--gap); }
.is-sliding .logos-set + .logos-set { display: flex; }
.is-paused .logos-track { animation-play-state: paused; }
/* Held still while the button has keyboard focus, until the visitor first presses it (demo.js then adds is-chosen).
   After that, only the button and hover pause it. Its own rule, so a browser without :has() skips only this line. */
.logos:not(.is-chosen):has(.logos-btn:focus-visible) .logos-track { animation-play-state: paused; }
@media (hover: hover) { .logos-view:hover .logos-track { animation-play-state: paused; } }

/* Selected results: a slim band right under the logo strip. One short line per result: number, label, client. */
.proof { padding-block: 2rem 2.25rem; background: var(--band); }
.eyebrow { color: var(--muted); font: 700 0.75rem/1.3 var(--body); letter-spacing: 0.1em; text-transform: uppercase; }
.proof h2 { margin-top: 0.25rem; font-size: clamp(1.375rem, 1.05rem + 1.4vw, 2rem); }
.results { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.625rem; margin-top: 1.25rem; }
.results > li {
  display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: center; column-gap: 0.875rem;
  padding: 0.75rem 1rem; background: var(--white); border: 1.5px solid var(--line); border-radius: 1rem; box-shadow: var(--soft);
}
.num { grid-row: span 2; color: var(--navy); font: 800 1.75rem/1.1 var(--head); letter-spacing: -0.02em; }
.count { display: inline-block; padding-inline: 0.08em; background: linear-gradient(transparent 60%, var(--accent) 60%); font-variant-numeric: tabular-nums; }
.about { margin-right: 0.15em; font: 600 0.9375rem/1 var(--body); letter-spacing: 0; }
.what { color: var(--ink); font-size: 0.875rem; font-weight: 600; line-height: 1.35; text-wrap: balance; }
.who { color: var(--muted); font-size: 0.8125rem; line-height: 1.35; }
.source { max-width: 46rem; margin-top: 1rem; color: var(--muted); font-size: 0.875rem; }

/* What you get */
.offer { padding-block: 3rem; }
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 1.5rem; }
.card {
  padding: 1.25rem; background: var(--white); border: 1.5px solid var(--line); border-radius: 1.5rem; box-shadow: var(--soft);
  transition: transform 0.15s ease;
}
.icon { width: 3rem; height: 3rem; margin-bottom: 0.75rem; }
.icon .fill { fill: var(--tint); stroke: var(--navy); stroke-width: 2.5; }
.icon .line { fill: none; stroke: var(--navy); stroke-width: 2.5; }
.icon .pop { fill: var(--accent); stroke: var(--navy); stroke-width: 2.5; stroke-linejoin: round; }
.icon .dot { fill: var(--navy); }
.card h3 { font-size: 1.375rem; line-height: 1.2; }
.card p { margin-top: 0.5rem; }
.support { margin-top: 1.25rem; padding: 0.875rem 1rem; background: var(--band); border-radius: 1rem; color: var(--navy); font-weight: 600; }

/* How it works */
.how { padding-block: 3rem; background: var(--band); }
.steps { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
.steps li { position: relative; padding-left: 3rem; }
.steps li::before {
  content: ""; position: absolute; left: 0; top: 0.125rem; width: 1.75rem; height: 1.75rem;
  border: 2px solid var(--navy); border-radius: 50%; background: var(--accent);
}
.steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 0.8125rem; top: 2.1rem; bottom: -1.2rem; width: 2px; background: var(--navy);
}
.steps strong { color: var(--navy); }

/* How the AI part works: the flow (top to bottom on phones, left to right on wide screens) */
.ai { padding-block: 3rem; }
.flow { display: grid; justify-items: center; margin-top: 1.5rem; }
.flow-node, .flow-group { width: min(100%, 19rem); }
.flow-node {
  padding: 0.875rem 1rem; text-align: center; background: var(--white);
  border: 2px solid var(--navy); border-radius: 1rem; box-shadow: 0.25rem 0.25rem 0 var(--tint);
  color: var(--navy); font: 600 1.0625rem/1.3 var(--body);
}
.flow-report { background: var(--accent); box-shadow: 0.25rem 0.25rem 0 var(--halo); font: 600 1.25rem/1.25 var(--head); }
.flow-group { padding: 0.875rem 0.75rem 0.75rem; background: var(--band); border: 2px solid var(--line); border-radius: 1.25rem; }
.flow-cap { color: var(--navy); font: 600 0.9375rem/1.3 var(--body); text-align: center; }
.lanes { display: grid; gap: 0.5rem; margin-top: 0.625rem; }
.lane {
  display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.875rem;
  background: var(--white); border: 1.5px solid var(--line); border-radius: 0.875rem;
  color: var(--navy); font-size: 0.9375rem; font-weight: 600; line-height: 1.3;
}
.pulse { flex: none; width: 0.625rem; height: 0.625rem; border: 1.5px solid var(--navy); border-radius: 50%; background: var(--accent); }
/* Lanes and connectors move only after demo.js adds is-on as they come into view, then rest. */
.lane.is-on .pulse { animation: pulse 1.25s ease-in-out 4; }
.lane.is-on:nth-child(2) .pulse { animation-duration: 1s; }
.lane.is-on:nth-child(3) .pulse { animation-duration: 1.6s; animation-iteration-count: 3; }
.conn { display: block; flex: none; width: 1rem; height: 2.25rem; }
.conn svg { width: 100%; height: 100%; }
.conn .h { display: none; }
.conn line {
  stroke: var(--navy); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 6 6;
  vector-effect: non-scaling-stroke;
}
.conn.is-on line { animation: dash 1.25s linear 4; }
.flow-label { margin-top: 1rem; color: var(--muted); font-size: 0.9375rem; text-align: center; }
.takeaway { max-width: 26rem; margin: 1rem auto 0; color: var(--navy); font: 600 1.5rem/1.25 var(--head); text-align: center; text-wrap: balance; }
.cta-row { display: grid; justify-items: center; gap: 0.5rem; margin-top: 2rem; text-align: center; }
.cta-line { color: var(--navy); font: 600 1.25rem/1.3 var(--head); }

/* Founder */
.founder { padding-block: 3rem; background: var(--band); }
.founder-grid { display: grid; gap: 1.75rem; margin-top: 1.5rem; }
.portrait-wrap { position: relative; width: min(100%, 16rem); }
.portrait-wrap::before {
  content: ""; position: absolute; inset: 0.75rem -0.75rem -0.75rem 0.75rem;
  border-radius: 1.75rem; background: var(--accent);
}
.portrait {
  position: relative; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 20%;
  border: 2px solid var(--navy); border-radius: 1.75rem;
}
.name { color: var(--navy); font: 700 1.5rem/1.2 var(--head); }
.role { margin-top: 0.125rem; color: var(--muted); font-weight: 600; }
.story { margin-top: 1rem; }

/* Before you book */
.faq { padding-block: 3rem; }
.faq-list { max-width: 46rem; margin-top: 1.25rem; }
.faq details { margin-top: 0.625rem; background: var(--white); border: 1.5px solid var(--line); border-radius: 1rem; box-shadow: var(--soft); }
.faq details[open] { border-color: var(--navy); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3.25rem; padding: 0.75rem 1rem; border-radius: 0.875rem;
  color: var(--navy); font: 600 1.0625rem/1.3 var(--body); cursor: pointer; list-style: none;
  transition: background-color 0.15s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 0.625rem; height: 0.625rem; margin-top: -0.25rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
.faq details[open] summary::after { margin-top: 0.25rem; transform: rotate(-135deg); }
.faq summary:hover { background: var(--tint); }
.faq summary:focus-visible { outline-offset: 2px; }
.faq details p { padding: 0 1rem 1rem; }

/* Closing call */
.closing { padding-block: 3.5rem; background: var(--tint); border-block: 2px solid var(--navy); text-align: center; }
.closing h2 { max-width: 30rem; margin-inline: auto; }
.closing p { max-width: 34rem; margin: 0.75rem auto 0; }
.closing .btn-lg { max-width: 24rem; margin-top: 1.5rem; }
.closing .chat { margin-top: 0.5rem; }

/* Footer */
.site-footer { padding-block: 2rem 2.5rem; border-top: 1px solid var(--line); font-size: 0.9375rem; }
.foot-phone { font: 600 1.25rem/1.3 var(--head); white-space: nowrap; }
.foot-phone a { display: inline-block; padding: 0.6875rem 0; color: var(--navy); text-decoration: none; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 0.5rem; }
.foot-links a { display: inline-block; padding: 0.75rem 0; font-weight: 600; }
.privacy { max-width: 40rem; margin-top: 0.75rem; color: var(--muted); }
.foot-end { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.25rem; margin-top: 0.5rem; color: var(--muted); }
.foot-privacy { display: inline-block; padding: 0.75rem 0; color: var(--muted); }
.foot-privacy:hover { color: var(--navy); }

/* Privacy page: a plain reading column with no sticky bar, no call button and no script */
.plain { padding-block: 2.5rem 3rem; border-top: 0.375rem solid var(--accent); }
.narrow { max-width: 40rem; }
.plain h1 { font-size: clamp(1.875rem, 1.4rem + 2.4vw, 2.75rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
.plain h2 { margin-top: 2.25rem; font-size: 1.375rem; line-height: 1.25; }
.plain p, .plain ul { margin-top: 0.75rem; }
.plain h1 + p { font-size: 1.125rem; }
.plain ul { padding-left: 1.25rem; list-style: disc; }
.plain li + li { margin-top: 0.5rem; }
.plain li::marker { color: var(--navy); }
.plain a:not(.quiet) { font-weight: 600; text-underline-offset: 0.2em; }
.plain .back { margin-top: 1.5rem; }
/* The privacy page header holds only the brand link home. It does not stick and has no button. */
.bar-plain { position: static; border-bottom: 0; padding-block: 0.375rem; }

/* Sections rise in. The script adds js-rise only to blocks below the first screen, then in, then removes both. */
.js-rise { opacity: 0; transform: translateY(1rem); }
.js-rise.in { opacity: 1; transform: none; transition: opacity 0.5s ease-out, transform 0.5s ease-out; }

/* Small phones (up to 370 px): a slightly smaller brand and bar padding keep the bar label on one line down to 360 px */
@media (max-width: 23.125rem) {
  .brand { font-size: 0.875rem; }
  .mark { width: 1.625rem; }
  .btn-bar { padding-inline: 0.5rem; }
}
/* Very small phones: the card stands straight */
@media (max-width: 22.5rem) {
  .dash { --tilt: 0deg; }
}

@media (min-width: 36rem) {
  .bar-inner { width: min(100% - 2rem, 68rem); }
  .brand { gap: 0.5rem; font-size: 1.25rem; }
  .mark { width: 2.5rem; }
  .btn-bar { padding-inline: 1.25rem; font-size: 1rem; }
  .logos-top { justify-content: flex-start; }
  .btn-lg { width: auto; }
  .closing .btn-lg { max-width: none; }
  .hero-line { top: 3rem; right: -2rem; width: 30rem; }
  .scene { padding: 2.5rem 1.25rem 3.5rem; }
  .dash { --tilt: -2deg; }
  .chips { display: block; margin: 0; padding: 0; }
  /* Where the chips float, no chip with a number sits above or over the title. The status chip takes the top-left
     corner, the ROAS chip hangs off the right edge beside the switch (the title is on one line, so that row is
     always clear), and the Leads chip takes the bottom-left corner. Each floats for a few seconds, then rests. */
  .chip { position: absolute; animation: float 2.5s ease-in-out 2; }
  .chip-3 { top: 0.75rem; left: 0.25rem; animation-duration: 1.25s; animation-iteration-count: 4; }
  .chip-2 { top: 5.75rem; right: 0; max-width: 6.5rem; animation-duration: 1.6s; animation-iteration-count: 3; }
  .chip-1 { bottom: 0; left: 1.5rem; }
}

@media (min-width: 48rem) {
  .lead { font-size: 1.125rem; }
  .hero::before {
    top: -7rem; right: -4rem; width: 30rem; height: 30rem;
    box-shadow: 0 0 0 3rem var(--halo), 0 0 0 6rem rgba(255, 200, 61, 0.09);
  }
  .hero::after { display: none; }
  .offer, .how, .ai, .founder, .faq { padding-block: 4.5rem; }
  .logos { --gap: 4.5rem; --view: 35.5rem; --fade: 3rem; --speed: 28s; padding-block: 1.75rem 2rem; }
  .logos-title { font-size: 1rem; }
  .logos-set { column-gap: var(--gap); }
  .lg { height: 2.75rem; }
  .lg-hr { height: 4.25rem; }
  .lg-sia { height: 3.25rem; }
  .proof { padding-block: 2.75rem 3rem; }
  .results { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
  .results > li { display: block; padding: 1rem 1.125rem 1.125rem; border-radius: 1.25rem; }
  .num { font-size: clamp(1.75rem, 3.2vw + 0.25rem, 2.5rem); }
  .about { font-size: 1.125rem; }
  .what { margin-top: 0.375rem; font-size: 1rem; }
  .who { margin-top: 0.125rem; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2rem; }
  .card { padding: 1.75rem; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; margin-top: 2rem; }
  .steps li { padding: 3rem 0 0; }
  .steps li::before { top: 0; }
  .steps li:not(:last-child)::after { left: 2.1rem; right: -1.75rem; top: 0.8rem; bottom: auto; width: auto; height: 2px; }
  .founder-grid { grid-template-columns: 17rem minmax(0, 1fr); gap: 3rem; align-items: center; margin-top: 2rem; }
  .portrait-wrap { width: 100%; }
  .name { font-size: 1.875rem; }
  .closing { padding-block: 5rem; }
  .site-footer { padding-block: 2.5rem 3rem; }
  .plain { padding-block: 3.5rem 4rem; }
  :is(.results, .cards, .steps, .faq-list) > .js-rise.in:nth-child(2) { transition-delay: 0.08s; }
  :is(.results, .cards, .steps, .faq-list) > .js-rise.in:nth-child(3) { transition-delay: 0.16s; }
  :is(.results, .cards, .steps, .faq-list) > .js-rise.in:nth-child(4) { transition-delay: 0.24s; }
}

@media (min-width: 56rem) {
  .hero { padding-block: 3.5rem 4rem; }
  .hero-line { top: 5rem; right: 0; width: 38rem; opacity: 0.3; }
  .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 3rem; align-items: start; }
  .hero-copy { padding-top: 2.5rem; }
  .scene { margin-inline: 0; }
  .dash { --tilt: -3deg; padding: 1.5rem 1.25rem 1.25rem; }
  .flow { display: flex; align-items: center; justify-content: center; }
  .flow-node, .flow-group { width: auto; max-width: 11.5rem; flex: 0 1 auto; }
  .flow-group { min-width: 14.5rem; max-width: none; }
  .conn { flex: 1 1 2rem; min-width: 2rem; max-width: 4.5rem; width: auto; height: 1rem; }
  .conn .h { display: inline; }
  .conn .v { display: none; }
}

/* Wide screens: the strip is one slim row: the heading, the moving window, "and more", then the pause button */
@media (min-width: 64rem) {
  .logos > .wrap { display: flex; align-items: center; gap: 1.5rem; }
  .logos-top, .logos-row { display: contents; }
  .logos-title { order: 1; flex: none; }
  .logos-view { order: 2; }
  .logos-more { order: 3; }
  .logos-btn { order: 4; margin-block: 0; }
}

@media (hover: hover) {
  .card:hover { transform: translateY(-2px); }
}

/* Keyframes. The hidden "before" state of an entrance exists only in here. */
@keyframes line-up { from { opacity: 0; transform: translateY(105%); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(0.75rem); } }
@keyframes card-in { from { transform: translateY(1.5rem) rotate(var(--tilt)); } }
/* The repeating ones (float, drift, dash, pulse) are whole cycles that end where they began, and each is played a set
   number of times (about five seconds in all), so they stop at rest. The line draws once and stays drawn. */
@keyframes float { 50% { transform: translateY(-6px); } }
@keyframes drift { 50% { transform: translate(-2rem, 2rem); } }
@keyframes trace {
  0% { stroke-dashoffset: 1; opacity: 0; }
  15% { opacity: 1; }
  70% { stroke-dashoffset: 0; }
}
@keyframes dash { to { stroke-dashoffset: -12; } }
@keyframes pulse { 50% { opacity: 0.55; transform: scale(1.35); } }
/* The logo strip holds five identical sets, so one set is a fifth of the track. */
@keyframes slide { to { transform: translateX(-20%); } }

/* Less movement: everything is still and fully shown, and the pause button is gone */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .js-rise { opacity: 1 !important; transform: none !important; }
  .logos-btn, .logos-set + .logos-set { display: none !important; }
}