/* Public landing page. Every selector is prefixed lp- because the app's
   stylesheet bundle includes this file everywhere. Palette and orb language
   follow the October 2026 Meadow design studies. */
.lp-page { margin: 0; background: #071f27; color: #f6f0dd; font-family: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.4; }
.lp-page *, .lp-page *::before, .lp-page *::after { box-sizing: border-box; }
.lp-page h1, .lp-page h2, .lp-page h3, .lp-page h4, .lp-page p, .lp-page ul { margin: 0; padding: 0; }
.lp-page a { color: inherit; text-decoration: none; }
.lp-page button { font: inherit; }
.lp-serif { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.lp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.lp-wrap { max-width: 1280px; margin: 0 auto; padding: 0 40px; position: relative; }
.lp-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #e9ce92; }
.lp-lede { font-size: 19px; line-height: 1.65; color: #d6e0da; }

/* Buttons and brand */
.lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 22px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #f6dd9a, #e3bf63); color: #2a2206; font-weight: 600; font-size: 15px; box-shadow: 0 6px 22px #e9ce9240, inset 0 1px 0 #fff8; white-space: nowrap; cursor: pointer; }
.lp-page a.lp-btn { color: #2a2206; }
.lp-btn:hover { filter: brightness(1.04); }
.lp-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.lp-btn--small { padding: 11px 20px; font-size: 14px; }
.lp-brand { display: flex; align-items: center; gap: 12px; }
.lp-brand__mark { position: relative; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #fffbe8 0, #b8f5c4 20%, #2e9e5b 60%, #0b4a2a 100%); box-shadow: 0 0 14px 3px #39d47f55, inset 0 0 5px #0009, inset 2px 2px 4px #fff8de40; border: 1px solid #b8f5c480; }
.lp-brand__mark::before { content: ''; position: absolute; left: 18%; top: 10%; width: 40%; height: 26%; border-radius: 50%; background: radial-gradient(ellipse, #ffffffc8, transparent 70%); transform: rotate(-24deg); }
.lp-brand__name { display: block; font-family: Georgia, serif; font-size: 25px; letter-spacing: -.02em; color: #f6f0dd; line-height: 1; }
.lp-brand__guide { display: block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #c4c4a7; margin-top: 4px; }

/* Nav */
.lp-nav { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.lp-nav__links { display: flex; align-items: center; gap: 30px; font-size: 14px; color: #d6e0da; }

/* Hero: one editable piece of art (background, orbs, Nata) under the copy. */
.lp-hero { position: relative; overflow: hidden; background: #071f27; min-height: 900px; }
.lp-hero__art { position: absolute; inset: 0; background: #071f27 center / cover no-repeat; }
.lp-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, #071f27f4 0%, #071f27dc 30%, #071f2788 52%, #071f2740 72%, #071f2730 100%); }
.lp-hero .lp-wrap { position: relative; z-index: 2; }
.lp-hero__copy { max-width: 640px; padding: 34px 0 110px; }
.lp-hero h1 { font-size: 72px; line-height: 1.04; letter-spacing: -.035em; color: #f6f0dd; margin: 0 0 24px; }
.lp-hero .lp-lede { max-width: 540px; }
.lp-page .lp-fine { margin-top: 18px; font-size: 15px; line-height: 1.6; color: #d6e0da; }
.lp-fine b { color: #e2ddbd; font-weight: 600; }
.lp-proof { display: flex; gap: 30px; margin-top: 54px; }
.lp-proof div { font-size: 16px; line-height: 1.6; color: #d6e0da; max-width: 190px; padding-top: 16px; border-top: 1px solid #e9ce9266; }
.lp-proof b { display: block; color: #f6f0dd; font-weight: 600; }
.lp-hero__caption { position: absolute; z-index: 2; right: 38%; bottom: 6%; text-align: right; }
.lp-hero__who { display: block; font-style: italic; font-size: 20px; color: #f5e6be; }
.lp-hero__what { display: block; font-size: 12px; color: #c9d7cf; margin-top: 4px; max-width: 220px; line-height: 1.5; }

/* Sign-up form, shared by the hero, the Meadow teaser and the closing section. */
.lp-signup-frame { display: block; }
.lp-signup { display: flex; gap: 10px; margin-top: 34px; max-width: 540px; }
.lp-signup__field { flex: 1; min-width: 0; min-height: 58px; display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 58px; border-radius: 999px; background: #fffdf5; color: #6b6f66; box-shadow: inset 0 1px 2px #0002; }
.lp-signup__field svg { flex: none; width: 18px; height: 18px; stroke: #8a8f85; fill: none; stroke-width: 1.8; }
.lp-signup__field input { flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 17px; color: #26302c; }
.lp-signup__field input::placeholder { color: #6b6f66; }
.lp-signup__field:focus-within { box-shadow: inset 0 1px 2px #0002, 0 0 0 3px #e9ce9266; }
.lp-signup .lp-btn { height: 58px; padding: 0 26px; font-size: 17px; font-weight: 600; }
.lp-thanks { margin-top: 34px; max-width: 540px; padding: 22px 24px; border-radius: 16px; background: #0b2f2a; border: 1px solid #39d47f55; color: #d6e0da; font-size: 17px; line-height: 1.65; }
.lp-thanks strong { display: block; color: #b8f5c4; font-size: 20px; }
.lp-page .lp-thanks p { margin-top: 8px; font-size: inherit; line-height: inherit; text-align: left; }
.lp-page .lp-form-error { margin-top: 14px; font-size: 16px; line-height: 1.6; color: #f0a79a; }

/* The emailed sign-up link continues the landing page's Meadow theme. */
.lp-welcome { min-height: 100svh; background: linear-gradient(110deg, #071f27f2, #071f27b8), var(--welcome-art) center / cover fixed; }
.lp-welcome__main { padding: 48px 24px 80px; }
.lp-welcome__card { max-width: 560px; margin: 0 auto; padding: 40px; border: 1px solid #a3baaf50; border-radius: 24px; background: #082a2df2; box-shadow: 0 24px 70px #02141a80; }
.lp-page .lp-welcome__card h1 { margin: 12px 0 16px; font-size: 42px; line-height: 1.12; letter-spacing: -.025em; }
.lp-welcome__form { display: grid; gap: 24px; margin-top: 32px; }
.lp-welcome__field { display: grid; gap: 10px; }
.lp-welcome__field label { font-size: 17px; font-weight: 600; }
.lp-welcome__field input { width: 100%; min-width: 0; min-height: 56px; padding: 14px 16px; border: 1px solid #b9c7c170; border-radius: 12px; background: #fffdf5; color: #26302c; font: inherit; font-size: 18px; }
.lp-welcome__field input[readonly] { background: #163b3e; color: #d6e0da; }
.lp-welcome__field input:focus-visible { outline: 3px solid #e9ce92; outline-offset: 3px; }
.lp-welcome__hint { color: #c9d7cf; font-size: 15px; line-height: 1.6; }
.lp-welcome__form .lp-btn { width: 100%; min-height: 56px; font: inherit; font-size: 18px; font-weight: 600; }
.lp-btn:focus-visible, .lp-welcome a:focus-visible { outline: 3px solid #e9ce92; outline-offset: 4px; }
.lp-page .lp-welcome__error { margin-top: 24px; padding: 16px 18px; border: 1px solid #f0a79a70; border-radius: 12px; background: #4d2828; color: #ffe4dd; }

/* Sections */
.lp-band { padding: 96px 0; }
.lp-sec-head { max-width: 720px; }
.lp-sec-head h2 { font-size: 46px; letter-spacing: -.03em; line-height: 1.08; margin: 14px 0 16px; color: #f6f0dd; }
.lp-sec-head p { font-size: 16.5px; line-height: 1.6; color: #c9d7cf; }
.lp-how { border-top: 1px solid #a3baaf22; }
.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 56px; }
.lp-step { background: #082a2dc8; border: 1px solid #a3baaf30; border-radius: 22px; padding: 30px 30px 32px; box-shadow: 0 18px 45px #031c2440; }
.lp-step__vis { height: 150px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #cfdec322; margin-bottom: 24px; }
.lp-step__num { font-family: Georgia, serif; font-size: 13px; color: #e9ce92; letter-spacing: .1em; }
.lp-step h3 { font-size: 26px; letter-spacing: -.02em; margin: 8px 0 12px; color: #f5e6be; }
.lp-step p { font-size: 14.5px; line-height: 1.65; color: #c9d7cf; }
.lp-step p b { color: #f6f0dd; font-weight: 600; }
.lp-count { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lp-count__dots { display: flex; gap: 4px; }
.lp-dot { position: relative; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 42% 36%, #ffffff28 0, #9fb6ba20 35%, #0a263150 70%, transparent 100%); border: 1px solid #9fb6ba3a; opacity: .6; }
.lp-dot--on { background: radial-gradient(circle at 50% 46%, #fffbe8 0, #b8f5c4 30%, #2e9e5b 70%, #0b4a2a 100%); border-color: #b8f5c4aa; box-shadow: 0 0 12px 3px #39d47f66; opacity: 1; }
.lp-count__cap { font-size: 12px; color: #c9d7cf; line-height: 1.6; text-align: center; white-space: nowrap; }
.lp-count__cap b { color: #f6f0dd; }
.lp-states { display: flex; gap: 14px; }
.lp-states .lp-orb { width: 70px; }
.lp-weather { display: flex; align-items: center; gap: 12px; padding: 12px 16px; width: 100%; max-width: 300px; background: #152d38e8; border: 1px solid #92a6b044; border-radius: 12px; }
.lp-weather__symbol { color: #e9ce92; font-size: 30px; line-height: 1.3; }
.lp-weather strong { display: block; font-family: Georgia, serif; font-size: 18px; font-weight: 400; margin: 3px 0; color: #f6f0dd; }
.lp-weather__eyebrow { font-size: 9px; color: #c3cdb9; }
.lp-weather small { display: block; font-size: 10px; color: #b0c2be; }

/* Orbs: state is the hue, quality the depth; variables come from Landing::Orb. */
.lp-orb { --size: 60px; --orb-light: #9fb6ba; --orb-mid: #3f5a60; --orb-dark: #1f3238; --orb-glow: #9fb6ba33; display: inline-flex; flex-direction: column; align-items: center; text-align: center; }
.lp-orb__ball { position: relative; display: grid; place-items: center; width: var(--size); height: var(--size); padding: calc(var(--size) * .07); border-radius: 50%; }
.lp-orb__ball::after { content: ''; position: absolute; bottom: -8px; width: 62%; height: 8px; background: #001b1b90; border-radius: 50%; filter: blur(4px); }
.lp-orb__glass { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; color: #fffaf0; border: 1px solid color-mix(in srgb, var(--orb-light) 50%, transparent); box-shadow: inset 0 0 10px #00000050, inset 3px 4px 10px #fff8de30, 0 0 var(--glow-size, 14px) var(--glow-spread, 2px) var(--orb-glow); }
.lp-orb__glass::before { content: ''; position: absolute; z-index: 3; left: 15%; top: 7%; width: 40%; height: 24%; border-radius: 50%; background: radial-gradient(ellipse, #ffffffc8, transparent 70%); transform: rotate(-24deg); opacity: .45; }
.lp-orb__light { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 46%, #fffbe8 0, var(--orb-light) 24%, var(--orb-mid) 62%, var(--orb-dark) 100%); }
.lp-orb__sym { position: relative; z-index: 4; font-family: Georgia, serif; font-weight: 400; font-size: calc(var(--size) * .2); line-height: 1.1; text-shadow: 0 1px 4px #000, 0 0 8px #00000090; }
.lp-orb__nata { position: relative; z-index: 4; font-size: calc(var(--size) * .13); font-weight: 600; line-height: 1; margin-top: 4px; text-shadow: 0 1px 3px #000; }
.lp-orb__nata small { display: block; font-size: 6px; letter-spacing: .18em; text-transform: uppercase; margin-top: 2px; color: #f0ead8cc; }
.lp-orb__label { font-size: 10px; color: #e7e8d8; margin-top: 8px; line-height: 1.4; }

/* Product surfaces */
.lp-surfaces { background: linear-gradient(180deg, #071f27, #06232a 40%, #071f27); }
.lp-frame { margin-top: 46px; position: relative; background: #082a2dd6; border: 1px solid #a3baaf40; border-radius: 22px; box-shadow: 0 30px 70px #02141a80; overflow: hidden; }
.lp-frame__bar { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid #cfdec322; background: #06232a; }
.lp-frame__bar i { width: 10px; height: 10px; border-radius: 50%; background: #9fb6ba40; display: inline-block; }
.lp-frame__bar span { margin-left: 12px; font-size: 11.5px; color: #a9b8b2; }
.lp-frame__inner { padding: 22px 26px 26px; }
.lp-frame--tease { background: #061e24; }
.lp-frame__art { display: block; width: 100%; height: auto; }
.lp-peek { position: absolute; z-index: 2; left: 0; right: 0; bottom: 26px; display: flex; flex-direction: column; align-items: center; padding: 0 20px; }
.lp-peek .lp-signup, .lp-peek .lp-thanks { margin-top: 0; width: 100%; }
.lp-peek .lp-signup-frame { width: 100%; max-width: 540px; }
.lp-peek p { margin-top: 12px; font-size: 12.5px; color: #c9d7cf; text-align: center; }
.lp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 86px; align-items: start; }
.lp-two .lp-sec-head h2 { font-size: 36px; }
.lp-two .lp-frame { margin-top: 30px; }
.lp-stock-head { display: flex; align-items: center; gap: 22px; }
.lp-stock-head h4 { font-size: 30px; letter-spacing: -.02em; color: #f6f0dd; line-height: 1.1; }
.lp-stock-sub { font-size: 12.5px; color: #a9b8b2; margin-top: 6px; }
.lp-state-pill { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #b8f5c4; background: #2e9e5b22; border: 1px solid #2e9e5b55; }
.lp-state-pill i { width: 8px; height: 8px; border-radius: 50%; background: #b8f5c4; box-shadow: 0 0 8px #39d47f; }
.lp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; margin-top: 24px; padding-top: 22px; border-top: 1px solid #cfdec322; }
.lp-fact__k { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #b5c6be; }
.lp-fact__v { font-family: Georgia, serif; font-size: 22px; color: #f6f0dd; margin-top: 4px; }
.lp-fact__v small { font-family: inherit; font-size: 11.5px; color: #a9b8b2; margin-left: 6px; }
.lp-fact__d { font-size: 12px; color: #c9d7cf; margin-top: 4px; line-height: 1.5; }
.lp-dims { display: flex; gap: 6px; margin-top: 8px; }
.lp-dims span { flex: 1; height: 5px; border-radius: 3px; background: #9fb6ba22; position: relative; overflow: hidden; }
.lp-dims span::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); background: linear-gradient(90deg, #e9ce92, #f5e6be); border-radius: 3px; }
.lp-dims-cap { display: flex; gap: 6px; margin-top: 6px; font-size: 10.5px; color: #a9b8b2; }
.lp-dims-cap span { flex: 1; }
.lp-dims-cap b { color: #e2ddbd; font-weight: 600; }
.lp-market-line { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding: 12px 14px; border-radius: 12px; background: #152d38b0; border: 1px solid #92a6b044; font-size: 12.5px; color: #c9d7cf; }
.lp-market-line__symbol { color: #e9ce92; font-size: 20px; }
.lp-market-line b { display: block; font-family: Georgia, serif; font-weight: 400; font-size: 15px; color: #f6f0dd; }
.lp-wl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lp-wl-head h4 { font-size: 24px; color: #f6f0dd; }
.lp-wl-head span { font-size: 12px; color: #a9b8b2; }
.lp-wl { list-style: none; margin-top: 10px; }
.lp-wl li { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid #cfdec318; }
.lp-wl__name { font-size: 14.5px; color: #f6f0dd; }
.lp-wl__name small { display: block; font-size: 11.5px; color: #a9b8b2; margin-top: 2px; }
.lp-wl__right { text-align: right; font-size: 12.5px; }
.lp-wl__right b { display: block; font-family: Georgia, serif; font-weight: 400; font-size: 18px; color: #f6f0dd; }
.lp-wl__right span { color: #a9b8b2; font-size: 11px; }
.lp-st--good_entry { color: #b8f5c4 !important; } .lp-st--forming { color: #b6f2e2 !important; } .lp-st--extended { color: #ffe38f !important; } .lp-st--watching { color: #f0a79a !important; }
.lp-wl-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid #cfdec318; font-size: 12.5px; color: #c9d7cf; display: flex; justify-content: space-between; gap: 12px; }
.lp-wl-foot span:last-child { color: #e2ddbd; }

/* The promise */
.lp-promise { text-align: center; border-top: 1px solid #a3baaf22; }
.lp-promise h2 { font-size: 42px; letter-spacing: -.03em; line-height: 1.12; margin: 14px auto 0; max-width: 900px; }
.lp-promise__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 50px; text-align: left; }
.lp-promise__cols div { border-top: 1px solid #e9ce9250; padding-top: 18px; }
.lp-promise__cols h3 { font-size: 22px; color: #f5e6be; margin-bottom: 10px; }
.lp-promise__cols p { font-size: 14.5px; line-height: 1.65; color: #c9d7cf; }

/* Dawn */
.lp-dawn { position: relative; min-height: 560px; overflow: hidden; display: flex; align-items: center; padding: 80px 0; }
.lp-dawn__sky { position: absolute; inset: 0; background: center 42% / cover no-repeat; filter: sepia(.55) saturate(1.25) hue-rotate(-18deg) brightness(.72) contrast(1.05); }
.lp-dawn::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, #071f27 0%, #1a2c3a99 18%, #d58a4a33 50%, #071f27ee 100%), linear-gradient(90deg, #071f27cc 0%, #071f2755 40%, transparent 70%); }
.lp-dawn .lp-wrap { position: relative; z-index: 2; }
.lp-dawn h2 { font-size: 64px; letter-spacing: -.035em; line-height: 1.02; margin: 14px 0 16px; }
.lp-dawn .lp-lede { max-width: 480px; }
.lp-dawn .lp-signup, .lp-dawn .lp-thanks { margin-top: 28px; }

/* Footer */
.lp-footer { padding: 36px 0 44px; border-top: 1px solid #a3baaf22; background: #05181e; }
.lp-footer__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; }
.lp-footer__links { display: flex; gap: 26px; font-size: 13px; color: #c9d7cf; padding-top: 6px; }
.lp-footer__legal { max-width: 420px; font-size: 11.5px; line-height: 1.6; color: #8fa39e; text-align: right; }
.lp-footer__legal b { color: #a9b8b2; font-weight: 600; }

/* Smaller screens */
@media (max-width: 1100px) {
  .lp-hero { min-height: 0; }
  .lp-hero::before { display: none; }
  .lp-hero__art { position: static; height: 64vw; max-height: 560px; background-position: 74% center; }
  .lp-hero__copy { padding: 36px 0 70px; max-width: 640px; }
  .lp-hero h1 { font-size: 52px; }
  .lp-hero__caption { display: none; }
  .lp-steps { grid-template-columns: 1fr; }
  .lp-two { grid-template-columns: 1fr; gap: 60px; }
  .lp-promise__cols { grid-template-columns: 1fr; gap: 26px; }
  .lp-footer__row { flex-direction: column; align-items: flex-start; }
  .lp-footer__legal { text-align: left; }
}
@media (max-width: 720px) {
  .lp-wrap { padding: 0 16px; }
  .lp-nav { height: 68px; }
  .lp-brand__name { font-size: 20px; }
  .lp-brand__guide { display: none; }
  .lp-nav__links { gap: 12px; font-size: 13px; }
  .lp-nav__links > a:first-child { display: none; }
  .lp-nav__links .lp-btn { padding: 9px 14px; font-size: 13px; }
  .lp-hero h1 { font-size: 40px; }
  .lp-lede { font-size: 18px; }
  .lp-signup { flex-direction: column; }
  .lp-signup .lp-btn { height: 56px; }
  .lp-welcome__main { padding: 24px 16px 48px; }
  .lp-welcome .lp-nav__links > a:first-child { display: inline; }
  .lp-welcome__card { padding: 28px 22px; }
  .lp-page .lp-welcome__card h1 { font-size: 34px; }
  .lp-proof { flex-direction: column; gap: 14px; margin-top: 36px; }
  .lp-band { padding: 64px 0; }
  .lp-sec-head h2, .lp-two .lp-sec-head h2 { font-size: 32px; }
  .lp-promise h2 { font-size: 30px; }
  .lp-dawn h2 { font-size: 40px; }
  .lp-peek { position: static; padding: 18px 16px 22px; }
  .lp-facts { grid-template-columns: 1fr; }
  .lp-stock-head { align-items: flex-start; }
  .lp-wl li { grid-template-columns: 50px 1fr; }
  .lp-wl__right { grid-column: 2; text-align: left; }
  .lp-states { gap: 6px; }
  .lp-count__cap { white-space: normal; }
}
