/* Home — the ask: pricing table with its billing toggle, and the FAQ. */

/* ── Pricing ────────────────────────────────────────────────── */

.toggle { display: inline-flex; background: #fff; border: 1px solid var(--line-ctl); border-radius: 999px; padding: 4px; position: relative; margin-top: 22px; }
.toggle__pill { position: absolute; top: 4px; bottom: 4px; border-radius: 999px; background: var(--ink); transition: transform .4s ease-out, width .4s ease-out; }
.toggle button { position: relative; z-index: 1; border: 0; background: none; padding: 9px 22px; font-size: 14px; font-weight: 700; border-radius: 999px; color: var(--ink-70); transition: color .3s ease-out; white-space: nowrap; }
.toggle button.is-on { color: var(--cream); }
/* Green, the same green the annual prices turn (see .is-annual below), so the label
   and the saving it promises read as one thing. */
.toggle button[data-billing="annual"] { position: relative; }
/* A small green pill hung off the Annual button's top-right corner, half over the
   control's edge, so the saving tags the option without widening it. */
.toggle__save {
  position: absolute; top: -9px; right: -12px; z-index: 2;
  padding: 2px 7px; border-radius: 999px; background: var(--tick); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 1.3; letter-spacing: .01em;
  box-shadow: 0 0 0 2px var(--cream); pointer-events: none;
}

/* The billing toggle, directly above the table so the −20% reads as belonging to
   the prices rather than to the section heading. */
.plans__act { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: clamp(22px, 2.6vw, 34px) 0 clamp(20px, 2.2vw, 28px); }

/* ── Comparison table ───────────────────────────────────────── */

/* One table: plans as columns, limits as rows (design "P2 · One table"). The frame
   draws the card; the scroller inside it is what moves sideways when the table is
   wider than the screen, so the rounded edge and shadow stay put. Its vertical
   padding keeps the popular column's outline off the frame's edge and leaves room
   for the half of the "Popular" pill that rides above that outline. */
.ptable { max-width: 960px; margin-inline: auto; }
.ptable__frame {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 26px; background: #fff; box-shadow: var(--shadow);
}
.ptable__scroll { overflow-x: auto; overscroll-behavior-x: contain; padding-block: 16px 12px; }
.ptable__scroll:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: -2px; border-radius: 26px; }
/* Fixed layout: the first row's widths are the column widths, so a long feature
   label wraps inside its own column instead of pushing the plans around. Separate
   borders, not collapsed: a collapsed table cannot round a cell's corners, and the
   popular column's outline needs them. */
.ptable__table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.ptable__corner { width: 300px; }

.ptable__table th, .ptable__table td { padding: 0 24px; text-align: left; vertical-align: middle; }
/* The headers carry .ptable__table in their selectors on purpose: they have to outrank
   the cell rule above, which otherwise centres them vertically. Bottom-aligned, the
   three names and prices share a line whatever sits above them. */
.ptable__table .ptable__plan { padding: 20px 24px 20px; vertical-align: bottom; font-weight: 400; }
/* "Popular" rides on the popular column's top edge, centred on the outline, instead
   of taking a line of its own inside the header: the header stays as short as the
   other two. */
.ptable__table .ptable__plan.is-pop { position: relative; }
.ptable__badge {
  position: absolute; top: -1px; left: 50%; z-index: 2; transform: translate(-50%, -50%);
  padding: 4px 11px; border-radius: 999px; background: var(--ink); color: var(--cream);
  font-size: 10.5px; font-weight: 700; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}
.ptable__name { display: block; font-family: var(--display); font-weight: 900; font-size: 22px; line-height: 1.25; letter-spacing: -.02em; color: var(--ink); }
/* Two lines reserved: "A few apps, posting properly." wraps where the other two blurbs
   don't, and bottom alignment then lifted Scale's name above the other names. */
.ptable__blurb { display: block; min-height: calc(2 * 1.45em); font-size: 14px; line-height: 1.45; color: var(--ink-70); }
.plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px; margin-top: 14px; }
.plan__cur { font-family: var(--display); font-weight: 800; font-size: 20px; opacity: .55; }
.plan__num { font-family: var(--display); font-weight: 900; font-size: clamp(36px, 3.6vw, 44px); letter-spacing: -.03em; line-height: .95; }
/* Always its own line, so the three headers show the price in the same shape. */
.plan__per { flex: 0 0 100%; margin-top: 6px; font-size: 13px; color: var(--ink-50); }

/* Annual billing: the monthly price struck through before the new one, and the new
   one in green, so the saving is seen rather than worked out. pricing.js adds the
   struck price (from data-monthly) and toggles .is-annual on the table. */
.plan__was {
  display: none; margin-right: 10px;
  font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--ink-50);
  text-decoration: line-through; text-decoration-thickness: 2px;
}
.ptable.is-annual .plan__was { display: inline; }
.ptable.is-annual .plan__cur, .ptable.is-annual .plan__num { color: var(--tick); }
.ptable.is-annual .plan__cur { opacity: .85; }

.ptable__table tbody th, .ptable__table tbody td { height: 52px; border-top: 1px solid var(--line); }
.ptable__table tbody th { font-size: 15px; font-weight: 400; line-height: 1.35; color: var(--ink-70); padding-left: 28px; }
.ptable__table tbody td { font-family: var(--display); font-weight: 800; font-size: 16px; color: var(--ink); white-space: nowrap; }
.ptable__table td.is-no { color: var(--ink-50); }

/* The popular plan: its whole column wrapped in one rounded ink outline, header to
   last row, over the page's inset grey. The row lines inside it are drawn as an inset
   shadow rather than a border, so they stop at the outline instead of notching it. */
.ptable__table .is-pop { background: var(--cream-2); border-left: 2px solid var(--ink); border-right: 2px solid var(--ink); }
.ptable__table .ptable__plan.is-pop { border-top: 2px solid var(--ink); border-radius: 18px 18px 0 0; }
.ptable__table tbody td.is-pop { border-top: 0; box-shadow: inset 0 1px 0 var(--line); }
.ptable__table tbody tr:last-child td.is-pop { border-bottom: 2px solid var(--ink); border-radius: 0 0 18px 18px; }

/* The feature column stays put while the plans scroll under it. It needs its own
   white so the numbers don't show through, a z-index above the "Popular" pill that
   slides under it too, and a soft edge once something has actually slid beneath it
   (pricing.js sets .is-scrolled). */
.ptable__corner, .ptable__table tbody th { position: sticky; left: 0; z-index: 3; background: #fff; }
.ptable__scroll.is-scrolled .ptable__corner,
.ptable__scroll.is-scrolled .ptable__table tbody th { box-shadow: 1px 0 0 var(--line), 10px 0 14px -12px rgba(25,27,30,.35); }
/* More table to the right: a fade over the frame's edge says so (pricing.js sets
   .has-more only while there is somewhere left to scroll). */
.ptable__frame::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 28px; z-index: 4;
  background: linear-gradient(to left, #fff, rgba(255,255,255,0)); pointer-events: none;
  opacity: 0; transition: opacity .2s ease-out;
}
.ptable__frame.has-more::after { opacity: 1; }

.ptable__note { display: none; margin: 10px 0 0; text-align: center; font-size: 12.5px; color: var(--ink-50); }

/* What every plan includes, stated once under the table. */
.plans__all { max-width: 960px; margin: clamp(18px, 2vw, 26px) auto 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-70); }
.plans__all b { color: var(--ink); }

/* Spells out the dashes and the struck price for screen readers. */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── FAQ ────────────────────────────────────────────────────── */

.faq__list { max-width: 800px; margin-inline: auto; display: grid; gap: 10px; }
.faq details { background: #fff; border: 1px solid var(--line-ctl); border-radius: 20px; box-shadow: var(--shadow); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 56px 22px 26px; font-family: var(--display); font-weight: 800; font-size: clamp(16.5px, 1.5vw, 19px); letter-spacing: -.015em; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ''; position: absolute; right: 26px; top: 50%; background: var(--ink); border-radius: 2px; transition: transform .35s ease-out, opacity .35s ease-out; }
.faq summary::before { width: 14px; height: 2px; translate: 0 -50%; }
.faq summary::after { width: 2px; height: 14px; right: 32px; translate: 0 -50%; }
.faq details[open] summary::after { transform: rotate(90deg); opacity: 0; }
.faq__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease-out; }
.faq details[open] .faq__body { grid-template-rows: 1fr; }
.faq__body > div { overflow: hidden; }
.faq__body p { margin: 0 26px 24px; color: var(--ink-70); font-size: 16px; }

@media (prefers-reduced-motion: reduce) {
  .ptable__frame::after { transition: none; }
}

/* ── Breakpoints ─────────────────────────────────────────────── */

@media (max-width: 980px) {
  .ptable__corner { width: 220px; }
  .ptable__table th, .ptable__table td { padding-inline: 16px; }
  .ptable__table .ptable__plan { padding-inline: 16px; }
  .ptable__table tbody th { padding-left: 20px; }
  .ptable__name { font-size: 20px; }
}

/* Phones: the narrow table. The four columns have floors (a 92px feature column,
   80px per plan, enough for "Unlimited" and "$149" on one line), so below about
   340px of room the table scrolls sideways under its pinned feature column instead
   of breaking a number or a header. Headers keep the name and the price; the
   blurb and the "a month, billed …" line go, and the note under the table says it
   once instead. */
@media (max-width: 720px) {
  .ptable__frame { border-radius: 22px; }
  .ptable__scroll { padding-block: 14px 8px; }
  .ptable__scroll:focus-visible { border-radius: 22px; }
  .ptable__table { min-width: 332px; }
  .ptable__corner { width: 92px; }
  .ptable__table th, .ptable__table td { padding: 0 4px; text-align: center; }
  .ptable__table .ptable__plan { padding: 14px 4px 12px; }
  .ptable__table .ptable__plan.is-pop { border-radius: 14px 14px 0 0; }
  .ptable__table tbody tr:last-child td.is-pop { border-radius: 0 0 14px 14px; }
  .ptable__badge { padding: 3px 7px; font-size: 10px; letter-spacing: .08em; }
  .ptable__name { font-size: 15px; }
  .ptable__blurb, .plan__per { display: none; }
  .plan__price { justify-content: center; margin-top: 4px; }
  .plan__cur { font-size: 15px; }
  .plan__num { font-size: 24px; }
  /* The struck price takes its own line above the new one: side by side, "$149 $129"
     is wider than an 80px column. */
  .plan__was { flex: 0 0 100%; margin: 0 0 1px; font-size: 13px; text-decoration-thickness: 1.5px; text-align: center; }
  .ptable.is-annual .plan__was { display: block; }
  .ptable__table tbody th, .ptable__table tbody td { height: 46px; }
  .ptable__table tbody th { padding: 6px 6px 6px 14px; text-align: left; font-size: 12.5px; line-height: 1.3; }
  .ptable__table tbody td { font-size: 14px; }
  .ptable__note { display: block; margin-top: 12px; font-size: var(--m-caption); }
  .plans__all { margin-top: 16px; font-size: var(--m-small); line-height: 1.55; }

  /* The FAQ on phones: fifteen questions at desktop padding were ~2,200px, most of
     it header padding around two-line questions. Tighter rows, smaller type, flat
     cards, and the first answer no longer ships open (pricing.js). */
  .faq__list { gap: 8px; }
  .faq details { border-radius: 16px; box-shadow: none; }
  .faq summary { padding: 14px 44px 14px 16px; font-size: var(--m-body); line-height: 1.35; }
  .faq summary::before { right: 17px; }
  .faq summary::after { right: 23px; }
  .faq__body p { margin: 0 16px 16px; font-size: var(--m-body); line-height: 1.55; }
}