/* =========================================================
   scenes.css  –  the animated scenes shared by the homepage
   and /showcase (scenes.js drives them). Loaded after style.css.

   Pages using it put class="sc-page" on <html> (plus "sc-home" on
   the homepage). The CSS describes the FINISHED state of every
   scene first: that's what visitors see without JavaScript or
   with reduced motion. Animated layouts (pinned stages) only
   apply under html.sc-motion, which the head script sets and
   scenes.js keeps or removes. Starting states for animations are
   set by scenes.js, not here.

   The archived showcase's extras (loader, cursor, grain, bands,
   bento, sideways industries, orbit, marquee, CTA) are in
   docs/archive/showcase/showcase.css.
   ========================================================= */

/* Light palette by default; dark follows the site's theme toggle
   (same two selectors as style.css: keep both dark blocks identical) */
.sc-page {
  --sc-bg:       #faf8f4;
  --sc-bg-2:     #f2eee5;
  --sc-surface:  #ffffff;
  --sc-ink:      #1d1b16;
  --sc-body:     #55524a;
  --sc-muted:    #8b877c;
  --sc-line:     rgba(29, 27, 22, 0.08);
  --sc-line-2:   rgba(29, 27, 22, 0.15);
  --sc-green:    #1c5c44;
  --sc-green-soft: rgba(28, 92, 68, 0.1);
  --sc-glow:     rgba(28, 92, 68, 0.22);
  --sc-gold-ink: #a16207;
  --sc-glass:    rgba(255, 255, 255, 0.95);
  --sc-device:   #ffffff;
  --sc-device-bar: #f4f1ea;
  --sc-device-dot: rgba(29, 27, 22, 0.14);
  --sc-url-bg:   rgba(29, 27, 22, 0.06);
  --sc-shadow:   0 40px 100px rgba(29, 27, 22, 0.16);
  --sc-shadow-sm: 0 16px 40px rgba(29, 27, 22, 0.12);
  --sc-pill-bg:  #1d1b16;
  --sc-pill-fg:  #faf8f4;
  --sc-pill-accent: #eab308;
  --sc-bubble:   rgba(29, 27, 22, 0.06);
  --sc-bubble-me: #1c5c44;
  --sc-bubble-me-fg: #ffffff;
  --sc-ring-text: rgba(29, 27, 22, 0.28);
  --sc-word-stroke: rgba(29, 27, 22, 0.16);
  --sc-cursor-ring: rgba(29, 27, 22, 0.45);
  --sc-orbit-line: rgba(28, 92, 68, 0.5);
  --sc-hero-a:   rgba(28, 92, 68, 0.16);
  --sc-hero-b:   rgba(234, 179, 8, 0.14);
  --sc-grain:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --sc-grain-op: 0.045;
  /* particle colours + blend mode, read by scenes.js */
  --sc-p1: #1d1b16;
  --sc-p2: #ca8a04;
  --sc-p3: #1c5c44;
  --sc-p-blend: source-over;
  --sc-brand:   #1c5c44;
  --sc-gold:    #eab308;
  --sc-gutter:  clamp(16px, 5vw, 72px);
  --sc-head-h:  70px;   /* the site nav */
  /* default mini-site theme (overridden per device/panel) */
  --sc-a: #2f5a43;
  --sc-b: #16291f;
  --sc-accent: #5fb383;
  --sc-font: var(--font-sans);
  --sc-case: none;
  --sc-track: -0.02em;
  scroll-behavior: auto;   /* style.css sets smooth; it fights ScrollTrigger + Lenis */
  background: var(--sc-bg);
  /* Fraunces at its display optical size has hairline crossbars (the
     "e" nearly disappears); a text optical size reads much clearer */
  font-variation-settings: 'opsz' 36;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]).sc-page {
    --sc-bg:       #07100c;
    --sc-bg-2:     #0b1712;
    --sc-surface:  #0f1d17;
    --sc-ink:      #f3efe6;
    --sc-body:     #b6bfb8;
    --sc-muted:    #7f8c85;
    --sc-line:     rgba(243, 239, 230, 0.09);
    --sc-line-2:   rgba(243, 239, 230, 0.18);
    --sc-green:    #7ed6a3;
    --sc-green-soft: rgba(126, 214, 163, 0.14);
    --sc-glow:     rgba(126, 214, 163, 0.32);
    --sc-gold-ink: #eab308;
    --sc-glass:    rgba(13, 26, 20, 0.94);
    --sc-device:   #0d1a14;
    --sc-device-bar: rgba(255, 255, 255, 0.03);
    --sc-device-dot: rgba(243, 239, 230, 0.16);
    --sc-url-bg:   rgba(255, 255, 255, 0.06);
    --sc-shadow:   0 50px 120px rgba(0, 0, 0, 0.55);
    --sc-shadow-sm: 0 16px 40px rgba(0, 0, 0, 0.45);
    --sc-pill-bg:  #f3efe6;
    --sc-pill-fg:  #14201a;
    --sc-pill-accent: #1c5c44;
    --sc-bubble:   rgba(243, 239, 230, 0.08);
    --sc-bubble-me: #7ed6a3;
    --sc-bubble-me-fg: #0b1712;
    --sc-ring-text: rgba(243, 239, 230, 0.22);
    --sc-word-stroke: rgba(243, 239, 230, 0.16);
    --sc-cursor-ring: rgba(243, 239, 230, 0.5);
    --sc-orbit-line: rgba(126, 214, 163, 0.6);
    --sc-hero-a:   rgba(28, 92, 68, 0.38);
    --sc-hero-b:   rgba(234, 179, 8, 0.08);
    --sc-grain:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --sc-grain-op: 0.07;
    --sc-p1: #f3efe6;
    --sc-p2: #eab308;
    --sc-p3: #7ed6a3;
    --sc-p-blend: lighter;
  }
}
:root[data-theme="dark"].sc-page,
.sc-page .sc-tone-dark {
  --sc-bg:       #07100c;
  --sc-bg-2:     #0b1712;
  --sc-surface:  #0f1d17;
  --sc-ink:      #f3efe6;
  --sc-body:     #b6bfb8;
  --sc-muted:    #7f8c85;
  --sc-line:     rgba(243, 239, 230, 0.09);
  --sc-line-2:   rgba(243, 239, 230, 0.18);
  --sc-green:    #7ed6a3;
  --sc-green-soft: rgba(126, 214, 163, 0.14);
  --sc-glow:     rgba(126, 214, 163, 0.32);
  --sc-gold-ink: #eab308;
  --sc-glass:    rgba(13, 26, 20, 0.94);
  --sc-device:   #0d1a14;
  --sc-device-bar: rgba(255, 255, 255, 0.03);
  --sc-device-dot: rgba(243, 239, 230, 0.16);
  --sc-url-bg:   rgba(255, 255, 255, 0.06);
  --sc-shadow:   0 50px 120px rgba(0, 0, 0, 0.55);
  --sc-shadow-sm: 0 16px 40px rgba(0, 0, 0, 0.45);
  --sc-pill-bg:  #f3efe6;
  --sc-pill-fg:  #14201a;
  --sc-pill-accent: #1c5c44;
  --sc-bubble:   rgba(243, 239, 230, 0.08);
  --sc-bubble-me: #7ed6a3;
  --sc-bubble-me-fg: #0b1712;
  --sc-ring-text: rgba(243, 239, 230, 0.22);
  --sc-word-stroke: rgba(243, 239, 230, 0.16);
  --sc-cursor-ring: rgba(243, 239, 230, 0.5);
  --sc-orbit-line: rgba(126, 214, 163, 0.6);
  --sc-hero-a:   rgba(28, 92, 68, 0.38);
  --sc-hero-b:   rgba(234, 179, 8, 0.08);
  --sc-grain:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --sc-grain-op: 0.07;
  --sc-p1: #f3efe6;
  --sc-p2: #eab308;
  --sc-p3: #7ed6a3;
  --sc-p-blend: lighter;
}

/* A section that is dark on both themes (the homepage's "how it works") */
.sc-tone-dark { background: var(--sc-bg); color: var(--sc-body); }

/* On the homepage the scenes sit between the site's own sections, so
   they share its background and surface colours (after the dark blocks
   on purpose: same specificity, later wins) */
:root.sc-page.sc-home {
  --sc-bg: var(--bg);
  --sc-bg-2: var(--bg-soft);
  --sc-surface: var(--surface);
}

body.sc {
  background: var(--sc-bg);
  color: var(--sc-body);
  -webkit-font-smoothing: antialiased;
}
.sc ::selection { background: var(--sc-gold); color: #14201a; }

.sc-main {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}
.sc-wrap {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--sc-gutter);
}

/* ── Type ───────────────────────────────────────────────── */
.sc-eyebrow {
  margin-bottom: 18px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sc-gold-ink);
}
.sc-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.3rem, 5.6vw, 4.9rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--sc-ink);
  text-wrap: balance;
}
.sc-h2 em,
.sc-hero__title em {
  font-style: italic;
  color: var(--sc-green);
}
.sc-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sc-ink);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: underline;
  text-decoration-color: var(--sc-line-2);
  text-underline-offset: 5px;
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
.sc-link:hover { color: var(--sc-gold-ink); text-decoration-color: var(--sc-gold-ink); }
.sc a:focus-visible,
.sc button:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 4px; border-radius: 4px; }
.sc-free {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--sc-green-soft);
  color: var(--sc-green);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 0.25em;
}
.sc-loader__logo span,
.sc-hero__mark span { color: var(--sc-gold-ink); }

/* =========================================================
   01 · HERO
   ========================================================= */
.sc-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: calc(var(--sc-head-h) + 24px) var(--sc-gutter) 64px;
  overflow: clip;
  isolation: isolate;
  background:
    radial-gradient(60% 50% at 50% 38%, var(--sc-hero-a), transparent 70%),
    radial-gradient(40% 30% at 82% 70%, var(--sc-hero-b), transparent 70%);
}
.sc-hero__canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  display: none;
}
.sc-motion .sc-hero__canvas { display: block; }
.sc-hero__markwrap {
  display: grid;
  place-items: center;
  min-height: 0;
}
.sc-hero__mark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: min(15vw, 30vh, 15.5rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--sc-ink);
  white-space: nowrap;
  user-select: none;
}
/* the canvas draws it instead (kept in layout so it can be sampled) */
.sc-motion .sc-hero__mark { opacity: 0; }
.sc-hero__copy {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: end;
  gap: 24px 64px;
}
.sc-hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.5rem, 5.4vw, 4.7rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--sc-ink);
}
.sc-hero__sub { font-size: 1.08rem; line-height: 1.6; max-width: 480px; }
.sc-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 26px; }
.sc-scrollcue {
  position: absolute;
  left: 50%;
  bottom: 18px;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sc-muted);
  transform: translateX(-50%);
}
.sc-scrollcue i {
  width: 1px; height: 34px;
  background: linear-gradient(var(--sc-gold), transparent);
  transform-origin: top center;
  animation: scCue 1.8s var(--ease-out) infinite;
}
@keyframes scCue { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@media (min-width: 900px) { .sc-motion .sc-scrollcue { display: flex; } }

/* Hero copy waits for its intro (failsafe after 4s) */
.sc-motion:not(.sc-ready) .sc-hero__copy {
  visibility: hidden;
  animation: scShow 0s linear 4s forwards;
}
@keyframes scShow { to { visibility: visible; } }
/* SplitText masks: a little room so Fraunces overhangs aren't clipped */
.sc-hero__title .sc-word-mask { padding: 0.08em 0.06em 0.14em; margin: -0.08em -0.06em -0.14em; }

@media (max-width: 767px) {
  .sc-hero { padding-bottom: 96px; }
  .sc-hero__mark { font-size: min(17.5vw, 30vh); }
  .sc-hero__copy { grid-template-columns: 1fr; }
  .sc-hero__sub { font-size: 1rem; }
}

/* =========================================================
   Shared mock-ups: browser frame + mini website
   Sizes are in container units so they scale with the frame.
   ========================================================= */
/* On pages without the scenes (industries.html), .sc-kit gives the
   frame and mock-ups their tokens from the site's own palette, so
   they follow its light and dark themes */
.sc-kit {
  --sc-ink: var(--ink);
  --sc-body: var(--body);
  --sc-muted: var(--muted);
  --sc-green: var(--brand);
  --sc-line: var(--border);
  --sc-line-2: var(--border-strong);
  --sc-device: var(--surface);
  --sc-device-bar: var(--bg-soft);
  --sc-device-dot: var(--border-strong);
  --sc-url-bg: var(--bg);
  --sc-shadow: var(--shadow-lg);
  --sc-shadow-sm: var(--shadow-md);
  --sc-a: #2f5a43;
  --sc-b: #16291f;
  --sc-accent: #5fb383;
  --sc-font: var(--font-sans);
  --sc-case: none;
  --sc-track: -0.02em;
}
.sc-device {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 16 / 11;
  width: 100%;
  border-radius: 14px;
  background: var(--sc-device);
  border: 1px solid var(--sc-line-2);
  box-shadow: var(--sc-shadow);
  overflow: hidden;
}
.sc-device__bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: max(26px, 6.5cqi);
  display: flex;
  align-items: center;
  gap: 1.2cqi;
  padding: 0 2.4cqi;
  border-bottom: 1px solid var(--sc-line);
  background: var(--sc-device-bar);
}
.sc-device__bar > i { width: max(7px, 1.6cqi); aspect-ratio: 1; border-radius: 50%; background: var(--sc-device-dot); }
.sc-device__url {
  display: flex;
  align-items: center;
  gap: 1cqi;
  flex: 0 1 52%;
  height: 62%;
  margin-left: 2cqi;
  padding: 0 2cqi;
  border-radius: 100px;
  background: var(--sc-url-bg);
  font-size: max(10px, 2cqi);
  color: var(--sc-body);
  white-space: nowrap;
  overflow: hidden;
}
.sc-device__lock { flex: none; width: max(10px, 2cqi); height: max(10px, 2cqi); color: var(--sc-muted); }
.sc-device__lock.is-secure { color: var(--sc-green); }
.sc-caret {
  width: 1px; height: 1.1em;
  margin-left: 1px;
  background: var(--sc-ink);
  animation: caretBlink 1s steps(1) infinite;
}
.sc-device__screen {
  position: absolute;
  top: max(26px, 6.5cqi); left: 0; right: 0; bottom: 0;
}

.sc-mini {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 2.6cqi;
  padding: 3cqi 3.4cqi 3.4cqi;
  background: #f6f3ec;
  color: #1d1b16;
  font-family: var(--sc-font);
}
.sc-mini__nav { display: flex; align-items: center; gap: 2cqi; }
.sc-mini__logo {
  font-family: var(--sc-font);
  font-weight: 700;
  font-size: 2.3cqi;
  letter-spacing: var(--sc-track);
  text-transform: var(--sc-case);
  color: var(--sc-b);
  white-space: nowrap;
}
.sc-mini__links { display: flex; gap: 1.8cqi; margin-left: auto; }
.sc-mini__links i { width: 5.5cqi; height: 0.9cqi; border-radius: 1cqi; background: #d8d2c4; }
.sc-mini__pill { width: 10cqi; height: 3.4cqi; border-radius: 2cqi; background: var(--sc-accent); }
.sc-mini__hero {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.6cqi;
  padding: 4cqi 5cqi;
  border-radius: 1.8cqi;
  overflow: hidden;
  background: linear-gradient(135deg, var(--sc-a), var(--sc-b));
  color: #fff;
}
.sc-mini__hero::after {
  content: '';
  position: absolute;
  right: -8cqi; top: -10cqi;
  width: 34cqi; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sc-accent);
  opacity: 0.35;
}
.sc-mini__title {
  position: relative;
  z-index: 1;
  max-width: 60%;
  font-family: var(--sc-font);
  font-weight: 600;
  font-size: 5.6cqi;
  line-height: 1.02;
  letter-spacing: var(--sc-track);
  text-transform: var(--sc-case);
}
.sc-mini__sub { position: relative; z-index: 1; font-family: var(--font-sans); font-size: 1.9cqi; opacity: 0.85; }
.sc-mini__cta {
  position: relative;
  z-index: 1;
  margin-top: 0.8cqi;
  padding: 1.1cqi 2.6cqi;
  border-radius: 4cqi;
  background: var(--sc-accent);
  color: #1d1b16;
  font-family: var(--font-sans);
  font-size: 1.7cqi;
  font-weight: 600;
}
.sc-mini__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqi; height: 21%; }
.sc-mini__cards > div {
  display: flex;
  flex-direction: column;
  gap: 1cqi;
  padding: 1.8cqi;
  border-radius: 1.4cqi;
  background: #fff;
  box-shadow: 0 1cqi 3cqi rgba(29, 27, 22, 0.08);
}
.sc-mini__cards i { width: 3.6cqi; aspect-ratio: 1; border-radius: 1cqi; background: var(--sc-accent); opacity: 0.85; }
.sc-mini__cards b { height: 0.9cqi; border-radius: 1cqi; background: #e2ddd2; }
.sc-mini__cards b + b { width: 60%; }

/* =========================================================
   Industry mock-ups: one quick bespoke site per panel.
   Everything is sized in container units (cqi) of the
   browser frame, and the "photos" are CSS gradients.
   ========================================================= */
.mk {
  position: absolute;
  inset: 0;
  overflow: hidden;
  font-family: var(--font-sans);
  font-variation-settings: normal;
  color: #1d1b16;
  background: #fff;
}
.mk i { font-style: normal; }
.mk-links { display: flex; gap: 2.4cqi; margin-left: auto; font-size: 1.5cqi; opacity: 0.85; }
.ph { display: block; border-radius: 1cqi; background-color: #ccc; }

/* "Photos" */
.ph--dusk {
  background:
    radial-gradient(circle at 50% 66%, #ffe2ad 0, rgba(255, 226, 173, 0) 32%),
    linear-gradient(#f0a07c, #d4746b 48%, #7a4c5c 66%, #2d2633 67%, #1f1a24);
}
.ph--couple {
  background:
    radial-gradient(ellipse 6% 15% at 45% 86%, #1b1620 0 96%, transparent 100%),
    radial-gradient(circle 2.6% at 45% 69%, #1b1620 0 96%, transparent 100%),
    radial-gradient(ellipse 7% 17% at 55% 86%, #1b1620 0 96%, transparent 100%),
    radial-gradient(circle 2.6% at 55% 67%, #1b1620 0 96%, transparent 100%),
    radial-gradient(circle at 50% 62%, #ffe2ad 0, rgba(255, 226, 173, 0) 34%),
    linear-gradient(#f0a07c, #d4746b 48%, #7a4c5c 70%, #2d2633 71%, #1f1a24);
}
.ph--sea {
  background:
    radial-gradient(circle at 72% 28%, #fff6dd 0 5%, rgba(255, 246, 221, 0) 16%),
    linear-gradient(#d6e5ee 0 50%, #7aa7bd 51%, #2f5b73);
}
.ph--forest {
  background:
    radial-gradient(ellipse 60% 42% at 25% 100%, #1f3a26 0 98%, transparent 100%),
    radial-gradient(ellipse 60% 55% at 85% 100%, #2c4d33 0 98%, transparent 100%),
    radial-gradient(ellipse 40% 30% at 55% 100%, #3d6444 0 98%, transparent 100%),
    linear-gradient(#c8d8c0, #7c9a77 75%);
}
.ph--field {
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 244, 210, 0.95) 0 6%, rgba(255, 244, 210, 0) 26%),
    linear-gradient(#f6e3bb 0 46%, #dcaa4c 47%, #a8742a);
}
.ph--mirror {
  background:
    radial-gradient(circle 1.1cqi at 50% 7%, #fff1cf 0 55%, transparent 100%),
    radial-gradient(circle 1.1cqi at 72% 13%, #fff1cf 0 55%, transparent 100%),
    radial-gradient(circle 1.1cqi at 82% 36%, #fff1cf 0 55%, transparent 100%),
    radial-gradient(circle 1.1cqi at 75% 60%, #fff1cf 0 55%, transparent 100%),
    radial-gradient(circle 1.1cqi at 25% 60%, #fff1cf 0 55%, transparent 100%),
    radial-gradient(circle 1.1cqi at 18% 36%, #fff1cf 0 55%, transparent 100%),
    radial-gradient(circle 1.1cqi at 28% 13%, #fff1cf 0 55%, transparent 100%),
    radial-gradient(ellipse 26% 32% at 50% 36%, #ded4c8 0 30%, #cbbfb2 60%, #b9ab9c 86%, #c9a36a 89% 95%, transparent 96%),
    radial-gradient(ellipse 40% 46% at 50% 36%, rgba(255, 226, 170, 0.22), transparent 100%),
    linear-gradient(transparent 80%, #4a3d36 80% 82%, #2a2321 82%),
    linear-gradient(160deg, #5b4f49, #2d2725);
}
.ph--peaks {
  background:
    conic-gradient(from 138deg at 30% 44%, #3e4c5c 0 84deg, transparent 84deg),
    conic-gradient(from 146deg at 66% 32%, #5a6b7d 0 68deg, transparent 68deg),
    radial-gradient(circle at 78% 18%, rgba(255, 255, 255, 0.9) 0 4%, transparent 14%),
    linear-gradient(#e4d4c6, #a9b8c6);
}
.ph--table {
  background:
    radial-gradient(circle at 22% 28%, rgba(255, 222, 160, 0.95) 0 5%, transparent 6%),
    radial-gradient(circle at 58% 18%, rgba(255, 222, 160, 0.7) 0 4%, transparent 5%),
    radial-gradient(circle at 82% 36%, rgba(255, 222, 160, 0.85) 0 6%, transparent 7%),
    radial-gradient(circle at 40% 44%, rgba(255, 240, 200, 0.6) 0 3%, transparent 4%),
    linear-gradient(#6d4f3b, #3a2a20 58%, #f1e6d6 59%, #e2d4c0);
}
.ph--bloom {
  background:
    radial-gradient(circle at 30% 40%, #e8a6a0 0 15%, transparent 16%),
    radial-gradient(circle at 62% 56%, #f3d0c8 0 17%, transparent 18%),
    radial-gradient(circle at 44% 72%, #d98a86 0 13%, transparent 14%),
    radial-gradient(circle at 74% 28%, #f6e2da 0 12%, transparent 13%),
    linear-gradient(135deg, #8a9a7f, #4d5c45);
}
.ph--arch {
  background:
    radial-gradient(ellipse 28% 52% at 50% 64%, #f6eee2 0 96%, transparent 100%),
    radial-gradient(ellipse 36% 60% at 50% 64%, #e8b9b0 0 96%, transparent 100%),
    linear-gradient(#b7c4a9, #6c8458);
}

/* Weddings: a venue with a date checker */
.mk--venue { display: flex; flex-direction: column; background: #f7f3ee; }
.mkv-hero {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 2.4cqi 3.6cqi 2.6cqi;
  color: #fff;
  background:
    linear-gradient(rgba(30, 36, 28, 0.5), rgba(30, 36, 28, 0.12) 34%, transparent 62%, rgba(30, 36, 28, 0.4)),
    radial-gradient(130% 55% at 22% 100%, #657d52 0 50%, transparent 50.4%),
    radial-gradient(120% 62% at 88% 108%, #7f9866 0 52%, transparent 52.4%),
    radial-gradient(circle at 70% 60%, #fff3d6 0 4%, rgba(255, 243, 214, 0) 20%),
    linear-gradient(#e7c3ae, #f2d9c4 50%, #e6bfa4 72%);
}
/* the barn on the hill */
.mkv-hero::before {
  content: '';
  position: absolute;
  left: 58%; bottom: 31%;
  width: 13cqi; height: 8cqi;
  background: #3b3730;
  clip-path: polygon(0 42%, 50% 0, 100% 42%, 100% 100%, 0 100%);
}
.mkv-hero::after {
  content: '';
  position: absolute;
  left: calc(58% + 5.2cqi); bottom: 31%;
  width: 2.6cqi; height: 3.4cqi;
  border-radius: 1.3cqi 1.3cqi 0 0;
  background: #ffd98a;
  box-shadow: 0 0 3cqi rgba(255, 217, 138, 0.8);
}
.mkv-nav { position: relative; z-index: 1; display: flex; align-items: center; gap: 2.4cqi; }
.mkv-logo { font-family: var(--font-display); font-size: 2.5cqi; font-weight: 600; letter-spacing: -0.01em; }
.mkv-btn { padding: 0.8cqi 2cqi; border: 1px solid rgba(255, 255, 255, 0.75); border-radius: 4cqi; font-size: 1.4cqi; }
.mkv-copy { position: relative; z-index: 1; margin: auto 0; text-align: center; }
.mkv-kicker { display: block; font-size: 1.35cqi; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; text-shadow: 0 0.2cqi 1.2cqi rgba(30, 36, 28, 0.55); }
.mkv-title {
  display: block;
  max-width: 62%;
  margin: 1.2cqi auto 0;
  font-family: var(--font-display);
  font-size: 5.6cqi;
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-shadow: 0 0.4cqi 2cqi rgba(30, 36, 28, 0.35);
}
.mkv-date {
  position: relative;
  z-index: 1;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 2.2cqi;
  padding: 0.9cqi 0.9cqi 0.9cqi 2.6cqi;
  border-radius: 5cqi;
  background: #fff;
  color: #1d1b16;
  font-size: 1.6cqi;
  box-shadow: 0 1.4cqi 4cqi rgba(30, 36, 28, 0.3);
}
.mkv-date small { display: block; font-size: 1.15cqi; color: #8b877c; }
.mkv-ok { color: #4d7a4f; font-weight: 600; }
.mkv-check { padding: 1.1cqi 2.6cqi; border-radius: 4cqi; background: #5f7058; color: #fff; font-weight: 600; }
.mkv-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4cqi; height: 14cqi; padding: 1.8cqi 3.6cqi 2.2cqi; }

/* Hair & beauty: dark, bold type, booking card */
.mk--salon { display: grid; grid-template-columns: 38% 1fr; background: #1f1b19; color: #f3ece4; }
.mks-side { display: flex; flex-direction: column; gap: 2cqi; padding: 3.2cqi 3.4cqi; }
.mks-logo { font-size: 1.5cqi; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: #c9a36a; }
.mks-title { margin-top: auto; font-size: 5.4cqi; font-weight: 600; line-height: 1; letter-spacing: 0.03em; text-transform: uppercase; }
.mks-btn { align-self: flex-start; padding: 1.2cqi 2.8cqi; background: #c9a36a; color: #1f1b19; font-size: 1.5cqi; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.mks-stars { font-size: 1.35cqi; color: #c9a36a; }
.mks-main { position: relative; }
.mks-photo { position: absolute; inset: 0; border-radius: 0; }
.mks-card {
  position: absolute;
  right: 3cqi; bottom: 3cqi;
  width: 56%;
  display: grid;
  gap: 1.1cqi;
  padding: 2.2cqi;
  border-radius: 1.6cqi;
  background: rgba(255, 255, 255, 0.97);
  color: #1f1b19;
  font-size: 1.45cqi;
  box-shadow: 0 2cqi 5cqi rgba(0, 0, 0, 0.35);
}
.mks-card > b { font-size: 1.6cqi; }
.mks-slots { display: flex; gap: 0.9cqi; margin-bottom: 0.4cqi; }
.mks-slots i { flex: 1; padding: 0.9cqi 0; border: 1px solid #ddd3c6; border-radius: 0.9cqi; text-align: center; font-size: 1.3cqi; }
.mks-slots .is-on { background: #1f1b19; border-color: #1f1b19; color: #fff; }
.mks-row { display: flex; justify-content: space-between; padding-top: 1cqi; border-top: 1px solid #eee5da; }

/* Restaurants: warm and dark, a menu with prices */
.mk--food { display: flex; flex-direction: column; gap: 1.6cqi; padding: 2.2cqi 3.6cqi 2.4cqi; background: #1b120d; color: #f6e9dc; }
.mkf-nav { display: flex; align-items: center; }
.mkf-logo { font-family: var(--font-display); font-size: 2.6cqi; font-weight: 600; color: #f2b33d; }
.mkf-hero {
  flex: 1;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 2cqi;
  padding: 1.6cqi 3cqi;
  border-radius: 1.6cqi;
  background: radial-gradient(circle at 78% 55%, rgba(242, 179, 61, 0.38), transparent 55%), linear-gradient(135deg, #7c2f1c, #3a1910);
}
.mkf-kicker { display: block; font-size: 1.3cqi; letter-spacing: 0.2em; text-transform: uppercase; color: #f2b33d; }
.mkf-title { display: block; margin: 1cqi 0 2.2cqi; font-family: var(--font-display); font-size: 5.2cqi; font-weight: 600; line-height: 1.02; letter-spacing: -0.02em; }
.mkf-btns { display: flex; gap: 1.2cqi; }
.mkf-btn { padding: 1.1cqi 2.2cqi; border-radius: 4cqi; background: #f2b33d; color: #1b120d; font-size: 1.45cqi; font-weight: 600; white-space: nowrap; }
.mkf-btn--ghost { background: transparent; color: #f6e9dc; box-shadow: inset 0 0 0 1px rgba(246, 233, 220, 0.5); }
.mkf-pizza {
  justify-self: center;
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle 1.5cqi at 33% 36%, #3f7f3a 0 96%, transparent 100%),
    radial-gradient(circle 1.3cqi at 66% 62%, #3f7f3a 0 96%, transparent 100%),
    radial-gradient(circle 1.2cqi at 44% 74%, #3f7f3a 0 96%, transparent 100%),
    radial-gradient(circle 2.6cqi at 62% 30%, #f8ecd0 0 94%, transparent 100%),
    radial-gradient(circle 2.8cqi at 34% 62%, #f8ecd0 0 94%, transparent 100%),
    radial-gradient(circle 2.2cqi at 72% 47%, #f8ecd0 0 94%, transparent 100%),
    radial-gradient(circle 2cqi at 48% 48%, #f8ecd0 0 94%, transparent 100%),
    radial-gradient(circle closest-side, #c8412b 0 78%, #e3a55c 81% 91%, #a8642f 95% 99%, transparent 100%);
  filter: drop-shadow(0 2cqi 3cqi rgba(0, 0, 0, 0.45));
}
.mkf-menu { display: grid; gap: 0.8cqi; font-size: 1.5cqi; }
.mkf-menu__head { font-family: var(--font-display); font-style: italic; font-size: 2.2cqi; color: #f2b33d; }
.mkf-item { display: flex; align-items: baseline; gap: 1cqi; }
.mkf-item i { flex: 1; border-bottom: 1px dotted rgba(246, 233, 220, 0.35); }
.mkf-item b { color: #f2b33d; font-weight: 600; }

/* Trades: phone number up top, quote form, trust badges */
.mk--trade { display: flex; flex-direction: column; background: #fff; color: #15253c; }
.mkt-top { display: flex; justify-content: space-between; align-items: center; padding: 1cqi 3.4cqi; background: #f08a24; font-size: 1.35cqi; font-weight: 600; }
.mkt-top b { font-size: 1.6cqi; }
.mkt-nav { display: flex; align-items: center; padding: 1.7cqi 3.4cqi; }
.mkt-logo { display: flex; align-items: center; gap: 1cqi; font-size: 2.1cqi; font-weight: 600; letter-spacing: -0.02em; }
.mkt-logo svg { width: 2.6cqi; height: 2.6cqi; fill: #f08a24; }
.mkt-hero {
  flex: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 3cqi;
  padding: 2.6cqi 3.4cqi;
  color: #fff;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1cqi, transparent 1cqi 3cqi),
    linear-gradient(120deg, #15253c, #2f5888);
}
.mkt-title { display: block; font-size: 5.6cqi; font-weight: 600; line-height: 1; letter-spacing: -0.035em; }
.mkt-sub { display: block; margin: 1.6cqi 0 2cqi; font-size: 1.65cqi; line-height: 1.4; opacity: 0.85; }
.mkt-stars { font-size: 1.45cqi; }
.mkt-stars b { color: #f08a24; letter-spacing: 0.08em; }
.mkt-form { display: grid; gap: 1cqi; padding: 2.2cqi; border-radius: 1.4cqi; background: #fff; color: #15253c; box-shadow: 0 2cqi 5cqi rgba(0, 0, 0, 0.3); }
.mkt-form b { font-size: 1.8cqi; }
.mkt-form i { padding: 1cqi 1.4cqi; border: 1px solid #d6dde8; border-radius: 0.8cqi; font-size: 1.35cqi; color: #8a96a8; }
.mkt-form span { padding: 1.2cqi; border-radius: 0.8cqi; background: #f08a24; text-align: center; font-size: 1.5cqi; font-weight: 600; }
.mkt-badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1cqi; padding: 1.8cqi 3.4cqi 2.2cqi; font-size: 1.35cqi; font-weight: 600; }
.mkt-badges span { display: flex; align-items: center; gap: 0.8cqi; }
.mkt-badges span::before {
  content: '\2713';
  flex: none;
  display: grid;
  place-items: center;
  width: 2.4cqi; height: 2.4cqi;
  border-radius: 50%;
  background: rgba(240, 138, 36, 0.15);
  color: #f08a24;
  font-size: 1.3cqi;
}

/* Photographers: dark, images first, private client galleries */
.mk--photo { display: flex; flex-direction: column; gap: 2.4cqi; padding: 2.4cqi 3.4cqi 3cqi; background: #111417; color: #eef0f2; }
.mkp-nav { display: flex; align-items: center; gap: 2.4cqi; }
.mkp-logo { font-family: var(--font-display); font-style: italic; font-size: 2.8cqi; }
.mkp-login { padding: 0.8cqi 1.8cqi; border: 1px solid rgba(238, 240, 242, 0.4); border-radius: 3cqi; font-size: 1.35cqi; }
.mkp-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 3cqi; }
.mkp-intro { display: flex; flex-direction: column; justify-content: flex-end; gap: 1.4cqi; }
.mkp-title { font-family: var(--font-display); font-size: 5cqi; font-weight: 500; line-height: 1.04; letter-spacing: -0.02em; }
.mkp-sub { font-size: 1.35cqi; letter-spacing: 0.1em; text-transform: uppercase; color: #9aa3ab; }
.mkp-gallery {
  display: flex;
  align-items: center;
  gap: 1.4cqi;
  margin-top: 1.2cqi;
  padding: 1.4cqi 1.8cqi;
  border-radius: 1.2cqi;
  background: rgba(238, 240, 242, 0.07);
  border: 1px solid rgba(238, 240, 242, 0.12);
  font-size: 1.35cqi;
  color: #9aa3ab;
}
.mkp-gallery svg { flex: none; width: 2.6cqi; height: 2.6cqi; color: #ef8f6b; }
.mkp-gallery b { display: block; font-size: 1.6cqi; color: #eef0f2; }
.mkp-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 1.2cqi; min-height: 0; }
.mkp-grid > :first-child { grid-row: span 2; }
.mkp-grid .ph { border-radius: 0.6cqi; }

/* A little life in the mock-ups while they're on screen (homepage
   scenes, or motion.js running on a page with .sc-kit) */
@media (prefers-reduced-motion: no-preference) {
  .sc-motion .mkf-pizza,
  html.motion .sc-kit .mkf-pizza { animation: scSpin 60s linear infinite; }
  .sc-motion .mkp-grid .ph,
  html.motion .sc-kit .mkp-grid .ph { animation: scKen 9s ease-in-out infinite alternate; }
  .sc-motion .mkp-grid .ph:nth-child(2n),
  html.motion .sc-kit .mkp-grid .ph:nth-child(2n) { animation-delay: -4s; }
  .sc-motion .mkv-ok,
  html.motion .sc-kit .mkv-ok { animation: scBlink 2.4s ease-in-out infinite; }
}
@keyframes scKen { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes scBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* =========================================================
   02 · THE BUILD
   ========================================================= */
.sc-build { position: relative; padding: 110px 0; overflow-x: clip; }
.sc-build__stage {
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 var(--sc-gutter);
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: 40px 5vw;
}
.sc-build__head { margin-bottom: 30px; }
.sc-build__head .sc-h2 { font-size: clamp(2.2rem, 3.9vw, 3.7rem); }
.sc-build__text { position: relative; }
.sc-steps { list-style: none; display: grid; gap: 4px; }
.sc-step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--sc-line);
}
.sc-step__num {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--sc-gold-ink);
  font-variant-numeric: tabular-nums;
  padding-top: 3px;
}
.sc-step h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  color: var(--sc-ink);
}
.sc-step p { padding-top: 6px; font-size: 0.95rem; line-height: 1.55; }
.sc-steps__rail { display: none; }

.sc-build__visual { position: relative; padding: 4% 6% 8% 0; }
.sc-device__glow {
  position: absolute;
  inset: 10% 14% 18% 8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--sc-glow), transparent);
  opacity: 0.6;
  pointer-events: none;
}
.sc-device--build { --sc-a: #8a9a7f; --sc-b: #4d5c45; --sc-accent: #e3b5a4; --sc-font: var(--font-display); --sc-track: -0.02em; }
.sc-chat, .sc-wire, .sc-fakecursor, .sc-confetti, .sc-caret { display: none; }

.sc-chat {
  position: absolute;
  inset: 0;
  flex-direction: column;
  justify-content: center;
  gap: 3cqi;
  padding: 6cqi 9cqi;
}
.sc-chat__bubble {
  max-width: 70%;
  padding: 2.2cqi 3cqi;
  border-radius: 3cqi;
  font-size: max(11px, 2.4cqi);
  line-height: 1.4;
}
.sc-chat__bubble--you { align-self: flex-start; background: var(--sc-bubble); color: var(--sc-ink); border-bottom-left-radius: 0.8cqi; }
.sc-chat__bubble--me { align-self: flex-end; background: var(--sc-bubble-me); color: var(--sc-bubble-me-fg); border-bottom-right-radius: 0.8cqi; }
.sc-wire {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.sc-wire path {
  fill: none;
  stroke: var(--sc-gold);
  stroke-width: 0.55;
  stroke-dasharray: 1;
  stroke-linejoin: round;
}

.sc-quote, .sc-paid, .sc-live, .sc-care, .sc-swatches { position: absolute; z-index: 2; }
.sc-quote {
  top: 16%; right: 0;
  display: grid;
  gap: 2px;
  padding: 12px 16px;
  border: 1.5px dashed var(--sc-gold);
  border-radius: 12px;
  background: var(--sc-glass);
  color: var(--sc-ink);
  font-size: 0.78rem;
  transform: rotate(4deg);
}
.sc-quote span { font-family: var(--font-display); font-size: 1.15rem; color: var(--sc-gold-ink); }
.sc-page:not(.sc-motion) .sc-quote { display: none; }
.sc-paid {
  top: 0; left: 4%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-radius: 100px;
  background: var(--sc-pill-bg);
  color: var(--sc-pill-fg);
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: var(--sc-shadow-sm);
}
.sc-paid b {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--sc-pill-accent);
  font-variant-numeric: tabular-nums;
}
.sc-swatches {
  top: 24%; right: 2%;
  display: grid;
  gap: 10px;
  padding: 10px;
  border-radius: 100px;
  background: var(--sc-glass);
  border: 1px solid var(--sc-line-2);
  box-shadow: var(--sc-shadow-sm);
}
.sc-swatch {
  position: relative;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 2px var(--sc-line-2);
}
.sc-fakecursor {
  position: absolute;
  top: 0; left: 0;
  z-index: 4;
  width: 26px; height: 26px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}
.sc-live {
  top: 8%; right: 9%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border: 2.5px solid var(--sc-green);
  border-radius: 12px;
  background: var(--sc-glass);
  color: var(--sc-green);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: rotate(-6deg);
  box-shadow: 0 0 40px var(--sc-glow);
}
.sc-live i {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--sc-green);
  box-shadow: 0 0 0 0 rgba(126, 214, 163, 0.6);
  animation: scPing 1.6s ease-out infinite;
}
@keyframes scPing { to { box-shadow: 0 0 0 12px rgba(126, 214, 163, 0); } }
.sc-care {
  left: -2%; bottom: 0;
  width: min(270px, 58%);
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--sc-glass);
  border: 1px solid var(--sc-line-2);
  box-shadow: var(--sc-shadow-sm);
  font-size: 0.78rem;
}
.sc-care__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sc-care__row b { color: var(--sc-ink); font-weight: 600; }
.sc-care__pulse { width: 100%; height: 34px; }
.sc-care__pulse path { fill: none; stroke: var(--sc-green); stroke-width: 1.8; stroke-dasharray: 1; stroke-linejoin: round; }
.sc-care__dots { display: inline-flex; gap: 5px; }
.sc-care__dots i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--sc-gold); background: var(--sc-gold); }
.sc-confetti { position: absolute; top: 14%; right: 18%; z-index: 3; width: 0; height: 0; }
.sc-confetti i { position: absolute; top: 0; left: 0; width: 9px; height: 14px; border-radius: 2px; }

@media (max-width: 767px) {
  .sc-build__stage { grid-template-columns: 1fr; }
  .sc-build__visual { order: -1; padding: 8% 4% 12% 0; }
  .sc-build__head { margin-bottom: 20px; }
  .sc-quote { right: -2%; }
  .sc-care { width: 62%; padding: 10px 12px; font-size: 0.7rem; }
  .sc-care__pulse { height: 22px; }
  .sc-paid { font-size: 0.72rem; padding: 7px 12px; }
  .sc-live { font-size: 1.15rem; padding: 7px 14px; }
}

/* Pinned stepper (motion) */
.sc-motion .sc-build { height: 100vh; padding: 0; }
.sc-motion .sc-build__stage { height: 100%; padding-top: calc(var(--sc-head-h) + 8px); padding-bottom: 28px; }
.sc-motion .sc-chat { display: flex; }
.sc-motion .sc-wire,
.sc-motion .sc-fakecursor,
.sc-motion .sc-confetti,
.sc-motion .sc-caret { display: block; }
.sc-motion .sc-steps__rail {
  display: block;
  position: absolute;
  left: 21px;
  width: 1px;
  background: var(--sc-line-2);
}
.sc-motion .sc-steps__rail span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(var(--sc-green), var(--sc-gold));
  transform: scaleY(0);
  transform-origin: top center;
}
.sc-motion .sc-step { border-top: 0; padding: 7px 0; transition: opacity 0.45s ease; opacity: 0.32; }
.sc-motion .sc-step.is-active { opacity: 1; }
.sc-motion .sc-step__num {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 100px;
  background: var(--sc-bg);
  border: 1px solid var(--sc-line-2);
  font-size: 0.85rem;
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.sc-motion .sc-step.is-active .sc-step__num { background: var(--sc-gold); border-color: var(--sc-gold); color: #14201a; }
.sc-motion .sc-step h3 { padding-top: 2px; }
.sc-motion .sc-step__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease-out); }
.sc-motion .sc-step__more > p { overflow: hidden; }
.sc-motion .sc-step.is-active .sc-step__more { grid-template-rows: 1fr; }

@media (min-width: 768px) {
  .sc-motion .sc-steps__rail { top: 0; bottom: 0; }
  .sc-motion .sc-build__visual { max-width: min(100%, calc((100vh - 170px) * 1.35)); justify-self: end; width: 100%; }
}
@media (max-width: 767px) {
  .sc-motion .sc-build { height: 100vh; height: 100lvh; }
  .sc-motion .sc-build__stage {
    grid-template-rows: none;
    align-content: start;
    align-items: start;
    gap: 14px;
    padding-top: calc(var(--sc-head-h) - 6px);
  }
  .sc-motion .sc-build__head { order: -2; margin-bottom: 0; }
  .sc-motion .sc-build__head .sc-h2 { font-size: clamp(1.9rem, 8.4vw, 2.6rem); }
  .sc-motion .sc-build__head .sc-eyebrow { margin-bottom: 8px; }
  .sc-motion .sc-build__text { display: contents; }
  .sc-motion .sc-build__visual { order: -1; }
  .sc-motion .sc-steps { display: grid; grid-template-areas: 'step'; padding-top: 14px; }
  .sc-motion .sc-steps__rail { position: relative; left: 0; width: 100%; height: 2px; order: 0; }
  .sc-motion .sc-steps__rail span { transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg, var(--sc-green), var(--sc-gold)); }
  .sc-motion .sc-step { grid-area: step; opacity: 0; transform: translateY(10px); transition: opacity 0.35s ease, transform 0.45s var(--ease-out); padding: 0; }
  .sc-motion .sc-step.is-active { opacity: 1; transform: none; }
  .sc-motion .sc-step__more { grid-template-rows: 1fr; }
}

/* =========================================================
   03 · THE PRICE
   ========================================================= */
.sc-price {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 110px var(--sc-gutter);
  overflow: clip;
  isolation: isolate;
  text-align: center;
}
.sc-price__glow {
  position: absolute;
  left: 50%; top: 50%;
  z-index: -1;
  width: min(1100px, 130vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(234, 179, 8, 0.2), rgba(28, 92, 68, 0.18) 55%, transparent);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.sc-price__ring {
  position: absolute;
  left: 50%; top: 50%;
  z-index: -1;
  width: min(820px, 120vw);
  height: auto;
  margin: calc(min(820px, 120vw) / -2) 0 0 calc(min(820px, 120vw) / -2);
  pointer-events: none;
}
.sc-price__ring text {
  fill: var(--sc-ring-text);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.sc-price__stage { position: relative; display: grid; justify-items: center; }
.sc-odo {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(7rem, 27vw, 22rem);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--sc-ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.sc-odo__roll { display: none; }
.sc-motion .sc-odo__static { display: none; }
.sc-motion .sc-odo__roll { display: inline-flex; align-items: flex-start; }
.sc-odo__cur { color: var(--sc-gold-ink); margin-right: 0.02em; }
.sc-odo__digits { display: inline-flex; }
.sc-odo__col {
  display: inline-block;
  height: 1.05em;
  overflow: hidden;
  text-align: center;
}
.sc-odo__strip { display: flex; flex-direction: column; }
.sc-odo__strip span { display: block; height: 1.05em; line-height: 1.05; }
.sc-price__labels { display: grid; gap: 10px; margin-top: 8px; }
.sc-price__label {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 2.1rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--sc-ink);
  max-width: 24ch;
  margin: 0 auto;
  text-wrap: balance;
}
.sc-price__monthly { margin-top: 26px; font-size: 1.05rem; color: var(--sc-body); }
.sc-price__monthly b { color: var(--sc-gold-ink); font-weight: 600; }
.sc-motion .sc-price { height: 100vh; min-height: 0; padding-top: var(--sc-head-h); }
.sc-motion .sc-price__labels { grid-template-areas: 'label'; }
.sc-motion .sc-price__label { grid-area: label; }
/* the big number shows the amount, so the inline copy is for screen readers only */
.sc-motion .sc-price__inline {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* used by the restaurant mock-up and the showcase orbit */
@keyframes scSpin { to { transform: rotate(360deg); } }

@media print {
  .sc-hero__canvas { display: none !important; }
}

/* =========================================================
   HOMEPAGE (html.sc-home)
   ========================================================= */
.sc-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 22px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--sc-muted);
}
.sc-hero__trust > span { display: inline-flex; align-items: center; gap: 7px; }
.sc-hero__trust > span::before { content: '\2713'; color: var(--sc-green); font-weight: 700; }
/* scene decorations (rotated stamps, glows) must never cause sideways scroll */
.sc-home main { overflow-x: clip; }
/* the homepage headline is longer than the showcase's */
.sc-home .sc-hero__title { font-size: clamp(2.3rem, 4.5vw, 4.1rem); text-wrap: balance; }
.sc-home .sc-hero__mark { font-size: min(13.5vw, 24vh, 14rem); }
.sc-home .sc-hero__copy { gap: 24px 48px; }
.sc-home .sc-hero__actions { gap: 12px 14px; }
@media (max-width: 767px) { .sc-home .sc-hero__mark { font-size: min(17.5vw, 24vh); } }

/* Industry cards: no box, just a peek at a mock-up site for that
   industry on a panel in its colours, with the copy below */
.industry-card__shot {
  position: relative;
  height: 196px;
  margin-bottom: 22px;
  padding: 26px 26px 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--ind-a) 30%, transparent), transparent 70%),
    radial-gradient(100% 80% at 100% 100%, color-mix(in srgb, var(--ind-b) 28%, transparent), transparent 70%),
    var(--surface);
}
.industry-card__shot .sc-device {
  border-radius: 10px;
  box-shadow: var(--sc-shadow-sm);
  transform-origin: 50% 0;
  transition: transform 0.6s var(--ease-out);
}
.industry-card:hover .industry-card__shot .sc-device { transform: translateY(-6px) scale(1.03); }
.industry-card__shot--blank { background: transparent; border: 1.5px dashed var(--border-strong); }
.industry-card__shot--blank .sc-device {
  background: transparent;
  border: 1.5px dashed var(--border-strong);
  box-shadow: none;
}
.industry-card__shot--blank .sc-device__bar { background: transparent; border-bottom-style: dashed; }
.sc-blank {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-sans);
  font-size: 3rem;
  font-weight: 300;
  color: var(--muted);
}
@media (max-width: 640px) {
  .industry-card__shot { height: 200px; }
}

/* Homepage flourishes (scenes.js: flourishes). The pointer light
   and word-by-word headings are site-wide: style.css MOTION. */
.industry-card__shot .sc-device { translate: 0 var(--py, 0px); }