/* Page layer for the 2027 refresh pages (2026-10-19). Loaded last, after master.css.
   Holds only what the five product pages and the thank-you page add on top of the template:
   review flags, the production preview, the shared header details, the quieter dot-grid texture,
   and the page-specific modules (AI Draft Reviewer, ECF Vault code, PACER alert, persona router, booking). */

/* ---------- Review flags: visible in review builds, gone in "Preview as production" ---------- */
.rv-flag{display:inline-block;margin-left:6px;padding:3px 6px;vertical-align:middle;font:700 9px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;
  color:#6b5400;background:#fff6d6;border:1px solid #e8d48a;cursor:help;white-space:nowrap}
.navy .rv-flag,.dark .rv-flag,.site-footer .rv-flag,.calc-band .rv-flag{color:#ffe2a6;background:transparent;border-color:rgba(255,226,166,.55)}
.rv-note{display:block;margin:var(--s4) 0 0;padding:10px 14px;font:500 13px/20px var(--body);color:#5c4800;background:#fff6d6;border:1px solid #e8d48a}
.rv-note::before{content:"Review note · ";font-weight:700}
.navy .rv-note,.dark .rv-note{color:#ffe2a6;background:rgba(255,246,214,.06);border-color:rgba(255,226,166,.45)}
.rv-only{position:relative;outline:1.5px dashed #c9a227;outline-offset:-1.5px}
.rv-tag{position:absolute;top:0;left:0;z-index:3;padding:5px 10px;font:700 10px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:#8a6d00}
.prod-only{display:none!important}
body.preview-prod .rv-flag,body.preview-prod .rv-note,body.preview-prod .rv-tag,body.preview-prod [data-hold]{display:none!important}
body.preview-prod .rv-only{outline:0}
body.preview-prod .prod-only{display:block!important}
.poc{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap}
.poc button{font:600 11px/1 var(--body);letter-spacing:.06em;text-transform:none;padding:5px 10px;border:1px solid #c9a227;background:#fff;color:#5c4800;cursor:pointer;border-radius:var(--r-ctl)}

/* ---------- Header: logo image, mega menu descriptors, announcement ---------- */
.logo img{display:block;height:46px;width:auto}
.site-header .nav{gap:24px}
.mega.wide{min-width:960px;left:-40px}
.mega li a{padding:8px 0}
.mega li a b{display:block;font-weight:600;color:var(--text-heading)}
.mega li a small{display:block;margin-top:2px;font-size:13px;line-height:18px;color:var(--text-muted)}
.mega li a:hover{text-decoration:none}.mega li a:hover b{text-decoration:underline}
.announce a{color:var(--text);text-decoration:none}.announce a:hover{text-decoration:underline}
@media (max-width:1080px){.mega.wide{min-width:0;left:0}.nav-list.open .mega{display:none}.nav-list.open .mega.open{display:grid}}

/* ---------- Texture: a quiet dot grid instead of the full graph-paper grid ---------- */
:root{--dotgrid:radial-gradient(circle,rgba(0,45,114,.10) 1px,transparent 1.3px);--dotgrid-dark:radial-gradient(circle,rgba(188,225,247,.12) 1px,transparent 1.3px)}
.dots-bg{background-image:var(--dotgrid);background-size:24px 24px}
.calc-band::before{background-image:var(--dotgrid-dark);background-size:24px 24px}
.hero-mt,.hero-home,.hero-split,.hero-vault,.hero-pacer{position:relative;isolation:isolate;background:var(--hero-ground)}
.hero-mt::after,.hero-home::after,.hero-split::after,.hero-vault::after,.hero-pacer::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--dotgrid);background-size:24px 24px;
  -webkit-mask-image:radial-gradient(70% 90% at 100% 0%,#000,transparent 75%);mask-image:radial-gradient(70% 90% at 100% 0%,#000,transparent 75%)}
.dark.textured{background-image:var(--dotgrid-dark);background-size:24px 24px}

/* ---------- Shared bits ---------- */
.mproof{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:var(--s4);font:600 12px/16px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.mproof span+span::before{content:"";display:inline-block;width:4px;height:4px;margin:0 16px 2px 0;background:var(--sky);vertical-align:middle}
.ledger h2{margin:0}
.ledger .lead{margin-top:var(--s3)}
.qual{margin:var(--s4) 0 0;padding-left:12px;border-left:2px solid var(--navy);font-size:15px;line-height:23px;color:var(--text-muted)}
.navy .qual{border-color:var(--ice);color:var(--text-on-brand-muted)}
.cap{font-size:12px;line-height:18px;color:var(--text-muted);margin-top:12px}
.panel .cap{color:var(--text-on-brand-muted)}
.panel{min-height:0;padding:var(--s5)}
.panel figure{width:100%;max-width:480px;margin:0}
.ui{max-width:none}
.ui-top{background:var(--navy);color:#fff;border-bottom:0}
.ui-top .dots i{background:rgba(255,255,255,.35)}
.ui-top span:last-child{color:var(--ice)}
.kv span:last-child{font-weight:600;color:var(--navy);text-align:right;font-variant-numeric:tabular-nums}
.chip-pdf{margin-top:0}
.ex-band{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);margin-top:var(--s5);padding:var(--s4) var(--s5);background:var(--surface-brand);color:#fff}
.ex-band .n{font:600 48px/1 var(--display);letter-spacing:-.03em;color:#fff}
.ex-band p{margin:0;color:var(--text-on-brand-muted);max-width:640px}
.ex-band p b{color:#fff}
.price-table caption{caption-side:top}
.steps.five .step:last-child,.steps.four .step:last-child{margin-right:0}

/* ---------- Home: centered hero with the path of a court notice ---------- */
.hero-home .eyebrow{display:block;margin-bottom:var(--s3)}
.hero-home h1{margin-bottom:var(--s4)}
.hero-home .lead{max-width:640px}
.hero-home .mproof{justify-content:center}
.flow-grid{display:grid;grid-template-columns:1fr 56px 220px 56px 1fr;align-items:center;margin:var(--s6) auto 0;max-width:1060px;padding:var(--s5);background:var(--surface-raised);border:1px solid var(--rule);text-align:left}
.flow-grid h5{margin:0 0 12px;font:600 11px/16px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.flow-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.flow-grid li{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--rule);background:var(--surface);font:600 14px/20px var(--body);color:var(--navy)}
.flow-grid li svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--navy);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.flow-hub{padding:var(--s4) var(--s3);text-align:center;color:#fff;background:var(--navy)}
.flow-hub img{display:block;width:96px;height:auto;margin:0 auto 12px;padding:8px;background:#fff}
.flow-hub b{display:block;font:600 20px/1.2 var(--display)}
.flow-hub span{font-size:12px;color:var(--ice)}
.flow-ln{position:relative;height:2px;margin:0 6px;background:repeating-linear-gradient(90deg,var(--sky) 0 6px,transparent 6px 10px)}
.flow-ln::after{content:"";position:absolute;right:-2px;top:-4px;border-left:8px solid var(--sky);border-top:5px solid transparent;border-bottom:5px solid transparent}
.flow-ln i{position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;background:var(--cobalt);animation:flowdot 2.8s var(--ease) infinite}
@keyframes flowdot{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 10px);opacity:0}}
@media (max-width:860px){.flow-grid{grid-template-columns:1fr;gap:12px}.flow-ln{width:2px;height:28px;margin:0 auto;background:repeating-linear-gradient(180deg,var(--sky) 0 6px,transparent 6px 10px)}
  .flow-ln::after{right:-4px;top:auto;bottom:-2px;border:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid var(--sky)}.flow-ln i{display:none}}
.prod .chip-v{align-self:flex-start;margin:0 0 12px;padding:5px 8px;font:600 11px/1 var(--body);letter-spacing:.06em;color:var(--on-tint);background:var(--tint);text-decoration:none}
.prod .eyebrow{color:var(--link);margin-bottom:var(--s3)}
.prod .go{margin-top:12px;font:600 14px var(--body);color:var(--link)}
.also{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;padding:var(--s4);background:var(--surface-raised);border:1px solid var(--rule);color:var(--text)}
.also p{flex:1 1 360px;margin:0}
.also nav{display:flex;flex-wrap:wrap;gap:8px 20px}.also nav a{margin:0;font-weight:600;text-decoration:none}
.persona h3{margin-top:4px}
.persona .tlink{font-size:14px;padding-top:var(--s3)}
.heritage{display:grid;grid-template-columns:5fr 7fr;gap:var(--s7);align-items:start}
.heritage .big{margin:var(--s3) 0;font:600 clamp(80px,10vw,132px)/.9 var(--display);letter-spacing:-.04em;color:var(--navy)}
.heritage .timeline{grid-template-columns:repeat(3,1fr);row-gap:var(--s5)}
.heritage .facts{grid-template-columns:1fr 1fr;margin-top:var(--s5)}
@media (max-width:900px){.heritage{grid-template-columns:1fr;gap:var(--s5)}.heritage .timeline{grid-template-columns:1fr 1fr}}

/* ---------- AI Draft Reviewer example (home and Case Management) ---------- */
.adr{display:grid;grid-template-columns:1fr 1fr}
.adr-doc{padding:16px;border-right:1px solid var(--rule)}
.adr-doc .src{margin:8px 0 0}
.adr-ev{padding:16px}
.adr-card{border:1px solid var(--rule);padding:12px;margin-top:10px;background:#fff;transition:background-color var(--dur-ui) var(--ease),opacity var(--dur-ui) var(--ease)}
.adr-card .t{font-weight:700;font-size:14px;color:var(--navy)}
.adr-card .r{margin:4px 0 10px;font-size:12px;color:var(--steel)}
.adr-card .d{display:flex;justify-content:space-between;align-items:center;gap:8px}
.adr-card .date{font:600 22px/1 var(--display);color:var(--navy);font-variant-numeric:tabular-nums}
.adr-card .ui-actions{margin:0;gap:6px}
.adr-card .ui-actions button{flex:none;padding:6px 10px;font:600 12px var(--body);border:1.5px solid var(--navy);background:#fff;color:var(--navy);cursor:pointer;border-radius:var(--r-ctl)}
.adr-card .ui-actions button.ok{background:var(--navy);color:#fff}
.adr-card .stamp{display:none;margin-top:8px;font:600 12px var(--body);color:var(--cobalt)}
.adr-card.done .ui-actions{display:none}.adr-card.done .stamp{display:block}
.adr-card.ok{background:var(--mist);border-color:var(--cobalt)}
.adr-card.skip{opacity:.5}
.adr-log{margin-top:12px;padding-top:8px;border-top:1px dashed var(--gray-300);font-size:11px;line-height:16px;color:var(--steel)}
.adr-reset{padding:0;border:0;background:none;font:600 12px var(--body);color:inherit;text-decoration:underline;cursor:pointer}
@media (max-width:600px){.adr{grid-template-columns:1fr}.adr-doc{border-right:0;border-bottom:1px solid var(--rule)}}

/* ---------- Case Management: CourtAlert Verity block ---------- */
.verity{display:grid;grid-template-columns:5fr 7fr;gap:var(--s6);align-items:start;margin-top:var(--s6)}
.verity .toggle-card .switch{flex-direction:row;justify-content:space-between}
.verity .toggle-card .switch label{font:600 15px/22px var(--body)}
.verity .toggle-state{margin:0;color:var(--text-on-brand-muted)}
.verity .toggle-card+.toggle-card{margin-top:var(--s4)}
.verity .toggle-card p{color:#e8edf5}
.verity .toggle-card .ul-check li{color:#fff;border-color:rgba(255,255,255,.2)}
.verity .toggle-card .ul-check li::before{border-color:var(--ice)}
@media (max-width:900px){.verity{grid-template-columns:1fr}}
.inq-list{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s6);margin-top:var(--s6)}
@media (max-width:900px){.inq-list{grid-template-columns:1fr}}
.inbox .kv{align-items:flex-start;gap:24px}
.inbox .kv span:first-child{font:400 14px/20px var(--body);letter-spacing:0;text-transform:none;color:var(--ink)}
.impl-reason{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:center;margin-top:var(--s5);padding:var(--s4);border:1px solid var(--rule);background:var(--surface-raised)}
.impl-reason svg{width:32px;height:32px;fill:none;stroke:var(--navy);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.impl-reason p{margin:0}

/* ---------- ECF Vault ---------- */
.hero-vault .grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s7);align-items:end}
.hero-vault h1{font-size:clamp(42px,5vw,66px);line-height:1;letter-spacing:-.03em;margin:0}
.vault-row{display:grid;grid-template-columns:minmax(0,1fr) 384px;gap:var(--s4);margin-top:var(--s7);align-items:stretch}
.hero-ev .panel{align-items:center}
.code-box{display:flex;align-items:center;gap:16px;margin:12px 0;padding:14px;background:var(--mist);border:1px solid var(--rule)}
.code-box .code{padding:0;font-size:34px;text-align:left}
.cd{position:relative;width:44px;height:44px;flex:none}
.cd svg{width:44px;height:44px;transform:rotate(-90deg)}
.cd circle{fill:none;stroke-width:4}.cd .bg{stroke:var(--gray-200)}.cd .fg{stroke:var(--cobalt);stroke-dasharray:113;transition:stroke-dashoffset 1s linear}
.cd b{position:absolute;inset:0;display:grid;place-items:center;font:600 12px var(--body);color:var(--navy)}
.mandate{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:start;max-width:860px;margin:0 0 var(--s6);padding:var(--s4);border:1px solid rgba(255,255,255,.25)}
.mandate b{font:600 11px/16px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ice)}
.mandate p{margin:0;font-size:18px;line-height:28px;color:#e8edf5}
.trust-list{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:var(--s6);border-top:1px solid rgba(255,255,255,.3)}
.trust-list>div{padding:var(--s5) var(--s4) var(--s5) 0;border-right:1px solid rgba(255,255,255,.18);margin-right:var(--s4)}
.trust-list>div:last-child{border-right:0;margin-right:0}
.trust-list .n{font:600 56px/1 var(--display);color:var(--ice);letter-spacing:-.03em}
.trust-list h3{margin:var(--s3) 0 8px;font-size:24px;color:#fff}
.trust-list p{margin:0;color:#e8edf5}
@media (max-width:900px){.hero-vault .grid,.vault-row{grid-template-columns:1fr}.trust-list{grid-template-columns:1fr}.trust-list>div{border-right:0;margin-right:0;border-bottom:1px solid rgba(255,255,255,.18)}}

/* ---------- CourtAlert for PACER ---------- */
.hero-pacer .grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s7);align-items:center}
.hero-pacer h1{font-size:clamp(40px,4.8vw,62px);line-height:1.02;letter-spacing:-.03em}
.alert-ui .entry{padding:12px 0;border-bottom:1px solid var(--rule)}
.alert-ui .entry p{margin:6px 0 0;font-size:14px;line-height:21px}
.diff-del{text-decoration:line-through;color:var(--steel)}
.diff-add{background:var(--ice);color:var(--navy);font-weight:600;padding:0 2px}
.compliance .grid{display:grid;grid-template-columns:7fr 5fr;gap:var(--s7);align-items:start}
.compliance h2{font-size:clamp(28px,3vw,38px);line-height:1.12}
.compliance .memo{grid-template-columns:150px 1fr}
.compliance .memo p{margin:0;color:#e8edf5}
.anon{display:grid;gap:0;border-top:1px solid rgba(255,255,255,.3)}
.anon>div{display:flex;gap:16px;padding:var(--s4) 0;border-bottom:1px solid rgba(255,255,255,.18)}
.anon svg{flex:none;width:28px;height:28px;fill:none;stroke:var(--sky);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.anon b{display:block;color:#fff;margin-bottom:4px}
.anon span{color:var(--text-on-brand-muted);font-size:15px;line-height:23px}
.freq{display:grid;grid-template-columns:5fr 7fr;gap:var(--s7);align-items:center}
.freq .dotscale .r{grid-template-columns:150px 1fr 80px;color:var(--text)}
.freq .dotscale .d i{background:var(--gray-200)}.freq .dotscale .d i.on{background:var(--navy)}
.freq .dotscale .r span:last-child{text-align:right;color:var(--navy)}
.explorer{display:grid;grid-template-columns:4fr 8fr;gap:var(--s6);align-items:start}
.explorer .fgrid{margin-top:0;grid-template-columns:1fr}
.search-ui{display:flex;gap:8px;margin:var(--s4) 0}
.search-ui span{flex:1;padding:12px 14px;border:1.5px solid var(--field-border);background:#fff;color:var(--steel);font-size:15px}
.search-ui b{padding:12px 16px;background:var(--navy);color:#fff;font-weight:600}
@media (max-width:900px){.hero-pacer .grid,.compliance .grid,.freq,.explorer{grid-template-columns:1fr;gap:var(--s5)}}

/* ---------- Thank-you ---------- */
.ty-grid{display:grid;grid-template-columns:6fr 6fr;gap:var(--s7);align-items:start}
.meet h3{font-size:22px;line-height:28px;margin-bottom:4px}
.meet .cal{grid-template-columns:repeat(5,1fr)}
.meet .cal span.a{display:flex;flex-direction:column;gap:2px;font:600 13px var(--body);letter-spacing:0}
.meet .cal span.a small{font:600 10px var(--body);letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.res{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin-top:var(--s5)}
.res a{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:var(--s4);background:var(--surface-raised);border:1px solid var(--rule);text-decoration:none;color:var(--text)}
.res a:hover{border-color:var(--navy)}
.res svg{width:28px;height:28px;fill:none;stroke:var(--navy);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.res b{display:block;font:600 20px var(--display);color:var(--navy);margin-bottom:4px}
.res span{color:var(--text-muted);font-size:15px}
@media (max-width:900px){.ty-grid,.res{grid-template-columns:1fr;gap:var(--s5)}}
/* Forms on navy bands keep their Daylight text colors */
.navy .form-card h3,.dark .form-card h3{color:var(--text-heading)}
.navy .form-card .micro,.dark .form-card .micro{color:var(--text-muted)}
.navy .form-card legend,.navy .form-card label{color:var(--text)}
.freq .dotscale .r{grid-template-columns:150px 1fr 120px}
.media .cap{color:#fff}

/* ---------- Two-up form rows (2026-10-20) ----------
   When one label wraps (an "Optional" tag dropping to a second line), the two controls still line up:
   each field's label, control and error message share rows with its neighbor through subgrid. */
.req,.opt{white-space:nowrap}
.two{align-items:start}
@supports (grid-template-rows:subgrid){
  .form-card .two,.mt-form .two{row-gap:0}
  .two>.field{display:grid;grid-template-rows:subgrid;grid-row:span 3;align-content:start}
}
.ledger.solo .beta-tag{margin-bottom:var(--s3)}

/* ---------- ECF Vault example: motion (2026-10-20) ----------
   The screen builds in row by row, the code's digits roll in on each refresh, the countdown ring tightens
   in the last five seconds, and midway through each cycle a delegated user takes the code: the
   "Last used by" row updates and the access-log dot pings. All of it stops under reduced motion. */
.hero-ev .kv{margin:0 -8px;padding-left:8px;padding-right:8px}
.ui[data-anim] .ui-body>*{opacity:0;transform:translateY(8px)}
.ui[data-anim].is-in .ui-body>*{opacity:1;transform:none;transition:opacity 480ms var(--ease),transform 480ms var(--ease);transition-delay:calc(var(--i,0) * 70ms + 120ms)}
.ui[data-anim]{opacity:0;transform:translateY(16px)}
.ui[data-anim].is-in{opacity:1;transform:none;transition:opacity 600ms var(--ease),transform 600ms var(--ease)}
.code-box .code span{display:inline-block;animation:vd-in 420ms var(--ease) both;animation-delay:calc(var(--i) * 45ms)}
.code-box .code.out span{animation:vd-out 200ms var(--ease-press) both}
@keyframes vd-in{from{opacity:0;transform:translateY(60%)}}
@keyframes vd-out{to{opacity:0;transform:translateY(-60%)}}
.code-box.low .cd b{animation:vd-tick 1s var(--ease) infinite}
.code-box.low .fg{stroke:var(--navy)}
@keyframes vd-tick{0%{transform:scale(1.18)}40%,100%{transform:scale(1)}}
.kv.ping{animation:vd-row 1.8s var(--ease)}
@keyframes vd-row{0%,25%{background:var(--ice)}100%{background:transparent}}
.st.ping i{animation:vd-ping 1.2s var(--ease)}
@keyframes vd-ping{0%{box-shadow:0 0 0 0 rgba(0,45,114,.45)}100%{box-shadow:0 0 0 10px rgba(0,45,114,0)}}
@media (prefers-reduced-motion:reduce){.ui[data-anim],.ui[data-anim] .ui-body>*{opacity:1;transform:none}}

/* ---------- Card rows that line up when text wraps (2026-10-20) ----------
   Proof-bar stats (number, label, text) and feature cards (icon, title, text) share row tracks with their
   neighbors, so a number or title that wraps to two lines no longer pushes only its own card's text down. */
@supports (grid-template-rows:subgrid){
  .stats>.stat{display:grid;grid-template-rows:subgrid;grid-row:span 3;align-content:start}
  .stat .lbl{align-self:start}
  .fgrid>.fblock,.fx .fblock{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:0;align-content:start}
  /* expandable feature cards (ECF Inform) have a fourth row for "More detail" */
  .fx .fblock{grid-row:span 4}
  .fx .fblock .fmore{align-self:end;margin-top:var(--s3)}
}

/* ---------- Apple design review log v0.2, accepted items (2026-10-20) ---------- */
/* A1 thank-you day and time pickers: real buttons, pressed state, press feedback */
.meet .cal button,.meet .slots button{appearance:none;cursor:pointer;border-radius:var(--r-ctl);
  transition:background-color var(--dur-ui) var(--ease),color var(--dur-ui) var(--ease),transform var(--dur-press) var(--ease-press)}
.meet .cal button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 0;border:1px solid var(--navy);background:var(--white);color:var(--navy);font:600 13px var(--body)}
.meet .cal button small{font:600 10px var(--body);letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.meet .slots button{padding:10px;border:1.5px solid var(--navy);background:var(--white);color:var(--navy);font:600 14px var(--body)}
.meet .cal button[aria-pressed=true],.meet .slots button[aria-pressed=true]{background:var(--navy);color:var(--white)}
.meet .cal button:hover:not([aria-pressed=true]),.meet .slots button:hover:not([aria-pressed=true]){background:var(--hover-fill)}
.meet .cal button:active,.meet .slots button:active{transform:scale(.97)}
/* A2 AI Draft Reviewer buttons: 40px (44px on touch), equal widths, press feedback. F2 undo link. */
.adr-card .ui-actions button{min-height:40px;min-width:80px;padding:8px 14px;transition:background-color var(--dur-ui) var(--ease),transform var(--dur-press) var(--ease-press)}
@media (pointer:coarse){.adr-card .ui-actions button{min-height:44px}}
.adr-card .ui-actions button:active,.adr-undo:active{transform:scale(.97)}
.adr-undo{margin-left:6px;padding:4px 0;border:0;background:none;font:600 12px var(--body);color:var(--navy);text-decoration:underline;cursor:pointer}
/* A3 menu triggers answer the pointer at once, before the 180ms open delay. B3 panels drop from the trigger and leave the same way. */
.nav-list>li>button:hover,.nav-list>li:hover>button,.nav-list>li>button[aria-expanded=true]{color:var(--link);box-shadow:inset 0 -2px 0 currentColor}
@media (min-width:1081px){
  .mega{display:grid;visibility:hidden;opacity:0;transform:translateY(-6px);transform-origin:top left;
    transition:opacity 200ms var(--ease),transform 200ms var(--ease),visibility 0s linear 200ms}
  .mega.open{visibility:visible;opacity:1;transform:none;transition:opacity 200ms var(--ease),transform 200ms var(--ease),visibility 0s}
}
/* A5 form errors fade in, so the cause is clear */
.field.invalid .err{animation:err-in 150ms var(--ease)}
@keyframes err-in{from{opacity:0;transform:translateY(-2px)}}
/* A6 the estimate's price is marked once when it meets the minimum or the cap */
[data-est-month].hit{animation:est-hit 700ms var(--ease)}
@keyframes est-hit{0%,30%{background:var(--ice)}100%{background:transparent}}
/* B2 the Vault ring is driven frame by frame from pages.js, so no CSS transition (that caused the rewind) */
.cd .fg{transition:none}
.code-box .code.out span{animation-duration:150ms}
/* B4 feature panels: motion comes from components.js (interruptible); the notch slides between cards in a row */
.fdetail{animation:none}
.fdetail.slide::before{transition:left 240ms var(--ease)}
/* B5 calculator fold: the height opens and closes on the same curve (browsers without ::details-content just snap) */
:root{interpolate-size:allow-keywords}
details[data-calc-toggle]::details-content{height:0;overflow:clip;transition:height 240ms var(--ease),content-visibility 240ms allow-discrete}
details[data-calc-toggle][open]::details-content{height:auto}
/* B7 the flow dot runs twice when the diagram is seen, then rests; paused off screen */
.flow-ln i{animation-iteration-count:2;animation-play-state:paused}
.flow-grid.in .flow-ln i{animation-play-state:running}
/* C1 product pages: the site header scrolls away, so the section bar is the only floating layer (and F3: the two
   "Book a demo" buttons are never on screen together). The homepage, with no section bar, keeps a sticky header. */
body[data-page-type=product] .site-header{position:relative}
/* C2 the POC strip now rides in the utility bar as one chip */
.utility .poc-chip{margin-right:auto;color:#ffe2a6;cursor:default}
.utility .poc-btn{padding:4px 8px;border:1px solid rgba(255,226,166,.6);background:none;color:#ffe2a6;font:600 11px/1 var(--body);letter-spacing:.06em;cursor:pointer;border-radius:var(--r-ctl)}
.utility .poc-btn:hover{background:rgba(255,226,166,.1)}
.utility .wrap{align-items:center;padding-top:4px;padding-bottom:4px}
@media (max-width:820px){.utility .poc-chip{display:none}}
/* D1 thank-you: space between the heading and the lead */
.ty-grid h1{margin-bottom:var(--s4)}
/* D3 one tracking scale by size: 96px+ -0.035em, 48-95 -0.03em, 30-47 -0.025em, 20-29 -0.01em */
.heritage .big{letter-spacing:-.035em}
.stat .num{letter-spacing:-.025em}
h2{letter-spacing:-.025em}
h3{letter-spacing:-.01em}
/* D4 small uppercase labels get room when they wrap */
.mproof{line-height:18px;row-gap:8px}
.st{line-height:18px}
/* E6 more contrast: review flags and holds get solid borders */
@media (prefers-contrast:more){.rv-flag,.rv-note,.rv-only,.utility .poc-btn{border-color:currentColor!important}}
/* F1 the persona a menu item points to is marked when you land on it */
.persona{scroll-margin-top:96px}
.persona:target{box-shadow:inset 0 3px 0 var(--cobalt)}
.persona:target h3{color:var(--link)}
/* F5 thank-you resources that don't exist yet are shown as coming soon, not dead links */
.res-soon{position:relative;display:grid;grid-template-columns:auto 1fr;gap:16px;padding:var(--s4);background:var(--surface-raised);border:1px dashed var(--gray-300);color:var(--text)}
.res-soon .soon{position:absolute;top:12px;right:12px;font:600 10px/1 var(--body);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.res-soon b{padding-right:96px}
/* F6 visible breadcrumb above the product hero */
.crumbs{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin:0 0 var(--s3);font:600 11px/16px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.crumbs a{color:var(--link);text-decoration:none}.crumbs a:hover{text-decoration:underline}
/* Page label under the breadcrumb: names the product or service and what it does, above the benefit headline */
.hero-id{grid-column:1/-1}
.page-id{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 var(--s5)}
.page-id b{font:700 20px/28px var(--body);letter-spacing:-.01em;color:var(--text-heading)}
.page-id span{font:500 16px/24px var(--body);color:var(--text-muted);padding-left:12px;border-left:1px solid var(--gray-300)}
.hero-id .crumbs,.hero-mt .hero-id .crumbs{margin-bottom:var(--s2)}
.grid > .hero-id .page-id{margin-bottom:0}
@media (min-width:901px){.grid > .hero-id{margin-bottom:-24px}}
@media (max-width:600px){.page-id span{padding-left:0;border-left:0;flex-basis:100%}}
/* Phone widths: the two-up stats and the PACER frequency block no longer push the page sideways */
@media (max-width:820px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat .num{overflow-wrap:anywhere}}
@media (max-width:900px){.freq{grid-template-columns:minmax(0,1fr);gap:var(--s5)}}
@media (max-width:480px){.freq .dotscale .r{grid-template-columns:110px minmax(0,1fr) 72px}}
@media (max-width:820px){.outcomes[style]{grid-template-columns:1fr!important}}
/* AI Draft Reviewer example: tighter type so the date, Skip and Approve sit on one line (2026-10-20) */
.adr-card .date{font-size:16px;line-height:20px;white-space:nowrap}
.adr-card .d{gap:12px}
.adr-card .ui-actions{flex-wrap:nowrap}
.adr-card .ui-actions button{min-width:64px;min-height:36px;padding:6px 12px}
@media (pointer:coarse){.adr-card .ui-actions button{min-height:44px}}
.adr-card .t{font-size:14px;line-height:19px}
.adr-card .r{margin:4px 0 12px;line-height:17px}
.adr-doc .src{font-size:14px;line-height:21px;padding:10px 12px}
.adr-doc .micro,.adr-ev .micro{display:block;line-height:16px}

/* ---------- Homepage as a hub (rebuilt 2026-10-20) ----------
   The hero says what CourtAlert is and routes each visitor by problem; the notice path moves to How it works,
   where each step sits under its stage; Who we serve is a role picker. */
.hero-hub{padding:var(--s7) 0 var(--s8)}
.hub-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s7);align-items:center}
.hub-copy .eyebrow{display:block;margin-bottom:var(--s3)}
.hub-copy h1{font-size:clamp(42px,5vw,68px);line-height:1.02;letter-spacing:-.03em;margin:0 0 var(--s4);max-width:14ch}
.hub-copy .lead{max-width:40ch;margin:0}
.hub-copy .mproof{justify-content:flex-start}
.hub-router{background:var(--surface-raised);border:1px solid var(--rule);border-top:4px solid var(--navy);padding:var(--s5) var(--s4) var(--s4)}
.hub-q{margin:0;font:600 24px/30px var(--display);letter-spacing:-.01em;color:var(--text-heading)}
.hub-sub{margin:4px 0 var(--s3);font-size:15px;color:var(--text-muted)}
.hub-opt{display:grid;grid-template-columns:40px minmax(0,1fr) 16px;gap:14px;align-items:center;padding:14px 8px;margin:0 -8px;border-top:1px solid var(--rule);
  color:var(--text);text-decoration:none;transition:background-color var(--dur-ui) var(--ease),transform var(--dur-press) var(--ease-press)}
.hub-opt:hover{background:var(--hover-fill)}
.hub-opt:active{transform:scale(.99)}
.hub-ic{display:grid;place-items:center;width:40px;height:40px;background:var(--ice)}
.hub-ic svg,.prod-ic svg{width:22px;height:22px;fill:none;stroke:var(--navy);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.hub-t b{display:block;font-size:15px;line-height:20px;color:var(--text-heading)}
.hub-t small{display:block;margin-top:2px;font-size:13px;line-height:18px;color:var(--link);font-weight:600}
.hub-opt i{font-style:normal;font-size:20px;color:var(--link);transition:transform var(--dur-ui) var(--ease)}
.hub-opt:hover i{transform:translateX(3px)}
.hub-all{display:block;margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--rule);font-weight:600;font-size:14px;color:var(--link);text-decoration:none}
.hub-all::after{content:" ›"}
.hub-all:hover{text-decoration:underline}

/* How it works: the diagram, then three steps aligned to its three stages */
.flow-how{margin-top:var(--s6)}
.flow-steps{display:grid;grid-template-columns:1fr 56px 220px 56px 1fr;max-width:1060px;margin:0 auto;padding:var(--s4) var(--s5) 0;list-style:none}
.flow-steps li:nth-child(1){grid-column:1}
.flow-steps li:nth-child(2){grid-column:2/5;padding:0 8px}
.flow-steps li:nth-child(3){grid-column:5}
.flow-steps .n{display:block;margin-bottom:6px;font:600 11px/16px var(--body);letter-spacing:.14em;color:var(--link)}
.flow-steps h3{margin:0 0 6px;font-size:19px;line-height:25px}
.flow-steps p{margin:0;font-size:15px;line-height:23px;color:var(--text-muted)}

/* Products: icon, then the label; persona tag and link share the footer */
.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.prod{padding:var(--s5)}
.prod-ic{display:grid;place-items:center;width:44px;height:44px;margin-bottom:var(--s3);background:var(--ice)}
.prod-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding-top:12px;border-top:1px solid var(--rule)}
.prod-foot .tag{margin:0;padding:0;border:0}
.prod-foot .tlink{white-space:nowrap}
.prod h3{margin-top:4px}
.prod p{margin-bottom:var(--s4)}

/* Who we serve: role picker */
.router{display:grid;grid-template-columns:260px minmax(0,1fr);margin-top:var(--s6);background:var(--surface-raised);border:1px solid var(--rule)}
.router-tabs{display:flex;flex-direction:column;border-right:1px solid var(--rule)}
.router-tabs [role=tab]{position:relative;padding:16px 20px;border:0;border-bottom:1px solid var(--rule);background:none;text-align:left;font:600 15px/20px var(--body);color:var(--text);cursor:pointer;
  scroll-margin-top:96px;transition:background-color var(--dur-ui) var(--ease),color var(--dur-ui) var(--ease)}
.router-tabs [role=tab]:last-child{border-bottom:0}
.router-tabs [role=tab]:hover{background:var(--hover-fill)}
.router-tabs [role=tab][aria-selected=true]{background:var(--navy);color:var(--white)}
.router-panel{padding:var(--s6) var(--s6) var(--s5);outline-offset:-4px}
.router-panel .role{display:block;font:600 11px/16px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--link)}
.router-panel h3{margin:8px 0 12px;font-size:30px;line-height:36px;letter-spacing:-.02em}
.router-panel p{max-width:52ch;margin:0 0 var(--s5);font-size:19px;line-height:29px;color:var(--text)}

@media (max-width:980px){.hub-grid{grid-template-columns:1fr;gap:var(--s6)}.hub-copy h1{max-width:none}}
@media (max-width:860px){.flow-steps{grid-template-columns:1fr;gap:var(--s4);padding:var(--s4) 0 0}.flow-steps li:nth-child(n){grid-column:auto;padding:0}}
@media (max-width:760px){.pgrid{grid-template-columns:1fr}
  .router{grid-template-columns:1fr}.router-tabs{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--rule)}
  .router-tabs [role=tab]{flex:none;border-bottom:0;border-right:1px solid var(--rule);white-space:nowrap;padding:14px 16px}
  .router-panel{padding:var(--s5) var(--s4)}.router-panel h3{font-size:24px;line-height:30px}.router-panel p{font-size:17px;line-height:26px}}
@media (max-width:760px){.prod-foot{flex-wrap:wrap}.prod-foot .tlink{white-space:normal}.hero-hub{padding-bottom:var(--s6)}}
/* Homepage variants: the switch wraps on narrow screens; the focused product leads the router, marked "Start here" */
.variant-switch{flex-wrap:wrap}
.hub-opt.is-focus{background:var(--mist);outline:1px solid var(--cobalt);outline-offset:-1px}
.hub-opt.is-focus .hub-t b::before{content:"Start here";display:block;margin-bottom:2px;font:600 10px/14px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--link)}

/* ---------- Blog (2026-10-20): index and long-form article ---------- */
.blog-hero{padding:var(--s6) 0 var(--s6);background:var(--hero-ground)}
.blog-hero h1{margin:0 0 var(--s3);font-size:clamp(40px,4.6vw,60px);line-height:1.04;letter-spacing:-.03em}
.blog-hero .lead{max-width:52ch;margin:0}
.blog-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 var(--s5)}
.blog-filters button{padding:9px 14px;border:1px solid var(--rule);background:var(--surface-raised);font:600 13px/1 var(--body);color:var(--text);cursor:pointer;border-radius:var(--r-ctl);
  transition:background-color var(--dur-ui) var(--ease),color var(--dur-ui) var(--ease),transform var(--dur-press) var(--ease-press)}
.blog-filters button:hover{background:var(--hover-fill)}
.blog-filters button:active{transform:scale(.97)}
.blog-filters button[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:var(--white)}
.post-topic,.art-topic{display:inline-block;font:600 11px/16px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--link);text-decoration:none}
.post-feature{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);border:1px solid var(--rule);background:var(--surface-raised);color:var(--text);text-decoration:none;
  transition:border-color var(--dur-ui) var(--ease)}
.post-feature:hover{border-color:var(--navy)}
.post-feature-art{display:grid;place-items:center;min-height:280px;background-color:var(--navy);
  background-image:repeating-linear-gradient(90deg,rgba(188,225,247,.14) 0 2px,transparent 2px 16px);background-size:40% 100%;background-position:right top;background-repeat:no-repeat}
.pf-code{padding:16px 20px;background:var(--white);border:1px solid var(--rule)}
.pf-code b{display:block;margin-top:4px;font:600 34px/1 var(--body);letter-spacing:.18em;color:var(--navy)}
.post-feature-copy{display:flex;flex-direction:column;gap:12px;padding:var(--s6) var(--s6) var(--s5)}
.post-feature-copy h2{margin:0;font-size:clamp(26px,2.6vw,34px);line-height:1.15;letter-spacing:-.02em}
.post-feature-copy p{margin:0;font-size:17px;line-height:27px;color:var(--text-muted)}
.post-meta{font-size:13px;color:var(--text-muted)}
.post-feature .tlink{margin-top:auto}
.post-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);margin-top:var(--s4)}
.post-card{display:flex;flex-direction:column;gap:10px;padding:var(--s4) var(--s5) var(--s4);border:1px solid var(--rule);background:var(--surface-raised)}
.post-card h3{margin:0;font-size:21px;line-height:27px}
.post-card p{margin:0;font-size:15px;line-height:23px;color:var(--text-muted)}
.post-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--rule)}
.blog-empty{margin:var(--s4) 0 0;color:var(--text-muted)}
body.preview-prod .post-grid{display:none}
.blog-sub{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s6);align-items:center}
.blog-sub h2{margin:0 0 var(--s2)}
.blog-sub-form .btn{width:auto}
.blog-sub-form.sent .form-status{border-color:var(--cobalt);color:var(--navy)}

/* article */
.read-progress{position:fixed;top:0;left:0;right:0;z-index:90;height:3px;pointer-events:none}
.read-progress i{display:block;height:100%;width:100%;background:var(--cobalt);transform-origin:left;transform:scaleX(var(--p,0))}
.art-head{padding:var(--s6) 0 var(--s5);background:var(--hero-ground);border-bottom:1px solid var(--rule)}
.art-wrap{max-width:860px}
.art-head h1{margin:12px 0 var(--s3);font-size:clamp(34px,4.2vw,54px);line-height:1.06;letter-spacing:-.03em}
.art-dek{margin:0 0 var(--s4);font-size:20px;line-height:31px;color:var(--text-muted);max-width:60ch}
.art-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;font-size:14px;color:var(--text-muted)}
.art-meta span+span::before{content:"";display:inline-block;width:4px;height:4px;margin:0 18px 2px 0;background:var(--sky);vertical-align:middle}
.art-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--s7);padding-top:var(--s6);padding-bottom:var(--s8);align-items:start}
.art-aside{position:sticky;top:24px;display:grid;gap:var(--s4)}
.art-toc h2{margin:0 0 12px;font:600 11px/16px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.art-toc ol{margin:0;padding:0;list-style:none;border-left:1px solid var(--rule)}
.art-toc a{display:block;padding:7px 0 7px 14px;margin-left:-1px;border-left:2px solid transparent;font-size:14px;line-height:20px;color:var(--text);text-decoration:none;
  transition:color var(--dur-ui) var(--ease),border-color var(--dur-ui) var(--ease)}
.art-toc a:hover{color:var(--link)}
.art-toc a[aria-current=true]{color:var(--text-heading);font-weight:600;border-left-color:var(--navy)}
.art-prod{padding:var(--s4);border:1px solid var(--rule);background:var(--surface-raised)}
.art-prod b{display:block;margin:6px 0 4px;font:600 20px/26px var(--display);color:var(--text-heading)}
.art-prod p{margin:0 0 12px;font-size:14px;line-height:21px;color:var(--text-muted)}
.art-body{max-width:68ch;font-size:18px;line-height:30px;color:var(--text)}
.art-body>p{margin:0 0 var(--s4)}
.art-body h2{margin:var(--s7) 0 var(--s3);font-size:30px;line-height:36px;letter-spacing:-.02em;scroll-margin-top:24px}
.art-body h3{margin:var(--s5) 0 8px;font-size:21px;line-height:28px}
.art-body h3+p{margin-top:0}
.art-body a:not(.tlink):not(.art-topic){color:var(--link);text-decoration:underline;text-underline-offset:3px}
.art-keys{padding:var(--s4) var(--s5);background:var(--mist);border:1px solid var(--rule)}
.art-keys h2{margin:0 0 8px;font:600 11px/16px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.art-keys .ul-check{margin:0}
.art-keys .ul-check li{font-size:17px;line-height:26px}
.art-list{margin:0 0 var(--s4);padding-left:22px}
.art-list li{margin-bottom:12px;padding-left:4px}
.art-list b{color:var(--text-heading)}
.art-callout{margin:var(--s5) 0;padding:var(--s4);border:1px solid var(--rule);border-top:3px solid var(--navy);background:var(--surface-raised);font-size:16px;line-height:26px}
.art-callout b{display:block;margin-bottom:4px;color:var(--text-heading)}
.art-fig{margin:var(--s5) 0}
.art-fig .panel{padding:var(--s5)}
.art-fig .ui{max-width:420px;margin:0 auto}
.art-fig .cap{margin-top:10px;font-size:13px;color:var(--text-muted)}
.art-end{display:flex;align-items:center;gap:12px;margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--rule)}
.art-end .micro{color:var(--text-muted)}
@media (max-width:980px){.art-grid{grid-template-columns:1fr;gap:var(--s5)}.art-aside{position:static;grid-template-columns:1fr 1fr}.art-body{max-width:none}}
@media (max-width:820px){.post-feature,.blog-sub{grid-template-columns:1fr}.post-feature-art{min-height:180px}.post-feature-copy{padding:var(--s5) var(--s4)}.post-grid{grid-template-columns:1fr}}
@media (max-width:600px){.art-aside{grid-template-columns:1fr}.art-body{font-size:17px;line-height:28px}.art-body h2{font-size:25px;line-height:31px}.art-dek{font-size:18px;line-height:28px}}
.post-foot .rv-tag{position:static;display:inline-block}
.art-body{max-width:680px}
@media (max-width:980px){.art-prod{display:none}}
/* LinkedIn follow button in the footer (every page) */
.site-footer .li-follow{display:inline-flex;align-items:center;gap:10px;margin-top:4px;padding:9px 14px;border:1px solid rgba(255,255,255,.4);border-radius:var(--r-ctl);
  color:var(--white);font:600 14px/1 var(--body);text-decoration:none;transition:background-color var(--dur-ui) var(--ease),transform var(--dur-press) var(--ease-press)}
.site-footer .li-follow:hover{background:rgba(255,255,255,.1);text-decoration:none}
.site-footer .li-follow:active{transform:scale(.97)}
.site-footer .li-follow svg{width:18px;height:18px;fill:currentColor;flex:none}
/* Problem cards on dark grounds: brighter body text (AAA on Navy and Midnight); the "Without CourtAlert" rule lines up across a row */
.dark .pcard p,.navy .pcard p,.opener .pcard p{color:#e8edf5}
.dark .pcard .without b,.navy .pcard .without b{color:#d5dbe5}
@supports (grid-template-rows:subgrid){.cards>.pcard{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:0;align-content:start}.cards>.pcard .without{align-self:stretch;margin-top:var(--s4)}}
/* ECF Inform walkthrough caption sits on the Navy panel */
.j-visual .j-cap,.panel .j-cap{color:#d5dbe5}
/* Text on Navy and Midnight grounds gets its own color instead of inheriting it, so it stays light in every browser
   setting. Forms, product screens and review notes inside those sections keep their own colors. */
:is(.navy,.dark,.calc-band) :is(p,li,small,blockquote,figcaption,dd,dt):not(.form-card *,.ui *,.vd *,.rv-note,.rv-note *,.res-soon *){color:#e8edf5}
:is(.navy,.dark,.calc-band) :is(strong,b):not(.form-card *,.ui *,.vd *,.rv-note *,.res-soon *){color:#fff}
:is(.navy,.dark,.calc-band) a:not(.btn,.form-card *,.ui *,.vd *) strong{color:inherit}
/* Section bar: "Back to top" sits just left of "Book a demo" */
.ca-bar .ca-top{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding:8px 10px;border-radius:var(--r-ctl);color:var(--text-muted);
  font:600 11px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  transition:color var(--dur-ui) var(--ease),background-color var(--dur-ui) var(--ease),transform var(--dur-press) var(--ease-press)}
.ca-bar .ca-top svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--dur-ui) var(--ease)}
.ca-bar .ca-top:hover{color:var(--text-heading);background:var(--hover-fill)}
.ca-bar .ca-top:hover svg{transform:translateY(-2px)}
.ca-bar .ca-top:active{transform:scale(.97)}
.ca-bar .ca-top+.btn{margin-left:0}
.ca-bar .wrap{gap:16px}
@media (max-width:820px){.ca-bar .ca-top span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.ca-bar .ca-top{padding:10px}}
/* ECF Inform hero (2026-10-20): headline and intro centered on each other; the form card is gone (Book a demo goes to the
   closing form); the second row is the inline flow diagram */
.hero-mt .mt-top{align-items:start}
.hero-mt .crumbs{margin-bottom:var(--s4)}
.hero-mt .mt-tabs{margin-top:6px}
.hero-mt{padding-bottom:var(--s7)}
.mt-flow{margin:var(--s6) 0 0;padding:var(--s4);background:var(--surface-raised);border:1px solid var(--rule)}
.mt-flow-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.mt-flow svg{display:block;width:100%;height:auto;min-width:720px}
.mt-flow .cap{margin:12px 0 0;font-size:13px;color:var(--text-muted)}
@media (max-width:760px){.mt-flow{padding:var(--s3)}.mt-flow .cap::after{content:" Scroll sideways to see the whole flow."}}
/* ECF Inform: the time-saved chart is the hero graphic at full width; the flow diagram opens How it works */
.hero-mt>.wrap>.mt-chart{margin-top:var(--s6)}
.mt-flow-how{margin:var(--s5) 0 var(--s6)}
/* ECF Inform hero (rev. 2026-10-20): title, tabs and actions on the left; a compact time-saved chart beside them */
.mt-top.mt-top-chart{grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--s6);align-items:center}
.mt-top-chart .mt-title{margin-bottom:var(--s5)}
.mt-top-chart .mt-tabs{margin-top:0}
.mt-chart-compact{gap:var(--s3);padding:var(--s4) var(--s4) var(--s3)}
.mt-chart-compact .mt-chart-head{gap:var(--s2) var(--s4)}
.mt-chart-compact .mt-chart-head .eyebrow{margin-bottom:6px}
.mt-chart-compact .mt-stat{font-size:32px}
.mt-chart-compact .mt-stat small{margin-top:6px;font-size:14px;line-height:20px}
.mt-chart-compact .mt-legend{font-size:13px;gap:var(--s3)}
.mt-chart-compact .mt-plot{flex:none;height:210px;min-height:0}
.mt-chart-compact .mt-note{font-size:11.5px;line-height:17px}
@media (max-width:980px){.mt-top.mt-top-chart{grid-template-columns:1fr;gap:var(--s5)}}

/* ---------- Events (2026-10-20): hub, in-person and webinar templates ---------- */
.ev-filters{margin-top:var(--s5)}
.ev-sec{padding-top:var(--s6);padding-bottom:var(--s6)}
.ev-h{margin:0 0 var(--s4);font-size:28px;line-height:34px}
.ev-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.ev-grid:empty{display:none}
.ev-empty{margin:0;color:var(--text-muted)}
.ev-card{display:flex}
.ev-link{display:flex;flex-direction:column;gap:10px;width:100%;padding:var(--s4) var(--s5);border:1px solid var(--rule);background:var(--surface-raised);color:var(--text);text-decoration:none;
  transition:border-color var(--dur-ui) var(--ease),transform var(--dur-press) var(--ease-press)}
.ev-link:hover{border-color:var(--navy)}
.ev-link:active{transform:scale(.99)}
.ev-top{display:flex;align-items:center;gap:10px}
.ev-type,.ev-kind{font:600 11px/16px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--link)}
.ev-badge:empty{display:none}
.ev-badge{padding:3px 7px;background:var(--ice);color:var(--navy);font:600 10px/1 var(--body);letter-spacing:.12em;text-transform:uppercase}
.ev-card[data-state=live] .ev-badge{background:var(--navy);color:var(--white)}
.ev-link h3{margin:0;font-size:21px;line-height:27px}
.ev-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;font-size:14px;color:var(--text-muted)}
.ev-meta span+span::before{content:"";display:inline-block;width:4px;height:4px;margin:0 14px 2px 0;background:var(--sky);vertical-align:middle}
.ev-link>p:not(.ev-meta){margin:0;font-size:15px;line-height:23px;color:var(--text-muted)}
.ev-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding-top:12px;border-top:1px solid var(--rule)}
.ev-foot .rv-tag,.ev-sample{position:static;display:inline-block}
.ev-sample{margin-left:10px;vertical-align:2px}

.ev-hero{padding:var(--s6) 0 var(--s7);background:var(--hero-ground)}
.ev-hero h1{margin:var(--s3) 0 var(--s3);font-size:clamp(36px,4.4vw,58px);line-height:1.05;letter-spacing:-.03em;max-width:20ch}
.ev-hero .lead{max-width:56ch;margin:var(--s4) 0 0}
.ev-hero .cta-row{align-items:center;gap:var(--s4);margin-top:var(--s4)}
.ev-facts{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;font-size:16px;font-weight:600;color:var(--text-heading)}
.ev-facts span+span::before{content:"";display:inline-block;width:4px;height:4px;margin:0 18px 3px 0;background:var(--sky);vertical-align:middle}
.ev-hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s6);align-items:start}
.ev-hero-grid>div:not(:first-child){margin-top:var(--s6)}
.ev-switch{display:inline-flex;align-items:center;gap:4px;margin:0 0 var(--s4);padding:4px;border:1px dashed #c9a227;background:#fff6d6;font:600 11px/1 var(--body);color:#5c4800}
.ev-switch span{padding:0 6px;letter-spacing:.08em;text-transform:uppercase}
.ev-switch button{padding:6px 10px;border:0;background:none;font:600 12px/1 var(--body);color:#5c4800;cursor:pointer;border-radius:var(--r-ctl)}
.ev-switch button[aria-pressed=true]{background:#5c4800;color:#fff}
.ev-show{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);margin-top:var(--s5)}
.ev-book{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s6);align-items:start}
.ev-book h2{margin:0 0 var(--s3)}
.ev-more{display:flex;justify-content:center}
.ev-agenda{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s7)}
.ev-agenda h2{margin:0 0 var(--s3);font-size:28px;line-height:34px}
.ev-speakers{display:grid;gap:var(--s3)}
.ev-sp{display:grid;grid-template-columns:56px 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center}
.ev-av{grid-row:span 2;width:56px;height:56px;border-radius:50%;background:var(--ice)}
.ev-sp b{align-self:end;color:var(--text-heading)}
.ev-sp span:last-child{align-self:start;font-size:14px;color:var(--text-muted)}
[data-join][aria-disabled=true]{opacity:.5;pointer-events:none}
@media (max-width:900px){.ev-hero-grid,.ev-book,.ev-agenda{grid-template-columns:1fr}.ev-show{grid-template-columns:1fr}.ev-hero-grid>div:not(:first-child){margin-top:0}}
@media (max-width:760px){.ev-grid{grid-template-columns:1fr}}
/* Info-only event cards (past conferences): no link, the role sits in the footer */
div.ev-link{cursor:default}
div.ev-link:hover{border-color:var(--rule)}
div.ev-link:active{transform:none}
.ev-role{font-size:14px;font-weight:600;color:var(--text-heading)}

/* ---------- Informational service pages (2026-10-20): Realtime Complaints, New York court monitoring ----------
   These explain the service; every working action is an .app-link that opens the live CourtAlert app. */
.hero-info{padding:var(--s6) 0 var(--s7);background:var(--hero-ground)}
.info-top{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--s6);align-items:start}
.info-top h1{margin:0;font-size:clamp(38px,4.6vw,60px);line-height:1.04;letter-spacing:-.03em}
.info-top .lead{margin:0}
.info-top .mproof{justify-content:flex-start}
.info-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);margin-top:var(--s5)}
.info-card{display:flex;flex-direction:column;gap:10px;padding:var(--s5);border:1px solid var(--rule);background:var(--surface-raised)}
.info-card h3{margin:0;font-size:24px;line-height:30px}
.info-card>p{margin:0;color:var(--text-muted)}
.info-card .ul-check{margin:var(--s2) 0 0}
.info-card .eyebrow{color:var(--link)}
.info-price{margin-top:auto!important;padding-top:var(--s3);border-top:1px solid var(--rule);font-weight:600;color:var(--text-heading)!important}
.info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s6);margin-top:var(--s5)}
.info-mini{padding-top:var(--s4);border-top:1px solid var(--rule)}
.info-mini h3{margin:0 0 8px;font-size:20px;line-height:26px}
.info-mini p{margin:0 0 12px;font-size:15px;line-height:23px;color:var(--text-muted)}
.info-aside{margin:var(--s4) 0 0;font-size:15px;color:var(--text-muted)}
.info-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s6);align-items:start}
.info-split h2{margin:0 0 var(--s3)}
.info-split .lead{margin:0}
.info-price-big{margin:0 0 var(--s3);font:600 44px/1.1 var(--display);letter-spacing:-.025em;color:var(--text-heading)}
.info-price-big span{display:block;margin-top:6px;font:400 16px/24px var(--body);letter-spacing:0;color:var(--text-muted)}
.rc-prices{grid-template-columns:repeat(4,minmax(0,1fr))}
/* app links: an arrow out of a box marks "opens the CourtAlert app" */
.app-link{display:inline-flex;align-items:center;gap:6px;margin:0 14px 6px 0;font-weight:600;font-size:14px;color:var(--link);text-decoration:none;white-space:nowrap}
.app-link::after{content:"";width:12px;height:12px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 1h4v4M11 1 5.5 6.5M9.5 7.5V11h-8.5V2.5H5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 1h4v4M11 1 5.5 6.5M9.5 7.5V11h-8.5V2.5H5'/%3E%3C/svg%3E") center/contain no-repeat}
.app-link:hover{text-decoration:underline;text-underline-offset:3px}
.app-panel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s6);align-items:start}
.app-panel h2{margin:0 0 var(--s3)}
.app-panel .lead{margin:0}
.app-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s5);margin:0;padding:0;list-style:none}
.app-links li{padding:14px 0;border-top:1px solid var(--rule)}
.app-links li span{display:block;font-size:13px;color:var(--text-muted)}
.app-links .app-link{margin:0;white-space:normal}
/* court-by-court table */
.court-table-wrap{margin-top:var(--s5);overflow-x:auto;border:1px solid var(--rule);background:var(--surface-raised)}
.court-table{width:100%;border-collapse:collapse;font-size:15px;line-height:23px}
.court-table th,.court-table td{padding:16px 18px;border-top:1px solid var(--rule);text-align:left;vertical-align:top}
.court-table thead th{border-top:0;background:var(--mist);font:600 11px/16px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.court-table tbody th{width:20%;font-weight:600;color:var(--text-heading)}
.court-table td:nth-child(2){width:42%;color:var(--text)}
.court-table td:nth-child(3){width:16%;color:var(--text-muted)}
.court-table td:nth-child(4){width:22%}
@media (max-width:980px){.info-top,.info-split,.app-panel{grid-template-columns:1fr;gap:var(--s4)}.rc-prices{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.info-cards,.info-grid,.app-links{grid-template-columns:1fr}
  .court-table thead{display:none}.court-table,.court-table tbody,.court-table tr,.court-table th,.court-table td{display:block;width:auto!important}
  .court-table tr{padding:14px 16px;border-top:1px solid var(--rule)}.court-table tr:first-child{border-top:0}
  .court-table th,.court-table td{padding:4px 0;border:0}
  .court-table td:nth-child(3)::before{content:"Added by: ";font-weight:600}}

/* ---------- Case Management hero visual (2026-10-21) ----------
   Copy on the left (chip, headline, lead, buttons, proof), the example panel on the right. The demo form is a
   popout under the hero "Book a demo" button (pages.js).
   Four steps on the navy panel, one at a time: a court notice arrives, it is docketed in three clicks, the
   deadlines are calculated from court rules, and they land on the attorney's Outlook calendar. Fictional firm,
   case and dates. pages.js adds .cmf-js: the steps stack in one grid cell (the panel keeps the tallest step's
   height), play through once when the panel comes into view, and the arrows and dots move between them.
   Without JavaScript every step shows, stacked. */
.hero-pv .chip-link{margin-bottom:var(--s4)}
.cmf-panel{padding:var(--s4) var(--s5) var(--s3)}
.cmf-panel figure.cmf{max-width:540px;width:100%;display:grid;gap:var(--s3)}
.cmf-steps{display:grid;gap:var(--s3)}
.cmf-step{display:grid;gap:8px;align-content:start}
.cmf-lab{display:flex;align-items:center;gap:10px;font:600 12px/16px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--ice)}
.cmf-lab b{display:inline-grid;place-items:center;width:23px;height:23px;border:1px solid var(--ice);border-radius:50%;font-size:11px;letter-spacing:0;color:#fff}
.cmf-card{box-shadow:none;font-size:13px;line-height:18px}
.cmf-card .ui-top{padding:8px 14px}
.cmf-card .ui-body{padding:12px 14px}
.cmf-card p{margin:0}
.cmf-subj{font-weight:600;color:var(--navy)}
.cmf-att{display:inline-flex;align-items:center;gap:6px;margin-top:8px!important;padding:3px 8px;border:1px solid var(--gray-300);font-size:12px;color:var(--ink)}
.cmf-att svg{width:14px;height:14px;fill:none;stroke:var(--navy);stroke-width:1.3}
.cmf-clicks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cmf-clicks li{display:flex;align-items:center;gap:10px}
.cmf-clicks i{flex:none;width:18px;height:18px;border-radius:50%;background:var(--navy);position:relative}
.cmf-clicks i::after{content:"";position:absolute;left:6px;top:3px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.cmf-dl{list-style:none;margin:0;padding:0;display:grid}
.cmf-dl li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center;padding:7px 0;border-top:1px solid var(--rule)}
.cmf-dl li:first-child{border-top:0;padding-top:0}
.cmf-dl time{display:grid;justify-items:center;padding:3px 0;border:1px solid var(--gray-300);font:700 17px/20px var(--body);color:var(--navy);font-variant-numeric:tabular-nums}
.cmf-dl time span{font:600 10px/12px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.cmf-dl b{display:block;font-weight:600;color:var(--ink)}
.cmf-dl small{display:block;font-size:12px;line-height:16px;color:var(--text-muted)}
/* step 1: ECF mailbox with two notices; the first is the one the next steps follow */
.cmf-card .ui-body.cmf-inbox{padding:0}
.cmf-note{padding:10px 14px;border-top:1px solid var(--rule)}
.cmf-note:first-child{border-top:0}
.cmf-note.is-sel{background:#f2f8fd;box-shadow:inset 3px 0 0 var(--navy)}
.cmf-meta{display:flex;justify-content:space-between;gap:12px;margin:0 0 4px!important;font:600 10px/14px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.cmf-note .cmf-att{margin-top:6px!important}
/* step 2: the saved docket entry */
.cmf-entry{margin-top:12px;padding:8px 10px;border:1px solid var(--rule);background:#f7f9fb;font-size:12px;line-height:17px}
.cmf-entry p:last-child{color:var(--ink)}
/* step 4: four-week calendar, Sun Nov 22 to Sat Dec 19 */
.cmf-wd,.cmf-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cmf-wd span{padding:0 0 4px 6px;font:600 10px/14px var(--body);letter-spacing:.1em;color:var(--text-muted)}
.cmf-grid{border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.cmf-day{min-height:56px;padding:4px 5px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:3px;min-width:0}
.cmf-day.we{background:#f7f9fb}
.cmf-day .n{font:600 11px/14px var(--body);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.cmf-day.we .n{color:var(--text-muted)}
.cmf-day em{display:block;font:600 10px/12px var(--body);font-style:normal;color:#fff;background:var(--navy);padding:3px 4px;overflow-wrap:anywhere}
.cmf-day.hit{background:var(--ice)}
.cmf-day.hit .n{color:var(--navy)}
.cmf-day small{font-size:10px;line-height:12px;color:var(--text-muted)}
.cmf-card .st{margin-top:10px;padding-top:10px}
/* arrows and step dots */
.cmf-nav{display:flex;align-items:center;justify-content:center;gap:var(--s3)}
.cmf-nav[hidden]{display:none}
.cmf-arrow{width:36px;border-radius:var(--r-ctl);height:36px;display:grid;place-items:center;background:transparent;border:1px solid rgba(188,225,247,.6);color:#fff;cursor:pointer;transition:background-color var(--dur-ui) var(--ease),transform var(--dur-press) var(--ease-press)}
.cmf-arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.cmf-arrow:hover{background:rgba(188,225,247,.16)}
.cmf-arrow:active{transform:scale(.95)}
.cmf-arrow:disabled{opacity:.35;cursor:default;background:transparent;transform:none}
.cmf-dots{display:flex;gap:4px}
.cmf-dots button{width:24px;height:24px;display:grid;place-items:center;padding:0;background:none;border:0;cursor:pointer}
.cmf-dots button::before{content:"";width:8px;height:8px;border-radius:50%;border:1px solid var(--ice);transition:background-color var(--dur-ui) var(--ease),width var(--dur-ui) var(--ease)}
.cmf-dots button[aria-current="step"]::before{background:var(--ice);width:20px;border-radius:var(--r-full)}
.cmf-arrow:focus-visible,.cmf-dots button:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.cmf .cap{margin:0;text-align:center}
@media (pointer:coarse){.cmf-arrow{width:44px;height:44px}.cmf-dots button{width:32px;height:44px}}
/* one step at a time once pages.js runs */
.cmf-js .cmf-steps{grid-template-areas:"s"}
.cmf-js .cmf-step{grid-area:s;visibility:hidden;opacity:0;transform:translateX(calc(var(--dir,1) * 12px))}
.cmf-js .cmf-step.is-on{visibility:visible;opacity:1;transform:none;transition:opacity 360ms var(--ease),transform 360ms var(--ease)}
.cmf-js .cmf-step.is-off{transition:opacity 200ms var(--ease),transform 200ms var(--ease),visibility 0s 200ms;transform:translateX(calc(var(--dir,1) * -12px))}
.cmf-js [data-t]{opacity:0;transform:translateY(6px)}
.cmf-js [data-t].on{opacity:1;transform:none;transition:opacity 360ms var(--ease),transform 360ms var(--ease)}
.cmf-js .cmf-clicks li i{transform:scale(.4);opacity:0}
.cmf-js .cmf-clicks li.on i{transform:none;opacity:1;transition:transform 300ms var(--ease) 120ms,opacity 300ms var(--ease) 120ms}
.cmf-js .cmf-day.hit[data-t]{opacity:1;transform:none;background:#fff}
.cmf-js .cmf-day.hit[data-t] em{opacity:0;transform:translateY(4px)}
.cmf-js .cmf-day.hit.on{background:var(--ice);transition:background-color 360ms var(--ease)}
.cmf-js .cmf-day.hit.on em{opacity:1;transform:none;transition:opacity 300ms var(--ease) 80ms,transform 300ms var(--ease) 80ms}
.cmf-js .st.on i{animation:vd-ping 1.2s var(--ease) 200ms}
@media (prefers-reduced-motion:reduce){.cmf-js .cmf-step,.cmf-js .cmf-step.is-on,.cmf-js .cmf-step.is-off{transform:none}.cmf-js [data-t],.cmf-js .cmf-clicks li i,.cmf-js .cmf-day.hit[data-t] em{opacity:1;transform:none}.cmf-js .cmf-day.hit[data-t]{background:var(--ice)}}
@media (max-width:600px){.cmf-panel{padding:var(--s4) var(--s3) var(--s3)}.cmf-card .ui-top span:last-child{display:none}.cmf-day{min-height:44px;padding:3px}.cmf-day em{font-size:0;line-height:0;height:6px;padding:0;margin-top:auto}.cmf-day small{display:none}.cmf-day .n{font-size:10px}}

/* Product hero with a visual (Case Management, ECF Vault; 2026-10-21): .hero-pv puts the copy on the left and the
   example panel on the right; the demo form opens in place from the hero button (.hero-pop, pages.js). */
.hero-pv .grid{grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:var(--s6);align-items:start}
.hero-pv h1{font-size:clamp(40px,4.4vw,60px)}
.hero-pv .lead{margin:var(--s4) 0 0;max-width:34em}
.hero-pv .cta-row{margin-top:var(--s5)}
.hero-pop{display:none;width:min(440px,100%);margin-top:var(--s4)}
.hero-pop.open{display:block;animation:hp-in 200ms var(--ease) both}
@keyframes hp-in{from{opacity:0;transform:translateY(-6px)}}
.hero-pop .form-card{border-top:3px solid var(--navy)}
.hero-pop .form-card h3{padding-right:48px}
.hero-pop-close{position:absolute;border-radius:var(--r-ctl);top:12px;right:12px;z-index:2;width:40px;height:40px;display:grid;place-items:center;background:#fff;border:1px solid var(--gray-300);cursor:pointer;color:var(--navy)}
.hero-pop-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.hero-pop-close:hover{background:var(--hover-fill)}
.hero-pop-close:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.hero-pop.open{animation:none}}
@media (max-width:900px){.hero-pv .grid{grid-template-columns:1fr}}
@media (max-width:820px){.hero-pop{width:auto}}
/* Case Management: problem cards and steps without index numbers (review call 2026-10-27) */
.cm-problem .pcard p{font-size:18px;line-height:28px}
@supports (grid-template-rows:subgrid){.cm-problem.cards>.pcard{grid-row:span 3}}
.cm-steps .step .cm-wk{margin:0 0 var(--s2);font:600 12px/16px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--text-heading)}
/* Case Management streamlined flow: one card per step. The PDF is filed automatically, then the docketer reviews,
   saves, and saves and notifies. When the figure comes into view each step completes in turn (a pointer presses the
   docketer's buttons); without JS or under reduced motion every step shows as done. */
.dk{margin:var(--s6) 0 0}
.dk-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4);margin:0;padding:0;list-style:none}
.dk-step{display:grid;grid-template-rows:auto 1fr auto;gap:10px;min-width:0}
.dk-lab{display:flex;flex-direction:column;gap:2px;margin:0;font:600 22px/28px var(--display);color:var(--navy)}
.dk-lab b{font:600 12px/16px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.dk-step.is-auto .dk-lab b{color:var(--cobalt)}
/* All four steps share one set of row tracks, so labels, tiles and result lines line up and every tile is the same height. */
@supports (grid-template-rows:subgrid){.dk-row{grid-template-rows:auto auto auto}.dk-step{grid-row:span 3;grid-template-rows:subgrid}}
.dk-card{display:flex;flex-direction:column;min-height:244px;background:#fff;border:1px solid var(--rule)}
.dk-card .ui-top{gap:16px}
.dk-step.is-auto .dk-card{border-color:var(--cobalt)}
.dk-card .ui-body{position:relative;display:flex;flex-direction:column;gap:6px;flex:1;padding:14px 16px 16px}
.dk-meta{display:flex;justify-content:space-between;margin:0;font:500 11px/16px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.dk-t{margin:0;font:600 15px/21px var(--body);color:var(--ink)}
.dk-s{margin:0;font-size:14px;line-height:20px;color:var(--text-muted)}
.dk-tag{align-self:flex-start;margin:auto 0 0;padding:2px 8px;background:var(--ice);font:600 12px/18px var(--body);color:var(--navy);border-radius:var(--r-ctl)}
.dk-step:not(.is-auto) .dk-tag{margin-top:2px}
.dk-fields{display:grid;gap:4px;margin:0}
.dk-fields div{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border-bottom:1px solid var(--rule);font-size:14px;line-height:20px}
.dk-fields dt{color:var(--text-muted)}
.dk-fields dd{margin:0;font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums}
.dk-file{display:flex;align-items:center;gap:8px;margin:0;font:600 14px/20px var(--body);color:var(--ink)}
.dk-file svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--navy);stroke-width:1.5;stroke-linejoin:round}
.dk-path{margin:0;font-size:14px;line-height:20px;color:var(--text-muted)}
.dk-path span{font-weight:600;color:var(--navy)}
.dk-dl{display:flex;gap:12px;align-items:center}
.dk-dl time{display:grid;place-items:center;flex:none;width:48px;padding:4px 0;background:var(--navy);color:#fff;font:600 22px/1 var(--display)}
.dk-dl time span{font:600 10px/14px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ice)}
.dk-dl b{display:block;font-size:15px;line-height:21px;color:var(--ink)}
.dk-dl small{display:block;font-size:13px;line-height:18px;color:var(--text-muted)}
.dk-team{margin:0;font-size:14px;line-height:20px;color:var(--ink)}
.dk-team span{display:block;font:500 11px/16px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.dk-btn{position:relative;align-self:flex-start;margin-top:auto;padding:8px 16px;border:1.5px solid var(--navy);background:var(--navy);color:#fff;font:600 14px/20px var(--body);border-radius:var(--r-ctl)}
.dk-cur{position:absolute;right:-14px;bottom:-16px;width:22px;height:22px;fill:#fff;stroke:var(--ink);stroke-width:1.1;stroke-linejoin:round;opacity:0;pointer-events:none}
.dk-out{display:flex;align-items:flex-start;gap:8px;margin:0;font:600 15px/22px var(--body);color:var(--navy)}
.dk-out svg{width:20px;height:20px;flex:none;margin-top:1px;padding:3px;background:var(--navy);fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;border-radius:50%}
.dk-vs{position:relative;display:grid;gap:12px;margin-top:var(--s5);padding:var(--s4);border:1px solid var(--rule);background:#fff}
.dk-vs-row{display:grid;grid-template-columns:140px 1fr;align-items:center;gap:var(--s3)}
.dk-vs-row>p{margin:0;font:600 12px/16px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.dk-vs-row.is-ca>p{color:var(--navy)}
.dk-vs-row ol{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.dk-vs-row li{padding:5px 10px;font:500 13px/18px var(--body);border-radius:var(--r-ctl)}
.dk-vs-row.is-hand li{background:var(--gray-200);color:var(--ink)}
.dk-vs-row.is-ca li{background:var(--navy);color:#fff;font-weight:600}
.dk-vs-row.is-ca li.is-auto{background:#fff;color:var(--cobalt);box-shadow:inset 0 0 0 1.5px var(--cobalt)}
.dk-vs .rv-flag{position:absolute;top:8px;right:8px}
.js .dk[data-dkflow]:not(.in) .dk-btn{background:#fff;color:var(--navy)}
.js .dk[data-dkflow]:not(.in) .dk-out,.js .dk[data-dkflow]:not(.in) .dk-tag,.js .dk[data-dkflow]:not(.in) .dk-vs-row.is-ca li{opacity:0}
.dk.in .dk-btn{animation:dkbtn 360ms var(--ease) both}
.dk.in .dk-cur{animation:dkcur 900ms var(--ease) both}
.dk.in .dk-out,.dk.in .dk-tag,.dk.in .dk-vs-row.is-ca li{animation:dkin 340ms var(--ease) both}
.dk.in .dk-step:nth-child(1) .dk-tag{animation-delay:300ms}.dk.in .dk-step:nth-child(1) .dk-out{animation-delay:600ms}
.dk.in .dk-step:nth-child(2) .dk-tag{animation-delay:900ms}.dk.in .dk-step:nth-child(2) .dk-cur{animation-delay:1000ms}.dk.in .dk-step:nth-child(2) .dk-btn{animation-delay:1500ms}.dk.in .dk-step:nth-child(2) .dk-out{animation-delay:1700ms}
.dk.in .dk-step:nth-child(3) .dk-cur{animation-delay:2100ms}.dk.in .dk-step:nth-child(3) .dk-btn{animation-delay:2600ms}.dk.in .dk-step:nth-child(3) .dk-out{animation-delay:2800ms}
.dk.in .dk-step:nth-child(4) .dk-cur{animation-delay:3200ms}.dk.in .dk-step:nth-child(4) .dk-btn{animation-delay:3700ms}.dk.in .dk-step:nth-child(4) .dk-out{animation-delay:3900ms}
.dk.in .dk-vs-row.is-ca li:nth-child(1){animation-delay:600ms}.dk.in .dk-vs-row.is-ca li:nth-child(2){animation-delay:1700ms}.dk.in .dk-vs-row.is-ca li:nth-child(3){animation-delay:2800ms}.dk.in .dk-vs-row.is-ca li:nth-child(4){animation-delay:3900ms}
@keyframes dkbtn{from{background:#fff;color:var(--navy)}to{background:var(--navy);color:#fff}}
@keyframes dkcur{0%{opacity:0;transform:translate(14px,12px)}45%{opacity:1;transform:none}60%{transform:scale(.85)}75%{opacity:1;transform:none}100%{opacity:0}}
@keyframes dkin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.dk.in .dk-btn,.dk.in .dk-cur,.dk.in .dk-out,.dk.in .dk-tag,.dk.in .dk-vs-row.is-ca li{animation:none}}
@media (max-width:1080px){.dk-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.dk-row{grid-template-columns:1fr}.dk-vs-row{grid-template-columns:1fr;gap:8px}}
/* Streamlined flow headline: second half on its own line, so it and the 620px lead under it end at about the same width. */
#how .ledger h2 .tone{display:block}
/* CourtAlert Verity called out as the newest case management software (Case Management and home). */
.cm-copy .lead .cm-verity{font-weight:700;color:var(--text-heading)}
.new-label{display:inline-block;margin:0 0 var(--s2);padding:3px 10px;background:var(--navy);color:#fff;font:600 12px/18px var(--body);letter-spacing:.08em;text-transform:uppercase;border-radius:var(--r-ctl)}
/* Home: the calendar carousel sits in the hero's right column; the cards carry the problem each product starts with. */
.hero-hub .cmf-panel{align-self:center}
.hub-copy .chip-link{margin-bottom:var(--s4)}
.prod .prod-fix{display:block;margin:0 0 10px;font-size:14px;line-height:20px;color:var(--text-muted)}
.prod .prod-fix b{display:block;font:600 11px/16px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--text-heading)}
#verity .new-label{display:table}
/* Home hero carousel: each tile is a product, named in the label, with a link to its page. */
.cmf-lab b.cmf-prod{width:auto;height:auto;padding:4px 8px;border-radius:var(--r-ctl);font-size:11px;letter-spacing:.06em}
.cmf-more{justify-self:start;font:600 14px/20px var(--body);color:var(--ice);text-decoration:underline;text-underline-offset:3px}
.cmf-more:hover{color:#fff}
.cmf-card .code-box{margin:8px 0;padding:10px 12px}
.cmf-card .code-box .code{font-size:28px}
.cmf-card.alert-ui .entry{padding:8px 0}
.cmf-card.alert-ui .entry p{font-size:13px;line-height:19px}
.cmf-steps-done{margin-top:10px}
/* Home carousel tiles: the product name sits on its own line over the description, and every card fills the same
   height so the tiles match. */
.hero-hub .cmf-step{grid-template-rows:auto 1fr auto}
.hero-hub .cmf-lab{flex-direction:column;align-items:flex-start;gap:6px}
.hero-hub .cmf-lab b.cmf-prod{white-space:nowrap}
.hero-hub .cmf-card{display:flex;flex-direction:column}
.hero-hub .cmf-card .ui-body{flex:1}

/* ECF Inform (2026-10-28): the Case Management step strip, six automatic steps in three columns, and the
   "only the exceptions" band that carries the time-saved chart. Steps land one after another, 500ms apart. */
.dk-six .dk-row{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:var(--s6)}
@supports (grid-template-rows:subgrid){.dk-six .dk-row{grid-template-rows:repeat(2,auto auto auto)}}
.dk-six .dk-card{min-height:212px}
.dk-six .dk-file{overflow-wrap:anywhere}
.dk-six.in .dk-step:nth-child(1) .dk-tag{animation-delay:300ms}.dk-six.in .dk-step:nth-child(1) .dk-out{animation-delay:550ms}
.dk-six.in .dk-step:nth-child(2) .dk-tag{animation-delay:800ms}.dk-six.in .dk-step:nth-child(2) .dk-out{animation-delay:1050ms}
.dk-six.in .dk-step:nth-child(3) .dk-tag{animation-delay:1300ms}.dk-six.in .dk-step:nth-child(3) .dk-out{animation-delay:1550ms}
.dk-six.in .dk-step:nth-child(4) .dk-tag{animation-delay:1800ms}.dk-six.in .dk-step:nth-child(4) .dk-out{animation-delay:2050ms}
.dk-six.in .dk-step:nth-child(5) .dk-tag{animation-delay:2300ms}.dk-six.in .dk-step:nth-child(5) .dk-out{animation-delay:2550ms}
.dk-six.in .dk-step:nth-child(6) .dk-tag{animation-delay:2800ms}.dk-six.in .dk-step:nth-child(6) .dk-out{animation-delay:3050ms}
.dk-six.in .dk-vs-row.is-ca li:nth-child(1){animation-delay:550ms}.dk-six.in .dk-vs-row.is-ca li:nth-child(2){animation-delay:1050ms}.dk-six.in .dk-vs-row.is-ca li:nth-child(3){animation-delay:1550ms}.dk-six.in .dk-vs-row.is-ca li:nth-child(4){animation-delay:2050ms}.dk-six.in .dk-vs-row.is-ca li:nth-child(5){animation-delay:2550ms}.dk-six.in .dk-vs-row.is-ca li:nth-child(6){animation-delay:3050ms}.dk-six.in .dk-vs-row.is-ca li:nth-child(7){animation-delay:3500ms}
@media (max-width:1080px){.dk-six .dk-row{grid-template-columns:repeat(2,minmax(0,1fr))}@supports (grid-template-rows:subgrid){.dk-six .dk-row{grid-template-rows:repeat(3,auto auto auto)}}}
@media (max-width:640px){.dk-six .dk-row{grid-template-columns:1fr;grid-template-rows:none}.dk-six .dk-step{grid-row:auto;grid-template-rows:auto 1fr auto}}
.ei-time{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:var(--s7);align-items:center}
.ei-time h2{margin:0}
.ei-time .lead{margin:var(--s4) 0 0}
.ei-time .ul-check{margin:var(--s5) 0}
@media (max-width:900px){.ei-time{grid-template-columns:1fr;gap:var(--s6)}}

/* ECF Inform (2026-10-28, second pass): the step strip sits on the dark ground with numbered steps, the problem
   cards move onto white, and the time-saved chart is the hero visual. */
.dk-lab .dk-n{display:inline-grid;place-items:center;width:24px;height:24px;margin-right:8px;border-radius:50%;background:var(--navy);color:#fff;font:600 12px/1 var(--body);letter-spacing:0;font-style:normal}
.dk-lab b{display:flex;align-items:center}
.dark .dk-lab{color:#fff}
.dark .dk-step.is-auto .dk-lab b{color:var(--ice)}
.dark .dk-lab .dk-n{background:var(--ice);color:var(--navy)}
.dark .dk-step.is-auto .dk-card{border-color:var(--ice)}
.dark .dk-out{color:#fff}
.dark .dk-out svg{background:var(--ice);stroke:var(--navy)}
.dark .dk-vs{background:transparent;border-color:rgba(255,255,255,.25)}
.dark .dk-vs-row>p,.dark .dk-vs-row.is-ca>p{color:var(--ice)}
.dark .dk-vs-row.is-hand li{background:rgba(255,255,255,.1);color:#e8edf5}
.dark .dk-vs-row.is-ca li{background:var(--ice);color:var(--navy)}
.dark .dk-vs-row.is-ca li.is-auto{background:transparent;color:var(--ice);box-shadow:inset 0 0 0 1.5px var(--ice)}
.dark .dk .cap{color:var(--text-on-brand-muted)}
.white.opener .opener-bar{color:var(--text-muted);border-bottom-color:var(--rule)}
.white.opener .pcard{border-color:var(--rule);background:#fff}
.white.opener .pcard h3{color:var(--text-heading)}
.white.opener .pcard p{color:var(--text)}
.white.opener .without{border-top-color:var(--rule);color:var(--navy)}
.white.opener .without b{color:var(--text-muted)}
.hero-ei .grid{align-items:center}
.hero-ei .mt-chart{background:#fff}
.ei-time{align-items:start}
.ei-time .lead{margin-top:0}
.ei-time .ul-check{margin:var(--s4) 0}

/* ECF Vault pricing (2026-10-28): no figures on the page, so a short card in place of a full section. */
.ev-price-sec{padding:var(--s6) 0 0}
.ev-price{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s4) var(--s6);padding:var(--s5);background:#f2f8fd;border:1px solid var(--rule);border-left:4px solid var(--navy)}
.ev-price .eyebrow{display:block;margin:0 0 6px;color:var(--text-muted)}
.ev-price h2{margin:0;font-size:clamp(24px,2.4vw,30px);line-height:1.15}
.ev-price p{margin:8px 0 0;max-width:42em;color:var(--text)}
.ev-price .btn{flex:none}