/* ═══════════════════════════════════════════════════════════════════════
   REPURPOSE STUDIO: inner-page styles (features, pricing, about, contact, faq)
   Composes with assets/css/tokens.css. No colours or spacing values are
   invented here beyond what the token file already defines.
   ═══════════════════════════════════════════════════════════════════════ */

/* ---- page hero, shared by every inner page ---- */
.page-hero { padding-bottom: var(--s5); }
.page-hero h1 { max-width: 18ch; margin-bottom: var(--s4); }
.page-hero .lede { margin-bottom: 0; }
.page-hero .badge { margin-bottom: var(--s4); }

/* ---- callout / aside box ---- */
.callout {
  border: 1px solid var(--line);
  border-left: 3px solid var(--fire);
  border-radius: var(--r);
  padding: var(--s4);
  background: var(--coal);
}
.callout h3 { margin-bottom: var(--s2); font-size: 18px; }
.callout p:last-child { margin-bottom: 0; }
.callout + .callout { margin-top: var(--s3); }

/* ---- features.html: numbered flow steps ---- */
.flow-step {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: var(--s5);
  padding: var(--s6) 0;
  border-top: 1px solid var(--line);
}
.flow-step:first-of-type { border-top: 0; padding-top: 0; }
.flow-num {
  font-family: var(--serif);
  font-size: 48px;
  line-height: 1;
  color: var(--line-strong);
}
.flow-body .kicker { margin-bottom: var(--s2); }
.flow-body h2 { margin-bottom: var(--s3); }
.flow-body > .lede { margin-bottom: var(--s4); }

.cap-list { display: grid; gap: 0; margin-top: var(--s4); }
.cap-item { padding: var(--s3) 0; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.cap-item:last-child { border-bottom: 0; padding-bottom: 0; }
.cap-item dt { font-family: var(--mono); font-size: 13.5px; letter-spacing: 0.2px; color: var(--bone); font-weight: 500; }
.cap-item dd { color: var(--bone-dim); font-size: 15px; max-width: 62ch; }

@media (max-width: 620px) {
  .flow-step { grid-template-columns: 1fr; gap: var(--s3); }
  .flow-num { font-size: 34px; }
}

/* ---- pricing.html ---- */
.price-banner {
  display: flex; gap: var(--s3); align-items: flex-start;
  border: 1px solid var(--line-strong); border-radius: var(--r);
  padding: var(--s4); background: var(--fire-soft);
  margin-bottom: var(--s6);
}
.price-banner .mark { font-family: var(--mono); color: var(--fire-ink); font-size: 13px; flex-shrink: 0; padding-top: 2px; }
.price-banner p { font-size: 14.5px; color: var(--bone-dim); margin: 0; }
.price-banner strong { color: var(--bone); }

.price-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: stretch; }
.price-card { display: flex; flex-direction: column; }
.price-card.featured { border-color: var(--fire); }
.price-card .badge, .price-card .badge-outline { align-self: flex-start; margin-bottom: var(--s3); }
.price-card h3 { margin-bottom: var(--s2); }
.price-card .price-amount { font-family: var(--serif); font-size: 42px; line-height: 1; margin-bottom: var(--s1); }
.price-amount .unit { font-family: var(--mono); font-size: 12.5px; color: var(--ash); letter-spacing: 0.5px; }
.price-card .price-desc { color: var(--bone-dim); font-size: 14px; margin-bottom: var(--s4); min-height: 42px; }
.price-features { list-style: none; display: grid; gap: 10px; margin-bottom: var(--s5); flex-grow: 1; }
.price-features li { padding-left: 20px; position: relative; color: var(--bone-dim); font-size: 14.5px; }
.price-features li::before { content: "\2192"; position: absolute; left: 0; top: 0; color: var(--fire); font-family: var(--mono); }
.price-card .btn { width: 100%; }

.badge-outline {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--ash);
  background: transparent; border: 1px solid var(--line-strong);
  padding: 6px 12px; border-radius: 100px;
}

.table-wrap { overflow-x: auto; margin-top: var(--s7); border: 1px solid var(--line); border-radius: var(--r-lg); }
table.compare { width: 100%; border-collapse: collapse; min-width: 620px; }
table.compare th, table.compare td { padding: 14px var(--s3); text-align: left; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: top; }
table.compare thead th { font-family: var(--mono); text-transform: uppercase; letter-spacing: 1px; font-size: 10.5px; color: var(--ash); background: var(--coal-2); white-space: nowrap; }
table.compare tbody th { font-weight: 400; color: var(--bone-dim); white-space: nowrap; }
table.compare tr:last-child td, table.compare tr:last-child th { border-bottom: 0; }
table.compare td.yes { color: var(--fire-ink); font-family: var(--mono); font-size: 13px; }
table.compare td.no { color: var(--ash); font-family: var(--mono); font-size: 13px; }

/* ---- faq.html (shared with the billing strip on pricing.html) ---- */
.faq-list { display: grid; gap: var(--s3); margin-top: var(--s5); }
details.faq-item {
  border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--s3) var(--s4); background: var(--coal);
}
details.faq-item summary {
  cursor: pointer; font-family: var(--mono); font-size: 14px; color: var(--bone);
  list-style: none; display: flex; justify-content: space-between; gap: var(--s3);
  align-items: center; padding: 4px 0;
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary .q-mark {
  color: var(--fire); font-size: 19px; flex-shrink: 0; line-height: 1;
  transition: transform 0.25s var(--ease);
}
details.faq-item[open] summary .q-mark { transform: rotate(45deg); }
details.faq-item .a { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); color: var(--bone-dim); font-size: 15px; max-width: 66ch; }
details.faq-item .a p + p { margin-top: var(--s2); }

.faq-section + .faq-section { margin-top: var(--s6); }
.faq-section-title { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--ash); margin-bottom: var(--s3); }

/* ---- about.html ---- */
.about-grid { display: grid; gap: var(--s6); grid-template-columns: 1.4fr 1fr; align-items: start; }
.about-story p { color: var(--bone-dim); font-size: 16px; max-width: 64ch; margin-bottom: var(--s3); }
.about-story p:last-child { margin-bottom: 0; }
.about-facts { display: grid; gap: 0; }
.about-fact { padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.about-fact:last-child { border-bottom: 0; }
.about-fact dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ash); margin-bottom: 6px; }
.about-fact dd { color: var(--bone-dim); font-size: 14.5px; }

@media (max-width: 820px) { .about-grid { grid-template-columns: 1fr; } }

/* ---- contact.html ---- */
.contact-grid { display: grid; gap: var(--s6); grid-template-columns: 1fr 1fr; align-items: start; }
.email-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 15px;
  padding: var(--s3) var(--s4); border: 1px solid var(--line-strong); border-radius: var(--r);
  margin: var(--s3) 0 var(--s4); transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.email-cta:hover { border-color: var(--fire); color: var(--fire-ink); }
.contact-form { display: grid; gap: var(--s3); }
.field label { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--ash); margin-bottom: 6px; }
.field input, .field textarea, .field select {
  width: 100%; background: var(--coal-2); border: 1px solid var(--line); border-radius: var(--r);
  padding: 12px 14px; color: var(--bone); font-family: var(--sans); font-size: 15px;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--fire); outline-offset: 2px; border-color: var(--fire); }
.field textarea { resize: vertical; min-height: 120px; }
.field-note { font-size: 12.5px; color: var(--ash); margin-top: -6px; }
.field-note:empty { display: none; }

/* Register-interest form on the pricing page. Posts to the same Google Apps
   Script waitlist the old coming-soon page used, so no signup is lost. */
.interest { max-width: 560px; margin: var(--s6) 0; scroll-margin-top: var(--s7); }
.interest h3 { margin-bottom: var(--s2); }
.interest > p { color: var(--ash); margin-bottom: var(--s4); }
.interest-done { font-family: var(--mono); font-size: 15px; color: var(--bone); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---- generic bits reused across inner pages ---- */
.section-head { max-width: 62ch; margin-bottom: var(--s6); }
.section-head h2 { margin-bottom: var(--s3); }
.list-plain { list-style: none; display: grid; gap: 10px; }
.list-plain li { padding-left: 20px; position: relative; color: var(--bone-dim); }
.list-plain li::before { content: "\2192"; position: absolute; left: 0; color: var(--fire); font-family: var(--mono); }

/* ═══════════════════════════════════════════════════════════════════════
   MOTION: staggered reveals and hover response, layered on top of the
   .reveal / .reveal.in pair tokens.css already defines. Every rule here
   touches transform and opacity only (never width, height, top or left),
   and the global prefers-reduced-motion block in tokens.css already
   neutralises all of it (the `*` selector there covers these too).
   ═══════════════════════════════════════════════════════════════════════ */

/* Give a group of siblings a cascading entrance instead of arriving as one
   block: apply .stagger to the parent, .reveal to each direct child. */
.stagger > .reveal:nth-child(1) { transition-delay: 0s; }
.stagger > .reveal:nth-child(2) { transition-delay: 0.08s; }
.stagger > .reveal:nth-child(3) { transition-delay: 0.16s; }
.stagger > .reveal:nth-child(4) { transition-delay: 0.24s; }
.stagger > .reveal:nth-child(5) { transition-delay: 0.32s; }
.stagger > .reveal:nth-child(6) { transition-delay: 0.4s; }
.stagger > .reveal:nth-child(7) { transition-delay: 0.48s; }
.stagger > .reveal:nth-child(8) { transition-delay: 0.56s; }
.stagger > .reveal:nth-child(9) { transition-delay: 0.64s; }

/* Slightly shorter throw on nested reveals so a cascade inside an already-
   moving parent doesn't overshoot. */
.stagger .reveal { transition-duration: 0.55s; }

/* Hover response: cards already lift via tokens.css .card:hover. These add
   the same language (opacity/transform + the odd cheap colour swap the
   base system already relies on) to the controls this stylesheet owns. */
details.faq-item {
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
details.faq-item:hover,
details.faq-item:focus-within {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}
.email-cta { transform: translateY(0); }
.email-cta:hover { transform: translateY(-2px); }

/* Price card contents get their own small cascade once the card itself is
   revealed. The animation is only ever assigned once .price-card carries
   .in, so nothing plays (or is visible to play) before that: the card's
   own opacity:0 from .reveal hides these regardless until then. */
.price-card.in .price-features li { animation: cap-in 0.5s var(--ease) backwards; }
.price-card.in .price-features li:nth-child(1) { animation-delay: 0.12s; }
.price-card.in .price-features li:nth-child(2) { animation-delay: 0.18s; }
.price-card.in .price-features li:nth-child(3) { animation-delay: 0.24s; }
.price-card.in .price-features li:nth-child(4) { animation-delay: 0.3s; }
.price-card.in .price-features li:nth-child(5) { animation-delay: 0.36s; }
.price-card.in .price-features li:nth-child(6) { animation-delay: 0.42s; }

@keyframes cap-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

/* Table rows: same idea, a plain opacity fade (no transform) since CSS
   transforms on table rows render inconsistently across browsers. Scoped
   the same way, so nothing runs before the wrapper itself is revealed. */
.table-wrap.reveal.in tbody tr { animation: row-in 0.4s var(--ease) backwards; }
.table-wrap.reveal.in tbody tr:nth-child(1) { animation-delay: 0.05s; }
.table-wrap.reveal.in tbody tr:nth-child(2) { animation-delay: 0.1s; }
.table-wrap.reveal.in tbody tr:nth-child(3) { animation-delay: 0.15s; }
.table-wrap.reveal.in tbody tr:nth-child(4) { animation-delay: 0.2s; }
.table-wrap.reveal.in tbody tr:nth-child(5) { animation-delay: 0.25s; }
.table-wrap.reveal.in tbody tr:nth-child(6) { animation-delay: 0.3s; }
.table-wrap.reveal.in tbody tr:nth-child(7) { animation-delay: 0.35s; }
@keyframes row-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- tap targets: every control this stylesheet defines clears 44px ---- */
details.faq-item summary { min-height: 44px; }
.field input, .field textarea { min-height: 44px; }
.email-cta { min-height: 44px; }

/* ---- phone-first fixes ---- */
@media (max-width: 480px) {
  .price-card .btn { min-height: 48px; }
  table.compare th, table.compare td { padding: 12px 14px; }
  .contact-form .btn { width: 100%; }
}