/* EVA Legal landing page. Exported from the Claude Design canvas. */

/* ---- design tokens ---- */
:root{
  --accent:#7B1E2B;          /* oxblood: buttons, highlights, verified marks */
  --accent-on-dark:#E3A1AA;  /* accent on the dark ink background */
  --accent-soft:#E8DBD7;     /* tinted chip background */
  --highlight:#E8CF8E;       /* gold: underline sweep, quote highlights */
  --ink:#17110F; --ink-2:#221A18; --on-dark:#F1ECE6; --on-dark-2:#B3A7A2;
  --paper:#F4F0EA; --band:#ECE6DD; --card:#FBF9F5; --line:#E3DDD4;
  --text-2:#544A46; --text-3:#6E625C;
}

/* ---- toggled blocks (were conditional blocks in the design file) ---- */
.sw{display:contents}
.sw.is-off{display:none !important}

/* ---- stepper state ---- */
.stepbtn{background:rgba(251,249,245,0);border:1px solid rgba(204,194,181,.6);box-shadow:none}
.stepbtn[aria-pressed="true"]{background:#FBF9F5;border-color:#CCC2B5;box-shadow:0 16px 32px -24px rgba(23,17,15,.45)}
.stepnum{background:transparent;color:#17110F;border:1px solid #17110F}
.stepbtn[aria-pressed="true"] .stepnum{background:var(--accent);color:#FFFFFF;border-color:var(--accent)}
.stepbar{display:none}
.how-auto .stepbtn[aria-pressed="true"] .stepbar{display:block}

/* ---- FAQ state ---- */
.faqbtn[aria-expanded="true"] .faqi{transform:rotate(45deg)}

/* ---- citation network state (set from main.js) ---- */
.netnode{transition:background-color .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease}

/* ---- page styles ---- */
body{margin:0;background:#17110F}
h1,h2{text-wrap:balance}
*{box-sizing:border-box}
a{color:inherit}
::selection{background:#E8CF8E;color:#17110F}
.btn-p{transition:background-color .16s ease}
.btn-p:hover{background:#2E2421 !important}
.btn-l{transition:background-color .16s ease}
.btn-l:hover{background:#FFFFFF !important}
.btn-a .arr{transition:transform .2s ease}
.btn-a:hover .arr{transform:translateX(4px)}
.lnk{transition:color .16s ease}
.lnk:hover{color:#17110F !important}
.lnk-d{transition:color .16s ease}
.lnk-d:hover{color:#FFFFFF !important}
.netnode:hover{border-color:#17110F !important}
.netnode:focus-visible{outline:2px solid #17110F;outline-offset:2px}
.card-h{transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.card-h:hover{border-color:#C9BFB2 !important;transform:translateY(-3px);box-shadow:0 18px 36px -24px rgba(23, 17, 15, .45) !important}
.stepbtn{transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease}
.stepbtn:hover{border-color:#BFB4A7 !important}
.faqbtn .faqq{transition:color .16s ease}
.faqbtn:hover .faqq{color:#17110F !important}
.faqbtn .faqi{transition:transform .25s ease}
.fan .pg{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.fan:hover .pg1{transform:translate(-36px,10px) rotate(-6deg) !important}
.fan:hover .pg2{transform:translate(0,-6px) rotate(0deg) !important}
.fan:hover .pg3{transform:translate(36px,10px) rotate(6deg) !important}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{opacity:0;transform:scale(.55)}70%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
@keyframes sweep{from{background-size:0% 100%}to{background-size:100% 100%}}
@keyframes mark{from{background-size:0% .5em}to{background-size:100% .5em}}
@keyframes uline{from{background-size:0% .09em}to{background-size:100% .09em}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes vanish{to{opacity:0;visibility:hidden}}
@keyframes ink{from{color:#6E625C}to{color:#17110F}}
@keyframes blink{50%{opacity:0}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(227, 161, 170, .6)}70%{box-shadow:0 0 0 9px rgba(227, 161, 170, 0)}100%{box-shadow:0 0 0 0 rgba(227, 161, 170, 0)}}
@keyframes pulse2{0%{box-shadow:0 0 0 0 rgba(23, 17, 15, .35)}70%{box-shadow:0 0 0 12px rgba(23, 17, 15, 0)}100%{box-shadow:0 0 0 0 rgba(23, 17, 15, 0)}}
@keyframes progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes travel{0%{transform:translateX(0)}75%{transform:translateX(100%)}100%{transform:translateX(100%)}}
@keyframes glow{0%,32%,100%{background-color:#FBF9F5}6%,20%{background-color:currentColor}}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes wave{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
@keyframes flowIn{to{stroke-dashoffset:16}}
@keyframes flowOut{to{stroke-dashoffset:-16}}
@keyframes cite{0%{left:50%;top:50%;opacity:0;transform:translate(-50%,-50%) scale(.4)}15%{opacity:1;transform:translate(-50%,-50%) scale(1)}85%{opacity:1}100%{left:var(--x0);top:var(--y0);opacity:0;transform:translate(-50%,-50%) scale(.6)}}
@keyframes newcite{0%,10%{opacity:0;transform:translate(-50%,-50%) scale(.7)}18%,70%{opacity:1;transform:translate(-50%,-50%) scale(1)}82%,100%{opacity:0;transform:translate(-50%,-50%) scale(.92)}}
@keyframes newline{0%,10%{opacity:0}18%,70%{opacity:1}82%,100%{opacity:0}}
.flow-in{stroke-dasharray:3 5;animation:flowIn 1.4s linear infinite}
.flow-out{stroke-dasharray:4 4;animation:flowOut 1.4s linear infinite}
.newline{stroke-dasharray:3 5;animation:newline 7s ease-in-out infinite,flowOut 1.4s linear infinite}
.cite-dot{position:absolute;width:8px;height:8px;border-radius:4px;opacity:0;transform:translate(-50%,-50%);animation:cite 3s cubic-bezier(.45,0,.55,1) infinite}
.newcite{animation:newcite 7s ease-in-out infinite}
@keyframes type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.a-rise{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.a-fade{animation:fade .6s ease both}
.a-pop{animation:pop .45s cubic-bezier(.2,.7,.2,1) both}
.a-sweep{background-repeat:no-repeat;background-position:0 0;animation:sweep .7s cubic-bezier(.3,.6,.2,1) both}
.a-mark{background-repeat:no-repeat;background-position:0 92%;animation:mark .7s cubic-bezier(.3,.6,.2,1) both}
.a-uline{background-repeat:no-repeat;background-position:0 94%;animation:uline 1s cubic-bezier(.3,.6,.2,1) both}
.a-grow{transform-origin:0 50%;animation:grow .7s cubic-bezier(.3,.6,.2,1) both}
.a-ink{animation:ink .3s ease both}
.a-type{animation:type 1.8s steps(36) both}
.spinvan{animation:spin .9s linear infinite,vanish .15s ease forwards}
.a-blink{animation:blink 1s steps(1) infinite}
.a-pulse{animation:pulse 2.2s ease-out infinite}
.a-pulse2{animation:pulse2 2.4s ease-out infinite}
.a-progress{transform-origin:0 50%;animation:progress 6.5s linear both}
.a-wave{transform-origin:50% 100%;animation:wave 1.1s ease-in-out infinite}
.a-wave:nth-child(2n){animation-delay:-.35s;animation-duration:.95s}
.a-wave:nth-child(3n){animation-delay:-.7s;animation-duration:1.25s}
.a-travel{animation:travel 4s linear infinite}
.a-glow{animation:glow 4s linear infinite}
@supports (animation-timeline: view()){
.rv{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 75%}
.net{view-timeline-name:--net}
.sd-line{animation:fade linear both;animation-timeline:--net;animation-range:entry 30% entry 90%}
.sd-pop{animation:pop linear both;animation-timeline:--net;animation-range:entry 55% entry 100%}
.ver{view-timeline-name:--ver}
.sv-pop{animation:pop linear both;animation-timeline:--ver;animation-range:entry 40% entry 100%}
}
.courtdoc{height:500px;box-sizing:border-box;display:flex;flex-direction:column}
.docview{flex:1;min-height:0;overflow:hidden;-webkit-mask-image:linear-gradient(#000 84%,transparent);mask-image:linear-gradient(#000 84%,transparent)}
.docscroll{animation:docscroll 4.2s cubic-bezier(.45,0,.25,1) 1.5s both}
@keyframes docscroll{from{transform:translateY(0)}to{transform:translateY(calc(436px - 100%))}}
@keyframes docscrollm{from{transform:translateY(0)}to{transform:translateY(calc(432px - 100%))}}
.win-doc{display:flex;flex-direction:column}
.win-page{flex:1 1 auto;width:100%;height:0;min-height:600px !important;display:flex;flex-direction:column}
.heroview{flex:1;min-height:0;overflow:hidden;container-type:size;-webkit-mask-image:linear-gradient(#000 86%,transparent);mask-image:linear-gradient(#000 86%,transparent)}
.heroscroll{animation:heroscroll 12s cubic-bezier(.45,0,.3,1) 5.6s both}
@keyframes heroscroll{from{transform:translateY(0)}to{transform:translateY(calc(100cqh - 100%))}}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation:none !important;transition:none !important}
.spinvan{display:none !important}
}
@media (max-width: 1180px){
.win{grid-template-columns:280px minmax(0,1fr) !important}
.win-src{display:none !important}
.bento{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.bento .big{grid-column:span 2 !important;grid-row:span 1 !important}
}
@media (max-width: 860px){
.win{grid-template-columns:minmax(0,1fr) !important}
.win-chat{display:none !important}
.win-src{display:flex !important;border-left:none !important;border-top:1px solid #E3DDD4}
.win-doc{padding:16px 16px 0 !important}
.win-page{padding:28px 22px 32px !important;min-height:0 !important;height:560px !important}
.crumbs .hide-md{display:none !important}
}
@media (max-width: 760px){
.wrap{padding-left:20px !important;padding-right:20px !important}
.sec{padding-top:72px !important;padding-bottom:72px !important}
.navlinks{display:none !important}
.hide-sm{display:none !important}
.bento{grid-template-columns:minmax(0,1fr) !important}
.bento .big,.bento .wide{grid-column:span 1 !important}
.split{gap:40px !important}
.stage{min-height:0 !important;padding:16px !important}
.courtdoc{padding:22px 18px 26px !important;height:480px}
.docscroll{animation-name:docscrollm}
.net .netnode{font-size:11.5px !important;padding:4px 8px !important}
.net .a-pop{font-size:10.5px !important;padding:2px 6px !important}
.net .a-pulse2{font-size:15px !important;padding:6px 11px !important}
.net .kid-s{transform:translate(-22%,-50%) !important}
.net .kid-e{transform:translate(-78%,-50%) !important}
}

@media(max-width:360px){header .btn-l{white-space:normal!important;max-width:100%;font-size:12px!important;padding-inline:9px!important;}header>div{min-width:0;}}