/* ============================================================
   Fonts In Hindi — shared stylesheet for content pages
   (about, contact, privacy, cookie, how-to-use, faq, support)
   ============================================================ */

:root {
  --paper:    #F2F7EF;
  --paper-2:  #E3EFDD;
  --card:     #FBFDF8;
  --ink:      #14271B;
  --ink-soft: #364A3D;
  --muted:    #7B8C7E;
  --accent:   #138A5C;
  --accent-2: #7FB23E;
  --forest:   #0B5C2C;
  --line:     rgba(20,39,27,0.14);
  --line-2:   rgba(20,39,27,0.08);
  --radius:   4px;
  --display:  'Fraunces', Georgia, serif;
  --body:     'Hanken Grotesk', system-ui, sans-serif;
  --mono:     'Space Mono', ui-monospace, monospace;
  --deva:     'Tiro Devanagari Hindi', 'Hanken Grotesk', serif;
  --shadow:   0 18px 50px -28px rgba(20,39,27,0.45);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before {
  content:""; position: fixed; inset: 0; pointer-events: none; z-index: 9998;
  opacity: .045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background: var(--accent); color: var(--paper); }
a { color: var(--accent); }

/* ── Header ── */
.header {
  background: rgba(242,247,239,0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding: 0.8rem 1.6rem;
  position: sticky; top: 0; z-index: 50;
}
.header-content { display:flex; align-items:center; gap:16px; max-width:1400px; margin:0 auto; }
.header-left { display:flex; align-items:center; gap:14px; }
.header-right { margin-left:auto; display:flex; align-items:center; gap:14px; }
.nav-toggle, .share-btn {
  background:none; border:1px solid var(--line); width:42px; height:42px;
  border-radius:50%; font-size:1.02rem; cursor:pointer; color:var(--ink);
  display:grid; place-items:center; transition:all .25s ease;
}
.nav-toggle:hover { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.share-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.logo { display:flex; flex-direction:column; line-height:1.05; }
.logo a { font-family: var(--display); font-weight:600; font-size:1.4rem; color:var(--forest); text-decoration:none; letter-spacing:-.01em; }
.logo small { font-family: var(--mono); font-size:.56rem; letter-spacing:.26em; text-transform:uppercase; color:var(--accent); margin-top:2px; }
.header-tag { font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); display:none; }
@media(min-width:840px){ .header-tag{ display:block; } }

/* ── Side nav ── */
.side-nav {
  position:fixed; top:0; left:-340px; width:320px; height:100vh;
  background:var(--card); border-right:1px solid var(--line);
  transition:left .35s cubic-bezier(.16,1,.3,1); z-index:1001; padding:1.8rem 0; overflow-y:auto;
}
.side-nav.open { left:0; }
.side-nav-header { padding:0 1.8rem 1.4rem; margin-bottom:1rem; border-bottom:1px solid var(--line-2); display:flex; justify-content:space-between; align-items:center; }
.side-nav .logo { font-family:var(--display); font-weight:600; font-size:1.15rem; color:var(--ink); flex-direction:row; align-items:center; gap:.5rem; }
.close-nav { background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--accent); }
.nav-links { list-style:none; }
.nav-links a { display:flex; align-items:center; gap:.7rem; padding:.85rem 1.8rem; color:var(--ink-soft); text-decoration:none; font-weight:500; border-left:3px solid transparent; transition:all .2s ease; }
.nav-links a i { color:var(--muted); width:18px; text-align:center; }
.nav-links a:hover, .nav-links a.active { background:var(--paper-2); border-left-color:var(--accent); color:var(--ink); }
.nav-links a:hover i, .nav-links a.active i { color:var(--accent); }
.others { padding:1.4rem 1.8rem .4rem; font-family:var(--mono); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); }
.overlay { position:fixed; inset:0; background:rgba(20,39,27,0.4); z-index:1000; opacity:0; visibility:hidden; transition:all .3s ease; }
.overlay.active { opacity:1; visibility:visible; }

/* ── Page hero ── */
.page-hero { position:relative; padding:64px 28px 72px; background:linear-gradient(160deg,#E9F5E2 0%, var(--paper) 62%); border-bottom:1px solid var(--line); overflow:hidden; }
.page-hero-inner { max-width:1080px; margin:0 auto; position:relative; z-index:2; }
.page-hero .hero-glyph { position:absolute; font-family:var(--deva); font-size:clamp(18rem,40vw,34rem); line-height:.8; color:var(--accent); opacity:.07; right:-2%; top:50%; transform:translateY(-50%); z-index:1; pointer-events:none; user-select:none; }
.eyebrow { font-family:var(--mono); font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1.1rem; }
.eyebrow::before { content:""; width:34px; height:1px; background:var(--accent); display:inline-block; }
.page-hero h1 { font-family:var(--display); font-optical-sizing:auto; font-weight:540; font-size:clamp(2.1rem,5vw,3.4rem); line-height:1.05; letter-spacing:-.02em; color:var(--ink); margin-bottom:.5rem; }
.page-hero h1 em { font-style:italic; color:var(--accent); }
.page-hero p.lead { max-width:62ch; font-size:1.06rem; color:var(--ink-soft); }
.breadcrumb { font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:1.4rem; }
.breadcrumb a { color:var(--accent); text-decoration:none; }

.reveal { opacity:0; transform:translateY(16px); animation:rise .7s cubic-bezier(.16,1,.3,1) forwards; }
.d1{animation-delay:.05s}.d2{animation-delay:.13s}.d3{animation-delay:.22s}
@keyframes rise { to { opacity:1; transform:none; } }

/* ── Content container ── */
.container { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:2.6rem; margin:30px auto; max-width:1080px; }
.container.narrow { max-width:860px; }
.container h2 { font-family:var(--display); font-weight:560; font-size:1.6rem; color:var(--ink); margin-bottom:.8rem; letter-spacing:-.01em; border-left:4px solid var(--accent); padding-left:.7rem; }
.container h3 { font-family:var(--display); font-weight:560; font-size:1.14rem; margin:1.3rem 0 .35rem; color:var(--ink); }
.container p { color:var(--ink-soft); margin-bottom:.7rem; }
.container a { font-weight:600; }
.container strong { color:var(--forest); }
.container section { margin-top:2.4rem; padding-top:1.8rem; border-top:1px solid var(--line-2); scroll-margin-top:90px; }
.container section:first-of-type { margin-top:1rem; border-top:none; padding-top:0; }
.container ol, .container ul { margin:.5rem 0 .8rem 1.3rem; color:var(--ink-soft); }
.container ol li, .container ul li { margin-bottom:.5rem; }
.container ol li strong, .container ul li strong { color:var(--ink); }
.updated { font-family:var(--mono); font-size:.72rem; letter-spacing:.05em; color:var(--muted); margin-top:.4rem; }

/* ── Table of contents ── */
.toc { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem 1.4rem; margin-bottom:1.6rem; }
.toc h4 { font-family:var(--mono); font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-bottom:.6rem; }
.toc ul { list-style:none; margin:0; display:flex; flex-wrap:wrap; gap:.4rem .9rem; }
.toc ul li { margin:0; }
.toc ul li a { color:var(--ink-soft); text-decoration:none; font-size:.9rem; font-weight:500; }
.toc ul li a:hover { color:var(--accent); }

/* ── Note / callout ── */
.note { background:var(--paper-2); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:var(--radius); padding:1rem 1.2rem; margin:1.2rem 0; color:var(--ink-soft); font-size:.95rem; }
.note i { color:var(--accent); margin-right:.4rem; }

/* ── Feature / info cards ── */
.cards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.4rem; }
.info-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem; transition:all .25s ease; }
.info-card:hover { border-color:var(--ink); transform:translateY(-3px); box-shadow:var(--shadow); background:var(--card); }
.icon-wrapper { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:var(--paper-2); color:var(--accent); font-size:1.1rem; margin-bottom:1rem; }
.info-card h3 { font-family:var(--display); font-weight:560; font-size:1.08rem; margin:0 0 .35rem; color:var(--ink); }
.info-card p { color:var(--ink-soft); font-size:.92rem; margin:0; }
@media(max-width:820px){ .cards-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .cards-grid{ grid-template-columns:1fr; } }

/* ── Contact form ── */
.cform { display:flex; flex-direction:column; gap:1rem; max-width:620px; }
.cform .row { display:flex; gap:1rem; }
.cform .field { flex:1; display:flex; flex-direction:column; gap:.4rem; }
.cform label { font-weight:600; font-size:.85rem; color:var(--ink-soft); }
.cform input, .cform textarea {
  width:100%; padding:.75rem .9rem; border:1px solid var(--line); border-radius:var(--radius);
  font-family:inherit; font-size:.95rem; background:var(--paper); color:var(--ink);
}
.cform textarea { resize:vertical; min-height:120px; }
.cform input:focus, .cform textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(19,138,92,.13); }
.btn-submit { align-self:flex-start; background:var(--accent); color:#fff; border:none; border-radius:999px; padding:.8rem 1.6rem; font-family:var(--body); font-weight:600; cursor:pointer; font-size:.95rem; display:inline-flex; align-items:center; gap:.5rem; transition:all .2s ease; }
.btn-submit:hover { background:var(--forest); transform:translateY(-2px); }
@media(max-width:560px){ .cform .row{ flex-direction:column; } }

/* ── Contact methods ── */
.contact-methods { display:flex; flex-wrap:wrap; gap:1rem; margin-top:.6rem; }
.contact-method { flex:1; min-width:200px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem; display:flex; gap:.9rem; align-items:flex-start; }
.contact-method .icon-wrapper { margin-bottom:0; flex:none; }
.contact-method h3 { font-family:var(--display); font-weight:560; font-size:1.02rem; margin:0 0 .15rem; }
.contact-method p, .contact-method a { font-size:.9rem; color:var(--ink-soft); margin:0; text-decoration:none; }
.contact-method a:hover { color:var(--accent); }

/* ── FAQ accordion ── */
.faq-list { display:flex; flex-direction:column; gap:.7rem; }
details.faq-item { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
details.faq-item summary { cursor:pointer; list-style:none; padding:1.05rem 1.3rem; font-family:var(--display); font-weight:560; font-size:1.05rem; color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:1rem; }
details.faq-item summary::-webkit-details-marker { display:none; }
details.faq-item summary::after { content:"\f067"; font-family:"Font Awesome 6 Free"; font-weight:900; color:var(--accent); font-size:.85rem; transition:transform .25s ease; }
details.faq-item[open] summary::after { content:"\f068"; }
details.faq-item .faq-body { padding:0 1.3rem 1.2rem; color:var(--ink-soft); }
details.faq-item .faq-body p { margin:0; }

/* ── CTA strip ── */
.cta { text-align:center; background:linear-gradient(135deg, var(--accent), var(--forest)); color:#fff; border-radius:var(--radius); padding:2.6rem 1.5rem; margin:30px auto; max-width:1080px; }
.cta h2 { font-family:var(--display); font-weight:560; font-size:1.7rem; margin-bottom:.5rem; border:none; padding:0; color:#fff; }
.cta p { color:rgba(255,255,255,.85); margin-bottom:1.4rem; }
.cta .btn-cta { background:#fff; color:var(--forest); border-radius:999px; padding:.85rem 1.8rem; font-weight:700; text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; transition:transform .2s ease; }
.cta .btn-cta:hover { transform:translateY(-2px); }

/* ── Comments ── */
.comment.container h2 { border-left:4px solid var(--accent); padding-left:.7rem; }
.comment hr { border:none; border-top:1px solid var(--line-2); margin:1rem 0 1.4rem; }

/* ── Ad slot ── */
.ad-slot { margin:0 auto 22px; text-align:center; width:100%; max-width:970px; overflow:hidden; }

/* ── Footer ── */
.site-footer { background:var(--ink); color:var(--paper); padding:3rem 20px 1.6rem; margin-top:3rem; }
.footer-content-centered { max-width:900px; margin:0 auto; text-align:center; }
.footer-logo-text { font-family:var(--display); font-size:1.5rem; font-weight:560; margin-bottom:1.3rem; }
.footer-nav { display:flex; gap:1.6rem; flex-wrap:wrap; justify-content:center; margin-bottom:1.3rem; }
.footer-nav a { color:rgba(242,247,239,.72); text-decoration:none; font-size:.92rem; transition:color .2s ease; }
.footer-nav a:hover { color:var(--accent-2); }
.footer-disclaimer p { font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; color:rgba(242,247,239,.5); }
.footer-divider { height:1px; background:rgba(242,247,239,.14); margin:1.4rem 0; }
.footer-copyright p { font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; color:rgba(242,247,239,.45); }

/* ── Share modal ── */
.custom-modal { position:fixed; inset:0; background:rgba(20,39,27,.55); z-index:2000; display:none; align-items:center; justify-content:center; padding:1rem; }
.custom-modal.open { display:flex; }
.custom-modal-content { background:var(--card); border:1px solid var(--line); border-radius:8px; max-width:440px; width:100%; box-shadow:var(--shadow); overflow:hidden; }
.custom-modal-header { display:flex; justify-content:space-between; align-items:center; padding:1.1rem 1.3rem; border-bottom:1px solid var(--line-2); }
.custom-modal-title { font-family:var(--display); font-weight:560; font-size:1.15rem; color:var(--ink); }
.btn-close-modal { background:none; border:none; font-size:1.6rem; line-height:1; cursor:pointer; color:var(--muted); }
.custom-modal-body { padding:1.4rem; text-align:center; }
.custom-modal-body p { color:var(--ink-soft); margin:0 0 .6rem; }
.social-share-icons { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin:1rem 0; }
.social-icon { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--paper-2); color:var(--ink); text-decoration:none; transition:all .2s ease; }
.social-icon:hover { background:var(--accent); color:#fff; transform:translateY(-2px); }
.input-group-custom { display:flex; gap:.5rem; margin-top:1rem; }
.form-control-custom { flex:1; padding:.6rem .8rem; border:1px solid var(--line); border-radius:6px; font-family:var(--mono); font-size:.78rem; background:var(--paper); color:var(--ink); }
.btn-copy-custom { background:var(--accent); color:#fff; border:none; border-radius:6px; padding:.6rem 1.1rem; font-family:var(--body); font-weight:600; cursor:pointer; }
.btn-copy-custom:hover { background:var(--forest); }

/* ── Floating char-map button ── */
.btn-char-map { position:fixed; right:18px; bottom:18px; width:54px; height:54px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; font-size:1.2rem; cursor:pointer; box-shadow:var(--shadow); z-index:80; text-decoration:none; transition:all .25s ease; }
.btn-char-map:hover { background:var(--forest); transform:translatey(-2px); }

/* ── Toast ── */
.toast { position:fixed; left:50%; bottom:84px; transform:translateX(-50%) translateY(20px); background:var(--ink); color:var(--paper); padding:.7rem 1.2rem; border-radius:999px; font-size:.85rem; font-weight:600; opacity:0; pointer-events:none; transition:all .3s ease; z-index:2100; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

@media (max-width: 560px) {
  .page-hero { padding:48px 22px 56px; }
  .container { padding:1.5rem; }
}