:root{
  --orange:#F47B20; --text:#171717; --muted:#666; --line:#e8e8e8; --soft:#f7f7f7; --white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:#fff;line-height:1.55}
a{text-decoration:none;color:inherit}
.container{width:min(1180px,calc(100% - 48px));margin:0 auto}
.narrow{width:min(980px,calc(100% - 40px));margin:0 auto}
.topbar{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.brand{color:var(--orange);font-size:2rem;font-weight:700;letter-spacing:-.03em}
.nav{display:flex;gap:26px;font-size:.95rem;color:var(--muted)}
.nav a:hover{color:var(--text)}
.hero{padding:78px 0 60px}
.hero-grid,.split,.grid-2,.cards{display:grid;gap:32px}
.hero-grid{grid-template-columns:1.05fr .95fr;align-items:center}
.split{grid-template-columns:1fr 1fr;align-items:center}
.grid-2{grid-template-columns:1.05fr .95fr;align-items:start}
.cards{grid-template-columns:repeat(3,1fr)}
.eyebrow,.section-label,.smallcaps{display:inline-block;text-transform:uppercase;letter-spacing:.22em;font-size:.74rem;color:var(--muted)}
.eyebrow{padding:8px 14px;border:1px solid var(--line);border-radius:999px}
.section-label,.smallcaps{padding:0}
h1{margin:20px 0 8px;font-size:clamp(3rem,8vw,5.4rem);line-height:.95;letter-spacing:-.05em}
h2{margin:16px 0 0;font-size:clamp(2rem,5vw,3.2rem);line-height:1.02;letter-spacing:-.04em}
h3{margin:0;font-size:1.16rem;letter-spacing:-.02em}
.tagline{font-size:clamp(1.25rem,3vw,1.9rem);color:var(--muted);margin:0 0 20px}
.lead,.section-copy{font-size:1.08rem;color:var(--muted);line-height:1.8}
.actions{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap}
.btn{padding:14px 22px;border-radius:18px;font-weight:600;font-size:.96rem;display:inline-block;transition:.18s ease;border:1px solid transparent;cursor:pointer}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{opacity:.92}
.btn-secondary{border-color:#cfcfcf;color:var(--text);background:#fff}
.btn-secondary:hover{border-color:#888}
.panel,.visual-box,.note-box,.card,.result,.empty-state{background:var(--white);border:1px solid var(--line);border-radius:28px;box-shadow:0 8px 30px rgba(0,0,0,.04)}
.panel,.visual-box{background:var(--soft);display:flex;align-items:center;justify-content:center;text-align:center;padding:28px}
.panel{min-height:480px}
.visual-box{min-height:340px}
.note-box,.card,.result{padding:24px}
.placeholder-title{text-transform:uppercase;letter-spacing:.24em;font-size:.78rem;color:#999}
.placeholder-sub{margin-top:10px;font-size:1.06rem;color:#7a7a7a}
.section-soft{background:linear-gradient(to bottom,#fafafa,#f7f7f7);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
section{padding:74px 0}
.card p{margin:12px 0 0;color:var(--muted);line-height:1.7}
.footer{border-top:1px solid var(--line);padding:34px 0 46px}
.footer-inner{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.footer-links{display:grid;gap:8px;color:var(--muted);font-size:.95rem;text-align:right}
.input-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label{display:block;font-size:.92rem;font-weight:600;color:#444}
input,select,textarea{margin-top:8px;width:100%;padding:14px 16px;border:1px solid #cdcdcd;border-radius:16px;font-size:1rem;background:#fff;font-family:inherit}
textarea{min-height:120px;resize:vertical}
.result .big{margin-top:10px;font-size:2rem;font-weight:700;line-height:1.1;letter-spacing:-.03em}
.small{margin-top:10px;color:var(--muted);line-height:1.65}
.stack{display:grid;gap:18px}
.line-item{display:flex;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:1px solid #efefef;color:#4d4d4d}
.line-item:last-child{border-bottom:none;padding-bottom:0}
.strong{font-weight:700;color:var(--text)}
.muted{color:var(--muted)}
.micro{margin-top:14px;font-size:.92rem;color:#8a8a8a}
.empty-state{text-align:center;color:var(--muted);border-style:dashed}
.remove-btn{border:1px solid #d0d0d0;background:#fff;border-radius:12px;padding:10px 12px;font-size:.9rem;cursor:pointer}
.remove-btn:hover{border-color:#888;color:#111}
.benefits{margin:28px auto 0;display:grid;gap:10px;max-width:460px;text-align:left}
.benefit{background:var(--soft);border:1px solid var(--line);border-radius:18px;padding:14px 16px;font-weight:500}
.center{text-align:center}
.hide{display:none}
@media (max-width:900px){
  .hero-grid,.split,.grid-2,.cards{grid-template-columns:1fr}
  .input-grid{grid-template-columns:1fr}
  .nav{display:none}
  .panel{min-height:320px}
  .footer-inner{flex-direction:column}
  .footer-links{text-align:left}
}