/* Clinical / SmartCare: a variant of clinical, after instalanding.ai's
   smartcare-clinical-ai-landing-page (MIT; visual language only). A dark page throughout,
   lit by one light: the sweep from cyan through blue and violet to magenta. Buttons are
   the page's power switch, resized: an indigo pill sunk into the board when idle, lit white
   at the rim with a cyan glow inside and a violet bloom outside when hovered, focused or the
   main call to action. Cards wear the pill's edge and catch the sweep along their top
   hairline on hover. Inter Tight throughout (no mono face is loaded, so labels are Inter
   Tight caps). Loads after clinical.css and re-points its colour tokens. Suits clinics,
   labs and health-tech practices that want a night-time look. */

:root[data-variant="clinical-smartcare"] {
  /* the one light, named once */
  --sweep: linear-gradient(90deg, #97f3ff, #3d6cff, #7a3bff, #ff3b7f);
  /* the same sweep, lightened so small text on the board clears 4.5:1 */
  --sweep-text: linear-gradient(90deg, #97f3ff, #86a3ff, #b79bff, #ff7aa6);
  --cyan: #97f3ff;
  --blue: #3d6cff;
  --violet: #7a3bff;
  --magenta: #ff3b7f;
  --lit-inner: inset 0 0 1px #97f3ff, inset 0 0 2px #97f3ff, inset 0 0 10px rgb(151 243 255 / 0.75);
  --lit-rim: 0 0 0 1.5px rgb(255 255 255 / 0.92);
  --lit-bloom: 0 0 40px rgb(151 243 255 / 0.2), 0 0 100px rgb(122 59 255 / 0.32), 0 0 56px rgb(255 59 127 / 0.14);
  --pill-edge: inset 0 1px 0 rgb(255 255 255 / 0.07), inset 0 -1px 0 rgb(0 0 0 / 0.5);
  --deep: 0 24px 48px -24px rgb(0 0 0 / 0.85);

  /* the board */
  --p-bg: #05070e;
  --p-bg-soft: #0e1343;
  --p-surface: #0b1030;
  --p-ink: #eef1ff;
  --p-ink-2: #c4c9ee;
  --p-muted: #8789a1;
  --p-line: rgb(124 146 255 / 0.14);
  --p-line-strong: rgb(124 146 255 / 0.26);
  --p-accent: #97f3ff;
  --p-glass: rgb(5 7 14 / 0.62);
  --p-wipe: #181f77;
  --p-wipe-ink: #ffffff;
  /* the alternate bands: the board a shade lighter */
  --i-bg: #070a1a;
  --i-bg-soft: #0e1343;
  --i-surface: #0b1030;
  --i-ink: #eef1ff;
  --i-ink-2: #c4c9ee;
  --i-muted: #8789a1;
  --i-line: rgb(124 146 255 / 0.14);
  --i-line-strong: rgb(124 146 255 / 0.26);
  --i-accent: #97f3ff;
  --i-glass: rgb(5 7 14 / 0.62);
  --i-wipe: #181f77;
  --i-wipe-ink: #ffffff;

  --cobalt: #3a63f5;
  --live: #97f3ff;
  --grain: none;
  --scan: none;

  --font-display: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display-weight: 600;
  --display-tracking: -0.03em;
  --display-leading: 1;

  --radius: 24px;
  --radius-lg: 24px;
  --ph-1: linear-gradient(135deg, #0e1343, #151a5c);
  --ph-2: linear-gradient(135deg, #13164f, #2a1a66);
  --ph-3: linear-gradient(135deg, #0b1b3f, #123a66);
  --ph-4: linear-gradient(135deg, #18124a, #3a1a6a);
  --ph-5: linear-gradient(135deg, #0c2145, #1a3b7a);
  --ph-6: linear-gradient(135deg, #1a1244, #4a1a5e);

  & body { font-feature-settings: "tnum" 0; letter-spacing: -0.01em; }
  & ::selection { background: var(--violet); color: #ffffff; }

  /* ---------- type ---------- */
  & h2, & h3, & h4 { font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; }
  & h2 { font-size: clamp(32px, 4.6vw, 64px); }
  & .cl-hero h1 { font-weight: 700; text-transform: uppercase; font-size: clamp(34px, 7.4vw, 108px); letter-spacing: -0.035em; line-height: 0.96; max-width: 16ch; }
  & .lead { font-weight: 400; letter-spacing: -0.01em; }
  & mark {
    font: inherit; background: var(--sweep); color: transparent;
    -webkit-background-clip: text; background-clip: text; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
  & :is(.eyebrow, .pill, .index, .stat dt, .field label, .hours caption, .footer-title, .review-source, .book-day-name, .book-range, .cl-spread, .cl-address, .group-title, .nav-links a, .nav-phone) {
    font-family: var(--font-body); font-weight: 600; letter-spacing: 0.1em;
  }
  & .eyebrow::before { background: var(--sweep); box-shadow: 0 0 10px rgb(61 108 255 / 0.7); }
  & .index { background: var(--sweep-text); color: transparent; -webkit-background-clip: text; background-clip: text; width: fit-content; font-weight: 700; }
  & .service .index { justify-self: start; }
  & .marquee-track { font-family: var(--font-body); font-weight: 600; }
  & .marquee-track li::after { content: "\2726"; color: var(--magenta); }
  & .service-name { font-weight: 500; }
  & .service .price, & .stat dd, & .plan-price .mono { font-family: var(--font-body); font-feature-settings: "tnum"; }
  & .stat dd, & .plan-price .mono, & .footer-name { font-weight: 600; }
  & .plan-period, & .book-time, & .book-day-num, & .hours td { font-family: var(--font-body); }
  & .review blockquote p, & .faq-item summary { font-weight: 400; }
  & .faq-item summary { font-weight: 500; }
  & .pill { background: #0e1343; border-color: var(--line-strong); color: var(--ink-2); }
  & .service .pill { background: none; border: 0; color: var(--muted); }

  /* ---------- hero light: three blurred glows under an ellipse mask ---------- */
  & .cl-light {
    display: block; position: absolute; inset: -6% -8% 24% -8%; z-index: 0; pointer-events: none; opacity: 0.8;
    -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 42%, #000 20%, transparent 74%);
    mask-image: radial-gradient(ellipse 62% 58% at 50% 42%, #000 20%, transparent 74%);
  }
  & .cl-light i { position: absolute; display: block; border-radius: 50%; filter: blur(46px); }
  & .cl-light i:nth-child(1) { left: 8%; top: 26%; width: 44%; height: 62%; background: radial-gradient(closest-side, rgb(151 243 255 / 0.5), transparent); }
  & .cl-light i:nth-child(2) { left: 30%; top: 4%; width: 48%; height: 70%; background: radial-gradient(closest-side, rgb(61 108 255 / 0.65), transparent); }
  & .cl-light i:nth-child(3) { right: 4%; top: 20%; width: 42%; height: 66%; background: radial-gradient(closest-side, rgb(122 59 255 / 0.6), rgb(255 59 127 / 0.22) 60%, transparent); }
  & .cl-hero > :not(.cl-light) { position: relative; z-index: 1; }
  & .cl-ecg { filter: none; }
  & .cl-ecg-head { filter: drop-shadow(0 0 7px rgb(151 243 255 / 0.9)); }

  /* ---------- nav ---------- */
  & .nav { border-bottom-color: var(--line); }
  & .brand-mark { background: var(--sweep); color: #05070e; font-weight: 700; }
  & .nav-links a { padding: 8px 12px; border-radius: 999px; text-transform: uppercase; font-size: 11px; }
  & .nav-links a:hover { background: #181f77; color: #ffffff; }
  & .nav-links ul { gap: 6px; }
  & .nav-menu summary { background: #0e1343; border-color: var(--line-strong); }
  & .nav-menu ul { background: #0b1030; }

  /* ---------- buttons: the lit switch ---------- */
  & .btn {
    height: 48px; font: 600 14px/1 var(--font-body); letter-spacing: 0;
    background: #0e1343; color: #8789a1; border: 0;
    box-shadow: 0 0 3px rgb(2 2 2) inset, 0 0 0 1px rgb(124 146 255 / 0.26);
    transition: color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
  }
  & .btn::before { display: none; }
  & :is(.btn-primary, .btn:is(:hover, :focus-visible)):not(:disabled) {
    background: #181f77; color: #ffffff; border: 0;
    box-shadow: var(--lit-rim), var(--lit-inner), var(--lit-bloom);
  }
  & .btn-primary:disabled { background: #181f77; color: #ffffff; box-shadow: var(--lit-rim), var(--lit-inner); }
  /* no bloom on anything inside a backdrop-filter surface: its layer clips it */
  & :is(.nav, .callbar) :is(.btn-primary, .btn:is(:hover, :focus-visible)):not(:disabled) { box-shadow: var(--lit-rim), var(--lit-inner); }
  & .btn-primary:is(:hover, :focus-visible):not(:disabled), & .btn-ghost:is(:hover, :focus-visible):not(:disabled) { color: #ffffff; border: 0; }

  /* ---------- cards: the pill's edge, and the sweep along the top on hover ---------- */
  & :is(.card:not(.service), .plan, .pricing-slab) {
    position: relative; border-radius: 24px; background: var(--surface); border: 1px solid var(--line);
    box-shadow: var(--pill-edge), var(--deep);
  }
  & :is(.card:not(.service), .plan)::before {
    content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 1px; border-radius: 1px;
    background: var(--sweep); opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
  }
  & :is(.card:not(.service), .plan):is(:hover, :focus-within)::before { opacity: 1; }
  & :is(.case figure, .master-item) { border-radius: 24px; background: var(--surface); box-shadow: var(--pill-edge), var(--deep); }
  & .master-tab { border-radius: 14px; }
  & .master-tab[aria-selected="true"] { background: #181f77; color: #ffffff; box-shadow: var(--lit-inner); }
  & .master-tab[aria-selected="true"] .master-n { color: var(--cyan); }
  & .master-q { font-weight: 600; letter-spacing: -0.035em; }
  & .fig-n { font-weight: 600; background: var(--sweep-text); color: transparent; -webkit-background-clip: text; background-clip: text; width: fit-content; max-width: 100%; }
  & .fig-l { font: 600 12px/1.4 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
  & .case blockquote p { font-weight: 400; }
  & .pricing-slab { background: #070a1a; }
  & .plan { background: #0b1030; border-color: var(--line); }
  & .plan.featured { background: #0e1343; border-color: var(--line-strong); color: var(--ink); }
  & .plan.featured::before { opacity: 1; }
  & .plan-flag { background: var(--sweep); color: #05070e; border-color: transparent; font-weight: 700; }
  & .about-media, & .gallery-item, & .hero-media, & .map { border-radius: 24px; }
  & .map { box-shadow: var(--pill-edge); }
  & .map iframe { filter: invert(0.92) hue-rotate(180deg) grayscale(0.6) contrast(0.9); }
  & .cl-photo { border-radius: 24px; }
  & .stars { color: var(--cyan); }

  /* ---------- forms and booking ---------- */
  & .field input, & .field textarea { background: #05070e; border-radius: 14px; box-shadow: 0 0 3px rgb(2 2 2) inset; }
  & .field input:focus, & .field textarea:focus { box-shadow: 0 0 3px rgb(2 2 2) inset, 0 0 12px rgb(151 243 255 / 0.25); }
  & .book-option, & .book-time, & .book-day { background: #0e1343; border-radius: 14px; box-shadow: 0 0 3px rgb(2 2 2) inset; }
  & .book-option:has(input:checked), & .book-time:has(input:checked), & .book-day[aria-pressed="true"] {
    background: #181f77; border-color: #ffffff; color: #ffffff;
    box-shadow: var(--lit-inner);
  }
  & .book-option:has(input:checked) .book-option-meta { color: #dfe4ff; opacity: 1; }
  & .book-time { font-size: 14px; }
  & .faq-item[open] summary::after { background: #181f77; border-color: #ffffff; box-shadow: var(--lit-inner); }
  & .faq-item summary::after { background: #0e1343; }

  /* ---------- footer ---------- */
  & .footer { border-top: 1px solid transparent; border-image: var(--sweep) 1; background: var(--bg); }
  & .footer-title { color: var(--muted); }

  /* ---------- layouts: gauges and mosaic (borrowed), finder (new) ---------- */
  /* highlights "gauges": readouts as pill-edged panels, each with a lamp lit along the sweep */
  & .highlights-gauges { padding-block: 32px; }
  & .gauges li {
    background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--pill-edge), var(--deep);
    padding: 18px 22px; min-height: 104px;
  }
  & .gauge-lamp { background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
  & .gauges li:nth-child(3n + 2) .gauge-lamp { background: var(--blue); box-shadow: 0 0 12px var(--blue); }
  & .gauges li:nth-child(3n) .gauge-lamp { background: var(--magenta); box-shadow: 0 0 12px var(--magenta); }
  & .gauge-n { font-family: var(--font-body); font-weight: 700; background: var(--sweep-text); color: transparent; -webkit-background-clip: text; background-clip: text; }
  & .gauge-text { font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }

  /* gallery "mosaic": rounded panes with the pill's edge; the rim lights on hover */
  & .mosaic { gap: 14px; }
  & .mosaic .gallery-item { border: 1px solid var(--line); box-shadow: var(--pill-edge), var(--deep); transition: box-shadow 0.3s ease; }
  & .mosaic > li:hover .gallery-item { box-shadow: var(--lit-rim), var(--lit-inner); }

  /* services "finder": the filter field is the idle pill, the chips the switches; rows are hairlines
     that catch the sweep when hovered or focused */
  & .finder-label, & .finder-count { font: 600 11.5px/1.3 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
  & .finder-input {
    min-height: 52px; padding-inline: 22px; color: var(--ink); background: #05070e; border: 0; border-radius: 999px;
    box-shadow: 0 0 3px rgb(2 2 2) inset, 0 0 0 1px var(--line-strong);
  }
  & .finder-input:focus-visible { outline: 0; box-shadow: 0 0 3px rgb(2 2 2) inset, var(--lit-rim), 0 0 18px rgb(151 243 255 / 0.28); }
  & .finder-chips { gap: 10px; }
  & .finder-chip {
    min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; color: #c4c9ee; background: #0e1343;
    font: 600 14px/1 var(--font-body); box-shadow: 0 0 3px rgb(2 2 2) inset, 0 0 0 1px rgb(124 146 255 / 0.26);
    transition: color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
  }
  & .finder-chip:is(:hover, :focus-visible), & .finder-chip[aria-pressed="true"] {
    color: #ffffff; background: #181f77; box-shadow: var(--lit-rim), var(--lit-inner);
  }
  & .finder-chip:focus-visible { outline: 0; box-shadow: var(--lit-rim), var(--lit-inner), 0 0 0 4px rgb(151 243 255 / 0.4); }
  & .finder-items { border-top-color: var(--line-strong); }
  & .finder-item { position: relative; border-bottom-color: var(--line); transition: background-color 0.3s ease; }
  & .finder-item::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--sweep);
    opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
  }
  & .finder-item:is(:hover, :focus-within) { background: linear-gradient(90deg, rgb(61 108 255 / 0.1), transparent 70%); }
  & .finder-item:is(:hover, :focus-within)::after { opacity: 1; }
  & .finder-name { font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; }
  & .finder-price {
    font-family: var(--font-body); font-feature-settings: "tnum"; font-weight: 600; letter-spacing: -0.02em;
    background: var(--sweep-text); color: transparent; -webkit-background-clip: text; background-clip: text;
  }
  & .finder-time { font: 600 11.5px/1.3 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
  & .finder-desc { color: var(--ink-2); }
  & .finder-empty { color: var(--ink-2); }

  @media (prefers-reduced-motion: reduce) {
    & .btn, & :is(.card, .plan)::before, & .finder-chip, & .finder-item, & .finder-item::after, & .mosaic .gallery-item { transition: none; }
  }
  &[data-motion="none"] :is(.btn, .card::before, .plan::before, .finder-chip, .finder-item, .finder-item::after, .mosaic .gallery-item) { transition: none; }
}