/* Park Vitals — one stylesheet for the whole site. */

:root {
  --bg: #0A0A0A;
  --surface: #141414;
  --surface-2: #1A1A1A;
  --line: #222222;
  --line-2: #2E2E2E;
  --text: #FFFFFF;
  --text-2: #B8B8B8;
  --text-3: #7A7A7A;
  --yellow: #FFD400;
  --pink: #FF3D9A;
  --blue: #29B6F6;
  --green: #33D17A;
  --green-soft: #12311F;
  --purple: #A855F7;
  --display: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--yellow); text-decoration: none; }
a:hover { color: var(--text); }
h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.wrap { width: min(1312px, 100% - 48px); margin: 0 auto; }
@media (max-width: 720px) { .wrap { width: min(1312px, 100% - 40px); } }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--body); font-weight: 600; font-size: 17px;
  padding: 16px 26px; border-radius: 10px; border: 0; cursor: pointer;
  transition: transform 120ms ease, background 120ms ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--yellow); color: #0A0A0A; }
.btn-primary:hover { background: #FFE04D; color: #0A0A0A; }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid #3A3A3A; }
.btn-ghost:hover { border-color: #5A5A5A; color: var(--text); }
.btn-link { background: transparent; color: var(--text); padding: 16px 8px; font-weight: 500; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.55; cursor: default; }

/* Header */
.site-header { border-bottom: 1px solid #1F1F1F; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); }
.brand:hover { color: var(--text); }
/* The wordmark: PARK over VITALS, the same lockup the app shows on its
   splash. It is type, not artwork — the pages already load Outfit at the
   two weights it uses, so it renders live, stays crisp at any size and
   costs no extra request.

   Everything is expressed against the VITALS size, so setting
   `font-size` on `.wordmark` scales the whole lockup. 30px rather than
   the 22px the single line used: the ratios put PARK at a third of
   VITALS, and at 22px that lands around 7px, below where letterspaced
   caps stay readable. At 30px the lockup is about the height the one
   line was, and PARK is a legible 10px. */
.brand .wordmark { display: flex; flex-direction: column; align-items: center; line-height: 1; font-size: 30px; }
.brand .wordmark-park {
  font-family: var(--display);
  font-weight: 700;
  font-size: .324em;
  letter-spacing: .336em;
  color: var(--yellow);
  margin-bottom: .147em;
  /* Letter-spacing is added after the last letter as well as between
     them, so a centred letterspaced line sits half a space left of true
     centre. This pushes it back. Without it the lockup reads as slightly
     crooked rather than as an obvious mistake, which is worse. */
  padding-left: .336em;
}
.brand .wordmark-vitals { font-family: var(--display); font-weight: 800; font-size: 1em; letter-spacing: -.035em; }
.nav { display: flex; align-items: center; gap: 36px; font-weight: 500; font-size: 16px; }
.nav a { color: #C8C8C8; }
.nav a:hover { color: var(--text); }
.nav .btn { padding: 12px 20px; font-size: 16px; }
/* More specific than `.nav a`, or the nav's grey link color wins over
   the button's black text on yellow. */
.nav a.btn-primary, .nav a.btn-primary:hover { color: #0A0A0A; }
/* Phone header. The rule this replaces hid every link that wasn't the
   button, which took "Sign in" with it — so a returning customer opening
   the site on their phone had no way into their account from the header
   at all. Nothing is hidden now except the one link that goes to a
   section of this same page, which scrolling already reaches.

   Room comes from the wordmark instead: the icon alone carries the brand
   in the corner, and the page says "Park Vitals" in full a few lines
   down. */
@media (max-width: 720px) {
  .site-header .wrap { padding: 16px 0; gap: 12px; }
  /* The nav is two items now, so the name keeps its full size. */
  .nav { gap: 14px; font-size: 14px; }
  /* Only this one. It points at the first section of the page, which
     scrolling reaches anyway — Pricing is far enough down to be worth a
     link. A blanket [href^="#"] took Pricing with it. */
  .nav a[href="#what"] { display: none; }
  .nav .btn { padding: 9px 14px; font-size: 14px; }
}
/* Narrower still: the signup page's nav is one long sentence rather than
   short links, and it is the only thing beside the brand there. */
@media (max-width: 420px) {
  .brand svg { width: 30px; height: 30px; }
  /* Same reasoning one size down: 26px keeps PARK at about 8px. */
  .brand .wordmark { font-size: 26px; }
  .nav { gap: 10px; font-size: 13px; }
  .nav .btn { padding: 9px 12px; font-size: 13px; }
}

/* Hero. Desktop: copy on the left, phone on the right. Phone: the phone
   sits between the subtitle and the buttons, so the product is the first
   thing under the headline. */
.hero { padding: 96px 0 88px; }
.hero .wrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "text phone" "cta phone";
  column-gap: 64px; row-gap: 28px; align-items: center;
}
.hero-text { grid-area: text; display: flex; flex-direction: column; gap: 28px; align-self: end; }
.hero-cta { grid-area: cta; display: flex; flex-direction: column; gap: 20px; align-self: start; }
.phone-wrap { grid-area: phone; }
.eyebrow { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.hero h1 { font-size: clamp(42px, 5vw, 72px); line-height: 1.0; font-weight: 800; }
.hero h1 .hl { color: var(--blue); }
.hero .lede { font-size: 21px; line-height: 1.45; color: var(--text-2); max-width: 34ch; }
.hero-actions { display: flex; align-items: center; gap: 16px; padding-top: 8px; flex-wrap: wrap; }
.hero-note { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hero-note p { font-size: 14px; color: var(--text-3); }
@media (max-width: 960px) {
  .hero { padding: 40px 0 36px; }
  /* minmax(0, 1fr), not 1fr: a plain 1fr track refuses to go below its
     content's min-content width, and the phone mockup is a fixed 360px.
     On a 320px screen that pushed the whole page 40px wide and every
     line of the hero copy off the right edge. */
  .hero .wrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "phone" "cta"; row-gap: 28px; }
  .hero-text { gap: 16px; }
  .hero .lede { font-size: 17px; }
  .hero-actions .btn { width: 100%; }
  .hero-note { flex-direction: column; align-items: center; gap: 10px; }
  .hero-note p { text-align: center; }
}

/* App Store badge (placeholder until the official artwork goes in) */
.appstore { display: inline-flex; align-items: center; gap: 10px; background: #000; border: 1px solid #3A3A3A; color: var(--text); border-radius: 10px; padding: 8px 14px 8px 12px; }
.appstore:hover { border-color: #6A6A6A; color: var(--text); }
.appstore .txt { display: flex; flex-direction: column; line-height: 1.1; }
.appstore .txt small { font-size: 10px; color: #C8C8C8; }
.appstore .txt strong { font-size: 16px; font-weight: 600; }

/* The phone showing the app */
.phone-wrap { display: flex; justify-content: center; }
.phone { width: 360px; max-width: 100%; background: var(--bg); border: 10px solid #1E1E1E; border-radius: 44px; padding: 28px 18px 24px; box-shadow: 0 40px 80px rgba(0,0,0,0.6); display: flex; flex-direction: column; gap: 14px; }
.phone-top { display: flex; justify-content: space-between; align-items: center; padding: 0 6px; }
.phone-top strong { font-family: var(--display); font-weight: 800; font-size: 20px; }
.phone-top span { font-size: 13px; color: #A0A0A0; }
.phone-status { display: inline-flex; align-items: center; gap: 6px; color: #C8C8C8 !important; }
.phone-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
/* Cards carry the app's own color language: each card's accent tints
   its edge and its label, so the screen reads as the app rather than a
   grey wireframe of it. */
.card { background: var(--surface-2); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; border: 1px solid #262626; }
.card-green { border-color: rgba(51, 209, 122, 0.35); background: linear-gradient(180deg, rgba(51, 209, 122, 0.10), var(--surface-2) 60%); }
.card-yellow { border-color: rgba(255, 212, 0, 0.30); background: linear-gradient(180deg, rgba(255, 212, 0, 0.08), var(--surface-2) 60%); }
.card-blue { border-color: rgba(41, 182, 246, 0.35); background: linear-gradient(180deg, rgba(41, 182, 246, 0.10), var(--surface-2) 60%); }
.card-pink { border-color: rgba(255, 61, 154, 0.35); background: linear-gradient(180deg, rgba(255, 61, 154, 0.10), var(--surface-2) 60%); }
.card-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.swatch { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 8px; vertical-align: 1px; }
.delta { font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 999px; }
.delta.up { background: var(--green-soft); color: var(--green); }
.bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; gap: 2px; }
.bar span { display: block; height: 100%; }
.card-label { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.card-row { display: flex; justify-content: space-between; align-items: flex-end; }
.card-col { display: flex; flex-direction: column; }
.card-col.right { align-items: flex-end; }
.big { font-family: var(--display); font-weight: 800; line-height: 1; }
.card-sub { font-size: 13px; color: #A0A0A0; }
.card-list { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #C8C8C8; }
.card-list div { display: flex; justify-content: space-between; }
.pill { background: var(--green-soft); color: var(--green); font-weight: 600; font-size: 13px; padding: 6px 10px; border-radius: 8px; align-self: flex-start; }
@media (max-width: 960px) { .phone { width: 340px; border-width: 8px; border-radius: 40px; padding: 24px 14px 20px; gap: 12px; } .card { padding: 14px; } }

/* Sections */
.section { padding: 72px 0; border-top: 1px solid #1F1F1F; }
.section-head { display: flex; flex-direction: column; gap: 12px; max-width: 60ch; margin-bottom: 40px; }
.section h2 { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.1; font-weight: 800; }
.section-head p { font-size: 19px; color: var(--text-2); }
@media (max-width: 720px) { .section { padding: 40px 0; } .section-head { margin-bottom: 20px; } .section-head p { font-size: 16px; } }

.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.feature { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.feature h3 { font-size: 22px; font-weight: 700; }
.feature p { color: #A8A8A8; font-size: 16px; }
@media (max-width: 960px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .features { grid-template-columns: 1fr; gap: 10px; } .feature { padding: 18px; gap: 6px; } .feature h3 { font-size: 18px; } .feature p { font-size: 15px; } .feature svg { display: none; } }

.connect .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: start; }
.connect-copy { display: flex; flex-direction: column; gap: 16px; }
.connect-copy p { font-size: 18px; color: var(--text-2); max-width: 44ch; }
.chips { display: flex; gap: 12px; padding-top: 8px; flex-wrap: wrap; }
.chip { border: 1px solid #333; border-radius: 999px; padding: 8px 16px; font-size: 14px; font-weight: 500; color: #E0E0E0; }
.chip.muted { color: var(--text-3); }
.steps { display: flex; flex-direction: column; }
.step { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.step:last-child { border-bottom: 0; }
.step .n { font-family: var(--display); font-weight: 800; font-size: 28px; color: var(--yellow); }
.step h3 { font-size: 19px; font-weight: 700; }
.step p { color: #A8A8A8; font-size: 15px; margin-top: 4px; }
@media (max-width: 960px) { .connect .wrap { grid-template-columns: 1fr; gap: 24px; } .step { grid-template-columns: 44px 1fr; gap: 12px; padding: 16px 0; } .step .n { font-size: 26px; } .step h3 { font-size: 17px; } }

.pricing { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.pricing-head { width: min(880px, 100%); display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.pricing .section-head { align-items: flex-start; text-align: left; max-width: 44ch; margin-bottom: 0; }
/* Annual / Monthly switch. One card whose price follows it, instead of
   two cards that both said "monthly" somewhere. */
.billing-toggle { display: inline-flex; background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; padding: 4px; flex-shrink: 0; }
.billing-toggle button { font-family: var(--body); font-size: 15px; font-weight: 600; color: #A8A8A8; background: transparent; border: 0; border-radius: 999px; padding: 10px 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.billing-toggle button.on { background: var(--yellow); color: #0A0A0A; }
.billing-toggle .save { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: #0A0A0A; color: var(--yellow); padding: 3px 7px; border-radius: 999px; }
.billing-toggle button:not(.on) .save { background: #2A2A2A; color: #A8A8A8; }
.plan { width: min(880px, 100%); background: var(--surface); border: 1px solid #2A2A2A; border-radius: 20px; padding: 32px; display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "price list" "cta list"; column-gap: 40px; row-gap: 20px; position: relative; align-items: start; }
.plan > div:first-of-type { grid-area: price; }
.plan ul { grid-area: list; padding-top: 4px; }
.plan .btn { grid-area: cta; justify-self: start; }
.plan.best { border: 2px solid var(--yellow); }
.plan .badge { position: absolute; top: -14px; left: 32px; background: var(--yellow); color: #0A0A0A; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.plan h3 { font-size: 22px; font-weight: 700; }
.price { display: flex; align-items: baseline; gap: 6px; }
.price .amt { font-family: var(--display); font-weight: 800; font-size: 54px; line-height: 1; }
.price span, .plan .sub { color: #A8A8A8; font-size: 16px; }
.plan .sub { font-size: 15px; }
.plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: #D0D0D0; }
.fineprint { font-size: 14px; color: var(--text-3); text-align: center; }
@media (max-width: 720px) {
  .pricing { gap: 20px; }
  .pricing-head { flex-direction: column; align-items: stretch; gap: 16px; }
  .billing-toggle { align-self: flex-end; }
  .billing-toggle button { padding: 9px 14px; font-size: 14px; }
  .plan { grid-template-columns: 1fr; grid-template-areas: "price" "list" "cta"; padding: 20px; row-gap: 14px; }
  .plan .btn { justify-self: stretch; }
  .price .amt { font-size: 40px; }
}

.site-footer { border-top: 1px solid #1F1F1F; padding: 28px 0; font-size: 14px; color: var(--text-3); }
.site-footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.site-footer nav { display: flex; gap: 28px; }
.site-footer a { color: var(--text-3); }
.site-footer a:hover { color: var(--text); }

/* Forms (signup) */
.form-page { padding: 56px 0 72px; }
.form-page .wrap { display: grid; grid-template-columns: 640px 1fr; gap: 64px; align-items: start; }
.form-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }
.stepper { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.stepper .on { color: var(--yellow); }
.stepper .off { color: var(--text-3); }
.stepper .dot { color: #4A4A4A; }
.form-head h1 { font-size: clamp(32px, 3vw, 40px); line-height: 1.1; font-weight: 800; }
.form-head p { font-size: 17px; color: var(--text-2); }
form { display: flex; flex-direction: column; gap: 22px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label, .field > .label { font-size: 14px; font-weight: 600; color: #E0E0E0; }
.field input, .field select {
  font-family: var(--body); font-size: 17px; color: var(--text);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px;
  padding: 14px 16px; min-height: 52px; width: 100%; appearance: none;
}
.field input::placeholder { color: #6A6A6A; }
.field input:focus, .field select:focus { border-color: var(--yellow); outline: 0; }
.field select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A0A0A0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 16px center; }
.hint { font-size: 13px; color: #8A8A8A; }
.field-phone { background: #121212; border: 1px solid #2A2A2A; border-radius: 14px; padding: 18px; gap: 10px; }
.field-phone input { background: var(--bg); }
.callout { display: flex; gap: 10px; align-items: flex-start; }
.callout svg { flex-shrink: 0; margin-top: 2px; }
.callout p { font-size: 14px; color: #C8C8C8; line-height: 1.45; }
.callout strong { color: var(--text); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.plan-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.plan-option { border: 1px solid var(--line-2); background: var(--surface); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.plan-option:has(input:checked) { border: 2px solid var(--yellow); padding: 15px; }
.plan-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.plan-option .top { display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.plan-option .radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #4A4A4A; }
.plan-option:has(input:checked) .radio { border: 5px solid var(--bg); background: var(--yellow); box-shadow: 0 0 0 2px var(--yellow); }
.plan-option .amt { font-family: var(--display); font-weight: 800; font-size: 24px; }
.plan-option .amt small { font-family: var(--body); font-size: 14px; font-weight: 500; color: #A0A0A0; }
.consent { display: flex; gap: 12px; align-items: flex-start; padding-top: 4px; }
.consent input { width: 20px; height: 20px; margin: 0; accent-color: var(--yellow); flex-shrink: 0; }
.consent p { font-size: 13px; color: #A0A0A0; line-height: 1.45; }
.form-error { display: none; background: #3A1226; color: #FF9CC9; border-radius: 10px; padding: 12px 16px; font-size: 14px; }
.form-error.show { display: block; }
.notice { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; font-size: 14px; color: var(--text-2); display: none; }
.notice.show { display: block; }

.summary { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 20px; position: sticky; top: 24px; }
.summary h2 { font-size: 20px; font-weight: 700; }
.summary .lines { display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.summary .lines div { display: flex; justify-content: space-between; }
.summary .lines .label { color: #C8C8C8; }
.summary .total { padding-top: 12px; border-top: 1px solid #2A2A2A; font-weight: 600; font-size: 17px; }
.summary .fine { font-size: 13px; color: #8A8A8A; line-height: 1.5; }
.summary ul { list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px solid #2A2A2A; display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: #C8C8C8; }
@media (max-width: 1080px) {
  .form-page .wrap { grid-template-columns: 1fr; gap: 24px; }
  .summary { position: static; order: 1; }
  .form-page form { order: 0; }
}
@media (max-width: 720px) {
  .form-page { padding: 28px 0 40px; }
  .form-head { margin-bottom: 24px; }
  .form-head p { font-size: 15px; }
  .two { grid-template-columns: 1fr; }
  .plan-options { grid-template-columns: 1fr; }
  .summary { padding: 16px; gap: 10px; }
}

/* Welcome */
.welcome { padding: 96px 0 88px; }
.welcome .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; }
.check { width: 64px; height: 64px; border-radius: 50%; background: var(--green-soft); display: flex; align-items: center; justify-content: center; }
.welcome h1 { font-size: clamp(34px, 3.5vw, 48px); line-height: 1.05; font-weight: 800; }
.welcome .lede { font-size: 18px; color: var(--text-2); max-width: 46ch; }
.next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; width: min(760px, 100%); text-align: left; }
.next .feature .n { font-family: var(--display); font-weight: 800; font-size: 26px; color: var(--yellow); }
.next .feature h3 { font-size: 20px; }
.next .feature p { font-size: 15px; }
.appstore-big { background: #fff; color: #0A0A0A; font-weight: 600; font-size: 15px; padding: 12px 18px; border-radius: 10px; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; }
.appstore-big:hover { color: #0A0A0A; background: #E8E8E8; }
@media (max-width: 720px) { .welcome { padding: 48px 0 40px; } .next { grid-template-columns: 1fr; } .appstore-big { width: 100%; justify-content: center; } }

/* Legal and plain pages */
.prose { padding: 56px 0 72px; }
.prose .wrap { max-width: 720px; }
.prose h1 { font-size: 36px; margin-bottom: 8px; }
.prose h2 { font-size: 22px; margin: 32px 0 8px; }
.prose p, .prose li { color: var(--text-2); font-size: 16px; }
.prose ul { padding-left: 20px; }
.draft { display: inline-block; background: #3A2E00; color: var(--yellow); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; margin-bottom: 16px; }

/* Theme picker on signup: same bones as the plan options, one row of swatches on top. */
.theme-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 720px) { .theme-options { grid-template-columns: 1fr; } }
.theme-option { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line, #2A2A2A); border-radius: 12px; cursor: pointer; background: var(--surface, #141414); }
.theme-option input { position: absolute; opacity: 0; pointer-events: none; }
/* Marks the option somebody gets for not choosing. Small and quiet: it
   is telling you the box is already ticked, not selling you the theme. */
.theme-default { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #0A0A0A; background: var(--yellow, #FFD400);
  border-radius: 999px; padding: 2px 6px; margin-left: 7px; vertical-align: 1px; }
.theme-option .top { display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.theme-option .radio { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line, #3A3A3A); }
.theme-option input:checked ~ .top .radio { border-color: #FFD400; background: radial-gradient(#FFD400 45%, transparent 50%); }
.theme-option input:checked ~ .sw, .theme-option:has(input:checked) { border-color: #FFD400; }
.theme-option .sw { display: flex; gap: 4px; } .theme-option .sw i { width: 18px; height: 18px; border-radius: 5px; display: block; border: 1px solid rgba(255,255,255,.08); }
.theme-option .hint { font-size: 12px; color: var(--muted, #A0A0A0); }

/* Known phone: confirm it's you in a modal, then the park joins your account. */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .72); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50; }
.modal-backdrop[hidden] { display: none; }
.modal { background: var(--surface, #17171A); color: var(--text, #F2F2F2); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 28px 26px; width: 100%; max-width: 440px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.modal-eyebrow { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--yellow, #FFD400); font-weight: 700; }
.modal h2 { font-size: 24px; line-height: 1.15; margin: 8px 0 10px; }
.modal p { color: var(--text-2, #B8B8C0); font-size: 15px; line-height: 1.5; margin: 0 0 18px; }
.modal .label { display: block; font-size: 13px; color: var(--text-2, #B8B8C0); margin-bottom: 6px; }
.code-input { width: 100%; font-size: 32px; letter-spacing: .35em; text-align: center; padding: 14px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: inherit; font-variant-numeric: tabular-nums; }
.code-input:focus { outline: 2px solid var(--yellow, #FFD400); outline-offset: 1px; }
.modal .btn-block { margin-top: 14px; }
.modal-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; }
.modal .link { background: none; border: 0; color: var(--text-2, #B8B8C0); text-decoration: underline; cursor: pointer; font: inherit; font-size: 14px; padding: 0; }
.modal .link:hover { color: var(--text, #F2F2F2); }
.modal .hint { display: block; margin-top: 10px; min-height: 1.2em; }
.modal .form-error { margin: 8px 0 0; }
#park-names { display: grid; gap: 8px; }

/* ---------------------------------------------------------------
   Home page, second take. Everything below styles index.html only;
   the shared header, footer, buttons and form pages above are
   untouched. Class names are distinct from the app-screenshot cards
   used elsewhere, so nothing collides.
   --------------------------------------------------------------- */
:root { --bg-2: #101013; }

.eyebrow::before { animation: pv-pulse 2.4s infinite; }
@keyframes pv-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(51, 209, 122, .18); }
  50% { box-shadow: 0 0 0 9px rgba(51, 209, 122, 0); }
}

/* Hero: the words, then three cards arriving from the right. */
/* The stacked cards sit deliberately past the column's right edge, so
   the section clips sideways. `clip` rather than `hidden` keeps their
   shadows and stops the page itself scrolling. */
.hero { overflow-x: clip; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
.hero-text { display: grid; gap: 22px; align-content: center; }
/* The floor was doing all the work on a phone: 5.4vw only reaches 42px
   at 780px wide, so every handset got the minimum. Below the two-column
   breakpoint it scales with the screen instead. */
.hero h1 { font-size: clamp(42px, 5.4vw, 76px); line-height: .98; }
@media (max-width: 860px) {
  /* 13.3vw is the largest that still lets "Live." share the second row
     with "numbers." — one notch more and it drops to a third. */
  .hero h1 { font-size: clamp(42px, 13.3vw, 60px); }
  .hero .lede { font-size: 17px; }
}
.hero .lede { max-width: 46ch; }
.hero .hl { color: var(--blue); }
/* The two calls to action are equals: same width, same height. The
   transparent border matches the outlined one, so a filled button and
   an outlined button measure the same whether they sit side by side or
   stack. */
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; }
.cta-row .btn { flex: 1 1 200px; min-width: 0; border: 1px solid transparent; }
.cta-row .fine { flex-basis: 100%; text-align: center; font-size: 13px; color: var(--text-3); margin-top: 2px; }
.proof { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; font-size: 13px; color: var(--text-3); }
.proof span:nth-child(1) { justify-self: start; }
.proof span:nth-child(2) { justify-self: end; }
.proof span:nth-child(3) { grid-column: 1 / -1; justify-self: center; }
.proof b { color: var(--text); font-weight: 600; }

/* The cards sit where they really live: on a phone. The headline says
   "in the palm of your hand", so the hero shows one. */
.stack { display: flex; justify-content: center; }
.device { width: 330px; border-radius: 46px; padding: 12px; background: linear-gradient(160deg, #2a2a2f, #131316); box-shadow: 0 40px 80px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .06); animation: pv-slide .9s cubic-bezier(.2, .8, .2, 1) both; }
.screen { background: var(--bg); border-radius: 36px; padding: 12px 12px 16px; overflow: hidden; }
.island { width: 78px; height: 22px; border-radius: 999px; background: #000; margin: -4px auto 6px; }
.statusbar { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px 10px; font-size: 11px; color: var(--text-2); font-weight: 600; }
.parkline { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px 10px; }
.parkline b { font-family: var(--display); font-size: 17px; }
.parkline span { font-size: 11.5px; color: var(--text-2); }
.stackinner { display: grid; gap: 10px; }
.tabbar { display: flex; justify-content: space-between; padding: 12px 10px 2px; margin-top: 12px; border-top: 1px solid var(--line); }
.tabbar span { font-size: 9.5px; color: var(--text-3); display: grid; justify-items: center; gap: 3px; }
.tabbar span::before { content: ""; width: 15px; height: 15px; border-radius: 4px; background: var(--surface-2); }
.tabbar span.on { color: var(--yellow); }
.tabbar span.on::before { background: var(--yellow); }
.hcard { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 13px; }
.hcard .hlabel { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); font-weight: 600; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.hcard .hbig { font-family: var(--display); font-size: 27px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin-top: 2px; }
.hcard .hsub { font-size: 10.5px; color: var(--text-2); margin-top: 3px; }
.c1 .hbig { color: var(--yellow); } .c2 .hbig { color: var(--blue); } .c3 .htile .v { color: var(--purple); }
.hbars { display: grid; gap: 7px; margin-top: 12px; }
.hbar { display: grid; grid-template-columns: 52px 1fr 48px; align-items: center; gap: 8px; font-size: 10.5px; color: var(--text-2); }
.hbar span:last-child { text-align: right; color: var(--text); }
.hbar i { display: block; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.hbar i { height: 5px; }
.hbar i b { display: block; height: 100%; width: var(--w); background: var(--c); transform-origin: left; animation: pv-grow 1.1s .6s cubic-bezier(.2, .8, .2, 1) both; }
.tag { display: inline-block; font-size: 9.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.tag.good { background: rgba(51, 209, 122, .16); color: var(--green); }
.tag.warn { background: rgba(255, 61, 154, .16); color: var(--pink); }
.htiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 9px; }
.htile { background: var(--surface-2); border-radius: 10px; padding: 6px 7px; }
.htile .v { font-family: var(--display); font-weight: 800; font-size: 16px; }
.htile .k { font-size: 9.5px; color: var(--text-2); }
@keyframes pv-slide { from { transform: translateX(60px); } to { transform: translateX(0); } }
@keyframes pv-rise { from { transform: translateY(18px); } to { transform: translateY(0); } }
@keyframes pv-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* The questions a manager actually asks, moving past. */
.strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); overflow: hidden; padding: 14px 0; }
.track { display: flex; gap: 48px; white-space: nowrap; width: max-content; animation: pv-marquee 38s linear infinite; }
.track span { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--text-2); }
.track span::before { content: "?"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; margin-right: 10px; font-size: 12px; color: #0A0A0A; background: var(--yellow); }
.track span:nth-child(3n)::before { background: var(--blue); }
.track span:nth-child(3n+1)::before { background: var(--pink); }
@keyframes pv-marquee { to { transform: translateX(-50%); } }

/* Sections arrive as you reach them, from a visible resting state. */
.sechead { display: grid; gap: 14px; max-width: 62ch; margin-bottom: 40px; }
.sechead p, .lede-2 { color: var(--text-2); font-size: 17px; }
.lede-2 { margin-top: 14px; max-width: 56ch; }
/* Sections clip sideways: a block waiting to slide in sits shifted, and
   on a narrow screen that must never widen the page. */
.section { overflow-x: clip; }
.reveal { transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.reveal.from-right { transform: translateX(40px); }
.reveal.from-left { transform: translateX(-40px); }
.reveal.in { transform: none; }

/* Six answers, each with a mark drawn for its own question. */
.answers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.answer { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; display: grid; gap: 10px; align-content: start; min-height: 220px; transition: transform .2s ease, border-color .2s ease; }
.answer:hover { transform: translateY(-3px); border-color: var(--line-2); }
.answer h3 { margin: 0; font-size: 18px; }
.answer p { color: var(--text-2); font-size: 14.5px; margin: 0; }
.mark { height: 46px; }
.mark svg { display: block; width: 100%; height: 46px; overflow: visible; }
.answer.in .draw { stroke-dasharray: var(--len); animation: pv-draw 1.1s .1s cubic-bezier(.3, .8, .3, 1) both; }
@keyframes pv-draw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
.livedot { animation: pv-blip 2.2s ease-in-out infinite; transform-origin: center; }
@keyframes pv-blip { 0%, 100% { r: 3.2; opacity: 1; } 50% { r: 5.2; opacity: .55; } }
.answer.in .growx { animation: pv-grow 1s .15s cubic-bezier(.2, .8, .2, 1) both; transform-origin: left; }
.answer.in .pop { animation: pv-pop .5s cubic-bezier(.2, .9, .3, 1.3) both; transform-origin: center bottom; }
@keyframes pv-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.answer.in .fadein { animation: pv-fade .5s both; }
@keyframes pv-fade { from { opacity: 0; } to { opacity: 1; } }

/* What it connects to, said without naming a vendor. */
.connectband { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.connect-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.connect-grid h2 { margin-top: 12px; }
.flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 10px; }
.node { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; text-align: center; }
.node b { display: block; font-family: var(--display); font-weight: 700; }
.node span { font-size: 12px; color: var(--text-2); }
/* The three steps carry the app's own colours, in its own order:
   what you already run, us, then your phone. */
.flow .node:first-child { border-color: rgba(255, 61, 154, .5); box-shadow: 0 0 0 4px rgba(255, 61, 154, .08); }
.node.pv { border-color: rgba(255, 212, 0, .5); box-shadow: 0 0 0 4px rgba(255, 212, 0, .08); }
.flow .node:last-child { border-color: rgba(41, 182, 246, .5); box-shadow: 0 0 0 4px rgba(41, 182, 246, .08); }
.flow .node:first-child b { color: var(--pink); }
.node.pv b { color: var(--yellow); }
.flow .node:last-child b { color: var(--blue); }
.arrow { width: 34px; height: 2px; background: linear-gradient(90deg, var(--line), var(--text-2)); position: relative; }
.arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--text-2); }
.arrow::before { content: ""; position: absolute; left: 0; top: -2px; width: 10px; height: 6px; border-radius: 3px; background: var(--yellow); animation: pv-travel 1.6s linear infinite; }
@keyframes pv-travel { to { transform: translateX(30px); opacity: 0; } }
.checks { display: grid; gap: 10px; padding: 0; margin: 18px 0 0; }
.checks li { list-style: none; display: flex; gap: 10px; align-items: flex-start; color: var(--text-2); font-size: 15px; }
.checks li::before { content: "\2713"; color: var(--green); font-weight: 700; }

/* Getting started, along a rail. */
.journey { display: grid; grid-template-columns: repeat(3, 1fr); position: relative; }
.journey::before { content: ""; position: absolute; left: 0; right: 0; top: 22px; height: 2px; background: var(--line); }
.jstep { padding-right: 22px; position: relative; }
.jstep .n { width: 46px; height: 46px; border-radius: 50%; background: var(--bg); border: 2px solid var(--yellow); display: grid; place-items: center; font-family: var(--display); font-weight: 800; color: var(--yellow); position: relative; z-index: 1; }
.jstep h3 { margin: 16px 0 0; font-size: 18px; }
.jstep p { color: var(--text-2); font-size: 14.5px; margin: 6px 0 0; max-width: 30ch; }

/* One plan, flagged with a ribbon rather than a badge by the toggle. */
.pricebox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.pricebox-grid h2 { margin-top: 12px; }
.planbox { background: var(--surface); border: 1px solid rgba(255, 212, 0, .35); border-radius: 20px; padding: 26px; position: relative; overflow: hidden; }
.planbox::before { content: ""; position: absolute; inset: -40% -20% auto auto; width: 60%; height: 80%; background: radial-gradient(closest-side, rgba(255, 212, 0, .10), transparent); pointer-events: none; }
.ribbon { position: absolute; top: 0; right: 0; width: 132px; height: 132px; overflow: hidden; pointer-events: none; }
.ribbon span { position: absolute; top: 26px; right: -38px; width: 168px; transform: rotate(45deg); background: var(--yellow); color: #0A0A0A; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 7px 0; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.ribbon[hidden] { display: none; }
.plantoggle { display: inline-flex; background: var(--surface-2); border-radius: 999px; padding: 4px; margin-bottom: 18px; position: relative; z-index: 1; }
.plantoggle button { background: none; border: 0; color: var(--text-2); font: inherit; font-weight: 600; padding: 8px 14px; border-radius: 999px; cursor: pointer; }
.plantoggle button.on { background: var(--text); color: #0A0A0A; }
.planprice { font-family: var(--display); font-weight: 800; font-size: 56px; letter-spacing: -0.03em; line-height: 1; }
.planprice small { font-family: var(--body); font-weight: 500; font-size: 15px; color: var(--text-2); letter-spacing: 0; margin-left: 6px; }
.planbox ul { padding: 0; margin: 18px 0 22px; display: grid; gap: 9px; }
.planbox li { list-style: none; display: flex; gap: 10px; color: var(--text-2); font-size: 15px; }
.planbox li::before { content: "\2022"; color: var(--yellow); }
.planbox .fine { font-size: 13px; color: var(--text-3); margin: 8px 0 0; }

/* What holds true whichever park you run. */
.band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.band div { border-top: 2px solid var(--line); padding-top: 14px; }
.band b { display: block; font-family: var(--display); font-weight: 700; margin-bottom: 4px; }
.band span { color: var(--text-2); font-size: 14px; }
.band-section { padding-top: 0; }

@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 30px; }
  .device { width: 340px; animation-name: pv-rise; }
  .hcard .hlabel { font-size: 11.5px; }
  .hcard .hbig { font-size: 32px; }
  .hcard .hsub { font-size: 12px; }
  .tag { font-size: 10.5px; padding: 3px 7px; }
  .hbar { font-size: 11.5px; grid-template-columns: 56px 1fr 52px; }
  .htile .v { font-size: 18px; }
  .htile .k { font-size: 10.5px; }
  .parkline b { font-size: 18px; }
  .parkline span { font-size: 12px; }
  .tabbar span { font-size: 10px; }
  .answers { grid-template-columns: 1fr; }
  .answer { min-height: 0; padding: 18px; }
  .connect-grid, .pricebox-grid { grid-template-columns: 1fr; gap: 26px; }
  .flow { grid-template-columns: 1fr; gap: 6px; }
  .arrow { width: 2px; height: 24px; margin: 0 auto; background: linear-gradient(180deg, var(--line), var(--text-2)); }
  .arrow::after { right: -4px; top: auto; bottom: -2px; border: 5px solid transparent; border-top: 7px solid var(--text-2); }
  .arrow::before { display: none; }
  .journey { grid-template-columns: 1fr; gap: 26px; }
  .journey::before { left: 22px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .jstep { padding: 0 0 0 64px; }
  .jstep .n { position: absolute; left: 0; top: 0; }
  .jstep h3 { margin-top: 4px; }
  .band { grid-template-columns: 1fr; gap: 18px; }
  .planprice { font-size: 44px; }
  .proof { gap: 10px 14px; font-size: 12.5px; }
  .reveal.from-right, .reveal.from-left { transform: translateY(24px); }
  .reveal.in { transform: none; }
  .sechead { margin-bottom: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .hcard, .hbar i b, .track, .arrow::before, .eyebrow::before, .livedot { animation: none !important; }
  .reveal { transition: none; transform: none !important; }
  .answer.in .draw, .answer.in .growx, .answer.in .pop, .answer.in .fadein { animation: none !important; stroke-dasharray: none; }
}

/* The free trial, said once wherever it matters. */
.trial-line { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--green); }
.trial-line::before { content: "\2713"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: 12px; }
.trial-line[hidden] { display: none; }

/* What we read from today, named plainly. The rest of the page stays
   vendor-neutral so it keeps reading true as this list grows. */
.logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.logo { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; display: grid; gap: 14px; align-content: start; text-decoration: none; color: inherit; transition: transform .2s ease, border-color .2s ease; }
a.logo:hover { transform: translateY(-3px); border-color: var(--line-2); }
/* Each mark at its own proportions, on a common baseline, unaltered. */
.logo img { height: 26px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; align-self: start; }
.logo b { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.logo span:last-child { color: var(--text-2); font-size: 14px; }
.logomark { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 22px; color: #0A0A0A; background: var(--c); margin-bottom: 6px; }
.logo.soon { border-style: dashed; background: transparent; }
.logo.soon b { color: var(--text-2); }
.logomark.dots { background: transparent; border: 1px dashed var(--line-2); color: var(--text-3); letter-spacing: 2px; font-size: 18px; }
@media (max-width: 860px) {
  .logos { grid-template-columns: 1fr; }
  .logo { padding: 18px; }
}

.logo.soon a { color: var(--yellow); text-decoration: underline; text-underline-offset: 2px; }