/* reset.waysidefoundry.com (10 Nov 2026), built the way the other Wayside app sites are. reset's brand
   moments are always on black, so the site is too, with the day ring's four colours: breakfast dawn
   steel, lunch noon ice, snack afternoon sand, dinner evening amber. Colour says when, not what. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('assets/inter-latin-wght.woff2') format('woff2'); }

:root {
  color-scheme: dark;
  --bg: #000000; --bg-2: #05090C; --card: #0E1418; --card-2: #172027;
  /* the day ring: breakfast dawn steel, lunch noon ice, snack afternoon sand, dinner evening amber */
  --b: #7FB6CF; --l: #BFE3DF; --s: #E2C79A; --d: #E39A58;
  --line: rgba(255, 255, 255, 0.08); --line-2: rgba(255, 255, 255, 0.15);
  --ink: #F2F5F6; --ink-2: rgba(242, 245, 246, 0.74); --ink-3: rgba(242, 245, 246, 0.52);
  --ember: #E39A58; --ember-ink: #E2C79A; --ember-deep: #B8692C;
  --dusk-1: #0E2430; --dusk-2: #0A1A22; --dusk-3: #3D7C97; --glow: #E39A58;
  --pine: #7FB6CF; --pine-bg: rgba(127, 182, 207, 0.13);
  --violet: #BFE3DF; --violet-bg: rgba(191, 227, 223, 0.12);
  --r: 22px; --max: 1240px;
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -0.025em; }
p { margin: 0; }
.wrap { max-width: var(--max); margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 50; background: var(--ember); color: #000000; padding: 8px 14px; border-radius: 10px; }
:focus-visible { outline: 2px solid var(--ember-ink); outline-offset: 3px; border-radius: 8px; }

/* Header */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(0, 0, 0, 0.78); backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px); border-bottom: 1px solid var(--line); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 21; background: var(--bg); }
.top .wrap { display: flex; align-items: center; gap: 18px; min-height: 68px; flex-wrap: wrap; padding-block: 8px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; font-weight: 800; font-size: 21px; letter-spacing: -0.03em; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.nav { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; align-items: center; }
.nav a { text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: 15px; padding: 8px 14px; border-radius: 999px; }
.nav a:hover { color: var(--ink); background: var(--card); }
.nav a[aria-current="page"] { color: var(--ink); background: var(--card-2); }
/* Sign in (5 Nov 2026, Alex: the landing page is the front door, as Advanced Golf Address does). */
.nav a.signin { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.soon { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 7px 13px; white-space: nowrap; }
.soon::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 4px var(--violet-bg); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; font: 700 16px/1 var(--sans); text-decoration: none; border: 0; cursor: pointer; color: var(--ink); background: var(--card-2); box-shadow: 0 0 0 1px var(--line-2) inset; transition: transform .2s ease, background .2s ease; }
.btn:hover { transform: translateY(-1px); background: #1E2930; }
.btn.ember { color: #000; background: linear-gradient(100deg, var(--b) 0%, var(--l) 36%, var(--s) 68%, var(--d) 100%); box-shadow: 0 10px 30px -10px rgba(227, 154, 88, .65), 0 1px 0 rgba(255,255,255,.25) inset; text-shadow: none; }
.btn.ember:hover { background: linear-gradient(100deg, var(--b) 0%, var(--l) 36%, var(--s) 68%, var(--d) 100%); }
.btn svg { width: 18px; height: 18px; }

/* Tags */
.tag { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.tag.free, .tag.all { color: var(--pine); background: var(--pine-bg); }
.tag.pro { color: var(--ember-ink); background: rgba(227, 154, 88, .13); }
.tag.one { color: var(--ink); background: var(--card-2); }
.tag.coming { color: var(--violet); background: var(--violet-bg); }

/* The phone */
.phone { position: relative; width: 340px; max-width: 100%; aspect-ratio: 390 / 844; border-radius: 54px; padding: 11px; background: linear-gradient(160deg, #26323A, #020405 40%, #141B20); box-shadow: 0 0 0 1px rgba(255,255,255,.09) inset, 0 50px 90px -30px rgba(0,0,0,.85), 0 0 120px -20px rgba(122, 92, 190, .35); flex: none; }
.phone .screen { position: relative; width: 100%; height: 100%; border-radius: 44px; overflow: hidden; background: #05090C; }
/* A status bar above the app's own screen, so the screen is never under the camera. */
.phone .screen::before { content: ""; position: absolute; inset: 0 0 auto; height: 34px; background: #05090C; z-index: 2; }
.phone .screen img { position: absolute; inset: 34px 0 0; width: 100%; height: calc(100% - 34px); object-fit: cover; object-position: top; transition: opacity .45s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.phone .screen img.out { opacity: 0; transform: scale(1.015); }
.phone .notch { position: absolute; top: 18px; left: 50%; width: 88px; height: 24px; margin-left: -44px; border-radius: 20px; background: #000; z-index: 3; }

/* A screen drawn in HTML (where no real screen shows the feature) */
.drawn { position: absolute; inset: 34px 0 0; padding: 40px 18px 20px; display: flex; flex-direction: column; gap: 12px; font-size: 14px; background: linear-gradient(180deg, #0A1418, #05090C 50%); transition: opacity .45s ease; }
.drawn.out { opacity: 0; }
.drawn h4 { margin: 0 0 4px; font-size: 26px; letter-spacing: -0.03em; font-weight: 800; }
.drawn p { color: var(--ink-2); font-size: 13.5px; }
.drawn ul { list-style: none; margin: 0; padding: 0; border-radius: 18px; background: var(--card); box-shadow: 0 0 0 1px var(--line) inset; }
.drawn li { display: flex; align-items: center; gap: 12px; padding: 14px; border-top: 1px solid var(--line); }
.drawn li:first-child { border-top: 0; }
.drawn li b { display: block; font-size: 14.5px; }
.drawn li small { color: var(--ink-3); font-size: 12px; }
.drawn li .tag { margin-left: auto; font-size: 11px; padding: 4px 9px; }
.drawn .ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: rgba(227, 154, 88, .14); color: var(--ember); flex: none; }
.drawn .ico svg { width: 19px; height: 19px; }

/* The launch list (7 Nov 2026, Alex: "make it something people see and want to sign up for ... a big
   deal", no giveaway, no countdown). It sits right under the hero, in the header on every page and at
   the end. What pulls people in, without inventing anything: a specific promise (first to know, first
   to try, their own park first), a one-tap choice before the email so the place in line feels theirs,
   a real watch alert to show what they are waiting for, and their actual place in line afterwards.
   The count of people in line shows only once it is real and worth showing (25 or more). */
.nav a.join { color: #000; background: linear-gradient(100deg, var(--b) 0%, var(--l) 36%, var(--s) 68%, var(--d) 100%); box-shadow: 0 6px 18px -8px rgba(227, 154, 88, .7); }
.nav a.join:hover { filter: brightness(1.06); color: #000; }
.launch { position: relative; padding-block: 24px 96px; scroll-margin-top: 80px; }
.launch-card { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: 56px; padding: 64px; border-radius: 34px;
  background: radial-gradient(60% 70% at 100% 0%, rgba(127, 182, 207, .26), transparent 70%), radial-gradient(70% 80% at 0% 100%, rgba(227, 154, 88, .22), transparent 70%), linear-gradient(160deg, #0E1A20, #05090C 60%);
  box-shadow: 0 0 0 1px rgba(242, 245, 246, .12) inset, 0 60px 120px -50px rgba(127, 182, 207, .35); }
.launch-copy { position: relative; z-index: 1; min-width: 0; }
.launch-ridge { position: absolute; left: -2%; right: -2%; bottom: -2px; width: 104%; height: 120px; pointer-events: none; opacity: .55; }
.launch h2 { font-size: clamp(36px, 4.6vw, 64px); line-height: 1; font-weight: 840; letter-spacing: -0.04em; }
.launch .lede { margin-top: 20px; font-size: 19px; color: var(--ink-2); max-width: 30em; text-wrap: pretty; }
.perks { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 18px; }
.perks li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; }
.perks .ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(227, 154, 88, .15); color: var(--ember); }
.perks .ico svg { width: 22px; height: 22px; }
.perks b { display: block; font-size: 17.5px; letter-spacing: -0.01em; }
.perks span { color: var(--ink-2); font-size: 15.5px; text-wrap: pretty; }
.alert-eg { margin-top: 34px; max-width: 420px; padding: 14px 16px; border-radius: 20px; background: rgba(14, 20, 24, .82); box-shadow: 0 0 0 1px var(--line-2) inset, 0 20px 40px -20px rgba(0,0,0,.8); display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; backdrop-filter: blur(10px); animation: arrive 900ms cubic-bezier(.2,.8,.2,1) both 300ms; }
.alert-eg img { width: 38px; height: 38px; border-radius: 10px; }
.alert-eg .t { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink-3); }
.alert-eg b { display: block; font-size: 15px; margin-top: 2px; }
.alert-eg p { font-size: 14px; color: var(--ink-2); }
.alert-eg + small { display: block; margin-top: 8px; font-size: 12.5px; color: var(--ink-3); }
@keyframes arrive { from { opacity: 0; transform: translateY(-14px) scale(.98); } to { opacity: 1; transform: none; } }

.launch-form, .launch-done { position: relative; z-index: 1; align-self: center; padding: 34px; border-radius: 26px; background: rgba(0, 0, 0, .72); box-shadow: 0 0 0 1px var(--line-2) inset; backdrop-filter: blur(12px); min-width: 0; }
.launch-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.launch-form legend { font-size: 20px; font-weight: 780; letter-spacing: -0.02em; margin-bottom: 14px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 15px; border-radius: 999px; font-size: 14.5px; font-weight: 650; color: var(--ink-2); background: var(--card); box-shadow: 0 0 0 1px var(--line-2) inset; transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
.chip:hover span { color: var(--ink); background: var(--card-2); }
.chip input:checked + span { color: #000000; background: var(--ember-ink); box-shadow: none; }
.chip input:focus-visible + span { outline: 2px solid var(--ember-ink); outline-offset: 3px; }
.lf-label { display: block; margin: 26px 0 10px; font-size: 20px; font-weight: 780; letter-spacing: -0.02em; }
.lf-row { display: flex; gap: 10px; flex-wrap: wrap; }
.lf-row input { flex: 1 1 220px; min-width: 0; min-height: 56px; padding: 0 20px; border-radius: 999px; border: 0; font: 500 17px/1 var(--sans); color: var(--ink); background: var(--card-2); box-shadow: 0 0 0 1px var(--line-2) inset; }
.lf-row input::placeholder { color: var(--ink-3); }
.lf-row input:focus { outline: 2px solid var(--ember-ink); outline-offset: 2px; }
.lf-row .btn { min-height: 56px; flex: 0 0 auto; font-size: 17px; }
.lf-row .btn[disabled] { opacity: .6; cursor: progress; }
.launch-form .fine { margin-top: 14px; font-size: 13px; color: var(--ink-3); text-wrap: pretty; }
.lf-msg { margin-top: 10px; font-size: 14.5px; color: var(--ember-ink); min-height: 1.4em; }
.lf-count { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
.lf-count b { color: var(--ink); font-size: 17px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.launch-done { text-align: left; }
.launch-done .place { font-size: clamp(56px, 7vw, 96px); line-height: .9; font-weight: 860; letter-spacing: -0.05em; background: linear-gradient(180deg, #F2DDB8, var(--ember)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.launch-done .ahead { margin-top: 6px; font-size: 15px; color: var(--ink-3); }
.launch-done h3 { margin-top: 10px; font-size: 26px; font-weight: 800; }
.launch-done p { margin-top: 12px; color: var(--ink-2); font-size: 16.5px; text-wrap: pretty; }
.launch-done .btn { margin-top: 22px; }
.launch-done .copied { margin-left: 12px; font-size: 14px; color: var(--pine); }

@media (max-width: 1000px) { .launch-card { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 40px 28px; } }
@media (max-width: 520px) { .launch-card { padding: 30px 18px; border-radius: 26px; } .launch-form, .launch-done { padding: 22px 18px; } .lf-row .btn { width: 100%; } }
@media (max-width: 640px) { .nav a.join { padding: 7px 12px; font-size: 14px; } }
/* On a phone the header keeps one row: the logo goes home, and the page itself links Features. */
@media (max-width: 520px) { .nav a:not(.signin):not(.join) { display: none; } .nav { gap: 6px; } .nav a { padding: 7px 11px; font-size: 14px; } .brand { font-size: 19px; gap: 9px; } .brand img { width: 30px; height: 30px; } .top .wrap { gap: 10px; } .nav a.join .long { display: none; } }

/* Footer */
.foot { border-top: 1px solid var(--line); margin-top: 40px; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; padding-block: 30px 40px; color: var(--ink-3); font-size: 14px; }
.foot a { color: var(--ink-2); text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; }
.foot .who { font-weight: 700; color: var(--ink-2); }
.foot .fine { flex-basis: 100%; font-size: 13px; }
.foot .links { display: flex; gap: 20px; flex-wrap: wrap; margin-left: auto; }

@media (max-width: 640px) { .nav .soon { display: none; } .top .wrap { min-height: 60px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* "Launching Winter 2026" with a slow pulse (7 Nov 2026). */
.when { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ember-ink); }
.when::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 4px rgba(227, 154, 88, .18); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(227, 154, 88, .06); } }
@media (prefers-reduced-motion: reduce) { .when::before { animation: none; } }