/* ==========================================================================
   Jurisbooks marketing site — shared stylesheet
   Design system matches the approved Jurisbooks brand identity:
   Ledger Ink / Brass / Greenbar palette, Source Serif 4 + IBM Plex Sans/Mono.
   ========================================================================== */

:root{
  --ink: #16213A;
  --ink-soft: #48546E;
  --paper: #ECEEE4;
  --paper-shade: #D5D9C4;
  --paper-shade-2: #C7CCB4;
  --card: #F4F5EE;
  --rule: rgba(22,33,58,0.16);
  --rule-strong: rgba(22,33,58,0.4);
  --brass: #93701F;
  --brass-strong: #7A5C18;
  --green: #2E6B4C;
  --green-bg: #E4EBE1;
  --accent: var(--brass);
  --shadow: 0 18px 40px -20px rgba(22,33,58,0.28);
}
@media (prefers-color-scheme: dark){
  :root{
    --ink: #ECE9D8;
    --ink-soft: #ABB4CC;
    --paper: #10162A;
    --paper-shade: #182036;
    --paper-shade-2: #202B47;
    --card: #161E34;
    --rule: rgba(236,233,216,0.14);
    --rule-strong: rgba(236,233,216,0.38);
    --brass: #CFA34E;
    --brass-strong: #E4BC6C;
    --green: #4C9970;
    --green-bg: #16281F;
    --accent: var(--brass);
    --shadow: 0 18px 40px -20px rgba(0,0,0,0.6);
  }
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit;}
::selection{background:var(--accent); color:var(--paper);}

.mono{font-family:'IBM Plex Mono','Courier New',monospace;}
h1,h2,h3,h4{
  font-family:'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-weight:600;
  line-height:1.15;
  text-wrap:balance;
  margin:0 0 .5em;
  color:var(--ink);
}
p{margin:0 0 1em;}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  display:inline-block;
  margin-bottom:14px;
}

.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 clamp(20px,4vw,48px);
}
.section{padding:clamp(56px,8vw,104px) 0;}
.section-border-top{border-top:1px solid var(--rule);}
.section-head{max-width:60ch; margin-bottom:44px;}
.section-head p{color:var(--ink-soft); font-size:1.05rem;}

.double-rule{
  height:6px;
  background:
    linear-gradient(var(--ink),var(--ink)) 0 0/100% 1.5px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 0 100%/100% 1.5px no-repeat;
  opacity:.8;
}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 26px;
  font-family:'IBM Plex Sans',sans-serif;
  font-weight:600;
  font-size:.95rem;
  text-decoration:none;
  border-radius:3px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--ink); color:var(--paper);}
.btn-primary:hover{box-shadow:var(--shadow);}
.btn-outline{background:transparent; color:var(--ink); border-color:var(--rule-strong);}
.btn-outline:hover{border-color:var(--ink);}

/* ---- Header / Nav ---- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0;
}
.brand{
  display:flex; align-items:center; gap:9px;
  font-family:'Source Serif 4',serif;
  font-weight:600;
  font-size:1.3rem;
  text-decoration:none;
  color:var(--ink);
}
.brand svg{width:26px;height:26px;color:var(--accent);}
.brand .rupee-tick{color:var(--accent); font-weight:500;}

.nav-links{display:flex; align-items:center; gap:32px; list-style:none; margin:0; padding:0;}
.nav-links a{
  text-decoration:none;
  font-size:.92rem;
  font-weight:500;
  color:var(--ink-soft);
}
.nav-links a:hover, .nav-links a.active{color:var(--ink);}
.nav-cta{display:flex; align-items:center; gap:20px;}
.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:6px;}
.nav-toggle svg{width:26px;height:26px;color:var(--ink);}

@media (max-width:820px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    background:var(--paper);
    border-bottom:1px solid var(--rule);
    flex-direction:column; align-items:flex-start; gap:0;
    padding:8px 0;
    display:none;
  }
  .nav-links.open{display:flex;}
  .nav-links li{width:100%;}
  .nav-links a{display:block; padding:14px clamp(20px,4vw,48px); width:100%;}
  .nav-toggle{display:block;}
  .nav-cta .btn-outline{display:none;}
}

/* ---- Hero ---- */
.hero{padding:clamp(64px,10vw,120px) 0 clamp(48px,7vw,88px);}
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(32px,5vw,64px);
  align-items:center;
}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr;} }
.hero h1{font-size:clamp(2.4rem,5vw,3.6rem); max-width:15ch;}
.hero .lede{font-size:1.15rem; color:var(--ink-soft); max-width:48ch; margin-bottom:32px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:36px;}
.hero-proof{
  display:flex; gap:28px; flex-wrap:wrap;
  padding-top:24px; border-top:1px solid var(--rule);
}
.hero-proof .item{display:flex; flex-direction:column; gap:2px;}
.hero-proof .num{font-family:'IBM Plex Mono',monospace; font-weight:600; color:var(--accent); font-size:1.1rem;}
.hero-proof .label{font-size:.78rem; color:var(--ink-soft);}

.hero-visual{
  aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink);
  border-radius:6px;
  position:relative;
  overflow:hidden;
}
.hero-visual svg{width:46%;height:46%;}
.hero-visual .rules{
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(
    to bottom, transparent, transparent 43px, rgba(236,233,216,0.06) 43px, rgba(236,233,216,0.06) 44px
  );
}

/* ---- Trust strip ---- */
.trust-strip{
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:22px 0;
}
.trust-strip .container{
  display:flex; gap:clamp(16px,4vw,40px); flex-wrap:wrap; justify-content:space-between;
}
.trust-item{display:flex; align-items:center; gap:10px; font-size:.85rem; color:var(--ink-soft);}
.trust-item svg{width:18px;height:18px; color:var(--green); flex:0 0 auto;}

/* ---- Privacy block (major focus) ---- */
.privacy{
  background:var(--ink);
  color:var(--paper);
}
.privacy .eyebrow{color:var(--brass);}
.privacy h2, .privacy p{color:var(--paper);}
.privacy .lede{color:#C7CCB4; font-size:1.1rem;}
.privacy-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px);
  margin-top:40px;
}
@media (max-width:820px){ .privacy-grid{grid-template-columns:1fr;} }
.privacy-point{
  display:flex; gap:16px;
  padding-top:22px; border-top:1px solid rgba(236,233,216,0.18);
}
.privacy-point svg{width:26px;height:26px;flex:0 0 auto;color:var(--brass); margin-top:2px;}
.privacy-point h3{color:var(--paper); font-size:1.05rem; margin-bottom:6px;}
.privacy-point p{color:#B7BFD4; font-size:.92rem; margin-bottom:0;}

/* ---- Feature grid ---- */
.feature-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--rule); border:1px solid var(--rule);
}
@media (max-width:900px){ .feature-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .feature-grid{grid-template-columns:1fr;} }
.feature-card{background:var(--paper); padding:30px 26px;}
.feature-card svg{width:30px;height:30px;color:var(--accent); margin-bottom:16px;}
.feature-card h3{font-size:1.05rem; margin-bottom:8px;}
.feature-card p{font-size:.9rem; color:var(--ink-soft); margin-bottom:0;}

/* ---- Feature detail rows (features.html) ---- */
.feature-row{
  display:grid; grid-template-columns:280px 1fr; gap:clamp(20px,4vw,48px);
  padding:38px 0; border-top:1px solid var(--rule);
}
@media (max-width:760px){ .feature-row{grid-template-columns:1fr; gap:14px;} }
.feature-row h3{font-size:1.2rem;}
.feature-row .tag{
  font-family:'IBM Plex Mono',monospace; font-size:.68rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent); margin-bottom:8px; display:block;
}
.feature-row ul{margin:14px 0 0; padding-left:20px; color:var(--ink-soft); font-size:.92rem; line-height:1.8;}
.feature-row ul li::marker{color:var(--accent);}

/* ---- Testimonials (placeholder, clearly marked) ---- */
.placeholder-banner{
  background:var(--green-bg);
  border:1px dashed var(--green);
  color:var(--green);
  font-family:'IBM Plex Mono',monospace;
  font-size:.78rem;
  padding:12px 18px;
  border-radius:3px;
  margin-bottom:32px;
}
.testimonial-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
@media (max-width:900px){ .testimonial-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:620px){ .testimonial-grid{grid-template-columns:1fr;} }
.testimonial-card{
  background:var(--card);
  border:1px solid var(--rule);
  padding:26px 24px;
  display:flex; flex-direction:column; gap:16px;
}
.testimonial-card .quote{font-family:'Source Serif 4',serif; font-style:italic; font-size:1.05rem; line-height:1.5; color:var(--ink);}
.testimonial-card .who{font-size:.82rem; color:var(--ink-soft); font-family:'IBM Plex Mono',monospace;}

/* ---- Pillars / numbered rows ---- */
.pillars{border-top:1px solid var(--rule);}
.pillar-row{
  display:grid; grid-template-columns:80px 1fr; gap:24px;
  padding:30px 0; border-bottom:1px solid var(--rule);
}
.pillar-row .idx{font-family:'IBM Plex Mono',monospace; color:var(--accent); font-size:.85rem; padding-top:4px;}
.pillar-row h3{font-size:1.1rem; margin-bottom:6px;}
.pillar-row p{color:var(--ink-soft); margin-bottom:0; max-width:60ch;}

/* ---- CTA band ---- */
.cta-band{
  background:var(--paper-shade);
  text-align:center;
}
.cta-band h2{max-width:20ch; margin-left:auto; margin-right:auto;}
.cta-band p{max-width:50ch; margin-left:auto; margin-right:auto; color:var(--ink-soft);}
.cta-band .hero-ctas{justify-content:center;}

/* ---- Contact page ---- */
.contact-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px);
}
@media (max-width:820px){ .contact-grid{grid-template-columns:1fr;} }
.contact-card{
  background:var(--card); border:1px solid var(--rule); padding:28px;
  display:flex; flex-direction:column; gap:6px;
}
.contact-card .label{font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent);}
.contact-card .value{font-size:1.15rem; font-weight:600;}
.contact-card .value a{text-decoration:none; border-bottom:1px solid var(--rule-strong);}
.contact-list{display:flex; flex-direction:column; gap:16px;}

/* ---- About page ---- */
.about-lede{font-size:1.25rem; max-width:56ch; color:var(--ink); line-height:1.6;}
.timeline{border-top:1px solid var(--rule);}
.timeline-row{
  display:grid; grid-template-columns:140px 1fr; gap:24px;
  padding:26px 0; border-bottom:1px solid var(--rule);
}
@media (max-width:600px){ .timeline-row{grid-template-columns:1fr; gap:6px;} }
.timeline-row .when{font-family:'IBM Plex Mono',monospace; color:var(--ink-soft); font-size:.85rem;}
.timeline-row h4{font-size:1rem; margin-bottom:4px;}
.timeline-row p{color:var(--ink-soft); font-size:.9rem; margin-bottom:0;}

/* ---- Footer ---- */
.site-footer{
  border-top:1px solid var(--rule);
  padding:48px 0 32px;
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px;
  margin-bottom:36px;
}
@media (max-width:700px){ .footer-grid{grid-template-columns:1fr; gap:28px;} }
.footer-brand .brand{margin-bottom:12px;}
.footer-brand p{color:var(--ink-soft); font-size:.88rem; max-width:34ch;}
.footer-col h4{font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:14px;}
.footer-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.footer-col a{text-decoration:none; font-size:.9rem; color:var(--ink);}
.footer-col a:hover{color:var(--accent);}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  padding-top:24px; border-top:1px solid var(--rule);
  font-size:.78rem; color:var(--ink-soft);
  font-family:'IBM Plex Mono',monospace;
}