/* YAWI marketing site. One stylesheet, no framework, no build step.
   The CSP in nginx/default.conf carries no 'unsafe-inline', so every rule on the
   site lives in this file: no <style> blocks and no style="..." attributes.

   The palette is taken from the MOBILE APP, not from the retired GoDaddy site.
   The site's job is to sell the app, so the two should feel like one product.
   Values sampled from the app itself (Resources/Styles/Colors.xaml and the
   Android screenshots in assets/img/screens):

     background gradient  #e8f3fe -> #c6ebf5 -> #a8c7ee   the app's signature ground
     text                 #0F2038  (Colors.xaml TextPrimary)
     secondary text       #4B5563  (Colors.xaml TextSecondary)
     primary/interactive  #356CCF  (Colors.xaml Primary)
     logo green           #518939  sampled from the wordmark
     divider              #E6EEF9  (Colors.xaml Divider)

   Note #00d084, the old GoDaddy accent, is deliberately gone: it is neither the
   app's blue nor the logo's actual green.

   No webfonts. System stacks only - nothing is fetched from a third party, which
   keeps CSP at 'self' and hands no visitor IP to Google. The app's section headings
   are bold italic, and that idiom is carried over below. */

:root {
  --blue: #356ccf;
  --blue-deep: #234a97;
  --green: #518939;
  --green-deep: #3f6c2c;

  --ink: #0f2038;
  --ink-soft: #4b5563;
  --ink-faint: #6b7a8d;

  --surface: #ffffff;
  --surface-veil: rgba(255, 255, 255, 0.72);
  --surface-solid: #f7fbff;
  --rule: #e6eef9;
  --rule-strong: #cddcf1;

  --grad-top: #e8f3fe;
  --grad-mid: #c6ebf5;
  --grad-bottom: #a8c7ee;

  --measure: 40rem;
  --wide: 62rem;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(15, 32, 56, .06), 0 8px 24px rgba(15, 32, 56, .07);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font: 400 1.0625rem/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  /* Fixed so a long legal page scrolls over one continuous ground rather than
     repeating the gradient, which is how the app reads on a single screen. */
  background: linear-gradient(180deg, var(--grad-top) 0%, var(--grad-mid) 45%, var(--grad-bottom) 100%)
              fixed no-repeat;
  background-color: var(--grad-top);
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.015em; color: var(--ink); }
h1 { font-size: clamp(2rem, 6vw, 3.25rem); }
/* Bold italic section headings, echoing "Nutrition" / "Movement" / "Wellness" in the app. */
h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); font-style: italic; }
h3 { font-size: 1.1875rem; }
p { margin: 0 0 1em; }
ol, ul { margin: 0 0 1em; padding-left: 1.25rem; }
li { margin-bottom: .4em; }

a { color: var(--blue-deep); }
a:hover { color: var(--ink); }

img { max-width: 100%; height: auto; display: block; }

code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }

.wrap { width: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 1.25rem; }
.narrow { max-width: var(--measure); }

/* ---------- Header. Three items, no hamburger (plan 4.2) ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface-veil);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rule);
}

.site-header .wrap { display: flex; align-items: center; gap: 1rem; min-height: 4rem; }

.brand { margin-right: auto; display: flex; align-items: center; }
.brand img { height: 2.25rem; width: auto; }

.nav-link { color: var(--ink); text-decoration: none; font-weight: 600; }
.nav-link:hover { color: var(--blue-deep); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: .7rem 1.35rem;
  border: 0;
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 32, 56, .18);
}
.btn:hover { background: var(--blue-deep); color: #fff; }
.btn:disabled { opacity: .55; cursor: default; }
.btn-sm { padding: .45rem .9rem; font-size: .9375rem; }
/* The logo's own green, for the one action the whole site exists to drive. */
.btn-download { background: var(--green); }
.btn-download:hover { background: var(--green-deep); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule-strong); box-shadow: none; }
.btn-ghost:hover { background: var(--surface); color: var(--ink); }

/* ---------- Sections ---------- */

section { padding: 3.5rem 0; }
/* Translucent panel, the way the app floats cards over its gradient. */
section.alt { background: var(--surface-veil); border-block: 1px solid var(--rule); }
.lead { font-size: 1.1875rem; color: var(--ink-soft); }

.hero { padding: 4.5rem 0 3.5rem; }
.hero .lead { max-width: var(--measure); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 1.75rem; }

.cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}
.card h3 { font-style: italic; }

.shots { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); margin-top: 2rem; }
.shots img { border: 1px solid var(--rule-strong); border-radius: var(--radius); box-shadow: var(--shadow); }

.detail { color: var(--ink-soft); font-size: .9375rem; }

/* ---------- Newsletter form ---------- */

.newsletter { display: flex; flex-wrap: wrap; gap: .75rem; max-width: var(--measure); }
.newsletter input[type="email"] {
  flex: 1 1 15rem;
  padding: .7rem .85rem;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
}
.newsletter input[type="email"]:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.form-status { flex-basis: 100%; margin: 0; color: #b3261e; font-size: .9375rem; min-height: 1.4em; }

/* ---------- Release detail block (/download) ---------- */

.release {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  max-width: var(--measure);
  box-shadow: var(--shadow);
}
.release dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
.release dt { font-weight: 700; }
.release dd { margin: 0; }
.release .sha { word-break: break-all; font-size: .875rem; }

.steps { max-width: var(--measure); }

/* ---------- Legal and long-form pages ----------
   Solid surface rather than the gradient: 2,400 words of terms need a calm ground. */

.legal {
  max-width: calc(var(--measure) + 5rem);
  margin: 2.5rem auto;
  padding: 2.5rem;
  background: var(--surface-solid);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.legal h2 { font-size: 1.25rem; margin-top: 2rem; }
.legal h3 { margin-top: 1.5rem; }
.legal .updated { color: var(--ink-soft); font-size: .9375rem; }

@media (max-width: 40rem) {
  .legal { margin: 1rem; padding: 1.5rem 1.25rem; }
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--surface-veil);
  padding: 2.5rem 0;
  color: var(--ink-soft);
  font-size: .9375rem;
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-bottom: 1rem; }
.site-footer a { color: var(--ink-soft); }
.site-footer a:hover { color: var(--blue-deep); }
.tagline { font-weight: 600; color: var(--green-deep); font-style: italic; }

/* Visually hidden but still in the accessibility tree. `hidden` would remove the
   label from that tree and leave the input with no accessible name. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}