/* Public pricing and policy pages share the current Leafhour home palette. */
:root {
  --bill-paper: #F7F8F5;
  --bill-panel: #FFFFFF;
  --bill-ink: #242A27;
  --bill-muted: #59665D;
  --bill-line: #DCE3DA;
  --bill-green: #365B47;
  --bill-soft: #E9EFE8;
  --paper: var(--bill-paper);
  --panel: var(--bill-panel);
  --ink: var(--bill-ink);
  --muted: var(--bill-muted);
  --line: var(--bill-line);
  --accent: var(--bill-green);
  --action-radius: 8px;
}
.commerce-page { min-height: 100vh; background: var(--bill-paper); color: var(--bill-ink); }
.commerce-page .billing-header { max-width: none; border-bottom: 1px solid var(--line-hairline); }
.commerce-page .billing-brand { gap: 9px; color: var(--ink); font: 600 27px/1.15 var(--font-sans); letter-spacing: -.055em; flex: none; }
.commerce-page .billing-brand img { width: 28px; height: 28px; filter: none; }
body.commerce-page > .site-header #account-button { min-height: 44px; padding: 10px 16px; border: 1px solid var(--bill-line); border-radius: 10px; background: var(--bill-panel); color: var(--ink); text-decoration: none; }
.commerce-account-compact { display: none; }
.commerce-page .home-navigation { flex-wrap: nowrap; }
.commerce-page .commerce-main { width: min(100%, 1320px); max-width: 1320px; padding: 56px 48px 28px; }
.commerce-page .commerce-hero { max-width: none; margin: 0 auto 48px; text-align: center; }
.commerce-page .commerce-hero h1 { font: 500 clamp(32px, 3.2vw, 44px)/1.25 var(--font-serif); letter-spacing: var(--track-latin); margin: 0 0 12px; text-wrap: balance; }
.commerce-page .lede { max-width: 60ch; font-size: 17px; line-height: 1.7; }
.commerce-page .commerce-hero .lede { margin-inline: auto; text-wrap: balance; }
.commerce-page .point-products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.commerce-page .point-pack { display: flex; flex-direction: column; min-width: 0; gap: 0; padding: 28px; border: 1px solid var(--bill-line); border-radius: 16px; background: var(--bill-panel); }
.commerce-page .point-pack-yearly { border-color: color-mix(in srgb, var(--bill-green) 35%, var(--bill-line)); }
.commerce-page .plan-heading { display: flex; align-items: center; justify-content: space-between; min-height: 38px; gap: 12px; }
.commerce-page .pack-title { font: 500 27px/1.4 var(--font-serif); margin: 0; }
.commerce-page .plan-saving { flex: none; padding: 4px 12px; border-radius: 20px; background: var(--bill-soft); color: var(--bill-ink); font: 400 12px/1.6 var(--font-sans); white-space: nowrap; }
.commerce-page .point-pack .pack-price { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 7px; margin: 26px 0 6px; }
.commerce-page .pack-price strong { font: 500 clamp(36px, 3.3vw, 44px)/1.2 var(--font-sans); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.commerce-page .price-cadence { color: var(--bill-muted); font-size: 14px; }
.commerce-page .point-pack .pack-description { min-height: 3.3em; margin: 0; color: var(--bill-muted); font-size: 14px; line-height: 1.65; }
.commerce-page .pack-action { margin-top: 20px; max-width: none; width: 100%; }
.commerce-page .pack-action .primary, .commerce-page .pack-action .outline { width: 100%; min-height: 48px; font-size: 15px; }
.commerce-page .pack-action .primary { color: #FFFFFF; background: var(--bill-green); border-color: var(--bill-green); }
.commerce-page .pack-action .primary:hover:not(:disabled) { background: color-mix(in srgb, var(--bill-green) 88%, var(--bill-ink)); }
.commerce-page .pack-action .outline { color: var(--bill-ink); border-color: var(--bill-line); background: transparent; }
.commerce-page .pack-action .outline:hover { background: var(--bill-soft); }
.commerce-page .plan-benefits { list-style: none; margin: 30px 0 0; padding: 22px 0 2px; border-top: 1px solid var(--bill-line); display: grid; align-content: start; gap: 13px; }
.commerce-page .plan-benefits li { display: grid; grid-template-columns: 15px minmax(0, 1fr); column-gap: 12px; font-size: 16px; line-height: 1.65; }
.commerce-page .plan-benefits li::before { content: '✓'; color: var(--bill-muted); font-size: 16px; }
.commerce-page .pricing-context { padding: 26px 0 22px; text-align: center; }
.commerce-page .reading-assurance { margin: 0; color: var(--bill-muted); font-size: 13px; line-height: 1.7; }
.commerce-page .availability { max-width: none; margin: 6px 0 0; color: var(--bill-muted); font-size: 12px; line-height: 1.7; }
.commerce-page .availability:empty { display: none; }
.commerce-page .pricing-details { margin-top: 16px; border-top: 1px solid var(--bill-line); }
.commerce-page .pricing-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; list-style: none; cursor: pointer; color: var(--bill-muted); font-size: 14px; }
.commerce-page .pricing-details > summary::-webkit-details-marker { display: none; }
.commerce-page .pricing-details > summary::after { content: '+'; font-size: 20px; line-height: 1; }
.commerce-page .pricing-details[open] > summary::after { content: '−'; }
.commerce-page .pricing-detail-content { max-width: 76ch; padding: 4px 0 8px; }
.commerce-page .pricing-detail-content section { margin: 0 0 24px; }
.commerce-page .pricing-detail-content h2 { margin: 0 0 10px; font: 500 16px/1.6 var(--font-sans); }
.commerce-page .pricing-detail-content p { margin: 0 0 14px; color: var(--bill-muted); font-size: 13px; line-height: 1.85; }
.commerce-page .point-usage { margin: 0 0 14px; font-size: 13px; }
.commerce-page .point-usage > div { display: flex; justify-content: space-between; gap: 24px; padding: 7px 0; }
.commerce-page .point-usage dt { color: var(--bill-muted); }
.commerce-page .point-usage dd { margin: 0; white-space: nowrap; }
.commerce-page .policy { max-width: 720px; }
.commerce-page .policy h1 { font-size: clamp(34px, 4vw, 48px); }
.commerce-page .policy h2 { font-size: 18px; }
.commerce-page .billing-footer { position: relative; max-width: 1320px; padding: 24px 48px 30px; margin-top: 12px; }
.commerce-page .billing-footer > p { font: 400 14px/1.6 var(--font-sans); }
.commerce-page .billing-footer a { text-decoration: none; }
.commerce-page .billing-footer a:hover { text-decoration: underline; }
.commerce-page .site-theme { position: absolute; right: 48px; top: 20px; width: 44px; height: 44px; border: 0; background: transparent; color: var(--muted); }
.commerce-page .home-menu-sheet { color: var(--ink); }
.commerce-page .home-menu-sheet .dialog-close { position: absolute; right: 10px; top: 10px; width: 40px; height: 40px; border: 0; background: transparent; color: var(--muted); font-size: 22px; }
.commerce-page .home-menu-sheet h2 { font-family: var(--font-sans); font-size: 17px; }
:root[data-site-theme=night] { --bill-paper: #171E1A; --bill-panel: #202923; --bill-ink: #EDF2EB; --bill-muted: #B7C5B9; --bill-line: #45574A; --bill-green: #BAD6B8; --bill-soft: #2B372E; color-scheme: dark; }
:root[data-site-theme=paper] { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-site-theme=paper]) { --bill-paper: #171E1A; --bill-panel: #202923; --bill-ink: #EDF2EB; --bill-muted: #B7C5B9; --bill-line: #45574A; --bill-green: #BAD6B8; --bill-soft: #2B372E; }
}
:root[data-site-theme=night] .commerce-page .pack-action .primary { color: #17251B; }
:root[data-site-theme=night] .commerce-page .billing-brand img { filter: brightness(0) invert(.84); }
@media (prefers-color-scheme: dark) {
  :root:not([data-site-theme=paper]) .commerce-page .pack-action .primary { color: #17251B; }
  :root:not([data-site-theme=paper]) .commerce-page .billing-brand img { filter: brightness(0) invert(.84); }
}
@media (max-width: 1000px) {
  .commerce-page .commerce-main { padding-inline: 28px; }
  .commerce-page .point-products { gap: 16px; }
  .commerce-page .point-pack { padding: 24px 20px; }
  .commerce-page .plan-benefits li { font-size: 14px; column-gap: 9px; }
  .commerce-page .billing-footer { padding-inline: 28px; }
  .commerce-page .site-theme { right: 28px; }
}
@media (max-width: 760px) {
  .commerce-account-full { display: none; }
  .commerce-account-compact { display: inline; }
  .commerce-page .commerce-main { padding: 40px 24px 24px; }
  .commerce-page .commerce-hero { margin-bottom: 30px; }
  .commerce-page .commerce-hero h1 { font-size: clamp(28px, 6.4vw, 38px); }
  .commerce-page .lede { font-size: 15px; }
  .commerce-page .point-products { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .commerce-page .point-pack { padding: 26px; }
  .commerce-page .point-pack .pack-price { margin-top: 22px; }
  .commerce-page .pack-price strong { font-size: 40px; }
  .commerce-page .point-pack .pack-description { min-height: 0; }
  .commerce-page .pack-action { margin-top: 22px; }
  .commerce-page .plan-benefits { margin-top: 26px; gap: 12px; }
  .commerce-page .plan-benefits li { font-size: 16px; }
  .commerce-page .pricing-context { padding: 24px 2px 12px; }
  .commerce-page .billing-brand { font-size: 25px; }
  .commerce-page .billing-brand img { width: 25px; height: 25px; }
  .commerce-page .billing-footer { padding-inline: 24px; }
  .commerce-page .site-theme { right: 24px; }
}
@media (forced-colors: active) {
  .commerce-page .point-pack, .commerce-page .pack-action .primary, .commerce-page .pack-action .outline { border-color: CanvasText; }
}
@media (max-width: 360px) {
  .commerce-page .billing-brand { font-size: 23px; gap: 7px; }
  .commerce-page .billing-brand img { width: 22px; height: 22px; }
  body.commerce-page > .site-header #account-button { padding-inline: 10px; }
}