:root{--ink:#1c1c1a;--cream:#f8f6f1;--paper:#f1ede5;--gold:#a58d65;--line:#d8d2c6;--muted:#686257}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font:15px/1.75 Arial,sans-serif}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
header{position:sticky;top:0;z-index:10;background:var(--cream);border-bottom:1px solid var(--line);padding:18px 6%;display:flex;align-items:center;justify-content:space-between;gap:15px}
.logo{font:28px Georgia,serif;letter-spacing:.1em;text-decoration:none;white-space:nowrap}
nav{display:flex;gap:22px;align-items:center}
nav a{font-size:10px;text-transform:uppercase;letter-spacing:.1em;text-decoration:none}
.navcta{border:1px solid;padding:10px 14px}
.hero{display:grid;grid-template-columns:1.1fr .9fr}
.heroText{padding:85px 12%}
.eyebrow{color:#796b56;font-size:10px;text-transform:uppercase;letter-spacing:.2em;font-weight:bold}
h1,h2,h3{font-family:Georgia,serif;font-weight:normal;line-height:1.1}
h1{font-size:clamp(78px,10vw,145px);letter-spacing:-.06em;line-height:.9;margin:30px 0}
h1 span{display:block}
h2{font-size:clamp(36px,5vw,64px);margin:18px 0}
h3{font-size:35px;margin:20px 0}
.heroText p{font-size:17px;color:var(--muted);max-width:440px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.btn{display:inline-block;border:1px solid var(--ink);background:var(--ink);color:white;padding:16px 21px;text-decoration:none;text-align:center;font-size:10px;letter-spacing:.12em;font-weight:bold;text-transform:uppercase}
.btn:hover{background:#4b463e}
.btn.light{background:transparent;color:var(--ink)}
.btn.light:hover{background:var(--paper)}
.visual{display:grid;place-items:center;position:relative;overflow:hidden;background:linear-gradient(140deg,#d7cbbb,#b7a991 47%,#6c655a);min-height:400px}
.visual:before,.visual:after{content:"";position:absolute;width:66%;height:72%;border:1px solid #ffffff80;transform:rotate(-8deg)}
.visual:after{width:48%;height:54%;transform:rotate(10deg)}
.visualT{font:clamp(230px,34vw,460px) Georgia,serif;color:#ffffffad;z-index:1}
.visualCaption{position:absolute;bottom:30px;left:25px;color:white;font-size:10px;letter-spacing:.15em;text-transform:uppercase}
section[id],#how,#home{scroll-margin-top:100px}
.section{max-width:1400px;padding:80px 7%;margin:auto}
.sectionHead{text-align:center;max-width:720px;margin:0 auto 45px}
.sectionHead p{color:var(--muted)}
.paths{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.path{background:#e9e3d9;padding:40px;border:1px solid var(--line)}
.path:nth-child(2){background:#dedbd3}
.path h3{font-size:43px}
.path p{color:var(--muted)}
.dark{background:var(--ink);color:var(--cream)}
.dark .eyebrow{color:#c4ac86}
.dark .sectionHead p,.feature p{color:#c7c2b8}
.features{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #514e47}
.feature{padding:28px;border:1px solid #514e47}
.feature h3{font-size:28px}
.feature p{font-size:13px}
.quiz{max-width:850px;margin:auto;padding:42px;background:white;border:1px solid var(--line)}
.quizTop{display:flex;justify-content:space-between;gap:12px;color:#796b56;font-size:10px;letter-spacing:.12em}
.progress{height:3px;background:var(--paper);margin:20px 0 30px}
.bar{height:100%;width:0;background:var(--gold)}
.choices{display:grid;gap:12px}
.choice{padding:17px 20px;text-align:left;background:#fbfaf7;border:1px solid var(--line)}
.choice:hover,.choice.selected{background:var(--paper);border-color:var(--gold)}
.controls{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-top:24px}
.textBtn{border:0;background:none;text-decoration:underline;color:var(--muted)}
.textBtn:disabled{opacity:.4;cursor:default}
.note{font-size:12px;color:var(--muted)}
.result{text-align:center}
.result h3{font-size:clamp(32px,6vw,55px);overflow-wrap:anywhere}
.resultBox,.upgrade{padding:22px;background:var(--paper);margin:24px 0}
.resultBox{text-align:left}
.resultBox p{margin:8px 0}
.roadmap{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0;text-align:left}
.month{border:1px solid var(--line);padding:17px}
.month h4{margin:12px 0 8px}
.month p{font-size:13px;margin:0}
.studioShell{padding:30px;background:white;border:1px solid var(--line)}
.studioGrid{display:grid;grid-template-columns:1fr 1.15fr;gap:26px}
form{display:grid;gap:15px}
label{display:grid;gap:7px;font-size:11px;font-weight:bold;letter-spacing:.05em}
input,select,textarea{width:100%;min-width:0;padding:12px;border:1px solid var(--line);border-radius:0;background:#fbfaf7;color:var(--ink);font-size:14px;letter-spacing:normal}
textarea{min-height:90px;resize:vertical}
.studioResults{background:var(--paper);padding:25px;min-width:0;display:flex;flex-direction:column}
.empty{text-align:center;margin:auto;padding:30px 0;color:var(--muted)}
.bigT{font:100px Georgia,serif;color:#b8a990}
.tabs{display:flex;gap:7px;flex-wrap:wrap;margin:15px 0}
.tab{padding:9px 12px;border:1px solid var(--line);background:transparent;font-size:11px}
.tab[aria-selected=true]{background:var(--ink);color:white}
.output{white-space:pre-wrap;overflow-wrap:anywhere;padding:20px;background:white;border:1px solid var(--line);font-size:13px;min-height:250px;max-height:420px;overflow:auto}
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.price{padding:32px 25px;background:white;border:1px solid var(--line);display:flex;flex-direction:column;position:relative}
.price.featured{border:2px solid var(--gold);background:#f6f1e8}
.price h3{min-height:78px}
.amount{font-size:38px;margin:0}
.amount span{font-size:12px;color:var(--muted)}
.price ul{padding:20px 0;list-style:none;border-top:1px solid var(--line);flex:1}
.price li{position:relative;padding:8px 0 8px 23px;font-size:13px}
.price li:before{content:"✓";position:absolute;left:0;color:#8b7653}
.ribbon{position:absolute;top:-13px;right:15px;background:var(--gold);color:white;padding:5px 12px;font-size:9px;letter-spacing:.1em}
.pricingNote{text-align:center;max-width:800px;margin:24px auto 0}
.final{text-align:center;background:#e9e3d9;padding:80px 20px}
footer{padding:30px 6%;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:10px;letter-spacing:.1em}
dialog{width:min(540px,calc(100% - 32px));max-height:85vh;overflow:auto;padding:40px;background:var(--cream);color:var(--ink);border:1px solid var(--line)}
dialog::backdrop{background:#141413b8}
dialog h2{font-size:42px}
.close{position:absolute;top:10px;right:15px;font-size:28px;border:0;background:none}
.centerActions{justify-content:center}
@media(max-width:900px){
  nav a:not(.navcta){display:none}
  .hero,.paths,.studioGrid,.prices{grid-template-columns:1fr}
  .heroText{padding:65px 7%}
  .visual{min-height:300px}
  .visualT{font-size:260px}
  .features{grid-template-columns:1fr 1fr}
  .price h3{min-height:0}
  .prices{gap:30px}
}
@media(max-width:600px){
  header{padding:16px 5%}
  .logo{font-size:22px}
  .navcta{font-size:9px;padding:9px}
  .section{padding:60px 6%}
  .features,.roadmap{grid-template-columns:1fr}
  .quiz,.studioShell{padding:23px 18px}
  .studioResults{padding:20px}
  .path{padding:28px}
  .path h3{font-size:36px}
  .controls{align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}
/* END OF STYLES */