/* Roadstar 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. */
: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", "Arial Narrow", "Roboto Condensed", sans-serif;
  --body: "Barlow", 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; }