/* ==========================================================================
   Plan Ahead - Business Backup Bootcamp (Spire Consulting Services)
   Hand-authored static site. No build step, no framework.
   Design system inherited from spirecs.com: Geist, Spire red, paper/ink
   neutrals, 14px surfaces with pill interactives, restrained reveal motion.
   Section vocabulary (numbered steps, sticky aside, details FAQ) follows
   outspokenimprov.com, restated in the Spire palette.
   ========================================================================== */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/geist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- tokens ------------------------------------------------------------- */

:root {
  /* States that this page themes itself for both schemes. Media queries alone
     do not: they style the page but never tell the UA, so native controls,
     scrollbars, and the text caret keep light chrome on the dark scheme, and
     Chromium's algorithmic darkening (Android WebView, Chrome's "Dark theme
     for web content") still treats the page as a light-only document it may
     invert, which would flip the white .aac-mark plate dark and hide the
     logo's black wordmark. */
  color-scheme: light dark;

  /* One accent, locked for the whole page. Values are the spirecs.com brand
     set: #c92512 is 5.0:1 on --paper-2, 5.36:1 on --paper, white on it 5.59:1. */
  --accent: #c92512;
  --accent-ink: #a01b0b;
  --accent-wash: #fdefec;

  --paper: #fbfaf9;
  --paper-2: #f4f2ef;
  --ink: #17161a;
  --ink-2: #3f3d45;
  --ink-3: #6c6975;
  --rule: #e3dfdb;
  /* Form control boundaries need WCAG 2.2 SC 1.4.11 non-text contrast (3:1),
     which --rule does not meet. 3.25:1 on --paper. */
  --field-border: #8f8a90;

  --radius: 14px;
  --radius-sm: 10px;
  --shell: 1180px;
  --measure: 62ch;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow: 0 1px 2px rgb(23 22 26 / 0.04), 0 12px 32px -12px rgb(23 22 26 / 0.14);
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #ff6a4d;
    --accent-ink: #ff8a72;
    --accent-wash: #2a1a16;

    --paper: #121116;
    --paper-2: #1a191f;
    --ink: #f3f1ef;
    --ink-2: #c8c4cd;
    --ink-3: #96929e;
    --rule: #2b2933;
    --field-border: #6b6875;

    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 12px 32px -12px rgb(0 0 0 / 0.55);
  }
}

/* --- reset -------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p,
figure,
blockquote,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--accent);
  color: #fff;
}

@media (prefers-color-scheme: dark) {
  ::selection {
    color: #1a0d09;
  }
}

/* --- primitives --------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 20px;
}

.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex: none;
}

.skip {
  position: fixed;
  left: 20px;
  top: -3rem;
  z-index: 100;
  padding: 0.6875rem 1.125rem;
  background: var(--accent);
  color: #fff;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 600;
  transition: top 0.2s var(--ease);
}

.skip:focus-visible {
  top: 0;
}

/* Dark mode lightens --accent to #ff6a4d, where white text is only 2.83:1.
   Same override the primary button uses. */
@media (prefers-color-scheme: dark) {
  .skip {
    color: #1a0d09;
  }
}

section {
  padding-block: clamp(4.5rem, 9vw, 8rem);
}

h2 {
  font-size: clamp(1.9rem, 4vw, 2.85rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  max-width: 24ch;
}

h3 {
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  color: var(--ink-2);
  max-width: var(--measure);
}

.sect__head {
  max-width: 46rem;
  margin-bottom: 3rem;
}

.sect__head h2 {
  margin-bottom: 1rem;
}

/* A one-line sideways exit under a section's lede, for the visitor the section's
   main path does not fit. */
.sect__aside {
  margin-top: 1rem;
}

.nowrap {
  white-space: nowrap;
}

/* buttons: one radius system, pill for interactive */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  padding: 0.8125rem 1.375rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease),
    color 0.25s var(--ease), transform 0.12s var(--ease);
}

.btn .icon {
  font-size: 1.0625em;
}

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

.btn--primary {
  background: var(--accent);
  color: #fff;
}

.btn--primary:hover {
  background: var(--accent-ink);
}

@media (prefers-color-scheme: dark) {
  .btn--primary {
    color: #1a0d09;
  }
}

.btn--ghost {
  border-color: var(--rule);
  color: var(--ink);
  background: transparent;
}

.btn--ghost:hover {
  border-color: var(--ink-3);
  background: var(--paper-2);
}

/* On a tinted panel the ghost border must sit against the wash, not the page. */
.card--tint .btn--ghost:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.tlink {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--accent);
  transition: gap 0.25s var(--ease);
}

.tlink .icon {
  font-size: 1.0625em;
}

.tlink:hover {
  gap: 0.75rem;
}

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

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 68px;
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rule);
}

.masthead .shell {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-right: auto;
}

.brand img {
  width: 26px;
  height: 26px;
}

/* Below this width the wordmark would wrap beside the CTA, and the program
   name is already the H1 immediately below, so the mark carries it alone. */
.brand span {
  display: none;
  white-space: nowrap;
}

@media (min-width: 560px) {
  .brand span {
    display: inline;
  }
}

.navlinks {
  display: none;
  align-items: center;
  gap: 1.75rem;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.navlinks a:hover {
  color: var(--ink);
}

.masthead .btn {
  padding: 0.5625rem 1.0625rem;
  font-size: 0.875rem;
}

@media (min-width: 900px) {
  .navlinks {
    display: flex;
  }
}

/* --- hero: asymmetric split -------------------------------------------- */

.hero {
  padding-top: clamp(2.75rem, 5vw, 5.5rem);
  padding-bottom: clamp(3.5rem, 6vw, 6rem);
}

.hero__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.hero h1 {
  margin: 0 0 1.125rem;
  font-size: clamp(2.5rem, 6.4vw, 4.25rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.hero h1 .cred {
  color: var(--accent);
}

.hero .lede {
  max-width: 38ch;
  font-size: clamp(1.125rem, 1.8vw, 1.3125rem);
  line-height: 1.5;
  color: var(--ink-2);
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--accent);
}

.hero__facts li {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.hero__shot img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

@media (min-width: 880px) {
  .hero__grid {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

/* --- risk: editorial stack --------------------------------------------- */

.risk {
  background: var(--paper-2);
  border-block: 1px solid var(--rule);
}

.risk__inner {
  max-width: 44rem;
}

.risk h2 {
  margin-bottom: 1.5rem;
  max-width: 30ch;
}

.risk p {
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  color: var(--ink-2);
}

.risk p + p {
  margin-top: 1.125rem;
}

.callout {
  display: grid;
  gap: 0.5rem;
  margin-top: 2.5rem;
  padding: 1.5rem 1.625rem;
  background: var(--accent-wash);
  border-radius: var(--radius);
}

.callout .callout__label {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  font-weight: 600;
  color: var(--accent-ink);
}

.callout p {
  font-size: 1.0625rem;
  color: var(--ink);
  margin: 0;
}

/* --- curriculum: numbered steps plus sticky aside ---------------------- */

.weeks__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: start;
}

.steps {
  counter-reset: step;
  display: grid;
}

.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 1.25rem;
  padding-block: 1.625rem;
  border-top: 1px solid var(--rule);
}

.step::before {
  content: counter(step, decimal-leading-zero);
  padding-top: 0.1875rem;
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--accent);
}

.step h3 {
  margin-bottom: 0.375rem;
}

.step p {
  font-size: 0.9375rem;
  color: var(--ink-2);
  max-width: 56ch;
}

.aside-panel {
  display: grid;
  gap: 1.125rem;
  padding: clamp(1.75rem, 3vw, 2.25rem);
  background: var(--accent-wash);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: var(--radius);
}

.aside-panel h3 {
  max-width: 24ch;
}

.aside-panel p {
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.aside-panel .promise {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 24ch;
}

.card__icon {
  display: grid;
  place-items: center;
  width: 2.625rem;
  height: 2.625rem;
  border-radius: var(--radius-sm);
  background: var(--accent-wash);
  color: var(--accent-ink);
  font-size: 1.3125rem;
}

.aside-panel .card__icon {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

@media (min-width: 900px) {
  .weeks__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
  }

  .aside-panel {
    position: sticky;
    top: 92px;
  }
}

/* --- details: two-card bento ------------------------------------------- */

.details {
  background: var(--paper-2);
  border-block: 1px solid var(--rule);
}

.bento {
  display: grid;
  gap: 1.125rem;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.75rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.card p {
  color: var(--ink-2);
  font-size: 0.9375rem;
  max-width: 48ch;
}

.card__points {
  display: grid;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.card__points li {
  display: flex;
  gap: 0.5625rem;
}

.card__points .icon {
  margin-top: 0.3125rem;
  font-size: 0.875rem;
  color: var(--accent);
}

.card--tint {
  background: var(--accent-wash);
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
}

.card--tint .card__icon {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.specs {
  display: grid;
  gap: 0.875rem;
  font-size: 0.9375rem;
}

.specs > div {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.75rem;
  align-items: start;
}

.specs .icon {
  margin-top: 0.3125rem;
  color: var(--accent);
  font-size: 1rem;
}

.specs dt {
  font-weight: 600;
  color: var(--ink);
}

.specs dd {
  margin: 0;
  color: var(--ink-2);
}

.note {
  display: grid;
  gap: 0.375rem;
  margin-top: auto;
  padding: 0.875rem 1rem;
  background: var(--accent-wash);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: var(--ink-2);
}

.note__label {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  font-weight: 600;
  color: var(--accent-ink);
}

@media (min-width: 760px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- proof: scenario quotes -------------------------------------------- */

.proof__grid {
  display: grid;
  gap: 1.125rem;
}

.proof figure {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.75rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.proof .icon-quote {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--accent);
}

.proof blockquote {
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.proof figcaption {
  margin-top: auto;
  padding-top: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}

@media (min-width: 820px) {
  .proof__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- audience: paired qualifier panels ---------------------------------- */

.fit {
  background: var(--paper-2);
  border-block: 1px solid var(--rule);
}

/* Two panels rather than bare lists: without the photo that previously filled
   the right column, unbounded text on the tinted band loses its edges. */
.fit__lists {
  display: grid;
  gap: 1.125rem;
}

.fit__col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.75rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.fit h3 {
  margin-bottom: 0;
}

.fit__list {
  display: grid;
  gap: 0.6875rem;
  font-size: 0.9375rem;
}

.fit__list li {
  display: flex;
  gap: 0.625rem;
  color: var(--ink-2);
}

.fit__list .icon {
  margin-top: 0.25rem;
  color: var(--accent);
  font-size: 1rem;
}

.fit__list b {
  color: var(--ink);
  font-weight: 600;
}

@media (min-width: 760px) {
  .fit__lists {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- faq ---------------------------------------------------------------- */

.faq__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.faq details {
  border-bottom: 1px solid var(--rule);
}

.faq details:first-of-type {
  border-top: 1px solid var(--rule);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 0.125rem;
  list-style: none;
  cursor: pointer;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--ink);
  transition: color 0.25s var(--ease);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary:hover {
  color: var(--accent);
}

.faq summary .icon {
  font-size: 1.125rem;
  color: var(--accent);
  transition: transform 0.4s var(--ease);
}

.faq details[open] summary .icon {
  transform: rotate(180deg);
}

.faq .answer {
  padding: 0 0.125rem 1.5rem;
  font-size: 0.9375rem;
  color: var(--ink-2);
  max-width: 62ch;
}

/* A FAQ answer can end in an outbound link. `.tlink` is inline-flex, so it needs
   its own gap from the paragraph above it. */
.faq .answer .tlink {
  margin-top: 0.875rem;
}

@media (min-width: 900px) {
  .faq__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  }

  .faq .sect__head {
    margin-bottom: 0;
  }
}

/* --- instructor: split with portrait ------------------------------------ */

.team {
  background: var(--paper-2);
  border-block: 1px solid var(--rule);
}

.team__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.team h2 {
  margin-bottom: 1.375rem;
}

.team p {
  color: var(--ink-2);
  max-width: 54ch;
}

.team p + p {
  margin-top: 1.0625rem;
}

.creds {
  display: grid;
  gap: 0.6875rem;
  margin-top: 1.875rem;
  font-size: 0.9375rem;
}

.creds li {
  display: flex;
  gap: 0.625rem;
  color: var(--ink-2);
}

.creds .icon {
  margin-top: 0.25rem;
  color: var(--accent);
  font-size: 1rem;
}

.team__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-top: 1.75rem;
}

.team figure {
  margin: 0;
}

.team figure img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

@media (min-width: 880px) {
  .team__grid {
    grid-template-columns: 1fr 0.72fr;
  }
}

/* --- cohorts and announcements ------------------------------------------ */

.next__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

/* The panel stacks under the cohort list at every width, so it takes a measure
   cap instead of the shell's full 1180px: an email field stretched that wide
   reads as a search bar. On /ask-a-cpa the .start__grid column does the same job. */
.next .panel {
  max-width: 40rem;
}

.events {
  display: grid;
  gap: 1rem;
}

/* A scheduled cohort renders as an .event; with none on the calendar the same
   list shows a single .event--empty. Both keep the section's shape. */
.event {
  display: grid;
  gap: 1.25rem;
  padding: 1.625rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.event__when {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--accent);
}

.event h3 {
  margin-bottom: 0.4375rem;
}

.event__meta {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.9375rem;
  color: var(--ink-3);
}

.event > div > p:not([class]) {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  color: var(--ink-2);
  max-width: 56ch;
}

.event__side {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.event--empty {
  background: var(--accent-wash);
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
}

.event--empty .card__icon {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.event--empty p {
  font-size: 0.9375rem;
  color: var(--ink-2);
  max-width: 52ch;
}

@media (min-width: 820px) {
  .event:not(.event--empty) {
    grid-template-columns: 1fr minmax(240px, 0.48fr);
    align-items: center;
  }
}

.price {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
}

.price b {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.price span {
  font-size: 0.9375rem;
  color: var(--ink-3);
}

/* --- announcements panel and form --------------------------------------- */

.panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.75rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.panel p {
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.form {
  display: grid;
  gap: 1.125rem;
}

/* A submit button that is a direct grid child would otherwise stretch the full
   column. Pills are sized to their label everywhere else on the site. */
.form > .btn {
  justify-self: start;
}

.field {
  display: grid;
  gap: 0.4375rem;
}

.field label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.6875rem 0.875rem;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

/* Placeholder must clear AA against the input background, not sit at 3:1. */
.field ::placeholder {
  color: var(--ink-3);
  opacity: 1;
}

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

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.field__err {
  display: none;
  font-size: 0.8125rem;
  color: var(--accent-ink);
}

.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea,
.field.is-invalid .rating label {
  border-color: var(--accent-ink);
}

.field.is-invalid .field__err {
  display: block;
}

/* A label-shaped caption for control groups that have no single <label>. */
.field__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
}

/* Sits under a .field__label to qualify a control group in one short line. */
.field__hint {
  margin-top: -0.25rem;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

/* A <fieldset> needs its UA border, padding, and min-width cleared before the
   .field grid applies, and a <legend> carries 2px of UA inline padding that
   would push the caption out of line with every other field label. */
.field--picks {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.field--picks legend {
  padding: 0;
}

.field textarea {
  min-height: 7rem;
  resize: vertical;
}

/* Caret is the #i-caret-down path from the sprite, inlined because a
   background-image cannot reference a <symbol>. #6c6975 clears 3:1 against
   both --paper and the dark --paper, so one value serves both schemes. */
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%236c6975'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.75rem;
  padding-right: 2.25rem;
}

.field--check {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.625rem;
}

.field--check input {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.15rem;
  padding: 0;
  accent-color: var(--accent);
}

.field--check label {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--ink-2);
}

/* Rating: pills wrapping a visually present but transparent radio, so the
   native control still carries focus, arrow keys, and the accessible name.
   The /ask-a-cpa Quick Check reuses the same pill as .quiz__opt. */
.rating {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.rating label,
.quiz__opt,
.pick {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-inline: 0.5rem;
  border: 1px solid var(--field-border);
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
    color 0.2s var(--ease);
}

.rating label input,
.quiz__opt input,
.pick input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

.rating label:hover,
.quiz__opt:hover,
.pick:hover {
  border-color: var(--ink-3);
}

.rating label:has(input:checked),
.quiz__opt:has(input:checked),
.pick:has(input:checked) {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.rating label:has(input:focus-visible),
.quiz__opt:has(input:focus-visible),
.pick:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.rating__ends {
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

/* Dark mode lightens --accent to #ff6a4d, where white text is only 2.83:1.
   Same override the primary button uses. */
@media (prefers-color-scheme: dark) {
  .rating label:has(input:checked),
  .quiz__opt:has(input:checked),
  .pick:has(input:checked) {
    color: #1a0f0c;
  }
}

.form__inline-row {
  display: grid;
  gap: 0.625rem;
}

.form__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form__fine {
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.btn.is-busy .btn__spin {
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn.is-busy .btn__spin {
    animation: none;
  }
}

.form__status {
  display: none;
}

.form__status.is-shown {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  padding: 0.8125rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  line-height: 1.5;
}

.form__status .icon {
  margin-top: 0.1875rem;
  flex: none;
}

.form__status.is-ok {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--ink);
}

.form__status.is-bad {
  background: var(--accent-wash);
  color: var(--accent-ink);
}

.form__status a {
  color: inherit;
  text-decoration: underline;
}

@media (min-width: 640px) {
  .form__inline-row {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
}

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

.footer {
  border-top: 1px solid var(--rule);
  padding-block: 2.75rem;
  font-size: 0.875rem;
  color: var(--ink-3);
}

.footer .shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-right: auto;
  color: var(--ink-2);
}

.footer__brand img {
  width: 22px;
  height: 22px;
}

.footer a:hover {
  color: var(--ink);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

/* WCAG 2.5.8: keep pointer targets at 24px minimum. */
.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* ==========================================================================
   /ask-a-cpa: Ask-a-CPA community landing page
   Blocks below follow that page's markup order. Everything above is shared
   with index.html.
   ========================================================================== */

/* Alternating bands. The page runs paper, paper-2, paper, ... from the hero
   down, so only the even sections are declared here. The bio lands on an even
   band and takes the one .team already carries on index.html; the recognition
   block lands on an odd one, so the band .risk carries there is undone. */
.start,
.check,
.support {
  background: var(--paper-2);
  border-block: 1px solid var(--rule);
}

.recognition {
  background: var(--paper);
  border-block: 0;
}

/* Ask-a-CPA community mark. The source art was opaque white and is stored here
   with that white unpremultiplied to alpha, so it drops straight onto --paper.
   Its black wordmark would disappear on the dark scheme, so there it gets a
   white plate, the usual treatment for a third-party logo. */
.aac-mark {
  width: auto;
  height: 5.5rem;
  margin-bottom: 1.125rem;
}

@media (prefers-color-scheme: dark) {
  .aac-mark {
    padding: 0.625rem 0.875rem;
    background: #fff;
    border-radius: var(--radius-sm);
  }
}

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

/* --- the one form ------------------------------------------------------- */

/* The form leads on mobile: it is the conversion path, and the card beside it
   is context someone can read after they have already started typing. */
.start__grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

@media (min-width: 900px) {
  .start__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}

/* First and last name are one line once there is room for two usable inputs. */
.form__pair {
  display: grid;
  gap: 1.125rem;
}

@media (min-width: 30rem) {
  .form__pair {
    grid-template-columns: 1fr 1fr;
  }
}

/* .field.is-invalid colors a control border, and the pick group has no control
   of its own, so the pills carry the state instead. */
.field--picks.is-invalid .pick {
  border-color: var(--accent-ink);
}

/* Recognition questions. No icons: these are questions, not checkmarks. */
.qgrid {
  display: grid;
  gap: 0;
  margin-bottom: 1.5rem;
}

.qgrid li {
  border-top: 1px solid var(--rule);
  padding-block: 0.875rem;
  color: var(--ink-2);
}

@media (min-width: 760px) {
  .qgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 4vw, 3rem);
  }
}

/* --- quick check -------------------------------------------------------- */

.quiz {
  display: grid;
  gap: 1.5rem;
  max-width: 46rem;
}

.quiz__area {
  min-inline-size: 0;
  margin: 0;
  padding: 1.5rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.quiz__area legend {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding-inline: 0.5rem;
  font-weight: 600;
  color: var(--ink);
}

.quiz__area legend .icon {
  color: var(--accent);
}

.quiz__q + .quiz__q {
  margin-top: 1.25rem;
}

.quiz__stmt {
  font-size: 0.9375rem;
  color: var(--ink-2);
  margin-bottom: 0.625rem;
}

.quiz__q.is-invalid .quiz__stmt {
  color: var(--accent-ink);
}

.quiz__opts,
.picks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* The pill itself comes from the shared .rating label rule. The interest
   form's .pick is the same pill carrying a checkbox instead of a radio. */
.quiz__opt,
.pick {
  padding: 0.5rem 1rem;
  min-width: 0;
}

.quiz__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

.quiz__err {
  font-size: 0.875rem;
  color: var(--accent-ink);
}

.quiz__nojs {
  display: none;
}

html:not(.has-js) .quiz__nojs {
  display: block;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

html:not(.has-js) .quiz__actions {
  display: none;
}

.results {
  margin-top: 2rem;
  max-width: 46rem;
}

/* Score summary: the headline number, the band wording, and one bar per area.
   It sits on --paper-2 so it reads as the report and the accent-wash .result
   below it reads as the recommendation. */
.score {
  display: grid;
  gap: 0.875rem;
  margin-bottom: 1.125rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.score__num {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.score__value {
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.score__num span {
  font-size: 0.9375rem;
  color: var(--ink-3);
}

.score__say {
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.score__say b {
  color: var(--ink);
}

.score__areas {
  display: grid;
  gap: 0.625rem;
}

.score__area {
  display: grid;
  gap: 0.25rem;
}

.score__label {
  font-size: 0.875rem;
  color: var(--ink-2);
}

/* The bar is a second reading of the number beside it, never the only one:
   .score__val carries the same value as text. */
.score__track {
  height: 0.5rem;
  border-radius: 999px;
  background: var(--rule);
  overflow: hidden;
}

.score__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.6s var(--ease);
}

.score__val {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.score__area.is-low .score__label {
  font-weight: 600;
  color: var(--accent-ink);
}

.score__legend {
  font-size: 0.8125rem;
  color: var(--ink-3);
}

/* The argument the score exists to make: a gap nobody schedules is a gap that
   survives the year. Sits between the bars and the per-area recommendation. */
.score__push {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
  color: var(--ink-2);
}

@media (min-width: 560px) {
  .score__area {
    grid-template-columns: 13rem 1fr 3.5rem;
    align-items: center;
    gap: 0.875rem;
  }

  .score__val {
    text-align: right;
  }
}

.result {
  display: grid;
  gap: 0.875rem;
  justify-items: start;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--accent-wash);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

/* display: grid above outranks the UA [hidden] rule, so restate it. Without
   this every result renders at once, including with JavaScript off. */
.result[hidden] {
  display: none;
}

.result p {
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.result__do b,
.result__not b {
  color: var(--ink);
}

/* --- framework: 24 / 72 / 7 / 30 ---------------------------------------- */

.stages {
  display: grid;
  gap: 1rem;
}

/* Cards sit on --paper here, so the surface takes the other neutral. */
.stage {
  background: var(--paper-2);
}

.stage__label {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

@media (min-width: 640px) {
  .stages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .stages {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --- the menu: decision rows, then the tiles they point into ------------ */

.paths__list {
  display: grid;
  gap: 0;
}

.path {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem 1.5rem;
  align-items: center;
  padding-block: 1.125rem;
  border-top: 1px solid var(--rule);
  color: inherit;
}

.path:last-child {
  border-bottom: 1px solid var(--rule);
}

.path__q {
  font-weight: 500;
  color: var(--ink);
  transition: color 0.2s var(--ease);
}

.path__a {
  font-size: 0.9375rem;
  color: var(--ink-3);
}

.path .icon {
  color: var(--accent);
  transition: transform 0.2s var(--ease);
}

.path:hover .path__q {
  color: var(--accent);
}

.path:hover .icon {
  transform: translateX(3px);
}

/* The tiles are a second pass at the same choice, so they get air above the
   heading that introduces them. */
.menu__head {
  margin-block: clamp(2.5rem, 5vw, 4rem) 1.25rem;
}

.tiers {
  display: grid;
  gap: 1.25rem;
  align-items: start;
}

.tier--feature {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

/* Both sit inside .card, whose `.card p` rule would otherwise win on
   specificity and flatten them to body size. */
.tier .tier__price {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}

.tier .tier__rate {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--accent-ink);
}

@media (min-width: 960px) {
  .tiers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.hands {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.hands__intro {
  margin-top: 0.75rem;
  color: var(--ink-2);
  max-width: var(--measure);
}

.hands__grid {
  display: grid;
  gap: 1.25rem;
  align-items: start;
  margin-top: 1.5rem;
}

@media (min-width: 820px) {
  .hands__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.addon {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: baseline;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}

.addon p {
  flex: 1 1 24rem;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.addon b {
  color: var(--ink);
}

/* --- usability principles ----------------------------------------------- */

.principles__grid {
  display: grid;
  gap: 1rem;
}

.principle > .icon {
  font-size: 1.25rem;
  color: var(--accent);
}

@media (min-width: 640px) {
  .principles__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .principles__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- final call --------------------------------------------------------- */

.close {
  text-align: center;
}

.close h2,
.close p {
  max-width: var(--measure);
  margin-inline: auto;
}

.close p {
  margin-top: 1rem;
  color: var(--ink-2);
}

.close__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* --- confirmation pages ------------------------------------------------- */

/* /thanks, the destination Kit redirects to after a double opt-in is confirmed.
   Deliberately quiet: one column, no cards, no reveal. Someone lands here mid
   task, having just clicked a button in an email, and leaves within seconds. */

.confirm {
  padding-top: clamp(3rem, 7vw, 6rem);
  padding-bottom: clamp(4rem, 9vw, 8rem);
}

/* Narrower than --shell, and applied to every shell on the page so the brand,
   the column, and the footer share one left edge. At 1180px a single column of
   text would sit in the far left third of a desktop window. */
.page--confirm .shell {
  max-width: 54rem;
}

.confirm__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  padding: 0.375rem 0.8125rem;
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent-ink);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.confirm h1 {
  margin: 0 0 1rem;
  font-size: clamp(2.25rem, 5.4vw, 3.5rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.confirm .lede {
  max-width: 40ch;
}

.confirm__next {
  display: grid;
  gap: 1.75rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--rule);
}

.confirm__next h2 {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin-bottom: 0.375rem;
  max-width: none;
}

.confirm__next p {
  color: var(--ink-2);
  font-size: 0.9375rem;
  max-width: var(--measure);
}

.confirm__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

@media (min-width: 46rem) {
  .confirm__next {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

/* --- legal pages -------------------------------------------------------- */

/* /privacy. One column of prose, no cards and no reveal: someone arrives to check
   one fact, and a layout with motion in it would be in the way. */

.legal {
  padding-top: clamp(3rem, 7vw, 5rem);
  padding-bottom: clamp(4rem, 9vw, 7rem);
}

/* Narrower than --shell, applied to every shell on the page so the brand, the
   column, and the footer share one left edge. */
.page--legal .shell {
  max-width: 48rem;
}

.legal h1 {
  margin-bottom: 1rem;
  font-size: clamp(2rem, 4.6vw, 2.75rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.legal__date {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.legal h2 {
  margin-top: clamp(2.25rem, 4vw, 3rem);
  margin-bottom: 0.75rem;
  padding-top: clamp(2.25rem, 4vw, 3rem);
  border-top: 1px solid var(--rule);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.legal h3 {
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

.legal p {
  color: var(--ink-2);
  max-width: var(--measure);
}

.legal p + p {
  margin-top: 0.875rem;
}

.legal__list {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
  max-width: var(--measure);
}

.legal__list li {
  position: relative;
  padding-left: 1.125rem;
  color: var(--ink-2);
}

.legal__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.625rem;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--accent);
}

.legal__list b {
  color: var(--ink);
}

.legal__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

/* --- motion ------------------------------------------------------------- */

/* Reveal is gated on .has-js so the page is fully visible without JavaScript. */
@media (prefers-reduced-motion: no-preference) {
  .has-js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  }

  .has-js .reveal.is-in {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}