/* ===== Hearth pricing — tokens ===== */
:root{
  --canvas:#f9fafc;
  --accent:#ff5924;
  --ink:#000000;
  --ink-soft:#24272d;
  --body:#4a5465;
  --slate:#3a475a;
  --muted:#717286;
  --hair:#e2e2e2;
  --hair-table:#ececec;
  --free-bg:#f3f0e7;
  --family-bg:#dde9d3;
  --compare-bg:#fff1f1;
  --display:'Milanesa Serif', Georgia, 'Times New Roman', serif;
  --sans:'Nohemi', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:110px;}
body{
  font-family:var(--sans);
  background:var(--canvas);
  color:var(--body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none;}
img{display:block;}

/* ===== Buttons ===== */
.btn{
  font-family:var(--sans);
  font-size:15px;
  line-height:18px;
  border:none;
  cursor:pointer;
  border-radius:100px;
  background:transparent;
  transition:transform .12s ease, background-color .15s ease, color .15s ease;
}
.btn:active{transform:translateY(1px);}
.btn-ghost-accent{
  color:var(--accent);
  border:1px solid var(--accent);
  padding:11px 27px;
  font-size:15px;
}
.btn-ghost-accent:hover{background:var(--accent);color:#fff;}
.btn-lg{font-size:16px;line-height:19.2px;padding:14px 36px;}
.btn-outline-dark{
  width:100%;
  height:43px;
  color:var(--ink);
  border:1px solid var(--ink);
}
.btn-outline-dark:hover{background:var(--ink);color:#fff;}
.btn-outline-light{
  width:100%;
  height:43px;
  color:#fff;
  border:1px solid #fff;
}
.btn-outline-light:hover{background:#fff;color:var(--ink);}

/* ===== Header ===== */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,231,223,.82);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
}
.header-inner{
  max-width:1440px;
  margin:0 auto;
  height:95px;
  padding:0 64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.logo{
  font-family:var(--display);
  font-size:30px;
  letter-spacing:-1px;
  color:var(--ink);
}
.nav{display:flex;gap:42px;}
.nav-link{
  font-size:16px;
  color:var(--ink-soft);
  position:relative;
}
.nav-link:hover{color:var(--accent);}

/* ===== Hero ===== */
.hero{
  background:linear-gradient(180deg, #ffe7df 0%, #fff2ee 30%, var(--canvas) 78%);
  padding:120px 24px 110px;
  text-align:center;
}
.hero-title{
  font-family:var(--display);
  font-weight:400;
  font-size:112px;
  line-height:.9;
  letter-spacing:-5px;
  color:var(--ink);
  max-width:1005px;
  margin:0 auto;
}
.hero-sub{
  font-size:21px;
  line-height:1.6;
  letter-spacing:-.3px;
  color:var(--body);
  max-width:582px;
  margin:34px auto 0;
}
.hero .btn{margin-top:42px;}

/* ===== Section headings ===== */
.section-title{
  font-family:var(--display);
  font-weight:400;
  font-size:54px;
  line-height:1.05;
  letter-spacing:-2.2px;
  color:var(--ink);
  text-align:center;
}
.section-sub{
  font-size:18px;
  color:var(--muted);
  text-align:center;
  margin-top:12px;
}

/* ===== Pricing ===== */
.pricing{padding:24px 24px 96px;}
.plans{
  max-width:1200px;
  margin:56px auto 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  align-items:start;
}
.plan{
  border-radius:16px;
  padding:44px 38px 40px;
  display:flex;
  flex-direction:column;
}
.plan-free{background:var(--free-bg);}
.plan-family{background:var(--family-bg);}
.plan-plus{
  background:linear-gradient(180deg, #000 0%, #2f343c 100%);
  box-shadow:0 40px 60px rgba(255,167,129,.34);
  margin-top:-14px;
  padding-bottom:54px;
}
.plan-top{display:flex;align-items:center;justify-content:space-between;}
.plan-label{
  font-size:15px;
  letter-spacing:1.5px;
  color:var(--muted);
  font-weight:400;
}
.plan-label-accent{color:#ffb59e;}
.plan-label-green{color:#5a6b50;}
.badge-popular{
  font-size:12px;
  letter-spacing:1px;
  color:var(--accent);
  border:1px solid var(--accent);
  border-radius:100px;
  padding:5px 14px;
}
.plan-price{display:flex;align-items:flex-end;gap:6px;margin-top:24px;}
.price{
  font-family:var(--display);
  font-weight:400;
  font-size:64px;
  line-height:1;
  letter-spacing:-2px;
  color:var(--ink);
}
.price-light{color:#fff;}
.per{font-size:16px;color:var(--muted);padding-bottom:8px;}
.per-light{color:#afb5c1;}
.plan-desc{
  font-size:16px;
  line-height:1.55;
  color:var(--body);
  margin-top:18px;
  min-height:50px;
}
.plan-desc-dark{color:var(--slate);}
.plan-desc-light{color:#cfd3da;}
.plan .btn{margin-top:24px;}
.features{
  list-style:none;
  margin-top:34px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.features li{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:15px;
  color:var(--slate);
}
.features-light li{color:#e6e8ec;}
.check{width:18px;height:18px;flex:0 0 18px;}

/* ===== Comparison ===== */
.compare{background:var(--compare-bg);padding:100px 24px 110px;}
.compare .section-title{margin-bottom:54px;}
.compare-table{
  max-width:1000px;
  margin:0 auto;
  background:#fff;
  border-radius:16px;
  padding:0 32px;
  overflow:hidden;
}
.ct-row{
  display:grid;
  grid-template-columns:minmax(220px,1fr) 134px 186px 156px;
  align-items:center;
  border-top:1px solid var(--hair-table);
}
.ct-head{border-top:none;}
.ct-head .ct-feature,.ct-head .ct-col{min-height:69px;display:flex;align-items:center;}
.ct-row .ct-feature{min-height:63px;display:flex;align-items:center;}
.ct-row.ct-head .ct-col,.ct-row.ct-last .ct-col,.ct-head .ct-feature,.ct-last .ct-feature{min-height:56px;}
.ct-feature{
  font-size:15px;
  color:var(--slate);
  text-align:left;
}
.ct-head .ct-feature{font-size:16px;color:var(--muted);}
.ct-col{
  font-size:15px;
  color:var(--muted);
  text-align:center;
  justify-content:center;
  display:flex;
  align-items:center;
  min-height:63px;
}
.ct-head .ct-col{font-size:16px;color:var(--ink);font-weight:400;}
.ct-dash{color:#c4c7cd;}
.ct-col .check{width:18px;height:18px;}

/* ===== FAQ ===== */
.faq{padding:100px 24px 40px;}
.faq .section-title{margin-bottom:60px;}
.faq-list{max-width:760px;margin:0 auto;}
.faq-item{border-top:1px solid var(--hair);}
.faq-item:last-child{border-bottom:1px solid var(--hair);}
.faq-q{
  width:100%;
  text-align:left;
  background:none;
  border:none;
  cursor:pointer;
  font-family:var(--display);
  font-weight:400;
  font-size:26px;
  letter-spacing:-.6px;
  line-height:1.3;
  color:var(--ink);
  padding:33px 0 0;
}
.faq-a{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .28s ease, opacity .2s ease, padding .28s ease;
  opacity:0;
}
.faq-a>p{
  overflow:hidden;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  color:var(--body);
}
.faq-item.is-open .faq-a{
  grid-template-rows:1fr;
  opacity:1;
  padding:12px 0 33px;
}

/* ===== Final CTA ===== */
.final-cta{
  background:linear-gradient(180deg, var(--canvas) 0%, #fff2ee 60%, #ffe7df 100%);
  padding:110px 24px 120px;
  text-align:center;
}
.final-title{
  font-family:var(--display);
  font-weight:400;
  font-size:72px;
  line-height:.95;
  letter-spacing:-3px;
  color:var(--ink);
  max-width:763px;
  margin:0 auto;
}
.final-cta .btn{margin-top:44px;}

/* ===== Footer ===== */
.site-footer{
  background:var(--canvas);
  border-top:1px solid var(--hair);
  padding:73px 0 0;
}
.footer-inner{
  max-width:1320px;
  margin:0 auto;
  padding:0 120px;
  display:flex;
  justify-content:space-between;
  gap:48px;
  flex-wrap:wrap;
}
.footer-brand{max-width:282px;}
.footer-logo{
  font-family:var(--display);
  font-size:28px;
  letter-spacing:-1px;
  color:var(--ink);
}
.footer-tag{
  font-size:15px;
  line-height:1.6;
  color:var(--muted);
  margin-top:16px;
}
.footer-cols{display:flex;gap:48px;flex-wrap:wrap;}
.footer-col{display:flex;flex-direction:column;min-width:80px;}
.footer-col h3{
  font-size:14px;
  letter-spacing:1px;
  font-weight:400;
  color:var(--ink);
  margin-bottom:14px;
}
.footer-col a{
  font-size:15px;
  line-height:28px;
  color:var(--body);
}
.footer-col a:hover{color:var(--accent);}
.footer-bottom{
  max-width:1320px;
  margin:64px auto 0;
  padding:24px 120px 36px;
  border-top:1px solid var(--hair);
}
.copyright{font-size:14px;color:#a6a8aa;}

/* ===== Toast ===== */
.toast{
  position:fixed;
  left:50%;
  bottom:32px;
  transform:translate(-50%,140%);
  background:var(--ink);
  color:#fff;
  font-size:15px;
  padding:14px 24px;
  border-radius:100px;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
  opacity:0;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
  z-index:100;
  pointer-events:none;
  max-width:90vw;
}
.toast.show{transform:translate(-50%,0);opacity:1;}

/* ===== Responsive ===== */
@media (max-width:1100px){
  .hero-title{font-size:84px;letter-spacing:-3px;}
  .final-title{font-size:56px;letter-spacing:-2px;}
  .plans{grid-template-columns:1fr;max-width:480px;}
  .plan-plus{margin-top:0;}
  .header-inner{padding:0 32px;}
  .footer-inner,.footer-bottom{padding-left:40px;padding-right:40px;}
}
@media (max-width:840px){
  .nav{display:none;}
  .compare-table{padding:0 16px;overflow-x:auto;}
  .ct-row{grid-template-columns:minmax(160px,1fr) 90px 110px 110px;}
}
@media (max-width:600px){
  .hero{padding:72px 20px 70px;}
  .hero-title{font-size:56px;letter-spacing:-2px;}
  .hero-sub{font-size:18px;}
  .section-title{font-size:36px;letter-spacing:-1.4px;}
  .final-title{font-size:40px;letter-spacing:-1.5px;}
  .faq-q{font-size:22px;}
  .footer-cols{gap:32px;}
}