/* bhavitta.com shared stylesheet — used by index.html and the content pages. */
  :root{
    --night-1:#0B1220; --night-2:#17133F; --ink-deep:#0F0E23;
    --cyan:#0EA5E9; --cyan-soft:#38BDF8; --violet:#8B5CF6; --violet-2:#6C63FF;
    --emerald:#10B981; --emerald-2:#059669; --gold:#F59E0B;
    --surface:#F6F7FB; --card:#FFFFFF; --line:#E7E9F0;
    --text:#1E1B33; --text-2:#5B6072; --muted:#8A8FA3;
    --radius:20px; --radius-lg:28px;
    --shadow:0 18px 50px rgba(17,20,40,.12);
    --maxw:1120px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color:var(--text); background:var(--surface); line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;text-decoration:none}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  .eyebrow{
    font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
    color:var(--cyan);
  }
  .btn{
    display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;
    padding:13px 22px;border-radius:14px;border:1px solid transparent;cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .btn:hover{transform:translateY(-2px)}
  .btn-primary{background:linear-gradient(135deg,var(--emerald),var(--emerald-2));color:#fff;box-shadow:0 10px 24px rgba(16,185,129,.35)}
  .btn-ghost{border-color:rgba(255,255,255,.25);color:#fff;background:rgba(255,255,255,.06)}

  /* ── Nav ── */
  nav{position:sticky;top:0;z-index:50;backdrop-filter:saturate(160%) blur(12px);
      background:rgba(11,18,32,.72);border-bottom:1px solid rgba(255,255,255,.06)}
  nav .wrap{display:flex;align-items:center;justify-content:space-between;height:62px}
  .brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:18px}
  .brand .logo{width:28px;height:28px;border-radius:8px;display:block;
    box-shadow:0 0 14px rgba(56,189,248,.45);border:1px solid rgba(255,255,255,.12)}
  .nav-right{display:flex;align-items:center;gap:22px}
  .nav-links{display:flex;gap:26px;color:rgba(255,255,255,.72);font-size:14px;font-weight:500}
  .nav-links a:hover{color:#fff}
  @media(max-width:720px){.nav-links{display:none}}
  .nav-socials{display:flex;align-items:center;gap:14px}
  .nav-socials a{display:inline-flex;color:rgba(255,255,255,.78);transition:color .15s ease,transform .15s ease}
  .nav-socials a:hover{color:#fff;transform:translateY(-1px)}
  .nav-socials svg{width:19px;height:19px;display:block}

  /* ── Hero ── */
  .hero{position:relative;overflow:hidden;color:#fff;
    background:radial-gradient(1100px 480px at 78% -8%, rgba(14,165,233,.30), transparent 60%),
               radial-gradient(900px 520px at 10% 0%, rgba(139,92,246,.22), transparent 55%),
               linear-gradient(160deg,var(--night-1),var(--night-2));}
  .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;
    padding:74px 24px 90px}
  @media(max-width:900px){.hero .wrap{grid-template-columns:1fr;text-align:center;padding-top:52px}}
  .kicker-deva{font-size:14px;letter-spacing:.36em;color:rgba(56,189,248,.85);font-weight:600;margin-bottom:6px}
  .name-note{font-size:13px;color:rgba(255,255,255,.5);font-style:italic;margin:0 0 16px}
  @media(max-width:900px){.name-note{margin-left:auto;margin-right:auto}}
  h1{font-size:clamp(38px,6vw,62px);line-height:1.04;font-weight:800;letter-spacing:-.02em;
     background:linear-gradient(92deg,#fff 30%, #9FE6FF);-webkit-background-clip:text;background-clip:text;color:transparent}
  .lede{margin-top:18px;font-size:clamp(16px,2.2vw,20px);color:rgba(255,255,255,.74);max-width:560px}
  @media(max-width:900px){.lede{margin-left:auto;margin-right:auto}}
  .hero-cta{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
  @media(max-width:900px){.hero-cta{justify-content:center}}
  /* Fine print under the hero: plain muted text, deliberately not pill-shaped
     so it does not compete with the "Read first" guide links. */
  .badges{display:flex;flex-wrap:wrap;gap:4px 0;margin-top:22px;font-size:12.5px;color:rgba(255,255,255,.55);line-height:1.5}
  @media(max-width:900px){.badges{justify-content:center}}
  .badge{display:inline-flex;align-items:center;gap:5px}
  .badge+.badge::before{content:"·";margin:0 9px;color:rgba(255,255,255,.35)}
  .badge svg{width:12px;height:12px;opacity:.7}
  @media(max-width:480px){.badge{width:100%;justify-content:center}.badge+.badge::before{content:none}}
  .free-line{margin-top:18px;font-size:14.5px;color:rgba(255,255,255,.78);max-width:560px}
  .free-line strong{color:#fff;font-weight:700}
  @media(max-width:900px){.free-line{margin-left:auto;margin-right:auto}}
  .nav-links .nav-store{color:#fff;font-weight:600}

  /* ── Maker ── */
  .maker{background:linear-gradient(180deg,#fff,#eef1f8)}
  .maker .card{max-width:760px;margin:0 auto;background:var(--card);border:1px solid var(--line);
    border-radius:var(--radius-lg);padding:36px;box-shadow:var(--shadow);display:grid;grid-template-columns:72px 1fr;gap:22px;align-items:start}
  @media(max-width:600px){.maker .card{grid-template-columns:1fr;text-align:center}}
  .maker .card img{width:72px;height:72px;border-radius:18px;border:1px solid var(--line);display:block}
  @media(max-width:600px){.maker .card img{margin:0 auto}}
  .maker h3{font-size:20px;font-weight:800;margin-bottom:8px}
  .maker p{color:var(--text-2);font-size:15.5px}
  .maker p+p{margin-top:10px}
  .maker a{color:var(--emerald-2);font-weight:600}

  /* ── FAQ ── */
  .faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
  @media(max-width:800px){.faq-grid{grid-template-columns:1fr}}
  .faq-item{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px}
  .faq-item h3{font-size:17px;font-weight:700;margin-bottom:8px;letter-spacing:-.01em}
  .faq-item p{color:var(--text-2);font-size:14.5px}
  .faq-item p+p{margin-top:8px}

  /* hero phones */
  .hero-art{position:relative;height:480px}
  @media(max-width:900px){.hero-art{height:540px;margin-top:18px}}
  .phone{border-radius:34px;background:#0c0c14;padding:7px;
    box-shadow:0 30px 70px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.10)}
  .phone img{display:block;width:100%;border-radius:27px}
  .hero-art .phone{position:absolute;width:230px}
  .hero-art .p-back{right:30px;top:8px;transform:rotate(6deg);width:215px;opacity:.96}
  .hero-art .p-front{left:24px;top:48px;transform:rotate(-5deg);z-index:2}
  @media(max-width:900px){
    .hero-art .p-front{left:50%;margin-left:-150px;width:248px;transform:rotate(-4deg)}
    .hero-art .p-back{right:50%;margin-right:-150px;top:0;transform:rotate(7deg)}
  }

  /* ── Section scaffolding ── */
  section{padding:84px 0}
  .section-head{max-width:680px;margin:0 auto 50px;text-align:center}
  .section-head h2{font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:-.02em;margin-top:12px}
  .section-head p{margin-top:14px;color:var(--text-2);font-size:17px}

  /* ── Features grid ── */
  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  @media(max-width:900px){.grid{grid-template-columns:1fr 1fr}}
  @media(max-width:600px){.grid{grid-template-columns:1fr}}
  .feature{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
    padding:26px;box-shadow:var(--shadow)}
  .feature .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:16px;color:#fff}
  .feature h3{font-size:18px;font-weight:700;margin-bottom:7px}
  .feature p{color:var(--text-2);font-size:14.5px}
  .ic-1{background:linear-gradient(135deg,#0EA5E9,#6366F1)}
  .ic-2{background:linear-gradient(135deg,#10B981,#0EA5E9)}
  .ic-3{background:linear-gradient(135deg,#F59E0B,#EF4444)}
  .ic-4{background:linear-gradient(135deg,#8B5CF6,#6C63FF)}
  .ic-5{background:linear-gradient(135deg,#0EA5E9,#10B981)}
  .ic-6{background:linear-gradient(135deg,#334155,#0F172A)}
  .ic-7{background:linear-gradient(135deg,#1E6B5C,#B8860B)}

  /* ── Showcase ── */
  .showcase{background:linear-gradient(180deg,#fff, #eef1f8)}
  .shots{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:end}
  @media(max-width:900px){.shots{grid-template-columns:1fr 1fr}}
  .shot{text-align:center}
  .shot .phone{border-radius:28px;padding:6px}
  .shot .phone img{border-radius:22px}
  .shot span{display:block;margin-top:14px;font-weight:600;font-size:14px;color:var(--text-2)}
  .platform-label{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:var(--muted);text-align:center;margin:36px 0 20px}
  .platform-label:first-of-type{margin-top:0}

  /* ── Steps ── */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  @media(max-width:800px){.steps{grid-template-columns:1fr}}
  .step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
  .step .n{font-size:13px;font-weight:800;color:var(--cyan);letter-spacing:.1em}
  .step h3{margin:10px 0 6px;font-size:19px}
  .step p{color:var(--text-2);font-size:15px}

  /* ── Watch ── */
  .watch{background:linear-gradient(180deg,#eef1f8,#fff)}
  .video-row{display:flex;gap:40px;justify-content:center;flex-wrap:wrap;align-items:flex-start}
  .video-col{flex:0 1 380px}
  .video-embed{max-width:380px;margin:0 auto;aspect-ratio:1320/2868;border-radius:28px;
    overflow:hidden;background:#0c0c14;box-shadow:0 30px 70px rgba(17,20,40,.22);
    border:1px solid rgba(17,20,40,.08)}
  .video-embed.android{aspect-ratio:1080/2400}
  .video-embed iframe,.video-embed video{display:block;width:100%;height:100%;border:0;object-fit:cover}

  /* ── Privacy band ── */
  .privacy{color:#fff;background:radial-gradient(800px 360px at 80% 0%,rgba(16,185,129,.22),transparent 60%),linear-gradient(160deg,var(--ink-deep),#141233)}
  .privacy .section-head h2,.privacy .section-head p{color:#fff}
  .privacy .section-head p{color:rgba(255,255,255,.72)}
  .priv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
  @media(max-width:800px){.priv-grid{grid-template-columns:1fr}}
  .priv-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:24px}
  .priv-card h3{font-size:16px;margin-bottom:6px}
  .priv-card p{color:rgba(255,255,255,.72);font-size:14.5px}

  /* ── Support ── */
  .support .card{max-width:680px;margin:0 auto;background:var(--card);border:1px solid var(--line);
    border-radius:var(--radius-lg);padding:38px;text-align:center;box-shadow:var(--shadow)}
  .support a.mail{color:var(--emerald-2);font-weight:700}
  .socials{display:flex;justify-content:center;gap:14px;margin-top:24px;flex-wrap:wrap}
  .social{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;
    color:var(--text);padding:10px 16px;border-radius:999px;border:1px solid var(--line);
    background:var(--surface);transition:transform .15s ease,border-color .15s ease}
  .social:hover{transform:translateY(-2px);border-color:var(--cyan)}
  .social svg{width:18px;height:18px}
  .foot-socials{display:flex;gap:16px;align-items:center}
  .foot-socials a{display:inline-flex}
  .foot-socials svg{width:18px;height:18px;opacity:.7;transition:opacity .15s ease}
  .foot-socials a:hover svg{opacity:1}

  /* ── Footer ── */
  footer{background:var(--ink-deep);color:rgba(255,255,255,.6);padding:40px 0;font-size:14px}
  footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
  footer a:hover{color:#fff}
  .disclaimer{font-size:12.5px;color:var(--muted);max-width:var(--maxw);margin:18px auto 0;padding:0 24px;text-align:center}

/* ── Guides (home) ── */
.guides{background:linear-gradient(180deg,#eef1f8,#fff)}
.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.guide-grid{grid-template-columns:1fr}}
.guide{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 26px 24px;box-shadow:0 6px 20px rgba(17,20,40,.05);transition:transform .15s ease,box-shadow .15s ease}
.guide:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.guide .eyebrow{margin-bottom:10px}
.guide h3{font-size:19px;font-weight:800;letter-spacing:-.01em;margin-bottom:8px}
.guide p{color:var(--text-2);font-size:14.5px}
.guide .more{display:inline-block;margin-top:14px;color:var(--emerald-2);font-weight:700;font-size:14px}
.grid-more{text-align:center;margin-top:28px}
.grid-more a{color:var(--emerald-2);font-weight:700;font-size:15px}

/* ── Article pages ── */
.article-hero{color:#fff;background:radial-gradient(900px 420px at 80% -10%,rgba(14,165,233,.28),transparent 60%),linear-gradient(160deg,var(--night-1),var(--night-2));padding:64px 0 54px}
.article-hero .wrap{max-width:820px}
.article-hero .eyebrow{color:var(--cyan-soft)}
.article-hero h1{font-size:clamp(32px,5vw,50px);line-height:1.08;margin-top:12px;background:linear-gradient(92deg,#fff 30%,#9FE6FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.article-hero .lede{color:rgba(255,255,255,.76);font-size:clamp(16px,2vw,19px);margin-top:16px;max-width:680px}
.article-hero .hero-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.article-hero .hero-links .btn{padding:12px 20px;font-size:15px}
.article-hero .meta{margin-top:18px;font-size:13px;color:rgba(255,255,255,.55)}
.article{max-width:820px;margin:0 auto;padding:48px 24px 72px;font-size:17px;line-height:1.7}
.article h2{font-size:clamp(24px,3.4vw,32px);font-weight:800;letter-spacing:-.02em;margin:46px 0 14px}
.article h2:first-child{margin-top:0}
.article h3{font-size:19px;font-weight:700;margin:28px 0 8px}
.article p{color:var(--text);margin:0 0 16px}
.article p.small,.article .note{font-size:14.5px;color:var(--text-2)}
.article ul,.article ol{margin:0 0 18px 22px;color:var(--text)}
.article li{margin-bottom:8px}
.article li::marker{color:var(--cyan)}
.article a{color:var(--emerald-2);font-weight:600}
.article code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;background:#eef1f8;padding:2px 6px;border-radius:6px}
.article .formula{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;background:#0F0E23;color:#DCE8FF;padding:16px 18px;border-radius:14px;margin:12px 0 18px;overflow-x:auto;white-space:nowrap}
.article table{width:100%;border-collapse:collapse;margin:12px 0 22px;font-size:15px;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.article th,.article td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.article th{background:#eef1f8;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.article td.num,.article th.num{text-align:right;font-variant-numeric:tabular-nums}
.article tr:last-child td{border-bottom:none}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.shot{display:flex;flex-wrap:wrap;gap:22px;align-items:center;margin:26px 0}
.shot img{width:300px;max-width:100%;height:auto;border-radius:28px;box-shadow:0 14px 36px rgba(15,23,42,.22);border:1px solid rgba(15,23,42,.08)}
.shot figcaption{flex:1 1 260px;min-width:0;font-size:15px;line-height:1.6;color:var(--text-2)}
.callout{border-left:4px solid var(--emerald);background:#ecfdf5;border-radius:12px;padding:14px 18px;margin:18px 0 22px;font-size:15.5px}
.callout.warn{border-color:var(--gold);background:#fffbeb}
.callout strong{font-weight:800}
.article .cta{margin-top:40px;background:linear-gradient(135deg,var(--night-1),var(--night-2));color:#fff;border-radius:var(--radius-lg);padding:30px 28px;text-align:center}
.article .cta h3{margin:0 0 8px;color:#fff;font-size:22px}
.article .cta p{color:rgba(255,255,255,.72);margin-bottom:18px}
.article .cta .btn{margin:4px 6px}
.article .cta .btn-primary{color:#fff}
.article figure{margin:18px 0 26px}
.article figure img{width:100%;max-width:360px;display:block;margin:0 auto;border-radius:28px;box-shadow:var(--shadow)}
.article figcaption{text-align:center;font-size:13.5px;color:var(--muted);margin-top:10px}
.breadcrumb{font-size:13.5px;color:rgba(255,255,255,.55);margin-bottom:6px}
.breadcrumb a{color:rgba(255,255,255,.75)}

/* ── Guides discoverability ── */
.hero-guides{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px}
@media(max-width:900px){.hero-guides{justify-content:center}}
.hero-guides-label{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(56,189,248,.9);margin-right:2px}
.hero-guides a{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;font-size:14px;font-weight:600;color:#fff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);transition:background .15s ease,transform .15s ease}
.hero-guides a:hover{background:rgba(255,255,255,.16);transform:translateY(-1px)}
.hero-guides svg{width:16px;height:16px;color:var(--cyan-soft);flex:none}
@media(max-width:480px){.hero-guides a{width:100%;justify-content:center}}
.nav-mobile{display:none;color:#fff;font-weight:700;font-size:14px;padding:7px 12px;border-radius:10px;background:rgba(56,189,248,.18);border:1px solid rgba(56,189,248,.4)}
@media(max-width:720px){.nav-mobile{display:inline-flex}.nav-right{gap:12px}}
.more-guides{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:-10px 0 30px;padding:12px 14px;border-radius:14px;background:#eef1f8;border:1px solid var(--line);font-size:14px}
.more-guides span{font-weight:700;color:var(--text-2);font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-right:4px}
.more-guides a{color:var(--emerald-2);font-weight:600;padding:4px 10px;border-radius:999px;background:var(--card);border:1px solid var(--line)}