:root{
  /* Denwise brand palette (handoff, 2026-06-26): deep charcoal green primary,
     off-white base, muted canvas, terracotta + gold warm accents. */
  --bg:#FAF8F5; --ink:#1A2F26; --teal:#1A2F26; --teal-dark:#0f1f18;
  --muted:#6b6b62; --line:#e7ddcd; --alt:#F0EAE1;
  --terra:#C4633E; --terra-soft:#D4A373; --gold:#C79A2E;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:18px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:760px; margin:0 auto; padding:0 22px;}
h1,h2,h3{font-weight:500; line-height:1.25; letter-spacing:-0.01em;}
h1{font-size:2.6rem; margin:0 0 18px;}
h2{font-size:1.9rem; margin:0 0 16px;}
h3{font-size:1.2rem; margin:0 0 8px;}
p{margin:0 0 16px;}
a{color:var(--terra); text-decoration:none;}
a:hover{text-decoration:underline;}
em{font-style:normal; color:var(--terra); font-weight:500;}
.center{text-align:center;}

/* buttons */
.btn{
  display:inline-block; background:var(--teal); color:#fff; font-weight:500;
  padding:13px 26px; border-radius:4px; text-decoration:none; font-size:1rem;
  border:1px solid var(--teal); transition:background .12s;
}
.btn:hover{background:var(--teal-dark); text-decoration:none;}
.btn-ghost{background:transparent; color:var(--teal);}
.btn-ghost:hover{background:rgba(26,47,38,.07);}
.btn-block{display:block; text-align:center;}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin:22px 0 10px;}
.cta-row .btn{flex:0 0 auto;}

/* brand header */
.sitehead{border-bottom:1px solid var(--line); background:var(--bg);}
.sitehead .bar{max-width:760px; margin:0 auto; padding:13px 22px; display:flex; align-items:center; justify-content:space-between;}
.brandlock{display:flex; align-items:center; gap:9px; text-decoration:none;}
.brandlock img{width:30px; height:30px;}
.brandlock span{font-size:1.2rem; font-weight:600; color:var(--ink); letter-spacing:-.01em;}
.sitehead .btn{padding:8px 18px; font-size:.9rem;}

/* hero */
.hero{padding:72px 0 40px; background:var(--bg);}
.lead{font-size:1.22rem; color:var(--muted);}
.fineprint{font-size:.86rem; color:var(--muted); margin-top:8px;}
.hero-shot{display:block; width:100%; height:auto; border-radius:12px; box-shadow:0 14px 44px rgba(26,47,38,.16); margin-top:12px;}

/* sections */
.section{padding:56px 0; border-top:1px solid var(--line);}
.section.alt{background:var(--alt);}
.sub{font-size:1.05rem; color:var(--muted);}

/* media placeholders */
.media-slot{
  background:var(--alt); border:1px dashed #cfccc4; border-radius:8px;
  color:var(--muted); font-size:.92rem; display:flex; align-items:center;
  justify-content:center; text-align:center; padding:14px; margin:24px 0 4px;
}
.section.alt .media-slot{background:#fff;}
.media-wide{aspect-ratio:16/9;}

/* what-it-is grid */
.grid2{list-style:none; padding:0; margin:24px 0 0; display:grid; gap:12px 28px;}
.grid2 li{padding-left:18px; position:relative;}
.grid2 li::before{content:""; position:absolute; left:0; top:.78em; width:7px; height:7px; border-radius:50%; background:var(--teal);}

/* pillars */
.pillars{display:grid; gap:22px; margin:8px 0 30px;}
.pillar{background:var(--alt); border:1px solid var(--line); border-radius:10px; padding:18px 20px;}
.section.alt .pillar{background:#fff;}
.pillar p{margin:0; color:var(--muted); font-size:.98rem;}

/* comparison table */
.compare{width:100%; border-collapse:collapse; margin-top:10px; font-size:.95rem;}
.compare th,.compare td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:top;}
.compare thead th{font-weight:600; border-bottom:2px solid var(--ink);}
.compare th:last-child,.compare td:last-child{color:var(--teal); font-weight:500;}
.compare tbody tr:nth-child(odd){background:rgba(0,0,0,.025);}

/* steps */
.steps{margin:18px 0 0; padding-left:0; counter-reset:step; list-style:none;}
.steps li{position:relative; padding:0 0 18px 48px; counter-increment:step;}
.steps li::before{
  content:counter(step); position:absolute; left:0; top:0; width:32px; height:32px;
  background:var(--teal); color:#fff; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-weight:600; font-size:.95rem;
}

/* features */
.feature{padding:16px 0; border-bottom:1px solid var(--line);}
.feature:last-child{border-bottom:none;}
.feature p{margin:0; color:var(--muted);}

/* pricing */
.plans{display:grid; gap:18px; margin:26px 0 12px;}
.plan{background:#fff; border:1px solid var(--line); border-radius:12px; padding:22px 20px; position:relative; text-align:center;}
.plan.featured{border:2px solid var(--terra);}
.plan .price{font-size:2rem; font-weight:500; margin:6px 0 2px;}
.plan .price-sub{font-size:1rem; color:var(--muted); font-weight:400;}
.plan .per{font-size:.9rem; color:var(--muted); margin:0 0 16px;}
.badge{position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--terra); color:#fff; font-size:.68rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:4px 12px; border-radius:20px;}
.renew-note{font-size:.92rem; color:var(--muted); margin-top:18px;}
.hw-note{font-size:.92rem; color:var(--muted); margin-top:10px;}

/* faq */
.faq details{border-bottom:1px solid var(--line); padding:14px 0;}
.faq summary{cursor:pointer; font-weight:500; list-style:none;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::before{content:"+ "; color:var(--teal); font-weight:600;}
.faq details[open] summary::before{content:"– ";}
.faq details p{margin:10px 0 0; color:var(--muted);}

/* final cta */
.cta-final{background:var(--teal); color:#fff;}
.cta-final h2,.cta-final .lead{color:#fff;}
.cta-final .btn{background:#fff; color:var(--teal); border-color:#fff;}
.cta-final .btn:hover{background:#eef6f3;}
.cta-final .btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.6);}
.cta-final .btn-ghost:hover{background:rgba(255,255,255,.12);}
.cta-final .cta-row{justify-content:center;}

/* footer */
.footer{background:var(--ink); color:#cfcdc7; padding:40px 0;}
.footer .brand{font-size:1.2rem; color:#fff; font-weight:500; margin:0 0 10px;}
.footer nav{display:flex; flex-wrap:wrap; gap:8px 20px; margin-bottom:14px;}
.footer nav a{color:#cfcdc7;}
.footer nav a:hover{color:#fff;}
.footer .copy{font-size:.84rem; color:#8d8a83; margin:0;}

/* desktop */
@media (min-width:768px){
  h1{font-size:3.1rem;}
  .grid2{grid-template-columns:1fr 1fr;}
  .pillars{grid-template-columns:1fr 1fr 1fr;}
  .plans{grid-template-columns:1fr 1fr 1fr; align-items:start;}
  .plan.featured{transform:translateY(-8px);}
}