/* Remandly — THE design system. One palette for every page (S-A.1, master 16–17 Sep).
   Nothing else may declare a colour: site.css, page <style> blocks and templates consume these tokens only.
   Stadium system, lifted from /preview/ verbatim: navy surfaces, one blue accent, blue "ly", Geist, nebula, orb. */

:root {
  /* surfaces (dark, the reading ground) */
  --navy: #0B0E14; --navy-2: #111622; --navy-3: #171D2B;
  --on-navy: #F5F7FA; --on-navy-2: #B7C0CE; --on-navy-3: #7E8899;
  --navy-line: rgba(255, 255, 255, .10); --navy-line-soft: rgba(255, 255, 255, .06);
  /* accent */
  --blue: #1E5EFF; --blue-deep: #0F3FC2; --blue-2: #9DBBFF; --blue-soft: #EAF0FF; --blue-glow: rgba(30, 94, 255, .45);
  /* light surfaces (forms, the intake flow) */
  --paper: #FFFFFF; --field: #F4F6F9; --ink: #0B1F3A; --ink-2: #22344F; --slate: #5E6C80; --line: #DCE2EA; --hair: #E9EDF2;
  /* status */
  --note-bg: #2A1F14; --note-line: #5A3A1A; --note-text: #FFD2B8;
  --draft-bg: #2A1F00; --draft-line: #7A5A00; --draft-text: #FFD666; --draft-strong: #FFE9A8; --verify-bg: #3A2E00;
  --ok-soft: #ECFDF3; --ok-line: #ABEFC6; --input: #5F6572; --dur: 160ms;
  --danger: #B42318; --danger-bg: #FEF3F2; --ok: #067647; --warn: #B54708; --warn-mark: #FFD93D;
  /* legacy names, mapped so every existing rule keeps working on the stadium palette */
  --canvas: var(--navy); --surface: var(--navy-2); --surface-2: var(--navy-3);
  --text: var(--on-navy); --body: #D8DFE9; --muted: var(--on-navy-2); --faint: var(--on-navy-3);
  --line-soft: var(--navy-line-soft);
  --accent: var(--blue); --accent-hover: #3D74FF; --accent-active: var(--blue-deep); --accent-text: var(--blue-2); --accent-wash: rgba(30, 94, 255, .14);
  /* motion + shape + space */
  --ease: cubic-bezier(.2, .7, .2, 1); --fast: 120ms; --mid: 400ms; --slow: 700ms;
  --r: 18px; --r-sm: 12px; --r-pill: 999px;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px;
}

/* ---- nebula: home-hero presence behind the title for the top ~40% of the viewport, then a clean fade (edit 1) ---- */
.nebula { position: fixed; inset: 0 0 auto; height: 44vh; z-index: -1; pointer-events: none;
  background:
    radial-gradient(68% 62% at 16% 4%, rgba(30, 94, 255, .52), transparent 66%),
    radial-gradient(58% 54% at 90% 16%, rgba(15, 63, 194, .46), transparent 66%),
    radial-gradient(90% 70% at 50% 0%, rgba(30, 94, 255, .16), transparent 70%); }
.nebula::after { content: ""; position: absolute; inset: auto 0 0; height: 52%; background: linear-gradient(180deg, rgba(11, 14, 20, 0), rgba(11, 14, 20, .82) 62%, var(--navy)); }

/* ---- orb (every page) ---- */
.orb { position: relative; width: 56px; height: 56px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 36% 30%, #7FA4FF 0%, var(--blue) 45%, #0F3AB5 100%);
  box-shadow: 0 0 40px var(--blue-glow); }
.orb::before, .orb::after, .orb i { content: ""; position: absolute; top: 50%; width: 3px; border-radius: 2px; background: #fff; transform: translateY(-50%); }
.orb::before { left: 34%; height: 12px; } .orb i { left: 50%; margin-left: -1.5px; height: 20px; } .orb::after { left: 63%; height: 14px; }
.orb-center { display: grid; place-items: center; margin: 4px 0 10px; }
.orb.sm { width: 40px; height: 40px; } .orb.lg { width: 104px; height: 104px; }

/* ---- header: one CTA verb everywhere — "Talk now" (edit 2) ---- */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 0 var(--s2); background: rgba(11, 14, 20, .92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--navy-line); }
.brand { font-weight: 800; font-size: 19px; letter-spacing: -.02em; color: var(--on-navy); text-decoration: none; }
.brand b { color: var(--blue); font-weight: 800; }
.top-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
  border-radius: var(--r-pill); background: var(--blue); color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; }
.top-cta:hover { background: var(--blue-deep); }

/* ---- in-article call card: orb + one line + "or chat by text" (edit 2) ---- */
.callcard { display: flex; align-items: center; gap: 14px; margin: var(--s4) 0;
  background: var(--navy-2); border: 1px solid var(--navy-line); border-radius: var(--r); padding: 16px; }
.callcard .cc-t { margin: 0; font-weight: 700; font-size: 16px; color: var(--on-navy); }
.callcard .cc-s { margin: 2px 0 0; font-size: 14px; color: var(--on-navy-2); }
.callcard a.cc-link { color: var(--blue-2); text-decoration: none; border-bottom: 1px solid rgba(157, 187, 255, .35); }
.callcard .cc-body { min-width: 0; }
.callcard a.cc-main { color: var(--on-navy); text-decoration: none; }
.callcard a.cc-main:hover { color: var(--blue-2); }

/* ---- sticky bottom bar: the line is open (matches /preview/ wording, edit S-A.3) ---- */
.linebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(11, 14, 20, .94); backdrop-filter: blur(12px); border-top: 1px solid var(--navy-line); }
.linebar .lb-line { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--on-navy-2); margin: 0 0 8px; }
.linebar .lb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(30, 94, 255, .18); flex: none; }
.lb-btn { display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 26px;
  background: var(--blue); color: #fff; font-weight: 700; font-size: 17px; text-decoration: none; }
.lb-btn:hover { background: var(--blue-deep); }
body.has-linebar { padding-bottom: 104px; }

/* ---- tick list that remembers itself, per device (edit 5) ---- */
.ticks { list-style: none; margin: var(--s2) 0; padding: 0; }
.ticks li { margin: 0 0 10px; }
.ticks label { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 11px 14px;
  background: var(--navy-2); border: 1px solid var(--navy-line); border-radius: var(--r-sm); cursor: pointer; font-size: 17px; color: var(--on-navy); }
.ticks input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--blue); }
.ticks input:checked + span { color: var(--on-navy-2); text-decoration: line-through; text-decoration-color: var(--blue); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---- call bar + drawer + end card: one component on every page (S-B.4) ---- */
.rmbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: rgba(11, 14, 20, .96);
  backdrop-filter: blur(12px); border-top: 1px solid var(--navy-line); padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  max-height: 82vh; overflow-y: auto; }
.rmbar-row { display: flex; align-items: center; gap: 10px; }
.rmbar-orb { position: relative; width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #7FA4FF 0%, var(--blue) 45%, #0F3AB5 100%); box-shadow: 0 0 22px var(--blue-glow); animation: rmpulse 2.2s var(--ease) infinite; }
.rmbar-orb i { position: absolute; left: 50%; top: 50%; width: 3px; height: 12px; margin: -6px 0 0 -1.5px; border-radius: 2px; background: #fff; }
@keyframes rmpulse { 0% { box-shadow: 0 0 0 0 rgba(30, 94, 255, .55); } 100% { box-shadow: 0 0 0 14px rgba(30, 94, 255, 0); } }
.rmbar-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rmbar-txt b { font-size: 15px; color: var(--on-navy); }
.rmbar-txt small { font-size: 12px; color: var(--on-navy-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rmbar-time { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 14px; color: var(--on-navy-2); flex: none; }
.rmbar-btn { min-height: 44px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--navy-line);
  background: var(--navy-3); color: var(--on-navy); font: 700 14px 'Geist', system-ui, sans-serif; cursor: pointer; flex: none; }
.rmbar-btn.is-on { background: var(--blue); border-color: var(--blue); color: #fff; }
.rmbar-end { background: var(--danger); border-color: var(--danger); color: #fff; }
.rmbar-card { margin: 12px 2px 4px; border-top: 1px solid var(--navy-line); padding-top: 12px; }
.rmc-eyebrow { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-navy-3); margin: 0; }
.rmc-h { margin: 4px 0 6px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--on-navy); }
.rmc-no { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 24px; font-weight: 700; letter-spacing: .04em; color: var(--blue-2); margin: 0 0 8px; }
.rmc-p { margin: 0 0 10px; font-size: 15px; color: var(--on-navy-2); }
.rmc-next { margin: 0 0 12px 18px; padding: 0; font-size: 15px; color: var(--on-navy-2); } .rmc-next li { margin: 0 0 6px; }
.rmc-cta { margin: 0 0 12px; } .rmc-cta .lb-btn { display: flex; }
.rmc-email label { display: block; font-size: 14px; color: var(--on-navy-2); margin: 0 0 6px; }
.rmc-emailrow { display: flex; gap: 8px; }
.rmc-emailrow input { flex: 1; min-width: 0; min-height: 48px; padding: 0 12px; border-radius: var(--r-sm);
  border: 1px solid var(--navy-line); background: var(--navy-3); color: var(--on-navy); font-size: 16px; }
.rmc-email small { display: block; margin-top: 6px; font-size: 13px; color: var(--on-navy-3); }
.rmdrawer { position: fixed; inset: 0; z-index: 45; background: var(--navy); display: flex; flex-direction: column; }
.rmd-top { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--navy-line); }
.rmd-url { font-size: 12px; color: var(--on-navy-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rmdrawer iframe { flex: 1; width: 100%; border: 0; background: var(--navy); }
body.rm-drawer-open .rmdrawer { padding-bottom: 74px; }
body.rm-drawer-open { overflow: hidden; }
body.rm-live .linebar { display: none; }

.rm-framed .linebar { display: none !important; }