/* QuiqSim — D3 Bold Verb V1 Block · base + primitives
   Mobile-first. No shared imports. No frameworks. */

/* tokens (inlined to avoid @import edge-cache surprises)
   Brand colors locked to sRGB hex so they match the logo / favicon / profile pic exactly.
   Neutrals stay OKLCH because they have headroom in sRGB and benefit from perceptual uniformity. */
:root {
  --surface:           #E84D2A;                 /* punch red-orange, matches logo */
  --surface-deep:      #C8401E;                 /* darker hover/border variant */
  --surface-alt:       oklch(0.94 0.02 80);
  --surface-warm:      oklch(0.92 0.04 80);
  --surface-ink:       oklch(0.18 0.01 30);
  --ink-primary:       oklch(0.18 0.01 30);
  --ink-secondary:     oklch(0.32 0.04 30);
  --ink-on-cream:      oklch(0.20 0.02 30);
  --ink-on-ink:        oklch(0.92 0.02 80);
  --accent-block:      #C8FF38;                 /* electric yellow-green, matches favicon + logo */
  --accent-block-warn: #FF7A2F;                 /* warm orange warn (install-expired state) */
  --border:            #C8401E;
  --border-on-cream:   oklch(0.86 0.04 80);
  --display: 'Söhne Breit', 'GT Walsheim Black', 'Arial Black', 'Helvetica Neue', sans-serif;
  --mono:    'PP Inktrap Mono', 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;
  --t-verb:        clamp(64px, 12vw, 200px);
  --t-display-2:   clamp(48px, 8vw, 120px);
  --t-display-3:   clamp(34px, 5vw, 64px);
  --t-h2:          clamp(28px, 3.4vw, 48px);
  --t-h3:          clamp(22px, 2.4vw, 32px);
  --t-body:        17px;
  --t-body-lg:     20px;
  --t-mono:        14px;
  --t-mono-sm:     13px;
  --t-mono-strip:  13px;
  --space-xs: 4px;
  --space-sm: 12px;
  --space-md: 24px;
  --space-lg: 64px;
  --space-xl: 120px;
  --space-hero: 200px;
  --space-row: 14px;
  --space-tap-min: 44px;
  --space-cta-bottom: 116px;
  --easing-cut:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-ribbon:   cubic-bezier(0.34, 1.2, 0.64, 1);
  --dur-fast:      120ms;
  --dur-mid:       220ms;
  --dur-hero:      560ms;
  --dur-ribbon-slide: 380ms;
  --radius: 0;
  --border-w: 2px;
  --container-w: 1280px;
  --container-pad: 24px;
}
@media (max-width: 720px) {
  :root {
    --container-pad: 16px;
    --space-hero: 64px;        /* was 96px — less red void above the verb stack */
    --space-xl: 80px;          /* was 120px — tighten section padding too */
    --t-body: 16px;
    --t-body-lg: 18px;
    --space-cta-bottom: 96px;
  }
}

/* RESET */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--surface-alt);
  color: var(--ink-on-cream);
  font-family: var(--mono);
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* allow body to flow under sticky CTA without clipping */
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; margin: 0; list-style: none; }
button { background: transparent; border: 0; padding: 0; font: inherit; cursor: pointer; color: inherit; }

/* CONTAINER */
.container { max-width: var(--container-w); margin: 0 auto; padding: 0 var(--container-pad); }

/* TYPE PRIMITIVES */
.verb {
  font-family: var(--display);
  font-weight: 900;
  font-size: var(--t-verb);
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin: 0;
  color: var(--ink-primary);
}
.display-2 { font-family: var(--display); font-size: var(--t-display-2); font-weight: 900; line-height: 0.95; letter-spacing: -0.03em; margin: 0; }
.display-3 { font-family: var(--display); font-size: var(--t-display-3); font-weight: 900; line-height: 1.0; letter-spacing: -0.025em; margin: 0; }
.h2 { font-family: var(--display); font-size: var(--t-h2); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; margin: 0; }
.h3 { font-family: var(--display); font-size: var(--t-h3); font-weight: 900; line-height: 1.1; margin: 0; }
.mono-body { font-family: var(--mono); font-size: var(--t-body-lg); line-height: 1.5; }
.mono-strip { font-family: var(--mono); font-size: var(--t-mono-strip); letter-spacing: 0.18em; text-transform: uppercase; }
.mono-eyebrow { font-family: var(--mono); font-size: var(--t-mono-sm); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-secondary); }



/* 3D LETTER EXTRUSION — sharp brand type, still CSS-only and cheap */
.verb,
.display-2,
.display-3,
.h2,
.price-slab__main,
.price-slab__sub,
.country-row__name,
.country-row__price,
.plan-row__data,
.plan-row__price,
.faq summary {
  text-shadow:
    1px 1px 0 var(--accent-block),
    2px 2px 0 var(--surface-deep),
    3px 3px 0 rgba(32, 27, 25, 0.28);
  transform: translateZ(0);
}

.hero-punch .verb {
  text-shadow:
    2px 2px 0 var(--accent-block),
    4px 4px 0 var(--surface-deep),
    6px 6px 0 rgba(32, 27, 25, 0.42),
    10px 12px 0 rgba(32, 27, 25, 0.10);
}

.section--ink .display-2,
.section--ink .display-3,
.section--ink .h2 {
  text-shadow:
    1px 1px 0 var(--surface),
    2px 2px 0 var(--accent-block),
    4px 4px 0 rgba(0, 0, 0, 0.45);
}

@media (max-width: 720px) {
  .verb,
  .display-2,
  .display-3,
  .h2,
  .price-slab__main,
  .price-slab__sub,
  .country-row__name,
  .country-row__price,
  .plan-row__data,
  .plan-row__price,
  .faq summary {
    text-shadow:
      1px 1px 0 var(--accent-block),
      2px 2px 0 rgba(32, 27, 25, 0.30);
  }
  .hero-punch .verb {
    text-shadow:
      1px 1px 0 var(--accent-block),
      2px 2px 0 var(--surface-deep),
      4px 4px 0 rgba(32, 27, 25, 0.35);
  }
}





/* HERO BIG LETTERS — individual tactile letter blocks */
.verb--letters {
  cursor: default;
  perspective: 900px;
}
.verb--letters .letter-word {
  display: inline-block;
  white-space: nowrap;
}
.verb--letters .letter-3d,
.verb--letters .letter-space {
  display: inline-block;
}
.verb--letters .letter-space {
  width: 0.22em;
}
.verb--letters .letter-3d {
  cursor: pointer;
  transform-origin: 50% 70%;
  transition:
    transform 140ms var(--easing-cut),
    text-shadow 140ms var(--easing-cut),
    color 140ms var(--easing-cut),
    filter 140ms var(--easing-cut);
  text-shadow:
    2px 2px 0 var(--accent-block),
    4px 4px 0 var(--surface-deep),
    7px 7px 0 rgba(32, 27, 25, 0.42),
    12px 14px 0 rgba(32, 27, 25, 0.12);
  will-change: transform, text-shadow;
}
@media (hover: hover) and (pointer: fine) {
  .verb--letters .letter-3d:hover {
    transform: translate(-5px, -7px) rotateX(10deg) rotateY(-8deg) rotate(-1.5deg) scale(1.035);
    filter: saturate(1.14) contrast(1.04);
    text-shadow:
      3px 3px 0 var(--accent-block),
      7px 7px 0 var(--surface-deep),
      11px 11px 0 rgba(32, 27, 25, 0.45),
      18px 20px 0 rgba(32, 27, 25, 0.14);
  }
}
.verb--letters .letter-3d:active {
  transform: translate(3px, 3px) rotate(0deg) scale(0.985);
  text-shadow:
    1px 1px 0 var(--accent-block),
    2px 2px 0 rgba(32, 27, 25, 0.32);
}
@media (max-width: 720px) {
  .verb--letters .letter-3d {
    text-shadow:
      1px 1px 0 var(--accent-block),
      2px 2px 0 var(--surface-deep),
      4px 4px 0 rgba(32, 27, 25, 0.35);
  }
}
@media (prefers-reduced-motion: reduce) {
  .verb--letters .letter-3d:hover,
  .verb--letters .letter-3d:active {
    transform: none;
  }
}

/* LETTER INTERACTIONS — hover lift, click press, tactile rows */
.verb,
.display-2,
.display-3,
.h2,
.price-slab__main,
.price-slab__sub,
.country-row__name,
.country-row__price,
.plan-row__data,
.plan-row__price,
.faq summary {
  transition:
    transform var(--dur-fast) var(--easing-cut),
    text-shadow var(--dur-fast) var(--easing-cut),
    filter var(--dur-fast) var(--easing-cut);
  will-change: transform, text-shadow;
}

@media (hover: hover) and (pointer: fine) {
  .hero-punch .verb:hover,
  .display-2:hover,
  .display-3:hover,
  .h2:hover,
  .price-slab__main:hover,
  .price-slab__sub:hover {
    transform: translate(-3px, -3px) rotate(-0.35deg);
    filter: saturate(1.08);
    text-shadow:
      2px 2px 0 var(--accent-block),
      5px 5px 0 var(--surface-deep),
      8px 8px 0 rgba(32, 27, 25, 0.40),
      13px 15px 0 rgba(32, 27, 25, 0.12);
  }

  .country-row:hover .country-row__name,
  .country-row:hover .country-row__price,
  .plan-row:hover .plan-row__data,
  .plan-row:hover .plan-row__price,
  .faq summary:hover {
    transform: translate(-2px, -2px);
    text-shadow:
      1px 1px 0 var(--accent-block),
      3px 3px 0 var(--surface-deep),
      5px 5px 0 rgba(32, 27, 25, 0.34);
  }
}

.verb:active,
.display-2:active,
.display-3:active,
.h2:active,
.price-slab__main:active,
.price-slab__sub:active,
.country-row:active .country-row__name,
.country-row:active .country-row__price,
.plan-row:active .plan-row__data,
.plan-row:active .plan-row__price,
.faq summary:active {
  transform: translate(2px, 2px) scale(0.995);
  text-shadow:
    1px 1px 0 rgba(32, 27, 25, 0.22),
    2px 2px 0 rgba(32, 27, 25, 0.16);
}

.country-row,
.plan-row,
.cta-ribbon,
.vs-link,
.faq summary {
  transition:
    transform var(--dur-fast) var(--easing-cut),
    box-shadow var(--dur-fast) var(--easing-cut),
    background-color var(--dur-fast) var(--easing-cut),
    color var(--dur-fast) var(--easing-cut);
}

@media (hover: hover) and (pointer: fine) {
  .country-row:hover,
  .plan-row:hover {
    transform: translate(-4px, -4px);
    box-shadow: 6px 6px 0 var(--ink-primary);
  }
  .cta-ribbon:hover {
    transform: translateY(-3px);
    box-shadow: 0 -6px 0 var(--ink-primary), 0 -12px 0 rgba(32, 27, 25, 0.18);
  }
  .vs-link:hover {
    transform: translateY(-1px);
    text-shadow: 1px 1px 0 var(--accent-block), 2px 2px 0 rgba(0,0,0,0.35);
  }
}

.country-row:active,
.plan-row:active,
.cta-ribbon:active,
.vs-link:active,
.faq summary:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink-primary);
}

.block {
  transition:
    transform var(--dur-fast) var(--easing-cut),
    box-shadow var(--dur-fast) var(--easing-cut),
    background-color var(--dur-fast) var(--easing-cut);
  box-shadow: 2px 2px 0 var(--surface-deep);
}

@media (hover: hover) and (pointer: fine) {
  .verb:hover .block,
  .display-2:hover .block,
  .display-3:hover .block,
  .h2:hover .block,
  .country-row:hover .block,
  .plan-row:hover .block,
  .cta-ribbon:hover .block,
  .vs-link:hover .block {
    transform: translate(-2px, -2px) rotate(3deg);
    box-shadow: 4px 4px 0 var(--surface-deep);
    background: #ddff54;
  }
}

.verb:active .block,
.display-2:active .block,
.display-3:active .block,
.h2:active .block,
.country-row:active .block,
.plan-row:active .block,
.cta-ribbon:active .block,
.vs-link:active .block {
  transform: translate(1px, 1px) scale(0.96);
  box-shadow: 1px 1px 0 var(--surface-deep);
}

@media (prefers-reduced-motion: reduce) {
  .country-row:hover,
  .plan-row:hover,
  .cta-ribbon:hover,
  .vs-link:hover,
  .hero-punch .verb:hover,
  .display-2:hover,
  .display-3:hover,
  .h2:hover,
  .price-slab__main:hover,
  .price-slab__sub:hover {
    transform: none;
  }
}

/* BLOCK — the brand atom */
.block {
  display: inline-block;
  background: var(--accent-block);
  vertical-align: text-bottom;
  border-radius: 0;
  border: 0;
  flex-shrink: 0;
}
.block[data-size="sm"] { width: 12px; height: 12px; }
.block[data-size="md"] { width: 0.6em; height: 0.6em; vertical-align: -0.04em; }
.block[data-size="lg"] { width: 96px; height: 96px; }
.block[data-size="cta"] {
  width: auto; padding: 14px 22px; height: auto;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-primary);
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--space-tap-min);
}

/* VERB-STRIP HEADER — the verb-as-nav primitive */
.verb-strip {
  display: flex; align-items: center; gap: var(--space-md);
  background: var(--surface-ink); color: var(--ink-on-ink);
  padding: 14px var(--container-pad);
  font-family: var(--mono); font-size: var(--t-mono-strip);
  letter-spacing: 0.18em; text-transform: uppercase;
  position: sticky; top: 0; z-index: 30;
  border-bottom: 0;
}
.vs-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-height: var(--space-tap-min); }
.vs-link[aria-current="page"] .block { background: var(--ink-on-ink); }
.vs-link:hover .block { transform: translateY(-2px); transition: transform var(--dur-fast) var(--easing-cut); }
.vs-link:focus-visible { outline: 3px solid var(--accent-block); outline-offset: 4px; }
.vs-burger { display: none; margin-left: auto; font-size: 24px; min-width: var(--space-tap-min); min-height: var(--space-tap-min); }

@media (max-width: 720px) {
  .verb-strip { gap: var(--space-sm); padding: 10px var(--container-pad); }
  .vs-link:not(:first-child):not(.vs-cta) { display: none; }
  .vs-burger { display: inline-flex; align-items: center; justify-content: center; }
}

/* HERO PUNCH — full-bleed saturated red */
.hero-punch {
  background: var(--surface);
  color: var(--ink-primary);
  padding: var(--space-hero) var(--container-pad) var(--space-lg);
  position: relative;
  overflow: hidden;
}
.hero-punch__inner { max-width: var(--container-w); margin: 0 auto; }
.hero-punch__sub {
  font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.18em; text-transform: uppercase;
  margin-top: var(--space-md);
  color: var(--ink-primary);
}

/* SECTIONS */
.section { padding: var(--space-xl) var(--container-pad); }
.section--cream { background: var(--surface-alt); color: var(--ink-on-cream); }
.section--cream-warm { background: var(--surface-warm); color: var(--ink-on-cream); }
.section--punch { background: var(--surface); color: var(--ink-primary); }
.section--ink { background: var(--surface-ink); color: var(--ink-on-ink); }
.section__inner { max-width: var(--container-w); margin: 0 auto; }
.section__head { margin-bottom: var(--space-lg); }

/* PROOF SLAB — flat-typographic statements with sources */
.proof-row { padding: var(--space-md) 0; border-bottom: var(--border-w) solid var(--border-on-cream); }
.proof-row:last-child { border-bottom: 0; }
.proof-row .h2 { display: flex; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap; }
.proof-row__src { font-family: var(--mono); font-size: var(--t-mono); color: var(--ink-secondary); margin-top: var(--space-xs); text-transform: uppercase; letter-spacing: 0.1em; }

/* ON ARRIVAL — three verb steps */
.arrival { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.arrival__step .display-3 { color: var(--ink-on-cream); }
.arrival__step .display-3 .block { background: var(--accent-block); }
.arrival__step p { font-family: var(--mono); font-size: var(--t-mono); color: var(--ink-secondary); margin-top: var(--space-sm); text-transform: uppercase; letter-spacing: 0.1em; }
@media (max-width: 720px) { .arrival { grid-template-columns: 1fr; gap: var(--space-md); } }

/* ANTI-LIST — what we don't do */
.anti-list {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md);
  font-family: var(--mono); font-size: var(--t-body-lg);
}
.anti-list li { padding: var(--space-md); border: 2px dashed currentColor; position: relative; padding-left: 64px; }
.anti-list li::before {
  content: "✕"; position: absolute; left: 22px; top: 18px;
  font-weight: 900; color: var(--accent-block); font-size: 32px; line-height: 1;
}
@media (max-width: 720px) { .anti-list { grid-template-columns: 1fr; gap: var(--space-sm); } }

/* COUNTRY-LIST — typographic destination list */
.country-list { border-top: 2px solid var(--ink-on-cream); margin: 0; }
.country-region { padding: var(--space-md) 0 var(--space-sm); }
.country-region .mono-eyebrow { color: var(--ink-on-cream); opacity: 0.5; }
.country-row {
  display: grid; grid-template-columns: 2fr 1fr 1fr auto;
  gap: var(--space-md); padding: var(--space-md) 0;
  border-bottom: 2px solid var(--border-on-cream);
  align-items: center;
  text-decoration: none; color: inherit;
  min-height: var(--space-tap-min);
}
.country-row:hover { background: var(--surface-warm); }
.country-row__name { font-family: var(--display); font-size: 22px; font-weight: 900; letter-spacing: -0.02em; }
.country-row__meta { font-family: var(--mono); font-size: var(--t-mono); color: var(--ink-secondary); text-transform: uppercase; letter-spacing: 0.1em; }
.country-row__price { font-family: var(--display); font-weight: 900; font-size: 22px; }
.country-row__buy { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }
@media (max-width: 720px) {
  .country-row { grid-template-columns: 1fr auto; grid-template-rows: auto auto; }
  .country-row__name { grid-column: 1; grid-row: 1; }
  .country-row__price { grid-column: 2; grid-row: 1; text-align: right; }
  .country-row__meta { grid-column: 1 / -1; grid-row: 2; }
  .country-row__buy { display: none; }
}

/* PRICING SLAB */
.price-slab { font-family: var(--display); text-align: center; }
.price-slab__main { font-size: clamp(48px, 8vw, 96px); line-height: 1; font-weight: 900; }
.price-slab__sub { font-size: clamp(20px, 2.6vw, 32px); margin-top: var(--space-sm); color: var(--ink-secondary); }

/* PLAN-ROW (country-detail) */
.plan-row {
  display: grid; grid-template-columns: 1fr 1.5fr 1fr auto;
  gap: var(--space-md); padding: var(--space-md);
  border-top: 2px solid var(--border-on-cream);
  align-items: center;
  text-decoration: none; color: inherit;
  min-height: 88px;
}
.plan-row:last-child { border-bottom: 2px solid var(--border-on-cream); }
.plan-row__data { font-family: var(--display); font-size: 28px; font-weight: 900; }
.plan-row__days { font-family: var(--mono); font-size: var(--t-mono); color: var(--ink-secondary); text-transform: uppercase; letter-spacing: 0.1em; }
.plan-row__price { font-family: var(--display); font-size: 28px; font-weight: 900; }
.plan-row[data-popular] { background: var(--accent-block); }
.plan-row[data-popular] .plan-row__days { color: var(--ink-primary); opacity: 0.8; }
@media (max-width: 720px) {
  .plan-row { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; }
  .plan-row__data { grid-column: 1; }
  .plan-row__price { grid-column: 2; text-align: right; }
  .plan-row__days { grid-column: 1 / -1; grid-row: 2; }
  .plan-row__buy { grid-column: 1 / -1; grid-row: 3; }
}

/* STATE-MACHINE CARD (install) */
.state-card {
  min-height: 70vh;
  display: grid;
  place-items: center;
  padding: var(--space-xl) var(--container-pad);
  text-align: left;
}
.state-card__inner { max-width: 600px; width: 100%; }
.state-card__steps { font-family: var(--mono); font-size: var(--t-body); margin-top: var(--space-md); counter-reset: step; }
.state-card__steps li { padding-left: 36px; position: relative; padding-block: 6px; }
.state-card__steps li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0;
  font-weight: 900; color: var(--ink-secondary);
}

/* SPINNER for install-loading */
.spinner {
  width: 56px; height: 56px;
  border: 4px solid var(--ink-on-cream);
  border-top-color: var(--accent-block);
  margin: 0 0 var(--space-md);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; border-top-color: var(--ink-on-cream); } }

/* FAQ accordion */
.faq { border-bottom: 2px solid var(--border-on-cream); padding: var(--space-md) 0; }
.faq summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; min-height: var(--space-tap-min); font-family: var(--display); font-size: 22px; font-weight: 900; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary [data-marker] { transition: transform var(--dur-mid) var(--easing-cut); }
.faq[open] summary [data-marker] { transform: rotate(45deg); }
.faq p { font-family: var(--mono); font-size: var(--t-body); margin: var(--space-md) 0 0; max-width: 64ch; }

/* ONE-LINE FOOTER */
.one-line-footer {
  background: var(--surface-ink); color: var(--ink-on-ink);
  padding: 16px var(--container-pad) calc(16px + env(safe-area-inset-bottom, 0));
  font-family: var(--mono); font-size: var(--t-mono-strip);
  letter-spacing: 0.18em; text-transform: uppercase;
  display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center;
}
.one-line-footer a { color: inherit; min-height: var(--space-tap-min); display: inline-flex; align-items: center; }

/* HELP SECTIONS */
.email-list, .where-we-live { font-family: var(--mono); font-size: var(--t-body-lg); line-height: 1.8; text-transform: uppercase; letter-spacing: 0.05em; }
.email-list a, .where-we-live a { color: inherit; }

/* ERROR SHELL (404) */
.err-shell { min-height: 70vh; display: grid; place-items: center; padding: var(--space-xl) var(--container-pad); text-align: center; }

/* FOCUS DISCIPLINE */
*:focus-visible { outline: 3px solid var(--accent-block); outline-offset: 4px; }

/* MOTION DISCIPLINE */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* HERO LEDE — short paragraph under the verb stack */
.hero-punch__lede {
  font-family: var(--mono);
  font-size: var(--t-body-lg);
  line-height: 1.45;
  max-width: 38ch;
  color: var(--ink-primary);
}
@media (max-width: 720px) {
  .hero-punch__lede { font-size: 17px; max-width: 30ch; }
}

/* COMPATIBILITY LIST — plain list, mono caps, hairline dividers */
.compat-list {
  list-style: none; padding: 0; margin: 0;
  font-family: var(--mono);
  font-size: var(--t-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.compat-list li {
  padding: 14px 0;
  border-bottom: 2px solid var(--border-on-cream);
  display: flex; align-items: center; gap: var(--space-sm);
}
.compat-list li:last-child { border-bottom: 0; }

/* SCROLL ANCHOR OFFSET — sticky verb-strip header is 56px */
[id="how"], [id="destinations"], [id="faq"] { scroll-margin-top: 80px; }



/* CLICKABLE TEXT — make real tap/click targets unmistakable */
a,
summary,
button {
  -webkit-tap-highlight-color: rgba(200, 255, 56, 0.35);
}

.vs-link,
.country-row__buy,
.plan-row__buy,
.mono-eyebrow a,
.mono-body a,
.one-line-footer a,
.cta-ribbon,
.faq summary {
  position: relative;
  text-decoration: none;
}

.mono-eyebrow a,
.mono-body a,
.one-line-footer a {
  color: inherit;
  font-weight: 900;
  background:
    linear-gradient(var(--accent-block), var(--accent-block)) 0 100% / 100% 0.38em no-repeat;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding-inline: 0.08em;
  transition:
    background-size var(--dur-fast) var(--easing-cut),
    color var(--dur-fast) var(--easing-cut),
    transform var(--dur-fast) var(--easing-cut),
    text-shadow var(--dur-fast) var(--easing-cut);
}

.country-row__buy,
.plan-row__buy {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  width: fit-content;
  padding: 0.48em 0.62em;
  background: var(--accent-block);
  color: var(--ink-primary);
  border: 2px solid var(--ink-primary);
  box-shadow: 3px 3px 0 var(--ink-primary);
  font-weight: 900;
}

.country-row__buy::after,
.plan-row__buy::after,
.mono-eyebrow a::after,
.mono-body a::after,
.one-line-footer a::after {
  content: "↗";
  display: inline-block;
  margin-left: 0.35em;
  font-weight: 900;
  transition: transform var(--dur-fast) var(--easing-cut);
}

.vs-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.34em;
  height: 0.26em;
  background: var(--accent-block);
  transform: scaleX(0.18);
  transform-origin: left center;
  transition: transform var(--dur-fast) var(--easing-cut), background-color var(--dur-fast) var(--easing-cut);
}
.vs-link[aria-current="page"]::after { transform: scaleX(1); background: var(--ink-on-ink); }

.faq summary {
  padding: 0.18em 0.28em;
  background:
    linear-gradient(var(--accent-block), var(--accent-block)) 0 100% / 0% 0.34em no-repeat;
}
.faq summary::after {
  content: "TAP";
  margin-left: auto;
  margin-right: 0.85em;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  background: var(--ink-primary);
  color: var(--ink-on-ink);
  padding: 0.35em 0.5em;
}
.faq[open] summary::after { content: "OPEN"; background: var(--accent-block); color: var(--ink-primary); }

@media (hover: hover) and (pointer: fine) {
  .mono-eyebrow a:hover,
  .mono-body a:hover,
  .one-line-footer a:hover {
    background-size: 100% 100%;
    color: var(--ink-primary);
    transform: translate(-2px, -2px);
    text-shadow: 1px 1px 0 rgba(32, 27, 25, 0.16);
  }
  .mono-eyebrow a:hover::after,
  .mono-body a:hover::after,
  .one-line-footer a:hover::after,
  .country-row:hover .country-row__buy::after,
  .plan-row:hover .plan-row__buy::after {
    transform: translate(3px, -3px);
  }
  .country-row:hover .country-row__buy,
  .plan-row:hover .plan-row__buy {
    background: var(--ink-primary);
    color: var(--ink-on-ink);
    border-color: var(--accent-block);
    box-shadow: 4px 4px 0 var(--accent-block);
  }
  .vs-link:hover::after { transform: scaleX(1); }
  .faq summary:hover { background-size: 100% 0.34em; }
}

.country-row:active .country-row__buy,
.plan-row:active .plan-row__buy,
.mono-eyebrow a:active,
.mono-body a:active,
.one-line-footer a:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink-primary);
}

/* BUY BADGE CLEANUP — hide the brand atom inside green buttons.
   On identical green background it rendered as a stray red L/angle shadow. */
.country-row__buy .block,
.plan-row__buy .block {
  display: none;
}

.cta-ribbon {
  text-shadow: 1px 1px 0 rgba(32, 27, 25, 0.22);
  letter-spacing: 0.12em;
}
.cta-ribbon::after {
  content: "  →";
  font-weight: 900;
}

/* UTILITIES */
.u-mt-md { margin-top: var(--space-md); }
.u-mt-lg { margin-top: var(--space-lg); }
.u-text-center { text-align: center; }
.u-max-prose { max-width: 64ch; }


/* INTERACTION RULE: non-clickable typography must not move */
.verb,
.verb--letters .letter-3d,
.display-2,
.display-3,
.h2,
.price-slab__main,
.price-slab__sub {
  cursor: default;
}

@media (hover: hover) and (pointer: fine) {
  .hero-punch .verb:hover,
  .verb--letters .letter-3d:hover,
  .display-2:hover,
  .display-3:hover,
  .h2:hover,
  .price-slab__main:hover,
  .price-slab__sub:hover {
    transform: none;
    filter: none;
  }

  .verb:hover .block,
  .display-2:hover .block,
  .display-3:hover .block,
  .h2:hover .block {
    transform: none;
  }
}

.verb:active,
.verb--letters .letter-3d:active,
.display-2:active,
.display-3:active,
.h2:active,
.price-slab__main:active,
.price-slab__sub:active {
  transform: none;
}

.verb:active .block,
.display-2:active .block,
.display-3:active .block,
.h2:active .block {
  transform: none;
}


/* ON-SITE DEVICE CHECK */
.compat-check {
  border: 2px solid var(--ink-primary);
  background: var(--surface-cream);
  box-shadow: 6px 6px 0 var(--accent-block);
  padding: var(--space-md);
  max-width: 760px;
}
.compat-check__button,
.compat-check__cta {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.72em 0.9em;
  background: var(--accent-block);
  color: var(--ink-primary);
  border: 2px solid var(--ink-primary);
  box-shadow: 3px 3px 0 var(--ink-primary);
  font-family: var(--display);
  font-size: 20px;
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
}
.compat-check__result {
  margin-top: var(--space-md);
  font-family: var(--mono);
  font-size: var(--t-body);
  line-height: 1.55;
  max-width: 64ch;
}
.compat-check__result strong {
  font-family: var(--display);
  font-size: 24px;
  text-transform: uppercase;
}
.compat-check__result[data-state="ok"] strong { color: var(--green); }
.compat-check__cta { margin-top: var(--space-sm); }
.compat-check__button:hover,
.compat-check__cta:hover {
  background: var(--ink-primary);
  color: var(--ink-on-ink);
  border-color: var(--accent-block);
  box-shadow: 4px 4px 0 var(--accent-block);
}

/* QuiqSim multilingual controls */
.lang-switcher{display:flex;gap:.35rem;align-items:center;margin-left:auto;margin-right:.75rem}
.lang-switcher button{font:inherit;font-size:.72rem;letter-spacing:.06em;border:1px solid currentColor;background:transparent;color:inherit;border-radius:999px;padding:.22rem .45rem;cursor:pointer}
.lang-switcher button[aria-pressed="true"]{background:var(--ink,#111);color:var(--cream,#fff)}
@media (max-width:720px){.lang-switcher{gap:.2rem;margin-right:.35rem}.lang-switcher button{font-size:.65rem;padding:.2rem .35rem}}

/* ─── L3-STYLE MAKEOVER OVERRIDE v2 (2026-05-19) ─── */
/* Comprehensive palette inversion using L3 (canonical logo) treatment.
   Orange dominant, cream wordmark color, lime block-shadow stays as accent. */
:root {
  --surface-alt:     #E84D2A;
  --surface-warm:    #C8401E;
  --ink-on-cream:    oklch(0.94 0.02 80);
  --ink-on-ink:      oklch(0.94 0.02 80);
  --border-on-cream: rgba(255, 255, 255, 0.18);
}
body {
  background: #E84D2A !important;
  color: oklch(0.94 0.02 80) !important;
}

/* Hero verb ("GET DATA NOW") — cream text with lime block-shadow */
.verb, .hero-punch .verb, .display-2, .display-3 {
  color: oklch(0.94 0.02 80) !important;
}

/* All major headings get cream */
h1, h2, h3, h4, .h2, .h3, .mono-eyebrow, .mono-strip {
  color: oklch(0.94 0.02 80) !important;
}

/* Mono captions / eyebrows that contrast against orange */
.mono-eyebrow, .mono-strip, .mono-body {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Card-style "islands" stay cream paper for contrast */
.card, .pricing-card, .pricing-tier, .step-card, .testimonial,
.cta-card, .feature-card, .install-card {
  background: oklch(0.94 0.02 80) !important;
  color: oklch(0.20 0.02 30) !important;
}
.card h1, .card h2, .card h3, .card p,
.pricing-card h1, .pricing-card h2, .pricing-card h3, .pricing-card p,
.cta-card h1, .cta-card h2, .cta-card h3, .cta-card p {
  color: oklch(0.20 0.02 30) !important;
}

/* Primary CTAs flip to lime-on-ink for high contrast */
.btn-primary, .btn-cta, button.primary {
  background: #C8FF38 !important;
  color: oklch(0.18 0.01 30) !important;
}

/* Secondary CTAs cream-on-darker-orange */
.btn, .btn-secondary {
  background: oklch(0.94 0.02 80) !important;
  color: #E84D2A !important;
  border-color: oklch(0.94 0.02 80) !important;
}

/* Block-shadow effect stays lime — applies wherever .has-block-shadow or
   .verb-shadow is present, plus the hero verb gets it natively */
.verb, .hero-punch .verb {
  text-shadow:
    2px 2px 0 #C8FF38,
    4px 4px 0 #C8FF38,
    6px 6px 0 #C8FF38,
    8px 8px 0 #C8FF38 !important;
}

/* Footer separates with deeper orange */
footer { background: #C8401E !important; color: oklch(0.94 0.02 80) !important; }

/* Borders on orange backgrounds become subtle white */
hr, .divider { border-color: rgba(255, 255, 255, 0.2) !important; }