/* 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); }
.toggle__save { font-weight: 700; margin-left: 7px; color: var(--tick); }
.toggle button.is-on .toggle__save { color: var(--cream); }

/* Four columns since the free plan joined them. It used to be a sentence in the
   lede with no box of its own, which read as "the cheapest thing here is $19".
   The cards carry no button each: one CTA sits above the row, because all four
   per-card buttons pointed at the identical destination. */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.3vw, 18px); }
.plans__all { grid-column: 1 / -1; margin: clamp(18px, 2vw, 26px) 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-70); }
.plans__all b { color: var(--ink); }
/* The shared CTA + the billing toggle, directly above the cards 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); }
/* Padding scales down harder than it used to now that four cards share the row
   rather than three: at 1100px each card is ~240px wide, and the old floor of
   26px left too little for "Slideshows a month" to sit on one line. Kept tight at
   the top end too — the extra width is what stops feature labels wrapping. */
.plan { background: #fff; border: 1px solid var(--line); border-radius: 26px; padding: clamp(20px, 1.7vw, 24px); display: flex; flex-direction: column; box-shadow: var(--shadow); }
/* The popular plan is called out by an ink edge rather than a fill, so the
   three cards stay one surface. */
.plan--pop { border: 2px solid var(--ink); position: relative; }
.plan__badge { position: absolute; top: 16px; right: 16px; background: var(--ink); color: var(--cream); border-radius: 999px; padding: 5px 12px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.plan__name { font-family: var(--display); font-weight: 900; font-size: 24px; letter-spacing: -.022em; margin: 0 0 6px; }
.plan__blurb { margin: 0 0 24px; font-size: 14.5px; color: var(--ink-70); min-height: 44px; }
.plan__price { display: flex; align-items: baseline; gap: 2px; margin: 0 0 22px; flex-wrap: wrap; }
.plan__cur { font-family: var(--display); font-weight: 800; font-size: 22px; opacity: .55; }
.plan__num { font-family: var(--display); font-weight: 900; font-size: clamp(38px, 3.8vw, 48px); letter-spacing: -.03em; line-height: .95; }
/* Always its own line, in every card. Left to wrap naturally, a short caption
   ("no card, ever") sat inline next to the number while the long ones dropped
   below it, so the four cards showed the price in two different shapes. */
.plan__per { font-size: 13.5px; color: var(--ink-50); flex: 0 0 100%; margin: 6px 0 0; }
/* Plan features read as a comparison table: every card carries the SAME rows in
   the same order, so the eye can run across the three. Quantity rows put their
   number on the right; capability rows get a tick or a cross (see --tick). */
.plan__feats { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 11px; }
.plan__feats li { position: relative; font-size: 14.5px; color: var(--ink-70); }
.plan__feats li.yes, .plan__feats li.no { padding-left: 26px; }
.plan__feats li.no { color: var(--ink-50); }
.plan__feats li.yes::before, .plan__feats li.no::before {
  content: ''; position: absolute; left: 0; top: .1em; width: 17px; height: 17px;
  border-radius: 50%; background-repeat: no-repeat; background-position: center; background-size: 11px 11px;
}
.plan__feats li.yes::before { background-color: var(--tick); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3 4.8 8.5 9.4 3.9' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.plan__feats li.no::before { background-color: var(--cross); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.9 3.9 8.1 8.1M8.1 3.9 3.9 8.1' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
/* Quantity rows — the number IS the comparison, so it sits right and in ink. */
.plan__row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
/* Four narrow columns wrap these labels onto two lines, which breaks the visual
   row alignment between cards. Let the label shrink a little instead. */
.plan__row > span { font-size: 13.5px; text-wrap: balance; }
.plan__row b { font-family: var(--display); font-weight: 800; color: var(--ink); white-space: nowrap; }
/* Spells out tick/cross for screen readers, which see shape and colour not at all. */
.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; }

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

@media (max-width: 980px) {
  /* One column, not two. The single stylesheet said `1fr 1fr` in a shared
     selector list and then immediately overrode .plans back to `1fr` two lines
     later; this is that net result, stated once. */
  .plans { grid-template-columns: 1fr; }
}