/* ============================================================
   Pricing block — the plan cards, their per-platform dropdowns and the
   pricing page's local system.

   This was inline in pricing.html. index.html now shows the same block, so
   it lives in one file that both pages link: the homepage cannot drift away
   from the pricing page, because there is only one copy of the CSS and one
   copy of the markup (lifted from pricing.html) driving both.

   Almost every rule is scoped to .pricing-page — index.html wraps its
   pricing section in a div with that class to opt in.
   ============================================================ */

/* ============================================================
   Pricing page — one local design system.

   Accent rule: ONE hue. Crimson (the brand's --pink) carries the
   whole page: it marks the recommended plan, the locked rows, the
   links and the open FAQ row. The header keeps the lime logo, and
   nothing on this page is allowed to introduce a third colour —
   the version before this ran crimson, blue, lime, white and red
   at once, which is what made it read as noise rather than a
   hierarchy. To take the page back to lime, change --pr-red and
   its two shades below; nothing else hard-codes a hue.
   ============================================================ */
.pricing-page {
  position: relative;
  /* Explicitly the body's black rather than `none`. The doodle tile
     below is an opaque image whose field is pure black, so painting it
     over a known-black surface at low opacity hides the field and
     leaves only the strokes — no alpha channel, no blend mode. */
  background: #050607;
  font-family: Geist, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --pr-red: #f40450;          /* brand crimson (= styles.css --pink) */
  --pr-red-hi: #ff3d6b;       /* hover / highlight */
  --pr-red-deep: #b80038;     /* gradient floor */
  --pr-dim: rgba(255, 255, 255, 0.62);
  /* Neutral ladder. Every surface, hairline and label on a card comes
     from these four, so the only colour on the page is crimson (plus
     the one green tick), and the three plans differ by weight rather
     than by hue. */
  --pr-surface: rgba(255, 255, 255, 0.032);
  --pr-line: rgba(255, 255, 255, 0.09);
  --pr-label: rgba(255, 255, 255, 0.42);
  --pr-body: rgba(255, 255, 255, 0.84);
  --pr-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.pricing-page [hidden] { display: none !important; }

/* ── Doodle field ────────────────────────────────────────────
   The source art is grey line-work on white paper. It is inverted and
   mirror-tiled into assets/pricing-doodles.webp, so it repeats without
   a seam in any direction. Two masks are intersected over it: a
   vertical fade so it never meets the header or the FAQ on a hard
   line, and an ellipse that clears it out from behind the cards. The
   texture frames the plans instead of sitting under their text. */
.pricing-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url('assets/pricing-doodles.webp?v=1') center -60px / 2200px auto repeat;
  opacity: 0.17;
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0, #000 4%, #000 64%, transparent 93%),
    radial-gradient(ellipse 42% 38% at 50% 33%, transparent 14%, #000 78%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, transparent 0, #000 4%, #000 64%, transparent 93%),
    radial-gradient(ellipse 42% 38% at 50% 33%, transparent 14%, #000 78%);
  mask-composite: intersect;
}
/* Everything on the page rides above the texture. */
.pricing-page > * { position: relative; z-index: 1; }

/* ── The plans panel ─────────────────────────────────────── */
/* Near-black ground with a single crimson bloom behind the middle
   card, so the recommended plan is lit from the page itself rather
   than needing extra chrome of its own. */
/* No panel and no wash: the heading and the cards sit on flat black.
   The recommended card is lit by its own border and fill, not by a
   glow painted behind it. */
.pricing-page .plan-section {
  margin-top: clamp(20px, 2.6vw, 40px);
  padding: 0 clamp(18px, 2.4vw, 34px) clamp(34px, 3.4vw, 54px);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
}
/* Left-ranged over the card grid, like the reference. The title is
   sentence case and one colour: the crimson lives on the plan that
   is being recommended, not on a word in the heading. */
.plans-heading {
  margin-bottom: clamp(22px, 2.4vw, 32px);
  text-align: left;
}
.pricing-page .plans-heading h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(28px, 2.9vw, 38px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-transform: none;
}
/* .pricing-page prefix is load-bearing: the base sheet's
   `.plans-heading p { margin: 8px 0 0 }` out-specifies a bare
   `.plans-sub` and would win on the margin. */
.pricing-page .plans-sub {
  margin: 10px 0 0;
  max-width: 78ch;
  text-align: left;
  color: rgba(255, 255, 255, 0.5);
  font-size: clamp(13.5px, 1vw, 15px);
  font-weight: 400;
  line-height: 1.55;
}

/* ── Card grid ───────────────────────────────────────────── */
/* The middle column is wider AND the outer two are inset top and
   bottom. Both together are what make the recommended plan read as
   raised; scaling it with transform instead blurs its text. */
.pricing-page .pricing-cards {
  /* 2026-10-20: one wide card over both columns, Free + Group tiles below.
     The one-card rules are at the foot of this file. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(14px, 1.3vw, 18px);
  max-width: 1240px;
}
.pricing-page .plan-card {
  min-height: 0;
  padding: clamp(18px, 1.4vw, 22px) clamp(16px, 1.3vw, 20px) clamp(16px, 1.3vw, 20px);
  border-radius: 20px;
  border: 1px solid transparent;
  background:
    radial-gradient(58% 200% at 3% 40%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.018) 42%, rgba(255, 255, 255, 0.004) 100%),
    linear-gradient(180deg, #101216 0%, #0a0b0f 100%);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
  transition:
    transform 0.5s var(--pr-ease),
    box-shadow 0.5s var(--pr-ease),
    border-color 0.5s var(--pr-ease);
}
/* The ring. inset:-1px so it sits over the transparent border the
   card reserves for it; mask-composite punches out the middle so only
   the 1px frame paints. */
.pricing-page .plan-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.09) 18%,
    rgba(255, 255, 255, 0.035) 38%,
    rgba(255, 255, 255, 0.012) 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: background 0.5s var(--pr-ease);
}
.pricing-page .ultra-card::after {
  background: linear-gradient(180deg,
    rgba(244, 4, 80, 0.85) 0%,
    rgba(244, 4, 80, 0.45) 26%,
    rgba(244, 4, 80, 0.16) 58%,
    rgba(244, 4, 80, 0.06) 100%);
}
.pricing-page .plan-card:hover { transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) {
  .pricing-page .plan-card:hover { transform: none; }
}

/* Plus is styled exactly like Starter. Crimson marks one thing on
   this page — the plan it recommends — and a "slightly crimson"
   middle card only blunts that. */
.pricing-page .plan-card.popular {
  padding-top: clamp(18px, 1.4vw, 22px);   /* no ribbon any more */
}
.pricing-page .starter-card:hover::after,
.pricing-page .plan-card.popular:hover::after {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.26) 0%,
    rgba(255, 255, 255, 0.13) 22%,
    rgba(255, 255, 255, 0.05) 44%,
    rgba(255, 255, 255, 0.015) 76%);
}

/* Ultra — the hero card. */
.pricing-page .ultra-card {
  background:
    radial-gradient(ellipse 100% 46% at 50% 0%, rgba(244, 4, 80, 0.13), transparent 74%),
    linear-gradient(180deg, #14090e 0%, #0b0609 60%, #08070a 100%);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}
.pricing-page .ultra-card:hover::after {
  background: linear-gradient(180deg,
    rgba(244, 4, 80, 1) 0%,
    rgba(244, 4, 80, 0.6) 26%,
    rgba(244, 4, 80, 0.22) 58%,
    rgba(244, 4, 80, 0.08) 100%);
}
.pricing-page .ultra-card:hover {
  box-shadow: 0 30px 76px rgba(0, 0, 0, 0.55);
}

/* ── Card head ───────────────────────────────────────────── */
/* Fixed so the price row underneath starts on the same line in all
   three cards however many lines the tagline runs to. This is the one
   measurement that makes the buttons align. */
.pricing-page .plan-top {
  display: block;
  min-height: 52px;
  margin-bottom: 4px;
}
.pricing-page .plan-card h3 {
  margin: 0;
  gap: 8px;
  font-size: clamp(21px, 1.6vw, 25px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.12;
  text-transform: uppercase;
}
.pricing-page .pc-tagline {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12.5px;
  line-height: 1.45;
}

/* 3-day trial chip beside the plan name. Hidden by the script for
   accounts that have already used their one trial (see
   [data-ultra-trial] in pricing-cards.js) so the badge can never
   promise something checkout would refuse. */
.trial-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(244, 4, 80, 0.16);
  border: 1px solid rgba(244, 4, 80, 0.4);
  color: #ff7b9c;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Price + CTA block ───────────────────────────────────── */
.pc-buy { margin: 14px 0 0; }
/* Button and caption share one container. All three carry a caption,
   so the containers match height without being forced to. */
.pc-action {
  margin-top: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.035);
}
.pricing-page .pc-action .plan-cta { margin-top: 0; }
/* "Ask A Parent To Pay" — a second, quieter button in the Monthly card's
   action box, under the trial CTA and its caption (2026-10-14). */
.pc-parent {
  display: block;
  margin: 0 10px 10px;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}
.pc-parent:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-1px); }
.pricing-page .pc-action .plan-note {
  margin: 0;
  padding: 9px 10px;
  text-align: center;
}
/* Fixed height, not just a baseline: the struck price on Ultra makes
   its line box a couple of pixels taller than the other two, which is
   enough to knock its button off the shared line. */
.pricing-page .price {
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  height: 34px;
  margin: 0;
  text-align: left;
}
.pricing-page .price strong {
  display: inline;
  font-size: clamp(26px, 2.2vw, 31px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.1;
}
.pricing-page .price span {
  display: inline;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12.5px;
  font-weight: 400;
}
/* The strike is drawn rather than decorated: a 2px bar tilted a few
   degrees reads as struck by hand, where a level text-decoration
   reads as a rendering artefact. */
.pricing-page .price s {
  position: relative;
  display: inline-block;
  order: -1;
  margin: 0;
  color: var(--pr-red-hi);
  font-size: clamp(22px, 1.9vw, 27px);
  font-weight: 700;
  letter-spacing: -0.04em;
  text-decoration: none;
}
/* The struck price and its neon bar stay styled for any card that still
   carries an <s>, but nothing animates it any more: the only struck price
   was Monthly's $4.99 before the first-month discount, retired 2026-10-13. */
.pricing-page .price s::after {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  top: 54%;
  height: 4px;
  border-radius: 2px;
  background: #ff1a3c;
  box-shadow: 0 0 6px #ff1a3c, 0 0 12px rgba(255, 26, 60, 0.8), 0 0 20px rgba(255, 26, 60, 0.5);
}

/* ── CTAs ────────────────────────────────────────────────
   Text-only by contract: pricing-cards.js rewrites textContent on
   every one of these, so any child element here is wiped on load.
   The Ultra crown is therefore a ::before, not markup. ── */
.pricing-page .plan-cta {
  width: 100%;
  min-height: 48px;
  margin-top: 14px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  transition:
    transform 0.28s var(--pr-ease),
    box-shadow 0.28s var(--pr-ease),
    background 0.28s var(--pr-ease),
    border-color 0.28s var(--pr-ease),
    filter 0.28s var(--pr-ease);
}
.pricing-page .plan-cta:hover { transform: translateY(-2px); }
.pricing-page .plan-cta.starter {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  box-shadow:
    inset 0 -3px 0 rgba(0, 0, 0, 0.22),
    0 6px 4px rgba(0, 0, 0, 0.25),
    0 32px 24px rgba(0, 0, 0, 0.15);
}
.pricing-page .plan-cta.starter:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.34);
}
.pricing-page .plan-cta.plus {
  background: rgba(244, 4, 80, 0.14);
  border: 1px solid rgba(244, 4, 80, 0.38);
  color: #ff9ab4;
  box-shadow:
    inset 0 -3px 0 rgba(140, 0, 42, 0.5),
    0 6px 4px rgba(0, 0, 0, 0.25),
    0 32px 24px rgba(0, 0, 0, 0.15);
}
.pricing-page .plan-cta.plus:hover {
  background: rgba(244, 4, 80, 0.2);
  border-color: rgba(244, 4, 80, 0.7);
  color: #ffa8bf;
}
.pricing-page .plan-cta.ultra {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 62%),
    var(--pr-red);
  border: 1px solid transparent;
  color: #fff;
  font-size: 15.5px;
  font-weight: 750;
  box-shadow:
    inset 0 -3px 0 var(--pr-red-deep),
    0 6px 4px rgba(0, 0, 0, 0.25),
    0 32px 24px rgba(0, 0, 0, 0.15);
}
.pricing-page .plan-cta.ultra:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 62%),
    var(--pr-red-hi);
  box-shadow:
    inset 0 -3px 0 #c8004a,
    0 6px 4px rgba(0, 0, 0, 0.25),
    0 32px 24px rgba(0, 0, 0, 0.15);
}

.pricing-page .plan-note {
  min-height: 0;
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.45);
  font-size: 12.5px;
  line-height: 1.45;
}
.pricing-page .plan-note strong { color: #fff; }
/* ── Included features ───────────────────────────────────── */
.pricing-page .included-box {
  flex: 0 0 auto;
  min-height: 0;
  margin-top: 14px;
  padding: 14px 15px 15px;
  border-radius: 12px;
  border: 1px solid var(--pr-line);
  background: var(--pr-surface);
}
.pricing-page .included-box h4 {
  margin: 0 0 11px;
  color: var(--pr-label);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.pricing-page .feature-list { display: block; gap: 0; }
.pricing-page .feature-list li {
  min-height: 0;
  padding: 8px 0 8px 27px;
  color: var(--pr-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}
.pricing-page .feature-list li + li { border-top: 1px solid rgba(255, 255, 255, 0.055); }
.pricing-page .feature-list li:first-child { padding-top: 2px; }
.pricing-page .feature-list li:first-child::before { top: 3px; }
.pricing-page .feature-list li:last-child { padding-bottom: 2px; }
.fl-sub {
  display: block;
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.35;
}
.pricing-page .feature-list li::before {
  top: 9px;
  width: 17px;
  height: 17px;
  background-image: none;
  background-color: #fff;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 12.9 3.4 3.4 6.1-9.2'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 12.9 3.4 3.4 6.1-9.2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pricing-page .feature-list li::after { content: none; }
.pricing-page .ultra-highlight {
  color: #fff !important;
  font-weight: 800;
}

/* ── Locked / excluded box ───────────────────────────────── */
.locked-box {
  margin-top: 12px;
  padding: 13px 15px 14px;
  border-radius: 12px;
  border: 1px solid var(--pr-line);
  background: var(--pr-surface);
}
.locked-box h4 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  color: var(--pr-label);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.locked-box > p {
  margin: -4px 0 11px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 12.5px;
  line-height: 1.5;
}
.locked-box > p strong { color: var(--pr-red-hi); font-weight: 700; }
.lock-info {
  margin-left: auto;
  display: inline-flex;
  cursor: help;
}
.lock-info svg { width: 14px; height: 14px; fill: rgba(255, 255, 255, 0.3); }
.lock-list {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lock-list li {
  position: relative;
  padding: 8px 0 8px 27px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}
.lock-list li + li { border-top: 1px solid rgba(255, 255, 255, 0.055); }
.lock-list li:first-child { padding-top: 2px; }
.lock-list li:first-child::before { top: 3px; }
.lock-list li:last-child { padding-bottom: 2px; }
/* A cross, not a padlock — what these rows mean is "you don't get
   this". Dimmed rather than coloured: an excluded row should recede,
   not shout. */
.lock-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 17px;
  height: 17px;
  background-color: rgba(255, 255, 255, 0.32);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='m7.5 7.5 9 9m0-9-9 9'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='m7.5 7.5 9 9m0-9-9 9'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── In-card media ───────────────────────────────────────── */
/* Pushed to the bottom of the flex column so all three cards end on
   their video no matter how uneven the lists above them are. */
.pc-media {
  margin: 14px 0 0;
  padding: 0;
}
.pricing-page .plan-card > .locked-box:last-child { margin-top: 12px; }
.pc-media figcaption {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 2px 8px;
  color: var(--pr-label);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.pc-media--hero figcaption::before {
  content: "";
  width: 13px;
  height: 13px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-2 14.5v-9l7 4.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-2 14.5v-9l7 4.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pc-media-frame {
  position: relative;
  margin: 0;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  overflow: hidden;
  background: #06070a;
  aspect-ratio: 4 / 3;
}
.pc-media--hero .pc-media-frame { aspect-ratio: 16 / 9; }
.pc-media-frame video {
  display: block;
  width: 100%;
  height: 100%;
  /* contain, not cover: cropping either clip cuts the thing being
     demonstrated. Each frame above is already cut to its clip's own
     ratio, so in practice there is nothing to letterbox. */
  object-fit: contain;
}
.pc-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: var(--pr-red);
  box-shadow: 0 10px 28px -10px rgba(244, 4, 80, 0.85);
  cursor: pointer;
  transition: transform 0.28s var(--pr-ease), opacity 0.24s linear;
}
.pc-play svg { width: 24px; height: 24px; fill: #fff; margin-left: 2px; }
.pc-play:hover { transform: translate(-50%, -50%) scale(1.09); }
.pc-media-frame.is-playing .pc-play { opacity: 0; pointer-events: none; }

/* ── Product dropdowns ───────────────────────────────────────────
   One plan covers two extensions, so features are split by the
   platform they act on. Both sit open here: this is the reference
   page, where someone is comparing in detail rather than skimming a
   product page. The logo keeps a white tile — both marks are drawn
   for light backgrounds and vanish straight into a dark card. */
.pricing-page .pc-drops {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.pricing-page .pc-drop {
  border-radius: 12px;
  border: 1px solid var(--pr-line);
  background: var(--pr-surface);
  overflow: hidden;
}
.pricing-page .pc-drop > summary {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.2s ease;
}
.pricing-page .pc-drop > summary::-webkit-details-marker { display: none; }
.pricing-page .pc-drop > summary:hover { background: rgba(255, 255, 255, 0.04); }
.pricing-page .pc-drop-logo {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #fff;
  object-fit: contain;
  padding: 3px;
}
.pricing-page .pc-drop-head {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pricing-page .pc-drop-title {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #fff;
}
.pricing-page .pc-drop-sub {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--pr-label);
}
.pricing-page .pc-drop-caret {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background: rgba(255, 255, 255, 0.42);
  transition: transform 0.24s ease;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pricing-page .pc-drop[open] .pc-drop-caret { transform: rotate(180deg); }
.pricing-page .pc-drop[open] > summary { background: rgba(255, 255, 255, 0.028); }
.pricing-page .pc-drop-body {
  padding: 0 13px 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}
.pricing-page .pc-drop-note {
  margin: 11px 0 0;
  padding: 10px 11px;
  border-radius: 9px;
  border: 1px solid var(--pr-line);
  background: rgba(255, 255, 255, 0.022);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--pr-dim);
}
.pricing-page .pc-drop-note strong { color: #fff; }
.pricing-page .pc-drop .feature-list { margin: 4px 0 0; padding: 0; list-style: none; }

/* Free's missing features: struck through in red inside the product
   that lacks them, so each dropdown is a self-contained pros-and-cons
   list for its own platform. */
.pricing-page .feature-list li.is-locked {
  color: #ff5c7d;
  text-decoration: line-through;
  text-decoration-color: rgba(255, 92, 125, 0.6);
  text-decoration-thickness: 1.5px;
}
.pricing-page .pc-drop .feature-list li.is-locked::before {
  background-color: #ff3d6b;
  background-image: none;
  border: none;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round'%3E%3Cpath d='m7.5 7.5 9 9m0-9-9 9'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round'%3E%3Cpath d='m7.5 7.5 9 9m0-9-9 9'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Yearly's badge is about money saved, not a trial. */
.pricing-page .value-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 6px;
  background: rgba(45, 212, 118, 0.12);
  border: 1px solid rgba(45, 212, 118, 0.32);
  color: #4ade80;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pricing-page .pc-permo {
  margin: 4px 0 0;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--pr-label);
}
/* Fixed height so the CTAs bottom-align and every card's dropdowns
   start on the same line. */
.pricing-page .pc-buy {
  display: flex;
  flex-direction: column;
  min-height: 152px;
}
.pricing-page .pc-action { margin-top: auto; }
/* Weekly and Yearly are NOT in the pricing-cards.js contract, so they
   stay plain links; styled off Starter and the old Plus respectively. */
.pricing-page .plan-cta.weekly {
  background: var(--pr-surface);
  border: 1px solid var(--pr-line);
  color: #fff;
}
.pricing-page .plan-cta.weekly:hover { background: rgba(255, 255, 255, 0.07); }
.pricing-page .plan-cta.yearly {
  background: rgba(244, 4, 80, 0.12);
  border: 1px solid rgba(244, 4, 80, 0.4);
  color: var(--pr-red-hi);
}
.pricing-page .plan-cta.yearly:hover { background: rgba(244, 4, 80, 0.2); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .pricing-page .pricing-cards { grid-template-columns: minmax(0, 1fr); }
}

.plan-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 26px;
  margin: clamp(26px, 3vw, 40px) 0 0;
  font-size: 13.5px;
}
.plan-links a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.18);
  text-underline-offset: 3px;
  transition: color 0.2s var(--pr-ease), text-decoration-color 0.2s var(--pr-ease);
}
.plan-links a:hover {
  color: #fff;
  text-decoration-color: var(--pr-red);
}

/* The base sheet sets this at up to 46px/880, which left the FAQ
   heading larger and heavier than the page's own H1. It sits one
   level below the title now. */
.pricing-page .faq-section h2 {
  font-size: clamp(22px, 2vw, 27px);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 26px;
}

/* ── FAQ: recolour only.
      The open/close motion is already handled by the base sheet
      (.faq-answer animates grid-template-rows). Adding a second
      animation here — ::details-content block-size — fought that one
      and inverted it: the panel stayed collapsed while open and
      expanded after closing. One animation per element. ── */
.faq-item[open] { border-color: rgba(244, 4, 80, 0.28); }
.faq-item[open] summary::after { border-color: var(--pr-red); }
.faq-item summary::after { transition: transform 0.34s var(--pr-ease), border-color 0.34s var(--pr-ease); }

/* ── Server Side Automation ───────────────────────────────────────────────
   A plan-wide feature, so it sits above the per-platform dropdowns rather
   than inside one of them. Paid cards only; Free does not get it. */
.pc-ssa {
  position: relative;
  margin: 0 0 14px;
  padding: 13px 14px;
  border-radius: 14px;
  border: 1px solid rgba(129, 140, 248, 0.45);
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.16), rgba(79, 70, 229, 0.08));
}
.pc-ssa-chip {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #4f46e5;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pc-ssa strong {
  display: block;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
}
.pc-ssa p {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(226, 232, 240, 0.92);
}

/* The same row on Free, struck through: what a paid plan adds is clearer when
   the line is present and crossed out than when it is simply missing. */
.pc-ssa--off { opacity: 0.72; }
.pc-ssa--off strong { text-decoration: line-through; text-decoration-thickness: 2px; }
.pc-ssa--off { border-color: rgba(148, 163, 184, 0.35); background: rgba(148, 163, 184, 0.10); }
.pc-ssa--off strong { color: rgba(226, 232, 240, 0.75); }
.pc-ssa--off p { color: rgba(203, 213, 225, 0.75); }
.pc-ssa p b { font-weight: 800; color: #c7d2fe; }

/* The Group plan link in the heading's subtitle (2026-10-13). */
.pricing-page .plans-sub a {
  color: var(--pr-red-hi);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(255, 61, 107, 0.4);
  text-underline-offset: 3px;
}
.pricing-page .plans-sub a:hover { text-decoration-color: currentColor; }

/* ── Lifetime + Group plan tiles (2026-10-13) ──────────────────────────────
   Rendered by pricing-block.js after the four cards, two to a row: each spans
   two of the four columns, the full row in the two-column band, and stacks in
   one column. order:10 keeps them under the cards in the narrow layouts, which
   reorder the cards with order 1-4. Same surface as the cards; Lifetime takes
   the crimson ring (a one-off purchase), the Group plan a crimson button. */
.pricing-page .pc-extra {
  position: relative;
  grid-column: auto;
  order: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px 22px;
  min-width: 0;
  padding: clamp(18px, 1.6vw, 24px) clamp(18px, 1.8vw, 26px);
  border-radius: 20px;
  border: 1px solid var(--pr-line);
  background:
    radial-gradient(58% 200% at 3% 40%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.018) 42%, rgba(255, 255, 255, 0.004) 100%),
    linear-gradient(180deg, #101216 0%, #0a0b0f 100%);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
  transition: transform 0.5s var(--pr-ease);
}
.pricing-page .pc-extra:hover { transform: translateY(-3px); }
.pricing-page .pc-extra--lifetime {
  border-color: rgba(244, 4, 80, 0.55);
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(244, 4, 80, 0.2), rgba(244, 4, 80, 0) 58%),
    linear-gradient(180deg, #13090d 0%, #0a0b0f 100%);
}
.pricing-page .pc-extra-main { min-width: 0; }
.pricing-page .pc-extra-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font: 700 11px/1.2 "Geist Mono", ui-monospace, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pr-label);
}
.pricing-page .pc-extra-chip {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--pr-red);
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.08em;
}
.pricing-page .pc-extra h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(18px, 1.4vw, 21px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-transform: none;
}
.pricing-page .pc-extra-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 0;
}
.pricing-page .pc-extra-price strong {
  color: #fff;
  font-size: clamp(26px, 2.1vw, 32px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
}
.pricing-page .pc-extra-price span { color: var(--pr-dim); font-size: 13px; }
.pricing-page .pc-extra-copy {
  max-width: 44ch;
  margin: 6px 0 0;
  color: var(--pr-body);
  font-size: 13.5px;
  line-height: 1.5;
}
.pricing-page .pc-extra-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(210px, 42%);
}
.pricing-page .pc-extra-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.14s ease, filter 0.14s ease;
}
.pricing-page .pc-extra-cta--group {
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 62%), var(--pr-red);
  box-shadow: inset 0 -3px 0 var(--pr-red-deep), 0 6px 4px rgba(0, 0, 0, 0.25);
}
.pricing-page .pc-extra-cta--lifetime {
  color: #0d1117;
  background: #fff;
  box-shadow: inset 0 -3px 0 #c9cfd8, 0 6px 4px rgba(0, 0, 0, 0.25);
}
.pricing-page .pc-extra-cta:hover { transform: translateY(-2px); filter: brightness(1.06); }
.pricing-page .pc-extra-cta:active { transform: translateY(2px); }
.pricing-page .pc-extra-note {
  margin: 0;
  text-align: center;
  color: var(--pr-label);
  font-size: 11.5px;
  line-height: 1.4;
}
.pricing-page .pc-extra-link {
  color: var(--pr-red-hi);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(255, 61, 107, 0.35);
  text-underline-offset: 3px;
}
.pricing-page .pc-extra-link:hover { text-decoration-color: currentColor; }
@media (max-width: 900px) {
  .pricing-page .pc-extra { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .pricing-page .pc-extra { flex-direction: column; align-items: stretch; }
  .pricing-page .pc-extra-actions { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .pricing-page .pc-extra, .pricing-page .pc-extra-cta { transition: none; }
  .pricing-page .pc-extra:hover { transform: none; }
}


/* ── One offer card (2026-10-20) ───────────────────────────────────────────
   Dark twin of the block at the foot of pricing-block-light.css: the switch,
   one headline, one button, trust line, perks, payment marks, folded
   platform tiles. */
.pricing-page .plan-section { overflow: hidden; }
.pricing-page .plans-heading { text-align: center; }
.pricing-page .plans-heading h1 { text-align: center; }
.pricing-page .plans-sub { margin-inline: auto; text-align: center; }
.pricing-page .pricing-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 18px;
  padding: 12px 0 4px;
}
.pricing-page .pricing-cards .mg-plan-notice { width: 100%; max-width: 640px; justify-self: stretch; }

.pricing-page .pc-one {
  width: 100%;
  max-width: 640px;
  padding: clamp(18px, 2vw, 28px) clamp(18px, 2.4vw, 36px) clamp(20px, 2vw, 28px);
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(16, 18, 22, 0.78);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  text-align: center;
}
.pricing-page .pc-one::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 40%, rgba(255, 255, 255, 0.02) 100%); }
.pricing-page .pc-one:hover { transform: none; }

.pricing-page .pc-periods {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--pr-line);
  background: var(--pr-surface);
}
.pricing-page .pc-period-btn {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 48px;
  margin: 0;
  padding: 6px 6px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--pr-dim);
  cursor: pointer;
  transition: background 0.2s var(--pr-ease), color 0.2s var(--pr-ease), box-shadow 0.2s var(--pr-ease);
}
.pricing-page .pc-period-btn:hover { color: #fff; }
.pricing-page .pc-period-btn.is-on { background: rgba(255, 255, 255, 0.1); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 6px 16px -8px rgba(0, 0, 0, 0.6); }
.pricing-page .pc-period-btn:focus-visible { outline: 2px solid var(--pr-red); outline-offset: 2px; }
.pricing-page .pc-period-name { font-size: 14px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.pricing-page .pc-period-sub { font-size: 10.5px; font-weight: 600; line-height: 1.2; color: var(--pr-label); white-space: nowrap; }
.pricing-page .pc-period-save { color: #4ade80; font-weight: 800; }

.pricing-page .pc-kicker {
  margin: clamp(18px, 2vw, 26px) 0 0;
  font: 700 11px/1.2 "Geist Mono", ui-monospace, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pr-label);
}
.pricing-page .pc-period { display: none; }
.pricing-page .pc-one[data-period="weekly"] .pc-period[data-period="weekly"],
.pricing-page .pc-one[data-period="ultra"] .pc-period[data-period="ultra"],
.pricing-page .pc-one[data-period="yearly"] .pc-period[data-period="yearly"],
.pricing-page .pc-one[data-period="lifetime"] .pc-period[data-period="lifetime"] { display: block; }
.pricing-page .pc-one[data-period="semester"] .pc-period[data-period="semester"] { display: block; }
.pricing-page .plan-card h3.pc-h {
  display: block;
  justify-content: center;
  gap: 0;
  margin: 6px 0 0;
  font-size: clamp(30px, 4.6vw, 46px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-transform: uppercase;
  color: #fff;
}
.pricing-page .plan-card h3.pc-h b { font-weight: 900; color: var(--pr-red-hi); }
.pricing-page .pc-under { margin: 8px 0 0; font-size: 14px; line-height: 1.4; color: var(--pr-dim); }
.pricing-page .pc-one .pc-action { margin-top: 16px; border: 0; background: none; }
.pricing-page .pc-one .plan-cta { min-height: 56px; border-radius: 14px; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.pricing-page .pc-one .plan-cta.weekly,
.pricing-page .pc-one .plan-cta.ultra,
.pricing-page .pc-one .plan-cta.yearly,
.pricing-page .pc-one .plan-cta.lifetime,
.pricing-page .pc-one .plan-cta.semester {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 60%), var(--pr-red);
  border: 1px solid transparent;
  color: #fff;
  box-shadow: inset 0 -4px 0 var(--pr-red-deep), 0 14px 30px -10px rgba(244, 4, 80, 0.6);
}
.pricing-page .pc-one .plan-cta:hover { transform: translateY(-2px); filter: brightness(1.08); }
.pricing-page .pc-one .plan-cta:active { transform: translateY(2px); box-shadow: inset 0 -1px 0 var(--pr-red-deep); }
.pricing-page .pc-one .plan-note { margin: 10px 0 0; padding: 0 6px; font-size: 12px; line-height: 1.5; color: var(--pr-label); }
.pricing-page .pc-one .plan-note i { font-style: normal; margin: 0 7px; color: rgba(255, 255, 255, 0.2); }

.pricing-page .pc-perks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
  width: fit-content;
  max-width: 100%;
  margin: clamp(18px, 2vw, 24px) auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.pricing-page .pc-perks li { position: relative; padding-left: 28px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--pr-body); }
.pricing-page .pc-perks li::before { content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: rgba(244, 4, 80, 0.18); }
.pricing-page .pc-perks li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  background: var(--pr-red-hi);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7.5 12.5 3 3 6-7'/%3E%3C/svg%3E") center / 13px no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7.5 12.5 3 3 6-7'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* What you are buying: a tile per platform */
.pricing-page .pc-logos-head {
  margin: clamp(18px, 2vw, 24px) 0 0;
  font: 700 11px/1.2 "Geist Mono", ui-monospace, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pr-label);
}
.pricing-page .pc-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.pricing-page .pc-logos li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 74px;
  padding: 8px 4px 7px;
  border-radius: 12px;
  border: 1px solid var(--pr-line);
  background: rgba(255, 255, 255, 0.04);
}
.pricing-page .pc-logos img {
  width: 34px;
  height: 34px;
  padding: 3px;
  border-radius: 9px;
  background: #fff;
  object-fit: contain;
}
.pricing-page .pc-logos span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--pr-body);
}

@media (max-width: 700px) {
  .pricing-page .pc-one { padding: 16px 16px 20px; border-radius: 22px; }
  .pricing-page .pc-periods { gap: 3px; padding: 3px; }
  .pricing-page .pc-period-btn { min-height: 44px; padding: 5px 3px; }
  .pricing-page .pc-period-name { font-size: 13px; }
  .pricing-page .pc-period-sub { font-size: 10px; }
  .pricing-page .pc-perks { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .pricing-page .pc-one .plan-note i { display: block; height: 0; overflow: hidden; margin: 0; }
  .pricing-page .pc-logos li { width: 70px; padding: 8px 2px 7px; }
  .pricing-page .pc-logos span { font-size: 10px; }
}
@media (max-width: 400px) {
  .pricing-page .pc-period-sub { display: none; }
  .pricing-page .pc-period-btn { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .pricing-page .pc-period-btn { transition: none; }
}