/* Toldya — marketing site
   Monochrome, black background, tiled TOLDYA watermark, airy uppercase
   Helvetica-style headlines. Matches the Figma waitlist mockup. */

:root {
  --bg: #000;
  --surface: #0e0e0e;
  --surface-2: #151515;
  --border: rgba(255, 255, 255, 0.16);
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.62);
  --faint: rgba(255, 255, 255, 0.4);
  --radius: 14px;
  --maxw: 1180px;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overflow-x: hidden;
}

/* Tiled "TOLDYA" watermark behind everything (fixed, non-interactive). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.045;
  /* 6-column tile, back to one word per column. Offsets (0,17,6,19,10,3) use
     nearly the full vertical room the 44px pitch allows, so columns read as
     clearly different heights instead of nearly aligned. Column 0 stays at
     the top so the lit accent tile aligns with it. Column pitch 161 (word
     135 + 26), tile height 44. Repeats every 6 columns. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='966' height='44'%3E%3Cg font-family='Helvetica,Arial,sans-serif' font-size='30' font-weight='normal' letter-spacing='3' fill='%23ffffff'%3E%3Ctext x='0' y='22'%3ETOLDYA%3C/text%3E%3Ctext x='161' y='39'%3ETOLDYA%3C/text%3E%3Ctext x='322' y='28'%3ETOLDYA%3C/text%3E%3Ctext x='483' y='41'%3ETOLDYA%3C/text%3E%3Ctext x='644' y='32'%3ETOLDYA%3C/text%3E%3Ctext x='805' y='25'%3ETOLDYA%3C/text%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  /* Offset the whole grid off the corner (right + down). Because the tile repeats
     vertically, this same offset bleeds in a cropped sliver of the row above at the
     very top edge — a faint partial "TOLDYA" peeking in, instead of the grid
     abruptly starting at y=0. */
  background-position: 24px 34px;
}

.page { position: relative; z-index: 1; }

a { color: inherit; text-decoration: none; }

/* The lit watermark tile (logo). Same SVG + metrics as the background tile,
   anchored to match its column-0 word (same offset as body::before's
   background-position) at full white — so it looks like one of the background
   TOLDYAs switched on. Fixed → stays in the corner on every device. */
.watermark-accent {
  /* Absolute (not fixed): sits on the top-left watermark tile at rest, then scrolls
     away with the page. Fixed made it float over and collide with scrolling content. */
  position: absolute;
  top: 34px;
  left: 24px;
  width: 161px;
  height: 38px;
  z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='161' height='38'%3E%3Ctext x='0' y='22' font-family='Helvetica,Arial,sans-serif' font-size='30' font-weight='normal' letter-spacing='3' fill='%23ffffff'%3ETOLDYA%3C/text%3E%3C/svg%3E");
  background-repeat: no-repeat;
}
.wordmark {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 4px;
}
/* ---- Hero ---- */
/* All content panels share the hero's exact width: same max width, same 24px side
   insets, same vertical rhythm — on every screen size. */
.hero, .features-wrap, .download, .about {
  max-width: var(--maxw);
  width: calc(100% - 48px);
  margin: 24px auto;
}

.hero {
  /* Extra top margin (no header row anymore) so the panel clears the logo,
     which floats independently at the top-left. */
  margin-top: 100px;
  padding: 52px 32px;
  text-align: center;
  /* Solid panel so text doesn't sit on the noisy watermark. */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.hero h1 {
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: clamp(34px, 6vw, 64px);
  line-height: 1.08;
  margin: 0 auto 20px;
  max-width: 15ch;
}
.hero p.sub {
  color: var(--muted);
  font-size: clamp(15px, 2.2vw, 19px);
  max-width: 46ch;
  margin: 0 auto 34px;
  letter-spacing: 0.3px;
}

/* ---- Feature cards (real app screenshots, horizontal scroll) ---- */
/* Wrapper (gets the shared panel width above) anchors the arrow buttons,
   which can't live inside the scroller — absolutely positioned children of a
   scroll container scroll away with the content. */
.features-wrap { position: relative; }
.features {
  /* The row scrolls horizontally; scroll-snap settles it card-by-card. */
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;              /* room for the scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.features::-webkit-scrollbar { height: 8px; }
.features::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.features::-webkit-scrollbar-track { background: transparent; }
.feature {
  flex: 0 0 280px;                   /* fixed card width → uniform screenshots */
  scroll-snap-align: start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 22px 22px;
  display: flex;
  flex-direction: column;
}
.feature h2 {
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 19px;
  line-height: 1.3;
  margin: 0 0 22px;
}
/* Screenshot in a phone-style frame; captions vary in length, so pin the
   frame to the card bottom to keep the row's bottom edge aligned. */
.feature .shot {
  margin-top: auto;
  border: 1px solid var(--border);
  border-radius: 22px;
  overflow: hidden;
  background: #000;
}
.feature .shot img {
  display: block;
  width: 100%;
  height: auto;
}
/* Carousel arrows — desktop only (hidden on touch, where swiping is natural). */
.scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  font-family: var(--font);
  cursor: pointer;
  transition: border-color 0.15s ease, opacity 0.2s ease;
}
.scroll-btn:hover { border-color: #fff; }
.scroll-btn.prev { left: -18px; }
.scroll-btn.next { right: -18px; }
@media (hover: none) {
  .scroll-btn { display: none; }
}

/* ---- Download (App Store) ---- */
.download {
  padding: 44px 28px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.download h2 {
  text-transform: uppercase; letter-spacing: 3px; font-weight: 300;
  font-size: clamp(24px, 4vw, 38px); margin: 0 0 10px;
}
.download p { color: var(--muted); max-width: 56ch; margin: 0 auto 26px; }
/* App Store badge, drawn in the site's monochrome style. Placeholder while
   the app isn't live: no href, dimmed. When it launches, an href on the
   anchor plus removing aria-disabled makes it a normal link. */
.appstore-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  background: #000;
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: left;
  transition: border-color 0.15s ease;
}
.appstore-badge svg { width: 30px; height: 40px; color: #fff; }
.appstore-badge .badge-text { display: flex; flex-direction: column; line-height: 1.2; }
.appstore-badge .badge-small { font-size: 12px; color: var(--muted); letter-spacing: 0.5px; }
.appstore-badge .badge-big { font-size: 22px; font-weight: 600; color: #fff; letter-spacing: 0.3px; }
.appstore-badge[aria-disabled="true"] { opacity: 0.55; cursor: default; }
.appstore-badge[href]:hover { border-color: #fff; }
.download .soon-note { font-size: 13px; color: var(--faint); margin: 18px auto 0; }

/* ---- About / mission ---- */
.about {
  padding: 44px 28px;
  text-align: center;
  /* Solid panel (also matches the boxed "About" in the mockup). */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
/* Keep the mission text at a readable measure inside the full-width panel. */
.about p { max-width: 62ch; margin-left: auto; margin-right: auto; }
.about h2 {
  text-transform: uppercase; letter-spacing: 3px; font-weight: 300;
  font-size: 26px; margin: 0 0 22px;
}
.about p {
  color: var(--muted); font-size: 17px; line-height: 1.75; margin: 0 auto 16px;
}
.about p strong { color: #fff; font-weight: 500; }

/* ---- Footer ---- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 30px 24px;
  text-align: center;
  color: var(--faint);
  font-size: 13px;
}
.site-footer .wordmark { font-size: 15px; margin-bottom: 12px; display: inline-block; }
.site-footer nav { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.site-footer nav a { color: var(--muted); }
.site-footer nav a:hover { color: #fff; }

/* ---- Legal pages ---- */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 20px 24px 80px;
}
.legal h1 {
  text-transform: uppercase; letter-spacing: 3px; font-weight: 300;
  font-size: clamp(26px, 4vw, 40px); margin: 20px 0 6px;
}
.legal .updated { color: var(--faint); font-size: 13px; margin-bottom: 30px; }
.legal h2 {
  font-size: 18px; font-weight: 600; margin: 34px 0 8px; letter-spacing: 0.3px;
}
.legal p, .legal li { color: var(--muted); font-size: 15px; line-height: 1.7; }
.legal ul { padding-left: 20px; }
.legal a { color: #fff; text-decoration: underline; }
.back-link {
  display: inline-block; margin: 20px 0; color: var(--muted); font-size: 14px;
}
.back-link:hover { color: #fff; }

/* ---- Responsive ---- */
@media (max-width: 860px) {
  /* Slightly narrower cards on phones so the next card peeks in — a visible
     hint that the row scrolls. */
  .feature { flex-basis: 250px; }
}