/* Full of Joy — self-hosted mirror. Design tokens mirror the original Kajabi site:
   Quattrocento (headings) + Raleway (body), soft neutral palette. */
:root{
  --ink:#3f3f3f; --body:#595959; --muted:#8a8a86; --line:#e7e3db;
  --bg:#ffffff; --bg-soft:#f6f3ee; --bg-deep:#eae4da;
  --accent:#7c8a6f;        /* sage/olive, close to the FoJ botanical feel */
  --accent-deep:#5f6c54;
  --gold:#b99a5b;
  --maxw:1120px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:'Raleway',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--body);background:var(--bg);line-height:1.75;font-size:17px;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:var(--accent-deep);text-decoration:none;}
h1,h2,h3,h4{font-family:'Quattrocento','Playfair Display',Georgia,serif;color:var(--ink);font-weight:700;line-height:1.2;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.narrow{max-width:760px;margin-left:auto;margin-right:auto;}
.center{text-align:center;}
.eyebrow{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);font-weight:700;margin:0 0 16px;}
section{padding:76px 0;}
section.soft{background:var(--bg-soft);}
p{margin:0 0 18px;}

/* ---------- header ---------- */
#hdr{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
#hdr .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px;max-width:1240px;margin:0 auto;}
#hdr .logo img{height:46px;width:auto;}
#hdr nav{display:flex;align-items:center;gap:22px;}
#hdr nav a{color:var(--ink);font-size:14.5px;font-weight:500;white-space:nowrap;}
#hdr nav a:hover{color:var(--accent-deep);}
.menu-item{position:relative;}
.menu-item>.sub{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:0 20px 50px -20px rgba(0,0,0,.25);padding:8px;min-width:200px;display:none;flex-direction:column;gap:2px;}
.menu-item:hover>.sub{display:flex;}
.menu-item>.sub a{padding:9px 14px;border-radius:8px;font-size:14px;}
.menu-item>.sub a:hover{background:var(--bg-soft);}
.caret{font-size:10px;color:var(--muted);margin-left:3px;}
.navbtn{background:var(--accent-deep);color:#fff !important;padding:9px 18px;border-radius:999px;font-weight:600;}
.navbtn:hover{background:var(--accent);}
#burger{display:none;background:none;border:none;font-size:26px;color:var(--ink);cursor:pointer;line-height:1;}
@media(max-width:960px){
  #hdr nav{position:fixed;inset:64px 0 auto 0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;
    gap:0;padding:8px 0 16px;max-height:calc(100vh - 64px);overflow:auto;display:none;box-shadow:0 30px 50px -20px rgba(0,0,0,.2);}
  #hdr nav.open{display:flex;}
  #hdr nav a{padding:12px 24px;}
  .menu-item>.sub{position:static;transform:none;display:flex;border:none;box-shadow:none;padding:0 0 0 14px;min-width:0;}
  .menu-item:hover>.sub{display:flex;}
  .caret{display:none;}
  #burger{display:block;}
}

/* ---------- hero ---------- */
.hero{position:relative;color:#fff;text-align:center;padding:150px 24px;background-size:cover;background-position:center;}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(40,44,38,.35),rgba(40,44,38,.55));}
.hero>*{position:relative;z-index:1;max-width:820px;margin-left:auto;margin-right:auto;}
.hero h1{color:#fff;font-size:clamp(34px,5.5vw,60px);margin:0 0 20px;}
.hero p{color:rgba(255,255,255,.92);font-size:19px;}
.hero.left{text-align:left;}
.hero.left>*{margin-left:0;}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--accent-deep);color:#fff;padding:14px 30px;border-radius:999px;font-weight:600;font-size:15px;
  letter-spacing:.02em;border:none;cursor:pointer;transition:transform .15s,background .15s;}
.btn:hover{background:var(--accent);transform:translateY(-1px);color:#fff;}
.btn.light{background:#fff;color:var(--accent-deep);}
.btn.ghost{background:transparent;border:1.5px solid rgba(255,255,255,.8);color:#fff;}
.btn.soon{background:var(--bg-deep);color:var(--muted);cursor:default;}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:8px;}

/* ---------- quotes ---------- */
.pullquote{font-family:'Quattrocento',serif;font-style:italic;font-size:clamp(21px,3vw,29px);color:var(--accent-deep);
  text-align:center;max-width:820px;margin:0 auto;line-height:1.4;}
.pullquote .by{display:block;font-size:15px;font-style:normal;color:var(--muted);margin-top:14px;letter-spacing:.05em;}

/* ---------- split / feature rows ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;}
.split.rev .txt{order:2;}
.split img{border-radius:14px;box-shadow:0 30px 60px -30px rgba(0,0,0,.4);width:100%;object-fit:cover;}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:28px;}.split.rev .txt{order:0;}}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:36px;}
@media(max-width:820px){.cards{grid-template-columns:1fr;}}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;}
.card img{height:210px;width:100%;object-fit:cover;}
.card .body{padding:24px;display:flex;flex-direction:column;gap:12px;flex:1;}
.card h3{margin:0;font-size:20px;}
.card p{margin:0;font-size:15px;color:var(--body);}
.card .btn{margin-top:auto;align-self:flex-start;}

/* portrait row (founders / team) */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px;margin-top:36px;}
.person{text-align:center;}
.person img{width:150px;height:150px;border-radius:50%;object-fit:cover;margin:0 auto 16px;box-shadow:0 16px 34px -16px rgba(0,0,0,.4);}
.person h3{margin:0 0 4px;font-size:19px;}
.person .role{color:var(--accent);font-size:13px;letter-spacing:.08em;text-transform:uppercase;}

/* ---------- testimonials ---------- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-top:36px;}
.tq{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;}
.tq p{font-size:15px;font-style:italic;color:var(--body);}
.tq .who{display:flex;align-items:center;gap:12px;margin-top:16px;}
.tq .who img{width:48px;height:48px;border-radius:50%;object-fit:cover;}
.tq .who b{font-family:'Quattrocento',serif;color:var(--ink);font-size:15px;display:block;}
.tq .who span{font-size:12.5px;color:var(--muted);}
.soft .tq{background:var(--bg);}

/* ---------- forms ---------- */
.optin{background:var(--accent-deep);color:#fff;border-radius:20px;padding:44px 34px;max-width:620px;margin:0 auto;text-align:center;}
.optin h2{color:#fff;}
.optin p{color:rgba(255,255,255,.9);}
.optin form{display:flex;flex-direction:column;gap:12px;max-width:420px;margin:18px auto 0;}
.optin input[type=text],.optin input[type=email]{border:none;border-radius:10px;padding:13px 15px;font:inherit;font-size:15px;}
.optin .consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:rgba(255,255,255,.85);text-align:left;}
.optin .consent input{margin-top:4px;}
.optin .btn{background:#fff;color:var(--accent-deep);}
.optin .msg{font-size:14px;margin-top:6px;min-height:18px;}

/* price tag */
.price{font-family:'Quattrocento',serif;font-size:26px;color:var(--accent-deep);font-weight:700;}

/* ---------- footer ---------- */
#ftr{background:#2c302a;color:#c8ccc2;padding:54px 0 34px;font-size:14px;}
#ftr .cols{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;align-items:center;}
#ftr a{color:#c8ccc2;}
#ftr a:hover{color:#fff;}
#ftr .links{display:flex;flex-wrap:wrap;gap:22px;}
#ftr .copy{color:#8a8f83;margin-top:26px;font-size:12.5px;}

.mt0{margin-top:0;} .mb0{margin-bottom:0;}
.lead{font-size:19px;}
.stack>*+*{margin-top:14px;}