/* KelimeYAP EN product page stylesheet.
   Standalone static page, served without the React bundle so store review bots
   and users with JS disabled get the full page. Unlike legal.css, this file uses
   the app's own brand (light ground, #5170ff, DM Sans) rather than the ObliqueX
   site palette: the page introduces the product, not the studio. Fonts are
   self-hosted latin subsets, no CDN, same rule as the rest of the site. */

/* ---- fonts ---- */

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/apps/kelimeyap/fonts/dm-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/apps/kelimeyap/fonts/dm-sans-500.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/apps/kelimeyap/fonts/dm-sans-700.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/apps/kelimeyap/fonts/cormorant-garamond-600.woff2") format("woff2");
}

/* Open Runde is the ObliqueX display face. Only the glyphs of the "bliqueX"
   wordmark are subset in, 1.6 KB, so the topbar can match the main site
   exactly. Do not use this family for anything else on the page. */
@font-face {
  font-family: "Open Runde Wordmark";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/apps/kelimeyap/fonts/open-runde-600-wordmark.woff2") format("woff2");
}

/* ---- tokens ---- */

:root {
  --ground: #f7f8fa;
  --card: #ffffff;
  --ink: #10141c;
  --ink-soft: #545c6b;
  --ink-faint: #858c99;
  --line: rgba(16, 20, 28, 0.1);
  --line-soft: rgba(16, 20, 28, 0.06);
  --brand: #5170ff;
  --brand-soft: rgba(81, 112, 255, 0.1);
  --grid: rgba(16, 24, 56, 0.05);
  --radius: 18px;
  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--ground);
  /* the app's own quiet graph-paper ground */
  background-image: linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 56px 56px, 56px 56px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.011em;
}

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

a {
  color: var(--brand);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.wrap {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.narrow {
  max-width: 44rem;
}

section {
  padding: 4.5rem 0;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.15;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

.eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---- topbar ---- */

/* Height and the ObliqueX wordmark deliberately match the main site's
   navigation (src/components/Navigation.tsx: py-4 around a 28px mark and
   1.5rem/2rem display type, so 64px in total). Moving between obliquex.com
   and this page should not feel like leaving the site. The mark is
   /logo.png rather than the site's /oxi.png because oxi.png is drawn white
   for a dark ground and would disappear here. */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(247, 248, 250, 0.88);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line-soft);
}

.topbar-inner {
  max-width: 64rem;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  gap: 0.75rem 1.25rem;
  align-items: center;
  justify-content: space-between;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.oxbrand {
  display: inline-flex;
  align-items: center;
  flex: none;
  font-family: "Open Runde Wordmark", var(--sans);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 2rem;
  letter-spacing: -0.03em;
  color: var(--ink);
  transition: opacity 0.15s ease;
}

.oxbrand:hover {
  opacity: 0.7;
  text-decoration: none;
}

.oxbrand img {
  width: 1.75rem;
  height: 1.75rem;
}

.topbar-sep {
  flex: none;
  width: 1px;
  height: 1.5rem;
  background: var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: -0.02em;
}

.brand:hover {
  color: var(--ink);
  text-decoration: none;
}

.brand img {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 7px;
  border: 1px solid var(--line-soft);
  flex: none;
}

.topnav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.topnav a {
  color: var(--ink-soft);
}

.topnav a:hover {
  color: var(--ink);
  text-decoration: none;
}

/* ---- hero ---- */

.hero {
  padding: 4.5rem 0 3rem;
  text-align: center;
}

.hero-icon {
  width: 88px;
  height: 88px;
  margin: 0 auto 1.5rem;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: 0 12px 32px -20px rgba(16, 20, 40, 0.5);
}

.hero h1 {
  font-size: clamp(2.15rem, 6vw, 3.4rem);
  margin-bottom: 1.1rem;
}

.hero h1 em {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 600;
  color: var(--brand);
  letter-spacing: -0.01em;
}

.hero-lede {
  max-width: 36rem;
  margin: 0 auto;
  font-size: 1.0625rem;
  color: var(--ink-soft);
}

.hero-facts {
  margin: 1.5rem auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.hero-facts span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  background: var(--card);
}

/* ---- store badges (placeholder state) ---- */

.stores {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.store {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 1.1rem;
  border-radius: 12px;
  border: 1px dashed var(--line);
  background: transparent;
  color: var(--ink-faint);
  min-width: 12.5rem;
  text-align: left;
}

.store svg {
  width: 1.4rem;
  height: 1.4rem;
  flex: none;
  fill: currentColor;
}

.store-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.store-text b {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: -0.02em;
}

.store-text small {
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

/* ---- screenshot strip ---- */

.strip {
  padding-top: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.strip-inner {
  display: flex;
  gap: 1rem;
  padding: 0 max(1.5rem, calc((100vw - 64rem) / 2)) 1.5rem;
  width: max-content;
}

.strip figure {
  margin: 0;
  flex: none;
  width: 17rem;
  scroll-snap-align: center;
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  overflow: hidden;
  background: var(--card);
}

.strip img {
  width: 100%;
  height: auto;
}

.strip-hint {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--ink-faint);
  padding-bottom: 0.5rem;
}

/* ---- features ---- */

.section-head {
  max-width: 40rem;
  margin-bottom: 2.5rem;
}

.section-head h2 {
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
  margin: 0.6rem 0 0.75rem;
}

.section-head p {
  color: var(--ink-soft);
}

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.tile {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.tile h3 {
  font-size: 1.0625rem;
  letter-spacing: -0.025em;
  margin-bottom: 0.5rem;
}

.tile p {
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.tile .mark {
  display: block;
  width: 1.75rem;
  height: 0.1875rem;
  border-radius: 999px;
  background: var(--brand);
  margin-bottom: 1.1rem;
}

/* ---- inside / numbers ---- */

.numbers {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin-bottom: 1.25rem;
}

.number {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 1.35rem 1.5rem;
}

.number b {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.number span {
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.sources {
  font-size: 0.875rem;
  color: var(--ink-faint);
}

/* ---- privacy band ---- */

.band {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: 24px;
  padding: clamp(1.75rem, 4vw, 3rem);
}

.band h2 {
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  margin-bottom: 0.9rem;
}

.band > p {
  max-width: 40rem;
  color: var(--ink-soft);
}

.nolist {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  font-size: 0.9375rem;
  font-weight: 500;
}

.nolist li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  color: var(--ink);
}

.nolist li::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--brand);
}

.band-note {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

/* ---- documents & contact ---- */

.docs {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
}

.doc {
  display: block;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 1.15rem 1.35rem;
  color: var(--ink);
}

.doc:hover {
  border-color: var(--brand);
  text-decoration: none;
}

.doc b {
  display: block;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.doc span {
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

.contact {
  margin-top: 2rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

/* ---- footer ---- */

.pagefoot {
  border-top: 1px solid var(--line-soft);
  padding: 2rem 0 3rem;
  font-size: 0.875rem;
  color: var(--ink-faint);
}

.pagefoot .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  justify-content: space-between;
}

.pagefoot a {
  color: var(--ink-soft);
}

/* ---- reveal on scroll (only when JS runs; no-JS keeps content visible) ---- */

.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 52rem) {
  .topnav {
    display: none;
  }
}

@media (max-width: 40rem) {
  .topbar-inner {
    padding: 0.85rem 1.25rem;
  }
  .oxbrand {
    font-size: 1.35rem;
  }
  section {
    padding: 3.25rem 0;
  }
  .hero {
    padding: 3rem 0 2rem;
  }
  .strip figure {
    width: 14.5rem;
  }
  .store {
    min-width: 0;
    flex: 1 1 13rem;
  }
}