/* Points Yield Pro — homepage styles
   Tokens merged from the Points Yield Pro design system, with this page's
   own palette override (navy/green values) applied on top. */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root{
  /* Brand scale (page override) */
  --navy-900:#152238; --navy-800:#1e3050; --navy-700:#2a4166; --navy-600:#3a5480;
  --navy-400:#7286a3; --navy-200:#c6cedb; --navy-100:#e5e9ef; --navy-50:#f4f6f9;
  --green-800:#0a4b3a; --green-700:#0c5c47; --green-600:#0f6e56; --green-500:#158066;
  --green-400:#3f9e83; --green-300:#7cc3ae; --green-200:#b7ded1; --green-100:#e2f0eb;
  --gray-900:#1d1c1a; --gray-700:#43423e; --gray-600:#5f5e5a; --gray-500:#76756f;
  --gray-400:#93928f; --gray-300:#c8c6c0; --gray-200:#e6e2d9; --gray-100:#f1ede4; --gray-50:#faf7f0;
  --white:#ffffff;

  --success-bg:#e2f0eb; --success-fg:#0c5c47;
  --warning-fg:#8a5a10; --warning-bg:#fbf0dc;
  --danger-fg:#a12920; --danger-bg:#fbe6e4;
  --info-fg:var(--navy-700); --info-bg:var(--navy-50);
  --viz-1:#152238; --viz-2:#1d4557; --viz-3:#136457; --viz-4:#158066; --viz-5:#3f9e83;

  /* Semantic aliases */
  --text-strong:var(--navy-900);
  --text-body:var(--gray-600);
  --text-muted:var(--gray-500);
  --text-accent:var(--green-600);
  --text-inverse:var(--white);
  --text-on-navy-muted:var(--navy-200);
  --surface-page:var(--gray-50);
  --surface-card:var(--white);
  --surface-sunken:var(--gray-100);
  --surface-navy:var(--navy-900);
  --surface-navy-soft:var(--navy-800);
  --surface-accent-soft:var(--green-100);
  --surface-info-soft:var(--navy-50);
  --border-subtle:var(--gray-200);
  --border-default:var(--gray-300);
  --border-strong:var(--navy-900);
  --border-accent:var(--green-600);
  --accent:var(--green-600);
  --accent-hover:var(--green-700);
  --accent-press:var(--green-800);
  --primary:var(--navy-900);
  --primary-hover:var(--navy-800);
  --primary-press:#000d1c;
  --focus-ring:var(--green-500);

  /* Fonts */
  --font-display:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --font-body:"Source Sans 3","Segoe UI",Helvetica,Arial,sans-serif;
  --font-mono:"IBM Plex Mono","SFMono-Regular",Menlo,monospace;

  /* Type scale */
  --text-display-xl:64px; --text-display:52px; --text-h1:40px; --text-h2:30px;
  --text-h3:22px; --text-h4:18px; --text-lg:18px; --text-base:16px;
  --text-sm:14px; --text-xs:13px; --text-2xs:11px;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-black:800;
  --leading-tight:1.05; --leading-snug:1.2; --leading-normal:1.5; --leading-relaxed:1.65;
  --tracking-tight:-0.02em; --tracking-normal:0; --tracking-wide:0.04em; --tracking-caps:0.1em;
  --type-display:var(--weight-black) var(--text-display)/var(--leading-tight) var(--font-display);
  --type-h1:var(--weight-bold) var(--text-h1)/var(--leading-snug) var(--font-display);
  --type-h2:var(--weight-bold) var(--text-h2)/var(--leading-snug) var(--font-display);
  --type-h3:var(--weight-bold) var(--text-h3)/1.3 var(--font-display);
  --type-body:var(--weight-regular) var(--text-base)/var(--leading-relaxed) var(--font-body);
  --type-body-sm:var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-body);
  --type-label:var(--weight-semibold) var(--text-sm)/1.3 var(--font-body);
  --type-eyebrow:var(--weight-bold) var(--text-2xs)/1.2 var(--font-display);
  --type-numeric:var(--weight-semibold) var(--text-h2)/1.1 var(--font-mono);

  /* Spacing / radius */
  --space-0:0px; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
  --space-16:64px; --space-20:80px; --space-24:96px; --space-32:128px;
  --radius-xs:3px; --radius-sm:6px; --radius-md:10px; --radius-lg:14px;
  --radius-xl:20px; --radius-2xl:28px; --radius-pill:999px;
  --container-max:1200px; --container-narrow:720px;

  /* Elevation */
  --shadow-1:0 1px 2px rgba(21,34,56,.06), 0 1px 1px rgba(21,34,56,.04);
  --shadow-2:0 2px 6px rgba(21,34,56,.07), 0 8px 20px -12px rgba(21,34,56,.18);
  --shadow-3:0 8px 24px -8px rgba(21,34,56,.18), 0 24px 48px -24px rgba(21,34,56,.22);
  --shadow-navy:0 18px 40px -18px rgba(21,34,56,.55);

  /* Motion */
  --dur-fast:140ms; --dur-base:220ms;
  --ease-out:cubic-bezier(.2,.7,.3,1);
  --transition-control:color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body);-webkit-font-smoothing:antialiased;min-width:360px}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,h4{color:var(--text-strong);font-family:var(--font-display);letter-spacing:var(--tracking-tight)}
h1{font:var(--type-h1)} h2{font:var(--type-h2)} h3{font:var(--type-h3)}
a{color:var(--green-700);text-decoration:none}
img{max-width:100%}
.pyp-eyebrow{font:var(--type-eyebrow);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--accent);margin-bottom:var(--space-3);display:block}
.pyp-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-8)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:var(--font-body);font-weight:var(--weight-semibold);border:1px solid transparent;
  border-radius:var(--radius-sm);cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:var(--transition-control);font-size:var(--text-base);padding:10px 20px;}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn-lg{font-size:var(--text-lg);padding:14px 28px}
.btn-accent{background:var(--accent);color:var(--text-inverse);border-color:var(--accent)}
.btn-accent:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-secondary{background:var(--surface-card);color:var(--navy-900);border-color:var(--border-default)}
.btn-secondary:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:var(--white)}
.btn-ghost{background:transparent;color:var(--navy-900);border-color:transparent}
.btn-ghost:hover{background:var(--gray-100)}
.btn-link{background:transparent;color:var(--green-700);border-color:transparent;padding:0;text-decoration:underline;text-underline-offset:3px;font-size:var(--text-sm)}
.btn-link:hover{color:var(--green-600)}

/* ---------- Callout ---------- */
.callout{display:flex;gap:var(--space-3);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5)}
.callout-accent{background:var(--success-bg);color:var(--success-fg);box-shadow:inset 3px 0 0 var(--green-600)}
.callout-title{font:var(--type-label);margin-bottom:4px}
.callout-body{font:var(--type-body-sm)}

/* ---------- Stat tile ---------- */
.stat-tile{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  padding:var(--space-5);box-shadow:var(--shadow-1)}
.stat-tile.navy{background:var(--surface-navy);border-color:var(--navy-800);box-shadow:var(--shadow-navy);color:var(--navy-200)}
.stat-label{font:var(--type-eyebrow);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-muted);margin-bottom:10px;display:block}
.stat-tile.navy .stat-label{color:var(--navy-200)}
.stat-value{font:var(--type-numeric);color:var(--text-strong);letter-spacing:-0.01em}
.stat-tile.navy .stat-value{color:var(--white)}
.stat-caption{font:var(--type-body-sm);font-size:var(--text-xs);color:var(--text-muted);margin-top:8px;display:block}
.stat-tile.navy .stat-caption{color:var(--navy-200)}

/* ---------- Header ---------- */
header.site{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-subtle)}
header.site .container{height:76px;display:flex;align-items:center;gap:var(--space-10)}
header.site .logo-link{display:flex;align-items:center}
header.site nav{display:flex;gap:28px;margin-left:var(--space-4)}
header.site nav a{font:var(--type-label);color:var(--text-body)}
header.site nav a:hover{color:var(--navy-900)}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:var(--space-5)}
.header-actions a.email{font:var(--type-label);color:var(--text-body)}
.header-actions a.email:hover{color:var(--navy-900)}

/* ---------- Hero ---------- */
#top{background:var(--surface-card);border-bottom:1px solid var(--border-subtle);padding:var(--space-20) var(--space-8) var(--space-16)}
.hero-grid{max-width:var(--container-max);margin:0 auto;display:grid;grid-template-columns:1.08fr .92fr;gap:var(--space-16);align-items:center}
.hero-eyebrow{font:var(--type-eyebrow);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--accent);margin-bottom:var(--space-4);font-size:20px;display:block}
.hero-headline{font:var(--type-display);font-size:54px;letter-spacing:var(--tracking-tight);color:var(--text-strong);text-wrap:pretty}
.hero-sub{font:var(--type-body);font-size:20px;color:var(--text-body);margin-top:var(--space-5);max-width:530px}
.hero-ctas{display:flex;gap:var(--space-3);margin-top:var(--space-8);align-items:center;flex-wrap:wrap}
.hero-meta{display:flex;gap:var(--space-5);margin-top:var(--space-6);font:var(--type-body-sm);color:var(--text-muted)}

.hero-visual{position:relative}
.hero-visual-glow{position:absolute;inset:-10% -8%;background:radial-gradient(58% 58% at 58% 42%, var(--green-100), transparent 70%)}
.hero-compare-img{display:block;width:100%;position:relative}
.hero-callout-wrap{margin-top:var(--space-2);position:relative}

.stat-strip{max-width:var(--container-max);margin:var(--space-16) auto 0;padding-top:var(--space-10);
  border-top:1px solid var(--border-subtle);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}

/* ---------- Math section ---------- */
#math{background:var(--surface-page);padding:var(--space-20) var(--space-8)}
.math-grid{max-width:var(--container-max);margin:0 auto;display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--space-16);align-items:start}
#math p{margin-top:var(--space-5);color:var(--text-body)}
#math p + p{margin-top:var(--space-4)}
.math-callout-wrap{margin-top:var(--space-6)}
.math-note{font:var(--type-body-sm);color:var(--text-muted);margin-top:var(--space-6);font-style:italic;display:block}

.example-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-2);overflow:hidden}
.example-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);padding:var(--space-6) var(--space-6) var(--space-4)}
.example-head h3{letter-spacing:var(--tracking-tight)}
.example-head .tag{font:var(--type-body-sm);color:var(--text-muted)}
.example-row-head{display:grid;grid-template-columns:1.3fr 1fr 1fr;padding:10px var(--space-6);background:var(--gray-100);
  border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);
  font:var(--type-eyebrow);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-muted)}
.example-row{display:grid;grid-template-columns:1.3fr 1fr 1fr;align-items:center;padding:15px var(--space-6);
  border-bottom:1px solid var(--border-subtle);font:var(--type-body);font-size:15px}
.example-row:last-of-type{border-bottom:none}
.example-row .muted{color:var(--text-muted)}
.example-row .strong{color:var(--text-strong)}
.example-row .accent{color:var(--accent);font-weight:var(--weight-semibold)}
.example-foot{display:flex;align-items:baseline;justify-content:space-between;padding:var(--space-5) var(--space-6);background:var(--surface-navy);color:var(--navy-200)}
.example-foot .label{font:var(--type-label);color:var(--white)}
.example-foot .value{font:var(--type-numeric);color:var(--green-400)}

/* ---------- Process section ---------- */
#process{background:var(--surface-card);border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);padding:var(--space-20) var(--space-8)}
.process-head{max-width:640px;margin:0 auto var(--space-12);text-align:center}
.process-head p{margin-top:var(--space-4)}
.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
.process-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);padding:var(--space-6);position:relative;overflow:hidden}
.process-card.active::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:var(--accent)}
.process-icon-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-5)}
.process-icon-row img{width:36px;height:auto;display:block}
.process-index{font-size:24px;font-weight:var(--weight-semibold);color:var(--gray-300)}
.process-card h3{margin-bottom:var(--space-2)}
.process-card p{font:var(--type-body-sm);color:var(--text-body)}

@media (min-width:769px){
  .process-grid{grid-template-columns:repeat(3,1fr)}
}

/* ---------- Estimate / quiz ---------- */
#estimate{background:var(--surface-page);padding:var(--space-20) var(--space-8)}
.estimate-wrap{max-width:760px;margin:0 auto}
.estimate-head{text-align:center;margin-bottom:var(--space-10)}
.estimate-head p{margin-top:var(--space-3)}
.quiz-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-2);padding:var(--space-8)}
.quiz-progress-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.quiz-counter{font:var(--type-eyebrow);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-muted)}
.quiz-pct-label{font-size:13px;color:var(--text-muted)}
.quiz-progress-track{height:4px;background:var(--gray-200);border-radius:2px;overflow:hidden;margin-bottom:var(--space-8)}
.quiz-progress-bar{height:100%;background:var(--accent);border-radius:2px;transition:width .38s var(--ease-out);width:0%}
.quiz-step h3{margin-bottom:var(--space-2)}
.quiz-step-sub{font:var(--type-body-sm);color:var(--text-muted);margin-bottom:var(--space-6);display:block}
.quiz-options{display:grid;gap:10px;margin-bottom:var(--space-8)}
.quiz-option{display:flex;align-items:center;gap:12px;padding:13px 16px;border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);background:var(--white);color:var(--text-body);font:var(--type-body);
  font-size:15px;cursor:pointer;user-select:none;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);}
.quiz-option:hover{border-color:var(--green-400)}
.quiz-mark{width:26px;height:26px;flex:none;border-radius:4px;border:1px solid var(--border-subtle);
  background:var(--gray-100);color:var(--text-muted);font:var(--type-eyebrow);font-size:12px;
  display:flex;align-items:center;justify-content:center}
.quiz-option[data-q="q2"] .quiz-mark{width:22px;height:22px;border:1px solid var(--border-default);background:var(--white)}
.quiz-tick{width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);margin-top:-2px;opacity:0;display:block}
.quiz-option.is-selected{border-color:var(--accent);background:var(--surface-accent-soft);color:var(--text-strong)}
.quiz-option.is-selected .quiz-mark{background:var(--accent);border-color:var(--accent);color:#fff}
.quiz-option.is-selected .quiz-tick{opacity:1}
.quiz-nav{display:flex;justify-content:flex-end;align-items:center}
.quiz-nav.between{justify-content:space-between}

.quiz-result{text-align:center;padding:var(--space-4) var(--space-2)}
.quiz-result h3{margin-bottom:var(--space-3)}
.quiz-result p{font:var(--type-body);color:var(--text-body);max-width:520px;margin:0 auto}
.quiz-result-eyebrow{font:var(--type-eyebrow);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-4);display:block}
.quiz-result-actions{display:flex;justify-content:center;gap:var(--space-3);margin-top:var(--space-8);flex-wrap:wrap}

.quiz-result-gap .quiz-result-eyebrow{display:inline-block;color:var(--success-fg);background:var(--success-bg);
  padding:6px 12px;border-radius:var(--radius-pill);margin-bottom:0}
.quiz-result-gap .gap-value{font-family:var(--font-mono);font-weight:600;font-size:52px;line-height:1.05;
  color:var(--accent);letter-spacing:-0.02em;margin-top:var(--space-5)}
.quiz-result-gap .gap-sub{font:var(--type-body-sm);color:var(--text-muted);margin-top:10px}
.quiz-result-gap .divider{height:1px;background:var(--border-subtle);margin:var(--space-8) 0}
.quiz-result-gap .gap-note{font:var(--type-body);color:var(--text-body);text-align:center;max-width:560px;margin:0 auto}
.quiz-result-gap .gap-actions{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:var(--space-8)}
.quiz-result-gap .gap-actions .fine{font:var(--type-body-sm);color:var(--text-muted)}

.estimate-foot{text-align:center;font:var(--type-body-sm);color:var(--text-muted);margin-top:var(--space-5)}

/* ---------- CTA banner ---------- */
.cta-banner{background:var(--surface-navy);padding:var(--space-16) var(--space-8)}
.cta-banner .container{display:flex;align-items:center;gap:var(--space-12);flex-wrap:wrap}
.cta-banner img{width:150px;display:block}
.cta-banner h2{color:var(--white)}
.cta-banner p{color:var(--navy-200);margin-top:var(--space-3);max-width:520px}
.cta-banner .cta-actions{margin-left:auto;display:flex;gap:var(--space-3)}

/* ---------- Footer ---------- */
footer.site{background:var(--surface-navy);border-top:1px solid var(--navy-800);color:var(--navy-200);
  padding:var(--space-12) var(--space-8) var(--space-8)}
.footer-grid{max-width:var(--container-max);margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr;
  gap:var(--space-10);align-items:start}
.footer-tagline{font:var(--type-body-sm);color:var(--navy-200);margin-top:var(--space-4);max-width:320px}
.footer-heading{font:var(--type-eyebrow);letter-spacing:var(--tracking-caps);text-transform:uppercase;
  color:var(--green-400);margin-bottom:var(--space-4);display:block}
.footer-links{display:grid;gap:10px;font:var(--type-body-sm)}
.footer-links a{color:var(--navy-200)}
.footer-links a:hover{color:var(--white)}
.footer-bottom{max-width:var(--container-max);margin:var(--space-10) auto 0;padding-top:var(--space-6);
  border-top:1px solid var(--navy-800);display:flex;justify-content:space-between;gap:var(--space-8);
  font:var(--type-body-sm);font-size:var(--text-xs);color:var(--navy-400);flex-wrap:wrap}
.footer-bottom .disclaimer{max-width:620px;text-align:right}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero-grid, .math-grid{grid-template-columns:1fr}
  .stat-strip{grid-template-columns:1fr}
  .process-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .cta-banner .container{flex-direction:column;text-align:center}
  .cta-banner .cta-actions{margin-left:0}
  header.site nav{display:none}
}
@media (max-width:560px){
  .hero-headline{font-size:38px}
  .example-row, .example-row-head{grid-template-columns:1fr 1fr}
  .example-row span:first-child{grid-column:1 / -1}
  header.site .container{padding:0 var(--space-4);gap:var(--space-4)}
  .header-actions{gap:var(--space-3)}
  .header-actions a.email{display:none}
  .btn-lg{padding:12px 18px;font-size:var(--text-base)}
}