/*
 * Elvis ERP: the shared stylesheet, loaded and cached on every page.
 *
 * What goes where (section 8 of docs/architecture.md):
 *   - This file: the foundation, the chrome, the default palette, and the
 *     CSS of every section part used on 10 or more pages in docs/sitemap.md,
 *     across more than one family.
 *   - families/<family>.css: a family's palette, its styling of shared
 *     parts, and the CSS of sections used only within that family.
 *   - sections/<part>.css: any other section part (fewer than 10 pages).
 *   A component's variants keep their CSS with the component's CSS.
 *   A page template declares its file-based sections with
 *   elvis_use_sections(); they and the page's family file are printed
 *   inline in the head, right after this file (inc/enqueue.php), so every
 *   page loads one theme stylesheet.
 *
 * Blocks, in order:
 *   1. Fonts
 *   2. Tokens
 *   3. Base
 *   4. Typography
 *   5. Layout
 *   6. Components
 *   7. Chrome (header and footer)
 *   8. Sections
 *   9. Animations
 *  10. Reduced motion
 *
 * Built to match design/prototypes/. Hello Elementor's reset.css loads
 * before this file; its theme.css and header-footer.css are turned off.
 * Phone layouts follow design/prototypes/home-mobile.html (below 768px).
 */

/* ==========================================================================
   1. Fonts
   Self-hosted WOFF2, latin subset. Sora for headings, Figtree for body.
   Sora 700 and Figtree 400/600 are preloaded (inc/enqueue.php).
   ========================================================================== */

@font-face{font-family:"Sora";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/sora-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Sora";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/sora-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Sora";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/sora-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Sora";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/sora-latin-800-normal.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/figtree-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/figtree-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/figtree-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/figtree-latin-700-normal.woff2") format("woff2")}

/* ==========================================================================
   2. Tokens

   Neutral scale (--elvis-n-*): the prototypes' 28 neutral colours, from
   white (0) to near-black (975). The 11 page families remap the scale on
   <body> (elvis-family-*); their palettes are in families/<family>.css,
   printed inline on that family's pages only. Section markup ported from
   a prototype maps
   its hex-named variables like this:

     --kffffff n-0     --kdce4e3 n-150   --k4a5453 n-600   --k1b2626 n-825
     --kfbfcfb n-25    --kd3dddb n-200   --k3a4a49 n-650   --k16201f n-850
     --kf7faf9 n-40    --kc5d0cf n-250   --k3a4544 n-675   --k151c1c n-875
     --kf2f6f5 n-50    --kc3cfcd n-275   --k2a3737 n-700   --k101616 n-900
     --keef3f2 n-75    --kb5c3c1 n-300   --k2a3333 n-725   --k0a0e0e n-950
     --ke7efee n-100   --kb4c0bf n-325   --k1f2a2a n-750   --k070a0a n-975
     --ke3e9e8 n-125   --k9aa8a7 n-400   --k1b2727 n-800
                       --k5f6b6a n-500

   Accent colours: page templates set them with elvis_set_page_style(),
   which prints them on :root after this file. Up to three accents, each
   with an ink (text) shade, a tint (background) shade and an on-colour
   (text placed on the accent). The prototype's --a/--ink/--tint/--on map
   to --elvis-accent/-accent-ink/-accent-tint/-on-accent, and the 2 and 3
   versions likewise.

   Highlight: the accent as used for text and icons in markup.
     --k00c5b4 highlight     --k007d72 highlight-ink   --k00584f highlight-ink-deep
     --ke3f8f5 accent-tint   --k0a3b36 accent-dark     --kb4f0ea accent-soft
   On family pages it turns lighter inside dark areas (.elvis-on-dark).

   Semantic aliases (--elvis-color-*) are set on body, after the family
   remap, so they follow the page's palette.
   ========================================================================== */

:root{
	/* Neutral scale: default palette (Home, Elvis U, Pricing). */
	--elvis-n-0:#FFFFFF;
	--elvis-n-25:#FBFCFB;
	--elvis-n-40:#F7FAF9;
	--elvis-n-50:#F2F6F5;
	--elvis-n-75:#EEF3F2;
	--elvis-n-100:#E7EFEE;
	--elvis-n-125:#E3E9E8;
	--elvis-n-150:#DCE4E3;
	--elvis-n-200:#D3DDDB;
	--elvis-n-250:#C5D0CF;
	--elvis-n-275:#C3CFCD;
	--elvis-n-300:#B5C3C1;
	--elvis-n-325:#B4C0BF;
	--elvis-n-400:#9AA8A7;
	--elvis-n-500:#5F6B6A;
	--elvis-n-600:#4A5453;
	--elvis-n-650:#3A4A49;
	--elvis-n-675:#3A4544;
	--elvis-n-700:#2A3737;
	--elvis-n-725:#2A3333;
	--elvis-n-750:#1F2A2A;
	--elvis-n-800:#1B2727;
	--elvis-n-825:#1B2626;
	--elvis-n-850:#16201F;
	--elvis-n-875:#151C1C;
	--elvis-n-900:#101616;
	--elvis-n-950:#0A0E0E;
	--elvis-n-975:#070A0A;

	/* Accents: default palette values; page templates override them. */
	--elvis-accent:#00C5B4;
	--elvis-accent-ink:#007D72;
	--elvis-accent-tint:#E3F8F5;
	--elvis-on-accent:#0A0E0E;
	--elvis-accent-2:#EDA100;
	--elvis-accent-ink-2:#8A5B00;
	--elvis-accent-tint-2:#FCF1D6;
	--elvis-on-accent-2:#2A1B00;
	--elvis-accent-3:#2A78D6;
	--elvis-accent-ink-3:#1B56A5;
	--elvis-accent-tint-3:#E6F0FB;
	--elvis-on-accent-3:#FFFFFF;

	/* Accent shades derived for the default palette. */
	--elvis-accent-hover:#2FDCCB;
	--elvis-accent-dark:#0A3B36;
	--elvis-accent-soft:#B4F0EA;
	--elvis-highlight:var(--elvis-accent);
	--elvis-highlight-ink:var(--elvis-accent-ink);
	--elvis-highlight-ink-deep:#00584F;

	/* Fixed colours: the same on every page in the prototypes. */
	--elvis-focus:#00C5B4;
	--elvis-link-hover:#007D72;
	--elvis-field-line:#C3CFCD;
	--elvis-btn-line-hover:#F2F6F5;
	--elvis-nav-current:#00C5B4;
	--elvis-u-surface:#14112B;
	--elvis-u-line:#7A5CFF;

	/* Type */
	--elvis-font-heading:"Sora",system-ui,sans-serif;
	--elvis-font-body:"Figtree",system-ui,sans-serif;

	/* Layout */
	--elvis-container:1240px;
	--elvis-gutter:40px;
	--elvis-section-space:80px;

	/* Radius and shadow */
	--elvis-radius-sm:10px;
	--elvis-radius-md:12px;
	--elvis-radius-btn:14px;
	--elvis-radius-lg:18px;
	--elvis-shadow-lift:0 24px 48px -24px rgba(10,14,14,.35);
}

/* Shared by every page family: accent shades are derived from the page's
   accents instead of the default palette's fixed values. */
.elvis-has-family{
	--elvis-accent-hover:color-mix(in srgb,var(--elvis-accent) 80%,#fff);
	--elvis-accent-dark:color-mix(in srgb,var(--elvis-accent) 38%,#000);
	--elvis-accent-soft:color-mix(in srgb,var(--elvis-accent) 40%,#fff);
	--elvis-accent-light:color-mix(in srgb,var(--elvis-accent) 55%,#fff);
	--elvis-highlight-ink-deep:var(--elvis-accent-ink);
}

/* Dark areas on family pages (footer, top bar, CTA card, dark sections):
   the highlight turns lighter so it stays readable. */
.elvis-has-family .elvis-on-dark{
	--elvis-highlight:var(--elvis-accent-light);
	--elvis-highlight-ink:var(--elvis-accent-light);
}

/* Semantic aliases, resolved after the family remap. Repeated on
   .elvis-has-family so a family class also works on an inner element. */
body,
.elvis-has-family{
	--elvis-color-page:var(--elvis-n-25);
	--elvis-color-surface:var(--elvis-n-0);
	--elvis-color-subtle:var(--elvis-n-50);
	--elvis-color-line:var(--elvis-n-125);
	--elvis-color-text:var(--elvis-n-950);
	--elvis-color-text-strong:var(--elvis-n-725);
	--elvis-color-text-body:var(--elvis-n-600);
	--elvis-color-text-muted:var(--elvis-n-500);
	--elvis-color-text-faint:var(--elvis-n-300);
	--elvis-color-dark:var(--elvis-n-950);
	--elvis-btn-dark-hover:var(--elvis-n-825);
	--elvis-btn-dark-icon:var(--elvis-highlight);
	--elvis-nav-hover:var(--elvis-n-50);
	--elvis-menu-icon-bg:var(--elvis-n-950);
	--elvis-menu-icon-ink:var(--elvis-highlight);
}

.elvis-has-family{
	--elvis-btn-dark-hover:var(--elvis-accent-ink);
	--elvis-btn-dark-icon:#FFFFFF;
	--elvis-nav-hover:var(--elvis-accent-tint);
	--elvis-menu-icon-bg:var(--elvis-accent-tint);
	--elvis-menu-icon-ink:var(--elvis-accent-ink);
}

/* Category tones: the fixed colours sections use to tell modules,
   audiences and steps apart (same on every page). A tone class sets
   --elvis-tone (the colour), -tint (its background), -ink (text on the
   tint) and -text (the colour as text on white, where it differs). */
.elvis-tone-blue{--elvis-tone:#2A78D6;--elvis-tone-tint:#EAF2FC;--elvis-tone-ink:#1F5AAA;--elvis-tone-text:#2A78D6}
.elvis-tone-purple{--elvis-tone:#4A3AA7;--elvis-tone-tint:#EFEBFB;--elvis-tone-ink:#3A2D86;--elvis-tone-text:#4A3AA7}
.elvis-tone-orange{--elvis-tone:#EB6834;--elvis-tone-tint:#FCEEE6;--elvis-tone-ink:#A8420F;--elvis-tone-text:#EB6834}
.elvis-tone-amber{--elvis-tone:#EDA100;--elvis-tone-tint:#FCF1D6;--elvis-tone-ink:#8A5B00;--elvis-tone-text:#C98A00}
.elvis-tone-green{--elvis-tone:#008300;--elvis-tone-tint:#E7F5E7;--elvis-tone-ink:#005C00;--elvis-tone-text:#008300}
.elvis-tone-pink{--elvis-tone:#E87BA4;--elvis-tone-tint:#FBEAF1;--elvis-tone-ink:#A6335F;--elvis-tone-text:#E87BA4}
.elvis-tone-teal{--elvis-tone:#00C5B4;--elvis-tone-tint:#E3F8F5;--elvis-tone-ink:#00584F;--elvis-tone-text:#007D72}

/* Dark tones, for cards on dark sections: --elvis-dtone (accent),
   -surface, -line, -tag / -tag-bg, and -bubble colours for sample chats. */
.elvis-dtone-blue{--elvis-dtone:#6AA6F0;--elvis-dtone-surface:#192632;--elvis-dtone-line:#39556F;--elvis-dtone-tag:#9EC5F5;--elvis-dtone-tag-bg:#243646;--elvis-dtone-bubble:#1E2D39;--elvis-dtone-bubble-line:#324D69;--elvis-dtone-bubble-ink:#E4EFFC}
.elvis-dtone-purple{--elvis-dtone:#A99CF0;--elvis-dtone-surface:#232532;--elvis-dtone-line:#4F526F;--elvis-dtone-tag:#C7BFF5;--elvis-dtone-tag-bg:#323346;--elvis-dtone-bubble:#282B39;--elvis-dtone-bubble-line:#4A4969;--elvis-dtone-bubble-ink:#F0EDFC}
.elvis-dtone-orange{--elvis-dtone:#F28A5A;--elvis-dtone-surface:#2F221A;--elvis-dtone-line:#694C3B;--elvis-dtone-tag:#F7B394;--elvis-dtone-tag-bg:#423025;--elvis-dtone-bubble:#342920;--elvis-dtone-bubble-line:#694C3B;--elvis-dtone-bubble-ink:#FDEDE4}
.elvis-dtone-amber{--elvis-dtone:#F5C04A;--elvis-dtone-surface:#302A18;--elvis-dtone-line:#6A5E35;--elvis-dtone-tag:#F8D689;--elvis-dtone-tag-bg:#423B21;--elvis-dtone-bubble:#35311E;--elvis-dtone-bubble-line:#6A5E35;--elvis-dtone-bubble-ink:#FDF4DE}
.elvis-dtone-pink{--elvis-dtone:#F2A0C0;--elvis-dtone-surface:#2F252A;--elvis-dtone-line:#69535E;--elvis-dtone-tag:#F7C1D6;--elvis-dtone-tag-bg:#42343B;--elvis-dtone-bubble:#342C31;--elvis-dtone-bubble-line:#664A57;--elvis-dtone-bubble-ink:#FDEEF4}
.elvis-dtone-green{--elvis-dtone:#6FD06F;--elvis-dtone-surface:#1A2D1E;--elvis-dtone-line:#3B6442;--elvis-dtone-tag:#A8E5A8;--elvis-dtone-tag-bg:#243A28;--elvis-dtone-bubble:#1E3322;--elvis-dtone-bubble-line:#3B6442;--elvis-dtone-bubble-ink:#E6F7E6}

/* ==========================================================================
   3. Base
   Overrides the parts of Hello Elementor's reset.css that differ from
   the prototypes (link colour, focus ring, body font and colours).
   ========================================================================== */

html{scroll-behavior:smooth}

html,body{overflow-x:clip}

body{
	margin:0;
	background:var(--elvis-color-page);
	color:var(--elvis-color-text);
	font-family:var(--elvis-font-body);
	font-size:16px;
	line-height:1.5;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

a{color:inherit;text-decoration:none}
a:hover,a:active{color:var(--elvis-link-hover)}

button,input,select,textarea{font-family:inherit}

:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible{
	outline:3px solid var(--elvis-focus);
	outline-offset:2px;
	box-shadow:none;
}

img,svg{vertical-align:middle}

/* Visually hidden text. .screen-reader-text is WordPress core's class
   (Hello's skip link, core markup); its styles lived in Hello's theme.css. */
.screen-reader-text,
.elvis-screen-reader-text{
	position:absolute!important;
	width:1px;
	height:1px;
	margin:-1px;
	padding:0;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
	border:0;
}

.screen-reader-text:focus,
.elvis-screen-reader-text:focus{
	position:fixed!important;
	top:8px;
	left:8px;
	z-index:1000;
	width:auto;
	height:auto;
	clip:auto;
	padding:12px 18px;
	border-radius:var(--elvis-radius-md);
	background:var(--elvis-color-surface);
	color:var(--elvis-color-text);
	font-weight:600;
}

/* ==========================================================================
   4. Typography
   Sizes from the prototypes; phone sizes from home-mobile.html.
   ========================================================================== */

.elvis-h1,
.elvis-h1-xl,
.elvis-h2,
.elvis-h3{
	margin:0;
	font-family:var(--elvis-font-heading);
	font-weight:700;
	text-wrap:balance;
}

.elvis-h1{font-size:54px;line-height:1.05;letter-spacing:-0.035em}
.elvis-h1-xl{font-size:68px;line-height:1.02;font-weight:800;letter-spacing:-0.04em}
.elvis-h2{font-size:40px;line-height:1.12;letter-spacing:-0.03em}
.elvis-h3{font-size:26px;line-height:1.2;letter-spacing:-0.025em}

.elvis-eyebrow{
	font-family:var(--elvis-font-heading);
	font-size:13px;
	font-weight:600;
	letter-spacing:0.1em;
	text-transform:uppercase;
}

.elvis-eyebrow--wide{letter-spacing:0.12em}

.elvis-label{
	display:flex;
	align-items:center;
	gap:10px;
	font-size:12px;
	font-weight:700;
	letter-spacing:0.1em;
	text-transform:uppercase;
}

.elvis-lead,
.elvis-text,
.elvis-text-md,
.elvis-text-sm{margin:0}

.elvis-lead{max-width:640px;font-size:19px;line-height:1.6}
.elvis-text{font-size:17px;line-height:1.6}
.elvis-text-md{font-size:16px;line-height:1.7}
.elvis-text-sm{font-size:15px;line-height:1.6}

@media (max-width:767px){
	.elvis-h1{font-size:38px;line-height:1.08}
	.elvis-h1-xl{font-size:42px;line-height:1.05}
	.elvis-h2{font-size:30px}
	.elvis-h3{font-size:22px}
	.elvis-lead{font-size:17px}
}

/* ==========================================================================
   5. Layout
   ========================================================================== */

.elvis-container{
	width:100%;
	max-width:var(--elvis-container);
	margin:0 auto;
	padding:0 var(--elvis-gutter);
}

.elvis-section{padding:var(--elvis-section-space) 0}
.elvis-section--surface{background:var(--elvis-color-surface)}
.elvis-section--page{background:var(--elvis-color-page)}
.elvis-section--subtle{background:var(--elvis-color-subtle)}
.elvis-section--dark{background:var(--elvis-color-dark);color:var(--elvis-n-0)}
.elvis-section--darkest{background:var(--elvis-n-975);color:var(--elvis-n-0)}
.elvis-section--roomy{padding:88px 0}

/* Dot grid behind dark sections. */
.elvis-dotted{position:relative;overflow:hidden}
.elvis-dotted::before{
	content:"";
	position:absolute;
	inset:0;
	background-image:radial-gradient(var(--elvis-n-850) 1px,transparent 1px);
	background-size:26px 26px;
	pointer-events:none;
}
.elvis-dotted>.elvis-container{position:relative}

/* Vertical stack of a section's blocks, and two-column text/media split. */
.elvis-stack{display:flex;flex-direction:column;gap:40px}

.elvis-split{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
	gap:72px;
	align-items:center;
}

.elvis-split-text{display:flex;flex-direction:column;align-items:flex-start;gap:22px}

/* Shown only on phones, or only above phone width. !important so a
   component's own display value never brings a hidden element back. */
@media (min-width:768px){
	.elvis-phone-only{display:none!important}
}

@media (max-width:767px){
	.elvis-desktop-only,
	.elvis-hide-phone{display:none!important}
	.elvis-section--roomy{padding:var(--elvis-section-space) 0}
	.elvis-stack{gap:24px}
	.elvis-split{grid-template-columns:1fr;gap:28px}
}

@media (min-width:768px) and (max-width:1023px){
	.elvis-split{grid-template-columns:1fr;gap:40px}
}

@media (max-width:767px){
	:root{
		--elvis-gutter:20px;
		--elvis-section-space:44px;
	}
}

/* ==========================================================================
   6. Components
   ========================================================================== */

/* Buttons. Sizes: --sm 42px, default 48px, --lg 56px. */
.elvis-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	height:48px;
	padding:0 26px;
	border:0;
	border-radius:var(--elvis-radius-btn);
	background:transparent;
	color:inherit;
	font-family:inherit;
	font-size:16px;
	font-weight:600;
	line-height:1;
	white-space:nowrap;
	cursor:pointer;
	transition:background .15s ease;
}

.elvis-btn--sm{height:42px;padding:0 18px;font-size:15px}
.elvis-btn--lg{height:56px}
.elvis-btn--section{height:50px}
.elvis-btn--hero{height:52px}
.elvis-btn--submit{height:54px}
.elvis-btn--mascot{padding:0 24px 0 18px}

.elvis-btn svg{flex-shrink:0;stroke:currentColor}

/* Each variant also sets :focus, so reset.css's pink button:focus never shows.
   Filled variants have no border, like the prototypes; outline variants have
   a 1.5px one. */
.elvis-btn--dark,
.elvis-btn--dark:focus{background:var(--elvis-color-dark);color:#FFFFFF}
.elvis-btn--dark:hover,
.elvis-btn--dark:focus-visible{background:var(--elvis-btn-dark-hover);color:#FFFFFF}

.elvis-btn--accent,
.elvis-btn--accent:focus{background:var(--elvis-accent);color:var(--elvis-on-accent)}
.elvis-btn--accent:hover,
.elvis-btn--accent:focus-visible{background:var(--elvis-accent-hover);color:var(--elvis-on-accent)}

/* High-contrast mode drops backgrounds: outline filled buttons there. */
@media (forced-colors:active){
	.elvis-btn--dark,
	.elvis-btn--accent{border:1.5px solid}
}

.elvis-btn--line,
.elvis-btn--line-dark{border:1.5px solid}

.elvis-btn--line,
.elvis-btn--line:focus{background:var(--elvis-color-surface);border-color:var(--elvis-color-text);color:var(--elvis-color-text)}
.elvis-btn--line:hover,
.elvis-btn--line:focus-visible{background:var(--elvis-btn-line-hover);color:#0A0E0E}

.elvis-btn--line-dark,
.elvis-btn--line-dark:focus{background:transparent;border-color:var(--elvis-n-650);color:var(--elvis-n-0)}
.elvis-btn--line-dark:hover,
.elvis-btn--line-dark:focus-visible{background:rgba(255,255,255,.08);color:#FFFFFF}

/* Plain button: no reset.css border or pink hover. For menu toggles and
   other controls that style themselves. */
.elvis-plain-button,
.elvis-plain-button:hover,
.elvis-plain-button:focus{
	padding:0;
	border:0;
	border-radius:0;
	background:none;
	color:inherit;
	font:inherit;
	text-align:inherit;
	white-space:normal;
}

/* Hover lift for cards. */
.elvis-lift{transition:transform .2s ease,box-shadow .2s ease}
.elvis-lift:hover{transform:translateY(-4px);box-shadow:var(--elvis-shadow-lift)}

/* Form fields. :is(input,select,textarea) matches the specificity of
   reset.css's input[type=...] rules, so these win by coming later. */
:is(input,select,textarea).elvis-field{
	width:100%;
	height:48px;
	padding:0 14px;
	border:1.5px solid var(--elvis-field-line);
	border-radius:var(--elvis-radius-md);
	background:#FFFFFF;
	color:#0A0E0E;
	font-size:15px;
	line-height:1.5;
	transition:none;
}

:is(input,select,textarea).elvis-field:focus{border-color:var(--elvis-focus)}
textarea.elvis-field{height:120px;padding:12px 14px;line-height:normal;resize:vertical}

/* Phone field: calling-code select next to the number. */
.elvis-phone{display:flex;gap:8px}
.elvis-phone select.elvis-field{width:112px;flex-shrink:0}

/* FAQ item (details/summary). The page passes the "+" icon in
   .elvis-faq-icon; it turns into a "×" when open. */
.elvis-faq-list{display:flex;flex-direction:column;gap:12px}

.elvis-faq{
	background:var(--elvis-color-surface);
	border:1px solid var(--elvis-color-line);
	border-radius:var(--elvis-radius-lg);
}

.elvis-faq>summary{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:16px;
	padding:20px 24px;
	list-style:none;
	cursor:pointer;
	font-family:var(--elvis-font-heading);
	font-size:17px;
	font-weight:600;
	letter-spacing:-0.01em;
}

.elvis-faq>summary::-webkit-details-marker{display:none}

.elvis-faq-icon{display:flex;flex-shrink:0;transition:transform .15s ease}
.elvis-faq-icon svg{stroke:var(--elvis-highlight-ink)}
.elvis-faq[open]>summary .elvis-faq-icon{transform:rotate(45deg)}

.elvis-faq-answer{
	max-width:760px;
	padding:0 24px 22px;
	color:var(--elvis-color-text-body);
	font-size:15.5px;
	line-height:1.65;
}

/* Breadcrumbs. */
.elvis-crumb{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:10px;
	color:var(--elvis-color-text-muted);
	font-size:13px;
}

.elvis-crumb a:hover{color:var(--elvis-link-hover);text-decoration:underline}
.elvis-crumb-sep{color:var(--elvis-color-text-faint)}
.elvis-crumb-current{color:var(--elvis-color-text);font-weight:600}

/* Icons from the sprite (elvis_icon()) draw in the current text colour. */
.elvis-icon{flex-shrink:0}
.elvis-btn--dark .elvis-icon{color:var(--elvis-btn-dark-icon)}

/* Flag frame: 28×18 with a hairline border. */
.elvis-flag{
	display:block;
	flex-shrink:0;
	width:28px;
	height:18px;
	overflow:hidden;
	border:1px solid var(--elvis-n-150);
	border-radius:4px;
}

.elvis-flag .elvis-icon{display:block}

/* Dark icon tile, for cards on dark sections (Elvis U, integrations).
   The icon takes the card's dark tone (elvis-dtone-*). */
.elvis-u-card-icon{
	display:flex;
	flex-shrink:0;
	align-items:center;
	justify-content:center;
	width:42px;
	height:42px;
	border:1px solid var(--elvis-n-750);
	border-radius:12px;
	background:var(--elvis-n-950);
	color:var(--elvis-dtone);
}

.elvis-u-card-icon--large{width:46px;height:46px;border-radius:13px}

/* Elvis U mascot (elvis_u_mascot()). Its gradients sit in .elvis-u-defs.
   Keyframes are in the Animations block. */
.elvis-u-defs{position:absolute;width:0;height:0;overflow:hidden}

.elvis-u{display:block;flex-shrink:0;overflow:visible}
.elvis-u *{transform-box:fill-box}
.elvis-u-bowl{fill:none;stroke-linecap:round;stroke-width:22}
.elvis-u-body{transform-origin:80px 92px;transform-box:view-box}
.elvis-u-eye{transform-origin:center}
.elvis-u-orbit{transform-origin:80px 92px;transform-box:view-box}
.elvis-u-spark{transform-origin:center}
.elvis-u-rings circle{fill:none;stroke-width:2;opacity:0;transform-origin:80px 92px;transform-box:view-box}
.elvis-u--no-rings .elvis-u-rings{display:none}

/* ==========================================================================
   7. Chrome (header and footer)
   Desktop header from 1140px; below that the phone header and menu sheet
   (home-mobile.html) and no top bar. Phone footer below 768px.
   ========================================================================== */

/* ---- Top bar ---- */
.elvis-top-bar{
	position:relative;
	z-index:40;
	background:var(--elvis-n-950);
	color:var(--elvis-n-250);
	font-size:13px;
	line-height:20px;
}

.elvis-top-bar-inner{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:24px;
	padding-top:10px;
	padding-bottom:10px;
}

.elvis-top-bar-group{display:flex;align-items:center;gap:28px}
.elvis-top-bar-group--end{gap:22px}
/* Direct children only, so the region menu's links keep their own colours. */
.elvis-top-bar-group>a{color:var(--elvis-n-250)}
.elvis-top-bar-group>a.elvis-top-bar-sign-in{color:#FFFFFF;font-weight:600}
.elvis-top-bar-lang{display:flex;align-items:center;gap:6px}

/* ---- Region selector ---- */
.elvis-region{position:relative}

.elvis-region-toggle{
	display:flex;
	align-items:center;
	gap:8px;
	list-style:none;
	cursor:pointer;
	color:var(--elvis-n-250);
	font-size:13px;
}

.elvis-region-toggle::-webkit-details-marker{display:none}
.elvis-region-globe{color:var(--elvis-highlight)}

.elvis-region-menu{
	position:absolute;
	right:-8px;
	top:34px;
	z-index:60;
	width:320px;
	padding:8px;
	border-radius:var(--elvis-radius-lg);
	background:#FFFFFF;
	color:var(--elvis-n-950);
	box-shadow:0 28px 60px -20px rgba(10,14,14,.55),0 0 0 1px var(--elvis-n-125);
}

.elvis-region--up .elvis-region-menu{right:0;top:auto;bottom:46px}

.elvis-region-head{display:flex;flex-direction:column;gap:2px;padding:10px 12px 8px}
.elvis-region-title{font-family:var(--elvis-font-heading);font-size:14px;font-weight:600;letter-spacing:-0.01em}
.elvis-region-intro{color:var(--elvis-n-500);font-size:12px;line-height:1.4}

.elvis-region-item{
	display:flex;
	align-items:center;
	gap:12px;
	padding:10px 12px;
	border-radius:var(--elvis-radius-md);
	color:var(--elvis-n-950);
}

.elvis-region-item:hover{background:var(--elvis-n-50);color:var(--elvis-n-950)}
.elvis-region-mark{display:flex;align-items:center;justify-content:center;width:30px;flex-shrink:0}

.elvis-region-badge{
	display:flex;
	align-items:center;
	justify-content:center;
	width:28px;
	height:20px;
	border-radius:5px;
	background:var(--elvis-accent-tint);
	color:var(--elvis-highlight-ink);
}

.elvis-region-text{display:flex;flex-direction:column;flex-grow:1}
.elvis-region-name{font-size:14px;font-weight:600;line-height:1.3}
.elvis-region-tagline{color:var(--elvis-n-500);font-size:12px;line-height:1.3}
.elvis-region-check{color:var(--elvis-highlight-ink)}

.elvis-region-note{
	margin-top:6px;
	padding:8px 12px 10px;
	border-top:1px solid var(--elvis-n-75);
	color:var(--elvis-n-500);
	font-size:12px;
}

/* ---- Header ---- */
.elvis-header{
	position:sticky;
	top:0;
	z-index:30;
	background:color-mix(in srgb,var(--elvis-color-page) 96%,transparent);
	-webkit-backdrop-filter:blur(14px);
	backdrop-filter:blur(14px);
	border-bottom:1px solid var(--elvis-color-line);
}

.elvis-has-family .elvis-header{
	background:color-mix(in srgb,var(--elvis-color-page) 94%,transparent);
	border-bottom:3px solid var(--elvis-accent);
}

.admin-bar .elvis-header{top:32px}

.elvis-header-inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:24px;
	height:76px;
}

.elvis-header-logo{display:flex;flex-shrink:0;align-items:center}
/* Proportions of the original logo (1164 x 478), which the prototypes scale;
   the shipped 156 x 64 file rounds them slightly. */
.elvis-header-logo img{display:block;width:auto;height:32px;aspect-ratio:1164/478}

/* Primary navigation */
.elvis-nav,
.elvis-nav-list{display:flex;align-items:stretch;height:76px}

.elvis-nav-list{gap:2px;margin:0;padding:0;list-style:none}
.elvis-nav-item{display:flex;align-items:center}
.elvis-nav-item--small{position:relative}

.elvis-nav-link,
.elvis-nav-link.elvis-plain-button{
	display:flex;
	align-items:center;
	gap:6px;
	height:44px;
	padding:0 12px;
	border-radius:var(--elvis-radius-sm);
	color:#2A3333; /* Fixed, not the family palette: the prototypes keep it on every page. */
	font-size:15px;
	font-weight:600;
	white-space:nowrap;
	cursor:pointer;
}

.elvis-nav-link .elvis-u{margin-right:2px}

.elvis-nav-item:hover>.elvis-nav-link,
.elvis-nav-item.is-open>.elvis-nav-link,
.elvis-nav-link:focus-visible{background:var(--elvis-nav-hover);color:var(--elvis-n-950)}

.elvis-nav-item.is-current>.elvis-nav-link{
	text-decoration:underline;
	text-decoration-color:var(--elvis-nav-current);
	text-decoration-thickness:0.12em;
	text-underline-offset:0.35em;
}

.elvis-nav-link .elvis-icon{transition:transform .15s ease}
.elvis-nav-item.is-open>.elvis-nav-link .elvis-icon{transform:rotate(180deg)}

/* Mega panels. elvis.js opens them with .is-open; before it runs (or
   without it) they open on hover and keyboard focus. */
.elvis-mega{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	right:0;
	z-index:50;
	background:#FFFFFF;
	border-bottom:1px solid var(--elvis-n-125);
	box-shadow:0 40px 60px -40px rgba(10,14,14,.35);
}

.elvis-mega--small{
	top:calc(100% - 4px);
	right:auto;
	width:360px;
	padding:8px;
	border:1px solid var(--elvis-n-125);
	border-radius:16px;
}

.elvis-nav-item.is-open>.elvis-mega,
html:not(.elvis-js) .elvis-nav-item:hover>.elvis-mega,
html:not(.elvis-js) .elvis-nav-item:focus-within>.elvis-mega{display:block}

.elvis-mega-inner{padding-top:26px;padding-bottom:26px}

.elvis-mega-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.elvis-mega-groups--6{grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}

.elvis-mega-group{display:flex;flex-direction:column;gap:2px}

.elvis-mega-heading{
	padding:0 10px 8px;
	color:var(--elvis-n-500);
	font-size:12px;
	font-weight:700;
	letter-spacing:0.1em;
	text-transform:uppercase;
}

.elvis-mega-link{
	display:flex;
	align-items:center;
	gap:10px;
	padding:7px 10px;
	border-radius:var(--elvis-radius-sm);
	color:#2A3333; /* Fixed, like the nav links. */
	font-size:14px;
	font-weight:600;
	line-height:1.3;
}

.elvis-mega-link:hover{background:var(--elvis-btn-line-hover);color:var(--elvis-n-950)}

.elvis-mega-icon{
	display:flex;
	flex-shrink:0;
	align-items:center;
	justify-content:center;
	width:30px;
	height:30px;
	border-radius:9px;
	background:var(--elvis-menu-icon-bg);
	color:var(--elvis-menu-icon-ink);
}

.elvis-mega-footer{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:24px;
	margin-top:22px;
	padding-top:18px;
	border-top:1px solid var(--elvis-n-125);
}

.elvis-mega-overview{
	display:flex;
	align-items:center;
	gap:8px;
	color:var(--elvis-n-950);
	font-size:14px;
	font-weight:700;
}

.elvis-mega-overview .elvis-icon{color:var(--elvis-highlight-ink)}

.elvis-mega-promo{
	display:flex;
	align-items:center;
	gap:12px;
	padding:8px 16px 8px 10px;
	border-radius:var(--elvis-radius-btn);
	background:var(--elvis-u-surface);
	color:#FFFFFF;
	font-size:13px;
	font-weight:600;
}

.elvis-mega-promo:hover{color:#FFFFFF}

/* Header actions */
.elvis-header-actions{display:flex;flex-shrink:0;align-items:center;gap:10px}

.elvis-header-search{
	display:flex;
	align-items:center;
	justify-content:center;
	width:44px;
	height:44px;
	border-radius:var(--elvis-radius-md);
	color:var(--elvis-n-950);
}

.elvis-header-search:hover{background:var(--elvis-nav-hover);color:var(--elvis-n-950)}

.elvis-btn.elvis-header-cta{height:48px;padding:0 22px;border-radius:var(--elvis-radius-md);font-size:15px}

.elvis-menu-toggle{display:none}

/* ---- Phone menu sheet ---- */
.elvis-mobile-menu{
	position:absolute;
	top:100%;
	left:0;
	right:0;
	z-index:50;
	display:flex;
	flex-direction:column;
	gap:2px;
	max-height:78vh;
	overflow:auto;
	padding:12px 20px 20px;
	background:#FFFFFF;
	border-bottom:1px solid var(--elvis-n-125);
	box-shadow:0 30px 50px -30px rgba(10,14,14,.4);
}

.elvis-mobile-menu[hidden]{display:none}

.elvis-mobile-link{
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:12px 4px;
	border-bottom:1px solid var(--elvis-n-75);
	font-size:16px;
	font-weight:600;
}

.elvis-mobile-link .elvis-icon{color:var(--elvis-highlight-ink)}

.elvis-mobile-heading{
	padding:14px 4px 4px;
	color:var(--elvis-n-500);
	font-size:12px;
	font-weight:700;
	letter-spacing:.1em;
	text-transform:uppercase;
}

@media (min-width:1140px){
	.elvis-mobile-menu,
	.elvis-mobile-menu[hidden]{display:none}
}

@media (max-width:1139px){
	.elvis-top-bar,
	.elvis-nav,
	.elvis-header-search{display:none}

	.elvis-header-inner{height:64px}
	.elvis-header-logo img{height:28px}
	.elvis-header-actions{gap:12px}

	.elvis-btn.elvis-header-cta{height:40px;padding:0 16px;border-radius:var(--elvis-radius-sm);font-size:14px}
	.elvis-header-cta .elvis-icon{display:none}

	.elvis-menu-toggle,
	.elvis-menu-toggle.elvis-plain-button{
		display:flex;
		align-items:center;
		justify-content:center;
		width:40px;
		height:40px;
		border:1.5px solid var(--elvis-n-200);
		border-radius:var(--elvis-radius-sm);
		color:var(--elvis-n-950);
		cursor:pointer;
	}

	.elvis-menu-toggle-close,
	.elvis-menu-toggle[aria-expanded="true"] .elvis-menu-toggle-open{display:none}

	.elvis-menu-toggle[aria-expanded="true"] .elvis-menu-toggle-close{display:block}
}

/* H9: blur on desktop, solid background on phones. */
@media (max-width:767px){
	.elvis-header,
	.elvis-has-family .elvis-header{
		background:var(--elvis-color-page);
		-webkit-backdrop-filter:none;
		backdrop-filter:none;
	}
}

/* WordPress admin bar (logged-in users only). */
@media (max-width:782px){
	.admin-bar .elvis-header{top:46px}
}

@media (max-width:600px){
	.admin-bar .elvis-header{top:0}
}

/* ---- Footer ---- */
.elvis-footer{background:var(--elvis-n-975);color:var(--elvis-n-250)}

.elvis-footer-inner{
	display:flex;
	flex-direction:column;
	gap:56px;
	padding-top:72px;
	padding-bottom:36px;
}

.elvis-footer-top{display:flex;justify-content:space-between;gap:40px}

.elvis-footer-brand{display:flex;flex-direction:column;flex-shrink:0;gap:22px;width:280px}
.elvis-footer-brand img{align-self:flex-start;width:auto;height:34px}
.elvis-footer-about{margin:0;color:var(--elvis-n-400);font-size:15px;line-height:1.6}

.elvis-footer-social{display:flex;gap:10px}

.elvis-footer-social a{
	display:flex;
	align-items:center;
	justify-content:center;
	width:40px;
	height:40px;
	border:1px solid var(--elvis-n-700);
	border-radius:50%;
	color:var(--elvis-n-100);
	font-size:13px;
	font-weight:700;
}

.elvis-footer-columns{
	display:grid;
	flex-grow:1;
	grid-template-columns:repeat(5,minmax(0,1fr));
	gap:24px;
}

.elvis-footer-column{display:flex;flex-direction:column;gap:16px}
.elvis-footer-links{display:flex;flex-direction:column;gap:11px;margin:0;padding:0;list-style:none;font-size:14px}
.elvis-footer-links a{color:var(--elvis-n-400)}

.elvis-footer-heading{
	color:#FFFFFF;
	font-family:var(--elvis-font-heading);
	font-size:13px;
	font-weight:600;
	letter-spacing:0.1em;
	text-transform:uppercase;
}

.elvis-footer-offices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}

.elvis-office{
	display:flex;
	flex-direction:column;
	gap:4px;
	padding:20px 22px;
	border:1px solid var(--elvis-n-750);
	border-radius:var(--elvis-radius-lg);
}

.elvis-office-country{
	display:flex;
	align-items:center;
	gap:10px;
	color:var(--elvis-highlight);
	font-size:12px;
	font-weight:700;
	letter-spacing:0.1em;
	text-transform:uppercase;
}

.elvis-office-name{color:var(--elvis-n-250);font-size:14px}
.elvis-office-address{color:var(--elvis-n-400);font-size:14px;line-height:1.5}
.elvis-office-phone,
.elvis-office-phone a{color:var(--elvis-n-400);font-size:14px}

.elvis-footer-bottom{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:24px;
	padding-top:28px;
	border-top:1px solid var(--elvis-n-750);
	color:var(--elvis-n-400);
	font-size:13px;
}

.elvis-footer-legal{display:flex;flex-wrap:wrap;align-items:center;gap:24px}
.elvis-footer-legal>a{color:var(--elvis-n-400)}
.elvis-footer-region{display:flex;align-items:center}

/* Between phone and full desktop the columns wrap under the brand. */
@media (max-width:1239px){
	.elvis-footer-top{flex-wrap:wrap}
	.elvis-footer-brand{width:100%;max-width:420px}
	.elvis-footer-columns{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));row-gap:36px}
}

/* Phone footer (home-mobile.html). */
@media (max-width:767px){
	.elvis-footer-inner{gap:20px;padding-top:36px;padding-bottom:28px}
	.elvis-footer-brand{gap:20px}
	.elvis-footer-brand img{height:28px}
	.elvis-footer-about{color:var(--elvis-n-250);font-size:14px;line-height:1.55}

	.elvis-footer-social,
	.elvis-footer-columns,
	.elvis-footer-region{display:none}

	.elvis-footer-offices{grid-template-columns:1fr;gap:20px}
	.elvis-office{gap:0;padding:0;border:0;border-radius:0;font-size:13px;line-height:1.5}
	.elvis-office-country{gap:8px;font-size:13px}
	.elvis-office .elvis-flag{display:none}
	.elvis-office-name{display:none}
	.elvis-office-address{color:var(--elvis-n-250);font-size:13px}
	.elvis-office-phone,
	.elvis-office-phone a{font-size:13px}

	.elvis-footer-bottom{flex-direction:column-reverse;align-items:stretch;gap:20px;padding-top:0;border-top:0}
	.elvis-footer-legal{gap:18px}
	.elvis-footer-copyright{padding-top:16px;border-top:1px solid var(--elvis-n-750)}
}

/* ---- Floating chat button (chatbot slot) ---- */
.elvis-chat-button{
	position:fixed;
	right:24px;
	bottom:24px;
	z-index:40;
	display:flex;
	align-items:center;
	justify-content:center;
	width:64px;
	height:64px;
	border:2px solid var(--elvis-u-line);
	border-radius:50%;
	background:var(--elvis-u-surface);
	box-shadow:0 18px 36px -12px rgba(20,17,43,.6);
}

@media (max-width:767px){
	.elvis-chat-button{right:16px;bottom:16px;width:56px;height:56px}
}

/* ==========================================================================
   8. Sections
   A section's CSS is written the first time a page needs it: here if the
   part is used on 10 or more pages across families, in the family file if
   only one family uses it, otherwise in sections/<part>.css (see the top
   of this file). Shared pieces first (heading, links, chips,
   ticks, cards), then one block per part. Phone rules (below 768px)
   follow home-mobile.html.
   ========================================================================== */

/* ---- Section heading (components/section-heading) ---- */
.elvis-heading{display:flex;flex-direction:column;gap:18px;max-width:760px}
.elvis-heading--720{max-width:720px}
.elvis-heading--780{max-width:780px}
.elvis-split-text .elvis-heading{gap:22px}

.elvis-heading-eyebrow{
	display:flex;
	align-items:center;
	gap:12px;
	color:var(--elvis-highlight-ink);
	font-family:var(--elvis-font-heading);
	font-size:13px;
	font-weight:600;
	letter-spacing:0.12em;
	text-transform:uppercase;
}

.elvis-heading-bar{display:block;flex-shrink:0;width:28px;height:6px;border-radius:1px;background:var(--elvis-highlight)}

.elvis-heading[class*="elvis-tone-"] .elvis-heading-eyebrow{color:var(--elvis-tone-text)}
.elvis-heading[class*="elvis-tone-"] .elvis-heading-bar{background:var(--elvis-tone)}

.elvis-heading-title{
	margin:0;
	color:var(--elvis-color-text);
	font-family:var(--elvis-font-heading);
	font-size:40px;
	font-weight:700;
	line-height:1.12;
	letter-spacing:-0.03em;
	text-wrap:balance;
}

.elvis-heading--small .elvis-heading-title{font-size:38px;line-height:1.15}
.elvis-heading--large .elvis-heading-title{font-size:46px;line-height:1.08}

.elvis-heading-highlight{text-decoration:underline 0.09em var(--elvis-highlight);text-underline-offset:0.14em}

.elvis-heading-lead{margin:0;color:var(--elvis-color-text-body);font-size:17px;line-height:1.6}
.elvis-heading--narrow .elvis-heading-lead{max-width:480px}
.elvis-heading--small .elvis-heading-lead{max-width:460px;font-size:16.5px}
.elvis-heading--large .elvis-heading-lead{max-width:640px}

.elvis-heading--dark .elvis-heading-eyebrow{color:var(--elvis-highlight)}
.elvis-heading--dark .elvis-heading-title{color:#FFFFFF}
.elvis-heading--dark .elvis-heading-lead{color:var(--elvis-n-325)}

.elvis-heading--dark .elvis-heading-highlight{
	background:linear-gradient(90deg,#B9A2FF 0%,#7FF2E5 100%);
	-webkit-background-clip:text;
	background-clip:text;
	color:transparent;
	text-decoration:none;
}

@media (max-width:767px){
	.elvis-heading{gap:14px}
	.elvis-heading-title,
	.elvis-heading--small .elvis-heading-title{font-size:30px;line-height:1.12}
	.elvis-heading--large .elvis-heading-title{font-size:32px;line-height:1.1}
	.elvis-heading-lead,
	.elvis-heading--small .elvis-heading-lead{font-size:16px}
}

/* ---- Arrow links, link rows ---- */
.elvis-link-arrow{
	display:inline-flex;
	align-items:center;
	gap:6px;
	color:var(--elvis-highlight-ink);
	font-size:13.5px;
	font-weight:700;
}

.elvis-link-arrow:hover{color:var(--elvis-n-950)}
.elvis-link-arrow--light,
.elvis-link-arrow--light:hover{color:var(--elvis-highlight)}

.elvis-link-row{display:flex;flex-wrap:wrap;align-items:center;gap:22px}
.elvis-link-row--labelled{gap:28px}
.elvis-link-row-label{font-size:14px;font-weight:700}

/* ---- Chips ---- */
.elvis-chip-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}

.elvis-chip{
	display:inline-flex;
	align-items:center;
	padding:7px 14px;
	border:1px solid var(--elvis-n-200);
	border-radius:999px;
	background:#FFFFFF;
	color:var(--elvis-n-725);
	font-size:13px;
	font-weight:600;
	line-height:1.5;
}

.elvis-chip--link{transition:transform .15s ease,border-color .15s ease,background .15s ease}
.elvis-chip--link:hover{transform:translateY(-2px);border-color:#00C5B4;background:#E3F8F5;color:#0A0E0E}

.elvis-chip--outline-dark{border-color:var(--elvis-n-700);background:transparent;color:var(--elvis-n-250)}
.elvis-chip--small{padding:5px 12px;font-size:12px}
.elvis-chip--violet{padding:6px 12px;border-color:#3E3A6B;background:transparent;color:#D9D0FF;font-size:12.5px}
.elvis-chip--tone{padding:6px 12px;border:0;background:var(--elvis-tone-tint);color:var(--elvis-tone);font-size:12.5px}

/* ---- Tick lists (components/check-list) ---- */
.elvis-check-list{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}

.elvis-check-list li{
	display:flex;
	align-items:flex-start;
	gap:10px;
	color:var(--elvis-n-725);
	font-size:15px;
	font-weight:500;
	line-height:1.45;
}

.elvis-check-list .elvis-icon{color:var(--elvis-check,var(--elvis-highlight-ink))}
.elvis-check-list--small{gap:9px}
.elvis-check-list--small li{font-size:13px}
.elvis-check-list--light li{color:var(--elvis-n-100)}
.elvis-check-list--light .elvis-icon{color:var(--elvis-highlight)}

/* ---- Statuses ---- */
.elvis-status{border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700}
.elvis-status--success{background:#DDF5E7;color:#0B6B3E}

/* ---- Phone carousel (home-mobile.html scroll-snap cards) ---- */
@media (max-width:767px){
	.elvis-carousel{
		display:flex!important;
		gap:14px;
		margin:0 calc(var(--elvis-gutter) * -1);
		padding:4px var(--elvis-gutter) 18px;
		overflow-x:auto;
		scroll-snap-type:x mandatory;
		scroll-padding:0 var(--elvis-gutter);
		-webkit-overflow-scrolling:touch;
	}

	.elvis-carousel>*{flex:0 0 78%;scroll-snap-align:start}
}

/* ---- Logo strip (sections/logo-strip) ---- */
.elvis-logo-strip{border-top:1px solid var(--elvis-n-125);border-bottom:1px solid var(--elvis-n-125);background:#FFFFFF}
.elvis-logo-strip-inner{display:flex;align-items:center;gap:40px;padding-top:28px;padding-bottom:28px}
.elvis-logo-strip-label{flex-shrink:0;width:230px;color:var(--elvis-n-600);font-size:14px;font-weight:600;line-height:1.5}

.elvis-logo-strip-mask{
	flex-grow:1;
	min-width:0;
	overflow:hidden;
	-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
	mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}

.elvis-logo-track{display:flex;align-items:center;gap:64px;margin:0;padding:0;list-style:none}
.elvis-logo-track.elvis-marquee{--elvis-marquee-duration:46s;--elvis-marquee-gap:64px}
.elvis-logo-strip-mask:hover .elvis-marquee{animation-play-state:paused}

.elvis-logo{display:flex;flex-shrink:0;align-items:center;gap:10px;color:#7A8786}

.elvis-logo span{
	font-family:var(--elvis-font-heading);
	font-size:19px;
	font-weight:700;
	letter-spacing:-0.02em;
	white-space:nowrap;
}

@media (max-width:767px){
	.elvis-logo-strip-inner{flex-direction:column;align-items:flex-start;gap:14px;padding-top:18px;padding-bottom:18px}
	.elvis-logo-strip-label{width:auto;font-size:13px}
	.elvis-logo-strip-mask{align-self:stretch}
	.elvis-logo-track{gap:40px}
	.elvis-logo-track.elvis-marquee{--elvis-marquee-gap:40px}
}

/* ---- Link cards (sections/link-cards) ---- */
.elvis-cards{display:grid;gap:20px}
.elvis-cards--feature{grid-template-columns:repeat(6,minmax(0,1fr))}
.elvis-cards--compact{grid-template-columns:repeat(4,minmax(0,1fr))}

.elvis-card{
	--elvis-check:var(--elvis-tone);
	display:flex;
	flex-direction:column;
	gap:18px;
	padding:28px;
	border:1px solid var(--elvis-n-125);
	border-radius:26px;
	background:#FFFFFF;
	color:var(--elvis-n-950);
}

.elvis-card:hover{color:var(--elvis-n-950)}
.elvis-card--span-2{grid-column:span 2}
.elvis-card--span-3{grid-column:span 3}

.elvis-card-top{display:flex;justify-content:space-between;align-items:center;gap:12px}

.elvis-card-icon{
	display:flex;
	flex-shrink:0;
	align-items:center;
	justify-content:center;
	width:52px;
	height:52px;
	border-radius:15px;
	background:var(--elvis-tone-tint);
	color:var(--elvis-tone);
}

.elvis-card-tag{
	padding:5px 10px;
	border-radius:999px;
	background:var(--elvis-tone-tint);
	color:var(--elvis-tone-ink);
	font-size:11px;
	font-weight:700;
	white-space:nowrap;
}

.elvis-card-body{display:flex;flex-direction:column;gap:8px}
.elvis-card-title{font-family:var(--elvis-font-heading);font-size:22px;font-weight:600;line-height:1.2;letter-spacing:-0.02em}
.elvis-card-text{color:var(--elvis-n-600);font-size:14.5px;line-height:1.55}
.elvis-card-list{margin-top:auto}
.elvis-card-link{display:flex}
.elvis-card .elvis-link-arrow{color:var(--elvis-tone)}

/* Compact cards: round icon, divider, and the link at the bottom. */
.elvis-cards--compact .elvis-card{gap:16px;padding:24px;border-radius:22px}
.elvis-cards--compact .elvis-card-top{align-items:flex-start}
.elvis-cards--compact .elvis-card-icon{width:48px;height:48px;border-radius:50%}
.elvis-cards--compact .elvis-card-tag{background:#E3F8F5;color:#00584F}
.elvis-cards--compact .elvis-card-body{gap:6px}
.elvis-cards--compact .elvis-card-title{font-size:19px;line-height:1.25}
.elvis-cards--compact .elvis-card-text{font-size:14px}
.elvis-cards--compact .elvis-card-list{margin-top:0}
.elvis-cards--compact .elvis-card-link{display:block;margin-top:auto;padding-top:4px}
.elvis-card-divider{height:1px;background:var(--elvis-n-75)}

/* Dark band under the cards. */
.elvis-band{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:32px;
	padding:22px 32px;
	border-radius:22px;
	background:var(--elvis-n-950);
	color:#FFFFFF;
}

.elvis-band:hover{color:#FFFFFF}
.elvis-band-main{display:flex;align-items:center;gap:16px}

.elvis-band-icon{
	display:flex;
	flex-shrink:0;
	align-items:center;
	justify-content:center;
	width:44px;
	height:44px;
	border:1px solid var(--elvis-n-750);
	border-radius:12px;
	background:var(--elvis-n-875);
	color:#00C5B4;
}

.elvis-band-text{display:flex;flex-direction:column;gap:2px}
.elvis-band-title{font-family:var(--elvis-font-heading);font-size:17px;font-weight:600;letter-spacing:-0.015em}
.elvis-band-sub{color:var(--elvis-n-325);font-size:14px}
.elvis-band-end{display:flex;flex-shrink:0;align-items:center;gap:10px}
.elvis-band .elvis-chip{color:var(--elvis-n-100)}
.elvis-band-link,
.elvis-band-link:hover{margin-left:6px;color:#00C5B4;font-size:14px}

@media (max-width:1023px){
	.elvis-cards--feature{grid-template-columns:repeat(2,minmax(0,1fr))}
	.elvis-card--span-2,
	.elvis-card--span-3{grid-column:span 1}
	.elvis-cards--compact{grid-template-columns:repeat(2,minmax(0,1fr))}
	.elvis-band{flex-direction:column;align-items:flex-start}
	.elvis-band-end{flex-wrap:wrap}
}

/* Phone (home-mobile.html): carousel cards show icon, tag, title, text and
   link only; the lead paragraph and the link row are left out. */
@media (max-width:767px){
	.elvis-card{padding:22px;border-radius:22px}
	.elvis-card-title{font-size:19px}
	.elvis-card-list,
	.elvis-card-divider,
	.elvis-link-cards .elvis-heading-lead,
	.elvis-link-cards .elvis-link-row{display:none}
	.elvis-card-link{margin-top:auto}
	.elvis-band{gap:16px;padding:20px}
	.elvis-band .elvis-chip{display:none}
}

/* ---- Media split (sections/media-split) ---- */
.elvis-media-split{--elvis-check:var(--elvis-tone-text)}
.elvis-media-split .elvis-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.elvis-media-split-media{position:relative;padding:0 0 28px 28px}
.elvis-media-split--start .elvis-media-split-media{order:-1}

.elvis-photo-slot{
	position:relative;
	overflow:hidden;
	aspect-ratio:6/5;
	border-radius:24px;
	background:var(--elvis-tone-tint,var(--elvis-n-50));
}

.elvis-photo-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.elvis-status-card{
	position:absolute;
	bottom:-28px;
	left:-28px;
	display:flex;
	flex-direction:column;
	gap:10px;
	width:268px;
	padding:16px;
	border:1px solid var(--elvis-n-125);
	border-radius:18px;
	background:#FFFFFF;
	box-shadow:0 30px 60px -28px rgba(10,14,14,.4);
}

.elvis-status-card-head,
.elvis-status-card-row{display:flex;justify-content:space-between;align-items:center}
.elvis-status-card-title{font-family:var(--elvis-font-heading);font-size:13px;font-weight:600}
.elvis-status-card-badge{padding:3px 9px;border-radius:999px;background:var(--elvis-tone-tint);color:var(--elvis-tone-ink);font-size:10.5px;font-weight:700}
.elvis-status-card-row{font-size:13px;font-weight:600}
.elvis-status-card-value{color:#008300}
.elvis-status-card-bar{height:6px;overflow:hidden;border-radius:999px;background:var(--elvis-n-75)}
.elvis-status-card-bar span{display:block;height:100%;background:#00C5B4}
.elvis-status-card-divider{height:1px;background:var(--elvis-n-75)}
.elvis-status-card-note{display:flex;align-items:center;gap:8px;color:var(--elvis-n-600);font-size:12.5px}
.elvis-status-card-note .elvis-icon{color:var(--elvis-highlight-ink)}

/* ---- Steps (sections/steps) ---- */
.elvis-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}

.elvis-step{
	display:flex;
	flex-direction:column;
	gap:14px;
	padding:24px;
	border:1px solid var(--elvis-n-125);
	border-top:5px solid var(--elvis-tone);
	border-radius:22px;
	background:#FFFFFF;
}

.elvis-step-number{color:var(--elvis-tone);font-family:var(--elvis-font-heading);font-size:34px;font-weight:700;letter-spacing:-0.03em}
.elvis-step-title{font-family:var(--elvis-font-heading);font-size:19px;font-weight:600;letter-spacing:-0.02em}
.elvis-step-text{color:var(--elvis-n-600);font-size:14.5px;line-height:1.55}

.elvis-step-outcome{
	align-self:flex-start;
	margin-top:auto;
	padding:5px 12px;
	border-radius:999px;
	background:var(--elvis-tone-tint);
	color:var(--elvis-tone-ink);
	font-size:12px;
	font-weight:700;
}

@media (max-width:1023px){
	.elvis-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:767px){
	.elvis-steps{grid-template-columns:1fr}
}

/* ---- Results (sections/results) ---- */
.elvis-results{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:stretch}

.elvis-quote{
	display:flex;
	flex-direction:column;
	gap:20px;
	margin:0;
	padding:34px;
	border-radius:26px;
	background:var(--elvis-n-950);
	color:#FFFFFF;
}

.elvis-quote-mark{color:#00C5B4;font-family:var(--elvis-font-heading);font-size:60px;line-height:.6}
.elvis-quote-text{margin:0;font-family:var(--elvis-font-heading);font-size:21px;font-weight:500;line-height:1.45}
.elvis-quote-person{display:flex;align-items:center;gap:12px;color:inherit;font-size:16px;font-style:normal;line-height:1.5}
.elvis-quote-avatar{flex-shrink:0;width:44px;height:44px;border-radius:50%;background:var(--elvis-n-750)}
.elvis-quote-name{display:block;font-weight:700}
.elvis-quote-role{display:block;color:var(--elvis-n-400);font-size:13px}

.elvis-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0}

.elvis-stat{
	display:flex;
	flex-direction:column-reverse;
	justify-content:flex-end;
	padding:22px;
	border:1px solid var(--elvis-n-125);
	border-top:5px solid var(--elvis-tone);
	border-radius:20px;
	background:#FFFFFF;
}

.elvis-stat-value{margin:0;font-family:var(--elvis-font-heading);font-size:36px;font-weight:700;letter-spacing:-0.03em}
.elvis-stat-label{color:var(--elvis-n-600);font-size:14px}
.elvis-results+.elvis-link-row{gap:28px}

@media (max-width:1023px){
	.elvis-results{grid-template-columns:1fr}
}

/* ---- FAQ (sections/faq) ---- */
.elvis-faq-layout{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px;align-items:start}
.elvis-faq-intro{display:flex;flex-direction:column;gap:18px}
/* A FAQ heading with a lead paragraph wraps normally (Home); without one it
   stays balanced, like other headings (module and solutions prototypes). */
.elvis-faq-intro .elvis-heading:has(.elvis-heading-lead) .elvis-heading-title{text-wrap:wrap}

@media (max-width:1023px){
	.elvis-faq-layout{grid-template-columns:1fr;gap:28px}
}

@media (max-width:767px){
	.elvis-faq>summary{padding:16px 18px;font-size:15.5px}
	.elvis-faq-answer{padding:0 18px 18px;font-size:15px}
	.elvis-faq-intro .elvis-btn{width:100%}
}

/* ---- Demo form (sections/demo-form) ---- */
.elvis-demo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}

.elvis-form-card{
	display:flex;
	flex-direction:column;
	gap:22px;
	padding:32px;
	border-radius:28px;
	background:#FFFFFF;
	color:var(--elvis-n-950);
}

.elvis-form-title{font-family:var(--elvis-font-heading);font-size:22px;font-weight:600;letter-spacing:-0.02em}
.elvis-form{display:flex;flex-direction:column;gap:22px}
.elvis-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.elvis-form-field{display:flex;flex-direction:column;gap:7px}
.elvis-form-field--wide{grid-column:span 2}
.elvis-form-label{display:block;color:var(--elvis-n-725);font-size:14px;font-weight:600;line-height:1.5}
.elvis-form-required{color:#B3261E}

:is(input,select,textarea).elvis-field[aria-invalid="true"]{border-color:#B3261E}
.elvis-form-error{margin:0;color:#B3261E;font-size:13px;font-weight:600}
.elvis-form-status{margin:0;color:var(--elvis-highlight-ink);font-size:14px;font-weight:600}
.elvis-form-status:empty{display:none}
.elvis-form-privacy{margin:0;color:var(--elvis-n-500);font-size:13px;line-height:1.5}
.elvis-form .elvis-btn--submit{width:100%;justify-content:flex-start}

@media (max-width:1023px){
	.elvis-demo{grid-template-columns:1fr;gap:40px}
}

@media (max-width:767px){
	.elvis-demo{gap:28px}
	.elvis-form-card{padding:22px;border-radius:22px}
	.elvis-form-grid{grid-template-columns:1fr}
	.elvis-form-field--wide{grid-column:auto}
	.elvis-form .elvis-btn{width:100%}
}

/* ---- Status pills ---- */
.elvis-pill{
	flex-shrink:0;
	padding:4px 10px;
	border-radius:999px;
	font-size:11px;
	font-weight:700;
	letter-spacing:0.02em;
	white-space:nowrap;
}

.elvis-pill--success{background:#DDF5E7;color:#0B6B3E}
.elvis-pill--warning{background:#FFF3D6;color:#8A5A00}
.elvis-pill--danger{background:#FDE7E5;color:#B3261E}
.elvis-pill--neutral{background:var(--elvis-accent-tint);color:var(--elvis-highlight-ink-deep)}

.elvis-chip--plain{border-color:var(--elvis-n-125);background:transparent}

/* Text link with an arrow, larger than .elvis-link-arrow. */
.elvis-text-link{display:inline-flex;align-items:center;gap:8px;color:var(--elvis-n-950);font-size:15px;font-weight:700}
.elvis-text-link .elvis-icon{color:var(--elvis-highlight-ink)}

/* ---- Screenshot slot (components/screen-slot) ---- */
.elvis-screen{
	position:relative;
	overflow:hidden;
	border:1px solid #D5DEEC;
	border-radius:14px;
	background:#FFFFFF;
	box-shadow:0 40px 70px -34px rgba(20,40,90,.45);
}

.elvis-screen-bar{
	display:flex;
	align-items:center;
	gap:6px;
	height:34px;
	padding:0 14px;
	border-bottom:1px solid #D5DEEC;
	background:#EEF2F8;
}

.elvis-screen-bar i{display:block;width:10px;height:10px;border-radius:50%}
.elvis-screen-bar i:nth-child(1){background:#F08A7E}
.elvis-screen-bar i:nth-child(2){background:#F5C04A}
.elvis-screen-bar i:nth-child(3){background:#6FD06F}

.elvis-screen-url{
	flex:1;
	max-width:280px;
	height:20px;
	margin-left:14px;
	padding:0 12px;
	overflow:hidden;
	border:1px solid #D5DEEC;
	border-radius:10px;
	background:#FFFFFF;
	color:#6B7A93;
	font-size:11px;
	line-height:18px;
}

.elvis-screen-body{position:relative;aspect-ratio:16/10}

.elvis-screen-wireframe,
.elvis-screen-body img{position:absolute;inset:0;width:100%;height:100%}

.elvis-screen-body img{object-fit:cover;object-position:top}

.elvis-screen-tag,
.elvis-photo-slot-tag{
	position:absolute;
	bottom:10px;
	left:10px;
	z-index:3;
	padding:4px 10px;
	border:1px dashed rgba(10,14,14,.35);
	border-radius:999px;
	background:rgba(255,255,255,.9);
	color:#0A0E0E;
	font:700 10.5px ui-monospace,SFMono-Regular,Menlo,monospace;
	line-height:1.5;
	letter-spacing:0.04em;
	pointer-events:none;
}

/* A photo slot's label sits at the top left. */
.elvis-photo-slot-tag{top:12px;left:12px;bottom:auto}

/* ---- Sample-data card (components/sample-card) ---- */
.elvis-sample{
	display:flex;
	flex-direction:column;
	gap:14px;
	padding:22px;
	border:1px solid var(--elvis-n-125);
	border-radius:22px;
	background:#FFFFFF;
	box-shadow:0 34px 60px -40px rgba(10,14,14,.45);
	color:var(--elvis-n-950);
}

.elvis-sample-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.elvis-sample-title{font-family:var(--elvis-font-heading);font-size:15px;font-weight:600;letter-spacing:-0.01em}

.elvis-sample-rows{display:flex;flex-direction:column;gap:14px;margin:0;padding:0;list-style:none}
.elvis-sample-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:12px}
.elvis-sample-row+.elvis-sample-row{border-top:1px solid var(--elvis-n-75)}
.elvis-sample-row-text{display:flex;flex-direction:column;min-width:0}
.elvis-sample-row-title{font-size:14px;font-weight:600}
.elvis-sample-row-sub{color:var(--elvis-n-500);font-size:12.5px}

.elvis-sample-timeline{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.elvis-sample-step{display:flex;align-items:flex-start;gap:14px}
.elvis-sample-step-marker{display:flex;flex-direction:column;align-self:stretch;align-items:center;gap:4px}

.elvis-sample-step-number{
	display:flex;
	flex-shrink:0;
	align-items:center;
	justify-content:center;
	width:30px;
	height:30px;
	border-radius:50%;
	background:var(--elvis-n-950);
	color:#FFFFFF;
	font-size:13px;
	font-weight:700;
}

.elvis-sample-step:not(:last-child) .elvis-sample-step-marker::after{
	content:"";
	flex-grow:1;
	width:2px;
	min-height:14px;
	background:var(--elvis-n-125);
}

.elvis-sample-step-text{display:flex;flex-direction:column;gap:2px;padding-bottom:6px}
.elvis-sample-step-title{font-size:14.5px;font-weight:600}
.elvis-sample-step-sub{color:var(--elvis-n-500);font-size:13px;line-height:1.45}

.elvis-sample-chips{display:flex;flex-wrap:wrap;gap:8px}

/* On dark sections the card turns dark too. */
.elvis-on-dark .elvis-sample{border-color:var(--elvis-n-750);background:var(--elvis-n-900);color:#FFFFFF}
.elvis-on-dark .elvis-sample-row+.elvis-sample-row{border-top-color:var(--elvis-n-750)}
.elvis-on-dark .elvis-sample-row-sub{color:var(--elvis-n-400)}
.elvis-on-dark .elvis-sample .elvis-pill{background:var(--elvis-n-750);color:var(--elvis-accent-soft)}

.elvis-sample-pipeline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.elvis-sample-column{display:flex;flex-direction:column;gap:10px;min-width:0;padding:12px;border-radius:14px;background:var(--elvis-n-50)}

.elvis-sample-column-head{
	display:flex;
	justify-content:space-between;
	color:var(--elvis-n-500);
	font-size:11px;
	font-weight:700;
	letter-spacing:0.08em;
	text-transform:uppercase;
}

.elvis-sample-item{
	display:flex;
	flex-direction:column;
	gap:8px;
	padding:10px 12px;
	border:1px solid var(--elvis-n-125);
	border-radius:12px;
	background:#FFFFFF;
	font-size:13px;
	font-weight:600;
	line-height:1.35;
}

.elvis-sample-bars{display:flex;flex-direction:column;gap:14px;margin:0;padding:0;list-style:none}
.elvis-sample-bar{display:flex;flex-direction:column;gap:6px}
.elvis-sample-bar-head{display:flex;justify-content:space-between;font-size:13px;font-weight:600}
.elvis-sample-bar-value{color:var(--elvis-n-500)}
.elvis-sample-bar-track{display:block;height:8px;overflow:hidden;border-radius:99px;background:var(--elvis-n-50)}
.elvis-sample-bar-fill{display:block;height:8px;border-radius:99px;background:var(--elvis-accent)}

.elvis-sample-pipeline--4{grid-template-columns:repeat(4,minmax(0,1fr))}

.elvis-sample-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0}
.elvis-sample-stat{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:2px;padding:16px 18px;border-radius:16px;background:var(--elvis-n-50)}
.elvis-sample-stat dd{margin:0;font-family:var(--elvis-font-heading);font-size:28px;font-weight:700;letter-spacing:-0.03em}
.elvis-sample-stat dt{color:var(--elvis-n-500);font-size:13px}

.elvis-sample-checklist{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.elvis-sample-check{display:flex;align-items:center;gap:12px;font-size:14.5px;font-weight:500}

.elvis-sample-check-mark{
	display:flex;
	flex-shrink:0;
	align-items:center;
	justify-content:center;
	width:22px;
	height:22px;
	border:2px solid var(--elvis-n-275);
	border-radius:50%;
}

.elvis-sample-check.is-done .elvis-sample-check-mark{border:0;background:var(--elvis-accent);color:var(--elvis-on-accent)}

.elvis-sample-chat{display:flex;flex-direction:column;gap:10px}
.elvis-sample-message{display:flex}
.elvis-sample-message--end{justify-content:flex-end}

.elvis-sample-message>div{
	max-width:86%;
	padding:11px 15px;
	border-radius:16px 16px 16px 4px;
	background:var(--elvis-accent-tint);
	color:var(--elvis-accent-dark);
	font-size:14px;
	line-height:1.5;
}

.elvis-sample-message--end>div{border-radius:16px 16px 4px;background:var(--elvis-n-950);color:#FFFFFF}

.elvis-sample-week{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.elvis-sample-week--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.elvis-sample-week--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.elvis-sample-day{display:flex;flex-direction:column;gap:8px;min-width:0}
.elvis-sample-day-title{color:var(--elvis-n-500);font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase}

.elvis-sample-day-item{
	padding:8px 10px;
	border-radius:10px;
	background:var(--elvis-accent-tint);
	color:var(--elvis-accent-dark);
	font-size:12.5px;
	font-weight:600;
	line-height:1.3;
}

/* Phone (no prototype): the pipeline keeps three columns, tighter; four
   pipeline columns and the week become 2 x 2. A three-day week keeps its
   three columns; a five-day week becomes 3 + 2. */
@media (max-width:767px){
	.elvis-sample-pipeline{gap:6px}
	.elvis-sample-pipeline--4,
	.elvis-sample-week{grid-template-columns:repeat(2,minmax(0,1fr))}
	.elvis-sample-week--3,
	.elvis-sample-week--5{grid-template-columns:repeat(3,minmax(0,1fr))}
	.elvis-sample-column{gap:8px;padding:8px}
	.elvis-sample-column-head{font-size:10px;letter-spacing:0.04em}
	.elvis-sample-item{padding:8px;font-size:12px;overflow-wrap:break-word}
	.elvis-sample-item .elvis-pill{padding:3px 7px;font-size:10px}
}

/* ---- Card grid (sections/card-grid) ---- */
.elvis-card-grid{display:grid;gap:20px}
.elvis-card-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.elvis-card-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.elvis-card-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}

.elvis-grid-card{
	display:flex;
	flex-direction:column;
	gap:16px;
	padding:26px;
	border:1px solid var(--elvis-n-125);
	border-radius:22px;
	background:#FFFFFF;
	color:var(--elvis-n-950);
}

.elvis-grid-card:hover{color:var(--elvis-n-950)}
.elvis-grid-card--step{gap:12px;padding:24px}
.elvis-grid-card--related{gap:14px;padding:24px}

/* Icon tile: dark by default; families can tint it (.elvis-icon-tile). */
.elvis-icon-tile{
	display:flex;
	flex-shrink:0;
	align-items:center;
	justify-content:center;
	width:48px;
	height:48px;
	border-radius:14px;
	background:var(--elvis-n-950);
	color:var(--elvis-highlight);
}

.elvis-icon-tile--small{width:44px;height:44px;border-radius:12px}

.elvis-grid-card-top{display:flex;justify-content:space-between;align-items:center}
.elvis-grid-card-body{display:flex;flex-direction:column;gap:6px}
.elvis-grid-card-title{font-family:var(--elvis-font-heading);font-size:19px;font-weight:600;line-height:1.25;letter-spacing:-0.02em}
.elvis-grid-card-title--small{font-size:18px}
.elvis-grid-card-title--list{font-size:18px;line-height:1.5}
.elvis-grid-card-text{color:var(--elvis-n-600);font-size:14.5px;line-height:1.55}

/* Tool cards (role pages' "Your toolkit"): a small dark icon beside the text. */
.elvis-grid-card--tool{flex-direction:row;align-items:flex-start;gap:14px;padding:18px;border-radius:18px}
.elvis-card-grid:has(>.elvis-grid-card--tool){gap:16px}

.elvis-grid-card-tool-icon{
	display:flex;
	flex-shrink:0;
	align-items:center;
	justify-content:center;
	width:40px;
	height:40px;
	border-radius:11px;
	background:var(--elvis-n-950);
	color:var(--elvis-highlight);
}

.elvis-grid-card-body--tight{gap:4px}
.elvis-grid-card-title--tool{font-size:16px;line-height:1.5;letter-spacing:-0.01em}
.elvis-grid-card-text--small{font-size:13.5px;line-height:1.45}

/* Compact related cards (Platform overview module groups). */
.elvis-grid-card--compact{padding:22px}
.elvis-grid-card--compact .elvis-grid-card-title{font-size:17px}
.elvis-grid-card--compact .elvis-grid-card-text{font-size:14px;line-height:1.5}
.elvis-grid-card-number{color:var(--elvis-highlight-ink);font-family:var(--elvis-font-heading);font-size:14px;font-weight:700;letter-spacing:0.06em}
.elvis-grid-card-link{display:flex;align-items:center;gap:8px;margin-top:auto;font-size:14px;font-weight:700}

.elvis-grid-card-link .elvis-icon,
.elvis-grid-card-arrow{color:var(--elvis-highlight-ink)}

/* Tick lists inside cards and feature splits: 16px ticks. */
.elvis-check-list--card li{font-size:14.5px;line-height:1.5}
.elvis-check-list--feature li{font-size:15.5px;line-height:1.5}

.elvis-check-list--card .elvis-icon,
.elvis-check-list--feature .elvis-icon{width:16px;height:16px;margin-top:2px;stroke-width:2.6}

@media (max-width:1023px){
	.elvis-card-grid--3,
	.elvis-card-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:767px){
	.elvis-card-grid--2,
	.elvis-card-grid--3,
	.elvis-card-grid--4{grid-template-columns:1fr;gap:12px}
	.elvis-grid-card{padding:22px}
	.elvis-grid-card--tool{padding:18px}
}

/* ---- Feature split (sections/feature-split) ---- */
.elvis-feature-split-inner{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	gap:72px;
	align-items:center;
}

.elvis-feature-split--start .elvis-feature-split-media{order:-1}
.elvis-feature-split-text{display:flex;flex-direction:column;align-items:flex-start;gap:26px}
.elvis-feature-split-buttons{display:flex;flex-wrap:wrap;gap:12px}

/* Dark splits (background: dark): light tick list and links. */
.elvis-on-dark .elvis-check-list--feature li{color:var(--elvis-n-100)}
.elvis-on-dark .elvis-text-link{color:#FFFFFF}

/* Tablet and phone: stacked, text first. */
@media (max-width:1023px){
	.elvis-feature-split-inner{grid-template-columns:1fr;gap:40px}
	.elvis-feature-split--start .elvis-feature-split-media{order:0}
}

@media (max-width:767px){
	.elvis-feature-split-inner{gap:28px}
	.elvis-feature-split-text{gap:22px}
	.elvis-feature-split-buttons,
	.elvis-feature-split-buttons .elvis-btn{width:100%}
}

/* ---- Testimonial band (sections/testimonial-band) ---- */
.elvis-testimonial>.elvis-container{position:relative}
.elvis-testimonial-figure{display:flex;flex-direction:column;gap:28px;max-width:900px;margin:0}

.elvis-testimonial-quote{
	margin:0;
	padding:0;
	border:0;
	color:#FFFFFF;
	font-family:var(--elvis-font-heading);
	font-size:32px;
	font-weight:600;
	line-height:1.3;
	letter-spacing:-0.025em;
	text-wrap:balance;
}

.elvis-testimonial-person{display:flex;align-items:center;gap:14px;color:#FFFFFF;font-size:15px;font-style:normal;line-height:1.5}

.elvis-testimonial-avatar{
	display:flex;
	flex-shrink:0;
	align-items:center;
	justify-content:center;
	width:52px;
	height:52px;
	border:1px solid var(--elvis-n-700);
	border-radius:50%;
	background:var(--elvis-n-875);
	color:var(--elvis-highlight);
}

.elvis-testimonial-meta{display:flex;flex-direction:column}
.elvis-testimonial-name{font-weight:700}
.elvis-testimonial-role{color:var(--elvis-n-400);font-size:14px}

@media (max-width:767px){
	.elvis-testimonial-figure{gap:22px}
	.elvis-testimonial-quote{font-size:24px}
}

/* ---- Data table (sections/data-table) ---- */
.elvis-table-frame{overflow-x:auto;border:1px solid var(--elvis-n-125);border-radius:18px;background:#FFFFFF}
.elvis-table{width:100%;margin:0;border-collapse:collapse;background:none;font-size:inherit}

/* Cells: written at the specificity of Hello Elementor's table reset
   (cell borders, odd-row tint, hover tint), which they replace. */
.elvis-table-frame .elvis-table :is(thead,tbody)>tr>:is(th,td){
	padding:14px 20px;
	border:0;
	background:none;
	color:var(--elvis-n-600);
	font-size:14.5px;
	font-weight:400;
	line-height:1.5;
	text-align:left;
	vertical-align:top;
}

.elvis-table-frame .elvis-table :is(thead)>tr>:is(th){
	padding:16px 20px;
	background:var(--elvis-n-950);
	color:#FFFFFF;
	font-size:13px;
	font-weight:700;
	letter-spacing:0.06em;
	text-transform:uppercase;
}

.elvis-table tbody tr{border-top:1px solid var(--elvis-n-125);background:#FFFFFF}
.elvis-table tbody tr:nth-child(even){background:var(--elvis-n-40)}
.elvis-table-frame .elvis-table :is(tbody)>tr>:is(th){color:var(--elvis-n-950);font-weight:600}

/* Phone: the table keeps a readable width and scrolls inside its frame. */
@media (max-width:767px){
	.elvis-table{min-width:560px}
	.elvis-table-frame .elvis-table :is(thead,tbody)>tr>:is(th,td){padding:12px 16px}
	.elvis-table-frame .elvis-table :is(tbody)>tr>:is(th,td){font-size:14px}
}

/* ---- Product band (sections/product-band) ----
   The layout; each family that uses the band (platform, solutions) gives it
   its look in its family file. */
.elvis-product-band{position:relative;overflow:hidden;padding:84px 0;color:#FFFFFF}

.elvis-product-band-inner{
	position:relative;
	display:grid;
	grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
	gap:64px;
	align-items:center;
	max-width:var(--elvis-container);
	margin:0 auto;
	padding:0 var(--elvis-gutter);
}

.elvis-product-band-copy{display:flex;flex-direction:column;gap:20px}
.elvis-product-band-title{margin:0;color:#FFFFFF;font:700 38px/1.12 var(--elvis-font-heading);letter-spacing:-0.03em}
.elvis-product-band-text{margin:0;font-size:17px;line-height:1.6}
.elvis-product-band-pills{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}

/* Tablet and phone: stacked, text first. */
@media (max-width:1023px){
	.elvis-product-band-inner{grid-template-columns:1fr;gap:40px}
}

@media (max-width:767px){
	.elvis-product-band{padding:var(--elvis-section-space) 0}
	.elvis-product-band-inner{gap:28px}
	.elvis-product-band-title{font-size:30px}
}

/* ---- Call-to-action band (sections/cta-band) ---- */
.elvis-cta-band{padding:40px 0 88px}

.elvis-cta-card{
	position:relative;
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:40px;
	overflow:hidden;
	padding:56px;
	border-radius:28px;
	background:var(--elvis-n-950);
}

.elvis-cta-card::before{
	content:"";
	position:absolute;
	inset:0;
	background-image:radial-gradient(var(--elvis-n-850) 1px,transparent 1px);
	background-size:26px 26px;
	pointer-events:none;
}

.elvis-cta-copy{position:relative;display:flex;flex-direction:column;gap:14px;max-width:660px}

.elvis-cta-title{
	margin:0;
	color:#FFFFFF;
	font-family:var(--elvis-font-heading);
	font-size:38px;
	font-weight:700;
	line-height:1.12;
	letter-spacing:-0.03em;
	text-wrap:balance;
}

.elvis-cta-text{margin:0;color:var(--elvis-n-325);font-size:17px;line-height:1.6}
.elvis-cta-actions{position:relative;display:flex;flex-shrink:0;flex-wrap:wrap;gap:12px}
.elvis-cta-card .elvis-btn--line-dark .elvis-icon{color:var(--elvis-highlight)}

@media (max-width:1023px){
	.elvis-cta-card{flex-direction:column;align-items:flex-start;padding:40px}
}

@media (max-width:767px){
	.elvis-cta-band{padding:0 0 var(--elvis-section-space)}
	.elvis-cta-card{gap:24px;padding:28px 22px;border-radius:22px}
	.elvis-cta-title{font-size:30px}
	.elvis-cta-text{font-size:16px}
	.elvis-cta-actions,
	.elvis-cta-actions .elvis-btn{width:100%}
	.elvis-cta-actions .elvis-btn{height:54px}
}

/* ==========================================================================
   9. Animations
   Decorative only. elvis.js pauses anything inside .elvis-motion while it
   is off screen (.elvis-is-offscreen). Decisions H1–H3 in section 8.3 of
   docs/sitemap.md:
   - H1: the hero rise moves only; it never starts transparent, so it does
     not delay the largest paint.
   - H2: the "live" pulse is a transform/opacity pseudo-element, not a
     box-shadow animation.
   - H3: connector lines are static on phones.
   ========================================================================== */

@keyframes elvis-rise{from{transform:translateY(18px)}to{transform:none}}
@keyframes elvis-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes elvis-spin{to{transform:rotate(360deg)}}
@keyframes elvis-breathe{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.08);opacity:1}}
@keyframes elvis-pulse{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(2.6);opacity:0}}
@keyframes elvis-flow{to{stroke-dashoffset:-20}}
@keyframes elvis-flow-x{to{background-position:-24px 0}}
@keyframes elvis-feed-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes elvis-marquee{to{transform:translateX(-50%)}}

/* Hero visual rises once on load. */
.elvis-rise{animation:elvis-rise .7s ease both}

/* Chips, avatars and nodes bob up and down. */
.elvis-float{animation:elvis-float 6s ease-in-out infinite}
.elvis-float-2{animation:elvis-float 7.5s ease-in-out -2s infinite}
.elvis-float-3{animation:elvis-float 5.2s ease-in-out -1s infinite}

/* Dashed rings rotate. */
.elvis-spin{animation:elvis-spin 40s linear infinite}
.elvis-spin-reverse{animation:elvis-spin 60s linear infinite reverse}

/* Scale and opacity pulse. */
.elvis-breathe{animation:elvis-breathe 5s ease-in-out infinite}

/* "Live" dot: an expanding ring around it (a pseudo-element, so only
   transform and opacity animate), coloured by --elvis-pulse-color. It is a
   ring, not a disc, so the dot keeps its own colour. */
.elvis-pulse{position:relative}
.elvis-pulse::after{
	content:"";
	position:absolute;
	inset:-1px;
	border:2px solid var(--elvis-pulse-color,var(--elvis-highlight));
	border-radius:50%;
	pointer-events:none;
	animation:elvis-pulse 2s ease-out infinite;
}

/* SVG connector lines (stroke-dasharray set in the markup). */
.elvis-flow{animation:elvis-flow 1.6s linear infinite}

/* Dashed horizontal connector drawn with a background. */
.elvis-flow-x{
	height:3px;
	background-image:linear-gradient(90deg,var(--elvis-flow-color,#8E6BFF) 50%,transparent 50%);
	background-size:12px 3px;
	animation:elvis-flow-x 1s linear infinite;
}

/* Feed items fade in one after another, once. */
.elvis-feed>*{animation:elvis-feed-in .5s ease both}
.elvis-feed>*:nth-child(2){animation-delay:.12s}
.elvis-feed>*:nth-child(3){animation-delay:.24s}
.elvis-feed>*:nth-child(4){animation-delay:.36s}
.elvis-feed>*:nth-child(5){animation-delay:.48s}
.elvis-feed>*:nth-child(6){animation-delay:.6s}

/* Endless horizontal scroll (logo strip, text ticker). The content is
   repeated twice inside the track, which slides by half its width;
   --elvis-marquee-duration sets the speed. Items are spaced by a trailing
   margin (--elvis-marquee-gap), never by gap, so both halves are exactly
   equal and the loop has no seam. */
.elvis-marquee{
	display:flex;
	gap:0;
	width:max-content;
	animation:elvis-marquee var(--elvis-marquee-duration,40s) linear infinite;
}

.elvis-marquee>*{margin-right:var(--elvis-marquee-gap,0)}

/* Elvis U mascot. H6: each part plays three cycles after load, then
   stops; it plays again while its link or button is hovered or focused. */
@keyframes elvis-u-float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.025)}}
@keyframes elvis-u-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}}
@keyframes elvis-u-blink-fast{0%,40%,100%{transform:scaleY(1)}44%{transform:scaleY(.12)}}
@keyframes elvis-u-wide{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}
@keyframes elvis-u-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes elvis-u-twinkle{0%,100%{transform:scale(.85) rotate(0)}50%{transform:scale(1.12) rotate(45deg)}}
@keyframes elvis-u-spin{to{transform:rotate(360deg)}}
@keyframes elvis-u-shimmer{0%,100%{opacity:1}50%{opacity:.72}}
@keyframes elvis-u-talk{0%,100%{stroke-width:22}18%{stroke-width:28}34%{stroke-width:20}52%{stroke-width:27}70%{stroke-width:21}84%{stroke-width:25}}
@keyframes elvis-u-ripple{0%{opacity:.55;transform:scale(.55)}100%{opacity:0;transform:scale(1.55)}}
@keyframes elvis-u-ripple-soft{0%{opacity:.35;transform:scale(.7)}100%{opacity:0;transform:scale(1.35)}}

.elvis-u .elvis-u-body{animation:elvis-u-float 4.2s ease-in-out 3}
.elvis-u .elvis-u-eye{animation:elvis-u-blink 4.6s 3}
.elvis-u .elvis-u-spark{animation:elvis-u-twinkle 3.2s ease-in-out 3}

.elvis-u[data-state=listening] .elvis-u-eye{animation:elvis-u-wide 2.4s ease-in-out 3}
.elvis-u[data-state=listening] .elvis-u-spark{animation-duration:1.2s}
.elvis-u[data-state=listening] .elvis-u-rings circle{animation:elvis-u-ripple 2.4s ease-out 3}
.elvis-u[data-state=listening] .elvis-u-rings circle:nth-child(2){animation-delay:.8s}
.elvis-u[data-state=listening] .elvis-u-rings circle:nth-child(3){animation-delay:1.6s}

.elvis-u[data-state=thinking] .elvis-u-bowl{animation:elvis-u-shimmer 1.2s ease-in-out 3}
.elvis-u[data-state=thinking] .elvis-u-eye{animation:elvis-u-bounce .9s ease-in-out 3}
.elvis-u[data-state=thinking] .elvis-u-orbit{animation:elvis-u-spin 1.7s linear 3}

.elvis-u[data-state=speaking] .elvis-u-bowl{animation:elvis-u-talk 1.15s ease-in-out 3}
.elvis-u[data-state=speaking] .elvis-u-eye{animation:elvis-u-blink-fast 2.3s 3}
.elvis-u[data-state=speaking] .elvis-u-spark{animation-duration:1s}
.elvis-u[data-state=speaking] .elvis-u-rings circle{animation:elvis-u-ripple-soft 1.6s ease-out 3}
.elvis-u[data-state=speaking] .elvis-u-rings circle:nth-child(2){animation-delay:.8s}
.elvis-u[data-state=speaking] .elvis-u-rings circle:nth-child(3){display:none}

/* !important so it also beats the more specific state rules above. */
:is(a,button,.elvis-u-host):is(:hover,:focus-visible) .elvis-u *,
.elvis-u--live *{animation-iteration-count:infinite!important}

/* Off-screen pause (set by elvis.js). */
.elvis-motion.elvis-is-offscreen,
.elvis-motion.elvis-is-offscreen *,
.elvis-motion.elvis-is-offscreen *::after{animation-play-state:paused!important}

@media (max-width:767px){
	.elvis-flow,
	.elvis-flow-x{animation:none}
}

/* ==========================================================================
   10. Reduced motion
   Every animation and movement transition stops.
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}

	.elvis-rise,
	.elvis-float,
	.elvis-float-2,
	.elvis-float-3,
	.elvis-spin,
	.elvis-spin-reverse,
	.elvis-breathe,
	.elvis-pulse::after,
	.elvis-flow,
	.elvis-flow-x,
	.elvis-feed>*,
	.elvis-marquee{animation:none!important}

	.elvis-pulse::after{display:none}

	.elvis-u *{animation:none!important}

	.elvis-nav-link .elvis-icon{transition:none}

	.elvis-lift,
	.elvis-faq-icon{transition:none}
}