/* EcomCOO — warm-editorial design system (shared).
   Tokens matched to the ops-audit booking funnel + command center for brand consistency. */
:root{
  --ink:#2d2925; --muted:#6e655d; --paper:#f7f1e8; --card:#fffdf8;
  --clay:#a8553d; --clay-d:#8f432f; --line:#dfd2c3; --good:#3f6847; --sage:#63745e;
  --maxw:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink);
  background:radial-gradient(circle at 82% 8%,#ead4c1 0,transparent 34%),var(--paper);
  font:17px/1.6 Inter,ui-sans-serif,system-ui,sans-serif; -webkit-font-smoothing:antialiased;
}
.wrap{width:min(var(--maxw),calc(100% - 40px)); margin-inline:auto}
a{color:var(--clay); text-decoration:none}
a:hover{text-decoration:underline}

/* header */
.site-head{position:sticky; top:0; z-index:20; backdrop-filter:blur(8px);
  background:rgba(247,241,232,.82); border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{font:700 20px/1 Georgia,serif; letter-spacing:-.02em; color:var(--ink)}
.brand span{color:var(--clay)}
.nav a{color:var(--ink); font-size:15px; font-weight:600; margin-left:22px}

/* hero + sections */
.hero{padding:76px 0 40px}
.eyebrow{margin:0 0 18px; color:var(--clay); font:750 13px/1 Inter,sans-serif;
  letter-spacing:.14em; text-transform:uppercase}
h1{margin:0; font:600 clamp(42px,6.4vw,72px)/1.02 Georgia,serif; letter-spacing:-.04em; max-width:16ch}
h2{font:600 clamp(28px,3.4vw,38px)/1.12 Georgia,serif; letter-spacing:-.02em; margin:0 0 14px}
h3{font:600 21px/1.25 Georgia,serif; margin:0 0 8px}
.lede{max-width:60ch; margin:26px 0 0; color:var(--muted); font-size:clamp(18px,2vw,22px)}
section{padding:52px 0}
.section-tint{background:rgba(255,253,248,.7); border-block:1px solid var(--line)}

/* CTA */
.cta{display:inline-block; margin-top:30px; padding:16px 26px; border-radius:999px;
  background:var(--clay); color:#fff; font:750 16px/1 Inter,sans-serif;
  box-shadow:0 12px 26px rgba(168,85,61,.26); transition:.15s}
.cta:hover{background:var(--clay-d); transform:translateY(-1px); text-decoration:none}
.cta-row{display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-top:30px}
.cta-note{color:var(--muted); font-size:14px}

/* proof cards / grid */
.grid{display:grid; gap:22px; margin-top:30px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:26px;
  box-shadow:0 16px 44px rgba(68,47,33,.08)}
.card h3{margin-top:0}
.stat{font:600 clamp(34px,4vw,46px)/1 Georgia,serif; color:var(--ink)}
.stat + p{margin:6px 0 0; color:var(--muted); font-size:15px}
.trust{display:flex; gap:10px; align-items:center; color:var(--muted); font-size:14px; margin-top:26px}
.trust:before{content:'✓'; display:grid; place-items:center; width:26px; height:26px;
  color:#fff; background:var(--sage); border-radius:50%; font-weight:800; flex:0 0 auto}

/* blog */
.post-list{display:grid; gap:20px; margin-top:30px}
.post-item{display:block; background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:24px 26px; color:inherit}
.post-item:hover{text-decoration:none; border-color:var(--clay)}
.post-item .kicker{color:var(--clay); font:750 12px/1 Inter,sans-serif;
  letter-spacing:.1em; text-transform:uppercase}
.post-item h3{margin:10px 0 6px}
.post-item p{margin:0; color:var(--muted); font-size:15px}
article.post{max-width:72ch; margin-inline:auto}
article.post p{margin:18px 0}
article.post h2{margin-top:40px}
.embed{position:relative; margin:32px auto; max-width:340px}
.embed .frame{position:relative; padding-bottom:177.78%; height:0; border-radius:16px;
  overflow:hidden; border:1px solid var(--line); box-shadow:0 16px 44px rgba(68,47,33,.1)}
.embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* dark proof card + dark CTA (matches ARCHIE pillar draft) */
.card-dark{background:#2a2521; color:#f3ece2; border:1px solid #3a332c; border-radius:18px;
  padding:30px; box-shadow:0 20px 50px rgba(40,28,20,.22)}
.card-dark .kicker{color:var(--clay); font:750 12px/1 Inter,sans-serif; letter-spacing:.12em; text-transform:uppercase}
.card-dark p{color:#d8cdbf}
.card-dark .stat{color:var(--clay)}
.card-dark .stat.plain{color:#f3ece2}
.proof-figs{display:flex; gap:40px; flex-wrap:wrap; margin-top:20px}
.section-dark{background:#2a2521; color:#f3ece2; border-radius:20px; padding:44px; text-align:center}
.section-dark h2{color:#fff}
.section-dark .lede{color:#d8cdbf}

/* video gallery */
.video-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:26px; margin-top:30px; align-items:start}
.vid{margin:0}
.vid .embed{margin:0 auto}
.vid figcaption{margin:14px 4px 0; color:var(--ink); font:600 16px/1.35 Georgia,serif; text-align:center}
@media(max-width:820px){ .video-grid{grid-template-columns:1fr} }

/* footer */
.site-foot{border-top:1px solid var(--line); margin-top:40px; padding:34px 0; color:var(--muted); font-size:14px}
.site-foot .wrap{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}

@media(max-width:820px){
  .grid.cols-3,.grid.cols-2{grid-template-columns:1fr}
  .nav a:not(.cta){display:none}
  .hero{padding:52px 0 30px}
}