/*---
* Matthew Boyles Media 
* Web Hosting & Website Services
* Version 2.0
* https://www.matthewboyles.dev
* https://www.embeemedialab.com/hosting
---*/

/*---
* Imports and Root Variables
* Typography
* 
---*/

@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;900&family=Kanit:wght@400;500;600;700&display=swap");
:root {
	--color-brand-primary: #cc3535;
	--color-brand-secondary: #800000;
	--color-brand-accent: #002d10;

	--color-surface: #e5e5e5;
	--color-surface-muted: #aaa;
	--color-surface-strong: #363636;

	--color-text: #121212;
	--color-heading: #000;

	--color-link: #002aff;
	--color-link-hover: #000a3d;

	--body-font-family: "Kanit", sans-serif;
	--heading-font-family: "Inter Tight", sans-serif;
	--body-font-size: "1rem";
	--font-size-90: 0.875rem;
	--font-size-100: 1rem;
	--font-size-200: 1.125rem;
	--font-size-300: 1.375rem;
	--font-size-400: 1.75rem;
	--font-size-500: 2.25rem;
	--font-size-600: 2.75rem;

	--radius-sm: 0.125rem;
	--radius-md: 0.375rem;
	--radius-lg: 0.75rem;
	--radius-xl: 1rem;

	--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
	--shadow-md: 0 4px 10px rgba(15, 23, 42, 0.12);
	--shadow-lg: 0 14px 28px rgba(15, 23, 42, 0.18);

	--space-0: 0;
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 1rem;
	--space-4: 1.5rem;
	--space-5: 2rem;
	--space-6: 3rem;

	--section-spacing: 50px;
	--section-padding: 20px;

	--header-h: 86px;

	--hero-bg: #0b0f19;
	--hero-surface: rgba(255, 255, 255, 0.06);
	--hero-surface-2: rgba(255, 255, 255, 0.09);
	--hero-border: rgba(255, 255, 255, 0.12);
	--hero-text: rgba(255, 255, 255, 0.92);
	--hero-muted: rgba(255, 255, 255, 0.72);
	--hero-faint: rgba(255, 255, 255, 0.55);


	--hero-shadow: 0 20px 60px rgba(0, 0, 0, 0.40);
	--hero-shadow-soft: 0 14px 35px rgba(0, 0, 0, 0.30);
}
@media (max-width: 991px) {
	:root {
		--header-h: 72px;
	}
}


/*-typography-*/
html,
body {
	color: var(--body-color);
	background-color: var(--dark-color);
	font-family: var(--body-font-family);
	font-size: var(--body-font-size);
	font-weight: 400;
	line-height: 1.6rem;
	overflow-x: hidden;
	scroll-behavior: smooth;
}
h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
	margin-top: 0;
	margin-bottom: .5rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--heading-color)
}
h1, .h1 {
	font-size: calc(1.375rem + 1.5vw)
}
@media(min-width: 1200px) {
	h1, .h1 {
		font-size: 2.5rem
	}
}
h2, .h2 {
	font-size: calc(1.325rem + 0.9vw)
}
@media(min-width: 1200px) {
	h2, .h2 {
		font-size: 2rem
	}
}
h3, .h3 {
	font-size: calc(1.3rem + 0.6vw)
}
@media(min-width: 1200px) {
	h3, .h3 {
		font-size: 1.75rem
	}
}
h4, .h4 {
	font-size: calc(1.275rem + 0.3vw)
}
@media(min-width: 1200px) {
	h4, .h4 {
		font-size: 1.5rem
	}
}
h5, .h5 {
	font-size: 1.25rem
}
h6, .h6 {
	font-size: 1rem
}
p {
	margin-top: 0;
	margin-bottom: 1rem
}
ul {
	margin: 0 0 25px 0;
	padding-left: 20px;
	list-style: square outside none;
}
ul.list_style_none {
	list-style: none;
	padding: 0px;
}
ul.list_style_none li {
	margin-bottom: 30px;
}
ul.list_style_none li:last-child {
	margin-bottom: 0px;
}
ol {
	padding-left: 20px;
	margin-bottom: 25px;
}
dfn,
cite,
em,
i {
	font-style: italic;
}
blockquote {
	margin: 0 15px;
	font-style: italic;
	font-size: 20px;
	line-height: 1.6em;
	margin: 0;
}
address {
	margin: 0 0 15px;
}
img {
	border: 0;
	max-width: 100%;
	height: auto;
}
a {
	color: inherit;
	text-decoration: none;
	transition: all 0.3s ease;
}
button {
	color: inherit;
	transition: all 0.3s ease;
}
a:hover {
	text-decoration: none;
	color: #cc3535;
}
table {
	width: 100%;
	margin-bottom: 25px;
}
table th {
	font-weight: 600;
	color: var(--body-color);
}
table td,
table th {
	border-top: 1px solid #c1c1c1;
	padding: 11px 10px;
}
dl {
	margin-bottom: 25px;
}
dl dt {
	font-weight: 600;
}
b,
strong {
	font-weight: bold;
}
pre {
	color: var(--body-color);
	border: 1px solid #c1c1c1;
	font-size: 18px;
	padding: 25px;
	border-radius: 5px;
}
kbd {
	font-size: 100%;
	background-color: var(--body-color);
	border-radius: 5px;
}
@media screen and (max-width: 991px) {
	body,
	html {
		font-size: 16px;
		line-height: 1.6em;
	}
	ul {
		margin: 0 0 25px 0;
		padding-left: 20px;
		list-style: square outside none;
	}
	ul.list_style_none {
		list-style: none;
		padding: 0px;
	}
	ul.list_style_none li {
		margin-bottom: 10px;
	}
	ul.list_style_none li h3 {
		font-size: 22px;
	}
}
input,
textarea {
	color: var(--primary-color);
	transition: all 0.3s ease;
}


/*-preloader-*/


.preloader_bg {
	text-align: center;
	height: 100%;
	width: 100%;
}
.preloader {
	position: fixed;
	z-index: 99999;
	top: 0;
	width: 100%;
	height: 100vh;
	background-color: #fff;
}
.preloader .loading {
	font-size: 90px;
	font-family: "Montserrat", sans-serif;
	font-weight: 900;
	text-align: center;
}
@media screen and (max-width: 772px) {
	.preloader .loading {
		font-size: 50px;
	}
}
.preloader .loading span {
	display: inline-block;
	margin: 0 -0.05em;
}
.preloader .loading05 {
	perspective: 1000px;
}
.preloader .loading05 span {
	color: #000;
	transform-origin: 50% 50% -25px;
	transform-style: preserve-3d;
	animation: loading05 1.6s infinite;
}

.preloader .loading05 span:nth-child(2) {
	animation-delay: 0.1s;
}

.preloader .loading05 span:nth-child(3) {
	animation-delay: 0.2s;
}

.preloader .loading05 span:nth-child(4) {
	animation-delay: 0.3s;
}

.preloader .loading05 span:nth-child(5) {
	animation-delay: 0.4s;
}

.preloader .loading05 span:nth-child(6) {
	animation-delay: 0.5s;
}

.preloader .loading05 span:nth-child(7) {
	animation-delay: 0.6s;
}

@keyframes loading05 {
	0% {
		transform: rotateX(-360deg);
	}
	70% {
		transform: rotateX(0);
	}
}

/*-menu & navbar-*/
.hosting-menu {
	background: #121212;
	position: relative;
	z-index: 999;
	padding: 18px 40px;
	transition: all 0.4s ease-in-out 0s;
}
.hosting-menu.menu-overlay {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	background: transparent;
}
.hosting-menu.fixed {
	position: fixed;
	left: 0;
	right: 0;
	padding-top: 5px;
	padding-bottom: 5px;
	background: #121212;
	box-shadow: 0 13px 35px -12px rgba(35, 35, 35, 0.1);
}
/* Hamburger button */
.hosting-menu .navbar-toggler{
  width: 48px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  position: relative;
  z-index: 99;
  -webkit-tap-highlight-color: transparent;
}

.hosting-menu .navbar-toggler:focus{ box-shadow: none; }

/* Common bar styling */
.hosting-menu .navbar-toggler::before,
.hosting-menu .navbar-toggler::after,
.hosting-menu .navbar-toggler > span{
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 26px;
  height: 3px;
  background: #cc3535;
  transform-origin: 50% 50%;
  transition: transform .25s ease, opacity .2s ease;
}

/* Middle bar */
.hosting-menu .navbar-toggler > span{
  transform: translateY(-50%);
  /* accessibility: hide text if any ever gets added */
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
}

/* Top + bottom bars */
.hosting-menu .navbar-toggler::before{
  transform: translateY(calc(-50% - 9px));
}

.hosting-menu .navbar-toggler::after{
  transform: translateY(calc(-50% + 9px));
}

/* Expanded -> X */
.hosting-menu .navbar-toggler[aria-expanded="true"] > span{
  opacity: 0;
}

.hosting-menu .navbar-toggler[aria-expanded="true"]::before{
  transform: translateY(-50%) rotate(45deg);
}

.hosting-menu .navbar-toggler[aria-expanded="true"]::after{
  transform: translateY(-50%) rotate(-45deg);
}
.hosting-menu .navbar-toggler::before,
.hosting-menu .navbar-toggler::after,
.hosting-menu .navbar-toggler > span{
  border-radius: 2px;
}

/*-toggle tactile-*/
.hosting-menu .navbar-toggler{
  border-radius: 12px;
  transition: transform .18s ease, background-color .18s ease;
}

@media (hover:hover){
  .hosting-menu .navbar-toggler:hover{
    background: rgba(204,53,53,.08);
    transform: translateY(-1px);
  }
}

.hosting-menu .navbar-toggler:active{
  transform: translateY(0) scale(.96);
  background: rgba(204,53,53,.12);
}

.hosting-menu .navbar-toggler[aria-expanded="true"]{
  transform: rotate(2deg);
}


/*-toggle elastic morph-*/
.hosting-menu .navbar-toggler::before,
.hosting-menu .navbar-toggler::after,
.hosting-menu .navbar-toggler > span{
  transition:
    transform .32s cubic-bezier(.2, .9, .2, 1.25),
    opacity .2s ease;
}

.hosting-menu .navbar-toggler[aria-expanded="true"]::before{
  transform: translateY(-50%) rotate(45deg) scaleX(1.05);
}

.hosting-menu .navbar-toggler[aria-expanded="true"]::after{
  transform: translateY(-50%) rotate(-45deg) scaleX(1.05);
}

@media (prefers-reduced-motion: reduce){
  .hosting-menu .navbar-toggler,
  .hosting-menu .navbar-toggler::before,
  .hosting-menu .navbar-toggler::after,
  .hosting-menu .navbar-toggler > span{
    transition: none !important;
  }
}






.hosting-menu .nav-item .nav-link {
	font-family: var(--heading-font-family);
	font-weight: 500;
	font-size: 20px;
	line-height: initial;
	color: #000;
	padding: 20px 0;
	margin: 0 30px;
	position: relative;
	transition: all 0.2s ease-in-out 0s;
}
.hosting-menu .nav-item:hover .nav-link {
	color: #0C3A30;
}
.hosting-menu.white-vr .nav-item:hover .nav-link {
	color: #cc3535;
}
.hosting-menu.white-vr.fixed {
	background: #0C3A30;
	border: none;
}
.hosting-menu.menu-style-one {
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.hosting-menu.menu-overlay {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	background: transparent;
}

.hosting-menu.white-vr .nav-item:hover .nav-link {
	color: #cc3535;
}
.hosting-menu.white-vr.fixed {
	background: #fefefe;
	border: solid 1px #121212;
}
.navbar [class*=mega-dropdown] .dropdown-menu {
	padding: 0 0 15px;
	margin: 0;
	right: 0;
}

.navbar .mega-dropdown-sm .dropdown-menu {
	min-width: 600px;
	left: 0;
	padding: 10px;
}

.navbar [class*=mega-dropdown] .menu-column {
	padding: 5px 0;
}
.navbar [class*=mega-dropdown] .menu-column .mega-menu-title {
	font-family: "Satoshi";
	font-size: 14px;
	font-weight: 500;
	color: #E6FD5A;
	display: inline-block;
	position: relative;
	margin: 0 0 5px;
	padding-left: 15px;
}
.login-btn {
	font-weight: 700;
	font-size: 18px;
	line-height: 48px;
	padding: 0 30px;
	text-align: center;
	border-radius: 40px;
	color: #fff;
	background-color: #cc3535;
	transition: all 0.3s ease-in-out 0s;
}
.login-btn:hover {
	background-color: #fff;
	color: #cc3535;
}
/*----- For Desktop -------*/
@media screen and (min-width: 992px) {
	.navbar .dropdown-menu {
		font-size: 1em;
		z-index: 5;
		background-color: #fff;
		border-radius: 10px;
		display: block;
		right: auto;
		left: 0;
		padding: 10px 5px;
		border: none;
		top: 100%;
		visibility: hidden;
		transform: translateY(5px);
		opacity: 0;
		min-width: 200px;
		box-shadow: 0px 50px 100px rgba(0, 0, 0, 0.12);
		margin: 0;
		transform-origin: 0 0;
		transition: all 0.3s ease-out;
	}
	.navbar .dropdown-menu:before {
		content: "";
		position: absolute;
		left: 30px;
		top: -17px;
	}
	.navbar .dropdown-menu .dropdown-menu {
		left: calc(100% + 5px);
		top: 0;
		right: auto;
		min-width: 240px;
		box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.15);
		transform: translateY(0);
	}
	.navbar .dropdown:hover>.dropdown-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
	.navbar .dropdown-toggle::after {
		display: none;
	}
	.navbar .show.dropdown-toggle::after {
		transform: rotate(180deg);
	}
}

/*----- For Mobile ----*/
@media screen and (max-width: 991px) {
	.navbar {
		padding: 0;
	}
	.navbar-collapse .logo {
		margin-bottom: 10vh;
		padding-left: 12px;
	}
	.white-vr .navbar-collapse {
		background-color: #fff;
	}
	.navbar-collapse {
		position: fixed;
		top: 0;
		background-color: #EDF1EE;
		left: 0;
		height: 100vh;
		max-height: 100vh;
		overflow-y: auto;
		clear: both;
		width: 320px;
		max-width: calc(100vw - 60px);
		z-index: 9999;
		transform: translateX(-100%);
		display: block !important;
		padding: 16px 0 20px;
		transition: all 0.3s ease-in-out;
	}
	.navbar-collapse.show {
		transform: translateX(0);
		box-shadow: 15px 0 25px rgba(35, 35, 35, 0.09);
	}
	.hosting-menu .navbar .mega-dropdown {
		position: relative;
	}
	.navbar .navbar-nav .nav-link {
		margin: 0;
		padding: 15px 12px;
		border-top: 1px dashed rgba(0, 0, 0, 0.1);
	}
	.white-vr .navbar .navbar-nav .nav-link {
		border-top: 1px dashed rgba(255, 255, 255, 0.15);
	}
	.navbar .dropdown-menu .dropdown-item {
		padding: 0 10px;
		line-height: 46px;
	}
	.navbar .dropdown-menu {
		border: none;
		padding: 0;
		border-radius: 0;
		margin: 0;
		background: #fff;
	}
	.navbar [class*=mega-dropdown] .dropdown-menu {
		padding: 0;
		min-width: 100%;
	}
	.navbar [class*=mega-dropdown] .menu-column {
		padding: 0;
	}
	.navbar .dropdown-toggle::after {
		position: absolute;
		right: 15px;
		top: calc(50% - 2px);
	}
	.dashboard-menu .nav-link::before {
		right: auto;
		left: 0;
		top: -2px;
	}
}
/* Make header truly sticky (no JS required) */
.hosting-menu.sticky-menu {
	position: sticky;
	top: 0;
	z-index: 9999;
	background: #fefefe;
	/* match your white-vr fixed state */
	border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}

.hosting-menu.menu-overlay {
	position: sticky;
	/* override absolute */
}


header.hosting-menu.sticky-menu {
	position: sticky !important;
	top: 0;
	z-index: 10000;
	background: #fefefe;
	/* solid bar */
	border-bottom: 1px solid rgba(0, 0, 0, 0.10);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

/* Ensure nav links read correctly on light header */
header.hosting-menu.sticky-menu .nav-item .nav-link {
	color: #000;
}

/* Remove any overlay intent if it still exists elsewhere */
header.hosting-menu.sticky-menu.menu-overlay {
	position: sticky !important;
}
/* Bulletproof sticky (fixed) */
header.hosting-menu.sticky-menu {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10000;
	background: rgba(254, 254, 254, 0.9);
	border-bottom: 1px solid rgba(0, 0, 0, 0.10);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.hambergerIcon{
  height: 10px;
  width:100px;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50px;
  background-color: #4A2545;
  transform: translate(-50%,-50%) rotate(0deg);
  transition: all ease 0.5s;
  &::before,&::after{
    content:"";
    position: absolute;
    height: inherit;
    border-radius: inherit;
    background-color: inherit;
    margin: auto;
    width: 50%;
    transition: all ease 0.5s;
  }
  &::before{
    top: -20px;
    left: 0;
    transform-origin: left;
  }
  &::after{
    bottom:-20px;
    right: 0;
    transform-origin: right;
  }
}

.open{
  transform:translate(-50%,-50%) rotate(135deg);
  &::before{
    top:0;
    transform: translateX(100%) rotate(-90deg);
  }
  &::after{
    bottom:0;
    transform: translateX(-100%) rotate(-90deg);
  }
}



/*-hero-*/
/*--
.host-hero{
  position: relative;
  background: radial-gradient(1200px 700px at 20% 10%, rgba(204,53,53,0.22), transparent 60%),
              radial-gradient(900px 600px at 85% 20%, rgba(74,163,255,0.20), transparent 55%),
              var(--hero-bg);
  color: var(--hero-text);
  overflow: hidden;
  padding: calc(var(--header-h) + clamp(56px, 7vw, 96px)) 0 clamp(56px, 7vw, 96px);
}
--*/

.host-hero {
	position: relative;
	background:
		linear-gradient(180deg, #3a3a3a 0%, #242424 100%);
	color: var(--hero-text);
	overflow: hidden;
	padding: calc(var(--header-h) + clamp(56px, 7vw, 96px)) 0 clamp(56px, 7vw, 96px);

}

.host-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("/assets/img/home/noise1.png");
	opacity: 0.1;
	pointer-events: none;
}


.host-hero__wrap { 
	width: min(1180px, calc(100% - 48px));
	margin: 0 auto;
}

.host-hero__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(26px, 4vw, 54px);
	align-items: center;
}

.host-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border: 1px solid var(--hero-border);
	background: rgba(255, 255, 255, 0.04);
	border-radius: 999px;
	color: var(--hero-muted);
	font-size: 0.95rem;
	line-height: 1;
	margin: 0 0 18px;
}

.host-hero__title {
	font-size: clamp(2.1rem, 3.6vw, 3.15rem);
	letter-spacing: -0.02em;
	line-height: 1.08;
	margin: 0 0 14px;
}

.host-hero__subtitle {
	font-size: clamp(1.02rem, 1.35vw, 1.15rem);
	color: var(--hero-muted);
	line-height: 1.55;
	margin: 0 0 22px;
	max-width: 58ch;
}

.host-hero__bullets {
	display: grid;
	gap: 10px;
	margin: 0 0 26px;
	padding: 0;
}

.host-hero__bullets li {
	list-style: none;
	position: relative;
	padding-left: 28px;
	color: var(--hero-text);
	line-height: 1.35;
}

.host-hero__bullets li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #fff, rgba(255, 255, 255, 0.2) 55%, transparent 65%),
		linear-gradient(135deg, var(--color-brand-secondary), var(--color-brand-secondary));
	box-shadow: 0 0 0 4px rgba(204, 53, 53, 0.12);
}

.host-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin: 0 0 10px;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 13px 18px;
	border-radius: 14px;
	text-decoration: none;
	font-weight: 700;
	letter-spacing: 0.01em;
	border: 1px solid transparent;
	transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease;
	will-change: transform;
}

.btn:focus {
	outline: none;
}

.btn:focus-visible {
	box-shadow: 0 0 0 4px rgba(74, 163, 255, 0.35);
}

.btn--primary {
	background-image: linear-gradient(to right, #bb241f 0%, #b31217  51%, #931b17  100%);
	color: #fff;
    cursor: pointer;
    text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
}

.btn--primary:hover{
    color: #fff;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}     

.btn--secondary {
	background: rgba(255, 255, 255, 0.06);
	border-color: var(--hero-border);
	color: var(--hero-text);
}

.btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.btn--secondary:hover {
	border-color: rgba(255, 255, 255, 0.22);
	background: rgba(48, 45, 92, 0.08);
}

.btn--primary-alt {
    background-image: linear-gradient(to right, #bb241f 0%, #b31217  51%, #931b17  100%);
	color: #fff;
    cursor: pointer;
    text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
    border: none;
}
.btn--primary-alt:hover{
    color: #fff;
    border: none;
}

.host-hero__micro {
	margin: 8px 0 18px;
	color: var(--hero-faint);
	font-size: 0.95rem;
}

.host-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.trust-pill {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	padding: 10px 12px;
	border-radius: 999px;
	border: 1px solid var(--hero-border);
	background: rgba(255, 255, 255, 0.04);
	box-shadow: var(--hero-shadow-soft);
}

.trust-pill strong {
	font-size: 0.95rem;
	color: #fff;
}

.trust-pill span {
	font-size: 0.9rem;
	color: var(--hero-muted);
}

/* Right side visual */
.host-hero__visual {
	position: relative;
	min-height: 420px;
}

.hero-card {
	position: relative;
	z-index: 2;
	border-radius: var(--radius-xl);
	border: 1px solid var(--hero-border);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
	box-shadow: var(--hero-shadow);
	overflow: hidden;
}

.hero-card__top {
	display: flex;
	gap: 8px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--hero-border);
	background: rgba(255, 255, 255, 0.04);
}

.dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.25);
}

.hero-card__body {
	padding: 18px 18px 16px;
}




.metric {
	padding: 12px 12px;
	border-radius: var(--radius-lg);
	background: rgba(0, 0, 0, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.10);
	margin-bottom: 12px;
}

.metric__label {
	color: var(--hero-muted);
	font-size: 0.92rem;
	margin-bottom: 6px;
}

.metric__value {
	font-size: 1.55rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin-bottom: 10px;
}

.metric__bar {
	height: 10px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 999px;
	overflow: hidden;
}

.metric__bar span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.metric--compact {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.metric--compact .metric__value,
.metric--compact .metric__bar {
	display: none;
}

.metric__badge {
	font-weight: 800;
	padding: 6px 10px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	font-size: 0.9rem;
}




.hero-card__footer {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.chip {
	border-radius: 999px;
	padding: 8px 10px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.04);
	color: var(--hero-muted);
	font-weight: 700;
	font-size: 0.9rem;
}

/* Decorative blobs */
.blob {
	position: absolute;
	z-index: 1;
	filter: blur(32px);
	opacity: 0.7;
	transform: translateZ(0);
	border-radius: 999px;
}

.blob--a {
	width: 280px;
	height: 280px;
	right: 10%;
	top: -5%;
	background: radial-gradient(circle at 30% 30%, rgba(204, 53, 53, 0.25), rgba(204, 53, 53, 0.1) 60%, transparent 70%);
}

.blob--b {
	width: 320px;
	height: 320px;
	right: -8%;
	bottom: -10%;
	background: radial-gradient(circle at 30% 30%, rgba(74, 163, 255, 0.25), rgba(74, 163, 255, 0.1) 60%, transparent 70%);
}

/* Responsive */
@media (max-width: 980px) {
	.host-hero__grid {
		grid-template-columns: 1fr;
	}
	.host-hero__visual {
		min-height: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.btn {
		transition: none;
	}
	.btn:hover {
		transform: none;
	}
}
.panel-title {
	font-weight: 900;
	letter-spacing: -0.01em;
	margin: 2px 0 4px;
	font-size: 1.05rem;
	color: #fff;
}

.panel-subtitle {
	color: var(--hero-muted);
	font-size: 0.95rem;
	margin: 0 0 14px;
	line-height: 1.35;
}

.svc-list {
	display: grid;
	gap: 10px;
}

.svc {
	display: grid;
	grid-template-columns: 36px 1fr auto;
	align-items: center;
	gap: 10px;
	padding: 12px 12px;
	border-radius: 16px;
	background: rgba(0, 0, 0, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.10);
}

.svc__icon {
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.10);
	font-size: 18px;
}

.svc__name {
	font-weight: 800;
	color: #fff;
	line-height: 1.15;
	margin-bottom: 2px;
}

.svc__desc {
	color: var(--hero-muted);
	font-size: 0.92rem;
	line-height: 1.2;
}

.svc__chip {
	font-weight: 800;
	padding: 6px 10px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	font-size: 0.85rem;
	white-space: nowrap;
}

.svc__chip--alt {
	border-color: rgba(204, 53, 53, 0.22);
	background: rgba(204, 53, 53, 0.12);
}





/*-feature-sections-*/

.feature-section {
	padding-top: 50px;
	padding-bottom: 50px;
}

.feature-title {
	font: var(--heading-font-family);
	color: #121212;
	margin-bottom: 1rem;
}
.feature-title h2 {
	font-weight: 700;
}

.features-container {
	width: min(1120px, calc(100% - 40px));
	margin-inline: auto;
}

.feature-card {
	scroll-snap-align: start;
	border-radius: 18px;
	padding: 18px 18px 16px;
	min-height: 210px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);

	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
	height: 100%;
	display: flex;
	flex-direction: column;
}

.feature-card__icon {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	display: grid;
	place-items: center;

	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.18);
	margin-bottom: 12px;
}

.feature-card__title {
	font-size: 18px;
	margin: 0 0 8px;
	letter-spacing: -0.01em;
}

.feature-card__text {
	margin: 0 0 12px;
	line-height: 1.55;
	opacity: 0.9;
	flex: 1;
}

.feature-card__meta {
	margin: 0;
	font-size: 13px;
	opacity: 0.75;
}

/* ---------------------------
   3-Column Feature Grid
---------------------------- */

.host-feature-grid {
	padding: clamp(56px, 7vw, 96px) 0;
}

.host-feature-grid__wrap {
	display: grid;
	grid-template-columns: 1.05fr 1fr 1fr;
	gap: clamp(18px, 2.5vw, 40px);
	align-items: stretch;
}

/* Left column */
.host-feature-grid__intro {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.host-feature-grid__intro .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 12px;
	opacity: 0.85;
	margin-bottom: 12px;
}

.host-feature-grid__intro .h2 {
	font-size: clamp(28px, 3.2vw, 40px);
	line-height: 1.1;
	margin: 0 0 14px;
}

.host-feature-grid__intro .lead {
	font-size: 16px;
	line-height: 1.6;
	opacity: 0.9;
	margin: 0 0 18px;
}

.host-feature-grid__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Feature columns */
.host-feature-grid__col {
	display: grid;
	gap: 16px;
	align-content: center;
	/* centers the stack relative to intro height */
}

/* Feature items (card-like rows) */
.feature-item {
	display: grid;
	grid-template-columns: 46px 1fr;
	gap: 14px;
	align-items: start;

	padding: 16px 16px;
	border-radius: 18px;

	/* Glassy surface — adjust if your section is light */
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.16);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);

	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
}

.feature-item__icon {
	width: 46px;
	height: 46px;
	border-radius: 14px;
	display: grid;
	place-items: center;

	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.18);
}

.feature-item__title {
	font-size: 16px;
	margin: 2px 0 6px;
	letter-spacing: -0.01em;
}

.feature-item__text {
	margin: 0;
	line-height: 1.55;
	opacity: 0.9;
}

/* Responsive */
@media (max-width: 980px) {
	.host-feature-grid__wrap {
		grid-template-columns: 1fr;
	}

	.host-feature-grid__col {
		grid-template-columns: 1fr;
		align-content: start;
	}
}




/* ===========================
   Plans & Pricing Section
   Integrated with your tokens + .btn--primary
=========================== */

.host-plans {
	padding: clamp(56px, 7vw, 96px) 0;
	background: var(--color-surface);
	color: var(--color-text);
}

.host-plans .h2,
.host-plans h2 {
	font-family: var(--heading-font-family);
	color: var(--color-heading);
	letter-spacing: -0.02em;
}

.host-plans__header {
	max-width: 72ch;
	margin: 0 0 var(--space-5);
}

.host-plans__header .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--heading-font-family);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 12px;
	color: var(--color-brand-secondary);
	margin-bottom: var(--space-2);
}

.host-plans__header .lead {
	font-size: var(--font-size-100);
	line-height: 1.7;
	opacity: 0.92;
	margin: 0;
}

/* Grid */
.host-plans__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(14px, 2vw, 22px);
	align-items: stretch;
}

/* Cards */
.plan-card {
	position: relative;
	display: flex;
	flex-direction: column;

	padding: var(--space-5);
	border-radius: var(--radius-xl);

	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.10);
	box-shadow: var(--shadow-sm);

	transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.plan-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	border-color: rgba(0, 0, 0, 0.14);
}

.plan-card__name {
	font-family: var(--heading-font-family);
	font-size: var(--font-size-300);
	letter-spacing: -0.015em;
	margin: 0 0 var(--space-1);
	color: var(--color-heading);
}

.plan-card__for {
	margin: 0 0 var(--space-4);
	opacity: 0.85;
	line-height: 1.6;
}

/* Price block */
.plan-card__price {
	display: grid;
	gap: 6px;
	margin: 0 0 var(--space-4);
}

.plan-card__amount {
	font-family: var(--heading-font-family);
	font-weight: 900;
	font-size: clamp(34px, 3.2vw, 46px);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--color-heading);
}

.plan-card__term {
	font-family: var(--heading-font-family);
	font-weight: 700;
	opacity: 0.75;
	margin-left: 6px;
}

.plan-card__note {
	font-size: var(--font-size-90);
	color: var(--color-text);
	opacity: 0.75;
}

/* Bullets */
.plan-card__list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-5);
	display: grid;
	gap: 10px;
}

.plan-card__list li {
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: 10px;
	align-items: start;
	line-height: 1.55;
	opacity: 0.92;
}

/* Checkmark bullet */
.plan-card__list li::before {
	content: "";
	width: 18px;
	height: 18px;
	border-radius: 999px;
	margin-top: 2px;

	background: rgba(204, 53, 53, 0.14);
	border: 1px solid rgba(204, 53, 53, 0.28);

	clip-path: polygon(20% 55%, 28% 47%, 42% 62%, 73% 32%, 81% 40%, 42% 78%);
}

/* Actions */
.plan-card__actions {
	margin-top: auto;
	display: grid;
	gap: var(--space-2);
}

/* Make buttons feel “pricing-native” */
.plan-card__actions .btn {
	width: 100%;
	justify-content: center;
}

/* Secondary CTA: outline variant that matches your system */
.btn--outline {
	background: transparent;
	color: var(--color-heading);
	border-color: rgba(0, 0, 0, 0.18);
	box-shadow: none;
}

.btn--outline:hover {
	background: rgba(0, 0, 0, 0.04);
	border-color: rgba(0, 0, 0, 0.28);
	box-shadow: var(--shadow-sm);
}

/* Featured (Most Popular) */
.plan-card--featured {
	border-color: rgba(204, 53, 53, 0.35);
	box-shadow: var(--shadow-md);
	transform: translateY(-4px);
}

.plan-card--featured:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-lg);
	border-color: rgba(204, 53, 53, 0.45);
}

.plan-card__badge {
	position: absolute;
	top: 14px;
	right: 14px;

	font-family: var(--heading-font-family);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;

	padding: 8px 10px;
	border-radius: 999px;

	background: var(--color-brand-primary);
	color: #fff;
	box-shadow: var(--shadow-sm);
}

/* Included band */
.host-plans__included {
	margin-top: var(--space-5);
	padding: var(--space-4);
	border-radius: var(--radius-xl);

	background: rgba(255, 255, 255, 0.75);
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: var(--shadow-sm);
}

.host-plans__included-title {
	font-family: var(--heading-font-family);
	font-size: var(--font-size-200);
	margin: 0 0 var(--space-3);
	color: var(--color-heading);
}

.host-plans__included-list {
	list-style: none;
	padding: 0;
	margin: 0;

	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.host-plans__included-list li {
	font-size: var(--font-size-90);
	padding: 8px 10px;
	border-radius: 999px;

	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: var(--shadow-sm);
}

/* Helper CTA row */
.host-plans__helper {
	margin-top: var(--space-5);
	padding: var(--space-4);
	border-radius: var(--radius-xl);

	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.10);
	box-shadow: var(--shadow-sm);

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	flex-wrap: wrap;
}

.host-plans__helper p {
	margin: 0;
	line-height: 1.6;
}

.host-plans__helper strong {
	font-family: var(--heading-font-family);
	color: var(--color-heading);
}

/* Responsive */
@media (max-width: 980px) {
	.host-plans__grid {
		grid-template-columns: 1fr;
	}

	.plan-card--featured {
		transform: none;
	}

	.plan-card--featured:hover {
		transform: translateY(-2px);
	}

	.plan-card__badge {
		top: 12px;
		right: 12px;
	}
}

/* ===========================
   Managed band (beneath core plans)
=========================== */

.host-managed {
	margin-top: var(--space-6);
	padding: var(--space-5);
	border-radius: var(--radius-xl);
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.10);
	box-shadow: var(--shadow-sm);
}

.host-managed__header {
	max-width: 80ch;
	margin: 0 0 var(--space-4);
}

.host-managed__title {
	font-family: var(--heading-font-family);
	font-size: var(--font-size-300);
	margin: 0 0 var(--space-2);
	color: var(--color-heading);
	letter-spacing: -0.01em;
}

.host-managed__lead {
	margin: 0;
	opacity: 0.9;
	line-height: 1.7;
}

.host-managed__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(14px, 2vw, 22px);
	align-items: stretch;
}

.managed-card {
	position: relative;
	padding: var(--space-5);
	border-radius: var(--radius-xl);
	background: rgba(229, 229, 229, 0.35);
	/* ties to --color-surface */
	border: 1px solid rgba(0, 0, 0, 0.10);
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
}

.managed-card__name {
	font-family: var(--heading-font-family);
	font-size: var(--font-size-300);
	margin: 0 0 var(--space-1);
	color: var(--color-heading);
}

.managed-card__for {
	margin: 0 0 var(--space-4);
	opacity: 0.9;
	line-height: 1.6;
}

.managed-card__list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-4);
	display: grid;
	gap: 10px;
}

.managed-card__list li {
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: 10px;
	align-items: start;
	line-height: 1.55;
	opacity: 0.92;
}

.managed-card__list li::before {
	content: "";
	width: 18px;
	height: 18px;
	border-radius: 999px;
	margin-top: 2px;
	background: rgba(204, 53, 53, 0.14);
	border: 1px solid rgba(204, 53, 53, 0.28);
	clip-path: polygon(20% 55%, 28% 47%, 42% 62%, 73% 32%, 81% 40%, 42% 78%);
}

.managed-card__actions {
	margin-top: auto;
	display: grid;
	gap: var(--space-2);
}

.managed-card__actions .btn {
	width: 100%;
	justify-content: center;
}

.managed-card--featured {
	border-color: rgba(204, 53, 53, 0.35);
	box-shadow: var(--shadow-md);
}

.managed-card__badge {
	position: absolute;
	top: 14px;
	right: 14px;
	font-family: var(--heading-font-family);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 8px 10px;
	border-radius: 999px;
	background: var(--color-brand-primary);
	color: #fff;
	box-shadow: var(--shadow-sm);
}

@media (max-width: 980px) {
	.host-managed {
		padding: var(--space-4);
	}

	.host-managed__grid {
		grid-template-columns: 1fr;
	}
}

/* ===========================
   How It Works (Process)
=========================== */

.host-process {
	padding: clamp(56px, 7vw, 96px) 0;
	background: var(--color-surface);
	color: var(--color-text);
}

.host-process__header {
	max-width: 72ch;
	margin: 0 0 var(--space-5);
}

.host-process__header .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--heading-font-family);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 12px;
	color: var(--color-brand-secondary);
	margin-bottom: var(--space-2);
}

.host-process__header .h2 {
	font-family: var(--heading-font-family);
	font-size: clamp(28px, 3.2vw, 44px);
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--color-heading);
	margin: 0 0 var(--space-3);
}

.host-process__header .lead {
	font-size: var(--font-size-100);
	line-height: 1.7;
	opacity: 0.92;
	margin: 0;
}

/* Steps */
.host-process__steps {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-5);
	display: grid;
	gap: var(--space-4);
}

.process-step {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: var(--space-4);
	padding: var(--space-4);
	border-radius: var(--radius-xl);
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.10);
	box-shadow: var(--shadow-sm);
}

.process-step__num {
	font-family: var(--heading-font-family);
	font-weight: 900;
	font-size: 1.75rem;
	line-height: 1;
	color: var(--color-brand-primary);
}

.process-step__title {
	font-family: var(--heading-font-family);
	font-size: var(--font-size-200);
	margin: 0 0 var(--space-1);
	color: var(--color-heading);
}

.process-step__text {
	margin: 0;
	line-height: 1.6;
	opacity: 0.9;
}

/* CTA */
.host-process__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	flex-wrap: wrap;

	padding: var(--space-4);
	border-radius: var(--radius-xl);
	background: rgba(255, 255, 255, 0.75);
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: var(--shadow-sm);
}

.host-process__cta p {
	margin: 0;
	line-height: 1.6;
}

.host-process__cta strong {
	font-family: var(--heading-font-family);
	color: var(--color-heading);
}

/* Responsive */
@media (max-width: 980px) {
	.process-step {
		grid-template-columns: 1fr;
	}

	.process-step__num {
		font-size: 1.5rem;
	}
}

/* ===========================
   Included With Every Plan
=========================== */

.host-included {
	padding: clamp(56px, 7vw, 96px) 0;
	background: var(--color-surface);
	color: var(--color-text);
}

.host-included__header {
	max-width: 72ch;
	margin: 0 0 var(--space-5);
}

.host-included__header .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--heading-font-family);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 12px;
	color: var(--color-brand-secondary);
	margin-bottom: var(--space-2);
}

.host-included__header .h2 {
	font-family: var(--heading-font-family);
	font-size: clamp(28px, 3.2vw, 44px);
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--color-heading);
	margin: 0 0 var(--space-3);
}

.host-included__header .lead {
	font-size: var(--font-size-100);
	line-height: 1.7;
	opacity: 0.92;
	margin: 0;
}

/* Grid */
.host-included__grid {
	list-style: none;
	padding: 0;
	margin: 0;

	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(12px, 1.6vw, 16px);
	align-items: stretch;
}

.included-item {
	display: flex;
	align-items: center;
	gap: 12px;

	padding: 14px 14px;
	border-radius: var(--radius-xl);

	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.10);
	box-shadow: var(--shadow-sm);

	transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.included-item:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	border-color: rgba(0, 0, 0, 0.14);
}

.included-item__icon {
	width: 42px;
	height: 42px;
	border-radius: var(--radius-lg);
	display: grid;
	place-items: center;

	background: rgba(204, 53, 53, 0.10);
	border: 1px solid rgba(204, 53, 53, 0.22);
	color: var(--color-brand-primary);
	flex: 0 0 auto;
}

.included-item__label {
	font-family: var(--heading-font-family);
	font-weight: 600;
	font-size: var(--font-size-100);
	color: var(--color-heading);
	line-height: 1.25;
}

/* Responsive */
@media (max-width: 980px) {
	.host-included__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.host-included__grid {
		grid-template-columns: 1fr;
	}
}
/* ===========================
   FAQ Section
=========================== */

.host-faq {
	padding: clamp(56px, 7vw, 96px) 0;
	background: var(--color-surface);
	color: var(--color-text);
}

.host-faq__header {
	max-width: 72ch;
	margin: 0 0 var(--space-5);
}

.host-faq__header .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--heading-font-family);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 12px;
	color: var(--color-brand-secondary);
	margin-bottom: var(--space-2);
}

.host-faq__header .h2 {
	font-family: var(--heading-font-family);
	font-size: clamp(28px, 3.2vw, 44px);
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--color-heading);
	margin: 0 0 var(--space-3);
}

.host-faq__header .lead {
	font-size: var(--font-size-100);
	line-height: 1.7;
	opacity: 0.92;
	margin: 0;
}

.host-faq__list {
	display: grid;
	gap: var(--space-3);
}

/* Accordion */
.faq-item {
	border-radius: var(--radius-xl);
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.10);
	box-shadow: var(--shadow-sm);
	padding: 0;
}

.faq-item summary {
	cursor: pointer;
	padding: var(--space-4);
	font-family: var(--heading-font-family);
	font-weight: 600;
	list-style: none;
	position: relative;
}

.faq-item summary::-webkit-details-marker {
	display: none;
}

.faq-item summary::after {
	content: "+";
	position: absolute;
	right: var(--space-4);
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.4rem;
	color: var(--color-brand-primary);
}

.faq-item[open] summary::after {
	content: "–";
}

.faq-item p {
	padding: 0 var(--space-4) var(--space-4);
	margin: 0;
	line-height: 1.6;
	opacity: 0.9;
}

/* Responsive */
@media (max-width: 980px) {
	.faq-item summary {
		padding-right: 56px;
	}
}
/* ===========================
   Final CTA
=========================== */

.host-final-cta {
	padding: clamp(64px, 8vw, 120px) 0;
	background: var(--color-surface);
	color: var(--color-text);
}

.host-final-cta__panel {
	position: relative;
	padding: clamp(32px, 4vw, 56px);
	border-radius: var(--radius-xl);

	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.10);
	box-shadow: var(--shadow-md);

	display: grid;
	gap: var(--space-4);
	text-align: center;
}

.host-final-cta__content {
	max-width: 70ch;
	margin: 0 auto;
}

.host-final-cta .h2 {
	font-family: var(--heading-font-family);
	font-size: clamp(28px, 3vw, 42px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--color-heading);
	margin: 0 0 var(--space-3);
}

.host-final-cta .lead {
	font-size: var(--font-size-100);
	line-height: 1.7;
	opacity: 0.92;
	margin: 0;
}

.host-final-cta__actions {
	display: flex;
	justify-content: center;
	gap: var(--space-3);
	flex-wrap: wrap;
	margin-top: var(--space-2);
}

.host-final-cta__actions .btn {
	min-width: 220px;
}

.host-final-cta__micro {
	margin: 0;
	font-size: var(--font-size-90);
	opacity: 0.75;
}

/* Subtle separation from footer */
.host-final-cta::after {
	content: "";
	display: block;
	height: 1px;
	width: min(900px, 90%);
	margin: var(--space-5) auto 0;
	background: rgba(0, 0, 0, 0.08);
}
/* ===========================
   Footer
=========================== */

.host-footer {
	background: var(--hero-bg);
	color: var(--hero-text);
	padding: clamp(56px, 7vw, 84px) 0 28px;
	border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.host-footer__top {
	display: grid;
	grid-template-columns: 1.25fr 1fr 1fr 0.9fr;
	gap: clamp(18px, 3vw, 44px);
	align-items: start;
	padding-bottom: var(--space-5);
	border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

/* Brand */
.host-footer__logo {
	font-family: var(--heading-font-family);
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0 0 var(--space-2);
	font-size: 1.4rem;
	color: #fff;
}

.host-footer__tagline {
	margin: 0 0 var(--space-3);
	color: var(--hero-muted);
	line-height: 1.6;
	max-width: 44ch;
}

/* Small pills */
.host-footer__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.footer-pill {
	display: inline-flex;
	align-items: center;
	padding: 8px 10px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.06);
	color: var(--hero-muted);
	font-weight: 700;
	font-size: 0.9rem;
}

/* Nav blocks */
.host-footer__title {
	font-family: var(--heading-font-family);
	font-weight: 700;
	margin: 0 0 var(--space-2);
	color: #fff;
	letter-spacing: -0.01em;
	font-size: 1.05rem;
}

.host-footer__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 10px;
}

.host-footer__list li {
	color: var(--hero-muted);
	line-height: 1.5;
}

.host-footer__list a {
	color: var(--hero-text);
	opacity: 0.88;
	text-decoration: none;
}

.host-footer__list a:hover {
	opacity: 1;
	color: #fff;
}

.host-footer__label {
	color: rgba(255, 255, 255, 0.70);
	font-weight: 700;
}

/* Bottom bar */
.host-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	justify-content: space-between;
	padding-top: var(--space-4);
}

.host-footer__copyright {
	margin: 0;
	color: rgba(255, 255, 255, 0.70);
	font-size: 0.95rem;
}

.host-footer__bottom-links {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: rgba(255, 255, 255, 0.70);
	font-size: 0.95rem;
}

.host-footer__bottom-links a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
}

.host-footer__bottom-links a:hover {
	color: #fff;
}

.host-footer__dot {
	opacity: 0.6;
}

/* Responsive */
@media (max-width: 980px) {
	.host-footer__top {
		grid-template-columns: 1fr;
	}

	.host-footer__tagline {
		max-width: none;
	}
}


/*-plan/product pages-*/
/* ===========================
   Single Plan Page Template
   (Drop-in CSS)
=========================== */

/* Page wrapper utilities */
.plan-page {
  background: var(--color-surface);
  color: var(--color-text);
}

/* Common section wrapper */
.plan-section {
  padding: clamp(44px, 6vw, 84px) 0;
}

.plan-section--alt {
  background: rgba(255,255,255,0.60);
  border-top: 1px solid rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* Headings + lead text (align with your existing patterns) */
.plan-page .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--heading-font-family);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--color-brand-secondary);
  margin: 0 0 var(--space-2);
}

.plan-page .h1 {
  font-family: var(--heading-font-family);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 var(--space-3);
  font-size: clamp(34px, 4vw, 56px);
  color: var(--color-heading);
}

.plan-page .h2 {
  font-family: var(--heading-font-family);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 var(--space-3);
  font-size: clamp(26px, 3vw, 40px);
  color: var(--color-heading);
}

.plan-page .lead {
  font-size: var(--font-size-100);
  line-height: 1.75;
  opacity: 0.92;
  margin: 0;
  max-width: 72ch;
}

/* ===========================
   Plan Hero
=========================== */

.plan-hero {
  padding: calc(var(--header-h) + clamp(40px, 6vw, 80px)) 0 clamp(48px, 7vw, 92px);
  background: linear-gradient(180deg, #f4f4f4 0%, var(--color-surface) 100%);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.plan-hero .lead {
  margin-top: 0;
  margin-bottom: var(--space-4);
}

.plan-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-4);
}

.plan-hero__actions .btn {
  min-width: 220px;
}

.plan-hero__micro {
  margin: var(--space-3) 0 0;
  font-size: var(--font-size-90);
  opacity: 0.75;
}

/* Optional “hero panel” look (if you want extra punch) */
.plan-hero__panel {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: var(--shadow-sm);
}

/* ===========================
   Plan Fit List (Who it's for)
=========================== */

.plan-fit {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  max-width: 74ch;
}

.plan-fit li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  line-height: 1.6;
  opacity: 0.92;
}

/* Brand-styled check */
.plan-fit li::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 999px;
  margin-top: 3px;
  background: rgba(204, 53, 53, 0.14);
  border: 1px solid rgba(204, 53, 53, 0.28);
  clip-path: polygon(20% 55%, 28% 47%, 42% 62%, 73% 32%, 81% 40%, 42% 78%);
}

/* ===========================
   Included List (Plan-specific)
=========================== */

.plan-includes {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.plan-includes li {
  padding: 14px 14px;
  border-radius: var(--radius-xl);
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: var(--shadow-sm);

  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  line-height: 1.55;
  opacity: 0.95;
}

.plan-includes li::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 999px;
  margin-top: 2px;
  background: rgba(204, 53, 53, 0.14);
  border: 1px solid rgba(204, 53, 53, 0.28);
  clip-path: polygon(20% 55%, 28% 47%, 42% 62%, 73% 32%, 81% 40%, 42% 78%);
}

/* ===========================
   Comparison Cards
=========================== */

.plan-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 20px);
  margin-top: var(--space-4);
}

.plan-compare > div {
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: var(--shadow-sm);
}

.plan-compare h3 {
  font-family: var(--heading-font-family);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
  color: var(--color-heading);
  font-size: var(--font-size-200);
}

.plan-compare p {
  margin: 0;
  line-height: 1.65;
  opacity: 0.92;
}

/* ===========================
   Steps List
=========================== */

.plan-steps {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;

  display: grid;
  gap: 12px;
  max-width: 80ch;
}

.plan-steps li {
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: var(--shadow-sm);

  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 14px;
  align-items: start;
}

.plan-steps li::before {
  content: counter(step, decimal-leading-zero);
  counter-increment: step;
  display: grid;
  place-items: center;

  width: 54px;
  height: 54px;
  border-radius: var(--radius-xl);

  font-family: var(--heading-font-family);
  font-weight: 900;
  font-size: 18px;
  color: var(--color-brand-primary);

  background: rgba(204, 53, 53, 0.10);
  border: 1px solid rgba(204, 53, 53, 0.22);
}

/* start counter */
.plan-steps { counter-reset: step; }

/* ===========================
   FAQ (safe styling if needed)
   If you already have .faq-item styles,
   these will only lightly reinforce.
=========================== */

.plan-page .faq-item {
  margin-top: var(--space-3);
  border-radius: var(--radius-xl);
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: var(--shadow-sm);
}

.plan-page .faq-item summary {
  padding: var(--space-4);
  font-family: var(--heading-font-family);
  font-weight: 650;
  cursor: pointer;
  list-style: none;
  position: relative;
}

.plan-page .faq-item summary::-webkit-details-marker { display: none; }

.plan-page .faq-item summary::after {
  content: "+";
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.35rem;
  color: var(--color-brand-primary);
}

.plan-page .faq-item[open] summary::after { content: "–"; }

.plan-page .faq-item p {
  padding: 0 var(--space-4) var(--space-4);
  margin: 0;
  line-height: 1.65;
  opacity: 0.92;
}

/* ===========================
   Final CTA (plan page)
=========================== */

.plan-final-cta {
  padding: clamp(56px, 7vw, 96px) 0;
  background: var(--color-surface);
}

.plan-final-cta .container {
  text-align: center;
}

.plan-final-cta .lead {
  margin: 0 auto;
  margin-top: var(--space-2);
  margin-bottom: var(--space-4);
}

.plan-final-cta__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.plan-final-cta__actions .btn {
  min-width: 220px;
}

/* ===========================
   Responsive
=========================== */

@media (max-width: 980px) {
  .plan-includes {
    grid-template-columns: 1fr;
  }
  .plan-compare {
    grid-template-columns: 1fr;
  }
  .plan-steps li {
    grid-template-columns: 1fr;
  }
  .plan-steps li::before {
    width: 48px;
    height: 48px;
    font-size: 16px;
  }
}

/* ================================
   Privacy Policy Page Styles
   ================================ */

.privacy-policy {
    max-width: 960px;
    margin: 0 auto;
    padding: clamp(48px, 6vw, 96px) 24px;
    line-height: 1.65;
    color: #222;
}

/* Page Header */
.privacy-policy .page-header {
    margin-bottom: 48px;
}

.privacy-policy .page-header h1 {
    font-size: clamp(2rem, 3vw, 2.75rem);
    font-weight: 700;
    margin-bottom: 8px;
}

.privacy-policy .policy-updated {
    font-size: 0.9rem;
    color: #666;
}

/* Content Typography */
.privacy-policy .policy-content {
    font-size: 1rem;
}

.privacy-policy .policy-content p {
    margin: 0 0 1.25em;
}

.privacy-policy .policy-content h2 {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 2.5em 0 0.75em;
    padding-top: 1em;
    border-top: 1px solid #e2e2e2;
}

/* Lists */
.privacy-policy ul {
    margin: 0 0 1.5em 1.25em;
    padding: 0;
}

.privacy-policy li {
    margin-bottom: 0.75em;
}

/* Links */
.privacy-policy a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.privacy-policy a:hover {
    opacity: 0.85;
}

/* Address Block */
.privacy-policy address {
    font-style: normal;
    margin-top: 1.5em;
    padding-left: 16px;
    border-left: 3px solid #ddd;
    line-height: 1.6;
}

/* Responsive Tweaks */
@media (max-width: 640px) {
    .privacy-policy {
        padding: 40px 16px;
    }

    .privacy-policy .page-header {
        margin-bottom: 32px;
    }

    .privacy-policy .policy-content h2 {
        font-size: 1.25rem;
    }
}