/* squareposh customer account (/account/), dressed like squareposh.com.
   Loaded after staff.css (the shared base: cards, buttons, fields, badges,
   tables), and only by account/app.php, so the staff dashboard never changes.
   Bone and cocoa, NeulisAlt with the Vurnia display face for headings (both
   loaded by account/app.php from the squareposh theme), pill buttons, soft
   rounded cards and pastel status colors. On phones the tabs become a bar
   at the bottom of the screen. A template can dress it further (the wedding
   template's wedding-account.css takes the couple's colors and type). */

:root { --display: "Bodoni Moda", Georgia, serif; } /* account/app.php swaps in the theme's display face after this file */

body.acct {
  --sans: "NeulisAlt", "Jost", "Helvetica Neue", Arial, sans-serif;
  --bone: #F8F4F4;
  --bone-2: #F1EAE6;
  --cocoa: #382C24;
  --blush: #F7E6E1;
  --sage: #E4EEE6;
  --butter: #FBF0D9;
  --lilac: #EEE8F7;
  --sky: #E3EEF5;
  /* staff.css tokens, re-dressed */
  --ink: #1F1915;
  --ink-2: #4C4640;
  --ink-3: #74695F;
  --line: rgba(56, 44, 36, .12);
  --line-2: rgba(56, 44, 36, .24);
  --soft: #F4EEEB;
  --page: #F8F4F4;
  --black: #382C24;
  --black-hover: #54443A;
  --on-black: #F8F4F4;
  --focus: #382C24;
  --ok: #2F6A48;
  --ok-soft: #E4EEE6;
  --warn: #85570F;
  --warn-soft: #FBF0D9;
  --bad: #A6372B;
  --bad-soft: #FBE7E3;
  --test: #5E47A0;
  --test-soft: #EEE8F7;
  --r: 14px;
  --r-lg: 22px;
  --shadow: 0 1px 2px rgba(56, 44, 36, .04), 0 14px 34px -24px rgba(56, 44, 36, .38);
  --card: #FFFFFF;
  --tabbar: rgba(255, 255, 255, .97);
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 15.5px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
body.acct ::selection { background: var(--blush); color: var(--ink); }
.acct :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.acct .it { font-family: var(--display); font-weight: 400; letter-spacing: .005em; }
.acct .eyebrow { margin: 0 0 6px; color: var(--ink-3); font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.acct .muted { color: var(--ink-3); }
.acct .skip { border-radius: 100px; background: var(--black); color: var(--on-black); }

/* ---------- Headings ---------- */
.acct .h1 { margin: 0 0 22px; font: 400 clamp(30px, 3.4vw, 42px)/1.12 var(--display); letter-spacing: -.01em; }
.acct .h2 { margin: 0 0 12px; font-size: 18px; font-weight: 600; letter-spacing: -.005em; }
.acct .h3 { font-size: 15px; font-weight: 600; }

/* ---------- Buttons and fields ---------- */
.acct .btn { min-height: 44px; padding: 10px 20px; border: 1px solid var(--line-2); border-radius: 100px; background: var(--card); color: var(--ink); font-size: 14.5px; font-weight: 500; letter-spacing: .005em; transition: background-color .2s, border-color .2s, color .2s, transform .2s; }
.acct .btn:hover { border-color: var(--ink-3); background: var(--card); }
.acct .btn:active { transform: translateY(1px); }
.acct .btn .si { width: 17px; height: 17px; }
.acct .btn--primary { border-color: var(--black); background: var(--black); color: var(--on-black); }
.acct .btn--primary:hover { border-color: var(--black-hover); background: var(--black-hover); }
.acct .btn--ghost { border-color: transparent; background: transparent; }
.acct .btn--ghost:hover { border-color: transparent; background: var(--soft); }
.acct .btn--danger { border-color: #EBC2BB; background: var(--card); color: var(--bad); }
.acct .btn--danger:hover { border-color: var(--bad); background: var(--bad-soft); }
.acct .btn--small { min-height: 36px; padding: 6px 14px; font-size: 13.5px; }
.acct .btn[disabled] { opacity: .55; cursor: default; }
.acct .linkbtn { color: var(--ink); text-underline-offset: 3px; }
.acct .row { gap: 10px; margin: 18px 0 4px; }
.acct .field > span { font-weight: 500; font-size: 14px; }
.acct .field input, .acct .field select, .acct .field textarea, .acct .search input[type="search"], .acct .search input[type="text"] {
  min-height: 46px; padding: 11px 14px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--card); color: var(--ink); font: inherit; font-size: 15px;
}
.acct .field input:focus, .acct .field select:focus, .acct .field textarea:focus, .acct .search input:focus { border-color: var(--ink-2); outline: 3px solid rgba(56, 44, 36, .14); outline-offset: 0; }
.acct .check { font-size: 14.5px; }
.acct .check input { accent-color: var(--black); }
.acct .form > .btn:not(.btn--block) { justify-self: start; }

/* ---------- Notices and badges ---------- */
.acct .flash, .acct .note { gap: 12px; margin: 0 0 20px; padding: 14px 18px; border: 1px solid transparent; border-radius: 18px; font-size: 14.5px; }
.acct .flash--ok { border-color: #CFE2D4; background: var(--ok-soft); color: #214D34; }
.acct .flash--bad { border-color: #F1CBC4; background: var(--bad-soft); color: #7E2A20; }
.acct .note--warn { border-color: #F0DEB7; background: var(--warn-soft); color: #6A460C; }
.acct .flash a, .acct .note a { color: inherit; }
.acct .badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 9px; border-radius: 100px; font-size: 12px; font-weight: 600; letter-spacing: .01em; line-height: 1.5; }
.acct .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.acct .badge--grey { background: var(--soft); color: var(--ink-2); }

/* ---------- Top bar and tabs ---------- */
.acct .top { border-bottom: 1px solid var(--line); background: rgba(248, 244, 244, .9); }
.acct .top__in { gap: 20px; max-width: 1160px; min-height: 72px; padding: 0 28px; }
.acct .brand { gap: 12px; min-width: 0; }
.acct .brand__mark { flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--black); }
.acct .brand__text { min-width: 0; }
.acct .brand__text strong { overflow: hidden; max-width: 240px; font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.acct .brand__text span { color: var(--ink-3); font-size: 12px; }
.acct .tabs { gap: 2px; margin-left: auto; padding: 4px; border: 1px solid var(--line); border-radius: 100px; background: var(--card); }
.acct .tabs a { position: relative; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: 100px; color: var(--ink-2); font-size: 14px; font-weight: 500; transition: background-color .2s, color .2s; }
.acct .tabs a .si { width: 17px; height: 17px; opacity: .8; }
.acct .tabs a:hover { background: var(--soft); color: var(--ink); }
.acct .tabs a[aria-current="page"] { background: var(--black); color: var(--on-black); }
.acct .tabs a[aria-current="page"] .si { opacity: 1; }
.acct .tabs__short { display: none; }
.acct .dot { min-width: 19px; height: 19px; padding: 0 5px; background: #D8574A; color: #fff; font-size: 11px; font-weight: 700; line-height: 19px; }
.acct .tabs a[aria-current="page"] .dot { background: #F2A99E; color: #3A1410; }

/* ---------- Page ---------- */
.acct .main { max-width: 1160px; padding: 36px 28px 80px; }
.acct .card { margin: 0 0 20px; padding: 26px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow); }
.acct .card > p { color: var(--ink-2); }
.acct .card .small.muted { margin: 14px 0 0; }
.acct .page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin: 0 0 22px; }
.acct .page-head .h1 { margin: 0 0 6px; }
.acct .page-head p { margin: 0; max-width: 680px; }
.acct .page-head form { margin: 0; }

/* The site switcher, for customers with more than one website. */
.acct .chips { gap: 8px; margin: 0 0 26px; }
.acct .chips a { gap: 9px; min-height: 40px; padding: 5px 16px 5px 6px; border: 1px solid var(--line); border-radius: 100px; background: var(--card); font-weight: 500; font-size: 14px; }
.acct .chips a:hover { border-color: var(--line-2); }
.acct .chips a[aria-current="true"] { border-color: var(--black); background: var(--black); color: var(--on-black); }
.acct .chips a .chip__dot { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: hsl(var(--h, 20) 45% 90%); color: hsl(var(--h, 20) 35% 26%); font-size: 12px; font-weight: 600; letter-spacing: .02em; }

/* Round initials for people (message senders) and the account owner. */
.acct .avatar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: hsl(var(--h, 20) 46% 90%); color: hsl(var(--h, 20) 38% 25%); font-size: 15px; font-weight: 600; letter-spacing: .02em; }

/* ---------- Overview ---------- */
.acct .hello { margin: 0 0 24px; }
.acct .hello__date { margin: 0 0 4px; color: var(--ink-3); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.acct .hello__title { margin: 0; }
.acct .site-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 30px; align-items: center; padding: 22px; }
.acct .site-hero--solo { grid-template-columns: minmax(0, 1fr); padding: 26px; }
.acct .site-hero__body { min-width: 0; padding: 6px 8px 6px 0; }
.acct .site-hero .h2 { gap: 10px; margin: 0 0 8px; font: 400 clamp(24px, 2.4vw, 30px)/1.2 var(--display); letter-spacing: -.005em; }
.acct .site-hero .h2 .badge { font-family: var(--sans); }
.acct .site-hero__domain { margin: 14px 0 0; font-weight: 500; }
.acct .site-hero__domain a { text-underline-offset: 3px; }
.acct .site-hero .row { margin-top: 20px; }
.acct .site-hero .row form { margin: 0; }

/* A small live window onto the customer's site (account/app.php scales the 1280px page to fit). */
.acct .peek { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: 0 18px 40px -26px rgba(56, 44, 36, .45); }
.acct .peek__bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--soft); }
.acct .peek__bar i { width: 9px; height: 9px; border-radius: 50%; background: #E6D5CE; }
.acct .peek__bar i:nth-child(2) { background: #EFE2C6; }
.acct .peek__bar i:nth-child(3) { background: #D6E3D8; }
.acct .peek__bar span { overflow: hidden; margin-left: 10px; padding: 1px 12px; border-radius: 100px; background: var(--card); color: var(--ink-3); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.acct .peek__screen { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--soft), var(--bone-2)); }
.acct .peek__screen iframe { position: absolute; top: 0; left: 0; width: 1280px; height: 800px; border: 0; transform: scale(var(--s, .34)); transform-origin: 0 0; pointer-events: none; }

.acct .stats { gap: 16px; margin: 0 0 20px; }
.acct .stat { position: relative; gap: 1px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow); }
.acct .stat__icon { display: grid; place-items: center; width: 38px; height: 38px; margin: 0 0 12px; border-radius: 12px; background: var(--blush); color: #8C4A3C; }
.acct .stat__icon .si { width: 19px; height: 19px; }
.acct .stat:nth-child(3n+2) .stat__icon { background: var(--sage); color: #2F6A48; }
.acct .stat:nth-child(3n+3) .stat__icon { background: var(--lilac); color: #5E47A0; }
.acct .stat__label { color: var(--ink-3); font-size: 13px; font-weight: 500; }
.acct .stat__value { font: 400 34px/1.15 var(--display); letter-spacing: -.01em; }
.acct .stat__value--sm { font: 600 17px/1.35 var(--sans); letter-spacing: 0; }
.acct .stat__sub { color: var(--ink-3); font-size: 13px; }
.acct .stat__sub a { color: var(--ink-2); text-underline-offset: 3px; }
.acct .stat--link { transition: border-color .2s, transform .2s, box-shadow .2s; }
.acct .stat--link:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: 0 18px 38px -24px rgba(56, 44, 36, .45); }
.acct .stat--link::after { content: ""; position: absolute; top: 24px; right: 22px; width: 8px; height: 8px; border-top: 1.5px solid var(--ink-3); border-right: 1.5px solid var(--ink-3); transform: rotate(45deg); }

/* Getting a new site online: a friendly checklist. */
.acct .launch__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; counter-reset: step; }
.acct .launch__steps li { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px dashed var(--line-2); border-radius: 18px; }
.acct .launch__steps li.is-done { border-style: solid; border-color: #CFE2D4; background: var(--ok-soft); }
.acct .launch__steps li.is-next { border-style: solid; border-color: var(--line-2); background: var(--butter); }
.acct .launch__mark { display: grid; place-items: center; width: 28px; height: 28px; border: 1.5px solid var(--line-2); border-radius: 50%; background: var(--card); font-size: 13px; font-weight: 600; }
.acct .launch__steps li.is-done .launch__mark { border-color: var(--ok); background: var(--ok); color: #fff; }
.acct .launch__mark .si { width: 15px; height: 15px; stroke-width: 3; }
.acct .launch__steps strong { font-size: 14.5px; font-weight: 600; }
.acct .launch__steps p { margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
.acct .launch__steps a { color: var(--ink); font-weight: 500; text-underline-offset: 3px; }

/* ---------- Messages ---------- */
.acct .leads { gap: 14px; }
.acct .lead { display: flex; gap: 16px; padding: 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow); }
.acct .lead--new { border-color: #CFE2D4; box-shadow: var(--shadow), inset 0 0 0 1px #CFE2D4; }
.acct .lead__body { flex: 1; min-width: 0; }
.acct .lead__head { gap: 8px 10px; }
.acct .lead__head strong { font-size: 16px; font-weight: 600; }
.acct .lead__when { color: var(--ink-3); font-size: 13px; }
.acct .lead__svc { display: inline-block; margin: 8px 0 0; padding: 2px 10px; border-radius: 100px; background: var(--sky); color: #2F5D7C; font-size: 12.5px; font-weight: 500; }
.acct .lead__msg { position: relative; margin: 12px 0 0; padding: 13px 16px; border-radius: 4px 18px 18px 18px; background: var(--bone); color: var(--ink); font-size: 15px; line-height: 1.6; }
.acct .lead__contact { gap: 8px; margin: 14px 0 0; }
.acct .lead__contact a { gap: 8px; min-height: 36px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 100px; font-size: 13.5px; font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.acct .lead__contact a:hover { border-color: var(--line-2); background: var(--soft); text-decoration: none; }
.acct .lead__contact .si { width: 16px; height: 16px; color: var(--ink-2); }
.acct .alerts { padding: 18px 22px; }
.acct .alerts__head .h2 { font-size: 16px; }
.acct .alerts__head::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(45deg); transition: transform .2s; }
.acct .alerts[open] .alerts__head::after { transform: rotate(-135deg); }
.acct .alerts__head .small { order: 3; }
.acct .empty { display: grid; justify-items: center; gap: 6px; padding: 42px 24px; text-align: center; }
.acct .empty__art { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 0 8px; border-radius: 50%; background: var(--blush); color: #8C4A3C; }
.acct .empty__art .si { width: 28px; height: 28px; stroke-width: 1.6; }
.acct .empty p { max-width: 460px; margin: 0; color: var(--ink-2); }
.acct .empty strong { font-size: 17px; font-weight: 600; }

/* ---------- Domain ---------- */
.acct .search { gap: 10px; }
.acct .search .btn { min-height: 46px; }
.acct .dlist { border-radius: 18px; }
.acct .dlist__row { padding: 14px 18px; }
.acct .dlist__name { font-weight: 600; }
.acct .dsteps li > span { background: var(--soft); }
.acct .dsteps li.is-done > span { background: var(--ok); }
.acct .dsteps li.is-now > span { background: var(--black); }
.acct .tablewrap { border-radius: 16px; }
.acct .table thead th { background: var(--soft); }

/* ---------- Billing and account ---------- */
.acct .facts { gap: 0; margin: 4px 0; }
.acct .facts > div { grid-template-columns: 200px minmax(0, 1fr); padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.acct .facts > div:last-child { border-bottom: 0; }
.acct .plan-card__head { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; }
.acct .plan-card__icon { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--butter); color: #85570F; }
.acct .plan-card__icon .si { width: 22px; height: 22px; }
.acct .plan-card__head .h2 { margin: 0; }
.acct .me-card { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.acct .me-card .avatar { width: 56px; height: 56px; font-size: 19px; }
.acct .me-card__who { flex: 1; min-width: 200px; }
.acct .me-card__who p { margin: 0; }
.acct .me-card__who strong { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }

/* ---------- Sign in ---------- */
.acct .gate { position: relative; isolation: isolate; overflow: hidden; align-content: center; gap: 18px; }
.acct .gate::before, .acct .gate::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.acct .gate::before { top: -180px; left: -160px; width: 560px; height: 560px; background: radial-gradient(circle, #F2DAD2 0%, rgba(242, 218, 210, 0) 68%); }
.acct .gate::after { right: -220px; bottom: -240px; width: 660px; height: 660px; background: radial-gradient(circle, #E6DEF2 0%, rgba(230, 222, 242, 0) 68%); }
.acct .gate__card { position: relative; max-width: 440px; padding: 38px 36px 32px; border: 1px solid var(--line); border-radius: 28px; background: var(--card); box-shadow: 0 1px 2px rgba(56, 44, 36, .04), 0 30px 60px -36px rgba(56, 44, 36, .45); }
.acct .gate__card::before { content: ""; position: absolute; top: 26px; right: 28px; width: 26px; height: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5c.5 5.2 2.3 7 7.5 7.5-5.2.5-7 2.3-7.5 7.5-.5-5.2-2.3-7-7.5-7.5 5.2-.5 7-2.3 7.5-7.5z' fill='%23D9A99C'/%3E%3Cpath d='M19.5 14.5c.2 2.2 1 3 3 3.2-2 .2-2.8 1-3 3.2-.2-2.2-1-3-3-3.2 2-.2 2.8-1 3-3.2z' fill='%23C9B8E4'/%3E%3C/svg%3E") center / contain no-repeat; }
.acct .gate__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.acct .gate__brand img { width: auto; height: 26px; }
.acct .gate__card h1 { margin: 26px 0 10px; font: 400 36px/1.1 var(--display); letter-spacing: -.01em; }
.acct .gate__card .lede { margin: 0 0 20px; color: var(--ink-2); font-size: 15px; }
.acct .gate__out { margin-top: 18px; }
.acct .gate__out a { color: var(--ink-2); text-underline-offset: 3px; }
.acct .gate__new { margin: 0; color: var(--ink-3); font-size: 14px; text-align: center; }
.acct .gate__new a { color: var(--ink); text-underline-offset: 3px; }

/* ---------- Tablets and phones ---------- */
@media (max-width: 1000px) {
  .acct .top__in { flex-wrap: wrap; padding: 12px 20px; }
  .acct .tabs { order: 3; width: 100%; margin: 0; justify-content: space-between; overflow-x: auto; }
  .acct .tabs a { flex: 1 0 auto; justify-content: center; }
  .acct .site-hero { grid-template-columns: minmax(0, 1fr); }
  .acct .launch__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  /* A fixed bar needs the header without backdrop-filter (it would become the bar's containing block). */
  .acct .top { position: relative; backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--page); }
  .acct .top__in { min-height: 60px; padding: 10px 16px; }
  .acct .brand__text span { display: block; }
  .acct .tabs { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 40; display: flex; gap: 2px; width: auto; margin: 0; padding: 5px; overflow: visible; border-radius: 24px; background: var(--tabbar); box-shadow: 0 16px 40px -12px rgba(56, 44, 36, .4); }
  .acct .tabs a { flex: 1 1 0; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; min-height: 54px; padding: 6px 2px; border-radius: 19px; font-size: 11.5px; line-height: 1.1; }
  .acct .tabs a .si { width: 21px; height: 21px; }
  .acct .tabs__label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .acct .tabs__short { display: block; overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
  .acct .tabs .dot { position: absolute; top: 3px; left: calc(50% + 5px); }
  .acct .main { padding: 24px 16px calc(112px + env(safe-area-inset-bottom)); }
  .acct .h1 { margin-bottom: 18px; }
  .acct .card { padding: 20px 18px; border-radius: 20px; }
  .acct .site-hero { gap: 18px; padding: 14px; }
  .acct .site-hero__body { padding: 0 4px 6px; }
  .acct .stats, .acct .stats--3 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .acct .stat { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 14px; padding: 16px 18px; }
  .acct .stat__icon { grid-row: 1 / span 3; margin: 0; }
  .acct .stat__value { font-size: 28px; }
  .acct .launch__steps { grid-template-columns: minmax(0, 1fr); }
  .acct .lead { gap: 12px; padding: 18px 16px; }
  .acct .lead .avatar { width: 38px; height: 38px; font-size: 13.5px; }
  .acct .lead__when { flex-basis: 100%; margin-left: 0; }
  .acct .facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .acct .chips { flex-wrap: nowrap; margin: 0 -16px 22px; padding: 0 16px 4px; overflow-x: auto; }
  .acct .chips a { flex: none; }
  .acct .gate { padding: 28px 14px; }
  .acct .gate__card { padding: 30px 22px 26px; border-radius: 24px; }
  .acct .gate__card h1 { font-size: 31px; }
}
@media (prefers-reduced-motion: reduce) {
  .acct .btn, .acct .stat--link, .acct .tabs a, .acct .alerts__head::after { transition: none; }
  .acct .stat--link:hover { transform: none; }
}