@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Manrope:wght@700;800&display=swap");

:root{
  font-family:'DM Sans',Arial,sans-serif;
  --ink:#201d18;
  --muted:#665f54;
  --paper:#f6f1e7;
  --white:#fff;
  --gold:#d6a83a;
  --goldlight:#f4e6bf;
  --black:#090807;
  --border:#ddd4c0;
  --danger:#a23424;
  --panel:rgba(251,249,246,.93);
  --panel-strong:rgba(255,255,255,.96);
  color:var(--ink);
  background:var(--black);
  font-synthesis:none;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  min-height:100dvh;
  background:#0b0907;
  color:var(--ink);
}
.site-frame{
  position:relative;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  max-width:680px;
  margin:0 auto;
  overflow:hidden;
  isolation:isolate;
  background:#1b1712;
}
.site-frame::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(180deg, rgba(16,12,8,.56), rgba(16,12,8,.31)),
    url('assets/bg-quadrato.webp') 66% center / cover no-repeat;
}
.site-frame::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg, rgba(10,8,6,.14) 0%, rgba(10,8,6,.04) 28%, rgba(10,8,6,.14) 100%);
}
.topbar{
  background:rgba(5,5,5,.68);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  min-height:76px;
  padding:12px clamp(16px,4vw,28px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brand{display:flex;align-items:center;text-decoration:none;min-width:0}
.brand-logo{width:min(225px,60vw);height:auto;display:block;max-width:100%}
.topbar-tag{
  font-size:10px;
  letter-spacing:.16em;
  line-height:1.4;
  text-align:right;
  color:#d8d0c2;
  font-weight:700;
  text-transform:uppercase;
}
.content{
  width:100%;
  max-width:560px;
  align-self:center;
  flex:1;
  padding:15px clamp(14px,4vw,26px) 24px;
}
.progress-area{
  margin:0 0 12px;
  padding:11px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.progress-label{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.13em;
  color:#f7f0e1;
  text-transform:uppercase;
}
.progress-track{background:rgba(255,255,255,.28);height:4px;width:100%;margin-top:10px;border-radius:999px;overflow:hidden}
.progress-track>span{height:100%;width:20%;display:block;background:var(--gold);border-radius:999px;transition:width .35s ease}
.step{
  animation:rise .28s ease both;
  background:var(--panel);
  border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(13px);
  -webkit-backdrop-filter:blur(13px);
  border-radius:20px;
  padding:22px 18px 20px;
  box-shadow:0 18px 40px rgba(0,0,0,.12);
}
.step[hidden],[hidden]{display:none!important}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.17em;color:#a57c1c;display:block;margin-bottom:11px;text-transform:uppercase}
.step h1,.step h2{
  font-family:'Manrope',Arial,sans-serif;
  letter-spacing:-.055em;
  color:var(--ink);
  font-weight:700;
  line-height:1.12;
  margin:0;
}
.step h1{font-size:clamp(34px,8.1vw,50px)}
.step h2{font-size:clamp(30px,7vw,42px)}
.step h1 em,.step h2 em{font-style:normal;color:#b78923}
.lead{font-size:16px;line-height:1.65;color:#575146;max-width:400px;margin:18px 0 0}
.support{font-size:14px;line-height:1.6;color:var(--muted);margin:12px 0 24px}
.step-intro{
  min-height:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding-top:0;
}
.hero-illustration{
  display:block;
  height:clamp(165px,23dvh,235px);
  width:calc(100% + 36px);
  flex:none;
  margin:0 -18px 23px;
  border-radius:20px 20px 0 0;
  background:
    linear-gradient(180deg, transparent 75%, rgba(251,249,246,.1)),
    url('assets/bg-quadrato.webp') 58% 43% / cover no-repeat;
}
.intro-bottom{margin-top:24px}
.microcopy{text-align:center;color:#7d7669;font-size:12px;margin-top:12px}
.btn{
  border:1.5px solid transparent;
  border-radius:12px;
  padding:16px 18px;
  min-height:58px;
  font-weight:700;
  font-size:14px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:11px;
  text-align:center;
  transition:transform .15s,background-color .15s,border-color .15s,color .15s;
  white-space:nowrap;
  cursor:pointer;
}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.72;cursor:wait}
.btn-primary{background:var(--gold);border-color:var(--gold);color:#221b0f;box-shadow:0 8px 18px rgba(214,168,58,.22)}
.btn-primary:hover{background:#e2b445;border-color:#e2b445}
.btn-outline{background:rgba(255,255,255,.72);color:#2f2a21;border-color:rgba(173,157,120,.55)}
.btn-outline:hover{background:rgba(255,255,255,.92)}
.btn-full{width:100%}
.btn span{font-size:20px;font-weight:400;line-height:1}
.question{padding:0;margin:0 0 24px;border:0;min-width:0}
.question legend,.question-label{font-size:15px;font-weight:700;color:#2b2923;margin:0 0 12px;display:block;width:100%;padding:0}
.options{display:grid;gap:9px}
.two-col{grid-template-columns:repeat(2,minmax(0,1fr))}
.three-col{grid-template-columns:repeat(3,minmax(0,1fr))}
.four-col{grid-template-columns:repeat(4,minmax(0,1fr))}
.option-card{position:relative;display:flex;align-items:stretch;min-width:0;cursor:pointer}
.option-card input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.option-card>span{
  width:100%;
  padding:15px 8px;
  min-height:54px;
  border:1.5px solid rgba(171,159,131,.42);
  background:rgba(255,255,255,.82);
  color:#4a453a;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:13px;
  font-weight:600;
  transition:background-color .12s,border-color .12s,color .12s, box-shadow .12s;
}
.option-card:hover>span{border-color:#c5af79}
.option-card input:checked+span{background:var(--goldlight);border-color:var(--gold);color:#231f16;box-shadow:inset 0 0 0 .6px var(--gold), 0 6px 16px rgba(214,168,58,.12)}
.option-card input:focus-visible+span{outline:3px solid #cb9d20;outline-offset:3px}
.stepper{
  display:grid;
  grid-template-columns:58px 1fr 58px;
  border:1.5px solid rgba(171,159,131,.42);
  background:rgba(255,255,255,.82);
  border-radius:12px;
  overflow:hidden;
  min-height:54px;
}
.stepper button{border:0;background:#f0ebe0;font-size:24px;color:#49443a;cursor:pointer}
.stepper button:hover{background:#e8e1d1}
.stepper output{display:flex;justify-content:center;align-items:center;font-size:17px;font-weight:700}
.nav-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px}
.back-link{border:0;background:transparent;text-decoration:underline;text-underline-offset:3px;font-size:12px;color:#514c42;margin-top:16px;padding:7px;cursor:pointer}
.compact-question{margin-bottom:22px}
.compact-question legend{font-size:14px}
.compact-question .option-card>span{min-height:48px;padding:10px 5px}
.option-description{font-size:12px;line-height:1.55;color:#5f594d;margin:2px 0 12px;max-width:440px}
.exterior-heading{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:800;letter-spacing:.15em;color:#9f813c;margin:30px 0 18px}
.exterior-heading .line{height:1px;flex:1;background:#d7c9a8}
.contact-card{
  display:flex;
  flex-direction:column;
  gap:9px;
  background:rgba(255,255,255,.32);
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.26);
}
.field-label{font-weight:700;font-size:13px;margin-top:8px}
.field-label:first-child{margin-top:0}
.required{color:var(--danger)}
.contact-card input{
  border:1.5px solid #ded9cc;
  border-radius:12px;
  min-height:57px;
  padding:15px 16px;
  background:var(--panel-strong);
  color:var(--ink);
  outline:none;
  font-size:15px;
}
.contact-card input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(214,168,58,.12)}
.contact-card input::placeholder{color:#8f897f}
.field-hint{font-size:12px;color:#666054;margin:3px 0 0}
.privacy-note{font-size:11px;line-height:1.6;color:#595346;margin:20px 0 0}
.privacy-note a{text-decoration:underline;color:var(--ink)}
.field-error{color:var(--danger);font-weight:600;background:#ffede8;border:1px solid #f0cfc7;padding:12px;border-radius:10px;font-size:12px;margin:16px 0 0}
.honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.step-success{text-align:center;padding:44px 18px 26px}
.step-success .eyebrow{margin-top:20px}
.step-success h2{font-size:48px}
.success-art{width:102px;height:102px;margin:0 auto;color:#d2bd83}
.success-art svg{width:100%}
.success-message{font-family:'Manrope',Arial,sans-serif;font-size:21px;line-height:1.5;margin:18px auto;color:var(--ink);max-width:340px}
.success-message strong{color:#a67c24}
.step-success .support{margin:10px 0 30px}
.footer{
  min-height:58px;
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:#cac2b3;
  padding:16px clamp(18px,5vw,30px);
  font-size:10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  border-top:1px solid rgba(255,255,255,.08);
}
.footer span:last-child{color:#e6bf63}
@media(max-width:380px){
  .topbar-tag{display:none}
  .content{padding-top:16px}
  .step{padding:20px 15px 18px;border-radius:20px}
  .step-intro{padding-top:0}
  .hero-illustration{width:calc(100% + 30px);margin:0 -15px 21px;height:170px}
  .step h1{font-size:33px}
  .nav-actions{gap:8px}
  .nav-actions .btn{font-size:12px;padding:12px 5px}
}
@media(min-width:700px){
  body{background:radial-gradient(circle at 15% 20%,#39372e,var(--black) 55%);padding:32px 0}
  .site-frame{min-height:calc(100dvh - 64px);border-radius:24px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
  .content{padding-bottom:54px}
  .step-intro{min-height:0}
  .hero-illustration{height:290px}
}
@media(prefers-reduced-motion:reduce){.step,.progress-track>span,.btn{animation:none;transition:none}}

@media(max-width:699px){
  .step h1{font-size:clamp(31px,8.1vw,38px)}
  .step h2{font-size:clamp(29px,7.4vw,36px)}
  .lead{font-size:14.5px;line-height:1.58;margin-top:13px}
  .intro-bottom{margin-top:22px}
  .microcopy{margin-top:10px;font-size:11px}
  .step-intro .btn{min-height:54px}
  .question{margin-bottom:21px}
  .support{margin-bottom:19px}
  .topbar-tag{font-size:8px}
  .footer{min-height:50px;padding:13px 16px}
}
@media(max-width:360px){
  .topbar-tag{display:none}
  .topbar{justify-content:center}
  .brand-logo{width:220px;max-width:90vw}
}

.result-quote{background:rgba(255,255,255,.7);padding:18px;border-radius:18px;border:1px solid #d8c9a8;margin:18px 0 24px}
.result-caption{font-size:11px;font-weight:800;letter-spacing:.1em;color:#7a6b4e}
.result-total{font-size:34px;font-weight:800;color:#2a2419;margin:5px 0 16px}
.test-notice{margin:20px auto;padding:12px;border-radius:10px;background:#fff1c7;color:#6d4709;font-weight:700;font-size:12px}

.result-disclaimer{margin:16px 0 18px;padding:15px 16px;border-radius:12px;background:rgba(255,250,239,.91);color:#433726;border-left:4px solid #f7901e;font-size:12px;line-height:1.58}.result-disclaimer a{color:#5d330f;font-weight:700;overflow-wrap:anywhere}