/* Studio pricing view — GENERATED by scripts/generate.mjs from
   assets/pricing-static.css + assets/css/studio/pricing.layer.css.
   Do not hand-edit: edit one of those two files and rebuild. The public page
   and this view share their markup, so they must share their rules. */

/* ===========================================================================
   /pricing/ — 1:1 with fishaudio.com/plan (2026-10-30)

   Tokens below are copied from Fish's own stylesheet (semantic-v2 + plans):
   text-title #161616,
text-subtitle #554f4c,
text-description #7a6f6b,
text-body #1d1d1c,
fill-weak #60000008,
border-light #60200010,
border-default #49150031,
action-primary #1d1d1c (hover #333130,
disabled #c4b7b4),
badge-popular #0066ff,
badge-save #e0ff66 / #2a2926,
plans-note #f3eeec / #857e7b,
page #f5f3f1,
input-opaque border #d1cecc.
   Fonts: Onest (heading + body) and Lato (descriptions). Onest ships a
   Vietnamese subset on Google Fonts; Lato does not,
so on :lang(vi) the
   description slots use Onest too instead of mixing in a fallback font.
   =========================================================================== */

.pricing-static {
  --fish-title: #161616;
  --fish-subtitle: #554f4c;
  --fish-description: #5b6472;
  --fish-body: #1d1d1c;
  --fish-fill-weak: #60000008;
  --fish-border-light: #60200010;
  --fish-border-default: #49150031;
  --fish-border-opaque: #d1cecc;
  --fish-elevated: #ffffff;
  --fish-page: #f5f3f1;
  --fish-primary: #1d1d1c;
  --fish-primary-hover: #333130;
  --fish-primary-disabled: #c4b7b4;
  --fish-popular: #0066ff;
  --fish-save-bg: #e0ff66;
  --fish-save-text: #2a2926;
  --fish-note-bg: #f3eeec;
  --fish-note-text: #857e7b;
  --fish-current-bg: #dcfce7;   /* tailwind green-100 */
  --fish-current-text: #15803d; /* tailwind green-700 */
  --fish-shadow-card: var(--e-1);
  --fish-shadow-default: var(--e-1);
  --font-heading: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-description: var(--font-heading);

  /* names the compare table / FAQ / trust strip rules use */
  --ink: var(--fish-title);
  --ink-80: var(--fish-body);
  --ink-60: var(--fish-subtitle);
  --ink-45: var(--fish-description);
  --ink-30: var(--fish-primary-disabled);
  --line: var(--fish-border-light);
  --line-soft: var(--fish-border-light);
  --fill: var(--fish-fill-weak);
  --bg: var(--fish-page);
  --card: var(--fish-elevated);
  --focus: 0 0 0 2px #fff, 0 0 0 4px var(--fish-primary);

  margin: 0;
  font-family: var(--font-heading);
  color: var(--fish-title);
  background: var(--fish-page);
  -webkit-font-smoothing: antialiased;
}
/* Dark theme (spec 007,
T040/T041) — ONE override block. This widget carries a
   self-contained palette (--fish-*),
so dark support is a token swap instead of
   per-rule variants. --fish-primary stays a DARK fill on purpose: every CTA
   paints white labels on it (color:#fff),
so a light fill would erase them. */
:root[data-theme="dark"] .pricing-static {
  --fish-title:#f2f3f5; --fish-subtitle:#a9b1bd; --fish-description:#8b93a1;
  --fish-body:#dedfe3;
  --fish-fill-weak:rgba(255,255,255,.04);
  --fish-border-light:rgba(255,255,255,.07);
  --fish-border-default:rgba(255,255,255,.14);
  --fish-border-opaque:#6b7280;
  --fish-elevated:#1a1b20; --fish-page:#0f1013;
  --fish-primary:#23262d; --fish-primary-hover:#2d3138; --fish-primary-disabled:#3a3e46;
  --fish-note-bg:#1f2027; --fish-note-text:#b6bec9;
  --fish-current-bg:#16301f; --fish-current-text:#6ee7a0;
  --focus:0 0 0 2px var(--fish-page),0 0 0 4px #7aa7ff;
  /* --fish-primary-disabled is a FILL (white labels sit on it). The compare
     table's ✕ used it as ink and went invisible on dark, so it gets its own. */
  --ink-30:#8b93a1;
}
.pricing-view .pricing-static:lang(vi) {
  --font-description: var(--font-heading);
}
/* inherit the page font everywhere,
so shell rules such as a global
   `h3 { font-family: Inter }
` cannot leak in; slots that use the
   description face set it explicitly below */
.pricing-static * { box-sizing: border-box; font-family: inherit; }
.pricing-view .pricing-static button { font: inherit; }
.pricing-view .pricing-static p { margin: 0; }
.pricing-view .pricing-static button:focus-visible,
.pricing-view .pricing-static a:focus-visible { outline: none; box-shadow: var(--focus); }
/* mx-auto max-w-[1360px] px-4 py-8 */
.pricing-static .page {
  max-width: 1392px;
  margin: 0 auto;
  padding: 32px 16px 96px;
}
/* ---------------------------------------------------------------- header -- */
.pricing-static .page-title {
  margin: 0;
  text-align: center;
  font-family: var(--font-heading);
  font-size:32px;          /* md:text-display-1 */
  line-height: 64px;
  font-weight: 400;
  color: var(--fish-title);
}
.pricing-view .pricing-static .page-sub {
  text-align: center;
  font-family: var(--font-description);
  font-size:16px;
  line-height: 24px;
  color: var(--fish-subtitle);
}
/* ------------------------------------------------- billed annually switch -- */
.pricing-static .cycle-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 36px;         /* gap-4 + mt-5 below the header */
}
.pricing-view .pricing-static .cycle-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-right: 4px;
  font-size:14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--fish-title);
  cursor: pointer;
}
.pricing-view .pricing-static .switch {
  display: inline-flex;
  align-items: center;
  flex: none;
  width: 36px;
  height: 16px;
  padding: 2px;
  border: 0;
  border-radius:999px;
  background: var(--fish-border-default);
  cursor: pointer;
  transition: background-color .1s ease-out;
}
.pricing-view .pricing-static .switch[aria-checked="true"] { background: var(--fish-primary); }
.pricing-view .pricing-static .switch-thumb {
  width: 18px;
  height: 12px;
  border-radius:999px;
  background: var(--surface);
  box-shadow: var(--fish-shadow-default);
  transition: transform .2s ease-in-out;
}
.pricing-view .pricing-static .switch[aria-checked="true"] .switch-thumb { transform: translateX(14px); }
.pricing-view .pricing-static .switch:active .switch-thumb { scale: .96; }
.pricing-view .pricing-static .save-badge {
  padding: 4px 8px;
  border-radius:999px;
  background: var(--fish-save-bg);
  color: var(--fish-save-text);
  font-size:12px;
  line-height: 16px;
  font-weight: 500;
  white-space: nowrap;
}
/* ---------------------------------------------------------------- cards -- */
/* flex justify-center gap-3,
cards max-w-[360px],
heights independent */
.pricing-static .cards {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
  padding: 16px 4px 12px;
}
.pricing-view .pricing-static .card {
  position: relative;
  flex: 0 1 360px;
  min-width: 0;
  background: var(--fish-elevated);
  border: 1px solid var(--fish-border-light);
  border-radius:16px;
  box-shadow: var(--fish-shadow-default);
  font-family: var(--font-heading);
}
.pricing-view .pricing-static .card.featured {
  border: 2px solid var(--fish-border-opaque);
}
.pricing-view .pricing-static .featured-tag {
  position: absolute;
  top: -2px;
  left: 50%;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: calc(100% - 24px);
  padding: 2px 16px;
  border-radius:999px;
  background: var(--fish-popular);
  transform: translate(-50%, -50%);
  white-space: nowrap;
  text-align: center;
}
.pricing-view .pricing-static .featured-tag span {
  font-family: var(--font-heading);
  font-size:14px;
  line-height: 20px;
  font-weight: 500;
  color: #fff;
}
/* title block (space-y-1) */
.pricing-static .card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 32px;
}
.pricing-view .pricing-static .card-head h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size:24px;          /* text-head-2 */
  line-height: 32px;
  font-weight: 500;
  color: var(--fish-title);
}
.pricing-view .pricing-static .save-chip {
  padding: 4px 8px;
  border-radius:999px;
  background: var(--fish-save-bg);
  color: var(--fish-save-text);
  font-size:12px;
  line-height: 16px;
  font-weight: 500;
}
.pricing-view .pricing-static .save-chip:empty { display: none; }
.pricing-view .pricing-static .card-desc,
.pricing-view .pricing-static .card-for {
  min-height: 20px;
  font-family: var(--font-description);
  font-size:14px;
  line-height: 20px;
  color: var(--fish-description);
}
/* one description line: the market-specific "who it's for" once
   renderPlanExtras() fills it,
otherwise the static one */
.pricing-static .card-for:empty { display: none; }
.pricing-view .pricing-static .card:has(.card-for:not(:empty)) .card-desc { display: none; }
/* price: $ raised,
36px medium; list price 26px struck; "mo" 12px */
.pricing-static .price-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  min-height: 40px;
  line-height: 1;
}
.pricing-view .pricing-static .price-now,
.pricing-view .pricing-static .price-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}
.pricing-view .pricing-static .price-now {
  gap: 0;
  font-size:32px;
  line-height: 40px;
  font-weight: 500;
  color: var(--fish-title);
}
.pricing-view .pricing-static .cur {
  position: relative;
  top: -.5em;
  font-size:12px;        /* 23.22px on 36px, 16.77px on 26px */
  line-height: 1;
}
.pricing-view .pricing-static .old-price {
  font-size:24px;
  line-height: 32px;
  font-weight: 400;
  color: var(--fish-description);
  text-decoration: line-through;
}
.pricing-view .pricing-static .unit-main {
  font-size:12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--fish-description);
}
.pricing-view .pricing-static .annual-line {
  min-height: 20px;
  font-family: var(--font-description);
  font-size:14px;
  line-height: 20px;
  color: var(--fish-description);
}
/* Monthly / yearly visibility (driven by data-cycle on .pricing-static) */
.pricing-static[data-cycle="monthly"] .only-yearly { display: none !important; }
.pricing-view .pricing-static[data-cycle="yearly"] .amount-monthly { display: none !important; }
.pricing-view .pricing-static[data-cycle="yearly"] .only-monthly { display: none !important; }
.pricing-view .pricing-static[data-cycle="monthly"] .amount-yearly { display: none !important; }
/* CTA: rounded-full min-h-10 text-sm font-medium,
primary */
.pricing-static .cta,
.pricing-view .pricing-static .free-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius:999px;
  background: var(--fish-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-size:14px;
  line-height: 20px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .1s;
}
.pricing-view .pricing-static .cta:hover,
.pricing-view .pricing-static .free-cta:hover { background: var(--fish-primary-hover); }
.pricing-view .pricing-static .cta:disabled,
.pricing-view .pricing-static .free-cta:disabled {
  background: var(--fish-primary-disabled);
  color: #fff;
  cursor: not-allowed;
}
/* credits band: border-y border-light bg-fill-weak px-4 py-3 space-y-2 */
.pricing-static .quota-box {
  border-top: 1px solid var(--fish-border-light);
  border-bottom: 1px solid var(--fish-border-light);
  background: var(--fish-fill-weak);
}
.pricing-view .pricing-static .quota-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  min-height: 26px;
  color: var(--fish-body);
}
.pricing-view .pricing-static .quota-monthly {
  font-size:20px;
  line-height: 24px;
  font-weight: 600;
}
.pricing-view .pricing-static .quota-label {
  font-size:16px;
  line-height: 24px;
  font-weight: 500;
}
.pricing-view .pricing-static .quota-box .sub {
  min-height: 20px;
  font-family: var(--font-description);
  font-size:14px;
  line-height: 20px;
  font-weight: 700;
  color: var(--fish-subtitle);
}
/* Fish's band has two lines; the per-audio-hour line is kept in the DOM
   (renderPlanExtras still fills it) but not shown. */
.pricing-static .value-line { display: none; }
.pricing-view .pricing-static[data-cycle="yearly"] .value-line .v-monthly { display: none !important; }
.pricing-view .pricing-static[data-cycle="monthly"] .value-line .v-yearly { display: none !important; }
/* benefits: px-3 pb-3 pt-2,
rows space-y-2 py-0.5,
20px icons */
.pricing-static .features,
.pricing-view .pricing-static .plus-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pricing-view .pricing-static .features li,
.pricing-view .pricing-static .free-facts li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 2px 0;
  font-family: var(--font-description);
  font-size:14px;
  line-height: 20px;
  color: var(--fish-subtitle);
}
.pricing-view .pricing-static .features svg,
.pricing-view .pricing-static .free-facts svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--fish-body);
}
.pricing-view .pricing-static .features li.off { color: var(--fish-description); }
.pricing-view .pricing-static .features li.off span { text-decoration: line-through; }
.pricing-view .pricing-static .features li.off svg { color: var(--fish-description); }
.pricing-view .pricing-static .features li.plus { display: block; padding: 2px 0; }
.pricing-view .pricing-static .plus-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fish-subtitle);
  font-family: var(--font-description);
  font-size:14px;
  line-height: 20px;
  text-align: left;
  cursor: pointer;
  transition: opacity .15s;
}
.pricing-view .pricing-static .plus-toggle:hover { opacity: .8; }
.pricing-view .pricing-static .plus-toggle .plus-chevron {
  width: 16px;
  height: 16px;
  color: currentColor;
  transition: transform .2s;
}
.pricing-view .pricing-static .plus-toggle[aria-expanded="true"] .plus-chevron { transform: rotate(180deg); }
.pricing-view .pricing-static .plus-list { margin-top: 8px; }
/* ----------------------------------------------- current plan / locked -- */
/* Fish "Current Plan": rounded-full px-2 py-1 text-xs font-medium leading-4
   bg-green-100 text-green-700,
inline after the plan name (auth script puts
   it there). Dark variants omitted: this page is light-only (color-scheme). */
.pricing-static .current-plan-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius:999px;
  background: var(--fish-current-bg);
  color: var(--fish-current-text);
  font-family: var(--font-heading);
  font-size:12px;
  line-height: 16px;
  font-weight: 500;
  white-space: nowrap;
}
.pricing-view .pricing-static .card.downgrade-locked { opacity: .7; }
.pricing-view .pricing-static .card.downgrade-locked .cta,
.pricing-view .pricing-static .card.current-plan .cta[disabled],
.pricing-view .pricing-static .free-card.current-plan .free-cta[disabled] {
  background: var(--fish-primary-disabled) !important;
  border-color: transparent !important;
  color: #fff !important;
}
/* ------------------------------------------------- free plan strip -- */
.pricing-static .free-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 1.6fr) auto;
  align-items: center;
  gap: 16px 40px;
  max-width: 1104px;        /* = 3 cards of 360 + 2 gaps of 12 */
  margin: 8px auto 0;
  padding: 24px;
  background: var(--fish-elevated);
  border: 1px solid var(--fish-border-light);
  border-radius:16px;
  box-shadow: var(--fish-shadow-card);
}
.pricing-view .pricing-static .free-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.pricing-view .pricing-static .free-title h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size:24px;
  line-height: 32px;
  font-weight: 500;
  color: var(--fish-title);
}
.pricing-view .pricing-static .free-price strong {
  font-size:24px;
  line-height: 32px;
  font-weight: 500;
  color: var(--fish-description);
}
.pricing-view .pricing-static .free-info .note {
  font-family: var(--font-description);
  font-size:14px;
  line-height: 20px;
  color: var(--fish-description);
}
.pricing-view .pricing-static .free-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pricing-view .pricing-static .free-facts .quota-monthly { font-size: inherit; line-height: inherit; font-weight: 700; }
.pricing-view .pricing-static .free-card .free-cta {
  width: auto;
  min-width: 180px;
  background: transparent;
  border-color: var(--fish-border-default);
  color: var(--fish-title);
}
.pricing-view .pricing-static .free-card .free-cta:hover { background: var(--fish-fill-weak); }
.pricing-view .pricing-static .free-title { flex-wrap: wrap; }
.pricing-view .pricing-static .free-title .current-plan-badge { align-self: center; }
/* ---------------------------------------------------------- trust strip -- */
.pricing-static .pricing-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 28px;
  padding: 0;
}
.pricing-view .pricing-static .pricing-trust .trust-cards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.pricing-view .pricing-static .pricing-trust .trust-card {
  padding: 5px 8px;
  border: 1px solid var(--fish-border-default);
  border-radius:8px;
  color: var(--ink-60);
  font-size:12px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1;
  white-space: nowrap;
}
.pricing-view .pricing-static .pricing-trust .trust-points {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pricing-view .pricing-static .pricing-trust .trust-points li {
  font-family: var(--font-description);
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-60);
  font-size:13px;
  line-height: 18px;
}
.pricing-view .pricing-static .pricing-trust .trust-points svg { flex: none; color: var(--ink-45); }
.pricing-view .pricing-static .pricing-trust .trust-points a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--ink-30);
  text-underline-offset: 3px;
}
.pricing-view .pricing-static .pricing-trust .trust-points a:hover { color: var(--ink); }
/* Only one payment rail is real for a given visitor (USD -> cards/Polar,
VND -> VietQR/SePay). Default before the init runs is the USD copy. */
.pricing-static .pricing-trust .only-vnd,
.pricing-view .pricing-static .pricing-trust li.only-vnd { display: none; }
.pricing-view .pricing-static .pricing-trust[data-currency="VND"] .only-vnd,
.pricing-view .pricing-static .pricing-trust[data-currency="VND"] li.only-vnd { display: flex; }
.pricing-view .pricing-static .pricing-trust[data-currency="VND"] .only-usd,
.pricing-view .pricing-static .pricing-trust[data-currency="VND"] li.only-usd { display: none; }
/* -------------------------------------------------------- compare table -- */
.pricing-static .compare-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.pricing-view .pricing-static .compare-head h2,
.pricing-view .pricing-static .faq-section h2 {
  margin: 0;
  font-size:32px;
  line-height: 40px;
  font-weight: 500;
  letter-spacing: 0;
}
.pricing-view .pricing-static .compare-nav { display: none; gap: 8px; }
.pricing-view .pricing-static .compare-nav button {
  width: 32px;
  height: 32px;
  border-radius:999px;
  border: 1px solid var(--fish-border-default);
  background: transparent;
  color: var(--ink);
  font-size:16px;
  line-height: 1;
  cursor: pointer;
}
.pricing-view .pricing-static .compare-nav button:hover { background: var(--fill); }
.pricing-view .pricing-static .compare-scroll { overflow: auto hidden; }
.pricing-view .pricing-static .compare-table {
  width: 100%;
  min-width: 1040px;
  border-collapse: separate;
  border-spacing: 0;
  font-size:14px;
  font-variant-numeric: tabular-nums;
}
.pricing-view .pricing-static .compare-table th,
.pricing-view .pricing-static .compare-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
  text-align: center;
  vertical-align: middle;
  color: var(--ink-80);
}
.pricing-view .pricing-static .compare-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0 12px 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  vertical-align: bottom;
}
.pricing-view .pricing-static .compare-table .sticky-col {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 220px;
  padding-left: 0;
  background: var(--bg);
  text-align: left;
  font-weight: 400;
  color: var(--ink-60);
}
.pricing-view .pricing-static .compare-table thead .sticky-col {
  z-index: 3;
  font-size:13px;
  font-weight: 500;
  color: var(--ink-45);
}
.pricing-view .pricing-static .plan-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 150px;
  text-align: left;
}
.pricing-view .pricing-static .plan-head h3 {
  margin: 0;
  font-size:16px;
  font-weight: 600;
  color: var(--ink);
}
.pricing-view .pricing-static .plan-price {
  margin-bottom: 10px;
  font-size:14px;
  font-weight: 400;
  color: var(--ink-60);
}
.pricing-view .pricing-static .plan-price .currency-small { font-size: inherit; }
.pricing-view .pricing-static .mini-btn {
  width: 100%;
  min-height: 32px;
  padding: 0 12px;
  border-radius:999px;
  border: 1px solid var(--fish-border-default);
  background: transparent;
  color: var(--fish-title);
  font-size:14px;
  line-height: 20px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .1s;
}
.pricing-view .pricing-static .mini-btn:hover { background: var(--fish-fill-weak); }
.pricing-view .pricing-static .mini-btn.primary { background: var(--fish-primary); border-color: transparent; color: #fff; }
.pricing-view .pricing-static .mini-btn.primary:hover { background: var(--fish-primary-hover); }
.pricing-view .pricing-static .mini-btn:disabled { background: var(--fish-primary-disabled); border-color: transparent; color: #fff; cursor: not-allowed; }
/* Body cells align with the left-aligned plan headers above them */
.pricing-static .compare-table tbody td:not(.sticky-col) { text-align: left; padding-left: 12px; }
.pricing-view .pricing-static .group-row td {
  padding-top: 32px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink) !important;
  font-size:13px;
  font-weight: 600 !important;
  text-align: left;
}
.pricing-view .pricing-static .group-row .sticky-col { background: var(--bg); }
.pricing-view .pricing-static .check { color: var(--ink); font-weight: 500; }
.pricing-view .pricing-static .cross { color: var(--ink-30); font-weight: 400; }
.pricing-view .pricing-static .compare-table .only-monthly,
.pricing-view .pricing-static .compare-table .only-yearly { display: inline; }
/* ----------------------------------------------------------------- FAQ -- */
.pricing-static .faq-section {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.pricing-view .pricing-static .faq-section h2 { margin-bottom: 24px; text-align: center; }
.pricing-view .pricing-static .faq-grid { border-top: 1px solid var(--line); }
.pricing-view .pricing-static .faq-item { border-bottom: 1px solid var(--line); }
.pricing-view .pricing-static .faq-question {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.pricing-view .pricing-static .faq-question h3 {
  flex: 1;
  margin: 0;
  font-size:16px;
  line-height: 24px;
  font-weight: 500;
}
.pricing-view .pricing-static .faq-question:hover h3 { color: var(--ink-60); }
.pricing-view .pricing-static .faq-icon { display: none; }
.pricing-view .pricing-static .faq-chevron {
  flex: none;
  color: var(--ink-45);
  transition: transform .2s ease;
}
.pricing-view .pricing-static .faq-item.open .faq-chevron { transform: rotate(180deg); }
.pricing-view .pricing-static .faq-answer {
  font-family: var(--font-description);
  display: none;
  padding: 0 32px 20px 0;
  color: var(--ink-60);
  font-size:15px;
  line-height: 24px;
}
.pricing-view .pricing-static .faq-item.open .faq-answer { display: block; }
/* sticky site header is 64px: keep a linked question clear of it */
.pricing-static .faq-item { scroll-margin-top: 96px; }
.pricing-view .pricing-static .faq-answer a {
  color: var(--fish-title);
  text-decoration: underline;
  text-decoration-color: var(--fish-border-default);
  text-underline-offset: 3px;
}
.pricing-view .pricing-static .faq-answer a:hover { text-decoration-color: currentColor; }
/* benefit / table labels that open their FAQ answer */
.pricing-static a.faq-link {
  color: inherit;
  text-decoration: underline dotted;
  text-decoration-color: var(--fish-description);
  text-underline-offset: 3px;
}
.pricing-view .pricing-static a.faq-link:hover { color: var(--fish-title); text-decoration-style: solid; }
.pricing-view .pricing-static .footnote {
  margin-top: 22px;
  text-align: center;
  color: var(--ink-45);
  font-size:12px;
}
/* ----------------------------------------------------------- responsive -- */
@media (max-width: 1120px) {
  .pricing-static .compare-nav { display: flex; }
}
@media (max-width: 900px) {
.pricing-view .pricing-static .cards {
    flex-direction: column;
    align-items: center;
  }
.pricing-view .pricing-static .card { flex: none; width: 100%; max-width: 360px; }
.pricing-view .pricing-static .free-card {
    grid-template-columns: minmax(0, 1fr);
    max-width: 360px;
  }
.pricing-view .pricing-static .free-facts { grid-template-columns: minmax(0, 1fr); }
.pricing-view .pricing-static .free-card .free-cta { width: 100%; }
}
@media (max-width: 767px) {
.pricing-view .pricing-static .page-title { font-size:32px; line-height: 44px; }
}
@media (max-width: 680px) {
.pricing-view .pricing-static .pricing-trust { flex-direction: column; gap: 12px; }
.pricing-view .pricing-static .pricing-trust .trust-points { flex-direction: column; gap: 6px; }
.pricing-view .pricing-static .compare-head h2,
.pricing-view .pricing-static .faq-section h2 { font-size:24px; }
.pricing-view .pricing-static .compare-table .sticky-col { min-width: 150px; }
.pricing-view .pricing-static .faq-question h3 { font-size:15px; }
}
/* ===========================================================================
   Spacing utilities — Tailwind names on Tailwind's 4px scale (1 = 4px),
written in the markup the way fishaudio.com does (`space-y-4 p-4 pt-8 pb-3`).
   Scoped to .pricing-static and kept last so a utility wins over a component.
   Only the steps the page uses are defined — add one when you need it.
   =========================================================================== */
.pricing-static .space-y-1 > :not([hidden]) ~ :not([hidden]) { margin-top: 4px; }
.pricing-view .pricing-static .space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 8px; }
.pricing-view .pricing-static .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 16px; }
.pricing-view .pricing-static .p-4 { padding: 16px; }
.pricing-view .pricing-static .px-3 { padding-left: 12px; padding-right: 12px; }
.pricing-view .pricing-static .px-4 { padding-left: 16px; padding-right: 16px; }
.pricing-view .pricing-static .py-2 { padding-top: 8px; padding-bottom: 8px; }
.pricing-view .pricing-static .py-3 { padding-top: 12px; padding-bottom: 12px; }
.pricing-view .pricing-static .pt-2 { padding-top: 8px; }
.pricing-view .pricing-static .pt-8 { padding-top: 32px; }
.pricing-view .pricing-static .pb-3 { padding-bottom: 12px; }
.pricing-view .pricing-static .mt-7 { margin-top: 28px; }
.pricing-view .pricing-static .mt-28 { margin-top: 112px; }
/* max-sm: = below 680px on this page */
@media (max-width: 680px) {
  .pricing-static .max-sm\:mt-18 { margin-top: 72px; }
}

/* ===========================================================================
   STUDIO PRICING — hand-written layer.

   The bulk of assets/css/studio/pricing.css is GENERATED at build time from
   assets/pricing-static.css (see syncStudioPricingCss() in scripts/generate.mjs):
   every `.pricing-static …` rule is scoped under `.pricing-view`, so the studio
   view and the public page cannot drift apart. Everything in THIS file is
   appended verbatim after those rules — put here only what the public page
   does not need: the pane layout, the floating compare-table header and the
   current-plan ring.
   =========================================================================== */
/* ===========================================================================
   STUDIO LAYER — only what the public page does not need.
   Everything above is generated; see scripts/build-studio-pricing-css.py.
   =========================================================================== */

/* The compare table has min-width:1040px (public page: the block box simply
   overflows and .compare-scroll scrolls it). Here .pricing-static is a FLEX item,
   and a flex item's automatic minimum size is its min-content width — so the
   table stretched the whole pane and pushed the view out of the viewport on
   mobile. min-width:0 keeps the pane at the container's width. */
.pricing-view .pricing-static,
.pricing-view .pricing-static .page,
.pricing-view .pricing-static .compare-section,
.pricing-view .pricing-static .compare-scroll { min-width: 0; max-width: 100%; }

/* The view is one pane of the studio shell: it owns its own scroll container
   (app.js flips its inline display between flex/none), so it must be a flex
   column and the page must not scroll with the document. */
.pricing-view {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: none;
  flex-direction: column;
  grid-column: 1 / -1;
}
/* The pane is the page. The pricing sheet paints its own background, and giving
   the pane padding turned that background into a floating grey slab with four
   different gutters (20px sides, 28px top, 48px bottom, then a hard edge where
   the content stopped). Full-bleed here, horizontal padding on .page below, so
   /studio/pricing/ reads like a page of the app instead of a pasted card. */
.pricing-view .pview-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0;
  display: block;
}
.pricing-view .pricing-static {
  width: 100%;
  max-width: none;
  min-height: 100%;      /* the grey covers the whole pane, also on short pages */
  margin: 0;
  display: block;
}
/* `margin: 0` is load-bearing: the public rule is `margin: 0 auto`, and an auto
   cross-axis margin stops a flex item from stretching — the page then sized
   itself to the compare table's min-width and slid out of the viewport at 390px.
   max-width keeps one readable column on very wide panes (studio + no sidebar). */
.pricing-view .pricing-static .page {
  margin: 0 auto;
  width: 100%;
  max-width: 1180px;
  padding: 40px 24px 56px;
}

/* Section headings line up. The public page can afford a left-aligned "Compare
   plans" heading because it is 1392px wide with the title centred above it; in a
   1094px pane the same heading reads as a stray left edge next to the centred
   page title and the centred FAQ heading, so centre it here and pin the scroll
   arrows to the right edge instead of letting them push the heading around. */
.pricing-view .pricing-static .compare-head {
  position: relative;
  justify-content: center;
}
.pricing-view .pricing-static .compare-head .compare-nav {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.pricing-view .pricing-static .compare-head h2 { text-align: center; }

/* App pane, not a landing hero: the visible heading is one step smaller than
   the public 56px. The document's single <h1> is the studio shell's hidden
   .ov-page-title (templates/studio.html), so this is an <h2>. */
.pricing-view .pricing-static .page-title { font-size: 32px; line-height: 40px; }
.pricing-view .pricing-static .page-sub { font-size: 14px; line-height: 20px; }
.pricing-view .pricing-static .cycle-row { margin-top: 20px; }

/* Signed-in users get the free card hidden by pricing.js; keep the space tidy. */
.pricing-view .pricing-static .free-card {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) auto;
  margin-top: 12px;
  padding: 20px 24px;
}
/* The six free-plan facts must stay on one line each: at the public 1.6fr the
   column was ~185px and "50.000 ký tự mỗi tháng" broke into two lines. */
.pricing-view .pricing-static .free-facts { gap: 4px 28px; }
.pricing-view .pricing-static .free-facts li { font-size: 13px; }

/* The public page breathes with 112px between sections because it is 1392px
   wide; inside a ~1100px pane that reads as three separate columns of void.
   64px keeps the same rhythm at this width. */
.pricing-view .pricing-static .mt-28 { margin-top: 64px; }
@media (max-width: 680px) {
  .pricing-view .pricing-static .max-sm\:mt-18 { margin-top: 40px; }
}

/* Current plan: Fish's green pill (from the base sheet) plus a ring on the card
   and on the compare column, which is how the studio shows "you are here". */
.pricing-view .pricing-static .card.current-plan {
  border-color: var(--fish-border-opaque);
  box-shadow: 0 0 0 2px var(--fish-border-opaque);
}
.pricing-view .pricing-static .plan-head.current-plan {
  padding: 6px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--fish-border-opaque);
}

/* Floating clone of the compare-table header (pricing.js builds it): a fixed
   overlay cannot live inside the horizontally scrolling wrapper, so it is
   appended to it and pinned/clipped by JS. */
.pricing-view .pricing-static .compare-sticky-head {
  position: fixed;
  top: 0;
  z-index: 20;
  overflow: hidden;
  display: none;
  pointer-events: none;
  background: var(--fish-elevated);
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .18);
}
.pricing-view .pricing-static .compare-sticky-head.show { display: block; }
.pricing-view .pricing-static .compare-sticky-head table {
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
}
.pricing-view .pricing-static .compare-sticky-head th {
  background: var(--fish-elevated);
  border-bottom: 1px solid var(--fish-border-light);
}
.pricing-view .pricing-static .compare-sticky-head .mini-btn { pointer-events: auto; }

/* The public sheet hides the compare-table arrows on desktop (the table fits
   its 1392px page). The pane here is ~1040px, so the table can still overflow —
   pricing.js adds .compare-overflow when it does, and the arrows come back. */
.pricing-view .pricing-static .compare-head.compare-overflow .compare-nav { display: flex; }

/* The pane is ~1094px wide at 1440 (the studio sidebar takes 200), and the
   compare table's own min-widths (210px sticky column + 5 x 180px plan columns)
   add up to ~1110 — so the last column fell off the right edge and the table
   scrolled horizontally even on a desktop. Tighter floors keep all five columns
   visible without changing the design of the cells. */
/* Cell metrics, not just the floor: the auto table layout sized itself from the
   180px plan columns + 210px sticky column (≈1110px), so even a 1086px page
   needed a horizontal scroll. Tighter floors and padding bring it to ~900px,
   which fits the pane at 1280 and wider; below that the arrows take over. */
.pricing-view .pricing-static .compare-table { min-width: 860px; }
.pricing-view .pricing-static .compare-table th,
.pricing-view .pricing-static .compare-table td { padding: 12px 12px; }
.pricing-view .pricing-static .compare-table .sticky-col { min-width: 132px; }
.pricing-view .pricing-static .plan-head { min-width: 132px; gap: 6px; }
.pricing-view .pricing-static .mini-btn { height: 36px; }

/* The studio view is often narrower than the public page (open sidebar), so the
   card grid collapses on the container's width rather than the viewport's. */
@media (max-width: 1080px) {
  .pricing-view .pricing-static .cards { flex-wrap: wrap; }
  .pricing-view .pricing-static .card { flex: 1 1 320px; }
  .pricing-view .pricing-static .free-card { grid-template-columns: minmax(0, 1fr); }
  .pricing-view .pricing-static .free-card .free-cta { width: 100%; }
}