/* CANManage Product page STARTS  */
.canmanage-product {
  /* #F2FAEC */
  --primary-clr-100: hsl(93 69% 94%);
  /* #EEFAE4 */
  --primary-clr-200: hsl(93 69% 94%);
  /*#F8FAF5*/
  --primary-clr-250: oklch(0.9822 0.0069 124.45);
  /* #57823A */
  --primary-clr-300: hsl(96 38% 37%);
  /* #2F5513 */
  --primary-clr-350: oklch(0.4063 0.1034 134.87);
  /* #ffffff */
  --neutral-clr-100: hsl(0 0% 100%);
  /* #EFF0F0*/
  --neutral-clr-150: oklch(0.9544 0.0011 197.14);
  /* #cccccc */
  --neutral-clr-200: hsl(0 0% 80%);
  /* #000000 */
  --neutral-clr-500: hsl(0 0% 0%);

  --fs-200: 2rem;
  --fs-202: 2.2rem;
  --fs-205: 2.5rem;
  --fs-300: clamp(2.5rem, 2vw + 1rem, 3rem);
  --fs-305: clamp(3rem, 2vw + 1rem, 3.5rem);
  /* 38px */
  --fs-308: clamp(3.2rem, 2vw + 1rem, 3.8rem);
  --fs-405: clamp(3.5rem, 2.8vw + 1rem, 4.5rem);
  --fs-500: clamp(4.5rem, 3vw + 1rem, 5rem);

  --fw-bold: 700;

  --size-080: 0.5rem;
  --size-090: 1rem;
  --size-100: 2rem;
  --size-105: 2.5rem;
  --size-200: 3rem;
  --size-300: 5rem;
  --size-600: 10rem;
}

.canmanage-product {
  font-size: var(--fs-200);
}
.canmanage-product>*:not(.canmanage-product__nav) {
  margin-block-end: var(--size-300, 5rem);
}
/* Spacing */
/* :is(.overview-wrapper, .canmanage-content) {
  margin-block-end: var(--size-300, 5rem);
} */

:is(.canmanage-content>*+*, .canmanage-content__title, .canmanage-content__subtitle, .canmanage-content__success) {
   margin-block-end: var(--size-200, 3rem);
		}

.canmanage-content {
  padding-inline: var(--size-100, 2rem);
}

/* BUTTONS/LINKS */

.ccohs-btn-standard--canmanage {
			border: 4px solid var(--clr-neutral-100, #ffffff);
			font-size: var(--fs-202);
			font-weight: var(--fw-bold);
			line-height: 1.2;
			padding: var(--size-090) var(--size-200);
			width: min(335px, 100%);
			border-radius: 100vmin;
			text-decoration: none;
		}

		.ccohs-btn-standard--canmanage:focus-visible {
			box-shadow: 0 0 0 2px var(--neutral-clr-100), 0 0 0 4px var(--clr-primary);
			outline: 2px solid transparent;
		}

		.ccohs-btn-standard--canmanage-white {
			background-color: var(--clr-neutral-100, #ffffff);
			color: var(--primary-clr-300, #57823A);
			border: 4px solid var(--clr-neutral-100);
		}

		a.ccohs-btn-standard--canmanage.ccohs-btn-standard--canmanage-white {
			background-color: var(--clr-neutral-100, #ffffff);
			color: var(--primary-clr-300, #57823A);
			border: 4px solid var(--clr-neutral-100);
		}

		a.ccohs-btn-standard--canmanage.ccohs-btn-standard--canmanage-white:where(:hover, :focus) {
			--clr-neutral-100: oklch(90% 0 0);
			background-color: var(--clr-neutral-100);
			color: var(--primary-clr-300, #57823A);
			outline-color: transparent;
		}

.container a[data-ui="card-button-link"] {
	color: var(--clr-neutral-100, #ffffff);
	font-size: var(--fs-205);
	font-weight: var(--fw-bold);
	padding: var(--size-100) var(--size-300);
	width: min(27ch, 100%);
	border-radius: 100vmin;
	background-color: var(--primary-clr-300);
	background: linear-gradient(180deg, var(--primary-clr-300) 0, var(--primary-clr-350));
	line-height: 1.2;
	text-decoration: none;
}
/* .canmanage-product a.canmanage-btn-link {
  background-color: var(--primary-clr-300);
  color: var(--neutral-clr-100);
  font-size: var(--fs-202);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  padding: var(--size-090) var(--size-200);
  width: min(255px, 100%);
  border-radius: 100vmin;
  text-decoration: none;
} */

.canmanage-product a[data-ui="card-button-link"]:where(:hover, :focus) {
  --primary-clr-300: hsl(96 38% 27%);
  background-color: var(--primary-clr-300);
  color: var(--neutral-clr-100);
  outline-color: transparent;
}

.canmanage-product a[data-ui="card-button-link"]:focus-visible {
  box-shadow: 0 0 0 2px var(--neutral-clr-100), 0 0 0 4px var(--primary-clr-300);
  outline: 2px solid transparent;
}



/* NAVBAR */

.canmanage-product__nav {
  background-color: var(--primary-clr-200);
  padding: var(--size-100);
  font-size: var(--fs-200);
}
.canmanage-product__nav-list {
  gap: .5rem 2rem;
}

@media screen and (min-width: 992px) {
	.canmanage-product__nav-list {
		gap: unset;
	}

	.canmanage-product__nav-list>*+* {
		border-inline-start: 1px solid var(--neutral-clr-500);
	}

	.canmanage-product__nav-list a {
		padding: var(--size-100);
	}
}

.canmanage-product__nav-item {
  padding-block-end: 0;
}

.container a.canmanage-product__nav-link {
	color: var(--neutral-clr-500);
	text-decoration: underline;
	font-weight: var(--fw-bold);
}

.container a.canmanage-product__nav-link:hover {
  color: var(--primary-clr-300);
  text-decoration: underline;
}

.container a.canmanage-product__nav-link:focus {
  outline-offset: 0.3rem;

}

.canmanage-product__nav .logo {
  margin-block-start: 1.5rem;
}

@media screen and (min-width: 1200px) {

  .canmanage-product__nav .logo {
    margin-inline-start: auto;
    margin-block-start: inherit;
  }
}

/* HEADER & HERO */
.overview-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
}

.hero-wrapper {
  display: grid;
  place-items: center;
  background-color: var(--primary-clr-300);
  grid-row: 1/ span 1;
  grid-column: 1/-1;
  z-index: 1;
}

.hero-wrapper>.hero-bg {
	opacity: unset;
	object-fit: cover;
	height: 100%;
	width: 100%;
	background-color: var(--primary-clr-350);
}

.hero-wrapper>* {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

.hero-content {
  isolation: isolate;
  padding: var(--size-100);
  width: min(1000px, 100%);

  text-align: center;
  color: var(--neutral-clr-100);
}

.hero-content__main {
  font-size: var(--fs-405);
  line-height: 1.3;
}

.hero-content__secondary {
  font-size: var(--fs-205);
}

@media screen and (max-width: 991px) {
  .hero-content a.canmanage-btn-link--hero {
    margin-block-end: var(--size-200);
  }
}

.hero-content a.canmanage-btn-link--hero {
  background-color: var(--neutral-clr-100);
  color: var(--primary-clr-300);
}

.hero-content a.canmanage-btn-link--hero:is(:hover, :focus) {
  --neutral-clr-100: hsl(0 0% 90%);
  background-color: var(--neutral-clr-100);
  --primary-clr-300: hsl(96 38% 27%);
  color: var(--primary-clr-300);
  outline-color: transparent;
}

.hero-content a.canmanage-btn-link--hero:focus-visible {
  box-shadow: 0 0 0 2px var(--primary-clr-300), 0 0 0 4px var(--neutral-clr-100);
  outline: 2px solid transparent;
}

[data-wrapper="bg"] {
 background-color: var(--primary-clr-250, #f8faf5);
 padding: var(--size-300, 5rem);
}

.overview-content {
  grid-column: 1/-1;
  grid-row: 2;
  padding: var(--size-200) var(--size-100);
  width: min(1078px, 100%);
  justify-self: center;
  box-shadow: 0 0.5rem 1rem var(--neutral-clr-200);
  z-index: 2;
  background-color: var(--neutral-clr-100);

}

.overview-content>section {
  padding-inline-end: var(--size-100);
}


@media screen and (min-width: 992px) {
  .overview-content {
    margin-block-start: -3rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(20ch, 100%), auto));
    grid-row-gap: var(--size-100);

  }

  .overview-content>*+* {
    border-inline-start: 2px solid var(--primary-clr-300);
    padding-inline: var(--size-100);

  }

}

@media screen and (max-width: 991px) {
  .overview-content>*+* {
    border-block-start: 2px solid var(--primary-clr-300);
    margin-block-start: var(--size-100);
    padding-block-start: var(--size-100);
  }
}

.overview-content__title {
  font-size: var(--fs-205);
  font-weight: var(--fw-bold);
}

/* UIs */

/* Features card  */
[data-ui="card"] hr {
	height: 0.4rem;
	background-color: var(--accent-colour);
}


[data-card="heading"] {
	background-color: var(--accent-colour);
	color: var(--neutral-clr-100);
	width: min(22ch, 100%);
}

[data-card="title"] {
	font-size: var(--fs-305, 3.5rem);
}

[data-card="subtitle"] {
	font-size: var(--fs-308);
	color: var(--accent-colour);
	margin-block-start: 0;
}
/* Compare features table UI */
		[data-ui="comparison-table-ui"] {
			outline: 1px solid var(--neutral-clr-150, #EFF0F0);
			box-shadow: 0 .5rem 1rem var(--neutral-clr-200);
			background-color: var(--neutral-clr-150, #EFF0F0);
		}

		[data-ui="comparison-table-ui"] summary>:first-child {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: var(--standard-gap);
		}

		[data-block="summary-heading"] {
			padding-block: var(--size-100);
		}

		[data-ui="comparison-table-ui"] summary:focus svg {
			outline: 2px solid;
		}

		[data-ui="comparison-table-ui"] summary svg {
			height: 1.5em;
			margin-left: 0.5em;
		}

		[data-ui="comparison-table-ui"] [aria-expanded="true"] .vert {
			display: none;
		}

		[data-ui="comparison-table-ui"] [aria-expanded] rect {
			fill: currentColor;
		}

		[data-table="comparison"] td:not(:last-child),
		[data-table="comparison"] th:not(:last-child) {
			border-inline-end: 1px solid var(--neutral-clr-200, #ccc);
		}

		[data-table="comparison"]>tbody>tr:nth-child(odd)>td,
		[data-table="comparison"]>tbody>tr:nth-child(odd)>th {
			background-color: var(--primary-clr-250, #f8faf5);
		}

		.table[data-table="comparison"]>tbody>tr>td {
			vertical-align: middle;
		}

		[data-icon="check"]::before {
			background-image: url('/images/products/canmanage/icon-check.svg');
			width: 23px;
			height: 23px;
		}

		[data-icon="x"]::before {
			background-image: url('/images/products/canmanage/icon-x.svg');
			width: 18px;
			height: 18px;
		}
/* Custom list UI */
[data-list="custom"] li {
	position: relative;
	padding-inline-start: 3.5rem;
}

[data-list="custom"] li::before {
	content: url('/images/products/canmanage/icon-check.svg');
	/* Add icon */
	position: absolute;
	left: 0;
	top: 2px;
}


.canmanage-content__section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(468px, 100%), auto));
  justify-content: space-between;
  gap: var(--size-200);
}

@media screen and (min-width: 1200px) {
  .canmanage-content__section {
    column-gap: var(--size-200);
  }
}


:is(.canmanage-content>*+*, .canmanage-content__title, .canmanage-content__subtitle, .canmanage-content__success) {
  margin-block-end: var(--size-300);
}

.canmanage-content__title {
  color: var(--primary-clr-300);
  font-size: var(--fs-500);
  font-weight: var(--fw-bold);
  margin-block-end: 0;
}

.canmanage-content__subtitle {
  font-size: var(--fs-305);
}

.canmanage-content--features {
  font-size: var(--fs-205);
}

.canmanage-content__subtitle-features {
  font-size: var(--fs-300);
}

.canmanage-content-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), auto));
  justify-content: center;
  column-gap: var(--size-200);
  width: min(1100px, 100%);
  margin-inline: 0;
}

.canmanage-content-list ul {
  font-size: var(--fs-205);
  margin-block-end: 0;
}

/* Utilities */

[data-clr="primary-clr-300"] {
	color: var(--primary-clr-300);
}


.fs-base {
	font-size: var(--fs-200);
}

.fs-205 {
	font-size: var(--fs-205);
}

.padding-100 {
	padding: var(--size-100);
}

.padding-200 {
	padding: var(--size-200);
}

.margin-block-end {
	margin-block-end: var(--size-105);
}