/* Customer account area - rides tokens.css + main.css.
   2026-07-23 v6, the drafted console. NO CARDS, EVER: content sits directly
   on the steel-tinted ground in Swiss sections - Inter headings on hairline
   baselines, ruled columns, generous air. NO BADGES: state is a measured
   dot beside quiet words, never a pill. The clay/neumorphism of the brand
   lives in the OBJECTS - the floating bar pane, extruded steel buttons, inset
   fields and meters, the segmented control. All type is Inter; monospace
   stays banned from this area. */

/* Geometry of the fixed pane: a brand deck and a tab deck. main.css
   re-tokens --header-h on phones for the marketing chrome, so the account
   bar carries its own variables. */
:root {
  --acc-w: 1060px;          /* one content width for bar, main and foot */
  --abar-top: 54px;         /* brand deck */
  --abar-nav: 46px;         /* tab deck */
  --abar-off: 10px;         /* the pane floats this far off the top edge */
}

/* the page NEVER pans sideways: clip on the root, with a hidden fallback
   for engines without overflow:clip - no half-scrolled, clipped-off page */
html { overflow-x: clip; }
@supports not (overflow: clip) {
  html, .account-body { overflow-x: hidden; }
}
.account-body {
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg-tint);
  padding-top: calc(var(--abar-off) + var(--abar-top) + var(--abar-nav) + 34px);
  position: relative; isolation: isolate;
  overflow-x: clip;   /* the pattern patches ride past the edges by design */
}
/* the hidden attribute always wins - .tlist-row/.doc-* set display:flex etc,
   which used to override [hidden] and broke the thread search (07-24) */
.account-body [hidden] { display: none !important; }
/* auth pages carry the single-deck pane */
.account-body--auth {
  padding-top: calc(var(--abar-off) + var(--abar-top) + 26px);
}
/* The registration grid, drawn at the periphery like everywhere else on the
 * site: the plus-marks over the fine grid, faded before content. Two
 * patches - top-right, and a quieter echo bottom-left - so the sections
 * always have brand fabric to sit on. */
.account-body::before,
.account-body::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  aspect-ratio: 1;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M53.5 60h13M60 53.5v13' stroke='%23225479' stroke-opacity='.4' stroke-width='1'/%3E%3C/svg%3E"),
    linear-gradient(rgba(34, 84, 121, .105) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 84, 121, .105) 1px, transparent 1px);
  background-size: 120px 120px, 20px 20px, 20px 20px;
  background-position: 10px 10px, .5px .5px, .5px .5px;
  -webkit-mask-image: radial-gradient(closest-side, #000 34%, transparent 97%);
          mask-image: radial-gradient(closest-side, #000 34%, transparent 97%);
}
.account-body::before {
  top: -120px; right: -140px; width: min(56vw, 720px);
}
/* anchored INSIDE the page edge: a negative bottom offset used to extend
   the scrollable area past the footer (the "dead space below the foot") */
.account-body::after {
  bottom: 0; left: -180px; width: min(48vw, 600px); opacity: .75;
}

/* ---------- motion: sections rise in, strokes draw, meters fill ---------- */
@media (prefers-reduced-motion: no-preference) {
  .account-wrap > * { animation: acc-rise .55s cubic-bezier(.2, .7, .2, 1) backwards; }
  .account-wrap > *:nth-child(1) { animation-delay: .03s; }
  .account-wrap > *:nth-child(2) { animation-delay: .07s; }
  .account-wrap > *:nth-child(3) { animation-delay: .11s; }
  .account-wrap > *:nth-child(4) { animation-delay: .15s; }
  .account-wrap > *:nth-child(5) { animation-delay: .19s; }
  .account-wrap > *:nth-child(6) { animation-delay: .23s; }
  .account-wrap > *:nth-child(n+7) { animation-delay: .27s; }
  .usage-meter span { transform-origin: left center;
    animation: acc-fill .9s cubic-bezier(.25, .8, .3, 1) .25s backwards; }
}
@keyframes acc-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes acc-fill { from { transform: scaleX(0); } }

/* moving between tabs (2026-07-24 v2): the section swap is a FETCH, not a
   reload. The old page (a fixed ghost of it) slides out one way at the same
   moment the new content glides in from the other, so the walk reads as one
   continuous strip - no blank gap, no half-travelled page left standing.
   html.acc-in-* stays for full page loads (deep links, form posts). */
@media (prefers-reduced-motion: no-preference) {
  html.acc-in-r .account-main { animation: acc-in-r .34s cubic-bezier(.2, .7, .2, 1); }
  html.acc-in-l .account-main { animation: acc-in-l .34s cubic-bezier(.2, .7, .2, 1); }
  .account-main.acc-enter-r { animation: acc-in-r .34s cubic-bezier(.2, .7, .2, 1); }
  .account-main.acc-enter-l { animation: acc-in-l .34s cubic-bezier(.2, .7, .2, 1); }
  .account-main.acc-enter-f { animation: acc-fade .22s ease; }
  /* the ghost rules sit last and doubled so they always beat the
     .account-main entrance rules the clone may still carry */
  .acc-ghost.acc-ghost--l { animation: acc-out-l .3s cubic-bezier(.4, 0, .7, 1) forwards; }
  .acc-ghost.acc-ghost--r { animation: acc-out-r .3s cubic-bezier(.4, 0, .7, 1) forwards; }
}
/* the ghost: a frozen copy of the leaving page, pinned where it stood.
   Nothing INSIDE it may re-animate (the section rise, the meter fill
   would replay on a fresh clone) - only the ghost itself moves. */
.acc-ghost { position: fixed; z-index: 4; margin: 0;
  pointer-events: none; overflow: hidden; contain: layout paint; }
.acc-ghost * { animation: none !important; }
/* swapped-in content skips the staggered section rise - the slide is the
   whole story; the rise stays for real page loads */
.account-main.acc-swapped .account-wrap > * { animation: none; }
@keyframes acc-out-l { to { opacity: 0; transform: translateX(-46px); } }
@keyframes acc-out-r { to { opacity: 0; transform: translateX(46px); } }
@keyframes acc-in-r { from { opacity: 0; transform: translateX(46px); } }
@keyframes acc-in-l { from { opacity: 0; transform: translateX(-46px); } }
@keyframes acc-fade { from { opacity: 0; } }

/* ---------- the bar: the floating white pane, two decks ---------- */
.account-bar {
  position: fixed; top: var(--abar-off); left: 14px; right: 14px; z-index: 100;
  border-radius: 18px;
  overflow: hidden;   /* nothing in the decks ever renders outside the pane */
  /* SOLID WHITE (08-28, founder): the page no longer reads through the bar.
     With an opaque fill the glass sheen, the backdrop blur and the white
     inner highlights all painted white on white - they are gone. The rim
     and the cast shadow stay: they are what lifts the pane off the tinted
     ground now that the blur no longer separates it. */
  background: #fff;
  box-shadow:
    inset 0 -1px 0 rgba(34, 84, 121, .07),
    0 2px 6px rgba(22, 33, 43, .04),
    0 14px 34px -14px rgba(22, 33, 43, .14);
}
/* the rim: a 1px gradient ring, masked so only the border band paints -
   the same construction as .site-header */
.account-bar::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, .95), rgba(255, 255, 255, .30) 28%,
    rgba(34, 84, 121, .20) 58%, rgba(255, 255, 255, .60) 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}
/* deck one: brand left, doors right - words on the pane, not pills */
.account-bar-top-in {
  max-width: var(--acc-w); margin: 0 auto; padding: 0 24px;
  height: var(--abar-top); display: flex; align-items: center; gap: 14px;
  min-width: 0;   /* the deck shrinks inside the pane, never past it */
}
.account-brand { display: inline-flex; align-items: center; flex: none;
  text-decoration: none; }
.account-brand:hover { text-decoration: none; }
.account-brand img { height: 25px; width: auto; display: block; }
/* the area word: set off the wordmark by a hairline, no chip */
.account-mark-tag {
  font-size: 13px; font-weight: 600; letter-spacing: -.004em;
  color: var(--muted); line-height: 1; flex: none;
  padding-left: 14px; border-left: 1px solid var(--line-strong);
}
.account-bar-side { display: flex; align-items: center; gap: 18px;
  margin-left: auto; flex: none; font-size: 13.5px; }
.account-bar-side a { color: var(--muted); text-decoration: none;
  white-space: nowrap; transition: color .14s ease; }
.account-bar-side a:hover { color: var(--ink); text-decoration: none; }
/* the operator door: small capitals, quietly letterspaced, still no chip */
.account-erp {
  font-size: 11px; font-weight: 650; letter-spacing: .12em;
  color: var(--muted) !important;
}
.account-erp:hover { color: var(--brand) !important; }
.account-site-link { display: inline-flex; align-items: center; gap: .4em; }
.account-site-link span[aria-hidden] { color: var(--copper); }
.account-site-link:hover { color: var(--brand) !important; }
.account-signout button {
  font: 500 13.5px/1 var(--font-sans); letter-spacing: -.004em;
  color: var(--muted); cursor: pointer;
  border: 0; background: none; padding: 0; white-space: nowrap;
  transition: color .14s ease;
}
.account-signout button:hover { color: var(--ink); }

/* deck two: the tabs - typographic, an underline that meets the pane edge.
   The deck is a horizontal scroller flanked by two little arrows: they walk
   you a tab left or right (Overview -> Usage ...), the strip glides along,
   and the page slides over with it. */
.account-nav { border-top: 1px solid rgba(34, 84, 121, .09); }
.account-nav-row {
  max-width: var(--acc-w); margin: 0 auto; padding: 0 10px;
  display: flex; align-items: stretch;
}
.account-nav-arr {
  flex: none; width: 30px; margin: 0; padding: 0; border: 0;
  background: none; color: var(--faint); cursor: pointer;
  display: none; align-items: center; justify-content: center;
  transition: color .14s ease, opacity .14s ease;
}
.account-nav-arr svg { width: 15px; height: 15px; display: block; }
.account-nav-arr:hover { color: var(--ink); }
.account-nav-arr:focus-visible { outline: 2px solid var(--brand);
  outline-offset: -2px; border-radius: 8px; }
.account-nav-arr[disabled] { opacity: .28; cursor: default; color: var(--faint); }
/* the arrows appear once JS wires them; without JS the strip still scrolls */
.acc-js .account-nav-arr { display: flex; }
.account-nav-in {
  flex: 1; min-width: 0; padding: 0 14px;
  height: var(--abar-nav); display: flex; align-items: stretch; gap: 26px;
  overflow-x: auto; scrollbar-width: none;
  /* the strip pans SIDEWAYS only: the vertical axis is welded shut, and
     touch gestures that are not horizontal pans go to the page instead -
     no elastic up/down ride of the tabs on phones (founder, 07-24) */
  overflow-y: hidden; touch-action: pan-x; overscroll-behavior: contain;
  scroll-behavior: smooth;
}
/* the strip dissolves at its edges so a cut-off tab reads as "more there" */
.acc-js .account-nav-in {
  -webkit-mask-image: linear-gradient(90deg, transparent,
    #000 16px, #000 calc(100% - 16px), transparent);
          mask-image: linear-gradient(90deg, transparent,
    #000 16px, #000 calc(100% - 16px), transparent);
}
.account-nav-in::-webkit-scrollbar { display: none; }
.account-nav-in a {
  display: inline-flex; align-items: center;
  color: var(--muted); text-decoration: none; white-space: nowrap;
  font-size: 13.5px; font-weight: 560; letter-spacing: -.004em;
  /* no negative overhang: the links fit the strip EXACTLY, so there is
     nothing for a touch to scroll vertically */
  border-bottom: 2px solid transparent;
  transition: color .14s ease, border-color .14s ease;
}
.account-nav-in a:hover { color: var(--ink); text-decoration: none;
  border-bottom-color: var(--line-strong); }
.account-nav-in a.is-here { color: var(--ink); font-weight: 620;
  border-bottom-color: var(--brand); }
.account-nav-in a:focus-visible { outline: 2px solid var(--brand);
  outline-offset: -2px; }
.account-ext { font-size: .82em; margin-left: .28em; color: var(--faint); }

@media (max-width: 700px) {
  .account-bar { top: 8px; left: 8px; right: 8px; border-radius: 15px; }
  :root { --abar-top: 50px; --abar-nav: 44px; }
  .account-bar-top-in { padding: 0 16px; gap: 10px; }
  .account-brand img { height: 21px; }
  .account-mark-tag { display: none; }
  .account-bar-side { gap: 12px; font-size: 13px; min-width: 0; }
  /* phones: the arrow alone is the door home - the logo links to the site
     as well */
  .account-site-word { display: none; }
  .account-nav-row { padding: 0 4px; }
  .account-nav-in { padding: 0 12px; gap: 20px; }
  .account-nav-arr { width: 28px; }
  .account-body::after { display: none; }   /* one pattern patch is plenty */
}

/* ---------- the page column ---------- */
.account-main { flex: 1; width: 100%; max-width: var(--acc-w); margin: 0 auto;
  padding: 26px 24px 72px; position: relative; }
.account-wrap h1 { font-size: clamp(1.65rem, 3.4vw, 2.15rem); font-weight: 640;
  letter-spacing: -.026em; margin: 0 0 1.2rem; }
.account-wrap .head-rule { margin-bottom: 1rem; }
/* narrow pages sit centered in the column, not flushed left (07-24) */
.account-wrap--narrow { max-width: 680px; margin-left: auto; margin-right: auto; }
.account-back { margin: 0 0 1rem; font-size: 13.5px; }
.account-back a { color: var(--muted); }
.account-back a:hover { color: var(--brand); }
.account-sub { color: var(--muted); margin: -.45rem 0 1.7rem; max-width: 46rem;
  line-height: 1.65; font-size: .95rem; }
.account-sub a { color: var(--brand); }

/* the overview h1 row */
.account-h1-row { display: flex; align-items: flex-start;
  justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.account-h1-row h1 { margin-bottom: 1.2rem; }

/* ---------- SECTIONS, never cards ----------
   What the pages call a card renders as a Swiss section: an Inter heading
   on a hairline baseline, content directly on the ground, real air after.
   No surfaces, no borders around content, no floating boxes. */
.account-card { background: transparent; border: 0; box-shadow: none;
  border-radius: 0; padding: 0; margin: 0 0 3.1rem; }
.account-card h2 {
  font-size: 1.06rem; font-weight: 640; letter-spacing: -.014em;
  color: var(--ink); margin: 0 0 1rem;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.account-card > h2:first-child,
.account-card-head {
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: .6rem; margin-bottom: 1.15rem;
}
.account-card-head { display: flex; align-items: baseline;
  justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.account-card-head h2 { margin: 0; }
.account-card--narrow { max-width: 460px; margin: 6vh auto; }
.account-card h1 { font-size: 1.35rem; font-weight: 640; letter-spacing: -.018em;
  margin: 0 0 .5rem; }
.account-card h3 { font-size: .93rem; font-weight: 640; letter-spacing: -.006em;
  margin: 1.6rem 0 .5rem; }
.account-card h3:first-of-type { margin-top: 0; }
.account-price { color: var(--muted); font-size: 13.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; }

/* settings forms: the action row is a full-width row of its own - a bare
   button cell used to land in column 2, BESIDE an input or the newsletter
   checkbox (founder: "buttons in the wrong place", 2026-07-20) */
.account-card .form-grid .check-row,
.account-card .form-grid .form-actions { grid-column: 1 / -1; }
.form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---------- micro-type: Inter, small, quiet - never monospace ---------- */
.account-body .field label {
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--muted);
}
/* markup that reaches for the site's .mono utility renders as quiet Inter
   inside the account area (addresses, prices, member emails) */
.account-body .mono { font-family: var(--font-sans); letter-spacing: 0;
  font-size: .855rem; }
/* soft-inset fields: the neumorphic touch on every input in the area */
.account-body .field input, .account-body .field select,
.account-body .field textarea {
  border-radius: var(--r-ctl);
  box-shadow: inset 0 1.5px 4px rgba(22, 33, 43, .05);
}

/* ---------- state: a measured dot beside quiet words, NEVER a badge ----- */
.account-chip { display: inline-flex; align-items: center; gap: .5em;
  background: transparent; border: 0; border-radius: 0; padding: 0;
  font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
  text-transform: none; color: var(--muted); line-height: 1.4; }
.account-chip::before { content: ""; width: 7px; height: 7px; flex: none;
  border-radius: 99px; background: var(--faint);
  box-shadow: 0 0 0 2.5px rgba(138, 151, 163, .18); }
.account-chip--active { color: #1f6b4b; }
.account-chip--active::before { background: #2f9e63;
  box-shadow: 0 0 0 2.5px rgba(47, 158, 99, .2); }
/* a pilot IS a live subscription — same green, its own client-facing name */
.account-chip--trialing { color: #1f6b4b; }
.account-chip--trialing::before { background: #2f9e63;
  box-shadow: 0 0 0 2.5px rgba(47, 158, 99, .2); }
.account-chip--open, .account-chip--in_progress { color: var(--brand); }
.account-chip--open::before, .account-chip--in_progress::before {
  background: var(--brand); box-shadow: 0 0 0 2.5px rgba(34, 84, 121, .16); }
.account-chip--suspended, .account-chip--past_due, .account-chip--unpaid,
.account-chip--canceled, .account-chip--revoked { color: #8f5f0e; }
.account-chip--suspended::before, .account-chip--past_due::before,
.account-chip--unpaid::before, .account-chip--canceled::before,
.account-chip--revoked::before { background: #c98a1b;
  box-shadow: 0 0 0 2.5px rgba(201, 138, 27, .18); }
/* payouts reuses the trust pill - same law, dot not pill, inside the area */
.account-body .trust-pill { background: transparent; border: 0; padding: 0;
  border-radius: 0; display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
  letter-spacing: .01em; text-transform: none; color: var(--muted); }
.account-body .trust-pill::before { content: ""; width: 7px; height: 7px;
  border-radius: 99px; background: var(--faint); flex: none;
  box-shadow: 0 0 0 2.5px rgba(138, 151, 163, .18); }
.account-body .trust-pill--read { color: var(--brand); }
.account-body .trust-pill--read::before { background: var(--brand);
  box-shadow: 0 0 0 2.5px rgba(34, 84, 121, .16); }

.account-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px 28px; margin: 0 0 1.2rem; }
.account-facts div { min-width: 0; }
.account-facts dt { font-size: 11px; font-weight: 640; letter-spacing: .05em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 3px; }
.account-facts dd { margin: 0; font-size: 14px; overflow: hidden;
  text-overflow: ellipsis; }
.account-facts dd a { color: var(--brand); }
.account-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.account-note { color: var(--muted); font-size: 13.5px; max-width: 46rem;
  line-height: 1.6; }
.account-note a { color: var(--brand); }
.account-aside { margin-top: 1.1rem; font-size: 13.5px; color: var(--muted); }
.account-aside a { color: var(--brand); }
.account-welcome { margin-bottom: 1.6rem; }

/* notices: an annotated wash band on the ground - a rule and a tint,
   never a boxed card */
.account-body .form-result { background: var(--brand-wash);
  border: 0; border-left: 3px solid var(--brand);
  border-radius: 0 10px 10px 0; box-shadow: none;
  padding: .95rem 1.15rem; }
.account-body .form-result--err { background: var(--copper-wash);
  border-left-color: var(--copper); }

/* ---------- naming a fresh deployment: a left-ruled callout ---------- */
.account-naming { margin: .3rem 0 1.6rem; padding: 4px 0 6px 18px;
  background: transparent; border: 0; border-left: 2px solid var(--brand);
  border-radius: 0; box-shadow: none; }
.account-naming label { display: block; font-size: 13.5px; font-weight: 640;
  color: var(--ink); margin-bottom: 9px; }
.account-naming .subdomain-row { max-width: 30rem; margin-bottom: 12px; }
/* the address input lives outside a .field, so it carries its own clothes:
   a soft inset well with the suffix fused to its right */
.account-naming .subdomain-row input {
  background: #fff; border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl) 0 0 var(--r-ctl);
  padding: .58rem .75rem; font: inherit; font-size: 14px;
  color: var(--ink); min-width: 0;
  box-shadow: inset 0 1.5px 4px rgba(22, 33, 43, .05);
}
.account-naming .subdomain-row input:focus { outline: 2px solid var(--brand);
  outline-offset: 1px; border-color: var(--brand); }
.account-naming__hint { margin: 10px 0 0; font-size: 12.5px;
  color: var(--faint); line-height: 1.5; }
@media (max-width: 700px) {
  .account-naming .subdomain-row { flex-wrap: wrap; }
  .account-naming .subdomain-suffix { border-left: 1px solid var(--line-strong);
    border-top: 0; border-radius: 0 0 8px 8px; width: 100%; }
  .account-naming .subdomain-row input { border-radius: 8px 8px 0 0; width: 100%; }
}

/* ---------- tables ---------- */
.table-scroll { overflow-x: auto; }
.nowrap { white-space: nowrap; }
.account-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.account-table th { text-align: left; font-size: 11px; font-weight: 640;
  letter-spacing: .05em; text-transform: uppercase; color: var(--faint);
  padding: 6px 10px; border-bottom: 1px solid var(--line-strong); }
.account-table td { padding: 10px; border-bottom: 1px solid var(--line); }
.account-table td a { color: var(--brand); }
.account-table tr:last-child td { border-bottom: 0; }
.account-table tbody tr:hover td { background: var(--brand-wash); }

/* ---------- overview: the measured columns + the numbered doors ----------
   Stats are Swiss columns split by hairlines, figures set large. */
.account-stats { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px 0; margin: 0 0 26px; }
.account-stat { border-left: 1px solid var(--line-strong);
  padding: 3px 18px 5px; min-width: 0; background: transparent;
  border-top: 0; border-radius: 0; box-shadow: none; }
.account-stat:first-child { border-left: 0; padding-left: 2px; }
.account-stat b { display: block; font-size: 1.9rem; font-weight: 640;
  letter-spacing: -.028em; line-height: 1.1;
  font-variant-numeric: tabular-nums; }
.account-stat b a { color: inherit; text-decoration: none;
  transition: color .14s ease; }
.account-stat b a:hover { color: var(--brand); }
.account-stat span { display: block; font-size: 10.5px; font-weight: 620;
  letter-spacing: .05em; text-transform: uppercase; color: var(--faint);
  margin-top: 5px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.account-stat--warn b { color: #8f5f0e; }
.account-stat--over b { color: var(--danger, #b03a33); }
@media (max-width: 700px) {
  .account-stats { grid-template-columns: repeat(2, 1fr); gap: 16px 0; }
  .account-stat:nth-child(odd) { border-left: 0; padding-left: 2px; }
  .account-stat b { font-size: 1.6rem; }
}

/* the doors when nothing runs yet: an indexed editorial list. Each door is
   a ruled entry with a drafted number; the arrow answers the pointer. */
.account-doors { display: grid; counter-reset: acc-door;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px 36px; margin: 0 0 26px; }
.account-door { display: flex; flex-direction: column; gap: 6px;
  counter-increment: acc-door;
  background: transparent; border: 0; border-top: 1px solid var(--line-strong);
  border-radius: 0; box-shadow: none;
  padding: 14px 2px 18px; text-decoration: none; color: var(--ink);
  transition: border-color .16s ease; }
.account-door::before { content: counter(acc-door, decimal-leading-zero);
  font-size: 11px; font-weight: 650; letter-spacing: .08em;
  color: var(--copper); font-variant-numeric: tabular-nums;
  margin-bottom: 2px; }
.account-door:hover { text-decoration: none; border-top-color: var(--brand); }
.account-door:hover b { color: var(--brand); }
.account-door b { font-size: .98rem; font-weight: 640; letter-spacing: -.01em;
  display: flex; align-items: center; gap: .5em; }
.account-door b i { font-style: normal; color: var(--copper);
  transition: transform .18s cubic-bezier(.2, .7, .2, 1); }
.account-door:hover b i { transform: translateX(4px); }
.account-door span { font-size: 12.8px; color: var(--muted); line-height: 1.55; }
.account-door--lead { border-top: 2px solid var(--brand); }

/* ---------- the auth screens: the ONE sanctioned card ---------- */
.auth-stage { flex: 1; display: grid; place-items: center; padding: 3vh 0 6vh; }
.auth-card { width: min(400px, 100%); background: #fff;
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 1px 2px rgba(22, 33, 43, .05),
    0 18px 44px -24px rgba(22, 33, 43, .25);
  padding: 28px 28px 24px; display: grid; gap: 14px; }
.auth-card .auth-mark { width: 42px; height: 42px; border-radius: 11px;
  border: 1px solid var(--line); background: #fff;
  box-shadow: 0 1px 3px rgba(22, 33, 43, .07);
  display: grid; place-items: center; }
.auth-card .auth-mark img { width: 28px; height: 28px; }
.auth-card h1 { font-size: 1.3rem; font-weight: 660; letter-spacing: -.02em;
  margin: 2px 0 0; }
.auth-card .auth-sub { color: var(--muted); font-size: 13.5px; line-height: 1.55;
  margin: -8px 0 0; }
.auth-card .form-grid { display: grid; gap: 13px; margin: 0;
  grid-template-columns: minmax(0, 1fr); }
.auth-card .form-grid .field { grid-column: 1 / -1; }
.auth-reveal { display: grid; gap: 13px; }
.auth-reveal.is-hidden { display: none; }
.auth-pass-row { display: flex; align-items: baseline;
  justify-content: space-between; gap: 10px; }
.auth-pass-row a { font-size: 12px; color: var(--brand); }
/* "or" between Google and email */
.auth-or { display: flex; align-items: center; gap: 12px;
  font-size: 10.5px; font-weight: 650; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px;
  background: var(--line); }
.btn--google { display: flex; align-items: center; justify-content: center;
  gap: 10px; width: 100%;
  background: #fff; color: var(--ink); border: 1px solid var(--line-strong);
  font-weight: 600; }
.btn--google:hover { border-color: var(--brand); background: #f8fafc;
  color: var(--ink); }
/* the second door: creating an account is a real button, not a footnote */
.auth-alt { border-top: 1px solid var(--line); padding-top: 16px;
  display: grid; gap: 9px; }
.auth-alt p { margin: 0; font-size: 12.8px; color: var(--muted); text-align: center; }
.auth-foot { text-align: center; font-size: 12.5px; color: var(--muted);
  margin: 2px 0 0; }
.auth-foot a { color: var(--brand); }
.auth-legal { font-size: 12px; color: var(--faint); line-height: 1.55; margin: 0; }
.auth-legal a { color: var(--brand); }
/* the human check keeps out of the card: parked bottom-right, still inside
   the form so its token posts with it */
.turnstile-corner { position: fixed; right: 16px; bottom: 16px; z-index: 60; }
@media (max-width: 480px) {
  .turnstile-corner { position: static; margin-top: 4px; }
}

/* ---------- the document book: paper sheets that turn (07-24) ----------
   Every requestable document is one SHEET of paper - the one sanctioned
   prop here, the founder asked for pages. Without JS the sheets lie in a
   single stacked column and every form still posts; with JS (.is-book)
   they bind into a book: one sheet on show, the pile beneath it, the side
   buttons turning pages around the spine in real 3D. */
.doc-bookzone { margin-bottom: 34px; }
.doc-search { max-width: 30rem; }
.doc-book { position: relative; }
.doc-book:focus-visible { outline: 2px solid var(--brand);
  outline-offset: 8px; border-radius: 4px; }
.doc-spread { position: relative; }
.doc-bookzone:not(.is-book) .doc-spread { display: grid; gap: 18px; }
/* once JS is live, the stack collapses to its top sheet pre-bind - no
   flash of eight sheets on slower paints */
.acc-js .doc-bookzone:not(.is-book) .doc-sheet ~ .doc-sheet { display: none; }

/* the sheet: white paper, hairline edge, document-sharp corners, a soft
   lift off the desk and a faint fold shade at the spine */
.doc-sheet { position: relative; background: #fff;
  border: 1px solid var(--line-strong); border-radius: 3px;
  padding: 24px 28px 22px;
  display: flex; flex-direction: column; gap: .5rem;
  box-shadow: 0 1px 2px rgba(22, 33, 43, .05),
              0 18px 36px -22px rgba(22, 33, 43, .32); }
.doc-sheet::before { content: ""; position: absolute; inset: 0 auto 0 0;
  width: 30px; border-radius: 3px 0 0 3px; pointer-events: none;
  background: linear-gradient(90deg, rgba(34, 84, 121, .07), transparent); }
/* the pile under the book: two offset paper edges */
.is-book .doc-spread::before, .is-book .doc-spread::after { content: "";
  position: absolute; z-index: -1; background: #fff;
  border: 1px solid var(--line); border-radius: 3px; }
.is-book .doc-spread::before { inset: 5px -4px -4px 5px; }
.is-book .doc-spread::after { inset: 10px -8px -8px 10px; opacity: .7; }
/* the search found nothing: no phantom furniture over an empty desk */
.is-book.is-empty .doc-flip,
.is-book.is-empty .doc-spread::before,
.is-book.is-empty .doc-spread::after { display: none; }
/* the deep-linked sheet: the spine takes the copper */
.doc-sheet.is-hot { border-color: rgba(168, 94, 36, .5); }
.doc-sheet.is-hot::before {
  background: linear-gradient(90deg, rgba(168, 94, 36, .12), transparent); }

/* page furniture on the sheet */
.doc-sheet__no { position: absolute; top: 17px; right: 20px;
  font-size: 11px; font-weight: 650; letter-spacing: .08em;
  color: var(--copper); font-variant-numeric: tabular-nums; }
.doc-sheet__meta { display: flex; align-items: center; gap: .7rem;
  padding-right: 56px; }
.doc-sheet__kind { font-size: 10.5px; font-weight: 650;
  letter-spacing: .09em; text-transform: uppercase; color: var(--copper); }
.doc-sheet h2 { font-size: 1.05rem; font-weight: 640; letter-spacing: -.012em;
  margin: 0; }
.doc-sheet > p { margin: 0; font-size: .87rem; color: var(--muted);
  line-height: 1.6; max-width: 46rem; }
.doc-sheet__read { font-size: .82rem; }
.doc-sheet__read a { color: var(--brand); }
.doc-sheet__foot { margin-top: auto; padding-top: .9rem;
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.doc-sheet__form { display: grid; gap: .7rem; width: 100%; }
.doc-sheet__form .field textarea { min-height: 3.6rem; }
.doc-sheet__form .btn { justify-self: start; }
.doc-sheet__opt { text-transform: none; letter-spacing: 0; color: var(--faint); }
.doc-sheet__thread { font-size: 12.5px; font-weight: 600;
  color: var(--brand); white-space: nowrap; }
.doc-other { margin-top: 4px; }

/* bound (07-24 v3): every page of the book is the SAME size - JS measures
   the tallest sheet once and fixes the spread there, so nothing in the
   furniture (arrows, pile, pager) ever moves between pages. Short content
   simply leaves paper below it, like a real document. */
.is-book .doc-sheet { position: absolute; top: 0; left: 0; width: 100%;
  height: 100%; visibility: hidden; }
.is-book .doc-sheet.is-cur { visibility: visible; z-index: 2; }
/* changing page (07-24 v3): the flip theatre is gone. A fast modern
   fade-through: the old sheet dims in place while the new one arrives
   with a small glide in the direction of travel - 200ms, then still.
   State commits on the CLICK; the fade is decoration and never blocks
   or swallows the next click. */
.is-book .doc-sheet.is-out { visibility: visible; z-index: 1;
  animation: doc-out .18s ease forwards; }
.is-book .doc-sheet.is-in-r {
  animation: doc-in-r .22s cubic-bezier(.2, .7, .2, 1) both; }
.is-book .doc-sheet.is-in-l {
  animation: doc-in-l .22s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes doc-out { to { opacity: 0; } }
@keyframes doc-in-r { from { opacity: 0; transform: translateX(18px); } }
@keyframes doc-in-l { from { opacity: 0; transform: translateX(-18px); } }

/* the page-turn buttons: white clay knobs at the sheet's sides */
.doc-flip { position: absolute; top: 50%; z-index: 5;
  width: 38px; height: 38px; margin-top: -19px; border: 0;
  border-radius: 50%; display: none; align-items: center;
  justify-content: center; background: #f7fafc; color: var(--muted);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(34, 84, 121, .10),
              inset 1.5px 2px 3px rgba(255, 255, 255, .95),
              inset -2px -2.5px 5px rgba(34, 84, 121, .12),
              0 2px 4px rgba(22, 33, 43, .07),
              0 10px 20px -10px rgba(22, 33, 43, .25);
  transition: color .14s ease, transform .12s ease, opacity .14s ease; }
.is-book .doc-flip { display: flex; }
.doc-flip--prev { left: -17px; }
.doc-flip--next { right: -17px; }
.doc-flip:hover { color: var(--brand); transform: translateY(-1px); }
.doc-flip:active { transform: translateY(1px); }
.doc-flip[disabled] { opacity: .3; cursor: default; color: var(--faint);
  transform: none; }
.doc-flip svg { width: 16px; height: 16px; }

/* the pager: a ruled line naming the open page */
.doc-pageline { display: none; align-items: baseline; gap: 10px;
  margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted); }
.is-book .doc-pageline { display: flex; }
.doc-pageline b { font-weight: 640; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.doc-pageline .doc-pagename { min-width: 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.doc-none { margin: 0; }
.is-book .doc-none:not([hidden]) { display: block; padding: 14px 2px; }

/* ---------- support: the thread is a real chat (founder order 07-23) ------
   Client messages ride right in brand steel glass; Naxis replies ride left
   as white glass beside the N mark. The composer is a chat input. */
.ticket-room-head { border-bottom: 1px solid var(--line-strong);
  padding-bottom: .7rem; margin-bottom: 1.4rem; }
.ticket-room-head h2 { margin: 0 0 .35rem; }
.ticket-room-meta { font-size: 12.5px; color: var(--muted);
  display: flex; gap: 6px 16px; flex-wrap: wrap; align-items: center; }

.ticket-thread { display: flex; flex-direction: column; gap: 18px;
  margin: 0 0 1.6rem; }
.ticket-msg { display: flex; gap: 10px;
  max-width: min(78%, 520px); align-self: flex-end;
  margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.ticket-msg--naxis { align-self: flex-start; }
.ticket-avatar { width: 30px; height: 30px; border-radius: 99px; flex: none;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(22, 33, 43, .08);
  display: grid; place-items: center; margin-top: 17px; }
.ticket-avatar img { width: 19px; height: 19px; }
.ticket-msg-in { display: flex; flex-direction: column;
  align-items: flex-end; min-width: 0; }
.ticket-msg--naxis .ticket-msg-in { align-items: flex-start; }
.ticket-who { font-size: 11px; font-weight: 600; letter-spacing: .01em;
  text-transform: none; color: var(--faint); margin: 0 6px 5px; }
/* the client bubble: brand steel clay - flat fill, modelled by shadow */
.ticket-body { font-size: 14px; line-height: 1.55; overflow-wrap: anywhere;
  padding: 10px 14px; border-radius: 15px 15px 5px 15px;
  background: #2b628c; color: #fff;
  box-shadow:
    inset 1.5px 2px 3px rgba(255, 255, 255, .28),
    inset -2px -2.5px 5px rgba(13, 42, 64, .42),
    0 2px 4px rgba(22, 33, 43, .08),
    0 10px 20px -13px rgba(34, 84, 121, .5); }
.ticket-body a { color: #dcebf7; }
/* the naxis bubble: white clay, ink text */
.ticket-msg--naxis .ticket-body { border-radius: 15px 15px 15px 5px;
  background: #fff; color: var(--ink); border: 0;
  box-shadow:
    inset 0 0 0 1px rgba(34, 84, 121, .09),
    inset 1.5px 2px 3px rgba(255, 255, 255, .95),
    inset -2px -2.5px 5px rgba(34, 84, 121, .10),
    0 2px 4px rgba(22, 33, 43, .05),
    0 10px 20px -15px rgba(22, 33, 43, .22); }
.ticket-msg--naxis .ticket-body a { color: var(--brand); }

/* the composer */
.ticket-composer { display: flex; gap: 10px; align-items: flex-end;
  border-top: 1px solid var(--line); padding-top: 16px; }
.ticket-composer textarea { flex: 1; min-height: 3.3rem; resize: vertical;
  padding: .7rem .9rem; border: 1px solid var(--line-strong);
  border-radius: 14px; background: #fff; font: inherit; font-size: 14px;
  color: var(--ink); box-shadow: inset 0 1.5px 4px rgba(22, 33, 43, .05); }
.ticket-composer textarea:focus { outline: 2px solid var(--brand);
  outline-offset: 1px; border-color: var(--brand); }
.ticket-composer .btn { flex: none; }

/* the inbox: ruled thread rows, the whole row is the door */
.tlist { border-top: 1px solid var(--line-strong); }
.tlist-row { display: flex; align-items: center; gap: 14px;
  padding: 13px 4px; border-bottom: 1px solid var(--line);
  text-decoration: none; color: var(--ink); transition: background .13s ease; }
.tlist-row:hover { background: rgba(34, 84, 121, .04); text-decoration: none; }
.tlist-dot { width: 8px; height: 8px; border-radius: 99px; flex: none;
  background: var(--faint); box-shadow: 0 0 0 2.5px rgba(138, 151, 163, .16); }
.tlist-dot--open, .tlist-dot--in_progress { background: var(--brand);
  box-shadow: 0 0 0 2.5px rgba(34, 84, 121, .16); }
.tlist-dot--resolved, .tlist-dot--closed { background: #2f9e63;
  box-shadow: 0 0 0 2.5px rgba(47, 158, 99, .16); }
.tlist-main { min-width: 0; flex: 1; display: flex; flex-direction: column;
  gap: 2px; }
.tlist-main b { font-size: 14.5px; font-weight: 620; letter-spacing: -.008em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .13s ease; }
.tlist-row:hover .tlist-main b { color: var(--brand); }
.tlist-meta { font-size: 12px; color: var(--muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.tlist-when { font-size: 12px; color: var(--faint); flex: none;
  font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .ticket-msg { max-width: 92%; } }

/* ---------- team (workspace) ---------- */
.team-row { display: flex; align-items: center; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line); }
.team-row:last-child { border-bottom: 0; }
.team-row b { font-size: 14px; font-weight: 600; }
.team-row .mono { font-size: 12.5px; color: var(--muted); }
.team-row form { margin-left: auto; }
/* membership state: the dot idiom again, no pills */
.team-badge { display: inline-flex; align-items: center; gap: .45em;
  border: 0; background: transparent; border-radius: 0; padding: 0;
  font-size: 11.5px; font-weight: 620; letter-spacing: .02em;
  text-transform: none; color: var(--brand); }
.team-badge::before { content: ""; width: 6px; height: 6px; flex: none;
  border-radius: 99px; background: var(--brand);
  box-shadow: 0 0 0 2px rgba(34, 84, 121, .15); }
.team-badge--pending { color: var(--copper); }
.team-badge--pending::before { background: var(--copper);
  box-shadow: 0 0 0 2px rgba(168, 94, 36, .16); }
.btn-link { border: 0; background: none; font: inherit; font-size: 13px;
  color: var(--brand); cursor: pointer; padding: 0; }
.btn-link:hover { text-decoration: underline; }
.btn-link--danger { color: var(--danger, #b03a33); }

.account-foot { max-width: var(--acc-w); margin: 0 auto; width: 100%;
  padding: 18px 24px 26px; display: flex; gap: 18px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--faint);
  border-top: 1px solid var(--line); }
.account-foot a { color: var(--faint); }
.account-foot a:hover { color: var(--brand); }

/* ---------- plan switcher (billing page): ruled options ---------- */
.plan-switch { display: grid; gap: 0; border-top: 1px solid var(--line); }
.plan-switch-opt { display: flex; gap: 12px; align-items: flex-start;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  padding: 13px 4px; cursor: pointer; background: transparent;
  transition: background .14s ease, padding .14s ease; }
.plan-switch-opt:hover { background: rgba(34, 84, 121, .03); }
.plan-switch-opt.current { box-shadow: inset 3px 0 0 var(--brand);
  padding-left: 15px;
  background: linear-gradient(90deg, var(--brand-wash), transparent 72%); }
.plan-switch-opt input { margin-top: 3px; accent-color: var(--brand); }
.plan-switch-body small { display: block; color: var(--muted); margin-top: 2px; }
.plan-switch-foot { display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; margin-top: 14px; }
.hint-line { font-size: 12.5px; color: var(--muted); max-width: 34rem; }

/* ---------- usage page: an inset meter that fills on arrival ---------- */
.usage-meter { height: 9px; border-radius: 999px; background: var(--bg-dip);
  border: 1px solid var(--line);
  box-shadow: inset 0 1.5px 3px rgba(22, 33, 43, .07);
  overflow: hidden; margin: 4px 0 10px; }
.usage-meter span { display: block; height: 100%; border-radius: 999px;
  background: #2b628c;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .28),
              inset 0 -1px 2px rgba(13, 42, 64, .38); }
.usage-meter--warn span { background: #b07c14; }
.usage-meter--over span { background: #b03a33; }
.usage-line { margin: 0 0 1.2rem; font-size: 14px; }
.usage-line b { font-weight: 650; font-variant-numeric: tabular-nums; }
.usage-tables { display: grid; grid-template-columns: 1fr; gap: 22px 34px; }
@media (min-width: 700px) { .usage-tables { grid-template-columns: 3fr 2fr; } }
.usage-tables h3 { font-size: 11px; font-weight: 640; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 2px; }
.usage-table th.num, .usage-table td.num { text-align: right; }
.usage-table td.num { font-variant-numeric: tabular-nums; font-size: 13.5px; }
.usage-table td { white-space: nowrap; }
.usage-bar-col { width: 38%; }
.usage-day-bar { display: block; height: 5px; border-radius: 999px;
  background: var(--brand); opacity: .3; min-width: 2px; }

/* ---------- referrals: the pipeline, drawn in rules and figures ---------- */
/* the link row: the tool of the trade, sized like it matters */
.ref-linkrow { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
.ref-linkrow input { flex: 1; min-width: 15rem; padding: .78rem 1rem;
  border: 1px solid var(--line-strong); border-radius: 10px;
  background: #fff; font-size: 14.5px; font-weight: 560; color: var(--ink);
  letter-spacing: -.006em;
  box-shadow: inset 0 1.5px 4px rgba(22, 33, 43, .05); }
.ref-linkrow input:focus { outline: 2px solid var(--brand);
  outline-offset: 1px; border-color: var(--brand); }
.ref-linkrow .btn { white-space: nowrap; }

/* the two shares, set as figures a salesperson reads across the room */
.ref-pct { display: block; font-size: 2.7rem; font-weight: 640;
  line-height: 1; letter-spacing: -.035em; color: var(--brand);
  font-variant-numeric: tabular-nums; margin-bottom: .55rem; }
.ref-offer-col--alt .ref-pct { color: var(--ink); }
.ref-offer-col > b { display: block; font-size: .95rem; font-weight: 640;
  letter-spacing: -.008em; margin-bottom: .45rem; }

/* the funnel: five measured stages on ruled columns, arrows carry the flow */
.ref-pipe { display: flex; align-items: stretch; gap: 16px; }
.ref-stage { flex: 1; min-width: 0; background: transparent;
  border: 0; border-top: 1px solid var(--line-strong); border-radius: 0;
  padding: 10px 2px 0; box-shadow: none; }
.ref-stage b { display: block; font-size: 1.45rem; font-weight: 640;
  line-height: 1.12; letter-spacing: -.02em; color: var(--faint);
  font-variant-numeric: tabular-nums; }
.ref-stage.is-live b { color: var(--ink); }
.ref-stage.is-live { border-top: 2px solid var(--brand); }
.ref-stage span { display: block; font-size: 10px; font-weight: 620;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin-top: 4px; }
.ref-arrow { align-self: center; color: var(--faint); font-style: normal;
  font-size: 13px; flex: none; }

/* the three steps, numbered like a quiet manual, on ruled columns */
.ref-steps { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px 32px; }
.ref-step { border: 0; border-top: 1px solid var(--line-strong);
  border-radius: 0; padding: 13px 2px 0; background: transparent; }
.ref-step-n { display: grid; place-items: center;
  width: 24px; height: 24px; line-height: 1; border-radius: 50%;
  border: 1px solid var(--line-strong); background: #fff;
  box-shadow: 0 1px 2px rgba(22, 33, 43, .06);
  font-size: 11.5px; font-weight: 650; color: var(--brand);
  margin-bottom: 9px; font-variant-numeric: tabular-nums;
  padding: 0; text-align: center; }
.ref-step b { display: block; font-size: .92rem; margin-bottom: 4px; }
.ref-step span { display: block; font-size: 13px; color: var(--muted);
  line-height: 1.55; }

/* one referral: head line, the three-month earning track, the payout mode.
   Referrals separate with a rule, never a box. */
.ref-row { border: 0; border-radius: 0; background: transparent;
  padding: 0 0 18px; margin: 0 0 18px;
  border-bottom: 1px solid var(--line); }
.ref-row:last-child { margin-bottom: 0; border-bottom: 0; padding-bottom: 4px; }
.ref-row-head { display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 11px; }
.ref-row-head b { font-size: .95rem; }
.ref-row-earned { margin-left: auto; font-size: 12.5px; font-weight: 600;
  color: var(--muted); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.ref-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ref-slot { border-top: 2px solid var(--line); padding-top: 7px; min-width: 0; }
.ref-slot-m { display: block; font-size: 10px; font-weight: 620;
  letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.ref-slot-main { display: block; font-size: 13.5px; color: var(--muted);
  margin-top: 3px; line-height: 1.45; }
.ref-slot-sub { display: block; font-size: 12px; color: var(--faint);
  margin-top: 1px; line-height: 1.45; }
.ref-slot.is-done { border-top-color: var(--brand); }
.ref-slot.is-done .ref-slot-main { color: var(--ink); font-weight: 600; }
.ref-slot.is-open { border-top-color: var(--copper); }
.ref-slot.is-open .ref-slot-main { color: var(--ink); }
.ref-slot.is-void { border-top-color: var(--line); }
.ref-slot.is-void .ref-slot-main { color: var(--faint);
  text-decoration: line-through; }

/* the payout choice: a soft inset segment, the raised side is the choice */
.ref-modeform { display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-top: 12px; }
.ref-mode { display: inline-flex; border: 1px solid var(--line);
  border-radius: 999px; overflow: hidden; background: var(--bg-dip);
  padding: 3px; gap: 2px;
  box-shadow: inset 0 1.5px 4px rgba(22, 33, 43, .07); }
.ref-mode button { border: 0; background: transparent;
  font: 600 12.5px/1.2 var(--font-sans); border-radius: 999px;
  padding: 6px 14px; color: var(--muted); cursor: pointer;
  transition: color .13s ease, background .13s ease, box-shadow .13s ease; }
.ref-mode button + button { border-left: 0; }
.ref-mode button:hover { color: var(--ink); }
.ref-mode button.is-on { background: #fff; color: var(--brand-deep);
  font-weight: 640;
  box-shadow: inset 1px 1.5px 2px rgba(255, 255, 255, .95),
              inset -1.5px -2px 4px rgba(34, 84, 121, .12),
              0 1px 3px rgba(22, 33, 43, .12); }
.ref-modeform .account-note { margin: 0; font-size: 12.5px; }
.ref-modeform-label { font-size: 11px; font-weight: 640; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); }

/* the area's own quiet control: the same bordered white as the site */
.rbtn { display: inline-flex; align-items: center; gap: .4em;
  border: 1px solid var(--line-strong); background: #fff; color: var(--ink);
  border-radius: 10px; padding: 8px 15px;
  font: 600 13px/1.2 var(--font-sans);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: color .14s ease, background-color .14s ease,
              border-color .14s ease; }
.rbtn:hover { color: var(--ink); background: var(--bg-tint);
  border-color: var(--faint); text-decoration: none; }
.rbtn:active { background: var(--bg-tint); }

/* the area chrome: kicker over the h1, then the section tabs.
   .acc-subtabs is the same idiom serving Support and Settings (07-24). */
.ref-kicker { display: block; font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--copper); margin: 0 0 .55rem; }
.ref-tabs, .acc-subtabs { display: flex; gap: 22px;
  border-bottom: 1px solid var(--line); margin: 0 0 1.25rem;
  overflow-x: auto; scrollbar-width: none;
  touch-action: pan-x; overscroll-behavior-x: contain; }
.ref-tabs::-webkit-scrollbar, .acc-subtabs::-webkit-scrollbar { display: none; }
.ref-tabs a, .acc-subtabs a { padding: 7px 1px 9px; font-size: 13.5px;
  font-weight: 560; white-space: nowrap;
  color: var(--muted); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .13s ease, border-color .13s ease; }
.ref-tabs a:hover, .acc-subtabs a:hover { color: var(--ink);
  text-decoration: none; border-bottom-color: var(--line-strong); }
.ref-tabs a.is-on, .acc-subtabs a.is-on { color: var(--ink); font-weight: 620;
  border-bottom-color: var(--brand); }
.acc-subtabs { margin-top: .2rem; }

/* the quiet search well used over threads and the documents */
.acc-search { position: relative; margin: 0 0 16px; }
.acc-search input { width: 100%; padding: .58rem .9rem .58rem 2.35rem;
  border: 1px solid var(--line-strong); border-radius: 10px;
  background: #fff; font: inherit; font-size: 14px; color: var(--ink);
  box-shadow: inset 0 1.5px 4px rgba(22, 33, 43, .05); }
.acc-search input:focus { outline: 2px solid var(--brand);
  outline-offset: 1px; border-color: var(--brand); }
.acc-search svg { position: absolute; left: 12px; top: 50%; width: 15px;
  height: 15px; transform: translateY(-50%); color: var(--faint);
  pointer-events: none; }
.acc-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.acc-none { font-size: 13.5px; color: var(--muted); padding: 12px 2px;
  border-bottom: 1px solid var(--line); margin: 0; }

/* the programme page's offer, two ruled columns side by side */
.ref-offer { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 44px; }
.ref-offer-col { background: transparent; border: 0;
  border-top: 1px solid var(--line-strong); border-radius: 0;
  padding: 13px 2px 0; }
.ref-offer-head { display: flex; align-items: center; gap: 10px;
  margin-bottom: 7px; }
.ref-offer-head b { font-size: .95rem; }
.ref-offer-col p { margin: 0; font-size: 13.5px; color: var(--muted);
  line-height: 1.6; }
.ref-offer-col p a { color: var(--brand); }

/* the slim status band pointing at Activity: a ruled line, not a band */
.ref-statusline { display: flex; align-items: center; gap: 1rem;
  flex-wrap: wrap; justify-content: space-between;
  border-top: 1px solid var(--line-strong); padding-top: 14px; }
.ref-statusline p { margin: 0; font-size: 13.5px; color: var(--muted); }
.ref-statusline p b { color: var(--ink); }
.ref-attn { color: var(--copper); font-weight: 600; }

/* the credit figure on Payouts */
.ref-balance { font-size: 1.9rem; font-weight: 640; letter-spacing: -.026em;
  margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }

@media (max-width: 700px) {
  .ref-offer { grid-template-columns: 1fr; }
  .ref-statusline { align-items: flex-start; flex-direction: column; }
}

/* sections flow in one column */
.ref-grid { display: grid; grid-template-columns: 1fr; gap: 0;
  align-items: start; margin-bottom: 0; }
.ref-grid .account-card { margin-bottom: 3.1rem; }

.ref-fineprint { margin: 2px 0 0; }
.ref-fineprint summary { cursor: pointer; font-size: 12px; font-weight: 640;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
  padding: 6px 0; }
.ref-fineprint summary:hover { color: var(--ink); }
.ref-fineprint[open] summary { margin-bottom: 4px; }

@media (max-width: 700px) {
  .ref-arrow { display: none; }
  .ref-pipe { display: grid; grid-template-columns: repeat(2, 1fr); }
  .ref-steps { grid-template-columns: 1fr; }
  .ref-track { grid-template-columns: 1fr; gap: 8px; }
  .ref-row-earned { margin-left: 0; width: 100%; }
}

/* ---------- controls ----------
   2026-07-24 (rev): ONLY the blue primary wears the steel clay - one flat
   matte fill modelled entirely by shadow, hover lifts a millimetre, press
   sets it back into the ground (founder, 07-23/24). The white buttons
   (ghost, Google) and the red danger keep the site's own quiet dress from
   main.css - the founder asked for the blue design alone to change. */
.account-body .btn {
  border: 0; border-radius: 12px;
  background: #2b628c; color: #fff; text-shadow: none;
  box-shadow:
    inset 2px 2.5px 4px rgba(255, 255, 255, .32),
    inset -2.5px -3.5px 7px rgba(13, 42, 64, .46),
    0 2px 4px rgba(22, 33, 43, .10),
    0 12px 24px -12px rgba(34, 84, 121, .5);
  transition: transform .12s ease, box-shadow .16s ease,
              background-color .16s ease, color .16s ease;
}
.account-body .btn:hover { background: #2e6997; color: #fff;
  transform: translateY(-1px);
  box-shadow:
    inset 2px 2.5px 4px rgba(255, 255, 255, .34),
    inset -2.5px -3.5px 7px rgba(13, 42, 64, .44),
    0 4px 8px rgba(22, 33, 43, .10),
    0 16px 30px -13px rgba(34, 84, 121, .55); }
.account-body .btn:active { background: #275a82;
  transform: translateY(1px);
  box-shadow:
    inset 2.5px 3px 6px rgba(13, 42, 64, .34),
    inset -1.5px -2px 5px rgba(255, 255, 255, .14),
    0 1px 2px rgba(22, 33, 43, .10); }
.btn--sm { font-size: .875rem; padding: .5em .95em; border-radius: 10px; }
/* the white buttons stay the site's own: quiet bordered white, no clay */
.account-body .btn--ghost { background: #fff; color: var(--ink);
  border: 1px solid var(--line-strong); box-shadow: none;
  transform: none; }
.account-body .btn--ghost:hover { background: var(--bg-tint); color: var(--ink);
  border-color: var(--faint); box-shadow: none; transform: none; }
.account-body .btn--ghost:active { background: var(--bg-tint);
  box-shadow: none; transform: none; }
/* danger keeps the site's flat red */
.account-body .btn--danger { background: #b3362a; box-shadow: none; }
.account-body .btn--danger:hover { background: #9a2d23; box-shadow: none;
  transform: none; }
.account-body .btn--danger:active { background: #9a2d23; box-shadow: none;
  transform: none; }
/* the Google door: the familiar white face from main.css */
.account-body .btn--google { color: var(--ink); text-shadow: none;
  background: #fff; border: 1px solid var(--line); box-shadow: none; }
.account-body .btn--google:hover { color: var(--ink); background: var(--bg-tint);
  border-color: var(--faint); box-shadow: none; transform: none; }

/* the pane's phone geometry handled above; tighter page padding here */
@media (max-width: 700px) {
  .account-main { padding: 18px 16px 56px; }
  .account-foot { padding: 16px 16px 24px; }
  .doc-sheet { padding: 18px 18px 16px; }
  .doc-sheet__no { top: 13px; right: 14px; }
  .doc-flip { width: 34px; height: 34px; margin-top: -17px; }
  .doc-flip--prev { left: -9px; }
  .doc-flip--next { right: -9px; }
}

/* ================= Support: the guided new-thread form =================
   The contact machinery (.ctcf, main.css) flowing BARE in the account
   column - no shell, no card, the pane aligned under the subtabs line.
   At this width the step rail runs HORIZONTALLY across the top (both
   steps side by side, summaries kept); the panes take the full column
   so the tiles pair comfortably. account.js arms it (ticketSteps). */
.account-body .tkf { padding-top: .35rem; }
.tkf .ctcf-grid { display: block; }
.tkf .ctcf-rail {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  position: relative; margin-bottom: 1.35rem;
}
.tkf .ctcf-rail::before {
  left: 44px; right: calc(50% + 44px); top: 16px; bottom: auto;
  width: auto; height: 2px;
}
.tkf .ctcf-rail__item { padding: 0; }
.tkf .ctcf-topics .ctcf-topic:last-child { grid-column: auto; }
@media (max-width: 560px) {
  .tkf .ctcf-rail__sub { display: none; }
}