/* TUYA Sculpt Studios coming-soon mock (Oct 20 2026). Colors read off the studio's own window signs in its Oct 20
   announcement photo (sampled with ffmpeg): crimson emblem ≈ #b1384e, rose lettering ≈ #ae5469. Darkened below for
   contrast. Playfair stands in for the signs' serif caps, Work Sans for body. ⚠️ Not their brand kit (none public):
   a starting point, theirs to change.
   Contrast (WCAG formula, computed Oct 20 2026): #2b1a20 on #f8f1ec 14.8:1 · #8f2c42 on #f8f1ec 7.2:1 ·
   #ffffff on #8f2c42 8.1:1 · #6b4a54 on #f8f1ec 6.9:1 · #6b4a54 on #fff 7.7:1 · #f8f1ec on #2b1a20 14.8:1 ·
   rose #ae5469 on #f8f1ec 4.4:1, so rose is used ONLY for large text (24px+ serif), where AA needs 3:1. */
@font-face { font-family: "Playfair"; src: url("/assets/fonts/playfair.woff2") format("woff2"); font-display: swap; font-weight: 400 900; }
@font-face { font-family: "Work Sans"; src: url("/assets/fonts/worksans.woff2") format("woff2"); font-display: swap; font-weight: 300 700; }

:root {
  --ground: #f8f1ec;
  --ink: #2b1a20;
  --muted: #6b4a54;
  --crimson: #8f2c42;
  --rose: #ae5469;
  --line: #e6d6d0;
  --serif: "Playfair", Georgia, "Times New Roman", serif;
  --sans: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body { background: var(--ground); color: var(--ink); font-family: var(--sans); }
main { padding-top: 0; }

.note { margin: 0; padding: 10px 16px; background: var(--ink); color: var(--ground); font-size: 13px; text-align: center; }

.hero { text-align: center; padding: 72px 18px 56px; border-bottom: 1px solid var(--line); }
.kicker { margin: 0 0 18px; color: var(--muted); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; }
.mark { margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(64px, 18vw, 128px); line-height: .95;
  letter-spacing: .06em; color: var(--rose); }
.mark span { display: block; margin-top: 10px; font-family: var(--sans); font-weight: 500; font-size: clamp(12px, 3.2vw, 16px);
  letter-spacing: .42em; text-transform: uppercase; color: var(--muted); }
.tag { margin: 28px 0 6px; font-family: var(--serif); font-size: clamp(20px, 5vw, 26px); color: var(--crimson);
  text-transform: uppercase; letter-spacing: .08em; }
.heat { margin: 0 0 30px; color: var(--muted); }

.btn { display: inline-block; padding: 14px 26px; border: 0; border-radius: 999px; background: var(--crimson); color: #fff;
  font: 600 16px/1 var(--sans); letter-spacing: .03em; text-decoration: none; cursor: pointer; }
.btn:focus-visible, input:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.pillars { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 40px 0 8px; }
.pillars p { margin: 0; padding: 8px 18px; border: 1px solid var(--rose); border-radius: 999px; color: var(--crimson);
  font-size: 14px; letter-spacing: .18em; text-transform: uppercase; }

.quote { text-align: center; padding: 40px 0; }
.quote p { margin: 0; font-size: 18px; color: var(--muted); }
.quote .es { font-family: var(--serif); font-size: clamp(32px, 8vw, 44px); color: var(--crimson); text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 8px; }

.list { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 28px 22px; }
.list h2 { margin: 0 0 6px; font-family: var(--serif); font-size: 28px; color: var(--ink); }
.list > p { margin: 0 0 18px; color: var(--muted); }
form { display: grid; gap: 14px; }
label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
input { font: 16px var(--sans); padding: 12px 14px; border: 1px solid #cbb6ae; border-radius: 10px; background: var(--ground); color: var(--ink); }
.done { margin: 4px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--ground); color: var(--ink); font-size: 14px; }

.find { text-align: center; padding: 44px 0 20px; }
.find p { margin: 0 0 6px; font-family: var(--serif); font-size: 24px; color: var(--rose); letter-spacing: .06em; text-transform: uppercase; }
.find a { color: var(--crimson); font-weight: 600; }

footer { text-align: center; padding: 24px 16px 40px; color: var(--muted); font-size: 13px; }
.opt { font-weight: 400; color: var(--muted); }
.consent { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 13px; color: var(--muted); }
.consent input { width: 20px; height: 20px; margin-top: 1px; padding: 0; accent-color: var(--crimson); flex: none; }
/* v3 (Oct 20 2026): the sign-up sits in the hero, so the card centres under the name and reads left-aligned. */
.hero .list { max-width: 440px; margin: 28px auto 0; text-align: left; display: grid; gap: 14px; }
.hero .list h2 { font-size: 24px; margin: 0; }
.hero { padding-bottom: 48px; }
.heat { margin-bottom: 0; }
.note a { color: inherit; font-weight: 600; text-underline-offset: 3px; margin-left: 4px; white-space: nowrap; }
/* Fold (Oct 20 2026, measured): at 375x812 the Join button ended at 807px and at 1280x800 at 804px, so on a real phone,
   where the browser bars take ~100px, the one action sat below the first screen. Tighter hero spacing brings it up. */
.hero { padding-top: 32px; }
.kicker { margin-bottom: 10px; }
.mark { font-size: clamp(56px, 15vw, 112px); }
.tag { margin-top: 16px; }
.hero .list { margin-top: 20px; padding: 20px 20px 22px; gap: 12px; }
@media (max-width: 480px) {
  .note .long { display: none; }   /* the full sentence is on /for-you/; the bar stays one line on a phone */
  .tag { font-size: 17px; letter-spacing: .04em; }
}
/* Rules pass (Oct 20 2026, ~/.claude/rules/web-build.md): card title→content 14px, sentence→button 16px, the phone tap
   box replaced (transparent + an :active dim), and the confirmation fades in instead of popping. */
.hero .list { gap: 14px; }
a, button, input, label { -webkit-tap-highlight-color: transparent; }
.btn:active { filter: brightness(.9); }
.done { animation: done-in 220ms ease-out; }
@keyframes done-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .done { animation: none; } }