/* Formelle — Account / Membership management shell
   (Desktop · Account 01–15, Figma section "Formelle Web Account ·
   Management Flow", node 14146:15740)

   Shared shell reused by every screen in this section: editorial photo
   backdrop + pearl glow + glass header + glass canvas containing a glass
   nav sidebar and a main content pane. Individual screens only supply
   their own main-content markup inside .account-main.

   NOTE on the small "01"/"03"/... index label seen in the top-left
   corner of every reference frame: it lines up with each frame's own
   Figma name ("Desktop · Account 01 ...", "... Account 03 ...") and
   changes per-screen in lockstep with the frame number — that's a
   designer/reviewer annotation for talking about frames in Figma, not
   product UI a real signed-in user would see, so it's intentionally
   left out of the build here.

   NOTE on the background photo: pixel/visual match against the two
   already-approved auth screens shows this is the same editorial image
   already in /assets/hero-background.jpg — reused rather than
   re-exporting a duplicate asset. */

.account-screen {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #F6F2EC;
}

/* FIX (client-reported, 2026-09-25 — same root cause as the matching fix
   in auth.css): this was `inset: 0`, stretching to .account-screen's full
   SCROLLABLE height. On mobile, account pages routinely run well past one
   viewport (e.g. Help & support measures ~1764px tall at 375px wide, vs
   an 812px screen), so `background-size: cover` had to fit the photo's
   1920×1200 landscape aspect ratio into an extremely tall, narrow box —
   forcing a heavy zoom that left only a small sliver of the photo's width
   on screen instead of the intended framing. Capped to `height: 100vh` so
   `cover` always sizes against a normal viewport-like box. Below that
   first 100vh the page shows through to .account-screen's own
   `background: #F6F2EC` — but a flat height cutoff alone left a visible
   hard edge where this layer stopped (screenshotted and confirmed), so a
   third gradient layer (listed first = painted on top of the wash +
   photo) fades this layer itself to that same `#F6F2EC` over its last
   20%, blending it into the plain background below instead of ending in
   a hard line. */
.account-screen::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  z-index: 0;
  background-image:
    linear-gradient(to bottom, rgba(246, 242, 236, 0) 80%, #F6F2EC 100%),
    linear-gradient(rgba(246, 242, 236, 0.78), rgba(246, 242, 236, 0.78)),
    url('/assets/hero-background.jpg');
  background-size: cover;
  background-position: center 15%;
  opacity: 0.94;
}

/* FIX (client-reported follow-up, 2026-09-25 — same fix as the matching
   rule in auth.css): the 100vh cap above fixed the "barely-recognizable
   sliver" bug, but a capped box is still a landscape photo (1920×1200,
   aspect ~1.6) squeezed into a tall/narrow phone-portrait box, so `cover`
   still zooms in hard and leaves only ~29% of the photo's width visible
   at a 375×812 viewport — still an overly tight crop by the client's
   read. Shortening the box on narrow screens brings its aspect ratio
   closer to the photo's own, so `cover` needs less zoom and shows
   proportionally more of the photo's width (~50% at 58vh/375px, more on
   shorter viewports). */
@media (max-width: 480px) {
  .account-screen::before {
    height: 58vh;
  }
}

/* Soft pearl-white glow, upper right — a blurred radial light, not a
   real asset (sampled reference shows a plain soft blur, no texture). */
.account-screen::after {
  content: "";
  position: absolute;
  top: -260px;
  right: -120px;
  z-index: 0;
  width: 760px;
  height: 760px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.35) 45%, rgba(255, 255, 255, 0) 72%);
  pointer-events: none;
}

.account-header,
.account-body {
  position: relative;
  z-index: 1;
}

.account-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  padding: 0 63px;
  background: rgba(255, 255, 255, 0.42);
  border-bottom: 1px solid rgba(255, 255, 255, 0.72);
  flex-shrink: 0;
}

.account-header__logo {
  height: 22px;
  display: block;
}

.account-header__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.88px;
  color: #6b6b6b;
  text-transform: uppercase;
}

/* ---- Mobile hamburger toggle (client request, 2026-09-26) -------------
   .account-header__right just groups the existing label with the new
   button so .account-header's own space-between (logo on one side,
   this group on the other) needs no change. The button itself is
   hidden here and only shown <=960px (see the media query below),
   where .account-nav is likewise hidden until toggled open — see that
   media query's own comment for the full picture. */
.account-header__right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.account-header__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.account-header__hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  background: #202020;
  border-radius: 2px;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

/* Open state: middle bar fades out, top/bottom bars form an "X" —
   purely cosmetic, no layout implication for anything else. */
.account-header__hamburger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.account-header__hamburger.is-open span:nth-child(2) {
  opacity: 0;
}
.account-header__hamburger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.account-body {
  flex: 1;
  display: flex;
  padding: 40px 64px 64px;
  box-sizing: border-box;
}

.account-canvas {
  flex: 1;
  display: flex;
  gap: 28px;
  padding: 28px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.47);
  border: 1.5px solid rgba(255, 255, 255, 0.92);
  border-radius: 34px;
  min-height: 710px;
  align-items: flex-start;
}

/* ---- Nav sidebar ---------------------------------------------------- */

.account-nav {
  flex: 0 0 246px;
  box-sizing: border-box;
  padding: 30px 16px;
  background: rgba(255, 255, 255, 0.3);
  border: 1.5px solid rgba(255, 255, 255, 0.92);
  border-radius: 26px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.account-nav__eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
  color: #6b6b6b;
  text-transform: uppercase;
  margin: 0 8px 16px;
}

.account-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.account-nav__item {
  display: block;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 13px;
  color: #202020;
  margin-bottom: 8px;
}

.account-nav__item.is-active {
  font-weight: 600;
  background: rgba(224, 218, 205, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.88);
}

.account-nav__divider {
  height: 1px;
  background: rgba(32, 32, 32, 0.1);
  margin: 12px 8px 20px;
}

.account-nav__email {
  font-size: 11px;
  color: #6b6b6b;
  margin: 0 8px 20px;
}

.account-nav__logout {
  display: block;
  /* FIX (client-reported, 2026-09-23): this was `margin: auto 8px 0` —
     the `auto` top margin deliberately pushed Logout down to consume
     all of .account-nav's own leftover flex space, pinning it to the
     card's bottom edge. That's what put it "almost at the bottom of
     the screen" instead of just under the email line, per the client's
     screenshot. Same 20px gap .account-nav__email and
     .account-nav__divider already use below themselves, so Logout now
     sits directly under the email line with the same rhythm as every
     other gap in this list — nothing else in the nav (its own height/
     stretch, the list items, the divider, the email line) is touched. */
  margin: 0 8px 0;
  font-size: 12px;
  font-weight: 600;
  color: #202020;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 0;
}

/* ---- Main content pane ----------------------------------------------- */

.account-main {
  flex: 1;
  min-width: 0;
  padding: 26px 32px 26px 8px;
  box-sizing: border-box;
}

.account-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(228, 218, 216, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.8);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: #6b6b6b;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.account-status-pill.is-active {
  background: rgba(200, 214, 197, 0.6);
}

.account-status-pill.is-warning {
  background: rgba(233, 210, 179, 0.65);
}

.account-title {
  font-size: 36px;
  font-weight: 600;
  line-height: 1.2;
  color: #202020;
  margin: 0 0 12px;
}

.account-subtitle {
  font-size: 16px;
  color: #6b6b6b;
  margin: 0 0 28px;
  max-width: 640px;
}

/* Same look as .auth-error on Sign In/Create Account — reused here so
   a failed/canceled Stripe Checkout redirect back to Overview reads as
   the same product, not a different error style. */
.account-error {
  background: #FBEAEA;
  color: #9A3B3B;
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 20px;
  max-width: 640px;
}

.account-summary-card {
  background: rgba(255, 255, 255, 0.4);
  border: 1.5px solid rgba(255, 255, 255, 0.92);
  border-radius: 28px;
  padding: 24px 32px;
  margin-bottom: 28px;
}

.account-summary-card__eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
  color: #6b6b6b;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.account-summary-card__title {
  font-size: 22px;
  font-weight: 600;
  color: #202020;
  margin: 0 0 8px;
}

.account-summary-card__note {
  font-size: 14px;
  color: #6b6b6b;
  margin: 0;
}

.account-summary-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* Plan option cards (Monthly / Quarterly / Annual) */
.account-plan-grid {
  display: flex;
  gap: 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.account-plan-card {
  flex: 1 1 200px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 24px;
  padding: 18px 18px 16px;
}

.account-plan-card.is-selected {
  background: rgba(255, 255, 255, 0.52);
  border: 1.5px solid rgba(183, 180, 192, 0.92);
}

.account-plan-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.account-plan-card__name {
  font-size: 11px;
  color: #202020;
}

.account-plan-card__radio {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid #b7b4c0;
  box-sizing: border-box;
  flex-shrink: 0;
}

.account-plan-card.is-selected .account-plan-card__radio {
  border-color: #202020;
  background: radial-gradient(circle, #202020 0 5px, transparent 6px);
}

.account-plan-card__price {
  font-size: 24px;
  font-weight: 600;
  color: #202020;
  margin: 0 0 2px;
  line-height: 1.25;
}

.account-plan-card__period {
  font-size: 10px;
  color: #202020;
  margin: 0 0 6px;
}

.account-plan-card__meta {
  font-size: 9px;
  color: #6b6b6b;
  margin: 0;
}

/* Free-trial line — same rule signup.css defines for Create Account's
   cards (kept there too, since that page doesn't load this file's
   companion account.css-only pages don't need it duplicated); added
   here so Overview's no-membership plan picker (the other screen that
   reuses .account-plan-card, now data-driven off lib/plans.js instead
   of its own hardcoded copy) can show the same trial line correctly. */
.account-plan-card__trial {
  font-size: 9px;
  font-weight: 700;
  color: var(--color-eyebrow);
  margin: 4px 0 0;
}

/* Buttons */
.account-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  /* FIX (mobile, 2026-09-26): without this, a bare <button style={flex:1}>
     (e.g. AccountNav's "Stay signed in") collapses below its 50px height
     once .account-btn-row switches to flex-direction: column at
     max-width:480px — flex-basis:0% from the inline flex:1 wins over the
     height above during layout, shrinking the button to its text's own
     min-content size. A sibling button wrapped in a <form> (e.g. "Log
     out") isn't affected, since the form — not the button — is the flex
     item there. min-height is a separate clamp that flex-basis can't
     override, so it restores the same 50px floor in both cases without
     touching any component markup. */
  min-height: 50px;
  padding: 0 28px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  text-align: center;
  transition: opacity 0.15s ease;
}

.account-btn:hover {
  opacity: 0.9;
}

.account-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.account-btn:disabled:hover {
  opacity: 0.45;
}

.account-btn--primary {
  background: rgba(32, 32, 32, 0.96);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.84);
}

.account-btn--secondary {
  background: rgba(255, 255, 255, 0.5);
  color: #202020;
  border-color: rgba(0, 0, 0, 0.12);
}

.account-btn--danger {
  background: #ffffff;
  color: #9a3b3b;
  border-color: rgba(154, 59, 59, 0.35);
}

.account-btn--block {
  width: 100%;
}

/* Fixed-width-then-centered CTA (e.g. the plan-selection "Continue to
   secure checkout" button on the no-membership overview) — 350px matches
   the reference at desktop width, but as a real width (not just a
   flex-basis) it would overflow a narrow phone's content column and get
   silently clipped by .account-screen's overflow:hidden. max-width keeps
   the 350px look on desktop while letting it shrink to fit on mobile. */
.account-btn--centered-wide {
  display: flex;
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
}

.account-btn-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Detail rows (personal details / billing rows) */
.account-detail-list {
  display: flex;
  flex-direction: column;
}

.account-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(32, 32, 32, 0.08);
}

.account-detail-row:last-child {
  border-bottom: none;
}

.account-detail-row__label {
  font-size: 12px;
  color: #6b6b6b;
  margin: 0 0 4px;
}

.account-detail-row__value {
  font-size: 15px;
  font-weight: 500;
  color: #202020;
  margin: 0;
}

.account-field {
  margin-bottom: 20px;
}

.account-field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #202020;
  margin-bottom: 8px;
}

.account-field input {
  width: 100%;
  height: 46px;
  box-sizing: border-box;
  padding: 0 16px;
  border: 1px solid #e3e0dd;
  border-radius: 12px;
  background: #ffffff;
  font-size: 14px;
  color: #202020;
  outline: none;
}

.account-field input:focus {
  border-color: #202020;
}

/* Confirmation / empty-state icon circle */
.account-confirm-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  background: rgba(200, 214, 197, 0.55);
  color: #3f6b45;
}

.account-confirm-icon.is-warning {
  background: rgba(233, 210, 179, 0.6);
  color: #8a5a2b;
}

/* Neutral tone — sign-out / non-success, non-warning confirmations
   (e.g. the Log out modal's arrow icon). */
.account-confirm-icon.is-neutral {
  background: rgba(32, 32, 32, 0.08);
  color: #202020;
}

/* Help & support list */
.account-help-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.account-help-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 18px;
}

.account-help-row__title {
  font-size: 14px;
  font-weight: 600;
  color: #202020;
  margin: 0 0 4px;
}

.account-help-row__meta {
  font-size: 12px;
  color: #6b6b6b;
  margin: 0;
}

/* ---- Modal (Log out confirmation) ------------------------------------
   Re-matched against the Figma reference (Account 15). Two things
   changed from the first pass:

   1. Hidden by default (`display: none`), toggled open with `.is-open`.
      This partial is now included on every account screen (see
      views/partials/account-nav.ejs) so the "Log out" link can open it
      in place — on whatever page the user is already on — instead of
      navigating to a dedicated /account/logout page that replaced the
      whole screen (losing the real page content behind it, which is
      exactly what the client's reference screenshot shows staying
      visible/dimmed behind the popup). views/account/logout-confirm.ejs
      (the plain, no-JS fallback for GET /account/logout) adds
      `is-open` directly in its markup so it still renders the modal
      immediately with no script needed.
   2. Sizing/tone corrected against the reference screenshot: the
      backdrop is a light frosted wash, not a dark scrim, and the card
      itself is the same translucent glass treatment as this app's other
      panels (e.g. .account-summary-card) rather than solid opaque
      white — both matter because the reference clearly shows the real
      page content still faintly readable behind the overlay and the
      card. Card size/icon size/title size below are measured off the
      reference image (normalized against this project's own .account-btn
      height, 50px, which lines up almost exactly with the button height
      measured in that screenshot — see DESIGN_NOTES.md for the numbers). */

.account-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.account-modal-overlay.is-open {
  display: flex;
}

.account-modal {
  width: 100%;
  max-width: 600px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.55);
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: 28px;
  padding: 48px 48px 40px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(32, 32, 32, 0.16);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* This modal's icon reads noticeably larger in the reference than the
   56px .account-confirm-icon is elsewhere (measured ~72px equivalent) —
   scoped to this modal only, so the shared component's default size is
   untouched for any other screen that reuses it. */
.account-modal .account-confirm-icon {
  width: 72px;
  height: 72px;
  font-size: 20px;
}

.account-modal__title {
  font-size: 26px;
  font-weight: 600;
  color: #202020;
  margin: 0 0 18px;
}

.account-modal__body {
  font-size: 14px;
  line-height: 1.5;
  color: #6b6b6b;
  margin: 0 0 40px;
}

@media (max-width: 480px) {
  .account-modal {
    padding: 36px 28px 32px;
  }
}

/* ---- "Get the app" card (App Store / Google Play) ---------------------
   Approved placement: Option C from the design review — a dedicated card
   reusing .account-summary-card's exact visual language (same glass
   background, border and 28px radius) so it reads as a native part of
   this page's own component set rather than a bolted-on banner. Appears
   at the bottom of .account-main on Overview (active-membership branch)
   and Membership & billing — the two screens that already mirror each
   other's summary-card markup. */

.account-app-card {
  background: rgba(255, 255, 255, 0.4);
  border: 1.5px solid rgba(255, 255, 255, 0.92);
  border-radius: 28px;
  padding: 24px 32px;
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.account-app-card__eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
  color: #6b6b6b;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.account-app-card__title {
  font-size: 18px;
  font-weight: 600;
  color: #202020;
  margin: 0 0 4px;
}

.account-app-card__note {
  font-size: 13px;
  color: #6b6b6b;
  margin: 0;
}

.account-app-card__stores {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.account-app-card__store-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border-radius: 12px;
  background: rgba(32, 32, 32, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.84);
  transition: opacity 0.15s ease;
}

.account-app-card__store-btn:hover {
  opacity: 0.9;
}

.account-app-card__store-btn-icon {
  line-height: 0;
}

.account-app-card__store-btn-text {
  text-align: left;
  line-height: 1.15;
}

.account-app-card__store-btn-eyebrow {
  display: block;
  font-size: 8.5px;
  font-weight: 500;
  color: #C9C9C9;
  letter-spacing: 0.3px;
}

.account-app-card__store-btn-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
}

@media (max-width: 480px) {
  .account-app-card {
    padding: 20px;
  }
}

/* ---- Responsive ------------------------------------------------------- */

@media (max-width: 960px) {
  .account-body {
    padding: 24px 20px 40px;
  }
  /* FIX (mobile/tablet responsiveness pass): .account-canvas's desktop
     min-height (710px, set in the base rule above) exists so the nav
     sidebar has something tall to stretch against next to a two-column
     row layout. Once this breakpoint switches .account-canvas to a
     single stacked column, that same 710px minimum no longer describes
     "how tall the row is" — it becomes an artificial floor on the whole
     stacked column's height. On any screen where the nav list + main
     content's own stacked height comes in under 710px (roughly
     481–959px — a phone in this column layout is usually already
     taller than that from its own wrapped content, so it wasn't
     visible there), the column got stretched to fill it, and
     `.account-nav`'s flex-grow (below) dumped all of that extra space
     into the nav card — pushing "Log out" far down the sidebar with a
     large empty gap above it. Resetting min-height to 0 here lets the
     stacked column be exactly as tall as its own content on every
     screen at or under this breakpoint. */
  .account-canvas {
    flex-direction: column;
    padding: 20px;
    min-height: 0;
  }
  /* FIX: flex-grow reset to 0 (was 1 1 auto) — in the desktop row
     layout, growing to fill .account-canvas's height is exactly what
     makes the nav match the main pane's height; stacked in a column,
     there's no sibling height to match, so growth here only means
     "inflate to fill whatever the column's own height happens to be" —
     the direct cause of the gap above. The nav should simply be as
     tall as its own content (Overview/Personal details/Membership &
     billing list + email + Log out) once stacked, same as every other
     panel in the column. */
  /* Client request, 2026-09-26: replace the always-visible stacked nav
     below with a hamburger-toggled one. `display: none` here is new;
     everything else on this rule (flex/width, for when it IS shown)
     is exactly what was already here before this change. */
  .account-nav {
    flex: 0 0 auto;
    width: 100%;
    display: none;
  }
  .account-nav.is-mobile-open {
    display: flex;
  }
  .account-header__hamburger {
    display: flex;
  }
  .account-header {
    padding: 0 24px;
  }
  .account-title {
    font-size: 28px;
  }
  .account-plan-grid {
    flex-direction: column;
  }
  /* .account-plan-card's flex-basis (200px) is a min-WIDTH in the normal
     row layout above, but flex-direction:column here would otherwise
     reinterpret that same 200px as a min-HEIGHT, forcing each card
     taller than its content and leaving a large empty gap underneath
     the meta line. Reset the basis so cards hug their content when
     stacked. */
  .account-plan-card {
    flex: 0 0 auto;
  }
}

@media (max-width: 480px) {
  .account-summary-card {
    padding: 20px;
  }
  .account-title {
    font-size: 24px;
  }
  .account-btn-row {
    flex-direction: column;
  }
  .account-field input {
    font-size: 16px;
  }
}