/* NUR and Vero product pages: the brief's sales structure (Problem → Solution → Return → Conversation).
   Built on the Labs layer (labs.css): same tokens, ruled rows, square frames, photography in the Film hero grade. */

/* ---------- Labels ---------- */
.eyebrow, .kicker, .list-title {
  font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
}
.eyebrow { color: #7fa6ff; } /* the Labs tint, 6.4:1 on Ink */
.kicker { display: flex; align-items: center; gap: 12px; color: var(--on-paper-2); }
.kicker::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.ink .kicker, .band .kicker { color: var(--on-ink-2); }
.list-title { color: var(--on-paper-2); }
.ink .list-title { color: var(--on-ink-2); }

/* ---------- Hero ---------- */
.product-hero .hero-content { gap: clamp(10px, 1.6vh, 18px); }
.product-title { font-size: clamp(4.5rem, 2.4rem + 9vw, 10rem); line-height: 0.88; letter-spacing: -0.05em; }
.tagline { font-size: clamp(1.375rem, 1.05rem + 1.3vw, 2.125rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; max-width: 24ch; }
.product-hero .lead { max-width: 54ch; }
.hero-facts {
  justify-self: stretch; max-width: 760px; margin: 12px 0 0; padding-top: 18px;
  display: flex; flex-wrap: wrap; gap: 14px clamp(24px, 4vw, 48px);
  border-top: 1px solid var(--on-ink-line);
}
.hero-facts dt { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-ink-2); }
.hero-facts dd { margin: 4px 0 0; font-size: var(--fs-small); }

/* ---------- Section heads and text + picture pairs ---------- */
.section-head { display: grid; gap: 18px; max-width: 820px; margin-bottom: clamp(36px, 5vw, 72px); }
.section-head .lead { max-width: 60ch; }
.ink .section-head .lead, .ink .duo-text .lead { color: var(--on-ink-2); }
.paper .duo-text .lead, .silver .section-head .lead { color: var(--on-paper-2); }

.duo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 104px); align-items: center; }
.duo--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.duo-text { display: grid; gap: 20px; align-content: center; justify-items: start; }
.duo-text .lead { max-width: 52ch; }
.duo-media { position: relative; overflow: hidden; margin: 0; aspect-ratio: 4 / 5; background: var(--ink-raised); }
.duo-media--wide { aspect-ratio: 16 / 10; }
.duo-media picture, .duo-media img { width: 100%; height: 100%; }
.duo-media img { object-fit: cover; }
@media (max-width: 899px) {
  .duo, .duo--flip { grid-template-columns: 1fr; }
  .duo-media { aspect-ratio: 4 / 3; }
}

/* ---------- Problem: where patients slip away ---------- */
.slip-title { margin-top: clamp(56px, 7vw, 104px); padding-bottom: 16px; }
.slip-list {
  counter-reset: slip; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 40px);
  border-top: 1px solid var(--on-paper-line);
}
.slip-list li {
  counter-increment: slip; display: grid; grid-template-columns: 2.25em minmax(0, 1fr); gap: 12px;
  padding-block: clamp(18px, 2vw, 28px); border-bottom: 1px solid var(--on-paper-line);
  font-size: var(--fs-lead); line-height: 1.4;
}
.slip-list li::before {
  content: counter(slip, decimal-leading-zero);
  font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.08em; color: var(--on-paper-2); padding-top: 0.45em;
}
@media (max-width: 1023px) { .slip-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .slip-list { grid-template-columns: 1fr; } }

/* ---------- Solution: what NUR does, as a ruled grid ---------- */
.features {
  counter-reset: feat; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--on-ink-line); border-left: 1px solid var(--on-ink-line);
}
.feature {
  counter-increment: feat; display: grid; align-content: start; gap: 10px; min-height: 230px;
  padding: clamp(20px, 2.4vw, 32px);
  border-right: 1px solid var(--on-ink-line); border-bottom: 1px solid var(--on-ink-line);
  transition: background-color 300ms ease;
}
.feature::before {
  content: counter(feat, decimal-leading-zero); margin-bottom: clamp(20px, 3vw, 44px);
  font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.08em; color: #7fa6ff;
}
.feature h3 { font-size: var(--fs-h3); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
.feature p { font-size: 0.9375rem; line-height: 1.55; color: var(--on-ink-2); }
@media (hover: hover) and (pointer: fine) { .feature:hover { background: var(--ink-raised); } }
@media (max-width: 1023px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .features { grid-template-columns: 1fr; }
  .feature { min-height: 0; }
  .feature::before { margin-bottom: 6px; }
}

/* What it does and what it leaves to clinicians */
.bounds {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(24px, 5vw, 80px);
  margin-top: clamp(64px, 8vw, 120px);
}
.bounds-title {
  grid-column: 1 / -1; max-width: 22ch;
  font-size: clamp(1.625rem, 1.15rem + 2vw, 2.75rem); font-weight: 500; line-height: 1.08; letter-spacing: -0.025em;
}
.bounds-label {
  padding-bottom: 14px; border-bottom: 1px solid var(--paper);
  font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.12em; text-transform: uppercase;
}
.bounds-col ul { margin: 0; padding: 0; }
.bounds-col li { display: flex; align-items: baseline; gap: 14px; padding-block: 13px; border-bottom: 1px solid var(--on-ink-line); }
.bounds-col li::before { content: ""; flex: none; width: 9px; height: 9px; background: #7fa6ff; transform: translateY(-1px); }
.bounds-col--no .bounds-label { color: var(--on-ink-2); border-color: var(--on-ink-line); }
.bounds-col--no li { color: var(--on-ink-2); }
.bounds-col--no li::before { background: none; border: 1px solid var(--steel); }
.bounds-note { grid-column: 1 / -1; max-width: 62ch; color: var(--on-ink-2); }
@media (max-width: 699px) { .bounds { grid-template-columns: 1fr; } }

/* ---------- Flows: How it works, and the enquiry journey ----------
   One ruled line with a square node per step. main.js draws the line with the scroll (--progress)
   and lights each node as the line reaches it; without script every step simply shows. */
.flow {
  --progress: 1; --fg: var(--ink); --bg: var(--silver); --line: var(--on-paper-line); --muted: var(--on-paper-2);
  position: relative; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px);
}
.ink .flow { --fg: var(--paper); --bg: var(--ink); --line: var(--on-ink-line); --muted: var(--on-ink-2); }
.flow::before, .flow::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; }
.flow::before { background: var(--line); }
.flow::after { background: var(--fg); transform: scaleX(var(--progress)); transform-origin: left; }
.flow-step { position: relative; display: grid; align-content: start; gap: 10px; padding-top: 44px; transition: opacity 500ms ease; }
.flow-step::before {
  content: ""; position: absolute; left: 0; top: 0; z-index: 1; width: 15px; height: 15px;
  border: 1px solid var(--fg); background: var(--fg); transition: background-color 300ms ease;
}
.flow-num { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.08em; color: var(--muted); }
.flow-title { font-size: var(--fs-h3); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
.flow-step p { font-size: 0.9375rem; line-height: 1.55; color: var(--muted); }
.flow.is-animated .flow-step:not(.is-on) { opacity: 0.38; }
.flow.is-animated .flow-step:not(.is-on)::before { background: var(--bg); }
@media (max-width: 1023px) {
  .flow { grid-template-columns: 1fr; gap: 0; }
  .flow::before, .flow::after { left: 7px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; }
  .flow::after { transform: scaleY(var(--progress)); transform-origin: top; }
  .flow-step { padding: 0 0 clamp(28px, 4vw, 40px) 44px; }
  .flow-step:last-child { padding-bottom: 0; }
  .flow-step::before { top: 2px; }
}

/* The enquiry journey sits under the lead-recovery intro */
.flow--pipeline { margin-top: clamp(56px, 7vw, 104px); }
.flow--pipeline .flow-step { padding-top: 40px; }
@media (max-width: 1023px) { .flow--pipeline .flow-step { padding: 0 0 22px 44px; } }

/* ---------- Languages ---------- */
.greet {
  display: grid; margin: 4px 0; overflow: clip;
  font-size: clamp(2.5rem, 1.5rem + 4vw, 4.75rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.03em;
}
.greet > span { grid-area: 1 / 1; justify-self: start; }
.greet [lang="ar"], .greet [lang="ur"] { font-family: "IBM Plex Sans Arabic", var(--font-sans); letter-spacing: 0; }
.greet [lang="hi"] { font-family: "IBM Plex Sans Devanagari", var(--font-sans); letter-spacing: 0; }
.greet [lang="zh"] { font-family: "Noto Sans SC", var(--font-sans); letter-spacing: 0; }
.greet > span:not(:first-child) { visibility: hidden; }
.greet.is-rotating > span {
  visibility: visible; opacity: 0; transform: translateY(70%);
  transition: opacity 500ms ease, transform 800ms var(--ease-out);
}
.greet.is-rotating > span.is-on { opacity: 1; transform: none; }
.greet.is-rotating > span.is-off { transform: translateY(-70%); }
.lang-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; }
.lang-list li {
  padding: 8px 14px; border: 1px solid var(--on-ink-line);
  font-size: var(--fs-small); color: var(--on-ink-2);
}

/* ---------- Human in the loop ---------- */
.handover { display: grid; gap: 0; margin: 8px 0 0; width: 100%; border-top: 1px solid var(--on-paper-line); }
.handover > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 16px; padding-block: 18px; border-bottom: 1px solid var(--on-paper-line); }
.handover dt { font-weight: 500; }
.handover dd { margin: 0; color: var(--on-paper-2); }
@media (max-width: 599px) { .handover > div { grid-template-columns: 1fr; gap: 6px; } }

.assurances {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(20px, 3vw, 48px);
  margin: clamp(56px, 7vw, 104px) 0 0; padding: 0;
}
.assurances li { display: grid; align-content: start; gap: 10px; padding-top: 20px; border-top: 1px solid var(--ink); }
.assurances h3 { font-size: var(--fs-h3); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
.assurances p { color: var(--on-paper-2); }
@media (max-width: 899px) { .assurances { grid-template-columns: 1fr; } }

/* ---------- Lead recovery ---------- */
.recovery-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px clamp(24px, 5vw, 80px);
  margin-top: clamp(56px, 7vw, 104px);
}
.recovery-grid .list-title { padding-bottom: 14px; border-bottom: 1px solid var(--paper); color: var(--on-ink); }
.ticks { margin: 0; padding: 0; }
.ticks li { display: flex; align-items: baseline; gap: 14px; padding-block: 13px; border-bottom: 1px solid var(--on-ink-line); color: var(--on-ink-2); }
.ticks li::before { content: ""; flex: none; width: 9px; height: 9px; background: #7fa6ff; transform: translateY(-1px); }
@media (max-width: 699px) { .recovery-grid { grid-template-columns: 1fr; } }

/* ---------- Data and security: a full-bleed still carries the headline ---------- */
.security { padding-bottom: var(--section-y); }
.band {
  position: relative; isolation: isolate; overflow: hidden; color: var(--paper);
  min-height: clamp(380px, 48vw, 640px); display: flex; align-items: flex-end;
  padding-block: clamp(64px, 8vw, 120px) clamp(36px, 5vw, 64px);
}
.band-media { position: absolute; inset: -8% 0; z-index: -2; }
.band-media picture, .band-media img { width: 100%; height: 100%; }
.band-media img { object-fit: cover; }
.band-shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, rgba(5, 39, 48, 0.55) 0%, rgba(5, 39, 48, 0) 30%),
    linear-gradient(to top, rgba(5, 39, 48, 0.9) 0%, rgba(6, 30, 44, 0.35) 45%, rgba(6, 30, 44, 0) 75%);
}
.band-content { display: grid; gap: 16px; }
.security-body { padding-top: clamp(40px, 5vw, 72px); }
.security-body .lead { max-width: 58ch; color: var(--on-paper-2); margin-bottom: clamp(32px, 4vw, 56px); }
.controls {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0;
  border-top: 1px solid var(--on-paper-line); border-left: 1px solid var(--on-paper-line);
}
.control {
  display: grid; align-content: start; gap: 10px; padding: clamp(20px, 2.4vw, 32px);
  border-right: 1px solid var(--on-paper-line); border-bottom: 1px solid var(--on-paper-line);
}
.control h3 { font-size: var(--fs-h3); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
.control p { color: var(--on-paper-2); }
@media (max-width: 899px) { .controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .controls { grid-template-columns: 1fr; } }

/* ---------- The return ---------- */
.outcomes {
  counter-reset: outcome; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 4vw, 56px) clamp(24px, 5vw, 80px);
}
.outcome { counter-increment: outcome; display: grid; align-content: start; gap: 12px; padding-top: 20px; border-top: 1px solid var(--on-ink-line); }
.outcome::before { content: counter(outcome, decimal-leading-zero); font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.08em; color: #7fa6ff; }
.outcome h3 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.025em; }
.outcome p { max-width: 44ch; color: var(--on-ink-2); }
@media (max-width: 699px) { .outcomes { grid-template-columns: 1fr; } }

/* ---------- Getting started ---------- */
.start-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.steps { margin: 0; padding: 0; border-top: 1px solid var(--on-paper-line); }
.steps li {
  display: grid; grid-template-columns: 3rem minmax(0, 10.5rem) minmax(0, 1fr); gap: 8px 16px; align-items: baseline;
  padding-block: clamp(18px, 2.2vw, 28px); border-bottom: 1px solid var(--on-paper-line);
}
.step-num { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.08em; color: var(--on-paper-2); }
.steps h3 { font-size: var(--fs-h3); font-weight: 500; }
.steps p { color: var(--on-paper-2); }
.pricing { background: var(--ink); color: var(--on-ink); padding: clamp(24px, 3.2vw, 44px); }
.pricing-title { font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-ink-2); }
.pricing dl { margin: 18px 0 0; }
.pricing dl > div { display: grid; gap: 6px; padding-block: 16px; border-top: 1px solid var(--on-ink-line); }
.pricing dt { font-weight: 500; font-size: 1.0625rem; }
.pricing dd { margin: 0; font-size: 0.9375rem; color: var(--on-ink-2); }
@media (max-width: 899px) { .start-grid { grid-template-columns: 1fr; } }
@media (max-width: 599px) {
  .steps li { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .steps p { grid-column: 2; }
  .pricing { margin-inline: calc(var(--gutter) * -1); }
}