/* ==========================================================================
   Glow Tech, Inc. corporate site stylesheet.
   Paper canvas, hairline rules, Canela serif display, italic serif section
   slugs, tinted product pills. Three products, three tints: Eka orange,
   Glow pink, Agent violet. Self-contained; no JS dependencies beyond the
   small inline scripts at the bottom of index.html.
   ========================================================================== */

@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;
  --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);
  --hero-violet: #7263d6;
  /* Product tints, sampled from the mockup. */
  --eka: #ff6038;
  --eka-ink: #d9482a;
  --glow-blue: #4880e8;
  --dark: #161320;
  --max: 1080px;
  --max-wide: 1160px;
  --pill: 999px;
  --serif: "Canela", "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video, iframe { max-width: 100%; display: block; }
[hidden] { display: none !important; }
img, svg, video { height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }
::selection { background: var(--accent-soft); }

:focus-visible {
  outline: 2px solid var(--hero-violet);
  outline-offset: 3px;
  border-radius: 4px;
}

.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; }
.container-wide { width: min(var(--max-wide), calc(100% - 40px)); margin-inline: auto; }
.center { text-align: center; }
.wide-break { display: none; }
@media (min-width: 901px) { .wide-break { display: inline; } }
.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 { margin: 0; font-weight: 400; color: var(--ink-display); text-wrap: balance; }
h1 {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 4.31vw, 3.875rem);
  line-height: 1.1;
  letter-spacing: -.022em;
}
h2 {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3.1vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -.016em;
}
.lead {
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.56;
  color: var(--ink-2);
  max-width: 35rem;
}
.eyebrow {
  margin: 0 0 1.1rem;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* Italic serif section slug with a product mark in front of it. */
.slug {
  display: flex;
  align-items: center;
  gap: .62rem;
  margin: 0 0 1.55rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--ink-3);
}
.slug img, .slug svg { flex: none; }
.slug--eka { color: var(--eka-ink); }
.slug--eka img { width: 24px; height: 24px; }
.slug--glow { color: var(--accent); }
.slug--glow img { width: 26px; height: 26px; }
.slug--agent { color: var(--hero-violet); }
.slug--agent svg { width: 22px; height: 22px; color: var(--hero-violet); }

/* --- Arrow glyph -------------------------------------------------------- */
.arrow {
  flex: none;
  width: 12px;
  height: 12px;
  margin-left: 2px;
  opacity: .62;
}

/* --- Product pills ------------------------------------------------------ */
.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: .62rem;
  min-height: 50px;
  padding: 0 19px 0 17px;
  border: 1px solid transparent;
  border-radius: var(--pill);
  font-size: .885rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
  transition: transform .18s ease, filter .18s ease;
}
.pill:hover { transform: translateY(-1px); filter: brightness(.985); }
.pill-ico { flex: none; width: 21px; height: 21px; }
.pill--eka   { background: rgba(255, 96, 56, .10);  border-color: rgba(255, 96, 56, .40); }
.pill--glow  { background: rgba(199, 46, 148, .08); border-color: rgba(199, 46, 148, .33); }
.pill--agent { background: rgba(114, 99, 214, .10); border-color: rgba(114, 99, 214, .37); }
.pill--agent .pill-ico { color: var(--hero-violet); }

/* --- Black pill button -------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 52px;
  padding: 0 16px;
  border-radius: var(--pill);
  background: var(--ink);
  color: #fff;
  font-size: .94rem;
  font-weight: 500;
  line-height: 1.2;
  transition: background .18s ease, transform .18s ease;
}
.btn:hover { background: #2b2740; transform: translateY(-1px); }
.btn-ico { flex: none; width: 25px; height: 25px; }
.btn .arrow { opacity: .7; margin-left: 9px; }
.btn--plain { padding: 0 22px; }

/* --- Header ------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line);
  background: rgba(252, 251, 249, .78);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
}
.nav-shell {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  width: calc(100% - 80px);
  max-width: none;
  margin-inline: auto;
  height: 71px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  justify-self: start;
  font-family: var(--serif);
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: -.012em;
  color: var(--ink);
}
.brand em { font-style: italic; color: var(--ink); }
.brand-mark { width: 30px; height: 30px; flex: none; }
.site-nav {
  display: flex;
  align-items: center;
  gap: 40px;
  justify-self: center;
}
.site-nav a {
  font-size: .94rem;
  color: var(--ink);
  transition: color .18s ease;
}
.site-nav a:hover { color: var(--hero-violet); }

.nav-toggle {
  display: none;
  justify-self: end;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle svg { width: 18px; height: 18px; margin: 0 auto; }
.nav-panel { display: none; }

/* --- Hero --------------------------------------------------------------- */
.hero { padding: 89px 0 59px; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1538fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
.hero h1 { max-width: none; }
.hero-accent { color: var(--hero-violet); }
.hero .lead { margin-top: 1.08rem; max-width: 36rem; }
.hero .eyebrow { margin-top: 2.04rem; margin-bottom: .71rem; }
.hero-art { justify-self: end; width: 100%; max-width: 520px; }
.hero-bloom { position: relative; display: block; }
.hero-bloom > img { width: 100%; }

/* --- Mission band ------------------------------------------------------- */
.mission {
  padding: 129px 0 128px;
  text-align: center;
  background-image: linear-gradient(90deg, #d7ceee 0%, #e7cde3 50%, #f1d7d2 100%);
}
.mission .slug {
  justify-content: center;
  margin-bottom: 1.51rem;
  font-size: 1.15rem;
  color: var(--ink-display);
  opacity: .85;
}
.mission h2 {
  font-size: clamp(2rem, 3.8vw, 3.35rem);
  line-height: 1.175;
  max-width: 24ch;
  margin-inline: auto;
}
.mission-accent { color: var(--hero-violet); }

/* --- Split sections (media + copy) -------------------------------------- */
.split { padding: 104px 0; }
.split--alt { background: var(--bg-2); }
.split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 39px;
  align-items: center;
}
.split--copy-left .split-media { order: 2; }
.split--copy-left .split-copy { order: 1; }
.split-copy h2 { margin-bottom: 17px; }
.split-copy p { color: var(--ink-2); max-width: 458px; line-height: 1.75; }
.split-copy .btn { margin-top: .5rem; }

/* Media boxes: video poster + live Glow widget. */
.media {
  position: relative;
  width: 100%;
  aspect-ratio: 13 / 11;
  border-radius: 20px;
  overflow: hidden;
  background-image: linear-gradient(135deg, #cfc7f0 0%, #edd3e8 42%, #f7ded0 72%, #fbe3cd 100%);
  box-shadow: 0 18px 44px rgba(26, 24, 35, .09);
}

/* Video ------------------------------------------------------------------ */
/* A 16:9 film in a 13:11 poster frame. The poster is cover-cropped to fill the
   frame; on play the frame opens out to the film's own 16:9 so the picture is
   shown whole, with no letterbox bands and nothing cropped. */
.video-box { transition: aspect-ratio .35s ease; }
.video-box.is-playing { aspect-ratio: 16 / 9; }
.video-box img,
.video-box video { width: 100%; height: 100%; object-fit: cover; }
/* Caption styling only. Vertical placement is pinned per cue in the .vtt
   (line:-2), not here — nudging the whole track container fought the
   browser's own positioning and made cues drift between plays. */
.video-box video::cue {
  font-size: .82em;
  line-height: 1.35;
  background: rgba(12, 11, 20, .62);
  color: #fff;
}
.video-btn {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
}
.video-play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 68px; height: 68px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 6px 20px rgba(26, 24, 35, .18);
  transition: transform .18s ease;
}
.video-btn:hover .video-play { transform: translate(-50%, -50%) scale(1.06); }
.video-play svg { width: 22px; height: 22px; margin-left: 3px; color: var(--ink); }

/* Glow widget ------------------------------------------------------------ */
/* Resting state: the gradient panel with a single control. The conversation
   is only loaded once this is pressed (see the script at the foot of the
   page for why). */
.widget-start {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  width: 100%;
  padding: 2rem;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.widget-orb {
  width: clamp(104px, 26%, 150px);
  height: auto;
  margin-bottom: .2rem;
  pointer-events: none;
}
.widget-cta {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 54px;
  padding: 0 30px;
  border-radius: var(--pill);
  background: var(--accent);
  color: #fff;
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -.008em;
  box-shadow: 0 8px 22px rgba(199, 46, 148, .32);
  transition: transform .18s ease, background .18s ease;
}
.widget-mic { width: 22px; height: 22px; color: #fff; }
.widget-start:hover .widget-cta { transform: translateY(-1px); background: var(--accent-ink); }
.widget-start:focus-visible .widget-cta { outline: 2px solid var(--ink); outline-offset: 3px; }
.widget-hint { font-size: 1rem; color: var(--ink-2); }

.widget-box iframe {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

/* --- Agent chat mock ---------------------------------------------------- */
.chat {
  width: 100%;
  aspect-ratio: 13 / 11;
  padding: 30px;
  border: 1px solid rgba(26, 24, 35, .06);
  border-radius: 24px;
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.chat-head p { margin: 0; }
.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1px;
}
.chat-head-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.35;
  color: var(--ink-3);
}
.chat-status {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .92rem;
  line-height: 1.35;
  color: var(--ink-2);
}
.chat-dot { width: 8px; height: 8px; border-radius: 50%; background: #3fa36b; flex: none; }
.chat-msg {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.chat-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: none;
}
.chat-avatar svg { width: 16px; height: 16px; }
.chat-avatar--you { background: var(--ink); color: #fff; }
.chat-avatar--agent { background: var(--hero-violet); color: #fff; }
.chat-avatar--glow { background: #fff; border: 1px solid var(--line); }
.chat-avatar--glow img { width: 22px; height: 22px; }
.chat-who {
  font-size: .92rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink-3);
  margin: 0 0 5px;
}
.chat-who--glow { color: var(--glow-blue); }
.chat-bubble {
  margin: 0;
  padding: 13px 16px;
  border-radius: 14px;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--ink);
}
.chat-bubble--you { background: #fff; }
.chat-bubble--agent { background: #e4e1ea; }
.chat-bubble--glow { background: #efdee4; }

/* --- Quote band --------------------------------------------------------- */
.quote { padding: 96px 0 97px; }
.quote blockquote {
  margin: 0;
  padding: 75px 0 70px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.quote p {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.58rem, 2.45vw, 2.18rem);
  line-height: 1.24;
  letter-spacing: -.012em;
  color: var(--ink-display);
}
.quote .container { width: min(884px, calc(100% - 40px)); }

/* --- Closing CTA -------------------------------------------------------- */
.cta {
  padding: 117px 0 112px;
  text-align: center;
  background: var(--bg-2);
}
.cta h2 { font-size: clamp(2.05rem, 3.6vw, 3.23rem); }
.cta .lead {
  margin: 1.16rem auto 0;
  max-width: 36rem;
  font-size: clamp(1.05rem, 1.28vw, 1.14rem);
  line-height: 1.62;
}
.cta .pill-row { justify-content: center; margin-top: 2.2rem; }

/* --- Footer ------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg);
  padding: 60px 0 34px;
  font-size: .875rem;
  color: var(--ink-2);
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.2rem 40px;
  padding-bottom: 57px;
}
.footer-brand .brand { font-size: 1.38rem; gap: 8.5px; }
.footer-brand .brand-mark { width: 26px; height: 26px; }
.footer-brand p { margin-top: .2rem; max-width: 12.4rem; line-height: 1.5; }
.footer-col { display: grid; gap: .62rem; align-content: start; }
.footer-col h2,
.footer-col h4 {
  margin: 0 0 .3rem;
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .045em;
  line-height: 1.3;
  color: var(--ink);
}
.footer-col a { color: var(--ink-2); transition: color .18s ease; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .6rem 2rem;
  border-top: 1px solid var(--line);
  padding-top: 24px;
  font-size: .84rem;
  color: var(--ink-3);
}
.footer-sign {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
}

/* --- Legal, contact and 404 pages (shared shell) ------------------------ */
/* 404.html reuses .hero as a plain padded band and .product-link as its
   inline back-link; both are kept here so that page is unaffected. */
.product-link {
  display: inline-block;
  font-weight: 500;
  color: var(--accent-ink);
  border-bottom: 1px solid currentColor;
  padding-bottom: .1rem;
  transition: opacity .18s ease;
}
.product-link:hover { opacity: .7; }

.contact-page { padding: clamp(3rem, 6vw, 5rem) 0 clamp(3.5rem, 7vw, 5.5rem); }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.contact-intro h1 { font-size: clamp(2.3rem, 4.2vw, 3.3rem); margin-bottom: 1.2rem; }
.contact-intro .lead { max-width: 26rem; }
.contact-ways { margin: 2.4rem 0 0; display: grid; gap: 1.4rem; }
.contact-ways dt {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink-3);
  margin-bottom: .25rem;
}
.contact-ways dd { margin: 0; color: var(--ink-2); }
.contact-ways a { color: var(--accent-ink); }
.form {
  display: grid;
  gap: 1.15rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(1.5rem, 3vw, 2.2rem);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.field { display: grid; gap: .45rem; }
.field label { font-size: .9rem; color: var(--ink-2); }
.field input,
.field select,
.field textarea {
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: .68rem .85rem;
  width: 100%;
}
.field textarea { min-height: 9.5rem; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-submit {
  justify-self: start;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--ink);
  border: none;
  border-radius: var(--pill);
  padding: .8rem 1.6rem;
  cursor: pointer;
  transition: background .18s ease;
}
.form-submit:hover { background: var(--ink-display); }
.form-submit[disabled] { opacity: .6; cursor: default; }
.form-status { margin: 0; font-size: .9rem; color: var(--ink-2); }
.form-success {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(1.5rem, 3vw, 2.2rem);
}
.form-success h3 { margin-bottom: .5rem; font-family: var(--serif); font-weight: 400; font-size: 1.65rem; color: var(--ink-display); }
.contact-line a {
  color: var(--accent-ink);
  border-bottom: 1px solid currentColor;
  padding-bottom: .05rem;
}
.section { padding: clamp(3.6rem, 7vw, 5.5rem) 0; border-top: 1px solid var(--line); }
.section-slug {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--ink-3);
  margin: 0 0 1.6rem;
}
/* Legal documents -----------------------------------------------------------
   One scale for Privacy Policy and Terms of Use, matching the treatment on
   talktoglow.com so the two sites' legal pages read as one set.

     h1   2.28x body   serif, document title
     h2   1.58x body   serif, numbered section, hairline rule above
     h3   1.26x body   sans 600, subsection
     h4   1.11x body   sans 650
     body 1.00x        line-height 1.7
     meta 0.91x        quiet, subordinate to the title

   Vertical rhythm is one unit (--legal-step) stepped 4 / 3 / 2 above h2 / h3 /
   h4 and 1.4 / 1 / .7 below, so the space a heading opens is always larger
   than the space it closes, and every level follows the same pattern instead
   of its own ad-hoc numbers. The measure is capped in ch as well as px: 820px
   of 16px text runs to ~110 characters a line, well past comfortable.
   --------------------------------------------------------------------------- */
.legal {
  --legal-body: clamp(16px,   1.06rem, 17.2px);
  --legal-meta: clamp(14.6px,  .97rem, 15.8px);
  --legal-h4:   clamp(17.8px,  1.18rem, 19px);
  --legal-h3:   clamp(20.2px,  1.34rem, 21.8px);
  --legal-h2:   clamp(25.3px,  1.68rem, 27.3px);
  --legal-h1:   clamp(36.5px,  2.42rem, 39.3px);
  --legal-step: .75rem;
  --legal-quiet: var(--ink-3);

  max-width: min(820px, 64ch);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
  font-size: var(--legal-body);
  line-height: 1.7;
  color: var(--ink-2);
}
.legal h1 {
  font-size: var(--legal-h1);
  line-height: 1.14;
  letter-spacing: -.014em;
  margin: 0 0 calc(var(--legal-step) * 1.6);
}
.legal .legal-updated,
.legal .legal-meta {
  color: var(--legal-quiet);
  font-size: var(--legal-meta);
  line-height: 1.55;
  margin: 0;
}
.legal .legal-updated { margin-bottom: calc(var(--legal-step) * 3.2); }
/* Open the gap after the last metadata line. `:last-of-type` cannot do this:
   the meta lines are <p>, so it matches only the final paragraph of the whole
   document. Target the first element that is not metadata instead. */
.legal .legal-meta + :not(.legal-meta) { margin-top: calc(var(--legal-step) * 3.2); }
.legal h2 {
  font-family: var(--serif);
  font-size: var(--legal-h2);
  line-height: 1.22;
  letter-spacing: -.012em;
  color: var(--ink-display);
  margin: calc(var(--legal-step) * 4) 0 calc(var(--legal-step) * 1.4);
  padding-top: calc(var(--legal-step) * 2.6);
  border-top: 1px solid var(--line);
}
.legal h2:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: calc(var(--legal-step) * 1.5);
}
.legal h3 {
  font-family: var(--sans);
  font-size: var(--legal-h3);
  line-height: 1.35;
  letter-spacing: -.01em;
  font-weight: 600;
  color: var(--ink);
  margin: calc(var(--legal-step) * 3) 0 calc(var(--legal-step) * 1);
}
.legal h4 {
  font-size: var(--legal-h4);
  line-height: 1.4;
  letter-spacing: -.008em;
  font-weight: 650;
  color: var(--ink);
  margin: calc(var(--legal-step) * 2) 0 calc(var(--legal-step) * .7);
}
.legal p,
.legal address {
  color: var(--ink-2);
  line-height: 1.7;
  margin: 0 0 calc(var(--legal-step) * 1.4);
}
.legal address { font-style: normal; }
.legal ul,
.legal ol {
  margin: 0 0 calc(var(--legal-step) * 1.4);
  padding-left: 1.35em;
}
.legal li {
  color: var(--ink-2);
  line-height: 1.7;
  margin-bottom: calc(var(--legal-step) * .55);
}
.legal li:last-child { margin-bottom: 0; }
.legal li > ul,
.legal li > ol { margin-top: calc(var(--legal-step) * .55); }
.legal strong { color: var(--ink); }
.legal .lead-note {
  background: var(--accent-soft);
  border: 1px solid rgba(199, 46, 148, .2);
  border-radius: 14px;
  padding: calc(var(--legal-step) * 1.4) calc(var(--legal-step) * 1.7);
  margin: calc(var(--legal-step) * 2.2) 0;
  color: var(--ink);
  font-weight: 500;
}
.legal a { color: var(--accent-ink); border-bottom: 1px solid currentColor; }

/* --- Reveal ------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .video-box, .pill, .btn { transition: none; }
  html { scroll-behavior: auto; }
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1100px) {
  .hero { padding: 110px 0 96px; }
  .split { padding: 84px 0; }
  .mission { padding: 80px 0; }
  .cta { padding: 92px 0 88px; }
  .quote { padding: 80px 0; }
  .quote blockquote { padding: 60px 0; }
}

@media (max-width: 900px) {
  .nav-shell { grid-template-columns: 1fr auto; width: calc(100% - 40px); }
  .site-nav { display: none; }
  .nav-toggle { display: grid; place-items: center; }
  .nav-panel[data-open] {
    display: block;
    border-top: 1px solid var(--line);
    background: var(--bg);
  }
  .nav-panel a {
    display: block;
    padding: 1rem 20px;
    border-bottom: 1px solid var(--line);
    font-size: 1.05rem;
    color: var(--ink);
  }
  .nav-panel a:last-child { border-bottom: 0; }

  .hero-grid,
  .split-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .hero-art { justify-self: center; max-width: 420px; }
  /* Mobile order: art and media always come after / before per the mockup. */
  .hero-copy { order: 1; }
  .hero-art { order: 2; }
  .split--copy-left .split-media,
  .split .split-media { order: 1; }
  .split--copy-left .split-copy,
  .split .split-copy { order: 2; }
  .split-copy p { max-width: 34rem; }
  .chat, .media { aspect-ratio: auto; }
  .chat { aspect-ratio: auto; padding: 22px; }
  .media { aspect-ratio: 13 / 11; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem 40px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand p { max-width: none; }
}

@media (max-width: 620px) {
  .site-header .nav-shell { height: 62px; width: calc(100% - 40px); }
  .hero { padding: 46px 0 41px; }
  .hero h1 { max-width: none; }
  .hero .lead { margin-top: 1.6rem; max-width: none; }
  .hero .eyebrow { margin-top: 2rem; }
  .hero-art { max-width: 320px; }
  .pill-row { flex-direction: column; align-items: center; gap: 10px; }
  .pill { width: min(300px, 100%); }
  .pill { justify-content: center; padding: 0 20px; min-height: 50px; }
  .cta .pill-row { align-items: center; }
  .btn { min-height: 50px; }
  .split { padding: 62px 0; }
  .split-copy p { font-size: .94rem; line-height: 1.7; }
  .split-copy h2 { margin-bottom: 14px; }
  .mission { padding: 78px 0 82px; }
  .quote { padding: 56px 0; }
  .quote blockquote { padding: 48px 0; }
  .cta { padding: 72px 0 76px; }
  .cta .lead { font-size: .94rem; line-height: 1.7; }
  .chat { padding: 22px; gap: 14px; }
  .chat-bubble { font-size: .92rem; }
  .chat-head-title { font-size: 1.05rem; }
  .footer-grid { padding-bottom: 32px; }
  .footer-bottom { padding-top: 24px; flex-direction: column; align-items: flex-start; gap: .5rem; }
  .footer-sign { order: 2; }
}