/* ============================================================
   Legal-Tech — the quiet, serious page.
   Borrowed principles, not borrowed pages (harvey.ai):
   · monochrome restraint; a serif statement split against a short line;
   · product windows floating on ink-wash, stone-textured panels;
   · an agent working through a task list, done steps struck through;
   · figures as a ruled table — label left, a large serif number right;
   · a dark privacy band with line-drawn badges, and a dark close.
   Textures are generated (SVG turbulence), not photographs.
   ============================================================ */

:root{
  --lg-stone:#ECEAE5;
  --lg-stone-2:#E2DFD8;
  --lg-deep:#17211E;
  --lg-deep-2:#0F1614;
  --lg-ok:#0F6B45;
  --lg-flag:#B5651D;
  --lg-mark:rgba(181,101,29,.16);
  --m:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* ink wash: low-frequency fractal noise, tinted green-black */
  --lg-wash:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='700' height='700'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.008 .014' numOctaves='5' seed='11' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .66  0 0 0 0 .6  0 0 0 .75 -.18'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --lg-grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .09 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
}
:root[data-theme="dark"]{
  --lg-stone:#161917;
  --lg-stone-2:#1C201D;
  --lg-ok:#22A876;
  --lg-flag:#E9A56B;
  --lg-mark:rgba(233,165,107,.18);
}

/* ---------- type ---------- */
.lg-display{font-family:var(--d);font-weight:400;letter-spacing:-.025em;line-height:.98;
  font-size:clamp(3rem,6.8vw,6rem);color:var(--ink);text-wrap:balance}
.lg-display em,.lg-h2 em,.lg-quote em{font-style:italic;color:var(--soft)}
.lg-h2{font-family:var(--d);font-weight:400;letter-spacing:-.02em;line-height:1.02;
  font-size:clamp(2.4rem,5vw,4.3rem);color:var(--ink);text-wrap:balance}
.lg-kicker{font-family:var(--m);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.lg-kicker b{color:var(--ink);font-weight:500}
.lg-lead{font-size:clamp(1.12rem,1.6vw,1.32rem);color:var(--soft);line-height:1.6;max-width:42ch}
.lg-sec{padding-block:clamp(5.5rem,11vw,10rem)}
.lg-btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--s);font-size:.98rem;font-weight:600;
  padding:.85rem 1.4rem;border-radius:6px;border:1px solid var(--ink);transition:transform .2s,background .2s,color .2s}
.lg-btn.fill{background:var(--ink);color:var(--cream)}
.lg-btn.fill:hover{transform:translateY(-2px)}
.lg-btn.line{color:var(--ink);border-color:var(--line)}
.lg-btn.line:hover{border-color:var(--ink)}
.lg-btn .a{transition:transform .2s}.lg-btn:hover .a{transform:translateX(3px)}

/* ---------- textured panels ---------- */
.lg-wash{position:relative;overflow:hidden;border-radius:6px;
  background:var(--lg-wash) 0 0/700px 700px,radial-gradient(120% 90% at 20% 10%,#2A3833 0%,#17211E 55%,#0E1513 100%);
  animation:lgDrift 60s linear infinite}
@keyframes lgDrift{to{background-position:700px 280px,0 0}}
.lg-wash::after{content:'';position:absolute;inset:0;background:var(--lg-grain);pointer-events:none;mix-blend-mode:overlay}

/* ---------- 1 · split header + hero panel ---------- */
.lg-hero{padding-top:clamp(7.5rem,11vw,9.5rem)}
.lg-split{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(2rem,5vw,5rem);align-items:end}
@media(max-width:900px){.lg-split{grid-template-columns:1fr}}
.lg-split .lg-lead{margin-bottom:1.6rem}
.lg-tag{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--m);font-size:.78rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--faint);margin-bottom:1.6rem}
.lg-tag::before{content:'';width:7px;height:7px;border-radius:50%;border:1.5px solid var(--faint)}
.lg-stage{margin-top:clamp(2.5rem,5vw,4rem);padding:clamp(2rem,5vw,4.5rem) clamp(1rem,5vw,4.5rem) 0;min-height:30rem}
.lg-app{position:relative;z-index:1;display:grid;grid-template-columns:13rem 1fr;max-width:1060px;margin:0 auto;
  background:var(--paper);border-radius:10px 10px 0 0;overflow:hidden;box-shadow:0 -10px 60px -20px rgba(0,0,0,.5);
  color:var(--ink)}
@media(max-width:820px){.lg-app{grid-template-columns:1fr}.lg-app-side{display:none}}
.lg-app-side{border-right:1px solid var(--line);padding:1.1rem .9rem;background:var(--lg-stone)}
.lg-app-side b{display:block;font-family:var(--d);font-size:1.35rem;margin-bottom:1rem}
.lg-app-side span{display:block;font-family:var(--s);font-size:.86rem;color:var(--soft);padding:.45rem .6rem;border-radius:6px}
.lg-app-side span.on{background:var(--paper);color:var(--ink);font-weight:600}
.lg-app-side small{display:block;margin:1.1rem 0 .4rem .6rem;font-family:var(--m);font-size:.64rem;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.lg-app-main{padding:clamp(1.1rem,2.4vw,1.7rem)}
.lg-app-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.6rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.lg-app-head h3{font-family:var(--d);font-weight:400;font-size:clamp(1.4rem,2.4vw,1.9rem)}
.lg-app-head em{font-style:normal;font-family:var(--m);font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.lg-app-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:1.2rem;margin-top:1.2rem}
@media(max-width:820px){.lg-app-grid{grid-template-columns:1fr}}
.lg-progress small,.lg-clause small{display:block;font-family:var(--m);font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);margin-bottom:.7rem}
.lg-tasks{list-style:none;display:flex;flex-direction:column;gap:.15rem}
.lg-task{display:grid;grid-template-columns:1.4rem 1fr;gap:.6rem;align-items:start;padding:.55rem 0;font-family:var(--s);
  font-size:.98rem;line-height:1.4;color:var(--faint);transition:color .4s}
.lg-task i{width:1.15rem;height:1.15rem;border-radius:50%;border:1.5px solid var(--line);margin-top:.12rem;position:relative;transition:all .35s}
.lg-task.run{color:var(--ink)}
.lg-task.run i{border-color:var(--ink);border-top-color:transparent;animation:lgSpin .9s linear infinite}
@keyframes lgSpin{to{transform:rotate(360deg)}}
.lg-task.done{color:var(--faint);text-decoration:line-through;text-decoration-color:var(--faint)}
.lg-task.done i{border-color:var(--lg-ok);background:var(--lg-ok)}
.lg-task.done i::after{content:'';position:absolute;left:.33rem;top:.14rem;width:.28rem;height:.55rem;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.lg-bar{margin-top:.9rem;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.lg-bar i{display:block;height:100%;width:0;background:var(--ink);transition:width .8s cubic-bezier(.2,.8,.2,1)}
.lg-clause{border:1px solid var(--line);border-radius:8px;padding:1rem 1.1rem;background:var(--lg-stone)}
.lg-clause p{font-family:var(--d);font-size:1.12rem;line-height:1.55;color:var(--ink)}
.lg-clause mark{background:transparent;color:inherit;border-radius:3px;transition:background .6s,box-shadow .6s}
.lg-clause.flagged mark{background:var(--lg-mark);box-shadow:0 0 0 3px var(--lg-mark)}
.lg-flag{display:flex;gap:.6rem;align-items:flex-start;margin-top:.9rem;padding:.7rem .8rem;border-radius:6px;
  border-left:3px solid var(--lg-flag);background:var(--paper);font-family:var(--s);font-size:.9rem;line-height:1.45;color:var(--soft);
  opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s}
.lg-clause.flagged .lg-flag{opacity:1;transform:none}
.lg-flag b{color:var(--lg-flag)}
.lg-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--line)}
.lg-chips span{font-family:var(--s);font-size:.78rem;color:var(--soft);padding:.25rem .6rem;border-radius:4px;border:1px solid var(--line)}
.lg-chips span::before{content:'●';color:var(--lg-ok);margin-right:.35rem;font-size:.6rem;vertical-align:.1em}

/* ---------- 2 · the figures, as a ruled table ---------- */
.lg-table{margin-top:clamp(2.5rem,5vw,3.5rem);border-top:1px solid var(--ink)}
.lg-row{position:relative;display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;
  padding:clamp(1.4rem,2.8vw,2.1rem) 0}
.lg-row::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.4,0,.2,1);transition-delay:calc(var(--i) * 140ms)}
.in .lg-row::after{transform:scaleX(1)}
.lg-row p{font-family:var(--s);font-size:clamp(1.12rem,1.6vw,1.34rem);color:var(--soft);line-height:1.45;max-width:30ch}
.lg-row b{font-family:var(--d);font-weight:400;letter-spacing:-.02em;line-height:.9;font-size:clamp(3.4rem,8vw,6.4rem);
  color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.lg-src{margin-top:1.1rem;font-family:var(--m);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}

/* ---------- 3 · challenges: a list that changes the panel beside it ---------- */
.lg-cwrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,5vw,5rem);align-items:start;margin-top:clamp(2.5rem,5vw,3.5rem)}
@media(max-width:900px){.lg-cwrap{grid-template-columns:1fr}}
.lg-list{list-style:none;border-top:1px solid var(--line)}
.lg-list li{border-bottom:1px solid var(--line)}
.lg-list button{width:100%;background:none;border:0;cursor:pointer;text-align:left;padding:1.6rem 0 1.3rem;
  font-family:var(--d);font-weight:400;font-size:clamp(1.9rem,3.3vw,2.8rem);line-height:1.02;letter-spacing:-.015em;color:var(--faint);transition:color .3s}
.lg-list button:hover,.lg-list li.open button{color:var(--ink)}
.lg-list .body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s ease}
.lg-list li.open .body{grid-template-rows:1fr}
.lg-list .body>div{overflow:hidden}
.lg-list p{font-size:clamp(1.12rem,1.5vw,1.3rem);color:var(--soft);line-height:1.58;max-width:40ch;padding-bottom:.8rem}
.lg-list .ans{display:block;padding:0 0 1.6rem;font-size:clamp(1.08rem,1.4vw,1.22rem);color:var(--ink);line-height:1.55;max-width:42ch}
.lg-list .ans::before{content:'How we help — ';font-family:var(--m);font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.lg-cpanel{position:sticky;top:7rem;padding:clamp(1.5rem,4vw,3rem);min-height:26rem;display:flex;align-items:center;justify-content:center}
.lg-card{position:relative;z-index:1;width:100%;max-width:26rem;background:var(--paper);color:var(--ink);border-radius:8px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6);padding:1.3rem 1.4rem;transition:opacity .3s,transform .3s}
.lg-card.swap{opacity:0;transform:translateY(10px)}
.lg-card small{display:block;font-family:var(--m);font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.lg-card h4{margin-top:.5rem;font-family:var(--d);font-weight:400;font-size:1.5rem;line-height:1.15}
.lg-card ul{list-style:none;margin-top:.9rem}
.lg-card li{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-top:1px solid var(--line);font-size:.95rem}
.lg-card li i{font-style:normal;font-family:var(--m);font-size:.82rem;color:var(--faint)}
.lg-card li i.flag{color:var(--lg-flag)}
.lg-card .warn{margin-top:1rem;padding:.8rem .9rem;border-radius:6px;border-left:3px solid var(--lg-flag);background:var(--lg-stone);font-size:.92rem;line-height:1.45;color:var(--soft)}
.lg-card .warn b{color:var(--ink)}
.lg-card .acts{display:flex;gap:.5rem;margin-top:1rem}
.lg-card .acts span{flex:1;text-align:center;font-size:.86rem;font-weight:600;padding:.55rem;border-radius:6px;border:1px solid var(--line)}
.lg-card .acts span.dark{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.lg-illu{position:absolute;right:1rem;bottom:.8rem;z-index:1;font-family:var(--m);font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.55)}

/* ---------- 4 · point of view, as a quote ---------- */
.lg-quote{font-family:var(--d);font-weight:400;letter-spacing:-.02em;line-height:1.05;font-size:clamp(2.5rem,6vw,5.2rem);
  color:var(--ink);max-width:19ch;text-wrap:balance}
.lg-quote::before{content:'“';display:block;font-size:1.2em;line-height:.6;color:var(--faint);margin-bottom:.3rem}
.lg-by{display:flex;align-items:center;gap:.9rem;margin-top:2rem}
.lg-by i{width:2.8rem;height:1px;background:var(--ink)}
.lg-by span{font-family:var(--m);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.lg-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);margin-top:clamp(2.5rem,5vw,3.5rem)}
@media(max-width:900px){.lg-two{grid-template-columns:1fr}}
.lg-two p{font-size:clamp(1.15rem,1.6vw,1.34rem);color:var(--soft);line-height:1.6;max-width:40ch}

/* ---------- 5 · the privacy band ---------- */
.lg-dark{background:var(--lg-deep);color:#EEF1EE;position:relative;overflow:hidden}
.lg-dark::before{content:'';position:absolute;inset:0;background:var(--lg-grain);opacity:.8;pointer-events:none}
.lg-dark .wrap{position:relative}
.lg-dark .lg-h2{color:#fff}
.lg-dark .lg-h2 em{color:#9FB0A7}
.lg-dark .lg-kicker{color:#7F8D86}
.lg-dark .lg-kicker b{color:#EEF1EE}
.lg-dark .lg-lead{color:#A9B5AE}
.lg-badges{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(3rem,6vw,4.5rem);border-top:1px solid rgba(255,255,255,.12)}
@media(max-width:900px){.lg-badges{grid-template-columns:1fr 1fr}}
.lg-badge{padding:clamp(1.8rem,3.5vw,2.6rem) clamp(1rem,2vw,1.6rem);border-right:1px solid rgba(255,255,255,.12);text-align:center}
.lg-badge:last-child{border-right:0}
.lg-badge svg{width:84px;height:84px;margin:0 auto;display:block}
.lg-badge svg *{fill:none;stroke:#C9D3CD;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1);transition-delay:calc(var(--i) * 200ms)}
.in .lg-badge svg *{stroke-dashoffset:0}
.lg-badge b{display:block;margin-top:1.2rem;font-family:var(--s);font-size:1.12rem;font-weight:600;color:#fff}
.lg-badge p{margin-top:.5rem;font-size:.98rem;color:#9FAAA3;line-height:1.5}
.lg-proof{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;margin-top:clamp(3.5rem,7vw,5.5rem)}
@media(max-width:900px){.lg-proof{grid-template-columns:1fr}}
.lg-proof p{font-size:clamp(1.12rem,1.6vw,1.3rem);color:#A9B5AE;line-height:1.6;max-width:36ch}
.lg-proof p b{color:#fff;font-weight:600}
.lg-proof a{display:inline-flex;gap:.4rem;margin-top:1.4rem;font-weight:600;color:#fff;border-bottom:1px solid #fff;padding-bottom:2px}
.lg-shot{border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 80px -40px rgba(0,0,0,.9);
  transform:translateY(30px);opacity:0;transition:transform 1.2s cubic-bezier(.2,.8,.2,1),opacity 1.2s}
.in .lg-shot,.lg-shot.in{transform:none;opacity:1}
.lg-shot img{display:block;width:100%;height:auto}
.lg-shot figcaption{padding:.8rem 1rem;font-family:var(--m);font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;color:#8A968F;background:#101614;border-top:1px solid rgba(255,255,255,.08)}

/* ---------- 6 · where we help ---------- */
.lg-help{list-style:none;margin-top:clamp(2.2rem,4.5vw,3.2rem);border-top:1px solid var(--ink)}
.lg-help a{display:grid;grid-template-columns:3rem 1fr 1.1fr auto;gap:1rem 2rem;align-items:baseline;
  padding:clamp(1.5rem,3vw,2.2rem) 0;border-bottom:1px solid var(--line);transition:padding-left .3s}
.lg-help a:hover{padding-left:.6rem}
@media(max-width:820px){.lg-help a{grid-template-columns:2.4rem 1fr}.lg-help .what,.lg-help .go{grid-column:2}}
.lg-help .n{font-family:var(--m);font-size:.8rem;color:var(--faint)}
.lg-help .name{font-family:var(--d);font-size:clamp(1.6rem,2.8vw,2.3rem);line-height:1.05;color:var(--ink)}
.lg-help .what{font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--soft);line-height:1.55}
.lg-help .go{font-family:var(--m);font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);white-space:nowrap}

/* ---------- 7 · dark close ---------- */
.lg-close{text-align:left}
.lg-close .lg-h2{max-width:17ch;color:#fff}
.lg-close .lg-lead{color:#A9B5AE;margin-top:1.4rem;max-width:46ch}
.lg-close .cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.2rem}
.lg-close .lg-btn.fill{background:#fff;color:#14241F;border-color:#fff}
.lg-close .lg-btn.line{color:#fff;border-color:rgba(255,255,255,.3)}
.lg-close .lg-btn.line:hover{border-color:#fff}

@media(prefers-reduced-motion:reduce){
  .lg-wash{animation:none}.lg-task.run i{animation:none}
  .lg-row::after{transform:none}.lg-badge svg *{stroke-dashoffset:0}.lg-shot{transform:none;opacity:1}
}