/* ============================================================
   WEBalchemy — shared landing-page system
   Loaded by every template-landing-*.php via the
   webalchemy-landing mu-plugin.
   Fonts come from the theme's local fonts.css (Space Grotesk,
   Inter, JetBrains Mono) — no external font request.
   ============================================================ */

/* ============================================================
   WEBalchemy — Western Europe landing page
   Tokens mirror tailwind.config.js of the `webalchemy` theme.
   Radius is 0 everywhere (fixes DESIGN_ANALYSIS §6.3).
   ============================================================ */

:root {
  color-scheme: only light;

  --ground:        #FDFBF7;
  --surface:       #FFFFFF;
  --ink:           #1A1A1A;
  --ink-muted:     #64748B;
  --rule:          #E2E8F0;
  --rule-strong:   #CBD5E1;

  --accent:        #7C3AED;
  --accent-deep:   #6D28D9;
  --accent-strong: #6D28D9;
  --accent-wash:   #F3EDFE;
  --accent-line:   #DDD6FE;

  --signal:        #A3E635;
  --signal-ink:    #1A2E05;
  --signal-wash:   #F2FBDF;

  --inv-ground:    #141414;
  --inv-surface:   #1E1E1E;
  --inv-ink:       #FAF8F4;
  --inv-muted:     #9CA3AF;
  --inv-rule:      #2E2E2E;

  --grid-line:     #E2E8F0;
  --grid-alpha:    .55;

  --shell: 1200px;
  --gutter: clamp(20px, 5vw, 56px);
  --band: clamp(72px, 9vw, 132px);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --t: 180ms ease;
}

/* Single-theme by design. WEBalchemy's identity is the cream ground with
   violet and lime; an auto-dark repaint dulls both accents and weakens the
   charcoal bands that carry the argument. Every colour below is painted
   explicitly so the page holds on any host background. */

/* ---------- base ---------- */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  overflow-x: hidden;
}

/* Element rules stay inside .wa-lwe so nothing leaks into WordPress
   admin bar, plugin markup or anything else the page may pick up. */
.wa-lwe {
  background: var(--ground);
  color: var(--ink);
  font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wa-lwe h1,
.wa-lwe h2,
.wa-lwe h3,
.wa-lwe h4 {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.03;
  text-wrap: balance;
  margin: 0;
}

.wa-lwe p { margin: 0; }
.wa-lwe ul { margin: 0; padding: 0; list-style: none; }
.wa-lwe a { color: inherit; }

.wa-lwe :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.wa-lwe ::selection { background: var(--accent); color: #fff; }

/* ---------- layout primitives ---------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 2;
}

.band {
  position: relative;
  padding-block: var(--band);
  border-top: 1px solid var(--rule);
}

.band--surface { background: var(--surface); }
.band--flush   { border-top: 0; }

/* follows the marquee, which already reads as a divider */
.band--snug { padding-top: clamp(46px, 5vw, 76px); }

.band--dark {
  background: var(--inv-ground);
  color: var(--inv-ink);
  border-top: 0;
  --rule: var(--inv-rule);
  --ink: var(--inv-ink);
  --ink-muted: var(--inv-muted);
  --surface: var(--inv-surface);
}

.grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: var(--grid-alpha);
  z-index: 0;
}

.band--dark .grid-bg {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  opacity: 1;
}

/* ---------- typography scale ---------- */

.eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.eyebrow--accent { color: var(--accent); }

.h-display {
  font-size: clamp(2.7rem, 7.2vw, 5.4rem);
}

.h-section {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
}

.h-card {
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  letter-spacing: -.02em;
  line-height: 1.2;
}

.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  line-height: 1.62;
  color: var(--ink-muted);
  max-width: 62ch;
}

.prose p {
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.72;
  color: var(--ink-muted);
  max-width: 64ch;
}

.prose p + p { margin-top: 1.35em; }
.prose strong { color: var(--ink); font-weight: 600; }

.section-head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: clamp(40px, 5vw, 68px);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding-inline: 30px;
  border: 1px solid transparent;
  background: var(--accent);
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t), transform var(--t), box-shadow var(--t);
}

.btn:hover {
  background: var(--accent-deep);
  transform: translateY(-2px);
  box-shadow: 0 10px 0 -6px var(--accent-line);
}

.btn svg { width: 17px; height: 17px; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.btn--ghost:hover {
  background: var(--ink);
  color: var(--ground);
  box-shadow: none;
}

.btn--sm { height: 44px; padding-inline: 20px; font-size: .9rem; }

.cta-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  margin-top: clamp(36px, 4vw, 56px);
}

.cta-note {
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--rule);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 68px;
}

/* Same wordmark as the site nav: WEBalchemy with a violet full stop. */
.brand {
  display: inline-flex;
  align-items: baseline;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.32rem;
  letter-spacing: -.045em;
  text-decoration: none;
  color: var(--ink);
  transition: opacity var(--t);
}

.brand:hover { opacity: .8; }

.brand__dot {
  color: var(--accent);
  font-size: 1.5em;
  line-height: 0;
}

.foot .brand { font-size: 1.85rem; color: var(--inv-ink); }

.nav__links {
  display: none;
  gap: 26px;
  align-items: center;
}

.nav__links a {
  font-size: .875rem;
  font-weight: 500;
  color: var(--ink-muted);
  text-decoration: none;
  transition: color var(--t);
}

.nav__links a:hover { color: var(--ink); }


@media (min-width: 940px) { .nav__links { display: flex; } }

/* ---------- hero ---------- */

.hero { padding-block: clamp(52px, 7vw, 92px) clamp(60px, 7vw, 100px); border-top: 0; }

/* Centred thesis, then one big visual under it. The headline gets the full
   measure instead of half a column, and the visual gets real size. */
.hero__head {
  max-width: 940px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero h1 { margin-block: 20px 24px; }
.hero h1 .accent { color: var(--accent); }

.hero__sub { max-width: 60ch; margin-inline: auto; justify-content: center; }

.cta-block--center { align-items: center; text-align: center; }

.hero__visual {
  max-width: 1000px;
  margin: clamp(40px, 5vw, 66px) auto 0;
}

.frame--169 { aspect-ratio: 16 / 9; }

.hero__rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  border-top: 1px solid var(--rule);
  max-width: 1000px;
  margin: clamp(38px, 4vw, 54px) auto 0;
}

.rail__item {
  padding: 24px 18px;
  text-align: center;
  border-right: 1px solid var(--rule);
}

.rail__item:last-child { border-right: 0; }

.rail__k {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.72rem;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  display: block;
}

.rail__v {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 9px;
  display: block;
}

/* ---------- creative frames ----------
   One frame component in the real Meta placement ratios. Drop an <img>
   or <video> inside and it fills; empty, it reads as a labelled slot. */

.frame {
  position: relative;
  background: var(--inv-ground);
  border: 1px solid var(--inv-rule);
  overflow: hidden;
  display: grid;
  place-items: center;
  transition: border-color var(--t), transform var(--t);
}

.frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
}

.frame > img,
.frame > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  grid-area: 1 / 1;
}


.frame__fmt {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 2;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: .12em;
  color: var(--inv-muted);
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(0, 0, 0, .4);
  padding: 3px 7px;
}

.frame__play {
  position: relative;
  z-index: 2;
  width: clamp(40px, 4vw, 62px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .26);
  background: rgba(255, 255, 255, .06);
}

.frame__play::after {
  content: "";
  border-left: clamp(11px, 1.2vw, 16px) solid var(--signal);
  border-top: clamp(7px, .8vw, 10px) solid transparent;
  border-bottom: clamp(7px, .8vw, 10px) solid transparent;
  margin-left: 3px;
}

.frame__tag {
  position: absolute;
  bottom: 9px;
  left: 9px;
  right: 9px;
  z-index: 2;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--inv-muted);
}

.tag-pending {
  color: var(--signal-ink);
  background: var(--signal);
  padding: 3px 8px;
  white-space: nowrap;
  font-weight: 700;
}

/* ---------- marquee ---------- */

.marquee {
  overflow: hidden;
  border-block: 1px solid var(--rule);
  background: var(--surface);
  padding-block: 18px;
  display: flex;
  gap: 0;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* Track is sized by its own content and repeated enough times to
   overflow any viewport. Never stretch it to 100% — the leftover
   space collects at the end and opens a hole at the loop seam. */
.marquee__track {
  display: flex;
  align-items: center;
  flex: none;
  gap: 44px;
  padding-right: 44px;
  animation: slide 46s linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -.02em;
  white-space: nowrap;
  color: var(--ink);
}

.marquee__item::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--accent);
  flex: none;
}

.marquee--rev .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }

@keyframes slide { to { transform: translateX(-100%); } }

/* ---------- volume matrix (6 vs 60) ---------- */

/* Both grids use one cell size, so the area difference is honest. */
.matrix {
  --cell: clamp(17px, 2vw, 25px);
  margin-top: clamp(44px, 5vw, 70px);
  border: 1px solid var(--inv-rule);
  background: var(--inv-ground);
  color: var(--inv-ink);
}

.matrix__top {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  justify-content: space-between;
  align-items: center;
  padding: 18px clamp(22px, 3vw, 34px);
  border-bottom: 1px solid var(--inv-rule);
}

.matrix__title {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--inv-muted);
}

.legend { display: flex; flex-wrap: wrap; gap: 9px 20px; }

.legend__i {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--inv-ink);
}

.legend__i b {
  color: var(--inv-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-left: 1px;
}

.sw { width: 11px; height: 11px; flex: none; display: block; }
.sw--onset  { background: #A3E635; }
.sw--ugc    { background: #8B5CF6; }
.sw--static { background: #F0EAD9; }

.matrix__body { display: grid; }

@media (min-width: 900px) { .matrix__body { grid-template-columns: 1fr 1.5fr; } }

.matrix__pane {
  padding: clamp(30px, 3.6vw, 46px) clamp(22px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.matrix__pane + .matrix__pane { border-top: 1px solid var(--inv-rule); }

@media (min-width: 900px) {
  .matrix__pane + .matrix__pane { border-top: 0; border-left: 1px solid var(--inv-rule); }
}

.matrix__pane--lose { opacity: .58; }

.matrix__pane--win {
  background: linear-gradient(to bottom, rgba(163, 230, 53, .07), transparent 60%);
  box-shadow: inset 0 3px 0 0 #A3E635;
}

.matrix__label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--inv-muted);
}

.matrix__n {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2.4rem, 4.6vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: 1;
  margin: 14px 0 8px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.matrix__n--win { color: #A3E635; font-size: clamp(3.4rem, 6.6vw, 5.2rem); }

.matrix__badge {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  background: #A3E635;
  color: #1A2E05;
  padding: 5px 10px;
}

.matrix__cap { font-size: .92rem; color: var(--inv-muted); max-width: 40ch; }

.dots {
  display: grid;
  gap: 5px;
  margin-top: 28px;
  justify-content: center;
}

.dots i {
  width: var(--cell);
  height: var(--cell);
  display: block;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .22);
}

.dots--lose { grid-template-columns: repeat(6, var(--cell)); }
.dots--win  { grid-template-columns: repeat(10, var(--cell)); }

.dots--win i { border: 0; }
.dots--win i.vid  { background: #A3E635; transition: background-color .6s var(--ease); }
.dots--win i.vid.is-ugc { background: #8B5CF6; }
.dots--win i.stat { background: #F0EAD9; }

/* Squares land one after another, so the volume is felt, not just counted. */
.dots.filled i {
  animation: cellIn .36s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 11ms);
}

@keyframes cellIn {
  from { opacity: 0; transform: scale(.35); }
  to   { opacity: 1; transform: none; }
}

.matrix__verdict {
  border-top: 1px solid var(--inv-rule);
  padding: 20px clamp(22px, 3vw, 34px);
  text-align: center;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.02rem, 1.7vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -.025em;
}

.matrix__verdict b { color: #A3E635; font-weight: 700; }

.matrix__verdict span {
  display: block;
  margin-top: 9px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--inv-muted);
}

/* ---------- foils ---------- */

.foils {
  display: grid;
  gap: 1px;
  background: var(--inv-rule);
  border: 1px solid var(--inv-rule);
}

@media (min-width: 900px) { .foils { grid-template-columns: 1fr 1fr; } }

.foil {
  background: var(--inv-ground);
  padding: clamp(28px, 3.4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.foil__tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--inv-muted);
  display: flex;
  align-items: center;
  gap: 10px;
}

.foil__tag::before {
  content: "";
  width: 26px; height: 1px;
  background: currentColor;
}

.foil p { color: var(--inv-muted); font-size: 1rem; line-height: 1.7; }

.foil__answer {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--inv-rule);
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.foil__answer svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--signal); }

.foil__answer p { color: var(--inv-ink); font-weight: 500; }

/* ---------- deliverables ---------- */

.deliver {
  border-top: 1px solid var(--rule);
}

.deliver__row {
  display: grid;
  gap: 6px 34px;
  padding-block: clamp(22px, 2.6vw, 32px);
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
  transition: background var(--t);
}

@media (min-width: 800px) {
  .deliver__row { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.4fr); }
}

.deliver__row:hover { background: var(--accent-wash); }

.deliver__i {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--accent);
}

.deliver__k {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -.03em;
}

.deliver__v { color: var(--ink-muted); }

.pledge {
  margin-top: clamp(34px, 4vw, 52px);
  border-left: 3px solid var(--signal);
  background: var(--signal-wash);
  padding: clamp(22px, 2.6vw, 30px) clamp(22px, 3vw, 34px);
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.1rem, 1.9vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.35;
  max-width: 58ch;
}

/* ---------- process ---------- */

.process { position: relative; display: grid; gap: 0; }

@media (min-width: 860px) {
  .process { grid-template-columns: 92px minmax(0, 1fr); }
}

.process__spine {
  display: none;
  position: relative;
}

@media (min-width: 860px) { .process__spine { display: block; } }

.spine__track {
  position: absolute;
  left: 22px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: var(--rule);
}

.spine__fill {
  position: absolute;
  left: 22px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
}

.spine__dot {
  position: absolute;
  left: 17px;
  top: 12px;
  width: 11px;
  height: 11px;
  background: var(--accent);
  box-shadow: 0 0 0 5px var(--accent-wash);
}

.steps { display: flex; flex-direction: column; }

.step {
  display: grid;
  gap: 12px 30px;
  padding-block: clamp(28px, 3.4vw, 42px);
  border-top: 1px solid var(--rule);
}

.step:first-child { border-top: 0; padding-top: 0; }

@media (min-width: 700px) {
  .step { grid-template-columns: 78px minmax(0, 1fr); }
}

.step__n {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--accent);
  padding-top: 6px;
}

.step h3 { font-size: clamp(1.25rem, 2.1vw, 1.65rem); margin-bottom: 12px; }
.step p { color: var(--ink-muted); max-width: 62ch; }

.lines {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 22px;
}

@media (min-width: 780px) { .lines { grid-template-columns: repeat(3, 1fr); } }

.line {
  background: var(--surface);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.line__h {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  gap: 9px;
}

.line__h::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--accent);
  flex: none;
}

.line p { font-size: .9rem; line-height: 1.6; }

.stages {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 20px;
  align-items: center;
}

.stage {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 11px;
  border: 1px solid var(--rule-strong);
  color: var(--ink-muted);
  white-space: nowrap;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}

.stage--done { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }
.stage--live { border-color: var(--signal); color: var(--signal-ink); background: var(--signal); font-weight: 700; }

.stage-sep { color: var(--rule-strong); font-size: 11px; }

/* ---------- 90 days timeline ---------- */

.tl { margin-top: 8px; }

.tl__bar {
  display: grid;
  grid-template-columns: 7.8fr 15.6fr 26.6fr 50fr;
  border: 1px solid var(--rule-strong);
  height: 46px;
  overflow: hidden;
}

.tl__seg {
  display: grid;
  place-items: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .1em;
  border-right: 1px solid var(--rule-strong);
  overflow: hidden;
  white-space: nowrap;
}

.tl__seg:last-child { border-right: 0; }
.tl__seg--1 { background: var(--accent-wash); color: var(--ink); }
.tl__seg--2 { background: color-mix(in srgb, var(--accent) 28%, var(--surface)); color: var(--ink); }
.tl__seg--3 { background: color-mix(in srgb, var(--accent) 55%, var(--surface)); color: var(--ink); }
.tl__seg--4 { background: var(--signal); color: var(--signal-ink); font-weight: 700; }

/* scale ticks sit at the true end of each proportional segment */
.tl__scale {
  display: grid;
  grid-template-columns: 7.8fr 15.6fr 26.6fr 50fr;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--ink-muted);
  margin-top: 9px;
}

.tl__scale span {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Each phase draws left to right in sequence — the bar is a clock, so it
   should read as time passing rather than four blocks appearing at once. */
.js .tl .tl__seg { clip-path: inset(0 100% 0 0); }

.js .tl.in .tl__seg {
  clip-path: inset(0 0 0 0);
  transition: clip-path .75s var(--ease);
}

.js .tl.in .tl__seg--1 { transition-delay: .06s; }
.js .tl.in .tl__seg--2 { transition-delay: .22s; }
.js .tl.in .tl__seg--3 { transition-delay: .40s; }
.js .tl.in .tl__seg--4 { transition-delay: .62s; }

.tl__unit {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 6px;
}

.phases {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 28px;
}

@media (min-width: 900px) { .phases { grid-template-columns: repeat(4, 1fr); } }

.phase {
  background: var(--surface);
  padding: clamp(22px, 2.4vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.phase__d {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

.phase h3 { font-size: 1.12rem; }
.phase p { font-size: .93rem; color: var(--ink-muted); line-height: 1.65; }

/* ---------- proof ---------- */

.proof {
  display: grid;
  gap: 1px;
  background: var(--inv-rule);
  border: 1px solid var(--inv-rule);
}

@media (min-width: 700px)  { .proof { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .proof { grid-template-columns: repeat(4, 1fr); } }

.proof__slot {
  background: var(--inv-ground);
  padding: clamp(26px, 3vw, 34px);
  min-height: 208px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
}

.proof__id {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--inv-muted);
}

.proof__metric {
  border: 1px dashed color-mix(in srgb, var(--signal) 42%, transparent);
  color: color-mix(in srgb, var(--signal) 85%, #fff);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 16px 14px;
  text-align: center;
  line-height: 1.7;
}

.proof__tf { font-size: .84rem; color: var(--inv-muted); font-family: "JetBrains Mono", monospace; letter-spacing: .08em; }

.proof-note {
  margin-top: 26px;
  color: var(--inv-muted);
  font-size: .96rem;
}

.proof-note b { color: var(--inv-ink); font-weight: 600; }

/* ---------- proof (vertical stacked metrics & screenshots) ---------- */
.proof-vertical {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.8vw, 44px);
  margin-top: clamp(28px, 4vw, 44px);
}

.proof-card-row {
  background: var(--inv-ground);
  border: 1px solid var(--inv-rule);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease, transform .25s ease;
  box-shadow: 0 4px 24px -6px rgba(0, 0, 0, 0.45);
}

.proof-card-row:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--inv-rule));
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.6), 0 0 28px -6px color-mix(in srgb, var(--accent) 18%, transparent);
}

.proof-card-row__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px clamp(18px, 2.5vw, 28px);
  border-bottom: 1px solid var(--inv-rule);
  background: rgba(255, 255, 255, 0.02);
}

.proof-card-row__client {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--inv-ink);
  font-weight: 600;
}

.proof-card-row__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 9px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent);
  border-radius: 5px;
  font-weight: 700;
  font-size: 11px;
}

.proof-card-row__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--inv-muted);
}

.proof-card-row__meta svg {
  color: var(--accent);
  flex-shrink: 0;
}

.proof-card-row__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 18px;
  padding: clamp(20px, 2.8vw, 28px) clamp(18px, 2.5vw, 28px);
  border-bottom: 1px solid var(--inv-rule);
  background: rgba(0, 0, 0, 0.22);
}

@media (min-width: 640px) {
  .proof-card-row__stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.proof-stat-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.proof-stat-item--hero {
  grid-column: span 2;
}

@media (min-width: 640px) {
  .proof-stat-item--hero {
    grid-column: span 1;
  }
}

.proof-stat-item__label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--inv-muted);
}

.proof-stat-item__value {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.28rem, 2vw, 1.75rem);
  font-weight: 700;
  color: var(--inv-ink);
  line-height: 1.18;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.proof-stat-item__value--accent {
  color: var(--accent);
}

.proof-stat-item__delta {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.28);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
}

.proof-card-row__visual {
  padding: 0;
  background: transparent;
}

.proof-card-row__img-frame {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  border: none;
  background: #030406;
  cursor: zoom-in;
}

.proof-card-row__img-frame img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform .4s cubic-bezier(0.2, 0, 0.2, 1);
}

.proof-card-row:hover .proof-card-row__img-frame img {
  transform: scale(1.008);
}

/* --- Proof Lightbox Zoom --- */
.proof-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  cursor: zoom-out;
}

.proof-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.proof-modal__img {
  max-width: min(94vw, 1200px);
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.1);
  transform: scale(0.96);
  transition: transform .25s ease;
}

.proof-modal.is-open .proof-modal__img {
  transform: scale(1);
}

.proof-modal__close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease;
}

.proof-modal__close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ---------- origin (Bulgaria) ---------- */

/* A ledger, not a map: six things cross the border unchanged and exactly
   one changes. The asymmetry is the argument. */

.ledger {
  margin-top: clamp(46px, 5vw, 72px);
  border: 1px solid var(--rule);
  background: var(--surface);
}

.ledger__head {
  padding: clamp(28px, 3.4vw, 44px) clamp(24px, 3vw, 40px);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 16px 36px;
  align-items: center;
  justify-content: space-between;
}

.ledger__route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.05;
}

.ledger__home { color: var(--accent); }

.ledger__arrow { display: inline-flex; align-items: center; color: var(--rule-strong); }
.ledger__arrow svg { width: clamp(38px, 5.5vw, 72px); height: auto; }

.ledger__sub {
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 32ch;
}

.ledger__body { display: grid; }

@media (min-width: 920px) { .ledger__body { grid-template-columns: 1.32fr 1fr; } }

.ledger__col { padding: clamp(26px, 3vw, 40px) clamp(24px, 3vw, 40px); }

.ledger__label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.ledger__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 22px;
}

@media (min-width: 640px) { .ledger__list { grid-template-columns: repeat(3, 1fr); } }

.ledger__list li {
  background: var(--surface);
  padding: 17px 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

.ledger__list svg { width: 15px; height: 15px; flex: none; color: var(--accent); }

.ledger__diff {
  border-top: 1px solid var(--rule);
  background: var(--signal-wash);
  box-shadow: inset 4px 0 0 0 var(--signal);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 920px) { .ledger__diff { border-top: 0; border-left: 1px solid var(--rule); } }

.ledger__diff .ledger__label { color: var(--signal-ink); }

.ledger__k {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.02;
  margin-top: 6px;
}

.ledger__v { color: #3F5321; font-size: .98rem; line-height: 1.62; }

.ledger__out {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(26, 46, 5, .18);
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.35;
}

/* ---------- comparison ---------- */

.cmp-wrap { overflow-x: auto; border: 1px solid var(--rule); }

.cmp {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  background: var(--surface);
}

.cmp th, .cmp td {
  text-align: left;
  padding: 20px clamp(16px, 2.2vw, 28px);
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.cmp thead th {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-muted);
  background: var(--ground);
}

.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }

.cmp td.them {
  color: var(--ink-muted);
  width: 50%;
  background: var(--ground);
}

.cmp td.us {
  width: 50%;
  font-weight: 600;
  color: var(--ink);
  background: var(--accent-wash);
  border-left: 3px solid var(--accent);
}

.cmp thead th.us {
  background: var(--accent-strong);
  color: #fff;
  border-left: 3px solid var(--accent-strong);
}

.cmp__mark {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--signal);
  margin-right: 9px;
}

.cmp td svg {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  margin-right: 11px;
}

.cmp td.them svg { color: #A8B4C4; }
.cmp td.us svg { color: var(--accent); }

/* ---------- fit ---------- */

.fit { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }

@media (min-width: 880px) { .fit { grid-template-columns: 1fr 1fr; } }

.fit__col { background: var(--surface); padding: clamp(26px, 3.2vw, 40px); }

.fit__h {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 10px;
}

.fit__h--yes { color: var(--accent); }
.fit__h--no  { color: var(--ink-muted); }

.fit li {
  display: flex;
  gap: 14px;
  padding-block: 14px;
  font-size: 1.02rem;
  line-height: 1.6;
}

.fit li + li { border-top: 1px solid var(--rule); }
.fit li svg { width: 17px; height: 17px; flex: none; margin-top: 5px; }
.fit__col--yes li svg { color: var(--accent); }
.fit__col--no  li { color: var(--ink-muted); }
.fit__col--no  li svg { color: var(--rule-strong); }

/* ---------- booking ---------- */

.book { display: grid; gap: clamp(36px, 4.5vw, 60px); align-items: center; }

@media (min-width: 1000px) { .book { grid-template-columns: minmax(0, 1fr) 460px; align-items: start; } }

.book p { color: var(--inv-muted); }

/* Pinned to the hex values passed to the Calendly embed
   (background_color=1e1e1e, text_color=faf8f4, primary_color=7c3aed)
   so the frame and the widget meet without a seam in either theme. */
.cal {
  border: 1px solid #333338;
  background: #1E1E1E;
  color: #FAF8F4;
  overflow: hidden;
}

.cal__head {
  padding: 16px 20px;
  border-bottom: 1px solid #333338;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9CA3AF;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.cal__badge {
  color: #A3E635;
  border: 1px solid rgba(163, 230, 53, .4);
  padding: 3px 8px;
  white-space: nowrap;
}

.calendly-inline-widget {
  min-width: 0 !important;
  width: 100%;
}

.cal__fallback {
  padding: 30px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
  text-align: center;
}

.cal__fallback p {
  font-size: .9rem;
  line-height: 1.6;
  color: #9CA3AF;
  max-width: 32ch;
}

.cal__fallback .btn { width: 100%; }

.cal__fallback small {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6B7280;
}

/* ---------- faq ---------- */

.faq { border-top: 1px solid var(--rule); max-width: 900px; }

.faq details { border-bottom: 1px solid var(--rule); }

.faq summary {
  list-style: none;
  cursor: pointer;
  padding-block: clamp(20px, 2.4vw, 26px);
  padding-right: 44px;
  position: relative;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.35;
  transition: color var(--t);
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }

.faq summary::after,
.faq summary::before {
  content: "";
  position: absolute;
  right: 8px;
  background: var(--accent);
  transition: transform var(--t), opacity var(--t);
}

.faq summary::before { top: calc(50% - .5px); width: 15px; height: 1px; }
.faq summary::after  { top: calc(50% - 7.5px); right: 15px; width: 1px; height: 15px; }

.faq details[open] summary::after { transform: scaleY(0); opacity: 0; }

.faq__a {
  padding-bottom: 26px;
  padding-right: 44px;
  color: var(--ink-muted);
  max-width: 68ch;
  line-height: 1.72;
}

/* ---------- footer ---------- */

.foot { background: var(--inv-ground); color: var(--inv-ink); padding-block: clamp(48px, 6vw, 76px); }

.foot__top {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--inv-rule);
}

.foot__nav { display: flex; flex-wrap: wrap; gap: 8px 26px; }

.foot__nav a {
  font-size: .9rem;
  color: var(--inv-muted);
  text-decoration: none;
  transition: color var(--t);
}

.foot__nav a:hover { color: var(--inv-ink); }

.foot__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  justify-content: space-between;
  padding-top: 26px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--inv-muted);
}

.foot .brand { color: var(--inv-ink); }

/* ---------- draft banner ---------- */

.draft {
  background: var(--ink);
  color: var(--ground);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 9px 0;
}

.draft .shell { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; }
.draft span { opacity: .72; }

/* ---------- motion ---------- */

/* per-word wrapper: keeps a word's inline-block letters from breaking apart */
.hero h1 .wd-nb {
  display: inline-block;
  white-space: nowrap;
}

.hero h1 .ltr {
  display: inline-block;
  transform-origin: 50% 100%;
  animation: ltrIn .78s var(--ease) both;
}

@keyframes ltrIn {
  from { opacity: 0; transform: translate3d(0, 42px, 0) rotateX(-82deg); }
  to   { opacity: 1; transform: none; }
}

.hero__sub .wd {
  display: inline-block;
  animation: wdIn .7s var(--ease) both;
}

@keyframes wdIn {
  from { opacity: 0; filter: blur(9px); }
  to   { opacity: 1; filter: blur(0); }
}

.js .reveal { opacity: 0; transform: translateY(16px); }

.js .reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .hero h1 .ltr, .hero__sub .wd { animation: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .marquee__track { animation: none; }
  .dots.filled i { animation: none !important; opacity: 1 !important; transform: none !important; }
  .js .tl .tl__seg { clip-path: none !important; transition: none !important; }
  .dots--win i.vid, .stage { transition: none !important; }
  * { scroll-behavior: auto !important; }
}

html { scroll-behavior: smooth; scroll-padding-top: 84px; }


/* ---------- price tag (BG + Website Builds heroes) ----------
   Both of those offers put the number on the page on purpose, so it has to
   read before the button, not after it. */

.price-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  border: 1px solid var(--rule);
  background: var(--surface);
  padding: 14px 20px;
  margin-top: 4px;
}

.price-tag b {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--accent);
}

.price-tag span {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ---------- three-up foils ---------- */

@media (min-width: 940px) { .foils--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) and (max-width: 939px) { .foils--3 { grid-template-columns: 1fr; } }

/* ---------- comparison variants ---------- */

/* row-labelled, two contenders */
.cmp--labelled { min-width: 780px; }

.cmp--labelled th[scope="row"] {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--ground);
  width: 22%;
  vertical-align: top;
}

.cmp--labelled td { width: 39%; }

/* four contenders, centred cells */
.cmp--4 { min-width: 940px; }

.cmp--4 th[scope="row"] {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--ground);
  width: 19%;
  vertical-align: middle;
}

.cmp--4 td { width: 20.25%; text-align: center; vertical-align: middle; }
.cmp--4 thead th { text-align: center; }
.cmp--4 thead th:first-child { text-align: left; }
.cmp--4 td svg { margin-right: 0; }

/* a hedge is not a yes — no icon, muted */
.cmp .maybe { color: var(--ink-muted); font-weight: 400; }

/* ---------- device pair (Website Builds hero) ---------- */

.device { position: relative; padding-bottom: 6%; }
.device--single { padding-bottom: 0; }

.video-facade {
  position: relative;
  aspect-ratio: 16 / 9;
  cursor: pointer;
  overflow: hidden;
  background: #080808;
  display: grid;
  place-items: center;
}

.video-facade__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.video-facade:hover .video-facade__thumb {
  transform: scale(1.02);
  filter: brightness(0.9);
}

.video-facade iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.device__desk {
  border: 1px solid var(--inv-rule);
  background: var(--inv-ground);
  overflow: hidden;
}

.device__bar {
  height: 32px;
  border-bottom: 1px solid var(--inv-rule);
  display: flex;
  align-items: center;
  gap: 6px;
  padding-inline: 13px;
}

.device__bar i { width: 8px; height: 8px; background: rgba(255, 255, 255, .22); flex: none; }

.device__bar em {
  margin-left: 10px;
  font-family: "JetBrains Mono", monospace;
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: .1em;
  color: var(--inv-muted);
  overflow: hidden;
  white-space: nowrap;
}

.device__screen {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  position: relative;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 28px 28px;
}

.device__phone {
  position: absolute;
  right: 5%;
  bottom: 0;
  width: 20%;
  min-width: 76px;
  aspect-ratio: 416 / 848;
  border: 1px solid var(--rule-strong);
  background: var(--inv-surface);
  overflow: hidden;
  box-shadow: 0 20px 54px -22px rgba(26, 26, 26, .55);
  display: grid;
  place-items: center;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 18px 18px;
}

.device__phone video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.device__credit {
  margin-top: 12px;
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.device__screen video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.device__note {
  position: relative;
  z-index: 2;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--inv-muted);
  text-align: center;
  padding: 0 14px;
}

/* ---------- conversion maths (Website Builds) ---------- */

.conv__head {
  padding: 18px clamp(22px, 3vw, 34px);
  border-bottom: 1px solid var(--inv-rule);
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--inv-muted);
}

.conv__body { display: grid; }

@media (min-width: 860px) { .conv__body { grid-template-columns: 1fr 1fr; } }

.dots--conv { grid-template-columns: repeat(10, var(--cell)); }

/* ---------- scroll-swapped video stack (Website Builds proof) ----------
   A tall rail pins one stage; scrolling swaps which recording is on screen.
   The scroll itself is never intercepted — the page keeps its normal speed,
   only the frame changes. Without JS or with reduced motion the three simply
   stack and play as an ordinary list. */

.vstack { margin-top: clamp(28px, 3.4vw, 44px); }

.vstack__rail { display: grid; gap: clamp(26px, 3vw, 40px); }

.vstack__stage { display: grid; }

.vslide { margin: 0; }

.vslide__frame {
  position: relative;
  /* the exact ratio of the screen recordings, so nothing is cropped */
  aspect-ratio: 1728 / 994;
  border: 1px solid var(--inv-rule);
  background: var(--inv-ground);
  display: grid;
  place-items: center;
  overflow: hidden;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 28px 28px;
}

.vslide__frame video,
.vslide__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  grid-area: 1 / 1;
}

.vslide__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  padding-top: 14px;
}

.vslide__brand {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--inv-ink);
}

.vslide__change { color: var(--inv-muted); font-size: .95rem; }

.vslide__metric {
  margin-left: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px dashed color-mix(in srgb, var(--signal) 45%, transparent);
  color: color-mix(in srgb, var(--signal) 88%, #fff);
  padding: 5px 10px;
  white-space: nowrap;
}

.vstack__ticks {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 20px;
}

.vstack__ticks b {
  width: 44px;
  height: 2px;
  background: var(--inv-rule);
  transition: background .35s ease;
}

.vstack__hint {
  text-align: center;
  margin-top: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--inv-muted);
}

/* --- pinned behaviour, JS only --- */

.js .vstack__rail {
  display: block;
  height: 300vh;
  position: relative;
}

/* Flex column, not grid: the stage's children are all absolutely
   positioned, so it has no content height of its own and must be told to
   take the remaining space. As a grid item it collapsed to zero. */
.js .vstack__pin {
  position: sticky;
  top: 92px;
  height: min(78vh, 660px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.js .vstack__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.js .vslide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateY(14px) scale(.985);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  pointer-events: none;
}

.js .vslide.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.js .vslide__frame {
  width: 100%;
  height: auto;
  max-height: calc(100% - 54px); /* leaves the caption its row */
}

.js .vstack__ticks b.is-on { background: var(--signal); }

@media (max-width: 720px) {
  .js .vstack__rail { height: 260vh; }
  .js .vstack__pin { top: 84px; height: min(72vh, 520px); }
}

/* ---------- owner-time split (BG section 9) ---------- */

.split { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }

@media (min-width: 880px) { .split { grid-template-columns: 1fr 1.35fr; } }

.split__col { background: var(--surface); padding: clamp(26px, 3vw, 40px); }

.split__col--yours {
  background: var(--signal-wash);
  box-shadow: inset 4px 0 0 0 var(--signal);
}

.split__k {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1;
  margin: 10px 0 6px;
}

.split li {
  display: flex;
  gap: 12px;
  padding-block: 13px;
  font-size: .98rem;
  line-height: 1.55;
}

.split li + li { border-top: 1px solid var(--rule); }
.split li svg { width: 15px; height: 15px; flex: none; margin-top: 4px; }
.split__col--yours li svg { color: var(--signal-ink); }
.split__col--yours li + li { border-top-color: rgba(26, 46, 5, .16); }
.split__col--ours li svg { color: var(--accent); }
.split__col--ours li { color: var(--ink-muted); }

/* ---------- testimonial slots (BG proof) - Ultra-favorable modern redesign ---------- */

.badge-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal);
  background: rgba(163, 230, 53, 0.08);
  border: 1px solid rgba(163, 230, 53, 0.25);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
  box-shadow: 0 0 16px -4px rgba(163, 230, 53, 0.2);
}

.badge-live__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 8px var(--signal);
  animation: liveDotPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes liveDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

@keyframes tstmPulse {
  0% { box-shadow: 0 0 0 0 rgba(163, 230, 53, 0.4); }
  70% { box-shadow: 0 0 0 14px rgba(163, 230, 53, 0); }
  100% { box-shadow: 0 0 0 0 rgba(163, 230, 53, 0); }
}

.tstm {
  display: grid;
  gap: clamp(18px, 2.2vw, 26px);
  background: transparent;
  border: none;
  margin-top: clamp(28px, 3.5vw, 42px);
}

@media (min-width: 620px)  { .tstm { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .tstm { grid-template-columns: repeat(4, 1fr); } }

.tstm.tstm--2 {
  max-width: 660px;
  margin-inline: auto;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(10px, 2.2vw, 24px);
}

@media (max-width: 619px) {
  .tstm.tstm--2 {
    gap: 10px;
    margin-top: 20px;
  }
  .tstm.tstm--2 .tstm__cell {
    padding: 8px 8px 12px;
    border-radius: 14px;
  }
  .tstm.tstm--2 .tstm__frame {
    border-radius: 10px;
  }
  .tstm.tstm--2 .tstm__play {
    width: 44px;
    height: 44px;
  }
  .tstm.tstm--2 .tstm__play svg {
    width: 16px;
    height: 16px;
    margin-left: 2px;
  }
  .tstm.tstm--2 .tstm__badge-time {
    top: 6px;
    right: 6px;
    font-size: 9px;
    padding: 2px 6px;
  }
  .tstm.tstm--2 .tstm__brand {
    font-size: 0.92rem;
  }
  .tstm.tstm--2 .tstm__info {
    padding: 8px 2px 0;
  }
}

.tstm__cell {
  background: linear-gradient(180deg, #18181b 0%, #101013 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 12px 12px 18px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.65);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease,
              box-shadow 0.35s ease;
  position: relative;
}

.tstm__cell:hover {
  transform: translateY(-6px);
  border-color: rgba(163, 230, 53, 0.4);
  box-shadow: 0 26px 52px -12px rgba(0, 0, 0, 0.85), 0 0 28px -6px rgba(163, 230, 53, 0.16);
}

.tstm__frame {
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: #080808;
}

.tstm__frame > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tstm__badge-time {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  color: #fdfbf7;
  background: rgba(12, 12, 14, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 4px 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: opacity 0.25s ease;
}

.tstm__frame.is-playing .tstm__badge-time {
  opacity: 0;
}

.tstm__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(12, 12, 14, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--signal);
  cursor: pointer;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.6);
  animation: tstmPulse 2.8s infinite;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
              background 0.25s ease,
              color 0.25s ease,
              border-color 0.25s ease,
              opacity 0.25s ease;
}

.tstm__play svg {
  margin-left: 3px;
  width: 22px;
  height: 22px;
}

.tstm__cell:hover .tstm__play {
  transform: translate(-50%, -50%) scale(1.1);
  background: var(--signal);
  color: #0c0c0d;
  border-color: var(--signal);
  box-shadow: 0 0 24px rgba(163, 230, 53, 0.6);
}

.tstm__frame.is-playing .tstm__play {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
  pointer-events: none;
}

.tstm__info {
  padding: 14px 4px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.tstm__brand {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
  font-size: 1.25rem;
  color: #fdfbf7;
  line-height: 1.25;
  margin: 0;
  text-align: center;
}

.tstm__person {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: #a1a1aa;
  margin: 3px 0 10px;
  line-height: 1.4;
}

.tstm__role {
  color: #71717a;
}

.tstm__quote {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-style: italic;
  color: #d4d4d8;
  line-height: 1.55;
  margin: 0 0 14px;
  padding-left: 10px;
  border-left: 2px solid rgba(163, 230, 53, 0.5);
}

.tstm__pill {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  color: #a3e635;
  background: rgba(163, 230, 53, 0.08);
  border: 1px solid rgba(163, 230, 53, 0.2);
  padding: 5px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: auto;
}

/* --- Proof Trust Callout Card --- */
.proof-card {
  margin-top: clamp(32px, 4vw, 48px);
  background: linear-gradient(135deg, rgba(24, 24, 28, 0.95) 0%, rgba(15, 15, 18, 0.98) 100%);
  border: 1px solid rgba(163, 230, 53, 0.25);
  border-radius: 20px;
  padding: clamp(22px, 3vw, 34px);
  box-shadow: 0 20px 48px -16px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}

.proof-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--signal) 50%, transparent 100%);
  opacity: 0.8;
}

.proof-card__inner {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.5vw, 32px);
  flex-wrap: wrap;
}

.proof-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(163, 230, 53, 0.12);
  border: 1px solid rgba(163, 230, 53, 0.3);
  display: grid;
  place-items: center;
  color: var(--signal);
  flex-shrink: 0;
}

.proof-card__icon svg {
  width: 26px;
  height: 26px;
}

.proof-card__body {
  flex: 1;
  min-width: 280px;
}

.proof-card__eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 4px;
}

.proof-card__title {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.1rem, 1.4vw, 1.35rem);
  font-weight: 700;
  color: #fdfbf7;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}

.proof-card__text {
  font-family: "Inter", sans-serif;
  font-size: 13.5px;
  color: #94a3b8;
  line-height: 1.6;
  margin: 0;
  max-width: 65ch;
}

.proof-card__action {
  flex-shrink: 0;
}

/* ==========================================================================
   COWBOY.COM SINKING UGC VIDEO WALL (.sinking-wall)
   A multi-column masonry wall of vertical phone/Reels cards with smooth
   downward drift and top/bottom gradient masks, simulating cards sinking
   into the deep background.
   ========================================================================== */

.sinking-section {
  position: relative;
  overflow: hidden;
  padding-top: clamp(60px, 8vw, 100px);
  padding-bottom: 0 !important;
}

.sinking-wall {
  position: relative;
  height: clamp(640px, 80vh, 920px);
  overflow: hidden;
  margin-top: clamp(32px, 4vw, 54px);
  margin-bottom: 0 !important;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 100%);
}

.sinking-wall__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
  height: 100%;
}

@media (min-width: 768px) {
  .sinking-wall__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1080px) {
  .sinking-wall__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.sinking-col {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 22px);
  animation: sinkDriftDown 36s linear infinite;
  will-change: transform;
}

.sinking-col:nth-child(2) {
  animation-duration: 44s;
  animation-delay: -12s;
}

.sinking-col:nth-child(3) {
  animation-duration: 32s;
  animation-delay: -20s;
}

.sinking-col:nth-child(4) {
  animation-duration: 40s;
  animation-delay: -6s;
}

/* Continuous loop: keep carousel drifting smoothly */
@keyframes sinkDriftDown {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

.sinking-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #141416;
  border: 1px solid rgba(255, 255, 255, 0.08);
  aspect-ratio: 9 / 16;
  flex-shrink: 0;
  box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.7);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease,
              box-shadow 0.35s ease;
  display: block;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: auto;
}

.sinking-card:hover {
  transform: scale(1.02);
  border-color: rgba(163, 230, 53, 0.45);
  box-shadow: 0 24px 48px -10px rgba(0, 0, 0, 0.85);
  z-index: 5;
}

.sinking-card video,
.sinking-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Remove all overlays/text on the videos as requested */
.sinking-card__scrim,
.sinking-card__top,
.sinking-card__ig,
.sinking-card__fmt,
.sinking-card__bottom,
.sinking-card__title,
.sinking-card__sub,
.sinking-card__play-btn {
  display: none !important;
}

.sinking-wall__fade {
  position: absolute;
  left: 0;
  right: 0;
  height: 90px;
  pointer-events: none;
  z-index: 4;
}

.sinking-wall__fade--top {
  top: 0;
  background: linear-gradient(180deg, var(--inv-ground) 0%, transparent 100%);
}

.sinking-wall__fade--bottom {
  display: none !important;
}

/* ---------- presenter card (BG hero) ----------
   Joins the bottom edge of the hero video frame, so the face and the video
   read as one object rather than a badge floating next to it. */

.presenter {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 22px);
  border: 1px solid var(--rule-strong);
  border-top: 0;
  background: var(--surface);
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 26px);
}

.presenter__ph {
  width: clamp(76px, 8.5vw, 96px);
  height: clamp(76px, 8.5vw, 96px);
  flex: none;
  border: 1.5px solid var(--rule-strong);
  background: var(--inv-ground);
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
}

.presenter__ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  display: block;
}

.presenter__ph span {
  font-family: "JetBrains Mono", monospace;
  font-size: 8.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--inv-muted);
  text-align: center;
  line-height: 1.4;
}

.presenter__name {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--ink);
  line-height: 1.25;
}

.presenter__role {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 5px;
}

/* ---------- cookie consent ----------
   The theme prints this banner with Tailwind utility classes and this page
   does not load Tailwind, so it arrives unstyled with its settings panel
   stuck open. Rebuilt here from the same tokens, including the .hidden
   toggle that assets/js/wa-consent.js switches. */

#wa-consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 9999;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  border-top: 1px solid var(--rule);
  box-shadow: 0 -14px 44px -28px rgba(26, 26, 26, .45);
  color: var(--ink);
  font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
}

#wa-consent.hidden,
#wa-consent-panel.hidden { display: none !important; }

#wa-consent .container {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding: 16px var(--gutter);
}

#wa-consent .container > div:first-child { display: flex; flex-direction: column; gap: 14px; }

@media (min-width: 768px) {
  #wa-consent .container > div:first-child { flex-direction: row; align-items: center; gap: 30px; }
}

#wa-consent .flex-1 { flex: 1; min-width: 0; }

#wa-consent h2 {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.015em;
  margin: 0 0 4px;
  color: var(--ink);
}

#wa-consent p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 74ch;
}

#wa-consent a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
#wa-consent a:hover { color: var(--accent-deep); }

#wa-consent .container > div:first-child > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
}

#wa-consent [data-wa-consent] {
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -.005em;
  padding: 10px 15px;
  border: 1px solid var(--rule-strong);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
}

#wa-consent [data-wa-consent]:hover { border-color: var(--accent); color: var(--accent); }

#wa-consent [data-wa-consent="accept"],
#wa-consent [data-wa-consent="save"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 700;
}

#wa-consent [data-wa-consent="accept"]:hover,
#wa-consent [data-wa-consent="save"]:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #fff;
}

#wa-consent-panel {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}

#wa-consent-panel > div:first-child { display: grid; gap: 12px; }
#wa-consent-panel > div:first-child > div { display: flex; align-items: flex-start; gap: 10px; }

#wa-consent input[type="checkbox"] {
  margin-top: 2px;
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  flex: none;
}

#wa-consent label { font-size: 12.5px; line-height: 1.5; cursor: pointer; }
#wa-consent label span { display: block; }
#wa-consent label span:first-child { font-weight: 700; color: var(--ink); }
#wa-consent label span + span { color: var(--ink-muted); }

#wa-consent [data-wa-consent="save"] { margin-top: 16px; }

/* ============================================================
   Mobile refinements
   ============================================================ */

@media (max-width: 400px) {
  /* Long headline words (Cyrillic on the BG page) need more room than the
     43px floor leaves on a 375–390px screen. */
  .h-display { font-size: clamp(2.3rem, 8.6vw, 2.7rem); }
}

@media (max-width: 767px) {
  /* Consent bar: real 44px touch targets, and let the actions fill the row
     instead of sitting as three tiny pills. */
  #wa-consent .container { padding-block: 14px; }

  #wa-consent .container > div:first-child > div:last-child {
    gap: 8px;
  }

  #wa-consent .container > div:first-child > div:last-child [data-wa-consent] {
    flex: 1 1 auto;
    min-height: 44px;
    padding: 11px 14px;
    justify-content: center;
    text-align: center;
  }

  #wa-consent [data-wa-consent] {
    display: inline-flex;
    align-items: center;
  }

  #wa-consent-panel [data-wa-consent="save"] {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  .cmp-wrap { -webkit-overflow-scrolling: touch; }
}

@media (max-width: 640px) {
  .hero__visual {
    margin: 24px auto 0;
  }
  .device--single {
    padding-bottom: 0;
  }
  .device__desk {
    border-radius: 12px;
    box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.7);
  }
  .device__bar {
    height: 28px;
    padding-inline: 10px;
    gap: 5px;
  }
  .device__bar i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }
  .device__bar em {
    font-size: 8.5px;
    margin-left: 6px;
  }
  .video-facade .tstm__play {
    width: 48px;
    height: 48px;
  }
  .video-facade .tstm__play svg {
    width: 18px;
    height: 18px;
    margin-left: 2px;
  }
  .video-facade .tstm__badge-time {
    top: 8px;
    right: 8px;
    font-size: 9px;
    padding: 3px 7px;
  }
  .device__credit {
    font-size: 9px;
    margin-top: 8px;
  }
  .hero__rail {
    grid-template-columns: repeat(3, 1fr);
    margin: 24px auto 0;
  }
  .rail__item {
    padding: 14px 6px;
  }
  .rail__k {
    font-size: 1.3rem;
  }
  .rail__v {
    font-size: 8.5px;
    letter-spacing: .06em;
  }
  .price-tag {
    padding: 10px 16px;
    gap: 8px;
  }
  .price-tag span {
    font-size: 9px;
  }
}