/* Shared styles for the long form guides. Loaded AFTER assets/site.css, which
   supplies the shared header, footer and the design system these tokens mirror.
   Same class names as before, repainted onto the light editorial palette so the
   guides read as the same site as the pages around them. */
:root{
  --sky:#f7f4ee; --sky-2:#efeae0; --panel:#ffffff; --panel-2:#efeae0;
  --line:#ddd6c9; --line-2:#c9c0b0;
  --ink:#14181d; --muted:#59626d; --muted-2:#8a929c; --body-c:#59626d;
  --amber:#c47320; --amber-deep:#a75f18; --ember:#c4562a; --live:#1c6b4f;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--sky);color:var(--ink);font:17px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
main.wrap{max-width:1040px;margin:0 auto;padding:0 26px}
a{color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--amber)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--ink);
     cursor:pointer;font-family:var(--sans);font-weight:600;font-size:15.5px;padding:15px 26px;
     border-radius:3px;text-decoration:none;color:#f7f4ee;background:var(--ink)}
.btn:hover{background:#000;color:#f7f4ee}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{background:transparent;color:var(--ink);border-color:var(--ink)}


/* page hero */
.pagehero{padding:36px 0 4px}
.pagehero .inner,.article{max-width:760px;margin:0 auto}
.pagehero h1{font-family:var(--serif);font-weight:600;font-size:clamp(32px,5.4vw,54px);line-height:1.08;
     letter-spacing:-.015em;margin-top:14px;text-wrap:balance}
.pagehero .sub{color:var(--body-c);font-size:clamp(17px,2vw,19px);line-height:1.6;max-width:62ch;margin-top:16px}

/* article body */
.article{padding:8px 0 30px}
/* balance so a long heading does not drop its last word alone onto line two, which
   "The part your case management software cannot do" did with "do". */
.article h2{font-family:var(--serif);font-weight:600;font-size:clamp(24px,3.2vw,32px);letter-spacing:-.01em;
     margin:46px 0 14px;text-wrap:balance}
.article h3{font-size:19px;font-weight:700;margin:30px 0 8px}
.article p{color:var(--body-c);margin:14px 0}
.article ul,.article ol{padding-left:24px;margin:14px 0}
.article li{color:var(--body-c);margin:8px 0}
.article b,.article strong{color:var(--ink)}
/* :not(.btn) so this does not out-specify .btn/.btn-ghost, which live inside the
   article, an amber .btn is amber-on-amber and reads as a washed-out button. */
.article a:not(.btn){color:var(--amber);text-decoration:none}
.article a:not(.btn):hover{text-decoration:underline}
.article .mono{font-family:var(--mono);font-size:14.5px;background:var(--panel);border:1px solid var(--line);
     border-radius:10px;padding:14px 18px;display:block;overflow-x:auto;color:var(--ink)}

.tldr{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--amber);
     border-radius:12px;padding:8px 22px;margin:28px 0}

/* supported file formats grid */
.formats{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px 28px;margin:24px 0 18px}
.formats div{padding:14px 0;border-bottom:1px solid var(--line)}
.formats b{display:block;font-size:15px;color:var(--ink)}
.formats span{display:block;margin-top:5px;font-family:var(--mono);font-size:13.5px;color:var(--amber);letter-spacing:.02em}

/* connector list: one source per row, mark then name, in a single column.
   The marks are a mix of official brand logos and hand-drawn glyphs for the
   vendors whose logos are not available under a clean licence. Rendering every
   one monochrome at one size is what makes the mixed provenance invisible, so
   do not start colouring individual marks. */
.spritesheet{display:none}
/* The list sits in its own panel, as a two-column block centred in that panel.
   Rows are left-aligned inside their column on purpose: centring each row put every
   icon at a different x and left the dividing rules stranded away from the text.
   The block is centred, the rows are not. Rules are dropped entirely; the group
   headings carry the rhythm, and 31 ruled rows read as a wall. */
/* Sized to the reading column, not .shot-wide: a 600px list centred inside a 988px
   panel left ~194px of dead space per side and three competing left edges in one
   section. The box now shares its left edge with the paragraphs above it and the
   list fills it. */
.sourcebox{background:var(--panel);border:1px solid var(--line);border-radius:20px;
     padding:26px 30px 28px;margin:28px 0}
.sources{columns:2;column-gap:48px}
/* break-inside on the group, not the row: otherwise a column break lands between a
   heading and the sources under it and the orphaned rows read as the wrong group. */
.sgroup{break-inside:avoid;margin-bottom:20px}
.sources ul{list-style:none;padding-left:0!important;margin:0}
.sources li{display:flex;align-items:center;gap:10px;margin:0;padding:6px 0;
     font-size:15px;line-height:1.35;color:var(--body-c)}
/* Group spacing hangs below the group, never above the heading. :first-child only
   matches the first group in the DOM, so top padding on .shead pushed the right
   column's opening group 20px below the left column's. */
.shead{padding:0 0 8px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;
     text-transform:uppercase;color:var(--amber)}
.sources .sicon{width:18px;height:18px;flex:0 0 auto;fill:var(--muted-2);opacity:.9}
@media(max-width:620px){.sources{columns:1}.sourcebox{padding:22px}}

.checklist{list-style:none;padding-left:0!important}
.checklist li{display:flex;gap:12px;align-items:flex-start;border-bottom:1px solid var(--line);padding:11px 0;margin:0}
.checklist .tick,.options .tick{width:22px;height:22px;border-radius:50%;flex:0 0 auto;margin-top:2px;
     background:rgba(63,224,166,.14);color:var(--live);display:grid;place-items:center;font-size:12px;font-weight:800}

/* deployment options, two up. Neither column is styled as the recommended one,
   because which way a firm goes is genuinely its own call. */
.options{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:28px 0 20px}
.options>div{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px 22px;
     display:flex;flex-direction:column}
.options h3{margin:11px 0 9px;font-size:19px}
.options p{font-size:15.5px;margin:0 0 14px}
.options ul{list-style:none;padding-left:0;margin:0}
.options li{display:flex;gap:11px;align-items:flex-start;font-size:15px;line-height:1.5;margin:10px 0}
/* margin-top:auto pins both "fits" lines to the card bottom so the two rules line
   up even though the lists above them are different lengths. */
.options .fit{margin:auto 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--muted-2)}
@media(max-width:720px){.options{grid-template-columns:1fr}}

/* screenshot panels. Each shot ships with its own copy inside one bordered block,
   and everything in the block is centred: the paragraphs keep a reading measure but
   sit centred over the image, because copy flush to the panel's left edge above a
   full-width screenshot reads as unrelated to it. Mirrors the band on the homepage.

   These are full application windows, so at the 760px article measure their UI text
   is illegible. .shot-wide breaks the panel out to 988px, which is exactly .wrap
   minus its 26px padding: the same left and right edge as the header brand, the
   footer, and every table on the site. Anything wider reads as unmoored from the
   page. Body already has overflow-x:hidden, so the translate is safe. */
/* the heading centres with its panel, so each screenshot section reads as one
   centred unit rather than a left heading sitting over a centred block. */
.article h2.shot-h{text-align:center;margin-bottom:4px}
.shotpanel{background:var(--panel);border:1px solid var(--line);border-radius:20px;
     padding:32px;margin:30px 0;text-align:center}
.shotpanel p{color:var(--muted);font-size:16px;line-height:1.6;max-width:min(100%,800px);margin:0 auto}
.shotpanel p+p{margin-top:14px}
.shotpanel figure{margin:26px 0 0}
.shotpanel img{width:100%;height:auto;display:block;border:1px solid var(--line-2);
     border-radius:12px;background:var(--sky-2)}
.shotpanel figcaption{color:var(--muted-2);font-size:13.5px;line-height:1.5;margin:16px auto 0;
     font-family:var(--mono);max-width:min(100%,800px)}
.shotpanel figcaption a{color:var(--amber);text-decoration:none;white-space:nowrap}
.shotpanel figcaption a:hover{text-decoration:underline}
.shot-wide{width:min(100vw - 52px,988px);margin-left:50%;transform:translateX(-50%)}
@media(max-width:1040px){.shot-wide{width:100%;margin-left:0;transform:none}}
@media(max-width:640px){.shotpanel{padding:22px}}

/* stat figures (mirrors index) */
.figures{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:34px 0 0}
.figures .f{padding:30px 20px;text-align:center}
.figures .f+.f{border-left:1px solid var(--line)}
.figures b{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(38px,5vw,52px);
     letter-spacing:-.02em;line-height:1;color:var(--amber)}
.figures span{display:block;color:var(--muted);font-size:15px;margin-top:12px;line-height:1.45}
.footnote{text-align:center;font-size:12.5px;color:var(--muted-2);padding:14px 0 0;font-family:var(--mono)}
@media(max-width:640px){.figures{grid-template-columns:1fr}.figures .f+.f{border-left:0;border-top:1px solid var(--line)}}

/* comparison table (mirrors index) */
.tablewrap{overflow-x:auto;margin:26px 0;border:1px solid var(--line);border-radius:16px}
table{width:100%;border-collapse:collapse;min-width:640px}
th,td{padding:15px 18px;text-align:left;font-size:15px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
thead th{font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;
     color:var(--muted);background:var(--panel)}
thead th:last-child{color:#231403;background:linear-gradient(100deg,var(--amber),var(--amber-deep))}
td{color:var(--muted)}
td:last-child{color:var(--ink);background:rgba(245,180,85,.06)}
tbody th{font-weight:600;color:var(--muted-2);font-size:14px}

/* faq (mirrors index) */
.faq{margin:10px 0 0}
.faq details{border-bottom:1px solid var(--line);padding:6px 0}
.faq summary{cursor:pointer;list-style:none;font-weight:600;font-size:17px;padding:16px 40px 16px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:14px;font-size:22px;color:var(--amber);font-weight:400;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);font-size:15.5px;line-height:1.6;padding:0 20px 18px 0}

/* cta panel */
.ctapanel{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line);
     border-radius:20px;padding:38px 30px;text-align:center;margin:54px 0 8px}
.ctapanel .glow{position:absolute;left:-10%;right:-10%;bottom:-170px;height:280px;pointer-events:none;
     background:radial-gradient(60% 100% at 50% 100%,rgba(245,180,85,.34) 0%,rgba(232,130,90,.16) 45%,rgba(12,26,44,0) 80%)}
.ctapanel h2{font-family:var(--serif);font-weight:600;font-size:clamp(24px,3.4vw,34px);letter-spacing:-.01em;position:relative}
.ctapanel p{color:var(--muted);margin:10px auto 22px;max-width:52ch;position:relative}
.ctapanel .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative}
.ctapanel .alt{display:block;margin-top:16px;font-size:14px;color:var(--muted-2);position:relative}
.ctapanel .alt a{color:var(--amber);text-decoration:none}

/* crosslinks */
.morelinks{margin:44px 0 74px}
.crosslinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:16px}
.crosslinks a{display:block;background:var(--panel);border:1px solid var(--line);border-radius:14px;
     padding:18px;text-decoration:none;transition:border-color .15s}
.crosslinks a:hover{border-color:var(--amber)}
.crosslinks b{display:block;font-size:15.5px;color:var(--ink)}
.crosslinks span{color:var(--muted);font-size:14px;line-height:1.5;display:block;margin-top:6px}

/* calculator */
.calc{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:30px;margin:30px 0}
.calc .grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px}
@media(max-width:640px){.calc .grid{grid-template-columns:1fr}}
.calc label{display:block;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--muted);margin-bottom:7px}
.calc input{width:100%;font:16px/1.4 var(--sans);padding:12px 14px;border:1px solid var(--line-2);
     border-radius:11px;background:var(--sky);color:var(--ink)}
.calc input:focus{outline:2px solid var(--amber);outline-offset:0;border-color:transparent}
.calc .out{margin-top:26px;border-top:1px solid var(--line);padding-top:22px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:center}
@media(max-width:640px){.calc .out{grid-template-columns:1fr}}
.calc .out b{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(28px,4vw,40px);color:var(--amber);letter-spacing:-.02em}
.calc .out span{display:block;color:var(--muted);font-size:14px;margin-top:8px}


@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------------------------------------------------------------------------
   Repaint for the light ground. Everything above is unchanged structurally;
   these are only the rules that had a dark background baked into them.
   --------------------------------------------------------------------------- */
body{font-size:17px}
h1,h2,h3{font-weight:400}
.pagehero h1,.article h2,.ctapanel h2,.figures b,.calc .out b{font-weight:400}
.article h3{font-weight:600}
.article b,.article strong{font-weight:600}

.tldr,.sourcebox,.options>div,.shotpanel,.ctapanel,.calc,.crosslinks a,.tablewrap{border-radius:10px}
.article .mono{border-radius:8px;background:var(--panel-2);color:var(--ink)}
.ctapanel{background:var(--panel-2)}
.ctapanel .glow{display:none}
.shotpanel img{background:var(--panel-2)}
.checklist .tick,.options .tick{background:rgba(63,190,143,.16);color:var(--live)}
.calc input{background:var(--panel);border-radius:6px}
.calc input:focus{outline:2px solid var(--amber);border-color:transparent}
thead th{background:var(--panel-2);color:var(--muted)}
thead th:last-child{background:var(--amber-lit,#f0a94a);color:#1c1206}
td:last-child{color:var(--ink);background:rgba(196,115,32,.06)}
.faq summary::after{color:var(--amber)}
.sources .sicon{fill:var(--muted-2);opacity:1}
.crosslinks a{background:var(--panel)}

/* the guides sit under the shared header, which is 1240 wide; only the reading
   column is narrow, so the breakout screenshot lines up with the article, not
   with the header. */
.shot-wide{width:min(100vw - 52px,988px)}