/* Sable Story: a Square-inspired marketing concept (SAB-1253).
   Tokens are the Cozy Light / Cozy Dark values from sable/docs/design.md. */

@font-face {
  font-family: "Sable Display";
  src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
       url("assets/HelveticaNeueBold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --canvas: #f5f9f4;
  --card: #fdfffd;
  --ink: #151d14;
  --ink-2: #3f463e;
  --ink-3: #6c746b;
  --line: #dce3db;
  --muted: #ecf2ec;
  --accent: #dff4db;
  --pistachio: #b5eca9;
  --on-pistachio: #0b1209;
  --pistachio-hover: #c6eabe;

  --night: #0c0f0c;
  --night-card: #171b17;
  --night-line: #282d28;
  --on-night: #f6f9f5;
  --on-night-2: #b9c0b8;
  --on-night-3: #888e87;

  --paid-bg: #b5eca9;  --paid-fg: #1c3517;
  --part-bg: #fcedcd;  --part-fg: #825b00;

  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 24px; --r-pill: 9999px;

  --font-ui-display: "Sable Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: var(--font-ui-display);
  --display-weight: 700;
  --display-tracking: -0.05em;
  --display-leading: 0.98;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, sans-serif;

  /* Never narrower than the phone's own safe area, for a notch in landscape. */
  --gutter: max(clamp(20px, 4vw, 56px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --nav-h: 68px;
  /* Screen heights. --view-h is the screen with the browser's bars showing, which is where things are laid out.
     --stage-h is how tall a pinned stage is: the screen at its tallest, plus --bleed on a phone (see .stage). */
  --bleed: 0px;
  --view-h: 100vh;
  --stage-h: 100vh;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  color-scheme: light;
}

@supports (height: 100svh) {
  :root { --view-h: 100svh; --stage-h: calc(100lvh + var(--bleed)); }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* No visible scrollbar anywhere on the site (Christian, 2026-09-27). The page still scrolls normally. */
html, body, * { scrollbar-width: none; -ms-overflow-style: none; }
::-webkit-scrollbar { width: 0; height: 0; display: none; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 400 16px/1.5 var(--font-body);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
/* Touch: no grey flash on tap, and no wait for a double tap. */
a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
:focus-visible { outline: 2px solid #7ac26b; outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, .statement {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: var(--display-leading);
  text-wrap: balance;
}

.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-pill); }
.skip:focus { top: 12px; }

.eyebrow {
  font: 700 15px/1 var(--font-ui-display);
  letter-spacing: -0.03em;
  color: var(--ink-3);
}

/* Buttons. Some are links and some are buttons; they look the same. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer;
  height: 50px; padding: 0 26px;
  border-radius: var(--r-pill);
  font: 500 16px/1 var(--font-body);
  letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap;
  transition: transform .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn--sm { height: 40px; padding: 0 18px; font-size: 14px; }
.btn--primary { background: var(--pistachio); color: var(--on-pistachio); }
.btn--light { background: #fff; color: var(--ink); }
@media (hover: hover) {
  .btn--primary:hover { background: var(--pistachio-hover); }
  .btn--light:hover { background: var(--muted); }
}

/* ───────── Nav ───────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) var(--gutter) 0;
  color: #fff;
  transition: background-color .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease), transform .55s var(--ease);
}
.nav.is-away { transform: translateY(-110%); }
.nav.is-solid.is-dark {
  color: var(--on-night);
  background: color-mix(in srgb, var(--night) 80%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--night-line) 80%, transparent);
}
.nav.is-solid {
  color: var(--ink);
  background: color-mix(in srgb, var(--canvas) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(16px);
  backdrop-filter: saturate(1.5) blur(16px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--line) 80%, transparent);
}
.nav__logo { display: inline-flex; color: inherit; position: relative; }
/* a bigger place to tap than the mark or the button looks */
.nav__logo::after, .nav__cta::after { content: ""; position: absolute; inset: -9px -6px; }
.nav__cta { position: relative; }
.wordmark { width: 76px; height: 26px; fill: currentColor; }
.nav__actions { display: flex; align-items: center; gap: 14px; }

/* One menu at every width: the wordmark on the left, the hamburger on the right.
   The trial button joins the bar once the hero has scrolled away. */
.nav__cta { opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
.nav.is-solid .nav__cta { opacity: 1; pointer-events: auto; }
.nav__menu {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 7px;
  width: 44px; height: 44px; padding: 0 9px; margin-right: -9px;
  background: none; border: 0; cursor: pointer; color: inherit;
}
.nav__menu span { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .35s var(--ease); }
.nav__menu[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.nav__menu[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
.nav.menu-open { color: var(--on-night); background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; }
.nav.menu-open .nav__cta { opacity: 0; pointer-events: none; }

.menu {
  position: fixed; inset: 0; z-index: 55;
  background: var(--night); color: var(--on-night);
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  padding: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + clamp(28px, 6svh, 72px)) var(--gutter) calc(clamp(28px, 5svh, 56px) + env(safe-area-inset-bottom, 0px));
  opacity: 0; transition: opacity .3s var(--ease);
  overflow-y: auto; overscroll-behavior: contain;
}
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; }
.menu nav { display: flex; flex-direction: column; }
.menu nav a {
  font: var(--display-weight) clamp(40px, 6.4vw, 88px)/1.12 var(--font-display);
  letter-spacing: var(--display-tracking);
  text-decoration: none; padding: 6px 0;
  transform: translateY(16px); opacity: 0;
  transition: transform .5s var(--ease-out), opacity .5s var(--ease-out), color .2s var(--ease);
}
.menu.is-open nav a { transform: none; opacity: 1; }
.menu.is-open nav a:nth-child(2) { transition-delay: .04s; }
.menu.is-open nav a:nth-child(3) { transition-delay: .08s; }
.menu.is-open nav a:nth-child(4) { transition-delay: .12s; }
@media (hover: hover) { .menu nav a:hover { color: var(--pistachio); } }

@media (max-width: 820px) {
  :root { --nav-h: 60px; --bleed: 140px; }
  .nav__actions { gap: 10px; }
  .menu { align-items: stretch; }
  .menu .btn { width: 100%; }
}

/* ───────── Scenes (sticky stages driven by scroll) ───────── */
.scene { position: relative; }
/* What is on a stage is laid out in the screen as it is with the browser's bars showing (--view-h).
   The stage itself is taller (--stage-h). On an iPhone the page carries on under Safari's floating
   bar, below what the browser counts as the screen, so a stage that stopped at the screen's edge
   would leave a strip of the wrong colour under the hero film. --bleed is that extra, on phones only. */
.stage {
  position: sticky; top: 0;
  height: var(--stage-h);
  overflow: hidden;
}

/* ───────── 1 + 2. Hero into collage ───────── */
.scene--hero { height: calc(var(--stage-h) + 210vh); background: var(--canvas); }
.scene--hero .stage { background: var(--canvas); }

.hero-media {
  position: absolute; inset: 0; z-index: 2;
  background: var(--night);
  transform-origin: 50% 50%;
  will-change: transform, clip-path;
}
.hero-media__slides, .slide { position: absolute; inset: 0; width: 100%; height: 100%; }
.slide {
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease;
  transform: scale(1.02);
}
.slide.is-active { opacity: 1; animation: drift 16s ease-in-out infinite alternate; }
.has-film .slide.is-active { animation: none; transform: none; }
@keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.1); } }
.slide--still { object-position: 50% 50%; }
.hero-film {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 1.1s ease;
}
.hero-film.is-live { opacity: 1; }
.hero-media__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8,15,8,.42) 0%, rgba(8,15,8,0) 22%),
    linear-gradient(0deg, rgba(8,15,8,.62) 0%, rgba(8,15,8,.34) 45%, rgba(8,15,8,.22) 100%);
}

.hero-copy {
  position: absolute; inset: 0 0 auto; height: var(--view-h); z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(24px, 3.2vw, 40px);
  padding: var(--nav-h) var(--gutter) 9svh;
  text-align: center; color: #fff;
  will-change: transform, opacity;
}
.hero-copy h1 { font-size: clamp(2.75rem, 6.3vw, 5.75rem); text-wrap: balance; }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

.marquee {
  position: absolute; left: 0; right: 0; bottom: calc(var(--stage-h) - var(--view-h)); z-index: 3;
  padding: 0 0 calc(26px + env(safe-area-inset-bottom, 0px));
  overflow: hidden; color: #fff;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  will-change: opacity;
}
.marquee__track {
  display: flex; align-items: center; gap: 34px; width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee span {
  font: 700 19px/1 var(--font-ui-display);
  letter-spacing: -0.04em; opacity: .82; white-space: nowrap;
}
.marquee i { width: 5px; height: 5px; border-radius: 50%; background: var(--pistachio); flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Collage */
.collage {
  --tile: clamp(72px, min(10vw, 13svh), 148px);
  /* The widest row (five tiles) stops --edge short of each side, so the outer tiles have room to breathe. */
  --edge: clamp(40px, 7vw, 120px);
  --pitch: calc((100vw - 2 * var(--edge) - var(--tile)) / 4);
  --row-gap: clamp(18px, 4.4svh, 52px);
  position: absolute; inset: 0 0 auto; height: var(--view-h); z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--row-gap);
}
.collage__row { display: flex; justify-content: center; gap: calc(var(--pitch) - var(--tile)); }
.tile {
  flex: none; width: var(--tile); height: var(--tile);
  border-radius: calc(var(--tile) * .22);
  overflow: hidden; position: relative;
  --u: calc(var(--tile) / 100);
  will-change: transform, opacity;
}
.tile--photo img { width: 100%; height: 100%; object-fit: cover; }
.tile--slot { background: transparent; }

.statement {
  font-size: clamp(1.7rem, 3.3vw, 3rem);
  max-width: 21em; padding: 0 var(--gutter);
  text-align: center; color: var(--ink);
}

/* Split-word reveal (JS wraps each word) */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em .02em .14em; margin: -.08em -.02em -.14em; }
.w > span { display: inline-block; will-change: transform; }
.js [data-split]:not(.statement) .w > span { transform: translateY(112%); transition: transform .9s var(--ease-out); transition-delay: calc(var(--i) * 45ms); }
.js [data-split].is-in .w > span { transform: none; }

.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: var(--d, 0ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Mini product tiles. --u is 1% of the tile, so everything scales with it.
   Each rests in its finished state; the loops only run while the collage is on screen (.is-live). */
.tile--ui { font-family: var(--font-body); --chip-fs: calc(var(--u) * 11.5); }
.tile--ui b { font: 700 1em/1 var(--font-ui-display); letter-spacing: -0.05em; }
.tile--ui ul { margin: 0; padding: 0; list-style: none; }
.t-appt, .t-report, .t-sign, .t-stock { background: var(--card); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.t-appt span, .t-sign span {
  font-size: var(--chip-fs); font-weight: 500; line-height: 1; white-space: nowrap;
  padding: calc(var(--u) * 5) calc(var(--u) * 8); border-radius: 99px;
  background: var(--pistachio); color: var(--on-pistachio);
}

/* appointments: the day's bookings slide past, right to left */
.t-appt ul { display: flex; width: 400%; height: 100%; }
.t-appt li { flex: none; width: 25%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: calc(var(--u) * 13); }
.t-appt b { font-size: calc(var(--u) * 27); }
.is-live .t-appt ul { animation: slide4 9s var(--ease) infinite; }
@keyframes slide4 {
  0%, 27% { transform: translateX(0); }
  33%, 60% { transform: translateX(-25%); }
  66%, 93% { transform: translateX(-50%); }
  100% { transform: translateX(-75%); }
}

/* point of sale: charge, sending, paid */
.t-paid { background: var(--ink); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 9); }
.t-paid__stage { position: relative; width: calc(var(--u) * 40); height: calc(var(--u) * 40); }
.t-paid__stage > * { position: absolute; inset: 0; display: grid; place-items: center; }
.t-paid__amt { font-size: calc(var(--u) * 27) !important; opacity: 0; }
.t-paid__spin { border-radius: 50%; border: calc(var(--u) * 4) solid rgba(255,255,255,.18); border-top-color: var(--pistachio); opacity: 0; }
.t-paid__ok { border-radius: 50%; background: var(--pistachio); color: var(--on-pistachio); }
.t-paid__ok svg { width: 60%; height: 60%; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.t-paid__label { position: relative; width: 100%; height: calc(var(--u) * 17); font: 700 calc(var(--u) * 17)/1 var(--font-ui-display); letter-spacing: -0.05em; }
.t-paid__label span { position: absolute; inset: 0; text-align: center; opacity: 0; }
.t-paid__label span:last-child { opacity: 1; }
.is-live .t-paid__amt, .is-live .t-paid__label span:nth-child(1) { animation: paidA 7s var(--ease) infinite; }
.is-live .t-paid__spin { animation: paidB 7s var(--ease) infinite, turn .85s linear infinite; }
.is-live .t-paid__label span:nth-child(2) { animation: paidB 7s var(--ease) infinite; }
.is-live .t-paid__ok { animation: paidC 7s var(--ease-out) infinite; }
.is-live .t-paid__label span:nth-child(3) { animation: paidCt 7s var(--ease) infinite; }
.is-live .t-paid__ok svg { animation: paidTick 7s var(--ease) infinite; }
@keyframes paidA { 0%, 28% { opacity: 1; } 34%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes paidB { 0%, 28% { opacity: 0; } 34%, 50% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes paidC { 0%, 50% { opacity: 0; transform: scale(.5); } 57%, 95% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@keyframes paidCt { 0%, 50% { opacity: 0; } 56%, 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes paidTick { 0%, 54% { stroke-dashoffset: 1; } 64%, 100% { stroke-dashoffset: 0; } }
@keyframes turn { to { transform: rotate(360deg); } }

/* tips: the amount counts up (driven from app.js) */
.t-tip { background: var(--accent); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 3); }
.t-tip b { font-size: calc(var(--u) * 34); font-variant-numeric: tabular-nums; }
.t-tip span { font-size: calc(var(--u) * 12); font-weight: 500; color: var(--ink-2); }
.t-tip b.is-done { animation: bump .5s var(--ease-out); }
@keyframes bump { 35% { transform: scale(1.12); } }

/* messaging: someone is typing */
.t-msg { background: var(--pistachio); display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * 8); padding: calc(var(--u) * 14); }
.t-msg span { display: flex; align-items: center; gap: calc(var(--u) * 4); height: calc(var(--u) * 24); border-radius: calc(var(--u) * 12); padding: 0 calc(var(--u) * 9); }
.t-msg span:first-child { width: 78%; background: #fff; border-bottom-left-radius: calc(var(--u) * 3); }
.t-msg span:last-child { width: 52%; align-self: flex-end; background: var(--ink); border-bottom-right-radius: calc(var(--u) * 3); justify-content: center; }
.t-msg i { width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; background: #fff; }
.is-live .t-msg i { animation: typing 1.4s var(--ease) infinite; }
.is-live .t-msg i:nth-child(2) { animation-delay: .15s; }
.is-live .t-msg i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-18%); } }

.t-logo { background: var(--ink); color: var(--pistachio); display: grid; place-items: center; }
/* The mark spins inside a box big enough to hold it at any angle. app.js drives it, following the
   iOS app's StartupLoadingView: a rest, one whipped turn with a trail, and a sweep of light. */
.t-logo svg { width: 67.4%; height: 67.4%; overflow: visible; }

/* Jules: you say it, Jules does it. The orb is the real one from the app (jules-orb.js);
   app.js runs the script and sets data-state so the glow, the words and the orb move together. */
.t-jules { background: #0e0c1f; color: #fff; isolation: isolate; }
.t-jules::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at 78% 22%, rgba(122,108,240,.75) 0%, rgba(91,75,224,.32) 34%, rgba(91,75,224,0) 66%),
    radial-gradient(circle at 12% 96%, rgba(185,199,255,.2) 0%, rgba(185,199,255,0) 46%);
  opacity: .5; transform: scale(1);
  transition: opacity .9s var(--ease), transform 1.2s var(--ease);
}
.t-jules[data-state="listening"]::before { opacity: .78; transform: scale(1.06); }
.t-jules[data-state="thinking"]::before { opacity: .62; transform: scale(1.02); }
.t-jules[data-state="speaking"]::before { opacity: 1; transform: scale(1.14); }
.t-jules > b { position: absolute; left: calc(var(--u) * 12); top: calc(var(--u) * 12); font-size: calc(var(--u) * 14); }
.t-jules canvas {
  position: absolute; right: calc(var(--u) * -13); top: calc(var(--u) * -13);
  width: calc(var(--u) * 62); height: calc(var(--u) * 62); border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #dfe5ff 0%, #b9c7ff 26%, #7a6cf0 58%, #5b4be0 78%, #3a2aa8 100%);
  transition: transform 1s var(--ease);
}
.t-jules canvas.is-gl { background: none; }
.t-jules[data-state="listening"] canvas { transform: scale(1.05); }
.t-jules[data-state="speaking"] canvas { transform: scale(1.1); }
.t-jules__say, .t-jules__done { position: absolute; left: calc(var(--u) * 12); right: calc(var(--u) * 10); bottom: calc(var(--u) * 12); margin: 0; }
.t-jules__say {
  font: 700 calc(var(--u) * 11.5)/1.12 var(--font-ui-display); letter-spacing: -0.04em;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.t-jules__say i { font-style: normal; display: inline-block; opacity: 0; transform: translateY(40%); transition: opacity .3s var(--ease), transform .4s var(--ease-out); }
.t-jules__say i.is-on { opacity: 1; transform: none; }
.t-jules[data-state="thinking"] .t-jules__say { opacity: .45; }
.t-jules[data-state="speaking"] .t-jules__say { opacity: 0; transform: translateY(-30%); }
.t-jules__done {
  display: inline-flex; align-items: center; gap: calc(var(--u) * 4); right: auto;
  font-size: var(--chip-fs); font-weight: 500; line-height: 1; white-space: nowrap;
  padding: calc(var(--u) * 5) calc(var(--u) * 9) calc(var(--u) * 5) calc(var(--u) * 6); border-radius: 99px;
  background: var(--pistachio); color: var(--on-pistachio);
  opacity: 0; transform: scale(.8); transform-origin: left center;
  transition: opacity .35s var(--ease), transform .5s var(--ease-out);
}
.t-jules__done em { font-style: normal; }
.t-jules__done svg { width: calc(var(--u) * 11); height: calc(var(--u) * 11); fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .45s var(--ease) .15s; }
.t-jules[data-state="speaking"] .t-jules__done { opacity: 1; transform: scale(1); }
.t-jules[data-state="speaking"] .t-jules__done svg { stroke-dashoffset: 0; }

/* reporting: the bars and the total move together, down then back up. app.js drives both
   from one clock, so there is no CSS animation here. At rest the bars stand at full height. */
.t-report { display: flex; flex-direction: column; align-items: flex-start; padding: calc(var(--u) * 13); }
.t-report span { font: 700 calc(var(--u) * 12)/1 var(--font-ui-display); letter-spacing: -0.03em; color: #477c3b; }
.t-report b { font-size: calc(var(--u) * 23); font-variant-numeric: tabular-nums; margin-top: calc(var(--u) * 4); }
.t-report__bars { margin-top: auto; width: 100%; height: calc(var(--u) * 34); display: flex; align-items: flex-end; gap: calc(var(--u) * 5); }
.t-report__bars i { flex: 1; height: var(--h); border-radius: calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 1.5) calc(var(--u) * 1.5); background: var(--pistachio); transform-origin: bottom; }
.t-report__bars i:nth-child(1) { --h: 36%; }
.t-report__bars i:nth-child(2) { --h: 58%; }
.t-report__bars i:nth-child(3) { --h: 46%; }
.t-report__bars i:nth-child(4) { --h: 74%; }
.t-report__bars i:nth-child(5) { --h: 100%; background: var(--ink); }

/* forms: the signature writes itself */
.t-sign { display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * 6); padding: calc(var(--u) * 12); }
.t-sign svg { width: 100%; height: calc(var(--u) * 34); color: var(--ink); overflow: visible; }
.t-sign path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.t-sign span { align-self: flex-start; background: var(--paid-bg); color: var(--paid-fg); transform-origin: left center; }
/* The pen is quick: the whole signature lands in about 0.7s of a 4s loop. */
.is-live .t-sign path { animation: sign 4s cubic-bezier(.4, 0, .3, 1) infinite; }
.is-live .t-sign span { animation: signed 4s var(--ease-out) infinite; }
@keyframes sign { 0% { stroke-dashoffset: 1; opacity: 1; } 17% { stroke-dashoffset: 0; } 88% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes signed { 0%, 17% { opacity: 0; transform: scale(.8); } 24%, 88% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(1); } }

/* inventory: levels run down, then the restock lands */
.t-stock { display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 16) calc(var(--u) * 14); }
.t-stock u { display: block; height: calc(var(--u) * 10); border-radius: 99px; background: var(--muted); position: relative; overflow: hidden; }
.t-stock u::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #7ac26b; transform: translateX(-22%); }
.t-stock .s2::after { background: #e0a526; transform: translateX(-80%); }
.t-stock .s3::after { transform: translateX(-45%); }
.is-live .t-stock .s1::after { animation: stock1 9s var(--ease) infinite; }
.is-live .t-stock .s2::after { animation: stock2 9s var(--ease) infinite; }
.is-live .t-stock .s3::after { animation: stock3 9s var(--ease) infinite; }
@keyframes stock1 {
  0% { transform: translateX(-22%); background: #7ac26b; }
  45% { transform: translateX(-58%); background: #7ac26b; }
  62% { transform: translateX(-78%); background: #e0a526; }
  78% { transform: translateX(-84%); background: #e0a526; }
  86%, 100% { transform: translateX(-22%); background: #7ac26b; }
}
@keyframes stock2 {
  0%, 14% { transform: translateX(-80%); background: #e0a526; }
  24% { transform: translateX(-8%); background: #7ac26b; }
  70% { transform: translateX(-52%); background: #7ac26b; }
  90%, 100% { transform: translateX(-80%); background: #e0a526; }
}
@keyframes stock3 {
  0% { transform: translateX(-45%); }
  50% { transform: translateX(-68%); }
  58%, 100% { transform: translateX(-45%); }
}

@media (max-width: 820px) {
  /* Phone collage. Five columns half a step apart, wider than the screen and centred on it, so the
     outer tiles of the wide rows run off the edges. Tiles are placed by data-m-row and data-m-col:
       appointments, paid  /  photo, messages, photo  /  Jules, report  /  the statement
       photo, the film, photo  /  signature, stock */
  .collage {
    --tile: min(21.5vw, 11svh); --step: 24.3vw; --row-gap: clamp(14px, 4.4svh, 44px);
    display: grid; align-content: center; justify-content: center; justify-items: center;
    grid-template-columns: repeat(5, var(--tile));
    column-gap: calc(var(--step) - var(--tile));
    row-gap: var(--row-gap);
  }
  .collage__row { display: contents; }
  /* Attributes, not inline styles: app.js clears the tiles' inline styles whenever the page is measured. */
  [data-m-row="1"] { grid-row: 1; } [data-m-row="2"] { grid-row: 2; } [data-m-row="3"] { grid-row: 3; }
  [data-m-row="5"] { grid-row: 5; } [data-m-row="6"] { grid-row: 6; }
  [data-m-col="1"] { grid-column: 1; } [data-m-col="2"] { grid-column: 2; } [data-m-col="3"] { grid-column: 3; }
  [data-m-col="4"] { grid-column: 4; } [data-m-col="5"] { grid-column: 5; }
  .collage .statement { grid-row: 4; grid-column: 1 / -1; }
  .m-hide { display: none; }
  .hero-copy { justify-content: flex-end; padding-bottom: calc(15svh + env(safe-area-inset-bottom, 0px)); gap: 26px; }
  .hero-copy h1 { font-size: clamp(2.6rem, 12vw, 3.4rem); }
  .hero-cta .btn { height: 48px; padding: 0 22px; font-size: 15px; }
  .hero-media__scrim {
    background:
      linear-gradient(180deg, rgba(8,15,8,.4) 0%, rgba(8,15,8,0) 20%),
      linear-gradient(0deg, rgba(8,15,8,.9) 0%, rgba(8,15,8,.72) 30%, rgba(8,15,8,.18) 62%, rgba(8,15,8,0) 100%);
  }
  .statement { font-size: clamp(1.55rem, 7vw, 2rem); max-width: 13.5em; }
  .marquee span { font-size: 16px; }
  .marquee__track { gap: 24px; }
}

.has-film .hero-media__scrim {
  background:
    linear-gradient(180deg, rgba(8,15,8,.38) 0%, rgba(8,15,8,0) 24%),
    linear-gradient(0deg, rgba(8,15,8,.5) 0%, rgba(8,15,8,0) 30%),
    rgba(8,15,8,.3);
}
@media (max-width: 820px) {
  .has-film .hero-copy { justify-content: center; padding-bottom: 6svh; }
}

/* ───────── 3. Features ───────── */
.scene--features { --steps: 8; height: calc(var(--stage-h) + var(--steps) * 58vh); background: var(--canvas); }
.features {
  height: var(--view-h);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "head stage" "list stage";
  column-gap: clamp(32px, 6vw, 96px);
  padding: calc(var(--nav-h) + clamp(20px, 5svh, 56px)) var(--gutter) clamp(24px, 6svh, 64px);
  max-width: 1440px; margin: 0 auto;
}
.features__head { grid-area: head; display: flex; flex-direction: column; gap: 18px; padding-bottom: clamp(20px, 4svh, 44px); }
.features__head h2 { font-size: clamp(2.2rem, 4.4vw, 4rem); }

/* The list fills its column top to bottom, the same height as the picture beside it.
   Rows share the spare height, so a taller window gives roomier rows instead of smaller type. */
.flist { grid-area: list; align-self: stretch; min-height: 0; display: flex; flex-direction: column; }
.fitem { border-top: 1px solid var(--line); position: relative; flex: 1 1 auto; display: flex; flex-direction: column; max-height: 168px; }
.fitem__head { flex: 1 1 auto; }
.fitem:last-child { border-bottom: 1px solid var(--line); }
.fitem::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%;
  background: var(--ink); transform-origin: left; transform: scaleX(0);
}
.fitem.is-active::before { transform: scaleX(var(--fp, 0)); }
.fitem__head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: clamp(8px, 1.5svh, 20px) 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  /* The type only steps down on short windows, where eight rows would not otherwise fit. */
  font: var(--display-weight) clamp(1.05rem, min(1.7vw, 3svh), 1.5rem)/1.1 var(--font-display);
  letter-spacing: var(--display-tracking);
  color: var(--ink-3);
  transition: color .4s var(--ease);
}
.fitem__head::after {
  content: ""; width: 14px; height: 14px; flex: none;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transition: transform .5s var(--ease), background-size .5s var(--ease);
}
.fitem.is-active .fitem__head { color: var(--ink); }
.fitem.is-active .fitem__head::after { background-size: 100% 2px, 2px 0; transform: rotate(180deg); }
.fitem__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.fitem.is-active .fitem__body { grid-template-rows: 1fr; }
.fitem__body > div { overflow: hidden; }
.fitem__body p { max-width: 36ch; min-height: 4.5em; padding: 0 0 clamp(12px, 2.2svh, 24px); color: var(--ink-2); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.5; box-sizing: content-box; }

.fcaption { display: none; }

.fstage {
  grid-area: stage; position: relative; align-self: stretch;
  border-radius: var(--r-xl); overflow: hidden;
  background: var(--muted);
  container-type: size;
  min-height: 0;
}
.fvis { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .7s var(--ease); pointer-events: none; }
.fvis.is-active { opacity: 1; }
.fvis__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.4s var(--ease-out); }
.fvis.is-active .fvis__bg { transform: scale(1.04); }

/* Product card. Everything inside is in em so it scales with the stage. */
.ui {
  position: relative;
  font-size: clamp(10px, min(3.45cqw, 2.9cqh), 15.5px);
  width: 25em;
  padding: 1.5em;
  border-radius: 1.7em;
  background: var(--card); color: var(--ink-2);
  box-shadow: 0 2.4em 5em -1.4em rgba(8,15,8,.5), 0 0 0 1px rgba(8,15,8,.05);
  line-height: 1.35; letter-spacing: -0.01em;
  transform: translateY(1.8em) scale(.965); opacity: 0;
  transition: transform .8s var(--ease-out), opacity .5s var(--ease);
}
.fvis.is-active .ui { transform: none; opacity: 1; transition-delay: .08s; }
.ui b { font-weight: 600; color: var(--ink); }
.ui__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.15em; }
.ui__title { font: 700 1.7em/1 var(--font-ui-display); letter-spacing: -0.05em; color: var(--ink); }
.ui__meta { font-size: .9em; color: var(--ink-3); }
.chip { display: inline-flex; align-items: center; font-style: normal; font-weight: 500; font-size: .8em; line-height: 1; padding: .45em .75em; border-radius: 99px; white-space: nowrap; }
.chip--paid { background: var(--paid-bg); color: var(--paid-fg); }
.chip--part { background: var(--part-bg); color: var(--part-fg); }
.who { display: inline-flex; align-items: center; gap: .55em; font-size: .92em; font-weight: 500; color: var(--ink); }
.who img { width: 2.1em; height: 2.1em; border-radius: 50%; object-fit: cover; }

.slots { display: grid; gap: .6em; }
.slots li { display: grid; grid-template-columns: 3.1em 1fr; gap: .7em; align-items: start; }
.slots time { font-size: .82em; color: var(--ink-3); padding-top: .85em; font-variant-numeric: tabular-nums; }
.slot { position: relative; border-radius: 1em; padding: .8em 1em; display: grid; gap: .1em; }
.slot span { font-size: .88em; color: var(--ink-2); }
.slot .chip { position: absolute; right: .8em; top: .8em; }
.slot--a { background: var(--pistachio); padding-bottom: 2.6em; }
.slot--a span { color: #1c3517; }
.slot--b { background: var(--accent); }
.slot--c { background: var(--muted); }
.slot--open { border: 1.5px dashed var(--line); color: var(--ink-3); font-size: .9em; padding: .85em 1.1em; }

.lines { display: grid; gap: .78em; padding-bottom: 1em; border-bottom: 1px solid var(--line); }
.lines li { display: flex; justify-content: space-between; color: var(--ink); font-variant-numeric: tabular-nums; }
.lines .lines__sub { color: var(--ink-3); font-size: .92em; }
.total { display: flex; align-items: baseline; justify-content: space-between; padding: 1em 0 1.1em; }
.total span { font: 700 1.15em/1 var(--font-ui-display); letter-spacing: -0.05em; color: var(--ink); }
.total b { font: 700 2.45em/1 var(--font-ui-display); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.paid { display: flex; align-items: center; justify-content: center; gap: .55em; height: 3.2em; border-radius: 99px; background: var(--pistachio); color: var(--on-pistachio); font-weight: 500; }
.paid svg { width: 1.25em; height: 1.25em; }

.stock { display: grid; }
.stock li { display: grid; grid-template-columns: 5.6em 1fr 4.6em; align-items: center; gap: .9em; padding: .82em 0; border-top: 1px solid var(--line); }
.stock li:first-child { border-top: 0; padding-top: 0; }
.stock li div { display: grid; line-height: 1.25; }
.stock li span { font-size: .85em; color: var(--ink-3); }
.ptype { font-style: normal; font-size: .76em; font-weight: 500; line-height: 1; padding: .5em .7em; border-radius: 99px; justify-self: start; white-space: nowrap; }
.ptype--color { background: #e8dbf5; color: #5c3285; }
.ptype--dev   { background: #dae6f6; color: #2e548a; }
.ptype--light { background: #f9f4d7; color: #9c871c; }
.ptype--care  { background: #dff1e5; color: #2e8a4d; }
.stock u { display: block; height: .5em; border-radius: 99px; background: var(--muted); position: relative; overflow: hidden; }
.stock u::after { content: ""; position: absolute; inset: 0; width: calc(var(--v) * 100%); border-radius: inherit; background: #7ac26b; }
.stock u.low::after { background: #e0a526; }
.used { display: flex; justify-content: space-between; align-items: center; margin-top: .4em; padding: .95em 1.1em; border-radius: 1em; background: var(--muted); font-size: .92em; }

.qa { display: grid; gap: .25em; }
.qa dt { font-size: .82em; color: var(--ink-3); margin-top: .7em; }
.qa dt:first-child { margin-top: 0; }
.qa dd { color: var(--ink); font-weight: 500; padding-bottom: .7em; border-bottom: 1px solid var(--line); }
.qa .thumbs { display: flex; gap: .5em; padding-top: .25em; }
.qa .thumbs img { width: 3.6em; height: 3.6em; border-radius: .7em; object-fit: cover; }
.sig { margin-top: 1em; display: grid; gap: .1em; }
.sig svg { width: 9.5em; height: 3em; color: var(--ink); }
.sig span { font-size: .82em; color: var(--ink-3); }

/* invoices */
.bill { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1em; }
.trail { display: grid; gap: .55em; padding-top: 1em; border-top: 1px solid var(--line); }
.trail li { display: flex; align-items: baseline; gap: .7em; padding-left: 1.3em; position: relative; color: var(--ink-3); font-size: .88em; }
.trail li::before { content: ""; position: absolute; left: 0; top: .42em; width: .6em; height: .6em; border-radius: 50%; background: var(--line); }
.trail b { font-weight: 500; color: var(--ink-2); }
.trail .is-done::before { background: #7ac26b; }
.trail .is-done b { color: var(--ink); }

/* team */
.crew { display: grid; }
.crew li { display: grid; grid-template-columns: 2.6em 1fr auto; align-items: center; gap: .85em; padding: .78em 0; border-top: 1px solid var(--line); }
.crew li:first-child { border-top: 0; padding-top: 0; }
.crew li:last-child { padding-bottom: 0; }
.crew div { display: grid; line-height: 1.25; }
.crew span { font-size: .85em; color: var(--ink-3); }
.init { width: 2.6em; height: 2.6em; border-radius: 50%; display: grid; place-items: center; font: 700 .9em/1 var(--font-ui-display); font-style: normal; letter-spacing: -0.02em; background: var(--pistachio); color: var(--on-pistachio); }

/* reports */
.figure { display: flex; align-items: flex-end; justify-content: space-between; gap: 1em; margin-bottom: 1.1em; }
.figure b { font: 700 2.7em/1 var(--font-ui-display); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.bars { display: flex; align-items: flex-end; gap: .35em; height: 3.9em; flex: 0 0 8.4em; }
.bars i { flex: 1; border-radius: .3em .3em .12em .12em; background: var(--pistachio); height: var(--h, 50%); transform-origin: bottom; transform: scaleY(0); transition: transform .7s var(--ease-out); }
.bars i:nth-child(1) { --h: 34%; } .bars i:nth-child(2) { --h: 52%; transition-delay: .05s; } .bars i:nth-child(3) { --h: 44%; transition-delay: .1s; }
.bars i:nth-child(4) { --h: 66%; transition-delay: .15s; } .bars i:nth-child(5) { --h: 58%; transition-delay: .2s; } .bars i:nth-child(6) { --h: 84%; transition-delay: .25s; }
.bars i:nth-child(7) { --h: 100%; transition-delay: .3s; background: var(--ink); }
.fvis.is-active .bars i, :is(.rm, .no-js) .bars i { transform: none; }
.lines--split { border-top: 1px solid var(--line); border-bottom: 0; padding: 1em 0 .2em; }

.thread { display: flex; flex-direction: column; gap: .5em; }
.b { max-width: 82%; padding: .7em 1em; border-radius: 1.3em; font-size: .95em; line-height: 1.35; }
.b--out { align-self: flex-end; background: var(--pistachio); color: var(--on-pistachio); border-bottom-right-radius: .35em; }
.b--in { align-self: flex-start; background: var(--muted); color: var(--ink); border-bottom-left-radius: .35em; }
.cap { align-self: flex-end; font-size: .74em; color: var(--ink-3); margin: -.15em .3em .25em 0; }

/* The phone layout, also used for a phone held sideways, where eight rows of a list cannot fit the height. */
@media (max-width: 820px), (max-height: 520px) {
  .features__head { gap: 10px; padding-bottom: 0; }

  /* The list becomes tabs. It reads on from the headline: "sable powers your" and the lit tab.
     The description moves under the picture as its caption (.fcaption). */
  .flist { position: relative; flex-direction: row; gap: 8px; align-self: start; min-height: 0; }
  .fitem { display: contents; }
  .fitem::before { display: none; }
  .fitem__head {
    flex: none; width: auto; height: 44px; padding: 0 17px;
    border-radius: var(--r-pill);
    background: var(--muted); color: var(--ink-2);
    font: 500 15px/1 var(--font-body); letter-spacing: -0.01em; white-space: nowrap;
    position: relative; overflow: hidden; isolation: isolate;
    transition: background-color .4s var(--ease), color .4s var(--ease);
  }
  .fitem__head::after { display: none; }
  .fitem.is-active .fitem__head { background: var(--ink); color: #fff; }
  /* the lit tab fills as you scroll through its step */
  .fitem.is-active .fitem__head::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: rgba(255,255,255,.17); transform-origin: left; transform: scaleX(var(--fp, 0));
  }
  .fitem__body { display: none; }

  .fcaption {
    grid-area: text; display: block;
    color: var(--ink-2); font-size: 16px; line-height: 1.45; text-wrap: pretty;
    min-height: calc(3 * 1.45em);
  }
  .fcaption:empty { display: none; }
  .js .fcaption.is-in { animation: rise .6s var(--ease-out) both; }
  .fstage { border-radius: var(--r-lg); }
}

/* Upright phone: one column, and the tabs are a single row that slides sideways and runs off the
   edge of the screen, so it is clear there are more. A phone in Safari has about 700px of height
   to work with, so everything but the picture is one line tall and the picture gets the rest. */
@media (max-width: 820px) {
  .scene--features { height: calc(var(--stage-h) + var(--steps) * 48vh); }
  .features {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "head" "list" "stage" "text";
    row-gap: 12px;
    padding: calc(var(--nav-h) + 14px) var(--gutter) calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .features__head h2 { font-size: clamp(1.9rem, 8.6vw, 2.4rem); }
  .flist {
    flex-wrap: nowrap;
    margin: 0 calc(-1 * var(--gutter)); padding: 2px 0 2px var(--gutter);
    overflow-x: auto; overscroll-behavior-x: contain;
  }
  .flist::after { content: ""; flex: 0 0 calc(var(--gutter) - 8px); }
}
/* Small phones (an iPhone SE in Safari has about 550px): a touch tighter, so the picture still fits. */
@media (max-width: 820px) and (max-height: 600px) {
  .features { row-gap: 10px; padding-top: calc(var(--nav-h) + 10px); padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .features__head h2 { font-size: clamp(1.7rem, 7.6vw, 2.1rem); }
  .fitem__head { height: 40px; font-size: 14px; padding: 0 15px; }
  .fcaption { font-size: 15px; line-height: 1.4; min-height: calc(3 * 1.4em); }
}
/* A phone held sideways: the picture keeps the right, and the headline, tabs and caption stack on the left. */
@media (max-height: 520px) and (min-width: 821px) {
  :root { --nav-h: 56px; }
  .scene--features { height: calc(var(--stage-h) + var(--steps) * 70vh); }
  .features {
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "head stage" "list stage" "text stage";
    row-gap: 12px; column-gap: 28px;
    padding: calc(var(--nav-h) + 10px) var(--gutter) 14px;
  }
  .features__head h2 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); }
  .flist { flex-wrap: wrap; gap: 6px; }
  .fitem__head { height: 36px; font-size: 14px; padding: 0 14px; }
  .fcaption { font-size: 14.5px; line-height: 1.4; min-height: 0; align-self: start; }

  .collage { --tile: clamp(44px, min(10vw, 13svh), 148px); --row-gap: clamp(10px, 4svh, 52px); }
  .statement { font-size: clamp(1.25rem, 6.4svh, 3rem); }
  .finale { padding: 72px var(--gutter); }
  .menu { padding-top: calc(var(--nav-h) + 12px); }
  .menu nav { flex-direction: row; flex-wrap: wrap; gap: 0 28px; }
  .menu nav a { font-size: clamp(26px, 9svh, 40px); }
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

/* ───────── 3b. Jules ───────── */
.jules {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 78% 30%, #3a2f9c 0%, #1b1654 38%, #0e0c1f 74%);
  color: #fff;
  padding: clamp(88px, 12vw, 170px) var(--gutter) clamp(72px, 9vw, 130px);
}
.jules__inner {
  max-width: 1328px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 7vw, 120px); align-items: center;
}
.jules .eyebrow { color: #b9c7ff; }
.jules__copy { display: grid; gap: 22px; justify-items: start; }
.jules__copy h2 { font-size: clamp(2.4rem, 5vw, 4.6rem); max-width: 9em; }
.jules__sub { color: rgba(255,255,255,.74); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; max-width: 32ch; }
.jules__asks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; max-width: 30em; }
/* the requests wrap freely on a wide screen; on a phone this row is what slides sideways */
.jules__row { display: contents; }
.jules__asks p { flex: 0 0 100%; font: 700 14px/1 var(--font-ui-display); letter-spacing: -0.03em; color: rgba(255,255,255,.55); margin-bottom: 4px; }
.jules__asks button {
  height: 40px; padding: 0 16px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  font: 500 15px/1 var(--font-body); letter-spacing: -0.01em;
  background: rgba(255,255,255,.1); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.jules__asks button:active { transform: scale(.97); }
@media (hover: hover) { .jules__asks button:hover { background: rgba(255,255,255,.18); } }
.jules__asks button.is-on { background: #fff; color: #12102a; box-shadow: none; }

/* the conversation */
.jchat {
  position: relative; isolation: isolate;
  height: min(640px, 76svh); min-height: 480px;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  border-radius: var(--r-xl); overflow: hidden;
  background: rgba(14,12,31,.62);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 40px 120px -40px rgba(0,0,0,.7);
}
.jchat::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: -90px; width: 420px; height: 420px; border-radius: 50%;
  transform: translateX(-50%) scale(1);
  background: radial-gradient(circle, rgba(122,108,240,.6) 0%, rgba(91,75,224,.2) 42%, rgba(91,75,224,0) 68%);
  opacity: .55; transition: opacity .9s var(--ease), transform 1.2s var(--ease);
}
.jchat[data-state="listening"]::before { opacity: .8; transform: translateX(-50%) scale(1.06); }
.jchat[data-state="thinking"]::before { opacity: .68; }
.jchat[data-state="speaking"]::before { opacity: 1; transform: translateX(-50%) scale(1.14); }
.jchat__top { display: grid; justify-items: center; gap: 4px; padding: 26px 20px 8px; }
.jchat__top canvas {
  width: 92px; height: 92px; border-radius: 50%; margin-bottom: 8px;
  background: radial-gradient(circle at 34% 28%, #dfe5ff 0%, #b9c7ff 26%, #7a6cf0 58%, #5b4be0 78%, #3a2aa8 100%);
  transition: transform 1s var(--ease);
}
.jchat__top canvas.is-gl { background: none; }
.jchat[data-state="listening"] canvas { transform: scale(1.05); }
.jchat[data-state="speaking"] canvas { transform: scale(1.1); }
.jchat__top b { font: 700 20px/1 var(--font-ui-display); letter-spacing: -0.05em; }
.jchat__top span { font-size: 13px; color: rgba(255,255,255,.6); min-height: 1.4em; }

.jchat__thread {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  padding: 10px 20px 16px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 56px);
  mask-image: linear-gradient(180deg, transparent 0, #000 56px);
}
.jb { flex: none; max-width: 86%; font-size: 15.5px; line-height: 1.4; opacity: 0; transform: translateY(12px); transition: opacity .4s var(--ease), transform .5s var(--ease-out); }
.jb.is-in { opacity: 1; transform: none; }
.jb--me { align-self: flex-end; padding: 10px 15px; border-radius: 20px 20px 6px 20px; background: rgba(255,255,255,.14); color: #fff; }
.jb--jules { align-self: flex-start; display: grid; gap: 8px; justify-items: start; }
.jb--jules > p { padding: 10px 15px; border-radius: 20px 20px 20px 6px; background: #fff; color: var(--ink); }
.jb--jules > p i { font-style: normal; opacity: 0; transition: opacity .25s var(--ease); }
.jb--jules > p i.is-on { opacity: 1; }
.jb__dots { display: inline-flex; gap: 5px; padding: 15px 16px; border-radius: 20px 20px 20px 6px; background: rgba(255,255,255,.14); }
.jb__dots i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: typing 1.2s var(--ease) infinite; }
.jb__dots i:nth-child(2) { animation-delay: .15s; }
.jb__dots i:nth-child(3) { animation-delay: .3s; }

/* what Jules hands back */
.jcard {
  width: min(100%, 300px); padding: 12px 14px; border-radius: var(--r-md);
  background: var(--card); color: var(--ink-2); font-size: 13.5px; line-height: 1.3;
  opacity: 0; transform: translateY(8px) scale(.97); transform-origin: left top;
  transition: opacity .4s var(--ease), transform .5s var(--ease-out);
}
.jcard.is-in { opacity: 1; transform: none; }
.jcard b { font-weight: 600; color: var(--ink); }
.jcard--day { display: grid; gap: 9px; }
.jcard--day li { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: baseline; }
.jcard--day time { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.jcard--day span { color: var(--ink-3); }
.jcard--booked, .jcard--sent { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; align-items: center; }
.jcard .tick { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--pistachio); color: var(--on-pistachio); }
.jcard .tick svg { width: 16px; height: 16px; }
.jcard--booked span, .jcard--sent span { color: var(--ink-3); }
.jcard--stock { display: grid; gap: 10px; }
.jcard--stock li { display: grid; grid-template-columns: 1fr 72px; gap: 12px; align-items: center; }
.jcard--stock span { display: block; color: var(--ink-3); font-size: 12.5px; }
.jcard--stock u { display: block; height: 7px; border-radius: 99px; background: var(--muted); position: relative; overflow: hidden; }
.jcard--stock u::after { content: ""; position: absolute; inset: 0; width: calc(var(--v) * 100%); border-radius: inherit; background: #e0a526; }
.jcard--revenue { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.jcard--revenue b { font: 700 28px/1 var(--font-ui-display); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.jcard--revenue span { display: block; color: var(--ink-3); margin-bottom: 4px; }
.jcard--revenue .bars { flex: 0 0 96px; height: 44px; gap: 4px; }
.jcard.is-in .bars i { transform: none; }

.jchat__input {
  margin: 0 16px 16px; height: 50px; padding: 0 8px 0 18px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  font-size: 15.5px; color: #fff;
}
.jchat__input span { white-space: nowrap; overflow: hidden; }
.jchat__input span:empty::before { content: "ask Jules anything"; color: rgba(255,255,255,.45); }
.jchat__input i { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.16); color: #fff; transition: background-color .3s var(--ease), color .3s var(--ease); }
.jchat__input i svg { width: 17px; height: 17px; }
.jchat[data-state="listening"] .jchat__input i { background: var(--pistachio); color: var(--on-pistachio); }

@media (max-width: 820px) {
  .jules { padding-top: calc(var(--nav-h) + 36px); padding-bottom: 64px; }
  .jules__inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .jules__copy { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .jules__copy h2 { font-size: clamp(2.3rem, 10.5vw, 3rem); }
  .jules__sub { max-width: 34ch; }
  /* The requests sit on one row that slides sideways and runs off the edge of the screen, so the
     conversation stays on the first screen instead of sitting under five stacked buttons. */
  .jules__asks { display: grid; gap: 10px; justify-self: stretch; min-width: 0; max-width: none; margin-top: 4px; }
  .jules__asks p { margin: 0; }
  .jules__row {
    position: relative;
    display: flex; flex-wrap: nowrap; gap: 8px;
    min-width: 0;
    margin: 0 calc(-1 * var(--gutter)); padding: 2px 0 2px var(--gutter);
    overflow-x: auto; overscroll-behavior-x: contain;
  }
  .jules__row::after { content: ""; flex: 0 0 calc(var(--gutter) - 8px); }
  .jules__asks button { flex: none; height: 44px; padding: 0 17px; font-size: 15px; white-space: nowrap; }
  .jchat { height: min(600px, 78svh); min-height: 440px; border-radius: var(--r-lg); }
  .jchat__top { padding-top: 22px; }
  .jchat__top canvas { width: 76px; height: 76px; }
  .jb { font-size: 15px; }
}

/* ───────── 4. Customer spotlight ───────── */
/* No space above the photo: it starts right where the section before it ends (Christian, 2026-09-27). */
.spot { background: var(--night); color: var(--on-night); padding: 0 0 clamp(72px, 10vw, 150px); }
.spot .eyebrow, .pricing .eyebrow { color: var(--on-night-3); }
.spot__media {
  --g: 0;
  position: relative; height: min(88svh, 62vw); min-height: 460px;
  overflow: hidden;
  /* It opens out sideways and at the foot only, so its top edge always meets the section above. */
  clip-path: inset(0 calc((1 - var(--g)) * 9%) calc((1 - var(--g)) * 6%) round 0 0 calc((1 - var(--g)) * 28px) calc((1 - var(--g)) * 28px));
}
.spot__media img { width: 100%; height: 100%; object-fit: cover; object-position: 56% 40%; transform: scale(calc(1.18 - var(--g) * .16)); }
.spot__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,15,8,.82) 0%, rgba(8,15,8,.25) 48%, rgba(8,15,8,.08) 100%); }
.spot__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 max(var(--gutter), calc((1 - var(--g)) * 12%)) clamp(28px, 5vw, 72px);
  /* words bottom left, the film button bottom right; the button drops under the words when it has to */
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px;
  max-width: 1440px; margin: 0 auto;
}
.spot__text { flex: 1 1 22rem; min-width: 0; display: grid; gap: 16px; }
.spot__caption h2 { font-size: clamp(2rem, 4.6vw, 4.25rem); max-width: 15em; }
.spot__play {
  flex: none;
  display: inline-flex; align-items: center; gap: 10px;
  height: 50px; padding: 0 24px 0 18px; border-radius: var(--r-pill);
  font: 500 16px/1 var(--font-body);
  background: rgba(255,255,255,.16); color: #fff;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}
.spot__play svg { width: 20px; height: 20px; }
.spot__play[hidden] { display: none; }

.quote { max-width: 1440px; margin: 0 auto; padding: clamp(48px, 8vw, 120px) var(--gutter) 0; display: grid; gap: 28px; }
.quote blockquote {
  font: var(--display-weight) clamp(1.6rem, 3.4vw, 3.1rem)/1.08 var(--font-display);
  letter-spacing: var(--display-tracking);
  max-width: 22em; text-wrap: balance;
}
.quote figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 15px; color: var(--on-night-2); }
.quote figcaption b { color: var(--on-night); font-weight: 500; }
.quote figcaption b::after { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--pistachio); margin: 0 0 3px 14px; }

@media (max-width: 820px) {
  .spot { padding-bottom: 56px; }
  .quote { padding-top: 44px; gap: 22px; }
  .spot__media { height: 78svh; min-height: 0; }
  .spot__media img { object-position: 58% 40%; }
  .spot__scrim { background: linear-gradient(0deg, rgba(8,15,8,.92) 0%, rgba(8,15,8,.74) 34%, rgba(8,15,8,.2) 62%, rgba(8,15,8,.05) 100%); }
  .spot__play { height: 46px; font-size: 15px; }
}

/* ───────── 5. Pricing ───────── */
/* No space above the rule that opens this section: the section before it already leaves its own,
   and the two used to stack into one long empty stretch under the customer quote. */
.pricing { background: var(--night); color: var(--on-night); padding: 0 var(--gutter) clamp(88px, 11vw, 170px); }
.pricing__head, .plans { max-width: 1328px; margin: 0 auto; }
.pricing__head { display: grid; gap: 18px; border-top: 1px solid var(--night-line); padding-top: clamp(40px, 6vw, 88px); }
.pricing__head h2 { font-size: clamp(2.2rem, 4.4vw, 4rem); }
.pricing__sub { color: var(--on-night-2); font-size: 17px; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(44px, 6vw, 88px); }
.plan { padding: 4px clamp(20px, 3.4vw, 56px) 8px; border-left: 1px solid var(--night-line); display: grid; justify-items: start; align-content: start; }
.plan:nth-child(2) { --d: 120ms; }
.plan h3 { font-size: clamp(1.35rem, 1.9vw, 1.75rem); }
.plan__for { color: var(--on-night-2); margin-top: 10px; max-width: 30ch; min-height: 3em; padding-bottom: 22px; }
.plan__price { width: 100%; border-top: 1px solid var(--night-line); padding-top: clamp(28px, 3.4vw, 48px); display: flex; align-items: baseline; gap: 4px; }
.plan__price b { font: var(--display-weight) clamp(3.6rem, 7vw, 6.5rem)/.9 var(--font-display); letter-spacing: var(--display-tracking); font-variant-numeric: tabular-nums; }
.plan__price span { font: var(--display-weight) clamp(1.3rem, 2vw, 1.9rem)/1 var(--font-display); letter-spacing: var(--display-tracking); color: var(--on-night-2); }
.plan__fee { color: var(--on-night-2); margin-top: 14px; }
.plan .btn { margin-top: clamp(26px, 3vw, 40px); }
.pricing__more { width: max-content; margin: clamp(40px, 4.4vw, 64px) 0 0 max(0px, calc((100% - 1328px) / 2)); padding-left: clamp(20px, 3.4vw, 56px); display: flex; align-items: center; gap: 8px; color: var(--on-night); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.pricing__more svg { width: 16px; height: 16px; flex-shrink: 0; }

@media (max-width: 820px) {
  .pricing { padding-bottom: 72px; }
  .pricing__head { padding-top: 48px; gap: 14px; }
  .plans { grid-template-columns: minmax(0, 1fr); gap: 48px; margin-top: 40px; }
  .plan { border-left: 0; padding: 0; }
  .plan__for { min-height: 0; }
  .pricing__more { padding-left: 0; }
}

/* ───────── Closing ───────── */
.finale {
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  background: #050705; color: #fff;
  display: grid; place-items: center;
  padding: 120px var(--gutter);
}
.finale__copy { position: relative; z-index: 2; display: grid; justify-items: center; gap: clamp(26px, 3vw, 40px); text-align: center; pointer-events: none; }
.finale__copy .btn { pointer-events: auto; }
.finale__copy h2 { font-size: clamp(2.6rem, 6vw, 5.5rem); max-width: 11em; }
.finale__trail { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.spark {
  position: absolute; left: 0; top: 0;
  width: clamp(92px, 11vw, 168px); aspect-ratio: 1;
  border-radius: 22%; overflow: hidden;
  opacity: 0; will-change: transform, opacity;
}
.spark img { width: 100%; height: 100%; object-fit: cover; }

/* ───────── Footer ───────── */
.foot {
  background: #050705; color: var(--on-night-2);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px;
  padding: 36px var(--gutter) calc(36px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--night-line);
  font-size: 14px;
}
.foot__mark { width: 70px; height: 24px; fill: var(--on-night); }
.foot nav { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.foot a { text-decoration: none; }
@media (hover: hover) { .foot a:hover { color: var(--on-night); } }
@media (max-width: 820px) {
  .finale { padding: 96px var(--gutter); }
  .foot { gap: 6px 40px; padding-top: 30px; }
  /* links get a full-height place to tap */
  .foot nav { gap: 0 2px; margin: 0 -10px; }
  .foot a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; }
}

/* ───────── Reduced motion and no-JS: no pinned scenes, everything at rest ───────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .slide.is-active, .marquee__track, .tile--ui * { animation: none !important; }
}
:is(.rm, .no-js) .scene--hero,
:is(.rm, .no-js) .scene--features { height: auto; }
:is(.rm, .no-js) .stage { position: relative; height: auto; overflow: visible; }
:is(.rm, .no-js) .hero-media { position: relative; height: 100svh; }
:is(.rm, .no-js) .hero-copy { bottom: auto; height: 100svh; }
:is(.rm, .no-js) .marquee { bottom: auto; top: calc(100svh - 70px); }
:is(.rm, .no-js) .collage { position: relative; inset: auto; height: auto; padding: 96px 0; }
:is(.rm, .no-js) .tile--slot { background: url("assets/t-film.jpg") center / cover; }
:is(.rm, .no-js) .features { height: auto; min-height: 100svh; }
:is(.rm, .no-js) .fstage { min-height: 520px; }
:is(.rm, .no-js) .fitem::before { display: none; }
:is(.rm, .no-js) .spot__media { --g: 1; }
.no-js .fitem__body { grid-template-rows: 1fr; }
@media (max-width: 820px) {
  .no-js .flist { flex-direction: column; overflow: visible; margin: 0; padding: 0; gap: 0; }
  .no-js .flist::after { display: none; }
  .no-js .fitem { display: block; padding: 14px 0; max-height: none; }
  .no-js .fitem__head { height: auto; padding: 0; background: none; color: var(--ink); font: var(--display-weight) 1.25rem/1.1 var(--font-display); letter-spacing: var(--display-tracking); }
  .no-js .fitem__body { display: block; padding-top: 6px; }
  .no-js .fitem__body p { max-width: none; min-height: 0; padding: 0; }
  .no-js .features { grid-template-areas: "head" "stage" "list" "text"; grid-template-rows: auto auto auto auto; }
}

/* ───────── The waitlist sheet ───────── */
/* Opens over whatever is on screen: a light card on a dark scrim. Its words are the waitlist page's. */
.join { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: var(--gutter); padding-bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px)); }
.join[hidden] { display: none; }
.join__scrim { position: absolute; inset: 0; background: rgba(8, 15, 8, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .35s var(--ease); }
.join__card {
  position: relative; width: min(460px, 100%); max-height: calc(100svh - 2 * var(--gutter)); overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(28px, 4vw, 40px); border-radius: var(--r-xl);
  background: var(--card); color: var(--ink);
  box-shadow: 0 40px 90px -30px rgba(8, 15, 8, .55);
  opacity: 0; transform: translateY(18px) scale(.97);
  transition: opacity .35s var(--ease-out), transform .45s var(--ease-out);
}
.join.is-open .join__scrim { opacity: 1; }
.join.is-open .join__card { opacity: 1; transform: none; }
.join__close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: var(--r-pill); background: var(--muted); color: var(--ink-2); cursor: pointer; }
.join__close svg { width: 18px; height: 18px; }
@media (hover: hover) { .join__close:hover { background: var(--line); } }
.join h2 { font: var(--display-weight) clamp(2rem, 4vw, 2.6rem)/1 var(--font-display); letter-spacing: var(--display-tracking); margin: 4px 48px 24px 0; }
.join__form, .join__done { display: grid; gap: 14px; }
.join__form[hidden] { display: none; }
.field { display: grid; gap: 6px; }
.field span { font-size: 13px; font-weight: 500; color: var(--ink-3); }
.field input {
  width: 100%; height: 52px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--muted); color: var(--ink); font: 400 16px/1 var(--font-body); /* 16px: no zoom on an iPhone */
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.field input::placeholder { color: var(--ink-3); }
.field input:focus { outline: none; border-color: #7ac26b; background: var(--card); }
.field input[aria-invalid="true"] { border-color: var(--part-fg); }
.join__error { min-height: 1.4em; margin: 0; font-size: 14px; color: var(--part-fg); }
.join__error:empty { display: none; }
.join__submit { width: 100%; height: 54px; margin-top: 4px; }
.join__submit[disabled] { opacity: .6; cursor: default; }
.join__fine { margin: 0; font-size: 13px; line-height: 1.4; color: var(--ink-3); text-align: center; }
.join__done { justify-items: start; }
.join__done[hidden] { display: none; }
.join__tick { width: 52px; height: 52px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--paid-bg); color: var(--paid-fg); margin-bottom: 8px; }
.join__tick svg { width: 26px; height: 26px; }
.join__done h2 { margin: 0; }
.join__done p { margin: 0 0 12px; color: var(--ink-2); }
.join__done h2:focus { outline: none; }
@media (max-width: 820px) {
  .join { align-items: end; padding: 0; }
  .join__card { width: 100%; max-height: calc(100svh - 24px); border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 28px var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px)); }
}
.rm .join__scrim, .rm .join__card { transition: none; }