/* ============================================================
   VAJRA — landing styles
   Brand: Mayura Green / Paper / Ink · Playfair + Plex Mono + Inter
   ============================================================ */

:root{
  --green:#075E54;
  --deep:#043D36;
  --paper:#F3F0E8;
  --paper-2:#FBF9F4;
  --paper-dim:#D8D3C4;
  --ink:#0B0B12;
  --gold:#E8A33D;
  --tint:#7FD9C8;
  --ok:#1F9D6B;
  --err:#C93A2E;

  --font-display:"Playfair Display",Georgia,serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --font-body:"Inter",system-ui,sans-serif;

  --wrap:1160px;
  --pad:clamp(20px,5vw,64px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  font-size:16px;line-height:1.6;
  color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

/* ---------- type voices ---------- */
.display{
  font-family:var(--font-display);font-weight:600;
  text-transform:uppercase;letter-spacing:.01em;line-height:1.02;
  font-size:clamp(38px,5.4vw,66px);
}
.display.xl{font-size:clamp(42px,6.4vw,84px)}
/* small lead line above the big highlight line */
.display .lead{
  display:block;font-size:.42em;line-height:1.3;
  letter-spacing:.08em;opacity:.88;margin-bottom:.4em;
}
.mono,.eyebrow,.beat,.btn,.link-mono{
  font-family:var(--font-mono);font-weight:500;
  text-transform:uppercase;letter-spacing:.16em;
}
.eyebrow{font-size:12px;opacity:.85;margin-bottom:20px}
.beat{font-size:13px;letter-spacing:.2em;margin-bottom:18px}
.support{
  font-size:clamp(16px,1.6vw,19px);line-height:1.6;
  max-width:56ch;margin-top:22px;
}
.support strong{font-weight:600}

/* ---------- surfaces ---------- */
.on-green{background:var(--green);color:var(--paper)}
.on-ink{background:var(--ink);color:var(--paper)}
.on-paper{background:var(--paper);color:var(--ink)}
.on-paper2{background:var(--paper-2);color:var(--ink)}
.on-ink .eyebrow.tint,.tint{color:var(--tint)}
.on-ink a:not(.btn),.on-green a:not(.btn){color:inherit}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.wrap.narrow{max-width:880px}
.wrap.center{text-align:center}
.section{padding:clamp(72px,10vh,118px) 0;position:relative}
figure{margin-top:clamp(28px,5vh,48px)}

/* ---------- buttons & links ---------- */
.btn{
  display:inline-block;border:1px solid currentColor;
  padding:14px 28px;font-size:13px;text-decoration:none;
  border-radius:2px;transition:background .18s,color .18s;cursor:pointer;
  text-indent:.16em; /* optically recentre mono text (trailing letter-space) */
  line-height:1.2;
}
a.btn-paper,button.btn-paper{background:var(--paper);color:var(--green);border-color:var(--paper)}
.btn-paper:hover{background:var(--paper-2)}
.btn-paper:active{color:var(--deep)}
.nav-links a.btn-paper{background:var(--paper);color:var(--green)}
.btn-lg{padding:18px 40px;font-size:14px}
.on-paper a.btn-paper,.on-paper2 a.btn-paper,.on-paper button.btn-paper,.on-paper2 button.btn-paper{background:var(--green);color:var(--paper);border-color:var(--green)}
.on-paper .btn-paper:hover,.on-paper2 .btn-paper:hover{background:var(--deep);color:var(--paper)}
.link-mono{font-size:13px;color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}
.link-mono:hover{opacity:.75}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.cta-row{display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin-top:40px}
.cta-row.center,.hero .cta-row,.page-hero .cta-row{justify-content:center}

/* ---------- launch banner ---------- */
.banner{
  display:block;background:var(--ink);color:var(--paper);
  text-align:center;padding:11px var(--pad);
  font-size:10px;letter-spacing:.24em;line-height:1.5;
  text-decoration:none;
}
.banner .tint{color:var(--tint)}
.banner:hover .tint{border-bottom:1px solid var(--tint)}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--pad);
  background:var(--green);color:var(--paper);
  border-bottom:1px solid rgba(243,240,232,.22);
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.wordmark{
  font-family:var(--font-display);font-weight:600;
  letter-spacing:.07em;font-size:19px;text-transform:uppercase;
}
.nav-links{display:flex;align-items:center;gap:34px}
.nav-links a{
  font-family:var(--font-mono);font-weight:500;font-size:12px;
  letter-spacing:.18em;text-decoration:none;color:inherit;
}
.nav-links a:not(.btn):hover{opacity:.75}
.nav-links .btn{padding:10px 20px;font-size:12px}
.nav-toggle{display:none;background:none;border:1px solid var(--paper);color:var(--paper);padding:8px 14px;font-size:11px;cursor:pointer;border-radius:2px}

/* ---------- hero ---------- */
.hero{
  min-height:calc(100svh - 101px); /* nav + launch banner */
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;position:relative;overflow:hidden;
  padding:100px var(--pad) 80px;
}
.charge{position:absolute;pointer-events:none;overflow:visible}
html:not(.js) .charge{display:none}
.hero-inner{position:relative;max-width:1000px}
.hero-eyebrow{
  font-size:11px;letter-spacing:.28em;opacity:.6;margin-bottom:34px;
}
.hero-star{margin-bottom:42px}
.hero-h1{
  font-size:clamp(44px,9.5vw,132px);
  line-height:.98;letter-spacing:.01em;
  display:flex;flex-direction:column;
}
.hero-h1 span:not(.lead){white-space:nowrap}
.hero-h1 .lead{
  font-size:clamp(17px,2.4vw,32px);line-height:1.4;
  letter-spacing:.14em;opacity:.9;margin-bottom:.9em;
}
.hero-h1 .safely{position:relative;display:inline-block;align-self:center}
.hero-h1 .safely::after{
  content:"";position:absolute;left:.02em;right:.34em;bottom:-.05em;height:.035em;
  min-height:3px;background:var(--paper);transform:scaleX(0);transform-origin:left;
  transition:transform .9s cubic-bezier(.2,.8,.2,1) .9s;
}
.js .in .safely::after,html:not(.js) .safely::after{transform:scaleX(1)}
.clarifier{
  font-size:clamp(16px,1.8vw,20px);line-height:1.55;
  max-width:52ch;margin:34px auto 0;opacity:.95;
}
.scroll-cue{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  font-size:11px;letter-spacing:.22em;opacity:.55;
}

/* star breath + spark pulse */
.hero-star{animation:breathe 9s ease-in-out infinite}
.spark{animation:sparkpulse 4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:rotate(0deg) scale(1)}50%{transform:rotate(4deg) scale(1.04)}}
@keyframes sparkpulse{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes linepulse{0%,100%{stroke-opacity:1}50%{stroke-opacity:.4}}

/* current flowing outward along charge lines (dash period = 2+26 = 28) */
@keyframes dashflow{to{stroke-dashoffset:-28}}
/* data leaking outward along dashed lines (dash period = 4+8 = 12) */
@keyframes leakflow{to{stroke-dashoffset:-12}}
.flow{animation:leakflow 1.1s linear infinite}

/* ---------- svg diagrams ---------- */
.diagram{width:100%;height:auto;display:block;max-width:860px;margin:0 auto}
.svg-mono{font-family:var(--font-mono);font-size:15px;letter-spacing:.14em;font-weight:500}
.svg-mono.sm{font-size:12px}

/* draw-on-scroll strokes */
.js .draw .dl{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s ease .25s}
.js .draw .dl.slow{transition-duration:2.2s}
.js .in .draw .dl{stroke-dashoffset:0}

/* ---------- reveals ---------- */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease;transition-delay:calc(var(--i,0)*110ms)}
.js .in .rv{opacity:1;transform:none}

/* ---------- section specifics ---------- */
.tension .display{font-size:clamp(42px,6.6vw,84px)}
.problem .support,.turn .support{opacity:.92}

/* 2×2 map */
.quad-wrap{margin-top:clamp(36px,6vh,64px)}
.quad{position:relative;max-width:760px;margin:0 auto}
.pt{
  position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  background:none;border:none;cursor:pointer;padding:10px;
}
.pt .dot{width:16px;height:16px;border:2px solid var(--ink);border-radius:50%;background:var(--paper);display:block;transition:background .15s}
.pt:hover .dot,.pt:focus-visible .dot,.pt.is-active .dot{background:var(--ink)}
.pt-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;font-weight:500;color:var(--ink);white-space:nowrap}
.pt-label.strong{font-size:13px}
.pt-vajra{padding:6px}
.pt-vajra svg{transition:transform .2s}
.pt-vajra:hover svg,.pt-vajra:focus-visible svg{transform:scale(1.12)}
.quad-note{
  max-width:760px;margin:26px auto 0;text-align:center;
  font-size:12px;letter-spacing:.14em;line-height:1.8;
  border-top:1px solid var(--paper-dim);padding-top:20px;min-height:64px;
}

/* pillars */
.pillars-intro{padding:clamp(36px,5vh,56px) 0 0;text-align:center}
.pillars-intro .eyebrow{margin-bottom:0}
.pillar .split{
  display:grid;grid-template-columns:1.1fr 1fr;
  gap:clamp(36px,6vw,90px);align-items:center;
}
.pillar-art{margin-top:0}
.pillar-safety{padding:clamp(84px,12vh,140px) 0}
.pillar .display.xl{font-size:clamp(34px,4.6vw,58px)}
.chip-list{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.chip-list li{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;font-weight:500;
  border:1px solid var(--tint);color:var(--tint);
  padding:8px 14px;border-radius:2px;
}

/* credits meter (gold = cost only) */
.meter-card{
  background:var(--ink);color:var(--paper);
  padding:36px;border-radius:4px;max-width:440px;margin:0 auto;
  border:1px solid var(--deep);
}
.meter-label{font-size:11px;letter-spacing:.2em;opacity:.75}
.meter-num{font-size:clamp(40px,4.4vw,56px);letter-spacing:.04em;color:var(--gold);margin:10px 0 18px;font-weight:500}
.meter-bar{height:8px;background:rgba(243,240,232,.14);border-radius:2px;overflow:hidden}
.meter-bar.sm{height:5px;flex:1}
.meter-fill{display:block;height:100%;background:var(--gold);width:0;transition:width 1.6s cubic-bezier(.2,.8,.2,1) .3s}
.in .meter-fill,html:not(.js) .meter-fill{width:var(--w)}
.meter-rows{margin-top:24px;display:flex;flex-direction:column;gap:12px}
.meter-row{display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:.14em}
.meter-row>.mono:first-child{width:52px;opacity:.8}
.meter-row .pct{color:var(--gold)}
.meter-foot{margin-top:26px;font-size:10px;letter-spacing:.2em;opacity:.65}

/* trust strip */
.trust{padding:clamp(56px,8vh,90px) 0;border-top:1px solid var(--paper-dim);border-bottom:1px solid var(--paper-dim)}
.trust-row{display:flex;gap:26px;align-items:baseline;margin-bottom:22px;flex-wrap:wrap}
.trust-row:last-child{margin-bottom:0}
.trust-tag{font-size:11px;letter-spacing:.2em;white-space:nowrap}
.trust-tag.ok{color:var(--ok)}
.trust-items{font-size:12px;letter-spacing:.12em;line-height:2;font-weight:400}
.trust-items.dim{opacity:.6}

/* social proof */
.proof{text-align:center}
.logo-row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.logo-slot{
  border:1px dashed var(--paper-dim);color:var(--paper-dim);
  padding:22px 34px;font-size:10px;letter-spacing:.2em;
}
.quote{max-width:640px;margin:56px auto 0}
.quote p{font-size:clamp(17px,1.8vw,21px);line-height:1.6;font-style:italic;color:var(--ink);opacity:.75}
.quote cite{display:block;margin-top:18px;font-size:11px;letter-spacing:.2em;font-style:normal;opacity:.6}
.quote-claim{margin-top:26px;font-style:normal}
.quote-claim .link-mono{font-size:12px}

/* final cta */
.final{overflow:hidden;text-align:center;padding:clamp(96px,14vh,160px) 0}
.final .display .dim{opacity:.8}
.final .hero-star{margin-bottom:42px}
.hero-star.charged{animation-duration:6s}

/* footer */
.footer{padding:64px 0 40px}
.foot-grid{display:grid;grid-template-columns:auto 1fr;gap:18px 40px;align-items:center}
.foot-brand{display:flex;align-items:center;gap:12px}
.foot-links{display:flex;gap:28px;justify-content:flex-end;flex-wrap:wrap}
.foot-links a{font-size:11px;letter-spacing:.18em;text-decoration:none;color:var(--paper);opacity:.8}
.foot-links a:hover{opacity:1}
.foot-maker{grid-column:1/-1;font-size:11px;letter-spacing:.14em;opacity:.75;border-top:1px solid rgba(243,240,232,.15);padding-top:26px;margin-top:12px}
.foot-maker a{color:var(--tint);text-decoration:none;border-bottom:1px solid var(--tint)}
.foot-legal{grid-column:1/-1;font-size:10px;letter-spacing:.18em;opacity:.45}
.foot-policy{grid-column:1/-1;display:flex;gap:24px;flex-wrap:wrap}
.foot-policy a{font-size:10px;letter-spacing:.16em;text-decoration:none;color:var(--paper);opacity:.55;border-bottom:1px solid rgba(243,240,232,.3)}
.foot-policy a:hover{opacity:.85}

/* ---------- inner-page hero ---------- */
.page-hero{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;min-height:62svh;
  padding:90px var(--pad) 80px;
}
.page-hero .hero-star{margin-bottom:30px}
.page-hero .eyebrow{font-size:11px;letter-spacing:.28em;opacity:.6;margin-bottom:28px}
.page-hero .clarifier{margin-top:26px}

/* ---------- pricing tiers ---------- */
.note-strip{
  text-align:center;padding:18px var(--pad);
  border-bottom:1px solid var(--paper-dim);
  font-size:11px;letter-spacing:.2em;color:var(--ink);opacity:.6;
}
.tiers{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:24px;margin-top:clamp(36px,6vh,60px);align-items:stretch;
}
.tier{
  background:var(--paper-2);border:1px solid var(--paper-dim);
  border-radius:4px;padding:36px 32px;display:flex;flex-direction:column;
}
.tier.featured{border:2px solid var(--green)}
.tier-name{font-family:var(--font-mono);font-size:12px;letter-spacing:.22em;font-weight:500}
.tier-badge{
  display:inline-block;font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;
  background:var(--green);color:var(--paper);padding:5px 10px;border-radius:2px;
  margin-left:10px;vertical-align:2px;
}
.tier-price{
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  font-size:clamp(30px,3vw,40px);margin:20px 0 4px;
}
.tier-price .per{font-size:14px;font-family:var(--font-mono);letter-spacing:.14em;opacity:.6}
.tier-note{font-size:13px;color:var(--ink);opacity:.65;margin-bottom:22px}
.tier ul{list-style:none;margin:0 0 30px;display:flex;flex-direction:column;gap:12px}
.tier li{
  font-size:14px;line-height:1.5;padding-left:22px;position:relative;
}
.tier li::before{content:"—";position:absolute;left:0;color:var(--green)}
.tier li.soon{opacity:.55}
.tier li.soon::before{content:"○"}
.tier .btn{margin-top:auto;text-align:center}

/* ---------- demo page ---------- */
.demo-split{
  display:grid;grid-template-columns:1.45fr 1fr;
  gap:clamp(32px,5vw,72px);align-items:start;
  margin-top:clamp(36px,6vh,60px);
}
.demo-cal{
  background:var(--paper-2);border:1px solid var(--paper-dim);
  border-radius:4px;padding:14px;
}
.demo-alt{font-size:10px;letter-spacing:.16em;opacity:.55;text-align:center;padding:14px 0 6px}
.demo-form{
  background:var(--paper-2);border:1px solid var(--paper-dim);
  border-radius:4px;padding:36px 32px;
  display:flex;flex-direction:column;gap:18px;
}
.demo-form label{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;display:block;margin-bottom:8px}
.demo-form input{
  width:100%;font-family:var(--font-body);font-size:15px;padding:12px 14px;
  border:1px solid var(--paper-dim);background:var(--paper);border-radius:2px;color:var(--ink);
}
.demo-form input:focus{outline:2px solid var(--green);outline-offset:1px}
.expect{display:flex;flex-direction:column;gap:28px}
.expect-item{border-top:1px solid var(--paper-dim);padding-top:22px}
.expect-item .beat{margin-bottom:10px}
.expect-item p{font-size:15px;max-width:44ch}

/* ---------- legal pages ---------- */
.legal .wrap{max-width:820px}
.legal-updated{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;opacity:.6;margin:14px 0 44px}
.legal h2{
  font-family:var(--font-mono);font-size:13px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--green);
  margin:44px 0 14px;
}
.legal p,.legal li{font-size:15px;line-height:1.7;margin-bottom:12px;max-width:72ch}
.legal ul{list-style:none;margin:0 0 14px;padding:0}
.legal li{padding-left:20px;position:relative}
.legal li::before{content:"—";position:absolute;left:0;color:var(--green)}
.legal a{color:var(--green)}

/* ---------- cta band ---------- */
.cta-band{position:relative;overflow:hidden;text-align:center;padding:clamp(80px,12vh,130px) 0}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .pillar .split{grid-template-columns:1fr;gap:44px}
  .pillar-art{order:2}
  .foot-grid{grid-template-columns:1fr}
  .foot-links{justify-content:flex-start}
  .tiers{grid-template-columns:1fr}
  .demo-split{grid-template-columns:1fr}
}
@media (max-width:640px){
  .nav-toggle{display:block}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--green);border-bottom:1px solid rgba(243,240,232,.22);
    padding:10px var(--pad) 22px;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 0;width:100%}
  .nav-links .btn{margin-top:10px;text-align:center}
  .quad-note{min-height:90px}
  .pt-label{font-size:9px}
  .logo-slot{padding:16px 20px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
  .js .draw .dl{stroke-dashoffset:0}
  .meter-fill{width:var(--w)}
  .js .safely::after{transform:scaleX(1)}
}