/* =========================================================================
   Agency site — homepage stylesheet.

   DESIGN DIRECTION: arcade cabinet, not press room.

   This is deliberately a separate design system from css/style.css (the
   campaign engine). The engine ships client palettes on dark grounds; the
   agency shell is our own brand — the deck palette (indigo, cream, orange,
   yellow, turquoise) set neubrutalist: thick outlines, hard offset shadows,
   big flat colour fields, chunky rounded display type.

   Rules that keep it coherent:
     1. Palette is strictly the deck's. No magenta, no lime, nothing extra.
     2. Every surface that "lifts" does it with a hard offset shadow and a
        3px indigo outline. No blur, no gradients on the shell.
     3. Buttons are pressed, not hovered: hover moves them 2px into their
        shadow, :active sinks them fully. Never rely on hover alone.
     4. Numbered markers appear on #how (the one real sequence) and in the
        contact stepper. Don't add them elsewhere.
     5. Client campaigns (the comparator, the demo cards) keep their own
        colours and sit on neutral panels, so client colour still reads as
        content and not as decoration.
     6. Saturated colour needs an ink label: orange/yellow fills carry indigo
        text, never white or cream. Orange TEXT on light grounds uses
        --orange-ink (#c2410c); #ff6b3d fails contrast as text.

   Type: Fredoka (display) + Rubik (body), from the deck.

   ---- LEGACY REFERENCE (kept for future adjustments) ---------------------
   Until 2026-10-20 the shell was "warm ink on kraft", with no saturated
   colour of its own:
     fonts   Suez One (display, one weight) + Assistant (body)
     palette ink #17150f / #2b2720, paper #e8e3d7 / #ddd6c6 / #d3cab6,
             rule #c3baa4 / #b0a68c, mute #615a4c,
             accent deep pine #0f4d3a / #15664d on #f2efe6
     feel    flat, hairline rules, no shadows, no hover lifts, square-ish
   The old tokens are in :root below as --legacy-*; the old Google Fonts
   <link> is commented out in index.html. Recover from git history
   (commit 25b6da7) for the full previous stylesheet.
   ========================================================================= */

:root {
  /* --- Deck palette ---------------------------------------------------- */
  --indigo:    #1b1530;   /* dark ground, main text, outlines             */
  --indigo-2:  #2d2448;   /* cards on dark                                */
  --cream:     #fbf7f0;   /* main light ground                            */
  --cream-2:   #f4eee4;   /* secondary light ground                       */
  --white:     #fffdf9;   /* cards                                        */
  --orange:    #ff6b3d;   /* the hero accent — fills only                 */
  --orange-ink:#c2410c;   /* orange as TEXT on light grounds              */
  --yellow:    #ffc93c;   /* highlights, bold bands                       */
  --teal:      #2ec4b6;   /* secondary accent, focus on dark              */

  --text-2:    #4a4560;   /* body on light                                */
  --mute:      #6b6480;   /* footers, sources                             */
  --lav:       #cfc8e8;   /* body on dark                                 */
  --lav-2:     #a79fc2;   /* footers on dark                              */
  --beige:     #e8dfd2;   /* hairlines                                    */
  --beige-2:   #e2d6c4;
  --taupe:     #c9bba6;

  /* Semantic aliases — the rest of the file reads these. */
  --ink:       var(--indigo);
  --ink-2:     var(--text-2);
  --paper:     var(--cream);
  --paper-2:   var(--cream-2);
  --rule:      var(--beige-2);
  --rule-2:    var(--taupe);

  /* --- Arcade devices -------------------------------------------------- */
  --bw:        3px;                          /* outline weight            */
  --sh:        5px 5px 0 var(--indigo);      /* resting hard shadow       */
  --sh-lg:     8px 8px 0 var(--indigo);
  --r:         14px;                         /* controls                  */
  --r-lg:      22px;                         /* cards, panels             */
  --r-pill:    999px;
  --ease:      cubic-bezier(.33, .1, .25, 1);

  /* --- Type ------------------------------------------------------------ */
  --font-display: "Fredoka", "Rubik", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Rubik", "Segoe UI", system-ui, -apple-system, sans-serif;
  --w-display:    700;

  /* Scale — 17px body. 17 / 21 / 26 / 33 / 42 / 54 / 68 */
  --t-body: 17px;
  --t-1:    21px;
  --t-2:    26px;
  --t-3:    33px;
  --t-4:    42px;
  --t-5:    54px;
  --t-6:    68px;

  --gut:    clamp(18px, 4vw, 34px);

  /* --- Legacy (unused; see header) ------------------------------------- */
  --font-display-legacy: "Suez One", "Assistant", Georgia, serif;
  --font-body-legacy:    "Assistant", "Segoe UI", system-ui, sans-serif;
  --legacy-ink:      #17150f;
  --legacy-ink-2:    #2b2720;
  --legacy-paper:    #e8e3d7;
  --legacy-paper-2:  #ddd6c6;
  --legacy-paper-3:  #d3cab6;
  --legacy-rule:     #c3baa4;
  --legacy-rule-2:   #b0a68c;
  --legacy-mute:     #615a4c;
  --legacy-mark:     #0f4d3a;
  --legacy-mark-2:   #15664d;
  --legacy-mark-ink: #f2efe6;
}

* { box-sizing: border-box; }

/* A display declaration beats the hidden attribute, so anything toggled with
   el.hidden needs this or it renders at rest. (.thanks is display:grid.) */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 400;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: inherit; }

.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--gut);
}
.wrap--narrow { max-width: 680px; }

/* =========================================================================
   Type

   Fredoka is a variable font, so display weight is set once (--w-display)
   rather than faux-bolded per rule. Hebrew glyphs fall back to Rubik at the
   same weight if Fredoka's subset lacks them.
   ========================================================================= */

.display {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  letter-spacing: 0;           /* Hebrew display type is never tracked */
  line-height: 1.08;
}

.h2 {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: clamp(var(--t-3), 4.6vw, var(--t-4));
  letter-spacing: 0;
  line-height: 1.14;
  margin: 0 0 14px;
  max-width: 30ch;          /* headlines break early; they are not paragraphs */
  text-wrap: balance;       /* no single word orphaned on the last line */
}

.lede {
  max-width: 64ch;
  margin: 0 0 40px;
  font-size: var(--t-1);
  line-height: 1.6;
  color: var(--ink-2);
}
.lede b { font-weight: 600; color: var(--ink); }

.tag {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: var(--orange-ink);
}

.note {
  margin: 24px 0 0;
  font-size: 15px;
  color: var(--mute);
}

code {
  padding: 2px 8px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--beige);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: .86em;
  direction: ltr;
  display: inline-block;
}

/* =========================================================================
   Buttons — pressed, not hovered.

   Rest: 3px outline + hard shadow. Hover: slides 2px into the shadow.
   Active: sinks flat. Touch and keyboard get the same states (:active and
   :focus-visible), so nothing depends on a mouse. 48px minimum height.
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 11px 26px;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  box-shadow: 4px 4px 0 var(--ink);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), background .12s var(--ease);
}
.btn:hover  { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }

.btn--primary { background: var(--orange); color: var(--indigo); }
.btn--primary:hover { background: #ff7d55; }

.btn--ghost { background: var(--white); color: var(--ink); }
.btn--ghost:hover { background: var(--yellow); }

.btn--sm { min-height: 44px; padding: 8px 18px; font-size: 15px; box-shadow: 3px 3px 0 var(--ink); }
.btn--lg { min-height: 56px; padding: 14px 34px; font-size: var(--t-1); }
.btn--block { width: 100%; }

/* =========================================================================
   Accessibility floor
   ========================================================================= */

.skip {
  position: absolute;
  z-index: 100;
  inset-inline-start: var(--gut);
  top: 0;
  transform: translateY(-120%);
  padding: 12px 22px;
  border: var(--bw) solid var(--ink);
  border-radius: 0 0 var(--r) var(--r);
  background: var(--yellow);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  transition: transform .18s var(--ease);
}
.skip:focus-visible { transform: translateY(0); }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--indigo);
  outline-offset: 3px;
}
/* Indigo rings vanish on indigo grounds — turquoise there (7:1). */
.section--ink a:focus-visible,
.section--ink button:focus-visible,
.cmp a:focus-visible,
.cmp [tabindex]:focus-visible,
.contact a:focus-visible,
.contact button:focus-visible,
.contact input:focus-visible,
.contact textarea:focus-visible,
.foot a:focus-visible {
  outline-color: var(--teal);
}

/* =========================================================================
   Nav
   ========================================================================= */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px var(--gut);
  background: var(--paper);
  border-bottom: var(--bw) solid var(--ink);
}

.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--t-2);
  line-height: 1;
  text-decoration: none;
}
/* The mark: a pressed arcade button. */
.nav__logo::after {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 2px 2px 0 var(--ink);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-inline-start: auto;
  font-size: 16px;
  font-weight: 500;
}

/* The CTA clone that js/site.js appends for the mobile panel. It must never
   appear on desktop, where the real .nav__cta is already in the bar. */
.nav__links .btn--mobile { display: none; }
.nav__links a {
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 3px solid transparent;
  transition: border-color .15s var(--ease);
}
.nav__links a:hover { border-bottom-color: var(--orange); }

.nav__burger {
  display: none;
  flex: none;
  width: 46px;
  height: 46px;
  padding: 13px 10px;
  border: var(--bw) solid var(--ink);
  border-radius: 12px;
  background: var(--white);
  box-shadow: 3px 3px 0 var(--ink);
}
.nav__burger:active { transform: translate(3px, 3px); box-shadow: none; }
.nav__burger span {
  display: block;
  height: 3px;
  background: var(--ink);
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.nav__burger span + span { margin-top: 4px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================================
   Hero — yellow playfield.

   A grid-paper yellow field, a centred outlined headline with one phrase in
   an orange speech bubble, and arcade stickers in the margins. The
   comparator sits below in an indigo panel: the headline is the bold part,
   the comparator is the demonstration.
   ========================================================================= */

.hero {
  position: relative;
  overflow: hidden;
  padding: 116px 0 clamp(48px, 6vw, 76px);   /* top clears the corner stickers on phones */
  background-color: var(--yellow);
  background-image:
    linear-gradient(rgba(27, 21, 48, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27, 21, 48, .12) 1px, transparent 1px);
  background-size: 46px 46px;
  text-align: center;
}
@media (min-width: 1000px) {
  .hero { padding-top: 84px; }
}
.hero > .wrap { position: relative; z-index: 1; }

.hero__kicker {
  display: inline-block;
  margin: 0 0 22px;
  padding: 6px 20px;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--cream);
  box-shadow: 4px 4px 0 var(--ink);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.hero__title {
  margin: 0 auto 26px;
  font-size: clamp(var(--t-4), 8.2vw, 86px);
  max-width: 17ch;
  color: var(--indigo);
  text-shadow: 3px 3px 0 var(--cream);
}
/* Each sentence is a block so the bubble line stays on its own row. */
.hero__title span { display: block; }

/* The speech bubble: orange fill, indigo outline and shadow, a tail below. */
.hero__title .bubble {
  position: relative;
  display: inline-block;
  margin: .12em 0 .2em;
  padding: .02em .42em .1em;
  border: var(--bw) solid var(--ink);
  border-radius: 26px;
  background: var(--orange);
  box-shadow: 6px 6px 0 var(--ink);
  text-shadow: none;
  transform: rotate(-1.6deg);
}
.hero__title .bubble::after {
  content: "";
  position: absolute;
  bottom: -13px;
  inset-inline-end: 22%;
  width: 22px;
  height: 22px;
  background: var(--orange);
  border-right: var(--bw) solid var(--ink);
  border-bottom: var(--bw) solid var(--ink);
  transform: rotate(45deg);
}

.hero__sub {
  max-width: 52ch;
  margin: 0 auto 32px;
  font-size: clamp(var(--t-body), 2vw, var(--t-1));
  color: var(--ink);
}
.hero__sub b { font-weight: 700; }

.hero__cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

/* --- Stickers: decorative, aria-hidden, no assets (SVG + CSS only). ---- */
.stickers { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sticker { position: absolute; }

.sticker--pad {
  top: 14px;
  inset-inline-start: 14px;
  width: 86px;
  transform: rotate(-10deg);
}
.sticker--pad svg { display: block; width: 100%; height: auto; overflow: visible; }

.sticker--badge {
  top: 14px;
  inset-inline-end: 14px;
  display: grid;
  place-content: center;
  width: 82px;
  height: 82px;
  border: var(--bw) solid var(--ink);
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 4px 4px 0 var(--ink);
  font-family: var(--font-display);
  font-weight: var(--w-display);
  line-height: 1;
  text-align: center;
  transform: rotate(10deg);
}
.sticker--badge::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 2px dashed var(--ink);
  border-radius: 50%;
}
.sticker--badge b { font-size: 34px; font-weight: inherit; }
.sticker--badge small { margin-top: 2px; font-size: 13px; font-weight: 600; }

/* Four-point sparkles cut with clip-path — no image files. */
.sticker--spark {
  width: 26px;
  height: 26px;
  background: var(--indigo);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  display: none;
}
.sticker--spark.is-teal   { background: var(--teal); }
.sticker--spark.is-cream  { background: var(--cream); }

@media (min-width: 1000px) {
  .sticker--pad   { top: 52px; inset-inline-start: 4%; width: clamp(120px, 12vw, 176px); }
  .sticker--badge { top: 56px; inset-inline-end: 5%; width: clamp(104px, 10vw, 132px); height: clamp(104px, 10vw, 132px); }
  .sticker--badge b { font-size: clamp(44px, 4.4vw, 58px); }
  .sticker--badge small { font-size: 15px; }
  .sticker--spark { display: block; }
  .sticker--s1 { top: 40%; inset-inline-start: 3%; }
  .sticker--s2 { top: 24%; inset-inline-start: 19%; width: 18px; height: 18px; }
  .sticker--s3 { top: 46%; inset-inline-end: 4%; width: 32px; height: 32px; }
  .sticker--s4 { top: 18%; inset-inline-end: 20%; width: 20px; height: 20px; }
}

/* Two stickers move; nothing else on the page does. */
@media (prefers-reduced-motion: no-preference) {
  .sticker--pad   { animation: bob 4.2s ease-in-out infinite alternate; }
  .sticker--badge { animation: wiggle 3.4s ease-in-out infinite alternate; }
}
@keyframes bob    { from { transform: rotate(-10deg) translateY(0); }  to { transform: rotate(-6deg) translateY(-8px); } }
@keyframes wiggle { from { transform: rotate(10deg); }                 to { transform: rotate(4deg); } }

/* =========================================================================
   THE DEMONSTRATION — campaign comparator

   Two real client palettes meeting at a draggable divider. The product
   claim made physical: identical geometry, identical mechanic, and the only
   thing that changes across the seam is the skin. Rests at 50% and moves
   only on user input — drag, click, or arrow keys.

   Both panels are always fully rendered and laid out identically; the
   divider only clips. That is what makes the comparison honest.

   The panel around it is neutral indigo so the client colours stay content.
   ========================================================================= */

.cmp {
  margin: clamp(40px, 6vw, 64px) auto 0;
  padding: clamp(14px, 2.4vw, 26px);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-lg);
  background: var(--indigo);
  box-shadow: var(--sh-lg);
  color: var(--cream);
  text-align: start;
}

.cmp__label {
  display: inline-block;
  margin: 0 0 14px;
  padding: 4px 16px;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  background: var(--yellow);
  box-shadow: 3px 3px 0 var(--teal);
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: 19px;
  line-height: 1.4;
  color: var(--indigo);
}

.cmp__frame {
  position: relative;
  overflow: hidden;
  border: var(--bw) solid var(--cream);
  border-radius: 16px;
  aspect-ratio: 16 / 9;
  touch-action: none;          /* the divider owns horizontal gestures */
  user-select: none;
  cursor: ew-resize;
}

/* Each side paints its own client palette. --d1/--d2/--dbg come from the
   campaign configs, set inline on the element so the markup stays the single
   source of truth for a client's colours. */
.cmp__side {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  /* Each side must be its own stacking context, or .cmp__inner's z-index
     escapes into the frame and side A's wordmark paints over side B at every
     seam position ("PUPIZZA NOVA"). clip-path clips the element, not a child
     that has floated out of it. */
  isolation: isolate;
  background:
    radial-gradient(circle at 30% 26%, color-mix(in srgb, var(--d1) 52%, transparent), transparent 56%),
    radial-gradient(circle at 74% 76%, color-mix(in srgb, var(--d2) 38%, transparent), transparent 52%),
    var(--dbg);
}
/* The playfield grid, same cell size on both sides — the visual proof that
   the geometry is shared. */
.cmp__side::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg,  rgba(0,0,0,.14) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 1px, transparent 1px 44px);
}

/* Side A is the base layer: never clipped, always full-bleed. The modifier
   carries no style of its own — it exists so the pair reads as a pair. */
.cmp__side--a { clip-path: none; }

.cmp__side--b {
  clip-path: inset(0 0 0 var(--split, 50%));
}
/* RTL: the B panel is clipped from the logical start edge instead. */
[dir="rtl"] .cmp__side--b {
  clip-path: inset(0 var(--split, 50%) 0 0);
}

/* Content is pinned to each panel's own outer edge rather than centred, so a
   seam near the middle no longer slices both wordmarks at once. Side A reads
   from the start edge, side B from the end edge. */
.cmp__inner {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 12px;
  padding: clamp(18px, 4vw, 38px);
}
.cmp__side--b .cmp__inner { justify-items: end; text-align: end; }

/* The frame captures the pointer while dragging, which retargets the following
   click away from any link inside it. So nothing inside the frame is clickable:
   panel content is inert, and playing happens in .cmp__open below. */
.cmp__inner { pointer-events: none; }

/* One button per side, each sitting under the half it opens and carrying that
   campaign's own colour as its underline, so the row reads as a continuation
   of the frame. */
.cmp__open {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 16px;
}
.cmp__open-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 10px 18px;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  background: var(--cream);
  box-shadow: 0 6px 0 var(--d1);
  color: var(--indigo);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), background .12s var(--ease);
}
.cmp__open-btn:hover  { background: var(--white); transform: translateY(3px); box-shadow: 0 3px 0 var(--d1); }
.cmp__open-btn:active { transform: translateY(6px); box-shadow: 0 0 0 var(--d1); }

.cmp__items {
  display: flex;
  gap: clamp(8px, 2.4vw, 22px);
}
.cmp__items i {
  font-style: normal;
  font-size: clamp(30px, 6vw, 58px);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.45));
}

/* Client wordmarks: the client's content, so not restyled with our devices. */
.cmp__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: clamp(var(--t-1), 3.2vw, var(--t-3));
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.6);
}
.cmp__vert {
  font-size: 14px;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--d1) 82%, black);
  color: #fff;
}

/* The handle. A full-height rule with a grip at the midpoint. */
.cmp__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  inset-inline-start: var(--split, 50%);
  width: 4px;
  margin-inline-start: -2px;           /* centre the rule on the seam,
                                          direction-agnostic (translateX is
                                          not: +X stays physical in RTL) */
  background: var(--cream);
  pointer-events: none;
}
.cmp__grip {
  position: absolute;
  top: 50%;
  inset-inline-start: -24px;           /* half the grip, off the 4px rule */
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: var(--bw) solid var(--ink);
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 3px 3px 0 var(--ink);
  color: var(--ink);
  font-size: 15px;
  letter-spacing: -.1em;
  pointer-events: auto;
  cursor: ew-resize;
}
.cmp__frame:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
.cmp__frame:focus-visible .cmp__grip { outline: 3px solid var(--teal); outline-offset: 3px; }

.cmp__caption {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  justify-content: space-between;
  align-items: baseline;
  margin: 16px 0 0;
  font-size: 15px;
  color: var(--lav);
}
.cmp__caption b { font-weight: 600; color: var(--cream); }
.cmp__hint { color: var(--yellow); font-weight: 600; }

/* =========================================================================
   Sections — flat colour bands separated by a 3px indigo rule.

   Rhythm down the page: yellow hero / ink / cream / soft / yellow / cream /
   soft / ink / cream / cream / yellow / ink footer.
   ========================================================================= */

.section {
  padding: clamp(54px, 7vw, 90px) 0;
  border-top: var(--bw) solid var(--ink);
}
.section--tight { padding: clamp(36px, 5vw, 56px) 0; }
.section--flush { border-top: 0; }

.section--soft   { background: var(--cream-2); }
.section--yellow { background: var(--yellow); }
.section--ink    { background: var(--indigo); color: var(--cream); }
.section--ink .h2 { color: var(--cream); }
.section--ink .lede { color: var(--lav); }
.section--ink .lede b { color: var(--cream); }

/* The agency's pain, set as a pull quote on the dark band. */
.pull {
  margin: 0;
  max-width: 24ch;
}
.pull__q {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: clamp(var(--t-3), 5.4vw, var(--t-5));
  line-height: 1.14;
  letter-spacing: 0;
  margin: 0 0 24px;
  color: var(--cream);
}
.pull__body {
  max-width: 58ch;
  margin: 0;
  font-size: var(--t-1);
  color: var(--lav);
}

/* =========================================================================
   Value — three outlined cards, each with a palette-colour cap.
   ========================================================================= */

.offer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
  margin: 0;
}
.offer > div {
  position: relative;
  padding: 38px 24px 26px;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--sh);
  overflow: hidden;
}
.offer > div::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 14px;
  border-bottom: var(--bw) solid var(--ink);
  background: var(--orange);
}
.offer > div:nth-child(2)::before { background: var(--yellow); }
.offer > div:nth-child(3)::before { background: var(--teal); }

.offer dt {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--t-1);
  line-height: 1.2;
  margin: 0 0 10px;
}
.offer dd {
  margin: 0;
  font-size: 16px;
  color: var(--ink-2);
}
.offer dd b { font-weight: 600; color: var(--ink); }

/* =========================================================================
   Demo cards — the two campaigns not in the comparator.
   The preview carries the client's palette; everything around it is ours.
   ========================================================================= */

.demos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 28px;
}

.demo {
  display: flex;
  flex-direction: column;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}

.demo__preview {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  text-decoration: none;
  border-bottom: var(--bw) solid var(--ink);
  background:
    radial-gradient(circle at 28% 24%, color-mix(in srgb, var(--d1) 55%, transparent), transparent 58%),
    radial-gradient(circle at 76% 74%, color-mix(in srgb, var(--d2) 40%, transparent), transparent 54%),
    var(--dbg);
  overflow: hidden;
}
.demo__preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg,  rgba(0,0,0,.14) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 1px, transparent 1px 44px);
}
.demo__items {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3vw, 26px);
  z-index: 1;
}
.demo__items i {
  font-style: normal;
  font-size: clamp(26px, 5vw, 42px);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.45));
}

.demo__body {
  display: grid;
  gap: 8px;
  padding: 20px 22px 24px;
  flex: 1;                     /* fill the card so the button can bottom out */
  align-content: start;
}
.demo__name {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--t-2);
  line-height: 1.15;
  margin: 0;
}
.demo__meta { margin: 0; font-size: 14px; color: var(--mute); }
.demo__hook { margin: 0 0 8px; font-size: 16px; color: var(--ink-2); }
/* Same reason as .tier .btn: hooks differ in length, so the buttons need the
   slack above them to stay on one baseline across the row. */
.demo__body .btn { margin-top: auto; }

/* =========================================================================
   Proof

   Sits under the demos because it explains what the visitor just played.
   An indigo spec sheet: the register the claims need.
   ========================================================================= */

.proof {
  margin-top: clamp(36px, 5vw, 56px);
  padding: clamp(24px, 3.6vw, 36px);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-lg);
  background: var(--indigo);
  box-shadow: 8px 8px 0 var(--orange);
  color: var(--cream);
}
.proof__title {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--t-2);
  line-height: 1.15;
  margin: 0 0 22px;
  color: var(--cream);
}
.proof__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px 30px;
  margin: 0;
}
.proof__list dt {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--t-1);
  line-height: 1.2;
  color: var(--yellow);
  margin: 0 0 6px;
}
.proof__list dd { margin: 0; font-size: 15px; color: var(--lav); }

/* =========================================================================
   Stepped CTA — what happens after they click
   ========================================================================= */

.cta-steps {
  display: grid;
  gap: 14px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
  counter-reset: ctastep;
}
.cta-steps li {
  position: relative;
  padding-inline-start: 40px;
  font-size: 16px;
  color: var(--lav);
}
.cta-steps li b { color: var(--cream); font-weight: 600; }
.cta-steps li::before {
  counter-increment: ctastep;
  content: counter(ctastep);
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--teal);
  font-size: 14px;
  font-weight: 700;
  color: var(--indigo);
}

/* =========================================================================
   Margin model — on the yellow band: money is the loud part.
   ========================================================================= */

.split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}

.terms { margin: 0; padding: 0; list-style: none; }
.terms li {
  position: relative;
  padding: 15px 0 15px 0;
  padding-inline-start: 34px;
  border-bottom: 2px solid rgba(27, 21, 48, .22);
  font-size: 16px;
  color: var(--ink);
}
.terms li:first-child { border-top: 2px solid rgba(27, 21, 48, .22); }
/* A small pressed-button bullet. */
.terms li::before {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  top: 21px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 2px 2px 0 var(--ink);
}
.terms b { font-weight: 700; }

.plays {
  margin: 0;
  padding: 28px 26px;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--sh-lg);
}
.plays h3 {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--t-2);
  margin: 0 0 18px;
}
.plays dt { font-weight: 600; font-size: 16px; }
.plays dd { margin: 3px 0 16px; font-size: 15px; color: var(--ink-2); }
.plays dd:last-child { margin-bottom: 0; }

/* =========================================================================
   How it works — numbered markers are earned here: the one real sequence.
   ========================================================================= */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.step {
  padding: 24px 22px 26px;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--sh);
}
.step__n {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  border: var(--bw) solid var(--ink);
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--t-2);
  line-height: 1;
  color: var(--indigo);
}
.step h3 { margin: 0 0 8px; font-size: var(--t-1); font-family: var(--font-display); font-weight: var(--w-display); line-height: 1.2; }
.step p { margin: 0; font-size: 15px; color: var(--ink-2); }

/* =========================================================================
   Mechanics — two status cards. Teal = sellable now, yellow = in progress;
   that distinction is the only information here, so the colour encodes it.
   ========================================================================= */

.mechs { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.mechs > div {
  position: relative;
  padding: 36px 24px 12px;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--sh);
  overflow: hidden;
}
.mechs > div::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 14px;
  border-bottom: var(--bw) solid var(--ink);
  background: var(--teal);
}
.mechs > div:nth-child(2)::before { background: var(--yellow); }
.mechs h3 {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--t-2);
  margin: 0 0 4px;
}
.mechs > div > p { margin: 0 0 16px; font-size: 15px; color: var(--mute); }

.mech-list { margin: 0; padding: 0; list-style: none; }
.mech-list li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  padding: 14px 0;
  border-top: 2px solid var(--beige-2);
  font-size: 16px;
  font-weight: 500;
}
.mech-list i { font-style: normal; font-size: 24px; line-height: 1.2; }
.mech-list span { display: block; font-size: 14px; font-weight: 400; color: var(--mute); }

/* =========================================================================
   Pricing — three cards on the dark band. The agency tier leads by position,
   by the orange shadow, and by having the only filled button.
   ========================================================================= */

.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
  gap: 30px;
}
.tier {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 24px;
  border: var(--bw) solid var(--cream);
  border-radius: var(--r-lg);
  background: var(--cream);
  box-shadow: 7px 7px 0 var(--yellow);
  color: var(--ink);
}
.tier--lead { box-shadow: 7px 7px 0 var(--orange); }

.tier__who {
  align-self: flex-start;
  padding: 2px 14px;
  border: 2px solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--teal);
  font-size: 14px;
  font-weight: 600;
  color: var(--indigo);
}
.tier--lead .tier__who { background: var(--orange); }
.tier h3 {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--t-2);
  margin: 12px 0 12px;
  line-height: 1.15;
}
.tier p { margin: 0 0 14px; font-size: 16px; color: var(--ink-2); }
.tier__fit { font-size: 14px; color: var(--mute); }
/* The auto margin sits on the button, not the fit line: the slack collects
   directly above the buttons so all three bottom out on the same baseline
   however much copy each tier carries. Full width so the row reads as a set. */
.tier .btn { margin: 18px 0 0; margin-top: auto; width: 100%; }
.tier .btn--ghost:hover { background: var(--yellow); }

/* =========================================================================
   Secondary audience (brands, not agencies)
   ========================================================================= */

.direct {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 28px clamp(22px, 3vw, 34px);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--sh);
}
.direct h2 {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--t-2);
  margin: 0 0 6px;
}
.direct p { margin: 0; max-width: 62ch; font-size: 16px; color: var(--ink-2); }

/* =========================================================================
   FAQ — each question is its own outlined card.
   ========================================================================= */

.faq {
  margin-bottom: 14px;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  background: var(--white);
  box-shadow: 4px 4px 0 var(--ink);
}
.faq[open] { background: var(--cream-2); }
.faq summary {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 12px 18px;
  font-size: var(--t-body);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "+";
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--yellow);
  font-weight: 700;
  line-height: 1;
}
.faq[open] summary::before { content: "–"; background: var(--orange); }
.faq p {
  margin: 0;
  padding: 0 18px 20px;
  padding-inline-start: 60px;
  max-width: 68ch;
  font-size: 16px;
  color: var(--ink-2);
}

/* =========================================================================
   Contact — an indigo card on the yellow band: the end of the argument.
   ========================================================================= */

.contact {
  padding: clamp(28px, 5vw, 52px);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-lg);
  background: var(--indigo);
  box-shadow: 8px 8px 0 var(--orange);
  color: var(--cream);
}
.contact .h2 { color: var(--cream); }
.contact .lede { color: var(--lav); margin-bottom: 26px; }
.contact .lede b { color: var(--cream); }

.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.field { display: grid; gap: 7px; }
.field__label { font-size: 14px; font-weight: 600; color: var(--lav); }
.field__opt { font-weight: 400; color: var(--lav-2); }

.field input,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: var(--bw) solid var(--lav-2);
  border-radius: var(--r);
  background: var(--indigo-2);
  color: var(--cream);
  font-size: 16px;              /* 16px stops iOS zoom-on-focus */
  font-family: inherit;
  resize: vertical;
  transition: border-color .14s var(--ease), background .14s var(--ease);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--lav-2); }
.field input:focus,
.field textarea:focus {
  border-color: var(--teal);
  background: var(--indigo-2);
}
.field.is-invalid input,
.field.is-invalid textarea { border-color: var(--orange); }

.field__err { display: none; font-size: 14px; font-style: normal; font-weight: 600; color: var(--orange); }
.field.is-invalid .field__err { display: block; }

/* On the dark card the primary button's ink shadow disappears, so it takes a
   yellow one; the ghost button reads as cream-on-indigo. */
.contact .btn { border-color: var(--cream); box-shadow: 4px 4px 0 var(--yellow); }
.contact .btn:hover  { box-shadow: 2px 2px 0 var(--yellow); }
.contact .btn:active { box-shadow: 0 0 0 var(--yellow); }

.form__legal { margin: 0; font-size: 13px; color: var(--lav-2); }

.thanks { display: grid; gap: 14px; justify-items: start; }
.thanks h3 {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--t-3);
  line-height: 1.15;
  margin: 0;
  color: var(--teal);
}
.thanks p { margin: 0; color: var(--lav); }

/* =========================================================================
   Footer
   ========================================================================= */

.foot {
  padding: 38px 0 46px;
  border-top: var(--bw) solid var(--ink);
  background: var(--indigo);
  color: var(--lav);
}
.foot .nav__logo { color: var(--cream); }
.foot__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 34px;
  align-items: baseline;
  justify-content: space-between;
}
.foot__tag { margin: 8px 0 0; font-size: 15px; color: var(--lav-2); }
.foot__links { display: flex; flex-wrap: wrap; gap: 20px; font-size: 15px; }
.foot__links a { text-decoration: none; padding: 4px 0; border-bottom: 3px solid var(--indigo-2); }
.foot__links a:hover { border-bottom-color: var(--orange); }
.foot__note { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--lav-2); }

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .direct { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 780px) {
  .nav { flex-wrap: wrap; }
  .nav__burger { display: block; }
  .nav__cta { display: none; }

  .nav__links {
    display: none;
    order: 3;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 10px 0 -12px;
    padding-bottom: 12px;
    border-top: 2px solid var(--ink);
    font-size: var(--t-body);
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 14px 0; border-bottom: 2px solid var(--beige-2); }
  .nav__links a:hover { border-bottom-color: var(--orange); }
  .nav__links .btn--mobile { display: inline-flex; margin-top: 16px; border-bottom: var(--bw) solid var(--ink); }
  .nav__links .btn--mobile:hover { border-bottom-color: var(--ink); }

  .cmp__frame { aspect-ratio: 4 / 5; }     /* portrait, so both sides stay legible */
  .cmp__caption { justify-content: flex-start; }

  /* Push the content clear of the vertically-centred grip. */
  .cmp__inner { align-content: start; padding-top: 26px; }

  /* Two buttons side by side get too narrow for the wordmarks; stack them. */
  .cmp__open { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 560px) {
  .form__row { grid-template-columns: 1fr; }
  .hero__cta .btn { width: 100%; }
  .cmp__items i { font-size: 30px; }
  .hero__title .bubble { box-shadow: 4px 4px 0 var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}