/* NurseOS landing — production port of Landing Page v3 design handoff. */
html { scroll-behavior: smooth; }
body {
  margin: 0; background: #eef2ec; overflow-x: clip;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  color: #16201a; -webkit-font-smoothing: antialiased;
}
a { color: #33473a; text-decoration: none; }
a:hover { color: #16201a; }
::selection { background: #cfe0d1; }
.mono { font-family: 'Geist Mono', monospace; }

/* Nav */
.nav-cta { background: #16201a; color: #eef2ec; padding: 8px 18px; border-radius: 99px; font-weight: 600; font-size: 13px; white-space: nowrap; transition: background .25s; }
.nav-cta:hover { background: #2c3d33; color: #eef2ec; }

/* Hero App Store button */
.store-cta { display: inline-flex; align-items: center; gap: 11px; background: #16201a; color: #fff; border-radius: 13px; padding: 12px 24px 12px 20px; box-shadow: 0 20px 40px -22px rgba(16,28,20,.5); transition: background .25s; }
.store-cta:hover { background: #243129; color: #fff; }

/* Ticker */
@keyframes tickerMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker-track { display: flex; width: max-content; animation: tickerMove 44s linear infinite; padding: 17px 0; }

/* Three-promise columns */
.promise { border-left: 1px solid rgba(22,32,26,.16); padding: 6px 48px 6px 28px; transition: border-color .3s ease; }
.promise:hover { border-left-color: #6f9d7f; }

/* Scroll reveal (initial state applied by JS so no-JS never hides content) */
.reveal-init { opacity: 0; transform: translateY(26px); }
.reveal-in { opacity: 1 !important; transform: translateY(0) !important; }

/* ---- Pinned tour ---- */
.tour-cap { cursor: pointer; padding: 9px 0; background: none; border: none; text-align: left; width: 100%; color: inherit; font: inherit; display: block; }
.tour-cap .cap-inner { border-left: 2px solid oklch(0.31 0.008 165); padding-left: 24px; opacity: .48; transition: opacity .4s ease, border-color .4s ease; }
.tour-cap.active .cap-inner { border-left-color: oklch(0.82 0.075 155); opacity: 1; }
.tour-cap .capB { display: none; margin: 8px 0 2px; font-size: 14.5px; line-height: 1.6; color: oklch(0.72 0.009 165); max-width: 400px; text-wrap: pretty; }
.tour-cap.active .capB { display: block; }

/* The sticky stage centers in 100vh, but the translucent nav overlays the top
   58px — pad it out so the section head never sits flush against the nav, and
   rebalance the leftover space slightly toward the bottom. */
#screens > div { padding-top: 74px; box-sizing: border-box; }
/* Shorter desktop viewports: tighten the head so the phone + captions keep
   comfortable margins instead of cramming the eyebrow into the nav. */
@media (min-width: 1080px) and (max-height: 900px) {
  .tour-head { margin-bottom: 18px !important; }
  .tour-head > div { margin-bottom: 12px !important; }
  .tour-head h2 { font-size: 36px !important; letter-spacing: -1.4px !important; }
}

#tourphone { --k: 1; --pct: 100%; }
.scr {
  position: absolute; top: 0; left: 0; width: var(--pct); height: var(--pct);
  padding: 52px 18px 66px; box-sizing: border-box; overflow: hidden;
  transform-origin: top left;
  opacity: 0; transform: scale(var(--k)) translateY(16px);
  transition: opacity .5s cubic-bezier(.3,.6,.2,1), transform .5s cubic-bezier(.3,.6,.2,1);
  pointer-events: none;
}
.scr.past { transform: scale(var(--k)) translateY(-16px); }
.scr.active { opacity: 1; transform: scale(var(--k)) translateY(0); pointer-events: auto; }
.status-bar {
  position: absolute; top: 0; left: 0; width: var(--pct); z-index: 7; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; padding: 14px 24px 0;
  transform: scale(var(--k)); transform-origin: top left;
}
.tab-bar {
  position: absolute; bottom: 0; left: 0; width: var(--pct); z-index: 7; box-sizing: border-box;
  border-top: 1px solid oklch(0.31 0.008 165); background: oklch(0.17 0.006 165 / 0.96);
  display: flex; padding: 9px 6px 19px;
  transform: scale(var(--k)); transform-origin: bottom left;
}
.tb { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; color: oklch(0.6 0.009 165); transition: color .4s ease; background: none; border: none; font: inherit; padding: 0; }
.tb.active { color: oklch(0.82 0.075 155); }
#tourphone::after { content: ''; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 96px; height: 4px; border-radius: 3px; background: rgba(255,255,255,.26); z-index: 8; }

/* Setup paste demo */
.paste-btn { background: #16201a; color: #eef2ec; font-size: 13.5px; font-weight: 600; padding: 9px 18px; border-radius: 10px; flex: none; cursor: pointer; transition: background .25s; border: none; font-family: inherit; }
.paste-btn:hover { background: #2c3d33; }
#paste-result { display: none; align-items: center; gap: 10px; margin-top: 16px; font-family: 'Geist Mono', monospace; font-size: 12.5px; color: #33473a; }
#paste-result.shown { display: flex; }

/* FAQ */
.faq-item { border-top: 1px solid rgba(22,32,26,.14); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; cursor: pointer; background: none; border: none; width: 100%; text-align: left; font: inherit; color: inherit; }
.faq-a { margin: -6px 0 0; padding: 0 48px 26px 0; font-size: 15.5px; line-height: 1.7; color: #46544b; text-wrap: pretty; display: none; }
.faq-item.open .faq-a { display: block; }

/* Email capture */
.email-input { flex: 1; background: oklch(0.19 0.007 165); border: 1px solid oklch(0.945 0.005 165 / .18); border-radius: 13px; padding: 16px 19px; font-family: 'Geist Mono', monospace; font-size: 14px; color: oklch(0.945 0.005 165); outline: none; min-width: 0; }
.email-input:focus { border-color: oklch(0.66 0.07 155); }
.email-send { background: oklch(0.66 0.07 155); color: oklch(0.2 0.02 160); border: none; border-radius: 13px; padding: 16px 30px; font-family: 'Hanken Grotesk', sans-serif; font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .25s; }
.email-send:hover { background: oklch(0.72 0.07 155); }
#email-done { display: none; align-items: center; gap: 14px; background: oklch(0.19 0.007 165); border: 1px solid oklch(0.82 0.075 155 / .35); border-radius: 13px; padding: 19px 21px; }
.email-sent #email-form { display: none; }
.email-sent #email-done { display: flex; }

/* Devices hover lift */
.device { transition: transform .35s ease; }
.device:hover { transform: translateY(-10px); }

/* ---- Responsive (1080px breakpoint, from design handoff) ---- */
@media (max-width: 1079px) {
  h1 { font-size: clamp(42px, 11.5vw, 64px) !important; letter-spacing: -2.2px !important; }
  h2 { font-size: clamp(30px, 7.5vw, 42px) !important; letter-spacing: -1.5px !important; }
  header > div { padding: 0 20px !important; }
  header nav { gap: 16px !important; }
  header nav a:not(:last-child) { display: none !important; }
  #top > div { padding: 64px 20px 0 !important; }
  #top > div > p { font-size: 16.5px !important; }
  .hero-eyebrow { white-space: normal !important; text-align: center; line-height: 1.9; }
  .hero-ctas { flex-wrap: wrap !important; justify-content: center !important; }
  .hero-phone-wrap > div { width: min(428px, 92vw) !important; }
  .hero-phone-wrap > div > div { padding: 18px 16px 26px !important; border-radius: 44px !important; }
  .hero-greeting { font-size: 26px !important; }
  #handles, #how, #devices, #quotes, #faq, #privacy { padding: 72px 20px !important; }
  #handles h2 { margin-bottom: 48px !important; }
  .promises { display: flex !important; flex-direction: column !important; gap: 36px !important; }
  .promise { padding: 4px 0 4px 20px !important; }
  #screens > div { padding: 74px 0 12px !important; align-items: flex-start !important; box-sizing: border-box; }
  .tour-wrap { padding: 0 20px !important; }
  .tour-head { margin-bottom: 14px !important; }
  .tour-head > div { margin-bottom: 12px !important; }
  .tour-head h2 { font-size: 24px !important; letter-spacing: -1px !important; }
  .tour-grid { display: flex !important; flex-direction: column !important; gap: 14px !important; align-items: center !important; }
  .tour-phonecol { order: -1; }
  .tour-caps-col { width: 100%; }
  .tour-cap { padding: 6px 0 !important; }
  .tour-cap .cap-inner { padding-left: 16px !important; }
  .capL { width: 54px !important; font-size: 9px !important; }
  .capT { font-size: 15px !important; }
  .tour-cap .capB { font-size: 12.5px !important; }
  .tour-hint { display: none !important; }
  #tourphone { height: min(52vh, calc(100vh - 430px), 690px) !important; min-height: 230px !important; }
  .setup-grid { display: flex !important; flex-direction: column !important; gap: 48px !important; align-items: stretch !important; }
  .setup-grid > div { min-width: 0; max-width: 100%; }
  #compliance > div { padding: 72px 20px !important; }
  .compliance-grid { display: flex !important; flex-direction: column !important; gap: 44px !important; }
  .compliance-grid > div:last-child { padding: 20px !important; }
  .devices-head { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; margin-bottom: 48px !important; }
  .devices-row { flex-direction: column !important; align-items: center !important; gap: 48px !important; }
  .devices-row > div:first-child { width: min(480px, 100%) !important; }
  .quotes-grid { display: flex !important; flex-direction: column !important; gap: 36px !important; }
  .quotes-grid figure { padding: 4px 0 4px 20px !important; }
  #privacy > div { padding: 56px 0 !important; }
  #privacy > div > p { font-size: clamp(26px, 7vw, 38px) !important; letter-spacing: -1.2px !important; }
  .privacy-chips { flex-wrap: wrap !important; padding: 0 10px; }
  .faq-grid { display: flex !important; flex-direction: column !important; gap: 44px !important; }
  .faq-a { padding-right: 0 !important; }
  #email > div { padding: 64px 20px !important; display: flex !important; flex-direction: column !important; gap: 36px !important; }
  footer > div:first-child { flex-direction: column !important; gap: 16px !important; padding: 48px 20px 0 !important; align-items: flex-start !important; }
  footer .watermark { font-size: 24vw !important; letter-spacing: -1.5vw !important; margin-top: 24px !important; }
}
@media (max-width: 1079px) and (max-height: 700px) {
  .tour-cap .capB { display: none !important; }
  .tour-cap { padding: 3px 0 !important; }
  .capT { font-size: 13.5px !important; }
  .tour-head { margin-bottom: 10px !important; }
  .tour-head > div { margin-bottom: 8px !important; }
  .tour-grid { gap: 12px !important; }
}
@media (max-width: 1079px) and (max-height: 600px) {
  .tour-caps { display: none !important; }
  #tourphone { height: min(62vh, calc(100vh - 190px), 690px) !important; }
}

/* Reduced motion: kill everything animated */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker-track { animation: none; }
  .scr, .tour-cap .cap-inner, .tb, .device, .reveal-init { transition: none !important; }
  .reveal-init { opacity: 1; transform: none; }
}