/* Swiss / Chrome: a variant of swiss, after instalanding.ai's facetry-security-landing-page
   (MIT). Black glass and brushed chrome, monochrome: a black page under a fixed diagonal
   stripe field and a vignette, 32px cards lit from the top, and one metal gradient for
   primary buttons, pills, the brand mark, diamond bullets, the headline and big figures.
   The prism becomes steel. Inter Tight stays, as in swiss. Dark, where swiss is light: every
   colour swiss sets is re-pointed here. Loads after swiss.css and overrides it.
   Suits architects, security installers, premium builders, car detailers. */

:root[data-variant="swiss-chrome"] {
  color-scheme: dark;
  --reveal-y: 32px; --nav-lift: 0 1px 0 rgb(255 255 255 / 0.1), 0 14px 24px -14px #000;
  --bg: #000000;
  --bg-soft: #09090b;
  --surface: #09090b;
  --ink: #f4f4f5;
  --ink-2: #d4d4d8;
  --muted: #a1a1aa;
  --line: rgb(255 255 255 / 0.1);
  --line-soft: rgb(255 255 255 / 0.06);
  --accent: #e4e4e4;
  --metal: linear-gradient(180deg, #fbfbfb 0%, #e4e4e4 18%, #cccbcb 55%, #9e9d9d 100%);
  --prism: linear-gradient(90deg, #9e9d9d, #fbfbfb 35%, #cccbcb 65%, #9e9d9d);
  --prism-ring: conic-gradient(#fbfbfb, #55565a, #e4e4e4, #2a2b2e, #cccbcb, #7a7a7d, #fbfbfb);
  --primary: #e4e4e4;
  --primary-ink: #000000;
  --glass: rgb(0 0 0 / 0.72);
  --glass-border: rgb(255 255 255 / 0.1);

  --radius-sm: 14px;
  --radius: 24px;
  --radius-lg: 32px;
  --radius-pill: 999px;
  --card-border: 0 solid transparent;
  --card-bg: radial-gradient(120% 90% at 50% 0%, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.01) 55%, rgb(0 0 0 / 0.4)), #09090b;
  --card-lit: inset 0 1px 0 rgb(255 255 255 / 0.12), inset 0 0 0 1px rgb(255 255 255 / 0.06), 0 24px 48px -16px rgb(0 0 0 / 0.9);
  --card-lit-hover: inset 0 1px 0 rgb(255 255 255 / 0.26), inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 32px 56px -16px rgb(0 0 0 / 0.95);
  --shadow: var(--card-lit);

  --slab-bg: #09090b;
  --slab-ink: #f4f4f5;
  --footer-bg: #09090b;
  --footer-ink: #f4f4f5;

  /* placeholders: dark steel fills, no light panels */
  --ph-1: radial-gradient(circle at 50% 50%, transparent 0 38%, rgb(255 255 255 / 0.12) 38.4% 39%, transparent 39.4%), repeating-linear-gradient(135deg, #0e0f10 0 8px, #18191b 8px 16px);
  --ph-2: radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.22) 1.2px, transparent 1.6px) 0 0 / 16px 16px, #0c0c0d;
  --ph-3: radial-gradient(60% 60% at 62% 40%, #4a4b4e, #1c1d1f 70%, #0a0a0b);
  --ph-4: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.18) 0 1px, transparent 1px 22px), #101112;
  --ph-5: conic-gradient(from 210deg at 30% 70%, #18191b, #2c2d30, #101112, #3a3b3e, #18191b);
  --ph-6: linear-gradient(135deg, #000000 0 50%, #2a2b2e 50% 100%);

  & ::selection { background: #e4e4e4; color: #000; }
  & :focus-visible, & .pricing-slab :focus-visible, & .footer :focus-visible, & .plan.featured :focus-visible,
  & .service:hover :focus-visible { outline-color: #e4e4e4; }

  /* the page: a fixed stripe field under a vignette, behind everything, never moving */
  & body { background: var(--bg); }
  & body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(ellipse 80% 70% at 50% 35%, transparent 0%, rgb(0 0 0 / 0.55) 55%, #000 100%),
      repeating-linear-gradient(135deg, rgb(14 15 16 / 0.7) 0 10px, rgb(24 25 27 / 0.7) 10px 20px),
      #000;
  }
  & main > .section { border-top: 1px solid var(--line); }

  /* metal text: the headline and the big figures */
  & h1, & .sw-name, & .stat dd, & .plan-price .mono {
    background: var(--metal); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
  & h1 { padding-block: 0.06em; }
  & .plan-price .mono { padding-block: 0.04em; }
  & .stat dd { padding-block: 0.04em; }

  /* buttons: metal with dark ink, an inset top line and a soft glow; ghost is glass */
  & .btn { border-radius: var(--radius-pill); }
  & .btn::after { content: none; }
  & .btn-primary, & .plan:not(.featured) .btn-primary, & .footer .btn-primary {
    background: var(--metal); color: #000000; border-color: rgb(255 255 255 / 0.35);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 0 24px rgb(255 255 255 / 0.12);
  }
  & .btn-primary:hover, & .plan:not(.featured) .btn-primary:hover, & .footer .btn-primary:hover {
    background: var(--metal); color: #000000; filter: brightness(1.08);
    box-shadow: inset 0 1px 0 #fff, 0 0 32px rgb(255 255 255 / 0.2);
  }
  & .btn-ghost, & .plan:not(.featured) .btn-ghost {
    border-color: rgb(255 255 255 / 0.2); background: rgb(255 255 255 / 0.03); color: var(--ink);
  }
  & .btn-ghost:hover, & .plan:not(.featured) .btn-ghost:hover, & .service:hover .btn-ghost:hover {
    background: rgb(255 255 255 / 0.1); color: var(--ink); border-color: rgb(255 255 255 / 0.4);
  }
  & .pill {
    background: var(--metal); color: #000000; border-color: transparent;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.8);
  }
  & .chips .pill {
    background: rgb(255 255 255 / 0.04); color: var(--ink); border-color: rgb(255 255 255 / 0.14); box-shadow: none;
  }
  & .chips .pill:hover { background: var(--metal); color: #000000; border-color: transparent; }
  & .eyebrow { color: var(--ink-2); }

  /* nav: black glass */
  & .nav { background: rgb(0 0 0 / 0.72); border-bottom: 1px solid var(--line); }
  & .brand-mark {
    background: var(--metal); color: #000000; border-radius: 10px;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 0 16px rgb(255 255 255 / 0.1);
  }
  & .nav-menu summary { border-color: rgb(255 255 255 / 0.2); border-radius: 50%; }
  & .nav-menu ul { border: 0; border-radius: var(--radius); background: var(--card-bg); box-shadow: var(--card-lit); }
  & .nav-menu a { border-radius: var(--radius-sm); }
  & .nav-menu a:hover { background: rgb(255 255 255 / 0.1); color: var(--ink); }

  /* hero: the ring turns to steel; the name is metal */
  & .sw-grid { border-top-color: var(--line); }
  & .sw-glow { background: var(--prism-ring); opacity: 0.16; }
  & .sw-core {
    background: radial-gradient(circle at 35% 30%, #ffffff, #cccbcb 35%, #55565a 70%, #1c1d1f);
    box-shadow: inset -6px -8px 16px rgb(0 0 0 / 0.5), 0 0 40px rgb(255 255 255 / 0.12);
  }

  /* sections */
  & .highlights { background: transparent; color: var(--ink-2); border-block: 1px solid var(--line); }
  & .marquee-track { color: var(--ink-2); }
  & .marquee-track li::after, & .plan-features li::before {
    content: ""; flex: none; display: inline-block; width: 0.42em; height: 0.42em; border-radius: 1px;
    background: var(--metal); transform: rotate(45deg); opacity: 1; color: inherit;
  }
  & .plan-features li::before { width: 7px; height: 7px; margin-right: 14px; vertical-align: 0.12em; }

  & .group-title { border-top-color: var(--line); }
  & .services-grid { gap: 20px; border: 0; }
  & .card, & .service, & .plan, & .pricing-slab, & .nav-menu ul {
    background: var(--card-bg); box-shadow: var(--card-lit); border: 0; border-radius: var(--radius-lg);
  }
  & .service { min-height: 280px; transition: none; }
  & .index { color: var(--muted); }
  & .service-foot { border-top-color: var(--line); }
  & .ix, & .ix-list > li:last-child .ix { border-color: var(--line); }
  & .ix-meta { color: var(--ink-2); }
  & .mosaic .gallery-item { border-radius: var(--radius); }
  & .page-rail .visit-card { box-shadow: none; background: none; }
  & .nav-menu ul { border-radius: var(--radius); }
  & .pricing-slab { border-radius: var(--radius-lg); }
  & .plan { background: rgb(255 255 255 / 0.03); border-radius: var(--radius); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), inset 0 0 0 1px rgb(255 255 255 / 0.06); }
  & .plan.featured { background: var(--card-bg); color: var(--ink); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), inset 0 0 0 1px rgb(255 255 255 / 0.14), 0 0 40px rgb(255 255 255 / 0.06); }
  @media (hover: hover) {
    & .service:hover { background: var(--card-bg); color: var(--ink); transform: translateY(-4px); box-shadow: var(--card-lit-hover); }
    & .card:hover { transform: translateY(-4px); box-shadow: var(--card-lit-hover); }
    & .service:hover .service-desc, & .service:hover .index { color: var(--ink-2); }
    & .service:hover .pill { background: var(--metal); color: #000000; border-color: transparent; }
    & .service:hover .service-foot { border-top-color: var(--line); }
  }
  /* big forms and the visit card are panels, not hover targets */
  @media (hover: hover) {
    & .form:hover, & .visit-card:hover { transform: none; box-shadow: var(--card-lit); }
  }

  & .about-media, & .gallery-item, & .hero-media { border: 0; border-radius: var(--radius-lg); box-shadow: var(--card-lit); }
  & .ph-label { border-radius: var(--radius-pill); background: rgb(0 0 0 / 0.72); color: var(--ink-2); }
  & .stat { border-top-color: var(--line); }
  & .stars { color: #e4e4e4; }

  & .plan:not(.featured) .plan-features li::before { color: inherit; }
  & .faq-item, & .faq-item:first-child { border-color: var(--line); }
  & .hours th, & .hours td { border-bottom-color: var(--line); }
  & .map { border: 0; border-radius: var(--radius-lg); box-shadow: var(--card-lit); background: var(--bg-soft); }
  & .map iframe { filter: grayscale(1) invert(1) contrast(0.85) brightness(0.85); }

  /* forms: dark glass fields with a hairline */
  & .field input, & .field textarea {
    background: rgb(255 255 255 / 0.04); color: var(--ink); caret-color: #e4e4e4;
    border: 1px solid rgb(255 255 255 / 0.14); border-radius: var(--radius-sm); padding-inline: 14px;
  }
  & .field input::placeholder, & .field textarea::placeholder { color: var(--muted); opacity: 1; }
  & .field input:focus, & .field textarea:focus { outline: 2px solid #e4e4e4; outline-offset: 2px; border-bottom-width: 1px; background: rgb(255 255 255 / 0.07); }
  & .form .sent { border-color: rgb(255 255 255 / 0.3); }

  /* footer: black glass block under a lit top edge, a metal wordmark */
  & .footer {
    background: radial-gradient(120% 90% at 50% 0%, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.01) 55%, rgb(0 0 0 / 0.4)), #09090b;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14);
  }
  & .footer-base { border-top-color: var(--line); }
  & .wordmark { background: var(--metal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

  & .callbar { background: rgb(0 0 0 / 0.85); border-top: 1px solid var(--line); }

  /* ---------- layouts: gauges, spotlight (borrowed), ladder (new) ---------- */
  /* highlights "gauges": readouts as glass cards, each lit by a small steel lamp */
  & .highlights-gauges { padding-block: 28px; }
  & .gauges li { background: var(--card-bg); border: 0; border-radius: var(--radius); box-shadow: var(--card-lit); }
  & .gauge-lamp { background: var(--metal); box-shadow: 0 0 14px rgb(255 255 255 / 0.55), inset 0 1px 0 #fff; }
  & .gauge-n { color: var(--muted); font-weight: 600; letter-spacing: 0.06em; }
  & .gauge-text { color: var(--ink); font-weight: 600; letter-spacing: -0.015em; }

  /* reviews "spotlight": the lit review is a raised glass card with a bright top edge, the rest recede */
  & .spot { border: 0; border-radius: var(--radius-lg); background: rgb(255 255 255 / 0.02); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06); }
  & .spot.on { background: var(--card-bg); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), inset 0 0 0 1px rgb(255 255 255 / 0.12), 0 0 48px rgb(255 255 255 / 0.06); }
  & .spotlight-live .spot:not(.on) { opacity: 0.45; }
  & .spot blockquote p { color: var(--ink); font-weight: 500; letter-spacing: -0.015em; }
  & .spot-count { color: var(--ink-2); font-weight: 600; letter-spacing: 0.08em; }
  & .carousel-btn { border-color: rgb(255 255 255 / 0.2); background: rgb(255 255 255 / 0.03); color: var(--ink); }
  & .carousel-btn:hover:not(:disabled) { border-color: rgb(255 255 255 / 0.5); background: rgb(255 255 255 / 0.1); color: var(--ink); }

  /* pricing "ladder": rows of black glass on hairlines, the price in metal and climbing; the featured
     rung is a raised, lit slab with a metal bar at its start */
  & .ladder { border-bottom-color: var(--line); }
  & .rung { border-top-color: var(--line); }
  & .rung-name { text-transform: uppercase; letter-spacing: -0.03em; font-weight: 800; }
  & .rung-amount {
    padding-block: 0.04em; background: var(--metal); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent; letter-spacing: -0.05em;
  }
  & .rung-period { color: var(--muted); }
  & .rung-includes { color: var(--ink-2); }
  & .rung-includes li::before {
    content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 12px; vertical-align: 0.1em;
    border-radius: 1px; background: var(--metal); transform: rotate(45deg);
  }
  & .rung.featured {
    background: var(--card-bg); border-radius: var(--radius); border-top-color: transparent;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), inset 0 0 0 1px rgb(255 255 255 / 0.12), 0 0 48px rgb(255 255 255 / 0.07);
  }
  & .rung.featured::before {
    content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; border-radius: 0 3px 3px 0; background: var(--metal);
  }
  & .rung.featured { position: relative; }
  & .rung.featured + .rung { border-top-color: transparent; }
  @media (hover: hover) {
    & .rung:not(.featured):hover { background: rgb(255 255 255 / 0.03); }
  }

  /* ---------- motion ---------- */
  @media (prefers-reduced-motion: no-preference) {
    &:not([data-motion="none"]) {
      & .rung { transition: background-color 0.4s var(--ease); }
      & .card, & .service, & .plan { transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
      & .btn-primary { transition: filter 0.3s var(--ease), box-shadow 0.3s var(--ease); }
    }
  }
}