/* Look & feel layer, shared with the sister broker sites: split hero with stat tiles, focused screens in browser
   chrome, a three-screen row, the feature grid, HTML step flows and hub diagrams, blog cards with screenshot
   thumbnails, post hero screens and themed mermaid. Colours come from the --lf-* tokens below (this site's palette). */
:root{
  --lf-a:#0f9d75; --lf-a2:#f5c451; --lf-deep:#0b6e56; --lf-tint:#e8f7f1; --lf-tint2:#fff6df; --lf-amber:#b4670f;
  --lf-ink:#1e1b4b; --lf-text:#4a4f6b; --lf-muted:#6b7396; --lf-line:#e6e8f5; --lf-mist:#f6f8fd;
  --lf-grad:linear-gradient(135deg,#0f9d75 0%,#0b6e56 50%,#c99a2e 100%);
  --lf-thumb:linear-gradient(135deg,#0b6e56,#0f9d75 55%,#f5c451);
}

/* ---------- hero ---------- */
.lf-hero .ai-hero__grid{ grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr); gap:52px; align-items:center; text-align:left; }
.lf-hero h1{ font-size:48px; line-height:1.1; margin-bottom:18px; }
.lf-hero p.lede{ font-size:18px; line-height:1.62; max-width:560px; margin-bottom:28px; }
.lf-stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:30px; max-width:600px; }
.lf-stats div{ border:1px solid rgba(255,255,255,.13); border-radius:12px; padding:12px 13px; background:rgba(255,255,255,.045); }
.lf-stats b{ display:block; color:#fff; font-size:21px; line-height:1.15; font-weight:700; }
.lf-stats span{ color:#a9b2d6; font-size:12px; line-height:1.38; display:block; margin-top:4px; }
.lf-stats-note{ color:#8f98bf; font-size:12px; margin:10px 0 0; }
.lf-hero .ai-hero__shot .vs-shot{ max-width:640px; margin-left:auto; }
.lf-hero .ai-hero__shot figcaption{ color:#aab3d6; font-size:13px; line-height:1.55; text-align:center; margin:12px auto 0; max-width:600px; }
.lf-hero .ai-hero__shot figcaption b{ color:#fff; }
@media(max-width:1100px){ .lf-hero .ai-hero__grid{ grid-template-columns:minmax(0,1fr); } .lf-hero .ai-hero__shot .vs-shot{ margin:0 auto; } }
@media(max-width:767px){ .lf-hero h1{ font-size:34px; } .lf-hero p.lede{ font-size:16.5px; } .lf-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ---------- screens: focused crops in browser chrome ---------- */
.lf-shot{ margin:0; min-width:0; }
.lf-shot .vs-shot{ max-width:none; box-shadow:0 22px 50px -28px rgba(30,27,75,.42); }
.lf-shot .vs-shot img{ width:100%; height:auto; display:block; }
.lf-shot figcaption{ color:var(--lf-muted); font-size:14.5px; line-height:1.55; margin-top:14px; text-align:left; }
.lf-shot figcaption b{ color:var(--lf-ink); display:block; font-size:16.5px; margin-bottom:3px; }
.lf-trio{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin-top:34px; align-items:start; }
.lf-duo{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; margin:34px auto 0; max-width:1120px; align-items:start; }
.lf-solo{ max-width:900px; margin:34px auto 0; }
@media(max-width:991px){ .lf-trio{ grid-template-columns:minmax(0,1fr); max-width:560px; margin-left:auto; margin-right:auto; } }
@media(max-width:767px){ .lf-duo{ grid-template-columns:minmax(0,1fr); gap:28px; } }

/* ---------- feature grid ---------- */
.lf-feats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:34px; }
.lf-feat{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--lf-line); border-radius:16px; padding:22px 20px 18px;
  text-decoration:none !important; box-shadow:0 10px 30px -24px rgba(11,21,48,.45); transition:transform .16s ease, box-shadow .16s ease, border-color .16s; }
.lf-feat:hover{ transform:translateY(-3px); box-shadow:0 18px 40px -22px rgba(11,21,48,.4); border-color:color-mix(in srgb,var(--lf-a) 45%,#fff); }
.lf-feat__icon{ width:44px; height:44px; border-radius:12px; background:var(--lf-grad); color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:14px; }
.lf-feat h3{ font-size:17px; color:var(--lf-ink); margin:0 0 7px; line-height:1.35; }
.lf-feat p{ font-size:14.5px; line-height:1.6; color:#56607c; margin:0 0 12px; }
.lf-feat__more{ margin-top:auto; font-size:14px; font-weight:600; color:var(--lf-deep); }
.lf-feat__more i{ font-size:12px; margin-left:4px; }
@media(max-width:1199px){ .lf-feats{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:860px){ .lf-feats{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:520px){ .lf-feats{ grid-template-columns:minmax(0,1fr); } }

/* ---------- step flow (replaces the grey mermaid strips on home / how it works) ---------- */
.lf-flow{ background:#fff; border:1px solid var(--lf-line); border-radius:20px; padding:22px; margin:34px auto 0; max-width:1120px; box-shadow:0 24px 60px -40px rgba(11,21,48,.45); }
.lf-flow__row{ display:flex; align-items:stretch; gap:0; }
.lf-step{ flex:1 1 0; min-width:0; position:relative; border:1.5px solid #d9def0; border-radius:14px; padding:14px 14px 16px; background:#fff; }
.lf-step + .lf-arrow{ }
.lf-arrow{ flex:0 0 28px; display:flex; align-items:center; justify-content:center; color:#8f98bf; font-size:15px; }
.lf-step__n{ display:inline-flex; width:24px; height:24px; border-radius:50%; background:var(--lf-deep); color:#fff; font-size:12px; font-weight:700; align-items:center; justify-content:center; }
.lf-step__ai{ position:absolute; top:13px; right:12px; font-size:10.5px; font-weight:800; letter-spacing:.05em; color:#fff; background:var(--lf-a); border-radius:999px; padding:2px 8px; }
.lf-step h4{ font-size:15.5px; line-height:1.3; margin:9px 0 6px; color:var(--lf-ink); font-weight:700; }
.lf-step p{ font-size:13.5px; line-height:1.5; color:#55607d; margin:0; overflow-wrap:anywhere; }
.lf-step--ai{ background:var(--lf-tint); border-color:color-mix(in srgb,var(--lf-a) 45%,#fff); }
.lf-step--ai h4{ color:var(--lf-deep); }
.lf-step--gate{ background:#f4f6ff; border-color:#c9d1ef; }
.lf-step--person{ background:var(--lf-tint2); border-color:#f1d49a; }
.lf-step--person h4{ color:var(--lf-amber); }
.lf-flow__note{ margin:14px 0 0; border:1.5px dashed #cfd5ea; border-radius:12px; padding:10px 16px; text-align:center; font-size:14px; color:#4f5975; background:var(--lf-mist); }
.lf-flow__foot{ margin:12px 0 0; text-align:center; font-size:14px; color:var(--lf-muted); }
.lf-flow__label{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--lf-muted); margin:18px 0 10px; }
.lf-flow__label:first-child{ margin-top:2px; }
.lf-branch{ display:grid; grid-template-columns:minmax(0,1fr) 28px minmax(0,1.1fr) 28px minmax(0,1fr); align-items:center; }
.lf-branch__mid{ display:grid; gap:10px; }
.lf-branch__mid .lf-step{ padding:11px 14px 12px; }
.lf-branch__mid .tag{ font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--lf-muted); }
@media(max-width:991px){
  .lf-flow__row, .lf-branch{ display:flex; flex-direction:column; }
  .lf-arrow{ flex:0 0 26px; transform:rotate(90deg); }
  .lf-step, .lf-branch__mid{ width:100%; }
}

/* ---------- hub diagram (one product in the middle, what flows in and out) ---------- */
.lf-hub{ display:grid; grid-template-columns:minmax(0,1fr) 40px minmax(0,.9fr) 40px minmax(0,1fr); align-items:center; gap:0; background:#fff;
  border:1px solid var(--lf-line); border-radius:20px; padding:24px; margin:34px auto 0; max-width:1120px; box-shadow:0 24px 60px -40px rgba(11,21,48,.45); }
.lf-hub__col{ display:grid; gap:10px; }
.lf-hub__item{ border:1.5px solid #d9def0; border-radius:12px; padding:10px 14px; background:#fff; }
.lf-hub__item b{ display:block; color:var(--lf-ink); font-size:14.5px; }
.lf-hub__item span{ display:block; color:#5d6683; font-size:13px; line-height:1.45; margin-top:2px; }
.lf-hub__item em{ font-style:normal; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--lf-deep); }
.lf-hub__core{ border-radius:16px; padding:22px 18px; text-align:center; background:var(--lf-grad); color:#fff; box-shadow:0 18px 40px -20px rgba(11,21,48,.6); }
.lf-hub__core b{ display:block; font-size:19px; }
.lf-hub__core span{ display:block; font-size:13.5px; opacity:.92; margin-top:6px; line-height:1.5; }
.lf-hub__arrow{ text-align:center; color:#8f98bf; font-size:16px; }
@media(max-width:991px){ .lf-hub{ grid-template-columns:minmax(0,1fr); gap:12px; } .lf-hub__arrow{ transform:rotate(90deg); } }

/* ---------- blog cards with thumbnails ---------- */
.lf-posts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; margin-top:30px; }
.lf-post{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--lf-line); border-radius:16px; overflow:hidden; text-decoration:none !important;
  box-shadow:0 14px 34px -26px rgba(11,21,48,.5); transition:transform .18s ease, box-shadow .18s ease; }
.lf-post:hover{ transform:translateY(-3px); box-shadow:0 22px 46px -24px rgba(11,21,48,.45); }
.lf-post__img{ aspect-ratio:37/21; background:var(--lf-thumb); border-bottom:1px solid var(--lf-line); overflow:hidden; }
.lf-post__img img{ width:100%; height:100%; object-fit:cover; object-position:left top; display:block; }
.lf-post__body{ display:flex; flex-direction:column; flex:1; padding:18px 22px 20px; }
.lf-chip{ align-self:flex-start; display:inline-block; font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--lf-deep);
  background:var(--lf-tint); border-radius:999px; padding:3px 10px; margin-bottom:10px; }
.lf-post h3{ font-size:18.5px; line-height:1.36; color:var(--lf-ink); margin:0 0 8px; font-weight:700; }
.lf-post p{ font-size:14.5px; line-height:1.62; color:#56607c; margin:0 0 14px; }
.lf-post__meta{ margin-top:auto; font-size:13px; color:#8a93ad; }
.lf-post__more{ display:block; margin-top:8px; font-size:14px; font-weight:600; color:var(--lf-deep); }
.lf-post__more i{ font-size:12px; margin-left:4px; }
.lf-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 6px; }
.lf-chips button{ font:600 13.5px/1 inherit; font-family:inherit; color:#3b3f5c; background:#fff; border:1px solid var(--lf-line); border-radius:999px; padding:9px 16px; cursor:pointer; }
.lf-chips button:hover{ border-color:var(--lf-a); }
.lf-chips button[aria-pressed="true"]{ background:var(--lf-ink); border-color:var(--lf-ink); color:#fff; }
.lf-chips button:focus-visible{ outline:3px solid var(--lf-a); outline-offset:2px; }
@media(max-width:991px){ .lf-posts{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:620px){ .lf-posts{ grid-template-columns:minmax(0,1fr); } }

/* ---------- blog post: hero screen under the header ---------- */
.lf-posthero{ background:linear-gradient(180deg,#1c2240 0%,#1c2240 50%,#fff 50%); padding:0 0 10px; }
.lf-posthero .vs-shot{ margin:0 auto; box-shadow:0 34px 80px -36px rgba(11,16,32,.6); }
.lf-posthero figcaption{ text-align:center; color:var(--lf-muted); font-size:14px; line-height:1.55; margin:14px auto 0; max-width:820px; }
.lf-posthero figcaption b{ color:var(--lf-ink); }
.blog-hero.ai-subhero{ padding-bottom:64px; }

/* ---------- mermaid, themed: tinted fills, rounded nodes, readable text ---------- */
.mermaid svg{ font-family:"Poppins",sans-serif !important; }
.mermaid .node rect, .mermaid .node polygon, .mermaid .node circle, .mermaid .node path{ stroke-width:1.5px !important; }
.mermaid .node rect{ rx:10px; ry:10px; }
.mermaid .edgeLabel, .mermaid .edgeLabel p{ background:#fff !important; color:#3b3f5c !important; font-size:13px; }
.mermaid .cluster rect{ rx:14px; ry:14px; }
.mermaid .actor{ rx:10px; ry:10px; }
.mermaid .stateGroup rect, .mermaid g.stateGroup rect{ rx:10px; ry:10px; }
.mermaid text.actor > tspan{ font-weight:600; }
.mermaid.is-scroll{ overflow-x:auto; text-align:left; -webkit-overflow-scrolling:touch; }
.mermaid.is-scroll svg{ margin:0 !important; }
.cw-diagram .mermaid.is-scroll{ text-align:left; }
.lf-stats-note{ line-height:1.5; }
.lf-hub__core b{ color:#fff; }

/* ---------- layered architecture (HTML, replaces the grey flowchart) ---------- */
.lf-band{ border:1.5px solid #dfe3f3; border-radius:16px; padding:14px 16px 16px; background:#fbfcff; }
.lf-band + .lf-band, .lf-band + .lf-down, .lf-down + .lf-band{ margin-top:10px; }
.lf-band__title{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--lf-muted); margin:0 0 10px; }
.lf-chiprow{ display:flex; flex-wrap:wrap; gap:8px; }
.lf-chiprow span{ font-size:14px; font-weight:600; color:var(--lf-ink); background:#fff; border:1.5px solid #d9def0; border-radius:10px; padding:8px 14px; }
.lf-envrow{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.lf-envrow div{ background:#fff; border:1.5px solid #d9def0; border-radius:12px; padding:10px 14px; }
.lf-envrow b{ display:block; font-size:14.5px; color:var(--lf-ink); }
.lf-envrow span{ display:block; font-size:13px; color:#5d6683; margin-top:2px; line-height:1.45; }
.lf-down{ text-align:center; color:#8f98bf; font-size:15px; line-height:1; }
.lf-band .lf-flow__note{ margin-top:12px; }
@media(max-width:860px){ .lf-envrow{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:480px){ .lf-envrow{ grid-template-columns:minmax(0,1fr); } }
.lf-flow--stages .lf-step h4{ margin-top:8px; }
.lf-flow--stages .lf-step p b{ color:var(--lf-deep); font-weight:600; }
.mermaid.is-scroll svg, .cw-diagram .mermaid.is-scroll svg{ max-width:none !important; }
/* plain links in body copy on light sections (the theme leaves them white) */
.recent-area p a:not([class]), .recent-area li a:not([class]), .vs-prose a:not([class]){ color:var(--lf-deep); font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; }
.recent-area p a:not([class]):hover, .vs-prose a:not([class]):hover{ color:var(--lf-a); }
.contact-card label a:not([class]){ color:var(--lf-deep); font-weight:600; text-decoration:underline; }
@media(max-width:575px){ .ai-subhero h1, .ai-hero h1{ font-size:32px; line-height:1.15; -webkit-hyphens:manual; hyphens:manual; } .blog-hero h1{ font-size:27px; } }