:root{--paper:#FAF7F0;--ink:#20242E;--teal:#0F766E;--coral:#E4572E;--coral-d:#C7431F;--alt:#EFE8D8;--line:#D8D2C2}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Georgia,'Times New Roman',serif;font-size:18px;line-height:1.55;
background-image:linear-gradient(rgba(32,36,46,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(32,36,46,.045) 1px,transparent 1px);background-size:28px 28px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
h1{font-size:2.3rem;line-height:1.15;margin:.2em 0 .4em;color:var(--ink)}
h2{font-size:1.6rem;line-height:1.25;color:var(--ink)}
h3{font-size:1.2rem;color:var(--ink)}
p{color:var(--ink)}
li{color:var(--ink)}
small{color:var(--ink)}
a{color:var(--teal)}
label{color:var(--ink)}
button{font:inherit}
/* header */
.site-head{background:var(--paper);border-bottom:3px solid var(--ink);position:sticky;top:0;z-index:5}
.head-in{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.lockup{font-size:1.45rem;font-weight:bold;text-decoration:none;letter-spacing:.2px;white-space:nowrap}
.lk-ink{color:var(--ink)}
.lk-teal{color:var(--teal)}
nav.main{display:flex;gap:16px;flex-wrap:wrap;margin-left:auto}
nav.main a{color:var(--ink);text-decoration:none;font-size:.98rem;font-weight:bold}
nav.main a:hover{color:var(--teal);text-decoration:underline}
/* buttons */
.btn{display:inline-block;padding:13px 22px;border-radius:8px;text-decoration:none;font-weight:bold;font-size:1.05rem;border:2px solid var(--ink);cursor:pointer}
.btn-buy{background:var(--coral-d);color:#FFFFFF;border-color:var(--coral-d)}
.btn-teal{background:var(--teal);color:#FFFFFF;border-color:var(--teal)}
.btn-ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-light{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-ghost{background:var(--paper);color:var(--ink);border-color:var(--ink)}
.price{font-size:1.5rem;font-weight:bold}
/* hero (dark ink flavor) */
.hero{background:var(--ink);padding:52px 0 44px;border-bottom:6px solid var(--teal)}
.hero h1{color:var(--paper)}
.hero h2{color:var(--paper)}
.hero h3{color:var(--paper)}
.hero p{color:var(--paper)}
.hero li{color:var(--paper)}
.hero label{color:var(--paper)}
.hero small{color:var(--paper)}
.hero button{color:var(--paper)}
.hero a{color:#8FD8CF}
.hero .btn-buy{background:var(--coral-d);color:#FFFFFF}
.hero .btn-light{background:var(--paper);color:var(--ink)}
.hero .eyebrow{color:#8FD8CF}
/* dark flavor */
.dark{background:var(--ink)}
.dark h1{color:var(--paper)}
.dark h2{color:var(--paper)}
.dark h3{color:var(--paper)}
.dark p{color:var(--paper)}
.dark li{color:var(--paper)}
.dark label{color:var(--paper)}
.dark small{color:var(--paper)}
.dark button{color:var(--paper)}
.dark a{color:#8FD8CF}
.dark .btn-buy{background:var(--coral-d);color:#FFFFFF}
.dark .btn-light{background:var(--paper);color:var(--ink)}
/* alt flavor */
.alt{background:var(--alt)}
.alt h1{color:var(--ink)}
.alt h2{color:var(--ink)}
.alt h3{color:var(--ink)}
.alt p{color:var(--ink)}
.alt li{color:var(--ink)}
.alt label{color:var(--ink)}
.alt small{color:var(--ink)}
.alt button{color:var(--ink)}
.alt a{color:var(--teal)}
.alt .btn-buy{background:var(--coral-d);color:#FFFFFF}
.alt .btn-teal{background:var(--teal);color:#FFFFFF}
/* teal band flavor */
.band-teal{background:var(--teal);padding:34px 0}
.band-teal h1{color:#FFFFFF}
.band-teal h2{color:#FFFFFF}
.band-teal h3{color:#FFFFFF}
.band-teal p{color:#FFFFFF}
.band-teal li{color:#FFFFFF}
.band-teal label{color:#FFFFFF}
.band-teal small{color:#FFFFFF}
.band-teal button{color:#FFFFFF}
.band-teal a{color:#FFFFFF}
.band-teal .btn-light{background:var(--paper);color:var(--ink)}
.band-teal .btn-buy{background:var(--coral-d);color:#FFFFFF;border-color:#FFFFFF}
/* plain sections */
section{padding:38px 0}
.eyebrow{text-transform:uppercase;letter-spacing:2px;font-size:.8rem;font-weight:bold;color:var(--teal)}
.hero .eyebrow{color:#8FD8CF}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.card{background:#FFFFFF;border:2px solid var(--line);border-top:6px solid var(--teal);border-radius:10px;padding:20px}
.card img{width:100%;height:auto;border:1px solid var(--line);border-radius:6px}
.card h3{margin-top:.4em}
.card .btn{margin-top:8px}
figure{margin:0 0 14px}
figure img{width:100%;height:auto;border:2px solid var(--line);border-radius:8px}
figcaption{font-size:.9rem}
table.tabs{border-collapse:collapse;width:100%;background:#FFFFFF}
table.tabs th,table.tabs td{border:1px solid var(--line);padding:9px 12px;text-align:left}
table.tabs th{background:var(--teal);color:#FFFFFF}
.demo{background:#FFFFFF;border:2px solid var(--teal);border-radius:10px;padding:18px 22px}
.faq-item{background:#FFFFFF;border:1px solid var(--line);border-radius:8px;padding:14px 20px;margin-bottom:12px}
.foot{padding:36px 0 28px;margin-top:0}
.plate{display:inline-block;background:var(--paper);padding:10px 16px;border-radius:8px}
.foot-links{list-style:none;padding:0;display:flex;gap:16px;flex-wrap:wrap}
.foot-links li{color:var(--paper)}
.notice{border-left:6px solid var(--coral);background:#FFFFFF;padding:14px 20px;border-radius:0 8px 8px 0}
@media (max-width:760px){
 body{font-size:17px}
 h1{font-size:1.8rem}
 .head-in{gap:8px;padding-top:6px;padding-bottom:6px}
 .lockup{font-size:1.25rem}
 nav.main{gap:10px;margin-left:0}
 nav.main a{font-size:.9rem}
 .hero{padding:36px 0 30px}
 section{padding:28px 0}
}