/* price.theoverfront.com (ADR-0038). Tokens and the button as on the site ;
   the toggle, plans and price block are ported from Estaluna's landing page :
   /licenses/estaluna-lp.txt ; the counting numbers from Magic UI : /licenses/magicui.txt. */
:root {
  --ink: #f5f5f5; --muted: #929498; --line: #26272a; --accent: #c7e4ef; --paper: #050505;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  color-scheme: dark; font-family: var(--font-sans); color: var(--ink); background: var(--paper);
  font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; margin: 0; }
body { background: var(--paper); }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 3px; }
main { width: min(960px, calc(100% - 112px)); margin-inline: auto; padding: clamp(24px, 6vh, 72px) 0 clamp(8px, 2vh, 24px); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.button { display: inline-flex; justify-content: center; align-items: center; background: #f3f4f5; color: #111214; padding: 16px 23px; border: 1px solid #f3f4f5; border-radius: 999px; font-size: 15px; font-weight: 600; line-height: 1.6; transition: background 180ms ease-out; }
.button:hover { background: white; }
.button:active { transform: scale(.98); }
.button-outline { background: transparent; color: #fff; border-color: #4a4b50; }
.button-outline:hover { background: #ffffff0d; }

.bp-toggle { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 clamp(16px, 3.5vh, 40px); border: 1px solid var(--line); border-radius: 999px; }
.bp-toggle[hidden] { display: none; }
.bp-opt { min-height: 40px; padding: 0 22px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 14px; line-height: 1; cursor: pointer; transition: background-color 160ms ease-out, color 160ms ease-out; }
.bp-opt:hover { color: var(--ink); }
.bp-opt[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.bp-opt:focus-visible { outline-offset: 2px; }

/* Rows shared across the two plans (subgrid) so both prices sit on one line although only Max has the comparison above its price, and both buttons on one line under Pro's longer list. */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); gap: 0 48px; }
.plan { position: relative; display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: clamp(10px, 2vh, 20px); padding: clamp(16px, 3.5vh, 32px) 0; border-top: 1px solid var(--line); }
.plan-primary { border-top-color: var(--accent); }
.plan h2 { font-size: 32px; font-weight: 500; letter-spacing: -.04em; }
.plan-lead { font-size: 17px; line-height: 1.7; color: #b3b6bd; }
.bp { align-self: end; }
.bp-was { font-size: 15px; line-height: 1.4; color: var(--muted); }
.bp-was s { text-decoration-thickness: 1px; }
.plan-price { margin: 5px 0; font-size: clamp(56px, min(7vw, 9vh), 105px); font-weight: 500; line-height: 1.1; letter-spacing: -.065em; }
.plan-price small { margin-left: .3em; font-size: 16px; letter-spacing: 0; color: var(--muted); }
.ticker { display: inline-block; font-variant-numeric: tabular-nums; }
/* the screen-reader sentence of the comparison follows the period */
.bp-y { display: none; }
html[data-billing="year"] .bp-m { display: none; }
html[data-billing="year"] .bp-y { display: inline; }
.plan-feats { margin: 0; padding: 0; list-style: none; font-size: 16px; line-height: 1.7; color: #c9ccd3; }
.plan-feats li { display: flex; align-items: flex-start; gap: .75em; padding: clamp(5px, 1.2vh, 14px) 0; border-bottom: 1px solid var(--line); }
.plan-ico { flex: 0 0 auto; width: 1.25em; height: 1.25em; margin-top: .2em; color: var(--accent); }
.plan .button { align-self: start; }

/* Phones : the plans become a row that snaps sideways. */
@media (max-width: 700px) {
  main { width: calc(100% - 40px); padding-top: 40px; }
  .plans { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -20px; padding: 0 20px 10px; scroll-padding-left: 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .plans::-webkit-scrollbar { display: none; }
  .plan { display: flex; flex-direction: column; gap: 20px; flex: 0 0 88%; min-width: 0; scroll-snap-align: start; padding: 25px 14px 25px 0; }
  .bp, .plan .button { align-self: stretch; }
  .plan:last-child { padding-right: 0; }
  .plan-price { font-size: 82px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}