/* ==========================================================================
   Receiptly - app styles
   Single stylesheet, organised: tokens, shell, components, pages.
   ========================================================================== */

:root {
  /* Surfaces & ink */
  --surface:        #f5f7f6;
  --surface-raised: #ffffff;
  --surface-sunken: #eef2f1;
  --ink:            #0f1a17;
  --ink-secondary:  #4d5c58;
  --ink-muted:      #8a9793;
  --border:         #e1e8e6;
  --border-strong:  #cbd6d3;

  /* Brand */
  --brand:          #0f766e;
  --brand-dark:     #0b5c56;
  --brand-tint:     #e6f4f2;
  --brand-ink:      #0a4a45;

  /* Status */
  --good:           #0ca30c;
  --good-bg:        #eaf7ea;
  --warning:        #b45309;
  --warning-bg:     #fef6ec;
  --critical:       #d03b3b;
  --critical-bg:    #fdf2f2;

  /* Data viz - single sequential hue for magnitude */
  --viz-bar:        #0f766e;
  --viz-track:      #e8edeb;

  --radius:     14px;
  --radius-sm:  10px;
  --shadow:     0 1px 2px rgba(15, 26, 23, 0.04), 0 10px 28px -18px rgba(15, 26, 23, 0.22);
  --shadow-lg:  0 2px 6px rgba(15, 26, 23, 0.05), 0 22px 48px -24px rgba(15, 26, 23, 0.26);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--surface);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

a { color: var(--brand-dark); }

/* --------------------------------------------------------------------------
   App shell
   -------------------------------------------------------------------------- */

.topnav {
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}

.topnav-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 60px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
  white-space: nowrap;
}

.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--brand);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.navlinks { display: flex; align-items: center; gap: 2px; }

.navlinks a {
  padding: 8px 12px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.navlinks a:hover { background: var(--surface-sunken); color: var(--ink); }
.navlinks a.active { background: var(--brand-tint); color: var(--brand-ink); }
/* A .btn used inside the nav (e.g. the landing page's signup CTA) must keep
   its own white-on-brand colour, not the muted nav link colour above -
   .navlinks a's element+class selector otherwise wins on specificity. */
.navlinks a.btn, .navlinks a.btn:hover { color: #fff; }

.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 20px 72px;
}

.page-narrow { max-width: 560px; }

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.025em; margin: 0; }
h2 { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 4px; }
h3 { font-size: 14px; font-weight: 700; margin: 0 0 10px; }

.subtitle { color: var(--ink-secondary); font-size: 14px; margin: 4px 0 0; }

/* --------------------------------------------------------------------------
   Cards, flashes, pills
   -------------------------------------------------------------------------- */

.card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}
.card + .card { margin-top: 16px; }
.card-tight { padding: 18px; }

.card-danger { border-color: #f2d5d5; }

.flash {
  padding: 12px 15px;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  font-size: 14px;
  border: 1px solid transparent;
}
.flash.success { background: #f0fdf4; color: #14532d; border-color: #bbf7d0; }
.flash.error   { background: var(--critical-bg); color: #7f1d1d; border-color: #f5cccc; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .01em;
  background: var(--surface-sunken);
  color: var(--ink-secondary);
  white-space: nowrap;
}
.pill-brand    { background: var(--brand-tint); color: var(--brand-ink); }
.pill-good     { background: #eaf7ea; color: #14532d; }
.pill-warning  { background: var(--warning-bg); color: #7c3a06; }
.pill-critical { background: var(--critical-bg); color: #7f1d1d; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-muted);
  margin: 16px 0 6px;
}
label.plain {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13.5px;
  color: var(--ink-secondary);
}
label.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  margin: 14px 0 6px;
}
label.checkbox-row input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
  flex: none;
}

input[type=text], input[type=email], input[type=password],
input[type=number], input[type=date], input[type=search],
select, textarea {
  width: 100%;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  font-size: 15px;
  font-family: inherit;
  background: #fff;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}
textarea { resize: vertical; min-height: 62px; }

select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234d5c58' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.hint { font-size: 13px; color: var(--ink-secondary); line-height: 1.5; }
.hint-sm { font-size: 12.5px; color: var(--ink-muted); margin-top: 5px; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 18px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--brand);
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s, transform .05s;
  white-space: nowrap;
}
.btn:hover { background: var(--brand-dark); }
.btn:active { transform: translateY(1px); }

.btn-block { width: 100%; margin-top: 20px; }

.btn-secondary {
  background: var(--surface-raised);
  color: var(--ink);
  border: 1.5px solid var(--border-strong);
}
.btn-secondary:hover { background: var(--surface-sunken); }

.btn-danger { background: var(--critical); }
.btn-danger:hover { background: #b12f2f; }

.btn-sm { padding: 7px 12px; font-size: 13px; border-radius: 8px; }

.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.btn-row .btn { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   Stats
   -------------------------------------------------------------------------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.stat {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.stat-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-muted);
}
.stat-value {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
}
.stat-note { font-size: 12.5px; color: var(--ink-secondary); margin-top: 3px; }

/* --------------------------------------------------------------------------
   Category bars (single-hue magnitude chart)
   Each row is label + bar + value, so the value is always readable directly
   and the whole block doubles as a table.
   -------------------------------------------------------------------------- */

.bars { margin-top: 14px; }

.bar-row { margin-bottom: 13px; }
.bar-row:last-child { margin-bottom: 0; }

.bar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 5px;
}
.bar-name {
  font-size: 13px;
  color: var(--ink-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bar-value {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bar-track {
  height: 9px;
  background: var(--viz-track);
  border-radius: 999px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  background: var(--viz-bar);
  border-radius: 999px;
  min-width: 4px;
}

/* --------------------------------------------------------------------------
   Tables / transaction list
   -------------------------------------------------------------------------- */

.table-wrap {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

table { width: 100%; border-collapse: collapse; font-size: 14px; }

thead th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-muted);
  padding: 12px 14px;
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

tbody td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #fafcfb; }

.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cell-date { white-space: nowrap; font-variant-numeric: tabular-nums; }

.cell-primary { font-weight: 650; }
.cell-sub { font-size: 12.5px; color: var(--ink-muted); margin-top: 2px; }

.row-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* Mobile: turn the table into stacked cards */
@media (max-width: 720px) {
  .table-wrap { border: none; background: none; box-shadow: none; }
  table, thead, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }
  tbody tr {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 12px;
    padding: 6px 4px;
  }
  tbody td { border: none; padding: 7px 14px; }
  tbody td.num { text-align: left; }
  tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-muted);
    margin-bottom: 2px;
  }
  .row-actions { justify-content: flex-start; padding-top: 4px; }
}

/* --------------------------------------------------------------------------
   Filter bar
   -------------------------------------------------------------------------- */

.filters {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.filters form {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr 1fr auto;
  gap: 10px;
  align-items: end;
}
.filters label { margin-top: 0; }
@media (max-width: 820px) {
  .filters form { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   Dropzone
   -------------------------------------------------------------------------- */

.dropzone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-sunken);
  padding: 34px 20px;
  text-align: center;
  transition: border-color .15s, background-color .15s;
}
.dropzone:focus-within, .dropzone.is-dragging {
  border-color: var(--brand);
  background: var(--brand-tint);
}
.dropzone-icon { font-size: 30px; display: block; margin-bottom: 8px; }
.dropzone-title { font-weight: 700; font-size: 15px; }
.dropzone input[type=file] { margin-top: 14px; font-size: 13px; max-width: 100%; }

#file-summary {
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--brand-ink);
}

.working {
  display: none;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  background: var(--brand-tint);
  color: var(--brand-ink);
  font-size: 14px;
  font-weight: 650;
}
.working.show { display: flex; }

.spinner {
  width: 17px;
  height: 17px;
  border: 2.5px solid rgba(15, 118, 110, .25);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Empty state & misc
   -------------------------------------------------------------------------- */

.empty {
  text-align: center;
  padding: 44px 24px;
  color: var(--ink-secondary);
}
.empty-icon { font-size: 34px; display: block; margin-bottom: 12px; }
.empty h2 { margin-bottom: 6px; }

.divider { height: 1px; background: var(--border); margin: 20px 0; border: 0; }

.auth-wrap { max-width: 420px; margin: 48px auto 0; }
.auth-head { text-align: center; margin-bottom: 22px; }
.auth-head .brand-mark { width: 42px; height: 42px; border-radius: 12px; font-size: 21px; margin-bottom: 12px; }
.auth-foot { text-align: center; margin-top: 18px; font-size: 14px; color: var(--ink-secondary); }

.list-plain { margin: 10px 0 0; padding-left: 20px; font-size: 13.5px; color: var(--ink-secondary); }
.list-plain li { margin-bottom: 5px; }

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

@media (max-width: 620px) {
  .field-row, .field-row-3 { grid-template-columns: 1fr; }
  .topnav-inner { padding: 0 14px; gap: 4px; }
  .navlinks a { padding: 8px 9px; font-size: 13px; }
  .brand span:not(.brand-mark) { display: none; }
  .page { padding: 20px 14px 60px; }
}

/* --------------------------------------------------------------------------
   Landing page
   -------------------------------------------------------------------------- */

.landing-body { background: var(--surface-raised); }
.landing-nav-inner { max-width: 1160px; }

.btn-lg { padding: 13px 24px; font-size: 15.5px; border-radius: 12px; }

.hero {
  max-width: 1160px;
  margin: 0 auto;
  padding: 64px 20px 40px;
  display: grid;
  grid-template-columns: 1.05fr 0.85fr;
  gap: 40px;
  align-items: center;
}

.hero-inner h1 {
  font-size: 42px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 16px 0 18px;
}

.hero-sub {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-secondary);
  max-width: 520px;
  margin: 0 0 26px;
}

.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }

.hero-trust {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
  color: var(--ink-secondary);
}

.hero-visual {
  position: relative;
  min-height: 320px;
}

.mock-card {
  position: absolute;
  width: 240px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 16px;
}
.mock-card-1 { top: 0; right: 30px; }
.mock-card-2 { top: 130px; right: 100px; }
.mock-card-3 { top: 260px; right: 10px; }

.mock-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 650;
}
.mock-amount { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink-secondary); }

.mock-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.mock-dot-good { background: var(--good); }
.mock-dot-warn { background: var(--warning); }

.mock-tag {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--brand-tint);
  color: var(--brand-ink);
}
.mock-tag-muted { background: var(--warning-bg); color: #7c3a06; }

.section { padding: 56px 20px; }
.section-tint { background: var(--surface); }
.section-inner { max-width: 1080px; margin: 0 auto; }

.section-title {
  font-size: 27px;
  text-align: center;
  margin-bottom: 6px;
}
.section-sub {
  text-align: center;
  color: var(--ink-secondary);
  font-size: 15px;
  margin: 0 0 38px;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.step {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 22px;
  box-shadow: var(--shadow);
}
.step-num {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--brand-tint);
  color: var(--brand-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 14px;
}
.step h3 { font-size: 16px; margin-bottom: 8px; }
.step p { font-size: 14px; color: var(--ink-secondary); line-height: 1.55; margin: 0; }

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.feature {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}
.feature-icon { font-size: 24px; margin-bottom: 10px; }
.feature h3 { font-size: 15.5px; margin-bottom: 7px; }
.feature p { font-size: 13.5px; color: var(--ink-secondary); line-height: 1.55; margin: 0; }

.cta-band {
  text-align: center;
  background: var(--brand);
  border-radius: 20px;
  padding: 48px 32px;
  color: #fff;
}
.cta-band h2 { font-size: 26px; color: #fff; margin: 0 0 8px; }
.cta-band p { font-size: 15px; color: rgba(255,255,255,.86); margin: 0 0 24px; }
.cta-band .btn { background: #fff; color: var(--brand-dark); }
.cta-band .btn:hover { background: #f0fdfa; }

.faq { max-width: 720px; margin: 0 auto; display: grid; gap: 18px; }
.faq-item {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.faq-item h3 { font-size: 14.5px; margin-bottom: 6px; }
.faq-item p { font-size: 13.5px; color: var(--ink-secondary); line-height: 1.55; margin: 0; }

.landing-footer {
  border-top: 1px solid var(--border);
  padding: 32px 20px 40px;
}
.landing-footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.landing-footer-links { display: flex; gap: 16px; margin-left: auto; }
.landing-footer-links a { font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--ink-secondary); }
.landing-footer-copy {
  width: 100%;
  font-size: 12.5px;
  color: var(--ink-muted);
  margin: 8px 0 0;
}

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding-top: 40px; }
  .hero-inner h1 { font-size: 32px; }
  .hero-visual { display: none; }
  .steps, .features-grid { grid-template-columns: 1fr; }
  .section { padding: 44px 20px; }
}

/* --------------------------------------------------------------------------
   Legal pages (Privacy, Terms, Cookies)
   -------------------------------------------------------------------------- */
.page-legal { max-width: 760px; }
.legal-doc { line-height: 1.65; font-size: 15px; }
.legal-doc .legal-updated { color: var(--ink-muted); font-size: 13px; margin: -8px 0 28px; }
.legal-doc h2 {
  font-size: 20px;
  margin: 40px 0 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.legal-doc h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.legal-doc h3 { font-size: 15px; margin: 20px 0 8px; }
.legal-doc p { margin: 0 0 14px; }
.legal-doc ul, .legal-doc ol { margin: 0 0 14px; padding-left: 22px; }
.legal-doc li { margin: 0 0 8px; }
.legal-doc table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14px; }
.legal-doc th, .legal-doc td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.legal-doc th { color: var(--ink-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.legal-doc .legal-placeholder { background: var(--warning-bg); padding: 1px 5px; border-radius: 4px; }
.legal-nav { display: flex; gap: 16px; margin-bottom: 24px; font-size: 13.5px; }
.legal-nav a { color: var(--ink-secondary); font-weight: 600; }
.legal-nav a.active { color: var(--brand-ink); }

/* ---- WhatsApp pairing code (Settings) ---------------------------------- */
.whatsapp-code {
  background: var(--brand-tint);
  border-radius: 10px;
  padding: 16px;
  margin: 4px 0 16px;
  text-align: center;
}
.whatsapp-code-value {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--brand-ink);
  margin: 0 0 12px;
  font-variant-numeric: tabular-nums;
}

/* ---- Tax year selector (Dashboard) ------------------------------------- */
.year-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: -6px 0 20px;
}
.year-bar-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-muted);
  margin-right: 2px;
}
.year-pill {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-secondary);
  background: var(--surface-2, #f1f3f5);
  border: 1px solid transparent;
  white-space: nowrap;
}
.year-pill:hover { color: var(--brand-ink); }
.year-pill.active {
  background: var(--brand-tint);
  color: var(--brand-ink);
  border-color: var(--brand-ink);
}

/* ---- Site-wide legal footer -------------------------------------------- */
.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 20px 36px;
  font-size: 12.5px;
}
.site-footer-links { display: flex; gap: 18px; }
.site-footer a { color: var(--ink-muted); }
.site-footer a:hover { color: var(--brand-ink); }

/* Required on the website by the Companies Act, so it has to be readable -
   but it isn't what anyone came for, so it sits quiet and last. */
.site-footer-legal,
.landing-footer-legal {
  margin: 0;
  max-width: 560px;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-muted);
}
.landing-footer-legal { margin: 10px auto 0; }

/* ---- Signup wizard ------------------------------------------------------ */
.page-onboarding { padding-top: 28px; }

.onboard-head { position: relative; text-align: center; margin-bottom: 22px; }
.onboard-head h1 { margin: 4px 0 0; font-size: 27px; }
.onboard-skip-form { position: absolute; top: 0; right: 0; margin: 0; }
.onboard-step-count {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-muted); margin: 0;
}
.linklike {
  background: none; border: none; padding: 4px 2px; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--ink-muted);
  font-family: inherit;
}
.linklike:hover { color: var(--brand-ink); }

.onboard-lead {
  text-align: center; color: var(--ink-secondary);
  margin: 0 auto 20px; max-width: 30em; line-height: 1.55;
}
.onboard-note { text-align: center; margin-top: 14px; }
.onboard-form { margin: 0; }

.chip-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.chip {
  border: 1px solid var(--line, #dee2e6); background: transparent;
  border-radius: 999px; padding: 6px 12px; font-size: 12.5px;
  font-weight: 600; color: var(--ink-secondary); cursor: pointer;
  font-family: inherit;
}
.chip:hover { border-color: var(--brand-ink); color: var(--brand-ink); }

.choice-list { display: flex; flex-direction: column; gap: 10px; }
/* These cards are <label> elements so the whole card is tappable, which
   means they inherit the uppercase muted styling meant for form field
   labels. Reset it here rather than weakening the global rule. */
.choice {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px; border-radius: 12px; cursor: pointer;
  background: var(--surface, #fff); border: 2px solid var(--line, #dee2e6);
  text-transform: none; letter-spacing: normal; margin: 0;
  font-size: 15px; font-weight: 400; color: var(--ink, #212529);
}
.choice:hover { border-color: var(--ink-muted); }
.choice.selected { border-color: var(--brand-ink); background: var(--brand-tint); }
.choice input[type=radio] { margin: 3px 0 0; flex: none; accent-color: var(--brand-ink); }
.choice-body { display: flex; flex-direction: column; gap: 3px; }
.choice-label { font-weight: 650; font-size: 15px; color: var(--ink, #212529); }
.choice-hint { font-size: 13px; color: var(--ink-muted); line-height: 1.45; }

.onboard-dots { display: flex; justify-content: center; gap: 7px; margin: 26px 0 16px; }
.onboard-dots .dot {
  width: 7px; height: 7px; border-radius: 999px; background: var(--line, #dee2e6);
}
.onboard-dots .dot.active { width: 22px; background: var(--brand-ink); }

.btn-lg { padding: 14px 20px; font-size: 15.5px; border-radius: 999px; }

/* ---- Dashboard nudge to finish the wizard ------------------------------ */
.nudge {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--brand-tint); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 20px;
}
.nudge-text { flex: 1 1 240px; font-size: 14px; color: var(--brand-ink); }
.nudge form { margin: 0; }

/* ---- Landing page pricing ---------------------------------------------- */
.pricing-card {
  max-width: 460px;
  margin: 0 auto;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #dee2e6);
  border-radius: 18px;
  padding: 32px 28px;
  text-align: center;
  box-shadow: 0 10px 34px rgba(15, 26, 23, .07);
}
.pricing-plan {
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-muted); margin: 0 0 10px;
}
.pricing-amount {
  margin: 0; font-size: 54px; font-weight: 700; line-height: 1;
  color: var(--ink, #0f1a17); letter-spacing: -.02em;
}
.pricing-currency { font-size: 30px; vertical-align: super; margin-right: 2px; }
.pricing-period { font-size: 17px; font-weight: 600; color: var(--ink-muted); }
.pricing-trial {
  margin: 12px 0 22px; font-size: 14px; font-weight: 600;
  color: var(--brand-ink);
}
.pricing-list {
  list-style: none; padding: 0; margin: 0 0 26px;
  text-align: left; display: flex; flex-direction: column; gap: 11px;
}
.pricing-list li {
  position: relative; padding-left: 27px; font-size: 15px; line-height: 1.45;
}
.pricing-list li::before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  color: var(--brand-ink); font-weight: 700;
}
.pricing-note {
  margin: 16px 0 0; font-size: 12.5px; line-height: 1.55;
  color: var(--ink-muted);
}

/* ==========================================================================
   Phones
   --------------------------------------------------------------------------
   Most of this app gets used one-handed, standing in a shop, photographing a
   receipt. These rules exist because the desktop layout did three things
   badly on a phone: the nav overflowed the viewport (pushing "Log out" off
   screen and making the whole page scroll sideways), every value was sized
   for a 1080px column, and the stacked table gave each field its own
   full-width labelled row, which turned one receipt into a screen and a half.
   ========================================================================== */

/* Nothing may make the page itself scroll sideways. Individual elements can
   scroll internally - see .navlinks below - but the document must not. */
html, body { max-width: 100%; overflow-x: hidden; }

@media (max-width: 720px) {

  /* ---- Navigation ------------------------------------------------------
     Six links can't fit in 390px at a readable size, so the row scrolls
     inside itself rather than stretching the page. The fade on the right
     edge is what tells you there's more to reach. */
  .topnav-inner { gap: 0; height: 54px; }
  .navlinks {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
    /* Fade the RIGHT edge: the row is anchored left so the current page is
       readable on arrival, and the fade is what signals there's more to
       reach by swiping. Anchoring right scrolled "Dashboard" half off. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
  }
  .navlinks::-webkit-scrollbar { display: none; }
  .navlinks a { padding: 7px 10px; font-size: 13.5px; }
  .brand-mark { width: 27px; height: 27px; font-size: 14px; }

  /* ---- Density ---------------------------------------------------------
     Everything down a notch. The old sizes were chosen for a wide column
     and read as shouty on a 6-inch screen. */
  .page { padding: 16px 13px 56px; }
  .page-head h1 { font-size: 23px; }
  .page-head { margin-bottom: 14px; }
  .card { padding: 16px; border-radius: 14px; }
  .card + .card { margin-top: 12px; }
  .card h2 { font-size: 17px; }

  .stat { padding: 13px 14px; }
  .stat-label { font-size: 10.5px; letter-spacing: .05em; }
  .stat-value { font-size: 21px; }
  .stat-note { font-size: 11.5px; line-height: 1.4; }
  .stat-grid { gap: 10px; }

  .year-bar { gap: 6px; margin-bottom: 16px; }
  .year-pill { padding: 4px 10px; font-size: 12.5px; }
  .year-bar-label { font-size: 11px; }

  /* ---- One receipt, one compact card -----------------------------------
     The generic stacked-table treatment labels every cell on its own line.
     For a transaction that's ten rows of chrome around six values, so the
     numbers go inline and the obvious labels are dropped. */
  tbody tr { padding: 12px 4px; border-radius: 14px; }
  tbody td { padding: 3px 12px; }
  tbody td[data-label]::before {
    font-size: 10px;
    letter-spacing: .05em;
    margin-bottom: 1px;
  }

  /* The supplier name speaks for itself */
  tbody td[data-label="Supplier"]::before { display: none; }
  .cell-primary { font-size: 16px; font-weight: 700; }
  .cell-sub { font-size: 13px; line-height: 1.45; }
  .cell-date { font-size: 13.5px; }

  /* Net / VAT / Gross share one wrapping line instead of three rows */
  tbody td.num {
    display: inline-block;
    width: auto;
    padding: 6px 12px 0 12px;
  }
  tbody td.num::before {
    display: inline;
    margin: 0 5px 0 0;
    font-size: 10px;
  }

  .row-actions { padding-top: 8px; }
  .btn-sm { padding: 6px 12px; font-size: 13px; }
}

/* --------------------------------------------------------------------------
   "See more" on a scanner note
   --------------------------------------------------------------------------
   The AI's note is often a paragraph explaining what to double-check. Useful,
   but shown in full it dwarfs the receipt it belongs to. Collapsed to a
   single line it stays available without taking over the card. Built on
   <details> so it works with no JavaScript and reads correctly to a screen
   reader.
   -------------------------------------------------------------------------- */
.note { margin-top: 6px; }
.note summary {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--warning-ink, #8a6100);
  padding: 3px 0;
}
.note summary::-webkit-details-marker { display: none; }
.note summary::after {
  content: "See more";
  font-weight: 600;
  color: var(--ink-muted);
  text-decoration: underline;
}
.note[open] summary::after { content: "Hide"; }
.note p {
  margin: 4px 0 2px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-secondary);
  border-left: 2px solid var(--border);
  padding-left: 10px;
}

/* ==========================================================================
   Grouped settings rows
   --------------------------------------------------------------------------
   Settings was nine stacked cards, every one fully expanded, so finding the
   export buttons meant scrolling past two delete-everything forms. These are
   collapsed rows grouped under headings instead - the phone-settings pattern
   people already know.

   Built on <details>/<summary> rather than sub-pages: no new routes, no
   navigation to lose your place in, works without JavaScript, and everything
   stays on one page for anyone who prefers to scroll.
   ========================================================================== */

.settings-group { margin-bottom: 22px; }

.settings-group-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-muted);
  margin: 0 0 8px 4px;
}

.settings-rows {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.srow { border-top: 1px solid var(--border); }
.srow:first-child { border-top: none; }

.srow > summary,
.srow-link {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}
.srow > summary::-webkit-details-marker { display: none; }
.srow > summary:hover,
.srow-link:hover { background: var(--surface-sunken); }

/* The chevron, rotating when the row opens */
.srow > summary::after,
.srow-link::after {
  content: "";
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ink-muted);
  border-bottom: 2px solid var(--ink-muted);
  transform: rotate(-45deg);
  transition: transform .18s ease;
  flex: none;
}
.srow[open] > summary::after { transform: rotate(45deg); }

.srow-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex: none;
  background: var(--brand-tint);
}
.srow-icon-teal   { background: #d7ece9; }
.srow-icon-blue   { background: #dbe7f6; }
.srow-icon-amber  { background: #f9e8cf; }
.srow-icon-green  { background: #dcefdc; }
.srow-icon-grey   { background: #e6e8ea; }
.srow-icon-red    { background: #f7dcdc; }

.srow-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.srow-sub {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink-muted);
  line-height: 1.35;
}

/* The panel that unfolds beneath a row */
.srow-body {
  padding: 4px 16px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.srow-body > :first-child { margin-top: 14px; }
.srow-body label:first-of-type { margin-top: 14px; }

.srow-danger > summary { color: var(--danger, #b23b3b); }

@media (max-width: 720px) {
  .settings-group { margin-bottom: 18px; }
  .srow > summary, .srow-link { padding: 13px 14px; font-size: 14.5px; }
  .srow-body { padding: 4px 14px 16px; }
}

/* ---- Invoice line editor ------------------------------------------------ */
.invoice-lines { width: 100%; border-collapse: collapse; }
.invoice-lines th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-muted);
  padding: 0 6px 6px 0;
}
.invoice-lines th.num { text-align: right; }
.invoice-lines td { padding: 0 6px 8px 0; vertical-align: top; }
.invoice-lines td:last-child, .invoice-lines th:last-child { padding-right: 0; }
.invoice-lines input { margin: 0; }
.invoice-lines tr > td:nth-child(2) { width: 168px; }
.invoice-lines tr > td:nth-child(3) { width: 108px; }

@media (max-width: 620px) {
  /* Stacked, so a description isn't squeezed into a third of a phone */
  .invoice-lines thead { display: none; }
  .invoice-lines, .invoice-lines tbody, .invoice-lines tr, .invoice-lines td {
    display: block; width: 100%;
  }
  .invoice-lines tr {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: var(--surface);
  }
  .invoice-lines tr > td:nth-child(2),
  .invoice-lines tr > td:nth-child(3) { width: 100%; }
  .invoice-lines td::before {
    content: attr(data-label);
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-muted);
    margin-bottom: 3px;
  }
}

/* Terms notice on the signup form. Sits directly above the button, so it's
   read before the action rather than after it - which is the thing that
   makes a notice like this actually count as having been given. */
.signup-terms {
  margin: 18px 0 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-secondary);
  text-align: center;
}

/* ---- Invoice list -------------------------------------------------------
   One line each. The old version repeated the customer, description, both
   dates, the total, a status pill and three buttons per row, which made
   scanning ten invoices harder than opening one. Details belong on the
   invoice; the list exists to find it.
   ------------------------------------------------------------------------ */
.inv-list {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.inv-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-top: 1px solid var(--border);
  text-decoration: none;
  color: var(--ink);
}
.inv-row:first-child { border-top: none; }
.inv-row:hover { background: var(--surface-sunken); }

/* A dot rather than a pill: status matters at a glance, but it shouldn't
   take up the width of a word on every row. */
.inv-status {
  width: 9px; height: 9px; border-radius: 999px; flex: none;
  background: var(--ink-muted);
}
.inv-status-draft { background: #c9ced2; }
.inv-status-sent  { background: #e0a33c; }
.inv-status-paid  { background: #2f8f6b; }

.inv-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.inv-customer {
  font-weight: 650;
  font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inv-meta { font-size: 12.5px; color: var(--ink-muted); }
.inv-overdue { color: #b23b3b; font-weight: 600; }
.inv-row.is-overdue .inv-status { background: #b23b3b; }

.inv-amount {
  font-weight: 700;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.inv-chevron {
  width: 7px; height: 7px; flex: none;
  border-right: 2px solid var(--ink-muted);
  border-bottom: 2px solid var(--ink-muted);
  transform: rotate(-45deg);
}

@media (max-width: 620px) {
  .inv-row { padding: 12px 13px; gap: 10px; }
  .inv-customer { font-size: 14.5px; }
  .inv-amount { font-size: 14.5px; }
}

/* Quantity plus its unit, side by side. A bare number on an invoice line
   ("3") is ambiguous; "3 hrs" or "3 drops" is not. */
.qty-pair { display: flex; gap: 6px; }
.qty-pair input { min-width: 0; flex: 1 1 56px; }
.qty-pair select { flex: 0 0 84px; margin: 0; }
@media (max-width: 620px) {
  .qty-pair select { flex: 0 0 96px; }
}

/* ==========================================================================
   Dashboard quick tiles
   Four taps, laid out 2x2 on a phone and 4-across from tablet width up.
   Deliberately the first thing under the heading: the numbers below are for
   reading, these are for doing.
   ========================================================================== */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

@media (min-width: 720px) {
  .tile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(15, 26, 23, .04);
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
  min-width: 0;
}

.tile:hover,
.tile:focus-visible {
  border-color: var(--border-strong);
  box-shadow: 0 3px 10px rgba(15, 26, 23, .07);
  transform: translateY(-1px);
}

.tile-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  margin-bottom: 6px;
}

.tile-icon-teal  { background: #d7ece9; }
.tile-icon-blue  { background: #dbe7f6; }
.tile-icon-amber { background: #f9e8cf; }
.tile-icon-grey  { background: #e6e8ea; }
/* Matches .srow-icon-green in Settings, so the WhatsApp row reads as the same
   thing whichever screen you meet it on. */
.tile-icon-green { background: #dcefdc; }

.tile-label {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.25;
}

.tile-sub {
  font-size: 12.5px;
  color: var(--ink-muted);
  line-height: 1.3;
  /* One line only - a wrapping subtitle makes the four tiles different
     heights, which reads as a layout bug rather than a longer label. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The Plan link only appears in the nav when something needs paying, so it
   should look like a prompt rather than another destination. */
.navlinks a.nav-alert {
  color: var(--warning);
  font-weight: 600;
}

/* ==========================================================================
   SA103 export call-out
   The one export tied to a single tax year and the one nothing else does, so
   it gets a framed row of its own rather than sitting in the button strip.
   ========================================================================== */
.sa103-export {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 18px;
  margin: 4px 0 18px;
  background: var(--brand-tint);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: 12px;
}
.sa103-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 240px; min-width: 0; }
.sa103-title { font-weight: 600; }
.sa103-export .btn { flex: 0 0 auto; }

/* A quiet-but-present reminder that the SA103 sheet is a working summary,
   not a filed return - it carries tax figures, so the caveat belongs beside
   the download, not only inside the file. */
.sa103-disclaimer {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-style: italic;
  color: var(--warning);
}

/* ==========================================================================
   Review-after-scan page
   Shows exactly what the last upload read, so a just-scanned receipt (often
   with an old date, which buries it in the ledger) is checked right away.
   ========================================================================== */
.review-list { display: grid; gap: 14px; }
.review-item { display: flex; flex-direction: column; gap: 12px; }
.review-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.review-who { min-width: 0; }
.review-amount {
  font-family: inherit; font-weight: 700; font-size: 1.15rem;
  white-space: nowrap; text-align: right;
}
.review-orig {
  display: block; font-weight: 400; font-size: .8rem; color: var(--ink-muted);
}
.review-cat {
  align-self: flex-start; font-size: .85rem; font-weight: 500;
  color: var(--brand-ink); background: var(--brand-tint);
  padding: 4px 12px; border-radius: 999px;
}
.review-note {
  font-size: .88rem; line-height: 1.45; color: var(--warning);
  background: var(--warning-bg); border-radius: 10px; padding: 12px 14px;
}
.review-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.review-done { margin-top: 22px; }

/* ==========================================================================
   Referrals - the code, the share link, and who's used it
   ========================================================================== */
.referral-code-card { text-align: center; }
.referral-code-label {
  font-size: .78rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-muted);
}
.referral-code {
  font-size: 2rem; font-weight: 700; letter-spacing: .12em;
  margin: 8px 0 18px; color: var(--brand-ink);
  /* Codes get read off a screen and typed by hand, so the digits need to be
     unmistakable - a proportional font makes 0/O and 1/I harder, not easier. */
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}
.referral-share { display: flex; gap: 10px; align-items: stretch; }
.referral-link {
  flex: 1; min-width: 0; font-size: .9rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}
.referral-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin: 18px 0;
}
.referral-stat { text-align: center; padding: 18px 10px; }
.referral-stat-num { font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.referral-stat-label {
  font-size: .8rem; color: var(--ink-muted); margin-top: 6px;
}
.referral-steps { margin: 4px 0 14px; padding-left: 20px; line-height: 1.7; }
.referral-steps li { margin-bottom: 6px; }
.referral-table { width: 100%; }
.referral-status {
  display: inline-block; font-size: .78rem; font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
  background: var(--surface-sunken); color: var(--ink-muted);
}
.referral-status-earned { background: #dcefdc; color: #1f6b33; }
.referral-status-qualified { background: var(--brand-tint); color: var(--brand-ink); }
.referral-empty { text-align: center; color: var(--ink-muted); }

@media (max-width: 560px) {
  .referral-stats { grid-template-columns: 1fr; gap: 10px; }
  .referral-stat { display: flex; align-items: baseline; justify-content: center; gap: 10px; padding: 14px; }
  .referral-stat-num { font-size: 1.35rem; }
  .referral-stat-label { margin-top: 0; }
  .referral-share { flex-direction: column; }
  .referral-code { font-size: 1.6rem; }
}