/* ============ Sector pages: clinics, law firms, factories ============ */
.sx-visual { position: relative; display: grid; justify-items: center; width: min(420px, 100%); padding: 10px 0 30px; }

/* the phone */
.phone { width: 270px; padding: 10px; border-radius: 40px; background: var(--ink); box-shadow: 0 50px 80px -46px rgba(27, 26, 23, .8); }
.ph-screen { position: relative; height: 520px; padding: 20px 18px; border-radius: 31px; background: #fffdf7; overflow: hidden; display: grid; align-content: start; gap: 12px; }
.ph-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.ph-top b { font: 700 1.15rem var(--display); }
.ph-top i { width: 20px; height: 10px; border-block: 2px solid var(--ink); }
.ph-k { font-size: .72rem; color: var(--muted); font-weight: 600; }
.ph-h { font: 700 1.45rem/1.3 var(--display); margin-top: -8px; }
.ph-chips { display: flex; gap: 6px; }
.ph-chips span { padding: 3px 10px; border-radius: 99px; border: 1px solid var(--line); font-size: .72rem; font-weight: 600; }
.ph-chips span:first-child { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ph-card { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: var(--paper); }
.ph-av { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--sand); }
.ph-card b { display: block; font-size: .85rem; }
.ph-card small { font-size: .68rem; color: var(--muted); }
.ph-lines { display: grid; gap: 7px; }
.ph-lines i { display: block; height: 6px; border-radius: 3px; background: rgba(27, 26, 23, .08); }
.ph-lines i:nth-child(2) { width: 80%; } .ph-lines i:nth-child(3) { width: 60%; }
.ph-btn { position: relative; display: grid; place-items: center; height: 42px; border-radius: 99px; background: var(--ochre); color: #fff; font-weight: 700; font-size: .88rem; overflow: hidden; }
.ph-btn::after { content: ""; position: absolute; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .5); transform: scale(0); opacity: 0; }
.ph-btn.tap::after { animation: tap .6s ease-out; }
@keyframes tap { from { transform: scale(0); opacity: 1; } to { transform: scale(6); opacity: 0; } }
.ph-wa { justify-self: start; max-width: 85%; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: #dcf3d6; font-size: .78rem; font-weight: 600; }

.ph-form { display: grid; gap: 9px; padding: 14px; border-radius: 16px; background: var(--paper); }
.ph-fh { display: flex; align-items: center; gap: 8px; font-size: .85rem; }
.lock { width: 22px; height: 22px; fill: none; stroke: var(--ochre); stroke-width: 2.2; stroke-linecap: round; }
.ph-in { display: block; min-height: 34px; padding: 7px 10px; border-radius: 9px; background: #fffdf7; border: 1px solid var(--line); font-size: .75rem; font-weight: 600; }

.ph-prod { display: grid; place-items: center; height: 96px; border-radius: 14px; background: var(--paper-2); }
.ph-prod svg { width: 140px; fill: none; stroke: var(--ink); stroke-width: 2; }
.ph-spec { display: grid; border-top: 1px solid var(--line); }
.ph-spec div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .76rem; }
.ph-spec dt { color: var(--muted); }
.ph-spec dd { margin: 0; font-weight: 700; }
.ph-qty { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--paper); font-size: .8rem; }
.ph-qty b { font-size: .95rem; }
.ph-qty em { font-style: normal; font: 700 1.1rem var(--display); color: var(--ochre); }

.ph-toast { position: absolute; left: -4%; bottom: 70px; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 16px; background: var(--card); box-shadow: 0 24px 40px -20px rgba(27, 26, 23, .55), 0 0 0 1px var(--line); }
.pt-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--ink); }
.pt-ic .ic { width: 24px; height: 24px; stroke: var(--paper); stroke-width: 2.6; }
.pt-ic .ic .d, .pt-ic .ic .f { fill: var(--paper); }
.ph-toast b { display: block; font-size: .85rem; }
.ph-toast small { font-size: .72rem; color: var(--muted); }

/* questions mapped to the pages that answer them */
.sx-q { padding: var(--sec) 0; border-top: 1px solid var(--line); overflow: clip; }
.sx-intro { margin-top: 18px; max-width: 60ch; }
.qmap { display: grid; gap: 0; margin-top: clamp(40px, 6vw, 60px); border-top: 1px solid var(--line); }
.qmap li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(60px, .6fr) auto; align-items: center; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.qm-q { font: 700 clamp(1.35rem, 2.4vw, 1.9rem)/1.4 var(--display); }
.qm-line { width: 100%; height: 10px; overflow: visible; }
.qm-line line { stroke: var(--ochre); stroke-width: 2; vector-effect: non-scaling-stroke; }
.qm-a { padding: 9px 18px; border-radius: 99px; background: var(--ink); color: var(--paper); font-weight: 700; font-size: .95rem; white-space: nowrap; }

/* components */
.sx-parts { padding: var(--sec) 0; background: var(--paper-2); border-block: 1px solid var(--line); overflow: clip; }
.parts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: clamp(40px, 6vw, 60px); }
.parts li { display: grid; align-content: start; gap: 14px; padding: 24px 22px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.pt-n { font: 700 2rem/1 var(--display); color: var(--ochre); }
.parts p { font-weight: 600; line-height: 1.75; }

/* clinic example: one centre, five clinics */
.sx-case { padding: var(--sec) 0; overflow: clip; }
.hub { --r: 162px; position: relative; width: min(420px, 100%); aspect-ratio: 1; margin: 30px auto 40px; }
.hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.hub-lines line { stroke: var(--sand); stroke-width: 1.2; }
.hub-c, .hub-n { position: absolute; z-index: 1; left: 50%; top: 50%; display: grid; place-items: center; text-align: center; border-radius: 50%; font-weight: 700; }
.hub-c { width: 110px; height: 110px; margin: -55px 0 0 -55px; background: var(--ink); color: var(--paper); font: 700 1.3rem var(--display); }
.hub-n { width: 96px; height: 96px; margin: -48px 0 0 -48px; padding: 8px; background: var(--card); border: 1.5px solid var(--ink); font-size: .85rem; line-height: 1.4; transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1)); }
.case-list { max-width: 640px; margin: 0 auto 26px; }
.sx-case .note { max-width: 640px; margin-inline: auto; }
.sx-case .note a { color: var(--ink); font-weight: 700; }

/* prep checklist */
.sx-prep { padding: var(--sec) 0; overflow: clip; }
.prep-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 6vw, 90px); align-items: start; }
.prep-grid .body-lg { margin-top: 18px; }
.prep { padding: clamp(24px, 3vw, 36px); border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.prep-count { font-weight: 700; color: var(--muted); }
.prep-count b { font: 700 1.6rem var(--display); color: var(--ochre); }
.prep-bar { height: 6px; margin: 12px 0 18px; border-radius: 3px; background: var(--paper-2); overflow: hidden; }
.prep-bar i { display: block; height: 100%; background: var(--ochre); transform-origin: right; transform: scaleX(0); }
.prep li + li { border-top: 1px solid var(--line); }
.prep label { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; padding: 14px 0; cursor: pointer; font-weight: 600; }
.prep input { position: absolute; opacity: 0; pointer-events: none; }
.box { display: grid; place-items: center; width: 26px; height: 26px; margin-top: 1px; border-radius: 8px; border: 1.5px solid rgba(27, 26, 23, .3); transition: background-color .25s, border-color .25s; }
.box .tick { width: 18px; height: 18px; stroke: #fff; stroke-width: 4; }
.prep input:checked + .box { background: var(--ink); border-color: var(--ink); }
.prep input:focus-visible + .box { outline: 2px solid var(--ochre); outline-offset: 2px; }
.prep input:checked ~ span:last-child { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--ochre); }

/* price */
.sx-price { padding: var(--sec) 0; background: var(--paper-2); border-block: 1px solid var(--line); overflow: clip; }
.price-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 6vw, 90px); align-items: center; }
.pb-from { font-weight: 600; color: var(--muted); }
.pb-n { font: 700 clamp(4.5rem, 10vw, 8rem)/1.1 var(--display); color: var(--ochre); }
.pb-n small { display: block; font: 600 1rem var(--text); color: var(--muted); }
.sx-price .incl { gap: 0; border-top: 1px solid var(--line); margin-bottom: 18px; }
.sx-price .incl li { padding: 14px 0; border-bottom: 1px solid var(--line); font-weight: 600; }
.sx-price .note { margin-bottom: 20px; border: 0; padding: 0; }

.hsteps.h4 ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sx-read { margin-top: 18px; color: var(--muted); }
.sx-read a { color: var(--ink); font-weight: 700; }

@media (max-width: 900px) {
	.phone { width: 240px; }
	.ph-screen { height: 520px; gap: 10px; padding: 18px 16px; }
	.ph-toast { left: 0; bottom: 40px; }
	.qmap li { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.qm-line { display: none; }
	.qm-a { justify-self: start; white-space: normal; }
	.parts { grid-template-columns: minmax(0, 1fr); }
	.parts li { grid-template-columns: 36px 1fr; padding: 18px; }
	.prep-grid, .price-grid { grid-template-columns: minmax(0, 1fr); }
	.hsteps.h4 ol { grid-template-columns: minmax(0, 1fr); }
	.hub-n { width: 78px; height: 78px; margin: -39px 0 0 -39px; font-size: .72rem; }
	.hub { --r: 128px; }
	.hub-c { width: 86px; height: 86px; margin: -43px 0 0 -43px; font-size: 1.05rem; }
}