/* Growth + retention page recipes (.grw-*) for /calculator, /referral, /inbox, and
   /account, ported from the prototype's growth.jsx (PointsCalculator, ReferralPage) and
   retention.jsx (Inbox, Account). Token-consuming only: every design value resolves
   through a --dvc-* custom property - raw hex/px literals appear exclusively in the
   --dvc-grw-* component-local token block below (this file's tokenization point).
   Pages link this file from their Styles section. */

:root {
  /* --- type scale (prototype px values) --- */
  --dvc-grw-fs-10-5: 10.5px;
  --dvc-grw-fs-11: 11px;
  --dvc-grw-fs-11-5: 11.5px;
  --dvc-grw-fs-12: 12px;
  --dvc-grw-fs-12-5: 12.5px;
  --dvc-grw-fs-13: 13px;
  --dvc-grw-fs-13-5: 13.5px;
  --dvc-grw-fs-14: 14px;
  --dvc-grw-fs-14-5: 14.5px;
  --dvc-grw-fs-15: 15px;
  --dvc-grw-fs-15-5: 15.5px;
  --dvc-grw-fs-16: 16px;
  --dvc-grw-fs-16-5: 16.5px;
  --dvc-grw-fs-17: 17px;
  --dvc-grw-fs-19: 19px;
  --dvc-grw-fs-22: 22px;
  --dvc-grw-fs-27: 27px;
  --dvc-grw-fs-40: 40px;
  --dvc-grw-fs-46: 46px;

  /* --- micro spacing scale (prototype px values) --- */
  --dvc-grw-sp-2: 2px;
  --dvc-grw-sp-4: 4px;
  --dvc-grw-sp-5: 5px;
  --dvc-grw-sp-6: 6px;
  --dvc-grw-sp-8: 8px;
  --dvc-grw-sp-10: 10px;
  --dvc-grw-sp-11: 11px;
  --dvc-grw-sp-12: 12px;
  --dvc-grw-sp-13: 13px;
  --dvc-grw-sp-14: 14px;
  --dvc-grw-sp-15: 15px;
  --dvc-grw-sp-16: 16px;
  --dvc-grw-sp-18: 18px;
  --dvc-grw-sp-20: 20px;
  --dvc-grw-sp-22: 22px;
  --dvc-grw-sp-24: 24px;
  --dvc-grw-sp-26: 26px;
  --dvc-grw-sp-28: 28px;
  --dvc-grw-sp-30: 30px;

  /* --- calculator --- */
  --dvc-grw-calc-max: 940px;
  --dvc-grw-calc-overlap: 44px;
  --dvc-grw-result-col: 360px;
  --dvc-grw-readout-size: 110px;
  --dvc-grw-glass-bg: rgba(255, 255, 255, 0.16);
  --dvc-grw-glass-blur: 4px;
  --dvc-grw-hero-sub-max: 520px;
  --dvc-grw-ink-divider: rgba(255, 255, 255, 0.16);
  --dvc-grw-net-green: #7FE0B0;
  --dvc-grw-strip-radius: 12px;
  --dvc-grw-on-ink: #fff;
  --dvc-grw-total-tracking: -0.03em;

  /* --- referral --- */
  --dvc-grw-ref-max: 880px;
  --dvc-grw-gift-size: 64px;
  --dvc-grw-gift-radius: 18px;
  --dvc-grw-how-tile: 42px;
  --dvc-grw-how-tile-radius: 11px;

  /* --- inbox --- */
  --dvc-grw-list-col: 320px;
  --dvc-grw-active-border: 3px;
  --dvc-grw-unread-size: 11px;
  --dvc-grw-unread-ring: 2px;
  --dvc-grw-unread-inset: -1px;
  --dvc-grw-bubble-radius: 16px;
  --dvc-grw-bubble-tail: 5px;
  --dvc-grw-send-size: 46px;

  /* --- account --- */
  --dvc-grw-acct-nav-col: 220px;
  --dvc-grw-acct-gap: 28px;
}

/* ---------- calculator: hero ---------- */

.grw-glass-badge {
  background: var(--dvc-grw-glass-bg);
  color: var(--dvc-grw-on-ink);
  border-color: transparent;
  backdrop-filter: blur(var(--dvc-grw-glass-blur));
}

.grw-hero-sub {
  font-size: var(--dvc-grw-fs-16-5);
  opacity: 0.95;
  max-inline-size: var(--dvc-grw-hero-sub-max);
}

/* ---------- calculator: overlapping two-panel card ---------- */

.grw-calc-wrap {
  position: relative;
  z-index: 1;
  max-inline-size: var(--dvc-grw-calc-max);
  padding-block-start: 0;
  margin-block-start: calc(-1 * var(--dvc-grw-calc-overlap));
}

.grw-calc-card {
  display: grid;
  grid-template-columns: 1fr var(--dvc-grw-result-col);
  border: var(--dvc-border-width-hairline) solid var(--dvc-line);
  border-radius: var(--dvc-radius-lg);
  overflow: hidden;
  box-shadow: var(--dvc-shadow-lg);
}

.grw-calc-inputs {
  background: var(--dvc-surface);
  padding: var(--dvc-grw-sp-30);
}

.grw-calc-field {
  margin-block-start: var(--dvc-grw-sp-14);
}

.grw-calc-field .sp-picker > summary {
  inline-size: 100%;
  border: var(--dvc-border-width-hairline) solid var(--dvc-line-2);
  border-radius: var(--dvc-input-radius);
  background: var(--dvc-surface);
  padding: var(--dvc-grw-sp-8) var(--dvc-grw-sp-14);
}

.grw-points-form {
  margin-block-start: var(--dvc-grw-sp-20);
}

.grw-points-row {
  display: flex;
  align-items: center;
  gap: var(--dvc-grw-sp-16);
}

.grw-points-readout {
  flex: none;
  inline-size: var(--dvc-grw-readout-size);
  text-align: center;
  font-weight: 800;
  font-size: var(--dvc-grw-fs-19);
  padding-block: var(--dvc-input-pad-block);
  border: var(--dvc-border-width-hairline) solid var(--dvc-line-2);
  border-radius: var(--dvc-input-radius);
  background: var(--dvc-surface);
}

.grw-points-row > .app-range {
  flex: 1;
}

.grw-preset-row {
  display: flex;
  gap: var(--dvc-grw-sp-8);
  margin-block-start: var(--dvc-grw-sp-12);
}

.grw-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--dvc-chip-gap);
  font-size: var(--dvc-chip-font-size);
  font-weight: 600;
  padding: var(--dvc-chip-pad-block) var(--dvc-chip-pad-inline);
  border-radius: var(--dvc-radius-pill);
  background: var(--dvc-sand);
  color: var(--dvc-ink-2);
  border: var(--dvc-border-width-hairline) solid var(--dvc-line);
  text-decoration: none;
}

.grw-chip[data-active="true"] {
  background: var(--dvc-ink);
  color: var(--dvc-grw-on-ink);
  border-color: var(--dvc-ink);
}

.grw-years-label {
  margin-block-start: var(--dvc-grw-sp-22);
}

.grw-seg-link {
  padding: var(--dvc-seg-btn-pad-block) var(--dvc-seg-btn-pad-inline);
  font-size: var(--dvc-seg-btn-font-size);
  font-weight: 600;
  color: var(--dvc-muted);
  border-radius: var(--dvc-radius-pill);
  text-decoration: none;
}

.grw-seg-link[data-active="true"] {
  background: var(--dvc-surface);
  color: var(--dvc-ink);
  box-shadow: var(--dvc-shadow-sm);
}

.grw-info-strip {
  display: flex;
  align-items: center;
  gap: var(--dvc-grw-sp-8);
  margin-block-start: var(--dvc-grw-sp-24);
  padding: var(--dvc-grw-sp-12) var(--dvc-grw-sp-14);
  background: var(--dvc-ocean-soft);
  border-radius: var(--dvc-grw-strip-radius);
  font-size: var(--dvc-grw-fs-12-5);
  color: var(--dvc-ink-2);
}

.grw-info-strip > .dvc-icon {
  color: var(--dvc-ocean);
  flex: none;
}

/* ---------- calculator: ink result panel ---------- */

.grw-calc-result {
  display: flex;
  flex-direction: column;
  border-radius: 0;
  padding: var(--dvc-grw-sp-30);
}

.grw-result-total {
  font-size: var(--dvc-grw-fs-46);
  font-weight: 800;
  letter-spacing: var(--dvc-grw-total-tracking);
  line-height: 1;
  margin-block-start: var(--dvc-grw-sp-8);
}

.grw-result-sub {
  font-size: var(--dvc-grw-fs-13-5);
  opacity: 0.8;
  margin-block-start: var(--dvc-grw-sp-6);
}

.grw-result-rows {
  display: flex;
  flex-direction: column;
  gap: var(--dvc-grw-sp-11);
  margin-block: var(--dvc-grw-sp-24) auto;
  margin-inline: 0;
  padding-block-start: var(--dvc-grw-sp-18);
  border-block-start: var(--dvc-border-width-hairline) solid var(--dvc-grw-ink-divider);
}

.grw-result-row {
  display: flex;
  justify-content: space-between;
  gap: var(--dvc-grw-sp-8);
  font-size: var(--dvc-grw-fs-13-5);
}

.grw-result-row > dt {
  font-weight: 400;
  opacity: 0.75;
}

.grw-result-row > dd {
  margin: 0;
}

.grw-result-net {
  font-size: var(--dvc-grw-fs-14-5);
  font-weight: 700;
}

.grw-result-net > dt {
  font-weight: 700;
  opacity: 1;
}

.grw-result-net > dd {
  color: var(--dvc-grw-net-green);
}

.grw-result-cta {
  margin-block-start: var(--dvc-grw-sp-24);
}

.grw-result-foot {
  font-size: var(--dvc-grw-fs-11-5);
  opacity: 0.65;
  text-align: center;
  margin-block-start: var(--dvc-grw-sp-10);
}

/* ---------- calculator: trust chips ---------- */

.grw-trust-row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--dvc-grw-sp-18);
  margin-block: var(--dvc-grw-sp-24) 0;
  margin-inline: 0;
  padding: 0;
}

.grw-trust-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--dvc-grw-sp-8);
  font-size: var(--dvc-grw-fs-13-5);
  font-weight: 600;
  color: var(--dvc-ink-2);
}

.grw-trust-chip > .dvc-icon {
  color: var(--dvc-ocean);
  flex: none;
}

/* ---------- referral ---------- */

.grw-referral {
  max-inline-size: var(--dvc-grw-ref-max);
}

.grw-ref-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.grw-ref-gift {
  display: grid;
  place-items: center;
  inline-size: var(--dvc-grw-gift-size);
  block-size: var(--dvc-grw-gift-size);
  border-radius: var(--dvc-grw-gift-radius);
  background: var(--dvc-coral-soft);
  color: var(--dvc-coral-ink);
  margin-block-end: var(--dvc-grw-sp-18);
}

.grw-ref-title {
  font-size: var(--dvc-grw-fs-40);
  font-weight: 500;
  letter-spacing: var(--dvc-display-spacing);
}

.grw-ref-sub {
  font-size: var(--dvc-grw-fs-16);
  color: var(--dvc-muted);
  line-height: 1.5;
  margin-block-start: var(--dvc-grw-sp-10);
  max-inline-size: var(--dvc-grw-hero-sub-max);
}

.grw-share-card {
  margin-block-start: var(--dvc-grw-sp-30);
  box-shadow: var(--dvc-shadow-md);
}

.grw-share-row {
  display: flex;
  gap: var(--dvc-grw-sp-10);
}

.grw-share-row > .dvc-input {
  font-weight: 600;
  color: var(--dvc-ink-2);
}

.grw-share-row > form {
  flex: none;
}

.grw-share-channels {
  display: flex;
  gap: var(--dvc-grw-sp-10);
  margin-block-start: var(--dvc-grw-sp-12);
}

.grw-share-channels > .dvc-button {
  flex: 1;
}

.grw-how-grid {
  margin-block-start: var(--dvc-grw-sp-28);
}

.grw-how-tile {
  display: grid;
  place-items: center;
  inline-size: var(--dvc-grw-how-tile);
  block-size: var(--dvc-grw-how-tile);
  border-radius: var(--dvc-grw-how-tile-radius);
  background: var(--dvc-coral-soft);
  color: var(--dvc-coral-ink);
}

.grw-how-title {
  font-size: var(--dvc-grw-fs-15);
  font-weight: 800;
  margin-block-start: var(--dvc-grw-sp-14);
}

.grw-how-body {
  font-size: var(--dvc-grw-fs-13);
  color: var(--dvc-muted);
  line-height: 1.5;
  margin-block-start: var(--dvc-grw-sp-5);
}

.grw-invites-card {
  margin-block-start: var(--dvc-grw-sp-28);
  overflow: hidden;
}

.grw-invites-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dvc-grw-sp-12);
  padding: var(--dvc-grw-sp-16) var(--dvc-grw-sp-20);
  border-block-end: var(--dvc-border-width-hairline) solid var(--dvc-line);
}

.grw-invites-title {
  font-size: var(--dvc-grw-fs-15-5);
}

.grw-invites-balances {
  display: flex;
  gap: var(--dvc-grw-sp-18);
  font-size: var(--dvc-grw-fs-13);
  color: var(--dvc-muted);
}

.grw-invites-pending {
  color: var(--dvc-ink-2);
}

.grw-invite-row {
  display: flex;
  align-items: center;
  gap: var(--dvc-grw-sp-13);
  padding: var(--dvc-grw-sp-13) var(--dvc-grw-sp-20);
}

.grw-invite-row + .grw-invite-row {
  border-block-start: var(--dvc-border-width-hairline) solid var(--dvc-line);
}

.grw-invite-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-inline-size: 0;
}

.grw-invite-name {
  font-size: var(--dvc-grw-fs-14-5);
  font-weight: 700;
}

.grw-invite-note {
  font-size: var(--dvc-grw-fs-12-5);
  color: var(--dvc-muted);
}

/* ---------- avatar accent tones (host classes; the RCL default is ocean) ---------- */

.grw-avatar-coral {
  background: var(--dvc-coral);
}

.grw-avatar-ocean {
  background: var(--dvc-ocean);
}

.grw-avatar-gold {
  background: var(--dvc-gold);
}

.grw-avatar-green {
  background: var(--dvc-green);
}

.grw-avatar-neutral {
  background: var(--dvc-line-2);
}

/* ---------- inbox: full-height split ---------- */

.grw-inbox {
  display: flex;
  block-size: var(--app-main-min-block);
  min-block-size: 0;
  max-inline-size: var(--app-page-max);
  margin-inline: auto;
  border-inline: var(--dvc-border-width-hairline) solid var(--dvc-line);
}

.grw-inbox-list {
  flex: 0 0 var(--dvc-grw-list-col);
  overflow-y: auto;
  background: var(--dvc-surface);
  border-inline-end: var(--dvc-border-width-hairline) solid var(--dvc-line);
}

.grw-inbox-head {
  padding: var(--dvc-grw-sp-18) var(--dvc-grw-sp-20) var(--dvc-grw-sp-12);
}

.grw-inbox-title {
  font-size: var(--dvc-grw-fs-22);
  font-weight: 800;
  letter-spacing: var(--dvc-display-spacing);
}

.grw-thread {
  display: flex;
  gap: var(--dvc-grw-sp-12);
  padding: var(--dvc-grw-sp-13) var(--dvc-grw-sp-18);
  border-inline-start: var(--dvc-grw-active-border) solid transparent;
  color: inherit;
  text-decoration: none;
}

.grw-thread[data-active="true"] {
  background: var(--dvc-sand);
  border-inline-start-color: var(--dvc-coral);
}

.grw-thread-avatar {
  position: relative;
  flex: none;
}

.grw-unread-dot {
  position: absolute;
  inset-block-start: var(--dvc-grw-unread-inset);
  inset-inline-end: var(--dvc-grw-unread-inset);
  inline-size: var(--dvc-grw-unread-size);
  block-size: var(--dvc-grw-unread-size);
  border-radius: var(--dvc-radius-pill);
  background: var(--dvc-coral);
  border: var(--dvc-grw-unread-ring) solid var(--dvc-surface);
}

.grw-thread-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-inline-size: 0;
}

.grw-thread-top {
  display: flex;
  justify-content: space-between;
  gap: var(--dvc-grw-sp-8);
}

.grw-thread-name {
  font-size: var(--dvc-grw-fs-14-5);
  font-weight: 700;
  white-space: nowrap;
}

.grw-thread[data-unread="true"] .grw-thread-name {
  font-weight: 800;
}

.grw-thread-time {
  font-size: var(--dvc-grw-fs-12);
  color: var(--dvc-muted);
}

.grw-thread-context {
  font-size: var(--dvc-grw-fs-12-5);
  color: var(--dvc-muted);
}

.grw-thread-preview {
  font-size: var(--dvc-grw-fs-13);
  color: var(--dvc-muted);
  margin-block-start: var(--dvc-grw-sp-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grw-thread[data-unread="true"] .grw-thread-preview {
  color: var(--dvc-ink);
  font-weight: 600;
}

/* ---------- inbox: conversation pane ---------- */

.grw-inbox-pane {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-inline-size: 0;
  background: var(--dvc-bg);
}

.grw-pane-head {
  display: flex;
  align-items: center;
  gap: var(--dvc-grw-sp-12);
  padding: var(--dvc-grw-sp-14) var(--dvc-grw-sp-22);
  border-block-end: var(--dvc-border-width-hairline) solid var(--dvc-line);
  background: var(--dvc-surface);
}

.grw-pane-id {
  flex: 1;
  min-inline-size: 0;
}

.grw-pane-name {
  display: flex;
  align-items: center;
  gap: var(--dvc-grw-sp-8);
  font-size: var(--dvc-grw-fs-15);
  font-weight: 700;
}

.grw-official {
  font-size: var(--dvc-grw-fs-10-5);
}

.grw-pane-context {
  font-size: var(--dvc-grw-fs-12-5);
  color: var(--dvc-muted);
}

.grw-pane-action {
  flex: none;
}

.grw-pane-msgs {
  display: flex;
  flex-direction: column;
  gap: var(--dvc-grw-sp-12);
  flex: 1;
  min-block-size: 0;
  overflow-y: auto;
  padding: var(--dvc-grw-sp-22);
}

.grw-msg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.grw-msg[data-from="me"] {
  align-items: flex-end;
}

.grw-msg-bubble {
  margin: 0;
  max-inline-size: 74%;
  padding: var(--dvc-grw-sp-11) var(--dvc-grw-sp-15);
  border-radius: var(--dvc-grw-bubble-radius);
  border-end-start-radius: var(--dvc-grw-bubble-tail);
  font-size: var(--dvc-grw-fs-14);
  line-height: 1.5;
  background: var(--dvc-surface);
  color: var(--dvc-ink);
  border: var(--dvc-border-width-hairline) solid var(--dvc-line);
  box-shadow: var(--dvc-shadow-sm);
}

.grw-msg[data-from="me"] .grw-msg-bubble {
  background: var(--dvc-coral);
  color: var(--dvc-grw-on-ink);
  border: none;
  border-end-start-radius: var(--dvc-grw-bubble-radius);
  border-end-end-radius: var(--dvc-grw-bubble-tail);
}

.grw-msg-time {
  font-size: var(--dvc-grw-fs-11);
  color: var(--dvc-muted);
  margin-block-start: var(--dvc-grw-sp-4);
  padding-inline: var(--dvc-grw-sp-4);
}

/* The composer's send failures render adjacent to the composer, never at the pane top. */
.grw-inbox-pane > .sp-error {
  margin-block-start: var(--dvc-grw-sp-12);
  margin-inline: var(--dvc-grw-sp-18);
}

.grw-composer {
  display: flex;
  align-items: center;
  gap: var(--dvc-grw-sp-10);
  padding: var(--dvc-grw-sp-14) var(--dvc-grw-sp-18);
  border-block-start: var(--dvc-border-width-hairline) solid var(--dvc-line);
  background: var(--dvc-surface);
}

/* The dvc-field wrapping the composer input (its invalid state + inline error live here). */
.grw-composer-field {
  flex: 1;
  min-inline-size: 0;
  margin-block-end: 0;
}

.grw-composer-field .grw-composer-input {
  inline-size: 100%;
}

.grw-composer-input {
  flex: 1;
  min-inline-size: 0;
  font: inherit;
  font-size: var(--dvc-grw-fs-14-5);
  color: var(--dvc-ink);
  padding: var(--dvc-grw-sp-12) var(--dvc-grw-sp-18);
  border: var(--dvc-border-width-hairline) solid var(--dvc-line-2);
  border-radius: var(--dvc-radius-pill);
  background: var(--dvc-surface);
}

.grw-composer-input::placeholder {
  color: var(--dvc-faint);
}

.grw-composer-input:focus {
  outline: none;
  border-color: var(--dvc-coral);
  box-shadow: var(--dvc-input-ring);
}

.grw-composer-send {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: var(--dvc-grw-send-size);
  block-size: var(--dvc-grw-send-size);
  border: none;
  border-radius: var(--dvc-radius-pill);
  background: var(--dvc-coral);
  color: var(--dvc-grw-on-ink);
  cursor: pointer;
}

.grw-composer-send:hover {
  background: var(--dvc-coral-ink);
}

.grw-composer-send:focus-visible {
  outline: var(--dvc-space-1) solid var(--dvc-color-action);
  outline-offset: var(--dvc-focus-offset);
}

/* ---------- account ---------- */

.grw-acct-title {
  font-size: var(--dvc-grw-fs-27);
  font-weight: 800;
  letter-spacing: var(--dvc-display-spacing);
}

.grw-acct-layout {
  display: grid;
  grid-template-columns: var(--dvc-grw-acct-nav-col) 1fr;
  gap: var(--dvc-grw-acct-gap);
  align-items: start;
  margin-block-start: var(--dvc-grw-sp-22);
}

.grw-acct-nav {
  display: flex;
  flex-direction: column;
  gap: var(--dvc-grw-sp-2);
}

.grw-acct-persona {
  display: flex;
  align-items: center;
  gap: var(--dvc-grw-sp-12);
  padding: var(--dvc-grw-sp-4) var(--dvc-grw-sp-4) var(--dvc-grw-sp-16);
}

.grw-acct-persona-copy {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.grw-acct-persona-name {
  font-size: var(--dvc-grw-fs-15);
  font-weight: 700;
}

.grw-acct-persona-sub {
  font-size: var(--dvc-grw-fs-12-5);
  color: var(--dvc-muted);
}

.grw-acct-item {
  color: var(--dvc-ink-2);
  text-decoration: none;
}

.grw-acct-item-active {
  background: var(--dvc-sand);
  color: var(--dvc-ink);
  font-weight: 700;
}

.grw-acct-panel {
  padding: var(--dvc-grw-sp-26);
}

.grw-acct-heading {
  font-size: var(--dvc-grw-fs-17);
  font-weight: 800;
  margin-block-end: var(--dvc-grw-sp-6);
}

.grw-acct-row {
  display: flex;
  align-items: center;
  gap: var(--dvc-grw-sp-14);
  padding-block: var(--dvc-grw-sp-16);
  border-block-end: var(--dvc-border-width-hairline) solid var(--dvc-line);
}

.grw-acct-last {
  border-block-end: none;
}

.grw-acct-row-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-inline-size: 0;
}

.grw-acct-row-label {
  font-size: var(--dvc-grw-fs-14-5);
  font-weight: 600;
}

.grw-acct-row-sub {
  font-size: var(--dvc-grw-fs-12-5);
  color: var(--dvc-muted);
  margin-block-start: var(--dvc-grw-sp-2);
}

.grw-acct-row > form {
  flex: none;
}

.grw-acct-save {
  display: flex;
  justify-content: flex-end;
  padding-block-start: var(--dvc-grw-sp-18);
}

.grw-logout {
  color: var(--dvc-coral-ink);
}

/* ---------- narrow viewports (mirrors app.css's 900px breakpoint) ---------- */

@media (max-width: 56.25em) {
  .grw-calc-card {
    grid-template-columns: 1fr;
  }

  .grw-acct-layout {
    grid-template-columns: 1fr;
  }

  .grw-inbox {
    flex-direction: column;
  }

  .grw-inbox-list {
    flex: none;
    inline-size: 100%;
    max-block-size: 40%;
    border-inline-end: none;
    border-block-end: var(--dvc-border-width-hairline) solid var(--dvc-line);
  }
}