/* ═══════════════════════════════════════════════════════════════
   Page atmospheres — Home / Report / Objection
   Soft page wash + accent identity. Tool cards stay solid/clean.
   Does NOT override --app-accent (header/search stay site blue).
   ═══════════════════════════════════════════════════════════════ */

:root {
  --ns-report: #f07167;
  --ns-objection: #0d9488;
  --ns-home: #2563eb;
}

/* Shared canvas atmosphere shell */
.home-page-canvas {
  --atmos-accent: var(--carrier-sf, #3b82f6);
  --atmos-warm: #0f766e;
  --atmos-ink: color-mix(in srgb, var(--clr-txt, #0f172a) 92%, #020617);
  --atmos-muted: var(--clr-txt2, #334155);
  position: relative;
}
.home-page-canvas::before,
.home-page-canvas::after {
  content: none !important;
  display: none !important;
}
@keyframes atmos-grid-drift {
  from { transform: translateY(0); }
  to { transform: translateY(48px); }
}
.home-page-canvas > * {
  position: relative;
  z-index: 1;
}

/* Hero glow plane */
.hb-hero {
  position: relative;
  overflow: hidden;
}
.hb-hero__glow {
  position: absolute;
  inset: -10% -5% auto;
  height: 70%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 50% at 50% 0%, color-mix(in srgb, var(--atmos-accent) 16%, transparent), transparent 70%);
  opacity: 0.85;
}
.hb-hero > .container {
  position: relative;
  z-index: 1;
}

/* Hero — readable size, full layout width (no line collision) */
.home-page-canvas .hb-hero.tech-skin {
  min-height: min(48vh, 26rem);
  display: flex;
  align-items: center;
  padding-top: clamp(2.75rem, 6vh, 4.25rem) !important;
  padding-bottom: clamp(1.75rem, 3.5vh, 2.75rem) !important;
  text-align: center;
  background: transparent;
}
.home-page-canvas .hb-hero .section-header {
  max-width: min(56rem, 100%);
  margin-inline: auto;
  animation: none;
}
.home-page-canvas .hb-hero .section-badge {
  justify-content: center;
  margin-inline: auto;
  margin-bottom: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  font-size: clamp(0.88rem, 1.2vw, 0.98rem);
  color: var(--atmos-accent);
  border-color: color-mix(in srgb, var(--atmos-accent) 32%, transparent);
  background: color-mix(in srgb, var(--atmos-accent) 9%, transparent);
}
.home-page-canvas .hb-hero .section-title {
  font-family: "Tajawal", system-ui, sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1.38;
  color: var(--atmos-ink);
}
.home-page-canvas .hb-hero .section-title .text-grad {
  display: block;
  margin-top: 0.4em;
  font-size: 0.92em;
  letter-spacing: inherit;
  line-height: 1.38;
  font-weight: 800;
}
.home-page-canvas .hb-hero .section-desc {
  max-width: min(48rem, 100%);
  margin-inline: auto;
  margin-top: 0.85rem;
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  line-height: 1.8;
  color: var(--atmos-muted);
}
.home-page-canvas .hb-hero .text-grad {
  color: var(--atmos-accent);
  -webkit-text-fill-color: unset;
  background: none;
}
.home-page-canvas .hb-hero .content-hero-dot {
  background: var(--atmos-accent);
}
@keyframes atmos-rise {
  from { opacity: 0; transform: translateY(0.7rem); }
  to { opacity: 1; transform: none; }
}

/* Soft chapter rules use page accent */
.home-page-canvas .hb-chapter__num {
  color: var(--atmos-accent);
}
.home-page-canvas .hb-chapter__rule {
  background: linear-gradient(
    to left,
    transparent 0%,
    var(--clr-border) 35%,
    color-mix(in srgb, var(--atmos-accent) 22%, var(--clr-border)) 100%
  );
}
html[dir="ltr"] .home-page-canvas .hb-chapter__rule {
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--clr-border) 35%,
    color-mix(in srgb, var(--atmos-accent) 22%, var(--clr-border)) 100%
  );
}

/* ── Tool cards: solid surface, no tint/gradient nest ── */
.home-page-canvas .search-card,
.home-page-canvas .search-card--pro,
.home-page-canvas .report-tool-shell,
.home-page-canvas .hb-tool-form-wrap > .card,
.home-page-canvas #report-tool .hb-tool-form-wrap > .card,
.home-page-canvas #objection-tool .hb-tool-form-wrap > .card,
.home-page-canvas #objection-tool .obj-mode-section {
  background: #fff !important;
  background-image: none !important;
  border: 1px solid color-mix(in srgb, var(--clr-bg, #f1f5f9) 55%, var(--clr-border));
  box-shadow: 0 10px 28px color-mix(in srgb, #0f172a 5%, transparent);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 1;
}
html[data-bs-theme="dark"] .home-page-canvas .search-card,
html[data-bs-theme="dark"] .home-page-canvas .search-card--pro,
html[data-bs-theme="dark"] .home-page-canvas .report-tool-shell,
html[data-bs-theme="dark"] .home-page-canvas .hb-tool-form-wrap > .card,
html[data-bs-theme="dark"] .home-page-canvas #report-tool .hb-tool-form-wrap > .card,
html[data-bs-theme="dark"] .home-page-canvas #objection-tool .hb-tool-form-wrap > .card,
html[data-bs-theme="dark"] .home-page-canvas #objection-tool .obj-mode-section {
  background: var(--clr-surface) !important;
}
.home-page-canvas .search-card--pro {
  border-color: color-mix(in srgb, var(--ns-home) 16%, var(--clr-border));
}
.home-page-canvas .report-tool-shell,
.home-page-canvas #report-tool .hb-tool-form-wrap > .card {
  border-color: color-mix(in srgb, var(--ns-report) 18%, var(--clr-border));
}
.home-page-canvas #objection-tool .hb-tool-form-wrap > .card,
.home-page-canvas #objection-tool .obj-mode-section {
  border-color: color-mix(in srgb, var(--ns-objection) 18%, var(--clr-border));
  border-radius: 1.15rem;
}

/* Content panels — solid, harmonious border only */
.home-page-canvas .hb-faq-panel,
.home-page-canvas .hb-alert-inner,
.home-page-canvas .hb-bento-card,
.home-page-canvas .hb-timeline-item,
.home-page-canvas .hb-rich-card {
  border-radius: 1.05rem;
}
.home-page-canvas .hb-faq-panel,
.home-page-canvas .hb-bento-card {
  border: 1px solid color-mix(in srgb, var(--atmos-accent) 12%, var(--clr-border));
  background: #fff;
  backdrop-filter: none;
}
html[data-bs-theme="dark"] .home-page-canvas .hb-faq-panel,
html[data-bs-theme="dark"] .home-page-canvas .hb-bento-card {
  background: var(--clr-surface);
}

/* Soft page badges / labels — same family as page accent */
.home-page-canvas .tool-section-label {
  color: var(--atmos-accent);
  border-color: color-mix(in srgb, var(--atmos-accent) 30%, transparent);
  background: color-mix(in srgb, var(--atmos-accent) 8%, transparent);
}

/* ═══════════════════════════════════
   HOME — Discovery (blue family only)
   ═══════════════════════════════════ */
body.page-home-default {
  --atmos-accent: var(--ns-home);
  --atmos-warm: #0891b2;
}
body.page-home-default .home-page-canvas {
  background-color: var(--clr-bg);
  background-image:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--clr-bg) 82%, #dbeafe) 0%,
      var(--clr-bg) 48%,
      color-mix(in srgb, var(--clr-bg) 92%, #e0f2fe) 100%
    );
}
body.page-home-default .hb-hero__glow {
  background:
    radial-gradient(ellipse 70% 45% at 50% -5%, color-mix(in srgb, var(--ns-home) 16%, transparent), transparent 68%);
}
body.page-home-default .kashef-tool-head .tool-section-label,
body.page-home-default .kashef-tool-section .tool-section-label {
  color: var(--ns-home);
  border-color: color-mix(in srgb, var(--ns-home) 30%, transparent);
  background: color-mix(in srgb, var(--ns-home) 8%, transparent);
}

/* ═══════════════════════════════════
   REPORT — Alert (coral family only)
   ═══════════════════════════════════ */
body.page-type-report {
  --atmos-accent: var(--ns-report);
  --atmos-warm: #e8958f;
  --report-accent: var(--ns-report);
}
body.page-type-report .tool-page-canvas.home-page-canvas,
body.page-type-report .home-page-canvas {
  background-color: var(--clr-bg);
  background-image:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--clr-bg) 82%, #ffe4e6) 0%,
      var(--clr-bg) 48%,
      color-mix(in srgb, var(--clr-bg) 92%, #ffedd5) 100%
    );
}
body.page-type-report .hb-hero__glow {
  background:
    radial-gradient(ellipse 58% 50% at 50% 0%, color-mix(in srgb, var(--ns-report) 16%, transparent), transparent 70%);
}
body.page-type-report .hb-tool-head .tool-section-label,
body.page-type-report #report-tool .tool-section-label {
  color: var(--ns-report);
  border-color: color-mix(in srgb, var(--ns-report) 32%, transparent);
  background: color-mix(in srgb, var(--ns-report) 9%, transparent);
}
body.page-type-report .report-tool-step.is-active .report-tool-step-num,
body.page-type-report .rm-step.active {
  background: var(--ns-report);
  border-color: var(--ns-report);
}

/* ═══════════════════════════════════
   OBJECTION — Fairness (teal family only)
   ═══════════════════════════════════ */
body.page-type-objection {
  --atmos-accent: var(--ns-objection);
  --atmos-warm: #14b8a6;
  --objection-accent: var(--ns-objection);
}
body.page-type-objection .tool-page-canvas.home-page-canvas,
body.page-type-objection .home-page-canvas {
  background-color: var(--clr-bg);
  background-image:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--clr-bg) 82%, #ccfbf1) 0%,
      var(--clr-bg) 48%,
      color-mix(in srgb, var(--clr-bg) 92%, #d1fae5) 100%
    );
}
body.page-type-objection .hb-hero__glow {
  background:
    radial-gradient(ellipse 58% 50% at 50% 0%, color-mix(in srgb, var(--ns-objection) 16%, transparent), transparent 70%);
}
body.page-type-objection .hb-hero .section-badge {
  color: var(--ns-objection);
  border-color: color-mix(in srgb, var(--ns-objection) 32%, transparent);
  background: color-mix(in srgb, var(--ns-objection) 9%, transparent);
}
body.page-type-objection .hb-hero .text-grad {
  color: var(--ns-objection);
  -webkit-text-fill-color: unset;
}
body.page-type-objection .hb-hero .content-hero-dot {
  background: var(--ns-objection);
}
body.page-type-objection #objection-tool .hb-tool-head .tool-section-label,
body.page-type-objection #objection-tool .tool-section-label {
  color: var(--ns-objection);
  border-color: color-mix(in srgb, var(--ns-objection) 32%, transparent);
  background: color-mix(in srgb, var(--ns-objection) 9%, transparent);
}
body.page-type-objection .obj-mode-option input:checked + .obj-mode-option__inner {
  border-color: color-mix(in srgb, var(--ns-objection) 48%, transparent);
  background: color-mix(in srgb, var(--ns-objection) 10%, transparent);
  color: var(--ns-objection);
}
body.page-type-objection .obj-target-card:has(input:checked) {
  border-color: color-mix(in srgb, var(--ns-objection) 45%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ns-objection) 14%, transparent);
}

/* Dark theme — muted wash only */
html[data-bs-theme="dark"] body.page-home-default .home-page-canvas {
  background-image:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--clr-bg) 90%, #1e3a8a) 0%,
      var(--clr-bg) 50%,
      color-mix(in srgb, var(--clr-bg) 94%, #164e63) 100%
    );
}
html[data-bs-theme="dark"] body.page-type-report .home-page-canvas {
  background-image:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--clr-bg) 90%, #7f1d1d) 0%,
      var(--clr-bg) 50%,
      color-mix(in srgb, var(--clr-bg) 94%, #7c2d12) 100%
    );
}
html[data-bs-theme="dark"] body.page-type-objection .home-page-canvas {
  background-image:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--clr-bg) 90%, #134e4a) 0%,
      var(--clr-bg) 50%,
      color-mix(in srgb, var(--clr-bg) 94%, #115e59) 100%
    );
}
html[data-bs-theme="dark"] .home-page-canvas .search-card,
html[data-bs-theme="dark"] .home-page-canvas .search-card--pro,
html[data-bs-theme="dark"] .home-page-canvas .report-tool-shell,
html[data-bs-theme="dark"] .home-page-canvas .hb-tool-form-wrap > .card,
html[data-bs-theme="dark"] .home-page-canvas #report-tool .hb-tool-form-wrap > .card,
html[data-bs-theme="dark"] .home-page-canvas #objection-tool .hb-tool-form-wrap > .card,
html[data-bs-theme="dark"] .home-page-canvas #objection-tool .obj-mode-section,
html[data-bs-theme="dark"] .home-page-canvas .hb-faq-panel,
html[data-bs-theme="dark"] .home-page-canvas .hb-bento-card {
  background: var(--clr-surface) !important;
  background-image: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .home-page-canvas .hb-hero .section-header {
    animation: none !important;
  }
}

@media (max-width: 640px) {
  .home-page-canvas .hb-hero.tech-skin {
    min-height: min(40vh, 20rem);
  }
  .home-page-canvas .hb-hero .section-title {
    font-size: clamp(1.55rem, 6.5vw, 1.95rem);
    line-height: 1.3;
  }
}