/* The marketing page (design-system.md § R12): every color is a tokens.css variable, written at
   synth from src/theme/tokens.ts; drift check (a) refuses a hex here. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
input, textarea, button { font-family: inherit; }
.sprite { display: none; }
.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon-20 { width: 20px; height: 20px; }
:target { scroll-margin-top: 64px; }

/* 1120 is the content measure, as design draws it; the gutters sit outside it. */
.measure { max-width: calc(1120px + 48px); margin: 0 auto; padding-inline: 24px; }

.eyebrow {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
h2 {
  margin-top: 12px;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
  text-wrap: balance;
}
h3 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }

.button {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  padding: 13px 22px;
  border: 0;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}
.button:hover { background: var(--accent-hover); color: var(--on-accent); text-decoration: none; }
.button-small { padding: 8px 16px; font-size: 13px; line-height: 1.35; }
.button-outline { color: var(--ink); background: var(--card); border: 1px solid var(--border-strong); padding: 12px 17px; font-weight: 500; }
.button-outline:hover { color: var(--ink); background: var(--accent-tint); border-color: var(--accent); }

.header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.header-row { display: flex; align-items: center; gap: 24px; padding-block: 12px; }
.brand { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); }
.brand:hover { text-decoration: none; color: var(--ink); }
.wordmark { font-size: 18px; font-weight: 700; letter-spacing: -.03em; line-height: 24px; position: relative; top: 1px; color: var(--ink); }
.vino { color: var(--accent); }
.nav { display: flex; align-items: center; gap: 22px; margin-left: auto; font-size: 14px; font-weight: 500; }
.nav-anchor { color: var(--ink); }
.nav-anchor:hover { color: var(--ink); }
@media (max-width: 619.98px) { .nav-anchor { display: none; } }

.hero { padding-top: 88px; }
.hero-text { max-width: 760px; }
h1 {
  margin-top: 16px;
  font-size: clamp(38px, 5.4vw, 64px);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.04;
  text-wrap: balance;
}
.lede { margin-top: 22px; max-width: 600px; font-size: 19px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }

/* The device stage: design's scale formula in container units, so nothing waits on a script.
   The laptop is 82% of the stage; the phone 26%, never under 0.42 of its 390 frame. */
.stage { position: relative; margin-top: 64px; container-type: inline-size; }
.stage::before {
  content: "";
  display: block;
  height: max(calc(82cqw * 781 / 1200), calc(max(163.8px, 26cqw) * 800 / 390));
}
.laptop {
  position: absolute;
  left: 0;
  top: 0;
  width: 82cqw;
  border: 1px solid var(--border-strong);
  border-radius: calc(82cqw * 12 / 1200);
  background: var(--card);
  box-shadow: var(--shadow-device);
  overflow: hidden;
}
.browser-bar, .laptop img, .phone img { display: block; width: 100%; height: auto; }
.bar-ground { fill: var(--raised); }
.bar-dot { fill: var(--border-strong); }
.bar-pill { fill: var(--card); stroke: var(--border); stroke-width: 1; }
.bar-rule { fill: var(--border); }
.bar-url { fill: var(--ink-3); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; }
.phone {
  --pw: max(163.8px, 26cqw);
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--pw);
  height: calc(var(--pw) * 800 / 390);
  border: calc(var(--pw) * 10 / 390) solid var(--ink);
  border-radius: calc(var(--pw) * 44 / 390);
  background: var(--paper);
  box-shadow: var(--shadow-phone);
  overflow: hidden;
}

.section { padding-top: 120px; }
.head-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px; align-items: end; }
.narrow-head { max-width: 640px; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 44px; }
.step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.step-top { display: flex; align-items: center; justify-content: space-between; }
.tile { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--accent-tint); color: var(--accent); }
.step-n { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; letter-spacing: .08em; color: var(--ink-3); }
.step h3 { font-size: 18px; }
.step p { font-size: 14px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  column-gap: 48px;
  margin-top: 40px;
  border-top: 1px solid var(--border-strong);
}
.feature { padding: 26px 0; border-bottom: 1px solid var(--border); }
.feature h3 { display: flex; align-items: center; gap: 10px; }
.feature .icon { color: var(--accent); }
.feature p, .team p { margin-top: 10px; font-size: 14px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }

.team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px 48px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--border-strong);
}
.team p { margin-top: 8px; }

.contact { padding-top: 120px; padding-bottom: 96px; }
.contact-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.contact-panel { display: flex; flex-direction: column; gap: 14px; padding: 40px; background: var(--accent); color: var(--on-accent); }
.contact-panel h2 { margin-top: 0; font-size: clamp(26px, 3vw, 36px); }
.contact-copy { font-size: 15px; line-height: 1.55; color: var(--claret-ink); text-wrap: pretty; }
.eyebrow-claret { color: var(--claret-ink-2); }
.contact-mail { margin-top: auto; font-size: 14px; color: var(--claret-ink); }
.contact-mail a { color: var(--link-on-claret); font-weight: 600; }
.contact-mail a:hover { color: var(--link-on-claret); }
.contact-mail a:focus-visible { outline-color: var(--on-accent); }

.contact-form { padding: 40px; }
form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.optional { font-weight: 400; color: var(--ink-3); }
.field input, .field textarea {
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  background: var(--card);
}
.field input { height: 40px; }
.field textarea { padding-block: 10px; line-height: 1.45; resize: vertical; }
.field textarea::placeholder { color: var(--ink-3); }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.send-failed { font-size: 14px; line-height: 1.5; color: var(--crit); }
.button-send { align-self: flex-start; margin-top: 6px; padding: 12px 20px; font-size: 14px; }
.button-send[aria-busy="true"] { opacity: .7; cursor: progress; }

.sent { display: flex; flex-direction: column; justify-content: center; gap: 10px; height: 100%; }
.sent[hidden] { display: none; }
form[hidden] { display: none; }
.sent-tile { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--good-tint); color: var(--good); }
.sent-title { font-size: 18px; font-weight: 600; letter-spacing: -.01em; outline: none; }
.sent-body { font-size: 14px; line-height: 1.5; color: var(--ink-2); }

.footer { border-top: 1px solid var(--border); }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-block: 28px; font-size: 13px; color: var(--ink-2); }

/* The not-found page: the app's not-found card (src/components/layout/NotFoundPage.tsx), borrowed until design draws the site's own. */
.page-not-found { display: flex; flex-direction: column; min-height: 100dvh; }
.page-not-found .footer-row { justify-content: center; }
.not-found { flex: 1; display: grid; place-items: center; padding: 24px; }
.not-found-card {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 36px;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.not-found-glyph { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 14px; border-radius: 14px; background: var(--accent-tint); color: var(--accent); }
.not-found-icon { width: 24px; height: 24px; }
.not-found-card h1 { margin-bottom: 5px; font-size: 15px; font-weight: 700; }
.not-found-card p { max-width: 42ch; margin-bottom: 16px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.not-found-card a { font-size: 14px; font-weight: 600; }