/* Fonts are self hosted (fonts/) rather than loaded from Google's CDN, so no
   visitor data is sent to a third party just to render text. */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('fonts/Lora-Variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/OpenSans-Variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tiro Devanagari Hindi';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/TiroDevanagariHindi-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
  font-family: 'Tiro Devanagari Hindi';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/TiroDevanagariHindi-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tiro Devanagari Marathi';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/TiroDevanagariMarathi-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
  font-family: 'Tiro Devanagari Marathi';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/TiroDevanagariMarathi-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Design tokens — copied exactly from the app's own app/src/index.css, so
   the marketing site and the product it markets are never just "similar,"
   they are pixel-identical on color, radius, and type. */
:root {
  --radius: 0.75rem;
  --radius-sm: calc(var(--radius) - 0.375rem);
  --radius-md: calc(var(--radius) - 0.125rem);
  --radius-lg: calc(var(--radius) + 0.25rem);
  --radius-xl: calc(var(--radius) + 0.5rem);
  --radius-full: 9999px;

  --background: #faf8f4;
  --foreground: #1d1d1f;

  --card: #ffffff;

  --primary: #b35c42;
  --primary-foreground: #faf8f4;

  --muted: #f1ede3;
  --muted-foreground: #56534a;

  /* Light rust tint — hover/active backgrounds, never the accent itself */
  --accent-tint: #f2e3dd;

  /* Reserved — destructive only in the app; kept out of decorative use here too */
  --destructive: #a3222a;

  --success: #0e4a30;

  --border: #dcd5c3;

  --font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Lora', 'Open Sans', Georgia, serif;
}

/* Hindi and Marathi share the Devanagari Unicode block, so font fallback
   alone can't tell them apart; keyed off the html[lang] the language
   switcher (assets/i18n.js) sets. */
html[lang="hi"] {
  --font-sans: 'Tiro Devanagari Hindi', 'Open Sans', sans-serif;
  --font-display: 'Tiro Devanagari Hindi', 'Lora', serif;
}
html[lang="mr"] {
  --font-sans: 'Tiro Devanagari Marathi', 'Open Sans', sans-serif;
  --font-display: 'Tiro Devanagari Marathi', 'Lora', serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

a, button {
  touch-action: manipulation;
}

@media (prefers-reduced-motion: reduce) {
  .slow-progress-bar,
  .demo-tag,
  .demo-cursor {
    animation: none;
  }
  .slow-progress-bar {
    left: 10%;
  }
}

body {
  font-family: var(--font-sans);
  background-color: var(--background);
  color: var(--foreground);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .logo {
  font-family: var(--font-display);
}

a {
  color: inherit;
}

.container {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---------- Header ---------- */
header.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 248, 244, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding-block: 0.75rem;
}
.logo {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--foreground);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
}
.logo strong {
  color: var(--primary);
}
.logo-mark {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.header-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.header-links {
  display: flex;
  align-items: center;
  gap: 1.125rem;
}
.header-open-app {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--foreground);
  transition: opacity 0.15s ease;
}
.header-open-app:active {
  opacity: 0.7;
}
.back-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color 0.15s ease;
}
.back-link:hover,
.back-link:active {
  color: var(--foreground);
}

/* ---------- Language pill bar, main page (full names, above the problem) ---------- */
.lang-pillbar-row {
  display: flex;
  justify-content: center;
  padding-block: 1.5rem 0;
}
.lang-pillbar {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  background: var(--muted);
  border-radius: var(--radius-full);
  padding: 0.3rem;
}
.lang-pillbar-icon {
  color: var(--muted-foreground);
  flex-shrink: 0;
  margin-inline: 0.5rem 0.125rem;
}
.lang-pill {
  border: none;
  background: none;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--muted-foreground);
  padding: 0.45rem 1rem;
  min-height: 44px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.lang-pill:hover {
  color: var(--foreground);
}
.lang-pill:active {
  transform: scale(0.96);
}
.lang-pill.active {
  background: var(--primary);
  color: var(--primary-foreground);
}
.lang-pill.active:hover {
  color: var(--primary-foreground);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.8rem 1.6rem;
  min-height: 44px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius-full);
  transition: transform 0.2s, box-shadow 0.2s;
  border: none;
  cursor: pointer;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -8px rgba(179, 92, 66, 0.45);
}
.btn:active {
  transform: translateY(0) scale(0.97);
  box-shadow: none;
}
.btn-dark {
  background: var(--foreground);
  color: var(--background);
}

/* ---------- Problem statement (the pain of a generic PDF app) ---------- */
.problem {
  padding-block: 2rem 1rem;
  text-align: center;
}
.problem-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.5rem;
}
.problem h2 {
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: 700;
  max-width: 24rem;
  margin: 0 auto 0.75rem;
}
.problem > p {
  font-size: 0.9375rem;
  color: var(--muted-foreground);
  line-height: 1.55;
  max-width: 30rem;
  margin: 0 auto 1.5rem;
}

/* A deliberately generic, un-branded mock of a stock Android PDF viewer —
   plain Material grays/blue, not the site's own cream/terracotta tokens —
   so it reads as "a different, ordinary app" in contrast to what follows. */
.slow-search-mock {
  background: #eceff1;
  border: 1px solid #cfd8dc;
  border-radius: var(--radius);
  padding: 1.1rem;
  width: 100%;
  margin: 0 auto;
  text-align: left;
}
.slow-search-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #ffffff;
  border: 1px solid #cfd8dc;
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
}
.slow-search-bar svg {
  color: #78909c;
  flex-shrink: 0;
}
.slow-search-bar span {
  color: #37474f;
  font-size: 0.875rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.slow-progress-track {
  position: relative;
  height: 3px;
  background: #cfd8dc;
  border-radius: var(--radius-full);
  margin-top: 0.875rem;
  overflow: hidden;
}
.slow-progress-bar {
  position: absolute;
  top: 0;
  left: -40%;
  height: 100%;
  width: 40%;
  background: #4285f4;
  border-radius: var(--radius-full);
  animation: slow-search-loop 1.8s ease-in-out infinite;
}
@keyframes slow-search-loop {
  0% { left: -40%; }
  100% { left: 100%; }
}
.slow-caption {
  margin-top: 0.625rem;
  font-size: 0.75rem;
  color: #78909c;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* ---------- Live search demo hero ---------- */
.demo-hero {
  padding-block: 1.5rem 2.5rem;
}
.demo-intro {
  font-size: 0.9375rem;
  color: var(--muted-foreground);
  margin-bottom: 0.875rem;
}
.race-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.race-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.race-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 0.5rem;
}
.race-label-us {
  color: var(--primary);
}
.demo-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem;
  width: 100%;
  box-shadow: 0 16px 32px -18px rgba(0, 0, 0, 0.22);
}
.demo-search-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.875rem;
  margin-bottom: 0.875rem;
}
.demo-search-row svg {
  flex-shrink: 0;
  color: #8a8477;
}
.demo-query {
  font-size: 0.9375rem;
  font-weight: 600;
}
.demo-cursor {
  width: 2px;
  height: 1rem;
  background: var(--foreground);
  animation: demo-blink 1s step-end infinite;
}
@keyframes demo-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.demo-found-label {
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 0.5rem;
}
.demo-tags {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.4rem;
  /* Reserves room for ~2 rows of tags so the card doesn't visibly resize
     as the cycling demo moves between examples with different tag counts. */
  min-height: 3.5rem;
}
.demo-tag {
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-full);
  background: var(--accent-tint);
  color: var(--primary);
  animation: tag-pop-in 0.45s cubic-bezier(0.2, 0.8, 0.3, 1.4) backwards;
}
.demo-tag.demo-tag-more {
  background: var(--muted);
  color: var(--muted-foreground);
}
/* Results "pop" in one after another — a quick, lively contrast to the
   generic app's search that never finishes, in the section right above. */
.demo-tag:nth-child(1) { animation-delay: 0.5s; }
.demo-tag:nth-child(2) { animation-delay: 0.62s; }
.demo-tag:nth-child(3) { animation-delay: 0.74s; }
.demo-tag:nth-child(4) { animation-delay: 0.86s; }
.demo-tag:nth-child(5) { animation-delay: 0.98s; }
@keyframes tag-pop-in {
  0% { opacity: 0; transform: scale(0.85) translateY(4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.demo-hero h1 {
  font-size: 1.75rem;
  line-height: 1.3;
  font-weight: 700;
  text-align: center;
  margin: 1.5rem 0 0.625rem;
}
.demo-hero > p.demo-sub {
  font-size: 0.9375rem;
  color: var(--muted-foreground);
  line-height: 1.55;
  text-align: center;
  margin-bottom: 1.25rem;
}
.demo-hero > .btn {
  display: flex;
  width: fit-content;
  margin: 0 auto;
}

/* ---------- Editorial walkthrough (horizontal carousel) ---------- */
.walkthrough {
  border-top: 1px solid var(--border);
  padding-block: 1.75rem;
}
.walk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.walk-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
}
.walk-arrows {
  display: none;
  flex-shrink: 0;
  gap: 0.5rem;
}
.walk-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
}
.walk-arrow:hover {
  background: var(--accent-tint);
}
.walk-arrow:disabled {
  opacity: 0.35;
}
/* Full-bleed scroller: the track ignores .container's max-width so cards can
   scroll edge to edge, while .walk-head above stays aligned to the page's
   text column. */
.walk-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 0.25rem 1.25rem 1rem;
  scrollbar-width: none;
}
.walk-track::-webkit-scrollbar {
  display: none;
}
.walk-card {
  flex: 0 0 auto;
  width: 74vw;
  max-width: 260px;
  scroll-snap-align: start;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 16px 32px -20px rgba(0, 0, 0, 0.22);
}
.walk-card img {
  width: 100%;
  display: block;
  border-bottom: 1px solid var(--border);
}
.walk-card-body {
  padding: 1rem;
}
.walk-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 0.375rem;
}
.walk-card h2 {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.375rem;
}
.walk-card p {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  line-height: 1.5;
}

/* ---------- Closer ---------- */
.closer {
  padding: 2.5rem 1.25rem;
  text-align: center;
}
.closer h2 {
  font-size: 1.1875rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.closer p {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin-bottom: 1.5rem;
}

/* ---------- Footer ---------- */
footer {
  padding-block: 2.5rem;
  text-align: center;
  background: var(--foreground);
  color: var(--background);
}
footer .logo {
  color: var(--background);
  justify-content: center;
  margin-bottom: 1rem;
}
footer .logo-mark path,
footer .logo-mark line,
footer .logo-mark circle {
  stroke: var(--background);
}
footer .logo-mark .accent {
  stroke: var(--primary);
}
footer p {
  opacity: 0.7;
  font-size: 0.8125rem;
}
footer p.tagline {
  opacity: 0.9;
  font-size: 0.9375rem;
  margin-bottom: 0.5rem;
  font-weight: 500;
}
.footer-nav {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--background);
  opacity: 0.7;
  text-decoration: none;
  font-size: 0.8125rem;
  transition: opacity 0.15s ease;
}
.footer-nav a:hover,
.footer-nav a:active {
  opacity: 1;
}

/* ---------- Legal / narrative pages (about, privacy, terms) ---------- */
main.legal {
  padding-block: 2.5rem 4rem;
}
.page-title {
  font-size: 1.875rem;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}
.page-updated {
  color: var(--muted-foreground);
  font-size: 0.875rem;
  margin-bottom: 2.5rem;
}
.summary-box {
  background: var(--accent-tint);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  margin-bottom: 2.5rem;
}
.summary-box h2 {
  font-size: 1.05rem;
  margin-bottom: 0.75rem;
}
.summary-box ul {
  margin: 0;
  padding-left: 1.25rem;
}
.summary-box li {
  margin-bottom: 0.4rem;
}
article h2 {
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}
article h3 {
  font-size: 1.05rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
article p {
  margin-bottom: 1rem;
}
article ul, article ol {
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}
article li {
  margin-bottom: 0.5rem;
}
article a {
  color: var(--primary);
}
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
.card h3 {
  margin-top: 0;
}
.legal-cta {
  text-align: center;
  margin-top: 2.5rem;
}

/* Mobile styles above are the baseline; scale up from here for larger screens */
@media (min-width: 768px) {
  .container {
    padding: 0 2rem;
  }
  .logo {
    font-size: 1.1875rem;
  }
  .logo-mark {
    width: 30px;
    height: 30px;
  }
  .problem {
    padding-block: 3.5rem 1.5rem;
  }
  .problem h2 {
    font-size: 2rem;
    max-width: 30rem;
  }
  .problem > p {
    font-size: 1rem;
  }
  .demo-hero {
    padding-block: 3rem 3.5rem;
  }
  .race-row {
    flex-direction: row;
    align-items: flex-start;
    gap: 2rem;
  }
  .race-col {
    flex: 1;
    min-width: 0;
  }
  .demo-card,
  .slow-search-mock {
    max-width: 30rem;
    margin: 0 auto;
    padding: 1.5rem;
  }
  .demo-hero h1 {
    font-size: 2.5rem;
    margin: 2rem auto 0.75rem;
    max-width: 26rem;
  }
  .demo-hero > p.demo-sub {
    font-size: 1.0625rem;
    max-width: 30rem;
    margin-left: auto;
    margin-right: auto;
  }
  .walkthrough {
    padding-block: 3rem;
  }
  .walk-arrows {
    display: flex;
  }
  .walk-track {
    padding: 0.25rem 2rem 1rem;
    gap: 1.25rem;
  }
  .walk-card {
    width: 280px;
    max-width: 280px;
  }
  .walk-card h2 {
    font-size: 1.125rem;
  }
  .walk-card p {
    font-size: 0.875rem;
  }
  .closer {
    padding: 3.5rem 2rem;
  }
  .closer h2 {
    font-size: 1.5rem;
  }
  footer {
    padding-block: 3.5rem;
  }
  main.legal {
    padding-block: 3.5rem 6rem;
  }
  .page-title {
    font-size: 2.5rem;
  }
}