/* First Lane Finance — shared styles.
   Identity: daylight track. Clean cool white, near-black type, electric-blue accent.
   Barlow Condensed (italic, uppercase) for headlines like a race livery; Barlow for reading.
   Deliberately light-only: the page sets every colour itself so it looks the same on any host. */
/* Fonts are served from this site (no Google Fonts round trip), so text appears sooner on phones. */
/* Stand-in fonts sized to match Barlow, so text doesn't jump when the real font arrives. */
@font-face { font-family: "Barlow Fallback"; src: local("Arial"), local("Helvetica"), local("Roboto"), local("Liberation Sans"); size-adjust: 95%; }
@font-face { font-family: "Barlow Condensed Fallback"; src: local("Arial"), local("Helvetica"), local("Roboto"), local("Liberation Sans"); size-adjust: 76%; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/barlow-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: italic; font-weight: 600; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-600-italic.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: italic; font-weight: 700; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-700-italic.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: italic; font-weight: 800; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-800-italic.woff2") format("woff2"); }

:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --sunk: #eceff3;
  --ink: #0c0d0f;
  --muted: #5b6470;
  --line: #dde2e8;
  --night: #ffffff;      /* app bars and bands: light */
  --night-ink: #0c0d0f;
  --night-muted: #5b6470;
  --night-line: #dde2e8;
  --lane: #1a66f0;       /* electric blue */
  --lane-ink: #ffffff;
  --accent-text: #1659d6;
  --cta: #1a66f0;
  --cta-ink: #ffffff;
  --hot: #c2410c; --hot-bg: #fdece4;
  --warm: #8a6100; --warm-bg: #fdf3d8;
  --cool: #4b5563; --cool-bg: #eceff3;
  --good: #16794a; --good-bg: #e2f5eb;
  --bad: #c0262d;
  --display: "Barlow Condensed", "Barlow Condensed Fallback", sans-serif;
  --body: "Barlow", "Barlow Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius: 4px;
  --cut: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; text-wrap: balance; letter-spacing: 0; line-height: 1.05; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--lane); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
::selection { background: var(--lane); color: var(--lane-ink); }

/* Wordmark */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand svg, .brand img { flex: none; }
.brand .wm { display: flex; flex-direction: column; line-height: 1; }
.brand .wm b { font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.35rem; }
.brand .wm small { font-size: 0.6rem; letter-spacing: 0.28em; color: var(--lane); margin-top: 3px; font-weight: 700; }
.brand small { font-weight: 600; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.7rem; }

/* Buttons: clipped corners, like a cut number plate */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 0; clip-path: var(--cut);
  padding: 13px 22px; font-family: var(--display); font-weight: 700; font-size: 1.1rem; letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer; text-decoration: none; background: var(--cta); color: var(--cta-ink); }
.btn:hover { filter: brightness(1.12); }
.btn:disabled { opacity: 0.6; cursor: progress; }
.btn.gold { background: var(--lane); color: var(--lane-ink); }
.btn.secondary { background: var(--sunk); color: var(--ink); }
.btn.ghost { background: transparent; color: var(--muted); padding-inline: 6px; clip-path: none; }
.btn.small { padding: 8px 14px; font-size: 0.95rem; }
.btn.block { width: 100%; }

/* Form pieces */
label.field { display: flex; flex-direction: column; gap: 5px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); min-width: 0; }
input[type=text], input[type=tel], input[type=email], input[type=number], input[type=password], input[type=search], select, textarea {
  background: var(--sunk); border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 12px; font-size: 1rem; width: 100%; min-width: 0;
  text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink); }
input:focus, select:focus, textarea:focus { border-color: var(--lane); outline: none; box-shadow: 0 0 0 3px rgba(26, 102, 240, .18); }
textarea { resize: vertical; min-height: 90px; }

/* Priority / status chips */
.chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 2px; padding: 3px 9px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.chip.hot { background: var(--hot-bg); color: var(--hot); }
.chip.warm { background: var(--warm-bg); color: var(--warm); }
.chip.nurture { background: var(--cool-bg); color: var(--cool); }
.chip.good { background: var(--good-bg); color: var(--good); }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

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

/* ---- Languages ---- */
html.rsf-i18n-wait body { visibility: hidden; }
html:lang(pa) { --display: "Barlow Condensed", "Noto Sans Gurmukhi", sans-serif; --body: "Barlow", "Noto Sans Gurmukhi", system-ui, sans-serif; }
html:lang(hi) { --display: "Barlow Condensed", "Noto Sans Devanagari", sans-serif; --body: "Barlow", "Noto Sans Devanagari", system-ui, sans-serif; }
html:lang(zh) { --display: "Barlow Condensed", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; --body: "Barlow", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
/* Gurmukhi, Devanagari and Chinese have no italics or capitals, and their tall marks need room: set them upright with looser lines. */
html.rsf-script :is(h1, h2, h3, h1 em, summary, .eyebrow, .brand .wm small, .road .tier, .compare th, .turn, .quote p, .quote em, .pains .q, .promises b, .sit b, .facts b, .btn, h1.q, .done h1, .road h3, .truths h3, .steps h3, .pillar h3, .road button, .opt) {
  font-style: normal !important; letter-spacing: 0 !important; }
html.rsf-script :is(h1, h2, h3, summary, .turn, .quote p, .pains .q, .promises b, .sit b, h1.q, .done h1) { line-height: 1.3 !important; }
html.rsf-script .steps li::before { letter-spacing: 0; }
html.rsf-script .hero h1 { font-size: clamp(2.2rem, 4.4vw, 3.7rem); }
html.rsf-script section h2 { font-size: clamp(1.75rem, 3.1vw, 2.5rem); }
html.rsf-script h1.q { font-size: 1.6rem; }
html.rsf-script .done h1 { font-size: 1.7rem; }
html.rsf-script .btn { font-size: 1rem; }

.langsel { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 0 0 10px; border: 1px solid var(--line); background: var(--surface); clip-path: var(--cut); color: var(--ink); flex: none; }
.langsel svg { flex: none; color: var(--lane); }
.langsel select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; height: 100%; padding: 0 28px 0 0; font-family: var(--body); font-weight: 700; font-size: .9rem; cursor: pointer; }
.langsel select:focus-visible { outline: none; }
.langsel:focus-within { outline: 2px solid var(--lane); outline-offset: 2px; }
.langsel::after { content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
/* Keeps a short phrase on one line (used in Chinese headlines so they break between phrases, not inside them). */
.nw { display: inline-block; }
html:not(:lang(en)) .brand .wm small { letter-spacing: .1em; white-space: nowrap; }
/* Header safety net: a long translated tagline shrinks rather than pushing the language picker off a phone screen. */
header.site .brand, header.site .brand .wm { min-width: 0; }
header.site .brand .wm small { overflow: hidden; text-overflow: ellipsis; }

/* Phones: keep the brand tagline on one line next to the name. */
@media (max-width: 440px) { .brand .wm small { letter-spacing: .07em; font-size: .56rem; white-space: nowrap; } }