/* ==========================================================================
   pricing.css — PlansFlow pricing v9.1 (2026-09-17)
   --------------------------------------------------------------------------
   Loaded by pricing.html only, after styles.css and swiss.css. The page's
   own layer in the Swiss-Flow language: a centred statement with the one
   control under it, a centred ledger that aligns the two plans on shared
   lines, three numbers, a plain security statement with a single technical
   plate, five questions, and a closing orange plane.

   v9: no row rules anywhere on the page — the row labels, the type scale
   and the spacing carry the hierarchy. The only lines left are the section
   labels' top rules (the site's section signature) and the dividers between
   the three top-up columns. The ledger is narrower and centred.

   No script beyond theme.js and canvas-field.js: the billing toggle is a
   pair of radios and :checked, the questions are native <details>.
   Standard: references/swiss-flow-design/.
   ========================================================================== */

/* ---------- 1. Hero — centred statement, one control ------------------------ */
.pr-hero-stack { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 8px; }
/* A full-width line box avoids shrink-to-fit / balanced-wrap recalculation. */
.pr-hero h1 { width: 100%; text-wrap: wrap; font-size: clamp(48px, 6vw, 100px); line-height: 1; letter-spacing: -0.06em; }
.pr-hero-stack > p { margin-top: 28px; max-width: 46ch; }
.pr-hero-stack .pr-bill { margin-top: 36px; }
.pr-note { margin-top: 18px; max-width: none; color: var(--sw-muted); }
.pr-note strong { font-weight: 500; color: var(--sw-ink); }

/* The billing control: two labels in one ink-bordered rectangle. The radios
   sit before <main> (styles.css hides them) so `:checked ~ main` reaches
   both the labels and every figure on the page. */
.pr-switch { display: inline-grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--sw-ink); }
.pr-switch label {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 140px; min-height: 44px; padding: 0 20px;
  font-family: var(--sw-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--sw-ink); cursor: pointer;
  transition: background-color 160ms var(--sw-ease), color 160ms var(--sw-ease);
}
.pr-switch label + label { border-left: 1px solid var(--sw-ink); }
.pr-switch label:hover { background: rgb(255 122 47 / 0.1); }
#bill-monthly:checked ~ main .pr-switch label[for="bill-monthly"],
#bill-yearly:checked  ~ main .pr-switch label[for="bill-yearly"] { background: var(--sw-ink); color: var(--sw-paper); }
#bill-monthly:focus-visible ~ main .pr-switch label[for="bill-monthly"],
#bill-yearly:focus-visible  ~ main .pr-switch label[for="bill-yearly"] { outline: 2px solid var(--sw-accent); outline-offset: 3px; }
.pr-save { opacity: 0.72; }

/* ---------- 2. Plans — a centred ledger, no rules ---------------------------- */
/* One grid, three columns: row labels, Free, Pro. The table markup keeps the
   comparison semantics; the grid places every cell on a shared line so
   comparable values sit level. */
.pr-plans-section { padding-top: 48px; }
.pr-ledger { max-width: 1040px; margin: 40px auto 0; }
.pr-plans { display: grid; grid-template-columns: 1.3fr 4fr 4fr; column-gap: 40px; width: 100%; border-collapse: collapse; }
.pr-plans thead, .pr-plans tbody, .pr-plans tr { display: contents; }
.pr-plans th, .pr-plans td {
  display: block; min-width: 0; padding: 12px 0 26px;
  text-align: left; font-weight: 400; vertical-align: top;
  grid-row: var(--r);
}
.pr-th { grid-column: 1; padding-top: 16px; font-family: var(--sw-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sw-muted); }
.is-free { grid-column: 2; }
.is-pro { grid-column: 3; }
.r1 { --r: 1; } .r2 { --r: 2; } .r3 { --r: 3; } .r4 { --r: 4; } .r5 { --r: 5; } .r6 { --r: 6; } .r7 { --r: 7; } .r8 { --r: 8; } .r9 { --r: 9; }
.pr-cell-label { display: none; }

.pr-cell { font-size: 15px; line-height: 1.5; color: var(--sw-ink); }
.pr-cell strong { font-weight: 500; }
.pr-name { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 14px; font-size: clamp(28px, 2.4vw, 36px); line-height: 1; letter-spacing: -0.04em; }
.pr-name small { font-family: var(--sw-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sw-muted); }
.pr-tagline { display: block; margin-top: 10px; max-width: 32ch; font-size: 15px; color: var(--sw-muted); }
.pr-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.pr-amount { font-size: clamp(44px, 4.2vw, 64px); line-height: 0.95; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.pr-per { font-size: 15px; color: var(--sw-muted); }
.pr-billed { display: block; margin-top: 10px; font-family: var(--sw-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sw-muted); }

.pr-cta {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  width: 100%; max-width: 320px; min-height: 48px; padding: 12px 18px;
  border: 1px solid var(--sw-ink); color: var(--sw-ink); font-size: 15px;
  transition: background-color 160ms var(--sw-ease);
}
.pr-cta span { font-family: var(--sw-mono); font-size: 22px; line-height: 1; transition: transform 200ms var(--sw-ease), color 160ms var(--sw-ease); }
.pr-cta:hover { background: rgb(255 122 47 / 0.1); }
.pr-cta:hover span { transform: translate(3px, -3px); }
.pr-cta.is-primary { background: var(--sw-ink); color: var(--sw-paper); }
.pr-cta.is-primary:hover { background: var(--sw-ink); }
.pr-cta.is-primary:hover span { color: var(--sw-accent); }
.pr-fine { display: block; margin-top: 12px; max-width: 40ch; font-size: 13.5px; line-height: 1.5; color: var(--sw-muted); }
.pr-inherit { font-family: var(--sw-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sw-ink); }
.pr-none { color: var(--sw-muted); }
.pr-tax { margin-top: 16px; color: var(--sw-muted); }

/* ---------- 3. Top-ups — three numbers, column dividers only ------------------ */
.pr-topups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pr-topup { display: flex; flex-direction: column; gap: 10px; min-height: 200px; padding: 8px 24px 8px 0; color: inherit; }
.pr-topup + .pr-topup { padding-left: 24px; border-left: 1px solid var(--sw-line); }
.pr-topup-credits { font-size: clamp(48px, 5.4vw, 88px); line-height: 0.95; letter-spacing: -0.055em; font-variant-numeric: tabular-nums; }
.pr-topup-unit { color: var(--sw-muted); }
.pr-topup-price { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-top: auto; font-size: 18px; }
.pr-topup-price span { font-family: var(--sw-mono); font-size: 22px; line-height: 1; transition: transform 200ms var(--sw-ease), color 160ms var(--sw-ease); }
.pr-topup:hover .pr-topup-price span { transform: translate(3px, -3px); color: var(--sw-accent); }
.pr-topup:hover .pr-topup-price { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* ---------- 4. Payments & security — a plain statement and one plate --------- */
.pr-trust { display: grid; grid-template-columns: 5fr 7fr; gap: 40px 64px; margin-top: 40px; }
.pr-trust h2 { font-size: clamp(32px, 3.2vw, 48px); line-height: 1.05; }
.pr-trust-lead > p { margin-top: 24px; max-width: 46ch; }
.pr-trust-lead strong { font-weight: 500; }
/* The plate: literal ASCII, selectable, one accessible sentence. The wide
   version reads left to right; the narrow one recomposes top to bottom. */
.pr-plate {
  margin: 32px 0 0; padding: 0;
  font-family: var(--sw-mono); font-size: 12px; line-height: 1.6; letter-spacing: 0;
  color: var(--sw-ink); white-space: pre; overflow-x: auto; font-variant-ligatures: none;
}
.pr-plate-narrow { display: none; }
.pr-points { margin: 0; padding: 0; list-style: none; }
.pr-points li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 14px 0; font-size: 18px; line-height: 1.5; }
.pr-points li .eyebrow { padding-top: 6px; color: var(--sw-muted); }

/* ---------- 5. Questions — native details, no rules -------------------------- */
.pr-faq summary { display: grid; grid-template-columns: 64px minmax(0, 1fr) 48px; align-items: baseline; gap: 16px; padding: 16px 0; cursor: pointer; list-style: none; }
.pr-faq summary::-webkit-details-marker { display: none; }
.pr-faq summary .eyebrow { color: var(--sw-muted); }
.pr-q { font-size: clamp(20px, 2.2vw, 28px); line-height: 1.2; letter-spacing: -0.03em; }
.pr-faq summary::after { content: "+"; justify-self: end; font-family: var(--sw-mono); font-size: 22px; line-height: 1; color: var(--sw-muted); }
.pr-faq details[open] summary::after { content: "−"; color: var(--sw-ink); }
.pr-faq summary:hover .pr-q { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.pr-faq summary:focus-visible { outline: 2px solid var(--sw-accent); outline-offset: -2px; }
.pr-faq details > p { margin: -2px 0 24px 80px; max-width: 58ch; font-size: 17px; }

/* ---------- 6. Access — the one orange plane --------------------------------- */
/* The plane itself is swiss.css `.sw-plane`; only the composition lives here. */
.pr-access h2 { margin-top: 48px; max-width: 14ch; font-size: clamp(44px, 6.4vw, 104px); line-height: 1.02; }
.pr-access-bottom { display: grid; grid-template-columns: 7fr 5fr; gap: 32px; align-items: end; margin-top: 48px; }
.pr-access-bottom p { max-width: 36ch; }
.pr-access .button { justify-self: end; }

/* ---------- 7. Responsive ------------------------------------------------------ */
@media (max-width: 1000px) {
  /* Section headings stack earlier than on the homepage: these statements are
     longer, and a flexed h2 beside its lede turns into a ladder of words. */
  .pr .section-heading { display: block; }
  .pr .section-heading p { margin-top: 24px; padding-right: 0; max-width: 52ch; }
  .pr .section-heading br { display: none; }
  .pr-trust { grid-template-columns: 1fr; gap: 40px; }
  .pr-topup { min-height: 180px; }
}

@media (max-width: 900px) {
  /* The ledger stacks plan by plan; each cell carries its own row label. */
  .pr-plans { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .pr-plans .pr-th { display: none; }   /* outranks `.pr-plans th { display: block }` */
  .is-free, .is-pro { grid-column: 1; }
  /* Explicit rows: grid lines take integers, not calc(). Free 1–9, Pro 10–18. */
  .is-pro.r1 { grid-row: 10; } .is-pro.r2 { grid-row: 11; } .is-pro.r3 { grid-row: 12; } .is-pro.r4 { grid-row: 13; } .is-pro.r5 { grid-row: 14; } .is-pro.r6 { grid-row: 15; } .is-pro.r7 { grid-row: 16; } .is-pro.r8 { grid-row: 17; } .is-pro.r9 { grid-row: 18; }
  .is-free.r4 { display: none; }
  .pr-cell-label { display: block; margin-bottom: 8px; font-family: var(--sw-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sw-muted); }
  .pr-plans th, .pr-plans td { padding: 10px 0 22px; }
  .is-pro.r1 { margin-top: 48px; }
}

@media (max-width: 700px) {
  .pr-hero h1 { font-size: clamp(40px, 10.5vw, 64px); }
  .pr-hero-stack > p { margin-top: 20px; font-size: 16px; }
  .pr-hero-stack .pr-bill { margin-top: 28px; width: 100%; max-width: 360px; }
  .pr-switch { width: 100%; }
  .pr-switch label { min-width: 0; padding: 0 12px; }
  .pr-plans-section { padding-top: 32px; }
  .pr-name { font-size: 30px; }
  .pr-amount { font-size: 48px; }
  .pr-topups { grid-template-columns: 1fr; }
  .pr-topup { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; min-height: 0; padding: 14px 0; }
  .pr-topup + .pr-topup { padding-left: 0; border-left: 0; }
  .pr-topup-credits { font-size: 44px; }
  .pr-topup-price { margin-top: 0; margin-left: auto; gap: 12px; }
  .pr-plate-wide { display: none; }
  .pr-plate-narrow { display: block; }
  .pr-points li { grid-template-columns: 36px minmax(0, 1fr); font-size: 16px; }
  .pr-faq summary { grid-template-columns: 40px minmax(0, 1fr) 32px; padding: 14px 0; }
  .pr-faq details > p { margin: 0 0 20px; font-size: 16px; }
  .pr-access h2 { margin-top: 32px; max-width: none; font-size: clamp(40px, 10vw, 64px); }
  .pr-access-bottom { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
  .pr-access .button { justify-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .pr-switch label, .pr-cta, .pr-cta span, .pr-topup-price span { transition: none; }
  .pr-cta:hover span, .pr-topup:hover .pr-topup-price span { transform: none; }
}