:root{
  --bg:#FAF7F5;
  --surface:#FFFFFF;
  --ink:#201A19;
  --ink-dim:#6B5F5C;
  --ink-faint:#9C8F8C;
  --line:#E8DFDB;
  --accent:#9E1B32;
  --accent-ink:#FFFFFF;
  --accent-soft:#F3DCDF;
  --locked:#EDE7E4;
  --locked-line:#DCD2CE;
  --shadow:0 1px 0 rgba(32,26,25,0.04), 0 8px 24px -16px rgba(32,26,25,0.25);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#171111;
    --surface:#221A19;
    --ink:#F3EAE8;
    --ink-dim:#B8A9A6;
    --ink-faint:#867775;
    --line:#3A2C2A;
    --accent:#E8536A;
    --accent-ink:#1A1010;
    --accent-soft:#3A1E22;
    --locked:#2A201F;
    --locked-line:#3D302E;
    --shadow:0 1px 0 rgba(0,0,0,0.3), 0 8px 24px -16px rgba(0,0,0,0.5);
  }
}
:root[data-theme="dark"]{
  --bg:#171111;
  --surface:#221A19;
  --ink:#F3EAE8;
  --ink-dim:#B8A9A6;
  --ink-faint:#867775;
  --line:#3A2C2A;
  --accent:#E8536A;
  --accent-ink:#1A1010;
  --accent-soft:#3A1E22;
  --locked:#2A201F;
  --locked-line:#3D302E;
  --shadow:0 1px 0 rgba(0,0,0,0.3), 0 8px 24px -16px rgba(0,0,0,0.5);
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  line-height:1.5;
}
h1,h2,h3{font-family:'Bodoni Moda',Georgia,serif; text-wrap:balance; margin:0;}
a{color:inherit;}
img{max-width:100%;}

/* ================= Site chrome ================= */
.site-header{
  border-bottom:1px solid var(--line);
  padding:16px 20px;
}
.site-header .inner{
  max-width:1040px; margin-inline:auto; display:flex; align-items:center; justify-content:space-between;
}
.brand{font-family:'Bodoni Moda',serif; font-weight:600; font-size:21px; letter-spacing:.01em; text-decoration:none; color:var(--ink);}
.header-cta{
  background:var(--accent); color:var(--accent-ink); border:none; border-radius:100px;
  padding:10px 18px; font-family:'Manrope',sans-serif; font-weight:700; font-size:14px;
  text-decoration:none; display:inline-block;
}

.site-footer{
  border-top:1px solid var(--line); margin-top:60px; padding:28px 20px 40px;
  color:var(--ink-faint); font-size:12.5px;
}
.site-footer .inner{max-width:1040px; margin-inline:auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;}
.site-footer a{color:var(--ink-faint); text-decoration:underline;}

/* ================= Buttons ================= */
.cta{
  background:var(--accent); color:var(--accent-ink); border:none; border-radius:100px; padding:16px 20px;
  font-family:'Manrope',sans-serif; font-weight:700; font-size:16px; cursor:pointer; transition:opacity .15s ease;
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.cta:hover{opacity:.9;}
.cta:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
.cta:disabled{opacity:.35; cursor:not-allowed;}
.cta.block{width:100%;}
.cta.ghost{background:transparent; color:var(--accent); border:1.5px solid var(--accent);}

/* ================= Layout helpers ================= */
.wrap{max-width:480px; margin-inline:auto; padding-inline:20px;}
.wrap-wide{max-width:1040px; margin-inline:auto; padding-inline:20px;}
section{padding-block:56px;}

/* ================= Home: photo hero ================= */
.eyebrow{
  font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent);
  font-weight:700; display:flex; align-items:center; gap:8px;
}
.eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); display:inline-block;}
.eyebrow.on-photo{color:#F3DCDF;}
.eyebrow.on-photo::before{background:#F3DCDF;}

.photo-hero{
  position:relative; min-height:640px; display:flex; align-items:flex-end;
  background-size:cover; background-position:22% 32%; overflow:hidden;
}
.photo-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(15,10,10,.82) 0%, rgba(15,10,10,.42) 42%, rgba(15,10,10,.12) 68%, rgba(15,10,10,.05) 100%);
}
.photo-hero .inner{position:relative; z-index:1; padding-block:0 56px; max-width:640px; display:flex; flex-direction:column; gap:16px;}
.photo-hero h1{font-size:clamp(34px,6vw,58px); font-weight:600; color:#FBF6F5;}
.photo-hero p.lede{color:#EBDFDD; font-size:17px; max-width:46ch;}
.photo-hero .cta{width:fit-content; font-size:17px; padding:17px 28px;}
.photo-hero .hero-meta div{color:#D9C9C6;}

.hero-meta{display:flex; gap:20px; margin-top:2px; flex-wrap:wrap;}
.hero-meta div{font-size:13px; color:var(--ink-faint); display:flex; align-items:center; gap:6px;}

/* photo strip below hero */
.photo-strip{display:grid; grid-template-columns:repeat(6,1fr); gap:2px; background:var(--line);}
.photo-strip a{display:block; aspect-ratio:3/4; overflow:hidden;}
.photo-strip img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease;}
.photo-strip a:hover img{transform:scale(1.05);}

/* steps with photos */
.steps-photo{display:flex; flex-direction:column; gap:64px;}
.step-row{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;}
.step-row.reverse .step-photo{order:2;}
.step-row .num{font-family:'Bodoni Moda',serif; font-size:15px; color:var(--accent); font-weight:600; letter-spacing:.04em;}
.step-row h3{font-size:clamp(22px,3vw,28px); font-weight:600; margin-top:8px;}
.step-row p{color:var(--ink-dim); font-size:15px; margin-top:10px; max-width:38ch;}
.step-photo{border-radius:16px; overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/3;}
.step-photo img{width:100%; height:100%; object-fit:cover; display:block;}

@media (max-width:720px){
  .photo-strip{grid-template-columns:repeat(3,1fr);}
  .step-row, .step-row.reverse{grid-template-columns:1fr;}
  .step-row.reverse .step-photo{order:0;}
  .photo-hero{min-height:560px;}
}

/* ================= Steps ================= */
.section-head{max-width:56ch; margin-bottom:32px;}
.section-head .eyebrow{margin-bottom:8px;}
.section-head h2{font-size:clamp(24px,3.6vw,32px); font-weight:600;}
.steps-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.step-card{
  border:1px solid var(--line); border-radius:14px; padding:22px; background:var(--surface);
}
.step-card .num{font-family:'Bodoni Moda',serif; font-size:28px; color:var(--accent); font-weight:600;}
.step-card h3{font-size:17px; font-weight:600; margin-top:10px;}
.step-card p{font-size:14px; color:var(--ink-dim); margin-top:6px;}

/* ================= Feature grid ================= */
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.feature-card{border:1px solid var(--line); border-radius:14px; padding:20px; background:var(--surface);}
.feature-card .icon{font-size:22px;}
.feature-card h3{font-size:15.5px; font-weight:600; margin-top:10px;}
.feature-card p{font-size:13.5px; color:var(--ink-dim); margin-top:6px;}

/* ================= Pricing block ================= */
.pricing-card{
  border:1.5px solid var(--accent); border-radius:18px; padding:30px; background:var(--surface);
  max-width:400px; margin-inline:auto; text-align:center; display:flex; flex-direction:column; gap:14px;
}
.pricing-card .price{font-family:'Bodoni Moda',serif; font-size:42px; font-weight:600;}
.pricing-card .price span{font-size:16px; color:var(--ink-faint); font-family:'Manrope',sans-serif; font-weight:600;}
.pricing-card ul{list-style:none; padding:0; margin:0; text-align:left; display:flex; flex-direction:column; gap:10px;}
.pricing-card ul li{font-size:14.5px; color:var(--ink-dim); display:flex; gap:8px;}
.pricing-card ul li::before{content:"✓"; color:var(--accent); font-weight:700;}

/* ================= FAQ ================= */
.faq-item{border-bottom:1px solid var(--line); padding-block:16px;}
.faq-item summary{cursor:pointer; font-weight:600; font-size:15px; list-style:none; display:flex; justify-content:space-between; gap:12px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; color:var(--accent); font-size:20px; flex:none;}
.faq-item[open] summary::after{content:"–";}
.faq-item p{font-size:14px; color:var(--ink-dim); margin-top:10px;}

/* ================= Quiz screens ================= */
.progress-track{height:4px; background:var(--line); border-radius:100px; overflow:hidden; margin-bottom:28px;}
.progress-fill{height:100%; background:var(--accent); border-radius:100px; transition:width .4s ease; width:0%;}
.screen{display:none; flex-direction:column; gap:20px;}
.screen.active{display:flex;}
.q-label{font-size:12.5px; color:var(--ink-faint); font-weight:600; text-transform:uppercase; letter-spacing:.05em;}
.q-title{font-size:22px; font-weight:600; margin-top:4px;}
.options{display:flex; flex-direction:column; gap:10px; margin-top:6px;}
.opt{
  text-align:left; border:1.5px solid var(--line); background:var(--surface); color:var(--ink);
  border-radius:12px; padding:15px 16px; font-family:inherit; font-size:15px; font-weight:500;
  cursor:pointer; transition:border-color .15s ease, background .15s ease, transform .1s ease;
  display:flex; align-items:center; gap:12px;
}
.opt .swatch{width:22px; height:22px; border-radius:7px; flex:none; border:1px solid rgba(0,0,0,.08);}
.opt:hover{border-color:var(--accent);}
.opt:active{transform:scale(.99);}
.opt:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.back-link{
  background:none; border:none; color:var(--ink-faint); font-family:inherit; font-size:13.5px;
  cursor:pointer; padding:0; text-align:left; width:fit-content;
}
.back-link:hover{color:var(--ink-dim);}

.loading{align-items:center; text-align:center; padding-block:40px;}
.spinner{width:44px; height:44px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--accent); animation:spin 0.9s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.loading h2{font-size:20px; font-weight:600; margin-top:18px;}
.loading p{color:var(--ink-dim); font-size:14px; margin-top:6px;}
.loading-steps{margin-top:20px; display:flex; flex-direction:column; gap:8px; text-align:left; width:100%; max-width:260px;}
.loading-steps div{font-size:13px; color:var(--ink-faint); display:flex; gap:8px; align-items:center; opacity:.4;}
.loading-steps div.done{opacity:1; color:var(--ink-dim);}
.loading-steps div .tick{width:14px; color:var(--accent); font-weight:700; flex:none;}
@media (prefers-reduced-motion: reduce){ .spinner{animation-duration:1.6s;} }

/* ================= Result / paywall ================= */
.result-badge{
  align-self:flex-start; font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  background:var(--accent-soft); color:var(--accent); padding:5px 11px; border-radius:100px;
}
.result h2{font-size:clamp(26px,7vw,34px); font-weight:600; margin-top:8px;}
.result p.lede{color:var(--ink-dim); font-size:15px; margin-top:8px;}
.locked-card{
  border:1px solid var(--line); border-radius:14px; padding:18px; background:var(--surface); box-shadow:var(--shadow);
  position:relative; overflow:hidden; margin-top:4px;
}
.locked-card h3{font-size:15px; font-weight:600; margin-bottom:10px; display:flex; align-items:center; gap:8px;}
.locked-content{filter:blur(5px); user-select:none; pointer-events:none;}
.locked-content .swatch-row{display:flex; gap:8px; margin-bottom:10px;}
.locked-content .swatch-row span{width:30px; height:30px; border-radius:8px; display:inline-block;}
.locked-content ul{margin:0; padding-left:18px; color:var(--ink-dim); font-size:14px;}
.locked-content ul li{margin-bottom:6px;}
.locked-content p{margin:0; color:var(--ink-dim); font-size:14px;}
.paywall{
  margin-top:8px; border:1.5px solid var(--accent); border-radius:16px; padding:22px 20px; background:var(--surface);
  display:flex; flex-direction:column; gap:12px; text-align:center;
}
.paywall .price{font-family:'Bodoni Moda',serif; font-size:32px; font-weight:600;}
.paywall .price span{font-size:14px; color:var(--ink-faint); font-family:'Manrope',sans-serif; font-weight:600; display:block; text-transform:uppercase; letter-spacing:.04em; margin-bottom:2px;}
.trust-row{display:flex; justify-content:center; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--ink-faint);}
.consent-row{display:flex; gap:8px; align-items:flex-start; text-align:left; font-size:12.5px; color:var(--ink-dim);}
.consent-row input{margin-top:3px;}
.config-warning{
  font-size:12.5px; color:var(--accent); background:var(--accent-soft); border-radius:8px; padding:10px 12px; display:none;
}

@media (max-width: 720px){
  .steps-grid, .feature-grid{grid-template-columns:1fr;}
  .hero-home{grid-template-columns:1fr;}
}

/* ================= Quiz engine v2 ================= */
.step-title{font-size:22px; font-weight:600; text-align:left;}
.step-subtitle{font-size:13.5px; color:var(--ink-dim); font-style:italic; margin-top:-8px;}

.check-list{display:flex; flex-direction:column; gap:9px;}
.check-opt{
  display:flex; align-items:center; gap:12px; border:1.5px solid var(--line); background:var(--surface);
  border-radius:12px; padding:14px 15px; cursor:pointer; font-size:14.5px; font-weight:500;
}
.check-opt:hover{border-color:var(--accent);}
.check-opt.selected{border-color:var(--accent); background:var(--accent-soft);}
.check-opt .icon{font-size:17px; flex:none;}
.check-opt .box{
  width:19px; height:19px; border-radius:5px; border:1.5px solid var(--line-strong,var(--ink-faint));
  flex:none; display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--accent-ink);
  margin-left:auto;
}
.check-opt.selected .box{background:var(--accent); border-color:var(--accent);}

.grid-2col{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.grid-opt{
  display:flex; align-items:center; gap:10px; border:1.5px solid var(--line); background:var(--surface);
  border-radius:12px; padding:12px 13px; cursor:pointer; font-size:13.5px; font-weight:500; text-align:left;
}
.grid-opt:hover{border-color:var(--accent);}
.grid-opt .dot{width:26px; height:26px; border-radius:50%; flex:none; border:1px solid rgba(0,0,0,.1);}
.grid-opt .glyph{width:26px; height:26px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-size:14px; background:var(--accent-soft);}

.opt-desc{display:flex; flex-direction:column; gap:6px;}
.opt-desc-item{
  border:1.5px solid var(--line); background:var(--surface); border-radius:12px; padding:14px; cursor:pointer;
  display:flex; flex-direction:column; gap:4px;
}
.opt-desc-item:hover{border-color:var(--accent);}
.opt-desc-item b{font-size:15px;}
.opt-desc-item span{font-size:12.5px; color:var(--ink-dim);}

.slider-wrap{display:flex; flex-direction:column; gap:14px; align-items:center; padding-block:20px 6px;}
.slider-value{font-family:'Bodoni Moda',serif; font-size:30px; font-weight:600; color:var(--accent);}
.slider-input{width:100%; accent-color:var(--accent);}
.slider-scale{display:flex; justify-content:space-between; width:100%; font-size:11.5px; color:var(--ink-faint);}

.height-toggle{display:flex; border:1.5px solid var(--line); border-radius:100px; padding:3px; width:fit-content; margin-inline:auto;}
.height-toggle button{border:none; background:none; padding:8px 18px; border-radius:100px; font-family:inherit; font-size:13.5px; font-weight:600; color:var(--ink-dim); cursor:pointer;}
.height-toggle button.active{background:var(--ink); color:var(--bg);}
.height-input{width:100%; border:1.5px solid var(--line); border-radius:10px; padding:14px; font-size:16px; text-align:center; font-family:'Bodoni Moda',serif; background:var(--surface); color:var(--ink);}
.height-input:focus{outline:none; border-color:var(--accent);}

.info-screen{display:flex; flex-direction:column; gap:16px; align-items:flex-start; text-align:left; padding-block:12px;}
.info-screen.centered{align-items:center; text-align:center;}
.info-screen h2{font-size:22px; font-weight:600;}
.info-screen p{color:var(--ink-dim); font-size:14.5px;}
.diagram{display:flex; flex-direction:column; gap:10px; margin-block:4px;}
.diagram-node{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-dim);}
.diagram-node .bubble{width:34px; height:34px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-size:15px; flex:none;}

.phase-complete{display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; padding-block:24px;}
.phase-ring{
  width:76px; height:76px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:var(--accent-ink); font-family:'Bodoni Moda',serif; font-weight:600; font-size:19px;
}
.phase-stepper{display:flex; align-items:center; gap:6px; width:100%; max-width:280px;}
.phase-stepper .seg{flex:1; height:3px; background:var(--line); border-radius:100px;}
.phase-stepper .seg.done{background:var(--accent);}
.phase-labels{display:flex; justify-content:space-between; width:100%; max-width:280px; font-size:11px; color:var(--ink-faint);}
.phase-complete h2{font-size:20px; font-weight:600;}
.phase-complete p{color:var(--ink-dim); font-size:14px; max-width:36ch;}

.rate-photo{border-radius:14px; overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow);}
.rate-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.rate-emojis{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px;}
.rate-emoji{border:1.5px solid var(--line); background:var(--surface); border-radius:12px; padding:12px 6px; text-align:center; cursor:pointer; font-size:12.5px; color:var(--ink-dim);}
.rate-emoji:hover{border-color:var(--accent);}
.rate-emoji .e{font-size:22px; display:block; margin-bottom:4px;}

.location-input-row{display:flex; gap:8px;}
.location-input-row input{flex:1; border:1.5px solid var(--line); border-radius:10px; padding:13px 14px; font-size:14.5px; background:var(--surface); color:var(--ink); font-family:inherit;}
.location-input-row input:focus{outline:none; border-color:var(--accent);}
.weather-card{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:6px;}
.weather-tile{border:1px solid var(--line); border-radius:12px; padding:14px 10px; text-align:center; background:var(--surface);}
.weather-tile .l{font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.03em;}
.weather-tile .v{font-family:'Bodoni Moda',serif; font-size:17px; font-weight:600; margin-top:4px;}
.weather-status{font-size:12.5px; color:var(--ink-dim); text-align:center;}

.photo-drop{border:1.5px dashed var(--line); border-radius:14px; padding:28px 16px; text-align:center; color:var(--ink-faint); font-size:13.5px; cursor:pointer;}
.photo-drop:hover{border-color:var(--accent); color:var(--accent);}
.photo-note{font-size:12px; color:var(--ink-faint); display:flex; gap:8px; align-items:flex-start;}

.modal-overlay{position:fixed; inset:0; background:rgba(20,15,14,.5); display:flex; align-items:center; justify-content:center; padding:20px; z-index:20;}
.modal-card{background:var(--surface); border-radius:16px; padding:24px; max-width:340px; width:100%; text-align:center; display:flex; flex-direction:column; gap:16px;}
.modal-card h3{font-size:17px; font-weight:600;}
.modal-actions{display:flex; gap:10px;}
.modal-actions button{flex:1; border-radius:100px; padding:12px; font-family:inherit; font-weight:700; font-size:14px; cursor:pointer; border:1.5px solid var(--line); background:var(--surface); color:var(--ink);}
.modal-actions button.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}

.email-input{width:100%; border:1.5px solid var(--line); border-radius:10px; padding:14px 15px; font-size:15px; background:var(--surface); color:var(--ink); font-family:inherit;}
.email-input:focus{outline:none; border-color:var(--accent);}
.step-nav{display:flex; justify-content:center;}