/* ═══════════════════════════════════════════════════════════════
   VITARK.AI — home only (direction A "Thread")
   Source: _design/site-2026-10-18/home (markup.html, direction A).
   Phone first; 47.5em = the design's 760px "wide", 68.75em = its
   1100px "full bar" break.
   ═══════════════════════════════════════════════════════════════ */

/* Shell: sections stack in a flex column so advocates can see the
   answer before the stories (the design's ordS / ordA swap). */
.home { display: flex; flex-direction: column; }
.home > .hero { order: 0; }
.home > .stories { order: 2; }
.home > .answer { order: 3; }
[data-reader="a"] .home > .stories { order: 3; }
[data-reader="a"] .home > .answer { order: 2; }
.home > .record { order: 4; }
.home > .price { order: 5; }
.home > .doors { order: 6; }
.home > .briefs { order: 7; }
.home > .close { order: 8; }
.home > .section + .section { border-top: 0; }
.home > .doors.section, .home > .close.section { border-top: 1px solid var(--color-rule); }
.home-sec { padding: 64px 0; }
@media (min-width: 47.5em) { .home-sec { padding: 96px 0; } }

/* Paper mask: the thread passes behind type, never through it. */
.mask {
  width: fit-content;
  max-width: 100%;
  background: var(--mask, var(--color-paper));
  box-shadow: 0 0 0 24px var(--mask, var(--color-paper));
}

/* ── The thread ─────────────────────────────────────────────── */
.thread {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
  max-width: none;
}
.thread path { fill: none; stroke-linecap: round; }
.thread__under { stroke: var(--color-gold); stroke-width: 5; }
.thread__over { stroke: var(--color-gold-ink); stroke-width: 1.8; }
.thread__bead { fill: var(--color-gold-ink); stroke: var(--color-gold); stroke-width: 4; }
.knot { position: absolute; left: 0; width: 1px; height: 1px; }

/* ── Mascot figures: a zero-width anchor, media centred on it ─── */
.fig { position: absolute; display: block; width: 0; }
.fig__media {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: 50% 100%;
  transform: translateX(-50%);
}

/* ── 1 Hero ─────────────────────────────────────────────────── */
.hero {
  display: flex;
  flex-direction: column;
  overflow: hidden; overflow: clip;
  height: calc(100svh - var(--bar-h));
  min-height: 640px;
  max-height: 1040px;
  padding-bottom: 0;
}
.hero__content { flex: none; }
.hero__h1 { margin-top: 28px; max-width: 12ch; font-size: var(--text-hero-a); line-height: 0.95; }
.hero__h1-adv { display: block; font-size: var(--text-hero-a); line-height: 0.95; }
[data-reader="a"] .hero__h1 { max-width: 12ch; }
.hero__actions { margin-top: 28px; }
.hero__people { position: relative; flex: 1; margin-top: 20px; z-index: 3; pointer-events: none; }
.hero__fig--v { left: 19%; height: 100%; bottom: 0; }
.hero__fig--k { left: 52%; height: 138%; bottom: -38%; }
.hero__fig--t { left: 85%; height: 104%; bottom: 0; }
@media (min-width: 68.75em) {
  /* Above the type mask so the heads are never clipped; pointer-events stay off. */
  .hero__people { position: absolute; inset: 0; margin: 0; z-index: 5; }
  .hero__fig--v { left: 57%; height: 64%; }
  .hero__fig--k { left: 74%; height: 90%; bottom: -26%; }
  .hero__fig--t { left: 90%; height: 68%; }
}

/* ── 2 Pick your problem ────────────────────────────────────── */
.home-h2 { margin-bottom: 32px; }
.pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.pick__card {
  position: relative;
  display: grid;
  grid-template-columns: 40% minmax(0, 1fr);
  grid-template-rows: 100%;
  height: 210px;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-xl);
  background: var(--color-white);
  overflow: hidden; overflow: clip;
  color: var(--color-ink);
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.pick__card:hover { color: var(--color-ink); box-shadow: var(--shadow-lg); }
.pick__card:active { transform: scale(0.98); }
.pick__art { position: relative; min-height: 0; overflow: hidden; overflow: clip; }
.pick__fig { left: 50%; height: 150%; bottom: -52%; }
.pick__card--t .pick__fig { height: 118%; bottom: -18%; }
.pick__text { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 20px 18px 18px 6px; }
.pick__name { font-family: var(--font-heading); font-size: 21px; line-height: 1.05; }
.pick__line { font-family: var(--font-body-serif); font-size: 15px; line-height: 1.3; color: var(--color-navy); }
.pick__go, .brief__go, .home-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-navy);
}
.pick__go { margin-top: auto; }
.pick__go img, .brief__go img { width: 18px; height: 18px; }
.home-more__arrow { width: 18px; height: 18px; background: currentColor; -webkit-mask: url(/assets/icons/arrow.svg) center / contain no-repeat; mask: url(/assets/icons/arrow.svg) center / contain no-repeat; }
@media (min-width: 47.5em) {
  .pick__card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 600px; }
  .pick__art { order: 2; }
  .pick__text { order: 1; padding: 26px 26px 8px; }
  .pick__name { font-size: 27px; }
  .pick__fig { height: 96%; bottom: -6%; }
  .pick__card--t .pick__fig { height: 82%; bottom: 0; }
}

/* "Leads to" link under a section */
.home-more { min-height: var(--tap-min); margin-top: 24px; text-decoration: none; }
.home-more:hover { color: var(--color-slate); }

/* ── 3 One cited answer ─────────────────────────────────────── */
.answer__shots { position: relative; display: block; margin-top: 40px; padding-bottom: 210px; }
.answer__web {
  display: block;
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-rule);
  box-shadow: var(--shadow-xl);
}
.answer__phone {
  position: absolute;
  right: 0;
  top: 34%;
  width: 44%;
  border-radius: 28px;
  overflow: hidden; overflow: clip;
  filter: drop-shadow(0 16px 32px rgba(44,62,80,0.18));
}
.answer__phone img { display: block; width: 100%; height: auto; border-radius: 28px; }
/* Phones: the three steps stack, so none hides off-screen. Wider: one row. */
@media (min-width: 47.5em) {
  .answer__shots { padding-bottom: 150px; }
  .answer__web { width: 80%; }
  .answer__phone { top: 12%; width: 24%; }
  .answer__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}

/* ── 4 The record ───────────────────────────────────────────── */
.record { --mask: var(--color-navy-500); background: var(--color-navy-500); color: var(--color-paper); }
/* Phones: the stacked masks leave thread scraps between rows, so the thread
   runs behind the navy panel instead of across it (.thread is z-index 2). */
@media (max-width: 47.49em) { .record { z-index: 3; } }
.record.home-sec { padding: 80px 0; }
@media (min-width: 47.5em) { .record.home-sec { padding: 112px 0; } }
.record__n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(46px, 13.12vw, 165px);
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.record__sub { margin-top: 16px; font-family: var(--font-heading); font-size: clamp(26px, 3.52vw, 42px); line-height: 1.2; color: var(--color-gold); }
.record__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 0 32px; margin-top: 56px; }
.record__cell {
  width: auto;
  border-top: 1.5px solid var(--color-slate);
  padding: 20px 0;
  font-family: var(--font-heading);
  font-size: clamp(27px, 3.36vw, 43px);
  line-height: 1.05;
}
.record__lang { margin-top: 48px; font-family: var(--font-display); font-weight: 700; font-size: clamp(38px, 6.4vw, 77px); line-height: 1.1; color: var(--color-gold); }
.record .home-more { color: var(--color-gold); }

/* ── 5 Price ────────────────────────────────────────────────── */
.price.home-sec { display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; overflow: clip; padding: 96px 0 0; }
.price__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 0 40px; align-items: end; }
.price__copy { padding-bottom: 40px; }
.price__n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(77px, 21.6vw, 192px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  color: var(--color-navy);
  white-space: nowrap;
  font-variant-numeric: lining-nums;
}
.price__unit { margin-top: 28px; font-family: var(--font-heading); font-size: clamp(27px, 3.52vw, 42px); line-height: 1.1; }
.price__free { margin-top: 32px; max-width: 22ch; font-family: var(--font-body-serif); font-size: clamp(18px, 1.92vw, 22px); line-height: 1.3; color: var(--color-navy); }
.price__was { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: 380px; }
.price__col { position: relative; }
.price__old { position: relative; z-index: 2; display: flex; justify-content: center; }
.price__old-n {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(29px, 4.8vw, 51px);
  color: var(--color-slate);
  text-decoration: none;
  font-variant-numeric: lining-nums;
}
.strike {
  position: absolute;
  left: -5%;
  right: -5%;
  top: 52%;
  height: 5px;
  background: var(--color-navy);
  transform-origin: left center;
}
.price__fig { left: 50%; bottom: 0; height: 76%; }
.price__fig--t { height: 60%; }
/* Two columns from ~62em: keep ₹19.90 inside its column. */
@media (min-width: 62em) { .price__n { font-size: min(11.52vw, 157px); } }
@media (min-width: 47.5em) {
  .price__copy { padding-bottom: 96px; }
  .price__was { height: 520px; }
}

/* ── 6 Where to ask ─────────────────────────────────────────── */
.doors__h2 { margin-bottom: 40px; }
.doors__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 40px; align-items: start; }
.doors__bezel { width: min(300px, 100%); margin: 0 auto; padding: 10px; background: var(--color-ink); border-radius: 44px; box-shadow: var(--shadow-lg); }
.doors__screen { border-radius: 34px; overflow: hidden; overflow: clip; background: #1F2527; }
.doors__screen img { display: block; width: 100%; height: auto; }
.doors__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.door {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 150px;
  padding: 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-rule);
  background: var(--color-white);
  color: var(--color-ink);
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: box-shadow 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.door:hover { color: var(--color-ink); box-shadow: var(--shadow-lg); }
.door:active { transform: scale(0.98); }
.door__icon { display: block; flex: none; width: 40px; height: 40px; }
.door:hover { border-color: var(--color-navy-300); }
.door:hover .door__icon { transform: translateY(-2px); }
.door__name { font-family: var(--font-heading); font-size: 22px; line-height: 1; }
.door__meta { font-size: 14px; color: var(--color-navy); }
.door__go { margin-top: auto; font-size: 14px; font-weight: 700; color: var(--color-navy); }
.door--wide { grid-column: 1 / -1; padding: 22px; }
.door--wide .door__name { font-size: 26px; }
.doors__arrow { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-left: 14px; vertical-align: middle; border: 1.5px solid var(--color-ink); border-radius: 50%; color: var(--color-ink); background: transparent; transition: background 160ms ease, color 160ms ease; }
.doors__arrow:hover, .doors__arrow:focus-visible { background: var(--color-ink); color: var(--color-paper); }
@media (prefers-reduced-motion: reduce) { .doors__arrow { transition: none; } }

/* ── 7 Briefings ────────────────────────────────────────────── */
.briefs .home-h2 { margin-bottom: 36px; }
.briefs__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); grid-auto-rows: 1fr; gap: 16px; }
.brief {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 26px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-rule);
  background: var(--color-white);
  color: var(--color-ink);
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.brief:hover { color: var(--color-ink); box-shadow: var(--shadow-lg); }
.brief:active { transform: scale(0.98); }
.brief__t { font-family: var(--font-heading); font-size: clamp(21px, 1.92vw, 25px); line-height: 1.12; text-wrap: pretty; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.brief__go { margin-top: auto; font-size: 14px; }
.briefs__more { margin-top: 28px; }

/* ── 8 Close ────────────────────────────────────────────────── */
.close.home-sec {
  display: flex;
  flex-direction: column;
  overflow: hidden; overflow: clip;
  height: calc(100svh - var(--bar-h));
  min-height: 700px;
  max-height: 1040px;
  padding: 72px 0 0;
}
.close__content { flex: none; display: flex; flex-direction: column; align-items: center; text-align: center; }
.close__h2 { max-width: 16ch; color: var(--color-ink); }
.close__ask { margin-top: 28px; }
.close__people { position: relative; flex: 1; margin-top: 28px; z-index: 3; pointer-events: none; }
.close__fig { height: 150%; bottom: -50%; }
.close__fig--v { left: 17%; }
.close__fig--t { left: 83%; }
.close__fig--k { left: 50%; height: 158%; bottom: -54%; }
@media (min-width: 47.5em) {
  .close__fig--v { left: 26%; }
  .close__fig--t { left: 74%; }
}

@media (prefers-reduced-motion: reduce) {
  .pick__card, .brief, .doors__go { transition: none; }
}