/* OperHand — shared shell for the three feature pages (Authorizations, Daily
   Queue, Bill).

   These pages load site.css BEFORE this file, deliberately. The visitor arrives
   from the landing page, so site.css is already cached — reusing it costs
   nothing and makes the nav, footer, buttons and page ground pixel-identical to
   the landing page by construction. Re-declaring those rules here would drift
   the next time the nav changes. This file only adds what the landing page has
   no equivalent for.

   No GSAP, no ScrollTrigger, no Lenis. base.css's stated rule is that pages are
   readable with no JavaScript; a reading page has nothing to scrub, and the
   motion stack is three blocking scripts plus a hero video it would never use.
   Because MotionCore never loads, html.motion is never added, so site.css's
   `html.motion ... { opacity: 0 }` rules cannot hide anything here. */

/* ---------- Shell ---------- */

/* The nav is fixed, so the first block of content has to clear it. Nav height
   is 72px desktop / 66px mobile (logo + the bar's own padding). */
.page-main {
  position: relative;
  z-index: 1;
  padding-top: calc(72px + var(--space-6));
}

/* ---------- Page hero ---------- */

.page-hero { padding-block: var(--space-8) var(--space-12); }

.page-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 5vw, 62px);
  letter-spacing: -0.014em;
  line-height: 1.04;
  font-variation-settings: "opsz" 110, "SOFT" 40, "WONK" 1;
  color: var(--ink);
  max-width: 18ch;
}

.page-lede {
  margin-top: var(--space-3);
  max-width: 58ch;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.62;
  color: var(--ink-muted);
}

/* The line that keeps the two Tier 1 pages from reading as two products.
   Brief correction 8: Authorizations and the CRM are one purchase. */
.tier-note {
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-left: 2px solid var(--terracotta-clay);
  background: rgba(255, 253, 246, 0.5);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 56ch;
}

/* ---------- Generic section ---------- */

.section { padding-block: var(--space-8); }

.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 3vw, 40px);
  letter-spacing: -0.012em;
  line-height: 1.1;
  font-variation-settings: "opsz" 90, "SOFT" 40, "WONK" 1;
  color: var(--ink);
  max-width: 20ch;
}

.section-body {
  margin-top: var(--space-3);
  max-width: 62ch;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink-muted);
}
.section-body + .section-body { margin-top: var(--space-2); }

/* ---------- The question block ----------
   Used where copy must ASK rather than ASSERT. See the comment in
   authorizations.html: the retrospective/both-plans scope of the requirement is
   not owner-confirmed, so it is never stated as fact. */

.ask {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-6);
  background: var(--surface-container);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-1);
  max-width: 46ch;
}
.ask p {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 27px);
  line-height: 1.3;
  font-variation-settings: "opsz" 80, "SOFT" 40, "WONK" 1;
  color: var(--ink);
}

/* ---------- Numbered capability blocks ---------- */

.blocks {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.block {
  padding: var(--space-4);
  background: rgba(255, 253, 246, 0.66);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
}

.block-n {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  color: var(--terracotta-clay);
}

.block h3 {
  margin-top: var(--space-1);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  font-variation-settings: "opsz" 40, "SOFT" 40, "WONK" 1;
  color: var(--ink);
}

.block p {
  margin-top: var(--space-1);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-muted);
}

/* ---------- Olive emphasis band ---------- */

.band {
  margin-block: var(--space-8);
  background: var(--olive-deep);
  color: #fef9ee;
}
.band-inner { padding-block: var(--space-8); }

.band-quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 100, "SOFT" 40, "WONK" 1;
  max-width: 22ch;
}
.band-body {
  margin-top: var(--space-3);
  max-width: 58ch;
  font-size: 16.5px;
  line-height: 1.7;
  color: rgba(254, 249, 238, 0.86);
}

/* ---------- Plain fact list (used for the objection answers) ---------- */

.facts { margin-top: var(--space-4); display: grid; gap: var(--space-2); max-width: 62ch; }
.fact {
  padding-left: var(--space-3);
  border-left: 2px solid var(--sage-whisper);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-muted);
}
.fact b { color: var(--ink); font-weight: 650; }

/* ---------- Honesty block: what it deliberately does not do ---------- */

.honesty {
  margin-top: var(--space-6);
  padding: var(--space-6);
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  max-width: 68ch;
}
.honesty h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  font-variation-settings: "opsz" 50, "SOFT" 40, "WONK" 1;
  color: var(--ink);
}
.honesty p { margin-top: var(--space-2); font-size: 15.5px; line-height: 1.7; color: var(--ink-muted); }

/* ---------- Screenshot / visual figure ----------
   Reuses the landing page's .laptop component wholesale, so a capture on a
   feature page sits in the same chrome it did on the landing page. --lap-w is
   the laptop's width variable; site.css reads it from the nearest ancestor. */

.page-figure {
  margin-top: var(--space-6);
  --lap-w: min(100%, 720px);
}
/* site.css starts .laptop at opacity 0 for the landing page's scroll reveal.
   There is no reveal here, so it is simply visible. */
.page-figure .laptop { opacity: 1; }

.figure-caption {
  margin-top: var(--space-2);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-muted);
  opacity: 0.85;
  max-width: 52ch;
}

/* Bill has no screen. CLAUDE.md rule 4: a live Bill run shows patient data, so
   Bill is never screen-captured. The character carries the page instead. */
.bill-portrait {
  margin-top: var(--space-6);
  display: flex;
  justify-content: center;
}
.bill-portrait img { width: min(100%, 460px); height: auto; }

/* ---------- Cross-links ---------- */

.crosslinks {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.crosslink {
  display: block;
  padding: var(--space-4);
  background: rgba(255, 253, 246, 0.66);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.crosslink:hover { border-color: var(--terracotta-clay); background: rgba(255, 253, 246, 0.85); }

.crosslink .eyebrow { margin-bottom: var(--space-1); }
.crosslink h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.2;
  font-variation-settings: "opsz" 40, "SOFT" 40, "WONK" 1;
  color: var(--ink);
}
.crosslink p { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--ink-muted); }

/* ---------- Closing call to action ---------- */

.page-cta { padding-block: var(--space-8) var(--space-12); }
.page-cta h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.012em;
  font-variation-settings: "opsz" 100, "SOFT" 40, "WONK" 1;
  color: var(--ink);
  max-width: 20ch;
}
.page-cta p { margin-top: var(--space-2); max-width: 52ch; font-size: 16.5px; line-height: 1.7; color: var(--ink-muted); }
.page-cta .btn { margin-top: var(--space-4); }

.backhome {
  display: inline-block;
  margin-top: var(--space-6);
  font-size: 14px;
  font-weight: 650;
  color: var(--secondary);
  text-decoration: none;
  border-bottom: 1px solid var(--outline-variant);
  padding-bottom: 2px;
}
.backhome:hover { border-bottom-color: var(--secondary); }

/* ---------- Signup form (start.html) ----------
   The only genuinely new component on these pages. Everything else here restyles
   type; this needs real controls.

   Deliberately no JavaScript validation. The browser's own `required` and
   type="email" already block an empty or malformed submit, they work with a
   screen reader, and they cannot break — which matters more on the one page a
   prospect has to get through than a nicer-looking error message does. */

/* The feature pages put a full section break between the hero and what follows,
   because what follows is more reading. Here it is the form — the thing the
   visitor came to do — and the standard spacing (96px hero tail + 64px section
   head + 48px) left ~200px of empty page between the invitation and the first
   field. On a laptop the form started below the fold. This closes it up. */
.page-hero.is-form { padding-bottom: var(--space-4); }
.page-hero.is-form + .section { padding-top: 0; }

.signup { margin-top: var(--space-4); max-width: 46rem; }

.field { margin-bottom: var(--space-3); }

/* Two-up on desktop, stacked on mobile via the media query below. First and last
   name are short enough to share a line; nothing else is. */
.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.field label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 650;
  color: var(--ink);
}

.field input {
  display: block;
  width: 100%;
  min-height: 48px;              /* same target size as .btn */
  padding: 0 14px;
  font-family: var(--font-body);
  font-size: 16px;               /* below 16px, iOS zooms the page on focus */
  color: var(--ink);
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.field input:hover { border-color: var(--outline); }

/* A visible focus ring, not just a colour shift — this is the keyboard user's
   only cue as to where they are, and base.css does not style form controls. */
.field input:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(138, 75, 48, 0.18);
}

/* :user-invalid, NOT :invalid — the browser only applies this after the visitor
   has actually interacted with the field and moved on. Plain :invalid matches an
   empty required field from the moment the page loads, so every box on this form
   would greet a first-time visitor already outlined in error colour.
   (The obvious-looking `:not(:placeholder-shown):invalid` guard does not help
   here: with no placeholder attribute, :placeholder-shown never matches, so the
   negation is always true and the rule fires on load anyway.) */
.field input:user-invalid { border-color: var(--primary); }

.field .hint {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* The spam trap in start.html. Off-screen rather than display:none — some bots
   skip hidden fields, and a bot that fills this in is exactly what we want to
   catch. aria-hidden and tabindex="-1" keep it away from real people. */
.signup input[name="_honey"] {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.signup .btn { margin-top: var(--space-2); border: none; cursor: pointer; }

/* ---------- Short pages (thanks.html) ----------
   Every other page here is long enough that the footer lands well below the fold.
   The thank-you page is four lines, so the footer finished mid-window with the
   page ground showing underneath it — it read as though the page had failed to
   load the rest of itself. Pushing the footer to the bottom on a flex column
   fixes it without giving the page filler content it does not need.

   The nav is `position: fixed`, so it is out of flow and unaffected. */
.short-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;   /* svh: excludes mobile browser chrome, so no phantom scroll */
}
.short-page .page-main { flex: 1 0 auto; }
.short-page .foot { flex-shrink: 0; }

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .blocks, .crosslinks { grid-template-columns: minmax(0, 1fr); }
  .page-title { max-width: none; }
  .ask { padding: var(--space-3) var(--space-4); }
  .honesty { padding: var(--space-4); }
  .field-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .field-row .field { margin-bottom: var(--space-3); }

  /* On a phone the thank-you page overflowed by ~19px, which is the worst
     outcome: not a scroll worth having, just enough to make the page twitch and
     the footer sit below the fold. The hero's 96px tail exists to separate it
     from a following section; on a short page there is no following section. */
  .short-page .page-hero { padding-block: var(--space-6) var(--space-6); }
}