/* Sahyaan — the voice that travels: Zara's recorded-call hero, app
   mockups, closing pilot panel. Hanken Grotesk voice, Instrument Serif
   statements. The palette is the trader's ledger desk: neel (indigo
   ink) for the ground, haldi (turmeric) for Zara and the one action,
   sindoor red only where a line is never crossed. On the page, haldi =
   Zara speaking, periwinkle = the customer, green = what got booked. */

:root {
  --bg: #ffffff;
  --lav: #f5f5f7;
  --ink: #26283c;
  --muted: #6a6b7c;
  --accent: #4d5290;
  /* neel: the ground of the hero, banner and closing panel */
  --neel-night: #1f2238;
  --neel: #2f3358;
  --neel-200: #b9bef2;
  --neel-wash: #f2f2f5;
  /* haldi: Zara, the brand, the primary action */
  --haldi: #edb751;
  --haldi-deep: #8f5a00;
  --sindoor: #c4584a;
  --navy: var(--neel-night);
  --night: var(--neel);
  --mist: #eeeef2;
  --sage: #527568;
  --sage-deep: #41675b;
  --app-check: var(--ochre-deep);
  --slate: #4b5285;
  --mauve: #6a6890;
  --ochre: #c58614;
  --sand: #a6712f;
  --ochre-deep: #8a5411;
  --ochre-tint: #fff7e6;
  --warm-grey: #6a6b7c;
  --voice: var(--haldi-deep);
  --booked: #2b7559;
  --cream: #f6f4ee;
  --green-bright: var(--haldi);
  --indigo: var(--neel-200);
  --amber: var(--haldi);
  --coral: var(--sindoor);
  --line: #e9e8ec;
  --radius: 26px;
  /* the neel canvas: hero and closing pilot panel bookend the page with
     the same layers — ink deepening to night, a turmeric lamp low right */
  --dusk:
    radial-gradient(ellipse 46% 60% at 88% 92%, rgba(237, 183, 81, 0.12), transparent 64%),
    radial-gradient(ellipse 60% 70% at 12% 10%, rgba(96, 100, 150, 0.32), transparent 62%),
    linear-gradient(160deg, #3d4166 0%, #2f3358 46%, #1f2238 100%);
  /* one content column, shared by nav, hero, sections and footer */
  --col: 85rem;
  /* one left edge for every section's text, matching the hero's */
  --edge: max(calc(0.75rem + clamp(1.75rem, 4.5vw, 4.5rem)), calc((100vw - var(--col)) / 2));
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
#demo { scroll-margin-top: 100px; }
[hidden] { display: none !important; }

body {
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 1.04rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2 {
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.06;
}

h2 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); }

.serif, .serif-display, .serif-statement {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.005em;
}

.serif-display { font-size: clamp(2.9rem, 6.6vw, 5.4rem); line-height: 1.03; }
.serif-statement { font-size: clamp(2.5rem, 2.6vw + 1.9rem, 6rem); line-height: 1.04; }
.serif-display em, .serif-statement em { font-style: italic; }

p { max-width: 62ch; }

a { color: inherit; }

strong { font-weight: 600; }
em { font-style: italic; }

::selection { background: var(--amber); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 100; padding: 0.65rem 1rem; color: var(--ink); background: var(--cream); border-radius: 6px; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.hero :is(a, button, ol):focus-visible, .footer-canvas :focus-visible { outline-color: var(--cream); }

.pilot-note { margin-top: 0.9rem; color: var(--cream); font-size: 0.85rem; line-height: 1.5; }
html.motion-stopped *, html.motion-stopped *::before, html.motion-stopped *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

/* Below the protected hero/nav, secondary copy is warm grey. */
.moments, .desk, .india, .protocol, .footer { --muted: var(--warm-grey); }

/* ---------- banner ---------- */

.banner {
  background: var(--night);
  color: rgba(242, 239, 230, 0.86);
  text-align: center;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.5;
  padding: 0.55rem 1rem;
}

.banner a { color: #fff; font-weight: 600; }

/* static "live" LED: the pulsing box-shadow animation re-rastered the
   whole banner every 2.4s for a decoration; a constant ring reads the same */
.banner-live {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  margin-right: 0.6rem;
  vertical-align: 0.08em;
  background: var(--green-bright);
  box-shadow: 0 0 0 3px rgba(63, 214, 164, 0.28);
}

/* ---------- nav ---------- */

/* a static frosted fill stands in for the live backdrop-blur: the blur
   made Firefox re-sample the page behind the nav on every scroll */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 0.9rem max(1.5rem, calc((100% - var(--col)) / 2));
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid var(--line);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 1.15rem;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--navy);
  text-decoration: none;
}

/* Sahyaan: custom serif lettering; the paired a's share a companion foot. */
.sahyaan-wordmark { display: block; width: auto; height: 24px; overflow: visible; }



.nav-links {
  display: flex;
  align-items: center;
  gap: 1.9rem;
}

.nav-links a,
.nav-cta { white-space: nowrap; }

.nav-links a {
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.2s ease;
}

.nav-links a:hover { color: var(--ink); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.nav-cta {
  text-decoration: none;
  font-size: 0.93rem;
  font-weight: 600;
  color: #fff;
  background: var(--navy);
  border-radius: 10px;
  padding: 0.55rem 1.05rem;
  transition: background 0.2s ease;
}

.nav-cta:hover { background: var(--neel); }

/* ---------- pills ---------- */

.pill {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.85rem 1.7rem;
  border-radius: 999px;
  transition: transform 0.2s ease, background 0.2s ease;
}

.pill:hover { transform: translateY(-2px); }

.pill-haldi { background: var(--haldi); color: var(--neel-night); box-shadow: 0 10px 28px -12px rgba(242, 176, 53, 0.7); }
.pill-haldi:hover { background: #f7c35e; }

.pill-glass {
  background: rgba(251, 250, 247, 0.13);
  border: 1px solid rgba(251, 250, 247, 0.32);
  color: var(--cream);
}

.pill-glass:hover { background: rgba(251, 250, 247, 0.22); }

/* ---------- aurora hero ---------- */

.hero {
  padding: 0.75rem 0.75rem 0;
}

/* The loaded video owns the canvas; its poster remains visible when motion is reduced. */
.hero-canvas:not(.has-video) .hero-video { display: none; }
.hero-canvas:not(.has-video) { background: url("media/hero-poster-desktop.webp?v=final4") center / cover no-repeat, var(--dusk); }



.hero-video,
.hero-tint {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.14) brightness(1.06) contrast(1.04);
}

/* the footage keeps its own colour: skin, shop and daylight read as a
   real Indian business. Golden-hour light falls in from the skyline, the
   same warm daylight as the pilot panel's photo. */
.hero-tint {
  background:
    radial-gradient(70% 80% at 80% 8%, rgba(255, 196, 118, 0.42), rgba(255, 176, 92, 0.12) 55%, transparent 80%);
  mix-blend-mode: soft-light;
}

/* local shade: readable text over the footage. Night pools under the
   headline on the left and under the call on the right; the shop stays
   visible between them. */
.hero-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(40% 46% at 82% 68%,
      rgba(18, 15, 12, 0.34) 0%,
      rgba(18, 15, 12, 0.12) 60%,
      rgba(18, 15, 12, 0) 86%),
    linear-gradient(90deg,
      rgba(18, 15, 12, 0.7) 0%,
      rgba(18, 15, 12, 0.54) 32%,
      rgba(18, 15, 12, 0.16) 50%,
      rgba(18, 15, 12, 0) 62%),
    linear-gradient(0deg, rgba(18, 15, 12, 0.3), rgba(18, 15, 12, 0) 26%);
}

/* stacked layouts: the text at the top, the call at the bottom, so the
   shade hangs from both edges with clear footage in the middle */
@media (max-width: 960px) {
  .hero-shade {
    background:
      linear-gradient(0deg,
        rgba(18, 15, 12, 0.78) 0%,
        rgba(18, 15, 12, 0.58) 34%,
        rgba(18, 15, 12, 0.2) 56%,
        rgba(18, 15, 12, 0) 70%),
      linear-gradient(180deg,
        rgba(18, 15, 12, 0.7) 0%,
        rgba(18, 15, 12, 0.56) 26%,
        rgba(18, 15, 12, 0.16) 46%,
        rgba(18, 15, 12, 0) 62%);
  }
}

/* One stop control covers video, the sample call and the scrolling rail. */
.hero-video-toggle {
  position: absolute;
  left: 1.1rem;
  bottom: 1.1rem;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--cream);
  border: 1px solid rgba(251, 250, 247, 0.32);
  background: rgba(251, 250, 247, 0.13);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.hero-video-toggle:hover { background: rgba(251, 250, 247, 0.22); }

.hero-video-toggle:focus-visible {
  outline: 2px solid var(--green-bright);
  outline-offset: 2px;
}

.hero-video-toggle[hidden] { display: none; }

.hero-video-toggle .hero-toggle-icon { width: 18px; height: 18px; }
.hero-video-toggle .icon-pause { display: block; }
.hero-video-toggle .icon-play { display: none; }
.hero-video-toggle.is-paused .icon-pause { display: none; }
.hero-video-toggle.is-paused .icon-play { display: block; }

/* below the two-column break the console runs full width to the bottom edge,
   so give the toggle its own strip of quiet footage underneath it */
@media (max-width: 960px) {
  .hero-canvas { padding-bottom: 4.4rem; }
  .hero-video-toggle { left: 0.9rem; bottom: 0.9rem; }
}

.hero-canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: #15110d;
  opacity: 0;
  transition: opacity 1.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

html.js:not(.is-loaded) .hero-canvas::after { opacity: 0.6; }

/* full-frame blur-in removed: the whole-viewport 22px blur made the
   opening frame the costliest moment on the page; the dark overlay's
   opacity fade carries the same entrance */

.hero-canvas {
  position: relative;
  min-height: 620px; /* fallback where svh is unsupported */
  min-height: min(calc(100svh - 8.5rem), 58rem); /* fits under banner + nav */
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(1.75rem, 4.5vw, 4.5rem) calc(var(--edge) - 0.75rem);
  color: var(--cream);
  background: var(--dusk);
  background-size: 100% 100%;
  isolation: isolate; /* the neel tint blends with the footage only */
  box-shadow: 0 40px 100px -30px rgba(30, 24, 18, 0.4);
}

/* from the moment the video shows it owns the whole canvas, so the
   dusk below is fully covered; with the dusk standing still this only
   saves pixels it can no longer pay for, so the layer switch stays. */

.hero-inner {
  position: relative;
  z-index: 2;
  padding: clamp(2rem, 8vh, 5rem) 0 2rem;
}

.hero h1 {
  max-width: none;
  color: #fff;
  font-size: clamp(2.6rem, 3.9vw + 1.3rem, 8rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
}

.hero-lead {
  margin-top: 1.9rem;
  color: rgba(255, 255, 255, 0.94);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  max-width: 46ch;
}

.hero-sub {
  margin-top: 0.7rem;
  color: var(--neel-200);
  font-size: 1.02rem;
  max-width: 44ch;
}

.hero-actions {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 2.1rem;
}

/* ---------- the recorded call (the tv player) ----------
   The player keeps the old console's geometry (right column of the
   hero, capped column width, cream type on the footage); the player
   itself owns every visual — see call-player.css. The old scripted
   console is gone; a call only ever shows what its recording shows. */
.hero-console {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 27rem;
  justify-self: end;
}


/* ---------- section header: statement left, context right ---------- */

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 1.2rem 4rem;
  align-items: end;
  text-align: left;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.section-head h2 { max-width: 18ch; text-wrap: balance; }

.section-head p {
  justify-self: end;
  color: var(--muted);
  font-size: 1.1rem;
  max-width: 42ch;
  padding-bottom: 0.6rem;
}


/* ---------- moments: one call, three moments on one woven strand ---------- */

.moments {
  --ev: 12.5rem;       /* evidence height; the strand runs just below it */
  --knot: 2.2rem;      /* distance from evidence to strand centre */
  padding: clamp(3.5rem, 6vw, 5rem) var(--edge) clamp(3rem, 5vw, 4rem);
}
.moments .section-head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }

.moments-track { position: relative; }

.moments-line {
  position: absolute;
  left: 0;
  width: 100%;
  top: calc(var(--ev) + var(--knot) - 1.875rem);
  height: 3.75rem;
  overflow: visible;
  pointer-events: none;
}

.strand {
  fill: none;
  stroke: url(#strand-grad);
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}

.strand-a { stroke-width: 2; }
.strand-b { stroke-width: 1.4; opacity: 0.55; }

.moments-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 4rem); }
.moment {
  --tone: var(--accent);
  --tone-soft: rgba(68, 82, 201, 0.1);
  --time: var(--accent);
  position: relative;
}
.moment-agent { --tone: var(--haldi); --tone-soft: rgba(237, 183, 81, 0.18); --time: var(--haldi-deep); }
.moment-promise { --tone: var(--booked); --tone-soft: rgba(43, 117, 89, 0.1); --time: var(--booked); }
.moment-evidence { height: var(--ev); display: flex; align-items: flex-end; }

.moment-knot {
  position: relative;
  display: block;
  width: 0.95rem;
  height: 0.95rem;
  margin: calc(var(--knot) - 0.475rem) 0 0 -0.475rem;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--tone);
  box-shadow: 0 0 0 6px var(--tone-soft);
}
.moment-time { display: block; margin-top: 1.4rem; font-size: 0.86rem; font-weight: 600; color: var(--time); font-variant-numeric: tabular-nums; }
.moment h3 { margin-top: 0.35rem; font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: clamp(1.7rem, 1.1vw + 1.2rem, 2.3rem); line-height: 1.1; letter-spacing: -0.005em; }
.moment p { margin-top: 0.8rem; color: var(--muted); font-size: 1rem; max-width: 40ch; }
.ev {
  width: min(100%, 24rem);
  display: grid;
  gap: 0.55rem;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(16, 23, 37, 0.03), 0 22px 44px -18px rgba(16, 23, 37, 0.18);
}
.ev-row { display: flex; align-items: center; gap: 0.6rem; font-size: 0.94rem; font-weight: 600; }
.ev-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none; background: var(--tone); }
.ev-row-ghost { color: var(--muted); font-weight: 500; }
.ev-row-ghost .ev-dot { background: none; box-shadow: inset 0 0 0 1.5px #b9bdc8; }
.ev-note { font-size: 0.8rem; color: var(--muted); }
.ev-note + * { margin-top: -0.4rem; }
.ev-said { justify-self: start; padding: 0.45rem 0.85rem; border-radius: 12px 12px 12px 4px; background: rgba(77,82,144,0.06); border: 1px solid rgba(77,82,144,0.14); color: #444874; font-size: 0.98rem; }
.ev-booked { justify-self: start; font-weight: 700; color: var(--booked); font-size: 1.02rem; }
.ev-promise .ev-row { font-weight: 500; color: #4a4f5c; }
.ev-amount { font-family: "Instrument Serif", Georgia, serif; font-size: 1.7rem; line-height: 1.1; color: var(--neel); margin-bottom: 0.15rem; }
/* the one orchestrated moment: the strand draws, each stop lands in turn */
html.js .moments .strand { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.js .moments.in .strand { stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s cubic-bezier(0.45, 0, 0.2, 1); }
html.js .moments.in .strand-b { transition-delay: 0.15s; }
html.js .moments .moment-knot,
html.js .moments .ev { opacity: 0; transform: translateY(10px); filter: blur(8px); }
html.js .moments .moment-knot { transform: scale(0.4); }
html.js .moments.in .moment-knot,
html.js .moments.in .ev {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity 0.7s ease var(--d), transform 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d), filter 0.7s ease var(--d);
}
.moment:nth-child(1) { --d: 0.1s; }
.moment:nth-child(2) { --d: 0.8s; }
.moment:nth-child(3) { --d: 1.5s; }

/* ---------- review desk: paired views of the phone app ---------- */

.desk { padding: clamp(2.5rem, 4vw, 3.5rem) 0.75rem 0; }
/* the same header as the other sections: statement left, context right */
.desk-head { padding: 0 calc(var(--edge) - 0.75rem); }
.desk-head h2 { color: var(--ink); }
.app-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: calc(var(--col) + 3rem);
  min-height: 42rem;
  margin: 0 auto;
  padding: 2.3rem 2rem;
  border-radius: var(--radius);
  /* tint kept as a fallback layer under the photo; the wash tints the photo */
  background: linear-gradient(125deg, color-mix(in srgb, var(--mist) 78%, #fff), color-mix(in srgb, var(--sage) 21%, #fff));
  overflow: hidden;
}
/* the owner's office is the stage: his photo fills the panel and the tint
   wash settles into it, so the phones sit in his room instead of beside
   a portrait of it. Sierra feature-card move: photo as backdrop, not box. */
.stage-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 60%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  pointer-events: none;
  user-select: none;
  /* the right edge dissolves into the stage tint where the phones sit */
  mask-image: linear-gradient(90deg, #000 58%, rgba(0, 0, 0, 0.55) 78%, transparent 97%);
  -webkit-mask-image: linear-gradient(90deg, #000 58%, rgba(0, 0, 0, 0.55) 78%, transparent 97%);
}
.stage-wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(233, 240, 245, 0.20) 0%,
      rgba(82, 117, 104, 0.16) 24%,
      rgba(233, 240, 245, 0.14) 42%,
      rgba(233, 240, 245, 0.32) 58%,
      rgba(233, 240, 245, 0.58) 76%,
      rgba(233, 240, 245, 0.72) 100%),
    linear-gradient(125deg, rgba(82, 117, 104, 0.30) 0%, rgba(233, 240, 245, 0.16) 48%, rgba(233, 240, 245, 0.44) 100%);
}
/* photo-as-room layering: wash above the photo, phones above both.
   The wrapper keeps the pair side by side; margin-left:auto parks it
   on the photo's calm right side, like devices on his desk. The gap
   keeps the bezels apart — the old overlap clipped the detail
   phone's screen edge, so the pair now reads side by side. */
.app-phones { display: flex; align-items: flex-end; gap: 1.5rem; max-height: 100%; margin-left: auto; margin-right: 0.5rem; }
.app-phone {
  position: relative;
  z-index: 2;
  flex: none;
  min-width: 0;
  box-sizing: border-box;
  width: 19rem;
  aspect-ratio: 0.52;
  padding: 6px;
  border-radius: 2.8rem;
  background: #26313b;
  box-shadow: 0 16px 36px rgba(29, 47, 55, 0.16);
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink);
}
.app-phone-detail { width: 18.5rem; transform: translateY(2rem); z-index: 1; }
.app-screen { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 2.45rem; background: #fff; }
.app-island { position: absolute; z-index: 2; left: 50%; top: 11px; width: 28%; height: 19px; transform: translateX(-50%); border-radius: 99px; background: #26313b; }
/* the wash carries the photo: left third closes to calm mist behind the
   phones' side. Nothing else marks the photo out — no frame, no caption. */
.app-status { display: flex; justify-content: space-between; flex: none; height: 34px; padding: 9px 20px 0; font-size: 0.85em; font-weight: 700; }
.app-top { display: flex; align-items: center; justify-content: space-between; padding: 0.8em 1.4em 0; }
.app-brand { color: var(--sage-deep); font-size: 1.35em; font-weight: 700; letter-spacing: -0.05em; }
.app-avatar { display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: 50%; background: var(--mist); color: var(--slate); font-size: 0.85em; font-weight: 700; }
.app-home-main { padding: 1.3em 1.4em 0; flex: 1; min-height: 0; }
.app-home-main h3, .app-detail-head h3 { margin: 0.3em 0 0; font-family: "Hanken Grotesk", sans-serif; font-size: 1.7em; line-height: 1.13; letter-spacing: -0.045em; }
.app-hero { display: grid; gap: 0.55em; margin-top: 1.3em; padding: 1em 1.1em; border-radius: 1.1em; background: #e6f1e9; color: var(--sage-deep); }
.app-hero-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.3em 0.9em; }
.app-hero strong { grid-column: 1; grid-row: 1; font-size: 2em; line-height: 1.1; letter-spacing: -0.05em; }
.app-hero-label { grid-column: 1; grid-row: 2; font-size: max(9px, 0.82em); }
.app-delta { grid-column: 2; grid-row: 1 / span 2; justify-self: end; align-self: center; padding: 0.32em 0.62em; border-radius: 99px; background: rgba(255, 255, 255, 0.68); font-size: max(9px, 0.72em); font-weight: 700; white-space: nowrap; }
.app-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 0.8em; margin: 1.2em 0; list-style: none; }
.app-stats li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.55em; align-items: center; padding: 0.6em 0.75em; border: 1px solid var(--line); border-radius: 0.95em; background: #fff; }
.app-stats strong { font-size: 1.3em; }
.app-stats span { grid-column: 1 / -1; color: var(--warm-grey); }
.app-home-main h4, .app-detail-main h4 { font-size: 1em; font-weight: 700; margin: 1.2em 0 0.5em; }
.app-call-list { list-style: none; }
/* 2 rows per record — face / name·INV / detail on the left, the status
   chip pinned right and centred across both lines (owner request); long
   lines truncate with an ellipsis instead of growing a third row */
.app-call-list li { display: grid; grid-template-columns: 2.25em minmax(0, 1fr) auto; column-gap: 0.6em; gap: 0.2em; padding: 0.85em 0; border-top: 1px solid var(--line); }
.app-call-list strong { grid-column: 2; grid-row: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1em; }
.app-call-list small { font-size: 0.9em; color: var(--muted); font-weight: 400; }
.app-call-list li > span { grid-column: 2; grid-row: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.app-call-list .app-chip { grid-column: 3; grid-row: 1 / span 2; justify-self: end; align-self: center; margin-top: 0; white-space: nowrap; }
.app-chip { display: inline-block; margin-top: 0.2em; padding: 0.3em 0.75em; border-radius: 99px; font-size: 0.85em; font-style: normal; font-weight: 700; }
.app-confirmed { color: var(--sage-deep); background: #e6f1e9; }
.app-scheduled { color: var(--slate); background: #edf0fa; }
.app-check { color: var(--app-check); background: #f8edda; }
.app-tabs { display: flex; justify-content: space-around; flex: none; padding: 0.7em 0 1.1em; border-top: 1px solid var(--line); color: var(--muted); }
.app-tabs span { display: grid; justify-items: center; gap: 0.2em; font-size: 1.6em; line-height: 1; }
.app-tabs small { font-size: 0.53em; }
.app-tabs .app-tab-current { color: var(--sage-deep); }
.app-detail-main { flex: 1; min-height: 0; padding: 0 1.3em; }
.app-back { color: var(--accent); font-size: 1.3em; }
.app-back span { font-size: 0.72em; vertical-align: 0.1em; }
.app-detail-head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.7em; align-items: center; padding: 1.2em 0 0.7em; }
.app-detail-id { min-width: 0; }
.app-detail-head h3 { margin: 0; }
.app-detail-head p { margin: 0.3em 0 0; color: var(--warm-grey); }
.app-recording { margin-top: 0.6em; padding: 1.1em; border-radius: 1.2em; background: #f4f5f6; }
.app-recording-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5em; }
.app-recording-head span { color: var(--muted); font-size: 0.83em; }
.app-player { display: flex; align-items: center; gap: 0.65em; margin-top: 1.1em; }
.app-play { display: grid; place-items: center; flex: none; width: 2.4em; height: 2.4em; padding-left: 0.2em; border-radius: 50%; background: var(--sage-deep); color: #fff; font-size: 0.85em; }
.app-wave { position: relative; flex: 1; height: 2.5em; background: repeating-linear-gradient(90deg, var(--sage) 0 2px, transparent 2px 6px); mask-image: repeating-linear-gradient(105deg, transparent 0 3px, #000 4px 13px, transparent 16px 21px); }
.app-player time { color: var(--muted); font-variant-numeric: tabular-nums; }
.app-bubble { width: fit-content; max-width: 85%; margin: 0.55em 0; padding: 0.7em 0.9em; border-radius: 1em 1em 1em 0.25em; }
.app-bubble p { margin-top: 0.25em; }
.app-bubble-zara { background: #e6f1e9; color: #2f6251; }
.app-bubble-customer { margin-left: auto; border-radius: 1em 1em 0.25em 1em; background: #edf0fa; color: #414f91; }
.app-promise { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.7em; row-gap: 0.25em; margin-top: 1.1em; padding: 1em; border-radius: 1.1em; background: #f7e9d0; color: #624a27; }
.app-promise-body { grid-column: 2; grid-row: 1; display: grid; row-gap: 0.25em; min-width: 0; }
.app-home-indicator { flex: none; width: 33%; height: 4px; margin: 0 auto 7px; border-radius: 9px; background: #26313b; }

/* ---------- india: a small lexicon of how customers talk ---------- */

.india {
  padding: clamp(3rem, 5vw, 4.5rem) var(--edge) clamp(3.5rem, 6vw, 5rem);
}

.india-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem clamp(3rem, 6vw, 6rem);
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.india-copy h2 { max-width: 16ch; text-wrap: balance; }

.india-copy p {
  margin-top: 1.4rem;
  color: var(--muted);
  font-size: 1.1rem;
  max-width: 42ch;
}

/* each language written in its own script: the roster is the proof */
.tongues ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.tongues li {
  display: grid;
  gap: 0.2rem;
  padding: 1rem 0.9rem 0.85rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.tongue-native {
  font-family: "Instrument Serif", "Tiro Devanagari Hindi", "Tiro Bangla", "Tiro Gurmukhi", "Tiro Tamil", "Tiro Telugu", "Tiro Kannada", "Noto Serif Gujarati", "Noto Serif Malayalam", Georgia, serif;
  font-size: 1.55rem;
  line-height: 1.3;
  color: #444874;
  white-space: nowrap;
}

.tongue-native:lang(hi), .tongue-native:lang(mr) { font-family: "Tiro Devanagari Hindi", serif; }
.tongue-native:lang(bn) { font-family: "Tiro Bangla", serif; }
.tongue-native:lang(pa) { font-family: "Tiro Gurmukhi", serif; }
.tongue-native:lang(ta) { font-family: "Tiro Tamil", serif; font-size: 1.3rem; }
.tongue-native:lang(te) { font-family: "Tiro Telugu", serif; }
.tongue-native:lang(kn) { font-family: "Tiro Kannada", serif; }
.tongue-native:lang(gu) { font-family: "Noto Serif Gujarati", serif; font-size: 1.4rem; }
.tongue-native:lang(ml) { font-family: "Noto Serif Malayalam", serif; font-size: 1.3rem; }

.tongue-name { font-size: 0.8rem; color: var(--muted); }

.tongues figcaption {
  margin-top: 1rem;
  font-size: 0.94rem;
  color: var(--muted);
  max-width: 48ch;
}

.lexicon { border-bottom: 1px solid var(--line); }

.entry {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.75fr) minmax(0, 0.9fr);
  gap: 1rem clamp(2rem, 4vw, 4rem);
  align-items: baseline;
  padding: clamp(1.8rem, 3vw, 2.6rem) 0;
  border-top: 1px solid var(--line);
}

.entry dt { display: grid; gap: 0.5rem; }

.entry-said {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: clamp(2.3rem, 2.4vw + 1.4rem, 4.2rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: #444874;
}

.entry-deva {
  font-family: "Tiro Devanagari Hindi", "Instrument Serif", serif;
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--mauve);
}

/* customer's words (indigo) become what the agent books (green) */
.entry-heard {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-weight: 600;
  font-size: 1.12rem;
  color: var(--booked);
  font-variant-numeric: tabular-nums;
}

.entry-heard::before {
  content: "";
  width: 2.4rem;
  height: 2px;
  flex: none;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--neel-200), var(--booked));
}

.entry-note { color: var(--muted); font-size: 0.98rem; max-width: 38ch; }

/* ---------- protocol: calm rules on a mist/sage inset panel ---------- */

.protocol { padding: clamp(3rem, 5vw, 5rem) 0.75rem 0; background: #fff; }
.protocol-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
  border-radius: var(--radius);
  padding: clamp(3.5rem, 7vw, 6.5rem) max(clamp(1.5rem, 5vw, 4.5rem), calc((100% - var(--col)) / 2 - 0.75rem));
  background: linear-gradient(125deg, var(--mist), color-mix(in srgb, var(--sage) 12%, #fff));
}
.protocol-head { position: sticky; top: 6rem; }
.protocol-inner :is(h1, h2) { color: var(--ink); max-width: 12ch; }
.protocol-sub { color: var(--muted); margin-top: 1.4rem; font-size: 1.06rem; max-width: 38ch; }
.rules { list-style: none; }
.rules li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: 1.3rem; padding: 1.5rem 0; border-top: 1px solid #d5dcdd; }
.rules li:last-child { border-bottom: 1px solid #d5dcdd; }
.rule-x { grid-row: 1 / 3; width: 1.3rem; height: 1.3rem; margin-top: 0.45rem; fill: none; stroke: color-mix(in srgb, var(--coral) 68%, var(--warm-grey)); stroke-linecap: round; }
.rule-x path:first-child { stroke-width: 2.6; }
.rule-x path:last-child { stroke-width: 1.5; opacity: 0.7; }
.rule-main { font-family: "Instrument Serif", Georgia, serif; font-size: clamp(1.55rem, 1vw + 1.15rem, 2.15rem); line-height: 1.18; color: var(--ink); }
.rule-more { grid-column: 2; margin-top: 0.4rem; font-size: 0.98rem; color: var(--muted); }

/* ---------- dusk bookend: the closing pilot panel ---------- */

.footer { padding: 1rem 0.75rem 0.75rem; }
.footer-canvas {
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--cream);
  background: var(--dusk);
  background-size: 100% 100%;
  padding: clamp(3.5rem, 7vw, 5.5rem) calc(var(--edge) - 0.75rem);
}
/* the owner on his call is the panel's evening air: the photo covers the
   canvas, a radial dusk mask fades its left and its floor into the flat
   gradient, and a light veil of the panel's own sky settles over it so
   its colours join the palette. Text and links card stay above both. */
.footer-canvas { position: relative; }
.footer-canvas::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(31, 34, 56, 0.2); pointer-events: none; }
.panel-bg {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 88% 26%;
  pointer-events: none;
  user-select: none;
  mask-image: linear-gradient(90deg, transparent 0 42%, rgba(0, 0, 0, 0.30) 58%, rgba(0, 0, 0, 0.80) 70%, #000 86%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0 42%, rgba(0, 0, 0, 0.30) 58%, rgba(0, 0, 0, 0.80) 70%, #000 86%);
}
.panel-veil {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(47, 51, 88, 0.7) 0%, rgba(47, 51, 88, 0.4) 45%, rgba(47, 51, 88, 0.18) 75%, rgba(47, 51, 88, 0.1) 100%);
  mask-image: linear-gradient(90deg, transparent 0 42%, rgba(0, 0, 0, 0.30) 58%, rgba(0, 0, 0, 0.80) 70%, #000 86%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0 42%, rgba(0, 0, 0, 0.30) 58%, rgba(0, 0, 0, 0.80) 70%, #000 86%);
}
/* the owner on his call is the panel's evening air: the photo fills the
   footer-top, a dusk mask blends its left edge into the flat gradient,
   and a light dusk wash pulls its colours into the panel's palette.
   Text keeps to the dusk-only left column. panel height comes from the
   pilot flow; the photo and veil are absolute layers behind it. */
.footer-top { position: relative; z-index: 2; display: block; }
.footer-top > h2 { margin-top: 0; }
.footer-top > h2, .footer-top > .footer-pilot { max-width: min(46rem, 54%); }
.footer-top > .footer-pilot { margin-top: 2rem; }
.footer-card { position: relative; z-index: 2; }
.footer-top h2 { color: var(--cream); max-width: 15ch; }
/* a real sequence: three steps from oldest bill to full report */
.pilot-steps {
  counter-reset: pilot;
  list-style: none;
  display: grid;
  gap: 1.1rem;
}
.pilot-steps li {
  counter-increment: pilot;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.95rem;
  align-items: baseline;
}
.pilot-steps li::before {
  content: counter(pilot);
  grid-row: 1 / 3;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid rgba(242, 239, 230, 0.5);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--cream);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1;
}
.pilot-steps b { font-weight: 600; font-size: 1.05rem; color: var(--cream); }
.pilot-steps span { grid-column: 2; margin-top: 0.2rem; font-size: 0.94rem; line-height: 1.5; color: rgba(242, 239, 230, 0.95); }
.pilot-actions { margin-top: 2rem; display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.pilot-cta {
  display: inline-block;
  background: var(--haldi);
  color: var(--neel-night);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  line-height: 3rem;
  height: 3rem;
  padding: 0 1.9rem;
  border-radius: 999px;
  transition: transform 0.2s ease, background 0.2s ease;
}
.pilot-cta:hover { transform: translateY(-2px); background: #f7c35e; }
.pilot-mail { color: var(--cream); text-decoration: none; font-weight: 500; font-size: 0.98rem; }
.pilot-mail:hover { text-decoration: underline; }
/* The links below the photo panel share its content gutter. */
.footer-card { color: var(--ink); padding: clamp(2.4rem, 5vw, 3.2rem) calc(var(--edge) - 0.75rem) 1.6rem; }
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; padding-bottom: 2.2rem; border-bottom: 1px solid var(--line); }
.footer-col { display: grid; gap: 0.45rem; align-content: start; font-size: 0.94rem; }
.footer-col-title { font-size: 1.35rem; margin-bottom: 0.4rem; }
.footer-col a { text-decoration: none; color: var(--ink); width: fit-content; }
.footer-col a:hover { color: var(--accent); }
.footer-col span { color: var(--muted); }
.footer-base { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.4rem; font-size: 0.86rem; color: var(--muted); }
.footer-wordmark { display: flex; align-items: center; justify-content: center; gap: 0.32em; color: var(--ink); font-size: clamp(2.52rem, 9vw, 7.8rem); padding: 0.05em 0 0.12em; user-select: none; }

/* ---------- live glass on the protected nav and hero ---------- */
.nav, .pill-glass { position: relative; }
.nav::after, .pill-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(135deg, var(--rim-hi, rgba(255, 255, 255, 0.75)), rgba(255, 255, 255, 0.06) 34%, rgba(255, 255, 255, 0) 62%, var(--rim-lo, rgba(255, 255, 255, 0.32)));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.pill-glass {
  background: linear-gradient(180deg, rgba(10, 16, 34, 0.3), rgba(10, 16, 34, 0.4));
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -6px 14px -8px rgba(255, 255, 255, 0.25), 0 8px 24px rgba(5, 9, 22, 0.18);
  --rim-hi: rgba(255, 255, 255, 0.9);
  --rim-lo: rgba(255, 255, 255, 0.45);
}
.nav {
  background: rgba(255, 255, 255, 0.88);
  border-bottom-color: rgba(16, 23, 37, 0.07);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.7);
}
.nav::after { display: none; }

/* ---------- home: the nav floats over a full-bleed hero ----------
   The footage runs edge to edge under the banner and the nav sits on it
   without a fill. The bar turns white only when it is needed: under the
   pointer, on keyboard focus, or once the hero has scrolled away
   (.is-solid, set in call-player.js). The dock is zero-height so the
   hero starts right under the banner. */
.nav-dock { position: sticky; top: 0; z-index: 40; height: 0; }
.nav-dock > .nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  transition: background-color 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease;
}
.nav-dock > .nav :is(.wordmark, .nav-links a) { transition: color 0.3s ease; }
.nav-dock > .nav .nav-cta { transition: color 0.3s ease, background-color 0.3s ease; }
.nav-dock > .nav:not(:hover, :focus-within, .is-solid) {
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}
.nav-dock > .nav:not(:hover, :focus-within, .is-solid) .wordmark { color: #fff; --sy-a: #fff; --sy-b: #b7e6cf; --india-mid: #fff; --yaan-dot: #edb751; }
.nav-dock > .nav:not(:hover, :focus-within, .is-solid) .nav-links a { color: rgba(255, 255, 255, 0.86); }
.nav-dock > .nav:not(:hover, :focus-within, .is-solid) .nav-cta { background: #fff; color: var(--neel-night); }

.home { --nav-h: 4.4rem; --banner-h: 2.45rem; }
.home .hero { padding: 0; }
.home .hero-canvas {
  border-radius: 0;
  box-shadow: none;
  min-height: calc(100svh - var(--banner-h));
  padding-top: calc(var(--nav-h) + clamp(1.75rem, 4.5vw, 4.5rem));
}
@media (min-width: 961px) and (max-height: 820px) {
  .home .hero-canvas { padding-top: calc(var(--nav-h) + clamp(1.25rem, 3.5vh, 2.5rem)); }
}
@media (max-width: 960px) {
  .home .hero-canvas { min-height: 0; padding-top: calc(var(--nav-h) + 2.5rem); }
}
@media (max-width: 760px) {
  .home { --nav-h: 6.6rem; --banner-h: 2.3rem; }
  .nav-dock { position: relative; z-index: 40; }
  .home .hero-canvas { padding-top: calc(var(--nav-h) + 18px); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-dock > .nav, .nav-dock > .nav * { transition: none !important; }
}

/* ---------- reveals (JS-gated) ---------- */

/* rise entrance, staggered per child. The de-blur half is gone: blurring
   the whole hero column on the busiest first frame cost more than it said */

html.js .hero-inner > * {
  opacity: 0;
  transform: translateY(var(--ey, 26px));
  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.22, 0.9, 0.3, 1);
}

html.js .hero-inner > *:nth-child(1) { --ey: 28px; }
html.js .hero-inner > *:nth-child(2) { --ey: 20px; transition-delay: 0.16s; }
html.js .hero-inner > *:nth-child(3) { --ey: 18px; transition-delay: 0.26s; }
html.js .hero-inner > *:nth-child(4) { --ey: 16px; transition-delay: 0.38s; }

html.js.is-loaded .hero-inner > * {
  opacity: 1;
  transform: none;
}

html.js .hero-console {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.9s ease 0.28s,
    transform 0.9s cubic-bezier(0.22, 0.9, 0.3, 1) 0.28s;
}

html.js.is-loaded .hero-console {
  opacity: 1;
  transform: none;
}

html.js .reveal-item {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

html.js .reveal-item.in { opacity: 1; transform: none; }

/* ---------- large screens ----------
   Reading sizes stay fixed (no root zoom). The column widens in steps,
   the display type grows, and the hero composition gets more air. */

@media (min-width: 1800px) {
  :root { --col: 92rem; }
  .hero-canvas {
    min-height: min(calc(100svh - 8.5rem), 62rem);
    grid-template-columns: minmax(0, 1fr) minmax(0, 31rem);
  }
  .hero-sub { font-size: 1.12rem; }
  .moments { padding-top: 6rem; padding-bottom: 5rem; }
}

@media (min-width: 2200px) {
  :root { --col: 100rem; }
  .hero-canvas { grid-template-columns: minmax(0, 1fr) minmax(0, 33rem); }
  .moments { padding-top: 6.5rem; padding-bottom: 5.5rem; }
}

/* ---------- short laptop screens ----------
   The hero should sit whole under the banner and nav on 13-14" laptops,
   so tighten its vertical rhythm when the viewport is short. */

@media (min-width: 961px) and (max-height: 820px) {
  .hero-canvas { padding-top: clamp(1.25rem, 3.5vh, 2.5rem); padding-bottom: clamp(1.25rem, 3.5vh, 2.5rem); }
  .hero-inner { padding: 0; }
  .hero h1 { font-size: min(clamp(2.6rem, 3.9vw + 1.3rem, 8rem), 10.5vh); }
  .hero-lead { margin-top: 1.3rem; }
  .hero-actions { margin-top: 1.5rem; }
  .hero-console .tv-player { --feed-h: 10rem; }
}

@media (min-width: 961px) and (max-height: 680px) {
  .hero-sub { font-size: 1rem; }
  .hero-console .tv-player { --feed-h: 7.4rem; }
}

/* small laptops / tablets in landscape: give the headline more of the row */
@media (min-width: 961px) and (max-width: 1180px) {
  .hero-canvas { grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); gap: 2.25rem; }
}

/* The phone-app mockup: from 761px up, the whole third row plus its chip
   must clear the tab bar with ≥6px to spare, so the in-app rhythm
   compresses on every size (0.9em ≈ 10.8px at the 12px root). */
@media (min-width: 761px) {
  .app-hero { margin-top: 0.9em; padding: 0.85em 1em; }
  .app-stats { margin: 0.85em 0; }
  .app-call-list li { padding: 0.6em 0; }
}

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .nav { gap: 1.2rem; }
  .nav-links { gap: 1.15rem; }
  .nav-links a { font-size: 0.9rem; }
  .india-head { grid-template-columns: 1fr; }
  .entry { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .entry dt { grid-column: 1 / -1; }

  /* panel: photo becomes the top band of the canvas, fading down into
     the dusk; the h2 starts where the fade ends, steps/actions sit on
     dusk only */
  .footer-top { display: block; }
  .footer-top > h2 { margin-top: 150px; }
  .footer-top > h2, .footer-top > .footer-pilot { max-width: none; }
  .panel-bg { inset: 0 0 auto 0; width: 100%; height: 220px; object-position: 68% 34%; mask-image: linear-gradient(180deg, #000 34%, transparent 99%); -webkit-mask-image: linear-gradient(180deg, #000 34%, transparent 99%); }
  .panel-veil { inset: 0 0 auto 0; height: 220px; background: linear-gradient(180deg, rgba(80, 101, 124, 0.10), rgba(80, 101, 124, 0.16) 60%, rgba(80, 101, 124, 0.26) 92%, rgba(80, 101, 124, 0) 100%); mask-image: linear-gradient(180deg, #000 34%, transparent 99%); -webkit-mask-image: linear-gradient(180deg, #000 34%, transparent 99%); }
}

@media (max-width: 960px) {
  .section-head { grid-template-columns: 1fr; }
  .section-head p { padding-bottom: 0; }
  .protocol-inner { grid-template-columns: 1fr; }
  .protocol-head { position: static; }
  .footer-top { grid-template-columns: 1fr; gap: 2.2rem; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .hero-canvas { grid-template-columns: 1fr; align-items: start; min-height: 0; padding: 2.5rem calc(var(--edge) - 0.75rem) 2.5rem; }
  .hero-inner { padding: 1.5rem 0 0.5rem; }
  .hero-console { width: min(100%, 30rem); max-width: none; justify-self: center; }
  .moments-list { grid-template-columns: 1fr; }
  .moment { min-height: 0; }
  .app-stage { min-height: 35rem; flex-wrap: wrap; justify-content: center; }
  .app-phone { box-sizing: border-box; width: min(16.25rem, 39vw); aspect-ratio: 0.435; }
  .app-phone-detail { width: min(15.75rem, 37vw); }
  /* the photo stays the stage's backdrop here too, but only its top band
     shows above the phones; a mask fades it into the tint below */
  .stage-bg { inset: 0 0 auto 0; width: 100%; height: 240px; object-position: 56% 18%; mask-image: linear-gradient(180deg, #000 34%, transparent 99%); -webkit-mask-image: linear-gradient(180deg, #000 34%, transparent 99%); }
  .stage-wash { inset: 0 0 auto 0; height: 240px; background: linear-gradient(180deg, rgba(233, 240, 245, 0.28), rgba(233, 240, 245, 0.44) 78%), linear-gradient(125deg, rgba(82, 117, 104, 0.30), rgba(233, 240, 245, 0.12)); mask-image: linear-gradient(180deg, #000 34%, transparent 99%); -webkit-mask-image: linear-gradient(180deg, #000 34%, transparent 99%); }
}




/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-canvas::after, .hero-video, .hero-tint, .hero-video-toggle { transition: none !important; }
  html.js .moments .strand { stroke-dashoffset: 0 !important; transition: none !important; }
  html.js .moments .moment-knot,
  html.js .moments .ev { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  html.js .hero-inner > *,
  html.js .hero-console,
  html.js .reveal-item { opacity: 1 !important; transform: none !important; transition: none !important; }
  .pill { transition: none !important; }
}

/* ---------- phone-first recomposition (≤760px) ---------- */

@media (max-width: 760px) {
  /* light sections use 20px gutters; tinted panels sit 10px in */
  .hero { padding: 10px 10px 0; }
  .hero-canvas {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1rem;
    min-height: 0;
    padding: 18px 20px 70px; /* clears the video toggle's strip bottom-left */
    border-radius: 22px;
  }
  .desk { padding: 48px 10px 0; }
  .protocol { padding: 48px 10px 0; }
  .protocol-inner { display: grid; grid-template-columns: minmax(0, 1fr); padding: 40px 20px; gap: 1.4rem; }
  .footer { padding: 10px 10px 0.5rem; }
  .footer-canvas { padding: 40px 20px 40px; }
  .india { padding: 48px 20px 40px; }

  /* type scale */
  .section-head, .india-head, .desk-head { margin-bottom: 1.5rem; }
  .section-head h2, .india-copy h2, .desk-head h2, .protocol-inner :is(h1, h2) {
    font-size: 2.35rem;
    line-height: 1.06;
    letter-spacing: -0.01em;
  }
  .section-head p, .india-copy p { font-size: 0.94rem; line-height: 1.5; }
  .section-head p { margin-top: 0.75rem; padding-bottom: 0; }
  .india-copy p { margin-top: 0.75rem; }
  body { font-size: 0.94rem; line-height: 1.5; }

  /* hero: the brand moment, then the console above the fold */
  .hero-inner { padding: 0.4rem 0 0; }
  .hero h1 { font-size: 2.95rem; line-height: 1; }
  .hero-lead { margin-top: 0.95rem; font-size: 1.02rem; font-weight: 500; }
  .hero-sub { margin-top: 0.45rem; font-size: 0.9rem; max-width: none; }
  .hero-actions {
    margin-top: 1.05rem;
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 0.6rem;
  }
  .hero-actions .pill { display: flex; align-items: center; justify-content: center; padding: 0.6rem 0.4rem; font-size: 0.9rem; font-weight: 500; text-align: center; }
  .hero-console { margin-top: 0; }
  /* phones: the recorded call runs full width; the player handles its
     own compact layout in call-player.css */
  /* moments: a white vertical timeline — each moment reads knot + time,
     then the heading, then the opaque evidence card. The strand is a 2px
     gradient pseudo-element spanning knot centre → knot centre */
  .moments { padding: 40px 20px 28px; max-width: none; }
  .moments .section-head { margin: 0 0 1.5rem; }
  .moments-line { display: none; }
  .moments-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 0 0 0 28px;
    overflow: visible;
  }
  .moments-list .moment { grid-column: 1; }
  .moments-list .moment:nth-child(1) { grid-row: 1; }
  .moments-list .moment:nth-child(2) { grid-row: 2; }
  .moments-list .moment:nth-child(3) { grid-row: 3; }
  .moments-list::before {
    content: "";
    grid-row: 1 / span 2;
    grid-column: 1;
    justify-self: start;
    width: 2px;
    /* top/bottom margins pin the wire to the first and last knot centres
       (10.32px = half the 20.64px time line box; row gap is 28px) */
    margin: 0.645rem 0 calc(-0.645rem - 28px) -21px;
    background: linear-gradient(to bottom, #6e72a6, #e2b866, #4b8a71);
    transform-origin: top;
  }
  .moment {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
  }
  .moment-knot {
    position: absolute;
    /* centre lands on the strand: wire centre = 8px from the list edge,
       28px padding + margin-left -21px + width 2px */
    left: calc(8px - 28px - 0.475rem);
    top: calc(0.645rem - 0.475rem);
    margin: 0;
  }
  .moment-time { order: 2; margin: 0; color: var(--time); }
  .moment h3 { order: 3; margin-top: 4px; margin-bottom: 12px; font-size: 1.6rem; color: var(--ink); }
  .moment > p { display: none; }
  .moment-evidence { order: 4; height: auto; width: 100%; margin-top: -10px; }
  .moment-evidence .ev { width: 100%; color: var(--ink); padding: 0.8rem 1.1rem; gap: 0.4rem; }
  .ev-row { font-weight: 500; }
  /* the timeline shows all three moments at once; nothing may sit at opacity 0 */
  html.js .moments .moment-knot,
  html.js .moments .ev { opacity: 1; transform: none; filter: none; transition: none; }
  /* the strand draws from the top over 1.6s once the section is in view;
     reduced motion renders it settled immediately */
  html.js .moments .moments-list::before { transform: scaleY(0); }
  html.js .moments.in .moments-list::before { transform: scaleY(1); transition: transform 1.6s cubic-bezier(0.45, 0, 0.2, 1); }
  @media (prefers-reduced-motion: reduce) {
    html.js .moments .moments-list::before { transform: none !important; transition: none !important; }
  }

  /* india: language chips + lexicon carousel */
  .india-head { margin-bottom: 1.5rem; }
  .tongues ul { display: flex; flex-wrap: wrap; gap: 8px; border-top: none; border-left: none; }
  .tongues li {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 999px;
  }
  .tongue-native { font-size: 1.18rem; }
  .tongues figcaption { display: none; }
  .lexicon {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    scroll-padding-right: 20px;
    padding: 4px 20px 6px;
    margin: 0 -20px;
    scrollbar-width: none;
    border-bottom: none;
    -webkit-overflow-scrolling: touch;
  }
  .lexicon::-webkit-scrollbar { display: none; }
  .entry {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 0 0 86%;
    scroll-snap-align: start;
    padding: 1.2rem 1.2rem 1.25rem;
    border-radius: 24px;
    border: none;
    box-shadow: none;
    background: #fff;
    background: color-mix(in oklab, var(--voice) 6%, #fff);
  }
  .entry dt { display: contents; }
  .entry-said { order: 1; font-size: 1.95rem; }
  .entry-deva { order: 2; margin-top: 0.3rem; }
  .entry-heard { order: 3; margin-top: 0.7rem; gap: 0.6rem; }
  .entry-heard::before { width: 1.6rem; }
  .entry-note { order: 4; margin-top: 0.55rem; font-size: 0.94rem; max-width: none; }

  /* protocol: tighter rules */
  .rules li { padding: 0.85rem 0; column-gap: 1rem; }
  .rule-main { font-size: 1.15rem; line-height: 1.25; }
  .rule-more { margin-top: 0.3rem; font-size: 0.94rem; }
  .protocol-sub { margin-top: 0.9rem; font-size: 0.95rem; }

  /* footer: one column; the call photo is the panel's top band (≤1080) */
  .footer-top h2, .footer-canvas h2 { font-size: 2.9rem; }
  /* the photo band: his office fills the top of the stage, then the mask
     lets it dissolve into the tint the phones stand on */
  .stage-bg { inset: 0 0 auto 0; width: 100%; height: 300px; object-position: 56% 6%; mask-image: linear-gradient(180deg, #000 40%, transparent 94%); -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 94%); }
  .stage-wash { inset: 0 0 auto 0; height: 300px; background: linear-gradient(180deg, rgba(233, 240, 245, 0.22) 0%, rgba(233, 240, 245, 0.10) 45%, rgba(233, 240, 245, 0.38) 84%, rgba(233, 240, 245, 0.12) 100%), linear-gradient(125deg, rgba(82, 117, 104, 0.24), rgba(233, 240, 245, 0.10)); mask-image: linear-gradient(180deg, #000 40%, transparent 94%); -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 94%); }
  .app-phones { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: clamp(0.625rem, 1.75vw, 0.875rem); max-width: 100%; margin: 0; padding-top: 190px; }
  .pilot-actions { margin-top: 1.6rem; }
  .pilot-mail { flex-basis: 100%; font-size: 0.95rem; }
  .footer-card { margin-bottom: 1.25rem; padding: 1.6rem 20px 1.3rem; }
  .footer-cols { gap: 1.2rem 1rem; padding-bottom: 1.2rem; }
  .footer-col { gap: 0.3rem; }
  .footer-wordmark { font-size: clamp(1.56rem, 6.6vw, 7.8rem); }
  .footer-base { padding-top: 1rem; }
  .footer-cols .footer-col:nth-child(3) { grid-column: 1 / -1; }

  .nav { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 12px 20px 0; }
  .nav-brand { gap: 8px; }
  .nav-links { display: flex; grid-column: 1 / -1; grid-row: 2; justify-content: space-between; gap: 12px; }
  .nav-links a { font-size: 0.85rem; padding: 10px 0 14px; }
  #demo { scroll-margin-top: 24px; }
  .hero-canvas:not(.has-video) { background-image: url("media/hero-poster-mobile.webp?v=final4"); }
  .nav-cta { border-radius: 999px; padding: 0.5rem 1.05rem; font-size: 0.88rem; }
  .banner { font-size: 0.82rem; }
  .banner-extra { display: none; }
  .desk-head { padding: 0 10px; margin-bottom: 24px; }
  .desk-head p { margin: 12px 0 0; font-size: 0.94rem; line-height: 1.5; }
  .app-stage { display: flex; gap: 0; justify-content: center; min-height: 0; padding: 24px 9px 38px; border-radius: 22px; }
  /* equal pair scaling: the two devices share one basis (46vw) with a
     fixed gap so 2×width + gap fits the stage's 18px gutters down to
     360px viewports; flex-shrink takes over below that instead of
     clipping the detail phone behind the stage edge */
  .app-phone { flex: 0 1 auto; box-sizing: border-box; width: clamp(150px, 44vw, 200px); aspect-ratio: 0.415; font-size: clamp(9.5px, 2.65vw, 11px); padding: 4px; border-radius: 2rem; }
  .app-phone-detail { width: clamp(150px, 46vw, 200px); }
  .app-screen { border-radius: 1.76rem; }
  .app-island { top: 8px; height: 12px; }
  .app-status { height: 22px; padding: 6px 13px 0; }
  .app-phone-home .app-top { padding-top: 0; }
  .app-status, .app-avatar, .app-chip, .app-play { font-size: max(9px, 0.85em); }
  .app-recording-head span { font-size: max(9px, 0.83em); }
  .app-call-list small, .app-promise small { font-size: max(9px, 0.9em); }
  .app-tabs small { font-size: max(9px, 0.53em); }
  .app-back span { font-size: max(9px, 0.72em); }
  .app-home-main { padding: 0.65em 1.1em 0; }
  .app-top { padding: 0.5em 1.1em 0; }
  /* home stack: the last row's chip must clear the tab bar, so the
     summary/stat spacing and list-row padding compress (mirrors the
     ≥761 block's rhythm at the smaller 11px em: 0.9em → 0.907em) */
  .app-hero { margin-top: 0.3em; padding: 0.65em 0.8em; }
  .app-stats { gap: 0.35em; margin: 0.6em 0; }
  .app-stats li { padding: 0.4em 0.55em; }
  .app-home-main h4, .app-detail-main h4 { margin: 0.35em 0 0.2em; }
  .app-call-list li { gap: 0.1em 0.6em; padding: 0.36em 0; }
  .app-chip { margin-top: 0; padding: 0.18em 0.55em; }
  /* the stretch row keeps ≥6px + the stack's own breathing above the bar;
     space-around shares space evenly — space-between + the 6em right inset
     pressed Calls/Promises/Reports into each other on 46vw screens */
  .app-phone-home .app-tabs { justify-content: space-around; margin-top: auto; padding: 0.45em 1em 0.7em; }
  .app-phone-home .app-screen { height: 100%; padding-bottom: 8px; }
  .app-phone-home .app-call-list { margin-bottom: auto; }
  .app-detail-main { padding: 0 1em; }
  .app-detail-head { padding: 0.45em 0 0.25em; }
  .app-recording { margin-top: 0.15em; padding: 0.6em; }
  .app-player { margin-top: 0.4em; }
  .app-bubble { margin: 0.3em 0; padding: 0.5em 0.7em; }
  .app-promise { margin-top: 0.45em; padding: 0.65em; }
}

@media (max-width: 420px) {
  .hero h1 { font-size: 2.72rem; }
  .hero-actions .pill { font-size: 0.9rem; padding: 0.72rem 0.3rem; }
  .section-head h2, .india-copy h2, .desk-head h2, .protocol-inner :is(h1, h2) { font-size: 2.15rem; }
  .entry-said { font-size: 1.75rem; }
  .moment h3 { font-size: 1.5rem; }
  .entry-heard { font-size: 1.02rem; }
}

/* ---------- the Sahyaan mark ----------
   Travels with your business: the S of Sahyaan drawn as two paths that never
   part, built from two perfect circles, with the yaan as one gold point at
   the head of the route. yaan.js flies the yaan up the S. */
:root { --yaan-dot: #c9932e; }
.yaan-mark { display: block; flex: none; width: auto; height: 30px; aspect-ratio: 25.97 / 37.62; overflow: visible; }
.wordmark { gap: 0.5rem; }
.yaan-line { fill: none; stroke: var(--sy-a); stroke-width: 1.5; stroke-linecap: round; }
.yaan-ship { fill: var(--yaan-dot); }

/* the footer signs off with the full lockup, large */
.footer-wordmark { gap: clamp(0.6rem, 1.6vw, 1.4rem); }
.footer-wordmark .yaan-mark { height: min(15vw, 196px); }
.footer-wordmark .sahyaan-wordmark { width: min(64vw, 820px); height: auto; }
@media (max-width: 760px) {
  .yaan-mark { height: 26px; }
  .footer-wordmark .yaan-mark { height: 14vw; }
}

.text-link { display: inline-block; margin-top: 1rem; text-underline-offset: 4px; color: var(--accent); }


/* ---------- calm: the quiet layer ----------
   Warm charcoal type on soft paper, warm grey hairlines, neutral dark
   panels and plain white or charcoal buttons. Haldi stays Zara's own
   colour inside the call card; nothing else on the page shouts. */
:root {
  --bg: #f7f6f3;
  --ink: #2f2e33;
  --muted: #6e6b69;
  --warm-grey: #6e6b69;
  --accent: #46444d;
  --line: #e4e1dc;
  --lav: #efede9;
  --neel-wash: #efede9;
  --mist: #ecebe7;
  --neel-night: #2a2a31;
  --neel: #3a3a43;
  --dusk:
    radial-gradient(ellipse 46% 60% at 88% 92%, rgba(237, 183, 81, 0.08), transparent 64%),
    linear-gradient(160deg, #3d3d46 0%, #303038 48%, #26262c 100%);
}

.banner { background: #ebe8e3; color: var(--muted); }
.banner a { color: var(--ink); }

.hero h1 { font-size: clamp(2.4rem, 2.6vw + 1.5rem, 5rem); line-height: 1.02; }
.serif-statement { font-size: clamp(2.2rem, 1.7vw + 1.6rem, 4.1rem); }
.entry-said { font-size: clamp(2rem, 1.6vw + 1.3rem, 3.2rem); color: #4a4850; }

.pill-haldi,
.pilot-cta { background: #fff; color: var(--ink); box-shadow: none; }
.pill-haldi:hover,
.pilot-cta:hover { background: #f1efeb; }

.nav-cta { background: var(--ink); border-radius: 999px; }
.nav-cta:hover { background: #45444b; }

/* the pilot panel: warm linen, with the owner's photo in its own true
   colours on the right, fading softly into the linen at its left edge.
   No tint over the photo; the text sits on linen only. */
.footer-canvas { background: #ebe5db; color: var(--ink); }
.footer-canvas::after, .panel-veil { display: none; }
.panel-bg {
  inset: 0 0 0 auto;
  width: 56%;
  height: 100%;
  object-position: 50% 28%;
  mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.55) 14%, #000 30%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.55) 14%, #000 30%);
}
.footer-top h2, .pilot-steps b, .pilot-mail { color: var(--ink); }
.pilot-steps span { color: #5f5c5a; }
.pilot-note { color: var(--muted); }
.pilot-steps li::before { color: var(--ink); border-color: rgba(47, 46, 51, 0.3); }
.footer-canvas .pilot-cta { background: var(--ink); color: #fff; }
.footer-canvas .pilot-cta:hover { background: #45444b; }
.footer-canvas :focus-visible { outline-color: var(--ink); }
@media (min-width: 761px) and (max-width: 1080px) {
  .footer-top > h2 { margin-top: 0; }
  .footer-top > h2, .footer-top > .footer-pilot { max-width: 54%; }
  .panel-bg { width: 48%; }
}
@media (max-width: 760px) {
  .panel-bg {
    inset: 0 0 auto 0;
    width: 100%;
    height: 260px;
    object-position: 70% 18%;
    mask-image: linear-gradient(180deg, #000 50%, transparent);
    -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent);
  }
  .footer-top > h2 { margin-top: 210px; }
}
.hero-sub { color: rgba(255, 255, 255, 0.72); }
.tongue-native { color: var(--accent); }
.entry-deva { color: var(--muted); }
.ev-said { background: rgba(70, 68, 77, 0.05); border-color: rgba(70, 68, 77, 0.12); color: var(--accent); }
.moment { --tone-soft: rgba(70, 68, 77, 0.08); }

/* ---------- the name: Sah holds deep neel, and the colour slides into
   a calm green across yaan. India rides small at the name's upper right
   in its own tricolour, the way a mission carries the national mark. */
:root { --sy-a: #2b2f6b; --sy-b: #1f7a5a; --india-mid: #1d3a8a; }
.sy-a { stop-color: var(--sy-a); }
.sy-b { stop-color: var(--sy-b); }
.sy-name { display: inline-flex; align-items: flex-start; gap: 0.3em; }
.sy-india {
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  margin-top: -0.15em;
  background: linear-gradient(90deg, #f08a24 0 18%, var(--india-mid) 50%, #138808 82% 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.footer-wordmark .sy-india { font-size: clamp(0.8rem, 2.6vw, 2.2rem); margin-top: 0.2em; }