/*
  randcore.co.za on EleganceUI. One stylesheet for every page built from the
  kit's renders (randcore-design skill, Randcore *.dc.html, 16 Sep 2026).

  Three layers, top to bottom:
  1. The kit's own tokens.css and components.css, verbatim, then the page
     variables every render carries in its helmet (--rc-bg0, --rc-t0, --rc-acc
     and so on), light and dark. Fonts are self-hosted, so the kit's Google
     Fonts import is not repeated here.
  2. The shell: the 64px header, the full-screen phone menu, the footer with
     the slogan band. Values from the renders.
  3. The page patterns the renders repeat (grid, sections, hero, proof squares,
     rows, facts, steps, tiles, media, figures, bands). Each rule is a render
     value; the breakpoints are the four from Randcore Mobile Web (600, 900,
     1440) and nothing is named after a device.

  Author: Ethan Lowery | Randcore Development Pty Ltd
*/

/* ---- 1. kit tokens.css (verbatim, minus the font import) ------------------ */
/* Randcore design tokens — generated from tokens.json. Light theme on :root, dark via [data-theme="dark"]. */
:root{
  --rc-gray-0:#ffffff;--rc-gray-10:#f4f4f4;--rc-gray-20:#e0e0e0;--rc-gray-30:#c6c6c6;--rc-gray-40:#a8a8a8;--rc-gray-50:#8d8d8d;--rc-gray-60:#6f6f6f;--rc-gray-70:#525252;--rc-gray-80:#393939;--rc-gray-90:#262626;--rc-gray-100:#161616;
  --rc-blue-40:#78a9ff;--rc-blue-50:#4589ff;--rc-blue-60:#0f62fe;--rc-blue-70:#0043ce;--rc-blue-80:#002d9c;
  --rc-gold-30:#f2d58a;--rc-gold-40:#e3b953;--rc-gold-50:#c99a2e;
  --rc-success:#24a148;--rc-warning:#f1c21b;--rc-error:#da1e28;--rc-info:#0f62fe;

  --rc-bg:var(--rc-gray-0);--rc-bg-alt:var(--rc-gray-10);--rc-surface:var(--rc-gray-0);--rc-border:var(--rc-gray-20);--rc-border-strong:var(--rc-gray-50);
  --rc-text:var(--rc-gray-100);--rc-text-2:var(--rc-gray-70);--rc-text-3:var(--rc-gray-50);--rc-text-inverse:var(--rc-gray-0);
  --rc-interactive:var(--rc-blue-60);--rc-interactive-hover:var(--rc-blue-70);--rc-interactive-active:var(--rc-blue-80);--rc-focus:var(--rc-blue-60);--rc-accent:var(--rc-gold-50);

  --rc-font-sans:'IBM Plex Sans',-apple-system,'Helvetica Neue',sans-serif;
  --rc-font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --rc-text-label:12px/16px var(--rc-font-sans);--rc-text-body-sm:14px/20px var(--rc-font-sans);--rc-text-body:16px/24px var(--rc-font-sans);--rc-text-body-lg:20px/28px var(--rc-font-sans);
  --rc-text-h4:500 24px/32px var(--rc-font-sans);--rc-text-h3:400 32px/40px var(--rc-font-sans);--rc-text-h2:400 44px/52px var(--rc-font-sans);--rc-text-h1:300 60px/66px var(--rc-font-sans);--rc-text-display:300 84px/88px var(--rc-font-sans);
  --rc-tracking-label:0.32px;--rc-tracking-h2:-0.02em;--rc-tracking-h1:-0.025em;--rc-tracking-display:-0.03em;

  --rc-space-1:4px;--rc-space-2:8px;--rc-space-3:12px;--rc-space-4:16px;--rc-space-5:24px;--rc-space-6:32px;--rc-space-7:40px;--rc-space-8:48px;--rc-space-9:64px;--rc-space-10:80px;--rc-space-11:96px;--rc-space-12:128px;--rc-space-13:160px;
  --rc-radius-control:0;--rc-radius-chip:999px;--rc-radius-card:12px;--rc-radius-media:16px;--rc-radius-device:24px;
  --rc-shadow-media:0 24px 64px -24px rgba(22,22,22,.35),0 0 0 1px rgba(22,22,22,.06);
  --rc-shadow-raised:0 1px 2px rgba(22,22,22,.06),0 8px 24px -12px rgba(22,22,22,.18);
  --rc-dur-fast:110ms;--rc-dur-moderate:240ms;--rc-dur-slow:400ms;
  --rc-ease-productive:cubic-bezier(.2,0,.38,.9);--rc-ease-expressive:cubic-bezier(.4,.14,.3,1);--rc-ease-exit:cubic-bezier(.2,0,1,.9);
  --rc-max-width:1312px;--rc-gutter:32px;
  --rc-ratio-hero:16/10;--rc-ratio-screenshot:16/9;--rc-ratio-card:3/2;--rc-ratio-portrait:4/5;--rc-ratio-square:1/1;
}
[data-theme="dark"]{
  --rc-bg:var(--rc-gray-100);--rc-bg-alt:var(--rc-gray-90);--rc-surface:var(--rc-gray-90);--rc-border:var(--rc-gray-80);--rc-border-strong:var(--rc-gray-60);
  --rc-text:var(--rc-gray-10);--rc-text-2:var(--rc-gray-30);--rc-text-3:var(--rc-gray-50);--rc-text-inverse:var(--rc-gray-100);
  --rc-interactive:var(--rc-blue-50);--rc-interactive-hover:var(--rc-blue-40);--rc-focus:#fff;--rc-accent:var(--rc-gold-40);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --rc-bg:var(--rc-gray-100);--rc-bg-alt:var(--rc-gray-90);--rc-surface:var(--rc-gray-90);--rc-border:var(--rc-gray-80);--rc-border-strong:var(--rc-gray-60);
  --rc-text:var(--rc-gray-10);--rc-text-2:var(--rc-gray-30);--rc-text-3:var(--rc-gray-50);--rc-text-inverse:var(--rc-gray-100);
  --rc-interactive:var(--rc-blue-50);--rc-interactive-hover:var(--rc-blue-40);--rc-focus:#fff;--rc-accent:var(--rc-gold-40);
}}

/* ---- kit components.css (verbatim) ---- */
/* components.css — Randcore structural component rules. Requires tokens.css. */
.rc-container{max-width:var(--rc-max-width);margin:0 auto;padding-left:var(--rc-gutter);padding-right:var(--rc-gutter)}
.rc-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--rc-gutter)}
.rc-section{padding-block:var(--rc-space-12)}
@media (max-width:672px){.rc-section{padding-block:var(--rc-space-9)}.rc-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--rc-space-4)}}

.rc-nav{height:64px;background:var(--rc-gray-100);color:var(--rc-gray-10);display:flex;align-items:center;position:sticky;top:0;z-index:10}
.rc-nav a{color:var(--rc-gray-30);font-size:14px}.rc-nav a:hover,.rc-nav a[aria-current]{color:#fff}
.rc-nav a[aria-current]{border-bottom:2px solid var(--rc-interactive);padding-bottom:2px}

.rc-btn{height:48px;padding:0 var(--rc-space-5);border:0;border-radius:var(--rc-radius-control);font:500 16px/1 var(--rc-font-sans);display:inline-flex;align-items:center;gap:var(--rc-space-4);cursor:pointer;transition:background var(--rc-dur-fast) var(--rc-ease-productive),color var(--rc-dur-fast) var(--rc-ease-productive)}
.rc-btn:focus-visible{outline:2px solid var(--rc-focus);outline-offset:2px}
.rc-btn--primary{background:var(--rc-interactive);color:#fff}.rc-btn--primary:hover{background:var(--rc-interactive-hover)}.rc-btn--primary:active{background:var(--rc-interactive-active)}
.rc-btn--secondary{background:var(--rc-gray-80);color:#fff}.rc-btn--secondary:hover{background:#4c4c4c}
.rc-btn--tertiary{background:transparent;color:var(--rc-text);box-shadow:inset 0 0 0 1px currentColor}.rc-btn--tertiary:hover{background:var(--rc-text);color:var(--rc-bg)}
.rc-btn--ghost{background:transparent;color:var(--rc-interactive)}.rc-btn--ghost:hover{background:#e5e5e5}
.rc-btn:disabled{background:var(--rc-gray-30);color:var(--rc-gray-50);cursor:not-allowed}
.rc-btn--sm{height:40px;padding:0 20px;font-size:14px;gap:12px}

.rc-chip{height:32px;padding:0 14px;border-radius:var(--rc-radius-chip);background:var(--rc-bg-alt);color:var(--rc-text);font-size:14px;display:inline-flex;align-items:center}
.rc-chip--selected{background:var(--rc-gray-100);color:#fff}
.rc-label{font:12px/16px var(--rc-font-mono);letter-spacing:.32px;text-transform:uppercase;color:var(--rc-text-2)}
.rc-label--core{color:var(--rc-accent)}

.rc-card{background:var(--rc-surface);border:1px solid var(--rc-border);border-radius:var(--rc-radius-card);padding:var(--rc-space-6);transition:border-color var(--rc-dur-fast)}
.rc-card:hover{border-color:var(--rc-border-strong)}
.rc-tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1px;background:var(--rc-border);border:1px solid var(--rc-border)}
.rc-tile{background:var(--rc-bg);padding:var(--rc-space-6);min-height:220px;display:flex;flex-direction:column;justify-content:space-between;gap:var(--rc-space-5);color:inherit}
.rc-tile:hover{background:var(--rc-bg-alt)}

.rc-input{height:48px;padding:0 var(--rc-space-4);background:var(--rc-bg-alt);border:0;border-bottom:1px solid var(--rc-border-strong);font:16px var(--rc-font-sans);color:var(--rc-text);border-radius:0}
.rc-input:focus{outline:2px solid var(--rc-focus);outline-offset:-2px}

/* Media slot: fixed-ratio frame for product screenshots. Set data-ratio + --ratio; drop <img> inside. */
.rc-media{aspect-ratio:var(--ratio,16/10);border-radius:var(--rc-radius-media);border:1px solid var(--rc-border);background:repeating-linear-gradient(135deg,var(--rc-gray-10) 0 12px,#ececec 12px 24px);box-shadow:var(--rc-shadow-media);overflow:hidden;display:flex;align-items:center;justify-content:center}
.rc-media>img,.rc-media>video{width:100%;height:100%;object-fit:cover;display:block}
.rc-media__hint{font:12px/16px var(--rc-font-mono);color:var(--rc-gray-60);letter-spacing:.32px;text-align:center;padding:16px}
.rc-media--dark{border-color:var(--rc-gray-80);background:repeating-linear-gradient(135deg,var(--rc-gray-90) 0 12px,#2e2e2e 12px 24px);box-shadow:0 32px 80px -24px rgba(0,0,0,.7)}
.rc-media--device{border-radius:var(--rc-radius-device)}

.rc-icon{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.rc-icon--lg{width:32px;height:32px}

/* ---- the render page variables, light and dark ------------------------------ */
:root{--rc-bg0:#ffffff;--rc-bg5:#fafafa;--rc-bg10:#f4f4f4;--rc-bg15:#e8e8e8;--rc-bg20:#e0e0e0;--rc-acs:#edf5ff;--rc-ers:#fff1f1;--rc-t0:#161616;--rc-t2:#525252;--rc-t3:#6f6f6f;--rc-acc:#0f62fe;--rc-acch:#0043ce;--rc-ok:#198038;--rc-err:#da1e28;--rc-warn:#8a6d00;--rc-b20:#e0e0e0;--rc-b30:#c6c6c6;--rc-b100:#161616;--rc-bacc:#0f62fe;--rc-bacs:#a6c8ff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--rc-bg0:#262626;--rc-bg5:#2e2e2e;--rc-bg10:#393939;--rc-bg15:#393939;--rc-bg20:#525252;--rc-acs:rgba(69,137,255,.18);--rc-ers:rgba(250,77,86,.18);--rc-t0:#f4f4f4;--rc-t2:#c6c6c6;--rc-t3:#a8a8a8;--rc-acc:#78a9ff;--rc-acch:#a6c8ff;--rc-ok:#42be65;--rc-err:#fa4d56;--rc-warn:#f1c21b;--rc-b20:#525252;--rc-b30:#6f6f6f;--rc-b100:#f4f4f4;--rc-bacc:#78a9ff;--rc-bacs:#4589ff}body:not([data-theme="light"]){background:#262626;color:#f4f4f4}}
:root[data-theme="dark"] body{background:#262626;color:#f4f4f4}
:root[data-theme="light"] body{background:#ffffff;color:#161616}
:root[data-theme="dark"]{--rc-bg0:#262626;--rc-bg5:#2e2e2e;--rc-bg10:#393939;--rc-bg15:#393939;--rc-bg20:#525252;--rc-acs:rgba(69,137,255,.18);--rc-ers:rgba(250,77,86,.18);--rc-t0:#f4f4f4;--rc-t2:#c6c6c6;--rc-t3:#a8a8a8;--rc-acc:#78a9ff;--rc-acch:#a6c8ff;--rc-ok:#42be65;--rc-err:#fa4d56;--rc-warn:#f1c21b;--rc-b20:#525252;--rc-b30:#6f6f6f;--rc-b100:#f4f4f4;--rc-bacc:#78a9ff;--rc-bacs:#4589ff}

/* ---- base (the render helmet) ------------------------------------------------ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--rc-bg0);color:var(--rc-t0);font-family:'IBM Plex Sans',-apple-system,'Helvetica Neue',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--rc-acc);text-decoration:none}a:hover{color:var(--rc-acch)}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg{max-width:100%}img{height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;border-radius:0;padding:0}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--rc-focus);outline-offset:2px}
.skip{position:absolute;left:8px;top:-60px;z-index:200;padding:12px 18px;background:#0f62fe;color:#fff;font-size:14px;font-weight:500;transition:top 110ms}
.skip:focus{top:8px}
#main:focus{outline:none}
@keyframes rc-spin{to{transform:rotate(360deg)}}
@keyframes rc-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes rc-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes rc-fade{from{opacity:1}to{opacity:.15}}
.rise{animation:rc-rise .8s cubic-bezier(.2,.7,.2,1) both}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---- 2. shell ------------------------------------------------------------------- */
/* header: 64 Gray 100 (60 under 900), logo 32, links 14 Gray 30 -> white, current 2px Blue 60 underline, one 40 primary */
.hdr{background:#161616;color:#f4f4f4;height:64px;display:flex;align-items:center;position:sticky;top:0;z-index:10}
.hdr .wrap{width:100%;display:flex;align-items:center;gap:40px}
.hdr__logo{display:flex;align-items:center;flex:none}
.hdr__logo img{height:32px;width:auto;display:block}
.hdr__nav{display:none;gap:28px;font-size:14px;flex:1;white-space:nowrap}
.hdr__nav a{color:#c6c6c6;padding-bottom:2px;border-bottom:2px solid transparent;transition:color 110ms}
.hdr__nav a:hover{color:#fff}
.hdr__nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--rc-bacc)}
.hdr__cta{display:none;background:#0f62fe;color:#fff;height:40px;padding:0 20px;align-items:center;gap:12px;font-size:14px;font-weight:500;white-space:nowrap;flex:none;margin-left:auto;transition:background 110ms}
.hdr__cta:hover{background:#0043ce;color:#fff}
.hdr__cta .eu-ic{width:16px;height:16px}
.burger{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;margin:0 -10px 0 auto;color:#f4f4f4;flex:none}
.burger i{position:relative;display:block;width:22px;height:12px}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:22px;height:1.5px;background:#f4f4f4;transition:transform 240ms cubic-bezier(.2,0,.38,.9),top 240ms}
.burger i::before{top:0}.burger i::after{top:10px}
body.nav-open .burger i::before{top:5px;transform:rotate(45deg)}
body.nav-open .burger i::after{top:5px;transform:rotate(-45deg)}
@media (max-width:899px){.hdr{height:60px}}
@media (min-width:900px){.hdr__nav{display:flex}.hdr__cta{display:inline-flex}.burger{display:none}}
/* the phone menu: a full-screen dark sheet, 32px Light links, the primary button, the contact line, a petals figure at 28% */
.menu{position:fixed;inset:60px 0 0;z-index:9;background:#161616;color:#f4f4f4;overflow:auto;transform:translateX(100%);visibility:hidden;transition:transform 240ms cubic-bezier(.2,0,.38,.9),visibility 240ms}
body.nav-open .menu{transform:none;visibility:visible}
body.nav-open{overflow:hidden}
.menu__in{position:relative;min-height:100%;padding:32px 20px 48px;display:flex;flex-direction:column;gap:32px;overflow:hidden}
.menu nav{display:flex;flex-direction:column}
.menu nav a{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid #393939;font-weight:300;font-size:32px;letter-spacing:-.02em;color:#c6c6c6}
.menu nav a[aria-current="page"],.menu nav a:hover{color:#fff}
.menu nav a .eu-ic{opacity:.5}
.menu__foot{display:flex;flex-direction:column;gap:16px;position:relative}
.menu__foot p{font-size:13px;line-height:18px;color:#8d8d8d}
.menu .eu-figure{right:-45%;bottom:-25%;width:110%;opacity:.28}
@media (min-width:900px){.menu{display:none}}
/* footer: Gray 100, the slogan band, four columns, the legal line */
.foot{background:#161616;color:#c6c6c6;font-size:14px;line-height:20px;border-top:1px solid #393939}
.foot a{color:#c6c6c6}.foot a:hover{color:#fff}
.foot__slogan{border-bottom:1px solid #393939}
.foot__slogan .wrap{padding-top:48px;padding-bottom:48px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.foot__slogan>.wrap>div{display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.foot__heart{width:56px;height:52px;flex:none;display:block}
.foot__slogan p{font-weight:300;font-size:24px;line-height:1.15;letter-spacing:-.02em;color:#f4f4f4}
.foot__slogan p span{color:#78a9ff}
.foot__slogan .lnk{color:#78a9ff}.foot__slogan .lnk:hover{color:#a6c8ff}
.foot__cols{padding-top:64px;padding-bottom:64px;display:grid;grid-template-columns:1fr;gap:24px}
.foot__col{display:flex;flex-direction:column;gap:8px;border-top:1px solid #393939;padding-top:16px}
.foot__col:first-child{gap:16px;border-top:0;padding-top:0}
.foot__col .eu-eyebrow{color:#8d8d8d}
.foot__col img{height:48px;width:auto;align-self:flex-start;display:block}
.foot__legal{border-top:1px solid #393939}
.foot__legal .wrap{padding-top:24px;padding-bottom:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12px;color:#8d8d8d}
.foot__legal a{color:#8d8d8d}.foot__legal a:hover{color:#fff}
@media (min-width:600px){.foot__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}.foot__col{border-top:0;padding-top:0}}
@media (min-width:900px){.foot__cols{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:599px){.foot__slogan .wrap{padding-top:32px;padding-bottom:32px}.foot__cols{padding-top:32px;padding-bottom:32px}}

/* ---- 3. page patterns ------------------------------------------------------------ */
/* container 1312, gutter 20 / 32 */
.wrap{max-width:1312px;margin:0 auto;padding-left:32px;padding-right:32px}
@media (max-width:599px){.wrap{padding-left:20px;padding-right:20px}}
/* 12 columns from 900, one below */
.g12{display:grid;grid-template-columns:1fr;gap:32px}
.g12>*{min-width:0}
@media (min-width:900px){
  .g12{grid-template-columns:repeat(12,minmax(0,1fr))}
  .s2{grid-column:span 2}.s3{grid-column:span 3}.s4{grid-column:span 4}.s5{grid-column:span 5}.s6{grid-column:span 6}.s7{grid-column:span 7}.s8{grid-column:span 8}.s9{grid-column:span 9}.s10{grid-column:span 10}.s12{grid-column:span 12}
  .s3e{grid-column:span 3 / -1}.s4e{grid-column:span 4 / -1}.s5e{grid-column:span 5 / -1}.s6e{grid-column:span 6 / -1}.s7e{grid-column:span 7 / -1}
  .c4-6{grid-column:4 / span 6}.c2-8{grid-column:2 / span 8}.c11-2{grid-column:11 / span 2}.c10-3{grid-column:10 / span 3}.c9-4{grid-column:9 / span 4}.c6-7{grid-column:6 / span 7}.c7-6{grid-column:7 / span 6}.c5-8{grid-column:5 / span 8}
}
.ai-c{align-items:center}.ai-e{align-items:end}.ai-s{align-items:start}
/* section rhythm from the Frame: 48 / 64 / 96 / 128 for a 128 section; smaller sections scale the same way */
.sec{padding-top:48px;padding-bottom:48px}
.sec-md{padding-top:48px;padding-bottom:48px}
.sec-sm{padding-top:40px;padding-bottom:40px}
.sec-xs{padding-top:32px;padding-bottom:32px}
.sec-2xs{padding-top:24px;padding-bottom:24px}
.sec-hero{padding-top:40px;padding-bottom:48px}
@media (min-width:600px){.sec{padding-top:64px;padding-bottom:64px}.sec-md{padding-top:64px;padding-bottom:64px}.sec-sm{padding-top:48px;padding-bottom:48px}.sec-hero{padding-top:64px;padding-bottom:64px}}
@media (min-width:900px){.sec{padding-top:96px;padding-bottom:96px}.sec-md{padding-top:96px;padding-bottom:96px}.sec-sm{padding-top:64px;padding-bottom:64px}.sec-xs{padding-top:40px;padding-bottom:40px}.sec-hero{padding-top:128px;padding-bottom:96px}}
@media (min-width:1440px){.sec{padding-top:128px;padding-bottom:128px}.sec-hero{padding-top:160px;padding-bottom:128px}}
.pt0{padding-top:0!important}.pb0{padding-bottom:0!important}
.pb-sec{padding-bottom:48px}@media (min-width:600px){.pb-sec{padding-bottom:64px}}@media (min-width:900px){.pb-sec{padding-bottom:96px}}@media (min-width:1440px){.pb-sec{padding-bottom:128px}}
.pt-sec{padding-top:48px}@media (min-width:600px){.pt-sec{padding-top:64px}}@media (min-width:900px){.pt-sec{padding-top:96px}}@media (min-width:1440px){.pt-sec{padding-top:128px}}
/* bands */
.band-dark{background:#161616;color:#f4f4f4}
.band-blue{background:#0f62fe;color:#fff}
.band-alt{background:var(--rc-bg10)}
.rule-t{border-top:1px solid var(--rc-b20)}.rule-b{border-bottom:1px solid var(--rc-b20)}
.band-dark .rule-t,.band-dark.rule-t{border-top-color:#393939}
.rel{position:relative;overflow:hidden}
.col{display:flex;flex-direction:column}
.row{display:flex;justify-content:space-between;align-items:center}
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}.gap-24{gap:24px}.gap-32{gap:32px}.gap-48{gap:48px}.gap-64{gap:64px}
/* type */
.eu-eyebrow{font:12px/16px 'IBM Plex Mono',monospace;letter-spacing:.32px;text-transform:uppercase;color:var(--rc-t2)}
.band-dark .eu-eyebrow{color:#8d8d8d}
.mono12{font:12px/16px 'IBM Plex Mono',monospace}
.mono11{font:11px/16px 'IBM Plex Mono',monospace}
.mono{font-family:'IBM Plex Mono',monospace}
.display{font-weight:300;font-size:clamp(44px,6.5vw,92px);line-height:1;letter-spacing:-.03em;text-wrap:balance}
.h1-lg{font-weight:300;font-size:clamp(44px,6vw,84px);line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.h1-md{font-weight:300;font-size:clamp(40px,5.5vw,76px);line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.h1-sm{font-weight:300;font-size:clamp(40px,5.5vw,72px);line-height:1.05;letter-spacing:-.03em;text-wrap:balance}
.h2-xl{font-weight:300;font-size:clamp(36px,4.5vw,64px);line-height:1.04;letter-spacing:-.03em}
.h2-lg{font-weight:300;font-size:clamp(32px,4vw,60px);line-height:1.1;letter-spacing:-.025em}
.h2-md{font-weight:300;font-size:clamp(32px,3.5vw,52px);line-height:1.08;letter-spacing:-.025em}
.h2-sm{font-weight:300;font-size:clamp(32px,3vw,44px);line-height:1.15;letter-spacing:-.02em}
.h2-cta{font-weight:300;font-size:clamp(36px,5vw,72px);line-height:1.05;letter-spacing:-.03em;max-width:720px}
.h2-36{font-weight:300;font-size:36px;line-height:1.1;letter-spacing:-.025em}
.h2-32{font-weight:300;font-size:32px;line-height:1.1;letter-spacing:-.025em}
.h3{font-weight:400;font-size:32px;line-height:40px;letter-spacing:-.01em}
.h4{font-weight:500;font-size:24px;line-height:32px}
.t22{font-size:22px;line-height:28px;font-weight:500;letter-spacing:-.01em}
.t20{font-size:20px;line-height:28px;font-weight:500}
.t18{font-size:18px;line-height:24px;font-weight:500}
.t17{font-size:17px;line-height:24px;font-weight:500}
.t16{font-size:16px;line-height:24px;font-weight:500}
.lead{font-size:20px;line-height:28px;color:var(--rc-t2);text-wrap:pretty}
.lead-18{font-size:18px;line-height:26px;color:var(--rc-t2);text-wrap:pretty}
.body{font-size:16px;line-height:24px;color:var(--rc-t2)}
.body-15{font-size:15px;line-height:22px;color:var(--rc-t2)}
.small{font-size:14px;line-height:20px;color:var(--rc-t2)}
.small-13{font-size:13px;line-height:18px;color:var(--rc-t2)}
.band-dark .lead,.band-dark .body,.band-dark .small,.band-dark .lead-18,.band-dark .body-15{color:#c6c6c6}
.band-blue .lead,.band-blue .body{color:#fff}
.acc{color:var(--rc-acc)}.t2{color:var(--rc-t2)}.t3{color:var(--rc-t3)}.on-dark-2{color:#c6c6c6}.on-dark-3{color:#8d8d8d}.blue40{color:#78a9ff}.blue20{color:#d0e2ff}.ink{color:var(--rc-t0)}
.band-dark .display span,.band-dark .h1-md span,.band-dark .h2-xl span{color:#78a9ff}
.balance{text-wrap:balance}.pretty{text-wrap:pretty}.nowrap{white-space:nowrap}
.mw-420{max-width:420px}.mw-440{max-width:440px}.mw-460{max-width:460px}.mw-480{max-width:480px}.mw-520{max-width:520px}.mw-560{max-width:560px}.mw-640{max-width:640px}.mw-720{max-width:720px}.mw-760{max-width:760px}.mw-820{max-width:820px}.mw-860{max-width:860px}
/* buttons: 48 high, 24 sides, 16/500, arrow 20 at 16; sm 40/20/14 with 12 */
.btn{background:#0f62fe;color:#fff;height:48px;padding:0 24px;display:inline-flex;align-items:center;gap:16px;font-size:16px;font-weight:500;white-space:nowrap;transition:background 110ms cubic-bezier(.2,0,.38,.9),color 110ms}
.btn:hover{background:#0043ce;color:#fff}
.btn--sec{background:transparent;color:var(--rc-t0);border:1px solid var(--rc-b100)}
.btn--sec:hover{background:#161616;color:#fff}
.band-dark .btn--sec{color:#f4f4f4;border-color:#f4f4f4}
.band-dark .btn--sec:hover{background:var(--rc-bg10);color:var(--rc-t0)}
.btn--light{background:var(--rc-bg0);color:var(--rc-t0)}
.btn--light:hover{background:var(--rc-bg20);color:var(--rc-t0)}
.btn--ink{background:#161616;color:#fff}.btn--ink:hover{background:#393939;color:#fff}
.btn--ghost{background:transparent;color:#f4f4f4;border:1px solid #525252}.btn--ghost:hover{background:transparent;border-color:#fff;color:#fff}
.btn--text{background:transparent;color:var(--rc-acc);padding:0 8px}.btn--text:hover{background:transparent;color:var(--rc-acch)}
.btn--sm{height:40px;padding:0 20px;font-size:14px;gap:12px}
.btn--44{height:44px;padding:0 20px;font-size:14px;gap:12px}
.btn--r{border-radius:8px}
.btn--c{justify-content:center}
.btns{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:599px){.btns--phone .btn{flex:1;justify-content:space-between}.btns--phone .btn--sec{display:none}}
/* links with the arrow */
.lnk{display:inline-flex;align-items:center;gap:12px;font-size:16px;font-weight:500;color:var(--rc-acc);white-space:nowrap}
.lnk:hover{color:var(--rc-acch)}
.lnk .eu-ic{width:20px;height:20px}
.lnk--sm{font-size:14px;gap:8px}.lnk--sm .eu-ic{width:16px;height:16px}
.band-dark .lnk{color:#78a9ff}.band-dark .lnk:hover{color:#a6c8ff}
.band-blue .lnk{color:#fff}
.lnks{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
/* icons inherit the colour around them */
.eu-ic{display:inline-block;flex:none;line-height:0;color:inherit}
.eu-ic svg{display:block;width:100%;height:100%}
/* breadcrumb */
.crumb{display:flex;gap:8px;font-size:14px;color:#8d8d8d;align-items:center;flex-wrap:wrap}
.crumb a{color:var(--rc-t2)}.crumb a:hover{color:var(--rc-t0)}
.band-dark .crumb a{color:#c6c6c6}.band-dark .crumb a:hover{color:#fff}
/* chips, pills, tags */
.chip{height:32px;padding:0 14px;border-radius:999px;background:var(--rc-bg10);color:var(--rc-t0);font-size:14px;display:inline-flex;align-items:center;white-space:nowrap}
.chip:hover{background:var(--rc-bg20);color:var(--rc-t0)}
.chip--36{height:36px;padding:0 16px;gap:8px}
.chip--40{height:40px;padding:0 16px}
.chip--on{background:#161616;color:#fff;border:1px solid #161616}.chip--on:hover{background:#161616;color:#fff}
.chip--out{background:var(--rc-bg0);border:1px solid var(--rc-b20)}.chip--out:hover{background:var(--rc-bg0);border-color:#8d8d8d}
.chip--dark{border:1px solid #393939;color:#c6c6c6;background:transparent}.chip--dark:hover{background:transparent;color:#fff}
.chip--line{background:transparent;border:1px solid var(--rc-b30);color:var(--rc-t2)}.chip--line:hover{background:transparent;color:var(--rc-t2)}
.chip--48{height:48px;padding:0 24px;border:1px solid var(--rc-b20);border-radius:999px;font-size:16px;background:transparent}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.pill{height:24px;padding:0 10px;border-radius:12px;font:12px/16px 'IBM Plex Mono',monospace;display:inline-flex;align-items:center;white-space:nowrap}
.pill--28{height:28px;font:500 12px/16px 'IBM Plex Sans',sans-serif;gap:6px}
.pill--28 i{width:6px;height:6px;border-radius:50%;background:currentColor}
.staff{height:20px;padding:0 8px;border-radius:10px;background:var(--rc-acs);color:var(--rc-acc);font:12px/16px 'IBM Plex Mono',monospace;display:inline-flex;align-items:center}
/* figures: a mandala or bloom, square, positioned by the page */
.eu-figure{position:absolute;aspect-ratio:1;pointer-events:none;z-index:0}
.eu-figure>div,.eu-figure svg{width:100%;height:100%;display:block}
.eu-fade{position:absolute;inset:0;pointer-events:none}
.fig-hero-r{right:-12%;top:50%;transform:translateY(-50%);width:min(70vw,860px);opacity:.85}
.fade-dark-l{background:linear-gradient(90deg,#161616 0%,#161616 40%,rgba(22,22,22,0) 100%)}
.fade-dark-l45{background:linear-gradient(90deg,#161616 0%,#161616 45%,rgba(22,22,22,0) 100%)}
.fade-white-l{background:linear-gradient(90deg,var(--rc-bg0) 0%,var(--rc-bg0) 45%,rgba(255,255,255,0) 100%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fade-white-l{background:linear-gradient(90deg,#262626 0%,#262626 45%,rgba(38,38,38,0) 100%)}}
@media (max-width:899px){
  .fig-hero-r{right:-40%;top:-10%;transform:none;width:110%;opacity:.5}
  .fade-dark-l,.fade-dark-l45{background:linear-gradient(180deg,#161616 30%,rgba(22,22,22,0) 100%)}
  .fade-white-l{background:linear-gradient(180deg,var(--rc-bg0) 30%,rgba(255,255,255,0) 100%)}
}
.fig-box{position:relative;aspect-ratio:1}
.fig-box>.eu-figure{position:absolute;inset:0;width:auto}
/* the dark hero of a service page: 160/32, breadcrumb, display h1 with one blue phrase, lead <= 480, one button */
.hero-dark{background:#161616;color:#f4f4f4;position:relative;overflow:hidden}
.hero-dark .wrap{position:relative;display:flex;flex-direction:column;gap:32px;align-items:flex-start;padding-top:160px;padding-bottom:160px}
.hero-dark .lead{color:#c6c6c6}
.hero-badge{position:absolute;right:clamp(32px,8vw,140px);top:50%;transform:translateY(-50%) rotate(-4deg);width:clamp(180px,22vw,300px);height:auto;filter:drop-shadow(0 32px 48px rgba(0,0,0,.45));pointer-events:none;z-index:1}
@media (max-width:899px){.hero-badge{position:static;transform:rotate(-4deg);width:160px;margin:8px 0 0}}
.hero-dark .display span,.hero-dark .h1-md span{color:#78a9ff}
@media (max-width:1439px){.hero-dark .wrap{padding-top:128px;padding-bottom:128px}}
@media (max-width:899px){.hero-dark .wrap{padding-top:64px;padding-bottom:64px;gap:28px}}
@media (max-width:599px){.hero-dark .wrap{padding-top:40px;padding-bottom:48px;gap:20px}.hero-dark .btn{width:100%;justify-content:space-between}}
/* the light hero with a figure on the right (Graphic design, Contact, Pricing) */
.hero-light{position:relative;overflow:hidden;background:var(--rc-bg0)}
.hero-light .wrap{position:relative;display:flex;flex-direction:column;gap:24px;align-items:flex-start;padding-top:128px;padding-bottom:96px}
@media (min-width:1440px){.hero-light .wrap{padding-top:160px;padding-bottom:160px}}
@media (max-width:899px){.hero-light .wrap{padding-top:64px;padding-bottom:64px}}
@media (max-width:599px){.hero-light .wrap{padding-top:40px;padding-bottom:48px;gap:20px}.hero-light .btn{width:100%;justify-content:space-between}}
/* proof squares: three 1:1 tiles, radius 16, 32 padding; alt / dark / blue; the caption under each */
.tri{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px}
.tri>div{display:flex;flex-direction:column;gap:24px;min-width:0}
.sq{aspect-ratio:1;border-radius:16px;padding:32px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;background:var(--rc-bg10);color:var(--rc-t0)}
.sq--dark{background:#161616;color:#f4f4f4}
.sq--blue{background:#0f62fe;color:#fff}
.sq .eu-eyebrow{color:var(--rc-t2)}.sq--dark .eu-eyebrow{color:#8d8d8d}.sq--blue .eu-eyebrow{color:#d0e2ff}
.sq-num{font-weight:300;font-size:clamp(48px,6vw,84px);line-height:1;letter-spacing:-.04em;white-space:nowrap}
.sq-num--sm{font-size:clamp(40px,5vw,72px)}
.sq-line{font-size:14px;line-height:20px;color:var(--rc-t2)}
.sq--dark .sq-line{color:#c6c6c6}.sq--blue .sq-line{color:#d0e2ff}
.sq-cap{display:flex;flex-direction:column;gap:8px}
.sq-cap b{font-size:24px;line-height:32px;font-weight:500}
.sq-cap span{font-size:16px;line-height:24px;color:var(--rc-t2)}
.bar{height:4px;background:var(--rc-bg20);border-radius:2px;overflow:hidden}
.bar>i{display:block;height:100%;width:100%;background:#0f62fe;transform-origin:left;animation:rc-fill 1.2s cubic-bezier(.2,.7,.2,1) both}
/* rows: label left, mono value right, 12 padding, rules between */
.rows{display:flex;flex-direction:column}
.rows>div,.rows>a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--rc-b20);font-size:16px;color:inherit}
.rows>div>span:last-child,.rows>a>span:last-child{font:12px/16px 'IBM Plex Mono',monospace;color:var(--rc-acc);white-space:nowrap}
.rows--t2>div>span:last-child{color:var(--rc-t2)}
.rows--14>div{padding:14px 0}
.sq--dark .rows>div{border-top-color:#393939}.sq--dark .rows>div>span:last-child{color:#78a9ff}
.sq--blue .rows>div{border-top-color:rgba(255,255,255,.25)}.sq--blue .rows>div>span:last-child{color:#d0e2ff}
.band-dark .rows>div{border-top-color:#393939}.band-dark .rows>div>span:last-child{color:#78a9ff}
/* key / value facts (case study, legal rail): 14px, label t3, value 500 right */
.kv{display:flex;flex-direction:column}
.kv>div{display:flex;justify-content:space-between;gap:12px;font-size:14px;line-height:20px;border-top:1px solid var(--rc-b20);padding-top:10px;margin-top:10px}
.kv>div:first-child{margin-top:0}
.kv>div>span:first-child{color:var(--rc-t2)}
.kv>div>span:last-child{text-align:right;font-weight:500}
.card{border:1px solid var(--rc-b20);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:10px;background:var(--rc-bg0)}
.card--24{padding:24px;gap:12px}
.card--28{padding:28px;gap:16px}
.card--40{padding:40px;gap:24px}
a.card{color:var(--rc-t0)}a.card:hover{border-color:#8d8d8d;color:var(--rc-t0)}
.card--dark{background:#161616;color:#f4f4f4;border-color:#161616}
.card--alt{background:var(--rc-bg10);border-color:var(--rc-bg10)}
.card-r16{border-radius:16px}
/* facts band: 300 44/1 value, 14/20 label */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:32px}
.facts--200{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.facts--220{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.facts--240{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.facts--260{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.facts>div{display:flex;flex-direction:column;gap:8px}
.fact-v{font-weight:300;font-size:44px;line-height:1;letter-spacing:-.02em;white-space:nowrap}
.fact-v--56{font-size:56px;letter-spacing:-.03em}
.fact-v--60{font-size:60px;letter-spacing:-.025em}
.fact-v--40{font-size:40px}
.fact-v--36{font-size:36px;letter-spacing:-.03em}
.fact-l{font-size:14px;line-height:20px;color:var(--rc-t2)}
.fact-l--16{font-size:16px;line-height:24px}
.band-dark .fact-l{color:#c6c6c6}.band-dark .fact-l--3{color:#8d8d8d}
/* steps: rule on top, mono index, 20 or 24 title, 14 or 16 line */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:32px}
.steps--200{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.steps--240{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.steps--220{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.step{border-top:1px solid var(--rc-b100);padding-top:16px;display:flex;flex-direction:column;gap:12px}
.step--16{gap:16px}
.step i{font:12px/16px 'IBM Plex Mono',monospace;color:#6f6f6f;font-style:normal}
.step b{font-size:20px;line-height:28px;font-weight:500}
.step--24 b{font-size:24px;line-height:32px}
.step span{font-size:14px;line-height:20px;color:var(--rc-t2)}
.step--16 span{font-size:16px;line-height:24px}
.band-dark .step{border-top-color:#f4f4f4}.band-dark .step span{color:#c6c6c6}
/* the four-step list rows (UI & UX, Contact after) */
.step-rows{display:flex;flex-direction:column}
.step-rows>div{display:flex;gap:16px;align-items:baseline;border-top:1px solid var(--rc-b20);padding:16px 0}
.step-rows>div>i{font:12px/16px 'IBM Plex Mono',monospace;color:#6f6f6f;width:24px;flex:none;font-style:normal}
.step-rows>div>b{font-size:20px;line-height:28px;font-weight:500;width:120px;flex:none}
.step-rows>div>span{font-size:16px;line-height:24px;color:var(--rc-t2)}
/* tile grid (services on home, modules, features) */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1px;background:var(--rc-bg20);border:1px solid var(--rc-b20)}
.tiles--240{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.tile{background:var(--rc-bg0);padding:32px;min-height:220px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;color:var(--rc-t0);transition:background 110ms cubic-bezier(.2,0,.38,.9)}
a.tile:hover{background:var(--rc-bg10);color:var(--rc-t0)}
.tile__top{display:flex;justify-content:space-between;align-items:flex-start}
.tile__top .eu-ic{width:32px;height:32px}
.tile__n{font:12px/16px 'IBM Plex Mono',monospace;color:#6f6f6f}
.tile__t{font-size:20px;line-height:28px;font-weight:500}
.tile__l{font-size:14px;line-height:20px;color:var(--rc-t2)}
.tile>div:last-child{display:flex;flex-direction:column;gap:8px}
.tile--dark{background:#161616;color:#f4f4f4}
/* media: radius 16, 1px rule, the media shadow; placeholder stripes with a mono hint when empty */
.media{border-radius:16px;border:1px solid var(--rc-b20);overflow:hidden;box-shadow:0 24px 64px -24px rgba(22,22,22,.35);background:var(--rc-bg0)}
.media img{display:block;width:100%;height:auto}
.media--12{border-radius:12px}
.media--dark{border-color:#393939;box-shadow:0 32px 80px -24px rgba(0,0,0,.7)}
.media--flat{box-shadow:none}
.ph{aspect-ratio:var(--ratio,3/2);border-radius:12px;border:1px solid var(--rc-b20);background:repeating-linear-gradient(135deg,var(--rc-bg10) 0 12px,var(--rc-bg15) 12px 24px);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:border-color 110ms}
.ph span{font:12px/16px 'IBM Plex Mono',monospace;color:var(--rc-t3);text-align:center;padding:12px}
.ph--16{border-radius:16px}
/* the browser mock frame around a client-site mockup */
.mock{border-radius:16px;border:1px solid var(--rc-b20);background:var(--rc-bg0);box-shadow:0 24px 64px -24px rgba(22,22,22,.35);overflow:hidden}
.mock__bar{height:44px;background:var(--rc-bg10);border-bottom:1px solid var(--rc-b20);display:flex;align-items:center;padding:0 16px;gap:16px}
.mock__dots{display:flex;gap:6px}.mock__dots span{width:10px;height:10px;border-radius:50%;background:#c6c6c6}
.mock__url{flex:1;max-width:420px;margin:0 auto;height:26px;border-radius:6px;background:var(--rc-bg0);border:1px solid var(--rc-b20);display:flex;align-items:center;justify-content:center;font:12px/16px 'IBM Plex Mono',monospace;color:var(--rc-t2)}
.mock__cap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:16px;font:12px/16px 'IBM Plex Mono',monospace;color:#6f6f6f}
/* a client-site mock stays light on purpose: it is a picture of someone else's site */
.site{font-family:'IBM Plex Sans',sans-serif}
.site__hdr{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,4vw,56px);gap:16px}
.site__hdr b{font-weight:600;font-size:18px;letter-spacing:-.01em}
.site__nav{display:none;gap:28px;font-size:14px}
@media (min-width:900px){.site__nav{display:flex}}
.site__hero{display:grid;grid-template-columns:1fr;gap:32px;padding:clamp(48px,6vw,96px) clamp(20px,4vw,56px);align-items:center}
@media (min-width:900px){.site__hero{grid-template-columns:repeat(12,minmax(0,1fr))}.site__hero>*{grid-column:span 6}}
.site__h1{font-weight:300;font-size:clamp(36px,4.6vw,68px);line-height:1;letter-spacing:-.03em;text-wrap:balance}
.site__lead{font-size:18px;line-height:26px;max-width:420px}
.site__btn{height:48px;padding:0 24px;display:inline-flex;align-items:center;font-size:16px;font-weight:500;color:#fff}
.site__btn--out{background:transparent}
.site__ph{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
.site__art{position:relative;overflow:hidden;border-radius:2px}
.site__ph span,.site__prod .site__ph span{font:12px/16px 'IBM Plex Mono',monospace;text-align:center;padding:12px}
.site__strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.site__strip>div{padding:24px clamp(20px,4vw,56px);display:flex;flex-direction:column;gap:4px}
.site__strip b{font-weight:300;font-size:32px;letter-spacing:-.02em}
.site__strip span{font-size:14px}
.site__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px;padding:clamp(48px,5vw,80px) clamp(20px,4vw,56px)}
.site__cards>div{display:flex;flex-direction:column;gap:12px}
.site__cards .site__ph{aspect-ratio:3/2}
.site__cards b{font-size:20px;font-weight:500}
.site__cards span{font-size:14px;line-height:20px}
.site__prods{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;padding:0 clamp(20px,4vw,56px) clamp(48px,5vw,80px)}
.site__prod{display:flex;flex-direction:column;gap:12px}
.site__prod .site__ph{aspect-ratio:1}
.site__prod>div:last-child{display:flex;justify-content:space-between;gap:12px;font-size:16px}
.site__prod>div:last-child span:last-child{white-space:nowrap;font-weight:500}
.site__foot{padding:20px clamp(20px,4vw,56px);display:flex;gap:24px;flex-wrap:wrap;font:12px/16px 'IBM Plex Mono',monospace}
/* a code card */
.code{background:#161616;color:#f4f4f4;border-radius:16px;overflow:hidden;box-shadow:0 32px 80px -32px rgba(22,22,22,.5)}
.code--flat{box-shadow:none;border:1px solid #393939}
.code__bar{height:44px;border-bottom:1px solid #393939;display:flex;align-items:center;justify-content:space-between;padding:0 20px;font:12px/16px 'IBM Plex Mono',monospace;color:#8d8d8d}
.code__bar span:last-child{color:#78a9ff}
.code pre{margin:0;padding:28px 24px;display:flex;flex-direction:column;gap:6px;font:14px/22px 'IBM Plex Mono',monospace;overflow:auto}
.code pre div{white-space:pre;color:#c6c6c6}
.code .k{color:#a6c8ff}.code .b{color:#78a9ff}.code .c{color:#8d8d8d}
/* CTA band: dark or blue, 96 padding, headline left, light button right */
.cta{display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:space-between}
.cta h2{max-width:720px}
/* dark CTA with the figure half off canvas */
.cta-fig .eu-figure{right:-10%;top:50%;transform:translateY(-50%);width:min(70vw,900px);opacity:.55}
.cta-fig .wrap{position:relative;display:flex;flex-direction:column;gap:32px;align-items:flex-start;padding-top:96px;padding-bottom:96px}
@media (min-width:900px){.cta-fig .wrap{padding-top:160px;padding-bottom:160px}}
/* legal template: rail, article, rail */
.legal-toc{display:flex;flex-direction:column;gap:12px}
.legal-toc a{font-size:14px;line-height:20px;color:var(--rc-t2);border-left:2px solid var(--rc-b20);padding-left:12px}
.legal-toc a:hover{color:var(--rc-t0);border-color:var(--rc-b100)}
.legal{display:flex;flex-direction:column;gap:40px;font-size:17px;line-height:27px;color:var(--rc-t0)}
.legal section{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--rc-b100);padding-top:20px}
.legal section>header{display:flex;gap:16px;align-items:baseline}
.legal section>header i{font:12px/16px 'IBM Plex Mono',monospace;color:#6f6f6f;font-style:normal}
.legal section>header h2{font-weight:500;font-size:22px;line-height:30px;letter-spacing:-.01em}
.legal p{text-wrap:pretty}
.legal ul{display:flex;flex-direction:column;gap:6px;padding-left:4px;color:var(--rc-t2)}
.legal ul li{display:flex;gap:10px}.legal ul li::before{content:"·";color:var(--rc-acc)}
.legal a{font-weight:500}
.note{background:var(--rc-bg10);border-radius:12px;padding:24px 28px;display:flex;flex-direction:column;gap:8px;font-size:16px;line-height:24px}
.note>span:last-child{color:var(--rc-t2)}
.sticky{position:sticky;top:96px}
@media (max-width:899px){.sticky{position:static}}
.rail{display:flex;flex-direction:column;gap:16px}
.rail__links{display:flex;flex-direction:column;gap:8px}
.rail__links a{font-size:14px;font-weight:500}
/* article (blog post, case study) */
.article{display:flex;flex-direction:column;gap:28px;font-size:19px;line-height:31px;color:var(--rc-t0)}
.article p{text-wrap:pretty}
.article h2{margin-top:24px;font-weight:300;font-size:36px;line-height:1.1;letter-spacing:-.025em}
.article h3{margin-top:12px;font-weight:400;font-size:26px;line-height:1.2;letter-spacing:-.015em}
.article ul,.article ol{padding-left:24px;display:flex;flex-direction:column;gap:8px}
.article ul{list-style:disc}.article ol{list-style:decimal}
.article strong{font-weight:500}
.article blockquote{margin:8px 0;padding:8px 0 8px 32px;border-left:2px solid var(--rc-bacc);font-weight:300;font-size:30px;line-height:1.25;letter-spacing:-.02em;color:var(--rc-t0);text-wrap:balance}
.article blockquote footer{font:12px/16px 'IBM Plex Mono',monospace;color:var(--rc-t3);margin-top:12px;font-weight:400;letter-spacing:0}
.article figure{margin:16px 0 0;display:flex;flex-direction:column;gap:12px}
.article figcaption{font:12px/16px 'IBM Plex Mono',monospace;color:var(--rc-t3)}
.article pre{background:#161616;color:#f4f4f4;border-radius:12px;padding:20px 24px;font:14px/22px 'IBM Plex Mono',monospace;overflow:auto}
.article code{font-family:'IBM Plex Mono',monospace;font-size:.9em}
.article table{border-collapse:collapse;width:100%;font-size:16px;line-height:24px}
.article th,.article td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--rc-b20);vertical-align:top}
.article th{font-weight:500;border-bottom-color:var(--rc-b100)}
.article img{border-radius:12px;border:1px solid var(--rc-b20)}
.toc a{font-size:14px;line-height:20px;color:#6f6f6f;border-left:2px solid var(--rc-b20);padding-left:12px;display:block}
.toc a:hover,.toc a.is-on{color:var(--rc-t0)}
.toc a.is-on{border-color:#0f62fe;font-weight:500}
.avatar{border-radius:50%;background:#0f62fe;color:#fff;font-family:'IBM Plex Mono',monospace;text-align:center;display:inline-flex;align-items:center;justify-content:center;flex:none}
/* forms: 48 fields, radius 8, mono eyebrow labels, errors under the field */
.field{display:flex;flex-direction:column;gap:6px}
.field>span{font:12px/16px 'IBM Plex Mono',monospace;letter-spacing:.32px;text-transform:uppercase;color:var(--rc-t3)}
.input{min-height:48px;border:1px solid var(--rc-b20);border-radius:8px;padding:0 16px;font-size:15px;color:var(--rc-t0);background:var(--rc-bg0);width:100%}
.input::placeholder{color:var(--rc-t3)}
.input:focus{outline:2px solid var(--rc-focus);outline-offset:-1px;border-color:var(--rc-bacc)}
textarea.input{min-height:140px;padding:12px 16px;resize:vertical}
.input.is-bad{border-color:#da1e28}
.err{font-size:13px;color:var(--rc-err);display:flex;align-items:center;gap:6px}
.f2{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:600px){.f2{grid-template-columns:1fr 1fr}}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg label{height:36px;padding:0 14px;border-radius:8px;border:1px solid var(--rc-b20);background:var(--rc-bg0);font-size:14px;display:inline-flex;align-items:center;white-space:nowrap;cursor:pointer;gap:8px}
.seg label:has(input:checked){border-color:#0f62fe;background:var(--rc-acs)}
.seg input{position:absolute;opacity:0;width:0;height:0}
.seg--pill label{height:40px;padding:0 16px;border-radius:999px}
.seg--pill label:has(input:checked){background:#161616;color:#fff;border-color:#161616}
.alert{border:1px solid var(--rc-b20);border-radius:8px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start;background:var(--rc-bg10);font-size:14px;line-height:20px;color:var(--rc-t2)}
.alert--ok{border-color:#c6e8cf;background:#e8f5ec;color:var(--rc-t0)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .alert--ok{background:rgba(66,190,101,.18);border-color:rgba(66,190,101,.4)}}
.alert svg{flex:none;margin-top:2px}
[hidden]{display:none!important}
/* empty state, from the kit's EmptyState */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:64px 32px;position:relative;overflow:hidden;border:1px solid var(--rc-b20);border-radius:12px}
.empty h2{font-weight:300;font-size:24px;line-height:1.2}
.empty p{font-size:14px;line-height:20px;color:var(--rc-t2);max-width:360px}
.empty .eu-figure{right:-40px;top:-60px;width:220px;opacity:.2}
/* reveal: fade + 8px rise on the expressive curve, 70ms steps; whole without JS */
.r{opacity:0;transform:translateY(8px)}
.r.in{opacity:1;transform:none;transition:opacity 400ms cubic-bezier(0,0,.3,1) var(--d,0ms),transform 400ms cubic-bezier(0,0,.3,1) var(--d,0ms)}
.r.d1{--d:70ms}.r.d2{--d:140ms}.r.d3{--d:210ms}.r.d4{--d:280ms}
.no-js .r{opacity:1;transform:none}
/* phones: long link labels and row values may wrap; two-up mock grids stack; a nowrap phrase in a headline may break */
@media (max-width:599px){
  :is(.display,.h1-lg,.h1-md,.h1-sm,.h2-xl,.h2-lg,.h2-md) .nowrap{white-space:normal}
  .lnks .lnk{white-space:normal;align-items:flex-start}
  .rows>div>span:last-child,.rows>a>span:last-child{white-space:normal;text-align:right}
  .ba2{grid-template-columns:1fr}
}
/* dark mode: a light-palette figure swaps its ink and grey strokes for the dark palette's
   (the render did this with sysDark) and the bloom's multiply becomes screen. The R marks on
   the paper mocks come from <picture>. Dark bands already carry dark figures. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) :is(.eu-figure,.fig-box,.ux-four) [stroke="#161616"]{stroke:#f4f4f4}
  :root:not([data-theme="light"]) :is(.eu-figure,.fig-box,.ux-four) [fill="#161616"]{fill:#f4f4f4}
  :root:not([data-theme="light"]) :is(.eu-figure,.fig-box,.ux-four) [stroke="#8d8d8d"]{stroke:#d0e2ff}
  :root:not([data-theme="light"]) :is(.eu-figure,.fig-box,.ux-four) [fill="#8d8d8d"]{fill:#d0e2ff}
  :root:not([data-theme="light"]) :is(.eu-figure,.fig-box) [fill="#ffffff"]{fill:#262626}
  :root:not([data-theme="light"]) .eu-figure svg{mix-blend-mode:screen}
  :root:not([data-theme="light"]) :is(.band-dark,.band-blue,.hero-dark,.on-dark) .eu-figure svg,:root:not([data-theme="light"]) .eu-figure--solid svg{mix-blend-mode:normal}
}
/* the sent dialog: the card from the Contact render (check in an AccentSoft disc, 24/300 title,
   14/20 line, the reference in mono) over the petals figure, on a Gray 100 scrim at 50% */
.dlg{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px}
.dlg__scrim{position:absolute;inset:0;background:rgba(22,22,22,.5)}
.dlg__stage{position:relative;width:min(92vw,560px);aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.dlg__stage .eu-figure{inset:0;width:auto;opacity:.9}
.dlg__card{position:relative;width:min(100%,360px);background:var(--rc-bg0);border:1px solid var(--rc-b20);border-radius:12px;box-shadow:0 32px 80px -32px rgba(22,22,22,.4);padding:24px;display:flex;flex-direction:column;gap:12px;animation:rc-rise .4s cubic-bezier(.2,.7,.2,1) both}
.dlg__tick{width:40px;height:40px;border-radius:50%;background:var(--rc-acs);display:inline-flex;align-items:center;justify-content:center}
.dlg__title{font-weight:300;font-size:24px;line-height:1.1;letter-spacing:-.02em}
.dlg__close{align-self:flex-start;color:var(--rc-acc);margin-top:4px}
.dlg__close:hover{color:var(--rc-acch)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dlg__stage .eu-figure svg{mix-blend-mode:normal}}