/* Page-level layout for the CatchMailNot landing page.
   Everything visual comes from the design system bundle (cmn.css). */

/* --- hero --------------------------------------------------------------- */

.hero { padding-block: var(--oi-space-9) var(--oi-space-10); }

.hero__panel { min-height: 640px; display: flex; flex-direction: column; }
.hero__inner {
  position: relative;
  flex: 1;
  padding: var(--oi-space-10);
  display: flex;
  align-items: center;
}
/* px, not ch: ch resolves against this element's font-size, not the display
   type inside it, which silently collapses the measure. */
.hero__copy { position: relative; max-width: 500px; z-index: var(--oi-z-index-raised); }
/* reserve three lines ("digital identity" wraps to three) so the copy below
   doesn't bounce as typed words change length */
.hero__title { min-height: calc(var(--oi-type-style-display-lg-size) * var(--oi-type-style-display-lg-line-height) * 3); }
.hero__typed { color: var(--cmn-brand); }
.hero__typed::after {
  content: '';
  display: inline-block;
  width: 0.5em;
  height: 0.9em;
  margin-left: 0.08em;
  vertical-align: baseline;
  transform: translateY(0.12em);
  background: var(--cmn-brand);
  animation: hero-caret 1s steps(2, start) infinite;
}
@keyframes hero-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hero__typed::after { animation: none; }
}
.hero__subtitle { margin-top: var(--oi-space-4); color: var(--oi-text-inverse); }
.hero__lead { margin-top: var(--oi-space-4); }
.hero__actions { margin-top: var(--oi-space-7); }

.hero__float { position: absolute; width: 264px; z-index: var(--oi-z-index-raised); padding: var(--oi-space-4); }
.hero__float--a { top: 18%; left: 52%; }
.hero__float--b { top: 46%; right: var(--oi-space-10); }
.hero__float--c { top: 72%; left: 58%; }

/* the band is a scrim over the panel art */
.hero__stats { background: transparent; border-top: 1px solid var(--oi-border-on-dark-faint); position: relative; }

/* --- how it works -------------------------------------------------------- */

.how { padding-block: var(--oi-space-12) 0; }
.how__title { max-width: 560px; }
.how__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--oi-space-5);
  margin-top: var(--oi-space-8);
}
.how__step { color: var(--oi-text-muted); margin-bottom: var(--oi-space-4); }

/* --- features ------------------------------------------------------------ */

.features { padding-block: var(--oi-space-12); }
.features__para { margin: var(--oi-space-5) 0 0; color: var(--oi-text-body); max-width: 52ch; }
.features__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--oi-space-5);
  margin-top: var(--oi-space-8);
}

/* --- proof (dark) -------------------------------------------------------- */

.proof { padding-block: var(--oi-space-12); }
.proof__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--oi-space-11);
  align-items: center;
}
.proof__copy { max-width: 420px; }
.proof__para { margin: var(--oi-space-5) 0 var(--oi-space-7); color: var(--oi-text-inverse-secondary); max-width: 48ch; }

.proof__stage { position: relative; }
.proof__panel { height: 460px; border: 1px solid var(--oi-border-on-dark-faint); }
.proof__kv {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: var(--oi-space-6);
  right: var(--oi-space-6);
}

/* --- quotes -------------------------------------------------------------- */

.quotes { padding-block: var(--oi-space-11) 0; }
.quotes__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--oi-space-5);
}
.quotes__item { margin: 0; display: flex; flex-direction: column; }
.quotes__item blockquote { margin: 0; flex: 1; }
.quotes__item figcaption { margin-top: var(--oi-space-4); }

/* --- pricing ------------------------------------------------------------- */

.pricing { padding-block: var(--oi-space-12); }
.pricing__title { max-width: 520px; }
.pricing__para { margin: var(--oi-space-5) 0 0; color: var(--oi-text-body); max-width: 52ch; }
.pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--oi-space-6);
  margin-top: var(--oi-space-8);
  align-items: stretch;
}
.pricing__card--popular { border-color: var(--cmn-brand); }
.pricing__kv-no .oi-kv__key, .pricing__kv-no .oi-kv__value { color: var(--oi-text-muted); }
.pricing__card { display: flex; flex-direction: column; }
.pricing__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--oi-space-4);
}
.pricing__desc { margin: var(--oi-space-3) 0 0; color: var(--oi-text-secondary); }
.pricing__intro { display: block; margin: var(--oi-space-6) 0 0; }
.pricing__price { margin-top: var(--oi-space-5); white-space: nowrap; }
.pricing__per { color: var(--oi-text-muted); margin-left: var(--oi-space-2); font-size: var(--oi-type-style-body-size); }
.pricing__billed { margin: var(--oi-space-1) 0 0; }
.pricing__kv { margin-top: var(--oi-space-6); margin-bottom: var(--oi-space-6); gap: var(--oi-space-1); }
/* tighter rows and smaller check/cross marks than the default kv proof rows.
   Every row gets the same fixed height (room for a two-line key) so the three
   tiers stay row-for-row comparable. */
.pricing__kv .oi-kv__row { padding: var(--oi-space-2) var(--oi-space-4); min-height: 58px; box-sizing: border-box; }
.pricing__kv .oi-kv__value { font-size: var(--oi-type-style-body-sm-size); line-height: 1.4; }
/* hovering a feature lights up the equivalent row on the other tiers;
   missing/limited (cross-marked) rows light up red instead. The theme has no
   red of its own (alerts are amber, "rust" is remapped to brand), so define one. */
:root { --cmn-negative: #DC2626; }
:root[data-theme='dark'] { --cmn-negative: #F87171; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) { --cmn-negative: #F87171; }
}
.pricing__kv .oi-kv__row.is-hl { box-shadow: inset 0 0 0 1px var(--cmn-brand); }
.pricing__kv .oi-kv__row.pricing__kv-no.is-hl { box-shadow: inset 0 0 0 1px var(--cmn-negative); }
.pricing__cta { margin-top: auto; }

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

/* no border-top: the paper grid's own rows carry the edge */
.foot__row { min-height: calc(var(--oi-size-grid-unit) * 2); flex-wrap: wrap; gap: var(--oi-space-5); }
.foot__links {
  display: flex;
  gap: var(--oi-space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 1000px) {
  .hero__float { position: static; width: auto; margin-top: var(--oi-space-4); }
  .hero__inner { flex-direction: column; align-items: stretch; gap: var(--oi-space-4); }
  .proof__grid { grid-template-columns: 1fr; }
  .features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing__grid { grid-template-columns: 1fr; }
  .how__grid, .quotes__grid { grid-template-columns: 1fr; }
  .proof__kv { position: static; transform: none; margin-top: var(--oi-space-5); }
  .proof__panel { height: 300px; }
}
@media (max-width: 720px) {
  /* type tokens, not font-size, so the hero title's reserved height
     (calc'd from the same tokens) shrinks with it */
  :root {
    --oi-type-style-display-lg-size: 34px;
    --oi-type-style-display-md-size: 30px;
    --oi-type-style-metric-size: 22px;
    --oi-type-style-kv-size: 18px;
  }
  .oi-container { padding-inline: var(--oi-space-4); }

  /* nav: links hidden, controls tightened so brand + toggle + both buttons fit 360px */
  .oi-nav { gap: var(--oi-space-3); }
  .oi-nav__links { display: none; }
  .oi-nav__brand { gap: var(--oi-space-2); font-size: 16px; }
  .oi-nav > .oi-row { margin-left: auto; gap: var(--oi-space-1); }
  .oi-nav .oi-btn--md { padding-inline: var(--oi-space-3); }
  .oi-nav .theme-toggle { width: var(--oi-size-control-md); padding-inline: 0; }

  .hero { padding-block: var(--oi-space-4) var(--oi-space-9); }
  .hero__inner { padding: var(--oi-space-7) var(--oi-space-5) var(--oi-space-6); }
  .hero__float { margin-top: 0; }
  .hero__actions { flex-wrap: wrap; }
  .hero__actions .oi-btn { flex: 1 1 auto; }
  /* the stat band's 4 columns can't shrink to a phone; wrap them 2x2 */
  .hero__stats { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero__stats .oi-statband__cell { border-left: 0; padding: var(--oi-space-4) var(--oi-space-5); }

  .oi-logostrip { flex-wrap: wrap; }
  .oi-logostrip__cell { flex-basis: 50%; min-height: 56px; }

  .how { padding-block: var(--oi-space-9) 0; }
  .ai-cta { padding-inline: var(--oi-space-4); }
  .ai-cta__btn { width: 100%; }
  .features, .proof, .pricing { padding-block: var(--oi-space-9); }
  .quotes { padding-block: var(--oi-space-9) 0; }
  .features__grid, .pricing__grid { grid-template-columns: 1fr; }
  .how__grid, .features__grid, .quotes__grid { gap: var(--oi-space-4); margin-top: var(--oi-space-6); }

  .proof__grid { gap: var(--oi-space-7); }
  .proof__panel { height: 220px; }
  .proof__kv .oi-kv__row { padding: var(--oi-space-3) var(--oi-space-4); }

  /* stacked tiers aren't compared side by side, so drop the fixed row height */
  .pricing__card.oi-card--roomy { padding: var(--oi-space-6) var(--oi-space-5); }
  .pricing__kv { margin-block: var(--oi-space-5); }
  .pricing__kv .oi-kv__row { min-height: 0; padding: var(--oi-space-3); }
  .pricing__kv .oi-kv__key { font-size: var(--oi-type-style-body-sm-size); }

  .foot__row { padding-block: var(--oi-space-6); flex-direction: column; align-items: flex-start; }
  .foot__links { flex-wrap: wrap; gap: 0 var(--oi-space-5); }
  /* 44px tap targets */
  .foot__links .oi-nav__link { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
}
/* phones under 360px: the mark alone carries the brand */
@media (max-width: 359px) {
  .nav__word { display: none; }
}

/* Centered AI-instructions copy button at the top of getting-started; lives
   inside the section so it sits on the same continuous paper grid */
.ai-cta { display: flex; justify-content: center; padding-bottom: var(--oi-space-7); }
.ai-cta__btn { position: relative; }
.ai-cta__btn.ai-cta--copied { border-color: var(--cmn-brand); color: var(--cmn-brand); }
.ai-cta__icon--check { display: none; }
.ai-cta--copied .ai-cta__icon--bot { display: none; }
.ai-cta--copied .ai-cta__icon--check { display: block; }
/* the confirmation burst: little dither dots thrown from the button centre */
.ai-cta__spark {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  pointer-events: none;
}