@font-face { font-family: 'Caveat'; src: url('/fonts/Caveat_700Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/fonts/Fraunces_400Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/fonts/Fraunces_600SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }

:root { --bg:#fcf5e8; --text:#3b2a1e; --muted:#7f6e5c; --accent:#b67a22; --name:#9a6418; --button:#c6882c; --card:#f6e6c8; --line:#dcc6a4; --field:#fffaf1; color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#1c1712; --text:#efe5d6; --muted:#ab9b85; --accent:#e8b25a; --name:#e8b25a; --button:#c6882c; --card:#2a2219; --line:#4d4032; --field:#231d16; }
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:'Fraunces',Georgia,serif; }
a { color:var(--accent); }
.nowrap { white-space:nowrap; }
.wrap { max-width:1080px; margin:0 auto; padding:28px 22px 24px; }

/* Home */
.hero { display:grid; gap:16px; grid-template-areas:"img" "head" "points" "card" "signup"; }
.img { grid-area:img; text-align:center; } .head { grid-area:head; text-align:center; } .points { grid-area:points; } .card { grid-area:card; } .signup { grid-area:signup; }
.img img { width:150px; height:auto; }
.card { background:var(--card); border-radius:20px; padding:16px 18px; margin-top:6px; text-align:left; }
.card .t { font-family:'Caveat',cursive; font-size:26px; font-weight:700; line-height:1.15; margin-bottom:6px; }
.card .t b { color:var(--accent); }
.card p { margin:0; font-size:16px; line-height:1.5; }
.card .n { color:var(--name); font-weight:600; }
h1 { font-family:'Caveat',cursive; font-weight:700; font-size:46px; line-height:1; margin:0 0 6px; }
.lead { font-size:19px; line-height:1.45; margin:0 0 14px; }
.points { position:relative; padding-left:52px; }
.points ul { list-style:none; margin:0; padding:0; }
.cord { position:absolute; left:0; top:0; bottom:0; width:40px; display:flex; justify-content:center; }
.cord picture { display:block; height:100%; }
.cord img { height:100%; width:auto; display:block; }
.points li { font-size:16px; line-height:1.45; padding:7px 0; }
.points li:first-child { padding-top:0; } .points li:last-child { padding-bottom:0; }
.soon { color:var(--muted); font-size:14px; margin:4px 0 10px; font-family:system-ui,sans-serif; }
form { max-width:440px; }
input[type=email] { width:100%; border:1.5px solid var(--line); border-radius:16px; padding:14px; font-size:16px; background:var(--field); color:var(--text); font-family:system-ui,sans-serif; }
.consent { display:flex; font-size:13px; line-height:1.45; color:var(--muted); margin:12px 0 14px; font-family:system-ui,sans-serif; cursor:pointer;
  border:1.5px solid var(--line); border-radius:16px; background:var(--field); align-items:stretch; overflow:hidden; }
.consent input { appearance:none; -webkit-appearance:none; margin:0; flex:none; width:48px; border:0; border-right:1.5px solid var(--line); background:transparent; display:grid; place-content:center; cursor:pointer; }
.consent input::after { content:''; width:7px; height:13px; border:solid var(--line); border-width:0 2.5px 2.5px 0; transform:rotate(45deg) translate(-1px,-1px); }
.consent input:checked { background:var(--button); border-right-color:var(--button); }
.consent input:checked::after { border-color:#fff; }
.consent:has(input:checked) { border-color:var(--button); }
.consent input:focus-visible { outline:2px solid var(--accent); outline-offset:-4px; }
.consent span { padding:12px 14px; }
button { width:100%; border:0; border-radius:28px; background:var(--button); color:#fff; font-weight:700; padding:15px; font-size:17px; font-family:system-ui,sans-serif; cursor:pointer; }
button:disabled { opacity:.6; cursor:wait; }
.form-msg { min-height:1.2em; margin:10px 0 0; font-size:14px; font-family:system-ui,sans-serif; color:var(--text); text-align:center; }
.thanks { font-size:18px; line-height:1.5; margin:8px 0; }
.trap { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }

/* Text pages */
.page { max-width:700px; margin:0 auto; padding:28px 22px 24px; line-height:1.6; font-size:16px; }
.page .mini { display:flex; align-items:center; justify-content:center; gap:12px; text-decoration:none; color:var(--text); margin-bottom:22px; }
.page .mini { --mini:56px; }
.page .mini img { width:var(--mini); height:auto; }
@media (max-width:420px) { .page .mini { --mini:46px; } }
.page .mini span { font-family:'Caveat',cursive; font-weight:700; font-size:var(--mini); line-height:1; white-space:nowrap; }
.page h1 { font-size:44px; margin:6px 0 4px; }
.page h2 { font-size:20px; margin:28px 0 6px; }
.page .updated { color:var(--muted); font-size:14px; font-family:system-ui,sans-serif; margin:0 0 18px; }
.page ul { padding-left:22px; }
.page li { margin:4px 0; }
.plain { padding-top:60px; text-align:center; }

/* Footer */
footer { margin-top:30px; padding-top:14px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); text-align:center; font-family:system-ui,sans-serif; line-height:1.7; }
footer a { color:var(--muted); margin:0 6px; }
footer .company { margin-top:8px; font-size:12px; }
footer .company a { margin:0; }

@media (min-width:700px) {
  .wrap { padding:44px 40px 30px; max-width:640px; }
  h1 { font-size:60px; }
  .img img { width:200px; }
  form { margin:0 auto; }
  .soon { text-align:center; }
}
@media (min-width:1000px) {
  .wrap { max-width:1080px; padding:72px 48px 30px; }
  .hero { grid-template-columns:1.05fr 0.95fr; column-gap:64px; row-gap:14px;
    grid-template-areas:"head img" "points img" "signup card"; align-items:start; }
  .head { text-align:center; align-self:end; justify-self:start; width:fit-content; }
  .img { align-self:end; }
  .img img { width:270px; }
  h1 { font-size:68px; }
  form { margin:0; } .soon { text-align:left; } .form-msg { text-align:left; }
}
@media (max-width:699px) { .cord img { width:27px; height:100%; } .points { padding-left:44px; } .cord { width:34px; } }
