:root {
  color-scheme: light;
  --ink: #1d302d;
  --muted: #61716d;
  --paper: #f8f7f2;
  --card: #fffefd;
  --line: #dce1db;
  --lime: #d5ee53;
  --lime-hover: #c5df3e;
  --coral: #f26f5d;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.page-shell { width: min(100% - 40px, 900px); margin: 0 auto; padding: 36px 0 64px; }

.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font-size: 1.03rem; font-weight: 650; letter-spacing: -0.03em; text-decoration: none; }
.brand b { color: var(--coral); }
.brand-mark { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 10px 10px 10px 2px; background: var(--lime); font-size: 1.2rem; transform: rotate(-4deg); }

.hero { padding: clamp(74px, 13vw, 130px) 0 32px; }
.eyebrow { margin: 0 0 14px; color: var(--coral); font-size: .72rem; font-weight: 800; letter-spacing: .14em; }
h1 { max-width: 670px; margin: 0; font-size: clamp(3.1rem, 9vw, 6.4rem); font-weight: 750; letter-spacing: -.075em; line-height: .9; }
h1 em { color: var(--coral); font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -.08em; }
.intro { max-width: 510px; margin: 28px 0 0; color: var(--muted); font-size: clamp(1rem, 2vw, 1.18rem); line-height: 1.6; }

.download-card { margin-top: 43px; padding: 24px; border: 1px solid var(--line); border-radius: 19px; background: var(--card); box-shadow: 0 14px 50px rgba(34, 51, 45, .06); }
label { display: block; margin-bottom: 10px; font-size: .82rem; font-weight: 750; }
.input-row { display: flex; gap: 10px; }
input { min-width: 0; flex: 1; padding: 14px 15px; border: 1px solid #cbd3cb; border-radius: 10px; outline: none; color: var(--ink); background: #fff; font: inherit; }
input::placeholder { color: #98a49e; }
input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(213, 238, 83, .42); }
button { flex: 0 0 auto; cursor: pointer; padding: 0 21px; border: 0; border-radius: 10px; background: var(--lime); color: var(--ink); font: inherit; font-size: .94rem; font-weight: 800; transition: background .15s ease, transform .15s ease; }
button:hover { background: var(--lime-hover); transform: translateY(-1px); }
button:disabled { cursor: wait; opacity: .66; transform: none; }
.status { min-height: 1.25em; margin: 11px 0 0; color: var(--muted); font-size: .79rem; }
.status.error { color: #b94031; }.status.success { color: #347444; }

.how-it-works { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 53px 0 0; }
.how-it-works div { border-top: 1px solid var(--line); padding-top: 14px; }.how-it-works span { color: var(--coral); font-size: .72rem; font-weight: 800; }.how-it-works p { margin: 7px 0 0; color: var(--muted); font-size: .86rem; line-height: 1.45; }

.notice { display: flex; gap: 12px; align-items: flex-start; padding: 15px 17px; border-radius: 12px; background: #edf0ea; color: #53635d; font-size: .82rem; line-height: 1.45; }.notice span { display: grid; flex: none; width: 18px; height: 18px; place-items: center; border: 1px solid #83918b; border-radius: 50%; font-family: Georgia, serif; font-size: .75rem; }.notice p { margin: 0; }

footer { display: flex; justify-content: space-between; width: min(100% - 40px, 900px); margin: 0 auto; padding: 0 0 34px; color: #78857f; font-size: .76rem; }footer a { color: inherit; }footer a:hover { color: var(--ink); }

@media (max-width: 600px) { .page-shell { width: min(100% - 28px, 900px); padding-top: 23px; }.hero { padding-top: 65px; }.download-card { margin-top: 35px; padding: 17px; }.input-row { flex-direction: column; }button { min-height: 47px; }.how-it-works { grid-template-columns: 1fr; gap: 17px; margin-top: 37px; }footer { width: min(100% - 28px, 900px); gap: 14px; align-items: center; } }
