/* /clinic only. Florian, 2026-10-15: "black and white is not attracting", make it
   friendlier. Palette taken from the distribb.io/healthcare hub (accent red,
   done green, soft greys) so the guide feels like part of the same site.
   Everything is scoped to body[data-magnet^="clinic"] so no other magnet changes. */

body[data-magnet^="clinic"] {
  --c-red: #e11d2a;
  --c-red-soft: #fdecee;
  --c-green: #1f8f4e;
  --c-green-soft: #e8f5ee;
  --c-amber-soft: #fff6e8;
  --c-blue-soft: #eef4ff;
  --c-bg: #f8fafc;
  --c-card: #ffffff;
  --c-line: #e5e7eb;
  --c-ink: #0b0d10;
  --c-body: #4b5563;
  --c-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06);
  background: var(--c-bg);
}
body[data-magnet^="clinic"] .masthead { background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); }
body[data-magnet^="clinic"] .masthead .btn:not(.btn-ghost),
body[data-magnet^="clinic"] .gate-form .btn,
body[data-magnet^="clinic"] #unlocked .btn:not(.btn-ghost) { background: var(--c-red); border-color: var(--c-red); color: #fff; }
body[data-magnet^="clinic"] .logo .dot { background: var(--c-red); }

/* ---------- capture ---------- */
body[data-magnet^="clinic"] .capture { background: radial-gradient(1200px 500px at 50% -120px, #fff 40%, var(--c-bg) 100%); }
body[data-magnet^="clinic"] .eyebrow { display: inline-flex; align-items: center; gap: .45rem; background: var(--c-red-soft); color: var(--c-red); padding: .35rem .8rem; border-radius: 100px; font-weight: 700; width: fit-content; }
body[data-magnet^="clinic"] .capture h1 { letter-spacing: -0.035em; }
body[data-magnet^="clinic"] .capture h1 .hl { color: var(--c-red); }
body[data-magnet^="clinic"] .gate { background: var(--c-card); border: 1px solid var(--c-line); border-radius: 20px; box-shadow: var(--c-shadow); }
body[data-magnet^="clinic"] .free-list .tick { background: var(--c-green); }
body[data-magnet^="clinic"] .gate-form input[type="email"] { border-radius: 100px; }

/* hero preview: what "winning" looks like */
.cl-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: .4rem 0 .2rem; }
@media (max-width: 640px) { .cl-preview { grid-template-columns: 1fr; } }
.cl-mock { background: #fff; border: 1px solid var(--c-line); border-radius: 16px; box-shadow: var(--c-shadow); padding: 14px 14px 12px; font-size: .86rem; color: var(--c-ink); }
.cl-mock-top { display: flex; align-items: center; gap: 8px; color: #6b7280; font-size: .78rem; font-weight: 600; margin-bottom: 10px; }
.cl-mock-top .q { flex: 1; background: #f1f3f6; border-radius: 100px; padding: 5px 10px; color: #374151; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-pin { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 8px 6px; border-radius: 10px; }
.cl-pin + .cl-pin { border-top: 1px solid #f0f1f4; }
.cl-pin .n { width: 22px; height: 22px; border-radius: 50%; background: #e5e7eb; color: #374151; display: grid; place-items: center; font-size: .72rem; font-weight: 800; }
.cl-pin.you { background: var(--c-green-soft); }
.cl-pin.you .n { background: var(--c-green); color: #fff; }
.cl-pin .name { font-weight: 700; line-height: 1.2; }
.cl-pin .meta { color: #6b7280; font-size: .74rem; font-weight: 500; }
.cl-pin .stars { color: #f59e0b; font-size: .78rem; letter-spacing: 1px; }
.cl-chat .bubble { background: #f6f7f9; border-radius: 12px; padding: 10px 12px; line-height: 1.45; color: #1f2937; }
.cl-chat .bubble b { background: var(--c-green-soft); color: var(--c-green); padding: 0 4px; border-radius: 4px; }
.cl-chat .src { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.cl-chat .src span { font-size: .7rem; font-weight: 600; color: #4b5563; background: #fff; border: 1px solid var(--c-line); border-radius: 100px; padding: 2px 8px; }

/* ---------- unlocked article ---------- */
body[data-magnet^="clinic"] #unlocked-wrap { background: var(--c-bg); }
body[data-magnet^="clinic"] #unlocked h2 { letter-spacing: -0.03em; }
body[data-magnet^="clinic"] #unlocked p,
body[data-magnet^="clinic"] #unlocked li { color: var(--c-body); }
body[data-magnet^="clinic"] #unlocked strong { color: var(--c-ink); }
body[data-magnet^="clinic"] .stack > h2 { margin-top: .4rem; }

.cl-intro { background: #fff; border: 1px solid var(--c-line); border-radius: 20px; box-shadow: var(--c-shadow); padding: 22px 24px; display: grid; gap: 14px; }
.cl-intro p { font-size: 1.05rem; }
.cl-intro .cl-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .cl-intro .cl-two { grid-template-columns: 1fr; } }
.cl-path { border-radius: 14px; padding: 14px 16px; }
.cl-path h4 { margin: 0 0 4px; font-size: 1rem; color: var(--c-ink); }
.cl-path p { font-size: .93rem !important; margin: 0; }
.cl-path.diy { background: #f3f4f6; }
.cl-path.auto { background: var(--c-green-soft); }
.cl-path.auto h4 { color: var(--c-green); }
.cl-path .btn { margin-top: 10px; }

.cl-places { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 760px) { .cl-places { grid-template-columns: 1fr; } }
.cl-place { background: #fff; border: 1px solid var(--c-line); border-radius: 16px; padding: 16px; box-shadow: var(--c-shadow); }
.cl-place .ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; margin-bottom: 8px; }
.cl-place:nth-child(1) .ic { background: var(--c-red-soft); }
.cl-place:nth-child(2) .ic { background: var(--c-blue-soft); }
.cl-place:nth-child(3) .ic { background: var(--c-green-soft); }
.cl-place h4 { margin: 0 0 6px; font-size: 1rem; color: var(--c-ink); }
.cl-place p { font-size: .9rem !important; margin: 0; }

.cl-stat { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--c-line); border-left: 4px solid var(--c-red); border-radius: 14px; padding: 14px 16px; }
.cl-stat .big { font-size: 1.9rem; font-weight: 800; color: var(--c-red); letter-spacing: -0.03em; line-height: 1; }
.cl-stat p { margin: 0; font-size: .95rem !important; }

/* timeline of steps */
.cl-steps { position: relative; display: grid; gap: 18px; }
.cl-step { background: #fff; border: 1px solid var(--c-line); border-radius: 20px; box-shadow: var(--c-shadow); overflow: hidden; }
.cl-step-h { display: flex; align-items: center; gap: 12px; padding: 18px 20px 6px; flex-wrap: wrap; }
.cl-step-n { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--c-red); color: #fff; display: grid; place-items: center; font-weight: 800; }
.cl-step-h h3 { margin: 0; font-size: 1.22rem; flex: 1; min-width: 200px; }
.cl-when { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--c-red); background: var(--c-red-soft); padding: 4px 10px; border-radius: 100px; }
.cl-step-b { padding: 6px 20px 20px; display: grid; gap: 12px; }
.cl-step-b ul { margin: 0; padding-left: 1.15rem; display: grid; gap: 6px; }
.cl-why { font-size: .97rem; }
.cl-eg { background: var(--c-amber-soft); border-radius: 12px; padding: 12px 14px; }
.cl-eg p { margin: 0; font-size: .95rem !important; color: #5b4a2b !important; }
.cl-tag { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.cl-eg .cl-tag { color: #b45309; }
.cl-cost { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--c-line); }
@media (max-width: 640px) { .cl-cost { grid-template-columns: 1fr; } }
.cl-cost > div { padding: 14px 20px; }
.cl-cost .diy { background: #fafafa; }
.cl-cost .diy .cl-tag { color: #6b7280; }
.cl-cost .auto { background: var(--c-green-soft); }
.cl-cost .auto .cl-tag { color: var(--c-green); }
.cl-cost p { margin: 0; font-size: .93rem !important; }
.cl-cost .auto p { color: #1d4d33 !important; }

.cl-ahpra { background: var(--c-blue-soft); border-radius: 16px; padding: 16px 18px; }
.cl-ahpra h4 { margin: 0 0 6px; color: #1e3a8a; }
.cl-ahpra p { margin: 0; font-size: .93rem !important; color: #1e3a5f !important; }

/* maths table */
.cl-maths { background: #fff; border: 1px solid var(--c-line); border-radius: 20px; box-shadow: var(--c-shadow); overflow: hidden; }
.cl-maths table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.cl-maths th, .cl-maths td { padding: 11px 14px; text-align: left; border-bottom: 1px solid #f0f1f4; vertical-align: top; }
.cl-maths th { background: #f9fafb; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; }
.cl-maths td:nth-child(3) { color: var(--c-green); font-weight: 700; }
.cl-maths tr.total td { background: #f9fafb; font-weight: 800; color: var(--c-ink); }
.cl-maths tr.total td:nth-child(3) { color: var(--c-green); }
.cl-maths .note { padding: 10px 14px; font-size: .8rem; color: #6b7280; }

.cl-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .cl-quotes { grid-template-columns: 1fr; } }
.cl-quote { background: #fff; border: 1px solid var(--c-line); border-radius: 16px; padding: 16px; }
.cl-quote p { margin: 0 0 8px; font-size: .97rem !important; color: var(--c-ink) !important; font-weight: 600; }
.cl-quote span { font-size: .82rem; color: #6b7280; }

.cl-disc { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-disc a { text-decoration: none; background: #fff; border: 1px solid var(--c-line); border-radius: 100px; padding: 8px 14px; font-weight: 700; font-size: .9rem; color: var(--c-ink); }
.cl-disc a:hover { border-color: var(--c-red); color: var(--c-red); }

.cl-final { background: radial-gradient(520px 260px at 100% 0%, #ffe9dc 0%, rgba(255,233,220,0) 70%), radial-gradient(480px 260px at 0% 100%, #fdecee 0%, rgba(253,236,238,0) 70%), #fff; border: 1px solid var(--c-line); border-radius: 24px; padding: 28px 26px; display: grid; gap: 16px; box-shadow: var(--c-shadow); }
.cl-final h2 { margin: 0; }
.cl-final ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: s; }
.cl-final li { counter-increment: s; display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; color: var(--c-ink) !important; font-weight: 500; }
.cl-final li::before { content: counter(s); width: 28px; height: 28px; border-radius: 50%; background: var(--c-red); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .85rem; }
.cl-final .cta-row { display: flex; flex-wrap: wrap; gap: 10px; }
.cl-final .btn-ghost { background: #fff !important; color: var(--c-ink) !important; border: 1px solid #d0d5dd !important; }

.cl-demo { background: #fff; border: 1px solid var(--c-line); border-left: 4px solid var(--c-red); border-radius: 20px; box-shadow: var(--c-shadow); padding: 20px 22px; display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cl-demo h3 { margin: 0 0 4px; font-size: 1.15rem; }
.cl-demo p { margin: 0; font-size: .95rem !important; }

/* existing components, softened */
body[data-magnet^="clinic"] .drawer { background: #fff; border: 1px solid var(--c-line); border-radius: 14px; }
body[data-magnet^="clinic"] .rulebox { background: #fff; border: 1px solid var(--c-line); border-radius: 18px; box-shadow: var(--c-shadow); }
body[data-magnet^="clinic"] .demo-cta { background: var(--c-ink); border-radius: 20px; }
body[data-magnet^="clinic"] .demo-cta .btn { background: #fff !important; color: var(--c-ink) !important; }
body[data-magnet^="clinic"] .vs-r { background: var(--c-green) !important; border-color: var(--c-green) !important; }
body[data-magnet^="clinic"] .vs-r.is-yours { background: #fff !important; border-color: #d0d5dd !important; }
body[data-magnet^="clinic"] .vs-r.is-yours p, body[data-magnet^="clinic"] .vs-r.is-yours .vs-tag { color: var(--c-ink) !important; }
body[data-magnet^="clinic"] .vs-l { background: #fff; }
body[data-magnet^="clinic"] .trialcta { background: #fff; border-radius: 18px; border: 1px solid var(--c-line); }
body[data-magnet^="clinic"] .vid { background: #fff; border-radius: 14px; }

/* ---------- v3: one visual per step, in the hub's style ---------- */
.cl-vis { margin: 4px 20px 6px; border-radius: 16px; padding: 22px 18px; background: radial-gradient(420px 200px at 100% 0%, #ffe9dc 0%, rgba(255,233,220,0) 70%), radial-gradient(380px 200px at 0% 100%, #fdecee 0%, rgba(253,236,238,0) 70%), #fbfbfc; border: 1px solid #f0f1f4; display: grid; place-items: center; }
.cl-ui { width: 100%; max-width: 400px; background: #fff; border-radius: 14px; box-shadow: 0 2px 4px rgba(16,24,40,.04), 0 12px 28px rgba(16,24,40,.08); padding: 14px; font-size: .84rem; color: #111827; }
.cl-ui-h { display: flex; justify-content: space-between; align-items: center; font-weight: 800; margin-bottom: 10px; }
.cl-badge { font-size: .68rem; font-weight: 700; background: #e8f5ee; color: #1f8f4e; border-radius: 100px; padding: 2px 8px; }
.cl-badge.red { background: #fdecee; color: #e11d2a; }
.cl-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid #f2f3f5; }
.cl-row:first-of-type { border-top: 0; }
.cl-row .d { width: 34px; color: #9aa0a8; font-size: .7rem; font-weight: 700; text-transform: uppercase; }
.cl-row .t { flex: 1; font-weight: 600; }
.cl-row .t small { display: block; color: #9aa0a8; font-weight: 500; font-size: .72rem; }
.cl-ok { width: 18px; height: 18px; border-radius: 50%; background: #1f8f4e; flex: none; position: relative; }
.cl-ok::after { content: ""; position: absolute; left: 6px; top: 3.5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cl-row.hl { background: #e8f5ee; margin: 2px -8px; padding: 7px 8px; border-radius: 9px; border-top: 0; }
.cl-stars { color: #f59e0b; letter-spacing: 1px; font-size: .8rem; }
.cl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cl-chips span { font-size: .7rem; font-weight: 600; background: #f3f4f6; color: #374151; border-radius: 100px; padding: 3px 9px; }
.cl-map { position: relative; width: 100%; max-width: 400px; height: 210px; border-radius: 14px; overflow: hidden; background-color: #eef1f4; background-image: linear-gradient(90deg, transparent 46%, #fff 46%, #fff 50%, transparent 50%), linear-gradient(0deg, transparent 58%, #fff 58%, #fff 62%, transparent 62%), linear-gradient(90deg, transparent 15%, #fff 15%, #fff 17%, transparent 17%), linear-gradient(0deg, transparent 22%, #fff 22%, #fff 24%, transparent 24%); }
.cl-map .park { position: absolute; right: 18px; top: 16px; width: 80px; height: 52px; background: #d7efdc; border-radius: 10px; }
.cl-map .pin { position: absolute; left: 47%; top: 20px; width: 26px; height: 26px; background: #e11d2a; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 4px 10px rgba(225,29,42,.35); }
.cl-map .pin::after { content: ""; position: absolute; inset: 8px; background: #fff; border-radius: 50%; }
.cl-map .cl-ui { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: 82%; padding: 10px 12px; }
.cl-chat-q { margin-left: auto; width: fit-content; max-width: 85%; background: #111827; color: #fff; border-radius: 14px 14px 4px 14px; padding: 7px 11px; font-weight: 600; margin-bottom: 8px; }
.cl-chat-a { background: #f6f7f9; border-radius: 14px 14px 14px 4px; padding: 9px 11px; line-height: 1.45; }
.cl-chat-a b { background: #e8f5ee; color: #1f8f4e; border-radius: 4px; padding: 0 3px; }
.cl-quoteline { font-style: italic; color: #374151; margin: 4px 0 8px; }
.cl-reply { border-left: 3px solid #e11d2a; padding: 4px 0 4px 9px; color: #4b5563; font-size: .78rem; }

/* ---------- v3: who does what (replaces the old gap table) ---------- */
.cl-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
@media (max-width: 700px) { .cl-split { grid-template-columns: 1fr; } }
.cl-card { background: #fff; border: 1px solid var(--c-line); border-radius: 20px; box-shadow: var(--c-shadow); padding: 20px; }
.cl-card h3 { margin: 0 0 12px; font-size: 1.1rem; }
.cl-card h3 .r { color: var(--c-red); }
.cl-li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid #f2f3f5; }
.cl-li:first-of-type { border-top: 0; }
.cl-li .ck { width: 24px; height: 24px; border-radius: 50%; background: var(--c-red-soft); position: relative; }
.cl-li .ck::after { content: ""; position: absolute; left: 9px; top: 5px; width: 5px; height: 10px; border: solid var(--c-red); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cl-li p { margin: 0; font-size: .93rem !important; }
.cl-li p strong { display: block; margin-bottom: 2px; }
.cl-card.yours { background: #fafafa; box-shadow: none; }
.cl-card.yours .ck { background: #e5e7eb; }
.cl-card.yours .ck::after { border-color: #6b7280; }
.cl-card .btn { margin-top: 14px; }

/* name field on the gated clinic pages (same look as the email field) */
body[data-magnet^="clinic"] .gate-form input[name="fullname"] {
  flex: 1 1 100%; min-width: 0; font-family: var(--display); font-size: 1rem; font-weight: 500;
  color: var(--ink); background: var(--ground); border: 1px solid var(--line);
  border-radius: 100px; padding: 0.8rem 1.2rem;
}
body[data-magnet^="clinic"] .gate-form input[name="fullname"]::placeholder { color: #000; opacity: .55; }
/* ungated copies: no gate, guide shown straight away */
body[data-open="1"] .gate { display: none; }