/* 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-roadrules { 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-roadrules .show-screens [data-app="roadrules"] { 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-roadrules .show-dots [data-app="roadrules"] { 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 { 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-roadrules .show-names [data-app="roadrules"] { 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; }
}