/* Pricing page blocks (templates/pricing.html). Loaded after site.css.
   Source: the <style> block of design/proposal/pricing.html. */
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 3px;
}
#lamp, #spark, #credits, #faq { scroll-margin-top: 68px; }

/* Title block and product tabs */
.page-head { position: relative; padding: 96px 0 0; }
.page-head__title { font-size: clamp(40px, 5.6vw, 80px); max-width: 16ch; }
.switches {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; flex-wrap: wrap;
  margin-top: 56px; border-bottom: 1px solid var(--line);
}
.tabs { display: flex; gap: 44px; }
.tab {
  display: grid; gap: 2px; text-align: left; cursor: pointer;
  padding: 12px 2px 14px; margin-bottom: -1px;
  background: none; border: 0; border-bottom: 3px solid transparent; color: var(--ink-3);
  transition: color .15s var(--mg-ease), border-color .15s var(--mg-ease);
}
.tab__name { font-family: var(--mg-font-mono); font-size: 24px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.2; }
.tab__sub { font-size: 13px; color: var(--ink-3); }
.tab:hover { color: var(--ink); }
.tab[aria-selected='true'] { color: var(--ink); }
.tab--lamp[aria-selected='true']  { border-bottom-color: var(--lamp-amber); }
.tab--spark[aria-selected='true'] { border-bottom-color: var(--spark-indigo); }

/* Lamp offers: Trial, Pro and Max, extra credits as an add-on. A click on
   a card selects it (static/js/pricing.js); its button leads to Lamp. */
.plans-section { padding: 48px 0 96px; }
.offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.offer {
  display: flex; flex-direction: column; gap: 18px; padding: 32px; cursor: pointer;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 14px;
  transition: border-color .15s var(--mg-ease), box-shadow .15s var(--mg-ease);
}
.offer:hover { border-color: var(--ink); }
.offer--selected, .offer--selected:hover { border-color: var(--lamp-amber); box-shadow: inset 0 0 0 1px var(--lamp-amber); }
.offer--selected .offer__cta { background: var(--lamp-amber); border-color: var(--lamp-amber); color: #17140f; }
.offer--selected .offer__cta:hover { background: var(--lamp-amber-2); border-color: var(--lamp-amber-2); }
.offer__name { margin: 0; font-family: var(--mg-font-mono); font-size: 20px; font-weight: 500; letter-spacing: -0.03em; }
.price {
  margin: 0; display: flex; align-items: flex-end; white-space: nowrap;
  font-family: var(--mg-font-mono); font-weight: 500; line-height: 1;
  font-size: clamp(40px, 3.8vw, 56px); letter-spacing: -0.05em; font-variant-numeric: tabular-nums;
}
.price__cur { align-self: flex-start; font-size: .5em; letter-spacing: 0; margin-right: .08em; }
.offer__terms { margin: -8px 0 0; font-size: 14.5px; color: var(--ink-2); }
.offer .check-list { padding-top: 18px; border-top: 1px solid var(--line); }
.offer__cta { margin-top: auto; justify-content: center; }
.packs { width: 100%; border-collapse: collapse; }
.packs tr:first-child > * { border-top: 1px solid var(--line); }
.packs th, .packs td { padding: 12px 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; font-size: 15px; }
.packs .num { text-align: right; font-family: var(--mg-font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.offer__note { margin: auto 0 -6px; font-size: 13.5px; color: var(--ink-3); }
.offer__note + .offer__cta { margin-top: 0; }
.addon {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px 40px; align-items: start;
  margin-top: 20px; padding: 24px 32px;
  border: 1px dashed var(--line); border-radius: 14px;
}
.addon__name { margin: 0; font-family: var(--mg-font-mono); font-size: 16px; font-weight: 500; letter-spacing: -0.02em; }
.addon__text { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.n { font-family: var(--mg-font-mono); font-weight: 500; font-size: 15px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }

.includes { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.includes__title { margin: 0 0 18px; font-family: var(--mg-font-mono); font-size: 16px; font-weight: 500; letter-spacing: -0.02em; }
.includes__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 32px; margin: 0; padding: 0; list-style: none; }
.includes__list li { position: relative; padding-left: 22px; font-size: 15px; color: var(--ink-2); }
.includes__list li::before { content: '✓'; position: absolute; left: 0; color: #2f7a52; font-weight: 600; }

.fine { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 40px; margin-top: 28px; }
.fine p { margin: 0; max-width: 62ch; font-size: 13px; line-height: 1.55; color: var(--ink-3); }

/* How credits work */
.credits { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: start; }
.credit-rules { margin: 0; border-top: 1px solid var(--ink); }
.credit-rules > div { padding: 18px 0; border-bottom: 1px solid var(--line); }
.credit-rules dt { font-family: var(--mg-font-mono); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.credit-rules dd { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.mini { padding: 24px; }
.mini table { width: 100%; border-collapse: collapse; }
.mini caption { text-align: left; padding-bottom: 16px; }
.mini__title { display: block; font-family: var(--mg-font-mono); font-size: 17px; font-weight: 500; letter-spacing: -0.02em; }
.mini__sub { display: block; margin-top: 4px; font-size: 13.5px; color: var(--ink-3); }
.mini th, .mini td { padding: 12px 0; border-top: 1px solid var(--line); text-align: left; font-weight: 400; font-size: 15px; }
.mini thead th { padding-top: 0; border-top: 0; font-family: var(--mg-font-mono); font-size: 12.5px; color: var(--ink-3); }
.mini .num { text-align: right; font-family: var(--mg-font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.mini thead .num { font-weight: 400; }
.mini__foot { margin: 16px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-3); }
.report-tables { display: grid; gap: 20px; margin-bottom: 40px; }
.mini td:not(.num) { padding-left: 24px; color: var(--ink-2); }

/* Questions */
.faq { display: grid; grid-template-columns: 1fr 1.7fr; gap: 72px; align-items: start; }
.faq .lede { margin-top: 16px; }
.faq__more { margin-top: 28px; }
.faq__list { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: grid; grid-template-columns: 1fr 18px; gap: 24px; align-items: baseline;
  padding: 20px 4px; cursor: pointer; list-style: none;
  font-family: var(--mg-font-mono); font-size: 17px; font-weight: 500; letter-spacing: -0.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; content: '+' / '';
  font-size: 20px; font-weight: 400; line-height: 1; text-align: center; color: var(--ink-3);
  transition: transform .2s var(--mg-ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__a { padding: 0 46px 24px 4px; }
.faq__a p { margin: 0; max-width: 64ch; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.faq__a p + p { margin-top: 12px; }
.faq__a a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* Spark */
.spark-panel { padding: 64px 0 96px; }
.spark { display: grid; grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: start; }
.spark .lede { margin-top: 20px; }
.spark-facts { margin: 36px 0 32px; border-top: 1px solid var(--ink); }
.spark-facts > div { display: grid; grid-template-columns: 170px 1fr; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.spark-facts dt { font-family: var(--mg-font-mono); font-size: 14px; font-weight: 500; }
.spark-facts dd { margin: 0; font-size: 15px; color: var(--ink-2); }

@media (max-width: 1080px) {
  .offers { grid-template-columns: 1fr 1fr; }
  .includes__list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .page-head { padding-top: 56px; }
  .switches { display: grid; gap: 16px; margin-top: 40px; border-bottom: 0; }
  .tabs { gap: 32px; border-bottom: 1px solid var(--line); }
  .tab__name { font-size: 20px; }
  .offers, .addon, .includes__list { grid-template-columns: 1fr; }
  .plans-section { padding: 16px 0 64px; }
  .fine { grid-template-columns: 1fr; }
  .credits, .faq, .spark { grid-template-columns: 1fr; gap: 40px; }
  .credit-rules { grid-column: auto; }
  .faq__a { padding-right: 4px; }
  .spark-panel { padding: 48px 0 64px; }
  .spark-facts > div { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}