/* Vanta Supply · the pricing page (round 36, 2026-10-22; reworked as round 37 the same day).
   Loaded after v2.css and menu.css, on pricing.html only. Uses the sketch's own colours
   (--ink, --mute, --raise …) and adds nothing to the shared files.
   Class names are checked against v2.css / menu.css: .band and .chips are taken there. */

/* ---------- the gradient: four to compare (review switch "Gradient", html[data-grad]) ----------
   --g    the gradient itself (the word "Pro", the founder bar, the Lifetime hint)
   --g1/2 the two colours of the lifetime glow · --laser the lifetime edge light · --tint small text */
html, html[data-grad="ember"] {
  --g: linear-gradient(95deg, #ffd9a8 0%, #f6a15a 45%, #f0733a 100%);
  --g1: rgba(240, 115, 58, 0.34); --g2: rgba(255, 196, 128, 0.2);
  --laser: 255, 190, 130; --tint: #f6b88a;
}
html[data-grad="glass"] {
  --g: linear-gradient(95deg, #c7d2fe 0%, #a5f3fc 48%, #fbcfe8 100%);
  --g1: rgba(140, 190, 255, 0.28); --g2: rgba(244, 184, 228, 0.2);
  --laser: 200, 225, 255; --tint: #c9dcff;
}
html[data-grad="chrome"] {
  --g: linear-gradient(100deg, #ffffff 0%, #b9b3ac 32%, #f7f2eb 55%, #8d867e 80%, #ebe6df 100%);
  --g1: rgba(243, 238, 231, 0.15); --g2: rgba(243, 238, 231, 0.08);
  --laser: 255, 255, 255; --tint: #e4dfd8;
}
html[data-grad="dusk"] {
  --g: linear-gradient(95deg, #a78bfa 0%, #f0abfc 50%, #fdba74 100%);
  --g1: rgba(167, 139, 250, 0.3); --g2: rgba(253, 186, 116, 0.18);
  --laser: 225, 200, 255; --tint: #d9c6ff;
}

/* ---------- the top ---------- */
.ptop { text-align: center; padding-top: 72px; }
.ptop__title { font-size: calc(64px * var(--head-s)); }
.ptop__pro {
  background: var(--g);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: 0.04em; /* keeps the last letter's edge inside the clip */
}
.ptop__lead { max-width: 470px; margin: 20px auto 0; }
.ptop__cols { display: flex; justify-content: center; margin-top: 28px; }
.ptop__cols li {
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: none;
  background: var(--raise); box-shadow: 0 0 0 3px var(--bg);
}
.ptop__cols li + li { margin-left: -6px; }
.ptop__cols img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- the switch: a solid track, one thumb that slides (same build as the viewer's) ---------- */
.plan { padding-top: 48px; scroll-margin-top: 24px; }
.psw-wrap { width: min(372px, 100%); margin: 0 auto; }
.psw {
  --at: 1;
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 4px; border-radius: 999px;
  background: var(--raise); box-shadow: inset 0 0 0 1px var(--line);
}
.psw__thumb {
  position: absolute; z-index: 0; left: 4px; top: 4px; bottom: 4px; width: calc((100% - 8px) / 3); border-radius: 999px;
  background: var(--ink); pointer-events: none;
  transform: translateX(calc(var(--at) * 100%));
  transition: transform .26s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.psw button {
  position: relative; z-index: 1; height: 40px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; color: var(--mute);
  transition: color .22s ease-out;
}
.psw button::after { content: ""; position: absolute; inset: -2px 0; } /* 44px tall hit area */
.psw button:hover { color: var(--ink); }
.psw button[aria-checked="true"] { color: var(--bg); }
.psw button:focus-visible { outline-offset: 1px; }
/* min-height holds the line before pricing.js writes the hints in, so the card below never jumps (CLS, 2026-11-06) */
.psw__hints { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 16px; padding: 0 4px; margin-top: 10px; }
.psw__hints span { text-align: center; font-size: 12.5px; line-height: 16px; color: var(--mute); }
.psw__hints .is-deal { background: var(--g); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- the card: price and button left, the list right ---------- */
@property --orbit { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes orbit { to { --orbit: 360deg; } }

.card {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: min(940px, 100%); margin: 28px auto 0;
  border-radius: 24px; background: var(--raise);
  box-shadow: inset 0 0 0 1px var(--line), 0 40px 90px -40px rgba(0, 0, 0, 0.8);
  transition: box-shadow .6s ease-out;
}
/* the laser: two slivers of light chasing round the 1px edge (the live Filament buy card's
   trick, quieter here). ::after is the plain white one, ::before the lifetime one in the
   gradient's colour; both run on the same clock, so the switch is a cross-fade. */
.card::before, .card::after {
  content: ""; --orbit: 0deg;
  position: absolute; z-index: 3; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  -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, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: orbit 9s linear infinite;
  transition: opacity .7s ease-out;
}
.card::after {
  background: conic-gradient(from var(--orbit),
    transparent 0deg, rgba(255, 255, 255, 0.42) 14deg, transparent 30deg,
    transparent 180deg, rgba(255, 255, 255, 0.22) 194deg, transparent 210deg);
}
.card::before {
  opacity: 0;
  background: conic-gradient(from var(--orbit),
    transparent 0deg, rgba(var(--laser), 0.95) 16deg, transparent 36deg,
    transparent 180deg, rgba(var(--laser), 0.6) 196deg, transparent 216deg);
}
.card[data-plan="life"]::before { opacity: 1; }
.card[data-plan="life"]::after { opacity: 0; }
.card[data-plan="life"] { box-shadow: inset 0 0 0 1px rgba(var(--laser), 0.16), 0 40px 100px -40px rgba(0, 0, 0, 0.85); }

/* the glow: a faint light along the top always; on Lifetime, the gradient's colours bloom in */
.card__glow {
  position: absolute; z-index: -1; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none;
  background: radial-gradient(120% 60% at 20% 0%, rgba(243, 238, 231, 0.05), transparent 60%);
}
.card__glow::before {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background:
    radial-gradient(70% 90% at 0% 0%, var(--g1), transparent 70%),
    radial-gradient(60% 80% at 100% 100%, var(--g2), transparent 70%); /* (the third, low on the left, removed in round 40) */
  transform: scale(1.06); transition: opacity .8s ease-out, transform 1.2s var(--ease);
}
.card[data-plan="life"] .card__glow::before { opacity: 1; transform: none; }

.card__buy, .card__list { position: relative; z-index: 1; padding: 40px 44px 40px; }
.card__buy { display: flex; flex-direction: column; }
.card__list { border-left: 1px solid var(--line); }

.card__name { display: flex; align-items: center; gap: 10px; min-height: 24px; font-size: 14px; font-weight: 500; color: var(--mute); }
.card__price { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 8px; margin-top: 28px; }
.card__amt {
  position: relative; display: inline-flex; align-items: flex-start; /* digit columns clip, so line them up by their tops */
  font-family: var(--font-head); font-weight: var(--head-w); font-size: calc(64px * var(--head-s)); line-height: 1;
  letter-spacing: var(--head-t); font-variant-numeric: tabular-nums;
}
.card__amt--you { display: block; font-size: calc(44px * var(--head-s)); }
.card__cur { margin-right: 0.02em; }
.card__per { font-size: 16px; color: var(--mute); }
.card__bill { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--mute); max-width: 32ch; text-wrap: pretty; }

/* ---------- rolling digits ----------
   One column per place (hundreds, tens, ones), each a strip of 0–9 that slides to its digit.
   A place that isn't needed folds to no width, so $6 grows into $149 from the left. */
.roll { --h: 1.08em; display: inline-flex; letter-spacing: 0; }
.roll__d {
  display: inline-block; height: var(--h); width: 0; overflow: hidden; opacity: 0; vertical-align: top;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  transition: width .55s var(--ease) calc(var(--k, 0) * 40ms), opacity .35s ease-out calc(var(--k, 0) * 40ms);
}
.roll__d.on { width: var(--dw, 0.6em); opacity: 1; }
.roll__s {
  display: flex; flex-direction: column;
  transform: translateY(calc(var(--n, 0) * -1 * var(--h)));
  transition: transform .8s cubic-bezier(0.2, 0.75, 0.15, 1) calc(var(--k, 0) * 60ms);
}
.roll__s span { display: block; height: var(--h); line-height: var(--h); text-align: center; }
.roll__d.is-snap, .roll__d.is-snap .roll__s { transition: none !important; }
.roll__probe { position: absolute; visibility: hidden; pointer-events: none; }
.card__amt .card__cur { line-height: 1.08em; }

/* ---------- words that change: the new line rises in as the old one lifts away ---------- */
.swap { display: inline-grid; }
.swap--block { display: grid; }
.swap__t { grid-area: 1 / 1; transition: opacity .3s ease-out, transform .45s var(--ease), filter .3s ease-out; }
.swap__t.is-enter { opacity: 0; transform: translateY(8px); filter: blur(4px); transition: none; }
.swap__t.is-out { opacity: 0; transform: translateY(-8px); filter: blur(4px); pointer-events: none; }

/* ---------- founder places: one line and a short bar that is the places LEFT ---------- */
.founder {
  margin-top: 24px;
  opacity: 0; transform: translateY(6px); visibility: hidden;
  transition: opacity .35s ease-out, transform .5s var(--ease), visibility 0s linear .5s;
}
.founder.is-on { opacity: 1; transform: none; visibility: visible; transition: opacity .45s ease-out .12s, transform .6s var(--ease) .12s, visibility 0s; }
.founder__line { font-size: 13.5px; line-height: 18px; color: var(--tint); font-variant-numeric: tabular-nums; }
.founder__bar { display: block; width: 136px; height: 3px; margin-top: 10px; border-radius: 3px; overflow: hidden; background: rgba(243, 238, 231, 0.1); }
.founder__fill {
  display: block; height: 100%; border-radius: inherit; transform-origin: left center; transform: scaleX(0);
  background: var(--g);
  transition: transform 1.1s var(--ease) .15s;
}

.card__foot { margin-top: auto; padding-top: 32px; display: grid; justify-items: start; gap: 12px; }
.card__go { min-height: 52px; padding: 0 28px; font-size: 16px; min-width: 240px; }
.card__quiet { display: inline-flex; align-items: center; min-height: 44px; font-size: 14.5px; color: var(--mute); transition: color .2s ease-out; }
.card__quiet:hover { color: var(--ink); }
html[data-as="member"] .pro--member { display: inline-flex; } /* the chip stays on a member's own card */

/* the list: the same words for every option */
.card__label { font-size: 13px; line-height: 1.4; color: var(--mute); }
.ticks { margin-top: 20px; display: grid; gap: 16px; }
.ticks li { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 14px; font-size: 15.5px; line-height: 1.5; color: rgba(243, 238, 231, 0.86); text-wrap: pretty; transition: color .4s ease-out; }
.ticks svg { width: 18px; height: 18px; margin-top: 2px; color: var(--tint); }
/* new drops: the last row, set apart by a hairline. Greyed with a dash on 3 months. */
.ticks .drop { padding-top: 16px; border-top: 1px solid var(--line); }
.drop__icon { position: relative; width: 18px; height: 18px; margin-top: 2px; }
.drop__icon svg { position: absolute; inset: 0; margin: 0; transition: opacity .35s ease-out, transform .45s var(--ease); }
.drop__no { opacity: 0; transform: scale(0.6); color: var(--faint) !important; }
.drop__note {
  display: inline-flex; align-items: center; height: 20px; margin-left: 4px; padding: 0 8px; border-radius: 999px; vertical-align: 1px;
  font-size: 11.5px; font-weight: 500; line-height: 1; white-space: nowrap; color: var(--mute);
  box-shadow: inset 0 0 0 1px rgba(243, 238, 231, 0.14);
}
.card[data-plan="quarter"] .drop { color: var(--faint); }
.card[data-plan="quarter"] .drop__yes { opacity: 0; transform: scale(0.6); }
.card[data-plan="quarter"] .drop__no { opacity: 1; transform: none; }

/* members: no switch, nothing to sell (the switch hides with .as-nopass) */
html[data-as="member"] .plan { padding-top: 40px; }
html[data-as="member"] .card { margin-top: 0; }

/* ---------- what people say ---------- */
.said { padding-top: 160px; }
.said__head { max-width: 640px; }
.said__rate { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--mute); }
.said__rate .stars { color: var(--tint); }
.said__head .h2 { margin-top: 14px; }
.quotes { margin-top: 40px; columns: 3; column-gap: 8px; }
.quote {
  break-inside: avoid; margin: 0 0 8px; padding: 26px 28px 22px; border-radius: 20px;
  background: var(--raise); box-shadow: inset 0 0 0 1px var(--line);
}
.quote blockquote { margin: 0; }
.quote p { font-size: 16px; line-height: 1.55; color: rgba(243, 238, 231, 0.88); text-wrap: pretty; }
.quote--big p { font-family: var(--font-head); font-weight: var(--head-w); font-size: calc(21px * var(--head-s)); line-height: 1.4; letter-spacing: calc(var(--head-t) * 0.4); color: var(--ink); }
.quote figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 18px; font-size: 14px; }
.quote__who { color: var(--ink); }
.quote__on { color: var(--mute); }

/* ---------- questions: heading left, the list right ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 64px; align-items: start; }
.faq__head { position: sticky; top: 96px; }
.faq__head .lead { margin-top: 14px; max-width: 30ch; }
.faq__mail { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(243, 238, 231, 0.3); text-underline-offset: 3px; }
.faq__mail:hover { text-decoration-color: var(--ink); }
.faq__list { border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa__q { font: inherit; }
.qa__q button {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 20px; align-items: center; column-gap: 20px;
  min-height: 64px; padding: 18px 0;
  font-size: 17px; line-height: 1.4; font-weight: 500; color: var(--ink); text-align: left;
}
.qa__q span { text-wrap: balance; }
.qa__q svg { width: 18px; height: 18px; color: var(--mute); transition: transform .35s var(--ease), color .2s ease-out; }
.qa__q button:hover svg { color: var(--ink); }
.qa.is-open .qa__q svg { transform: rotate(45deg); color: var(--ink); }
.qa__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.qa__a > div { overflow: hidden; }
.qa.is-open .qa__a { grid-template-rows: 1fr; }
.qa__a p { padding: 0 40px 22px 0; max-width: 60ch; font-size: 15.5px; line-height: 1.6; color: var(--mute); text-wrap: pretty; opacity: 0; transition: opacity .2s ease-out; }
.qa.is-open .qa__a p { opacity: 1; transition: opacity .35s ease-out .08s; }

/* ---------- the checkout steps (faked) ---------- */
dialog.pco {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 24px; border: 0; color: var(--ink);
  display: none; place-items: center; overflow: auto;
  background: rgba(8, 7, 6, 0.82);
  opacity: 0; transition: opacity .18s ease-out;
}
dialog.pco[open] { display: grid; }
dialog.pco::backdrop { background: transparent; }
dialog.pco.is-open { opacity: 1; transition: opacity .3s ease-out; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  dialog.pco { background: rgba(8, 7, 6, 0.6); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
}
.pco__in {
  position: relative; width: min(440px, 100%); padding: 36px 36px 32px; border-radius: 24px;
  display: grid; justify-items: start;
  background: var(--raise); box-shadow: inset 0 0 0 1px var(--line), 0 40px 90px -30px rgba(0, 0, 0, 0.9);
  transform: translateY(8px); transition: transform .18s ease-out;
}
dialog.pco.is-open .pco__in { transform: none; transition: transform .5s var(--ease); }
.pco__x {
  position: fixed; top: max(16px, calc(env(safe-area-inset-top) + 8px)); right: max(16px, calc(env(safe-area-inset-right) + 8px));
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(243, 238, 231, 0.08); transition: background-color .2s ease-out;
}
.pco__x:hover { background: rgba(243, 238, 231, 0.16); }
.pco__x svg { width: 17px; height: 17px; }
.pco__step { font-size: 13px; color: var(--mute); }
.pco__title { margin-top: 8px; font-family: var(--font-head); font-weight: var(--head-w); font-size: calc(32px * var(--head-s)); line-height: 1.1; letter-spacing: var(--head-t); }
.pco__line { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--mute); text-wrap: pretty; }
.pco__sum {
  width: 100%; margin-top: 22px; padding: 14px 16px; border-radius: 14px; background: var(--fill);
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px;
}
.pco__sum span:first-child { min-width: 0; color: var(--mute); }
.pco__sum span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pco__sum small { font-size: 13px; color: var(--faint); margin-left: 4px; }
.pco__google { width: 100%; min-height: 52px; margin-top: 20px; background: var(--ink); color: #1b1714; font-size: 15.5px; }
.pco__google:hover { background: #fff; }
.pco__g { width: 18px !important; height: 18px !important; }
.pco__polar {
  width: 100%; margin-top: 12px; min-height: 168px; padding: 20px; border-radius: 14px;
  display: grid; place-content: center; text-align: center; gap: 6px;
  box-shadow: inset 0 0 0 1px rgba(243, 238, 231, 0.14); background-image: repeating-linear-gradient(135deg, transparent 0 10px, rgba(243, 238, 231, 0.02) 10px 20px);
}
.pco__polar span { font-size: 14.5px; color: var(--mute); }
.pco__polar small { font-size: 12.5px; line-height: 1.5; color: var(--faint); max-width: 30ch; }
.pco__pay { width: 100%; min-height: 52px; margin-top: 16px; font-size: 16px; }
.pco__ok { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: var(--bg); background: var(--ink); }
.pco__ok svg { width: 22px; height: 22px; }
.pco__in[data-at="done"] .pco__title { margin-top: 20px; }

/* ---------- tablet ---------- */
@media (max-width: 900px) {
  .card__buy, .card__list { padding: 32px; }
  .quotes { columns: 2; }
  .faq { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .faq__head { position: static; }
  .faq__head .lead { max-width: 44ch; }
}

/* ---------- phones: the card stacks, price first ---------- */
@media (max-width: 720px) {
  .ptop { padding-top: 40px; }
  .ptop__title { font-size: calc(48px * var(--head-s)); }
  .ptop__lead { font-size: 16px; }
  .plan { padding-top: 36px; }
  .card { grid-template-columns: minmax(0, 1fr); border-radius: 20px; }
  .card__buy { padding: 28px 24px 28px; }
  .card__list { padding: 24px 24px 28px; border-left: 0; border-top: 1px solid var(--line); }
  .card__price { margin-top: 20px; }
  .card__amt { font-size: calc(56px * var(--head-s)); }
  .card__amt--you { font-size: calc(36px * var(--head-s)); }
  .card__foot { padding-top: 28px; justify-items: stretch; }
  .card__go { min-width: 0; width: 100%; }
  .ticks { margin-top: 16px; gap: 14px; }
  .ticks li { font-size: 15px; }
  .ticks .drop { padding-top: 14px; }

  .said { padding-top: 112px; }
  .quotes { columns: 1; margin-top: 28px; }
  .quote { padding: 22px 22px 18px; border-radius: 16px; }
  .quote--big p { font-size: calc(19px * var(--head-s)); }

  .faq { padding-top: 112px; }
  .qa__q button { font-size: 16px; padding: 16px 0; }
  .qa__a p { padding-right: 8px; font-size: 15px; }

  .pco__in { padding: 28px 22px 24px; border-radius: 20px; }
  .pco__title { font-size: calc(28px * var(--head-s)); }
}

@media (prefers-reduced-motion: reduce) {
  .psw__thumb, .founder, .founder.is-on, .founder__fill, .qa__a, .qa__a p, .roll__d, .roll__s,
  .card__glow::before, .drop__icon svg, .ticks li { transition: none !important; }
  .card::before, .card::after { animation: none; }
  .card::after { opacity: 0; }
  .card[data-plan="life"]::before { opacity: 0; }
  dialog.pco, dialog.pco.is-open, .pco__in, dialog.pco.is-open .pco__in { transition: none; transform: none; }
}

/* ---------- round 37b: phone review fixes ---------- */
.roll__probe { letter-spacing: 0; }
.drop__note { margin-left: 0; } /* the space before it does the spacing, so a wrapped pill lines up with the text */
.said__rate .stars svg { width: 14px; height: 14px; }
.pco__sum { flex-wrap: wrap; }
.pco__sum span:first-child { white-space: nowrap; }
/* a member's card never wears the lifetime look, whatever the (hidden) switch last said */
html[data-as="member"] .card .card__glow::before { opacity: 0; }
html[data-as="member"] .card::before { opacity: 0; }
html[data-as="member"] .card::after { opacity: 1; }
html[data-as="member"] .card { box-shadow: inset 0 0 0 1px var(--line), 0 40px 90px -40px rgba(0, 0, 0, 0.8); }
@media (max-width: 720px) {
  /* the stars sit above one unbroken sentence */
  .said__rate { display: grid; justify-items: start; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .swap__t, .card, .card::before, .card::after, .psw button { transition: none !important; }
}

/* ==================================================================
   Rounds 38–39 (2026-10-22), consolidated: more gradients, a bigger chip,
   new drops as a box with an explainer, reviews as a feature + 2×2 grid,
   the founder bar as wide as its line, and five headline looks to compare.
   ================================================================== */

/* Crimson: Ember with the red pushed towards crimson */
html[data-grad="crimson"] {
  --g: linear-gradient(95deg, #ffc9b0 0%, #f2604e 42%, #c8173f 100%);
  --g1: rgba(200, 23, 63, 0.36); --g2: rgba(242, 96, 78, 0.2);
  --laser: 255, 128, 128; --tint: #f7a097;
}
/* Blaze: Ember and Crimson mixed — amber light running into deep red */
html[data-grad="blaze"] {
  --g: linear-gradient(95deg, #ffd6a6 0%, #f7924c 30%, #ec4f3d 64%, #b8173d 100%);
  --g1: rgba(236, 79, 61, 0.32); --g2: rgba(247, 146, 76, 0.22);
  --laser: 255, 150, 112; --tint: #f8ab8c;
}

/* the chip on the card, a size up */
.card__name .pro--lg { height: 30px; padding: 0 13px; font-size: 14px; letter-spacing: 0.01em; }
.card__name { min-height: 30px; }

/* founder places: the bar runs exactly as wide as its line */
.founder { align-self: flex-start; width: max-content; max-width: 100%; }
.founder__bar { width: 100%; }

/* ---------- new drops: the one thing that differs by option, so it leads the list ---------- */
.drops {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: 14px; align-items: center;
  margin-bottom: 26px; padding: 14px 10px 14px 16px; border-radius: 14px;
  background: linear-gradient(rgba(var(--laser), 0.09), rgba(var(--laser), 0.03));
  box-shadow: inset 0 0 0 1px rgba(var(--laser), 0.24);
  transition: background-color .5s ease-out, box-shadow .5s ease-out;
}
/* the icon: a quiet tinted ring with the tick in the gradient's own light colour (no filled gradient) */
.drops__icon {
  position: relative; width: 32px; height: 32px; border-radius: 50%;
  color: var(--tint); background: rgba(var(--laser), 0.1); box-shadow: inset 0 0 0 1px rgba(var(--laser), 0.36);
  transition: background-color .4s ease-out, box-shadow .4s ease-out, color .4s ease-out;
}
.drops__icon svg { position: absolute; inset: 0; width: 16px; height: 16px; margin: auto; transition: opacity .35s ease-out, transform .45s var(--ease); }
.drops__title { font-size: 15.5px; line-height: 1.35; font-weight: 500; color: var(--ink); transition: color .4s ease-out; }
.drops__sub { margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--tint); transition: color .4s ease-out; }
.drops__info {
  position: relative; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  color: var(--mute); transition: color .2s ease-out, background-color .2s ease-out;
}
.drops__info::after { content: ""; position: absolute; inset: -6px; } /* 44px to tap */
.drops__info:hover { color: var(--ink); background: rgba(243, 238, 231, 0.07); }
.drops__info svg { width: 18px; height: 18px; }
/* (round 43: every option gets new drops the day they land, so the box no longer goes quiet on quarterly) */
html[data-as="member"] .drops { display: none; }

/* the explainer card (shares the checkout's dialog look) */
.pinfo__rows { width: 100%; margin-top: 22px; display: grid; gap: 10px; }
.pinfo__rows > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 14px 16px; border-radius: 14px; background: var(--fill); }
.pinfo__rows b { display: block; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.pinfo__rows b + span { display: block; margin-top: 2px; font-size: 14.5px; line-height: 1.5; color: var(--mute); text-wrap: pretty; }
.pinfo__ic { position: relative; width: 28px; height: 28px; border-radius: 50%; color: var(--mute); box-shadow: inset 0 0 0 1px var(--line); }
.pinfo__ic--yes { color: var(--tint); background: rgba(var(--laser), 0.1); box-shadow: inset 0 0 0 1px rgba(var(--laser), 0.36); }
.pinfo__ic svg { position: absolute; inset: 0; width: 14px; height: 14px; margin: auto; }
.pinfo__foot { margin-top: 16px; font-size: 13.5px; line-height: 1.5; color: var(--mute); }

/* ---------- reviews: the feature on the left, four equal quotes beside it ---------- */
.said__proof { margin-top: 0; }
.quotes { display: none; }
.said__body {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: 1fr;
  gap: 8px; margin-top: 36px;
}
.said .qset, .said .qset__view, .said .qset__track { display: contents; }
.said .quote {
  margin: 0; display: flex; flex-direction: column; min-width: 0;
  padding: 24px 26px 22px; border-radius: 20px; background: var(--raise); box-shadow: inset 0 0 0 1px var(--line);
}
.said .quote p { font-size: 15px; line-height: 1.6; color: rgba(243, 238, 231, 0.8); text-wrap: pretty; }
.said .quote figcaption { margin-top: auto; padding-top: 16px; font-size: 13px; }
.said .quote__who { color: var(--mute); }
.quote--feature { grid-row: span 2; padding: 30px 32px 26px !important; }
.quote--feature p { font-size: 18px !important; line-height: 1.6 !important; color: rgba(243, 238, 231, 0.92) !important; max-width: 34ch; }
.said .quote--copy { display: none; }

/* ---------- the headline: five looks (review switch "Headline", html[data-hl]) ---------- */
.ptop__eye, .ptop__line { display: none; }
.ptop__word, .ptop__line { white-space: normal; }
.ptop__pro { position: relative; display: inline-block; isolation: isolate; background: none; color: inherit; -webkit-background-clip: border-box; background-clip: border-box; padding: 0; }
.ptop__proT {
  display: inline-block; padding-right: 0.04em;
  background: var(--g); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Shine: a slow light passes across the word every few seconds, and a soft glow breathes behind it */
@keyframes hl-shine { 0%, 55% { background-position: 130% 0, 0 0; } 100% { background-position: -30% 0, 0 0; } }
@keyframes hl-breathe { 0%, 100% { opacity: .35; } 50% { opacity: .7; } }
html[data-hl="shine"] .ptop__proT {
  background-image: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.85) 50%, transparent 60%), var(--g);
  background-size: 250% 100%, 100% 100%; background-repeat: no-repeat;
  animation: hl-shine 4.5s ease-in-out infinite;
}
html[data-hl="shine"] .ptop__pro::before {
  content: attr(data-t); position: absolute; z-index: -1; inset: 0; padding-right: 0.04em;
  background: var(--g); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: blur(22px); animation: hl-breathe 4.5s ease-in-out infinite;
}
/* Material: the word is filled with a Material (the orange-core glass sphere), drifting slowly */
@keyframes hl-drift { from { background-position: 30% 45%; } to { background-position: 70% 60%; } }
html[data-hl="material"] .ptop__proT {
  background: url("/site/assets/materials/glass/loop/47.jpg") 50% 50% / 150% auto no-repeat;
  font-weight: 700; letter-spacing: -0.045em;
  -webkit-background-clip: text; background-clip: text;
  animation: hl-drift 9s ease-in-out infinite alternate;
}
/* Badge: Pro becomes a large pill, with the card's laser running round it */
html[data-hl="badge"] .ptop__pro {
  padding: 0.02em 0.32em 0.06em; border-radius: 999px; font-size: 0.8em; vertical-align: 0.1em;
  background: rgba(var(--laser), 0.08); box-shadow: inset 0 0 0 1px rgba(var(--laser), 0.28);
}
html[data-hl="badge"] .ptop__pro::after {
  content: ""; --orbit: 0deg; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--orbit), transparent 0deg, rgba(var(--laser), 0.95) 18deg, transparent 40deg, transparent 180deg, rgba(var(--laser), 0.55) 198deg, transparent 220deg);
  -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, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: orbit 6s linear infinite;
}
/* Line: no "Vanta Pro" headline at all — a chip names it, the headline says what it is */
html[data-hl="line"] .ptop__word { display: none; }
html[data-hl="line"] .ptop__line { display: inline; }
html[data-hl="line"] .ptop__eye { display: flex; justify-content: center; margin-bottom: 20px; }
html[data-hl="line"] .ptop__title { font-size: calc(56px * var(--head-s)); }
html[data-hl="line"][data-as="member"] .ptop__eye .pro { display: inline-flex; }

/* ---------- sketch only: review controls ---------- */
.review__toggle { display: none; }

@media (max-width: 900px) {
  .said__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: auto; }
  .quote--feature { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 720px) {
  .drops { margin-bottom: 22px; }
  html[data-hl="line"] .ptop__title { font-size: calc(40px * var(--head-s)); }
  /* reviews on phones: the feature, then the four as a swipe strip that runs to the screen's edges */
  .said__body { display: block; margin-top: 28px; }
  .said .qset, .said .qset__view { display: block; }
  .said .qset { margin-top: 8px; }
  .said .qset__track {
    display: flex; gap: 8px; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none;
  }
  .said .qset__track::-webkit-scrollbar { display: none; }
  .said .qset__track .quote { flex: 0 0 82%; scroll-snap-align: start; }
  .said .quote { padding: 20px 22px 18px; border-radius: 16px; }
  .quote--feature { padding: 24px 24px 20px !important; }
  .quote--feature p { font-size: 17px !important; }

  .review__toggle {
    display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px;
    font-size: 12.5px; font-weight: 500; color: var(--mute); background: rgba(27, 24, 22, 0.94); box-shadow: 0 0 0 1px var(--line);
  }
  .review:not(.is-open) .review__row { display: none; }
  .review { left: 8px; }
  .review__row { flex-wrap: wrap; justify-content: flex-end; border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .drops, .drops__icon, .drops__icon svg, .drops__title, .drops__sub { transition: none !important; }
  html[data-hl] .ptop__proT, html[data-hl] .ptop__pro::before, html[data-hl] .ptop__pro::after { animation: none !important; }
}
.pco__title { text-wrap: balance; }

/* ---------- round 39b: phone review fixes ---------- */
.drops__title, .drops__sub { text-wrap: balance; }
@media (max-width: 720px) {
  .drops { column-gap: 12px; padding: 12px 8px 12px 14px; }
  .review { bottom: 12px; }
}
/* the drops card on a short screen: everything, "Got it" included, fits without scrolling */
@media (max-height: 680px) {
  .pinfo .pco__in { padding: 22px 22px 20px; }
  .pinfo .pco__title { font-size: calc(24px * var(--head-s)); }
  .pinfo .pco__line { margin-top: 8px; font-size: 14.5px; }
  .pinfo__rows { margin-top: 14px; gap: 8px; }
  .pinfo__rows > li { padding: 10px 12px; }
  .pinfo__foot { margin-top: 10px; }
  .pinfo .pco__pay { margin-top: 12px; min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-hl="shine"] .ptop__pro::before { opacity: .5; }
  html[data-hl="badge"] .ptop__pro::after { display: none; }
}

/* ==================================================================
   Round 40 (2026-10-22): the badge headline refined + four more badge
   styles, the card glow trimmed, and the reviews on phones as one strip
   or one stack.
   ================================================================== */

/* ---------- Badge headline: the pill keeps its size, "Pro" sits smaller inside with room round it ---------- */
html[data-hl="badge"] .ptop__word { display: inline-flex; align-items: center; justify-content: center; gap: 0.22em; }
html[data-hl="badge"] .ptop__pro {
  display: inline-flex; align-items: center; justify-content: center;
  height: 0.94em; padding: 0 0.4em; font-size: 1em; vertical-align: 0; border-radius: 999px;
}
html[data-hl="badge"] .ptop__proT { font-size: 0.6em; line-height: 1; letter-spacing: -0.02em; padding-right: 0; }

/* Ring (the round 39 one): tinted fill, a hairline, the orbiting light */
html[data-hl="badge"]:is(:not([data-badge]), [data-badge="ring"]) .ptop__pro {
  background: rgba(var(--laser), 0.08); box-shadow: inset 0 0 0 1px rgba(var(--laser), 0.28);
}
/* Glass: frosted, lit along its top edge, no orbit */
html[data-hl="badge"][data-badge="glass"] .ptop__pro {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 18px 40px -18px rgba(var(--laser), 0.45);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
/* Solid: the pill is the gradient, the word sits dark on it */
html[data-hl="badge"][data-badge="solid"] .ptop__pro {
  background: var(--g); box-shadow: 0 18px 46px -18px rgba(var(--laser), 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
html[data-hl="badge"][data-badge="solid"] .ptop__proT { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #1a120e; }
/* Outline: no fill, a thin gradient edge, the word in the gradient */
html[data-hl="badge"][data-badge="outline"] .ptop__pro { background: none; box-shadow: 0 0 34px -10px rgba(var(--laser), 0.35); }
html[data-hl="badge"][data-badge="outline"] .ptop__pro::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: var(--g);
  -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, linear-gradient(#000 0 0); mask-composite: exclude;
}
/* Glow: the pill holds a soft light of its own and blooms out a little; the word is plain white */
html[data-hl="badge"][data-badge="glow"] .ptop__pro {
  background: radial-gradient(120% 140% at 50% 0%, rgba(var(--laser), 0.3), rgba(var(--laser), 0.08) 70%);
  box-shadow: inset 0 0 0 1px rgba(var(--laser), 0.32), inset 0 0 22px rgba(var(--laser), 0.22), 0 0 48px -6px rgba(var(--laser), 0.4);
}
html[data-hl="badge"][data-badge="glow"] .ptop__proT { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink); }
/* only Ring keeps the orbiting light */
html[data-hl="badge"]:not(:is(:not([data-badge]), [data-badge="ring"])) .ptop__pro::after { display: none; }

/* the lifetime glow on phones: one light, centred at the top of the card (the bottom ones go) */
@media (max-width: 720px) {
  .card__glow::before { background: radial-gradient(95% 55% at 50% 0%, var(--g1), transparent 75%); }
}

/* ---------- round 40b: phone review fixes ---------- */
html[data-hl="badge"][data-badge="glass"] .ptop__pro {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 10px 24px -14px rgba(var(--laser), 0.45);
}
html[data-hl="badge"][data-badge="solid"] .ptop__pro { box-shadow: 0 12px 28px -14px rgba(var(--laser), 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.said__body:focus-visible { outline-offset: 6px; border-radius: 20px; }

/* ---------- round 41: choices locked (Ember, Badge · Ring, real founder state, footer glow on) ---------- */
.review__row[aria-label="Footer glow"] { display: none !important; } /* (that switch comes from the shared menu.js) */
html[data-fglow="off"] .foot__glow { display: block; }
.drops__info svg { width: 19px; height: 19px; }

/* ---------- round 42: reviews on phones ----------
   The long quote becomes a feature of its own (no card: a big Ember quote mark, a little larger, a warm
   light behind it, five stars by the name), then "More reviews", then the four short ones as a strip of
   compact cards. Desktop keeps the feature + 2×2. */
.said__more { display: none; }
.qset__track:focus-visible { outline-offset: 4px; border-radius: 16px; }
@media (max-width: 720px) {
  .said__body { display: block; margin-top: 28px; }
  .said .qset, .said .qset__view { display: block; }

  .said .quote--feature {
    position: relative; isolation: isolate; overflow: visible;
    padding: 4px 0 0 !important; background: none; box-shadow: none; border-radius: 0;
  }
  .said .quote--feature::before {
    content: "\201C"; display: block; height: 0.62em; margin-bottom: 6px;
    font-family: var(--font-head); font-weight: 600; font-size: 76px; line-height: 0.9;
    background: var(--g); -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .said .quote--feature::after {
    content: ""; position: absolute; z-index: -1; left: -24px; top: -40px; width: 280px; height: 220px; pointer-events: none;
    background: radial-gradient(closest-side, rgba(var(--laser), 0.16), transparent);
  }
  .said .quote--feature p { max-width: none; font-size: 18px !important; line-height: 1.55 !important; color: rgba(243, 238, 231, 0.94) !important; }
  .said .quote--feature figcaption { display: flex; align-items: center; gap: 10px; padding-top: 16px; font-size: 13.5px; }
  .said .quote--feature figcaption::before { content: "\2605\2605\2605\2605\2605"; font-size: 11px; letter-spacing: 2px; color: var(--accent); }

  .said__more { display: block; margin: 40px 0 12px; font-size: 13px; line-height: 1.4; color: var(--mute); }
  .said .qset { margin-top: 0; }
  .said .qset__track {
    display: flex; align-items: stretch; gap: 8px; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none;
  }
  .said .qset__track::-webkit-scrollbar { display: none; }
  .said .qset__track .quote { flex: 0 0 74%; scroll-snap-align: start; padding: 16px 18px 14px; border-radius: 14px; }
  .said .qset__track .quote p { font-size: 14px; line-height: 1.5; }
  .said .qset__track .quote figcaption { padding-top: 10px; font-size: 12.5px; }
}
/* the feature's quote marks are drawn here, so on phones the big Ember mark can stand in for the opening one */
.quote__words::before { content: "\201C"; }
.quote__words::after { content: "\201D"; }
@media (max-width: 720px) { .said .quote--feature .quote__words::before { content: none; } }

/* ---------- round 42b: phone review fixes ---------- */
@media (max-width: 720px) {
  /* the gradient sizes to the mark itself, so the Ember actually shows; screen readers skip the decoration */
  .said .quote--feature::before {
    content: "\201C" / ""; display: block; width: fit-content; height: 0.5em; margin-left: -3px;
  }
  .said .quote--feature figcaption::before { content: "\2605\2605\2605\2605\2605" / ""; }
  /* the warm light sits behind the mark and the opening lines */
  .said .quote--feature::after { top: -60px; left: -40px; width: 340px; }
  /* Dan, 2026-11-06 mobile review: the warm light, much larger */
  .said .quote--feature::after { top: -200px; left: -160px; width: 680px; height: 560px; }
  .said { overflow-x: clip; } /* the light can spill past the screen's sides without making the page scroll sideways */
}

/* ==================================================================
   Round 43 (2026-10-22): new drops for everyone ("Regular new drops", no
   explainer), and what yearly and lifetime add, three ways on the
   "Extras" switch (html[data-extras]):
     plus  Quarterly lists the basics; Yearly "Everything in Quarterly, plus";
           Lifetime "Everything in Yearly, plus"
     box   the basics always, then a box of that option's extras
           (on quarterly a quiet nudge with "See yearly")
     grey  one list for all: the basics, then every extra, greyed with a
           dash where that option doesn't include it
   Which rows show follows .card__list[data-show] (set by pricing.js).
   ================================================================== */
.drops { grid-template-columns: 32px minmax(0, 1fr); }

.plist { transition: opacity .17s ease-out, transform .25s var(--ease); }
.plist.is-swap { opacity: 0; transform: translateY(4px); }

/* the label over the list: one of three */
.card__label .lbl { display: none; }
.card__list .lbl--base { display: inline; }

/* an extra: tick, a name, one line under it */
.xlist { display: grid; gap: 18px; }
.xrow { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 14px; transition: color .4s ease-out; }
.xrow .drop__icon svg { width: 18px; height: 18px; color: var(--tint); }
.xrow__text b { display: block; font-size: 15.5px; font-weight: 500; line-height: 1.4; color: var(--ink); transition: color .4s ease-out; }
.xrow__line { display: block; margin-top: 2px; font-size: 14.5px; line-height: 1.5; color: var(--mute); text-wrap: pretty; transition: color .4s ease-out; }
/* round 43b: the locked price is a yearly thing (lifetime never pays again), so lifetime never lists it */
.card__list[data-show="life"] .xrow[data-x="lock"] { display: none; }

.xwrap__title, .xwrap__nudge { display: none; }
.xwrap__title .xt { display: none; }

/* ---------- Plus ---------- */
html[data-extras="plus"] .card__list:not([data-show="quarter"]) .lbl--base { display: none; }
html[data-extras="plus"] .card__list[data-show="year"] .lbl--year,
html[data-extras="plus"] .card__list[data-show="life"] .lbl--life { display: inline; }
html[data-extras="plus"] .card__list:not([data-show="quarter"]) .ticks--base { display: none; }
html[data-extras="plus"] .card__list[data-show="quarter"] .xwrap { display: none; }
html[data-extras="plus"] .xwrap { margin-top: 20px; }
html[data-extras="plus"] .card__list[data-show="year"] .xrow:not([data-plus="year"]),
html[data-extras="plus"] .card__list[data-show="life"] .xrow:not([data-plus~="life"]) { display: none; }

/* ---------- Box ---------- */
html[data-extras="box"] .xwrap {
  margin-top: 26px; padding: 18px 18px 20px; border-radius: 14px;
  background: rgba(243, 238, 231, 0.03); box-shadow: inset 0 0 0 1px var(--line);
}
html[data-extras="box"] .xwrap__title { display: block; margin-bottom: 16px; font-size: 13px; line-height: 1.4; color: var(--tint); }
html[data-extras="box"] .card__list[data-show="year"] .xt--year,
html[data-extras="box"] .card__list[data-show="life"] .xt--life { display: inline; }
html[data-extras="box"] .card__list[data-show="year"] .xrow:not([data-for~="year"]) { display: none; }
/* quarterly: no rows, a quiet nudge instead */
html[data-extras="box"] .card__list[data-show="quarter"] .xwrap__title,
html[data-extras="box"] .card__list[data-show="quarter"] .xlist { display: none; }
html[data-extras="box"] .card__list[data-show="quarter"] .xwrap__nudge { display: block; }
html[data-extras="box"] .card__list[data-show="quarter"] .xwrap { padding: 16px 18px; }
.xwrap__nudge { font-size: 14.5px; line-height: 1.5; color: var(--mute); text-wrap: pretty; }
.xwrap__go {
  position: relative; display: inline-flex; align-items: center; margin-left: 4px;
  font: inherit; font-weight: 500; color: var(--ink); text-decoration: underline; text-decoration-color: rgba(243, 238, 231, 0.3); text-underline-offset: 3px;
  transition: text-decoration-color .2s ease-out;
}
.xwrap__go::after { content: ""; position: absolute; inset: -12px -8px; } /* 44px to tap */
.xwrap__go:hover { text-decoration-color: var(--ink); }

/* ---------- Greyed ---------- */
html[data-extras="grey"] .xwrap { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
html[data-extras="grey"] .xwrap__title { display: block; margin-bottom: 18px; font-size: 13px; line-height: 1.4; color: var(--mute); }
html[data-extras="grey"] .xt--grey { display: inline; }
/* a row this option doesn't include: dimmed, with a dash for the tick */
html[data-extras="grey"] .card__list[data-show="quarter"] .xrow:not([data-for~="quarter"]) :is(b, .xrow__line),
html[data-extras="grey"] .card__list[data-show="year"] .xrow:not([data-for~="year"]) :is(b, .xrow__line) { color: var(--faint); }
html[data-extras="grey"] .card__list[data-show="quarter"] .xrow:not([data-for~="quarter"]) .drop__yes,
html[data-extras="grey"] .card__list[data-show="year"] .xrow:not([data-for~="year"]) .drop__yes { opacity: 0; transform: scale(0.6); }
html[data-extras="grey"] .card__list[data-show="quarter"] .xrow:not([data-for~="quarter"]) .drop__no,
html[data-extras="grey"] .card__list[data-show="year"] .xrow:not([data-for~="year"]) .drop__no { opacity: 1; transform: none; }
.xrow .drop__no { color: var(--faint) !important; }

@media (max-width: 720px) {
  .xlist { gap: 16px; }
  .xrow__text b { font-size: 15px; }
  .xrow__line { font-size: 14px; }
  html[data-extras="box"] .xwrap { margin-top: 22px; padding: 16px 16px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .plist, .xrow, .xrow__text b, .xrow__line { transition: none !important; }
}
/* Greyed: the one row only lifetime gets says so */
.xrow__tag { display: none; }
html[data-extras="grey"] .xrow__tag {
  display: inline-flex; align-items: center; height: 20px; margin-left: 6px; padding: 0 8px; border-radius: 999px; vertical-align: 1px;
  font-size: 11.5px; font-weight: 500; line-height: 1; color: var(--mute); box-shadow: inset 0 0 0 1px rgba(243, 238, 231, 0.14);
}
/* when the tag wraps on a narrow screen it starts flush left under the name, not indented */
html[data-extras="grey"] .xrow__text b:has(.xrow__tag) { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 4px; }
html[data-extras="grey"] .xrow__tag { margin-left: 0; }

/* ==================================================================
   Round 44 (2026-10-22): on phones the plan switch stays pinned to the top
   of the screen while the card is in view (it lets go once the card has
   scrolled past, since it lives inside the plan section). pricing.js adds
   .is-stuck while it floats: the hints fade, the track gets a frosted backing.
   ================================================================== */
@media (max-width: 720px) {
  .psw-wrap { position: sticky; top: calc(12px + env(safe-area-inset-top)); z-index: 30; }
  .psw { transition: background-color .25s ease-out, box-shadow .25s ease-out; }
  .psw__hints { transition: opacity .2s ease-out; }
  .psw-wrap.is-stuck .psw__hints { opacity: 0; pointer-events: none; }
  /* the entrance has long finished by now; a held animation would stop the blur working */
  .js .psw-wrap.is-stuck { animation: none; }
  .psw-wrap.is-stuck .psw {
    background: rgba(27, 24, 22, 0.9);
    -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
    box-shadow: inset 0 0 0 1px rgba(243, 238, 231, 0.14), 0 12px 32px -8px rgba(0, 0, 0, 0.7);
  }
}
@media (prefers-reduced-motion: reduce) {
  .psw, .psw__hints { transition: none !important; }
}