:root{
  --bg:#11100e;
  --panel:#1b1916;
  --cream:#f1ece2;
  --muted:#aaa298;
  --accent:#d39a6a;
  --ink:#17120e;
  --line:rgba(241,236,226,.13);
  --soft:rgba(211,154,106,.08);
  --font:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --display:"Arial Black",Impact,Inter,ui-sans-serif,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;
  min-height:100vh;
  color:var(--cream);
  font-family:var(--font);
  background:radial-gradient(circle at 50% -10%,rgba(211,154,106,.08),transparent 32rem),var(--bg);
  -webkit-font-smoothing:antialiased
}
a{text-decoration:none;color:inherit}
button,input{font:inherit}

.page{
  width:min(100%,620px);
  margin:0 auto;
  padding:22px 14px 38px
}
.back{
  display:inline-block;
  color:var(--muted);
  font-size:9px;
  font-weight:900;
  letter-spacing:.07em;
  margin:2px 0 48px
}
.kicker{
  font-size:9px;
  font-weight:900;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:9px
}
.hero{text-align:center}
.hero h1{
  font-family:var(--display);
  font-size:clamp(43px,12vw,65px);
  line-height:.88;
  letter-spacing:-.055em;
  text-transform:uppercase;
  margin:0
}

.tile{
  margin:27px auto 0;
  border:1px solid var(--line);
  border-radius:21px;
  padding:18px;
  background:linear-gradient(145deg,var(--soft),rgba(255,255,255,.015));
  box-shadow:0 24px 70px rgba(0,0,0,.22)
}
.tile-top{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  min-height:31px;
  margin-bottom:16px
}
.tag{
  display:flex;
  align-items:center;
  min-height:31px;
  font-size:8px;
  font-weight:900;
  letter-spacing:.14em;
  line-height:1.1;
  text-transform:uppercase;
  color:var(--muted)
}
.time{
  width:108px;
  height:31px;
  flex:0 0 108px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 10px;
  border:1px solid rgba(211,154,106,.52);
  border-radius:999px;
  background:rgba(211,154,106,.10);
  color:var(--cream);
  font-size:8.5px;
  font-weight:900;
  letter-spacing:.07em;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap
}
.tile h2{
  font-size:25px;
  line-height:1.02;
  letter-spacing:-.04em;
  margin:0 0 10px
}
.tile p{
  color:var(--muted);
  font-size:12px;
  line-height:1.46;
  margin:0 0 18px
}
.cta{
  position:relative;
  width:100%;
  height:54px;
  border-radius:14px;
  border:0;
  background:var(--cream);
  color:var(--ink);
  font-size:11px;
  font-weight:900;
  letter-spacing:.035em;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 43px;
  white-space:nowrap
}
.cta::after{
  content:'→';
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  font-size:18px
}
.note{
  text-align:center;
  color:var(--muted);
  font-size:8.5px;
  margin-top:11px;
  text-transform:uppercase;
  letter-spacing:.08em
}
.footer{
  text-align:center;
  color:var(--muted);
  font-size:8px;
  letter-spacing:.08em;
  margin-top:34px
}

/* modal preview */
.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.82);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:12px
}
.modal{
  width:min(100%,500px);
  border:1px solid var(--line);
  border-radius:22px;
  background:#181613;
  padding:21px;
  box-shadow:0 28px 90px rgba(0,0,0,.65)
}
.modal .kicker{margin-bottom:7px}
.modal h3{
  font-size:27px;
  line-height:1.02;
  letter-spacing:-.04em;
  margin:0 0 17px
}
.label{
  display:block;
  font-size:8px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin:0 0 6px
}
.email{
  height:50px;
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  background:#100f0d;
  color:var(--cream);
  padding:0 13px;
  font-size:13px
}
.consent{
  display:flex;
  align-items:center;
  gap:11px;
  width:100%;
  min-height:78px;
  margin:14px 0;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#100f0d;
  color:var(--cream);
  cursor:pointer
}
.consent input{
  appearance:none;
  -webkit-appearance:none;
  width:20px;
  height:20px;
  min-width:20px;
  margin:0;
  border:1px solid rgba(211,154,106,.65);
  border-radius:5px;
  background:#181613;
  position:relative;
  cursor:pointer
}
.consent input:checked{
  background:var(--accent);
  border-color:var(--accent)
}
.consent input:checked::after{
  content:'✓';
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink);
  font-size:13px;
  font-weight:900
}
.consent-copy{
  display:block;
  min-width:0;
  text-align:left
}
.consent-title{
  display:block;
  margin-bottom:3px;
  color:var(--cream);
  font-size:9px;
  font-weight:900;
  letter-spacing:.07em;
  text-transform:uppercase
}
.consent-text{
  display:block;
  color:var(--muted);
  font-size:8.5px;
  line-height:1.42
}
.submit{
  position:relative;
  height:50px;
  width:100%;
  border:0;
  border-radius:12px;
  background:var(--accent);
  color:var(--ink);
  font-size:11px;
  font-weight:900;
  letter-spacing:.035em;
  padding:0 38px
}
.submit::after{
  content:'→';
  position:absolute;
  right:15px;
  top:50%;
  transform:translateY(-50%);
  font-size:17px
}
.tiny{
  color:var(--muted);
  font-size:8px!important;
  text-align:center;
  margin:9px 0 0!important
}
@media(max-width:430px){
  .page{padding:20px 11px 34px}
  .back{margin-bottom:43px}
  .hero h1{font-size:45px}
  .tile{padding:17px}
  .tile h2{font-size:23px}
  .cta{font-size:10.5px}
}

@media(max-width:360px){
  .time{
    width:102px;
    flex-basis:102px;
    font-size:8px;
  }
  .tile-top{gap:9px}
}


/* functional email gate */
dialog.email-gate{
  width:min(calc(100% - 22px),500px);
  border:1px solid var(--line);
  border-radius:22px;
  padding:0;
  background:#181613;
  color:var(--cream);
  box-shadow:0 30px 100px rgba(0,0,0,.68)
}
dialog.email-gate::backdrop{
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(4px)
}
.gate-modal{padding:21px}
.gate-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px
}
.gate-close{
  width:35px;
  height:35px;
  min-width:35px;
  border:1px solid var(--line);
  border-radius:50%;
  background:transparent;
  color:var(--cream);
  font-size:20px;
  line-height:1;
  cursor:pointer
}
.gate-error{
  min-height:16px;
  margin-top:9px;
  color:#ffb3b3;
  font-size:9px;
  line-height:1.35
}
.unlocked-note{
  color:var(--accent)!important
}