/* Self-hosted type (SIL Open Font License; licences in assets/fonts) */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/figtree-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/figtree-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/figtree-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/figtree-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/figtree-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/plus-jakarta-sans-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/plus-jakarta-sans-latin-800-normal.woff2) format("woff2"); }

/* Crystal Lotus — site styles
   Conventional Salesforce-ecosystem layout on a white page, coloured with the Salesforce Lightning palette
   (Salesforce Blue #0176D3, Cloud Navy #032D60, Salesforce Blue 60 #1B96FF, tints #EEF4FF / #F3F3F3).
   Type: Salesforce Sans where the visitor has it installed, otherwise Figtree from Google Fonts. */

:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #f3f3f3;
  --tint: #eef4ff;
  --tint-2: #d8e6fe;
  --ink: #032d60;
  --text: #181818;
  --ink-2: #444444;
  --ink-3: #747474;
  --line: #e5e5e5;
  --line-2: #c9c9c9;
  --action: #0176d3;
  --action-hover: #014486;
  --link: #0b5cab;
  --blue-60: #1b96ff;
  --blue-80: #aacbff;
  --sky: #00a1e0;
  --navy: #032d60;
  --success: #2e844a;
  --warning: #dd7a01;
  --band: #032d60;
  --band-ink: #ffffff;
  --band-ink-2: #c5d5ea;
  --shadow: 0 2px 8px rgba(3, 45, 96, 0.08);
  --shadow-lg: 0 12px 28px rgba(3, 45, 96, 0.14);
  --radius: 0;
  --radius-sm: 0;
  --focus: #1b96ff;
  --brand-a: #032d60;
  --brand-b: #00a1e0;
  --brand-grad: linear-gradient(135deg, #032d60 0%, #0176d3 100%);
  --accent-grad: linear-gradient(135deg, #032d60 0%, #0176d3 55%, #00a1e0 100%);
  --chamfer: 12px;
  --space: clamp(2.75rem, 5vw, 4rem);
  --wedge: 2.25rem;
  --font-head: "Plus Jakarta Sans", "Salesforce Sans", "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Salesforce Sans", "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1180px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 5.5rem); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
*, *::before, *::after { box-sizing: inherit; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1.0625rem/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--link); text-decoration: underline; text-underline-offset: 0.16em; }
a:hover { color: var(--action-hover); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.2; margin: 0 0 0.6em; letter-spacing: -0.015em; color: var(--ink); }
h1 { font-weight: 800; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.15rem; }
p, ul, ol, dl { margin: 0 0 1.1em; }
p, li { max-width: 70ch; }
address { font-style: normal; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--bg); padding: .6rem 1rem; z-index: 100; }
.skip:focus { left: var(--gutter); }
.muted { color: var(--ink-2); }
.small { font-size: .9rem; }
.lede { font-size: 1.15rem; line-height: 1.55; color: var(--ink-2); max-width: 66ch; }
.eyebrow { font: 700 .78rem/1.3 var(--font-head); letter-spacing: .1em; text-transform: uppercase; color: var(--link); margin: 0 0 .8rem; }

/* Buttons */
.btn { display: inline-block; font: 600 .98rem/1.2 var(--font-body); padding: .85rem 1.5rem; background: var(--action); color: #fff; border: 2px solid var(--action); border-radius: 999px; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, transform .15s, box-shadow .15s; }
.btn--brand { background: var(--brand-grad); border-color: transparent; box-shadow: 0 6px 18px rgba(3, 45, 96, .25); }
.btn--brand:hover { background: var(--brand-grad); border-color: transparent; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(3, 45, 96, .3); }
.btn:hover { background: var(--action-hover); border-color: var(--action-hover); color: #fff; }
.btn--lg { padding: 1rem 1.7rem; font-size: 1.04rem; }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--outline:hover { background: var(--tint); color: var(--ink); border-color: var(--ink); }
.btn--light { background: #fff; color: var(--navy); border-color: #fff; }
.btn--light:hover { background: var(--tint); border-color: var(--tint); color: var(--navy); }

/* Utility bar */
.topbar { background: var(--surface); color: var(--ink-2); font-size: .84rem; border-bottom: 1px solid var(--line); }
.topbar__row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 2.25rem; }
.topbar__tag { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__links { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.topbar a { color: var(--ink); text-decoration: none; font-weight: 600; }
.topbar a:hover { text-decoration: underline; }
@media (max-width: 600px) { .topbar__tag { display: none; } .topbar__row { justify-content: center; } }

/* Header and navigation */
.site-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 2px 10px rgba(3, 45, 96, 0.06); }
.site-head__row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.5rem; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }

.brand__img { display: block; height: 40px; width: auto; }
.menu-btn { display: none; font: 600 .95rem var(--font-body); background: none; color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: .5rem .9rem; }
.site-nav__list { display: flex; align-items: stretch; gap: 1.5rem; list-style: none; margin: 0; padding: 0; min-height: 4.5rem; }
.site-nav__list > li { display: flex; align-items: center; }
.site-nav__list > li > a:not(.btn) { display: inline-block; padding: .4rem 0; color: var(--ink); font-weight: 600; font-size: .95rem; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.site-nav__list > li > a:not(.btn):hover, .site-nav__list > li > a[aria-current="page"] { color: var(--action); border-bottom-color: var(--action); }
.has-sub { position: static; }
.has-sub > a::after { content: ""; display: inline-block; width: .45em; height: .45em; margin-left: .45em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.2em) rotate(45deg); }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg); padding: 1.75rem 0 2rem; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s ease, visibility 0s linear .2s; z-index: 40; }
.has-sub:hover .mega, .has-sub:focus-within .mega { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.has-sub { position: static; }
.mega__grid { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr; gap: 2.5rem; }
.mega__h { font: 700 .76rem/1.3 var(--font-head); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .6rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.mega ul { list-style: none; margin: 0; padding: 0; }
.mega li a { display: block; padding: .5rem .6rem; margin: 0 -.6rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink); font-weight: 400; white-space: normal; }
.mega li a:hover, .mega li a:focus { background: var(--tint); }
.mega li a strong { display: block; font-weight: 600; }
.mega li a span { display: block; font-size: .82rem; color: var(--ink-2); }
.mega__promo { background: var(--tint); border-radius: var(--radius); padding: 1.25rem; }
.mega__promo img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); margin-bottom: .9rem; }
.mega__promo p { font-size: .92rem; margin: 0 0 .6rem; color: var(--text); }
.mega__promo a { font-weight: 600; }
@media (max-width: 1023px) {
  .menu-btn { display: inline-block; }
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: block; }
  .site-nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-top: 1px solid var(--line); box-shadow: var(--shadow-lg); padding: .75rem var(--gutter) 1.5rem; max-height: calc(100vh - 6rem); overflow-y: auto; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__list > li > a:not(.btn) { display: block; padding: .8rem 0; border-bottom: 1px solid var(--line); }
  .mega { position: static; opacity: 1; visibility: visible; pointer-events: auto; transform: none; box-shadow: none; border: 0; padding: 0 0 .5rem 1rem; }
  .site-nav__list { min-height: 0; }
  .site-nav__list > li { display: block; }
  .mega__grid { display: block; }
  .mega__promo, .mega__col--need { display: none; }
  .mega__h { margin-top: .5rem; }
  .site-nav__cta { padding-top: 1rem; }
  .site-nav__cta .btn { display: block; text-align: center; }
}

/* Hero */
.hero { background: radial-gradient(55% 70% at 88% 18%, var(--tint) 0%, rgba(255,255,255,0) 65%) var(--bg); padding: clamp(2.5rem, 5vw, 3.5rem) 0; }
.hero__grid { display: grid; gap: 2rem; align-items: center; }
.hero__title { font-size: clamp(2.1rem, 4.4vw, 3.3rem); line-height: 1.12; margin-bottom: 1.1rem; max-width: 16ch; }
.hero__lede { font-size: 1.12rem; color: var(--ink-2); max-width: 58ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.5rem; }
.hero__art svg { display: block; width: 100%; max-width: 560px; margin-inline: auto; }
.trust { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; list-style: none; margin: 1.5rem 0 0; padding: 0; font-size: .9rem; color: var(--ink-2); }
.trust li { position: relative; padding-left: 1.1rem; }
.trust li::before { content: ""; position: absolute; left: 0; top: .55em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--brand-grad); }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.05fr .95fr; gap: 3rem; } }

/* Platform strip */
.strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg); }
.strip__row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; padding: .75rem 0 1rem; }
.strip__label { font: 700 .8rem/1 var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.chips li { font-size: .86rem; font-weight: 600; color: var(--ink); background: var(--tint); border: 1px solid var(--tint-2); border-radius: 999px; padding: .35rem .85rem; }

/* Sections */
.sec { padding: var(--space) 0; }
.sec--surface { background: var(--tint); }
.sec--band { background: var(--band); color: var(--band-ink); }
.sec--band .eyebrow { color: var(--blue-60); }
.sec--band h2, .sec--band h3 { color: var(--band-ink); }
.sec--band a:not(.btn) { color: var(--blue-60); }
.sec--band .muted { color: var(--band-ink-2); }
.sec__head { text-align: center; max-width: 780px; margin: 0 auto 2rem; }
.sec__head .sec__title { margin-inline: auto; }
.sec__head p { margin-inline: auto; }
.sec__title { font-size: clamp(1.6rem, 2.8vw, 2.15rem); font-weight: 800; line-height: 1.18; margin: 0 0 .9rem; max-width: 30ch; }
.sec__intro { color: var(--ink-2); font-size: 1.08rem; max-width: 64ch; }
.sec__body > :last-child { margin-bottom: 0; }
.sec__more { text-align: center; margin: 1.75rem 0 0; }
.sec__body > h3 { margin-top: 2rem; }
/* Prose sections: heading on the left, text on the right, so long copy uses the width */
.prose { display: grid; gap: 1.25rem 3rem; }
.prose__head .sec__title { max-width: none; margin-bottom: .75rem; }
.prose__head .sec__intro { margin: 0; }
.prose__body > :first-child { margin-top: 0; }
.prose__body > :last-child { margin-bottom: 0; }
.prose__body p, .prose__body li { max-width: none; }
.prose__body h3 { margin: 1.5rem 0 .5rem; }
.prose__body h3:first-child { margin-top: 0; }
.prose__body .form { max-width: none; }
.prose__body .demo { margin: 0 0 1.25rem; }
@media (min-width: 900px) { .prose { grid-template-columns: 5fr 7fr; } }

/* Cards */
.cards, .cols { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.cards--2, .cols--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.cards--3, .cols { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cards--4, .cols--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.card, .cols > li { position: relative; overflow: hidden; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow); transition: transform .18s, box-shadow .18s; }
.card::before, .cols > li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--accent-grad); opacity: 0; transition: opacity .18s; }
.card:hover::before, .cols > li:hover::before { opacity: 1; }
.cards--hover .card:hover, .card:hover, .cols > li:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card--flat, .card--flat:hover { box-shadow: none; transform: none; }
.card h3, .cols > li h3, .card h4, .cols > li h4 { font-size: 1.15rem; margin: .25rem 0 .5rem; }
.card p, .cols > li p { color: var(--ink-2); font-size: .98rem; margin-bottom: .7rem; }
.card p:last-child, .cols > li p:last-child { margin-bottom: 0; }
.card h3 a, .cols h3 a, .cols h4 a { color: var(--ink); text-decoration: none; }
.card h3 a:hover, .cols h3 a:hover, .cols h4 a:hover { color: var(--action); }
.card__link { margin-top: auto; padding-top: .5rem; font-weight: 600; text-decoration: none; color: var(--link); }
.card__link:hover { text-decoration: underline; }
.card__meta { font-size: .86rem; color: var(--ink-2); margin-top: auto; }
.icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: var(--brand-grad); margin-bottom: 1rem; box-shadow: 0 6px 16px rgba(3, 45, 96, .22); }
.icon svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card__cover { position: relative; height: 140px; margin: -1.75rem -1.75rem 1.25rem; border-radius: var(--radius) var(--radius) 0 0; display: flex; align-items: center; justify-content: center; }
.card__cover svg { width: 64px; height: 64px; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .95; }
.card__cover, .card__cover--a { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 18px, transparent 18px 36px), linear-gradient(120deg, #032d60, #0176d3); }
.card__cover--b { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 18px, transparent 18px 36px), linear-gradient(120deg, #0176d3, #1b96ff); }
.card__cover--c { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 18px, transparent 18px 36px), linear-gradient(120deg, #1b96ff, #aacbff); }
.tag { display: inline-block; align-self: flex-start; font: 700 .74rem/1.2 var(--font-head); letter-spacing: .04em; text-transform: uppercase; padding: .35rem .6rem; border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-2); margin-bottom: .6rem; }
.tag--own { background: var(--tint); color: var(--link); }

/* Work lists on inner pages render as two-column cards */
.work { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.work > li { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow); }
.work h3, .work h4 { font-size: 1.15rem; margin: 0 0 .5rem; }
.work h3 a, .work h4 a { color: var(--ink); text-decoration: none; }
.work h3 a:hover, .work h4 a:hover { color: var(--action); }
.work p { color: var(--ink-2); font-size: .98rem; margin: 0 0 .7rem; }
.work__meta { margin-top: auto; font-size: .86rem; color: var(--ink-2); display: flex; flex-direction: column; gap: .25rem; }
.work__meta br { display: none; }

/* Stats band */
.stats { background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(2.5rem, 5vw, 3.5rem) 0; }
.stats__grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 0; text-align: center; }
.stats__grid dd { margin: 0; font: 800 clamp(2.2rem, 4vw, 3rem)/1.1 var(--font-head); background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats__grid dt { color: var(--ink-2); font-size: .95rem; margin-top: .3rem; }
.stats__grid a { color: var(--ink-2); }
.stats__grid a:hover { color: var(--action); }

/* Split section (text + steps card) */
.split { display: grid; gap: 2rem; align-items: center; }
.split__copy p { color: var(--ink-2); }
.split__copy p:last-child { margin-bottom: 0; }
.split__art img, .split__art svg { display: block; width: 100%; max-width: 560px; height: auto; margin-inline: auto; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 3rem; } .split--art-left .split__art { order: -1; } }

/* Steps: numbered because they are a sequence */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.steps > li { counter-increment: step; position: relative; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.5rem 1.5rem 4.4rem; box-shadow: var(--shadow); }
.steps > li::before { content: counter(step); position: absolute; left: 1.25rem; top: 1.4rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--action); color: #fff; font: 700 1rem/2.2rem var(--font-head); text-align: center; }
.steps h3, .steps h4 { font-size: 1.1rem; margin: .15rem 0 .4rem; }
.steps p { color: var(--ink-2); font-size: .96rem; margin: 0; }
.card--steps { padding: 1rem 1.75rem; }
.card--steps .steps { margin: 0; grid-template-columns: 1fr; gap: 0; }
.card--steps .steps > li { border: 0; box-shadow: none; border-radius: 0; padding: 1.25rem 0 1.25rem 3.6rem; border-bottom: 1px solid var(--line); }
.card--steps .steps > li:last-child { border-bottom: 0; }
.card--steps .steps > li::before { left: 0; top: 1.15rem; }
.card--steps:hover { transform: none; box-shadow: var(--shadow); }

/* Who we work with: tiles that reveal their link on hover, like the partner-site convention */
.roles { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.role { position: relative; display: block; background: var(--tint); border-radius: var(--radius); padding: 1.6rem; color: var(--ink); text-decoration: none; overflow: hidden; transition: transform .18s, box-shadow .18s; }
.role::before { content: ""; position: absolute; inset: 0; background: var(--brand-grad); opacity: 0; transition: opacity .2s; }
.role > * { position: relative; }
.role h3 { font-size: 1.1rem; margin: 0 0 .4rem; transition: color .2s; }
.role p { font-size: .95rem; color: var(--ink-2); margin: 0; transition: color .2s; }
.role__more { display: block; margin-top: .75rem; font-weight: 600; color: var(--link); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .25s, opacity .2s; }
.role:hover, .role:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.role:hover::before, .role:focus-visible::before { opacity: 1; }
.role:hover h3, .role:hover p, .role:hover .role__more, .role:focus-visible h3, .role:focus-visible p, .role:focus-visible .role__more { color: #fff; }
.role:hover .role__more, .role:focus-visible .role__more { max-height: 3rem; opacity: 1; }
@media (hover: none) { .role__more { max-height: 3rem; opacity: 1; } }

/* Testimonial slider: scroll-snap, no script */
.slider { display: grid; grid-auto-flow: column; grid-auto-columns: min(100%, 420px); gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .25rem .25rem 1rem; margin: 0; list-style: none; }
.slider > li { scroll-snap-align: start; }

/* Plain lists */
.list { padding-left: 1.2rem; }
.list li { padding: .25rem 0; }
.list--check { list-style: none; padding-left: 0; }
.list--check li { padding-left: 1.8rem; position: relative; }
.list--check li::before { content: "✓"; position: absolute; left: 0; top: .2rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--tint); color: var(--action); font-weight: 700; font-size: .8rem; line-height: 1.25rem; text-align: center; }

/* Facts row on inner pages */
.facts { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: 1.5rem 0 0; }
.facts > div { display: flex; flex-direction: column; background: var(--tint); border-radius: var(--radius); padding: 1.4rem 1.25rem; text-align: center; }
.facts dt { order: 2; color: var(--ink-2); font-size: .9rem; line-height: 1.35; margin-top: .3rem; }
.facts dd { margin: 0; font: 700 2.1rem/1.1 var(--font-head); color: var(--action); }
.facts a { color: inherit; }

/* Page head for inner pages */
.page-head { background: radial-gradient(55% 70% at 88% 0%, var(--tint) 0%, rgba(255,255,255,0) 65%) var(--bg); padding: clamp(2.5rem, 5vw, 3.5rem) 0; text-align: center; }
.page-head__inner { max-width: 820px; margin-inline: auto; }
.page-head__title { font-size: clamp(1.9rem, 3.8vw, 2.8rem); line-height: 1.15; margin-bottom: .9rem; }
.page-head .lede { margin: 0 auto; }
.page-head__kicker { margin-bottom: .75rem; }
.page-head .eyebrow { margin-bottom: .6rem; }
.page-head--illus { text-align: left; }
.page-head--illus .page-head__inner { max-width: none; display: grid; gap: 1.75rem; align-items: center; }
.page-head--illus .lede { margin: 0; }
.page-head__art img { display: block; width: 100%; height: auto; max-width: 560px; margin-inline: auto; }
@media (min-width: 900px) { .page-head--illus .page-head__inner { grid-template-columns: 1.1fr .9fr; gap: 3rem; } }

/* Case study layout */
.cs { display: grid; gap: 2rem; padding: var(--space) 0; }
.cs__facts-h { font-size: 1.05rem; margin-bottom: .75rem; }
.cs__body h2 { font-size: 1.5rem; margin-top: 2.25rem; }
.cs__body h2:first-child { margin-top: 0; }
.cs__back { margin-top: 2.5rem; }
.factlist { margin: 0; }
.factlist > div { padding: .7rem 0; border-top: 1px solid var(--line); }
.factlist dt { font-size: .8rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.factlist dd { margin: .15rem 0 0; font-weight: 600; font-size: .95rem; }
@media (min-width: 900px) { .cs { grid-template-columns: 320px minmax(0, 1fr); gap: 3rem; } .cs__facts { position: sticky; top: 6rem; align-self: start; } }

/* Forms */
.form { display: grid; gap: 1rem; max-width: 600px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow); }
.form label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .35rem; }
.form input, .form select, .form textarea { width: 100%; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: .75rem .85rem; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--action); outline: none; box-shadow: 0 0 0 3px var(--tint-2); }
.form textarea { min-height: 8rem; resize: vertical; }
.form__row { display: grid; gap: 1rem; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__note { font-size: .86rem; color: var(--ink-2); margin: 0; }
.form__error { color: #ba0517; }
.form .cf-turnstile:empty { display: none; }
.form .btn { justify-self: start; }
@media (min-width: 600px) { .form__row { grid-template-columns: 1fr 1fr; } }
.contact { display: grid; gap: 2.5rem; padding: var(--space) 0; }
.contact__aside h2 { font-size: 1.05rem; margin: 1.5rem 0 .4rem; }
.contact__aside h2:first-child { margin-top: 0; }
@media (min-width: 900px) { .contact { grid-template-columns: 3fr 2fr; gap: 4rem; } }

/* Team */
.team { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.team > li { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow); }
.team__photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; }
.team h3 { margin: 0; font-size: 1.15rem; }
.team__role { color: var(--link); font-weight: 600; font-size: .9rem; margin: 0 0 .6rem; }

/* Team photo */
.photo { margin: 0 0 2rem; }
.photo img { display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
.photo figcaption { font-size: .88rem; color: var(--ink-2); margin-top: .6rem; }

/* Quotes */
.quotes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.quote__title { font-size: 1.05rem; margin: 0 0 .5rem; }
.quote__text { font-size: 1.05rem; color: var(--text); }
.quote__who { color: var(--ink-2); font-size: .9rem; margin: 0; }

/* Demo slot */
.demo { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.demo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__frame { max-width: 920px; margin-inline: auto; }

/* Closing call to action */
.cta { position: relative; background: var(--tint); color: var(--text); padding: var(--space) 0; text-align: center; }
.cta::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--brand-grad); }
.cta__inner { max-width: 760px; }
.cta__title { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin: 0 auto .75rem; color: var(--ink); }
.cta__text { color: var(--ink-2); font-size: 1.06rem; margin: 0 auto 1.25rem; }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 1.5rem; margin: 0; }
.cta__alt { color: var(--ink-2); font-size: .95rem; }

/* Footer */
.site-foot { background: var(--surface); color: var(--ink-2); border-top: 5px solid; border-image: var(--brand-grad) 1; padding: 3rem 0 1.5rem; font-size: .95rem; }
.site-foot__grid { display: grid; gap: 2.5rem; }
.site-foot__about p { max-width: 36ch; margin-top: 1rem; }
.site-foot .brand__img { height: 40px; }
.partner-lockup { display: inline-flex; align-items: center; gap: .9rem; margin-top: 1.25rem; color: var(--ink); text-decoration: none; }
.partner-lockup img { width: 64px; height: 64px; flex: none; }
.partner-lockup span { font-size: .9rem; line-height: 1.4; color: var(--ink-2); }
.partner-lockup strong { display: block; color: var(--ink); }
.partner-lockup:hover strong { color: var(--action); text-decoration: underline; }
.site-foot__h { font: 700 .82rem/1.3 var(--font-head); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin: 0 0 .9rem; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { padding: .2rem 0; }
.site-foot a { color: var(--text); text-decoration: none; }
.site-foot a:hover { color: var(--action); text-decoration: underline; }
.site-foot__addr { margin-top: 1rem; font-size: .9rem; }
.badge { display: inline-block; background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: .55rem .85rem; font-size: .86rem; font-weight: 600; color: var(--ink); }
.site-foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line-2); margin-top: 2rem; padding-top: 1rem; font-size: .84rem; }
.site-foot__legal p { margin: 0; max-width: none; }
.site-foot__legal ul { display: flex; gap: 1.25rem; }
@media (min-width: 900px) { .site-foot__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }


/* ---------- Angular system: no curves, chamfered corners, hexagon badges, diagonal section edges ----------
   A cut corner is drawn as two layers: the element itself is the border colour, clipped to the shape, and an
   inner layer one pixel smaller in the same shape carries the fill. That keeps the border running along the cut. */
.btn, .tag, .chips li, .card, .cols > li, .work > li, .steps > li, .role, .form, .form input, .form select, .form textarea,
.team > li, .demo, .facts > div, .mega, .mega li a, .mega__promo, .mega__promo img, .badge, .photo img, .icon, .sub a { border-radius: 0; }

/* Cut-corner boxes */
.card, .cols > li, .work > li, .form, .team > li, .steps > li { position: relative; border: 0; box-shadow: none; background: var(--line); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.card::after, .cols > li::after, .work > li::after, .form::after, .team > li::after, .steps > li::after { content: ""; position: absolute; inset: 1px; background: var(--bg); clip-path: polygon(0 0, calc(100% - 21px) 0, 100% 21px, 100% 100%, 0 100%); z-index: 0; display: block; border: 0; }
.card > *, .cols > li > *, .work > li > *, .form > *, .team > li > *, .steps > li > * { position: relative; z-index: 1; }
.card::before, .cols > li::before { height: 5px; z-index: 2; }
.card:hover, .cols > li:hover, .work > li:hover { transform: translateY(-4px); box-shadow: none; background: var(--action); }
.card--flat:hover { transform: none; background: var(--line); }
.card--steps, .card--steps::after { clip-path: none; }
.card--steps .steps > li, .card--steps .steps > li::after { clip-path: none; }
.card--steps .steps > li { background: transparent; padding-left: 3.6rem; }
.card--steps .steps > li::after { display: none; }
.steps > li { clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }
.steps > li::after { clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 17px, 100% 100%, 0 100%); }
.steps > li::before { z-index: 2; border-radius: 0; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); width: 2.4rem; height: 2.4rem; line-height: 2.4rem; }
.card__cover { clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%); }
.card__cover svg { transform: translateY(-8px); }
.form input, .form select, .form textarea { border: 1px solid var(--line-2); }

/* Buttons: chamfered on two corners; the outline variant keeps its border along the chamfers */
.btn { padding: .9rem 1.6rem; clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer)); box-shadow: none; border: 0; }
.btn--lg { padding: 1.05rem 1.9rem; }
.btn--brand, .btn--brand:hover { box-shadow: none; transform: none; }
.btn--brand:hover { filter: brightness(1.08); }
.btn--outline { position: relative; z-index: 0; background: var(--ink); color: var(--ink); padding: calc(.9rem + 2px) calc(1.6rem + 2px); }
.btn--outline.btn--lg { padding: calc(1.05rem + 2px) calc(1.9rem + 2px); }
.btn--outline::after { content: ""; position: absolute; inset: 2px; background: var(--bg); clip-path: polygon(calc(var(--chamfer) - 1px) 0, 100% 0, 100% calc(100% - var(--chamfer) + 1px), calc(100% - var(--chamfer) + 1px) 100%, 0 100%, 0 calc(var(--chamfer) - 1px)); z-index: -1; }
.btn--outline:hover { background: var(--action); color: var(--action); }
.btn--outline:hover::after { background: var(--tint); }

/* Small angular pieces */
.icon { width: 60px; height: 60px; border-radius: 0; box-shadow: none; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }
.list--check li::before { border-radius: 0; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }
.trust { gap: .4rem 0; }
.trust li { padding: 0 1rem; border-left: 1px solid var(--line-2); }
.trust li:first-child { padding-left: 0; border-left: 0; }
.trust li::before { display: none; }
.tag { clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.chips li { clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); border: 0; background: var(--tint); }
.team__photo { border-radius: 0; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }
.role { clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); box-shadow: none; }
.role:hover, .role:focus-visible { box-shadow: none; }
.role::after { display: none; }
.split__art img { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%); }
.demo, .photo img { box-shadow: none; }
.mega { border-top: 3px solid var(--action); }
.mega__promo { position: relative; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }

/* Diagonal edges. The hero and page heads cut their own bottom edge; tinted bands get wedge dividers that sit in
   a gap between sections, so nothing overlaps and no border is hidden. */
.hero { background: var(--tint); padding-bottom: calc(clamp(2.5rem, 5vw, 3.5rem) + var(--wedge)); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--wedge)), 0 100%); }
.strip { border: 0; padding-top: .5rem; }
.page-head { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--wedge)), 0 100%); padding-bottom: calc(clamp(2.5rem, 5vw, 3.5rem) + var(--wedge)); border-bottom: 0; background: var(--tint); }
.page-head + .sec, .page-head + .cs, .page-head + .contact { padding-top: calc(var(--space) - .75rem); }
.sec--surface { position: relative; margin: var(--wedge) 0; padding: calc(var(--space) - var(--wedge) / 2) 0; }
.sec--surface::before, .sec--surface::after { content: ""; position: absolute; left: 0; right: 0; height: var(--wedge); background: var(--tint); pointer-events: none; }
.sec--surface::before { top: calc(1px - var(--wedge)); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.sec--surface::after { bottom: calc(1px - var(--wedge)); clip-path: polygon(0 0, 100% 0, 0 100%); }
.stats { border: 0; padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.cta { clip-path: polygon(0 var(--wedge), 100% 0, 100% 100%, 0 100%); padding-top: calc(var(--space) + var(--wedge) - .5rem); }
.cta::before { display: none; }
.site-foot { border-image: none; border-top: 0; position: relative; }
.site-foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--accent-grad); clip-path: polygon(0 0, 100% 0, 100% 100%, 40px 100%, 0 0); }
.eyebrow::before { display: none; }

/* Credentials band under the hero: the partner badge large and readable, the three facts beside it */
.highlights { background: var(--bg); padding: 1.25rem 0 .25rem; }
.highlights__inner { display: grid; gap: 1.25rem; align-items: center; background: var(--tint); padding: 1.25rem 1.5rem; clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); }
.highlights__badge { display: flex; justify-content: center; }
.highlights__badge img { width: 112px; height: 112px; }
.highlights__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.highlights__list li { padding: .25rem 0 .25rem 1.1rem; border-left: 3px solid var(--action); }
.highlights__list strong { display: block; font-family: var(--font-head); font-size: 1.12rem; color: var(--ink); line-height: 1.25; }
.highlights__list span { display: block; font-size: .9rem; color: var(--ink-2); }
@media (min-width: 800px) { .highlights__inner { grid-template-columns: 140px minmax(0, 1fr); gap: 2rem; padding: 1.25rem 2rem; } }
.facts__badge dd { line-height: 0; }
.facts__badge img { width: 72px; height: 72px; margin: 0 auto .4rem; }

/* Highlighted work cards: tinted fill, blue border, gradient rule always on */
.work--highlight > li { background: var(--action); }
.work--highlight > li::after { background: var(--tint); }
.work--highlight > li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--accent-grad); z-index: 2; }
.work--highlight h3 { font-size: 1.22rem; }
.work--highlight p { color: var(--text); }

/* Rhythm: adjacent white sections share one gap; the "included" block sits on white before the closing band */
.sec + .sec:not(.sec--surface):not(.sec--band) { padding-top: calc(var(--space) - 1rem); }
.included .cols { gap: 1.1rem; }
.included .cols > li h3 { font-size: 1.08rem; }

/* Utilities (inline style attributes are not allowed by the content security policy) */
.mt-1 { margin-top: 1.5rem; }
.mt-2 { margin-top: 2.5rem; }
.pb-4 { padding-bottom: 4rem; }

/* Breadcrumbs (page heads) */
.crumbs { font: 500 .8rem/1.4 var(--font-head); color: var(--ink-3); margin: 0 0 .9rem; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .15rem .25rem; }
.page-head--illus .crumbs ol { justify-content: flex-start; }
.crumbs li + li::before { content: "/"; margin: 0 .4rem 0 .15rem; color: var(--line-2); }
.crumbs a { color: var(--link); text-decoration: none; }
.crumbs a:hover, .crumbs a:focus-visible { text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink-2); }

/* FAQ (collapsible, native <details>) */
.faq__list { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 0; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q h3 { margin: 0; font-size: 1.05rem; line-height: 1.35; }
.faq__q::after { content: ""; flex: none; width: .55rem; height: .55rem; margin: .4rem .3rem 0 0; border-right: 2px solid var(--link); border-bottom: 2px solid var(--link); transform: rotate(45deg); transform-origin: 60% 60%; transition: transform .18s ease; }
.faq__item[open] > .faq__q::after { transform: rotate(-135deg); }
.faq__q:hover h3, .faq__q:focus-visible h3 { color: var(--link); }
.faq__q:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 2px; }
.faq__a { padding: 0 2rem 1.1rem 0; }
.faq__a p { margin: 0; }
@media (prefers-reduced-motion: reduce) { .faq__q::after { transition: none; } }

/* Six-pillar grid (AWS page): 3 x 2 on desktop, 2 x 3 on tablet, single column on phones */
.cols--pillars { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
@media (min-width: 900px) { .cols--pillars { grid-template-columns: repeat(3, 1fr); } }