/* JG Life Group — compliance site.
   Deliberately plain. A 10DLC vetter is checking that a real business exists
   and that specific disclosures are present, not admiring the design. */

:root {
  --ink: #16202c;
  --muted: #5a6672;
  --rule: #dde3e9;
  --bg: #ffffff;
  --accent: #1f4e6b;
  --flag-bg: #ffe8a3;
  --flag-ink: #6b4e00;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; }

header {
  border-bottom: 1px solid var(--rule);
  padding: 28px 0;
  margin-bottom: 40px;
}

header .wrap { display: flex; flex-wrap: wrap; gap: 16px; align-items: baseline; justify-content: space-between; }

.brand {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

nav a {
  color: var(--muted);
  text-decoration: none;
  margin-left: 20px;
  font-size: 15px;
}
nav a:hover { color: var(--accent); text-decoration: underline; }
nav a:first-child { margin-left: 0; }

h1 { font-size: 30px; line-height: 1.25; letter-spacing: -0.02em; margin: 0 0 8px; }
h2 { font-size: 20px; margin: 36px 0 10px; letter-spacing: -0.01em; }
h3 { font-size: 17px; margin: 24px 0 6px; }

.lede { font-size: 19px; color: var(--muted); margin: 0 0 32px; }
.updated { color: var(--muted); font-size: 15px; margin: 0 0 32px; }

p, li { margin: 0 0 14px; }
ul { padding-left: 22px; }

a { color: var(--accent); }

.callout {
  border-left: 3px solid var(--accent);
  background: #f4f8fa;
  padding: 16px 20px;
  margin: 24px 0;
}
.callout p:last-child { margin-bottom: 0; }

dl.contact { margin: 0; }
dl.contact dt { font-weight: 600; margin-top: 14px; }
dl.contact dd { margin: 2px 0 0; color: var(--muted); }

/* Anything still wrapped in .fill has NOT been filled in yet. It is styled to
   be impossible to miss, on the page and in a screenshot. */
.fill {
  background: var(--flag-bg);
  color: var(--flag-ink);
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
  white-space: nowrap;
}

footer {
  border-top: 1px solid var(--rule);
  margin-top: 56px;
  padding: 28px 0 48px;
  color: var(--muted);
  font-size: 15px;
}
footer a { color: var(--muted); }
footer p { margin: 0 0 8px; }

@media (max-width: 560px) {
  header .wrap { display: block; }
  nav { margin-top: 10px; display: block; }
  nav a { margin: 0 18px 0 0; }
  h1 { font-size: 26px; }
}

/* Consent form. Deliberately roomy: this is filled in on a phone, and a
   mis-tapped field is a lead that never arrives. */

.field { margin: 0 0 22px; }

.field label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

.req {
  font-weight: 400;
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 6px;
}

.field input[type="text"],
.field input[type="tel"],
.field select {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 6px;
}

.field input:focus, .field select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.hint { font-size: 15px; color: var(--muted); margin: 6px 0 0; }

/* The consent block is the legal artifact on this page, so it is given room
   and a border rather than being shrunk into fine print. */
.consent {
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 16px 18px;
  margin: 28px 0;
  background: #fbfcfd;
}

.consent label { display: flex; gap: 12px; align-items: flex-start; }
.consent input[type="checkbox"] { margin-top: 4px; width: 18px; height: 18px; flex: none; }
.consent span { font-size: 15px; line-height: 1.6; }

button[type="submit"] {
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 6px;
  padding: 14px 26px;
  cursor: pointer;
}
button[type="submit"]:hover { background: #16384d; }

/* Honeypot. Off-screen rather than display:none - some bots skip anything
   that is not rendered at all. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------- Landing

   Written for the actual reader: 65 to 80, on a phone, often with reading
   glasses and imprecise thumbs. Every choice here trades density for
   legibility, because a page this audience cannot read converts at zero
   regardless of how good the offer is.

   Base type is 20px, not 17. Fields and the button are at least 56px tall,
   which is roughly the size of a thumb pad. Nothing important is grey. */

body.lp { font-size: 20px; line-height: 1.6; }
body.lp header { display: none; }
body.lp main { padding-top: 24px; padding-bottom: 8px; }

body.lp h1 {
  font-size: 30px;
  line-height: 1.25;
  margin: 0 0 10px;
}

body.lp .lede {
  font-size: 21px;
  color: var(--ink);
  margin: 0 0 24px;
}

/* Required, and prominent, but one line. The rule asks for conspicuousness,
   not volume - a long notice at the top loses this reader before the form. */
.solicitation {
  border-left: 4px solid var(--accent);
  background: #f4f8fa;
  padding: 10px 14px;
  margin: 0 0 20px;
  font-size: 17px;
  font-weight: 600;
}

body.lp form {
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 20px 18px 24px;
  background: #fbfcfd;
}

body.lp .field { margin: 0 0 20px; }

/* The default 15px hint is fine next to 17px body copy and too small next to
   the 20px this page uses. A hint nobody can read is worse than none: it
   still takes up the line. */
body.lp .field .hint { font-size: 17px; margin-top: 8px; }

body.lp .field label {
  display: block;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}

body.lp .field input,
body.lp .field select {
  width: 100%;
  min-height: 58px;
  padding: 12px 14px;
  font-size: 20px;
  color: var(--ink);
  background: #fff;
  border: 2px solid #b9c4ce;
  border-radius: 8px;
}

body.lp .field input:focus,
body.lp .field select:focus {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
}

/* The consent block. The plain line is what gets read; the full legal text
   sits directly under it and is never hidden, collapsed or shrunk below
   readable size - a summary that replaced it would not be consent at all. */
.consent {
  border: 2px solid var(--rule);
  border-radius: 8px;
  padding: 16px;
  margin: 0 0 20px;
  background: #fff;
}

.consent label { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; }

.consent input[type="checkbox"] {
  width: 30px;
  height: 30px;
  margin: 0;
  flex: none;
}

.consent .plain { font-size: 20px; font-weight: 600; line-height: 1.35; }

.consent .legal {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: #46535f;
}

body.lp button[type="submit"] {
  width: 100%;
  min-height: 64px;
  font: inherit;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
body.lp button[type="submit"]:hover { background: #16384d; }

.err {
  background: #fdf2f2;
  border-left: 4px solid #a12;
  padding: 12px 14px;
  margin: 0 0 20px;
  font-weight: 600;
}

.next { margin: 32px 0 24px; }
.next h2 { font-size: 22px; margin: 0 0 12px; }
.next p { margin: 0 0 10px; }

.quiet { font-size: 16px; color: var(--muted); }
body.lp footer { margin-top: 32px; }

@media (max-width: 380px) {
  body.lp h1 { font-size: 27px; }
}