/* ================================================================
   HARISO THEME  —  visual identity
   Emerald + warm-orange, Sora display type, pill CTAs, bento grid.
   Deliberately distinct from the kos/nestera storefront theme.
   Chrome:  #hh-header / #hh-footer  (shared by every hariso page)
   Landing: #hll                     (scoped to shop/landing.twig)
   Bootstrap 3 grid + Font Awesome 4 + Open Sans/Sora (see header).
   ================================================================ */

/* ================================================================
   CHROME — header (#hh-header) + footer (#hh-footer)
   ================================================================ */
#hh-header {
	background: #ffffff;
	border-bottom: 1px solid #e4e9e7;
	position: sticky;
	top: 0;
	z-index: 1000;
}
#hh-header .hh-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 68px;
}
/* Bootstrap's .container/.row add clearfix ::before/::after (display:table).
   With display:flex those become phantom flex items and, under
   justify-content:space-between, shove the real children toward the centre.
   Collapsing them restores true edge alignment. */
#hh-header .hh-inner::before,
#hh-header .hh-inner::after,
#hll .hero-row::before,
#hll .hero-row::after,
#hll .spotlight-row::before,
#hll .spotlight-row::after,
#hll .tier-row::before,
#hll .tier-row::after {
	content: none;
}
#hh-header .hh-brand {
	font-family: 'Sora', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: #04785a !important;
	text-decoration: none !important;
}
#hh-header .hh-logo-img { max-height: 34px; width: auto; display: block; }
#hh-header .hh-actions { display: flex; align-items: center; gap: 12px; }
#hh-header .hh-btn {
	display: inline-block;
	font-family: 'Sora', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
	font-size: 14px;
	font-weight: 700;
	padding: 10px 22px;
	border-radius: 999px;
	text-decoration: none !important;
	transition: all 0.16s ease;
	border: 2px solid transparent;
	white-space: nowrap;
}
#hh-header .hh-btn-ghost { color: #20302c !important; border-color: #d7ded9; }
#hh-header .hh-btn-ghost:hover { border-color: #0e9f6e; color: #04785a !important; }
#hh-header .hh-btn-primary {
	background: #0e9f6e;
	color: #fff !important;
	border-color: #0e9f6e;
}
#hh-header .hh-btn-primary:hover { background: #04785a; border-color: #04785a; }

#hh-footer {
	background: #0a1c17;
	color: rgba(255,255,255,0.60);
	font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}
#hh-footer .hh-footer-inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 30px;
	padding: 48px 15px 30px;
	flex-wrap: wrap;
}
#hh-footer .hh-footer-name {
	font-family: 'Sora', 'Open Sans', sans-serif;
	font-size: 19px;
	font-weight: 800;
	color: #fff;
	letter-spacing: -0.03em;
}
#hh-footer .hh-footer-tagline {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.65;
	max-width: 360px;
}
#hh-footer .hh-footer-links { display: flex; gap: 24px; flex-wrap: wrap; padding-top: 4px; }
#hh-footer .hh-footer-links a {
	color: rgba(255,255,255,0.72) !important;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none !important;
}
#hh-footer .hh-footer-links a:hover { color: #3ddc97 !important; }
#hh-footer .hh-footer-bottom {
	border-top: 1px solid rgba(255,255,255,0.08);
	padding: 18px 15px;
}
#hh-footer .hh-footer-bottom p {
	margin: 0;
	font-size: 12px;
	color: rgba(255,255,255,0.38);
}

@media (max-width: 767px) {
	#hh-header .hh-brand { font-size: 18px; }
	#hh-header .hh-btn-ghost { display: none; }
	#hh-header .hh-btn { padding: 9px 16px; font-size: 13px; }
	#hh-footer .hh-footer-inner { flex-direction: column; gap: 18px; }
}

/* hariso pages only (this sheet is loaded by the hariso theme header) */
html, body { overflow-x: hidden; max-width: 100%; }

/* ================================================================
   SHOP LANDING PAGE  (#hll)
   ================================================================ */
#hll {
	--brand:       #0e9f6e;
	--brand-dark:  #04785a;
	--brand-light: #3ddc97;
	--brand-pale:  #e7f7f0;
	--accent:      #ff7a2f;
	--accent-soft: #fff1e6;
	--ink:         #0a1c17;
	--ink-mid:     #123f31;
	--text:        #20302c;
	--muted:       #5c6b66;
	--border:      #e4e9e7;
	--warm:        #faf7f2;

	font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
	color: var(--text);
	overflow-x: hidden;
}

#hll h1, #hll h2, #hll h3, #hll h4 {
	font-family: 'Sora', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.15;
	margin: 0;
}
#hll p   { margin: 0; }
#hll ul  { padding: 0; margin: 0; list-style: none; }
#hll a   { text-decoration: none !important; }
#hll img { max-width: 100%; height: auto; }

/* ---- shared buttons -------------------------------------------- */
#hll .btn-primary-hero,
#hll .btn-ghost-hero,
#hll .btn-cta-main,
#hll .btn-tier {
	font-family: 'Sora', 'Open Sans', sans-serif;
}
#hll .btn-primary-hero {
	display: inline-block;
	background: var(--brand);
	color: #fff !important;
	font-size: 16px;
	font-weight: 700;
	padding: 15px 34px;
	border-radius: 999px;
	transition: transform 0.16s ease, background 0.16s ease;
	border: none;
}
#hll .btn-primary-hero:hover {
	transform: translateY(-2px);
	background: var(--brand-dark);
}
#hll .btn-ghost-hero {
	display: inline-block;
	color: #fff !important;
	font-size: 16px;
	font-weight: 700;
	padding: 15px 30px;
	border-radius: 999px;
	border: 2px solid rgba(255,255,255,0.28);
	transition: border-color 0.16s ease, background 0.16s ease;
}
#hll .btn-ghost-hero:hover { border-color: #fff; background: rgba(255,255,255,0.06); }

/* ----------------------------------------------------------------
   HERO  —  centered, dashboard shot overlaps the next band
   ---------------------------------------------------------------- */
#hll .hero {
	background:
		radial-gradient(760px 380px at 78% -6%, rgba(255,122,47,0.22) 0%, transparent 62%),
		linear-gradient(185deg, #0a1c17 0%, #0d281f 46%, #123f31 100%);
	position: relative;
	overflow: hidden;
}
#hll .hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
	                  linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
	background-size: 46px 46px;
	pointer-events: none;
	mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
}
#hll .hero-inner {
	position: relative;
	z-index: 1;
	text-align: center;
	padding: 76px 15px 0;
}
#hll .hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(61,220,151,0.10);
	border: 1px solid rgba(61,220,151,0.32);
	color: #9ff0cb;
	font-family: 'Sora', 'Open Sans', sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 7px 16px;
	border-radius: 999px;
	margin-bottom: 26px;
}
#hll .pulse-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--brand-light);
	animation: hll-pulse 2.2s ease-in-out infinite;
}
@keyframes hll-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.4; transform: scale(0.8); }
}

#hll .hero h1 {
	font-size: 46px;
	font-weight: 800;
	color: #ffffff;
	max-width: 840px;
	margin: 0 auto 22px;
	overflow-wrap: break-word;
}
#hll .hero h1 em {
	font-style: normal;
	color: var(--accent);
	position: relative;
}
#hll .hero-sub {
	font-size: 18px;
	color: rgba(255,255,255,0.72);
	line-height: 1.7;
	max-width: 620px;
	margin: 0 auto 34px;
}
#hll .hero-cta {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}
#hll .hero-login-note {
	display: block;
	margin-top: 20px;
	font-size: 13px;
	color: rgba(255,255,255,0.45);
}
#hll .hero-login-note a {
	color: rgba(255,255,255,0.82);
	text-decoration: underline !important;
}
#hll .hero-shelf {
	position: relative;
	z-index: 2;
	margin-top: 50px;
	padding-bottom: 60px;
}
#hll .hero-shot {
	width: 100%;
	max-width: 940px;
	margin: 0 auto;
	display: block;
	height: auto;
	border-radius: 18px;
	border: 1px solid rgba(255,255,255,0.12);
	box-shadow: 0 40px 90px rgba(0,0,0,0.42);
}

/* ----------------------------------------------------------------
   STAT STRIP  —  replaces the boxed "trust bar"
   ---------------------------------------------------------------- */
#hll .stat-strip {
	background: var(--warm);
	border-bottom: 1px solid var(--border);
	padding: 30px 0;
}
#hll .stat-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px 0;
}
#hll .stat-list li {
	flex: 1 1 220px;
	max-width: 290px;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 4px 26px;
	text-align: left;
}
#hll .stat-list li + li { border-left: 1px solid var(--border); }
#hll .stat-ico {
	font-size: 26px;
	line-height: 1;
	width: 30px;
	text-align: center;
	color: var(--brand);
	flex-shrink: 0;
}
#hll .stat-tx strong {
	display: block;
	font-family: 'Sora', 'Open Sans', sans-serif;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--ink);
	line-height: 1.15;
}
#hll .stat-tx span {
	display: block;
	font-size: 12.5px;
	color: var(--muted);
	line-height: 1.4;
	margin-top: 2px;
}

/* ----------------------------------------------------------------
   SHARED SECTION STYLES
   ---------------------------------------------------------------- */
#hll .section      { padding: 84px 0; }
#hll .section-warm { background: var(--warm); }
#hll .section-dark { background: var(--ink); color: #fff; }

#hll .section-head {
	text-align: center;
	margin-bottom: 56px;
}
#hll .eyebrow {
	display: inline-block;
	font-family: 'Sora', 'Open Sans', sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--brand);
	padding: 4px 0;
	margin-bottom: 14px;
	border-bottom: 2px solid var(--accent);
}
#hll .section-dark .eyebrow { color: var(--brand-light); }
#hll .section-title {
	font-size: 40px;
	color: var(--ink);
	margin-bottom: 16px;
}
#hll .section-dark .section-title { color: #fff; }
#hll .section-title em { font-style: normal; color: var(--brand); }
#hll .section-sub {
	font-size: 17px;
	color: var(--muted);
	max-width: 620px;
	margin: 0 auto;
	line-height: 1.7;
}
#hll .section-dark .section-sub { color: rgba(255,255,255,0.6); }

/* ----------------------------------------------------------------
   FEATURES  —  bento grid
   ---------------------------------------------------------------- */
#hll .bento {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	grid-auto-rows: 1fr;
	gap: 16px;
}
#hll .bento-cell {
	background: #fff;
	border: 2px solid var(--border);
	border-radius: 20px;
	padding: 28px 26px;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
#hll .bento-cell:hover {
	transform: translateY(-4px);
	border-color: var(--brand-light);
	box-shadow: 0 18px 44px rgba(10,28,23,0.08);
}
#hll .bento-lg   { grid-row: span 2; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--brand-pale) 0%, #fff 55%); border-color: #bfe9d6; }
#hll .bento-lg .feature-desc { flex: 1; }
#hll .bento-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 22px;
}
#hll .bento-chips span {
	font-family: 'Sora', 'Open Sans', sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: var(--brand-dark);
	background: #fff;
	border: 1px solid #bfe9d6;
	border-radius: 999px;
	padding: 5px 13px;
}
#hll .bento-wide { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; background: var(--ink); border-color: var(--ink); }
#hll .feature-icon {
	width: 52px;
	height: 52px;
	background: var(--brand-pale);
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	color: var(--brand-dark);
	margin-bottom: 18px;
}
#hll .bento-lg .feature-icon { background: #fff; }
#hll .bento-wide .feature-icon { background: rgba(255,255,255,0.10); color: var(--brand-light); margin-bottom: 0; flex-shrink: 0; }
#hll .feature-title {
	font-size: 18px;
	color: var(--ink);
	margin-bottom: 10px;
}
#hll .bento-lg .feature-title { font-size: 22px; }
#hll .bento-wide .feature-title { color: #fff; margin-bottom: 6px; }
#hll .feature-desc {
	font-size: 14px;
	color: var(--muted);
	line-height: 1.65;
}
#hll .bento-wide .feature-desc { color: rgba(255,255,255,0.62); }

/* ----------------------------------------------------------------
   POSITIONING  —  single "switch" panel (no arrow circle)
   ---------------------------------------------------------------- */
#hll .hll-position { background: #fff; }
#hll .hll-pos-intro { text-align: center; margin-bottom: 48px; }
#hll .hll-pos-intro .section-title { margin-bottom: 14px; }
#hll .hll-pos-intro .section-sub   { max-width: 660px; }

#hll .switch-panel {
	display: flex;
	border: 2px solid var(--border);
	border-radius: 22px;
	overflow: hidden;
	margin-bottom: 26px;
}
#hll .switch-col { flex: 1; padding: 32px 30px; }
#hll .switch-before { background: var(--warm); }
#hll .switch-after  { background: var(--brand-pale); border-left: 2px solid var(--border); }
#hll .switch-head {
	font-family: 'Sora', 'Open Sans', sans-serif;
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 9px;
}
#hll .switch-before .switch-head { color: #b45309; }
#hll .switch-after  .switch-head { color: var(--brand-dark); }
#hll .switch-list li {
	font-size: 14px;
	color: #3a4744;
	margin-bottom: 13px;
	display: flex;
	align-items: flex-start;
	gap: 11px;
	line-height: 1.55;
}
#hll .switch-list li:last-child { margin-bottom: 0; }
#hll .switch-before .switch-list li .fa { color: #f59e0b; margin-top: 3px; flex-shrink: 0; }
#hll .switch-after  .switch-list li .fa { color: var(--brand); margin-top: 3px; flex-shrink: 0; }

#hll .hll-listing-highlight {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	background: var(--ink);
	border-radius: 18px;
	padding: 26px 30px;
}
#hll .hll-listing-icon {
	width: 46px;
	height: 46px;
	background: rgba(255,255,255,0.10);
	color: var(--brand-light);
	border-radius: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	flex-shrink: 0;
}
#hll .hll-listing-body strong {
	display: block;
	font-family: 'Sora', 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 6px;
}
#hll .hll-listing-body span {
	font-size: 14px;
	color: rgba(255,255,255,0.62);
	line-height: 1.65;
}

/* ----------------------------------------------------------------
   SPOTLIGHT (image + checklist)
   ---------------------------------------------------------------- */
#hll .spotlight-row {
	display: flex;
	align-items: center;
	gap: 20px;
}
#hll .spotlight-row > [class*='col-'] { float: none; }
#hll .spotlight-visual img {
	width: 100%;
	height: auto;
	border-radius: 18px;
	border: 2px solid var(--border);
	box-shadow: 0 24px 60px rgba(10,28,23,0.10);
}
#hll .spotlight-copy .eyebrow { margin-bottom: 14px; }
#hll .spotlight-title {
	font-size: 32px;
	color: var(--ink);
	margin-bottom: 14px;
}
#hll .spotlight-sub {
	font-size: 16px;
	color: var(--muted);
	line-height: 1.7;
	margin-bottom: 22px;
}
#hll .checklist li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 15px;
	color: var(--text);
	padding: 8px 0;
}
#hll .checklist li .fa {
	color: #fff;
	background: var(--brand);
	width: 20px;
	height: 20px;
	border-radius: 50%;
	font-size: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 3px;
	flex-shrink: 0;
}

/* ----------------------------------------------------------------
   HOW IT WORKS  —  vertical timeline (light warm band)
   ---------------------------------------------------------------- */
#hll .timeline {
	max-width: 720px;
	margin: 0 auto;
}
#hll .tl-item {
	display: flex;
	gap: 26px;
	position: relative;
	padding-bottom: 38px;
}
#hll .tl-item:last-child { padding-bottom: 0; }
#hll .tl-marker {
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	border-radius: 16px;
	background: var(--brand);
	color: #fff;
	font-family: 'Sora', 'Open Sans', sans-serif;
	font-size: 20px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
}
#hll .tl-item:not(:last-child) .tl-marker::after {
	content: '';
	position: absolute;
	top: 58px;
	bottom: -44px;
	left: 50%;
	width: 2px;
	transform: translateX(-50%);
	background: repeating-linear-gradient(180deg, var(--brand-light) 0 6px, transparent 6px 12px);
}
#hll .tl-content { padding-top: 6px; }
#hll .tl-title {
	font-size: 19px;
	color: var(--ink);
	margin-bottom: 8px;
}
#hll .tl-desc {
	font-size: 14px;
	color: var(--muted);
	line-height: 1.7;
}
#hll .steps-cta { text-align: center; margin-top: 52px; }
#hll .section-warm .btn-primary-hero:hover { background: var(--brand-dark); }

/* ----------------------------------------------------------------
   PRICING TIERS
   ---------------------------------------------------------------- */
#hll .tier-row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	margin-left: -12px;
	margin-right: -12px;
}
#hll .tier-row > [class*='col-'] {
	float: none;
	display: flex;
	flex-direction: column;
	padding: 12px;
}
#hll .tier-card {
	background: #fff;
	border: 2px solid var(--border);
	border-radius: 22px;
	padding: 34px 30px 30px;
	display: flex;
	flex-direction: column;
	flex: 1;
	position: relative;
}
#hll .tier-card.featured {
	border-color: var(--brand);
	background: linear-gradient(180deg, var(--brand-pale) 0%, #fff 30%);
}
#hll .tier-popular-badge {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--accent);
	color: #fff;
	font-family: 'Sora', 'Open Sans', sans-serif;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 5px 18px;
	border-radius: 999px;
	white-space: nowrap;
}
#hll .tier-icon {
	width: 50px;
	height: 50px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 21px;
	margin-bottom: 16px;
}
#hll .tier-icon.t-free       { background: #f1f3f2; color: #6b7280; }
#hll .tier-icon.t-basic      { background: var(--brand-pale); color: var(--brand-dark); }
#hll .tier-icon.t-pro        { background: var(--accent-soft); color: var(--accent); }
#hll .tier-icon.t-enterprise { background: var(--ink); color: #fff; }
#hll .tier-label {
	font-family: 'Sora', 'Open Sans', sans-serif;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #9ca3af;
	margin-bottom: 6px;
}
#hll .tier-card.featured .tier-label { color: var(--brand); }
#hll .tier-headline {
	font-size: 22px;
	color: var(--ink);
	margin-bottom: 10px;
}
#hll .tier-price {
	font-family: 'Sora', 'Open Sans', sans-serif;
	font-size: 27px;
	font-weight: 800;
	color: var(--ink);
	margin-bottom: 14px;
}
#hll .tier-price span {
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: var(--muted);
	margin-left: 2px;
}
#hll .tier-card.featured .tier-price { color: var(--brand-dark); }
#hll .tier-price-note {
	font-size: 12.5px;
	color: var(--muted);
	margin: -8px 0 16px;
	line-height: 1.5;
}
#hll .tier-card.featured .tier-price-note { color: var(--brand-dark); }
#hll .tier-desc {
	font-size: 14px;
	color: var(--muted);
	line-height: 1.65;
	margin-bottom: 24px;
}
#hll .tier-divider {
	border: none;
	border-top: 1px solid var(--border);
	margin: 0 0 20px;
}
#hll .tier-features { flex: 1; margin-bottom: 28px; }
#hll .tier-features li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	color: var(--text);
	padding: 7px 0;
	border-bottom: 1px solid #f4f6f5;
}
#hll .tier-features li:last-child { border-bottom: none; }
#hll .tier-features li .fa {
	color: var(--brand);
	font-size: 13px;
	margin-top: 3px;
	flex-shrink: 0;
}
#hll .tier-features li.dim { opacity: 0.4; }
#hll .tier-features li.dim .fa { color: #9ca3af; }
#hll .tier-features li strong { font-weight: 700; color: var(--ink); }
#hll .tier-fineprint {
	text-align: center;
	font-size: 13px;
	color: var(--muted);
	max-width: 680px;
	margin: 34px auto 0;
	line-height: 1.65;
}
#hll .btn-tier {
	display: block;
	text-align: center;
	padding: 13px 20px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	transition: all 0.16s ease;
	border: 2px solid transparent;
}
#hll .btn-tier-ghost {
	border-color: var(--border);
	color: var(--text) !important;
	background: transparent;
}
#hll .btn-tier-ghost:hover {
	border-color: var(--brand);
	color: var(--brand-dark) !important;
	background: var(--brand-pale);
}
#hll .btn-tier-solid {
	background: var(--brand);
	color: #fff !important;
	border-color: var(--brand);
}
#hll .btn-tier-solid:hover {
	background: var(--brand-dark);
	border-color: var(--brand-dark);
	transform: translateY(-1px);
}

/* ----------------------------------------------------------------
   TESTIMONIAL  —  the one dark moment on the page
   ---------------------------------------------------------------- */
#hll .quote-section {
	background:
		radial-gradient(620px 300px at 12% 0%, rgba(255,122,47,0.16) 0%, transparent 60%),
		linear-gradient(160deg, #0a1c17, #123f31);
	padding: 84px 0;
}
#hll .quote-card {
	max-width: 760px;
	margin: 0 auto;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.10);
	border-radius: 24px;
	padding: 44px 46px;
}
#hll .quote-body {
	font-family: 'Sora', 'Open Sans', sans-serif;
	font-size: 22px;
	font-weight: 400;
	color: #ffffff;
	line-height: 1.55;
	letter-spacing: -0.01em;
	margin-bottom: 28px;
}
#hll .quote-person {
	display: flex;
	align-items: center;
	gap: 16px;
}
#hll .quote-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
	font-family: 'Sora', 'Open Sans', sans-serif;
	font-weight: 800;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
#hll .quote-author { font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.5; }
#hll .quote-author strong { display: block; color: #fff; font-weight: 700; }

/* ----------------------------------------------------------------
   FINAL CTA
   ---------------------------------------------------------------- */
#hll .cta-section {
	padding: 84px 0;
	text-align: center;
	background: var(--brand-pale);
}
#hll .cta-headline {
	font-size: 42px;
	color: var(--ink);
	margin-bottom: 16px;
}
#hll .cta-sub {
	font-size: 17px;
	color: var(--muted);
	margin-bottom: 32px;
}
#hll .btn-cta-main {
	display: inline-block;
	background: var(--brand);
	color: #fff !important;
	font-size: 17px;
	font-weight: 700;
	padding: 17px 48px;
	border-radius: 999px;
	transition: transform 0.16s ease, background 0.16s ease;
}
#hll .btn-cta-main:hover {
	transform: translateY(-2px);
	background: var(--brand-dark);
}
#hll .cta-footnote {
	margin-top: 16px;
	font-size: 13px;
	color: var(--muted);
}

/* ----------------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------------- */
/* 4 pricing tiers wrap to 2x2 on medium screens */
@media (min-width: 992px) and (max-width: 1199px) {
	#hll .tier-row > [class*='col-'] { flex: 0 0 50%; max-width: 50%; }
	#hll .tier-card { padding: 30px 24px 26px; }
}

@media (max-width: 991px) {
	#hll .hero-inner { padding: 60px 15px 0; }
	#hll .hero h1    { font-size: 38px; }
	#hll .hero-sub   { font-size: 16px; }
	#hll .hero-shelf { margin-top: 40px; padding-bottom: 44px; }

	#hll .section       { padding: 60px 0; }
	#hll .section-title  { font-size: 30px; }
	#hll .cta-headline   { font-size: 30px; }
	#hll .spotlight-title { font-size: 26px; }

	#hll .bento { grid-template-columns: 1fr 1fr; }
	#hll .bento-lg   { grid-row: auto; }
	#hll .bento-wide { grid-column: 1 / -1; }

	#hll .spotlight-row { display: block; }
	#hll .spotlight-visual { margin-bottom: 28px; }

	#hll .tier-row { display: block; }
	#hll .tier-row > [class*='col-'] { margin-bottom: 24px; }
}

@media (max-width: 767px) {
	#hll .hero-inner { padding: 44px 15px 0; }
	#hll .hero-eyebrow {
		white-space: normal;
		font-size: 10.5px;
		letter-spacing: 0.04em;
		max-width: 100%;
		text-align: center;
	}
	#hll .hero h1    { font-size: 25px; }
	#hll .hero-cta   { flex-direction: column; }
	#hll .hero-cta a { display: block; text-align: center; }

	#hll .stat-strip { padding: 24px 0; }
	#hll .stat-list { flex-direction: column; align-items: center; gap: 0; }
	#hll .stat-list li { flex: none; width: 100%; max-width: 300px; padding: 14px 0; }
	#hll .stat-list li + li { border-left: none; border-top: 1px solid var(--border); }

	#hll .section       { padding: 48px 0; }
	#hll .quote-section { padding: 56px 0; }
	#hll .cta-section   { padding: 56px 0; }
	#hll .quote-card    { padding: 32px 24px; }
	#hll .quote-body    { font-size: 18px; }

	#hll .bento { grid-template-columns: 1fr; }
	#hll .bento-wide { flex-direction: column; align-items: flex-start; gap: 14px; }

	#hll .switch-panel { flex-direction: column; }
	#hll .switch-after { border-left: none; border-top: 2px solid var(--border); }
	#hll .hll-listing-highlight { flex-direction: column; gap: 14px; }

	#hll .cta-headline { font-size: 26px; }
}