/* =========================================================================
   Shield X: site stylesheet
   Plain CSS, no framework. One file for every page.

   1. Fonts
   2. Design tokens
   3. Base
   4. Layout and type helpers
   5. Components
      5.1  Utility bar and site header     5.12 Spec table
      5.2  Logo                            5.13 Installation grid
      5.3  Site footer                     5.14 Call-to-action band
      5.4  Icons and buttons               5.15 Media coverage
      5.5  Section                         5.16 Timeline
      5.6  Page header and breadcrumbs     5.17 Roles table
      5.7  Home hero                       5.18 FAQ
      5.8  Product showcase                5.19 Review note
      5.9  Fact strip                      5.20 Forms
      5.10 Process steps
      5.11 Feature grid
   6. Pages
   7. Enhancements (header elevation, smooth scroll, reveal, lightbox)
   8. Reduced motion and print

   Palette: off-white, white, charcoal, deep green. Brand green (#3a9837,
   sampled from the logo) is used for rules, markers and large graphics only;
   it does not meet 4.5:1 for body text on white, so text and buttons use
   --c-green-dark instead.
   ========================================================================= */


/* =========================================================================
   1. Fonts: self-hosted Archivo (variable) and IBM Plex Mono, latin and
      latin-ext subsets (latin-ext carries the rupee sign).
   ========================================================================= */

/* Archivo is trimmed to the ranges this stylesheet uses (weight 400-700, width 85-100%):
   49 KB instead of 90 KB. The rupee sign comes from a 1 KB file of its own. */
@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  font-stretch: 85% 100%;
  src: url('../fonts/archivo-rupee.woff2') format('woff2-variations');
  unicode-range: U+20B9;
}

@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  font-stretch: 85% 100%;
  src: url('../fonts/archivo-latin-v2.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../fonts/ibm-plex-mono-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('../fonts/ibm-plex-mono-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* =========================================================================
   2. Design tokens
   ========================================================================= */

:root {
  --c-ink: #141916;
  --c-ink-soft: #262d29;
  --c-text: #1d2420;
  --c-muted: #535d57;
  --c-line: #dadfd8;
  --c-line-strong: #b7bfb6;
  --c-paper: #f4f4ef;
  --c-paper-2: #ecede6;
  --c-white: #ffffff;
  --c-green: #3a9837;
  --c-green-dark: #1d5c2a;
  --c-green-darker: #164a21;
  --c-green-deep: #0f2a1b;
  --c-green-tint: #e6efe2;
  --c-green-on-dark: #9fd49a;
  --c-on-dark: #e9eee9;
  --c-on-dark-muted: #a9b6ad;
  --c-line-dark: #2f4337;
  --c-review: #8a5a00;
  --c-review-bg: #fff6e0;
  --c-review-line: #c99a2e;
  --c-review-text: #3d2c05;
  --c-error: #a3261b;
  --c-error-bg: #fbeceb;
  --c-success-bg: #e6efe2;

  --font-sans: 'Archivo Variable', 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-h1: clamp(2.125rem, 1.55rem + 2.3vw, 3.375rem);
  --fs-h1-page: clamp(2rem, 1.6rem + 1.6vw, 2.875rem);
  --fs-h2: clamp(1.625rem, 1.35rem + 1.1vw, 2.25rem);
  --fs-h3: 1.1875rem;
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);

  --container: 1240px;
  --gutter: clamp(1.25rem, 0.8rem + 1.8vw, 2rem);
  --section-y: clamp(3.5rem, 2.6rem + 3.6vw, 6.5rem);
  --radius: 3px;
  --radius-lg: 4px;
  --header-h: 72px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Outline helmet shown in photo tiles while a photo is missing or fails to load */
  --photo-placeholder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7bfb6' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14.5a8 8 0 0 1 16 0V17H11.5L10 14.5H4Z'/%3E%3Cpath d='M4 14.5V17h3.5'/%3E%3Cpath d='M13 10.5h6.3'/%3E%3C/svg%3E");
}


/* =========================================================================
   3. Base
   ========================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-white);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

main:focus {
  outline: none;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

/* The hidden attribute always wins over component display rules (img is display:block above). */
[hidden] {
  display: none !important;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--c-ink);
  font-weight: 650;
  font-stretch: 88%;
  line-height: 1.12;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  font-weight: 680;
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
  line-height: 1.3;
  font-stretch: 94%;
}

p {
  margin: 0;
  text-wrap: pretty;
}

p + p {
  margin-top: 1em;
}

a {
  color: var(--c-green-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--c-green-darker);
}

:focus-visible {
  outline: 3px solid var(--c-green);
  outline-offset: 2px;
  border-radius: 2px;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  width: 100%;
}

hr {
  border: 0;
  border-top: 1px solid var(--c-line);
  margin: 2rem 0;
}

::selection {
  background: var(--c-green-tint);
  color: var(--c-ink);
}


/* =========================================================================
   4. Layout and type helpers
   ========================================================================= */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: 880px;
}

.stack > * + * {
  margin-top: var(--stack, 1rem);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100;
  background: var(--c-ink);
  color: var(--c-white);
  padding: 0.75rem 1rem;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: 1rem;
  color: var(--c-white);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-green-dark);
}

.eyebrow::before {
  content: '';
  width: 18px;
  height: 2px;
  background: var(--c-green);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--c-muted);
  max-width: 62ch;
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.875em;
  letter-spacing: 0.01em;
}

.muted {
  color: var(--c-muted);
}

/* Long-form text (policies, Sterila X protocol) */
.prose {
  max-width: 72ch;
}

.prose h2 {
  font-size: 1.5rem;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}

.prose h3 {
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

.prose ul,
.prose ol {
  padding-left: 1.25rem;
  margin-top: 0.75rem;
}

.prose li + li {
  margin-top: 0.4rem;
}

.prose ul ul {
  margin-top: 0.4rem;
}

.prose p + ul,
.prose ul + p {
  margin-top: 0.75rem;
}

/* Check-marked list used across feature blocks */
.checklist {
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.checklist li {
  position: relative;
  padding-left: 1.6rem;
}

.checklist li::before {
  content: '';
  position: absolute;
  left: 0.15rem;
  top: 0.55em;
  width: 0.7rem;
  height: 0.38rem;
  border-left: 2px solid var(--c-green);
  border-bottom: 2px solid var(--c-green);
  transform: rotate(-45deg);
}

.grid {
  display: grid;
  gap: var(--grid-gap, 1.5rem);
}

@media (min-width: 720px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.panel {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}

.panel--paper {
  background: var(--c-paper);
}


/* =========================================================================
   5. Components
   ========================================================================= */

/* ---------- 5.1 Announcement bar, utility bar and site header ---------- */

/* Announcement bar: the active marquee from the admin, above the utility bar. */
.announce {
  background: var(--c-green-deep);
  color: var(--c-on-dark);
  font-size: var(--fs-xs);
  line-height: 1.4;
}

.announce__inner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 36px;
  padding-block: 0.45rem;
  padding-inline: calc(var(--gutter) + 2.25rem);
  text-align: center;
}

.announce__close {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--c-on-dark);
  cursor: pointer;
}

.announce__close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--c-white);
}

.announce__close:focus-visible {
  outline: 2px solid var(--c-white);
  outline-offset: 0;
}

.announce__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--c-white);
  font-weight: 600;
  text-decoration: none;
}

.announce__link:hover {
  color: var(--c-white);
  text-decoration: underline;
}

.utility {
  background: var(--c-ink);
  color: var(--c-on-dark);
  font-size: var(--fs-xs);
}

.utility__inner {
  display: flex;
  justify-content: flex-end;
  gap: 1.75rem;
  min-height: 34px;
  align-items: center;
}

.utility__item {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0; /* overrides the global p + p spacing */
}

.utility__label {
  color: var(--c-on-dark-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.utility a {
  color: var(--c-white);
  text-decoration: none;
}

.utility a:hover {
  text-decoration: underline;
  color: var(--c-white);
}

@media (max-width: 720px) {
  .utility__item--wide {
    display: none;
  }

  .utility__inner {
    justify-content: flex-start;
  }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--c-line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--header-h);
}

.nav {
  margin-left: auto;
}

.nav__list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.6rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--c-ink-soft);
  text-decoration: none;
  position: relative;
}

.nav__link:hover {
  color: var(--c-green-dark);
}

.nav__link.is-active {
  color: var(--c-ink);
  font-weight: 620;
}

.nav__link.is-active::after {
  content: '';
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  bottom: 6px;
  height: 2px;
  background: var(--c-green);
}

.nav__mobile-extra {
  display: none;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.site-header__cta {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 1rem;
  background: var(--c-green-dark);
  color: var(--c-white);
  font-weight: 600;
  font-size: 0.9375rem;
  border-radius: var(--radius);
  text-decoration: none;
  white-space: nowrap;
}

.site-header__cta:hover {
  background: var(--c-green-darker);
  color: var(--c-white);
}

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  background: var(--c-white);
  color: var(--c-ink);
  cursor: pointer;
}

.menu-toggle__close {
  display: none;
}

@media (max-width: 1179px) {
  .menu-toggle {
    display: inline-flex;
  }

  .site-header__contact {
    display: none;
  }

  .nav {
    margin-left: auto;
  }

  .site-header__actions {
    margin-left: 0;
  }

  /* With JS the list becomes a full-height panel under the bar. */
  .js-nav .nav__list {
    display: none;
  }

  .js-nav.is-open .nav__list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: var(--panel-top, var(--header-h));
    padding: 0.75rem var(--gutter) 2rem;
    background: var(--c-white);
    overflow-y: auto;
    border-top: 1px solid var(--c-line);
  }

  /* No-JS fallback: the nav wraps onto its own row under the logo. */
  .site-header:not(.js-nav) .site-header__inner {
    flex-wrap: wrap;
  }

  .site-header:not(.js-nav) .nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    padding-bottom: 0.5rem;
  }

  .site-header:not(.js-nav) .nav__list {
    flex-wrap: wrap;
  }

  .site-header:not(.js-nav) .menu-toggle {
    display: none;
  }

  .site-header:not(.js-nav) .site-header__actions {
    margin-left: auto;
  }

  .js-nav.is-open .nav__list .nav__link {
    display: flex;
    width: 100%;
    min-height: 52px;
    padding: 0;
    font-size: 1.0625rem;
    border-bottom: 1px solid var(--c-line);
  }

  .js-nav.is-open .nav__list .nav__link.is-active::after {
    display: none;
  }

  .js-nav.is-open .nav__list .nav__link.is-active {
    color: var(--c-green-dark);
  }

  .nav__mobile-extra {
    display: block;
  }

  .nav__mobile-cta {
    margin-top: 1.25rem;
  }

  .nav__cta-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 0 1rem;
    background: var(--c-green-dark);
    color: var(--c-white);
    font-weight: 600;
    border-radius: var(--radius);
    text-decoration: none;
  }

  .nav__cta-mobile:hover {
    color: var(--c-white);
  }

  .js-nav.is-open .menu-toggle__open {
    display: none;
  }

  .js-nav.is-open .menu-toggle__close {
    display: inline-flex;
  }
}

@media (max-width: 420px) {
  .site-header__cta {
    display: none;
  }
}

html.nav-locked {
  overflow: hidden;
}


/* ---------- 5.2 Logo ---------- */

.logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.logo img {
  width: 148px;
  height: auto;
}


/* ---------- 5.3 Site footer ---------- */

.site-footer {
  background: var(--c-ink);
  color: var(--c-on-dark-muted);
  font-size: var(--fs-small);
  padding-top: clamp(3rem, 2.5rem + 2vw, 4.5rem);
}

.site-footer a {
  color: var(--c-on-dark);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--c-white);
  text-decoration: underline;
}

.site-footer__top {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 3rem;
}

@media (min-width: 720px) {
  .site-footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1080px) {
  .site-footer__top {
    grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr));
  }
}

.site-footer__about {
  margin-top: 1rem;
  max-width: 34ch;
  line-height: 1.55;
}

.site-footer__app {
  margin-top: 1.25rem;
}

.site-footer__app a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.social {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.site-footer .social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  color: var(--c-on-dark);
  transition:
    background-color 150ms var(--ease),
    border-color 150ms var(--ease),
    color 150ms var(--ease);
}

.site-footer .social__link:hover {
  background: var(--c-green-dark);
  border-color: var(--c-green-dark);
  color: var(--c-white);
  text-decoration: none;
}

.site-footer__heading {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-on-dark-muted);
  margin-bottom: 1rem;
}

.site-footer__col ul {
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.site-footer__meta {
  display: block;
  font-size: 0.75rem;
  color: var(--c-on-dark-muted);
}

.site-footer__address {
  font-style: normal;
  margin-top: 1rem;
  display: grid;
  line-height: 1.5;
}

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 1.5rem 0 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  font-size: var(--fs-xs);
}

.site-footer__legal {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.site-footer__bottom p + p {
  margin-top: 0;
}

/* Technical partner credit, centred. Below 1180px it becomes its own
   centred row under the copyright and policy links. */
.site-footer__credit {
  order: 3;
  flex-basis: 100%;
  text-align: center;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* From 1180px: copyright | credit | policy links on one row, with the
   credit centred in the strip (equal side columns). */
@media (min-width: 1180px) {
  .site-footer__bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
  }

  .site-footer__credit {
    order: 0;
    padding-top: 0;
    border-top: 0;
  }

  .site-footer__bottom .site-footer__legal {
    justify-self: end;
  }
}


/* ---------- 5.4 Icons and buttons ---------- */

/* Inline line icons: 24px grid, 1.75 stroke, coloured with currentColor. */
.icon {
  flex-shrink: 0;
}

/* Link-styled buttons. Square corners by design (no pill shapes). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0 1.25rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.96875rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 150ms var(--ease),
    border-color 150ms var(--ease),
    color 150ms var(--ease);
}

.btn .icon {
  transition: transform 150ms var(--ease);
}

.btn:hover .icon {
  transform: translateX(2px);
}

/* On light surfaces */
.btn--primary.btn--on-light {
  background: var(--c-green-dark);
  color: var(--c-white);
}

.btn--primary.btn--on-light:hover {
  background: var(--c-green-darker);
  color: var(--c-white);
}

.btn--secondary.btn--on-light {
  border-color: var(--c-ink);
  color: var(--c-ink);
  background: transparent;
}

.btn--secondary.btn--on-light:hover {
  background: var(--c-ink);
  color: var(--c-white);
}

.btn--ghost.btn--on-light {
  padding-inline: 0;
  min-height: 44px;
  color: var(--c-green-dark);
  white-space: normal;
  text-align: left;
  justify-content: flex-start;
  justify-self: start;
}

.btn--ghost.btn--on-light:hover {
  color: var(--c-green-darker);
}

/* On dark surfaces (deep green or charcoal) */
.btn--primary.btn--on-dark {
  background: var(--c-white);
  color: var(--c-green-deep);
}

.btn--primary.btn--on-dark:hover {
  background: var(--c-green-tint);
  color: var(--c-green-deep);
}

.btn--secondary.btn--on-dark {
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--c-white);
}

.btn--secondary.btn--on-dark:hover {
  background: var(--c-white);
  color: var(--c-green-deep);
}

.btn--ghost.btn--on-dark {
  padding-inline: 0;
  min-height: 44px;
  color: var(--c-white);
  justify-content: flex-start;
  justify-self: start;
}

@media (max-width: 480px) {
  .btn:not(.btn--ghost) {
    white-space: normal;
    text-align: center;
  }
}


/* ---------- 5.5 Section ---------- */

.section {
  padding-block: var(--section-y);
}

.section--compact {
  padding-block: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.section--white {
  background: var(--c-white);
}

.section--paper {
  background: var(--c-paper);
}

.section--dark {
  background: var(--c-green-deep);
  color: var(--c-on-dark);
}

.section--ink {
  background: var(--c-ink);
  color: var(--c-on-dark);
}

.section--dark h2,
.section--dark h3,
.section--ink h2,
.section--ink h3 {
  color: var(--c-white);
}

.section--dark .lead,
.section--ink .lead {
  color: var(--c-on-dark-muted);
}

.section--dark .eyebrow,
.section--ink .eyebrow {
  color: var(--c-green-on-dark);
}

.section__head {
  display: grid;
  gap: 1rem 3rem;
  margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}

.section__titles {
  display: grid;
  gap: 0.85rem;
  align-content: start;
}

.section__title {
  max-width: 22ch;
}

.section__head--start .section__title {
  max-width: 28ch;
}

@media (min-width: 960px) {
  .section__head--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
  }
}

.section__actions {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
}


/* ---------- 5.6 Page header and breadcrumbs ---------- */

.page-header {
  background: var(--c-paper);
  border-bottom: 1px solid var(--c-line);
  padding-block: clamp(2.25rem, 1.8rem + 2vw, 3.75rem);
}

.page-header__inner {
  display: grid;
  gap: 2rem 4rem;
  align-items: center;
}

@media (min-width: 960px) {
  .page-header--media .page-header__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
}

.page-header__text {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.page-header h1 {
  font-size: var(--fs-h1-page);
  max-width: 22ch;
}

.page-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.page-header__media {
  margin: 0;
  border: 1px solid var(--c-line);
  background: var(--c-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.page-header__media img {
  width: 100%;
  height: 100%;
}

.page-header__media--cover img {
  object-fit: cover;
}

.page-header__media--contain img {
  object-fit: contain;
  padding: 1rem;
}

.crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

.crumbs li + li::before {
  content: '/';
  margin-right: 0.4rem;
  color: var(--c-line-strong);
}

.crumbs a {
  color: var(--c-muted);
}

.crumbs a:hover {
  color: var(--c-green-dark);
}


/* ---------- 5.7 Home hero ---------- */

.hero {
  background: var(--c-paper);
  border-bottom: 1px solid var(--c-line);
  padding-block: clamp(2.5rem, 1.8rem + 3vw, 5rem);
}

.hero__inner {
  display: grid;
  gap: 2.5rem 4rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.hero__text {
  display: grid;
  gap: 1.25rem;
  align-content: center;
}

.hero h1 {
  max-width: 17ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.hero__aside {
  font-size: var(--fs-small);
  color: var(--c-muted);
}


/* ---------- 5.8 Product showcase ----------
   Desktop: callouts sit beside the photo with leader lines.
   Mobile: they collapse into a two-column spec list under it. */

.showcase {
  margin: 0;
}

.showcase__frame {
  position: relative;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: clamp(1rem, 0.5rem + 2vw, 2rem);
  display: grid;
  gap: 1rem;
}

.showcase__frame img {
  width: auto;
  max-height: min(640px, 70vh);
  margin-inline: auto;
  object-fit: contain;
}

.showcase__callouts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--c-line);
}

.showcase__callout {
  padding: 0.75rem 0.25rem 0.25rem;
}

.showcase__callout dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-muted);
}

.showcase__callout dd {
  margin: 0.15rem 0 0;
  font-weight: 620;
  color: var(--c-ink);
  font-stretch: 92%;
}

.showcase figcaption {
  margin-top: 0.6rem;
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

@media (min-width: 1024px) {
  .showcase--frameless .showcase__frame {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
  }
}

@media (min-width: 1100px) {
  .showcase__frame {
    padding-right: 11rem;
  }

  .showcase--frameless .showcase__frame {
    padding-right: 10rem;
  }

  .showcase--frameless .showcase__callouts {
    right: 0;
  }

  .showcase__callouts {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 9.5rem;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    border-top: 0;
  }

  .showcase__callout {
    position: relative;
    padding: 0 0 0 0.9rem;
    border-left: 2px solid var(--c-green);
  }

  .showcase__callout::before {
    content: '';
    position: absolute;
    right: calc(100% + 2px);
    top: 0.9rem;
    width: 2.25rem;
    border-top: 1px solid var(--c-line-strong);
  }
}


/* ---------- 5.9 Fact strip ---------- */

.facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--c-line);
  border-left: 1px solid var(--c-line);
}

@media (min-width: 960px) {
  .facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.facts__item {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 0.35rem;
  padding: 1.25rem 1.25rem 1.4rem;
  border-right: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-white);
}

.facts__value {
  margin: 0;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  font-weight: 660;
  font-stretch: 88%;
  color: var(--c-ink);
  line-height: 1.15;
}

.facts__label {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  line-height: 1.4;
}


/* ---------- 5.10 Process steps ---------- */

.process {
  list-style: none;
  display: grid;
  gap: 0;
  counter-reset: step;
}

@media (min-width: 720px) {
  .process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .process--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .process--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.process__item {
  position: relative;
  padding: 1.5rem 1.5rem 1.75rem 0;
  border-top: 2px solid var(--c-line);
  display: grid;
  gap: 0.6rem;
  align-content: start;
}

.process--dark .process__item {
  border-top-color: var(--c-line-dark);
}

.process__item::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  width: 3rem;
  height: 2px;
  background: var(--c-green);
}

.process__marker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 0.5rem;
  margin-bottom: 0.4rem;
}

.process__num {
  font-size: 0.8rem;
  color: var(--c-green-dark);
  font-weight: 500;
}

.process--dark .process__num {
  color: var(--c-green-on-dark);
}

.process__marker .process__icon {
  color: var(--c-green-dark);
}

.process--dark .process__marker .process__icon {
  color: var(--c-green-on-dark);
}

.process__title {
  font-size: 1.1875rem;
}

.process__body {
  color: var(--c-muted);
  font-size: var(--fs-small);
  line-height: 1.55;
  max-width: 36ch;
}

.process--dark .process__body {
  color: var(--c-on-dark-muted);
}

.process__detail {
  font-size: 0.75rem;
  color: var(--c-muted);
  margin-top: 0.35rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--c-line);
}

.process--dark .process__detail {
  color: var(--c-on-dark-muted);
  border-top-color: var(--c-line-dark);
}


/* ---------- 5.11 Feature grid ---------- */

.features {
  list-style: none;
  --grid-gap: 1.25rem 2rem;
}

.feature {
  display: grid;
  gap: 0.55rem;
  align-content: start;
}

.features--panel .feature {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}

.features--rule .feature {
  border-top: 1px solid var(--c-line);
  padding-top: 1.25rem;
}

.features--dark.features--rule .feature {
  border-top-color: var(--c-line-dark);
}

.features--dark.features--panel .feature {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--c-line-dark);
}

.feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  color: var(--c-green-dark);
  background: var(--c-white);
  margin-bottom: 0.4rem;
}

.features--dark .feature__icon {
  background: transparent;
  border-color: var(--c-line-dark);
  color: var(--c-green-on-dark);
}

.feature__title {
  font-size: 1.125rem;
  line-height: 1.3;
}

.features--dark .feature__title {
  color: var(--c-white);
}

.feature__body {
  color: var(--c-muted);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.features--dark .feature__body {
  color: var(--c-on-dark-muted);
}

.feature__points {
  margin-top: 0.5rem;
  font-size: var(--fs-small);
}


/* ---------- 5.12 Spec table ---------- */

.specs {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .specs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }
}

.specs__title {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-green-dark);
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--c-ink);
}

.specs__list {
  margin: 0;
}

.specs__row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-small);
}

.specs__row dt {
  color: var(--c-muted);
}

.specs__row dd {
  margin: 0;
  color: var(--c-ink);
  font-weight: 540;
}


/* ---------- 5.13 Installation grid ---------- */

.installs {
  list-style: none;
  display: grid;
  gap: 1.75rem 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 900px) {
  .installs--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .installs--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.install__photo {
  aspect-ratio: 4 / 5;
  /* The Shield X mark shows through when a station photo is missing or fails to load. */
  background: var(--c-paper-2) var(--photo-placeholder) no-repeat center / 56px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.install__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.install__meta {
  margin-top: 0.75rem;
  display: grid;
  gap: 0.2rem;
}

.install__name {
  font-size: 1rem;
  font-stretch: 94%;
}

.install__place {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  line-height: 1.45;
}

.install__state {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-green-dark);
  margin-top: 0.15rem;
}

/* Buttons rendered as <button> (e.g. "Show all installations") */
button.btn {
  font: inherit;
  font-size: 0.96875rem;
  font-weight: 600;
  cursor: pointer;
}




/* ---------- 5.14 Call-to-action band ---------- */

.cta {
  background: var(--c-green-deep);
  color: var(--c-on-dark);
  padding-block: clamp(3rem, 2.5rem + 2vw, 4.5rem);
}

.cta__inner {
  display: grid;
  gap: 2rem 4rem;
  align-items: center;
}

@media (min-width: 960px) {
  .cta__inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}

.cta h2 {
  color: var(--c-white);
  max-width: 24ch;
}

.cta__text p {
  margin-top: 0.9rem;
  color: var(--c-on-dark-muted);
  max-width: 56ch;
}

.cta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.cta__phone {
  margin-top: 1.25rem;
  display: flex;
  gap: 0.6rem;
  align-items: center;
  font-size: var(--fs-small);
  color: var(--c-on-dark-muted);
}

.cta__phone a {
  color: var(--c-white);
}


/* ---------- 5.15 Media coverage ---------- */

.media {
  display: grid;
  gap: 2rem 3rem;
}

@media (min-width: 960px) {
  .media {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: start;
  }
}

.media__video,
.media__video:hover {
  color: var(--c-white);
}

.media__video {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--c-ink);
  text-decoration: none;
}

.media__video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: opacity 150ms var(--ease);
}

.media__video:hover img {
  opacity: 1;
}

.media__play {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 0.6rem;
  align-items: center;
  padding: 1rem 1.25rem;
  background: rgba(20, 25, 22, 0.88);
  font-weight: 600;
  font-size: var(--fs-small);
}

.media__list {
  list-style: none;
  display: grid;
  gap: 0;
}

.media__item {
  padding: 1.4rem 0;
  border-top: 1px solid var(--c-line);
  display: grid;
  gap: 0.4rem;
}

.media__item:last-child {
  border-bottom: 1px solid var(--c-line);
}

.media__outlet {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-green-dark);
}

.media__title {
  font-size: 1.125rem;
}

.media__body {
  color: var(--c-muted);
  font-size: var(--fs-small);
}

.media__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  font-weight: 600;
  font-size: var(--fs-small);
  width: fit-content;
}


/* ---------- 5.16 Timeline ---------- */

.timeline {
  list-style: none;
  display: grid;
  border-left: 2px solid var(--c-line);
  margin-left: 0.25rem;
}

.timeline__item {
  position: relative;
  display: grid;
  gap: 0.35rem 2rem;
  padding: 0 0 1.75rem 1.5rem;
}

.timeline__item::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 0.35rem;
  width: 12px;
  height: 12px;
  background: var(--c-white);
  border: 2px solid var(--c-green);
}

.timeline__item:last-child {
  padding-bottom: 0;
}

@media (min-width: 720px) {
  .timeline__item {
    grid-template-columns: 7.5rem minmax(0, 1fr);
  }
}

.timeline__date {
  font-size: 0.8rem;
  color: var(--c-green-dark);
  font-weight: 500;
  padding-top: 0.1rem;
}

.timeline__title {
  font-size: 1.0625rem;
}

.timeline__body {
  margin-top: 0.25rem;
  color: var(--c-muted);
  font-size: var(--fs-small);
  max-width: 58ch;
}


/* ---------- 5.17 Roles table (vendor / partner / customer) ---------- */

.roles__scroll {
  position: relative; /* keeps visually hidden labels inside the scroller */
  overflow-x: auto;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-white);
}

.roles table {
  min-width: 640px;
  font-size: var(--fs-small);
}

.roles th,
.roles td {
  text-align: left;
  padding: 0.95rem 1.1rem;
  border-bottom: 1px solid var(--c-line);
  vertical-align: top;
}

.roles thead th {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--c-muted);
  background: var(--c-paper);
}

.roles tbody tr:last-child th,
.roles tbody tr:last-child td {
  border-bottom: 0;
}

.roles__role {
  display: block;
  font-weight: 650;
  color: var(--c-ink);
}

.roles__type {
  display: block;
  font-size: var(--fs-xs);
  color: var(--c-muted);
  font-weight: 400;
}

.roles__yes {
  color: var(--c-green-dark);
  display: inline-flex;
}

.roles__no {
  color: var(--c-muted);
}

.roles__note {
  color: var(--c-ink-soft);
}

.roles__notes {
  list-style: none;
  margin-top: 1.5rem;
  font-size: var(--fs-small);
}


/* ---------- 5.18 FAQ (native <details>, no JavaScript) ---------- */

.faq {
  border-top: 1px solid var(--c-line);
}

.faq__item {
  border-bottom: 1px solid var(--c-line);
}

.faq summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.15rem 0;
  min-height: 44px;
  cursor: pointer;
  font-weight: 600;
  color: var(--c-ink);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary:hover {
  color: var(--c-green-dark);
}

.faq__sign {
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.faq__sign::before,
.faq__sign::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 2px;
  background: currentColor;
}

.faq__sign::after {
  transform: rotate(90deg);
  transition: transform 150ms var(--ease);
}

.faq__item[open] .faq__sign::after {
  transform: rotate(0deg);
}

.faq__item p {
  padding: 0 0 1.25rem;
  color: var(--c-muted);
  max-width: 70ch;
}


/* ---------- 5.19 Review note ----------
   Amber annotation that flags missing or conflicting content for the
   review. To hide every note, uncomment the rule below.            */

/* .review-note { display: none !important; } */

.review-note {
  border: 1.5px dashed var(--c-review-line);
  background: var(--c-review-bg);
  color: var(--c-review-text);
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  font-size: var(--fs-small);
  line-height: 1.5;
  max-width: 72ch;
}

.review-note__label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-review);
}

.review-note__title {
  font-weight: 650;
  margin-top: 0.25rem;
  color: #2b1f03;
}

.review-note__body {
  margin-top: 0.3rem;
}

.review-note__body ul {
  padding-left: 1.1rem;
  margin-top: 0.35rem;
}


/* ---------- 5.20 Forms ---------- */

.form {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 0.9rem + 1.5vw, 2rem);
}

.form__title {
  font-size: 1.375rem;
  margin-bottom: 1.5rem;
}

.form__grid {
  display: grid;
  gap: 1.25rem 1.25rem;
}

@media (min-width: 640px) {
  .form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.form__footer {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

.form__submit {
  min-height: 50px;
  padding: 0 1.6rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--c-green-dark);
  color: var(--c-white);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms var(--ease);
}

.form__submit:hover {
  background: var(--c-green-darker);
}

.form__submit:disabled {
  opacity: 0.7;
  cursor: progress;
}

.form__note {
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

.form__status {
  margin-top: 1.25rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  font-size: var(--fs-small);
  border-left: 3px solid;
}

.form__status:empty {
  margin: 0;
  padding: 0;
  border: 0;
}

.form__status[data-state='ok'] {
  background: var(--c-success-bg);
  border-color: var(--c-green-dark);
  color: var(--c-green-deep);
}

.form__status[data-state='error'] {
  background: var(--c-error-bg);
  border-color: var(--c-error);
  color: var(--c-error);
}

.form__status[data-state='review'] {
  background: var(--c-review-bg);
  border-color: var(--c-review-line);
  color: var(--c-review-text);
}

/* Field: label, optional hint, control, inline error */
.field {
  display: grid;
  gap: 0.4rem;
  align-content: start;
}

.field--full {
  grid-column: 1 / -1;
}

.field__label {
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--c-ink);
}

.field__optional {
  font-weight: 400;
  color: var(--c-muted);
}

.field__hint {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  margin-top: -0.15rem;
}

.field input:not([type='checkbox']),
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-size: 1rem;
  color: var(--c-ink);
  background: var(--c-white);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  transition: border-color 150ms var(--ease);
}

.field textarea {
  resize: vertical;
  line-height: 1.5;
}

.field input[type='file'] {
  padding: 0.6rem;
  font-size: var(--fs-small);
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--c-ink-soft);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--c-green);
  outline-offset: 0;
  border-color: var(--c-green-dark);
}

.field select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--c-ink) 50%),
    linear-gradient(135deg, var(--c-ink) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 21px,
    calc(100% - 15px) 21px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

.field [aria-invalid='true'] {
  border-color: var(--c-error) !important;
  box-shadow: inset 3px 0 0 var(--c-error);
}

.field__error {
  font-size: var(--fs-xs);
  color: var(--c-error);
  font-weight: 500;
}

.field__error:empty {
  display: none;
}

.check {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: var(--fs-small);
  cursor: pointer;
  min-height: 44px;
  padding-top: 0.2rem;
}

.check input {
  width: 20px;
  height: 20px;
  margin: 0.1rem 0 0;
  accent-color: var(--c-green-dark);
  flex-shrink: 0;
}

/* Problem report: description with a character counter */
.support__desc {
  grid-column: 1 / -1;
  display: grid;
}

.support__counter {
  justify-self: end;
  font-size: 0.75rem;
  color: var(--c-muted);
  margin-top: 0.3rem;
}


/* =========================================================================
   6. Pages
   ========================================================================= */

/* Shared spacers above review notes */
.note-wrap,
.note,
.spec-notes {
  margin-top: 2rem;
}

.notes {
  display: grid;
  gap: 1rem;
}

@media (min-width: 960px) {
  .notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.section-link,
.more {
  margin-top: 2rem;
}


/* ---------- Home ---------- */

.facts-wrap {
  background: var(--c-paper);
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
  margin-top: calc(-1 * clamp(1.5rem, 1rem + 2vw, 2.5rem));
  position: relative;
}

.audience {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 900px) {
  .audience {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.audience__card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  display: grid;
  gap: 1rem;
  align-content: start;
}

.audience__card--business {
  border-top: 3px solid var(--c-green);
}

.audience__card .audience__icon {
  color: var(--c-green-dark);
}

.audience__card h3 {
  font-size: 1.5rem;
}

.audience__steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1rem;
  font-weight: 560;
  font-size: var(--fs-small);
}

.audience__steps li {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.6rem 0;
  border-top: 1px solid var(--c-line);
}

.audience__steps .mono {
  color: var(--c-green-dark);
  font-size: 0.75rem;
}

.audience__list {
  list-style: none;
  display: grid;
  font-size: var(--fs-small);
}

.audience__list li {
  padding: 0.6rem 0;
  border-top: 1px solid var(--c-line);
}

.platform-actions {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
}

.roi-note {
  margin-top: 1.75rem;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: var(--fs-small);
  color: var(--c-muted);
  max-width: 70ch;
}

.roi-note .icon {
  color: var(--c-green-dark);
  margin-top: 0.1rem;
}

/* Shared by the admin-managed sections below */
.price-inr {
  font-weight: 680;
  font-stretch: 85%;
  color: var(--c-ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.label-mono {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* Machine variants (admin: Homepage sections → Machine variants) */
.vcards {
  list-style: none;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 720px) {
  .vcards {
    gap: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .vcards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Two or three models fill the row instead of leaving empty columns. */
  .vcards--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vcards--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.vcard {
  position: relative;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 150ms var(--ease);
}

.vcard:hover {
  border-color: var(--c-line-strong);
}

.vcard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3rem;
  height: 3px;
  background: var(--c-green);
  z-index: 1;
}

.vcard__photo {
  aspect-ratio: 4 / 5;
  background: var(--c-paper-2) var(--photo-placeholder) no-repeat center / 56px;
}

.vcard__photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1rem;
  background: var(--c-paper-2);
}

/* Flex column so the price sits on the same line in every card, whatever the description length. */
.vcard__body {
  flex: 1;
  padding: 1.25rem 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

@media (max-width: 719px) {
  .vcard__body {
    padding: 1rem 0.9rem 1.1rem;
  }

  .vcard__body h3 {
    font-size: 1rem;
  }

  .vcard__desc {
    font-size: var(--fs-xs);
  }
}

.vcard__photo + .vcard__body {
  border-top: 1px solid var(--c-line);
}

.vcard__num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--c-green-dark);
  margin-bottom: 0.4rem;
}

.vcard__body h3 {
  font-size: 1.125rem;
}

.vcard__desc {
  font-size: var(--fs-small);
  color: var(--c-muted);
}

.vcard__price {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--c-line);
  display: grid;
  gap: 0.35rem;
}

/* Space above the dashed rule, kept when margin-top: auto pushes the price down. */
.vcard__body > :nth-last-child(2) {
  margin-bottom: 0.9rem;
}

.vcard__price .price-inr {
  font-size: clamp(1.3125rem, 1.1rem + 0.8vw, 1.75rem);
}

/* Your own branding / OEM (admin: Homepage sections → OEM branding) */
.oem-split {
  display: grid;
  gap: 2.5rem 4rem;
  align-items: center;
}

@media (min-width: 960px) {
  .oem-split {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

.oem-split__text {
  display: grid;
  gap: 1.1rem;
  align-content: center;
}

.oem-split__text .btn {
  justify-self: start;
}

.oem-collage {
  list-style: none;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(var(--oem-cols, 3), minmax(0, 1fr));
}

.oem-collage li {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-paper-2);
}

.oem-collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms var(--ease);
}

.oem-collage li:hover img {
  transform: scale(1.03);
}

.oem-collage--1 {
  --oem-cols: 1;
}

.oem-collage--1 li {
  aspect-ratio: 4 / 3;
}

.oem-collage--2,
.oem-collage--4 {
  --oem-cols: 2;
}

/* Three or five images: the first one is a tall feature tile. */
.oem-collage--3 li:first-child,
.oem-collage--5 li:first-child {
  grid-row: span 2;
  aspect-ratio: auto;
}

.oem-collage--3 {
  --oem-cols: 2;
}

/* Accolades (admin: Homepage sections → Accolades) */
.awall {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--c-line);
  border-left: 1px solid var(--c-line);
}

@media (min-width: 720px) {
  .awall {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .awall {
    grid-template-columns: repeat(var(--awall-cols, 5), minmax(0, 1fr));
  }
}

.accolade {
  display: grid;
  grid-template-rows: 96px auto;
  gap: 1rem;
  padding: 1.5rem 1.25rem 1.4rem;
  background: var(--c-white);
  border-right: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}

.accolade__logo {
  display: grid;
  place-items: center;
}

.accolade__logo img {
  max-height: 96px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* No logo: the name becomes the visual, so the grid row stays even. */
.accolade__logo--text {
  font-weight: 680;
  font-stretch: 85%;
  font-size: 1.375rem;
  line-height: 1.1;
  color: var(--c-green-dark);
  text-align: center;
}

.accolade__title {
  font-size: 0.9375rem;
  line-height: 1.3;
}

.accolade__sub {
  margin-top: 0.2rem;
  font-size: var(--fs-xs);
  color: var(--c-muted);
  line-height: 1.4;
}

/* Testimonials (content: resources/views/v3/data/testimonials.php) */
.testimonials__note {
  margin-bottom: 1.5rem;
}

.testimonials {
  list-style: none;
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 720px) {
  .testimonials {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .testimonials {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.testimonial figure {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
}

.stars {
  display: flex;
  gap: 2px;
  color: #c98a00;
}

.star--full path {
  fill: currentColor;
}

/* .star--half uses its own gradient fill (left half gold, right half grey). */

.star--empty path {
  fill: var(--c-line-strong);
}

.testimonial__quote {
  margin: 0;
  flex: 1;
}

.testimonial__quote p {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--c-ink);
}

.testimonial__by {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--c-line);
}

.testimonial__avatar {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-green-tint);
  color: var(--c-green-dark);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.testimonial__name {
  display: block;
  font-weight: 650;
  color: var(--c-ink);
  font-size: var(--fs-small);
}

.testimonial__role {
  display: block;
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

/* Volume pricing (admin: Homepage sections → Pricing) */
.ptable__wrap {
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-white);
}

.ptable {
  min-width: 560px;
  font-size: var(--fs-small);
}

/* Phones: tighter cells so two models fit side by side; more models still scroll sideways. */
@media (max-width: 640px) {
  .ptable {
    min-width: 100%;
    table-layout: fixed;
    font-size: var(--fs-xs);
  }

  .ptable th:first-child {
    width: 24%;
  }

  .ptable thead th {
    font-size: 0.78rem;
    hyphens: auto;
  }

  .ptable__pct {
    white-space: nowrap;
  }

  .ptable th,
  .ptable td {
    padding: 0.8rem 0.65rem;
  }

  .ptable td .price-inr {
    font-size: 1.0625rem;
  }

  .ptable tbody th {
    white-space: normal;
  }
}

.ptable th,
.ptable td {
  text-align: left;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--c-line);
  vertical-align: top;
}

.ptable thead th {
  background: var(--c-paper);
  font-weight: 650;
  color: var(--c-ink);
  vertical-align: bottom;
}

.ptable thead th:first-child {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.ptable__model {
  display: block;
  font-weight: 400;
  font-size: var(--fs-xs);
  color: var(--c-muted);
  margin-top: 0.15rem;
}

.ptable tbody th {
  font-weight: 650;
  color: var(--c-ink);
  white-space: nowrap;
}

.ptable td .price-inr {
  display: block;
  font-size: 1.25rem;
}

.ptable__save {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-green-dark);
}

.ptable__none {
  color: var(--c-line-strong);
}

.ptable tr.is-base th,
.ptable tr.is-base td {
  background: #fafaf7;
}

.ptable tr.is-base .price-inr {
  color: var(--c-ink-soft);
}

/* Largest order size: the best price per machine. */
.ptable tr.is-best th,
.ptable tr.is-best td {
  background: var(--c-green-tint);
}

.ptable tr.is-best th {
  box-shadow: inset 3px 0 0 var(--c-green);
}

.ptable tbody tr:last-child th,
.ptable tbody tr:last-child td {
  border-bottom: 0;
}

.ptable__badge {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-green-dark);
}

.pricing-foot {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  justify-content: space-between;
}

.pricing-foot p {
  font-size: var(--fs-small);
  color: var(--c-muted);
  max-width: 60ch;
}

.enquiry {
  display: grid;
  gap: 2.5rem 4rem;
}

@media (min-width: 1024px) {
  .enquiry {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
  }
}

.enquiry__intro {
  display: grid;
  gap: 1.1rem;
  align-content: start;
}


/* ---------- Machine (variants) ---------- */

.overview {
  display: grid;
  gap: 2.5rem 4rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .overview {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}

.overview__text {
  max-width: 58ch;
}

.overview__subhead {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  font-size: 1rem;
}

.tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tags li {
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  font-size: var(--fs-small);
  background: var(--c-white);
}

.compliance {
  margin-top: 3rem;
  display: grid;
  gap: 1.25rem;
  max-width: 780px;
}

.compliance__title {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-green-dark);
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--c-ink);
}

.compliance dl {
  margin: 0;
}

.compliance dl div {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-small);
}

.compliance dt {
  color: var(--c-muted);
}

.compliance dd {
  margin: 0;
  font-weight: 540;
  color: var(--c-ink);
}


/* ---------- Sterila X ---------- */

.yield {
  display: grid;
  gap: 1rem 3rem;
  align-items: end;
}

@media (min-width: 900px) {
  .yield {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

.yield__figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
}

.yield__num {
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  font-weight: 680;
  font-stretch: 85%;
  color: var(--c-ink);
  line-height: 1;
}

.yield__unit {
  font-size: 1.125rem;
  font-weight: 560;
  color: var(--c-ink-soft);
}


/* ---------- Platform (why Shield X) ---------- */

.apps {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 900px) {
  .apps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.apps__card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  display: grid;
  gap: 1rem;
  align-content: start;
}

.apps__card h3 {
  font-size: 1.375rem;
}

.products {
  display: grid;
  gap: 1.5rem 4rem;
}

@media (min-width: 900px) {
  .products {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.products__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--c-line);
}

.products__list li {
  padding: 1rem 0;
  border-bottom: 1px solid var(--c-line);
  font-weight: 600;
  color: var(--c-ink);
}


/* ---------- For business ---------- */

.roi {
  margin-top: 2rem;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  max-width: 70ch;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--c-green);
  background: var(--c-paper);
  font-size: var(--fs-small);
}

.roi .icon {
  color: var(--c-green-dark);
  margin-top: 0.1rem;
}

.policy {
  display: grid;
  gap: 2rem 4rem;
}

@media (min-width: 960px) {
  .policy {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.policy__notes {
  margin-top: 1.5rem;
  font-size: var(--fs-small);
}

.policy__cats {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}

.policy__title {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-green-dark);
  margin-bottom: 0.75rem;
}

.policy__cats ul {
  list-style: none;
}

.policy__cats li {
  padding: 0.75rem 0;
  border-top: 1px solid var(--c-line);
  font-weight: 560;
  color: var(--c-ink);
}


/* ---------- Installations ---------- */

.jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
}

.jump__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-muted);
}

.jump ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.jump a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  color: var(--c-ink);
  text-decoration: none;
  font-weight: 560;
  font-size: var(--fs-small);
}

.jump a:hover {
  border-color: var(--c-green-dark);
  color: var(--c-green-dark);
}

.jump + .note-wrap {
  margin-top: 1.5rem;
}


/* ---------- About ---------- */

.about-facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 2px solid var(--c-ink);
}

@media (min-width: 960px) {
  .about-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.about-facts div {
  padding: 1.1rem 1rem 1.1rem 0;
  border-bottom: 1px solid var(--c-line);
}

.about-facts dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-muted);
}

.about-facts dd {
  margin: 0.35rem 0 0;
  font-weight: 620;
  color: var(--c-ink);
  font-size: 1.0625rem;
}

.founders {
  display: grid;
  gap: 2.5rem 4rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .founders {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

.founders__photo {
  margin: 0;
}

.founders__photo img {
  width: 100%;
  border-radius: var(--radius-lg);
  background: var(--c-white);
  border: 1px solid var(--c-line);
}

.founders__photo figcaption {
  margin-top: 0.6rem;
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

.founders__story {
  max-width: 62ch;
}

.quote {
  margin: 2rem 0 0;
  padding: 1.25rem 0 0 1.5rem;
  border-left: 3px solid var(--c-green);
}

.quote p {
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--c-ink);
  font-weight: 500;
}

.quote footer {
  margin-top: 0.75rem;
  font-size: var(--fs-small);
  color: var(--c-muted);
}

.roadmap {
  display: grid;
  gap: 2.5rem;
  max-width: 860px;
}

.vision {
  font-size: 1.125rem;
  gap: 1rem;
}

.vision__note {
  margin-top: 1.5rem;
}


/* ---------- Contact ---------- */

.contact {
  display: grid;
  gap: 2.5rem 3rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .contact {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr);
  }
}

.info {
  display: grid;
  gap: 0;
  border-top: 2px solid var(--c-ink);
}

.info__block {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--c-line);
  display: grid;
  gap: 0.35rem;
  font-size: var(--fs-small);
}

.info__title {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  font-size: 0.9375rem;
  font-weight: 650;
}

.info__title .icon {
  color: var(--c-green-dark);
}

.info__big {
  font-size: 1.375rem;
  font-weight: 650;
  text-decoration: none;
  color: var(--c-ink);
}

.info__big:hover {
  color: var(--c-green-dark);
}

.info ul {
  list-style: none;
  display: grid;
  gap: 0.2rem;
}

.info a {
  font-weight: 560;
}

.info address {
  font-style: normal;
  display: grid;
}

.hours {
  margin: 0;
  display: grid;
  gap: 0.25rem;
}

.hours div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.hours dt {
  color: var(--c-muted);
}

.hours dd {
  margin: 0;
  font-weight: 560;
  color: var(--c-ink);
}

.info__support {
  padding-top: 1.25rem;
  font-size: var(--fs-small);
}


/* ---------- Dealer enquiry ---------- */

.apply {
  display: grid;
  gap: 2.5rem 4rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .apply {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }
}

.apply__intro {
  display: grid;
  gap: 1.5rem;
}

.rule-block {
  display: grid;
  gap: 0.75rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--c-ink);
}

.live__title {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-green-dark);
  margin-bottom: 0.6rem;
}

.live ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.live li {
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  font-size: var(--fs-small);
}

.apply__phone {
  font-size: var(--fs-small);
}


/* ---------- Pricing ---------- */

.pricing {
  display: grid;
  gap: 2.5rem 4rem;
  align-items: start;
}

@media (min-width: 960px) {
  .pricing {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }
}

.price {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-top: 3px solid var(--c-green);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  display: grid;
  gap: 0.9rem;
}

.price__title {
  font-size: 1.375rem;
}

.price__figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.75rem;
}

.price__from {
  width: 100%;
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

.price__amount {
  font-size: 3rem;
  font-weight: 680;
  font-stretch: 85%;
  line-height: 1;
  color: var(--c-ink);
}

.price__unit {
  font-weight: 560;
  color: var(--c-ink-soft);
}

.explain {
  display: grid;
  gap: 0;
  border-top: 2px solid var(--c-ink);
}

.explain section {
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--c-line);
  display: grid;
  gap: 0.6rem;
}


/* ---------- Brochure ---------- */

.contents {
  list-style: none;
  border-top: 2px solid var(--c-ink);
}

.contents li {
  display: flex;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--c-line);
  font-weight: 540;
  color: var(--c-ink);
}

.contents .mono {
  color: var(--c-green-dark);
  font-size: 0.8rem;
  padding-top: 0.15rem;
}


/* ---------- Exclusive ---------- */

.follow {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.follow a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.1rem;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  color: var(--c-ink);
}

.follow a:hover {
  border-color: var(--c-green-dark);
  color: var(--c-green-dark);
}


/* ---------- Report a problem ---------- */

.support {
  display: grid;
  gap: 2.5rem 3rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .support {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.8fr);
  }
}

.support__aside {
  border-top: 2px solid var(--c-ink);
}

.support__block {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--c-line);
  display: grid;
  gap: 0.5rem;
  font-size: var(--fs-small);
}

.support__block h2 {
  font-size: 1rem;
}

.support__block ul {
  list-style: none;
}

.support__block a {
  font-weight: 560;
}


/* ---------- Gallery: event list ---------- */

.events {
  list-style: none;
  display: grid;
  gap: 2rem 1.5rem;
}

@media (min-width: 640px) {
  .events {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .events {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.event,
.event:hover {
  color: inherit;
}

.event {
  display: grid;
  gap: 0.9rem;
  text-decoration: none;
}

.event__photo {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-paper-2) var(--photo-placeholder) no-repeat center / 56px;
}

.event__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 250ms var(--ease);
}

.event:hover .event__photo img {
  transform: scale(1.02);
}

.event__meta {
  display: grid;
  gap: 0.3rem;
}

.event__title {
  font-weight: 640;
  font-stretch: 94%;
  font-size: 1.0625rem;
  color: var(--c-ink);
  line-height: 1.3;
}

.event:hover .event__title {
  color: var(--c-green-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.event__count {
  font-size: 0.75rem;
  color: var(--c-muted);
}


/* ---------- Gallery: event photos ---------- */

.photos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 0.75rem;
}

@media (min-width: 900px) {
  .photos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.photo a {
  display: block;
  height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 140px;
  background: var(--c-paper-2) var(--photo-placeholder) no-repeat center / 48px;
}

.photo img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.photo--tall {
  grid-row: span 2;
}

.photo--tall img {
  aspect-ratio: auto;
}

.pager {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
}


/* ---------- Legal pages ---------- */

.legal {
  display: grid;
  gap: 2rem 4rem;
  padding-block: clamp(2.5rem, 2rem + 2vw, 4rem) var(--section-y);
}

@media (min-width: 960px) {
  .legal {
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
  }

  .legal__nav {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
  }
}

.legal__nav ul {
  list-style: none;
  display: grid;
  border-top: 2px solid var(--c-ink);
}

.legal__nav a {
  display: block;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
  text-decoration: none;
}

.legal__nav a:hover {
  color: var(--c-green-dark);
}

.legal__nav a[aria-current='page'] {
  color: var(--c-green-dark);
  font-weight: 650;
}

.legal__body h2:first-child {
  margin-top: 0;
}

.legal__body .review-note {
  margin-bottom: 2rem;
}


/* ---------- 404 ---------- */

.nf {
  background: var(--c-paper);
  padding-block: clamp(4rem, 3rem + 5vw, 8rem);
}

.nf__inner {
  display: grid;
  gap: 1.25rem;
  justify-items: start;
}

.nf h1 {
  font-size: var(--fs-h1-page);
}

.nf__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
  margin-top: 0.5rem;
}


/* =========================================================================
   7. Enhancements
      Small touches layered on top of the original design. Each one is
      self-contained: delete its block (and the matching part of main.js)
      to remove it.
   ========================================================================= */

/* 7.1 Header lifts with a soft shadow once it sticks to the top. */
.site-header {
  transition: box-shadow 200ms var(--ease);
}

.site-header.is-scrolled {
  box-shadow: 0 12px 24px -20px rgba(20, 25, 22, 0.45);
}

/* 7.2 Smooth scrolling for in-page links (state jump links, skip link). */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* 7.3 Content below the fold fades up as it scrolls into view.
   main.js adds .reveal only to elements that start off-screen, so nothing
   visible on load is ever hidden, and nothing is hidden without JS. */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 600ms var(--ease),
    transform 600ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* 7.4 Product callouts settle in one after another on load. */
@media (prefers-reduced-motion: no-preference) {
  .showcase__callout {
    animation: callout-in 520ms var(--ease) both;
    animation-delay: calc(180ms + var(--i, 0) * 90ms);
  }
}

@keyframes callout-in {
  from {
    opacity: 0;
    transform: translateX(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* 7.5 Gallery lightbox (built by main.js on event pages). Without JS the
   photo links still open the full-size image in a new tab. */
html.scroll-locked {
  overflow: hidden;
}

.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 4.5rem clamp(0.75rem, 0.25rem + 5vw, 6rem) 2rem;
  border: 0;
  background: rgba(20, 25, 22, 0.96);
  color: var(--c-on-dark);
}

.lightbox[open] {
  display: grid;
  place-items: center;
  animation: lightbox-in 220ms var(--ease);
}

.lightbox::backdrop {
  background: transparent;
}

@keyframes lightbox-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.lightbox__figure {
  margin: 0;
  display: grid;
  gap: 0.9rem;
  justify-items: center;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
}

.lightbox__img {
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 10rem);
  max-height: calc(100dvh - 10rem);
  object-fit: contain;
  border-radius: var(--radius);
  background: var(--c-ink-soft);
  transition: opacity 200ms var(--ease);
}

.lightbox__img.is-loading {
  opacity: 0.35;
}

.lightbox__caption {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--c-on-dark-muted);
  text-align: center;
}

.lightbox__btn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius);
  background: rgba(20, 25, 22, 0.7);
  color: var(--c-white);
  cursor: pointer;
  transition:
    background-color 150ms var(--ease),
    border-color 150ms var(--ease);
}

.lightbox__btn:hover {
  background: var(--c-green-dark);
  border-color: var(--c-green-dark);
}

.lightbox__close {
  top: 1rem;
  right: 1rem;
}

.lightbox__prev,
.lightbox__next {
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__prev {
  left: 1rem;
}

.lightbox__next {
  right: 1rem;
}

.lightbox__prev .icon {
  transform: rotate(180deg);
}

@media (max-width: 640px) {
  .lightbox {
    padding-bottom: 5.5rem;
  }

  .lightbox__prev,
  .lightbox__next {
    top: auto;
    bottom: 1rem;
    transform: none;
  }

  .lightbox__prev {
    left: calc(50% - 56px);
  }

  .lightbox__next {
    right: calc(50% - 56px);
  }
}


/* =========================================================================
   8. Reduced motion and print
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .lightbox {
    display: none !important;
  }
}

/* ==========================================================================
   Chat assistant (assets/v3/js/chatbot.js)
   ========================================================================== */
.sxc {
  --sxc-wa: #075e54;
  --sxc-wa-hover: #054a42;
  --sxc-wa-mark: #25d366;
  position: fixed;
  right: calc(1.25rem + env(safe-area-inset-right));
  bottom: calc(1.25rem + env(safe-area-inset-bottom));
  z-index: 60;
  font-family: var(--font-sans);
  color: var(--c-text);
}

html.scroll-locked .sxc {
  display: none;
}

.sxc button {
  font: inherit;
  cursor: pointer;
}

.sxc [hidden] {
  display: none !important;
}

/* Launcher: green circle with a soft pulse ring and a gentle float */
.sxc__launcher {
  position: relative;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin-left: auto;
  border: 0;
  border-radius: 50%;
  background: var(--c-green-dark);
  color: var(--c-white);
  box-shadow: 0 8px 24px rgba(15, 42, 27, 0.32);
  transition: background-color 0.2s, transform 0.2s var(--ease);
  animation: sxc-float 4s ease-in-out infinite;
}

.sxc__launcher::before,
.sxc__launcher::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--c-green);
  opacity: 0;
  animation: sxc-pulse 2.6s ease-out infinite;
  pointer-events: none;
}

.sxc__launcher::after {
  animation-delay: 1.3s;
}

.sxc__launcher:hover {
  background: var(--c-green-darker);
  transform: scale(1.06);
}

.sxc__launcher:focus-visible {
  outline: 3px solid var(--c-green);
  outline-offset: 3px;
}

.sxc__icon {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  transition: transform 0.25s var(--ease), opacity 0.2s;
}

.sxc__icon--close {
  opacity: 0;
  transform: rotate(-90deg) scale(0.6);
}

.sxc.is-open .sxc__launcher {
  animation: none;
}

.sxc.is-open .sxc__launcher::before,
.sxc.is-open .sxc__launcher::after {
  animation: none;
}

.sxc.is-open .sxc__icon--chat {
  opacity: 0;
  transform: rotate(90deg) scale(0.6);
}

.sxc.is-open .sxc__icon--close {
  opacity: 1;
  transform: none;
}

.sxc__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--c-error);
  color: var(--c-white);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--c-white);
}

@keyframes sxc-pulse {
  0% { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.6); }
}

@keyframes sxc-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Teaser bubble */
.sxc__teaser {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  max-width: 260px;
  margin: 0 0 0.75rem auto;
  padding: 0.75rem 0.5rem 0.75rem 1rem;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: 12px 12px 4px 12px;
  box-shadow: 0 10px 30px rgba(15, 42, 27, 0.16);
  animation: sxc-in 0.35s var(--ease);
}

.sxc__teaser-text {
  border: 0;
  padding: 0;
  background: none;
  color: var(--c-text);
  font-size: var(--fs-small);
  text-align: left;
  line-height: 1.4;
}

.sxc__teaser-x {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--c-muted);
}

.sxc__teaser-x svg {
  width: 16px;
  height: 16px;
}

.sxc__teaser-x:hover {
  background: var(--c-paper);
}

/* Panel */
.sxc__panel {
  display: flex;
  flex-direction: column;
  width: min(380px, calc(100vw - 2.5rem));
  height: min(600px, calc(100vh - 7.5rem));
  height: min(600px, calc(100dvh - 7.5rem));
  margin-bottom: 0.75rem;
  overflow: hidden;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(15, 42, 27, 0.24);
  transform-origin: bottom right;
  animation: sxc-in 0.25s var(--ease);
}

@keyframes sxc-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.sxc__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 0.75rem 0.875rem 1rem;
  background: var(--c-green-deep);
  color: var(--c-on-dark);
}

.sxc__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--c-green-dark);
  color: var(--c-green-on-dark);
}

.sxc__titles {
  flex: 1;
  min-width: 0;
}

.sxc__title {
  margin: 0;
  font-weight: 700;
  color: var(--c-white);
}

.sxc__sub {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--c-on-dark-muted);
}

.sxc__close {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--c-on-dark);
}

.sxc__close:hover {
  background: var(--c-line-dark);
}

.sxc__log {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  background: var(--c-paper);
  overscroll-behavior: contain;
}

.sxc__msg {
  max-width: 88%;
  margin: 0 0 0.625rem;
  padding: 0.625rem 0.875rem;
  border-radius: 12px;
  font-size: var(--fs-small);
  line-height: 1.5;
  overflow-wrap: anywhere;
  animation: sxc-in 0.2s var(--ease);
}

.sxc__msg p {
  margin: 0 0 0.375rem;
}

.sxc__msg p:last-child,
.sxc__msg ul:last-child {
  margin-bottom: 0;
}

.sxc__msg ul {
  margin: 0 0 0.375rem;
  padding-left: 1.125rem;
}

.sxc__msg li {
  margin: 0.125rem 0;
}

.sxc__msg a {
  color: var(--c-green-dark);
  font-weight: 600;
}

.sxc__msg--bot {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-bottom-left-radius: 4px;
}

.sxc__msg--me {
  margin-left: auto;
  background: var(--c-green-dark);
  color: var(--c-white);
  border-bottom-right-radius: 4px;
}

.sxc__typing {
  display: inline-flex;
  gap: 4px;
  padding: 0.875rem 1rem;
}

.sxc__typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-line-strong);
  animation: sxc-dot 1s infinite ease-in-out;
}

.sxc__typing span:nth-child(2) { animation-delay: 0.15s; }
.sxc__typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes sxc-dot {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40% { transform: translateY(-4px); opacity: 1; }
}

/* Bottom dock: suggestions, WhatsApp chip, input */
.sxc__dock {
  border-top: 1px solid var(--c-line);
  background: var(--c-white);
  padding: 0.625rem 0.75rem 0.75rem;
}

.sxc__chips {
  display: flex;
  gap: 0.375rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
}

.sxc__chips:empty {
  display: none;
}

.sxc__chip,
.sxc__topic {
  flex: none;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--c-green-dark);
  border-radius: 999px;
  background: var(--c-white);
  color: var(--c-green-dark);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s;
}

.sxc__chip:hover,
.sxc__topic:hover,
.sxc__topic.is-suggested {
  background: var(--c-green-dark);
  color: var(--c-white);
}

.sxc__wa,
.sxc__wa-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 0;
  border-radius: 999px;
  background: var(--sxc-wa);
  color: var(--c-white);
  font-size: var(--fs-small);
  font-weight: 700;
  transition: background-color 0.15s;
}

.sxc__wa svg,
.sxc__wa-inline svg {
  color: var(--sxc-wa-mark);
}

.sxc__wa:hover,
.sxc__wa-inline:hover {
  background: var(--sxc-wa-hover);
}

.sxc__wa-inline {
  width: auto;
  margin-top: 0.5rem;
  padding: 0.35rem 0.75rem;
  font-size: var(--fs-xs);
}

.sxc__form {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.sxc__input {
  flex: 1;
  min-width: 0;
  padding: 0.6rem 0.875rem;
  border: 1px solid var(--c-line-strong);
  border-radius: 999px;
  font: inherit;
  font-size: 1rem;
  color: var(--c-text);
  background: var(--c-white);
}

.sxc__input:focus {
  outline: 2px solid var(--c-green);
  outline-offset: 0;
  border-color: var(--c-green);
}

.sxc__send {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--c-green-dark);
  color: var(--c-white);
}

.sxc__send:hover {
  background: var(--c-green-darker);
}

.sxc button:focus-visible,
.sxc a:focus-visible {
  outline: 2px solid var(--c-green);
  outline-offset: 2px;
}

/* WhatsApp topic picker and details form inside the conversation */
.sxc__wa-card > p {
  margin: 0 0 0.5rem;
}

.sxc__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.sxc__wa-form {
  display: grid;
  gap: 0.25rem;
}

.sxc__wa-form label {
  margin-top: 0.25rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-muted);
}

.sxc__wa-form input,
.sxc__wa-form textarea {
  width: 100%;
  padding: 0.45rem 0.625rem;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-lg);
  font: inherit;
  font-size: 1rem;
  resize: vertical;
}

.sxc__wa-form .sxc__wa--go {
  margin-top: 0.5rem;
}

.sxc__wa-topic {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
}

.sxc__link {
  border: 0;
  padding: 0;
  background: none;
  color: var(--c-green-dark);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-decoration: underline;
}

/* Phones: the panel becomes a bottom sheet over the page */
@media (max-width: 639px) {
  .sxc {
    right: calc(1rem + env(safe-area-inset-right));
    bottom: calc(1rem + env(safe-area-inset-bottom));
  }

  .sxc.is-open {
    inset: 0;
  }

  .sxc.is-open .sxc__launcher {
    display: none;
  }

  .sxc__panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 88vh;
    height: 88dvh;
    margin: 0;
    border-radius: 16px 16px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .sxc.is-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(20, 25, 22, 0.45);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sxc__launcher,
  .sxc__launcher::before,
  .sxc__launcher::after,
  .sxc__panel,
  .sxc__teaser,
  .sxc__msg,
  .sxc__typing span {
    animation: none;
  }

  .sxc__icon {
    transition: none;
  }
}

@media print {
  .sxc {
    display: none;
  }
}

/* ==========================================================================
   How it works: animated four-stage treatment cycle (main.js initCycle)
   Without JS or with reduced motion none of these classes are added, so the
   section stays as the static four-column list.
   ========================================================================== */
.cycle-status {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 1.25rem;
}

.cycle-status[hidden] {
  display: none;
}

.cycle-status__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-green);
  box-shadow: 0 0 0 0 rgba(58, 152, 55, 0.5);
  animation: cycle-blink 1.4s ease-out infinite;
}

.cycle-status:has(+ .is-paused) .cycle-status__dot {
  animation: none;
  background: var(--c-line-strong);
}

.cycle-status__text {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--c-green-dark);
}

.cycle-status__toggle {
  margin-left: auto;
  padding: 0.3rem 0.875rem;
  border: 1px solid var(--c-line-strong);
  border-radius: 999px;
  background: var(--c-white);
  color: var(--c-text);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
}

.cycle-status__toggle:hover {
  border-color: var(--c-green-dark);
  color: var(--c-green-dark);
}

.cycle-status__toggle:focus-visible {
  outline: 2px solid var(--c-green);
  outline-offset: 2px;
}

@keyframes cycle-blink {
  0% { box-shadow: 0 0 0 0 rgba(58, 152, 55, 0.55); }
  100% { box-shadow: 0 0 0 9px rgba(58, 152, 55, 0); }
}

/* Each stage: soft highlight while it runs, a progress bar along the top border */
.process--cycle.is-cycling .process__item {
  padding-left: 1rem;
  padding-right: 1rem;
  transition: background-color 0.4s var(--ease);
}

.process--cycle.is-cycling .process__item::before {
  width: 0;
  transition: width 0.3s var(--ease);
}

.process--cycle.is-cycling .process__item.is-done::before {
  width: 100%;
}

.process--cycle.is-cycling .process__item.is-active {
  background: var(--c-white);
}

.process--cycle.is-cycling .process__item.is-active::before {
  transition: none;
  animation: cycle-progress var(--cycle-ms, 2800ms) linear forwards;
}

.process--cycle.is-cycling .process__icon {
  transition: color 0.3s, transform 0.3s var(--ease);
}

.process--cycle.is-cycling .process__item:not(.is-active):not(.is-done) .process__icon,
.process--cycle.is-cycling .process__item:not(.is-active):not(.is-done) .process__num {
  color: var(--c-muted);
}

.process--cycle.is-cycling .process__item.is-active .process__icon {
  color: var(--c-green);
  transform: scale(1.18);
}

.process--cycle.is-complete .process__item {
  background: var(--c-green-tint);
}

@keyframes cycle-progress {
  from { width: 0; }
  to { width: 100%; }
}

/* Icon motion for the running stage */
.process__icon--uv,
.process__icon--fan {
  transform-origin: 50% 50%;
}

.is-active .process__icon--uv {
  animation: cycle-uv 1.4s ease-in-out infinite;
}

.is-active .process__icon--heat .heat-level {
  stroke-dasharray: 5;
  animation: cycle-heat 1.4s ease-in-out infinite alternate;
}

.is-active .process__icon--fog path {
  animation: cycle-fog 1.6s ease-in-out infinite;
}

.is-active .process__icon--fog .fog-b { animation-delay: 0.2s; }
.is-active .process__icon--fog .fog-c { animation-delay: 0.4s; }

.is-active .process__icon--fan {
  animation: cycle-spin 1s linear infinite;
}

.process--cycle.is-paused .process__item::before,
.process--cycle.is-paused .process__icon,
.process--cycle.is-paused .process__icon path {
  animation-play-state: paused !important;
}

@keyframes cycle-uv {
  0%, 100% { transform: scale(1.18) rotate(0deg); opacity: 1; }
  50% { transform: scale(1.3) rotate(22deg); opacity: 0.75; }
}

@keyframes cycle-heat {
  from { stroke-dashoffset: 5; }
  to { stroke-dashoffset: 0; }
}

@keyframes cycle-fog {
  0%, 100% { transform: translateX(0); opacity: 1; }
  50% { transform: translateX(3px); opacity: 0.4; }
}

@keyframes cycle-spin {
  from { transform: scale(1.18) rotate(0deg); }
  to { transform: scale(1.18) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .cycle-status__dot,
  .process--cycle .process__item::before,
  .process--cycle .process__icon,
  .process--cycle .process__icon path {
    animation: none !important;
  }
}