/* Billing design system.
   One stylesheet for both documents: the public guide (/) and the management
   console (/console). Light only — the console is a working surface and a
   second palette is a second thing to keep honest for no reader who asked. */
:root {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC",
    "Source Han Sans SC", sans-serif;
  font-synthesis: none;
  color-scheme: light;

  /* Brand */
  --brand: #0f6b4f;
  --brand-hover: #0c5b43;
  --brand-active: #0a4d39;
  --brand-text: #0c5b43;
  --brand-soft: #edf6f1;
  --brand-line: #c6e1d4;

  /* Surfaces */
  --page: #f3f4f2;
  --surface: #ffffff;
  --sunken: #f6f7f5;
  --code-bg: #f4f5f3;
  --scrim: rgba(21, 24, 22, 0.45);

  /* Lines */
  --line: #e2e4e0;
  --line-soft: #eceeea;
  --line-strong: #cdd1cb;
  /* A control's only edge must reach 3:1 against the surface. */
  --line-control: #7d847e;

  /* Text */
  --text: #151816;
  --body: #2e3330;
  --muted: #59605b;
  --faint: #646b66;
  --on-brand: #ffffff;
  --brand-disabled: #a9cbbb;

  /* Inverse: the dark agent-brief block on the guide. */
  --inverse: #151816;
  --inverse-deep: #0d0f0e;
  --inverse-line: #272c29;
  --inverse-text: #dfe3df;
  --inverse-body: #cdd2cd;
  --inverse-muted: #9aa39c;
  --inverse-accent: #7fd1ac;
  --inverse-accent-soft: #a6e0c4;

  /* Status */
  --success: #09825d;
  --success-bg: #cbf4c9;
  --success-text: #0e6245;
  --warn: #bb5504;
  --warn-bg: #fcedb9;
  --warn-text: #983705;
  --danger: #cd3d64;
  --danger-bg: #fde2dd;
  --danger-text: #a41c4e;
  --info-bg: #e1eef7;
  --info-text: #1f5a85;

  /* Depth is a hairline plus a soft drop, never a hard border. */
  --shadow-xs: 0 0 0 1px rgba(21, 24, 22, 0.08), 0 1px 1px rgba(0, 0, 0, 0.04);
  --shadow-sm:
    0 0 0 1px rgba(21, 24, 22, 0.08), 0 1px 3px rgba(21, 24, 22, 0.08);
  --shadow-md:
    0 0 0 1px rgba(21, 24, 22, 0.06), 0 2px 5px rgba(21, 24, 22, 0.08),
    0 1px 1.5px rgba(0, 0, 0, 0.04);
  --shadow-lg:
    0 0 0 1px rgba(21, 24, 22, 0.05), 0 15px 35px rgba(21, 24, 22, 0.12),
    0 5px 15px rgba(0, 0, 0, 0.08);
  --ring: 0 0 0 4px rgba(15, 107, 79, 0.24);

  --radius-sm: 5px;
  --radius: 8px;
  --radius-lg: 12px;
  --topbar: 56px;
  --sidebar: 232px;

  color: var(--body);
  background: var(--page);
  /* 14px at the browser default, and it follows a reader who sets theirs
     larger. Every other size below is in rem against it. */
  font-size: 87.5%;
  line-height: 1.55;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--brand-text);
  text-decoration: none;
}
a:hover {
  color: var(--brand);
}
h1,
h2,
h3,
h4 {
  color: var(--text);
  margin: 0;
  /* Even lines, and no single CJK character stranded on the last one. */
  text-wrap: balance;
  font-weight: 600;
  letter-spacing: -0.01em;
}
p {
  margin: 0;
}
code,
pre,
.mono {
  font-family:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
code {
  font-size: 0.86em;
  background: var(--code-bg);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--text);
  overflow-wrap: anywhere;
}
pre {
  margin: 0;
  font-size: 0.8571rem;
  line-height: 1.6;
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  overflow-x: auto;
  color: var(--body);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* An outline, not a box-shadow: components set their own shadows and would
   silently erase a shadow ring, and forced-colors mode drops shadows. */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
[hidden] {
  display: none !important;
}
/* Small caps tracking is for Latin; spread over Chinese it reads as single
   characters, and Chinese strokes need at least 12px. */
:lang(zh) :is(.eyebrow, .nav-group > span, th, .entry-number),
:lang(zh) .stacked td::before {
  letter-spacing: 0;
  font-size: max(0.8571rem, 12px);
}
:lang(zh) :is(td small, .badge) {
  font-size: max(0.8571rem, 12px);
}
:is(.section-intro, .lead, .card-head p) {
  text-wrap: pretty;
}
/* A page's one- or two-line introduction wraps into even lines, so a short
   tail such as "修改。" is never left alone on the second. */
.page-sub {
  text-wrap: balance;
}
/* Landing spots that only receive focus from script, after a view changes. */
[tabindex="-1"]:focus {
  outline: none;
}
/* Set by i18n.js only when the reader's locale differs from the one the markup
   is authored in, and cleared as soon as the swap is done (or after two
   seconds, because a blank page is worse than an untranslated one). */
html[data-i18n-cloak] body {
  visibility: hidden;
}
.muted {
  color: var(--muted);
}
.eyebrow {
  display: block;
  font-size: 0.7857rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--surface);
  color: var(--brand-text);
  padding: 10px 16px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.skip-link:focus {
  left: 12px;
  top: 12px;
}

/* ---------------------------------------------------------------- top bar */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  height: var(--topbar);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  background: var(--surface);
  box-shadow: 0 1px 0 var(--line);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 1.0714rem;
  color: var(--text);
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.brand:hover {
  color: var(--text);
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 1.0714rem;
  font-weight: 700;
  line-height: 1;
}
.topbar-divider {
  width: 1px;
  height: 22px;
  background: var(--line);
}
.topbar-spacer {
  flex: 1;
}
.topbar-link {
  color: var(--muted);
  font-size: 0.9286rem;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.topbar-link:hover {
  color: var(--text);
  background: var(--sunken);
}

/* The environment is ambient, so it rides in the bar the way Stripe marks a
   sandbox — not as a strip of prose across the top of the content. */
.env-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 11px;
  border-radius: 100px;
  font-size: 0.8571rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--line-soft);
  color: var(--muted);
}
.env-pill.test {
  background: var(--warn-bg);
  color: var(--warn-text);
}
.env-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.env-pill.live {
  background: var(--success-bg);
  color: var(--success-text);
}

#products-panel {
  display: flex;
  align-items: center;
  min-width: 0;
}
#products-panel select {
  max-width: 260px;
}

/* The account menu is a native disclosure: no outside-click bookkeeping, and
   Escape closes it because the browser already knows how. */
.menu {
  position: relative;
}
.menu > summary {
  list-style: none;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px 5px 5px;
  border-radius: 100px;
  font-size: 0.9286rem;
  font-weight: 500;
  color: var(--body);
}
.menu > summary::-webkit-details-marker {
  display: none;
}
.menu > summary:hover {
  background: var(--sunken);
}
.avatar {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-text);
  font-size: 0.8571rem;
  font-weight: 600;
}
.menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 216px;
  padding: 6px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: 1px;
}
/* The product menu opens under the switcher, at the left of the bar. */
#product-menu .menu-panel {
  left: 0;
  right: auto;
  min-width: 180px;
}
.menu-panel p {
  padding: 8px 10px 9px;
  font-size: 0.8571rem;
  color: var(--muted);
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 5px;
  overflow-wrap: anywhere;
}
.menu-panel a,
.menu-panel button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border: 0;
  background: none;
  border-radius: var(--radius-sm);
  font-size: 0.9286rem;
  font-weight: 500;
  color: var(--body);
  cursor: pointer;
  box-shadow: none;
}
/* A bare select saying "中文" is the same visual object as the product
   switcher beside it, and the two mean very different things. The globe is the
   one signifier for language that needs no reading. */
.topbar-language {
  width: auto;
  height: 30px;
  padding-left: 28px;
  padding-right: 22px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23646b66' stroke-width='1.2'%3E%3Ccircle cx='8' cy='8' r='5.9'/%3E%3Cpath d='M8 2.1c1.7 2 1.7 9.8 0 11.8M8 2.1c-1.7 2-1.7 9.8 0 11.8M2.4 6h11.2M2.4 10h11.2'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23646b66' stroke-width='1.6'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
  background-position:
    left 7px center,
    right 5px center;
  background-size: 15px, 13px;
  font-size: 0.9286rem;
  color: var(--muted);
  border-color: transparent;
  box-shadow: none;
  background-color: transparent;
}
.topbar-language:hover {
  background-color: var(--sunken);
  color: var(--text);
}
.menu-panel a:hover,
.menu-panel button:hover:not(:disabled) {
  background: var(--sunken);
  color: var(--text);
  box-shadow: none;
}

/* --------------------------------------------------------------- side nav */
.shell {
  display: flex;
  padding-top: var(--topbar);
  min-height: 100vh;
}
.sidenav {
  position: fixed;
  top: var(--topbar);
  bottom: 0;
  width: var(--sidebar);
  overflow-y: auto;
  padding: 16px 12px 24px;
  border-right: 1px solid var(--line);
  background: var(--page);
}
.nav-group {
  margin-top: 18px;
}
.nav-group > span {
  display: block;
  padding: 0 10px 6px;
  font-size: 0.7857rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}
.sidenav a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  margin-bottom: 1px;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 500;
  color: var(--body);
}
.sidenav a:hover {
  background: rgba(15, 107, 79, 0.06);
  color: var(--text);
}
.sidenav a.current {
  background: var(--brand-soft);
  color: var(--brand-text);
  font-weight: 600;
}
.sidenav i {
  font-style: normal;
  width: 16px;
  text-align: center;
  font-size: 0.9286rem;
  color: var(--faint);
}
.sidenav a.current i {
  color: var(--brand);
}

/* ----------------------------------------------------------------- layout */
.content {
  flex: 1;
  min-width: 0;
  margin-left: var(--sidebar);
  padding: 28px 32px 72px;
}
.content > section,
.page {
  max-width: 1080px;
  margin: 0 auto;
}
.page-head {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 22px;
}
.page-head > div:first-child {
  flex: 1;
  min-width: 0;
}
.page-head h1 {
  font-size: 1.5714rem;
  line-height: 1.3;
}
.page-head .page-sub {
  margin-top: 5px;
  color: var(--muted);
  font-size: 1rem;
  /* One or two sentences, not a paragraph: wide enough for a CJK sentence
     (ch is half a CJK character) to stay on one line on a desktop. */
  max-width: 52em;
}
.page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Whether payments can move, and how fresh the page is: one quiet line under
   the overview's title. */
.status-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.9286rem;
  color: var(--body);
}
.status-line strong {
  font-weight: 600;
  color: var(--text);
}
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
}
.dot.warn {
  background: var(--warn);
}
.dot.danger {
  background: var(--danger);
}
/* A label, one field and its button on one line: the users page lookup, the
   orders filter and the test-drive user picker. */
.lookup,
.filter,
.test-user {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.lookup,
.test-user {
  padding: 14px 20px;
}
/* The orders filter is a card head, whose own alignment is for a title. */
.card-head.filter {
  align-items: center;
}
.lookup > label,
.filter > label,
.test-user > label {
  flex-shrink: 0;
  color: var(--muted);
}
.lookup > input,
.filter > input {
  flex: 0 1 320px;
  min-width: 0;
}
.test-user > select {
  width: auto;
  min-width: 200px;
}
.filter > select {
  width: auto;
  min-width: 140px;
}
/* A form scrolled into view clears the top bar, and on a phone the menu row
   stuck under it. */
#offer-form,
#plan-form,
#meter-edit {
  scroll-margin-top: calc(var(--topbar) + 64px);
}
.test-user {
  margin-bottom: 20px;
}
.test-user-balance {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--body);
}
.lookup + .empty,
.lookup + .empty + #customer-detail,
.lookup ~ #customer-detail {
  margin-top: 20px;
}
.customer-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 14px;
}
.customer-head h2 {
  font-size: 1.0714rem;
  overflow-wrap: anywhere;
}
.card-head > a {
  flex-shrink: 0;
  font-size: 0.9286rem;
}

/* ---------------------------------------------------------------- overview */
.overview-updated {
  flex-shrink: 0;
  font-size: 0.8571rem;
  padding-top: 8px;
}
/* What needs a person: a warning edge on an otherwise plain card, one line
   per item with its way in at the end. */
.attention {
  margin-bottom: 20px;
  box-shadow:
    inset 3px 0 0 var(--warn),
    var(--shadow-sm);
}
.attention-list {
  list-style: none;
  margin: 0;
  padding: 6px 20px 10px;
}
.attention-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.9286rem;
}
.attention-list li:last-child {
  border-bottom: 0;
}
.attention-list .link-button {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: start;
}
.period-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 28px 0 12px;
}
.page-head + .period-head {
  margin-top: 0;
}
.period-head h2 {
  font-size: 1.0714rem;
}
.period-head .muted {
  font-size: 0.8571rem;
}
.daily-chart svg {
  display: block;
  width: 100%;
  height: 110px;
}
.daily-days {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 0.8571rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.daily-bar {
  fill: var(--brand);
}
.daily-bar:hover {
  fill: var(--brand-hover);
}
.daily-axis {
  stroke: var(--line);
  stroke-width: 1;
}
#product-summary .status-line {
  margin-top: 14px;
}

/* ------------------------------------------------------------------ cards */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card + .card,
.card + .stack-gap,
.stack > * + * {
  margin-top: 20px;
}
.card-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line-soft);
}
.card-head > div:first-child {
  flex: 1;
  min-width: 0;
}
.card-head h2,
.card-head h3 {
  font-size: 1.0714rem;
}
.card-head p {
  margin-top: 3px;
  font-size: 0.9286rem;
  color: var(--muted);
}
.card-body {
  padding: 20px;
}
.card-body > p + p,
.card-body > p + .actions,
.card-body > .actions + p {
  margin-top: 12px;
}
/* A foot that holds only a hidden button (Load more) takes no room. */
.card-foot:has(> [hidden]:only-child) {
  display: none;
}
.card-foot {
  padding: 12px 20px;
  border-top: 1px solid var(--line-soft);
  background: var(--sunken);
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: 0.9286rem;
  color: var(--muted);
}
/* Cards side by side start level: the stacked-card gap is for a column. */
.grid-2 > .card + .card {
  margin-top: 0;
}
/* The test drive's two cards keep their own heights: the short one does not
   stretch into an empty panel beside the top-up page. */
#experience .grid-2 {
  align-items: start;
}
.grid-2 {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
}

/* Numbers are the point of this page, so they get the size and the tabular
   figures, and every label around them stays small. */
.stats {
  display: grid;
  gap: 16px;
  /* Six numbers fit one row at the content width. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.stat {
  padding: 16px 18px 18px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.stat > span {
  display: block;
  font-size: 0.9286rem;
  font-weight: 500;
  color: var(--muted);
}
.stat strong {
  display: block;
  margin: 6px 0 4px;
  font-size: 1.8571rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.stat strong em {
  font-style: normal;
  color: var(--faint);
  font-weight: 400;
  margin: 0 2px;
}
.stat small {
  display: block;
  font-size: 0.8571rem;
  color: var(--faint);
  line-height: 1.5;
}
.stat.accent strong {
  color: var(--brand-text);
}
/* A long amount wraps in its card rather than widening the page. */
.stat {
  min-width: 0;
}
.stat strong {
  overflow-wrap: anywhere;
}
@media (max-width: 620px) {
  /* The headline amount takes the whole row on a phone. */
  #stats-cards .stat.accent {
    grid-column: 1 / -1;
  }
}

/* ---------------------------------------------------------------- buttons */
button,
.button {
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 13px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--body);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.12s ease,
    box-shadow 0.12s ease,
    transform 0.06s ease;
}
button:hover:not(:disabled),
.button:hover {
  background: var(--sunken);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
button:active:not(:disabled) {
  transform: translateY(0.5px);
}
button:disabled {
  color: var(--faint);
  cursor: not-allowed;
  box-shadow: 0 0 0 1px var(--line);
  background: var(--sunken);
}
.primary,
.button.primary {
  background: var(--brand);
  color: var(--on-brand);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.07),
    0 2px 5px rgba(15, 107, 79, 0.28);
}
.primary:hover:not(:disabled),
.button.primary:hover {
  background: var(--brand-hover);
  color: var(--on-brand);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.07),
    0 3px 8px rgba(15, 107, 79, 0.34);
}
.primary:disabled {
  background: var(--brand-disabled);
  color: var(--on-brand);
  box-shadow: none;
}
.danger {
  color: var(--danger-text);
}
.danger:hover:not(:disabled) {
  background: var(--danger-bg);
  color: var(--danger-text);
}
/* The step that actually moves money or ends a sale. */
.primary.danger {
  background: var(--danger);
  color: var(--on-brand);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.07);
}
.primary.danger:hover:not(:disabled) {
  background: var(--danger-text);
  color: var(--on-brand);
}
/* Until a delete is typed out, its button must not look ready. */
.primary.danger:disabled {
  background: var(--sunken);
  color: var(--faint);
  box-shadow: 0 0 0 1px var(--line);
}
.text-button,
.link-button {
  height: auto;
  min-height: 24px;
  padding: 2px 0;
  background: none;
  box-shadow: none;
  color: var(--brand-text);
  font-weight: 500;
}
.text-button:hover:not(:disabled),
.link-button:hover:not(:disabled) {
  background: none;
  box-shadow: none;
  color: var(--brand);
  text-decoration: underline;
}
.text-button:disabled {
  background: none;
  box-shadow: none;
  color: var(--faint);
}
.icon-button {
  width: 32px;
  padding: 0;
  font-size: 1rem;
  color: var(--muted);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ------------------------------------------------------------------ forms */
label {
  display: block;
  font-size: 0.9286rem;
  font-weight: 500;
  color: var(--text);
}
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  font: inherit;
  font-size: 1rem;
  width: 100%;
  height: 32px;
  padding: 0 10px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-control);
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.02);
  transition:
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}
textarea {
  height: auto;
  padding: 10px;
  line-height: 1.6;
  resize: vertical;
}
select {
  appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23646b66' stroke-width='1.6'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px;
  cursor: pointer;
}
select[multiple] {
  height: auto;
  padding: 6px;
  background-image: none;
}
/* As specific as the base field rule above, or it loses to it. */
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  border-color: var(--brand);
  box-shadow: var(--ring);
}
input:not([type="checkbox"]):not([type="radio"])[aria-invalid="true"] {
  border-color: var(--danger);
}
input:disabled,
select:disabled {
  background: var(--sunken);
  color: var(--muted);
  cursor: not-allowed;
}
.field {
  display: grid;
  gap: 5px;
}
.field .hint {
  font-size: 0.8571rem;
  color: var(--muted);
}
.form-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: start;
}
.form-grid > .wide {
  grid-column: 1 / -1;
}
fieldset {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sunken);
}
legend {
  padding: 0 6px;
  font-size: 0.9286rem;
  font-weight: 600;
  color: var(--text);
}
.check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  color: var(--body);
  margin-top: 8px;
}
.check input {
  width: 15px;
  height: 15px;
  accent-color: var(--brand);
  margin: 0;
}
.field-error {
  font-size: 0.9286rem;
  color: var(--danger-text);
}
.field-error:empty,
#login-message:empty,
#copy-status:empty,
#stripe-message:empty,
#auth-status:empty {
  display: none;
}
.hint {
  font-size: 0.9286rem;
  color: var(--muted);
  line-height: 1.6;
}

/* A refusal explains itself where the refused control is, rather than removing
   the control and leaving the reader to guess what this deployment can do. */
.unavailable {
  display: flex;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: var(--warn-bg);
  color: var(--warn-text);
  font-size: 0.9286rem;
  line-height: 1.55;
}
/* Alerts stay mounted and rendered (so a message written into them is
   announced) but take no room while empty. display:none would take them out
   of the accessibility tree, the same as hidden. */
/* Floats under the top bar, so a page that a
   deploy made stale says so wherever it is scrolled. */
#update-banner {
  position: fixed;
  top: calc(var(--topbar) + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  align-items: center;
  max-width: calc(100vw - 32px);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
}
.unavailable:empty {
  padding: 0;
}
.unavailable:empty::before {
  content: none;
}
.unavailable::before {
  content: "!";
  font-weight: 700;
  flex-shrink: 0;
}
.note {
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  font-size: 0.9286rem;
  color: var(--body);
  line-height: 1.65;
}
.warning-note {
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--warn-bg);
  color: var(--warn-text);
  font-size: 0.9286rem;
  line-height: 1.65;
}
.error {
  color: var(--danger-text);
}

/* ----------------------------------------------------------------- tables */
.table-wrap {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9286rem;
}
th {
  padding: 9px 20px;
  text-align: left;
  font-size: 0.8571rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--sunken);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
td {
  padding: 12px 20px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--body);
  vertical-align: top;
}
tbody tr:last-child td {
  border-bottom: 0;
}
tbody tr.row-open:hover {
  background: var(--sunken);
  cursor: pointer;
}
td small {
  display: block;
  margin-top: 3px;
  font-size: 0.8571rem;
  color: var(--faint);
  overflow-wrap: anywhere;
}
.num,
#ledger-table td:nth-child(n + 3),
#ledger-table th:nth-child(n + 3),
:is(#orders-table, #recent-orders-table) :is(td, th):nth-child(2) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cell-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9286rem;
  color: var(--text);
}
.row-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
/* The products table carries seven columns, the last holding four actions
   and the reason any of them is off, so its cells are a little tighter. */
#products th,
#products td {
  padding-left: 14px;
  padding-right: 14px;
}
#products td:nth-child(5),
#products th:nth-child(5) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#products td.product-actions {
  min-width: 16rem;
}
#products .row-actions {
  flex-wrap: wrap;
  justify-content: flex-start;
}
#products .row-actions button {
  height: 28px;
  padding: 0 10px;
  font-size: 0.9286rem;
}
#products .product-why {
  margin-top: 6px;
  color: var(--muted);
}
.chevron {
  color: var(--faint);
  font-size: 1.0714rem;
}
.badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 100px;
  font-size: 0.8571rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--success-bg);
  color: var(--success-text);
}
.badge.pending {
  background: var(--warn-bg);
  color: var(--warn-text);
}
.badge.failed {
  background: var(--danger-bg);
  color: var(--danger-text);
}
.badge.neutral {
  background: var(--line-soft);
  color: var(--muted);
}
.badge.info {
  background: var(--info-bg);
  color: var(--info-text);
}
.empty {
  padding: 48px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 0.9286rem;
}
.empty strong {
  display: block;
  margin-bottom: 4px;
  font-size: 1rem;
  color: var(--text);
}

/* ---------------------------------------------------- toast, drawer, modal */
/* An action reports back where the reader's attention already is. Success
   clears itself; a failure stays, with the raw response one click away. */
.toast-region {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  width: min(420px, calc(100vw - 40px));
}
.toast {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 14px 16px;
  border-left: 3px solid var(--success);
  animation: toast-in 0.18s ease-out;
}
.toast.error {
  border-left-color: var(--danger);
}
.toast.busy {
  border-left-color: var(--brand);
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
.toast-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
#message {
  flex: 1;
  font-size: 0.9286rem;
  color: var(--text);
  line-height: 1.55;
}
#message.error {
  color: var(--danger-text);
}
.toast details {
  margin-top: 10px;
}
.toast summary {
  font-size: 0.8571rem;
  color: var(--muted);
  cursor: pointer;
}
.toast pre {
  margin-top: 8px;
  max-height: 240px;
  overflow: auto;
}

.drawer {
  margin: 0 0 0 auto;
  max-width: 100vw;
  max-height: 100vh;
  height: 100%;
  border-radius: 0;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 51;
  width: min(460px, 100vw);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  animation: drawer-in 0.18s ease-out;
}
@keyframes drawer-in {
  from {
    transform: translateX(16px);
    opacity: 0.6;
  }
}
.drawer-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-soft);
}
.drawer-head h2 {
  flex: 1;
  font-size: 1.0714rem;
}
.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 20px 20px;
}
.drawer-foot {
  padding: 14px 20px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
/* A record reads as label/value pairs, not as a row squeezed into a column. */
.detail {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 10px 16px;
  padding: 14px 0;
  font-size: 0.9286rem;
  border-bottom: 1px solid var(--line-soft);
}
.detail:last-child {
  border-bottom: 0;
}
/* In a card the first line starts at the card's own padding. */
.card-body > div > .detail:first-child,
.card-body > .detail:first-child {
  padding-top: 0;
}
.detail dt {
  color: var(--muted);
}
.detail dd {
  margin: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

dialog {
  border: 0;
  padding: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: min(460px, calc(100vw - 32px));
  color: var(--body);
}
dialog::backdrop {
  background: var(--scrim);
}
dialog form {
  padding: 24px;
}
dialog h2 {
  margin: 6px 0 10px;
  font-size: 1.2857rem;
}
dialog p {
  font-size: 0.9286rem;
  line-height: 1.6;
}
dialog p + p {
  margin-top: 8px;
}
.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}
/* A long label wraps inside its button instead of pushing it out of a narrow
   dialog or card. */
:is(.actions, .dialog-actions, .page-actions) > :is(button, .button) {
  max-width: 100%;
  height: auto;
  min-height: 32px;
  padding-block: 7px;
  white-space: normal;
  line-height: 1.3;
}

/* ------------------------------------------- integration */
/* The integration's steps: done ones quiet with a tick, the one to do now
   carrying its action, the rest a line each. */
.integration {
  margin-bottom: 20px;
}
.integration .card-head {
  align-items: baseline;
}
.integration .card-head h2 {
  flex: 1;
}
.integration-steps {
  list-style: none;
  margin: 0;
  padding: 6px 4px 2px;
  counter-reset: step;
}
.integration-steps li {
  position: relative;
  padding: 10px 16px 10px 44px;
  counter-increment: step;
}
.integration-steps li::before {
  content: counter(step);
  position: absolute;
  left: 14px;
  top: 10px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sunken);
  box-shadow: 0 0 0 1px var(--line);
  font-size: 0.7857rem;
  font-weight: 600;
  color: var(--muted);
}
.integration-steps li.done::before {
  content: "✓";
  background: var(--success-bg);
  color: var(--success-text);
  box-shadow: none;
}
.integration-steps li.current {
  background: var(--brand-soft);
  border-radius: var(--radius-sm);
}
.integration-steps li.current::before {
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: none;
}
.integration-steps strong {
  display: block;
  font-size: 1rem;
  color: var(--text);
}
.integration-steps li.done strong {
  color: var(--body);
}
.integration-steps p {
  margin-top: 2px;
  font-size: 0.9286rem;
  color: var(--muted);
}
.integration-optional {
  font-size: 0.7857rem;
  font-weight: 500;
  color: var(--faint);
}
.integration-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 8px;
  font-size: 0.9286rem;
}
.integration-status:empty {
  display: none;
}
.integration-status {
  padding: 0 20px 14px;
}
.integration-done {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin: 0;
  padding: 12px 20px;
  font-size: 0.9286rem;
}
.integration-done span::before {
  content: "✓ ";
  color: var(--success-text);
  font-weight: 600;
}

details.disclosure {
  border-radius: var(--radius);
}
details.disclosure > summary {
  cursor: pointer;
  padding: 10px 0;
  font-size: 0.9286rem;
  font-weight: 500;
  color: var(--brand-text);
  list-style: none;
}
details.disclosure > summary::-webkit-details-marker {
  display: none;
}
details.disclosure > summary::before {
  content: "›";
  display: inline-block;
  margin-right: 7px;
  transition: transform 0.15s ease;
}
details.disclosure[open] > summary::before {
  transform: rotate(90deg);
}
.card > details.disclosure > summary {
  padding: 15px 20px;
}
.card > details.disclosure > .card-body.tight-top {
  padding-top: 0;
}

/* A one-time secret is the only place this product shows something the reader
   can never get back, so it is marked as loudly as a refusal. */
.staged {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--warn-bg);
  color: var(--warn-text);
}
.staged h4 {
  font-size: 1rem;
  color: var(--warn-text);
}
.staged p {
  margin: 6px 0 12px;
  font-size: 0.9286rem;
  line-height: 1.6;
}

/* --------------------------------------------------- lists in the settings */
.record-list {
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.record-list > * {
  background: var(--surface);
  padding: 12px 16px;
  font-size: 0.9286rem;
  color: var(--body);
}
.record-list p {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  overflow-wrap: anywhere;
}
.record-list button {
  height: 26px;
  font-size: 0.9286rem;
  padding: 0 10px;
}
.record-list:empty {
  display: none;
}
.record-list .offer-row {
  flex-wrap: wrap;
}
/* A service credential lists its tokens under it; only those nested rows
   need space, the list's own rows are split by its hairlines. */
.record-list > div:not(.offer-row) > .offer-row + .offer-row {
  margin-top: 8px;
}

/* -------------------------------------------------------------- utilities */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.mt-1 {
  margin-top: 10px;
}
.mt-2 {
  margin-top: 14px;
}
.mt-3 {
  margin-top: 18px;
}
.mt-4 {
  margin-top: 20px;
}
.narrow {
  max-width: 320px;
}
/* The catalog price is the one number on the purchase card, so it is typeset
   like a stat without being boxed like one. */
.price strong {
  display: block;
  font-size: 2.1429rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.price strong span {
  display: block;
  margin-top: 4px;
  font-size: 0.8571rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
}
.price small {
  display: block;
  margin-top: 8px;
  font-size: 0.9286rem;
  color: var(--muted);
}

/* ============================================================ public guide */
.guide {
  padding-top: var(--topbar);
}
.guide-topbar nav {
  display: flex;
  gap: 4px;
}
.section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 72px 32px;
}
.section > .eyebrow,
.hero .eyebrow {
  color: var(--brand-text);
}
.section h2 {
  margin-top: 10px;
  font-size: 2.1429rem;
  line-height: 1.25;
  letter-spacing: -0.025em;
}
.section-intro {
  margin-top: 12px;
  max-width: 62ch;
  font-size: 1.1429rem;
  color: var(--muted);
  line-height: 1.65;
}

/* The first screen is one flat step in tone above the page. */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.hero-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 86px 32px 78px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;
}
.hero h1 {
  margin-top: 14px;
  font-size: clamp(2.4286rem, 4.4vw, 3.7143rem);
  line-height: 1.12;
  letter-spacing: -0.035em;
}
.hero .lead {
  margin-top: 18px;
  max-width: 46ch;
  font-size: 1.2857rem;
  line-height: 1.65;
  color: var(--body);
}
.hero .scope-note {
  margin-top: 16px;
  font-size: 0.9286rem;
  color: var(--muted);
  max-width: 52ch;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.hero-actions .button {
  height: 40px;
  padding: 0 20px;
  font-size: 1rem;
}

/* A small, honest picture of the thing being sold: the console's own numbers. */
.hero-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.hero-card header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.9286rem;
  font-weight: 600;
  color: var(--text);
}
.hero-card .rows {
  padding: 6px 18px 16px;
}
.hero-card .rows div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.9286rem;
  color: var(--muted);
}
.hero-card .rows div:last-child {
  border-bottom: 0;
}
.hero-card .rows b {
  font-size: 1.2857rem;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.hero-card .rows .up b {
  color: var(--brand-text);
}

.entry-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 36px;
}
.entry-card {
  display: block;
  padding: 24px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  color: var(--body);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.entry-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  color: var(--body);
}
.entry-card .entry-number {
  font-size: 0.7857rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);
}
.entry-card h3 {
  margin: 10px 0 8px;
  font-size: 1.2857rem;
}
.entry-card p {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.65;
}
.entry-card strong {
  display: inline-block;
  margin-top: 14px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--brand-text);
}

.steps {
  list-style: none;
  counter-reset: s;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.steps > li {
  counter-increment: s;
  position: relative;
  padding: 24px 26px 24px 74px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.steps > li::before {
  content: counter(s);
  position: absolute;
  left: 26px;
  top: 24px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 0.9286rem;
  font-weight: 600;
}
.steps h3 {
  font-size: 1.1429rem;
}
.steps p {
  margin-top: 8px;
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.7;
  max-width: 76ch;
}
.inline-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 1rem;
  font-weight: 500;
}
.steps details.disclosure {
  margin-top: 10px;
}
.steps details.disclosure p {
  margin-top: 6px;
}

/* The brief is a payload to copy, so it reads as a terminal, not as prose. */
.handoff {
  margin-top: 36px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--inverse);
  box-shadow: var(--shadow-lg);
}
.handoff-head {
  padding: 22px 26px 18px;
  color: var(--inverse-body);
}
.handoff-head .eyebrow {
  color: var(--inverse-accent);
}
.handoff-head h3 {
  margin: 8px 0 8px;
  color: var(--on-brand);
  font-size: 1.2857rem;
}
.handoff-head p {
  font-size: 1rem;
  line-height: 1.65;
  max-width: 72ch;
}
#agent-brief {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--inverse-deep);
  color: var(--inverse-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9286rem;
  line-height: 1.7;
  padding: 18px 26px;
}
#agent-brief:focus {
  box-shadow: inset 0 0 0 2px var(--brand);
}
.copy-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 26px;
  background: var(--inverse-deep);
  border-top: 1px solid var(--inverse-line);
}
.copy-actions a {
  color: var(--inverse-accent-soft);
  font-size: 0.9286rem;
  font-weight: 500;
}
#copy-status {
  font-size: 0.9286rem;
  color: var(--inverse-muted);
}

.walkthrough {
  margin-top: 32px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 26px;
}
.illustration-badge {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 100px;
  background: var(--warn-bg);
  color: var(--warn-text);
  font-size: 0.8571rem;
  font-weight: 500;
}
.demo-progress {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  flex-wrap: wrap;
}
.demo-progress li {
  padding: 5px 12px;
  border-radius: 100px;
  font-size: 0.9286rem;
  font-weight: 500;
  color: var(--muted);
  background: var(--sunken);
  box-shadow: 0 0 0 1px var(--line);
}
.demo-progress li.complete {
  background: var(--success-bg);
  color: var(--success-text);
  box-shadow: none;
}
.demo-progress li[aria-current] {
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: none;
}
.demo-balances {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin: 22px 0;
}
.demo-balances > div {
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--sunken);
  box-shadow: 0 0 0 1px var(--line);
}
.demo-balances span {
  font-size: 0.9286rem;
  color: var(--muted);
}
.demo-balances strong {
  display: block;
  margin-top: 4px;
  font-size: 1.7143rem;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.demo-balances > div:first-child strong {
  color: var(--brand-text);
}
#demo-title {
  font-size: 1.1429rem;
}
#demo-description {
  margin-top: 6px;
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.7;
  max-width: 70ch;
}
.demo-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.next-step {
  margin-top: 20px;
  font-size: 1rem;
  color: var(--muted);
}

/* Sign-in is a single centred card, the way every Stripe account surface is. */
.login-wrap {
  max-width: 460px;
  margin: 36px auto 0;
}
.login-panel {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 28px;
}
.login-panel + .login-panel {
  margin-top: 20px;
}
.login-panel h3 {
  font-size: 1.1429rem;
  margin-bottom: 6px;
}
.login-panel form {
  display: grid;
  gap: 14px;
}
.login-panel form label {
  display: grid;
  gap: 5px;
}
/* The code field with its send button beside it; the button keeps its width
   while it counts down. */
.code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}
.code-row button {
  height: 38px;
  min-width: 9em;
}
.login-panel #provider-login {
  flex-wrap: wrap;
}
.login-panel button[type="submit"],
.login-panel .primary {
  height: 38px;
  font-size: 1rem;
}
.login-panel > p,
.login-panel form > p {
  font-size: 0.9286rem;
  color: var(--muted);
  line-height: 1.65;
}
.login-panel details.disclosure {
  margin-top: 8px;
  border-top: 1px solid var(--line-soft);
}
.login-foot {
  margin-top: 18px;
  font-size: 0.9286rem;
  color: var(--muted);
  line-height: 1.7;
  text-align: center;
}
#login-message {
  font-size: 0.9286rem;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  color: var(--brand-text);
}
#login-message.error {
  background: var(--danger-bg);
  color: var(--danger-text);
}
.guide-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.guide-footer div {
  max-width: 1080px;
  margin: 0 auto;
  padding: 26px 32px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 0.9286rem;
  color: var(--muted);
}
.guide-footer a {
  font-weight: 500;
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: 60px;
  }
  .hero-card {
    max-width: 460px;
  }
}
@media (max-width: 900px) {
  :root {
    --sidebar: 0px;
  }
  .sidenav {
    position: static;
    width: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 10px 12px;
    background: var(--surface);
  }
  .shell {
    display: block;
  }
  /* The groups collapse into one row of chips that scrolls sideways and
     stays under the top bar: the group names are structure for a column, and
     a wrapped second row pushed every page's content down. */
  .sidenav {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    position: sticky;
    top: var(--topbar);
    bottom: auto;
    z-index: 15;
  }
  .sidenav::-webkit-scrollbar {
    display: none;
  }
  .nav-group {
    display: contents;
  }
  .nav-group > span,
  .sidenav i {
    display: none;
  }
  .sidenav a {
    white-space: nowrap;
  }
  .content {
    margin-left: 0;
    padding: 22px 18px 60px;
  }
  .guide-topbar nav {
    display: none;
  }
  .section {
    padding: 52px 20px;
  }
}
@media (max-width: 620px) {
  .page-head {
    flex-direction: column;
    gap: 12px;
  }
  .hero-inner,
  .section {
    padding-left: 18px;
    padding-right: 18px;
  }
  .toast-region {
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
  }
  /* Both bars now carry a language control and have no room to spare.
     Tightening them keeps a 375px phone from scrolling sideways. */
  .topbar {
    gap: 8px;
    padding: 0 12px;
  }
  .guide-topbar .button {
    padding: 0 10px;
  }
  /* On the console the two conveniences give way, so the things that cannot —
     which product, which environment, and the way out of a language you
     cannot read — keep their width. The docs are a link away on the guide,
     and the data refreshes itself every few seconds anyway. */
  .topbar:not(.guide-topbar) > .topbar-link,
  #refresh {
    display: none;
  }
  /* Under 375px every fixed-width item has to give: the brand keeps its
     mark, the language switcher its globe and New product its plus, so the
     account menu (and sign-out) stays on screen. */
  .topbar-divider {
    display: none;
  }
  .brand {
    font-size: 0;
    gap: 0;
  }
  .topbar-language {
    width: 34px;
    padding: 0;
    color: transparent;
    background-position:
      center,
      right 5px center;
    background-size: 16px, 0;
  }
  #products-panel {
    flex: 1 1 auto;
  }
  #products-panel select {
    min-width: 0;
    width: 100%;
    max-width: none;
  }
  /* A picker or a field takes its own line and gives up its fixed width. */
  .test-user > select,
  .lookup > input,
  .filter > input {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
  }
  .test-user-balance {
    margin-left: 0;
  }
  /* iOS Safari zooms the whole page into any field under 16px. */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: max(16px, 1rem);
  }
  /* The card already has its own detail button; the chevron column would be
     a line of nothing. */
  .stacked td.chevron {
    display: none;
  }
  /* Each row becomes a card; every value keeps the column name beside it. */
  .stacked thead {
    display: none;
  }
  .stacked tbody tr {
    display: block;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-soft);
  }
  .stacked td {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0;
    border: 0;
    text-align: right;
  }
  .stacked td::before {
    content: attr(data-label);
    font-size: 0.8571rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    text-align: left;
    flex-shrink: 0;
  }
  /* The secondary line is a line, not a second column squeezed beside the
     first one. */
  .stacked td {
    flex-wrap: wrap;
  }
  .stacked td small {
    flex-basis: 100%;
    text-align: right;
  }
  /* A product row as a card: an empty column (not the default) is left out,
     and the actions take the full width under their label. */
  #products .stacked td {
    padding-left: 0;
    padding-right: 0;
  }
  #products .stacked td:empty {
    display: none;
  }
  #products .stacked td.product-actions {
    display: block;
    min-width: 0;
    text-align: left;
  }
  #products .stacked td.product-actions::before {
    display: block;
    margin-bottom: 6px;
  }
  #products .stacked td.product-actions small {
    text-align: left;
  }
  .menu > summary > span:not(.avatar) {
    display: none;
  }
  .detail {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ------------------------------------------------------- developer handoff */
.handoff-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 16px;
  margin: 0 0 12px;
  font-size: 0.9286rem;
}
.handoff-list dt {
  color: var(--muted);
}
.handoff-list dd {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.handoff-list code {
  overflow-wrap: anywhere;
}
#handoff-brief {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8571rem;
  line-height: 1.6;
}
#handoff-status {
  font-size: 0.9286rem;
  color: var(--muted);
}
@media (max-width: 480px) {
  .handoff-list {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }
  .handoff-list dd {
    margin-bottom: 8px;
  }
}

/* A full order ID or business key wraps inside the card instead of pushing
   it sideways, so the button grows with its lines. */
.detail-button {
  text-align: start;
  max-width: 100%;
  height: auto;
  min-height: 24px;
  padding: 2px 0;
  white-space: normal;
  overflow-wrap: anywhere;
  font: inherit;
  /* The whole row opens the record; the button is its keyboard handle, so
     it reads as the row's title, not as a field to type into. */
  background: none;
  box-shadow: none;
  color: var(--text);
  font-weight: 500;
}
.detail-button:hover:not(:disabled) {
  background: none;
  box-shadow: none;
  text-decoration: underline;
}
.refund-line {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}
.copyable {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------- offers */
.offer-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 14px;
}
.offer-options[hidden] {
  display: none;
}
.offer-option {
  /* Two lines of text: undo the one-line button sizing. */
  display: grid;
  justify-items: start;
  gap: 3px;
  height: auto;
  line-height: 1.35;
  white-space: normal;
  text-align: left;
  padding: 10px 14px;
  min-width: 160px;
  background: var(--surface);
  border: 1px solid var(--line-control);
  border-radius: var(--radius);
  box-shadow: none;
}
.offer-option strong {
  font-size: 1rem;
  font-weight: 600;
}
.offer-option small {
  font-size: 0.8571rem;
  color: var(--muted);
}
.offer-option[aria-checked="true"] {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand) inset;
}
.offer-option[aria-checked="true"] strong {
  color: var(--brand-text);
}
.offer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.offer-row strong {
  display: block;
  font-size: 1rem;
}
.offer-row small {
  display: block;
  color: var(--muted);
  font-size: 0.8571rem;
  margin-top: 2px;
  overflow-wrap: anywhere;
}

/* -------------------------------------------------------------- top-up */
/* The payer's page. The product they are paying is the heading; sections
   are set apart by a step in tone, not by lines or shadows, and the one
   action on each is the only filled colour. The connect page borrows the
   frame (.topup, .topup-head, .topup-card). */
.topup-body {
  background: var(--page);
  margin: 0;
}
.topup {
  max-width: 600px;
  margin: 0 auto;
  padding: 32px 16px 48px;
  display: grid;
  gap: 16px;
}
.topup-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.topup-head-side {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}
.topup-head h1 {
  margin: 4px 0 2px;
  font-size: 1.7143rem;
  letter-spacing: -0.02em;
}
.topup-head select {
  width: auto;
  height: 30px;
}
.topup-heading {
  min-width: 0;
}
.topup-heading h1 {
  margin: 0;
  font-size: 2.2857rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--text);
  overflow-wrap: anywhere;
}
.topup-subtitle {
  margin: 6px 0 0;
  font-size: 1.1429rem;
  color: var(--body);
}
.topup-subtitle:empty {
  display: none;
}
.topup-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px 20px 22px;
}
/* Cards that hold a form or a decision space their parts like the sign-in
   panel does, so a label sits with its own field. */
#connect-login,
#connect-request {
  display: grid;
  gap: 14px;
}
.topup-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  background: var(--brand-soft);
}
.topup-status p {
  margin: 0;
}
.topup-status-plan {
  font-size: 1.1429rem;
  font-weight: 600;
  color: var(--text);
}
.topup-status-detail {
  margin-top: 2px;
  white-space: pre-line;
  font-variant-numeric: tabular-nums;
}
.topup-status-detail:empty {
  display: none;
}
.topup-status > .topup-plan-message,
.topup-ending {
  flex-basis: 100%;
}
.topup-ending {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding-top: 12px;
  border-top: 1px solid var(--brand-line);
}
.topup-ending[hidden] {
  display: none;
}
.topup-ending-date {
  font-weight: 600;
  color: var(--warn-text);
}
.topup-ending-hint {
  font-size: 0.9286rem;
  color: var(--muted);
}
.topup-section {
  display: grid;
  gap: 16px;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.topup-section h2 {
  margin: 0;
  font-size: 1.2857rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
}
.topup-section-head {
  display: grid;
  gap: 4px;
}
.topup-note {
  margin: 0;
  color: var(--muted);
}
.topup-message {
  margin: 0;
  color: var(--text);
}
.topup-message:empty {
  display: none;
}
/* Plans side by side, each a card with what it includes: two across, or
   three when there are exactly three (no lone card beside empty slots). */
.topup-plans {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.topup-plans[data-count="1"] {
  grid-template-columns: minmax(0, 1fr);
}
.topup-plans[data-count="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.topup-plan {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.topup-plan[data-current="true"] {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand);
}
.topup-plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 24px;
}
.topup-plan-head strong {
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}
.topup-plan-badge {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.8571rem;
  font-weight: 600;
  color: var(--brand-text);
  background: var(--brand-soft);
  white-space: nowrap;
}
.topup-plan-price {
  margin: 0;
  font-size: 1.7143rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.topup-plan-price small {
  margin-left: 4px;
  font-size: 0.9286rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}
.topup-plan-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  font-size: 0.9286rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.topup-plan-actions {
  margin-top: auto;
  display: grid;
  gap: 8px;
}
.topup-plan-actions button {
  width: 100%;
  height: 36px;
  padding: 0 16px;
}
.topup-plan-confirm {
  margin: 0;
  font-size: 0.9286rem;
  color: var(--body);
}
.topup-plan-message {
  margin: 0;
  font-size: 0.9286rem;
  color: var(--text);
}
.topup-plan-message:empty {
  display: none;
}
/* Two across, or three when there are exactly three, so the shelf never
   ends on a lone card beside two empty slots. */
.topup-offers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.topup-offers[data-count="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.topup-offer {
  height: auto;
  min-height: 72px;
  display: grid;
  align-content: center;
  justify-content: stretch;
  justify-items: start;
  gap: 2px;
  padding: 14px 16px;
  line-height: 1.3;
  white-space: normal;
  text-align: left;
  color: var(--text);
  background: var(--sunken);
  border: 2px solid transparent;
  border-radius: var(--radius);
  box-shadow: none;
}
.topup-offer:hover:not(:disabled) {
  background: var(--line-soft);
  box-shadow: none;
}
.topup-offer:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
.topup-offer strong {
  font-size: 1.4286rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.topup-offer small {
  font-size: 0.9286rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.topup-offer[aria-checked="true"],
.topup-offer[aria-checked="true"]:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
}
.topup-custom {
  display: grid;
  gap: 6px;
}
.topup-custom label {
  font-weight: 600;
  color: var(--text);
}
.topup-amount-field {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-control);
  border-radius: var(--radius);
  padding: 0 14px;
  background: var(--surface);
}
.topup-amount-field span {
  color: var(--muted);
}
/* By id: the base field rules are more specific than a class. */
#topup-amount {
  border: 0;
  box-shadow: none;
  flex: 1;
  font-size: 1.4286rem;
  padding: 10px 0;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}
#topup-amount:focus,
#topup-amount[aria-invalid="true"] {
  outline: none;
  box-shadow: none;
}
.topup-amount-field:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand) inset;
}
.topup-amount-field:has(#topup-amount[aria-invalid="true"]) {
  border-color: var(--danger);
}
.topup-checkout {
  display: grid;
  gap: 10px;
}
.topup-total {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 2px 2px 0;
  color: var(--body);
  font-variant-numeric: tabular-nums;
}
.topup-total strong {
  color: var(--text);
  font-weight: 600;
}
.topup-purchase-detail {
  margin: 0;
  font-size: 1.4286rem;
  font-weight: 650;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.topup-pay {
  width: 100%;
  height: 48px;
  font-size: 1.1429rem;
  font-weight: 600;
  border-radius: var(--radius);
}
.topup-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding-top: 4px;
  font-size: 0.9286rem;
  color: var(--faint);
}
.topup-foot-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-left: auto;
}
.topup-back {
  font-weight: 600;
}
@media (max-width: 480px) {
  .topup {
    padding-top: 20px;
  }
  .topup-heading h1 {
    font-size: 1.8571rem;
  }
  .topup-section {
    padding: 20px 16px;
  }
  .topup-offers[data-count="3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .topup-plans,
  .topup-plans[data-count="3"] {
    grid-template-columns: minmax(0, 1fr);
  }
}
.topup-frame {
  width: 100%;
  min-height: 560px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--page);
}

/* -------------------------------------------------- product creation dialog */
dialog.dialog-wide {
  max-width: min(760px, calc(100vw - 32px));
}
dialog .dialog-body {
  padding: 24px;
}
dialog .dialog-body form {
  padding: 0;
}
#products-panel {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Task navigation and compact integration materials share the existing palette. */
.section-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}
[id^="settings-"][id$="-title"] {
  scroll-margin-top: 88px;
}
.integration-materials {
  margin-bottom: 24px;
}
.handoff-context {
  font-weight: 600;
  overflow-wrap: anywhere;
  margin-bottom: 8px;
}
.integration-materials .actions {
  margin-top: 16px;
}
#handoff-details {
  margin-top: 16px;
}
#handoff-details textarea {
  margin-top: 12px;
}
#handoff-users {
  white-space: pre-line;
  overflow-wrap: anywhere;
  line-height: 1.8;
}
#test-setup {
  margin-bottom: 24px;
}
#test-setup-status:empty,
#handoff-status:empty {
  display: none;
}
#stripe-current .detail {
  padding: 10px 0;
}
.stripe-edit > summary {
  padding: 18px 20px;
  font-weight: 600;
}
#orders-table .cell-id,
#recent-orders-table .cell-id {
  font-family: inherit;
  max-width: 32rem;
}
#orders-table .cell-id small,
#recent-orders-table .cell-id small {
  overflow-wrap: anywhere;
}
#recent-orders-card {
  margin-top: 24px;
}
@media (max-width: 620px) {
  .integration-materials .card-head {
    align-items: stretch;
    flex-direction: column;
  }
  .section-links button {
    flex: 1 1 auto;
  }
}

/* The account directory and detail are two views of the same product scope. */
.customers-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
#customers-message:not(:empty),
#customer-detail-message:not(:empty) {
  margin: 16px 0;
}
#customers-retry,
#customer-detail-retry {
  margin-bottom: 16px;
}
#customers-table td:first-child {
  overflow-wrap: anywhere;
  max-width: 32rem;
}
#customers-table td:first-child > button + button {
  margin-left: 12px;
}
#customers-table th:nth-child(2),
#customers-table td:nth-child(2) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.customer-back {
  margin-bottom: 16px;
}
#customer-account-state {
  color: var(--muted);
}
#customer-directory .lookup {
  flex-wrap: wrap;
}
@media (max-width: 620px) {
  #customer-directory .lookup input {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }
  #customers-table td:first-child {
    max-width: none;
  }
}
#customer-match {
  width: auto;
  flex: 0 0 auto;
}
#customer-directory .lookup {
  margin-bottom: 16px;
}
@media (max-width: 620px) {
  #customers-table td:first-child::before {
    display: none;
  }
  #customers-table td:first-child {
    align-items: flex-start;
    flex-wrap: nowrap;
  }
  #customers-table .customer-list-identity {
    flex: 1 1 0;
    min-width: 0;
    text-align: left;
    overflow-wrap: anywhere;
  }
  #customers-table td:first-child > .text-button {
    flex-shrink: 0;
  }
}
.balance-negative,
.stat.accent strong.balance-negative {
  color: var(--danger-text);
}

#orders-message:empty {
  display: none;
}
#orders-retry {
  margin: 0 20px 16px;
}

/* Keep account identity together, before optional contact data and balances. */
.customer-identity {
  min-width: 0;
  overflow-wrap: anywhere;
}
#customer-stable-id {
  font-size: 0.8571rem;
  margin-top: 4px;
}
#customer-profile {
  margin-bottom: 20px;
}
#customer-profile h3 {
  font-size: 1rem;
}
#customer-profile > .hint {
  margin: 4px 0 12px;
}
.customer-contact {
  margin-top: 4px;
}

.customer-profile-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 24px;
}
.customer-profile-fields .detail {
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  min-width: 0;
}
.customer-profile-fields .detail dd {
  margin: 6px 0 0;
  overflow-wrap: anywhere;
}
@media (max-width: 900px) {
  .customer-profile-fields {
    grid-template-columns: 1fr;
  }
}