/* ==========================================================================
   PC CleanPro – Landing page styles
   Mobile-first. Structure: tokens → base → components → sections → breakpoints
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
  --primary: #087F5B;
  --primary-dark: #063B32;
  --primary-hover: #066B4C;
  --secondary: #16A085;
  --dark: #111827;
  --text: #475569;
  --muted: #64748B;
  --light-green: #EFFAF5;
  --light-bg: #F8FAFC;
  --white: #FFFFFF;
  --border: #E5E7EB;
  --windows-blue: #087FF5;
  --amber: #F59E0B;

  --font-heading: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --shadow-sm: 0 1px 2px rgba(17, 24, 39, .04), 0 4px 14px rgba(17, 24, 39, .04);
  --shadow-md: 0 10px 30px rgba(6, 59, 50, .08);
  --shadow-lg: 0 24px 50px rgba(6, 59, 50, .14);

  --header-h: 72px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 2. Base ---------- */
html { scroll-padding-top: calc(var(--header-h) + 12px); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .h1, .h2, .h3 {
  font-family: var(--font-heading);
  color: var(--dark);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

img { max-width: 100%; height: auto; }

a { color: var(--primary); }
a:hover { color: var(--primary-hover); }

:focus-visible {
  outline: none;
}

.text-brand { color: var(--primary); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 2000;
  padding: .6rem 1rem;
  background: var(--primary-dark);
  color: var(--white);
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.skip-link:focus { top: 1rem; color: var(--white); }

@media (min-width: 1200px) {
  .container { max-width: 1200px; }
}

/* ---------- 3. Components ---------- */

/* Eyebrow / section label */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .9rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
}
.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--secondary);
  box-shadow: 0 0 0 4px rgba(22, 160, 133, .15);
}
.text-center .eyebrow { display: flex; }

.section-head { margin-bottom: 2.5rem; }

.section-title {
  font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 1rem;
}
.section-title--xl { font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem); max-width: 22ch; }

.section-lead {
  max-width: 620px;
  color: var(--muted);
  font-size: 1.0625rem;
  margin-bottom: 0;
}

/* Buttons */
.btn {
  --bs-btn-font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1.35rem;
  border-radius: var(--radius-sm);
  font-size: .9375rem;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s, color .2s, border-color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .bi-arrow-right { transition: transform .2s var(--ease); }
.btn:hover .bi-arrow-right { transform: translateX(3px); }

.btn-brand {
  background: var(--primary);
  border: 1px solid var(--primary);
  color: var(--white);
  box-shadow: 0 6px 16px rgba(8, 127, 91, .22);
}
.btn-brand:hover, .btn-brand:focus-visible {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--white);
  box-shadow: 0 10px 22px rgba(8, 127, 91, .28);
}

.btn-outline-brand {
  background: var(--white);
  border: 1px solid var(--primary);
  color: var(--primary);
}
.btn-outline-brand:hover, .btn-outline-brand:focus-visible {
  background: var(--light-green);
  border-color: var(--primary);
  color: var(--primary-hover);
}

.btn-light-brand {
  background: var(--white);
  border: 1px solid var(--white);
  color: var(--primary-dark);
}
.btn-light-brand:hover, .btn-light-brand:focus-visible {
  background: var(--light-green);
  color: var(--primary-dark);
}

.btn-ghost-light {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .45);
  color: var(--white);
}
.btn-ghost-light:hover, .btn-ghost-light:focus-visible {
  background: rgba(255, 255, 255, .1);
  border-color: var(--white);
  color: var(--white);
}

.btn-lg-brand { padding: .9rem 1.5rem; font-size: 1rem; }
.btn-sm-brand { padding: .55rem 1.1rem; font-size: .875rem; }

.play-dot {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  font-size: .8rem;
}

/* Icon circles */
.icon-circle {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--light-green);
  color: var(--primary);
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}
.icon-circle--amber { background: #FFF4E5; color: #D97706; }
.icon-circle--blue  { background: #EAF4FF; color: var(--windows-blue); }

/* Floating badges */
.float-badge {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .6rem .9rem .6rem .6rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: .8125rem;
  line-height: 1.2;
  color: var(--dark);
  white-space: nowrap;
}
.float-badge__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--light-green);
  color: var(--primary);
  font-size: 1.1rem;
}
.float-badge__icon--amber { background: #FFF4E5; color: #D97706; }

/* Check list */
.check-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.check-list li {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.125rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  color: var(--dark);
  font-weight: 500;
  line-height: 1.35;
}
.check-list li .bi {
  flex-shrink: 0;
  color: var(--primary);
  font-size: 1.375rem;
  line-height: 1;
}

/* Brand */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  width: 200px;
}
.brand__mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--secondary), var(--primary));
  color: var(--white);
  font-size: 1rem;
}
.brand__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--dark);
  letter-spacing: -0.02em;
}

/* ---------- 4. Header ---------- */
.site-header {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .25s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 6px 20px rgba(17, 24, 39, .06); }

.site-header .navbar { min-height: var(--header-h); padding-block: .5rem; }

.navbar-toggler {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .35rem .6rem;
  font-size: 1.5rem;
  color: var(--dark);
}
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(8, 127, 91, .3); }

.site-header .nav-link {
  font-weight: 500;
  font-size: .9375rem;
  color: var(--text);
  padding: .75rem 0;
  position: relative;
}
.site-header .nav-link:hover,
.site-header .nav-link.active { color: var(--primary); }

.navbar-collapse .btn { margin: .5rem 0 1rem; }

/* ---------- 5. Hero ---------- */
.hero {
  position: relative;
  padding: 3rem 0 4rem;
  background:
    radial-gradient(60% 70% at 85% 30%, rgba(22, 160, 133, .14), transparent 70%),
    radial-gradient(40% 50% at 0% 0%, rgba(8, 127, 91, .07), transparent 70%),
    linear-gradient(180deg, #F3FBF7 0%, var(--white) 100%);
  overflow: hidden;
}

.hero__title {
  font-size: 1.875rem;   /* 30px mobile */
  font-weight: 700;
  margin-bottom: 1.25rem;
}
.hero__title span { color: var(--primary); display: block; }

.hero__lead {
  font-size: 1.0625rem;
  color: var(--text);
  max-width: 540px;
  margin-bottom: 2rem;
}

.trust-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--dark);
}
.trust-list li { display: inline-flex; align-items: center; gap: .45rem; }
.trust-list .bi { color: var(--primary); font-size: 1.05rem; }

/* Hero visual */
.hero-visual {
  position: relative;
  padding: 2.5rem .5rem 2rem;
  max-width: 640px;
  margin-inline: auto;
}

.deco-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.deco-ring--lg {
  width: 88%;
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(22, 160, 133, .18) 0%, rgba(22, 160, 133, .06) 55%, transparent 70%);
}
.deco-ring--sm {
  width: 120px;
  aspect-ratio: 1;
  right: 4%;
  bottom: 6%;
  border: 2px dashed rgba(8, 127, 91, .2);
}

/* Laptop mockup */
.laptop {
  position: relative;
  z-index: 2;
  margin: 0;
  transition: transform .4s var(--ease);
}
.hero-visual:hover .laptop { transform: scale(1.02); }

.laptop__lid {
  width: 90%;
  margin: 0 auto;
  padding: 2%;
  background: #1F2937;
  border-radius: 18px 18px 6px 6px;
  box-shadow: var(--shadow-lg);
}
.laptop__screen {
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  overflow: hidden;
  background: var(--light-bg);
}
.laptop__base {
  position: relative;
  height: 14px;
  background: linear-gradient(180deg, #E2E8F0, #94A3B8);
  border-radius: 0 0 16px 16px;
  box-shadow: 0 18px 30px -10px rgba(17, 24, 39, .3);
}
.laptop__base::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 18%;
  height: 5px;
  transform: translateX(-50%);
  background: #CBD5E1;
  border-radius: 0 0 8px 8px;
}

/* App UI inside the laptop (scales with container) */
.app {
  container-type: inline-size;
  display: grid;
  grid-template-columns: 28% 1fr;
  height: 100%;
  font-size: clamp(7px, 1.6vw, 11px);
  color: var(--dark);
}
.app__side {
  background: var(--white);
  border-right: 1px solid var(--border);
  padding: 1em .9em;
}
.app__logo {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05em;
  color: var(--primary-dark);
  margin-bottom: 1.4em;
  white-space: nowrap;
}
.app__logo .bi { color: var(--primary); }
.app__nav { list-style: none; padding: 0; margin: 0; display: grid; gap: .35em; }
.app__nav li {
  display: flex;
  align-items: center;
  gap: .6em;
  padding: .55em .7em;
  border-radius: .6em;
  color: var(--muted);
  font-weight: 500;
}
.app__nav li.is-active { background: var(--light-green); color: var(--primary); }

.app__main {
  padding: 1.2em;
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(22, 160, 133, .12), transparent 70%),
    var(--light-bg);
  display: flex;
  align-items: center;
}
.scan-card {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 1em;
  padding: 1.2em;
  box-shadow: var(--shadow-sm);
}
.scan-card__head { display: flex; align-items: center; gap: .8em; margin-bottom: 1em; }
.scan-card__head strong { display: block; font-family: var(--font-heading); font-size: 1.35em; line-height: 1.1; }
.scan-card__head small { color: var(--muted); font-size: .9em; }
.scan-card__check {
  display: grid;
  place-items: center;
  width: 2.6em;
  height: 2.6em;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  font-size: 1.1em;
  flex-shrink: 0;
}
.scan-list { list-style: none; padding: 0; margin: 0 0 1em; }
.scan-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .55em 0;
  border-bottom: 1px solid var(--border);
}
.scan-list li:last-child { border-bottom: 0; }
.scan-list span { display: inline-flex; align-items: center; gap: .55em; }
.scan-list .bi { color: var(--secondary); }
.scan-list b { font-weight: 600; color: var(--dark); }
.scan-card__btn {
  display: block;
  text-align: center;
  padding: .75em;
  border-radius: .7em;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  color: var(--white);
  font-weight: 600;
}

/* Hero badge positions (mobile first: tucked in) */
.float-badge--tr { top: 0; right: 0; }
.float-badge--ml { top: 38%; left: 0; }
.float-badge--br { bottom: 0; right: 8%; }

/* ---------- 6. Sections ---------- */
.section { padding: 4.5rem 0; }
.section--tight { padding: 2.5rem 0; }
.section--light { background: var(--light-bg); }

/* Feature cards */
.feature-card {
  height: 100%;
  padding: 2rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(8, 127, 91, .25);
}
.feature-card__title { font-size: 1.25rem; font-weight: 700; margin-bottom: .75rem; }
.feature-card p { margin: 0; color: var(--muted); }

/* Compatibility */
.compat-panel {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 80% at 100% 50%, rgba(22, 160, 133, .22), transparent 70%),
    linear-gradient(120deg, #F3FBF7 0%, #E2F5EC 100%);
  border-block: 1px solid rgba(8, 127, 91, .12);
}
.compat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
.compat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 1rem .5rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--dark);
  text-align: center;
}
.compat-item .bi { font-size: 1.75rem; color: var(--windows-blue); line-height: 1; }
.compat-img { display: block; margin-inline: auto; transition: transform .4s var(--ease); }
.compat-img:hover { transform: scale(1.02); }

/* Why choose us */
.why-visual {
  position: relative;
  /* max-width: 520px; */
  margin-inline: auto;
  padding: 1rem 1.5rem;
}
.why-visual__img { display: block; transition: transform .4s var(--ease); }
.why-visual:hover .why-visual__img { transform: scale(1.02); }
.float-badge--why1 { top: 16%; left: 0; }
.float-badge--why2 { top: 46%; left: -2%; }
.float-badge--why3 { bottom: 6%; right: 0; }

/* Pricing: product cards (<product> is repeated by the store script) */
product { display: block; }

.p-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.75rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(17, 24, 39, .06);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.p-card:hover { transform: translateY(-5px); border-color: rgba(8, 127, 91, .35); box-shadow: 0 18px 40px rgba(6, 59, 50, .12); }

.p-head { display: flex; align-items: center; gap: 1rem; }
.p-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--light-green);
  overflow: hidden;
}
.p-ic img { width: 36px; height: 36px; object-fit: contain; }
.p-name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--dark);
}
.p-desc { margin: .2rem 0 0; font-size: .875rem; line-height: 1.45; color: var(--muted); }

.p-price {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin: 1.75rem 0 1.5rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--muted);
}
.p-price .amt {
  font-family: var(--font-heading);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--dark);
}
.p-price sup { top: -.9em; margin-right: .15rem; font-size: 1.25rem; font-weight: 600; }

.ic { width: 1.25rem; height: 1.25rem; flex: none; }
.ic-sm { width: 1rem; height: 1rem; }

.btn-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: .85rem 1.25rem;
  border-radius: 999px;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn-x .ic { transition: transform .25s var(--ease); }
.btn-x:hover .ic, .btn-x:focus-visible .ic { transform: translateX(3px); }
.btn-x:focus-visible { outline: 3px solid rgba(8, 127, 91, .35); outline-offset: 2px; }
.btn-line { background: transparent; border: 1.5px solid var(--primary); color: var(--primary); }
.btn-line:hover, .btn-line:focus-visible { background: var(--primary); color: var(--white); box-shadow: 0 8px 18px rgba(8, 127, 91, .25); }

.p-inc {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dark);
}
.p-card ul { display: grid; gap: .8rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.p-card li { display: flex; align-items: flex-start; gap: .65rem; font-size: .9375rem; line-height: 1.45; color: var(--text); }
.p-card li .ic {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: .05rem;
  padding: .2rem;
  border-radius: 50%;
  background: var(--light-green);
  color: var(--primary);
}

/* Middle card is the featured plan */
product:nth-of-type(2) .p-card { border: 2px solid var(--primary); box-shadow: var(--shadow-lg); }
product:nth-of-type(2) .btn-line { background: var(--primary); color: var(--white); }
product:nth-of-type(2) .btn-line:hover,
product:nth-of-type(2) .btn-line:focus-visible { background: var(--primary-hover); border-color: var(--primary-hover); }

/* Utility / performance */
/* Layered image block: large image top-right, smaller framed image overlapping bottom-left */
.photo-stack {
  position: relative;
  padding: 0 0 18% 18%;
}
.photo-stack__main {
  display: block;
  width: 100%;
  /* aspect-ratio: 4 / 3.4; */
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.photo-stack__inset {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46%;
  /* aspect-ratio: 4 / 3.4; */
  object-fit: cover;
  /* border: 6px solid var(--white); */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transition: transform .4s var(--ease);
}
.photo-stack:hover .photo-stack__inset { transform: translateY(-6px); }

.flow-card {
  height: 100%;
  padding: 2rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.flow-card__title { font-size: 1.375rem; font-weight: 700; margin-bottom: 1.75rem; }

.flow {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.flow li {
  position: relative;
  padding: 0 0 1.4rem 2.25rem;
}
.flow li:last-child { padding-bottom: 0; }
.flow li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .35rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--secondary);
  z-index: 1;
}
.flow li::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 1.1rem;
  bottom: -.2rem;
  width: 2px;
  background: linear-gradient(var(--secondary), rgba(22, 160, 133, .2));
}
.flow li:last-child::before { background: var(--primary); border-color: var(--primary); }
.flow li:last-child::after { display: none; }
.flow strong { display: block; font-family: var(--font-heading); color: var(--dark); font-size: 1.0625rem; }
.flow span { color: var(--muted); font-size: .9375rem; }

.benefit-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 2rem 0 0;
  padding: 1.5rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.benefit { display: flex; align-items: center; gap: .9rem; }
.benefit__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 14px;
  background: var(--light-green);
  color: var(--primary);
  font-size: 1.35rem;
}
.benefit strong { display: block; font-family: var(--font-heading); color: var(--dark); font-size: 1.0625rem; line-height: 1.3; }
.benefit small { display: block; color: var(--muted); font-size: .875rem; line-height: 1.4; margin-top: .15rem; }

/* FAQ accordion */
.faq {
  --bs-accordion-border-color: var(--border);
  --bs-accordion-border-radius: var(--radius-md);
  --bs-accordion-inner-border-radius: var(--radius-md);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(8, 127, 91, .3);
  --bs-accordion-active-bg: var(--white);
  --bs-accordion-active-color: var(--primary);
  --bs-accordion-btn-padding-y: 1.15rem;
  --bs-accordion-btn-padding-x: 1.35rem;
  --bs-accordion-body-padding-x: 1.35rem;
}
.faq .accordion-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--white);
}
.faq .accordion-item + .accordion-item { margin-top: .85rem; }
.faq .accordion-item:not(:first-of-type) { border-top: 1px solid var(--border); }
.faq .accordion-header { font-family: var(--font-body); letter-spacing: 0; }
.faq .accordion-button {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .975rem;
  color: var(--dark);
  gap: 1rem;
}
.faq .accordion-button:not(.collapsed) { box-shadow: none; color: var(--primary); }
.faq .accordion-button::after {
  /* swap Bootstrap chevron for plus / minus */
  background-image: none;
  font-family: "bootstrap-icons";
  content: "\F64D"; /* bi-plus-lg */
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--light-green);
  color: var(--primary);
  font-size: .85rem;
  transform: none;
}
.faq .accordion-button:not(.collapsed)::after { content: "\F63B"; /* bi-dash-lg */ background: var(--primary); color: var(--white); transform: none; }
.faq .accordion-body { padding-top: 0; color: var(--text); }

/* CTA banner */
.cta-banner {
  position: relative;
  overflow: hidden;
  padding: 2.5rem 1.75rem;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(50% 90% at 0% 0%, rgba(22, 160, 133, .35), transparent 70%),
    var(--primary-dark);
  color: rgba(255, 255, 255, .82);
}
.cta-banner__leaves {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(420px, 70%);
  height: auto;
  pointer-events: none;
}
.cta-banner__title {
  color: var(--white);
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  font-weight: 700;
  margin-bottom: .75rem;
}
.cta-banner__text { margin: 0; max-width: 540px; font-size: 1.0625rem; }

/* Footer */
.site-footer {
  padding: 4.5rem 0 0;
  background: var(--primary-dark);
  color: rgba(255, 255, 255, .72);
  font-size: .9375rem;
}
.site-footer .brand img { display: block; max-width: 180px; height: auto; filter: brightness(0) invert(1);}
.site-footer .nl p { max-width: 300px; margin: 0; line-height: 1.6; }

.site-footer h4 {
  margin-bottom: 1.25rem;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--white);
}
.site-footer ul { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.site-footer ul a { color: rgba(255, 255, 255, .72); text-decoration: none; transition: color .2s var(--ease); }
.site-footer ul a:hover,
.site-footer ul a:focus-visible { color: var(--white); }

.atz-footer__list li { display: flex; align-items: flex-start; gap: .7rem; line-height: 1.5; }
.atz-footer__list svg {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: .15rem;
  color: #6EE7B7;
}
.atz-footer__list a,
.atz-footer__list span { overflow-wrap: anywhere; }

.f-bottom {
  margin-top: 3.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .875rem;
  text-align: center;
  color: rgba(255, 255, 255, .6);
}

/* Back to top */
.to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1030;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  box-shadow: 0 10px 24px rgba(8, 127, 91, .3);
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background-color .2s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--primary-hover); }
.to-top:focus-visible { outline: 3px solid rgba(8, 127, 91, .4); outline-offset: 3px; }
.to-top .ic { width: 1.25rem; height: 1.25rem; }

/* Cookie consent */
#cookiePopup {
  position: fixed;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 1040;
  max-width: 400px;
  padding: 1.5rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  flex-direction: column;
}
.cookie_content h4 {
  margin-bottom: .5rem;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--dark);
}
.cookie_content p { margin: 0 0 1.1rem; font-size: .875rem; line-height: 1.55; color: var(--text); }
.cookie_content a { color: var(--primary); font-weight: 600; }
.cookieBtns { display: flex; gap: .75rem; }
.cookieBtns button {
  flex: 1;
  padding: .65rem 1rem;
  border: 1.5px solid var(--primary);
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 600;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
#acceptCookie { background: var(--primary); color: var(--white); }
#acceptCookie:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
#declineCookie { background: transparent; color: var(--primary); }
#declineCookie:hover { background: var(--primary); color: var(--white);}

@media (max-width: 767.98px) {
  .site-footer .ps-5 { padding-left: 0 !important; }
}
@media (max-width: 575.98px) {
  .site-footer .row > :first-child,
  .site-footer .row > :last-child { flex: 0 0 100%; max-width: 100%; }
  #cookiePopup { left: 1rem; right: 1rem; bottom: 1rem; max-width: none; }
  .to-top { right: 1rem; bottom: 1rem; }
}

/* ---------- 7. Breakpoints ---------- */

/* Small phones: keep hero badges compact */
@media (max-width: 575.98px) {
  .float-badge { font-size: .7rem; padding: .4rem .6rem .4rem .4rem; gap: .45rem; }
  .float-badge__icon { width: 28px; height: 28px; font-size: .9rem; border-radius: 8px; }
  .float-badge--ml { top: 30%; }
  .why-visual { padding: .5rem; }
}

/* Tablet ≥768px */
@media (min-width: 768px) {
  .hero { padding: 4rem 0 5rem; }
  .hero__title { font-size: 2rem; } /* 32px tablet */

  .section { padding: 5.5rem 0; }
  .section--tight { padding: 3rem 0; }
  .section-head { margin-bottom: 3.5rem; }

  .compat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .benefit-strip { grid-template-columns: repeat(2, 1fr); padding: 1.75rem 2rem; gap: 1.5rem; }

  .cta-banner { padding: 3.5rem 3rem; }
}

/* Desktop ≥992px */
@media (min-width: 992px) {
  .site-header .nav-link { padding: .5rem 1rem !important; }
  .navbar-collapse .btn { margin: 0; }

  .hero { padding: 4.5rem 0 5rem; }
  .hero-visual { padding: 3rem 0 2.5rem; margin-right: -1.5rem; }
  .float-badge--tr { top: 4%; right: -2%; }
  .float-badge--ml { top: 40%; left: -6%; }
  .float-badge--br { bottom: 4%; right: 2%; }

  .section { padding: 6rem 0; }

  .benefit-strip { grid-template-columns: repeat(4, 1fr); }
  .benefit + .benefit { border-left: 1px solid var(--border); padding-left: 1.5rem; }

  .compat-img { margin-right: -2rem; }

  .why-visual { padding: 1.5rem 2rem; }
  .float-badge--why1 { left: -4%; }
  .float-badge--why2 { left: -8%; }
}

/* Large desktop ≥1200px */
@media (min-width: 1200px) {
  .hero__title { font-size: 2.625rem; } /* 42px desktop */
  .hero__lead { font-size: 1.125rem; }
  .flow-card { padding: 2.5rem; }
  .cta-banner { padding: 4rem 4.5rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}


/* ---------- 2. Page shell ---------- */
.tc-page {
  display: flow-root; /* keeps .mt-nav's margin inside the tinted background */
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--text);
  background:
    radial-gradient(50% 45% at 90% 0%, rgba(22, 160, 133, .14), transparent 70%),
    radial-gradient(40% 40% at 0% 10%, rgba(8, 127, 91, .07), transparent 70%),
    linear-gradient(180deg, #F3FBF7 0%, var(--white) 60%);
}
 
.product-details-section {
  padding: 2.5rem 0 4rem;
}
 
/* Clears a fixed/sticky header */
.mt-nav { margin-top: var(--header-h); }
 
.luxe-container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1rem;
}
 
/* <product> is a custom element: make it behave like a block */
.product-details-section product { display: block; }
 
/* The markup carries Bootstrap's .text-light (white text) for a dark theme.
   On this light design, re-colour it inside the product area only. */
.product-details-section .text-light { color: var(--dark) !important; }
 
/* ---------- 3. Card ---------- */
.product-content-wrapper {
  position: relative;
  max-width: 880px;
  margin-inline: auto;
  overflow: hidden;
  padding: 1.5rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
 
/* Soft brand glow in the top-right corner, matching the landing page panels */
.product-content-wrapper::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22, 160, 133, .16) 0%, transparent 70%);
  pointer-events: none;
}
.product-content-wrapper > * { position: relative; }
 
/* ---------- 4. Breadcrumb ---------- */
.product-breadcrumb-wrapper {
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
 
.product-breadcrumb {
  flex-wrap: wrap;
  gap: .5rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--muted);
}
.product-breadcrumb a {
  color: var(--muted);
  text-decoration: none;
  border-radius: 4px;
  transition: color .2s;
}
.product-breadcrumb a:hover { color: var(--primary); }
.product-breadcrumb a:focus-visible {
  outline: 3px solid rgba(8, 127, 91, .45);
  outline-offset: 2px;
}
.product-breadcrumb li:not(.active):not(:first-child) { color: #CBD5E1; }
.product-breadcrumb .active { color: var(--dark); font-weight: 600; }
 
/* ---------- 5. Image + title + price ---------- */
/* Bootstrap's col-2 is too narrow on phones, so give the image a fixed,
   usable size there and let the title column take the rest. */
.product-gallery-wrapper .col-2 { flex: 0 0 auto; width: 96px; }
.product-gallery-wrapper .col-10 { flex: 1 1 0; width: auto; min-width: 0; }
 
.product-gallery-img {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: .75rem;
  background: linear-gradient(140deg, var(--light-green), #DDF3EA);
  border: 1px solid rgba(8, 127, 91, .12);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.product-gallery-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .4s var(--ease);
}
.product-gallery-img:hover img { transform: scale(1.02); }
 
.product-title {
  font-family: var(--font-heading);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 .6rem;
}
 
.product-price-wrapper { flex-wrap: wrap; }
 
.product-price {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--primary);
}
 
/* ---------- 6. Description ---------- */
.product-description {
  margin-bottom: 2rem;
  padding: 1.25rem 1.25rem 1.25rem 1.5rem;
  font-size: 1rem;
  line-height: 1.7;
  background: var(--light-bg);
  border-left: 3px solid var(--secondary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.product-details-section .product-description.text-light { color: var(--text) !important; }
 
/* ---------- 7. CTA ---------- */
.product-cta-wrapper {
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
 
/* .btn-yellow is the existing class name; it is styled with the brand green
   so it matches the landing page and keeps the white arrow readable. */
.btn-yellow {
  align-items: center;
  max-width: 100%;
  padding: .9rem 1.6rem;
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(8, 127, 91, .22);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s;
}
.btn-yellow:hover,
.btn-yellow:focus-visible {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(8, 127, 91, .28);
}
.btn-yellow:active { transform: translateY(0); }
.btn-yellow:focus-visible {
  outline: 3px solid rgba(8, 127, 91, .45);
  outline-offset: 3px;
}
.btn-yellow svg { transition: transform .2s var(--ease); }
.btn-yellow:hover svg { transform: translateX(3px); }
 
.product-secondary-btn {
  width: max-content;
  padding: .85rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  color: var(--primary);
  font-weight: 600;
  transition: background-color .2s;
}
.product-secondary-btn:hover { background: var(--light-green); }
 
/* ---------- 8. Breakpoints ---------- */
@media (max-width: 575.98px) {
  /* Inline style sets width: max-content; let the button fill the card on phones */
  .btn-yellow { width: 100% !important; }
  .product-gallery-wrapper .col-2 { width: 76px; }
}
 
@media (min-width: 768px) {
  .product-details-section { padding: 3.5rem 0 5.5rem; }
  .product-content-wrapper { padding: 2.5rem; }
  .product-gallery-wrapper .col-2 { width: 120px; }
  .product-title { font-size: 2rem; }
  .product-price { font-size: 2.125rem; }
}
 
@media (min-width: 1200px) {
  .product-content-wrapper { padding: 3rem 3.5rem; }
  .product-gallery-wrapper .col-2 { width: 140px; }
  .product-title { font-size: 2.5rem; }
  .product-price { font-size: 2.5rem; }
}
 
@media (prefers-reduced-motion: reduce) {
  .product-details-section *,
  .product-details-section *::before,
  .product-details-section *::after {
    transition-duration: .01ms !important;
  }
}

/*******************Contact page********************/
.tc-page a:focus-visible {
  outline: 3px solid rgba(8, 127, 91, .45);
  outline-offset: 3px;
  border-radius: 6px;
}
 
/* ---------- Icons (stroke SVGs) ----------
   Hardened against site-wide resets that set fill/stroke on svg children. */
.tc-page .tc-icon {
  display: inline-block;
  width: 1.25em;
height: 1.25em;
flex-shrink: 0;
overflow: visible;
vertical-align: middle;
fill: none !important;
stroke: currentColor !important;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.tc-page .tc-icon * {
fill: none !important;
stroke: currentColor !important;
stroke-width: inherit;
}

/* ---------- Hero ---------- */
.tc-hero {
position: relative;
overflow: hidden;
padding: 3.5rem 0 7rem;
text-align: center;
background:
  radial-gradient(55% 70% at 85% 10%, rgba(22, 160, 133, .16), transparent 70%),
  radial-gradient(45% 60% at 5% 0%, rgba(8, 127, 91, .08), transparent 70%),
  linear-gradient(180deg, #F3FBF7 0%, var(--light-green) 100%);
border-bottom: 1px solid rgba(8, 127, 91, .08);
}

/* Decorative rings, same language as the landing hero */
.tc-hero::before,
.tc-hero::after {
content: "";
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.tc-hero::before {
width: 360px;
height: 360px;
right: -120px;
bottom: -180px;
border: 2px dashed rgba(8, 127, 91, .14);
}
.tc-hero::after {
width: 220px;
height: 220px;
left: -90px;
top: -80px;
background: radial-gradient(circle, rgba(22, 160, 133, .14), transparent 70%);
}
.tc-hero .container { position: relative; z-index: 1; }

.tc-hero__site {
display: inline-flex;
align-items: center;
gap: .5rem;
margin: 0 0 1.25rem;
padding: .45rem .9rem .45rem .6rem;
background: var(--white);
border: 1px solid rgba(8, 127, 91, .15);
border-radius: 999px;
box-shadow: var(--shadow-sm);
font-size: .75rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--primary);
}
.tc-page .tc-hero__site .tc-icon {
width: 22px;
height: 22px;
padding: 3px;
border-radius: 50%;
background: var(--light-green);
stroke-width: 2;
}

.tc-hero__title {
margin: 0 0 1rem;
font-size: clamp(2.25rem, 1.6rem + 3vw, 3.5rem);
font-weight: 700;
}
.tc-hero__text { color: var(--dark); }

.tc-hero__lede {
max-width: 580px;
margin: 0 auto;
font-size: 1.0625rem;
color: var(--text);
}

/* ---------- Body / panel ---------- */
.tc-body {
position: relative;
z-index: 2;
margin-top: -4.5rem;   /* panel overlaps the hero */
padding-bottom: 5rem;
}

.tc-aside {
max-width: 1080px;
margin-inline: auto;
}

.tc-panel {
padding: .75rem;
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
}

.tc-channels {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: .75rem;
}

.tc-channel {
display: flex;
align-items: flex-start;
gap: 1rem;
min-width: 0;
padding: 1.25rem;
background: var(--light-bg);
border: 1px solid transparent;
border-radius: var(--radius-lg);
transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.tc-channel:hover {
background: var(--light-green);
border-color: rgba(8, 127, 91, .15);
transform: translateY(-3px);
}

.tc-channel__icon {
display: grid;
place-items: center;
width: 48px;
height: 48px;
flex-shrink: 0;
border-radius: 14px;
background: var(--white);
border: 1px solid rgba(8, 127, 91, .12);
color: var(--primary);
box-shadow: var(--shadow-sm);
transition: background-color .25s, color .25s;
}
.tc-page .tc-channel__icon .tc-icon { width: 22px; height: 22px; }
.tc-channel:hover .tc-channel__icon { background: var(--primary); color: var(--white); }

.tc-channel__body {
display: flex;
flex-direction: column;
gap: .3rem;
min-width: 0;
flex: 1;
}

.tc-channel__label {
font-size: .75rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--muted);
}

.tc-channel__value {
margin: 0;
font-family: var(--font-heading);
font-size: 1.125rem;
font-weight: 600;
line-height: 1.4;
color: var(--dark);
text-decoration: none;
overflow-wrap: anywhere;   /* long emails never overflow the card */
}
a.tc-channel__value { transition: color .2s; }
a.tc-channel__value:hover { color: var(--primary); }

address.tc-channel__value {
font-family: var(--font-body);
font-style: normal;
font-size: .9375rem;
font-weight: 400;
line-height: 1.6;
color: var(--text);
}
.tc-channel__company {
display: block;
font-family: var(--font-heading);
font-size: 1.0625rem;
font-weight: 600;
color: var(--dark);
}

/* Screen-reader-only status text (copy feedback) */
.tc-sr {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

/* ---------- Breakpoints ---------- */
@media (min-width: 768px) {
.tc-hero { padding: 4.5rem 0; }
.tc-body { margin-top: -5rem; padding-bottom: 6rem; }
.tc-panel { padding: 1rem; }
.tc-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.tc-channel { padding: 1.5rem; }
.tc-channel:last-child { grid-column: 1 / -1; }
}

@media (min-width: 992px) {
.tc-hero { padding: 5rem 0; }
.tc-channels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tc-channel { flex-direction: column; padding: 1.75rem; }
.tc-channel:last-child { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
.tc-channel,
.tc-channel__icon,
a.tc-channel__value { transition: none; }
.tc-channel:hover { transform: none; }
}
/*******************Contact page********************/

/*******************Privacy Policy********************/
.tc-page .tc-icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  overflow: visible;
  vertical-align: middle;
  color: inherit;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tc-page .tc-icon * {
fill: none !important;
stroke: currentColor !important;
stroke-width: inherit;
visibility: visible;
}
.tc-page .tc-hero__site .tc-icon { width: 22px; height: 22px; }
.tc-page .tc-rail__top .tc-icon { width: 1rem; height: 1rem; }
.tc-page .tc-safeguard__icon .tc-icon { width: 20px; height: 20px; }
.tc-page .tc-btn .tc-icon { width: 20px; height: 20px; }

/* ---------- Layout adjustments vs. the contact page ---------- */

/* contact.css pulls .tc-body up over the hero. Policy pages don't overlap. */
.tc-chips + .tc-body {
margin-top: 0;
padding-top: 2.5rem;
padding-bottom: 5rem;
}
.tc-hero:has(.tc-glance) { padding-bottom: 3rem; }

/* ---------- Hero "at a glance" ---------- */
.tc-glance {
list-style: none;
margin: 2.5rem auto 0;
padding: 0;
max-width: 1040px;
display: grid;
grid-template-columns: 1fr;
gap: .75rem;
text-align: left;
}
.tc-glance__item {
display: flex;
align-items: flex-start;
gap: .9rem;
padding: 1.1rem 1.25rem;
background: rgba(255, 255, 255, .85);
border: 1px solid rgba(8, 127, 91, .12);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.tc-page .tc-glance__item > .tc-icon {
width: 42px;
height: 42px;
padding: 10px;
border-radius: 12px;
background: var(--light-green);
color: var(--primary);
}
.tc-glance__title {
display: block;
margin-bottom: .2rem;
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 600;
color: var(--dark);
}
.tc-glance__text {
margin: 0;
font-size: .875rem;
line-height: 1.55;
color: var(--muted);
}

/* ---------- Mobile section chips ---------- */
.tc-chips {
position: sticky;
top: var(--header-h);
z-index: 10;
background: rgba(255, 255, 255, .94);
backdrop-filter: saturate(180%) blur(10px);
border-bottom: 1px solid var(--border);
}
.tc-chips__scroller {
list-style: none;
margin: 0;
padding: .75rem 1rem;
display: flex;
gap: .5rem;
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.tc-chips__scroller::-webkit-scrollbar { display: none; }
.tc-chips__scroller li { flex-shrink: 0; scroll-snap-align: start; }

.tc-chips__link {
display: inline-block;
padding: .45rem .9rem;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--white);
font-size: .8125rem;
font-weight: 500;
color: var(--text);
text-decoration: none;
white-space: nowrap;
transition: background-color .2s, color .2s, border-color .2s;
}
.tc-chips__link:hover { color: var(--primary); border-color: rgba(8, 127, 91, .3); }
.tc-chips__link.is-active {
background: var(--primary);
border-color: var(--primary);
color: var(--white);
}

/* ---------- Desktop rail ---------- */
.tc-rail {
position: sticky;
top: calc(var(--header-h) + 1.5rem);
padding: 1.5rem;
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.tc-rail__head {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 0 1.25rem;
font-size: .75rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--muted);
}
.tc-rail__count {
padding: .2rem .55rem;
border-radius: 999px;
background: var(--light-green);
color: var(--primary);
letter-spacing: 0;
font-variant-numeric: tabular-nums;
}

/* Track: grey line between the first and last marks, green fill on top.
 policy.js sets --tc-progress (0–1) on .tc-rail. */
.tc-rail__track { position: relative; }
.tc-rail__track::before,
.tc-rail__fill {
content: "";
position: absolute;
left: 6px;
top: 1.05rem;
bottom: 1.05rem;
width: 2px;
border-radius: 2px;
}
.tc-rail__track::before { background: var(--border); }
.tc-rail__fill {
background: linear-gradient(var(--secondary), var(--primary));
transform-origin: top;
transform: scaleY(var(--tc-progress, 0));
transition: transform .3s var(--ease);
}

.tc-rail__list {
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
.tc-rail__link {
display: flex;
align-items: center;
gap: .85rem;
padding: .55rem 0;
font-size: .9rem;
font-weight: 500;
line-height: 1.35;
color: var(--muted);
text-decoration: none;
transition: color .2s;
}
.tc-rail__link:hover { color: var(--dark); }

.tc-rail__mark {
width: 14px;
height: 14px;
flex-shrink: 0;
border-radius: 50%;
background: var(--white);
border: 2px solid #CBD5E1;
transition: background-color .2s, border-color .2s, box-shadow .2s;
}
.tc-rail__link.is-read .tc-rail__mark {
background: var(--secondary);
border-color: var(--secondary);
}
.tc-rail__link.is-active { color: var(--dark); font-weight: 600; }
.tc-rail__link.is-active .tc-rail__mark {
background: var(--primary);
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(8, 127, 91, .15);
}

.tc-rail__top {
display: inline-flex;
align-items: center;
gap: .45rem;
margin-top: 1.25rem;
padding-top: 1.25rem;
width: 100%;
border-top: 1px solid var(--border);
font-size: .875rem;
font-weight: 600;
color: var(--primary);
text-decoration: none;
}
.tc-rail__top .tc-icon { width: 1rem; height: 1rem; transition: transform .2s var(--ease); }
.tc-rail__top:hover .tc-icon { transform: translateY(-2px); }

/* ---------- Clauses ---------- */
.tc-stream {
display: grid;
gap: 1rem;
}

.tc-clause {
display: grid;
grid-template-columns: 1fr;
gap: .75rem;
padding: 1.75rem 1.5rem;
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
scroll-margin-top: calc(var(--header-h) + 76px); /* header + chip bar */
transition: border-color .3s, box-shadow .3s;
}
.tc-clause.is-active {
border-color: rgba(8, 127, 91, .25);
box-shadow: var(--shadow-md);
}

.tc-clause__num {
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 700;
line-height: 1;
color: var(--primary);
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--light-green);
}
.tc-clause__main { min-width: 0; }
.tc-clause__main > p:last-child { margin-bottom: 0; }

.tc-clause__title {
margin: 0 0 1rem;
font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
font-weight: 700;
}

.tc-lead {
font-size: 1.0625rem;
line-height: 1.75;
color: var(--dark);
}

/* ---------- Data inventory + tags ---------- */
.tc-inventory {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
margin-bottom: 1.5rem;
padding: 1.25rem;
background: var(--light-bg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
.tc-inventory__label {
margin: 0 0 .6rem;
font-size: .75rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--muted);
}

.tc-tags {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: .5rem;
}
.tc-tags--inline { margin-bottom: 1.25rem; }

.tc-tag {
display: inline-flex;
align-items: center;
gap: .45rem;
padding: .35rem .8rem;
background: var(--white);
border: 1px solid var(--border);
border-radius: 999px;
font-size: .8125rem;
font-weight: 500;
color: var(--dark);
}
.tc-tag::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--secondary);
}

/* ---------- Safeguards ---------- */
.tc-safeguards {
list-style: none;
margin: 0 0 1.5rem;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .5rem;
}
.tc-safeguard {
display: flex;
flex-direction: column;
align-items: center;
gap: .5rem;
padding: .85rem .5rem;
font-size: .8125rem;
line-height: 1.25;
text-align: center;
background: var(--light-green);
border: 1px solid rgba(8, 127, 91, .1);
border-radius: var(--radius-md);
font-family: var(--font-heading);
font-weight: 600;
color: var(--dark);
}
.tc-safeguard__icon {
display: grid;
place-items: center;
width: 38px;
height: 38px;
flex-shrink: 0;
border-radius: 10px;
background: var(--white);
color: var(--primary);
box-shadow: var(--shadow-sm);
}

/* ---------- Sub-sections ---------- */
.tc-sub {
margin-top: 1.5rem;
padding: 1.25rem 1.25rem 1.25rem 1.4rem;
border-left: 3px solid var(--secondary);
background: var(--light-bg);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.tc-sub__title {
margin: 0 0 .5rem;
font-size: 1.125rem;
font-weight: 700;
}
.tc-sub p:last-child { margin-bottom: 0; }

/* ---------- Links ---------- */
.tc-link {
font-weight: 600;
color: var(--primary);
text-decoration: underline;
text-decoration-color: rgba(8, 127, 91, .35);
text-underline-offset: 3px;
overflow-wrap: anywhere;
transition: text-decoration-color .2s;
}
.tc-link:hover { color: var(--primary-hover); text-decoration-color: currentColor; }

/* ---------- Closing CTA ---------- */
.tc-cta {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
margin-top: 2rem;
padding: 2rem 1.75rem;
border-radius: var(--radius-xl);
background:
  radial-gradient(50% 90% at 0% 0%, rgba(22, 160, 133, .35), transparent 70%),
  var(--primary-dark);
color: rgba(255, 255, 255, .8);
}
.tc-cta::after {
content: "";
position: absolute;
right: -80px;
bottom: -120px;
width: 280px;
height: 280px;
border-radius: 50%;
border: 40px solid rgba(22, 160, 133, .18);
pointer-events: none;
}
.tc-cta > * { position: relative; z-index: 1; }

.tc-cta__title {
margin: 0 0 .5rem;
font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
font-weight: 700;
color: var(--white);
}
.tc-cta__mail {
display: inline-block;
margin-bottom: .35rem;
font-family: var(--font-heading);
font-size: 1.125rem;
font-weight: 600;
color: #6EE7B7;
text-decoration: none;
overflow-wrap: anywhere;
}
.tc-cta__mail:hover { color: var(--white); text-decoration: underline; }
.tc-cta__meta { margin: 0; font-size: .9375rem; }

.tc-btn {
display: inline-flex;
align-items: center;
gap: .55rem;
flex-shrink: 0;
padding: .85rem 1.4rem;
background: var(--white);
border-radius: var(--radius-sm);
font-weight: 600;
color: var(--primary-dark);
text-decoration: none;
transition: transform .2s var(--ease), background-color .2s;
}
.tc-btn:hover { background: var(--light-green); color: var(--primary-dark); transform: translateY(-2px); }

.tc-page .tc-cta a:focus-visible { outline-color: rgba(255, 255, 255, .7); }

.tc-support__item{
  display: flex;
  gap: 10px;
}

/* ---------- Breakpoints ---------- */
@media (min-width: 768px) {
.tc-glance { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.tc-glance__item { flex-direction: column; gap: .75rem; padding: 1.25rem 1.4rem; }

.tc-clause {
  grid-template-columns: 56px 1fr;
  gap: 1.5rem;
  padding: 2.25rem 2rem;
}
.tc-clause__num { width: 56px; height: 56px; font-size: 1.125rem; border-radius: 16px; }

.tc-inventory { grid-template-columns: 1fr 1fr; padding: 1.5rem; }

.tc-safeguards { gap: .75rem; }
.tc-safeguard {
  flex-direction: row;
  gap: .75rem;
  padding: .85rem 1rem;
  font-size: 1rem;
  text-align: left;
}

.tc-cta {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 2.5rem 2.75rem;
}
}

@media (min-width: 992px) {
.tc-chips + .tc-body { padding-top: 4rem; padding-bottom: 6rem; }
.tc-hero:has(.tc-glance) { padding-bottom: 4rem; }
.tc-clause { scroll-margin-top: calc(var(--header-h) + 24px); }
}

@media (prefers-reduced-motion: reduce) {
.tc-rail__fill,
.tc-chips__link,
.tc-rail__mark,
.tc-btn,
.tc-clause { transition: none; }
.tc-btn:hover { transform: none; }
}
/*******************Privacy Policy********************/


/*******************Shop page********************/

/* ---------- Section ---------- */
.pricing {
  position: relative;
  padding: 4rem 0 4.5rem;
  background: var(--light-bg);
  overflow: hidden;
}

/* ---------- Panel + side glows ---------- */
.pricing-wrap {
  position: relative;
  padding: 1.25rem;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(22, 160, 133, .14), transparent 70%),
    linear-gradient(180deg, var(--light-green) 0%, var(--white) 100%);
  border: 1px solid rgba(8, 127, 91, .12);
  isolation: isolate;
}

/* Subtle dot grid on the panel */
.pricing-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: radial-gradient(rgba(8, 127, 91, .12) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
  pointer-events: none;
}

.side-glow {
  position: absolute;
  z-index: -1;
  top: 50%;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .35;
  pointer-events: none;
  transform: translateY(-50%);
}
.side-glow.l { left: -160px; background: var(--secondary); }
.side-glow.r { right: -160px; background: var(--primary); }

/* ---------- Grid items ---------- */
#products-grid > product { display: block; }

/* ---------- Card ---------- */
.pricing .plan {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.75rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}

/* Gradient top edge that appears on hover */
.pricing .plan::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 24px;
  right: 24px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--secondary), var(--primary));
  opacity: 0;
  transition: opacity .35s var(--ease);
}

.pricing .plan:hover {
  transform: translateY(-6px);
  border-color: rgba(8, 127, 91, .25);
  box-shadow: var(--shadow-lg);
}
.pricing .plan:hover::before { opacity: 1; }
.pricing .plan:hover .plan-ico { transform: rotate(-4deg) scale(1.04); }
/* Head: icon + product name (whole row opens the product) */
.pricing .plan-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  cursor: pointer;
}

.pricing .plan-ico {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  padding: 10px;
  border-radius: var(--radius-md);
  background: linear-gradient(140deg, var(--light-green), #DDF3EA);
  border: 1px solid rgba(8, 127, 91, .12);
  overflow: hidden;
  transition: transform .35s var(--ease);
}
.pricing .plan-ico img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pricing .plan:hover .plan-ico { transform: rotate(-4deg) scale(1.04); }

.pricing .product-name {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--dark);
  transition: color .2s;
}
.pricing .plan-head:hover .product-name { color: var(--primary); }

/* Price: small "$", large amount */
.pricing .price {
  display: flex;
  align-items: flex-start;
  gap: .15rem;
  margin-bottom: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px dashed var(--border);
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1;
  color: var(--primary);
}
.pricing .price span {
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--dark);
}

.pricing .plan-copy {
  flex-grow: 1;
  margin: 0 0 1.75rem;
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--muted);
}

/* Button (scoped so it doesn't depend on other pages' CSS) */
.pricing .btn-yellow {
  display: flex;
  align-items: center;
  margin-top: auto;
  padding: .95rem 1.5rem;
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 999px;
  color: var(--white);
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 8px 18px rgba(8, 127, 91, .22);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s;
}
.pricing .btn-yellow:hover,
.pricing .btn-yellow:focus-visible {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(8, 127, 91, .3);
}
.pricing .btn-yellow:focus-visible,
.pricing .plan-head:focus-visible {
  outline: 3px solid rgba(8, 127, 91, .45);
  outline-offset: 3px;
}
.pricing .btn-yellow svg { transition: transform .2s var(--ease); }
.pricing .btn-yellow:hover svg { transform: translateX(4px); }



:is(.pricing .plan, .product-description) ul {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: .7rem;
  text-align: left;
}
 
/* The description <p> has flex-grow in pricing.css; once it holds a list,
   let the list sit flush and keep the button at the bottom. */
.pricing .plan-copy:has(ul) { margin-bottom: 1.5rem; }
:is(.pricing .plan-copy, .product-description) ul { margin-bottom: 0; }
 
:is(.pricing .plan, .product-description) ul li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--dark);
}
 
/* Check icon */
:is(.pricing .plan, .product-description) ul li::before {
  content: "";
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 0;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23087F5B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='m4 8.5 2.6 2.6L12 5.5'/%3E%3C/svg%3E") center / 14px no-repeat,
    var(--light-green);
  box-shadow: inset 0 0 0 1px rgba(8, 127, 91, .15);
}
 
/* An item that is only bold text (e.g. "6-month service period")
   becomes a highlighted pill after the feature list */
:is(.pricing .plan, .product-description) ul li:has(> strong:only-child) {
  align-items: center;
  width: max-content;
  max-width: 100%;
  margin-top: .35rem;
  padding: .5rem .95rem .5rem .55rem;
  border-radius: 999px;
  background: var(--light-green);
  border: 1px solid rgba(8, 127, 91, .2);
}
:is(.pricing .plan, .product-description) ul li:has(> strong:only-child)::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5.5' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M8 5.2V8l1.9 1.3'/%3E%3C/svg%3E") center / 14px no-repeat,
    var(--primary);
  box-shadow: none;
}
:is(.pricing .plan, .product-description) ul li strong {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--primary-dark);
}
 
/* ---------- Featured (dark) pricing card ---------- */
#products-grid > product:nth-child(2):nth-last-child(2) .plan ul li { color: rgba(255, 255, 255, .9); }
#products-grid > product:nth-child(2):nth-last-child(2) .plan ul li::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236EE7B7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='m4 8.5 2.6 2.6L12 5.5'/%3E%3C/svg%3E") center / 14px no-repeat,
    rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15);
}
#products-grid > product:nth-child(2):nth-last-child(2) .plan ul li:has(> strong:only-child) {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .2);
}
#products-grid > product:nth-child(2):nth-last-child(2) .plan ul li:has(> strong:only-child)::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5.5' fill='none' stroke='%23063B32' stroke-width='1.8'/%3E%3Cpath fill='none' stroke='%23063B32' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M8 5.2V8l1.9 1.3'/%3E%3C/svg%3E") center / 14px no-repeat,
    #6EE7B7;
}
#products-grid > product:nth-child(2):nth-last-child(2) .plan ul li strong { color: var(--white); }
 
/* ---------- Product detail page: two columns when there's room ---------- */
@media (min-width: 768px) {
  .product-description ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
  }
  .product-description ul li:has(> strong:only-child) { grid-column: 1 / -1; }
}



/* ---------- Featured: the middle card when there are exactly three ---------- */
#products-grid > product:nth-child(2):nth-last-child(2) .plan {
  background:
    radial-gradient(80% 50% at 100% 0%, rgba(22, 160, 133, .45), transparent 70%),
    radial-gradient(60% 40% at 0% 100%, rgba(8, 127, 91, .5), transparent 70%),
    var(--primary-dark);
  border-color: var(--primary-dark);
  box-shadow: var(--shadow-lg);
}
#products-grid > product:nth-child(2):nth-last-child(2) .plan::before { opacity: 1; background: linear-gradient(90deg, #6EE7B7, var(--secondary)); }
#products-grid > product:nth-child(2):nth-last-child(2) .plan-ico {
  background: rgba(255, 255, 255, .95);
  border-color: transparent;
}
#products-grid > product:nth-child(2):nth-last-child(2) .product-name,
#products-grid > product:nth-child(2):nth-last-child(2) .price span { color: var(--white); }
#products-grid > product:nth-child(2):nth-last-child(2) .plan-head:hover .product-name { color: #A7F3D0; }
#products-grid > product:nth-child(2):nth-last-child(2) .price { color: #6EE7B7; border-color: rgba(255, 255, 255, .15); }
#products-grid > product:nth-child(2):nth-last-child(2) .plan-copy { color: rgba(255, 255, 255, .75); }
#products-grid > product:nth-child(2):nth-last-child(2) .btn-yellow {
  background: var(--white);
  border-color: var(--white);
  color: var(--primary-dark);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .2);
}
#products-grid > product:nth-child(2):nth-last-child(2) .btn-yellow:hover { background: var(--light-green); color: var(--primary-dark); }
/* The arrow is hard-coded white in the markup; recolour it on the white button */
#products-grid > product:nth-child(2):nth-last-child(2) .btn-yellow svg path { stroke: var(--primary-dark); }

/* ---------- Guarantee ---------- */
.pricing .guarantee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: max-content;
  max-width: 100%;
  margin: 2rem auto 0;
  padding: .7rem 1.25rem .7rem .8rem;
  background: var(--white);
  border: 1px solid rgba(8, 127, 91, .15);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  font-size: .9375rem;
  font-weight: 600;
  text-align: center;
}
/* Markup uses .text-light (white); re-colour for the light background */
.pricing .guarantee.text-light { color: var(--dark) !important; }
.pricing .guarantee .bi {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--light-green);
  color: var(--primary);
  font-size: 1rem;
}

/* ---------- Breakpoints ---------- */
@media (min-width: 768px) {
  .pricing { padding: 5.5rem 0 6rem; }
  .pricing-wrap { padding: 2rem; }
  .pricing .plan { padding: 2rem; }
}

@media (min-width: 992px) {
  .pricing-wrap { padding: 3rem 2.5rem; }
  /* Lift the featured card on desktop */
  #products-grid > product:nth-child(2):nth-last-child(2) .plan { transform: translateY(-14px); }
  #products-grid > product:nth-child(2):nth-last-child(2) .plan:hover { transform: translateY(-20px); }
}

@media (prefers-reduced-motion: reduce) {
  .pricing .plan,
  .pricing .plan-ico,
  .pricing .btn-yellow,
  .pricing .btn-yellow svg { transition: none; }
  .pricing .plan:hover,
  .pricing .plan:hover .plan-ico,
  #products-grid > product .plan:hover { transform: none; }
}
/*******************Shop page********************/

/*******************Check out css********************/
.checkout-page {
  --field-h: 52px;
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background: var(--light-bg);
  padding-bottom: 5rem;
}

/* ---------- Hero (compact version of the contact hero) ---------- */
.checkout-page .tc-hero { padding: 2.25rem 0 2.5rem; }
.checkout-page .tc-hero::before { bottom: -260px; }
.checkout-page .tc-hero__title { margin: 0; font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); }

/* ---------- Layout ---------- */
.checkout-page .luxe-container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1rem;
}

.checkout-wrapper {
  counter-reset: checkout-step;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin-top: -1.25rem;          /* tuck slightly into the hero */
  position: relative;
  z-index: 2;
}

/* Phones/tablets: unwrap #checkout-main so the summary (with the terms
   checkbox) sits between the address and payment, before Place Order. */
#checkout-main { display: contents; }
#checkout-main > .checkout-form-col:first-child { order: 1; }
.checkout-summary                                { order: 2; }
#checkout-main > .checkout-form-col:last-child  { order: 3; }

.checkout-form-col {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}

/* ---------- Steps ---------- */
.checkout-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  width: max-content;
  max-width: 100%;
  padding: .4rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--muted);
}
.checkout-steps span { padding: .35rem .7rem; border-radius: 999px; }
.checkout-steps span:nth-child(even) { padding: 0; color: #CBD5E1; letter-spacing: 0; font-size: .9rem; }
.checkout-steps span:not(.active):not(:nth-child(even)) { color: var(--secondary); }
.checkout-steps .active { background: var(--primary); color: var(--white); }

/* ---------- Section cards ---------- */
.checkout-section {
  padding: 1.5rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color .3s, box-shadow .3s;
}
.checkout-section:focus-within {
  border-color: rgba(8, 127, 91, .3);
  box-shadow: var(--shadow-md);
}

.checkout-title {
  counter-increment: checkout-step;
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1.25rem;
  font-size: 1.25rem;
  font-weight: 700;
}
.checkout-title::before {
  content: counter(checkout-step);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--light-green);
  color: var(--primary);
  font-size: .9375rem;
}
.checkout-section:focus-within .checkout-title::before { background: var(--primary); color: var(--white); }

/* ---------- Fields ---------- */
.checkout-page .form-group { margin-bottom: 1rem; }
.checkout-page .checkout-section .row > [class*="col"]:last-child .form-group,
.checkout-page .checkout-section > .form-group:last-child { margin-bottom: 0; }
@media (max-width: 767.98px) {
  .checkout-page .checkout-section .row > [class*="col"]:last-child .form-group { margin-bottom: 0; }
}

.checkout-page .form-group label {
  display: block;
  margin-bottom: .4rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--dark);
}

.checkout-page .form-group input,
.checkout-page .form-group select {
  display: block;
  width: 100%;
  height: var(--field-h);
  padding: 0 1rem;
  background-color: var(--light-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 1rem;              /* 16px stops iOS zooming into fields */
  color: var(--dark);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
  -webkit-appearance: none;
          appearance: none;
}
.checkout-page .form-group select {
  padding-right: 2.75rem;
  background-image: var(--chev);
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px;
  cursor: pointer;
}
.checkout-page .form-group input:hover,
.checkout-page .form-group select:hover { border-color: #CBD5E1; }
.checkout-page .form-group input:focus,
.checkout-page .form-group select:focus {
  outline: none;
  background-color: var(--white);
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(8, 127, 91, .12);
}

/* Validation – covers the usual class/attribute names validators add */
.checkout-page .form-group input.error,
.checkout-page .form-group select.error,
.checkout-page .form-group .is-invalid,
.checkout-page .form-group [aria-invalid="true"] {
  border-color: #DC2626;
  background-color: #FEF2F2;
}
.checkout-page .form-group input.error:focus,
.checkout-page .form-group select.error:focus,
.checkout-page .form-group .is-invalid:focus { box-shadow: 0 0 0 4px rgba(220, 38, 38, .12); }
.checkout-page label.error,
.checkout-page .error-message,
.checkout-page .invalid-feedback {
  display: block;
  margin-top: .35rem;
  font-size: .8125rem;
  font-weight: 500;
  color: #B91C1C;
}

/* ---------- Payment ---------- */
.payment-icons-strip {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
.payment-icons-strip img { max-height: 28px; width: auto; }

.payment-options { display: grid; gap: .75rem; }

.payment-option {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  overflow: hidden;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.payment-option:hover { border-color: #CBD5E1; }
.payment-option:has(input[type="radio"]:checked) {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(8, 127, 91, .1);
}

.payment-option-header {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin: 0;
  padding: 1rem 1.15rem;
  cursor: pointer;
}
.payment-option:has(input[type="radio"]:checked) .payment-option-header { background: var(--light-green); }
.payment-option-header img { max-height: 24px; width: auto; }
.payment-option-label { font-weight: 600; color: var(--dark); }

/* Custom radio */
.payment-option-header input[type="radio"] {
  -webkit-appearance: none;
          appearance: none;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin: 0;
  border: 2px solid #CBD5E1;
  border-radius: 50%;
  background: var(--white);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color .2s;
}
.payment-option-header input[type="radio"]::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
  transform: scale(0);
  transition: transform .2s var(--ease);
}
.payment-option-header input[type="radio"]:checked { border-color: var(--primary); }
.payment-option-header input[type="radio"]:checked::before { transform: scale(1); }
.payment-option-header input[type="radio"]:focus-visible {
  outline: 3px solid rgba(8, 127, 91, .45);
  outline-offset: 2px;
}

.card-fields {
  padding: 1.25rem 1.15rem .25rem;
  border-top: 1px solid var(--border);
}
.card-fields .form-group { margin-bottom: 1rem !important; }

/* Bootstrap's col-lg-4 stacks expiry/CVV on phones; keep them on one row
   once there's room */
@media (min-width: 480px) and (max-width: 991.98px) {
  .card-fields .row > .col-lg-4 { flex: 0 0 auto; width: 33.3333%; }
}

.alternate-payment-providers:empty { display: none; }
.alternate-payment-providers { margin-top: 1rem; }

/* ---------- Actions ---------- */
.checkout-actions {
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  gap: 1rem;
}

.checkout-page .return-cart {
  align-self: center;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s;
}
.checkout-page .return-cart:hover { color: var(--primary); }

.checkout-page .btn-yellow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 56px;
  padding: .9rem 2rem;
  background: linear-gradient(135deg, var(--secondary), var(--primary));
  border: 0;
  border-radius: 14px;
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(8, 127, 91, .28);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s;
}
.checkout-page .btn-yellow svg { margin-right: .5rem; }
.checkout-page .btn-yellow:hover,
.checkout-page .btn-yellow:focus-visible {
  color: var(--white);
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(8, 127, 91, .34);
}
.checkout-page .btn-yellow:active { transform: translateY(0); }
.checkout-page .btn-yellow:disabled { opacity: .6; transform: none; cursor: not-allowed; }

.checkout-page a:focus-visible,
.checkout-page .btn-yellow:focus-visible {
  outline: 3px solid rgba(8, 127, 91, .45);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ---------- Summary ---------- */
.checkout-summary {
  position: relative;
  min-width: 0;
  padding: 1.5rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
/* Green band across the top of the summary */
.checkout-summary::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--secondary), var(--primary));
}

.summary-title {
  margin: 0 0 1.25rem;
  font-size: 1.25rem;
  font-weight: 700;
}

.summary-products { display: grid; gap: .75rem; }

.summary-product {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: .9rem;
  padding: .75rem;
  background: var(--light-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.summary-product > span:last-child {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--dark);
  white-space: nowrap;
}

.product-thumb {
  width: 56px;
  height: 56px;
  padding: 6px;
  border-radius: 12px;
  background: linear-gradient(140deg, var(--light-green), #DDF3EA);
  border: 1px solid rgba(8, 127, 91, .12);
  overflow: hidden;
}
.product-thumb img { width: 100%; height: 100%; object-fit: contain; }

.product-info h4 {
  margin: 0;
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--dark);
}

/* Cross-sell */
.summary-crosssell {
  margin-top: 1.25rem;
  padding: 1rem;
  border: 1.5px dashed rgba(8, 127, 91, .35);
  border-radius: var(--radius-md);
  background: var(--light-green);
}
.summary-crosssell:not(:has(crosssellproduct)) { display: none; }
.summary-crosssell-title {
  margin: 0 0 .75rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--primary);
}
.summary-crosssell crosssellproduct { display: block; }
.summary-crosssell crosssellproduct + crosssellproduct { margin-top: .6rem; }

.summary-crosssell .summary-product {
  grid-template-columns: auto 48px minmax(0, 1fr) auto;
  background: var(--white);
  cursor: pointer;
  margin: 0;
  transition: border-color .2s, box-shadow .2s;
}
.summary-crosssell .summary-product:hover { border-color: rgba(8, 127, 91, .35); }
.summary-crosssell .summary-product:has(.crosssell-check:checked) {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(8, 127, 91, .12);
}
.summary-crosssell .product-thumb { width: 48px; height: 48px; }

/* Custom checkboxes (cross-sell + terms) */
.checkout-page .crosssell-check,
.checkout-page .checkout-terms .form-check-input {
  -webkit-appearance: none;
          appearance: none;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin: 0;
  border: 2px solid #CBD5E1;
  border-radius: 7px;
  background: var(--white) center / 14px no-repeat;
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.checkout-page .crosssell-check:checked,
.checkout-page .checkout-terms .form-check-input:checked {
  border-color: var(--primary);
  background-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E");
}
.checkout-page .crosssell-check:focus-visible,
.checkout-page .checkout-terms .form-check-input:focus-visible {
  outline: 3px solid rgba(8, 127, 91, .45);
  outline-offset: 2px;
  box-shadow: none;
}
.checkout-page .checkout-terms .form-check-input.error,
.checkout-page .checkout-terms .form-check-input.is-invalid { border-color: #DC2626; }

/* Totals */
.summary-totals {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.summary-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .35rem 0;
  font-size: .9375rem;
  color: var(--text);
}
.summary-line > span:last-child { font-weight: 600; color: var(--dark); }
.summary-line .muted { color: var(--primary) !important; }

.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: .85rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radius-md);
  background: var(--primary-dark);
  color: rgba(255, 255, 255, .8);
  font-weight: 600;
}
.summary-total strong {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--white);
}

/* Terms */
.checkout-page .terms_cstm { padding: 0; }
.checkout-terms {
  margin-top: 1.25rem !important;
  padding: 1rem 1.1rem;
  background: var(--light-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  position: relative;
  padding-top: 23px;
}
.checkout-terms .error-message-inline{
  position: absolute;
  top: 0;
  margin-top: 0 !important;
}
.checkout-terms > .d-flex { margin-top: 0 !important; }
.checkout-terms .form-check-label {
  margin-bottom: 0 !important;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--muted);
  cursor: pointer;
}
.checkout-terms .box { display: block; line-height: 1.6 !important; }
.checkout-terms a { font-weight: 600; text-underline-offset: 2px; }
.checkout-terms strong { color: var(--dark); }

/* ---------- Desktop ---------- */
@media (min-width: 768px) {
  .checkout-section { padding: 2rem; }
  .checkout-actions {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .checkout-page .btn-yellow { min-width: 240px; }
}

@media (min-width: 992px) {
  .checkout-page .tc-hero { padding: 3rem 0 4rem; }

  .checkout-wrapper {
    grid-template-columns: minmax(0, 1fr) 400px;
    align-items: start;
    gap: 2rem;
    margin-top: -2rem;
  }
  #checkout-main { display: grid; gap: 1.25rem; order: 0; min-width: 0; }
  #checkout-main > .checkout-form-col:first-child,
  #checkout-main > .checkout-form-col:last-child { order: 0; }
  .checkout-summary {
    order: 0;
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
    padding: 1.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .checkout-page * { transition: none !important; }
  .checkout-page .btn-yellow:hover { transform: none; }
}
/*******************Check out css********************/

.nav-bttns{
  display: flex;
  gap: 20px;
}
.sign-sec{
  border: 2px solid #087f5b;
  border-radius: 20px;
  padding: 50px;
  text-align: center;
}
.text-to-login{margin-top: 20px;}
.txt-bttn{
  text-decoration: none;
}
.sign-sec .section-title{
  color: #fff;
}