*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --page-bg: #f5f3ef;
  --page-bg-image: none;
  --page-text: #172033;
  --card-bg: rgba(255,255,255,.96);
  --card-border: rgba(23,32,51,.08);
  --card-shadow: 0 24px 60px rgba(17,24,39,.12);
  --hero-bg: #dde4ee;
  --hero-height: 228px;
  --hero-display: block;
  --shell-width: 468px;
  --shell-padding: 28px 18px 20px;
  --card-radius: 20px;
  --card-body-padding: 34px 32px 30px;
  --brand-font: Georgia, "Times New Roman", serif;
  --body-font: "Helvetica Neue", Arial, sans-serif;
  --ornament-color: #7c8699;
  --brand-color: #1d2434;
  --tagline-color: #7b6e63;
  --muted: #7d8798;
  --headline-color: #1d2434;
  --accent: #1f4f86;
  --accent-hover: #173e69;
  --field-bg: #fcfcfb;
  --field-border: rgba(23,32,51,.12);
  --field-focus: rgba(31,79,134,.14);
  --divider-color: rgba(23,32,51,.12);
  --success-ring: rgba(31,79,134,.15);
  --success-bg: #f6f8fb;
  --footer-color: rgba(23,32,51,.56);
  --brand-name-size: 2.05rem;
  --brand-name-spacing: .3em;
  --tagline-size: .78rem;
  --tagline-spacing: .34em;
  --headline-size: 1.12rem;
  --button-radius: 999px;
  --button-spacing: .08em;
  --checkbox-accent: #1f4f86;
  --success-icon-size: 72px;
  --success-icon-mark-size: 24px;
  --footer-display: block;
  --ornament-display: block;
}

html { font-size: 16px; }

body {
  min-height: 100dvh;
  padding: var(--shell-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--body-font);
  color: var(--page-text);
  background: var(--page-bg);
  background-image: var(--page-bg-image);
  -webkit-font-smoothing: antialiased;
}

body[data-mode="embed"] {
  min-height: 0;
  justify-content: flex-start;
  padding: 0;
  background-image: none;
}

.shell {
  width: 100%;
  max-width: var(--shell-width);
}

body[data-mode="embed"] .shell {
  max-width: none;
}

.card {
  width: 100%;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
}

body[data-mode="embed"] .card {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.hero {
  width: 100%;
  height: var(--hero-height);
  object-fit: cover;
  object-position: center 32%;
  display: var(--hero-display);
  background: var(--hero-bg);
}

.card-body {
  padding: var(--card-body-padding);
}

.brand {
  text-align: center;
  margin-bottom: 28px;
}

.brand-image {
  display: block;
  max-width: 260px;
  width: 100%;
  height: auto;
  margin: 0 auto 18px;
}

.brand-ornament {
  display: var(--ornament-display);
  margin-bottom: 10px;
  color: var(--ornament-color);
  font-family: var(--brand-font);
  font-size: .82rem;
  letter-spacing: .5em;
}

.brand-name {
  color: var(--brand-color);
  font-family: var(--brand-font);
  font-size: var(--brand-name-size);
  font-weight: 400;
  letter-spacing: var(--brand-name-spacing);
  line-height: 1.04;
  text-transform: uppercase;
}

.tagline {
  margin-top: 8px;
  color: var(--tagline-color);
  font-family: var(--brand-font);
  font-size: var(--tagline-size);
  font-style: italic;
  letter-spacing: var(--tagline-spacing);
}

.divider {
  width: 60px;
  height: 1px;
  margin: 24px auto;
  background: var(--divider-color);
}

.headline {
  margin-bottom: 10px;
  color: var(--headline-color);
  font-family: var(--brand-font);
  font-size: var(--headline-size);
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
}

.subheadline {
  margin-bottom: 28px;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.68;
  text-align: center;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.field-label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

input[type="email"] {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--field-border);
  border-radius: 14px;
  background: var(--field-bg);
  color: var(--page-text);
  font: inherit;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  -webkit-appearance: none;
}

input[type="email"]::placeholder { color: rgba(91,105,128,.48); }

input[type="email"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--field-focus);
}

input[type="email"].error {
  border-color: #d14343;
  box-shadow: 0 0 0 4px rgba(209,67,67,.12);
}

.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.consent-row input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--checkbox-accent);
  cursor: pointer;
}

.consent-text {
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.62;
}

.consent-text a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.field-error {
  display: none;
  margin-top: 8px;
  color: #d14343;
  font-size: .78rem;
}

.field-error.visible { display: block; }

.alert {
  display: none;
  padding: 11px 14px;
  border: 1px solid #f3b3b3;
  border-radius: 14px;
  background: #fff2f2;
  color: #8f1f1f;
  font-size: .83rem;
  line-height: 1.5;
}

.alert.error { display: block; }

.btn-submit {
  width: 100%;
  padding: 14px 16px;
  border: none;
  border-radius: var(--button-radius);
  background: var(--accent);
  color: #fff;
  font-family: var(--body-font);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: var(--button-spacing);
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .16s ease, opacity .16s ease, background .16s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  -webkit-appearance: none;
}

.btn-submit:hover:not(:disabled) {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.btn-submit:active:not(:disabled) { opacity: .9; }
.btn-submit:disabled { opacity: .55; cursor: not-allowed; }

.spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .6s linear infinite;
}

.btn-submit.loading .spinner { display: block; }
.btn-submit.loading .btn-label { opacity: .84; }

@keyframes spin { to { transform: rotate(360deg); } }

.success-state {
  display: none;
  text-align: center;
  animation: fadeUp .32s ease;
}

.success-state.visible { display: block; }
.form-state.hidden { display: none; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.success-icon {
  width: var(--success-icon-size);
  height: var(--success-icon-size);
  margin: 0 auto 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--success-ring);
  background: var(--success-bg);
}

.success-icon svg {
  width: var(--success-icon-mark-size);
  height: var(--success-icon-mark-size);
  stroke: var(--accent);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.success-title {
  margin-bottom: 10px;
  color: var(--headline-color);
  font-family: var(--brand-font);
  font-size: 1.4rem;
  font-weight: 400;
}

.success-copy {
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.66;
}

footer {
  display: var(--footer-display);
  margin-top: 18px;
  color: var(--footer-color);
  text-align: center;
  font-size: .75rem;
}

footer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

body[data-mode="embed"] footer {
  display: none;
}

@media (max-width: 520px) {
  :root {
    --card-body-padding: 30px 22px 24px;
    --brand-name-size: 1.75rem;
    --brand-name-spacing: .22em;
  }

  body {
    padding-left: 12px;
    padding-right: 12px;
  }

  body[data-mode="embed"] {
    padding: 0;
  }
}