/* ============================================================
   Agencies page (/agencies/). Loads after home.css (hero, reel, Team Rooms,
   steps, privacy strip, FAQ) and support.css (the form fields, spam check,
   status line and the founder line). This file is only what is new: the
   hero's pricing button, the try-it link and one-phone picture, the note under the founder,
   and the agency login page at the end.
   ============================================================ */

/* the hero picture is one iPhone (the agency app has no Apple Watch app), sized so it
   stands as tall as the homepage's phone and watch picture */
.ag .stage--solo { width:clamp(220px,64vw,300px); }
@media (min-width:900px) { .ag .stage--solo { width:min(100%,400px); } }

/* the hero's main action: request pricing (not the App Store badge) */
.ag-cta { min-height:56px; padding:0 30px; font-size:17px; }
.ag-try { margin-top:14px; text-align:center; }
.ag-try a { display:inline-flex; align-items:center; gap:6px; min-height:44px; font-size:15px; font-weight:600; color:var(--accent); }
@media (hover:hover) and (pointer:fine) { .ag-try a:hover { text-decoration:underline; text-underline-offset:4px; } }

/* the request form: the pitch (who answers, what happens next) and the form in its
   own panel. Phones: one column, pitch first. Computers (1000px+): pitch left, form
   right, the shorter side centered against the taller one, headings left-aligned. */
.ag-contact .sp-who { margin-top:20px; }
.ag-contact__note { margin-top:10px; font-size:15px; color:var(--t-60); }
.ag-duo { display:grid; row-gap:36px; }
.ag-next { margin:28px auto 0; max-width:440px; display:grid; gap:14px; counter-reset:step; text-align:left; }
.ag-next li { display:grid; grid-template-columns:28px minmax(0,1fr); column-gap:14px; align-items:start; font-size:16px; line-height:1.5; color:var(--t-75); }
.ag-next li::before { counter-increment:step; content:counter(step); width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  font-size:13px; font-weight:700; color:var(--accent); background:var(--accent-fill); box-shadow:inset 0 0 0 1px var(--accent-border); }
.ag-alt { margin-top:28px; }
.ag-formcard { padding:24px 18px 22px; border-radius:24px; background:rgba(255,255,255,.025); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 30px 80px -40px rgba(97,224,175,.18); }
.ag-formcard .sup-form { margin-top:0; gap:16px; }
.ag-formcard .sup-pair { gap:16px; }
.ag-formcard .sup-send { margin-top:4px; }
.ag-contact .sup-form[hidden] { display:none; }
.ag-formcard > .sup-status { margin:4px 0; font-size:17px; }

@media (min-width:900px) {
  .ag-try { text-align:left; }
  .ag .privacy .more-link { text-align:center; }
}
@media (min-width:1000px) {
  .ag-contact { padding:var(--sec) 0; }
  .ag-duo { grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:clamp(56px,7vw,120px); align-items:center; }
  .ag-pitch .sp-head { text-align:left; }
  .ag-pitch .sp-head .h2 { margin-inline:0; }
  .ag-next { margin-inline:0; }
  .ag-alt { text-align:left; }
  .ag-formcard { padding:36px 36px 32px; }
}

/* ---------- agency login (/agencies/login/, 2026-10-10) ----------
   Modeled on the best dark sign-in pages on Mobbin (Resend, Neon, Leonardo, Unity, Better
   Stack), in LOC8's look: the form sits straight on the black page (no box), beside it on
   computers the agency brochure's cover art (the real LOC8 logo in 3D), and under both a quiet row
   on how accounts work. Phones: the form, the scene, the steps. Sign up is a short link and
   two steps, so every view
   shows two rows. Nothing moves when the view changes (owner: "Make sure when swapping to
   create account we're not shifting ui sizing"): the page script holds the field box at the
   tallest view's height and the note line at its longest message's height, the headline and
   the line under it stay one line, and the button stays put. */
.lgx { padding:calc(var(--header) + 49px) 0 var(--sec); }
/* the same soft mint light at the top as every page's hero (.ph::before) */
.lgx::before { content:""; position:absolute; inset:0 0 auto 0; height:min(720px, 90vh); z-index:-1; pointer-events:none;
  background:radial-gradient(60% 45% at 50% 0%, rgba(97,224,175,.10), transparent 72%); }
.lgx__grid { display:grid; row-gap:0; }
.lgx__form { width:100%; max-width:420px; margin-inline:auto; text-align:center; }
.lgx__form .kicker { display:block; }
.lgx__title { white-space:nowrap; }
.lgx__switch { margin-top:12px; font-size:17px; line-height:1.4; color:var(--t-60); }
.lgx__switch .lg-link { font-size:17px; min-height:44px; padding:0 2px; }
.lg-soon { margin:20px 2px 0; min-height:calc(2 * 1.45em); display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.45; color:var(--t-60); text-align:left; }
.lg-soon__dot { flex:0 0 auto; width:8px; height:8px; margin-top:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent-glow); transition:background var(--dur) var(--ease); }
.lg-soon[data-tone="info"] { color:var(--t-80); }
.lg-soon[data-tone="err"] { color:var(--err); }
.lg-soon[data-tone="err"] .lg-soon__dot { background:var(--err); box-shadow:0 0 10px rgba(255,138,128,.45); }
.lg-soon a { color:var(--accent); text-decoration:underline; text-decoration-color:rgba(97,224,175,.4); text-underline-offset:3px; }
/* when the page brings a message into view, it stops below the fixed header */
.lg-soon { scroll-margin-top:calc(var(--header) + env(safe-area-inset-top) + 16px); }
.lg-form { margin-top:22px; display:flex; flex-direction:column; gap:16px; text-align:left; }
.lg-fields { display:flex; flex-direction:column; justify-content:flex-end; gap:16px; }
/* the message line sits between the fields and the button (2026-10-11): the fields of a shorter view
   settle at the bottom of their held box, so a message is always right under them */
.lg-form .lg-soon { margin:0 2px; min-height:1.45em; }
/* empty until there is a message: no dot */
.lg-soon:not([data-tone="info"]):not([data-tone="err"]) .lg-soon__dot { visibility:hidden; }
/* who the page is for, a quiet line under New here? (2026-10-11) */
.lgx__note { margin-top:4px; font-size:15px; line-height:1.45; color:var(--t-45); }
/* which rows each view shows */
.lg-fields > .v-signin, .lg-fields > .v-details, .lg-fields > .v-reset, .lg-fields > .v-email, .lg-fields > .v-pass,
.lg-fields > .v-verify, .lg-fields > .v-code, .lg-fields > .v-resend { display:none; }
.lg-form[data-mode="signin"] .v-signin, .lg-form[data-mode="signin"] .v-email, .lg-form[data-mode="signin"] .v-pass,
.lg-form[data-mode="signup"] .v-email, .lg-form[data-mode="signup"] .v-pass,
.lg-form[data-mode="details"] .v-details,
.lg-form[data-mode="reset"] .v-reset, .lg-form[data-mode="reset"] .v-email,
.lg-form[data-mode="verify"] .v-verify, .lg-form[data-mode="verify"] .v-code, .lg-form[data-mode="verify"] .v-resend,
.lg-form[data-mode="newpass"] .v-code, .lg-form[data-mode="newpass"] .v-pass, .lg-form[data-mode="newpass"] .v-resend { display:block; }
/* the address the code went to: its own line, cut with an ellipsis, so a long address never adds a
   line. The form column and the note may shrink below that unbroken line, or a long address would
   widen the page past a phone's edge. */
.lgx__form, .lg-fields, .lg-view__note { min-width:0; }
.lg-addr { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--t-80); font-weight:600; }
.lg-form .lg-code { letter-spacing:.22em; font-variant-numeric:tabular-nums; font-weight:600; }
/* working: a small spinner at the button's right edge; the label and the button stay where they are */
.lg-form .sup-send, .acx .sup-send { position:relative; }
.sup-send.is-busy[disabled] { opacity:.88; }
.sup-send.is-busy::after { content:""; position:absolute; right:22px; top:50%; width:18px; height:18px; margin-top:-9px; border-radius:50%;
  border:2px solid rgba(4,19,13,.22); border-top-color:#04130d; animation:lg-spin .7s linear infinite; }
@keyframes lg-spin { to { transform:rotate(360deg); } }
.lg-view__note { font-size:15px; line-height:1.45; color:var(--t-60); }
.fld--pass .fld__control { padding-right:76px; }
.lg-eye { position:absolute; right:6px; top:50%; z-index:2; transform:translateY(-50%); min-width:56px; min-height:44px; padding:0 10px; border-radius:10px; font-size:14px; font-weight:600; color:var(--accent); }
.lg-form .lg-forgot { margin-top:-10px; text-align:right; }
/* Remember me (2026-10-11): the left of the Forgot password? row */
/* joining an agency from its invite (2026-10-11): the title carries the agency's name, so it may wrap (balanced),
   a size down, and never runs off the screen; the screen waits a moment for that name (never a jump) */
.lgx__title.lgx__title--join { white-space:normal; text-wrap:balance; overflow-wrap:anywhere; font-size:clamp(1.9rem,7.6vw,2.6rem); }
@media (min-width:1000px) { .lgx__title.lgx__title--join { font-size:clamp(40px,3.3vw,48px); } }
.lgx__form[data-wait] { visibility:hidden; }
/* no agency to type; the invited address shown fixed */
.lg-form[data-join][data-mode] .v-agency { display:none; }
.lg-form .fld__control[readonly] { color:var(--t-75); cursor:default; }
.lg-form[data-mode="signin"] .lg-forgot--split { display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:left; }
.lg-remember { display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 2px; font-size:14px; font-weight:600; color:var(--t-80); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.lg-remember__box { -webkit-appearance:none; appearance:none; flex:0 0 auto; width:20px; height:20px; margin:0; display:grid; place-content:center; border-radius:6px;
  border:1.5px solid rgba(255,255,255,.28); background:rgba(255,255,255,.04); cursor:pointer; transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.lg-remember__box::after { content:""; width:10px; height:5px; margin-top:-2px; border:2px solid #0a0a0a; border-top:0; border-right:0; transform:rotate(-45deg) scale(0); transition:transform var(--dur) var(--ease); }
.lg-remember__box:checked { background:var(--accent); border-color:var(--accent); }
.lg-remember__box:checked::after { transform:rotate(-45deg) scale(1); }
.lg-remember__box:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media (prefers-reduced-motion:reduce) { .lg-remember__box, .lg-remember__box::after { transition:none; } }
.lg-link { min-height:44px; padding:0 4px; font-size:14px; font-weight:600; color:var(--accent); }
.lg-link:disabled { color:var(--t-45); cursor:default; text-decoration:none; font-variant-numeric:tabular-nums; }
@media (hover:hover) and (pointer:fine) { .lg-link:hover { text-decoration:underline; text-underline-offset:4px; } }
.lg-terms { padding:0 4px; font-size:13px; line-height:1.45; color:var(--t-60); }
.lg-terms a { color:var(--t-80); text-decoration:underline; text-decoration-color:rgba(255,255,255,.3); text-underline-offset:3px; }
.lg-form .sup-send { margin-top:0; }

/* beside the form: the art, the agency brochure's cover (the LOC8 logo in brushed silver over a
   dark city with mint streets). Owner, on an AI pin that was not the logo: "That's not our logo".
   No box around it (owner: "I hate the square look"): it fades into the page, and on phones it
   runs edge to edge under the form. */
.lgx__art { width:calc(100% + 2 * var(--pad)); max-width:600px; margin:-12px calc(-1 * var(--pad)) -56px; justify-self:center; pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side, #000 60%, transparent 100%); mask-image:radial-gradient(closest-side, #000 60%, transparent 100%); }
.lgx__art img { position:relative; display:block; width:100%; height:auto; }
/* until the art lands it shows a blur of itself (a 20 px copy inline, 216 bytes), so a slow phone
   connection never shows an empty space that pops (2026-10-11); the image paints over it */
.lgx__art { position:relative; }
.lgx__art::before { content:""; position:absolute; inset:0; background:url("data:image/webp;base64,UklGRpgAAABXRUJQVlA4IIwAAADQBACdASoUABQAPtFYpUyoJSOiKA1RABoJYwAD5SkK/vIa2vyeqTl9weI2yI1oAAD+93OlZGdtBUIGUXMoY/9vBaGSxxLqiLuDHQjOaGl/QV3PBdjWvTwbv5qwA4zR6YANq3z/9l5dZ7TP0t+t0nogVyunkrpgfJMrE0OJ68JqypbX6GKE+XNJ19QAAA==") center / 100% 100% no-repeat;
  filter:blur(18px); }

/* how agency accounts work: one quiet row under the form and the art */
.lgx-steps { padding:0 0 var(--sec); }
.lgx-steps .kicker { display:block; text-align:center; }
.lgx-steps__list { margin:24px auto 0; max-width:420px; display:grid; gap:20px; }
.lgx-steps__list li { display:grid; grid-template-columns:28px minmax(0,1fr); column-gap:14px; align-items:start; text-align:left; }
.lgx-steps__n { grid-row:span 2; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:700; color:var(--accent);
  background:var(--accent-fill); box-shadow:inset 0 0 0 1px var(--accent-border); }
.lgx-steps__list h3 { font-size:17px; font-weight:700; line-height:1.3; letter-spacing:-.005em; color:var(--fg); }
.lgx-steps__list p { margin-top:2px; font-size:15px; line-height:1.45; color:var(--t-60); }

/* softer, rounder fields than the Support form's, so nothing on this page reads as a square box */
.lg-form .fld__control { border-radius:20px; border-color:rgba(255,255,255,.09); background:rgba(255,255,255,.04); }
/* a field that needs fixing: red edge, and its label says what to do (same size, nothing moves) */
.lg-form .fld__control[aria-invalid="true"] { border-color:rgba(255,138,128,.75); box-shadow:0 0 0 4px rgba(255,138,128,.10); }
.lg-form .fld__label.is-err { color:var(--err); }
/* iOS and Chrome paint autofilled fields; keep them this page's field color */
.lg-form .fld__control:-webkit-autofill { -webkit-box-shadow:0 0 0 1000px #0a0a0a inset; }
.lg-form .fld__control:-webkit-autofill:focus { -webkit-box-shadow:0 0 0 1000px #0a0a0a inset, 0 0 0 4px rgba(97,224,175,.12); }

@media (min-width:900px) { .lgx { padding-top:calc(var(--header) + 88px); } }
/* computers: form left, art right; the form never changes height, so centering it against
   the art never moves it. Everything steps up a size here (owner: "Let's make this larger
   design on desktop"): a bigger headline, taller fields and button, and the art drawn larger
   than its column, spilling into the gap and the right margin where it fades out (negative
   margins, so it does not make the section taller). Phones are unchanged. */
@media (min-width:1000px) {
  .lgx__grid { grid-template-columns:minmax(0,480px) minmax(0,1fr); justify-content:center; column-gap:clamp(40px,4vw,72px); align-items:center; }
  .lgx__form { max-width:480px; margin-inline:0; text-align:left; }
  .lgx__form .kicker { font-size:13px; }
  .lgx__title { margin-top:22px; font-size:clamp(56px,4.4vw,64px); }
  .lgx__switch, .lgx__switch .lg-link { font-size:19px; }
  .lgx__note { font-size:16px; }
  .lg-soon { margin-top:24px; font-size:15px; }
  .lg-soon__dot { margin-top:7px; }
  .lg-form { margin-top:28px; gap:18px; }
  .lg-fields { gap:18px; }
  .lg-form .fld__control { min-height:74px; padding:36px 20px 13px; font-size:18px; border-radius:22px; }
  .lg-form .fld__label { top:14px; left:21px; font-size:14px; }
  .lg-eye { right:10px; font-size:15px; }
  .fld--pass .fld__control { padding-right:84px; }
  .lg-link { font-size:15px; }
  .lg-remember { font-size:15px; }
  .lg-view__note { font-size:17px; }
  .lg-terms { font-size:14px; }
  .lg-form .sup-send { min-height:64px; font-size:18px; }
  /* the art's faded outer ring may pass the screen edge; clip it here, never a sideways scroll */
  .lgx { overflow-x:clip; }
  .lgx__art { width:calc(100% + 100px); max-width:none; margin:-40px -60px -40px -40px; }
}
@media (min-width:1400px) {
  .lgx__grid { grid-template-columns:minmax(0,500px) minmax(0,1fr); }
  .lgx__form { max-width:500px; }
  .lgx__art { width:calc(100% + 220px); margin:-80px -170px -80px -50px; }
}
@media (min-width:1000px) {
  .lgx-steps__list { max-width:980px; grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:40px; }
  .lgx-steps__list h3, .lgx-steps__list p { white-space:nowrap; }
}
@media (min-width:1200px) {
  .lgx-steps { padding-top:24px; }
  .lgx-steps .kicker { font-size:13px; }
  .lgx-steps__list { max-width:1120px; margin-top:32px; column-gap:48px; }
  .lgx-steps__list li { grid-template-columns:34px minmax(0,1fr); column-gap:16px; }
  .lgx-steps__n { width:34px; height:34px; font-size:14px; }
  .lgx-steps__list h3 { font-size:20px; }
  .lgx-steps__list p { margin-top:4px; font-size:16px; }
}

/* ---------- agency account (/agencies/account/, 2026-10-10) ----------
   A small app after the best account, billing and settings pages on Mobbin. Owner: "Everything is
   straight up and down… look at what Mobbin has… and then go that route", then "on the left side…
   a navigation section: Dashboard, Billing and Support, Settings". Computers (1000px+): a sticky left
   column with who is signed in, the three sections and Sign out, beside the title and the view.
   Phones and tablets: the sections as a segmented tab bar pinned under the site header (it never
   moves when the view changes), then the title and the view. A mint highlight slides to the chosen
   section. Dashboard: stat cards (seats in use, devices checked in, how
   long access runs; Relevance AI, Peec AI, Remote), the invitation code and the plan; a new account
   gets a setup card with progress and three steps (SchoolAI, Square). Billing & Support: the plan,
   seats and help. Settings: profile (first and last name, the agency locked), email, password and
   sign out (Better Stack, Posh, Vercel). Soft, rounded dark cards, never square boxes (the owner's
   word on the login page), and the site's mint for state. Sizes step up at 1000 and 1900 like the
   login page. */
.acx { --hair:rgba(255,255,255,.09); padding:calc(var(--header) + 14px) 0 var(--sec); }
.acx::before { content:""; position:absolute; inset:0 0 auto 0; height:min(720px, 90vh); z-index:-1; pointer-events:none;
  background:radial-gradient(60% 45% at 50% 0%, rgba(97,224,175,.10), transparent 72%); }
.acx-app { display:flex; flex-direction:column; }
.acx-head { min-width:0; }
.acx .kicker { display:block; line-height:1.35; }
.acx__title { margin-top:14px; font-size:clamp(30px, 7.6vw, 44px); line-height:1.08; letter-spacing:-.022em; overflow-wrap:anywhere; }
/* under the title: the status pill and address on the dashboard, one quiet line on the other views;
   the same height either way, so switching views never moves the page */
.acx__who { margin-top:14px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; min-height:30px; font-size:15px; line-height:1.4; color:var(--t-60); }
.acx__email { min-width:0; overflow-wrap:anywhere; }
.acx__sub { font-size:16px; color:var(--t-60); }
.acx-pill { display:inline-flex; align-items:center; gap:8px; min-height:30px; padding:0 13px 0 11px; border-radius:999px; font-size:13px; font-weight:700; letter-spacing:.02em;
  color:var(--t-80); background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.10); }
.acx-pill[data-tone="ok"] { color:var(--accent); background:var(--accent-fill); box-shadow:inset 0 0 0 1px var(--accent-border); }
.acx-pill[data-tone="wait"] { color:#E8C468; background:rgba(232,196,104,.10); box-shadow:inset 0 0 0 1px rgba(232,196,104,.30); }
.acx-pill[data-tone="err"] { color:var(--err); background:rgba(255,138,128,.10); box-shadow:inset 0 0 0 1px rgba(255,138,128,.32); }
.acx__dot { flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 10px currentColor; }
.acx-pill[hidden], .acx__email[hidden], .acx__sub[hidden], .lg-link[hidden] { display:none; }

/* the sections. Phones and tablets: a segmented tab bar first, pinned under the site header while the
   page scrolls (frosted, so cards pass under it cleanly); the chosen one is lit by a mint highlight
   that slides across (--i is the chosen section, set by the script) */
.acx-side { order:-1; position:sticky; top:calc(var(--header) + env(safe-area-inset-top) + 8px); z-index:20; margin-bottom:26px; min-width:0; }
.acx-side__me { display:none; }
.acx-nav { --i:0; --n:3; position:relative; display:grid; grid-template-columns:repeat(var(--n), minmax(0,1fr)); gap:4px; padding:4px; border-radius:999px;
  background:rgba(17,17,19,.78); -webkit-backdrop-filter:saturate(1.4) blur(18px); backdrop-filter:saturate(1.4) blur(18px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09), 0 14px 30px -16px rgba(0,0,0,.9); }
.acx-nav::before { content:""; position:absolute; top:4px; bottom:4px; left:4px; width:calc((100% - (var(--n) + 1) * 4px) / var(--n)); border-radius:999px; pointer-events:none;
  background:var(--accent-fill); box-shadow:inset 0 0 0 1px var(--accent-border); transform:translate3d(calc(var(--i) * (100% + 4px)), 0, 0); }
.acx-nav.is-live::before { transition:transform .42s cubic-bezier(.2,.8,.2,1); }
.acx-nav__item { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:7px; min-width:0; min-height:44px; padding:0 6px; border-radius:999px;
  font-size:14px; font-weight:600; line-height:1.2; color:var(--t-60); white-space:nowrap; transition:color var(--dur) var(--ease); }
.acx-nav__item[aria-current="page"] { color:var(--accent); }
.acx-nav__item:focus-visible { border-radius:999px; outline-offset:-2px; }
@media (hover:hover) and (pointer:fine) { .acx-nav__item:not([aria-current="page"]):hover { color:var(--fg); } }
.acx-nav__icon { flex:0 0 auto; width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.acx-nav__long { display:none; }
.acx-nav__item[hidden] { display:none; }
@media (max-width:389px) { .acx-nav__icon { display:none; } }


/* a quiet pill button (Sign out, Change, Email us); the mint one is a card's main action */
.acx-btn { position:relative; display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 18px; border-radius:999px; font-size:15px; font-weight:600; white-space:nowrap;
  color:var(--fg); background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); transition:background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease); }
@media (hover:hover) and (pointer:fine) { .acx-btn:not(:disabled):hover { background:rgba(255,255,255,.10); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); } }
.acx-btn--mint { color:#04130d; background:var(--accent); box-shadow:0 0 0 1px rgba(97,224,175,.4); }
@media (hover:hover) and (pointer:fine) { .acx-btn--mint:not(:disabled):hover { background:#7ce8bf; box-shadow:0 8px 26px -10px var(--accent-glow), 0 0 0 1px var(--accent); } }
.acx-btn:disabled { opacity:.45; cursor:default; }
/* working: the label holds its place (so the button keeps its size) and a spinner turns in the middle */
.acx-btn.is-busy, .acx-btn.is-busy:disabled { color:transparent; opacity:1; }
.acx-btn.is-busy::after { content:""; position:absolute; left:50%; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%;
  border:2px solid rgba(255,255,255,.22); border-top-color:#fff; animation:lg-spin .7s linear infinite; }
.acx-btn--mint.is-busy::after { border-color:rgba(4,19,13,.22); border-top-color:#04130d; }

.acx__body { margin-top:22px; min-width:0; }
.acx-card { --pt:24px; --pb:26px; position:relative; min-width:0; padding:var(--pt) 0 var(--pb); container-type:inline-size; border-top:1px solid var(--hair); }
/* the open style (owner 2026-10-12: "go away from the boxy design"; Mobbin: Savee, Sweatpals): sections
   sit on the page, split by hairlines, and numbers side by side are split by thin lines; never a box. A
   section beside another in its row draws that line, inset (so it never meets the hairlines) */
.acx-card__label { font-size:12px; font-weight:700; line-height:1.3; letter-spacing:.14em; text-transform:uppercase; color:var(--t-60); }
.acx-card__desc { margin-top:6px; font-size:14px; line-height:1.45; color:var(--t-60); }
.acx-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0; }
.acx-grid > .acx-span { grid-column:1 / -1; }
.acx-access, .acx-code, .acx-plan { grid-column:span 2; }
/* phones: Seats and Checked in side by side, a thin line between */
.acx-rows .acx-seats { padding-right:18px; }
.acx-rows .acx-checked { padding-left:18px; }
.acx-rows .acx-checked::before { content:""; position:absolute; left:0; top:var(--pt); bottom:var(--pb); width:1px; background:var(--hair); }
.acx-stat__value { margin-top:14px; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 6px; font-size:15px; line-height:1.3; color:var(--t-80); }
.acx-big { font-size:38px; font-weight:800; line-height:1; letter-spacing:-.025em; color:var(--fg); font-variant-numeric:tabular-nums; }
.acx-stat__date { margin-top:14px; font-size:22px; font-weight:800; line-height:1.2; letter-spacing:-.01em; color:var(--fg); }
.acx-stat__note { margin-top:10px; font-size:14px; line-height:1.45; color:var(--t-60); }
.acx-card[data-tone="wait"] .acx-stat__note { color:#E8C468; }
.acx-card[data-tone="err"] .acx-stat__note, .acx-card[data-tone="err"] .acx-stat__date { color:var(--err); }
.acx-stat__note a, .acx-lead a, .acx-help a, .acx-card__link a, .acx-hint a, .acx-soon a { color:var(--accent); text-decoration:underline; text-decoration-color:rgba(97,224,175,.4); text-underline-offset:3px; }
.acx-meter { margin-top:14px; height:6px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.acx-meter span { display:block; height:100%; min-width:6px; border-radius:inherit; background:var(--accent); box-shadow:0 0 12px var(--accent-glow); }
.acx-meter[data-full="true"] span { background:#E8C468; box-shadow:none; }
.acx-chip { display:inline-flex; align-items:center; margin-top:14px; min-height:26px; padding:0 11px; border-radius:999px; font-size:13px; font-weight:700;
  color:var(--accent); background:var(--accent-fill); box-shadow:inset 0 0 0 1px var(--accent-border); }
.acx-chip[data-tone="off"] { color:var(--t-80); background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.10); }
.acx-chip[data-tone="wait"] { color:#E8C468; background:rgba(232,196,104,.10); box-shadow:inset 0 0 0 1px rgba(232,196,104,.30); }
.acx-chip[data-tone="err"] { color:var(--err); background:rgba(255,138,128,.10); box-shadow:inset 0 0 0 1px rgba(255,138,128,.32); }
.acx-code__text { margin-top:12px; font-size:16px; line-height:1.5; color:var(--fg); overflow-wrap:anywhere; }
.acx-code__note { margin-top:6px; font-size:14px; line-height:1.45; color:var(--t-60); }
.acx-card__link { margin-top:14px; font-size:15px; font-weight:600; }
.acx-plan__head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 14px; margin-top:14px; }
.acx-plan__head .acx-chip { margin-top:0; }
.acx-plan__title { margin-top:14px; font-size:18px; font-weight:700; line-height:1.3; color:var(--fg); }
.acx-plan__head .acx-plan__title { margin-top:0; }
.acx-plan__text { margin-top:6px; font-size:14px; line-height:1.45; color:var(--t-60); }
.acx-plan > .acx-btn { margin-top:18px; }
.acx-lead { margin-top:12px; font-size:17px; line-height:1.5; color:var(--t-80); }
.acx-solo .acx-lead:first-child { margin-top:0; }
.acx-help { margin-top:16px; font-size:15px; line-height:1.5; color:var(--t-60); }
.acx-cta { margin-top:20px; }
/* the free trial's type and state, when the walk through was left before them (2026-10-16) */
.acx-trial__needs { margin-top:18px; }
.acx-cta .btn { min-height:48px; padding:0 22px; }
/* "coming soon" lines: a small dot, then the words */
.acx-soon { margin-top:14px; display:flex; align-items:flex-start; gap:9px; font-size:14px; line-height:1.45; color:var(--t-60); }
.acx-soon::before { content:""; flex:0 0 auto; width:6px; height:6px; margin-top:7px; border-radius:50%; background:var(--t-45); }

/* setup, for a new account: progress, then the three steps (side by side from 700px) */
.acx-setup__head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:6px 16px; }
.acx-setup__title { font-size:20px; font-weight:800; line-height:1.25; letter-spacing:-.01em; }
.acx-setup__count { font-size:14px; color:var(--t-60); white-space:nowrap; }
.acx-progress { margin-top:14px; height:6px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.acx-progress span { display:block; height:100%; border-radius:inherit; background:var(--accent); box-shadow:0 0 12px var(--accent-glow); }
.acx-steps { margin-top:18px; display:grid; gap:0; }
.acx-step { display:grid; grid-template-columns:32px minmax(0,1fr); column-gap:14px; align-content:start; padding:16px 0; border-top:1px solid var(--hair); }
.acx-step.is-next h3 { color:var(--accent); }
.acx-step__n { grid-row:span 3; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-size:14px; font-weight:700;
  color:var(--accent); background:var(--accent-fill); box-shadow:inset 0 0 0 1px var(--accent-border); }
.acx-step.is-done .acx-step__n { color:#04130d; background:var(--accent); box-shadow:none; }
.acx-step h3 { font-size:17px; font-weight:700; line-height:1.3; letter-spacing:-.005em; color:var(--fg); }
.acx-step p { margin-top:3px; font-size:14px; line-height:1.45; color:var(--t-60); }
.acx-step .acx-cta { margin-top:14px; }
.acx-step .acx-cta .btn { min-height:44px; padding:0 18px; font-size:15px; }

/* Billing & Support: the plan with its facts, then seats and support side by side from 700px */
.acx-grid.acx-billing, .acx-grid.acx-settings { grid-template-columns:minmax(0,1fr); }
.acx-grid.acx-settings { align-items:start; }
.acx-billing .acx-card, .acx-settings .acx-card { grid-column:auto; }
.acx-facts { margin-top:18px; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px 18px; }
.acx-facts dt { font-size:13px; font-weight:600; line-height:1.3; color:var(--t-60); }
.acx-facts dd { margin-top:4px; font-size:17px; font-weight:700; line-height:1.3; color:var(--fg); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }

/* Settings: a card for the profile, email, password and sign out; changes open in place */
.acx-form { margin-top:18px; display:grid; gap:14px; }
.acx-form__pair { display:grid; gap:14px; }
@container (min-width:560px) { .acx-form__pair { grid-template-columns:repeat(2, minmax(0,1fr)); } }
.acx-form__buttons { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }
.acx-form__spacer { flex:1 1 0; }
.acx-inline__row { margin-top:16px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 16px; }
.acx-inline__value { flex:1 1 180px; min-width:0; font-size:17px; font-weight:600; line-height:1.4; color:var(--fg); overflow-wrap:anywhere; }
.acx-inline__row--start { justify-content:flex-start; gap:12px 26px; }
.acx-dots { letter-spacing:.14em; color:var(--t-60); }
.acx-hint { font-size:14px; line-height:1.45; color:var(--t-60); }
.acx-cta + .acx-hint { margin-top:12px; user-select:all; -webkit-user-select:all; }
.acx .fld__control { border-radius:20px; border-color:rgba(255,255,255,.09); background:rgba(255,255,255,.04); }
.acx .fld__control[aria-invalid="true"] { border-color:rgba(255,138,128,.75); box-shadow:0 0 0 4px rgba(255,138,128,.10); }
.acx .fld__label.is-err { color:var(--err); }
.acx .fld__control:-webkit-autofill { -webkit-box-shadow:0 0 0 1000px #0a0a0a inset; }
.acx .fld__control:-webkit-autofill:focus { -webkit-box-shadow:0 0 0 1000px #0a0a0a inset, 0 0 0 4px rgba(97,224,175,.12); }
.acx .lg-code { letter-spacing:.22em; font-variant-numeric:tabular-nums; font-weight:600; }
/* the agency: shown like a field, locked (set by LOC8); a long name wraps instead of being cut */
.acx-locked .fld__control { height:auto; color:var(--t-75); background:rgba(255,255,255,.015); border-color:rgba(255,255,255,.06); padding-right:52px; overflow-wrap:anywhere; cursor:default; }
.acx-locked .fld__control:hover { border-color:rgba(255,255,255,.06); }
.acx-locked__icon { position:absolute; right:19px; top:50%; z-index:2; width:18px; height:18px; margin-top:-9px; pointer-events:none;
  fill:none; stroke:var(--t-45); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.acx-msg { font-size:15px; line-height:1.45; color:var(--t-60); }
.acx-msg[data-tone] { margin-top:14px; }
.acx-msg[data-tone=""] { margin-top:0; }
.acx-msg[data-tone="ok"] { display:flex; align-items:center; gap:10px; color:var(--accent); font-weight:600; }
.acx-msg[data-tone="ok"]::before { content:"\2713"; font-weight:800; }
.acx-msg[data-tone="err"] { color:var(--err); }
.acx-msg[data-tone="wait"] { color:#E8C468; }
.acx-details { margin-top:18px; display:grid; gap:14px; }
.acx-details__fields { display:grid; gap:14px; }

/* Billing: choose seats (owner: "move a dial to set the seats… or we can set a number… something
   interactive and professional"; "$36 a seat… always annually. Minimum is 10 seats"). Left: the seat
   count, big, between round minus and plus buttons (hold to keep going), a mint slider with its scale
   and quick picks. Right: the summary panel with the yearly total counting along and Purchase. */
.acx-buy__grid { display:grid; grid-template-columns:minmax(0,1fr); gap:22px; }
.acx-buy__hint { margin-top:8px; font-size:14px; line-height:1.45; color:var(--t-60); }
.acx-counter { margin-top:22px; display:flex; align-items:center; justify-content:center; gap:clamp(10px, 4vw, 30px); }
/* sized to the screen, so minus, the number and plus always fit a 320px phone */
.acx-counter__step { flex:0 0 auto; width:clamp(44px, 12vw, 54px); height:clamp(44px, 12vw, 54px); border-radius:50%; display:grid; place-items:center; color:var(--fg); touch-action:manipulation;
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  transition:background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform .12s var(--ease), opacity var(--dur) var(--ease); }
.acx-counter__step:active:not(:disabled) { transform:scale(.92); background:var(--accent-fill); box-shadow:inset 0 0 0 1px var(--accent-border); color:var(--accent); }
@media (hover:hover) and (pointer:fine) { .acx-counter__step:not(:disabled):hover { background:rgba(255,255,255,.10); box-shadow:inset 0 0 0 1px rgba(255,255,255,.24); } }
.acx-counter__step:disabled { opacity:.3; cursor:default; }
.acx-counter__step:focus-visible { border-radius:50%; }
.acx-counter__icon { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
.acx-counter__value { min-width:0; text-align:center; }
.acx-counter__input { display:block; width:4ch; margin:0 auto; padding:0 0 2px; border:0; border-radius:0; background:transparent; color:var(--fg); outline:none;
  font:inherit; font-size:clamp(44px, 14vw, 64px); font-weight:800; line-height:1.05; letter-spacing:-.03em; text-align:center; font-variant-numeric:tabular-nums; caret-color:var(--accent);
  box-shadow:0 2px 0 0 transparent; transition:box-shadow var(--dur) var(--ease); }
.acx-counter__input:focus { box-shadow:0 2px 0 0 var(--accent); }
.acx-counter__unit { margin-top:4px; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--t-60); }
/* the slider: mint up to the thumb (--fill, set by the script), a soft glow on the thumb */
.acx-range { --fill:0%; display:block; width:100%; height:36px; margin:24px 0 0; padding:0; background:transparent; cursor:pointer; -webkit-appearance:none; appearance:none; touch-action:pan-y; }
.acx-range:focus { outline:none; }
.acx-range::-webkit-slider-runnable-track { height:8px; border-radius:999px; background:linear-gradient(90deg, var(--accent) 0 var(--fill), rgba(255,255,255,.10) var(--fill) 100%); }
.acx-range::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:28px; height:28px; margin-top:-10px; border-radius:50%; background:#fff;
  border:3px solid var(--accent); box-shadow:0 0 0 6px rgba(97,224,175,.16), 0 6px 16px rgba(0,0,0,.55); transition:box-shadow var(--dur) var(--ease), transform .12s var(--ease); }
.acx-range:active::-webkit-slider-thumb { transform:scale(1.08); }
.acx-range:focus-visible::-webkit-slider-thumb, .acx-range:active::-webkit-slider-thumb { box-shadow:0 0 0 9px rgba(97,224,175,.28), 0 6px 16px rgba(0,0,0,.55); }
.acx-range::-moz-range-track { height:8px; border-radius:999px; background:rgba(255,255,255,.10); }
.acx-range::-moz-range-progress { height:8px; border-radius:999px; background:var(--accent); }
.acx-range::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:#fff; border:3px solid var(--accent); box-shadow:0 0 0 6px rgba(97,224,175,.16), 0 6px 16px rgba(0,0,0,.55); }
.acx-range:focus-visible::-moz-range-thumb { box-shadow:0 0 0 9px rgba(97,224,175,.28); }
/* the scale sits under the thumb's own travel (14px in from each end) */
.acx-scale { position:relative; height:18px; margin-top:6px; font-size:12px; font-weight:600; line-height:18px; color:var(--t-45); font-variant-numeric:tabular-nums; }
.acx-scale span { position:absolute; top:0; left:calc(14px + (100% - 28px) * var(--p)); transform:translateX(-50%); white-space:nowrap; }
/* the last mark ends where the track ends (open sections have no padding to hide a label past the edge) */
.acx-scale span:last-child { left:auto; right:0; transform:none; }
.acx-picks { margin-top:20px; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.acx-pick { min-width:58px; min-height:40px; padding:0 14px; border-radius:999px; font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--t-75);
  background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.10); transition:color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.acx-pick[aria-pressed="true"] { color:var(--accent); background:var(--accent-fill); box-shadow:inset 0 0 0 1px var(--accent-border); }
@media (hover:hover) and (pointer:fine) { .acx-pick:not([aria-pressed="true"]):hover { color:var(--fg); background:rgba(255,255,255,.09); } }
.acx-pick:focus-visible { border-radius:999px; }
.acx-sum { display:flex; flex-direction:column; padding:22px 0 0; border-top:1px solid var(--hair); }
.acx-sum__label { font-size:12px; font-weight:700; line-height:1.3; letter-spacing:.14em; text-transform:uppercase; color:var(--t-60); }
.acx-sum__total { margin-top:8px; font-size:46px; font-weight:800; line-height:1.05; letter-spacing:-.025em; color:var(--fg); font-variant-numeric:tabular-nums; }
.acx-sum__per { margin-top:6px; font-size:14px; line-height:1.4; color:var(--t-60); }
.acx-sum__line { height:1px; margin:18px 0 14px; background:rgba(255,255,255,.08); }
.acx-sum__row { display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:15px; line-height:1.4; color:var(--t-75); }
.acx-sum__row + .acx-sum__row { margin-top:8px; }
.acx-sum__row strong { color:var(--fg); font-weight:700; font-variant-numeric:tabular-nums; text-align:right; }
.acx-buy__go { position:relative; width:100%; min-height:56px; margin-top:22px; padding-top:8px; padding-bottom:8px; font-size:17px; line-height:1.25; white-space:normal; text-wrap:balance; }
.acx-buy__go.is-busy[disabled] { opacity:.9; }
.acx-buy__go[disabled]:not(.is-busy) { cursor:default; transform:none; animation:none; color:var(--t-60); background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.acx-buy__go.is-busy::after { content:""; position:absolute; right:22px; top:50%; width:18px; height:18px; margin-top:-9px; border-radius:50%;
  border:2px solid rgba(4,19,13,.22); border-top-color:#04130d; animation:lg-spin .7s linear infinite; }
.acx-buy__secure { margin-top:12px; display:flex; align-items:center; justify-content:center; gap:7px; font-size:13px; line-height:1.4; color:var(--t-60); }
.acx-buy__lock { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.acx-buy__invoice { align-self:center; margin-top:4px; }
.acx-inv__form { margin-top:24px; padding-top:22px; border-top:1px solid rgba(255,255,255,.08); }
.acx-inv__lead { font-size:15px; line-height:1.5; color:var(--t-80); }
.acx-inv__form .acx-buy__go { margin-top:4px; }
.acx-form__trio { display:grid; gap:14px; }
@container (min-width:560px) { .acx-form__trio { grid-template-columns:minmax(0,1.3fr) minmax(0,1.1fr) minmax(0,.9fr); } }
/* coming back from checkout, an invoice waiting, the agency being set up */
.acx-card[data-tone="ok"] .acx-notice__title { color:var(--accent); }
.acx-joined .acx-notice__text { display:flex; align-items:center; gap:10px; color:var(--accent); font-weight:600; }
.acx-joined .acx-notice__text::before { content:"\2713"; font-weight:800; }
.acx-notice__title { font-size:20px; font-weight:800; line-height:1.25; color:var(--fg); }
.acx-notice__text { margin-top:6px; font-size:16px; line-height:1.5; color:var(--t-80); overflow-wrap:anywhere; }
.acx-notice__text:first-child { margin-top:0; }
.acx-notice .acx-cta { margin-top:16px; }
/* agency members (2026-10-11): joining an agency, being removed from one, Billing seen but not changed */
.acx-join__title { font-size:20px; font-weight:800; line-height:1.25; letter-spacing:-.01em; color:var(--fg); overflow-wrap:anywhere; }
.acx-join .acx-lead { margin-top:8px; }
.acx-join__buttons { display:flex; flex-wrap:wrap; gap:10px; }
.acx-removed .acx-cta { margin-top:18px; }
/* an email domain already on LOC8, a new agency after a removal or a deletion, and deleting one (owner 2026-10-12) */
.acx-domain .acx-lead { margin-top:8px; }
.acx-domain .acx-cta { margin-top:18px; }
.acx-domain__list { margin:10px 0 0; padding:0; list-style:none; display:grid; gap:6px; color:var(--t-75); font-size:15px; line-height:1.45; }
.acx-domain__list b { color:var(--fg); font-weight:700; }
.acx-domain__other { margin-top:16px; font-size:15px; line-height:1.45; color:var(--t-60); }
.acx-again { margin-top:12px; }
.acx-delete__ask { margin:4px 0 12px; font-size:15px; line-height:1.45; color:var(--t-75); overflow-wrap:anywhere; }
.acx-delete__ask b { color:var(--fg); font-weight:700; }
.acx-delete__body .acx-inline__row { margin-top:12px; }
.acx-viewonly__line { margin-top:14px; }
/* the very bottom of the page, above the footer (owner 2026-10-12): Invite people, a quiet grey row with its
   icon ("it doesn't need to be a button"), then a large Sign out button, each the full width ("should extend the
   width of that side panel": on computers they sit under the left panel, as wide as it); Invite people centred above
   the button ("Center the invite people above the button") */
.acx-bottom { margin-top:44px; padding-top:22px; border-top:1px solid var(--hair); display:flex; flex-direction:column; align-items:stretch; gap:10px; }
.acx-bottom[hidden], .acx-invite[hidden] { display:none; }
.acx-invite { display:flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 14px; border-radius:14px; font-size:15px; font-weight:600; color:var(--t-60);
  transition:color var(--dur) var(--ease), background var(--dur) var(--ease); }
.acx-invite:focus-visible { outline-offset:-2px; }
.acx-invite__icon { flex:0 0 auto; width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
@media (hover:hover) and (pointer:fine) { .acx-invite:hover { color:var(--fg); background:rgba(255,255,255,.05); } }
.acx-bottom .acx-btn { width:100%; min-height:52px; font-size:16px; }
.acx-spin { display:inline-block; width:16px; height:16px; margin-right:10px; vertical-align:-2px; border-radius:50%; border:2px solid rgba(255,255,255,.18); border-top-color:var(--accent); animation:lg-spin .8s linear infinite; }
.acx-callout { margin-top:18px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 16px; padding:14px 0 0; border-top:1px solid var(--hair);
}
.acx-callout p { font-size:15px; font-weight:600; line-height:1.4; color:#E8C468; }
.acx-list { margin-top:14px; display:grid; gap:12px; }
.acx-list li { display:grid; grid-template-columns:18px minmax(0,1fr); column-gap:10px; font-size:15px; line-height:1.45; color:var(--t-75); }
.acx-list li::before { content:"\2713"; color:var(--accent); font-weight:800; }
.acx-plan .acx-inline__row { margin-top:22px; }
.acx-plan .acx-inline__row .acx-hint { flex:1 1 200px; }

/* changing seats on a paid plan (owner: "add seats… bill accordingly… adjust the yearly", "prep for
   agencies that want to reduce seats"): the same picker, and the quote beside it dims for the moment
   Stripe prices a new number; the plan card notes what is in flight (a cut waiting for renewal, seats
   waiting on a payment, a declined card) */
.acx-sum__total, .acx-sum__per, .acx-sum__row strong, .acx-soon { transition:opacity var(--dur) var(--ease); }
.acx-sum.is-loading .acx-sum__total, .acx-sum.is-loading .acx-sum__per, .acx-sum.is-loading .acx-sum__row strong, .acx-sum.is-loading .acx-soon { opacity:.4; }
.acx-callout[data-tone="err"] { background:none; box-shadow:none; }
.acx-callout[data-tone="err"] p { color:var(--err); }
.acx-callout + .acx-callout, .acx-callout + .acx-msg + .acx-callout { margin-top:10px; }
.acx-change .acx-sum__total { overflow-wrap:anywhere; }

/* very narrow phones: one stat per row */
@media (max-width:379px) {
  .acx-grid { grid-template-columns:minmax(0,1fr); }
  .acx-access, .acx-code, .acx-plan { grid-column:auto; }
  .acx-rows .acx-seats { padding-right:0; }
  .acx-rows .acx-checked { padding-left:0; }
  .acx-rows .acx-checked::before { display:none; }
  .acx-big { font-size:34px; }
}
/* tablets and up: three stats across, the code card wide beside the plan; billing and settings in
   two columns with their wide cards across both */
@media (min-width:700px) {
  .acx-grid { grid-template-columns:repeat(3, minmax(0,1fr)); gap:0; }
  .acx-access, .acx-plan { grid-column:auto; }
  .acx-code { grid-column:span 2; }
  /* three numbers across, then the code beside the plan; a thin line between neighbours */
  .acx-rows .acx-seats, .acx-rows .acx-checked, .acx-rows .acx-code { padding-right:28px; }
  .acx-rows .acx-checked, .acx-rows .acx-access, .acx-rows .acx-plan { padding-left:28px; }
  .acx-rows .acx-access::before, .acx-rows .acx-plan::before { content:""; position:absolute; left:0; top:var(--pt); bottom:var(--pb); width:1px; background:var(--hair); }
  /* Settings: Email and Password side by side, a thin line between */
  .acx-settings .acx-email { padding-right:28px; }
  .acx-settings .acx-password { padding-left:28px; }
  .acx-settings .acx-password::before { content:""; position:absolute; left:0; top:var(--pt); bottom:var(--pb); width:1px; background:var(--hair); }
  .acx-grid.acx-settings { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .acx-settings .acx-span { grid-column:1 / -1; }
  .acx-facts { grid-template-columns:repeat(4, minmax(0,1fr)); }
  .acx-card { --pt:28px; --pb:30px; }
  .acx-steps { grid-template-columns:repeat(3, minmax(0,1fr)); gap:0; }
  .acx-step { grid-template-columns:minmax(0,1fr); row-gap:0; padding:20px 24px 4px 0; }
  .acx-step + .acx-step { padding-left:24px; border-left:1px solid var(--hair); }
  .acx-step__n { grid-row:auto; margin-bottom:14px; }
  .acx-details__fields { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .acx-details .sup-send { justify-self:start; min-width:220px; }
}
/* computers: the navigation becomes a sticky left column (the agency, the sections, who is signed in
   with Sign out); the title and the view sit beside it. Everything a size up, like the login page. */
@media (min-width:1000px) {
  .acx { padding-top:calc(var(--header) + 60px); }
  .acx-app { display:grid; grid-template-columns:236px minmax(0,1fr); grid-template-areas:"side head" "side body" "bottom ."; grid-template-rows:auto 1fr auto; column-gap:clamp(36px, 3.4vw, 56px); }
  .acx-bottom { grid-area:bottom; }
  .acx-head { grid-area:head; }
  .acx__body { grid-area:body; margin-top:32px; }
  .acx-side { grid-area:side; order:0; align-self:start; position:sticky; top:calc(var(--header) + env(safe-area-inset-top) + 24px); z-index:auto; margin:0;
    display:flex; flex-direction:column; gap:12px; padding:0 12px; }
  /* who is signed in: initials, name and address, each one line (fixed heights, so nothing moves when
     they arrive) */
  .acx-side__me { display:flex; align-items:center; gap:12px; min-width:0; margin:0 -12px; padding:20px 22px 18px; border-bottom:1px solid rgba(255,255,255,.07); }
  .acx-avatar { flex:0 0 auto; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-size:15px; font-weight:800; letter-spacing:.02em;
    color:var(--accent); background:var(--accent-fill); box-shadow:inset 0 0 0 1px var(--accent-border); }
  .acx-avatar:empty { background:rgba(255,255,255,.06); box-shadow:none; }
  .acx-side__who { flex:1 1 auto; min-width:0; }
  .acx-side__person, .acx-side__mail { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .acx-side__person { height:20px; font-size:15px; font-weight:700; line-height:20px; color:var(--fg); }
  .acx-side__mail { height:18px; margin-top:2px; font-size:13px; line-height:18px; color:var(--t-60); }
  .acx-nav { grid-template-columns:minmax(0,1fr); padding:0; border-radius:0; background:none; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; }
  .acx-nav::before { top:0; bottom:auto; left:0; right:0; width:auto; height:46px; border-radius:14px; transform:translate3d(0, calc(var(--i) * 50px), 0); }
  .acx-nav__item { justify-content:flex-start; gap:12px; min-height:46px; padding:0 14px; border-radius:14px; font-size:15px; color:var(--t-75); transition:color var(--dur) var(--ease), background var(--dur) var(--ease); }
  .acx-nav__item:focus-visible { border-radius:14px; }
  .acx-nav__icon { display:block; width:19px; height:19px; }
  .acx-nav__long { display:inline; }

  @media (hover:hover) and (pointer:fine) {
    .acx-nav__item:not([aria-current="page"]):hover { color:var(--fg); background:rgba(255,255,255,.05); }
  }
  /* the signed-in address lives in the left column here */
  .acx__who .acx__email { display:none; }
  .acx .kicker { font-size:13px; }
  .acx__title { font-size:clamp(40px, 3.6vw, 54px); }
  .acx__who { font-size:16px; }
  .acx__sub { font-size:17px; }
  .acx-card { --pt:30px; --pb:32px; }
  .acx-big { font-size:48px; }
  .acx-stat__value { font-size:16px; }
  .acx-stat__date { font-size:26px; }
  .acx-stat__note, .acx-code__note, .acx-plan__text, .acx-card__desc, .acx-soon, .acx-hint { font-size:15px; }
  .acx-code__text { font-size:17px; }
  .acx-facts dd { font-size:19px; }
  .acx-details .fld__control { min-height:74px; padding:36px 20px 13px; font-size:18px; border-radius:22px; }
  .acx-details .fld__label { top:14px; left:21px; font-size:14px; }
  .acx-details .sup-send { min-height:64px; font-size:18px; }
  .acx-step h3 { font-size:19px; }
  .acx-step p { font-size:15px; }
  .acx-setup__title { font-size:24px; }
  .acx-buy__grid { grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:36px; align-items:stretch; }
  .acx-buy__pick { padding-top:2px; }
  .acx-counter__input { font-size:78px; }
  .acx-sum { padding:4px 0 0 36px; border-top:0; border-left:1px solid var(--hair); }
  .acx-sum__total { font-size:54px; }
  .acx-buy__hint, .acx-inv__lead { font-size:15px; }
}
@media (min-width:1900px) {
  .acx-app { grid-template-columns:268px minmax(0,1fr); }
  .acx-side { padding:0 14px; gap:14px; }
  .acx-side__me { margin:0 -14px; padding:24px 26px 20px; gap:14px; }
  .acx-avatar { width:46px; height:46px; font-size:17px; }
  .acx-side__person { height:22px; font-size:17px; line-height:22px; }
  .acx-side__mail { height:20px; font-size:14px; line-height:20px; }
  .acx-nav::before { height:52px; transform:translate3d(0, calc(var(--i) * 56px), 0); }
  .acx-nav__item { min-height:52px; font-size:16px; }
  .acx__title { font-size:62px; }
  .acx-card { --pt:34px; --pb:36px; }
  .acx-big { font-size:58px; }
  .acx-stat__date { font-size:31px; }
}

/* ── Phones (dashboard, 2026-10-10): every phone holding a seat, 10 to a page, with Release.
   Wide cards get columns under a header row; narrow ones label each line instead. ── */
.acx-phones { grid-column:1 / -1; }
.acx-phones [hidden] { display:none; }
.acx-phones__tools { margin-top:16px; display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; }
.acx-phones__find { flex:1 1 220px; max-width:320px; }
.acx-phones__chips { display:flex; gap:8px; }
.acx-phones__chip { display:inline-flex; align-items:center; gap:6px; }
.acx-phones__count { font-weight:600; opacity:.75; }
.acx-phones__box { margin-top:14px; }
.acx-phones__head { display:none; }
.acx-phones__list { list-style:none; margin:0; padding:0; }
.acx-phone { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"ref go" "seen go" "added go"; align-items:center; column-gap:16px; row-gap:2px;
  padding:14px 0; border-top:1px solid rgba(255,255,255,.07); }
.acx-phone:first-child { border-top:0; }
.acx-phone__ref { grid-area:ref; font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:18px; font-weight:700; letter-spacing:.12em; color:var(--fg); }
.acx-phone__seen { grid-area:seen; margin-top:4px; }
.acx-phone__added { grid-area:added; }
.acx-phone__seen, .acx-phone__added { display:flex; align-items:center; gap:7px; font-size:14px; line-height:1.4; color:var(--t-75); }
.acx-phone__k { color:var(--t-45); }
.acx-phone__dot { width:8px; height:8px; flex:none; border-radius:50%; background:var(--accent); box-shadow:0 0 8px rgba(97,224,175,.45); }
.acx-phone__seen[data-tone="idle"] .acx-phone__dot { background:rgba(255,255,255,.35); box-shadow:none; }
.acx-phone__seen[data-tone="wait"] .acx-phone__dot { background:#E8C468; box-shadow:0 0 8px rgba(232,196,104,.35); }
.acx-phone__seen[data-tone="wait"] .acx-phone__v { color:#E8C468; }
.acx-phone__go { grid-area:go; min-height:38px; padding:0 16px; font-size:14px; }
.acx-phone__confirm { grid-column:1 / -1; margin-top:10px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; padding:0;
  background:rgba(255,138,128,.06); box-shadow:inset 0 0 0 1px rgba(255,138,128,.22); }
.acx-phone__confirm p { font-size:14px; line-height:1.4; color:var(--t-75); }
.acx-phone__actions { display:flex; flex-wrap:wrap; gap:8px; }
.acx-btn--danger { color:var(--err); background:rgba(255,138,128,.08); box-shadow:inset 0 0 0 1px rgba(255,138,128,.38); }
@media (hover:hover) and (pointer:fine) { .acx-btn--danger:not(:disabled):hover { background:rgba(255,138,128,.14); box-shadow:inset 0 0 0 1px rgba(255,138,128,.6); } }
.acx-btn--danger.is-busy::after { border-color:rgba(255,138,128,.25); border-top-color:var(--err); }
.acx-phones__pager { margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.07); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; }
.acx-phones__range { font-size:14px; color:var(--t-60); font-variant-numeric:tabular-nums; }
.acx-phones__pages { display:flex; gap:8px; }
.acx-phones__page { min-height:38px; padding:0 16px; font-size:14px; }
.acx-phones__none { margin-top:4px; }
.acx-phones__wait { margin-top:14px; display:flex; align-items:center; gap:10px; }
@container (min-width:600px) {
  .acx-phones__head { display:grid; grid-template-columns:minmax(120px,1.1fr) minmax(130px,1fr) minmax(120px,1fr) 104px; column-gap:16px; padding:0 0 10px;
    border-bottom:1px solid rgba(255,255,255,.07); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--t-45); }
  .acx-phones__head[hidden] { display:none; }
  .acx-phone { grid-template-columns:minmax(120px,1.1fr) minmax(130px,1fr) minmax(120px,1fr) 104px; grid-template-areas:"ref seen added go"; row-gap:0; }
  .acx-phone:first-child { border-top:0; }
  .acx-phone__seen { margin-top:0; }
  .acx-phone__k { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .acx-phone__go { justify-self:end; }
}
.acx-phones__cap { margin-top:6px; font-size:14px; line-height:1.45; color:#E8C468; }

/* ── Touch screens (2026-10-11, owner: "make the phone experience top tier") ──
   No double-tap zoom on anything tappable; every control at least 44 pt tall where a finger is the
   pointer; a field taking focus scrolls clear of the pinned header and tab bar. */
a, button, input, select, textarea, label, summary { touch-action:manipulation; }
:root:has(.acx), :root:has(.lgx) { scroll-padding-top:calc(var(--header) + env(safe-area-inset-top) + 72px); }
@media (pointer:coarse) {
  .acx-phone__go, .acx-phones__page { min-height:44px; }
  .acx-pick { min-height:44px; }
  .acx-range { height:44px; }
}

/* ── People (2026-10-11, agency members; owner 2026-10-12: opened from Invite people at the very bottom, the open
   style): the invite, then everyone as rows on hairlines (Mobbin: folk, Obvious), quiet text buttons, one line
   questions ── */
.acx-invite-form { margin-top:16px; }
.acx-invite-form__row { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
.acx-invite-form__send { min-height:56px; }
.acx-invite-form__hint { margin-top:12px; }
.acx-ticks { margin-top:14px; display:flex; flex-wrap:wrap; gap:4px 20px; }
.acx-ticks[hidden] { display:none; }
.acx-tick { display:inline-flex; align-items:center; gap:10px; min-height:40px; font-size:15px; font-weight:600; color:var(--t-80); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.acx-tick input { flex:0 0 auto; width:20px; height:20px; margin:0; accent-color:var(--accent); cursor:pointer; }
.acx-people__head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.acx-people__count { font-size:14px; font-weight:600; color:var(--t-60); white-space:nowrap; font-variant-numeric:tabular-nums; }
.acx-people__rows { margin:6px 0 0; padding:0; list-style:none; }
.acx-person { display:grid; grid-template-columns:40px minmax(0,1fr) auto; column-gap:14px; row-gap:10px; align-items:center; padding:16px 0; border-top:1px solid var(--hair); }
.acx-person:first-child { border-top:0; }
.acx-person__avatar { grid-column:1; grid-row:1; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-size:14px; font-weight:800; letter-spacing:.02em;
  color:var(--accent); background:var(--accent-fill); box-shadow:inset 0 0 0 1px var(--accent-border); }
.acx-person.is-invite .acx-person__avatar { color:var(--t-60); background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.10); }
.acx-person__mail { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.acx-person__who { grid-column:2; grid-row:1; min-width:0; }
.acx-person__name, .acx-person__meta { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acx-person__name { font-size:16px; font-weight:700; line-height:1.35; color:var(--fg); }
.acx-person__you { font-weight:600; color:var(--t-60); }
.acx-person__meta { margin-top:2px; font-size:14px; line-height:1.4; color:var(--t-60); }
.acx-person__meta.is-expired { color:#E8C468; }
.acx-person__role { grid-column:3; grid-row:1; font-size:15px; font-weight:600; color:var(--t-60); white-space:nowrap; }
.acx-person__edit { grid-column:2 / -1; grid-row:2; display:flex; align-items:center; gap:16px; }
.acx-person__acts { grid-column:2 / -1; grid-row:3; display:flex; flex-wrap:wrap; gap:4px 20px; }
.acx-person.is-invite .acx-person__acts { grid-row:2; }
.acx-person .acx-ticks { grid-column:2 / -1; margin-top:0; }
.acx-person__confirm { grid-column:2 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:4px 18px; font-size:15px; font-weight:600; color:var(--fg); }
/* a compact role pick in a row, and quiet text buttons */
.acx-select__wrap { position:relative; display:inline-flex; }
.acx-select { -webkit-appearance:none; appearance:none; height:40px; padding:0 36px 0 16px; border:0; border-radius:999px; font:inherit; font-size:15px; font-weight:600; color:var(--fg);
  background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); cursor:pointer; }
.acx-select:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.acx-select__chev { position:absolute; right:13px; top:50%; width:14px; height:14px; margin-top:-7px; pointer-events:none; fill:none; stroke:var(--t-60); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.acx-link-btn { min-height:40px; padding:0; border:0; background:none; font:inherit; font-size:15px; font-weight:600; color:var(--t-60); cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:color var(--dur) var(--ease); }
.acx-link-btn--strong { color:var(--accent); }
.acx-link-btn--danger { color:var(--err); }
.acx-link-btn:disabled { opacity:.4; cursor:default; }
.acx-link-btn.is-busy { opacity:.55; }
@media (hover:hover) and (pointer:fine) { .acx-link-btn:not(:disabled):not(.acx-link-btn--strong):not(.acx-link-btn--danger):hover { color:var(--fg); } }
@media (min-width:700px) {
  .acx-invite-form__row { grid-template-columns:minmax(0,1fr) 190px auto; }
  .acx-invite-form__send { min-height:0; padding:0 26px; }
  .acx-person { grid-template-columns:40px minmax(0,1fr) auto auto; column-gap:18px; }
  .acx-person__edit { grid-column:3; grid-row:1; }
  .acx-person__acts { grid-column:4; grid-row:1; justify-content:flex-end; }
  .acx-person.is-invite .acx-person__acts { grid-row:1; }
  .acx-person__role { grid-column:3; }
}