/* Jurors.com case study page. Copyright (c) 2026 OptimaTech Labs, LLC */
:root{
  --paper:#f4f1ea; --surface:#fbfaf6; --ink:#161b20; --muted:#5b6269; --rule:#d9d3c7;
  --accent:#1f4f8f; --gold:#f5c518; --gold-soft:#fdf3c8; --ok:#2c6b45;
  --night:#121417; --night-2:#1b1f24; --night-ink:#ece7dc; --night-muted:#a3a9ae;
  --shadow:0 24px 60px -28px rgba(22,27,32,.45);
  --display:'Zilla Slab',Georgia,serif; --body:'IBM Plex Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
img{max-width:100%; height:auto; display:block}
h1,h2,h3{margin:0; font-family:var(--display); font-weight:700; letter-spacing:-.01em; line-height:1.05; text-wrap:balance}
p{margin:0}
.wrap{max-width:1180px; margin-inline:auto; padding-inline:clamp(16px,4vw,40px)}
section{padding-block:clamp(56px,8vw,104px); border-top:1px solid var(--rule)}
.eyebrow{font-family:var(--mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.section-head{display:flex; flex-direction:column; gap:12px; margin-bottom:clamp(28px,4vw,48px); max-width:64ch}
.section-head h2{font-size:clamp(2rem,3.8vw,3rem)}
.stamps{display:flex; flex-wrap:wrap; gap:8px}
.stamp{font-family:var(--mono); font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; border:1.5px solid currentColor; border-radius:3px; padding:3px 8px; white-space:nowrap}
.dark{background:var(--night); color:var(--night-ink); border-top-color:var(--night)}
.dark .eyebrow{color:var(--gold)}
.lede{font-size:1.15rem; color:var(--night-muted); max-width:48ch}
.btn{display:inline-block; background:var(--gold); color:var(--ink); text-decoration:none; font-weight:600; padding:14px 26px; border-radius:6px; border:1.5px solid var(--gold)}
.btn:hover{background:#ffd84a}
.btn.ghost{background:transparent; color:var(--night-ink); border-color:rgba(255,255,255,.35)}
.btn.ghost:hover{border-color:var(--night-ink)}
.hero-btns{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}

/* Hero: dark stage, a wall of jurors */
.hero{background:radial-gradient(900px 520px at 80% 35%, rgba(245,197,24,.22), transparent 60%), radial-gradient(700px 400px at 5% 100%, rgba(31,79,143,.35), transparent 60%), var(--night); color:var(--night-ink); padding-block:clamp(56px,8vw,112px)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(28px,5vw,64px); align-items:center}
.hero .eyebrow{color:var(--gold)}
.hero h1{font-size:clamp(2.6rem,5.6vw,4.6rem); margin:14px 0 20px}
.hero h1 em{font-style:italic; font-weight:500; color:var(--gold)}
.hero .lede{margin-bottom:24px}
.hero .stamp{color:var(--night-ink)}
.hero .stamp.lit{color:#7fd19b}
.wall{margin:0}
.wall-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; transform:rotate(-1.2deg)}
.wall-grid img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:8px; box-shadow:0 18px 40px -18px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08); animation:rise .6s both}
.wall-grid img:nth-child(4n+2){transform:translateY(14px)}
.wall-grid img:nth-child(4n+3){transform:translateY(-8px)}
.wall-grid img:nth-child(4n+4){transform:translateY(6px)}
.wall-grid img:nth-child(1){animation-delay:.02s}.wall-grid img:nth-child(2){animation-delay:.06s}.wall-grid img:nth-child(3){animation-delay:.1s}.wall-grid img:nth-child(4){animation-delay:.14s}
.wall-grid img:nth-child(5){animation-delay:.18s}.wall-grid img:nth-child(6){animation-delay:.22s}.wall-grid img:nth-child(7){animation-delay:.26s}.wall-grid img:nth-child(8){animation-delay:.3s}
.wall-grid img:nth-child(9){animation-delay:.34s}.wall-grid img:nth-child(10){animation-delay:.38s}.wall-grid img:nth-child(11){animation-delay:.42s}.wall-grid img:nth-child(12){animation-delay:.46s}
@keyframes rise{from{opacity:0; translate:0 16px}to{opacity:1; translate:0 0}}
@media (prefers-reduced-motion:reduce){.wall-grid img{animation:none}}
.wall figcaption{margin-top:28px; font-size:.8rem; color:var(--night-muted); display:flex; gap:8px; align-items:flex-start}
.ai{font-family:var(--mono); font-size:.65rem; font-weight:500; background:var(--gold); color:var(--ink); border-radius:3px; padding:1px 5px; flex:none; margin-top:2px}

/* Stats */
.stats{padding-block:0; background:var(--gold-soft); border-top:0}
.stat-row{display:grid; grid-template-columns:repeat(4,1fr)}
.stat-row div{padding:28px 20px; border-left:1px solid rgba(22,27,32,.12); display:flex; flex-direction:column; gap:6px}
.stat-row div:first-child{border-left:0}
.stat-row b{font-family:var(--display); font-size:clamp(2.2rem,4vw,3.4rem); line-height:1; color:var(--ink)}
.stat-row small{font-size:.45em; font-weight:600; margin-left:4px; color:var(--muted)}
.stat-row span{font-size:.9rem; color:var(--muted)}

/* Inside a mock trial */
.trial-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.7fr); gap:clamp(20px,4vw,44px); align-items:start}
.steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.steps button{all:unset; box-sizing:border-box; cursor:pointer; width:100%; display:grid; grid-template-columns:auto 1fr; grid-template-areas:"n t" "n d"; gap:2px 16px; padding:16px 18px; background:var(--surface); border:1px solid var(--rule); border-radius:8px; transition:transform .15s, box-shadow .15s, border-color .15s}
.steps button:hover,.steps button:focus-visible{transform:translateY(-2px); box-shadow:var(--shadow)}
.steps button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.steps button[aria-selected="true"]{border-color:var(--ink); box-shadow:inset 4px 0 0 var(--gold), var(--shadow)}
.steps .n{grid-area:n; font-family:var(--display); font-size:1.8rem; font-weight:700; color:#c49a00; line-height:1}
.steps .t{grid-area:t; font-weight:600}
.steps .d{grid-area:d; font-size:.92rem; color:var(--muted)}
.screen{margin:0; position:sticky; top:20px}
.screen img{width:100%; aspect-ratio:8/5; object-fit:cover; object-position:top; border-radius:12px; border:1px solid var(--rule); box-shadow:0 40px 90px -40px rgba(22,27,32,.55); transition:opacity .2s}
.screen img.swap{opacity:.2}
.screen figcaption{margin-top:12px; font-size:.85rem; color:var(--muted)}

/* Built from the county up */
.county{background:var(--gold-soft); border-top:0}
.county-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(28px,5vw,64px); align-items:center}
.county h2{font-size:clamp(2rem,3.8vw,3rem); margin:12px 0 20px}
.county .lede{color:var(--muted)}
.county .lede+.lede{margin-top:14px}
.jcard{background:var(--surface); border-radius:14px; padding:26px 26px 22px; box-shadow:0 40px 80px -36px rgba(22,27,32,.5); border:1px solid var(--rule); transform:rotate(-1deg)}
.jc-no{font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); display:flex; gap:8px; align-items:center}
.jcard h3{font-size:2rem; margin:10px 0 2px}
.jc-job{color:var(--muted); margin-bottom:14px}
.jcard dl{margin:0}
.jcard dl div{display:grid; grid-template-columns:96px 1fr; gap:12px; padding:8px 0; border-top:1px dashed var(--rule); font-size:.93rem}
.jcard dt{font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding-top:3px}
.jcard dd{margin:0}
.jc-today{margin-top:14px; background:var(--ink); color:var(--night-ink); border-radius:8px; padding:14px 16px; font-family:var(--display); font-style:italic; font-size:1.05rem; line-height:1.4}
.jc-today span{display:block; font-family:var(--mono); font-style:normal; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-bottom:6px}

/* Inside every juror: the 13-layer loop */
.mind{background:radial-gradient(800px 500px at 75% 50%, rgba(245,197,24,.16), transparent 60%), var(--night); border-top:0}
.mind-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,64px); align-items:center}
.mind h2{font-size:clamp(2.2rem,4.4vw,3.4rem); margin:12px 0 24px}
.mind h2 em{font-style:italic; font-weight:500; color:var(--gold); display:block}
.pillars{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px}
.pillars li{padding-left:18px; border-left:3px solid var(--gold); color:var(--night-muted); font-size:.98rem}
.pillars b{color:var(--night-ink); display:block; font-size:1.08rem}
.loop{position:relative; aspect-ratio:1; max-width:560px; width:100%; margin-inline:auto}
.loop::before{content:""; position:absolute; inset:7%; border-radius:50%; border:1.5px dashed rgba(245,197,24,.35); animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.core{position:absolute; inset:34%; border-radius:50%; background:radial-gradient(circle, rgba(245,197,24,.28), rgba(245,197,24,.05) 70%); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:12px}
.core b{font-family:var(--display); font-size:clamp(3rem,7vw,5rem); line-height:1; color:var(--gold)}
.core span{font-size:.8rem; color:var(--night-muted); max-width:16ch}
.loop ol{list-style:none; margin:0; padding:0}
.dots li{position:absolute; transform:translate(-50%,-50%); width:clamp(30px,5vw,40px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; background:var(--night-2); border:1.5px solid rgba(255,255,255,.18); font-family:var(--mono); font-size:.8rem; color:var(--night-ink); animation:pulse 7.8s infinite}
.legend{list-style:none; margin:24px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 18px}
.legend li{font-size:.88rem; color:var(--night-muted); padding:4px 8px; border-radius:6px; animation:lit 7.8s infinite}
.legend li span{font-family:var(--mono); font-size:.7rem; color:var(--gold); margin-right:8px}
@keyframes pulse{0%,10%{border-color:#f5c518; background-color:#f5c518; color:#161b20; box-shadow:0 0 24px rgba(245,197,24,.55)}14%,100%{border-color:rgba(255,255,255,.18); background-color:#1b1f24; color:#ece7dc; box-shadow:0 0 0 rgba(245,197,24,0)}}
@keyframes lit{0%,10%{color:#ece7dc; background-color:rgba(245,197,24,.16)}14%,100%{color:#a3a9ae; background-color:rgba(245,197,24,0)}}
@media (prefers-reduced-motion:reduce){.loop::before,.dots li,.legend li{animation:none}}
.dots .l1{left:50.0%; top:7.0%}
.dots .l2{left:70.0%; top:11.9%}
.dots .l3{left:85.4%; top:25.6%}
.dots .l4{left:92.7%; top:44.8%}
.dots .l5{left:90.2%; top:65.2%}
.dots .l6{left:78.5%; top:82.2%}
.dots .l7{left:60.3%; top:91.8%}
.dots .l8{left:39.7%; top:91.8%}
.dots .l9{left:21.5%; top:82.2%}
.dots .l10{left:9.8%; top:65.2%}
.dots .l11{left:7.3%; top:44.8%}
.dots .l12{left:14.6%; top:25.6%}
.dots .l13{left:30.0%; top:11.9%}
.dots .l1,.legend .l1{animation-delay:0.0s}
.dots .l2,.legend .l2{animation-delay:0.6s}
.dots .l3,.legend .l3{animation-delay:1.2s}
.dots .l4,.legend .l4{animation-delay:1.8s}
.dots .l5,.legend .l5{animation-delay:2.4s}
.dots .l6,.legend .l6{animation-delay:3.0s}
.dots .l7,.legend .l7{animation-delay:3.6s}
.dots .l8,.legend .l8{animation-delay:4.2s}
.dots .l9,.legend .l9{animation-delay:4.8s}
.dots .l10,.legend .l10{animation-delay:5.4s}
.dots .l11,.legend .l11{animation-delay:6.0s}
.dots .l12,.legend .l12{animation-delay:6.6s}
.dots .l13,.legend .l13{animation-delay:7.2s}

/* What we built */
.built{border-top:0}
.feat-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; counter-reset:f}
.feat-grid article{position:relative; background:var(--surface); border:1px solid var(--rule); border-radius:10px; padding:24px 22px 22px; counter-increment:f; transition:transform .15s, box-shadow .15s, border-color .15s}
.feat-grid article::before{content:counter(f, decimal-leading-zero); font-family:var(--display); font-weight:700; font-size:1.6rem; color:#c49a00; display:block; margin-bottom:8px}
.feat-grid article:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--ink)}
.feat-grid h3{font-size:1.35rem; margin-bottom:8px}
.feat-grid p{color:var(--muted); font-size:.95rem}

/* Receipt */
.receipt-band{border-top:0}
.receipt-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,64px); align-items:center}
.receipt-grid h2{font-size:clamp(2rem,3.8vw,3rem); margin:12px 0 20px}
.receipt-grid .lede+.lede{margin-top:14px}
.receipt{margin:0; background:var(--surface); color:var(--ink); border-radius:12px; padding:22px 24px; box-shadow:0 40px 90px -30px rgba(245,197,24,.35); transform:rotate(1deg); font-size:.9rem}
.receipt div{display:grid; grid-template-columns:110px 1fr; gap:12px; padding:8px 0; border-top:1px dashed var(--rule)}
.receipt dt{font-family:var(--mono); font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; padding-top:2px}
.receipt dd{margin:0; font-family:var(--mono); font-size:.8rem; overflow-wrap:anywhere}
.receipt .r-head{display:flex; justify-content:space-between; border-top:0; font-family:var(--display); font-size:1.3rem; font-weight:700; padding-top:0}
.receipt .ok{color:var(--ok); font-family:var(--mono); font-size:.8rem; border:1.5px solid currentColor; border-radius:3px; padding:2px 8px; align-self:center}
.receipt .r-said{grid-template-columns:1fr}
.receipt .r-said dd{font-family:var(--body); font-size:.95rem; background:var(--paper); border-radius:6px; padding:10px 12px}

/* Under the hood */
.hood{border-top:1px solid rgba(255,255,255,.08)}
.hood-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.1); border-radius:10px; overflow:hidden}
.hood-grid article{background:var(--night-2); padding:26px 24px}
.hood-grid article:first-child{background:linear-gradient(135deg, rgba(245,197,24,.2), var(--night-2) 70%)}
.hood-grid h3{font-size:1.35rem; margin-bottom:10px}
.hood-grid p{color:var(--night-muted); font-size:.95rem}

/* Why */
.why-grid{display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(24px,5vw,64px); align-items:start}
.why-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px}
.why-list li{padding-left:22px; border-left:3px solid var(--gold); color:var(--muted)}
.why-list b{color:var(--ink); display:block; font-size:1.1rem}

/* CTA */
.cta{background:radial-gradient(700px 300px at 50% 0%, rgba(245,197,24,.28), transparent 70%), var(--night)}
.cta-inner{text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px}
.cta h2{font-size:clamp(2.2rem,4.6vw,3.6rem)}
.cta p{color:var(--night-muted); font-size:1.1rem}
.cta .hero-btns{justify-content:center; margin-top:8px}

/* Top bar and footer */
.topbar{background:var(--night); border-bottom:1px solid rgba(255,255,255,.08)}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; gap:16px; padding-block:14px}
.wordmark{display:inline-flex; align-items:center; gap:10px; font-weight:600; color:var(--night-ink); text-decoration:none}
.topbar-link{font-size:.9rem; color:var(--night-muted); text-decoration:none}
.topbar-link:hover{color:var(--night-ink)}
.foot{padding-block:28px; font-size:.85rem; color:var(--muted); border-top:1px solid var(--rule)}
.foot a{color:var(--accent)}

@media (max-width:860px){
  .hero-grid,.why-grid,.trial-grid,.receipt-grid,.county-grid,.mind-grid{grid-template-columns:1fr}
  .feat-grid{grid-template-columns:1fr}
  .jcard{transform:none}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .stat-row div:nth-child(3){border-left:0}
  .hood-grid{grid-template-columns:1fr}
  .screen{position:static; order:-1}
  .trial-grid .steps{order:1}
  .receipt{transform:none}
}
@media (max-width:480px){
  .legend{grid-template-columns:1fr}
  .wall-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wall-grid img:nth-child(n+10){display:none}
  .receipt div{grid-template-columns:1fr; gap:2px}
}