@charset "UTF-8";
/* ==========================================================================
   LawServa marketing site - the design language.

   Rebuilt 15 Sep 2026 in the register of a flagship product site: one type
   family, two surface tones, one accent, generous space, product-forward
   imagery, and motion that answers the reader rather than performing at them.

   Layering: tw.css (frozen, see reference in inc/head.php) is still loaded
   because the seventeen demo modules in assets/demo/ were written against its
   utilities. This file loads AFTER it, owns every page-level style, and maps
   the demos' old palette utilities onto the new tokens inside .scr so the
   demos join the new language without a single JS edit.

   Rules that bind here and must survive every edit:
     1. The floating header is the ONE fixed element (standing exception).
        Everything else is normal flow. No sticky anywhere.
     2. No em dashes or en dashes in any rendered string.
     3. Light theme only. No prefers-color-scheme dark block, ever.
     4. Corners: 6 / 10 / 16 / 20. Round only for dots and avatars.
   ========================================================================== */

/* --------------------------------------------------------------------- font */
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-variable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "uicons-rr";
  src: url("../fonts/uicons-rr.woff2") format("woff2");
  font-weight: normal; font-style: normal; font-display: block;
}
@font-face {
  font-family: "uicons-brands";
  src: url("../fonts/uicons-brands.woff2") format("woff2");
  font-weight: normal; font-style: normal; font-display: block;
}

/* ------------------------------------------------------------------- tokens */
:root {
  color-scheme: light;

  --bg:      #ffffff;
  --bg-2:    #f5f5f7;   /* the quiet grey band */
  --bg-3:    #e8e8ed;
  --card:    #ffffff;
  --ink:     #1d1d1f;
  --ink-2:   #515154;   /* 7.6:1 on white, 6.9:1 on bg-2 */
  --ink-3:   #6e6e73;   /* 5.0:1 on white, 4.6:1 on bg-2 : secondary copy only */
  --brand:   #12395f;   /* the product's own navy */
  --brand-2: #1b5488;   /* links and small accents, 7.2:1 on white */
  --brand-3: #e7eef6;   /* a navy wash for chips and icon wells */
  --line:    rgb(0 0 0 / .08);
  --line-2:  #d2d2d7;
  --ok:      #1f7a4d;
  --ok-bg:   #e9f4ee;
  --warn:    #8a5a10;
  --warn-bg: #fbf1dd;
  --ai:      #5b4a12;
  --ai-bg:   #fbf4e2;
  --bad:     #1b365d;
  --bad-bg:  #e9eef5;

  --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 20px;

  --shadow-1: 0 1px 2px rgb(0 0 0 / .04), 0 6px 20px -8px rgb(29 29 31 / .10);
  --shadow-2: 0 2px 6px rgb(0 0 0 / .05), 0 24px 60px -24px rgb(29 29 31 / .22);
  --shadow-3: 0 30px 90px -30px rgb(29 29 31 / .35);

  --font: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Apple's critically damped curve for anything caused by scrolling or a
     click, and a slightly under-damped one for things that were flicked. */
  --ease-out:   cubic-bezier(.32, .72, 0, 1);
  --ease-soft:  cubic-bezier(.22, 1, .36, 1);
  --ease-in:    cubic-bezier(.4, 0, 1, 1);
  --t-fast: 160ms; --t-med: 360ms; --t-slow: 700ms;

  --hdr-h: 52px;
  --wrap: 1180px;
  --copy: 760px;
  --gutter: clamp(16px, 4vw, 40px);
}

/* -------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + 24px); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 1.0625rem; line-height: 1.47;
  letter-spacing: -.004em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; overflow-x: hidden;
  font-feature-settings: "ss03", "cv11";
}
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--brand-2); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .18em; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--brand); color: #fff; }
:focus-visible { outline: 3px solid var(--brand-2); outline-offset: 3px; border-radius: 6px; }

.sr-only, .vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--ink); color: #fff; padding: .75rem 1.25rem;
  border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.skip:focus { left: 0; }

/* icons (Flaticon UIcons, the same family the product uses) */
[class^="fi-rr-"], [class*=" fi-rr-"] {
  font-family: "uicons-rr" !important; font-style: normal; font-weight: normal;
  line-height: 1; display: inline-block; speak: none;
}
[class^="fi-brands-"], [class*=" fi-brands-"] {
  font-family: "uicons-brands" !important; font-style: normal; font-weight: normal;
  line-height: 1; display: inline-block;
}

/* ------------------------------------------------------------- typography */
.h-display {
  font-size: clamp(2.75rem, 7vw, 5.25rem); line-height: 1.02;
  letter-spacing: -.035em; font-weight: 600;
}
.h-1 {
  font-size: clamp(2.1rem, 4.6vw, 3.5rem); line-height: 1.06;
  letter-spacing: -.028em; font-weight: 600;
}
.h-2 {
  font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.12;
  letter-spacing: -.022em; font-weight: 600;
}
.h-3 { font-size: 1.25rem; line-height: 1.25; letter-spacing: -.014em; font-weight: 600; }
.lead {
  font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.42;
  letter-spacing: -.012em; color: var(--ink-2); font-weight: 400;
}
.sub { color: var(--ink-2); }
.small { font-size: .9375rem; }
.muted { color: var(--ink-3); }
.brand { color: var(--brand-2); }
.kicker {
  display: inline-block; color: var(--brand-2); font-weight: 600;
  font-size: .9375rem; letter-spacing: -.005em;
}
/* The emphasised phrase of a headline, in the same face one step quieter,
   which is how a single type family marks emphasis without a second device. */
.h-em { color: var(--ink-3); font-weight: 500; }
.on-dark .h-em { color: rgb(255 255 255 / .62); }

/* ------------------------------------------------------------------ layout */
.wrap  { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }
.copy  { max-width: var(--copy); }
.center { text-align: center; margin-inline: auto; }
.sec { padding-block: clamp(72px, 10vw, 136px); position: relative; }
.sec-tight { padding-block: clamp(56px, 7vw, 96px); }
.sec-grey { background: var(--bg-2); }
.sec-head { margin-bottom: clamp(36px, 5vw, 64px); }
.sec-head .lead { margin-top: 1.1rem; }
.sec-head.center .lead { margin-inline: auto; max-width: 720px; }
.hdr-clear { padding-block-start: var(--hdr-h); }

.stack-lg > * + * { margin-top: clamp(40px, 6vw, 80px); }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }  .mt-5 { margin-top: 3rem; }  .mt-6 { margin-top: 4rem; }

.grid { display: grid; gap: 1rem; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) { .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px)  { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } }

/* A chapter marker between groups of sections. It is the page's table of
   contents made visible, so it sits on its own line and carries a rule. */
.chapter {
  display: flex; align-items: center; gap: 1rem;
  padding-block: 8px;
  color: var(--ink-3); font-size: .875rem; font-weight: 600; letter-spacing: .01em;
}
.chapter::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.chapter b { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .75rem 1.35rem; border-radius: var(--r-sm);
  font-weight: 600; font-size: 1rem; letter-spacing: -.008em; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) ease,
              border-color var(--t-fast) ease, box-shadow var(--t-fast) ease, color var(--t-fast) ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn:hover { text-decoration: none; }
/* Feedback lives on the press, not on the release. */
.btn:active { transform: scale(.97); }
.btn-1 { background: var(--brand); color: #fff; }
.btn-1:hover { background: #0e2f4f; }
.btn-2 { background: var(--card); color: var(--ink); border-color: var(--line-2); }
.btn-2:hover { border-color: var(--ink-3); }
.btn-wa { background: #1f7a4d; color: #fff; }
.btn-wa:hover { background: #196540; }
.btn-lg { min-height: 54px; padding: .9rem 1.6rem; font-size: 1.0625rem; }
.btn-sm { min-height: 40px; padding: .5rem 1rem; font-size: .9375rem; }
.on-dark .btn-2 { background: rgb(255 255 255 / .12); color: #fff; border-color: rgb(255 255 255 / .28); backdrop-filter: blur(10px); }
.on-dark .btn-2:hover { background: rgb(255 255 255 / .2); }
.btn i { font-size: 1em; }

/* The text link with a chevron, the product-site idiom for "there is more". */
.more {
  display: inline-flex; align-items: center; gap: .3rem; font-weight: 500;
  color: var(--brand-2); font-size: 1.0625rem;
}
.more i { font-size: 15px; transition: transform var(--t-fast) var(--ease-out); }
.more:hover i { transform: translateX(3px); }
.more:hover { text-decoration: none; }
.more:hover span { text-decoration: underline; text-underline-offset: .18em; }

.actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.actions.center { justify-content: center; }

/* ------------------------------------------------------------------- header
   The one fixed element on the site, at Alex's request. A translucent
   material the page scrolls under, 52px tall, wordmark left, sections in the
   middle, the two account actions on the right. <main> reserves --hdr-h. */
#hdr-top { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--hdr-h);
  background: rgb(255 255 255 / .72);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-med) ease, background-color var(--t-med) ease;
}
.hdr.stuck { border-bottom-color: var(--line); background: rgb(255 255 255 / .82); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .hdr { background: #fff; } }
@media (prefers-reduced-transparency: reduce) { .hdr { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } }
.hdr-in { height: 100%; display: flex; align-items: center; gap: 1rem; }
.brandmark { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); font-weight: 600; letter-spacing: -.02em; font-size: 1.05rem; }
.brandmark:hover { text-decoration: none; }
.brandmark .mark { width: 34px; height: 34px; flex: 0 0 auto; }
.foot .brandmark .mark { width: 30px; height: 30px; }
.navwrap { position: relative; display: none; align-items: center; gap: .15rem; margin-inline: auto; }
@media (min-width: 1024px) { .navwrap { display: flex; } }
.navwrap > a { position: relative; z-index: 1; }
.navlink {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 .8rem;
  border-radius: 8px; color: var(--ink-2); font-size: .9rem; font-weight: 500;
  transition: color var(--t-fast) ease;
}
.navlink:hover { color: var(--ink); text-decoration: none; }
.navspy.cur { color: var(--ink); }
/* One highlight that travels between the links, driven from ls.js. */
.navpill {
  position: absolute; left: 0; top: 50%; z-index: 0; height: 34px; margin-top: -17px;
  width: var(--pw, 0px); border-radius: 8px; background: rgb(29 29 31 / .06);
  transform: translate3d(var(--px, 0px), 0, 0); opacity: 0; pointer-events: none;
  transition: transform .42s var(--ease-out), width .42s var(--ease-out), opacity .25s ease-out;
}
.navpill.on { opacity: 1; }
.navpill.jump { transition: opacity .25s ease-out; }
.hdr-acts { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.hdr-acts .navlink { display: none; }
@media (min-width: 640px) { .hdr-acts .navlink { display: inline-flex; } }
.hdr-acts .btn { min-height: 34px; padding: 0 .9rem; font-size: .875rem; border-radius: 8px; }
.navbtn {
  width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: transparent;
  border-radius: 8px; color: var(--ink); cursor: pointer;
}
.navbtn:hover { background: rgb(29 29 31 / .06); }
@media (min-width: 1024px) { .navbtn { display: none; } .navm { display: none !important; } }
/* The mobile sheet, a translucent panel dropping from the bar. */
.navm {
  position: absolute; left: 0; right: 0; top: var(--hdr-h);
  background: #fff;
  border-bottom: 1px solid var(--line); padding: .5rem var(--gutter) 1.25rem;
  max-height: calc(100dvh - var(--hdr-h)); overflow-y: auto; overscroll-behavior: contain;
  box-shadow: var(--shadow-2);
  transform-origin: top; animation: navm-in .32s var(--ease-out) both;
}
@keyframes navm-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.navm a.navlink { display: flex; justify-content: space-between; min-height: 48px; font-size: 1.05rem; padding-inline: .5rem; border-radius: var(--r-sm); }
.navm a.navlink:hover { background: rgb(29 29 31 / .05); }
.navm .navspy.cur { background: var(--brand-3); color: var(--brand); }
.navm .btn { width: 100%; margin-top: .5rem; }
.navm .grp { margin-top: .75rem; padding: .5rem .5rem .25rem; font-size: .75rem; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }

/* --------------------------------------------------------------------- hero */
.hero { padding-block: clamp(56px, 8vw, 104px) 0; text-align: center; overflow: hidden; }
.hero .lead { margin: 1.25rem auto 0; max-width: 680px; }
.hero .actions { margin-top: 1.75rem; }
/* The product, presented. A frame with a soft floor shadow, no fake bezel. */
.stage { margin-top: clamp(40px, 6vw, 72px); position: relative; }
.stage::before {
  content: ""; position: absolute; inset: auto 10% -40px 10%; height: 120px; z-index: 0;
  background: radial-gradient(60% 100% at 50% 100%, rgb(18 57 95 / .18), transparent 70%);
  filter: blur(24px); pointer-events: none;
}
.stage > .scr { position: relative; z-index: 1; box-shadow: var(--shadow-3); }
.stage-caption { margin-top: 1.25rem; color: var(--ink-3); font-size: .9375rem; }

/* headline words materialise one after another on first paint (ls.js splits
   them). Without JS the headline is simply there. */
.words .w { display: inline-block; white-space: pre; }
.js .words.ready .w { opacity: 0; transform: translateY(.35em); filter: blur(8px); }
.js .words.ready.go .w {
  animation: word-in .9s var(--ease-soft) both; animation-delay: calc(var(--i) * 70ms);
}
@keyframes word-in { to { opacity: 1; transform: none; filter: blur(0); } }

/* ------------------------------------------------------------ fact strip */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 899px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fact { padding: 1.5rem 1.25rem; border-radius: var(--r-md); background: var(--bg-2); }
.fact .n { font-size: clamp(2.4rem, 4.6vw, 3.6rem); line-height: 1; letter-spacing: -.04em; font-weight: 600; font-variant-numeric: tabular-nums; }
.fact .t { margin-top: .35rem; font-weight: 600; letter-spacing: -.01em; }
.fact .s { margin-top: .25rem; color: var(--ink-3); font-size: .9rem; line-height: 1.4; }

/* ------------------------------------------------------------ at a glance
   Eight term and value pairs, two columns, a rule above each pair. */
.glance { display: grid; gap: 1rem 2.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
@media (max-width: 767px) { .glance { grid-template-columns: 1fr; } }
.glance > div { border-top: 1px solid var(--line-2); padding-top: .9rem; display: grid; grid-template-columns: 132px 1fr; gap: .25rem 1rem; }
@media (max-width: 479px) { .glance > div { grid-template-columns: 1fr; } }
.glance dt { font-weight: 600; letter-spacing: -.01em; color: var(--ink); font-size: .95rem; }
.glance dd { margin: 0; color: var(--ink-2); font-size: .95rem; line-height: 1.5; }

/* ---------------------------------------------------------------- image band
   A photograph with copy set on it. Only two on the page, and the dark one
   is a real dusk sky in the brand's own navy, not a flat slab. */
.band { position: relative; overflow: hidden; border-radius: 0; }
.band picture, .band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band .band-in { position: relative; z-index: 1; padding-block: clamp(96px, 14vw, 200px); }
.band .copy { max-width: 620px; }
.band.light::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgb(255 255 255 / .92) 0%, rgb(255 255 255 / .74) 45%, rgb(255 255 255 / .1) 100%); }
.band.dark::before  { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(10 24 42 / .28) 0%, rgb(10 24 42 / .62) 100%); }
.on-dark { color: #fff; }
.on-dark .lead, .on-dark .sub { color: rgb(255 255 255 / .82); }
.on-dark .muted { color: rgb(255 255 255 / .66); }
@media (max-width: 767px) {
  .band.light::before { background: linear-gradient(180deg, rgb(255 255 255 / .94) 0%, rgb(255 255 255 / .86) 70%, rgb(255 255 255 / .5) 100%); }
}

/* ---------------------------------------------------------------- card rail
   A horizontal, scroll-snapping row of cards for a set that reads as a
   sequence. Native scrolling, so it is 1:1 with the finger on a phone and
   keeps momentum on a trackpad. The arrows only nudge it. */
.rail-wrap { position: relative; }
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 340px); gap: 1rem;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 4px var(--gutter) 24px; margin-inline: calc(var(--gutter) * -1);
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
@media (min-width: 1280px) { .rail { grid-auto-columns: 360px; } }
.rail-nav { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .25rem; }
.rail-nav button {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--card);
  display: grid; place-items: center; cursor: pointer; color: var(--ink);
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast) ease;
}
.rail-nav button:hover { border-color: var(--ink-3); }
.rail-nav button:active { transform: scale(.94); }
.rail-nav button[disabled] { opacity: .35; cursor: default; }

/* ------------------------------------------------------------------- cards */
.card {
  background: var(--card); border-radius: var(--r-md); padding: 1.5rem;
  border: 1px solid var(--line); box-shadow: var(--shadow-1);
}
.card.plain { box-shadow: none; }
.card .h-3 { margin-top: .9rem; }
.card p { margin-top: .45rem; color: var(--ink-2); font-size: .975rem; line-height: 1.5; }
.iwell {
  width: 44px; height: 44px; border-radius: 12px; background: var(--brand-3); color: var(--brand);
  display: grid; place-items: center; font-size: 19px;
}
.sec-grey .card { border-color: transparent; }
.card.tall { min-height: 300px; display: flex; flex-direction: column; }
.card.tall .h-3 { margin-top: auto; padding-top: 2.5rem; }
.card .num { font-size: 2.5rem; font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--brand); }

/* Spotlight: a soft radial highlight that follows the pointer over a tile.
   Pointer position arrives as --mx/--my from ls.js; with no pointer the tile
   is simply a tile. */
.spot { position: relative; overflow: hidden; }
.spot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgb(18 57 95 / .09), transparent 60%);
  transition: opacity var(--t-med) ease;
}
.spot:hover::after { opacity: 1; }

/* ------------------------------------------------------------------- bento
   Tiles of different sizes, each carrying a real image or a real figure. The
   grid has exactly as many cells as it has content. */
.bento { display: grid; gap: 1rem; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(190px, auto); }
.bento > * { grid-column: span 2; }
.bento .w3 { grid-column: span 3; }
.bento .w4 { grid-column: span 4; }
.bento .w6 { grid-column: span 6; }
.bento .h2 { grid-row: span 2; }
@media (max-width: 1023px) { .bento > *, .bento .w3, .bento .w4 { grid-column: span 3; } .bento .w6 { grid-column: span 6; } }
@media (max-width: 639px)  { .bento > *, .bento .w3, .bento .w4, .bento .w6 { grid-column: span 6; } .bento .h2 { grid-row: auto; } }
.tile {
  position: relative; overflow: hidden; border-radius: var(--r-md); background: var(--card);
  border: 1px solid var(--line); box-shadow: var(--shadow-1); padding: 1.5rem;
  display: flex; flex-direction: column; min-height: 100%;
}
.tile.img { padding: 0; min-height: 320px; color: #fff; }
.tile.img picture, .tile.img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-soft); }
.tile.img:hover img { transform: scale(1.03); }
.tile.img .tile-copy {
  position: relative; z-index: 1; margin-top: auto; padding: 1.5rem;
  background: linear-gradient(180deg, rgb(10 24 42 / 0) 0%, rgb(10 24 42 / .55) 30%, rgb(10 24 42 / .84) 100%);
}
.tile.img .tile-copy .h-3 { color: #fff; }
.tile.img .tile-copy p { color: rgb(255 255 255 / .84); }
.tile.img.light-img .tile-copy { background: linear-gradient(180deg, transparent, rgb(255 255 255 / .92) 55%); }
.tile.img.light-img .tile-copy .h-3 { color: var(--ink); }
.tile.img.light-img .tile-copy p { color: var(--ink-2); }
.tile .tile-copy p { margin-top: .4rem; font-size: .975rem; line-height: 1.5; color: var(--ink-2); }
.tile .tile-copy .h-3 { margin-top: 0; }
.tile.grey { background: var(--bg-2); border-color: transparent; box-shadow: none; }
.tile.navy { background: var(--brand); border-color: transparent; color: #fff; }
.tile.navy .h-3 { color: #fff; } .tile.navy p { color: rgb(255 255 255 / .82); }
.tile .iwell { margin-bottom: auto; }
.tile.text .h-3 { margin-top: 1.5rem; }
.tile .list { margin-top: .75rem; display: grid; gap: .35rem; font-size: .95rem; color: var(--ink-2); }
.tile .list span { display: flex; gap: .5rem; align-items: baseline; }
.tile .list i { color: var(--brand-2); font-size: 12px; flex: 0 0 auto; position: relative; top: 1px; }
.tile.navy .list { color: rgb(255 255 255 / .86); } .tile.navy .list i { color: #fff; }

/* ------------------------------------------------------------ split feature
   Copy beside a picture. Never three of these in a row. */
.split { display: grid; gap: clamp(28px, 5vw, 72px); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .split { grid-template-columns: 1.05fr .95fr; } .split.flip > .split-copy { order: 2; } }
.split-media { position: relative; }
.split-media .frame { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-2); aspect-ratio: 3 / 2; }
.split-media .frame img { width: 100%; height: 100%; object-fit: cover; }
.split-media figcaption { margin-top: .75rem; color: var(--ink-3); font-size: .9rem; }
.split-copy .lead { margin-top: 1rem; }

/* ----------------------------------------------------------------- points
   The supporting detail of a section. Closed by default behind a single
   "Learn more" control, because a partner deciding whether to keep reading
   wants the statement first and the evidence when they ask for it. Open,
   it is a grid of short entries with a line above each, not a wall of boxes. */
.pts { margin-top: clamp(28px, 4vw, 48px); }
.pts-toggle {
  display: inline-flex; align-items: center; gap: .5rem; background: transparent; border: 0; padding: .25rem 0;
  color: var(--brand-2); font-weight: 500; font-size: 1.0625rem; cursor: pointer;
}
.pts-toggle .ic {
  width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center;
  transition: transform var(--t-med) var(--ease-out), background-color var(--t-fast) ease;
}
.pts-toggle .ic::before { content: ""; width: 10px; height: 1.5px; background: currentColor; position: absolute; }
.pts-toggle .ic::after  { content: ""; width: 1.5px; height: 10px; background: currentColor; position: absolute; transition: transform var(--t-med) var(--ease-out); }
.pts-toggle .ic { position: relative; }
.pts-toggle[aria-expanded="true"] .ic { transform: rotate(180deg); }
.pts-toggle[aria-expanded="true"] .ic::after { transform: scaleY(0); }
.pts-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-slow) var(--ease-soft); }
.pts-panel[data-open] { grid-template-rows: 1fr; }
.pts-panel > div { overflow: hidden; min-height: 0; }
.pts-grid { display: grid; gap: 1.25rem 2rem; padding-top: 1.75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { .pts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px)  { .pts-grid { grid-template-columns: 1fr; } }
.pt { border-top: 1px solid var(--line-2); padding-top: 1rem; }
.pt i { color: var(--brand-2); font-size: 18px; }
.pt h3, .pt h4 { margin-top: .6rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.012em; line-height: 1.3; }
.pt p { margin-top: .35rem; color: var(--ink-2); font-size: .95rem; line-height: 1.5; }
.pts-panel[data-open] .pt { animation: pt-in .7s var(--ease-soft) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes pt-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* An aside that carries the "in short" of a section. One brand rule, no box. */
.tldr {
  margin-top: 1.25rem; padding-left: 1rem; border-left: 2px solid var(--brand);
  color: var(--ink-2); font-size: 1rem; line-height: 1.55; max-width: 640px;
}
.tldr strong { color: var(--ink); font-weight: 600; }
.center .tldr { margin-inline: auto; text-align: left; }

/* ------------------------------------------------------------- segmented
   The two-position control (monthly / annual, now / here). The thumb slides
   between positions on a critically damped curve; the label under the thumb
   changes colour on the press, before the thumb has arrived. */
.seg {
  position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 3px; border-radius: var(--r-sm); background: var(--bg-3); isolation: isolate;
}
.seg .thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n, 2));
  border-radius: 8px; background: var(--card); box-shadow: 0 1px 3px rgb(0 0 0 / .12), 0 4px 10px -4px rgb(0 0 0 / .12);
  transform: translateX(calc(var(--k, 0) * 100%)); transition: transform .42s var(--ease-out); z-index: 0;
}
.seg button {
  position: relative; z-index: 1; background: transparent; border: 0; min-height: 38px; padding: 0 1.1rem;
  border-radius: 8px; font-weight: 500; font-size: .95rem; color: var(--ink-2); cursor: pointer; white-space: nowrap;
  transition: color var(--t-fast) ease;
}
.seg button[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.seg button:active { transform: scale(.98); }
.seg-lg button { min-height: 44px; padding: 0 1.4rem; font-size: 1rem; }

/* ------------------------------------------------------------ comparison
   Two ways of doing the same eight things. The toggle swaps which column is
   shown on a phone; on a wide screen both columns are visible and the toggle
   simply highlights one. */
.cmp { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .cmp { grid-template-columns: 1fr 1fr; } }
.cmp-col { border-radius: var(--r-md); padding: 1.5rem; background: var(--card); border: 1px solid var(--line); transition: opacity var(--t-med) ease, box-shadow var(--t-med) ease, border-color var(--t-med) ease; }
.cmp-col h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: .75rem; display: flex; align-items: center; gap: .6rem; }
.cmp-col h3 i { font-size: 16px; color: var(--ink-3); }
.cmp-col.new { border-color: rgb(18 57 95 / .25); box-shadow: 0 0 0 1px rgb(18 57 95 / .12), var(--shadow-1); }
.cmp-col.new h3 i { color: var(--brand-2); }
.cmp-row { display: grid; grid-template-columns: 150px 1fr; gap: 1rem; padding: .9rem 0; }
.cmp-row + .cmp-row { border-top: 1px solid var(--line); }
.cmp-row .k { font-weight: 600; font-size: .95rem; letter-spacing: -.01em; display: flex; gap: .5rem; align-items: baseline; }
.cmp-row .k i { color: var(--brand-2); font-size: 13px; flex: 0 0 auto; }
.cmp-row .v { color: var(--ink-2); font-size: .95rem; line-height: 1.5; }
.cmp-row .v b { color: var(--ink); font-weight: 600; }
@media (max-width: 899px) {
  .cmp[data-show="old"] .cmp-col.new, .cmp[data-show="new"] .cmp-col.old { display: none; }
  .cmp-row { grid-template-columns: 1fr; gap: .2rem; }
}
@media (min-width: 900px) {
  .cmp[data-show="old"] .cmp-col.new { opacity: .55; }
  .cmp[data-show="new"] .cmp-col.old { opacity: .55; }
}
@media (max-width: 479px) { .cmp-row .k { font-size: .9rem; } }

/* -------------------------------------------------------------- roles cards */
.role { display: flex; flex-direction: column; }
.role .who { display: flex; align-items: center; gap: .8rem; }
.role .who .h-3 { margin: 0; }
.role .who p { margin: 0; font-size: .9rem; color: var(--ink-3); }
.role dl { margin: 1rem 0 0; display: grid; gap: .6rem; }
.role dl div { display: flex; gap: .6rem; font-size: .95rem; line-height: 1.5; color: var(--ink-2); }
.role dl i { flex: 0 0 auto; font-size: 13px; position: relative; top: 5px; }
.role dl .can i { color: var(--ok); } .role dl .cant i { color: var(--ink-3); }
.role dl dd { margin: 0; }

/* --------------------------------------------------------------- steps
   Moving across, as four titled steps on a single rule. */
.steps { display: grid; gap: 1.25rem; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
@media (max-width: 1023px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px)  { .steps { grid-template-columns: 1fr; } }
.step-c { border-top: 2px solid var(--brand); padding-top: 1.25rem; position: relative; }
.step-c h3 { font-size: 1.1rem; font-weight: 600; letter-spacing: -.012em; }
.step-c p { margin-top: .5rem; color: var(--ink-2); font-size: .95rem; line-height: 1.5; }

/* ---------------------------------------------------------------- pricing */
.plans { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
@media (max-width: 1023px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px)  { .plans { grid-template-columns: 1fr; } }
.plan { display: flex; flex-direction: column; gap: .5rem; position: relative; }
.plan.pick { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow-2); }
.plan .tag { position: absolute; top: -12px; left: 1.5rem; background: var(--brand); color: #fff; font-size: .75rem; font-weight: 600; padding: .25rem .6rem; border-radius: var(--r-xs); letter-spacing: .01em; }
.plan .name { font-size: 1.25rem; font-weight: 600; letter-spacing: -.016em; }
.plan .who { color: var(--ink-3); font-size: .9rem; margin-top: -.25rem; }
.plan .price { margin-top: .75rem; display: flex; align-items: baseline; gap: .3rem; font-variant-numeric: tabular-nums; }
.plan .price .cur { font-size: 1rem; font-weight: 500; color: var(--ink-2); }
.plan .price .amt { font-size: clamp(2.2rem, 3vw, 2.75rem); font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.plan .price .per { font-size: .9rem; color: var(--ink-3); }
.plan .alt { font-size: .85rem; color: var(--ink-3); min-height: 1.3em; }
.plan .for { margin-top: .5rem; color: var(--ink-2); font-size: .95rem; line-height: 1.45; }
.plan ul { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .45rem; }
.plan li { display: flex; gap: .5rem; font-size: .925rem; color: var(--ink-2); line-height: 1.4; }
.plan li i { color: var(--ok); font-size: 12px; position: relative; top: 5px; flex: 0 0 auto; }
.plan .btn { margin-top: auto; width: 100%; }
.plan .btn { margin-top: 1.25rem; }

/* the per-seat argument: three figures, one scale, no filled track */
.cost { display: grid; gap: 1.1rem; }
.cost .row { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem; align-items: baseline; }
.cost .who { font-weight: 600; letter-spacing: -.01em; }
.cost .who small { display: block; font-weight: 400; color: var(--ink-3); font-size: .85rem; margin-top: .1rem; }
.cost .amt { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1.15rem; letter-spacing: -.02em; }
.cost .bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--bg-3); overflow: hidden; }
.cost .bar span { display: block; height: 100%; width: var(--w, 0%); background: var(--ink-3); border-radius: 3px; transform-origin: left; transform: scaleX(0); transition: transform 1s var(--ease-soft); }
.cost .row.us .bar span { background: var(--brand); }
.cost .row.us .who, .cost .row.us .amt { color: var(--brand); }
.in .cost .bar span, .cost.in .bar span { transform: scaleX(1); }

/* ------------------------------------------------------------------- faq */
.faq { border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.25rem 0; font-weight: 600; font-size: 1.1rem; letter-spacing: -.014em; min-height: 56px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { position: relative; width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; border: 1.5px solid var(--line-2); transition: transform var(--t-med) var(--ease-out), border-color var(--t-fast) ease; }
.faq summary .ic::before, .faq summary .ic::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--ink); transform: translate(-50%, -50%); }
.faq summary .ic::before { width: 10px; height: 1.5px; }
.faq summary .ic::after  { width: 1.5px; height: 10px; transition: transform var(--t-med) var(--ease-out); }
.faq details[open] summary .ic { transform: rotate(180deg); }
.faq details[open] summary .ic::after { transform: translate(-50%, -50%) scaleY(0); }
.faq summary:hover .ic { border-color: var(--ink-3); }
.faq .a { padding: 0 3rem 1.5rem 0; color: var(--ink-2); line-height: 1.55; max-width: 720px; animation: fade-in .5s var(--ease-soft) both; }
@keyframes fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------- app chrome
   Every demo is drawn inside this. It is the shape of the real product: a
   title bar, a sidebar on wide screens, and a working area. The tokens here
   are the product's own (navy, cool greys, 6/8/12 corners), so the demos
   look like LawServa and not like a marketing sketch of it. */
.scr {
  background: #fff; border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow-2); color: #101828; text-align: left;
  font-family: var(--font); font-size: 1rem; letter-spacing: 0;
}
.scr-bar {
  display: flex; align-items: center; gap: .6rem; flex-wrap: nowrap;
  padding: .6rem .9rem; background: #f5f5f7; border-bottom: 1px solid #e4e8ee;
  font-size: .8rem; font-weight: 600; color: #344054;
}
.scr-bar > span:not(.dots):not(.right):not(.pill) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scr-bar .pill { flex: 0 0 auto; }
.scr-bar .dots { display: none; gap: .3rem; margin-right: .2rem; }
@media (min-width: 480px) { .scr-bar .dots { display: inline-flex; } }
.scr-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: #d2d2d7; display: block; }
.scr-bar .right { margin-left: auto; display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
@media (max-width: 479px) {
  .ck-tile .big { font-size: 1.2rem; }
  .scr-bar { font-size: .74rem; gap: .45rem; padding-inline: .75rem; }
  .scr-bar .pill { padding: .15rem .5rem; font-size: .62rem; }
  .scr-bar .btn-s { padding-inline: .6rem; }
}
.scr-body { padding: 1rem; }
@media (min-width: 640px) { .scr-body { padding: 1.25rem; } }
.scr-split { display: grid; grid-template-columns: 1fr; }
.scr-split > * { min-width: 0; }
@media (min-width: 900px) { .scr-split { grid-template-columns: 190px 1fr; } }
.scr-side { display: none; border-right: 1px solid #e4e8ee; background: #f5f5f7; padding: .75rem; }
@media (min-width: 900px) { .scr-side { display: block; } }
.scr-side .grp { font-size: .65rem; text-transform: uppercase; letter-spacing: .1em; color: #5b6474; font-weight: 700; padding: .6rem .5rem .3rem; }
.scr-side a, .scr-side span { display: flex; align-items: center; gap: .5rem; padding: .42rem .5rem; border-radius: 6px; font-size: .8rem; color: #344054; transition: background-color .15s, opacity .3s; text-decoration: none; }
.scr-side i { font-size: 13px; width: 15px; color: #98a2b3; }
.scr-side .cur { background: #fff; color: var(--brand); font-weight: 600; box-shadow: 0 1px 6px rgb(16 24 40 / .06); }
.scr-side .cur i { color: var(--brand); }
.scr-side .off { opacity: .3; }
.scr .hint-line { color: var(--brand-2); font-weight: 500; font-size: .95rem; }

/* demo widgets */
.tabs { display: flex; flex-wrap: wrap; gap: .5rem; }
.tab {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .5rem .95rem;
  border-radius: 8px; border: 1px solid #d2d2d7; background: #fff; color: #344054;
  font-size: .85rem; font-weight: 600; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, transform .12s;
}
.tab:hover { border-color: #98a2b3; color: #101828; }
.tab:active { transform: scale(.97); }
.tab[aria-pressed="true"], .tab[aria-selected="true"], .tab.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.tab i { font-size: 14px; }

.fld { display: grid; gap: .35rem; margin-bottom: .85rem; }
.fld label { font-size: .8rem; font-weight: 600; color: #101828; }
.fld .hint { font-size: .75rem; color: #5b6474; }
.fld input, .fld select, .fld textarea {
  width: 100%; min-height: 44px; padding: .6rem .8rem; font: inherit; font-size: .92rem;
  color: #101828; background: #fff; border: 1px solid #c8ced6; border-radius: 8px;
}
.fld textarea { min-height: 110px; line-height: 1.55; resize: vertical; }
.fld input::placeholder, .fld textarea::placeholder { color: #667085; opacity: 1; }
.fld input:focus-visible, .fld select:focus-visible, .fld textarea:focus-visible { outline: 3px solid rgb(27 84 136 / .35); outline-offset: 0; border-color: var(--brand-2); }
.fld.ai input, .fld.ai textarea { border-color: #c9a84c; background: #fbf7ea; border-left-width: 3px; }

.dtl { font-size: .82rem; width: 100%; border-collapse: collapse; }
.dtl th { text-align: left; font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; color: #5b6474; font-weight: 700; padding: .5rem .6rem; border-bottom: 1px solid #e4e8ee; }
.dtl td { padding: .6rem; border-bottom: 1px solid #eef1f5; vertical-align: top; }
.dtl tr:last-child td { border-bottom: 0; }
.dtl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dtl tr.hit { background: #fbf7ea; }
.scroll-x { overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-color: #d2d2d7 transparent; }
.scroll-x::-webkit-scrollbar { height: 6px; }
.scroll-x::-webkit-scrollbar-track { background: transparent; }
.scroll-x::-webkit-scrollbar-thumb { background: #d2d2d7; border-radius: 3px; }

.note { display: flex; gap: .6rem; align-items: flex-start; padding: .8rem .9rem; border-radius: 10px; font-size: .84rem; line-height: 1.55; border: 1px solid transparent; }
.note i { font-size: 15px; margin-top: .1rem; flex: 0 0 auto; }
.note b { font-weight: 700; }
.note-ok  { background: var(--ok-bg);  color: #17593a; border-color: #c9e3d3; }
.note-warn{ background: var(--warn-bg); color: #6f4a0c; border-color: #ecd9ad; }
.note-bad { background: var(--bad-bg); color: var(--bad); border-color: #c7d0de; }
.note-ai  { background: var(--ai-bg);  color: var(--ai); border-color: #e9d9a6; }
.note-n   { background: #f5f5f7; color: #344054; border-color: #e4e8ee; }

.pill { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border-radius: 6px; font-size: .7rem; font-weight: 700; letter-spacing: .01em; background: #f5f5f7; color: #344054; border: 1px solid #e4e8ee; }
.pill-ok  { background: var(--ok-bg); color: #17593a; border-color: #c9e3d3; }
.pill-warn{ background: var(--warn-bg); color: #6f4a0c; border-color: #ecd9ad; }
.pill-bad { background: var(--bad-bg); color: var(--bad); border-color: #c7d0de; }
.pill-ai  { background: var(--ai-bg); color: var(--ai); border-color: #e9d9a6; }

.kv > div { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: .45rem 0; border-bottom: 1px solid #eef1f5; font-size: .84rem; }
.kv > div:last-child { border-bottom: 0; }
.kv .k { color: #5b6474; }
.kv .v { font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; }
.kv .v.big { font-size: 1.05rem; font-weight: 700; }
.kv .v.hi  { color: var(--brand); }

.btn-s { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .5rem .85rem; border-radius: 8px; border: 1px solid #c8ced6; background: #fff; color: #101828; font-size: .82rem; font-weight: 600; cursor: pointer; transition: background-color .15s, border-color .15s, transform .12s; }
.btn-s:hover  { border-color: var(--brand); }
.btn-s:active { transform: scale(.98); }
.btn-s[disabled] { opacity: .45; cursor: not-allowed; }
.btn-s-1 { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-s-1:hover { background: #0e2f4f; border-color: #0e2f4f; }
.row-s { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

.step { display: flex; gap: .7rem; align-items: flex-start; padding: .7rem .8rem; border: 1px solid #e4e8ee; border-radius: 10px; background: #f5f5f7; opacity: .45; transition: opacity .35s ease, background-color .35s ease, border-color .35s ease; }
.step.live { opacity: 1; background: #fbf7ea; border-color: #c9a84c; border-left-width: 3px; }
.step.done { opacity: 1; }
.step .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 700; background: #e4e8ee; color: var(--brand); flex: 0 0 auto; }
.step.live .n { background: #b8912e; color: #fff; }
.step.done .n { background: #c9e3d3; color: #17593a; }
.step h4, .step h5 { font-size: .82rem; font-weight: 700; margin: 0 0 .15rem; }
.step p  { font-size: .75rem; color: #5b6474; line-height: 1.45; margin: 0; }

.path { position: relative; height: 84px; border: 1px solid #e4e8ee; border-radius: 12px; background: #f5f5f7; overflow: hidden; }
.path .node { position: absolute; top: 50%; transform: translateY(-50%); width: 84px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .2rem; font-size: .66rem; color: #5b6474; }
.path .node i { font-size: 19px; color: var(--brand); }
.path .a { left: 8px; } .path .b { right: 8px; }
.path .dot { position: absolute; top: 50%; margin-top: -5px; left: 92px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand-2); }
.path.run .dot { animation: pathrun 2.2s cubic-bezier(.4,0,.6,1) infinite; }
.path.local { background: var(--ok-bg); border-color: #c9e3d3; }
.path.local .dot { animation-duration: .9s; }
.path.local .b { opacity: .28; }
@keyframes pathrun { 0% { left: 92px; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 100px); opacity: 0; } }

/* the demos' old palette utilities, mapped onto the product tokens. These
   selectors exist so that assets/demo/*.js can stay byte-identical. */
.scr .text-ink-soft { color: #5b6474; }
.scr .text-ink { color: #101828; }
.scr .text-wine, .scr .text-brass-deep { color: var(--brand-2); }
.scr .text-sage-deep { color: var(--ok); }
.scr .bg-paper, .scr .bg-paper-soft { background-color: #f5f5f7; }
.scr .bg-paper-deep { background-color: #e8e8ed; }
.scr .bg-card { background-color: #fff; }
.scr .border-line { border-color: #e4e8ee; }
.scr .border-line-strong { border-color: #c8ced6; }
.scr .rounded-2xl, .scr .rounded-3xl { border-radius: 12px; }
.scr .rounded-xl { border-radius: 10px; }
.scr .rounded-full { border-radius: 8px; }
.scr .font-display { font-family: var(--font); letter-spacing: -.02em; }
.scr .squiggle { background: none; }
.scr .shadow-softer, .scr .shadow-soft { box-shadow: var(--shadow-1); }

/* ----------------------------------------------------------------- footer */
.foot { background: var(--bg-2); border-top: 1px solid var(--line); padding-block: 48px 40px; color: var(--ink-2); font-size: .875rem; }
.foot-grid { display: grid; gap: 2rem; grid-template-columns: 2fr 1fr 1fr 1fr; }
@media (max-width: 1023px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 639px)  { .foot-grid { grid-template-columns: 1fr; } }
.foot h2 { font-size: .8rem; font-weight: 600; color: var(--ink); letter-spacing: 0; margin-bottom: .75rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.foot a { color: var(--ink-2); }
.foot a:hover { color: var(--ink); }
.foot .legal { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line-2); display: flex; flex-wrap: wrap; gap: .5rem 2rem; color: var(--ink-3); font-size: .8rem; }
.foot .legal address { font-style: normal; }
.foot .blurb { max-width: 380px; line-height: 1.5; }

/* -------------------------------------------------------------- the reveal
   Content is visible by default. When JS is running, sections are given .rv
   and materialise as they enter the viewport: opacity, a little rise, and a
   blur that resolves, which reads as a surface arriving rather than fading.
   Driven by IntersectionObserver in ls.js, one shot per element. */
.js .rv { opacity: 0; transform: translateY(16px); filter: blur(6px); transition: opacity .6s var(--ease-soft), transform .6s var(--ease-soft), filter .6s var(--ease-soft); transition-delay: calc(var(--i, 0) * 50ms); will-change: opacity, transform, filter; }
.js .rv.in { opacity: 1; transform: none; filter: blur(0); will-change: auto; }

/* -------------------------------------------------------------- image fallback */
[data-img-missing] { background: var(--bg-3); }

/* ----------------------------------------------------------------- touch */
@media (max-width: 900px), (pointer: coarse) {
  .btn, .btn-s, .tab, .fld input, .fld select, .fld textarea, .navlink, .foot a { min-height: 44px; }
  .foot a { display: inline-flex; align-items: center; }
  .tab { padding-block: .6rem; }
}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js .rv { opacity: 1; transform: none; filter: none; }
  .js .words.ready .w { opacity: 1; transform: none; filter: none; }
  .cost .bar span { transform: none; }
  .rail { scroll-behavior: auto; }
}

/* --------------------------------------------------------- standalone pages
   privacy.php, terms.php and the 404 share a narrow reading column. */
.prose { max-width: 720px; }
.prose h2 { font-size: 1.35rem; font-weight: 600; letter-spacing: -.016em; margin-top: 2rem; }
.prose h3 { font-size: 1.1rem; font-weight: 600; margin-top: 1.5rem; }
.prose p, .prose li { color: var(--ink-2); line-height: 1.6; margin-top: .75rem; }
.prose ul { padding-left: 1.25rem; }
.page-hero { padding-block: clamp(56px, 8vw, 96px) clamp(24px, 4vw, 40px); }
.page-hero .lead { margin-top: 1rem; max-width: 640px; }

/* ------------------------------------------------------- the hero cockpit
   The dashboard demo that opens the page, retoned to the product palette. */
.ck-head {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .6rem .75rem; border-radius: 10px; margin-bottom: .7rem;
  background: #e9f4ee; border: 1px solid #c9e3d3; color: #17593a; font-size: .78rem;
}
.ck-head .amt { font-variant-numeric: tabular-nums; font-weight: 700; }
/* The "=" between the bank figure and the sum of the ledgers is the whole
   assertion that line is making, not punctuation, so it has to be readable.
   At #8FAE99 on the #e9f4ee ground it sat at 2.15:1. #3f6b52 measures 5.31:1
   there and still reads as the quiet part of the line. */
.ck-head .sep { color: #3f6b52; }

/* The small caps label used above each block of the cockpit. Written here
   rather than as utilities because the Tailwind build is prebuilt and hand
   finished afterwards, so a class that was not already emitted does not
   exist. Anything the demos need that is not in tw.css lives in this file. */
.ck-lab {
  font-size: .64rem; text-transform: uppercase; letter-spacing: .09em;
  color: #5b6474; font-weight: 700; margin-bottom: .4rem;
}
.ck-foot { font-size: .68rem; line-height: 1.5; color: #5b6474; margin-top: .5rem; }
.ck-blk { margin-top: .85rem; }
.ck-blk.sep { padding-top: .8rem; border-top: 1px solid #e4e8ee; }

.ck-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.ck-tile {
  background: #fff; border: 1px solid #e4e8ee; border-radius: 10px; padding: .65rem .75rem;
  transition: border-color .15s ease, transform .15s ease;
}
.ck-tile:hover { border-color: #98a2b3; transform: translateY(-1px); }
.ck-tile .lab {
  font-size: .64rem; text-transform: uppercase; letter-spacing: .09em;
  color: #5b6474; font-weight: 700;
}
.ck-tile .big {
  font-weight: 600; letter-spacing: -.03em; font-size: 1.55rem;
  line-height: 1.1; color: #101828; font-variant-numeric: tabular-nums; margin-top: .15rem;
}
.ck-tile .sub { font-size: .7rem; color: #5b6474; line-height: 1.35; margin-top: .1rem; }
.ck-tile .sub.warn { color: #6f4a0c; font-weight: 700; }

/* the assistant's opening brief: the one AI surface on the first screen */
.ck-ai {
  display: flex; gap: .75rem; align-items: flex-start; padding: .85rem .95rem; margin-bottom: .8rem;
  border-radius: 10px; background: var(--brand-3); border: 1px solid #d3deea;
}
.ck-ai-ic { width: 32px; height: 32px; border-radius: 8px; background: var(--brand); color: #fff; display: grid; place-items: center; flex: 0 0 auto; font-size: 15px; }
.ck-ai-t { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--brand); margin: 0 0 .15rem; }
.ck-ai-b { font-size: .84rem; line-height: 1.5; color: #101828; margin: 0; }
.ck-ai-act { margin: .35rem 0 0; font-size: .78rem; display: flex; flex-wrap: wrap; gap: .5rem; color: #5b6474; }
.ck-ai-act a { color: var(--brand-2); font-weight: 600; }

/* the court diary */
.ck-diary { display: grid; gap: .3rem; }
.ck-row {
  display: grid; grid-template-columns: 82px 1fr auto; gap: .6rem; align-items: center;
  padding: .55rem .6rem; border: 1px solid #e4e8ee; border-radius: 8px; background: #fff; font-size: .8rem;
}
.ck-row.computed { border-left: 3px solid var(--brand); }
.ck-row .when { font-variant-numeric: tabular-nums; font-weight: 700; color: #101828; font-size: .76rem; }
.ck-row .what { min-width: 0; line-height: 1.35; }
.ck-row .what b { display: block; font-weight: 600; color: #101828; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-row .what small { display: block; font-size: .72rem; color: #5b6474; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-row .mno { font-variant-numeric: tabular-nums; color: #344054; }
.ck-rule {
  display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .55rem; border-radius: 6px;
  border: 1px solid #c8d6e6; background: #fff; color: var(--brand-2); font: inherit; font-size: .7rem;
  font-weight: 700; white-space: nowrap; cursor: pointer; transition: background-color .15s, transform .12s;
}
.ck-rule:hover { background: var(--brand-3); }
.ck-rule:active { transform: scale(.97); }
.ck-rule[aria-expanded="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.ck-rule i { font-size: 11px; }
.ck-typed { font-size: .68rem; color: #5b6474; white-space: nowrap; }
.ck-why {
  margin: -.1rem 0 .2rem; padding: .6rem .75rem .6rem 1rem; border-left: 2px solid var(--brand);
  background: #f5f5f7; border-radius: 0 8px 8px 0; font-size: .76rem; line-height: 1.5; color: #344054;
  animation: fade-in .35s var(--ease-soft) both;
}
.ck-why b { color: #101828; }
.ck-why a { margin-left: .25rem; font-weight: 600; }
@media (max-width: 479px) {
  .ck-row { grid-template-columns: 1fr auto; }
  .ck-row .when { grid-column: 1 / -1; }
  .ck-row .what b, .ck-row .what small { white-space: normal; }
}

/* the conveyancing pipeline: one strip, five stages, words beside swatches */
.ck-stages { display: flex; gap: 3px; height: 14px; border-radius: 4px; overflow: hidden; }
.ck-stages span { display: block; height: 100%; min-width: 6px; }
.ck-legend { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-top: .45rem; font-size: .72rem; color: #344054; }
.ck-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.ck-legend b { font-variant-numeric: tabular-nums; }
.ck-legend .sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.ck-stages .s1, .ck-legend .s1 { background: #c9d6e6; }
.ck-stages .s2, .ck-legend .s2 { background: #9fb6d0; }
.ck-stages .s3, .ck-legend .s3 { background: #6f8fb4; }
.ck-stages .s4, .ck-legend .s4 { background: #3e6592; }
.ck-stages .s5, .ck-legend .s5 { background: var(--brand); }

.ck-feed { display: grid; gap: .3rem; }
.ck-feed a {
  display: flex; align-items: flex-start; gap: .5rem; padding: .45rem .55rem;
  border-radius: 8px; font-size: .76rem; line-height: 1.4; color: #344054;
  text-decoration: none; border: 1px solid transparent; transition: background-color .15s,
  border-color .15s;
}
.ck-feed a:hover { background: #f5f5f7; border-color: #e4e8ee; color: #101828; }
.ck-feed a i:first-child { font-size: 13px; color: #7f9fc0; margin-top: .12rem; flex: 0 0 auto; }
.ck-feed a .go { margin-left: auto; color: #98a2b3; font-size: 11px; align-self: center; }
.ck-feed a:hover .go { color: #12395f; }


/* ---------------------------------------------------------------- print */
@media print {
  .noprint, .scr-bar .right { display: none !important; }
  body { background: #fff; }
  .rv { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; }
}

/* ------------------------------------------------- icon glyph map (Flaticon UIcons)
   The Flaticon UIcons subset. No emoji anywhere on this site, by instruction. */
.fi-rr-angle-small-down::before{content:"\e07c"}
.fi-rr-angle-small-right::before{content:"\e07e"}
.fi-rr-apps::before{content:"\e098"}
.fi-rr-archive::before{content:"\e09c"}
.fi-rr-arrow-right::before{content:"\e0cc"}
.fi-rr-arrow-small-left::before{content:"\e0d0"}
.fi-rr-arrow-small-right::before{content:"\e0d1"}
.fi-rr-badge-check::before{content:"\e135"}
.fi-rr-balance-scale-right::before{content:"\e146"}
.fi-rr-ballot::before{content:"\e14e"}
.fi-rr-ballot-check::before{content:"\e14f"}
.fi-rr-ban::before{content:"\e150"}
.fi-rr-bank::before{content:"\e158"}
.fi-rr-bell::before{content:"\e187"}
.fi-rr-bell-ring::before{content:"\e18b"}
.fi-rr-bolt::before{content:"\e1ce"}
.fi-rr-book::before{content:"\e1d8"}
.fi-rr-book-alt::before{content:"\e1d9"}
.fi-rr-bookmark::before{content:"\e1f1"}
.fi-rr-box-open::before{content:"\e21c"}
.fi-rr-brain-circuit::before{content:"\e248"}
.fi-rr-briefcase::before{content:"\e25c"}
.fi-rr-building::before{content:"\e27c"}
.fi-rr-calculator::before{content:"\e29b"}
.fi-rr-calendar::before{content:"\e2a1"}
.fi-rr-chart-histogram::before{content:"\e33d"}
.fi-rr-chart-line-up::before{content:"\e33f"}
.fi-rr-chart-pie::before{content:"\e345"}
.fi-rr-check::before{content:"\e35f"}
.fi-rr-checkbox::before{content:"\e364"}
.fi-rr-clipboard-list-check::before{content:"\e3e5"}
.fi-rr-clock::before{content:"\e3ea"}
.fi-rr-cloud::before{content:"\e409"}
.fi-rr-cloud-upload-alt::before{content:"\e42c"}
.fi-rr-coins::before{content:"\e44d"}
.fi-rr-comment::before{content:"\e454"}
.fi-rr-comment-alt::before{content:"\e455"}
.fi-rr-comments::before{content:"\e477"}
.fi-rr-copy::before{content:"\e49e"}
.fi-rr-credit-card::before{content:"\e4c1"}
.fi-rr-cross-circle::before{content:"\e4ce"}
.fi-rr-cross-small::before{content:"\e4d0"}
.fi-rr-database::before{content:"\e508"}
.fi-rr-desktop-wallpaper::before{content:"\e521"}
.fi-rr-devices::before{content:"\e525"}
.fi-rr-diagram-project::before{content:"\e52e"}
.fi-rr-document::before{content:"\e57f"}
.fi-rr-document-signed::before{content:"\e589"}
.fi-rr-download::before{content:"\e5a3"}
.fi-rr-edit::before{content:"\e5df"}
.fi-rr-envelope::before{content:"\e5fe"}
.fi-rr-exclamation::before{content:"\e61e"}
.fi-rr-eye::before{content:"\e62c"}
.fi-rr-face-viewfinder::before{content:"\e66e"}
.fi-rr-file-invoice::before{content:"\e6ad"}
.fi-rr-file-invoice-dollar::before{content:"\e6ae"}
.fi-rr-filter::before{content:"\e6d0"}
.fi-rr-fingerprint::before{content:"\e6d6"}
.fi-rr-flag::before{content:"\e6ef"}
.fi-rr-folder::before{content:"\e717"}
.fi-rr-folder-open::before{content:"\e728"}
.fi-rr-gavel::before{content:"\e776"}
.fi-rr-graduation-cap::before{content:"\e7a5"}
.fi-rr-grid::before{content:"\e7b1"}
.fi-rr-hand-holding-heart::before{content:"\e7f5"}
.fi-rr-handshake::before{content:"\e816"}
.fi-rr-heart::before{content:"\e83c"}
.fi-rr-home-location::before{content:"\e869"}
.fi-rr-hourglass-end::before{content:"\e87f"}
.fi-rr-id-badge::before{content:"\e8b4"}
.fi-rr-inbox::before{content:"\e8bf"}
.fi-rr-info::before{content:"\e8ce"}
.fi-rr-interrogation::before{content:"\e8e9"}
.fi-rr-key::before{content:"\e922"}
.fi-rr-laptop::before{content:"\e950"}
.fi-rr-layers::before{content:"\e964"}
.fi-rr-lightbulb-on::before{content:"\e998"}
.fi-rr-link::before{content:"\e9a3"}
.fi-rr-list::before{content:"\e9b1"}
.fi-rr-list-check::before{content:"\e9b2"}
.fi-rr-lock::before{content:"\e9c5"}
.fi-rr-lock-alt::before{content:"\e9c6"}
.fi-rr-magic-wand::before{content:"\e9dc"}
.fi-rr-medal::before{content:"\ea1b"}
.fi-rr-menu-burger::before{content:"\ea33"}
.fi-rr-microchip-ai::before{content:"\ea53"}
.fi-rr-mobile-notch::before{content:"\ea74"}
.fi-rr-money-bill-wave::before{content:"\ea84"}
.fi-rr-money-check::before{content:"\ea88"}
.fi-rr-note::before{content:"\eafa"}
.fi-rr-paper-plane::before{content:"\eb50"}
.fi-rr-pencil::before{content:"\eb87"}
.fi-rr-phone-call::before{content:"\ebde"}
.fi-rr-play::before{content:"\ec28"}
.fi-rr-radar::before{content:"\eca9"}
.fi-rr-receipt::before{content:"\ecc1"}
.fi-rr-refresh::before{content:"\ece4"}
.fi-rr-rocket-lunch::before{content:"\ed22"}
.fi-rr-route::before{content:"\ed2d"}
.fi-rr-sack-dollar::before{content:"\ed46"}
.fi-rr-scale::before{content:"\ed5e"}
.fi-rr-search::before{content:"\ed83"}
.fi-rr-settings::before{content:"\eda3"}
.fi-rr-settings-sliders::before{content:"\eda4"}
.fi-rr-shield::before{content:"\edae"}
.fi-rr-shield-check::before{content:"\edb1"}
.fi-rr-shuffle::before{content:"\eddf"}
.fi-rr-sort::before{content:"\ee57"}
.fi-rr-sparkles::before{content:"\ee79"}
.fi-rr-star::before{content:"\eed9"}
.fi-rr-stats::before{content:"\eee9"}
.fi-rr-target-audience::before{content:"\ef71"}
.fi-rr-time-past::before{content:"\efca"}
.fi-rr-trash::before{content:"\f026"}
.fi-rr-triangle-warning::before{content:"\f047"}
.fi-rr-trophy::before{content:"\f04d"}
.fi-rr-upload::before{content:"\f09c"}
.fi-rr-user-add::before{content:"\f0a8"}
.fi-rr-user-check::before{content:"\f0ab"}
.fi-rr-users::before{content:"\f0df"}
.fi-rr-users-alt::before{content:"\f0e0"}
.fi-rr-wifi::before{content:"\f15c"}
.fi-rr-workflow-setting-alt::before{content:"\f17f"}
.fi-brands-whatsapp::before{content:"\f151"}