/* ===========================================================
   Vedic Math Mastery — design tokens
   sand      #F5DEB3  base background (from app icon)
   paper     #FBF4E4  raised surface / cards
   ink       #18130E  text, line art
   vermillion#A8452A  accent — kumkum red, sparing use
   brass     #8C6A3F  muted text, hairlines, secondary accent
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --sand: #F5DEB3;
  --sand-2: #EFD39D;
  --paper: #FBF4E4;
  --ink: #18130E;
  --ink-soft: #3A342B;
  --vermillion: #A8452A;
  --vermillion-dark: #833219;
  --brass: #8C6A3F;
  --line: rgba(24,19,14,0.16);

  --display: 'Fraunces', serif;
  --body: 'IBM Plex Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  --max: 1120px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; }

.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 32px; }

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--vermillion);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------- type ---------- */
h1,h2,h3{
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
.eyebrow{
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vermillion-dark);
  display:flex;
  align-items:center;
  gap: 10px;
}
.eyebrow::before{
  content:'';
  width: 22px; height: 1px;
  background: var(--vermillion);
  display:inline-block;
}

/* ---------- nav ---------- */
header.site{
  position: sticky; top:0; z-index: 50;
  background: rgba(245,222,179,0.88);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 32px;
  max-width: var(--max); margin: 0 auto;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); }
.brand img{ width:36px; height:36px; border-radius:9px; }
.brand-text{ font-family: var(--display); font-weight:600; font-size:19px; line-height:1.1; }
.brand-text small{ display:block; font-family: var(--mono); font-weight:400; font-size:10.5px; letter-spacing:0.08em; color:var(--brass); text-transform:uppercase; }

nav.links{ display:flex; gap: 30px; align-items:center; }
nav.links a{
  text-decoration:none; font-size: 14.5px; font-weight:500; color: var(--ink-soft);
  padding: 6px 2px; border-bottom: 1px solid transparent;
}
nav.links a:hover{ border-bottom-color: var(--vermillion); color: var(--ink); }
.nav-cta{
  background: var(--ink); color: var(--sand) !important;
  padding: 9px 18px !important; border-radius: 999px;
  border-bottom: none !important;
}
.nav-cta:hover{ background: var(--vermillion-dark); border-bottom:none !important; }

.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle span{ display:block; width:22px; height:2px; background:var(--ink); margin:5px 0; }

@media (max-width: 860px){
  nav.links{
    position:absolute; top:100%; left:0; right:0;
    background: var(--paper); flex-direction:column; align-items:flex-start;
    padding: 18px 32px 26px; gap: 16px; border-bottom:1px solid var(--line);
    display:none;
    z-index: 100;
  }
  nav.links.open{ display:flex; }
  .nav-toggle{ display:block; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family: var(--body); font-weight:600; font-size:15px;
  padding: 13px 24px; border-radius: 999px;
  text-decoration:none; border: 1px solid transparent; cursor:pointer;
}
.btn-primary{ background: var(--vermillion); color: var(--paper); }
.btn-primary:hover{ background: var(--vermillion-dark); }
.btn-ghost{ background:transparent; color:var(--ink); border-color: var(--ink); }
.btn-ghost:hover{ background: var(--ink); color: var(--sand); }

/* ---------- hero ---------- */
.hero{ padding: 88px 0 70px; overflow:hidden; }
.hero .wrap{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items:center; }
.hero h1{
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1.03;
  margin: 18px 0 22px;
}
.hero h1 em{ font-style:normal; color: var(--vermillion); }
.hero p.lead{ font-size: 18px; color: var(--ink-soft); max-width: 46ch; margin-bottom: 30px;}
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.store-note{ font-family:var(--mono); font-size:12px; color:var(--brass); margin-top:14px; }

.sutra-stage{ position:relative; }
.sutra-card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px 24px 22px;
  box-shadow: 0 30px 60px -30px rgba(24,19,14,0.35);
}
.sutra-card .cap{ font-family: var(--mono); font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--brass); margin-bottom: 6px;}
.sutra-card .name{ font-family: var(--display); font-size: 20px; margin-bottom: 16px; }

@media (max-width: 860px){
  .hero .wrap{ grid-template-columns: 1fr; }
  .sutra-stage{ order:-1; max-width: 420px; margin: 0 auto; }
}

/* ---------- sections ---------- */
section{ padding: 78px 0; }
.section-head{ max-width: 640px; margin-bottom: 46px; }
.section-head h2{ font-size: clamp(28px,3.4vw,38px); margin-top:14px; }
.section-head p{ color: var(--ink-soft); margin-top:12px; font-size:16.5px; }

.divider{ border:none; border-top:1px solid var(--line); margin:0; }

/* feature grid */
.features{ background: var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.feature-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); border:1px solid var(--line); border-radius: 18px; overflow:hidden; }
.feature{ background: var(--paper); padding: 30px 28px; }
.feature .tag{ font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--vermillion-dark); }
.feature h3{ font-size: 20px; margin: 12px 0 10px; }
.feature p{ color: var(--ink-soft); font-size: 14.8px; margin:0; }
@media (max-width: 860px){ .feature-grid{ grid-template-columns: 1fr; } }

/* screenshots */
.phones{ display:grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.phone{
  background: var(--ink); border-radius: 34px; padding: 12px;
  box-shadow: 0 24px 50px -24px rgba(24,19,14,0.5);
}
.phone-screen{
  background: var(--paper); border-radius: 24px; overflow:hidden; aspect-ratio: 9/19.5;
  display:flex; flex-direction:column; position:relative;
}
.phone-caption{ text-align:center; margin-top:14px; font-size:14px; color:var(--ink-soft); }
.phone-caption b{ color:var(--ink); display:block; font-family:var(--display); font-size:15.5px; margin-bottom:2px;}
@media (max-width: 980px){ .phones{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .phones{ grid-template-columns: 1fr; max-width:280px; margin:0 auto; } }

.screenshot-note{
  margin-top: 30px; font-family: var(--mono); font-size: 12.5px; color: var(--brass);
  border-left: 2px solid var(--vermillion); padding-left: 14px;
}

/* about / description */
.about .wrap{ display:grid; grid-template-columns: 1fr; gap: 60px; }
.about-copy p{ color: var(--ink-soft); margin: 0 0 16px; font-size: 16.5px; }
.stat-strip{ display:grid; grid-template-columns: repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:20px; }
.stat{ padding: 20px 16px 20px 0; border-right:1px solid var(--line); text-align: center;}
.stat:last-child{ border-right:none; }
.stat b{ font-family:var(--mono); font-size:26px; display:block; color:var(--vermillion-dark); }
.stat span{ font-size:12.5px; color:var(--brass); }
.levels{ background: var(--paper); border:1px solid var(--line); border-radius:18px; padding: 26px 26px 8px; }
.level-row{ display:flex; align-items:center; gap:16px; padding: 16px 0; border-bottom:1px dashed var(--line); }
.level-row:last-child{ border-bottom:none; }
.level-dot{ width:10px; height:10px; border-radius:50%; background:var(--vermillion); flex:none; }
.level-row.med .level-dot{ background: var(--brass); }
.level-row.foundation .level-dot{ background: var(--ink-soft); opacity:.5;}
.level-row b{ font-family: var(--display); font-size:16.5px; }
.level-row span{ display:block; font-size:13.5px; color:var(--ink-soft); }
@media (max-width: 860px){ .about .wrap{ grid-template-columns:1fr; } }

/* contact */
.contact{ background: var(--ink); color: var(--sand); }
.contact .section-head p{ color: rgba(245,222,179,0.72); }
.contact .eyebrow{ color: var(--sand-2); }
.contact .eyebrow::before{ background: var(--sand-2); }
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.contact-form{ display:grid; gap:14px; }
.contact-form label{ font-family:var(--mono); font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color: var(--sand-2); }
.contact-form input, .contact-form textarea, .contact-form select{
  width:100%; background: rgba(245,222,179,0.06); border:1px solid rgba(245,222,179,0.28);
  border-radius: 10px; padding: 12px 14px; color: var(--sand); font-family: var(--body); font-size: 15px;
}
.contact-form textarea{ resize: vertical; min-height:110px; }
.contact-form ::placeholder{ color: rgba(245,222,179,0.4); }
.contact-info{ display:flex; flex-direction:column; gap:22px; }
.contact-info .item b{ display:block; font-family:var(--display); font-size:17px; margin-bottom:4px; }
.contact-info .item span, .contact-info .item a{ color: rgba(245,222,179,0.72); font-size:14.5px; text-decoration:none; }
.contact-info .item a:hover{ color: var(--sand); }
@media (max-width: 860px){ .contact-grid{ grid-template-columns: 1fr; } }

/* footer */
footer.site{ padding: 40px 0; border-top: 1px solid var(--line); }
.footer-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.footer-row .fbrand{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:13px; color: var(--brass); }
.footer-links{ display:flex; gap: 22px; flex-wrap:wrap; }
.footer-links a{ text-decoration:none; font-size:13.5px; color: var(--ink-soft); }
.footer-links a:hover{ color: var(--vermillion-dark); }

/* ---------- legal / privacy pages ---------- */
.legal-hero{ padding: 64px 0 40px; border-bottom: 1px solid var(--line); }
.platform-switch{ display:inline-flex; background: var(--paper); border:1px solid var(--line); border-radius:999px; padding:4px; gap:4px; margin-top:22px; }
.platform-switch a{
  text-decoration:none; font-family:var(--mono); font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase;
  padding: 9px 18px; border-radius:999px; color: var(--ink-soft);
}
.platform-switch a.active{ background: var(--ink); color: var(--sand); }

.legal-body{ padding: 56px 0 90px; }
.legal-body .wrap{ display:grid; grid-template-columns: 240px 1fr; gap:56px; align-items:start; }
.legal-toc{ position:sticky; top:100px; }
.legal-toc .eyebrow{ margin-bottom:14px; }
.legal-toc a{ display:block; text-decoration:none; color: var(--ink-soft); font-size:13.8px; padding:6px 0; border-left:2px solid transparent; padding-left:12px; }
.legal-toc a:hover{ color:var(--ink); border-left-color: var(--vermillion); }

.legal-content h2{ font-size: 22px; margin: 42px 0 12px; }
.legal-content h2:first-child{ margin-top:0; }
.legal-content p, .legal-content li{ color: var(--ink-soft); font-size:15.5px; margin: 0 0 14px; }
.legal-content ul{ padding-left: 20px; margin:0 0 14px; }
.legal-content .updated{ font-family:var(--mono); font-size:12.5px; color: var(--brass); margin-bottom:6px;}
.legal-content .callout{
  background: var(--paper); border:1px solid var(--line); border-left:3px solid var(--vermillion);
  border-radius: 10px; padding: 16px 18px; font-size:14.5px; color: var(--ink-soft); margin: 20px 0;
}
@media (max-width: 860px){ .legal-body .wrap{ grid-template-columns: 1fr; } .legal-toc{ position:static; margin-bottom: 20px; } }