/* plan_tiers.css — the plan cards, the Monthly / Annually switch and the
   Founding offer card.

   Moved out of landing.css unchanged so /settings can show the same cards
   with the same motion. Loaded by landing.html (just before landing.css, the
   position this block used to hold inside it) and by settings.html. The
   "Outside the landing page" section at the end supplies, for a .plan-tiers
   wrapper, the grid, card shell and scroll reveal that landing.css gives the
   landing page.

   .lp-offer__cta is written .btn.lp-offer__cta: this file now loads before
   landing.css, whose own .btn rule would otherwise win the tie it used to
   lose by coming later. */


.lp-notice {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--bento-sand);
  border: 1px solid var(--bento-line);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--bento-ink-soft);
  margin-bottom: var(--sp-7);
  max-width: 640px;
}
.lp-notice span:first-child {
  flex: none;
  width: 8px; height: 8px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--bento-tan-300);
  font-size: 0;
  animation: lp-pulse-dot 2.4s ease-in-out infinite;
}

.lp-plan-price { font-family: var(--font-display); font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; margin: var(--sp-1) 0 0; }
.lp-plan-price small { font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; letter-spacing: 0; color: var(--bento-ink-soft); }
/* The superseded price. It is set smaller and lighter than the one being
   charged, so the eye reaches the real number first and the old one reads as
   a footnote rather than as a warning. */
.lp-plan-price s {
  position: relative;
  margin-left: var(--sp-2);
  font-size: 0.875rem;
  font-weight: 400;
  color: color-mix(in srgb, var(--bento-ink) 55%, transparent);
  text-decoration: none;
}
/* The rule is drawn rather than a line-through, so it can sweep across once
   as the grid arrives. One hairline of body ink, inset so it stops at the
   glyphs instead of overhanging them. */
.lp-plan-price s::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 54%;
  height: 1px;
  background: var(--plan-strike);
  transform-origin: 0 50%;
}
.lp-plan-billed { color: var(--bento-ink-soft); font-size: 0.9375rem; margin: 0; }
.lp-plan-searches { color: var(--bento-ink-soft); font-size: 1rem; margin: auto 0 0; }
.lp-plan--highlight { border-color: var(--bento-tan-300); }
.lp-plan--offer { border: 2px solid var(--bento-tan-300); }

.lp-plan__save {
  display: inline-block;
  margin-left: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--bento-highlight);
  color: var(--bento-ink);
  box-shadow: inset 0 0 0 1px var(--bento-highlight-edge);
  letter-spacing: 0.02em;
  white-space: nowrap;
  /* Legible at a glance: the discount figure is the reason to look. */
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: none;
}
.lp-plan__ribbon {
  position: relative;
  overflow: hidden;
  align-self: flex-start;
  margin: 0;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--plan-offer-bg);
  color: var(--plan-offer-ink);
  box-shadow: inset 0 0 0 1px var(--plan-offer-edge);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Glint that runs across the offer badges. */
.lp-plan__ribbon::after,
.lp-offer__badge::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--bento-white) 45%, transparent) 50%, transparent 70%);
  transform: translateX(-120%);
}
@keyframes lp-glint { 0%, 74% { transform: translateX(-120%); } 94%, 100% { transform: translateX(120%); } }
@keyframes lp-strike { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* The ribbon lands on the card once and stays put. A badge that keeps
   wobbling reads as an advertisement; one that arrives and settles reads as
   a fact about the plan. */
@keyframes lp-ribbon-in {
  0%   { opacity: 0; transform: translateY(-9px) scale(.94); }
  62%  { opacity: 1; transform: translateY(2px) scale(1.02); }
  100% { opacity: 1; transform: none; }
}
/* The saving is drawn on with the highlighter, left to right, the same
   stroke the essays use to mark a phrase — so the motion says "this is the
   part to read" rather than just "look at me". */
@keyframes lp-save-mark { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.lp-bento.in .lp-plan__ribbon { animation: lp-ribbon-in .62s var(--ease-spring) .35s both; }
.lp-bento.in .lp-plan__ribbon::after,
.lp-bento.in .lp-offer__badge::after { animation: lp-glint 6.5s ease-in-out 1.4s infinite; }
.lp-bento.in .lp-plan-price s::after { animation: lp-strike .5s cubic-bezier(.3, .7, .4, 1) .7s both; }
.lp-bento.in .lp-plan__save { animation: lp-save-mark .55s cubic-bezier(.3, .7, .4, 1) .95s both; }

.lp-offer-grid { margin-bottom: var(--sp-7); }
.lp .lp-offer-grid { grid-auto-rows: minmax(220px, auto); }
.lp-offer__badge {
  position: relative;
  overflow: hidden;
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin: 0;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--plan-offer-bg);
  color: var(--plan-offer-ink);
  box-shadow: inset 0 0 0 1px var(--plan-offer-edge);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
/* A small light in front of the words that breathes, so the eye lands here. */
.lp-offer__badge::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--bento-ink);
}

/* Offer card: the same cream and tan as every other card, lifted by a warm
   wash of highlight yellow, a border in the tan of the page, and motion the
   plain plan cards do not have. It is the one card that keeps moving. */
.lp-card--offer {
  background:
    radial-gradient(60% 90% at 100% 0%, color-mix(in srgb, var(--bento-highlight) 42%, transparent), transparent 70%),
    radial-gradient(50% 80% at 0% 100%, color-mix(in srgb, var(--bento-tan-200) 55%, transparent), transparent 70%),
    linear-gradient(135deg, var(--bento-white), var(--bento-cream));
  border-color: var(--bento-tan-300);
  box-shadow: var(--shadow-card), 0 0 0 4px color-mix(in srgb, var(--bento-highlight) 26%, transparent);
}
/* A soft band of light that crosses the card every few seconds. */
.lp-card--offer::after,
.lp-plan--offer::after {
  content: "";
  position: absolute; top: -20%; bottom: -20%; left: 0;
  width: 38%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--bento-white) 70%, transparent) 50%, transparent);
  transform: translateX(-160%) skewX(-18deg);
}
.lp-offer__pct {
  padding: 0 var(--sp-1);
  margin-left: calc(var(--sp-1) * -1);
  border-radius: var(--r-xs);
  background: linear-gradient(transparent 55%, var(--bento-highlight) 55%) no-repeat;
  background-size: 100% 100%;
}
.lp-offer__now { color: var(--bento-ink); font-weight: 700; }
.lp-offer__was {
  position: relative;
  text-decoration: none;
  font-weight: 400;
  color: color-mix(in srgb, var(--bento-ink) 55%, transparent);
}
.lp-offer__was::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 54%;
  height: 1px;
  background: var(--plan-strike);
  transform-origin: 0 50%;
}

/* The button. It is the same tan fill and dark label as every other filled
   button on the site, including Subscribe on /pricing, so the reader meets
   one control and not two. What marks it as the offer's button is the ring
   that goes out from it and the arrow that leans toward what happens next,
   not a darker colour. */
.btn.lp-offer__cta {
  position: relative;
  z-index: 2;
  gap: var(--sp-2);
  background: var(--bento-tan-200);
  color: var(--bento-btn-text) !important; /* .btn in bento.css sets its colour with !important */
  box-shadow: inset 0 0 0 1px var(--bento-tan-300),
              0 6px 16px color-mix(in srgb, var(--bento-ink) 12%, transparent);
  transition: transform var(--dur-base) var(--ease-spring), background var(--dur-base) ease,
              color var(--dur-base) ease, box-shadow var(--dur-base) ease;
}
.btn.lp-offer__cta::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  border: 2px solid var(--bento-tan-300);
  opacity: 0;
  pointer-events: none;
}
.btn.lp-offer__cta:hover, .btn.lp-offer__cta:focus-visible {
  background: var(--bento-highlight);
  color: var(--bento-ink) !important;
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px var(--bento-highlight-edge),
              0 10px 22px color-mix(in srgb, var(--bento-ink) 16%, transparent);
}
.btn.lp-offer__cta:active { transform: scale(.97); }

@keyframes lp-sheen { 0%, 62% { transform: translateX(-160%) skewX(-18deg); } 100% { transform: translateX(420%) skewX(-18deg); } }
@keyframes lp-ring { 0% { opacity: .45; transform: scale(1, 1); } 55%, 100% { opacity: 0; transform: scale(1.1, 1.45); } }
@keyframes lp-halo {
  0%, 100% { box-shadow: var(--shadow-card), 0 0 0 4px color-mix(in srgb, var(--bento-highlight) 22%, transparent); }
  50%      { box-shadow: var(--shadow-card), 0 0 0 9px color-mix(in srgb, var(--bento-highlight) 42%, transparent); }
}
@keyframes lp-mark-grow { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
@keyframes lp-beckon { 0%, 62%, 100% { transform: none; } 70% { transform: translateY(-3px) scale(1.08); } 78% { transform: translateY(0) scale(.97); } 86% { transform: scale(1.04); } }
@keyframes lp-pulse-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.7); opacity: .45; } }

.lp-bento.in .lp-card--offer { animation: lp-halo 3.4s ease-in-out infinite; }
.lp-bento.in .lp-card--offer::after,
.lp-bento.in .lp-plan--offer::after { animation: lp-sheen 5.2s ease-in-out 1s infinite; }
/* The seat count is the one thing on the page that is actually running down,
   so it is the one thing that keeps a heartbeat. */
.lp-bento.in .lp-offer__badge::before { animation: lp-pulse-dot 2.2s ease-in-out infinite; }
/* The discount is highlighted in once, and then left alone. */
.lp-bento.in .lp-offer__pct {
  background-size: 0% 100%;
  animation: lp-mark-grow .8s cubic-bezier(.3, .7, .4, 1) .5s forwards;
}
.lp-bento.in .lp-offer__was::after { animation: lp-strike .5s cubic-bezier(.3, .7, .4, 1) .9s both; }
.lp-bento.in .lp-offer__cta::before { animation: lp-ring 4.4s ease-out 1.6s infinite; }
/* Pointing at the button hands the motion over to the reader: the ring stops
   asking once the button is under the cursor. */
.lp-bento.in .lp-offer__cta:hover::before,
.lp-bento.in .lp-offer__cta:focus-visible::before { animation: none; }

/* The annual card that carries the offer: the same halo and light as the
   banner above, so the two read as one thing. */
.lp-plan--offer { box-shadow: var(--shadow-card), 0 0 0 4px color-mix(in srgb, var(--bento-highlight) 26%, transparent); }
.lp-bento.in .lp-plan--offer { animation: lp-halo 3.4s ease-in-out infinite; }

/* Monthly / Annually switch (two radios; see the comment in landing.html). */
.lp-billing { position: relative; }
/* The radios stay in the tab order but out of sight. landing.css has its own
   .sr-only; /settings and /pricing don't load it, so this file hides them. */
.lp-billing__input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.lp-billing__switch { display: none; }
.lp-plans__label {
  margin: 0 0 var(--sp-4);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--bento-ink-soft);
}
.lp-plans + .lp-plans { margin-top: var(--sp-7); }

@supports selector(:has(*)) {
  .lp-billing__switch {
    position: relative;
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 0 var(--sp-6);
    padding: 4px;
    border: 1px solid var(--bento-tan-200);
    border-radius: var(--r-pill);
    background: var(--bento-cream);
    box-shadow: var(--shadow-card);
  }
  .lp-billing__switch label {
    position: relative;
    z-index: 1;
    display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
    min-height: 44px;
    padding: 0 var(--sp-5);
    border-radius: var(--r-pill);
    font-weight: 600;
    font-size: 0.9375rem;
    white-space: nowrap;
    color: var(--bento-ink-soft);
    cursor: pointer;
    transition: color var(--dur-base) ease;
  }
  /* The saving is the reason to look at the second half, so it is the one
     yellow thing in the switch, and it nudges the reader toward it while the
     monthly half is chosen. */
  .lp-billing__save {
    position: relative;
    overflow: hidden;
    padding: 2px var(--sp-2);
    border-radius: var(--r-pill);
    background: var(--bento-highlight);
    color: var(--bento-ink);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px var(--bento-highlight-edge);
  }
  .lp-billing__save::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--bento-white) 65%, transparent) 50%, transparent 70%);
    transform: translateX(-120%);
    animation: lp-glint 3.2s ease-in-out infinite;
  }
  .lp-billing:has(#bill-monthly:checked) .lp-billing__save { animation: lp-beckon 3.6s ease-in-out 1.5s infinite; }
  .lp-billing__thumb {
    position: absolute; top: 4px; bottom: 4px; left: 4px;
    width: calc(50% - 4px);
    border-radius: var(--r-pill);
    background: var(--bento-tan-200);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--bento-tan-300) 55%, transparent), inset 0 0 0 1px var(--bento-tan-300);
    transition: transform .55s var(--ease-spring);
  }
  .lp-billing:has(#bill-annual:checked) .lp-billing__thumb { transform: translateX(100%); }
  .lp-billing:has(#bill-monthly:checked) label[for="bill-monthly"],
  .lp-billing:has(#bill-annual:checked) label[for="bill-annual"] { color: var(--bento-ink); }
  .lp-billing:has(.lp-billing__input:focus-visible) .lp-billing__switch { outline: 2px solid var(--bento-ink); outline-offset: 3px; }

  .lp-billing:has(#bill-monthly:checked) .lp-plans--annual,
  .lp-billing:has(#bill-annual:checked) .lp-plans--monthly { display: none; }
  .lp-plans + .lp-plans { margin-top: 0; }
  .lp-plans__label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  /* The grid that just appeared plays its entrance again. */
  .lp-plans .lp-bento.in > .bento-cell { animation: lp-plan-in .55s var(--ease-spring) both; }
  .lp-plans .lp-bento.in > .bento-cell:nth-child(2) { animation-delay: 60ms; }
  .lp-plans .lp-bento.in > .bento-cell:nth-child(3) { animation-delay: 120ms; }
  .lp-plans .lp-bento.in > .bento-cell:nth-child(4) { animation-delay: 180ms; }
}
@keyframes lp-plan-in { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
  .lp-billing__switch { display: grid; width: 100%; }
  /* Halves stay equal so the thumb lines up: the pill goes under the word. */
  .lp-billing__switch label { flex-direction: column; gap: 2px; min-height: 52px; padding: var(--sp-1) var(--sp-2); }
}
.lp-plans-link { margin-top: var(--sp-6); font-size: 1rem; }
.lp-plans-link a { color: var(--bento-info); font-weight: 500; }

/* ---- Ads line on each plan card ----
   Free carries ads; every paid plan is ad-free (plans.AD_FREE_PLANS).
   The ad-free line is the highlighter yellow the rest of the page uses for
   "this is the part to read", so the difference is visible at a glance. */
.lp-plan-ads {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  margin: var(--sp-1) 0 0;
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--bento-ink);
  background: var(--bento-sand);
  box-shadow: inset 0 0 0 1px var(--bento-line);
}
.lp-plan-ads--free {
  background: var(--bento-highlight);
  box-shadow: inset 0 0 0 1px var(--bento-highlight-edge);
}

/* /pricing only: who the plan suits and what it opens (the features /
   best_for arguments of plan_tiers). The list sits between the price and the
   search count, which keeps its margin-top:auto, so the counts, ads lines
   and buttons still line up along the bottom of every card in a row. */
.lp-plan-for { margin: 0; font-size: 0.9375rem; font-style: italic; color: var(--bento-ink-soft); }
.lp-plan-features {
  list-style: none;
  margin: var(--sp-2) 0 var(--sp-3);
  padding: var(--sp-3) 0 0;
  border-top: 1px solid var(--bento-line);
  display: grid;
  gap: var(--sp-2);
}
.lp-plan-features li {
  position: relative;
  padding-left: 24px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--bento-ink);
}
.lp-plan-features li::before {
  content: "";
  position: absolute; left: 0; top: 0.22em;
  width: 15px; height: 15px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8l3.5 3.5L13 4' stroke='%23C7A47C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The card's own action (/settings and /pricing: landing cards carry none). */
.lp-plan-cta { margin-top: var(--sp-3); align-self: stretch; justify-content: center; min-height: 44px; }
.lp-plan-current {
  margin: var(--sp-3) 0 0;
  min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  border: 1px dashed var(--bento-tan-300);
  font-weight: 600;
  color: var(--bento-ink);
}

/* ---- Outside the landing page ----
   landing.css scopes its grid and card shell to .lp; a page that shows the
   plans elsewhere wraps them in .plan-tiers and gets the same shell here.
   The reveal hides cards only once static/js/plan_tiers.js has marked the
   wrapper .pt-ready, so without JavaScript every card is simply shown. */
.plan-tiers { overflow-x: clip; }
.plan-tiers .lp-bento {
  width: 100%;
  margin-inline: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(260px, auto);
  gap: var(--sp-5);
}
.plan-tiers .lp-bento > .bento-cell { min-width: 0; }
.plan-tiers .lp-bento > .bento-cell[data-span="4x1"] { grid-column: 1 / -1; }
.plan-tiers .lp-offer-grid { grid-auto-rows: auto; }
.plan-tiers .lp-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--sp-6);
  gap: var(--sp-3);
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) ease, border-color var(--dur-fast) ease;
}
.plan-tiers .lp-card .bento-card__title { font-size: 1.5rem; line-height: 1.2; }
.plan-tiers .lp-card .bento-card__body { line-height: 1.55; }
.plan-tiers .lp-card::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
              color-mix(in srgb, var(--bento-highlight) 30%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-base) ease;
}
@media (hover: hover) {
  .plan-tiers .lp-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
  .plan-tiers .lp-card:hover::before { opacity: 1; }
}
.plan-tiers .lp-card:focus-within { border-color: var(--bento-tan-300); }
.plan-tiers .lp-card:has(a, button):active { transform: scale(.985); transition-duration: var(--dur-fast); }
.plan-tiers .lp-card--split { flex-direction: row; align-items: stretch; gap: var(--sp-6); }
.plan-tiers .lp-card__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.plan-tiers .lp-card--split > .lp-fx { flex: 0 0 30%; height: auto; margin: 0; display: flex; align-items: center; justify-content: center; }

.plan-tiers.pt-ready .reveal-grid > * {
  opacity: 0; transform: translateY(18px) scale(.97);
  transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.22,1.2,.36,1);
}
.plan-tiers.pt-ready .reveal-grid.in > * { opacity: 1; transform: none; }
.plan-tiers.pt-ready .reveal-grid > *:nth-child(2) { transition-delay: 50ms; }
.plan-tiers.pt-ready .reveal-grid > *:nth-child(3) { transition-delay: 100ms; }
.plan-tiers.pt-ready .reveal-grid > *:nth-child(4) { transition-delay: 150ms; }
.plan-tiers.pt-ready .reveal-grid.is-settled > * { transition-delay: 0ms; }

@media (max-width: 640px) {
  .plan-tiers .lp-bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: var(--sp-4); }
  .plan-tiers .lp-bento > .bento-cell,
  .plan-tiers .lp-bento > .bento-cell[data-span] { grid-column: auto; }
  .plan-tiers .lp-card { padding: var(--sp-5); }
  .plan-tiers .lp-card .bento-card__title { font-size: 1.3125rem; }
  .plan-tiers .lp-card--split { flex-direction: column; gap: var(--sp-4); }
  .plan-tiers .lp-card--split > .lp-fx { flex-basis: auto; height: 120px; order: -1; }
  .plan-tiers .lp-plan-price { font-size: 1.75rem; }
}

/* Pause what is scrolled away; stop it all for reduced motion. */
.plan-tiers .lp-bento.is-offscreen .lp-fx,
.plan-tiers .lp-bento.is-offscreen .lp-fx *,
.plan-tiers .lp-bento.is-offscreen .lp-fx *::before,
.plan-tiers .lp-bento.is-offscreen .lp-fx *::after,
.plan-tiers .lp-bento.is-offscreen .lp-offer, .plan-tiers .lp-bento.is-offscreen .lp-offer *,
.plan-tiers .lp-bento.is-offscreen .lp-offer::after,
.plan-tiers .lp-bento.is-offscreen .lp-plan--offer,
.plan-tiers .lp-bento.is-offscreen .lp-plan--offer::after { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .plan-tiers .lp-fx, .plan-tiers .lp-fx *, .plan-tiers .lp-fx *::before, .plan-tiers .lp-fx *::after,
  .lp-plan__ribbon, .lp-plan__ribbon::after, .lp-offer__badge::after,
  .lp-plan-price s::after, .lp-plan__save,
  .lp-card--offer, .lp-card--offer::after, .lp-plan--offer, .lp-plan--offer::after,
  .lp-offer__badge::before, .lp-offer__pct, .lp-offer__was::after,
  .lp-offer__cta::before,
  .lp-billing__save, .lp-billing__save::after,
  .lp-plans .lp-bento > .bento-cell { animation: none !important; }
  .lp-billing__thumb { transition: none; }
  .lp-plan__save { clip-path: none; }
  .plan-tiers .lp-card, .plan-tiers .lp-card:hover { transform: none; transition: none; }
  .plan-tiers.pt-ready .reveal-grid > * { opacity: 1; transform: none; transition: none; }
}