/* RSD Decoder marketing site: shared "Lamplight" system */
:root{
  --linen:#FAF6EE; --card:#FFFDF8; --ink:#2A241D; --muted:#6E6357; --faint:#998C7D;
  --border:#E9DFCC; --border-soft:#F1E9D9;
  --spruce:#2E6B4E; --spruce-deep:#255A41; --spruce-wash:#EAF2EC;
  --amber:#7E4F0B; --amber-bright:#C97F1F; --amber-wash:#F7ECD6;
  --rose:#A3453A; --rose-wash:#F8ECE7;
  --display:"Bricolage Grotesque", Georgia, serif;
  --body:"Figtree", -apple-system, "Segoe UI", sans-serif;
  --voice:"Lora", Georgia, serif;
  --r-lg:20px; --r-md:14px; --r-sm:9px;
  --shadow:0 1px 2px rgba(64,52,37,.05), 0 6px 24px -8px rgba(64,52,37,.10);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--linen); color:var(--ink); font-family:var(--body); font-size:16.5px; line-height:1.55; -webkit-font-smoothing:antialiased}
::selection{background:var(--amber-wash)}
:focus-visible{outline:2px solid var(--spruce); outline-offset:3px; border-radius:4px}
img{max-width:100%}
.wrap{width:100%; max-width:1140px; margin-inline:auto; padding-inline:24px}
.narrow{max-width:720px; margin-inline:auto}

/* ---------- shared chrome ---------- */
header.site{padding:22px 0}
.nav{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap}
.wordmark{font-family:var(--display); font-weight:800; font-size:22px; letter-spacing:-.01em; color:var(--ink); text-decoration:none}
.wordmark .wm-rsd{color:var(--spruce)}
.nav-links{display:flex; gap:22px; align-items:center; font-size:15px}
.nav-links a{color:var(--muted); text-decoration:none; font-weight:600}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--spruce-deep)}
.nav-links a.nav-cta{
  color:#fff; background:var(--spruce); border-radius:999px; padding:10px 18px;
  transition:background .15s ease;
}
.nav-links a.nav-cta:hover{background:var(--spruce-deep); color:#fff}
@media(max-width:560px){.nav{justify-content:center}.nav-links{gap:16px}}

footer.site{margin-top:76px; border-top:1px solid var(--border); background:#F4EEE1}
.foot-inner{padding:34px 0 40px; font-size:14px; color:var(--muted)}
.foot-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px}
@media(min-width:900px){.foot-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot-grid h3{font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-bottom:8px}
.foot-grid p{max-width:44ch; text-wrap:pretty}
.foot-grid a{color:var(--spruce-deep); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(46,107,78,.3)}
.foot-grid a:hover{border-bottom-color:var(--spruce)}
.foot-legal{margin-top:26px; padding-top:18px; border-top:1px solid var(--border); font-size:13px; color:var(--muted); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap}
.foot-legal .credit a{color:var(--spruce-deep); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(46,107,78,.3)}
@media(max-width:560px){.foot-legal{flex-direction:column; align-items:center; text-align:center; gap:10px}}

/* ---------- type + common blocks ---------- */
.eyebrow{font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--faint);
  display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:16px; text-align:center}
.eyebrow::before,.eyebrow::after{content:""; height:1px; background:var(--border); flex:1; max-width:220px}
h1.display{font-family:var(--display); font-weight:800; letter-spacing:-.025em; line-height:1.08; text-wrap:balance}
.btn{display:inline-flex; align-items:center; gap:9px; border:none; border-radius:999px; font-weight:600; font-size:16px;
  padding:14px 26px; line-height:1; cursor:pointer; text-decoration:none; transition:background .15s ease, transform .12s ease}
.btn-primary{background:var(--spruce); color:#fff; box-shadow:0 1px 2px rgba(37,90,65,.3)}
.btn-primary:hover{background:var(--spruce-deep)}
.btn-secondary{background:transparent; color:var(--spruce); border:1.5px solid var(--border); padding:13px 24px}
.btn-secondary:hover{border-color:var(--spruce); background:var(--spruce-wash)}
.strike{position:relative; white-space:nowrap; color:var(--faint)}
.strike::after{content:""; position:absolute; left:-2%; right:-2%; top:54%; height:.09em; min-height:3px;
  background:var(--amber-bright); border-radius:2px; transform:rotate(-1.6deg)}
.true{color:var(--spruce)}

/* ---------- landing ---------- */
.hero-l{padding:64px 0 40px; text-align:center}
.hero-l h1{font-size:clamp(32px, 5.2vw, 56px); max-width:860px; margin-inline:auto}
.hero-l .sub{margin:20px auto 0; color:var(--muted); font-size:18px; max-width:580px; text-wrap:pretty}
.hero-l .cta-row{display:flex; gap:12px; justify-content:center; margin-top:28px; flex-wrap:wrap}
.hero-l .trust{margin-top:16px; font-size:13.5px; color:var(--faint)}

.demo-band{padding:26px 0 0}
.demo-frame{max-width:880px; margin-inline:auto; background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--shadow); padding:26px}
@media(max-width:560px){.demo-frame{padding:18px 14px}}
.demo-pair{display:grid; gap:14px}
@media(min-width:720px){.demo-pair{grid-template-columns:1fr 1fr}}
.demo-block{border-radius:var(--r-md); padding:16px 18px 14px; border:1px solid var(--border)}
.demo-block.said{background:var(--card); border-left:4px solid var(--spruce)}
.demo-block.added{background:var(--amber-wash); border-color:#EBDCBB; border-left:4px solid var(--amber-bright)}
.demo-block h3{font-size:13.5px; font-weight:700; margin-bottom:9px}
.demo-block.said h3{color:var(--spruce-deep)}
.demo-block.added h3{color:var(--amber)}
.demo-block ul{list-style:none}
.demo-block li{font-family:var(--voice); font-size:15.5px; line-height:1.5; padding:4px 0 4px 22px; position:relative}
.demo-block.said li::before{content:"✓"; position:absolute; left:0; color:var(--spruce); font-family:var(--body); font-weight:700; font-size:13px; top:7px}
.demo-block.added li::before{content:"~"; position:absolute; left:1px; color:var(--amber-bright); font-family:var(--body); font-weight:800; top:5px}
.demo-block.added li{color:#5C4A2C}
.demo-meter{display:flex; align-items:center; gap:10px; margin-top:16px}
.demo-meter .bar{height:7px; border-radius:999px; background:var(--border-soft); flex:1; overflow:hidden}
.demo-meter .bar i{display:block; height:100%; border-radius:999px; background:var(--spruce)}
.demo-meter .lbl{font-family:var(--voice); font-size:14.5px}
.demo-meter .pct{font-size:13px; font-weight:700; color:var(--spruce-deep); min-width:34px; text-align:right}

.sec-l{margin-top:76px}
.sec-l h2{font-family:var(--display); font-weight:800; font-size:clamp(24px,3.4vw,32px); letter-spacing:-.015em; text-align:center; margin-bottom:8px}
.sec-l .lede{color:var(--muted); text-align:center; max-width:58ch; margin:0 auto 30px; text-wrap:pretty}
.steps{display:grid; gap:16px; max-width:980px; margin-inline:auto}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:var(--card); border:1px solid var(--border); border-radius:var(--r-md); padding:22px}
.step .n{font-family:var(--display); font-weight:800; color:var(--spruce); font-size:15px; margin-bottom:8px}
.step h3{font-family:var(--display); font-weight:700; font-size:18px; margin-bottom:6px}
.step p{font-size:15px; color:var(--muted)}

.faq{max-width:760px; margin-inline:auto; display:grid; gap:12px}
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--r-md); padding:20px 22px}
.faq-item h3{font-family:var(--display); font-weight:700; font-size:17.5px; margin-bottom:8px}
.faq-item p{font-size:15.5px; color:var(--muted); max-width:62ch}
.faq-item p a{color:var(--spruce-deep); font-weight:600}

.cta-final{margin-top:84px; text-align:center}
.cta-final .line{font-family:var(--voice); font-style:italic; font-size:clamp(19px,3vw,24px); max-width:52ch; margin:0 auto 22px; text-wrap:pretty}
.cta-final .line::before{content:""; display:block; width:44px; height:3px; border-radius:2px; background:var(--spruce); margin:0 auto 18px}

/* ---------- blog ---------- */
.blog-head{padding:56px 0 8px; text-align:center}
.blog-head h1{font-size:clamp(30px,4.5vw,44px)}
.blog-head .sub{margin:14px auto 0; color:var(--muted); max-width:56ch}
.post-grid{display:grid; gap:18px; max-width:980px; margin:40px auto 0}
@media(min-width:760px){.post-grid{grid-template-columns:repeat(3,1fr)}}
.post-card{display:flex; flex-direction:column; background:var(--card); border:1px solid var(--border); border-radius:var(--r-md);
  padding:24px 22px; text-decoration:none; color:var(--ink); transition:border-color .15s ease, transform .15s ease}
.post-card:hover{border-color:var(--spruce); transform:translateY(-2px)}
.post-card .kicker{font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--amber); margin-bottom:10px}
.post-card h2{font-family:var(--display); font-weight:700; font-size:19px; line-height:1.25; margin-bottom:8px}
.post-card p{font-size:14.5px; color:var(--muted); flex:1}
.post-card .read{margin-top:14px; font-size:14px; font-weight:700; color:var(--spruce-deep)}

/* ---------- article ---------- */
.article{max-width:720px; margin-inline:auto; padding-top:48px}
.article .kicker{font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--amber); text-align:center; margin-bottom:12px}
.article h1{font-size:clamp(28px,4.2vw,42px); text-align:center}
.article .byline{text-align:center; font-size:14px; color:var(--faint); margin-top:14px}
.article .byline b{color:var(--muted); font-weight:600}
.article .answer{
  font-family:var(--voice); font-size:19px; line-height:1.55; color:var(--ink);
  background:var(--spruce-wash); border:1px solid #D8E6DC; border-radius:var(--r-md);
  padding:20px 24px; margin:30px 0 8px; text-wrap:pretty;
}
.article h2{font-family:var(--display); font-weight:700; font-size:24px; letter-spacing:-.01em; margin:38px 0 12px; text-wrap:balance}
.article p{margin:14px 0; font-size:17px; color:#3D362D; text-wrap:pretty}
.article p a{color:var(--spruce-deep); font-weight:600}
.article .pull{font-family:var(--voice); font-style:italic; font-size:20px; color:var(--spruce-deep);
  border-left:3px solid var(--spruce); padding-left:18px; margin:24px 0}
.article .note{background:var(--rose-wash); border:1px solid #EBD3C8; border-radius:var(--r-md); padding:16px 18px; font-size:14.5px; color:#6B3A31; margin:30px 0 0}
.article .note a{color:#7C352B; font-weight:700}
.article .cta-inline{margin:34px 0 0; background:var(--card); border:1px solid var(--border); border-radius:var(--r-md); padding:20px 22px; text-align:center}
.article .cta-inline p{margin:0 0 12px; font-size:15.5px; color:var(--muted)}

/* ---------- 404 ---------- */
.err-wrap{min-height:58vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:60px 24px}
.err-wrap .code{font-family:var(--display); font-weight:800; font-size:clamp(64px,12vw,120px); color:var(--spruce); letter-spacing:-.03em; line-height:1}
.err-wrap p{color:var(--muted); max-width:44ch; margin:14px 0 24px}

/* ---------- article sources ---------- */
.sources{margin-top:38px; padding:20px 22px; background:var(--card); border:1px solid var(--border); border-radius:var(--r-md)}
.sources h2{font-size:13px !important; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--faint); margin:0 0 10px !important; font-family:var(--body) !important}
.sources p{font-size:13.5px !important; color:var(--muted) !important; margin:6px 0 !important; line-height:1.5}
.sources a{color:var(--spruce-deep); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(46,107,78,.3)}
.byline a{color:inherit; font-weight:600; text-decoration:none; border-bottom:1px solid var(--border)}
.byline a:hover{color:var(--spruce-deep)}