:root {
  --karma-navy: #082b3d;
  --karma-navy-2: #0d4051;
  --karma-green: #0b7a65;
  --karma-green-dark: #075f50;
  --karma-mint: #eaf8f3;
  --karma-warm: #fff8eb;
  --karma-ink: #16323d;
  --karma-muted: #58717a;
  --karma-line: #d8e6e8;
  --karma-shadow: 0 18px 50px rgba(6, 42, 57, .1);
}

.karma-page { color: var(--karma-ink); background: #fff; }
.karma-page *, .karma-page *::before, .karma-page *::after { box-sizing: border-box; }
.karma-page main { overflow: hidden; }
.karma-page .container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.karma-page h1, .karma-page h2, .karma-page h3 { color: var(--karma-navy); letter-spacing: -.025em; }
.karma-page h2 { font-size: clamp(1.8rem, 3vw, 2.75rem); line-height: 1.12; }
.karma-page p { line-height: 1.72; }
.karma-page .eyebrow { color: var(--karma-green-dark); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; }

.karma-hero { position: relative; padding: clamp(2.75rem, 7vw, 6.5rem) 0 3.75rem; background: radial-gradient(circle at 85% 15%, rgba(38, 175, 137, .18), transparent 34%), linear-gradient(135deg, #f7fcfb 0%, #edf8f4 55%, #fffaf0 100%); }
.karma-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, #c8dfda, transparent); }
.karma-hero-grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(340px, .94fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.karma-breadcrumb { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; color: #58717a; font-size: .9rem; }
.karma-breadcrumb a { color: var(--karma-green-dark); text-decoration: none; }
.karma-breadcrumb a:hover { text-decoration: underline; }
.karma-hero h1 { max-width: 760px; margin: .65rem 0 1.15rem; font-size: clamp(2.35rem, 5vw, 4.65rem); line-height: 1.02; }
.karma-hero-copy > p { max-width: 720px; font-size: clamp(1.05rem, 1.5vw, 1.22rem); color: #3f626b; }
.karma-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1.6rem; }
.karma-actions .btn { min-height: 48px; }
.karma-text-link { min-height: 44px; display: inline-flex; align-items: center; gap: .35rem; color: var(--karma-green-dark); font-weight: 800; text-decoration: none; padding: .65rem .25rem; }
.karma-text-link:hover { text-decoration: underline; }
.karma-hero-facts { list-style: none; padding: 0; margin: 2.15rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #cfe0dc; }
.karma-hero-facts li { padding: 1rem .9rem 0 0; }
.karma-hero-facts strong, .karma-hero-facts span { display: block; }
.karma-hero-facts strong { color: var(--karma-navy); font-size: 1.02rem; }
.karma-hero-facts span { margin-top: .25rem; color: var(--karma-muted); font-size: .84rem; line-height: 1.45; }
.karma-hero-visual { position: relative; }
.karma-hero-visual > img { display: block; width: 100%; height: clamp(500px, 45vw, 640px); object-fit: cover; object-position: center; border-radius: 32px; box-shadow: var(--karma-shadow); }
.karma-hero-note { position: absolute; left: -1rem; right: 1.5rem; bottom: 1.5rem; display: grid; gap: .25rem; padding: 1rem 1.1rem; border: 1px solid rgba(255,255,255,.65); border-radius: 18px; background: rgba(255,255,255,.92); box-shadow: 0 12px 35px rgba(6,42,57,.18); backdrop-filter: blur(10px); }
.karma-hero-note strong { color: var(--karma-navy); }
.karma-hero-note span { color: #4b6871; font-size: .86rem; line-height: 1.45; }

.karma-section { padding: clamp(3.75rem, 7vw, 7rem) 0; }
.karma-section--soft { background: #f3faf8; }
.karma-section--warm { background: var(--karma-warm); }
.karma-heading { max-width: 780px; margin-bottom: 2rem; }
.karma-heading h2, .karma-split h2, .karma-check-grid h2, .karma-form-copy h2 { margin: .5rem 0 .75rem; }
.karma-heading p { color: var(--karma-muted); font-size: 1.03rem; }
.karma-split { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.karma-split > div > p { max-width: 720px; font-size: 1.08rem; color: #425f68; }
.karma-info-card { padding: 1.65rem; border: 1px solid #bcdcd3; border-radius: 22px; background: var(--karma-mint); }
.karma-info-card h3 { margin: 0 0 .55rem; font-size: 1.25rem; }
.karma-info-card p { margin: 0; color: #365a62; }

.karma-package-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.15rem; align-items: stretch; }
.karma-package-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--karma-line); border-radius: 24px; background: #fff; box-shadow: 0 12px 36px rgba(6,42,57,.07); }
.karma-package-card--accent { border-color: #63bda8; box-shadow: 0 18px 46px rgba(11,122,101,.16); transform: translateY(-8px); }
.karma-package-card header { padding: 1.5rem 1.5rem 1.15rem; background: linear-gradient(135deg, #f7fcfb, #eef9f5); border-bottom: 1px solid var(--karma-line); }
.karma-package-card--accent header { background: linear-gradient(135deg, #0b765f, #105066); }
.karma-package-card header > span { color: var(--karma-green-dark); font-size: .76rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.karma-package-card--accent header > span, .karma-package-card--accent header h3, .karma-package-card--accent header p { color: #fff; }
.karma-package-card h3 { margin: .25rem 0 .55rem; font-size: 1.7rem; }
.karma-package-card header p { margin: 0; color: var(--karma-navy); }
.karma-package-card header strong { font-size: 2rem; }
.karma-package-card header small { margin-left: .25rem; font-size: .92rem; }
.karma-package-card dl { margin: 0; padding: .4rem 1.5rem 1rem; flex: 1; }
.karma-package-card dl div { display: grid; gap: .25rem; padding: 1rem 0; border-bottom: 1px solid #e4eeee; }
.karma-package-card dt { color: var(--karma-muted); font-size: .88rem; line-height: 1.45; }
.karma-package-card dd { margin: 0; color: var(--karma-navy); font-weight: 800; }
.karma-package-card > .btn { margin: 0 1.5rem 1.5rem; }
.karma-price-notes { margin-top: 1.35rem; padding: 1.15rem 1.25rem; border-radius: 16px; background: #e8f4f1; color: #41626a; font-size: .88rem; }
.karma-price-notes p { margin: .25rem 0; }

.karma-feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.karma-feature-grid article { padding: 1.4rem; border: 1px solid var(--karma-line); border-radius: 20px; background: #fff; }
.karma-feature-grid article > span { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--karma-mint); color: var(--karma-green-dark); font-weight: 900; }
.karma-feature-grid h3 { margin: 1rem 0 .5rem; font-size: 1.15rem; }
.karma-feature-grid p { margin: 0; color: var(--karma-muted); font-size: .93rem; }

.karma-section--navy { color: #e8f4f6; background: linear-gradient(135deg, var(--karma-navy), var(--karma-navy-2)); }
.karma-section--navy h2, .karma-section--navy .eyebrow { color: #fff; }
.karma-health-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.karma-health-grid h2 { margin: .5rem 0 1rem; }
.karma-health-grid p { color: #cee0e4; }
.karma-caution { padding: 1rem 1.1rem; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; background: rgba(255,255,255,.07); }
.karma-health-list { display: grid; gap: .8rem; margin: 0; padding: 1.5rem; list-style: none; border: 1px solid rgba(255,255,255,.16); border-radius: 24px; background: rgba(255,255,255,.07); }
.karma-health-list li { position: relative; padding-left: 1.75rem; line-height: 1.55; }
.karma-health-list li::before { content: "✓"; position: absolute; left: 0; color: #75dfc2; font-weight: 900; }

.karma-audience-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.karma-audience-grid article { padding: 1.5rem; border-radius: 20px; background: linear-gradient(145deg, #f5fbfa, #edf7f3); border: 1px solid #d6e7e2; }
.karma-audience-grid h3 { margin: 0 0 .5rem; font-size: 1.15rem; }
.karma-audience-grid p { margin: 0; color: var(--karma-muted); }
.karma-check-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(2rem, 6vw, 6rem); }
.karma-check-grid > div:first-child p { color: var(--karma-muted); }
.karma-check-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.karma-check-list article { padding: 1.25rem; border: 1px solid #eadcb9; border-radius: 18px; background: rgba(255,255,255,.72); }
.karma-check-list strong, .karma-check-list span { display: block; }
.karma-check-list strong { color: var(--karma-navy); margin-bottom: .4rem; }
.karma-check-list span { color: #667076; line-height: 1.55; font-size: .91rem; }

.karma-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1rem; }
.karma-faq details { border: 1px solid var(--karma-line); border-radius: 16px; background: #fff; overflow: hidden; }
.karma-faq summary { min-height: 52px; display: flex; align-items: center; cursor: pointer; padding: .95rem 3rem .95rem 1rem; color: var(--karma-navy); font-weight: 800; }
.karma-faq details p { margin: 0; padding: 0 1rem 1rem; color: var(--karma-muted); }
.karma-faq summary:focus-visible { outline: 3px solid #59bca2; outline-offset: -3px; }

.karma-form-section { background: #f3faf8; }
.karma-form-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.karma-form-copy { position: sticky; top: 110px; }
.karma-form-copy > p, .karma-form-copy li { color: var(--karma-muted); }
.karma-form-copy ul { padding-left: 1.25rem; }
.karma-official-link { min-height: 44px; display: inline-flex; align-items: center; color: var(--karma-green-dark); font-weight: 800; }
.karma-form { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--karma-line); border-radius: 24px; background: #fff; box-shadow: var(--karma-shadow); }
.karma-form-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.karma-field { display: grid; gap: .45rem; color: var(--karma-navy); font-weight: 750; }
.karma-field > span { font-size: .9rem; }
.karma-field small { color: var(--karma-muted); font-weight: 500; }
.karma-field b, .karma-consent b { color: #a53636; }
.karma-field--full { grid-column: 1 / -1; }
.karma-field input, .karma-field select, .karma-field textarea { width: 100%; min-height: 48px; border: 1px solid #b9ced1; border-radius: 12px; background: #fff; color: var(--karma-ink); padding: .75rem .85rem; font: inherit; }
.karma-field textarea { min-height: 120px; resize: vertical; }
.karma-field input:focus, .karma-field select:focus, .karma-field textarea:focus { border-color: var(--karma-green); outline: 3px solid rgba(11,122,101,.2); }
.karma-consent { min-height: 44px; display: grid; grid-template-columns: 24px 1fr; gap: .7rem; margin-top: 1rem; align-items: start; color: #405e67; font-size: .88rem; line-height: 1.5; }
.karma-consent input { width: 22px; height: 22px; margin: .1rem 0 0; accent-color: var(--karma-green); }
.karma-consent a { color: var(--karma-green-dark); }
.karma-consent--optional { color: #64777d; }
.karma-form-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.35rem; }
.karma-form-actions .btn { min-height: 48px; }
.karma-form .form-status { min-height: 1.5rem; margin: 1rem 0 0; }

.karma-final { padding-top: 2rem; }
.karma-final-panel { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(1.5rem, 4vw, 3rem); border-radius: 28px; color: #d9eaed; background: linear-gradient(135deg, var(--karma-navy), #15596a); box-shadow: var(--karma-shadow); }
.karma-final-panel h2, .karma-final-panel .eyebrow { color: #fff; }
.karma-final-panel h2 { margin: .45rem 0; }
.karma-final-panel p { max-width: 700px; margin: 0; color: #d0e1e4; }

@media (max-width: 960px) {
  .karma-hero-grid, .karma-split, .karma-health-grid, .karma-check-grid, .karma-form-grid { grid-template-columns: 1fr; }
  .karma-package-grid { grid-template-columns: 1fr; max-width: 680px; margin-inline: auto; }
  .karma-package-card--accent { transform: none; }
  .karma-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .karma-form-copy { position: static; }
}

@media (max-width: 700px) {
  .karma-page .container { width: min(100% - 28px, 1180px); }
  .karma-hero { padding-top: 2rem; }
  .karma-hero h1 { font-size: clamp(2rem, 11vw, 3.15rem); }
  .karma-hero-grid { gap: 2.25rem; }
  .karma-hero-facts, .karma-feature-grid, .karma-audience-grid, .karma-check-list, .karma-faq-grid, .karma-form-fields { grid-template-columns: 1fr; }
  .karma-hero-facts li { padding-bottom: .45rem; }
  .karma-hero-visual > img { border-radius: 22px; }
  .karma-hero-note { left: .75rem; right: .75rem; bottom: .75rem; }
  .karma-section { padding: 3.5rem 0; }
  .karma-field--full { grid-column: auto; }
  .karma-final-panel { align-items: flex-start; flex-direction: column; }
  .karma-actions, .karma-form-actions { width: 100%; }
  .karma-actions .btn, .karma-form-actions .btn { flex: 1 1 100%; justify-content: center; }
}

@media (max-width: 360px) {
  .karma-page .container { width: min(100% - 22px, 1180px); }
  .karma-package-card header, .karma-package-card dl { padding-left: 1.15rem; padding-right: 1.15rem; }
  .karma-package-card > .btn { margin-left: 1.15rem; margin-right: 1.15rem; }
  .karma-form { padding: 1rem; border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .karma-page *, .karma-page *::before, .karma-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
