:root {
  --ink: #152133;
  --muted: #526074;
  --panel: #ffffff;
  --paper: #fbfaf6;
  --soft: #eef3f6;
  --line: #d8dee7;
  --deep: #13283d;
  --navy: #0b3672;
  --accent: #b68a3a;
  --accent-dark: #7a5a22;
  --focus: #285f8f;
  --shadow: 0 24px 60px rgba(19, 40, 61, 0.14);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --header-clearance: 10.75rem;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-clearance);
}

body {
  margin: 0;
  font-family: "Aptos", "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(182, 138, 58, 0.11), transparent 30rem),
    linear-gradient(135deg, #fbfaf6 0%, #eef3f6 100%);
  line-height: 1.55;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(21, 33, 51, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 33, 51, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.58), transparent 72%);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  padding: 0.75rem 1rem;
  background: var(--deep);
  color: #fff;
  z-index: 999;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

.container {
  width: min(1280px, calc(100% - 3rem));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(251, 250, 246, 0.92);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(216, 222, 231, 0.75);
}

.header-inner {
  min-height: 148px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  color: var(--deep);
  text-decoration: none;
  flex: 1 1 660px;
  min-width: 0;
}

.brand-logo {
  display: block;
  width: min(670px, 58vw);
  max-width: 100%;
  height: auto;
}

.top-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(0.85rem, 1.6vw, 1.45rem);
  font-size: clamp(0.95rem, 1.15vw, 1.08rem);
  white-space: nowrap;
}

.top-nav a {
  position: relative;
  color: var(--deep);
  text-decoration: none;
  padding-bottom: 0.24rem;
  border-bottom: 1px solid transparent;
}

.top-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.22rem;
  height: 2px;
  background: transparent;
  border-radius: 999px;
}

.top-nav a:hover::after,
.top-nav a:focus-visible::after,
.top-nav a.is-active::after,
.top-nav a[aria-current="true"]::after {
  background: var(--accent);
}

.top-nav a:focus-visible {
  outline: none;
}

.section {
  padding: 5.25rem 0;
  scroll-margin-top: var(--header-clearance);
}

.hero {
  min-height: calc(100svh - 148px);
  padding-top: clamp(1.45rem, 2.2vh, 2rem);
  padding-bottom: clamp(1.5rem, 2.6vh, 2.25rem);
  display: flex;
  align-items: stretch;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr);
  grid-template-rows: 1fr auto;
  column-gap: clamp(2.75rem, 5vw, 5rem);
  row-gap: clamp(1.1rem, 2.4vh, 1.8rem);
  align-items: center;
}

.hero-copy {
  max-width: 40.5rem;
}

.eyebrow {
  width: fit-content;
  margin: 0 0 1.05rem;
  padding: 0.42rem 0.82rem;
  border: 1px solid rgba(182, 138, 58, 0.34);
  border-radius: 999px;
  background: rgba(182, 138, 58, 0.11);
  color: var(--accent-dark);
  font-weight: 800;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.02;
  color: var(--deep);
  letter-spacing: -0.04em;
}

h1 {
  font-size: clamp(3.4rem, 5.2vw, 5.55rem);
  line-height: 0.98;
  max-width: 7.8em;
}

h2 {
  font-size: clamp(2rem, 4vw, 3.25rem);
}

h3 {
  font-size: 1.45rem;
}

.title-line {
  display: block;
}

.lead {
  margin: 1rem 0 0;
  max-width: 60ch;
  font-size: clamp(1.05rem, 1.35vw, 1.22rem);
  color: #27364a;
}

.support-lead {
  margin-top: 0.9rem;
}

.hero-emphasis {
  display: grid;
  gap: 0.18rem;
  margin: 1.05rem 0 0;
  color: var(--deep);
  font-size: clamp(1.02rem, 1.3vw, 1.16rem);
  line-height: 1.35;
}

.source-line {
  display: grid;
  gap: 0.12rem;
  margin: 1.05rem 0 0;
  font-size: clamp(0.92rem, 1.05vw, 1rem);
  line-height: 1.35;
  color: var(--deep);
}

.source-line span {
  display: block;
}

.trust-panel {
  display: grid;
  gap: clamp(1rem, 2vh, 1.35rem);
  align-self: center;
}

.panel-card,
.lens-card,
.pilot-card,
.chat-prototype,
.source-hint,
.login-card,
.selected-lens {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(216, 222, 231, 0.92);
  box-shadow: var(--shadow);
  border-radius: var(--radius-lg);
}

.panel-card {
  padding: clamp(1.15rem, 1.8vw, 1.55rem) clamp(1.2rem, 2vw, 1.75rem);
}

.panel-card h2 {
  font-size: clamp(1.25rem, 1.6vw, 1.55rem);
  margin-bottom: 0.75rem;
}

.panel-card ol,
.panel-card ul,
.lens-card ul,
.pilot-card ul {
  margin: 0;
  padding-left: 1.25rem;
}

.panel-card li + li,
.lens-card li + li,
.pilot-card li + li {
  margin-top: 0.42rem;
}

.good-for { border-top: 5px solid var(--deep); }
.not-for { border-top: 5px solid var(--accent); }

.hero-action-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1.55rem;
  min-width: 0;
}

.hero-buttons {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: nowrap;
}

.hero-quote {
  margin: 0;
  padding-left: 1.4rem;
  border-left: 2px solid var(--accent);
  color: var(--deep);
  font-style: italic;
  font-size: clamp(0.86rem, 1vw, 0.95rem);
  line-height: 1.35;
  white-space: nowrap;
  overflow: visible;
}

.hero-quote span {
  white-space: nowrap;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.72rem 1.2rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.button:hover { transform: translateY(-1px); }

.button:focus-visible,
textarea:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: 4px solid rgba(40, 95, 143, 0.28);
  outline-offset: 3px;
}

.button.primary {
  color: #fff;
  background: var(--deep);
  box-shadow: 0 12px 25px rgba(19, 40, 61, 0.22);
}

.button.primary:hover { background: #0d1c2d; }

.button.secondary {
  color: var(--deep);
  background: #fff;
  border-color: var(--line);
}

.section-heading {
  max-width: none;
  margin-bottom: 1.6rem;
}

.section-heading p:not(.eyebrow) {
  font-size: 1.1rem;
  color: var(--muted);
}

.lens-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.lens-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.55rem;
}

.lens-card p { margin: 0; }
.lens-intro { font-weight: 800; }
.question-list { color: #24344a; }
.lens-button { margin-top: auto; width: fit-content; }

.navigator-section {
  padding-top: 5rem;
  padding-bottom: 8rem;
  min-height: calc(100svh - 148px);
}

.navigator-grid,
.pilot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 2.35rem;
  align-items: center;
}

.navigator-intro p:not(.eyebrow),
.pilot-grid p {
  color: var(--muted);
  max-width: 68ch;
}

.selected-lens {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
}

.source-hint {
  padding: 1rem 1.1rem;
  margin-top: 1rem;
  color: var(--deep);
  border-left: 5px solid var(--accent);
}

.navigator-card-wrapper {
  display: grid;
  gap: 1rem;
}

.login-card {
  display: grid;
  gap: 0.75rem;
  padding: 1.55rem;
}

.login-card h3,
.login-card p { margin: 0; }
.login-card label { font-weight: 800; }

.login-card input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  font: inherit;
  color: var(--ink);
  background: #fff;
}

.error {
  min-height: 1.4rem;
  color: #75433e;
  font-weight: 700;
}

.chat-prototype { overflow: hidden; }
.hidden { display: none !important; }

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  background: var(--deep);
  color: #fff;
}

.chat-header span {
  display: block;
  color: rgba(255,255,255,0.78);
  font-size: 0.9rem;
}

.chat-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.status-pill {
  white-space: nowrap;
  padding: 0.38rem 0.7rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff !important;
}

.button.compact {
  min-height: 38px;
  padding: 0.5rem 0.8rem;
  font-size: 0.9rem;
}

.privacy-strip {
  padding: 0.85rem 1rem;
  background: #fff7e8;
  border-bottom: 1px solid rgba(182, 138, 58, 0.28);
  color: var(--deep);
  font-size: 0.95rem;
}

.feedback-strip {
  display: flex;
  justify-content: flex-end;
  padding: 0.55rem 1rem;
  background: #fffdf8;
  border-bottom: 1px solid rgba(182, 138, 58, 0.18);
}

.feedback-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0.48rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(182, 138, 58, 0.36);
  background: rgba(182, 138, 58, 0.12);
  color: var(--deep);
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none;
}

.feedback-link:hover,
.feedback-link:focus {
  background: rgba(182, 138, 58, 0.2);
  transform: translateY(-1px);
}

.pilot-card a {
  color: var(--deep);
  font-weight: 800;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.chat-log {
  min-height: 260px;
  max-height: 420px;
  overflow-y: auto;
  padding: 1rem;
  background: #f9fafb;
}

.message {
  width: fit-content;
  max-width: min(88%, 42rem);
  padding: 0.9rem 1rem;
  border-radius: 18px;
  margin-bottom: 0.85rem;
}

.message p { margin: 0; }
.assistant-message { background: #fff; border: 1px solid var(--line); }
.user-message { margin-left: auto; background: var(--deep); color: #fff; }
.message.assistant-message.loading { opacity: 0.78; font-style: italic; }

.chat-form {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  border-top: 1px solid var(--line);
  background: #fff;
}

.chat-form label { font-weight: 800; }

textarea {
  width: 100%;
  resize: vertical;
  min-height: 140px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1rem;
  font: inherit;
  color: var(--ink);
  background: #fff;
}

.form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.input-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.pilot-section {
  min-height: calc(100svh - 148px);
  padding-top: 5rem;
  padding-bottom: 18rem;
  background: linear-gradient(180deg, rgba(19, 40, 61, 0.06), rgba(255,255,255,0));
}

.pilot-card {
  padding: 1.45rem;
}

.pilot-card h3 { margin-bottom: 1rem; }

.site-footer {
  padding: 2rem 0;
  background: var(--deep);
  color: rgba(255,255,255,0.82);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-inner p { margin: 0; }

@media (min-width: 861px) {
  .source-line,
  .section-heading h2,
  .section-heading p:not(.eyebrow) {
    white-space: nowrap;
  }
}

@media (max-width: 1100px) {
  .header-inner {
    align-items: flex-start;
    flex-direction: column;
    padding: 0.9rem 0;
  }

  .brand-logo { width: min(600px, 92vw); }
  .top-nav { flex-wrap: wrap; justify-content: flex-start; }
  .hero { min-height: auto; }
  .hero-grid,
  .navigator-grid,
  .pilot-grid,
  .lens-grid {
    grid-template-columns: 1fr;
  }

  .hero-action-row {
    grid-template-columns: 1fr;
  }

  .hero-quote {
    white-space: normal;
  }
}

@media (max-width: 860px) {
  :root { --header-clearance: 8.5rem; }

  .container { width: min(100% - 2rem, 720px); }
  .section { padding: 3.6rem 0; }
  .header-inner { min-height: 112px; }
  .brand-logo { width: min(430px, 92vw); }
  .hero-buttons { flex-wrap: wrap; }
  .button { width: fit-content; }
  .form-actions { align-items: stretch; flex-direction: column; }
  .form-actions .button { width: 100%; }
  .chat-header { align-items: flex-start; flex-direction: column; }
  .chat-header-actions { justify-content: flex-start; }
  .pilot-section { padding-bottom: 10rem; }
}

@media (max-width: 540px) {
  h1 { font-size: clamp(2.8rem, 13vw, 4rem); }
  .button { width: 100%; }
  .hero-buttons { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}


/* v18: opened Navigator working area.
   Keeps the v17 landing page intact. Once the password gate opens the chat,
   Navigator becomes a full-width in-page workbench rather than staying as a
   right-column card. */
.navigator-section.navigator-open {
  padding-top: 3.35rem;
  padding-bottom: 7rem;
}

.navigator-section.navigator-open .navigator-grid {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 1.25rem;
}

.navigator-section.navigator-open .navigator-intro {
  max-width: 980px;
}

.navigator-section.navigator-open .navigator-intro p:not(.eyebrow) {
  max-width: 82ch;
}

.navigator-section.navigator-open .source-hint,
.navigator-section.navigator-open .selected-lens {
  max-width: 980px;
}

.navigator-section.navigator-open .navigator-card-wrapper {
  width: min(100%, 1120px);
  margin: 0 auto;
}

.navigator-section.navigator-open .chat-prototype {
  width: 100%;
}

.navigator-section.navigator-open .chat-log {
  min-height: clamp(420px, 46svh, 680px);
  max-height: clamp(520px, 56svh, 780px);
}

.navigator-section.navigator-open .message {
  max-width: min(90%, 68rem);
}

.navigator-section.navigator-open textarea {
  min-height: 160px;
}

@media (max-width: 860px) {
  .navigator-section.navigator-open {
    padding-top: 2.4rem;
    padding-bottom: 5rem;
  }

  .navigator-section.navigator-open .navigator-grid {
    gap: 1rem;
  }

  .navigator-section.navigator-open .navigator-card-wrapper {
    width: 100%;
  }

  .navigator-section.navigator-open .chat-log {
    min-height: 46svh;
    max-height: 58svh;
  }

  .navigator-section.navigator-open textarea {
    min-height: 135px;
  }
}

@media (max-width: 540px) {
  .navigator-section.navigator-open .chat-log {
    min-height: 44svh;
    max-height: 56svh;
  }
}


/* v19: opened Navigator start state refinement.
   v18 correctly expanded the chat into a full-width workbench, but the first
   screen after password entry showed too much empty message space before the
   user had submitted anything. Keep the full-width workbench, but make the
   initial open state more compact; expand once the conversation starts. */
.navigator-section.navigator-open .chat-prototype.chat-start-state .chat-log {
  min-height: clamp(150px, 18svh, 240px);
  max-height: clamp(190px, 24svh, 300px);
}

.navigator-section.navigator-open .chat-prototype.chat-start-state textarea {
  min-height: 150px;
}

.navigator-section.navigator-open .chat-prototype.conversation-started .chat-log {
  min-height: clamp(420px, 46svh, 680px);
  max-height: clamp(520px, 56svh, 780px);
}

@media (max-width: 860px) {
  .navigator-section.navigator-open .chat-prototype.chat-start-state .chat-log {
    min-height: 150px;
    max-height: 230px;
  }

  .navigator-section.navigator-open .chat-prototype.chat-start-state textarea {
    min-height: 130px;
  }

  .navigator-section.navigator-open .chat-prototype.conversation-started .chat-log {
    min-height: 46svh;
    max-height: 58svh;
  }
}

@media (max-width: 540px) {
  .navigator-section.navigator-open .chat-prototype.chat-start-state .chat-log {
    min-height: 140px;
    max-height: 210px;
  }

  .navigator-section.navigator-open .chat-prototype.conversation-started .chat-log {
    min-height: 44svh;
    max-height: 56svh;
  }
}

/* v20: opened Navigator compact intro.
   v19 preserved the full pre-launch explanation above the opened chat, which
   pushed the working Navigator area too far down the page. Keep all content in
   the HTML intact, but in the opened state make the intro act as a compact
   context header so the usable chat workbench appears immediately. */
.navigator-section.navigator-open {
  padding-top: 1.35rem;
  padding-bottom: 6.5rem;
}

.navigator-section.navigator-open .navigator-grid {
  gap: 0.9rem;
}

.navigator-section.navigator-open .navigator-intro {
  width: min(100%, 1120px);
  margin: 0 auto;
}

.navigator-section.navigator-open .navigator-intro .eyebrow {
  margin-bottom: 0.5rem;
}

.navigator-section.navigator-open .navigator-intro h2 {
  max-width: none;
  margin: 0 0 0.65rem;
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height: 1.05;
}

.navigator-section.navigator-open .navigator-intro > p:not(.eyebrow):not(.selected-lens) {
  display: none;
}

.navigator-section.navigator-open .selected-lens {
  max-width: none;
  margin: 0;
  padding: 0.65rem 0.85rem;
  font-size: 0.98rem;
}

.navigator-section.navigator-open .source-hint {
  display: none;
}

.navigator-section.navigator-open .navigator-card-wrapper {
  width: min(100%, 1120px);
}

.navigator-section.navigator-open .chat-header {
  padding: 0.9rem 1rem;
}

.navigator-section.navigator-open .privacy-strip {
  padding: 0.85rem 1rem;
}

@media (max-width: 860px) {
  .navigator-section.navigator-open {
    padding-top: 1rem;
    padding-bottom: 5rem;
  }

  .navigator-section.navigator-open .navigator-intro h2 {
    font-size: clamp(1.75rem, 7vw, 2.35rem);
  }

  .navigator-section.navigator-open .selected-lens {
    font-size: 0.94rem;
  }
}

@media (max-width: 540px) {
  .navigator-section.navigator-open .navigator-intro h2 {
    font-size: clamp(1.55rem, 8vw, 2.05rem);
  }
}

/* v22: password visibility toggle.
   Keeps the v20 visual baseline intact while allowing users to choose whether
   the pilot password is visible as they type. */
.password-field {
  position: relative;
  display: flex;
  align-items: center;
}

.password-field input {
  padding-right: 5.4rem;
}

.password-toggle {
  position: absolute;
  right: 0.45rem;
  top: 50%;
  transform: translateY(-50%);
  min-height: 34px;
  padding: 0 0.85rem;
  border: 1px solid rgba(19, 40, 61, 0.18);
  border-radius: 999px;
  background: #fff;
  color: var(--deep);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.password-toggle:hover {
  border-color: var(--accent);
}

.password-toggle:focus-visible {
  outline: 3px solid rgba(40, 95, 143, 0.32);
  outline-offset: 2px;
}


/* v23: preserve Navigator response formatting.
   The backend returns paragraph breaks and hyphen bullets in plain text, but
   browser whitespace collapse was rendering assistant replies as one dense
   paragraph. Preserve line breaks in chat bubbles without changing backend,
   prompt, section copy, anchors or visual baseline. */
.message p {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.assistant-message p {
  line-height: 1.55;
}

/* v24: tightened opened Navigator start state.
   Preserve v23 response formatting and all v22/v20 behaviours. This only
   reduces unused vertical space in the first-open chat log before the user
   has submitted a situation, so the input field is visible immediately. */
.navigator-section.navigator-open .chat-prototype.chat-start-state .chat-log {
  min-height: 96px;
  max-height: 150px;
  padding: 0.75rem 1rem 0.65rem;
}

.navigator-section.navigator-open .chat-prototype.chat-start-state .message {
  margin-bottom: 0;
  max-width: min(92%, 68rem);
}

.navigator-section.navigator-open .chat-prototype.chat-start-state .assistant-message {
  padding: 0.72rem 1rem;
}

.navigator-section.navigator-open .chat-prototype.chat-start-state .chat-form {
  padding-top: 0.85rem;
}

.navigator-section.navigator-open .chat-prototype.chat-start-state textarea {
  min-height: clamp(115px, 16svh, 140px);
}

@media (max-width: 860px) {
  .navigator-section.navigator-open .chat-prototype.chat-start-state .chat-log {
    min-height: 92px;
    max-height: 140px;
    padding: 0.7rem 0.85rem 0.6rem;
  }

  .navigator-section.navigator-open .chat-prototype.chat-start-state textarea {
    min-height: 120px;
  }
}

@media (max-width: 540px) {
  .navigator-section.navigator-open .chat-prototype.chat-start-state .chat-log {
    min-height: 88px;
    max-height: 132px;
  }

  .navigator-section.navigator-open .chat-prototype.chat-start-state textarea {
    min-height: 115px;
  }
}

/* v25: compact first-open input field.
   Keep v24/v23/v22 behaviours intact. Only the first-open Navigator state is
   tightened so the full question field, helper text and Submit button can sit
   above the fold on typical laptop viewports. Once a situation is submitted,
   the existing conversation-started layout remains unchanged. */
.navigator-section.navigator-open .chat-prototype.chat-start-state .chat-log {
  min-height: 76px;
  max-height: 112px;
  padding: 0.6rem 1rem 0.55rem;
}

.navigator-section.navigator-open .chat-prototype.chat-start-state .assistant-message {
  padding: 0.64rem 0.95rem;
}

.navigator-section.navigator-open .chat-prototype.chat-start-state .chat-form {
  gap: 0.55rem;
  padding: 0.75rem 1rem 0.85rem;
}

.navigator-section.navigator-open .chat-prototype.chat-start-state textarea {
  min-height: 76px;
  height: 84px;
  max-height: 120px;
  padding: 0.8rem 0.95rem;
}

.navigator-section.navigator-open .chat-prototype.chat-start-state .form-actions {
  gap: 0.75rem;
}

.navigator-section.navigator-open .chat-prototype.chat-start-state .input-note {
  font-size: 0.86rem;
}

@media (max-width: 860px) {
  .navigator-section.navigator-open .chat-prototype.chat-start-state .chat-log {
    min-height: 72px;
    max-height: 106px;
    padding: 0.55rem 0.85rem 0.5rem;
  }

  .navigator-section.navigator-open .chat-prototype.chat-start-state .chat-form {
    padding: 0.7rem 0.85rem 0.8rem;
  }

  .navigator-section.navigator-open .chat-prototype.chat-start-state textarea {
    min-height: 72px;
    height: 82px;
    max-height: 112px;
  }
}

@media (max-width: 540px) {
  .navigator-section.navigator-open .chat-prototype.chat-start-state textarea {
    min-height: 70px;
    height: 78px;
    max-height: 106px;
  }
}

/* v27: compact follow-up input positioning.
   Preserve v26 initial top alignment, v25 compact first-open input, v23 response
   formatting, v22 password validation, and all backend behaviour. This only
   reduces the empty vertical space inside the conversation log after a user has
   submitted a situation, so the next input field sits closer to the Navigator
   prompt/response rather than being pushed below a large blank area. */
.navigator-section.navigator-open .chat-prototype.conversation-started .chat-log {
  min-height: 0;
  max-height: clamp(330px, 42svh, 620px);
  padding: 0.85rem 1rem;
}

.navigator-section.navigator-open .chat-prototype.conversation-started .message:last-child {
  margin-bottom: 0;
}

.navigator-section.navigator-open .chat-prototype.conversation-started .chat-form {
  padding-top: 0.85rem;
}

@media (max-width: 860px) {
  .navigator-section.navigator-open .chat-prototype.conversation-started .chat-log {
    min-height: 0;
    max-height: 42svh;
    padding: 0.75rem 0.85rem;
  }

  .navigator-section.navigator-open .chat-prototype.conversation-started .chat-form {
    padding-top: 0.75rem;
  }
}

@media (max-width: 540px) {
  .navigator-section.navigator-open .chat-prototype.conversation-started .chat-log {
    max-height: 40svh;
  }
}


/* v30: desktop zoom / narrow laptop responsiveness.
   At 125–150% browser zoom, the CSS viewport becomes narrower and shorter.
   Earlier rules stacked the sticky header too early and left the hero too tall,
   causing the CTAs to fall below the fold at 125% and the header to dominate the
   viewport at 150%. Keep the v29 copy, v28 anchor behaviour, v27 Navigator
   spacing, and all backend behaviour intact; only compact the header and hero
   in zoomed/narrow desktop conditions. */
@media (min-width: 861px) and (max-width: 1300px) {
  :root {
    --header-clearance: 8.35rem;
  }

  .container {
    width: min(100% - 2.4rem, 1180px);
  }

  .header-inner {
    min-height: 118px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.45rem 0;
  }

  .brand {
    flex: 0 1 560px;
  }

  .brand-logo {
    width: min(540px, 45vw);
  }

  .top-nav {
    flex: 0 0 auto;
    gap: clamp(0.5rem, 1.05vw, 0.95rem);
    font-size: clamp(0.86rem, 1vw, 0.96rem);
  }

  .section {
    scroll-margin-top: var(--header-clearance);
  }

  .hero {
    min-height: calc(100svh - 118px);
    padding-top: clamp(0.75rem, 1.4vh, 1.1rem);
    padding-bottom: clamp(0.75rem, 1.4vh, 1.1rem);
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(330px, 0.98fr);
    column-gap: clamp(1.4rem, 3vw, 3rem);
    row-gap: clamp(0.65rem, 1.25vh, 1rem);
  }

  .hero-copy {
    max-width: 38.5rem;
  }

  .eyebrow {
    margin-bottom: 0.75rem;
    padding: 0.34rem 0.72rem;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
  }

  h1 {
    font-size: clamp(3rem, 4.7vw, 4.45rem);
    line-height: 0.97;
    max-width: 8.1em;
  }

  .lead {
    margin-top: 0.72rem;
    font-size: clamp(0.98rem, 1.18vw, 1.08rem);
    line-height: 1.42;
  }

  .support-lead {
    margin-top: 0.58rem;
  }

  .hero-emphasis {
    margin-top: 0.68rem;
    font-size: clamp(0.96rem, 1.1vw, 1.04rem);
    line-height: 1.28;
    gap: 0.08rem;
  }

  .source-line {
    margin-top: 0.7rem;
    font-size: clamp(0.84rem, 0.92vw, 0.92rem);
    line-height: 1.25;
  }

  .trust-panel {
    gap: clamp(0.65rem, 1.25vh, 0.9rem);
  }

  .panel-card {
    padding: 0.95rem 1.12rem;
  }

  .panel-card h2 {
    font-size: clamp(1.12rem, 1.28vw, 1.32rem);
    margin-bottom: 0.45rem;
  }

  .panel-card ol,
  .panel-card ul {
    padding-left: 1.08rem;
  }

  .panel-card li + li {
    margin-top: 0.22rem;
  }

  .good-for,
  .not-for {
    border-top-width: 4px;
  }

  .hero-action-row {
    gap: 1rem;
  }

  .hero-buttons {
    gap: 0.7rem;
  }

  .button {
    min-height: 42px;
    padding: 0.6rem 1rem;
  }

  .hero-quote {
    padding-left: 1rem;
    font-size: clamp(0.76rem, 0.86vw, 0.86rem);
    line-height: 1.22;
  }
}

@media (min-width: 861px) and (max-width: 1120px) {
  .header-inner {
    min-height: 108px;
    gap: 0.75rem;
  }

  .brand {
    flex-basis: 490px;
  }

  .brand-logo {
    width: min(490px, 43vw);
  }

  .top-nav {
    gap: 0.62rem;
    font-size: 0.84rem;
  }

  .hero {
    min-height: calc(100svh - 108px);
  }

  h1 {
    font-size: clamp(2.55rem, 4.35vw, 3.55rem);
  }

  .lead,
  .support-lead {
    max-width: 54ch;
  }

  .panel-card {
    padding: 0.82rem 1rem;
  }

  .panel-card h2 {
    font-size: 1.12rem;
  }

  .panel-card li {
    line-height: 1.36;
  }
}

@media (min-width: 861px) and (max-height: 820px) {
  .hero {
    min-height: calc(100svh - 112px);
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
  }

  .hero-grid {
    row-gap: 0.62rem;
  }

  .lead {
    margin-top: 0.58rem;
  }

  .support-lead,
  .hero-emphasis,
  .source-line {
    margin-top: 0.52rem;
  }

  .panel-card {
    padding-top: 0.78rem;
    padding-bottom: 0.78rem;
  }

  .button {
    min-height: 40px;
    padding-top: 0.52rem;
    padding-bottom: 0.52rem;
  }
}

/* v32: mobile / narrow-screen responsiveness fix.
   Strict scope: CSS only. Preserve desktop v31 behaviour, hero copy, anchors,
   password validation, Navigator response formatting and backend behaviour.
   On phone-width screens, stop the large desktop header/brand treatment from
   consuming the first viewport and let the page become a simple vertical flow. */
@media (max-width: 860px) {
  :root {
    --header-clearance: 1rem;
  }

  html {
    scroll-padding-top: var(--header-clearance);
  }

  .site-header {
    position: static;
    background: rgba(251, 250, 246, 0.98);
    backdrop-filter: none;
  }

  .container {
    width: min(100% - 1.25rem, 720px);
  }

  .header-inner {
    min-height: 0;
    padding: 0.55rem 0 0.7rem;
    align-items: flex-start;
    gap: 0.6rem;
  }

  .brand {
    flex: 0 1 auto;
    width: 100%;
  }

  .brand-logo {
    width: min(330px, 86vw);
    max-width: 100%;
  }

  .top-nav {
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    white-space: normal;
    gap: 0.45rem 0.75rem;
    font-size: 0.9rem;
    line-height: 1.25;
  }

  .top-nav a {
    padding: 0.18rem 0 0.32rem;
  }

  .top-nav a::after {
    bottom: -0.08rem;
  }

  .section {
    padding: 2.25rem 0;
    scroll-margin-top: var(--header-clearance);
  }

  .hero {
    min-height: auto;
    padding-top: 1.2rem;
    padding-bottom: 1.6rem;
    display: block;
  }

  .hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1rem;
    align-items: start;
  }

  .hero-copy {
    max-width: 100%;
  }

  .eyebrow {
    margin-bottom: 0.7rem;
    padding: 0.34rem 0.68rem;
    font-size: 0.72rem;
    letter-spacing: 0.13em;
  }

  h1 {
    font-size: clamp(2.25rem, 11vw, 3.3rem);
    line-height: 0.98;
    max-width: 9.2em;
  }

  h2 {
    font-size: clamp(1.8rem, 8vw, 2.45rem);
  }

  .lead {
    margin-top: 0.8rem;
    max-width: 100%;
    font-size: 1rem;
    line-height: 1.45;
  }

  .support-lead {
    margin-top: 0.7rem;
  }

  .hero-emphasis {
    margin-top: 0.8rem;
    font-size: 0.98rem;
    line-height: 1.35;
  }

  .source-line {
    margin-top: 0.8rem;
    font-size: 0.9rem;
    line-height: 1.35;
  }

  .source-line,
  .section-heading h2,
  .section-heading p:not(.eyebrow) {
    white-space: normal;
  }

  .trust-panel {
    gap: 0.8rem;
  }

  .panel-card {
    padding: 1rem;
    border-radius: 22px;
  }

  .panel-card h2 {
    font-size: 1.2rem;
    margin-bottom: 0.55rem;
  }

  .panel-card li + li {
    margin-top: 0.28rem;
  }

  .hero-action-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  .hero-buttons {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .button,
  .hero-buttons .button,
  .lens-button {
    width: 100%;
  }

  .hero-quote {
    padding-left: 0.8rem;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 0.86rem;
    line-height: 1.35;
  }

  .hero-quote span {
    white-space: normal;
  }

  .lens-grid,
  .navigator-grid,
  .pilot-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .lens-card,
  .pilot-card,
  .login-card {
    padding: 1rem;
    border-radius: 22px;
  }

  .navigator-section,
  .pilot-section {
    min-height: auto;
    padding-top: 2.25rem;
    padding-bottom: 4rem;
  }

  .navigator-section.navigator-open {
    padding-top: 1rem;
    padding-bottom: 4rem;
  }

  .navigator-section.navigator-open .navigator-intro h2 {
    font-size: clamp(1.6rem, 7vw, 2.1rem);
  }

  .chat-header {
    padding: 0.85rem;
  }

  .chat-header-actions {
    width: 100%;
  }

  .status-pill,
  .button.compact {
    width: 100%;
    justify-content: center;
  }

  .privacy-strip {
    padding: 0.75rem 0.85rem;
    font-size: 0.9rem;
  }

  .chat-log {
    padding: 0.85rem;
    min-height: 120px;
    max-height: 52svh;
  }

  .message {
    max-width: 100%;
    padding: 0.8rem 0.9rem;
  }

  .chat-form {
    padding: 0.85rem;
  }

  textarea {
    min-height: 108px;
    padding: 0.85rem;
  }

  .form-actions {
    gap: 0.75rem;
  }
}

@media (max-width: 540px) {
  .container {
    width: min(100% - 1rem, 520px);
  }

  .brand-logo {
    width: min(285px, 82vw);
  }

  .top-nav {
    font-size: 0.84rem;
    gap: 0.38rem 0.62rem;
  }

  .section {
    padding: 1.9rem 0;
  }

  .hero {
    padding-top: 1rem;
  }

  h1 {
    font-size: clamp(2.05rem, 10.5vw, 2.85rem);
  }

  .lead {
    font-size: 0.96rem;
  }

  .panel-card,
  .lens-card,
  .pilot-card,
  .login-card,
  .chat-prototype {
    border-radius: 18px;
  }

  .chat-header {
    gap: 0.7rem;
  }

  .chat-log {
    max-height: 48svh;
  }

  .navigator-section.navigator-open .chat-prototype.chat-start-state textarea {
    min-height: 96px;
    height: 104px;
  }
}

@media (max-width: 860px) and (orientation: landscape) {
  .header-inner {
    padding: 0.4rem 0 0.55rem;
    gap: 0.45rem;
  }

  .brand-logo {
    width: min(300px, 44vw);
  }

  .top-nav {
    font-size: 0.82rem;
  }

  .hero {
    padding-top: 0.85rem;
    padding-bottom: 1.2rem;
  }

  .hero-grid {
    gap: 0.75rem;
  }

  h1 {
    font-size: clamp(2rem, 7vw, 2.8rem);
  }

  .lead,
  .support-lead,
  .hero-emphasis,
  .source-line {
    margin-top: 0.55rem;
  }

  .panel-card {
    padding: 0.82rem;
  }
}

/* v33: mobile portrait Navigator fix.
   Strict scope: CSS only. Preserve desktop/v31 behaviour, v32 landscape/mobile
   improvements, hero copy, anchors, password validation, response formatting
   and backend behaviour. This pass addresses Samsung S25 Ultra portrait after
   Navigator opens: restore a compact sticky header, reduce the chat header
   vertical footprint, and stop the first greeting from being clipped inside an
   oversized internal scroll area. */
@media (max-width: 540px) and (orientation: portrait) {
  :root {
    --header-clearance: 5.4rem;
  }

  html {
    scroll-padding-top: var(--header-clearance);
  }

  .site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(251, 250, 246, 0.98);
    border-bottom: 1px solid rgba(216, 222, 231, 0.85);
  }

  .header-inner {
    padding: 0.28rem 0 0.36rem;
    gap: 0.32rem;
  }

  .brand-logo {
    width: min(220px, 72vw);
  }

  .top-nav {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.52rem;
    padding-bottom: 0.18rem;
    font-size: 0.72rem;
    line-height: 1.15;
    scrollbar-width: none;
  }

  .top-nav::-webkit-scrollbar {
    display: none;
  }

  .top-nav a {
    flex: 0 0 auto;
    padding-bottom: 0.18rem;
  }

  .section,
  #top,
  #navigator,
  #pilot-notes {
    scroll-margin-top: var(--header-clearance);
  }

  .navigator-section.navigator-open {
    padding-top: 0.65rem;
  }

  .navigator-section.navigator-open .navigator-intro h2 {
    font-size: clamp(1.42rem, 6.2vw, 1.82rem);
    line-height: 1.06;
  }

  .selected-lens {
    padding: 0.62rem 0.75rem;
    font-size: 0.86rem;
    line-height: 1.35;
  }

  .chat-prototype {
    border-radius: 16px;
  }

  .chat-header {
    padding: 0.68rem 0.82rem;
    gap: 0.5rem;
  }

  .chat-header-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.46rem;
  }

  .status-pill,
  .button.compact {
    width: 100%;
    min-height: 2.45rem;
    padding: 0.48rem 0.52rem;
    font-size: 0.78rem;
    line-height: 1.15;
    justify-content: center;
    white-space: normal;
  }

  .privacy-strip {
    padding: 0.62rem 0.82rem;
    font-size: 0.86rem;
    line-height: 1.34;
  }

  .navigator-section.navigator-open .chat-prototype.chat-start-state .chat-log {
    min-height: 0;
    max-height: none;
    overflow: visible;
    padding: 0.5rem 0.7rem 0.45rem;
  }

  .navigator-section.navigator-open .chat-prototype.chat-start-state .assistant-message {
    padding: 0.56rem 0.72rem;
    font-size: 0.9rem;
    line-height: 1.34;
  }

  .navigator-section.navigator-open .chat-prototype.chat-start-state .chat-form {
    padding: 0.58rem 0.7rem 0.72rem;
  }

  .navigator-section.navigator-open .chat-prototype.chat-start-state textarea {
    min-height: 86px;
    height: 94px;
    max-height: 122px;
    padding: 0.72rem;
    font-size: 0.92rem;
  }

  .navigator-section.navigator-open .chat-prototype.chat-start-state .form-actions {
    gap: 0.5rem;
  }
}


/* v34: simplified three-section entry journey.
   Moves lens selection onto the landing page, removes the separate Choose a
   Lens section from the journey, changes the primary launch CTA to Start, and
   relocates Use Navigator when / Not for into About this pilot. Front-end only;
   no server/runtime behaviour changed. */
.hero-lens-panel {
  display: grid;
  gap: 0.85rem;
  align-self: center;
}

.hero-lens-heading {
  display: grid;
  gap: 0.55rem;
}

.hero-lens-heading .eyebrow {
  margin-bottom: 0;
}

.hero-lens-heading h2 {
  font-size: clamp(1.55rem, 2.55vw, 2.45rem);
  line-height: 1.04;
}

.hero-lens-heading p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-size: clamp(0.9rem, 1vw, 1rem);
  line-height: 1.36;
}

.hero-lens-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

.hero-lens-card {
  gap: 0.58rem;
  padding: clamp(0.9rem, 1.25vw, 1.18rem);
  border-radius: 22px;
}

.hero-lens-card h3 {
  font-size: clamp(1.05rem, 1.3vw, 1.22rem);
  line-height: 1.08;
}

.hero-lens-card p,
.hero-lens-card li {
  font-size: clamp(0.86rem, 0.96vw, 0.94rem);
  line-height: 1.34;
}

.hero-lens-card .question-list {
  padding-left: 1.05rem;
}

.hero-lens-card li + li {
  margin-top: 0.18rem;
}

.hero-lens-card .lens-button {
  min-height: 40px;
  padding: 0.55rem 0.9rem;
  font-size: clamp(0.84rem, 0.92vw, 0.92rem);
}

.pilot-notes-container {
  display: grid;
  gap: 1.25rem;
}

.pilot-usage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
}

.pilot-info-card {
  border-top: 0;
}

.pilot-info-card h3 {
  margin-bottom: 0.75rem;
}

@media (min-width: 861px) and (max-width: 1300px) {
  .hero-lens-panel {
    gap: 0.68rem;
  }

  .hero-lens-heading {
    gap: 0.42rem;
  }

  .hero-lens-heading h2 {
    font-size: clamp(1.32rem, 2.05vw, 1.86rem);
  }

  .hero-lens-heading p:not(.eyebrow) {
    font-size: 0.86rem;
    line-height: 1.3;
  }

  .hero-lens-grid {
    gap: 0.62rem;
  }

  .hero-lens-card {
    gap: 0.42rem;
    padding: 0.78rem 0.92rem;
  }

  .hero-lens-card h3 {
    font-size: 1rem;
  }

  .hero-lens-card p,
  .hero-lens-card li {
    font-size: 0.8rem;
    line-height: 1.28;
  }

  .hero-lens-card li + li {
    margin-top: 0.12rem;
  }

  .hero-lens-card .lens-button {
    min-height: 36px;
    padding: 0.46rem 0.72rem;
    font-size: 0.78rem;
  }
}

@media (min-width: 861px) and (max-height: 820px) {
  .hero-lens-panel {
    gap: 0.58rem;
  }

  .hero-lens-grid {
    gap: 0.54rem;
  }

  .hero-lens-card {
    padding-top: 0.68rem;
    padding-bottom: 0.68rem;
  }
}

@media (max-width: 1100px) {
  .pilot-usage-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .hero-lens-panel {
    gap: 0.85rem;
  }

  .hero-lens-heading {
    gap: 0.5rem;
  }

  .hero-lens-heading h2 {
    font-size: clamp(1.6rem, 7vw, 2.15rem);
  }

  .hero-lens-card {
    padding: 1rem;
    border-radius: 22px;
  }

  .hero-lens-card p,
  .hero-lens-card li {
    font-size: 0.92rem;
    line-height: 1.35;
  }

  .hero-lens-card .lens-button {
    width: 100%;
  }

  .pilot-usage-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

@media (max-width: 540px) {
  .hero-lens-card {
    border-radius: 18px;
  }
}

/* v34a: vertical alignment polish.
   Keeps the v34 three-section journey and all server/runtime behaviour intact.
   Repositions the hero action/quote block into the left column, then uses
   deterministic desktop grid alignment so each section feels more composed. */
@media (min-width: 861px) {
  .hero {
    padding-top: clamp(1.05rem, 2vh, 1.7rem);
    padding-bottom: clamp(1.2rem, 2.2vh, 1.85rem);
  }

  .hero-grid {
    grid-template-rows: auto auto;
    align-content: center;
    align-items: center;
    row-gap: clamp(0.85rem, 1.8vh, 1.25rem);
  }

  .hero-copy {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
  }

  .hero-action-row {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    width: 100%;
    max-width: 40.5rem;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.05rem;
    margin-top: 0.05rem;
  }

  .hero-quote {
    white-space: normal;
    overflow: visible;
    overflow-wrap: break-word;
    padding-left: 1rem;
    font-size: clamp(0.8rem, 0.94vw, 0.92rem);
    line-height: 1.28;
  }

  .hero-quote span {
    white-space: normal;
  }

  .hero-lens-panel {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    transform: translateY(clamp(0.28rem, 0.9vh, 0.72rem));
  }

  .navigator-grid {
    align-items: start;
  }

  .navigator-card-wrapper {
    padding-top: clamp(2.75rem, 4.7vw, 3.6rem);
  }

  .pilot-grid {
    align-items: start;
  }

  .pilot-card {
    margin-top: clamp(2.9rem, 4.5vw, 3.8rem);
  }

  .pilot-usage-grid {
    margin-top: 0.25rem;
  }
}

@media (min-width: 861px) and (max-width: 1300px) {
  .hero-action-row {
    gap: 0.82rem;
  }

  .hero-quote {
    padding-left: 0.82rem;
    font-size: clamp(0.72rem, 0.82vw, 0.82rem);
    line-height: 1.22;
  }

  .hero-lens-panel {
    transform: translateY(0.22rem);
  }

  .navigator-card-wrapper {
    padding-top: clamp(2.35rem, 4.15vw, 3.1rem);
  }

  .pilot-card {
    margin-top: clamp(2.55rem, 4vw, 3.25rem);
  }
}

@media (min-width: 861px) and (max-width: 1120px) {
  .hero-action-row {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .hero-buttons {
    align-items: flex-start;
  }

  .hero-quote {
    padding-left: 0.85rem;
  }
}

@media (max-width: 860px) {
  .hero-action-row {
    grid-column: auto;
    grid-row: auto;
  }

  .navigator-card-wrapper {
    padding-top: 0;
  }

  .pilot-card {
    margin-top: 0;
  }

  .pilot-usage-grid {
    margin-top: 0;
  }
}

/* v34b: first-section fit refinement.
   Shortened the landing-page lens heading/copy in HTML and gives the right
   lens panel a safer top clearance so its heading is not clipped beneath the
   sticky header. Front-end only; no server/runtime behaviour changed. */
@media (min-width: 861px) {
  .hero-lens-panel {
    transform: translateY(clamp(0.75rem, 1.7vh, 1.35rem));
  }

  .hero-lens-heading {
    gap: 0.42rem;
  }

  .hero-lens-heading h2 {
    font-size: clamp(1.45rem, 2.15vw, 2.05rem);
    line-height: 1.03;
  }
}

@media (min-width: 861px) and (max-width: 1300px) {
  .hero-lens-panel {
    transform: translateY(0.85rem);
  }

  .hero-lens-heading h2 {
    font-size: clamp(1.24rem, 1.8vw, 1.62rem);
  }
}

/* v34d: first-section heading clearance.
   Keeps the v34c structure/content intact and nudges the landing-page lens
   panel down slightly so "Choose the most relevant lens" clears the sticky
   header on desktop at 100% browser zoom. Front-end CSS only. */
@media (min-width: 861px) {
  .hero-lens-panel {
    transform: translateY(clamp(1.25rem, 2.45vh, 1.85rem));
  }
}

@media (min-width: 861px) and (max-width: 1300px) {
  .hero-lens-panel {
    transform: translateY(1.35rem);
  }
}

/* v34e: About-section card width alignment.
   Makes the lower-right "Not for" card use the same desktop column width as
   the "Expectation setting" card above it, preserving mobile stacking and all
   backend/runtime behaviour. */
@media (min-width: 1101px) {
  .pilot-usage-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 2.35rem;
  }
}


/* v34n: About-section balanced card layout.
   Uses independent left/right stacks so the lower cards sit higher, closer to
   the mock-up, with consistent horizontal and vertical spacing. Front-end only. */
.pilot-balance-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 2.35rem;
  align-items: start;
}

.pilot-left-stack,
.pilot-right-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.pilot-balance-grid .pilot-card {
  margin-top: 0;
}

.pilot-intro-copy p:not(.eyebrow) {
  color: var(--muted);
  max-width: 68ch;
}

.pilot-feedback-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  padding: 0.9rem 1rem;
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.72);
  color: var(--deep);
}

.pilot-feedback-action p {
  margin: 0;
  font-weight: 700;
}

.pilot-feedback-action .feedback-link {
  flex: 0 0 auto;
}

@media (max-width: 1100px) {
  .pilot-balance-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .pilot-left-stack,
  .pilot-right-stack {
    gap: 1rem;
  }
}

@media (max-width: 860px) {
  .pilot-feedback-action {
    align-items: stretch;
    flex-direction: column;
  }

  .pilot-feedback-action .feedback-link {
    width: 100%;
  }
}

/* v34o: Compact About-section feedback action.
   Keeps the feedback prompt fully visible above the fold on desktop by using
   a shorter single-line action prompt and a lower-profile action bar. */
@media (min-width: 861px) {
  .pilot-feedback-action {
    padding: 0.62rem 0.86rem;
    gap: 0.7rem;
  }

  .pilot-feedback-action p {
    white-space: nowrap;
    font-size: clamp(0.88rem, 0.95vw, 1rem);
    line-height: 1.2;
  }

  .pilot-feedback-action .feedback-link {
    min-height: 32px;
    padding: 0.38rem 0.68rem;
    font-size: clamp(0.82rem, 0.88vw, 0.9rem);
  }
}

@media (max-width: 1100px) and (min-width: 861px) {
  .pilot-feedback-action p {
    white-space: normal;
  }
}