/* FormsPal base + component library (Wave 0). Built on tokens.css. Wave-1 agents reuse these classes. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--fp-font); font-size: var(--fp-body); color: var(--fp-text);
  background: var(--fp-white); line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { color: var(--fp-ink); line-height: 1.12; margin: 0 0 .4em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: var(--fp-h1); } h2 { font-size: var(--fp-h2); } h3 { font-size: var(--fp-h3); }
p { margin: 0 0 1em; color: var(--fp-muted); }
a { color: var(--fp-green); text-decoration: none; }
/* height:auto is load-bearing: images carry width/height attributes (CLS), and clamping the
   width without releasing the height squishes them (2026-08-13, three /s/ stock photos). */
img { max-width: 100%; height: auto; display: block; }

.container { max-width: var(--fp-container); margin: 0 auto; padding-inline: var(--fp-gutter); }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; font-weight: 700; color: var(--fp-muted); }
.lede { font-size: 17px; color: var(--fp-muted); max-width: 60ch; }

/* sections (alternating backgrounds, per the Figma) */
.section { padding-block: var(--fp-section-y); }
.section--cream { background: var(--fp-cream); }
.section--sage  { background: var(--fp-sage); }
.section--dark  { background: var(--fp-ink); color: #cdd6d4; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  font-weight: 600; font-size: 15px; padding: 12px 22px; border-radius: var(--fp-radius); border: 1.5px solid transparent;
  transition: filter .15s, background .15s, color .15s; text-decoration: none; }
/* Contrast sweep 2026-07-10: white on --fp-orange was 2.95:1 (fails AA at button sizes).
   Dark ink on the same orange = 5.7:1 and keeps the brand color. */
.btn-cta    { background: var(--fp-orange); color: var(--fp-ink); }      /* primary action */
.btn-cta:hover { background: var(--fp-orange-dark); color: var(--fp-ink); }
.btn-green  { background: var(--fp-green); color: #fff; }       /* sign in / create */
.btn-green:hover { background: var(--fp-green-dark); }
.btn-outline { background: transparent; color: var(--fp-ink); border-color: var(--fp-line); }
.btn-outline:hover { border-color: var(--fp-ink); }
.btn-sm { padding: 8px 14px; font-size: 13.5px; }

/* pill badge (hero) */
.pill { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--fp-line);
  border-radius: var(--fp-radius-pill); padding: 6px 14px; font-size: 13px; color: var(--fp-ink); box-shadow: var(--fp-shadow); }

/* card */
.card { background: #fff; border: 1px solid var(--fp-line); border-radius: var(--fp-radius-lg); padding: 22px;
  box-shadow: var(--fp-shadow); }
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* segmented tabs (green underline active) */
.tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--fp-line); }
.tabs a, .tabs button { background: none; border: none; padding: 12px 18px; font-weight: 600; font-size: 14px;
  color: var(--fp-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs .is-active { color: var(--fp-ink); border-bottom-color: var(--fp-green); }

/* green CTA band ("READY? TRY FOR FREE") */
.cta-band { background: var(--fp-green); color: #fff; border-radius: var(--fp-radius-lg);
  padding: clamp(28px,5vw,52px); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cta-band h2 { color: #fff; margin: 0; }

/* header */
.site-header { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--fp-line); }
.site-header .bar { display: flex; align-items: center; gap: 28px; height: 64px; }
/* width:auto is REQUIRED — the img carries intrinsic width/height attributes for CLS, and
   without a CSS width the width attribute would win (the 2026-07-11 giant-logo regression). */
.site-header .logo img { height: 26px; width: auto; }
.site-header nav { display: flex; gap: 22px; align-items: center; }
.site-header nav a { color: var(--fp-ink); font-weight: 500; font-size: 14.5px; }
.site-header .spacer { flex: 1; }
.site-header .auth { display: flex; align-items: center; gap: 14px; }
.site-header .auth .signup { color: var(--fp-ink); font-weight: 600; font-size: 14.5px; }
/* Mobile: keep the page links reachable — the nav wraps to a compact second row instead of
   disappearing (audit 2026-07-10: display:none left no menu fallback on phones). */
/* Burger toggle — hidden on desktop; the marketing header (funnel/_header.html) wires it.
   The core header has no nav, so these rules are inert there. */
.site-header .nav-toggle { display: none; }
.site-header nav .nav-signin { display: none; }

@media (max-width: 820px) {
  /* Mobile header = ONE row (logo · auth · burger) + a dropdown nav panel (Max, 2026-07-13:
     the earlier wrapped-second-row nav wasn't proper mobile UX). height:auto stays LOAD-BEARING —
     a fixed height made any wrapped row render on top of the page content. */
  .site-header .bar { gap: 12px; height: auto; min-height: 56px; }
  .site-header .logo { margin-right: auto; }
  .site-header .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-left: -4px;
    background: none; border: 1px solid var(--fp-line); border-radius: 8px; cursor: pointer;
  }
  .site-header .nav-toggle__box { display: flex; flex-direction: column; gap: 4px; }
  .site-header .nav-toggle__box span { display: block; width: 16px; height: 2px; border-radius: 2px; background: var(--fp-ink); transition: transform .18s, opacity .18s; }
  .site-header.nav-open .nav-toggle__box span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .site-header.nav-open .nav-toggle__box span:nth-child(2) { opacity: 0; }
  .site-header.nav-open .nav-toggle__box span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .site-header nav { display: none; }
  .site-header.nav-open nav {
    /* sticky positions the header, so the panel anchors to its bottom edge */
    display: flex; flex-direction: column; gap: 0;
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-bottom: 1px solid var(--fp-line);
    box-shadow: 0 16px 28px rgba(7,31,36,.12);
    padding: 4px 20px 8px;
  }
  .site-header.nav-open nav a { padding: 13px 0; font-size: 15px; border-bottom: 1px solid var(--fp-cream); }
  .site-header.nav-open nav a:last-child { border-bottom: 0; }
}
@media (max-width: 480px) {
  /* Very narrow: the bar's Sign in moves into the burger panel to keep one uncramped row. */
  .site-header .auth .signup { display: none; }
  .site-header.nav-open nav .nav-signin { display: block; }
}

/* Keyboard affordance everywhere (audit 2026-07-10: no :focus-visible styles existed). */
:focus-visible { outline: 2px solid var(--fp-green-dark); outline-offset: 2px; }

/* Skip-to-content link — visually hidden until focused. Named .skip-nav, NOT .skip-link:
   dash.css/quiz.css use .skip-link for VISIBLE decline/skip buttons, and this off-screen
   positioning silently hid the upsell's decline option (PRE-39, QA 2026-07-13). */
.skip-nav {
  position: absolute; left: 8px; top: -48px; z-index: 100;
  background: var(--fp-ink); color: #fff; padding: 10px 16px;
  border-radius: 0 0 var(--fp-radius) var(--fp-radius); text-decoration: none;
  transition: top .15s;
}
.skip-nav:focus { top: 0; }

/* footer */
.site-footer { background: var(--fp-ink); color: #9fb0ac; padding-block: 56px 28px; font-size: 14px; }
.site-footer .cols { display: grid; grid-template-columns: repeat(4, 1fr) 1.4fr; gap: 28px; }
/* The marketing footer's 4-column variant — a CLASS, never an inline style: an inline
   grid-template overrode the mobile collapse below and forced 4 columns onto phones
   (page shifted left / footer cut — MKT-11, QA 2026-07-13). */
.site-footer .cols--4 { grid-template-columns: repeat(3, 1fr) 1.4fr; }
@media (max-width: 860px) { .site-footer .cols, .site-footer .cols--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .site-footer .cols, .site-footer .cols--4 { grid-template-columns: 1fr; } }
.site-footer h4 { color: #fff; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 12px; }
.site-footer a { color: #9fb0ac; display: block; padding: 4px 0; }
.site-footer a:hover { color: #fff; }
.site-footer .legal { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--fp-line-dark); font-size: 12px; color: #7d908c; }

/* MKT-07 (QA 2026-07-27): the decorative footer wordmark wrapped mid-word on narrow screens
   (clamp bottomed out at 88px, wider than a phone). Never wrap it; let the ends clip instead —
   the bottom-edge bleed is the intended design. (Overrides vendor shared-frame.css, which
   loads after this file, via the extra `div` in the selector.) */
.site-foot div.foot-ghost { white-space: nowrap; overflow: hidden; font-size: clamp(48px, 13vw, 190px); overflow-wrap: normal; }