/* ============================================================================
   site.css — the public shruti.lekha site (landing + beta pages).

   COLOURS: every value below comes from design_reference/site_tokens.css.
   The variable names carry a `--site-` prefix on purpose: the landing page also
   loads the tool's own static/style.css (the embedded finder needs it), and
   style.css defines some of the SAME names with DIFFERENT values (its --ink is
   #1c1830, the site's is #3D2B7A). Prefixing keeps the two palettes fully
   separate, so the embedded tool looks exactly as it always has.

   LAYOUT: mobile-first. The phone artboards (design_reference/site_p*_phone.html)
   are the base truth; everything inside the single  @media (min-width: 900px)
   block reproduces the desktop artboards. Content max 960px, reading column
   640px, tool container 780px, per the token sheet's comments.
   ============================================================================ */
:root {
  --site-ink:      #3D2B7A;   /* headings, banner bg, footer bg */
  --site-action:   #6A55E8;   /* buttons, links, CTA */
  --site-grad-a:   #5D4AAE;   /* sparing accents (unused so far, kept from tokens) */
  --site-grad-b:   #443683;
  --site-lavender: #C9BFFF;   /* decorative only: wordmark dot, links on dark */
  --site-page:     #F0EEF7;
  --site-surface:  #FFFFFF;
  --site-tint:     #F1EEFD;
  --site-border:   #E7E4F3;
  --site-text:     #2A2440;
  --site-muted:    #6B6480;   /* muted labels/placeholders */
  --site-font:     Inter, system-ui, sans-serif;   /* weights 400/500/600 */
}

html, body { margin: 0; padding: 0; }
body {
  background: var(--site-page);
  color: var(--site-text);
  font-family: var(--site-font);
  -webkit-font-smoothing: antialiased;
}
.site a { color: var(--site-action); }

/* ---------- banner bar (landing only) ----------
   Two verbatim texts from the artboards: the narrow one shows below 900px, the
   full line at ≥900px — swapped purely by CSS, no JS. */
.site-banner {
  background: var(--site-ink); color: #fff;
  font-size: 12px; line-height: 1.5;
  padding: 9px 16px; text-align: center;
}
.site-banner a {
  color: var(--site-lavender); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px; white-space: nowrap;
}
.banner-full { display: none; }

/* ---------- header row: logo + wordmark ---------- */
.site-top { padding: 16px 20px 0; display: flex; align-items: center; gap: 9px; }
.site-top img { width: 28px; height: 28px; border-radius: 7px; }
.wordmark { font-size: 17px; font-weight: 600; color: var(--site-ink); letter-spacing: -.01em; }
.dot { color: var(--site-lavender); }   /* the wordmark's dot — header and footer alike */

/* ---------- landing hero: h1 + sub-line ---------- */
.site-hero { padding: 24px 20px 18px; }
.site-hero h1 {
  margin: 0 0 10px; font-size: 30px; font-weight: 600;
  line-height: 1.12; letter-spacing: -.02em; color: var(--site-ink);
}
.site-hero p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--site-text); text-wrap: pretty; }

/* ---------- the tool container + as-on tint strip ---------- */
.tool-wrap { margin: 0 14px; }
.tool-card {
  background: var(--site-surface); border: 1px solid var(--site-border);
  border-radius: 14px; box-shadow: 0 2px 10px rgba(61, 43, 122, .06); overflow: hidden;
}
.asof-strip { margin: 12px 0 0; background: var(--site-tint); border-radius: 8px; padding: 10px 14px; }
.asof-strip p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--site-text); }
.asof-strip a { color: var(--site-action); font-weight: 600; }

/* ---------- teaser: "Why is this free?" ---------- */
.teaser { margin: 32px 20px 0; padding-top: 26px; border-top: 1px solid var(--site-border); }
.teaser h2 { margin: 0; font-size: 23px; font-weight: 600; letter-spacing: -.015em; color: var(--site-ink); }
.teaser-lead { margin: 4px 0 18px; font-size: 16.5px; font-weight: 500; color: var(--site-ink); }
.teaser-body { display: flex; flex-direction: column; gap: 14px; font-size: 15px; line-height: 1.62; color: var(--site-text); }
.teaser-body p { margin: 0; text-wrap: pretty; }
.teaser-q { font-weight: 600; color: var(--site-action); }
.btn-cta {
  display: block; margin: 22px 0 0; background: var(--site-action); color: #fff;
  text-align: center; text-decoration: none; font-size: 15.5px; font-weight: 600;
  padding: 15px 16px; border-radius: 10px;
}
.site .btn-cta { color: #fff; }   /* beats the generic .site a colour */

/* ---------- founder note card ---------- */
.founder-wrap { margin: 32px 14px 0; }
.founder-card { background: var(--site-tint); border-radius: 14px; padding: 22px 20px; }
.founder-card h3 { margin: 0 0 10px; font-size: 16.5px; font-weight: 600; color: var(--site-ink); }
.founder-card p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.62; color: var(--site-text); text-wrap: pretty; }
.founder-card p.founder-last { margin: 0 0 12px; }
.founder-card p.founder-sig { margin: 0; font-size: 14px; font-weight: 500; color: var(--site-ink); }

/* ---------- footer (dark) ---------- */
.site-footer { margin: 32px 0 0; background: var(--site-ink); color: #F0EEF7; padding: 24px 20px; }
.footer-brand { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; }
.footer-brand img { width: 22px; height: 22px; border-radius: 6px; }
.footer-brand .name { font-size: 14px; font-weight: 600; color: #fff; }
.footer-brand .meta { font-size: 12.5px; color: #F0EEF7; flex-basis: 100%; }   /* its own line, under the name */
.site-footer a { color: var(--site-lavender); }
.footer-note-site {
  margin: 0; font-size: 12px; line-height: 1.65; color: #F0EEF7; opacity: .85; text-wrap: pretty;
}
.footer-note-site strong { color: #fff; }
/* the beta page's short footer has only the brand row — no bottom margin under it */
.site-footer.short { padding: 20px; }
.site-footer.short .footer-brand { margin: 0; }

/* ---------- beta page ---------- */
.beta-copy { padding: 26px 20px 0; }
.beta-copy h1 {
  margin: 0 0 12px; font-size: 26px; font-weight: 600;
  line-height: 1.18; letter-spacing: -.02em; color: var(--site-ink); text-wrap: pretty;
}
.beta-lead { margin: 0 0 18px; font-size: 16px; line-height: 1.55; font-weight: 500; color: var(--site-ink); text-wrap: pretty; }
.beta-copy p.beta-p { margin: 0 0 14px; font-size: 15px; line-height: 1.62; color: var(--site-text); text-wrap: pretty; }
.beta-copy p.beta-p:last-child { margin-bottom: 0; }
.beta-card {
  margin: 26px 14px 0; background: var(--site-surface); border: 1px solid var(--site-border);
  border-radius: 14px; box-shadow: 0 2px 10px rgba(61, 43, 122, .06); padding: 22px 18px;
}
.btn-join {
  display: block; background: var(--site-action); color: #fff; text-align: center;
  text-decoration: none; font-size: 15.5px; font-weight: 600; padding: 15px 16px; border-radius: 10px;
}
.site .btn-join { color: #fff; }
.beta-privacy { margin: 14px 20px 0; font-size: 12.5px; line-height: 1.6; color: var(--site-muted); text-wrap: pretty; }

/* ---------- beta page hero: the recorded voice entry (added 2026-09-27) ----------
   Sizes, colours and radii reuse the values above (landing h1, teaser h2, beta lead,
   privacy note, card border). Static by default; .hero-live = video playing.
   Since 2026-09-27 (later) the video is the owner's FULL 16:9 recording, so the captions
   and the sound button sit in a bar UNDER the picture instead of over it — they never
   cover the recording. The same block (templates/_demo_video.html) is used on the
   homepage, the beta page and the rate finder page. */
.hero { padding: 26px 0 0; }
.hero-h {
  margin: 0 20px 10px; font-size: 30px; font-weight: 600;
  line-height: 1.12; letter-spacing: -.02em; color: var(--site-ink); text-wrap: pretty;
}
.hero-sub { margin: 0 20px 18px; font-size: 16px; line-height: 1.55; font-weight: 500; color: var(--site-ink); text-wrap: pretty; }
.hero-side { margin: 0 20px 14px; font-size: 23px; font-weight: 600; letter-spacing: -.015em; color: var(--site-ink); }
.hero-demo { margin: 0 14px; }
.hero-frame {
  position: relative; margin: 0 auto;
  border: 1px solid var(--site-border); border-radius: 14px; overflow: hidden;
  background: var(--site-page);            /* what the loop fades through */
  /* never taller than about two-thirds of the screen (matters on a phone held sideways):
     picture height = width x 9/16, plus the 48px caption bar */
  max-width: min(100%, calc((67vh - 48px) * 16 / 9));
}
.hero-media { position: relative; aspect-ratio: 16 / 9; }   /* keeps the picture's space before it loads */
.hero-video, .hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-poster { display: block; }
.hero-video { display: none; }                          /* static by default …        */
.hero-live .hero-video { display: block; }              /* … live once hero.js says so */
.hero-live .hero-poster { display: none; }
.hero-poster:not([src]) { visibility: hidden; }         /* rate finder page: still waiting to load */
.hero-caps {                                            /* the caption bar under the picture */
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px;
  min-height: 48px; margin: 0; padding: 0 146px 0 14px; box-sizing: border-box;
  background: var(--site-surface); border-top: 1px solid var(--site-border);
}
.hero-cap { font-size: 15px; line-height: 1.55; font-weight: 600; color: var(--site-ink); }
.hero-live .hero-cap { opacity: 0; transition: opacity .2s; }   /* the caption beat */
.hero-live .hero-cap.on { opacity: 1; }
.hero-sound {                                           /* right-hand end of the caption bar */
  position: absolute; right: 6px; bottom: 2px;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 12px;                    /* 44px = a comfortable thumb target */
  background: var(--site-surface); color: var(--site-action);
  border: 1px solid var(--site-action); border-radius: 10px;
  font: 600 13px var(--site-font); cursor: pointer;
}
.hero-sound[hidden] { display: none; }                  /* (display above would otherwise beat [hidden]) */
.hero-sound .icon-on, .hero-sound.is-on .icon-muted { display: none; }
.hero-sound.is-on .icon-on { display: inline; }
.hero-note { max-width: 460px; margin: 12px auto 0; font-size: 12.5px; line-height: 1.6; color: var(--site-muted); text-wrap: pretty; }

/* ---------- rate finder page: link to the beta page (added 2026-09-27) ----------
   The beta hero's headline (a link to /beta) + the demo video (lazy-loaded). */
.promo { display: block; margin: 32px 14px 0; }
.promo-h { margin: 0 6px 14px; font-size: 23px; font-weight: 600; letter-spacing: -.015em; color: var(--site-ink); }
.site .promo-h a { color: inherit; text-decoration: none; }

/* ---------- homepage (added 2026-09-27) ----------
   Phone: headline, video, "Type it…", offline line, button — kept compact so the top of
   the rate finder's search box shows below the video without scrolling on a 360px phone.
   Laptop (>=900px, below): text on the left, the video on the right. */
.home-hero { padding: 12px 20px 0; }
.home-hero .hero-h { margin: 0 0 8px; font-size: 23px; line-height: 1.18; }
.home-demo { margin: 0 -6px; }
.home-hero .hero-side { margin: 8px 0 2px; font-size: 16.5px; font-weight: 500; letter-spacing: 0; }
.home-hero .hero-note { max-width: none; margin: 0; }
.home-hero .btn-cta { margin: 10px 0 0; padding: 11px 16px; }
.home-intro { margin: 12px 20px 10px; font-size: 15px; line-height: 1.45; font-weight: 500; color: var(--site-ink); text-wrap: pretty; }

/* ---------- beta page: who is asking, next to the waitlist button (added 2026-09-27) ---------- */
.beta-facts { margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--site-border); }
.beta-facts p { margin: 0 0 8px; font-size: 13px; line-height: 1.6; color: var(--site-text); text-wrap: pretty; }
.beta-facts p:last-child { margin: 0; }
.beta-facts strong { font-weight: 600; color: var(--site-ink); }

/* ============================================================================
   ≥ 900px — the desktop artboards
   ============================================================================ */
@media (min-width: 900px) {
  .site-banner { font-size: 13px; padding: 9px 24px; }
  .banner-narrow { display: none; }
  .banner-full { display: inline; }

  .site-top { max-width: 960px; margin: 0 auto; padding: 20px 32px 0; gap: 10px; }
  .site-top img { width: 30px; height: 30px; border-radius: 8px; }
  .wordmark { font-size: 18px; }

  .site-hero { max-width: 760px; margin: 0 auto; padding: 44px 32px 26px; text-align: center; }
  .site-hero h1 { margin: 0 0 12px; font-size: 44px; line-height: 1.08; letter-spacing: -.025em; }
  .site-hero p { margin: 0 auto; max-width: 620px; font-size: 16.5px; }

  .tool-wrap { max-width: 780px; margin: 0 auto; padding: 0 32px; }
  .tool-card { border-radius: 16px; box-shadow: 0 2px 12px rgba(61, 43, 122, .07); }
  .asof-strip { margin: 14px 0 0; padding: 10px 16px; text-align: center; }
  .asof-strip p { font-size: 13px; }

  .teaser { max-width: 640px; margin: 56px auto 0; padding: 36px 32px 0; }
  .teaser h2 { font-size: 29px; letter-spacing: -.02em; }
  .teaser-lead { margin: 6px 0 22px; font-size: 19px; }
  .teaser-body { gap: 16px; font-size: 16px; line-height: 1.65; }
  .btn-cta { display: inline-block; margin: 26px 0 0; font-size: 16px; padding: 15px 28px; }

  .founder-wrap { max-width: 640px; margin: 48px auto 0; padding: 0 32px; }
  .founder-card { border-radius: 16px; padding: 28px 30px; }
  .founder-card h3 { margin: 0 0 12px; font-size: 17.5px; }
  .founder-card p { margin: 0 0 10px; font-size: 15px; line-height: 1.65; }
  .founder-card p.founder-last { margin: 0 0 14px; }
  .founder-card p.founder-sig { font-size: 14.5px; }

  .site-footer { margin: 56px 0 0; padding: 32px 32px 36px; }
  .footer-inner { max-width: 900px; margin: 0 auto; }
  .footer-brand { gap: 9px; margin: 0 0 14px; }
  .footer-brand img { width: 24px; height: 24px; }
  .footer-brand .name { font-size: 15px; }
  .footer-brand .meta { font-size: 13px; }
  .footer-note-site { font-size: 12.5px; max-width: 820px; }
  .site-footer.short { padding: 22px 32px; }

  .beta-main {
    max-width: 960px; margin: 0 auto; padding: 48px 32px 56px;
    display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: start;
  }
  .beta-copy { padding: 0; }
  .beta-copy h1 { margin: 0 0 14px; font-size: 36px; line-height: 1.12; letter-spacing: -.025em; }
  .beta-lead { margin: 0 0 22px; font-size: 18px; }
  .beta-copy p.beta-p { margin: 0 0 16px; font-size: 15.5px; line-height: 1.65; }
  .beta-card { margin: 0; border-radius: 16px; box-shadow: 0 2px 12px rgba(61, 43, 122, .07); padding: 24px 22px; }
  .beta-privacy { margin: 12px 4px 0; }

  /* beta hero: headline across the top; the line beside the video on the left, the video
     (16:9, since 2026-09-27) in a wide right-hand column. */
  .hero { max-width: 960px; margin: 0 auto; padding: 48px 32px 0; }
  .hero-h { margin: 0 0 12px; font-size: 44px; line-height: 1.08; letter-spacing: -.025em; }
  .hero-sub { margin: 0 0 32px; font-size: 18px; }
  .hero-body { display: grid; grid-template-columns: 1fr 560px; gap: 48px; align-items: center; }
  .hero-side { margin: 0; font-size: 29px; letter-spacing: -.02em; }
  .hero-demo { margin: 0; }
  .hero-frame { border-radius: 16px; }
  .hero-note { max-width: none; }

  .promo { max-width: 640px; margin: 48px auto 0; padding: 0 32px; }
  .promo-h { margin: 0 0 16px; font-size: 29px; letter-spacing: -.02em; }

  /* homepage hero: headline, "Type it…", offline line and button stacked on the left; the
     video in the wider right-hand column, beside all four (grid areas; the page's own order
     is the phone order). A little wider than the 960px text pages, for the video. */
  .home-top { max-width: 1120px; box-sizing: border-box; }   /* logo lines up with the wider hero */
  .home-hero {
    max-width: 1120px; margin: 0 auto; padding: 48px 32px 0; box-sizing: border-box;
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 48px;
    grid-template-areas: "head video" "side video" "note video" "cta video";
    grid-template-rows: auto auto auto 1fr;
  }
  .home-hero .hero-h { grid-area: head; margin: 0 0 18px; font-size: 44px; line-height: 1.08; letter-spacing: -.025em; }
  .home-demo { grid-area: video; margin: 0; align-self: center; }
  .home-hero .hero-side { grid-area: side; margin: 0 0 12px; font-size: 29px; font-weight: 600; letter-spacing: -.02em; }
  .home-hero .hero-note { grid-area: note; margin: 0; }
  .home-hero .btn-cta { grid-area: cta; justify-self: start; align-self: start; margin: 26px 0 0; padding: 15px 28px; }
  .home-intro { max-width: 780px; margin: 56px auto 14px; padding: 0 32px; box-sizing: border-box; font-size: 18px; text-align: center; }
}