:root{
  --paper:#f6f1e8;
  --paper-2:#efe6d6;
  --ink:#15120f;
  --ink-soft:#4d4338;
  --rail:#766a5d;
  --line:rgba(21,18,15,.12);
  --accent:#b65d26;
  --accent-soft:#d98b57;
  --signal:#1f7a53;
  --signal-soft:#d7f0df;
  --warn:#c55a32;
  --shadow:0 20px 70px rgba(41,27,14,.12);
  --sans:'Space Grotesk', system-ui, sans-serif;
  --mono:'IBM Plex Mono', monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  background:
    radial-gradient(circle at top left, rgba(217,139,87,.18), transparent 26%),
    radial-gradient(circle at top right, rgba(31,122,83,.12), transparent 20%),
    linear-gradient(180deg, #f9f4eb 0%, #f0e5d2 100%);
  font-family:var(--sans);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(rgba(21,18,15,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,18,15,.035) 1px, transparent 1px);
  background-size:26px 26px;
  pointer-events:none;
}
a{color:inherit;text-decoration:none}
.wrap{position:relative;max-width:780px;margin:0 auto;padding:28px 18px 72px}
.shell{
  background:rgba(255,250,242,.94);
  border:1px solid rgba(21,18,15,.1);
  border-radius:32px;
  box-shadow:var(--shadow);
  padding:28px;
}
.back-strip{
  margin-bottom:18px;
  color:var(--rail);
  font:500 12px/1.6 var(--mono);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.back-strip a{text-decoration:underline}
.tag{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.66);
  border:1px solid rgba(21,18,15,.1);
  color:var(--rail);
  font:600 11px/1 var(--mono);
  letter-spacing:.09em;
  text-transform:uppercase;
}
.tag::before{
  content:"";
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--accent);
}
h1{
  margin:18px 0 12px;
  font-size:clamp(2.2rem,7vw,4rem);
  line-height:.95;
  letter-spacing:-.07em;
}
.lede{
  margin:0 0 24px;
  color:var(--ink-soft);
  font-size:1.05rem;
  line-height:1.7;
}
.rail{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:0 0 24px;
}
.rail-card{
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(21,18,15,.08);
  background:rgba(255,255,255,.58);
}
.rail-card strong{
  display:block;
  font-size:1.3rem;
  letter-spacing:-.05em;
  margin-bottom:4px;
}
.rail-card span{
  display:block;
  color:var(--rail);
  font:500 11px/1.5 var(--mono);
  letter-spacing:.07em;
  text-transform:uppercase;
}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,245,232,.92));
  border:1px solid rgba(21,18,15,.1);
  border-radius:26px;
  padding:22px;
  margin-top:16px;
}
.card h2{
  margin:0 0 14px;
  font:600 13px/1 var(--mono);
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--accent);
}
.row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  padding:12px 0;
  border-bottom:1px dashed rgba(21,18,15,.12);
  font:500 13px/1.6 var(--mono);
}
.row:last-child{border-bottom:0}
.label{color:var(--rail)}
.val{color:var(--ink);text-align:right}
.row.total{
  margin-top:8px;
  padding-top:16px;
}
.row.total .label{
  font-size:15px;
  color:var(--ink);
}
.row.total .val{
  font-size:30px;
  line-height:1;
  letter-spacing:-.06em;
  color:var(--accent);
}
.includes{
  list-style:none;
  margin:16px 0 0;
  padding:0;
  display:grid;
  gap:10px;
}
.includes li{
  position:relative;
  padding-left:18px;
  color:var(--ink-soft);
  line-height:1.6;
}
.includes li::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--signal);
}
.email-row input{
  width:100%;
  min-height:54px;
  padding:0 18px;
  border-radius:18px;
  border:1px solid rgba(21,18,15,.14);
  background:#fffdf9;
  color:var(--ink);
  font:500 15px/1 var(--mono);
}
.email-row input:focus{
  outline:none;
  border-color:rgba(182,93,38,.6);
  box-shadow:0 0 0 4px rgba(182,93,38,.08);
}
.confirm-row{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin:16px 0 0;
  color:var(--ink-soft);
  font-size:.93rem;
  line-height:1.65;
}
.confirm-row input[type="checkbox"]{
  margin-top:4px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:54px;
  margin-top:18px;
  padding:0 18px;
  border-radius:18px;
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--paper);
  cursor:pointer;
  font:600 14px/1 var(--mono);
  letter-spacing:.04em;
  transition:.18s ease;
}
.btn:hover:not(:disabled){transform:translateY(-1px)}
.btn:disabled{
  background:#85786b;
  border-color:#85786b;
  color:#f1e7d8;
  cursor:not-allowed;
}
.fine{
  margin:20px 4px 0;
  color:var(--rail);
  text-align:center;
  font:500 12px/1.8 var(--mono);
}
.fine a{text-decoration:underline}
code{
  padding:2px 6px;
  border-radius:8px;
  background:#171412;
  color:#f8f0e4;
  font:500 12px/1.4 var(--mono);
}
@media (max-width: 700px){
  .shell{padding:22px}
  .rail{grid-template-columns:1fr}
  .row{display:block}
  .val{text-align:left;margin-top:4px}
  .row.total .val{margin-top:8px}
}