/* ============================================================================
   SmartAPEX design tokens - public site only
   ----------------------------------------------------------------------------
   Loaded last on purpose (wp_head priority 102, after the enqueued theme and
   Elementor sheets at priority 8 and after the offloaded Customizer block at
   101), so everything here wins on cascade order at equal specificity and
   needs no !important. Where a legacy rule already carries !important, this
   file does not fight it - it redefines the CUSTOM PROPERTY that rule reads,
   which repoints the value without touching the rule.

   The dealer portal is deliberately untouched: it is in live use and gets its
   own pass with its own testing.
   ========================================================================= */

/* NOTE ON SPECIFICITY, measured not assumed.
   Being last in the cascade is not enough here. Each page prints its own token
   block in a <style> INSIDE <body> - the homepage at line 485 with <body> open
   at 378 - so those rules come after this file in document order and win every
   tie. Hence html:root (0,1,1) rather than :root (0,1,0), and "html body"
   prefixes on the scoped blocks. That is specificity doing the work, not
   !important; the one !important in this file is marked and justified where it
   appears. */
html:root{
  /* the page-level blocks define --red / --red-lit / --ink; remapping them
     here is what actually migrates the homepage and /apex-scheduler reds,
     because every rule that reads them follows automatically */
  --red:var(--accent);
  --red-lit:var(--accent-text);
  --ink:#121212;          /* the site's existing value, adopted rather than fought */
}

:root{
  /* One accent, site-wide. #c40000 over #E30613: it is the de-facto site red
     and already the portal's, so this is the smaller migration. */
  --accent:#c40000;

  /* #c40000 measures 3.25:1 on #050505 and 3.12:1 on #0c0c0c - large text
     only. This is the token for anything under 16px on a DARK ground:
     #FF4D4D is 6.23:1 on #050505 and 5.98:1 on #0c0c0c.
     It is NOT a general-purpose red: on white it is only 3.27:1, where
     --accent itself is 6.27:1 and is the correct choice. */
  --accent-text:#FF4D4D;  /* DARK GROUNDS ONLY - 6.23:1 on #050505, but only
                             3.27:1 on white. On light grounds use --accent,
                             which is 6.27:1 there. */

  /* Kept, and now named. One deliberate two-colour gradient consumes it. */
  --accent-diagram:#1688ff;

  --container:1320px;   /* page layout */
  --measure:680px;      /* long-form reading column */
}

/* --- legacy token remap ---------------------------------------------------
   .sapex-tax-v3 and .sapex-aps define their own palettes. Same specificity,
   later in the cascade, so these win - and every rule reading them (including
   the ones with !important) follows automatically. */
html body .sapex-tax-v3{
  --sapex-red:var(--accent);
  --sapex-green:var(--accent);   /* #35d0b0 retired; eyebrows and card spans follow */
  --sapex-blue:var(--accent-diagram);
}
html body .sapex-aps{ --red:var(--accent); --red-lit:var(--accent-text); }

/* the hardcoded rgba form of the old red that no token covers. The literal is
   the fallback for anything without color-mix; the second declaration wins
   where it is supported, so the tint follows --accent from now on. */
.sapex-tax-card:hover{
  border-color:rgba(196,0,0,.24);
  border-color:color-mix(in srgb, var(--accent) 24%, transparent);
}

/* --- buttons: two variants ------------------------------------------------
   Every pill below is mapped onto primary or secondary. The black #050505
   pill and the rgba(255,255,255,.72) pill are gone, as are the white-filled
   "primary" pills, which were a third variant in all but name. */
html body .sapex-btn-primary,
html body .button.primary,
html body .btn.pri,
html body .sapex-tax-button.sapex-tax-button-primary,
html body .sapex-button.sapex-button-primary,
html body .sapex-consent-btn.sapex-consent-primary,
html body .wpcf7-form-control.wpcf7-submit{
  background:var(--accent);
  border:1px solid var(--accent);
  color:#fff;
  border-radius:999px;
  font-size:15px;
}
html body .sapex-btn-primary:hover,
html body .button.primary:hover,
html body .btn.pri:hover,
html body .sapex-tax-button.sapex-tax-button-primary:hover,
html body .sapex-button.sapex-button-primary:hover,
html body .sapex-consent-btn.sapex-consent-primary:hover,
html body .wpcf7-form-control.wpcf7-submit:hover{
  background:#a80000;
  border-color:#a80000;
}

html body .sapex-btn-secondary,
html body .button.dark-button,
html body .button.light-button,
html body .btn.sec,
html body .sapex-tax-button.sapex-tax-button-secondary,
html body .sapex-button.sapex-button-ghost,
html body .sapex-button.sapex-button-line,
html body .sapex-consent-btn.sapex-consent-secondary{
  background:transparent;
  border:1px solid currentColor;
  border-radius:999px;
  font-size:15px;
}
/* secondary takes its colour from the ground it sits on */
html body .sapex-on-dark .sapex-btn-secondary,
html body .light-content .button.dark-button,
html body .light-content .button.light-button,
html body .sapex-aps .btn.sec,
html body .sapex-button.sapex-button-ghost,
html body .sapex-button.sapex-button-line,
html body .sapex-consent-btn.sapex-consent-secondary{ color:#fff; }
.sapex-tax-v3 .sapex-tax-button.sapex-tax-button-secondary{ color:var(--ink); }

/* --- containers: two tokens ----------------------------------------------- */
.container,
.sapex-tax-container,
.sapex-container,
.sapex-hero-inner{
  max-width:var(--container);
  margin-inline:auto;
}
/* /apex-scheduler was rendering its body copy at 633-746px inside an 80px
   page inset - a good measure arrived at by accident. Named, and its outer
   layout brought onto the shared container. */
html body .sapex-aps .wrap,
html body .sapex-aps .container{
  /* their rule is width:min(1240px,calc(100% - 64px)) with max-width:none, so
     matching the shape is what works - a bare max-width loses to that none */
  width:min(var(--container),calc(100% - 64px));
  margin-inline:auto;
}
html body .sapex-aps .hgroup,
html body .sapex-aps .copy,
html body .sapex-aps p{ max-width:var(--measure); }

/* --- focus -----------------------------------------------------------------
   Nothing is added blindly. The reason focus was invisible is the theme's
   reset in style.css, which sets outline:0 on a list that includes every
   element and every anchor, plus a:hover,a:active and wpr-addons' button:focus.
   Those are base-state or :focus rules; :focus-visible carries an extra
   pseudo-class and this file loads later, so these win on their own merits
   without !important. Measured after deploy rather than assumed. */
a:focus-visible,
button:focus-visible,
[type=submit]:focus-visible,
[type=button]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible,
.btn:focus-visible,
.sapex-tax-card:focus-visible,
.product-card:focus-visible,
header .flexnav li a:focus-visible{
  outline:2px solid var(--accent-text);
  outline-offset:3px;
  border-radius:4px;
}
/* on light grounds the brighter red is too weak; use the accent itself */
.sapex-on-light a:focus-visible,
.sapex-tax-v3 a:focus-visible,
.sapex-tax-card:focus-visible,
.sapex-tax-v3 input:focus-visible,
.sapex-tax-v3 select:focus-visible,
.sapex-tax-v3 textarea:focus-visible{
  outline-color:var(--accent);
}

/* --- "Wired reliability" ---------------------------------------------------
   The section computes rgba(0,0,0,0) with rgb(18,18,18) text over ancestors at
   rgb(12,12,12) and rgb(5,5,5). It renders light today, but nothing in the DOM
   accounts for that - no pseudo-element paints, no ancestor is light, and its
   only background is a 5.5% blue radial gradient. Whatever is painting it is
   not something this file can see, which is precisely why the dark text should
   not depend on it. An explicit ground, stated once. */
section.architecture-clean-section{
  background-color:#f7f7f5;
  /* the blue was hardcoded as rgba(22,136,255,0.055); it now reads the token,
     with the literal kept first as the fallback */
  background-image:radial-gradient(circle at 50% 44%,
    rgba(22,136,255,.055), rgba(0,0,0,0) 60%);
  background-image:radial-gradient(circle at 50% 44%,
    color-mix(in srgb, var(--accent-diagram) 5.5%, transparent),
    rgba(0,0,0,0) 60%);
}

/* The one !important in this file, and the reason for it.
   The Customizer block carries

     body.page-id-3982 .sapex-contact-v2 .wpcf7 input[type="text"] { outline:none }

   which is (0,4,2). This file is stylesheet 23 of 23, so load order is already
   correct and still loses - exactly the case where !important is the right
   tool. The alternative was a page-id-scoped selector, which is the habit that
   produced this stylesheet in the first place. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.wpcf7 input:focus-visible,
.wpcf7 textarea:focus-visible,
.wpcf7 select:focus-visible{
  outline:2px solid var(--accent) !important;
  outline-offset:2px !important;
}

/* --- stragglers, each one measured before being written ------------------- */

/* The pills that used to be white-on-dark took the accent ground but kept
   their dark text: measured rgb(196,0,0) with rgb(5,5,5) and rgb(7,7,7), which
   is 3.25:1 and 3.19:1 - worse than what they replaced. Their own colour rules
   are more specific than the block above, so the text colour is restated here
   at a specificity that actually reaches them. */
html body .sapex-tax-v3 .sapex-tax-button.sapex-tax-button-primary,
html body .sapex-downloads-v2 .sapex-button.sapex-button-primary,
html body .sapex-home-v2 .button.primary,
html body .sapex-aps .btn.pri{
  color:#fff;
  background:var(--accent);
  border-color:var(--accent);
}

/* The contact submit stayed rgb(8,8,8) at 14px: the Customizer targets it as
   body.page-id-3982 .sapex-contact-v2 .wpcf7 input[type=submit], which is
   (0,4,2) and beats the generic rule. Matched here without naming the page. */
html body .sapex-contact-v2 .wpcf7 input[type=submit],
html body .sapex-contact-v2 .wpcf7 .wpcf7-submit{
  background:var(--accent);
  border:1px solid var(--accent);
  color:#fff;
  font-size:15px;
  border-radius:999px;
}

/* /apex-scheduler keeps three elements on the old red because they hardcode it
   as rgba rather than reading --red:
     radial-gradient(... rgba(214,35,51,.16) ...)
     box-shadow: 0 12px 34px rgba(214,35,51,.5)
     background: rgba(214,35,51,.14)
   Restated against the token. */
html body .sapex-aps .btn.pri{
  box-shadow:0 12px 34px color-mix(in srgb, var(--accent) 50%, transparent);
}
html body .sapex-aps [class*=badge],
html body .sapex-aps [class*=chip],
html body .sapex-aps [class*=tag]{
  background:color-mix(in srgb, var(--accent) 14%, transparent);
}

/* ==========================================================================
   Written against elements enumerated from the live DOM by computed style,
   not against class names guessed from the outside. The previous pass failed
   because it assumed wrapper names like .sapex-downloads-v2 that the markup
   does not nest the way I expected.
   ========================================================================== */

/* --- 1. white text on the accent, everywhere -------------------------------
   Seven buttons carried dark text on the new red: measured rgb(5,5,5) at
   3.25:1 and rgb(7,7,7) at 3.21:1, including "SEND A QUESTION", the primary
   call to action on the page dealers use to reach us.

   The blockers, read off the matched rules:
     custom-*.css :: .sapex-button-primary                        color rgb(5,5,5) !important
     custom-*.css :: .sapex-about-contact-v2 .sapex-button-primary color rgb(7,7,7) !important
   Both !important, so specificity cannot reach them and load order does not
   help. Those pins made sense when the button was white; they are simply
   wrong now that it is red. !important here is answering !important, and the
   pins themselves should come out of the Customizer in a later cleanup.

   The policy, stated once: an accent ground always takes white text. White on
   #c40000 is 5.90:1. There is no case on this site where dark text on the
   accent is correct. */
html body .sapex-button.sapex-button-primary,
html body .sapex-tax-button.sapex-tax-button-primary,
html body .sapex-about-contact-v2 .sapex-button-primary,
html body .sapex-contact-clean-hero .sapex-button-primary,
html body a.sapex-button-primary,
html body a.sapex-tax-button-primary{
  color:#fff !important;
  background:var(--accent) !important;
  border-color:var(--accent) !important;
}

/* --- 2. the greens -------------------------------------------------------
   There is no single green. Counted in the Customizer block:
     #2bc98b x10   #53d6a5 x5   #35d0b0 x3   #7fc8ba x1   #53d6c5 x1   #2fa87f x1
   and they arrive through THREE different custom properties on three scopes,
   which is why remapping --sapex-green alone fixed /products and missed
   /company and /contact:
     .sapex-v2              --sapex-accent #53d6a5  --sapex-accent-dark #08785e
     .sapex-about-contact-v2 --sapex-accent #7fc8ba          <- the 12px "ASK SMARTAPEX"
     .sapex-downloads-v2    --sapex-accent #53d6a5  --sapex-accent-dark #2fa87f
     .sapex-tax-v3          --sapex-green  #35d0b0           (already remapped)

   These eyebrows are 11-12px on light grounds, so they take --accent, which
   is 6.27:1 there - not --accent-text, which would be 3.27:1. */
html body .sapex-v2,
html body .sapex-about-contact-v2,
html body .sapex-downloads-v2{
  --sapex-accent:var(--accent);
  --sapex-accent-dark:var(--accent);
}

/* --- 3. /apex-scheduler's three remaining rgb(214,35,51) ------------------
   Enumerated: .hero (background-image), section.cta (background-image) and
   three .reason .tick (background-color). They hardcode the old red instead
   of reading --red, so the token remap could not reach them. */
html body .sapex-aps .hero{
  background-image:
    radial-gradient(90% 120% at 88% 8%,
      color-mix(in srgb, var(--accent) 16%, transparent) 0%,
      color-mix(in srgb, var(--accent) 0%, transparent) 55%);
}
html body .sapex-aps section.cta{
  background-image:
    radial-gradient(80% 120% at 50% 0%,
      color-mix(in srgb, var(--accent) 18%, transparent),
      color-mix(in srgb, var(--accent) 0%, transparent) 62%),
    var(--deep);
}
html body .sapex-aps .reason .tick{ background-color:var(--accent); }

/* --- 4. the contact form's submit ----------------------------------------
   Measured rgb(8,8,8). The rule is
     body.page-id-3982 .sapex-contact-v2 .wpcf7 .sapex-contact-submit  !important
   and the real class is .sapex-contact-submit, which the previous guess did
   not include. */
/* Both declarations are !important, so specificity decides between them.
   Theirs is (0,4,1); the first attempt here was (0,2,3) and lost. This is
   (0,4,3) - four classes and three elements - which is the smallest selector
   that actually wins, and it names no page id. */
html body .sapex-contact-v2 .wpcf7 input.wpcf7-submit.sapex-contact-submit,
html body .sapex-contact-v2 .wpcf7 input.sapex-contact-submit.has-spinner{
  background:var(--accent) !important;
  border:1px solid var(--accent) !important;
  color:#fff !important;
  border-radius:999px;
  font-size:15px;
}

/* --- deliberately NOT changed -------------------------------------------
   Two greens are semantic, and turning them red would invert their meaning:
     #25d366                  WhatsApp brand green
     .sapex-aps td.yes        the "yes" column of a yes/no comparison table
   Flagged rather than migrated. */

/* --- /products cards: image + model code ---------------------------------
   Matches the homepage card: image on top in a fixed 4:3 well, then the
   category label, title, copy and action. The model code sits directly under
   the title in the accent, because on a light card --accent is 6.27:1 while
   --accent-text would be 3.27:1. */
html body .sapex-tax-card{ display:flex; flex-direction:column; overflow:hidden; }
html body .sapex-tax-card-media{
  display:block; margin:-1px -1px 14px; aspect-ratio:4/3; overflow:hidden;
  background:#f2f2ef; border-radius:12px 12px 0 0;
}
html body .sapex-tax-card-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .45s ease;
}
html body .sapex-tax-card:hover .sapex-tax-card-media img{ transform:scale(1.04); }
html body .sapex-tax-code{
  display:block; margin:-4px 0 10px; font-size:12px; font-weight:400;
  letter-spacing:.06em; color:var(--accent);
  /* text-transform:uppercase REMOVED. It rendered the lowercase placeholder in
     APX-nZA as a literal N - so the card read APX-NZA, which a dealer would
     take for a real part number, and APX-NZN carried N twice meaning two
     different things (gang count, and no-neutral). Every other code is already
     uppercase in the source, so nothing else changes. Source-correct and
     render-wrong is precisely why the rendered page gets read. */
  text-transform:none;
}
html body .sapex-tax-code-note{
  display:block; margin:-6px 0 10px; font-size:11.5px; font-weight:400;
  letter-spacing:.02em; text-transform:none; color:rgba(18,18,18,.55);
}

/* --- public downloads catalogue ------------------------------------------
   Reuses the page's existing .sapex-section / .sapex-container / .sapex-button
   conventions so it reads as part of the page rather than bolted on. */
html body .sapex-dl-section{ padding:88px 0; border-top:1px solid rgba(18,18,18,.08); }
html body .sapex-cat-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:22px; margin:30px 0 34px;
}
html body .sapex-cat{
  background:#fff; border:1px solid rgba(18,18,18,.10); border-radius:14px;
  padding:24px 26px;
}
html body .sapex-cat h3{ margin:0 0 6px; font-size:21px; }
html body .sapex-cat-facts{
  margin:0; font-size:14px; color:rgba(18,18,18,.62); max-width:none;
}
html body .sapex-cat-sep{ opacity:.45; margin:0 2px; }
html body .sapex-rel-list{ list-style:none; margin:16px 0 0; padding:14px 0 0;
  border-top:1px solid rgba(18,18,18,.08); }
html body .sapex-rel{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:7px 0; font-size:14.5px;
}
html body .sapex-rel + .sapex-rel{ border-top:1px solid rgba(18,18,18,.05); }
html body .sapex-rel-title{ flex:1 1 200px; }
html body .sapex-rel-ver{ color:var(--accent); font-weight:600; font-size:12.5px; }
html body .sapex-rel-date{ color:rgba(18,18,18,.5); font-size:12.5px; }
html body .sapex-cat-empty{
  margin:14px 0 0; padding-top:14px; border-top:1px solid rgba(18,18,18,.08);
  font-size:13.5px; color:rgba(18,18,18,.55); max-width:none;
}
/* the OTA note in the portal admin - it should be hard to miss */
.sapex-dlx-ota-note{
  margin:8px 0 0; padding:12px 14px; border-radius:10px;
  background:rgba(196,0,0,.06); border:1px solid rgba(196,0,0,.30);
  font-size:13px; line-height:1.55;
}

/* --- a missing token, with consequences beyond this page ------------------
   .sapex-button-line declares  color: var(--sapex-ink) !important
   but --sapex-ink is only defined on .sapex-tax-v3. Everywhere else the
   custom property is undefined, which makes the declaration INVALID at
   computed-value time - so the button silently inherits instead. On
   /downloads/ that inherited rgb(170,170,170) on a transparent ground:
   2.17:1, reading as a disabled control. Defining the token at the root
   fixes every consumer, not just the one we happened to look at. */
:root{ --sapex-ink:#121212; }

/* --- the new catalogue sections paint their own ground --------------------
   Every page wrapper on this site carries .light-content, and style.css says
     .light-content h1,h2,h3,... { color:#fff }
   which is correct for sections that paint a dark background and catastrophic
   for one that paints none: the headings came out white on the ~#F7F7F5 page
   ground, about 1.0:1. Same failure as the 404 and "Wired reliability".

   So the section declares what it is - a light ground with ink text - and the
   headings take their colour from that token rather than from a literal. */
html body .sapex-dl-section{
  background-color:#f7f7f5;
  color:var(--ink);
}
html body .sapex-dl-section h2,
html body .sapex-dl-section h3,
html body .sapex-dl-section h4,
html body .sapex-dl-section p,
html body .sapex-dl-section li,
html body .sapex-dl-section time{
  color:var(--ink);
}
html body .sapex-dl-section .sapex-kicker{ color:var(--accent); }
html body .sapex-dl-section .sapex-cat-facts,
html body .sapex-dl-section .sapex-cat-empty{ color:rgba(18,18,18,.62); }
html body .sapex-dl-section .sapex-rel-date{ color:rgba(18,18,18,.55); }
html body .sapex-dl-section .sapex-rel-ver{ color:var(--accent); }

/* --- the secondary button, made a real control ----------------------------
   "Apply for a dealer account" is the conversion action of this page for
   anyone who is not yet a dealer, and it was rendering as grey-on-grey.
   Ink on a visible border, and tone-aware because this page has both light
   and dark sections. */
html body .sapex-dl-section .sapex-button-line,
html body .sapex-dl-section .sapex-button-ghost,
html body .sapex-button.sapex-button-line{
  color:var(--ink) !important;
  border:1px solid rgba(18,18,18,.34);
  background:transparent;
}
html body .sapex-dl-section .sapex-button-line:hover,
html body .sapex-button.sapex-button-line:hover{
  border-color:var(--ink);
  background:rgba(18,18,18,.04);
}
/* on a dark ground the same control inverts */
html body .sapex-dark .sapex-button-line,
html body .sapex-section.sapex-dark .sapex-button-line,
html body .sapex-on-dark .sapex-button-line{
  color:#fff !important;
  border-color:rgba(255,255,255,.55);
}

/* --- cards sit tight when nothing is itemised ----------------------------- */
html body .sapex-cat-grid{ align-items:start; }
html body .sapex-cat-empty{ margin-top:12px; padding-top:12px; }


/* ===== TASK 1: dealer library, one block ================================
   Replaces the five-card layout. The cards were the Installer Manuals pattern
   applied where there was nothing to put in them - five boxes repeating one
   sentence. A table says the same facts in a fraction of the height and lets
   the 55 total be stated once, where a visitor can actually see it.
   tabular-nums so the counts and dates form real columns. */
html body .sapex-dl-library{ background-color:#f7f7f5; color:var(--ink); padding:80px 0; }
html body .sapex-dl-library h2,
html body .sapex-dl-library th,
html body .sapex-dl-library td{ color:var(--ink); }
html body .sapex-dl-library .sapex-kicker{ color:var(--accent); }

html body .sapex-lib-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap; margin-bottom:26px;
}
html body .sapex-lib-head h2{ margin:0; }
html body .sapex-lib-cta{ display:flex; gap:12px; margin:0; }

html body table.sapex-lib{
  width:100%; border-collapse:collapse;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}
html body table.sapex-lib th,
html body table.sapex-lib td{
  padding:15px 8px; text-align:left; vertical-align:baseline;
  border-bottom:1px solid rgba(18,18,18,.10);
}
html body table.sapex-lib tr:first-child th,
html body table.sapex-lib tr:first-child td{ border-top:1px solid rgba(18,18,18,.16); }
html body table.sapex-lib th{ font-weight:400; font-size:16.5px; }
html body .sapex-lib-n{
  width:5.5em; text-align:right; font-weight:600; font-size:16.5px;
  font-variant-numeric:tabular-nums;
}
html body .sapex-lib-d{
  width:14em; text-align:right; font-size:14px; color:rgba(18,18,18,.62);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
html body .sapex-lib-sub td{ padding-top:0; border-bottom:1px solid rgba(18,18,18,.10); }
html body .sapex-lib-sub ul{ list-style:none; margin:0; padding:0 0 6px 8px; }
html body .sapex-lib-sub li{
  display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;
  padding:5px 0; font-size:14px; color:rgba(18,18,18,.78);
}
html body .sapex-lib-foot{
  margin:18px 0 0; font-size:14.5px; color:rgba(18,18,18,.66); max-width:none;
}
html body .sapex-lib-foot strong{ color:var(--ink); }
@media (max-width:680px){
  html body .sapex-lib-d{ width:auto; font-size:13px; }
  html body table.sapex-lib th{ font-size:15px; }
}

/* ===== TASK 4: OTA capability block ====================================
   Same light-ground treatment as the dealer library: the section paints its
   own background and sets ink, because every page wrapper is .light-content
   and style.css would otherwise make these headings white on near-white. */
html body .sapex-ota{ background-color:#f7f7f5; color:var(--ink); padding:78px 0; }
html body .sapex-ota h2,html body .sapex-ota h3,html body .sapex-ota p{ color:var(--ink); }
html body .sapex-ota .sapex-kicker{ color:var(--accent); }
html body .sapex-ota-list{
  list-style:none; margin:28px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:22px; align-items:start;
}
html body .sapex-ota-list li{
  background:#fff; border:1px solid rgba(18,18,18,.10); border-radius:14px; padding:22px 24px;
}
html body .sapex-ota-list h3{ margin:0 0 8px; font-size:18px; font-weight:400; }
html body .sapex-ota-list p{ margin:0; font-size:14.5px; line-height:1.65; color:rgba(18,18,18,.72); }
html body .sapex-ota-foot{ margin:22px 0 0; font-size:14px; color:rgba(18,18,18,.62); max-width:none; }
html body .sapex-ota-line{ margin:14px 0 0; font-size:16px; line-height:1.65; }

/* The OTA block sits outside the page's root wrapper, so the page-scoped
   heading rule does not reach it. Two attempts to derive that wrapper from the
   markup did not match reliably, so the page's OWN clamp value is adopted here
   verbatim - the same declaration, not a size of my choosing. On /downloads/
   this brings the block to 48px, matching its five siblings; product pages have
   no .sapex-section-title siblings, so nothing there changes. */
html body .sapex-downloads-v2 ~ .sapex-ota .sapex-section-title,
html body .sapex-ota .sapex-section-title{
  font-size:clamp(32px, 3.2vw, 48px);
}

/* ===== TASK 5: partners structure ====================================== */
html body .sapex-partner-block{ background-color:#f7f7f5; color:var(--ink); padding:70px 0; }
html body .sapex-partner-block:nth-of-type(even){ background-color:#fff; }
html body .sapex-partner-block h2,html body .sapex-partner-block h3,
html body .sapex-partner-block p,html body .sapex-partner-block summary{ color:var(--ink); }
html body .sapex-partner-block .sapex-kicker{ color:var(--accent); }
html body .sapex-partner-lead{ margin:12px 0 0; max-width:65ch; color:rgba(18,18,18,.72); }
html body .sapex-partner-list{
  list-style:none; margin:26px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; align-items:start;
}
html body .sapex-partner-list li{
  background:#fff; border:1px solid rgba(18,18,18,.10); border-radius:14px; padding:20px 22px;
}
html body .sapex-partner-block:nth-of-type(even) .sapex-partner-list li{ background:#f7f7f5; }
html body .sapex-partner-list h3{ margin:0 0 6px; font-size:17px; font-weight:400; }
html body .sapex-partner-list p{ margin:0; font-size:14px; line-height:1.65; color:rgba(18,18,18,.70); }
html body .sapex-faq{ margin-top:22px; border-top:1px solid rgba(18,18,18,.12); }
html body .sapex-faq details{ border-bottom:1px solid rgba(18,18,18,.12); }
html body .sapex-faq summary{
  cursor:pointer; padding:16px 2px; font-size:16.5px; list-style:none;
}
html body .sapex-faq summary::-webkit-details-marker{ display:none; }
html body .sapex-faq summary::after{ content:'+'; float:right; color:var(--accent); font-size:19px; line-height:1; }
html body .sapex-faq details[open] summary::after{ content:'\2212'; }
html body .sapex-faq details p{ margin:0 0 16px; font-size:14.5px; color:rgba(18,18,18,.70); max-width:65ch; }

/* Admin-only draft marker on gated placeholder blocks. */
html body .sapex-draft-note{
  margin:0 0 18px; padding:12px 16px; border-radius:10px; max-width:none;
  background:rgba(196,0,0,.06); border:1px solid rgba(196,0,0,.32);
  font-size:13.5px; line-height:1.55; color:var(--ink);
}

/* --- Dealer Login as a button in the nav ---------------------------------
   It is not a page like its neighbours - it is a way in. Styled as the site's
   secondary button (transparent, 1px border, 999px radius) so a dealer's eye
   finds it without it shouting over the navigation.

   Tone-aware, because the header sits over both dark and light sections and
   the tone class already tracks that. Padding goes on the anchor, not the li,
   so the theme's before-span hover animation is untouched - and nothing here
   sets pointer-events, which is what broke the link the first time. */
html body .sapex-nav-dealer > a{
  display:inline-flex; align-items:center;
  padding:9px 20px; margin-left:6px;
  border:1px solid currentColor; border-radius:999px;
  line-height:1; transition:background-color .22s ease, border-color .22s ease;
}
html body .sapex-nav-dealer > a::after{ display:none; }
html body .sapex-nav-dealer > a:hover{
  background-color:color-mix(in srgb, currentColor 12%, transparent);
}
/* the tone classes already say what is behind the header */
html body.sapex-on-dark  .sapex-nav-dealer > a{ color:#fff; border-color:rgba(255,255,255,.55); }
html body.sapex-on-light .sapex-nav-dealer > a{ color:#141414; border-color:rgba(20,20,20,.38); }
html body.sapex-on-dark  .sapex-nav-dealer > a:hover{ border-color:#fff; }
html body.sapex-on-light .sapex-nav-dealer > a:hover{ border-color:#141414; }
@media (max-width:1100px){
  html body .sapex-nav-dealer > a{ padding:8px 14px; margin-left:0; }
}

/* The padding above computed to 0px: the theme sets it on
   header.classic-menu .flexnav li a, which outranks a plain .class > a.
   Matching that selector's shape rather than reaching for !important. */
html body header.classic-menu .flexnav li.sapex-nav-dealer > a{
  padding:9px 18px;
  display:inline-flex; align-items:center;
  border:1px solid currentColor; border-radius:999px; line-height:1;
}
html body header.classic-menu .flexnav li.sapex-nav-dealer > a .before-span{
  overflow:visible;
}

/* --- dealer library on narrow screens ------------------------------------
   Measured at 390px: the name column was squeezed to 98px while the count took
   91 and the date 117, so "Fibaro / Yubii Plugins" broke onto three lines and
   the header kept flex-direction:row, leaving a tall empty gap between the
   heading and the buttons.

   Below 680px each row becomes a block: the category on its own line, then the
   count and date together underneath. Same information, same order, no columns
   fighting for 390 pixels. */
@media (max-width:680px){
  html body .sapex-lib-head{ flex-direction:column; align-items:stretch; gap:16px; }
  html body .sapex-lib-cta{ width:100%; }
  html body .sapex-lib-cta .sapex-button{ flex:1 1 auto; justify-content:center; text-align:center; }

  html body table.sapex-lib,
  html body table.sapex-lib tbody,
  html body table.sapex-lib tr,
  html body table.sapex-lib th,
  html body table.sapex-lib td{ display:block; width:auto; }

  html body table.sapex-lib tr.sapex-lib-row{
    padding:14px 0; border-bottom:1px solid rgba(18,18,18,.10);
  }
  html body table.sapex-lib tr.sapex-lib-row:first-child{ border-top:1px solid rgba(18,18,18,.16); }
  html body table.sapex-lib th,
  html body table.sapex-lib td{ border:0; padding:0; }
  html body table.sapex-lib th{ font-size:16.5px; margin-bottom:4px; }

  /* count and date share one line beneath the name */
  html body .sapex-lib-n{
    display:inline-block; text-align:left; width:auto; margin-right:10px;
  }
  html body .sapex-lib-n::after{ content:' releases'; font-weight:400; opacity:.62; }
  html body .sapex-lib-d{
    display:inline-block; text-align:left; width:auto; white-space:normal;
  }
  html body .sapex-lib-sub td{ padding-top:8px; }
}

/* Two corrections to the block layout above, both found by looking at it:
   - the count and date stacked instead of sharing a line, because
     "table.sapex-lib td {display:block}" is (0,2,3) and out-ranked the
     (0,2,2) rule that made them inline-block
   - stray horizontal rules appeared between the name and the count: the
     per-cell borders were still painting inside a row that is now one block */
@media (max-width:680px){
  html body table.sapex-lib tr.sapex-lib-row th,
  html body table.sapex-lib tr.sapex-lib-row td{
    border:0 !important;
  }
  html body table.sapex-lib tr.sapex-lib-row td.sapex-lib-n,
  html body table.sapex-lib tr.sapex-lib-row td.sapex-lib-d{
    display:inline-block; width:auto; text-align:left;
  }
  html body table.sapex-lib tr.sapex-lib-row td.sapex-lib-n{ margin-right:10px; }
}
