/* marketing/css/pricing.css
 *
 * The pricing page's look (2026-10-09): the "Pick a plan. Earn the rest."
 * design from the Rhythm Club Playbook, section 03. Light by default and dark
 * when the visitor's system is dark, like the app. Type is the app's own:
 * Poppins for display, Inter for text, JetBrains Mono for small labels.
 * Colours are tokens on :root, so a restyle is a change of values here.
 */
:root {
  color-scheme: light dark;
  --ground: #F6F4F9; --panel: #FFFFFF; --sunk: #EFECF5; --sunk-2: #E6E2F0;
  --ink: #1A1040; --ink-2: #4A4560; --ink-3: #6A6580;
  --rule: #E4E0EE; --rule-2: #CDC6DF;
  --accent: #7B1FA2; --accent-hover: #6A1B9A; --accent-soft: #F4E9F8;
  --club: #8E24AA;
  --btn: #1A1040; --btn-ink: #FFFFFF;
  --stage: #1A1040; --on-stage: #F5F2FF; --on-stage-2: #C9BFE8; --stage-rule: rgba(255,255,255,.18);
  --beat: #F48FB1;
  --crit: #B42318; --crit-bg: #FCE7E4;
  --seal-ring: transparent;
  --frame: #ECE9F3;
  --shadow-2: 0 2px 4px rgba(26,16,64,.06), 0 18px 44px rgba(26,16,64,.13);
  --scrim: rgba(18,10,40,.52);
  --display: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0F0B1C; --panel: #171228; --sunk: #1F1934; --sunk-2: #28213F;
    --ink: #EFEBF9; --ink-2: #BBB4D3; --ink-3: #918AAC;
    --rule: #2A2341; --rule-2: #3B3258;
    --accent: #D7A6E3; --accent-hover: #E8C7EF; --accent-soft: #2B1B3E;
    --club: #B455C8;
    --btn: #EFEBF9; --btn-ink: #1A1040;
    --stage: #221452;
    --crit: #F59B91; --crit-bg: #3A1613;
    --seal-ring: rgba(255,255,255,.4);
    --frame: #211A36;
    --shadow-2: 0 2px 6px rgba(0,0,0,.4), 0 20px 50px rgba(0,0,0,.45);
    --scrim: rgba(4,2,12,.66);
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.page { max-width: 1080px; margin: 0 auto; padding: 20px 20px 72px; }
html.pricing-loading .page { visibility: hidden; }

/* seal (the club's mark) */
.seal { display: inline-block; flex: none; vertical-align: -3px; }
.seal .shape { stroke: var(--seal-ring); stroke-width: 1; }
.s14 { width: 14px; height: 14px; } .s18 { width: 18px; height: 18px; }
.emb { display: block; height: auto; max-width: 100%; }

/* top bar: back link + language */
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding-bottom: 8px; }
.back { font-size: 14px; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.back:hover { text-decoration: underline; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: 999px; background: var(--sunk-2); }
.seg button { font: inherit; font-size: 13.5px; font-weight: 500; min-height: 36px; min-width: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(26,16,64,.14); }

.load-error { background: var(--crit-bg); color: var(--crit); border-radius: 12px; padding: 14px 16px; margin: 16px 0; }

/* head */
.pp-head { padding: 28px 0 26px; }
.pp-title { font-weight: 700; font-size: clamp(28px, 4.4vw, 42px); letter-spacing: -.02em; line-height: 1.1; margin-bottom: 10px; }
.pp-sub { color: var(--ink-2); max-width: 58ch; font-size: 16.5px; }

/* the open beta (2026-10-21): the club's dark stage, so it reads as an
   invitation rather than a plan; js/open_beta.js sets `hidden` when it ends */
.ob { margin: 0 0 22px; background: var(--stage); color: var(--on-stage); border-radius: 20px; padding: 24px 26px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px 34px; align-items: center; }
.ob[hidden] { display: none; }
.ob-main { min-width: 0; }
.ob-chip { display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--beat); color: #1A1040; }
.ob-h { font-weight: 700; font-size: clamp(21px, 2.6vw, 25px); line-height: 1.2; color: var(--on-stage); margin-top: 10px; }
.ob-body { color: var(--on-stage-2); font-size: 15.5px; margin-top: 8px; max-width: 52ch; }
.ob-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; margin-top: 18px; padding: 0 22px; border-radius: 12px; background: #FFFFFF; color: #1A1040; font-weight: 600; font-size: 15px; text-decoration: none; }
.ob-cta:hover { color: #1A1040; opacity: .92; }
.ob :focus-visible { outline-color: var(--on-stage); }
.ob-perks { list-style: none; padding: 0; display: grid; gap: 10px; font-size: 15px; line-height: 1.45; min-width: 0; }
.ob-perks li { position: relative; padding-left: 20px; }
.ob-perks li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 2px; background: var(--beat); }
@media (max-width: 760px) { .ob { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; } .ob-cta { width: 100%; } }

/* the Monthly / Yearly switch (2026-10-12); the saving is on the cards only */
.period { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; }
.period .seg button { min-width: 92px; }
.save { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 5px 10px; border-radius: 999px; }

/* plan cards */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
@media (max-width: 900px) { .plans { grid-template-columns: minmax(0, 1fr); } }
.plan { background: var(--panel); border: 1px solid var(--rule); border-radius: 20px; padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.plan.rec { border: 2px solid var(--ink); padding: 21px 21px 17px; }
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.plan-name { font-family: var(--display); font-weight: 700; font-size: 23px; line-height: 1.1; }
.ribbon { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; background: var(--ink); color: var(--panel); padding: 4px 9px; border-radius: 999px; }
.plan-tag { font-size: 14px; color: var(--ink-3); margin-top: -10px; }
.price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.price b { font-family: var(--display); font-weight: 700; font-size: 42px; letter-spacing: -.025em; line-height: 1; font-variant-numeric: tabular-nums; }
.price .unit { color: var(--ink-3); font-size: 14px; margin-right: 4px; }
/* yearly (2026-10-16): the card's saving, beside the price.
   The space before it is the unit's trailing margin, so a chip that wraps
   under a long lira price still lines up with the price's left edge. */
.price .save { align-self: center; }
.bill { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); margin-top: -6px; }
.cta { display: flex; align-items: center; justify-content: center; min-height: 46px; font: inherit; font-weight: 600; font-size: 15px; text-align: center; text-decoration: none; border-radius: 12px; padding: 0 14px; border: 1.5px solid var(--ink); color: var(--ink); background: transparent; cursor: pointer; }
.cta:hover { color: var(--ink); background: var(--sunk); }
.cta.fill { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.cta.fill:hover { color: var(--btn-ink); opacity: .9; }
.cta:disabled { opacity: .55; cursor: default; background: transparent; }
.cta.fill:disabled { background: var(--btn); color: var(--btn-ink); opacity: .55; }
.feat { list-style: none; padding: 0; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.feat li { position: relative; padding-left: 22px; }
.feat li::before { content: ""; position: absolute; left: 3px; top: .4em; width: 9px; height: 5px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.feat li.off { color: var(--ink-3); }
.feat li.off::before { border-color: var(--rule-2); }
.feat strong { color: var(--ink); font-weight: 600; }
.small { font-size: 13px; color: var(--ink-3); }
.clubline { margin-top: auto; display: flex; align-items: flex-start; gap: 9px; background: var(--accent-soft); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.clubline .seal { margin-top: 1px; }
.clubline b { font-weight: 600; }
.local { font-size: 13px; color: var(--ink-3); margin: 14px 2px 0; }

/* the club band */
.band { margin-top: 18px; background: var(--stage); color: var(--on-stage); border-radius: 20px; padding: 24px 26px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px 26px; align-items: center; }
.band .emb { width: 98px; }
.band-t { font-family: var(--display); font-weight: 600; font-size: 21px; color: var(--on-stage); }
.band .tag { color: var(--on-stage-2); font-size: 14.5px; margin: 2px 0 12px; }
.steps { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; color: var(--on-stage); }
.steps b { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--beat); margin-right: 7px; font-weight: 600; }
.band-act { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.band-act button, .band-act a { font: inherit; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 12px; padding: 0 16px; text-align: center; cursor: pointer; text-decoration: none; white-space: nowrap; }
.band-act button { background: var(--on-stage); color: #1A1040; border: 0; }
.band-act a { color: var(--on-stage); border: 1px solid var(--stage-rule); }
.band-act a:hover { color: var(--on-stage); border-color: var(--on-stage-2); }
.band :focus-visible { outline-color: var(--on-stage); }
@media (max-width: 760px) {
  .band { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; }
  .band .emb { width: 78px; }
  .band-act { flex-direction: row; flex-wrap: wrap; }
}

/* comparison */
.cmp { margin-top: 20px; border-top: 1px solid var(--rule); }
.cmp summary { cursor: pointer; font-weight: 600; font-size: 15px; padding: 14px 0 12px; list-style: none; color: var(--ink); }
.cmp summary::-webkit-details-marker { display: none; }
.cmp summary::before { content: "+"; font-family: var(--mono); display: inline-block; width: 20px; color: var(--accent); }
.cmp[open] summary::before { content: "\2212"; }
.tw { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
th, td { text-align: left; padding: 9px 14px 9px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
th:last-child, td:last-child { padding-right: 0; }
thead th { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; border-bottom-color: var(--rule-2); }
tbody th { font-weight: 400; color: var(--ink); }
td { color: var(--ink-2); }
td.off { color: var(--ink-3); }
.num { font-variant-numeric: tabular-nums; }
.cv { display: flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 11.5px; color: var(--accent); margin-top: 2px; }
tr.clubrow th, tr.clubrow td { background: var(--accent-soft); color: var(--ink); }
tr.clubrow th:first-child { padding-left: 10px; border-radius: 8px 0 0 8px; }
tr.clubrow td:last-child { border-radius: 0 8px 8px 0; padding-right: 10px; }
.foot { font-size: 12.5px; color: var(--ink-3); margin-top: 10px; }

/* "How the club works" */
dialog.club-dlg { border: 0; padding: 0; background: transparent; color: var(--ink); width: 100%; max-width: 400px; max-height: calc(100vh - 40px); overflow: visible; }
dialog.club-dlg::backdrop { background: var(--scrim); }
.sheet { position: relative; background: var(--panel); border: 1px solid var(--rule); border-radius: 22px; box-shadow: var(--shadow-2); padding: 22px 22px 18px; max-height: calc(100vh - 40px); overflow: auto; }
.sheet-grab { display: none; width: 40px; height: 4px; border-radius: 2px; background: var(--rule-2); margin: -8px auto 14px; }
.sheet-hd { display: flex; align-items: center; gap: 14px; padding-right: 30px; }
.sheet-hd .emb { width: 62px; flex: none; }
.sheet-h { font-family: var(--display); font-weight: 600; font-size: 20px; line-height: 1.2; }
.sheet .sub { color: var(--ink-3); font-size: 14px; margin-top: 2px; }
.sheet-steps { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 11px; }
.sheet-steps li { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 10px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.sheet-steps b { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); padding-top: 3px; font-weight: 600; }
.sheet-lift { margin-top: 18px; border-top: 1px solid var(--rule); padding-top: 14px; }
.sheet-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; font-weight: 600; }
.sheet-lift dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; font-size: 14px; line-height: 1.45; }
.sheet-lift dt { font-weight: 600; color: var(--ink); }
.sheet-lift dd { color: var(--ink-2); }
.sheet-never { font-size: 13.5px; color: var(--ink-3); margin-top: 14px; }
.sheet-act { display: flex; gap: 10px; margin-top: 16px; }
.sheet-act a, .sheet-act button { flex: 1; font: inherit; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 12px; padding: 0 12px; text-align: center; text-decoration: none; cursor: pointer; }
.sheet-act a { border: 1.5px solid var(--ink); color: var(--ink); }
.sheet-act button { background: var(--btn); color: var(--btn-ink); border: 0; }
.sheet-x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-2); font-size: 24px; line-height: 1; cursor: pointer; }
.sheet-x:hover { background: var(--sunk); }
@media (max-width: 600px) {
  dialog.club-dlg { max-width: none; margin: auto 0 0; }
  .sheet { border-radius: 22px 22px 0 0; max-height: 88vh; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .sheet-grab { display: block; }
}

footer.page-foot { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--rule-2); color: var(--ink-3); font-size: 13px; display: flex; gap: 8px 20px; justify-content: center; flex-wrap: wrap; }
footer.page-foot a { display: inline-flex; align-items: center; min-height: 44px; }

@media (prefers-reduced-motion: no-preference) {
  .cta, .seg button, .back { transition: border-color .15s, color .15s, background-color .15s; }
}
@media (max-width: 480px) {
  .page { padding-inline: 16px; }
  .plan { padding: 20px 18px 16px; }
  .plan.rec { padding: 19px 17px 15px; }
}