/* Voiceclick Legal pages: copy-led layout on top of styles.css. */
.legal .nav{position:relative;z-index:5}
.nav-links a[aria-current="page"]{color:var(--blue)}
.menu{position:relative}
.menu-panel{position:absolute;top:100%;left:-20px;padding:14px 0;min-width:260px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 40px rgba(21,21,43,.1);display:none;flex-direction:column}
.menu-panel a{padding:9px 20px;font-size:15px}
.menu-panel a:hover{background:var(--paper)}
.menu:hover .menu-panel,.menu:focus-within .menu-panel{display:flex}
.nav-toggle{display:none;background:none;border:1px solid rgba(21,21,43,.2);border-radius:999px;padding:8px 16px;font:inherit;font-size:14px;color:var(--ink);cursor:pointer}

.lcopy{padding:0 56px}
.lhero{padding:88px 0 72px;max-width:980px}
.lhero .eyebrow{margin:0 0 22px}
.lhero h1{margin:0 0 28px;font-weight:400;font-size:68px;line-height:1.04;letter-spacing:-.02em;text-wrap:balance}
.lhero p{margin:0 0 16px;font-size:19px;line-height:1.55;max-width:720px;text-wrap:pretty}
.lhero p.lead{font-size:22px;color:var(--ink)}
.cta{margin:28px 0 0}

.block{padding:64px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);column-gap:72px}
.block>h2{grid-column:1;grid-row:1/span 40;margin:0;font-weight:400;font-size:36px;line-height:1.15;letter-spacing:-.01em;text-wrap:balance}
.block>*:not(h2){grid-column:2;max-width:720px}
.block>p,.block li{font-size:17px;line-height:1.65;color:#2E2D40;margin:0 0 16px;text-wrap:pretty}
.block>h3{margin:28px 0 8px;font-size:19px;font-weight:600;color:var(--ink)}
.block>h3:first-of-type{margin-top:0}
.block>ul,.block>ol{margin:0 0 16px;padding-left:20px}
.block a:not(.btn-primary){text-decoration:underline;text-decoration-color:rgba(0,0,205,.3);text-underline-offset:3px}
.block .cta{margin-top:12px}
.block:last-of-type{background:var(--yellow);border:none;border-radius:6px;margin:32px -24px 0;padding:72px 48px}
.block:last-of-type>p{color:var(--ink)}
.block table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:15px;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.block th,.block td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5}
.block th{font-weight:600;background:#F3F2EE}

/* Link lists and hubs */
.link-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 28px;margin:4px 0 20px}
.link-grid a{border-bottom:1px solid var(--line);padding:12px 0;font-size:16px;text-decoration:none!important}
.action{display:inline-block;margin:0 12px 12px 0;padding:12px 22px;border-radius:999px;background:var(--blue);color:#fff!important;font-weight:600;text-decoration:none!important}
.action.secondary{background:none;border:1px solid rgba(21,21,43,.2);color:var(--ink)!important}
.notice,.caption{font-size:13px;color:#6A6980}

/* Integration logos */
.integration-preview,.integration-showcase{grid-column:1/-1;max-width:none!important;margin:8px 0 0;padding:28px 0;border-top:1px solid var(--line)}
.lhero+.block .integration-preview{border-top:none}
.integration-kicker{margin:0 0 20px;font-size:12px!important;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--blue)}
.integration-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;list-style:none;padding:0;margin:0}
.integration-mark{display:flex;align-items:center;justify-content:center;min-height:64px;background:#fff;border:1px solid var(--line);border-radius:8px}
.mark-stage{height:38px;width:100%;display:flex;align-items:center;justify-content:center}
.mark-stage>img{display:block;max-width:80%;height:auto;max-height:28px;object-fit:contain;filter:grayscale(1);opacity:.75}
.mark-stage>img.inverse-mark{filter:grayscale(1) invert(1)}
.clio-lockup{display:flex;align-items:center;gap:8px;color:#333a40;font-size:24px;line-height:1;font-weight:600;letter-spacing:-1px}
.clio-lockup img{width:22px;height:22px;filter:invert(1);opacity:.75}
.integration-group+.integration-group{margin-top:32px}
.integration-caption{margin:20px 0 0;font-size:14px;color:#6A6980}
.integration-link{text-decoration:none!important}

/* Demo form */
.form-block{display:block}
.demo-form{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px;max-width:860px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:36px}
.demo-form label{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:600}
.demo-form .wide{grid-column:1/-1}
.demo-form input,.demo-form textarea{font:inherit;font-weight:400;font-size:16px;padding:12px 14px;border:1px solid rgba(21,21,43,.18);border-radius:8px;background:var(--paper);color:var(--ink)}
.demo-form input:focus,.demo-form textarea:focus{outline:2px solid var(--blue);outline-offset:1px}
.form-help{margin:0;font-size:14px;color:#6A6980}
.form-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.form-status{font-size:14px}
.form-status.error{color:#B42318}

.legal .voices{padding-top:40px}
.foot-links{display:flex;gap:24px;flex-wrap:wrap}
.legal .footer{gap:24px;flex-wrap:wrap}

@media (max-width:900px){
  .legal .nav{padding:20px 16px;flex-wrap:wrap}
  .nav-toggle{display:block}
  .legal .nav-links{display:none;width:100%;flex-direction:column;align-items:flex-start;gap:14px;padding-top:18px}
  .legal .nav.open .nav-links{display:flex}
  .legal .nav-links a:not(.btn-outline){display:block}
  .menu-panel{position:static;display:flex;border:none;box-shadow:none;padding:6px 0 0 12px;min-width:0}
  .menu-panel a{padding:6px 0;font-size:14px}
  .lcopy{padding:0 16px}
  .lhero{padding:48px 0 40px}
  .lhero h1{font-size:42px}
  .lhero p.lead{font-size:19px}
  .block{display:block;padding:44px 0}
  .block>h2{font-size:28px;margin-bottom:20px}
  .block:last-of-type{margin:24px -8px 0;padding:44px 24px}
  .integration-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .link-grid{grid-template-columns:1fr}
  .demo-form{grid-template-columns:1fr;padding:22px}
  .block table{display:block;overflow-x:auto}
  .foot-links{gap:14px}
}
[hidden]{display:none!important}
.block>.integration-preview,.block>.integration-showcase{grid-column:1/-1;max-width:none}
.lhero+.block{padding-top:24px}
/* PracticePanther ships as a white logo, so it needs inverting like the other light marks. */
.integration-mark[data-integration="practicepanther"] .mark-stage>img{filter:grayscale(1) invert(1)}
.block>.integration-showcase:first-child,.block>.integration-preview:first-child{border-top:none;padding-top:0}