/* KeenHand — /medspa/ paid-landing overlay · 2026-08-06
   Loads AFTER /site.css and adds only what this page introduces.
   Binding brand reference: Night Shift sheet (approved 2026-07-09).
   Sanctioned pairings only · ≤8% Lamplight · no gradients, no glows, no purple. */

/* ---------- tap targets: 44px effective height, layout unchanged ---------- */

.btn, .nav-cta, .cta-alt { display: inline-flex; align-items: center; min-height: 44px; }
.foot-meta a { padding: .7rem 0; }

@media (max-width: 400px) {
  .nav-clock { display: none; } /* decorative; below 400px only the wordmark and CTA fit */
}

/* ---------- hero supporting line (same rule as /ai-native/) ---------- */

.support { max-width: 52ch; }

/* ---------- you-leave-with: five numbered cards, the plan card carries the lamp ---------- */

.leave-grid {
  list-style: none; padding: 0;
  margin: 2.2rem 0 0;
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.leave-grid li {
  background: var(--char);
  border: 1px solid var(--line); border-radius: 9px;
  padding: 1.05rem 1.2rem 1.1rem;
}
.leave-grid h3 { margin: .5rem 0 .25rem; font-size: 1rem; color: var(--bone); }
.leave-grid p { margin: 0; font-size: .9rem; color: var(--fog); max-width: none; line-height: 1.55; }
.leave-plan { border-left: 3px solid var(--lamp); }

/* ---------- hero video: 16:9, held to a readable width ----------
   Self-sufficient on purpose: the DEPLOYED site.css has no .video-fig yet
   (that rule ships with the license-gated night-shift homepage change), and
   the build-source version is 9:16/300px — so every property this page
   needs is (re)declared here and wins either way. */

.video-fig--wide { margin: 2.4rem 0 0; max-width: 860px; }
.video-fig--wide figcaption { font-size: .78rem; color: var(--fog); margin-bottom: .6rem; }
.video-fig--wide video {
  width: 100%; height: auto; aspect-ratio: 16 / 9; display: block;
  background: var(--noir);
  border: 1px solid var(--line); border-radius: 9px;
}
.obj-video video { aspect-ratio: 16 / 9; background: var(--noir); border: 1px solid var(--paper-line); display: block; }

/* ---------- objections: answer first, video on request ---------- */

.objection {
  max-width: 720px;
  margin: 2.2rem 0 0;
  padding: 1.15rem 1.25rem 1.2rem;
  background: var(--card); color: var(--soot);
  border: 1px solid var(--paper-line); border-radius: 9px;
}
.objection h3 { margin: 0 0 .45rem; font-size: 1.05rem; color: var(--soot); }
.objection p { margin: 0; font-size: .93rem; line-height: 1.6; max-width: none; }

.obj-video { margin-top: .9rem; }
.obj-video summary {
  cursor: pointer;
  font-size: .85rem; font-weight: 700;
  color: var(--patina-deep);
  padding: .55rem 0; /* 44px effective with line-height */
  list-style-position: inside;
}
.obj-video[open] summary { margin-bottom: .7rem; }
.obj-video video { width: 100%; height: auto; border-radius: 7px; }

/* ---------- call agenda: minute rail ---------- */

.agenda-list {
  list-style: none; padding: 0;
  margin: 2.2rem 0 0;
  max-width: 680px;
  display: grid; gap: .7rem;
}
.agenda-list li {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: baseline;
  background: var(--card);
  border: 1px solid var(--paper-line); border-radius: 9px;
  padding: .85rem 1.1rem;
}
.agenda-min {
  font-weight: 900; font-stretch: 125%;
  font-size: 1.05rem; color: var(--paper-muted);
  min-width: 3.4rem;
}
.agenda-list p { margin: 0; font-size: .92rem; color: var(--soot); line-height: 1.55; max-width: none; }

/* ---------- fit / not-fit (shared shape with /ai-native/) ---------- */

.fit-grid {
  margin: 2.2rem 0 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.fit-card {
  background: var(--card);
  border: 1px solid var(--paper-line); border-radius: 9px;
  padding: 1.15rem 1.25rem 1.25rem;
}
.fit-card h3 { margin: 0 0 .5rem; font-size: 1rem; color: var(--soot); }
.fit-list { list-style: none; margin: 0; padding: 0; }
.fit-list li {
  display: grid; grid-template-columns: auto 1fr; gap: .6rem;
  padding: .5rem 0;
  border-top: 1px solid var(--paper-line);
  font-size: .92rem; color: var(--soot); line-height: 1.5;
}
.fit-list li:first-child { border-top: none; }
.fit-mark { font-weight: 800; }
.fit-mark--yes { color: var(--patina-deep); }
.fit-mark--no { color: var(--paper-muted); }

/* Decorative hero ambient loop (2026-08-10): the only autoplaying media —
   muted, audio track stripped at encode, aria-hidden. Reduced-motion swaps
   the video for its still poster. */
.hero-ambient { margin: 1.6rem 0 0; max-width: 560px; border: 1px solid var(--iron, #2A2F37); border-radius: 9px; overflow: hidden; }
.hero-ambient video, .hero-ambient img { display: block; width: 100%; height: auto; }
.hero-ambient img { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-ambient video { display: none; }
  .hero-ambient img { display: block; }
}

/* Nav quiz CTA as a real button (2026-08-10 pre-launch polish): the exact
   twin of the quiz page's .nav-quiz-btn. white-space must stay normal —
   site.css .nav-cta sets nowrap and the long label then escapes the pill. */
.nav-cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--champagne, #BFA261); color: var(--noir, #050505) !important;
  font-weight: 650; font-size: .72rem; letter-spacing: .06em; text-transform: none;
  padding: .55rem .9rem; border-radius: 8px; text-decoration: none;
  line-height: 1.25; max-width: 14rem; text-align: center; white-space: normal;
}
.nav-cta:hover { filter: brightness(1.08); }

/* 390px: the decorative clock yields to the CTA. */
@media (max-width: 520px) {
  .nav-clock { display: none; }
}

/* 320-360px safety (external audit 2026-08-11, verified): nbsp-joined
   widow-control tokens gave headings a 372px min-content width — 52px of
   document overflow at 320, 12px at 360. The two offending tokens are
   unjoined in the HTML; this rule keeps any future long token from
   reintroducing sideways scroll. Inert unless a token cannot fit. */
#main h1, #main h2, #main h3 { overflow-wrap: break-word; }