@font-face {
  font-family: Archivo;
  src: url('vendor/archivo-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --bg: #000000;
  --ink: #f4f3ef;
  --muted: #9a9c9f;
  --green: #00dd94;
  --line: #ffffff1a;
  --font: Archivo, 'Helvetica Neue', Arial, sans-serif;
  --nav-h: 72px;
  /* Type: ten steps, nothing between them. */
  --t-display: clamp(48px, 5.4vw, 78px);
  --t-headline: clamp(40px, 4vw, 58px);
  --t-title:   clamp(34px, 3.4vw, 52px);
  --t-lead:    clamp(22px, 2.1vw, 32px);
  --t-deck:    clamp(19px, 1.6vw, 23px);
  --t-body:    17px;
  --t-small:   15px;
  --t-micro:   12px;
  --t-fig:     clamp(64px, 9vw, 132px);
  --t-fig-sm:  clamp(48px, 5.6vw, 84px);
  /* Space: one 4px-based ramp. Every gap and margin is one of these. */
  --s1: 8px; --s2: 12px; --s3: 16px; --s4: 24px; --s5: 32px;
  --s6: 48px; --s7: 64px; --s8: 96px; --s9: 128px;
  /* Grey: three levels. Primary, secondary, carried-over. */
  --faint: #ffffff59;
  /* Paper: the light screens, pure white so the type pops. Ink and body grey for type on
     it; the green's deep shade for an accent word (about 4:1 on white, where the bright
     green manages 1.5:1). */
  --paper: #ffffff;
  --paper-ink: #151515;
  --paper-muted: #4d4f52;
  --green-ink: #008f5f;
  --paper-warm: #f4f3ef;
  --footer-h: 104px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
/* Scrolling. On a wide screen with a mouse or trackpad, site.js moves one section per
   gesture. A wide touch screen uses the browser's own snapping, one section at a time with
   the footer as the last stop. Phones scroll freely.
   Two layouts. Wide, the sticky stack: a landscape frame from 801px that is at least 540px
   tall (which leaves out every phone on its side), or any frame from 1025px. Stacked, plain
   flow: phones either way up, and tablets held upright. Every rule below that splits the
   two uses these queries. */
html { scroll-behavior: smooth; }
@media (min-width: 801px) and (orientation: landscape) and (min-height: 540px) and (pointer: coarse), (min-width: 1025px) and (pointer: coarse) {
  html { scroll-snap-type: y mandatory; }
  .snap, .band { scroll-snap-align: start; scroll-snap-stop: always; }
  .site-footer { scroll-snap-align: end; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, p { margin: 0; }
::selection { background: var(--green); color: var(--bg); }
a:focus-visible { outline: 2px solid var(--green); outline-offset: 6px; }

.wrap { width: min(1320px, 90vw); margin-inline: auto; }
.skip { position: fixed; top: -100px; left: 20px; z-index: 100; background: var(--ink); color: var(--bg); padding: var(--s2) var(--s3); }
.skip:focus { top: 14px; }
main:focus { outline: none; }

/* Buttons: green on black is the only pair. */
.btn {
  display: inline-flex; align-items: center;
  min-height: 52px; padding: 0 var(--s4);
  border-radius: 6px;
  background: var(--green); color: var(--bg);
  font-size: var(--t-small); font-weight: 500; letter-spacing: -.01em;
  border: 0; font-family: inherit; cursor: pointer;
  transition: filter .2s;
}
.btn:hover { filter: brightness(1.08); }
.btn:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.light-screen .btn:focus-visible, .card .btn:focus-visible { outline-color: var(--green-ink); }
.btn-small { min-height: 42px; padding: 0 var(--s3); white-space: nowrap; }

/* Nav: on from the first frame with the logo top left; the hero keeps its own large logo.
   The bottom line appears once the page moves, when something can pass under it. */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color .35s;
}
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav-row { display: flex; align-items: center; gap: var(--s5); height: var(--nav-h); }
.nav-mark img { width: 150px; height: auto; filter: brightness(0) invert(1); }
.nav-links { display: flex; gap: var(--s5); margin-left: auto; }
.nav-links a { font-size: var(--t-small); color: var(--muted); white-space: nowrap; transition: color .2s; }
.nav-links a:hover { color: var(--ink); }

/* Stage: the three opening screens, sticky and stacked, so each one slides up over the one
   before and stays while the next arrives. Clipped sideways only, which keeps sticky
   working, because the screens' backdrops run past the column edges. */
.stage { position: relative; z-index: 0; overflow-x: hidden; overflow-x: clip; }
/* One snap point per screen. They scroll normally while the screens stick. */
.snap { position: absolute; left: 0; top: calc(var(--n) * 100svh); width: 1px; height: 100svh; pointer-events: none; }
.screen {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  padding-top: var(--nav-h);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--s7);
  align-items: center;
}
.copy { max-width: 560px; }
/* The hero's two halves turn in toward the middle, like facing pages. The copy hinges on
   its outer edge, so it stays lined up under the nav logo, and sits high, its logo level
   with the top of the artwork. */
.hero-screen .copy { max-width: 620px; transform: translateY(-6svh) perspective(1400px) rotateY(4deg); transform-origin: 0 50%; }
.mark { width: 340px; height: auto; margin: 0 0 var(--s5) -6px; filter: brightness(0) invert(1); }
h1 {
  font-size: var(--t-display);
  font-weight: 450;
  letter-spacing: -.045em;
  line-height: 1.04;
  text-wrap: balance;
}
.accent { color: var(--green); }
.copy .btn { margin-top: var(--s5); min-height: 56px; padding: 0 var(--s5); font-size: var(--t-body); }
.visual { min-height: 60vh; display: grid; place-items: center; }

/* The cluster: six objects in a loose ring around black space, static. Real artwork and
   our objects on one stage. The markup order is the stacking order, back to front; depth
   sets the shadow and there is a 4 degree turn toward the copy, never a dimmer. */
.cluster {
  --turn: -4deg;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  width: min(100%, 600px);
  aspect-ratio: 1 / 1;
  perspective: 1400px;
}
.cluster-inner {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--turn) + var(--tilt-y))) rotateX(var(--tilt-x));
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.layer {
  position: absolute;
  left: var(--l); top: var(--t); width: var(--w);
  height: auto;
}
.layer[data-depth="0"] { filter: drop-shadow(0 24px 28px #000000cc); }
.layer[data-depth="1"] { filter: drop-shadow(0 18px 22px #000000bb); }
.layer[data-depth="2"] { filter: drop-shadow(0 14px 18px #000000aa); }
.layer[data-depth="3"] { filter: drop-shadow(0 12px 16px #000000aa); }
.rect { border-radius: 12px; display: block; }


@media (max-width: 1100px) {
  .screen { gap: var(--s5); }
  .mark { width: 250px; margin-bottom: var(--s4); }
}
@media (max-width: 800px), (max-width: 1024px) and (orientation: portrait), (max-width: 1024px) and (max-height: 539px) {
  .hero-screen .copy { transform: none; }
  .snap { display: none; }
  /* On a phone the screens stack in plain flow, each as tall as its content. Each is
     positioned, so its full-bleed backdrop stays behind it instead of spreading over the
     whole stage. */
  .screen { position: relative; height: auto; grid-template-columns: minmax(0, 1fr); gap: var(--s5); padding: var(--s8) 0 var(--s7); }
  .visual { min-height: 0; }
  .cluster { width: 100%; }
  /* The nav carries the logo on a phone, so the hero's large one would only repeat it. */
  .hero-screen .mark { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav, .cluster-inner { transition: none; }
}

/* Screens 2 and 3 share the hero's frame and grid. They wait below the frame and slide up. */
.deck-screen { background: var(--bg); }
/* The screen is content-column wide; its backdrop must cover the whole frame so nothing
   from the screen beneath shows past the column's edges. */
.deck-screen::before { content: ''; position: absolute; top: 0; bottom: 0; left: -100vw; right: -100vw; background: var(--bg); z-index: -1; }
/* The big line on every screen after the hero: the hero's style, one step smaller. */
.headline { margin: 0; font-size: var(--t-headline); font-weight: 450; letter-spacing: -.045em; line-height: 1.04; text-wrap: balance; }
.deck-screen .copy { max-width: 560px; transform: perspective(1400px) rotateY(4deg); transform-origin: 0 50%; }
/* Light screens: paper instead of black, full bleed like the deck screens' backdrop. Body
   copy stays flat; the turn is kept for headlines, where it cannot soften reading text. */
.light-screen { background: var(--paper); color: var(--paper-ink); color-scheme: light; }
.light-screen::before { content: ''; position: absolute; top: 0; bottom: 0; left: -100vw; right: -100vw; background: var(--paper); z-index: -1; }
.light-screen .accent { color: var(--green-ink); }
.how-copy p { margin: var(--s3) 0 0; font-size: var(--t-body); line-height: 1.6; color: var(--paper-muted); text-wrap: pretty; }
.how-copy .headline + p { margin-top: var(--s4); }
.how-copy b { color: var(--paper-ink); font-weight: 600; }
/* How it works: the laptop and tablet photographed on pure white, beside the copy. The
   photograph's white is lifted to #FFFFFF so it meets the page without an edge. */
.how-devices { width: 100%; height: auto; }
/* The win-win-win card: the 9/10 preview's results card. A white sheet inset 24px from the
   frame with 16px corners, resting under the nav; it grows and How it works recedes behind
   it as it rises (site.js). */
.card-screen { display: block; padding: calc(var(--nav-h) + var(--s4)) var(--s4) var(--s4); }
.card { height: 100%; display: grid; align-content: center; padding: var(--s6) var(--s8);
  background: #fff; color: var(--paper-ink); border-radius: 16px; overflow: hidden;
  transform-origin: 50% 0; box-shadow: 0 -24px 60px -34px rgba(20,20,20,.22), 0 0 0 1px rgba(20,20,20,.06); }
.card-copy { width: min(100%, 1120px); margin-inline: auto; }
.card-title { margin: 0; font-size: var(--t-title); font-weight: 450; letter-spacing: -.035em; line-height: 1.1; text-wrap: balance; }
.card-title b { font-weight: 450; color: var(--green-ink); }
.card-title .plus { color: #b3b5b8; }
.card-wins { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
.card-wins li { display: grid; align-content: start; gap: var(--s2); }
.card-wins h3 { margin: var(--s1) 0 0; font-size: var(--t-deck); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.card-wins p { margin: 0; font-size: var(--t-body); line-height: 1.55; color: var(--paper-muted); text-wrap: pretty; }
.check { width: 44px; height: 44px; border-radius: 50%; background: var(--green); display: grid; place-items: center; }
.check svg { width: 22px; height: 22px; fill: none; stroke: #062e21; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.card-close { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid #e6e6e2;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5); }
.card-claim { margin: 0; max-width: 34ch; font-size: var(--t-lead); font-weight: 450; letter-spacing: -.028em; line-height: 1.25; text-wrap: balance; }
.card-claim b { font-weight: 450; color: var(--green-ink); }
.card-close .btn { flex: none; }
/* Proven results: one screen. The title and Dave's line with the show's own logo, then the
   two gains side by side, each with its bars in year order and drawn to scale, so a third
   year's bar drops in without changing the layout. */
.results-screen { grid-template-columns: minmax(0, 1fr); align-content: center; gap: var(--s6); }
/* The head shares the stats' two columns: the title over the first, the show's logo over the
   second, lined up with the second figure. */
.results-head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7); align-items: center; }
.results-intro { margin: var(--s3) 0 0; max-width: 42ch; font-size: var(--t-deck); line-height: 1.4; color: var(--muted); text-wrap: balance; }
.results-show { width: min(100%, 320px); height: auto; }
.results-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7); }
.stat .fig-value { font-size: var(--t-fig-sm); }
.stat .fig-label { max-width: none; }
.stat .bars { max-width: none; }
/* The testimonial card: Jackie's portrait beside her words, the Informa Markets logo in
   place of a company line, and the full case study to close the section. */
.testimonial { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s7); align-items: center; }
.quote-face { margin: 0; }
.quote-face img { width: 100%; height: auto; border-radius: 50%; }
.testimonial blockquote { margin: 0; font-size: var(--t-lead); line-height: 1.35; letter-spacing: -.02em; text-wrap: pretty; }
.quote-close { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid #e6e6e2;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5); }
.quote-who { display: flex; align-items: center; gap: var(--s4); }
.quote-who p { margin: 0; font-size: var(--t-small); line-height: 1.5; color: var(--paper-muted); }
.quote-who b { display: block; font-weight: 600; color: var(--paper-ink); }
.quote-logo { width: 64px; height: auto; }
.quote-close .btn { flex: none; }
/* New! Traffic Boost: a white screen. The copy a step larger; beside it the full-colour logo
   in the middle of a dotted circle, with the four steps around it clockwise and arrows
   between them. The loop's closing arc carries no arrow: the flow is four steps. The steps
   pop in, in order, as the screen arrives. */
.boost-copy { margin: var(--s4) 0 0; font-size: var(--t-deck); line-height: 1.5; letter-spacing: -.01em; color: var(--paper-muted); text-wrap: pretty; }
.flow { position: relative; margin: 0; width: min(100%, 560px, calc(100svh - var(--nav-h) - 96px)); aspect-ratio: 1 / 1; }
.flow-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flow-arc { fill: none; stroke: #aeb2b6; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 11; }
.flow-close { stroke: #d9dbde; }
#flow-tip path { fill: none; stroke: #6b6f73; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.flow-logo { position: absolute; left: 50%; top: 50%; width: 38%; height: auto; transform: translate(-50%, -50%); }
.flow-steps { list-style: none; margin: 0; padding: 0; }
.flow-step { position: absolute; width: 34%; display: grid; justify-items: center; gap: var(--s1); text-align: center; transform: translate(-50%, -32px); }
.flow-step.s1 { left: 50%; top: 16.667%; }
.flow-step.s2 { left: 83.333%; top: 50%; }
.flow-step.s3 { left: 50%; top: 83.333%; }
.flow-step.s4 { left: 16.667%; top: 50%; }
/* The arrow into On-site connection arrives from below, so its label sits above the icon;
   the icon stays centred on the circle. */
.flow-step.s4 { grid-auto-flow: row; transform: translate(-50%, calc(-100% + 32px)); }
.flow-step.s4 .flow-label { order: -1; }
.flow-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--green); display: grid; place-items: center; box-shadow: 0 8px 18px -8px #00000055; }
.flow-icon svg { width: 28px; height: 28px; fill: none; stroke: #062e21; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.flow-label { font-size: var(--t-body); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; color: var(--paper-ink); text-wrap: balance; }
.flow-icon { transform: scale(.6); opacity: 0; transition: transform .55s cubic-bezier(.34,1.56,.64,1), opacity .3s; }
.flow-label, .flow-arc { opacity: 0; transition: opacity .5s; }
.arrived .flow-icon { transform: none; opacity: 1; }
.arrived .flow-label, .arrived .flow-arc { opacity: 1; }
.arrived .s1 .flow-icon, .arrived .s1 .flow-label { transition-delay: .15s; }
.arrived .f1 { transition-delay: .3s; }
.arrived .s2 .flow-icon, .arrived .s2 .flow-label { transition-delay: .45s; }
.arrived .f2 { transition-delay: .6s; }
.arrived .s3 .flow-icon, .arrived .s3 .flow-label { transition-delay: .75s; }
.arrived .f3 { transition-delay: .9s; }
.arrived .s4 .flow-icon, .arrived .s4 .flow-label { transition-delay: 1.05s; }
.arrived .flow-close { transition-delay: 1.2s; }
@media (max-width: 800px), (max-width: 1024px) and (orientation: portrait), (max-width: 1024px) and (max-height: 539px) {
  .flow { width: 100%; aspect-ratio: auto; display: grid; gap: var(--s5); }
  .flow-ring { display: none; }
  .flow-logo { position: static; transform: none; width: 60%; justify-self: center; }
  .flow-steps { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s3); }
  .flow-step, .flow-step.s4 { position: static; width: auto; transform: none; }
  .flow-step.s4 .flow-label { order: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .flow-icon, .flow-label, .flow-arc { transform: none; opacity: 1; transition: none; }
}
@media (max-width: 800px), (max-width: 1024px) and (orientation: portrait), (max-width: 1024px) and (max-height: 539px) {
  .results-head { grid-template-columns: 1fr; gap: var(--s4); }
  .results-show { width: 200px; }
  .results-stats { grid-template-columns: 1fr; gap: var(--s6); }
  .testimonial { grid-template-columns: 1fr; gap: var(--s4); }
  .quote-face { width: 120px; }
  .testimonial blockquote { font-size: var(--t-deck); line-height: 1.45; }
  .quote-close { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 800px), (max-width: 1024px) and (orientation: portrait), (max-width: 1024px) and (max-height: 539px) {
  .card-screen { padding: var(--s5) var(--s3); }
  .card { padding: var(--s5) var(--s4); }
  .card-wins { grid-template-columns: 1fr; gap: var(--s5); }
  .card-close { flex-direction: column; align-items: flex-start; }
}
/* Section 3: the same layout and headline as section 2, with a button under the headline.
   The graphic is a rising line with its green glow, nothing else, centred among the four
   kinds of support around it. The line draws once and the icons pop in, in order, as the
   screen settles. */
.climb {
  position: relative; margin: 0;
  width: min(100%, 600px, calc(100svh - var(--nav-h) - 96px)); aspect-ratio: 1 / 1;
  transform: perspective(1400px) rotateY(-4deg);
}
/* The drawing is cropped to the line, so centring the drawing centres the line. It sits at
   48%, the middle of the open band between the icon rows (the lower titles run two lines). */
.climb-chart { position: absolute; left: 50%; top: 48%; translate: -50% -50%; width: 52%; height: auto; overflow: visible;
  filter: drop-shadow(0 0 10px #00dd9466); }
.climb-line { fill: none; stroke: var(--green); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.45,0,.2,1); }
.climb-tip { fill: none; stroke: var(--green); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transition: opacity .25s 1s; }
.arrived .climb-line { stroke-dashoffset: 0; }
.arrived .climb-tip { opacity: 1; }
.climb-items { list-style: none; margin: 0; padding: 0; }
.climb-item { position: absolute; width: 34%; display: grid; justify-items: center; gap: var(--s2); text-align: center; }
.climb-item:nth-child(1) { left: 0; top: 0; }
.climb-item:nth-child(2) { right: 0; top: 0; }
.climb-item:nth-child(3) { left: 0; bottom: 0; }
.climb-item:nth-child(4) { right: 0; bottom: 0; }
.climb-icon { width: 76px; height: 76px; border-radius: 50%; background: var(--green); display: grid; place-items: center;
  transform: scale(.6); opacity: 0; transition: transform .55s cubic-bezier(.34,1.56,.64,1), opacity .3s; }
.climb-icon svg { width: 36px; height: 36px; fill: none; stroke: #062e21; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.climb-title { font-size: var(--t-deck); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; text-wrap: balance; }
.arrived .climb-icon { transform: none; opacity: 1; }
.arrived .climb-item:nth-child(1) .climb-icon { transition-delay: .15s; }
.arrived .climb-item:nth-child(2) .climb-icon { transition-delay: .35s; }
.arrived .climb-item:nth-child(3) .climb-icon { transition-delay: .55s; }
.arrived .climb-item:nth-child(4) .climb-icon { transition-delay: .75s; }
@media (max-width: 800px), (max-width: 1024px) and (orientation: portrait), (max-width: 1024px) and (max-height: 539px) {
  .deck-screen .copy { transform: none; }
  .climb { width: 100%; aspect-ratio: auto; transform: none; display: grid; gap: var(--s5); }
  .climb-chart { position: static; translate: none; width: 100%; }
  .climb-items { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s3); }
  .climb-item { position: static; width: auto; }
  .climb-icon { width: 60px; height: 60px; }
  .climb-icon svg { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .climb-line { stroke-dashoffset: 0; transition: none; }
  .climb-tip { opacity: 1; transition: none; }
  .climb-icon { transform: none; opacity: 1; transition: none; }
}


/* Figures. One number, its label, its footnote. */
.fig-value { margin: 0; font-size: var(--t-fig); font-weight: 450; letter-spacing: -.05em; line-height: .92; color: var(--green); }
.fig-label { margin: var(--s3) 0 0; font-size: var(--t-deck); line-height: 1.45; letter-spacing: -.015em; max-width: 34ch; }
.fig-note { margin: var(--s2) 0 0; font-size: var(--t-small); line-height: 1.55; color: var(--muted); max-width: 40ch; }
/* A bar is only as long as its value, with its label above it and its number at its end,
   so the lengths themselves make the comparison. A third year is one more row. */
.bars { margin-top: var(--s5); display: grid; gap: var(--s3); }
.bar { display: grid; gap: 6px; }
.bar-label { font-size: var(--t-small); line-height: 1.3; color: var(--muted); }
.bar-row { display: flex; align-items: center; gap: var(--s2); }
.bar-row i { flex: none; height: 28px; width: calc((100% - 5.5em) * var(--full)); border-radius: 6px; background: var(--green); }
.bar-was .bar-row i { background: #3b3d40; }
.bar-row em { font-style: normal; font-size: var(--t-body); font-weight: 600; letter-spacing: -.01em; color: var(--ink); }



/* Contact Us!: the last screen, on warm off-white, so it reads as a fresh sheet over Traffic
   Boost's white. The dashboard's support strip, warmed: the team in a circle with the smiley
   help icon above them, clear of every face, and email and phone beside them. The form is a white card. The screen is the
   footer's height short of the frame, so the last stop shows all of it with the footer below. */
.contact-screen { height: calc(100svh - var(--footer-h)); background: var(--paper-warm); }
.contact-screen::before { background: var(--paper-warm); }
.contact-lead { margin: var(--s3) 0 0; font-size: var(--t-deck); line-height: 1.45; letter-spacing: -.01em; color: var(--paper-muted); }
.support { margin-top: var(--s7); display: flex; align-items: center; gap: var(--s5); }
.support-team { position: relative; margin: 0; flex: none; width: 168px; }
.support-team img { width: 100%; height: auto; border-radius: 50%; box-shadow: 0 0 0 6px #fff, 0 20px 36px -18px #00000066; }
/* Centred on the top of the circle and sized to the photo, so it stays in the empty band
   above the heads (the heads start 26% of the way down; the icon reaches 18%). */
.support-smile { position: absolute; left: 50%; top: 0; translate: -50% -50%; width: 36%; aspect-ratio: 1; border-radius: 50%; background: var(--green);
  display: grid; place-items: center; box-shadow: 0 0 0 4px #fff, 0 8px 18px -8px #00000055; }
.support-smile svg { width: 54%; height: auto; }
.support-smile svg, .support-icon svg { fill: none; stroke: #062e21; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.support-smile .eyes { stroke-width: 2.6; }
.support-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.support-lines li { display: flex; align-items: center; gap: var(--s2); }
.support-icon { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--green); display: grid; place-items: center; }
.support-icon svg { width: 20px; height: 20px; }
.support-lines a { font-size: var(--t-body); font-weight: 600; letter-spacing: -.01em; color: var(--paper-ink); }
/* The smiley and the two icons pop in as the screen arrives, like every icon on the page. */
.support-smile, .support-icon { transform: scale(.6); opacity: 0; transition: transform .55s cubic-bezier(.34,1.56,.64,1), opacity .3s; }
.arrived .support-smile, .arrived .support-icon { transform: none; opacity: 1; }
.arrived .support-smile { transition-delay: .2s; }
.arrived .support-lines li:nth-child(1) .support-icon { transition-delay: .35s; }
.arrived .support-lines li:nth-child(2) .support-icon { transition-delay: .45s; }
.contact-form { width: min(100%, 560px); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s3);
  padding: var(--s6); background: #fff; border-radius: 16px;
  box-shadow: 0 24px 60px -34px rgba(20,20,20,.3), 0 0 0 1px rgba(20,20,20,.06); }
.field { display: grid; gap: var(--s1); align-content: start; }
.field-wide { grid-column: 1 / -1; }
.field label { font-size: var(--t-small); font-weight: 600; color: var(--paper-ink); }
.field label span { font-weight: 400; color: var(--paper-muted); }
.field input, .field textarea {
  width: 100%; min-height: 48px; padding: var(--s2) 14px;
  background: #fff; color: var(--paper-ink);
  border: 1px solid #d3d5d8; border-radius: 10px;
  font: inherit; font-size: var(--t-body);
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 116px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--green-ink); box-shadow: 0 0 0 3px #00dd9440; }
.form-end { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.form-meta { flex: 1 1 220px; display: grid; gap: 4px; }
.form-privacy { margin: 0; font-size: var(--t-small); line-height: 1.45; color: var(--paper-muted); }
.form-privacy a { color: var(--green-ink); text-decoration: underline; text-underline-offset: 3px; }
.contact-note { margin: 0; font-size: var(--t-small); line-height: 1.45; color: var(--paper-muted); }
@media (max-height: 780px) and (min-width: 801px) {
  .support { margin-top: var(--s6); }
  .support-team { width: 140px; }
  .contact-form { padding: var(--s5); gap: var(--s3); }
  .field textarea { min-height: 88px; }
}
@media (max-width: 800px), (max-width: 1024px) and (orientation: portrait), (max-width: 1024px) and (max-height: 539px) {
  .contact-screen { height: auto; grid-template-columns: minmax(0, 1fr); }
  /* Too narrow for the photo and the lines side by side: the lines drop under the photo. */
  .support { margin-top: var(--s6); gap: var(--s4); flex-wrap: wrap; }
  .support-team { width: 120px; }
  .contact-form { grid-template-columns: 1fr; padding: var(--s5) var(--s4); }
}
@media (prefers-reduced-motion: reduce) {
  .support-smile, .support-icon { transform: none; opacity: 1; transition: none; }
}

/* The footer: a fixed-height strip on a wide screen, so the contact screen above it can leave
   exactly its room. */
.site-footer { padding: var(--s5) 0 var(--s6); border-top: 1px solid var(--line); }
@media (min-width: 801px) and (orientation: landscape) and (min-height: 540px), (min-width: 1025px) {
  .site-footer { height: var(--footer-h); padding: 0; display: flex; align-items: center; }
}
.footer-in { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; font-size: var(--t-micro); color: var(--muted); }
.footer-in img { width: 116px; height: auto; filter: brightness(0) invert(1); opacity: .8; }
.footer-in a { color: var(--muted); transition: color .2s; }
.footer-in a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .quote-face { max-width: 148px; }
}


/* ---- Arrival. One rule: everything below the stage fades in and rises once. ---- */
[data-rise] { opacity: 0; transform: translateY(var(--s3)); }
.is-in-view[data-rise], [data-rise].is-in-view { opacity: 1; transform: none; }
[data-rise] { transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
[data-rise-group] > * { opacity: 0; transform: translateY(var(--s3)); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
[data-rise-group].is-in-view > * { opacity: 1; transform: none; }

/* The bars grow from nothing, once. */
.bars[data-bars] .bar i { transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.bars[data-bars].is-in-view .bar i { transform: scaleX(1); }
.bars[data-bars].is-in-view .bar:nth-child(2) i { transition-delay: .12s; }
.bars[data-bars].is-in-view .bar:nth-child(3) i { transition-delay: .24s; }
.bars[data-bars] .bar em { opacity: 0; transition: opacity .4s .55s; }
.bars[data-bars].is-in-view .bar em { opacity: 1; }

/* The ring draws itself, once. */

/* ---- Micro-moments. A line draws under a link on hover. ---- */
.support-lines a { position: relative; }
.support-lines a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: var(--green-ink); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.support-lines a:hover::after { transform: scaleX(1); }
.nav-links a { position: relative; }
.nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.nav-links a:hover::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  [data-rise], [data-rise-group] > * { opacity: 1; transform: none; transition: none; }
  .bars[data-bars] .bar i { transform: scaleX(1); transition: none; }
  .bars[data-bars] .bar em { opacity: 1; transition: none; }
}



/* Form states. Nothing is marked wrong until the visitor has submitted. */
.contact-form.checked input:invalid, .contact-form.checked textarea:invalid { border-color: #c93c3c; }
.contact-note[data-state="bad"] { color: #b3261e; }
.contact-note[data-state="demo"] { color: var(--paper-ink); }
.contact-note[data-state="ok"] { color: var(--green-ink); }
.contact-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* The field people never see, for bots only. Off the page rather than display: none, which
   some bots skip. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* The phone menu: on a narrow screen the links are hidden, so this is the only
   way to reach them. */
.menu-toggle { display: none; width: 40px; height: 40px; background: none; border: 0; padding: 0;
  cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; align-items: center; }
.menu-toggle span { display: block; width: 20px; height: 1px; background: var(--ink); transition: transform .3s; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
/* The links need about 850px in a row; below 900px, and wherever the page is stacked, they
   fold into the menu button. */
@media (max-width: 900px), (max-width: 1024px) and (orientation: portrait) {
  .menu-toggle { display: flex; }
  .nav-links { display: none; }
  .nav .btn-small { margin-left: auto; }
  .nav-links.is-open { display: grid; position: absolute; top: var(--nav-h); left: -5vw; right: -5vw;
    background: var(--bg); border-bottom: 1px solid var(--line); padding: var(--s3) 5vw var(--s4); gap: 0; margin: 0; }
  .nav-links.is-open a { padding: var(--s2) 0; font-size: var(--t-body); }
  .nav-row { position: relative; gap: var(--s3); }
}
@media (max-width: 800px) {
  .nav-mark img { width: 116px; }
}
@media (max-width: 360px) {
  .nav-row { gap: var(--s2); }
  .nav-mark img { width: 92px; }
  .nav .btn-small { padding: 0 var(--s2); font-size: 14px; }
}


/* Section 2: the headline set like the hero's under a small section title, and the four
   tiles sitting still in a two by two grid, one plane turned toward the headline. The card
   is the dashboard's shape; the artwork inside it is Dave's own files, placed, never
   redrawn. */
.kicker { margin: 0 0 var(--s4); font-size: var(--t-lead); letter-spacing: -.015em; line-height: 1.25; color: var(--muted); text-wrap: balance; }
.tiles {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3);
  width: min(100%, 640px); margin-inline: auto;
  transform: perspective(1400px) rotateY(var(--ty, -4deg)) rotateX(var(--tx, 1.5deg));
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
/* Two rows and their gap fit the frame under the nav, with room above and below. */
.tc {
  height: min(340px, calc((100svh - var(--nav-h) - 128px) / 2));
  display: flex; flex-direction: column;
  background: #fff; color: #0b0c0e;
  border-radius: 16px; padding: var(--s4) var(--s4) 0;
  box-shadow: 0 24px 32px -12px #000000cc;
  overflow: hidden;
}
.tc-head { display: flex; align-items: center; gap: var(--s2); }
.tc-icon { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--green); display: grid; place-items: center; }
.tc-icon svg { width: 22px; height: 22px; fill: none; stroke: #062e21; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tc-title { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: #0b0c0e; text-wrap: balance; }
.tc-body { margin: var(--s2) 0 0; font-size: 14px; line-height: 1.45; color: #62686e; }
.tc-art { flex: 1; min-height: 0; margin-top: var(--s3); padding-bottom: var(--s4); display: flex; flex-direction: column; justify-content: center; gap: var(--s2); }

/* The icons arrive once, in order, as the screen settles. */
.tc-icon { transform: scale(.6); opacity: 0; transition: transform .55s cubic-bezier(.34,1.56,.64,1), opacity .3s; }
.arrived .tc-icon { transform: none; opacity: 1; }
.arrived .tc:nth-child(2) .tc-icon { transition-delay: .09s; }
.arrived .tc:nth-child(3) .tc-icon { transition-delay: .18s; }
.arrived .tc:nth-child(4) .tc-icon { transition-delay: .27s; }

/* 01 the code boxes, one row each */
.tc-code { display: flex; align-items: center; gap: 10px; border-radius: 12px; padding: 8px 8px 8px 12px; }
.tc-code > span { flex: none; width: 60px; font-size: 11px; line-height: 1.2; color: #ffffffd9; }
.tc-code b { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #fff; border-radius: 99px; padding: 8px 12px;
  font-size: 15px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; }
.tc-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tc-cp { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.tc-code-green { background: #16855f; } .tc-code-green b { color: #0d6647; }
.tc-code-purple { background: #6d4bc4; } .tc-code-purple b { color: #5b3bab; font-size: 12px; }

/* 02 the invite on a device, rising from the card's bottom edge */
.tc-art:has(.tc-device) { flex-direction: row; align-items: flex-end; justify-content: center; padding-bottom: 0; }
.tc-device { width: 66%; height: 100%; border: 5px solid #e6e9ec; border-bottom: 0; border-radius: 12px 12px 0 0;
  overflow: hidden; background: #fff; box-shadow: 0 8px 18px #0000001f; }
.tc-device img { width: 100%; height: auto; display: block; }

/* 03 two banners in two sizes, the smaller one over the larger */
.tc-banner { display: block; height: auto; border-radius: 8px; border: 1px solid #e6e9ec; box-shadow: 0 6px 14px #00000014; }
.tc-art-banners { position: relative; display: block; }
.tc-art-banners .tc-banner { position: absolute; }
.tc-art-banners .tc-banner:first-child { top: 0; left: 0; width: 80%; }
.tc-art-banners .tc-banner:last-child { right: 0; bottom: var(--s4); width: 64%; box-shadow: 0 10px 20px #0000002e; }

/* 04 the platforms */
.tc-social { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--s2); }
.tc-social i { border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; font-style: normal; }
.tc-social svg { width: 20px; height: 20px; fill: currentColor; }
.tc-social span { font-size: 12px; font-weight: 600; }
.s-li { background: #0a66c2; } .s-fb { background: #1877f2; }
.s-ig { background: linear-gradient(135deg, #f0337e, #b028c4); }
.s-x  { background: #0b0c0e; }

@media (max-width: 800px), (max-width: 1024px) and (orientation: portrait), (max-width: 1024px) and (max-height: 539px) {
  .tiles { grid-template-columns: 1fr; width: min(100%, 420px); transform: none; }
  .tc { height: 330px; }
}
@media (prefers-reduced-motion: reduce) {
  .tiles { transition: none; }
  .tc-icon { transform: none; opacity: 1; transition: none; }
}


/* The privacy page and the 404 page: the site's nav and footer around one column of text on
   paper. */
.doc-page { min-height: 100svh; display: flex; flex-direction: column; background: var(--paper); color: var(--paper-ink); color-scheme: light; }
.doc-page .nav, .doc-page .site-footer { background: var(--bg); color-scheme: dark; }
.doc-page .nav { border-bottom-color: var(--line); }
.doc-cta { margin-left: auto; }
/* The text column takes the free height, so a short page still ends with the footer at the bottom. */
.doc { flex: 1; padding: calc(var(--nav-h) + var(--s8)) 0 var(--s8); }
.doc:focus { outline: none; }
.doc-in { width: min(680px, 90vw); margin-inline: auto; }
.doc-title { margin: 0; font-size: var(--t-headline); font-weight: 450; letter-spacing: -.045em; line-height: 1.04; text-wrap: balance; }
.doc-date { margin: var(--s3) 0 0; font-size: var(--t-small); color: var(--paper-muted); }
.doc h2 { margin: var(--s6) 0 0; font-size: var(--t-deck); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.doc p, .doc li { font-size: var(--t-body); line-height: 1.65; color: var(--paper-muted); text-wrap: pretty; }
.doc p { margin: var(--s3) 0 0; }
.doc .doc-lead { margin-top: var(--s5); font-size: var(--t-deck); line-height: 1.5; letter-spacing: -.01em; color: var(--paper-ink); }
.doc ul { margin: var(--s3) 0 0; padding-left: 1.2em; }
.doc li + li { margin-top: var(--s2); }
.doc-in a:not(.btn) { color: var(--green-ink); text-decoration: underline; text-underline-offset: 3px; }
.doc-home { margin-top: var(--s5); min-height: 56px; padding: 0 var(--s5); font-size: var(--t-body); }
@media (max-width: 800px) {
  .doc { padding: calc(var(--nav-h) + var(--s6)) 0 var(--s7); }
}