:root {
  --ink: #f8ebd8;
  --muted: #c9a98e;
  --wine: #5e0e1a;
  --wine-deep: #26040a;
  --coral: #f36f5f;
  --panel: #f4e6d3;
  --panel-ink: #2c0b10;
  --line: rgba(77, 17, 23, 0.23);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; background: var(--wine-deep); }
body { min-height: 100%; margin: 0; color: var(--ink); background: radial-gradient(circle at 13% 18%, #7e1927 0, transparent 32rem), radial-gradient(circle at 89% 74%, #641420 0, transparent 35rem), var(--wine-deep); font-family: Manrope, sans-serif; }
button, input, select { font: inherit; }
.page-shell { width: min(1180px, calc(100% - 48px)); min-height: calc(100vh - 72px); margin: 0 auto; display: grid; grid-template-columns: 1.03fr .97fr; align-items: stretch; position: relative; }
.grain { pointer-events: none; position: fixed; inset: 0; opacity: .18; z-index: 2; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E"); }
.hero { padding: 88px 80px 80px 10px; display: flex; flex-direction: column; justify-content: center; }
.eyebrow, .kicker { color: var(--coral); font: 500 10px/1.2 "DM Mono", monospace; letter-spacing: .17em; }
.eyebrow { display: flex; align-items: center; gap: 9px; }
.eyebrow span { width: 30px; height: 1px; background: currentColor; }
h1, h2 { margin: 0; font-family: "Bodoni Moda", serif; letter-spacing: -.06em; }
h1 { max-width: 680px; margin-top: 25px; font-size: clamp(3.7rem, 7.1vw, 6.7rem); line-height: .9; font-weight: 700; }
h1 em, h2 i { color: var(--coral); font-weight: 600; }
.intro { max-width: 470px; margin: 31px 0 27px; color: #edd4bb; font-size: 16px; line-height: 1.7; }
.promise-list { display: flex; flex-wrap: wrap; gap: 9px; }
.promise-list span { border: 1px solid rgba(248, 235, 216, .24); border-radius: 99px; padding: 7px 11px; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.signup-panel { margin: 36px 0; padding: 47px 46px 38px; color: var(--panel-ink); background: var(--panel); border-radius: 2px; box-shadow: -16px 20px 0 rgba(0, 0, 0, .12); position: relative; z-index: 3; }
.panel-head { margin-bottom: 30px; }
.kicker { margin: 0 0 10px; color: var(--wine); }
h2 { font-size: clamp(2.4rem, 4vw, 3.65rem); line-height: .92; }
.panel-head > p:last-child, .success-state > p:not(.kicker) { margin: 18px 0 0; max-width: 370px; color: #6f4b47; font-size: 13px; line-height: 1.7; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px 15px; }
.field { display: grid; gap: 7px; }
.field-full { grid-column: 1 / -1; }
.field-half { grid-column: auto; }
.field > span { color: #5d3535; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.field small { color: #98766b; font-size: 9px; letter-spacing: .04em; }
input, select { width: 100%; height: 45px; border: 1px solid var(--line); border-radius: 6px; outline: none; color: var(--panel-ink); background: rgba(255,255,255,.42); padding: 0 13px; font-size: 13px; transition: border-color .2s, background .2s, box-shadow .2s; }
select {
  appearance: none;
  border-color: rgba(94, 14, 26, .28);
  background-color: rgba(255,255,255,.48);
  background-image:
    linear-gradient(45deg, transparent 50%, #5e0e1a 50%),
    linear-gradient(135deg, #5e0e1a 50%, transparent 50%),
    radial-gradient(circle, rgba(94, 14, 26, .09) 0 58%, transparent 60%);
  background-position:
    calc(100% - 22px) 20px,
    calc(100% - 16px) 20px,
    calc(100% - 19px) 50%;
  background-size: 6px 6px, 6px 6px, 25px 25px;
  background-repeat: no-repeat;
  padding-right: 48px;
  cursor: pointer;
}
input::placeholder { color: #a9897e; }
input:focus, select:focus { border-color: var(--wine); background: #fffaf3; box-shadow: 0 0 0 3px rgba(243, 111, 95, .13); }
.contact-block { margin: 19px 0 22px; padding: 15px; border: 1px solid rgba(94, 14, 26, .17); border-radius: 8px; background: linear-gradient(135deg, rgba(255, 248, 238, .72), rgba(237, 210, 189, .34)); }
.contact-hint { margin: 0 0 14px; color: var(--wine); font-size: 12px; font-weight: 800; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr); gap: 11px; align-items: end; }
.or-divider { height: 34px; width: 34px; display: grid; place-items: center; align-self: end; margin-bottom: 5px; color: var(--wine); border: 1px solid rgba(94, 14, 26, .28); border-radius: 50%; background: #fff7ec; font: 800 9px/1 "DM Mono", monospace; letter-spacing: .08em; }
.consent { display: grid; grid-template-columns: 18px 1fr; gap: 9px; align-items: start; color: #684440; font-size: 11px; line-height: 1.55; cursor: pointer; }
.consent input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.checkmark { width: 18px; height: 18px; margin-top: 1px; border: 1px solid #8c615b; display: grid; place-items: center; }
.consent input:checked + .checkmark { border-color: var(--wine); background: var(--wine); }
.consent input:checked + .checkmark::after { content: "✓"; color: white; font-size: 12px; }
.consent input:focus-visible + .checkmark { outline: 2px solid var(--coral); outline-offset: 2px; }
.form-error { margin: 16px 0 0; color: #a51c2a; font-size: 12px; font-weight: 700; }
.submit-button { margin-top: 24px; width: 100%; min-height: 52px; border: 0; color: #fff2df; background: var(--wine); display: flex; align-items: center; justify-content: center; gap: 12px; cursor: pointer; font: 700 11px/1 "DM Mono", monospace; letter-spacing: .1em; transition: transform .2s, background .2s; }
.submit-button b { font-size: 20px; font-weight: 400; line-height: 0; }
.submit-button:hover { background: #7a1220; transform: translateY(-2px); }
.submit-button:disabled { cursor: wait; opacity: .7; transform: none; }
.privacy-note { margin: 14px 7px 0; color: #8d6d64; font-size: 10px; line-height: 1.55; text-align: center; }
.turnstile-container { margin-bottom: 17px; }
.success-state { min-height: 510px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.success-mark { position: absolute; bottom: -67px; right: -35px; color: rgba(94, 14, 26, .08); font: 800 250px/1 "Bodoni Moda", serif; }
footer { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 0 10px 27px; color: rgba(248,235,216,.55); display: flex; justify-content: space-between; font: 10px/1.3 "DM Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 800px) { .page-shell { width: min(100% - 32px, 580px); display: block; } .hero { min-height: auto; padding: 60px 3px 45px; } h1 { font-size: clamp(3.3rem, 15vw, 5rem); } .signup-panel { margin: 0 0 25px; padding: 35px 23px 30px; } footer { width: min(100% - 32px, 580px); padding: 0 3px 24px; } }
@media (max-width: 560px) { .contact-grid { grid-template-columns: 1fr; } .or-divider { width: 42px; height: 28px; justify-self: center; } }
@media (max-width: 430px) { .form-grid { grid-template-columns: 1fr; } .field-full, .field-half { grid-column: auto; } .promise-list { gap: 6px; } .promise-list span { font-size: 9px; } footer { display: grid; gap: 8px; } }
@media (prefers-reduced-motion: no-preference) { .hero > *, .signup-panel { animation: rise .7s both; } .hero > *:nth-child(2) { animation-delay: .08s; } .hero > *:nth-child(3) { animation-delay: .16s; } .hero > *:nth-child(4) { animation-delay: .24s; } .signup-panel { animation-delay: .18s; } @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } }
