/*
 * Brand site styles. Colors come from tokens.css (packages/ui), the same tokens
 * the apps use, so the site follows the OS theme exactly like the apps do.
 * Shape rule: buttons and small controls 8px (radius-md), panels and images 12px (radius-lg).
 */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: rgb(var(--lf-canvas));
  color: rgb(var(--lf-fg));
  font: 16px/1.6 var(--lf-font-sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
h1, h2, h3 { color: rgb(var(--lf-fg-strong)); text-wrap: balance; }
p { text-wrap: pretty; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 2px solid rgb(var(--lf-accent-fg)); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 720px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 20; padding: 8px 14px; border-radius: var(--lf-radius-md); background: rgb(var(--lf-surface)); color: rgb(var(--lf-fg-strong)); }
.skip:focus { top: 12px; }

/* Nav */
nav { position: sticky; top: 0; z-index: 10; background: rgb(var(--lf-canvas) / 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgb(var(--lf-line)); }
nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; text-decoration: none; color: rgb(var(--lf-fg-strong)); }
nav .links { display: flex; gap: 24px; align-items: center; font-size: 15px; }
nav .links a { text-decoration: none; color: rgb(var(--lf-fg-muted)); transition: color var(--lf-duration); }
nav .links a:hover { color: rgb(var(--lf-fg-strong)); }
@media (max-width: 640px) { nav .links a:not(.btn) { display: none; } }

/* Buttons: one green primary per screen, as in the apps */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: var(--lf-radius-md); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; transition: background-color var(--lf-duration), border-color var(--lf-duration), transform var(--lf-duration); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: rgb(var(--lf-primary)); color: rgb(var(--lf-primary-contrast)); box-shadow: 0 1px 2px rgb(var(--lf-primary) / 0.3); }
.btn-primary:hover { background: rgb(var(--lf-primary-hover)); }
.btn-ghost { border: 1px solid rgb(var(--lf-line-strong)); background: rgb(var(--lf-surface)); color: rgb(var(--lf-fg-strong)); }
.btn-ghost:hover { background: rgb(var(--lf-surface-raised)); }
nav .links a.btn-ghost { color: rgb(var(--lf-fg-strong)); }
.btn-accent { background: rgb(var(--lf-accent) / 0.12); color: rgb(var(--lf-accent-fg)); border: 1px solid rgb(var(--lf-accent) / 0.4); }
.btn-accent:hover { background: rgb(var(--lf-accent) / 0.2); }
.btn-sm { padding: 7px 14px; font-size: 14px; }

/* Hero: copy left, the real app on the right */
.hero { padding: 72px 0 56px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 18px; }
.hero .lead { font-size: 19px; line-height: 1.55; color: rgb(var(--lf-fg-muted)); max-width: 34ch; margin: 0 0 28px; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; }
.shot { margin: 0; border-radius: var(--lf-radius-lg); overflow: hidden; border: 1px solid rgb(var(--lf-line-strong)); box-shadow: 0 24px 48px -20px rgb(var(--lf-shadow-color) / 0.35), 0 2px 6px rgb(var(--lf-shadow-color) / 0.08); }
@media (max-width: 880px) {
  .hero { padding-top: 48px; }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* Promise: four plain statements in a row, no cards */
.promise { padding: 0 0 72px; }
.promise dl { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; border-top: 1px solid rgb(var(--lf-line)); padding-top: 28px; }
.promise dt { font-weight: 700; color: rgb(var(--lf-fg-strong)); margin-bottom: 4px; }
.promise dd { margin: 0; color: rgb(var(--lf-fg-muted)); font-size: 15px; }
@media (max-width: 880px) { .promise dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .promise dl { grid-template-columns: 1fr; gap: 20px; } }

/* Sections */
section { padding: 72px 0; }
h2 { font-size: clamp(26px, 3.2vw, 34px); line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 8px; }
.sub { color: rgb(var(--lf-fg-muted)); margin: 0 0 32px; max-width: 60ch; }

/* Apps: the shipping app gets a full row in its accent, the rest a compact grid */
#apps { background: rgb(var(--lf-surface-sunken)); border-block: 1px solid rgb(var(--lf-line)); }
.feature { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; padding: 24px; border-radius: var(--lf-radius-lg); background: rgb(var(--lf-surface)); border: 1px solid rgb(var(--lf-accent) / 0.35); box-shadow: inset 4px 0 0 rgb(var(--lf-accent)); }
.feature + .feature { margin-top: 12px; }
.feature h3 { margin: 0 0 2px; font-size: 20px; }
.feature p { margin: 0; color: rgb(var(--lf-fg-muted)); }
@media (max-width: 640px) { .feature { grid-template-columns: auto 1fr; } .feature .btn { grid-column: 1 / -1; justify-self: start; } }
.soon-title { margin: 40px 0 16px; font-size: 15px; font-weight: 600; color: rgb(var(--lf-fg-muted)); }
.upcoming { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; }
.upcoming li { display: flex; gap: 14px; align-items: flex-start; }
.upcoming strong { display: block; color: rgb(var(--lf-fg-strong)); }
.upcoming .tagline { display: block; font-size: 15px; color: rgb(var(--lf-fg-muted)); }
@media (max-width: 880px) { .upcoming { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .upcoming { grid-template-columns: 1fr; } }
.mark { flex: none; width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: rgb(var(--lf-accent-contrast)); background: linear-gradient(135deg, rgb(var(--lf-accent-500)), rgb(var(--lf-accent-700))); }
.mark-lg { width: 56px; height: 56px; border-radius: 14px; font-size: 21px; }

/* Bundle: Pro and bundles are the only violet on the site */
.bundle h2 { color: rgb(var(--lf-pro-fg)); }
.bundle p { color: rgb(var(--lf-fg-muted)); font-size: 17px; margin: 0; max-width: 60ch; }

/* Legal pages */
.legal { padding-top: 48px; padding-bottom: 64px; }
.legal h1 { font-size: 34px; margin-bottom: 4px; }
.legal h2 { font-size: 20px; margin: 32px 0 8px; }
.legal .meta { color: rgb(var(--lf-fg-subtle)); margin-top: 0; }
.legal p, .legal li { color: rgb(var(--lf-fg)); }
.legal a { color: rgb(var(--lf-accent-fg)); }

footer { border-top: 1px solid rgb(var(--lf-line)); padding: 28px 0; color: rgb(var(--lf-fg-subtle)); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }
footer a { color: rgb(var(--lf-fg-muted)); }

/* Entry: the hero settles in once. Nothing loops. */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy, .shot { animation: rise 600ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  .shot { animation-delay: 120ms; }
  @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } }