/* company.css: the company pages (about, the four legal documents, the 404) on the v4 system.
   Linked by includes/company/head.tpl; design record docs/DESIGN-COMPANY.md. Colour only from the --em-* tokens the
   bridge (esa-v4-bridge.css) puts on :root in both themes, and inside a night stage from its --em-night-* set.
   Every rule is scoped to .cx, so nothing here reaches the header, the footer or another page. The site bundle ends
   every underline with *{text-decoration:none!important} and styles bare tables, inputs and headings with
   !important: the few !important rules below answer those, nothing else. */

@font-face{ font-family:"Geist"; font-style:normal; font-weight:400 800; font-display:swap; src:url(../fonts/geist/geist-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:"Geist"; font-style:normal; font-weight:400 800; font-display:swap; src:url(../fonts/geist/geist-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:"Geist Mono"; font-style:normal; font-weight:400 600; font-display:swap; src:url(../fonts/geist/geist-mono-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:"Geist Mono"; font-style:normal; font-weight:400 600; font-display:swap; src:url(../fonts/geist/geist-mono-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:400 700; font-display:swap; src:url(../fonts/inter/inter-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:400 700; font-display:swap; src:url(../fonts/inter/inter-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---- the page around the sections: the chrome's container and its guest band step aside, so the night stage sits
   directly under the header and every section runs edge to edge, as on the homepage (the id twice: the bundle pads
   the container from a selector of one id and three classes) ---- */
body:is(.page-about-esagames, .page-terms, .page-politicagdpr, .page-cookie, .page-dpa, .page-error-page-not-found) #breadcrumb{ display:none !important; }
body:is(.page-about-esagames, .page-terms, .page-politicagdpr, .page-cookie, .page-dpa, .page-error-page-not-found){ overflow-x:clip; }
body:is(.page-about-esagames, .page-terms, .page-politicagdpr, .page-cookie, .page-dpa, .page-error-page-not-found) #main-body#main-body{ display:block !important; padding:0 !important; background:var(--em-ground) !important; overflow-x:clip; }
body:is(.page-about-esagames, .page-terms, .page-politicagdpr, .page-cookie, .page-dpa, .page-error-page-not-found) #main-body#main-body > div{ max-width:none !important; width:100% !important; padding:0 !important; margin:0 !important; }
body:is(.page-about-esagames, .page-terms, .page-politicagdpr, .page-cookie, .page-dpa, .page-error-page-not-found) #main-body#main-body > div > .row{ display:block !important; margin:0 !important; }
body:is(.page-about-esagames, .page-terms, .page-politicagdpr, .page-cookie, .page-dpa, .page-error-page-not-found) #main-body#main-body .primary-content{ max-width:none !important; width:100% !important; padding:0 !important; flex:none !important; }

/* ---- scale, the same values as the homepage (docs/DESIGN-HOME-V4.md "Type" and "Space") ---- */
.cx{
    --em-fs-display:clamp(38px, 21px + 3.6vw, 68px);
    --em-fs-h2:clamp(30px, 25.6px + 1.124vw, 40px); --em-fs-h3:clamp(19px, 18.1px + .225vw, 21px);
    --em-fs-lead:clamp(17px, 16.1px + .225vw, 19px);
    --em-sec-pad:96px; --em-head-gap:48px; --em-col-gap:40px; --em-card-pad:24px; --em-card-gap:16px;
    --em-ease:cubic-bezier(.2,.7,.2,1);
    --cx-sticky:96px;
    color:var(--em-text-1); background:var(--em-ground);
    font:400 16px/1.6 var(--em-font-text); -webkit-font-smoothing:antialiased;
    interpolate-size:allow-keywords;
}
@media (max-width:719.98px){ .cx{ --em-sec-pad:64px; --em-head-gap:32px; --em-col-gap:24px; --em-card-pad:20px; --em-card-gap:12px; } }
@media (max-width:1099.98px){ .cx{ --cx-sticky:84px; } }

/* ---- base: element resets carry no specificity, so every component rule below wins over them ---- */
.cx *, .cx *::before, .cx *::after{ box-sizing:border-box; }
:where(.cx) :is(h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol, table){ margin:0; }
:where(.cx) :is(ul.cx-plain, ol.cx-plain){ padding:0; list-style:none; }
.cx a{ color:inherit; text-decoration:none; }
:where(.cx) button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
:where(.cx) img{ display:block; max-width:100%; height:auto; }
.cx :focus-visible{ outline:2px solid var(--em-focus); outline-offset:2px; }
.cx :focus:not(:focus-visible){ outline:none; }
.cx :is(h1, h2, h3, h4){ font-family:var(--em-font-display); color:var(--em-text-1); text-wrap:balance; text-transform:none; margin:0; }
.cx :is(p, li, summary, dd){ text-wrap-style:pretty; }
.cx h1{ font-weight:600; font-size:var(--em-fs-display); line-height:1.02; letter-spacing:-.04em; }
.cx h2{ font-weight:600; font-size:var(--em-fs-h2); line-height:1.1; letter-spacing:-.025em; }
.cx h3{ font-weight:500; font-size:var(--em-fs-h3); line-height:1.3; letter-spacing:-.012em; }
.cx :is(b, strong){ font-weight:500; color:var(--em-text-1); }

/* ---- layout ---- */
.cx .em-wrap{ max-width:1280px; margin:0 auto; padding:0 40px; }
@media (max-width:719.98px){ .cx .em-wrap{ padding:0 20px; } }
.cx .cx-sec{ padding:var(--em-sec-pad) 0; background:var(--em-ground); }
.cx .cx-sec.is-band{ background:var(--em-band); }
.cx .cx-head{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:16px var(--em-col-gap); align-items:start; margin-bottom:var(--em-head-gap); }
.cx .cx-head h2{ max-width:14em; }
.cx .cx-head-lead{ font:400 var(--em-fs-lead)/1.55 var(--em-font-text); letter-spacing:-.006em; color:var(--em-text-2); max-width:52ch; }
@media (max-width:1023.98px){ .cx .cx-head{ grid-template-columns:minmax(0,1fr); gap:12px; } }

/* ---- the night stage: dark in both themes, its own night in each (the bridge's --em-night-* set) ---- */
.cx .cx-stage{
    --em-ground:var(--em-night-ground); --em-surface:var(--em-night-surface); --em-surface-2:var(--em-night-surface-2);
    --em-line:var(--em-night-line); --em-line-strong:var(--em-night-line-strong); --em-line-control:var(--em-night-line-control);
    --em-text-1:var(--em-night-text-1); --em-text-2:var(--em-night-text-2); --em-text-3:var(--em-night-text-3);
    --em-brand-text:var(--em-night-brand-text); --em-brand-mark:var(--em-brand); --em-focus:var(--em-night-brand-text);
    --em-success:var(--em-night-success); --em-attack:var(--em-night-attack); --em-clean:var(--em-night-clean);
    position:relative; isolation:isolate; overflow:hidden; overflow:clip; color-scheme:dark;
    background:var(--em-stage); color:var(--em-text-1);
}
.cx .cx-gl{ position:absolute; inset:0; z-index:0; touch-action:pan-y; }
.cx .cx-gl canvas{ display:block; width:100%; height:100%; opacity:0; transition:opacity 1.8s ease; }
.cx .cx-gl.is-on canvas{ opacity:1; }
.cx .cx-stage-in{ position:relative; z-index:2; }
.cx .cx-kicker{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:16px; font:500 13px/1.3 var(--em-font-text); letter-spacing:.005em; color:var(--em-text-2); }
.cx .cx-kicker .em-i{ color:var(--em-brand-text); }
.cx .cx-kicker a{ color:var(--em-text-2); }
.cx .cx-kicker a:hover{ color:var(--em-text-1); }
.cx .cx-display{ background:var(--em-grad-display); -webkit-background-clip:text; background-clip:text; color:transparent;
    -webkit-box-decoration-break:slice; box-decoration-break:slice; padding-bottom:.08em; }
.cx .cx-lead{ font:400 var(--em-fs-lead)/1.55 var(--em-font-text); letter-spacing:-.006em; color:var(--em-text-2); }

/* ---- components (the homepage's em- set, scoped here) ---- */
.cx .em-i{ display:inline-block; flex:none; width:20px; height:20px; vertical-align:middle; }
.cx .em-i.is-16{ width:16px; height:16px; }
.cx .em-i.is-24{ width:24px; height:24px; }
.cx .em-nw{ white-space:nowrap; }
.cx .em-vh{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.cx .em-mono{ font-family:var(--em-font-mono); font-variant-numeric:tabular-nums; letter-spacing:0; }

.cx .em-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 20px; border-radius:10px;
    border:1px solid transparent; font:500 14px/1 var(--em-font-text); white-space:nowrap; cursor:pointer;
    transition:background-color 160ms var(--em-ease), border-color 160ms var(--em-ease), color 160ms var(--em-ease); }
.cx .em-btn .em-i{ width:16px; height:16px; }
.cx .em-btn.is-lg{ height:48px; padding:0 24px; font-size:15px; }
.cx .em-btn.is-primary{ background:var(--em-grad-action) var(--em-brand); color:var(--em-on-brand); }
.cx .em-btn.is-primary:hover{ background-image:none; color:var(--em-on-brand); }
.cx .em-btn.is-secondary{ border-color:var(--em-line-strong); color:var(--em-text-1); }
.cx .em-btn.is-secondary:hover{ background:var(--em-surface-2); border-color:var(--em-line-control); color:var(--em-text-1); }
.cx .em-btn.is-ghost{ color:var(--em-text-2); }
.cx .em-btn.is-ghost:hover{ background:var(--em-surface-2); color:var(--em-text-1); }
.cx .em-ibtn{ display:inline-grid; place-items:center; flex:none; width:44px; height:44px; border-radius:10px; border:1px solid transparent; color:var(--em-text-2);
    transition:background-color 160ms var(--em-ease), border-color 160ms var(--em-ease), color 160ms var(--em-ease); }
.cx .em-ibtn:hover{ background:var(--em-surface-2); color:var(--em-text-1); }

.cx .em-link{ color:var(--em-text-1); text-decoration-line:underline !important; text-decoration-color:var(--em-brand-line) !important; text-decoration-thickness:1px !important;
    text-underline-offset:3px; transition:text-decoration-color 160ms var(--em-ease); }
.cx .em-link:hover{ text-decoration-color:var(--em-brand-text) !important; }
.cx .em-action{ display:inline-flex; align-items:center; gap:4px; min-height:44px; font:500 14px/1.5 var(--em-font-text); color:var(--em-brand-text); }
.cx .em-action:hover{ text-decoration-line:underline !important; text-decoration-color:currentColor !important; text-decoration-thickness:1px !important; text-underline-offset:3px; }
.cx .em-action .em-i{ width:16px; height:16px; }

.cx .em-chip{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 8px; border-radius:6px; white-space:nowrap;
    font:500 12px/1 var(--em-font-text); letter-spacing:.01em; background:var(--em-surface-2); color:var(--em-text-2); }
.cx .em-chip.is-brand{ background:var(--em-brand-tint); color:var(--em-brand-text); }

.cx .em-card{ position:relative; padding:var(--em-card-pad); background:var(--em-surface); border:1px solid var(--em-line); border-radius:16px;
    transition:border-color 160ms var(--em-ease); }
@media (hover:hover){ .cx .em-card:has(a):hover{ border-color:var(--em-line-strong); } }
.cx .em-card:has(.cx-cover:focus-visible){ outline:2px solid var(--em-focus); outline-offset:2px; }
.cx .em-card .cx-cover:focus-visible{ outline:none; }
.cx .em-card .cx-cover::after{ content:""; position:absolute; inset:0; border-radius:inherit; }

/* the accordion: native details, hairlines between rows, a plus that turns 45 degrees, a hanging number */
.cx .em-acc{ counter-reset:cx-q; }
.cx .em-acc > details{ border:0; border-top:1px solid var(--em-line); counter-increment:cx-q; }
.cx .em-acc > details:last-child{ border-bottom:1px solid var(--em-line); }
.cx .em-acc summary{ display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:0 16px; min-height:64px; padding:16px 0; list-style:none; cursor:pointer;
    font:500 17px/1.4 var(--em-font-text); color:var(--em-text-1); }
.cx .em-acc summary::before{ content:counter(cx-q, decimal-leading-zero) / ""; font:600 20px/1 var(--em-font-display); letter-spacing:-.02em; color:var(--em-text-3); font-variant-numeric:tabular-nums; transition:color 220ms var(--em-ease); }
.cx .em-acc details[open] > summary::before{ color:var(--em-brand-text); }
.cx .em-acc summary::-webkit-details-marker{ display:none; }
.cx .em-acc summary .em-i{ color:var(--em-text-3); transition:transform 220ms var(--em-ease), color 220ms var(--em-ease); }
.cx .em-acc details[open] > summary .em-i{ transform:rotate(45deg); color:var(--em-text-1); }
@media (hover:hover){ .cx .em-acc summary:hover .em-i{ color:var(--em-text-1); } }
.cx .em-acc details > :not(summary){ max-width:68ch; padding:0 40px 24px 64px; color:var(--em-text-2); }
.cx .em-acc details::details-content{ height:0; overflow:clip; transition:height .4s var(--em-ease), content-visibility .4s allow-discrete; }
.cx .em-acc details[open]::details-content{ height:auto; }
@media (max-width:719.98px){
    .cx .em-acc summary{ grid-template-columns:36px minmax(0,1fr) auto; gap:0 12px; font-size:16px; }
    .cx .em-acc summary::before{ font-size:17px; }
    .cx .em-acc details > :not(summary){ padding:0 0 20px 48px; }
}

/* the status line and the Pause animations button of the hero's proof row */
.cx .cx-motion[hidden]{ display:none; }
.cx .cx-motion .cx-i-play, .cx .cx-motion.is-off .cx-i-pause{ display:none; }
.cx .cx-motion.is-off .cx-i-play{ display:inline-block; }

/* reveal: a block eases up a few pixels as it first comes into view (script adds .is-in; without script, or under
   reduced motion, everything is simply there) */
.cx.cx-js [data-cx-reveal]{ opacity:0; transform:translateY(14px); transition:opacity .7s var(--em-ease), transform .9s var(--em-ease); }
.cx.cx-js [data-cx-reveal].is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
    .cx *, .cx *::before, .cx *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
    .cx.cx-js [data-cx-reveal]{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){ .cx ::details-content{ transition:none !important; } }

/* =====================================================================================================================
   About (about-esagames.tpl)
   ===================================================================================================================== */
/* the hero: the copy over the left of the map, the scene's Frankfurt in the slot on the right; stacked on a narrow
   stage, the slot under the copy. The scrim keeps the words readable over the relief. */
.cx .cx-ah{ container-type:inline-size; }
.cx .cx-ah::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(180deg, rgba(var(--em-scrim),.92) 0%, rgba(var(--em-scrim),.72) 48%, rgba(var(--em-scrim),0) 72%); }
.cx .cx-ah-in{ display:grid; grid-template-columns:minmax(0,1fr); padding-top:48px; pointer-events:none; }
.cx .cx-ah-in > *{ pointer-events:auto; }
.cx .cx-ah-in > .cx-ah-slot{ pointer-events:none; }
.cx .cx-ah h1{ font-size:clamp(36px, calc(9.4cqi - 1px), 66px); max-width:13em; }
.cx .cx-ah-lead{ margin-top:20px; max-width:36em; }
.cx .cx-ah-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.cx .cx-ah-slot{ grid-area:2 / 1; height:clamp(260px, 64cqi, 360px); }
.cx .cx-ah-proof{ grid-area:3 / 1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 32px; padding:20px 0 28px; border-top:1px solid var(--em-line); }
.cx .cx-ah-key{ display:flex; flex-wrap:wrap; gap:8px 32px; font:400 14px/1.5 var(--em-font-text); color:var(--em-text-2); }
.cx .cx-ah-key li{ display:flex; align-items:baseline; gap:10px; }
.cx .cx-ah-key b{ color:var(--em-text-1); }
/* the legend's three marks are the scene's own: the data centre's orange pin, the office's warm white, the players' cool white */
.cx .cx-dot{ flex:none; width:8px; height:8px; border-radius:50%; transform:translateY(-1px); background:var(--em-brand); }
.cx .cx-dot.is-ro{ background:var(--em-text-1); }
.cx .cx-dot.is-pl{ background:var(--em-clean); }
.cx .cx-ah-proof .cx-motion{ flex:none; margin-right:-12px; padding:0 12px; }
@container (max-width:599.98px){
    .cx .cx-ah-in{ padding-top:40px; }
    .cx .cx-ah-ctas{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); }
    .cx .cx-ah-ctas .em-btn{ padding:0 8px; }
    .cx .cx-ah-key{ flex-direction:column; gap:6px; }
}
@container (max-width:379.98px){ .cx .cx-ah-ctas{ grid-template-columns:minmax(0,1fr); } }
/* the stage's own size from the window (a container query cannot style its container) */
@media (min-width:1024px){ .cx .cx-ah{ min-height:clamp(640px, 50vw, 760px); display:flex; flex-direction:column; } }
@container (min-width:1000px){
    .cx .cx-ah::after{ background:linear-gradient(90deg, rgba(var(--em-scrim),.94) 0%, rgba(var(--em-scrim),.8) 32%, rgba(var(--em-scrim),.3) 50%, rgba(var(--em-scrim),0) 62%),
        linear-gradient(0deg, rgba(var(--em-scrim),.85) 0%, rgba(var(--em-scrim),0) 22%); }
    .cx .cx-ah-in{ flex:1; width:100%; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); grid-template-rows:1fr auto; column-gap:var(--em-col-gap); align-items:center; padding-top:72px; }
    .cx .cx-ah h1{ font-size:clamp(52px, calc(5.4cqi - 4px), 72px); }
    .cx .cx-ah-copy{ grid-area:1 / 1; }
    .cx .cx-ah-slot{ grid-area:1 / 2; height:100%; min-height:420px; }
    .cx .cx-ah-proof{ grid-area:2 / 1 / 3 / 3; margin-top:40px; }
}

/* who runs ESAGAMES: the register, one card of cells three across with hairlines between them, like a spec sheet */
.cx .cx-reg-card{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); background:var(--em-surface); border:1px solid var(--em-line); border-radius:16px; overflow:hidden; }
.cx .cx-reg-cell{ display:flex; flex-direction:column; gap:6px; min-width:0; padding:20px 24px 22px; border-top:1px solid var(--em-line); border-left:1px solid var(--em-line); margin:-1px 0 0 -1px; }
.cx .cx-reg-cell dt{ font:500 13px/1.4 var(--em-font-text); letter-spacing:.005em; color:var(--em-text-3); }
.cx .cx-reg-cell dd{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; min-height:28px; font:500 16px/1.45 var(--em-font-text); color:var(--em-text-1); }
.cx .cx-reg-v{ min-width:0; overflow-wrap:anywhere; }
.cx .cx-reg-v.em-mono{ font-size:15px; font-weight:400; }
.cx .cx-copy{ margin:-8px -12px -8px 0; color:var(--em-text-3); }
.cx .cx-copy .cx-i-done, .cx .cx-copy.is-done .cx-i-copy{ display:none; }
.cx .cx-copy.is-done .cx-i-done{ display:inline-block; color:var(--em-success); }
@media (max-width:1023.98px){ .cx .cx-reg-card{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:599.98px){ .cx .cx-reg-card{ grid-template-columns:minmax(0,1fr); } .cx .cx-reg-cell{ padding:16px 20px 18px; } }

/* the network: three cells, each led by its key word set large (the homepage's commitments device) */
.cx .cx-net-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0 var(--em-col-gap); }
.cx .cx-net-cell{ padding-top:24px; border-top:1px solid var(--em-line-strong); }
.cx .cx-net-key{ font:600 clamp(30px, 22px + 1.6vw, 44px)/1 var(--em-font-display); letter-spacing:-.03em; color:var(--em-text-1); margin-bottom:20px; }
.cx .cx-net-key.em-mono{ font-family:var(--em-font-mono); font-weight:500; letter-spacing:-.04em; }
.cx .cx-net-cell h3{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.cx .cx-net-cell h3 .em-i{ color:var(--em-text-3); }
.cx .cx-net-cell p:not(.cx-net-key){ font-size:15px; line-height:1.6; color:var(--em-text-2); max-width:44ch; }
@media (max-width:899.98px){ .cx .cx-net-grid{ grid-template-columns:minmax(0,1fr); gap:32px; } }

/* the products: six cards, three by two; each card one link (its action covers the card), and it leans a little
   toward a mouse pointer (--cx-rx/--cx-ry, set by the page's script) */
.cx .cx-prod-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--em-card-gap); perspective:1200px; }
.cx .cx-prod-card{ display:flex; flex-direction:column; min-height:236px; transform:rotateX(var(--cx-rx, 0deg)) rotateY(var(--cx-ry, 0deg));
    transition:border-color 160ms var(--em-ease), transform .5s var(--em-ease); }
.cx .cx-prod-i{ color:var(--em-text-2); margin-bottom:20px; }
.cx .cx-prod-card h3{ margin-bottom:8px; }
.cx .cx-prod-card p{ font-size:15px; line-height:1.55; color:var(--em-text-2); }
.cx .cx-prod-card .em-action{ margin-top:auto; padding-top:12px; align-self:flex-start; }
@media (max-width:1023.98px){ .cx .cx-prod-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:599.98px){
    .cx .cx-prod-grid{ grid-template-columns:minmax(0,1fr); }
    .cx .cx-prod-card{ min-height:0; display:grid; grid-template-columns:24px minmax(0,1fr); gap:0 16px; }
    .cx .cx-prod-i{ grid-row:1 / 4; margin:2px 0 0; }
}

/* how to reach us */
.cx .cx-reach-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--em-card-gap); }
.cx .cx-reach-card{ display:flex; flex-direction:column; gap:8px; }
.cx .cx-reach-card > .em-i{ color:var(--em-text-2); margin-bottom:12px; }
.cx .cx-reach-card p{ font-size:15px; line-height:1.55; color:var(--em-text-2); }
.cx .cx-reach-btn{ align-self:flex-start; margin-top:auto; }
.cx .cx-reach-card h3 + p + .cx-reach-btn{ margin-top:16px; }
.cx .cx-reach-tel{ display:inline-flex; align-items:center; min-height:44px; font:600 clamp(24px, 20px + 1vw, 30px)/1.2 var(--em-font-display); letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--em-text-1); }
.cx .cx-reach-tel:hover{ color:var(--em-brand-text); }
@media (max-width:899.98px){ .cx .cx-reach-grid{ grid-template-columns:minmax(0,1fr); } }

/* guides and tools: one sentence of links beside its heading */
.cx .cx-res-in{ margin-bottom:0; align-items:center; }
.cx .cx-res-lead{ font:400 var(--em-fs-lead)/1.7 var(--em-font-text); letter-spacing:-.006em; color:var(--em-text-2); }

/* the questions: the heading beside the accordion */
.cx .cx-faq-in{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:24px var(--em-col-gap); align-items:start; }
@media (max-width:1023.98px){ .cx .cx-faq-in{ grid-template-columns:minmax(0,1fr); } }

/* =====================================================================================================================
   Legal documents (terms.tpl, politicagdpr.tpl, cookie.tpl, dpa.tpl; includes/company/legal-*.tpl)
   ===================================================================================================================== */
/* the hero: copy left over the ledger's dark side, the stack in the slot on the right; the row of documents at its foot */
.cx .cx-lh{ container-type:inline-size; }
.cx .cx-lh::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(180deg, rgba(var(--em-scrim),.9) 0%, rgba(var(--em-scrim),.7) 46%, rgba(var(--em-scrim),0) 70%, rgba(var(--em-scrim),0) 82%, rgba(var(--em-scrim),.8) 100%); }
.cx .cx-lh-in{ display:grid; grid-template-columns:minmax(0,1fr); padding-top:48px; pointer-events:none; }
.cx .cx-lh-in > *{ pointer-events:auto; }
.cx .cx-lh-in > .cx-lh-slot{ pointer-events:none; }
.cx .cx-kicker > span[aria-hidden]{ color:var(--em-text-3); }
.cx .cx-lh h1{ font-size:clamp(36px, calc(9cqi), 64px); max-width:14em; }
.cx .cx-lh-sub{ margin-top:20px; max-width:40em; }
.cx .cx-lh-meta{ display:flex; flex-wrap:wrap; gap:8px 28px; margin-top:28px; font:400 14px/1.5 var(--em-font-text); color:var(--em-text-2); }
.cx .cx-lh-meta li{ display:flex; align-items:center; gap:8px; }
.cx .cx-lh-meta .em-i{ color:var(--em-text-3); }
.cx .cx-lh-slot{ grid-area:2 / 1; height:clamp(240px, 62cqi, 340px); }
.cx .cx-lh-foot{ grid-area:3 / 1; display:flex; align-items:center; justify-content:space-between; gap:12px 24px; padding:16px 0 20px; border-top:1px solid var(--em-line); }
/* the row of documents: a scroller of quiet tabs, the current one marked by its ground and an orange rule */
.cx .cx-lh-docs{ display:flex; gap:4px; min-width:0; overflow-x:auto; scrollbar-width:none; margin:0 -12px; padding:0 12px; }
.cx .cx-lh-docs::-webkit-scrollbar{ display:none; }
/* the side with more documents fades out (a mask, no colour of its own); the classes come from legal-foot.tpl */
.cx .cx-lh-docs.is-more{ -webkit-mask-image:linear-gradient(90deg, black calc(100% - 32px), transparent); mask-image:linear-gradient(90deg, black calc(100% - 32px), transparent); }
.cx .cx-lh-docs.is-less{ -webkit-mask-image:linear-gradient(90deg, transparent, black 32px); mask-image:linear-gradient(90deg, transparent, black 32px); }
.cx .cx-lh-docs.is-less.is-more{ -webkit-mask-image:linear-gradient(90deg, transparent, black 32px, black calc(100% - 32px), transparent); mask-image:linear-gradient(90deg, transparent, black 32px, black calc(100% - 32px), transparent); }
.cx .cx-lh-docs a{ position:relative; flex:none; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; border-radius:10px;
    font:500 14px/1 var(--em-font-text); color:var(--em-text-2); white-space:nowrap; transition:background-color 160ms var(--em-ease), color 160ms var(--em-ease); }
.cx .cx-lh-docs a .em-i{ color:var(--em-text-3); }
.cx .cx-lh-docs a:hover{ background:var(--em-surface-2); color:var(--em-text-1); }
.cx .cx-lh-docs a[aria-current="page"]{ background:var(--em-surface-2); color:var(--em-text-1); }
.cx .cx-lh-docs a[aria-current="page"] .em-i{ color:var(--em-brand-text); }
.cx .cx-lh-docs a[aria-current="page"]::after{ content:""; position:absolute; left:14px; right:14px; bottom:0; height:2px; border-radius:2px; background:var(--em-brand); }
.cx .cx-lh-docs a:focus-visible{ outline-offset:-2px; }
.cx .cx-lh-foot .cx-motion{ flex:none; margin-right:-12px; padding:0 12px; }
@container (max-width:599.98px){
    .cx .cx-lh-in{ padding-top:40px; }
    .cx .cx-lh-meta{ flex-direction:column; gap:6px; }
    .cx .cx-lh-foot .cx-motion{ width:44px; padding:0; margin:0; border:1px solid var(--em-line-strong); }
    .cx .cx-lh-foot .cx-motion-t{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
}
@media (min-width:1024px){ .cx .cx-lh{ min-height:clamp(540px, 40vw, 620px); display:flex; flex-direction:column; } }
@container (min-width:1000px){
    .cx .cx-lh::after{ background:linear-gradient(90deg, rgba(var(--em-scrim),.94) 0%, rgba(var(--em-scrim),.82) 36%, rgba(var(--em-scrim),.25) 54%, rgba(var(--em-scrim),0) 64%),
        linear-gradient(0deg, rgba(var(--em-scrim),.9) 0%, rgba(var(--em-scrim),0) 22%); }
    .cx .cx-lh-in{ flex:1; width:100%; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); grid-template-rows:1fr auto; column-gap:var(--em-col-gap); align-items:center; padding-top:64px; }
    .cx .cx-lh h1{ font-size:clamp(48px, calc(4.6cqi), 64px); }
    .cx .cx-lh-copy{ grid-area:1 / 1; padding-bottom:16px; }
    .cx .cx-lh-slot{ grid-area:1 / 2; height:100%; min-height:380px; }
    .cx .cx-lh-foot{ grid-area:2 / 1 / 3 / 3; margin-top:32px; }
}

/* the document beside its contents: the contents a sticky sidebar from 1024 px, a folded card above the text below */
.cx .cx-doc{ padding-top:64px; }
.cx .cx-doc-in{ display:grid; grid-template-columns:minmax(0,1fr); gap:24px; }
.cx .cx-toc{ border:1px solid var(--em-line); border-radius:16px; background:var(--em-surface); }
.cx .cx-toc > summary{ display:flex; align-items:center; justify-content:space-between; min-height:56px; padding:0 20px; list-style:none; cursor:pointer;
    font:500 15px/1.3 var(--em-font-text); color:var(--em-text-1); }
.cx .cx-toc > summary::-webkit-details-marker{ display:none; }
.cx .cx-toc > summary::after{ content:""; width:8px; height:8px; margin-right:4px; border-right:1.5px solid var(--em-text-3); border-bottom:1.5px solid var(--em-text-3); transform:rotate(45deg) translateY(-3px); transition:transform 220ms var(--em-ease); }
.cx .cx-toc[open] > summary::after{ transform:rotate(225deg) translateY(-3px); }
.cx .cx-toc nav{ padding:0 8px 12px; }
.cx .cx-toc ol li a{ display:flex; align-items:center; min-height:40px; padding:8px 12px; border-radius:8px; font:400 14px/1.4 var(--em-font-text); color:var(--em-text-2);
    transition:background-color 160ms var(--em-ease), color 160ms var(--em-ease); }
.cx .cx-toc ol li a:hover{ background:var(--em-surface-2); color:var(--em-text-1); }
.cx .cx-toc ol li a[aria-current]{ color:var(--em-text-1); background:var(--em-surface-2); box-shadow:inset 2px 0 var(--em-brand-mark); }
.cx .cx-toc ol li[hidden]{ display:none; }
.cx .cx-toc-g{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:12px 12px 4px; font:500 13px/1.4 var(--em-font-text); }
.cx .cx-toc-g a{ color:var(--em-text-1); }
.cx .cx-toc-g a:hover{ color:var(--em-brand-text); }
.cx .cx-toc-g span{ font-weight:400; color:var(--em-text-3); white-space:nowrap; }
.cx .cx-toc-by{ margin:16px 12px 4px; font:400 13px/1.45 var(--em-font-text); color:var(--em-text-3); }
.cx .cx-toc-by a{ color:var(--em-text-2); text-decoration-line:underline !important; text-decoration-color:var(--em-line-strong) !important; text-underline-offset:3px; }
@media (min-width:1024px){
    .cx .cx-doc-in{ grid-template-columns:280px minmax(0,1fr); gap:64px; align-items:start; }
    .cx .cx-toc{ position:sticky; top:var(--cx-sticky); border:0; border-radius:0; background:none; }
    .cx .cx-toc > summary{ min-height:0; padding:0 12px 12px; cursor:default; pointer-events:none; font:500 13px/1.4 var(--em-font-text); color:var(--em-text-3); }
    .cx .cx-toc > summary::after{ display:none; }
    .cx .cx-toc nav{ max-height:calc(100vh - var(--cx-sticky) - 56px); overflow-y:auto; overscroll-behavior:contain; padding:0 4px 12px 0; scrollbar-width:thin; scrollbar-color:var(--em-line-strong) transparent; }
}

/* the clauses: hairlines between them, a reading measure, the document's own words */
.cx .cx-doc-body{ min-width:0; max-width:800px; }
.cx .cx-clause{ padding:32px 0; border-top:1px solid var(--em-line); color:var(--em-text-2); }
.cx .cx-doc-body > .cx-clause:first-child, .cx .cx-part > h2 + .cx-clause, .cx .cx-part-note + .cx-clause{ border-top:0; padding-top:24px; }
.cx .cx-clause h2{ font:600 clamp(21px, 19px + .5vw, 26px)/1.25 var(--em-font-display); letter-spacing:-.018em; margin-bottom:16px; }
.cx .cx-clause h3{ font:600 clamp(20px, 18.5px + .4vw, 24px)/1.25 var(--em-font-display); letter-spacing:-.016em; margin-bottom:16px; }
.cx .cx-clause-n{ margin-bottom:8px; font:400 13px/1.4 var(--em-font-mono); color:var(--em-text-3); font-variant-numeric:tabular-nums; }
.cx .cx-clause :is(p, ul, ol){ max-width:72ch; font:400 16px/1.7 var(--em-font-text); color:var(--em-text-2); }
.cx .cx-clause p + :is(p, ul, ol), .cx .cx-clause :is(ul, ol) + :is(p, ul, ol, small), .cx .cx-clause div + p{ margin-top:12px; }
.cx .cx-clause :is(ul, ol){ padding-left:22px; list-style:disc; }
.cx .cx-clause ol{ list-style:decimal; }
.cx .cx-clause li{ padding-left:4px; }
.cx .cx-clause li + li{ margin-top:6px; }
.cx .cx-clause li::marker{ color:var(--em-text-3); }
.cx .cx-clause :is(b, strong){ font-weight:500; color:var(--em-text-1); }
.cx .cx-clause small{ display:block; margin-top:8px; font:400 13px/1.5 var(--em-font-text); color:var(--em-text-3); }
.cx :is(.cx-clause, .cx-part-note, .cx-doc-foot) a{ color:var(--em-text-1); text-decoration-line:underline !important; text-decoration-color:var(--em-brand-line) !important; text-decoration-thickness:1px !important; text-underline-offset:3px; overflow-wrap:anywhere; }
.cx :is(.cx-clause, .cx-part-note, .cx-doc-foot) a:hover{ text-decoration-color:var(--em-brand-text) !important; }
/* a clause the document marks as key: an orange rule at its edge */
.cx .cx-clause.is-key{ padding-left:24px; box-shadow:inset 2px 0 var(--em-brand-mark); }
.cx .cx-doc-foot{ margin-top:8px; padding-top:24px; border-top:1px solid var(--em-line); font:400 14px/1.8 var(--em-font-text); color:var(--em-text-3); }

/* the DPA's details table: hairline cells, the label column in the text colour (over the bundle's table rules) */
/* (the bundle gives every content table a 560 px minimum, from a selector of one class and three pseudo-classes) */
.cx .cx-clause table.dpa-table.dpa-table.dpa-table{ width:100% !important; min-width:0 !important; border-collapse:collapse !important; background:none !important; font:400 15px/1.6 var(--em-font-text); }
.cx .cx-clause table.dpa-table td{ padding:12px 16px !important; border:1px solid var(--em-line) !important; vertical-align:top; color:var(--em-text-2) !important; background:none !important; font-size:15px !important; }
.cx .cx-clause table.dpa-table tr:hover > td{ background:none !important; }
.cx .cx-clause table.dpa-table td:first-child{ width:32%; color:var(--em-text-1) !important; font-weight:500; background:var(--em-surface) !important; }
@media (max-width:719.98px){
    .cx .cx-clause table.dpa-table, .cx .cx-clause table.dpa-table tbody, .cx .cx-clause table.dpa-table tr, .cx .cx-clause table.dpa-table td{ display:block; width:100% !important; }
    .cx .cx-clause table.dpa-table tr + tr{ margin-top:8px; }
    .cx .cx-clause table.dpa-table td + td{ border-top:0 !important; }
}

/* the terms' two parts and their filter */
.cx .cx-part{ padding-top:56px; }
.cx .cx-part:first-of-type{ padding-top:8px; }
.cx .cx-part[hidden], .cx .cx-clause[hidden]{ display:none; }
.cx .cx-part-n{ margin-bottom:8px; font:500 13px/1.4 var(--em-font-text); color:var(--em-text-3); }
.cx .cx-part-note{ margin-top:16px; max-width:72ch; font:400 var(--em-fs-lead)/1.6 var(--em-font-text); color:var(--em-text-2); }
.cx .cx-part-note b{ font-weight:500; color:var(--em-text-1); }
.cx .cx-find{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; padding:20px; margin-bottom:24px; border:1px solid var(--em-line); border-radius:16px; background:var(--em-surface); }
.cx .cx-find label{ margin:0; font:500 13px/1.3 var(--em-font-text); color:var(--em-text-1); }
.cx .cx-find-box{ position:relative; }
.cx .cx-find-box .em-i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--em-text-3); pointer-events:none; }
.cx .cx-find input[type=search]{ width:100%; height:48px; margin:0; padding:0 16px 0 44px !important; border:1px solid var(--em-line-control) !important; border-radius:10px !important;
    background:var(--em-ground) !important; color:var(--em-text-1) !important; box-shadow:none !important; font:400 16px/1.2 var(--em-font-text); }
.cx .cx-find input[type=search]::placeholder{ color:var(--em-text-3); opacity:1; }
.cx .cx-find input[type=search]:focus-visible{ outline:2px solid var(--em-focus); outline-offset:2px; }
.cx .cx-find-n{ min-height:0; font:400 13px/1.4 var(--em-font-text); color:var(--em-text-2); }
.cx .cx-find-n:empty{ display:none; }
.cx .cx-find-none{ padding:32px 0; font:400 16px/1.6 var(--em-font-text); color:var(--em-text-2); }

/* the close */
.cx .cx-ask-in{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px 40px; }
.cx .cx-ask-in .cx-head-lead{ margin-top:12px; }
.cx .cx-ask-ctas{ display:flex; flex-wrap:wrap; gap:12px; }
@media (max-width:479.98px){ .cx .cx-ask-ctas{ display:grid; grid-template-columns:minmax(0,1fr); width:100%; } }

/* =====================================================================================================================
   404 (error/page-not-found.tpl)
   ===================================================================================================================== */
.cx .cx-lost{ container-type:inline-size; }
.cx .cx-lost::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(180deg, rgba(var(--em-scrim),.92) 0%, rgba(var(--em-scrim),.72) 50%, rgba(var(--em-scrim),0) 74%); }
.cx .cx-lost-in{ display:grid; grid-template-columns:minmax(0,1fr); padding-top:48px; pointer-events:none; }
.cx .cx-lost-in > *{ pointer-events:auto; }
.cx .cx-lost-in > .cx-lost-slot{ pointer-events:none; }
.cx .cx-lost-code{ color:var(--em-brand-text); font-size:13px; }
.cx .cx-kicker > span[aria-hidden]{ color:var(--em-text-3); }
.cx .cx-lost h1{ font-size:clamp(64px, calc(19cqi), 128px); line-height:.95; letter-spacing:-.05em; }
.cx .cx-lost-sub{ margin-top:16px; font:500 var(--em-fs-h3)/1.3 var(--em-font-display); letter-spacing:-.012em; color:var(--em-text-1); }
.cx .cx-lost-lead{ margin-top:12px; max-width:32em; }
.cx .cx-lost-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.cx .cx-lost-slot{ grid-area:2 / 1; height:clamp(240px, 66cqi, 340px); }
.cx .cx-lost-go{ grid-area:3 / 1; padding-top:20px; border-top:1px solid var(--em-line); }
.cx .cx-lost-go > p{ margin-bottom:12px; font:500 13px/1.4 var(--em-font-text); color:var(--em-text-2); }
.cx .cx-lost-go ul{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
.cx .cx-lost-go a{ display:flex; align-items:center; gap:12px; min-height:52px; padding:0 16px; border:1px solid var(--em-line); border-radius:12px; background:var(--em-surface);
    font:500 15px/1.3 var(--em-font-text); color:var(--em-text-1); transition:border-color 160ms var(--em-ease), background-color 160ms var(--em-ease); }
.cx .cx-lost-go a .em-i{ color:var(--em-text-3); transition:color 160ms var(--em-ease), transform 220ms var(--em-ease); }
.cx .cx-lost-go a span{ flex:1; min-width:0; }
.cx .cx-lost-go a:hover, .cx .cx-lost-go a:focus-visible{ border-color:var(--em-line-control); background:var(--em-surface-2); }
.cx .cx-lost-go a:hover .em-i:first-child, .cx .cx-lost-go a:focus-visible .em-i:first-child{ color:var(--em-brand-text); }
.cx .cx-lost-go a:hover .cx-go-arrow{ transform:translateX(2px); color:var(--em-text-1); }
.cx .cx-lost-foot{ grid-area:4 / 1; display:flex; justify-content:flex-end; padding:8px 0 16px; }
.cx .cx-lost-foot .cx-motion{ margin-right:-12px; padding:0 12px; }
.cx .cx-lost-foot:not(:has(.cx-motion:not([hidden]))){ padding:0 0 24px; }
@container (max-width:599.98px){
    .cx .cx-lost-in{ padding-top:40px; }
    .cx .cx-lost-ctas{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); }
    .cx .cx-lost-ctas .em-btn{ padding:0 8px; }
}
@container (max-width:379.98px){ .cx .cx-lost-ctas{ grid-template-columns:minmax(0,1fr); } }
@container (min-width:720px){ .cx .cx-lost-go ul{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1024px){ .cx .cx-lost{ min-height:clamp(640px, calc(100vh - 72px), 720px); display:flex; flex-direction:column; } }
@container (min-width:1000px){
    .cx .cx-lost::after{ background:linear-gradient(90deg, rgba(var(--em-scrim),.94) 0%, rgba(var(--em-scrim),.78) 34%, rgba(var(--em-scrim),.2) 52%, rgba(var(--em-scrim),0) 62%),
        linear-gradient(0deg, rgba(var(--em-scrim),.9) 0%, rgba(var(--em-scrim),0) 30%); }
    .cx .cx-lost-in{ flex:1; width:100%; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:1fr auto auto; column-gap:var(--em-col-gap); align-items:center; padding-top:64px; }
    .cx .cx-lost-copy{ grid-area:1 / 1; }
    .cx .cx-lost-slot{ grid-area:1 / 2; height:100%; min-height:380px; }
    .cx .cx-lost-go{ grid-area:2 / 1 / 3 / 3; margin-top:32px; }
    .cx .cx-lost-go ul{ grid-template-columns:repeat(5, minmax(0,1fr)); }
    .cx .cx-lost-foot{ grid-area:3 / 1 / 4 / 3; }
}
/* a bad route (error/unknown-routepath.tpl) adds a note under the page: a quiet line on the ground */
.cx-404 ~ .alert{ max-width:1200px; margin:24px auto !important; padding:16px 20px !important; border:1px solid var(--em-line) !important; border-radius:12px !important;
    background:var(--em-surface) !important; color:var(--em-text-2) !important; font:400 14px/1.6 var(--em-font-text); }
.cx-404 ~ .alert a{ color:var(--em-text-1) !important; overflow-wrap:anywhere; }

/* between 1000 and 1279 px of stage the row of documents needs the room: Pause animations keeps only its icon */
@container (max-width:1279.98px){
    .cx .cx-lh-foot .cx-motion{ width:44px; padding:0; margin:0; border:1px solid var(--em-line-strong); }
    .cx .cx-lh-foot .cx-motion-t{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
}
/* five across from 1000 px of stage; under 1280 each one stacks its icon over its name so a name never breaks in three */
@container (min-width:1000px) and (max-width:1279.98px){
    .cx .cx-lost-go a{ flex-wrap:wrap; align-content:flex-start; gap:8px 12px; min-height:92px; padding:14px 16px; }
    .cx .cx-lost-go a span{ flex-basis:100%; order:2; }
    .cx .cx-lost-go a .cx-go-arrow{ margin-left:auto; }
}