/* not-a-fit.html, thank-you.html, privacy.html, terms.html. Loads third,
   after tokens.css and base.css.

   These four pages share one shape — a branded bar, one centered card, a
   plain footer — and none of them has JS that renders classes into the DOM
   (unlike page-landing.css/page-booked.css, which both exist because
   qualifier.js/booked.js do). That is the whole reason this file is shared
   across four pages instead of duplicated per page.

   Same rule as page-landing.css and page-booked.css: no color literal
   appears here. Every color is a var(--token) from tokens.css, or a
   color-mix() of one. */

/* The same load-bearing rule page-landing.css and page-booked.css both
   carry, and it belongs here for the same reason: the UA rule for [hidden]
   is display:none at author-zero specificity, so ANY display declaration
   below would silently defeat it, and a hidden element would render.
   base.css deliberately does not carry it (a shared reset would make it
   invisible at the four places it actually matters), so each page
   stylesheet keeps its own copy. Latent on these four pages today - nothing
   here toggles [hidden] yet - which is exactly when it is cheap to add and
   exactly the state in which the next person adds a display rule above a
   hidden element and cannot work out why it is on screen. */
[hidden]{
  display:none !important;
}

/* ------------------------------------------------------------------- Bar */

.oc-bar{
  background:var(--brand-dk);
  background:linear-gradient(90deg,var(--brand-dk),var(--ink));
  padding-block:.875rem;
}

.oc-logo{
  width:clamp(120px,22vw,152px);
}

/* --------------------------------------------------------------- Section */

.oc-sec{
  padding-block:clamp(2.5rem,7vw,4.5rem);
  min-height:60vh;
  display:flex;
  align-items:center;
}

.oc-wrap{
  width:100%;
}

.oc-card{
  max-width:560px;
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.25rem;
  text-align:center;
  box-shadow:0 24px 60px -28px color-mix(in srgb,var(--brand) 55%,transparent);
}

.oc-eyebrow{
  margin-bottom:-.5rem;
}

.oc-h1{
  max-width:22ch;
  font-size:clamp(1.625rem,1.2rem + 2vw,2.375rem);
}

.oc-body{
  max-width:46ch;
  color:var(--ink-soft);
  font-size:1.0625rem;
}

/* --------------------------------------------------------- Content blocks
   Used on not-a-fit.html to separate "what happens next" (the real next
   action) from a secondary offer, without either one competing visually
   with the headline above them. Plain pages (thank-you, privacy, terms)
   don't need more than one .oc-card and never reach these rules. */

.oc-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.75rem;
  width:100%;
  padding-top:1.25rem;
  border-top:1px solid var(--line);
}

.oc-block-h{
  font-family:var(--display);
  font-weight:800;
  font-size:1.125rem;
  line-height:1.2;
  color:var(--ink);
}

/* Carries .btn from base.css. Deliberately not .btn-primary — this sits
   below a real .btn-primary action (the tel: link in .oc-next) and must
   never compete with it for attention. */
/* Fix round 1: not-a-fit.html's offer CTA has no real destination yet, so it
   ships as a <span aria-disabled="true">, not an <a> — see the comment in
   not-a-fit.html above it. This rule is what stops it from reading as a
   working button by sight too: muted and cursor:not-allowed, and
   pointer-events:none as a second, redundant guarantee that nothing here
   ever responds to a click even though a <span> already has no href to
   navigate to. */
/* ---------------------------------------------------------------- Footer */

.oc-foot{
  padding-block:1.5rem;
  text-align:center;
}

.oc-legal{
  font-size:.8125rem;
  color:var(--muted);
}