/* SurveySage — D15 Botanical VARIANT (inverted: forest #0f2e1f bg, cream text, gold) */
:root{
  --forest:#0f2e1f; --forest2:#143826; --forest3:#1a4530;
  --cream:#f3ecd9; --cream-dim:#d8cfb4; --cream-faint:#a89e7f;
  --gold:#d4af37; --gold-soft:#e8c96a; --gold-dim:#8a6f22;
  --line:#2c4a38; --ok:#9ae6a0;
  --fs:'Cormorant Garamond',Georgia,serif; --fb:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--fb);color:var(--cream);background:var(--forest);line-height:1.7;font-size:16.5px;min-height:100vh}
::selection{background:var(--gold);color:var(--forest)}
/* leaf-vein motif strip */
.leafband{display:flex;justify-content:center;gap:26px;padding:10px 0;opacity:.85}
.leafband svg{width:44px;height:44px}
/* leaf-shaped chip: asymmetric radius */
.leafchip{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold);border-radius:6px 26px 6px 26px;padding:8px 18px;font-weight:600;background:rgba(212,175,55,.07)}
.leafchip svg{width:14px;height:14px}
/* header */
header.site{border-bottom:1px solid var(--line);background:rgba(15,46,31,.9);position:sticky;top:0;z-index:40;backdrop-filter:blur(6px)}
.navrow{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:16px 0}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand svg{width:32px;height:32px}
.brand-name{font-family:var(--fs);font-size:26px;font-weight:700;color:var(--cream)}
.brand-name em{font-style:italic;color:var(--gold)}
nav.main{display:flex;gap:2px;flex-wrap:wrap}
nav.main a{text-decoration:none;color:var(--cream-dim);font-size:14.5px;padding:9px 13px;border-radius:6px 22px 6px 22px}
nav.main a:hover{color:var(--gold);background:rgba(212,175,55,.1)}
nav.main a.on{color:var(--gold);font-weight:600}
.wrap{max-width:1020px;margin:0 auto;padding:0 28px}
.hero{padding:64px 0 30px;text-align:center}
.hero .leafband{margin-bottom:20px}
.eyebrow{margin-bottom:20px}
h1{font-family:var(--fs);font-size:clamp(40px,5.6vw,64px);font-weight:600;line-height:1.12}
h1 .it,h2 .it{font-style:italic;color:var(--gold)}
h2{font-family:var(--fs);font-size:clamp(28px,3.6vw,40px);font-weight:600;margin-bottom:12px}
h3{font-family:var(--fs);font-size:22px;font-weight:600;margin-bottom:8px;color:var(--gold-soft)}
.lede{font-size:18px;color:var(--cream-dim);max-width:720px;margin:18px auto 0}
.lede strong{color:var(--cream)}
/* tool console */
.tool{margin:36px 0 56px;background:var(--forest2);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.tool-bar{display:flex;align-items:center;gap:12px;padding:14px 24px;border-bottom:1px solid var(--line);flex-wrap:wrap;background:var(--forest3)}
.tool-bar .t{font-family:var(--fs);font-style:italic;font-size:18px;color:var(--gold-soft)}
.tool-bar .leafchip{margin-left:auto}
.tool-body{padding:30px}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-bottom:24px}
.opt{background:rgba(0,0,0,.18);border:1px solid var(--line);border-radius:90px 90px 12px 12px;padding:24px 20px 20px;text-align:center}
.opt-label{display:block;font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);margin-bottom:12px;font-weight:600}
select.sel{width:100%;background:var(--forest);color:var(--cream);border:1px solid var(--line);border-radius:6px 20px 6px 20px;padding:11px 12px;font-family:var(--fb);font-size:15px;text-align:center}
select.sel:focus{border-color:var(--gold);outline:none}
.num-row{display:flex;align-items:center;gap:10px;justify-content:center}
input[type=range]{flex:1;accent-color:var(--gold)}
input[type=number]{width:70px;background:var(--forest);color:var(--cream);border:1px solid var(--line);border-radius:8px;padding:9px;font-family:var(--fb);text-align:center}
.range-val{color:var(--gold);font-weight:600;min-width:28px;font-family:var(--fs);font-size:20px}
.seg{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.seg button{background:var(--forest);border:1px solid var(--line);color:var(--cream-dim);font-size:14px;padding:10px 16px;border-radius:6px 20px 6px 20px;cursor:pointer;transition:all .12s;font-family:var(--fb)}
.seg button:hover{border-color:var(--gold);color:var(--gold)}
.seg button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--forest);font-weight:600}
.opt-hint{font-size:12.5px;color:var(--cream-faint);margin-top:10px}
.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center;margin-bottom:22px}
.btn{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;padding:14px 30px;border-radius:6px 26px 6px 26px;border:1px solid var(--gold);background:transparent;color:var(--gold);cursor:pointer;transition:all .14s;text-decoration:none;font-family:var(--fb)}
.btn svg{width:16px;height:16px}
.btn.primary{background:var(--gold);color:var(--forest)}
.btn.primary:hover{background:var(--gold-soft)}
.btn:hover:not(.primary){background:rgba(212,175,55,.12)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.copy-note{font-size:13.5px;color:var(--ok);min-height:20px;flex-basis:100%;text-align:center}
.output{border:1px solid var(--line);border-radius:12px;background:rgba(0,0,0,.22);min-height:120px;padding:8px}
.output .placeholder{color:var(--cream-faint);font-size:14.5px;padding:24px;text-align:center;font-family:var(--fs);font-style:italic}
.titles{list-style:none}
.titles li{display:flex;align-items:baseline;gap:14px;padding:15px 18px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .12s;border-radius:8px}
.titles li:last-child{border-bottom:none}
.titles li:hover{background:rgba(212,175,55,.08)}
.titles .idx{font-family:var(--fs);font-style:italic;color:var(--gold);font-size:15px;flex-shrink:0;min-width:32px}
.titles .tt{flex:1;font-family:var(--fs);font-size:21px;font-weight:600}
.titles .ds{display:block;font-family:var(--fb);font-size:13px;color:var(--cream-faint);font-weight:400}
.titles .cp{color:var(--cream-faint);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;flex-shrink:0}
.titles li:hover .cp{color:var(--gold)}
.titles li.copied .cp{color:var(--ok)}
.output-meta{font-size:12.5px;color:var(--cream-faint);margin-top:8px;text-align:center}
.limits{margin-top:24px;border:1px solid var(--gold-dim);border-radius:12px;background:rgba(212,175,55,.06);padding:24px 26px}
.limits h3{display:flex;align-items:center;gap:10px;font-size:17px;font-family:var(--fb);font-weight:600;color:var(--gold)}
.limits h3 svg{width:19px;height:19px}
.limits ul{margin:12px 0 0 20px;color:var(--cream-dim);font-size:14.5px}
.limits li{margin-bottom:8px}
.limits strong{color:var(--cream)}
.limits a{color:var(--gold)}
/* arched cards */
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.card{background:var(--forest2);border:1px solid var(--line);border-radius:110px 110px 14px 14px;padding:56px 26px 28px;text-align:center;position:relative}
.card .arch-vein{position:absolute;top:14px;left:50%;transform:translateX(-50%);opacity:.7}
.card .arch-vein svg{width:40px;height:40px}
.card .n{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:10px;font-weight:600}
.card p{color:var(--cream-dim);font-size:15px}
.card h3{font-size:23px}
a.card.card-link{display:block;text-decoration:none;color:inherit}
a.card.card-link:hover{border-color:var(--gold);transform:translateY(-4px);transition:all .15s}
.go{display:inline-block;margin-top:14px;font-size:13.5px;color:var(--gold);font-weight:600}
.section{padding:46px 0;text-align:center}
.section .leafband{margin-bottom:8px}
.sub{color:var(--cream-dim);max-width:720px;margin:0 auto 32px;font-size:17px}
.cta-box{margin-top:30px;border:1px solid var(--gold-dim);border-radius:90px 90px 16px 16px;padding:44px 30px 36px;background:var(--forest2);text-align:center}
.cta-box p{color:var(--cream-dim);max-width:560px;margin:0 auto}
/* articles */
.article{padding:56px 0;max-width:780px;margin:0 auto}
.article h1{margin-bottom:14px;text-align:center}
.article .meta{font-size:12.5px;color:var(--cream-faint);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:28px;text-align:center}
.prose p{margin-bottom:18px;color:var(--cream-dim);font-size:17px}
.prose p strong,.prose li strong{color:var(--cream)}
.prose h2{margin:40px 0 14px}
.prose h3{margin:28px 0 10px}
.prose ul,.prose ol{margin:0 0 20px 24px;color:var(--cream-dim)}
.prose li{margin-bottom:10px}
.prose a{color:var(--gold)}
.prose blockquote{font-family:var(--fs);font-style:italic;font-size:21px;color:var(--gold-soft);border-left:3px solid var(--gold);padding:6px 0 6px 22px;margin:28px 0}
/* faq: arched cards */
.faqgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.faqcard{background:var(--forest2);border:1px solid var(--line);border-radius:80px 80px 12px 12px;padding:44px 24px 26px;text-align:center}
.faqcard .qn{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:10px;font-weight:600}
.faqcard h3{font-size:20px}
.faqcard p{color:var(--cream-dim);font-size:15px}
.faqcard p strong{color:var(--cream)}
.faqcard a{color:var(--gold)}
/* home accordion */
.faq{max-width:780px;margin:0 auto;text-align:left}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:18px 0;font-family:var(--fs);font-size:20px;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{color:var(--gold);font-size:22px;flex-shrink:0}
.faq .answer{padding:0 0 20px;color:var(--cream-dim);font-size:15.5px}
.faq .answer a{color:var(--gold)}
.faq .answer strong{color:var(--cream)}
footer{border-top:1px solid var(--line);margin-top:70px;background:var(--forest2)}
footer .wrap{padding-top:40px;padding-bottom:24px}
.footgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}
.foot-brand p{color:var(--cream-faint);font-size:14px;margin-top:12px;max-width:340px}
.foot-col h4{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:14px;font-weight:600}
.foot-col a{display:block;color:var(--cream-dim);text-decoration:none;font-size:14.5px;margin-bottom:9px}
.foot-col a:hover{color:var(--gold)}
.foot-base{margin-top:30px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--cream-faint)}
.crumb{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--cream-faint);margin:26px 0 6px;text-align:center}
.crumb a{color:var(--gold);text-decoration:none}
@media(max-width:760px){
  .footgrid{grid-template-columns:1fr}
  .tool-body{padding:20px}
  .opt{border-radius:60px 60px 12px 12px}
}
</style>