/* pfos-public.v1.css — the PFOS landing page (/) styles, copied VERBATIM from index.html so every
   public SEO page renders exactly like the front door. Immutable once deployed: change it by
   shipping pfos-public.v2.css and repointing the pages. */
:root{
  --navy:#03100C;--navy2:#05130F;--navy3:#0A1F18;
  --blue:#B77E0B;--blue2:#C69B3C;--bll:#C69B3C;
  --orange:#D9B45B;--orange2:#B77E0B;
  --green:#22C55E;--red:#EF4444;--yellow:#EAB308;
  --white:#F4EADE;--muted:#8FA69B;--border:rgba(198,155,60,0.2);
  --card:rgba(10,31,24,0.8);
  --fh:Didot,Cambria,Georgia,serif;--fb:Palatino,Constantia,Georgia,serif;font-size-adjust:0.5;
}
*{box-sizing:border-box;margin:0;padding:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
html{scroll-behavior:smooth}
body{background:var(--navy);color:var(--white);font-family:var(--fb);overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* ── GHL WRAPPER KILLER ── */
html,body{background:#03100C!important;min-height:100vh!important}
body > *:not(script):not(style):not(.launch-banner):not(nav):not(section):not(footer):not(.feedback-float):not(.feedback-modal):not(.section-divider){background:#03100C!important;padding:0!important;margin:0!important}
[class*="section"]:not(.hero):not(.free-banner):not(.meeting-section):not(.pricing-card):not(.feature-card):not(.user-card):not(.proof-card):not(.score-card):not(.scores-showcase):not(.stat-item):not(.steps):not(.step):not(.section-eyebrow):not(.section-title):not(.section-body):not(.section-divider),[class*="container"]:not(.hero-content):not(.nav-logo):not(.nav-links):not(.nav-cta):not(.free-banner-left):not(.free-badge):not(.meeting-section):not(.meeting-form):not(.feedback-box):not(.feedback-form-inner),[class*="wrapper"],[class*="page-wrap"],[class*="row"]:not(.check-row),[id*="page"],[id*="content"],[id*="main"]{background:#03100C!important;padding:0!important;margin:0!important;max-width:100%!important;width:100%!important}
::-webkit-scrollbar{width:6px;background:var(--navy)}
::-webkit-scrollbar-thumb{background:var(--blue);border-radius:3px}

/* ── (legacy banner styles, retained for safety) ── */
.launch-banner{
  background:linear-gradient(90deg,var(--orange2),var(--orange),#FBBF24,var(--orange),var(--orange2));
  background-size:300% 100%;animation:bannerShift 4s linear infinite;will-change:background-position;
  color:#fff;text-align:center;padding:12px 20px;font-family:var(--fh);
  font-size:14px;font-weight:700;letter-spacing:.05em;position:relative;z-index:100;
}
.launch-banner a{color:#fff;text-decoration:underline;cursor:pointer}
@keyframes bannerShift{0%{background-position:0% 50%}100%{background-position:300% 50%}}

/* ── NAV ── */
nav{
  position:sticky;top:0;z-index:90;
  background:rgba(3,16,12,.95);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 48px;
}
.nav-logo{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.nav-logo-inner{display:flex;align-items:center;gap:10px}
.nav-logo-img{height:36px;width:auto;max-width:165px;object-fit:contain;object-position:left}
.nav-logo-fallback{display:flex;align-items:center;gap:10px;height:42px}
.nl-as{font-family:var(--fh);font-size:22px;font-weight:800;color:var(--bll);letter-spacing:-.03em}
.nl-name{font-family:var(--fh);font-size:15px;font-weight:800;color:var(--white);line-height:1}
.nav-logo-text-wrap{display:none}
.nav-logo-sub{font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--bll);margin-top:2px;line-height:1;white-space:nowrap} .nav-logo-textcol{display:flex;flex-direction:column;justify-content:center;gap:2px} .nl-wm{font-family:var(--fh);text-transform:uppercase;letter-spacing:.2em;font-weight:600;font-size:15px;color:var(--wh);white-space:nowrap} .nl-wm b{color:#D9B45B;font-weight:600}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{font-family:var(--fh);font-size:14px;font-weight:600;color:var(--wh-a6);text-decoration:none;letter-spacing:.04em;transition:color .2s}
.nav-links a:hover{color:var(--white)}
.nav-cta{display:flex;gap:10px}
.btn-outline{padding:9px 20px;border:1px solid var(--border);background:transparent;color:var(--bll);font-family:var(--fh);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border-radius:3px;text-decoration:none;transition:all .2s}
.btn-outline:hover{border-color:var(--bll);background:rgba(198,155,60,.08)}
.btn-primary{padding:9px 22px;background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;font-family:var(--fh);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border:none;border-radius:3px;text-decoration:none;transition:all .2s;box-shadow:0 4px 20px rgba(198,155,60,.3)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 30px rgba(198,155,60,.5)}

/* ── HERO ── */
.hero{
  min-height:94vh;display:flex;align-items:center;justify-content:center;
  padding:80px 48px 60px;text-align:center;position:relative;overflow:hidden;
}
/* The hero used to wash the ground with gold .25 + ORANGE .1 + gold .08. Measured
   against sign-in, that lifted the red channel right across the page (#0B4037 where
   sign-in reads #013C38) - which is the warm cast on the background. Sign-in lays
   nothing at all over its canvas, and nor does any other page, so neither does this
   one now. */
.hero-bg{ position:absolute;inset:0; background:none; }
/* the gold grid went the same way - sign-in has no texture over its ground */
.hero-grid{ display:none; }
.hero-content{position:relative;z-index:1;max-width:900px;margin:0 auto}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(249,115,22,.1);border:1px solid rgba(249,115,22,.3);
  color:var(--orange);font-family:var(--fh);font-size:13px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:6px 16px;border-radius:20px;
  margin-bottom:28px;
}
.hero-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--orange);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.5)}}
.hero h1{
  font-family:var(--fh);font-size:clamp(38px,5.5vw,76px);font-weight:800;
  line-height:1.12;letter-spacing:-.02em;margin-bottom:16px;
  padding-bottom:4px;overflow:visible;
}
.hero h1 span{
  background:linear-gradient(135deg,#fff 0%,var(--bll) 40%,var(--orange) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  display:inline-block;vertical-align:top;padding-bottom:6px;
}
.hero-sub{
  font-family:var(--fh);font-size:clamp(16px,2vw,22px);font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  margin-bottom:20px;text-align:center;
}
.hero p{font-size:17px;line-height:1.8;color:var(--wh-a7);max-width:640px;margin:0 auto 40px}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:56px}
.btn-hero{
  padding:16px 36px;background:linear-gradient(135deg,var(--orange),var(--orange2));
  color:#fff;font-family:var(--fh);font-size:14px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;border:none;border-radius:3px;
  cursor:pointer;text-decoration:none;box-shadow:0 8px 32px rgba(249,115,22,.4);
  transition:all .25s;display:inline-flex;align-items:center;gap:10px;
}
.btn-hero:hover{transform:translateY(-2px);box-shadow:0 14px 44px rgba(249,115,22,.6)}
.btn-hero-ghost{
  padding:16px 36px;background:transparent;
  border:1px solid rgba(198,155,60,.35);color:var(--bll);
  font-family:var(--fh);font-size:14px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;border-radius:3px;
  cursor:pointer;text-decoration:none;transition:all .25s;
  display:inline-flex;align-items:center;gap:10px;
}
.btn-hero-ghost:hover{border-color:var(--bll);background:rgba(198,155,60,.08);transform:translateY(-2px)}

/* hero stats */
.hero-stats{display:flex;gap:0;justify-content:center;border:1px solid var(--border);border-radius:4px;overflow:hidden;max-width:580px;margin:0 auto}
.stat-item{flex:1;padding:18px 20px;text-align:center;border-right:1px solid var(--border)}
.stat-item:last-child{border-right:none}
.stat-num{font-family:var(--fh);font-size:26px;font-weight:800;color:var(--white);line-height:1}
.stat-lbl{font-size:13px;color:var(--muted);margin-top:4px;letter-spacing:.08em;text-transform:uppercase}

/* ── SECTION COMMONS ── */
section{padding:100px 48px}
.section-eyebrow{
  display:block;font-family:var(--fh);font-size:13px;font-weight:700;
  letter-spacing:.25em;text-transform:uppercase;color:var(--bll);
  margin-bottom:14px;text-align:center;
}
.section-title{font-family:var(--fh);font-size:clamp(26px,3.5vw,46px);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-bottom:16px;overflow:visible;padding-bottom:4px;text-align:center}
.section-body{font-size:16px;line-height:1.8;color:var(--wh-a65);max-width:560px;text-align:center;margin:0 auto}

/* ── FREE BANNER SECTION ── */
.free-banner{
  background:linear-gradient(135deg,rgba(249,115,22,.1),rgba(234,88,12,.05));
  border:1px solid rgba(249,115,22,.25);border-radius:6px;
  padding:40px 48px;max-width:900px;margin:0 auto;
  display:flex;align-items:center;justify-content:center;gap:32px;flex-wrap:wrap;
  text-align:center;
}
.free-banner-left h2{font-family:var(--fh);font-size:28px;font-weight:800;color:var(--white);margin-bottom:8px;text-align:center;width:100%}
.free-banner-left p{font-size:14px;color:var(--wh-a7);line-height:1.7;max-width:480px;text-align:center;margin:0 auto}
.free-badge{
  flex-shrink:0;text-align:center;
  background:rgba(249,115,22,.12);border:2px solid rgba(249,115,22,.4);
  border-radius:4px;padding:20px 32px;
}
.free-badge-price{font-family:var(--fh);font-size:40px;font-weight:800;color:var(--orange);line-height:1}
.free-badge-label{font-family:var(--fh);font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.free-badge-sub{font-size:13px;color:rgba(249,115,22,.7);margin-top:6px}

/* ── PRICING ── */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1000px;margin:0 auto}
.pricing-card{
  background:var(--card);border:1px solid var(--border);border-radius:4px;
  padding:32px;position:relative;overflow:hidden;transition:transform .2s;
}
.pricing-card:hover{transform:translateY(-4px)}
.pricing-card.featured{border-color:rgba(198,155,60,.5);background:rgba(198,155,60,.08)}
.pricing-card.featured::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--blue),var(--bll));
}
.pricing-tier{font-family:var(--fh);font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;text-align:center}
.pricing-name{font-family:var(--fh);font-size:24px;font-weight:800;color:var(--white);margin-bottom:6px;text-align:center}
.pricing-price{display:flex;align-items:baseline;gap:4px;margin-bottom:8px;justify-content:center}
.pricing-price .amount{font-family:var(--fh);font-size:42px;font-weight:800;color:var(--white)}
.pricing-price .period{font-size:14px;color:var(--muted)}
.pricing-original{font-size:13px;color:var(--muted);text-decoration:line-through;margin-bottom:4px;text-align:center}
.pricing-free{font-family:var(--fh);font-size:14px;font-weight:700;color:var(--orange);margin-bottom:16px;text-align:center}
.pricing-desc{font-size:14px;color:var(--wh-a6);line-height:1.7;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.pricing-features{list-style:none;margin-bottom:28px;text-align:left}
.pricing-features li{font-size:14px;color:var(--wh-a75);padding:6px 0;display:flex;align-items:flex-start;gap:10px;border-bottom:1px solid rgba(198,155,60,.06);text-align:left}
.pricing-features li:last-child{border-bottom:none}
.pricing-features li::before{content:'✓';color:var(--green);font-weight:700;flex-shrink:0;margin-top:1px}
.pricing-features li.na{color:var(--muted)}
.pricing-features li.na::before{content:'—';color:var(--muted)}
.btn-tier{
  width:100%;padding:12px;font-family:var(--fh);font-size:13px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;border-radius:3px;cursor:pointer;
  text-align:center;text-decoration:none;display:block;transition:all .2s;
}
.btn-tier-primary{background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;border:none;box-shadow:0 4px 16px rgba(198,155,60,.3)}
.btn-tier-primary:hover{box-shadow:0 8px 24px rgba(198,155,60,.5);transform:translateY(-1px)}
.btn-tier-ghost{background:transparent;border:1px solid var(--border);color:var(--wh-a6)}
.btn-tier-ghost:hover{border-color:var(--bll);color:var(--bll)}
.btn-tier-orange{background:linear-gradient(135deg,var(--orange),var(--orange2));color:#fff;border:none;box-shadow:0 4px 16px rgba(249,115,22,.3)}
.btn-tier-orange:hover{box-shadow:0 8px 24px rgba(249,115,22,.5);transform:translateY(-1px)}

/* ── BELOW FOLD SKIP RENDERING ── */
.below-fold{content-visibility:auto;contain-intrinsic-size:auto 600px}
/* ── FEATURE CARDS ── */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1100px;margin:0 auto}
.feature-card{
  background:var(--card);border:1px solid var(--border);border-radius:4px;
  padding:28px;transition:all .25s;position:relative;overflow:hidden;
}
.feature-card:hover{border-color:rgba(198,155,60,.3);transform:translateY(-3px)}
.feature-card::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--bll));
  transform:scaleX(0);transition:transform .3s;transform-origin:left;
}
.feature-card:hover::after{transform:scaleX(1)}
.feature-icon{font-size:28px;margin-bottom:14px;display:block}
.feature-title{font-family:var(--fh);font-size:16px;font-weight:700;color:var(--white);margin-bottom:8px;text-align:center}
.feature-desc{font-size:14px;color:var(--wh-a6);line-height:1.7;text-align:center}

/* ── USER TYPE SECTIONS ── */
.user-split{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1100px;margin:0 auto}
.user-card{
  border-radius:6px;padding:48px;position:relative;overflow:hidden;
}
.user-card.advisor{
  background:linear-gradient(135deg,rgba(198,155,60,.15),rgba(10,31,24,.9));
  border:1px solid rgba(198,155,60,.25);
}
.user-card.client{
  background:linear-gradient(135deg,rgba(249,115,22,.1),rgba(10,31,24,.9));
  border:1px solid rgba(249,115,22,.2);
}
.user-card-eyebrow{font-family:var(--fh);font-size:13px;font-weight:700;letter-spacing:.25em;text-transform:uppercase;margin-bottom:10px}
.user-card.advisor .user-card-eyebrow{color:var(--bll)}
.user-card.client .user-card-eyebrow{color:var(--orange)}
.user-card h3{font-family:var(--fh);font-size:28px;font-weight:800;color:var(--white);margin-bottom:12px}
.user-card p{font-size:14px;color:var(--wh-a65);line-height:1.8;margin-bottom:24px}
.user-features{list-style:none;margin-bottom:32px}
.user-features li{font-size:14px;color:var(--wh-a8);padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05);display:flex;align-items:flex-start;gap:10px}
.user-features li:last-child{border-bottom:none}
.advisor-bullet::before{content:'→';color:var(--bll);font-weight:700;flex-shrink:0}
.client-bullet::before{content:'→';color:var(--orange);font-weight:700;flex-shrink:0}
.user-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 24px;border-radius:3px;font-family:var(--fh);font-size:13px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;transition:all .2s;
}
.user-cta.advisor-cta{background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;box-shadow:0 4px 16px rgba(198,155,60,.3)}
.user-cta.client-cta{background:linear-gradient(135deg,var(--orange),var(--orange2));color:#fff;box-shadow:0 4px 16px rgba(249,115,22,.3)}

/* ── HOW IT WORKS ── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;max-width:1000px;margin:60px auto 0;position:relative}
.steps::before{
  content:'';position:absolute;top:28px;left:15%;right:15%;height:1px;
  background:linear-gradient(90deg,transparent,var(--border),var(--border),transparent);
}
.step{text-align:center;padding:0 20px}
.step-num{
  width:56px;height:56px;border-radius:50%;
  background:var(--navy3);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fh);font-size:18px;font-weight:800;color:var(--bll);
  margin:0 auto 16px;position:relative;z-index:1;
}
.step h3{font-family:var(--fh);font-size:14px;font-weight:700;color:var(--white);margin-bottom:8px;text-align:center}
.step p{font-size:13px;color:var(--muted);line-height:1.7;text-align:center}

/* ── SCORES SHOWCASE ── */
.scores-showcase{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  max-width:900px;margin:48px auto 0;
}
.score-card{
  background:var(--card);border:1px solid var(--border);border-radius:4px;
  padding:24px;text-align:center;
}
.score-num{font-family:var(--fh);font-size:42px;font-weight:800;line-height:1}
.score-bar{height:4px;background:rgba(198,155,60,.15);border-radius:2px;margin:10px 0 6px;overflow:hidden}
.score-fill{height:100%;border-radius:2px}
.score-label{font-family:var(--fh);font-size:13px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);text-align:center}

/* ── TESTIMONIAL / SOCIAL PROOF ── */
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1000px;margin:0 auto}
.proof-card{
  background:var(--card);border:1px solid var(--border);border-radius:4px;
  padding:28px;
}
.proof-stars{color:var(--yellow);font-size:14px;margin-bottom:12px;letter-spacing:2px}
.proof-text{font-size:14px;color:var(--wh-a75);line-height:1.8;margin-bottom:20px;font-style:italic}
.proof-author{display:flex;align-items:center;gap:12px}
.proof-avatar{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--bll));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fh);font-size:13px;font-weight:800;color:#fff;flex-shrink:0;
}
.proof-name{font-family:var(--fh);font-size:14px;font-weight:700;color:var(--white)}
.proof-role{font-size:13px;color:var(--muted)}

/* ── FAQ ── */
.faq-list{max-width:720px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--border);padding:20px 0}
.faq-q{
  font-family:var(--fh);font-size:15px;font-weight:700;color:var(--white);
  cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  gap:16px;
}
.faq-q::after{content:'+';font-size:20px;color:var(--bll);flex-shrink:0;transition:transform .2s}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-a{font-size:14px;color:var(--wh-a65);line-height:1.8;margin-top:12px;display:none}
.faq-item.open .faq-a{display:block}

/* ── MEETING REQUEST ── */
.meeting-section{
  background:linear-gradient(135deg,rgba(198,155,60,.12),rgba(198,155,60,.05));
  border:1px solid rgba(198,155,60,.2);border-radius:6px;
  max-width:800px;margin:0 auto;padding:56px;text-align:center;
}
.meeting-section h2{font-family:var(--fh);font-size:34px;font-weight:800;color:var(--white);margin-bottom:12px}
.meeting-section p{font-size:15px;color:var(--wh-a65);line-height:1.8;max-width:480px;margin:0 auto 32px}
.meeting-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;text-align:left}
.meeting-form input,.meeting-form select,.meeting-form textarea{
  background:rgba(198,155,60,.07);border:1px solid var(--border);color:var(--white);
  font-family:var(--fb);font-size:14px;padding:12px 14px;outline:none;border-radius:3px;width:100%;
  transition:border-color .2s;
}
.meeting-form input::placeholder,.meeting-form textarea::placeholder{color:var(--muted)}
.meeting-form input:focus,.meeting-form select:focus,.meeting-form textarea:focus{border-color:var(--bll)}
.meeting-form select option{background:var(--navy3)}
.meeting-form .full{grid-column:1/-1}
.meeting-form textarea{resize:vertical;min-height:90px}
#meetingSuccess{display:none;padding:16px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.2);border-radius:3px;color:var(--green);font-size:14px;margin-top:12px}

/* ── FEEDBACK ── */
.feedback-float{
  position:fixed;right:24px;bottom:24px;z-index:200;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  color:#fff;border:none;border-radius:50px;
  padding:13px 22px;font-family:var(--fh);font-size:13px;font-weight:700;
  letter-spacing:.06em;cursor:pointer;
  box-shadow:0 8px 32px rgba(198,155,60,.5);
  display:flex;align-items:center;gap:8px;transition:all .2s;
}
.feedback-float:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(198,155,60,.7)}
.feedback-modal{
  position:fixed;inset:0;background:rgba(3,16,12,.97);backdrop-filter:blur(16px);
  z-index:300;display:none;align-items:center;justify-content:center;padding:20px;
}
.feedback-modal.open{display:flex}
.feedback-box{
  background:linear-gradient(145deg,#05130F,#05130F);
  border:1px solid rgba(198,155,60,.25);border-radius:4px;
  padding:36px;width:100%;max-width:480px;position:relative;
}
.feedback-box::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--blue2),var(--bll));
}
.feedback-close{
  position:absolute;top:14px;right:14px;width:28px;height:28px;
  border:1px solid rgba(143,166,155,.2);background:none;color:var(--muted);
  font-size:14px;cursor:pointer;border-radius:2px;display:flex;align-items:center;justify-content:center;
}
.feedback-close:hover{color:var(--white);border-color:rgba(244,234,222,.3)}
.feedback-box h3{font-family:var(--fh);font-size:20px;font-weight:700;color:var(--white);margin-bottom:6px}
.feedback-box p{font-size:14px;color:var(--muted);margin-bottom:20px;line-height:1.6}
.feedback-form-inner{display:flex;flex-direction:column;gap:10px}
.feedback-form-inner input,.feedback-form-inner select,.feedback-form-inner textarea{
  background:rgba(198,155,60,.07);border:1px solid var(--border);color:var(--white);
  font-family:var(--fb);font-size:14px;padding:11px 13px;outline:none;border-radius:2px;
  transition:border-color .2s;
}
.feedback-form-inner input:focus,.feedback-form-inner select:focus,.feedback-form-inner textarea:focus{border-color:var(--bll)}
.feedback-form-inner textarea{resize:vertical;min-height:100px}
.feedback-form-inner select option{background:var(--navy3)}
#feedbackSuccess{display:none;padding:14px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.2);border-radius:3px;color:var(--green);font-size:14px;text-align:center}

/* ── FOOTER ── */
footer{
  background:rgba(3,16,12,.98);border-top:1px solid var(--border);
  padding:60px 48px 32px;
}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer-brand{}
.footer-logo{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.footer-logo img{height:32px}
.footer-logo-text{font-family:var(--fh);font-size:14px;font-weight:800;color:var(--white)}
.footer-brand p{font-size:14px;color:var(--muted);line-height:1.7;max-width:280px}
.footer-col h4{font-family:var(--fh);font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.footer-col a{display:block;font-size:14px;color:var(--wh-a5);text-decoration:none;margin-bottom:10px;transition:color .2s}
.footer-col a:hover{color:var(--white)}
.footer-bottom{border-top:1px solid var(--border);padding-top:24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.footer-bottom p{font-size:13px;color:var(--muted)}
.footer-disclaimer{font-size:13px;color:rgba(143,166,155,.6);max-width:600px;line-height:1.6}

/* ── PRICING TOGGLE ── */
.ptoggle{
  padding:10px 22px;font-family:var(--fh);font-size:13px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;background:transparent;
  border:none;color:var(--wh-a45);cursor:pointer;border-radius:3px;
  transition:all .2s;white-space:nowrap;
}
.ptoggle.active{background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;box-shadow:0 4px 14px rgba(198,155,60,.35)}
.ptoggle:hover:not(.active){color:var(--white);background:rgba(198,155,60,.12)}
.ctoggle{
  padding:9px 22px;font-family:var(--fh);font-size:13px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;background:var(--navy3);
  border:1px solid var(--border);color:var(--wh-a5);cursor:pointer;border-radius:3px;
  transition:all .2s;
}
.ctoggle.active{background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;border-color:transparent;box-shadow:0 4px 14px rgba(198,155,60,.3)}
.ctoggle:hover:not(.active){color:var(--white);border-color:var(--bll)}
.section-divider{height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);margin:0 48px}

/* ── ANIMATIONS ── */
.fade-up{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.fade-up.visible{opacity:1;transform:none}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  nav{padding:14px 24px}
  .nav-links{display:none}
  section{padding:70px 24px}
  .hero{padding:60px 24px}
  .features-grid,.pricing-grid,.user-split,.proof-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr;gap:32px}
  .steps::before{display:none}
  .scores-showcase{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .free-banner{flex-direction:column;text-align:center}
  .meeting-form{grid-template-columns:1fr}
  footer{padding:48px 24px 24px}
}
html,body{background:#03100C!important;background-color:#03100C!important}
/* __landing-brand (2026-09-01)
   The front door on the app domain, and the only surface never brought onto the
   brand. Measured first: a flat #03100C ground with a faint grid where the app and
   the website both use the radial canvas, no mark, and NO LIGHT THEME AT ALL - zero
   [data-theme="light"] rules against 63 on the website, so it rendered identically
   whatever theme the visitor had chosen everywhere else.

   NO MARK ON THIS PAGE, on purpose. It is the hero view - the same reason the
   website's own home tab is excluded from it. Behind a display headline this size
   the silhouette competes with the words instead of sitting under them; it belongs
   on the quieter interior surfaces. The canvas is what carries the brand here.
   The type was already right - Didot for display matches the website's
   --font-display - so it is untouched.

   Light values are the website's own rather than invented: #F4EADE canvas, #EFE7D8
   deep, #FBF7EF mid, #0A1C17 ink, #4A5B54 sage, #80601F / #6E5219 gold. The card
   tint is the app's rgba(1,96,85,.17), since this page lives on the app.

   This element sits AFTER the two html,body{background:#03100C!important} rules
   above; equal specificity and both !important, so the later one wins. */
:root{ --seq-canvas: radial-gradient(135% 115% at 50% 33%, #013C38 0%, #013C38 45%, #06231e 74%, #05130F 100%);
  --wh-a3:rgba(244,234,222,.3);--wh-a35:rgba(244,234,222,.35);--wh-a4:rgba(244,234,222,.4);--wh-a45:rgba(244,234,222,.45);--wh-a5:rgba(244,234,222,.5);--wh-a55:rgba(244,234,222,.55);--wh-a6:rgba(244,234,222,.6);--wh-a65:rgba(244,234,222,.65);--wh-a7:rgba(244,234,222,.7);--wh-a75:rgba(244,234,222,.75);--wh-a78:rgba(244,234,222,.78);--wh-a8:rgba(244,234,222,.8);--wh-a82:rgba(244,234,222,.82);--wh-a85:rgba(244,234,222,.85);--wh-a88:rgba(244,234,222,.88);--wh-a9:rgba(244,234,222,.9);--wh-a92:rgba(244,234,222,.92); }
html:root[data-theme="light"]{
  --seq-canvas: radial-gradient(circle at 50% 50%, #FCF6EA 0%, #F9EDD4 22%, #F3E3C1 52%, #E5D0A5 80%, #DCC592 100%);
  --wh-a3:rgba(10,28,23,0.62);--wh-a35:rgba(10,28,23,0.62);--wh-a4:rgba(10,28,23,0.62);--wh-a45:rgba(10,28,23,0.62);--wh-a5:rgba(10,28,23,0.62);--wh-a55:rgba(10,28,23,0.62);--wh-a6:rgba(10,28,23,0.62);--wh-a65:rgba(10,28,23,0.65);--wh-a7:rgba(10,28,23,0.7);--wh-a75:rgba(10,28,23,0.75);--wh-a78:rgba(10,28,23,0.78);--wh-a8:rgba(10,28,23,0.8);--wh-a82:rgba(10,28,23,0.82);--wh-a85:rgba(10,28,23,0.85);--wh-a88:rgba(10,28,23,0.88);--wh-a9:rgba(10,28,23,0.9);--wh-a92:rgba(10,28,23,0.92);
  --navy:#F4EADE; --navy2:#EFE7D8; --navy3:#FBF7EF;
  --card:rgba(1,96,85,.17); --border:rgba(198,155,60,0.28);
  --white:#0A1C17; --muted:#4A5B54;
  --bll:#80601F; --blue2:#80601F; --blue:#6E5219;
  --orange:#80601F; --orange2:#6E5219;
  --green:#0C5B29; --red:#DC2626; --yellow:#CA8A04;
  color-scheme:light;
}
/* A VEIL over the canvas, not the bare canvas. This page puts its text directly on
   the ground rather than on cards, and the canvas centre (#80A099 dark, #FCF6EA light)
   is far lighter than the flat #03100C this copy was written for - measured, going
   bare took dark from 4 failing text nodes to 19. A flat veil composited over the
   radial keeps the dome visible as depth while giving the words back their ground. */
html:root, html:root body{
  background: var(--seq-canvas) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}
/* (removed: a body::before wash whose selector required an <html> inside an
   <html>, so it never matched - dead code, and a trap that would have put the
   orange cast back the moment someone corrected the selector) */
/* #pfosDocCtl is excluded as well as the mark: it is position:fixed, and this rule
   was resetting it to relative, which dropped the control into the flow and pushed
   it half off the top of the screen. */
html:root body > *:not(#seqMark):not(#pfosDocCtl){ position:relative; z-index:1; }

html:root[data-theme="light"], html:root[data-theme="light"] body{
  background: linear-gradient(rgba(244,234,222,.55),rgba(244,234,222,.55)), var(--seq-canvas) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}
#pfosDocCtl{ position:fixed; top:12px; right:12px; z-index:9999; display:flex; gap:6px; align-items:center; }
#pfosDocCtl button{
  font-size:13px; line-height:1; padding:6px 10px; border-radius:4px; cursor:pointer;
  min-width:34px; text-align:center;
  background:rgba(6,44,37,.72); border:1px solid rgba(198,155,60,.35); color:#E4C87A;
}
html:root[data-theme="light"] #pfosDocCtl button{
  background:transparent !important; border-color:rgba(198,155,60,.45) !important; color:#5B3F05 !important;
}

/* Light values for the surfaces that had hardcoded dark ones. */

/* The hero headline is a gradient FILL on transparent text, and it started at #fff -
   so on a pale ground the first third of the words disappeared. Same shape, but
   running from the deep ink into the website's light gold. */
html:root[data-theme="light"] .hero h1 span{
  /* background-IMAGE only. The shorthand also resets background-clip, and because it
     carried !important that reset won - so the gradient painted as a solid box over
     transparent letters instead of filling them. */
  background-image:linear-gradient(135deg,#0A1C17 0%,#6E5219 45%,#80601F 100%) !important;
}
/* the hero grid overlay is drawn for a dark ground; soften it on light */
html:root[data-theme="light"] .hero-grid{ opacity:.35 !important; }
/* the control sat on top of the GET STARTED button in the nav */
/* It is also excluded from the transparent sweep above (so the BUTTON keeps its own
   chip), which left the legacy body>* rule painting the WRAPPER #03100C - invisible
   on the dark ground under the button's own tint, a black square on ivory. The
   wrapper is only a flex container; the chip belongs to the button. */
#pfosDocCtl{ top:auto !important; bottom:16px !important; right:auto !important; left:16px !important;
  background:transparent !important; }

/* Hardcoded brand colours used as INK. They are fine on the dark ground and fail on
   the light one - the score numbers measured 1.25-1.66:1. Matched on the start of the
   attribute, or on ";color:", so a background-color declaration carrying the same hex
   is never caught. Light values are the website's golds and the solved deep green. */
html:root[data-theme="light"] [style^="color:#D9B45B"],
html:root[data-theme="light"] [style*=";color:#D9B45B"]{ color:#80601F !important; }
html:root[data-theme="light"] [style^="color:#C69B3C"],
html:root[data-theme="light"] [style*=";color:#C69B3C"]{ color:#6E5219 !important; }
html:root[data-theme="light"] [style^="color:#22C55E"],
html:root[data-theme="light"] [style*=";color:#22C55E"]{ color:#0C5B29 !important; }
html:root[data-theme="light"] .nl-wm b{ color:#80601F !important; }

/* The two rules near the top of this file paint EVERY container and every
   [class*="section"] with background:#03100C!important. That is what kept the page a
   flat slab in dark, and in light it stamped black bars across the section headers.
   Both go transparent so the one ground shows through the whole page - which is the
   point of having a canvas at all. */
html:root body > *:not(script):not(style):not(nav):not(footer):not(#pfosDocCtl),
/* All EIGHT selectors from that rule, not the three I first noticed. The one that
   mattered most is [class*="row"]: "user-card-eyeb-ROW" contains it, so a selector
   meant for layout rows was painting every eyebrow label #03100C - the black bars
   behind ON YOUR OWN and WHEN YOU WANT ONE, in both themes. Substring attribute
   selectors catch words inside words. */
html:root [class*="section"], html:root [class*="container"], html:root [class*="wrapper"],
html:root [class*="page-wrap"], html:root [class*="row"],
html:root [id*="page"], html:root [id*="content"], html:root [id*="main"]{
  background:transparent !important;
}
/* the surfaces that SHOULD read as surfaces keep theirs */
html:root .feature-card, html:root .pricing-card, html:root .user-card,
html:root .proof-card, html:root .score-card, html:root .stat-item,
html:root nav, html:root footer, html:root .feedback-modal{ background:var(--card) !important; }
html:root nav{ background:rgba(3,16,12,.90) !important; }
html:root[data-theme="light"] nav{ background:rgba(249,237,212,.92) !important; }

/* ── The mark, the card language and the buttons, matched to the app ────────── */

/* THE MARK. Owner asked for it here after all. It is behind everything (z-index 0,
   not -1: a negative z-index child paints before the background of a non-positioned
   block-level descendant and would hide under the body canvas). The hero headline is
   large and left-of-centre, so on this page the mark is pushed DOWN and sized a little
   smaller than on the app screens - it sits under the page rather than behind the
   words. */
#seqMark{
  position:fixed; inset:0; z-index:0; pointer-events:none; background:transparent;
  --mark: clamp(260px,44vmin,560px);
  filter: drop-shadow(0 0 calc(var(--mark)*.006) rgba(247,228,172,.30))
          drop-shadow(0 0 calc(var(--mark)*.022) rgba(226,186,96,.20))
          drop-shadow(0 0 calc(var(--mark)*.060) rgba(198,155,60,.11));
}
#seqMark i{
  position:absolute; inset:0; display:block; background-color:transparent;
  -webkit-mask:url(/sequence-mark.png) center 62% / var(--mark) auto no-repeat;
          mask:url(/sequence-mark.png) center 62% / var(--mark) auto no-repeat;
  background-image:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.13) 0%, rgba(255,255,255,.04) 40%, rgba(255,255,255,0) 66%),
    radial-gradient(circle at 72% 78%, rgba(0,0,0,.20) 0%, rgba(0,0,0,.06) 40%, rgba(0,0,0,0) 68%),
    var(--seq-canvas);
  background-position:center 62%,center 62%,center;
  background-size:var(--mark) auto,var(--mark) auto,cover;
  background-repeat:no-repeat,no-repeat,no-repeat;
}
html:root[data-theme="light"] #seqMark{
  filter: drop-shadow(0 0 calc(var(--mark)*.006) rgba(2,90,79,.30))
          drop-shadow(0 0 calc(var(--mark)*.026) rgba(2,90,79,.18))
          drop-shadow(0 0 calc(var(--mark)*.068) rgba(2,90,79,.10));
}
html:root[data-theme="light"] #seqMark i{
  background-image:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.50) 0%, rgba(255,255,255,.16) 40%, rgba(255,255,255,0) 66%),
    radial-gradient(circle at 72% 78%, rgba(120,95,40,.22) 0%, rgba(120,95,40,.07) 40%, rgba(120,95,40,0) 68%),
    linear-gradient(rgba(244,234,222,.55),rgba(244,234,222,.55)),
    var(--seq-canvas);
}

/* CARDS. The app's two values: gold over the dark ground, green over ivory. These
   replace a near-opaque rgba(10,31,24,.8) slab that read as a different material. */
html:root{ --card: rgba(11,48,38,.46); }
html:root[data-theme="light"]{ --card: rgba(1,96,85,.17); }
html:root .feature-card, html:root .pricing-card, html:root .user-card,
html:root .proof-card, html:root .score-card, html:root .stat-item,
html:root .scores-showcase, html:root .meeting-section, html:root .feedback-modal{
  background: var(--card) !important;
  border-color: rgba(198,155,60,.22) !important;
}

/* BUTTONS. The app's five-stop gold for primary actions, with the dark ink it uses on
   gold; ghosts become the translucent gold + gold border pairing rather than a flat
   transparent outline. The two-stop var(--blue),var(--blue2) gradients these had were
   a different gold entirely. */
html:root .btn-hero, html:root .btn-primary, html:root .btn-tier-primary,
html:root .btn-tier-orange, html:root .nav-cta .btn-primary{
  background: linear-gradient(135deg,#8A6A24 0%,#E4C87A 40%,#F3E3AE 52%,#C69B3C 68%,#7C5A1E 100%) !important;
  color:#2A1D05 !important; border:none !important;
  box-shadow:0 3px 16px rgba(198,155,60,.25) !important;
}
html:root .btn-hero:hover, html:root .btn-primary:hover, html:root .btn-tier-primary:hover{
  box-shadow:0 7px 26px rgba(198,155,60,.40) !important;
}
html:root .btn-hero-ghost, html:root .btn-outline, html:root .btn-tier-ghost{
  background: rgba(198,155,60,.08) !important;
  border:1px solid rgba(198,155,60,.35) !important;
  color: var(--bll) !important;
}
html:root .btn-hero-ghost:hover, html:root .btn-outline:hover, html:root .btn-tier-ghost:hover{
  background: rgba(198,155,60,.16) !important;
  border-color:#C69B3C !important;
}
html:root[data-theme="light"] .btn-hero-ghost,
html:root[data-theme="light"] .btn-outline,
html:root[data-theme="light"] .btn-tier-ghost{ color:#6E5219 !important; }

/* Ink re-solved for the new card. The gold tint is LIGHTER than the rgba(10,31,24,.8)
   slab it replaced, so the muted sage chosen for that slab stopped working on it -
   measured 2.62-2.70 in dark and 2.85-2.93 in light. Same lift the app uses.
   The score numbers are brand gold on a gold card, which is gold on gold; they take
   the lighter dark-mode gold and the deep light-mode gold instead. */
html:root{ --muted:#C1CEC8; }
html:root[data-theme="light"]{ --muted:#3E4741; }
html:root [style^="color:#D9B45B"], html:root [style*=";color:#D9B45B"]{ color:#E0C995 !important; }
html:root [style^="color:#C69B3C"], html:root [style*=";color:#C69B3C"]{ color:#E0C995 !important; }
html:root[data-theme="light"] [style^="color:#D9B45B"],
html:root[data-theme="light"] [style*=";color:#D9B45B"]{ color:#5B3F05 !important; }
html:root[data-theme="light"] [style^="color:#C69B3C"],
html:root[data-theme="light"] [style*=";color:#C69B3C"]{ color:#5B3F05 !important; }
html:root[data-theme="light"] [style^="color:#22C55E"],
html:root[data-theme="light"] [style*=";color:#22C55E"]{ color:#0B4A22 !important; }
html:root [style^="color:#22C55E"], html:root [style*=";color:#22C55E"]{ color:#5BE59A !important; }

/* ── The last dark slabs, measured rather than eyeballed ──────────────────────
   A per-element scan of both themes found the surfaces the pre-brand design left
   as flats. In DARK: nav was rgba(3,16,12,.95) - a near-black bar across the top -
   and .step-num / the billing-toggle shell were #0A1F18 blocks punched into the
   dome. In LIGHT: the CTAs, the active toggles and the proof avatars ran on
   var(--blue)/var(--orange), which this theme remaps to #80601F/#6E5219, so they
   painted as dark-brown slabs on ivory.

   Surfaces take the card language (the app topbar is var(--bg-card) + a gold
   hairline, so this matches it); primary actions take the same five-stop metal
   gold already used by .btn-hero / .btn-primary on this page. */
html:root nav{
  background: var(--card) !important;
  border-bottom:1px solid rgba(198,155,60,.22) !important;
}
html:root .step-num,
html:root .ctoggle:not(.active),
html:root #billing-toggle-wrap > div{
  background: var(--card) !important;
  border-color: rgba(198,155,60,.22) !important;
}
/* The remaining primary actions. Ink is the dark #2A1D05 the metal gold carries
   everywhere else, not #fff - white on this gold fails contrast in both themes. */
html:root .user-cta.advisor-cta, html:root .user-cta.client-cta,
html:root .ptoggle.active, html:root .ctoggle.active,
html:root .proof-avatar{
  background: linear-gradient(135deg,#8A6A24 0%,#E4C87A 40%,#F3E3AE 52%,#C69B3C 68%,#7C5A1E 100%) !important;
  color:#2A1D05 !important; border-color:transparent !important;
  box-shadow:0 3px 16px rgba(198,155,60,.25) !important;
}
/* The INACTIVE toggle label measured 2.8:1 against its shell. Subordinate to the
   gold active pill is right; illegible is not. Hover is restated because the rule
   it would otherwise lose to is not !important. */
html:root .ptoggle:not(.active), html:root .ctoggle:not(.active){
  color: var(--wh-a75) !important;
}
html:root .ptoggle:hover:not(.active), html:root .ctoggle:hover:not(.active){
  color: var(--white) !important;
}
html:root .user-cta.advisor-cta:hover, html:root .user-cta.client-cta:hover{
  box-shadow:0 7px 26px rgba(198,155,60,.40) !important;
}

/* ── The hero headline is the one string the dictionary does not carry ─────────
   "Personal Financial Operating System" -> "Sistema Operativo Financiero Personal"
   reverses the word order completely. The gradient span is display:inline-block,
   so the <br> is load-bearing: it is what keeps "Your Personal Financial" on one
   line rather than letting the span drop whole to a line of its own (measured -
   removing it turned a 2-line headline into 3). Translating the two halves
   node-by-node would therefore mean putting "Personal Financial" = "Sistema
   Operativo" into a dictionary shared by the ENTIRE app, where it would silently
   mistranslate that phrase on any other surface that ever renders it.

   So this headline alone carries both languages in the markup and switches on the
   lang attribute the i18n engine already sets on <html>. English stays the
   default (<html lang="en">), Spanish gets its line break placed deliberately
   rather than inherited from English, and nothing else in the app is put at risk.
   The wrappers are <i> because .hero h1 span is the gradient rule - a nested span
   would inherit it. */
.hero h1 > i{ font-style:normal; }
.hero h1 .h1-es{ display:none; }
html[lang="es"] .hero h1 .h1-en{ display:none; }
html[lang="es"] .hero h1 .h1-es{ display:inline; }

/* Spanish is the longer language, and the hero stat strip is a fixed 580px box
   with overflow:hidden and four flex:1 columns. MEASURED: "Puntuaciones
   financieras" pushes the row to 593px of content in a 578px box, clipping the
   last column's border. The room is taken from padding and tracking, and ONLY
   under lang="es" - the English hero has been signed off pixel by pixel and does
   not move. */
html[lang="es"] .stat-item{ padding-left:12px; padding-right:12px; }
html[lang="es"] .stat-lbl{ letter-spacing:.05em; }

/* ── MOBILE ────────────────────────────────────────────────────────────────────
   This page had exactly ONE breakpoint (max-width:900px) and nothing below it,
   so it did not fit a phone: MEASURED at a 390px viewport, document.scrollWidth
   was 480 - the page scrolled sideways. Three separate causes, each measured
   rather than guessed:

   1. .hero-content is a FLEX ITEM of .hero, and a flex item will not shrink
      below its min-content width. That pinned it at 508px inside a 342px box.
      min-width:0 releases it (508 -> 342 measured).
   2. .nav-cta is 198px of buttons and the logo lockup another ~234px; with the
      nav's padding that is ~464px of content, which IS the 480 floor. Both give
      up room here - type size, tracking and padding - rather than either being
      dropped, because both are controls.
   3. .hero-stats is four flex:1 columns whose min-content is 90px each = 363px
      in a 342px box. It becomes a 2x2 grid, with the dividers re-drawn for two
      columns instead of four.

   Nothing here touches any width above 560px. */
@media(max-width:560px){
  /* the flex-item floor - the single biggest cause */
  .hero-content{ min-width:0; }

  /* frame. ELEVEN of the twelve sections carry their padding as an INLINE style
     ("padding:100px 48px"), which beats a stylesheet rule - so the section rule
     needs !important or it silently does nothing on almost every section. */
  /* flex-wrap, rather than a width where the nav is told to wrap: the row then
     breaks exactly when it no longer fits, whatever the language. MEASURED -
     English fits on one row at 390px, Spanish ("Iniciar sesión" + "Comenzar")
     needs 5px more than there is, so it drops the buttons to a second row on its
     own instead of overflowing. justify-content stays space-between, so the
     single-row case is unchanged. */
  nav{ padding:12px 16px; gap:10px; flex-wrap:wrap; row-gap:10px; }
  section{ padding:56px 16px !important; }

  /* The couples split is an inline "grid-template-columns:1fr 1fr" on a div with
     no class, so it survived the ≤900 collapse. At 360px its two columns were
     ~96px wide and the cards inside were being clipped (measured). */
  div[style*="grid-template-columns:1fr 1fr"]{ grid-template-columns:1fr !important; }
  footer{ padding:40px 16px 20px; }
  .hero{ padding:44px 16px 36px; min-height:auto; }

  /* the nav: the lockup and the two buttons each give up a little */
  .nav-logo-inner{ gap:8px; }
  .nav-emblem{ width:34px !important; height:34px !important; }
  .nl-wm{ font-size:12.5px; letter-spacing:.14em; }
  .nav-logo-sub{ font-size:10px; letter-spacing:.14em; }
  .nav-cta{ gap:8px; }
  .btn-outline, .btn-primary{ padding:8px 12px; font-size:11px; letter-spacing:.04em; }

  /* hero */
  .hero-badge{ font-size:10.5px; letter-spacing:.08em; padding:6px 12px;
    flex-wrap:wrap; justify-content:center; text-align:center; }
  .hero-sub{ font-size:12px; letter-spacing:.14em; }
  .hero-actions{ gap:10px; margin-bottom:40px; }
  .btn-hero, .btn-hero-ghost{ padding:14px 18px; font-size:12.5px; width:100%;
    justify-content:center; }

  /* the stat strip: 4 columns -> 2x2, dividers redrawn for the new grid */
  .hero-stats{ display:grid; grid-template-columns:1fr 1fr; max-width:100%; }
  .stat-item{ min-width:0; padding:14px 10px; border-right:none;
    border-bottom:1px solid var(--border); }
  .stat-item:nth-child(odd){ border-right:1px solid var(--border); }
  .stat-item:nth-last-child(-n+2){ border-bottom:none; }
  .stat-lbl{ font-size:11px; letter-spacing:.05em; }

  /* the ≤900 block leaves these at two columns, which is too narrow here */
  .steps, .scores-showcase, .footer-grid{ grid-template-columns:1fr; }
}

/* MEASURED at 390px: 358px of room, and the logo lockup (187) + gap (10) + the
   two buttons (177) = 374, so the nav wrapped to a 101px sticky header even in
   English. Dropping the "Sequence Platform" DESCRIPTOR takes the lockup to 166,
   which fits on one 59px row (353 <= 358) - in Spanish too ("Iniciar sesión" +
   "Comenzar" is narrower still, at 165). It is a descriptor, not a control:
   both buttons stay. Above 420 the lockup fits whole, so it keeps its
   descriptor. */
@media(max-width:420px){
  .nav-logo-sub{ display:none; }
  /* Spanish needs a little more than English here: "Iniciar sesión" + "Comenzar"
     is 208px of buttons against English's 177, which pushed the row to wrap and
     doubled the sticky header to 101px. The 31px comes out of the two buttons'
     own padding and tracking, under lang="es" only, so both languages keep the
     one-row 59px nav. */
  html[lang="es"] .btn-outline, html[lang="es"] .btn-primary{
    padding:8px 8px; font-size:10px; letter-spacing:.01em;
  }
}

/* The smallest phones need more than tightening: below 380 even the trimmed
   lockup and the buttons cannot share a row (328 of room, 353 of content), so the
   nav is centred and the buttons take a deliberate second row rather than the
   type being shrunk to illegibility. */
@media(max-width:380px){
  nav{ justify-content:center; padding:10px 12px; }
  .nl-wm{ font-size:11.5px; letter-spacing:.1em; }
  .nav-cta{ width:100%; justify-content:center; }
  section{ padding:48px 12px !important; }
  .hero{ padding:40px 12px 32px; }
}

/* ── SEO-page additions (not on the landing page) ── */
.features-grid--4{grid-template-columns:repeat(2,1fr);max-width:820px}
@media(max-width:900px){.features-grid--4{grid-template-columns:1fr}}
/* the nav logo is a home link on these pages; keep the wordmark its own colours */
.nav-logo a,.nav-logo a:visited{color:inherit;text-decoration:none}

/* Menu button: the links fold into it whenever they do not fit (pfos-public.v1.js measures). */
.nav-links a{white-space:nowrap}
.nav-menu-btn{display:none;align-items:center;gap:8px;cursor:pointer;line-height:1.2}
.nav-menu-btn:focus-visible{outline:2px solid var(--bll);outline-offset:2px}
.nav-menu-ico{font-size:15px;line-height:1}
nav.nav-compact .nav-menu-btn{display:inline-flex}
nav.nav-compact .nav-links{display:none;position:absolute;top:100%;right:16px;flex-direction:column;align-items:stretch;gap:0;min-width:220px;padding:8px 0;margin-top:6px;background:linear-gradient(var(--card),var(--card)),var(--navy);border:1px solid var(--border);border-radius:4px;box-shadow:0 18px 40px rgba(0,0,0,.35);z-index:91}
nav.nav-compact.nav-open .nav-links{display:flex}
nav.nav-compact .nav-links a{padding:11px 20px;font-size:15px}
nav.nav-compact .nav-links a:focus-visible{outline:2px solid var(--bll);outline-offset:-2px}
@media(max-width:700px){.nav-menu-lbl{display:none}.nav-menu-btn{padding-left:12px;padding-right:12px}}
@media(max-width:900px){nav{flex-wrap:wrap;row-gap:10px}}
/* the menu bar keeps a high layer: every later block is z-index:1, so the dropdown would paint under the page */
html:root body > nav{ z-index:90 !important; }

/* calculator cards — the same rules as the landing page's Free Calculators section */
.calc-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:1000px;margin:0 auto;text-align:left}
.calc-link{display:block;background:var(--card);border:1px solid var(--border);border-radius:4px;padding:16px 20px;text-decoration:none;transition:border-color .2s,transform .2s}
.calc-link:hover,.calc-link:focus-visible{border-color:rgba(198,155,60,.3);transform:translateY(-2px)}
.calc-link:focus-visible{outline:2px solid var(--bll);outline-offset:2px}
.calc-link-name{display:block;font-family:var(--fh);font-size:16px;font-weight:700;color:var(--white);margin-bottom:4px}
.calc-link-desc{display:block;font-size:14px;color:var(--wh-a6);line-height:1.6}
@media(max-width:900px){.calc-list{grid-template-columns:1fr}}

/* "Keep exploring" links: an even grid instead of a wrapping row */
.link-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:900px;margin:8px auto 0}
.link-grid .btn-hero-ghost{display:flex;align-items:center;justify-content:center;text-align:center;min-height:56px;padding-left:12px;padding-right:12px;margin:0}
@media(max-width:700px){.link-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}