/* ── PRICING WIDGET v2 ──
   Shared by the home page pricing section and /pricing. Ships with
   assets/js/pricing-widget.js and one markup block that is byte-identical on
   both pages.

   Source of truth: design-handoffs/design_handoff_pricing_widget/README.md
   (option 3a). That handoff is high-fidelity — its colours, type and row
   geometry are measured and final, so they ship as literals here rather than
   being remapped onto the site's --accent-* tokens, exactly as header.css
   does with the header deliverable. Only --sans/--mono/--display are borrowed,
   because every page already declares them.

   One block with media queries, which the handoff permits as an alternative
   to shipping separate desktop and mobile blocks. Breakpoint 900px.

   Billing state lives in one attribute on [data-scope]: data-billing, absent
   or "monthly" by default. Every visual swap is keyed off it in CSS, so the
   desktop crossfade and the mobile display-swap are both declarative and
   neither can leak across the breakpoint. The JS only writes that attribute
   and aria-selected. */

/* ---------- band + header ---------- */
.pw { display: grid; }

.pw-band {
  background: #0A0A0A;
  padding: 64px 48px 68px;
  display: grid;
  gap: 44px;
  justify-items: center;
}

.pw-head { display: grid; gap: 20px; justify-items: center; }

.pw-kicker {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.18em;
  color: #B0AFAA;
}

/* The handoff shows no headline in the desktop frame; it belongs to the
   mobile block only. Hidden above the breakpoint rather than dropped, so the
   two layouts stay one block. */
.pw-headline { display: none; }

/* ---------- billing toggle ---------- */
.pw-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #101010;
  border-radius: 999px;
}
.pw-seg {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 13px 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #B0AFAA;
  cursor: pointer;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.14em;
  transition: background 0.18s ease, color 0.18s ease;
}
.pw-seg[aria-selected="true"] { background: #F5F4F1; color: #0A0A0A; }
.pw-seg--annual { padding-right: 16px; }
.pw-save {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.1em;
  color: #1E8CFE;
  background: rgba(30, 140, 254, 0.14);
  border-radius: 999px;
  padding: 6px 8px;
}
.pw-save-inline { display: none; }

/* ---------- card grid ---------- */
.pw-grid {
  width: 100%;
  max-width: 1000px;
  display: grid;
  /* minmax(0,1fr), not 1fr: a bare 1fr is minmax(auto,1fr), whose auto floor
     is the track's min-content width. When one card's longest unbreakable
     line exceeds its equal share that track grows and the other shrinks, so
     the two cards render at different widths. Flooring at 0 pins both tracks
     to exactly half the free space and lets the content wrap instead. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}

.pw-card {
  background: #101010;
  border-radius: 20px;
  padding: 44px;
  display: grid;
  gap: 26px;
  align-content: space-between;
  min-width: 0; /* the grid item must be allowed below its min-content width */
}
.pw-card--essentials { border: 1px solid rgba(30, 140, 254, 0.5); }
.pw-card--mcp        { border: 1px solid rgba(49, 205, 135, 0.5); }

/* ---------- chip row ---------- */
.pw-chiprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 26px;
}
.pw-chip {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.13em;
  border-radius: 6px;
  padding: 7px 10px;
}
.pw-chip--founder {
  color: #1E8CFE;
  background: rgba(30, 140, 254, 0.12);
  border: 1px solid rgba(30, 140, 254, 0.3);
}
.pw-chip--new {
  color: #31CD87;
  background: rgba(49, 205, 135, 0.12);
  border: 1px solid rgba(49, 205, 135, 0.3);
}
.pw-kick {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.13em;
  color: #B0AFAA;
}

/* ---------- name + price ---------- */
/* display:contents so the name and the price block are direct grid children
   of the card at desktop, each holding its own measured row height. The
   wrapper only becomes a real row at mobile, where the two share a line. */
.pw-namerow { display: contents; }

.pw-name {
  font-family: var(--display);
  font-weight: 400;
  font-size: 42px;
  line-height: 0.9;
  letter-spacing: 0.02em;
  margin: 0;
  color: #F5F4F1;
}

.pw-price { position: relative; height: 92px; }
.pw-price-v {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  transition: opacity 0.18s ease;
}
.pw-cur { font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1.3; color: #B0AFAA; }
.pw-amt { font-family: var(--display); font-weight: 400; font-size: 92px; line-height: 0.92; color: #F5F4F1; }

/* ---------- meta ---------- */
.pw-meta { position: relative; height: 40px; }
.pw-meta-v {
  position: absolute;
  inset: 0;
  margin: 0;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.75;
  letter-spacing: 0.09em;
  color: #B0AFAA;
  transition: opacity 0.18s ease;
}
.pw-meta-sub { color: #7E7D78; }

/* ---------- billing state ---------- */
/* Desktop: both variants stay in the DOM, stacked in a fixed-height box, and
   crossfade. Nothing moves, nothing reflows. */
.pw [data-price="annual"] { opacity: 0; visibility: hidden; }
.pw [data-price="monthly"] { opacity: 1; visibility: visible; }
.pw[data-billing="annual"] [data-price="monthly"] { opacity: 0; visibility: hidden; }
.pw[data-billing="annual"] [data-price="annual"] { opacity: 1; visibility: visible; }

/* ---------- bullets ---------- */
/* Fixed 46px rows, not content height: this is what keeps the two columns in
   register when a bullet wraps, and it is a hard requirement of the handoff. */
.pw-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-rows: repeat(7, 46px);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.45;
  color: #F5F4F1;
}
.pw-bullets li { display: flex; gap: 12px; align-items: flex-start; }
.pw-tick { flex: none; margin-top: 4px; }
.pw-tick-m { display: none; }

/* ---------- CTA + small print ---------- */
.pw-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  border-radius: 10px;
  text-decoration: none;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.1em;
  transition: background 0.18s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

/* Owner override of the handoff's no-shadow/no-lift rule: these two buttons
   float and react. Each carries its own accent as a coloured elevation plus a
   tight dark contact shadow, so the lift reads as height above the card
   rather than a glow. Identical treatment on both, only the hue differs.
   No gradients, no rings. */
.pw-cta--essentials {
  background: #1E8CFE;
  color: #FFFFFF;
  box-shadow: 0 6px 20px rgba(30, 140, 254, 0.35), 0 1px 2px rgba(10, 10, 10, 0.28);
}
.pw-cta--mcp {
  background: #31CD87;
  color: #06301F;
  box-shadow: 0 6px 20px rgba(49, 205, 135, 0.35), 0 1px 2px rgba(10, 10, 10, 0.28);
}

/* Hover is gated on a real pointer. Touch devices report hover:none, so a
   phone keeps the resting elevation and never latches a hover state after a
   tap. */
@media (hover: hover) {
  .pw-cta--essentials:hover {
    background: #1B81EA;
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(30, 140, 254, 0.45), 0 2px 4px rgba(10, 10, 10, 0.30);
  }
  .pw-cta--mcp:hover {
    background: #2DBE7C;
    color: #06301F;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(49, 205, 135, 0.45), 0 2px 4px rgba(10, 10, 10, 0.30);
  }
}

/* Press compresses the shadow as the button drops, so the travel reads
   physically instead of as a colour change. */
.pw-cta--essentials:active {
  transform: translateY(1px);
  box-shadow: 0 3px 10px rgba(30, 140, 254, 0.30), 0 1px 1px rgba(10, 10, 10, 0.26);
}
.pw-cta--mcp:active {
  transform: translateY(1px);
  box-shadow: 0 3px 10px rgba(49, 205, 135, 0.30), 0 1px 1px rgba(10, 10, 10, 0.26);
}

/* Reduced motion keeps the elevation and drops the movement only. */
@media (prefers-reduced-motion: reduce) {
  .pw-cta { transition: background 0.18s ease, box-shadow 0.15s ease; }
  .pw-cta--essentials:hover,
  .pw-cta--mcp:hover,
  .pw-cta--essentials:active,
  .pw-cta--mcp:active { transform: none; }
}

.pw-fine {
  margin: 0;
  height: 32px;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: #7E7D78;
}

/* ---------- demo links ---------- */
.pw-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: center;
  padding: 34px 48px 40px;
}
.pw-demolink {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.12em;
  color: #006BDB;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.pw-demolink:hover { color: #0A0A0A; }

/* ---------- focus ---------- */
.pw a:focus-visible,
.pw button:focus-visible { outline: 2px solid #1E8CFE; outline-offset: 3px; }

/* ---------- mobile, under 900px ---------- */
@media (max-width: 899px) {
  .pw-band {
    background: none;
    padding: 32px 20px 30px;
    gap: 20px;
    justify-items: stretch;
  }

  .pw-head { gap: 12px; justify-items: start; }
  .pw-kicker { font-size: 10px; letter-spacing: 0.16em; color: #57554F; }
  .pw-headline {
    display: block;
    margin: 0;
    font-family: var(--display);
    font-weight: 400;
    font-size: 36px;
    line-height: 0.9;
    letter-spacing: 0.02em;
    color: #0A0A0A;
  }

  .pw-toggle {
    display: flex;
    gap: 5px;
    padding: 4px;
    border: 1px solid rgba(10, 10, 10, 0.14);
    background: #FFFFFF;
    border-radius: 0;
  }
  .pw-seg {
    flex: 1;
    justify-content: center;
    gap: 4px;
    padding: 14px 8px;
    border-radius: 0;
    color: #6E6C66;
    letter-spacing: 0.12em;
  }
  .pw-seg--annual { padding-right: 8px; }
  .pw-seg[aria-selected="true"] { background: #0A0A0A; color: #F5F4F1; }
  .pw-save { display: none; }
  .pw-save-inline { display: inline; }

  .pw-grid { grid-template-columns: 1fr; gap: 20px; max-width: none; }

  .pw-card {
    background: #0A0A0A;
    border: 0;
    border-left: 3px solid rgba(245, 244, 241, 0.14);
    border-radius: 0;
    padding: 26px 22px;
    gap: 18px;
    align-content: start;
  }
  .pw-card--essentials { border-left-color: #1E8CFE; }

  .pw-chiprow { gap: 10px; height: auto; }
  .pw-chip { border-radius: 0; letter-spacing: 0.12em; }
  .pw-chip--founder { color: #FFFFFF; background: #1E8CFE; border-color: #1E8CFE; }
  .pw-chip--new { color: #06301F; background: #31CD87; border-color: #31CD87; }
  .pw-kick { font-size: 9px; letter-spacing: 0.12em; }

  /* name and price share one line over a hairline */
  .pw-namerow {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(245, 244, 241, 0.12);
    padding-bottom: 14px;
  }
  .pw-name { font-size: 36px; line-height: 0.86; }

  .pw-price { position: static; height: auto; }
  .pw-price-v { position: static; gap: 3px; }
  .pw-cur { font-size: 20px; line-height: 1.1; }
  .pw-amt { font-size: 58px; line-height: 0.8; }

  .pw-meta { position: static; height: auto; }
  .pw-meta-v { position: static; font-size: 10px; line-height: 1.6; letter-spacing: 0.08em; }

  /* No crossfade at this size — the blocks are in flow, so they swap outright.
     Resetting opacity/visibility first keeps the desktop rules from leaking. */
  .pw [data-price] { opacity: 1; visibility: visible; }
  .pw [data-price="annual"] { display: none; }
  .pw[data-billing="annual"] [data-price="monthly"] { display: none; }
  .pw[data-billing="annual"] .pw-price-v[data-price="annual"] { display: flex; }
  .pw[data-billing="annual"] .pw-meta-v[data-price="annual"] { display: block; }

  .pw-bullets {
    grid-template-rows: none;
    gap: 11px;
    font-size: 14px;
    line-height: 1.4;
  }
  .pw-bullets li { gap: 9px; align-items: flex-start; }
  .pw-tick { display: none; }
  .pw-tick-m { display: inline; flex: none; }
  .pw-card--essentials .pw-tick-m { color: #1E8CFE; }
  .pw-card--mcp .pw-tick-m { color: #31CD87; }

  .pw-cta {
    height: auto;
    padding: 19px 20px;
    border-radius: 0;
    letter-spacing: 0.14em;
  }
  .pw-fine { height: auto; color: #8A8984; text-align: center; }

  .pw-demo {
    display: grid;
    gap: 14px;
    justify-items: center;
    padding: 0;
  }

  /* Gap below the demo links. The row is the last thing in the pricing
     section on both pages, so that section's own bottom padding is the gap,
     and .pw-demo already contributes 0 here. Measured on the home page at
     <=640px: 120px section padding + 60px .ai-call top = 180px. Halving the
     total means the section side drops to 30px (30 + 60 = 90px).

     section.pricing, not .pricing: this sheet is linked ahead of each page's
     inline <style>, so the bare class would lose the cascade to the page's
     own .pricing shorthand. The element+class raises specificity to (0,1,1)
     and wins without !important. Desktop is untouched — this lives inside
     the mobile block. */
  section.pricing { padding-bottom: 30px; }
}

/* ---------- page integration ----------
   The band is full-bleed, so the widget block is a direct child of
   <section class="pricing">, outside that section's .container.

   /pricing carries .pricing--page because a standalone page needs its own
   <h1>, and the suite enforces exactly one per page. That page keeps its
   heading above the band and suppresses the widget's own mobile headline, so
   the same sentence is not stated twice on a phone. The home page, whose h1
   belongs to the hero, renders the widget exactly as the handoff draws it. */
.pricing--page .pw { margin-top: 56px; }

@media (max-width: 899px) {
  .pricing--page .pw-headline { display: none; }
}