/* Layout: one narrow column, one question per screen, under the Live Edge wordmark.
   The wavy progress line echoes the organic gold rule in the logo. Colors and type follow the Live Edge Brand Guidelines. */
:root {
  --bg: #E8EBF4;          /* Navy Tint */
  --surface: #FAF8F4;     /* Warm White */
  --field: #FFFFFF;
  --navy: #1C2D5E;
  --ink: #1C2D5E;         /* headings */
  --body: #4A5568;        /* Slate */
  --muted: #4A5568;
  --line: #C9CFE3;
  --gold: #C8A84B;        /* accent only, never text */
  --btn: #1C2D5E;
  --btn-ink: #FFFFFF;
  --focus: #1C2D5E;
  --logo-live: #1C2D5E;
  --logo-sub: #4A5568;
  --danger: #A32D2D;
  --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-body: "DM Sans", Calibri, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131E45; --surface: #1C2D5E; --field: #131E45; --ink: #FAF8F4; --body: #D3D9EA; --muted: #AEB8D4;
    --line: #34457C; --btn: #C8A84B; --btn-ink: #1C2D5E; --focus: #C8A84B; --logo-live: #FFFFFF; --logo-sub: #B8C2DD;
    --danger: #F29A9A; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #131E45; --surface: #1C2D5E; --field: #131E45; --ink: #FAF8F4; --body: #D3D9EA; --muted: #AEB8D4;
  --line: #34457C; --btn: #C8A84B; --btn-ink: #1C2D5E; --focus: #C8A84B; --logo-live: #FFFFFF; --logo-sub: #B8C2DD;
  --danger: #F29A9A; color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  background: var(--bg);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  padding-block: 28px 56px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.shell { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.brandbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.logo { display: inline-flex; flex-direction: column; gap: 3px; width: max-content; max-width: 100%; }
.logo .name { font-family: var(--font-display); font-size: 28px; line-height: 1; letter-spacing: 0.03em; color: var(--logo-live); }
.logo .name b { font-weight: 400; color: var(--gold); }
.logo .sub { font-size: 10.5px; letter-spacing: 0.34em; color: var(--logo-sub); font-weight: 500; }
.logo svg { display: block; width: 100%; height: 6px; margin-top: 1px; }
.logo svg path { fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.tool { font-size: 14px; color: var(--muted); }

.track { display: block; width: 100%; height: 12px; }
.track path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.track .base { stroke: var(--line); stroke-width: 3; }
.track .fill { stroke: var(--gold); stroke-width: 3; transition: stroke-dasharray 0.35s ease; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 28px 28px 24px;
  display: flex; flex-direction: column; gap: 18px;
}
.eyebrow { font-size: 14px; color: var(--muted); margin: 0; }
.count { font-family: var(--font-mono); font-size: 13px; }
h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(30px, 6vw, 40px); }
h2 { font-size: clamp(24px, 4.6vw, 30px); }
h1:focus, h2:focus { outline: none; }
p { margin: 0; max-width: 62ch; }
.hint { font-size: 15px; color: var(--muted); }

textarea, input[type="text"], input[type="email"] {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
}
textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
textarea:focus, input:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
label.field { display: flex; flex-direction: column; gap: 6px; font-weight: 500; font-size: 15px; color: var(--ink); }
label.field .opt { font-weight: 400; color: var(--muted); }
.fields { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.fields .wide { grid-column: 1 / -1; }
.error { color: var(--danger); font-size: 15px; min-height: 1.4em; margin: 0; }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--muted); }
.check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--navy); flex: none; }

.actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
button, a.btn {
  font: inherit; font-weight: 600; font-size: 16px;
  border-radius: 8px; padding: 12px 22px; cursor: pointer;
  text-decoration: none; display: inline-block; text-align: center;
}
.primary { background: var(--btn); color: var(--btn-ink); border: 1px solid var(--btn); }
.primary:hover { filter: brightness(1.1); }
.ghost { background: transparent; color: var(--muted); border: 1px solid transparent; padding-left: 4px; }
.ghost:hover { color: var(--ink); }
button:focus-visible, a.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.start { align-self: flex-start; }

.get { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.get li { display: flex; gap: 12px; align-items: baseline; }
.get li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: none; transform: translateY(-1px); }
.upsell { border-top: 1px solid var(--line); padding-top: 18px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.upsell h2 { font-size: 22px; }

.demo { font-size: 14px; color: var(--muted); border: 1px dashed var(--line); border-radius: 8px; padding: 12px 14px; }
.demo summary { cursor: pointer; }
.demo code, .demo pre { font-family: var(--font-mono); }
.demo pre { margin: 10px 0 0; overflow-x: auto; font-size: 12.5px; line-height: 1.45; color: var(--ink); }

@media (max-width: 520px) {
  .card { padding: 22px 18px 20px; }
  .fields { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .track .fill { transition: none; } }

/* Added for hardening */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.mt { margin-top: 8px; }
.ts { min-height: 65px; }
.check input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.note { font-size: 14px; color: var(--muted); }
.note a { color: var(--ink); }
button[disabled] { opacity: .6; cursor: progress; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.secondary { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.secondary:hover { background: var(--bg); }