/* ClinicBoost US — vertical subpage framework (loads after site.css) */

.sub-hero {
  min-height: 92vh; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center;
  padding: 18vh clamp(20px, 7vw, 110px) 10vh;
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 90% 55% at 80% -10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 65%),
    var(--ink);
}
.sub-hero .open-badge {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 999px; padding: 8px 18px; margin-bottom: 30px;
  display: inline-flex; align-items: center; gap: 10px;
}
.sub-hero .open-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: pulse 2.4s infinite; }
.sub-hero h1 {
  font-family: var(--font-display); font-weight: 470;
  font-size: clamp(40px, 5.8vw, 84px); line-height: 1.03; letter-spacing: -0.02em;
  max-width: 12.5em;
  font-variation-settings: "SOFT" 60, "WONK" 1;
}
.sub-hero h1 em { font-style: italic; color: var(--accent); }
.sub-hero .sub { margin-top: 26px; color: var(--muted); font-size: clamp(16px, 1.6vw, 20px); max-width: 33em; }
.sub-hero .cta-row { margin-top: 38px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- night scene ---------- */
.night-scene {
  padding: 14vh clamp(20px, 6vw, 100px);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px);
  align-items: center; border-top: 1px solid var(--line);
  background: radial-gradient(ellipse 70% 60% at 20% 40%, #10182c, transparent 70%), var(--ink);
}
.night-scene .ns-copy h2 {
  font-family: var(--font-display); font-weight: 470;
  font-size: clamp(30px, 3.8vw, 54px); line-height: 1.06; letter-spacing: -0.02em;
}
.night-scene .ns-copy h2 em { font-style: italic; color: var(--accent); }
.night-scene .ns-copy p { margin-top: 20px; color: var(--muted); max-width: 30em; }
.ns-clock { font-family: var(--font-mono); font-size: 15px; color: var(--accent); letter-spacing: 0.2em; margin-bottom: 18px; }

/* ---------- pain stats ---------- */
.pain {
  padding: 14vh clamp(20px, 6vw, 100px); border-top: 1px solid var(--line);
  background: var(--ink-2);
}
.pain h2 {
  font-family: var(--font-display); font-weight: 470;
  font-size: clamp(30px, 4vw, 56px); line-height: 1.06; letter-spacing: -0.02em; max-width: 16em;
}
.pain h2 em { font-style: italic; color: var(--coral); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); margin-top: 56px; border: 1px solid var(--line); }
.stat { background: var(--ink-2); padding: 36px 30px; }
.stat .n { font-family: var(--font-mono); font-size: clamp(34px, 3.6vw, 52px); color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1; }
.stat .t { margin-top: 14px; color: var(--muted); font-size: 15px; }

/* ---------- compare slider ---------- */
.compare { padding: 14vh clamp(20px, 6vw, 100px); border-top: 1px solid var(--line); }
.compare h2, .calc h2, .product h2, .speed h2, .faq h2 {
  font-family: var(--font-display); font-weight: 470;
  font-size: clamp(30px, 4vw, 56px); line-height: 1.06; letter-spacing: -0.02em;
}
.compare h2 em, .calc h2 em, .product h2 em, .speed h2 em { font-style: italic; color: var(--accent); }
.compare .hint { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); margin-top: 14px; }
.cmp-stage {
  position: relative; margin-top: 48px; border-radius: 20px; overflow: hidden;
  border: 1px solid var(--line); background: var(--ink-2);
  user-select: none;
}
.cmp-pane { padding: clamp(24px, 4vw, 56px); }
.cmp-pane .cmp-label {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 22px;
  display: flex; align-items: center; gap: 10px;
}
.cmp-pane.without .cmp-label { color: var(--coral); }
.cmp-pane.with-cb .cmp-label { color: var(--mint); }
.cmp-thread { display: flex; flex-direction: column; gap: 12px; max-width: 560px; margin: 0 auto; }
.cmp-pane.with-cb .cmp-label { justify-content: flex-end; }
.cmp-pane.without .cmp-label { justify-content: flex-start; }
.cmp-msg { padding: 12px 16px; border-radius: 4px 14px 14px 14px; background: var(--ink-3); border: 1px solid var(--line); font-size: 15px; max-width: 85%; }
.cmp-msg.r { align-self: flex-end; border-radius: 14px 4px 14px 14px; }
.cmp-pane.with-cb .cmp-msg.r { background: color-mix(in srgb, var(--mint) 10%, var(--ink-3)); border-color: color-mix(in srgb, var(--mint) 28%, transparent); }
.cmp-msg.sys { align-self: center; background: none; border: none; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; max-width: none; }
.cmp-pane.without .cmp-msg.sys { color: var(--coral); }
.cmp-pane.with-cb .cmp-msg.sys { color: var(--mint); }
.cmp-top {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--cut, 50%)) 0 0);
  background: var(--ink-2);
  will-change: clip-path;
}
.cmp-handle {
  position: absolute; top: 0; bottom: 0; left: var(--cut, 50%); width: 2px;
  background: var(--accent); pointer-events: none;
  box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 60%, transparent);
}
.cmp-handle::after {
  content: "◂ ▸"; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--accent); color: var(--ink);
  font-size: 13px; padding: 10px 12px; border-radius: 999px; white-space: nowrap;
  font-family: var(--font-mono);
}
.cmp-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }

/* ---------- calculator ---------- */
.calc { padding: 14vh clamp(20px, 6vw, 100px); border-top: 1px solid var(--line); background: var(--ink-2); }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); margin-top: 52px; align-items: center; }
.calc-controls .ctl { margin-bottom: 38px; }
.calc-controls label { display: flex; justify-content: space-between; font-size: 15px; color: var(--muted); margin-bottom: 14px; }
.calc-controls label output { font-family: var(--font-mono); color: var(--cream); font-size: 17px; }
input[type="range"] {
  width: 100%; appearance: none; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--accent) var(--fill, 50%), var(--ink-3) var(--fill, 50%));
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--ink);
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 70%, transparent);
  cursor: grab;
}
.calc-result {
  text-align: center; border: 1px solid var(--line); border-radius: 20px;
  padding: clamp(32px, 4vw, 56px);
  background: radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--coral) 12%, transparent), transparent 70%), var(--ink);
}
.calc-result .lbl { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.calc-result .big {
  font-family: var(--font-mono); font-size: clamp(44px, 5.5vw, 76px);
  color: var(--coral); font-variant-numeric: tabular-nums; line-height: 1.1; margin: 18px 0 6px;
}
.calc-result .per { color: var(--faint); font-size: 14px; }
.calc-result .note { margin-top: 26px; padding-top: 22px; border-top: 1px dashed var(--line); font-size: 15px; color: var(--muted); }
.calc-result .note b { color: var(--mint); font-family: var(--font-mono); font-weight: 500; }

/* ---------- product features ---------- */
.product { padding: 14vh clamp(20px, 6vw, 100px); border-top: 1px solid var(--line); }
.feat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 52px; }
.feat {
  border: 1px solid var(--line); border-radius: 18px; padding: 32px;
  background: linear-gradient(150deg, rgba(255,255,255,0.025), transparent 60%);
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), border-color 0.35s;
}
.feat:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.feat .ico { font-size: 26px; margin-bottom: 18px; display: block; filter: saturate(0.9); }
.feat h3 { font-size: 19px; font-weight: 600; margin-bottom: 10px; }
.feat p { color: var(--muted); font-size: 15px; }

/* ---------- speed steps ---------- */
.speed { padding: 14vh clamp(20px, 6vw, 100px); border-top: 1px solid var(--line); background: var(--ink-2); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; }
.step { position: relative; padding: 30px 26px 26px; border: 1px solid var(--line); border-radius: 18px; }
.step .day { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em; color: var(--accent); text-transform: uppercase; }
.step h3 { font-size: 19px; margin: 14px 0 8px; }
.step p { color: var(--muted); font-size: 15px; }

/* ---------- faq ---------- */
.faq { padding: 14vh clamp(20px, 6vw, 100px); border-top: 1px solid var(--line); }
.faq-list { margin-top: 44px; max-width: 780px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 26px 0;
  font-size: 18px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); font-size: 22px; color: var(--accent); transition: transform 0.3s; flex-shrink: 0; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 26px; color: var(--muted); max-width: 44em; }

/* ---------- daylight subpages (body.day) — screens stay dark, page goes light ---------- */
body.day { color-scheme: light; }
.day .sub-hero {
  background:
    radial-gradient(ellipse 90% 55% at 80% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 65%),
    #fbf5e8;
}
.day .sub-hero h1 em,
.day .ns-clock,
.day .night-scene .ns-copy h2 em,
.day .compare h2 em, .day .calc h2 em, .day .product h2 em, .day .speed h2 em,
.day .stat .n,
.day .faq summary::after,
.day .step .day { color: color-mix(in srgb, var(--accent, var(--amber)) 60%, var(--d-text)); }
.day .open-badge {
  color: color-mix(in srgb, var(--accent) 55%, var(--d-text));
  border-color: color-mix(in srgb, var(--accent) 45%, rgba(22,32,58,0.2));
}
.day .sub-hero .sub, .day .ns-copy p, .day .stat .t,
.day .feat p, .day .step p, .day .faq details p,
.day .calc-controls label { color: var(--d-muted); }
.day .night-scene {
  border-color: var(--d-line);
  background: radial-gradient(ellipse 70% 60% at 20% 40%, rgba(255,196,120,0.18), transparent 70%), #fbf5e8;
}
.day .pain { background: #f4ecda; }
.day .pain h2 em { color: #c2372e; }
.day .stats { background: var(--d-line); border-color: var(--d-line); }
.day .stat { background: #faf3e4; }
.day .compare, .day .product, .day .faq { border-color: var(--d-line); }
.day .compare .hint { color: rgba(22,32,58,0.45); }
.day .cmp-stage { color: var(--cream); border-color: rgba(22,32,58,0.25); } /* the screen stays dark */
.day .calc { background: #f4ecda; border-color: var(--d-line); }
.day .calc-controls label output { color: var(--d-text); }
.day input[type="range"] {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, var(--d-text)) var(--fill, 50%), rgba(22,32,58,0.15) var(--fill, 50%));
}
.day input[type="range"]::-webkit-slider-thumb { border-color: #f4ecda; }
.day .calc-result { color: var(--cream); border-color: rgba(22,32,58,0.25); } /* result screen stays dark */
.day .calc-result .lbl, .day .calc-result .note { color: var(--muted); }
.day .feat { border-color: var(--d-line); background: #faf3e4; }
.day .feat:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--d-text)); }
.day .speed { background: #f4ecda; border-color: var(--d-line); }
.day .step { border-color: var(--d-line); }
.day .faq details { border-color: var(--d-line); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .night-scene, .calc-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .feat-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .cmp-handle::after { content: "◂▸"; padding: 8px 10px; }
}