/* ============================================================
   EVIDENT — public marketing site
   Loaded after evident.css (docs/05-design-language.md tokens).
   Reuses Ákotí tokens/reset/.icon/.brick from evident.css; this file
   only adds the marketing-specific type scale, nav, hero, pillars,
   Ẹ̀rí panel, pricing, changelog and form components.
   ============================================================ */

body{overflow-x:hidden;}

/* ---- type scale ---- */
.eyebrow{font:600 0.75rem/1.3 var(--font-body);letter-spacing:0.06em;text-transform:uppercase;color:var(--navy);}
.display-xl{font:400 clamp(2.5rem,4.6vw,4rem)/1.05 var(--font-display);color:var(--ink);}
.display-l{font:420 2.25rem/1.1 var(--font-display);color:var(--ink);}
.h1{font:600 1.875rem/1.15 var(--font-brand);}
.h2{font:600 1.5rem/1.2 var(--font-brand);}
.h3{font:600 1.25rem/1.25 var(--font-brand);}
.body-txt{font:400 1rem/1.55 var(--font-body);color:var(--ink);}

/* ---- layout ---- */
.band{width:100%;}
.band-100{background:var(--paper-100);}
.band-200{background:var(--paper-200);}
.wrap{max-width:var(--content-max);margin:0 auto;padding:0 var(--sp-6);}
.page-hero{padding-bottom:var(--sp-16);}

/* ---- nav ---- */
.nav-band{position:sticky;top:0;z-index:40;background:rgba(251,250,246,0.92);
  border-bottom:1px solid var(--paper-300);}
.nav{max-width:var(--content-max);margin:0 auto;padding:0 var(--sp-6);height:72px;
  display:flex;align-items:center;justify-content:space-between;}
.wordmark{display:flex;align-items:center;gap:var(--sp-2);}
.wordmark-text{font:600 1.375rem/1 var(--font-brand);color:var(--navy);letter-spacing:-0.01em;}
.logomark{width:34px;height:34px;flex:none;}
.nav-links{display:flex;align-items:center;gap:var(--sp-8);}
.nav-links a{font:500 0.9375rem/1 var(--font-body);color:var(--ink);opacity:0.82;}
.nav-links a:hover{opacity:1;color:var(--navy);}
.nav-cta{display:inline-flex;align-items:center;gap:var(--sp-2);padding:10px 18px;border:1.5px solid var(--navy);
  border-radius:var(--radius-field);font:500 0.875rem/1 var(--font-body);color:var(--navy);white-space:nowrap;
  transition:background .15s ease,color .15s ease;}
.nav-cta:hover{background:var(--navy);color:var(--color-primary-content);}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:var(--sp-2);padding:14px 26px;font:600 0.9375rem/1 var(--font-body);
  border:1.5px solid transparent;transition:border-radius .18s ease,transform .15s ease,background .15s ease;}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--navy);color:var(--color-primary-content);border-radius:var(--radius-brick);}
.btn-primary:hover{background:var(--navy-press,#152751);}
.btn-outline{background:transparent;color:var(--navy);border:1.5px solid var(--navy);border-radius:var(--radius-field);}
.btn-outline:hover{background:var(--navy);color:var(--color-primary-content);}
.cta-row{display:flex;gap:var(--sp-4);flex-wrap:wrap;align-items:center;}

/* ---- hero ---- */
.hero-band{padding-top:var(--sp-16);padding-bottom:var(--sp-16);}
.hero-grid{display:grid;grid-template-columns:1.02fr 0.98fr;gap:var(--sp-12);align-items:center;}
.hero-copy .display-xl{margin:var(--sp-4) 0;}
.hero-copy .lede{max-width:34rem;margin-bottom:var(--sp-8);font-size:1.0625rem;line-height:1.6;color:rgba(30,30,36,0.8);}
.hero-note{margin-top:var(--sp-4);display:flex;align-items:center;gap:var(--sp-2);}
.hero-note .icon{color:var(--status-ontrack);width:16px;height:16px;}
.hero-note span{font:400 0.8125rem/1.4 var(--font-body);color:rgba(30,30,36,0.62);}

.product-frame{position:relative;background:var(--paper-100);border:1px solid var(--paper-300);
  border-radius:var(--radius-brick);box-shadow:var(--shadow-engrave-strong);padding:var(--sp-6) var(--sp-6) var(--sp-16);}
.ledger-lines{position:absolute;inset:14px;background-image:repeating-linear-gradient(to bottom,var(--paper-300) 0 1px,transparent 1px 28px);
  opacity:0.55;pointer-events:none;border-radius:inherit;}
.frame-inner{position:relative;z-index:1;}
.frame-chrome{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--sp-4);
  margin-bottom:var(--sp-4);border-bottom:1px solid var(--paper-300);}
.frame-ws{font:600 0.8125rem/1.2 var(--font-brand);color:var(--ink);}
.frame-ws span{display:block;font:400 0.6875rem/1.3 var(--font-body);color:var(--ink-soft,rgba(30,30,36,0.64));margin-top:2px;}
.period-pill{background:var(--paper-200);border:1px solid var(--paper-300);border-radius:var(--radius-pill);
  padding:5px 12px;font:500 0.6875rem/1 var(--font-body);color:var(--navy);}
.indicator-card{background:var(--paper-100);border:1px solid var(--paper-300);border-radius:var(--radius-card);
  padding:var(--sp-4);box-shadow:var(--shadow-engrave);}
.indicator-head{display:flex;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-3);}
.indicator-code{font:500 0.6875rem/1.3 var(--font-mono);color:var(--navy);background:var(--paper-200);
  border-radius:4px;padding:2px 6px;display:inline-block;margin-bottom:4px;}
.indicator-title{font:500 0.875rem/1.35 var(--font-body);color:var(--ink);max-width:15rem;}
.indicator-target{font:400 0.6875rem/1.4 var(--font-body);color:rgba(30,30,36,0.64);margin-top:2px;}
.rag-chip{display:inline-flex;align-items:center;gap:5px;background:rgba(46,125,87,0.06);border:1px solid rgba(46,125,87,0.35);
  border-radius:var(--radius-pill);padding:4px 10px;white-space:nowrap;height:fit-content;}
.rag-chip .icon{width:12px;height:12px;color:var(--status-ontrack);}
.rag-chip span{font:600 0.6875rem/1 var(--font-body);color:var(--status-ontrack);}
.progress-track{height:8px;background:var(--paper-200);border-radius:var(--radius-pill);overflow:hidden;
  box-shadow:var(--shadow-engrave);margin-bottom:var(--sp-3);}
.progress-fill{height:100%;background:var(--navy);border-radius:var(--radius-pill);}
.chip-row{display:flex;gap:var(--sp-2);flex-wrap:wrap;}
.ev-chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--paper-300);background:var(--paper-200);
  border-radius:var(--radius-chip);padding:4px 9px;}
.ev-chip .icon{width:12px;height:12px;color:var(--navy);}
.ev-chip span{font:500 0.6875rem/1 var(--font-body);color:var(--ink);}
.seal-rosette{position:absolute;right:-16px;bottom:-18px;width:100px;height:100px;z-index:2;transform:rotate(-8deg);}
.seal-ring{position:absolute;inset:0;border-radius:50%;background:var(--bronze);border:1.5px solid var(--paper-100);
  display:flex;align-items:center;justify-content:center;}
.seal-ring .icon{width:30px;height:30px;color:var(--color-secondary-content);}
.seal-caption{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);text-align:center;white-space:nowrap;}
.seal-caption .label{display:block;font:600 0.75rem/1.2 var(--font-brand);color:var(--bronze);letter-spacing:0.03em;}
.seal-caption .who{display:block;font:400 0.625rem/1.4 var(--font-body);color:rgba(30,30,36,0.64);margin-top:2px;}

/* ---- section heads ---- */
.sec-head{max-width:40rem;margin-bottom:var(--sp-12);}
.sec-head .display-l{margin:var(--sp-3) 0;}
.sec-head p{color:rgba(30,30,36,0.72);font-size:1rem;line-height:1.6;}
.sec-head.centered{margin-left:auto;margin-right:auto;text-align:center;}

/* ---- pillars ---- */
.pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6);}
.pillar-card{background:var(--paper-100);border:1px solid var(--paper-300);border-radius:var(--radius-card);
  padding:var(--sp-6);box-shadow:var(--shadow-engrave);}
.pillar-icon{width:44px;height:44px;border-radius:var(--radius-field);background:var(--paper-200);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-4);}
.pillar-icon .icon{width:22px;height:22px;color:var(--navy);}
.pillar-card h3{margin-bottom:var(--sp-2);}
.pillar-card p{color:rgba(30,30,36,0.72);font-size:0.9375rem;line-height:1.55;}
.pillar-tag{display:inline-block;margin-top:var(--sp-4);font:600 0.6875rem/1 var(--font-body);letter-spacing:0.04em;
  text-transform:uppercase;color:var(--bronze);}

/* ---- eri ---- */
.eri-panel{background:var(--eri-tint);border:1px solid var(--paper-300);
  border-left:3px solid var(--eri-rule);border-radius:var(--radius-card);padding:var(--sp-12);}
.eri-head{display:flex;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-6);}
.eri-mark{width:52px;height:52px;flex:none;border-radius:var(--radius-field);background:var(--paper-100);
  border:1px solid var(--paper-300);display:flex;align-items:center;justify-content:center;}
.eri-mark .icon{width:26px;height:26px;color:var(--bronze);}
.eri-head h2{font:400 2rem/1.1 var(--font-display);}
.eri-head span{display:block;font:500 0.8125rem/1.4 var(--font-body);color:rgba(30,30,36,0.62);margin-top:4px;}
.eri-lede{max-width:44rem;color:rgba(30,30,36,0.78);font-size:1rem;line-height:1.6;margin-bottom:var(--sp-8);}
.eri-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);margin-bottom:var(--sp-8);}
.eri-cap{background:var(--paper-100);border:1px solid var(--paper-300);border-radius:var(--radius-card);padding:var(--sp-4);}
.eri-cap .icon-wrap{width:34px;height:34px;border-radius:var(--radius-field);background:var(--paper-200);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-3);}
.eri-cap .icon-wrap .icon{width:17px;height:17px;color:var(--navy);}
.eri-cap h3{font-size:1rem;margin-bottom:6px;}
.eri-cap p{font-size:0.875rem;color:rgba(30,30,36,0.7);line-height:1.5;}
.eri-callout{display:flex;align-items:center;gap:var(--sp-3);background:var(--paper-100);border:1px solid var(--paper-300);
  border-radius:var(--radius-field);padding:var(--sp-4) var(--sp-6);}
.eri-callout .icon{width:20px;height:20px;color:var(--bronze);flex:none;}
.eri-callout p{font:500 0.9375rem/1.5 var(--font-body);color:var(--ink);}
.eri-callout strong{color:var(--bronze);}

/* ---- configurability ---- */
.config-grid{display:grid;grid-template-columns:2fr 3fr;gap:var(--sp-12);align-items:start;}
.config-copy p{color:rgba(30,30,36,0.75);font-size:1rem;line-height:1.6;margin-bottom:var(--sp-4);}
.config-copy .quiet-example{background:var(--paper-100);border:1px solid var(--paper-300);border-radius:var(--radius-field);
  padding:var(--sp-4);font-size:0.875rem;color:rgba(30,30,36,0.7);}
.config-copy .quiet-example b{color:var(--navy);}
.template-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);}
.template-card{background:var(--paper-100);border:1px solid var(--paper-300);border-radius:var(--radius-card);
  padding:var(--sp-4);box-shadow:var(--shadow-engrave);}
.template-card .icon-wrap{width:36px;height:36px;border-radius:var(--radius-field);background:var(--paper-200);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-3);}
.template-card .icon-wrap .icon{width:18px;height:18px;color:var(--bronze);}
.template-card h3{font-size:1rem;margin-bottom:4px;}
.template-card p{font-size:0.8125rem;color:rgba(30,30,36,0.65);line-height:1.45;}

/* ---- pricing ---- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6);margin-bottom:var(--sp-8);}
.price-card{position:relative;background:var(--paper-100);border:1px solid var(--paper-300);border-radius:var(--radius-card);
  padding:var(--sp-8) var(--sp-6);box-shadow:var(--shadow-engrave);display:flex;flex-direction:column;}
.price-card.featured{border-color:var(--bronze);box-shadow:0 0 0 1px var(--bronze),var(--shadow-engrave);}
.price-badge{position:absolute;top:-13px;left:var(--sp-6);background:var(--navy);color:var(--color-primary-content);
  font:600 0.6875rem/1 var(--font-body);letter-spacing:0.04em;text-transform:uppercase;padding:5px 12px;border-radius:var(--radius-pill);}
.price-icon{width:40px;height:40px;border-radius:var(--radius-field);background:var(--paper-200);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-4);}
.price-icon .icon{width:20px;height:20px;color:var(--navy);}
.price-tier{font:600 1.125rem/1.2 var(--font-brand);margin-bottom:2px;}
.price-for{font-size:0.8125rem;color:rgba(30,30,36,0.64);margin-bottom:var(--sp-4);}
.price-amount{display:flex;align-items:baseline;gap:6px;margin-bottom:var(--sp-1);}
.price-amount .num{font:600 2rem/1 var(--font-brand);font-feature-settings:var(--num-tabular);color:var(--ink);}
.price-amount .per{font-size:0.875rem;color:rgba(30,30,36,0.64);}
.price-anchor-note{font-size:0.75rem;color:rgba(30,30,36,0.64);margin-bottom:var(--sp-6);}
.price-features{display:flex;flex-direction:column;gap:10px;margin-bottom:var(--sp-6);flex:1;}
.price-features li{display:flex;align-items:flex-start;gap:8px;font-size:0.875rem;color:rgba(30,30,36,0.8);line-height:1.4;}
.price-features .icon{width:15px;height:15px;color:var(--status-ontrack);flex:none;margin-top:2px;}
.price-cta{width:100%;justify-content:center;}
.pricing-foot{display:flex;flex-wrap:wrap;gap:var(--sp-6);justify-content:space-between;align-items:center;
  border-top:1px solid var(--paper-300);padding-top:var(--sp-6);}
.pricing-note{display:flex;align-items:center;gap:var(--sp-2);}
.pricing-note .icon{width:16px;height:16px;color:var(--navy);}
.pricing-note span{font-size:0.875rem;color:rgba(30,30,36,0.7);}

/* ---- changelog ---- */
.changelog-list{display:flex;flex-direction:column;gap:var(--sp-8);max-width:44rem;}
.changelog-entry{border-bottom:1px solid var(--paper-300);padding-bottom:var(--sp-6);}
.changelog-date{font:600 0.75rem/1 var(--font-mono);color:var(--bronze);}
.changelog-entry h3{margin:var(--sp-2) 0 var(--sp-2);}
.changelog-entry p{color:rgba(30,30,36,0.75);line-height:1.6;}

/* ---- demo form ---- */
.demo-form{max-width:32rem;margin-top:var(--sp-8);display:flex;flex-direction:column;gap:var(--sp-4);}
.form-row{display:flex;flex-direction:column;gap:6px;}
.form-row label{font:500 0.8125rem/1.3 var(--font-body);color:var(--ink);}
.form-row input,.form-row textarea{font:400 0.9375rem/1.4 var(--font-body);padding:10px 12px;
  border:1px solid var(--paper-300);border-radius:var(--radius-field);background:var(--paper-100);color:var(--ink);}
.form-row input:focus,.form-row textarea:focus{outline:2px solid var(--navy);outline-offset:1px;}
.form-errors{background:rgba(180,50,43,0.08);border:1px solid var(--status-off);border-radius:var(--radius-field);
  padding:var(--sp-3) var(--sp-4);color:var(--status-off);font-size:0.875rem;}

/* ---- final cta ---- */
.final-band{background:var(--navy);position:relative;overflow:hidden;}
.final-band .ledger-lines{background-image:repeating-linear-gradient(to bottom,rgba(251,250,246,0.08) 0 1px,transparent 1px 30px);
  opacity:1;inset:0;}
.final-inner{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-8);flex-wrap:wrap;}
.final-inner h2{font:400 2rem/1.15 var(--font-display);color:var(--color-primary-content);max-width:28rem;}
.final-inner p{color:rgba(244,247,252,0.72);margin-top:var(--sp-3);max-width:26rem;}
.final-band .btn-primary{background:var(--bronze);color:var(--color-secondary-content);}
.final-band .btn-outline{color:var(--color-primary-content);border-color:rgba(244,247,252,0.5);}
.final-band .btn-outline:hover{background:rgba(244,247,252,0.12);color:var(--color-primary-content);}

/* ---- footer ---- */
.footer-band{background:var(--ink);color:var(--color-neutral-content);}
.footer-top{display:flex;justify-content:space-between;gap:var(--sp-12);flex-wrap:wrap;padding-bottom:var(--sp-8);
  margin-bottom:var(--sp-8);border-bottom:1px solid rgba(236,234,227,0.14);}
.footer-brand .wordmark-text{color:var(--color-neutral-content);}
.footer-brand p{margin-top:var(--sp-3);max-width:22rem;font-size:0.875rem;color:rgba(236,234,227,0.62);line-height:1.55;}
.footer-cols{display:flex;gap:var(--sp-16);}
.footer-col h4{font:600 0.75rem/1.3 var(--font-body);letter-spacing:0.05em;text-transform:uppercase;
  color:rgba(236,234,227,0.5);margin-bottom:var(--sp-3);}
.footer-col a{display:block;font-size:0.875rem;color:rgba(236,234,227,0.78);margin-bottom:10px;}
.footer-col a:hover{color:var(--baby);}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-3);}
.footer-bottom span{font-size:0.8125rem;color:rgba(236,234,227,0.5);}

/* ---- responsive ---- */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;}
  .pillar-grid{grid-template-columns:1fr;}
  .eri-grid{grid-template-columns:1fr;}
  .config-grid{grid-template-columns:1fr;}
  .price-grid{grid-template-columns:1fr;}
  .footer-cols{gap:var(--sp-8);}
  .seal-rosette{right:6px;}
}
@media (max-width:720px){
  .nav-links{display:none;}
  .final-inner{flex-direction:column;align-items:flex-start;}
  .footer-top{flex-direction:column;}
}