/* wineautopilot.com. Night Chart, like the product: dark navy, teal for flow, amber for attention,
   Space Grotesk for text, JetBrains Mono for numbers, square corners and 1 px rules. Phones first.
   WINE-08: wide layout (most of the screen), text that scales with the screen (body at least 20 px on desktop),
   the narrated video on top at about half the window's height, fewer and wider columns. */
/* Fonts are self-hosted (SIL Open Font License) and preloaded, so text does not jump when they arrive. */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/space-grotesk-latin.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/jetbrains-mono-500-latin.woff2) format('woff2'); }
:root {
  --ground: #0B1622; --ground-2: #0F1D2C; --ground-3: #13263A;
  --rule: #1F3449; --rule-2: #2A4560;
  --text: #D7E2EC; --muted: #9DB2C6; --faint: #7F96AB;
  --teal: #48D1C0; --teal-dim: #2B7F75; --amber: #F2B24C; --amber-dim: #8A6527;
  --sans: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  /* sizes that grow with the screen: 17 px on a phone, 20 px at 1366, about 23 px at 1920, 26 px at 2560 */
  --fs: clamp(17px, 0.47vw + 13.6px, 26px);
  --fs-h1: clamp(38px, 4.4vw + 6px, 124px);
  --fs-h2: clamp(28px, 2.3vw + 6px, 66px);
  --fs-h3: clamp(20px, 1vw + 9px, 36px);
  --gutter: clamp(16px, 3vw, 72px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--ground); color: var(--text); font: 400 var(--fs)/1.55 var(--sans); overflow-x: hidden; }
a { color: var(--teal); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--teal); color: var(--ground); padding: 8px 12px; }
.skip:focus { left: 8px; z-index: 10; }

/* the wordmark reads "wineautopilot.com" */
.brand { font: 700 clamp(18px, 0.6vw + 12px, 30px) var(--sans); letter-spacing: .01em; color: var(--text); text-decoration: none; white-space: nowrap; }
.brand span { color: var(--teal); }

.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px var(--gutter); background: rgba(11,22,34,.95); border-bottom: 1px solid var(--rule); }
.top nav { display: flex; gap: clamp(16px, 2vw, 44px); align-items: center; }
.top nav a { color: var(--muted); text-decoration: none; font-size: var(--fs); }
.top nav a:hover { color: var(--text); }
.top nav a:not(.cta-link) { display: none; }
.top .cta-link { color: var(--teal); border: 1px solid var(--teal-dim); padding: .25em .7em; border-radius: 2px; white-space: nowrap; }
@media (min-width: 900px) { .top nav a:not(.cta-link) { display: inline; } }

/* wide content: most of the screen */
main { width: 100%; max-width: 2200px; margin: 0 auto; padding: 0 var(--gutter); }
section { padding: clamp(44px, 5vw, 120px) 0; border-bottom: 1px solid var(--rule); }
section:last-child { border-bottom: 0; }
h1 { font: 700 var(--fs-h1)/1.05 var(--sans); letter-spacing: -.02em; margin: .25em 0 .35em; max-width: 18ch; }
h2 { font: 700 var(--fs-h2)/1.1 var(--sans); letter-spacing: -.01em; color: var(--text); margin: 0 0 .7em; }
h3 { font: 600 var(--fs-h3)/1.25 var(--sans); margin: 0 0 .35em; }
p { margin: 0 0 .8em; }
.eyebrow { font: 500 var(--fs) var(--mono); letter-spacing: .04em; color: var(--teal); margin: 0; }
.lede { font-size: 1.3em; line-height: 1.45; color: var(--text); max-width: 40em; }
.big { font-size: 1.2em; line-height: 1.45; }
.note { color: var(--faint); }
.tag { font: 500 .8em var(--mono); letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--teal-dim); color: var(--teal); padding: .05em .45em; border-radius: 2px; }
.tag.amber { color: var(--amber); border-color: var(--amber-dim); }
.amber { color: var(--amber); }

.btn { display: inline-block; font: 600 1.05em var(--sans); color: var(--text); text-decoration: none; border: 1px solid var(--rule-2); background: none; padding: .6em 1.1em; border-radius: 2px; cursor: pointer; margin: 0 .5em .5em 0; }
.btn:hover { border-color: var(--teal); color: var(--teal); }
.btn.primary { border-color: var(--teal); color: var(--ground); background: var(--teal); }
.btn.primary:hover { background: #6FDDD0; color: var(--ground); }
.actions { margin-top: 1.1em; }

/* hero: the video first, about half the window high, as wide as that height allows, centered; words under it */
.hero { padding-top: clamp(20px, 3vh, 48px); text-align: center; }
.hero-video { margin: 0 auto; }
.player { position: relative; margin: 0 auto; width: 100%; aspect-ratio: 16 / 10; background: var(--ground-2); border: 1px solid var(--rule-2); }
@media (min-width: 700px) { .player { height: 50vh; width: auto; max-width: 100%; } }
.player video { display: block; width: 100%; height: 100%; background: var(--ground-2); }
.bigplay { position: absolute; inset: 0; margin: auto; width: clamp(84px, 9vh, 150px); height: clamp(84px, 9vh, 150px); border-radius: 50%; border: 3px solid var(--teal); background: rgba(11,22,34,.72); color: var(--teal); cursor: pointer; display: grid; place-items: center; padding: 0; }
.bigplay svg { width: 44%; height: 44%; margin-left: 8%; }
.bigplay:hover { background: var(--teal); color: var(--ground); }
.bigplay .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hero-video figcaption { color: var(--muted); margin-top: .6em; }
.hero-copy { display: flex; flex-direction: column; align-items: center; }
.hero-copy h1 { margin-left: auto; margin-right: auto; }
.hero-copy .lede { margin-left: auto; margin-right: auto; }

/* steps: two wide columns */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.steps li { padding: 1.1em 0; border-top: 1px solid var(--rule); }
.steps li:first-child { border-top: 0; }
.steps .n { font: 500 1em var(--mono); color: var(--teal); display: block; margin-bottom: .3em; }
.steps p { color: var(--muted); margin: 0; max-width: 42em; }
@media (min-width: 1000px) { .steps { grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 5vw, 120px); } .steps li:nth-child(2) { border-top: 0; } }

.split { display: grid; gap: 1.4em; }
@media (min-width: 1100px) { .split { grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 120px); } }
.trust { list-style: none; padding: 0; margin: 0; }
.trust li { padding: .7em 0 .7em .9em; border-top: 1px solid var(--rule); border-left: 3px solid var(--teal); color: var(--muted); }
.trust li + li { margin-top: .6em; }
.trust b { color: var(--text); font-weight: 600; }

/* scoreboard figures */
.grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.fig { padding: .8em .6em .8em 0; border-right: 1px solid var(--rule); }
.fig:nth-child(2n) { border-right: 0; padding-left: .6em; }
.fig:nth-child(n+3) { border-top: 1px solid var(--rule); }
.fig .v { display: block; font: 500 clamp(28px, 2.6vw + 8px, 76px)/1.15 var(--mono); color: var(--teal); overflow-wrap: anywhere; }
.fig .v.amber { color: var(--amber); }
.fig .l { display: block; color: var(--muted); }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(4, 1fr); } .fig, .fig:nth-child(2n) { border-right: 1px solid var(--rule); padding-left: 1em; border-top: 0; } .fig:first-child { padding-left: 0; } .fig:last-child { border-right: 0; } }
.list { padding-left: 1.1em; color: var(--muted); margin: 1em 0 0; max-width: 60em; }
.list li { margin-bottom: .45em; }

.three { display: grid; gap: 1.4em; }
.three > div { border-top: 1px solid var(--teal-dim); padding-top: .8em; }
.three p { color: var(--muted); margin: 0; }
@media (min-width: 1300px) { .three { grid-template-columns: repeat(3, 1fr); gap: clamp(40px, 4vw, 100px); } }

/* pricing */
.price { display: grid; gap: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-bottom: 1em; }
.amount { padding: .9em 0; }
.amount + .amount { border-top: 1px solid var(--rule); }
.amount .v { font: 500 clamp(40px, 3vw + 12px, 96px)/1.1 var(--mono); color: var(--teal); display: block; }
.amount .per { color: var(--muted); }
@media (min-width: 900px) { .price.three-up { grid-template-columns: repeat(3, 1fr); } .price.three-up .amount + .amount { border-top: 0; border-left: 1px solid var(--rule); padding-left: 1.2em; } }
.included { border-left: 3px solid var(--amber); padding-left: .7em; color: var(--text); }
.start-grid { display: grid; gap: 1.6em; }
@media (min-width: 1100px) { .start-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 120px); align-items: start; } }
.contact { border-top: 1px solid var(--teal-dim); padding-top: .8em; }
.contact .phone { font: 500 1.3em var(--mono); color: var(--teal); text-decoration: none; border-bottom: 1px solid var(--teal-dim); }
.contact p { color: var(--muted); }

/* questions */
details { border-top: 1px solid var(--rule); }
details:last-of-type { border-bottom: 1px solid var(--rule); }
summary { cursor: pointer; padding: .8em 2em .8em 0; font-weight: 600; font-size: 1.1em; list-style: none; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; position: absolute; right: .2em; top: .7em; font: 500 1.1em var(--mono); color: var(--teal); }
details[open] summary::after { content: '-'; }
details p { color: var(--muted); max-width: 50em; }

/* form */
.form { display: grid; gap: .35em; max-width: 32em; margin-top: 1em; }
.form label { color: var(--muted); margin-top: .6em; }
.form input { font: 1em var(--sans); color: var(--text); background: var(--ground-2); border: 1px solid var(--rule-2); border-radius: 2px; padding: .55em .7em; width: 100%; }
.form input:focus { border-color: var(--teal); }
.form .btn { margin-top: 1em; justify-self: start; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.privacy { color: var(--faint); margin-top: .6em; }

.thanks { padding-top: 64px; padding-bottom: 64px; }

.foot { display: flex; flex-wrap: wrap; gap: .6em 1.4em; justify-content: space-between; align-items: center; padding: 1.2em var(--gutter) 1.8em; border-top: 1px solid var(--rule); color: var(--faint); max-width: 2200px; margin: 0 auto; }
.bigplay[hidden] { display: none; }
.hero-copy { margin-top: clamp(20px, 3vh, 56px); }