/* ===========================================================
   BrightEV PowerStack — site styles
   Palette + type tokens + shared chrome
   =========================================================== */

:root {
  --green: #4DB565;
  --green-600: #3FA055;
  --green-700: #2F8042;
  --green-100: #DCF1E2;
  --green-50:  #EEF8F1;

  --navy: #1F4A9E;
  --navy-700: #163879;
  --navy-900: #0E2658;
  --navy-50:  #EAF0FB;

  --ink: #0E2658;
  --ink-2: #2A3550;
  --muted: #6B7488;

  --paper: #F4F5F2;
  --card:  #FFFFFF;
  --line:  #E2E5DE;

  --radius-sm: 10px;
  --radius:    18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 6px rgba(14,38,88,.06);
  --shadow:    0 12px 28px -14px rgba(14,38,88,.18), 0 2px 6px rgba(14,38,88,.06);
  --shadow-lg: 0 30px 60px -30px rgba(14,38,88,.25);

  --container: 1240px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ----- global overflow guards (FR-001/002/013) -----
   Long unbroken strings (CMS names, emails, URLs, product IDs) must never
   widen the page. Harmless on desktop — only affects strings that would
   otherwise overflow their container. */
.heading-xl,
.heading-l,
.page-hero h1,
.page-hero p,
.hero__power,
.hero__tagline,
.hero__lede,
.partner-tile h4,
.partner-tile__desc,
.resource-tile h3,
.resource-tile p,
.spec-table .row .v {
  overflow-wrap: break-word;
  word-break: break-word;
}

.display {
  font-family: 'Archivo Black', 'Inter', system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 0.95;
}

/* ----- container ----- */
.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
}

/* ===========================================================
   Header / nav
   =========================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244,245,242,0.88);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(14,38,88,.06);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 18px 0;
}
.site-header__logo img {
  height: 36px;
  width: auto;
}
.site-header nav.primary {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  justify-content: center;
}
.site-header nav.primary a {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  padding: 8px 4px;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.site-header nav.primary a:hover { color: var(--navy); }
.site-header nav.primary a.active {
  color: var(--navy);
  border-bottom-color: var(--green);
}
.site-header nav.primary a[data-nav="quote"] {
  background: var(--green);
  color: #fff;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border-bottom: none;
  font-weight: 600;
}
.site-header nav.primary a[data-nav="quote"]:hover { background: var(--green-600); color: #fff; }
.site-header nav.primary a.nav-wa {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #25D366;
  border-bottom: none;
}
.site-header nav.primary a.nav-wa:hover { color: #128C4A; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  transition: transform .12s ease, box-shadow .15s, background .15s, color .15s;
  text-decoration: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  background: #fff;
  color: var(--ink-2);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line);
}
.btn--ghost:hover { color: var(--navy); }

.btn--green {
  background: var(--green);
  color: white;
  box-shadow: 0 6px 16px -8px rgba(77,181,101,.6);
}
.btn--green:hover { background: var(--green-600); }

.btn--navy {
  background: var(--navy);
  color: white;
  box-shadow: 0 6px 16px -8px rgba(31,74,158,.6);
}
.btn--navy:hover { background: var(--navy-700); }

.btn--lg { padding: 16px 30px; font-size: 15px; }

.btn--shadowed {
  position: relative;
}
.btn--shadowed::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink);
  border-radius: inherit;
  z-index: -1;
  transform: translate(6px, 6px);
  opacity: .85;
}

/* mobile nav toggle */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle svg { width: 24px; height: 24px; stroke: var(--ink); }

@media (max-width: 920px) {
  .site-header nav.primary {
    position: fixed;
    inset: 72px 0 auto 0;
    flex-direction: column;
    background: var(--paper);
    padding: 24px;
    gap: 16px;
    border-bottom: 1px solid var(--line);
    transform: translateY(-110%);
    /* translateY alone leaves the menu's bottom strip (72px − 10% of its
       height) overlaying the header and clipping the logo — hide it fully.
       visibility stays visible mid-transition, so the slide-up still shows. */
    visibility: hidden;
    transition: transform .25s, visibility .25s;
    align-items: stretch;
    justify-content: flex-start;
    /* keep a long menu fully within the viewport and scrollable (FR-004) */
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    /* the off-screen collapsed menu must not intercept taps meant for the toggle/page */
    pointer-events: none;
  }
  .site-header.nav-open nav.primary { transform: translateY(0); visibility: visible; pointer-events: auto; }
  .nav-toggle { display: block; }
  .site-header__inner { gap: 16px; }
  .site-header .btn--green { display: none; }
  /* ≥44px touch targets for the collapsed menu + language toggle (FR-005) */
  .site-header nav.primary a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 8px;
    font-size: 15px;
  }
  .site-header nav.primary a[data-nav="quote"] {
    justify-content: center;
    padding: 12px 18px;
  }
  .nav-toggle { min-width: 44px; min-height: 44px; }
  .lang-toggle { min-height: 44px; min-width: 44px; padding: 11px 16px; }
}

/* ===========================================================
   Hero
   =========================================================== */

.hero {
  position: relative;
  padding: 72px 0 60px;
  overflow: hidden;
}
.hero .wrap { position: relative; z-index: 2; }
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  align-items: center;
  min-height: 540px;
  position: relative;
  z-index: 2;
}
.hero__wordmark {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hero__power {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(70px, 11vw, 156px);
  line-height: .85;
  letter-spacing: -0.02em;
  color: var(--green);
  text-shadow: 4px 6px 0 rgba(14,38,88,.08);
}
.hero__tagline {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(20px, 2.4vw, 32px);
  color: var(--navy);
  letter-spacing: 0.04em;
}
.hero__lede {
  margin-top: 18px;
  max-width: 440px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
}
.hero__cta { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }

.hero__product {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__product img {
  max-height: 520px;
  width: auto;
  filter: drop-shadow(0 30px 40px rgba(14,38,88,.25));
}
.hero__product::after {
  content: '';
  position: absolute;
  right: 6%;
  top: 14%;
  width: 18px; height: 18px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(77,181,101,.18);
}

/* diagonal green band decoration behind hero/pills */
.hero__band {
  position: absolute;
  inset: auto 0 -180px 0;
  height: 340px;
  background: var(--green);
  clip-path: polygon(0 70%, 100% 10%, 100% 100%, 0 100%);
  z-index: 0;
  pointer-events: none;
}
.hero__band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--paper);
  clip-path: polygon(0 82%, 100% 22%, 100% 100%, 0 100%);
}

/* feature pills */
.feature-pills {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 60px 0 40px;
}
.feature-pill {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-radius: var(--radius-pill);
  padding: 14px 22px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
}
.feature-pill__dot {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--green-50);
  border: 2px solid var(--green);
  display: grid; place-items: center;
  flex: none;
}
.feature-pill__dot svg { width: 18px; height: 18px; color: var(--green); }
.feature-pill__label {
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--green-600);
  line-height: 1.1;
}

@media (max-width: 820px) {
  .hero__grid { grid-template-columns: 1fr; gap: 24px; padding-bottom: 30px; min-height: auto; }
  .hero__product img { max-height: 360px; margin: 0 auto; }
  .feature-pills { grid-template-columns: 1fr; padding: 24px 0; }
}

/* ===========================================================
   More than backup section
   =========================================================== */

.section {
  position: relative;
  padding: 90px 0;
}
.section--paper { background: var(--paper); }

.more-backup {
  position: relative;
  z-index: 1;
}
.more-backup__grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 60px;
  align-items: center;
}
.product-callout {
  position: relative;
  display: flex;
  justify-content: center;
}
.product-callout img.product {
  max-width: 360px;
  height: 400px;
  align-self: flex-start;
  filter: drop-shadow(0 22px 28px rgba(14,38,88,.18));
}
.product-callout .arrow-badge {
  position: absolute;
  top: 0;
  right: 5%;
  width: 84px; height: 84px;
  background: #fff;
  border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}
.product-callout .arrow-badge svg {
  width: 36px; height: 36px;
  color: var(--green);
}

.heading-eyebrow { font-family: 'Archivo Black', sans-serif; font-size: 14px; letter-spacing: 0.08em; color: var(--green-600); }
.heading-xl {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(38px, 5vw, 64px);
  line-height: .95;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.heading-xl .accent { color: var(--green); }
.heading-l {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1;
  color: var(--navy);
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  gap: 18px;
}
.feature-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.feature-list strong { color: var(--navy); font-weight: 700; display: block; margin-bottom: 2px; font-family: 'Archivo Black', sans-serif; letter-spacing: 0.02em; }
.feature-list .dot {
  width: 12px; height: 12px;
  background: var(--green);
  border-radius: 3px;
  margin-top: 6px;
  transform: rotate(45deg);
}

@media (max-width: 820px) {
  .section { padding: 60px 0; }
  .more-backup__grid { grid-template-columns: 1fr; gap: 30px; }
}

/* ===========================================================
   Different Spaces section
   =========================================================== */

.spaces {
  position: relative;
  padding: 120px 0;
  overflow: hidden;
}
.spaces__bg {
  position: absolute;
  inset: 0;
  background: var(--green);
  clip-path: polygon(0 18%, 100% 0, 100% 80%, 0 100%);
  z-index: 0;
}
.spaces__bg::after {
  content: '';
  position: absolute;
  inset: 18% -10% auto -10%;
  height: 78%;
  background: var(--paper);
  clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 88%);
}

.spaces__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 50px;
  align-items: center;
}
.spaces__heading {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(40px, 5.5vw, 68px);
  line-height: .95;
  letter-spacing: -0.01em;
}
.spaces__heading .top { color: var(--green); display: block; }
.spaces__heading .bot { color: var(--navy); display: block; }

.spaces__cards {
  display: grid;
  gap: 22px;
}
/* Two-column layouts only — inset the cards away from the heading column.
   Was an inline style on the container; on stacked phone layouts it pushed
   the cards off the right edge of the viewport. */
@media (min-width: 821px) {
  .spaces__cards { padding-left: 100px; }
  [dir="rtl"] .spaces__cards { padding-left: 0; padding-right: 100px; }
}
.tag-card {
  position: relative;
  background: #fff;
  border-radius: 22px;
  padding: 70px 30px 26px 30px;
  border: 1px solid var(--line);
  box-shadow: 0 6px 20px -10px rgba(14,38,88,.15), 6px 6px 0 0 rgba(14,38,88,.85);
  transition: transform .2s, box-shadow .2s;
  cursor: pointer;
  max-width: 540px;
}
.tag-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 48px;
  background: var(--green);
  border-radius: 22px 22px 0 0;
}
.tag-card::after {
  content: '';
  position: absolute;
  left: 22px; top: 16px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid rgba(255,255,255,.6);
  z-index: 1;
}
.tag-card > * { position: relative; z-index: 1; }
.tag-card h3 {
  font-family: 'Archivo Black', sans-serif;
  font-size: 34px;
  margin: 0 0 8px;
  color: var(--green);
  letter-spacing: 0.02em;
}
.tag-card p { margin: 0; color: var(--green-700); font-family: 'Archivo Black', sans-serif; font-size: 13px; letter-spacing: 0.06em; line-height: 1.4; }
.tag-card:hover { transform: translateY(-3px); }
.tag-card:nth-child(2) { margin-left: 24px; }
.tag-card:nth-child(3) { margin-left: 48px; }

.find-cta {
  margin-top: 50px;
  display: flex;
  justify-content: center;
}
.find-cta__pill {
  background: #fff;
  border: 2px solid var(--green);
  border-radius: var(--radius-pill);
  padding: 14px 30px 14px 14px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: 'Archivo Black', sans-serif;
  color: var(--navy);
  font-size: 17px;
  letter-spacing: 0.03em;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.find-cta__pill .badge {
  width: 38px; height: 38px;
  background: var(--green);
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
}
.find-cta__pill .accent { color: var(--green); }

@media (max-width: 820px) {
  .spaces__inner { grid-template-columns: 1fr; }
  .tag-card:nth-child(2),.tag-card:nth-child(3) { margin-left: 0; }
}

.power-needs-block {
  position: relative;
  z-index: 1;
  margin-top: 80px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 48px;
  text-align: left;
}
.power-needs-block .spaces__heading { text-align: left; }

@media (max-width: 720px) {
  .power-needs-block {
    flex-direction: column;
    text-align: center;
    gap: 32px;
  }
  .power-needs-block .spaces__heading { text-align: center; }
}

/* ===========================================================
   Why choose / blue section
   =========================================================== */

.why-section {
  position: relative;
  background: var(--navy);
  color: #fff;
  padding: 48px 0 56px;
  overflow: hidden;
}
.why-section::before {
  content: '';
  position: absolute;
  inset: -30px 0 auto 0;
  height: 80px;
  background: var(--navy);
  clip-path: polygon(0 0, 100% 60%, 100% 100%, 0 100%);
}

.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.why-grid h2 { margin: 0 0 32px; }
.why-grid h2 .accent { color: var(--green); }

.why-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 32px;
  color: #DBE3F4;
  font-size: 14px;
}
.why-features li {
  position: relative;
  padding-left: 22px;
  line-height: 1.5;
}
.why-features li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 8px; height: 8px;
  background: var(--green);
  border-radius: 50%;
}

.harsh-block {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  margin-top: 44px;
  position: relative;
}
.harsh-block__product {
  position: relative;
}
.harsh-block__product img {
  width: 100%;
  max-width: 220px;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.35));
}
.harsh-block__product .sparkle {
  position: absolute;
  width: 64px;
  bottom: -18px;
  right: -18px;
  filter: hue-rotate(80deg) saturate(1.6) brightness(1.1);
}
.harsh-block h3 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(28px, 3.4vw, 42px);
  margin: 0 0 18px;
  line-height: 1;
}
.harsh-block h3 .accent { color: var(--green); }
.harsh-block p { color: #C6D2EA; max-width: 540px; }
.harsh-block .bookmark {
  position: absolute;
  top: -10px;
  right: 0;
  width: 26px;
}

/* Three-column why section: features | product | harsh-conditions */
.why-section .wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0 48px;
  align-items: center;
}
.why-section .why-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.v2-img-col {
  display: flex;
  align-items: center;
  justify-content: center;
}
.v2-img-col img {
  width: 220px;
  height: auto;
  display: block;
}
.why-section .harsh-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 0;
}
.why-section .harsh-block__product { display: none; }

@media (max-width: 820px) {
  .why-section .wrap { grid-template-columns: 1fr; gap: 32px 0; }
  .v2-img-col img { width: 180px; }
  .why-grid { grid-template-columns: 1fr; gap: 30px; }
  .why-features { grid-template-columns: 1fr; }
  .harsh-block { grid-template-columns: 1fr; }
}

/* ===========================================================
   From first call section
   =========================================================== */

.steps-section {
  position: relative;
  background: var(--navy);
  color: #fff;
  padding: 0 0 110px;
  overflow: hidden;
}

.steps-inner {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 28px;
  align-items: start;
}
.steps-label {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(20px, calc(16px + 0.84vw), 36px);
  line-height: 1;
  writing-mode: horizontal-tb;
  transform: none;
  letter-spacing: 0.06em;
  align-self: auto;
  padding: 0 0 4px;
}
.steps-label .accent { color: var(--green); font-size: 1.2em; }
.steps-label .outline { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,0.7); }

.steps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.step-card {
  background: var(--green);
  color: #fff;
  border-radius: 18px;
  padding: 28px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 30px -16px rgba(0,0,0,.45);
}
.step-card__num {
  font-family: 'Archivo Black', sans-serif;
  font-size: 80px;
  line-height: .9;
  color: #fff;
  opacity: .95;
}
.step-card__icon {
  width: 80px;
  align-self: end;
}
.step-card__body {
  grid-column: 1 / -1;
  margin-top: 8px;
}
.step-card h4 {
  font-family: 'Archivo Black', sans-serif;
  margin: 0 0 8px;
  font-size: 22px;
  letter-spacing: 0.02em;
}
.step-card p {
  margin: 0;
  font-size: 13px;
  color: #EAF7EE;
  line-height: 1.5;
}

@media (max-width: 820px) {
  .steps-grid { grid-template-columns: 1fr; }
}

/* ===========================================================
   Plug illustration band
   =========================================================== */

.plug-band {
  position: relative;
  background: var(--paper);
  padding: 0;
  margin-top: -50px;
  z-index: 3;
  pointer-events: none;
  clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%);
  padding-top: 30px;
}
.plug-band img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 14px rgba(14,38,88,.18));
}
.plug-band::before { display: none; }

/* ===========================================================
   Choose your series
   =========================================================== */

.series-section {
  background: var(--paper);
  padding: 30px 0 100px;
  position: relative;
  overflow: hidden;
}
.series-section::after {
  content: '';
  position: absolute;
  inset: -10% -10% auto auto;
  width: 70%; height: 80%;
  background: var(--green);
  clip-path: polygon(60% 0, 100% 0, 100% 60%, 100% 100%, 80% 100%, 20% 50%);
  opacity: 0.55;
  z-index: 0;
}

.series-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 16px 60px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 22px;
  letter-spacing: 0.04em;
  margin: 0 auto 56px;
  display: flex;
  width: fit-content;
  box-shadow: 0 14px 30px -16px rgba(31,74,158,.6);
}

.series-grid {
  display: grid;
  gap: 28px;
  position: relative;
  z-index: 1;
}
.series-card {
  background: #fff;
  border: 2px solid var(--green);
  border-radius: 30px;
  padding: 36px 50px;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 40px;
  align-items: center;
  box-shadow: 0 22px 50px -30px rgba(14,38,88,.25);
}
.series-card__body h3 {
  font-family: 'Archivo Black', sans-serif;
  font-size: 38px;
  margin: 0 0 6px;
  color: var(--green);
  letter-spacing: 0.02em;
  line-height: 1;
}
.series-card__body h3 .tier {
  display: block;
  font-size: 24px;
  font-weight: 400;
  color: var(--green);
  margin-top: 4px;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0;
}
.series-card__body p {
  color: var(--green-700);
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  margin: 14px 0 22px;
  line-height: 1.4;
}
.series-card__cta {
  display: inline-flex; gap: 12px;
}
.series-card__img {
  display: flex;
  justify-content: center;
}
.series-card__img img {
  max-height: 240px;
  width: auto;
  filter: drop-shadow(0 16px 26px rgba(14,38,88,.18));
}
.series-card--pro .series-card__img img {
  max-height: 300px;
}

@media (max-width: 820px) {
  .series-card { grid-template-columns: 1fr; padding: 30px; }
}

/* ===========================================================
   CTA — don't wait
   =========================================================== */

.cta-section {
  background: var(--navy);
  color: #fff;
  padding: 90px 0 110px;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  inset: -20px 0 auto 0;
  height: 80px;
  background: var(--navy);
  clip-path: polygon(0 60%, 100% 0, 100% 100%, 0 100%);
}
.cta-section .decor-bolt {
  position: absolute;
  bottom: -40px; right: -20px;
  width: 180px;
  opacity: .35;
}

.cta-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: start;
}
.cta-grid h2 .accent { color: var(--green); }
.cta-grid p.lede {
  margin-top: 18px;
  color: #C6D2EA;
  font-size: 15px;
  line-height: 1.65;
  max-width: 380px;
}

.quote-form {
  display: grid;
  gap: 14px;
}
.quote-form input,
.quote-form select,
.quote-form textarea {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 16px 24px;
  font-size: 14px;
  font-family: inherit;
  width: 100%;
  outline: none;
  transition: border-color .15s, background .15s;
}
.quote-form textarea {
  border-radius: 20px;
  min-height: 100px;
  resize: vertical;
}
.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
  border-color: var(--green);
  background: rgba(255,255,255,.12);
}
.quote-form input::placeholder,
.quote-form textarea::placeholder { color: rgba(255,255,255,.55); letter-spacing: 0.04em; text-transform: uppercase; font-size: 12px; }
.quote-form select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 22px center;
}
.quote-form .submit-row {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 6px;
}
.quote-form .submit-btn {
  background: var(--green);
  color: #fff;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 14px 28px;
  font-family: 'Archivo Black', sans-serif;
  letter-spacing: 0.04em;
  font-size: 13px;
  cursor: pointer;
  position: relative;
  transition: transform .12s, background .15s;
}
.quote-form .submit-btn:hover { background: var(--green-600); transform: translateY(-1px); }
.quote-form .submit-btn::after {
  content: 'TODAY';
  display: inline-block;
  margin-left: 8px;
  background: #fff;
  color: var(--green);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
}
.quote-form .small {
  font-size: 11px; color: #97A6C8; letter-spacing: 0.04em;
}

@media (max-width: 820px) {
  .cta-grid { grid-template-columns: 1fr; }
}

/* ===========================================================
   Footer
   =========================================================== */

.site-footer {
  background: var(--paper);
  padding: 30px 0;
  border-top: 1px solid var(--line);
}
.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.site-footer__logo img { height: 32px; }
.site-footer__copy {
  font-family: 'Archivo Black', sans-serif;
  font-size: 12px;
  color: var(--navy);
  letter-spacing: 0.06em;
}
.site-footer__links {
  display: flex; gap: 20px;
}
.site-footer__links a {
  color: var(--ink-2);
  font-size: 13px;
}
.site-footer__links a:hover { color: var(--navy); }

/* ===========================================================
   WhatsApp floating
   =========================================================== */

.whatsapp-fab {
  position: fixed;
  right: 24px; bottom: 24px;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: #25D366;
  display: grid; place-items: center;
  box-shadow: 0 12px 24px -8px rgba(37,211,102,.6);
  z-index: 90;
  cursor: pointer;
  transition: transform .2s;
}
.whatsapp-fab:hover { transform: scale(1.08); }
.whatsapp-fab svg { width: 32px; height: 32px; color: #fff; }
.whatsapp-fab::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(37,211,102,.35);
  animation: ping 2s ease-out infinite;
}
@keyframes ping {
  0% { transform: scale(0.9); opacity: .8; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* ===========================================================
   Generic page (subpages)
   =========================================================== */

.page-hero {
  position: relative;
  padding: 70px 0 50px;
  background: var(--paper);
  overflow: hidden;
}
.page-hero::after {
  content: '';
  position: absolute;
  inset: 70% -10% 0 -10%;
  background: var(--green);
  clip-path: polygon(0 80%, 100% 0, 100% 100%, 0 100%);
  opacity: .9;
}
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero h1 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(36px, 5vw, 60px);
  line-height: .95;
  margin: 0;
  color: var(--navy);
}
.page-hero h1 .accent { color: var(--green); }
.page-hero p {
  margin: 14px 0 0;
  max-width: 540px;
  color: var(--ink-2);
}

.page-section {
  padding: 60px 0 90px;
  background: var(--paper);
  position: relative;
}

/* form card (used on quote, warranty, contact pages) */
.form-card {
  background: #fff;
  border-radius: 28px;
  padding: 40px 48px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  max-width: 760px;
  margin: 0 auto;
}
.form-card h2 {
  margin: 0 0 8px;
  font-family: 'Archivo Black', sans-serif;
  color: var(--navy);
  font-size: 28px;
}
.form-card p.intro { color: var(--ink-2); margin: 0 0 30px; }
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-grid .field-full { grid-column: 1 / -1; }
.field {
  display: flex; flex-direction: column; gap: 6px;
}
.field label {
  font-size: 12px;
  font-family: 'Archivo Black', sans-serif;
  letter-spacing: 0.06em;
  color: var(--navy);
}
.field label .req { color: var(--green-600); }
.field input,
.field select,
.field textarea {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  outline: none;
  transition: border-color .15s, background .15s;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--green);
  background: #fff;
}
.field--check {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}
.field--check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--green); }
.form-actions {
  display: flex;
  gap: 14px;
  margin-top: 24px;
  align-items: center;
}

@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-card { padding: 30px 22px; }
}

/* simple resource / partner grids */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}
.resource-tile {
  background: #fff;
  border-radius: 20px;
  padding: 24px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .2s;
  display: flex; flex-direction: column; gap: 14px;
}
.resource-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.resource-tile__thumb {
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--navy-50), var(--green-50));
  border-radius: 12px;
  display: grid; place-items: center;
  color: var(--navy);
  font-family: 'Archivo Black', sans-serif;
  font-size: 14px;
}
.resource-tile h3 { margin: 0; font-family: 'Archivo Black', sans-serif; font-size: 17px; color: var(--navy); }
.resource-tile p { margin: 0; font-size: 13px; color: var(--ink-2); flex: 1; }
.resource-tile__meta {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--muted);
}
.resource-tile-wrap { display: flex; flex-direction: column; }
.resource-tile__error { margin: 4px 0 0; font-size: 12px; }

.partner-tile {
  background: #fff;
  border-radius: 18px;
  border: 1px solid var(--line);
  padding: 28px 22px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  min-height: 200px;
  text-align: center;
  transition: transform .18s ease, border-color .2s ease, box-shadow .2s ease;
  position: relative;
  height: 100%;
}
.partner-tile:hover {
  transform: translateY(-3px);
  border-color: var(--green);
  box-shadow: 0 14px 32px -18px rgba(14,38,88,.22);
}
.partner-tile__logo {
  width: 96px; height: 96px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--navy), var(--green));
  display: grid; place-items: center;
  color: #fff;
  font-family: 'Archivo Black', sans-serif;
  font-size: 26px;
  letter-spacing: .02em;
  overflow: hidden;
  flex: 0 0 auto;
}
.partner-tile__logo--image {
  background: #fff;
  border: 1px solid var(--line);
  padding: 10px;
}
.partner-tile__logo--image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.partner-tile h4 {
  margin: 4px 0 0;
  font-family: 'Archivo Black', sans-serif;
  color: var(--navy);
  font-size: 16px;
  line-height: 1.25;
}
.partner-tile .role {
  display: inline-block;
  font-size: 11px;
  color: var(--green-600);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: 'Archivo Black', sans-serif;
  background: rgba(77,181,101,.10);
  padding: 4px 10px;
  border-radius: 999px;
}
.partner-tile .role:empty { display: none; }
.partner-tile__desc {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 28ch;
}
.partner-tile-link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.partner-tile-link:hover { text-decoration: none; }
.partner-tile-link:focus-visible .partner-tile {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

/* spec table for product page */
.spec-table {
  background: #fff;
  border-radius: 20px;
  border: 1px solid var(--line);
  overflow: hidden;
}
.spec-table .row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  border-bottom: 1px solid var(--line);
}
.spec-table .row:last-child { border-bottom: 0; }
.spec-table .row .k {
  padding: 14px 22px;
  background: var(--paper);
  font-family: 'Archivo Black', sans-serif;
  color: var(--navy);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.spec-table .row .v {
  padding: 14px 22px;
  color: var(--ink-2);
  font-size: 14px;
}

/* toast for form success */
.toast {
  position: fixed;
  left: 50%; bottom: 100px;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: #fff;
  padding: 16px 26px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .25s;
  z-index: 200;
  font-size: 14px;
  display: flex; align-items: center; gap: 10px;
}
.toast .check {
  width: 22px; height: 22px;
  background: var(--green);
  border-radius: 50%;
  display: grid; place-items: center;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ===========================================================
   Inline validation errors
   =========================================================== */

.field-error {
  color: #c44;
  font-size: 12px;
  margin-top: 2px;
  display: block;
}

.field-hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.req { color: var(--green-600); }

/* ===========================================================
   Language toggle button
   =========================================================== */

.site-header__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
}

.lang-toggle {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px;
  color: var(--navy);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.lang-toggle:hover { background: var(--navy); color: #fff; }
.lang-toggle:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}

/* ===========================================================
   WhatsApp FAB focus ring (now role="button")
   =========================================================== */

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

/* ===========================================================
   Global focus ring
   =========================================================== */

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

/* ===========================================================
   RTL support
   =========================================================== */

[dir="rtl"] .site-footer__inner { flex-direction: row-reverse; }
[dir="rtl"] .site-footer__links { flex-direction: row-reverse; }
[dir="rtl"] .form-actions { flex-direction: row-reverse; }
[dir="rtl"] .page-hero p { direction: rtl; }
[dir="rtl"] .hero__band { clip-path: polygon(0 10%, 100% 70%, 100% 100%, 0 100%); }
[dir="rtl"] .product-divider { clip-path: polygon(0 50%, 100% 0, 100% 50%, 0 100%); }
[dir="rtl"] .whatsapp-fab { right: auto; left: 24px; }
[dir="rtl"] .site-header nav.primary { direction: rtl; }
[dir="rtl"] .site-header__controls { margin-inline-start: 0; margin-inline-end: auto; }
[dir="rtl"] .case-card blockquote { border-left: none; border-right: 3px solid var(--green); padding-left: 0; padding-right: 16px; }
[dir="rtl"] .field-error { text-align: start; }

/* ===========================================================
   Accessibility: aria-live regions for form errors
   =========================================================== */

.form-submit-error { color: #c44; margin-top: .75rem; font-size: .9rem; }

/* ===========================================================
   Resource gate modal (US5)
   =========================================================== */

#resource-gate-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
#resource-gate-modal[hidden] { display: none; }

.gate-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 38, 88, .5);
  backdrop-filter: blur(3px);
}

.gate-modal__panel {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  max-width: 460px;
  width: 90%;
  box-shadow: var(--shadow-lg);
}

.gate-modal__panel h2 {
  font-family: 'Archivo Black', sans-serif;
  color: var(--navy);
  margin: 0 0 8px;
  font-size: 22px;
}

.gate-modal__panel p {
  color: var(--ink-2);
  margin: 0 0 24px;
  font-size: 14px;
}

.gate-modal__actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.btn--ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-2);
  border-radius: var(--radius-pill);
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.btn--ghost:hover { background: var(--paper); }

[dir="rtl"] .gate-modal__actions { flex-direction: row-reverse; }

/* ===========================================================
   RESPONSIVE SYSTEM — 003-mobile-responsive-ui
   Breakpoint ladder (additive; existing 920/820/720 queries preserved):
     • Phone            @media (max-width: 640px)
     • Small phone      @media (max-width: 400px)   (refines the phone band)
     • Tablet portrait  @media (min-width: 641px) and (max-width: 1024px)
     • Landscape phone  @media (orientation: landscape) and (max-height: 480px)
   Desktop (≥1280px) is FROZEN — nothing below alters it. This block lives at
   the END of the file so its tablet rules win over the earlier 820px stacking
   rules in the 641–820px overlap zone (research F1).
   =========================================================== */

/* -----------------------------------------------------------
   PHONE  (≤640px)
   ----------------------------------------------------------- */
@media (max-width: 640px) {

  /* T008 — homepage hero fits small phones */
  .hero { padding: 48px 0 40px; }
  .hero__power { font-size: clamp(40px, 12vw, 76px); }
  .hero__tagline { font-size: clamp(18px, 5vw, 26px); }
  .hero__lede { font-size: 15px; max-width: 100%; }
  .hero__product img { max-height: 300px; margin: 0 auto; }
  .hero__product::after { display: none; } /* decorative dot — simplify (C6.2) */

  /* T009 — different-spaces / tag-card scaling */
  .tag-card { padding: 58px 22px 22px; }
  .tag-card h3 { font-size: 26px; }

  /* T010 — series pill + step numbers scale down; keep motifs contained */
  .series-pill { padding: 14px 30px; font-size: 18px; margin-bottom: 40px; }
  .step-card { padding: 24px; }
  .step-card__num { font-size: 60px; }
  .step-card__icon { width: 60px; }
  .step-card h4 { font-size: 20px; }

  /* T007 — footer stacks; links are ≥44px targets */
  .site-footer { padding-bottom: 96px; } /* clear the fixed 60px WhatsApp FAB (T015) */
  .site-footer__inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .site-footer__links { flex-wrap: wrap; gap: 4px 20px; }
  .site-footer__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* T012 — product spec table stacks key/value into one column */
  .spec-table .row { grid-template-columns: 1fr; }
  .spec-table .row .k {
    border-bottom: 1px solid var(--line);
    padding-bottom: 6px;
  }
  .spec-table .row .v { padding-top: 6px; }

  /* T013 — gate modal panel fits a 320px viewport */
  .gate-modal__panel { padding: 26px 22px; width: 92%; }

  /* T014 — sub-page heroes tighten on phones */
  .page-hero { padding: 48px 0 40px; }
  .page-section { padding: 40px 0 64px; }

  /* T017 — form control text ≥16px stops iOS focus auto-zoom (SC-004) */
  .quote-form input,
  .quote-form select,
  .quote-form textarea,
  .field input,
  .field select,
  .field textarea { font-size: 16px; }

  /* T019 — form touch targets ≥44px */
  .field input,
  .field select,
  .field textarea { min-height: 44px; }
  .quote-form input,
  .quote-form select { min-height: 48px; }
  .quote-form .submit-btn,
  .submit-btn { min-height: 44px; }
  .btn { min-height: 44px; }
  /* the consent checkbox is a fixed square — exempt it from the 44px min-height
     and from flex-shrink so it never collapses into a thin sliver */
  .field--check input {
    width: 24px;
    height: 24px;
    min-height: 0;
    flex: 0 0 auto;
  }

  /* T006/T015 — header logo tap area to ≥44px height (image stays 36px) */
  .site-header__logo { display: flex; align-items: center; min-height: 44px; }

  /* T018 — single-column forms; submit reachable without side-scroll */
  .form-grid { grid-template-columns: 1fr; }
  .form-actions { flex-wrap: wrap; }
  .form-actions .btn { width: 100%; }
  .quote-form .submit-row { flex-wrap: wrap; align-items: stretch; }
  .quote-form .submit-btn { width: 100%; }

  /* T012 — form controls must be able to shrink: date/file inputs carry a
     large intrinsic min-width that otherwise widens the whole form grid. */
  .field { min-width: 0; }
  .field input,
  .field select,
  .field textarea { max-width: 100%; min-width: 0; }

  /* T009/T012 — neutralize fixed-width media that overrides the global img cap */
  .product-callout img.product { max-width: 100%; height: auto; }

  /* T010 — series-card CTA buttons wrap instead of forcing a wide min-content */
  .series-card { padding: 26px 22px; }
  .series-card__cta { flex-wrap: wrap; }
  .series-card__img img,
  .series-card--pro .series-card__img img { max-height: 200px; }

  /* T013/T014 — inline CTA banners (partners/resources/events) stack on phones.
     !important overrides their inline grid-template-columns/padding. */
  .cta-banner {
    grid-template-columns: 1fr !important;
    padding: 26px 22px !important;
    text-align: center;
  }
  .cta-banner .btn { justify-self: center; }

  /* T012 — warranty page's inline 3-up mini-stats grid stacks on phones */
  .mini-stats-3 { grid-template-columns: 1fr !important; }
}

/* -----------------------------------------------------------
   SMALL PHONE  (≤400px) — refines the phone band
   ----------------------------------------------------------- */
@media (max-width: 400px) {

  /* T011 — reclaim horizontal space (side padding 32px → 18px) */
  .wrap { padding: 0 18px; }

  /* T008/T009/T010 — tightest type on the narrowest screens */
  .hero__power { font-size: clamp(36px, 13vw, 60px); }
  .tag-card h3 { font-size: 22px; }
  .series-pill { padding: 12px 20px; font-size: 16px; }
  .step-card__num { font-size: 48px; }
}

/* -----------------------------------------------------------
   HEADER INSET FIX
   `.site-header__inner`'s `padding: 18px 0` shorthand overrides `.wrap`'s
   side padding (same specificity, later in the file), so below the frozen
   ≥1280px design the logo/toggles sat flush against the viewport edge; the
   ≤400px `.wrap` override in turn zeroed the header's vertical padding.
   Higher-specificity longhands restore both. ≥1280px is untouched — there
   the centered 1200px container already insets the header.
   ----------------------------------------------------------- */
@media (max-width: 1279px) {
  .site-header .site-header__inner {
    padding-block: 18px;
    padding-inline: 32px;
  }
}
@media (max-width: 400px) {
  .site-header .site-header__inner { padding-inline: 18px; }
}

/* -----------------------------------------------------------
   TABLET PORTRAIT  (641–1024px)
   Placed after the 820px stacking rules so 2-column layouts win in the
   641–820px overlap zone (F1). Avoids the stretched-phone / big-gap look.
   ----------------------------------------------------------- */
@media (min-width: 641px) and (max-width: 1024px) {
  /* T022 — sensible 2-up grids instead of a lone stacked column */
  .feature-pills { grid-template-columns: repeat(2, 1fr); }
  .why-features { grid-template-columns: 1fr 1fr; }
  .steps-grid { grid-template-columns: 1fr 1fr; }
  .tile-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

/* -----------------------------------------------------------
   LANDSCAPE PHONE  (short viewport)
   ----------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 480px) {
  /* T023 — reduce vertical padding; keep sticky header + FAB from eating the view */
  .hero { padding: 32px 0 24px; }
  .hero__grid { min-height: auto; }
  .section { padding: 40px 0; }
  .spaces { padding: 48px 0; }
  .page-hero { padding: 36px 0 28px; }
  .page-section { padding: 32px 0 48px; }
  .site-header .site-header__inner { padding-block: 10px; }
  .whatsapp-fab { width: 46px; height: 46px; bottom: 12px; right: 12px; }
  .whatsapp-fab svg { width: 24px; height: 24px; }
}

/* -----------------------------------------------------------
   T026 — RTL hardening for the rules added above
   (physical offsets mirrored; most new rules use flex/grid/logical props
   and mirror automatically).
   ----------------------------------------------------------- */
@media (max-width: 640px) {
  [dir="rtl"] .site-footer__inner { align-items: flex-end; }
}
@media (orientation: landscape) and (max-height: 480px) {
  [dir="rtl"] .whatsapp-fab { right: auto; left: 12px; }
}

/* -----------------------------------------------------------
   STACKED "DIFFERENT SPACES" BAND  (≤820px, where .spaces__inner stacks)
   The desktop band is cut with %-based clip-paths sized for a ~700px-tall
   two-column section. Once the layout stacks the section grows tall, the
   diagonals scale with it, and the green band crosses the heading — making
   the green "DIFFERENT" word invisible on the green background. Below the
   stacking breakpoint the diagonals use fixed px offsets instead, keeping
   the green as thin edge stripes so the heading always sits on paper.
   Placed after the landscape-phone block so this padding wins there too
   (48px top padding would push the heading back onto the stripe).
   ----------------------------------------------------------- */
@media (max-width: 820px) {
  .spaces { padding: 150px 0 130px; }
  .spaces__bg {
    clip-path: polygon(0 80px, 100% 0, 100% calc(100% - 60px), 0 100%);
  }
  .spaces__bg::after {
    inset: 0 -10%;
    height: auto;
    clip-path: polygon(0 135px, 100% 50px, 100% 100%, 0 calc(100% - 110px));
  }
}