/* ─────────────────────────────────────────────────────────
   © 2026 Hustlin' For You · hustlin.org · All rights reserved.
   Proprietary stylesheet — unauthorized copying, reproduction,
   or redistribution of this file, in whole or in part, is
   prohibited without prior written permission.
   ───────────────────────────────────────────────────────── */

/* ─── TOKENS ──────────────────────────────────────── */
:root {
  --dark:       #0A0A0A;
  --dark-mid:   #141414;
  --dark-card:  #1B1B1B;
  --amber:      #F0C030;
  --amber-lt:   #FFE668;
  /* Amber at full brightness is a dark-background colour: on the cream
     surfaces it drops to ~1.9:1 and small text in it is unreadable. This is
     the same hue taken down to a bronze that clears WCAG AA on cream, for
     amber-coloured text, dots and hairlines sitting on light cards. */
  --amber-ink:  #7A4E00;
  --amber-mid:  #B3810F;
  --orange:     #E8720E;
  --green:      #2DA02D;
  --green-lt:   #5EDD5E;
  --red:        #FF2222;
  --cream:      #F6F1E4;
  --white:      #FBF7EC;
  --text-dark:  #251F13;
  --text-body:  #493F2B;
  --text-muted: #6B6047;
  --border:     #E6DCC2;
  --r-sm: 8px; --r-md: 16px; --r-lg: 24px;
  --sh-sm: 0 2px 8px rgba(0,0,0,.07);
  --sh-md: 0 8px 32px rgba(0,0,0,.11);
  --f-display: 'Impact', 'Arial Narrow Bold', 'Arial Black', sans-serif;
  --f-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --f-mono:    'Space Mono', monospace;
}
/* — heading defaults — */
h1,h2,h3,h4,h5,h6{font-family:var(--f-body);letter-spacing:-.01em;line-height:1.25;color:var(--text-dark);-webkit-text-stroke:0;text-shadow:none;font-weight:700}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:130%}
body{font-family:var(--f-body);color:var(--text-dark);background:var(--white);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
button{cursor:pointer;font-family:var(--f-body);border:none;background:none}
input,select{font-family:var(--f-body)}
a{text-decoration:none}

/* ─── NAV ─────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(10,10,10,.97);backdrop-filter:blur(18px);
  border-bottom:2px solid rgba(240,192,48,.45);
  padding:0 40px;height:108px;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
}
.nav-logo{font-family:var(--f-body);font-size:1.35rem;font-weight:800;color:#fff;letter-spacing:-.03em}
.nav-logo span{color:var(--amber)}
@media(max-width:900px){
  .nav{padding:0 16px;height:76px;gap:10px}
  .nav > a > img{height:44px!important}
  .nav-stages{
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    justify-content:flex-start;flex:1;min-width:0;
    scrollbar-width:none;
  }
  .nav-stages::-webkit-scrollbar{display:none}
  .nav-stages a{flex-shrink:0}
  .nav-stages a img{height:44px!important}
}
@media(max-width:480px){
  .nav{height:64px;padding:0 12px}
  .nav > a > img{height:36px!important}
  .nav-stages a img{height:36px!important}
}
.nav-stages{display:flex;align-items:center;gap:4px}
.nav-stage{
  display:flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:28px;
  color:rgba(255,255,255,.45);font-size:.98rem;font-weight:600;
  transition:all .2s;cursor:pointer;letter-spacing:.01em;
}
.nav-stage:hover{color:rgba(255,255,255,.75);background:rgba(255,255,255,.05)}
.nav-stage.active{background:rgba(240,192,48,.15);color:var(--amber);border:1px solid rgba(240,192,48,.3)}
.nav-stage-num{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:700;
  background:rgba(255,255,255,.1);color:rgba(255,255,255,.45);
  flex-shrink:0;
}
.nav-stage.active .nav-stage-num{background:var(--amber);color:#000}
.nav-cta{
  background:var(--amber);color:var(--dark);
  padding:11px 24px;border-radius:var(--r-sm);
  font-size:.88rem;font-weight:700;transition:all .2s;
}
.nav-cta:hover{background:var(--amber-lt);transform:translateY(-1px)}

/* ─── ACCOUNT NAV (sign-in state / sign out) ────────── */
.hfy-account{position:relative;margin-left:6px;flex-shrink:0}
.hfy-account-btn{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  color:#fff;padding:7px 14px 7px 7px;border-radius:28px;
  font-size:.85rem;font-weight:600;transition:all .2s;cursor:pointer;
}
.hfy-account-btn:hover{background:rgba(255,255,255,.12);border-color:rgba(240,192,48,.4)}
.hfy-account-avatar{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  background:var(--amber);color:var(--dark);
  display:flex;align-items:center;justify-content:center;
  font-size:.78rem;font-weight:800;font-family:var(--f-mono);
}
.hfy-account-chevron{color:rgba(255,255,255,.4);font-size:.7rem;transition:transform .2s}
.hfy-account.open .hfy-account-chevron{transform:rotate(180deg)}
.hfy-account-menu{
  position:absolute;top:calc(100% + 10px);right:0;min-width:220px;
  background:var(--dark-card);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-sm);box-shadow:var(--sh-md);
  padding:8px;display:none;z-index:200;
}
.hfy-account.open .hfy-account-menu{display:block}
.hfy-account-email{
  padding:8px 10px 10px;font-size:.76rem;color:rgba(255,255,255,.4);
  border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:6px;
  overflow-wrap:break-word;
}
.hfy-account-signout{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:9px 10px;border-radius:6px;
  font-size:.85rem;font-weight:700;color:#fff;
  background:none;transition:all .15s;text-align:left;
}
.hfy-account-signout:hover{background:rgba(255,80,80,.12);color:#ff8080}
@media(max-width:600px){
  .hfy-account-btn span.hfy-account-label{display:none}
  .hfy-account-btn{padding:5px}
}

/* ─── HERO ─────────────────────────────────────────── */
.hero{
  background:var(--dark);
  display:flex;align-items:center;
  padding:60px 40px 120px;position:relative;overflow:hidden;
}
@media(max-width:900px){.hero{padding:50px 24px 80px}}
@media(max-width:600px){.hero{padding:40px 18px 60px}}
@media(max-width:480px){.hero{padding:40px 18px 60px}}
/* Fix: below 1024px the hero content stacks into one tall column. With
   align-items:center on a min-height:100vh flex container, tall stacked
   content gets vertically centered across the FULL screen height, pushing
   its top above y:0 and behind the fixed nav — clipping the heading.
   Below this breakpoint we let content flow from the top (after the nav
   padding) instead of forcing it to center. */
@media(max-width:1024px){
  .hero{min-height:auto;align-items:flex-start}
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 15% 60%,rgba(61,122,88,.18) 0%,transparent 55%),
    radial-gradient(ellipse at 85% 15%,rgba(232,160,32,.1) 0%,transparent 50%);
}
.hero-wrap{
  max-width:1200px;margin:0 auto;width:100%;
  display:grid;grid-template-columns:1fr 390px;gap:72px;
  align-items:center;position:relative;z-index:1;
}
@media(max-width:900px){.hero-wrap{grid-template-columns:1fr;gap:40px}}
@media(max-width:600px){.hero-wrap{gap:24px}}
/* Fix: grid tracks won't shrink below the min-content width of their
   contents by default. The hero-stats row below (four items in an
   unwrapped flex row) was forcing this whole column wider than the
   viewport on phones, which pushed the heading/paragraph text to wrap
   at that wider width and get sliced off at the screen edge. */
.hero-wrap > div:first-child{min-width:0}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(232,160,32,.1);border:1px solid rgba(232,160,32,.28);
  color:var(--amber);padding:5px 14px;border-radius:20px;
  font-size:.76rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  margin-bottom:26px;
}
.hero-h1{
  font-family:var(--f-display);font-size:clamp(2.8rem,4.6vw,4.4rem);
  font-weight:900;color:#fff;line-height:1.04;letter-spacing:.005em;
  margin-bottom:22px;
  -webkit-text-stroke:2px #000;
  text-shadow:1px 1px 0 rgba(255,255,255,.18),2px 2px 0 rgba(0,0,0,.55),4px 5px 4px rgba(0,0,0,.55);
}
.hero-h1 em{
  font-style:normal;color:var(--amber);
  -webkit-text-stroke:3px #0a0500;
  text-shadow:1px 1px 0 #d4a010,2px 2px 0 #b88008,3px 3px 0 #9a6200,4px 4px 0 #7a4a00,5px 6px 3px rgba(0,0,0,.75),0 0 26px rgba(240,192,48,.55),0 0 50px rgba(240,192,48,.25);
}
.hero-sub{
  font-size:1.1rem;color:rgba(255,255,255,.72);
  line-height:1.72;margin-bottom:38px;max-width:510px;
}
.cta-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.btn-a{
  background:var(--amber);color:var(--dark);
  padding:15px 32px;border-radius:var(--r-sm);
  font-size:.97rem;font-weight:700;transition:all .2s;
  display:inline-flex;align-items:center;gap:8px;
}
.btn-a:hover{background:var(--amber-lt);transform:translateY(-2px);box-shadow:0 8px 24px rgba(232,160,32,.38)}
.btn-b{
  color:var(--amber);font-size:.94rem;font-weight:700;
  display:inline-flex;align-items:center;gap:6px;transition:all .2s;
  letter-spacing:.01em;
}
.btn-b:hover{color:var(--amber-lt);gap:9px}
.hero-stats{
  display:flex;flex-wrap:wrap;gap:40px;margin-top:52px;
  padding-top:36px;border-top:1px solid rgba(255,255,255,.09);
}
@media(max-width:900px){.hero-stats{gap:28px;margin-top:36px;padding-top:24px}}
@media(max-width:600px){.hero-stats{gap:20px;margin-top:24px;padding-top:18px}}
.stat-val{font-family:var(--f-body);font-size:1.9rem;font-weight:800;color:#fff;letter-spacing:-.02em}
.stat-val span{color:var(--amber)}
.stat-lbl{font-size:.76rem;color:rgba(255,255,255,.38);margin-top:2px;text-transform:uppercase;letter-spacing:.05em}

/* Hero journey card */
.journey-card{
  background:var(--dark-card);border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-lg);padding:30px;
}
@media(max-width:900px){.journey-card{padding:22px}}
@media(max-width:600px){.journey-card{padding:18px}}
.journey-card-title{
  font-family:var(--f-body);font-size:.95rem;font-weight:700;letter-spacing:-.01em;
  color:#fff;margin-bottom:22px;
}
.j-step{
  display:flex;align-items:flex-start;gap:14px;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.055);
}
.j-step:last-child{border-bottom:none}
.j-num{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.76rem;font-weight:700;font-family:var(--f-mono);
}
.j-step .j-num{display:none}
.j-num.now{background:var(--amber);color:var(--dark)}
.j-num.later{background:rgba(255,255,255,.05);color:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.07)}
.j-name{font-size:.88rem;font-weight:600;color:#fff;margin-bottom:1px}
.j-num.later~.j-info .j-name{color:rgba(255,255,255,.28)}
.j-desc{font-size:.75rem;color:rgba(255,255,255,.3)}
.j-num.now~.j-info .j-name{color:var(--amber)}
.j-num.now~.j-info .j-desc{color:rgba(232,160,32,.55)}
.j-name-img{height:38px;width:auto;display:block;margin-bottom:6px;transition:opacity .2s,filter .2s}
.j-num.later~.j-info .j-name-img{opacity:.3;filter:grayscale(70%)}
.j-num.now~.j-info .j-name-img{opacity:1;filter:none}
.journey-card .btn-a{width:100%;justify-content:center;margin-top:22px}

/* ─── SHARED SECTION ─────────────────────────────── */
.sec{padding:88px 40px}
@media(max-width:900px){.sec{padding:64px 24px}}
@media(max-width:600px){.sec{padding:44px 18px}}
.sec-inner{max-width:1400px;margin:0 auto}
.sec-eye{font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green);margin-bottom:14px}
.sec-h2{
  font-family:var(--f-body);font-size:clamp(1.6rem,2.6vw,2.3rem);font-weight:700;
  color:var(--text-dark);line-height:1.25;letter-spacing:-.01em;margin-bottom:14px;
  -webkit-text-stroke:0;text-shadow:none;
}
@media(max-width:600px){.sec-h2{margin-bottom:10px}}
.sec-sub{font-size:1rem;color:var(--text-muted);line-height:1.7;max-width:540px}

/* ─── FOR WHO ─────────────────────────────────────── */
.for-who{background:var(--cream)}
.fw-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;margin-top:60px;align-items:start}
@media(max-width:900px){.fw-grid{grid-template-columns:1fr;gap:40px;margin-top:40px}}
@media(max-width:600px){.fw-grid{gap:28px;margin-top:28px}}
.fw-cards{display:flex;flex-direction:column;gap:14px}
.persona{
  background:var(--white);border-radius:var(--r-md);padding:22px;
  border:1px solid var(--border);display:flex;gap:14px;align-items:flex-start;
  transition:all .2s;
}
.persona:hover{border-color:var(--amber);box-shadow:var(--sh-sm);transform:translateX(4px)}
.p-icon{
  width:42px;height:42px;border-radius:var(--r-sm);flex-shrink:0;
  background:rgba(232,160,32,.1);display:flex;align-items:center;justify-content:center;font-size:1.25rem;
}
.p-name{font-size:.92rem;font-weight:700;color:var(--text-dark);margin-bottom:3px}
.p-desc{font-size:.82rem;color:var(--text-muted);line-height:1.5}
.fw-panel{background:var(--dark);border-radius:var(--r-lg);padding:44px 38px}
@media(max-width:900px){.fw-panel{padding:32px 28px}}
@media(max-width:600px){.fw-panel{padding:24px 20px}}
.fw-quote{
  font-family:var(--f-body);font-size:1.4rem;font-weight:700;letter-spacing:-.02em;
  color:#fff;line-height:1.32;margin-bottom:22px;
}
.fw-quote em{font-style:normal;color:var(--amber)}
.fw-body{font-size:.87rem;color:rgba(255,255,255,.43);line-height:1.75}
.fw-checks{display:flex;flex-direction:column;gap:14px;margin-top:28px}
.fw-check{display:flex;gap:11px;align-items:flex-start}
.chk-dot{
  width:19px;height:19px;border-radius:50%;flex-shrink:0;
  background:rgba(61,122,88,.2);border:1px solid rgba(61,122,88,.45);
  color:var(--green-lt);font-size:.68rem;
  display:flex;align-items:center;justify-content:center;margin-top:2px;
}
.chk-txt{font-size:.86rem;color:rgba(255,255,255,.65);line-height:1.5}

/* ─── ROADMAP ─────────────────────────────────────── */
.roadmap{background:var(--white)}
.stages{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:52px}
@media(max-width:900px){.stages{gap:12px;margin-top:36px}}
@media(max-width:600px){.stages{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:24px}}
.s-card{
  border-radius:var(--r-md);padding:26px 18px;position:relative;overflow:hidden;transition:all .25s;
  background:var(--cream);border:1px solid var(--border);
  display:block;text-decoration:none;color:inherit;cursor:pointer;
}
@media(max-width:900px){.s-card{padding:18px 14px}}
@media(max-width:600px){.s-card{padding:14px 12px}}
.s-card:hover{transform:translateY(-3px);box-shadow:var(--sh-sm)}
.s-card.live:hover{box-shadow:0 10px 30px rgba(240,192,48,.18)}
.s-card.locked:hover{border-color:var(--amber)}
.s-card.live{background:var(--dark);border-color:transparent}
.s-card.locked{background:var(--cream);border:1px solid var(--border)}
/* Default (pre-JS / no modifier class) state renders like the locked
   card — dark text on cream — so cards are never invisible white-on-white
   during the brief window before app.js applies .live/.locked. */
.s-num{font-family:var(--f-mono);font-size:.72rem;font-weight:700;color:var(--text-muted);margin-bottom:10px}
.live .s-num{color:var(--amber)}
.s-name{font-family:var(--f-body);font-size:1.2rem;font-weight:700;margin-bottom:7px;color:var(--text-body);letter-spacing:normal;-webkit-text-stroke:0;text-shadow:none}
.live .s-name{color:#fff}
.s-tag{font-size:.78rem;color:var(--text-muted);line-height:1.5}
.live .s-tag{color:rgba(255,255,255,.42)}

/* Lock/CTA area — small caption line (price/terms) sitting above a
   compact, auto-width pill button. The button matches the site's real
   CTA buttons (.nav-cta/.btn-a) instead of being a stretched colored
   block, so it reads as "one small action" rather than an ad banner. */
.s-lock{margin-top:16px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.s-lock-caption{
  font-family:var(--f-mono);font-size:.66rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-muted);
}
.live .s-lock-caption{color:rgba(255,255,255,.4)}
.s-lock-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 18px;border-radius:var(--r-sm);
  font-size:.8rem;font-weight:700;transition:all .2s;
  background:var(--amber);color:var(--dark);
}
.s-card:not(.live):hover .s-lock-btn{background:var(--amber-lt);transform:translateY(-1px)}
.s-lock-btn--free{background:rgba(45,160,45,.15);color:var(--green-lt);border:1px solid rgba(45,160,45,.4)}
.s-card.live:hover .s-lock-btn--free{background:rgba(45,160,45,.25);border-color:var(--green-lt)}
.s-lock-arrow{display:inline-block;transition:transform .2s}
.s-card:hover .s-lock-arrow{transform:translateX(3px)}
.s-card.live .s-lock-top{color:var(--green-lt);font-size:.78rem}
.s-card.live .s-lock-cta{color:var(--green-lt)}

/* ─── STAGE 1 CONTENT ────────────────────────────── */
.stage-content{background:var(--cream)}
.stage-banner{
  background:var(--dark);border-radius:var(--r-lg);padding:44px;
  margin-bottom:40px;display:flex;align-items:flex-end;
  justify-content:space-between;position:relative;overflow:hidden;
}
@media(max-width:900px){.stage-banner{padding:32px;margin-bottom:28px}}
@media(max-width:600px){.stage-banner{padding:24px;margin-bottom:20px}}
.stage-banner::before{
  content:'1';position:absolute;right:40px;top:-20px;
  font-family:var(--f-display);font-size:10rem;font-weight:900;
  color:rgba(255,255,255,.025);line-height:1;pointer-events:none;
}
.s-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(232,160,32,.14);border:1px solid rgba(232,160,32,.3);
  color:var(--amber);padding:5px 12px;border-radius:20px;
  font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:14px;
}
/* h1 and h2 both listed: the stage banner title is the page's <h1> on the
   public pages (disability-wealth-guide, stage-1-survive) and stays an <h2>
   on the gated stage pages, which sit under learn.html's own heading. Same
   rule serves both so the two never drift apart visually.

   margin is pinned to .83em — the browser default for <h2>, which is what this
   rule relied on before the h1 existed. <h1> defaults to .67em instead, so
   without this the promoted heading would sit tighter against the badge above
   and the paragraph below. Stated explicitly rather than inherited so the two
   tags render identically. */
.stage-banner h1,.stage-banner h2{
  font-family:var(--f-body);font-size:2.6rem;font-weight:800;letter-spacing:-.03em;
  color:#fff;letter-spacing:-.02em;line-height:1.05;margin:.83em 0;
}
.stage-banner p{color:rgba(255,255,255,.46);margin-top:10px;font-size:.96rem;max-width:460px}
.prog-wrap{text-align:right;flex-shrink:0}
.prog-lbl{font-size:.72rem;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.prog-ring{width:76px;height:76px;position:relative}
.prog-ring svg{transform:rotate(-90deg)}
.prog-bg{stroke:rgba(255,255,255,.07)}
.prog-fill{
  stroke:var(--amber);stroke-dasharray:207.3;stroke-dashoffset:207.3;
  stroke-linecap:round;transition:stroke-dashoffset .9s ease;
}
.prog-txt{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--f-mono);font-size:.95rem;font-weight:700;color:var(--amber);
}

/* — course layout: sidebar + content panel — */
.course-layout{display:flex;gap:26px;align-items:flex-start;margin-bottom:14px}
.course-sidebar{
  width:320px;flex-shrink:0;position:sticky;top:124px;
  max-height:calc(100vh - 150px);overflow-y:auto;
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);
  padding:16px;
}
.cs-label{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);margin-bottom:12px;padding:0 4px}
.cs-list{display:flex;flex-direction:column;gap:4px}
.cs-item{
  position:relative;display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:var(--r-sm);cursor:pointer;
  transition:all .18s;border:1px solid transparent;
}
.cs-item:hover{background:rgba(232,160,32,.06)}
.cs-item.cs-active{background:rgba(232,160,32,.1);border-color:rgba(232,160,32,.3)}
.cs-num{font-family:var(--f-mono);font-size:.66rem;font-weight:700;color:var(--text-muted);flex-shrink:0;width:18px}
.cs-ico{font-size:1rem;flex-shrink:0}
.cs-txt{font-size:.83rem;font-weight:600;color:var(--text-dark);line-height:1.3;flex:1}
.cs-check{
  display:none;width:17px;height:17px;border-radius:50%;flex-shrink:0;
  background:var(--amber);color:var(--dark);font-size:.66rem;font-weight:800;
  align-items:center;justify-content:center;
  box-shadow:0 0 6px rgba(232,160,32,.5);
}
.cs-item.cs-done .cs-check{display:flex}
.course-main{flex:1;min-width:0}
@media(max-width:900px){
  .course-layout{flex-direction:column}
  .course-sidebar{width:100%;position:static;max-height:none;padding:12px}
  .cs-list{flex-direction:row;align-items:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px;gap:8px;scroll-snap-type:x proximity}
  .cs-item{
    flex-shrink:0;width:150px;max-width:150px;min-width:150px;
    flex-direction:column;align-items:flex-start;gap:4px;
    scroll-snap-align:start;
  }
  .cs-txt{white-space:normal;line-height:1.25;font-size:.78rem}
  .cs-check{position:absolute;top:8px;right:8px}
}

/* ─── MOBILE MODULE RAIL — "there are more modules" affordance ──────────
   On phones the sidebar collapses into a horizontal strip and it read as
   a static two-card box: nothing signalled that modules 3-8 existed.
   app.js wraps .cs-list in .cs-rail and injects .cs-railhead + .cs-dots,
   so every stage page (FL + TA + guides) picks this up with no per-page
   HTML edits. All of it is inert above 900px. */
.cs-rail{position:relative}
.cs-railhead,.cs-dots{display:none}

@media(max-width:900px){
  .cs-railhead{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    margin:0 0 8px;padding:0 2px;
  }
  .csh-label{
    font-family:var(--f-mono);font-size:.68rem;font-weight:700;
    letter-spacing:.09em;text-transform:uppercase;color:var(--text-body);
  }
  .csh-count{color:var(--amber-ink)}
  .csh-hint{
    display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
    font-family:var(--f-mono);font-size:.62rem;font-weight:700;
    letter-spacing:.06em;text-transform:uppercase;color:var(--amber-ink);
    background:rgba(240,192,48,.28);border:1px solid var(--amber-mid);
    border-radius:999px;padding:3px 9px;
    transition:opacity .3s ease;
  }
  .csh-hint i{font-style:normal;display:inline-block;animation:csNudge 1.7s ease-in-out infinite}
  .cs-railhead.cs-touched .csh-hint{opacity:0}
  @keyframes csNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
  @media(prefers-reduced-motion:reduce){.csh-hint i{animation:none}}

  /* Edge fades. Narrow and short: a wide soft fade washed the peeking card
     out to near-invisible, which lost the whole point — the reader has to
     see a real, legible card getting clipped. Solid for the first third,
     then out fast, so only the last ~20px of the card is veiled. */
  .cs-rail::before,.cs-rail::after{
    content:"";position:absolute;top:0;bottom:12px;width:30px;
    pointer-events:none;z-index:2;opacity:0;transition:opacity .22s ease;
  }
  .cs-rail::before{left:0;background:linear-gradient(90deg,var(--white) 35%,transparent)}
  .cs-rail::after{right:0;background:linear-gradient(270deg,var(--white) 35%,transparent)}
  .cs-rail.cs-more-left::before{opacity:1}
  .cs-rail.cs-more-right::after{opacity:1}

  /* Cards need to read as cards. On the cream panel a transparent chip with
     a transparent border is just floating text, so the strip looked like one
     block of copy rather than a row of separate, tappable modules. */
  .cs-item{
    width:9.1rem;min-width:9.1rem;max-width:9.1rem;
    background:var(--cream);border:1px solid var(--border);
  }
  .cs-item .cs-txt{color:var(--text-dark)}
  .cs-item.cs-active{
    background:#FBEBC4;border-color:var(--amber-mid);
    box-shadow:inset 0 0 0 1px var(--amber-mid);
  }
  .cs-item.cs-active .cs-txt{color:var(--text-dark)}
  .cs-item.cs-done{border-color:var(--amber-mid)}
  .cs-item.cs-done .cs-check{background:var(--amber-ink);color:#FFF3D0;box-shadow:none}

  .cs-list{padding-bottom:10px;scroll-padding-inline-start:2px}
  .cs-list::after{content:"";flex:0 0 30px}   /* last card clears the right fade */

  /* keep the scrollbar permanently visible instead of iOS's fade-in-on-touch */
  .cs-list{scrollbar-width:thin;scrollbar-color:var(--amber-mid) rgba(37,31,19,.12)}
  .cs-list::-webkit-scrollbar{height:4px;-webkit-appearance:none}
  .cs-list::-webkit-scrollbar-track{background:rgba(37,31,19,.12);border-radius:99px}
  .cs-list::-webkit-scrollbar-thumb{background:var(--amber-mid);border-radius:99px}

  /* Position dots. Three tones that are told apart by darkness, not hue —
     pale amber on cream was invisible at arm's length, and colour alone
     would not survive a colour-blind reader either.
       unread  neutral, low
       done    mid bronze
       current dark bronze, stretched into a pill */
  .cs-dots{
    display:flex;justify-content:center;align-items:center;
    gap:7px;margin-top:10px;flex-wrap:wrap;
  }
  .cs-dot{
    width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
    background:rgba(37,31,19,.28);transition:width .2s ease,background .2s ease;
  }
  .cs-dot.cs-dot-done{background:var(--amber-mid)}
  .cs-dot.on{width:22px;border-radius:99px;background:var(--amber-ink)}
}

/* Scoped to the new sidebar+panel layout (Stage 5) only — one module
   visible at a time, swapped instantly via JS, zero reflow/scroll.
   Stages using the classic accordion (.mod-toggle / tog()) are
   completely unaffected since they don't have a .course-main wrapper. */
/* modules */
.module{
  background:var(--white);border-radius:var(--r-md);
  border:1px solid var(--border);overflow:hidden;margin-bottom:14px;
  scroll-margin-top:128px;
}
@media(max-width:900px){.module{margin-bottom:10px}}
@media(max-width:600px){.module{margin-bottom:8px}}
@media(max-width:900px){.module{scroll-margin-top:92px}}
@media(max-width:480px){.module{scroll-margin-top:80px}}
.course-main .module{display:none;margin-bottom:0}
.course-main .module.cs-visible{display:block}
.course-main .mod-head{cursor:default}
.course-main .mod-head:hover{background:none}
.course-main .mod-body{max-height:none;overflow:visible;overflow-x:hidden;padding:0 26px 26px;border-top:1px solid var(--border)}

/* Fix: bare <table> elements (used on pages like the disability guide for
   SSDI/SSI comparisons) had zero styling — no width constraint — so on
   mobile they sized themselves to their unwrapped content instead of the
   screen, dragging the whole page wider and clipping text elsewhere.
   table-layout:fixed + width:100% forces every table to respect its
   container; word-wrap lets cell text wrap instead of forcing width. */
.mod-body table{width:100%;table-layout:fixed;border-collapse:collapse;margin:16px 0;font-size:.85rem}
.mod-body table th,.mod-body table td{padding:9px 10px;border:1px solid var(--border);text-align:left;vertical-align:top;line-height:1.55;word-wrap:break-word;overflow-wrap:break-word;color:var(--text-body)}
.mod-body table th{background:var(--cream);font-weight:700;text-transform:uppercase;font-size:.68rem;letter-spacing:.04em;color:var(--text-muted)}
.mod-body table td:first-child{font-weight:600;color:var(--text-dark)}
.mod-head{
  padding:22px 26px;display:flex;align-items:center;gap:18px;
  cursor:pointer;transition:background .15s;user-select:none;
}
.mod-head:hover{background:rgba(232,160,32,.025)}
.mod-icon{
  width:46px;height:46px;border-radius:11px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;
}
.icon-bank{background:rgba(61,122,88,.1)}
.icon-credit{background:rgba(232,160,32,.1)}
.icon-budget{background:rgba(99,102,241,.09)}
.icon-trap{background:rgba(239,68,68,.08)}
.mod-num{font-family:var(--f-mono);font-size:.68rem;color:var(--text-muted);margin-bottom:2px}
/* Renders as <h2> on the public course pages so the 8 module titles are real
   headings rather than styled divs, which crawlers cannot see as structure.

   Every property below exists to reproduce the <div> this replaced exactly.
   The base h1-h6 rule sets line-height:1.25 and letter-spacing:-.01em, and the
   browser adds a default h2 margin — a div had none of those, it just inherited
   body's line-height:1.7. Left alone, all 8 module titles would shift and drag
   .mod-sub with them. Change these only if you also change body's line-height. */
.mod-title{
  font-size:1rem;font-weight:700;color:var(--text-dark);
  margin:0;line-height:1.7;letter-spacing:normal;
}
.mod-sub{font-size:.79rem;color:var(--text-muted);margin-top:2px}
.mod-toggle{
  width:30px;height:30px;border-radius:50%;background:var(--cream);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);font-size:1.1rem;transition:all .3s;flex-shrink:0;margin-left:auto;
}
.module.open .mod-toggle{background:var(--amber);color:var(--dark);transform:rotate(45deg)}
.mod-body{max-height:0;overflow:hidden;padding:0 26px;border-top:0 solid var(--border);transition:max-height .35s ease,padding .35s ease}
.module.open .mod-body{max-height:20000px;padding:0 26px 26px;border-top:1px solid var(--border);transition:max-height .5s ease,padding .35s ease}
@media(max-width:900px){
  .mod-body{padding:0 18px}
  .module.open .mod-body{padding:0 18px 18px}
}
@media(max-width:600px){
  .mod-body{padding:0 14px}
  .module.open .mod-body{padding:0 14px 14px}
}
.mod-body p{color:var(--text-body);font-size:.93rem;line-height:1.77;margin-bottom:14px}
.mod-body h4{font-size:.92rem;font-weight:700;color:var(--text-dark);margin:22px 0 10px}
.actions{
  background:var(--cream);border-radius:var(--r-sm);padding:18px;
  display:flex;flex-direction:column;gap:10px;margin:14px 0;
}

/* — next module button (auto-injected via JS) — */
.next-mod-wrap{margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}
.next-mod-btn{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;background:var(--dark);border:1px solid rgba(232,160,32,.3);
  border-radius:var(--r-md);padding:20px 24px;cursor:pointer;
  transition:all .2s;text-align:left;
  box-shadow:0 2px 12px rgba(0,0,0,.15);
}
.next-mod-btn:hover{border-color:var(--amber);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.next-mod-btn-label{display:block;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);margin-bottom:5px}
.next-mod-btn-title{display:block;font-size:1.08rem;font-weight:700;color:#fff;line-height:1.3}
.next-mod-btn-arrow{font-size:1.5rem;color:var(--amber);flex-shrink:0;margin-left:16px;transition:transform .2s}
.next-mod-btn:hover .next-mod-btn-arrow{transform:translateX(4px)}
.next-mod-done{
  background:rgba(45,160,45,.08);border:1px solid rgba(45,160,45,.25);
  border-radius:var(--r-md);padding:18px 22px;text-align:center;
  color:var(--text-body);font-size:.93rem;font-weight:600;
  margin-bottom:14px;
}
.next-stage-btn{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;background:linear-gradient(135deg,rgba(45,160,45,.12),rgba(45,160,45,.04));
  border:1px solid rgba(45,160,45,.35);border-radius:var(--r-md);
  padding:20px 24px;cursor:pointer;transition:all .2s;text-align:left;
  box-shadow:0 2px 12px rgba(0,0,0,.15);text-decoration:none;
}
.next-stage-btn:hover{border-color:var(--green-lt);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.next-stage-btn-label{display:block;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-lt);margin-bottom:5px}
.next-stage-btn-title{display:block;font-size:1.15rem;font-weight:800;color:var(--text-dark)}
.next-stage-btn-arrow{font-size:1.5rem;color:var(--green-lt);flex-shrink:0;margin-left:16px;transition:transform .2s}
.next-stage-btn:hover .next-stage-btn-arrow{transform:translateX(4px)}
.next-stage-btn-img{
  display:flex;align-items:center;justify-content:flex-end;gap:16px;
  width:100%;background:linear-gradient(135deg,rgba(45,160,45,.1),rgba(45,160,45,.03));
  border:1px solid rgba(45,160,45,.3);border-radius:var(--r-md);
  padding:8px 14px;cursor:pointer;transition:all .2s;text-decoration:none;
  box-shadow:0 2px 12px rgba(0,0,0,.12);
}
.next-stage-btn-img:hover{border-color:var(--green-lt);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.22)}
.next-stage-btn-img-label{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-lt);flex-shrink:0}
.next-stage-btn-img img{height:96px;width:auto;display:block;margin-left:auto}
@media(max-width:480px){.next-stage-btn-img{flex-direction:column;align-items:flex-end;gap:10px}.next-stage-btn-img img{margin-left:0}}
.course-complete-msg{
  background:linear-gradient(135deg,rgba(232,160,32,.1),rgba(232,160,32,.03));
  border:1px solid rgba(232,160,32,.3);border-radius:var(--r-md);
  padding:24px;text-align:center;
}
.course-complete-msg-h{font-size:1.15rem;font-weight:800;color:var(--text-dark);margin-bottom:6px}
.course-complete-msg-p{font-size:.9rem;color:var(--text-body)}
.act-row{display:flex;gap:11px;align-items:flex-start}
.act-box{
  width:19px;height:19px;border-radius:50%;border:2px solid var(--border);
  background:var(--white);cursor:pointer;flex-shrink:0;margin-top:2px;
  display:flex;align-items:center;justify-content:center;
  font-size:.68rem;transition:all .2s;
}
.act-box.done{background:var(--green);border-color:var(--green);color:#fff}
.act-txt{font-size:.88rem;color:var(--text-body);line-height:1.5}
.tip{
  background:rgba(45,160,45,.06);border:1px solid rgba(45,160,45,.22);
  border-left:3px solid var(--green);border-radius:var(--r-sm);
  padding:14px 18px;margin:14px 0;
}
.tip-lbl{font-size:.69rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--green);margin-bottom:5px}
.tip-txt{font-size:.86rem;color:var(--text-body);line-height:1.6}
.warn{
  background:rgba(239,68,68,.05);border:1px solid rgba(239,68,68,.18);
  border-left:3px solid #EF4444;border-radius:var(--r-sm);
  padding:14px 18px;margin:14px 0;
}
.warn-lbl{font-size:.69rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#EF4444;margin-bottom:5px}
.warn-txt{font-size:.86rem;color:var(--text-body);line-height:1.6}
.res-links{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.res-link{
  background:var(--cream);border:1px solid var(--border);border-radius:20px;
  padding:5px 13px;font-size:.78rem;font-weight:500;color:var(--text-body);
  transition:all .2s;display:inline-flex;align-items:center;gap:5px;
}
.res-link:hover{border-color:var(--amber);color:var(--text-dark)}

/* ─── TOOLS ──────────────────────────────────────── */
.tools{background:var(--white)}
.tool-tabs{
  display:flex;gap:4px;background:var(--cream);padding:5px;
  border-radius:var(--r-md);margin:44px 0 0;max-width:620px;
}
.t-tab{
  flex:1;padding:11px 18px;border-radius:var(--r-sm);
  font-size:.86rem;font-weight:600;color:var(--text-muted);
  transition:all .2s;text-align:center;
}
.t-tab.on{background:var(--white);color:var(--text-dark);box-shadow:var(--sh-sm)}
.t-panel{display:none}
.t-panel.on{display:block}
.tool-card{background:var(--cream);border-radius:var(--r-lg);padding:38px;margin-top:22px}
@media(max-width:900px){.tool-card{padding:28px;margin-top:18px}}
@media(max-width:600px){.tool-card{padding:20px;margin-top:14px}}
.tool-intro h3{font-family:var(--f-body);font-size:1.45rem;font-weight:700;color:var(--text-dark);margin-bottom:6px;letter-spacing:-.02em}
.tool-intro p{color:var(--text-muted);font-size:.88rem;margin-bottom:28px}

/* budget */
.bud-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.bud-col h4{
  font-size:.78rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:14px;
}
.bud-col:first-child h4{color:var(--green)}
.bud-col:last-child h4{color:#EF4444}
.bud-rows{display:flex;flex-direction:column;gap:7px;margin-bottom:10px}
.bud-row{display:flex;gap:7px;align-items:center}
.bi-label{
  flex:1;padding:9px 12px;border:1px solid var(--border);
  border-radius:var(--r-sm);font-size:.86rem;background:var(--white);
  color:var(--text-dark);outline:none;transition:border-color .2s;
}
.bi-label:focus{border-color:var(--amber)}
.bi-amt{
  width:105px;padding:9px 12px;border:1px solid var(--border);
  border-radius:var(--r-sm);font-size:.86rem;background:var(--white);
  color:var(--text-dark);outline:none;font-family:var(--f-mono);
  transition:border-color .2s;
}
.bi-amt:focus{border-color:var(--amber)}
.del-btn{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:rgba(239,68,68,.08);color:#EF4444;
  display:flex;align-items:center;justify-content:center;font-size:1rem;
  transition:background .2s;
}
.del-btn:hover{background:rgba(239,68,68,.15)}
.add-btn{
  border:1px dashed var(--border);border-radius:var(--r-sm);
  padding:9px;width:100%;color:var(--text-muted);
  font-size:.8rem;font-weight:500;
  display:flex;align-items:center;justify-content:center;gap:5px;
  transition:all .2s;
}
.add-btn:hover{border-color:var(--amber);color:var(--amber);background:rgba(232,160,32,.04)}
.bud-result{
  background:var(--dark);border-radius:var(--r-md);padding:26px 30px;
  margin-top:22px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.res-item{text-align:center}
.res-val{font-family:var(--f-mono);font-size:1.5rem;font-weight:700;color:#fff}
.res-val.pos{color:var(--green-lt)}
.res-val.neg{color:#EF4444}
.res-lbl{font-size:.72rem;color:rgba(255,255,255,.36);margin-top:4px;text-transform:uppercase;letter-spacing:.04em}

/* emergency fund */
.ef-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.f-grp{margin-bottom:18px}
.f-lbl{display:block;font-size:.83rem;font-weight:600;color:var(--text-body);margin-bottom:7px}
.f-inp{
  width:100%;padding:11px 15px;border:1px solid var(--border);
  border-radius:var(--r-sm);font-size:.93rem;background:var(--white);
  color:var(--text-dark);outline:none;font-family:var(--f-mono);transition:border-color .2s;
}
.f-inp:focus{border-color:var(--amber)}
.ef-result{background:var(--dark);border-radius:var(--r-md);padding:30px;text-align:center}
.ef-big{font-family:var(--f-body);font-size:3.4rem;font-weight:800;color:var(--amber);line-height:1;letter-spacing:-.03em}
.ef-lbl{color:rgba(255,255,255,.45);font-size:.87rem;margin-top:7px}
.ef-bars{margin-top:22px;display:flex;flex-direction:column;gap:11px}
.ef-bar-row{display:flex;align-items:center;gap:11px}
.bar-lbl{font-size:.77rem;color:rgba(255,255,255,.35);width:80px;text-align:left}
.bar-wrap{flex:1;height:5px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden}
.bar-fill{height:100%;background:var(--amber);border-radius:3px;transition:width .5s ease}
.bar-fill.green{background:rgba(91,164,119,.8)}
.bar-amt{font-size:.76rem;font-family:var(--f-mono);color:rgba(255,255,255,.4);width:55px;text-align:right}

/* debt tracker */
.debt-hd{
  display:grid;grid-template-columns:1fr 105px 75px 75px 30px;
  gap:9px;padding:0 18px;margin-bottom:7px;
}
.debt-hd span{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}
.debt-rows{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.debt-item{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:13px 18px;
  display:grid;grid-template-columns:1fr 105px 75px 75px 30px;gap:9px;align-items:center;
}
.d-inp{
  padding:8px 10px;border:1px solid var(--border);border-radius:6px;
  font-size:.83rem;background:var(--cream);outline:none;width:100%;
  transition:border-color .2s;
}
.d-inp:focus{border-color:var(--amber);background:var(--white)}
.d-inp.mono{font-family:var(--f-mono)}
.debt-sum{
  background:var(--dark);border-radius:var(--r-md);padding:26px;
  margin-top:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}

/* ─── EMAIL CTA ───────────────────────────────────── */
.email-sec{background:var(--dark);padding:88px 40px}
@media(max-width:900px){.email-sec{padding:64px 24px}}
@media(max-width:600px){.email-sec{padding:44px 18px}}
.email-inner{max-width:620px;margin:0 auto;text-align:center}
.email-inner .sec-eye{color:var(--amber)}
.email-inner .sec-h2{color:#fff;margin-bottom:14px}
.email-inner .sec-sub{color:rgba(255,255,255,.45);margin:0 auto 36px;max-width:480px}
.email-row{display:flex;gap:10px;max-width:460px;margin:0 auto}
.e-inp{
  flex:1;padding:13px 18px;border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-sm);background:rgba(255,255,255,.06);
  color:#fff;font-size:.93rem;outline:none;transition:border-color .2s;
  font-family:var(--f-body);
}
.e-inp::placeholder{color:rgba(255,255,255,.28)}
.e-inp:focus{border-color:var(--amber)}
.e-sub{
  background:var(--amber);color:var(--dark);
  padding:13px 26px;border-radius:var(--r-sm);
  font-size:.93rem;font-weight:700;white-space:nowrap;transition:all .2s;
}
.e-sub:hover{background:var(--amber-lt)}
.e-disc{font-size:.75rem;color:rgba(255,255,255,.22);margin-top:13px}
.ok-msg{
  display:none;align-items:center;gap:11px;
  background:rgba(61,122,88,.15);border:1px solid rgba(61,122,88,.38);
  border-radius:var(--r-sm);padding:15px 22px;
  color:var(--green-lt);font-size:.88rem;font-weight:500;
  max-width:460px;margin:0 auto;
}
.ok-msg.show{display:flex}

/* ─── COMING SOON ─────────────────────────────────── */
.coming{background:var(--cream)}
.coming-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px}
.c-card{
  background:var(--white);border-radius:var(--r-md);padding:26px 22px;
  border:1px solid var(--border);position:relative;overflow:hidden;
}
.c-card::before{
  content:'COMING';position:absolute;top:11px;right:11px;
  font-size:.6rem;font-weight:700;letter-spacing:.07em;
  color:var(--text-muted);background:var(--cream);
  padding:2px 7px;border-radius:10px;
}
.c-stage{font-family:var(--f-mono);font-size:.68rem;color:var(--text-muted);margin-bottom:10px}
.c-title{font-family:var(--f-body);font-size:1.1rem;font-weight:700;color:var(--text-dark);margin-bottom:7px;letter-spacing:normal;-webkit-text-stroke:0;text-shadow:none}
.c-desc{font-size:.8rem;color:var(--text-muted);line-height:1.6}
.c-pills{display:flex;flex-wrap:wrap;gap:5px;margin-top:14px}
.pill{
  background:var(--cream);border:1px solid var(--border);border-radius:20px;
  padding:3px 9px;font-size:.7rem;color:var(--text-muted);
}

/* ─── FOOTER ──────────────────────────────────────── */
.footer{background:var(--dark);padding:44px 40px;border-top:1px solid rgba(255,255,255,.05)}
.footer-inner{max-width:1400px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}
.f-logo{font-family:var(--f-body);font-size:1.25rem;font-weight:800;color:#fff;letter-spacing:-.02em}
.f-logo span{color:var(--amber)}
.f-tag{font-size:.79rem;color:rgba(255,255,255,.28);margin-top:3px}
.f-links{display:flex;gap:22px}
.f-link{font-size:.82rem;color:rgba(255,255,255,.3);transition:color .2s}
.f-link:hover{color:rgba(255,255,255,.65)}
.f-copy{font-size:.75rem;color:rgba(255,255,255,.18);text-align:right;line-height:1.6}
.f-disclaimer{max-width:1200px;margin:24px auto 0;padding:16px 20px;border:1px solid rgba(239,68,68,.35);border-radius:8px;background:rgba(239,68,68,.06);font-size:.77rem;color:rgba(255,255,255,.82);line-height:1.78;text-align:center;font-weight:500}

/* ─── CATEGORY / SITUATION TABLES ───────────────── */
.cat-table{width:100%;border-collapse:collapse;font-size:.82rem;margin:16px 0;overflow:hidden;border-radius:var(--r-sm)}
.cat-table th{text-align:left;padding:9px 12px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);background:var(--cream);border-bottom:2px solid var(--border)}
.cat-table td{padding:9px 12px;border-bottom:1px solid var(--border);color:var(--text-body);vertical-align:top;line-height:1.5;background:var(--white)}
.cat-table tr:last-child td{border-bottom:none}
.cat-table td:first-child{font-weight:600;color:var(--text-dark)}
.cat-pct{font-family:var(--f-mono);font-size:.78rem;color:var(--green);font-weight:700}
.cat-note{font-size:.75rem;color:var(--text-muted);line-height:1.45}
.sit-table{width:100%;border-collapse:collapse;font-size:.82rem;margin:12px 0;overflow:hidden;border-radius:var(--r-sm)}
.sit-table th,.sit-table td{padding:9px 12px;border:1px solid var(--border);text-align:center;background:var(--white)}
.sit-table th{background:var(--cream);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
.sit-table td:first-child{text-align:left;font-weight:600;color:var(--text-dark);background:var(--cream)}
.sit-highlight{background:rgba(232,160,32,.06)!important}

/* ─── HOLDING ACCOUNT EXAMPLE ────────────────────── */
.hold-table{width:100%;border-collapse:collapse;font-size:.8rem;margin:16px 0;overflow:hidden;border-radius:var(--r-sm)}
.hold-table th{background:var(--dark);color:rgba(255,255,255,.6);padding:8px 12px;text-align:left;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.hold-table td{padding:9px 12px;border-bottom:1px solid var(--border);font-family:var(--f-mono);font-size:.78rem;color:var(--text-body);background:var(--white)}
.hold-table tr:last-child td{border-bottom:none}
.hold-table td:first-child{font-family:var(--f-body);font-weight:600;color:var(--text-dark)}
.hold-pos{color:var(--green);font-weight:700}
.hold-neg{color:#EF4444;font-weight:700}

/* ─── MILESTONE TRACKER ──────────────────────────── */
.ms-prog-wrap{margin:0 0 16px}
.ms-prog-lbl{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;color:var(--text-muted);margin-bottom:6px}
.ms-prog-lbl span:last-child{font-weight:700;color:var(--green);font-family:var(--f-mono)}
.ms-prog-bar{height:7px;background:var(--border);border-radius:4px;overflow:hidden}
.ms-prog-fill{height:100%;background:linear-gradient(90deg,var(--green),var(--green-lt));border-radius:4px;transition:width .4s ease}
.milestones{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.ms-row{
  display:flex;align-items:center;gap:12px;padding:11px 14px;
  border-radius:var(--r-sm);background:var(--cream);border:1px solid var(--border);
  cursor:pointer;transition:all .2s;user-select:none;
}
.ms-row.done{background:rgba(61,122,88,.07);border-color:rgba(61,122,88,.3)}
.ms-row:hover{border-color:var(--amber)}
.ms-box{
  width:21px;height:21px;border-radius:50%;border:2px solid var(--border);background:var(--white);
  flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.68rem;transition:all .2s;
}
.ms-row.done .ms-box{background:var(--green);border-color:var(--green);color:#fff}
.ms-num{font-family:var(--f-mono);font-size:.66rem;color:var(--text-muted);width:22px;flex-shrink:0;text-align:right}
.ms-text{font-size:.84rem;color:var(--text-body);flex:1;line-height:1.4}
.ms-row.done .ms-text{color:var(--green);text-decoration:line-through;text-decoration-color:rgba(61,122,88,.4)}

/* ─── MEETING STEPS ──────────────────────────────── */
.mtg-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:16px 0}
.mtg-step{background:var(--cream);border:1px solid var(--border);border-radius:var(--r-md);padding:16px 12px;text-align:center}
.mtg-time{font-size:.68rem;color:var(--green);font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
.mtg-title{font-size:.82rem;font-weight:700;color:var(--text-dark);margin-bottom:3px}
.mtg-desc{font-size:.74rem;color:var(--text-muted);line-height:1.5}
@media(max-width:768px){.mtg-steps{grid-template-columns:1fr 1fr}}

/* ─── SINKING FUND TOOL ─────────────────────────── */
.sf-hd{display:grid;grid-template-columns:1fr 110px 100px 30px;gap:9px;padding:0 18px;margin-bottom:7px}
.sf-hd span{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}
.sf-rows{display:flex;flex-direction:column;gap:9px;margin-bottom:12px}
.sf-item{background:var(--white);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 18px;display:grid;grid-template-columns:1fr 110px 100px 30px;gap:9px;align-items:center}
.sf-inp{padding:8px 10px;border:1px solid var(--border);border-radius:6px;font-size:.83rem;background:var(--cream);outline:none;width:100%;transition:border-color .2s;font-family:var(--f-body)}
.sf-inp:focus{border-color:var(--amber);background:var(--white)}
.sf-inp.mono{font-family:var(--f-mono)}
.sf-auto{font-family:var(--f-mono);font-size:.85rem;color:var(--green);font-weight:700;padding:8px 4px;text-align:right}
.sf-total-bar{background:var(--dark);border-radius:var(--r-md);padding:24px 28px;margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center}
.sf-big-val{font-family:var(--f-mono);font-size:2rem;font-weight:700;color:var(--amber)}
.sf-big-lbl{font-size:.73rem;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.04em;margin-top:3px}
.sf-breakdown{display:flex;flex-direction:column;gap:7px}
.sf-br-row{display:flex;justify-content:space-between;font-size:.8rem}
.sf-br-lbl{color:rgba(255,255,255,.45)}
.sf-br-val{font-family:var(--f-mono);color:rgba(255,255,255,.8);font-weight:700}

/* ─── BUDGET SITUATION ───────────────────────────── */
.bud-sit{display:flex;align-items:flex-start;gap:12px;background:var(--cream);border-radius:var(--r-sm);padding:12px 16px;margin-top:14px;border:1px solid var(--border)}
.sit-badge{padding:4px 10px;border-radius:20px;font-size:.74rem;font-weight:700;white-space:nowrap;flex-shrink:0}
.sit-badge.comfortable{background:rgba(61,122,88,.15);color:var(--green)}
.sit-badge.tight{background:rgba(232,160,32,.14);color:#B07800}
.sit-badge.crisis{background:rgba(239,68,68,.11);color:#DC2626}
.sit-msg{font-size:.81rem;color:var(--text-muted);line-height:1.5}

/* ─── RESPONSIVE ──────────────────────────────────── */
@media(max-width:1024px){
  .hero-wrap{grid-template-columns:1fr}
  .journey-card{display:none}
  .fw-grid{grid-template-columns:1fr;gap:36px}
  .stages{grid-template-columns:repeat(3,1fr)}
  .bud-grid{grid-template-columns:1fr}
  .ef-grid{grid-template-columns:1fr}
  .coming-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .nav{padding:0 18px}
  .nav-stages{display:none}
  .sec{padding:60px 18px}
  .hero{padding:96px 18px 60px;min-height:auto;align-items:flex-start}
  .stage-banner{padding:22px 18px;flex-direction:column;gap:14px;align-items:flex-start}
  .stage-banner::before{display:none}
  .stage-banner h1,.stage-banner h2{font-size:1.6rem!important}
  .stage-banner > div:first-child > p{font-size:.85rem;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .prog-wrap{display:flex;flex-direction:row;align-items:center;gap:12px;width:100%}
  .prog-ring{width:44px;height:44px}
  .prog-ring svg{width:44px;height:44px}
  .prog-txt{font-size:.68rem}
  .prog-lbl{display:none}
  .prog-wrap > div:last-child{font-size:.66rem}
  .stages{grid-template-columns:1fr 1fr}
  .coming-grid{grid-template-columns:1fr}
  .bud-result,.debt-sum{grid-template-columns:1fr}
  .email-row{flex-direction:column}
  .footer-inner{flex-direction:column;gap:20px;text-align:center}
  .f-links{justify-content:center}
  .f-copy{text-align:center}
  .hero-stats{gap:22px}
  .debt-item{grid-template-columns:1fr 90px;gap:7px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ─── HUSTLIN' FOR YOU — BRAND LOGO ─────────────── */
.hfy-logo{display:inline-flex;flex-direction:column;align-items:center;gap:8px;user-select:none}
.hfy-badge{display:inline-flex;align-items:center;background:linear-gradient(180deg,#f9f9f9 0%,#e4e4e4 18%,#c6c6c6 44%,#b8b8b8 50%,#c6c6c6 56%,#e2e2e2 82%,#f7f7f7 100%);border-radius:8px;padding:4px 12px;position:relative;overflow:hidden;animation:hfyGlow 2s ease-in-out infinite alternate}
@keyframes hfyGlow{from{box-shadow:0 0 0 2px #8a6a00,0 0 0 4px #f0c030,0 0 0 6px #8a6a00,0 0 14px rgba(240,192,48,.8),0 0 28px rgba(240,192,48,.4)}to{box-shadow:0 0 0 2px #c9a84c,0 0 0 5px #fff9a0,0 0 0 8px #c9a84c,0 0 26px rgba(255,220,40,1),0 0 55px rgba(240,192,48,.55)}}
.hfy-badge::after{content:'';position:absolute;top:-5%;left:-80%;width:45%;height:110%;pointer-events:none;background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.07) 30%,rgba(255,255,255,.52) 50%,rgba(255,255,255,.07) 70%,transparent 100%);animation:hfyShine 4s ease-in-out infinite}
@keyframes hfyShine{0%{left:-80%;opacity:0}5%{opacity:1}40%{left:140%;opacity:1}41%{opacity:0}100%{left:140%;opacity:0}}
.hfy-dollar{font-family:'Impact','Arial Black',sans-serif;color:#3ec83e;-webkit-text-stroke:1.4px #082a08;text-shadow:1px 1px 0 #38b838,2px 2px 0 #2da02d,2px 3px 2px rgba(0,0,0,.7);line-height:1}
.hfy-hustlin{font-family:'Impact','Arial Black',sans-serif;color:#1e1e1e;-webkit-text-stroke:.6px #000;white-space:nowrap;line-height:1;margin:0 3px}
.hfy-you{font-family:'Impact','Arial Black',sans-serif;color:#f5c520;-webkit-text-stroke:1.2px #0a0500;text-shadow:1px 1px 0 #d4a010,2px 2px 0 #b88008,2px 3px 2px rgba(0,0,0,.7);white-space:nowrap;line-height:1}
.hfy-tagline-wrap{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#1a1a1a 0%,#111 40%,#0d0d0d 50%,#111 60%,#1a1a1a 100%);border-radius:7px;padding:5px 18px;position:relative;overflow:hidden;animation:hfyTagGlow 2s ease-in-out infinite alternate}
@keyframes hfyTagGlow{from{box-shadow:0 0 0 1px #8a6a00,0 0 0 3px #f0c030,0 0 0 5px #8a6a00,0 0 16px rgba(240,192,48,.85)}to{box-shadow:0 0 0 2px #c9a84c,0 0 0 5px #fff9a0,0 0 0 8px #c9a84c,0 0 32px rgba(255,220,40,1)}}
.hfy-tagline{font-family:'Impact','Arial Black',sans-serif;color:#fff;text-transform:uppercase;letter-spacing:2.5px;white-space:nowrap;display:flex;align-items:center;gap:6px;-webkit-text-stroke:.7px #1a1000;text-shadow:1px 1px 0 #ccc,2px 2px 0 #999}
.hfy-hundred{display:inline-flex;flex-direction:column;align-items:center;transform:skewX(-18deg);animation:hfyBounce 1.8s ease-in-out infinite;margin-left:4px}
@keyframes hfyBounce{0%,100%{transform:skewX(-18deg) translateY(0) scale(1)}45%{transform:skewX(-18deg) translateY(-4px) scale(1.15)}65%{transform:skewX(-18deg) translateY(1px) scale(.97)}}
.hfy-hundred-num{font-family:'Impact','Arial Black',sans-serif;color:var(--red);-webkit-text-stroke:.9px #7a0000;text-shadow:1px 1px 0 #cc0000,2px 2px 0 #8a0000}

/* nav-size (mini) */
.hfy-logo.sm{flex-direction:row;gap:0}
.hfy-logo.sm .hfy-badge{padding:3px 9px;border-radius:6px}
.hfy-logo.sm .hfy-dollar{font-size:18px}
.hfy-logo.sm .hfy-hustlin{font-size:13px}
.hfy-logo.sm .hfy-you{font-size:19px}

/* hero-size (full) */
.hfy-logo.lg .hfy-dollar{font-size:46px}
.hfy-logo.lg .hfy-hustlin{font-size:36px}
.hfy-logo.lg .hfy-you{font-size:52px}
.hfy-logo.lg .hfy-tagline{font-size:15px}
.hfy-logo.lg .hfy-hundred-num{font-size:17px;padding-bottom:6px;position:relative;display:inline-block}
.hfy-logo.lg .hfy-hundred-num::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--red);border-radius:2px;box-shadow:0 4px 0 0 var(--red),0 0 6px rgba(255,40,40,.8)}

@media(max-width:768px){
  .hfy-logo.lg .hfy-dollar{font-size:32px}
  .hfy-logo.lg .hfy-hustlin{font-size:24px}
  .hfy-logo.lg .hfy-you{font-size:36px}
  .hfy-logo.lg .hfy-tagline{font-size:12px;letter-spacing:1.5px}
}/* ─── OWNERSHIP CALLOUT ───────────────────────────── */
.callout-sec{background:var(--dark);padding:76px 40px;text-align:center;position:relative;overflow:hidden}
@media(max-width:900px){.callout-sec{padding:56px 24px}}
@media(max-width:600px){.callout-sec{padding:38px 18px}}
.callout-sec::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(240,192,48,.08) 0%,transparent 60%)}
.callout-txt{font-family:var(--f-body);font-size:clamp(1.4rem,2.6vw,2rem);font-weight:700;color:#fff;max-width:880px;margin:0 auto;line-height:1.45;letter-spacing:-.005em;position:relative;z-index:1;-webkit-text-stroke:0;text-shadow:none}
.callout-txt em{font-style:normal;color:var(--amber)}
.callout-txt .callout-soft{display:block;font-family:var(--f-body);font-weight:500;font-size:.82rem;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px}


/* ─── MULTI-PAGE NAV LINK STATES ─────────────── */
.nav-stage{cursor:default}
.nav-stage.linkable{cursor:pointer}
.nav-stage.done .nav-stage-num{background:var(--green);color:#fff}
.nav-stage.done{color:rgba(255,255,255,.55)}

/* ─── STAGE COMPLETE BANNER ──────────────────── */
.stage-complete-banner{
  background:linear-gradient(135deg,rgba(45,160,45,.14),rgba(240,192,48,.10));
  border:1px solid rgba(45,160,45,.35);border-radius:var(--r-lg);
  padding:28px 32px;margin:0 0 32px;display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
}
.stage-complete-banner .scb-text{font-size:.95rem;color:var(--text-body)}
.stage-complete-banner .scb-text strong{color:var(--green);font-family:var(--f-body);font-size:1.1rem;font-weight:800;display:block;margin-bottom:4px;letter-spacing:-.01em}
.scb-next{
  background:var(--dark);color:var(--amber);padding:12px 24px;border-radius:var(--r-sm);
  font-size:.9rem;font-weight:700;white-space:nowrap;transition:all .2s;display:inline-flex;align-items:center;gap:8px;
}
.scb-next:hover{background:#1a1a1a;transform:translateY(-1px)}

/* ─── STAGE LOCKED (full page) ───────────────── */
.stage-locked-wrap{background:var(--dark);min-height:70vh;display:flex;align-items:center;justify-content:center;padding:152px 40px 80px;text-align:center}
@media(max-width:900px){.stage-locked-wrap{padding:100px 24px 60px}}
@media(max-width:480px){.stage-locked-wrap{padding:84px 18px 50px}}
.stage-locked-inner{max-width:520px}
.stage-locked-inner .lock-icon{font-size:3rem;margin-bottom:20px}
.stage-locked-inner h1{font-family:var(--f-body);font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;color:#fff;margin-bottom:16px;letter-spacing:-.02em}
.stage-locked-inner p{color:rgba(255,255,255,.5);font-size:1rem;line-height:1.7;margin-bottom:32px}

/* ─── CROSS-STAGE DATA CALLOUT ───────────────── */
.data-pull{
  background:rgba(232,114,14,.07);border:1px solid rgba(232,114,14,.25);border-radius:var(--r-sm);
  padding:16px 20px;margin:16px 0;font-size:.86rem;color:var(--text-body);line-height:1.6;
}
.data-pull strong{color:var(--text-dark)}
.data-pull .dp-lbl{font-size:.69rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--orange);margin-bottom:6px;display:block}

/* ─── COURSE ACCESS GATE (paywalled courses) ───
   Toggled by course-gate.js while it verifies sign-in + purchase status.
   Hides the paid module content only — nav/marketing banner stay visible.
   Free stages (no gate script) never get the "hidden by default" inline
   style below, so this reveal rule is harmless there. Gated stage pages
   include a small inline <style> in <head> that hides .course-layout by
   default — before course-gate.js (loaded at the bottom of the page) ever
   runs — so there's no flash of the full lesson content on load. This
   class is what reveals it once access is confirmed. */
html.hfy-gate-ok .course-layout{visibility:visible}
/* Legacy/back-compat: some pages may still toggle this class while the
   check is running. */
html.hfy-gate-pending .course-layout{visibility:hidden}
.hfy-gate-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:420px;width:100%}
.hfy-gate-notice{
  background:rgba(240,192,48,.1);border:1px solid rgba(240,192,48,.35);
  color:var(--amber);border-radius:var(--r-md);padding:14px 18px;
  font-size:.83rem;line-height:1.55;text-align:center;width:100%;
}
.hfy-gate-card{
  background:var(--dark-card);border:1px solid rgba(240,192,48,.25);
  border-radius:var(--r-lg);padding:36px;max-width:420px;width:100%;
  text-align:center;box-shadow:var(--sh-md);
}
.hfy-gate-card h3{color:#fff;font-size:1.3rem;margin-bottom:10px}
.hfy-gate-card p{color:rgba(255,255,255,.55);font-size:.9rem;line-height:1.6;margin-bottom:22px}
.hfy-gate-card .btn-a{width:100%;justify-content:center;margin-bottom:12px}
.hfy-gate-card .hfy-gate-alt{font-size:.83rem;color:rgba(255,255,255,.4)}
.hfy-gate-card .hfy-gate-alt a{color:var(--amber);text-decoration:underline}
.hfy-gate-card .hfy-gate-error{color:var(--red);font-size:.83rem;margin-top:10px;display:none}
.hfy-gate-price{font-family:var(--f-mono);color:var(--amber);font-size:1.6rem;font-weight:700;margin-bottom:6px}



/* ═══════════════════════════════════════════════════════════════════════════
   SITE FOOTER — BRANDED  (.hfy-footer)
   ───────────────────────────────────────────────────────────────────────────
   Single source of truth for footer styling. Promoted here 2026-07-27 from 27
   duplicated inline <style> copies. Markup lives in footer.template.html and
   is stamped into pages by tools/stamp-footers.mjs — do not re-inline these
   rules in a page. about.html, learn.html and blog/*.html carried .hfy-footer
   markup with no CSS at all before this move; their footers were unstyled.
   ═══════════════════════════════════════════════════════════════════════════ */
.hfy-footer {
  background: #060606;
  border-top: 1px solid rgba(245,197,32,.2);
  padding: 64px 40px 0;
  margin-top: 0;
}
.hfy-ft-top {
  max-width: 1100px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.hfy-ft-brand img {
  height: 52px; width: auto;
  mix-blend-mode: screen;
  margin-bottom: 14px;
  display: block;
}
.hfy-ft-brand p {
  font-size: .85rem;
  color: rgba(255,255,255,.35);
  line-height: 1.7;
  max-width: 220px;
  font-family: var(--f-body, 'Segoe UI', sans-serif);
}
.hfy-ft-col-title {
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #f5c520;
  margin-bottom: 16px;
  font-family: var(--f-body, 'Segoe UI', sans-serif);
}
.hfy-ft-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hfy-ft-links a {
  font-size: .85rem;
  color: rgba(255,255,255,.45);
  text-decoration: none;
  font-family: var(--f-body, 'Segoe UI', sans-serif);
  transition: color .2s;
  line-height: 1;
}
.hfy-ft-links a:hover { color: #f5c520 }
.hfy-ft-social {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hfy-ft-social a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border-radius: 100px;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  transition: all .2s;
  font-family: var(--f-body, 'Segoe UI', sans-serif);
  width: fit-content;
}
.hfy-ft-x {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.8);
}
.hfy-ft-x:hover {
  background: #000;
  border-color: #fff;
  color: #fff !important;
}
.hfy-ft-ig {
  background: rgba(225,48,108,.08);
  border: 1px solid rgba(225,48,108,.25);
  color: rgba(225,48,108,.9);
}
.hfy-ft-ig:hover {
  background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  border-color: transparent;
  color: #fff !important;
}
.hfy-ft-yt {
  background: rgba(255,0,0,.08);
  border: 1px solid rgba(255,0,0,.25);
  color: rgba(255,80,80,.9);
}
.hfy-ft-yt:hover {
  background: #ff0000;
  border-color: transparent;
  color: #fff !important;
}
.hfy-ft-social svg {
  width: 15px; height: 15px;
  fill: currentColor; flex-shrink: 0;
}
.hfy-ft-bottom {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.hfy-ft-copy {
  font-size: .78rem;
  color: rgba(255,255,255,.2);
  font-family: var(--f-body, 'Segoe UI', sans-serif);
}
.hfy-ft-disc {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 20px;
  border-top: 1px solid rgba(239,68,68,.3);
  background: rgba(239,68,68,.05);
  font-size: .74rem;
  color: rgba(255,255,255,.55);
  line-height: 1.8;
  text-align: center;
  font-family: var(--f-body, 'Segoe UI', sans-serif);
}
.hfy-ft-disc strong {
  display: block;
  margin-bottom: 5px;
  font-size: .78rem;
  color: rgba(255,80,80,.9);
  letter-spacing: .05em;
}

@media(max-width:900px){
  .hfy-ft-top { grid-template-columns: 1fr 1fr; gap: 36px }
}
@media(max-width:560px){
  .hfy-footer { padding: 44px 18px 0 }
  .hfy-ft-top { grid-template-columns: 1fr; gap: 28px }
  .hfy-ft-bottom { flex-direction: column; align-items: flex-start }
}