/* ==========================================================================
   dulus.ai — pricing.css
   /pricing/ — Free + Fuel. The desktop app's "Upgrade" button opens this
   page, so the three plans sit on the first screen and nothing there waits
   for a script: the hero and the cards rise on CSS alone, the sections
   below use main.js's .reveal / .split, and the page reads in full without
   JavaScript. There is no pricing.js.

   Loaded right after dulus.css; reuses its tokens and components (.card,
   .btn, .chip, .cmd, .link, .sec-head, .eyebrow). In page order:
     hero · plans · compare (the table) · cost (the meter) · faq · cta
   No plan prices anywhere: subscriptions are sold on dulus.online. Fuel
   rates are only ever relative (1×–4×).
   ========================================================================== */

/* Model ids, key prefixes and header names are short and never break at
   their hyphens. */
main code {
  white-space: nowrap;
}

/* ----------------------------------------------------------------- hero -- */

.pricing-hero {
  position: relative;
  padding: calc(var(--nav-h) + clamp(64px, 7.4vw, 120px)) 0 clamp(44px, 4.6vw, 72px);
  text-align: center;
  isolation: isolate;
}
/* The light comes from above the featured card and spills down behind all
   three, so it is taller than the hero itself. */
.pricing-hero__glow {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  height: min(1280px, 160vh);
  pointer-events: none;
  background:
    radial-gradient(34% 26% at 50% 10%, rgba(255, 210, 122, 0.085), transparent 70%),
    radial-gradient(52% 40% at 50% 48%, rgba(245, 152, 42, 0.085), transparent 72%),
    radial-gradient(40% 36% at 0% 0%, rgba(200, 92, 35, 0.07), transparent 70%),
    radial-gradient(36% 30% at 100% 8%, rgba(200, 92, 35, 0.05), transparent 70%);
}
.pricing-hero__inner {
  display: grid;
  justify-items: center;
  gap: 24px;
}
.pricing-hero__title {
  font-size: clamp(2.7rem, 1.1rem + 5.1vw, 5.6rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
}
.pricing-hero__title > span,
.pricing-hero__title > .serif {
  display: block;
}
.pricing-hero__title > span {
  animation: rise 1.1s var(--ease-out) 60ms both;
}
.pricing-hero__title > .serif {
  margin-top: 0.02em;
  padding-bottom: 0.06em;
  animation: rise 1.2s var(--ease-out) 180ms both;
}
.pricing-hero__lede {
  max-width: 36rem;
  margin-inline: auto;
}

/* ---------------------------------------------------------------- plans -- */
/* Three cards on one subgrid, so the price, the button and the lists line
   up across them whatever each one holds. The middle card is Fuel. */

.pricing-plans {
  position: relative;
  padding-bottom: clamp(24px, 3vw, 48px);
}
.pricing-plans__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(6, auto);
  gap: 0 clamp(14px, 1.5vw, 22px);
  max-width: 1180px;
  margin-inline: auto;
}
.pricing-plan {
  grid-row: span 6;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding: clamp(24px, 2.3vw, 34px);
}

.pricing-plan__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: clamp(24px, 2.2vw, 32px);
}
.pricing-plan__name {
  font-size: 1.375rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.pricing-plan__head .chip {
  height: 26px;
  padding: 0 10px;
}

.pricing-plan__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 14px;
}
.pricing-plan__amount {
  font-family: var(--display);
  font-size: clamp(2.5rem, 1.7rem + 1.4vw, 3.3rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.055em;
  color: var(--ink);
}
.pricing-plan__amount--site {
  font-size: clamp(1.9rem, 1.35rem + 1vw, 2.45rem);
  letter-spacing: -0.045em;
}
.pricing-plan__per {
  font-size: var(--fs-sm);
  color: var(--ink-3);
}
.pricing-plan__desc {
  max-width: 30rem;
  margin-bottom: 26px;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-3);
}

.pricing-plan__ctas {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 14px;
  margin-bottom: 30px;
}
.pricing-plan__btn {
  width: 100%;
}
.pricing-plan__alt {
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.pricing-plan__alt code {
  color: var(--gold);
}
.pricing-plan__more {
  font-size: var(--fs-sm);
}

.pricing-plan__body {
  display: grid;
  align-content: start;
  gap: 18px;
  margin-bottom: 26px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.pricing-plan__label {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pricing-plan__list {
  display: grid;
  gap: 11px;
}
.pricing-plan__list li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 12px;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink-2);
}
.pricing-plan__list .ico {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--gold-ink);
  stroke-width: 2;
}
.pricing-plan__list code {
  font-size: 0.86em;
  color: var(--gold);
}

/* A sunken well inside a card: "your models" on Free, the rate ladder on
   Fuel. Same anatomy, so the two read as a pair. */
.pricing-plan__panel {
  padding: 14px 16px 12px;
  border-radius: var(--r);
  background: var(--sunk);
  box-shadow: 0 0 0 1px var(--line) inset;
}
.pricing-plan__panel-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 11px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pricing-plan__panel-meta {
  color: var(--gold-ink);
}

.pricing-own > div {
  display: grid;
  grid-template-columns: 5.4rem minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
}
.pricing-own > div + div {
  border-top: 1px dashed var(--line);
}
.pricing-own dt,
.pricing-own dd {
  font-size: var(--fs-xs);
  line-height: 1.5;
}
.pricing-own dt {
  color: var(--ink-3);
}
.pricing-own dd {
  color: var(--ink-2);
}

/* The rate ladder: model, what it is for, a four-step meter, the multiple. */
.pricing-rates li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 2rem;
  grid-template-areas:
    "id meter x"
    "what meter x";
  align-items: center;
  column-gap: 14px;
  row-gap: 1px;
  padding: 9px 0;
}
.pricing-rates li + li {
  border-top: 1px dashed var(--line);
}
.pricing-rates code {
  grid-area: id;
  font-size: 0.8rem;
  color: var(--ink);
}
.pricing-rates__what {
  grid-area: what;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.pricing-rates__meter {
  grid-area: meter;
  width: 64px;
  height: 6px;
  background: linear-gradient(90deg, var(--orange) 0 calc(var(--rate, 1) * 25%), rgba(255, 236, 210, 0.13) 0);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 13px, transparent 13px 17px);
  mask: repeating-linear-gradient(90deg, #000 0 13px, transparent 13px 17px);
}
.pricing-rates__x {
  grid-area: x;
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: right;
  color: var(--gold-ink);
}
.pricing-plan__lineup {
  margin: 8px 0 4px;
  font-size: var(--fs-xs);
}
.pricing-own code {
  font-size: 0.95em;
  color: var(--gold);
}

.pricing-ledger > div {
  display: grid;
  gap: 5px;
  padding: 16px 0;
}
.pricing-ledger > div:first-child {
  padding-top: 4px;
}
.pricing-ledger > div + div {
  border-top: 1px solid var(--line);
}
.pricing-ledger dt {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pricing-ledger dd {
  font-size: 0.95rem;
  color: var(--ink-2);
}

/* The feet share a row and line up at its top; Fuel's is the tallest, so
   the lighter cards end in quiet space rather than in a gap mid-card. */
.pricing-plan__foot {
  align-self: start;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--ink-3);
}
.pricing-plan__foot:not(.pricing-plan__foot--fuel),
.pricing-plan__holder {
  padding: 14px 16px;
  border-radius: var(--r-sm);
  background: rgba(255, 245, 230, 0.025);
  box-shadow: 0 0 0 1px var(--line) inset;
}
.pricing-plan__holder {
  color: var(--ink-2);
  background: linear-gradient(180deg, rgba(245, 152, 42, 0.1), rgba(245, 152, 42, 0.035));
  box-shadow: 0 0 0 1px rgba(245, 152, 42, 0.24) inset;
}
.pricing-plan__holder-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--gold);
}
.pricing-plan__holder-title .ico {
  width: 16px;
  height: 16px;
}
.pricing-plan__legal {
  margin-top: 12px;
  padding-inline: 4px;
  font-size: 0.75rem;
  color: var(--ink-3);
}

/* Fuel: warmer glass, a plumage rim and a light from above. */
.pricing-plan--featured {
  background:
    radial-gradient(90% 46% at 50% -4%, rgba(245, 152, 42, 0.17), transparent 70%),
    linear-gradient(180deg, rgba(255, 245, 230, 0.05), rgba(255, 245, 230, 0.015)),
    var(--bg-2);
  box-shadow: 0 50px 120px -50px rgba(245, 152, 42, 0.55), 0 30px 60px -30px rgba(0, 0, 0, 0.85);
}
.pricing-plan__rim {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 210, 122, 0.9), rgba(245, 152, 42, 0.5) 34%, rgba(224, 112, 26, 0.18) 70%, rgba(224, 112, 26, 0.1));
  -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);
}
.pricing-plan--featured .pricing-plan__body {
  border-top-color: rgba(250, 211, 139, 0.16);
}
.pricing-plan--featured .pricing-plan__amount {
  padding-right: 0.04em;
  background: var(--plumage-x);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Plans live elsewhere: a quieter sheet, so its lighter load reads as
   intent rather than as something missing. */
.pricing-plan--away {
  background: linear-gradient(180deg, rgba(255, 245, 230, 0.026), rgba(255, 245, 230, 0.006)), var(--bg);
}

/* --------------------------------------------------------------- compare -- */

/* The plans block is not a .section, so the table takes the shorter
   .section + .section rhythm itself. */
.pricing-compare {
  padding-top: calc(var(--section) * 0.72);
  padding-bottom: calc(var(--section) * 0.8);
}

/* --col is the width of each plan column. The Fuel column's tint and its
   plumage top edge are painted by the frame, so they run unbroken through
   the group rows (a <col> background stops at a spanning cell). */
.pricing-compare__frame {
  --col: 21%;
  position: relative;
  max-width: 980px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 245, 230, 0.03), rgba(255, 245, 230, 0.01)), var(--bg-1);
  box-shadow: 0 0 0 1px var(--line) inset, var(--shadow-2);
  overflow: hidden;
  isolation: isolate;
}
.pricing-compare__frame::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--col);
  background:
    linear-gradient(90deg, var(--orange-2), var(--gold-1) 50%, var(--orange-2)) top / 100% 2px no-repeat,
    linear-gradient(180deg, rgba(245, 152, 42, 0.09), rgba(245, 152, 42, 0.035) 30%);
  pointer-events: none;
}
.pricing-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
.pricing-table__col {
  width: var(--col);
}
.pricing-table th,
.pricing-table td {
  padding: 16px clamp(16px, 2.4vw, 32px);
  border-top: 1px solid var(--line);
  font-weight: 400;
  text-align: left;
  vertical-align: middle;
}
.pricing-table td {
  text-align: center;
}
.pricing-table thead th {
  padding-top: 26px;
  padding-bottom: 22px;
  border-top: 0;
  vertical-align: bottom;
}
.pricing-table thead th + th {
  text-align: center;
}
.pricing-table__plan {
  display: block;
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.pricing-table__price {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pricing-table thead th:last-child .pricing-table__price {
  color: var(--gold-ink);
}
.pricing-table__group th {
  padding-top: 28px;
  padding-bottom: 10px;
  border-top: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.pricing-table__cap {
  display: block;
  font-weight: 500;
  color: var(--ink);
}
.pricing-table__sub {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-3);
}
.pricing-table__sub code {
  font-size: 0.92em;
  color: var(--ink-2);
}
.pricing-table__yes {
  width: 18px;
  height: 18px;
  margin-inline: auto;
  color: var(--gold-ink);
  stroke-width: 2.2;
}
.pricing-table__no {
  color: var(--ink-4);
}

.pricing-compare__notes {
  display: grid;
  gap: 8px;
  max-width: 980px;
  margin: 20px auto 0;
  padding-inline: 6px;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--ink-3);
}

/* ------------------------------------------------------------------ cost -- */

.pricing-cost__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 104px);
}
.pricing-steps {
  margin-top: clamp(34px, 3.6vw, 52px);
}
.pricing-step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 14px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.pricing-step:last-child {
  border-bottom: 1px solid var(--line);
}
.pricing-step__no {
  grid-row: 1 / span 2;
  padding-top: 0.36em;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--gold-ink);
}
.pricing-step__title {
  font-size: 1.22rem;
  letter-spacing: -0.02em;
}
.pricing-step p {
  margin-top: 6px;
  font-size: 0.98rem;
  color: var(--ink-3);
}
.pricing-step code {
  font-size: 0.88em;
  white-space: nowrap;
  color: var(--gold);
}

/* The receipt: one call, set like the bill it is. */
.pricing-receipt {
  padding: clamp(22px, 2.4vw, 32px);
}
.pricing-receipt__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  margin-bottom: 8px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.pricing-receipt__title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.pricing-receipt__title code {
  white-space: nowrap;
  color: var(--ink);
}
.pricing-receipt__chip {
  height: 26px;
  padding: 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.64rem;
}
.pricing-receipt__lines {
  font-family: var(--mono);
  font-size: 0.8125rem;
}
.pricing-receipt__lines > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 4.4rem;
  align-items: baseline;
  gap: 14px;
  padding: 8px 0;
}
.pricing-receipt__lines dt {
  color: var(--ink-3);
}
.pricing-receipt__lines dd {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.pricing-receipt__lines dd.pricing-receipt__tag {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pricing-receipt__lines .is-free dd:not(.pricing-receipt__tag) {
  color: var(--ink-3);
}
.pricing-receipt__lines .is-free .pricing-receipt__tag {
  color: var(--live);
}
.pricing-receipt__lines--sum {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line-2);
}
.pricing-receipt__lines--sum > div {
  grid-template-columns: minmax(0, 1fr) auto;
}
.pricing-receipt__total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--ink);
  background: rgba(245, 152, 42, 0.08);
  box-shadow: 0 0 0 1px rgba(245, 152, 42, 0.26) inset;
}
.pricing-receipt__total-label {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.pricing-receipt__note {
  margin-top: 10px;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.pricing-receipt__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  font-family: var(--mono);
  font-size: 0.78rem;
  background: var(--sunk);
  box-shadow: 0 0 0 1px var(--line) inset;
}
.pricing-receipt__header code {
  font-size: inherit;
  color: var(--gold-ink);
}
/* A placeholder, not a number: the real value is in your response. */
.pricing-receipt__value {
  padding: 1px 8px;
  border-radius: 6px;
  color: var(--ink-2);
  box-shadow: 0 0 0 1px var(--line-3) inset;
  background-image: repeating-linear-gradient(135deg, rgba(255, 236, 210, 0.05) 0 4px, transparent 4px 8px);
}

.pricing-receipt__compare {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.pricing-receipt__label {
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pricing-bars {
  display: grid;
  gap: 14px;
}
.pricing-bars li {
  display: grid;
  grid-template-columns: 7.4rem 2rem minmax(0, 1fr) 6.6rem;
  grid-template-areas: "id x track note";
  align-items: center;
  column-gap: 14px;
  row-gap: 7px;
}
.pricing-bars code {
  grid-area: id;
  font-size: 0.78rem;
  color: var(--ink-2);
}
.pricing-bars__note {
  grid-area: note;
  font-size: var(--fs-xs);
  text-align: right;
  color: var(--ink-3);
}
.pricing-bars__x {
  grid-area: x;
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gold-ink);
}
.pricing-bars__track {
  grid-area: track;
  height: 8px;
  border-radius: var(--pill);
  background: rgba(255, 236, 210, 0.06);
  overflow: hidden;
}
.pricing-bars__track > span {
  display: block;
  width: calc(var(--rate, 1) * 25%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(245, 152, 42, 0.35), rgba(245, 152, 42, 0.7));
  transform-origin: left center;
}
.pricing-bars .is-this code,
.pricing-bars .is-this .pricing-bars__note {
  color: var(--ink);
}
.pricing-bars .is-this .pricing-bars__track > span {
  background: var(--plumage-x);
  box-shadow: 0 0 18px rgba(245, 152, 42, 0.55);
}
html.js .pricing-receipt .pricing-bars__track > span {
  transform: scaleX(0);
  transition: transform 1.3s var(--ease-out);
  transition-delay: calc(500ms + var(--rate, 1) * 110ms);
}
html.js .pricing-receipt.is-in .pricing-bars__track > span {
  transform: none;
}
.pricing-receipt__cap {
  margin-top: 22px;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--ink-3);
}

/* ------------------------------------------------------------------- faq -- */

.pricing-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: start;
  gap: clamp(40px, 6vw, 110px);
}
.pricing-faq__head {
  position: sticky;
  top: calc(var(--nav-h) + 56px);
}
.pricing-faq__list {
  border-bottom: 1px solid var(--line);
}
.pricing-faq__item {
  border-top: 1px solid var(--line);
  interpolate-size: allow-keywords;
}
.pricing-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 4px;
  list-style: none;
  cursor: pointer;
  font-family: var(--display);
  font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.pricing-faq__item summary::-webkit-details-marker {
  display: none;
}
.pricing-faq__item summary .ico {
  width: 18px;
  height: 18px;
  color: var(--ink-3);
  transition: transform var(--t) var(--ease), color var(--t-fast);
}
.pricing-faq__item summary:hover .ico {
  color: var(--ink);
}
.pricing-faq__item[open] summary .ico {
  transform: rotate(45deg);
  color: var(--gold-ink);
}
.pricing-faq__answer {
  max-width: 40rem;
  padding: 0 4px 28px;
  color: var(--ink-3);
}
.pricing-faq__answer p + p {
  margin-top: 12px;
}
.pricing-faq__answer code {
  font-size: 0.88em;
  color: var(--gold);
}
/* Where supported, the answer opens instead of appearing. */
.pricing-faq__item::details-content {
  block-size: 0;
  overflow: clip;
  opacity: 0;
  transition: block-size 460ms var(--ease-out), opacity 460ms var(--ease-out), content-visibility 460ms allow-discrete;
}
.pricing-faq__item[open]::details-content {
  block-size: auto;
  opacity: 1;
}

/* ------------------------------------------------------------------- cta -- */

.pricing-cta {
  position: relative;
  padding: clamp(110px, 12vw, 180px) 0 clamp(96px, 10vw, 150px);
  text-align: center;
  overflow: clip;
  isolation: isolate;
}
.pricing-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2) 30%, var(--line-2) 70%, transparent);
}
.pricing-cta__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42% 38% at 50% 40%, rgba(245, 152, 42, 0.12), transparent 70%),
    radial-gradient(70% 50% at 50% 100%, rgba(200, 92, 35, 0.1), transparent 70%);
}
.pricing-cta__inner {
  display: grid;
  justify-items: center;
  gap: 26px;
}
.pricing-cta__bird {
  width: 92px;
  margin-bottom: 4px;
  filter: drop-shadow(0 14px 32px rgba(245, 152, 42, 0.45));
}
.pricing-cta__title > span,
.pricing-cta__title > .serif {
  display: block;
}
.pricing-cta__lede {
  max-width: 34rem;
  margin-inline: auto;
}
.pricing-cta__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 6px;
}
.pricing-cta__ctas .cmd {
  height: 56px;
  padding-left: 22px;
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 1040px) {
  .pricing-plan {
    padding: 24px 22px;
  }
  .pricing-rates__meter {
    display: none;
  }
  .pricing-rates li {
    grid-template-columns: minmax(0, 1fr) 2rem;
    grid-template-areas:
      "id x"
      "what x";
  }
}

@media (max-width: 960px) {
  .pricing-plans__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: 18px;
    max-width: 580px;
  }
  .pricing-plan {
    grid-row: auto;
    grid-template-rows: none;
    padding: clamp(24px, 5vw, 32px);
  }
  .pricing-rates__meter {
    display: block;
  }
  .pricing-rates li {
    grid-template-columns: minmax(0, 1fr) auto 2rem;
    grid-template-areas:
      "id meter x"
      "what meter x";
  }
  .pricing-cost__grid,
  .pricing-faq__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .pricing-faq__head {
    position: static;
  }
}

@media (max-width: 560px) {
  .pricing-hero__inner {
    gap: 20px;
  }
  .pricing-hero__lede {
    font-size: 1.06rem;
  }
  .pricing-compare__frame {
    --col: 68px;
  }
  .pricing-table th,
  .pricing-table td {
    padding: 14px 8px;
  }
  .pricing-table th[scope="row"] {
    padding-left: 16px;
  }
  .pricing-table__group th {
    padding: 22px 16px 8px;
  }
  .pricing-table thead th:first-child {
    padding-left: 16px;
  }
  .pricing-table__plan {
    font-size: 1.02rem;
  }
  .pricing-table__price {
    font-size: 0.6rem;
    letter-spacing: 0.04em;
  }
  .pricing-receipt__lines > div {
    grid-template-columns: minmax(0, 1fr) auto 3.6rem;
    gap: 10px;
  }
  .pricing-receipt__lines {
    font-size: 0.78rem;
  }
  .pricing-bars li {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "id note"
      "track x";
  }
  .pricing-bars__x {
    min-width: 1.8rem;
    text-align: right;
  }
  .pricing-cta__ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .pricing-cta__ctas .btn,
  .pricing-cta__ctas .cmd {
    width: 100%;
    justify-content: center;
  }
  .pricing-cta__ctas .cmd {
    justify-content: space-between;
  }
}

/* -------------------------------------------------------- accessibility -- */

@media (forced-colors: active) {
  .pricing-plan__rim,
  .pricing-hero__glow,
  .pricing-cta__glow {
    display: none;
  }
  .pricing-plan,
  .pricing-compare__frame {
    border: 1px solid CanvasText;
  }
  .pricing-plan--featured .pricing-plan__amount {
    color: CanvasText;
    background: none;
  }
}