/* ========================================
   PRICING PAGE
   ======================================== */

/* Text set on an accent fill: white on the light themes; on the dark themes, whose accents are light, the paper */
:root {
  --pricing-on-accent: #fff;
}
:root:is([data-theme="dark"]) {
  --pricing-on-accent: var(--bg-primary);
}

/* ---- Contour lines, as behind the homepage's sections ----
   One set runs behind the header and the top of the plans, then fades out; a second sits behind the questions. */
.pricing-contours {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1100px;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  color: var(--text-primary);
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}

.pricing-contours svg {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.05;
}

.pricing-contours--band {
  bottom: 0;
  height: auto;
  z-index: 0;
  -webkit-mask-image: none;
  mask-image: none;
}

/* ---- Hero ----
   A short header: the plans are the page, so they start well inside the first screen. */
.pricing-hero {
  padding: calc(var(--navbar-height) + 2.5rem) 0 0;
  text-align: center;
  position: relative;
}

.pricing-hero .container {
  position: relative;
  z-index: 2;
}

.pricing-hero-inner {
  max-width: 760px;
  margin: 0 auto;
}

/* Sized from the viewport so the headline holds one line at every width, phone included */
.pricing-hero h1 {
  font-size: clamp(1.2rem, 6vw, 3rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-top: var(--space-md);
  margin-bottom: var(--space-sm);
}

.pricing-hero-sub {
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-lg);
}

/* ---- Monthly / Annual: plain text, the selected one underlined in the accent ---- */
.billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 1.75rem;
}

.billing-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border: 0;
  background: transparent;
  box-shadow: inset 0 -2px 0 transparent;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 150ms ease, box-shadow 150ms ease;
}

.billing-option:hover {
  color: var(--text-primary);
}

.billing-option--active {
  color: var(--text-primary);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.billing-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--accent-hover);
}

/* ========================================
   THE PAGE'S FRAME
   The plans, the comparison and the questions run the width of the navbar,
   so their outer edges sit under the logo and the sign-up button.
   ======================================== */
.pricing-plans > .container,
.pricing-matrix > .container,
.pricing-faq > .container {
  max-width: none;
  padding-left: max(var(--container-padding), calc((100% - var(--container-wide)) / 2));
  padding-right: max(var(--container-padding), calc((100% - var(--container-wide)) / 2));
}

/* ========================================
   PLAN CARDS
   Four separate cards. Each has the plan's name, price and allowance, what it adds
   to the plan before it, and its button at the foot, so the buttons line up across a row.
   ======================================== */
.pricing-plans {
  padding: 2.5rem 0 var(--space-3xl);
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-md);
}

.plan-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  row-gap: var(--space-xl);
  min-width: 0;
  padding: var(--space-xl);
  border: 1px solid var(--border);
}

/* The recommended plan: the accent on its outline, its tag and its button */
.plan-card--featured {
  border-color: var(--accent);
}

.plan-name {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.plan-tag {
  padding: 0.2rem 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  background: color-mix(in srgb, var(--accent) 13%, var(--bg-primary));
  color: var(--accent-hover);
}

.plan-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.1rem 0.4rem;
  margin-top: var(--space-lg);
}

.plan-amount {
  font-size: clamp(2.5rem, 3.6vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--text-primary);
}

.plan-period {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.plan-limit {
  margin-top: var(--space-sm);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.plan-limit b {
  font-weight: 600;
  color: var(--text-primary);
}

.plan-lead {
  margin-bottom: 0.75rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.plan-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan-list li {
  position: relative;
  padding-left: 1.3rem;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text-secondary);
}

.plan-list li::before {
  content: '+';
  position: absolute;
  left: 0;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-primary);
}

/* Buttons: outlined in the accent; the recommended plan's is filled */
.plan-cta {
  width: 100%;
  min-height: 48px;
  background: transparent;
  color: var(--accent-hover);
  border: 1px solid var(--accent);
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.plan-cta:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.plan-cta--solid {
  background: var(--accent);
  color: var(--pricing-on-accent);
}

.plan-cta--solid:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.plan-note {
  margin-top: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ========================================
   FEATURE BREAKDOWN
   One table. The plans are its header (name, price, button) and stay in view
   under the navbar while the rows scroll. Each row is a feature's name with what it is beneath, set tight.
   ======================================== */
.pricing-matrix {
  padding: var(--space-3xl) 0;
}

.pricing-matrix-header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.pricing-matrix-header h2 {
  margin-top: var(--space-lg);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.matrix-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.9rem;
}

.matrix-corner {
  width: 30%;
}

/* ---- the header: the plans ---- */
.matrix-table thead :is(th, td) {
  position: sticky;
  top: var(--navbar-height);
  z-index: 5;
  padding: var(--space-md) var(--space-lg) 1.25rem;
  text-align: left;
  vertical-align: bottom;
  font-weight: 400;
  background: var(--bg-primary);
  /* A border would stay behind when the header sticks, so the line is a shadow. The second shadow
     covers the hairline seam between two cells, where the rows passing behind would show through */
  box-shadow: inset 0 -1px 0 var(--border), 1px 0 0 var(--bg-primary);
}

.matrix-table thead .matrix-col--featured {
  background: color-mix(in srgb, var(--text-primary) 3.5%, var(--bg-primary));
}

/* The tag sits over the name, so a narrow column never pushes it into its neighbor */
.matrix-plan {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

/* The price is a block of two lines, figure then period, and is as tall for every plan,
   with or without a period: the names above it and the buttons below it stay level */
.matrix-table thead .plan-price {
  display: block;
  min-height: 2.9rem;
  margin: 0.35rem 0 0.85rem;
}

.matrix-table thead .plan-amount {
  display: block;
  font-size: 1.75rem;
}

.matrix-table thead .plan-period {
  display: block;
  margin-top: 0.25rem;
  line-height: 1.2;
  white-space: nowrap;
}

.matrix-table thead .plan-cta {
  min-height: 40px;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

/* ---- the rows ---- */
.matrix-table tbody :is(th, td) {
  padding: 0.7rem var(--space-lg);
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}

.matrix-feature {
  font-weight: 400;
}

.matrix-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.matrix-desc {
  display: block;
  max-width: 46ch;
  margin-top: 0.1rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.matrix-table tbody td {
  color: var(--text-primary);
}

.matrix-table tbody .matrix-col--featured {
  background: color-mix(in srgb, var(--text-primary) 3.5%, transparent);
}

/* A group's name: Requests, Data, … */
.matrix-table .matrix-group th {
  padding: var(--space-xl) var(--space-lg) 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.matrix-yes {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-primary);
}

.matrix-no {
  color: var(--text-muted);
}

.matrix-upgrade {
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--text-secondary);
}

/* ========================================
   FAQ
   ======================================== */
.pricing-faq {
  position: relative;
  padding: var(--space-3xl) 0;
}

.pricing-faq > .container {
  position: relative;
  z-index: 1;
}

.pricing-faq-header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.pricing-faq-header h2 {
  margin-top: var(--space-lg);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* the questions flow down two balanced columns rather than a row grid, so a long answer no longer stretches its neighbour (2026-10-14) */
.faq-grid {
  columns: 2;
  column-gap: 0;
  column-rule: 1px solid var(--border);
  border: 1px solid var(--border);
  min-width: 0;
}

.faq-item {
  min-width: 0;
  break-inside: avoid;
  padding: var(--space-xl);
  border-bottom: 1px solid var(--border);
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-q {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
  line-height: 1.35;
}

/* the free tier's attribution: the credit as it should look, and the HTML to paste with a Copy beside it */
.faq-a code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.faq-a a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.faq-a {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 60ch;
}

/* ========================================
   RESPONSIVE
   ======================================== */

/* Four plans sit two by two before a row of four would squeeze them */
@media (max-width: 1199px) {
  .plans-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The comparison keeps its five columns down to a tablet, with less air */
@media (max-width: 1099px) {
  .matrix-table thead :is(th, td) {
    padding: var(--space-md) 0.75rem;
  }

  .matrix-table tbody :is(th, td) {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .matrix-table .matrix-group th {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .matrix-table thead .plan-amount {
    font-size: 1.5rem;
  }

  .matrix-table thead .plan-price {
    min-height: 2.65rem;
  }

  /* No room beside the figure for "billed yearly" in columns this narrow; the cards above carry it */
  .matrix-table thead .plan-yearly {
    display: none;
  }

  .matrix-table thead .plan-cta {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    font-size: 0.8125rem;
  }
}

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

/* Below a tablet the comparison stops being a grid of five columns. Each row becomes a block,
   its title and description on top and its four values beneath, in the columns of the header,
   which shrinks to the plans' names and prices and still stays in view. */
@media (max-width: 719px) {
  .matrix-table,
  .matrix-table thead,
  .matrix-table tbody {
    display: block;
  }

  .matrix-table tr {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .matrix-table thead {
    position: sticky;
    top: var(--navbar-height);
    z-index: 5;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
  }

  .matrix-table thead :is(th, td),
  .matrix-table thead .matrix-col--featured {
    position: static;
    padding: 0.6rem 0.4rem;
    background: none;
    box-shadow: none;
  }

  .matrix-corner,
  .matrix-table thead .plan-tag,
  .matrix-table thead .plan-period,
  .matrix-table thead .plan-cta {
    display: none;
  }

  .matrix-plan {
    font-size: 0.75rem;
  }

  .matrix-table thead .plan-price {
    min-height: 0;
    margin: 0.1rem 0 0;
  }

  .matrix-table thead .plan-amount {
    font-size: 1rem;
    letter-spacing: -0.02em;
  }

  .matrix-table tbody tr {
    border-bottom: 1px solid var(--border);
  }

  .matrix-table tbody :is(th, td) {
    padding: 0 0.4rem var(--space-md);
    border-bottom: 0;
  }

  .matrix-table tbody .matrix-feature,
  .matrix-table .matrix-group th {
    grid-column: 1 / -1;
  }

  .matrix-table tbody .matrix-feature {
    padding-top: 0.8rem;
    padding-bottom: 0.4rem;
  }

  .matrix-desc {
    max-width: none;
  }

  .matrix-table .matrix-group th {
    padding: var(--space-xl) 0.4rem 0.6rem;
  }

  .matrix-table tbody td {
    font-size: 0.8rem;
  }

  .matrix-table tbody .matrix-col--featured {
    background: none;
  }
}

@media (max-width: 680px) {
  .plans-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The narrowest phones: four value columns of under 70px each */
@media (max-width: 359px) {
  .matrix-plan {
    font-size: 0.7rem;
  }

  .matrix-table thead :is(th, td),
  .matrix-table thead .matrix-col--featured {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .matrix-table tbody :is(th, td),
  .matrix-table .matrix-group th {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .matrix-table tbody td {
    font-size: 0.7rem;
  }

  .matrix-upgrade {
    padding: 0.1rem 0.2rem;
    font-size: 0.56rem;
    letter-spacing: -0.02em;
  }
}

/* a feature that is also a page: the research tool, linked from the card and the comparison */
.plan-list a,
.matrix-title a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 3px;
}

.plan-list a:hover,
.matrix-title a:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

/* the Free column's "With attribution" is a link to the free page's section */
.matrix-upgrade a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--border-strong, currentColor);
}

.matrix-upgrade a:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}