/* Do by Businlog: big-company design layer (D1). Loaded on every page AFTER site.css.
   Everything new is prefixed "ui-" so existing pages keep their look; the few global touches at the top are
   polish only (focus rings, wrapping), no layout changes. Light theme only. Macros: templates/_ui.html.

   ===== CLASS REFERENCE =====================================================================================
   TOKENS        --ui-fs-display/h1/h2/h3/h4/lead/body/sm/xs   type scale (fluid, 360px-safe)
                 --ui-s-1..10  spacing (4 8 12 16 24 32 48 64 96 128)   --ui-section-y  section padding
                 --ui-r-sm/r/r-lg/r-xl  radii   --ui-shadow-1/2/3  warm shadows   --ui-ease  standard easing
                 --ui-sun/mint/violet/pink(-ink/-soft)  tone colours (the -ink ones pass AA on their -soft bg)
   TYPE          .ui-display .ui-h1 .ui-h2 .ui-h3 .ui-h4   headings (use on any element)
                 .ui-lead (.ui-lead--lg)  .ui-body  .ui-small  .ui-xs  .ui-muted  .ui-ink
                 .ui-eyebrow  small uppercase kicker with a sunrise dash   .ui-grad  sunrise gradient text
                 .ui-measure  ~62ch line length   .ui-balance  .ui-tabular (tabular numbers)
   LAYOUT        .ui-section (--sm --lg --flush-top --flush-bottom)   vertical rhythm
                 .ui-section--warm .ui-section--mint .ui-section--white .ui-section--sky   tinted bands (+ hairlines)
                 .ui-wrap (--narrow 760, --mid 980, --wide 1320)   container, same gutters as .wrap
                 .ui-stack (--sm --lg)  vertical flow gap   .ui-cluster  wrapping row with gap   .ui-center
   GRID          .ui-grid  12 columns; every child is full width on phones
                   .ui-col-1 … .ui-col-12       span from 960px      .ui-col-md-1 … .ui-col-md-12   span from 640px
                   .ui-col-start-N (1–7, from 960px)   .ui-grid--gap-sm / --gap-lg   .ui-grid--middle (align centre)
                 .ui-cols-2 .ui-cols-3 .ui-cols-4   auto grids (1 col on phones, 2 from 640px, 3/4 from 960px)
                 .ui-cards  = .ui-cols-3 for feature cards   .ui-split  copy | media two-up (stacks < 900px)
                 .ui-split--flip  media first on desktop
   CARDS         .ui-card (--flat --tint --warm --mint --pad-lg)   surface, border, warm shadow
                 .ui-card--link + .ui-card-link   whole card clickable (link = the title), lifts on hover, focus ring
                 .ui-feature  icon + h3 + text card (from feature_card)   .ui-more  "Learn more →"
                 .ui-ic (--violet --pink --sun --mint --sky) (--sm --lg)   gradient icon tile, white icon
   STATS         .ui-stats (--band)   row of .ui-stat > .ui-stat-value + .ui-stat-label (from stat())
   HEADS         .ui-section-head (--start)   eyebrow + h2 + lead block (from section_head())
   PILLS         .ui-pill (--sun --mint --violet --pink) (--solid)   .ui-badge  tiny uppercase tag ("New")
                 .ui-example  "Example" label for illustrative/sample content (honesty rule)
                 .ui-live  pulsing green dot (still under reduced motion)
   LISTS         .ui-checks (--two --tight --on-dark)   green-tick list (from check_list())
                 .ui-steps  numbered vertical steps (li > b + span)
   CTA           .ui-cta > .ui-cta-in > h2 + p + .ui-cta-actions   sunrise call-to-action panel (from cta_band())
                 .ui-btn-light  white button for dark/colour panels   .ui-btn-glass  outline button for the same
   LINKS/BTNS    .ui-link-arrow  text link with an arrow that nudges on hover   .ui-btn-row  wrapping button row
                 (stacks full-width under 480px)   existing .btn .btn-primary .btn-ghost .btn-lg .btn-sm keep working
   MISC          .ui-divider  hairline   .ui-kbd  keyboard key   .ui-media  rounded framed image/figure
                 .ui-surface  plain white rounded panel   .ui-sr  visually hidden (same as .sr-only)
   ========================================================================================================= */

:root {
  /* type scale */
  --ui-fs-display: clamp(2.5rem, 1.45rem + 4.6vw, 4.9rem);
  --ui-fs-h1: clamp(2.15rem, 1.35rem + 3.5vw, 4rem);
  --ui-fs-h2: clamp(1.75rem, 1.22rem + 2.2vw, 2.75rem);
  --ui-fs-h3: clamp(1.1rem, 1.04rem + .28vw, 1.28rem);
  --ui-fs-h4: 1.04rem;
  --ui-fs-lead: clamp(1.05rem, .99rem + .38vw, 1.22rem);
  --ui-fs-body: 1rem;
  --ui-fs-sm: .92rem;
  --ui-fs-xs: .8rem;
  /* spacing (4px steps, then larger jumps) */
  --ui-s-1: 4px; --ui-s-2: 8px; --ui-s-3: 12px; --ui-s-4: 16px; --ui-s-5: 24px;
  --ui-s-6: 32px; --ui-s-7: 48px; --ui-s-8: 64px; --ui-s-9: 96px; --ui-s-10: 128px;
  --ui-section-y: clamp(64px, 9vw, 120px);
  --ui-gap: clamp(16px, 2.2vw, 24px);
  /* radii + shadows (warm, matching the sunrise layer) */
  --ui-r-sm: 10px; --ui-r: 16px; --ui-r-lg: 22px; --ui-r-xl: clamp(22px, 3vw, 32px);
  --ui-shadow-1: 0 1px 2px rgba(70, 45, 10, .05), 0 1px 1px rgba(70, 45, 10, .03);
  --ui-shadow-2: 0 1px 2px rgba(70, 45, 10, .05), 0 10px 26px -14px rgba(255, 140, 40, .30);
  --ui-shadow-3: 0 2px 4px rgba(70, 45, 10, .05), 0 24px 48px -20px rgba(214, 51, 122, .26), 0 12px 24px -14px rgba(255, 138, 0, .22);
  --ui-ease: cubic-bezier(.2, .7, .2, 1);
  /* tones: -ink is text colour, AA (4.5:1+) on the matching -soft background over the warm page */
  --ui-sun: #ff9f1a;    --ui-sun-ink: #8a4300;    --ui-sun-soft: #fff0d1;
  --ui-mint: #12b886;   --ui-mint-ink: #04694a;   --ui-mint-soft: #e3f7ef;
  --ui-violet: #5b3df5; --ui-violet-ink: #4a32d6; --ui-violet-soft: #efecff;
  --ui-pink: #ff4d8d;   --ui-pink-ink: #a8124c;   --ui-pink-soft: #ffe8f0;
  --ui-sky: #3fa8ff;    --ui-sky-ink: #0b5a9c;    --ui-sky-soft: #e5f3ff;
  --ui-kicker: #c2410c;
}

/* ---------- global polish (safe for every page) ---------- */
p, li, dd { text-wrap: pretty; }
a, button, summary, label { -webkit-tap-highlight-color: transparent; }
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 999px; }
.btn-primary:focus-visible { box-shadow: 0 0 0 2px var(--surface), 0 8px 20px -8px rgba(91, 77, 255, .65); }
summary:focus-visible { outline-offset: 2px; }

/* ---------- type ---------- */
.ui-display, .ui-h1, .ui-h2, .ui-h3, .ui-h4 { font-family: var(--f-display); color: var(--ink); text-wrap: balance; margin: 0 0 .5em; }
.ui-display { font-size: var(--ui-fs-display); line-height: 1.02; letter-spacing: -.045em; font-weight: 760; }
.ui-h1 { font-size: var(--ui-fs-h1); line-height: 1.06; letter-spacing: -.04em; font-weight: 750; }
.ui-h2 { font-size: var(--ui-fs-h2); line-height: 1.1; letter-spacing: -.034em; font-weight: 720; }
.ui-h3 { font-size: var(--ui-fs-h3); line-height: 1.25; letter-spacing: -.016em; font-weight: 650; }
.ui-h4 { font-size: var(--ui-fs-h4); line-height: 1.3; letter-spacing: -.01em; font-weight: 650; }
.ui-lead { font-size: var(--ui-fs-lead); line-height: 1.6; color: var(--ink-2); max-width: 40em; margin: 0 0 1em; }
.ui-lead--lg { font-size: clamp(1.1rem, 1rem + .55vw, 1.35rem); }
.ui-body { font-size: var(--ui-fs-body); line-height: 1.65; color: var(--ink-2); }
.ui-small { font-size: var(--ui-fs-sm); line-height: 1.55; }
.ui-xs { font-size: var(--ui-fs-xs); line-height: 1.5; }
.ui-muted { color: var(--ink-3); }
.ui-ink { color: var(--ink); }
.ui-measure { max-width: 62ch; }
.ui-balance { text-wrap: balance; }
.ui-tabular { font-variant-numeric: tabular-nums; }
.ui-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 650 .78rem/1.2 var(--f-body); letter-spacing: .09em; text-transform: uppercase; color: var(--ui-kicker); }
.ui-eyebrow::before { content: ""; flex: none; width: 18px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #5b3df5, #ff4d8d, #ffb020); }
.ui-eyebrow svg { flex: none; }
.ui-grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- layout ---------- */
.ui-section { padding: var(--ui-section-y) 0; position: relative; }
.ui-section--sm { padding: clamp(40px, 6vw, 72px) 0; }
.ui-section--lg { padding: clamp(80px, 11vw, 152px) 0; }
.ui-section--flush-top { padding-top: 0; }
.ui-section--flush-bottom { padding-bottom: 0; }
.ui-section--warm { background: linear-gradient(180deg, #fff6e6 0%, #fffaf3 100%); border-block: 1px solid rgba(255, 176, 32, .25); }
.ui-section--mint { background: linear-gradient(180deg, #effaf5 0%, #f7fdfa 100%); border-block: 1px solid rgba(18, 184, 134, .2); }
.ui-section--sky { background: linear-gradient(180deg, #eef6ff 0%, #f8fbff 100%); border-block: 1px solid rgba(63, 168, 255, .2); }
.ui-section--white { background: var(--surface); border-block: 1px solid var(--line); }
.ui-wrap { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin: 0 auto; padding-inline: var(--gutter); }
.ui-wrap--narrow { max-width: calc(760px + var(--gutter) * 2); }
.ui-wrap--mid { max-width: calc(980px + var(--gutter) * 2); }
.ui-wrap--wide { max-width: calc(1320px + var(--gutter) * 2); }
.ui-stack { display: grid; gap: var(--ui-s-4); align-content: start; }
.ui-stack > * { margin: 0; }
.ui-stack--sm { gap: var(--ui-s-2); }
.ui-stack--lg { gap: var(--ui-s-6); }
.ui-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-s-3); }
.ui-center { text-align: center; }
.ui-center .ui-lead, .ui-center .ui-measure { margin-inline: auto; }

/* ---------- grid ---------- */
.ui-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ui-gap); }
.ui-grid > * { grid-column: span 12; min-width: 0; }
.ui-grid--gap-sm { gap: var(--ui-s-3); }
.ui-grid--gap-lg { gap: clamp(24px, 4vw, 56px); }
.ui-grid--middle { align-items: center; }
@media (min-width: 640px) {
  .ui-grid > .ui-col-md-1 { grid-column: span 1; }  .ui-grid > .ui-col-md-2 { grid-column: span 2; }
  .ui-grid > .ui-col-md-3 { grid-column: span 3; }  .ui-grid > .ui-col-md-4 { grid-column: span 4; }
  .ui-grid > .ui-col-md-5 { grid-column: span 5; }  .ui-grid > .ui-col-md-6 { grid-column: span 6; }
  .ui-grid > .ui-col-md-7 { grid-column: span 7; }  .ui-grid > .ui-col-md-8 { grid-column: span 8; }
  .ui-grid > .ui-col-md-9 { grid-column: span 9; }  .ui-grid > .ui-col-md-10 { grid-column: span 10; }
  .ui-grid > .ui-col-md-11 { grid-column: span 11; } .ui-grid > .ui-col-md-12 { grid-column: span 12; }
}
@media (min-width: 960px) {
  .ui-grid > .ui-col-1 { grid-column: span 1; }  .ui-grid > .ui-col-2 { grid-column: span 2; }
  .ui-grid > .ui-col-3 { grid-column: span 3; }  .ui-grid > .ui-col-4 { grid-column: span 4; }
  .ui-grid > .ui-col-5 { grid-column: span 5; }  .ui-grid > .ui-col-6 { grid-column: span 6; }
  .ui-grid > .ui-col-7 { grid-column: span 7; }  .ui-grid > .ui-col-8 { grid-column: span 8; }
  .ui-grid > .ui-col-9 { grid-column: span 9; }  .ui-grid > .ui-col-10 { grid-column: span 10; }
  .ui-grid > .ui-col-11 { grid-column: span 11; } .ui-grid > .ui-col-12 { grid-column: span 12; }
  .ui-grid > .ui-col-start-1 { grid-column-start: 1; } .ui-grid > .ui-col-start-2 { grid-column-start: 2; }
  .ui-grid > .ui-col-start-3 { grid-column-start: 3; } .ui-grid > .ui-col-start-4 { grid-column-start: 4; }
  .ui-grid > .ui-col-start-5 { grid-column-start: 5; } .ui-grid > .ui-col-start-6 { grid-column-start: 6; }
  .ui-grid > .ui-col-start-7 { grid-column-start: 7; }
}
.ui-cols-2, .ui-cols-3, .ui-cols-4, .ui-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ui-gap); }
.ui-cols-2 > *, .ui-cols-3 > *, .ui-cols-4 > *, .ui-cards > * { min-width: 0; }
@media (min-width: 640px) { .ui-cols-2, .ui-cols-3, .ui-cols-4, .ui-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) {
  .ui-cols-3, .ui-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ui-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ui-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.ui-split > * { min-width: 0; }
@media (min-width: 900px) {
  .ui-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .ui-split--flip > :first-child { order: 2; }
  .ui-split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---------- section heads ---------- */
.ui-section-head { max-width: 46rem; margin: 0 auto clamp(32px, 5vw, 56px); text-align: center; }
.ui-section-head .ui-h2 { margin-bottom: 14px; }
.ui-section-head .ui-lead { margin: 0 auto; }
.ui-section-head--start { margin-left: 0; text-align: left; }
.ui-section-head--start .ui-lead { margin-left: 0; }

/* ---------- cards ---------- */
.ui-card { --ui-card-r: var(--ui-r); position: relative; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--ui-card-r);
  padding: clamp(20px, 2.6vw, 28px); box-shadow: var(--ui-shadow-2); transition: transform .25s var(--ui-ease), box-shadow .25s var(--ui-ease), border-color .2s; }
.ui-card > :last-child { margin-bottom: 0; }
.ui-card--pad-lg { --ui-card-r: var(--ui-r-lg); padding: clamp(24px, 4vw, 40px); }
.ui-card--flat { box-shadow: none; }
.ui-card--tint { background: var(--surface-2); box-shadow: none; }
.ui-card--warm { background: linear-gradient(160deg, #fff7e8, #ffffff 70%); border-color: rgba(255, 176, 32, .28); }
.ui-card--mint { background: linear-gradient(160deg, #ecfaf4, #ffffff 70%); border-color: rgba(18, 184, 134, .24); }
.ui-card--link { cursor: pointer; }
.ui-card--link:hover { transform: translateY(-3px); border-color: rgba(255, 138, 0, .38); box-shadow: var(--ui-shadow-3); }
.ui-card-link { color: inherit; text-decoration: none; }
.ui-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--ui-card-r); }
.ui-card-link:focus-visible { outline: none; }
.ui-card-link:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 3px; }
.ui-card--link:hover .ui-card-link { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: rgba(255, 138, 0, .55); }
.ui-feature .ui-h3 { margin: 18px 0 8px; }
.ui-feature p { margin: 0; color: var(--ink-2); font-size: .96rem; line-height: 1.6; }
.ui-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-weight: 650; font-size: .92rem; color: var(--accent-ink); }
.ui-more svg { transition: transform .25s var(--ui-ease); }
.ui-card--link:hover .ui-more svg { transform: translateX(4px); }

.ui-ic { --ui-ic: 44px; flex: none; width: var(--ui-ic); height: var(--ui-ic); border-radius: calc(var(--ui-ic) * .3); display: inline-grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #5b3df5, #8b5cf6); box-shadow: 0 8px 18px -8px rgba(91, 61, 245, .6), inset 0 1px 0 rgba(255, 255, 255, .28); }
.ui-ic--sm { --ui-ic: 34px; }
.ui-ic--lg { --ui-ic: 56px; }
.ui-ic--violet { background: linear-gradient(135deg, #5b3df5, #8b5cf6); box-shadow: 0 8px 18px -8px rgba(91, 61, 245, .6), inset 0 1px 0 rgba(255, 255, 255, .28); }
.ui-ic--pink { background: linear-gradient(135deg, #e8457f, #ff7a59); box-shadow: 0 8px 18px -8px rgba(232, 69, 127, .6), inset 0 1px 0 rgba(255, 255, 255, .28); }
.ui-ic--sun { background: linear-gradient(135deg, #ff9f1a, #ff6a3d); box-shadow: 0 8px 18px -8px rgba(255, 122, 26, .6), inset 0 1px 0 rgba(255, 255, 255, .3); }
.ui-ic--mint { background: linear-gradient(135deg, #12b886, #0ea5a4); box-shadow: 0 8px 18px -8px rgba(14, 165, 164, .55), inset 0 1px 0 rgba(255, 255, 255, .28); }
.ui-ic--sky { background: linear-gradient(135deg, #3fa8ff, #5b6cff); box-shadow: 0 8px 18px -8px rgba(63, 120, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .28); }

/* ---------- stats ---------- */
.ui-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-s-5) var(--ui-gap); }
@media (min-width: 900px) { .ui-stats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
.ui-stat { display: grid; gap: 6px; align-content: start; min-width: 0; }
.ui-stat-value { font: 760 clamp(2rem, 1.5rem + 2vw, 3.1rem)/1 var(--f-display); letter-spacing: -.045em; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ui-stat-label { color: var(--ink-2); font-size: var(--ui-fs-sm); line-height: 1.45; }
.ui-stats--band { background: var(--surface); border: 1px solid var(--line); border-radius: var(--ui-r-lg); box-shadow: var(--ui-shadow-2); padding: clamp(22px, 3.5vw, 36px); gap: 0; }
.ui-stats--band > .ui-stat { padding: 16px clamp(12px, 2vw, 24px); }
.ui-stats--band > .ui-stat:nth-child(odd) { border-right: 1px solid var(--line); }
.ui-stats--band > .ui-stat:nth-child(n+3) { border-top: 1px solid var(--line); }
@media (min-width: 900px) {
  .ui-stats--band > .ui-stat { border: 0 !important; }
  .ui-stats--band > .ui-stat + .ui-stat { border-left: 1px solid var(--line) !important; }
}
.ui-stats--band .ui-stat-value { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }

/* ---------- pills, badges, example label, live dot ---------- */
.ui-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font: 650 .8rem/1.15 var(--f-body); letter-spacing: .005em; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  color: var(--ui-sun-ink); background: var(--ui-sun-soft); border: 1px solid rgba(255, 159, 26, .32); }
.ui-pill svg { flex: none; }
.ui-pill--sun { color: var(--ui-sun-ink); background: var(--ui-sun-soft); border-color: rgba(255, 159, 26, .32); }
.ui-pill--mint { color: var(--ui-mint-ink); background: var(--ui-mint-soft); border-color: rgba(18, 184, 134, .3); }
.ui-pill--violet { color: var(--ui-violet-ink); background: var(--ui-violet-soft); border-color: rgba(91, 61, 245, .22); }
.ui-pill--pink { color: var(--ui-pink-ink); background: var(--ui-pink-soft); border-color: rgba(255, 77, 141, .28); }
.ui-pill--solid { color: #fff; background: linear-gradient(135deg, #c2410c, #be185d); border-color: transparent; }
.ui-badge { display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 6px; font: 700 .68rem/1.2 var(--f-body); letter-spacing: .07em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, #c2410c, #be185d); vertical-align: middle; }
.ui-example { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: 650 .74rem/1.2 var(--f-body); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); background: var(--surface); border: 1px dashed var(--line-2); }
.ui-example::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ui-sun); }
.ui-live { position: relative; display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ui-mint); vertical-align: middle; }
.ui-live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--ui-mint); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ui-live::after { animation: ui-ping 1.8s var(--ui-ease) infinite; }
  @keyframes ui-ping { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }
}

/* ---------- check list + steps ---------- */
.ui-checks { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 12px; }
.ui-checks li { position: relative; padding-left: 32px; color: var(--ink-2); line-height: 1.55; }
.ui-checks li::before { content: ""; position: absolute; left: 0; top: .14em; width: 21px; height: 21px; border-radius: 7px;
  background: var(--ui-mint-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23047857' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  box-shadow: inset 0 0 0 1px rgba(18, 184, 134, .22); }
.ui-checks li b { color: var(--ink); font-weight: 650; }
.ui-checks--tight { gap: 8px; }
.ui-checks--two { grid-template-columns: minmax(0, 1fr); gap: 12px 28px; }
@media (min-width: 640px) { .ui-checks--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ui-checks--on-dark li { color: rgba(255, 255, 255, .92); }
.ui-checks--on-dark li b { color: #fff; }
.ui-checks--on-dark li::before { background-color: rgba(255, 255, 255, .92); box-shadow: none; }
.ui-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; counter-reset: ui-step; }
.ui-steps > li { position: relative; padding: 0 0 22px 52px; counter-increment: ui-step; min-width: 0; }
.ui-steps > li::before { content: counter(ui-step); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font: 700 .9rem/1 var(--f-display); color: #fff; background: linear-gradient(135deg, #5b3df5, #e8457f); box-shadow: 0 6px 14px -6px rgba(91, 61, 245, .6); }
.ui-steps > li:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 40px; bottom: 4px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, rgba(91, 61, 245, .3), rgba(255, 176, 32, .3)); }
.ui-steps > li:last-child { padding-bottom: 0; }
.ui-steps b { display: block; color: var(--ink); font-weight: 650; margin: 5px 0 2px; }
.ui-steps span, .ui-steps p { color: var(--ink-2); font-size: .95rem; margin: 0; }

/* ---------- CTA band ---------- */
/* Every gradient stop keeps white text at 4.5:1 or better; the colour glows sit at the edges, away from the copy. */
.ui-cta { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--ui-r-xl); color: #fff; text-align: center;
  padding: clamp(44px, 7vw, 88px) clamp(20px, 5vw, 64px);
  background: linear-gradient(125deg, #4a2fd8 0%, #6a2bc4 30%, #9c1f6c 68%, #b23a0c 100%);
  box-shadow: 0 30px 70px -34px rgba(156, 31, 108, .7), 0 14px 30px -18px rgba(178, 58, 12, .45); }
.ui-cta::before { content: ""; position: absolute; inset: -30%; z-index: -1; pointer-events: none;
  background: radial-gradient(28% 34% at 8% 6%, rgba(255, 176, 32, .55), transparent 70%), radial-gradient(30% 36% at 96% 98%, rgba(255, 77, 141, .5), transparent 70%),
              radial-gradient(22% 30% at 94% 4%, rgba(63, 168, 255, .35), transparent 70%); }
.ui-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .22;
  background-image: radial-gradient(rgba(255, 255, 255, .8) 1px, transparent 1.2px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 90% at 50% 50%, transparent 40%, #000 100%); mask-image: radial-gradient(70% 90% at 50% 50%, transparent 40%, #000 100%); }
.ui-cta-in { max-width: 44rem; margin: 0 auto; }
.ui-cta .ui-h2, .ui-cta h2 { color: #fff; margin: 0 0 14px; }
.ui-cta p { color: rgba(255, 255, 255, .94); font-size: var(--ui-fs-lead); line-height: 1.55; margin: 0 auto 28px; max-width: 36em; }
.ui-cta small { display: block; margin-top: 18px; color: rgba(255, 255, 255, .9); font-size: .9rem; }
.ui-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.ui-cta :focus-visible { outline-color: #fff; }
.ui-btn-light { background: #fff; color: #4a2fd8; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .45); font-weight: 650; }
.ui-btn-light:hover { transform: translateY(-1px); box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .5); }
.ui-btn-light svg { transition: transform .25s var(--ui-ease); }
.ui-btn-light:hover svg { transform: translateX(3px); }
.ui-btn-glass { color: #fff; border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ui-btn-glass:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }
.ui-btn-light:focus-visible, .ui-btn-glass:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* Legacy .cta band (pricing, compare, solutions, directory) gets the same AA-safe stops as .ui-cta. The shorthand
   drops site.css's bright radial glow layers (#ffb020 / #ff4d8d under white text); the dot texture stays at the edges. */
.cta { background: linear-gradient(125deg, #4a2fd8 0%, #6a2bc4 30%, #9c1f6c 68%, #b23a0c 100%);
  box-shadow: 0 30px 70px -34px rgba(156, 31, 108, .7), 0 14px 30px -18px rgba(178, 58, 12, .45); }
.cta::after { -webkit-mask-image: radial-gradient(70% 90% at 50% 50%, transparent 40%, #000 100%); mask-image: radial-gradient(70% 90% at 50% 50%, transparent 40%, #000 100%); }

/* ---------- links + button rows ---------- */
.ui-link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--accent-ink); text-decoration: none; }
.ui-link-arrow:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.ui-link-arrow svg { flex: none; transition: transform .25s var(--ui-ease); }
.ui-link-arrow:hover svg { transform: translateX(4px); }
.ui-btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ui-center .ui-btn-row, .ui-btn-row.ui-center { justify-content: center; }
@media (max-width: 480px) {
  .ui-btn-row, .ui-cta-actions { flex-direction: column; align-items: stretch; }
  .ui-btn-row .btn, .ui-cta-actions .btn { width: 100%; white-space: normal; }
}

/* ---------- form field borders: WCAG 1.4.11 (3:1+ at rest) ----------
   #948b7d is 3.3:1 on white and on the warm page; --line-2 stays the hairline token. These rules out-rank the
   per-page sheets loaded later (talk, pages-trust, demo, compare) but never their hover, focus or invalid states.
   Inputs carry the border themselves; .tr-search-box, .demo-add and .suffix carry it on the wrapper (the inner input
   is border: 0), so those skip :focus-within and their state classes; .stepper has no hover/focus state of its own. */
:is(.field input, .field select, .field textarea, .talk-field input, .talk-field select, .talk-field textarea, .cc-money input):not(:hover):not(:focus):not([aria-invalid="true"]),
:is(.tr-search-box, .demo-add, .suffix):not(:focus-within):not(.is-nudge):not(.is-typing):not(.ok):not(.bad),
.stepper { border-color: #948b7d; }

/* ---------- misc ---------- */
.ui-divider { height: 1px; border: 0; margin: var(--ui-s-7) 0; background: linear-gradient(90deg, transparent, var(--line-2) 15%, var(--line-2) 85%, transparent); }
.ui-kbd { display: inline-block; min-width: 1.6em; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--line-2); border-bottom-width: 2px; background: var(--surface); color: var(--ink); font: 600 .8em/1.3 ui-monospace, "SF Mono", Menlo, Consolas, monospace; text-align: center; }
.ui-media { margin: 0; border-radius: var(--ui-r-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--ui-shadow-3); }
.ui-media img { width: 100%; }
.ui-surface { background: var(--surface); border: 1px solid var(--line); border-radius: var(--ui-r-lg); box-shadow: var(--ui-shadow-1); }
.ui-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .ui-card, .ui-card--link:hover, .ui-btn-light:hover { transform: none; }
  .ui-more svg, .ui-link-arrow svg, .ui-btn-light svg { transition: none; }
}