@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 {
  /* The floor is set from the narrowest phone, not from the desktop scale:
     at 2.75rem an eight word headline ran to three lines with the longest
     word touching both gutters. */
  font-size: clamp(2.25rem, 6vw, 4.5rem); line-height: 1.04;
  letter-spacing: -.035em; font-weight: 600;
}
@media (min-width: 640px) { .h-display { line-height: 1.02; } }
.h-1 {
  font-size: clamp(1.875rem, 3.8vw, 2.875rem); line-height: 1.08;
  letter-spacing: -.028em; font-weight: 600;
}
.h-2 {
  font-size: clamp(1.45rem, 2.5vw, 1.9rem); line-height: 1.14;
  letter-spacing: -.022em; font-weight: 600;
}
.h-3 { font-size: 1.125rem; line-height: 1.3; letter-spacing: -.012em; font-weight: 600; }
.lead {
  /* The floor stays a step above body copy (17px), or the lead stops reading
     as a lead on a phone and the section head loses its middle voice. */
  font-size: clamp(1.125rem, 1.35vw, 1.25rem); line-height: 1.45;
  letter-spacing: -.012em; color: var(--ink-2); font-weight: 400;
}
.sub { color: var(--ink-2); }
.small { font-size: .9375rem; letter-spacing: 0; }

/* Optical tracking. Letter spacing is a function of size, never one value for
   the whole page: display type is set tight because letters drift apart as
   they grow, and anything at or under 15px is released back towards zero (and
   a shade past it under 13px) so small copy does not read as a dark bar. */
.split-media figcaption, .stage-caption, .fact .s, .plan .alt, .plan .who,
.tile .list, .pt p, .card p, .foot, .hint-line, .glance dd {
  letter-spacing: 0;
}
.kicker, .chapter, .plan .tag, .foot .legal, .navm .grp {
  letter-spacing: .004em;
}
.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(60px, 7.5vw, 112px); position: relative; }
.sec-tight { padding-block: clamp(48px, 5.5vw, 80px); }
.sec-grey { background: var(--bg-2); }
.sec-head { margin-bottom: clamp(28px, 3.6vw, 52px); }
.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(32px, 4.6vw, 64px); }
.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;
  /* The press is felt immediately and the release is allowed to settle: one
     duration for both directions makes a button feel soft under the finger. */
  transition: transform 300ms var(--ease-soft), 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); transition-duration: 90ms; }
.btn-1 { background: var(--brand); color: #fff; }
.btn-1:hover { background: #0e2f4f; }

/* Specular highlight, adapted from React Bits "Specular Button" into plain
   CSS. Two parts, both of them things a real material does: a fixed bright
   top edge where light catches the lip, and a soft highlight that follows the
   pointer across the face. Pointer position arrives as --mx/--my from ls.js;
   with no pointer the button is simply a button. */
.btn-1, .btn-wa { position: relative; overflow: hidden; isolation: isolate; }
.btn-1::before, .btn-wa::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgb(255 255 255 / .16), rgb(255 255 255 / 0) 52%);
}
.btn-1::after, .btn-wa::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity var(--t-med) var(--ease-soft);
  background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%),
              rgb(255 255 255 / .22), transparent 72%);
}
@media (hover: hover) and (pointer: fine) {
  .btn-1:hover::after, .btn-wa:hover::after { opacity: 1; }
}
.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 { background: rgb(255 255 255 / .82); }
/* The bar meets the content it floats over with a soft edge rather than a
   drawn rule. The fade lives below the bar and never intercepts a pointer. */
.hdr::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 20px;
  pointer-events: none; opacity: 0;
  /* A real scroll edge, after React Bits "Gradual Blur": the blur itself is
     masked so it fades out down the strip, rather than a flat white veil
     stopping at a line. One layer, so it costs one composite. */
  background: linear-gradient(180deg, rgb(255 255 255 / .42), rgb(255 255 255 / 0));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent);
  mask-image: linear-gradient(180deg, #000, transparent);
  transition: opacity var(--t-med) ease;
}
@media (prefers-reduced-transparency: reduce) {
  .hdr::after { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.hdr.stuck::after { opacity: 1; }
/* Where a hairline carries more than a fade, draw it. */
@media (prefers-contrast: more) {
  .hdr.stuck { border-bottom-color: var(--line-2); }
  .hdr::after { display: none; }
}
@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; } }
/* The reading position, on the bar's own bottom edge. scaleX is a compositor
   property, so this animates without layout or paint work, and the whole thing
   is declarative: no JS, no scroll handler. */
.hdr-progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--brand); transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform;
}
@supports (animation-timeline: scroll()) {
  .hdr-progress {
    animation: hdr-progress linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes hdr-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* It reports position, which is information, so it is kept under reduced
   motion; what it must not do is draw attention to itself. */
@media (prefers-reduced-motion: reduce) { .hdr-progress { opacity: .75; } }

.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: var(--r-sm); 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: var(--r-sm); 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: var(--r-sm); }
.navbtn {
  width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: transparent;
  border-radius: var(--r-sm); 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;
  /* A bright top edge plus the floor shadow: the frame reads as a panel
     standing in light rather than a screenshot pasted on the page. */
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 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); } }

/* ------------------------------------------------------------- the AI strip
   The page's signature element, and the one thing repeated on every feature
   section: what the assistant does in THIS part of the practice, named with
   the button's real in-product label, and who checks it.

   It is one component rendered from data, not a panel written out by hand per
   section, so the promise is phrased identically in fourteen places. The
   verification line is not a disclaimer bolted on the end: the protocol's
   Gate B requires the confirmation to be designed WITH the suggestion, and on
   a marketing page that means a reader never sees a claim about the model
   without seeing who signs it off. */
.ai-strip {
  margin-top: clamp(24px, 3vw, 36px);
  border-radius: var(--r-md);
  background: var(--brand-3);
  padding: clamp(18px, 2.2vw, 26px) clamp(18px, 2.4vw, 28px);
}
.sec-grey .ai-strip { background: #fff; }
.ai-strip .ai-head {
  display: flex; align-items: center; gap: .5rem;
  color: var(--brand); font-weight: 600; font-size: .9375rem; letter-spacing: 0;
}
.ai-strip .ai-head i { font-size: 15px; }
.ai-acts { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .6rem; }
@media (min-width: 900px) { .ai-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 2rem; } }
.ai-acts li {
  display: grid; grid-template-columns: auto 1fr; gap: .5rem;
  align-items: baseline; font-size: .95rem; line-height: 1.5; color: var(--ink-2);
  letter-spacing: 0;
}
/* The action is set as the button it really is, so a reader who later opens
   the software recognises the same words on the same screen. */
.ai-acts .do {
  font-weight: 600; color: var(--ink); white-space: nowrap;
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-xs);
  padding: .1rem .45rem; font-size: .85rem;
}
.sec-grey .ai-acts .do { background: var(--bg-2); }
.ai-strip .ai-verify {
  margin-top: .9rem; padding-top: .75rem; border-top: 1px solid rgb(18 57 95 / .14);
  color: var(--ink-2); font-size: .9rem; line-height: 1.5; letter-spacing: 0;
}
.ai-strip .ai-verify b { color: var(--ink); font-weight: 600; }

/* The showcase list: the same "button, then what it does" shape as the strip,
   stacked rather than in two columns because the cards are already narrow. */
.ai-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .65rem; }
.ai-list li { display: grid; gap: .3rem; font-size: .925rem; line-height: 1.45; color: var(--ink-2); letter-spacing: 0; }
.ai-list .do {
  justify-self: start; font-weight: 600; color: var(--ink); font-size: .85rem;
  background: var(--brand-3); border-radius: var(--r-xs); padding: .1rem .45rem;
}
.ai-note {
  margin-top: clamp(28px, 3.4vw, 44px); border-radius: var(--r-md);
  border: 1px solid var(--line-2); padding: clamp(20px, 2.4vw, 28px);
  display: grid; gap: .9rem; max-width: 860px; margin-inline: auto;
}
.ai-note p { color: var(--ink-2); font-size: .975rem; line-height: 1.55; letter-spacing: 0; }
.ai-note b { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------ 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.05rem, 3.7vw, 3rem); 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(80px, 11vw, 160px); }
.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.125rem; 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; }
/* The tile's own edge picks up the light too, adapted from React Bits
   "Magic Bento". A border that brightens near the pointer reads as a real
   lip catching light; a border that pulses on its own reads as a gadget. */
.spot::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; opacity: 0; transition: opacity var(--t-med) ease;
  padding: 1px; background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
           rgb(18 57 95 / .55), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.spot:hover::before { opacity: 1; }
.tile.navy.spot::before { background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / .45), transparent 70%); }

/* ------------------------------------------------------------------- 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); }
/* Glare, adapted from React Bits "Glare Hover". A single soft band of light
   crosses the picture once when the pointer arrives, the way a sheen crosses
   a printed cover as you tilt it. It never loops: a light that keeps sweeping
   on its own is decoration, this one answers the pointer. */
.tile.img .glare {
  position: absolute; inset: -40% -10%; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / .16) 48%,
              rgb(255 255 255 / .30) 50%, rgb(255 255 255 / .16) 52%, transparent 62%);
  transform: translate3d(-120%, 0, 0); opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
  .tile.img:hover .glare {
    opacity: 1; transform: translate3d(120%, 0, 0);
    transition: transform 900ms var(--ease-soft), opacity 200ms ease;
  }
}
.tile.img .tile-copy {
  position: relative; z-index: 1; margin-top: auto; padding: 1.75rem 1.5rem 1.5rem;
  /* A longer, smoother ramp. The old one reached full strength at 30% and read
     as a bar laid on the picture; this one is still climbing at the baseline. */
  background: linear-gradient(180deg,
    rgb(10 24 42 / 0) 0%, rgb(10 24 42 / .28) 22%, rgb(10 24 42 / .62) 55%, rgb(10 24 42 / .88) 100%);
}
.tile.img .tile-copy .h-3 { color: #fff; letter-spacing: -.008em; }
/* Vibrancy: over a photograph the same copy needs a little more weight and a
   little more air between letters than it does on a white card. */
.tile.img .tile-copy p {
  color: rgb(255 255 255 / .92); font-weight: 450; letter-spacing: .006em;
  text-shadow: 0 1px 2px rgb(10 24 42 / .28);
}
.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(1.9rem, 2.5vw, 2.375rem); 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; }
/* A quarter-width column cannot hold a five word label on one line. */
.plan .btn { padding-inline: .75rem; }

/* 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: var(--r-sm); 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); transition-duration: 90ms; }
.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); color: var(--ink-2); font-size: .875rem;
  /* The last line of the page clears the home indicator on a phone. */
  padding-block: 48px calc(40px + env(safe-area-inset-bottom, 0px));
}
.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; }
/* :not(.btn) is load-bearing. `.foot a` outranks `.btn-1`, so without it the
   footer's navy Register button inherited the footer's grey link colour and
   rendered grey on navy at 1.49:1, effectively unreadable. */
.foot a:not(.btn) { color: var(--ink-2); }
.foot a:not(.btn):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; }
/* Media materialises: a frame resolves its blur and settles the last fraction
   of a percent of its scale, which reads as a surface arriving rather than a
   block of copy sliding up. */
.js .split-media.rv, .js .tile.img.rv { transform: translateY(16px) scale(.988); transform-origin: 50% 100%; }
.js .split-media.rv.in, .js .tile.img.rv.in { transform: none; }

/* -------------------------------------------------------------- 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; }
  /* A 44px target is the floor, not a licence to add a gap on top of it: with
     both, a ten item footer column ran to half a screen of empty grey. */
  .foot a { display: inline-flex; align-items: center; }
  .foot ul { gap: 0; }
  .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, .js .split-media.rv, .js .tile.img.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"}

/* ================================================= Document Intelligence (#knowledge), 25 Sep 2026 */
.kn-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kn-step { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.5rem 1.25rem; }
.kn-step h4 { font-size: 1.05rem; font-weight: 600; margin: 1rem 0 .4rem; }
.kn-step p { font-size: .925rem; color: var(--ink-2); margin: 0; }
.kn-n { position: absolute; top: 1.25rem; right: 1.25rem; font-size: .8rem; font-weight: 600; color: var(--brand); }
.kn-ask { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.25rem, 3vw, 2rem); }
.kn-quote { font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 600; letter-spacing: -.01em; margin: .5rem 0 1.5rem; }
.kn-res { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kn-r { border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.25rem; display: flex; flex-direction: column; gap: .6rem; }
.kn-r h4 { display: flex; align-items: center; gap: .5rem; font-size: 1rem; font-weight: 600; margin: 0; }
.kn-r p { font-size: .925rem; color: var(--ink-2); margin: 0; flex: 1; }
.kn-r.on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.kn-r.on h4 { color: var(--brand); }
.kn-tag { align-self: flex-start; font-size: .8rem; font-weight: 600; padding: .3rem .6rem; border-radius: var(--r-xs); background: var(--bg-2); }
.kn-r.on .kn-tag { background: var(--brand); color: #fff; }
.kn-table { overflow-x: auto; overflow-y: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.kn-table table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: .925rem; }
.kn-table th, .kn-table td { text-align: left; vertical-align: top; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); }
.kn-table thead th { font-size: .85rem; font-weight: 600; background: var(--bg-2); }
.kn-table tbody th { font-weight: 600; width: 18%; }
.kn-table td { color: var(--ink-2); }
.kn-table .on { color: var(--ink); background: rgb(18 57 95 / .04); }
.kn-table thead .on { color: var(--brand); background: rgb(18 57 95 / .08); }
.kn-table tbody tr:last-child > * { border-bottom: 0; }
.kn-ben { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kn-ben .w3 { grid-column: span 3; }
.kn-ben > .tile:not(.w3) { grid-column: span 2; }
@media (max-width: 1023px) {
  .kn-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kn-res { grid-template-columns: 1fr; }
  .kn-ben { grid-template-columns: 1fr; }
  .kn-ben .w3, .kn-ben > .tile:not(.w3) { grid-column: auto; }
}
@media (max-width: 599px) { .kn-flow { grid-template-columns: 1fr; } }
.kn-store { margin-top: 0; }
.kn .glance > div { grid-template-columns: 150px 1fr; }
@media (max-width: 767px) { .kn .glance { grid-template-columns: 1fr; } .kn .glance > div { grid-template-columns: 1fr; } }
.kn-two { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kn-col { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.25rem, 3vw, 2rem); }
.kn-col .h-3 { display: flex; align-items: center; gap: .6rem; margin: 0 0 1.25rem; }
.kn-col .h-3 i { color: var(--brand); }
.kn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.kn-list li { display: grid; grid-template-columns: 20px 1fr; gap: .6rem; }
.kn-list li > i { color: var(--brand); padding-top: .2rem; }
.kn-list b { display: block; font-weight: 600; margin-bottom: .15rem; }
.kn-list span { color: var(--ink-2); font-size: .95rem; line-height: 1.5; }
@media (max-width: 767px) { .kn-two { grid-template-columns: 1fr; } }