/* Galix Studios - galixstudios.com
   One stylesheet, light + dark. The hero, the contact band and the header are always "dawn" (night navy, rising sun);
   everything between follows the visitor's colour scheme. Motion: CSS first (entrance, scroll-driven parallax), plus
   /assets/motion.js for reveals and pointer effects. Everything still reads with no script, and all motion stops
   under prefers-reduced-motion. */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-var.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }

:root {
  --ink: #0F172A;
  --night: #070B16;
  --night-2: #0D1428;
  --sun: #F26A1B;
  --amber: #FDB52D;
  --ember: #E8452C;
  --light: #FFF7ED;
  --sun-text: #C2410C;

  --bg: #FFFAF3;
  --bg-2: #FFF3E4;
  --surface: #FFFFFF;
  --surface-2: #FFF8F0;
  --text: var(--ink);
  --muted: #4B5568;
  --line: rgba(15, 23, 42, 0.08);
  --line-strong: rgba(15, 23, 42, 0.16);
  --accent-text: var(--sun-text);
  --chip-bg: rgba(242, 106, 27, 0.1);
  --chip-text: #9A3412;
  --focus: #1D4ED8;
  --spot: rgba(242, 106, 27, 0.12);
  --spot-edge: rgba(242, 106, 27, 0.55);
  --shadow-color: 20deg 45% 25%;

  --dawn: linear-gradient(100deg, #FDB52D 0%, #F98A2B 30%, #F26A1B 55%, #E8452C 80%, #FDB52D 100%);
  --font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1200px;
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 32px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.06), 0 2px 6px hsl(var(--shadow-color) / 0.05);
  --shadow-md: 0 2px 4px hsl(var(--shadow-color) / 0.05), 0 12px 32px -8px hsl(var(--shadow-color) / 0.14);
  --shadow-lg: 0 4px 8px hsl(var(--shadow-color) / 0.06), 0 30px 70px -20px hsl(var(--shadow-color) / 0.3);
  color-scheme: light;
}

/* Round 7: one daylight theme for everyone (the audience reads on phones outdoors). The night palette is kept
   only for the dark "night" panels (sample frames, apps showcase, contact dusk), which set their own colours. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { line-height: 1.08; letter-spacing: -0.035em; font-weight: 700; text-wrap: balance; }
p { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--amber); color: #1A0E05; }
html { scrollbar-color: color-mix(in srgb, var(--sun) 70%, transparent) var(--bg); accent-color: var(--sun); }
input, textarea { caret-color: var(--sun); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

.skip {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 10px 16px; border-radius: 10px; background: var(--ink); color: #fff; font-weight: 600; text-decoration: none;
}
.skip:focus { top: 16px; }

.dawn-text {
  background: var(--dawn);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: dawn-shift 9s ease-in-out infinite alternate;
}
@keyframes dawn-shift { to { background-position: 100% 0; } }

/* ---------- Buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 50px; padding: 0 24px;
  border-radius: 999px;
  font-size: 1rem; font-weight: 600; letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap;
  isolation: isolate; overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background-color 0.3s, border-color 0.3s;
  translate: var(--mag-x, 0) var(--mag-y, 0);
}
.btn-lg { min-height: 58px; padding: 0 30px; font-size: 1.0625rem; }
.btn .arrow { transition: transform 0.35s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-primary {
  background: linear-gradient(180deg, #FB8A3C 0%, var(--sun) 100%);
  color: #1A0E05;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 8px 24px -6px rgba(242, 106, 27, 0.6), 0 2px 4px rgba(120, 40, 0, 0.2);
}
.btn-primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.8s var(--ease);
}
.btn-primary:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 14px 34px -6px rgba(242, 106, 27, 0.75), 0 2px 4px rgba(120, 40, 0, 0.2); }
.btn-primary:hover::after { transform: translateX(120%); }
.btn-ghost {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: #F8FAFC;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.4); }
/* in a CTA band the ghost button can sit on the sun's glow: give it a night-glass fill so its text keeps contrast */
.cta-band .btn-ghost { background: rgba(9, 14, 28, 0.6); }
.cta-band .btn-ghost:hover { background: rgba(9, 14, 28, 0.75); }
.btn:active { transform: scale(0.97); }

/* ---------- Header: a floating glass bar ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  padding-top: 14px;
  pointer-events: none;
}
.header-bar {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 60px; padding: 0 10px 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(11, 16, 32, 0.94);
  backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 10px 40px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: background-color 0.4s, box-shadow 0.4s, height 0.4s var(--ease);
}
.scrolled .header-bar { height: 54px; background: rgba(11, 16, 32, 0.96); }
.brand img { width: 118px; height: auto; }
.nav ul { display: flex; align-items: center; gap: 4px; }
.nav a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
  border-radius: 999px;
  color: #E2E8F0; font-size: 0.9375rem; font-weight: 500; text-decoration: none;
  transition: color 0.25s, background-color 0.25s;
}
.nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.nav a.nav-cta { margin-left: 6px; background: #F8FAFC; color: var(--ink); font-weight: 600; }
.nav a.nav-cta:hover { background: #fff; }
@media (max-width: 640px) { .nav-hide-sm { display: none; } .brand img { width: 104px; } }

/* ---------- Hero: dawn ---------- */
.hero {
  position: relative;
  min-height: max(720px, 100svh);
  display: flex; align-items: center;
  padding: 130px 0 90px;
  background: radial-gradient(120% 80% at 70% 110%, #3A1C2E 0%, #171531 35%, var(--night-2) 60%, var(--night) 100%);
  color: #F8FAFC;
  overflow: hidden;
  isolation: isolate;
}
.sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.stars {
  position: absolute; inset: 0 0 35%;
  background-image:
    radial-gradient(1px 1px at 10% 20%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 62%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 35% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 48% 40%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 8%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 66% 30%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 16%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 44%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 94% 8%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 5% 48%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 42% 70%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 58%, rgba(255,255,255,.4) 50%, transparent 51%);
  background-size: 640px 420px;
  mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
  animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: 0.45; } to { opacity: 1; } }
.aurora {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: 0.55; mix-blend-mode: screen;
}
.aurora-a { width: 60vw; height: 40vw; left: -10vw; top: -12vw; background: radial-gradient(closest-side, #4338CA, transparent); animation: drift-a 22s ease-in-out infinite alternate; }
.aurora-b { width: 50vw; height: 34vw; right: -12vw; top: 6vw; background: radial-gradient(closest-side, #9D2B5B, transparent); opacity: 0.4; animation: drift-b 26s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate(12vw, 6vw) scale(1.15); } }
@keyframes drift-b { to { transform: translate(-10vw, 4vw) scale(0.9); } }
.sun {
  position: absolute; left: 68%; bottom: -26vw;
  width: 62vw; aspect-ratio: 1; translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #FFE3A3 0%, #FDB52D 22%, #F26A1B 46%, rgba(232, 69, 44, 0.55) 60%, rgba(232, 69, 44, 0) 72%);
  filter: blur(6px);
  animation: sunrise 2.8s var(--ease) both, sun-breathe 7s 2.8s ease-in-out infinite alternate;
}
@keyframes sunrise { from { transform: translateY(32%) scale(0.85); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sun-breathe { to { transform: scale(1.04); filter: blur(10px); } }
.horizon {
  position: absolute; left: 0; right: 0; bottom: 0; height: 28%;
  background: linear-gradient(180deg, transparent, rgba(7, 11, 22, 0.75) 55%, var(--night) 100%);
}
.grain {
  position: absolute; inset: 0; opacity: 0.12; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-grid { display: grid; gap: 56px; align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 32px; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(241, 245, 249, 0.85); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.01em;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: rise 1s 0.1s var(--ease) both;
}
.eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(253, 181, 45, 0.18), 0 0 12px var(--amber); }
.hero h1 {
  margin-top: 26px;
  font-size: clamp(2.6rem, 9.6vw, 5.4rem);
  line-height: 0.98; letter-spacing: -0.05em; font-weight: 750;
}
@media (min-width: 960px) { .hero h1 { font-size: clamp(3.1rem, 4.5vw, 5rem); } .hero h1 .line { white-space: nowrap; } }
.hero h1 .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero h1 .line-in { display: inline-block; animation: line-up 1.2s var(--ease) both; }
.hero h1 .line:nth-child(1) .line-in { animation-delay: 0.2s; }
.hero h1 .line:nth-child(2) .line-in { animation-delay: 0.34s, 0s; animation-name: line-up, dawn-shift; animation-duration: 1.2s, 9s; animation-timing-function: var(--ease), ease-in-out; animation-iteration-count: 1, infinite; animation-direction: normal, alternate; animation-fill-mode: both, none; }
@keyframes line-up { from { transform: translateY(105%) rotate(2deg); } to { transform: none; } }
.lede { max-width: 34rem; margin-top: 26px; color: rgba(226, 232, 240, 0.82); font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); line-height: 1.65; animation: rise 1.1s 0.5s var(--ease) both; }
.hero .actions { animation: rise 1.1s 0.62s var(--ease) both; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 34px; color: rgba(203, 213, 225, 0.75); font-size: 0.875rem; animation: rise 1.1s 0.75s var(--ease) both; }
.hero-proof li { display: inline-flex; align-items: center; gap: 8px; }
.hero-proof li::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  background: rgba(253, 181, 45, 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23FDB52D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* The phone frame, used in the hero and on every app */
.phone {
  --w: 260px;
  width: var(--w);
  aspect-ratio: 300 / 650;
  padding: calc(var(--w) * 0.035);
  border-radius: calc(var(--w) * 0.16);
  background: linear-gradient(145deg, #2A3142, #0B0F19 45%, #1C2230);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 0 0 calc(var(--w) * 0.012) #05070C,
    0 50px 80px -30px rgba(0, 0, 0, 0.7),
    0 20px 40px -20px rgba(0, 0, 0, 0.5);
}
.phone picture, .phone img { width: 100%; height: 100%; }
.phone img { object-fit: cover; object-position: top; border-radius: calc(var(--w) * 0.13); background: #000; }

.fan { position: relative; height: clamp(440px, 62vw, 620px); --fw: clamp(180px, 44vw, 268px); }
.fan .phone-c { --w: var(--fw); }
.fan .phone-l, .fan .phone-r { --w: calc(var(--fw) * 0.88); }
.fan-glow { position: absolute; left: 50%; bottom: 4%; width: 90%; height: 40%; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(253, 181, 45, 0.5), transparent); filter: blur(30px); }
.fan .phone { position: absolute; left: 50%; bottom: 0; }
.phone-c { z-index: 3; translate: -50% 0; animation: phone-c-in 1.6s 0.35s var(--ease) both; }
.phone-l { z-index: 2; translate: -128% 0; rotate: -9deg; transform-origin: bottom right; animation: phone-side-in 1.6s 0.55s var(--ease) both; }
.phone-r { z-index: 2; translate: 28% 0; rotate: 9deg; transform-origin: bottom left; animation: phone-side-in 1.6s 0.65s var(--ease) both; }
.fan .phone-l, .fan .phone-r { bottom: 4%; filter: brightness(0.82); }
@keyframes phone-c-in { from { transform: translateY(45%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes phone-side-in { from { transform: translateY(55%) rotate(0deg); opacity: 0; } to { transform: none; opacity: 1; } }
.fan .phone > picture { transform: translate(var(--px, 0), var(--py, 0)); transition: transform 0.6s var(--ease); }

.float-chip {
  position: absolute; z-index: 4;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px;
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 16px;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.6);
  font-size: 0.8125rem; line-height: 1.25;
}
.float-chip img { width: 36px; height: 36px; border-radius: 10px; }
.float-chip b { display: block; font-weight: 600; }
.float-chip small { color: var(--amber); font-size: 0.75rem; }
.chip-a { left: -2%; top: 20%; animation: pop 0.9s 1.5s var(--ease) both, bob 6s 2.4s ease-in-out infinite alternate; }
.chip-b { right: -2%; top: 46%; animation: pop 0.9s 1.7s var(--ease) both, bob 7s 2.6s ease-in-out infinite alternate-reverse; }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes bob { to { transform: translateY(-12px); } }
@media (max-width: 720px) { .float-chip { display: none; } }

.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; translate: -50% 0;
  width: 26px; height: 42px; border: 1.5px solid rgba(255, 255, 255, 0.35); border-radius: 999px;
  animation: rise 1s 1.8s var(--ease) both;
}
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 4px; background: #fff; animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
@media (max-width: 959px) { .scroll-cue { display: none; } }

/* The hero drifts away as you scroll (where scroll-driven animation is supported) */
@supports (animation-timeline: scroll()) {
  .hero-copy { animation: hero-out linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
  .fan { animation: fan-out linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  .hero .sun { animation: sunrise 2.8s var(--ease) both, sun-up linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 100vh; }
}
@keyframes hero-out { to { transform: translateY(-60px); opacity: 0.15; } }
@keyframes fan-out { to { transform: translateY(-120px) scale(0.96); } }
@keyframes sun-up { to { translate: -50% -18%; } }

/* ---------- Ticker ---------- */
.ticker {
  position: relative; overflow: hidden;
  padding: 22px 0;
  border-block: 1px solid var(--line);
  background: var(--bg-2);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track { display: flex; width: max-content; animation: ticker 42s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-list { display: flex; align-items: center; gap: 44px; padding-right: 44px; }
.ticker-list a, .tk-app { display: inline-flex; align-items: center; gap: 12px; color: var(--text); font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; }
.ticker-list img, .tk-app img { width: 28px; height: 28px; border-radius: 8px; }
.ticker-list a:hover { color: var(--accent-text); }
.tk-word { display: inline-flex; align-items: center; gap: 44px; color: var(--muted); font-size: 1.125rem; font-weight: 500; white-space: nowrap; }
.tk-word::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 10px var(--sun); margin-right: -22px; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.section { position: relative; padding-block: clamp(84px, 11vw, 150px); }
.section-head { max-width: 46rem; }
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--accent-text); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.kicker::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
.section-head h2 { margin-top: 16px; font-size: clamp(2.3rem, 5.2vw, 4rem); letter-spacing: -0.045em; }
.section-head p { margin-top: 20px; color: var(--muted); font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); max-width: 38rem; }
.sub-title { margin-top: clamp(64px, 8vw, 96px); font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.03em; }

/* Reveal on scroll (only hidden when motion.js is running) */
.js .reveal { opacity: 0; transform: translateY(28px); filter: blur(8px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal.is-in { opacity: 1; transform: none; filter: none; }

/* Cursor spotlight on cards (motion.js sets --mx/--my) */
.spot { position: relative; isolation: isolate; }
.spot::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -30%), var(--spot), transparent 60%);
  opacity: 0; transition: opacity 0.4s;
}
.spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, -30%), var(--spot-edge), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity 0.4s;
}
.spot:hover::before, .spot:hover::after { opacity: 1; }

/* ---------- What we do: bento ---------- */
.bento { display: grid; gap: 16px; margin-top: 52px; }
@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(6, 1fr); }
  .tile-apps { grid-column: span 4; }
  .tile-zero { grid-column: span 2; }
  .tile-team { grid-column: 1 / span 2; grid-row: 2; }
  .tile-web { grid-column: 3 / span 4; grid-row: 2; }
}
.tile {
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
  min-height: 260px; padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: inherit; text-decoration: none;
  overflow: hidden;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.3s;
}
a.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
@media (min-width: 640px) { .tile-apps, .tile-web { flex-direction: row; align-items: center; } }
.tile-copy { flex: 1 1 0; max-width: 30rem; }
.tile-icon { width: 40px; height: 40px; color: var(--sun); }
.tile h3 { margin-top: 18px; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.tile p { margin-top: 10px; color: var(--muted); }
.tile-link { display: inline-block; margin-top: 18px; color: var(--accent-text); font-weight: 600; }
a.tile:hover .tile-link span { display: inline-block; transform: translateX(4px); transition: transform 0.35s var(--ease); }
.tile-small h3 { margin-top: 0; font-size: 1.25rem; letter-spacing: -0.02em; }
.tile-small p { font-size: 0.9375rem; }
.big-num { font-size: clamp(4.5rem, 8vw, 6rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.06em; background: var(--dawn); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }

.tile-art { flex: 0 0 auto; display: grid; place-items: center; }
.art-icons { grid-template-columns: repeat(2, 72px); gap: 14px; rotate: -8deg; }
.art-icons > * { width: 72px; height: 72px; border-radius: 18px; box-shadow: var(--shadow-md); transition: transform 0.6s var(--ease); }
.art-icons > :nth-child(2) { translate: 0 18px; }
.art-icons > :nth-child(4) { translate: 0 18px; }
a.tile:hover .art-icons > :nth-child(1) { transform: translate(-6px, -6px) rotate(-4deg); }
a.tile:hover .art-icons > :nth-child(2) { transform: translate(6px, -6px) rotate(4deg); }
a.tile:hover .art-icons > :nth-child(3) { transform: translate(-6px, 6px) rotate(4deg); }
a.tile:hover .art-icons > :nth-child(4) { transform: translate(6px, 6px) rotate(-4deg); }

.mini-browser { width: 230px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface-2); box-shadow: var(--shadow-md); overflow: hidden; rotate: 4deg; transition: rotate 0.6s var(--ease), transform 0.6s var(--ease); }
a.tile:hover .mini-browser { rotate: 0deg; transform: scale(1.04); }
.mb-bar { display: flex; align-items: center; gap: 5px; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.mb-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.mb-bar span { flex: 1; height: 8px; margin-left: 8px; border-radius: 4px; background: var(--line); }
.mb-body { padding: 12px; display: grid; gap: 7px; }
.mb-hero { height: 52px; border-radius: 8px; background: linear-gradient(120deg, #FDB52D, #F26A1B); }
.mb-line { height: 7px; border-radius: 4px; background: var(--line-strong); }
.w70 { width: 70%; } .w45 { width: 45%; }
.mb-btn { width: 64px; height: 16px; border-radius: 999px; background: var(--ink); }
@media (prefers-color-scheme: dark) { .mb-btn { background: #F8FAFC; } }
.mb-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; }
.mb-cards i { height: 30px; border-radius: 6px; background: var(--line); }

/* ---------- Apps ---------- */
.section-apps { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 50%, var(--bg) 100%); }
.feature {
  display: grid; gap: clamp(28px, 5vw, 72px); align-items: center;
  margin-top: clamp(56px, 7vw, 96px);
}
@media (min-width: 900px) {
  .feature { grid-template-columns: 1.1fr 1fr; }
  .feature-flip .feature-stage { order: 2; }
}
.feature-stage {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: clamp(380px, 46vw, 560px);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  display: flex; align-items: flex-end; justify-content: center;
  padding-top: 48px;
}
.feature-stage .phone { --w: clamp(170px, 20vw, 250px); position: relative; margin-bottom: -18%; }
.feature-stage .phone-back { z-index: 1; translate: 26% 6%; rotate: 7deg; filter: brightness(0.85); }
.feature-stage .phone-front { z-index: 2; translate: -26% 0; rotate: -4deg; margin-left: calc(var(--w) * -1); }
.feature-stage .phone { transition: transform 0.8s var(--ease); }
.feature:hover .phone-front { transform: translateY(-14px); }
.feature:hover .phone-back { transform: translateY(-6px); }
.stage-glow { position: absolute; inset: auto -10% -30% -10%; height: 70%; z-index: 0; border-radius: 50%; filter: blur(40px); }
@supports (animation-timeline: view()) {
  .feature-stage .phone-front { animation: stage-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
  .feature-stage .phone-back { animation: stage-rise-b linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
}
@keyframes stage-rise { from { transform: translateY(90px); } to { transform: none; } }
@keyframes stage-rise-b { from { transform: translateY(150px); } to { transform: none; } }

.stage-couchful { background: radial-gradient(70% 60% at 50% 100%, rgba(255, 201, 107, 0.34), transparent 70%), linear-gradient(180deg, #2A2140 0%, #1A1526 100%); }
.stage-couchful .stage-glow { background: rgba(255, 180, 80, 0.45); }
.stage-glazesmith { background: radial-gradient(70% 60% at 50% 100%, rgba(255, 220, 140, 0.32), transparent 70%), repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 22px), linear-gradient(180deg, #2457C9 0%, #12307F 100%); }
.stage-glazesmith .stage-glow { background: rgba(255, 214, 120, 0.4); }
.stage-mealkin { background: radial-gradient(70% 60% at 50% 100%, rgba(36, 87, 63, 0.18), transparent 70%), linear-gradient(180deg, #F6F1E7 0%, #ECE3D0 100%); }
.stage-farlocal { background: radial-gradient(70% 60% at 50% 100%, rgba(242, 169, 59, 0.28), transparent 70%), repeating-linear-gradient(90deg, #F2A93B 0 26px, transparent 26px 46px) 0 calc(100% - 22px) / 100% 4px no-repeat, linear-gradient(180deg, #14324A 0%, #0F2333 100%); }

.app-id { display: flex; align-items: center; gap: 16px; }
.app-icon { width: 64px; height: 64px; border-radius: 16px; box-shadow: var(--shadow-md); }
.app-id h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: clamp(2rem, 3.4vw, 2.75rem); letter-spacing: -0.045em; }
.app-id h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 1.5rem; letter-spacing: -0.03em; }
.app-tag { margin-top: 4px; color: var(--muted); font-size: 0.9375rem; line-height: 1.4; }
.app-pitch { margin-top: 22px; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.55; letter-spacing: -0.01em; }
.feature-body .app-pitch { max-width: 32rem; }
.ticks { display: grid; gap: 12px; margin-top: 22px; }
.ticks li { position: relative; padding-left: 32px; color: var(--muted); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.2em; width: 20px; height: 20px; border-radius: 50%;
  background: var(--chip-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.3l2.7 2.7L14 7.6' fill='none' stroke='%23F26A1B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.app-note { margin-top: 16px; color: var(--muted); font-size: 0.875rem; font-style: italic; }
.app-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; }
.status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--muted); font-size: 0.8125rem; font-weight: 600;
}
.status-soon { border-color: transparent; background: var(--chip-bg); color: var(--chip-text); }
.pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--sun); }
.pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--sun); animation: ping 2s var(--ease) infinite; }
@keyframes ping { from { transform: scale(1); opacity: 0.7; } to { transform: scale(3); opacity: 0; } }
.app-link {
  color: var(--accent-text); font-weight: 600; text-decoration: none;
  background: linear-gradient(currentColor 0 0) 0 100% / 0 1.5px no-repeat;
  transition: background-size 0.4s var(--ease);
}
.app-link:hover { background-size: 100% 1.5px; }
.working {
  padding: 3px 8px; border: 1px solid var(--line-strong); border-radius: 6px;
  color: var(--muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}

.pair { display: grid; gap: 20px; margin-top: 28px; }
@media (min-width: 900px) { .pair { grid-template-columns: 1fr 1fr; } }
.app-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.app-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.stage { position: relative; height: 280px; overflow: hidden; display: flex; justify-content: center; align-items: flex-start; padding-top: 36px; }
.stage .phone { --w: 170px; position: relative; transition: transform 0.7s var(--ease); }
.stage .phone-back { translate: 22% 10%; rotate: 6deg; filter: brightness(0.9); }
.stage .phone-front { translate: -22% 0; rotate: -4deg; margin-left: -170px; }
.app-card:hover .stage .phone-front { transform: translateY(-10px); }
.app-body { padding: clamp(24px, 3vw, 32px); }
.app-card .app-pitch { font-size: 1.0625rem; }
.app-card .app-icon { width: 56px; height: 56px; border-radius: 14px; }
.rr-icon {
  /* placeholder in the app's own colours (night navy, signal amber): its real icon is not designed yet */
  display: block; flex: none; width: 56px; height: 56px; border-radius: 14px; box-shadow: var(--shadow-md);
  background:
    repeating-linear-gradient(90deg, transparent 0 8%, #F2A93B 8% 30%, transparent 30% 42%) 0 62% / 100% 9% no-repeat,
    linear-gradient(180deg, #1B3F5C 0%, #0F2333 100%);
}
.art-icons .rr-icon { width: 72px; height: 72px; border-radius: 18px; }
.rr-icon-sm { box-shadow: none; width: 28px; height: 28px; border-radius: 8px; }

/* ---------- Websites ---------- */
.web-intro { display: grid; gap: 56px; align-items: center; }
@media (min-width: 1000px) { .web-intro { grid-template-columns: 1fr 1.05fr; } }

.devices { position: relative; height: clamp(320px, 40vw, 440px); }
.browser {
  position: absolute; inset: 0 8% 12% 0;
  border: 1px solid var(--line-strong); border-radius: 18px;
  background: var(--surface); box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.br-bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.br-bar i { width: 10px; height: 10px; border-radius: 50%; background: #F87171; }
.br-bar i:nth-child(2) { background: #FBBF24; } .br-bar i:nth-child(3) { background: #34D399; }
.br-url { margin-left: 12px; padding: 3px 12px; border-radius: 999px; background: var(--line); color: var(--muted); font-size: 0.75rem; }
.br-body { padding: 18px 20px; display: grid; gap: 16px; }
.br-nav { display: flex; align-items: center; gap: 10px; }
.br-nav b { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, #FDB52D, #F26A1B); margin-right: auto; }
.br-nav span { width: 44px; height: 7px; border-radius: 4px; background: var(--line-strong); }
.br-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; align-items: center; }
.br-copy { display: grid; gap: 9px; }
.br-h { height: 16px; width: 92%; border-radius: 6px; background: var(--text); opacity: 0.85; }
.br-h.short { width: 60%; }
.br-p { height: 7px; border-radius: 4px; background: var(--line-strong); }
.br-cta { width: 90px; height: 24px; margin-top: 6px; border-radius: 999px; background: var(--sun); }
.br-pic { aspect-ratio: 4 / 3; border-radius: 12px; background: radial-gradient(60% 60% at 70% 80%, #FDB52D, transparent 70%), linear-gradient(160deg, #1E2A4A, #3A1C2E); }
.br-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.br-cards i { height: 54px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.handset {
  position: absolute; right: 0; bottom: 0; width: clamp(120px, 15vw, 160px); aspect-ratio: 9 / 19;
  padding: 26px 12px 12px; border-radius: 26px;
  background: var(--surface); border: 6px solid #0B0F19;
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 8px;
}
.hs-notch { position: absolute; top: 7px; left: 50%; width: 40px; height: 9px; translate: -50% 0; border-radius: 999px; background: #0B0F19; }
.hs-pic { height: 30%; border-radius: 10px; background: radial-gradient(60% 60% at 70% 80%, #FDB52D, transparent 70%), linear-gradient(160deg, #1E2A4A, #3A1C2E); }
.hs-h { height: 10px; width: 85%; border-radius: 4px; background: var(--text); opacity: 0.85; }
.hs-p { height: 6px; border-radius: 3px; background: var(--line-strong); }
.hs-p.short { width: 60%; }
.hs-cta { height: 18px; width: 70%; border-radius: 999px; background: var(--sun); margin-top: 4px; }
.hs-call { margin-top: auto; padding: 7px; border-radius: 10px; background: var(--chip-bg); color: var(--chip-text); font-size: 0.6875rem; font-weight: 700; text-align: center; }
.score {
  position: absolute; left: -4%; bottom: 2%;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px 10px 10px; border: 1px solid var(--line); border-radius: 18px;
  background: var(--surface); box-shadow: var(--shadow-lg);
  font-size: 0.8125rem; color: var(--muted);
}
.score-ring {
  --p: 0;
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--surface) 76%, transparent 78% 100%), conic-gradient(#22C55E calc(var(--p) * 1%), var(--line) 0);
  color: #16A34A; font-size: 0.6875rem;
}
.score-label { max-width: 9rem; line-height: 1.35; }
/* the illustration builds itself when it scrolls in */
.js .devices .br-body > *, .js .devices .handset > *:not(.hs-notch) { opacity: 0; transform: translateY(10px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .devices.is-in .br-body > *, .js .devices.is-in .handset > * { opacity: 1; transform: none; }
.js .devices.is-in .br-nav { transition-delay: 0.2s; } .js .devices.is-in .br-hero { transition-delay: 0.4s; } .js .devices.is-in .br-cards { transition-delay: 0.6s; }
.js .devices.is-in .hs-pic { transition-delay: 0.7s; } .js .devices.is-in .hs-h { transition-delay: 0.8s; } .js .devices.is-in .hs-p { transition-delay: 0.9s; }
.js .devices.is-in .hs-cta { transition-delay: 1s; } .js .devices.is-in .hs-call { transition-delay: 1.1s; }
.devices.is-in .score-ring, html:not(.js) .score-ring { animation: fill-ring 1.8s 0.9s var(--ease) both; }
@keyframes fill-ring { to { --p: 100; } }
.devices .handset { animation: bob 7s ease-in-out infinite alternate; }
.devices .score { animation: bob 6s 1s ease-in-out infinite alternate-reverse; }
@media (max-width: 520px) { .score { display: none; } }

.included { display: grid; gap: 14px; margin-top: 28px; }
@media (min-width: 640px) { .included { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .included { grid-template-columns: repeat(3, 1fr); } }
.included li {
  padding: 28px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.included li:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.included svg { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--chip-bg); color: var(--sun); }
.included h4 { margin-top: 18px; font-size: 1.1875rem; letter-spacing: -0.02em; }
.included p { margin-top: 8px; color: var(--muted); font-size: 0.9688rem; }

.steps { position: relative; display: grid; gap: 28px; margin-top: 36px; counter-reset: step; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 24px; padding-top: 36px; } }
.steps::before, .steps::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px; }
.steps::before { background: var(--line-strong); }
.steps::after { background: var(--dawn); transform-origin: left; transform: scaleX(var(--prog, 0)); transition: transform 1.6s var(--ease); }
.steps.is-in::after { --prog: 1; }
@supports (animation-timeline: view()) {
  .steps::after { transition: none; animation: draw linear both; animation-timeline: view(); animation-range: entry 20% cover 55%; }
}
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 899px) { .steps::before, .steps::after { display: none; } .steps li { padding-left: 24px; border-left: 2px solid var(--line-strong); } }
.steps li { position: relative; }
@media (min-width: 900px) {
  .steps li::before { content: ""; position: absolute; top: -42px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid var(--sun); box-shadow: 0 0 0 5px var(--bg); }
}
.step-n { font-size: 0.875rem; font-weight: 700; color: var(--accent-text); font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
.steps h4 { margin-top: 10px; font-size: 1.375rem; letter-spacing: -0.025em; }
.steps p { margin-top: 10px; color: var(--muted); font-size: 0.9688rem; }

.promise {
  display: grid; gap: 32px; margin-top: clamp(64px, 8vw, 96px);
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface);
}
@media (min-width: 900px) { .promise { grid-template-columns: 1fr 2fr; } }
.promise .sub-title { margin-top: 0; }
.promise-head p { margin-top: 10px; color: var(--muted); }
.promise-list { display: grid; gap: 24px; }
@media (min-width: 640px) { .promise-list { grid-template-columns: 1fr 1fr; } }
.promise-list div { padding-top: 18px; border-top: 1px solid var(--line-strong); }
.promise-list dt { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.promise-list dd { margin-top: 6px; color: var(--muted); }

.cta-band {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 28px; align-items: center;
  margin-top: 24px; padding: clamp(36px, 5vw, 64px);
  border-radius: var(--r-lg);
  background: radial-gradient(120% 140% at 100% 120%, #3A1C2E 0%, var(--night-2) 55%, var(--night) 100%);
  color: #F8FAFC;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--ang), transparent 0 60%, #FDB52D 75%, #F26A1B 85%, transparent 95%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: spin-border 6s linear infinite;
}
@keyframes spin-border { to { --ang: 360deg; } }
.cta-sun { position: absolute; right: -8%; bottom: -70%; z-index: -1; width: 480px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #FDB52D 0%, #F26A1B 35%, rgba(232, 69, 44, 0) 70%); filter: blur(20px); opacity: 0.85; animation: sun-breathe 7s ease-in-out infinite alternate; }
@media (min-width: 800px) { .cta-band { grid-template-columns: 1fr auto; } }
.cta-band h3 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); letter-spacing: -0.04em; }
.cta-band p { margin-top: 12px; max-width: 34rem; color: rgba(226, 232, 240, 0.8); }

/* ---------- About ---------- */
.about { display: grid; gap: 56px; align-items: center; }
@media (min-width: 900px) { .about { grid-template-columns: 0.9fr 1.1fr; gap: 80px; } }
.about-mark { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-width: 420px; width: 100%; margin-inline: auto; border-radius: var(--r-lg); background: radial-gradient(120% 120% at 50% 110%, #3A1C2E 0%, var(--night-2) 55%, var(--night) 100%); box-shadow: var(--shadow-lg); overflow: hidden; }
.about-mark svg { width: 58%; position: relative; z-index: 1; }
.about-mark .g { fill: #F8FAFC; }
.about-mark .g-sun { transform-box: fill-box; transform-origin: 50% 100%; }
.js .about-mark .g-sun { transform: translateY(105%); transition: transform 1.8s 0.3s var(--ease); }
.js .about-mark.is-in .sun { transform: none; }
.mark-halo { position: absolute; left: 50%; top: 52%; width: 70%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(253, 181, 45, 0.35), transparent); filter: blur(20px); animation: sun-breathe 6s ease-in-out infinite alternate; }
.about-copy h2 { margin-top: 16px; font-size: clamp(2.6rem, 6vw, 4.5rem); letter-spacing: -0.05em; }
.about-copy .body { display: grid; gap: 16px; margin-top: 22px; color: var(--muted); font-size: 1.125rem; }
.facts { margin-top: 32px; border-top: 1px solid var(--line-strong); }
.facts div { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--muted); }
.facts dd { font-weight: 600; text-align: right; }

/* ---------- Contact: dusk bookend ---------- */
.section-contact {
  overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 50% 120%, #3A1C2E 0%, #171531 40%, var(--night-2) 65%, var(--night) 100%);
  color: #F8FAFC; text-align: center;
  padding-bottom: clamp(140px, 18vw, 220px);
}
.contact-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.contact-sky .sun { left: 50%; bottom: -46vw; width: 70vw; animation: sun-breathe 7s ease-in-out infinite alternate; }
.contact-sky .horizon { height: 18%; }
.contact { display: flex; flex-direction: column; align-items: center; }
.section-contact .kicker { color: var(--amber); }
.contact h2 { margin-top: 16px; font-size: clamp(3rem, 9vw, 7rem); letter-spacing: -0.055em; }
.contact-mail {
  margin-top: 14px; font-size: clamp(1.5rem, 4.4vw, 3rem); font-weight: 650; letter-spacing: -0.035em; text-decoration: none;
  color: var(--amber); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; text-decoration-color: rgba(253, 181, 45, 0.35);
  overflow-wrap: anywhere; transition: text-decoration-color 0.3s;
}
.contact-mail:hover { text-decoration-color: var(--amber); }
.contact .actions { justify-content: center; }
.contact-note { margin-top: 28px; color: rgba(203, 213, 225, 0.75); font-size: 0.9375rem; }

/* ---------- Footer ---------- */
.site-footer { padding: 28px 0 36px; background: var(--night); color: rgba(203, 213, 225, 0.7); font-size: 0.875rem; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.site-footer ul { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.site-footer a { color: rgba(226, 232, 240, 0.85); text-decoration: none; }
.site-footer a:hover, .site-footer a[aria-current] { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Privacy + 404 ---------- */
.prose { max-width: 44rem; padding-block: clamp(130px, 14vw, 170px) clamp(64px, 8vw, 110px); }
.prose h1 { font-size: clamp(2.5rem, 6vw, 4rem); letter-spacing: -0.045em; }
.prose .updated { margin-top: 12px; color: var(--muted); }
.prose h2 { margin-top: 48px; font-size: 1.5rem; letter-spacing: -0.025em; }
.prose p, .prose ul { margin-top: 14px; }
.prose ul { padding-left: 1.25em; list-style: disc; }
.prose li + li { margin-top: 6px; }
.prose a { color: var(--accent-text); text-underline-offset: 3px; }
.prose .summary { margin-top: 28px; padding: 22px 24px; border: 1px solid var(--line); border-left: 3px solid var(--sun); border-radius: var(--r-sm); background: var(--surface); }
.prose .summary p:first-child { margin-top: 0; }
.notfound { min-height: 100svh; text-align: center; }
.notfound .wrap { display: flex; flex-direction: column; align-items: center; }
.notfound h1 { margin-top: 26px; font-size: clamp(2.9rem, 8vw, 6rem); line-height: 1; letter-spacing: -0.05em; }
.notfound .lede { margin-inline: auto; }
.notfound .actions { justify-content: center; }
.notfound .sun { left: 50%; }

/* ---------- Small screens ---------- */
@media (max-width: 959px) {
  .hero { padding-top: 120px; }
  .fan { margin-top: 8px; }
  .sun { left: 50%; width: 120vw; bottom: -70vw; }
}
@media (max-width: 520px) {
  .stage .phone { --w: 140px; }
  .stage .phone-front { margin-left: -140px; }
  .stage { height: 240px; }
}

/* ---------- Calm motion (html.still, set by motion.js from the device setting or the Animations switch):
   no travel, autoplay or smooth scrolling; fades, hovers and pointer effects stay so the page still feels alive ---------- */
.still *, .still *::before, .still *::after { scroll-behavior: auto !important; }
.still.js .reveal, .still.js .devices .br-body > *, .still.js .devices .handset > * { transform: none !important; }
.still.js .about-mark .g-sun { transform: none !important; }
.still .steps::after { transform: scaleX(1); }
.still .ticker-track { animation: none; transform: none; }
.notfound .sun { bottom: -44vw; }

/* =====================================================================================================
   29 Oct 2026, round 2: app showcase, app pages, screenshot rail, FAQ, page transitions
   ===================================================================================================== */
@property --app-a { syntax: "<color>"; inherits: true; initial-value: #2A2140; }
@property --app-b { syntax: "<color>"; inherits: true; initial-value: #140F1F; }
@property --app-glow { syntax: "<color>"; inherits: true; initial-value: rgba(255, 201, 107, 0.42); }
:root { interpolate-size: allow-keywords; }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.45s; animation-timing-function: var(--ease); }
.status-dev { color: var(--muted); }

/* ---- Home: pinned showcase ---- */
.showcase { position: relative; display: grid; gap: 28px; margin-top: clamp(40px, 6vw, 72px); }
.show-stage { display: none; }
.story {
  position: relative;
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface);
}
.story-phone { --w: min(62vw, 250px); margin: -8px auto 28px; }
.story-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 26px;
  color: var(--accent-text); font-weight: 650; font-size: 1.0625rem; text-decoration: none;
}
.story-link span { transition: transform 0.35s var(--ease); }
.story-link:hover span { transform: translateX(5px); }
@media (max-width: 959px) {
  .story { overflow: hidden; }
  .story::before { content: ""; position: absolute; inset: 0 0 auto; height: min(132vw, 560px); z-index: 0; background: radial-gradient(70% 60% at 50% 100%, var(--app-glow), transparent 70%), linear-gradient(180deg, var(--app-a), var(--app-b)); }
  .story > * { position: relative; }
  .story-phone { margin-top: 24px; }
}
@media (min-width: 960px) {
  .showcase { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 96px); }
  .show-stage { display: block; order: 2; }
  .show-sticky {
    position: sticky; top: max(96px, 12vh);
    height: min(76vh, 760px);
    display: grid; place-items: center;
    border-radius: var(--r-lg); overflow: hidden; isolation: isolate;
    box-shadow: var(--shadow-lg);
  }
  .show-bg { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, var(--app-a), var(--app-b)); }
  .show-glow { position: absolute; left: 10%; right: 10%; bottom: -25%; height: 70%; z-index: -1; border-radius: 50%; background: var(--app-glow); filter: blur(60px); }
  .showcase { transition: --app-a 0.9s var(--ease), --app-b 0.9s var(--ease), --app-glow 0.9s var(--ease); }
  .show-phone { --w: clamp(230px, 21vw, 290px); position: relative; }
  .show-screens { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--w) * 0.13); }
  .show-screens picture { position: absolute; inset: 0; opacity: 0; transform: scale(1.04) translateY(16px); transition: opacity 0.7s var(--ease), transform 0.9s var(--ease); }
  .show-screens img { border-radius: 0; }
  .showcase.show-couchful .show-screens [data-app="couchful"], .showcase.show-glazesmith .show-screens [data-app="glazesmith"],
  .showcase.show-mealkin .show-screens [data-app="mealkin"], .showcase.show-farlocal .show-screens [data-app="farlocal"] { opacity: 1; transform: none; }
  .show-dots { position: absolute; right: 22px; top: 50%; translate: 0 -50%; display: grid; gap: 10px; }
  .show-dots li { width: 8px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.35); transition: height 0.5s var(--ease), background-color 0.5s; }
  .showcase.show-couchful .show-dots [data-app="couchful"], .showcase.show-glazesmith .show-dots [data-app="glazesmith"],
  .showcase.show-mealkin .show-dots [data-app="mealkin"], .showcase.show-farlocal .show-dots [data-app="farlocal"] { height: 28px; background: #fff; }
  .show-stories { display: grid; }
  .story { min-height: 74vh; display: flex; flex-direction: column; justify-content: center; border: 0; background: none; padding: 40px 0; }
  .story-phone { display: none; }
  .js .story { opacity: 0.28; transition: opacity 0.6s var(--ease); }
  .js .story.is-active { opacity: 1; }
  .story .app-id h3 { font-size: clamp(2.2rem, 3.6vw, 3rem); }
}

/* ---- App pages ---- */
.app-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(100svh, 980px);
  display: flex; align-items: center;
  padding: 130px 0 80px;
  color: var(--app-ink);
}
.app-hero-bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 70% at 75% 110%, var(--app-glow), transparent 65%), linear-gradient(165deg, var(--app-a) 0%, var(--app-b) 100%); }
.ah-glow { position: absolute; right: -10%; top: -20%; width: 60vw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, var(--app-glow), transparent); opacity: 0.6; animation: drift-b 24s ease-in-out infinite alternate; }
.app-hero-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .app-hero-grid { grid-template-columns: 1.1fr 1fr; } }
.crumb { display: inline-flex; gap: 8px; color: inherit; opacity: 0.75; font-size: 0.9375rem; font-weight: 500; text-decoration: none; animation: rise 0.9s 0.05s var(--ease) both; }
.crumb:hover { opacity: 1; }
.app-hero-id { display: flex; align-items: center; gap: 14px; margin-top: 34px; animation: pop 0.9s 0.15s var(--ease) both; }
.app-hero-icon { width: 96px; height: 96px; border-radius: 24px; box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1); }
.app-hero .rr-icon.app-hero-icon { width: 96px; height: 96px; border-radius: 24px; }
.app-hero .working { border-color: currentColor; color: inherit; opacity: 0.8; }
.app-hero h1 { margin-top: 22px; font-size: clamp(3.2rem, 9vw, 7rem); line-height: 0.95; letter-spacing: -0.055em; animation: rise 1.1s 0.25s var(--ease) both; }
.app-hero-line { margin-top: 16px; font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 600; letter-spacing: -0.025em; color: var(--app-accent); animation: rise 1.1s 0.35s var(--ease) both; }
.app-hero-pitch { max-width: 34rem; margin-top: 18px; font-size: 1.125rem; opacity: 0.85; animation: rise 1.1s 0.45s var(--ease) both; }
.app-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; animation: rise 1.1s 0.55s var(--ease) both; }
.app-hero .status { border-color: currentColor; background: none; color: inherit; }
.app-hero .status-soon { border-color: transparent; background: rgba(255, 255, 255, 0.14); }
.app-hero-phones { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: clamp(420px, 52vw, 640px); }
.app-hero-phones .phone { --w: clamp(190px, 21vw, 280px); position: relative; }
.app-hero-phones .phone-back { translate: 52% 4%; rotate: 8deg; filter: brightness(0.85); animation: phone-side-in 1.5s 0.45s var(--ease) both; }
.app-hero-phones .phone-front { translate: -40% 0; rotate: -4deg; margin-left: calc(var(--w) * -1); z-index: 2; animation: phone-c-in 1.5s 0.3s var(--ease) both; }
@media (max-width: 959px) { .app-hero { min-height: 0; } .app-hero-phones { min-height: 0; padding-top: 10px; } }

.app-stats { border-bottom: 1px solid var(--line); background: var(--bg-2); }
.stat-row { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .stat-row { grid-template-columns: repeat(4, 1fr); } }
.stat-row div { padding: clamp(28px, 4vw, 44px) clamp(14px, 2vw, 28px); border-left: 1px solid var(--line); }
.stat-row div:first-child, .stat-row div:nth-child(3) { border-left: 0; }
@media (min-width: 900px) { .stat-row div:nth-child(3) { border-left: 1px solid var(--line); } }
.stat-row dt { font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 800; line-height: 1; letter-spacing: -0.05em; background: var(--dawn); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-row dd { margin-top: 10px; color: var(--muted); font-size: 0.9688rem; line-height: 1.45; max-width: 16rem; }

.gallery-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.rail-buttons { display: flex; gap: 10px; }
.rail-buttons[hidden] { display: none; }
.rail-btn {
  width: 52px; height: 52px; border: 1px solid var(--line-strong); border-radius: 50%;
  background: var(--surface); color: var(--text); font: inherit; font-size: 1.25rem; cursor: pointer;
  transition: background-color 0.25s, transform 0.3s var(--ease);
}
.rail-btn:hover { background: var(--surface-2); transform: scale(1.06); }
.rail-btn:disabled { opacity: 0.35; cursor: default; transform: none; }
.rail {
  display: flex; gap: clamp(18px, 2.5vw, 32px);
  margin-top: 44px; padding: 10px max(var(--gutter), calc((100vw - var(--max)) / 2)) 30px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2));
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.rail::-webkit-scrollbar { display: none; }
.rail:focus-visible { outline-offset: -3px; }
.rail-item { flex: none; width: clamp(200px, 22vw, 260px); scroll-snap-align: start; }
.rail-item .phone { --w: clamp(200px, 22vw, 260px); transition: transform 0.6s var(--ease); }
.rail-item:hover .phone { transform: translateY(-8px) rotate(-1deg); }
.rail-item p { margin-top: 18px; color: var(--muted); font-size: 0.9688rem; line-height: 1.45; }

.app-features .feature:first-child { margin-top: 0; }
.app-stage { background: radial-gradient(70% 60% at 50% 100%, var(--app-glow), transparent 70%), linear-gradient(180deg, var(--app-a), var(--app-b)); }
.app-stage .stage-glow { background: var(--app-glow); }
.app-stage .phone-solo { --w: clamp(200px, 22vw, 270px); position: relative; z-index: 1; margin-bottom: -16%; transition: transform 0.8s var(--ease); }
.feature:hover .phone-solo { transform: translateY(-12px); }
@supports (animation-timeline: view()) {
  .app-stage .phone-solo { animation: stage-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
}
.feature-title { margin-top: 12px; font-size: clamp(2rem, 3.8vw, 3rem); letter-spacing: -0.045em; }

.good-section { background: var(--bg-2); }
.good-grid { display: grid; gap: 16px; margin-top: 44px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.good-grid li { padding: 28px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.good-grid h3 { font-size: 1.25rem; letter-spacing: -0.02em; }
.good-grid p { margin-top: 8px; color: var(--muted); }
.app-end { padding-top: clamp(40px, 6vw, 80px); }
.cta-title { font-size: clamp(1.9rem, 3.6vw, 2.8rem); letter-spacing: -0.04em; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- FAQ ---- */
.faq { display: grid; gap: 28px; margin-top: clamp(64px, 8vw, 96px); }
@media (min-width: 900px) { .faq { grid-template-columns: 1fr 2fr; } }
.faq .sub-title { margin-top: 0; }
.faq-list { border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line-strong); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--chip-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M14 9v10M9 14h10' stroke='%23F26A1B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  transition: transform 0.4s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 48px 24px 0; color: var(--muted); }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size 0.45s var(--ease), content-visibility 0.45s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }

.still.js .story { opacity: 1 !important; }
.gallery-section { padding-bottom: clamp(40px, 5vw, 64px); }
.app-mealkin .header-bar { background: rgba(9, 14, 28, 0.84); }

/* ---------- Round 4: websites page, packages, planner, launch alerts ---------- */
.app-web { --app-a: #141B3A; --app-b: #070B16; --app-glow: rgba(242, 106, 27, 0.42); --app-accent: #FDB52D; --app-ink: #F8FAFC; }
.web-hero h1 { font-size: clamp(2.8rem, 6.4vw, 5.4rem); line-height: 0.98; letter-spacing: -0.05em; }
.web-kicker { margin-top: 30px; color: var(--app-accent); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.web-hero .devices { width: 100%; }

.btn-quiet { border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); }
.btn-quiet:hover { border-color: var(--spot-edge); }

.packages { display: grid; gap: 16px; margin-top: clamp(36px, 5vw, 56px); align-items: stretch; }
@media (min-width: 900px) { .packages { grid-template-columns: repeat(3, 1fr); } }
.pkg {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(26px, 3vw, 36px); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.pkg h3 { font-size: 1.5rem; letter-spacing: -0.03em; }
.pkg-for { margin-top: 6px; color: var(--muted); font-size: 0.9688rem; }
.pkg-price { margin-top: 18px; font-size: clamp(2.4rem, 4vw, 3rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.pkg-price span, .pkg-price small { font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.pkg .ticks { flex: 1; margin-bottom: 26px; }
.pkg .btn { align-self: flex-start; }
.pkg-featured { border-color: var(--spot-edge); box-shadow: var(--shadow-lg); }
.pkg-badge {
  position: absolute; top: -13px; left: clamp(26px, 3vw, 36px);
  padding: 4px 12px; border-radius: 999px; background: var(--sun); color: #1A0A00;
  font-size: 0.8125rem; font-weight: 700;
}
.pkg-note { max-width: 46rem; margin-top: 24px; color: var(--muted); font-size: 0.9375rem; }
.pkg-note .story-link, .work-end-side p .story-link, .section-head p .story-link { display: inline; margin-top: 0; font-size: inherit; }
.packages-mini { margin-top: 40px; }
.packages-mini .pkg-price { margin-top: 10px; font-size: clamp(2rem, 3vw, 2.4rem); }
.packages-mini .pkg-for { margin-top: 10px; }
.pkg-more { margin-top: 22px; }

.section-plan { background: var(--bg-2); }
.plan-grid { display: grid; gap: 40px; }
@media (min-width: 1000px) { .plan-grid { grid-template-columns: 0.8fr 1.2fr; align-items: start; } .plan-grid .section-head { position: sticky; top: 120px; } }
.plan-private { font-size: 0.9375rem !important; }
.planner {
  display: grid; gap: 26px; padding: clamp(22px, 3.4vw, 40px);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-md);
}
.planner fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.planner legend, .field > span { display: block; margin-bottom: 12px; font-weight: 700; letter-spacing: -0.01em; }
.planner legend small, .field > span small { color: var(--muted); font-weight: 500; }
.choice-row { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span {
  display: flex; flex-direction: column; gap: 2px; min-height: 48px; justify-content: center;
  padding: 10px 16px; border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--surface-2);
  font-weight: 600; transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.choice span small { color: var(--muted); font-size: 0.8125rem; font-weight: 500; }
.choice.chip span { border-radius: 999px; flex-direction: row; font-size: 0.9375rem; }
.choice:hover span { border-color: var(--spot-edge); }
.choice input:checked + span { border-color: var(--sun); background: var(--chip-bg); box-shadow: 0 0 0 1px var(--sun) inset; }
.choice.chip input:checked + span::before { content: "✓"; margin-right: 6px; color: var(--accent-text); }
.choice input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.field-row { display: grid; gap: 16px; }
@media (min-width: 700px) { .field-row { grid-template-columns: 1fr 1fr; } .field-row .field:first-child { grid-column: 1 / -1; } }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--line-strong); border-radius: 12px;
  background: var(--surface-2); color: var(--text); font: inherit; font-size: 1rem;
}
.field textarea { resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: transparent; }
.plan-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 22px; border-top: 1px solid var(--line); }
.plan-estimate { color: var(--muted); font-size: 0.9688rem; }
.plan-estimate b { color: var(--text); font-size: 1.25rem; }

.story-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 18px; }
.story-links .story-link { margin-top: 0; }
.notify-link { color: var(--muted); font-size: 0.9375rem; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong); }
.notify-link:hover { color: var(--text); text-decoration-color: currentColor; }
.app-hero .notify-link { color: inherit; opacity: 0.85; text-decoration-color: rgba(255, 255, 255, 0.4); }
.app-mealkin .app-hero .notify-link { text-decoration-color: rgba(0, 0, 0, 0.3); }
.tile-zero .big-num { font-size: clamp(3.4rem, 6vw, 4.6rem); }
.app-web .section-web { padding-top: clamp(24px, 4vw, 48px); }
.app-web .section-web .wrap > .sub-title:first-child { margin-top: 0; }

/* ---------- Round 5: the WebGL sunrise (assets/sky.js) ---------- */
.sky-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.has-gl > :not(.sky-gl) { display: none; }

/* Type: Bricolage Grotesque for headings (its width axis is animated with the sun), Inter for reading */
:root { --display: "Bricolage Grotesque", var(--font); }
h1, h2, h3, .big-num, .pkg-price, .contact-mail { font-family: var(--display); }
h1, h2 { font-weight: 720; letter-spacing: -0.035em; }
h3 { letter-spacing: -0.02em; }
/* no single accented word in headlines, no all-caps labels: the headline itself carries the design */
.dawn-text { background: none; color: inherit; animation: none; -webkit-background-clip: border-box; background-clip: border-box; }
.kicker, .web-kicker { font-family: var(--display); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; text-transform: none; }
.kicker::before { display: none; }

/* Hero: first light. Centred over the sea; the sun comes up underneath as the page scrolls */
.hero-dawn { align-items: flex-start; min-height: max(680px, 100svh); padding: clamp(130px, 21vh, 210px) 0 120px; text-align: center; background: var(--night); }
.hero-center { display: flex; flex-direction: column; align-items: center; }
.hero .dawn-title {
  margin-top: 0;
  font-size: clamp(3rem, 11vw, 9.6rem);
  line-height: 0.9; letter-spacing: -0.045em;
  font-stretch: calc(80% + 20% * var(--rise, 0));
}
.hero .dawn-title .line { white-space: normal; }
.dawn-title .line:nth-child(1) .line-in { font-weight: 300; }
.dawn-title .line:nth-child(2) .line-in { font-weight: 800; animation: line-up 1.2s 0.34s var(--ease) both; }
.hero-dawn .lede { margin: 30px auto 0; max-width: 36rem; color: rgba(226, 232, 240, 0.88); }
.hero-dawn .actions { justify-content: center; }
.hero-dawn .hero-proof { justify-content: center; color: rgba(226, 232, 240, 0.8); }
@media (min-width: 960px) { .hero .dawn-title { font-size: clamp(5rem, 9vw, 9.6rem); } }
/* as the sun comes up the words step back and the sky takes over */
.hero-center { opacity: clamp(0, calc(1.32 - var(--rise, 0) * 1.5), 1); transform: translateY(calc(var(--rise, 0) * -70px)); }

/* ---------- Try your website (assets/builder.js) ---------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html:not(.js) .needs-js { display: none; }
.section-try .section-head h2 { max-width: 15ch; }
.builder { display: grid; gap: 28px; margin-top: clamp(32px, 5vw, 56px); align-items: center; }
@media (min-width: 1000px) { .builder { grid-template-columns: minmax(300px, 0.72fr) 1.28fr; gap: 48px; } }
.bl-controls {
  display: grid; gap: 22px; padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-md);
}
.bl-controls fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.bl-controls legend { display: block; margin-bottom: 12px; font-weight: 700; letter-spacing: -0.01em; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { position: relative; cursor: pointer; }
.swatch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.swatch span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 8px;
  border: 1.5px solid var(--line-strong); border-radius: 999px; font-size: 0.9375rem; font-weight: 600;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.swatch span::before { content: ""; width: 26px; height: 26px; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 2px var(--surface) inset; }
.swatch:hover span { border-color: var(--spot-edge); }
.swatch input:checked + span { border-color: var(--sw); box-shadow: 0 0 0 1px var(--sw) inset; }
.swatch input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.sw-ocean { --sw: #0E7490; } .sw-eucalypt { --sw: #166534; } .sw-sunset { --sw: #C2410C; } .sw-plum { --sw: #7E22CE; }
.bl-send { display: grid; gap: 10px; padding-top: 20px; border-top: 1px solid var(--line); }
.bl-send .btn { justify-self: start; }
.bl-send p { color: var(--muted); font-size: 0.875rem; }

/* the stage: a browser on a dawn-lit desk, a phone in front */
.bl-stage {
  position: relative; padding: clamp(18px, 3vw, 40px) clamp(14px, 3vw, 40px) clamp(64px, 9vw, 96px) clamp(14px, 2vw, 24px);
  border-radius: var(--r-lg);
  background: radial-gradient(90% 70% at 70% 100%, rgba(242, 106, 27, 0.32), transparent 70%), linear-gradient(160deg, #101935, #070B16);
  isolation: isolate;
}
.bl-browser { width: min(100%, 680px); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08); container-type: inline-size; }
.bl-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #E9EDF3; }
.bl-bar i { width: 10px; height: 10px; border-radius: 50%; background: #C7CED9; }
.bl-url { margin-left: 10px; padding: 3px 12px; border-radius: 999px; background: #fff; color: #334155; font-size: 0.75rem; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-phone {
  position: absolute; right: clamp(10px, 3vw, 34px); bottom: clamp(14px, 2.5vw, 26px); width: clamp(132px, 24%, 190px);
  aspect-ratio: 9 / 19; border-radius: 26px; padding: 7px; background: #0B1020;
  box-shadow: 0 28px 60px -16px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.12);
  container-type: inline-size; overflow: hidden;
}
.bl-phone .ms { height: 100%; border-radius: 20px; overflow: hidden; }
.ms-callbar {
  position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 7px 0; border-radius: 999px;
  background: var(--ac); color: #fff; font-size: 9cqi; font-weight: 700; text-align: center; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.5);
  transition: background-color 0.4s;
}

/* the sample sites (assets/builder.js): one design per trade, sized from their frame (cqi) so they scale with it */
.bl-stage, .sc-card { --ac: #0E7490; --tint: #ECFEFF; --deep: #164E63; }
[data-pal="eucalypt"] { --ac: #166534; --tint: #F0FDF4; --deep: #14532D; }
[data-pal="sunset"] { --ac: #C2410C; --tint: #FFF7ED; --deep: #7C2D12; }
[data-pal="plum"] { --ac: #7E22CE; --tint: #FAF5FF; --deep: #581C87; }
.bl-browser .ms { aspect-ratio: 16 / 10.6; overflow: hidden; }
.ms { display: grid; align-content: start; background: #fff; color: #0F172A; font-size: 2.1cqi; line-height: 1.45; text-align: left; }
.ms-m { font-size: 6.4cqi; }
.ms-site { min-width: 0; min-height: 100%; }
.ms em { font-style: italic; }
.ms-ico { width: 1.15em; height: 1.15em; flex: none; }
.ms-nav { display: flex; align-items: center; gap: 1.6em; padding: 1.15em 2.2em; }
.ms-nav-c { display: grid; grid-template-columns: 1fr auto 1fr; }
.ms-nav-c .ms-links { margin-left: 0; }
.ms-nav-c .ms-btn { justify-self: end; }
.ms-logo { display: inline-flex; align-items: center; gap: 0.6em; font-weight: 800; font-size: 1.1em; letter-spacing: -0.02em; white-space: nowrap; }
.ms-mark { display: grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 0.55em; background: var(--ac); color: #fff; font-size: 0.85em; }
.ms-links { display: flex; gap: 1.6em; margin-left: auto; font-weight: 500; }
.ms-btn { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.75em 1.35em; border-radius: 999px; background: var(--ac); color: #fff; font-weight: 700; white-space: nowrap; }
.ms-btn.ms-sm { padding: 0.5em 1.05em; font-size: 0.9em; }
.ms-btn.ms-ghost { background: transparent; color: inherit; box-shadow: 0 0 0 1.5px currentColor inset; }
.ms-burger { display: none; }
.ms-h { font-family: var(--display); font-weight: 750; line-height: 1.02; letter-spacing: -0.035em; }
.ms-p { margin-top: 0.9em; max-width: 30em; }
.ms-acts { display: flex; flex-wrap: wrap; gap: 0.7em; margin-top: 1.4em; }
.ms-rate { display: flex; align-items: center; gap: 0.5em; margin-top: 1.5em; font-size: 0.9em; }
.ms-stars { width: 5.3em; height: 1em; fill: #FBBF24; }

/* trades: night-blue, condensed capitals, the call first and a live "on the way" map */
.ms-tr { background: #0A111E; color: #F1F5F9; }
.ms-tr .ms-p, .ms-tr .ms-links, .ms-tr .ms-rate span { color: #CBD5E1; }
.tr-top { display: flex; justify-content: space-between; padding: 0.55em 2.2em; background: var(--ac); color: #fff; font-size: 0.82em; font-weight: 600; }
.tr-top span { display: inline-flex; align-items: center; gap: 0.55em; }
.tr-live { width: 0.55em; height: 0.55em; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 0.25em rgba(74, 222, 128, 0.3); }
.ms-tr .ms-nav { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.tr-hero {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2.2em; align-items: center; padding: 2.2em 2.2em 2em;
  background: radial-gradient(60% 90% at 85% 30%, color-mix(in srgb, var(--ac) 38%, transparent), transparent 70%);
}
.tr-badge { display: inline-flex; align-items: center; gap: 0.45em; font-size: 0.85em; font-weight: 600; color: color-mix(in srgb, var(--ac) 30%, #fff); }
.ms-tr .ms-h { margin-top: 0.45em; font-size: 3.3em; font-weight: 800; font-stretch: 76%; line-height: 0.93; letter-spacing: -0.012em; text-transform: uppercase; }
.tr-map { position: relative; aspect-ratio: 1 / 0.95; border-radius: 1.4em; overflow: hidden; background: #111C2F; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 2em 3em -1.5em rgba(0, 0, 0, 0.7); }
.tr-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-water { fill: color-mix(in srgb, var(--ac) 42%, #0B1626); }
.m-park { fill: rgba(74, 222, 128, 0.12); }
.m-street path { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 3; }
.m-road path { fill: none; stroke: rgba(255, 255, 255, 0.15); stroke-width: 6; }
.m-route { fill: none; stroke: color-mix(in srgb, var(--ac) 45%, #fff); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 7 6; animation: ms-march 1.4s linear infinite; }
.m-van { fill: #fff; stroke: var(--ac); stroke-width: 3; }
.m-pin { fill: var(--ac); stroke: #fff; stroke-width: 2.4; }
.m-dot { fill: #fff; }
.m-ring { fill: none; stroke: color-mix(in srgb, var(--ac) 50%, #fff); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: ms-ping 2.2s ease-out infinite; }
.m-label { fill: rgba(255, 255, 255, 0.6); font-size: 7px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.tr-eta {
  position: absolute; left: 0.9em; right: 0.9em; bottom: 0.9em; display: grid; grid-template-columns: auto 1fr; gap: 0.35em 0.7em; align-items: center;
  padding: 0.75em 0.9em; border-radius: 1em; background: #fff; color: #0F172A; box-shadow: 0 1em 2em -1em rgba(0, 0, 0, 0.7);
}
.tr-av { grid-row: span 2; display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; background: var(--ac); color: #fff; font-weight: 800; }
.tr-who { display: grid; font-size: 0.9em; line-height: 1.25; }
.tr-who small { color: #475569; font-size: 0.92em; }
.tr-bar { height: 0.3em; border-radius: 9em; background: #E2E8F0; overflow: hidden; }
.tr-bar i { display: block; width: 68%; height: 100%; border-radius: inherit; background: var(--ac); }
.tr-list { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255, 255, 255, 0.08); }
.tr-list > div { display: grid; gap: 0.2em; padding: 1.3em 2.2em; border-right: 1px solid rgba(255, 255, 255, 0.08); }
.tr-list > div:last-child { border-right: 0; }
.tr-n { font-family: var(--display); font-size: 0.85em; font-weight: 700; color: color-mix(in srgb, var(--ac) 40%, #fff); }
.tr-list span:last-child { color: #CBD5E1; font-size: 0.92em; }

/* cafe: warm paper, an editorial serif, a breakfast table from above and the menu with dotted leaders */
.ms-cf { background: #F6EFE6; color: #2B1D14; }
.ms-cf .ms-nav { border-bottom: 1px solid rgba(43, 29, 20, 0.12); }
.ms-cf .ms-mark, .ms-sa .ms-mark { border-radius: 50%; }
.ms-cf .ms-p { color: #5A4536; }
.ms-cf .ms-h, .ms-sa .ms-h, .cf-mh, .sa-prices b { font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; font-weight: 400; }
.cf-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2em; align-items: center; padding: 2.1em 2.2em 1.7em; }
.cf-kick { font-size: 0.8em; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--deep); }
.ms-cf .ms-h { margin-top: 0.4em; font-size: 3.15em; line-height: 1; letter-spacing: -0.03em; }
.ms-cf em, .ms-sa em { color: var(--ac); }
.ms-cf .ms-btn { border-radius: 0.6em; }
.cf-art { position: relative; aspect-ratio: 200 / 170; border-radius: 1.4em; overflow: hidden; background: linear-gradient(140deg, #CDA47D, #A57650); box-shadow: 0 1.6em 2.6em -1.4em rgba(80, 45, 20, 0.6); }
.cf-svg { display: block; width: 100%; height: 100%; }
.cf-grain path { fill: none; stroke: rgba(80, 45, 20, 0.2); stroke-width: 1.2; }
.cf-napkin { fill: var(--ac); }
.cf-plate { fill: #FCFAF6; }
.cf-rim { fill: none; stroke: #EDE4D7; stroke-width: 1.5; }
.cf-toast { fill: #D99A5B; stroke: #A86A35; stroke-width: 3; }
.cf-avo ellipse { fill: #B5D27A; stroke: #5F8A2E; stroke-width: 2; }
.cf-egg { fill: #fff; }
.cf-yolk { fill: #F2A93B; }
.cf-cup { fill: #fff; stroke: #E7DCCD; stroke-width: 1.5; }
.cf-coffee { fill: #9A6440; }
.cf-foam { fill: #F4E6D3; }
.cf-fig { fill: #5E1F49; }
.cf-flesh { fill: #E8958F; }
.cf-seed { fill: #F8D9C2; }
.cf-open { position: absolute; left: 0.9em; bottom: 0.9em; display: inline-flex; align-items: center; gap: 0.5em; padding: 0.5em 0.9em; border-radius: 999px; background: #FCFAF6; font-size: 0.82em; font-weight: 700; box-shadow: 0 0.6em 1.4em -0.6em rgba(43, 29, 20, 0.5); }
.cf-open i { width: 0.55em; height: 0.55em; border-radius: 50%; background: #16A34A; }
.cf-menu { margin: 0 2.2em; padding: 1.1em 0 1.6em; border-top: 1px solid rgba(43, 29, 20, 0.15); }
.cf-mh { font-size: 1.3em; font-style: italic; }
.cf-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55em 2.4em; margin-top: 0.6em; }
.cf-row { display: flex; align-items: baseline; gap: 0.5em; }
.cf-row i { flex: 1; border-bottom: 1.5px dotted rgba(43, 29, 20, 0.4); }
.cf-row b { color: var(--deep); }

/* clinic: clean and calm, with a real booking widget in the hero */
.ms-cl .ms-nav { border-bottom: 1px solid #EEF1F5; }
.ms-cl .ms-p, .ms-cl .ms-links { color: #334155; }
.cl-hero {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2.2em; align-items: center; padding: 2.2em 2.2em 2em;
  background: radial-gradient(80% 90% at 0% 0%, var(--tint), transparent 70%), linear-gradient(180deg, #fff, var(--tint));
}
.cl-badge { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.35em 0.85em; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ac) 25%, transparent); color: var(--deep); font-size: 0.82em; font-weight: 700; }
.cl-badge i { width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--ac); }
.ms-cl .ms-h { margin-top: 0.5em; font-size: 3em; font-weight: 650; letter-spacing: -0.045em; }
.ms-cl .ms-btn.ms-ghost { color: var(--deep); }
.cl-trust { display: flex; align-items: center; gap: 0.5em; margin-top: 1.3em; color: var(--deep); font-size: 0.88em; font-weight: 600; }
.cl-book { display: grid; gap: 0.75em; padding: 1.2em; border-radius: 1.3em; background: #fff; box-shadow: 0 0 0 1px #E8EDF3, 0 1.6em 3em -1.6em rgba(15, 23, 42, 0.4); }
.cl-bt { font-size: 1.05em; font-weight: 700; }
.cl-sel { display: flex; justify-content: space-between; align-items: center; padding: 0.6em 0.85em; border-radius: 0.7em; background: #F4F6F9; font-size: 0.9em; font-weight: 600; }
.cl-sel small, .cl-days small { color: #475569; }
.cl-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.4em; }
.cl-days span { display: grid; justify-items: center; padding: 0.45em 0; border-radius: 0.7em; box-shadow: 0 0 0 1px #E2E8F0 inset; font-weight: 700; line-height: 1.2; }
.cl-days small { font-size: 0.72em; font-weight: 600; }
.cl-days .on { background: var(--ac); color: #fff; box-shadow: none; }
.cl-days .on small { color: #fff; }
.cl-times { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4em; }
.cl-times span { padding: 0.4em 0; border-radius: 0.6em; box-shadow: 0 0 0 1px #E2E8F0 inset; font-size: 0.88em; font-weight: 600; text-align: center; }
.cl-times .on { background: var(--tint); color: var(--deep); box-shadow: 0 0 0 2px var(--ac) inset; }
.cl-times .off { color: #64748B; text-decoration: line-through; }
.cl-go { justify-content: center; border-radius: 0.8em; }
.cl-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2em; padding: 1.5em 2.2em 2em; }
.cl-list > div { display: grid; gap: 0.2em; }
.cl-ic { display: grid; place-items: center; width: 2.2em; height: 2.2em; margin-bottom: 0.4em; border-radius: 0.7em; background: var(--tint); color: var(--deep); }
.cl-list span:last-child { color: #475569; font-size: 0.92em; }

/* salon: a fashion-magazine page, big serif, silk arches and a ruled price list */
.ms-sa { background: #FAF6F3; color: #1C1917; }
.ms-sa .ms-p { color: #57534E; }
.ms-sa .ms-btn { background: #1C1917; }
.ms-sa .ms-btn.ms-sm { background: transparent; color: #1C1917; box-shadow: 0 0 0 1.5px currentColor inset; }
.sa-hero { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 2em; align-items: end; padding: 1.8em 2.2em; }
.sa-kick { color: var(--deep); font-size: 0.8em; font-weight: 600; letter-spacing: 0.17em; text-transform: uppercase; }
.ms-sa .ms-h { margin-top: 0.35em; font-size: 3.9em; line-height: 0.95; letter-spacing: -0.035em; }
.sa-link { align-self: center; font-weight: 700; text-decoration: underline; text-underline-offset: 0.3em; }
.sa-arches { position: relative; min-height: 16em; height: 100%; }
.sa-arch {
  position: absolute; left: 0; bottom: 0; width: 58%; aspect-ratio: 5 / 7.4; overflow: hidden; border-radius: 999px 999px 0.8em 0.8em;
  background: radial-gradient(70% 45% at 35% 22%, rgba(255, 255, 255, 0.4), transparent 60%), linear-gradient(165deg, color-mix(in srgb, var(--ac) 65%, #fff), var(--deep));
}
.sa-a2 { left: auto; right: 0; bottom: 2.6em; width: 48%; background: radial-gradient(70% 45% at 60% 20%, rgba(255, 255, 255, 0.45), transparent 60%), linear-gradient(200deg, #E8C7B0, color-mix(in srgb, var(--deep) 70%, #000)); }
.sa-svg { display: block; width: 100%; height: 100%; }
.sa-tag { position: absolute; left: 34%; bottom: 0.9em; padding: 0.5em 0.9em; border-radius: 999px; background: #fff; font-size: 0.8em; font-weight: 700; white-space: nowrap; box-shadow: 0 0.8em 1.6em -0.7em rgba(28, 25, 23, 0.45); }
.sa-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.4em; margin: 0 2.2em; padding-bottom: 1.6em; }
.sa-prices > div { display: flex; justify-content: space-between; gap: 1em; padding: 0.75em 0; border-top: 1px solid rgba(28, 25, 23, 0.16); }
.sa-prices b { font-style: italic; }

/* the phone versions: one column, a menu button, the call bar does the selling */
.ms-m .ms-nav { padding: 1.5em 1.1em 0.9em; gap: 0.6em; }
.ms-m .ms-nav-c { display: flex; }
.ms-m .ms-links, .ms-m .ms-nav .ms-btn, .ms-m .ms-acts, .ms-m .cl-trust, .ms-m .tr-top span:last-child { display: none; }
.ms-m .ms-burger { display: grid; gap: 0.28em; margin-left: auto; }
.ms-m .ms-burger i { width: 1.2em; height: 2px; border-radius: 2px; background: currentColor; }
.ms-m .tr-top { justify-content: center; padding: 0.5em 1.1em; }
.ms-m .tr-top + .ms-nav { padding-top: 0.9em; }
.ms-m .tr-hero, .ms-m .cf-hero, .ms-m .cl-hero, .ms-m .sa-hero { grid-template-columns: 1fr; gap: 1.1em; padding: 1.1em; }
.ms-m .ms-tr .ms-h { font-size: 2.35em; }
.ms-m .ms-cf .ms-h { font-size: 2.2em; }
.ms-m .ms-cl .ms-h { font-size: 2em; }
.ms-m .ms-sa .ms-h { font-size: 2.6em; }
.ms-m .ms-rate { margin-top: 0.9em; }
.ms-m .tr-map { aspect-ratio: 16 / 12; }
.ms-m .tr-list, .ms-m .cl-list, .ms-m .cf-rows, .ms-m .sa-prices { grid-template-columns: 1fr; }
.ms-m .tr-list > div { padding: 1em 1.1em; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.ms-m .cf-menu, .ms-m .sa-prices { margin: 0 1.1em; }
.ms-m .cl-list { padding: 1.1em; }
.ms-m .sa-arches { min-height: 13em; }

@keyframes ms-march { to { stroke-dashoffset: -26; } }
@keyframes ms-ping { from { transform: scale(0.6); opacity: 1; } to { transform: scale(2.3); opacity: 0; } }
.still .m-route, .still .m-ring { animation: none; }

/* the demo's typing caret */
.builder.is-demo input[name="name"] { caret-color: var(--sun); box-shadow: 0 0 0 3px var(--chip-bg); }
@media (max-width: 560px) {
  .bl-stage { padding-bottom: 150px; }
  .bl-phone { width: 128px; }
}

/* Lenis (assets/vendor/lenis.min.js, MIT): its required rules */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

@media (min-width: 1000px) {
  .section-try .section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; max-width: none; }
  .section-try .section-head p { margin-top: 0; padding-bottom: 8px; }
}
@media (max-width: 999px) { .bl-stage { order: -1; } }

/* ---------- Sample sites showcase (index #examples): a sideways row; scroll.js pins it and scrubs it on wide screens ---------- */
.section-show { overflow: clip; }
.sc-track {
  display: flex; gap: clamp(20px, 3vw, 44px); margin: clamp(32px, 5vw, 56px) 0 0; padding: 4px max(var(--gutter), calc((100% - var(--max)) / 2)) 24px;
  list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.sc-track::-webkit-scrollbar { display: none; }
.sc-card { flex: none; display: grid; gap: 22px; align-content: start; width: min(86vw, 1040px, calc((100vh - 300px) * 1.5)); scroll-snap-align: center; }
.sc-frame {
  position: relative; padding: clamp(14px, 2.6vw, 34px) clamp(14px, 2.6vw, 34px) clamp(40px, 5vw, 60px); border-radius: var(--r-lg); isolation: isolate;
  background: radial-gradient(80% 70% at 75% 100%, color-mix(in srgb, var(--ac) 45%, transparent), transparent 70%), linear-gradient(160deg, #101935, #070B16);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
.sc-frame .bl-browser { width: 84%; }
.sc-frame .bl-phone { width: 20%; right: 4%; bottom: 7%; }
.sc-cap { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 20px; align-items: baseline; }
.sc-num { grid-row: span 2; font-family: var(--display); font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 300; font-stretch: 80%; color: var(--muted); }
.sc-cap h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); letter-spacing: -0.03em; }
.sc-cap p { grid-column: 2; color: var(--muted); max-width: 54ch; }
.sc-cap .story-link { grid-column: 3; grid-row: 1 / span 2; align-self: center; margin-top: 0; }
.sc-end { width: min(80vw, 520px); align-content: center; gap: 22px; padding: clamp(24px, 4vw, 48px); }
.sc-end > p:not(.sc-big) { color: var(--muted); max-width: 34ch; }
.sc-end .btn { justify-self: start; }
.sc-big { font-family: var(--display); font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 800; line-height: 0.92; letter-spacing: -0.05em; }
.section-show.is-pinned { padding-bottom: 0; }
.section-show.is-pinned .sc-track { overflow: visible; scroll-snap-type: none; }
.section-show.is-pinned .sc-pin { display: flex; align-items: center; min-height: 100vh; }
@media (max-width: 720px) {
  .sc-cap { grid-template-columns: auto 1fr; }
  .sc-cap .story-link { grid-column: 2; grid-row: auto; }
  .sc-card { width: 80vw; }
  .sc-frame { display: grid; place-items: center; padding: 28px 0 32px; }
  .sc-frame .bl-browser { display: none; }
  .sc-frame .bl-phone { position: relative; right: auto; bottom: auto; width: min(60vw, 240px); }
}

/* split headings: each word rises out of its own line box (scroll.js) */
.rise-w { display: inline-block; overflow: clip; overflow-clip-margin: 0.12em; padding-bottom: 0.08em; margin-bottom: -0.08em; vertical-align: top; }
.rise-w > span { display: inline-block; }

/* ---------- Standards page (/standards) ---------- */
.std-hero {
  position: relative; overflow: clip; padding: clamp(140px, 16vw, 200px) 0 clamp(72px, 9vw, 120px); color: #F1F5F9;
  background:
    linear-gradient(rgba(148, 163, 184, 0.07) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(148, 163, 184, 0.07) 1px, transparent 1px) 0 0 / 56px 56px,
    radial-gradient(70% 60% at 80% 40%, rgba(242, 106, 27, 0.22), transparent 70%),
    linear-gradient(180deg, #070B16, #0B1226);
}
.std-hero-grid { display: grid; gap: clamp(40px, 6vw, 72px); align-items: center; }
@media (min-width: 1000px) { .std-hero-grid { grid-template-columns: 1fr 1.05fr; } }
.std-kicker { font-family: var(--display); font-weight: 600; color: #FDBA74; }
.std-hero h1 { margin-top: 14px; font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 0.98; letter-spacing: -0.05em; }
.std-lede { margin-top: 22px; max-width: 36rem; color: #CBD5E1; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); }
.std-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.std-hero .btn-ghost, .std-end .btn-ghost { color: #F1F5F9; }
.std-spec {
  margin: 0; border-radius: 20px; overflow: hidden; background: rgba(10, 16, 32, 0.86); color: #E2E8F0;
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.18), 0 40px 80px -30px rgba(0, 0, 0, 0.8);
  font-family: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace; font-size: 0.8125rem;
}
.std-spec-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid rgba(148, 163, 184, 0.14); color: #94A3B8; }
.std-spec-bar i { width: 10px; height: 10px; border-radius: 50%; background: #334155; }
.std-spec-bar span { margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.std-spec-rows { margin: 0; padding: 8px 0; }
.std-spec-rows > div { display: grid; gap: 2px; padding: 9px 18px 9px 40px; position: relative; }
.std-spec-rows > div::before {
  content: ""; position: absolute; left: 16px; top: 13px; width: 12px; height: 12px; border-radius: 50%;
  background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18), 0 0 14px rgba(34, 197, 94, 0.5);
}
.std-spec-rows dt { color: #7DD3FC; font-weight: 600; }
.std-spec-rows dd { margin: 0; color: #CBD5E1; overflow-wrap: anywhere; }
.std-spec figcaption { padding: 12px 18px 16px; border-top: 1px solid rgba(148, 163, 184, 0.14); color: #94A3B8; font-family: var(--font); }
.std-score { padding: clamp(48px, 7vw, 84px) 0 0; }
.std-nums { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; border-radius: var(--r-lg); overflow: hidden; background: var(--line-strong); box-shadow: 0 0 0 1px var(--line-strong); }
@media (min-width: 760px) { .std-nums { grid-template-columns: repeat(4, 1fr); } }
.std-nums li { display: grid; align-content: start; gap: 10px; padding: clamp(24px, 3vw, 36px); background: var(--surface); }
.std-nums b { font-family: var(--display); font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 800; line-height: 1; letter-spacing: -0.05em; }
.std-nums small { font-size: 0.4em; font-weight: 700; letter-spacing: 0; margin-left: 4px; }
.std-nums span { color: var(--muted); }
.std-note { margin-top: 14px; color: var(--muted); font-size: 0.875rem; }
.std-pillars { display: grid; gap: 20px; margin: clamp(32px, 5vw, 56px) 0 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .std-pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .std-pillars { grid-template-columns: repeat(6, 1fr); } .std-pillars > li { grid-column: span 2; } .std-pillars > li:nth-child(4) { grid-column: 2 / span 2; } }
.std-pillars > li { padding: clamp(24px, 3vw, 34px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-md); }
.std-n { font-family: var(--display); font-weight: 300; font-stretch: 80%; font-size: 1.6rem; color: var(--sun-text); }
.std-pillars h3 { margin-top: 8px; font-size: 1.5rem; letter-spacing: -0.03em; }
.std-pillars p { margin-top: 10px; color: var(--muted); }
.std-pillars ul { display: grid; gap: 8px; margin: 18px 0 0; padding: 18px 0 0; list-style: none; border-top: 1px solid var(--line); }
.std-pillars ul li { position: relative; padding-left: 24px; font-size: 0.9375rem; }
.std-pillars ul li::before { content: ""; position: absolute; left: 2px; top: 0.45em; width: 11px; height: 6px; border-left: 2px solid var(--sun-text); border-bottom: 2px solid var(--sun-text); transform: rotate(-45deg); }
.std-checks-grid { display: grid; gap: clamp(32px, 5vw, 64px); }
@media (min-width: 1000px) { .std-checks-grid { grid-template-columns: 1fr 1.1fr; align-items: start; } }
.std-checklist { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: chk; }
.std-checklist li { counter-increment: chk; display: grid; grid-template-columns: 52px 1fr; padding: 18px 0; border-top: 1px solid var(--line-strong); color: var(--muted); }
.std-checklist li::before { content: counter(chk, decimal-leading-zero); grid-row: span 2; font-family: var(--display); font-weight: 700; color: var(--sun-text); }
.std-checklist b { color: var(--text); }
.std-never { display: grid; gap: 12px; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .std-never { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .std-never { grid-template-columns: repeat(3, 1fr); } }
.std-never li { display: flex; gap: 14px; align-items: baseline; padding: 18px 20px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); font-weight: 600; }
.std-never li::before { content: "\00D7"; flex: none; color: var(--sun-text); font-size: 1.4rem; line-height: 0.6; font-weight: 400; }
.std-end-card {
  padding: clamp(32px, 6vw, 72px); border-radius: var(--r-lg); color: #F1F5F9;
  background: radial-gradient(70% 90% at 90% 100%, rgba(242, 106, 27, 0.35), transparent 70%), linear-gradient(160deg, #101935, #070B16);
}
.std-end-card h2 { max-width: 18ch; font-size: clamp(2rem, 4.4vw, 3.4rem); letter-spacing: -0.045em; line-height: 1; }
.std-end-card p { margin-top: 18px; max-width: 40rem; color: #CBD5E1; }

/* ---------- Round 7: focus reveal, cascading slider, particle cloak, say hello, glow ring (assets/fx.js) ---------- */

/* Glow ring: the big primary buttons wear a sunrise ring that travels round them */
.btn-primary.btn-lg {
  border: 2px solid transparent;
  background: linear-gradient(180deg, #FB8A3C 0%, var(--sun) 100%) padding-box,
    conic-gradient(from var(--ang), #FDB52D, #FFF7ED, #E8452C, #F26A1B, #FDB52D) border-box;
  animation: ring-spin 4.5s linear infinite;
}
.btn-primary.btn-lg:hover { animation-duration: 1.6s; }
@keyframes ring-spin { to { --ang: 360deg; } }

/* Focus reveal */
.section-manifesto { padding-block: clamp(90px, 13vw, 180px); }
.manifesto {
  position: relative; margin-top: 26px; max-width: 22ch;
  font-family: var(--display); font-size: clamp(2rem, 5.4vw, 4.6rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.045em;
}
@media (min-width: 900px) { .manifesto { max-width: 25ch; } }
.manifesto .fw { display: inline-block; transition: filter 0.6s var(--ease), opacity 0.6s var(--ease), color 0.4s; }
.manifesto.fr-on .fw { filter: blur(7px); opacity: 0.32; }
.manifesto.fr-on .fw.is-seen { filter: none; opacity: 1; }
.manifesto.fr-on .fw.is-focus { filter: none; opacity: 1; color: var(--accent-text); }
.fr-frame {
  position: absolute; left: 0; top: 0; width: var(--fw, 0); height: var(--fh, 0); pointer-events: none;
  transform: translate(var(--fx, 0), var(--fy, 0)); opacity: 0;
  transition: transform 0.5s var(--ease), width 0.62s var(--ease), height 0.62s var(--ease), opacity 0.3s;
}
.fr-frame.is-on { opacity: 1; }
.fr-frame i { position: absolute; width: 0.32em; height: 0.32em; border: 3px solid var(--sun); }
.fr-frame i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.fr-frame i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 6px; }
.fr-frame i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 6px; }
.fr-frame i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }

/* Cascading slider: without JS the steps are a plain list */
.section-how { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); }
.cascade { margin-top: clamp(36px, 5vw, 60px); }
.cs-slides { display: grid; gap: 20px; }
.cs-slide {
  display: grid; gap: clamp(24px, 4vw, 56px); align-items: center;
  padding: clamp(24px, 4vw, 52px); border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-md);
}
@media (min-width: 860px) { .cs-slide { grid-template-columns: 1fr 1fr; } }
.cs-n { display: block; font-family: var(--display); font-size: clamp(3.4rem, 8vw, 6.5rem); font-weight: 300; font-stretch: 80%; line-height: 0.9; color: var(--accent-text); }
.cs-copy h3 { margin-top: 14px; font-size: clamp(1.8rem, 3.6vw, 2.8rem); letter-spacing: -0.04em; }
.cs-copy p { margin-top: 14px; color: var(--muted); font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); max-width: 34rem; }
.cs-art {
  position: relative; display: flex; flex-direction: column; gap: 12px; justify-content: center;
  min-height: 300px; padding: clamp(20px, 3vw, 36px); border-radius: var(--r-md); overflow: hidden;
  background: radial-gradient(120% 120% at 80% 120%, #3A1C2E 0%, var(--night-2) 60%, var(--night) 100%); color: #F1F5F9;
  perspective: 700px;
}
.cs-art [data-c] { transform-origin: 50% 0; }
.bub { max-width: 80%; padding: 12px 16px; border-radius: 18px; font-size: 0.975rem; line-height: 1.35; }
.bub-in { align-self: flex-start; background: rgba(255, 255, 255, 0.1); border-bottom-left-radius: 6px; }
.bub-out { align-self: flex-end; background: linear-gradient(180deg, #FB8A3C, var(--sun)); color: #1A0E05; font-weight: 600; border-bottom-right-radius: 6px; }
.cs-chip {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  background: rgba(253, 181, 45, 0.14); color: #FDE7B0; font-size: 0.875rem; font-weight: 600;
}
.cs-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.2); }
.cs-design { align-items: center; flex-direction: row; gap: 22px; flex-wrap: wrap; }
.cs-phone {
  display: grid; gap: 9px; align-content: start; width: 150px; aspect-ratio: 9 / 18; padding: 22px 12px 12px;
  border: 2px solid rgba(255, 255, 255, 0.22); border-radius: 26px; background: rgba(255, 255, 255, 0.04);
}
.cs-phone i { display: block; border-radius: 6px; background: rgba(255, 255, 255, 0.16); }
.cs-phone .w-bar { height: 10px; width: 55%; }
.cs-phone .w-hero { height: 74px; background: linear-gradient(140deg, #FDB52D, #E8452C); }
.cs-phone .w-line { height: 8px; }
.cs-phone .w-short { width: 64%; }
.cs-phone .w-btn { height: 22px; width: 60%; border-radius: 999px; background: var(--sun); }
.cs-phone .w-cards { height: 52px; background: rgba(255, 255, 255, 0.09); }
.cs-checks { display: grid; gap: 12px; }
.cs-checks li { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.07); font-weight: 600; }
.cs-checks li::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 5px rgba(74, 222, 128, 0.2); }
.cs-browser { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-radius: 16px; background: #F8FAFC; color: #0F172A; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.6); }
.cs-url { font-weight: 650; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.cs-live { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: #DCFCE7; color: #166534; font-size: 0.8125rem; font-weight: 700; }
.cs-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #16A34A; }
.cs-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 44px; }
.cs-tabs { display: flex; gap: 8px; }
.cs-arrow, .cs-tab {
  display: grid; place-items: center; min-width: 48px; height: 48px; padding: 0 12px; border: 1.5px solid var(--line-strong); border-radius: 999px;
  background: var(--surface); color: var(--text); font: inherit; font-weight: 700; cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.3s var(--ease);
}
.cs-arrow:hover, .cs-tab:hover { transform: translateY(-2px); border-color: var(--sun); }
.cs-tab[aria-current] { background: var(--sun); border-color: var(--sun); color: #1A0E05; }
@media (max-width: 640px) { .cs-art { min-height: 230px; } .bub { font-size: 0.9rem; padding: 10px 14px; } .cs-phone { width: 120px; } }
@media (max-width: 420px) { .cs-tabs { gap: 4px; } .cs-arrow, .cs-tab { min-width: 44px; height: 44px; padding: 0 8px; } }
/* With JS: the slides stack in one cell, with two cards peeking behind like a deck */
.cs-on .cs-slides { position: relative; grid-template-areas: "s"; gap: 0; touch-action: pan-y; }
.cs-on .cs-slide { grid-area: s; visibility: hidden; }
.cs-on .cs-slide.is-active, .cs-on .cs-slide.is-leaving { visibility: visible; }
.cs-on .cs-slide.is-active { z-index: 2; }
.cs-on .cs-slides::before, .cs-on .cs-slides::after {
  content: ""; grid-area: s; align-self: end; height: 40px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface);
  transform: translateY(14px) scale(0.96); opacity: 0.8;
}
.cs-on .cs-slides::after { transform: translateY(28px) scale(0.92); opacity: 0.5; }

/* Particle cloak */
.cloak {
  position: relative; width: min(100%, 980px); aspect-ratio: 16 / 7; margin-top: 30px; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.8); touch-action: pan-y;
}
@media (max-width: 640px) { .cloak { aspect-ratio: 4 / 3.4; } }
.cloak-plate {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 36px); padding: 24px;
  background: radial-gradient(90% 130% at 50% 105%, #FDB52D 0%, #F26A1B 32%, #A23B3B 62%, #3A1C2E 100%);
}
@media (max-width: 640px) { .cloak-plate { flex-direction: column; } }
.cloak-g { width: clamp(84px, 16vw, 170px); height: auto; filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.35)); }
.cloak-line { font-family: var(--display); font-size: clamp(1.7rem, 4.8vw, 3.8rem); font-weight: 750; line-height: 1; letter-spacing: -0.045em; text-align: left; color: #FFF7ED; max-width: 9ch; }
.cloak-line span { color: #FDB52D; }
@media (max-width: 640px) { .cloak-line { text-align: center; } }
.cloak-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cloak-hint {
  position: absolute; left: 50%; bottom: 16px; z-index: 2; translate: -50% 0; padding: 7px 14px; border-radius: 999px;
  background: rgba(7, 11, 22, 0.7); color: #E2E8F0; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; pointer-events: none;
  transition: opacity 0.6s;
}
.cloak.is-touched .cloak-hint, .cloak-still .cloak-hint, html:not(.js) .cloak-hint { opacity: 0; }

/* Say hello: a one-line field whose message flies off as a paper plane */
.hello { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 8px; width: min(100%, 560px); margin-top: 34px; padding: 6px 6px 6px 22px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); transition: border-color 0.3s, background-color 0.3s; }
.hello:focus-within { border-color: var(--amber); background: rgba(255, 255, 255, 0.11); }
.hello input { min-width: 0; height: 52px; border: 0; background: none; color: #F8FAFC; font: inherit; font-size: 1.0625rem; outline: none; transition: transform 0.6s var(--ease), opacity 0.4s; }
.hello input:focus-visible { outline: 2px solid var(--amber); outline-offset: 6px; border-radius: 10px; }
.section-contact .btn-ghost { background: rgba(7, 11, 22, 0.5); }
.hello input::placeholder { color: rgba(226, 232, 240, 0.7); }
.hello-send { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--sun); color: #1A0E05; cursor: pointer; transition: transform 0.6s var(--ease), background-color 0.3s; }
.hello-send svg { grid-area: 1 / 1; width: 22px; height: 22px; transition: transform 0.7s var(--ease), opacity 0.3s; }
.hello-tick { opacity: 0; transform: scale(0.4); }
.hello-note { position: absolute; left: 0; right: 0; top: calc(100% + 10px); color: rgba(203, 213, 225, 0.8); font-size: 0.875rem; }
.hello.is-sent input { transform: translate(40px, -26px) rotate(-6deg); opacity: 0; }
.hello.is-sent .hello-plane { transform: translate(140px, -120px) rotate(-20deg) scale(0.6); opacity: 0; }
.hello.is-sent .hello-send { transform: rotateY(180deg); background: #4ADE80; }
.hello.is-sent .hello-tick { opacity: 1; transform: rotateY(180deg); transition-delay: 0.25s; }
.hello.is-shake { animation: shake 0.45s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.section-contact .hello + .contact-mail { margin-top: 64px; }

.still .btn-primary.btn-lg { animation: none; }

/* ---------- Round 7b: the daylight hero ---------- */
.hd {
  position: relative; isolation: isolate; overflow: clip;
  padding: clamp(118px, 15vh, 160px) 0 clamp(64px, 8vw, 110px);
  background: radial-gradient(60% 70% at 92% 0%, rgba(253, 181, 45, 0.28), transparent 70%), var(--bg);
}
.hd::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(to right, rgba(15, 23, 42, 0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(15, 23, 42, 0.06) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: radial-gradient(90% 80% at 50% 30%, #000 30%, transparent 85%); mask-image: radial-gradient(90% 80% at 50% 30%, #000 30%, transparent 85%);
}
.hd-grid { display: grid; gap: clamp(40px, 6vw, 72px); align-items: center; }
@media (min-width: 1000px) { .hd-grid { grid-template-columns: 1fr 1fr; } }
.hd-title { font-family: var(--display); font-size: clamp(2.9rem, 5.3vw, 5.2rem); font-weight: 800; line-height: 0.92; letter-spacing: -0.04em; color: var(--ink); text-wrap: initial; }
.hd-title .line { display: block; overflow: hidden; padding-bottom: 0.07em; margin-bottom: -0.07em; }
.hd-title .line-in { display: inline-block; animation: line-up 1.2s var(--ease) both; }
.hd-title .line:nth-child(2) .line-in { animation-delay: 0.12s; }
.hd-title .line:nth-child(3) .line-in { animation-delay: 0.24s; }
.hd-ring { position: relative; isolation: isolate; color: #C2410C; }
.hd-ring::after {
  content: ""; position: absolute; z-index: -1; opacity: 0.85; left: 0.02em; right: 0.12em; bottom: 0.02em; height: 0.09em; border-radius: 1em; background: var(--sun);
  transform-origin: left; animation: ring-line 1s 1s var(--ease) both;
}
@keyframes ring-line { from { transform: scaleX(0); } to { transform: none; } }
.hd-lede { margin-top: 28px; max-width: 34rem; color: var(--muted); font-size: clamp(1.0625rem, 1.4vw, 1.25rem); animation: rise 1.1s 0.45s var(--ease) both; }
.hd .actions { margin-top: 36px; animation: rise 1.1s 0.6s var(--ease) both; }
.btn-line { border: 1.5px solid var(--ink); color: var(--ink); background: transparent; }
.btn-line:hover { background: var(--ink); color: var(--light); }
.hd-proof { display: flex; flex-wrap: wrap; gap: 18px 34px; margin-top: 48px; color: var(--muted); font-size: 0.9375rem; animation: rise 1.1s 0.75s var(--ease) both; }
.hd-proof li { padding-left: 16px; border-left: 1px solid var(--line-strong); }
.hd-proof b { display: block; font-family: var(--display); font-size: 1.75rem; font-weight: 750; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); }
.hd-stage.cloak {
  width: 100%; margin-top: 0; aspect-ratio: 5 / 4.2; border-radius: 28px;
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg);
  animation: rise 1.2s 0.3s var(--ease) both;
}
:where(.hd-stage) { --ac: #0E7490; --tint: #ECFEFF; --deep: #164E63; }
.hd-plate { display: block; padding: 0; background: radial-gradient(80% 70% at 75% 100%, color-mix(in srgb, var(--ac) 40%, transparent), transparent 70%), linear-gradient(160deg, #101935, #070B16); }
.hd-plate .bl-browser { position: absolute; left: 6%; top: 8%; width: 80%; }
.hd-plate .bl-phone { right: 5%; bottom: 6%; width: 22%; }
.hd-stage .cloak-hint { background: rgba(15, 23, 42, 0.82); }
@media (max-width: 640px) { .hd-stage.cloak { aspect-ratio: 4 / 3.7; } .hd-plate .bl-browser { width: 88%; left: 5%; } .hd-plate .bl-phone { width: 30%; } }
.still .hd-title .line-in, .still .hd-ring::after, .still .hd-lede, .still .hd .actions, .still .hd-proof, .still .hd-stage.cloak { animation: none; }

/* =====================================================================================================
   30 Oct 2026, round 8: the work leads. Hero ring of real sites, stacking case studies, page transitions,
   calm-motion switch. Loud type, quiet chrome: no grid lines, no glow blobs, no badges.
   ===================================================================================================== */
:root { --paper: #F4EFE7; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, ui-serif, serif; }

/* hero */
.hx { position: relative; isolation: isolate; overflow: clip; padding: clamp(120px, 16vh, 168px) 0 clamp(56px, 7vw, 96px); background: var(--paper); }
.hx::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 34%; width: max(1300px, 120vw); aspect-ratio: 1; translate: -50% 0; pointer-events: none;
  background: conic-gradient(from 200deg, rgba(242, 106, 27, 0.22), rgba(253, 181, 45, 0.26), rgba(244, 239, 231, 0) 34%, rgba(214, 120, 160, 0.16) 60%, rgba(242, 106, 27, 0.22));
  border-radius: 50%; filter: blur(70px); opacity: 0.85; animation: hx-mesh 26s linear infinite;
}
@keyframes hx-mesh { to { rotate: 360deg; } }
.hx-title {
  margin: 0; font-family: var(--display); font-weight: 760; font-stretch: 80%; font-size: clamp(2.9rem, 9.4vw, 9.6rem);
  line-height: 0.9; letter-spacing: -0.032em; color: var(--ink); text-wrap: balance;
}
.hx-title .line { display: block; overflow: clip; padding-bottom: 0.16em; margin-bottom: -0.1em; }
.hx-title .line-in { display: inline-block; animation: line-up 1.2s var(--ease) both; }
.hx-title .line:nth-child(2) .line-in { animation-delay: 0.12s; }
.hx-title em { font-family: var(--serif); font-style: italic; font-weight: 400; font-stretch: 100%; letter-spacing: -0.02em; color: #C2410C; }
.hx-foot { display: grid; gap: 22px; align-items: end; margin-top: clamp(8px, 2vw, 24px); }
.hx-lede { margin: 0; max-width: 46ch; font-size: clamp(1.02rem, 1.25vw, 1.15rem); line-height: 1.6; color: #3B3A44; }
.hx-foot .actions { margin: 0; }
.hx-price { margin: 0; font-size: 0.92rem; color: #54525C; }
.hx-price b { color: var(--ink); }
.hx-price span { margin: 0 0.6em; color: #8C8890; }
@media (min-width: 1000px) { .hx-foot { grid-template-columns: 1.2fr auto; } .hx-price { grid-column: 1 / -1; } }

/* the ring: eight panels on a cylinder, front panel full size; fx.js spins it, the panels away from you dim */
.ring {
  --w: clamp(220px, 27vw, 400px); --r: calc(var(--w) * 1.42);
  position: relative; height: calc(var(--w) * 0.625 + clamp(110px, 11vw, 170px)); margin-top: clamp(-30px, -2vw, -10px);
  perspective: 2600px; perspective-origin: 50% 10%; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.ring-track {
  position: absolute; left: 50%; top: clamp(40px, 5vw, 70px); width: var(--w); aspect-ratio: 16 / 10; margin: 0 0 0 calc(var(--w) / -2); padding: 0;
  list-style: none; transform-style: preserve-3d; transform: translateZ(calc(var(--r) * -1)) rotateX(-6deg) rotateY(var(--rot, 0deg));
}
.ring-item { position: absolute; inset: 0; transform: rotateY(var(--a)) translateZ(var(--r)); opacity: calc(0.18 + 0.82 * var(--face, 1)); }
.ring-item:nth-child(1) { --a: 0deg; } .ring-item:nth-child(2) { --a: 45deg; } .ring-item:nth-child(3) { --a: 90deg; } .ring-item:nth-child(4) { --a: 135deg; }
.ring-item:nth-child(5) { --a: 180deg; } .ring-item:nth-child(6) { --a: 225deg; } .ring-item:nth-child(7) { --a: 270deg; } .ring-item:nth-child(8) { --a: 315deg; }
.ring-item a, .ring-face { display: block; height: 100%; border-radius: clamp(10px, 1.2vw, 16px); overflow: hidden; background: #E8E1D6;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 30px 60px -28px rgba(40, 24, 10, 0.55), 0 0 0 1px rgba(15, 23, 42, 0.08); -webkit-user-drag: none; }
.ring-item img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; pointer-events: none; }
.ring-item a:focus-visible { outline: 3px solid var(--sun); outline-offset: 4px; }
.ring::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: min(90%, 900px); height: 50px; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(60, 30, 10, 0.22), transparent); pointer-events: none; }
.ring-hint { position: absolute; left: 50%; bottom: -6px; translate: -50% 0; margin: 0; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: #5F5C66; transition: opacity 0.6s; }
.ring.is-touched .ring-hint { opacity: 0; }
.ring.ring-on { cursor: grab; } .ring.is-dragging { cursor: grabbing; }
@media (max-width: 640px) { .ring { --w: 64vw; --r: calc(var(--w) * 1.3); } }

/* work: sticky case cards that stack */
.work { background: var(--paper); padding-bottom: clamp(60px, 8vw, 120px); }
.work-head { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 64px); }
.work-head h2 { margin: 0; max-width: 15ch; font-family: var(--display); font-weight: 760; font-stretch: 82%; font-size: clamp(2.4rem, 6vw, 5.6rem); line-height: 0.92; letter-spacing: -0.04em; }
.work-head p { margin: 0; max-width: 52ch; color: #4A4852; font-size: 1.05rem; line-height: 1.6; }
@media (min-width: 1000px) { .work-head { grid-template-columns: 1.4fr 1fr; align-items: end; } }
.cases { list-style: none; margin: 0 auto; padding: 0; width: min(100% - 2 * var(--gutter), 1320px); }
.case { position: sticky; top: calc(84px + var(--i, 0) * 16px); margin-bottom: clamp(28px, 6vh, 64px); }
.case:nth-child(2) { --i: 1; } .case:nth-child(3) { --i: 2; } .case:nth-child(4) { --i: 3; }
.case-in {
  display: grid; gap: clamp(22px, 3.4vw, 56px); align-items: center; padding: clamp(22px, 3.6vw, 56px);
  border-radius: clamp(20px, 2.4vw, 32px); background: var(--case-bg); color: var(--case-ink); transform-origin: 50% 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 -24px 60px -40px rgba(0, 0, 0, 0.5), 0 40px 90px -50px rgba(0, 0, 0, 0.55);
}
@media (min-width: 900px) { .case-in { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); min-height: min(76vh, 660px); } }
.case-plumber { --case-bg: #0D3B44; --case-ink: #F3EDE2; --case-ac: #FF9A4D; }
.case-bakery { --case-bg: #EADCC4; --case-ink: #2B1D12; --case-ac: #3F6B3A; }
.case-physio { --case-bg: #DCEDE6; --case-ink: #0F3A33; --case-ac: #B4472A; }
.case-salon { --case-bg: #3A0F17; --case-ink: #F6E9E4; --case-ac: #F2B8B5; }
.case-n { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: 0.9rem; font-weight: 600; }
.case-n span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid currentColor; font-variant-numeric: tabular-nums; font-size: 0.85rem; }
.case h3 { margin: 0 0 16px; font-family: var(--display); font-weight: 740; font-stretch: 84%; font-size: clamp(2rem, 3.8vw, 3.6rem); line-height: 0.95; letter-spacing: -0.035em; color: inherit; }
.case-copy > p:not(.case-n) { margin: 0 0 20px; max-width: 42ch; line-height: 1.6; }
.case-points { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; padding: 0; list-style: none; }
.case-points li { padding: 7px 13px; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 34%, transparent); font-size: 0.86rem; }
.case-link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--case-ac);
  color: color-mix(in srgb, var(--case-bg) 70%, #000); font-weight: 700; text-decoration: none; transition: gap 0.35s var(--ease);
}
.case-link::after { content: "\2197"; font-size: 1.1em; }
.case-link:hover { gap: 16px; }
.case-link:focus-visible { outline: 3px solid var(--case-ink); outline-offset: 3px; }
.case-shot { display: block; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.12); transition: transform 0.6s var(--ease); }
.case-shot:hover { transform: translateY(-4px) rotate(-0.4deg); }
.case-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: #EFEDEA; color: #4F4C54; font-size: 12px; }
.case-bar i { width: 10px; height: 10px; border-radius: 50%; background: #D4D0CB; }
.case-bar span { margin-left: 12px; padding: 3px 12px; border-radius: 999px; background: #fff; }
.case-view { display: block; aspect-ratio: 16 / 10.4; overflow: hidden; container-type: size; }
.case-view img { display: block; width: 100%; height: auto; transition: transform 10s cubic-bezier(0.45, 0, 0.25, 1); }
.case-shot:hover .case-view img, .case.is-gliding .case-view img { transform: translateY(calc(-100% + 100cqh)); }
.work-end { display: grid; justify-items: start; gap: 24px; margin-top: clamp(40px, 6vw, 80px); }
.work-big { margin: 0; font-family: var(--display); font-weight: 760; font-stretch: 80%; font-size: clamp(2.6rem, 7vw, 6.4rem); line-height: 0.9; letter-spacing: -0.045em; }
@media (max-width: 899px) { .case { top: calc(70px + var(--i, 0) * 10px); } }

/* page to page: the old page sinks back, the new one rises over it */
@keyframes vt-out { to { opacity: 0; transform: scale(0.965); filter: blur(3px); } }
@keyframes vt-in { from { clip-path: inset(100% 0 0 0 round 28px); } to { clip-path: inset(0 0 0 0 round 0); } }
html:not(.still)::view-transition-old(root) { animation: vt-out 0.55s cubic-bezier(0.55, 0, 1, 0.45) both; }
html:not(.still)::view-transition-new(root) { animation: vt-in 0.75s 0.05s var(--ease) both; }
.still::view-transition-old(root), .still::view-transition-new(root) { animation-duration: 0.3s; }

/* calm motion: everything still fades, nothing travels */
@keyframes calm-in { from { opacity: 0; } }
.still .hx::before { animation: none; }
.still .line-in { animation: calm-in 0.9s ease both !important; }
.still .case-view img { transition-duration: 4s; }

/* Animations switch (footer) and the one-time note */
.motion-switch {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 14px; padding: 0 16px 0 10px; border: 1px solid currentColor;
  border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 0.85rem; cursor: pointer;
}
.motion-switch span { position: relative; width: 34px; height: 20px; border-radius: 999px; background: rgba(127, 127, 127, 0.35); transition: background 0.3s; }
.motion-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: currentColor; transition: transform 0.3s var(--ease); }
.motion-switch[aria-pressed="true"] span { background: var(--sun); }
.motion-switch[aria-pressed="true"] span::after { transform: translateX(14px); background: #fff; }
.motion-switch:focus-visible, .motion-note button:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.motion-note {
  position: fixed; z-index: 60; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  max-width: min(440px, calc(100vw - 32px)); padding: 14px 14px 14px 18px; border-radius: 18px; background: rgba(11, 16, 32, 0.95); color: #F1ECE4;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.6); animation: calm-in 0.6s 1.2s ease both;
}
.motion-note p { flex: 1 1 200px; margin: 0; font-size: 0.88rem; line-height: 1.45; }
.motion-note .motion-on { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--sun); color: #1A0E05; font: inherit; font-weight: 700; font-size: 0.88rem; cursor: pointer; }
.motion-note .motion-x { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 1.4rem; cursor: pointer; }

/* ---------- Round 8: inner pages in the same paper world. App pages keep their colour in a stage behind the phones. ---------- */
.px-title { font-family: var(--display); font-weight: 760; font-stretch: 82%; letter-spacing: -0.035em; line-height: 0.92; text-wrap: balance; }
.px-title .line { display: block; overflow: clip; padding-bottom: 0.16em; margin-bottom: -0.1em; }
.px-title .line-in { display: inline-block; animation: line-up 1.2s var(--ease) both; }
.px-title .line:nth-child(2) .line-in { animation-delay: 0.12s; }
.px-title em { font-family: var(--serif); font-style: italic; font-weight: 400; font-stretch: 100%; letter-spacing: -0.015em; color: #C2410C; }

.app-hero { color: var(--ink); }
.app-hero-bg { background: var(--paper); }
.app-hero-bg .ah-glow { display: none; }
.app-hero h1 { font-family: var(--display); font-weight: 760; font-stretch: 80%; letter-spacing: -0.035em; }
.app-hero-line { color: color-mix(in srgb, var(--app-a) 78%, #000); }
.app-mealkin .app-hero-line { color: var(--app-accent); }
.app-hero-pitch { color: #3B3A44; opacity: 1; }
.app-hero .status-soon { background: rgba(15, 23, 42, 0.07); }
.app-hero .notify-link, .app-mealkin .app-hero .notify-link { opacity: 1; text-decoration-color: rgba(15, 23, 42, 0.35); }
.app-hero-icon { box-shadow: 0 20px 50px -18px rgba(40, 24, 10, 0.45), 0 0 0 1px rgba(15, 23, 42, 0.08); }
.app-hero-phones { isolation: isolate; }
.app-hero-phones::before {
  content: ""; position: absolute; z-index: -1; inset: 8% 4% 0; border-radius: clamp(28px, 4vw, 48px);
  background: radial-gradient(80% 60% at 70% 100%, var(--app-glow), transparent 70%), linear-gradient(160deg, var(--app-a), var(--app-b));
  box-shadow: 0 50px 90px -50px rgba(40, 24, 10, 0.6);
}
.app-mealkin .app-hero-phones::before { box-shadow: 0 50px 90px -50px rgba(40, 24, 10, 0.4), 0 0 0 1px rgba(36, 87, 63, 0.15); }

/* websites page: the deck of real sites */
.web-hero h1.px-title { font-size: clamp(3rem, 7vw, 6.4rem); line-height: 0.9; letter-spacing: -0.035em; }
.px-fan { position: relative; aspect-ratio: 16 / 12; width: 100%; }
.px-fan img {
  position: absolute; left: 6%; top: 10%; width: 82%; height: auto; border-radius: 14px; background: #E8E1D6;
  box-shadow: 0 30px 60px -28px rgba(40, 24, 10, 0.55), 0 0 0 1px rgba(15, 23, 42, 0.08);
  transform-origin: 50% 120%; transition: transform 0.8s var(--ease), translate 0.8s var(--ease); animation: fan-in 1.2s var(--ease) both;
}
.px-fan img:nth-child(1) { transform: rotate(-9deg); animation-delay: 0.1s; }
.px-fan img:nth-child(2) { transform: rotate(-4deg); animation-delay: 0.2s; }
.px-fan img:nth-child(3) { transform: rotate(1.5deg); animation-delay: 0.3s; }
.px-fan img:nth-child(4) { transform: rotate(6deg); animation-delay: 0.4s; }
.px-fan:hover img:nth-child(1) { transform: rotate(-16deg); translate: -6% -4%; }
.px-fan:hover img:nth-child(2) { transform: rotate(-7deg); translate: -2% -2%; }
.px-fan:hover img:nth-child(3) { transform: rotate(3deg); translate: 2% -1%; }
.px-fan:hover img:nth-child(4) { transform: rotate(11deg); translate: 6% 2%; }
@keyframes fan-in { from { opacity: 0; translate: 0 18%; } }
.still .px-fan img { animation-name: calm-in; }

/* standards: paper hero, the dark header-spec card stays as the one dark object */
.std-hero { color: var(--ink); background: var(--paper); }
.std-hero h1.px-title { font-size: clamp(2.8rem, 6.2vw, 5.4rem); }
.std-lede { color: #3B3A44; }
.std-hero .btn-ghost { color: var(--ink); }
.std-spec { box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.1), 0 40px 80px -30px rgba(40, 24, 10, 0.55); }

/* one paper for every page */
:root { --bg: #F4EFE7; }
html { background: var(--bg); }

/* type system: Bricolage narrowed a touch and given room to breathe (the old -0.05em made letters collide) */
h1, h2 { font-stretch: 84%; font-weight: 740; letter-spacing: -0.028em; }
.about-copy h2, .contact h2, .section-head h2, .app-hero h1, .web-hero h1, .std-hero h1, .notfound h1 { letter-spacing: -0.03em; }
.stat-row dt, .pkg-price, .std-nums b, .sc-big { letter-spacing: -0.03em; }

/* ---------- Round 8 craft layer: intro curtain, cursor, rolling nav, footer destination, grain ---------- */
/* intro: once per session on the home page. Paper curtain with the name and a sunrise line, then it lifts. Pure CSS,
   so it can never get stuck: it is over at 1.9s whatever happens. */
.intro body::before, .intro body::after { content: ""; position: fixed; z-index: 200; pointer-events: none; }
.intro body::before {
  content: "Galix Studios"; inset: 0; display: grid; place-items: center; background: #0F172A; color: #F4EFE7;
  font-family: var(--display); font-weight: 760; font-stretch: 80%; font-size: clamp(2.6rem, 9vw, 8rem); letter-spacing: -0.03em;
  animation: intro-word 0.7s 0.1s cubic-bezier(0.16, 1, 0.3, 1) both, intro-lift 0.9s 1s cubic-bezier(0.87, 0, 0.13, 1) forwards;
}
.intro body::after {
  left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, #F26A1B, #FDB52D); transform-origin: 0 50%;
  animation: intro-bar 0.9s 0.1s cubic-bezier(0.65, 0, 0.35, 1) both, intro-gone 0.3s 1s forwards;
}
@keyframes intro-word { from { color: transparent; letter-spacing: 0.1em; } }
@keyframes intro-lift { to { transform: translateY(-100%); border-radius: 0 0 50% 50% / 0 0 18% 18%; visibility: hidden; } }
@keyframes intro-bar { from { transform: scaleX(0); } }
@keyframes intro-gone { to { opacity: 0; visibility: hidden; } }
.intro .hx-title .line-in { animation-delay: 1.35s; }
.intro .hx-title .line:nth-child(2) .line-in { animation-delay: 1.47s; }
.intro .ring { animation: ring-in 1.4s 1.45s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes ring-in { from { opacity: 0; transform: translateY(60px) scale(0.92); } }

/* cursor */
.cursor { position: fixed; left: 0; top: 0; z-index: 150; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
.cursor.is-on { opacity: 1; }
.cursor span {
  position: absolute; left: -5px; top: -5px; display: grid; place-items: center; width: 10px; height: 10px; border-radius: 999px;
  background: var(--sun); color: transparent; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden;
  transition: width 0.45s var(--ease), height 0.45s var(--ease), left 0.45s var(--ease), top 0.45s var(--ease), background 0.3s, color 0.2s;
}
.cursor.is-hot span { left: -18px; top: -18px; width: 36px; height: 36px; background: rgba(242, 106, 27, 0.18); }
.cursor.is-label span { left: -38px; top: -38px; width: 76px; height: 76px; background: #0F172A; color: #F4EFE7; transition-delay: 0s, 0s, 0s, 0s, 0s, 0.12s; }
[data-cursor] { cursor: none; }
[data-cursor] a { cursor: none; }

/* nav labels roll on hover */
.nav a .roll { display: inline-block; overflow: hidden; vertical-align: top; line-height: 1.3; }
.nav a .roll-in { position: relative; display: block; transition: transform 0.45s var(--ease); }
.nav a .roll-in::after { content: attr(data-text); position: absolute; left: 0; top: 100%; }
.nav a:hover .roll-in, .nav a:focus-visible .roll-in { transform: translateY(-100%); }
.still .nav a:hover .roll-in, .still .nav a:focus-visible .roll-in { transform: none; }
/* footer destination */
.site-footer .foot-cta {
  display: inline-block; color: #F4EFE7; text-decoration: none; font-family: var(--display); font-weight: 760; font-stretch: 78%;
  font-size: clamp(3rem, 11vw, 10rem); line-height: 0.9; letter-spacing: -0.02em; transition: font-stretch 0.6s var(--ease), color 0.3s;
}
.site-footer .foot-cta:hover, .site-footer .foot-cta:focus-visible { font-stretch: 100%; color: #FDB52D; text-decoration: none; }
.foot-cta:focus-visible { outline: 3px solid var(--sun); outline-offset: 6px; }
.site-footer { padding-top: 0; }

/* case titles widen on hover: Bricolage's width axis doing the work */
.case h3 { transition: font-stretch 0.6s var(--ease); }
.case-in:hover h3 { font-stretch: 100%; }

/* grain over the paper (static, multiply) */
html::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (max-width: 640px) { .hx-title { font-size: 12.4vw; } }

/* =====================================================================================================
   30 Oct 2026, round 9 (Josh: "realistic and worth $100,000", not animated). Real work, shown still and sharp.
   Motion is limited to smooth scrolling, soft fades and slow image settles. No gimmicks.
   ===================================================================================================== */
.hx { display: flex; flex-direction: column; }
.hx::before { animation: none; opacity: 0.55; }
.hx-foot { order: 2; margin-top: clamp(26px, 3vw, 40px); }
.hx-show { order: 3; position: relative; margin-top: clamp(44px, 6vw, 84px); padding-bottom: clamp(20px, 4vw, 60px); }
.hx-desk {
  display: block; width: min(100%, 1060px); border-radius: 14px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.1), 0 50px 100px -50px rgba(40, 24, 10, 0.55), 0 18px 40px -24px rgba(40, 24, 10, 0.3);
  animation: settle 1.4s 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hx-desk img { display: block; width: 100%; height: auto; }
.hx-phone {
  position: absolute; right: 0; bottom: 0; width: clamp(150px, 21vw, 290px); padding: 9px; border-radius: 38px; background: #111;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 40px 80px -30px rgba(20, 12, 5, 0.6);
  animation: settle 1.4s 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hx-phone img { display: block; width: 100%; height: auto; border-radius: 30px; }
.hx-desk:focus-visible, .hx-phone:focus-visible { outline: 3px solid var(--sun); outline-offset: 6px; }
@keyframes settle { from { opacity: 0; transform: translateY(28px); } }
@media (max-width: 640px) { .hx-show { padding-bottom: 40px; } .hx-desk { width: 86%; } .hx-phone { width: 34%; padding: 5px; border-radius: 22px; } .hx-phone img { border-radius: 18px; } }
.still .hx-desk, .still .hx-phone { animation-name: calm-in; }

/* manifesto: a quiet statement, no blur trick */
.manifesto.reveal { color: var(--ink); }

/* how it works: four numbered steps on hairlines, the drawings gone */
.steps-list .cs-art, .steps-list .cs-nav, .steps-list + .cs-nav { display: none !important; }
.steps-list .cs-slides { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: step; }
@media (min-width: 900px) { .steps-list .cs-slides { grid-template-columns: repeat(4, 1fr); } }
.steps-list .cs-slide { display: block; padding: 28px 28px 32px 0; border-top: 1px solid rgba(15, 23, 42, 0.16); background: none; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
@media (min-width: 900px) { .steps-list .cs-slide + .cs-slide { padding-left: 28px; border-left: 1px solid rgba(15, 23, 42, 0.1); } }
.steps-list .cs-copy { padding: 0; }
.steps-list h3 { margin: 10px 0 12px; font-size: clamp(1.5rem, 2vw, 1.9rem); }
.steps-list p { max-width: 34ch; color: #3B3A44; line-height: 1.6; }

/* page to page: a short cross-fade, nothing more */
html:not(.still)::view-transition-old(root) { animation: vt-fade-out 0.3s ease both; }
html:not(.still)::view-transition-new(root) { animation: vt-fade-in 0.4s 0.05s ease both; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }

/* the case screenshot glides slower, like someone reading */
.case-view img { transition-duration: 14s; }
.case-shot:hover { transform: none; }
.manifesto.reveal { font-weight: 500; font-stretch: 92%; letter-spacing: -0.02em; line-height: 1.14; }
.section-contact { min-height: 0; padding-bottom: clamp(80px, 10vw, 140px); }
.steps-list .cs-n { font-size: clamp(2.2rem, 3vw, 2.8rem); }

/* websites page: recent work grid */
.wk-grid { display: grid; gap: clamp(18px, 2.4vw, 32px); margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .wk-grid { grid-template-columns: 1fr 1fr; } }
.wk-card { display: grid; gap: 4px; color: var(--ink); text-decoration: none; }
.wk-card img { display: block; width: 100%; height: auto; margin-bottom: 14px; border-radius: 12px; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.1), 0 30px 60px -40px rgba(40, 24, 10, 0.5); transition: transform 0.7s var(--ease); }
.wk-card:hover img { transform: translateY(-4px); }
.wk-name { font-family: var(--display); font-weight: 700; font-stretch: 88%; font-size: 1.35rem; letter-spacing: -0.02em; }
.wk-meta { color: #54525C; font-size: 0.92rem; }
.wk-card:focus-visible { outline: 3px solid var(--sun); outline-offset: 6px; border-radius: 12px; }
.hx-show { margin-top: clamp(28px, 4vw, 56px); }
.hx { padding-top: clamp(112px, 14vh, 150px); }

/* 30 Oct 2026, smooth scrolling: the costly paint effects swapped for cheap ones (measured: ~56 -> ~80 fps at 4x CPU throttle).
   Glass blur on fixed bars re-blurs the page under them every frame; the bars are near-opaque, so the blur showed nothing. */
.btn-ghost, .header-bar, .eyebrow, .float-chip { backdrop-filter: none; -webkit-backdrop-filter: none; }
.app-mealkin .header-bar { background: rgba(9, 14, 28, 0.94); }
.float-chip { background: rgba(15, 23, 42, 0.86); }
/* reveals: fade and rise only, no blur */
.js .reveal { filter: none; transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: var(--d, 0ms); }
/* the case stack dims with a layer (scroll.js), never a filter */
.case-in { position: relative; }
.case-dim { position: absolute; inset: 0; z-index: 5; border-radius: inherit; background: #000; opacity: 0; pointer-events: none; }
/* grain: plain low opacity on its own layer, no full-screen blending */
html::after { mix-blend-mode: normal; opacity: 0.045; will-change: transform; }
/* no endless loops: an infinite animation repaints every frame even when nothing moves on purpose */
.btn-primary.btn-lg { animation: none; border-color: transparent; background: linear-gradient(180deg, #FB8A3C 0%, var(--sun) 100%); }
.pulse::after { animation: none; opacity: 0; }
.mark-halo { animation: none; filter: none; }
.show-glow { filter: none; background: radial-gradient(closest-side, var(--app-glow), transparent); }
.hx::before { filter: none; }

/* =====================================================================================================
   30 Oct 2026, the cover (Josh: "a cover page that looks awesome and not AI slop"). An editorial cover:
   the name set huge on deep ink, four real websites we designed standing in front of it like a magazine
   subject over its masthead. One entrance, then still. No glows, no gradients.
   ===================================================================================================== */
.cover {
  --cover-ink: #15120F; --cover-paper: #F4EFE7;
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100svh; min-height: max(100svh, 620px);
  background: var(--cover-ink); color: var(--cover-paper);
}
.cover-top {
  display: flex; justify-content: space-between; gap: 24px;
  padding-top: clamp(96px, 13vh, 128px);
  font-size: 0.9375rem; letter-spacing: 0.01em; color: rgba(244, 239, 231, 0.72);
}
.cover-top p { margin: 0; }
.cover-mark {
  margin: clamp(4px, 1vh, 16px) 0 0; overflow: hidden; text-align: center;
  font-family: var(--display, inherit); font-weight: 800; font-stretch: 78%;
  font-size: clamp(7rem, 33vw, 40rem); line-height: 0.82; letter-spacing: -0.055em;
  color: var(--cover-paper);
}
.cover-mark span { display: inline-block; padding-bottom: 0.04em; }
.cover-phones {
  position: absolute; left: 50%; bottom: 0; z-index: 2; translate: -50% 0;
  display: flex; align-items: flex-end; justify-content: center; gap: clamp(14px, 2.2vw, 36px);
  width: min(100% - 32px, 1240px); margin: 0; padding: 0; list-style: none;
}
.cover-phones li { flex: 0 1 clamp(130px, 18vw, 262px); margin-bottom: calc(var(--lift, 0px) - clamp(110px, 17vh, 210px)); }
.cover-phones li:nth-child(1) { --lift: 0px; }
.cover-phones li:nth-child(2) { --lift: clamp(24px, 6vh, 64px); }
.cover-phones li:nth-child(3) { --lift: clamp(8px, 2.5vh, 28px); }
.cover-phones li:nth-child(4) { --lift: clamp(36px, 8vh, 88px); }
.cover-phones a {
  position: relative; display: block; padding: clamp(5px, 0.6vw, 9px); border-radius: clamp(24px, 2.6vw, 40px);
  background: #0A0908; color: inherit; text-decoration: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset, 0 50px 80px -30px rgba(0, 0, 0, 0.75);
  transition: transform 0.6s var(--ease);
}
.cover-phones img { display: block; width: 100%; height: auto; border-radius: clamp(19px, 2.1vw, 32px); }
.cover-phones a span {
  position: absolute; left: 0; right: 0; bottom: 100%; padding-bottom: 12px; text-align: center;
  font-size: 0.8125rem; letter-spacing: 0.02em; color: rgba(244, 239, 231, 0.8);
  opacity: 0; translate: 0 6px; transition: opacity 0.4s, translate 0.4s var(--ease);
}
.cover-phones a:hover, .cover-phones a:focus-visible { transform: translateY(-10px); }
.cover-phones a:hover span, .cover-phones a:focus-visible span { opacity: 1; translate: 0 0; }
.cover-phones a:focus-visible { outline: 3px solid var(--sun); outline-offset: 6px; }
.cover-down {
  position: absolute; left: max(16px, (100% - 1240px) / 2); bottom: 28px; z-index: 3;
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(244, 239, 231, 0.75); text-decoration: none;
}
.cover-down::before { content: ""; width: 36px; height: 1px; background: currentColor; }
.cover-down:hover { color: var(--cover-paper); }
@media (max-width: 1100px) { .cover-down { display: none; } }
@media (max-width: 720px) {
  .cover-top { flex-direction: column; gap: 2px; }
  .cover-phones li:nth-child(n+4) { display: none; }
  .cover-phones li { flex-basis: 30vw; }
}
/* the entrance: the name rises out of its line, then the phones set down one by one */
html:not(.still) .cover-mark span { animation: cover-rise 1.3s 0.1s cubic-bezier(0.16, 1, 0.3, 1) both; }
html:not(.still) .cover-top { animation: calm-in 1s 0.5s ease both; }
html:not(.still) .cover-phones li { animation: cover-set 1.4s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(0.45s + var(--n, 0) * 0.12s); }
.cover-phones li:nth-child(2) { --n: 1; } .cover-phones li:nth-child(3) { --n: 2; } .cover-phones li:nth-child(4) { --n: 3; }
.still .cover-mark span, .still .cover-phones li { animation: calm-in 0.8s ease both; }
@keyframes cover-rise { from { transform: translateY(100%); } }
@keyframes cover-set { from { opacity: 0; transform: translateY(80px); } }
.cover-phones li, .cover-mark { translate: 0 var(--py, 0px); }
/* cover, pass 2: a bigger name that is never clipped; on phones the cover sizes to its content */
.cover-mark { font-size: min(52vw, 40rem); line-height: 0.9; }
.cover-mark span { padding-bottom: 0.1em; }
@media (max-width: 720px) {
  .cover { min-height: 0; }
  .cover-mark { margin-top: 18px; }
  .cover-phones { position: relative; left: auto; translate: none; width: auto; margin: -9vw 12px 0; gap: 10px; }
  .cover-phones li { flex: 0 1 31vw; margin-bottom: calc(var(--lift, 0px) - 70px); }
  .cover-phones li:nth-child(2) { --lift: 34px; } .cover-phones li:nth-child(3) { --lift: 12px; }
}
/* cover, pass 3: on wide screens the name stays readable, the phones only overlap its foot */
.cover-mark { font-size: min(36vw, 62vh); letter-spacing: -0.035em; }
@media (min-width: 721px) {
  .cover-phones li:nth-child(2) { --lift: clamp(16px, 4.5vh, 44px); }
  .cover-phones li:nth-child(3) { --lift: clamp(6px, 1.8vh, 16px); }
  .cover-phones li:nth-child(4) { --lift: clamp(22px, 6vh, 56px); }
}
@media (max-width: 720px) { .cover-mark { font-size: 52vw; } }
/* cover, pass 4: everything in flow. The name sits in a box tall enough for its glyphs (no flat cut), the phones
   tuck under only its foot, and the cover is one screen tall, cropping the phones at its bottom edge */
.cover { --mark: min(31vw, 52svh); height: max(100svh, 620px); min-height: 0; }
.cover-mark { font-size: var(--mark); line-height: 1; letter-spacing: -0.035em; margin-top: 0; }
.cover-mark span { padding-bottom: 0; }
.cover-phones {
  position: relative; left: auto; bottom: auto; translate: none;
  align-items: flex-start; width: min(100% - 32px, 1240px); margin: calc(var(--mark) * -0.3) auto 0;
}
.cover-phones li { margin: var(--drop, 0px) 0 0; }
.cover-phones li:nth-child(1) { --drop: clamp(20px, 5vh, 56px); }
.cover-phones li:nth-child(2) { --drop: 0px; }
.cover-phones li:nth-child(3) { --drop: clamp(12px, 3vh, 34px); }
.cover-phones li:nth-child(4) { --drop: clamp(30px, 7vh, 72px); }
@media (max-width: 720px) {
  .cover { --mark: 52vw; height: auto; padding-bottom: 0; }
  .cover-mark { margin-top: 10px; }
  .cover-phones { margin: calc(var(--mark) * -0.22) 12px 0; width: auto; max-height: 300px; overflow: hidden; }
  .cover-phones li { flex: 0 1 31vw; }
  .cover-phones li:nth-child(1) { --drop: 30px; } .cover-phones li:nth-child(3) { --drop: 14px; }
}
.cover-phones a span { left: 50%; right: auto; bottom: calc(100% + 10px); padding: 6px 12px; translate: -50% 6px; white-space: nowrap; border-radius: 999px; background: var(--cover-ink); color: var(--cover-paper); box-shadow: 0 0 0 1px rgba(244, 239, 231, 0.18); }
.cover-phones a:hover span, .cover-phones a:focus-visible span { translate: -50% 0; }
@media (max-width: 720px) { .cover-phones { max-height: 236px; } }

/* 30 Oct 2026, review fixes: phone menu, 44px tap targets, a founding-client note with some weight */
.nav-toggle { display: none; }
.header-bar { position: relative; }
@media (max-width: 640px) {
  .nav.has-menu { display: flex; align-items: center; }
  .nav.has-menu ul { display: none; }
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px;
    background: #F8FAFC; color: var(--ink); font: 600 0.9375rem/1 var(--font, inherit); cursor: pointer;
  }
  .nav-toggle span { position: relative; width: 14px; height: 2px; background: currentColor; transition: background-color 0.2s; }
  .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 14px; height: 2px; background: currentColor; transition: transform 0.25s var(--ease); }
  .nav-toggle span::before { top: -5px; } .nav-toggle span::after { top: 5px; }
  .nav-open .nav-toggle span { background: transparent; }
  .nav-open .nav-toggle span::before { transform: translateY(5px) rotate(45deg); }
  .nav-open .nav-toggle span::after { transform: translateY(-5px) rotate(-45deg); }
  .nav-toggle:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
  .nav-open .nav.has-menu ul {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 8px; border-radius: 24px; background: rgba(11, 16, 32, 0.98); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.6);
    animation: calm-in 0.2s ease both;
  }
  .nav-open .nav.has-menu .nav-hide-sm { display: block; }
  .nav-open .nav.has-menu a { display: flex; min-height: 52px; padding: 0 18px; font-size: 1.0625rem; }
  .nav-open .nav.has-menu a.nav-cta { margin: 6px 0 0; justify-content: center; }
  .nav a { min-height: 44px; }
  .brand { padding-block: 6px; }
  .site-footer ul a { display: inline-block; padding: 12px 4px; }
  .crumb { padding-block: 10px; }
  .notify-link { display: inline-block; padding-block: 10px; }
}
.pkg-note.pkg-founding {
  max-width: 62ch; margin-inline: auto; padding: 16px 20px; border: 1px solid rgba(194, 65, 12, 0.35); border-radius: 14px;
  background: rgba(194, 65, 12, 0.06); color: var(--ink); text-align: center;
}
.pkg-founding b { color: #9A3412; }
@media (max-width: 640px) { .nav-open .nav.has-menu ul { background: #0B1020; animation: none; } }

/* =====================================================================================================
   30 Oct 2026, apps as a focal point (Josh). An opener band in the cover's language: deep ink, big type, and the
   four real app screens on phones that spread from a gathered hand into a row (scroll.js). Then the pinned
   stage gets a bigger phone, each app's name set large behind it, and a slight tilt that settles per app.
   ===================================================================================================== */
.apps-open {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(80px, 12vw, 150px) 0 clamp(70px, 9vw, 120px);
  background: #15120F; color: #F4EFE7;
}
.apps-open-head { display: grid; gap: 20px 48px; align-items: end; }
@media (min-width: 960px) { .apps-open-head { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); } }
.apps-open-title {
  margin: 0; color: #F4EFE7; font-size: clamp(2.8rem, 7.4vw, 7rem); line-height: 0.95; letter-spacing: -0.035em; font-stretch: 80%;
}
.apps-open-title .line { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.1em; }
.apps-open-title .line-in { display: inline-block; }
.apps-open-title em { font-family: var(--serif); font-style: italic; font-weight: 400; font-stretch: 100%; letter-spacing: -0.01em; color: #F08A4B; }
.apps-open-head p { margin: 0 0 0.6em; max-width: 40ch; font-size: 1.0625rem; line-height: 1.6; color: rgba(244, 239, 231, 0.74); }
.apps-deck {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px;
  width: min(100% - 32px, 1240px); margin: clamp(48px, 7vw, 96px) auto 0; padding: 0; list-style: none;
}
@media (min-width: 900px) { .apps-deck { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 40px); } }
.apps-deck li { position: relative; }
.apps-deck li:nth-child(1) { z-index: 4; } .apps-deck li:nth-child(2) { z-index: 3; } .apps-deck li:nth-child(3) { z-index: 2; }
.apps-deck a { display: block; color: inherit; text-decoration: none; }
.deck-phone {
  display: block; padding: clamp(5px, 0.6vw, 8px); border-radius: clamp(26px, 2.8vw, 38px); background: #0A0908;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset, 0 50px 80px -34px rgba(0, 0, 0, 0.8);
  transition: transform 0.6s var(--ease);
}
.deck-phone img { display: block; width: 100%; height: auto; border-radius: clamp(21px, 2.3vw, 31px); }
.apps-deck a:hover .deck-phone, .apps-deck a:focus-visible .deck-phone { transform: translateY(-10px); }
.apps-deck a:focus-visible { outline: 3px solid var(--sun); outline-offset: 8px; border-radius: 30px; }
.deck-id { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.deck-icon { flex: none; width: 44px; height: 44px; border-radius: 11px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
.deck-icon.rr-icon { display: inline-block; }
.deck-id b { display: block; font-family: var(--display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
.deck-id small { display: block; margin-top: 2px; font-size: 0.875rem; line-height: 1.35; color: rgba(244, 239, 231, 0.66); }
/* entrance: the title lines rise as the band arrives (motion.js adds is-in to .reveal) */
.apps-open-title.reveal { opacity: 1; transform: none; }
html:not(.still) .apps-open-title.reveal .line-in { transform: translateY(105%); transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); }
html:not(.still) .apps-open-title.reveal .line + .line .line-in { transition-delay: 0.1s; }
html:not(.still) .apps-open-title.reveal.is-in .line-in { transform: none; }

/* the pinned stage: larger phone, the app's name behind it, a tilt that settles each time the app changes */
@media (min-width: 960px) {
  .show-sticky { height: min(80vh, 800px); }
  .show-phone { --w: clamp(250px, 23vw, 320px); z-index: 1; }
  .show-names { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; pointer-events: none; }
  .show-names span {
    grid-area: 1 / 1; font-family: var(--display); font-weight: 800; font-stretch: 75%; letter-spacing: -0.04em; line-height: 1;
    font-size: clamp(4rem, 9vw, 9rem); color: rgba(255, 255, 255, 0.13); white-space: nowrap;
    opacity: 0; transform: translateY(30px); transition: opacity 0.7s var(--ease), transform 0.9s var(--ease);
  }
  .show-names [data-app="mealkin"] { color: rgba(40, 30, 10, 0.08); }
  .showcase.show-couchful .show-names [data-app="couchful"], .showcase.show-glazesmith .show-names [data-app="glazesmith"],
  .showcase.show-mealkin .show-names [data-app="mealkin"], .showcase.show-farlocal .show-names [data-app="farlocal"] { opacity: 1; transform: none; }
  html:not(.still) .show-phone { animation: none; }
  html:not(.still) .showcase .show-phone.tilt { animation: phone-settle 1.1s cubic-bezier(0.16, 1, 0.3, 1); }
}
@keyframes phone-settle { from { transform: perspective(1200px) rotateY(-14deg) rotateX(6deg) translateY(18px); } }
.apps-deck { position: relative; }
@media (min-width: 960px) { .show-names span { color: rgba(255, 255, 255, 0.17); } .show-names [data-app="mealkin"] { color: rgba(40, 30, 10, 0.1); } }

/* =====================================================================================================
   30 Oct 2026, cover v2 (Josh: no brown; inspiration thinkingods "Noir Mesh / Mesh Flow", spotlight, interactive hero).
   Midnight navy (the header's own colour) with the logo's sunrise rising behind the phones and a cool indigo light
   above. The lights drift slowly by transform only (no repaint) and pause when the cover is off screen.
   ===================================================================================================== */
.cover { --cover-ink: #0A0F1F; background: #0A0F1F; }
.cover-sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.cover-sky i { position: absolute; display: block; border-radius: 50%; will-change: transform; }
.cover-sky .m1 { left: -15%; right: -15%; bottom: -62%; height: 110%; background: radial-gradient(closest-side, rgba(242, 106, 27, 0.62), rgba(242, 106, 27, 0.22) 48%, transparent 72%); animation: mesh-a 24s ease-in-out infinite alternate; }
.cover-sky .m2 { right: -12%; bottom: -18%; width: 62%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(253, 181, 45, 0.34), transparent 70%); animation: mesh-b 31s ease-in-out infinite alternate; }
.cover-sky .m3 { left: -22%; top: -38%; width: 75%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(88, 96, 255, 0.3), transparent 70%); animation: mesh-c 37s ease-in-out infinite alternate; }
.cover-spot { left: 0; top: 0; width: 640px; height: 640px; margin: -320px 0 0 -320px; opacity: 0; transition: opacity 0.6s; background: radial-gradient(closest-side, rgba(255, 236, 214, 0.13), transparent 70%); }
.cover.is-lit .cover-spot { opacity: 1; }
.cover.is-off .cover-sky i { animation-play-state: paused; }
@keyframes mesh-a { to { transform: translate3d(6%, -6%, 0) scale(1.08); } }
@keyframes mesh-b { to { transform: translate3d(-18%, -10%, 0) scale(0.9); } }
@keyframes mesh-c { to { transform: translate3d(22%, 14%, 0) scale(1.15); } }
.still .cover-sky i { animation: none; }
.cover-top { color: rgba(236, 240, 255, 0.72); }
.cover-mark { color: #F6F2EA; }
/* the name: letters rise one by one */
.cover-mark b { display: inline-block; font-weight: inherit; }
html:not(.still) .cover-mark span { animation: none; }
html:not(.still) .cover-mark b { animation: cover-rise 1.25s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(0.08s + var(--k, 0) * 0.07s); }
.cover-mark b:nth-child(2) { --k: 1; } .cover-mark b:nth-child(3) { --k: 2; } .cover-mark b:nth-child(4) { --k: 3; } .cover-mark b:nth-child(5) { --k: 4; }
/* the phones lean gently towards the pointer (motion.js sets --rx/--ry on the row) */
.cover-phones { perspective: 1400px; }
.cover-phones a { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.cover-phones a:hover, .cover-phones a:focus-visible { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-12px); }
/* the apps band shares the cover's night sky, painted once */
.apps-open {
  background: radial-gradient(60% 55% at 88% 105%, rgba(242, 106, 27, 0.3), transparent 70%),
    radial-gradient(45% 45% at 6% -5%, rgba(88, 96, 255, 0.22), transparent 70%), #0A0F1F;
}
.deck-phone { background: #05070F; }
.cover-phones a { background: #05070F; }
/* cover v3: six phones, websites and our own apps alternating (Josh: "you haven't shown the apps on the cover") */
.cover-phones li { flex: 0 1 clamp(120px, 14.5vw, 210px); }
.cover-phones picture { display: block; }
@media (min-width: 721px) {
  .cover-phones li:nth-child(1) { --drop: clamp(30px, 7vh, 70px); }
  .cover-phones li:nth-child(2) { --drop: clamp(10px, 2.5vh, 26px); }
  .cover-phones li:nth-child(3) { --drop: 0px; }
  .cover-phones li:nth-child(4) { --drop: clamp(14px, 3.5vh, 36px); }
  .cover-phones li:nth-child(5) { --drop: clamp(4px, 1vh, 12px); }
  .cover-phones li:nth-child(6) { --drop: clamp(34px, 8vh, 80px); }
  .cover-phones li:nth-child(5) { --n: 4; } .cover-phones li:nth-child(6) { --n: 5; }
}
@media (max-width: 720px) { .cover-phones li:nth-child(n+4) { display: none; } }

/* round 14 - details pass (Josh: "feel and look like a million bucks")
   dusk, not brown: orange thinned over navy turns muddy, so the light now fades coral -> rose -> violet before it goes */
.cover-sky .m1 { background: radial-gradient(closest-side, rgba(255, 128, 64, 0.7), rgba(236, 72, 128, 0.34) 38%, rgba(118, 64, 220, 0.18) 58%, transparent 74%); }
.cover-sky .m2 { background: radial-gradient(closest-side, rgba(255, 92, 138, 0.28), transparent 70%); }
.apps-open {
  background: radial-gradient(60% 55% at 88% 105%, rgba(236, 72, 128, 0.26), rgba(118, 64, 220, 0.12) 45%, transparent 70%),
    radial-gradient(45% 45% at 6% -5%, rgba(88, 96, 255, 0.22), transparent 70%), #0A0F1F;
}
.section-contact { background: radial-gradient(120% 90% at 50% 120%, #4E1A55 0%, #1C1A47 40%, var(--night-2) 65%, var(--night) 100%); }

/* header: where you are */
.nav a { position: relative; }
.nav a.is-here::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--sun); }

/* work closer: the line, then a reason and the button */
.work-end { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; gap: 24px clamp(32px, 6vw, 96px); }
.work-end-side { display: grid; justify-items: start; gap: 20px; }
.work-end-side p { margin: 0; max-width: 36ch; color: var(--muted); font-size: 1.0625rem; line-height: 1.6; }
@media (max-width: 820px) { .work-end { grid-template-columns: 1fr; } }

/* what every site comes with: a ruled row under the prices */
.comes-with { list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 22px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; border-top: 1px solid rgba(15, 23, 42, 0.12); }
.comes-with li { display: grid; gap: 6px; padding-right: 12px; }
.comes-with li + li { padding-left: 20px; border-left: 1px solid rgba(15, 23, 42, 0.1); }
.comes-with b { font-family: var(--display); font-size: 1.125rem; letter-spacing: -0.01em; }
.comes-with span { color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
@media (max-width: 960px) {
  .comes-with { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .comes-with li + li { padding-left: 0; border-left: 0; }
}
@media (max-width: 480px) { .comes-with { grid-template-columns: 1fr; } }

/* footer: a proper ending - the offer, the map of the site, and the name again to close the book the cover opened */
.site-footer { position: relative; overflow: hidden; padding: 0 0 28px; background: radial-gradient(70% 60% at 50% 118%, rgba(236, 72, 128, 0.2), rgba(118, 64, 220, 0.1) 45%, transparent 75%), var(--night); }
.foot-main { width: min(100% - 2 * var(--gutter), var(--max)); margin: 0 auto; padding: clamp(64px, 9vw, 120px) 0 clamp(36px, 5vw, 56px); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.foot-lead { display: grid; justify-items: start; gap: 20px; }
.foot-status { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 6px 14px 6px 12px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; color: #E2E8F0; font-size: 0.8125rem; }
.foot-status span { width: 8px; height: 8px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18); }
.site-footer .foot-lead .foot-cta { font-size: clamp(2.8rem, 7vw, 6.4rem); }
.site-footer .foot-mail { color: #F4EFE7; font-size: clamp(1.1rem, 1.6vw, 1.35rem); text-decoration: underline; text-decoration-color: rgba(244, 239, 231, 0.3); text-underline-offset: 6px; }
.site-footer .foot-mail:hover { text-decoration-color: #FDB52D; }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.foot-h { margin: 0 0 10px; color: rgba(203, 213, 225, 0.55); font-size: 0.8125rem; }
.site-footer .foot-cols ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.site-footer .foot-cols a { display: inline-block; padding: 6px 0; text-decoration: none; }
.foot-mark { margin: 0 0 -0.16em; text-align: center; white-space: nowrap; user-select: none; pointer-events: none; font-family: var(--display); font-weight: 800; font-size: min(25vw, 23rem); line-height: 0.8; letter-spacing: -0.06em; color: rgba(244, 239, 231, 0.09); }
.foot-base { position: relative; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.08); background: var(--night); }
.foot-base p { margin: 0; }
.foot-base .foot-top { color: #F4EFE7; }
@media (max-width: 820px) {
  .foot-main { grid-template-columns: 1fr; }
  .site-footer .foot-cols a { padding: 12px 0; }
}
@media (max-width: 480px) { .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =====================================================================================================
   round 15 - front page review (Josh: "amazing and engaging ... interactive ... not AI slop")
   Transform and opacity only; nothing loops. Calm mode (html.still) shows everything at rest.
   ===================================================================================================== */
/* "ring." buzzes like a phone on a table: two short bursts, then still */
.hx-ring { display: inline-block; transform-origin: 50% 70%; }
.hx-ring.is-buzz { animation: buzz 0.9s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
@keyframes buzz {
  0%, 44%, 100% { transform: none; }
  6%, 14%, 22% { transform: translateX(-3px) rotate(-4deg); }
  10%, 18% { transform: translateX(3px) rotate(4deg); }
  52%, 60%, 68% { transform: translateX(-2px) rotate(-3deg); }
  56%, 64% { transform: translateX(2px) rotate(3deg); }
}
.still .hx-ring.is-buzz { animation: none; }

/* manifesto: the payoff in the same italic as "ring." */
.manifesto em { font-family: var(--serif); font-style: italic; font-weight: 400; font-stretch: 100%; letter-spacing: -0.01em; color: #C2410C; }
.manifesto .sw { will-change: opacity; }

/* proof: measured figures under the four example sites */
.proof { margin-top: clamp(48px, 7vw, 96px); }
.proof-lead { color: var(--muted); font-size: 0.9375rem; }
.proof-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 18px 0 0; border-top: 1px solid rgba(15, 23, 42, 0.16); }
.proof-row > div { padding: 22px 24px 4px 0; }
.proof-row > div + div { padding-left: 24px; border-left: 1px solid rgba(15, 23, 42, 0.1); }
.proof-row dt { order: 2; color: var(--muted); font-size: 0.9375rem; line-height: 1.4; }
.proof-row > div { display: flex; flex-direction: column; gap: 8px; }
.proof-row dd { margin: 0; color: var(--ink); font-size: 1rem; font-weight: 500; }
.proof-row dd b { display: inline-block; margin-right: 4px; font-size: clamp(2.6rem, 4.4vw, 4rem); font-weight: 800; font-stretch: 80%; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
@media (max-width: 820px) {
  .proof-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-row > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .proof-row > div:nth-child(n+3) { border-top: 1px solid rgba(15, 23, 42, 0.1); margin-top: 14px; }
}

/* package chooser */
.fit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 36px; }
.fit-q { font-weight: 600; color: var(--ink); }
.fit-opts { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: 999px; background: rgba(15, 23, 42, 0.06); }
.fit-opts button {
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--ink);
  font: 600 0.9375rem/1 inherit; font-family: inherit; cursor: pointer; transition: background-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.fit-opts button:hover { background: rgba(255, 255, 255, 0.7); }
.fit-opts button[aria-pressed="true"] { background: var(--ink); color: #F8FAFC; box-shadow: 0 6px 16px -8px rgba(15, 23, 42, 0.6); }
.fit-opts button:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }
.packages-mini .pkg { transition: transform 0.5s var(--ease), opacity 0.4s, box-shadow 0.5s var(--ease), border-color 0.4s; }
.packages-mini.has-fit .pkg { opacity: 0.7; }
.packages-mini.has-fit .pkg.is-fit { opacity: 1; transform: translateY(-8px); border-color: rgba(236, 72, 128, 0.45); box-shadow: 0 0 0 1px rgba(236, 72, 128, 0.35), 0 30px 60px -28px rgba(118, 64, 220, 0.45); }
/* "Your fit" is its own element (fx.js adds it): the cards' ::before is the hover spotlight, and sharing it made the badge
   fill the whole card as a dark blob whenever the pointer was over the chosen card */
.packages-mini .pkg-fit {
  position: absolute; top: -12px; left: clamp(26px, 3vw, 36px); z-index: 2; padding: 5px 11px; border-radius: 999px;
  background: var(--ink); color: #F8FAFC; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.2;
  opacity: 0; transform: translateY(4px); transition: opacity 0.3s, transform 0.4s var(--ease); pointer-events: none;
}
.packages-mini .pkg.is-fit .pkg-fit { opacity: 1; transform: none; }

/* the custom web app row under the three packages: one wide card, words left, the quote promise right */
.packages-mini .pkg-app { grid-column: 1 / -1; }
.packages-mini .pkg-app .pkg-price { margin-top: 18px; font-size: clamp(1.6rem, 2.4vw, 2rem); }
.pkg-app .pkg-price small { display: block; margin-top: 6px; }
.pkg-app .story-link { margin-top: 14px; align-self: flex-start; font-weight: 600; }
@media (min-width: 900px) {
  .packages-mini .pkg-app { display: grid; grid-template-columns: minmax(0, 1.5fr) auto auto; align-items: center; gap: 12px 40px; }
  .packages-mini .pkg-app .pkg-price, .pkg-app .story-link { margin-top: 0; align-self: center; }
}

/* websites: custom web apps */
.apps-custom-grid { display: grid; gap: 16px; margin-top: clamp(32px, 4vw, 48px); }
@media (min-width: 700px) { .apps-custom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .apps-custom-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.apps-custom-grid li { padding: 26px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.apps-custom-grid h3 { font-size: 1.1875rem; letter-spacing: -0.02em; }
.apps-custom-grid p { margin-top: 8px; color: var(--muted); font-size: 0.9688rem; }
.custom-how { display: grid; gap: 28px; margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--line); }
@media (min-width: 900px) { .custom-how { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: start; } }
.custom-how h3 { font-size: 1.5rem; letter-spacing: -0.03em; }
.custom-how > div > p { margin-top: 10px; color: var(--muted); }
.custom-how > div > .btn { margin-top: 22px; }
.custom-steps { display: grid; gap: 14px 24px; counter-reset: cs; }
@media (min-width: 600px) { .custom-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.custom-steps li { position: relative; padding-left: 44px; counter-increment: cs; }
.custom-steps li::before {
  content: counter(cs); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--ink); color: #F8FAFC; font-size: 0.875rem; font-weight: 700;
}
.custom-steps b { display: block; }
.custom-steps span { color: var(--muted); font-size: 0.9688rem; }

/* planner: groups that only apply to a website or to a custom app (motion.js hides the other kind) */
.planner .plan-sub { display: grid; gap: 16px; }
.planner .plan-sub[hidden] { display: none; }
.planner .field-row-2 { display: grid; gap: 16px; }
.plan-estimate small { display: block; margin-top: 4px; }
@media (hover: hover) { .packages-mini:not(.has-fit) .pkg:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } }


/* magnetic buttons settle back softly */
.btn-lg { transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background-color 0.3s, border-color 0.3s, translate 0.45s var(--ease); }

/* apps stage: the faint app names behind the phone read as a glitch, not a design - gone */
.show-names { display: none !important; }

/* about mark: the sun actually rises (the old rule named .sun, the shape is .g-sun); halo in dusk rose, never amber-on-navy */
.js .about-mark.is-in .g-sun { transform: none; }
.mark-halo { background: radial-gradient(closest-side, rgba(255, 112, 120, 0.32), rgba(118, 64, 220, 0.14) 60%, transparent); }
.about-mark { background: radial-gradient(120% 120% at 50% 110%, #4E1A55 0%, var(--night-2) 55%, var(--night) 100%); }
@media (max-width: 600px) {
  .fit-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; border-radius: 22px; }
  .fit-opts button { padding: 8px 8px; font-size: 0.875rem; line-height: 1.2; white-space: normal; }
  .proof-row dd b { font-size: 2.4rem; }
}

/* about: Josh's portrait (backdrop warmed to the page paper when it was exported, so it sits on the page, not on a white card) */
.about-photo { position: relative; margin: 0 auto; width: 100%; max-width: 440px; }
.about-photo picture { display: block; overflow: hidden; border-radius: var(--r-lg); background: #EDE6DB; box-shadow: 0 40px 80px -48px rgba(15, 23, 42, 0.5); }
.about-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.about-photo figcaption {
  position: absolute; left: 18px; bottom: 18px; display: grid; gap: 2px; padding: 12px 16px; border-radius: 14px;
  background: rgba(10, 15, 31, 0.92); color: rgba(248, 250, 252, 0.72); font-size: 0.8125rem;
}
.about-photo figcaption b { color: #F8FAFC; font-size: 0.9375rem; }

/* one opening: cover, then the headline and the studio's statement in one screen, then the work */
.hx { padding-bottom: clamp(72px, 9vw, 128px); }
.hx-say { max-width: 30ch; font-size: clamp(1.45rem, 2.3vw, 2.15rem); font-weight: 500; font-stretch: 92%; letter-spacing: -0.02em; line-height: 1.22; color: var(--ink); }
.hx-say em { font-family: var(--serif); font-style: italic; font-weight: 400; font-stretch: 100%; color: #C2410C; }
.hx-say .sw { will-change: opacity; }
@media (min-width: 1000px) { .hx-foot { grid-template-columns: minmax(0, 1fr) auto; column-gap: 64px; } }

/* ---- Round 16: the build. The four steps assemble a sample site in a window that stays on screen as they scroll past ---- */
.build { display: none; }
.build-on .build { display: block; position: relative; container-type: inline-size; }
.b-win { position: relative; border-radius: 14px; overflow: hidden; background: #FFFFFF; border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 40px 80px -36px rgba(46, 24, 92, 0.45), 0 12px 24px -16px rgba(15, 23, 42, 0.25); }
.b-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; background: #F3F1EE; border-bottom: 1px solid rgba(15, 23, 42, 0.07); }
.b-bar > i { width: 10px; height: 10px; border-radius: 50%; background: #DCD8D2; }
.b-url { position: relative; flex: 1; height: 22px; margin: 0 10px; border-radius: 7px; background: #FFFFFF; font-size: 12px; color: #4B5568; }
.b-host { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 5px; }
.b-host svg { width: 12px; height: 12px; color: #15803D; }
.b-host-live { opacity: 0; }
.b-live { padding: 3px 9px; border-radius: 999px; background: #DCFCE7; color: #166534; font-size: 11px; font-weight: 700; opacity: 0; }
.b-page { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #F7F5F2; }
.b-brief { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 2.4cqw; padding: 0 9cqw; }
.b-brief .bub { max-width: 70%; font-size: max(13px, 2.5cqw); padding: 1.8cqw 2.6cqw; border-radius: 2.8cqw; }
.b-brief .bub-in { background: #FFFFFF; color: var(--ink); border: 1px solid rgba(15, 23, 42, 0.08); border-bottom-left-radius: 6px; }
.b-brief .bub-out { background: linear-gradient(120deg, #EC4880, #7640DC); color: #FFFFFF; font-weight: 600; }
.b-wire { position: absolute; inset: 0; }
.b-wire i { position: absolute; display: block; border-radius: 0.8cqw; background: #E4E0DA; transform-origin: 0 50%; }
.bw-nav { left: 4%; right: 4%; top: 5%; height: 5%; }
.bw-h1 { left: 6%; top: 20%; width: 40%; height: 7%; }
.bw-h2 { left: 6%; top: 29.5%; width: 30%; height: 7%; }
.bw-l { left: 6%; top: 42%; width: 38%; height: 2.6%; background: #ECE8E3; }
.bw-l.bw-s { top: 47%; width: 28%; }
.bw-btn { left: 6%; top: 56%; width: 17%; height: 7%; border-radius: 99px; background: #D9D3CB; }
.bw-img { left: 52%; top: 18%; width: 42%; height: 48%; background: repeating-linear-gradient(135deg, #E4E0DA 0 10px, #EBE7E1 10px 20px); }
.bw-card { top: 74%; width: 28%; height: 20%; left: 6%; background: #ECE8E3; }
.bw-card + .bw-card { left: 36%; }
.bw-card + .bw-card + .bw-card { left: 66%; }
.b-real { position: absolute; inset: 0; overflow: hidden; }
.b-real-in { position: absolute; inset: 0; }
.b-real img { display: block; width: 100%; height: auto; }
.b-checks { position: absolute; left: -22px; bottom: 9%; display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.b-checks li { display: flex; align-items: center; gap: 8px; width: max-content; padding: 8px 13px 8px 9px; border-radius: 999px; background: #FFFFFF;
  font-size: 13px; font-weight: 600; color: var(--ink); box-shadow: 0 14px 28px -14px rgba(46, 24, 92, 0.4), 0 0 0 1px rgba(15, 23, 42, 0.06); }
.b-checks li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: #16A34A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.b-call { position: absolute; right: -26px; bottom: -34px; width: clamp(130px, 27cqw, 172px); }
.b-call-in { aspect-ratio: 9 / 17; display: flex; flex-direction: column; align-items: center; padding: 22% 10% 12%; border-radius: 26px; border: 5px solid #0B0F1C;
  background: radial-gradient(120% 70% at 50% 0%, #3B2468 0%, #121A33 55%, #070B16 100%); color: #F8FAFC; text-align: center;
  box-shadow: 0 30px 60px -24px rgba(7, 11, 22, 0.7); transform-origin: 50% 80%; }
.steps-list .b-call-in p { margin: 0; color: inherit; max-width: none; line-height: 1.25; }
.b-call-k { font-size: 11px; opacity: 0.7; }
.b-call-n { margin-top: 6px !important; font-family: var(--display); font-size: 17px; font-weight: 700; line-height: 1.1; }
.b-call-s { margin-top: 4px !important; font-size: 11px; opacity: 0.6; }
.b-call-btns { display: flex; gap: 22%; justify-content: center; width: 100%; margin-top: auto; }
.b-call-btns i { position: relative; width: 34px; height: 34px; border-radius: 50%; background: #DC2626; }
.b-call-btns .b-yes { background: #16A34A; }
.b-call-btns i::after { content: ""; position: absolute; inset: 9px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat; }
.b-call-btns .b-no::after { transform: rotate(135deg); }
.b-yes::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #4ADE80; opacity: 0; }
.build.is-ring .b-call-in { animation: buzz 1.1s 0.1s 3 both; }
.build.is-ring .b-yes::before { animation: b-ping 1.1s 0.1s 3 ease-out; }
@keyframes b-ping { from { transform: scale(1); opacity: 0.9; } to { transform: scale(1.9); opacity: 0; } }

.build-on .cs-copy { transition: opacity 0.5s var(--ease); opacity: 0.28; }
.build-on .cs-slide.is-on .cs-copy { opacity: 1; }
@media (min-width: 900px) {
  .steps-list.build-on { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 104px); align-items: start; }
  .build-on .cs-slides { grid-column: 1; grid-row: 1; grid-template-columns: 1fr !important; }
  .build-on .build { grid-column: 2; grid-row: 1; position: sticky; top: max(110px, calc(50vh - 21vw)); margin-bottom: 60px; }
  .build-on .cs-slide, .build-on .cs-slide + .cs-slide { display: flex; align-items: center; min-height: min(68vh, 620px); padding: 0; border: 0; }
  .build-on .cs-slide:first-child { min-height: min(52vh, 480px); align-items: flex-start; padding-top: 6vh; }
}
@media (max-width: 899px) {
  .build-on .build { position: sticky; top: 72px; z-index: 2; margin: 0 -4px 8px; padding: 12px 4px 26px;
    background: linear-gradient(180deg, var(--bg-2) 88%, rgba(255, 243, 228, 0)); }
  .build-on .b-checks { left: -6px; bottom: 6%; gap: 5px; }
  .build-on .b-checks li { font-size: 11px; padding: 5px 10px 5px 6px; }
  .build-on .b-checks li::before { width: 14px; height: 14px; background-size: 9px; }
  .build-on .b-call { right: -4px; bottom: -18px; width: 104px; }
  .build-on .b-call-in { border-radius: 18px; border-width: 4px; }
  .build-on .b-call-n { font-size: 13px; }
  .build-on .b-call-btns i { width: 24px; height: 24px; }
  .build-on .b-call-btns i::after { inset: 6px; }
  .build-on .cs-slide { min-height: 46vh; border-top: 0; }
  .build-on .b-bar { height: 28px; }
}

/* ---- Round 16b: the quote form says what is missing, and the email panel offers every way to send ---- */
@media (min-width: 700px) { .field-pair .field:first-child { grid-column: auto; } }
.planner .field-row + .field-row { margin-top: 16px; }
.field-err[hidden] { display: none; }
.field-err { display: block; margin-top: 7px; color: #B91C1C; font-size: 0.875rem; font-weight: 600; }
.field.is-bad input { border-color: #DC2626; box-shadow: 0 0 0 1px #DC2626; }
.mail-sheet { margin: auto; width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: clamp(22px, 4vw, 34px); border: 0; border-radius: 22px;
  background: var(--surface); color: var(--ink); box-shadow: 0 40px 90px -30px rgba(7, 11, 22, 0.6); overflow: auto; }
.mail-sheet::backdrop { background: rgba(7, 11, 22, 0.55); }
html:not(.still) .mail-sheet[open] { animation: ms-in 0.35s var(--ease) both; }
@keyframes ms-in { from { opacity: 0; transform: translateY(18px) scale(0.98); } }
.ms-x-form { position: sticky; top: calc(10px - clamp(22px, 4vw, 34px)); z-index: 2; float: right; height: 0; margin: -8px -8px 0 0; }
.ms-x { box-shadow: 0 0 0 4px var(--surface); }
.ms-x { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #EEF1F5; color: var(--ink); cursor: pointer; }
.ms-x svg { width: 18px; height: 18px; }
.ms-x:hover { background: #E2E6EC; }
.ms-k { margin: 0; color: #15803D; font-size: 0.875rem; font-weight: 700; }
.mail-sheet h2 { margin: 6px 48px 4px 0; font-size: clamp(1.5rem, 3.4vw, 1.9rem); line-height: 1.1; }
.ms-to { margin: 0 0 14px; color: var(--muted); font-size: 0.9375rem; }
.ms-to b { color: var(--ink); }
.ms-body { max-height: 32vh; overflow: auto; margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface-2);
  font: 0.9063rem/1.55 var(--font); white-space: pre-wrap; overflow-wrap: anywhere; }
.ms-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ms-acts .ms-app { grid-column: 1 / -1; }
.ms-acts .btn { justify-content: center; text-align: center; min-height: 48px; }
.ms-note { margin: 14px 0 0; color: var(--muted); font-size: 0.875rem; }
.mail-sheet .btn-ghost { background: #FFFFFF; color: var(--ink); border: 1px solid var(--line-strong); box-shadow: none; }
.mail-sheet .btn-ghost:hover { background: var(--surface-2); border-color: rgba(15, 23, 42, 0.3); }

/* round 17: on phones the tight tracking ran the wordmark's "a" into the "l" (read as "Gafix") */
@media (max-width: 600px) { .cover .cover-mark { letter-spacing: -0.005em; } }

/* touch: every small text link gets a full 44px tap area (round 18 device test) */
@media (pointer: coarse) {
  .foot-top, .foot-mail, .contact-mail, .story-links .story-link, .notify-link, .pkg-more .story-link { display: inline-flex; align-items: center; min-height: 44px; }
  .story-links { row-gap: 0; }
  .nav a { min-width: 44px; justify-content: center; }
}

/* ---------- Round 19 atmosphere: dusk violet threads the page from the cover to the footer ---------- */
/* cover: a fourth, slower light (rose into violet) drifts behind the wordmark; still in calm mode like the others */
.cover-sky .m4 { right: -18%; top: 4%; width: 68%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(168, 85, 247, 0.26), rgba(236, 72, 128, 0.12) 46%, transparent 72%); animation: mesh-d 43s ease-in-out infinite alternate; }
@keyframes mesh-d { to { transform: translate3d(-16%, 12%, 0) scale(1.12); } }
.still .cover-sky .m4 { animation: none; }
/* pricing: the one pale lilac band in the long run of paper, with soft edges so it breathes in and out */
.section-try {
  position: relative; isolation: isolate;
  background:
    radial-gradient(60% 50% at 88% 8%, rgba(236, 72, 128, 0.07), transparent 70%),
    radial-gradient(55% 45% at 6% 92%, rgba(139, 92, 246, 0.08), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, #F2EDF6 13%, #EFEAF6 50%, #F2EDF6 87%, var(--bg) 100%);
}
.section-try .packages-mini .pkg { box-shadow: 0 1px 2px rgba(76, 29, 149, 0.05), 0 18px 40px -24px rgba(76, 29, 149, 0.22); }
/* footer: the page ends in the same dusk it began with */
.site-footer {
  background:
    radial-gradient(55% 70% at 50% 118%, rgba(139, 92, 246, 0.30), transparent 70%),
    radial-gradient(35% 50% at 86% 112%, rgba(236, 72, 128, 0.18), transparent 70%),
    radial-gradient(30% 40% at 12% 108%, rgba(242, 106, 27, 0.12), transparent 70%),
    var(--night);
}

/* phones on /websites: the "Plan your website" bar (motion.js shows it once the visitor is into the prices) */
.m-cta { display: none; }
@media (max-width: 760px) {
  .m-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    padding: 10px 10px 10px 18px; border-radius: 20px;
    background: rgba(13, 20, 40, 0.92); color: #F8FAFC; border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 18px 40px -16px rgba(7, 11, 22, 0.6);
    transform: translateY(calc(100% + 24px)); visibility: hidden;
    transition: transform 0.45s var(--ease), visibility 0s linear 0.45s;
  }
  .m-cta.is-on { transform: none; visibility: visible; transition: transform 0.45s var(--ease), visibility 0s; }
  .still .m-cta, .still .m-cta.is-on { transition: none; }
  .m-cta-t { margin: 0; font-size: 0.875rem; line-height: 1.25; color: rgba(226, 232, 240, 0.85); }
  .m-cta-t b { color: #fff; }
  .m-cta-t span { display: block; font-size: 0.75rem; color: rgba(203, 213, 225, 0.7); }
  .m-cta .btn { flex: none; min-height: 44px; padding: 0 18px; font-size: 0.9375rem; }
}

/* ---------- /case-studies: how the example sites were made ---------- */
.cz-hero {
  padding: clamp(130px, 15vw, 190px) 0 clamp(48px, 6vw, 80px);
  background:
    radial-gradient(50% 70% at 92% 0%, rgba(168, 85, 247, 0.12), transparent 70%),
    radial-gradient(45% 60% at 70% 10%, rgba(236, 72, 128, 0.09), transparent 70%),
    var(--bg);
}
.cz-hero .crumb { animation: none; }
.cz-hero h1 { margin-top: 18px; max-width: 14ch; font-size: clamp(2.7rem, 7vw, 5.6rem); }
.cz-lede { margin-top: 22px; max-width: 38rem; color: var(--muted); font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); }
.cz-toc { display: flex; flex-wrap: wrap; gap: 10px; margin: 34px 0 0; padding: 0; list-style: none; }
.cz-toc a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 8px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--text); font-weight: 600; font-size: 0.9375rem; text-decoration: none; transition: border-color 0.25s, transform 0.35s var(--ease); }
.cz-toc a span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--chip-bg); color: var(--chip-text); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.cz-toc a:hover { border-color: rgba(15, 23, 42, 0.35); transform: translateY(-2px); }
.cz-case { border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.cz-case:nth-of-type(even) { background: linear-gradient(180deg, var(--bg) 0%, #F3EEF6 50%, var(--bg) 100%); }
.cz-grid { display: grid; gap: clamp(28px, 4vw, 64px); align-items: start; }
.cz-shot { margin: 0; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--surface); }
.cz-shot img { display: block; width: 100%; height: auto; }
.cz-k { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 0.9375rem; font-weight: 600; }
.cz-k span { color: var(--accent-text); font-variant-numeric: tabular-nums; }
.cz-copy h2 { margin-top: 8px; font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1; letter-spacing: -0.035em; }
.cz-h { margin-top: 26px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
.cz-copy > p:not(.cz-k) { margin-top: 10px; color: var(--muted); max-width: 36rem; }
.cz-ds { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: cz; display: grid; gap: 14px; max-width: 36rem; }
.cz-ds li { position: relative; padding-left: 40px; color: var(--muted); counter-increment: cz; }
.cz-ds li::before { content: counter(cz); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #F8FAFC; font-size: 0.8125rem; font-weight: 700; }
.cz-ds b { display: block; color: var(--text); font-weight: 650; }
.cz-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 28px 0 0; max-width: 36rem; }
.cz-nums div { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.cz-nums dt { font-size: 0.8125rem; color: var(--muted); line-height: 1.3; }
.cz-nums dd { margin: 6px 0 0; font-family: var(--display); font-weight: 760; font-stretch: 82%; font-size: 1.75rem; line-height: 1; letter-spacing: -0.03em; color: var(--text); }
.cz-nums small { font-family: var(--font); font-size: 0.8125rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.cz-copy .story-links { margin-top: 28px; }
.cz-note p { max-width: 46rem; color: var(--muted); font-size: 0.9375rem; }
@media (min-width: 960px) {
  .cz-grid { grid-template-columns: 1.05fr 1fr; }
  .cz-shot { position: sticky; top: 110px; }
  .cz-case:nth-of-type(odd) .cz-shot { order: 2; }
}
@media (max-width: 420px) { .cz-nums { gap: 8px; } .cz-nums div { padding: 12px; } .cz-nums dd { font-size: 1.45rem; } }

/* email panel: "Send it from here" (only when sending is switched on in motion.js) */
.ms-send { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.ms-or { margin: 0; font-weight: 650; color: var(--ink); }
.ms-reply { display: grid; gap: 6px; font-size: 0.9375rem; color: var(--muted); }
.ms-reply input { min-height: 48px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: #FFFFFF; color: var(--ink); font: inherit; font-size: 1rem; }
.ms-reply input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ms-ts:empty { display: none; }
.ms-sent { margin: 0; min-height: 1.4em; font-size: 0.9375rem; color: var(--muted); }
.ms-send.is-sent .ms-reply, .ms-send.is-sent .ms-ts, .ms-send.is-sent button { display: none; }
.ms-send.is-sent .ms-sent { color: #15803D; font-weight: 600; }

/* /websites: the person behind the quote, beside the planner */
.plan-who { display: flex; gap: 14px; align-items: flex-start; margin-top: 24px; padding: 14px 16px; max-width: 30rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.plan-who picture { flex: none; width: 56px; }
.plan-who img { width: 56px; height: 56px; max-width: none; border-radius: 50%; object-fit: cover; object-position: 50% 22%; }
.plan-who figcaption { color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }
.plan-who b { display: block; margin-top: 4px; color: var(--ink); font-weight: 600; font-size: 0.875rem; }
.plan-who .story-link { display: inline-block; margin-top: 2px; font-size: 0.875rem; }

/* "Try it here" (try.js): the concept site runs inside its own card. Desktop only; on a phone the live link is the same thing. */
.case-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.case-try {
  display: none; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, currentColor 45%, transparent);
  background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.case-try:hover { border-color: currentColor; }
.case-try[aria-pressed="true"] { background: color-mix(in srgb, currentColor 12%, transparent); border-color: currentColor; }
.case-try:focus-visible { outline: 3px solid var(--case-ink); outline-offset: 3px; }
@media (min-width: 900px) { html.js .case-try { display: inline-flex; align-items: center; } }
.case-shot.is-live, .case-shot.is-live:hover { transform: none; }
.case-shot.is-live .case-view { position: relative; aspect-ratio: 16 / 11; }
.case-shot.is-live .case-view img { transform: none !important; transition: none; }
.case-shot.is-live iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; opacity: 0; transition: opacity 0.4s ease; }
.case-shot.is-ready iframe { opacity: 1; }
.case-shot.is-live .case-bar span::after { content: "Live"; margin-left: 10px; color: #1F7A4D; font-weight: 700; }

/* =====================================================================================================
   8 Nov 2026, the opening (op.js). GALIX is a window onto a sunrise over the sea; the camera flies through the I,
   then the morning shrinks into the screen of the phone in the middle of the cover. The stage is one screen,
   held while the section scrolls. Without JS: the cover alone, with the sunrise phone in its row.
   ===================================================================================================== */
.op-stage { position: relative; background: #0A0F1F; }
.op .cover { height: max(100svh, 620px); }
.op-sun, .op-night, .op-first, .op-after { display: none; }
.cover-sun { flex: 0 1 clamp(120px, 14.5vw, 210px); }
.sun-phone {
  display: block; padding: clamp(5px, 0.6vw, 9px); border-radius: clamp(24px, 2.6vw, 40px); background: #05070F;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset, 0 50px 80px -30px rgba(0, 0, 0, 0.75);
}
.sun-screen { position: relative; display: block; aspect-ratio: 300 / 650; overflow: hidden; border-radius: clamp(19px, 2.1vw, 32px); }
.sun-pic, .sun-pic img { display: block; width: 100%; height: 100%; }
.sun-pic img { object-fit: cover; object-position: 50% 50%; }
.sun-lock { position: absolute; left: 0; right: 0; top: 11%; text-align: center; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }
.sun-lock b { display: block; font: 600 clamp(1.4rem, 2.6vw, 2.6rem)/1 var(--font, inherit); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sun-lock small { display: block; margin-top: 6px; font-size: clamp(0.62rem, 0.8vw, 0.8rem); letter-spacing: 0.02em; opacity: 0.9; }
@media (min-width: 721px) {
  .cover-phones li:nth-child(1) { --drop: clamp(34px, 8vh, 80px); }
  .cover-phones li:nth-child(2) { --drop: clamp(12px, 3vh, 30px); }
  .cover-phones li:nth-child(3) { --drop: clamp(4px, 1vh, 10px); }
  .cover-phones li:nth-child(4) { --drop: 0px; }
  .cover-phones li:nth-child(5) { --drop: clamp(6px, 1.5vh, 16px); }
  .cover-phones li:nth-child(6) { --drop: clamp(16px, 4vh, 40px); }
  .cover-phones li:nth-child(7) { --drop: clamp(36px, 8.5vh, 86px); }
}
@media (max-width: 720px) {
  .cover-phones li:nth-child(n) { display: block; }
  .cover-phones li:nth-child(-n+2), .cover-phones li:nth-child(n+6) { display: none; }
  .cover-phones li:nth-child(3) { --drop: 26px; } .cover-phones li:nth-child(4) { --drop: 0px; } .cover-phones li:nth-child(5) { --drop: 14px; }
}

/* with JS: a tall section and a held stage */
.js .op { height: 340vh; }
.js .op-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.js .op .cover { height: 100%; min-height: 0; }
@media (max-width: 720px) { .js .op .cover-phones { max-height: none; overflow: visible; } }
.js .op:not(.is-set) .op-stage { visibility: hidden; animation: op-late 0s 3s forwards; }
@keyframes op-late { to { visibility: visible; } }
.js .op-sun { position: absolute; inset: 0; z-index: 3; display: block; overflow: hidden; transform-origin: 50% 50%; will-change: transform, clip-path; }
.js .op-sun img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; will-change: transform; }
.js .op-night { position: absolute; inset: 0; z-index: 4; display: block; width: 100%; height: 100%; fill: #0A0F1F; }
.js .op-first, .js .op-after { position: absolute; left: 0; right: 0; z-index: 5; display: block; margin: 0; padding: 0 var(--gutter, 20px); text-align: center; }
.js .op-first {
  top: calc(44svh + min(86vw, 220svh) * 0.1222 + 3.5svh);
  font-size: clamp(1.05rem, 1.6vw, 1.4rem); letter-spacing: 0.01em; color: rgba(236, 240, 255, 0.82);
}
.js .op-after {
  bottom: 17svh; color: #fff; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
  font-family: var(--display, inherit); font-weight: 700; font-stretch: 84%; font-size: clamp(2rem, 5vw, 4.6rem); line-height: 1; letter-spacing: -0.035em;
}
.js .op-after { max-width: 16ch; margin-inline: auto; }
.op-on .op .cover-mark b, .op-on .op .cover-phones li, .op-on .op .cover-top { animation: none; }
.op-on .op .sun-lock { opacity: 0; transition: opacity 0.8s 0.15s ease; }
.op-on .op.is-landed .sun-lock { opacity: 1; }
/* the line over the sea sits in the clear sky, above the sun, never on its light path */
.js .op-after { top: 19svh; bottom: auto; max-width: 22ch; text-shadow: 0 1px 2px rgba(0, 20, 60, 0.25), 0 4px 40px rgba(0, 20, 60, 0.35); }
@media (max-width: 720px) { .js .op-after { top: 15svh; max-width: 13ch; font-size: clamp(2rem, 9vw, 2.6rem); } }

/* opening, pass 2: the sun rises as you scroll, light spills round the name, words rise one by one, the phone tips
   as it is set down and casts a shadow, and a quiet cue says what to do on the first screen */
.op-sun-in { position: absolute; inset: 0; transform-origin: 50% 50%; }
.op-pic { display: block; width: 100%; height: 100%; }
.op-rise { position: absolute; left: 0; top: 0; width: 100%; height: var(--hy, 50%); overflow: hidden; pointer-events: none; }
.op-sky {
  position: absolute; left: calc(var(--sx) - var(--r) * 14); top: calc(var(--hy) - var(--r) * 9); width: calc(var(--r) * 28); height: calc(var(--r) * 18);
  background: radial-gradient(closest-side, rgba(255, 226, 176, 0.75), rgba(255, 170, 100, 0.28) 40%, rgba(255, 140, 80, 0) 75%);
  mix-blend-mode: screen; opacity: calc(var(--rise, 1) * 0.85);
}
.op-disc {
  position: absolute; left: calc(var(--sx) - var(--r)); width: calc(var(--r) * 2); height: calc(var(--r) * 2); border-radius: 50%;
  top: calc(var(--hy) - var(--r) + var(--r) * 2.2 * (1 - var(--rise, 1)) - var(--r) * 0.5 * var(--rise, 1));
  background: radial-gradient(circle, #FFFDF6 0 52%, #FFE9C4 62%, rgba(255, 214, 160, 0) 72%);
  box-shadow: 0 0 calc(var(--r) * 1.4) calc(var(--r) * 0.5) rgba(255, 196, 130, 0.55); mix-blend-mode: screen;
}
.op-path {
  position: absolute; left: calc(var(--sx) - var(--r) * 2); top: var(--hy); width: calc(var(--r) * 4); height: calc(100% - var(--hy));
  background: radial-gradient(50% 100% at 50% 0, rgba(255, 226, 180, 0.7), rgba(255, 200, 150, 0.2) 45%, transparent 75%);
  mix-blend-mode: screen; opacity: calc(var(--rise, 1) * 0.8); pointer-events: none;
}
.sun-screen .op-rise { opacity: var(--shown, 0); }
.sun-screen .op-path { opacity: calc(var(--shown, 0) * 0.8); }
html:not(.op-on) .sun-screen .op-rise, html:not(.op-on) .sun-screen .op-path { display: none; }
.sun-lock { z-index: 1; }
.op-shadow, .op-glow, .op-cue { display: none; }
.js .op-shadow {
  position: absolute; top: 0; z-index: 2; display: block; transform-origin: 50% 50%; pointer-events: none;
  box-shadow: 0 70px 120px -30px rgba(0, 0, 0, 0.85), 0 24px 40px -24px rgba(0, 0, 0, 0.6);
}
.js .op-glow {
  position: absolute; inset: 0; z-index: 5; display: block; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(44% 26% at 50% 44%, rgba(255, 168, 108, 0.2), rgba(255, 168, 108, 0) 72%);
}
.js .op-first, .js .op-after { z-index: 6; }
.op-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.op-w > span { display: inline-block; }
.js .op-cue {
  position: absolute; left: 0; right: 0; bottom: 4.5svh; z-index: 6; display: block; margin: 0; text-align: center;
  font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(236, 240, 255, 0.6);
}
.op-cue span::after { content: ""; display: block; width: 1px; height: 40px; margin: 12px auto 0; background: linear-gradient(rgba(236, 240, 255, 0.7), rgba(236, 240, 255, 0)); transform-origin: 50% 0; }
html:not(.still) .op-cue span::after { animation: op-cue 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes op-cue { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); transform-origin: 50% 0; } 55% { transform: scaleY(1); transform-origin: 50% 100%; } 100% { transform: scaleY(0); transform-origin: 50% 100%; } }
/* the first screen arrives: the night settles, the light comes up behind the name, the line rises word by word */
.op-on .op-night { animation: calm-in 1.4s ease backwards; }
.op-on .op-glow { animation: calm-in 2.4s 0.5s ease backwards; }
.op-on .op-first .op-w > span { animation: op-word 1s cubic-bezier(0.16, 1, 0.3, 1) backwards; animation-delay: calc(0.6s + var(--i, 0) * 0.07s); }
.op-on .op-cue { animation: calm-in 1s 1.6s ease backwards; }
@keyframes op-word { from { transform: translate3d(0, 110%, 0); } }
.still .op-first .op-w > span { animation-name: calm-in; }
.op-disc { background: radial-gradient(circle, #FFFDF6 0 46%, #FFEBC8 57%, rgba(255, 214, 160, 0) 70%); }
.op-path { width: calc(var(--r) * 3); left: calc(var(--sx) - var(--r) * 1.5); opacity: var(--rise, 1);
  background: radial-gradient(50% 100% at 50% 0, rgba(255, 236, 200, 0.85), rgba(255, 210, 160, 0.3) 40%, transparent 78%); }
.sun-screen .op-path { opacity: var(--shown, 0); }

/* =====================================================================================================
   8 Nov 2026, cover pass 5 (Josh: make the landed cover look a lot better).
   1 one world: the dawn sky carried on from the opening, its light behind the sunrise phone.
   2 a clear lead: the sunrise phone bigger and forward; the rest curve away in a 3D arc, smaller and dimmer.
   3 a deliberate layout: the name clear above, the phones and a foot line sized to the screen, no dead band.
   4 real phones: thin bezels, an edge highlight, a glass sheen that moves with the pointer, contact shadows.
   5 the message: one line and two buttons once it lands.   6 the nav loses its pill (end of this block).
   ===================================================================================================== */
.op .cover {
  --pw: min(14vw, 17.5svh); --mark: min(22vw, 27svh);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 76px 0 2.5svh; box-sizing: border-box;
  background:
    linear-gradient(180deg, #060A17 0%, #0A0F22 34%, #161A38 58%, #2B2142 74%, #4A2B42 88%, #5C3440 100%);
}
.op .cover-sky i:not(.cover-spot) { display: none; }
/* the horizon: a thin line of light across the sky at the height of the sea in the sunrise phone
   (the sea meets the sky 51.6% down its screen; the row's top is the sunrise phone's top) */
.op .cover .cover-phones::before {
  content: ""; position: absolute; left: 50%; width: 100vw; translate: -50% 0; height: 1px; z-index: -1; pointer-events: none;
  top: calc(clamp(3px, 0.32vw, 6px) + var(--pw) * var(--lead, 1.18) * 650 / 300 * 0.516);
  background: linear-gradient(90deg, transparent, rgba(255, 214, 170, 0.45) 30%, rgba(255, 236, 210, 0.85) 50%, rgba(255, 214, 170, 0.45) 70%, transparent);
  box-shadow: 0 0 24px 2px rgba(255, 180, 120, 0.25);
}
.op .cover .cover-mark { flex: none; margin: 0; font-size: var(--mark); line-height: 1.1; letter-spacing: -0.025em; }
.op .cover .cover-mark span { padding: 0 0.04em 0.02em; }
.op .cover .cover-phones {
  flex: none; position: relative; left: auto; bottom: auto; translate: none;
  display: flex; align-items: flex-start; justify-content: center; gap: clamp(4px, 1vw, 18px);
  width: auto; max-width: none; max-height: none; overflow: visible; margin: 1.6svh 0 0; perspective: 1600px;
}
.op .cover .cover-phones li { position: relative; flex: 0 0 var(--pw); margin: var(--drop, 0px) 0 0; }
.op .cover .cover-phones li:nth-child(1), .op .cover .cover-phones li:nth-child(7) { display: none; }
.op .cover .cover-phones li:nth-child(2) { --drop: 4.2svh; z-index: 1; scale: 0.86; rotate: y 22deg; filter: brightness(0.6) saturate(0.85); }
.op .cover .cover-phones li:nth-child(3) { --drop: 1.6svh; z-index: 2; scale: 0.94; rotate: y 12deg; filter: brightness(0.82); }
.op .cover .cover-phones li.cover-sun { --drop: 0px; z-index: 3; flex-basis: calc(var(--pw) * var(--lead, 1.18)); }
/* the sun's light behind the sunrise phone, centred on its horizon */
.op .cover .cover-phones::after {
  content: ""; position: absolute; left: 50%; width: 100vw; height: calc(var(--pw) * 3); translate: -50% -50%; z-index: -2; pointer-events: none;
  top: calc(var(--pw) * var(--lead, 1.18) * 650 / 300 * 0.516);
  background: radial-gradient(34% 50% at 50% 50%, rgba(255, 176, 112, 0.34), rgba(255, 140, 96, 0.1) 50%, transparent 74%);
}
.op .cover .cover-phones li:nth-child(5) { --drop: 1.6svh; z-index: 2; scale: 0.94; rotate: y -12deg; filter: brightness(0.82); }
.op .cover .cover-phones li:nth-child(6) { --drop: 4.2svh; z-index: 1; scale: 0.86; rotate: y -22deg; filter: brightness(0.6) saturate(0.85); }
/* the side phones lean in a little closer than their boxes so the arc reads as one group */
.op .cover .cover-phones li:nth-child(2) { margin-right: calc(var(--pw) * -0.12); }
.op .cover .cover-phones li:nth-child(6) { margin-left: calc(var(--pw) * -0.12); }

/* the phones themselves */
.op .cover-phones a, .op .sun-phone {
  padding: clamp(3px, 0.32vw, 6px); border-radius: calc(var(--pw) * 0.155);
  background: linear-gradient(155deg, #3A3F4E 0%, #0B0E17 16%, #05070D 50%, #0B0E17 84%, #2A2E3A 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.28),
              0 0 0 1px rgba(0, 0, 0, 0.5), 0 40px 70px -28px rgba(0, 0, 0, 0.85), 0 14px 24px -14px rgba(0, 0, 0, 0.6);
}
.op .cover-phones img, .op .sun-screen { border-radius: calc(var(--pw) * 0.135); }
.op .cover-phones li.cover-sun .sun-phone { border-radius: calc(var(--pw) * var(--lead, 1.18) * 0.155); }
.op .cover-phones li.cover-sun .sun-screen { border-radius: calc(var(--pw) * var(--lead, 1.18) * 0.135); }
/* the sun on the centre phone lights its neighbours: a warm edge on the side that faces it */
.op .cover-phones li:nth-child(3) a { box-shadow: inset -2px 0 0 rgba(255, 196, 140, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 40px 70px -28px rgba(0, 0, 0, 0.85); }
.op .cover-phones li:nth-child(5) a { box-shadow: inset 2px 0 0 rgba(255, 196, 140, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 40px 70px -28px rgba(0, 0, 0, 0.85); }
.op .cover-phones li:nth-child(2) a { box-shadow: inset -1px 0 0 rgba(255, 196, 140, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 40px 70px -28px rgba(0, 0, 0, 0.85); }
.op .cover-phones li:nth-child(6) a { box-shadow: inset 1px 0 0 rgba(255, 196, 140, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 40px 70px -28px rgba(0, 0, 0, 0.85); }
.op .cover-phones li.cover-sun .sun-phone { box-shadow: inset 0 0 0 1px rgba(255, 236, 214, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 0 calc(var(--pw) * 0.7) rgba(255, 170, 110, 0.32), 0 50px 80px -30px rgba(0, 0, 0, 0.85); }
/* glass: a soft band of light across each screen that slides as the pointer moves (motion.js sets --mx) */
.op .cover-phones a::before, .op .sun-phone::before {
  content: ""; position: absolute; inset: clamp(3px, 0.32vw, 6px); z-index: 2; border-radius: inherit; pointer-events: none;
  background: linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, 0.11) 47%, rgba(255, 255, 255, 0.03) 53%, transparent 60%);
  background-size: 260% 100%; background-position: calc(50% - var(--mx, 0) * 60%) 0;
  transition: background-position 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.op .sun-phone { position: relative; }
/* contact shadow: where each phone meets the light below it */
.op .cover .cover-phones li::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -5%; height: 8%; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.55), transparent 72%); filter: blur(6px);
}

/* the foot: one line and two buttons */
.op .cover-foot {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap;
  width: min(100% - 32px, 1240px); margin-top: 5svh;
}
.op .cover-foot p { margin: 0; }
.op .cover-foot > p:first-child { font-size: clamp(1rem, 1.25vw, 1.25rem); letter-spacing: -0.005em; color: rgba(246, 242, 234, 0.86); }
.cover-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.cover-acts a {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; border-radius: 999px;
  font-weight: 600; font-size: 0.9375rem; text-decoration: none; transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
}
.cover-go { background: #F6F2EA; color: #0A0F1F; }
.cover-go:hover { background: #fff; }
.cover-q { color: #F6F2EA; box-shadow: inset 0 0 0 1px rgba(246, 242, 234, 0.32); }
.cover-q:hover { box-shadow: inset 0 0 0 1px rgba(246, 242, 234, 0.8); }
.cover-acts a:focus-visible { outline: 3px solid var(--sun, #FDB52D); outline-offset: 3px; }

/* phones: three phones, the same arc, the foot stacked */
@media (max-width: 720px) {
  .op .cover { --pw: min(32vw, 23svh); --lead: 1.32; --mark: min(34vw, 17svh); padding-top: 84px; }
  .op .cover .cover-phones { gap: 0; margin-top: 2svh; }
  .op .cover .cover-phones li:nth-child(2), .op .cover .cover-phones li:nth-child(6) { display: none; }
  .op .cover .cover-phones li:nth-child(3) { margin-right: calc(var(--pw) * -0.1); rotate: y 16deg; scale: 0.9; }
  .op .cover .cover-phones li:nth-child(5) { margin-left: calc(var(--pw) * -0.1); rotate: y -16deg; scale: 0.9; }

  .op .cover-foot { flex-direction: column; justify-content: center; text-align: center; gap: 14px; margin-top: 3svh; }
  .op .cover-foot > p:first-child { max-width: 24ch; }
  .cover-acts { justify-content: center; }
}

/* 6. the nav: a plain bar with a hairline, no pill. Over the opening it starts clear and fills in once the page moves */
.site-header { padding-top: 0; transition: background-color 0.4s, border-color 0.4s; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 12, 26, 0.86); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); }
.header-bar, .scrolled .header-bar { height: 64px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.op-on .site-header:not(.scrolled) { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav a { position: relative; border-radius: 0; padding: 0 12px; color: rgba(236, 240, 255, 0.78); }
.nav a:hover { background: none; color: #fff; }
.nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 9px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }
.nav a.nav-cta, .nav a.nav-cta:hover { margin-left: 8px; background: none; color: #fff; font-weight: 600; }
.nav a.nav-cta::after { transform: scaleX(1); background: var(--sun, #FDB52D); height: 2px; }
.nav-toggle, .nav-toggle:hover { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); }
/* tall tablets: the same arc, bigger, so the screen is filled */
@media (min-width: 721px) and (max-aspect-ratio: 4/5) { .op .cover { --pw: min(18.5vw, 19svh); --mark: min(27vw, 20svh); } .op .cover-foot { flex-direction: column; text-align: center; margin-top: 7svh; } }
/* lock screen: date small above the time, as on a real phone (op.js fills both with the visitor's own time) */
.sun-lock small { margin: 0 0 4px; }
.sun-lock b { font-size: clamp(1.6rem, 3vw, 3rem); }
.sun-lock:has(b:empty) { display: none; }

/* 8 Nov, phones (Josh: "doesn't seem to run smoothly"). What a phone's graphics chip pays for on every scrolled frame, and
   a computer doesn't notice: a blur re-sampled behind the fixed header, a full-screen grain layer over everything, and
   full-screen blends in the opening. The look barely changes on a small screen; the scrolling gets the frames back. */
@media (hover: none), (pointer: coarse) {
  html::after { display: none; }
  .site-header, .site-header.scrolled { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .site-header.scrolled { background-color: #0F1526 !important; }
  .js .op-shadow { display: none; }
  .js .op-glow, .op-sky { mix-blend-mode: normal; }
  .js .op-sun, .js .op-sun img { will-change: auto; }
}

/* 8 Nov swipe rows: on phones the examples and the app stories sit side by side and swipe, with the next one peeking in,
   instead of 8,000 px of stacked cards. Plain native scrolling, so it costs the phone nothing. Wide screens are untouched */
@media (max-width: 899px) {
  .cases { display: flex; gap: 12px; width: 100%; padding: 4px var(--gutter) 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
  .cases::-webkit-scrollbar { display: none; }
  .case { position: static; flex: 0 0 min(86%, 420px); margin: 0; scroll-snap-align: start; }
  .case-in { height: 100%; }
}
@media (max-width: 959px) {
  .showcase { margin-inline: calc(-1 * var(--gutter)); }
  .show-stories { display: flex; gap: 12px; padding: 4px var(--gutter) 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
  .show-stories::-webkit-scrollbar { display: none; }
  .story { flex: 0 0 min(86%, 420px); scroll-snap-align: start; display: flex; flex-direction: column; }
  .story > .story-links { margin-top: auto; padding-top: 18px; }   /* cards share the tallest one's height: the links sit at the foot, not in mid-air */
}