/* Solsty landing site.
 *
 * Standalone by design: it shares the application's palette and typography but
 * none of its stylesheets. The app's CSS is written for a shell with a sidebar,
 * modals and a tab bar, none of which exist here, and coupling a marketing page
 * to an application's layout means every UI change risks breaking the page a
 * store review is looking at.
 *
 * No build step, no framework, no JavaScript. Three static pages do not justify
 * a toolchain that has to be maintained.
 */

/* Two subsets, split the way the font was cut. Turkish needs both: ö, ü and ç
   sit in latin, while ş, ğ, ı and İ are in latin-ext. Loading only one leaves
   half the diacritics rendering from the fallback serif, which is visible as
   mismatched letterforms inside a single word.

   font-display: swap so a headline is readable before the file arrives - a
   marketing page that shows nothing for 300ms has failed at its one job. */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-upright-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  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: 'Fraunces';
  src: url('../fonts/fraunces-upright-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #14100d;
  --surface: #1f1a15;
  --surface2: #2b241c;
  --border: #3a3128;
  --text: #f5efe6;
  --muted: #8b7d6b;
  --accent: #c8f04a;
  --accent-deep: #7d9630;
  --accent3: #4af0c8;
  --on-accent: #14100d;

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-full: 999px;

  --sh-clay: 0 6px 0 -1px rgba(0, 0, 0, .38), 0 12px 22px rgba(0, 0, 0, .42);
  --sh-inner: inset 0 1px 0 rgba(255, 255, 255, .06);

  --measure: 68ch;
  /* Cabinet Grotesk is named first for parity with the app, but no file is
     shipped for it there either - it is not a Google font and body text has
     always rendered in the system sans. Naming it keeps the two in step if it
     is ever licensed; the fallback is what actually renders today. */
  --sans: 'Cabinet Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Fraunces', Georgia, serif;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Keyboard users must be able to see where they are. The app's own focus ring
   is defined in components.css; this mirrors it. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: var(--measure); }

/* ── header ───────────────────────────────────────────────────────────────── */

.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-weight: 900;
  font-size: 21px;
  letter-spacing: -.01em;
  color: var(--text);
  text-decoration: none;
}
.brand img { width: 30px; height: 30px; display: block; }

.site-head nav { display: flex; gap: 6px; flex-wrap: wrap; }
.site-head nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  padding: 7px 12px;
  border-radius: var(--r-full);
}
.site-head nav a:hover { color: var(--text); background: var(--surface); }
.site-head nav a[aria-current="page"] { color: var(--text); background: var(--surface); }

/* ── hero ─────────────────────────────────────────────────────────────────── */

.hero { padding: 56px 0 44px; }

h1 {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0 0 18px;
  max-width: 18ch;
}
.hero p.lede {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  color: var(--muted);
  max-width: 46ch;
  margin: 0 0 30px;
}

.cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: var(--r-full);
  font: inherit;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  /* The clay language: a solid bottom edge is the object's thickness, and
     pressing moves the object down onto it. */
  box-shadow: 0 4px 0 var(--accent-deep);
}
.btn-primary:active { transform: translateY(4px); box-shadow: 0 0 0 var(--accent-deep); }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--surface); }

.note { font-size: 14px; color: var(--muted); margin-top: 14px; }

/* ── feature grid ─────────────────────────────────────────────────────────── */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  padding: 20px 0 56px;
  list-style: none;
  margin: 0;
}
.features li {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: var(--sh-clay), var(--sh-inner);
}
.features h3 {
  font-family: var(--serif);
  font-weight: 900;
  font-size: 1.1rem;
  margin: 0 0 6px;
}
.features p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.features .emoji { font-size: 26px; display: block; margin-bottom: 10px; }

/* ── promise band ─────────────────────────────────────────────────────────── */

.band {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 30px;
  margin: 0 0 56px;
  box-shadow: var(--sh-clay), var(--sh-inner);
}
.band h2 {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  margin: 0 0 12px;
}
.band ul { margin: 0; padding-left: 22px; color: var(--muted); }
.band li { margin-bottom: 8px; }
.band li strong { color: var(--text); }

/* ── document pages ───────────────────────────────────────────────────────── */

.doc { padding: 24px 0 64px; }
.doc h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); max-width: none; margin-bottom: 8px; }
.doc h2 {
  font-family: var(--serif);
  font-weight: 900;
  font-size: 1.35rem;
  margin: 40px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.doc h3 { font-size: 1.05rem; margin: 26px 0 8px; }
.doc p, .doc li { color: #ded5c8; }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin-bottom: 7px; }
.doc a { color: var(--accent3); }
.doc .updated { color: var(--muted); font-size: 14px; margin: 0 0 8px; }

.doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 15px;
  /* A table must never make the page scroll sideways; it scrolls inside its
     own container instead. */
  display: block;
  overflow-x: auto;
}
.doc th, .doc td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.doc th { color: var(--text); font-weight: 700; white-space: nowrap; }
.doc td { color: #ded5c8; }

.callout {
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  padding: 16px 18px;
  margin: 18px 0;
}
.callout p { margin: 0; }
.callout p + p { margin-top: 10px; }

/* ── footer ───────────────────────────────────────────────────────────────── */

.site-foot {
  border-top: 1px solid var(--border);
  padding: 28px 0 44px;
  color: var(--muted);
  font-size: 14px;
  display: flex;
  gap: 10px 22px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.site-foot nav { display: flex; gap: 18px; flex-wrap: wrap; }
.site-foot a { color: var(--muted); }
.site-foot a:hover { color: var(--text); }

/* ── narrow screens ───────────────────────────────────────────────────────── */

@media (max-width: 620px) {
  body { font-size: 16px; }
  .hero { padding: 34px 0 30px; }
  .cta .btn { flex: 1 1 100%; text-align: center; }
  .band { padding: 22px; }

  /* The three nav links do not fit beside the wordmark at 375px, and wrapping
     left one of them stranded on its own line under the logo. Stacking the row
     puts all three together instead. */
  .site-head {
    display: block;
    padding: 16px 0 12px;
  }
  .site-head nav {
    margin-top: 10px;
    gap: 4px;
  }
  .site-head nav a { padding: 7px 10px; }
}

/* Print: privacy policies and terms get printed and filed. */
@media print {
  body { background: #fff; color: #000; font-size: 12pt; }
  .site-head nav, .cta, .site-foot nav { display: none; }
  .doc p, .doc li, .doc td { color: #000; }
  .band, .features li, .callout { box-shadow: none; border: 1px solid #ccc; background: #fff; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}