/* ==========================================================================
   Niyametric — website v2
   Tokens mirror the Niyametric Design System v1.0.2 palette and type scale.
   ========================================================================== */

/* Self-hosted type. Inter Tight and Geist Mono are both SIL Open Font License,
   so serving them ourselves is permitted — and it removes two third-party
   origins from the critical path along with their DNS and TLS handshakes.

   Only 400 and 500 ship: nothing on the page declares font-weight 600 and
   nothing is italic, so those four faces were dead weight.

   The latin-ext files exist for exactly one character. U+20B9 (₹) is outside
   the latin subset, and the demo panel prints ₹72,00,000. Google's stock
   latin-ext face is ~88 KB of accents to carry that one glyph, so these are
   subset down to it — 1.1 KB each — and the unicode-range is narrowed to match
   so browsers never fetch them expecting anything else. */

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-tight-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  /* rupee only — the file is subset to U+20B9 */
  src: url('fonts/inter-tight-400-latin-ext.woff2') format('woff2');
  unicode-range: U+20B9;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-tight-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  /* rupee only — the file is subset to U+20B9 */
  src: url('fonts/inter-tight-500-latin-ext.woff2') format('woff2');
  unicode-range: U+20B9;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/geist-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  /* rupee only — the file is subset to U+20B9 */
  src: url('fonts/geist-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+20B9;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/geist-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  /* rupee only — the file is subset to U+20B9 */
  src: url('fonts/geist-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+20B9;
}

:root {
  /* Colour */
  --ink: #0C0D0F;
  --ink-raised: #1A1B1D;
  --ink-line: #343536;
  --vermilion: #FD461F;
  /* Same hue, darkened until it clears 4.5:1 as text on both light surfaces
     (#FD461F only manages 3.27:1, so the old hover was less readable than rest).
     Graphics keep --vermilion; text on light surfaces uses this. */
  --vermilion-text: #CA3819;
  --text-muted: #4E4E4D;
  --border-strong: #7A7874;
  --border: #E6E2DC;
  --border-soft: #EEEAE5;
  --surface: #FAF8F7;
  --surface-alt: #F6F1EB;
  --white: #FFFFFF;
  --bone: #F6F1EB;
  --reversed-muted: #E6E2DC;
  --danger: #B42318;

  /* Type */
  --font-sans: 'Inter Tight', Inter, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Display tracking. The design's -0.03em was drawn for Söhne; Inter Tight is
     narrower by construction, so the two compound and the largest headings set
     too tight. One token drives all three display headings. */
  --track-display: -0.02em;

  /* Hero seam — the rule between the gradient field and the photo. */
  --hero-seam: 2.5px;
  --hero-seam-color: var(--surface);

  /* Layout */
  --max: 1280px;
  --gutter: clamp(20px, 5vw, 64px);
  --nav-h: 72px;

  /* Motion. Short and precise — this brand's credibility rests on restraint,
     so nothing here bounces, overshoots or draws attention to itself. */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--surface);
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--vermilion-text); }
button { font-family: inherit; }
img, svg { display: block; }
p { margin: 0; }

:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 3px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* Keyboard users should not have to tab the whole nav on every page. */
.skip-link {
  /* fixed, not absolute: an absolutely-positioned skip link sits at the top of
     the document, so focusing it after any scroll puts focus somewhere the user
     cannot see. */
  position: fixed;
  left: 12px;
  top: -100px;
  z-index: 60;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--white);
  border-radius: 8px;
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  transition: top 120ms linear;
}
.skip-link:focus { top: 12px; color: var(--white); }

/* --------------------------------------------------------------------------
   Shared type
   -------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.eyebrow--reversed { color: var(--reversed-muted); }

.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.section__title {
  margin: 24px 0 0;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: pretty;
}
.section__title--tight { margin-top: 16px; }

.section__lead {
  margin: 24px 0 0;
  font-size: 20px;
  line-height: 32px;
  color: var(--text-muted);
  max-width: 62ch;
  text-wrap: pretty;
}
.section__lead--tight { margin-top: 16px; }

.section__note {
  margin: 48px auto 0;
  text-align: center;
  font-size: 17px;
  line-height: 28px;
  color: var(--text-muted);
  max-width: 62ch;
}

.h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.32;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.h3--spaced { margin-top: 16px; }

.body {
  margin: 8px 0 0;
  font-size: 17px;
  line-height: 28px;
  color: var(--text-muted);
  max-width: 52ch;
}
.body--narrow { max-width: 40ch; }
.body--tight { max-width: 36ch; }
.body--medium { margin-top: 12px; max-width: 46ch; }

.icon-40 { display: grid; place-items: start; color: var(--border-strong); }

.underline-link {
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: border-color 120ms linear;
}
.underline-link:hover { color: var(--ink); border-bottom-color: var(--vermilion); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--motion-base) ease,
              transform var(--motion-fast) var(--ease-out),
              box-shadow var(--motion-base) var(--ease-out);
}
/* 1px, not 3 — enough to feel like a physical control, not enough to bounce.
   :active returns it so a click reads as a press rather than a bump. */
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); transition-duration: 60ms; }

/* The arrow is the brand's own device, so it carries the motion. */
.btn__arrow { transition: transform var(--motion-base) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }
.btn--sm { height: 40px; padding: 0 18px; font-size: 14px; line-height: 21px; }

.btn--ink { background: var(--ink); color: var(--white); }
/* --text-muted is a text token; using it as a surface made the main CTA look
   greyed-out on hover. --ink-raised is the lift the design uses elsewhere. */
.btn--ink:hover { background: var(--ink-raised); color: var(--white); }
.btn--ink:focus-visible { outline-offset: 2px; }

.btn--bone { background: var(--bone); color: var(--ink); }
.btn--bone:hover { background: var(--white); color: var(--ink); }

.btn__arrow { color: var(--vermilion); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  line-height: 26px;
  font-weight: 500;
  color: var(--ink);
}
.link-arrow:hover { color: var(--ink); }
.link-arrow:focus-visible { outline-offset: 4px; }
.link-arrow svg { transition: transform var(--motion-base) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }

.link-btn {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: 0;
  padding: 4px 2px;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
  transition: text-decoration-color 120ms linear;
}
.link-btn:hover { text-decoration-color: var(--vermilion); }
.link-btn--quiet {
  font-size: 15px;
  line-height: 23px;
  color: var(--text-muted);
  text-decoration: none;
}
.link-btn--quiet:hover { color: var(--ink); }

.pill {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background var(--motion-fast) linear,
              border-color var(--motion-fast) linear;
}
.pill:hover { background: var(--surface-alt); border-color: var(--ink); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

/* Cal's modal host computes z-index:auto, so our fixed nav (z-index 40) painted
   on top of the overlay and owned the top 73px of the screen while it was open. */
cal-modal-box { z-index: 9999; }

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  background: rgba(250, 248, 247, 0.62);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  border-bottom: 1px solid rgba(230, 226, 220, 0.72);
  transition: box-shadow 200ms ease;
}
.nav--scrolled {
  box-shadow: 0 1px 0 rgba(12, 13, 15, 0.06), 0 6px 16px rgba(12, 13, 15, 0.04);
}

/* Below the desktop breakpoint the centre nav is display:none, so a 3-column
   grid would still reserve both 24px gaps around a zero-width track — 48px the
   bar cannot spare at phone widths. Flex until the centre column actually
   exists. */
.nav__bar {
  max-width: var(--max);
  margin: 0 auto;
  height: var(--nav-h);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.nav__brand { grid-column: 1; justify-self: start; display: flex; align-items: center; gap: 10px; }
.nav__symbol { width: 17px; height: 18px; }
.nav__wordmark { height: 13px; width: auto; }

.nav__links { grid-column: 2; justify-self: center; display: none; align-items: center; gap: 24px; }
.nav__links a {
  font-size: 14px;
  line-height: 21px;
  padding: 6px 0;          /* 21px -> 33px hit height, no visual shift */
  color: var(--text-muted);
  white-space: nowrap;
  flex: 0 0 auto;
  transition: color 120ms linear;
}
.nav__links a:hover { color: var(--ink); }

.nav__actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 12px; }

.nav__toggle {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink);
  position: relative;
}
.nav__toggle:focus-visible { outline-offset: 2px; }

/* Driven off aria-expanded, so the visual state and the state screen readers
   are told can never disagree. */
.nav__toggle-bars,
.nav__toggle-cross {
  transition: opacity var(--motion-fast) linear,
              transform var(--motion-base) var(--ease-out);
}
.nav__toggle-cross { position: absolute; inset: 0; margin: auto; opacity: 0; transform: rotate(-45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars { opacity: 0; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-cross { opacity: 1; transform: rotate(0deg); }

.nav__menu {
  /* The panel hangs off a position:fixed header, so on a short viewport
     (landscape phone, 200% zoom, split screen) its lower items simply sit off
     screen with no way to reach them — and below 480px the in-menu CTA is the
     only booking control there is. */
  max-height: calc(100svh - var(--nav-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(250, 248, 247, 0.86);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  border-bottom: 1px solid rgba(230, 226, 220, 0.72);
  padding: 8px var(--gutter) 16px;
}
.nav__menu[hidden] { display: none; }
/* Set while the mobile menu is open — see setupNav() in app.js. */
body.menu-open { overflow: hidden; }
.nav__menu-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav__menu-links { display: flex; flex-direction: column; gap: 4px; }
.nav__menu-links a {
  font-size: 16px;
  line-height: 26px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
}
.nav__menu-links a:last-child { border-bottom: 0; }

/* The CTA only lives in the menu at the widths where the bar cannot hold it. */
.nav__menu-cta { display: none; }

/* Narrowest widths: brand + hamburger only. Even with the gaps reclaimed the
   bar needs ~411px, so the CTA moves into the menu rather than being clipped. */
@media (max-width: 479px) {
  .nav__actions > .btn { display: none; }
  .nav__menu-cta { display: inline-flex; margin-top: 12px; align-self: flex-start; }
}

@media (min-width: 1041px) {
  .nav__bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 24px;
  }
  .nav__links { display: flex; }
  .nav__toggle { display: none; }
  .nav__menu { display: none !important; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 80svh;
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  background: var(--surface);
  overflow: hidden;
}

.hero__copy {
  display: flex;
  align-items: center;
  padding:
    calc(var(--nav-h) + clamp(40px, 5vw, 80px))
    var(--gutter)
    clamp(48px, 6vw, 80px)
    max(var(--gutter), calc((100vw - var(--max)) / 2));
  background:
    repeating-linear-gradient(90deg, rgba(12, 13, 15, 0.05) 0 1px, rgba(12, 13, 15, 0) 1px 7px),
    radial-gradient(58% 48% at 10% 16%, rgba(253, 70, 31, 0.34) 0%, rgba(253, 70, 31, 0) 62%),
    radial-gradient(52% 44% at 90% 84%, rgba(253, 70, 31, 0.26) 0%, rgba(253, 70, 31, 0) 60%),
    radial-gradient(66% 56% at 74% 26%, rgba(255, 141, 116, 0.20) 0%, rgba(255, 141, 116, 0) 66%),
    var(--surface-alt);
}
.hero__copy-inner { max-width: 620px; }

.hero__title {
  margin: 24px 0 0;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.04;
  font-weight: 500;
  letter-spacing: var(--track-display);
  color: var(--ink);
  max-width: 20ch;
  text-wrap: pretty;
}

.hero__lead {
  margin: 24px 0 0;
  /* Was 20px/32px. Inter Tight sets wider than Söhne at the same size, so the
     design's lead read heavier than intended next to the display headline. */
  font-size: 18px;
  line-height: 28px;
  color: var(--text-muted);
  max-width: 46ch;
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  gap: 32px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 40px;
}

.hero__media {
  position: relative;
  min-height: clamp(320px, 48vh, 560px);
  display: flex;
  /* Seam between the gradient field and the photo. Runs across the top while
     the hero is stacked, down the side once it splits into two columns. */
  border-top: var(--hero-seam) solid var(--hero-seam-color);
}
/* The bitmap sits on top; if the image is absent the brand field below still
   paints, so the panel never renders as an empty box. */
.hero__media-fill {
  width: 100%;
  height: 100%;
  background:
    url("assets/hero_image.webp") center / cover no-repeat,
    repeating-linear-gradient(90deg, rgba(12, 13, 15, 0.05) 0 1px, rgba(12, 13, 15, 0) 1px 7px),
    radial-gradient(70% 60% at 70% 30%, rgba(253, 70, 31, 0.28) 0%, rgba(253, 70, 31, 0) 64%),
    var(--surface-alt);
}

@media (min-width: 861px) {
  .hero { grid-template-columns: 56% 44%; }
  .hero__media {
    border-top: 0;
    border-left: var(--hero-seam) solid var(--hero-seam-color);
  }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section { padding: clamp(64px, 8vw, 96px) 0; }
.section--tall { padding: clamp(80px, 10vw, 128px) 0; }
.section--base { background: var(--surface); }
.section--alt { background: var(--surface-alt); }
.section--ink { background: var(--ink); position: relative; overflow: hidden; }

/* The operational problem */
.problem {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: 64px;
  align-items: start;
}
.problem__title { max-width: 22ch; }
.problem__lead { max-width: 42ch; }

.problem__item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 24px;
  padding: 32px 0;
  border-top: 1px solid var(--border-soft);
}
.problem__item--first { padding-top: 0; border-top: 0; }
.problem__icon { display: grid; place-items: start center; color: var(--border-strong); }

@media (min-width: 861px) {
  .problem { grid-template-columns: 0.9fr 1.1fr; }
}

/* --------------------------------------------------------------------------
   Demo panel
   -------------------------------------------------------------------------- */

.panel {
  margin-top: 48px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  container-type: inline-size;
}

.panel__head {
  justify-content: space-between;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-soft);
  flex-wrap: wrap;
}

.chip {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--border);
  border-radius: 999px;
  padding: 4px 12px;
}

.panel__body { display: flex; flex-wrap: wrap; align-items: stretch; }

.panel__chat {
  flex: 1 1 58%;
  /* min() not a bare 320px: the panel is overflow:hidden, so at 320px viewport
     the fixed floor pushed 42px of chat past the clip with no scrollbar to
     recover it. These two min-widths are also what forces the wrap, so they
     cannot simply be dropped. */
  min-width: min(320px, 100%);
  min-height: 480px;
  display: flex;
  flex-direction: column;
  padding: 24px;
}

.chat { flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; }
.chat__turns { display: flex; flex-direction: column; gap: 12px; }

.msg { display: flex; }
.msg--user { justify-content: flex-end; }
.msg--system { justify-content: flex-start; }
.msg__bubble {
  max-width: 82%;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 16px;
  line-height: 26px;
}
.msg--user .msg__bubble { background: var(--ink); color: var(--white); border: 1px solid var(--ink); }
.msg--system .msg__bubble { background: var(--surface-alt); color: var(--ink); border: 1px solid var(--border-soft); }

.chat__typing { font-size: 14px; line-height: 21px; color: var(--text-muted); }
.chat__typing[hidden] { display: none; }

.chat__starters { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }
.chat__input-row { margin-top: 12px; }
.chat__input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 28px;
  color: var(--text-muted);
}
.chat__input:focus-visible { outline-offset: 2px; }
/* No ::placeholder rule meant the UA default applied — 4.35:1 in Chromium,
   3.01:1 Safari, 2.58:1 Firefox. This input has no visible label, so the
   placeholder is the only thing naming it. opacity:1 is required for Firefox. */
.chat__input::placeholder { color: var(--text-muted); opacity: 1; }

.panel__capture {
  flex: 1 1 42%;
  min-width: min(300px, 100%);
  border-left: 1px solid var(--border-soft);
  padding: 24px;
}
/* Once the two columns wrap, the divider has to move with them. */
@container (max-width: 715px) {
  .panel__capture { border-left: 0; border-top: 1px solid var(--border-soft); }
  .panel__chat { min-height: 0; }
}
.capture__title { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink); }
.capture__list { display: flex; flex-direction: column; margin-top: 16px; }

.capture__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-soft);
}
.capture__field-row { display: flex; gap: 12px; align-items: baseline; }
.capture__name { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text-muted); min-width: 92px; }
.capture__value { font-size: 16px; line-height: 26px; color: var(--ink); font-variant-numeric: tabular-nums; }
.capture__meta { font-family: var(--font-mono); font-size: 12px; line-height: 18px; color: var(--text-muted); }

.capture__status { margin-top: 24px; }
.capture__status[hidden] { display: none; }
.capture__status-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dot { width: 9px; height: 9px; background: var(--vermilion); display: inline-block; flex: 0 0 auto; }
.capture__status-label { font-size: 16px; line-height: 26px; font-weight: 500; color: var(--ink); }
.capture__status-note { font-size: 15px; line-height: 23px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.capture__status-fine { margin-top: 12px; font-size: 12px; line-height: 18px; color: var(--text-muted); }

.panel__foot {
  justify-content: space-between;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: var(--surface-alt);
  border-top: 1px solid var(--border-soft);
  flex-wrap: wrap;
}

/* Three claims below the panel */
.trio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 48px;
}

/* --------------------------------------------------------------------------
   Lead capture
   -------------------------------------------------------------------------- */

.lead {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.lead [hidden] { display: none; }

/* space-between rather than a filler element: on one line the button is pushed
   to the far edge as designed, and once it wraps to its own line it sits flush
   with the text above instead of being shoved right by the leftover space. */
.lead__prompt {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
}
.lead__prompt-text {
  font-size: 20px;
  line-height: 32px;
  color: var(--ink);
  max-width: 46ch;
  text-wrap: pretty;
}

.lead__form { display: grid; gap: 24px; max-width: 720px; }
.lead__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }

.field { display: grid; gap: 6px; }
.field__label {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.field__input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  color: var(--ink);
}
.field__input:focus-visible { outline-offset: 1px; }
.field__input--area { height: auto; padding: 12px 14px; resize: vertical; }

.lead__error { font-size: 15px; line-height: 23px; color: var(--danger); }
.lead__actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

.lead__sent { display: grid; gap: 8px; max-width: 560px; }
.lead__sent-head { display: flex; align-items: center; gap: 12px; }
.lead__sent-head svg { flex: 0 0 auto; }
.lead__sent .body { margin-top: 0; max-width: none; }

/* --------------------------------------------------------------------------
   What we build
   -------------------------------------------------------------------------- */

.capabilities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}

/* --------------------------------------------------------------------------
   How we work
   -------------------------------------------------------------------------- */

.process {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  column-gap: 0;
  row-gap: 48px;
  margin-top: 64px;
}
.process__step { position: relative; }

.process__rule { position: relative; height: 24px; }
.process__rule-line { position: absolute; left: 0; right: 0; top: 12px; height: 1px; background: var(--border); }
.process__rule--end .process__rule-line { right: 9px; }
.process__tick { position: absolute; }
.process__tick--major { left: 0; top: 6px; width: 1px; height: 13px; background: var(--border-strong); }
.process__tick--minor { left: 50%; top: 9px; width: 1px; height: 7px; background: var(--border); }
.process__marker { position: absolute; right: 0; top: 8px; width: 9px; height: 9px; background: var(--vermilion); }

.process__body { padding: 24px 24px 0 0; }

.process__closing {
  margin: 64px auto 0;
  text-align: center;
  font-size: 20px;
  line-height: 32px;
  color: var(--ink);
  max-width: 56ch;
}

/* --------------------------------------------------------------------------
   Responsible AI
   -------------------------------------------------------------------------- */

.responsible {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(80px, 10vw, 128px) var(--gutter);
  display: grid;
  /* Section is overflow:hidden; a hard 320px track in a 280px content box
     clipped the last word off the heading and the points list. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 64px;
  align-items: start;
}
.section--ink { padding: 0; }

.responsible__title {
  margin: 24px 0 0;
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: var(--track-display);
  color: var(--bone);
  max-width: 22ch;
  text-wrap: pretty;
}
.responsible__lead {
  margin: 24px 0 0;
  font-size: 17px;
  line-height: 28px;
  color: var(--reversed-muted);
  max-width: 62ch;
  text-wrap: pretty;
}
.responsible__points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px 32px;
  margin-top: 40px;
}
.point { display: flex; align-items: flex-start; gap: 12px; }
/* One icon fills a bar with currentColor — keep it on brand, not body ink. */
.point svg { flex: 0 0 auto; color: var(--vermilion); }
.point span { font-size: 15px; line-height: 23px; color: var(--reversed-muted); }

.receipt {
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  border-radius: 12px;
  padding: 24px;
}
.receipt__tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag {
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--reversed-muted);
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  padding: 4px 12px;
}
.tag--flag { color: var(--vermilion); border-color: var(--vermilion); }
.receipt__text {
  margin-top: 24px;
  font-size: 17px;
  line-height: 28px;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.receipt__meta {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--ink-line);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--reversed-muted);
}

/* --------------------------------------------------------------------------
   Who we are
   -------------------------------------------------------------------------- */

.team__title { max-width: 30ch; }
.team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 48px;
  margin-top: 64px;
}
.team__role {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.team__note {
  margin-top: 48px;
  font-size: 15px;
  line-height: 23px;
  color: var(--text-muted);
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   Closing
   -------------------------------------------------------------------------- */

.closing {
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.10) 0 1px, rgba(255, 255, 255, 0) 1px 8px),
    radial-gradient(48% 58% at 84% 20%, rgba(253, 70, 31, 0.60) 0%, rgba(253, 70, 31, 0) 58%),
    radial-gradient(42% 42% at 97% 6%, rgba(255, 104, 75, 0.38) 0%, rgba(255, 104, 75, 0) 56%),
    var(--ink);
}
.closing__curve {
  position: absolute;
  right: -60px;
  bottom: -40px;
  max-width: 62vw;
  height: auto;
  pointer-events: none;
}
.closing__curve[hidden] { display: none; }
.closing__inner { position: relative; padding-top: clamp(80px, 10vw, 128px); padding-bottom: clamp(80px, 10vw, 128px); }

.closing__title {
  margin: 0;
  font-size: clamp(40px, 5.6vw, 76px);
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: var(--track-display);
  color: var(--bone);
  max-width: 18ch;
  text-wrap: pretty;
}
/* 404.html reuses the closing panel, where the heading follows an eyebrow. */
.closing__title--spaced { margin-top: 24px; }

/* Short page: let the panel take the slack so the footer sits on the bottom
   edge instead of floating mid-viewport. */
.page-404 { min-height: 100svh; display: flex; flex-direction: column; }
.page-404 main { flex: 1 1 auto; display: flex; }
.page-404 .closing { flex: 1 1 auto; display: flex; align-items: center; }
.page-404 .closing__inner { width: 100%; }
.closing__lead {
  margin-top: 32px;
  font-size: 20px;
  line-height: 32px;
  color: var(--reversed-muted);
  max-width: 62ch;
  text-wrap: pretty;
}
.closing__actions { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-top: 40px; }
.closing__email {
  transition: color var(--motion-fast) linear, border-color var(--motion-fast) linear;
  display: inline-flex;
  align-items: center;
  min-height: 28px;        /* was 19px tall */
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bone);
  border-bottom: 1px solid transparent;
}
.closing__email:hover { color: var(--bone); border-bottom-color: var(--vermilion); }
.closing__place {
  margin-top: 96px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--reversed-muted);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer { background: var(--ink); border-top: 1px solid var(--ink-line); }
.footer__inner {
  justify-content: space-between;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 40px;
  padding-bottom: 40px;
}
.footer__brand { display: flex; align-items: center; gap: 10px; }
.footer__wordmark { height: 13px; width: auto; }
.footer__meta {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  color: var(--reversed-muted);
}

/* --------------------------------------------------------------------------
   Demo panel arrivals

   renderTurns/renderFields append only new nodes, so a CSS animation on the
   element runs exactly once, when that turn or field actually arrives. No JS
   involved, and replay re-triggers it because the nodes are rebuilt.
   -------------------------------------------------------------------------- */

@keyframes nm-arrive {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.js .msg           { animation: nm-arrive 260ms var(--ease-out) both; }
.js .capture__field { animation: nm-arrive 260ms var(--ease-out) both; }
.js .capture__status { animation: nm-arrive 320ms var(--ease-out) both; }

/* --------------------------------------------------------------------------
   Reveal on scroll — scoped to .js so content is never hidden without
   scripting, and never flashes in before the observer attaches.
   -------------------------------------------------------------------------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; }

/* Failsafe: the head bootstrap sets this when app.js has not run in time.
   Content wins over choreography — never ship a blank page. */
.reveals-failed [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { transform: none; transition-duration: 150ms; }

  .js .msg,
  .js .capture__field,
  .js .capture__status { animation: none; }

  .btn,
  .btn__arrow,
  .link-arrow svg { transition: none; }
  .nav__toggle-bars,
  .nav__toggle-cross { transition: none; }

  .btn:hover,
  .btn:active,
  .btn:hover .btn__arrow,
  .link-arrow:hover svg { transform: none; }
}

/* --------------------------------------------------------------------------
   Document pages (privacy). Light, single measure, no scripts.
   -------------------------------------------------------------------------- */

.doc { padding: calc(var(--nav-h) + clamp(48px, 6vw, 88px)) 0 clamp(64px, 8vw, 96px); }
.doc__inner { max-width: 68ch; }

.doc__title {
  margin: 24px 0 0;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: pretty;
}
.doc__meta {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.doc__lead {
  margin: 24px 0 0;
  font-size: 18px;
  line-height: 28px;
  color: var(--ink);
}

.doc h2 {
  margin: 48px 0 0;
  font-size: 22px;
  line-height: 1.32;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.doc p { margin: 16px 0 0; font-size: 17px; line-height: 28px; color: var(--text-muted); }
.doc ul { margin: 16px 0 0; padding-left: 22px; }
.doc li { margin-top: 8px; font-size: 17px; line-height: 28px; color: var(--text-muted); }
.doc strong { color: var(--ink); font-weight: 500; }

.doc a { color: var(--ink); border-bottom: 1px solid var(--border-strong); }
.doc a:hover { color: var(--vermilion-text); border-bottom-color: var(--vermilion-text); }

.doc__table { margin-top: 16px; border-top: 1px solid var(--border); }
.doc__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-soft);
}
.doc__row dt { font-size: 15px; line-height: 23px; font-weight: 500; color: var(--ink); }
.doc__row dd { margin: 0; font-size: 16px; line-height: 26px; color: var(--text-muted); }
@media (min-width: 641px) {
  .doc__row { grid-template-columns: 200px 1fr; gap: 24px; align-items: baseline; }
}

/* Footer gains navigation — it previously carried only a copyright line. */
.footer__links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer__links a {
  transition: color var(--motion-fast) linear;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--reversed-muted);
  padding: 8px 0;          /* 26px -> 34px hit height, no visual shift */
}
.footer__links a:hover { color: var(--bone); }