:root {
  --bg: #FFFFFF;
  --ink: #14131A;
  --ink-dim: rgba(20, 19, 26, 0.70);
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-glow: rgba(37, 99, 235, 0.35);
  --font-ui: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", "Manrope", system-ui, sans-serif;   /* headline + kinetic text: a touch sharper than the UI font */

  /* liquid glass nav */
  --glass-1: rgba(255, 255, 255, 0.55);
  --glass-2: rgba(255, 255, 255, 0.18);
  --glass-3: rgba(255, 255, 255, 0.30);
  --glass-border: rgba(255, 255, 255, 0.80);
  --glass-hi: rgba(255, 255, 255, 0.95);
  --glass-glare: rgba(255, 255, 255, 0.70);
  --glass-hover: rgba(255, 255, 255, 0.65);
  --nav-shadow: rgba(20, 19, 26, 0.12);
}

/* Black + red look, switched on by script while a data-theme="dark" section is in view */
:root.dark {
  --bg: #050505;
  --ink: #FFFFFF;
  --ink-dim: rgba(255, 255, 255, 0.72);
  --accent: #e11d2e;
  --accent-hover: #ff3040;
  --accent-glow: rgba(225, 29, 46, 0.45);

  --glass-1: rgba(255, 255, 255, 0.16);
  --glass-2: rgba(255, 255, 255, 0.04);
  --glass-3: rgba(255, 255, 255, 0.09);
  --glass-border: rgba(255, 255, 255, 0.24);
  --glass-hi: rgba(255, 255, 255, 0.45);
  --glass-glare: rgba(255, 255, 255, 0.24);
  --glass-hover: rgba(255, 255, 255, 0.15);
  --nav-shadow: rgba(0, 0, 0, 0.55);
}

/* White + yellow (gallery): the light base (no .dark) with a yellow accent */
:root.sun {
  --accent: #facc15;
  --accent-hover: #ca8a04;
  --accent-glow: rgba(250, 204, 21, 0.55);
}

/* Black + iris (pricing): violet accent to match the cyan / violet ribbon */
:root.dark.iris {
  --bg: #0B0A10;
  --accent: #6d4aff;
  --accent-hover: #9b87ff;
  --accent-glow: rgba(123, 97, 255, 0.5);
}

/* Black + sky blue (contact): blue accent to match the horizon */
:root.dark.sky {
  --bg: #02040A;
  --accent: #2f7fe0;
  --accent-hover: #5ab4ff;
  --accent-glow: rgba(63, 169, 255, 0.45);
}

/* Black + gray (Home, "We Make Websites"): static dark section with the site's blue accent */
:root.dark.slate {
  --bg: #0b0b0e;
  --accent: #2563eb;
  --accent-hover: #3b82f6;
  --accent-glow: rgba(59, 130, 246, 0.45);
}

/* Circuit: near-black with a dot grid and a lime accent (Home, section 2) */
:root.dark.circuit {
  --bg: #0a0c0f;
  --accent: #a3e635;
  --accent-hover: #bef264;
  --accent-glow: rgba(163, 230, 53, 0.4);
}

/* Black + amber (Home, "Why choose us") */
:root.dark.gold {
  --bg: #000000;
  --accent: #f59e0b;
  --accent-hover: #fbbf24;
  --accent-glow: rgba(251, 191, 36, 0.45);
}

/* Paper (About Us): a light, warm stone page; the business cards on it are matte black */
:root.paper {
  --bg: #ebe7e1;
  --ink: #17151a;
  --ink-dim: rgba(23, 21, 26, 0.66);
  --accent: #17151a;
  --accent-hover: #000000;
  --accent-glow: rgba(23, 21, 26, 0.18);
}

/* Black + rose (Pricing) */
:root.dark.rose {
  --bg: #09080a;
  --accent: #fb7185;
  --accent-hover: #fda4af;
  --accent-glow: rgba(251, 113, 133, 0.4);
}

/* Deep sea + aqua (Gallery) */
:root.dark.aqua {
  --bg: #041014;
  --accent: #22d3ee;
  --accent-hover: #67e8f9;
  --accent-glow: rgba(34, 211, 238, 0.4);
}

/* Black + green: same dark base, green accent */
:root.dark.green {
  --accent: #16a34a;
  --accent-hover: #22c55e;
  --accent-glow: rgba(34, 197, 94, 0.45);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;            /* iOS: don't inflate text when the phone turns */
  text-size-adjust: 100%;
  scrollbar-gutter: stable;                 /* reserve the scrollbar's width always, so nothing re-centres when a page grows taller */
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  -webkit-tap-highlight-color: transparent;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: color 0.6s ease;
}

/* ---------- Background (WebGL ribbon) ---------- */
/* Phones: every full-screen size on the site uses svh / lvh, never dvh. dvh changes while you scroll (the browser's
   toolbar slides in and out), which resized every section and the WebGL backgrounds mid-scroll and made the page jump. */
#bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100lvh;                          /* tall enough for the toolbar-hidden screen, so the canvas never resizes */
  z-index: 0;
  background: var(--bg);
  transition: background-color 0.6s ease;
  /* every page: soften the ribbon. Scaled up a touch so the blur's faded edges stay off-screen. */
  filter: blur(24px);
  transform: scale(1.1);
}

/* Fallback when WebGL2 isn't available */
.no-webgl #bg {
  background:
    radial-gradient(55% 50% at 78% 25%, rgba(37, 99, 235, 0.28), transparent 70%),
    radial-gradient(50% 45% at 20% 80%, rgba(56, 189, 248, 0.28), transparent 70%),
    var(--bg);
}
.no-webgl.dark.green #bg {
  background:
    radial-gradient(55% 50% at 78% 25%, rgba(34, 197, 94, 0.30), transparent 70%),
    radial-gradient(50% 45% at 20% 80%, rgba(6, 95, 44, 0.40), transparent 70%),
    var(--bg);
}
.no-webgl.dark #bg {
  background:
    radial-gradient(55% 50% at 78% 25%, rgba(225, 29, 46, 0.35), transparent 70%),
    radial-gradient(50% 45% at 20% 80%, rgba(140, 0, 20, 0.35), transparent 70%),
    var(--bg);
}

/* ---------- Liquid glass nav ---------- */
.nav-wrap {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + clamp(10px, 2vh, 18px));
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  padding: 0 12px;
  pointer-events: none;
}

.glass-nav {
  pointer-events: auto;
  position: relative;
  max-width: 100%;
  padding: 5px;
  isolation: isolate;
  z-index: 1;
}

/* the liquid glass itself: a layer behind the labels, so nav-goo.js can clip it into shape without touching the text */
.glass-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 999px;
  background:
    linear-gradient(180deg, var(--glass-1), var(--glass-2) 55%, var(--glass-3));
  -webkit-backdrop-filter: blur(16px) saturate(190%);
  backdrop-filter: blur(16px) saturate(190%);
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 1.5px 0 var(--glass-hi),              /* top specular edge */
    inset 1.5px 0 1px rgba(255, 255, 255, 0.22),
    inset -1.5px 0 1px rgba(255, 255, 255, 0.1),
    inset 0 -1.5px 1px rgba(255, 255, 255, 0.2),
    inset 0 -12px 18px -10px rgba(255, 255, 255, 0.2),
    inset 0 0 16px rgba(255, 255, 255, 0.08),
    0 10px 28px var(--nav-shadow),
    0 2px 6px var(--nav-shadow);
}

/* soft glare sweeping across the glass */
.glass-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(120% 140% at 12% -40%, var(--glass-glare), transparent 52%),
    radial-gradient(80% 120% at 100% 140%, rgba(255, 255, 255, 0.12), transparent 55%);
}

/* three columns: the two sides are always the same width, so STOHRX in the middle sits at the exact centre of the screen.
   The narrower side's links widen a little to fill their half (no empty glass at its end). */
.links {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2px;
  list-style: none;
}
.nav-side > ul {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
}
.nav-side > ul > li { flex: 1 1 auto; }

.links a {
  display: block;
  text-align: center;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.005em;
  white-space: nowrap;
  color: var(--ink-dim);
  text-decoration: none;
  transition: background 0.4s ease, color 0.4s ease, box-shadow 0.4s ease, text-shadow 0.4s ease;
}

.links a:hover,
.links a:focus-visible {
  color: var(--ink);
  background: var(--glass-hover);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 2px 6px var(--nav-shadow);
  outline: none;
}

/* STOHRX = home button, centre of the bar */
.links a.home {
  margin: 0 4px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--ink);
}
.links a.home span { color: var(--c); }       /* each letter in its brand colour, like the big STOHRX on the hero */
/* light pages: a faint dark edge so the pale letters (the yellow X) still read on the glass */
:root:not(.dark) .links a.home:not(.is-active) span { text-shadow: 0 0 1px rgba(0, 0, 0, 0.45); }

/* Dashboard = the one solid pill, in the accent colour (blue → red) */
.links a.cta {
  margin-left: 4px;
  color: #fff;
  background: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 8px var(--accent-glow);
}

.links a.cta:hover,
.links a.cta:focus-visible {
  color: #fff;
  background: var(--accent-hover);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40), 0 3px 10px var(--accent-glow);
}

/* Active tab: nav-goo.js closes the glass in around it (clip-path on .glass-bg). The real border / box-shadow would
   be cut off by that clip, so while carved they're swapped for a rim line and a soft shadow drawn along the same outline. */
.nav-shadow,
.nav-rim {
  position: absolute;
  display: none;
  overflow: visible;
  pointer-events: none;
}
.nav-shadow { z-index: 0; }
.nav-rim { z-index: 3; }
.nav-shadow path { fill: var(--nav-shadow); filter: blur(9px); transform: translateY(8px); }
.nav-rim path { fill: none; stroke: url(#navRimGrad); stroke-width: 1.2; }
.nav-wrap.is-carved .nav-shadow,
.nav-wrap.is-carved .nav-rim { display: block; }
.glass-nav.is-carved .glass-bg { border-color: transparent; box-shadow: none; }

/* the tab left outside the glass: bright, with a soft glow in the section's accent colour */
.links a.is-active {
  color: var(--ink);
  text-shadow:
    0 0 10px color-mix(in srgb, var(--accent-hover) 80%, transparent),
    0 0 26px var(--accent-glow);
  animation: navTextGlow 3.2s ease-in-out infinite;
}
/* the tab outside the glass doesn't get a glass pill back on hover */
.links a.is-active:hover,
.links a.is-active:focus-visible { background: transparent; box-shadow: none; }
.links a.cta.is-active:hover,
.links a.cta.is-active:focus-visible { background: var(--accent-hover); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 3px 10px var(--accent-glow); }
@keyframes navTextGlow {
  0%, 100% { text-shadow: 0 0 8px color-mix(in srgb, var(--accent-hover) 70%, transparent), 0 0 20px var(--accent-glow); }
  50%      { text-shadow: 0 0 14px color-mix(in srgb, var(--accent-hover) 95%, transparent), 0 0 34px var(--accent-glow); }
}

/* the page has two views: the scrolling home page, and the Gallery (only shown once Gallery is pressed) */
.view[hidden] { display: none; }

/* ---------- Contact us button (top right) ---------- */
.contact-fab {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + clamp(13px, calc(2vh + 3px), 21px));
  right: calc(env(safe-area-inset-right, 0px) + clamp(12px, 2.2vw, 30px));
  z-index: 11;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px 9px 12px;
  border-radius: 999px;
  color: var(--ink);
  font: 700 13px/1 var(--font-ui);
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  background: linear-gradient(180deg, var(--glass-1), var(--glass-2) 55%, var(--glass-3));
  -webkit-backdrop-filter: blur(16px) saturate(190%);
  backdrop-filter: blur(16px) saturate(190%);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1.5px 0 var(--glass-hi), inset 0 -1.5px 1px rgba(255, 255, 255, 0.18), inset 0 0 14px rgba(255, 255, 255, 0.08), 0 8px 22px var(--nav-shadow);
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.25, 1.3), box-shadow 0.3s ease, color 0.4s ease, background 0.4s ease;
}
.contact-fab svg { width: 17px; height: 17px; flex: none; }
.contact-fab:hover, .contact-fab:focus-visible { transform: translateY(-2px) scale(1.04); box-shadow: inset 0 1.5px 0 var(--glass-hi), 0 12px 28px var(--nav-shadow), 0 0 26px var(--accent-glow); outline: none; }
html[data-view="contact"] .contact-fab { background: var(--accent); color: #fff; border-color: transparent; }
/* mid-width screens: just the envelope, so the button never runs into the centred nav bar */
@media (min-width: 701px) and (max-width: 900px) {
  .contact-fab { padding: 10px; }
  .contact-fab .cf-text { display: none; }
}

/* ---------- Hero ---------- */
/* Dark hero: the Hex Comb (hexcomb.js) fills it; STOHRX + "Reimagining websites" sit up and to the left, off centre */
.hero {
  position: relative;
  z-index: 5;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: start;
  justify-items: start;
  background: #080a10;
  color: #fff;
  padding: clamp(130px, 22vh, 240px) max(clamp(20px, 5vw, 72px), calc((100% - 1360px) / 2 + clamp(20px, 5vw, 72px))) 48px;   /* same left edge as the sections below */
}

.hero-field {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero-field canvas { display: block; width: 100%; height: 100%; }
.hero-field::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(3, 4, 7, 0.55) 75%, rgba(3, 4, 7, 0.92) 100%);
}

/* a soft dark pool behind the words so the brightest dots never sit right behind the letters */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(60% 55% at 22% 30%, rgba(8, 5, 18, 0.55), transparent 70%);
}

.hero-copy { position: relative; }

.wordmark {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(2px, 0.8vw, 14px);
  margin-left: -0.03em;                    /* the S's curve lines up optically with the tagline below */
  font-size: clamp(56px, 10.5vw, 168px);
  line-height: 1;
  font-weight: 400;
  user-select: none;
}

/* "Reimagining websites": rises in just after the letters */
.hero-tag {
  margin-top: clamp(14px, 2.4vh, 26px);
  font: 500 clamp(20px, 2.3vw, 34px)/1.1 var(--font-display);
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.82);
  opacity: 0;
  animation: rise 0.8s cubic-bezier(0.2, 0.9, 0.25, 1.1) 0.75s forwards;
}

/* Original flat letters (brand colour + their own face) with just a soft drop shadow */
.l {
  display: inline-block;
  line-height: 1;
  color: var(--c);
  filter:
    drop-shadow(0 0.02em 0.03em rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 0.18em color-mix(in srgb, var(--c) 35%, transparent));   /* faint glow in the letter's own colour on the dark hero */
  opacity: 0;
  /* rise animates `translate`; float animates `transform`, so they stack instead of fighting */
  animation:
    rise 0.8s cubic-bezier(0.2, 0.9, 0.25, 1.1) forwards,
    float var(--fd, 6s) ease-in-out infinite;
  animation-delay: calc(0.15s + var(--i) * 0.08s), calc(var(--i) * -1.3s);
}

/* every letter drifts on its own slow cycle so the word never moves in lockstep */
.l:nth-child(1) { --fd: 6.0s; }
.l:nth-child(2) { --fd: 7.3s; }
.l:nth-child(3) { --fd: 5.6s; }
.l:nth-child(4) { --fd: 6.8s; }
.l:nth-child(5) { --fd: 7.9s; }
.l:nth-child(6) { --fd: 6.3s; }

/* Each letter borrows a different face from the original site.
   Sizes are nudged so the six faces read at a similar visual weight. */
.l-s { font-family: "Shrikhand", cursive;                font-size: 1em; }
.l-t { font-family: "Rubik Glitch", system-ui;           font-size: 1em; }
.l-o { font-family: "Baloo 2", sans-serif;  font-weight: 800; font-size: 1.1em; }
.l-h { font-family: "Press Start 2P", monospace;         font-size: 0.7em; }
.l-r { font-family: "Anton", sans-serif;                 font-size: 1.15em; }
.l-x { font-family: "Bowlby One", sans-serif;            font-size: 0.95em; }

@keyframes float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%      { transform: translate(0.012em, -0.045em) rotate(1.5deg); }
  50%      { transform: translate(-0.008em, -0.02em) rotate(-1deg); }
  75%      { transform: translate(-0.012em, 0.03em) rotate(-1.8deg); }
}

@keyframes rise {
  from { opacity: 0; translate: 0 0.4em; }
  to   { opacity: 1; translate: 0 0; }
}

/* ---------- Scroll down button #7 (chevron cascade) ---------- */
.scroll-down {
  position: absolute;
  bottom: 28px;
  left: 50%;
  z-index: 2;
  display: inline-block;
  padding-top: 80px;                       /* room for the three chevrons above the label */
  transform: translateX(-50%);
  color: var(--ink);
  font: 600 13px/1 var(--font-ui);
  letter-spacing: 0.22em;
  text-indent: 0.22em;                     /* balances the trailing letter-spacing so the label centres */
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.3s;
}

.scroll-down:hover,
.scroll-down:focus-visible { opacity: 0.5; outline: none; }

.scroll-down span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg);
  animation: sdb07 2s infinite;
  opacity: 0;
  box-sizing: border-box;
}

.scroll-down span:nth-of-type(1) { animation-delay: 0s; }
.scroll-down span:nth-of-type(2) { top: 16px; animation-delay: 0.15s; }
.scroll-down span:nth-of-type(3) { top: 32px; animation-delay: 0.3s; }

@keyframes sdb07 {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0; }
}


/* ---------- Dark section: copy on the left, floating page on the right ---------- */
.next {
  position: relative;
  z-index: 5;
  min-height: 100vh;
  min-height: 100svh;                    /* fills the whole screen like the hero and "Meet the dashboard" */
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;          /* headline row hugs its text; the leftover height goes to the two columns */
  align-items: stretch;                  /* both columns fill the screen's height, so their last items can sit low */
  column-gap: clamp(32px, 6vw, 128px);
  row-gap: clamp(20px, 4vh, 64px);
  background: #0a0c0f;                   /* flat near-black: the dot grid below gives it its texture */
  --accent: #a3e635;                     /* lime inside this section whatever theme the page is switching to as you scroll past */
  --accent-hover: #bef264;
  --accent-glow: rgba(163, 230, 53, 0.4);
  padding: clamp(100px, 15vh, 210px) max(clamp(20px, 5vw, 72px), calc((100% - 1120px) / 2)) clamp(56px, 10vh, 160px);   /* same frame as the sections below: a centred 1120px column with room above and below */
}
.next::before {                          /* fine dot grid, fading out towards the edges */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1.5px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(80% 75% at 50% 50%, #000 35%, transparent 100%);
  mask-image: radial-gradient(80% 75% at 50% 50%, #000 35%, transparent 100%);
}
.next .learn-more { color: #111a04; }   /* lime is light: dark text on its buttons */

/* headline spans the top (one line). Left: keywords at the top, the paragraph + About us down at the bottom.
   Right: the floating page at the top, the scroll cue down at the bottom. The space between grows with the screen. */
.headline { grid-column: 1 / -1; }
.next-copy {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.next-side {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;                /* buttons + preview sit in the middle of the column */
}
/* short laptop screens: the same layout, with the minimum gaps tightened so it still fits one screen */
@media (min-width: 821px) and (max-height: 800px) {
  .next { padding-top: 86px; padding-bottom: 28px; row-gap: 14px; column-gap: 48px; }
  .keywords { gap: 10px; margin-bottom: 26px; }
  .kw { font-size: clamp(24px, 2.8vw, 40px); }
  .kw-last { font-size: clamp(32px, 3.8vw, 54px); }
  .next-side { padding-top: 0; }
  .next .stage-ctas { margin-bottom: 16px; }
}
.next-side .stage { width: 100%; }

/* what we do after launch: short, easy to scan, the key verbs in white */
.next-about {
  max-width: 46ch;
  margin-top: auto;                                /* sits at the bottom of the column */
  padding-left: 18px;
  border-left: 2px solid rgba(163, 230, 53, 0.55);
  font: 500 clamp(15.5px, 1.1vw, 19px)/1.6 var(--font-ui);
  color: rgba(255, 255, 255, 0.7);
}
.next-about p + p { margin-top: 0.85em; }
.next-about b { color: #fff; font-weight: 700; }
.about-cta { margin: clamp(18px, 2.6vh, 26px) 0 0 20px; padding: 12px 24px; font-size: 15px; }


/* "We Make Websites" (top-left) */
.headline {
  width: max-content;
  white-space: nowrap;
  font: 400 clamp(18px, 1.9vw, 30px)/1.2 var(--font-display);
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.55);
}

/* Four bold bubbly keywords, well spaced and sitting lower; the last is bigger, in its own colour, and a link */
.keywords {
  list-style: none;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;                         /* the keywords share out all the free height above the paragraph */
  justify-content: space-evenly;
  gap: clamp(14px, 3vh, 36px);
  margin: clamp(8px, 2vh, 28px) 0 clamp(24px, 4vh, 70px);
}

.kw {
  font: 800 clamp(26px, 3.2vw, 58px)/1.04 "Poppins", var(--font-ui);
  letter-spacing: -0.03em;
  color: #fff;
  white-space: nowrap;
}

.kw-last {
  margin-top: clamp(4px, 1vh, 12px);
  font-size: clamp(36px, 4.6vw, 78px);
  color: #bef264;                          /* one clean lime, with a soft underline */
  text-shadow: 0 0 0.5em rgba(163, 230, 53, 0.22);
}
.kw-last a::before {                       /* the underline */
  content: "";
  position: absolute;
  left: 0.04em;
  right: 0.08em;
  bottom: -0.03em;
  height: 0.07em;
  border-radius: 1em;
  background: currentColor;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}
.kw-last a:hover::before,
.kw-last a:focus-visible::before { opacity: 0.9; }

/* Affordable. -> Pricing */
.kw-last a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.3s ease;
}
.kw-last a { position: relative; }
.kw-last a::after {                      /* arrow that slides in on hover (out of flow, so it never shifts the word) */
  content: "\2192";
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 0.18em;
  opacity: 0;
  transform: translateX(-0.35em);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.kw-last a:hover,
.kw-last a:focus-visible { transform: translateX(6px); filter: drop-shadow(0 0 18px rgba(163, 230, 53, 0.5)); outline: none; }
.kw-last a:hover::after,
.kw-last a:focus-visible::after { opacity: 1; transform: none; }

/* ---- Easter eggs on Intuitive. / Clear. / To the Point. (eggs.js) ---- */
.kw-egg {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.25, 1.3);
}
.kw-egg:hover { transform: translateY(-3px) rotate(-1.5deg); }          /* a little lift: something's here */
.kw-egg:active { transform: translateY(-1px) scale(0.97); transition-duration: 0.1s; }
.kw-egg:focus-visible { outline: 2px solid rgba(190, 242, 100, 0.8); outline-offset: 6px; border-radius: 8px; }

/* Intuitive.: the bulb sits just after the word */
.egg-bulb {
  position: absolute;
  left: 100%;
  top: 50%;
  width: 0.78em;
  height: 1.04em;
  margin-left: 0.22em;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-62%) scale(0.2) rotate(-25deg);
  transform-origin: 50% 90%;
}
.egg-bulb svg { display: block; width: 100%; height: 100%; overflow: visible; transition: filter 0.06s linear; }
.egg-bulb.is-in { animation: bulb-pop 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.4) forwards; }
.egg-bulb.is-out { animation: bulb-out 0.4s ease forwards; }
@keyframes bulb-pop {
  from { opacity: 0; transform: translateY(-62%) scale(0.2) rotate(-25deg); }
  to   { opacity: 1; transform: translateY(-62%) scale(1) rotate(8deg); }
}
@keyframes bulb-out {
  from { opacity: 1; transform: translateY(-62%) scale(1) rotate(8deg); }
  to   { opacity: 0; transform: translateY(-62%) scale(0.6) rotate(8deg); }
}
.bulb-glass { fill: rgba(255, 255, 255, 0.08); stroke: rgba(255, 255, 255, 0.75); stroke-width: 2; transition: fill 0.06s linear, stroke 0.06s linear; }
.bulb-fil { fill: none; stroke: rgba(255, 255, 255, 0.5); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.06s linear; }
.bulb-base { fill: #9ca3af; }
.bulb-rays line {
  stroke: #fde047;
  stroke-width: 2.6;
  stroke-linecap: round;
  opacity: 0;
  transform-origin: 24px 21px;
  transform: scale(0.6);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.9, 0.25, 1.4);
}
.egg-bulb.is-lit svg { filter: drop-shadow(0 0 0.12em rgba(253, 224, 71, 0.9)) drop-shadow(0 0 0.4em rgba(250, 204, 21, 0.55)); }
.egg-bulb.is-lit .bulb-glass { fill: #fde68a; stroke: #fef9c3; }
.egg-bulb.is-lit .bulb-fil { stroke: #ffffff; }
.egg-bulb.is-full .bulb-rays line { opacity: 1; transform: scale(1); }

/* Clear.: for a second the letters go see-through, leaving a clean outline. Nothing moves. */
.kw-egg[data-egg="glass"] {
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0);
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.25, 1.3), color 0.25s ease, -webkit-text-stroke-color 0.25s ease, text-shadow 0.25s ease;
}
.kw-egg.is-glass {
  color: rgba(255, 255, 255, 0.04);
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 0 22px rgba(255, 255, 255, 0.16);
}

/* To the Point.: the arrow's tip lands in "Point", coming in from the upper right at an angle */
.egg-arrow {
  position: absolute;
  left: 80%;
  top: 50%;
  width: 2.7em;
  height: 0.53em;
  margin-top: -0.265em;
  pointer-events: none;
  opacity: 0;
  rotate: -28deg;
  transform-origin: 0 50%;                 /* everything turns around the tip */
}
.egg-arrow svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45)); }
.egg-arrow.is-shot {
  opacity: 1;
  animation:
    arrow-fly 0.28s cubic-bezier(0.5, 0, 1, 1) both,
    arrow-quiver 0.6s ease-out 0.28s;
}
.egg-arrow.is-shot.is-out { opacity: 0; transition: opacity 0.4s ease; }
@keyframes arrow-fly {                     /* straight along its own line: 0.883 / -0.469 is the -28deg direction */
  from { translate: 55vw -29.2vw; }
  to   { translate: 0 0; }
}
@keyframes arrow-quiver {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(-5deg); }
  30%  { transform: rotate(4deg); }
  45%  { transform: rotate(-3deg); }
  60%  { transform: rotate(2deg); }
  78%  { transform: rotate(-1deg); }
  100% { transform: rotate(0deg); }
}
.arr-shaft { stroke: #e5e7eb; stroke-width: 3; stroke-linecap: round; }
.arr-head { fill: #cbd5e1; }
.arr-feather { fill: #a3e635; }
.arr-feather-2 { fill: #ecfccb; }
.kw-egg.is-hit { animation: kw-hit 0.45s ease-out; }
@keyframes kw-hit {                        /* knocked back the way the arrow was travelling */
  0%   { translate: 0 0; }
  20%  { translate: -7px 4px; }
  45%  { translate: 3px -2px; }
  70%  { translate: -1.5px 1px; }
  100% { translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .kw-egg, .kw-egg:hover { transition: none; transform: none; }
  .egg-bulb.is-in { animation: none; opacity: 1; transform: translateY(-62%) rotate(8deg); }
  .egg-arrow.is-shot { animation: none; }
  .kw-egg.is-hit { animation: none; }
}


/* ---- Floating page (3D card): previews boffos.ca, turns to face the cursor, links to the Gallery ---- */
.stage {
  position: relative;
  display: grid;
  justify-items: center;
  perspective: 1500px;
}

/* the un-rotated hit area: hovering it (not the moving card) steers the tilt, so the card can't flicker at its edges */
.card-wrap {
  position: relative;
  width: min(100%, clamp(400px, 31vw, 620px));     /* grows with the screen */
  aspect-ratio: 16 / 10.5;
}

.card {
  position: absolute;
  inset: 0;
  display: block;
  transform-style: preserve-3d;
  will-change: transform;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.card:focus-visible .front { box-shadow: 0 0 0 3px var(--accent-hover), 0 30px 80px rgba(0, 0, 0, 0.6); }

.face,
.slab {
  position: absolute;
  inset: 0;
  border-radius: 18px;
}

/* thickness: a stack of slightly-offset blue slabs behind the front face */
.slab {
  background: #3f6212;                   /* deep lime edge, matching the section */
  transform: translateZ(var(--z));
}

.face {
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  container-type: inline-size;       /* lets the browser bar scale with the card (cqw units) */
}

.front {
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #14131A;
  transform: translateZ(0.5px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: box-shadow 0.3s ease;
}
.card:hover .front { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 2px var(--accent-hover), 0 0 60px var(--accent-glow); }

/* soft blue pool of light under the floating card */
.stage-shadow {
  position: absolute;
  bottom: 4%;
  left: 50%;
  width: 70%;
  height: 12%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(163, 230, 53, 0.28), transparent);
  filter: blur(14px);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.6s ease;
}
:root.dark .stage-shadow { opacity: 1; }

.hint {
  position: absolute;
  bottom: -34px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  pointer-events: none;
}

/* ---- Browser bar + site screenshot on the card's front ---- */
.m-bar {
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  height: 8.5cqw;
  padding: 0 3cqw;
  background: #eef0f4;
  border-bottom: 1px solid #dfe2e8;
}
.m-bar i {
  width: 1.9cqw;
  height: 1.9cqw;
  border-radius: 50%;
  background: #ff5f57;
}
.m-bar i:nth-child(2) { background: #febc2e; }
.m-bar i:nth-child(3) { background: #28c840; }
.m-url {
  margin-left: 2cqw;
  padding: 0.9cqw 3cqw;
  border-radius: 99px;
  background: #fff;
  font: 600 2.2cqw/1 var(--font-ui);
  color: #6b6f7b;
}

.m-shot {
  display: block;
  flex: 1;
  min-height: 0;
  width: 100%;
  object-fit: cover;
  object-position: top left;
}

/* ---------- "More than just a website": a light, calm product switcher (systab.js) ----------
   Tabs on the left, the real dashboard in the middle, the words on the right. One screen tall on every laptop. */
.sys2 {
  --ink: #16171b;
  --ink-2: #4b4e57;
  --line: #e3e5ea;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pad-x: max(clamp(20px, 5vw, 72px), calc((100% - 1280px) / 2 + clamp(20px, 5vw, 72px)));
  --side-w: 330px;                                          /* the tabs column */
  --gap-x: clamp(32px, 4vw, 64px);
  position: relative;
  overflow: hidden;
  z-index: 5;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f5f7;
  color: var(--ink);
  padding: clamp(92px, 12vh, 116px) var(--pad-x) clamp(36px, 6vh, 64px);
}
.sys2-wrap {
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr);
  align-items: center;
  gap: var(--gap-x);
  width: 100%;
}
.sys2-stage { display: grid; }

/* left: the title, one line, and the tabs */
.sys2-title {
  font: 500 clamp(34px, 3.2vw, 48px)/1.08 var(--font-display);
  letter-spacing: -0.03em;
}
.sys2-lead {
  margin-top: 14px;
  font: 500 16px/1.55 var(--font-ui);
  color: var(--ink-2);
}
.sys2-tabs {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: clamp(22px, 4vh, 36px) 0 0 -22px;                 /* the highlight overhangs the text's left edge a little */
}
.sys2-pill {                                                /* the white highlight that slides to the chosen tab */
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 24px rgba(16, 24, 40, 0.08);
  pointer-events: none;
}
.sys2-tabs.is-ready .sys2-pill { transition: transform 0.5s var(--ease), width 0.5s var(--ease), height 0.5s var(--ease); }
.sys2-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 22px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-2);
  font: 500 18px/1.2 var(--font-ui);
  text-align: left;
  cursor: pointer;
  transition: color 0.3s;
}
.sys2-tab:hover { color: var(--ink); }
.sys2-tab[aria-selected="true"] { color: var(--ink); }
.sys2-tab:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.sys2-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 12%, #fff);
  color: var(--c);
}
.sys2-ic svg, .sys2-chev {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sys2-chev { margin-left: auto; color: var(--ink); opacity: 0; transform: translateX(-6px); transition: opacity 0.3s, transform 0.4s var(--ease); }
.sys2-tab[aria-selected="true"] .sys2-chev { opacity: 1; transform: none; }

/* right: the real dashboard, full size, from just past the tabs to the right edge of the screen and the full height of
   the section. It is positioned against the section itself (the stage and grid around it stay static on purpose). */
.sys2-shots {
  position: absolute;
  top: clamp(82px, 10.5vh, 96px);                          /* starts under the nav, so the nav never sits on the dark picture */
  bottom: clamp(24px, 4vh, 40px);
  right: 0;
  border-radius: 28px 0 0 28px;
  left: calc(var(--pad-x) + var(--side-w) + var(--gap-x));
  overflow: hidden;
  background: #0d1117;
}
.sv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 0.45s, transform 0.45s;
}
.sv.is-on { opacity: 1; transform: none; transition: opacity 0.6s, transform 1.1s var(--ease); }
.sys2-shots::after {                                        /* a soft shade on the left so the glass reads well on any screenshot */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(8, 10, 16, 0.55), rgba(8, 10, 16, 0.1) 60%, transparent);
}

/* the words, in a liquid-glass panel sitting on the picture (liquid.js adds the lens bend on desktop Chrome) */
.sys2-glass {
  position: relative;
  z-index: 1;
  justify-self: start;
  width: min(460px, 100%);
  margin-left: clamp(28px, 4vw, 64px);
  padding: clamp(26px, 3.4vh, 36px) clamp(24px, 2.4vw, 34px);
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.07) 55%, rgba(255, 255, 255, 0.12));
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 24px rgba(255, 255, 255, 0.06),
    0 30px 70px -20px rgba(0, 0, 0, 0.55);
  color: #fff;
}
.sys2-copy { display: grid; }
.sc {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.2s, transform 0.2s, visibility 0s 0.2s;
}
.sc.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.5s 0.15s, transform 0.7s 0.15s var(--ease), visibility 0s; }
.sc-eyebrow {
  font: 600 13px/1 var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.sc-title {
  margin-top: 14px;
  font: 500 clamp(27px, 2.3vw, 36px)/1.14 var(--font-display);
  letter-spacing: -0.025em;
}
.sc-pts { list-style: none; display: grid; gap: 12px; margin-top: 22px; padding: 0; }
.sc-pts li {
  position: relative;
  padding-left: 30px;
  font: 500 16px/1.45 var(--font-ui);
  color: rgba(255, 255, 255, 0.94);
}
.sc-pts li::before {                                        /* a plain tick, in lime */
  content: "";
  position: absolute;
  left: 3px;
  top: 4px;
  width: 6px;
  height: 11px;
  border: solid #a3e635;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.sc-dash {
  grid-row: 2;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  font: 500 14.5px/1.55 var(--font-ui);
  color: rgba(255, 255, 255, 0.8);
}
.sc-cta {
  grid-row: 3;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 14px 22px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: 700 15px/1 var(--font-ui);
  text-decoration: none;
  transition: background-color 0.2s;
}
.sc-cta i { font-style: normal; transition: transform 0.25s var(--ease); }
.sc-cta:hover, .sc-cta:focus-visible { background: #ecfccb; }
.sc-cta:hover i, .sc-cta:focus-visible i { transform: translateX(4px); }
.sc-cta:focus-visible { outline: 2px solid #a3e635; outline-offset: 3px; }

/* tablets and phones: title and tabs on top, then the picture as a wide card running off the right edge with the glass on it */
@media (max-width: 1080px) {
  .sys2 { align-items: flex-start; }
  .sys2-wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .sys2-tabs { max-width: 420px; }
  .sys2-stage {
    position: relative;
    display: grid;
    min-height: 520px;
    margin-right: calc(-1 * var(--pad-x));
    padding: 28px;
    border-radius: 22px 0 0 22px;
    overflow: hidden;
  }
  .sys2-shots { top: 0; bottom: 0; left: 0; }
  .sys2-glass { margin: auto 0; align-self: center; }
}
/* phones: one column; the tabs become a row of three */
@media (max-width: 700px) {
  .sys2 { padding: calc(env(safe-area-inset-top, 0px) + 100px) 20px 44px; }
  .sys2-wrap { gap: 22px; }
  .sys2-title { font-size: clamp(32px, 9.6vw, 42px); }
  .sys2-lead { font-size: 15.5px; }
  .sys2-tabs { flex-direction: row; gap: 0; max-width: none; margin: 22px 0 0; padding: 4px; border-radius: 999px; background: #e8eaee; }
  .sys2-tab { flex: 1 1 0; justify-content: center; gap: 6px; padding: 11px 4px; font-size: 13.5px; white-space: nowrap; }
  .sys2-ic, .sys2-chev { display: none; }
  .sys2-stage { min-height: 0; padding: 16px; }
  .sys2-glass { width: 100%; padding: 22px 20px; border-radius: 20px; }
  .sc-title { font-size: clamp(25px, 7.4vw, 30px); }
  .sc-pts li { font-size: 15px; }
  .sc-cta { justify-self: stretch; justify-content: center; padding: 15px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .sys2 *, .sys2-tabs.is-ready .sys2-pill { transition-duration: 0.01s !important; transition-delay: 0s !important; }
}

/* ---------- "Why your own website": the marketing case, with real numbers. White, after the grey systems section ---------- */
.mkt {
  --ink: #16171b;
  --ink-2: #4b4e57;
  --line: #e3e5ea;
  position: relative;
  z-index: 5;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--ink);
  padding: clamp(92px, 12vh, 116px) max(clamp(20px, 5vw, 72px), calc((100% - 1280px) / 2 + clamp(20px, 5vw, 72px))) clamp(40px, 7vh, 72px);
}
.mkt-wrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(36px, 6vw, 110px);
  width: 100%;
}
.mkt-eyebrow {
  font: 600 13px/1 var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.mkt-title {
  margin-top: 14px;
  font: 500 clamp(32px, 3.1vw, 48px)/1.1 var(--font-display);
  letter-spacing: -0.03em;
}
.mkt-lead {
  margin-top: 18px;
  font: 500 16.5px/1.6 var(--font-ui);
  color: var(--ink-2);
}
.mkt-lead + .mkt-lead { margin-top: 12px; }
.mkt-lead b { color: var(--ink); font-weight: 700; }

/* the numbers: a 2 x 2 grid split by thin rules, like a printed fact sheet */
.mkt-stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0;
  border-top: 1px solid var(--line);
}
.mkt-stat {
  padding: clamp(18px, 3vh, 30px) clamp(18px, 2vw, 32px) clamp(18px, 3vh, 30px) 0;
  border-bottom: 1px solid var(--line);
}
.mkt-stat:nth-child(even) { padding-left: clamp(18px, 2vw, 32px); padding-right: 0; border-left: 1px solid var(--line); }
.mkt-num {
  display: block;
  font: 500 clamp(40px, 4vw, 60px)/1 var(--font-display);
  letter-spacing: -0.04em;
  color: var(--ink);
}
.mkt-num small { font-size: 0.5em; letter-spacing: -0.02em; margin-left: 2px; }
.mkt-num.is-lime {                                          /* two of the four numbers, corner to corner: bigger, heavier, lime */
  color: #7ccf0b;
  font-weight: 700;
  font-size: clamp(50px, 5vw, 76px);
  letter-spacing: -0.045em;
}
.mkt-what {
  margin-top: 10px;
  font: 600 15.5px/1.45 var(--font-ui);
  color: var(--ink);
}
.mkt-src {
  display: block;
  margin-top: 8px;
  font: 500 12.5px/1.4 var(--font-ui);
  color: #62666f;
  text-decoration: underline;
  text-decoration-color: #d5d8de;
  text-underline-offset: 3px;
}
.mkt-src:hover { color: var(--ink); text-decoration-color: currentColor; }


@media (max-width: 1000px) {
  .mkt-wrap { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}
@media (max-width: 700px) {
  .mkt { align-items: flex-start; padding: calc(env(safe-area-inset-top, 0px) + 100px) 20px 44px; }
  .mkt-title { font-size: clamp(30px, 8.8vw, 38px); }
  .mkt-lead { font-size: 15.5px; }
  .mkt-stat { padding: 18px 12px 18px 0; }
  .mkt-stat:nth-child(even) { padding: 18px 0 18px 14px; }
  .mkt-num { font-size: clamp(34px, 10vw, 44px); }
  .mkt-num.is-lime { font-size: clamp(40px, 12vw, 52px); }
  .mkt-what { font-size: 14px; }
  .mkt-src { font-size: 11.5px; }
}

/* ---------- "How it works": three numbers pulse in the middle; press one to see that step (steps.js) ---------- */
/* The weave behind is drawn tiny and stretched (caustic.js), so it is soft and cheap; nothing here uses backdrop-filter. */
.why {
  position: relative;
  z-index: 5;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #000;
  color: #fff;
  --accent: #f59e0b;
  --accent-hover: #fbbf24;
  --accent-glow: rgba(251, 191, 36, 0.4);
  padding: clamp(96px, 12vh, 124px) max(clamp(20px, 5vw, 72px), calc((100% - 1360px) / 2 + clamp(20px, 5vw, 72px))) 0;
}
.why-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #000;
}
/* without WebGL: a still, soft silver sweep in the same colours */
.why-bg:not(.is-live) {
  background: conic-gradient(from 200deg at 70% 35%, #000, #a0acac, #000 40%, #3a4040 70%, #000);
  filter: blur(56px);
}
.why-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* joins onto the section above, and dims the weave, most of all in the middle where the numbers sit */
.why::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, #0b0a14 0%, rgba(11, 10, 20, 0) 20%),
    radial-gradient(50% 45% at 50% 50%, rgba(4, 5, 7, 0.55), transparent 100%),
    rgba(4, 5, 7, 0.45);
}

.hiw {
  margin: auto 0;
  width: min(760px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hiw-title {
  font: 600 clamp(18px, 1.6vw, 22px)/1.1 var(--font-display);
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.7);
}
.hiw-nums {
  position: relative;
  display: flex;
  gap: clamp(28px, 6vw, 88px);
  margin-top: clamp(28px, 5vh, 48px);
}
.hiw-nums::before {                          /* a faint line joining the three */
  content: "";
  position: absolute;
  left: 40px;
  right: 40px;
  top: 50%;
  height: 1px;
  background: rgba(251, 191, 36, 0.25);
}
.hiw-n {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(84px, 9vw, 120px);
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(251, 191, 36, 0.6);
  background: rgba(10, 8, 4, 0.82);
  color: #fde68a;
  font: 600 clamp(32px, 3.6vw, 48px)/1 var(--font-display);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.25, 1.3), background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.hiw-n::after {                              /* the pulse: a ring that swells and fades, each number a beat apart */
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: 50%;
  border: 1.5px solid rgba(251, 191, 36, 0.6);
  pointer-events: none;
  animation: hiw-pulse 2.4s ease-out infinite;
}
.hiw-n:nth-child(2)::after { animation-delay: 0.8s; }
.hiw-n:nth-child(3)::after { animation-delay: 1.6s; }
@keyframes hiw-pulse {
  0%   { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.55); opacity: 0; }
}
.hiw-n:hover,
.hiw-n:focus-visible { transform: scale(1.06); outline: none; box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.18); }
.hiw-n[aria-pressed="true"] {
  background: var(--accent);
  border-color: transparent;
  color: #1c1305;
  box-shadow: 0 0 44px rgba(251, 191, 36, 0.45);
}
.hiw-n[aria-pressed="true"]::after { animation: none; opacity: 0; }

.hiw-panel {
  margin-top: clamp(28px, 5vh, 48px);
  min-height: clamp(150px, 22vh, 200px);       /* room kept for a step, so nothing jumps when one opens */
}
.hiw-hint { font: 500 14px/1.4 var(--font-ui); color: rgba(255, 255, 255, 0.5); }
.hiw-step h3 { font: 600 clamp(24px, 2.4vw, 34px)/1.15 var(--font-display); letter-spacing: -0.025em; }
.hiw-step p {
  max-width: 40ch;
  margin: 10px auto 0;
  font: 500 clamp(16px, 1.2vw, 18px)/1.55 var(--font-ui);
  color: rgba(255, 255, 255, 0.78);
}
.hiw-step .learn-more { margin-top: 20px; color: #1c1305; }
.hiw-step.is-in { animation: hiw-in 0.4s ease both; }
@keyframes hiw-in {
  from { opacity: 0; translate: 0 8px; }
  to   { opacity: 1; translate: 0 0; }
}
.why .site-footer { align-self: stretch; padding-left: 0; padding-right: 0; }

@media (max-width: 700px) {
  .hiw-nums { gap: 22px; }
  .hiw-n { width: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  .hiw-n::after { animation: none; opacity: 0; }
  .hiw-step.is-in { animation: none; }
}

/* ---------- "Meet the dashboard": screenshot wheel ---------- */
.meet {
  position: relative;
  z-index: 5;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(16px, 3.4vh, 36px);
  padding: clamp(86px, 10vh, 112px) 0 0;
  overflow-x: clip;
}

.meet-title {
  padding: 0 16px;
  text-align: center;
  font: 700 clamp(34px, 5.6vw, 80px)/1 var(--font-display);
  letter-spacing: -0.035em;
  color: #fff;
}
.meet-title .g { color: var(--accent-hover); transition: color 0.6s ease; }

/* "Meet the" never moves. The changing word is laid over an invisible copy of "dashboard" (which is what sets the
   centring), starts right after "Meet the", and simply grows or shrinks to the right. */
.mt-word { position: relative; display: inline-block; text-align: left; }
.mt-ghost { visibility: hidden; }
.mt-live { position: absolute; left: 0; top: 0; white-space: nowrap; }

/* RollText (roll.js): each letter spins in its own little window */
.rs {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  height: 1.2em;
  margin: -0.1em 0;                        /* keeps the line box the same height as plain text */
  text-align: center;
  line-height: 1.2em;
  white-space: pre;
}
.rc { display: block; will-change: transform; }
.rl { display: block; height: 1.2em; line-height: 1.2em; white-space: pre; }

.wheel {
  --w: min(70vw, 960px, calc((100svh - 390px) * 1.52));   /* slide width; height follows the screenshots' ~1.52 ratio */
  position: relative;
  width: 100%;
  outline: none;
  touch-action: pan-y;                                     /* horizontal swipes drive the wheel, vertical still scrolls */
  user-select: none;
  -webkit-user-select: none;
}

.wheel-track {
  position: relative;
  height: calc(var(--w) * 0.66);
  margin: 0 auto;
}

.slide {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--w);
  height: 100%;
  margin-left: calc(var(--w) / -2);
  border-radius: clamp(10px, 1.4vw, 18px);
  overflow: hidden;
  background: #0b0b0d;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.10),
    0 30px 70px rgba(0, 0, 0, 0.55),
    0 0 60px var(--accent-glow);
  transition: transform 0.65s cubic-bezier(0.22, 0.8, 0.24, 1), opacity 0.5s ease, filter 0.5s ease, scale 0.35s ease, box-shadow 0.35s ease;
  will-change: transform;
}
.slide.jump { transition: none; }          /* hidden slides teleporting round the back of the wheel */
.slide[data-d="-1"], .slide[data-d="1"] { cursor: pointer; }

.slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Centred name of each screenshot (bold) over a soft scrim; the front frame is a link to the Dashboard tab */
.slide::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0.22) 75%);
  opacity: 0;                              /* the frame is clean until you hover it */
  transition: opacity 0.35s ease;
}

.slide-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;                    /* only the front frame is pressable */
  cursor: pointer;
  border-radius: inherit;
  outline: none;
}
.slide[data-d="0"] .slide-link { pointer-events: auto; -webkit-user-drag: none; }

.slide figcaption {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.cap {
  position: relative;
  display: inline-block;
  opacity: 0;                              /* name + "Learn more" only appear on hover */
  transform: scale(0.92);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.slide[data-d="0"]:hover .cap,
.slide[data-d="0"]:focus-within .cap { opacity: 1; transform: none; }
.slide figcaption b {
  display: inline-block;
  padding: 0.38em 1em;
  border-radius: 999px;
  background: rgba(8, 8, 10, 0.55);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  font: 800 clamp(20px, 3.3vw, 44px)/1 var(--font-ui);
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.3s ease, border-color 0.3s ease;
}

/* "Learn more" appears under the name on hover */
.slide .more {
  position: absolute;
  top: calc(100% + 0.8em);
  left: 50%;
  white-space: nowrap;
  padding: 0.55em 1.15em;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font: 700 clamp(12px, 1.4vw, 17px)/1 var(--font-ui);
  letter-spacing: 0.02em;
  box-shadow: 0 8px 26px var(--accent-glow);
  opacity: 0;
  translate: -50% 8px;
  transition: opacity 0.3s ease, translate 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.6s ease;
}
.slide .more i { display: inline-block; font-style: normal; transition: transform 0.3s ease; }

.slide[data-d="0"]:hover,
.slide[data-d="0"]:focus-within {
  scale: 1.025;
  box-shadow:
    0 0 0 2px var(--accent-hover),
    0 34px 80px rgba(0, 0, 0, 0.6),
    0 0 90px var(--accent-glow);
}
.slide[data-d="0"]:hover::after,
.slide[data-d="0"]:focus-within::after { opacity: 0.95; }
.slide[data-d="0"]:hover figcaption b,
.slide[data-d="0"]:focus-within figcaption b { transform: translateY(-0.35em) scale(1.06); background: rgba(8, 8, 10, 0.72); border-color: rgba(255, 255, 255, 0.4); }
.slide[data-d="0"]:hover .more,
.slide[data-d="0"]:focus-within .more { opacity: 1; translate: -50% 0; }
.slide[data-d="0"]:hover .more i,
.slide[data-d="0"]:focus-within .more i { transform: translateX(4px); }

/* peeking side slides: brighten a touch to say "click to bring me forward" */
.slide[data-d="-1"]:hover,
.slide[data-d="1"]:hover { filter: brightness(0.8) saturate(1) !important; }

/* touch screens have no hover: keep the prompt visible on the front frame */
@media (hover: none) {
  .slide[data-d="0"] .cap { opacity: 1; transform: none; }
  .slide[data-d="0"] .more { opacity: 1; translate: -50% 0; }
  .slide[data-d="0"]::after { opacity: 0.5; }
}

/* Learn More: under the wheel (and the current frame's name on phones) */
.meet-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: clamp(24px, 4vh, 44px);
  margin-bottom: clamp(12px, 2.4vh, 26px);
}
.wc-name { display: none; font: 800 22px/1 var(--font-ui); letter-spacing: -0.01em; color: #fff; }
.learn-more {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 15px 30px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font: 700 16px/1 var(--font-ui);
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform 0.25s ease, background 0.3s ease;
}
.learn-more i { font-style: normal; transition: transform 0.3s ease; }
.learn-more:hover,
.learn-more:focus-visible {
  transform: translateY(-1px);
  background: var(--accent-hover);
  outline: none;
}
.learn-more:hover i,
.learn-more:focus-visible i { transform: translateX(5px); }
.learn-more:active { transform: scale(0.97); transition-duration: 0.1s; }
/* Home: the call-to-action sitting above the floating boffos.ca card */
.sample-cta { position: relative; z-index: 2; padding: 12px 24px; font-size: 14.5px; margin-bottom: clamp(12px, 2vh, 20px); }
.next .stage-ctas { margin-bottom: clamp(24px, 4.5vh, 60px); }  /* room between the buttons and the preview */
@media (min-width: 1200px) {
  .next .stage-ctas { flex-wrap: nowrap; gap: 10px; }
  .next .stage-ctas .sample-cta { padding: 12px 18px; font-size: 14px; white-space: nowrap; }   /* side by side in the narrower column */
}
.stage-ctas {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  margin-bottom: clamp(12px, 2vh, 20px);
}
.stage-ctas .sample-cta { margin-bottom: 0; }
/* "Check out our dashboard": green underlined text, not a button, so the sample-sites button stays the main one */
.next .stage-ctas .learn-more.dash-cta {
  padding: 12px 6px;
  background: none;
  border-color: transparent;
  box-shadow: none;
  color: #22c55e;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.next .stage-ctas .learn-more.dash-cta:hover,
.next .stage-ctas .learn-more.dash-cta:focus-visible {
  transform: none;
  background: none;
  box-shadow: none;
  color: #4ade80;
}
.next .stage-ctas .learn-more.dash-cta i { display: inline-block; }   /* the underline stays under the words, not the arrow */
.next .stage-ctas .learn-more.dash-cta:focus-visible { outline: 2px solid #4ade80; outline-offset: 2px; border-radius: 6px; }
@media (max-width: 420px) { .sample-cta { padding: 11px 20px; font-size: 14px; text-align: center; } }

/* legal footer: sits at the bottom of the last section of each view */
.site-footer {
  align-self: stretch;
  margin-top: auto;
  padding: 12px clamp(20px, 5vw, 72px) calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px 40px;
  background: transparent;
  font: 500 13px/1.5 var(--font-ui);
  color: var(--ink-dim);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}
.site-footer > span:last-child { margin-left: auto; }
.site-footer a { color: var(--ink-dim); text-decoration: none; transition: color 0.2s ease; }
.site-footer a:hover,
.site-footer a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; outline: none; }
.sf-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.sf-brand { font-weight: 800; letter-spacing: 0.14em; color: #fff; }

/* round liquid-glass arrows on either side */
.wheel-btn {
  position: absolute;
  top: calc(var(--w) * 0.33);              /* the middle of the frame (the track is 0.66 x its width) */
  z-index: 20;
  width: 52px;
  height: 52px;
  margin-top: -26px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink);
  background: linear-gradient(180deg, var(--glass-1), var(--glass-2) 55%, var(--glass-3));
  -webkit-backdrop-filter: blur(16px) saturate(190%);
  backdrop-filter: blur(16px) saturate(190%);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 8px 24px var(--nav-shadow);
  transition: transform 0.2s ease, background 0.25s ease;
}
.wheel-btn:hover { transform: scale(1.08); background: var(--glass-hover); }
.wheel-btn:active { transform: scale(0.96); }
.wheel-btn:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 3px; }
.wheel-btn svg { width: 22px; height: 22px; }
.wheel-prev { left: clamp(10px, 2.5vw, 40px); }
.wheel-next { right: clamp(10px, 2.5vw, 40px); }

/* ---------- Gallery: minimal. Two questions, one at a time, then the sites. Deep sea with a soft aqua glow ---------- */
.gallery2 {
  position: relative;
  z-index: 5;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(110px, 14vh, 150px) 20px 0;
  color: #fff;
  background:
    radial-gradient(55% 45% at 50% 0%, rgba(34, 211, 238, 0.14), transparent 70%),
    #05090b;                                 /* static: covers the moving background for a calm page */
  --accent: #22d3ee;
  --accent-hover: #67e8f9;
  --accent-glow: rgba(34, 211, 238, 0.4);
}
.gx {
  flex: 1;
  width: min(880px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 48px;
  text-align: center;
}
/* three thin segments: where you are */
.gx-progress { list-style: none; display: flex; gap: 8px; padding: 0; }
.gx-progress li { width: 30px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.15); transition: background 0.3s ease; }
.gx-progress li.is-done { background: rgba(34, 211, 238, 0.45); }
.gx-progress li.is-on { background: var(--accent); }
.gx-title { margin-top: 26px; font: 600 clamp(36px, 4.6vw, 64px)/1.05 var(--font-display); letter-spacing: -0.04em; text-wrap: balance; }
.gx-q { margin-top: 12px; min-height: 1.5em; font: 500 clamp(17px, 1.4vw, 20px)/1.5 var(--font-ui); color: rgba(255, 255, 255, 0.65); }
.gx-step { width: 100%; margin-top: clamp(32px, 6vh, 56px); }
.gx-step.is-in { animation: gx-in 0.35s ease both; }
@keyframes gx-in {
  from { opacity: 0; translate: 0 10px; }
  to   { opacity: 1; translate: 0 0; }
}
.gx-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 680px; margin: 0 auto; }
.gx-chip {
  display: inline-flex;
  align-items: center;
  padding: 14px 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.03);
  color: #fff;
  font: 600 16px/1 var(--font-ui);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.25s cubic-bezier(0.2, 0.9, 0.25, 1.3);
}
.gx-chip:hover,
.gx-chip:focus-visible { border-color: rgba(34, 211, 238, 0.7); background: rgba(34, 211, 238, 0.08); transform: translateY(-2px); outline: none; }
.gx-chip[aria-pressed="true"],
.gx-chip-solid { background: var(--accent); border-color: transparent; color: #03181d; }
.gx-chip-solid:hover, .gx-chip-solid:focus-visible { background: var(--accent-hover); }
.gx-back {
  margin-top: 30px;
  padding: 8px 12px;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.6);
  font: 600 14px/1 var(--font-ui);
  cursor: pointer;
}
.gx-back:hover, .gx-back:focus-visible { color: #fff; outline: none; text-decoration: underline; text-underline-offset: 4px; }

/* the matching sites */
.gx-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 340px)); justify-content: center; gap: 18px; }
.gx-site {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: #fff;
  text-align: left;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.25, 1.3), border-color 0.3s ease;
}
a.gx-site:hover, a.gx-site:focus-visible { transform: translateY(-4px); border-color: rgba(34, 211, 238, 0.6); outline: none; }
.gx-shot { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #0b1214; }
.gx-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.gx-meta { display: block; padding: 16px 18px 4px; }
.gx-meta b { display: block; font: 700 17px/1.3 var(--font-ui); }
.gx-tags { display: block; margin-top: 4px; font: 500 13px/1.4 var(--font-ui); color: rgba(255, 255, 255, 0.55); }
.gx-go { padding: 8px 18px 18px; font: 600 14px/1 var(--font-ui); color: var(--accent-hover); }
.gx-empty { max-width: 46ch; margin: 0 auto; }
.gx-empty b { display: block; font: 600 22px/1.2 var(--font-display); }
.gx-empty p { margin-top: 10px; font: 500 16px/1.55 var(--font-ui); color: rgba(255, 255, 255, 0.7); }
.gx-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }
.gallery2 .site-footer { align-self: stretch; }
@media (prefers-reduced-motion: reduce) {
  .gx-step.is-in { animation: none; }
}

/* light accents (yellow, amber, lime, rose, aqua): the nav's solid Dashboard pill needs dark text */
:root.sun .links a.cta,
:root.sun .links a.cta:hover,
:root.sun .links a.cta:focus-visible,
:root.gold .links a.cta,
:root.gold .links a.cta:hover,
:root.gold .links a.cta:focus-visible,
:root.circuit .links a.cta,
:root.circuit .links a.cta:hover,
:root.circuit .links a.cta:focus-visible,
:root.rose .links a.cta,
:root.rose .links a.cta:hover,
:root.rose .links a.cta:focus-visible,
:root.aqua .links a.cta,
:root.aqua .links a.cta:hover,
:root.aqua .links a.cta:focus-visible { color: #14131A; }

/* ---------- Pricing: minimal. Three plans, one message, one button. Black with a rose accent ---------- */
.pricing2 {
  position: relative;
  z-index: 5;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(251, 113, 133, 0.16), transparent 70%),
    #09080a;
  --accent: #fb7185;
  --accent-hover: #fda4af;
  --accent-glow: rgba(251, 113, 133, 0.4);
  padding: clamp(100px, 12vh, 140px) max(clamp(20px, 5vw, 72px), calc((100% - 1360px) / 2 + clamp(20px, 5vw, 72px))) 0;
}
.pr2-title { font: 600 clamp(40px, 5vw, 76px)/1 var(--font-display); letter-spacing: -0.045em; }
.pr2-lead {
  margin-top: 16px;
  max-width: 54ch;
  font: 500 clamp(16px, 1.3vw, 19px)/1.55 var(--font-ui);
  color: rgba(255, 255, 255, 0.68);
  text-wrap: pretty;
}
.pr2-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  width: min(1080px, 100%);
  margin-top: clamp(28px, 4.5vh, 56px);
  text-align: left;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.4vw, 34px);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.plan.is-popular {
  border-color: rgba(251, 113, 133, 0.55);
  background: linear-gradient(180deg, rgba(251, 113, 133, 0.1), rgba(251, 113, 133, 0.02) 60%);
  box-shadow: 0 30px 80px -30px rgba(251, 113, 133, 0.35);
}
.plan-badge {
  position: absolute;
  top: -11px;
  left: clamp(24px, 2.4vw, 34px);
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: #1d0a0f;
  font: 700 12px/1 var(--font-ui);
}
.plan-name { font: 700 17px/1.2 var(--font-ui); color: rgba(255, 255, 255, 0.9); }
.plan-price { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; }
.plan-price b { font: 600 clamp(40px, 4vw, 56px)/1 var(--font-display); letter-spacing: -0.04em; }
.plan-price span { font: 500 15px/1 var(--font-ui); color: rgba(255, 255, 255, 0.55); }
.plan-yr { margin-top: 6px; font: 500 13px/1.4 var(--font-ui); color: rgba(255, 255, 255, 0.5); }
.plan-feats { list-style: none; display: grid; gap: 9px; margin: 18px 0 22px; padding: 0; }
.plan-feats li { position: relative; padding-left: 20px; font: 500 14.5px/1.45 var(--font-ui); color: rgba(255, 255, 255, 0.8); }
.plan-feats li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.plan-go { margin-top: auto; font: 700 15px/1 var(--font-ui); color: #fff; text-decoration: none; transition: color 0.2s ease; }
.plan-go i { display: inline-block; font-style: normal; transition: transform 0.3s ease; }
.plan-go:hover, .plan-go:focus-visible { color: var(--accent-hover); outline: none; }
.plan-go:hover i, .plan-go:focus-visible i { transform: translateX(4px); }
.pr2-common { max-width: 70ch; margin-top: 22px; font: 500 14px/1.5 var(--font-ui); color: rgba(255, 255, 255, 0.5); }
.pr2-quote { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: clamp(26px, 4vh, 52px); }
.pr2-quote p { font: 500 clamp(16px, 1.25vw, 18px)/1.5 var(--font-ui); color: rgba(255, 255, 255, 0.8); }
.pricing2 .learn-more { color: #1d0a0f; }   /* rose is light: dark text on its buttons */
.pricing2 .site-footer { align-self: stretch; padding-left: 0; padding-right: 0; }
@media (max-width: 820px) {
  .pr2-plans { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

/* ---------- Dashboard page: Liquid Film background + the explainer ---------- */
.dash-wrap { position: relative; isolation: isolate; z-index: 5; background: #0B0A10; }
/* the film stays put while the page scrolls over it */
.signal-bg {
  position: sticky;
  top: 0;
  z-index: -1;
  height: 100vh;
  height: 100lvh;                          /* the largest screen height: it never resizes as a phone's toolbar slides away */
  margin-bottom: -100vh;
  margin-bottom: -100lvh;
  background: #0B0A10;
  pointer-events: none;
}
.signal-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 6, 16, 0.5), rgba(8, 6, 16, 0.3) 50%, rgba(8, 6, 16, 0.5)); }

/* the explainer under "Meet the dashboard": minimal, in the same centred 1120px frame as Home */
.dx {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(110px, 14vh, 150px) max(clamp(20px, 5vw, 72px), calc((100% - 1120px) / 2)) clamp(56px, 9vh, 100px);
  color: #fff;
}
.dx-title { font: 600 clamp(38px, 4.6vw, 66px)/1.02 var(--font-display); letter-spacing: -0.04em; text-wrap: balance; }
.dx-lead { max-width: 48ch; margin-top: 14px; font: 500 clamp(16px, 1.3vw, 19px)/1.55 var(--font-ui); color: rgba(255, 255, 255, 0.72); }
/* each item under a thin rule: icon, short title, one line */
.dx-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 5vh, 48px) clamp(24px, 3vw, 48px);
  margin-top: clamp(40px, 7vh, 72px);
  padding: 0;
}
.dx-grid li { padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.dx-ic { display: block; width: 22px; height: 22px; margin-bottom: 14px; color: #4ade80; }
.dx-ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dx-grid h3 { font: 700 18px/1.25 var(--font-ui); letter-spacing: -0.01em; }
.dx-grid p { margin-top: 6px; max-width: 34ch; font: 500 15px/1.55 var(--font-ui); color: rgba(255, 255, 255, 0.7); }
.dx-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dx-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: clamp(36px, 6vh, 60px); }
.d-ghost {
  padding: 15px 8px;
  color: #fff;
  font: 700 16px/1 var(--font-ui);
  text-decoration: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.55);
  transition: border-color 0.25s ease, color 0.25s ease;
}
.d-ghost:hover, .d-ghost:focus-visible { border-color: var(--accent-hover); color: var(--accent-hover); outline: none; }
/* last section: content centred in the space above the footer */
.dx-yours > .dx-title { margin-top: auto; }
.dx-yours { padding-bottom: 0; }
.dx-yours .site-footer { align-self: stretch; margin-top: auto; padding-left: 0; padding-right: 0; }
.dx-yours .dx-cta { margin-bottom: clamp(40px, 8vh, 90px); }
@media (max-width: 900px) {
  .dx-grid, .dx-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .dx-grid, .dx-facts { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 28px; }
  .dx-grid li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 14px; padding-top: 14px; }   /* icon beside the title: a shorter list */
  .dx-grid li > :not(.dx-ic) { grid-column: 2; }
  .dx-ic { grid-row: 1 / span 2; margin: 1px 0 0; }
  .dx-facts li { display: block; }
}

/* ---------- Contact page: Horizon background + the enquiry form ---------- */
.contact {
  position: relative;
  z-index: 5;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: clamp(100px, 13vh, 140px) 0 0;
  background: #02040A;
  isolation: isolate;
}
.horizon-bg { position: absolute; inset: 0; z-index: -1; background: #02040A; }
.horizon-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(2, 4, 10, 0.55), rgba(2, 4, 10, 0.2) 55%, rgba(2, 4, 10, 0.35)); }

/* Pricing / Dashboard / Contact draw their own canvases: same soft, muted look as the main background */
.pricing-bg, .signal-bg, .horizon-bg {
  filter: blur(24px) saturate(0.75) brightness(0.9);
  transform: scale(1.1);
}
.contact, .dash-wrap { overflow: clip; }          /* clip (not hidden): no scrolling added, sticky still works; hides the scaled edges */

.ct-inner {
  flex: 1;
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding-bottom: clamp(40px, 8vh, 90px);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.ct-title { font: 700 clamp(40px, 5.4vw, 80px)/1 var(--font-display); letter-spacing: -0.04em; color: #fff; white-space: nowrap; }
.ct-title .g { color: var(--accent-hover); text-shadow: 0 0 40px var(--accent-glow); }
.ct-lead { max-width: 40ch; margin-top: 20px; font: 500 clamp(16px, 1.4vw, 18px)/1.65 var(--font-ui); color: rgba(255, 255, 255, 0.86); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); }
.ct-info { list-style: none; display: grid; gap: 16px; margin-top: 30px; }
.ct-info li { display: grid; gap: 3px; }
.ct-info b { font: 700 11px/1 var(--font-ui); letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-hover); }
.ct-info a, .ct-info span { color: #fff; font: 600 16px/1.45 var(--font-ui); text-decoration: none; }
.ct-info a:hover { text-decoration: underline; text-underline-offset: 3px; }

.ct-form {
  display: grid;
  gap: 16px;
  padding: clamp(20px, 3vw, 32px);
  border-radius: 28px;
  background:
    radial-gradient(130% 100% at 18% -25%, rgba(255, 255, 255, 0.3), transparent 56%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03) 58%, rgba(255, 255, 255, 0.08));
  background-color: rgba(4, 8, 18, 0.5);
  -webkit-backdrop-filter: blur(14px) saturate(190%);
  backdrop-filter: blur(14px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.7), inset 0 -16px 22px -12px rgba(255, 255, 255, 0.18), 0 22px 54px rgba(0, 0, 0, 0.5);
}
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ct-field { display: grid; gap: 7px; }
.ct-field > span { font: 700 11px/1 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); }
.ct-field input, .ct-field select, .ct-field textarea {
  width: 100%;
  padding: 13px 15px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #fff;
  color-scheme: dark;
  font: 500 15px/1.4 var(--font-ui);
  transition: border-color 0.25s ease, box-shadow 0.3s ease, background 0.25s ease;
}
.ct-field textarea { resize: vertical; min-height: 120px; }
.ct-field select option { background: #0b1220; color: #fff; }
.ct-field input:hover, .ct-field select:hover, .ct-field textarea:hover { background: rgba(255, 255, 255, 0.12); }
.ct-field input:focus, .ct-field select:focus, .ct-field textarea:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--accent-hover);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-hover) 35%, transparent), 0 0 28px var(--accent-glow);
}
.ct-field input:user-invalid, .ct-field textarea:user-invalid { border-color: #ff6b6b; }
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ct-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.ct-send { border: 0; cursor: pointer; }
.ct-send:disabled { opacity: 0.6; cursor: default; }
.ct-captcha { font: 500 11.5px/1.5 var(--font-ui); color: rgba(255, 255, 255, 0.6); }
.ct-captcha a { color: rgba(255, 255, 255, 0.82); text-underline-offset: 2px; }
.grecaptcha-badge { visibility: hidden; }        /* the disclosure above replaces the floating badge, as Google allows */
.ct-status { flex: 1; min-width: 200px; font: 600 14px/1.45 var(--font-ui); }
.ct-status.is-ok { color: #8be3ff; }
.ct-status.is-bad { color: #ff9b9b; }
.ct-status a { color: inherit; text-underline-offset: 2px; }

/* the small back buttons above each gallery list */
.vp-back {
  display: block;
  margin: 0 auto 10px;
  padding: 7px 14px;
  border-radius: 999px;
  color: #fff;
  font: 600 12px/1 var(--font-ui);
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.25, 1.3), border-color 0.25s ease;
}
.vp-back:hover, .vp-back:focus-visible { transform: translateY(-2px) scale(1.05); border-color: color-mix(in srgb, var(--accent-hover) 80%, transparent); outline: none; }
.vp-back:active { transform: scale(0.96); }

/* ---------- Small screens ---------- */
@media (max-width: 820px) {
  .next {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    align-content: start;
    gap: 28px;
    padding-top: 84px;
    padding-bottom: 56px;
  }
  .headline { font-size: clamp(20px, 5.4vw, 32px); }
  .next-copy, .next-side { grid-column: 1; grid-row: auto; }
  .next-side { margin-top: 0; }
  .keywords { margin: 0; flex: none; }
  .next-side { padding-top: 0; }
  .next-about { margin-top: 28px; }              /* stacked layout: steady, tighter spacing */
  .kw { font-size: clamp(26px, 7.4vw, 40px); }
  .kw-last { font-size: clamp(34px, 9.6vw, 54px); }
  .card { width: min(100%, 460px); }
}

@media (max-width: 700px) {
  .wheel { --w: 78vw; }
  .meet-cta { padding: 0 72px; }
  .wc-name { display: block; text-align: center; }
  .wheel-btn { top: auto; bottom: 22px; margin-top: 0; }
  .wheel-prev { left: 12px; }
  .wheel-next { right: 12px; }
  /* the names live under the frame on phones, so the on-frame overlay goes */
  .slide .cap, .slide::after { display: none; }
  /* no letter roller on phones: the title stays "Meet the dashboard" and just wraps normally */
  .mt-ghost { display: none; }
  .mt-live { position: static; white-space: normal; }
}

@media (max-width: 560px) {
  .glass-nav { padding: 4px; }
  .links, .nav-side > ul { gap: 0; }
  .links a { padding: 7px 8px; font-size: 12px; }
  .links a.home { margin: 0 2px; letter-spacing: 0.1em; }
  .links a.cta { margin-left: 2px; }
}
/* the smallest phones (320 to 374px wide): tighter still, so Dashboard never runs off the screen */
@media (max-width: 374px) {
  .glass-nav { padding: 3px; }
  .links a { padding: 7px 5px; font-size: 11px; letter-spacing: 0; }
  .links a.home { margin: 0 1px; letter-spacing: 0.04em; }
  .links a.cta { margin-left: 1px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body, #bg, .links a, .stage-shadow { transition: none; }
  .slide { transition: none; }
  .vp, .opt, .site, .ps, .popt, .pbrand { transition: none; }
  .links a.is-active { animation: none; }
  .l, .hero-tag { animation: none; opacity: 1; }
  .scroll-down span { animation: none; opacity: 0.8; }
}

/* visually hidden, still read by screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 700px) {
  .contact-fab { top: 64px; padding: 10px; }
  .contact-fab .cf-text { display: none; }
  .contact-fab svg { width: 20px; height: 20px; }
  .ct-inner { grid-template-columns: 1fr; }
  .ct-row { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .pr-stage { --ph: 640px; --pitch: 640px; --peek: 130px; --open: 330px; --grow: 200px; }   /* phones: steps stack with no overlap (the content is taller) */
  .ps { overflow-x: clip; }
  .pr-stage::after { height: 70px; }
  .ps-circle { width: 92px; height: 92px; font-size: 54px; }
  .ps-circle.sm { width: 76px; height: 76px; font-size: 38px; }
  .ps-head { gap: 16px; }
  .pr-mode { gap: 18px; font-size: 14px; }
  .d-hero { grid-template-columns: 1fr; padding-top: 100px; }
  .d-grid, .d-points { grid-template-columns: 1fr; }
  .d-feat, .d-why { min-height: 0; }
  .popt-wrap { width: min(100%, 300px); }
  .pr-box { grid-template-columns: 1fr; }
  .pr-box > div + div { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.2); }
  .pr-includes { grid-template-columns: 1fr; }
  .pr-cards { grid-template-columns: 1fr; gap: 30px; }
  .pr-plan.is-pop { transform: none; margin-top: 8px; }
  .pr-bill button { padding: 10px 16px; }
  .site-footer > span:last-child { margin-left: 0; }
}


/* =================== iPhone / touch =================== */
/* no sticky "hover" lift after a tap */
@media (hover: none) {
  .opt:hover, .popt:hover, .pbrand:hover, .site:hover, .pr-sub:hover, .vp-back:hover, .ps-back:hover, .d-card:hover,
  .learn-more:hover, .contact-fab:hover, .wheel-btn:hover, .empty-btn:hover { transform: none; }
}

@media (max-width: 700px) {
  /* inputs at 16px or iOS zooms the page when one is focused */
  .ct-field input, .ct-field select, .ct-field textarea { font-size: 16px; }
  /* things that must sit in the middle of the screen */
  .gal-title, .pr-title, .meet-title, .d-h2 { text-align: center; }
  .scroll-down { bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
}


/* =================== iPhone layout pass =================== */
@media (max-width: 700px) {
  /* The nav's second row of controls: the contact button sits in the nav's own row at the right edge instead of floating over content */
  .contact-fab { top: calc(env(safe-area-inset-top, 0px) + 66px); right: 12px; }
  .next, .meet, .why, .about3, .team2, .gallery2, .pricing2, .contact, .dx { padding-top: calc(env(safe-area-inset-top, 0px) + 112px); }
  .next { padding-top: calc(env(safe-area-inset-top, 0px) + 88px); }

  /* "Meet the dashboard": one line that always fits, centred; the changing word (desktop only) is never used here */
  .meet-title { font-size: clamp(26px, 8.6vw, 44px); white-space: nowrap; padding: 0 8px; }
  .meet { justify-content: flex-start; gap: 14px; padding-bottom: 0; min-height: 100svh; }
  .meet .site-footer { margin-top: auto; }
  .meet-cta { margin-top: 12px; margin-bottom: 18px; }

  /* Gallery: lists fit one screen */
  .gallery { min-height: 100svh; max-height: none; }
  .gal-stage { min-height: 0; flex: 1 1 auto; margin-top: 8px; }
  .gal-title { font-size: clamp(26px, 7.4vw, 36px); }
  .opt { padding: 0.3em 0.9em; border-radius: 15px; font-size: clamp(16px, 4.2vw, 19px); }
  .vlist { gap: 6px; }
  .vp-top { margin-bottom: 8px; }

  /* Pricing: ONE step at a time, no peek (it doesn't fit a phone), and the page is exactly one screen */
  .pr-title { font-size: clamp(30px, 9.4vw, 44px); }
  .pr-stage { --ph: calc(100svh - 296px); --pitch: calc(100svh - 296px); --peek: 0px; --open: 0px; --grow: 0px; height: var(--ph); overflow: hidden; }
  .ps { padding: 40px 6px 8px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .ps[data-role="next"] { --o: 0; pointer-events: none; }
  .ps.is-open { flex-basis: var(--ph); height: var(--ph); }
  .ps.is-open + .ps { margin-top: 0; }
  .ps-head { align-items: flex-start; }
  .ps-q { font-size: clamp(19px, 5.4vw, 24px); }
  .pr-result { grid-template-columns: 1fr; gap: 12px; }
  .pr-includes { padding: 14px 16px; gap: 8px; }
  .pr-includes li { font-size: 13.5px; }
  .pricing { min-height: 100svh; }
  .pricing .site-footer { padding-top: 6px; }
}
@media (max-width: 700px) and (max-height: 760px) {
  .ps-circle { width: 72px; height: 72px; font-size: 42px; }
}

/* compact footer on phones: brand and links share a row, the copyright sits under them */
@media (max-width: 700px) {
  .site-footer { gap: 4px 18px; padding-top: 8px; font-size: 12.5px; }
  .site-footer .sf-links { gap: 4px 16px; }
  .site-footer > span:last-child { flex-basis: 100%; }
}

/* Phones: when the POS brand list opens, the number shrinks away so the question, Yes / No and the brands all fit the step */
@media (max-width: 700px) {
  .ps.is-open .ps-circle { width: 56px; height: 56px; font-size: 32px; }
  .ps.is-open .ps-lab { display: none; }
  .ps.is-open .ps-desc { display: none; }
  .ps.is-open .popt-desc { display: none; }
  .ps.is-open .popts { margin-top: 12px; gap: 10px 14px; }
  .ps.is-open .popt { padding: 10px 18px; }
  .ps.is-open .pbrands { margin-top: 12px; }
  .ps.is-open .pbrand-q { margin-bottom: 8px; }
  .ps.is-open .pbrand { padding: 8px 14px; font-size: 13px; }
  .ps.is-open .pbrand-note { margin-top: 8px; }
}
@media (max-width: 700px) and (max-height: 700px) {
  .ps.is-open .ps-head { gap: 12px; }
  .ps.is-open .ps-q { font-size: 18px; }
}

/* iPhone: centre the About copy, and spread the dashboard section so there is no big empty gap */
@media (max-width: 700px) {
  .next { justify-items: center; text-align: center; }
  .next .headline { justify-self: center; text-align: center; }
  .keywords { align-items: center; margin-top: clamp(12px, 2svh, 24px); gap: clamp(8px, 1.6svh, 16px); }
  .next-copy { display: flex; flex-direction: column; align-items: center; }
  .next-about { padding-left: 0; border-left: 0; margin-left: auto; margin-right: auto; }
  .about-cta { margin-left: 0; }
  .next-side { justify-self: center; width: 100%; }
  .next .card-wrap, .next .stage-shadow, .next .hint { display: none; }   /* no preview on phones: the buttons stay */
  .meet { justify-content: center; gap: clamp(14px, 3svh, 30px); }
  .meet .site-footer { margin-top: 0; }
  .meet-cta { margin-bottom: 0; }
  .meet .wheel { margin-top: 4px; }
}

@media (max-width: 700px) {
  .meet-title { margin-top: auto; }
  .meet-cta { margin-bottom: auto; }
  .meet { justify-content: flex-start; }
  .kw-last { text-align: center; }
}

/* =================== Phones: Contact button in the thumb zone =================== */
@media (max-width: 700px) {
  .contact-fab {
    top: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    right: calc(env(safe-area-inset-right, 0px) + 14px);
    width: 52px;
    height: 52px;
    padding: 0;
    justify-content: center;
  }
  .contact-fab svg { width: 22px; height: 22px; }
  .site-footer { padding-right: 76px; }       /* keeps the footer text clear of the button */
}

/* =================== About Us page: a business card, then the founders' cards, on a light stone page =================== */
.about3 {
  position: relative;
  z-index: 5;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(110px, 14vh, 150px) 20px clamp(48px, 8vh, 80px);
}
/* the card: matte black, business-card proportions, a stripe of the STOHRX colours down its edge */
.bcard {
  position: relative;
  width: min(1040px, 100%);
  aspect-ratio: 1.75 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  overflow: hidden;
  border-radius: 20px;
  color: #f4f4f5;
  background: radial-gradient(120% 130% at 0% 0%, #2b2b30 0%, #151517 55%, #0d0d0f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 2px 4px rgba(30, 20, 10, 0.12),
    0 30px 60px -18px rgba(40, 28, 16, 0.45),
    0 60px 120px -40px rgba(40, 28, 16, 0.35);
  rotate: -1.5deg;
  transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));   /* bcard.js: leans towards the mouse */
  transition: rotate 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.2), translate 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.2);
}
.bcard:hover { rotate: 0deg; translate: 0 -4px; }
.bcard::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  background: linear-gradient(180deg, #ec4899 0 16.66%, #38bdf8 0 33.33%, #ef4444 0 50%, #4ade80 0 66.66%, #2563eb 0 83.33%, #facc15 0);
}
/* a band of light: bcard.js slides it with the card's turn and brightens it when the card faces the light */
.bc-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent calc(var(--shine-x, 50%) - 20%),
    rgba(255, 255, 255, var(--shine-a, 0.045)) var(--shine-x, 50%),
    transparent calc(var(--shine-x, 50%) + 20%));
  mix-blend-mode: screen;
}
.bc-side {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 4vw, 56px);
  padding-left: calc(clamp(28px, 4vw, 56px) + 8px);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.bc-logo { display: flex; align-items: center; gap: 0.04em; font-size: clamp(44px, 5.6vw, 76px); line-height: 1; }
.bc-l { display: inline-block; color: var(--c); }
.bc-tag { max-width: 26ch; margin-top: 18px; font: 500 clamp(15px, 1.2vw, 17px)/1.5 var(--font-ui); color: rgba(255, 255, 255, 0.7); }
.bc-contact { list-style: none; display: grid; gap: 6px; margin-top: auto; padding: 0; }
.bc-contact a { color: #fff; text-decoration: none; font: 600 15px/1.4 var(--font-ui); }
.bc-contact a:hover, .bc-contact a:focus-visible { text-decoration: underline; text-underline-offset: 4px; outline: none; }
.bc-main { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 4vw, 56px); }
.bc-h { font: 600 clamp(18px, 1.5vw, 22px)/1.2 var(--font-display); letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.6); }
.bc-values { list-style: none; display: grid; gap: clamp(14px, 2.4vh, 22px); margin-top: 18px; padding: 0; }
.bc-values li { position: relative; padding-left: 18px; font: 500 clamp(15px, 1.15vw, 17px)/1.5 var(--font-ui); color: rgba(255, 255, 255, 0.7); }
.bc-values li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
}
.bc-values b { color: #fff; font-weight: 700; }

/* ---- the founders: two small personal cards ---- */
.team2 {
  position: relative;
  z-index: 5;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: clamp(110px, 14vh, 150px) 0 0;
  color: #17151a;
}
.team2-inner {
  flex: 1;
  width: min(1040px, calc(100% - 40px));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5vh, 52px);
  padding-bottom: 40px;
  text-align: center;
}
.team2-title { font: 600 clamp(36px, 4.4vw, 60px)/1 var(--font-display); letter-spacing: -0.04em; }
.team2-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 440px));
  justify-content: center;
  gap: clamp(20px, 3vw, 40px);
  width: 100%;
  padding: 0;
}
.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 1.75 / 1;
  padding: clamp(22px, 2.4vw, 32px);
  border-radius: 16px;
  text-align: left;
  color: #f4f4f5;
  background: radial-gradient(120% 130% at 0% 0%, #2b2b30 0%, #151517 55%, #0d0d0f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 20px 40px -14px rgba(40, 28, 16, 0.45),
    0 40px 80px -30px rgba(40, 28, 16, 0.3);
  rotate: -1.5deg;
  transition: rotate 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.2), translate 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.2);
}
.pcard:nth-child(2) { rotate: 1.5deg; }
.pcard:hover { rotate: 0deg; translate: 0 -4px; }
.pc-mono {
  position: absolute;
  top: clamp(16px, 2vw, 24px);
  right: clamp(20px, 2.4vw, 30px);
  font: 600 clamp(48px, 5vw, 72px)/1 var(--font-display);
  color: var(--c);
}
.pc-name { font: 600 clamp(24px, 2.2vw, 30px)/1.1 var(--font-display); letter-spacing: -0.02em; }
.pc-role { margin-top: 4px; font: 600 14px/1.3 var(--font-ui); color: rgba(255, 255, 255, 0.6); }
.pc-bio { max-width: 34ch; margin-top: auto; font: 500 14.5px/1.5 var(--font-ui); color: rgba(255, 255, 255, 0.75); }
.team2 .site-footer { text-shadow: none; color: rgba(23, 21, 26, 0.6); }
.team2 .site-footer a { color: rgba(23, 21, 26, 0.6); }
.team2 .site-footer a:hover, .team2 .site-footer a:focus-visible { color: #17151a; }
.team2 .sf-brand { color: #17151a; }

@media (max-width: 820px) {
  .bcard { aspect-ratio: auto; grid-template-columns: minmax(0, 1fr); rotate: 0deg; }
  .bc-side { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .bc-contact { margin-top: 22px; }
  .team2-list { grid-template-columns: minmax(0, 1fr); }
  .pcard, .pcard:nth-child(2) { rotate: 0deg; aspect-ratio: auto; min-height: 210px; }
}
@media (prefers-reduced-motion: reduce) {
  .bcard, .pcard, .pcard:nth-child(2) { rotate: 0deg; transition: none; }
}

/* =================== Phones: Home polish =================== */
@media (max-width: 700px) {
  .wordmark { font-size: min(17vw, 96px); }                 /* STOHRX fills the width better */
  .about-cta { padding: 11px 22px; font-size: 14.5px; }
}

/* =================== Phones: Home sections 2 and 3, one clean left-aligned column =================== */
@media (max-width: 700px) {
  /* section 2: one left edge for everything, keywords stacked tight, the paragraph with its rule, three equal buttons */
  .next { justify-items: stretch; text-align: left; row-gap: 0; padding: calc(env(safe-area-inset-top, 0px) + 100px) 20px 44px; }
  .next .headline { justify-self: start; text-align: left; font-size: 16px; margin-bottom: 18px; }
  .next-copy { align-items: stretch; }
  .keywords { align-items: flex-start; gap: 12px; margin: 0; }
  .kw { font-size: clamp(32px, 10.4vw, 46px); }
  .kw-last { font-size: clamp(40px, 12.6vw, 58px); margin-top: 6px; text-align: left; }
  .next-about { max-width: none; margin: 26px 0 0; padding-left: 16px; border-left: 2px solid rgba(163, 230, 53, 0.55); text-align: left; font-size: 15.5px; }
  .next-side { margin: 0; padding: 0; }
  .next .stage { display: block; }
  .next .stage-ctas { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; margin: 0; }
  .about-cta,
  .next .stage-ctas .sample-cta {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 15px 20px;
    font-size: 15.5px;
  }
  .about-cta {                                    /* the quieter third button: an outline */
    margin-top: 26px;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: none;
  }
  .next .learn-more.about-cta { color: #fff; }
  .next .stage-ctas .sample-cta { border: 1px solid transparent; }   /* same height as the outlined About us */
  .next-side { margin-top: 10px; }                /* same 10px as between the other two buttons */

}


/* =================== Client login: appears with the Dashboard tab while the Dashboard page is open =================== */
.nav-dash { position: relative; }
.links a.nav-login {
  position: absolute;
  left: calc(100% + 14px);                   /* just outside the glass bar, beside Dashboard */
  top: 50%;
  translate: 0 -50%;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px 15px;
  border-radius: 999px;
  background: #22c55e;
  color: #04130a;
  font: 700 13px/1 var(--font-ui);
  white-space: nowrap;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 6px 18px rgba(34, 197, 94, 0.45);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.25s cubic-bezier(0.2, 0.9, 0.25, 1.3);
}
.links a.nav-login svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.links a.nav-login:hover,
.links a.nav-login:focus-visible {
  background: #4ade80;
  color: #04130a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 24px rgba(74, 222, 128, 0.55);
  transform: scale(1.04);
  outline: none;
}
html[data-view="dashboard"] .links a.nav-login { display: inline-flex; animation: nav-login-in 0.35s cubic-bezier(0.2, 0.9, 0.25, 1.3) both; }
@keyframes nav-login-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: none; }
}
/* narrower screens and phones: directly under the Dashboard button, lined up with its right edge */
@media (max-width: 1000px) {
  .links a.nav-login { left: 4px; right: auto; top: calc(100% + 12px); translate: none; }   /* 4px = Dashboard's own left margin: left edges line up */
}
/* phones: a short label, exactly as wide as the Dashboard button, so it never sticks out past either side */
.links a.nav-login .nl-short { display: none; }
@media (max-width: 700px) {
  .links a.nav-login { right: 0; justify-content: center; padding: 8px 10px; }
  .links a.nav-login .nl-full { display: none; }
  .links a.nav-login .nl-short { display: inline; }
}
@media (max-width: 560px) {
  .links a.nav-login { left: 2px; }                /* Dashboard's own left margin drops to 2px here */
}
@media (prefers-reduced-motion: reduce) {
  html[data-view="dashboard"] .links a.nav-login { animation: none; }
}

/* =================== Gallery: LIQUID GLASS LOOK (optional) ===================
   Everything below only applies while the gallery section has the "gx-glass" class (index.html).
   Delete that class to go back to the plain look; this block can then be deleted too. */
.gx-glass { overflow: hidden; background: #05090b; }
/* soft colour for the glass to frost, on two layers that slowly drift and breathe. Only transform and opacity move,
   so it stays cheap; it only runs while the Gallery is open (the page is hidden otherwise). */
.gx-glass::before,
.gx-glass::after {
  content: "";
  position: absolute;
  inset: -15%;
  z-index: -1;
  pointer-events: none;
  will-change: transform, opacity;
}
.gx-glass::before {
  background:
    radial-gradient(30% 28% at 22% 30%, rgba(34, 211, 238, 0.34), transparent 70%),
    radial-gradient(28% 28% at 78% 26%, rgba(99, 102, 241, 0.3), transparent 70%),
    radial-gradient(34% 30% at 60% 80%, rgba(20, 184, 166, 0.28), transparent 70%);
  animation: gx-drift 24s ease-in-out infinite alternate;
}
.gx-glass::after {
  background:
    radial-gradient(24% 24% at 32% 76%, rgba(56, 189, 248, 0.26), transparent 70%),
    radial-gradient(22% 22% at 70% 48%, rgba(45, 212, 191, 0.2), transparent 70%);
  animation: gx-pulse 9s ease-in-out infinite;
}
@keyframes gx-drift {
  from { transform: translate(-3%, -2%) rotate(0deg) scale(1); }
  to   { transform: translate(3%, 2.5%) rotate(8deg) scale(1.06); }
}
@keyframes gx-pulse {
  0%, 100% { opacity: 0.5; transform: scale(0.96); }
  50%      { opacity: 1; transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .gx-glass::before, .gx-glass::after { animation: none; }
}
/* the questions sit on one big pane of glass */
.gx-glass .gx {
  --lg-blur: 26px;                                 /* liquid.js: heavy frost so the text stays crisp */
  flex: none;
  margin: auto 0;
  padding: clamp(32px, 4vw, 56px) clamp(22px, 4vw, 64px);
  border-radius: 36px;
  background:
    radial-gradient(120% 80% at 15% -10%, rgba(255, 255, 255, 0.16), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02) 60%, rgba(255, 255, 255, 0.05));
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  backdrop-filter: blur(26px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.5),
    inset 1.5px 0 1px rgba(255, 255, 255, 0.18),
    inset 0 -1.5px 1px rgba(255, 255, 255, 0.14),
    inset 0 -18px 30px -18px rgba(255, 255, 255, 0.16),
    0 30px 80px rgba(0, 0, 0, 0.45);
}
/* each answer is a small glass pill */
.gx-glass .gx-chip {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05) 60%, rgba(255, 255, 255, 0.1));
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 1px rgba(255, 255, 255, 0.14),
    0 10px 24px rgba(0, 0, 0, 0.3);
}
.gx-glass .gx-chip:hover,
.gx-glass .gx-chip:focus-visible {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.08) 60%, rgba(255, 255, 255, 0.14));
  border-color: rgba(165, 243, 252, 0.7);
}
.gx-glass .gx-chip[aria-pressed="true"],
.gx-glass .gx-chip-solid {                          /* chosen: aqua-tinted glass */
  background: linear-gradient(180deg, rgba(165, 243, 252, 0.95), rgba(34, 211, 238, 0.82));
  border-color: rgba(255, 255, 255, 0.6);
  color: #03181d;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.8), 0 10px 28px rgba(34, 211, 238, 0.45);
}
/* the site cards are glass too */
.gx-glass .gx-site {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.45), 0 20px 50px rgba(0, 0, 0, 0.4);
}
.gx-glass .gx-progress li { background: rgba(255, 255, 255, 0.22); }
.gx-glass .gx-progress li.is-on { background: #a5f3fc; box-shadow: 0 0 10px rgba(165, 243, 252, 0.7); }
@media (max-width: 700px) {
  .gx-glass .gx { border-radius: 28px; }
}

/* =================== "Meet the dashboard": desktop screenshots on big screens, phone screenshots on phones =================== */
.wheel-phone { display: none; }
@media (max-width: 700px) {
  .wheel-desk { display: none; }
  .wheel-phone {
    display: block;
    --w: min(56vw, calc((100svh - 340px) * 0.6));            /* a phone-shaped frame (the screenshots are about 0.6 : 1) */
  }
  .wheel-phone .wheel-track { height: calc(var(--w) * 1.67); }
  .wheel-phone .slide { border-radius: 22px; }
  .wheel-phone .slide img { object-position: top center; }
}

/* =================== Phones: "Meet the dashboard" and the sections that ran past one screen =================== */
@media (max-width: 700px) {
  /* no big gap above the title: the content is centred as one block */
  .meet { justify-content: center; gap: 24px; }
  .meet .meet-title { margin-top: 0; }
  .meet .meet-cta { margin-top: clamp(26px, 4.5vh, 40px); margin-bottom: 0; gap: 18px; }   /* the name and button sit clear of the picture */
  .wheel-phone { --w: min(62vw, calc((100svh - 400px) * 0.6)); }
  /* arrows on either side of the phone frame, at its middle */
  .wheel-phone .wheel-btn { top: calc(var(--w) * 0.835); bottom: auto; width: 42px; height: 42px; margin-top: -21px; }
  .wheel-phone .wheel-btn svg { width: 19px; height: 19px; }
  .wheel-phone .wheel-prev { left: 4px; }
  .wheel-phone .wheel-next { right: 4px; }

  /* Dashboard, "Your business, in one place": tighter so it (and its scroll cue) fits one screen */
  .dx { padding-top: calc(env(safe-area-inset-top, 0px) + 100px); }
  .dx-title { font-size: clamp(30px, 8.4vw, 36px); }
  .dx-lead { margin-top: 10px; font-size: 15px; }
  .dx-grid { gap: 10px; margin-top: 20px; }
  .dx-grid li { padding-top: 10px; }
  .dx-grid h3 { font-size: 16px; }
  .dx-grid p { margin-top: 3px; font-size: 14px; line-height: 1.45; }

  /* Home section 2: a touch tighter so its cue sits fully on screen */
  .keywords { gap: 8px; }
  .next-about { margin-top: 20px; }
  .about-cta { margin-top: 20px; }
}