/* ShinyPost website — billing.html page styles. Reads site.css tokens and kit. */

/* ── header ── */
.billing-head{padding-top:clamp(40px,6vw,76px);padding-bottom:4px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.billing-head__title{color:var(--sp-ui-faint);font:var(--sp-ui-type-overline);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase}
.billing-head__headline{max-width:14ch}
.billing-head__intro{margin-top:4px;max-width:58ch}
.billing-period{margin-top:14px}

/* ── plan grid ──
   Each card sits in a slot whose padding is the finish reserve. The reserve is fixed here, in CSS, so the
   first paint already has its final bounds and selecting a finish never moves anything. It covers the
   measured ink of every finish (lightning ~36px each side, orbit ~27px, mac 38px top / 12px sides,
   metal ~12px); the canvas itself is sized from finishLayout and may extend past the reserve into
   empty space, which <main> clips horizontally. The Free slot carries the same reserve to keep the cards aligned. */
.plans{--finish-top:44px;--finish-right:40px;--finish-bottom:40px;--finish-left:40px;--plan-radius:18px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--finish-left);align-items:stretch}
main{overflow-x:clip}
/* side by side, the two cards share one reserve between them (the Pro canvas extends into the gap) */
@media (min-width:861px){
  .plans .plan-slot[data-plan="free"]{padding-right:0}
  .plans .plan-slot--pro{padding-left:0}
}
.plan-slot{position:relative;display:flex;padding:var(--finish-top) var(--finish-right) var(--finish-bottom) var(--finish-left)}
.plan-slot>.plan{flex:1}
.plan-slot .sp-finish{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:0}
.plan{position:relative;z-index:1;display:flex;flex-direction:column;padding:30px 30px 30px;border-radius:var(--plan-radius);overflow:visible}
/* wide screens: let the reserve sit in the page margin so the card edges line up with the heading */
@media (min-width:1240px){ .plans{max-width:calc(var(--site-wrap) + var(--finish-left) + var(--finish-right));padding-inline:var(--site-gutter)} }
@media (max-width:860px){
  .plans{grid-template-columns:minmax(0,1fr);padding-inline:0;column-gap:0}
  .plan-slot+.plan-slot{padding-top:calc(var(--finish-top) - 8px)}
}
@media (max-width:480px){
  /* phones: a tighter side reserve keeps the card readable; the finish ink scales down with the card */
  .plans{--finish-top:40px;--finish-right:24px;--finish-bottom:32px;--finish-left:24px}
  .plan{padding:24px 20px 26px}
}

.plan__head{display:flex;flex-direction:column;gap:6px}
.plan__name{font:var(--site-type-h3);font-size:1.5rem;letter-spacing:-.025em}
.plan__tagline{font:var(--site-type-body);color:var(--sp-ui-muted);text-wrap:pretty}
.plan__platforms{margin-top:2px;font:var(--sp-ui-type-label);font-size:13px;color:var(--sp-ui-faint)}

.plan__price{margin-top:22px;padding-top:22px;border-top:1px solid var(--sp-ui-line-soft);display:flex;flex-direction:column;gap:6px}
.plan__amount{font:var(--site-type-price);letter-spacing:-.04em;font-variant-numeric:tabular-nums;display:flex;align-items:baseline}
.plan__figure{display:inline-flex;align-items:baseline}
.plan__unit{font:var(--site-type-h4);font-weight:600;color:var(--sp-ui-muted);letter-spacing:0;margin-left:2px}
.plan__note{font:var(--site-type-body-s);color:var(--sp-ui-muted)}

.plan__action{margin-top:18px}
.plan__action .sp-btn{font-weight:700;white-space:normal;text-align:center;height:auto;min-height:48px;padding-block:10px;line-height:1.25}

.plan__benefits{display:flex;flex-direction:column;gap:20px;margin-top:26px;padding-top:24px;border-top:1px solid var(--sp-ui-line-soft)}
.plan__overline{color:var(--sp-ui-faint)}
.benefit{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.benefit .site-tag{margin-bottom:0}
.benefit__heading{font:var(--site-type-h3);font-size:1.25rem;letter-spacing:-.02em;text-wrap:balance}
.benefit__body{font:var(--site-type-body-s);color:var(--sp-ui-muted);text-wrap:pretty}
.benefit__note{font:var(--sp-ui-type-small);font-size:13px;color:var(--sp-ui-faint);line-height:1.5}
.plan__list{display:flex;flex-direction:column;gap:12px}
.plan__list li{font:var(--site-type-body-s);color:var(--sp-ui-muted);padding-left:18px;position:relative;text-wrap:pretty}
.plan__list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--sp-ui-mint)}
.plan__list li b{color:var(--sp-ui-text)}
.plan__line{display:flex;gap:10px;align-items:flex-start;font:var(--site-type-body-s);color:var(--sp-ui-muted);text-wrap:pretty}
.plan__line .ico{width:18px;height:18px;color:var(--sp-ui-icon);margin-top:2px}
.plan__line b{color:var(--sp-ui-text)}
.plan__also{display:flex;flex-direction:column;gap:8px;margin-top:-8px}
.plan__also li{font:var(--site-type-body-s);color:var(--sp-ui-muted);padding-left:18px;position:relative}
.plan__also li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--sp-brand-shine)}

/* ── Try a Pro finish ── */
.finish{margin-top:26px;padding:18px 18px 16px;border-radius:var(--sp-ui-card-radius);background:var(--sp-ui-surface-hi);display:flex;flex-direction:column;gap:12px}
.finish__heading{font:var(--site-type-h4);letter-spacing:-.01em}
.finish__helper{margin-top:-8px;font:var(--sp-ui-type-small);font-size:13px;color:var(--sp-ui-muted)}
.finish__group{display:flex;flex-direction:column;gap:6px}
.finish__label{font:var(--sp-ui-type-overline);letter-spacing:.06em;text-transform:uppercase;color:var(--sp-ui-faint)}
.finish__options{display:flex;flex-wrap:wrap;gap:6px}
.finish__opt{background:var(--sp-ui-btn-bg);border:1px solid var(--sp-ui-btn-line);color:var(--sp-ui-text)}
.finish__opt[aria-pressed="true"]::before{content:"";width:9px;height:5px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg) translateY(-1px);flex-shrink:0}
.finish__actions{display:flex;gap:6px;margin-top:2px}
.finish__unavailable{font:var(--sp-ui-type-small);font-size:13px;color:var(--sp-ui-warning);background:var(--sp-ui-warning-bg);border:1px solid var(--sp-ui-warning-line);border-radius:var(--sp-ui-radius-s);padding:8px 10px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .finish__opt{background:var(--sp-ui-soft)}}
:root[data-theme="dark"] .finish__opt{background:var(--sp-ui-soft)}

/* ── together ── */
.together{display:flex;flex-direction:column;gap:12px;padding-top:clamp(36px,4vw,56px)}
.together .site-h2{max-width:22ch}

/* ── compare ── */
.compare-section{padding-top:clamp(20px,2vw,28px)}
.compare-toggle-row{display:flex;justify-content:flex-start}
.compare{margin-top:28px;padding-top:32px;border-top:1px solid var(--sp-ui-chrome-line);display:flex;flex-direction:column;gap:22px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .compare{border-top-color:var(--sp-ui-line-soft)}}
:root[data-theme="dark"] .compare{border-top-color:var(--sp-ui-line-soft)}
.compare__intro{display:flex;flex-direction:column;gap:8px;max-width:760px}
.compare__sub{font:var(--site-type-h4);color:var(--sp-ui-text)}
.compare__tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding:4px 0}
.compare__count{font:var(--sp-ui-type-label);font-size:13px;color:var(--sp-ui-faint);margin-left:auto}
.compare__empty{font:var(--site-type-body-s);color:var(--sp-ui-muted);padding:14px 16px;border-radius:var(--sp-ui-control-radius);background:var(--sp-ui-surface-hi)}

.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--sp-ui-card-radius);background:var(--sp-ui-card-bg);border:1px solid var(--sp-ui-chrome-line);box-shadow:var(--sp-ui-card-shadow)}
.table-wrap:focus-visible{outline-offset:-2px}
.compare-table{width:100%;min-width:680px;border-collapse:collapse;font:var(--site-type-body-s);font-size:14.5px}
.compare-table caption{text-align:left;padding:18px 20px 10px;font:var(--site-type-h4);letter-spacing:-.01em;color:var(--sp-ui-text)}
.compare-table th,.compare-table td{text-align:left;vertical-align:top;padding:12px 20px;border-top:1px solid var(--sp-ui-line-soft)}
.compare-table thead th{font:var(--sp-ui-type-overline);letter-spacing:.06em;text-transform:uppercase;color:var(--sp-ui-faint);padding-top:10px;padding-bottom:10px;background:var(--sp-ui-surface-hi);border-top:0}
.compare-table tbody th{font-weight:700;color:var(--sp-ui-text);width:34%}
.compare-table tbody td{color:var(--sp-ui-muted);width:33%}
.compare-table td.is-included{color:var(--sp-ui-success-foreground);font-weight:600}
.compare-table td.is-included::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--sp-ui-mint);margin-right:8px;vertical-align:1px}
.compare-table td.is-pro-required{color:var(--sp-ui-faint)}
.compare-table tr[hidden]{display:none}
.cell-feature{display:inline}
.readiness-slot:empty{display:none}
.readiness-slot{display:inline-flex;margin-left:8px;vertical-align:middle}
.compare__note{font:var(--sp-ui-type-small);font-size:13.5px;line-height:1.55;color:var(--sp-ui-muted);max-width:78ch;text-wrap:pretty}

/* category + FAQ disclosures */
.categories{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.cat,.disc{border-radius:var(--sp-ui-card-radius);background:var(--sp-ui-card-bg);border:1px solid var(--sp-ui-chrome-line);box-shadow:var(--sp-ui-card-shadow)}
.cat__summary,.disc__summary{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 18px;font:var(--site-type-h4);letter-spacing:-.01em;color:var(--sp-ui-text);border-radius:inherit;transition:background var(--sp-ui-motion-fast)}
.cat__summary:hover,.disc__summary:hover{background:var(--sp-ui-soft)}
.cat__summary:focus-visible,.disc__summary:focus-visible{outline-offset:-2px;border-radius:inherit}
.cat__title,.disc__summary>span:first-child{flex:1;min-width:0}
.cat__chev{width:16px;height:16px;flex-shrink:0;color:var(--sp-ui-icon);transition:transform var(--sp-ui-motion-standard) var(--sp-ui-ease-move)}
details[open]>summary .cat__chev{transform:rotate(180deg)}
.cat__body,.disc__body{padding:4px 18px 20px;display:flex;flex-direction:column;gap:12px;font:var(--site-type-body-s);color:var(--sp-ui-muted);max-width:78ch;text-wrap:pretty}
.cat__body p b,.disc__body p b{color:var(--sp-ui-text)}
.cat__heading{font:var(--site-type-h3);font-size:1.125rem;color:var(--sp-ui-text);letter-spacing:-.015em}
.cat__label{margin-top:6px;color:var(--sp-ui-faint)}
.compare__bottom{display:flex;padding-top:4px}

/* ── platform, faq, legal ── */
.platform,.faq{display:flex;flex-direction:column;gap:14px}
.platform .disc,.faq .disc{margin-top:4px}
.faq__list{display:flex;flex-direction:column;gap:6px}
.billing-legal{margin-top:16px;font:var(--sp-ui-type-label);font-size:13px;color:var(--sp-ui-faint)}

/* ── readiness note (rendered only when the switch in site-config.js is on) ── */
.sp-readiness{color:var(--sp-ui-warning)}

/* ── reduced motion ── */
@media (prefers-reduced-motion:reduce){
  .cat__chev{transition:none}
}