/* ==========================================================================
   Glow v2: standalone modern stylesheet (no dependency on legacy styles.css)
   Direction: calm, spacious, editorial. Near-white canvas, flat bordered
   surfaces, generous whitespace, one warm accent. Serif display + Inter text.
   Reuses the structural class names that main.js expects (.site-header,
   .nav-toggle, .site-nav, .reveal) so behaviour keeps working.
   ========================================================================== */

@font-face {
  font-family: "Canela";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/canela-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Canela";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/canela-italic.woff2") format("woff2");
}

:root {
  --bg: #fcfbf9;
  --bg-2: #f4f2ed;
  --ink: #1a1823;
  --ink-display: #412a5e; /* display text sitting directly on the page/gradient */
  --ink-2: #6b6776;
  --ink-3: #918da0;
  --line: rgba(26, 24, 35, .10);
  --line-2: rgba(26, 24, 35, .16);
  --accent: #c72e94;
  --accent-ink: #a31f76;
  --accent-soft: rgba(199, 46, 148, .08);
  --dark: #161320;
  --radius: 18px;
  --radius-lg: 26px;
  --pill: 999px;
  --max: 1200px;
  --serif: "Canela", "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow: 0 2px 4px rgba(26, 24, 35, .04);
  --shadow-lift: 0 18px 50px -24px rgba(26, 24, 35, .22);
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Fluid base size: ~13.5px on small laptops (≤1280w) up to 15px on large displays (≥1760w).
     The UI is rem-based, so this scales headings, hero copy, and the prompt input together. */
  font-size: clamp(13.5px, 0.3125vw + 9.5px, 15px);
}
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding-left: 1.1rem; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--accent-soft); }

.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 999;
  padding: .7rem 1rem;
  background: var(--ink);
  color: #fff;
  border-radius: var(--pill);
}
.skip-link:focus { top: 1rem; }

.container { width: min(var(--max), calc(100% - 40px)); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Type --------------------------------------------------------------- */
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 400; }
/* Headings directly on the canvas/gradients go deep purple; headings inside
   white surfaces stay ink (dark sections override to white further down). */
h1, h2 { color: var(--ink-display); }
.card h2, .panel h2, .callout h2, .price-card h2 { color: var(--ink); }
h1 {
  font-family: var(--serif);
  font-size: clamp(2.7rem, 5.4vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -.018em;
}
h2 {
  font-family: var(--serif);
  font-size: clamp(2.05rem, 3.7vw, 3.3rem);
  line-height: 1.06;
  letter-spacing: -.016em;
}
h3 {
  font-family: var(--sans);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.lead { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.6; color: var(--ink-2); }
.hero-copy { font-size: clamp(1.12rem, 1.5vw, 1.34rem); line-height: 1.6; color: var(--ink-2); max-width: 34rem; margin-top: 1.4rem; }
.center { text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 1.3rem;
}
.eyebrow::before { content: none; }
.kicker {
  display: inline-block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

/* --- Header / nav ------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(252, 251, 249, .78);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 10px 40px rgba(18,17,37,.08);
  background: rgba(252, 251, 249, .92);
}
.nav-shell {
  width: min(var(--max), calc(100% - 40px));
  margin-inline: auto;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
.brand img { width: 238px; max-width: 100%; }
.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  gap: .25rem;
}
.site-nav a {
  color: #4f4964;
  font-size: 1rem;
  font-weight: 600;
  padding: .74rem .92rem;
  border-radius: var(--pill);
  transition: color .18s ease, background .18s ease;
}
.site-nav a:not(.nav-cta):hover,
.site-nav a:not(.nav-cta):focus-visible,
.site-nav a[aria-current="page"]:not(.nav-cta) { color: #24184a; background: rgba(77,64,199,.08); }
.site-nav a.nav-cta,
.site-nav a.nav-cta:hover,
.site-nav a.nav-cta:focus-visible { color: #fff; }
/* A little breathing room before the outlined CTA. */
.site-nav .nav-cta { margin-left: .85rem; }
.nav-talk { margin-left: .4rem; }

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  margin-left: auto;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: transparent;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 17px; height: 1.5px;
  background: var(--ink);
  position: relative;
  transition: transform .2s ease, opacity .2s ease;
  content: "";
}
.nav-toggle span::before { top: -5px; position: absolute; }
.nav-toggle span::after { top: 5px; position: absolute; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-5px) rotate(-45deg); }

/* --- Buttons ------------------------------------------------------------ */
.btn,
.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-size: .97rem;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1;
  min-height: 44px;
  padding: .55rem 1.4rem;
  border-radius: var(--pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn-primary,
.nav-cta {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover,
.nav-cta:hover,
.btn-primary:focus-visible,
.nav-cta:focus-visible { background: var(--accent-ink); transform: translateY(-1px); }
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
.btn-secondary:hover,
.btn-secondary:focus-visible { border-color: var(--ink); transform: translateY(-1px); }
.nav-cta {
  font-weight: 700;
  border-color: var(--accent);
  box-shadow: 0 10px 30px rgba(27,25,43,.06);
}
.btn-small { padding: .62rem 1.15rem; font-size: .92rem; }

/* --- Sections ----------------------------------------------------------- */
.main { overflow: clip; }
.section { padding-block: clamp(92px, 12vw, 168px); }
.section-tight { padding-block: clamp(80px, 9vw, 120px); }
.section.alt { background: var(--bg-2); }
.section.dark {
  background-color: var(--dark);
  background-image: url("/assets/img/illos/constellation.svg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
}
.section.dark h1, .section.dark h2, .section.dark h3 { color: #fff; }

.section-header { max-width: 40rem; margin-bottom: 3.5rem; }
.section-header.center { margin-inline: auto; text-align: center; }
.section-header h2 + p { margin-top: 1.1rem; }
.section-header > p { color: var(--ink-2); font-size: clamp(1.08rem, 1.4vw, 1.25rem); }
.section.dark .section-header > p { color: rgba(255,255,255,.66); }
.section.dark .eyebrow { color: rgba(255,255,255,.55); }
.section.dark .btn-secondary { color: #fff; border-color: rgba(255,255,255,.28); }
.section.dark .btn-secondary:hover,
.section.dark .btn-secondary:focus-visible { border-color: #fff; }

/* --- Hero --------------------------------------------------------------- */
.hero { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(80px, 11vw, 150px); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 1.6rem;
}
.hero-eyebrow::before { content: none; }
.hero h1 { max-width: 15ch; }

/* Centered, prompt-only hero (homepage): fills the first fold */
.hero-centered {
  text-align: center;
  display: flex;
  position: relative;
  min-height: calc(100vh - 70px);
  /* dvh tracks the *visible* viewport on iOS Safari (excludes the toolbars), so
     the embed doesn't run off the bottom of the screen. vh is the fallback. */
  min-height: calc(100dvh - 70px);
  padding-top: clamp(20px, 3vw, 48px);
  padding-bottom: clamp(20px, 3vw, 48px);
}
/* Prompt sits at the vertical middle; headline a touch above the midpoint to it */
.hero-centered .container {
  display: grid;
  grid-template-rows: 2.1fr auto 2.2fr auto 4.3fr;
  justify-items: center;
  container-type: inline-size;
}
.hero-centered h1 {
  grid-row: 2;
  max-width: none;
  white-space: nowrap;
  /* Two lines (manual <br>). Sized in container-width units so the longer line
     never exceeds ~65% of the content width — it scales down on narrow screens.
     Nudge the cqw value up/down to taste. */
  font-size: min(7rem, 8cqw);
  line-height: 1.08;
  margin: 0;
}
.hero-centered .hero-copy-wrap { grid-row: 4; max-width: 760px; width: 100%; }
.hero-centered .prompt-card { margin-inline: auto; }
.hero-question {
  margin-top: 0;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -.012em;
  color: var(--ink-display);
}
.hero-question + .prompt-card { margin-top: 1.8rem; }

/* Static pastel mesh behind the hero (and up under the translucent header).
   Adapted from the web-client's css/static gradient palette. */
.hero-bg {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background:
    linear-gradient(to bottom, rgba(252,251,249,0) 72%, var(--bg) 100%),
    radial-gradient(58% 50% at 16% 20%, rgba(255,242,236,.95) 0%, rgba(255,242,236,0) 62%),
    radial-gradient(48% 44% at 84% 16%, rgba(255,255,255,.60) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(64% 60% at 82% 78%, rgba(226,198,211,.82) 0%, rgba(226,198,211,0) 64%),
    radial-gradient(60% 56% at 12% 84%, rgba(235,216,226,.80) 0%, rgba(235,216,226,0) 64%),
    radial-gradient(92% 86% at 50% 46%, rgba(194,193,220,.55) 0%, rgba(194,193,220,0) 72%),
    linear-gradient(135deg, #FFF3ED 0%, #ECD2DC 46%, #CDCAE0 72%, #EAD9E2 100%);
}

/* The animated WebGL gradient (hero-bg.js) mounts into .hero-bg and should fill
   it; the CSS gradient above stays underneath as the static fallback. */
.hero-bg > div,
.hero-bg canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Soft gradient panels for selected content sections down the page */
.section.glow-bg,
.section-tight.glow-bg {
  background:
    radial-gradient(60% 80% at 14% 16%, rgba(255,242,236,.80) 0%, rgba(255,242,236,0) 60%),
    radial-gradient(66% 86% at 86% 84%, rgba(226,198,211,.58) 0%, rgba(226,198,211,0) 62%),
    radial-gradient(70% 90% at 82% 14%, rgba(194,193,220,.40) 0%, rgba(194,193,220,0) 64%),
    linear-gradient(135deg, #FFF7F2 0%, #F4DEE6 56%, #DBD8EA 100%);
}

/* Each section below the hero occupies ~80% of the viewport (homepage) */
.home .main > section:not(.hero) {
  min-height: 80vh;
  display: flex;
  align-items: center;
}

/* Scroll cue pinned to the bottom of the hero */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(16px, 3vh, 32px);
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  color: var(--ink-3);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.scroll-cue-arrow {
  width: 20px; height: 20px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  animation: scrollCue 1.8s ease-in-out infinite;
}
@keyframes scrollCue {
  0%, 100% { transform: rotate(45deg) translate(-2px, -2px); opacity: .45; }
  50%      { transform: rotate(45deg) translate(2px, 2px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue-arrow { animation: none; }
}

/* Statement band that follows the hero */
.intro-statement p {
  max-width: 760px;
  margin-inline: auto;
  font-size: clamp(1.2rem, 1.9vw, 1.6rem);
  line-height: 1.5;
  color: var(--ink-2);
}

.prompt-card {
  position: relative;
  display: flex;
  gap: .5rem;
  align-items: center;
  max-width: 44rem;
  margin-top: 2.2rem;
  padding: .5rem .5rem .5rem 1.2rem;
  border-radius: var(--pill);
  background:
    radial-gradient(140% 90% at 50% -20%, rgba(255,255,255,.88) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(150deg, rgba(255,255,255,.80) 0%, rgba(255,255,255,.70) 60%, rgba(255,255,255,.77) 100%);
  border: 1px solid rgba(255,255,255,.70);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.95),
    0 12px 30px -16px rgba(36,24,74,.20);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
}
.prompt-card:focus-within {
  border-color: rgba(255,255,255,.85);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,1),
    0 16px 38px -16px rgba(36,24,74,.26);
}
.prompt-card input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  /* >=16px stops iOS Safari from auto-zooming the page when the field is focused. */
  font-size: max(16px, 1.04rem);
  padding: .35rem 0;
}
.prompt-card input::placeholder { color: var(--ink-3); }
.prompt-card input:focus { outline: none; }
.prompt-card .btn { flex: 0 0 auto; }

/* Embedded Glow start experience (replaces the question + input on submit).
   The WRAPPER carries the height; the iframe is absolutely positioned to fill it.
   This is required on iOS Safari, which otherwise sizes an iframe to its content
   height (ignoring CSS height) and lets it run off the bottom of the screen. */
.glow-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

/* When the embed loads it replaces the question + input. Only on very tall
   windows (>1120px) do the full headline and scroll cue stay, with the embed
   bounded by its max-height (680px). Below that the headline shrinks and docks
   to the top, the scroll cue goes away, and the embed flexes into all the
   remaining height — the goal is to keep it at least ~600px tall whenever the
   window allows. JS toggles .is-embedded. */
.hero-centered h1 { transition: font-size .45s ease; }
.glow-embed { transition: opacity .45s ease; }
.hero-centered { transition: padding-top .45s ease; }
.hero-centered.is-embedded .hero-copy-wrap { max-width: 660px; }

@media (max-height: 1120px), (max-width: 600px) {
  .hero-centered.is-embedded { padding-top: 8px; padding-bottom: 14px; }
  .hero-centered.is-embedded .container {
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
    row-gap: clamp(6px, 1.4vh, 14px);
  }
  .hero-centered.is-embedded h1 {
    grid-row: 1;
    white-space: normal;
    /* Scales with window height: ~2rem at 740px up to full size at 1120px,
       so crossing either media boundary is seamless. The embed takes its
       max height first; the headline absorbs what's left. */
    font-size: min(8cqw, clamp(1.8rem, 17vh - 96px, 7rem));
  }
  .hero-centered.is-embedded .hero-copy-wrap {
    grid-row: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
  }
  /* Column flex: grow fills the row (so the wrap never collapses — its iframe
     is absolutely positioned and contributes no height), max-height caps it,
     justify-content centers the capped box in the leftover space. */
  .hero-centered.is-embedded .glow-embed-wrap {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    max-height: 680px;
  }
  .hero-centered.is-embedded .scroll-cue { display: none; }
}
/* Short windows: shrink the headline further and drop the embed's height cap
   (JS sizes it to the visible viewport there). */
@media (max-height: 740px), (max-width: 600px) {
  .hero-centered.is-embedded h1 { font-size: clamp(1.4rem, 3vw, 2rem); }
  /* JS sizes the wrap to the visible viewport here — don't let flex-grow
     re-expand it (matters when the iOS keyboard shrinks the viewport). */
  .hero-centered.is-embedded .glow-embed-wrap { flex: 0 0 auto; max-height: none; }
}

/* While the embed is open on PHONES/SHORT WINDOWS ONLY: pin the page with
   position:fixed (more reliable than overflow:hidden on iOS, which ignores it
   for focus-into-view scrolling) and hide everything below the hero, so iOS
   can't scroll the parent when the iframe's input is focused. Desktop keeps
   normal scrolling and the rest of the page stays reachable. */
@media (max-height: 740px), (max-width: 600px) {
  html.embed-open { overflow: hidden; height: 100%; }
  html.embed-open body {
    position: fixed;
    inset: 0;
    width: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }
  html.embed-open .main > section:not(.hero),
  html.embed-open .site-footer { display: none; }
}

/* Embed wrapper + close (X) button overlaid in the top-right corner.
   The wrapper holds the height (capped at 680px); the iframe fills it absolutely. */
.glow-embed-wrap {
  position: relative;
  width: 100%;
  height: calc(100vh - 360px);
  height: calc(100dvh - 360px);
  max-height: 680px;
  min-height: 360px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(27, 25, 43, .16);
}
.glow-embed-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: background .18s ease, transform .18s ease, color .18s ease;
}
.glow-embed-close:hover,
.glow-embed-close:focus-visible { background: #fff; color: var(--accent); transform: scale(1.06); }

/* Embedded video (e.g. Vimeo) — height capped to the section, centered, with white
   bars on the left/right. The gradient fills the breathing room above/below. */
#intro-video {
  /* Tall enough on narrow/portrait screens, where a full-width 16:9 alone
     would leave only a thin strip; the video centers in the gradient. On
     desktop the 70vh frame already exceeds this, so nothing changes there. */
  min-height: clamp(360px, 62vh, 720px);
  margin: 0;
  padding: clamp(32px, 4.5vw, 72px) 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background:
    radial-gradient(60% 80% at 14% 16%, rgba(255,242,236,.80) 0%, rgba(255,242,236,0) 60%),
    radial-gradient(66% 86% at 86% 84%, rgba(226,198,211,.58) 0%, rgba(226,198,211,0) 62%),
    radial-gradient(70% 90% at 82% 14%, rgba(194,193,220,.40) 0%, rgba(194,193,220,0) 64%),
    linear-gradient(135deg, #FFF7F2 0%, #F4DEE6 56%, #DBD8EA 100%);
}
.video-frame {
  position: relative;
  height: min(70vh, 56.25vw); /* capped height; never taller than a full-width 16:9 */
  aspect-ratio: 16 / 9;        /* width follows from the height */
  max-width: 100%;
  line-height: 0;
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

.prompt-examples {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  max-width: 36rem;
  margin-top: 1.2rem;
}
.prompt-examples .px-label { color: var(--ink-3); font-size: .88rem; }
.prompt-examples button {
  cursor: pointer;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-2);
  font-size: .9rem;
  padding: .42rem .85rem;
  border-radius: var(--pill);
  transition: border-color .18s ease, color .18s ease;
}
.prompt-examples button:hover,
.prompt-examples button:focus-visible { border-color: var(--ink); color: var(--ink); }

.prompt-status { margin-top: 1rem; min-height: 1.3em; color: var(--accent-ink); font-weight: 500; font-size: .98rem; }
.hero-secondary { margin-top: 1.8rem; color: var(--ink-2); font-size: .98rem; }
.hero-secondary a { color: var(--accent); font-weight: 600; }
.hero-support { margin-top: 1.5rem; color: var(--ink-2); }

/* --- Hero visual: request -> introduction ------------------------------- */
.intro-flow { display: grid; gap: 1.1rem; max-width: 420px; margin-left: auto; }
.ask-bubble {
  justify-self: end;
  max-width: 88%;
  padding: 1rem 1.25rem;
  border-radius: 18px 18px 4px 18px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
}
.ask-bubble .ask-label {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: .45rem;
}
.intro-card {
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
}
.intro-card-head { display: flex; align-items: center; gap: .9rem; }
.intro-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: linear-gradient(135deg, #f7c97e, #ef9ec6 52%, #b79bf2);
}
.intro-head-text { flex: 1 1 auto; min-width: 0; }
.intro-head-text strong { display: block; font-size: 1.04rem; font-weight: 600; }
.intro-head-text span { color: var(--ink-2); font-size: .9rem; }
.intro-check {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: #16a86c;
  color: #fff;
  font-size: .78rem;
}
.intro-reason { margin: 1.1rem 0 0; color: var(--ink-2); font-size: .98rem; line-height: 1.55; }
.intro-actions { display: flex; align-items: center; gap: .85rem; margin-top: 1.35rem; }
.badge {
  display: inline-flex;
  align-items: center;
  padding: .42rem .9rem;
  border-radius: var(--pill);
  background: var(--ink);
  color: #fff;
  font-size: .85rem;
  font-weight: 600;
}
.intro-meta { color: var(--ink-3); font-size: .84rem; }

/* --- Proof points ------------------------------------------------------- */
.proof-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin-top: 2.4rem;
}
.proof-item {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.1rem;
  border-radius: var(--pill);
  border: 1px solid var(--line-2);
  color: var(--ink);
  font-size: .96rem;
  font-weight: 500;
}
.proof-item::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* --- Grids / cards ------------------------------------------------------ */
.grid { display: grid; gap: 1.5rem; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Liquid-glass surface: lightly translucent with the shine painted on —
   a top curvature highlight, a diagonal gloss streak, and a frosted base. */
.card,
.price-card,
.callout,
.panel {
  position: relative;
  background:
    radial-gradient(130% 65% at 50% -8%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(115deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.55) 48%, rgba(255,255,255,0) 60%),
    linear-gradient(150deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.38) 55%, rgba(255,255,255,.52) 100%);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 28px;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.95),
    inset 0 -12px 24px -18px rgba(36,24,74,.16),
    0 14px 36px -22px rgba(36,24,74,.22),
    0 5px 14px -10px rgba(36,24,74,.10);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
}
.card { padding: 2rem; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
/* Whole cards can be links (homepage) */
a.card { display: block; color: inherit; }
a.audience-card { display: flex; }
a.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.card h3 { margin-bottom: .65rem; }
.card p { color: var(--ink-2); font-size: .92rem; line-height: 1.55; }
/* Cards on the solid .alt sections are solid white — only the painted shine,
   rim light, and shadows carry the glass look there (this matches the
   approved test, where this rule out-ranked the translucent base). */
.section.alt .card { background: #fff; }
/* On the pink glow-bg sections the translucent base picks up too much
   color — keep those cards the same white as cards on solid sections. */
.section.glow-bg .card {
  background:
    radial-gradient(130% 65% at 50% -8%, rgba(255,255,255,.90) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(115deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.60) 48%, rgba(255,255,255,0) 60%),
    linear-gradient(150deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.86) 55%, rgba(255,255,255,.92) 100%);
}
/* Cards nested inside another surface: the full drop shadow is too heavy
   there — flatten to a hairline border and a small lift. */
.panel .card,
.card .card,
.callout .card {
  border-color: rgba(36,24,74,.08);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.95),
    0 10px 24px -16px rgba(36,24,74,.18);
}
/* Rim light: a thin ring whose brightness varies around the perimeter,
   like light catching the edge of curved glass. */
.card::after,
.price-card::after,
.callout::after,
.prompt-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  background: conic-gradient(from 200deg at 50% 50%,
    rgba(255,255,255,.95),
    rgba(255,255,255,.10) 22%,
    rgba(255,255,255,.65) 47%,
    rgba(255,255,255,.08) 72%,
    rgba(255,255,255,.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, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
/* The .reveal rule further down would otherwise win the `transition` cascade
   and slow the hover lift to .6s — restate it at higher specificity. */
.card.reveal { transition: opacity .6s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.grid .card:hover,
.flow-grid .card:hover,
.audience-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.95);
  background:
    radial-gradient(130% 65% at 50% -8%, rgba(255,255,255,.98) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(115deg, rgba(255,255,255,0) 34%, rgba(255,255,255,.75) 48%, rgba(255,255,255,0) 64%),
    linear-gradient(150deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.72) 55%, rgba(255,255,255,.82) 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,1),
    inset 0 -12px 24px -18px rgba(36,24,74,.12),
    0 0 0 6px rgba(255,255,255,.20),
    0 24px 60px -26px rgba(36,24,74,.32),
    0 10px 22px -12px rgba(36,24,74,.16);
}
.card-link {
  display: inline-flex;
  margin-top: 1rem;
  color: var(--accent);
  font-weight: 600;
  font-size: .96rem;
}
.audience-card { display: flex; flex-direction: column; }
.audience-card .glow-list { margin: 1.1rem 0 1.5rem; }
.audience-card .card-link { margin-top: auto; }

/* --- How it works: open numbered steps ---------------------------------- */
.flow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
}
.icon-bubble {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 14px;
  font-family: var(--sans);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent-ink);
  background: linear-gradient(135deg, rgba(247,201,126,.24), rgba(239,158,198,.24) 55%, rgba(183,155,242,.24));
  border: 1px solid rgba(255,255,255,.70);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.70);
  margin-bottom: 1.3rem;
}

/* --- Split -------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
.split.reverse > :first-child { order: 2; }
.copy-block h2 + .glow-list,
.copy-block .lead + .glow-list { margin-top: 1.8rem; }
.panel { padding: 2.2rem; }
.section.dark .panel { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }

/* --- Checkmark list ----------------------------------------------------- */
.glow-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.glow-list li {
  position: relative;
  padding-left: 2rem;
  color: var(--ink-2);
  font-size: 1.05rem;
  line-height: 1.5;
}
.glow-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .45em;
  width: 12px; height: 7px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.glow-list.compact { gap: .65rem; }
.glow-list.compact li { font-size: .98rem; padding-left: 1.8rem; }

/* --- Mission band ------------------------------------------------------- */
.mission-band { text-align: center; }
.mission-band .container { max-width: 860px; }
.mission-band .eyebrow { color: rgba(255,255,255,.55); justify-content: center; }
.mission-band h2 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
.mission-band p { color: rgba(255,255,255,.7); font-size: clamp(1.1rem, 1.5vw, 1.3rem); margin-top: 1.3rem; }

/* --- CTA blocks --------------------------------------------------------- */
.cta-actions,
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 2rem;
}
.section-header.center + .cta-actions { justify-content: center; }
.breadcrumb { color: var(--ink-3); font-size: .9rem; margin-bottom: 1.4rem; }
.breadcrumb a { color: var(--ink-2); }
.page-hero { padding-top: clamp(64px, 8vw, 110px); padding-bottom: clamp(8px, 2vw, 24px); }
.page-hero h1 { max-width: 16ch; }

/* --- Footer ------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(56px, 7vw, 88px) 36px;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  column-gap: 1.75rem;
  row-gap: 2.5rem;
}
.footer-brand img { width: 205px; margin-bottom: 1.2rem; }
.footer-brand p { color: var(--ink-2); max-width: 24rem; font-size: .92rem; }
.footer-mission { font-family: var(--serif); font-size: 1.4rem; color: var(--ink); margin-top: 1rem; }
.footer-col { display: grid; gap: .5rem; align-content: start; }
.footer-col h3,
.footer-col h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); font-weight: 600; margin-bottom: .3rem; }
.footer-col a { color: var(--ink-2); font-size: .9rem; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .8rem 1.5rem;
  color: var(--ink-3);
  font-size: .88rem;
}

/* --- Illustrations ------------------------------------------------------ */
/* Mini-scene artwork at the top of audience cards (homepage) */
.card-illo { margin-bottom: 1.3rem; }
.card-illo img { width: 100%; height: auto; display: block; }
/* Same scenes inside the split panels on the use-cases page */
.panel-illo { margin-bottom: 1.6rem; }
.panel-illo img { width: 100%; max-width: 430px; height: auto; display: block; margin-inline: auto; }
/* Small spot icons above card titles */
.spot-art { width: 60px; height: 60px; margin-bottom: 1.2rem; }
.spot-art svg { width: 100%; height: 100%; display: block; }
/* Illustrated how-it-works steps with a number badge */
.step-art { position: relative; width: 68px; height: 68px; margin-bottom: 1.4rem; }
.step-art svg { width: 100%; height: 100%; display: block; }
.step-num {
  position: absolute;
  right: -10px; top: -6px;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 6px rgba(36,24,74,.12);
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  color: var(--accent-ink);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
}

/* --- Reveal ------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* --- Ported components (platform / security / pricing / about) ---------- */
.logo-row { padding-block: clamp(24px, 3vw, 40px); }
.logo-strip {
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem;
  align-items: center; justify-content: space-between;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.4rem 1.8rem;
}
.logo-strip p { color: var(--ink-2); font-weight: 500; margin: 0; }
.logo-cloud { display: flex; flex-wrap: wrap; gap: .6rem; }
.logo-cloud span {
  display: inline-flex; align-items: center;
  padding: .5rem 1rem; border-radius: var(--pill);
  background: #fff; border: 1px solid var(--line-2);
  color: var(--ink); font-size: .92rem; font-weight: 500;
}

.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.icon {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 13px;
  color: var(--accent-ink);
  background: linear-gradient(135deg, rgba(247,201,126,.26), rgba(239,158,198,.26) 55%, rgba(183,155,242,.26));
  border: 1px solid rgba(255,255,255,.70);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.70);
  margin-bottom: 1.2rem;
}
.icon svg { width: 22px; height: 22px; }

.stack { display: grid; gap: 1rem; }
.stack .card { padding: 1.4rem 1.5rem; }
.stack .card h3 { margin-bottom: .35rem; }

.stat-row { display: flex; flex-wrap: wrap; gap: 1.8rem 2.4rem; margin-top: 2.2rem; }
.stat strong { display: block; font-family: var(--serif); font-size: 2.3rem; line-height: 1; color: var(--ink); }
.stat span { color: var(--ink-2); font-size: .95rem; }

.callout {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.4rem 2.5rem;
  padding: clamp(28px, 4vw, 46px);
}
.callout h2 { margin-bottom: .6rem; }
.callout p { color: var(--ink-2); max-width: 46rem; }
.callout .btn { flex: 0 0 auto; }

/* Pricing */
.pricing-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
.price-card {
  display: flex; flex-direction: column;
  padding: 2rem;
}
.price-card.featured { border-color: var(--accent); box-shadow: var(--shadow-lift); }
.price-badge {
  align-self: flex-start; margin-bottom: 1rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: var(--accent); border-radius: var(--pill); padding: .3rem .75rem;
}
.price-name { font-weight: 600; font-size: 1.2rem; }
.price-amount { font-family: var(--serif); font-size: 2.8rem; line-height: 1; margin: .5rem 0 .1rem; }
.price-period { color: var(--ink-3); font-size: .9rem; }
.price-card > p { color: var(--ink-2); margin-top: .8rem; }
.price-card .glow-list { margin: 1.5rem 0; gap: .7rem; }
.price-card .glow-list li { font-size: .98rem; padding-left: 1.8rem; }
.price-card .btn { margin-top: auto; width: 100%; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 960px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .callout { flex-direction: column; align-items: flex-start; }
  .hero-grid { grid-template-columns: 1fr; gap: 56px; }
  .intro-flow { margin-inline: 0; max-width: 460px; }
  .grid-3 { grid-template-columns: 1fr; }
  .flow-grid { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 2rem; }
  .split { grid-template-columns: 1fr; gap: 44px; }
  .split.reverse > :first-child { order: 0; }
  /* Footer: brand stacks full-width on top, the 3 link columns stay in one row. */
  .footer-grid { grid-template-columns: repeat(3, 1fr); column-gap: 1.25rem; }
  .footer-brand { grid-column: 1 / -1; }

  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute;
    left: 24px; right: 24px;
    top: calc(100% + 10px);
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: .25rem;
    padding: 1rem;
    border-radius: var(--radius-lg);
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lift);
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: .8rem 1rem; }
  .nav-cta, .nav-talk { text-align: center; justify-content: center; }
}
@media (max-width: 560px) {
  .container { width: calc(100% - 36px); }
  .nav-shell { width: calc(100% - 36px); }
  .hero-centered h1 { white-space: normal; font-size: clamp(2.1rem, 10vw, 2.9rem); }
  .prompt-card { flex-wrap: wrap; border-radius: 18px; padding: .9rem; gap: .7rem; }
  .prompt-card input { width: 100%; padding: .3rem .3rem; }
  .prompt-card .btn { width: 100%; }
  .flow-grid { grid-template-columns: 1fr; }
  .grid-4, .pricing-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(3, 1fr); column-gap: 1rem; }
  .cta-actions .btn, .hero-actions .btn { width: 100%; }
}

/* Short viewports (small laptops): nudge the base size down regardless of width,
   so a wide-but-short window also scales down. */
@media (max-height: 760px) {
  html { font-size: 13.5px; }
}
@media (max-height: 640px) {
  html { font-size: 12.5px; }
}