/*
  Oppward primitive component classes. Framework-agnostic CSS so any component
  (marketing today, the authenticated app later) can compose the same visual
  language. Pairs with tokens.css. Keep these generic; page/section-specific
  rules belong in the section's own module CSS, not here.
*/

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

@media (min-width: 640px) {
  .container {
    padding-inline: var(--space-8);
  }
}

.container--narrow {
  max-width: var(--content-narrow);
}

/* ---- tonal bands: the editorial alternating-section rhythm -------------- */
.band {
  background: var(--bg);
  color: var(--text);
}

.band--alt {
  background: var(--surface-alt);
  color: var(--text-on-alt);
}

.band--alt .text-muted {
  color: var(--text-on-alt-muted);
}

/* ---- kicker: small bordered label, per BRAND section-header convention --- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--accent);
  border: var(--border-w) solid currentColor;
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
}

.kicker::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ---- buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1;
  /* .btn is applied to both <button> and <a href> elements (CTAs are real
     links, not JS-only buttons) -- without this, an <a class="btn"> picks up
     the browser default underline, which nothing else in this file resets. */
  text-decoration: none;
  padding: 0.95em 1.6em;
  /* Apple HIG minimum tap target (44x44px), independent of the font-size a
     given .btn variant uses -- .btn--ghost/.nav__cta at --fs-xs would
     otherwise render well under 44px tall. */
  min-height: 44px;
  border-radius: var(--radius);
  border: var(--border-w) solid transparent;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--accent);
  color: var(--accent-on-accent);
  box-shadow: var(--shadow-glow);
}

.btn--primary:hover {
  background: var(--accent-strong);
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(69, 168, 98, 0.3), 0 26px 60px -16px rgba(44, 138, 77, 0.55);
}

.btn--primary:active {
  transform: translateY(1px);
  box-shadow: var(--shadow-glow);
}

.btn--secondary {
  /* No explicit color: button already inherits (see base.css button rule),
     which keeps it correct inside a nested white .card in a dark-band
     context. See the h1-h4 comment in base.css for why "own declaration
     beats inherited ancestor" makes this matter. */
  background: transparent;
  border-color: var(--border);
}

.btn--secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--text-muted);
  padding-inline: var(--space-2);
}

.btn--ghost:hover {
  color: var(--accent);
}

.btn--block {
  width: 100%;
}

.btn--lg {
  font-size: var(--fs-base);
  padding: 1.05em 2em;
}

.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ---- form elements ---------------------------------------------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: left;
}

.field__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: var(--ls-snug);
}

.field__hint {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

.field__error {
  font-size: var(--fs-2xs);
  color: var(--alert-strong);
}

.input,
.select,
.textarea {
  width: 100%;
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 0.85em 1em;
  /* 16px, not --fs-sm (15px): iOS Safari auto-zooms the viewport on focus for
     any input under 16px, which then requires the user to manually zoom back
     out. This is the fix, not a viewport meta hack. Also clears the 44px tap
     target with this padding as a side effect. */
  font-size: max(1rem, var(--fs-sm));
  min-height: 44px;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.band--alt .input,
.band--alt .select,
.band--alt .textarea {
  background: #fff;
  border-color: var(--paper-300);
  color: var(--ink-on-paper);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.8;
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--accent);
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--accent);
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

.textarea {
  resize: vertical;
  min-height: 5.5em;
  font-family: inherit;
}

.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 15px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  color: var(--text);
  padding-right: 2.5em;
}

/* ---- chips / choice controls (niche picker, goals multi-select) -------- */
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  position: relative;
}

.chip input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}

.chip__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.7em 1.2em;
  /* min-height, not just padding: the chip's whole tap target is this label
     (the checkbox input is position:absolute; inset:0 over it), so this is
     what has to clear the 44px Apple HIG minimum. */
  min-height: 44px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  transition: all var(--dur-fast) var(--ease-out);
  user-select: none;
}

.chip input:checked + .chip__label {
  background: var(--accent-tint);
  border-color: var(--accent);
  color: var(--accent-strong);
}

.chip input:focus-visible + .chip__label {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---- badges -------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: 0.35em 0.7em;
  border-radius: var(--radius-sm);
  line-height: 1;
}

.badge--set-aside {
  background: var(--accent-tint);
  color: var(--accent-strong);
  border: var(--border-w) solid color-mix(in srgb, var(--accent) 35%, transparent);
}

.badge--deadline {
  background: var(--alert-tint);
  color: var(--alert-strong);
  border: var(--border-w) solid color-mix(in srgb, var(--alert) 35%, transparent);
}

.badge--neutral {
  background: transparent;
  color: var(--text-muted);
  border: var(--border-w) solid var(--border);
}

/* ---- cards -------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.band--alt .card {
  background: #fff;
  border-color: var(--paper-300);
  color: var(--ink-on-paper);
}

.band--alt .card .text-muted {
  color: var(--ink-on-paper-muted);
}

/* ---- dollar figure --------------------------------------------------------- */
.dollar {
  font-family: var(--font-number);
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 700;
  letter-spacing: var(--ls-tight);
}

/* ---- divider ---------------------------------------------------------- */
.hr {
  border: none;
  border-top: var(--border-w) solid var(--border);
}

/* ---- reveal: one-shot fade + rise on mount ------------------------------
   Deliberately NOT IntersectionObserver-gated. An earlier version hid
   below-the-fold sections until scrolled into view, which is correct for a
   real visitor but breaks under any full-page capture that doesn't actually
   scroll (headless QA screenshots, a "print full page" flow, an audit tool)
   -- content sat permanently at opacity:0 because the true viewport/scroll
   position never moved past it. Playing the animation on mount instead (the
   same pattern .hero__copy's "rise" keyframe already uses) means content is
   never gated on an interaction that might not happen; --reveal-delay
   (set inline per element) staggers a group without needing scroll math.
   base.css's global prefers-reduced-motion rule already collapses any
   animation-duration to ~0, so this needs no separate reduced-motion override. */
.reveal {
  animation: rise var(--dur-slow) var(--ease-out) var(--reveal-delay, 0ms) both;
}

/* ---- spotlight: cursor-tracked border highlight, see useSpotlight.ts ---- */
.spotlight {
  position: relative;
  isolation: isolate;
}

.spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    280px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--accent) 55%, transparent),
    transparent 65%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
  z-index: 1;
}

.spotlight:hover::before,
.spotlight:focus-within::before {
  opacity: 1;
}

/* ---- icon badge: the small bordered circle around a niche/section icon -- */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius);
  background: var(--accent-tint);
  color: var(--accent-strong);
  flex-shrink: 0;
}

.icon-badge svg {
  width: 1.4rem;
  height: 1.4rem;
}

.band--alt .icon-badge {
  background: var(--green-200);
  color: var(--green-700);
}

/* ---- ribbon: small overlapping corner label for a highlighted card ------ */
.ribbon {
  position: absolute;
  top: 0;
  right: var(--space-6);
  transform: translateY(-50%);
  background: var(--accent);
  color: var(--accent-on-accent);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
}

/* ---- stat figure: an oversized editorial numeral used as a pull-quote ----
   Used inside .band--alt sections (Problem, Pricing) so it needs the accent
   tuned for that inverted surface, not the theme's primary --accent (see the
   long comment on --accent-on-alt in tokens.css). */
.stat-figure {
  font-family: var(--font-display);
  font-weight: 440;
  font-style: italic;
  line-height: 0.85;
  letter-spacing: var(--ls-tight);
  color: var(--accent-on-alt);
}