/* ==========================================================================
   contd. — "Go On" design system
   Built from the idea, not retrofitted onto it.

   Two things the old system got wrong and this one fixes:
   1. A progress bar is a "how far through" glyph. It implies a finish line and
      a pause. Replaced by THE RUNNER — a rule that extends and exits the frame.
      Motion, not completion.
   2. The category is blue (LIC, HDFC Life, ICICI Pru, Max, Bajaj, SBI, Kotak),
      because blue means stability — the stationary register. A brand about
      motion is not blue. Signal orange, warm ink, warm paper.
   ========================================================================== */

:root {
  --signal: #FF5A1F;
  --signal-soft: #FFEDE5;
  --ink: #16130F;
  --paper: #FBF8F3;
  --grey: #8C8579;
  --grey-deep: #55504A;
  --line: #E8E2D8;
  --font-display: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.wrap { max-width: 680px; margin: 0 auto; padding: 0 22px; }

/* ---- THE RUNNER: the signature device.
   A rule that starts at a point and exits the right edge of the frame.
   It never terminates. That is the whole brand in one shape. ---- */
.runner { position: relative; display: flex; align-items: center; gap: 0; }
.runner-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--signal); flex: none; }
.runner-line { height: 9px; background: var(--signal); flex: 1; margin-left: 9px; }
.runner-bleed { margin-right: calc(50% - 50vw); }  /* exits the frame */

/* ---- Lockup ---- */
.topbar { padding: 22px 0; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lockup { display: flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: -0.02em; }
.lockup .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }
.lockup .tail { width: 26px; height: 6px; background: var(--signal); }
.navlinks { display: none; gap: 22px; font-size: 14.5px; color: var(--grey-deep); }
.navlinks a:hover { color: var(--ink); }

/* ---- Type: short beats. Tight leading. Momentum in the rhythm. ---- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; margin: 0; }
h1 { font-size: 42px; line-height: 1.04; }
h2 { font-size: 30px; line-height: 1.1; margin-bottom: 14px; }
h3 { font-size: 18px; letter-spacing: -0.02em; }
.lede { font-size: 17px; color: var(--grey-deep); margin: 18px 0 0; max-width: 30em; }
.fact { font-size: 15.5px; color: var(--grey); margin: 16px 0 0; max-width: 32em; }

/* ---- The CTA. Permission, not instruction. ---- */
.go {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 800; font-size: 21px;
  color: var(--signal); background: none; border: none; padding: 0; cursor: pointer;
  letter-spacing: -0.02em;
}
.go::after { content: ''; display: block; width: 46px; height: 8px; background: var(--signal); transition: width 0.22s ease; }
.go:hover::after { width: 74px; }
.go:disabled { color: #C9C2B6; cursor: not-allowed; }
.go:disabled::after { background: #DED8CC; }
.go-block { display: block; width: 100%; margin-top: 30px; }
.go-lg { font-size: 27px; }

/* ---- Screens ---- */
.screen { padding: 30px 0 60px; }
.screen[hidden] { display: none; }

/* ---- Answers: not a form. Motion. ---- */
.qs { margin-top: 40px; }
.q { margin-bottom: 26px; }
.q-label { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); margin-bottom: 11px; }
.opts { display: flex; gap: 9px; flex-wrap: wrap; }
.opt {
  font-family: var(--font-body); font-size: 15px; font-weight: 500;
  background: transparent; color: var(--grey-deep);
  border: 1.5px solid var(--line); border-radius: 999px;
  padding: 9px 18px; cursor: pointer; transition: all 0.15s ease;
}
.opt:hover { border-color: var(--grey); color: var(--ink); }
.opt.on { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 600; }

/* The runner grows as answers land — momentum, never "% complete" */
.track { height: 9px; background: var(--line); border-radius: 0; margin: 34px 0 0; position: relative; overflow: visible; }
.track-fill { height: 9px; background: var(--signal); width: 0; transition: width 0.35s cubic-bezier(.2,.8,.2,1); }
.track-head { position: absolute; top: -1px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--signal); transform: translateX(-50%); transition: left 0.35s cubic-bezier(.2,.8,.2,1); }

/* ---- The number ---- */
.amount { font-family: var(--font-display); font-weight: 800; font-size: 68px; line-height: 1; letter-spacing: -0.045em; margin: 6px 0 12px; }
.amount-sub { font-size: 19px; color: var(--grey-deep); }
.ratio { font-size: 15.5px; color: var(--grey); margin-top: 18px; }
.note { font-size: 13px; color: var(--grey); margin-top: 22px; max-width: 34em; }

/* ---- Email ---- */
.send { display: flex; gap: 10px; margin-top: 34px; align-items: stretch; }
.send input {
  flex: 1; font-family: var(--font-body); font-size: 16px;
  background: transparent; border: none; border-bottom: 2px solid var(--line);
  padding: 12px 2px; color: var(--ink);
}
.send input:focus { outline: none; border-bottom-color: var(--signal); }
.send input::placeholder { color: #B8B1A4; }

/* ---- Sections ---- */
.sect { padding: 58px 0; border-top: 1px solid var(--line); }
.rows { margin-top: 26px; }
.row { padding: 20px 0; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: none; }
.row p { margin: 6px 0 0; font-size: 15.5px; color: var(--grey-deep); }

/* "Nothing stops you" — the brand defined by what it removes */
.nots { margin-top: 26px; }
.not { display: flex; align-items: baseline; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.not:last-child { border-bottom: none; }
.not-x { font-family: var(--font-display); font-weight: 800; color: var(--signal); font-size: 15px; flex: none; }
.not-t { font-size: 16.5px; }

details { padding: 16px 0; border-bottom: 1px solid var(--line); }
details summary { font-family: var(--font-display); font-weight: 700; font-size: 16px; cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary::before { content: '+ '; color: var(--signal); font-weight: 800; }
details[open] summary::before { content: '– '; }
details p { margin: 10px 0 0; font-size: 15.5px; color: var(--grey-deep); }

/* ---- Close + footer ---- */
.close { padding: 70px 0 40px; border-top: 1px solid var(--line); }
.close h2 { font-size: 38px; }
footer { padding: 26px 0 44px; }
.fine { font-size: 12.5px; color: var(--grey); margin-top: 14px; }
.micro { font-size: 13px; color: var(--grey); margin-top: 22px; }

@media (min-width: 720px) {
  h1 { font-size: 62px; }
  h2 { font-size: 36px; }
  .amount { font-size: 92px; }
  .navlinks { display: flex; }
  .close h2 { font-size: 52px; }
}