/* Gridzy landing site. Shared by index, privacy, terms, support.
   Extracted from the inline <style> block index.html carried while it was a
   single page. Fonts and colors are unchanged; see landing/README.md for why
   this site renders on a light surface. */

/* Self-hosted (OFL). No third-party requests from any page on this site. */
@font-face {
  font-family: 'Teko';
  src: url('/assets/fonts/teko-latin-var.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/dm-sans-latin-var.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Light surface, chosen so the flat lockup renders as designed (its navy
     wordmark measures 15.25:1 here, vs 1.20:1 on the dark app background).
     Text colors below all clear WCAG AA against --bg; the raw brand teal
     (#37A794, 2.74:1) and amber (#D97706, 2.96:1) are used for non-text
     accents only, with darkened variants where they carry text. */
  --bg:         #F4F7FA;
  --ink:        #12263F;  /* 14.21:1 */
  --ink-muted:  #4A5A72;  /*  6.52:1 */
  --ink-faint:  #55637A;  /*  5.66:1 */
  --teal:       #37A794;  /* brand teal, accents only */
  --teal-text:  #14695B;  /*  6.10:1, links */
  --teal-deep:  #0F5348;
  --amber:      #D97706;  /* brand amber, accents only */
  --amber-text: #B45309;  /*  4.67:1, badge label */
  --amber-tint: #FDF1E0;
  --rule:       rgba(18, 38, 63, 0.10);
  --font-display: 'Teko', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;  /* iOS: no jump when the URL bar collapses */
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* Flat base, one restrained field of depth behind the lockup. */
  background-image:
    radial-gradient(70rem 36rem at 50% -6rem, rgba(55, 167, 148, 0.11), transparent 70%),
    radial-gradient(46rem 28rem at 50% 118%, rgba(217, 119, 6, 0.07), transparent 70%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* ---- Shared link treatment ---- */

a {
  color: var(--teal-text);
  text-decoration-color: rgba(20, 105, 91, 0.35);
  text-underline-offset: 3px;
}

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

a:focus-visible {
  outline: 2px solid var(--teal-text);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.75rem 1rem;
  background: var(--bg);
  color: var(--teal-text);
  font-weight: 500;
  z-index: 10;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* ---- Hero (home only) ---- */

.hero {
  flex: 1 0 auto;
  /* No viewport-height reservation. This block used to carry
     `min-height: 88svh` so the product shot below would crest into the first
     screen as a scroll cue, back when the shot was the only thing under it.
     How It Works now occupies that role and the page is obviously long, so
     the reservation bought nothing and cost a lot: the hero content is only
     ~370px tall, so an 88svh box centred 190-300px of dead space under the
     badge (measured 226px mobile / 345px tablet / 251px desktop between the
     badge and the How It Works heading). Padding now sets the rhythm. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 7vh, 4.5rem) 1.5rem;
  padding-left: max(1.5rem, env(safe-area-inset-left));
  padding-right: max(1.5rem, env(safe-area-inset-right));
  text-align: center;
}

.hero h1 { margin: 0; line-height: 0; }

.lockup {
  display: block;
  width: clamp(15rem, 74vw, 23.75rem);  /* 240px to 380px; asset is 712px wide */
  height: auto;
}

.tagline {
  margin: 0;
  max-width: 26rem;
  font-size: clamp(1.0625rem, 4.4vw, 1.25rem);
  font-weight: 400;
  color: var(--ink);
  text-wrap: balance;
}

.launch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.4rem 1rem 0.3rem;
  border: 1px solid rgba(217, 119, 6, 0.30);
  border-radius: 999px;
  background: var(--amber-tint);
  color: var(--amber-text);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.launch::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--amber);
}

/* ---- How it works ---- */

.steps {
  flex: 0 0 auto;
  width: 100%;
  max-width: 60rem;
  margin: 0 auto;
  padding: clamp(2rem, 5vh, 3rem) 1.5rem clamp(1.75rem, 5vw, 2.5rem);
  padding-top: clamp(2rem, 5svh, 3rem);
  padding-left: max(1.5rem, env(safe-area-inset-left));
  padding-right: max(1.5rem, env(safe-area-inset-right));
  text-align: center;
}

.section-title {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, 2.75rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.section-lede {
  max-width: 34rem;
  margin: 0 auto clamp(1.75rem, 5vw, 2.5rem);
  color: var(--ink-muted);
  font-size: 1.0625rem;
  text-wrap: balance;
}

.step-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  text-align: left;
}

.step {
  counter-increment: step;
  padding: 1.25rem 1.25rem 1.375rem;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
}

.step::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.75rem;
  border-radius: 8px;
  background: rgba(55, 167, 148, 0.16);
  color: var(--teal-text);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1;
  padding-top: 0.2rem;
}

.step h3 {
  margin: 0 0 0.35rem;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
}

.step p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.no-download {
  max-width: 34rem;
  margin: clamp(1.75rem, 5vw, 2.25rem) auto 0;
  color: var(--ink-muted);
  font-size: 1rem;
  text-wrap: balance;
}

/* ---- Product glimpse ----
   The July 30 re-export is genuinely transparent (55.0% of pixels fully
   transparent, all corners alpha 0), so the composite sits directly on the
   page background like the hero lockup. No white band, no surface change,
   no seams. Padding only. */
.glimpse {
  flex: 0 0 auto;
  width: 100%;
  padding: 0 1.5rem clamp(2.5rem, 7vw, 4rem);
  padding-left: max(1.5rem, env(safe-area-inset-left));
  padding-right: max(1.5rem, env(safe-area-inset-right));
  text-align: center;
}

.glimpse-shot {
  display: block;
  width: min(90vw, 560px);
  height: auto;
  margin: 0 auto;
}

.glimpse-caption {
  max-width: 28rem;
  margin: 1.25rem auto 0;
  color: var(--ink-muted);
  font-size: 1rem;
  text-wrap: balance;
}

/* Scroll-triggered entrance, CSS only, no scripts. Browsers without
   scroll-driven animations simply render the image in place.

   The range ends at `entry 100%`, not `cover 30%`. `cover` spans from the
   element first touching the bottom of the scrollport to its bottom leaving
   the top, which for a ~528px image in an ~813px viewport is ~1341px of
   scroll, so at `cover 30%` the shot was still part-transparent for roughly
   400px after it appeared, i.e. the whole time it sat under the How It Works
   cards. That is the stretch that read as empty page. Ending at `entry 100%`
   means it is fully opaque as soon as it has finished scrolling into view. */
@keyframes glimpse-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .glimpse-shot {
      animation: glimpse-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
  }
}

/* ---- Content pages (privacy, terms, support) ---- */

.masthead {
  flex: 0 0 auto;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 0;
  padding-left: max(1.5rem, env(safe-area-inset-left));
  padding-right: max(1.5rem, env(safe-area-inset-right));
}

.masthead a {
  display: inline-block;
  line-height: 0;
}

.masthead img {
  display: block;
  width: 9.5rem;
  height: auto;
}

.prose {
  flex: 1 0 auto;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 3rem) 1.5rem clamp(2.5rem, 7vw, 3.5rem);
  padding-left: max(1.5rem, env(safe-area-inset-left));
  padding-right: max(1.5rem, env(safe-area-inset-right));
}

.prose h1 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 8vw, 3.25rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.effective {
  margin: 0 0 2.25rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-faint);
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
}

.prose h2 {
  margin: 2.25rem 0 0.625rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 1.875rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.015em;
  text-transform: uppercase;
}

.prose h2:first-of-type { margin-top: 0; }

.prose h3 {
  margin: 1.5rem 0 0.375rem;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
}

.prose p,
.prose li {
  color: var(--ink-muted);
}

.prose p { margin: 0 0 1rem; }

.prose ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

.prose li { margin-bottom: 0.5rem; }

.prose li::marker { color: var(--teal); }

.prose strong { color: var(--ink); font-weight: 600; }

.callout {
  margin: 0 0 1.75rem;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--teal);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
}

.callout p:last-child { margin-bottom: 0; }

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

.site-footer {
  flex: 0 0 auto;
  padding: 2rem 1.5rem;
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
  padding-left: max(1.5rem, env(safe-area-inset-left));
  padding-right: max(1.5rem, env(safe-area-inset-right));
  border-top: 1px solid var(--rule);
  text-align: center;
  color: var(--ink-faint);
  font-size: 0.8125rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.footer-nav a {
  display: inline-block;
  min-height: 44px;   /* touch target */
  line-height: 44px;
  padding: 0 0.125rem;
  font-size: 0.9375rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(20, 105, 91, 0.35);
}

.footer-nav a:hover,
.footer-nav a:focus-visible { border-bottom-color: var(--teal-deep); }

.footer-org {
  margin: 0 0 0.75rem;
  font-style: normal;
}

.footer-org a { text-decoration: none; border-bottom: 1px solid rgba(20, 105, 91, 0.35); }

.footer-legal { margin: 0; }