/* gate.css
   The lead-capture gate: dark masthead, lock badge, tally, form.
   Part of The 12-Point Retirement Checkup - Heritage Edition.
   Load order matters: see the <link> block in any page. */



/* =================================================================
   LEAD-CAPTURE GATE — matches the Physician LifeScore lock screen
   A dark card: advisor masthead, then an inner panel holding a large
   rounded-square lock badge with a soft breathing bloom, a serif
   headline, and a one-line instruction. Same lockGlow / lockText
   curves as the physician tool, recolored teal -> brass.
   ================================================================= */
#screen-gate{padding-bottom:20px}
.gate-wrap{max-width:640px;margin:0 auto}

/* ---- The dark card ---- */
.gate-mast{
  background:var(--pine-panel);border-radius:18px 18px 0 0;
  padding:46px 40px 40px;text-align:center;color:var(--cream);
  display:flex;flex-direction:column;align-items:center;
}
.gate-photo{
  width:112px;height:112px;border-radius:50%;object-fit:cover;display:block;
  border:3px solid rgba(201,162,75,.55);background:rgba(247,244,237,.08);
  margin-bottom:20px;
}
.gate-presented{
  font-size:12px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--on-pine-mute);margin-bottom:12px;
}
.gate-advname{
  font-family:"Libre Franklin",sans-serif;
  font-size:25px;font-weight:700;letter-spacing:-.01em;line-height:1.25;
  color:var(--cream);
}
.gate-advfirm{font-size:17px;color:var(--on-pine-mute);margin-top:7px}
.gate-complete{
  font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--brass-lite);margin-top:22px;
}

/* ---- Score shown free above the lock (gateMode "scoreFirst") ---- */
.gate-score{width:100%;margin-top:6px;display:flex;flex-direction:column;align-items:center}
.gate-score[hidden]{display:none}
.gate-score .ring-holder{width:240px;height:240px;margin:16px auto 20px}
.gate-score .ring-num .n{font-size:72px}
/* The one line on this screen that interprets the result and names the
   second opinion. Everything else here is a fact — a number, three counts,
   a status word — so this carries the reason to keep going and is set
   brightest. 11.1:1 on the panel. */
.gate-bandcopy{
  font-size:21px;color:var(--on-pine);line-height:1.55;
  margin:16px auto 0;max-width:540px;text-wrap:balance;
}

/* ---- Inner panel: the lock ---- */
.lock-panel{
  width:100%;margin-top:26px;padding:52px 30px 46px;
  background:rgba(247,244,237,.035);
  border:1px solid rgba(247,244,237,.09);border-radius:14px;
  display:flex;flex-direction:column;align-items:center;
}
.lockbadge{
  width:152px;height:152px;border-radius:38px;
  background:rgba(247,244,237,.05);
  border:1px solid rgba(201,162,75,.3);
  display:flex;align-items:center;justify-content:center;
  animation:lockGlow 3.2s ease-in-out infinite;
}
/* The icon breathes with the halo rather than sitting static inside it —
   that is what makes the pulse read from across the page. Slow on purpose:
   a fast pulse reads as an error state, a slow one as an invitation. */
.lockbadge svg{
  width:76px;height:76px;stroke:var(--brass-lite);fill:none;
  stroke-width:1.7;
  animation:lockIcon 3.2s ease-in-out infinite;
}
.lock-h{
  font-family:"Fraunces",Georgia,serif;color:var(--cream);
  font-size:clamp(24px,4.3vw,30px);font-weight:500;
  letter-spacing:-.008em;line-height:1.2;
  margin-top:38px;
  animation:lockText 2.8s ease-in-out infinite;
}
.lock-sub{
  font-size:18px;color:var(--on-pine-soft);line-height:1.6;
  margin-top:14px;max-width:520px;text-wrap:balance;
}

/* Brighter as it expands: the halo, the badge face and the border all rise
   together at the midpoint. Stays entirely within brass — a colour shift
   would read as a notification rather than the brand. */
@keyframes lockGlow{
  0%,100%{
    box-shadow:0 0 0 10px rgba(201,162,75,.05),0 0 34px 10px rgba(201,162,75,.15);
    background:rgba(247,244,237,.04);
    border-color:rgba(201,162,75,.28);
    transform:scale(1);
  }
  50%{
    box-shadow:0 0 0 24px rgba(201,162,75,.16),0 0 92px 30px rgba(201,162,75,.52);
    background:rgba(201,162,75,.14);
    border-color:rgba(201,162,75,.85);
    transform:scale(1.07);
  }
}
/* Stroke lightens toward cream and thickens slightly at the peak. */
@keyframes lockIcon{
  0%,100%{stroke:#C9A24B;stroke-width:1.7;opacity:.9}
  50%{stroke:#F3E4BC;stroke-width:2.1;opacity:1}
}
@keyframes lockText{0%,100%{opacity:.78}50%{opacity:1}}

/* ---- Gap-weighted color tally (real counts, never which areas) ---- */
.tally{display:flex;gap:10px;width:100%;margin-top:22px}
.tally-col{flex:1;text-align:center}
.tally-chip{border-radius:12px;padding:18px 6px 16px}
.tally-chip.t-good{background:var(--sig-green)}
.tally-chip.t-partial{background:var(--sig-yellow)}
.tally-chip.t-gap{background:var(--sig-red)}
/* Light fills take the dark numeral, the dark fill takes cream — the same
   rule real signage uses, applied consistently rather than per-colour. */
.tally-chip.t-good .tally-n,
.tally-chip.t-partial .tally-n{color:var(--sig-ink)}
.tally-n{
  font-family:"Fraunces",Georgia,serif;display:block;
  font-size:42px;font-weight:600;line-height:1;color:#FFFDF8;
}
.tally-l{
  display:block;margin-top:11px;font-size:11.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--on-pine);
}
/* Supporting line, deliberately quieter than the band copy above it: the
   count it names is already sitting in the ring and the chips. 8.3:1. */
.tally-note{
  font-size:15px;color:var(--on-pine-mute);margin:18px auto 0;line-height:1.6;
  max-width:440px;text-wrap:balance;
}
/* The same three chips repeat on the report under the ring, so the number
   and the shape of the result stay together on the page they keep. */
.report-tally{max-width:520px;margin:36px auto 0}

/* ---- Light form card ---- */
.gate-form-card{
  background:var(--paper);border:1px solid var(--hair);border-top:none;
  border-radius:0 0 18px 18px;
  padding:38px 40px 36px;
}
.gate-benefits-h{
  font-family:"Fraunces",Georgia,serif;color:var(--pine);
  font-size:26px;font-weight:600;text-align:center;margin-bottom:22px;
  letter-spacing:-.01em;line-height:1.2;
}
.benefits{list-style:none;margin:0 auto 28px;max-width:450px}
.benefits li{
  display:flex;gap:11px;align-items:flex-start;
  font-size:15px;color:var(--ink);line-height:1.5;padding:6px 0;
}
.benefits li::before{
  content:"";flex:none;width:16px;height:16px;margin-top:3px;border-radius:50%;
  background:var(--brass);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.fields{display:flex;flex-direction:column;gap:15px;max-width:450px;margin:0 auto}
.field label{
  display:block;font-size:12px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:#4A5A56;margin-bottom:7px;
}
/* Same size and weight as the label it follows, and the same muted colour.
   An earlier version set this in brass, which made the emphasis colour
   advertise the reason NOT to fill the field in. It states the fact; the
   helper line below still does the persuading. */
.field label .opt-tag{font-size:inherit;font-weight:inherit;letter-spacing:inherit;color:inherit}
/* Helper line under a field. Sentence case and muted on purpose: the old
   uppercase brass "(OPTIONAL)" used the emphasis colour, so it pulled the
   eye straight to the reason not to fill the field in. */
.field-help{
  font-size:13px;font-weight:400;color:var(--ink-soft);line-height:1.5;
  margin-top:7px;text-transform:none;letter-spacing:normal;
}
.field input{
  width:100%;font-family:inherit;font-size:16.5px;color:var(--ink);
  background:var(--cream);border:1px solid var(--hair);border-radius:8px;
  padding:14px 15px;transition:border-color .15s ease,background .15s ease;
}
.field input:focus{outline:none;border-color:var(--brass);background:#FFFCF4}
.field input.bad{border-color:var(--gap);background:rgba(168,58,44,.05)}
.field-check{display:flex;align-items:flex-start;gap:11px;padding:4px 0 2px}
.field-check input[type=checkbox]{
  width:20px;height:20px;flex:none;margin-top:1px;cursor:pointer;
  accent-color:var(--brass);
}
.field-check label{
  font-size:15.5px;color:var(--ink);line-height:1.45;cursor:pointer;
  text-transform:none;letter-spacing:normal;font-weight:400;margin:0;
}
.spouse-fields{
  display:flex;flex-direction:column;gap:15px;
  padding:16px 0 4px 31px;border-left:2px solid rgba(176,138,56,.28);
  margin-left:9px;
}
.spouse-fields[hidden]{display:none}
.gate-err{
  max-width:450px;margin:14px auto 0;font-size:14px;color:var(--gap);
  text-align:center;display:none;
}
.gate-err.show{display:block}
.gate-btn{
  width:100%;max-width:450px;display:block;margin:26px auto 0;
  background:var(--brass);color:#fff;border-radius:8px;
}
.gate-btn:hover{background:#9C7A2E}
.gate-consent{
  max-width:450px;margin:18px auto 0;font-size:11.5px;color:var(--ink-soft);
  line-height:1.6;text-align:center;
}
.brief-peek{text-align:center;margin:26px 0 0}
.brief-peek a{font-size:12px;color:var(--ink-soft);letter-spacing:.06em}
.brief-panel{
  max-width:700px;margin:18px auto 0;background:var(--pine);
  border-radius:var(--radius);border-top:4px solid var(--brass);
  padding:26px 30px;text-align:left;
}
.brief-panel[hidden]{display:none}
.brief-panel h4{
  font-family:"Libre Franklin",sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--brass-lite);margin-bottom:14px;
}
.brief-panel pre{
  font-family:"Libre Franklin",sans-serif;font-size:14.5px;line-height:1.62;
  color:var(--on-pine-soft);white-space:pre-wrap;word-wrap:break-word;margin:0;
}
.brief-panel .note{
  font-size:12px;color:var(--on-pine-mute);margin-top:16px;
  padding-top:14px;border-top:1px solid rgba(247,244,237,.14);
}
.gate-skip{text-align:center;margin-top:20px}
.gate-skip a{font-size:12px;color:var(--ink-soft);letter-spacing:.06em}

@media(prefers-reduced-motion:reduce){
  .lockbadge,.lockbadge svg,.lock-h{animation:none!important}
  /* Held at the bright end so it still draws the eye without moving. */
  .lockbadge{background:rgba(201,162,75,.12);border-color:rgba(201,162,75,.7)}
}
@media(max-width:600px){
  .gate-mast{padding:34px 22px 32px}
  .gate-form-card{padding:30px 22px 30px}
  .lock-panel{padding:38px 18px 34px}
  .lockbadge{width:120px;height:120px;border-radius:30px}
  .lockbadge svg{width:60px;height:60px}
  .lock-h{margin-top:30px;font-size:24px}
  .lock-sub{font-size:16.5px}
  .tally-note{font-size:14px;max-width:100%}
  .gate-bandcopy,.scorewrap #bandCopy{font-size:18px}
  .gate-score .ring-holder{width:204px;height:204px}
  .gate-score .ring-num .n{font-size:60px}
  .lock-sub{font-size:15.5px}
  .tally{gap:7px}
  .tally-chip{padding:14px 4px 12px}
  .tally-n{font-size:32px}
  .tally-l{font-size:10.5px;letter-spacing:.06em}
}