/* ============================================================================
 * 1vsM Platform — Marketing Showcase stylesheet                [Marketing-Site]
 * Pairs with platform/site/index.php + platform/site/assets/landing.js.
 * ----------------------------------------------------------------------------
 * Mobile-first. 320px is the baseline; 375px/768px/1024px are checked
 * ADDITIONS layered on with min-width media queries, never a rewrite.
 * Everything below is verified BY CONSTRUCTION (relative units + flex/grid +
 * max-width:100%, no live browser this session) — nobody should read a
 * device-tested claim into this file; there isn't one.
 *
 * 320px  — .pf-container has no fixed widths (max-width + fluid padding via
 *          clamp()); .pf-grid is a single column; .pf-nav wraps via
 *          flex-wrap; .pf-table-wrap is the overflow-x:auto safety net so
 *          the 5-column terminology table can never force page-level
 *          horizontal scroll.
 * 375px  — same layout, more breathing room inside the same clamp() ranges.
 * 768px  — `@media (min-width:48rem)` promotes .pf-grid--4 to 2 columns and
 *          .pf-grid--2 stays 2 columns; .pf-nav sits on one row.
 * 1024px — `@media (min-width:64rem)` promotes .pf-grid--4 to 4 columns and
 *          widens .pf-container.
 *
 * Touch targets  — .pf-btn and .pf-nav-toggle set min-height/min-width:44px.
 * Fixed header   — .pf-header is `position:sticky; top:0`; #main carries
 *                  padding-top >= 5rem (5.5rem) so content never sits under
 *                  it even if a future edit switches it to `position:fixed`.
 * Font sizes     — body copy 1rem (16px) baseline, never below 0.875rem
 *                  (14px). No <input>/<select> exist on this page (no
 *                  forms), so the "inputs >=16px" rule has no surface here.
 * Button states  — every .pf-btn defines default / :hover / :active /
 *                  :disabled (4 states, CONTRACT minimum) plus
 *                  :focus-visible. There is no disabled CTA in the markup
 *                  today, but the state is defined so any future button
 *                  variant inherits it for free.
 * Dark mode      — depth comes from --pf-bg-elevated (a lighter surface
 *                  layered over --pf-bg) and gradients, never from
 *                  box-shadow. Shadows are reserved for the light scheme
 *                  only and stay low-opacity/high-blur per the network UI
 *                  rubric. Overlays (the dogfood strip's dark band) use a
 *                  gradient, never a flat scrim.
 * Tokens         — every var() below carries a literal fallback so this file
 *                  survives even if no site-wide token sheet is ever linked
 *                  (three competing token vocabularies exist network-wide;
 *                  this file assumes none of them and depends on none of
 *                  them). Palette follows the warm-gold "premium" tone used
 *                  in platform/assets/css/portal.css (the other customer-
 *                  facing surface this page links to).
 * ==========================================================================*/

*, *::before, *::after { box-sizing: border-box; }

:root {
  /* Brand-neutral surface tokens (light default) — mirrors portal.css tone */
  --pf-bg:            #F8F7F5;
  --pf-bg-elevated:   #FFFFFF;
  --pf-bg-sunken:     #F0EEEA;
  --pf-fg:            #16171A;
  --pf-fg-muted:      #55585F;
  --pf-border:        #E1DED6;
  --pf-accent:        #B8862B;   /* warm gold — matches portal.css */
  --pf-accent-fg:     #1A1400;
  --pf-accent-soft:   #F1E4C6;
  --pf-accent-hover:  #A2761F;
  --pf-accent-active: #8C6519;
  --pf-success:       #1E7B45;
  --pf-success-bg:    #E4F3E9;
  --pf-danger:        #B3261E;
  --pf-focus-ring:    #2E6BE6;
  --pf-radius-sm:     0.5rem;
  --pf-radius-md:     0.875rem;
  --pf-radius-lg:     1.25rem;
  --pf-radius-xl:     1.75rem;
  --pf-shadow-card:   0 1px 2px rgba(20,20,25,0.05), 0 10px 28px rgba(20,20,25,0.07);
  --pf-space-1: 0.25rem;
  --pf-space-2: 0.5rem;
  --pf-space-3: 0.75rem;
  --pf-space-4: 1rem;
  --pf-space-5: 1.5rem;
  --pf-space-6: 2.5rem;
  --pf-space-7: 4rem;
  --pf-dark-bg:        #0B0B0D;   /* the dogfood strip's own permanent "dark band" */
  --pf-dark-bg-elev:   #1B1C20;
  --pf-dark-fg:        #F3F3F5;
  --pf-dark-fg-muted:  #B7B4AA;
  --pf-dark-border:    #33322C;
}

@media (prefers-color-scheme: dark) {
  :root {
    --pf-bg:          #0B0B0D;
    --pf-bg-elevated: #1B1C20;   /* depth via elevation, not shadow */
    --pf-bg-sunken:   #141417;
    --pf-fg:          #F3F3F5;
    --pf-fg-muted:    #A7A9B1;
    --pf-border:      #2E3038;
    --pf-accent:      #E3B75C;
    --pf-accent-fg:   #1A1400;
    --pf-accent-soft: #3A2F14;
    --pf-accent-hover: #EFC978;
    --pf-accent-active:#D6A63F;
    --pf-success:     #6FDB94;
    --pf-success-bg:  #123822;
    --pf-danger:      #FF8880;
    --pf-focus-ring:  #7FB0FF;
    --pf-shadow-card: none;      /* no shadows in dark mode — elevation only */
  }
}

/* Explicit theme override hooks (future in-app theme toggle, matches
   admin-calendar.css's data-theme convention) */
:root[data-theme="dark"] {
  --pf-bg: #0B0B0D; --pf-bg-elevated: #1B1C20; --pf-bg-sunken: #141417;
  --pf-fg: #F3F3F5; --pf-fg-muted: #A7A9B1; --pf-border: #2E3038;
  --pf-accent: #E3B75C; --pf-accent-fg: #1A1400; --pf-shadow-card: none;
}
:root[data-theme="light"] {
  --pf-bg: #F8F7F5; --pf-bg-elevated: #FFFFFF; --pf-bg-sunken: #F0EEEA;
  --pf-fg: #16171A; --pf-fg-muted: #55585F; --pf-border: #E1DED6;
  --pf-accent: #B8862B; --pf-accent-fg: #1A1400;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--pf-bg, #F8F7F5);
  color: var(--pf-fg, #16171A);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1rem;      /* 16px baseline, never below 14px */
  line-height: 1.6;
  overflow-x: hidden;    /* belt-and-braces: nothing here should ever need it */
}

a { color: inherit; }
img, svg { max-width: 100%; height: auto; display: block; }
code { font-size: 0.875em; background: var(--pf-bg-sunken, #F0EEEA); padding: 0.05em 0.4em; border-radius: 0.3em; }

.pf-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.pf-skip-link {
  position: absolute;
  left: 0.5rem;
  top: -3rem;
  z-index: 100;
  background: var(--pf-accent, #B8862B);
  color: var(--pf-accent-fg, #1A1400);
  padding: 0.75rem 1rem;
  border-radius: var(--pf-radius-sm, 0.5rem);
  font-weight: 700;
  transition: top 0.15s ease;
}
.pf-skip-link:focus { top: 0.5rem; }

[hidden] { display: none !important; }

.pf-container {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 var(--pf-space-4, 1rem);
}

/* ---------------------------------------------------------------- header */

.pf-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--pf-bg-elevated, #FFFFFF);
  border-bottom: 1px solid var(--pf-border, #E1DED6);
}

.pf-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pf-space-3, 0.75rem);
  padding: var(--pf-space-3, 0.75rem) var(--pf-space-4, 1rem);
  flex-wrap: wrap;
}

.pf-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--pf-fg, #16171A);
}
.pf-brand small {
  font-weight: 500;
  color: var(--pf-fg-muted, #55585F);
  margin-left: 0.25rem;
}
.pf-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--pf-radius-sm, 0.5rem);
  background: var(--pf-accent, #B8862B);
  color: var(--pf-accent-fg, #1A1400);
  font-weight: 800;
  font-size: 0.75rem;
  flex: none;
}

.pf-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pf-space-2, 0.5rem) var(--pf-space-4, 1rem);
  font-weight: 600;
  font-size: 0.9375rem;
}
.pf-nav a:not(.pf-btn) {
  text-decoration: none;
  color: var(--pf-fg-muted, #55585F);
  padding: 0.625rem 0.25rem;      /* generous tap padding, helps clear 44px */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.pf-nav a:not(.pf-btn):hover,
.pf-nav a:not(.pf-btn):focus-visible { color: var(--pf-fg, #16171A); }
.pf-nav a:focus-visible {
  outline: 3px solid var(--pf-focus-ring, #2E6BE6);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

/* Hidden by default in markup (progressive enhancement — landing.js removes
   [hidden] only on narrow viewports; without JS this button never appears
   and .pf-nav is always fully visible/usable). */
.pf-nav-toggle {
  appearance: none;
  border: 1px solid var(--pf-border, #E1DED6);
  background: var(--pf-bg-elevated, #FFFFFF);
  color: var(--pf-fg, #16171A);
  border-radius: var(--pf-radius-sm, 0.5rem);
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.pf-nav-toggle:hover { background: var(--pf-bg, #F8F7F5); }
.pf-nav-toggle:active { transform: scale(0.96); }
.pf-nav-toggle:focus-visible {
  outline: 3px solid var(--pf-focus-ring, #2E6BE6);
  outline-offset: 2px;
}
.pf-nav-toggle[hidden] { display: none; }

/* ------------------------------------------------------------------ main */

.pf-main {
  padding-top: 5.5rem; /* >= CONTRACT's 5rem floor under the sticky header */
}

/* ------------------------------------------------------------------ type */

.pf-eyebrow {
  margin: 0 0 var(--pf-space-2, 0.5rem);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pf-accent, #B8862B);
}
.pf-eyebrow--on-dark { color: var(--pf-accent, #E3B75C); }

.pf-h2 {
  margin: 0 0 var(--pf-space-4, 1rem);
  font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.375rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
  max-width: 42rem;
}
.pf-h2--on-dark { color: var(--pf-dark-fg, #F3F3F5); }

.pf-lede {
  margin: 0 0 var(--pf-space-6, 2.5rem);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  color: var(--pf-fg-muted, #55585F);
  max-width: 42rem;
}
.pf-lede--on-dark { color: var(--pf-dark-fg-muted, #B7B4AA); }

.pf-caption {
  margin-top: var(--pf-space-4, 1rem);
  font-size: 0.875rem;
  color: var(--pf-fg-muted, #55585F);
}

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

.pf-hero {
  padding: var(--pf-space-7, 4rem) 0 var(--pf-space-6, 2.5rem);
  background:
    radial-gradient(ellipse at top left, color-mix(in srgb, var(--pf-accent, #B8862B) 14%, transparent), transparent 60%),
    var(--pf-bg, #F8F7F5);
}

.pf-hero__inner { max-width: 46rem; }

.pf-hero__title {
  margin: 0 0 var(--pf-space-4, 1rem);
  font-size: clamp(2rem, 1.5rem + 3.4vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.pf-hero__sub {
  margin: 0 0 var(--pf-space-5, 1.5rem);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  color: var(--pf-fg-muted, #55585F);
  max-width: 40rem;
}

.pf-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-space-3, 0.75rem);
  margin-bottom: var(--pf-space-4, 1rem);
}

.pf-hero__proof a {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--pf-fg-muted, #55585F);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.pf-hero__proof a:hover,
.pf-hero__proof a:focus-visible { color: var(--pf-accent, #B8862B); }

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

.pf-section {
  padding: var(--pf-space-7, 4rem) 0;
}
.pf-section--alt {
  background: var(--pf-bg-sunken, #F0EEEA);
}

/* --------------------------------------------------------------- grid(s) */

.pf-grid {
  display: grid;
  grid-template-columns: 1fr;      /* 320px/375px: single column, no overflow */
  gap: var(--pf-space-4, 1rem);
}

@media (min-width: 48rem) { /* 768px */
  .pf-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .pf-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) { /* 1024px */
  .pf-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ------------------------------------------------------------ card types */

.pf-feature-card,
.pf-surface-card {
  background: var(--pf-bg-elevated, #FFFFFF);
  border: 1px solid var(--pf-border, #E1DED6);
  border-radius: var(--pf-radius-lg, 1.25rem);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  box-shadow: var(--pf-shadow-card, none);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pf-feature-card__icon,
.pf-surface-card .pf-feature-card__icon {
  color: var(--pf-accent, #B8862B);
  margin-bottom: 0.25rem;
  line-height: 1;             /* icon box matches the line-height it sits in */
}

.pf-feature-card h3,
.pf-surface-card h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.pf-feature-card p,
.pf-surface-card p {
  margin: 0;
  color: var(--pf-fg-muted, #55585F);
  font-size: 0.9375rem;
}

.pf-surface-card__kicker {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pf-fg-muted, #55585F);
}

.pf-surface-card__link {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--pf-accent, #B8862B);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.pf-surface-card__link:hover,
.pf-surface-card__link:focus-visible { text-decoration: underline; }
.pf-surface-card__link:focus-visible {
  outline: 3px solid var(--pf-focus-ring, #2E6BE6);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

/* ----------------------------------------------------------- recovery ledger */

.pf-ledger {
  margin-top: var(--pf-space-6, 2.5rem);
  max-width: 34rem;
  background: var(--pf-bg-elevated, #FFFFFF);
  border: 1px solid var(--pf-border, #E1DED6);
  border-radius: var(--pf-radius-lg, 1.25rem);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: var(--pf-shadow-card, none);
}

.pf-ledger__eyebrow {
  margin: 0 0 var(--pf-space-3, 0.75rem);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pf-fg-muted, #55585F);
}

.pf-ledger__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pf-ledger__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pf-space-3, 0.75rem);
  padding: 0.5rem 0;
  border-top: 1px solid var(--pf-border, #E1DED6);
  font-size: 0.9375rem;
}
.pf-ledger__list li:first-child { border-top: none; }
.pf-ledger__list small { color: var(--pf-fg-muted, #55585F); font-weight: 400; }
.pf-ledger__list strong { font-weight: 700; white-space: nowrap; }

.pf-ledger__total,
.pf-ledger__assisted {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--pf-space-3, 0.75rem);
  padding-top: var(--pf-space-3, 0.75rem);
  margin-top: var(--pf-space-2, 0.5rem);
  border-top: 2px solid var(--pf-border, #E1DED6);
  font-weight: 800;
}
.pf-ledger__total strong { color: var(--pf-success, #1E7B45); font-size: 1.125rem; }
.pf-ledger__assisted {
  border-top-style: dashed;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--pf-fg-muted, #55585F);
}

.pf-ledger__note {
  margin: var(--pf-space-3, 0.75rem) 0 0;
  font-size: 0.8125rem;
  color: var(--pf-fg-muted, #55585F);
}
.pf-ledger__note a { color: var(--pf-accent, #B8862B); font-weight: 600; }

/* -------------------------------------------------------------- table(s) */

.pf-table-wrap {
  overflow-x: auto;                 /* the table scrolls HERE, never the page */
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--pf-border, #E1DED6);
  border-radius: var(--pf-radius-md, 0.875rem);
  background: var(--pf-bg-elevated, #FFFFFF);
}

.pf-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;                 /* forces the wrap's scroller below 768px */
  font-size: 0.9375rem;
}
.pf-table th,
.pf-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--pf-border, #E1DED6);
  white-space: nowrap;
}
.pf-table thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pf-fg-muted, #55585F);
  background: var(--pf-bg-sunken, #F0EEEA);
}
.pf-table tbody th { font-weight: 700; }
.pf-table tbody tr:last-child td,
.pf-table tbody tr:last-child th { border-bottom: none; }

@media (min-width: 48rem) {
  .pf-table { min-width: 0; }
}

/* -------------------------------------------------------------- buttons
 * Every .pf-btn defines 4 states: default, :hover, :active, :disabled, plus
 * :focus-visible. Minimum touch target 44x44 regardless of content length. */

.pf-btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--pf-radius-md, 0.875rem);
  min-height: 44px;
  min-width: 44px;
  padding: 0.75rem 1.375rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: transform 0.08s ease, background-color 0.12s ease, filter 0.12s ease, opacity 0.12s ease;
}
.pf-btn svg { width: 1.125em; height: 1.125em; }

.pf-btn:focus-visible {
  outline: 3px solid var(--pf-focus-ring, #2E6BE6);
  outline-offset: 2px;
}

.pf-btn--primary {
  background: var(--pf-accent, #B8862B);
  color: var(--pf-accent-fg, #1A1400);
}
.pf-btn--primary:hover   { background: var(--pf-accent-hover, #A2761F); }
.pf-btn--primary:active  { background: var(--pf-accent-active, #8C6519); transform: scale(0.98); }
.pf-btn--primary:disabled,
.pf-btn--primary[aria-disabled="true"] {
  background: var(--pf-border, #E1DED6);
  color: var(--pf-fg-muted, #55585F);
  cursor: not-allowed;
  transform: none;
}

.pf-btn--secondary {
  background: transparent;
  border-color: var(--pf-border, #E1DED6);
  color: var(--pf-fg, #16171A);
}
.pf-btn--secondary:hover  { background: var(--pf-bg-sunken, #F0EEEA); }
.pf-btn--secondary:active { transform: scale(0.98); }
.pf-btn--secondary:disabled {
  color: var(--pf-fg-muted, #55585F);
  border-color: var(--pf-border, #E1DED6);
  cursor: not-allowed;
  transform: none;
}

.pf-btn--lg { padding: 0.875rem 1.75rem; font-size: 1.0625rem; }
.pf-btn--sm { min-height: 44px; padding: 0.5rem 1rem; font-size: 0.875rem; }

/* Dogfood strip's dark band needs its own button skin so contrast holds
   against --pf-dark-bg regardless of the light/dark scheme the OS picked. */
.pf-dogfood .pf-btn--secondary {
  border-color: var(--pf-dark-border, #33322C);
  color: var(--pf-dark-fg, #F3F3F5);
}
.pf-dogfood .pf-btn--secondary:hover { background: var(--pf-dark-bg-elev, #1B1C20); }
.pf-dogfood .pf-btn--secondary small { color: var(--pf-dark-fg-muted, #B7B4AA); font-weight: 500; }

/* ---------------------------------------------------------- dogfood strip
 * Overlay/emphasis band uses a gradient (never a flat scrim) per the UI
 * rubric; permanently dark regardless of OS scheme, so it reads as its own
 * "we live here" moment on the page. */

.pf-dogfood {
  background:
    linear-gradient(160deg, var(--pf-dark-bg-elev, #1B1C20) 0%, var(--pf-dark-bg, #0B0B0D) 70%);
  color: var(--pf-dark-fg, #F3F3F5);
}

.pf-dogfood__inner { max-width: 44rem; }

.pf-dogfood__stat {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--pf-space-3, 0.75rem);
  margin: 0 0 var(--pf-space-5, 1.5rem);
  padding: var(--pf-space-4, 1rem) var(--pf-space-5, 1.5rem);
  border: 1px solid var(--pf-dark-border, #33322C);
  border-radius: var(--pf-radius-lg, 1.25rem);
  background: rgba(255,255,255,0.03);
}
.pf-dogfood__stat strong {
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);
  font-weight: 800;
  color: var(--pf-accent, #E3B75C);
  line-height: 1;
}
.pf-dogfood__stat span { font-size: 0.9375rem; }
.pf-dogfood__stat small {
  display: block;
  color: var(--pf-dark-fg-muted, #B7B4AA);
  font-size: 0.8125rem;
  margin-top: 0.125rem;
}

.pf-dogfood__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-space-3, 0.75rem);
}

/* --------------------------------------------------------------- footer */

.pf-footer {
  text-align: center;
  padding: var(--pf-space-6, 2.5rem) var(--pf-space-4, 1rem);
  color: var(--pf-fg-muted, #55585F);
  font-size: 0.8125rem;
  background: var(--pf-bg, #F8F7F5);
  border-top: 1px solid var(--pf-border, #E1DED6);
}
.pf-footer strong { color: var(--pf-fg, #16171A); }