/*
 * Primer 2026 design tokens for code components.
 *
 * Code components render inside a shadow root. CSS custom properties inherit
 * through it, so each token reads the matching Webflow variable from the
 * "Primer 2026" collection and falls back to the same literal value. That way
 * a component looks right both on the Webflow page and in the local playground.
 *
 * Fluid type and spacing are literal clamp() values: the Webflow API rejected
 * clamp() for size variables, so the p26-* classes in Webflow use these same
 * values directly. Keep both in sync.
 */
:host,
.p26-root {
  /* Color: aliases of existing brand variables */
  --p26-text-strong: var(--_primer-2026---color--text--strong, #20292c);
  --p26-text-default: var(--_primer-2026---color--text--default, #475a61);
  --p26-text-inverse: var(--_primer-2026---color--text--inverse, #ffffff);
  --p26-surface-base: var(--_primer-2026---color--surface--base, #ffffff);
  --p26-surface-subtle: var(--_primer-2026---color--surface--subtle, #f3f5f6);
  --p26-surface-hover: var(--_primer-2026---color--surface--hover, #f7f9fa);
  --p26-surface-inverse: var(--_primer-2026---color--surface--inverse, #262155);
  --p26-border: var(--_primer-2026---color--border--default, rgba(138, 159, 169, 0.32));
  --p26-accent: var(--_primer-2026---color--accent--primary, #6e37ff);
  --p26-accent-strong: var(--_primer-2026---color--accent--strong, #3c327b);
  --p26-accent-soft: var(--_primer-2026---color--accent--soft, #a8a6ff);
  --p26-accent-blue: var(--_primer-2026---color--accent--blue, #3366ff);
  --p26-highlight: var(--_primer-2026---color--highlight, #ffd966);
  --p26-focus: var(--_primer-2026---color--focus-ring, #0b89fd);

  /* Type */
  --p26-font-display: var(--_primer-2026---font--display, EightiesComeback), Georgia, serif;
  --p26-font-body: var(--_primer-2026---font--body, Rubik), Arial, sans-serif;
  --p26-type-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --p26-type-body-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --p26-type-body: var(--_primer-2026---type--body, 1rem);
  --p26-type-small: var(--_primer-2026---type--small, 0.875rem);

  /* Space and shape */
  --p26-space-2xs: var(--_primer-2026---space--2xs, 0.25rem);
  --p26-space-xs: var(--_primer-2026---space--xs, 0.5rem);
  --p26-space-sm: var(--_primer-2026---space--sm, 1rem);
  --p26-space-md: var(--_primer-2026---space--md, 1.5rem);
  --p26-space-lg: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  --p26-radius-sm: var(--_primer-2026---radius--sm, 8px);
  --p26-radius-md: var(--_primer-2026---radius--md, 12px);
  --p26-radius-lg: var(--_primer-2026---radius--lg, 20px);

  /* Motion */
  --p26-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --p26-duration-fast: 160ms;
  --p26-duration-base: 320ms;
}

/* Pricing page (both versions). Tokens come from ../../styles/tokens.css. */
:host { display: block; }
.p26-pricing {
  --pr-900: var(--p26-text-strong);
  --pr-700: var(--p26-text-default);
  --pr-300: #6b7b82;
  --pr-line: #e3e7ea;
  --pr-soft: #f7f8fa;
  --pr-accent: var(--p26-accent-strong);
  --pr-green: #1c8c67;
  color: var(--pr-900);
  font-family: var(--p26-font-body);
  font-size: 1rem;
  line-height: 1.5;
  text-align: left;
}
.p26-pricing *, .p26-pricing *::before, .p26-pricing *::after { box-sizing: border-box; }
.p26-pricing :where(h2, h3, p, ul, ol, dl, figure) { margin: 0; }
.p26-pricing :where(ul) { padding: 0; list-style: none; }
.p26-pricing a { color: inherit; }
.p26-pricing :focus-visible { outline: 3px solid var(--p26-focus); outline-offset: 2px; }
.pr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pr-eyebrow { color: var(--p26-accent); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.pr-yes { width: 1.1em; height: 1.1em; color: var(--pr-green); flex: none; }
.pr-chev { width: 1em; height: 1em; flex: none; transition: transform var(--p26-duration-fast) var(--p26-ease-out); }
.pr-no { color: #b6c0c5; }
.pr-tag { margin-left: 0.4em; padding: 0.05em 0.45em; border: 1px solid #f5d9b0; border-radius: 999px; background: #fff7ea; color: #a3540f; font-size: 0.72em; font-style: normal; font-weight: 600; vertical-align: 0.1em; }

/* buttons */
.pr-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.6rem 1.1rem; border: 1px solid var(--p26-surface-inverse); border-radius: var(--p26-radius-sm); background: var(--p26-surface-inverse); color: #fff !important; font-weight: 500; text-decoration: none; transition: opacity var(--p26-duration-fast); }
.pr-btn:hover { opacity: 0.9; }
.pr-btn.is-ghost { background: #fff; color: var(--pr-900) !important; border-color: var(--pr-line); }
.pr-btn.is-ghost:hover { background: var(--pr-soft); opacity: 1; }
.pr-btn.is-sm { min-height: 2.5rem; padding: 0.5rem 0.9rem; font-size: 0.9375rem; }

/* controls */
.pr-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.5rem; margin-bottom: 1.75rem; }
.pr-toggle { display: inline-flex; padding: 4px; border: 1px solid var(--pr-line); border-radius: 999px; background: #fff; }
.pr-toggle button { padding: 0.45rem 1rem; border: 0; border-radius: 999px; background: none; color: var(--pr-700); font: inherit; font-size: 0.9375rem; cursor: pointer; }
.pr-toggle button.is-on { background: var(--p26-surface-inverse); color: #fff; font-weight: 500; }
.pr-band { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--pr-700); font-size: 0.9375rem; }
.pr-band select { padding: 0.45rem 2rem 0.45rem 0.75rem; border: 1px solid var(--pr-line); border-radius: var(--p26-radius-sm); background: #fff url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cpath d=%27m4 6 4 4 4-4%27 fill=%27none%27 stroke=%27%23475a61%27 stroke-width=%271.6%27/%3E%3C/svg%3E") right 0.6rem center / 0.9rem no-repeat; color: var(--pr-900); font: inherit; font-size: 0.9375rem; appearance: none; cursor: pointer; }

/* price */
.pr-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.5rem; }
.pr-price b { font-family: var(--p26-font-display); font-size: 2.5rem; font-weight: 400; line-height: 1; letter-spacing: -0.01em; }
.pr-price span { flex-basis: 100%; color: var(--pr-300); font-size: 0.875rem; }
.pr-price .pr-from { flex-basis: auto; order: -1; }
.pr-price.is-compact b { font-size: 2rem; }
.pr-purpose { color: var(--pr-700); font-size: 0.9375rem; line-height: 1.45; }

/* ---------- A: cards ---------- */
.pr-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.pr-card { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border: 1px solid var(--pr-line); border-radius: var(--p26-radius-lg); background: #fff; }
.pr-card h3 { font-size: 1.25rem; font-weight: 600; }
.pr-card .pr-purpose { min-height: 2.9em; margin-top: -0.6rem; }
.pr-crit { display: flex; flex-direction: column; gap: 0.55rem; padding-top: 1rem; border-top: 1px solid var(--pr-line); color: var(--pr-900); font-size: 0.9375rem; }
.pr-crit li { padding-left: 1rem; position: relative; }
.pr-crit li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.35rem; height: 0.35rem; border-radius: 50%; background: var(--p26-accent-soft); }
.pr-shared { display: flex; flex-direction: column; gap: 0.4rem; margin-top: auto; padding-top: 0.9rem; border-top: 1px solid var(--pr-line); color: var(--pr-green); font-size: 0.875rem; font-weight: 500; }
.pr-shared li { display: flex; align-items: center; gap: 0.4rem; }
.pr-notes { max-width: 52rem; margin: 1.5rem auto 0; color: var(--pr-700); font-size: 0.9375rem; text-align: center; }
.pr-notes p + p { margin-top: 0.4rem; }
.pr-notes b { color: var(--pr-900); font-weight: 600; }

/* A: shared value */
.pr-value { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 4rem; }
.pr-value-item { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.25rem 1.4rem; border: 1px solid var(--pr-line); border-radius: var(--p26-radius-md); background: #fff; text-decoration: none; transition: border-color var(--p26-duration-fast); }
.pr-value-item:hover { border-color: var(--p26-accent-soft); }
.pr-value-item b { font-size: 1.0625rem; font-weight: 600; }
.pr-value-item span { color: var(--pr-700); font-size: 0.9375rem; }
.pr-value-foot { grid-column: 1 / -1; color: var(--pr-300); font-size: 0.875rem; text-align: center; }

/* comparison */
.pr-compare, .pr-groups { margin-top: 5rem; }
.pr-compare-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.pr-compare-head h2 { font-family: var(--p26-font-display); font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); font-weight: 400; line-height: 1.05; letter-spacing: -0.01em; }
.pr-intro { margin-top: 0.6rem; color: var(--pr-700); font-size: 1.0625rem; }
.pr-expand { display: flex; gap: 0.5rem; }
.pr-expand button { padding: 0.4rem 0.8rem; border: 1px solid var(--pr-line); border-radius: 999px; background: #fff; color: var(--pr-700); font: inherit; font-size: 0.875rem; cursor: pointer; }
.pr-expand button:hover { background: var(--pr-soft); }
.pr-group-h { margin: 0; font-size: 1.0625rem; font-weight: 600; }
.pr-group-h.is-static { padding: 1.1rem 0 0.6rem; }
.pr-group { border-top: 1px solid var(--pr-line); }
.pr-group-h button { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 1.1rem 0; border: 0; background: none; color: var(--pr-900); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.pr-group.is-open .pr-chev, .pr-fcard.is-open .pr-fcard-btn .pr-chev, .pr-faq-item[open] .pr-chev { transform: rotate(180deg); }
.pr-group-body { padding-bottom: 1.25rem; }

.pr-table-wrap { border: 1px solid var(--pr-line); border-radius: var(--p26-radius-md); overflow: hidden; background: #fff; }
.pr-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.9375rem; }
.pr-table th, .pr-table td { padding: 0.8rem 1rem; text-align: left; vertical-align: top; border-top: 1px solid #eef0f2; }
.pr-table thead th { border-top: 0; background: var(--pr-soft); color: var(--pr-700); font-size: 0.8125rem; font-weight: 600; }
.pr-table thead th:first-child { width: 34%; }
.pr-table tbody th { font-weight: 500; }
.pr-row-label { display: block; color: var(--pr-900); }
.pr-row-note { display: block; margin-top: 0.15rem; color: var(--pr-300); font-size: 0.8125rem; font-weight: 400; line-height: 1.4; }
.pr-table td { color: var(--pr-900); }
.pr-table .is-hi { background: #f6f3ff; }
.pr-table thead .is-hi { background: #ece6ff; color: var(--pr-accent); }

/* ---------- B: chooser + feature cards ---------- */
.pr-chooser { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--pr-line); border-radius: var(--p26-radius-lg); background: #fff; overflow: hidden; }
.pr-choice { display: flex; flex-direction: column; gap: 0.7rem; padding: 1.4rem 1.4rem 1.5rem; transition: background-color var(--p26-duration-fast); }
.pr-choice + .pr-choice { border-left: 1px solid var(--pr-line); }
.pr-choice.is-sel { background: #f8f6ff; box-shadow: inset 0 3px 0 var(--p26-accent); }
.pr-choice-pick { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--pr-900); font: inherit; font-size: 1.25rem; font-weight: 600; cursor: pointer; text-decoration: underline transparent; transition: text-decoration-color var(--p26-duration-fast); }
.pr-choice-pick:hover { text-decoration-color: var(--p26-accent-soft); }
.pr-choice .pr-purpose { min-height: 2.9em; }
.pr-choice-lim { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; padding: 0; list-style: none; color: var(--pr-700); font-size: 0.875rem; line-height: 1.4; min-height: 7.5em; }
.pr-choice-lim li { position: relative; padding-left: 0.95rem; }
.pr-choice-lim li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.32rem; height: 0.32rem; border-radius: 50%; background: var(--p26-accent-soft); }
.pr-addon-yearly { margin: 0.25rem 0 0; color: var(--pr-900); font-weight: 600; }
.pr-choice .pr-btn { margin-top: auto; }

.pr-fcard { margin-top: 0.75rem; border: 1px solid var(--pr-line); border-radius: var(--p26-radius-lg); background: #fff; transition: border-color var(--p26-duration-fast); }
.pr-fcard.is-open { border-color: #d6dcf5; }
.pr-fcard-head { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 1.75rem; }
.pr-fcard-copy h3 { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); font-weight: 600; line-height: 1.2; }
.pr-fcard-copy p { margin-top: 0.35rem; color: var(--pr-700); }
.pr-fcard-status { display: inline-block; margin-top: 0.6rem; color: var(--pr-300); font-size: 0.875rem; }
.pr-fcard-btn { display: inline-flex; flex: none; align-items: center; gap: 0.4rem; padding: 0.55rem 1rem; border: 1px solid var(--pr-line); border-radius: 999px; background: #fff; color: var(--pr-900); font: inherit; font-size: 0.9375rem; font-weight: 500; cursor: pointer; }
.pr-fcard-btn:hover { background: var(--pr-soft); }
.pr-fcard-body { padding: 0 1.75rem 1.5rem; }
.pr-fcard-link { display: inline-block; margin-top: 0.9rem; color: var(--pr-accent); font-weight: 500; text-decoration: none; }

/* ---------- add-on ---------- */
.pr-addon { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2rem; align-items: center; margin-top: 5rem; padding: 2rem; border: 1px solid var(--pr-line); border-radius: var(--p26-radius-lg); background: var(--pr-soft); }
.pr-addon h2 { margin-top: 0.5rem; font-family: var(--p26-font-display); font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); font-weight: 400; line-height: 1.1; }
.pr-addon-copy p { margin-top: 0.75rem; color: var(--pr-700); }
.pr-addon-support { display: flex; align-items: center; gap: 0.4rem; color: var(--pr-green) !important; font-weight: 500; }
.pr-addon-buy { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.5rem; border: 1px solid var(--pr-line); border-radius: var(--p26-radius-md); background: #fff; }
.pr-addon-buy p { color: var(--pr-700); font-size: 0.9375rem; }
.pr-addon-buy .pr-btn { align-self: flex-start; margin-top: 0.4rem; }

/* ---------- FAQ ---------- */
.pr-faq { max-width: 52rem; margin: 0 auto; border-top: 1px solid var(--pr-line); }
.pr-faq-item { border-bottom: 1px solid var(--pr-line); }
.pr-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; font-size: 1.125rem; font-weight: 600; cursor: pointer; list-style: none; }
.pr-faq-item summary::-webkit-details-marker { display: none; }
.pr-faq-a { padding: 0 2rem 1.25rem 0; color: var(--pr-700); }
.pr-faq-a p + p { margin-top: 0.6rem; }

@media (prefers-reduced-motion: reduce) { .pr-chev, .pr-btn, .pr-choice { transition: none; } }
@media print { .pr-group-body[hidden], .pr-fcard-body[hidden] { display: block !important; } }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
  .pr-cards { grid-template-columns: 1fr 1fr; }
  .pr-chooser { grid-template-columns: 1fr 1fr; }
  .pr-choice:nth-child(3) { border-left: 0; }
  .pr-choice:nth-child(n + 3) { border-top: 1px solid var(--pr-line); }
  .pr-addon { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pr-cards, .pr-chooser, .pr-value { grid-template-columns: 1fr; }
  .pr-choice + .pr-choice { border-left: 0; border-top: 1px solid var(--pr-line); }
  .pr-card .pr-purpose, .pr-choice .pr-purpose, .pr-choice-lim { min-height: 0; }
  .pr-controls { flex-direction: column; }
  .pr-fcard-head { flex-direction: column; align-items: flex-start; padding: 1.25rem; }
  .pr-fcard-body { padding: 0 1rem 1.25rem; }
  .pr-addon { padding: 1.25rem; }
  /* Tables stack: each feature becomes a block listing every plan's value. */
  .pr-table, .pr-table tbody, .pr-table tr, .pr-table th, .pr-table td { display: block; width: auto; }
  .pr-table thead { display: none; }
  .pr-table tr { padding: 0.85rem 1rem; border-top: 1px solid #eef0f2; }
  .pr-table tbody tr:first-child { border-top: 0; }
  .pr-table th, .pr-table td { padding: 0; border: 0; }
  .pr-table tbody th { margin-bottom: 0.4rem; }
  .pr-table td { display: flex; justify-content: space-between; gap: 1rem; padding: 0.2rem 0; font-size: 0.875rem; }
  .pr-table td::before { content: attr(data-plan); color: var(--pr-300); }
  .pr-table td.is-hi { background: none; font-weight: 600; }
}