/* ═══════════════════════════════════════════════════════════════════════════
   The public marketing site.

   Loaded AFTER app.css, which is where the design tokens live (--ink, --muted,
   --line, --bg, --accent) along with the dark-mode block. Reusing them is the
   point: the marketing site and the product should not look like two companies.

   ponytail: no framework, no build step, no CSS-in-JS. One stylesheet, plain
   custom properties, and layout that is grid where grid helps and flow
   everywhere else. The marketing site is the least dynamic thing in the repo
   and does not need tooling the product itself does without.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --site-max: 68rem;
  --site-gut: 1.5rem;
  --band: #f6f8fb;          /* the alternating section tint */
  --band-line: #e6ecf3;
  --ink-strong: #0f1720;
  --radius: 12px;
}
@media (prefers-color-scheme: dark) {
  :root { --band: #1a212a; --band-line: #26303b; --ink-strong: #f2f6fa; }
}

/* The marketing pages do not use app.css's .wrap, so its 56rem cap and page
   padding never apply. Sections are full-bleed; only the inner rail is capped. */
.site { --flow: 1.25rem; }
.site-rail { max-width: var(--site-max); margin: 0 auto; padding: 0 var(--site-gut); }

/* ── Typography ─────────────────────────────────────────────────────────── */
.site h1, .site h2, .site h3 { color: var(--ink-strong); text-wrap: balance; }
.site h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem); line-height: 1.08; letter-spacing: -0.021em; margin: 0 0 1rem; }
.site h2 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.1rem); line-height: 1.18; letter-spacing: -0.015em; margin: 0 0 .75rem; }
.site h3 { font-size: 1.075rem; line-height: 1.3; letter-spacing: -0.005em; margin: 0 0 .4rem; }
.site p  { color: var(--muted); margin: 0 0 var(--flow); }
/* Measure. Long marketing paragraphs are unreadable at full grid width. */
.site .lede { font-size: clamp(1.05rem, .98rem + .35vw, 1.2rem); color: var(--muted); max-width: 46ch; }
.site .prose p, .site .prose li { max-width: 68ch; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header { border-bottom: 1px solid var(--line); background: var(--bg); }
.site-header .site-rail {
  display: flex; align-items: center; gap: .5rem 1.35rem;
  flex-wrap: wrap; padding-top: .85rem; padding-bottom: .85rem;
}
.site-brand {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 680; letter-spacing: -0.01em; color: var(--ink-strong);
  text-decoration: none; font-size: 1.05rem; margin-right: auto;
}
.site-brand img { display: block; width: 30px; height: 30px; border-radius: 7px; }
.site-nav { display: flex; align-items: center; gap: .25rem 1.15rem; flex-wrap: wrap; }
.site-nav a {
  color: var(--muted); text-decoration: none; font-size: .935rem;
  padding: .3rem 0; border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--ink-strong); }
.site-nav a[aria-current="page"] { color: var(--ink-strong); border-bottom-color: var(--accent); }
.site-nav .site-login { color: var(--ink-strong); font-weight: 560; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.site .btn {
  display: inline-block; text-decoration: none; font-weight: 580;
  padding: .7rem 1.25rem; border-radius: 8px; border: 1px solid transparent;
  font-size: .96rem; line-height: 1.25;
}
.site .btn-primary { background: var(--accent); color: #fff; }
.site .btn-primary:hover { filter: brightness(1.08); }
.site .btn-secondary { background: transparent; color: var(--ink-strong); border-color: var(--line); }
.site .btn-secondary:hover { border-color: var(--muted); }
.site .btn-onimage { background: rgba(255,255,255,.94); color: #0f1720; }
.site .cta-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }

/* Focus is never removed — it is made obvious. Applies to every interactive
   element on the marketing pages, not just the ones that look like buttons. */
.site a:focus-visible, .site .btn:focus-visible, .site summary:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px;
}

/* ── Sections ───────────────────────────────────────────────────────────── */
.site-section { padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0; }
.site-section.tint { background: var(--band); border-block: 1px solid var(--band-line); }
.site-section .section-head { max-width: 48ch; margin-bottom: 2.25rem; }
.site-section .section-head p { margin-bottom: 0; }

/* Split: copy on one side, image on the other. The image guide notes most
   assets keep their calm negative space on the LEFT, so the default puts copy
   left and the visual right; .split-flip swaps it for rhythm. */
.split { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); align-items: center; }
@media (min-width: 60rem) {
  .split { grid-template-columns: 1fr 1fr; }
  .split-flip .split-media { order: -1; }
}
.split-copy > :last-child { margin-bottom: 0; }

/* ── Figures ────────────────────────────────────────────────────────────── */
/* width/height are set on every <img> so the box is reserved before the bytes
   arrive; aspect-ratio keeps it correct while the column is fluid. */
.site figure { margin: 0; }
.site figure img {
  display: block; width: 100%; height: auto; aspect-ratio: 1672 / 941;
  object-fit: cover; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--band);
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) 0 clamp(3rem, 2rem + 4vw, 5rem); }
.site .eyebrow {
  display: inline-block; font-size: .8rem; font-weight: 620; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent); margin-bottom: .9rem;
}
.hero-points { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .55rem; }
.hero-points li { position: relative; padding-left: 1.6rem; color: var(--muted); max-width: 46ch; }
.hero-points li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent);
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
/* Restrained: a hairline and a radius, no shadow stack, no hover lift. */
.cards { display: grid; gap: 1.1rem; }
@media (min-width: 42rem) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .cards-3 { grid-template-columns: repeat(3, 1fr); } }
.card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.35rem 1.4rem; background: var(--bg);
}
.card p:last-child { margin-bottom: 0; }

/* ── Numbered steps ─────────────────────────────────────────────────────── */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 1.1rem; }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(2, 1fr); } }
.steps li {
  counter-increment: step; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.3rem 1.4rem 1.35rem;
}
.steps li::before {
  content: counter(step); display: inline-grid; place-items: center;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: .88rem; font-weight: 640;
  margin-bottom: .7rem;
}
.steps h3 { margin-bottom: .3rem; }
.steps p { margin-bottom: 0; }

/* ── Checklist ──────────────────────────────────────────────────────────── */
.ticks { list-style: none; padding: 0; margin: 0 0 var(--flow); display: grid; gap: .6rem; }
.ticks li { position: relative; padding-left: 1.75rem; color: var(--muted); max-width: 62ch; }
.ticks li::before {
  content: ""; position: absolute; left: .15rem; top: .3em;
  width: .45rem; height: .8rem; border: solid var(--accent);
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
/* <details> so it works with zero JavaScript and stays keyboard-operable. */
.faq { display: grid; gap: .6rem; max-width: 52rem; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.faq summary {
  cursor: pointer; padding: 1.05rem 1.25rem; font-weight: 580; color: var(--ink-strong);
  list-style: none; display: flex; align-items: flex-start; gap: .75rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; margin-left: auto; font-weight: 400; font-size: 1.3rem;
  line-height: 1; color: var(--muted); flex: none;
}
.faq details[open] summary::after { content: "\2212"; }
.faq .faq-body { padding: 0 1.25rem 1.15rem; }
.faq .faq-body p { margin-bottom: 0; max-width: 68ch; }

/* ── Closing band ───────────────────────────────────────────────────────── */
.closer { position: relative; padding: clamp(3.5rem, 2rem + 6vw, 6.5rem) 0; overflow: hidden; }
.closer img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% center; z-index: 0;
}
/* Left-biased scrim: the assets keep their calm space on the left, so the text
   side is darkened and the product visual on the right stays legible. */
.closer::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(8,14,22,.90) 0%, rgba(8,14,22,.78) 38%, rgba(8,14,22,.32) 68%, rgba(8,14,22,.16) 100%);
}
.closer .site-rail { position: relative; z-index: 2; }
.closer .closer-copy { max-width: 34rem; }
.closer h2, .closer p { color: #fff; }
.closer p { color: rgba(255,255,255,.9); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--line); padding: 3rem 0 2.5rem; background: var(--band); }
.site-footer .footer-top { display: grid; gap: 2rem; margin-bottom: 2.25rem; }
@media (min-width: 52rem) { .site-footer .footer-top { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer .footer-blurb { color: var(--muted); max-width: 40ch; margin: .75rem 0 0; font-size: .94rem; }
.site-footer h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0 0 .8rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.site-footer a { color: var(--ink-strong); text-decoration: none; font-size: .94rem; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .footer-legal {
  border-top: 1px solid var(--band-line); padding-top: 1.5rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: baseline;
}
.site-footer .footer-legal p { color: var(--muted); font-size: .875rem; margin: 0; }

/* ── Legal / prose pages ────────────────────────────────────────────────── */
.legal { padding: clamp(2.5rem, 1.5rem + 3vw, 4rem) 0 clamp(3rem, 2rem + 4vw, 5rem); }
.legal-rail { max-width: 46rem; margin: 0 auto; padding: 0 var(--site-gut); }
.legal h1 { font-size: clamp(1.85rem, 1.4rem + 1.8vw, 2.5rem); margin-bottom: .6rem; }
.legal .updated { color: var(--muted); font-size: .92rem; margin: 0 0 2.25rem; }
.legal h2 { font-size: 1.2rem; margin: 2.5rem 0 .6rem; }
.legal h3 { font-size: 1.02rem; margin: 1.75rem 0 .4rem; }
.legal p, .legal li { color: var(--muted); }
.legal ul { padding-left: 1.15rem; margin: 0 0 1.25rem; }
.legal li { margin-bottom: .4rem; }
.legal a { color: var(--accent); }
.legal .legal-note {
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 8px; padding: 1rem 1.15rem; margin: 0 0 2rem; background: var(--band);
}
.legal .legal-note p { margin: 0; font-size: .94rem; }

/* ── Reduced motion. There is almost none, but the details marker and any
      future transition should respect the preference. ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  .site *, .site *::before, .site *::after { transition: none !important; animation: none !important; }
}

/* Ghost button over the closing image band. A class rather than an inline
   style attribute: style-src is 'self' + nonce with no 'unsafe-inline', so an
   inline style= would be silently dropped by the CSP. */
.site .btn-ghost-onimage { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.site .btn-ghost-onimage:hover { border-color: rgba(255,255,255,.8); }
.site .contact-address { margin-top: 1.75rem; }

/* ═══ Layout corrections found in visual review ═══════════════════════════ */

/* Grid and flex children default to min-width:auto, so a child whose
   min-content is wide — an <img> with a 1672px intrinsic width and a
   PERCENTAGE width, which does not contribute to min-content — refuses to
   shrink and pushes the whole page wider than the viewport. This was a real
   horizontal overflow on a 390px screen, not a theoretical one. */
.split > *, .cards > *, .steps > *, .site-header .site-rail > * { min-width: 0; }
.site img { max-width: 100%; }

/* The hero visual was reading as a thumbnail: a 16:9 image centred beside a
   much taller copy column leaves dead space above and below it. On desktop the
   figure now fills the column height. object-position keeps the right-hand side
   — guest, phone, door, keypad — which is the half the image guide says to
   preserve; the ocean negative space on the left is what gets cropped. */
@media (min-width: 60rem) {
  .hero .split { align-items: stretch; }
  .hero .split-media { display: flex; }
  .hero .split-media img {
    height: 100%; max-height: 34rem; aspect-ratio: auto;
    object-position: 68% center;
  }
}

/* On a phone the 6-item nav plus Login plus the CTA wrapped to three rows and
   pushed the hero below the fold. The hero repeats "Get Early Access" a few
   hundred pixels further down, so the header copy is redundant there — dropping
   it and tightening the row gets the header back to two lines without hiding
   any navigation or introducing a JavaScript menu. */
@media (max-width: 47.99rem) {
  .site-header .site-nav .btn-primary { display: none; }
  .site-header .site-rail { gap: .35rem .95rem; padding-top: .7rem; padding-bottom: .7rem; }
  .site-nav a { font-size: .9rem; }
  .site-brand { font-size: 1rem; }
}
/* ponytail: the mobile nav wraps to two or three rows rather than collapsing
   into a menu. Every link stays reachable, it needs no JavaScript, and it is
   keyboard-operable by default. If the header height ever becomes the thing
   people complain about, the upgrade is a <details>/<summary> disclosure —
   still no JavaScript — not a hamburger widget. */

/* ═══ Launch polish ═══════════════════════════════════════════════════════ */

/* WCAG 2.5.8 Target Size (Minimum) wants 24x24 CSS px for a standalone control.
   The footer's thirteen links were 18px tall — they are list items, not links
   inside a sentence, so the inline exception does not cover them. Padding gets
   them over the line without changing the visual rhythm much. */
.site-footer ul a, .site-nav a {
  display: inline-block; padding-block: .3rem; min-height: 24px;
}
.site-footer ul { gap: .35rem; }

/* Same reason: a standalone link that sits on its own line is a target. */
.site .inline-cta { display: inline-block; padding-block: .3rem; min-height: 24px; }

/* Screen-reader-only text, for saying "opens in a new tab" without saying it
   visually. Standard clip pattern — not a framework. */
.site .visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* The Hospitable partner band. Deliberately quiet: one bordered panel, no logo,
   no colour of its own. The relationship is worth stating and is not the reason
   anyone buys Guest Portal, so it must not out-shout the product sections. */
.partner .partner-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); background: var(--bg);
  max-width: 58rem;
}
.partner .partner-card h2 { font-size: clamp(1.25rem, 1.1rem + .8vw, 1.6rem); margin-bottom: .75rem; }
.partner .partner-card p { max-width: 62ch; }
.partner .partner-card > p:last-child { margin-bottom: 0; }
.partner .partner-note {
  font-size: .92rem; border-left: 3px solid var(--line);
  padding-left: .9rem; margin-top: 1.1rem;
}

/* The operator disclosure at the foot of /contact. Restrained, not hidden:
   smaller and muted like a footnote, but full contrast against the page and in
   normal document flow. Legally required information must never be made hard to
   read — the goal is that it is not marketing copy, not that it is invisible. */
.site .contact-address {
  margin-top: 2rem; font-size: .92rem;
  padding-top: 1rem; border-top: 1px solid var(--line); max-width: 46ch;
}

/* Every legal document ends with the same operator block. The approved source
   only names the company and address inside some of the documents, so a reader
   who lands directly on, say, the Cookie Policy would otherwise never learn who
   operates the service. Ordinary body size and full contrast — this is the
   place the information is SUPPOSED to be easy to find. */
.legal .legal-operator {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.legal .legal-operator h2 { font-size: 1rem; margin: 0 0 .6rem; }
.legal .legal-operator p { margin: 0 0 .35rem; }

/* The Hospitable partner offer. Sits below the disclaimer inside the same
   panel — it is a genuine perk for the reader, not the reason the band exists,
   so it must not read as the headline. */
.partner .partner-offer { margin-top: 1.1rem; font-size: .95rem; }
.partner .partner-offer a { font-weight: 560; }

/* Link from the homepage FAQ excerpt to the full FAQ page. It sits on its own
   line, so it is a standalone target rather than a link inside a sentence and
   WCAG 2.5.8's inline exception does not cover it. */
.site .faq-more { margin: 1.25rem 0 0; }
.site .faq-more a { display: inline-block; padding-block: .3rem; min-height: 24px; }

/* ── The demo selector, /demo ──────────────────────────────────────────────
   Two cards, side by side where there is room and stacked where there is not.
   Deliberately not a feature matrix: the choice is "simpler" or "fuller", and a
   table of ticks would make it look like a pricing decision. */
.demo-choice {
  display: grid; gap: 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.demo-card {
  border: 1px solid var(--line); border-radius: 12px; padding: 1.75rem;
  display: flex; flex-direction: column;
}
.demo-card h2 { margin: .35rem 0 .75rem; font-size: 1.35rem; }
.demo-points { margin: 0 0 1.5rem; padding-left: 1.1rem; }
.demo-points li { margin: 0 0 .4rem; color: var(--ink); }
.demo-card p:last-child { margin-top: auto; margin-bottom: 0; }
.demo-disclaimer {
  margin: 2rem 0 0; font-size: .9rem; color: var(--muted); max-width: 46rem;
}
@media (max-width: 52rem) {
  .demo-choice { grid-template-columns: minmax(0, 1fr); }
}

/* ── /early-access ─────────────────────────────────────────────────────────
   The only form on the public site. Two columns where there is room so the
   reassurances stay visible while the form is filled in; one column on a phone,
   with the reassurances FIRST — a person deciding whether to give us their
   email should read "no payment, not a sign-up" before they reach the fields. */
.ea-layout {
  display: grid; gap: 3rem; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: start;
}
.ea-intro h1 { margin: .35rem 0 1rem; }
.ea-assurances { margin: 1.5rem 0; padding: 0; list-style: none; }
.ea-assurances li {
  margin: 0 0 .75rem; padding-left: 1.6rem; position: relative; color: var(--ink);
}
.ea-assurances li::before {
  content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700;
}
.ea-formwrap {
  border: 1px solid var(--line); border-radius: 12px; padding: 1.75rem;
}
.ea-field { margin: 0 0 1.5rem; border: 0; padding: 0; min-width: 0; }
.ea-field > label, .ea-field legend {
  display: block; font-weight: 600; color: var(--ink-strong); margin: 0 0 .35rem; padding: 0;
}
.ea-required { font-weight: 400; color: var(--muted); }
.ea-optional { font-weight: 400; color: var(--muted); }
.ea-hint { margin: 0 0 .5rem; font-size: .875rem; color: var(--muted); }
.ea-field input[type="text"], .ea-field input[type="email"],
.ea-field input[type="tel"], .ea-field textarea {
  width: 100%; min-height: 44px; padding: .6rem .75rem;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink); font: inherit;
}
.ea-field textarea { min-height: 6rem; resize: vertical; }
.ea-field input:focus-visible, .ea-field textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.ea-options { display: grid; gap: .5rem; }
.ea-option {
  display: flex; align-items: center; gap: .6rem;
  min-height: 44px; padding: .5rem .75rem;
  border: 1px solid var(--line); border-radius: 8px; cursor: pointer; color: var(--ink);
}
.ea-option:hover { border-color: var(--muted); }
.ea-option input { width: 1.15rem; height: 1.15rem; flex: none; accent-color: var(--accent); }
.ea-option:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }

.ea-field.has-error input, .ea-field.has-error textarea { border-color: var(--err-line); }
.ea-error { margin: .4rem 0 0; font-size: .9rem; color: var(--err-ink); font-weight: 600; }
.ea-problems {
  margin: 0 0 1.75rem; padding: 1rem 1.25rem;
  background: var(--err-bg); border: 1px solid var(--err-line); border-radius: 8px;
  color: var(--err-ink);
}
.ea-problems h2 { margin: 0 0 .5rem; font-size: 1.05rem; }
.ea-problems ul { margin: 0; padding-left: 1.2rem; }
.ea-problems li { color: var(--err-ink); }

/* The honeypot. Off-screen rather than display:none — some bots skip fields
   that are display:none, and aria-hidden plus tabindex="-1" already keep it
   away from assistive technology and the keyboard. */
.ea-trap {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
.ea-submit { width: 100%; justify-content: center; }
.ea-legal { margin: 1rem 0 0; font-size: .85rem; }
.ea-thanks { max-width: 40rem; }
.ea-thanks h1 { margin: .35rem 0 1rem; }

@media (max-width: 60rem) {
  .ea-layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}
@media (max-width: 34rem) {
  .ea-formwrap { padding: 1.25rem 1rem; border-radius: 10px; }
}