/* ============================================
   SageDash — PT Sans + clean banded layout
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap');

/* Tokens */
:root{
  --bg:#ffffff;
  --ink:#2f2f2d;
  --sage:#8f9b79;       /* buttons */
  --link:#945e5b;       /* warm terracotta (links + active nav) */
  --hover:#3a342d;      /* rich brown hover */
  --alt:#f4f2ef;        /* light band / card bg */
  --card:#ffffff;
  --border:#d9d2c9;     /* separators */
  --muted:#666462;

  --radius:14px;
  --radius-lg:18px;

  --shadow-s:0 1px 2px rgba(17,24,39,.06);
  --shadow-m:0 12px 28px rgba(17,24,39,.10);
}

/* Base */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family:"PT Sans", -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:16px; line-height:1.7;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
p{ margin:.6rem 0 }
.center{ text-align:center }
.muted{ color:var(--muted) }
.no-bold{ font-weight:400 !important }

/* Links & buttons */
a{ color:var(--link); text-decoration:none }
a:hover{ color:var(--hover); text-decoration:underline }

.btn{
  display:inline-block; border:1px solid var(--border);
  background:#efeae3; color:#3a342d;
  padding:11px 16px; border-radius:12px; font-weight:700;
  box-shadow:var(--shadow-s); cursor:pointer; transition:transform .15s ease, filter .15s ease;
}
.btn:hover{ filter:brightness(0.97); transform:translateY(-1px) }
.btn:focus-visible{ outline:3px solid rgba(138,78,75,.30); outline-offset:2px }
.btn-sage{ background:var(--sage); color:#fff; border:none }
.btn-sage:hover{ filter:brightness(0.93) }
.btn-dark{ background:var(--hover); color:#fff; border:none }

/* Layout */
.wrap{ max-width:1140px; margin:0 auto; padding:0 20px }

/* Header (partial) */
.nav{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:28px 0 14px; background:#fff;
  border-bottom:1px solid var(--border);
}
.nav-left{ display:flex; align-items:center; gap:10px }

/* Logo */
.logo{
  width:229px; height:100px;
  object-fit:contain; object-position:left center; display:block
}
@media (max-width:640px){
  .logo{ width:190px; height:84px }
}

.nav-right{ display:flex; align-items:center; gap:18px }
.nav-link{ color:var(--ink); font-weight:700; text-decoration:none; padding:6px 2px }
.nav-link:hover{ color:var(--hover); text-decoration:underline }
.nav-link.active{ color:var(--link); text-decoration:underline }

/* Bands & sections */
.band{ width:100%; }
.band--white{ background:#fff }
.band--alt{ background:var(--alt) }
.section{ padding:48px 0 }
.section.narrow{ max-width:820px; margin:0 auto }

/* Headings */
.page-title{
  font-size:clamp(22px, 3vw, 28px); /* default smaller headline */
  color:var(--hover);
  font-weight:400;
  margin:0 0 8px;
}
/* Larger title for About / How It Works */
.page-title-lg{
  font-size:clamp(24px, 3.6vw, 32px);
  font-weight:400;
  color:var(--hover);
}

.lead{
  font-size:clamp(16px,2.2vw,19px);
  color:#55524f;
  margin:6px auto 0;
}
/* Slogan: smaller than page-title + bold */
.slogan{
  margin:8px 0 4px;
  color:var(--hover);
  font-weight:700;
  font-size:clamp(18px,2.6vw,22px);
  line-height:1.25;
}

/* Launch line */
.launch-line{
  font-size:clamp(24px, 3.6vw, 34px);
  color:var(--hover);
  font-weight:400;
  line-height:1.15;
  margin:36px 0 40px;
}

/* Divider title */
.section-title{
  font-size:clamp(22px,3vw,30px);
  color:var(--hover);
  font-weight:400;
  margin:0;
}
.divider{
  height:1px; background:var(--border);
  margin:14px auto 18px; width:min(120px,20%);
}

/* Countdown */
.countdown{
  margin:12px auto 0;
  display:flex; justify-content:center; align-items:center; gap:12px;
  flex-wrap:wrap;
}
.timebox{
  background:#fff; border:1px solid var(--border); border-radius:12px;
  padding:10px 14px; min-width:86px; text-align:center; box-shadow:var(--shadow-s)
}
.timebox .num{ font-size:22px; font-weight:700; color:var(--hover); display:block; line-height:1.1 }
.timebox .lab{ font-size:12px; color:var(--muted) }

/* Inline form (beta invite) */
.inline-form{
  display:grid; grid-template-columns: 2fr auto; gap:12px; align-items:center;
  margin-top:14px; padding:14px; border:1px solid var(--border); border-radius:12px; background:#fff;
}
.inline-form input{
  width:100%; padding:14px 16px; border:1px solid var(--border); border-radius:14px; background:#fff; color:#2f2f2d; font:inherit; min-height:46px;
}
.inline-form .btn{ font-size:clamp(16px,2.4vw,18px); padding:12px 20px; border-radius:14px }
@media (max-width:720px){
  .inline-form{ grid-template-columns:1fr }
}

/* Cards & grids */
.cards{ display:grid; gap:18px; margin-top:18px }
.cards.two{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.cards.three{ grid-template-columns:repeat(3,minmax(0,1fr)) }
@media (max-width:980px){ .cards.three{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:640px){ .cards.two,.cards.three{ grid-template-columns:1fr } }

.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:18px;
  box-shadow:var(--shadow-s); transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-m) }
.card-title{ color:var(--hover); margin-bottom:6px; font-weight:400 }
.card-text{ color:var(--ink) }

/* How it works (page) */
.steps{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0; margin-top:10px; align-items:stretch;
}
.steps .card{
  background:transparent; border:none; box-shadow:none; padding:20px 22px;
}
.steps .card + .card{ border-left:1px solid var(--border) }
.step-label{
  background:var(--sage); color:#fff; font-weight:700;
  padding:7px 14px; border-radius:999px; font-size:15px; letter-spacing:.2px;
  display:block; width:max-content; margin:0 auto 8px;
}
.steps .card .card-title{
  font-size:clamp(20px,2.8vw,26px);
  font-weight:400 !important; text-align:center;
}
@media (max-width:980px){
  .steps{ grid-template-columns:1fr }
  .steps .card + .card{ border-left:none; border-top:1px solid var(--border) }
}

/* Sample lines */
.lines{ list-style:none; margin:10px 0 0; padding:0 }
.lines li{
  background:#faf9f8; border:1px solid var(--border);
  border-radius:12px; padding:10px 12px; margin:8px 0; color:var(--ink)
}
#samples .card .card-title{
  font-size:20px; font-weight:700 !important; color:var(--hover);
}

/* Pricing */
.pricing{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0; margin-top:10px;
}
.pricing .card.plan{
  background:transparent; border:none; box-shadow:none; padding:22px; text-align:center;
}
.pricing .card.plan + .card.plan{ border-left:1px solid var(--border) }
.pricing .card.plan .card-title{
  font-size:clamp(21px,3vw,29px); font-weight:400 !important;
}
.pricing .card.plan .btn{
  font-size:clamp(16px,2.4vw,18px); padding:12px 20px; border-radius:14px;
}
.price{ font-weight:700; color:var(--hover); font-size:20px; margin:8px 0 }
@media (max-width:980px){
  .pricing{ grid-template-columns:1fr }
  .pricing .card.plan + .card.plan{ border-left:none; border-top:1px solid var(--border) }
}

/* Forms (Support etc.) */
.form label{ font-weight:700; color:var(--ink) }
.form .control{
  width:100%; padding:14px 16px; border:1px solid var(--border);
  border-radius:14px; background:#fff; color:#2f2f2d; font:inherit; min-height:46px;
}
.form textarea.control{ min-height:140px; line-height:1.5; resize:vertical; }
.form .actions{ margin-top:10px; text-align:left }

/* Blog layout */
.grid-2col{ display:grid; grid-template-columns: 2fr 1fr; gap:22px; }
@media (max-width:980px){ .grid-2col{ grid-template-columns:1fr } }
.post-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
@media (max-width:860px){ .post-grid{ grid-template-columns:1fr } }
.post-card{
  background:var(--alt); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px;
}
.post-card .post-title{
  font-size:clamp(20px,3vw,24px); color:var(--hover); font-weight:400; margin:0 0 6px;
}
.blog-side-title{
  font-size:clamp(20px,3vw,24px); color:var(--hover); font-weight:400; margin:0 0 10px;
}
.blog-side-list{ list-style:none; margin:0; padding:0 }
.blog-side-list li{ padding:8px 0; border-bottom:1px solid var(--border) }
.blog-side-list li:last-child{ border-bottom:none }

/* Footer (partial) */
.footer{
  border-top:1px solid var(--border);
  color:#6d6b69; font-size:14px;
  padding:22px 0; margin-top:0;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.footer a{ color:inherit }
.footer a:hover{ color:var(--hover) }