/* ============================================================
   DOCSHOUND — marketing home
   Warm editorial monochrome. LTSerif display + LTSans UI.
   Shares the design language of the product demo. No build step.
   ============================================================ */

/* ---------- Fonts (local, ./fonts) ---------- */
@font-face { font-family:"LTSans"; src:url("./fonts/LTSans-Extralight.woff2") format("woff2"); font-weight:200; font-display:swap; }
@font-face { font-family:"LTSans"; src:url("./fonts/LTSans-Light.woff2") format("woff2"); font-weight:300; font-display:swap; }
@font-face { font-family:"LTSans"; src:url("./fonts/LTSans-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"LTSans"; src:url("./fonts/LTSans-Medium.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"LTSans"; src:url("./fonts/LTSans-Bold.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"LTSerif"; src:url("./fonts/LTSerif-Extralight.woff2") format("woff2"); font-weight:200; font-display:swap; }
@font-face { font-family:"LTSerif"; src:url("./fonts/LTSerif-Light.woff2") format("woff2"); font-weight:300; font-display:swap; }
@font-face { font-family:"LTSerif"; src:url("./fonts/LTSerif-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"LTSerif"; src:url("./fonts/LTSerif-Medium.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"LTSerif"; src:url("./fonts/LTSerif-Semibold.woff2") format("woff2"); font-weight:600; font-display:swap; }

/* ---------- Tokens ---------- */
:root{
  --canvas:#F2EDE6; --surface:#FBF7F2; --surface-2:#ECE8E1; --soft:#EFE9E1;
  --line:#E0D9CE; --line-soft:#E8E1D7; --line-strong:#D3CABB;
  --ink:#313131; --ink-strong:#111111; --ink-2:#6B655C; --ink-3:#9A9388;
  --cta:#1A1A1A; --cta-hover:#000; --cta-ink:#F5F1EA;
  --serif:"LTSerif",Georgia,"Times New Roman",serif;
  --sans:"LTSans",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:72px;--s9:104px;--s10:140px;
  --maxw:1120px; --radius:14px; --radius-lg:22px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:var(--sans); font-size:17px; font-weight:400; line-height:1.6;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
}
button,input,textarea{font-family:inherit;}
a{color:inherit; text-decoration:none;}
::selection{background:var(--ink-strong); color:var(--cta-ink);}
img,svg,iframe{display:block; max-width:100%;}

/* ---------- Primitives ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--s7);}
.label{font-family:var(--sans); text-transform:uppercase; font-size:11px; font-weight:500; letter-spacing:1.3px; color:var(--ink-3);}
.serif{font-family:var(--serif); font-weight:300;}

/* ---------- Buttons ---------- */
.btn{
  border:1px solid var(--line-strong); background:transparent; color:var(--ink);
  padding:12px 22px; border-radius:999px; font-size:15px; font-weight:500; letter-spacing:.2px;
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  transition:background .18s,border-color .18s,color .18s,transform .05s;
}
.btn:hover{background:var(--surface); border-color:var(--ink-2);}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--cta); border-color:var(--cta); color:var(--cta-ink);}
.btn-primary:hover{background:var(--cta-hover); border-color:var(--cta-hover); color:var(--cta-ink);}
.btn-lg{padding:15px 30px; font-size:16px;}
.btn-invert{background:var(--cta-ink); border-color:var(--cta-ink); color:var(--ink-strong);}
.btn-invert:hover{background:#fff; border-color:#fff; color:var(--ink-strong);}
.btn-on-dark{border-color:rgba(245,241,234,.32); color:var(--cta-ink);}
.btn-on-dark:hover{background:rgba(245,241,234,.08); border-color:rgba(245,241,234,.6); color:var(--cta-ink);}

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{
  position:sticky; top:0; z-index:40; height:70px;
  background:rgba(242,237,230,.84);
  backdrop-filter:saturate(140%) blur(12px); -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--s7);
}
.brandline{display:inline-flex; align-items:center; gap:10px;}
.hound-mark{width:26px; height:26px; color:var(--ink-strong); display:grid; place-items:center;}
.hound-mark svg{width:26px; height:26px;}
.hound-mark.sm, .hound-mark.sm svg{width:22px; height:22px;}
.wordmark{font-family:var(--sans); font-weight:700; font-size:17px; letter-spacing:3.5px; color:var(--ink-strong);}
.nav{display:flex; align-items:center; gap:var(--s7);}
.nav a{font-size:15px; color:var(--ink-2); font-weight:400; letter-spacing:.2px; transition:color .15s;}
.nav a:hover{color:var(--ink-strong);}
.nav .nav-cta{color:var(--cta-ink);}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:var(--s10) 0 var(--s9); border-bottom:1px solid var(--line);}
.hero-wrap{max-width:900px; text-align:center;}
.eyebrow{display:inline-block; margin:0 0 var(--s5);}
.hero-title{
  font-size:clamp(42px,6.4vw,78px); line-height:1.04; letter-spacing:-.015em;
  color:var(--ink-strong); margin:0 auto var(--s6); max-width:16ch;
}
.hero-sub{font-size:clamp(18px,2.1vw,22px); line-height:1.5; color:var(--ink-2); max-width:62ch; margin:0 auto var(--s7);}
.hero-actions{display:flex; gap:var(--s3); flex-wrap:wrap; justify-content:center;}
.hero-actions.center{justify-content:center;}
.hero-foot{margin:var(--s6) 0 0; font-size:14px; color:var(--ink-3); letter-spacing:.2px;}

/* ============================================================
   BANDS / SECTION HEADS
   ============================================================ */
.band{padding:var(--s9) 0; border-bottom:1px solid var(--line);}
.band-soft{background:var(--soft);}
.band-demo{background:var(--surface);}
.sec-head{max-width:var(--maxw); margin:0 0 var(--s8);}
.sec-head.center{text-align:center; margin-left:auto; margin-right:auto; max-width:760px;}
.sec-head .label{display:block; margin-bottom:var(--s4);}
.sec-head h2{font-size:clamp(30px,4.2vw,46px); line-height:1.1; letter-spacing:-.01em; color:var(--ink-strong); margin:0; max-width:20ch;}
.sec-head.center h2{margin:0 auto;}
.sec-lead{font-size:19px; line-height:1.55; color:var(--ink-2); margin:var(--s5) auto 0; max-width:60ch;}
.sec-head:not(.center) .sec-lead{margin-left:0;}

/* ---------- Steps ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s7);}
.step{border-top:1px solid var(--line-strong); padding-top:var(--s5);}
.step-n{display:block; font-size:34px; color:var(--ink-3); font-weight:300; margin-bottom:var(--s4);}
.step h3{font-size:24px; font-weight:400; color:var(--ink-strong); margin:0 0 var(--s3);}
.step p{font-size:16.5px; color:var(--ink-2); margin:0; line-height:1.6;}

/* ---------- Live demo browser frame ---------- */
.browser{
  margin:0; border:1px solid var(--line-strong); border-radius:var(--radius-lg);
  background:var(--surface-2); overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 30px 70px -40px rgba(49,49,49,.45);
}
.browser-bar{
  display:flex; align-items:center; gap:var(--s4); height:48px; padding:0 var(--s4);
  background:var(--surface); border-bottom:1px solid var(--line);
}
.dots{display:inline-flex; gap:7px;}
.dots i{width:11px; height:11px; border-radius:50%; background:var(--line-strong);}
.urlbar{
  flex:1; text-align:center; font-size:13px; color:var(--ink-3); letter-spacing:.3px;
  background:var(--canvas); border:1px solid var(--line); border-radius:999px;
  padding:6px 14px; max-width:360px; margin:0 auto;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.browser-open{font-size:13px; font-weight:500; color:var(--ink-2); white-space:nowrap;}
.browser-open:hover{color:var(--ink-strong);}
.browser-view{background:#F2EDE6;}
.browser-view iframe{width:100%; height:720px; border:0;}
.demo-note{display:block; text-align:center; margin:var(--s5) auto 0; text-transform:none; letter-spacing:.2px; font-size:13.5px; color:var(--ink-3); max-width:60ch;}

/* ---------- Channels ---------- */
.chan-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.chan-card{background:var(--canvas); padding:var(--s6) var(--s6) calc(var(--s6) + 4px);}
.chan-card.quiet{background:var(--surface-2);}
.chan-card h3{font-size:18px; font-weight:500; color:var(--ink-strong); margin:0 0 var(--s3); letter-spacing:.1px;}
.chan-card p{font-size:15.5px; color:var(--ink-2); margin:0; line-height:1.55;}

/* ---------- Verticals ---------- */
.vert-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5);}
.vert-card{
  display:flex; flex-direction:column; gap:var(--s3);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--s6); transition:border-color .16s, transform .16s, box-shadow .16s;
}
.vert-card:hover{border-color:var(--line-strong); transform:translateY(-2px); box-shadow:0 20px 40px -32px rgba(49,49,49,.5);}
.vert-k{font-size:23px; color:var(--ink-strong); font-weight:400;}
.vert-card p{font-size:15.5px; color:var(--ink-2); margin:0; flex:1; line-height:1.55;}
.vert-go{font-size:14px; font-weight:500; color:var(--ink-2); margin-top:var(--s2);}
.vert-card:hover .vert-go{color:var(--ink-strong);}

/* ============================================================
   CTA BAND (dark)
   ============================================================ */
.cta-band{background:var(--cta); color:var(--cta-ink); padding:var(--s10) 0;}
.cta-wrap{text-align:center; max-width:760px;}
.cta-band h2{font-family:var(--serif); font-weight:300; font-size:clamp(32px,4.6vw,52px); line-height:1.08; letter-spacing:-.01em; margin:0 auto var(--s4); color:var(--cta-ink); max-width:18ch;}
.cta-band p{font-size:19px; line-height:1.55; color:rgba(245,241,234,.72); max-width:52ch; margin:0 auto var(--s7);}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{padding:var(--s7) 0; background:var(--canvas);}
.foot-wrap{display:flex; align-items:center; justify-content:space-between; gap:var(--s5);}
.foot-brand{display:inline-flex; align-items:center; gap:9px;}
.foot-brand .wordmark{font-size:15px; letter-spacing:3px;}
.foot-nav{display:flex; gap:var(--s6);}
.foot-nav a{font-size:14px; color:var(--ink-2);}
.foot-nav a:hover{color:var(--ink-strong);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .wrap{padding:0 var(--s6);}
  .topbar{padding:0 var(--s6);}
  .steps{grid-template-columns:1fr; gap:var(--s6);}
  .chan-grid{grid-template-columns:1fr 1fr;}
  .vert-grid{grid-template-columns:1fr;}
  .browser-view iframe{height:640px;}
  .hero{padding:var(--s9) 0 var(--s8);}
  .band{padding:var(--s8) 0;}
}
@media (max-width:680px){
  body{font-size:16px;}
  .topbar{height:60px; padding:0 var(--s5);}
  .nav{gap:var(--s4);}
  .nav a:not(.nav-cta){display:none;}
  .wrap{padding:0 var(--s5);}
  .hero{padding:var(--s8) 0 var(--s7);}
  .hero-title{font-size:clamp(34px,9vw,48px);}
  .bk{display:none;}
  .chan-grid{grid-template-columns:1fr;}
  .browser-bar{height:42px;}
  .urlbar{font-size:12px;}
  .browser-view iframe{height:560px;}
  .foot-wrap{flex-direction:column; align-items:flex-start; gap:var(--s5);}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}