/* ─────────────────────────────────────────────────────────────────────────
   landing.css — page styles for GET /.

   Loaded after tokens.css + base.css, so it only adds page-specific
   composition. Primitives (.btn, .card, .status-word, .kicker…) come from
   base.css and are not redefined here.

   The hero is a text-and-product collage: three floating artifacts built
   from the product's own vernacular (FUP cap, throughput, an invoice row).
   They are the only shadowed elements on the page, and the sienna stroke in
   the ring and sparkline is the only place chroma appears outside the single
   peach pricing card.
   ───────────────────────────────────────────────────────────────────────── */

/* ═══ Hero ═══════════════════════════════════════════════════════════════ */

.hero {
  padding: var(--spacing-80) 0 var(--spacing-96);
  overflow: unset;
  position: relative;
}

/* Subtle grain overlay — one texture layer that breaks digital flatness
   without competing with the product artifacts. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

.hero > .wrap {
  position: relative;
  z-index: 1;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--spacing-64);
  align-items: center;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  min-width: 0;
}

/* The brief's headline is a full sentence, so it sits at the 64px step rather
   than 90px — at 90px it broke to four lines and swamped the artifacts.
   64px is still an oversized editorial serif, just one step down. */
.hero__title {
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
  max-width: 20ch;
}

.hero__copy .lede-lg {
  max-width: 46ch;
}

.hero__actions {
  margin-top: var(--spacing-4);
}

/* ─── Hero search ─────────────────────────────────────────────────────────
   Doubles as the system's "composer" component. The .field wrapper is
   required by landing.js (outside-click detection) and also provides the
   positioning context for the results dropdown. */

.hero__search {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin-top: var(--spacing-8);
}

.hero__search-control {
  position: relative;
  display: flex;
  align-items: center;
}

.hero__search-control input {
  padding-right: var(--spacing-64);
}

.hero__kbd {
  position: absolute;
  right: var(--spacing-12);
  padding: 3px var(--spacing-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-images);
  background: var(--surface-card-mist);
  color: var(--color-ash-gray);
  font-family: var(--font-sohne);
  font-size: 12px;
  line-height: 1.4;
  pointer-events: none;
}

/* CONTRACT — starts hidden; landing.js toggles display none/block only. */
.hero__results {
  display: none;
  position: absolute;
  top: calc(100% + var(--spacing-8));
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 320px;
  overflow-y: auto;
  background: var(--surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-inputs);
  box-shadow: var(--shadow-popover);
}

/* Rows are injected with inline styles by landing.js; these rules cover the
   parts it does not set. */
.hero__results a {
  display: block;
  transition: background var(--transition-fast);
}

.hero__results a:hover {
  background: var(--surface-section-fog);
  text-decoration: none;
}

.hero__results a:last-child {
  border-bottom: 0 !important;
}

.hero__results .empty-state {
  background: transparent;
  border-radius: 0;
  text-align: left;
}

/* ─── Floating artifacts ────────────────────────────────────────────────── */

.hero__artifacts {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-20);
  align-items: start;
}

.artifact__label {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--color-ash-gray);
  margin-bottom: var(--spacing-8);
}

.artifact__metric {
  display: block;
  font-size: var(--text-body-lg);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  color: var(--color-ink-black);
}

.artifact__unit {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-ash-gray);
}

.artifact__delta {
  margin-top: var(--spacing-8);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--color-ash-gray);
}

/* The signature artifact: data remaining against the FUP cap. Spans both
   columns and sits slightly left of the grid to break the rectangle. */
.artifact--fup {
  grid-column: 1 / -1;
  margin-right: var(--spacing-40);
}

.artifact__ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 150px;
  margin: var(--spacing-4) auto var(--spacing-4);
}

.ring {
  width: 150px;
  height: 150px;
  transform: rotate(0deg);
}

.ring__track,
.ring__value {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
}

.ring__track {
  stroke: var(--color-mist-gray);
}

/* Sienna is sanctioned for chart strokes — the one warm mark on white. */
.ring__value {
  stroke: var(--color-sienna-brown);
}

.artifact__ring-center {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

.artifact__ring-center .artifact__metric {
  font-family: var(--font-signifier);
  font-size: 34px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.5px;
}

/* Throughput: a gestural line. No axes, no gridlines — deliberately. */
.artifact--speed {
  margin-top: var(--spacing-8);
}

.spark {
  width: 100%;
  height: 48px;
  margin-top: var(--spacing-12);
  overflow: visible;
}

.spark__line {
  fill: none;
  stroke: var(--color-sienna-brown);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.artifact--invoice {
  margin-top: var(--spacing-8);
}

.artifact__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  font-size: var(--text-body-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-black);
}

/* ═══ Features ═══════════════════════════════════════════════════════════ */

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-24);
}

.feature {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
}

.feature h3 {
  font-size: var(--text-subheading);
  line-height: 1.25;
  letter-spacing: normal;
  font-weight: var(--font-weight-480);
}

/* ═══ Stats ══════════════════════════════════════════════════════════════
   CONTRACT — #statGrid and the [data-count-to] descendants drive the
   count-up in landing.js. */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-24);
  padding: var(--spacing-40) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

/* The serif carries the numbers — the same voice as the headlines. */
.stat-value {
  font-family: var(--font-signifier);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-heading);
  line-height: 1.1;
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink-black);
}

.stat-label {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-ash-gray);
}

/* ═══ Plans ══════════════════════════════════════════════════════════════ */

.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-24);
  align-items: start;
}

.plan {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
  height: 100%;
}

.plan__head {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.plan__head h3 {
  font-size: var(--text-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--font-weight-450);
}

/* The recommended plan is the page's single peach surface. Lifting it
   slightly is the only positional emphasis it gets — no shadow, per the
   rule that content cards never carry elevation. */
.plan--featured {
  padding-block: var(--spacing-40);
}

.plan__flag {
  align-self: flex-start;
  padding: var(--spacing-4) var(--spacing-12);
  border: 1px solid rgba(93, 42, 26, 0.28);
  border-radius: var(--radius-buttons);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-450);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-sienna-brown);
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-4);
}

.plan__currency {
  font-size: var(--text-caption);
  color: var(--color-ash-gray);
}

.plan__amount {
  font-family: var(--font-signifier);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-heading);
  line-height: 1.1;
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink-black);
}

.plan__period {
  font-size: var(--text-caption);
  color: var(--color-ash-gray);
}

.plan--featured .plan__amount,
.plan--featured .plan__currency,
.plan--featured .plan__period {
  color: var(--color-sienna-brown);
}

.plan__headline {
  padding-bottom: var(--spacing-20);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-450);
  color: var(--color-ink-black);
}

.plan--featured .plan__headline {
  border-bottom-color: rgba(93, 42, 26, 0.2);
  color: var(--color-sienna-brown);
}

.plan__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  flex: 1 1 auto;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-ash-gray);
}

.plan__list li {
  display: flex;
  gap: var(--spacing-8);
}

/* A hairline tick rather than an icon font — one less asset, same signal. */
.plan__list li::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--color-smoke-gray);
}

.plan--featured .plan__list {
  color: var(--color-sienna-brown);
}

.plan--featured .plan__list li::before {
  background: rgba(93, 42, 26, 0.45);
}

/* ═══ Steps ══════════════════════════════════════════════════════════════ */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-32);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}

.step {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  padding-top: var(--spacing-20);
  border-top: 1px solid var(--color-ink-black);
}

/* The ordinal is set in the serif so the sequence reads as editorial
   numbering rather than a UI badge. */
.step__num {
  font-family: var(--font-signifier);
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-regular);
  color: var(--color-ash-gray);
}

.step__title {
  font-size: var(--text-body-lg);
  line-height: 1.3;
  letter-spacing: normal;
  font-weight: var(--font-weight-480);
}

/* ═══ Testimonials ═══════════════════════════════════════════════════════ */

.quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-24);
}

.quote {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing-24);
  margin: 0;
}

.quote__text {
  margin: 0;
  font-family: var(--font-signifier);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-body-lg);
  line-height: 1.45;
  color: var(--color-ink-black);
}

.quote__by {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-12);
}

.quote__name {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-480);
  color: var(--color-ink-black);
}

/* ═══ FAQ teasers ════════════════════════════════════════════════════════
   Native <details>: faq.js is not loaded on this route, so the accordion
   must work with no script at all. */

.faq-teaser__list {
  border-top: 1px solid var(--color-border);
}

.teaser {
  border-bottom: 1px solid var(--color-border);
}

.teaser__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding: var(--spacing-24) 0;
  font-size: var(--text-body-lg);
  font-weight: var(--font-weight-450);
  color: var(--color-ink-black);
  cursor: pointer;
  list-style: none;
}

.teaser__q::-webkit-details-marker {
  display: none;
}

/* A rotating hairline cross — no icon asset, and it reads in both states. */
.teaser__q::after {
  content: '';
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-right: 1px solid var(--color-ink-black);
  border-bottom: 1px solid var(--color-ink-black);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--transition-normal);
}

.teaser[open] .teaser__q::after {
  transform: rotate(225deg) translateY(-2px);
}

.teaser__a {
  padding: 0 0 var(--spacing-24);
  max-width: 72ch;
}

/* ═══ Closing CTA ════════════════════════════════════════════════════════ */

.cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-20);
  text-align: center;
}

.cta__inner .lede-lg {
  max-width: 52ch;
}

.cta__actions {
  justify-content: center;
  margin-top: var(--spacing-8);
}

/* ═══ Footer extras ══════════════════════════════════════════════════════ */

.site-footer__blurb {
  margin-top: var(--spacing-16);
  max-width: 32ch;
}

/* ═══ Responsive ═════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .hero {
    padding: var(--spacing-64) 0 var(--spacing-80);
  }

  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-40);
  }

  .hero__title {
    max-width: 24ch;
  }

  .artifact--fup {
    grid-column: auto;
    margin-right: 0;
  }

  .hero__artifacts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  .artifact--speed,
  .artifact--invoice {
    margin-top: 0;
  }

  .features-grid,
  .plans-grid,
  .quotes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-24);
  }

  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-32);
  }
}

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

  .features-grid,
  .plans-grid,
  .quotes {
    grid-template-columns: 1fr;
  }

  /* On one column the recommended plan leads, since it is the recommendation. */
  .plan--featured {
    order: -1;
    padding-block: var(--spacing-32);
  }

  .stat-value {
    font-size: 34px;
    letter-spacing: -0.4px;
  }

  .plan__amount {
    font-size: 34px;
    letter-spacing: -0.4px;
  }

  .teaser__q {
    font-size: var(--text-body);
    padding: var(--spacing-20) 0;
  }
}

@media (max-width: 640px) {
  .hero__search {
    max-width: none;
  }

  .steps {
    grid-template-columns: 1fr;
  }

  .stat-grid {
    padding: var(--spacing-32) 0;
  }
}

/* ═══ Animate — hero entrance ═══════════════════════════════════════════
   One authored moment: the FUP ring draws its sienna arc on load.
   Everything else stays still — this is the focal sequence. */

@keyframes ring-draw {
  from { stroke-dashoffset: 205.8; }
  to   { stroke-dashoffset: 0; }
}

.ring__value {
  stroke-dashoffset: 205.8;
  animation: ring-draw 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

/* Hero text enters with a single coordinated fade-up —
   not a staggered section reveal, just one composed entrance. */

@keyframes hero-enter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero__copy > * {
  opacity: 0;
  animation: hero-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero__copy > *:nth-child(1) { animation-delay: 0.05s; }
.hero__copy > *:nth-child(2) { animation-delay: 0.15s; }
.hero__copy > *:nth-child(3) { animation-delay: 0.25s; }
.hero__copy > *:nth-child(4) { animation-delay: 0.35s; }
.hero__copy > *:nth-child(5) { animation-delay: 0.45s; }

/* ═══ Animate — section scroll reveals ══════════════════════════════════
   Sections fade up once when they enter the viewport.
   Respect prefers-reduced-motion: no animation, content visible immediately. */

.section,
.section-tight {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.section.is-visible,
.section-tight.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .section, .section-tight { opacity: 1; transform: none; transition: none; }
  .hero__copy > * { opacity: 1; animation: none; }
  .ring__value { stroke-dashoffset: 0; animation: none; }
}

/* ═══ Layout — scroll-margin for anchor targets ═════════════════════════ */

#features, #plans, #how {
  scroll-margin-top: 96px;
}