:root{
  --bg-0:#f7efe6;
  --bg-1:#efe1d2;
  --bg-2:#fffaf4;
  --ink:#281c15;
  --ink-soft:rgba(40,28,21,.76);
  --accent:#936a52;
  --accent-dark:#6c4938;
  --accent-soft:#c3a690;
  --line:rgba(40,28,21,.13);
  --line-strong:rgba(40,28,21,.22);
  --glass:rgba(255,252,247,.62);
  --glass-strong:rgba(255,252,247,.82);
  --shadow-lg:0 36px 90px rgba(52,31,20,.18);
  --shadow-md:0 14px 36px rgba(52,31,20,.14);
  --radius-xl:32px;
  --radius-lg:20px;
  --danger:#9d3131;
  --ok:#2f6a3b;
}

*{ box-sizing:border-box; }
html,body{ min-height:100%; }

body{
  margin:0;
  color:var(--ink);
  font-family: "Manrope", "Avenir Next", "Segoe UI", sans-serif;
  background:
    radial-gradient(1200px 720px at -8% 15%, #f4dfcc 0%, rgba(244,223,204,0) 65%),
    radial-gradient(980px 640px at 108% 86%, #f0dbc8 0%, rgba(240,219,200,0) 70%),
    linear-gradient(180deg, var(--bg-0), var(--bg-2) 72%);
  overflow-x:hidden;
  overflow-y:auto;
  position:relative;
}
body.modal-open{
  overflow:hidden;
}

body::before,
body::after{
  content:"";
  position:fixed;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  filter: blur(2px);
}
body::before{
  width:min(42vw, 580px);
  height:min(42vw, 580px);
  top:-150px;
  right:-160px;
  background:radial-gradient(circle, rgba(147,106,82,.18) 0%, rgba(147,106,82,0) 68%);
}
body::after{
  width:min(40vw, 520px);
  height:min(40vw, 520px);
  bottom:-170px;
  left:-150px;
  background:radial-gradient(circle, rgba(195,166,144,.2) 0%, rgba(195,166,144,0) 72%);
}

canvas#dust{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  opacity:.42;
  pointer-events:none;
}

.cursor-glow{
  position:fixed;
  width:360px;
  height:360px;
  border-radius:50%;
  transform: translate(-50%, -50%);
  z-index:2;
  pointer-events:none;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,245,220,.66), rgba(255,230,179,.24) 34%, rgba(179,133,102,.18) 54%, rgba(179,133,102,0) 72%),
    radial-gradient(circle at 72% 70%, rgba(147,106,82,.2), rgba(147,106,82,0) 58%);
  filter: blur(2px);
  mix-blend-mode: soft-light;
  opacity:.92;
}

.wrap{
  position:relative;
  z-index:3;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding: clamp(16px, 3vw, 36px);
}

.card{
  width:min(1120px, 96vw);
  padding: clamp(22px, 3.2vw, 46px);
  border-radius: clamp(24px, 2.8vw, 36px);
  border:1px solid var(--line);
  background: linear-gradient(155deg, rgba(255,255,255,.72), rgba(255,251,245,.52));
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(12px);
  position:relative;
  overflow:hidden;
  transform-style:preserve-3d;
  display:grid;
  gap: clamp(10px, 1.3vw, 18px);
}

.card::before{
  content:"";
  position:absolute;
  inset:-140px;
  background: linear-gradient(115deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.54) 50%, rgba(255,255,255,0) 64%);
  transform: translateX(-72%) rotate(7deg);
  opacity:.58;
  pointer-events:none;
  animation: sheen 11s ease-in-out infinite;
}
.card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  border:1px solid rgba(255,255,255,.46);
  pointer-events:none;
}

@keyframes sheen{
  0%, 18%{ transform: translateX(-78%) rotate(7deg); opacity:.08; }
  44%{ transform: translateX(6%) rotate(7deg); opacity:.50; }
  74%, 100%{ transform: translateX(72%) rotate(7deg); opacity:.08; }
}

.topline{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-bottom:4px;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:11.5px;
  font-weight:600;
  color: rgba(40,28,21,.62);
}
.topline-brand{
  margin-top:10px;
  letter-spacing:.18em;
}
.dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background: var(--accent-soft);
  box-shadow: 0 0 0 4px rgba(195,166,144,.18);
}

h1{
  margin:0;
  text-align:center;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-weight:600;
  line-height:.96;
  letter-spacing:-0.025em;
  font-size: clamp(48px, 8vw, 86px);
  text-wrap:balance;
}
h1 em{
  font-style:italic;
  font-weight:500;
  color: var(--accent);
}

.sub{
  margin: 2px auto 0;
  max-width: 70ch;
  text-align:center;
  font-size: clamp(14.5px, 1.18vw, 17px);
  line-height:1.68;
  color: var(--ink-soft);
  text-wrap:pretty;
}

.progress-wrap{
  width:min(560px, 100%);
  margin: 4px auto 0;
  padding: 12px 13px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--glass);
  box-shadow: 0 8px 24px rgba(52,31,20,.07);
}
.progress-label{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  font-weight:600;
  color: rgba(40,28,21,.62);
  margin-bottom:8px;
  letter-spacing:.01em;
}
.bar{
  height:11px;
  border-radius:999px;
  background: rgba(40,28,21,.11);
  border: 1px solid rgba(40,28,21,.10);
  overflow:hidden;
  position:relative;
}
.bar > span{
  display:block;
  height:100%;
  width:0%;
  border-radius:inherit;
  background: linear-gradient(90deg, #c19d85, #8b624a 62%, #6f4c3a 100%);
  position:relative;
  animation: fill 1.2s ease forwards;
}
.bar > span::after{
  content:"";
  position:absolute;
  top:-12px;
  bottom:-12px;
  left:-90px;
  width:80px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  transform: skewX(-16deg);
  animation: shine 2.7s ease-in-out infinite;
  opacity:.85;
}
@keyframes fill{ to{ width: var(--pct, 42%); } }
@keyframes shine{
  0%, 42%{ left:-90px; opacity:0; }
  58%{ opacity:.75; }
  100%{ left: calc(100% + 90px); opacity:0; }
}

.divider{
  width:min(460px, 88%);
  height:1px;
  margin: 2px auto;
  background: linear-gradient(90deg, transparent, rgba(40,28,21,.18), transparent);
}

.pill-row{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 2px;
}
.pill{
  min-height:48px;
  padding: 12px 14px;
  border-radius:16px;
  border:1px solid var(--line);
  background: var(--glass);
  font-size:13px;
  font-weight:500;
  color: rgba(40,28,21,.78);
  display:flex;
  gap:9px;
  align-items:center;
  justify-content:flex-start;
  box-shadow: 0 8px 18px rgba(52,31,20,.05);
  user-select:none;
}
.pill svg{
  width:16px;
  height:16px;
  opacity:.86;
  flex:0 0 auto;
}

.cta{
  margin-top: 4px;
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}
.btn{
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,.58);
  color: rgba(40,28,21,.88);
  padding: 12px 16px;
  border-radius:14px;
  font-size:14px;
  font-weight:600;
  letter-spacing:.01em;
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  box-shadow: 0 6px 16px rgba(52,31,20,.06);
}
.btn .spinner{
  width:14px;
  height:14px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.36);
  border-top-color: rgba(255,255,255,.96);
  display:none;
  animation: spin .72s linear infinite;
}
.btn.is-loading .spinner{
  display:inline-block;
}
.btn:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.76);
  box-shadow: 0 10px 22px rgba(52,31,20,.11);
}
.btn.primary{
  background: linear-gradient(180deg, #9d735a, #785443);
  color: rgba(255,255,255,.97);
  border-color: rgba(108,73,56,.54);
  box-shadow: 0 12px 26px rgba(95,62,44,.28);
}
.btn.primary:hover{
  transform: translateY(-2px) scale(1.01);
  background: linear-gradient(180deg, #a67b61, #825a47);
}
.btn.ghost{
  background: rgba(255,255,255,.36);
}
.btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
@keyframes spin{
  to{ transform: rotate(360deg); }
}

button:focus-visible,
a:focus-visible,
input:focus-visible{
  outline: 2px solid rgba(147,106,82,.52);
  outline-offset: 2px;
}

.footer{
  margin-top: 2px;
  text-align:center;
  color: rgba(40,28,21,.62);
  font-size: 12.5px;
  line-height:1.5;
  text-wrap:balance;
}

/* ===== MODAL ===== */
.modal-backdrop{
  position:fixed;
  inset:0;
  z-index:70;
  display:none;
  align-items:center;
  justify-content:center;
  padding: clamp(8px, 2.2vw, 18px);
  background: rgba(18,13,10,.52);
  backdrop-filter: blur(8px);
}
.modal-backdrop.show{ display:flex; }

.modal{
  width:min(760px, 96vw);
  max-height:min(92dvh, 820px);
  border-radius:22px;
  border:1px solid rgba(40,28,21,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,249,242,.76));
  box-shadow: 0 30px 84px rgba(10,8,6,.34);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transform: translateY(6px);
  animation: pop .2s ease-out forwards;
  position:relative;
  isolation:isolate;
}
@keyframes pop{ to{ transform: translateY(0); } }

.modal::before,
.modal::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:52%;
  pointer-events:none;
  z-index:8;
  opacity:0;
  background:
    linear-gradient(180deg, rgba(255,253,250,.98), rgba(252,245,238,.98));
  transform: scaleY(0);
}
.modal::before{
  top:0;
  transform-origin: top;
  border-bottom:1px solid rgba(40,28,21,.08);
}
.modal::after{
  bottom:0;
  transform-origin: bottom;
  border-top:1px solid rgba(40,28,21,.08);
}
.modal.is-transitioning::before{
  animation: modal-shutter-top .84s cubic-bezier(.67,.02,.26,1) both;
}
.modal.is-transitioning::after{
  animation: modal-shutter-bottom .84s cubic-bezier(.67,.02,.26,1) both;
}

@keyframes modal-shutter-top{
  0%{ opacity:0; transform:scaleY(0); }
  12%{ opacity:1; }
  44%{ opacity:1; transform:scaleY(1); }
  62%{ opacity:1; transform:scaleY(1); }
  100%{ opacity:0; transform:scaleY(0); }
}
@keyframes modal-shutter-bottom{
  0%{ opacity:0; transform:scaleY(0); }
  12%{ opacity:1; }
  44%{ opacity:1; transform:scaleY(1); }
  62%{ opacity:1; transform:scaleY(1); }
  100%{ opacity:0; transform:scaleY(0); }
}

.modal-header{
  padding:16px 18px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid rgba(40,28,21,.11);
  background: rgba(255,255,255,.5);
}
.modal-title{
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 30px;
  line-height:1;
  font-weight:600;
  letter-spacing:-.01em;
}
.modal-subtitle{
  margin-top:2px;
  font-size:12.5px;
  color: rgba(42,30,23,.62);
}
.x{
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid rgba(40,28,21,.18);
  background: rgba(255,255,255,.58);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: transform .14s ease, background .14s ease;
  flex:0 0 auto;
}
.x:hover{
  transform: scale(1.04);
  background: rgba(255,255,255,.78);
}

.modal-body{
  padding:18px;
  overflow:hidden;
}

.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

label{
  display:block;
  margin-bottom:6px;
  font-size:12.5px;
  font-weight:600;
  color: rgba(40,28,21,.72);
}

input[type="email"], input[type="date"]{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(40,28,21,.18);
  background: var(--glass-strong);
  outline:none;
  font-size:14px;
  color: rgba(40,28,21,.94);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input:focus{
  border-color: rgba(147,106,82,.55);
  box-shadow: 0 0 0 4px rgba(147,106,82,.13);
  background: #fffdf9;
}

.privacy-row{
  margin-top:12px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(40,28,21,.13);
  background: rgba(255,255,255,.58);
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.privacy-consent{
  margin-top:14px;
}
.privacy-row input[type="checkbox"]{
  margin-top:3px;
  width:18px;
  height:18px;
}
.privacy-row small{
  display:block;
  font-size:12.5px;
  line-height:1.45;
  color: rgba(40,28,21,.74);
}
.privacy-row a{
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight:600;
}
.privacy-hint-muted{
  color: rgba(42,30,23,.55);
}

.hp-field{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
}

.hint{
  margin-top:8px;
  font-size:12.5px;
  color: rgba(40,28,21,.64);
}

.registered-banner{
  margin-top:12px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(47,106,59,.26);
  background: linear-gradient(180deg, rgba(47,106,59,.14), rgba(47,106,59,.06));
  color: rgba(34,78,43,.95);
  display:none;
  align-items:flex-start;
  gap:10px;
}
.registered-banner.show{
  display:flex;
  animation: pop-in .18s ease-out;
}
.registered-banner-icon{
  width:22px;
  height:22px;
  border-radius:999px;
  background: rgba(47,106,59,.88);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:13px;
  font-weight:800;
  flex:0 0 auto;
  margin-top:1px;
}
.registered-banner-text{
  display:grid;
  gap:2px;
}
.registered-banner-text strong{
  font-size:13px;
  line-height:1.2;
}
.registered-banner-text span{
  font-size:12.5px;
  line-height:1.4;
  color: rgba(34,78,43,.88);
}
@keyframes pop-in{
  from{
    opacity:0;
    transform: translateY(4px);
  }
  to{
    opacity:1;
    transform: translateY(0);
  }
}

.error{
  margin-top:10px;
  font-size:13px;
  color: var(--danger);
  display:none;
}
.success{
  margin-top:10px;
  font-size:13px;
  color: var(--ok);
  display:none;
}

.modal-footer{
  padding:16px 18px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  border-top:1px solid rgba(40,28,21,.11);
  background: rgba(255,255,255,.44);
}

.modal-header,
.modal-body,
.modal-footer{
  transition: opacity .22s ease, transform .22s ease;
}
.modal.show-success .modal-header,
.modal.show-success .modal-body,
.modal.show-success .modal-footer{
  opacity:0;
  pointer-events:none;
  visibility:hidden;
}
.modal.show-success .modal-header,
.modal.show-success .modal-body{
  transform: translateY(-8px);
}
.modal.show-success .modal-footer{
  transform: translateY(8px);
}

.modal-success{
  position:absolute;
  inset:0;
  z-index:9;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:12px;
  padding: clamp(22px, 5vw, 44px);
  opacity:0;
  pointer-events:none;
  transform: translateY(10px) scale(.98);
  transition: opacity .26s ease .12s, transform .26s ease .12s;
}
.modal.show-success .modal-success{
  opacity:1;
  pointer-events:auto;
  transform: translateY(0) scale(1);
}
.modal-success-mark{
  width:72px;
  height:72px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background: radial-gradient(circle at 30% 30%, #58ba71, #2f8f49 74%);
  color:#fff;
  font-size:40px;
  line-height:1;
  font-weight:900;
  box-shadow:
    0 16px 34px rgba(47,106,59,.28),
    inset 0 1px 0 rgba(255,255,255,.42);
}
.modal-success-title{
  margin:2px 0 0;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: clamp(34px, 5.2vw, 44px);
  font-weight:600;
  line-height:1;
  letter-spacing:-.015em;
  color: rgba(33,25,20,.96);
}
.modal-success-text{
  margin:0;
  max-width: 44ch;
  font-size:15px;
  line-height:1.62;
  color: rgba(40,28,21,.78);
  text-wrap:pretty;
}
.modal-success .btn{
  min-width: 170px;
  margin-top:4px;
}

/* ===== PRIVACY VIEWER ===== */
.privacy-viewer{ display:none; }
.privacy-viewer.show{ display:block; }
.privacy-viewer-spaced{
  margin-top:14px;
}
.privacy-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.privacy-head-title{
  font-weight:500;
  color: rgba(42,30,23,.80);
}

.privacy-scroll{
  max-height: min(360px, 42dvh);
  overflow:auto;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(40,28,21,.12);
  background: rgba(255,255,255,.62);
  line-height:1.6;
  font-size:13.5px;
  color: rgba(40,28,21,.8);
}
.privacy-policy-title{
  margin:0 0 10px 0;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
}
.privacy-policy-intro{
  margin-top:0;
}
.privacy-contact-note{
  color: rgba(42,30,23,.62);
}
.privacy-list{
  margin-top:6px;
}
.privacy-end-note{
  margin-top:18px;
  padding-top:12px;
  border-top:1px solid rgba(42,30,23,.12);
}
.privacy-actions{
  margin-top:12px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.badge{
  font-size:12px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(40,28,21,.12);
  background: rgba(255,255,255,.6);
  color: rgba(40,28,21,.72);
}
.badge.ok{
  border-color: rgba(47,106,59,.26);
  color: rgba(47,106,59,.92);
  background: rgba(47,106,59,.09);
}

@media (max-width:1080px){
  .card{
    width:min(980px, 100%);
  }
  .pill-row{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:760px){
  .modal-backdrop{
    padding:0;
    align-items:stretch;
    justify-content:stretch;
  }
  .wrap{
    place-items:start center;
    padding-top:max(16px, env(safe-area-inset-top));
    padding-bottom:max(18px, env(safe-area-inset-bottom));
  }
  .card{
    padding:18px 16px;
    border-radius:24px;
  }
  .topline{
    gap:10px;
    letter-spacing:.11em;
    font-size:11px;
  }
  h1{
    font-size: clamp(40px, 13.8vw, 62px);
  }
  .sub{
    font-size:14.4px;
    line-height:1.58;
  }
  .progress-wrap{
    padding:10px 11px;
  }
  .pill-row{
    grid-template-columns: 1fr;
  }
  .pill{
    justify-content:center;
    text-align:center;
  }
  .cta .btn{
    width:100%;
  }
  .footer{
    margin-top:0;
  }
  .modal{
    width:100vw;
    height:100dvh;
    max-height:100dvh;
    border-radius:0;
    border:none;
    box-shadow:none;
  }
  .modal-success{
    justify-content:center;
    padding:
      max(20px, env(safe-area-inset-top))
      18px
      max(20px, env(safe-area-inset-bottom));
    gap:10px;
  }
  .modal-success-mark{
    width:62px;
    height:62px;
    font-size:34px;
  }
  .modal-success-title{
    font-size: clamp(30px, 10vw, 40px);
  }
  .modal-success-text{
    font-size:14px;
    line-height:1.56;
  }
  .modal-success .btn{
    width:100%;
    max-width:320px;
  }
  .grid{
    grid-template-columns: 1fr;
  }
  .modal-header,
  .modal-body,
  .modal-footer{
    padding:14px;
  }
  .modal-header{
    padding-top:max(14px, env(safe-area-inset-top));
    position:sticky;
    top:0;
    z-index:2;
    backdrop-filter: blur(6px);
  }
  .modal-body{
    overflow:auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    flex:1 1 auto;
  }
  .modal-title{
    font-size: 28px;
  }
  .modal-footer{
    justify-content:stretch;
    position:sticky;
    bottom:0;
    z-index:2;
    padding-bottom:max(14px, env(safe-area-inset-bottom));
    backdrop-filter: blur(6px);
  }
  .modal-footer .btn{
    flex:1 1 auto;
  }
  .privacy-scroll{
    max-height: min(320px, 38dvh);
  }
  .privacy-actions{
    gap:8px;
  }
  .privacy-actions .btn{
    width:100%;
  }
}

@media (max-width:480px){
  .modal-title{
    font-size: 24px;
  }
  .modal-header{
    gap:10px;
  }
  .modal-body{
    padding:12px;
  }
  .btn{
    padding:11px 14px;
    border-radius:13px;
  }
  .modal-footer{
    flex-direction:column;
    padding:12px;
    padding-bottom:max(12px, env(safe-area-inset-bottom));
  }
  .modal-footer .btn{
    width:100%;
  }
  .privacy-scroll{
    max-height: min(290px, 35dvh);
  }
  .modal-success{
    padding:
      max(16px, env(safe-area-inset-top))
      14px
      max(16px, env(safe-area-inset-bottom));
  }
  .modal-success-text{
    font-size:13.5px;
  }
}

@media (max-height:740px){
  .modal-body{
    overflow:auto;
    -webkit-overflow-scrolling: touch;
  }
  .privacy-scroll{
    max-height: min(280px, 36dvh);
  }
  .wrap{
    place-items:start center;
    padding-top:max(14px, env(safe-area-inset-top));
    padding-bottom:max(14px, env(safe-area-inset-bottom));
  }
}

@media (hover:none), (pointer:coarse){
  .cursor-glow{ display:none; }
  .card{ transform:none !important; }
  .btn:hover{ transform:none; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .card{ transform:none !important; }
}