/* ════════════════════════════════════════════════════════════════
   hedj — Pricing page
   Comparison table styled as four bordered tier columns
   ════════════════════════════════════════════════════════════════ */

.pricing-hero { text-align:center; max-width:56rem; margin:0 auto clamp(2rem,4vw,3rem); }
.pricing-hero .eyebrow { justify-content:center; margin-bottom:1rem; }
.pricing-hero h1 { font-family:var(--font-display); font-size:var(--fs-h2); font-weight:600; letter-spacing:-0.01em; margin:0 0 .8rem; }
.pricing-hero p { font-size:var(--fs-lead); color:var(--text-muted); margin:0; }

.pricing-scroll { overflow-x:auto; padding-bottom:.5rem; -webkit-overflow-scrolling:touch; }

table.pricing-table { border-collapse:separate; border-spacing:14px 0; width:100%; max-width:1180px; min-width:980px; margin:0 auto; table-layout:fixed; }

.pricing-table th, .pricing-table td { padding:1.1rem 1.5rem; text-align:center; vertical-align:middle; font-size:var(--fs-sm); line-height:1.5; }

.pt-label { width:230px; padding-right:1.75rem; text-align:left; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-muted); font-weight:500; white-space:normal; }
.pt-label--sub { padding-left:1.8rem; color:var(--text-soft); }
.pt-label--group { color:var(--text); font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:.72rem; }

.pt-tier { border-left:2px solid var(--tier-color); border-right:2px solid var(--tier-color); background:var(--paper); }
tr:first-child .pt-tier { border-top:2px solid var(--tier-color); }
tbody tr:last-child .pt-tier { border-bottom:2px solid var(--tier-color); }
thead tr:first-child .pt-tier { border-radius:var(--r-lg) var(--r-lg) 0 0; }
tbody tr:last-child .pt-tier { border-radius:0 0 var(--r-lg) var(--r-lg); }

/* Feature comparison rows start collapsed — only the tier headers, price and
   CTA rows (all in <thead>) show until "See full feature comparison" is
   clicked. When collapsed, the CTA row needs the bottom rounding/border that
   normally comes from tbody's last row. */
.pricing-table tbody { display:none; }
.pricing-table.is-expanded tbody { display:table-row-group; }
.pricing-table:not(.is-expanded) thead tr:last-child .pt-tier {
  border-bottom:2px solid var(--tier-color);
  border-radius:0 0 var(--r-lg) var(--r-lg);
}

/* Collapsed view only shows <thead>, where every .pt-label cell is empty —
   that reserved 230px column has nothing balancing it on the right, so the
   4 plan cards read as shifted right instead of centered. Zero it out while
   collapsed; it comes back once the (populated) feature rows are expanded. */
.pricing-table:not(.is-expanded) .pt-label {
  width:0;
  padding:0;
  border:none;
  overflow:hidden;
}

/* divider before the AI Assistants group */
tr:has(.pt-label--group) > * { border-top:1px solid var(--line); padding-top:1.6rem; }

.pricing-table [data-tier="freemium"]   { --tier-color:var(--text-soft); }
.pricing-table [data-tier="basic"]      { --tier-color:var(--yellow); }
.pricing-table [data-tier="standard"]   { --tier-color:var(--blue); }
.pricing-table [data-tier="enterprise"] { --tier-color:var(--green); }

.pt-tier__name { font-family:var(--font-display); font-size:1.35rem; font-weight:600; margin:0 0 .6rem; }
.pt-tier__desc { color:var(--text-muted); font-size:var(--fs-xs); line-height:1.6; max-width:22ch; margin:0 auto; }

.pt-tier--price { vertical-align:top; padding-top:1.6rem; }
.pt-price__amount { display:block; font-family:var(--font-display); font-size:1.8rem; font-weight:700; line-height:1; white-space:nowrap; }
.pt-price__amount--sm { font-size:1.3rem; }
.pt-price__period { display:block; font-family:var(--font-mono); font-size:.85rem; font-weight:500; color:var(--text-muted); margin-top:.3rem; white-space:nowrap; }
.pt-price__note { display:block; font-family:var(--font-mono); font-size:.72rem; color:var(--text-soft); margin-top:.4rem; }
.pt-price__then { display:block; font-size:.72rem; color:var(--text-muted); margin-top:.85rem; }

.pt-tier--cta { padding-top:.75rem; padding-bottom:1.5rem; }
.pt-tier--cta .btn { width:100%; height:2.7em; padding:0 1em; font-size:.85rem; }
.btn--tier-freemium   { background:transparent; color:var(--ink); }
.btn--tier-basic      { background:var(--yellow); color:var(--ink); }
.btn--tier-standard   { background:var(--blue); color:var(--paper); }
.btn--tier-enterprise { background:var(--green); color:var(--lime-ink); }

.pt-check, .pt-cross { display:inline-flex; width:1.3rem; height:1.3rem; }
.pt-check { color:var(--green-3); }
.pt-cross { color:var(--neg); }
.pt-check svg, .pt-cross svg { width:100%; height:100%; stroke-width:2.6; fill:none; stroke:currentColor; }

.pt-token { font-family:var(--font-mono); font-size:.78rem; color:var(--text-muted); }

.pricing-toggle-row { display:flex; justify-content:center; margin:1.75rem 0 0; }
.pricing-toggle { display:inline-flex; align-items:center; gap:.6rem; }
.pricing-toggle__chev { width:10px; height:6px; transition:transform .2s var(--ease); }
.pricing-toggle[aria-expanded="true"] .pricing-toggle__chev { transform:rotate(180deg); }

.pricing-footnote { text-align:center; color:var(--text-soft); font-size:var(--fs-xs); margin-top:1.5rem; }

@media (max-width:640px) {
  .pt-label { width:180px; padding-right:1.1rem; }
  table.pricing-table { min-width:860px; }
}

/* Standalone pricing.html: clear the fixed site header (this page's pricing
   section is the first content, unlike the homepage where it is class .pr). */
#pricing.section { padding-top: calc(var(--header-h, 72px) + clamp(2rem,5vw,3.5rem)); }

/* ════════════════════════════════════════════════════════════════
   Standalone pricing page — static hero card grid
   ════════════════════════════════════════════════════════════════ */

/* This .pr section is the first content on the page — clear the fixed header. */
#pricing.pr .pr-stage { padding-top: calc(var(--header-h, 72px) + clamp(1.25rem,3.5vw,2.5rem)); }

/* "Most popular" badge on the Standard card (a label only — the card stays the
   same size and aligned with the others, no lift). */
.pr-card--feat { z-index: 4; }
.pr-card__badge {
  position: absolute; top: -0.85rem; left: 50%; transform: translateX(-50%);
  background: var(--blue); color: var(--paper);
  font-family: var(--font-mono); font-size: .62rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .34em .8em; border: 2px solid var(--ink); border-radius: 999px;
  white-space: nowrap; box-shadow: 2px 2px 0 var(--ink); z-index: 6;
}

@media (min-width:901px) {
  /* give the badge room above the row without clipping */
  #pricing.pr .pr-row { padding-top: 1.1rem; }
}

/* ════════════════════════════════════════════════════════════════
   Background: warm cream page base with a soft, on-brand GREEN glow easing in
   at the top and bottom (replaces the off light-blue wash). Kept low-opacity so
   the plan cards stay the focus; the site-default mask fades both ends cleanly.
   ════════════════════════════════════════════════════════════════ */
#pricing.pr .pr-scene { display: block; }
#pricing.pr .pr-scene__wash {
  background:
    radial-gradient(62% 44% at 50% 2%,  color-mix(in srgb, var(--green) 10%, transparent) 0%, transparent 62%),
    radial-gradient(88% 56% at 50% 100%, color-mix(in srgb, var(--green) 15%, transparent) 0%, transparent 58%);
}

/* ════════════════════════════════════════════════════════════════
   Bottom Log In / Register CTA — a bordered brand panel (hard-shadow style)
   with a green accent bar, copy on the left and the two actions on the right.
   ════════════════════════════════════════════════════════════════ */
.pr-authcta { padding: clamp(1rem,3vw,2rem) var(--pad-x) clamp(3rem,7vw,5rem); }
.pr-authcta__panel {
  position: relative; overflow: hidden;
  max-width: 920px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1.4rem clamp(1.5rem,4vw,3rem);
  background: var(--paper);
  border: 2px solid var(--ink); border-radius: var(--r-lg, 18px);
  box-shadow: 6px 6px 0 var(--ink);
  padding: clamp(1.6rem,3.5vw,2.4rem) clamp(1.6rem,4vw,2.75rem);
}
.pr-authcta__bar { position: absolute; left: 0; top: 0; width: 100%; height: 6px; background: var(--green); }
.pr-authcta__copy { flex: 1 1 20rem; text-align: left; }
.pr-authcta__title {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em;
  font-size: clamp(1.35rem,2.4vw,1.7rem); margin: 0 0 .4rem;
}
.pr-authcta__sub { color: var(--text-muted); font-size: var(--fs-sm, .95rem); line-height: 1.5; margin: 0; max-width: 42ch; }
.pr-authcta__btns { display: inline-flex; gap: .8rem; flex-wrap: wrap; flex-shrink: 0; }
.pr-authcta__btn { min-width: 8rem; }

/* Tablet & phone: stack the copy above full-width, evenly-split buttons (stacking
   at 768px avoids a cramped copy-vs-buttons row at mid widths). */
@media (max-width:768px) {
  .pr-authcta__panel { flex-direction: column; align-items: stretch; text-align: center; box-shadow: 4px 4px 0 var(--ink); }
  .pr-authcta__copy { flex: 0 1 auto; text-align: center; }
  .pr-authcta__sub { margin-inline: auto; }
  .pr-authcta__btns { display: flex; width: 100%; gap: .7rem; }
  .pr-authcta__btn { flex: 1 1 0; min-width: 0; }
}

/* ════════════════════════════════════════════════════════════════
   Clean, aligned feature-comparison table (desktop). Replaces the drifting
   per-plan columns with one aligned grid: shared label column on the left,
   values aligned across tiers, the Standard column highlighted as the hero.
   Phones keep the swipe per-plan cards (.pr-compare-mob).
   ════════════════════════════════════════════════════════════════ */
@media (min-width:901px) {
  #prCompare .pricing-scroll { display: block; overflow: visible; }
  #prCompare .pr-compare-mob { display: none; }

  /* keep page gutters at every width — the shared .pr-after zeroes horizontal
     padding, so without this the table/footnote touched the screen edges on
     ~901–1120px devices. box-sizing keeps the inner content capped at 1060. */
  #prCompare {
    max-width: 1180px; margin: 1.75rem auto 0;
    padding-inline: var(--pad-x); box-sizing: border-box;
  }
  #prTable {
    border-collapse: separate; border-spacing: 0;
    width: 100%; min-width: 0; max-width: 1060px; margin: 0 auto;
    table-layout: fixed;
  }
  #prTable th, #prTable td {
    padding: .92rem 1.25rem; font-size: .9rem; vertical-align: middle;
    border: 0; background: transparent; border-radius: 0;
  }

  /* header row */
  #prTable thead .pt-label { width: 30%; }
  #prTable thead th { padding-top: 0; padding-bottom: 1rem; }
  #prTable .pt-tier__name { font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; margin: 0; }

  /* shared label column */
  #prTable .pt-label {
    text-align: left; width: 30%;
    font-family: var(--font-sans); font-size: .9rem; font-weight: 500;
    color: var(--text-muted); white-space: normal;
  }
  #prTable .pt-label--sub { padding-left: 1.6rem; color: var(--text-soft); }
  #prTable .pt-label--group {
    text-transform: uppercase; letter-spacing: .08em; font-size: .7rem;
    font-weight: 700; color: var(--text);
  }

  /* value cells */
  #prTable tbody .pt-tier { text-align: center; color: var(--text); }

  /* row separators (skip the very first body row's top edge) */
  #prTable tbody tr td, #prTable tbody tr th { border-top: 1px solid var(--line); }
  #prTable tbody tr:first-child td, #prTable tbody tr:first-child th { border-top: 0; }

  /* group divider (AI assistant) — full-width hairline + a touch more air */
  #prTable tbody tr:has(.pt-label--group) > * { border-top: 1px solid var(--line); padding-top: 1.7rem; }
  #prTable tbody tr:has(.pt-label--group) + tr td,
  #prTable tbody tr:has(.pt-label--group) + tr th { border-top: 0; }

  /* highlighted hero column (Standard) — clean tinted column with a full green
     outline and rounded top/bottom corners. */
  #prTable [data-tier="standard"] {
    background: color-mix(in srgb, var(--green) 7%, var(--paper));
    border-left: 2px solid var(--green); border-right: 2px solid var(--green);
  }
  #prTable thead [data-tier="standard"] {
    border-top: 2px solid var(--green); border-radius: 12px 12px 0 0;
  }
  #prTable tbody tr:last-child [data-tier="standard"] {
    border-bottom: 2px solid var(--green); border-radius: 0 0 12px 12px;
  }

  /* checks read as confident green ticks; exclusions as a quiet muted dash */
  #prTable .pt-check { color: var(--green-3); }
  #prTable .pt-cross { color: var(--text-soft); opacity: .45; width: 1rem; height: 1rem; }
  #prTable .pt-token { font-size: .82rem; }

  /* comparison heading sits on the light page — normal ink */
  #prCompare .pricing-footnote { max-width: 1060px; margin-inline: auto; }
}

/* Keep the footnote consistently centred at every width (the shared styles.css
   flips it to left-aligned ≤600px, which read as inconsistent against the rest
   of the centred bottom content) and always keep page gutters so it never
   touches the screen edges on mobile. */
#prCompare .pricing-footnote {
  text-align: center; margin-inline: auto;
  padding-inline: var(--pad-x); box-sizing: border-box;
}

/* ── Small phones: one card per row (full width) ──────────────────────────
   styles.css has a later "@media (max-width:900px) { 2-up }" rule that wins
   over its own "≤600px → 1fr" by source order, so narrow phones showed two
   cramped, cut-off comparison cards. pricing.css loads last and #prCompare
   .pr-compare-mob is more specific, so this pins one-per-row on small phones.
   Same guard for the plan cards so they never fall back to a squeezed 2-up. */
@media (max-width:600px) {
  #prCompare .pr-compare-mob { grid-template-columns: 1fr; gap: 16px; }
  #pricing.pr .pr-row { grid-template-columns: 1fr; }
}