/* The product page. Infin8 Digital's palette and faces, as the application's
   chrome takes them (CLAUDE.md, "The chrome is Infin8 Digital's"): navy
   #0f2a3a, the action orange #f64121 for anything pressable, teal #008080 in
   support, Inter for text and Space Grotesk for titles, 8 and 16 pixel radii.
   The orange is read as text only through --act-ink, for the contrast reason
   the application gives.

   Self-contained: the faces are declared here rather than through the
   application's fonts.css, so this page needs nothing outside /product,
   /fonts, /icon.svg and /help/img, which are the paths the sign-in door
   leaves open. */

@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 500; font-display: swap; src: url('/fonts/space-grotesk-500.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 600; font-display: swap; src: url('/fonts/space-grotesk-600.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 700; font-display: swap; src: url('/fonts/space-grotesk-700.woff2') format('woff2'); }

:root {
  --navy: #0f2a3a;
  --navy-deep: #0a1e2a;
  --navy-sunk: #08171f;
  --navy-raised: #163747;
  --act: #f64121;
  --act-ink: #ff7a5c;
  --teal: #008080;
  --teal-ink: #2bc2c2;
  --ink: rgba(255, 255, 255, 0.92);
  --ink-2: rgba(255, 255, 255, 0.68);
  --ink-3: rgba(255, 255, 255, 0.48);
  --rule: rgba(255, 255, 255, 0.10);
  --rule-2: rgba(255, 255, 255, 0.18);
  --paper: #f5f7f8;
  --paper-ink: #0f2a3a;
  --paper-ink-2: #3d5260;
  --r: 8px;
  --r-lg: 16px;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-head: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --bar-h: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* What a section's colours change (.tone--…, at the foot of the file):
     every colour a section's own rules read, so a theme moves them all. */
  --ink-strong: #fff;
  --rule-3: rgba(255, 255, 255, 0.4);
  --link-hover: #ff9a82;
  --em: var(--act);
  --surface: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.07);
  --well: rgba(0, 0, 0, 0.25);
  --card: var(--navy);
  --card-rule: var(--rule-2);
  --field: var(--navy-sunk);
  --tab-on: #fff;
  --tab-on-ink: var(--navy);
  --grid-line: rgba(255, 255, 255, 0.035);
  --error-ink: #ffd3c9;
  --step-bg: var(--navy);
  --tone-bg: var(--navy-deep);
  --globe-ocean-a: #15405a;
  --globe-ocean-b: #071722;
  --globe-land: #2b6a7c;
  --globe-land-edge: rgba(255, 255, 255, 0.22);
  --globe-grid: rgba(255, 255, 255, 0.07);
  --globe-glow: rgba(43, 194, 194, 0.42);
  --globe-hi: #f64121;
  --globe-pin: #2bc2c2;
  --globe-label: rgba(8, 23, 31, 0.86);
  --globe-label-ink: #fff;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--navy-deep);
  color: var(--ink);
  font: 400 17px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--act-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }
h1, h2, h3 { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 0; color: var(--ink-strong); }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--act-ink); outline-offset: 3px; border-radius: 4px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--act); color: #fff; padding: 10px 16px; border-radius: var(--r);
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; color: #fff; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--wide { max-width: 1320px; }

/* ----------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 18px; border-radius: 999px;
  font: 600 15px/1 var(--font); text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), color .2s;
}
.btn--lg { min-height: 50px; padding: 0 26px; font-size: 16px; }
.btn--primary { background: var(--act); color: #fff; box-shadow: 0 8px 28px -10px rgba(246, 65, 33, .7); }
.btn--primary:hover { background: #ff5434; color: #fff; transform: translateY(-1px); }
.btn--ghost { color: var(--ink-strong); border-color: var(--rule-2); background: var(--surface); }
.btn--ghost:hover { color: var(--ink-strong); border-color: var(--rule-3); background: var(--surface-2); }
.btn--quiet { color: var(--ink-2); padding: 0 12px; }
.btn--quiet:hover { color: #fff; }

/* --------------------------------------------------------------------- bar */
.bar {
  position: sticky; top: 0; z-index: 50; height: var(--bar-h);
  background: rgba(10, 30, 42, .72);
  -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.bar.is-stuck { border-bottom-color: var(--rule); background: rgba(10, 30, 42, .86); }
.bar__inner {
  max-width: 1320px; height: 100%; margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 24px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand__mark { width: 30px; height: 30px; }
.brand__word { font: 700 21px/1 var(--font-head); color: #fff; letter-spacing: -0.01em; }
.brand__word span { color: var(--act); }
.bar__nav { display: flex; gap: 4px; margin: 0 auto; }
.bar__nav a {
  color: var(--ink-2); text-decoration: none; font-size: 14px; font-weight: 500;
  padding: 8px 12px; border-radius: 999px; transition: color .2s, background .2s;
}
.bar__nav a:hover { color: #fff; }
.bar__nav a[aria-current="true"] { color: #fff; background: rgba(255, 255, 255, .08); }
.bar__cta { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.bar__nav + .bar__cta { margin-left: 0; }

/* -------------------------------------------------------------------- hero */
.hero { position: relative; padding: clamp(56px, 9vw, 112px) 0 clamp(48px, 7vw, 96px); overflow: hidden; }
.hero__glow {
  position: absolute; inset: -20% -10% auto; height: 120%; pointer-events: none;
  background:
    radial-gradient(40% 38% at 22% 18%, rgba(246, 65, 33, .20), transparent 70%),
    radial-gradient(42% 40% at 82% 30%, rgba(0, 128, 128, .28), transparent 70%),
    radial-gradient(60% 50% at 50% 100%, var(--hero-base, rgba(22, 55, 71, .9)), transparent 70%);
}
.hero::before {
  /* A faint survey grid, the ground a map is drawn on. */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent);
          mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent);
}
.hero__copy { position: relative; text-align: center; max-width: 920px; margin: 0 auto; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px; border: 1px solid var(--rule-2); border-radius: 999px;
  font-size: 13px; font-weight: 500; color: var(--ink-2); background: var(--surface);
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal-ink); box-shadow: 0 0 0 4px rgba(43, 194, 194, .18); }
/* --title-scale and --text-scale are the Website tab's Headline size and
   Lede size, set on the section; 1 is as designed. */
.hero h1 { margin-top: 22px; font-size: calc(clamp(38px, 6.4vw, 76px) * var(--title-scale, 1)); letter-spacing: -0.035em; line-height: 1.02; }
.hero h1 em { font-style: normal; color: var(--em); }

/* Two columns: the words on the left, the picture on the right (the Website
   tab's hero layout). One column again on a tablet or a phone. */
.hero__split {
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.hero--split .hero__copy { text-align: left; max-width: none; margin: 0; }
.hero--split h1 { font-size: calc(clamp(36px, 4.6vw, 64px) * var(--title-scale, 1)); }
.hero--split .lede { margin-left: 0; margin-right: 0; }
.hero--split .hero__actions { justify-content: flex-start; }
.hero--split .hero__showcase { margin: 0; }
.lede { margin: 22px auto 0; max-width: 680px; font-size: clamp(17px, 1.6vw, 20px); color: var(--ink-2); line-height: 1.55; }
.hero .lede { font-size: calc(clamp(17px, 1.6vw, 20px) * var(--text-scale, 1)); }

/* The animated picture (the Website tab's "words left, animated picture
   right"), after Infin8 Digital's own solution pages: the window turned away
   in depth from its left edge, easing square under the pointer, an orange
   glow beneath. The switch stands under it and outside the turn. */
.hero--tilt .hero__split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
.hero--tilt .hero__showcase { perspective: 1800px; }
.hero--tilt .device {
  transform: rotateY(-7deg) rotateX(2deg); transform-origin: left center;
  transition: transform .9s cubic-bezier(.2, .7, .2, 1);
  box-shadow: 0 60px 110px -40px rgba(246, 65, 33, .6), 0 30px 60px -28px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.hero--tilt .hero__showcase:hover .device { transform: rotateY(-2deg) rotateX(0deg); }
.js .hero--tilt .hero__showcase.reveal { transform: translateX(28px); transition-delay: .24s; }
.js .hero--tilt .hero__showcase.reveal.is-in { transform: none; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.hero__note { margin-top: 18px; font-size: 14px; color: var(--ink-3); }

/* The hero's picture: the screenshot alone, rounded on every corner. The
   clip as well as the overflow, because a corner clipped by overflow alone
   can draw square while the picture is turned in 3D. */
.hero__showcase { position: relative; margin: clamp(40px, 6vw, 72px) 0 0; }
.device {
  --device-r: var(--r-lg);
  position: relative; border-radius: var(--device-r); overflow: hidden;
  clip-path: inset(0 round var(--device-r));
  background: var(--navy-sunk); border: 1px solid var(--rule-2);
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .3);
}
.device__screen { position: relative; aspect-ratio: 16 / 10; background: #0b0d10; border-radius: inherit; overflow: hidden; }
.device__screen img { width: 100%; height: 100%; object-fit: cover; object-position: left top; transition: opacity .35s var(--ease); }
.device__screen.is-swapping img { opacity: .15; }
.device__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 18px; padding: 0 4px; font-size: 14px; color: var(--ink-2);
}

/* A segmented switch, as the application's map style switch is. */
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(0, 0, 0, .3); border: 1px solid var(--rule); }
.seg button {
  font: 500 13px/1 var(--font); color: var(--ink-2); background: none; border: 0;
  padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s;
}
.seg button[aria-checked="true"] { background: var(--act); color: #fff; }
.seg button:not([aria-checked="true"]):hover { color: #fff; }

/* -------------------------------------------------------------------- stats */
.stats { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--navy); }
.stats__grid { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); }
.stat { padding: 40px 20px; text-align: center; border-left: 1px solid var(--rule); }
.stat:first-child { border-left: 0; }
.stat__n { font: 700 clamp(32px, 4.2vw, 50px)/1 var(--font-head); color: var(--ink-strong); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat__l { margin-top: 10px; font-size: 14px; color: var(--ink-2); }

/* ------------------------------------------------------------- section heads */
.head { max-width: 760px; margin: 0 auto clamp(40px, 6vw, 72px); text-align: center; }
.kicker { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-ink); }
.head h2 { margin-top: 14px; font-size: clamp(30px, 4.4vw, 52px); letter-spacing: -0.03em; }
.head__sub { margin-top: 16px; color: var(--ink-2); font-size: 18px; }

/* ----------------------------------------------------------------- features */
.features { padding: clamp(72px, 10vw, 140px) 0 clamp(40px, 6vw, 80px); }
.feat { padding: clamp(36px, 6vw, 72px) 0; }
.feat__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.feat--flip .feat__copy { order: 2; }
.feat__n {
  display: inline-block; font-size: 13px; font-weight: 600; color: var(--act-ink);
  padding: 5px 12px; border-radius: 999px; background: rgba(246, 65, 33, .1); border: 1px solid rgba(246, 65, 33, .3);
}
.feat h3 { margin: 16px 0 16px; font-size: clamp(26px, 3vw, 36px); }
.feat__copy > p:not(.feat__n) { color: var(--ink-2); }
.ticks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 28px; color: var(--ink); font-size: 15.5px; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .32em; width: 16px; height: 16px; border-radius: 50%;
  background: rgba(0, 128, 128, .22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-4.9' fill='none' stroke='%232bc2c2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}

.shot {
  margin: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--rule-2);
  background: var(--navy-sunk); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .75);
}
.shot img { width: 100%; }
/* A feature picture's size and position in its frame (the Website tab's
   Picture size and Picture position): smaller sits in the frame at its
   position, larger is cropped to it. Smaller shrinks the frame with the
   picture (--shrink) rather than the picture inside it, which left a dark
   box round it; larger scales the picture in its frame (--grow). */
.shot img, .compare img {
  transform: scale(var(--grow, 1)); transform-origin: var(--origin, 50% 50%);
  object-position: var(--origin, 50% 50%);
}
.shot, .compare { width: calc(100% * var(--shrink, 1)); justify-self: var(--pair-x, center); }
.shot--tall {
  /* Two pictures of up to 300px each, the gap and the padding: the box fits
     them, so it shrinks with them. */
  width: calc(664px * var(--shrink, 1)); max-width: 100%;
  display: flex; gap: 16px; justify-content: var(--pair-x, center); padding: 24px;
  background: radial-gradient(80% 80% at 50% 0%, rgba(0, 128, 128, .22), transparent 70%), var(--navy);
}
/* Each of two pictures has a frame of its own, which clips it, so its size
   and position work inside that frame as a single picture's do in its. */
.shot--tall .shot__pic {
  display: block; width: calc(50% - 8px); align-self: var(--pair-y, flex-start); overflow: hidden;
  border-radius: 12px; border: 1px solid var(--rule); background: var(--navy-sunk);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .8);
}
.shot--tall .shot__pic img { display: block; width: 100%; }
.shot--tall .shot__pic:nth-child(2) { margin-top: var(--pair-stagger, 48px); }
/* A project deck is mostly empty below its changes; show the top of it,
   or the part a chosen position names. */
.shot--crop .shot__pic:first-child img { aspect-ratio: 336 / 560; object-fit: cover; object-position: var(--crop-origin, 50% 0%); }
/* A feature's fine print (30 October 2026): under its pictures and inside
   their frame, small but readable, sized by the Website tab's slider. */
.shot__fine {
  margin: 0; padding: 10px 16px 12px; text-align: center;
  font-size: calc(13px * var(--fine-scale, 1)); line-height: 1.4;
  color: var(--ink-2); letter-spacing: .01em;
}
.shot__fine em { font-style: italic; }
.shot--tall { flex-wrap: wrap; }
.shot--tall .shot__fine { flex: 0 0 100%; padding: 4px 0 0; }
.shot--phone { flex-direction: column; align-items: center; }
.shot--phone .shot__fine { position: relative; padding-top: 14px; }
.shot__fine--over {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none;
  padding-top: 26px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
  background: linear-gradient(transparent, rgba(0, 0, 0, .55));
}
.shot--phone {
  width: auto; border: 0; background: none; box-shadow: none; overflow: visible;
  display: flex; justify-content: center; position: relative;
}
.shot--phone::before {
  content: ""; position: absolute; inset: 10% 5%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(246, 65, 33, .28), transparent); filter: blur(30px);
}
.shot--phone img {
  position: relative; width: calc(min(320px, 72%) * var(--shrink, 1)); border-radius: 38px;
  border: 10px solid #1c2a33; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 40px 90px -30px rgba(0, 0, 0, .9);
}

/* Before and after: the after image is clipped from the left at --pos. */
.compare {
  position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--rule-2);
  background: var(--navy-sunk); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .75);
  aspect-ratio: 16 / 10; user-select: none; touch-action: pan-y;
}
.compare img { width: 100%; height: 100%; object-fit: cover; }
.compare__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.compare__handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px;
  background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, .5); pointer-events: none;
}
.compare__handle span {
  position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 50%; background: var(--act); border: 2px solid #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .5);
}
.compare__handle span::before, .compare__handle span::after {
  content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -4px;
  border: solid #fff; border-width: 0 0 2px 2px;
}
.compare__handle span::before { left: 9px; transform: rotate(45deg); }
.compare__handle span::after { right: 9px; transform: rotate(-135deg); }
.compare__range {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none; background: none;
}
.compare__range:focus-visible + * , .compare:focus-within .compare__handle span { outline: 3px solid #fff; outline-offset: 3px; }
.compare__tag {
  position: absolute; top: 14px; padding: 6px 12px; border-radius: 999px; pointer-events: none;
  background: rgba(8, 23, 31, .78); border: 1px solid var(--rule-2); font-size: 12.5px; font-weight: 500; color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.compare__tag--l { left: 14px; }
.compare__tag--r { right: 14px; }

/* ------------------------------------------------------------- route tabs */
.route { padding: clamp(72px, 10vw, 140px) 0; background: linear-gradient(var(--navy-deep), var(--navy) 30%, var(--navy) 70%, var(--navy-deep)); }
.tabs__list {
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
  padding: 5px; margin: 0 auto 28px; width: max-content; max-width: 100%;
  background: var(--well); border: 1px solid var(--rule); border-radius: 999px;
}
.tabs__list button {
  font: 600 15.5px/1 var(--font); color: var(--ink-2); background: none; border: 0; cursor: pointer;
  padding: 11px 18px; border-radius: 999px; transition: background .2s, color .2s;
}
.tabs__list button:hover { color: var(--ink-strong); }
.tabs__list button[aria-selected="true"] { background: var(--tab-on); color: var(--tab-on-ink); }
.tabs__panel {
  /* The words and the picture take half the panel each (30 October 2026, at
     the author's request); one column on a tablet or a phone. */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center;
  padding: clamp(20px, 3vw, 36px); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--rule);
  animation: rise .45s var(--ease);
}
/* The words beside the picture, larger and centred in their column (29
   October 2026, at the author's request). */
.tabs__copy { text-align: center; padding: 0 clamp(0px, 1.5vw, 16px); }
.tabs__panel h3 { font-size: clamp(26px, 3vw, 38px); margin-bottom: 18px; }
.tabs__panel p { color: var(--ink-2); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; }
.tabs__panel > img { border-radius: 12px; border: 1px solid var(--rule-2); justify-self: center; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .8); }
.tabs__panel > img.tall { max-height: 560px; width: auto; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ try it */
.try { padding: clamp(72px, 10vw, 140px) 0; }
.try__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.try__copy h2 { margin: 14px 0 18px; font-size: clamp(30px, 4vw, 46px); }
.try__copy p { color: var(--ink-2); }
.try__copy p + p { margin-top: 14px; }
.fine { font-size: 14px; color: var(--ink-3) !important; border-left: 2px solid var(--teal); padding-left: 12px; }

.calc {
  padding: clamp(22px, 3vw, 36px); border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--navy-raised), var(--navy)); border: 1px solid var(--rule-2);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7);
}
.calc__control { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.calc__control label { font-weight: 600; font-size: 15px; }
.calc__control output { font: 700 22px/1 var(--font-head); color: var(--act-ink); }
.calc input[type="range"] { width: 100%; margin: 18px 0 6px; accent-color: var(--act); height: 28px; cursor: pointer; }
.calc__ticks { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); }
.calc__figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 26px; }
.calc__figures > div { padding: 16px; border-radius: 12px; background: rgba(0, 0, 0, .22); border: 1px solid var(--rule); }
.calc__n { font: 700 clamp(30px, 3.6vw, 42px)/1 var(--font-head); color: #fff; font-variant-numeric: tabular-nums; }
.calc__n.is-bump { animation: bump .35s var(--ease); }
@keyframes bump { 40% { color: var(--act-ink); transform: translateY(-3px); } }
.calc__l { margin-top: 8px; font-size: 13px; color: var(--ink-2); line-height: 1.35; }
.calc__loop { width: 100%; margin-top: 22px; overflow: visible; }
.calc__track { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 8; }
.calc__stop { fill: var(--navy); stroke: #fff; stroke-width: 3; }
.calc__place path { fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.calc__place .calc__win { stroke: var(--act-ink); stroke-width: 2.2; }
.calc__bus { fill: var(--act); stroke: #fff; stroke-width: 1.5; }
.calc__note { margin-top: 10px; font-size: 13px; color: var(--ink-3); }

/* ------------------------------------------------------------ how it works */
.how { padding: clamp(72px, 10vw, 140px) 0; background: var(--tone-bg); color: var(--ink); }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; position: relative; }
.steps::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: 26px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--act) 0 10px, transparent 10px 18px); opacity: .5;
}
.step { position: relative; padding: 0 8px; text-align: center; }
.step__n {
  display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--step-bg); color: #fff; font: 700 20px/1 var(--font-head);
  box-shadow: 0 0 0 6px var(--tone-bg), 0 0 0 7px var(--rule), 0 10px 24px -8px rgba(15, 42, 58, .5); position: relative;
}
.step:first-child .step__n { background: var(--act); }
.step h3 { margin: 20px 0 10px; font-size: 20px; }
.step p { color: var(--ink-2); font-size: 15.5px; }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: clamp(48px, 7vw, 88px); }
.principle { padding: 28px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--card-rule); box-shadow: 0 10px 30px -18px rgba(15, 42, 58, .35); }
.principle h3 { font-size: 20px; margin-bottom: 10px; }
.principle h3::before { content: ""; display: block; width: 28px; height: 4px; border-radius: 2px; background: var(--teal); margin-bottom: 16px; }
.principle p { color: var(--ink-2); font-size: 15.5px; }

/* ----------------------------------------------------------------- coverage */
.coverage { padding: clamp(72px, 10vw, 140px) 0; }
.places { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.place {
  padding: 22px 22px 22px 26px; border-radius: var(--r-lg); position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--rule);
  transition: border-color .25s, transform .25s var(--ease), background .25s;
}
.place::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 0 3px 3px 0; background: var(--teal-ink); }
.place:nth-child(n+5)::before { background: var(--act); }
.place:hover { border-color: var(--rule-2); background: var(--surface-2); transform: translateY(-2px); }
.place strong { display: block; font: 700 19px/1.2 var(--font-head); color: var(--ink-strong); }
.place span { display: block; margin-top: 6px; font-size: 14.5px; color: var(--ink-2); }

/* ---------------------------------------------------------------------- CTA */
.cta { padding: 0 0 clamp(72px, 10vw, 140px); }
.cta__inner {
  text-align: center; padding: clamp(40px, 7vw, 88px) clamp(20px, 5vw, 64px); border-radius: 24px;
  background:
    radial-gradient(60% 80% at 0% 0%, rgba(246, 65, 33, .35), transparent 60%),
    radial-gradient(60% 80% at 100% 100%, rgba(0, 128, 128, .45), transparent 60%),
    var(--navy);
  border: 1px solid var(--rule-2);
}
.cta h2 { font-size: clamp(32px, 4.6vw, 56px); letter-spacing: -0.03em; }
.cta p { margin: 16px auto 0; max-width: 620px; color: var(--ink-2); font-size: 18px; }

/* ------------------------------------------------- text and picture blocks */
/* Two blocks the Website tab adds beside the page's own (internal/site). */
.prose { padding: clamp(56px, 8vw, 112px) 0; }
.prose__body { max-width: 720px; margin: 0 auto; color: var(--ink-2); font-size: 18px; }
.prose__body p + p { margin-top: 18px; }
.picture { padding: clamp(56px, 8vw, 112px) 0; }
.picture__shot figcaption { padding: 14px 20px; color: var(--ink-2); font-size: 14.5px; border-top: 1px solid var(--rule); }

/* ------------------------------------------------------------ contact form */
.contact { padding: clamp(56px, 8vw, 112px) 0; }
.contact__grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 5vw, 64px); align-items: start; margin-top: clamp(28px, 4vw, 48px);
}
/* No paragraph beside the form: the form alone, centred, at a width a form
   reads well at. */
.contact__grid--solo { grid-template-columns: minmax(0, 760px); justify-content: center; }
.contact__side { color: var(--ink-2); font-size: 18px; }
.contact__side p { margin: 0; }
.contact__side p + p { margin-top: 16px; }
.contact__card {
  padding: clamp(22px, 3.4vw, 36px); border-radius: var(--r-lg);
  background: var(--card); border: 1px solid var(--card-rule);
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .8);
}
.contact__form { display: grid; gap: 18px; }
.contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact__field { display: grid; gap: 7px; }
.contact__field span { font: 500 14px/1.2 var(--font); color: var(--ink-2); }
.contact__field b { color: var(--act-ink); font-weight: 600; }
.contact__field input, .contact__field textarea {
  width: 100%; padding: 11px 14px; border-radius: var(--r);
  border: 1px solid var(--rule-2); background: var(--field); color: var(--ink-strong);
  font: 400 16px/1.45 var(--font);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.contact__field textarea { resize: vertical; min-height: 140px; }
.contact__field input:focus, .contact__field textarea:focus {
  outline: none; border-color: var(--teal-ink); box-shadow: 0 0 0 3px rgba(43, 194, 194, .22);
}
.contact__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact__error {
  margin: 0; padding: 10px 14px; border-radius: var(--r);
  background: rgba(246, 65, 33, .12); border: 1px solid rgba(246, 65, 33, .45); color: var(--error-ink); font-size: 15px;
}
.contact__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.contact__foot .btn[disabled] { opacity: .7; cursor: progress; transform: none; }
.contact__fine { margin: 0; flex: 1 1 220px; color: var(--ink-3); font-size: 14px; }
.contact__done { text-align: center; padding: 28px 8px; font-size: 18px; color: var(--ink); outline: none; }
.contact__done p { margin: 0; }
.contact__done .contact__tick {
  display: inline-grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 16px;
  border-radius: 50%; background: var(--teal); color: #fff; font-size: 26px;
}
@media (max-width: 760px) {
  .contact__grid { grid-template-columns: 1fr; }
  .contact__row { grid-template-columns: 1fr; }
}

/* A draft shown to an administrator says so, above everything. */
.preview-strip {
  position: sticky; top: 0; z-index: 60; padding: 8px 16px; text-align: center;
  background: var(--teal); color: #fff; font: 600 14px/1.4 var(--font);
}
.preview-strip + .skip + .bar { top: 37px; }

/* -------------------------------------------------------------------- prose */
/* The pages beside the product page: the privacy notice, the accessibility
   statement and the sources and licences (internal/site/templates/doc.tmpl). */
.prose { padding: 56px 0 80px; }
.prose .wrap { max-width: 820px; }
.prose h1 { font-size: clamp(32px, 4.6vw, 48px); margin: 0 0 24px; }
.prose h2 { font-size: 24px; margin: 40px 0 12px; }
.prose h3 { font-size: 19px; margin: 28px 0 8px; }
.prose p { margin: 0 0 14px; color: var(--ink-2); }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; color: var(--ink-2); }
.prose li { margin: 0 0 8px; overflow-wrap: anywhere; }
.prose strong { color: var(--ink); }
.prose__draft {
  margin: 0 0 28px !important; padding: 12px 16px; border-radius: var(--r);
  border: 1px solid var(--act); background: rgba(246, 65, 33, .12); color: var(--ink) !important;
}

/* ------------------------------------------------------------------- plans */
/* The plans side by side (October 2026, at the author's request). A column a
   plan; the one the administrator highlights wears the action orange until a
   visitor stars a favourite of their own, which then takes it instead. */
.plans { padding: clamp(72px, 10vw, 140px) 0; position: relative; overflow: hidden; }
.plans::before {
  content: ""; position: absolute; inset: -20% -10% auto; height: 70%; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 0%, rgba(0, 128, 128, .22), transparent 70%);
}
.plans .wrap { position: relative; }
.plans__grid {
  display: grid; gap: 20px; margin-top: clamp(36px, 5vw, 56px); align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.plan {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: 30px 26px 26px; border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--rule-2);
  box-shadow: 0 24px 60px -36px rgba(0, 0, 0, .8);
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
.plan:hover { transform: translateY(-4px); border-color: var(--rule-3); }
.plan__badge {
  position: absolute; top: -12px; left: 26px; padding: 4px 12px; border-radius: 999px;
  background: var(--teal); color: #fff; font: 600 12px/1.4 var(--font); letter-spacing: .06em; text-transform: uppercase;
}
.plan__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.plan__name { font-size: 26px; }
.plan__fav {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; margin: -6px -8px 0 0;
  border-radius: 50%; border: 1px solid var(--rule-2); background: var(--surface);
  color: var(--ink-3); cursor: pointer; transition: color .2s, background .2s, border-color .2s, transform .2s;
}
.plan__fav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.plan__fav:hover { color: var(--ink-strong); border-color: var(--rule-3); transform: scale(1.06); }
.plan__fav[aria-pressed="true"] { color: #ffc24a; border-color: #ffc24a; background: rgba(255, 194, 74, .12); }
.plan__fav[aria-pressed="true"] svg { fill: currentColor; }
.plan__price { font: 600 18px/1.35 var(--font-head); color: var(--act-ink); }
.plan__text { color: var(--ink-2); font-size: 15.5px; }
.plan__features { list-style: none; margin: 4px 0 0; padding: 18px 0 0; border-top: 1px solid var(--rule); display: grid; gap: 10px; flex: 1; align-content: start; }
.plan__features li { position: relative; padding-left: 28px; font-size: 15px; color: var(--ink); }
.plan__features li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(0, 128, 128, .22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.5L12 5.5' fill='none' stroke='%232bc2c2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.plan__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.plan__actions .btn { flex: 1 1 auto; justify-content: center; }
/* The highlighted plan: the administrator's until a visitor chooses. */
.plan--featured:not(.plans__grid--chosen .plan),
.plan--favourite {
  border-color: var(--act);
  background: linear-gradient(180deg, rgba(246, 65, 33, .14), rgba(246, 65, 33, .03) 55%, rgba(255, 255, 255, .02));
  box-shadow: 0 30px 70px -34px rgba(246, 65, 33, .55), 0 0 0 1px var(--act) inset;
}
@media (min-width: 900px) {
  .plan--featured:not(.plans__grid--chosen .plan), .plan--favourite { transform: translateY(-10px); }
  .plan--featured:not(.plans__grid--chosen .plan):hover, .plan--favourite:hover { transform: translateY(-14px); }
}
.plans__grid--chosen .plan:not(.plan--favourite) { opacity: .82; }
.plans__grid--chosen .plan:not(.plan--favourite):hover { opacity: 1; }
.plans__status { min-height: 1.4em; margin-top: 22px; text-align: center; color: var(--ink-3); font-size: 14px; }
.plans__fine { margin-top: 8px; text-align: center; color: var(--ink-3); font-size: 14px; }
@media (max-width: 640px) {
  .plan { padding: 26px 20px 22px; }
}

/* ------------------------------------------------------------------- footer */
.foot { background: var(--navy-sunk); border-top: 1px solid var(--rule); padding: 56px 0 40px; font-size: 14.5px; }
.foot__grid { display: grid; grid-template-columns: 1.2fr 1fr 2fr; gap: 40px; }
.foot__label { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.foot__by img { width: 120px; height: auto; }
.foot__tag { margin-top: 14px; color: var(--ink-2); max-width: 240px; }
.foot__links { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.foot__links a { color: var(--ink); text-decoration: none; }
.foot__links a:hover { color: var(--act-ink); }
.foot__legal { color: var(--ink-3); font-size: 13px; }
.foot__legal p + p { margin-top: 12px; }

/* ------------------------------------------------------------ the globe */
/* Places shown as a turning globe (the Website tab's Places, Shown as): a
   canvas drawn by product.js from world.json, the places' labels over it, and
   the list beside it, which is the control a keyboard and a screen reader
   use. Its colours are custom properties, so a section's theme moves them. */
.globe {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 56px); align-items: center;
}
.globe__stage { position: relative; aspect-ratio: 1; width: 100%; max-width: 620px; justify-self: center; touch-action: pan-y; }
.globe__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab;
  /* A soft round edge: the globe zoomed in to a place is seen through it,
     never cut off square by the canvas. */
  -webkit-mask-image: radial-gradient(closest-side, #000 84%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 84%, transparent 100%);
}
.globe__canvas.is-dragging { cursor: grabbing; }
.globe__labels { position: absolute; inset: 0; pointer-events: none; }
.globe__label {
  position: absolute; left: 0; top: 0; pointer-events: auto; white-space: nowrap;
  padding: 5px 11px 5px 9px; border-radius: 999px; cursor: pointer;
  font: 600 12.5px/1.2 var(--font); color: var(--globe-label-ink);
  background: var(--globe-label); border: 1px solid var(--rule-2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .6);
  display: inline-flex; align-items: center; gap: 7px;
  /* No transition on transform: the label follows its pin frame by frame. */
  transition: opacity .25s, background .25s, border-color .25s;
  will-change: transform, opacity;
}
.globe__label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--globe-pin); flex: none; }
.globe__label:hover { border-color: var(--rule-3); }
.globe__label.is-on { background: var(--act); border-color: var(--act); color: #fff; }
.globe__label.is-on::before { background: #fff; }
.globe__hint {
  position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%);
  font-size: 12.5px; color: var(--ink-3); pointer-events: none; transition: opacity .6s;
}
.globe.is-touched .globe__hint { opacity: 0; }
.globe__side { display: grid; gap: 18px; }
.globe__card {
  position: relative; padding: 24px 26px; border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(160deg, var(--surface-2), var(--surface)); border: 1px solid var(--rule-2);
  min-height: 150px;
}
.globe__card::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 3px; border-radius: 0 3px 3px 0; background: var(--act); }
.globe__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-ink); }
.globe__name { margin-top: 8px; font-size: clamp(24px, 2.6vw, 32px); }
.globe__note { margin-top: 10px; color: var(--ink-2); font-size: 16px; }
.globe__card.is-changing .globe__name, .globe__card.is-changing .globe__note { animation: rise .45s var(--ease); }
.globe__places { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.globe__place {
  font: 600 14px/1.2 var(--font); color: var(--ink-2); cursor: pointer;
  padding: 9px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--rule-2);
  transition: color .2s, background .2s, border-color .2s;
}
.globe__place span { display: none; }
.globe__place:hover { color: var(--ink-strong); border-color: var(--rule-3); }
.globe__place[aria-current="true"] { color: #fff; background: var(--act); border-color: var(--act); }
.globe__place:not([data-lon]) { cursor: default; opacity: .75; }
.globe__tour {
  justify-self: start; font: 500 13.5px/1 var(--font); color: var(--ink-3); background: none; border: 0;
  padding: 6px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.globe__tour:hover { color: var(--ink-strong); }
/* Before the script has run, or with none, the list shows its notes. */
.globe:not(.is-live) .globe__stage, .globe:not(.is-live) .globe__card, .globe:not(.is-live) .globe__tour { display: none; }
.globe:not(.is-live) { grid-template-columns: minmax(0, 1fr); }
.globe:not(.is-live) .globe__place span { display: block; margin-top: 4px; font-weight: 400; }
.globe:not(.is-live) .globe__place { border-radius: var(--r); text-align: left; }

/* ----------------------------------------------------- a section's colours */
/* The Website tab's Colours (internal/site Themes): each sets the section's
   ground and every colour read on it, held to readable contrast. The light
   ones come first because the steps block is drawn in them by default; the
   dark ones after them, so a dark theme on the steps block wins. The device
   frame, the pictures, the calculator and the call to action's band stay
   dark whatever the section is, and carry the dark colours with them. */
.how, .tone--light, .tone--grey, .tone--white, .tone--sand, .tone--mist {
  --tone-bg: #f5f7f8;
  --ink: #0f2a3a;
  --ink-2: #3d5260;
  --ink-3: #4f616c;
  --ink-strong: #0f2a3a;
  --rule: rgba(15, 42, 58, 0.12);
  --rule-2: rgba(15, 42, 58, 0.2);
  --rule-3: rgba(15, 42, 58, 0.42);
  --act-ink: #b3300f;
  --link-hover: #8a2208;
  --teal-ink: #006666;
  --em: #e2381a;
  --surface: rgba(255, 255, 255, 0.72);
  --surface-2: #fff;
  --well: rgba(15, 42, 58, 0.07);
  --card: #fff;
  --card-rule: #d8e0e5;
  --field: #fff;
  --tab-on: #0f2a3a;
  --tab-on-ink: #fff;
  --grid-line: rgba(15, 42, 58, 0.05);
  --error-ink: #8a2208;
  --step-bg: #0f2a3a;
  --hero-base: rgba(255, 255, 255, .6);
  --globe-ocean-a: #d9eaf2;
  --globe-ocean-b: #a9c8d9;
  --globe-land: #fdfefe;
  --globe-land-edge: rgba(15, 42, 58, 0.28);
  --globe-grid: rgba(15, 42, 58, 0.09);
  --globe-glow: rgba(0, 128, 128, 0.28);
  --globe-pin: #007a7a;
  --globe-label: rgba(255, 255, 255, 0.9);
  --globe-label-ink: #0f2a3a;
  color-scheme: light;
}
.tone--light { --tone-bg: #f5f7f8; }
.tone--grey { --tone-bg: #e7ecef; --surface: rgba(255, 255, 255, 0.78); --card-rule: #cfd8de; }
.tone--white { --tone-bg: #ffffff; --surface: #f3f6f8; --surface-2: #eaf0f3; --card: #f6f8fa; --field: #f8fafb; }
.tone--sand { --tone-bg: #f6efe3; --card-rule: #e3d6c1; --ink-3: #56626a; --globe-ocean-a: #e4ecef; --globe-ocean-b: #bdd0d8; }
.tone--mist { --tone-bg: #e5eff6; --card-rule: #c9d9e4; }

.tone--dark, .tone--navy, .tone--black, .tone--slate, .tone--teal, .tone--plum,
.device, .shot, .compare, .calc, .cta__inner {
  --ink: rgba(255, 255, 255, 0.92);
  --ink-2: rgba(255, 255, 255, 0.72);
  --ink-3: rgba(255, 255, 255, 0.56);
  --ink-strong: #fff;
  --rule: rgba(255, 255, 255, 0.12);
  --rule-2: rgba(255, 255, 255, 0.2);
  --rule-3: rgba(255, 255, 255, 0.42);
  --act-ink: #ff7a5c;
  --link-hover: #ff9a82;
  --teal-ink: #2bc2c2;
  --em: var(--act);
  --surface: rgba(255, 255, 255, 0.045);
  --surface-2: rgba(255, 255, 255, 0.08);
  --well: rgba(0, 0, 0, 0.25);
  --card: rgba(255, 255, 255, 0.05);
  --card-rule: rgba(255, 255, 255, 0.2);
  --field: rgba(0, 0, 0, 0.28);
  --tab-on: #fff;
  --tab-on-ink: #0f2a3a;
  --grid-line: rgba(255, 255, 255, 0.035);
  --error-ink: #ffd3c9;
  --step-bg: #1d4a5e;
  --hero-base: rgba(255, 255, 255, .06);
  --globe-ocean-a: #15405a;
  --globe-ocean-b: #071722;
  --globe-land: #2b6a7c;
  --globe-land-edge: rgba(255, 255, 255, 0.22);
  --globe-grid: rgba(255, 255, 255, 0.07);
  --globe-glow: rgba(43, 194, 194, 0.42);
  --globe-pin: #2bc2c2;
  --globe-label: rgba(8, 23, 31, 0.86);
  --globe-label-ink: #fff;
  color-scheme: dark;
}
.tone--dark { --tone-bg: #0a1e2a; }
.tone--navy { --tone-bg: #0f2a3a; --card: rgba(255, 255, 255, 0.06); }
.tone--black { --tone-bg: #05090c; --step-bg: #1b2a33; }
.tone--slate { --tone-bg: #222c33; --step-bg: #33424c; --globe-ocean-a: #2c4554; --globe-ocean-b: #141d23; }
.tone--teal {
  --tone-bg: #005c5c; --teal-ink: #a6f2ec; --act-ink: #ffc3b2; --link-hover: #ffd9ce; --em: #ffb8a3;
  --step-bg: #00403f; --ink-3: rgba(255, 255, 255, 0.7); --globe-pin: #ffd9ce;
  --globe-ocean-a: #0b7a78; --globe-ocean-b: #023a3a; --globe-land: #2fa59f; --globe-glow: rgba(166, 242, 236, 0.4);
}
.tone--plum {
  --tone-bg: #2a1736; --teal-ink: #7fe3dd; --step-bg: #432757;
  --globe-ocean-a: #4a2b5f; --globe-ocean-b: #170b20; --globe-land: #7a5592; --globe-glow: rgba(186, 140, 220, 0.4);
}
/* The ground and the words; a band of colour needs room above it too. */
.tone, .how { background: var(--tone-bg); color: var(--ink); }
.tone.cta { padding-top: clamp(72px, 10vw, 140px); }
.tone .kicker { color: var(--teal-ink); }
/* A teal theme keeps its own teal off the ticks' teal circles. */
.tone--teal .ticks li::before, .tone--teal .plan__features li::before { background-color: rgba(255, 255, 255, .16); }

/* ----------------------------------------------------------- scroll reveal */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .feat.reveal { transform: none; }
.js .feat .shot.reveal, .js .feat .compare.reveal { transform: translateY(36px) scale(.98); }
.js .feat .is-in.shot, .js .feat .is-in.compare { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none !important; }
}

/* ------------------------------------------------------------ small screens */
@media (max-width: 1023px) {
  .bar__nav { display: none; }
  .bar__cta { margin-left: auto; }
  .feat__grid, .tabs__panel, .try__grid, .hero__split, .globe { grid-template-columns: minmax(0, 1fr); }
  .hero--split .hero__copy { text-align: center; }
  .hero--split .lede { margin-left: auto; margin-right: auto; }
  .hero--split .hero__actions { justify-content: center; }
  .hero--tilt .hero__split { grid-template-columns: minmax(0, 1fr); }
  .hero--tilt .device, .hero--tilt .hero__showcase:hover .device { transform: none; }
  .feat--flip .feat__copy { order: 0; }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .steps::before { display: none; }
  .principles { grid-template-columns: minmax(0, 1fr); }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__legal { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .bar__talk { display: none; }
  .btn { padding: 0 14px; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 28px 12px; }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .device { --device-r: 12px; margin-left: calc(var(--gutter) * -0.5); margin-right: calc(var(--gutter) * -0.5); }
  .device__bar { justify-content: center; text-align: center; }
  .hero__actions .btn { flex: 1 1 100%; }
  .tabs__list { width: 100%; border-radius: var(--r-lg); }
  .tabs__list button { flex: 1 1 45%; padding: 11px 10px; }
  .calc__figures { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .calc__figures > div { padding: 12px 10px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .foot__grid { grid-template-columns: minmax(0, 1fr); }
  .compare__tag { font-size: 11px; padding: 5px 9px; top: 10px; }
  .compare__tag--l { left: 10px; }
  .compare__tag--r { right: 10px; }
}