/* ==========================================================================
   WESTON CLICK — home.css
   Page-specific styles for index.html only.

   Layout DNA — every section is deliberately a different shape so the page
   never repeats itself as you scroll:
     1  Hero ................ shared split hero (.hhero, base.css)
     1b Diagnosis ........... bone panel, offset from the hero: calendar + verdict bar
     2  Problem ............. dark, horizontal flow of cards
     3  Reframe ............. light, 4-node card flow
     4  Phases .............. tinted bento grid (headline + detail copy)
     5  Differentiation ..... two facing panels, one green one neutral
     6  Objections .......... sticky heading + accordion card
     7  Qualification ....... green-edged yes card + quieter no card
     8  Final CTA ........... framed card on dark
   ========================================================================== */

/* --------------------------------------------------------------------------
   SHARED: the floating card treatment used across the page
   -------------------------------------------------------------------------- */
.fcard {
  position: relative;
  border-radius: var(--r-xl);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-soft);
}
.fcard:hover {
  transform: translateY(-6px);
  border-color: var(--brand-200);
  box-shadow: var(--shadow-xl);
}
/* Dark surfaces */
.fcard--ink {
  background: rgba(255, 255, 255, .045);
  border-color: rgba(255, 255, 255, .09);
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.fcard--ink:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(var(--accent-rgb), .55);
  box-shadow: 0 26px 60px -24px rgba(0, 0, 0, .9);
}

/* Dark section shell */
.ink-section {
  position: relative;
  overflow: hidden;
  background: var(--surface-ink);
  color: rgba(255, 255, 255, .62);
}
.ink-section h2, .ink-section h3 { color: #fff; }
.ink-section .lead { color: rgba(255, 255, 255, .6); }
.ink-section .eyebrow { color: var(--accent-on-dark); }
.ink-section .eyebrow::before { background: var(--accent-on-dark); }
.ink-section > .container { position: relative; z-index: 1; }

/* Section heading rhythm — tighter than the global default */
.home-head { margin-bottom: clamp(30px, 3.4vw, 46px); }

/* --------------------------------------------------------------------------
   SECTION 1b — DIAGNOSIS
   Its own surface, on purpose. The hero is white; this is a bone panel that
   begins after a clear gap and carries its own rounded top edge and hairline,
   so the two sections can never read as one continuous block. Centred
   statement, calendar as the payoff, verdict bar underneath.
   -------------------------------------------------------------------------- */
.diagnose {
  position: relative;
  /* The gap that keeps this off the hero. */
  margin-top: clamp(44px, 5.5vw, 92px);
  padding-top: clamp(58px, 6.5vw, 100px);
  padding-bottom: clamp(56px, 6vw, 92px);
  background: var(--bone);
  border-top: 1px solid var(--line);
  border-radius: clamp(26px, 3.2vw, 46px) clamp(26px, 3.2vw, 46px) 0 0;
}

.diagnose__head {
  max-width: 740px;
  margin-inline: auto;
  text-align: center;
}
.diagnose__title {
  margin-top: var(--sp-4);
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.6rem);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.04em;
  color: var(--ink-900);
}
/* Brand underline that draws itself in once the heading is revealed. */
.diagnose__mark { position: relative; white-space: nowrap; color: var(--accent); }
.diagnose__mark::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: .04em;
  height: .17em;
  border-radius: 3px;
  background: rgba(var(--accent-bright-rgb), .3);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .7s var(--ease-out) .25s;
}
.diagnose__title.is-revealed .diagnose__mark::after { transform: scaleX(1); }

.diagnose__sub {
  margin-top: var(--sp-5);
  max-width: 56ch;
  margin-inline: auto;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-500);
}

/* --- Calendar stage --- */
.diagnose__stage {
  position: relative;
  max-width: 860px;
  margin: clamp(38px, 4.4vw, 60px) auto 0;
}

.diagnose__chip {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px 9px 11px;
  border-radius: var(--r-pill);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 14px 32px -16px rgba(15, 26, 22, .4);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink-800);
  animation: hcard-float 7s var(--ease-soft) infinite;
}
.diagnose__chip svg { width: 15px; height: 15px; flex: none; color: var(--accent); }
.diagnose__chip--1 { top: 12%;  left: -30px; }
.diagnose__chip--2 { top: 56%;  left: -48px; animation-delay: -2.3s; }
.diagnose__chip--3 { top: 32%;  right: -36px; animation-delay: -4.6s; }
.diagnose__chip--3 svg { color: var(--accent-bright); }

.diagnose__note {
  margin-top: var(--sp-5);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--ink-400);
}

/* --- Verdict bar --- */
.verdict {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vw, 26px);
  max-width: 940px;
  margin: clamp(34px, 4vw, 52px) auto 0;
  padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.6vw, 32px);
  border-radius: var(--r-xl);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 20px 48px -26px rgba(15, 26, 22, .34);
}
.verdict__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.verdict__swap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.4vw, 16px);
  flex: 1 1 auto;
}
.verdict__pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 17px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
}
.verdict__pill--out { background: var(--ink-50); color: var(--ink-400); }
.verdict__pill--out s { text-decoration-thickness: 2px; text-decoration-color: var(--ink-300); }
.verdict__pill--in  { background: var(--accent); color: #fff; }
.verdict__mark {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  flex: none;
  border-radius: 50%;
}
.verdict__mark svg { width: 12px; height: 12px; }
.verdict__pill--out .verdict__mark { background: var(--ink-200); color: var(--ink-500); }
.verdict__pill--in  .verdict__mark { background: rgba(255, 255, 255, .22); color: #fff; }
.verdict__arrow { display: grid; place-items: center; color: var(--ink-300); }
.verdict__arrow svg { width: 22px; height: 16px; }
.verdict__cta { --btn-py: 14px; --btn-px: 24px; font-size: var(--fs-sm); flex: none; }

@media (max-width: 860px) {
  .diagnose__chip--1 { left: 6px;  top: -16px; }
  .diagnose__chip--2 { left: 6px;  top: auto; bottom: 64px; }
  .diagnose__chip--3 { right: 6px; top: -16px; }
  .verdict { flex-direction: column; text-align: center; }
  .verdict__cta { width: 100%; justify-content: center; }
}
@media (max-width: 560px) {
  .diagnose__chip { font-size: 10px; padding: 7px 12px 7px 9px; }
  .diagnose__chip--2 { display: none; }
  .verdict__arrow { transform: rotate(90deg); }
  .verdict__pill { width: 100%; justify-content: center; }
}

/* --- Calendar card --- */
.cal {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.cal__chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-alt), var(--white));
}
.cal__dots { display: inline-flex; gap: 6px; flex: none; }
.cal__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-200); }
.cal__title {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal__live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mint-500);
}
.cal__live i {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
  animation: cal-pulse 2s var(--ease-soft) infinite;
}
@keyframes cal-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(20, 184, 124, .45); }
  50%      { box-shadow: 0 0 0 6px rgba(20, 184, 124, 0); }
}

.cal__week {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: clamp(14px, 2vw, 22px);
}
.cal__day-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  margin-bottom: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-300);
}
.cal__day-label em {
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-700);
}
.cal__day--today .cal__day-label em { color: var(--accent); }
.cal__slots { display: grid; gap: 8px; }
.cal__slot {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  height: 48px;
  padding: 0 8px;
  border-radius: 10px;
  border: 1px dashed var(--ink-100);
  background: var(--surface-alt);
  transition: background-color .45s var(--ease-out), border-color .45s var(--ease-out);
}
.cal__slot.is-booked {
  border: 1px solid var(--brand-200);
  background: linear-gradient(160deg, var(--accent-tint), var(--white));
  box-shadow: 0 2px 8px -4px rgba(var(--accent-rgb), .5);
  animation: slot-pop .5s var(--ease-spring) both;
}
@keyframes slot-pop {
  0%   { transform: scale(.9); opacity: 0; }
  100% { transform: scale(1);  opacity: 1; }
}
.cal__slot-time {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  opacity: 0;
  transition: opacity .3s var(--ease-soft) .1s;
}
.cal__slot-bar {
  height: 4px;
  width: 0;
  border-radius: 3px;
  background: var(--accent);
  transition: width .5s var(--ease-out) .12s;
}
.cal__slot.is-booked .cal__slot-time { opacity: 1; }
.cal__slot.is-booked .cal__slot-bar  { width: 78%; }

.cal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 14px clamp(14px, 2vw, 22px);
  border-top: 1px solid var(--line);
  background: var(--surface-alt);
}
.cal__footer-label { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-500); }
.cal__counter {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 420px) {
  .cal__week { gap: 5px; padding: 12px; }
  .cal__slot { height: 42px; padding: 0 5px; }
  .cal__slot-time { font-size: 10px; letter-spacing: -.03em; }
}

/* --------------------------------------------------------------------------
   SECTION 2 — PROBLEM  (dark, horizontal flow of cards)
   -------------------------------------------------------------------------- */
.problem { padding-block: var(--section-y); }

.leakflow {
  display: grid;
  grid-template-columns: 1.15fr repeat(3, 1fr) 1.15fr;
  gap: clamp(10px, 1.2vw, 16px);
  align-items: stretch;
}
.leaknode {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(18px, 2vw, 24px);
  border-radius: var(--r-lg);
  text-align: left;
}
.leaknode__icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 13px;
  flex: none;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .1);
  color: var(--accent-on-dark);
}
.leaknode__icon svg { width: 21px; height: 21px; }
.leaknode__title {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}
.leaknode__text { font-size: var(--fs-xs); line-height: 1.55; color: rgba(255, 255, 255, .5); }

/* The three drains read as losses, not stages */
.leaknode--loss {
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, .14);
  box-shadow: none;
}
.leaknode--loss:hover { background: rgba(255, 255, 255, .04); border-color: rgba(var(--accent-rgb), .5); }
.leaknode--loss .leaknode__icon {
  background: rgba(var(--accent-rgb), .22);
  border-color: rgba(var(--accent-rgb), .4);
}
.leaknode--loss .leaknode__title { color: rgba(255, 255, 255, .8); }

/* Endpoints get the solid card treatment */
.leaknode--in .leaknode__icon,
.leaknode--out .leaknode__icon { color: #fff; background: var(--accent); border-color: var(--accent); }

.leakflow__meta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .35);
}
.leakflow__meta i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-on-dark);
  animation: leak-blink 2.4s var(--ease-soft) infinite;
  animation-delay: var(--leak-delay, 0s);
}
@keyframes leak-blink { 0%,100% { opacity: .25; } 50% { opacity: 1; } }

.problem__kicker {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: clamp(26px, 3vw, 38px);
  padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.6vw, 30px);
  border-radius: var(--r-lg);
  border: 1px solid rgba(var(--accent-rgb), .5);
  background: rgba(var(--accent-rgb), .16);
  font-family: var(--font-display);
  font-size: clamp(1.02rem, .96rem + .5vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.4;
  color: #fff;
}
.problem__kicker svg { width: 26px; height: 26px; flex: none; color: var(--accent-on-dark); }

.problem__copy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
  margin-bottom: clamp(30px, 3.4vw, 44px);
}
.problem__copy p { font-size: var(--fs-sm); line-height: 1.75; color: rgba(255, 255, 255, .58); }

@media (max-width: 1000px) {
  .leakflow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leaknode--in, .leaknode--out { grid-column: span 2; }
}
@media (max-width: 620px) {
  .leakflow { grid-template-columns: minmax(0, 1fr); }
  .leaknode--in, .leaknode--out { grid-column: auto; }
  .problem__copy { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   SECTION 3 — REFRAME  (light, four-node card flow)
   -------------------------------------------------------------------------- */
.reframe { padding-block: var(--section-y); }
.reframe__title { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem); }

.flowgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  margin-bottom: clamp(30px, 3.4vw, 44px);
}
.flownode {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(20px, 2.2vw, 28px);
  overflow: hidden;
}
.flownode__step {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}
.flownode__icon {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 16px;
  background: var(--accent-tint);
  border: 1px solid var(--brand-100);
  color: var(--accent);
}
.flownode__icon svg { width: 25px; height: 25px; }
.flownode__name { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 700; letter-spacing: -0.025em; color: var(--ink-900); }
.flownode__text { font-size: var(--fs-xs); line-height: 1.6; color: var(--ink-500); }

/* Arrow between nodes, drawn on the card itself */
.flownode:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -14px;
  width: 20px; height: 20px;
  margin-top: -10px;
  z-index: 2;
  border-radius: 50%;
  background: var(--accent) center / 11px 11px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h11m0 0L9 3.5M13.5 8 9 12.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  box-shadow: 0 0 0 4px var(--white);
}
/* Final node is the outcome */
.flownode--out {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 18px 40px -18px rgba(var(--accent-rgb), .9);
}
.flownode--out:hover { border-color: var(--accent-hover); }
.flownode--out .flownode__step { color: rgba(255, 255, 255, .65); }
.flownode--out .flownode__name { color: #fff; }
.flownode--out .flownode__text { color: rgba(255, 255, 255, .75); }
.flownode--out .flownode__icon {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .22);
  color: #fff;
}

.reframe__foot {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) auto;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  padding: clamp(22px, 2.6vw, 32px);
  border-radius: var(--r-xl);
  background: var(--surface-alt);
  border: 1px solid var(--line);
}
.reframe__foot p { font-size: var(--fs-sm); line-height: 1.7; color: var(--ink-600); }

@media (max-width: 1000px) { .flowgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .reframe__foot { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px)  {
  .flowgrid { grid-template-columns: minmax(0, 1fr); }
  .flownode:not(:last-child)::after { display: none; }
}

/* --------------------------------------------------------------------------
   SECTION 4 — PHASES  (tinted bento)
   -------------------------------------------------------------------------- */
.phases {
  padding-block: var(--section-y);
  background: linear-gradient(180deg, var(--accent-tint), var(--white));
}
.phases__marker { margin-top: var(--sp-5); }

/* Lead-in carried over from the old standalone breakdown section */
.phases__leadin {
  margin: clamp(28px, 3.4vw, 44px) 0 clamp(20px, 2.4vw, 28px);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, .98rem + .5vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink-700);
}

.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}
.bento__item { padding: clamp(22px, 2.6vw, 32px); display: flex; flex-direction: column; }

.bento__index {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.bento__title {
  margin-top: var(--sp-5);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.bento__text { margin-top: var(--sp-3); font-size: var(--fs-sm); line-height: 1.7; color: var(--ink-500); }

/* The detail paragraph merged in from the old breakdown section */
.bento__detail {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  line-height: 1.75;
  color: var(--ink-400);
}

/* Inline graphics inside the bento cards */
.bento__art { margin-top: auto; padding-top: var(--sp-6); }

/* mini wireframe */
.art-wire { display: grid; gap: 7px; padding: 16px; border-radius: var(--r-md); background: var(--surface-alt); border: 1px solid var(--line); }
.art-wire i { display: block; height: 8px; border-radius: 4px; background: var(--ink-100); }
.art-wire i:nth-child(1) { width: 70%; background: var(--accent); height: 11px; }
.art-wire i:nth-child(2) { width: 90%; }
.art-wire i:nth-child(3) { width: 55%; }
.art-wire span {
  margin-top: 4px;
  align-self: flex-start;
  display: inline-flex;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

/* mini chat */
.art-chat { display: grid; gap: 8px; }
.art-chat b, .art-chat em {
  display: block;
  max-width: 82%;
  padding: 9px 13px;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.45;
  border-radius: 13px;
}
.art-chat b { background: var(--ink-50); border: 1px solid var(--line); color: var(--ink-600); border-bottom-left-radius: 4px; }
.art-chat em { margin-left: auto; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }

/* mini bars */
.art-bars { display: flex; align-items: flex-end; gap: 7px; height: 76px; }
.art-bars i {
  flex: 1;
  border-radius: 5px 5px 2px 2px;
  background: var(--brand-200);
  height: var(--h, 40%);
}
.art-bars i:last-child { background: var(--accent); }

.phases__foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: clamp(20px, 2.4vw, 28px) clamp(22px, 2.6vw, 32px);
}
.phases__closing {
  max-width: 58ch;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, .96rem + .45vw, 1.22rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.025em;
  color: var(--ink-800);
}
.phases__closing em { font-style: italic; color: var(--ink-400); font-weight: 400; }
.phases__closing-group > * + * { margin-top: var(--sp-3); }
.phases__closing--punch { color: var(--accent); }

@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   SECTION 5 — DIFFERENTIATION  (two facing panels)
   -------------------------------------------------------------------------- */
.differentiation { padding-block: var(--section-y); }

.panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
  align-items: stretch;
}
.panel { padding: clamp(26px, 3vw, 38px); display: flex; flex-direction: column; }
.panel__label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.panel__label svg { width: 14px; height: 14px; }
.panel__title { margin-top: var(--sp-5); font-size: var(--fs-h3); letter-spacing: -0.03em; }
.panel__list { margin-top: var(--sp-5); }
.panel__list > li {
  display: flex;
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.panel__list > li:first-child { border-top: 0; padding-top: 0; }
.panel__list svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }

/* Old way — neutral */
.panel--old { background: var(--surface-alt); }
.panel--old .panel__label { background: var(--ink-100); color: var(--ink-500); }
.panel--old .panel__list > li { color: var(--ink-500); }
.panel--old .panel__list svg { color: var(--ink-300); }

/* New way — brand green */
.panel--new {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 26px 60px -26px rgba(var(--accent-rgb), .95);
}
.panel--new:hover { border-color: var(--accent-hover); }
.panel--new .panel__label { background: rgba(255, 255, 255, .16); color: #fff; }
.panel--new .panel__title { color: #fff; }
.panel--new .panel__list > li { color: rgba(255, 255, 255, .82); border-top-color: rgba(255, 255, 255, .16); }
.panel--new .panel__list svg { color: #fff; }

.differentiation__link { margin-top: clamp(24px, 3vw, 36px); text-align: center; }

@media (max-width: 820px) { .panels { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   SECTION 7 — OBJECTIONS  (sticky heading + accordion card)
   -------------------------------------------------------------------------- */
.objections { padding-block: var(--section-y); background: var(--surface-alt); }
.objections__layout {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.objections__head { position: sticky; top: calc(var(--header-space) + 16px); }
.objections__head .lead { margin-top: var(--sp-4); }
.objections__head .btn { margin-top: var(--sp-6); }
.objections__card { padding: clamp(10px, 1.6vw, 20px) clamp(22px, 2.6vw, 32px); }
.objections__card .accordion { border-top: 0; }
.objections__card .accordion__item:last-child { border-bottom: 0; }

@media (max-width: 900px) {
  .objections__layout { grid-template-columns: minmax(0, 1fr); }
  .objections__head { position: static; }
}

/* --------------------------------------------------------------------------
   SECTION 7 — QUALIFICATION
   Two properly built cards: a green-edged "yes" card carrying the weight, and
   a deliberately quieter "no" card beside it. The section sits on a green
   tint so both read unmistakably as cards rather than flat page regions.
   -------------------------------------------------------------------------- */
.qualify {
  padding-block: var(--section-y);
  background: var(--accent-tint);
}
.qcards {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(16px, 2.2vw, 28px);
  align-items: start;
}

.qcard {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-2xl);
  background: var(--white);
  border: 1px solid var(--line);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-soft);
}
.qcard:hover { transform: translateY(-6px); }

/* The "yes" card is the hero: green-tinted elevation and a brand edge */
.qcard--yes {
  border-color: var(--brand-200);
  box-shadow: 0 32px 70px -30px rgba(var(--accent-rgb), .55),
              0 4px 14px -6px rgba(15, 26, 22, .1);
}
.qcard--yes:hover {
  border-color: var(--brand-300);
  box-shadow: 0 40px 84px -30px rgba(var(--accent-rgb), .7),
              0 6px 18px -6px rgba(15, 26, 22, .12);
}
/* The "no" card stays quieter — present, but never competing */
.qcard--no {
  background: var(--surface-alt);
  box-shadow: 0 18px 44px -26px rgba(15, 26, 22, .3);
}
.qcard--no:hover { box-shadow: 0 24px 54px -26px rgba(15, 26, 22, .38); }

/* Top accent bar */
.qcard__edge {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
}
.qcard--yes .qcard__edge {
  background: linear-gradient(90deg, var(--accent), var(--brand-400) 55%, var(--accent));
}
.qcard--no .qcard__edge { background: var(--ink-200); }

/* Oversized ghost glyph anchoring each card */
.qcard__watermark {
  position: absolute;
  top: 46px; right: -26px;
  width: 156px; height: 156px;
  pointer-events: none;
}
.qcard__watermark svg { width: 100%; height: 100%; }
.qcard--yes .qcard__watermark { color: var(--accent); opacity: .055; }
.qcard--no .qcard__watermark  { color: var(--ink-900); opacity: .035; }

/* --- Card header --- */
.qcard__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: clamp(24px, 3vw, 32px) clamp(22px, 2.8vw, 30px) clamp(18px, 2.2vw, 22px);
  border-bottom: 1px solid var(--line);
}
.qcard--no .qcard__head { border-bottom-color: var(--line-strong); }

.qcard__badge {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  flex: none;
  border-radius: 14px;
  transition: transform var(--dur-base) var(--ease-spring);
}
.qcard__badge svg { width: 22px; height: 22px; }
.qcard:hover .qcard__badge { transform: rotate(-6deg) scale(1.06); }
.qcard--yes .qcard__badge {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(var(--accent-rgb), .8);
}
.qcard--no .qcard__badge {
  background: var(--white);
  border: 1px solid var(--line-strong);
  color: var(--ink-300);
}

.qcard__label {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1rem + .45vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.028em;
}
.qcard--yes .qcard__label { color: var(--ink-900); }
.qcard--no .qcard__label  { color: var(--ink-500); }

.qcard__count {
  margin-left: auto;
  flex: none;
  display: grid;
  place-items: center;
  min-width: 30px; height: 30px;
  padding-inline: 9px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.qcard--yes .qcard__count { background: var(--accent-tint); border: 1px solid var(--brand-200); color: var(--accent); }
.qcard--no .qcard__count  { background: var(--ink-100); color: var(--ink-400); }

/* --- Rows --- */
.qcard__list {
  position: relative;
  padding: clamp(10px, 1.4vw, 14px) clamp(12px, 1.6vw, 16px) clamp(18px, 2.2vw, 24px);
}
.qcard__list > li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 13px 12px;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  line-height: 1.6;
  transition: background-color var(--dur-base) var(--ease-soft),
              transform var(--dur-base) var(--ease-out);
}
.qcard--yes .qcard__list > li { color: var(--ink-700); }
.qcard--no  .qcard__list > li { color: var(--ink-400); }
.qcard--yes .qcard__list > li:hover { background: var(--accent-tint); transform: translateX(4px); }
.qcard--no  .qcard__list > li:hover { background: var(--ink-50); }

.qcard__mark {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  flex: none;
  margin-top: 1px;
  border-radius: 50%;
  transition: transform var(--dur-base) var(--ease-spring);
}
.qcard__mark svg { width: 12px; height: 12px; }
.qcard__list > li:hover .qcard__mark { transform: scale(1.12); }
.qcard--yes .qcard__mark { background: var(--accent); color: #fff; }
.qcard--no  .qcard__mark { background: var(--ink-200); color: var(--white); }

.qcard__foot {
  margin: 0 clamp(22px, 2.8vw, 30px) clamp(22px, 2.8vw, 30px);
  padding-top: var(--sp-5);
  border-top: 1px dashed var(--line-strong);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--ink-400);
}

.qualify__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  margin-top: clamp(28px, 3.4vw, 42px);
}

@media (max-width: 860px) {
  .qcards { grid-template-columns: minmax(0, 1fr); }
  .qcard__watermark { top: 30px; right: -34px; width: 130px; height: 130px; }
}

/* --------------------------------------------------------------------------
   SECTION 8 — FINAL CTA  (framed card on dark)
   -------------------------------------------------------------------------- */
.finalcta { padding-block: var(--section-y); }
.finalcta__card {
  position: relative;
  max-width: 900px;
  margin-inline: auto;
  padding: clamp(34px, 5vw, 64px) clamp(24px, 4vw, 56px);
  text-align: center;
  border-radius: var(--r-2xl);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(var(--accent-rgb), .55), transparent 62%),
    rgba(255, 255, 255, .04);
  border: 1px solid rgba(var(--accent-rgb), .5);
  box-shadow: 0 40px 90px -40px rgba(var(--accent-rgb), .9);
}
.finalcta__card h2 { font-size: clamp(1.8rem, 1.35rem + 2vw, 2.7rem); }
.finalcta__card .lead { margin-top: var(--sp-5); margin-inline: auto; max-width: 46ch; }
.finalcta__card .body-copy {
  margin-top: var(--sp-5);
  margin-inline: auto;
  max-width: 54ch;
  color: rgba(255, 255, 255, .58);
}
.finalcta__card .btn-row { margin-top: var(--sp-7); }
.finalcta__card .cta-note { margin-top: var(--sp-5); color: rgba(255, 255, 255, .5); }