/* Website top navigation; shared desktop materials do not dictate its layout. */
body.desktop-web {
  font-size: var(--ds-text-body);
  line-height: 1.5;
  letter-spacing: -.012em;
  -webkit-font-smoothing: antialiased;
}
/* body::before is the design system's ambient backdrop (site-system.css). It
   used to be switched off here, back when the page had nothing behind it worth
   blurring; the header's glass is made against it now. */
.desktop-web h1, .desktop-web h2, .desktop-web h3, .desktop-web h4 {
  font-weight: 600;
  letter-spacing: -.02em;
}
/* Glass tier 1: page chrome. Translucent so the page reads as continuing
   underneath rather than starting below a solid bar, blurred so nav labels stay
   legible over whatever scrolls past, and rimmed on its lower edge so the bar
   has a thickness rather than a border. */
.web-header {
  position: sticky;
  top: 0;
  z-index: 1200;
  background: var(--ds-glass-1-fill, color-mix(in srgb, var(--surface-sidebar) 66%, transparent));
  -webkit-backdrop-filter: var(--ds-glass-1-blur, blur(14px) saturate(150%));
  backdrop-filter: var(--ds-glass-1-blur, blur(14px) saturate(150%));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    inset 0 -1px 0 rgba(255, 255, 255, .05),
    0 1px 0 rgba(0, 0, 0, .55),
    0 10px 30px -18px rgba(0, 0, 0, .8);
}
/* Without a working blur, translucency is just low contrast: go back to solid. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .web-header { background: var(--surface-sidebar); }
}
@media (prefers-reduced-transparency: reduce) {
  .web-header { background: var(--surface-sidebar); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/*
 * Three columns rather than a flex row. The nav used to centre itself with
 * margin: 0 auto, which centres it in the space *left over* by the brand and
 * the account control — and those two are different widths, so the nav sat
 * measurably off-centre. Equal 1fr flanks put it in the middle of the header
 * itself, whatever the brand or the signed-in name happens to be.
 */
.web-header-inner { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; min-height: 76px; max-width: 1360px; margin: 0 auto; padding: 12px 24px; }
.web-brand { display: flex; flex: none; align-items: center; gap: 10px; min-height: 44px; color: var(--text); text-decoration: none; white-space: nowrap; }
.web-brand img { width: 40px; height: 40px; object-fit: contain; }
.web-brand span { font-size: var(--ds-text-body); font-weight: 500; }
.web-navigation { margin: 0; }
.web-navigation ul { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.web-nav-item {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 8px; white-space: nowrap;
  border: 1px solid transparent; border-radius: 8px;
  color: var(--text-muted); font-size: var(--ds-text-small); font-weight: 500; text-decoration: none;
  transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}
.web-nav-item:hover { background: var(--surface-hover); border-color: var(--line); color: var(--text); }
/* The accent marks where you are. It is the only thing in the header that is
   not monochrome, which is what makes it readable as position rather than as
   decoration. */
.web-nav-item[aria-current="page"] { background: var(--ds-accent-soft); border-color: var(--ds-accent-line); color: var(--ds-accent); }
/* max-content, not a fixed 188px: "Continue with Discord" does not fit 188px at
   13.5px/600 and was wrapping onto two lines in the header. The cap keeps a long
   signed-in username from stretching the control across the header instead. */
.web-account { flex: none; width: max-content; max-width: 260px; margin-left: auto; }
.web-account .account-control { display: block; width: 100%; }
/* 44px, like everything else standing in this row.
 *
 * It was 46. The brand, all four nav items, the mobile nav toggle and the
 * signed-out `.account-login` that occupies this exact slot are every one of
 * them 44, so the signed-in control sat 1px proud of its neighbours at the top
 * AND at the bottom, and the header measured 2px taller signed in than signed
 * out. Its tallest content is the 30px avatar and the two-line name block
 * (18.2 + 1 + 15.4 = 34.6px), so 44 is not tight: it leaves 4.7px either side.
 * DESIGN §6 geometry, and the one height this row is allowed to be. */
.desktop-web .web-account .account-trigger {
  display: flex; justify-content: flex-start; gap: var(--ds-2); width: 100%; min-height: 44px;
  padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--ds-r-sm, 8px);
  background: rgba(255, 255, 255, .045); color: var(--text); box-shadow: none;
  text-align: left; font-size: var(--ds-text-small); font-weight: 500;
}
.web-account .account-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.web-account .account-trigger img { width: 30px; height: 30px; flex: none; border-radius: 50%; }
.desktop-web .web-account .account-menu { position: absolute; top: calc(100% + 8px); bottom: auto; right: 0; left: auto; max-height: min(500px,calc(100dvh - 96px)); overflow-y: auto; }
/* Not the Discord brand button.
   This used to be a glowing #5865f2 pill — accurate to Discord's own button
   spec, but next to the rest of this header it read as an embedded widget
   rather than a control this site drew itself. It is now simply the site's
   primary button: signing in is the one thing a signed-out visitor can do from
   the header, and the accent is what a primary action looks like here. Solid
   fill, dark ink, no gloss — it never depended on whatever art scrolls under
   the glass, only its colour did. */
.desktop-web .account-login {
  width: 100%; justify-content: center; min-height: 44px; padding: 10px 16px; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--ds-r-sm, 8px);
  background: var(--ds-accent); color: var(--ds-accent-ink); font-size: var(--ds-text-small); font-weight: 650;
  box-shadow: none;
}
.desktop-web .account-login:hover {
  background: var(--ds-accent-hover);
  color: var(--ds-accent-ink);
}
.desktop-web .account-login:focus-visible { outline-color: #fff; }
.web-nav-toggle { display: none; }
/*
 * The five shell pages draw their whole body from interactive.js, so the footer
 * sits directly under a one-line "Loading…" state and is then shoved down by
 * however tall the mounted page turns out to be. Measured 0.077 CLS on
 * /transcript, all of it that one move.
 *
 * body.desktop-web already declares min-height:100dvh (site-system.css); this
 * finishes the thought, so the footer closes the viewport from the first frame
 * and the region above it grows into space that was already reserved. Scoped by
 * :has() because the content pages fill the page themselves and do not need a
 * flex context imposed on their sections.
 */
body.desktop-web:has(> .site-page-shell > #interactivePage) { display: flex; flex-direction: column; }
body.desktop-web:has(> .site-page-shell > #interactivePage) > .site-page-shell { flex: 1 0 auto; }
.web-legal { padding: 24px; border-top: 1px solid var(--line); }
.web-legal nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; }
.web-legal a { color: var(--text-muted); font-size: var(--ds-text-tag); }
.desktop-web .site-page-shell { width: 100%; max-width: 1060px; margin: 0 auto; padding: 32px 40px 48px; }
.desktop-web .dashboard-heading { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 20px; margin: 0 0 24px; }
/* A plain hairline, not an accent-tinted one. DESIGN.md §2 spends the accent on
   primary actions, links, focus and the current nav item and nothing else, and
   tinting this rule meant the account page (which overrode it back to --line)
   and the affiliate, code and transcript dashboards drew the same divider two
   different colours. */
.desktop-web .dashboard-heading::after { content: ''; position: absolute; inset: auto 0 0; height: 1px; background: var(--line); }
/* The three customer dashboards open exactly like every other page: the h1 step
   and the lede step, stated once here rather than as a 21px/13px default plus a
   per-dashboard override in two other sheets. */
.desktop-web .dashboard-heading h1 {
  margin: 0;
  font-size: var(--ds-text-h1);
  line-height: 1.1;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.desktop-web .dashboard-heading p {
  margin: var(--ds-3) 0 0;
  max-width: var(--ds-lede-measure);
  color: var(--text-muted);
  font-size: var(--ds-text-lede);
  line-height: 1.65;
  text-wrap: pretty;
}
/* Panels and dialogs are no longer painted here. They are two different
   materials now — a panel is extruded out of the page, a dialog floats over it
   as glass — and both are defined once in site-system.css. Forcing one card
   recipe onto both from the shell is what made a modal look like a tile. */
.desktop-web .dashboard-panel { padding: 24px; }
.desktop-web .account-page { display: block; }
.desktop-web .account-page .dashboard-panel { margin: 0; }
.account-panels { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; gap: 20px; }
.account-panels > div { min-width: 0; }
.account-return { margin-top: 24px; }
.account-return a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-muted); font-size: var(--ds-text-small); }
.account-return a:hover { color: var(--text); }
/* Buttons and fields are defined once, in site-system.css. The pill-shaped,
   inset-lit block that used to sit here was the neumorphic button the brief
   retires; fields keep the recess, buttons do not. */

/*
 * Contact fields are the system field, not a variant.
 *
 * They shipped underline-only, transparent, !important, with a white
 * --focus-ring at 3px offset: one form on the site that looked and focused
 * unlike every other field on it, including the booking and account dialogs two
 * clicks away. They take the recessed well from site-system.css §7 and the one
 * accent ring from §12 now, and the boundary that identifies the control is the
 * recess rather than a border — so the 1.4.11 problem the underline was written
 * to solve (a --line-strong rim at 1.37:1 on the card) does not come back with
 * it. The two values left here are the two that are this form's own: 44px is
 * the touch target, and 16px is the smallest size iOS renders without zooming
 * the page.
 */
.desktop-web .contact-form-box #formContent :is(input,textarea,select) {
  min-height: 44px; font-size: 16px;
}
.desktop-web .contact-form-box textarea { resize: vertical; min-height: 140px; }
.desktop-web :is(a,button,summary,[tabindex]):focus-visible { outline: 2px solid var(--ds-focus, var(--focus-ring)); outline-offset: 2px; }
.desktop-web #app { min-width: 0; }
/* Hero sizing is the type scale's job now (site-system.css: .hero-title is the
   display step, .page-title the h1 step), and hero padding belongs to the page
   that owns the hero. The !important overrides that used to sit here meant no
   page sheet could ever adjust its own hero without escalating. */
.desktop-web .page-hero { padding: var(--ds-7, 48px) var(--ds-gutter, 40px) var(--ds-5, 24px); text-align: left; }
.desktop-web .page-hero-inner { margin: 0 auto; }
.desktop-web .home-hero { padding: var(--ds-7, 48px) var(--ds-gutter, 40px); }
.desktop-web .hero-full-content { max-width: var(--ds-container, 1060px); }
.desktop-web .content-wrap, .desktop-web .services-container { max-width: var(--ds-container, 1060px); }
.desktop-web .checkout { padding-top: 32px; }
.desktop-web .transcript-page { padding-top: 32px; }
/* The modal backdrop is part of the dialog material (site-system.css): a dim
   plus a light blur, so the page behind a dialog reads as out of focus rather
   than merely darker. */
.desktop-web .site-modal-close.site-modal-close { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
.desktop-web .skip-link { z-index: 22000; }
.desktop-web [hidden] { display: none !important; }
.desktop-web { scrollbar-color: var(--line-strong) var(--surface-base); }
.desktop-web ::-webkit-scrollbar-thumb { background: var(--line-strong); border: 2px solid var(--surface-base); border-radius: 999px; }
@media (max-width: 1100px) { .web-brand span { display: none; } }
@media (min-width: 801px) and (max-width: 900px) { .web-header-inner { gap: 12px; padding-inline: 16px; } }
@media (max-width: 800px) {
  .account-panels { grid-template-columns: minmax(0,1fr); }
  /* Back to a flex row: the toggle becomes visible below 800px and would
     otherwise be a fourth item wrapping onto a second grid row. */
  .web-header-inner { display: flex; min-height: 72px; gap: 10px; padding: 10px 16px; }
  .web-brand { order: 0; }
  .web-account { order: 1; width: min(188px,calc(100vw - 132px)); }
  .web-nav-toggle { order: 2; display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: var(--ds-r-sm, 8px); background: rgba(255,255,255,.045); color: var(--text); cursor: pointer; }
  .web-nav-toggle:hover { border-color: var(--text-faint); background: rgba(255,255,255,.095); }
  .web-nav-toggle { font-size: 18px; }
  /*
   * Solid, not glass — and this is the nesting ban (DESIGN §1) in practice.
   *
   * The panel is a DOM descendant of `.web-header`, which carries its own
   * `backdrop-filter`. That makes the header a backdrop root, so everything
   * inside it samples the header's already-composited output instead of the
   * page. The panel's own blur therefore had nothing to blur: on a real phone
   * it rendered as a 76%-opaque fill with the page legible straight through
   * the nav labels. The captures that showed it "working" were headless
   * Chromium's reduced-transparency fallback, which is this same solid fill.
   *
   * `top: 100%` keeps the two regions from overlapping; it does not undo the
   * containment. So the panel takes the surface the fallback already used.
   */
  .web-navigation { position: absolute; top: 100%; left: 0; right: 0; padding: 12px 16px; background: var(--surface-sidebar); max-height: calc(100dvh - 88px); overflow-y: auto; box-shadow: var(--ds-glass-edge), 0 18px 40px -12px rgba(0,0,0,.72); }
  .web-navigation ul { align-items: stretch; flex-direction: column; }
  .web-nav-item { justify-content: flex-start; }
  .web-header[data-nav-ready] .web-navigation:not([data-open]) { visibility: hidden; }
  .desktop-web .web-account .account-menu { right: -54px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 144px); }
  .desktop-web .web-account .account-login { font-size: var(--ds-text-tag); padding-inline: 6px; white-space: nowrap; }
  .desktop-web .site-page-shell { padding: 24px var(--ds-gutter) 40px; }
  /* var(--ds-gutter), not a flat 20px: the sections below the hero use the
     gutter at every width, so a hardcoded 20px here put the h1 twelve pixels
     left of every h2 under it between 540 and 800. */
  .desktop-web .page-hero { padding: 32px var(--ds-gutter) 24px; }
  .desktop-web .home-hero { padding: 32px var(--ds-gutter); }
  /* The diagonal scrim in effects.css is tuned for the wide hero, where the
     text column sits at the left and the wave's bright band clears on the
     right. Under 800px the hero's own padding just shrank (above) and the
     text column runs the full width, so the wave's centred band lands behind
     the summary paragraph instead of beside it. A flat, near-opaque wash
     here trades the lighting effect for legibility exactly where the wave is
     proportionally largest relative to the viewport; the artwork still shows
     faintly at the very top and bottom edges. */
  .hero-scrim { background: linear-gradient(rgba(10,10,15,.94), rgba(10,10,15,.94)); }
  .hero-wave-frame { opacity: .5; }
  .desktop-web .dashboard-heading { flex-wrap: wrap; gap: 12px; }
  .desktop-web .dashboard-panel { padding: 20px; }
  .desktop-web .checkout { padding-top: 24px; }
}
@media (max-width: 420px) {
  .desktop-web .site-page-shell { padding-inline: 16px; }
  .desktop-web .dashboard-panel { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .web-nav-item { transition: none; }
}
/* Account billing follows the application's aligned settings rows. */
.billing-details { margin: 22px 0; }
.billing-details > div { display: grid; grid-template-columns: minmax(130px, .7fr) 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.billing-details dt { color: var(--text-muted); }
.billing-details dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.billing-notice { color: var(--text-muted); line-height: 1.6; }
.billing-notice:empty { display: none; }
#embeddedCheckout { min-height: 350px; margin-top: 24px; }
@media (max-width: 480px) { .billing-details > div { grid-template-columns: 1fr; gap: 5px; } }

/*
 * The account control is an avatar and a chevron on a phone.
 *
 * At 390 the header holds a 40px brand, this control and a 44px nav toggle in
 * about 350px of usable width, and the control is the only elastic one. Its
 * 188px cap meant a display name of any length ran into an ellipsis after four
 * or five characters, so the name was not readable and the space it took was
 * not free — the brand word was being clipped to pay for it. The avatar
 * identifies the account and the chevron says it opens; the name is one tap
 * away, in the menu's summary, where it now appears as the handle.
 *
 * Four classes on the text rule, not three: `.desktop-web .account-trigger
 * .account-trigger-text` further down this file sets `display: flex`, and at
 * equal specificity the later rule wins. The extra class is what makes this
 * an override rather than a declaration that quietly loses.
 */
@media (max-width: 480px) {
  .desktop-web .web-account { width: auto; }
  .desktop-web .web-account .account-trigger { justify-content: center; gap: 4px; padding-inline: 8px; }
  .desktop-web .web-account .account-trigger .account-trigger-text { display: none; }
  .desktop-web .web-account .account-caret { margin-left: 0; }
}

/* Glass tier 2: the application's MenuPopover, adapted to the web top header.
   Page panels stay extruded and matte; only the things that pop open are glass. */
.desktop-web .web-account .account-trigger {
  transition: border-color var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out);
}
.desktop-web .web-account .account-trigger:hover,
.desktop-web .web-account .account-trigger[aria-expanded="true"] {
  border-color: var(--text-faint);
  background: rgba(255, 255, 255, .095);
}
.desktop-web .account-trigger .account-trigger-text { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 1px; }
.desktop-web .account-trigger-text > span { display: block; }
.desktop-web .account-trigger-text small { color: var(--text-faint); font-size: var(--ds-text-micro); font-weight: 400; }
/* The caret is a generated glyph now, so the size it used to carry as SVG
   attributes lives here. 15px exactly, not a round 16: the header is measured
   to a 44px control height and a shared baseline, and a rounder number moves
   it. .ui-icon is 1em, so font-size is the size. */
.desktop-web .account-caret {
  display: grid;
  flex: none;
  place-items: center;
  margin-left: auto;
  color: var(--text-faint);
  font-size: 15px;
}
.desktop-web .account-menu {
  z-index: var(--z-flyout);
  width: 18rem;
  max-width: calc(100vw - 32px);
  padding: 5px;
  border: 1px solid var(--line-raised);
  border-radius: var(--ds-r-md, 12px);
  /* Solid, for the same reason the mobile nav panel above is (DESIGN §1): the
     menu is a descendant of the blurred `.web-header`, so its own
     backdrop-filter sampled the header's composited output rather than the
     page and produced a flat wash with the page showing through the items.
     The rim and the depth stay; only the material it is made of changes. */
  background: var(--surface-floating);
  box-shadow: var(--ds-glass-edge, var(--glass-edge)), 0 18px 40px rgba(0,0,0,.62), 0 3px 8px rgba(0,0,0,.45);
  transform-origin: top right;
  animation: account-menu-opacity 110ms var(--ease-out), account-menu-arrive 150ms var(--ease-out);
}
.desktop-web .account-menu[data-closing] {
  pointer-events: none;
  animation: account-menu-opacity 90ms ease-in reverse both, account-menu-arrive 90ms ease-in reverse both;
}
.desktop-web .account-summary { gap: var(--ds-2); padding: 11px 10px 10px; border: 0; align-items: center; }
.desktop-web .account-summary img { width: 30px; height: 30px; flex: none; border-radius: 50%; }
.desktop-web .account-summary strong { color: var(--text); font-size: var(--ds-text-small); font-weight: 500; white-space: nowrap; }
.desktop-web .account-summary small { color: var(--text-faint); font-size: var(--ds-text-micro); }
.desktop-web .account-menu-rule { height: 1px; margin: 6px 4px; border: none; background: rgba(255,255,255,.07); }
/* 6px, not 7: a menu item is `--ds-r-xs` (DESIGN §5), and 7 was the one radius
 * on the site that is not a step of the scale. 8px gap, like every other
 * icon-then-label on the site (§13). */
.desktop-web .account-menu > :is(a,button) {
  display: flex; align-items: center; gap: var(--ds-2); min-height: 36px; padding: 8px 10px;
  border: 0; border-radius: var(--ds-r-xs, 6px); background: transparent; color: var(--text-muted);
  font-size: var(--ds-text-small); font-weight: 400; line-height: 1.4;
  transition: background var(--motion-press) var(--ease-out), color var(--motion-press) var(--ease-out);
}
/* No width of its own. `.ui-icon` is 1em square, and forcing 15px onto a 13px
 * box made it the one non-square icon on the site: the 24x24 viewBox fits to
 * the shorter side, so the glyph drew 13px wide and centred itself with a 1px
 * sliver either side, which put the ink off the column its box claimed and
 * made the real gap 12px where the rule said 11. */
.desktop-web .account-menu > :is(a,button) .ui-icon { flex: none; opacity: .85; }
.desktop-web .account-menu > :is(a,button):is(:hover,:focus-visible) { background: var(--surface-hover) !important; color: var(--text); }
/* The site ring, not a white one: this was the last control on the site still
   focusing in --focus-ring. Only the offset is the exception, and it is one of
   geometry — the item runs to the edge of a 5px-padded panel, so a ring offset
   outward is drawn under the panel's own border. */
.desktop-web .account-menu > :is(a,button):focus-visible { outline: 2px solid var(--ds-focus); outline-offset: -2px; }
.desktop-web .account-menu > [data-logout]:is(:hover,:focus-visible) { background: var(--danger-soft) !important; color: var(--danger); }
.desktop-web .account-menu > button:disabled { opacity: .4; cursor: wait; }
@keyframes account-menu-opacity { from { opacity: 0; } to { opacity: 1; } }
@keyframes account-menu-arrive { from { transform: scale(.96) translateY(-4px); } to { transform: none; } }
/* The `@supports not (backdrop-filter)` and `prefers-reduced-transparency`
   overrides that used to sit here are gone with the blur they answered: the
   account menu and the mobile nav panel are now the same solid surfaces in
   every mode, so there is nothing left to fall back to. */
@media (prefers-reduced-motion: reduce) {
  .desktop-web .account-menu, .desktop-web .account-menu[data-closing] { animation: none; }
}
@media (max-width: 800px), (pointer: coarse) {
  .desktop-web .account-menu > :is(a,button) { min-height: 44px; }
}

/* A quiet settings hierarchy, not a new marketing layout. */
/* 24 + 24 = the 48px every section head on the site stands clear of its
   content. It was 24 + 28, and 28 is not a step of the 4px scale (DESIGN §5). */
.desktop-web .account-page .dashboard-heading { align-items: center; padding-bottom: var(--ds-5); margin-bottom: var(--ds-5); }
/* The card-title step, not a page-local one. This said 16px/500, which is the
   same role (`.panel-heading h2`) that the admin console, the transcript and
   the affiliate dashboard all render at the h3 step, so one heading looked
   like two different things depending on which dashboard you were standing
   on. Same fix as the h1/lede above: one step, stated once. */
.desktop-web .account-page .panel-heading h2 { margin: 0; font-size: var(--ds-text-h3); font-weight: 600; }
.desktop-web .account-page .panel-headline { margin: 0 0 8px; font-size: var(--ds-text-h2); line-height: 1.3; color: var(--text); text-wrap: balance; }
.desktop-web .account-page .device-help { max-width: 65ch; line-height: 1.65; }
/* The admin console's `.row-actions` is `--ds-2` between buttons; this is the
   same row of the same buttons and said 10px. The 16px margin above it plus
   `--ds-2` here is the 24px a card head stands clear of its body, where it
   was 16 + 6 = 22. Both off the scale, both now on it (DESIGN §5). */
.desktop-web .account-page .row-actions { flex-wrap: wrap; gap: var(--ds-2); padding-top: var(--ds-2); }
.desktop-web .account-page .status-pill { flex: none; align-self: flex-start; }
.account-billing { scroll-margin-top: 96px; }
.home-faq { scroll-margin-top: 96px; }
.desktop-web .service-card-new .buy-button { border-radius: 8px !important; }