/* base.css
   Type scale, buttons, brand bar, footer, section rhythm, screen switching.
   Part of The 12-Point Retirement Checkup - Heritage Edition.
   Load order matters: see the <link> block in any page. */

/* ---------- Type: Fraunces display over Franklin body ---------- */
.eyebrow{
  font-family:"Libre Franklin",sans-serif;
  font-size:12px;font-weight:600;color:var(--brass-text);
  letter-spacing:.19em;text-transform:uppercase;
  margin-bottom:20px;display:inline-block;position:relative;padding-bottom:12px;
}
.eyebrow::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  bottom:0;width:34px;height:2px;background:var(--brass);
}
.center .eyebrow::after{left:50%;transform:translateX(-50%)}
h1,h2,h3{font-family:"Fraunces",Georgia,"Times New Roman",serif;color:var(--pine)}
h1{
  font-size:clamp(38px,6.2vw,64px);font-weight:600;
  font-variation-settings:"SOFT" 0,"WONK" 1;
  letter-spacing:-.014em;line-height:1.08;
}
h2{
  font-size:clamp(28px,4.1vw,44px);font-weight:600;
  letter-spacing:-.01em;line-height:1.14;
}
h3{font-size:clamp(20px,2.3vw,25px);font-weight:600;letter-spacing:-.005em;line-height:1.25}
.sub{
  font-size:clamp(17px,1.9vw,19px);font-weight:400;color:var(--ink-soft);
  line-height:1.65;max-width:610px;margin-inline:auto;text-wrap:balance;
}
.tiny{font-size:14.5px;color:#4A5A56;letter-spacing:.01em}

/* ---------- Buttons: squared, weighted, no pills ---------- */
.btn{
  appearance:none;border:none;cursor:pointer;
  font-family:"Libre Franklin",sans-serif;
  background:var(--pine);color:var(--cream);font-weight:600;font-size:14px;
  letter-spacing:.1em;text-transform:uppercase;
  padding:17px 34px;border-radius:var(--radius);text-decoration:none;display:inline-block;
  transition:background .18s ease,box-shadow .18s ease,transform .08s ease;
  box-shadow:0 1px 0 rgba(34,49,46,.18);
}
.btn:hover{background:var(--pine-deep);box-shadow:0 3px 14px rgba(15,76,69,.24)}
.btn:active{transform:translateY(1px)}
.btn.ghost{
  background:transparent;color:var(--pine);box-shadow:none;
  border:1px solid var(--hair);
}
.btn.ghost:hover{background:transparent;border-color:var(--brass);color:var(--brass);box-shadow:none}
.btn.dark{background:var(--brass);color:#fff}
.btn.dark:hover{background:#9C7A2E}
.linkarrow{
  color:var(--pine);font-size:14px;font-weight:600;text-decoration:none;
  letter-spacing:.1em;text-transform:uppercase;
  border-bottom:1px solid var(--brass);padding-bottom:3px;
}
.linkarrow:hover{color:var(--brass)}
.linkarrow::after{content:" →"}

button:focus-visible,a:focus-visible,.opt:focus-visible{
  outline:2px solid var(--brass);outline-offset:3px;border-radius:var(--radius);
}

/* ---------- Advisor brand bar (persists on every screen) ---------- */
/* Pine, matching the footer, so the page is bookended in the brand colour.
   NOTE FOR ONBOARDING: advisorLogo must be a WHITE or LIGHT (reversed)
   version of the firm's logo. A standard dark logo will disappear against
   this ground. Advisors without a reversed file should leave advisorLogo
   blank and use the generated monogram, which is built for this bar. */
.brandbar{background:var(--pine);border-bottom:3px solid var(--brass)}
.brandbar-in{
  max-width:var(--max);margin:0 auto;padding:13px 24px;
  display:flex;align-items:center;gap:13px;
}
/* Inverted for the dark bar: brass disc, pine letter. */
.brand-mark{
  width:38px;height:38px;border-radius:50%;flex:none;
  background:var(--brass-lite);color:var(--pine-panel);
  display:flex;align-items:center;justify-content:center;
  font-family:"Fraunces",Georgia,serif;font-size:19px;font-weight:600;
}
.brand-logo{height:38px;width:auto;max-width:190px;object-fit:contain;flex:none;display:none}
/* All four clear 7:1 on pine — the audience skews 55-75. */
.brand-firm{font-size:15px;font-weight:600;color:var(--on-pine);line-height:1.25}
.brand-tag{font-size:11.5px;color:var(--on-pine-mute);margin-top:2px}
.brand-contact{margin-left:auto;text-align:right;font-size:13px;color:var(--on-pine-soft);line-height:1.45}
.brand-contact a{color:var(--on-pine-soft);text-decoration:none}
.brand-contact a:hover{color:var(--brass-lite)}

/* ---------- Advisor block (welcome screen) ----------
   Deliberately identical to the report's advisor passage: same photo size,
   same type scale, same centred layout. The advisor is the product in a
   white-label tool, so they should not be presented two different ways
   inside one experience. Change these and change .advisor to match. */
.trust{max-width:var(--prose);margin:0 auto;text-align:center}
.trust-photo{
  width:126px;height:126px;border-radius:50%;object-fit:cover;margin:0 auto 24px;
  display:block;background:var(--cream-deep);border:2px solid var(--brass);
}
/* The generated-initials fallback needs flex to centre its letters. */
.trust-photo.is-initials{
  display:flex;align-items:center;justify-content:center;
  font-family:"Fraunces",Georgia,serif;font-size:40px;font-weight:600;color:var(--pine);
}
.trust-name{font-family:"Fraunces",Georgia,serif;font-size:29px;font-weight:600;color:var(--pine);letter-spacing:-.01em;line-height:1.2}
.trust-cred{
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass-text);margin-top:8px;
}
.trust-firm{font-size:16px;color:var(--ink-soft);margin-top:6px}
/* Centred here, unlike the report's advisor prose: this is the only text
   block in the section, so a lone left edge between centred identity and a
   centred button reads as a mistake. Two lines is short enough that centring
   costs nothing in readability. */
.trust-copy{font-size:16px;color:var(--ink);line-height:1.65;margin-top:22px;text-align:center;text-wrap:balance}

/* ---------- Branded footer ---------- */
.foot-firm{font-family:"Fraunces",Georgia,serif;font-size:16px;font-weight:600;color:var(--on-pine)}
.foot-contact{font-size:13px;color:var(--on-pine-mute);margin-top:7px}
.foot-contact a{color:var(--on-pine-mute);text-decoration:none}
.foot-rule{width:46px;height:1px;background:rgba(201,162,75,.5);margin:18px auto}

/* ---------- Sections ---------- */
section{padding:88px 0}
.band{background:var(--cream-deep);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}

/* ---------- The report reads as one continuous sheet ----------
   The pine score panel is the masthead and keeps its own treatment.
   Everything below it shares one ground, and passages are separated by
   whitespace and an eyebrow rule rather than by cards or bands. */
#screen-report section{padding:64px 0}
#screen-report .band{background:none;border-top:none;border-bottom:none}
#screen-report .scorewrap{padding:82px 0 74px}
.center{text-align:center}
.stack>*+*{margin-top:20px}

/* ---------- Screen switching ---------- */
.screen{display:none}
.screen.active{display:block;animation:fade .5s ease both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}