/*
Theme Name: SuccessHCM
Theme URI: http://successhcm.local
Description: SuccessHCM child theme for Hello Elementor. Brand tokens and components from Brand Guidelines v1.0 (Draft 5 "The Signature").
Author: Shispare
Template: hello-elementor
Version: 1.0.0
Text Domain: successhcm
*/

/* ==========================================================================
   1. Tokens (Brand guidelines §02 Colour, §05 Components)
   ========================================================================== */
:root {
	--shcm-ink: #0B2A2F;
	--shcm-mint: #6ABCBC;
	--shcm-deep-mint: #2F7070;
	--shcm-saffron: #FDAD02;
	--shcm-white: #FFFFFF;
	--shcm-pale: #E6F5F5;
	--shcm-mist: #F3F9F9;
	--shcm-panel: #DDEFEF;
	--shcm-soft: #A8DADA;
	--shcm-slate: #4A5E66;
	--shcm-rule: #D3E6E6;
	--shcm-rule-screen: #DDEEEE;
	--shcm-mid: #1E5558;
	--shcm-ok: #16794F;
	--shcm-ok-bg: #E7F5EE;
	--shcm-wait: #7A5200;
	--shcm-wait-bg: #FDF4E3;
	--shcm-bad: #B02A2A;
	--shcm-bad-bg: #FDECEC;

	--shcm-head: "Inter Tight", "Inter", system-ui, sans-serif;
	--shcm-body: "Inter", system-ui, sans-serif;

	--shcm-r-sm: 10px;
	--shcm-r-md: 18px;
	--shcm-r-lg: 36px;
	--shcm-shadow-card: 0 18px 40px -12px rgba(11, 42, 47, .18), 0 2px 6px rgba(11, 42, 47, .06);
	--shcm-shadow-soft: 0 10px 30px -10px rgba(11, 42, 47, .16);
}

/* ==========================================================================
   2. Base
   ========================================================================== */
body {
	background: var(--shcm-white);
	color: var(--shcm-ink);
	font-family: var(--shcm-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
/* Contain horizontal bleed (e.g. the hero visual) without making <body> a scroll
   container — overflow-x:hidden would force overflow-y:auto and break scroll events. */
html { overflow-x: clip; }
@supports not (overflow-x: clip) { body { overflow-x: hidden; } }
.shcm-num, .shcm-screen, .shcm-hv, .shcm-demo { font-variant-numeric: tabular-nums; }
.shcm-hv, .shcm-screen, .shcm-demo { line-height: 1.35; }
.shcm-hv p, .shcm-screen p, .shcm-demo p { margin: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
#demo { scroll-margin-top: 24px; }

.elementor-widget-heading .elementor-heading-title { text-wrap: balance; }

/* Text blocks */
.shcm-lead, .shcm-lead p { font-size: 20px; line-height: 32px; color: var(--shcm-slate); }
.shcm-lead--ink, .shcm-lead--ink p { color: var(--shcm-ink); }
.shcm-lead--pale, .shcm-lead--pale p { color: var(--shcm-pale); }
.shcm-body, .shcm-body p { font-size: 19px; line-height: 31px; color: var(--shcm-slate); }
.shcm-lead p:last-child, .shcm-body p:last-child { margin-bottom: 0; }
.e-con > .shcm-maxw-800, .shcm-maxw-800 { max-width: 800px !important; margin-inline: auto; }
.e-con > .shcm-maxw-760, .shcm-maxw-760 { max-width: 760px !important; margin-inline: auto; }

/* Headings */
.shcm-h3 .elementor-heading-title { font-size: 36px; line-height: 42px; letter-spacing: -0.025em; }
.shcm-white .elementor-heading-title { color: var(--shcm-white); }

/* ==========================================================================
   3. Buttons, pills, checks
   ========================================================================== */
.shcm-cta .elementor-button,
button.shcm-cta {
	background: var(--shcm-saffron);
	color: var(--shcm-ink);
	font-family: var(--shcm-body);
	font-weight: 700;
	border: 0;
	border-radius: 999px;
	box-shadow: 0 10px 24px -8px rgba(253, 173, 2, .55);
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.shcm-cta .elementor-button:hover, .shcm-cta .elementor-button:focus-visible,
button.shcm-cta:hover, button.shcm-cta:focus-visible {
	background: #FFB81F;
	color: var(--shcm-ink);
	transform: translateY(-1px);
	box-shadow: 0 14px 28px -8px rgba(253, 173, 2, .6);
}
.shcm-cta .elementor-button:focus-visible, button.shcm-cta:focus-visible,
.shcm-email input:focus-visible {
	outline: 3px solid var(--shcm-ink);
	outline-offset: 3px;
}
.shcm-cta--header .elementor-button { height: 46px; padding: 0 24px; font-size: 17px; display: inline-flex; align-items: center; }
.shcm-cta--lg .elementor-button { height: 60px; padding: 0 30px; font-size: 18px; display: inline-flex; align-items: center; }

.shcm-pill {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 3px 9px; border-radius: 999px;
	font: 700 12px/16px var(--shcm-body); white-space: nowrap;
}
.shcm-pill--ok { color: var(--shcm-ok); background: var(--shcm-ok-bg); }
.shcm-pill--wait { color: var(--shcm-wait); background: var(--shcm-wait-bg); }
.shcm-pill--bad { color: var(--shcm-bad); background: var(--shcm-bad-bg); }
.shcm-pill--mint { color: var(--shcm-deep-mint); background: var(--shcm-pale); }
.shcm-pill--grey { color: var(--shcm-slate); background: #E9EEEF; }

/* Checklist (Icon List widget) — deep ink tick on a 22px mint rounded square */
.shcm-checks .elementor-icon-list-items { display: flex; flex-direction: column; gap: 14px; }
.shcm-checks .elementor-icon-list-item { margin: 0 !important; padding: 0 !important; align-items: flex-start !important; }
.shcm-checks .elementor-icon-list-item::after { display: none !important; }
.shcm-checks .elementor-icon-list-icon,
.shcm-modlist .elementor-icon-list-icon {
	flex: 0 0 22px; width: 22px; height: 22px; border-radius: 6px;
	background: var(--shcm-mint);
	display: inline-flex !important; align-items: center; justify-content: center;
	padding: 0 !important; margin: 0 12px 0 0 !important;
}
.shcm-checks .elementor-icon-list-icon svg,
.shcm-modlist .elementor-icon-list-icon svg { width: 10px !important; height: 10px !important; fill: var(--shcm-ink) !important; }
.shcm-checks .elementor-icon-list-text,
.shcm-modlist .elementor-icon-list-text {
	font: 600 16px/22px var(--shcm-body); color: var(--shcm-ink) !important; padding: 0 !important;
}
.shcm-checkcard {
	background: var(--shcm-mist);
	border-radius: var(--shcm-r-md);
	padding: 24px 26px !important;
}

/* ==========================================================================
   4. Header + logo
   ========================================================================== */
.shcm-site-header { position: absolute; inset: 0 0 auto 0; z-index: 50; }
.admin-bar .shcm-site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .shcm-site-header { top: 46px; } }

.shcm-logo { display: inline-flex; align-items: center; text-decoration: none; }
/* Lock the lockup height; override Hello/Elementor's img{height:auto;max-width:100%}. */
.shcm-site-header .shcm-logo__img { height: 38px !important; width: auto !important; max-width: none !important; display: block; }
/* Default (over the mint hero): on-mint lockup. When the header sticks: on-white lockup. */
.shcm-site-header .shcm-logo__img--white { display: none; }
.shcm-site-header.is-stuck .shcm-logo__img--mint { display: none; }
.shcm-site-header.is-stuck .shcm-logo__img--white { display: block; }
@media (max-width: 1366px) { .shcm-site-header .shcm-logo__img { height: 34px !important; } }
@media (max-width: 767px) { .shcm-site-header .shcm-logo__img { height: 30px !important; } }

/* ==========================================================================
   5. Hero
   ========================================================================== */
.shcm-hero { position: relative; overflow: hidden; isolation: isolate; }
/* The hero fills the first screen: at least 600px, at most the design's 900px. */
.e-con.shcm-hero { --min-height: clamp(600px, 100svh, 900px) !important; }
.admin-bar .e-con.shcm-hero { --min-height: clamp(600px, calc(100svh - 32px), 900px) !important; }
@media (max-width: 1024px) { .e-con.shcm-hero, .admin-bar .e-con.shcm-hero { --min-height: 0px !important; } }
.shcm-hero::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: var(--shcm-white);
	clip-path: polygon(56.6% 0, 100% 0, 100% 100%, 44.4% 100%);
}
.shcm-hero h1.elementor-heading-title { max-width: 560px; }

.shcm-email {
	display: flex; align-items: center; gap: 8px;
	background: var(--shcm-white); border-radius: 12px; padding: 6px;
	box-shadow: 0 12px 30px -12px rgba(11, 42, 47, .28);
	max-width: 560px;
}
.shcm-email input[type="email"] {
	flex: 1; min-width: 0; border: 0 !important; background: transparent; box-shadow: none !important;
	font: 400 17px/24px var(--shcm-body); color: var(--shcm-ink); padding: 14px 14px;
}
.shcm-email input::placeholder { color: var(--shcm-slate); opacity: 1; }
.shcm-email button.shcm-cta { border-radius: 8px; height: 52px; padding: 0 26px; font-size: 17px; box-shadow: none; cursor: pointer; }
.shcm-hero__note { margin: 16px 0 0; font: 400 15px/22px var(--shcm-body); color: var(--shcm-ink); }

.shcm-facts { display: flex; flex-wrap: nowrap; gap: 24px; margin-top: 40px; width: max-content; max-width: calc(100% + 110px); }
@media (max-width: 1200px) { .shcm-facts { flex-wrap: wrap; width: auto; max-width: 100%; } }
.shcm-fact { display: flex; align-items: center; gap: 12px; }
.shcm-fact__icon {
	width: 44px; height: 44px; border-radius: 10px; background: var(--shcm-white);
	display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.shcm-fact__icon svg { width: 20px; height: 20px; }
.shcm-fact b { display: block; font: 600 18px/22px var(--shcm-head); letter-spacing: -0.01em; color: var(--shcm-ink); }
.shcm-fact small { display: block; font: 400 15px/20px var(--shcm-body); color: var(--shcm-ink); }

/* Hero composition: approval inbox window + phone. Coordinates from the 1440 design. */
.shcm-hv { position: relative; height: 690px; width: 686px; margin-right: -86px; font-family: var(--shcm-body); color: var(--shcm-ink); }
.shcm-win {
	position: absolute; left: 146px; top: 0; width: 540px; height: 520px;
	background: var(--shcm-white); border-radius: 16px; overflow: hidden;
	box-shadow: 0 30px 60px -20px rgba(11, 42, 47, .25), 0 0 0 1px rgba(11, 42, 47, .04);
}
.shcm-win__bar { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; background: #EAF3F3; }
.shcm-win__bar i { width: 10px; height: 10px; border-radius: 50%; background: #C9DCDC; }
.shcm-win__url { margin-left: 24px; flex: 1; max-width: 340px; background: var(--shcm-white); border-radius: 6px; padding: 3px 10px; font-size: 11px; color: var(--shcm-slate); }
.shcm-inbox__head { display: flex; align-items: center; gap: 12px; padding: 18px 16px 14px; }
.shcm-inbox__head strong { font: 600 17px/1 var(--shcm-head); }
.shcm-inbox__filter { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--shcm-deep-mint); }
.shcm-tile-check { width: 30px; height: 30px; border-radius: 8px; background: var(--shcm-mint); display: inline-flex; align-items: center; justify-content: center; }
.shcm-inbox__cols, .shcm-inbox__row { display: grid; grid-template-columns: 186px 1fr auto; align-items: center; padding: 0 16px; }
.shcm-inbox__cols { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--shcm-slate); padding-bottom: 10px; }
.shcm-inbox__cols span:last-child { text-align: right; }
.shcm-inbox__row { height: 50px; border-top: 1px solid var(--shcm-rule-screen); font-size: 12.5px; }
.shcm-inbox__row.is-active { background: #FEF8EC; }
.shcm-inbox__row b { display: block; font-weight: 600; font-size: 12.5px; }
.shcm-inbox__row small { display: block; font-size: 11px; color: var(--shcm-slate); }
.shcm-inbox__row .st { display: flex; align-items: center; gap: 10px; }
.shcm-btn-dark { background: var(--shcm-ink); color: var(--shcm-white); font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 6px; }
.shcm-win__foot { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 12px 16px 14px 176px; border-top: 1px solid var(--shcm-rule-screen); font-size: 11px; line-height: 16px; color: var(--shcm-slate); }

.shcm-tip {
	position: absolute; left: 226px; top: 100px; z-index: 3;
	background: var(--shcm-ink); color: var(--shcm-white); border-radius: 8px;
	padding: 8px 14px; box-shadow: var(--shcm-shadow-soft);
}
.shcm-tip b { display: block; font-size: 12px; font-weight: 600; }
.shcm-tip span { display: block; font-size: 11.5px; color: var(--shcm-soft); }

.shcm-phone {
	position: absolute; left: 26px; top: 170px; z-index: 2; width: 280px; height: 520px;
	background: var(--shcm-ink); border-radius: 46px; padding: 12px;
	box-shadow: 0 40px 70px -25px rgba(11, 42, 47, .45);
}
.shcm-phone__screen {
	height: 100%; border-radius: 36px; background: #EEF6F6; padding: 30px 12px 12px;
	display: flex; flex-direction: column; gap: 9px; font-size: 12px;
}
.shcm-phone__who { display: flex; align-items: center; gap: 10px; padding: 0 2px 4px; }
.shcm-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--shcm-pale); color: var(--shcm-deep-mint); font-weight: 700; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.shcm-phone__who b { display: block; font-size: 13px; font-weight: 600; }
.shcm-phone__who small { display: block; font-size: 11px; color: var(--shcm-slate); }
.shcm-pcard { background: var(--shcm-white); border-radius: 12px; padding: 11px 12px; }
.shcm-pcard__label { font-size: 11px; color: var(--shcm-slate); }
.shcm-pcard__big { font: 600 26px/1.1 var(--shcm-head); letter-spacing: -0.02em; margin-top: 2px; }
.shcm-pcard__title { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.shcm-kv { display: flex; justify-content: space-between; font-size: 11.5px; line-height: 20px; color: var(--shcm-slate); }
.shcm-kv b { color: var(--shcm-ink); font-weight: 600; }
.shcm-steps { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; font-size: 10.5px; font-weight: 600; }
.shcm-steps i { width: 6px; height: 6px; border-radius: 50%; background: var(--shcm-mint); flex: none; }
.shcm-steps i.is-wait { background: #E5A21F; }
.shcm-steps hr { flex: 1; border: 0; border-top: 1px solid var(--shcm-rule); margin: 0; }
.shcm-link-mock { font-size: 11px; font-weight: 600; color: var(--shcm-deep-mint); margin-top: 4px; }
.shcm-phone__btn { margin-top: auto; background: var(--shcm-ink); color: var(--shcm-white); text-align: center; font-size: 13px; font-weight: 600; padding: 12px; border-radius: 10px; }

/* ==========================================================================
   6. Modules
   ========================================================================== */
.shcm-cat { border-top: 1px solid var(--shcm-rule); padding-top: 28px !important; gap: 24px !important; }
.shcm-cat > .elementor-widget-html { flex: none; width: auto !important; }
.shcm-tile {
	position: relative; overflow: hidden; width: 80px; height: 80px; border-radius: 18px; flex: none;
	background: linear-gradient(160deg, #3A7A7A 0%, #174246 45%, var(--shcm-ink) 100%);
	box-shadow: 0 14px 24px -10px rgba(11, 42, 47, .55), inset 0 1px 0 rgba(255, 255, 255, .18);
	display: flex; align-items: center; justify-content: center;
}
.shcm-tile::before { /* gloss */
	content: ""; position: absolute; left: -10%; right: -10%; top: -45%; height: 80%;
	background: radial-gradient(ellipse at center, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 70%);
}
.shcm-tile::after { /* edge band */
	content: ""; position: absolute; top: 0; bottom: 0; right: 14px; width: 6px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(0, 0, 0, .12));
}
.shcm-tile svg { position: relative; z-index: 1; width: 32px; height: 32px; }
.shcm-cat-title .elementor-heading-title { font-size: 26px; line-height: 30px; letter-spacing: -0.02em; padding-top: 6px; }

.shcm-modlist .elementor-icon-list-items { display: flex; flex-direction: column; gap: 8px; }
.shcm-modlist .elementor-icon-list-item {
	margin: 0 !important; padding: 0 14px !important; height: 46px;
	background: var(--shcm-white); border: 1px solid var(--shcm-rule); border-radius: 8px;
}
.shcm-modlist .elementor-icon-list-item::after { display: none !important; }

/* ==========================================================================
   7. Product screens (Core processes)
   ========================================================================== */
.shcm-screen {
	position: relative; background: var(--shcm-panel); border-radius: 20px;
	min-height: 540px; padding: 125px 50px 70px 54px; font-family: var(--shcm-body); color: var(--shcm-ink);
}
.shcm-screen::before { /* inner sheet */
	content: ""; position: absolute; left: 44px; top: 50px; right: 76px; bottom: 50px;
	background: rgba(255, 255, 255, .42); border-radius: 16px;
}
.shcm-screen__pill {
	position: absolute; left: 24px; top: 24px; z-index: 2;
	display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px;
	background: var(--shcm-white); border-radius: 999px; box-shadow: var(--shcm-shadow-soft);
	font: 600 15px/1 var(--shcm-body);
}
.shcm-screen__pill i { width: 28px; height: 28px; border-radius: 50%; background: var(--shcm-mint); display: inline-flex; align-items: center; justify-content: center; }
.shcm-screen__pill svg { width: 14px; height: 14px; }
.shcm-card {
	position: relative; z-index: 1; background: var(--shcm-white); border-radius: 16px;
	box-shadow: var(--shcm-shadow-card); padding: 22px 22px 26px; width: 400px; max-width: 100%; min-height: 290px;
}
.shcm-card--wide { width: 420px; min-height: 280px; }
.shcm-card--float {
	position: absolute; right: 50px; bottom: 35px; z-index: 2; width: 300px; min-height: 0; padding: 16px 20px 14px;
}
.shcm-card--float.is-narrow { width: 290px; }
.shcm-card--float.is-left { right: 50px; }
.shcm-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--shcm-rule-screen); font-size: 15px; font-weight: 600; }
.shcm-card__head small { font-size: 12px; font-weight: 400; color: var(--shcm-slate); }
.shcm-card__head.no-rule { border: 0; padding-bottom: 6px; }
.shcm-muted { font-size: 12px; color: var(--shcm-slate); }

.shcm-score { display: grid; grid-template-columns: 1fr 166px 48px; align-items: center; gap: 0; height: 39px; border-bottom: 1px solid var(--shcm-rule-screen); font-size: 13px; font-weight: 600; }
.shcm-score:last-child { border-bottom: 0; }
.shcm-score em { font-style: normal; text-align: right; font-weight: 700; }
.shcm-bar { height: 6px; border-radius: 3px; background: #E6EFEF; overflow: hidden; }
.shcm-bar i { display: block; height: 100%; border-radius: 3px; background: var(--shcm-mint); }
.shcm-bar i.is-low { background: #B7CBCB; }
.shcm-flag { display: flex; justify-content: space-between; gap: 10px; margin: 8px 0 8px; padding: 8px 10px; border-radius: 6px; font-size: 13px; }
.shcm-flag--bad { background: var(--shcm-bad-bg); }
.shcm-flag--bad b { color: var(--shcm-bad); }
.shcm-flag--wait { background: var(--shcm-wait-bg); }
.shcm-flag--wait b { color: var(--shcm-wait); }
.shcm-flag--mint { background: var(--shcm-pale); align-items: center; }
.shcm-flag b { font-weight: 700; }

.shcm-roster { display: grid; grid-template-columns: 92px repeat(7, 1fr); gap: 5px; align-items: center; margin-top: 12px; font-size: 12px; }
.shcm-roster span { text-align: center; font-size: 11px; color: var(--shcm-slate); }
.shcm-roster b { font-weight: 600; font-size: 12px; }
.shcm-roster i { height: 30px; border-radius: 4px; background: var(--shcm-ink); }
.shcm-roster i.is-hol { background: var(--shcm-saffron); }
.shcm-roster i.is-off { background: transparent; border: 1px dashed #BFD4D4; }
.shcm-roster i.is-sel { box-shadow: inset 0 0 0 2px var(--shcm-mint); }
.shcm-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 44px; font-size: 11px; color: var(--shcm-slate); }
.shcm-legend span { display: inline-flex; align-items: center; gap: 5px; }
.shcm-legend i { width: 9px; height: 9px; border-radius: 2px; background: var(--shcm-ink); }
.shcm-legend i.is-hol { background: var(--shcm-saffron); }
.shcm-legend i.is-off { background: transparent; border: 1px dashed #9FB8B8; }

.shcm-rows > div { display: grid; grid-template-columns: 1fr auto 70px; align-items: center; gap: 12px; height: 45px; border-bottom: 1px solid var(--shcm-rule-screen); font-size: 13px; }
.shcm-rows > div:last-child { border-bottom: 0; }
.shcm-rows b { font-weight: 600; }
.shcm-rows .shcm-pill { justify-self: end; }
.shcm-amt { font-weight: 700; font-size: 17px; }

.shcm-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px; }
.shcm-table, .shcm-table th, .shcm-table td { border: 0 !important; }
.shcm-table th { text-align: left; border-bottom: 1px solid var(--shcm-rule-screen) !important; font-size: 11px; font-weight: 600; color: var(--shcm-slate); padding: 0 0 8px; border-bottom: 1px solid var(--shcm-rule-screen); }
.shcm-table td { padding: 10px 0 7px; border: 0; background: none !important; }
.shcm-table td:first-child { font-weight: 600; }
.shcm-table .is-ok { color: var(--shcm-ok); font-weight: 600; }
.shcm-table .is-masked { color: var(--shcm-slate); font-weight: 600; }
.shcm-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 10px; }
.shcm-diff div { border-radius: 6px; padding: 8px 10px; font-size: 14px; font-weight: 600; }
.shcm-diff small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.shcm-diff .is-before { background: var(--shcm-bad-bg); }
.shcm-diff .is-before small { color: var(--shcm-bad); }
.shcm-diff .is-before s { text-decoration-thickness: 1.5px; }
.shcm-diff .is-after { background: var(--shcm-ok-bg); }
.shcm-diff .is-after small { color: var(--shcm-ok); }

/* ==========================================================================
   7b. Sticky stacking cards (Core processes)
   ========================================================================== */
.shcm-proc-stack { position: relative; }
.shcm-proc-card {
	position: -webkit-sticky;
	position: sticky;
	top: 88px;
	width: 100%;
	overflow: hidden;
	border: 1px solid rgba(11, 42, 47, .05);
}
.admin-bar .shcm-proc-card { top: 120px; }
/* A soft brand watermark behind each card, like the reference's large motif. */
.shcm-proc-card::before {
	content: "";
	position: absolute;
	right: -60px;
	top: -60px;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%);
	pointer-events: none;
}
.shcm-proc-card > .e-con-inner { position: relative; z-index: 1; }
/* Let the two columns honour their percentage widths instead of the screen's
   fixed pixel width (flex items default to min-width:auto = content size). */
.shcm-proc-card > .e-con-inner > .e-con > .e-con { min-width: 0; }
/* The product screen is drawn at 600px and scaled to fit from its top-left;
   clip any sub-pixel bleed so nothing spills past the card. */
.shcm-proc-card .elementor-widget-html { overflow: hidden; }
.shcm-proc-card .shcm-fit { transform-origin: top left; }

@media (max-width: 1024px) {
	/* No pinning on tablet/mobile — the cards simply stack in normal flow. */
	.shcm-proc-card, .admin-bar .shcm-proc-card { position: static; top: auto; }
}
@media (max-width: 767px) {
	.shcm-proc-card::before { width: 200px; height: 200px; }
}

/* ==========================================================================
   8. FAQ (Nested Accordion)
   ========================================================================== */
.shcm-faq .e-n-accordion { counter-reset: shcm-faq; display: flex; flex-direction: column; gap: 14px; }
.shcm-faq .e-n-accordion-item {
	counter-increment: shcm-faq; position: relative; overflow: hidden;
	background: var(--shcm-white); border: 1px solid var(--shcm-rule); border-radius: 16px;
	box-shadow: 0 8px 24px -16px rgba(11, 42, 47, .18);
	transition: background-color .2s ease;
}
.shcm-faq .e-n-accordion-item:nth-child(3)::after,
.shcm-faq .e-n-accordion-item:nth-child(5)::after { /* faint mint hatching */
	content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 220px; pointer-events: none;
	background: repeating-linear-gradient(-45deg, rgba(106, 188, 188, .22) 0 1px, transparent 1px 12px);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 40%);
	mask-image: linear-gradient(90deg, transparent, #000 40%);
}
.shcm-faq .e-n-accordion-item[open]::after { display: none; }
.shcm-faq .e-n-accordion-item[open] {
	background: linear-gradient(100deg, var(--shcm-ink) 0%, var(--shcm-mid) 45%, var(--shcm-deep-mint) 100%);
	border-color: transparent; box-shadow: 0 24px 40px -20px rgba(11, 42, 47, .5);
}
.shcm-faq .e-n-accordion-item-title {
	position: relative; z-index: 1;
	display: flex !important; align-items: center; justify-content: space-between; gap: 20px;
	padding: 24px 28px !important; border: 0 !important; background: none !important; cursor: pointer; list-style: none;
}
.shcm-faq .e-n-accordion-item-title::-webkit-details-marker { display: none; }
.shcm-faq .e-n-accordion-item-title-header { display: flex; }
.shcm-faq .e-n-accordion-item-title-text {
	font: 600 22px/30px var(--shcm-head) !important; letter-spacing: -0.015em; color: var(--shcm-ink) !important;
}
.shcm-faq .e-n-accordion-item-title-text::before {
	content: counter(shcm-faq) "."; display: inline-block; min-width: 34px;
}
.shcm-faq .e-n-accordion-item[open] .e-n-accordion-item-title-text { color: var(--shcm-white) !important; }
.shcm-faq .e-n-accordion-item-title-icon { flex: none; }
.shcm-faq .e-n-accordion-item-title-icon > span {
	width: 32px; height: 32px; border-radius: 50%; align-items: center; justify-content: center;
	background: var(--shcm-ink);
}
.shcm-faq .e-n-accordion-item:not([open]) .e-n-accordion-item-title-icon .e-closed,
.shcm-faq .e-n-accordion-item[open] .e-n-accordion-item-title-icon .e-opened { display: inline-flex !important; }
.shcm-faq .e-n-accordion-item:not([open]) .e-n-accordion-item-title-icon .e-opened,
.shcm-faq .e-n-accordion-item[open] .e-n-accordion-item-title-icon .e-closed { display: none !important; }
.shcm-faq .e-n-accordion-item-title-icon svg { width: 11px !important; height: 11px !important; fill: var(--shcm-white) !important; }
.shcm-faq .e-n-accordion-item[open] .e-n-accordion-item-title-icon > span { background: transparent; box-shadow: inset 0 0 0 1.5px var(--shcm-white); }
.shcm-faq .e-n-accordion-item > [role="region"] { position: relative; z-index: 1; padding: 0 84px 28px 62px !important; border: 0 !important; }
.shcm-faq .e-n-accordion-item > [role="region"] .elementor-widget-text-editor,
.shcm-faq .e-n-accordion-item > [role="region"] p { font: 400 18px/30px var(--shcm-body); color: var(--shcm-pale); margin: 0; }

/* ==========================================================================
   9. Closing CTA + footer
   ========================================================================== */
.shcm-closing { background: linear-gradient(180deg, var(--shcm-white) 0, var(--shcm-white) calc(100% - 280px), var(--shcm-ink) calc(100% - 280px)) !important; }
.shcm-ctacard {
	position: relative; overflow: hidden; border-radius: var(--shcm-r-lg);
	background:
		radial-gradient(900px 500px at 88% 12%, rgba(106, 188, 188, .28), rgba(106, 188, 188, 0) 60%),
		linear-gradient(120deg, var(--shcm-mid) 0%, #255F61 50%, var(--shcm-deep-mint) 100%);
	box-shadow: 0 40px 80px -30px rgba(11, 42, 47, .55);
	border: 1px solid rgba(168, 218, 218, .25);
}
.shcm-demo {
	width: 460px; max-width: 100%; margin-left: auto;
	background: var(--shcm-white); border-radius: 18px; padding: 24px 26px 18px;
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .45);
	transform: rotate(2deg); font-family: var(--shcm-body); color: var(--shcm-ink);
}
.shcm-demo__head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--shcm-rule-screen); }
.shcm-demo__head .shcm-tile-check { width: 40px; height: 40px; border-radius: 10px; }
.shcm-demo__head b { display: block; font-size: 16px; font-weight: 700; }
.shcm-demo__head small { display: block; font-size: 13px; color: var(--shcm-slate); }
.shcm-demo__head .shcm-pill { margin-left: auto; }
.shcm-demo dl { margin: 0; }
.shcm-demo dl div { display: grid; grid-template-columns: 124px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--shcm-rule-screen); }
.shcm-demo dt { font-size: 15px; color: var(--shcm-slate); font-weight: 400; }
.shcm-demo dd { margin: 0; font-size: 15px; font-weight: 600; }
.shcm-demo__foot { display: flex; align-items: center; gap: 8px; padding-top: 12px; font-size: 12.5px; color: var(--shcm-slate); }

.shcm-footer { background: var(--shcm-ink); }
.shcm-wordmark {
	display: block; overflow: hidden; height: 0.7em; margin: 0;
	font: 700 clamp(64px, 13.6vw, 196px)/0.86 var(--shcm-head); letter-spacing: -0.035em; white-space: nowrap;
	color: transparent;
	background: repeating-linear-gradient(180deg, var(--shcm-mint) 0 7px, transparent 7px 10px);
	-webkit-background-clip: text; background-clip: text;
	-webkit-mask-image: linear-gradient(180deg, #000 10%, rgba(0, 0, 0, .28) 100%);
	mask-image: linear-gradient(180deg, #000 10%, rgba(0, 0, 0, .28) 100%);
	user-select: none;
}
.shcm-footer__legal { border-top: 1px solid rgba(168, 218, 218, .18); }
.shcm-footer__legal p { margin: 0; font: 400 14px/20px var(--shcm-body); color: var(--shcm-soft); }

/* ==========================================================================
   9b. "Book a demo" form (Fluent Forms) — brand email+button pill
   ========================================================================== */
.shcm-form .fluentform { margin: 0; }
.shcm-form .frm-fluent-form {
	display: flex; align-items: center; gap: 8px;
	background: var(--shcm-white); border-radius: 12px; padding: 6px;
	box-shadow: 0 12px 30px -12px rgba(11, 42, 47, .28); max-width: 560px;
}
.shcm-form fieldset { min-inline-size: 0 !important; width: 100%; display: flex; align-items: center; gap: 8px; }
.shcm-form .ff-el-group { margin: 0 !important; }
.shcm-form .ff-el-group.ff-el-form-hide_label { flex: 1; min-width: 0; }
.shcm-form .ff-el-input--label { display: none !important; }
.shcm-form .ff-el-form-control {
	border: 0 !important; background: transparent !important; box-shadow: none !important;
	font: 400 17px/24px var(--shcm-body); color: var(--shcm-ink);
	padding: 14px !important; width: 100%; height: auto; min-height: 0;
}
.shcm-form .ff-el-form-control:focus { outline: none; box-shadow: none !important; }
.shcm-form input::placeholder { color: var(--shcm-slate); opacity: 1; }
.shcm-form .ff_submit_btn_wrapper { flex: none; width: auto !important; }
.shcm-form .ff-btn-submit {
	background: var(--shcm-saffron) !important; color: var(--shcm-ink) !important;
	font: 700 17px/1 var(--shcm-body) !important; border: 0 !important; border-radius: 8px !important;
	height: 52px; padding: 0 26px !important; cursor: pointer; box-shadow: none !important;
	transition: background-color .15s ease, transform .15s ease;
}
.shcm-form .ff-btn-submit:hover { background: #FFB81F !important; transform: translateY(-1px); }
.shcm-form .ff-btn-submit:focus-visible { outline: 3px solid var(--shcm-ink); outline-offset: 3px; }
/* Errors + success */
.shcm-form .ff-el-is-error .ff-el-form-control { outline: 2px solid var(--shcm-bad); border-radius: 8px; }
.shcm-form .text-danger, .shcm-form .error { color: var(--shcm-bad) !important; font-size: 13px; }
.shcm-form .ff-message-success {
	background: var(--shcm-ok-bg); color: var(--shcm-ok); border: 0; border-radius: 12px;
	padding: 16px 18px; font: 600 16px/24px var(--shcm-body); max-width: 560px;
}
/* The closing form sits on the teal card — the white pill reads well there too. */
.shcm-form--closing .frm-fluent-form { max-width: 460px; }

@media (max-width: 767px) {
	.shcm-form .frm-fluent-form, .shcm-form fieldset { flex-direction: column; align-items: stretch; }
	.shcm-form .frm-fluent-form { padding: 8px; }
	.shcm-form .ff-btn-submit { width: 100%; }
}

/* ==========================================================================
   10. Responsive
   ========================================================================== */
/* Laptop (<=1366px, e.g. 1280-1366 screens and 1920 at 150% scaling) */
@media (max-width: 1366px) {
	.shcm-lead, .shcm-lead p { font-size: 18px; line-height: 28px; }
	.shcm-body, .shcm-body p { font-size: 17px; line-height: 27px; }
	.shcm-h3 .elementor-heading-title { font-size: 28px; line-height: 34px; }
	.shcm-cat-title .elementor-heading-title { font-size: 21px; line-height: 26px; padding-top: 4px; }
	.shcm-faq .e-n-accordion-item-title-text { font-size: 19px !important; line-height: 26px !important; }
	.shcm-faq .e-n-accordion-item-title { padding: 20px 24px !important; }
	.shcm-faq .e-n-accordion-item > [role="region"] { padding: 0 72px 24px 58px !important; }
	.shcm-faq .e-n-accordion-item > [role="region"] p { font-size: 17px; line-height: 28px; }
	.shcm-faq .e-n-accordion-item-title-icon > span { width: 28px; height: 28px; }

	.shcm-logo span { font-size: 21px; }
	.shcm-logo svg { width: 28px; height: 28px; }
	.shcm-cta--header .elementor-button { height: 42px; padding: 0 20px; font-size: 15px; }
	.shcm-cta--lg .elementor-button { height: 52px; padding: 0 26px; font-size: 16px; }

	.shcm-hero h1.elementor-heading-title { max-width: 480px; }
	.shcm-hero__copy { --gap: 18px 18px !important; }
	.shcm-email { max-width: 500px; }
	.shcm-email input[type="email"] { font-size: 16px; padding: 12px; }
	.shcm-email button.shcm-cta { height: 46px; padding: 0 22px; font-size: 16px; }
	.shcm-hero__note { font-size: 14px; margin-top: 12px; }
	.shcm-facts { max-width: none; margin-top: 28px; gap: 20px; }
	.shcm-fact__icon { width: 38px; height: 38px; }
	.shcm-fact__icon svg { width: 18px; height: 18px; }
	.shcm-fact b { font-size: 16px; line-height: 20px; }
	.shcm-fact small { font-size: 14px; line-height: 18px; }

	.shcm-tile { width: 64px; height: 64px; border-radius: 15px; }
	.shcm-tile svg { width: 26px; height: 26px; }
	.shcm-cat { gap: 18px !important; padding-top: 22px !important; }
	.shcm-modlist .elementor-icon-list-item { height: 40px; padding: 0 12px !important; }
	.shcm-checks .elementor-icon-list-text, .shcm-modlist .elementor-icon-list-text { font-size: 15px; line-height: 20px; }
	.shcm-checks .elementor-icon-list-icon, .shcm-modlist .elementor-icon-list-icon { flex-basis: 20px; width: 20px; height: 20px; margin-right: 10px !important; }
	.shcm-checks .elementor-icon-list-items { gap: 12px; }
	.shcm-checkcard { padding: 20px 22px !important; }

	.shcm-demo { width: 420px; padding: 20px 22px 16px; }
	.shcm-demo dl div { padding: 11px 0; grid-template-columns: 104px 1fr; }
	.shcm-demo dt, .shcm-demo dd { font-size: 14px; }
	.shcm-closing { background: linear-gradient(180deg, var(--shcm-white) 0, var(--shcm-white) calc(100% - 220px), var(--shcm-ink) calc(100% - 220px)) !important; }
	.shcm-wordmark { font-size: 12.5vw; }
}
/* .shcm-hv and .shcm-screen are scaled to their column by motion.js (shcm-fit) */
.shcm-fit { transform-origin: top left; }
@media (max-width: 1024px) {
	.shcm-h3 .elementor-heading-title { font-size: 30px; line-height: 36px; }
	.shcm-hero::before { clip-path: polygon(0 58%, 100% 40%, 100% 100%, 0 100%); }
	.shcm-hv { margin: 0 auto; }
	.shcm-closing { background: linear-gradient(180deg, var(--shcm-white) 0, var(--shcm-white) calc(100% - 160px), var(--shcm-ink) calc(100% - 160px)) !important; }
	.shcm-demo { margin: 0 auto; }
}
@media (max-width: 767px) {
	.shcm-lead, .shcm-lead p { font-size: 18px; line-height: 29px; }
	.shcm-body, .shcm-body p { font-size: 17px; line-height: 28px; }
	.shcm-h3 .elementor-heading-title { font-size: 26px; line-height: 32px; }
	.shcm-cat-title .elementor-heading-title { font-size: 22px; line-height: 28px; }
	.shcm-cta--lg .elementor-button { height: 54px; font-size: 17px; }
	.shcm-cta--header .elementor-button { height: 42px; padding: 0 18px; font-size: 15px; }
	.shcm-logo span { font-size: 20px; }
	.shcm-logo svg { width: 27px; height: 27px; }

	.shcm-hero::before { clip-path: polygon(0 66%, 100% 56%, 100% 100%, 0 100%); }
	.shcm-email { flex-direction: column; align-items: stretch; padding: 8px; }
	.shcm-email button.shcm-cta { width: 100%; }
	.shcm-facts { gap: 16px; }
	.shcm-fact { flex: 1 1 100%; }

	/* Hero visual: phone only, with the routing tooltip */
	.shcm-hv { width: 100%; height: 560px; }
	.shcm-win { display: none; }
	.shcm-phone { left: 50%; top: 40px; transform: translateX(-50%); }
	.shcm-tip { left: 50%; top: 0; transform: translateX(-50%); white-space: nowrap; }

	.shcm-tile { width: 64px; height: 64px; border-radius: 15px; }
	.shcm-tile svg { width: 26px; height: 26px; }

	/* Product screens: stack the floating card under the main card */
	.shcm-screen { min-height: 0; padding: 76px 14px 18px; }
	.shcm-screen::before { left: 10px; right: 10px; top: 40px; bottom: 10px; }
	.shcm-screen__pill { left: 14px; top: 16px; }
	.shcm-card, .shcm-card--wide { width: 100%; min-height: 0; padding: 18px 16px 20px; }
	.shcm-card--float, .shcm-card--float.is-narrow { position: relative; right: auto; bottom: auto; width: 92%; margin: -14px 0 0 auto; }
	.shcm-score { grid-template-columns: 1fr 90px 44px; }
	.shcm-roster { grid-template-columns: 62px repeat(7, 1fr); gap: 4px; }
	.shcm-roster i { height: 24px; }
	.shcm-legend { margin-top: 20px; gap: 10px; }

	.shcm-faq .e-n-accordion-item-title { padding: 18px 18px !important; gap: 12px; }
	.shcm-faq .e-n-accordion-item-title-text { font-size: 18px !important; line-height: 25px !important; }
	.shcm-faq .e-n-accordion-item-title-text::before { min-width: 26px; }
	.shcm-faq .e-n-accordion-item > [role="region"] { padding: 0 18px 22px 44px !important; }
	.shcm-faq .e-n-accordion-item > [role="region"] p { font-size: 16px; line-height: 27px; }
	.shcm-faq .e-n-accordion-item:nth-child(3)::after,
	.shcm-faq .e-n-accordion-item:nth-child(5)::after { width: 110px; }

	.shcm-closing { background: linear-gradient(180deg, var(--shcm-white) 0, var(--shcm-white) calc(100% - 120px), var(--shcm-ink) calc(100% - 120px)) !important; }
	.shcm-ctacard { border-radius: 28px; }
	.shcm-demo { transform: rotate(1.2deg); padding: 18px 16px 14px; }
	.shcm-demo dl div { grid-template-columns: 78px 1fr; }
	.shcm-demo dt, .shcm-demo dd { font-size: 14px; }
	.shcm-demo__head { flex-wrap: wrap; }
}