.account-location { border-left: 1px solid var(--dito-color-border-dark); padding-left: 24px; color: var(--dito-color-dark-field-text); font-size: 14px; }
.account-session { margin-left: auto; display: flex; align-items: center; gap: 4px 20px; }
.account-session form { margin: 0; }
.account-session :is(button, a) { font-size: 14px; }
.account-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding: 42px 0 28px; }
.account-heading h1 { font-size: clamp(34px, 3.4vw, 44px); margin: 0; }
.account-heading h1 span { color: var(--dito-color-signal-red); }
.account-heading .account-label { margin-bottom: 12px; }
.account-label { margin: 0; font: 700 13px/1.4 var(--dito-font-body); letter-spacing: var(--dito-label-letter-spacing); text-transform: uppercase; color: var(--dito-color-secondary-text); }
.account-overview { overflow: hidden; border: 1px solid var(--dito-color-border); border-radius: 7px; margin-bottom: 24px; box-shadow: 0 20px 55px -25px #11111133; }
.account-summary { background: var(--dito-color-ink); color: var(--dito-color-white); padding: 28px 32px; position: relative; }
.account-summary .account-label { color: var(--dito-color-dark-field-text); padding-right: 88px; }
.account-summary h2 { margin: 8px 0 0; font: 400 34px/1.2 var(--dito-font-display); }
.account-status { position: absolute; right: 32px; top: 24px; border: 1px solid var(--dito-color-border-dark); border-radius: 32px; padding: 5px 12px; font-size: 12px; white-space: nowrap; }
.account-body { padding: 28px 32px; }
.account-body > p:first-child { margin-top: 0; max-width: 62ch; }
.account-body > p { color: var(--dito-color-secondary-text); }
.account-allowance { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
.account-allowance-number { display: flex; align-items: baseline; gap: 10px; }
.account-allowance-number strong { font: 400 64px/1 var(--dito-font-display); letter-spacing: -2px; }
.account-allowance-number span { color: var(--dito-color-secondary-text); font-size: 24px; }
.account-allowance p { margin: 8px 0 0; font-size: 14px; }
.account-allowance meter { display: block; width: 100%; height: 8px; margin: 18px 0 0; border: 0; background: var(--dito-color-soft-gray); }
.account-allowance meter::-webkit-meter-bar { border: 0; border-radius: 0; background: var(--dito-color-soft-gray); }
.account-allowance meter::-webkit-meter-optimum-value { background: var(--dito-color-signal-red); }
.account-allowance meter::-moz-meter-bar { background: var(--dito-color-signal-red); }
.account-renewal { border-left: 1px solid var(--dito-color-border); padding-left: 28px; }
.account-renewal strong { display: block; margin-top: 6px; font-weight: 400; font-size: 16px; }
.account-caption { font-size: 14px; color: var(--dito-color-secondary-text); }
.account-notice { padding: 16px; border-left: 3px solid var(--dito-color-signal-red); background: var(--dito-color-surface-paper); }
.member-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 24px; }
.member-actions a { min-height: var(--dito-touch-target); display: inline-flex; align-items: center; }
.account-section { margin-top: 24px; padding: 24px 0; border-top: 1px solid var(--dito-color-border); }
.account-section h2 { margin: 0 0 10px; font: 400 26px/1.2 var(--dito-font-display); }
.account-section > p { margin: 0 0 18px; color: var(--dito-color-secondary-text); max-width: 68ch; }
.account-billing { display: grid; grid-template-columns: 1fr auto; gap: 0 28px; align-items: center; }
.account-billing > p { margin: 0; }
.account-billing > button { grid-column: 2; grid-row: 1 / 3; }
.account-link-note { font-size: 12px; }
.account-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#member-status { margin: 0; color: var(--dito-color-secondary-text); }
#member-status:empty { display: none; }
#member-status.error { color: var(--dito-color-deep-red); }
#member-account #member-status { margin-top: 12px; font-size: 14px; }
.account-loading { color: var(--dito-color-secondary-text); min-height: 200px; }
.account-loading h2 { color: var(--dito-color-ink); margin: 0 0 12px; }
.account-skeleton { display: grid; gap: 10px; margin-top: 24px; max-width: 520px; }
.account-skeleton span { display: block; height: 10px; background: var(--dito-color-soft-gray); }
.account-skeleton span:nth-child(2) { width: 70%; }
.account-skeleton span:nth-child(3) { width: 40%; }
.account-lede { margin: 12px 0 0; max-width: 56ch; color: var(--dito-color-secondary-text); font-size: 17px; }
/* The membership chooser's header reads at the page's reading size; account-only views keep their own sizes. Only the
   chooser shows the lede and the Ink stage, so both scope these rules. */
.account-heading:has(.account-lede:not([hidden])) .account-label { font-size: 16px; font-weight: 700; }
.account-heading:has(.account-lede:not([hidden])) .account-lede { font-size: 20px; line-height: 1.5; }
html:has(.member-stage) .account-location { font-size: 16px; }
html:has(.member-stage) .account-session :is(button, a) { font-size: 16px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Plan choice: the compact Ink pricing stage and paper cards of ditoit.com/pricing. Cards only select; a choice shrinks
   them to their names and prices above one white summary whose last element is the page's one red action. */
.member-notice { margin: 0 0 20px; }
/* The chooser is the whole page: it ends with the Ink stage, leaving no white tail below it. */
.account-main:has(.member-stage) { padding-bottom: 0; }
html:has(.member-stage) { background: var(--dito-color-ink); }
.member-stage { position: relative; isolation: isolate; padding: 36px 0 40px; color: var(--dito-color-white); }
.member-stage::before { content: ''; position: absolute; z-index: -1; inset: 0 calc((100% - 100vw) / 2); background: var(--dito-color-ink); }
.member-stage-top { display: flex; justify-content: space-between; align-items: end; gap: 20px 32px; flex-wrap: wrap; }
.member-stage h2 { margin: 0; font: 400 32px/1.15 var(--dito-font-display); letter-spacing: -.02em; }
.member-cadence-wrap { display: grid; justify-items: center; gap: 8px; }
.member-cadence { display: inline-flex; gap: 4px; margin: 0; padding: 4px; border: 1px solid var(--dito-color-border-dark); border-radius: var(--dito-control-radius); }
.member-cadence label { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 150px; min-height: var(--dito-touch-target); padding: 10px 20px; border-radius: 4px; cursor: pointer;
  font: 700 18px/1.2 var(--dito-font-body); letter-spacing: var(--dito-label-letter-spacing); text-transform: uppercase; color: var(--dito-color-dark-field-text);
  transition: background-color var(--dito-motion-control) var(--dito-motion-settle-easing), color var(--dito-motion-control) var(--dito-motion-settle-easing); }
.member-cadence input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.member-cadence label:has(:checked) { background: var(--dito-color-white); color: var(--dito-color-ink); }
.member-cadence label:has(:focus-visible) { outline: var(--dito-focus-width) solid var(--dito-color-signal-red); outline-offset: var(--dito-focus-offset); }
.member-cadence-note { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 700; color: var(--dito-color-white); text-align: center; }
/* The clip margin keeps focus rings and the selected outline visible. */
.member-choice { display: flow-root; overflow: clip; overflow-clip-margin: 16px; }
.member-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 24px 0 0; padding: 0; border: 0; min-width: 0; }
.member-choice-note { margin: 18px 0 0; font-size: 18px; line-height: 1.5; color: var(--dito-color-white); }
.member-plan { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 24px; border-radius: 2px; cursor: pointer; background: var(--dito-color-surface-paper); color: var(--dito-color-ink);
  transition: box-shadow var(--dito-motion-control) var(--dito-motion-settle-easing), transform var(--dito-motion-control) var(--dito-motion-settle-easing); }
.member-plan[data-plan="pro"] { background: var(--dito-color-signal-red); color: var(--dito-color-white); }
.member-plan.is-selected { box-shadow: 0 0 0 3px var(--dito-color-ink), 0 0 0 6px var(--dito-color-white); }
.member-plan:has(:focus-visible) { outline: var(--dito-focus-width) solid var(--dito-color-signal-red); outline-offset: 10px; }
.member-plan[data-plan="pro"]:has(:focus-visible) { outline-color: var(--dito-color-white); }
@media (hover: hover) and (pointer: fine) { .member-plan:hover { transform: translateY(-2px); } }
/* The head wraps so Pro's tag can step under the name on narrow cards and at zoom. */
.member-plan-head { display: flex; justify-content: space-between; align-items: start; flex-wrap: wrap; gap: 8px 12px; }
.member-plan h3 { margin: 0; font: 700 28px/1.15 var(--dito-font-body); letter-spacing: -.03em; }
.member-plan-tag { flex: none; padding: 5px 9px; border: 2px solid var(--dito-color-white); background: var(--dito-color-ink); color: var(--dito-color-white); transform: rotate(4deg);
  font: 700 14px/1 var(--dito-font-body); letter-spacing: var(--dito-label-letter-spacing); text-transform: uppercase; }
.member-plan-audience { margin: 8px 0 18px; font: 700 16px/1.3 var(--dito-font-body); letter-spacing: var(--dito-label-letter-spacing); text-transform: uppercase; }
.member-plan-price { margin: 0; font: 700 56px/1 var(--dito-font-body); letter-spacing: -.05em; }
/* Inline blocks, so a changed amount replays its settle in place; the chosen card's currency sits small after it. */
.member-plan-amount { display: inline-block; white-space: nowrap; }
.member-plan-currency { margin-left: 6px; font-size: 18px; letter-spacing: var(--dito-label-letter-spacing); }
.member-plan-currency:empty { display: none; }
/* Billing lines are pricing truth, so they read at body size in the card's own text color (Ink on paper, white on Pro). */
.member-plan-billed { margin: 8px 0 0; font-size: 18px; line-height: 1.4; }
.member-plan-equivalent { margin: 4px 0 0; font-size: 18px; line-height: 1.4; }
/* The audience line stays a quiet label: gray on paper, white on the red Pro card. */
.member-plan .member-plan-audience { color: var(--dito-color-secondary-text); }
.member-plan[data-plan="pro"] .member-plan-audience { color: var(--dito-color-white); }
.member-plan-saving { margin: 16px 0 0; padding: 10px 14px; border-left: 3px solid currentColor; background: color-mix(in srgb, var(--dito-color-signal-red) 8%, transparent); color: var(--dito-color-signal-red);
  font: 700 18px/1.2 var(--dito-font-body); letter-spacing: var(--dito-label-letter-spacing); text-transform: uppercase; }
.member-plan[data-plan="pro"] .member-plan-saving { background: color-mix(in srgb, var(--dito-color-ink) 12%, transparent); color: var(--dito-color-white); }
.member-plan-allowance { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 22px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--dito-color-ink) 15%, transparent); font-size: 18px; line-height: 1.4; }
.member-plan[data-plan="pro"] .member-plan-allowance { border-top-color: color-mix(in srgb, var(--dito-color-white) 30%, transparent); }
.member-plan-allowance strong { font: 700 44px/1 var(--dito-font-body); letter-spacing: -.04em; }
/* The card's select mark is a quiet radio label, never a second button beside the continue action. */
.member-plan-mark { display: flex; align-items: center; gap: 10px; margin-top: auto; min-height: 24px;
  font: 700 16px/1.2 var(--dito-font-body); letter-spacing: var(--dito-label-letter-spacing); text-transform: uppercase; }
.member-plan-mark::before { content: ''; flex: none; box-sizing: border-box; width: 20px; height: 20px; border: 2px solid currentColor; border-radius: 50%; }
.member-plan.is-selected .member-plan-mark::before { background: currentColor; box-shadow: inset 0 0 0 4px var(--dito-color-surface-paper); }
.member-plan[data-plan="pro"].is-selected .member-plan-mark::before { box-shadow: inset 0 0 0 4px var(--dito-color-signal-red); }
/* After a choice the same cards shrink to their tops: name (and Pro's tag) over the price. The full-card lines fold to
   nothing and fade; the cards keep their colors, selected ring and radios. */
.member-stage { interpolate-size: allow-keywords; }
.member-stage[data-state="selected"] .member-plan { padding-block: 20px; }
.member-stage[data-state="selected"] .member-plan-price { margin-top: 14px; }
.member-stage[data-state="selected"] .member-plan :is(.member-plan-audience, .member-plan-billed, .member-plan-equivalent, .member-plan-saving, .member-plan-allowance, .member-plan-mark) {
  height: 0; min-height: 0; margin-block: 0; padding-block: 0; border-width: 0; opacity: 0; overflow: hidden; }
/* Desktop compact cards take over the folded select mark's job with the phone rows' radio: a ring on each card, filled
   with a check on the chosen one, beside the price. Decoration only; the native radio remains the truth. */
@media(min-width:761px) {
  .member-plan::before, .member-plan::after { content: ''; position: absolute; opacity: 0; pointer-events: none; }
  .member-plan::before { right: 24px; bottom: 34px; box-sizing: border-box; width: 26px; height: 26px; border: 2px solid currentColor; border-radius: 50%; }
  .member-plan.is-selected::before { background: currentColor; }
  .member-plan.is-selected::after { right: 31px; bottom: 45px; width: 10px; height: 5px; border: solid var(--dito-color-surface-paper); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
  .member-plan[data-plan="pro"].is-selected::after { border-color: var(--dito-color-signal-red); }
  .member-stage[data-state="selected"] .member-plan::before, .member-stage[data-state="selected"] .member-plan.is-selected::after { opacity: 1; }
  /* The price keeps clear of the marker; on a narrow card USD wraps under the amount rather than under the marker. */
  .member-stage[data-state="selected"] .member-plan-price { padding-right: 40px; }
}
.member-review { margin-top: 24px; padding: 30px 40px 36px; border-radius: 2px; background: var(--dito-color-white); color: var(--dito-color-ink); }
/* The card above names the plan and price, so the summary opens with only its quiet Change plan row. */
.member-review-head { display: flex; justify-content: flex-end; margin-top: -10px; }
.customer-main button.member-review-change { min-height: 44px; padding: 8px 0; border: 0; background: none; color: var(--dito-color-ink); font: 400 18px/1.4 var(--dito-font-body); }
/* What the plan includes reads as one feature checklist sized for reading without squinting: one column, one generous
   rhythm, an Ink check on every row aligned to its first line. Weight, not paleness, sets the hierarchy: the
   allowance lead is bold, and every detail stays Ink. */
.member-features { display: grid; margin: 0; padding: 0; list-style: none; }
.member-features li { position: relative; display: grid; gap: 4px; padding: 18px 0 18px 44px; border-bottom: 1px solid var(--dito-color-border); font: 400 20px/1.55 var(--dito-font-body); color: var(--dito-color-ink); }
.member-features li:first-child { padding-top: 6px; }
/* Each check centers on the row's first 31px line. */
.member-features li::before { content: ''; position: absolute; left: 0; top: 20px; box-sizing: border-box; width: 26px; height: 26px; border-radius: 50%; background: var(--dito-color-ink); }
.member-features li::after { content: ''; position: absolute; left: 7px; top: 28px; width: 10px; height: 5px; border: solid var(--dito-color-white); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.member-features li:first-child::before { top: 8px; }
.member-features li:first-child::after { top: 16px; }
.member-features strong { font-weight: 700; }
.member-features strong + span { font-size: 18px; line-height: 1.55; }
/* The renewal amount and the policies sit just above the action, at reading size in Ink. */
.member-renewal { margin: 24px 0 0; font-size: 18px; line-height: 1.55; color: var(--dito-color-ink); }
.member-review .policy-links { display: flex; flex-wrap: wrap; gap: 0 24px; font-size: 18px; }
.member-review .policy-links a { min-height: 44px; display: inline-flex; align-items: center; }
#member-account .member-review #member-status { margin: 16px 0 0; font-size: 18px; line-height: 1.5; }
/* The one action spans the summary; its amount stays on one line and on phones takes its own line. */
.member-review > :is(.primary, button) { display: flex; flex-wrap: wrap; justify-content: center; column-gap: .35em; width: 100%; margin-top: 20px; white-space: normal; text-align: center; scroll-margin: 20px; font-size: 20px; line-height: 1.3; }
.member-plan { scroll-margin: 20px; }
.member-review > .primary > span { margin-left: 0; }
.member-action-price { white-space: nowrap; }
.account-field { display: grid; gap: 8px; font-size: 14px; font-weight: 600; margin: 16px 0; }
.team-controls input { width: 100%; min-width: 0; min-height: var(--dito-touch-target); padding: 10px 12px; border: 1px solid var(--dito-color-border); border-radius: var(--dito-control-radius); }
.account-section summary { cursor: pointer; padding: 12px 0; min-height: 44px; font-weight: 600; }
.account-section:is(details):not([open]), .account-section:has(> details:not([open])) { padding: 8px 0; margin-top: 16px; }
.team-join { max-width: 520px; }
.team-member { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--dito-color-border); }
.team-member span { overflow-wrap: anywhere; }
.customer-main .team-member button { border: 0; background: transparent; font-size: 14px; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }
.team-roster { margin-bottom: 16px; }
.team-invitation:not(:empty) { margin-top: 20px; padding: 16px; background: var(--dito-color-surface-paper); }
@media(max-width:760px) { .account-heading { padding: 28px 0 20px; align-items: start; flex-direction: column; gap: 12px; } .account-summary, .account-body { padding: 22px; } .account-summary h2 { font-size: 28px; } .account-status { right: 22px; top: 18px; } .account-location { border: 0; padding: 0; } .account-allowance { grid-template-columns: 1fr; gap: 20px; } .account-renewal { border-left: 0; border-top: 1px solid var(--dito-color-border); padding: 16px 0 0; } .member-stage { padding: 28px 0 32px; } .member-stage h2 { font-size: 26px; } .member-cadence-wrap { width: 100%; justify-items: stretch; } .member-cadence { display: flex; } .member-cadence label { flex: 1; min-width: 0; padding: 10px 8px; } .member-cadence-note { text-wrap: balance; }
  .member-review { margin-top: 18px; padding: 20px 18px 18px; } .member-review-head { margin-top: -8px; }
  .member-features li { padding: 16px 0 16px 38px; overflow-wrap: break-word; } .member-features li::before { top: 19px; width: 24px; height: 24px; } .member-features li::after { left: 7px; top: 26px; width: 9px; }
  .member-features li:first-child::before { top: 9px; } .member-features li:first-child::after { top: 16px; } .member-renewal { margin-top: 20px; }
  .member-review > :is(.primary, button) { flex-direction: column; align-items: center; min-height: 0; padding: 14px 16px; font-size: 18px; }
  .member-review > .primary > .member-action-separator { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .member-review > .primary > .member-action-price { font-size: 18px; } .account-billing { display: block; } .account-billing > p { margin-bottom: 16px; } .account-options { margin-left: 0; } .member-actions > a.primary { width: 100%; } }
/* Phones: each plan is one compact radio row (name, full price and billing period, allowance, and on annual the
   saving and approximate monthly amount) so the review and its action sit just below the choice. The row draws its
   radio; the selected row adds a check and the word Selected. Same native radios and order; only decoration steps back. */
@media(max-width:760px) {
  .member-plans { grid-template-columns: 1fr; gap: 12px; margin-top: 18px; }
  /* The saving takes its own full-width row below allowance and billing, so it reads on one line at 390. */
  .member-plan { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 14px 16px;
    grid-template-areas: "radio head price" "radio allowance billed" "radio allowance equivalent" "radio saving saving" "radio mark mark"; }
  .member-plan::before, .member-plan.is-selected::after { content: ''; grid-area: radio; align-self: start; justify-self: center; }
  .member-plan::before { width: 22px; height: 22px; margin-top: 3px; border: 2px solid currentColor; border-radius: 50%; }
  .member-plan.is-selected::before { background: currentColor; }
  .member-plan.is-selected::after { width: 9px; height: 5px; margin-top: 10px; border: solid var(--dito-color-surface-paper); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
  .member-plan[data-plan="pro"].is-selected::after { border-color: var(--dito-color-signal-red); }
  .member-plan.is-selected { box-shadow: 0 0 0 2px var(--dito-color-ink), 0 0 0 5px var(--dito-color-white); }
  .member-plan:has(:focus-visible) { outline-offset: 7px; }
  .member-plan-head { grid-area: head; align-items: center; justify-content: start; flex-wrap: wrap; gap: 4px 10px; }
  .member-plan h3 { font-size: 21px; }
  .member-plan-tag { padding: 3px 6px; font-size: 12px; transform: none; }
  .member-plan-audience { display: none; }
  .member-plan-price { grid-area: price; justify-self: end; font-size: 28px; letter-spacing: -.04em; white-space: nowrap; }
  .member-plan-currency { margin-left: 4px; font-size: 18px; }
  .member-plan-billed { grid-area: billed; justify-self: end; max-width: 9em; margin: 0; font-size: 18px; line-height: 1.35; text-align: right; text-wrap: balance; }
  .member-plan-equivalent { grid-area: equivalent; justify-self: end; align-self: start; margin: 6px 0 0; font-size: 18px; line-height: 1.35; text-align: right; }
  .member-plan-allowance { grid-area: allowance; align-self: start; display: block; margin: 0; padding: 0; border: 0; font-size: 18px; line-height: 1.35; }
  .member-plan-allowance strong { font: 700 18px/1.35 var(--dito-font-body); letter-spacing: 0; }
  .member-plan-allowance strong::after { content: ' '; }
  .member-plan-saving { grid-area: saving; justify-self: start; max-width: 100%; margin: 10px 0 0; padding: 4px 8px; border-left-width: 2px; font-size: 18px; }
  .member-plan-mark { display: none; }
  .member-plan.is-selected .member-plan-mark { grid-area: mark; display: inline-flex; justify-self: start; min-height: 0; margin: 8px 0 0; padding: 3px 8px; border: 2px solid currentColor; font-size: 16px; }
  .member-plan.is-selected .member-plan-mark::before { display: none; }
  /* Compact phones: each card is one row of its radio, name and price. */
  .member-stage[data-state="selected"] .member-plan { row-gap: 0; padding-block: 12px; }
  .member-stage[data-state="selected"] .member-plan-price { margin-top: 0; }
}
@media(max-width:360px) {
  .member-plan { grid-template-areas: "radio head price" "radio allowance allowance" "radio billed billed" "radio equivalent equivalent" "radio saving saving" "radio mark mark"; }
  .member-plan :is(.member-plan-billed, .member-plan-equivalent) { justify-self: start; max-width: none; margin: 0; text-align: left; }
  /* USD stays on the amount's line at 18px: tighter row padding and gaps give the name and price the room instead of
     shrinking either. */
  .member-plan { column-gap: 10px; padding-inline: 12px; }
}
@media(max-width:390px) { .account-location { display: none; } .account-summary { align-items: start; } .account-status { padding: 4px 8px; } .account-summary h2 { font-size: 26px; } }

@media(min-width:761px) { .account-overview[data-kind="access"] { display: grid; grid-template-columns: 1fr 2fr; } .account-overview[data-kind="access"] .account-summary { align-items: start; } }
/* Account choreography: the heading stays still; its label and the account panel arrive like the comparison intro. */
@media (prefers-reduced-motion: no-preference) {
  .account-heading .account-label { animation: dito-settle-in var(--motion-arrive) var(--dito-motion-settle-easing) backwards; }
  .account-overview { animation: dito-document-arrive var(--dito-motion-document-arrive) var(--dito-motion-settle-easing) var(--motion-step) backwards; }
  /* Card fold: over the brand's plan duration each card's full-card lines close and fade while its name and price stay
     put; the gentler control easing keeps the tallest card from snapping, and reversing midway eases back from where
     it is. The summary below rides the cards up; its changed values settle in place. */
  .member-plan { transition: box-shadow var(--dito-motion-control) var(--dito-motion-settle-easing), transform var(--dito-motion-control) var(--dito-motion-settle-easing),
    padding var(--dito-motion-plan) var(--dito-motion-control-easing); }
  .member-plan :is(.member-plan-audience, .member-plan-price, .member-plan-billed, .member-plan-equivalent, .member-plan-saving, .member-plan-allowance, .member-plan-mark) {
    transition: height var(--dito-motion-plan) var(--dito-motion-control-easing), margin var(--dito-motion-plan) var(--dito-motion-control-easing),
      padding var(--dito-motion-plan) var(--dito-motion-control-easing), border-width var(--dito-motion-plan) var(--dito-motion-control-easing), opacity var(--dito-motion-plan) var(--dito-motion-control-easing); }
  /* The desktop compact marker fades in as the lines fold away. */
  @media(min-width:761px) { .member-plan::before, .member-plan::after { transition: opacity var(--dito-motion-plan) var(--dito-motion-control-easing); } }
}
#member-account:focus { outline: none; }