/* ============================================================
   Deeper Foundations — Tools Hub shared brand stylesheet
   Used by the hub overview page and every tool's wrapper.
   Edit colors/fonts here once and the whole site updates.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,600;0,700;1,400&family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
  --gold:#CEA129; --black:#000000; --olive:#546418; --forest:#1B3A2D;
  --muted:#666666; --cream:#FAF7EF; --warmgray:#F5F0E8; --beige:#F0EBE0;
  --line:#E2DDD0; --white:#FFFFFF; --page:#EFE9DC;
  --good:#3F7A3F; --over:#B8862B; --under:#B5524A;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:'Inter',sans-serif;color:var(--black);background:var(--page);line-height:1.5;font-size:15px;}
a{color:var(--olive);}

.wrap{max-width:1080px;margin:0 auto;padding:0 20px 90px;}

/* ---------- Masthead ---------- */
header.masthead{background:var(--forest);color:var(--cream);padding:46px 20px 40px;text-align:center;}
header.masthead .kicker{letter-spacing:.22em;text-transform:uppercase;font-size:11px;color:var(--gold);font-weight:600;margin-bottom:12px;}
header.masthead h1{font-family:'Spectral',serif;font-weight:700;font-size:42px;margin:0 0 12px;color:var(--white);}
header.masthead p{margin:0 auto;max-width:660px;color:#D9D2C2;font-size:16px;}

/* ---------- Shared top bar (on tool pages) ---------- */
.df-topbar{background:var(--forest);color:var(--cream);display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:11px 22px;font-size:13px;position:sticky;top:0;z-index:50;}
.df-topbar a.back{color:var(--gold);text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:7px;}
.df-topbar a.back:hover{color:var(--white);}
.df-topbar .crumb{color:#C9D6C4;letter-spacing:.04em;}
.df-topbar .crumb b{color:var(--white);font-weight:600;}

/* ---------- Hub intro ---------- */
.hub-intro{margin:38px 0 30px;}
.hub-intro h2{font-family:'Spectral',serif;font-weight:700;font-size:26px;margin:0 0 8px;color:var(--black);}
.hub-intro .tagline{font-style:italic;color:var(--muted);font-size:15px;margin:0 0 14px;}
.hub-intro p{margin:0;color:#333;max-width:760px;}

/* ---------- Tool card grid ---------- */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;}
.tool-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:14px;
  padding:26px 24px;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s,border-color .15s;position:relative;overflow:hidden;}
.tool-card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--olive);}
.tool-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(27,58,45,.13);border-color:var(--gold);}
.tool-card .badge{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--olive);margin-bottom:14px;}
.tool-card h3{font-family:'Spectral',serif;font-weight:700;font-size:23px;margin:0 0 8px;color:var(--black);}
.tool-card .desc{font-size:14px;color:#444;margin:0 0 20px;flex:1;}
.tool-card .cta{font-size:13px;font-weight:600;color:var(--olive);display:inline-flex;align-items:center;gap:7px;}
.tool-card:hover .cta{color:var(--gold);}
.tool-card .cta .arrow{transition:transform .15s;}
.tool-card:hover .cta .arrow{transform:translateX(4px);}

/* Coming-soon (placeholder) tools */
.tool-card.coming{cursor:default;opacity:.92;}
.tool-card.coming::before{background:var(--beige);}
.tool-card.coming:hover{transform:none;box-shadow:none;border-color:var(--line);}
.tool-card.coming .badge{color:var(--muted);}
.tool-card.coming .cta{color:var(--muted);}
.tool-card .pill{position:absolute;top:18px;right:18px;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;background:var(--beige);color:var(--olive);padding:4px 10px;border-radius:999px;}

/* ---------- Footer ---------- */
.df-footer{text-align:center;color:var(--muted);font-size:12px;margin-top:48px;padding-top:24px;border-top:1px solid var(--line);}
.df-footer b{color:var(--olive);}

/* ---------- Placeholder page body ---------- */
.placeholder{max-width:640px;margin:70px auto;text-align:center;padding:0 20px;}
.placeholder .mark{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:14px;}
.placeholder h1{font-family:'Spectral',serif;font-weight:700;font-size:34px;margin:0 0 14px;color:var(--black);}
.placeholder p{color:#444;font-size:16px;margin:0 0 26px;}
.placeholder .note{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:20px 24px;font-size:13px;color:var(--muted);text-align:left;}
.placeholder .note code{background:var(--warmgray);padding:2px 6px;border-radius:5px;font-size:12px;color:var(--olive);}

@media (max-width:560px){
  header.masthead h1{font-size:32px;}
  .tool-grid{grid-template-columns:1fr;}
}