/* Home page (redesigned 2026-10-30): hero → what we do → the trial → after
   the trial → FAQ → form. Layers on styles.css and only adds home-page
   components. Hierarchy comes from type, numerals, and space, not boxes. The
   only card is the 50-day trial (the way in); the closing form keeps its
   panel. */

.v2-section { padding-block-start: var(--section); }
.closing { padding-block-start: var(--section); }

.hero-lede { text-wrap: balance; }
/* who it's for, under the lede, and the trial terms in one line under the
   buttons */
.hero-for {
  margin-block-start: var(--s-4);
  max-inline-size: 48em;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  text-wrap: balance;
}
.hero-note {
  margin-block-start: var(--s-4);
  max-inline-size: 48em;
  font-size: var(--fs-sm);
  color: var(--muted);
  text-wrap: balance;
}
/* the hero ends on the calendar, so the next section's own top padding is
   the whole gap */
.hero { padding-block-end: 0; }
.text-link { text-decoration: underline; text-underline-offset: 2px; }
.text-link:hover { color: var(--ink); }

.dim { color: var(--muted); }
.btn-accent { background: var(--accent); color: var(--ink); }
.btn-accent:hover { background: #ff9a52; }

/* ============ SECTION HEADS ============ */
/* eyebrow: small caps after a short orange rule; no pill */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-mock);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.eyebrow::before {
  content: "";
  inline-size: 24px;
  block-size: 2px;
  background: var(--accent);
}
/* split head: heading left, intro right, on one baseline */
.split-head {
  display: grid;
  gap: var(--s-5);
}
.split-head .h2 { margin-block-start: var(--s-4); }
.split-head .lead { max-inline-size: 30em; }

/* small label over a group, shared by the trial and pricing columns */
.trial-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
}

/* ============ WHAT WE DO ============ */
/* three numbered steps: an orange numeral, the step, one paragraph */
.what-rows {
  display: grid;
  gap: var(--s-7);
  margin-block-start: var(--s-8);
}
.what-row { display: grid; gap: var(--s-2); align-content: start; }
.what-num {
  margin-block-end: var(--s-3);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--track-tight);
  color: var(--accent);
}
.what-row p { color: var(--muted); max-inline-size: 30em; text-wrap: pretty; }

/* ============ THE TRIAL ============ */
/* the one card: dark panel, terms and CTA on the left, how it runs on the right */
.trial-panel {
  display: grid;
  gap: var(--s-7);
  padding: var(--s-6) var(--s-5);
  border-radius: var(--r-lg);
  background: var(--ink);
  color: var(--on-dark);
}
.trial-main { display: grid; gap: var(--s-4); align-content: start; justify-items: start; }
.trial-main .h2 { max-inline-size: 11em; margin-block: var(--s-2); }
.trial-main .lead { max-inline-size: 28em; color: var(--on-dark-muted); }
.trial-panel .eyebrow,
.trial-panel .trial-label { color: var(--on-dark); }
/* the four terms: big figures in a 2x2 grid */
.trial-terms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5) var(--s-5);
  inline-size: 100%;
  max-inline-size: 30rem;
  margin-block: var(--s-4) var(--s-3);
}
.trial-terms dt { font-size: var(--fs-sm); line-height: 1.3; color: var(--on-dark-muted); }
.trial-terms dd {
  margin: var(--s-1) 0 0;
  font-size: calc(var(--fs-h2) * 0.8);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--track-tight);
}
.trial-side { display: grid; gap: var(--s-4); align-content: start; }
.trial-steps { margin-block-end: var(--s-5); }
.trial-steps .plan-row i { inline-size: 4.5em; color: var(--on-dark-muted); }
.trial-steps .plan-row:first-of-type i { color: var(--on-dark); }
.trial-def { color: var(--on-dark-muted); max-inline-size: 32em; text-wrap: pretty; }
.trial-def .text-link { color: var(--on-dark); }

/* ============ AFTER THE TRIAL ============ */
/* the price as three figures, then what you get beside it */
.pricing {
  display: grid;
  gap: var(--s-8);
  margin-block-start: var(--s-8);
}
.pricing-price { display: grid; gap: var(--s-5); align-content: start; justify-items: start; }
.price-list { display: grid; gap: var(--s-5); inline-size: 100%; }
/* figure left, what it pays for right; the label stays first in the markup */
.price-list div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--s-5);
}
.price-list dt { grid-column: 2; grid-row: 1; display: grid; gap: 2px; font-weight: 600; letter-spacing: var(--track-snug); }
.price-list small {
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--muted);
}
.price-list dd {
  grid-column: 1;
  grid-row: 1;
  min-inline-size: 4.4em;
  margin: 0;
  font-size: calc(var(--fs-h2) * 0.8);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--track-tight);
}
.price-note { font-weight: 600; max-inline-size: 30em; text-wrap: pretty; }
.pricing-gets { display: grid; gap: var(--s-2); align-content: start; }

.system-list li {
  display: grid;
  gap: 2px;
  padding-block: var(--s-3);
}
.system-list li:last-child { padding-block-end: 0; }
.system-list b { font-weight: 600; letter-spacing: var(--track-snug); }
.system-list small { color: var(--muted); font-size: var(--fs-sm); line-height: 1.4; text-wrap: pretty; }

/* ============ FAQ ============ */
.faq-head { display: grid; gap: var(--s-4); align-content: start; }
.faq-head .h2 { margin-block-start: var(--s-2); }
.faq { margin-block-start: var(--s-7); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-block-size: 64px;
  padding-block: var(--s-4);
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--track-snug);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1;
  color: var(--muted);
  transition: rotate 200ms var(--ease-out);
}
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { padding-block-end: var(--s-5); color: var(--muted); max-inline-size: 40em; }

/* ============ WIDER SCREENS ============ */
@media (min-width: 768px) {
  .split-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; column-gap: var(--s-8); }
  .split-head .lead { justify-self: end; }
  .trial-panel { padding: var(--s-8) var(--s-7); border-radius: var(--r-xl); }
}

@media (min-width: 1024px) {
  .what-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-7); }
  .trial-panel { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: var(--s-9); }
  /* starts level with the headline (eyebrow + gap + its margin) */
  .trial-side { padding-block-start: calc(var(--s-6) + var(--s-4)); }
  .pricing { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-9); }
  .faq-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--s-9); align-items: start; }
  .faq-head { position: sticky; inset-block-start: 120px; }
  .faq { margin-block-start: 0; }
}