/* Araflo brand stylesheet. Spec: CLAUDE.md §14. Mobile-first; intake is the
 * most-mobile surface so layout collapses cleanly under 720px. */

:root {
  /* ── Canonical brand tokens (Brand Guidelines §Colors) ─────────────
     Adopted 2026-07-30. These are the source of truth. The legacy
     `--ara-*` variables below now alias these so existing CSS keeps
     working during the incremental migration; new selectors should
     use `--araflo-*` directly. */
  --araflo-navy: #0A2E6F;          /* Intelligence Navy — trust/base. Text-safe on white (12.86:1). */
  --araflo-orange: #FF6B00;        /* Automation Orange — 2.86:1 on white. DECORATIVE / icon /
                                      button background with white text ONLY. Never body text on white. */
  --araflo-gold: #FFC83D;          /* Growth Gold — 1.55:1 on white. DECORATIVE ONLY.
                                      For gold text on light bg use --ara-gold-text (5.76:1). */
  --araflo-graphite: #1F2937;      /* Text/dark surfaces */
  --araflo-white: #FFFFFF;

  /* Legacy tokens (kept for compat with 166 existing var(--ara-*) refs) */
  --ara-gold: #B8872A;
  /* --ara-gold on white is only ~3.2:1 — fails WCAG AA. Use --ara-gold-text
     wherever gold is drawn as text on a light background (white / cream /
     the #F2ECDA refunded-pill background). #855F18 clears 4.5:1 on all
     three with margin. */
  --ara-gold-text: #855F18;
  --ara-midnight: #0E0F11;
  --ara-teal: #0F6E56;
  --ara-cream: #F7F4EE;
  --ara-purple: #3C3489;
  --ara-line: rgba(14, 15, 17, 0.08);
  --ara-soft: #FDFCF9;
  --ara-text: #1a1a1a;
  --ara-muted: #6b6457;
  --ara-shadow: 0 1px 2px rgba(14,15,17,0.04), 0 4px 16px rgba(14,15,17,0.05);
  --ara-radius: 14px;
  --ara-radius-sm: 8px;
  --ara-success: #1f7a4d;
  --ara-warn:      #b8872a;    /* borders / backgrounds only */
  --ara-warn-text: #855F18;    /* text-on-light equivalent */
  --ara-danger:  #b03030;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--ara-cream);
  color: var(--ara-text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--ara-midnight);
  margin: 0 0 16px;
}

a { color: var(--ara-teal); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Shell layout ───────────────────────────────────────────────────── */
.ara-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }

.ara-nav {
  background: var(--ara-midnight);
  color: var(--ara-cream);
  padding: 24px 18px;
  display: flex; flex-direction: column;
}
.ara-nav nav { display: flex; flex-direction: column; gap: 4px; flex: 1; margin-top: 24px; }
.ara-nav nav a {
  color: var(--ara-cream);
  padding: 10px 12px;
  border-radius: var(--ara-radius-sm);
  opacity: 0.78;
}
.ara-nav nav a:hover { opacity: 1; text-decoration: none; background: rgba(255,255,255,0.05); }
.ara-nav nav a.is-active { opacity: 1; background: var(--ara-teal); }

.ara-brand { display: flex; align-items: center; gap: 10px; color: var(--ara-cream); }
.ara-brand:hover { text-decoration: none; }
.ara-brand-mark {
  width: 32px; height: 32px; display: block; object-fit: contain;
}
.ara-brand-name { font-family: Georgia, serif; font-size: 18px; letter-spacing: 0.5px; }

.ara-nav-foot { padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.08); }
.ara-nav-merchant { margin: 0; font-weight: 600; }
/* .ara-nav-plan lives in the Plan & Billing block below — it became a link
   once "inactive" needed somewhere to go. */
.ara-link { background: none; border: 0; color: var(--ara-gold); cursor: pointer; padding: 6px 0; }

.ara-main { padding: 20px 28px 44px; max-width: 1400px; }
.ara-page-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }

/* ── Grids, panels, cards ───────────────────────────────────────────── */
.ara-grid { display: grid; gap: 14px; margin-bottom: 16px; }
.ara-grid-4     { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ara-grid-2     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ara-grid-60-40 { grid-template-columns: 3fr 2fr; }

.ara-card, .ara-panel {
  background: white;
  border-radius: var(--ara-radius);
  padding: 14px 16px;
  box-shadow: var(--ara-shadow);
  border: 1px solid var(--ara-line);
}
.ara-panel-soft { background: var(--ara-soft); }
.ara-card-label { font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ara-muted); margin: 0 0 5px; }
.ara-card-value { font-family: Georgia, serif; font-size: 25px; margin: 0; color: var(--ara-midnight); line-height: 1.15; }
.ara-card-value-xl { font-size: 36px; }
.ara-trend { font-size: 18px; margin-left: 8px; color: var(--ara-teal); }

.ara-card-score.is-green  .ara-card-value { color: var(--ara-success); }
.ara-card-score.is-amber  .ara-card-value { color: var(--ara-warn-text); }
.ara-card-score.is-red    .ara-card-value { color: var(--ara-danger); }
.ara-card-score.is-unknown .ara-card-value { color: var(--ara-muted); }

/* Alert states for any metric card — used by the Reserved-by-Stripe card on
   the onboarding page so a live hold visually shouts against neutral siblings. */
.ara-card.is-warn {
  background: #fbf6e8;
  border-color: var(--ara-warn);
  box-shadow: 0 0 0 1px var(--ara-warn), var(--ara-shadow);
}
.ara-card.is-warn .ara-card-label { color: var(--ara-warn-text); }
.ara-card.is-warn .ara-card-value { color: var(--ara-warn-text); }
.ara-card.is-danger {
  background: #fcf3f1;
  border-color: var(--ara-danger);
  box-shadow: 0 0 0 1px var(--ara-danger), var(--ara-shadow);
}
.ara-card.is-danger .ara-card-label,
.ara-card.is-danger .ara-card-value { color: var(--ara-danger); }
.ara-card-caption {
  font-size: 11px;
  color: var(--ara-warn-text);
  margin: 4px 0 0;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* Small utilities used in place of inline style="" attributes. */
.ara-divider { border: 0; border-top: 1px solid var(--ara-line); margin: 28px 0; }
.ara-panel h2 + .ara-grid { margin-top: 8px; }
.ara-text-lg { font-size: 16px; }
.ara-mt-sm   { margin-top: 14px; }
.ara-mt-none { margin-top: 0; margin-bottom: 24px; }
.ara-card-value-sm   { font-size: 20px; }
.ara-card-value-text { font-family: inherit; font-size: 14px; color: var(--ara-muted); }

/* ── Chart placeholder ──────────────────────────────────────────────── */
.ara-chart {
  display: flex; align-items: flex-end; gap: 4px;
  height: 180px; padding-top: 12px;
}
.ara-bar {
  flex: 1; min-width: 6px;
  background: linear-gradient(180deg, var(--ara-gold), var(--ara-teal));
  border-radius: 3px 3px 0 0; opacity: 0.85;
}
.ara-bar:hover { opacity: 1; }

/* ── Tables, lists, pills ──────────────────────────────────────────── */
.ara-table { width: 100%; border-collapse: collapse; }
.ara-table th, .ara-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--ara-line); }
.ara-table th { font-size: 12px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--ara-muted); }

.ara-list, .ara-list-plain { margin: 0; padding: 0; list-style: none; }
.ara-list li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--ara-line); }
.ara-list li small { color: var(--ara-muted); }

.ara-pill {
  display: inline-block; font-size: 12px; padding: 2px 8px;
  border-radius: 999px; background: var(--ara-cream); color: var(--ara-midnight);
}
.ara-pill-succeeded { background: #e0f3e8; color: var(--ara-success); }
.ara-pill-failed    { background: #fbe3e0; color: var(--ara-danger); }
.ara-pill-refunded  { background: #f2ecda; color: var(--ara-warn-text); }
.ara-pill-disputed  { background: #fbe3e0; color: var(--ara-danger); }

/* Subscription statuses */
.ara-pill-active    { background: #e0f3e8; color: var(--ara-success); }
.ara-pill-trialing  { background: #e8f0ee; color: var(--ara-teal); }
.ara-pill-past_due  { background: #f2ecda; color: var(--ara-warn-text); }
.ara-pill-paused    { background: var(--ara-cream); color: var(--ara-muted); }
.ara-pill-cancelled { background: var(--ara-cream); color: var(--ara-muted); }

/* Invoice statuses */
.ara-pill-paid            { background: #e0f3e8; color: var(--ara-success); }
.ara-pill-open,
.ara-pill-sent            { background: #e8f0ee; color: var(--ara-teal); }
.ara-pill-draft           { background: var(--ara-cream); color: var(--ara-muted); }
.ara-pill-payment_failed  { background: #fbe3e0; color: var(--ara-danger); }
.ara-pill-overdue         { background: #fbe3e0; color: var(--ara-danger); }

.ara-empty { color: var(--ara-muted); }
.ara-hint  { color: var(--ara-muted); font-size: 13px; }
.ara-hint-inline { color: var(--ara-muted); font-weight: 400; font-size: 0.85em; }

/* ── Buttons + forms ───────────────────────────────────────────────── */
.ara-btn {
  display: inline-block; padding: 10px 18px; border-radius: var(--ara-radius-sm);
  border: 1px solid var(--ara-line); background: white; color: var(--ara-midnight);
  cursor: pointer; font-weight: 600; font-size: 14px;
}
.ara-btn:hover { background: var(--ara-soft); }
.ara-btn-primary { background: var(--ara-teal); color: white; border-color: var(--ara-teal); }
.ara-btn-primary:hover { background: #0d5c47; }
.ara-btn-ghost {
  background: transparent; border-color: transparent;
  color: var(--ara-muted); font-weight: 500;
}
.ara-btn-ghost:hover { background: var(--ara-soft); color: var(--ara-midnight); }

/* Status pill — used on Settings/Payments and anywhere a boolean state
   should read at a glance. */
.ara-badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.2px;
  margin-right: 6px; vertical-align: middle;
}
.ara-badge-ok   { background: rgba(31, 122, 77, 0.12); color: var(--ara-success); }
.ara-badge-warn { background: rgba(184, 135, 42, 0.14); color: var(--ara-warn-text); }

/* ── Business Score page ────────────────────────────────────────────── */
.ara-score-hero {
  display: grid; grid-template-columns: auto 1fr; gap: 22px;
  align-items: center; padding: 22px 24px;
  border-radius: var(--ara-radius); margin-bottom: 8px;
  border: 1px solid var(--ara-line);
}
.ara-score-hero-green  { background: rgba(31, 122, 77, 0.06); border-color: rgba(31,122,77,0.22); }
.ara-score-hero-amber  { background: rgba(184, 135, 42, 0.06); border-color: rgba(184,135,42,0.22); }
.ara-score-hero-red    { background: rgba(176, 48, 48, 0.06); border-color: rgba(176,48,48,0.22); }
.ara-score-hero-value {
  display: flex; align-items: baseline; gap: 4px;
  font-family: Georgia, serif; color: var(--araflo-navy);
}
.ara-score-hero-num { font-size: 64px; font-weight: 700; line-height: 1; }
.ara-score-hero-den { font-size: 18px; color: var(--ara-muted); }
.ara-score-hero-band strong { font-size: 18px; display: block; margin-bottom: 4px; }
.ara-score-hero-band p { margin: 0; color: var(--ara-text); font-size: 14px; }
.ara-score-hero-green .ara-score-hero-band strong { color: var(--ara-success); }
.ara-score-hero-amber .ara-score-hero-band strong { color: var(--ara-warn-text); }
.ara-score-hero-red   .ara-score-hero-band strong { color: var(--ara-danger); }

.ara-score-spark {
  width: 100%; height: 80px; display: block; margin: 8px 0 4px;
}
.ara-score-spark-legend {
  margin: 4px 0 0; color: var(--ara-muted); font-size: 12px;
}

.ara-score-recovered {
  margin-top: 22px; padding: 16px 18px; border-radius: var(--ara-radius);
  background: var(--ara-soft); border: 1px solid var(--ara-line);
}
.ara-score-recovered-value {
  margin: 4px 0 8px; font-size: 28px; font-weight: 700;
  color: var(--ara-success); font-family: Georgia, serif;
}

.ara-score-narrative {
  margin-top: 22px; padding: 14px 18px; border-radius: var(--ara-radius);
  background: white; border-left: 3px solid var(--araflo-navy);
}
.ara-score-narrative h3 { margin: 0 0 4px; font-size: 13px;
  color: var(--araflo-navy); text-transform: uppercase; letter-spacing: 0.6px; }
.ara-score-narrative p { margin: 0; color: var(--ara-text); }

.ara-score-components { list-style: none; padding: 0; margin: 12px 0 0;
  display: flex; flex-direction: column; gap: 14px; }
.ara-score-component-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; margin-bottom: 4px;
}
.ara-score-component-value { font-family: Georgia, serif; font-size: 16px; color: var(--araflo-navy); }
.ara-score-bar {
  height: 8px; background: rgba(10, 46, 111, 0.08); border-radius: 999px;
  overflow: hidden; margin-bottom: 4px;
}
.ara-score-bar-fill {
  height: 100%; background: linear-gradient(90deg, var(--araflo-navy), var(--araflo-orange));
  border-radius: 999px; transition: width 300ms ease;
}
.ara-score-component .ara-hint { margin: 0; font-size: 12px; }

.ara-score-repro { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--ara-line); }
.ara-score-repro h3 { margin: 0 0 4px; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.6px; color: var(--ara-muted); }
.ara-score-repro details { margin-top: 8px; }
.ara-score-repro summary { cursor: pointer; color: var(--araflo-navy); font-size: 13px; }
.ara-score-snapshot {
  margin: 8px 0 0; padding: 12px; border-radius: var(--ara-radius-sm);
  background: var(--ara-midnight); color: var(--ara-cream);
  font-size: 12px; overflow-x: auto; max-height: 260px;
}

@media (max-width: 620px) {
  .ara-score-hero { grid-template-columns: 1fr; gap: 8px; text-align: center; }
  .ara-score-hero-value { justify-content: center; }
}

/* Metric card as a link — hover elevates + subtly hints at destination. */
.ara-card-link {
  text-decoration: none; color: inherit; display: block;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.ara-card-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(10, 46, 111, 0.10);
  text-decoration: none;
}
.ara-card-caption-muted {
  margin: 4px 0 0; color: var(--ara-muted); font-size: 12px;
}

/* Recovered revenue tile — full-width strip under the metric row. */
.ara-recovered-tile {
  display: grid; grid-template-columns: auto 1fr; gap: 22px;
  align-items: center; margin: 14px 0;
  padding: 16px 20px; border-radius: var(--ara-radius);
  background: linear-gradient(135deg,
    rgba(31, 122, 77, 0.08),
    rgba(10, 46, 111, 0.05));
  border: 1px solid rgba(31, 122, 77, 0.18);
}
.ara-recovered-value { color: var(--ara-success); }
.ara-recovered-tile .ara-hint { margin: 0; max-width: 60ch; }
@media (max-width: 620px) {
  .ara-recovered-tile { grid-template-columns: 1fr; }
}

/* Refund UI — transaction table refund column + native dialog styling. */
.ara-txn-actions { text-align: right; }
.ara-refund-btn { padding: 4px 10px; font-size: 12px; }

.ara-dialog {
  border: 0; border-radius: var(--ara-radius);
  padding: 0; max-width: 460px; width: calc(100vw - 32px);
  box-shadow: 0 20px 60px rgba(10, 46, 111, 0.24),
              0 4px 12px rgba(10, 46, 111, 0.08);
}
.ara-dialog::backdrop {
  background: rgba(14, 15, 17, 0.42);
  backdrop-filter: blur(2px);
}
.ara-dialog form { padding: 24px 24px 20px; margin: 0; }
.ara-dialog h2 { margin: 0 0 6px; font-size: 18px; color: var(--araflo-navy); }
.ara-dialog .ara-hint { margin: 0 0 14px; }
.ara-dialog-actions {
  display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px;
}

/* Dismissed-recommendation strip — collapsed by default, expands into
   a compact list with per-item restore buttons. */
.ara-dismissed-strip {
  margin-top: 14px; padding: 12px 14px; border-radius: var(--ara-radius);
  background: var(--ara-soft); border: 1px solid var(--ara-line);
  font-size: 13px;
}
.ara-dismissed-strip summary { cursor: pointer; color: var(--ara-muted); }
.ara-dismissed-strip summary::marker { color: var(--ara-muted); }
.ara-dismissed-list {
  list-style: none; padding: 0; margin: 10px 0 0;
  display: flex; flex-direction: column; gap: 6px;
}
.ara-dismissed-item {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 8px 10px; border-radius: var(--ara-radius-sm);
  background: white; border: 1px solid var(--ara-line);
}
.ara-dismissed-item strong { margin-right: 8px; }
.ara-dismissed-item .ara-hint { font-size: 12px; }
.ara-btn[disabled] { opacity: 0.6; cursor: wait; }

/* Revenue-action controls — accept + dismiss stack vertically on wide
   cards, sit side-by-side when the row is tight. */
.ara-action-controls {
  display: flex; flex-direction: column; gap: 6px;
  align-self: center; flex-shrink: 0;
}
.ara-action-controls .ara-btn { text-align: center; white-space: nowrap; }
.ara-action-dismiss { font-size: 12px; padding: 4px 10px; }
@media (max-width: 620px) {
  .ara-action-controls { flex-direction: row; width: 100%; }
  .ara-action-controls .ara-btn { flex: 1; }
}

.ara-form { display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
.ara-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; color: var(--ara-midnight); }
.ara-form input, .ara-form textarea {
  padding: 10px 12px; border: 1px solid var(--ara-line); border-radius: var(--ara-radius-sm);
  font: inherit; background: white;
}
.ara-form input:focus, .ara-form textarea:focus {
  outline: 2px solid var(--ara-teal); outline-offset: 1px;
}
.ara-card-element {
  padding: 12px; border: 1px solid var(--ara-line); border-radius: var(--ara-radius-sm); background: white;
}
.ara-error   { color: var(--ara-danger); min-height: 1em; margin: 0; }
.ara-success { color: var(--ara-success); min-height: 1em; margin: 0; }

/* ── Session-option rows (Settings → session lengths & pricing) ──────── */
.ara-option-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 100px 110px 32px;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.ara-option-row input {
  padding: 8px 10px; border: 1px solid var(--ara-line); border-radius: var(--ara-radius-sm);
  font: inherit; background: white; width: 100%;
}
.ara-option-row input:focus {
  outline: 2px solid var(--ara-teal); outline-offset: 1px;
}
.ara-option-remove {
  background: none; border: 1px solid var(--ara-line); border-radius: var(--ara-radius-sm);
  color: var(--ara-danger); font-size: 16px; line-height: 1; cursor: pointer;
  width: 32px; height: 32px;
}
.ara-option-remove:hover { background: #fcf3f1; }
.ara-option-row-labels {
  display: grid; grid-template-columns: minmax(0, 2fr) 100px 110px 32px; gap: 8px;
  font-size: 11px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--ara-muted);
  margin-bottom: 4px;
}
@media (max-width: 620px) {
  .ara-option-row, .ara-option-row-labels { grid-template-columns: 1fr 1fr; }
  .ara-option-row-labels { display: none; }
}

/* ── Compose panels — invoice / membership creation ──────────────────
   A plain stacked form reads as generic SaaS admin tooling. Splitting the
   panel into an editing column and a live "what your client sees" preview
   gives the same task real weight — Ara is visibly drafting something,
   not just collecting form fields — and reuses the receipt-card motif
   (Georgia serif amount, midnight ground, gold arc) across every place a
   merchant hands money-facing copy to a client. */
.ara-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 32px;
  align-items: start;
}
.ara-compose .ara-form { max-width: none; }
.ara-compose-preview { position: sticky; top: 16px; }
.ara-compose-preview-label {
  font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--ara-muted); margin: 0 0 10px;
}
@media (max-width: 860px) {
  .ara-compose { grid-template-columns: 1fr; }
  .ara-compose-preview { position: static; }
}

.ara-receipt-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, var(--ara-midnight) 0%, #1c1e22 100%);
  color: var(--ara-cream);
  border-radius: var(--ara-radius);
  padding: 24px 22px 20px;
  box-shadow: var(--ara-shadow);
}
.ara-receipt-mark {
  /* Inset fully inside the card (unlike .ara-receipt-arc, which is meant to
     bleed off the edge) -- a logo reading as cut off looks like a bug, not
     a design choice. Sized/positioned to stay clear of the card padding
     even on the narrowest .ara-compose-preview column. */
  position: absolute; top: 14px; right: 14px; width: 150px; height: auto;
  pointer-events: none; opacity: 0.32;
  filter: brightness(0) invert(1); /* render the mark as pure white regardless of source color */
}
.ara-receipt-arc {
  position: absolute; top: -38%; right: -28%; width: 220px; height: 220px;
  pointer-events: none;
}
.ara-receipt-business {
  margin: 0 0 18px; font-size: 12px; letter-spacing: 0.4px; font-weight: 600;
  color: var(--ara-cream);
  position: relative;
}
.ara-receipt-amount {
  font-family: Georgia, serif; font-size: 38px; line-height: 1.1; margin: 0 0 6px;
  color: var(--ara-gold); position: relative;
}
.ara-receipt-interval {
  font-family: Georgia, serif; font-size: 16px; color: var(--ara-cream); font-weight: 600;
}
.ara-receipt-desc {
  margin: 0 0 16px; font-size: 14px; font-weight: 600; color: var(--ara-cream);
  position: relative; min-height: 1.3em;
}
.ara-receipt-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 14px; border-top: 1px solid rgba(247, 244, 238, 0.22);
  font-size: 12px; font-weight: 600; color: rgba(247, 244, 238, 0.85); position: relative;
}
.ara-receipt-meta span:last-child { color: var(--ara-cream); }
.ara-receipt-cadence {
  display: flex; align-items: center; gap: 5px; min-width: 0;
}
.ara-receipt-cadence .ara-receipt-dot {
  flex: none; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ara-gold); opacity: 0.35;
}
.ara-receipt-cadence .ara-receipt-dot:first-child { opacity: 0.9; }
.ara-receipt-cadence #ara-receipt-cadence-label {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Auth screen ───────────────────────────────────────────────────── */
.ara-auth {
  background: linear-gradient(180deg, var(--ara-cream) 0%, #EEE9DD 100%);
  display: grid; place-items: center; min-height: 100vh; padding: 24px;
}
.ara-auth-card {
  background: white; padding: 40px 44px 32px; border-radius: 18px;
  width: 100%; max-width: 440px;
  box-shadow: 0 12px 40px rgba(10, 46, 111, 0.10),
              0 2px 6px rgba(10, 46, 111, 0.05);
  border: 1px solid rgba(10, 46, 111, 0.06);
}
.ara-auth-mark {
  display: block; width: 76px; height: 76px;
  margin: 0 auto 14px;
  filter: drop-shadow(0 4px 14px rgba(10, 46, 111, 0.14));
}
.ara-auth-card h1 {
  text-align: center; margin: 0 0 6px;
  font-size: 24px; font-weight: 700; color: var(--araflo-navy);
  letter-spacing: -0.2px;
}
.ara-auth-lede {
  text-align: center; margin: 0 0 26px;
  color: var(--ara-muted); font-size: 14px;
}

/* Auth form — fields stack cleanly, label above input, breathing room. */
.ara-auth-form { display: flex; flex-direction: column; gap: 18px; }
.ara-auth-field { display: flex; flex-direction: column; gap: 8px; }
.ara-auth-field > span {
  font-size: 13px; font-weight: 600; color: var(--ara-text);
  letter-spacing: 0.1px;
}
.ara-auth-field > input {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px; font: inherit; font-size: 15px;
  background: white; color: var(--ara-text);
  border: 1.5px solid var(--ara-line); border-radius: 10px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.ara-auth-field > input::placeholder { color: var(--ara-muted); opacity: 0.6; }
.ara-auth-field > input:hover { border-color: rgba(10, 46, 111, 0.24); }
.ara-auth-field > input:focus {
  outline: none; border-color: var(--araflo-navy);
  box-shadow: 0 0 0 3px rgba(10, 46, 111, 0.14);
}
.ara-auth-submit {
  margin-top: 6px; padding: 12px 16px !important;
  font-size: 15px !important; font-weight: 600;
  border-radius: 10px !important;
}
.ara-auth-actions {
  display: flex; gap: 10px; margin-top: 6px;
}
.ara-auth-actions .ara-auth-submit {
  flex: 1; margin-top: 0;
  text-align: center; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.ara-btn-secondary {
  background: white; color: var(--araflo-navy);
  border: 1.5px solid var(--araflo-navy);
  transition: background 120ms ease, color 120ms ease;
}
.ara-btn-secondary:hover {
  background: var(--araflo-navy); color: white;
}
.ara-auth-foot {
  text-align: center; margin: 22px 0 0;
  color: var(--ara-muted); font-size: 13px;
  border-top: 1px solid var(--ara-line); padding-top: 18px;
}
.ara-auth-foot a { color: var(--araflo-navy); font-weight: 600; }

/* Social sign-in buttons — sit above the email form, separated by an
   'or' divider. Each button pairs a brand-coloured icon with the
   provider name. Neutral white background so we don't have to
   maintain three tinted variants. */
.ara-auth-social { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.ara-social-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 11px 14px;
  background: white; color: var(--ara-text);
  border: 1.5px solid var(--ara-line); border-radius: 10px;
  font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, transform 40ms ease;
}
.ara-social-btn:hover:not(:disabled) {
  border-color: rgba(10, 46, 111, 0.34);
  background: #FAFBFD;
}
.ara-social-btn:active:not(:disabled) { transform: translateY(1px); }
.ara-social-btn:disabled { opacity: 0.55; cursor: wait; }
.ara-social-btn svg { flex-shrink: 0; }

.ara-auth-divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--ara-muted); font-size: 12px;
  text-transform: uppercase; letter-spacing: 1px;
  margin: 4px 0 18px;
}
.ara-auth-divider::before,
.ara-auth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--ara-line);
}
.ara-auth-field em {
  font-style: normal; color: var(--ara-muted); font-weight: 400; font-size: 12px;
}

@media (max-width: 520px) {
  .ara-auth { padding: 16px; }
  .ara-auth-card { padding: 32px 24px 24px; border-radius: 14px; }
  .ara-auth-mark { width: 64px; height: 64px; }
  .ara-auth-card h1 { font-size: 21px; }
  .ara-auth-actions { flex-direction: column; }
}

/* ── Intake — public client-facing page ─────────────────────────────── */
.ara-intake { background: var(--ara-cream); padding: 24px; }
.ara-intake-card {
  max-width: 560px; margin: 24px auto; background: white;
  border-radius: var(--ara-radius); padding: 28px; box-shadow: var(--ara-shadow);
}
.ara-intake-header { margin-bottom: 24px; }
.ara-intake-brand { color: var(--ara-gold-text); font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; font-size: 12px; }
.ara-intake-wordmark { display: block; height: 44px; width: auto; margin-bottom: 12px; }

.ara-stepper {
  display: flex; gap: 6px; list-style: none; padding: 0; margin: 18px 0 0;
  font-size: 12px; color: var(--ara-muted);
}
.ara-stepper li {
  flex: 1; padding: 8px 4px; text-align: center;
  border-top: 3px solid var(--ara-line); border-radius: 2px;
}
.ara-stepper li.is-active { color: var(--ara-midnight); border-top-color: var(--ara-teal); font-weight: 600; }
.ara-stepper li.is-done   { color: var(--ara-teal); border-top-color: var(--ara-teal); }

.ara-step-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; }
.ara-step-done { text-align: center; padding: 24px 0; }
.ara-consent { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; }
.ara-consent input { margin-top: 4px; }

/* ── Insight cards (Mastercard vCFO pattern per §14) ──────────────── */
.ara-insights { display: flex; flex-direction: column; gap: 12px; }
.ara-insight {
  border-left: 4px solid var(--ara-line); padding: 12px 14px;
  background: var(--ara-soft); border-radius: var(--ara-radius-sm);
}
.ara-insight header { display: flex; gap: 8px; align-items: baseline; }
.ara-insight-icon { font-size: 18px; }
.ara-insight p { margin: 6px 0 8px; color: var(--ara-muted); }
.ara-insight-urgent { border-left-color: var(--ara-danger); background: #fcf3f1; }
.ara-insight-watch  { border-left-color: var(--ara-warn);   background: #fbf6e8; }
.ara-insight-info   { border-left-color: var(--ara-success); background: #f1f8f3; }
.ara-insight .ara-btn { padding: 6px 12px; font-size: 13px; }

/* ── Ask Ara chat (Lili pattern per §14) ───────────────────────────── */
.ara-chat-shell {
  display: flex; flex-direction: column; gap: 12px;
  height: calc(100vh - 160px); max-width: 760px;
}
.ara-chat-stream {
  flex: 1; overflow-y: auto;
  background: white; border: 1px solid var(--ara-line); border-radius: var(--ara-radius);
  padding: 18px; box-shadow: var(--ara-shadow);
  display: flex; flex-direction: column; gap: 14px;
}

/* Lili-style header card — STICKY at the top of the stream so Ara's
   identity remains present as the conversation grows. Without this, the
   card scrolls out of view after two exchanges and the panel loses its
   personality mid-session. */
.ara-chat-header {
  position: sticky; top: -18px;         /* cancels stream's 18px top padding */
  z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 12px 12px 14px;
  margin: -18px -18px 4px;              /* bleed to the stream's inner edges */
  background: white;
  border-bottom: 1px solid var(--ara-line);
}
/* Compact form after the merchant starts talking — hides the long hello
   line and shrinks the avatar so it doesn't dominate. Toggled by JS
   adding .is-compact to .ara-chat-stream on first user message. */
.ara-chat-stream.is-compact .ara-chat-avatar { width: 36px; height: 36px; padding: 4px; }
.ara-chat-stream.is-compact .ara-chat-header h2 { font-size: 15px; }
.ara-chat-stream.is-compact .ara-chat-header { padding: 10px 12px; gap: 2px; }
.ara-chat-stream.is-compact .ara-chat-subtitle,
.ara-chat-stream.is-compact .ara-chat-hello { display: none; }
.ara-chat-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: white; padding: 6px;
  box-shadow: 0 2px 10px rgba(10, 46, 111, 0.12);
}
.ara-chat-header h2 { margin: 4px 0 0; font-size: 18px; }
.ara-chat-subtitle {
  margin: 0; color: var(--ara-muted); font-size: 13px;
}
.ara-chat-hello {
  margin: 10px 0 0; color: var(--ara-text);
  font-size: 14px; line-height: 1.5; text-align: center; max-width: 44ch;
}

.ara-msg { display: flex; gap: 10px; max-width: 88%; }
.ara-msg-ara { align-self: flex-start; }
.ara-msg-me  { align-self: flex-end; flex-direction: row-reverse; }
.ara-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--ara-gold); color: var(--ara-midnight);
  display: grid; place-items: center; font-weight: 700; font-family: Georgia, serif;
  flex-shrink: 0; object-fit: contain;
}
.ara-msg-me .ara-avatar {
  background: var(--ara-teal); color: white;
  font-family: inherit; font-size: 11px; letter-spacing: 0.5px;
}
.ara-bubble {
  background: var(--ara-cream); color: var(--ara-midnight);
  padding: 10px 14px; border-radius: 14px;
  white-space: pre-wrap; word-wrap: break-word;
}
.ara-msg-me .ara-bubble { background: var(--ara-teal); color: white; }
.ara-bubble.is-streaming::after {
  content: "▍"; opacity: 0.5; margin-left: 2px;
}

/* Response card = bubble body + optional "Next → …" row below.
   The card wraps them so both stack under one avatar without extra flex. */
.ara-response-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ara-response-action { display: flex; }

/* Two chip variants — the styling difference is the honest signal:
   - .is-linked  → real <a>, real destination, looks tappable
   - .ara-next-caption → plain text label, no border, no cursor, italic —
                          reads as "note" not "control" so we don't lie */
.ara-next-chip.is-linked {
  background: white; border: 1px solid var(--araflo-navy);
  color: var(--araflo-navy);
  padding: 8px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600; line-height: 1;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}
.ara-next-chip.is-linked:hover {
  background: var(--araflo-navy); color: white; text-decoration: none;
}
/* Proactive nudge — a soft-tinted bubble so it reads as "Ara noticed
   something" rather than a reply to an ongoing thread. */
.ara-msg-proactive .ara-bubble {
  background: rgba(255, 200, 61, 0.14);  /* faint gold wash */
  border-left: 3px solid var(--araflo-gold);
}
.ara-next-caption {
  color: var(--ara-muted);
  font-size: 13px; font-style: italic; padding: 4px 0 0;
  cursor: default;
}

/* Data highlight — the number is the point of a "data + interpretation +
   action" card, so let it read as data, not prose. Subtle warm tint on
   currency and percentages picked out client-side by ara.js. */
.ara-bubble .ara-hl {
  background: rgba(255, 200, 61, 0.28);  /* faint gold wash */
  color: inherit;
  padding: 0 3px; border-radius: 3px;
  font-weight: 600;
}

/* Typing indicator — three dots while awaiting the first streamed token. */
.ara-bubble.is-typing {
  display: flex; align-items: center; gap: 6px;
  padding: 14px 16px; min-height: 20px;
}
.ara-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ara-muted); display: inline-block;
  animation: ara-dot-bounce 1.2s infinite ease-in-out both;
}
.ara-dot:nth-child(2) { animation-delay: 0.15s; }
.ara-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes ara-dot-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
  40%           { transform: scale(1);   opacity: 1;   }
}

.ara-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ara-chip {
  background: var(--ara-soft); border: 1px solid var(--ara-line);
  padding: 8px 12px; border-radius: 999px; cursor: pointer;
  font: inherit; color: var(--ara-midnight);
}
.ara-chip:hover { background: white; border-color: var(--ara-teal); color: var(--ara-teal); }

.ara-chat-input {
  display: flex; gap: 8px; align-items: center;
  background: white; border: 1px solid var(--ara-line); border-radius: 999px;
  padding: 6px 6px 6px 16px; box-shadow: var(--ara-shadow);
}
.ara-chat-input input {
  flex: 1; border: 0; padding: 10px 4px; font: inherit; background: transparent;
}
.ara-chat-input input:focus { outline: none; }
.ara-chat-send {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--araflo-navy); color: white;
  border: 0; cursor: pointer; flex-shrink: 0;
  transition: background 120ms ease;
}
.ara-chat-send:hover { background: var(--ara-midnight); }
.ara-chat-attribution {
  margin: 2px 0 0; text-align: center;
  color: var(--ara-muted); font-size: 12px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── Ara draft box (client follow-up) ──────────────────────────────── */
.ara-draft-textarea {
  width: 100%; padding: 12px 14px; font: inherit; line-height: 1.55;
  border: 1px solid var(--ara-line); border-radius: var(--ara-radius-sm);
  background: var(--ara-soft); color: var(--ara-midnight);
  resize: vertical; margin-bottom: 10px;
}
.ara-draft-textarea:focus { outline: 2px solid var(--ara-teal); outline-offset: 1px; }

/* ── Aracalend · calendar (month + week) ───────────────────────────── */
.ara-view-switch {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--ara-cream); border-radius: 999px; margin-bottom: 12px;
}
.ara-view {
  padding: 6px 14px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--ara-muted); background: transparent;
}
.ara-view.is-active { background: white; color: var(--ara-midnight); font-weight: 600; box-shadow: var(--ara-shadow); }

.ara-cal-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap;
}
.ara-cal-head h2 { margin: 0; font-size: 17px; flex: 1; min-width: 140px; }
.ara-cal-nav { padding: 5px 12px; font-size: 16px; line-height: 1; }

/* Month grid */
.ara-cal-dow, .ara-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ara-cal-dow { gap: 4px; margin-bottom: 4px; }
.ara-cal-dow span {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--ara-muted); text-align: center; padding-bottom: 2px;
}
.ara-cal-grid { gap: 4px; }
.ara-cal-cell {
  min-height: 84px; padding: 5px 5px 6px;
  border: 1px solid var(--ara-line); border-radius: var(--ara-radius-sm);
  background: white; display: flex; flex-direction: column; gap: 3px;
  overflow: hidden;
}
/* A closed day and an empty day are different facts — show that. */
.ara-cal-cell.is-closed { background: repeating-linear-gradient(
    45deg, var(--ara-cream), var(--ara-cream) 6px, #F2EEE6 6px, #F2EEE6 12px); }
.ara-cal-cell.is-outside { opacity: 0.45; }
.ara-cal-cell.is-past .ara-cal-daynum { opacity: 0.5; }
.ara-cal-cell.is-today { border-color: var(--ara-teal); box-shadow: inset 0 0 0 1px var(--ara-teal); }
.ara-cal-cell.is-today .ara-cal-daynum { color: var(--ara-teal); font-weight: 700; }
.ara-cal-daynum { font-size: 12px; color: var(--ara-midnight); font-family: Georgia, serif; }
.ara-cal-chips { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ara-cal-chip {
  display: block; width: 100%; text-align: left;
  font: inherit; font-size: 10.5px; line-height: 1.3;
  padding: 2px 5px; border: 0; border-radius: 4px; cursor: pointer;
  background: var(--ara-teal); color: white;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ara-cal-chip:hover { background: #0d5c47; }
.ara-cal-chip.is-done { background: var(--ara-cream); color: var(--ara-muted); }
.ara-cal-more { font-size: 10px; color: var(--ara-muted); padding-left: 5px; }

/* Week time-grid */
.ara-week-wrap { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; }
.ara-week-gutter { position: relative; flex: 0 0 46px; }
.ara-week-gutter span {
  position: absolute; right: 4px; font-size: 10px; color: var(--ara-muted);
  transform: translateY(-50%);
}
.ara-week-cols { display: grid; grid-template-columns: repeat(7, minmax(84px, 1fr)); gap: 4px; flex: 1; }
.ara-week-col { min-width: 0; }
.ara-week-colhead {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 4px 0 6px; font-size: 10.5px; color: var(--ara-muted);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.ara-week-colhead strong { font-family: Georgia, serif; font-size: 15px; color: var(--ara-midnight); }
.ara-week-col.is-today .ara-week-colhead strong { color: var(--ara-teal); }
.ara-week-body {
  position: relative; border: 1px solid var(--ara-line);
  border-radius: var(--ara-radius-sm); background: var(--ara-cream); overflow: hidden;
}
.ara-week-col.is-closed .ara-week-body { background: repeating-linear-gradient(
    45deg, var(--ara-cream), var(--ara-cream) 6px, #F2EEE6 6px, #F2EEE6 12px); }
/* Working hours read as available space; everything else is off-hours. */
.ara-week-open { position: absolute; left: 0; right: 0; background: white; }
.ara-week-block {
  position: absolute; left: 2px; right: 2px;
  background: var(--ara-teal); color: white; border: 0;
  border-radius: 4px; padding: 3px 5px; cursor: pointer;
  font: inherit; font-size: 10.5px; line-height: 1.25; text-align: left;
  overflow: hidden;
}
.ara-week-block:hover { background: #0d5c47; }
.ara-week-block.is-done { background: var(--ara-muted); }
.ara-week-block strong { display: block; font-weight: 700; }

@media (max-width: 720px) {
  .ara-cal-cell { min-height: 62px; }
  .ara-cal-chip { font-size: 9.5px; }
  .ara-cal-dow span { font-size: 9.5px; }
}

/* ── Ask Ara — mobile pass ────────────────────────────────────────────
   375px is the target. Header shrinks, avatars stay legible, composer
   loses padding but keeps the pill shape + circular send. */
@media (max-width: 520px) {
  .ara-chat-shell { height: calc(100vh - 140px); }
  .ara-chat-stream { padding: 12px; }
  .ara-chat-header { margin: -12px -12px 4px; padding: 10px 10px 12px; }
  .ara-chat-avatar { width: 48px; height: 48px; }
  .ara-chat-hello { font-size: 13px; }
  .ara-msg { max-width: 92%; }
  .ara-avatar { width: 26px; height: 26px; }
  .ara-bubble { padding: 9px 12px; font-size: 14px; }
  .ara-chips { gap: 6px; }
  .ara-chip { padding: 6px 10px; font-size: 12px; }
  .ara-chat-input { padding: 4px 4px 4px 12px; }
  .ara-chat-input input { padding: 8px 4px; font-size: 15px; /* iOS zoom guard */ }
  .ara-chat-send { width: 36px; height: 36px; }
  .ara-chat-attribution { font-size: 11px; }
}

/* ── Aracalend · day strip + slot picker ───────────────────────────── */
.ara-daystrip {
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 10px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.ara-day {
  flex: 0 0 auto; scroll-snap-align: start;
  min-width: 62px; padding: 10px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: white; border: 1px solid var(--ara-line);
  border-radius: var(--ara-radius-sm); cursor: pointer; font: inherit;
  color: var(--ara-midnight); line-height: 1.2;
}
.ara-day:hover:not(:disabled) { border-color: var(--ara-teal); }
.ara-day.is-active {
  background: var(--ara-teal); border-color: var(--ara-teal); color: white;
}
.ara-day.is-closed, .ara-day:disabled {
  opacity: 0.4; cursor: not-allowed; background: var(--ara-cream);
}
.ara-day-weekday { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.ara-day-num { font-size: 19px; font-weight: 700; font-family: Georgia, serif; }
.ara-day-month { font-size: 11px; opacity: 0.75; }

.ara-slots {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px; margin: 6px 0 10px;
}
.ara-slot {
  padding: 11px 8px; text-align: center;
  background: white; border: 1px solid var(--ara-line);
  border-radius: var(--ara-radius-sm); cursor: pointer;
  font: inherit; color: var(--ara-midnight);
}
.ara-slot:hover { border-color: var(--ara-teal); color: var(--ara-teal); }
.ara-slot.is-active {
  background: var(--ara-teal); border-color: var(--ara-teal); color: white; font-weight: 600;
}
.ara-slots .ara-empty, .ara-slots .ara-error { grid-column: 1 / -1; }

/* ── Session-length tier cards (public intake page) ───────────────────
   Reuses the Georgia-serif money treatment from the dashboard's metric
   cards and receipt-card preview, so a price reads the same visual
   "weight" everywhere in the product instead of looking like an
   afterthought bolted onto a plain radio list. */
.ara-tier-cards {
  display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0 6px;
}
.ara-tier-card {
  flex: 1 1 140px; min-width: 130px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  padding: 16px 14px; background: white; border: 1px solid var(--ara-line);
  border-radius: var(--ara-radius); cursor: pointer; font: inherit; text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.ara-tier-card:hover { border-color: var(--ara-teal); }
.ara-tier-card:focus-visible { outline: 2px solid var(--ara-teal); outline-offset: 2px; }
.ara-tier-card.is-active {
  border-color: var(--ara-teal); border-width: 2px; padding: 15px 13px;
  box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.12);
  background: #f3faf7;
}
.ara-tier-duration-pill {
  font-size: 11px; letter-spacing: 0.4px; text-transform: uppercase; font-weight: 600;
  color: var(--ara-teal); background: #e8f0ee; padding: 3px 9px; border-radius: 999px;
}
.ara-tier-price {
  font-family: Georgia, serif; font-size: 26px; color: var(--ara-midnight); line-height: 1;
}
.ara-tier-price small { font-size: 15px; opacity: 0.6; font-weight: 400; }
.ara-tier-card.is-active .ara-tier-price { color: var(--ara-teal); }
.ara-tier-label { font-size: 13px; color: var(--ara-muted); line-height: 1.3; }

.ara-welcome-back {
  background: #e8f0ee; color: var(--ara-teal); font-weight: 600; font-size: 14px;
  border-radius: var(--ara-radius-sm); padding: 10px 12px; margin: -6px 0 4px;
}

/* Booking rows on the merchant's manage page. */
.ara-booking {
  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
  justify-content: space-between;
  padding: 14px 0; border-bottom: 1px solid var(--ara-line);
}
.ara-booking:last-child { border-bottom: 0; }
.ara-booking-when { font-family: Georgia, serif; font-size: 15px; color: var(--ara-midnight); }
.ara-booking-who { color: var(--ara-muted); font-size: 13px; }
.ara-booking-actions { display: flex; gap: 8px; }
.ara-booking-meet { margin-top: 4px; }
.ara-booking-meet .ara-link { font-size: 13px; padding: 0; }
.ara-booking.is-cancelled .ara-booking-when { text-decoration: line-through; opacity: 0.6; }

.ara-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.ara-tab {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--ara-line);
  background: var(--ara-soft); cursor: pointer; font: inherit; color: var(--ara-midnight);
}
.ara-tab.is-active { background: var(--ara-midnight); border-color: var(--ara-midnight); color: white; }

/* Availability editor grid. */
.ara-hours-row {
  display: grid; grid-template-columns: 72px 1fr auto; gap: 10px;
  align-items: center; padding: 8px 0; border-bottom: 1px solid var(--ara-line);
}
.ara-hours-row:last-of-type { border-bottom: 0; }
.ara-hours-day { font-weight: 600; text-transform: capitalize; }
.ara-hours-windows { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ara-hours-windows input[type=time] {
  padding: 6px 8px; border: 1px solid var(--ara-line);
  border-radius: var(--ara-radius-sm); font: inherit;
}

/* ── Activation checklist (first-run) ──────────────────────────────── */
.ara-setup {
  margin-bottom: 18px;
  border-left: 3px solid var(--ara-gold);
  background: linear-gradient(180deg, #FDFAF3 0%, white 60%);
}
.ara-setup-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; flex-wrap: wrap; margin-bottom: 12px;
}
.ara-setup-head h2 { margin-bottom: 2px; }
.ara-setup-progress {
  flex: 0 0 140px; height: 6px; border-radius: 999px;
  background: var(--ara-line); overflow: hidden; margin-top: 8px;
}
.ara-setup-progress span {
  display: block; height: 100%; background: var(--ara-teal);
  transition: width .4s ease;
}

.ara-setup-steps { list-style: none; margin: 0; padding: 0; }
.ara-setup-step {
  display: grid; grid-template-columns: 26px 1fr auto;
  align-items: center; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--ara-line);
}
.ara-setup-step:last-child { border-bottom: 0; }
.ara-setup-tick {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
  background: var(--ara-cream); color: var(--ara-muted);
  border: 1px solid var(--ara-line);
}
.ara-setup-step.is-done .ara-setup-tick {
  background: var(--ara-teal); border-color: var(--ara-teal); color: white;
}
.ara-setup-step.is-done .ara-setup-label { color: var(--ara-muted); }
.ara-setup-step.is-next .ara-setup-tick {
  border-color: var(--ara-gold); color: var(--ara-gold-text);
  background: #FBF6E8;
}
.ara-setup-step.is-next .ara-setup-label { font-weight: 600; }
.ara-setup-label { font-size: 14px; }

.ara-setup-link { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ara-line); }
.ara-setup-link label {
  display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--ara-muted); margin-bottom: 6px;
}
.ara-setup-link-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ara-setup-link-row input {
  flex: 1 1 240px; min-width: 0;
  padding: 9px 12px; font: inherit; font-size: 13px;
  border: 1px solid var(--ara-line); border-radius: var(--ara-radius-sm);
  background: var(--ara-soft); color: var(--ara-midnight);
}
.ara-setup-link-row input:focus { outline: 2px solid var(--ara-teal); outline-offset: 1px; }

@media (max-width: 620px) {
  .ara-setup-step { grid-template-columns: 22px 1fr; row-gap: 6px; }
  .ara-setup-step .ara-btn { grid-column: 2; justify-self: start; }
}

/* ── Revenue Actions ───────────────────────────────────────────────── */
.ara-revenue-panel { margin-bottom: 24px; }
.ara-revenue-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; flex-wrap: wrap; margin-bottom: 6px;
}
.ara-revenue-head h2 { margin-bottom: 2px; }
.ara-revenue-total { text-align: right; }
.ara-revenue-total .ara-card-value { color: var(--ara-teal); }
.ara-card-caption-muted {
  font-size: 11px; color: var(--ara-muted); margin: 2px 0 0;
  text-transform: uppercase; letter-spacing: 0.4px;
}

.ara-actions { list-style: none; margin: 12px 0 0; padding: 0; }
.ara-action {
  display: grid; grid-template-columns: 130px 1fr auto;
  gap: 16px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--ara-line);
}
.ara-action:last-child { border-bottom: 0; }
.ara-action-value { border-left: 3px solid var(--ara-line); padding-left: 12px; }
.ara-action-amount {
  display: block; font-family: Georgia, serif; font-size: 24px;
  color: var(--ara-midnight); line-height: 1.1;
}
.ara-action-conf {
  display: block; font-size: 10.5px; color: var(--ara-muted);
  text-transform: uppercase; letter-spacing: 0.4px; margin-top: 3px;
}
.ara-action-body strong { display: block; color: var(--ara-midnight); margin-bottom: 3px; }
.ara-action-body p { margin: 0; color: var(--ara-muted); font-size: 13px; }

/* Confidence is carried by colour as well as words — but the word is
   always present, so colour is never the only signal. */
.ara-action-owed .ara-action-value        { border-left-color: var(--ara-success); }
.ara-action-owed .ara-action-amount       { color: var(--ara-success); }
.ara-action-recoverable .ara-action-value { border-left-color: var(--ara-teal); }
.ara-action-recoverable .ara-action-amount{ color: var(--ara-teal); }
.ara-action-at_risk .ara-action-value     { border-left-color: var(--ara-warn); }
.ara-action-at_risk .ara-action-amount    { color: var(--ara-warn-text); }
.ara-action-potential .ara-action-value   { border-left-color: var(--ara-line); }
.ara-action-potential .ara-action-amount  { color: var(--ara-muted); font-style: italic; }

@media (max-width: 700px) {
  .ara-action { grid-template-columns: 1fr; gap: 8px; }
  .ara-action-value { border-left: 0; padding-left: 0; }
  .ara-action-amount { display: inline; font-size: 20px; }
  .ara-action-conf { display: inline; margin-left: 8px; }
}

/* ══ Public landing page ═════════════════════════════════════════════════
   Namespaced .ara-lp-* so nothing here can leak into the authenticated
   dashboard. The landing page is a standalone document — it does not use
   the .ara-shell grid, so <body class="ara-lp"> resets to flow layout.

   Type scale is fluid (clamp) because this is the one surface where the
   same headline has to hold up at 360px and at 1600px. */

.ara-lp { display: block; background: var(--ara-cream); }
.ara-lp-wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ── Top bar ───────────────────────────────────────────────────────────
   Sticky with a translucent wash so the navy hero shows through as it
   scrolls under. Falls back to solid cream where backdrop-filter is
   unsupported. */
.ara-lp-bar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(247, 244, 238, 0.88);
  border-bottom: 1px solid var(--ara-line);
}
@supports (backdrop-filter: blur(10px)) {
  .ara-lp-bar { backdrop-filter: blur(10px) saturate(140%); }
}
.ara-lp-bar-inner {
  max-width: 1080px; margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; gap: 24px;
}
.ara-lp-logo {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px; font-weight: 700; letter-spacing: -0.2px;
  color: var(--araflo-navy); text-decoration: none;
}
.ara-lp-logo:hover { text-decoration: none; }
.ara-lp-logo img { border-radius: 7px; display: block; }
.ara-lp-bar-links { display: flex; gap: 26px; margin-left: auto; }
.ara-lp-bar-links a {
  color: var(--ara-muted); font-size: 14px; font-weight: 600;
  text-decoration: none; transition: color 120ms ease;
}
.ara-lp-bar-links a:hover { color: var(--araflo-navy); text-decoration: none; }
.ara-lp-bar-cta { display: flex; align-items: center; gap: 10px; }

/* ── Buttons (landing-local: bigger and rounder than the app's) ──────── */
.ara-lp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 20px; border-radius: 10px;
  font-size: 14.5px; font-weight: 650; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  border: 1.5px solid transparent;
  transition: transform 80ms ease, background 140ms ease,
              color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.ara-lp-btn:hover { text-decoration: none; transform: translateY(-1px); }
.ara-lp-btn:active { transform: translateY(0); }
.ara-lp-btn-lg { padding: 15px 28px; font-size: 16px; border-radius: 12px; }

/* Gold on navy is 8.3:1 — the token comment forbids gold *text* on light,
   not gold as a background carrying dark text. This is the sanctioned use. */
.ara-lp-btn-gold {
  background: var(--araflo-gold); color: #22303F;
  box-shadow: 0 1px 2px rgba(14,15,17,0.10);
}
.ara-lp-btn-gold:hover { background: #FFD469; box-shadow: 0 6px 18px rgba(255,200,61,0.36); }
.ara-lp-btn-primary { background: var(--ara-teal); color: white; }
.ara-lp-btn-primary:hover { background: #0d5c47; box-shadow: 0 6px 18px rgba(15,110,86,0.28); }
.ara-lp-btn-outline {
  background: transparent; color: white; border-color: rgba(255,255,255,0.5);
}
.ara-lp-btn-outline:hover { background: rgba(255,255,255,0.12); border-color: white; }
.ara-lp-btn-outline-navy {
  background: white; color: var(--araflo-navy); border-color: var(--araflo-navy);
}
.ara-lp-btn-outline-navy:hover { background: var(--araflo-navy); color: white; }
.ara-lp-btn-quiet { background: transparent; color: var(--araflo-navy); padding: 11px 14px; }
.ara-lp-btn-quiet:hover { background: rgba(10,46,111,0.07); }

/* ── Hero ─────────────────────────────────────────────────────────────
   Deep navy with opaque foreground colors for crisp, readable type. */
.ara-lp-hero {
  background:
    radial-gradient(ellipse at 50% 0%, #123C78 0%, transparent 70%),
    linear-gradient(168deg, #092653 0%, #061831 100%);
  color: white;
  padding: clamp(64px, 11vw, 124px) 0 clamp(72px, 12vw, 132px);
  text-align: center;
}
.ara-lp-hero-inner { max-width: 820px; margin: 0 auto; padding: 0 24px; }
.ara-lp-eyebrow {
  margin: 0 0 22px;
  font-size: 13.5px; font-weight: 500;
  letter-spacing: 0.2px; text-transform: none;
  color: rgba(255, 200, 61, 0.78);
}
.ara-lp-hero .ara-lp-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  max-width: 100%; padding: 10px 16px; margin-bottom: 28px;
  border: 1px solid #49658C; border-radius: 6px;
  background: #102E59; color: #FFFFFF;
  font-size: 14px; font-weight: 650; line-height: 1.5;
  letter-spacing: 0.15px; text-align: left;
}
.ara-lp-hero .ara-lp-eyebrow::before {
  content: ""; flex: 0 0 20px; height: 3px;
  background: var(--araflo-gold);
}
.ara-lp-h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(38px, 6.4vw, 68px);
  line-height: 1.07; letter-spacing: -1.2px;
  color: white; margin: 0 0 24px; font-weight: 400;
}
.ara-lp-h1 em { font-style: italic; color: var(--araflo-gold); }
.ara-lp-lede {
  font-size: clamp(16px, 1.9vw, 19.5px); line-height: 1.62;
  color: #E3EAF5;
  max-width: 610px; margin: 0 auto 36px;
}
.ara-lp-hero-cta {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
.ara-lp-hero-note {
  margin: 30px 0 0; font-size: 13px; color: #C5D2E5;
}

/* ── Generic section rhythm ───────────────────────────────────────────── */
.ara-lp-section { padding: clamp(60px, 9vw, 104px) 0; }
.ara-lp-section-alt { background: white; }
.ara-lp-kicker {
  margin: 0 0 12px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 1.7px; text-transform: uppercase;
  color: var(--ara-gold-text);
}
.ara-lp-h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(27px, 3.9vw, 41px);
  line-height: 1.16; letter-spacing: -0.7px;
  color: var(--araflo-navy); margin: 0 0 16px; font-weight: 400;
}
.ara-lp-sub {
  font-size: 16.5px; line-height: 1.65; color: var(--ara-muted);
  max-width: 620px; margin: 0 0 44px;
}

/* ── The swap list (five tools → Araflo) ─────────────────────────────── */
.ara-lp-swap { list-style: none; padding: 0; margin: 0 0 36px; }
.ara-lp-swap-row {
  display: grid;
  grid-template-columns: minmax(180px, 230px) 34px 1fr;
  align-items: center; gap: 18px;
  padding: 20px 22px;
  background: white; border: 1px solid var(--ara-line);
  border-radius: var(--ara-radius);
  margin-bottom: 10px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.ara-lp-section-alt .ara-lp-swap-row { background: var(--ara-soft); }
.ara-lp-swap-row:hover {
  border-color: rgba(10,46,111,0.22);
  box-shadow: 0 4px 18px rgba(14,15,17,0.06);
}
.ara-lp-swap-old { display: flex; flex-direction: column; gap: 3px; }
.ara-lp-swap-tool {
  font-weight: 650; color: var(--ara-muted);
  text-decoration: line-through; text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(176,48,48,0.55);
}
.ara-lp-swap-price {
  font-family: Georgia, serif; font-size: 21px; color: var(--ara-danger);
}
.ara-lp-swap-price span { font-size: 12px; font-family: inherit; opacity: 0.7; }
.ara-lp-swap-price-manual { font-size: 17px; font-style: italic; }
.ara-lp-swap-price-none { color: var(--ara-muted); }
.ara-lp-swap-arrow {
  font-size: 21px; color: var(--araflo-orange); text-align: center; font-weight: 700;
}
.ara-lp-swap-new strong {
  display: block; color: var(--araflo-navy); font-size: 16.5px; margin-bottom: 3px;
}
.ara-lp-swap-new span { color: var(--ara-muted); font-size: 14.5px; line-height: 1.55; }
.ara-lp-swap-row-new { border-style: dashed; border-color: rgba(10,46,111,0.24); }

/* Total band — the payoff line for the whole section. */
.ara-lp-total {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(20px, 5vw, 56px); flex-wrap: wrap;
  padding: 30px 28px;
  background: linear-gradient(140deg, #0D3A85, var(--araflo-navy));
  border-radius: var(--ara-radius); color: white; text-align: center;
}
.ara-lp-total-label {
  display: block; font-size: 12px; letter-spacing: 0.9px;
  text-transform: uppercase; color: rgba(255,255,255,0.62); margin-bottom: 7px;
}
.ara-lp-total-num {
  font-family: Georgia, serif; font-size: clamp(28px, 4.4vw, 40px);
  color: rgba(255,255,255,0.58); text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.ara-lp-total-num span { font-size: 14px; }
.ara-lp-total-num-win {
  color: var(--araflo-gold); text-decoration: none; white-space: nowrap;
}
.ara-lp-total-arrow { font-size: 25px; color: var(--araflo-gold); }

/* ── Feature grid ─────────────────────────────────────────────────────── */
.ara-lp-features {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
}
.ara-lp-feature {
  background: var(--ara-cream); border: 1px solid var(--ara-line);
  border-radius: var(--ara-radius); padding: 26px 24px;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.ara-lp-section-alt .ara-lp-feature { background: var(--ara-soft); }
.ara-lp-feature:hover {
  transform: translateY(-3px); box-shadow: 0 10px 28px rgba(14,15,17,0.08);
}
.ara-lp-feature-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 11px; margin-bottom: 15px;
  background: white; border: 1px solid var(--ara-line);
  /* The inline SVGs stroke in currentColor, so this one line sets all six. */
  color: var(--ara-teal);
}
.ara-lp-feature-icon svg { width: 22px; height: 22px; display: block; }
.ara-lp-feature h3 {
  font-family: Georgia, serif; font-size: 19px;
  color: var(--araflo-navy); margin: 0 0 9px;
}
.ara-lp-feature p { margin: 0; color: var(--ara-muted); font-size: 14.5px; line-height: 1.62; }

/* ── Meet Ara ─────────────────────────────────────────────────────────── */
.ara-lp-ara-grid {
  display: grid; gap: clamp(32px, 5vw, 60px);
  grid-template-columns: 1fr 1fr; align-items: center;
}
.ara-lp-ara-copy .ara-lp-sub { margin-bottom: 24px; }
.ara-lp-ara-points { list-style: none; padding: 0; margin: 0 0 32px; }
.ara-lp-ara-points li {
  position: relative; padding-left: 27px; margin-bottom: 13px;
  color: var(--ara-text); font-size: 15px; line-height: 1.6;
}
.ara-lp-ara-points li::before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  color: var(--ara-teal); font-weight: 700;
}

/* Chat mock — mirrors the real Ask Ara surface so the promise matches
   the product. Static markup; no JS. */
.ara-lp-chat {
  min-width: 0;
  background: white; border: 1px solid var(--ara-line);
  border-radius: 18px; padding: 20px;
  box-shadow: 0 18px 44px rgba(10,46,111,0.11);
}
.ara-lp-chat-head {
  display: flex; align-items: center; gap: 11px;
  padding-bottom: 15px; margin-bottom: 17px;
  border-bottom: 1px solid var(--ara-line);
}
.ara-lp-chat-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: white; border: 1px solid var(--ara-line);
}
.ara-lp-chat-avatar img { display: block; border-radius: 50%; }
.ara-lp-chat-head strong { display: block; color: var(--araflo-navy); font-size: 15px; }
.ara-lp-chat-head span { font-size: 12.5px; color: var(--ara-muted); }
.ara-lp-bubble {
  padding: 13px 16px; border-radius: 14px;
  font-size: 14.5px; line-height: 1.6; margin-bottom: 11px; width: 100%; max-width: 100%;
  overflow-wrap: anywhere;
}
.ara-lp-bubble-me {
  margin-left: 0; background: var(--ara-teal); color: white;
  border-bottom-right-radius: 5px;
}
.ara-lp-bubble-ara {
  background: var(--ara-cream); color: var(--ara-text);
  border: 1px solid var(--ara-line); border-bottom-left-radius: 5px;
}
.ara-lp-bubble-ara p { margin: 0 0 10px; }
.ara-lp-bubble-ara p:last-child { margin-bottom: 0; }
.ara-lp-bubble-ara b { color: var(--araflo-navy); }
.ara-lp-bubble-action {
  padding-top: 10px; border-top: 1px dashed var(--ara-line);
  color: var(--ara-gold-text); font-weight: 600;
}
.ara-lp-chat-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 15px; }
.ara-lp-chat-chips span {
  padding: 7px 13px; border-radius: 999px;
  background: var(--ara-soft); border: 1px solid var(--ara-line);
  font-size: 12.5px; color: var(--ara-muted);
}

/* ── Public offers and visitor guide ─────────────────────────────────── */
.ara-lp-offers { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; }
.ara-lp-offer { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--ara-line); border-radius: 18px; background: var(--ara-cream); }
.ara-lp-offer h3 { margin: 0 0 14px; color: var(--araflo-navy); font-size: 23px; }
.ara-lp-offer p { margin: 0 0 20px; font-size: 16px; line-height: 1.65; color: var(--ara-text); }
.ara-lp-offer .ara-lp-offer-label { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ara-gold-text); margin-bottom: 24px; }
.ara-lp-offer .ara-lp-btn { margin-top: auto; white-space: normal; text-align: center; }
.ara-lp-offer-practice { background: #0A2E6F; border-color: #0A2E6F; }
.ara-lp-offer-practice h3 { color: white; }
.ara-lp-offer-practice p { color: #E3E9F3; }
.ara-lp-offer-practice .ara-lp-offer-label { color: #FFD469; }
.ara-lp-offer-steps { display: flex; flex-wrap: wrap; list-style: none; gap: 8px 18px; padding: 18px 0; margin: 0 0 24px; border-top: 1px solid #45628F; color: white; font-size: 13px; }
.ara-lp-offer-steps li + li::before { content: '→'; color: #FFD469; margin-right: 12px; }
.ara-lp-example-note { font-size: 12px; color: var(--ara-muted); margin: 14px 0 0; }
.ara-lp-plan, #meet-offer { scroll-margin-top: 100px; }

/* ── Ask Araflo widget — scoped, pre-written Q&A, styled like the chat
   mock above so it reads as one family, not a bolted-on chatbot. ──────── */
.ara-lp-ask-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 64px); align-items: start; text-align: left; }
.ara-lp-guide-copy { padding-top: 28px; }
.ara-lp-guide-copy .ara-lp-sub { margin-bottom: 24px; }
.ara-lp-guide-human { padding-top: 20px; border-top: 1px solid var(--ara-line); font-size: 15px; line-height: 1.7; color: var(--ara-muted); }
.ara-lp-guide-human a { display: block; font-weight: 600; color: var(--araflo-navy); }
.ara-lp-widget {
  width: 100%; max-width: 560px; text-align: left;
  background: white; border: 1px solid var(--ara-line);
  border-radius: 18px; padding: 20px;
  box-shadow: 0 18px 44px rgba(10,46,111,0.11);
}
.ara-lp-widget-head {
  display: flex; align-items: center; gap: 11px;
  padding-bottom: 15px; margin-bottom: 17px;
  border-bottom: 1px solid var(--ara-line);
}
.ara-lp-widget-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: white; border: 1px solid var(--ara-line);
}
.ara-lp-widget-avatar img { display: block; border-radius: 50%; }
.ara-lp-widget-head strong { display: block; color: var(--araflo-navy); font-size: 15px; }
.ara-lp-widget-head span { font-size: 12.5px; color: var(--ara-muted); }
.ara-lp-widget [hidden] { display: none !important; }
.ara-lp-widget-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.ara-lp-widget-chip {
  padding: 10px 12px; min-height: 44px; border-radius: 16px; cursor: pointer;
  background: var(--ara-soft); border: 1px solid var(--ara-line);
  font-size: 14px; line-height: 1.4; font-family: inherit; color: var(--ara-text);
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.ara-lp-widget-chip:hover { border-color: rgba(10,46,111,0.3); }
.ara-lp-widget-chip:focus-visible, .ara-lp-widget a:focus-visible, .ara-lp-offer a:focus-visible {
  outline: 3px solid var(--ara-gold-text); outline-offset: 3px;
}
.ara-lp-widget-chip.is-active, .ara-lp-widget-chip[aria-pressed="true"] {
  background: var(--araflo-navy); border-color: var(--araflo-navy); color: white;
}
.ara-lp-widget-answer {
  background: var(--ara-cream); border: 1px solid var(--ara-line);
  border-radius: 14px; padding: 20px; min-height: 126px;
}
.ara-lp-widget-answer p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ara-text); }
.ara-lp-widget-answer b { color: var(--araflo-navy); }
.ara-lp-widget-answer h3 { margin: 0 0 12px; font-size: 18px; color: var(--araflo-navy); }
.ara-lp-widget-answer p + p { margin-top: 12px; }
.ara-lp-widget-answer .ara-lp-btn { margin-top: 18px; white-space: normal; text-align: center; background: var(--araflo-navy); }
.ara-lp-widget-answer section + section { margin-top: 22px; }
.ara-lp-widget-answer [data-guide-result] { margin-top: 14px; }
.ara-lp-guide-followups { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ara-lp-guide-followups .ara-lp-widget-chip { flex: 1 1 140px; }
@media (max-width: 820px) {
  .ara-lp-ask-wrap { grid-template-columns: minmax(0, 1fr); }
  .ara-lp-guide-copy { padding-top: 0; }
  .ara-lp-widget { max-width: none; }
}
@media (max-width: 620px) {
  .ara-lp-offers { grid-template-columns: minmax(0, 1fr); }
  .ara-lp-offer { padding: 20px; }
  .ara-lp-widget { padding: 16px; }
  .ara-lp-widget-answer { padding: 16px; }
}

/* ── Pricing ──────────────────────────────────────────────────────────── */
.ara-lp-plans {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
  align-items: start;
}
.ara-lp-plan {
  position: relative; background: var(--ara-cream);
  border: 1px solid var(--ara-line); border-radius: 16px;
  padding: 30px 26px;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.ara-lp-section-alt .ara-lp-plan { background: var(--ara-soft); }
.ara-lp-plan:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(14,15,17,0.09); }
.ara-lp-plan-featured {
  background: white;
  border: 2px solid var(--araflo-navy);
  box-shadow: 0 14px 40px rgba(10,46,111,0.15);
}
.ara-lp-section-alt .ara-lp-plan-featured { background: white; }
.ara-lp-plan-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  white-space: nowrap;
  background: var(--araflo-navy); color: white;
  font-size: 11px; font-weight: 700; letter-spacing: 0.7px;
  text-transform: uppercase; padding: 5px 14px; border-radius: 999px;
}
.ara-lp-plan h3 {
  font-family: Georgia, serif; font-size: 23px;
  color: var(--araflo-navy); margin: 0 0 5px;
}
.ara-lp-plan-for { margin: 0 0 20px; font-size: 13.5px; color: var(--ara-muted); }
.ara-lp-plan-price {
  font-family: Georgia, serif; font-size: 46px; line-height: 1;
  color: var(--araflo-navy); margin: 0 0 5px;
}
.ara-lp-plan-price span { font-size: 24px; vertical-align: super; }
.ara-lp-plan-price small {
  font-size: 14px; font-family: "Inter", sans-serif; color: var(--ara-muted);
}
.ara-lp-plan-fee {
  margin: 0 0 22px; font-size: 13px; color: var(--ara-gold-text); font-weight: 600;
}
.ara-lp-plan ul { list-style: none; padding: 0; margin: 0 0 26px; }
.ara-lp-plan li {
  position: relative; padding-left: 24px; margin-bottom: 11px;
  font-size: 14.5px; line-height: 1.55; color: var(--ara-text);
}
.ara-lp-plan li::before {
  content: "✓"; position: absolute; left: 0;
  color: var(--ara-teal); font-weight: 700;
}
.ara-lp-plan .ara-lp-btn { width: 100%; }
.ara-lp-plans-note {
  margin: 32px auto 0; max-width: 600px; text-align: center;
  font-size: 13.5px; line-height: 1.6; color: var(--ara-muted);
}
.ara-lp-pricing-trial {
  display: inline-block; margin: 0 0 40px;
  padding: 8px 16px; border-radius: 999px;
  background: var(--ara-soft); border: 1px solid var(--ara-line);
  font-size: 14px; color: var(--araflo-navy);
}
.ara-lp-pricing-trial strong { color: var(--ara-gold-text); }

/* ── Closing CTA ──────────────────────────────────────────────────────── */
.ara-lp-close {
  background: linear-gradient(150deg, #0D3A85, #071F4C);
  color: white; padding: clamp(60px, 9vw, 96px) 0; text-align: center;
}
.ara-lp-close-h { color: white; }
.ara-lp-close p {
  color: rgba(255,255,255,0.78); font-size: 17px; margin: 0 0 32px;
}
.ara-lp-close .ara-lp-hero-cta { margin-top: 0; }
.ara-lp-close-note { margin: 26px 0 0; font-size: 13px; color: rgba(255,255,255,0.62); }

/* ── Footer ───────────────────────────────────────────────────────────── */
.ara-lp-foot { background: var(--araflo-graphite); color: rgba(255,255,255,0.72); padding: 52px 0 26px; }
.ara-lp-foot-inner {
  display: flex; justify-content: space-between; gap: 34px; flex-wrap: wrap;
  padding-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,0.12);
}
.ara-lp-logo-foot { color: white; }
.ara-lp-foot-tag { margin: 13px 0 0; font-size: 13.5px; line-height: 1.65; color: rgba(255,255,255,0.55); }
.ara-lp-foot-links { display: flex; flex-direction: column; gap: 11px; }
.ara-lp-foot-links a {
  color: rgba(255,255,255,0.72); font-size: 14px; text-decoration: none;
}
.ara-lp-foot-links a:hover { color: white; text-decoration: underline; }
.ara-lp-foot-legal {
  max-width: 1080px; margin: 22px auto 0; padding: 0 24px;
  font-size: 12.5px; color: rgba(255,255,255,0.42);
}
.ara-lp-foot-legal-link {
  color: rgba(255,255,255,0.58); text-decoration: none;
}
.ara-lp-foot-legal-link:hover { color: white; text-decoration: underline; }

/* Expanded homepage footer; the contribution page keeps its compact footer. */
.ara-lp-foot-expanded { background: #081B35; color: #D6E0EF; padding-top: 64px; }
.ara-lp-foot-expanded .ara-lp-foot-inner { display: grid; grid-template-columns: 1fr; gap: 36px; padding-bottom: 32px; }
.ara-lp-foot-expanded .ara-lp-foot-tag { max-width: 470px; color: #C5D2E5; font-size: 14px; line-height: 1.75; }
.ara-lp-foot-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.ara-lp-foot-nav h2 { font-family: inherit; font-size: 14px; font-weight: 650; color: #FFFFFF; margin: 0 0 8px; }
.ara-lp-foot-nav a { color: #D6E0EF; line-height: 1.6; }
.ara-lp-foot-nav a:hover { color: #FFC83D; text-underline-offset: 4px; }
.ara-lp-foot-nav a:focus-visible, .ara-lp-video-heading button:focus-visible { outline: 2px solid #FFC83D; outline-offset: 5px; border-radius: 2px; }
.ara-lp-video-duration { display: block; font-size: 12px; color: #FFC83D; margin-top: 3px; }
.ara-lp-foot-hint { color: #B6C6DE; font-size: 12px; line-height: 1.65; margin: 3px 0 0; }
.ara-lp-foot-expanded .ara-lp-foot-legal, .ara-lp-foot-expanded .ara-lp-foot-legal-link { color: #B6C6DE; }
.ara-lp-foot-expanded .ara-lp-foot-legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; margin-top: 20px; }
.ara-lp-feature h3[id] { scroll-margin-top: 100px; }
.ara-lp-video-dialog { width: min(960px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 1px solid #49658C; border-radius: 12px; background: #081B35; color: white; box-shadow: 0 24px 80px #0008; }
.ara-lp-video-dialog::backdrop { background: #020C1DE6; }
.ara-lp-video-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; }
.ara-lp-video-heading h2 { margin: 0; font-family: inherit; font-size: 17px; color: white; }
.ara-lp-video-heading form { flex-shrink: 0; }
.ara-lp-video-heading button { padding: 8px 12px; border: 1px solid #49658C; border-radius: 6px; background: transparent; color: white; font: inherit; cursor: pointer; }
.ara-lp-video-dialog video { display: block; width: 100%; max-height: 72dvh; background: #000; aspect-ratio: 16 / 9; }
@media (max-width: 820px) {
  .ara-lp-foot-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}
@media (max-width: 620px) {
  .ara-lp-foot-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .ara-lp-video-heading { padding: 12px; }
  .ara-lp-video-heading h2 { font-size: 15px; }
}

/* ── Landing responsive ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ara-lp-ara-grid { grid-template-columns: 1fr; }
  .ara-lp-bar-links { display: none; }   /* CTAs stay — they're the point */
  .ara-lp-bar-cta { margin-left: auto; }
}
@media (max-width: 620px) {
  .ara-lp-wrap, .ara-lp-bar-inner { padding-left: 18px; padding-right: 18px; }
  .ara-lp-swap-row {
    grid-template-columns: 1fr; gap: 10px; padding: 18px;
  }
  .ara-lp-swap-arrow { display: none; }
  .ara-lp-swap-old {
    flex-direction: row; align-items: baseline; gap: 10px;
    padding-bottom: 10px; border-bottom: 1px dashed var(--ara-line);
  }
  .ara-lp-total { flex-direction: column; gap: 14px; }
  .ara-lp-total-arrow { transform: rotate(90deg); }
  .ara-lp-hero-cta { flex-direction: column; }
  .ara-lp-hero-cta .ara-lp-btn { width: 100%; }
  .ara-lp-bar-inner { gap: 8px; }
  .ara-lp-bar-cta { gap: 6px; }
  .ara-lp-bar-cta .ara-lp-btn { padding: 10px; font-size: 13px; }
  .ara-lp-logo { gap: 6px; font-size: 18px; }
  .ara-lp-logo img { width: 28px; height: 28px; }
  .ara-lp-foot-inner { flex-direction: column; gap: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .ara-lp-btn, .ara-lp-feature, .ara-lp-plan, .ara-lp-swap-row {
    transition: none;
  }
  .ara-lp-btn:hover, .ara-lp-feature:hover, .ara-lp-plan:hover {
    transform: none;
  }
}

/* Public product pages use text and CSS instead of heavy mockup images. */
.ara-skip-link { position: fixed; top: -100px; left: 16px; z-index: 100; padding: 12px 18px; background: white; color: #0A2E6F; }
.ara-skip-link:focus { top: 8px; }
.ara-lp-btn, .ara-lp-widget-chip { min-height: 44px; }
.ara-lp-foot-nav a { padding: 8px 0; min-height: 44px; }
.ara-lp-feature .ara-product-link { display: inline-block; padding: 12px 0 0; font-weight: 650; color: #0A2E6F; }
/* About: an editorial story with the same readable practice-site palette. */
.ara-about section[id] { scroll-margin-top: 90px; }
.ara-about-hero { background: #F6F4EF; padding: 64px 0 0; }
.ara-about-hero h1 { max-width: 960px; color: #0B2850; font: clamp(44px, 6.4vw, 84px)/1.06 Georgia, serif; letter-spacing: -2px; margin: 22px 0 30px; }
.ara-about-hero-bottom { display: flex; align-items: end; justify-content: space-between; gap: 40px; padding-bottom: 44px; }
.ara-about-hero-bottom > p { max-width: 660px; margin: 0; color: #344457; font-size: 18px; line-height: 1.8; }
.ara-about-story-link { display: inline-flex; gap: 24px; align-items: center; min-height: 44px; color: #0A2E6F; font-weight: 650; white-space: nowrap; }
.ara-about-origin { display: grid; grid-template-columns: 1fr 80px 1fr; align-items: center; background: #0B2850; color: white; padding: 36px 44px; border-top: 4px solid #FFC83D; }
.ara-about-caption { display: block; font-size: 12px; font-weight: 650; line-height: 1.6; letter-spacing: .7px; }
.ara-about-origin .ara-about-caption { color: #FFD469; }
.ara-about-origin strong { display: block; font: 36px Georgia, serif; margin: 10px 0; }
.ara-about-origin p { color: #DCE6F3; margin: 0; font-size: 15px; line-height: 1.6; }
.ara-about-origin-arrow { font-size: 30px; color: #FFD469; }
.ara-about-editorial { display: grid; grid-template-columns: 1fr 1.15fr; gap: 80px; }
.ara-about-editorial > * { min-width: 0; }
.ara-about-prose p { font-size: 17px; line-height: 1.85; margin: 0 0 20px; color: #344457; }
.ara-about-prose p:last-child { margin-bottom: 0; }
.ara-about-prose .ara-about-lead { font-size: 21px; line-height: 1.65; color: #0B2850; }
.ara-about-founder { background: #E4EEE9; border-top: 1px solid #CDDDD4; border-bottom: 1px solid #CDDDD4; }
.ara-about-prose .ara-about-founder-name { font: 32px/1.25 Georgia, serif; color: #0B2850; margin-bottom: 10px; }
.ara-about-prose .ara-about-founder-role { color: #215441; font-size: 14px; line-height: 1.7; margin-bottom: 28px; }
.ara-about-text-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 650; color: #0A2E6F; }
.ara-about-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; margin-top: 42px; }
.ara-about-tools article { border-top: 1px solid #CDD6D9; padding: 30px 0; min-width: 0; }
.ara-about-tools .ara-about-caption { color: #215441; }
.ara-about-tools h3 { font: 30px Georgia, serif; color: #0B2850; margin: 14px 0; }
.ara-about-tools p { font-size: 16px; line-height: 1.8; color: #344457; max-width: 470px; margin-bottom: 12px; }
.ara-about-tools a { display: inline-flex; gap: 16px; align-items: center; min-height: 44px; color: #0A2E6F; font-weight: 650; }
.ara-about-invitation { background: #0B2850; color: white; padding: 64px 0; }
.ara-about-invitation h2 { color: white; font: clamp(32px, 4vw, 46px)/1.15 Georgia, serif; margin: 20px 0; }
.ara-about-invitation p:not(.ara-product-eyebrow):not(.ara-product-note) { color: #DCE6F3; max-width: 630px; font-size: 17px; line-height: 1.8; }
.ara-about-invitation .ara-product-note a { color: #FFD469; text-decoration: underline; text-underline-offset: 3px; }
.ara-about a:focus-visible { outline: 3px solid #167860; outline-offset: 4px; }
.ara-about-invitation a:focus-visible { outline-color: #FFD469; }
@media (max-width: 900px) {
  .ara-about-editorial { gap: 36px; }
  .ara-about-hero-bottom { align-items: start; flex-direction: column; gap: 18px; }
}
@media (max-width: 640px) {
  .ara-about-hero { padding-top: 36px; }
  .ara-about-hero h1 { letter-spacing: -1.2px; }
  .ara-about-hero-bottom > p { font-size: 16px; }
  .ara-about-origin { grid-template-columns: 1fr; gap: 20px; padding: 28px; }
  .ara-about-origin-arrow { transform: rotate(90deg); justify-self: start; }
  .ara-about-origin strong { font-size: 30px; }
  .ara-about-editorial, .ara-about-tools { grid-template-columns: 1fr; gap: 24px; }
  .ara-about-tools { gap: 0; margin-top: 28px; }
  .ara-about-invitation { padding: 44px 0; }
}
.ara-product-hero { padding: 30px 0 72px; background: #0B2850; color: white; }
.ara-product-breadcrumb { display: flex; gap: 12px; font-size: 13px; margin-bottom: 44px; color: #D7E4F5; }
.ara-product-breadcrumb a { color: #D7E4F5; }
.ara-product-grid { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 56px; }
.ara-product-grid > * { min-width: 0; }
.ara-product-eyebrow { color: #FFD469; font-size: 13px; font-weight: 650; line-height: 1.6; }
.ara-product-hero h1 { color: white; font-family: Georgia, serif; font-size: clamp(36px, 4.5vw, 58px); line-height: 1.1; letter-spacing: -1.4px; margin: 18px 0 24px; }
.ara-product-intro { font-size: 17px; line-height: 1.75; color: #E0E9F5; max-width: 540px; }
.ara-product-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ara-product-actions .ara-lp-btn { white-space: normal; text-align: center; }
.ara-product-note { font-size: 13px; line-height: 1.7; color: #CAD8EB; margin-top: 18px; }
.ara-product-flow { background: #FFFFFF; border-radius: 18px; color: #1F2937; padding: 28px; border-top: 4px solid #FFC83D; }
.ara-product-flow h2 { color: #0A2E6F; font-size: 25px; font-family: Georgia, serif; margin: 10px 0 22px; }
.ara-product-flow ol { list-style: none; padding: 0; margin: 0; }
.ara-product-flow li { display: flex; gap: 16px; border-top: 1px solid #E5E9EE; padding: 17px 0; }
.ara-product-flow li:last-child { padding-bottom: 0; }
.ara-product-number { flex: 0 0 32px; color: #0F6E56; font-weight: 700; }
.ara-product-flow strong { color: #0A2E6F; font-size: 15px; }
.ara-product-flow p:not(.ara-lp-kicker) { font-size: 13px; line-height: 1.6; margin: 5px 0 0; color: #536171; }
.ara-product-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 40px; }
.ara-product-step-number { display: block; color: #0F6E56; font: 32px Georgia, serif; padding-bottom: 14px; border-bottom: 1px solid #CCD5D9; }
.ara-product-steps h3 { color: #0A2E6F; font-size: 20px; margin: 22px 0 12px; }
.ara-product-steps p, .ara-product-details p { font-size: 16px; line-height: 1.75; }
.ara-product-details { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: start; }
.ara-product-plan { border-left: 3px solid #0F6E56; padding-left: 26px; }
.ara-product-plan h3 { margin-top: 0; color: #0A2E6F; }
.ara-product-questions { max-width: 800px; }
.ara-product-questions details { border-bottom: 1px solid #D5DAD9; }
.ara-product-questions summary { cursor: pointer; padding: 22px 0; font-weight: 650; color: #0A2E6F; line-height: 1.5; }
.ara-product-questions details p { padding: 0 0 20px; margin: 0; line-height: 1.75; }
.ara-product-help { font-size: 14px; line-height: 1.8; margin-top: 28px; }
.ara-product-next { padding: 40px 0; background: #E4EEE9; }
.ara-product-next .ara-lp-wrap { display: flex; gap: 24px; justify-content: space-between; align-items: center; }
.ara-product-next h2 { font: 28px Georgia, serif; color: #0A2E6F; margin: 0; }
@media (max-width: 900px) {
  .ara-product-grid, .ara-product-details { grid-template-columns: 1fr; gap: 36px; }
  .ara-product-hero { padding-bottom: 44px; }
}
@media (max-width: 620px) {
  .ara-product-steps { grid-template-columns: 1fr; gap: 28px; }
  .ara-product-breadcrumb { margin-bottom: 28px; }
  .ara-product-flow { padding: 22px; }
  .ara-product-actions { flex-direction: column; }
  .ara-product-next .ara-lp-wrap { flex-direction: column; align-items: stretch; }
  .ara-product-next .ara-lp-btn { white-space: normal; text-align: center; }
}

/* ── Plan & Billing ─────────────────────────────────────────────────
   The Must-Subscribe surface. Two jobs: tell the merchant exactly where
   they stand in one glance, and make choosing a plan feel like a decision
   rather than a wall.

   The status hero deliberately borrows the navy of the marketing hero
   (.ara-lp-hero) instead of being another white card. This is the one
   dashboard page a merchant arrives at from pricing, and the visual echo
   says "same product, same promise". State is carried by a single accent
   token, --hero-accent, so the rail, the dot and the eyebrow can never
   drift out of agreement about what state the account is in. */

/* Ribbon — rendered by base.html on every authenticated page, so it has to
   sit above the page header without shouting over it. The 3px left rail
   carries the severity; the fill stays pale enough to read as chrome. */
.ara-ribbon {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  justify-content: space-between;
  padding: 11px 16px 11px 15px; margin-bottom: 16px;
  border-radius: var(--ara-radius-sm);
  border: 1px solid var(--ara-line);
  border-left: 3px solid var(--ara-line);
  background: white;
  box-shadow: 0 1px 2px rgba(14,15,17,0.03);
  font-size: 14px; line-height: 1.45;
}
.ara-ribbon-info {
  background: linear-gradient(90deg, rgba(15,110,86,0.07), rgba(15,110,86,0.015));
  border-color: rgba(15,110,86,0.16); border-left-color: var(--ara-teal);
}
.ara-ribbon-warn {
  background: linear-gradient(90deg, rgba(184,135,42,0.13), rgba(184,135,42,0.02));
  border-color: rgba(184,135,42,0.24); border-left-color: var(--ara-warn);
  color: var(--ara-warn-text);
}
.ara-ribbon-stop {
  background: linear-gradient(90deg, rgba(176,48,48,0.10), rgba(176,48,48,0.02));
  border-color: rgba(176,48,48,0.20); border-left-color: var(--ara-danger);
  color: var(--ara-danger);
}
.ara-ribbon .ara-btn-sm { flex: 0 0 auto; }
.ara-btn-sm { padding: 6px 13px; font-size: 13px; }
.ara-btn-quiet { background: white; color: var(--ara-midnight); }

/* Nav footer plan chip — a link now, because "inactive" needs somewhere to go. */
.ara-nav-plan {
  display: block; margin: 0 0 6px; opacity: 0.62;
  font-size: 13px; color: var(--ara-cream);
}
.ara-nav-plan:hover { opacity: 1; color: var(--ara-cream); }
.ara-nav-plan-off { opacity: 1; color: var(--araflo-gold); }

.ara-callout {
  padding: 13px 16px; margin-bottom: 16px;
  border-radius: var(--ara-radius-sm);
  border: 1px solid var(--ara-line);
  border-left: 3px solid var(--ara-line);
  background: var(--ara-soft);
  font-size: 14px;
}
.ara-callout-ok {
  background: linear-gradient(90deg, rgba(31,122,77,0.08), rgba(31,122,77,0.015));
  border-color: rgba(31,122,77,0.18); border-left-color: var(--ara-success);
}
.ara-callout strong { display: block; margin-bottom: 2px; color: var(--ara-midnight); }

/* Status hero. Left column answers "what am I on?"; the right is the three
   facts merchants actually open a support ticket about. */
.ara-bill-hero {
  --hero-accent: #5FD3AC;          /* on a navy field, not the on-white teal */
  --hero-wash: rgba(95, 211, 172, 0.16);
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 1.05fr);
  gap: 32px; align-items: center;
  padding: 30px 32px; margin-bottom: 26px;
  border-radius: var(--ara-radius);
  color: var(--ara-cream);
  background:
    radial-gradient(120% 150% at 100% 0%, var(--hero-wash) 0%, transparent 58%),
    linear-gradient(152deg, #0D3A85 0%, var(--araflo-navy) 48%, #071F4C 100%);
  box-shadow: 0 1px 2px rgba(7,31,76,0.20), 0 18px 44px -18px rgba(7,31,76,0.55);
}
/* Accent rail. Reads as a status light along the top edge rather than a
   coloured card — the card stays navy in every state, so the page doesn't
   change temperature just because a card expired. */
.ara-bill-hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--hero-accent), transparent 78%);
}
.ara-bill-hero.is-trial { --hero-accent: var(--araflo-gold); --hero-wash: rgba(255,200,61,0.16); }
.ara-bill-hero.is-warn  { --hero-accent: #FFB454; --hero-wash: rgba(255,180,84,0.16); }
.ara-bill-hero.is-off   { --hero-accent: #FF8A80; --hero-wash: rgba(255,138,128,0.15); }

.ara-bill-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 10px; font-size: 11px; font-weight: 600;
  letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--hero-accent);
}
.ara-bill-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--hero-accent);
  box-shadow: 0 0 0 0 var(--hero-accent);
  animation: ara-bill-pulse 2.6s ease-out infinite;
}
@keyframes ara-bill-pulse {
  0%   { box-shadow: 0 0 0 0 var(--hero-accent); opacity: 1; }
  70%  { box-shadow: 0 0 0 7px rgba(255,255,255,0); opacity: 0.85; }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); opacity: 1; }
}
.ara-bill-plan {
  font-family: Georgia, serif; font-weight: 400;
  font-size: 40px; line-height: 1.05; letter-spacing: -0.4px;
  margin: 0 0 12px; color: white;
}
.ara-bill-state {
  margin: 0; font-size: 14.5px; line-height: 1.6;
  color: rgba(247,244,238,0.80); max-width: 44ch;
}

/* Hairline-separated facts rail. Boxes inside a box would read as a second
   card; a rule is enough separation at this size. */
.ara-bill-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0; margin: 0;
}
.ara-bill-facts > div { padding: 2px 0 2px 20px; border-left: 1px solid rgba(255,255,255,0.14); }
.ara-bill-facts > div:first-child { padding-left: 0; border-left: 0; }
.ara-bill-facts dt {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.9px;
  text-transform: uppercase; color: rgba(247,244,238,0.52); margin-bottom: 6px;
}
.ara-bill-facts dd {
  margin: 0 0 6px; font-family: Georgia, serif; font-size: 26px;
  color: white; line-height: 1.1; letter-spacing: -0.3px;
  font-variant-numeric: tabular-nums;
}
.ara-bill-unit { font-size: 14px; color: rgba(247,244,238,0.62); letter-spacing: 0; }
.ara-bill-facts .ara-hint {
  margin: 0; font-size: 12px; line-height: 1.45; color: rgba(247,244,238,0.55);
}

/* Section head — title left, the "priced against your real numbers" line
   right, so the personalisation is visible before the cards are read. */
.ara-plan-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.ara-plan-head h2 { margin: 0; font-size: 22px; letter-spacing: -0.2px; }
.ara-plan-head .ara-hint { margin: 0; text-align: right; }

/* Plan cards. Equal height so the buttons line up — a ragged bottom edge
   reads as three unrelated offers instead of one ladder. */
.ara-plan-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px; margin-bottom: 18px; align-items: stretch;
}
.ara-plan-card {
  position: relative; display: flex; flex-direction: column;
  padding: 26px 24px 24px;
  background: white; border: 1px solid var(--ara-line);
  border-radius: var(--ara-radius); box-shadow: var(--ara-shadow);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
/* Gradient cap, drawn inside the radius. Only the featured card gets one —
   if every card is emphasised, none of them is. */
.ara-plan-card.is-featured::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  border-radius: var(--ara-radius) var(--ara-radius) 0 0;
  background: linear-gradient(90deg, var(--araflo-navy), var(--ara-teal) 62%, var(--araflo-gold));
}
.ara-plan-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(14,15,17,0.05), 0 18px 38px -14px rgba(10,46,111,0.28);
  border-color: rgba(10,46,111,0.18);
}
.ara-plan-card:focus-within {
  border-color: var(--ara-teal);
  box-shadow: 0 0 0 3px rgba(15,110,86,0.16), var(--ara-shadow);
}
.ara-plan-card.is-featured {
  border-color: rgba(10,46,111,0.20);
  box-shadow: 0 2px 4px rgba(14,15,17,0.05), 0 16px 36px -14px rgba(10,46,111,0.22);
}
.ara-plan-card.is-current {
  border-color: rgba(15,110,86,0.42);
  background: linear-gradient(180deg, rgba(15,110,86,0.05), rgba(15,110,86,0) 42%);
}

.ara-plan-flag {
  position: absolute; top: -11px; left: 24px;
  padding: 4px 12px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase;
  background: var(--araflo-gold); color: var(--araflo-navy);
  box-shadow: 0 2px 8px rgba(255,200,61,0.40);
  /* Never let a long label spill past the card it belongs to — at three
     columns the flag would sit over the next plan's border. */
  max-width: calc(100% - 48px); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.ara-plan-flag-current {
  background: var(--ara-teal); color: white;
  box-shadow: 0 2px 8px rgba(15,110,86,0.30);
}

.ara-plan-title {
  margin: 6px 0 10px; font-family: inherit;
  font-size: 12px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--ara-muted);
}
.ara-plan-price { margin: 0 0 10px; display: flex; align-items: baseline; gap: 6px; }
.ara-plan-amount {
  font-family: Georgia, serif; font-size: 42px; line-height: 1;
  letter-spacing: -1.2px; color: var(--araflo-navy);
  font-variant-numeric: tabular-nums;
}
.ara-plan-per { font-size: 13px; color: var(--ara-muted); }
.ara-plan-tagline { margin: 0 0 16px; font-size: 13.5px; line-height: 1.55; color: var(--ara-muted); }

/* The half of the bill a pricing table normally hides: plan + platform fee
   run against this merchant's own last 30 days. */
.ara-plan-math {
  display: block; margin: 0 0 18px; padding: 12px 14px;
  border-radius: var(--ara-radius-sm);
  border: 1px solid rgba(10,46,111,0.10);
  background: linear-gradient(180deg, rgba(10,46,111,0.05), rgba(10,46,111,0.015));
}
.ara-plan-math-total {
  display: block; font-family: Georgia, serif; font-size: 21px; line-height: 1.15;
  color: var(--araflo-navy); font-variant-numeric: tabular-nums;
}
.ara-plan-math-label {
  display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.45;
  color: var(--ara-muted);
}

.ara-plan-list { list-style: none; padding: 0; margin: 0 0 20px; }
.ara-plan-list li {
  position: relative; padding-left: 26px; margin-bottom: 9px;
  font-size: 13.5px; line-height: 1.5;
}
.ara-plan-list li::before {
  content: "✓"; position: absolute; left: 0; top: 1px;
  width: 17px; height: 17px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  background: rgba(15,110,86,0.10); color: var(--ara-teal);
}

/* Pushed to the bottom so all three CTAs sit on one line across the row. */
.ara-plan-action { margin-top: auto; }
.ara-plan-action .ara-btn { width: 100%; text-align: center; padding: 12px 18px; }
.ara-plan-action .ara-btn:disabled { opacity: 0.45; cursor: default; }
.ara-plan-action .ara-hint { margin: 8px 0 0; text-align: center; }

/* Assurance — the four questions merchants ask before entering a card.
   Hairline grid, no boxes: this is reference matter, not another offer. */
.ara-bill-assurance {
  margin-top: 28px; padding: 26px 28px;
  background: white; border: 1px solid var(--ara-line);
  border-radius: var(--ara-radius); box-shadow: var(--ara-shadow);
}
.ara-bill-assurance > h2 {
  margin: 0 0 20px; font-size: 18px;
  padding-bottom: 14px; border-bottom: 1px solid var(--ara-line);
}
.ara-bill-assurance-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
}
.ara-bill-assurance-grid > div {
  padding: 0 20px; border-left: 1px solid var(--ara-line);
}
.ara-bill-assurance-grid > div:first-child { padding-left: 0; border-left: 0; }
.ara-bill-assurance-grid h3 {
  margin: 0 0 6px; font-family: inherit; font-size: 13.5px; font-weight: 700;
  color: var(--araflo-navy);
}
.ara-bill-assurance-grid p {
  margin: 0; font-size: 13px; line-height: 1.55; color: var(--ara-muted);
}

/* Settings → "Your plan" panel. Read-only twin of the hero above. */
.ara-plan-line {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 6px 0 10px;
}
.ara-plan-name {
  font-family: Georgia, serif; font-size: 21px; color: var(--ara-midnight);
}

/* Public intake page when the practitioner can't take bookings — no Stripe
   account, or no active plan. Written for the CLIENT: they must never be
   shown the practitioner's billing state. */
.ara-intake-closed {
  margin: 0; padding: 22px 20px;
  border-radius: var(--ara-radius-sm);
  background: var(--ara-soft); border: 1px solid var(--ara-line);
  color: var(--ara-text); font-size: 15px; line-height: 1.6; text-align: center;
}

/* The facts rail needs ~110px per column before "Daily payout to your own
   Stripe account" turns into a word ladder. Below this the hero stacks and
   the rail gets the full width instead. */
@media (max-width: 1080px) {
  .ara-bill-hero { grid-template-columns: 1fr; gap: 24px; }
  .ara-bill-assurance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
  .ara-bill-assurance-grid > div:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 900px) {
  .ara-bill-hero { padding: 26px 24px; }
  .ara-bill-plan { font-size: 34px; }
  .ara-plan-grid { grid-template-columns: 1fr; }
  /* Featured card first on mobile — scrolling past two cards to reach the
     recommended one is how a pricing page loses the decision. */
  .ara-plan-card.is-featured { order: -1; }
  .ara-plan-head .ara-hint { text-align: left; }
}
@media (max-width: 560px) {
  .ara-bill-hero { padding: 22px 20px; }
  .ara-bill-plan { font-size: 30px; }
  .ara-bill-facts { grid-template-columns: 1fr; gap: 16px; }
  .ara-bill-facts > div { padding: 0 0 0 14px; border-left: 2px solid rgba(255,255,255,0.14); }
  .ara-bill-facts > div:first-child { padding-left: 14px; border-left: 2px solid rgba(255,255,255,0.14); }
  .ara-bill-facts dd { font-size: 22px; }
  .ara-bill-assurance { padding: 22px 20px; }
  .ara-bill-assurance-grid { grid-template-columns: 1fr; row-gap: 18px; }
  .ara-bill-assurance-grid > div { padding-left: 0; border-left: 0; }
  .ara-ribbon { font-size: 13.5px; padding: 10px 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .ara-bill-dot { animation: none; }
  .ara-plan-card { transition: none; }
  .ara-plan-card:hover { transform: none; }
}

/* ── Responsive collapse ───────────────────────────────────────────── */

/* Grid children default to min-width:auto, so they refuse to shrink below
   their content's intrinsic width. With 8 nav links that forced the shell
   to ~430px inside a 375px phone — a sideways scroll on every page. These
   two lines are load-bearing; removing them reintroduces the overflow. */
.ara-shell > * { min-width: 0; }
.ara-main { min-width: 0; overflow-x: hidden; }

@media (max-width: 960px) {
  .ara-shell { grid-template-columns: 1fr; }
  .ara-nav { flex-direction: column; padding: 10px 0 8px; gap: 8px; }

  /* Brand + account details share one compact row, so the nav costs a
     strip rather than a fifth of the screen. */
  .ara-brand { padding: 0 16px; }

  /* One scrollable row instead of a 3-row wrap. Wrapping pushed the first
     real number 336px down the page; a practitioner opening this on their
     phone should see money, not chrome. */
  .ara-nav nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    gap: 2px;
    margin-top: 0;
    padding: 0 16px 2px;
    scrollbar-width: none;               /* Firefox */
  }
  .ara-nav nav::-webkit-scrollbar { display: none; }   /* WebKit */
  .ara-nav nav a {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 14px;
  }

  .ara-nav-foot {
    width: 100%; border: 0; padding: 0 16px;
    display: flex; gap: 10px; align-items: baseline;
    font-size: 12px;
  }
  .ara-nav-plan { display: none; }        /* plan tier is in Settings anyway */

  .ara-main { padding: 16px 16px 40px; }
  .ara-grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ara-grid-2, .ara-grid-60-40 { grid-template-columns: 1fr; }

  /* Title and action stack rather than fight for one line. */
  .ara-page-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ara-page-header h1 { font-size: 22px; line-height: 1.25; }
}

@media (max-width: 520px) {
  /* Deliberately NOT collapsing to one column. Four full-width cards
     pushed "Next revenue actions" — the panel that actually tells a
     practitioner what to do — most of a screen down. A 2x2 grid keeps the
     numbers legible and halves the scroll before the useful part. */
  .ara-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ara-card { padding: 14px 14px 16px; }
  .ara-card-label { font-size: 10.5px; letter-spacing: 0.4px; }
  .ara-card-value { font-size: 22px; }
  .ara-card-value-xl { font-size: 30px; }

  .ara-intake-card { padding: 18px; }
  /* Long practice names must wrap, never widen the page. */
  .ara-page-header h1 { font-size: 20px; overflow-wrap: anywhere; }
  .ara-revenue-head { flex-direction: column; gap: 8px; }
  .ara-revenue-total { text-align: left; }
  .ara-table { font-size: 13px; }
}

/* A scrollable nav that looks identical to a clipped one is a trap — the
   merchant never learns Settings exists. Fade the trailing edge so there's
   a visible cue that the row continues. */
@media (max-width: 960px) {
  .ara-nav { position: relative; }
  .ara-nav::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 34px;
    width: 28px;
    height: 38px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(14,15,17,0), var(--ara-midnight));
  }
}