/* =============================================================================
   Kino Flo — Warranty
   Figma frame 523:6623. All values measured, none guessed.
   =============================================================================

   TWO THINGS THIS PAGE DOES DIFFERENTLY FROM THE HOME PAGE, both deliberate:

   1. The measure is 1240 inside a 180 inset — not the 120/1360 the home and About pages use.
   2. The yellow is #ffdd00, the CORPORATE yellow, not Kino Flo's brand #FED208. That is what the
      design specifies and it is used consistently here (hero CTA, card figures, the Register band,
      the aside). Flagged for a decision rather than silently "corrected" — but it IS a divergence
      from the rest of the site.

   Selectors are prefixed `kw-` so nothing can reach the home page's `kf-` rules or vice versa.
   Every rule that could lose to a theme rule is qualified: `.kw-sec p`-style parent selectors are
   (0,1,1) and beat a single class, which has silently decided a value six times on this project.
   ============================================================================= */

.kw-sec {
  /* Kino Flo brand values, matching --kf-yellow / the ink used on home and About. These were
     #ffdd00 and #111111 — the corporate yellow (PMS 108 C) and a slightly lighter ink — which made
     this the only page in the build running its own pair. The Figma node specifies #fed208. */
  --kw-yellow: #fed208;
  --kw-ink:    #161616;
  /* Translucent so the hero video reads through the coverage cards. 0.78 was chosen against the
     WORST-CASE backdrop, not the average frame: the hero ground is #111 and the video already sits
     at opacity .20, so the brightest a card can ever sit on is rgb(65,65,65). At 0.78 the card
     renders rgb(30,30,30) against that, keeping the small print at 5.9:1 and the yellow figure at
     11.5:1 — both clear of AA. Contrast is not what bounds this; card definition is. Below about
     0.6 the card edge starts disappearing into a bright frame. */
  --kw-card:   rgba(20, 20, 20, .78);
  --kw-mute:   #8a8a8a;
  --kw-line:   #e4e4e4;
}

/* The band inset. Sections are full-width; the measure is set on the container. */
.kw-sec > .uk-container {
  max-width: 1600px; margin-inline: auto;
  padding-inline: 180px; box-sizing: border-box;
}
.kw-sec .uk-grid { margin-left: 0; }
.kw-sec .uk-grid > * { padding-left: 0; }

/* `.uk-h6` is on the same element and beats a lone `.kw-eyebrow`, so the eyebrow rendered 15/21
   instead of 11/13 — 8px per section, silently. Qualified. */
.kw-sec .kw-eyebrow,
.kw-sec .uk-h6.kw-eyebrow {
  font: 700 11px/13px "Roboto Condensed", sans-serif; letter-spacing: .13em;
  text-transform: uppercase; margin: 0 0 13px;
}

/* THE PANEL LAST-CHILD RESET — now mostly historical.
   Most of these blocks are native `text` elements whose class sits ON the panel rather than on a
   <p> inside it, so the `> ` child combinator was dropped: `.uk-panel > .kw-x` cannot match an
   element that IS the panel. The reset below still applies to the panel's inner paragraph, which
   is why these rules are still qualified.
   YOOtheme wraps every `text` element's markup in `.uk-panel`, and theme.1.css carries
   `.uk-panel > :last-child { margin-bottom: 0 }` at (0,2,0) — the same weight as a two-class rule
   of mine, broken by load order in the theme's favour. Because each block here is the only child of
   its panel, every bottom margin I set was being zeroed and the hero came out 100px short.
   Three-class selectors win outright. The values are the design's own gaps. */
.kw-sec .kw-hero__sub  { margin-bottom: 34px; }
.kw-sec .kw-hero__cta  { margin-bottom: 56px; }
.kw-sec .uk-panel > .kw-cards      { margin-bottom: 18px; }
/* Same reset, same fix, for every other block that needs a gap under it. Values are the design's
   own measured gaps, not round numbers:
     coverage  table1 -> table2 = 38, table2 -> scope = 16
     covered   head   -> columns = 54
     support   sub -> buttons 46, buttons -> proof 76, proof -> marks 54, marks -> note 45      */
.kw-sec .uk-panel > .kw-t          { margin-bottom: 38px; }
/* the second table is followed by the scope note, which brings its own 16px top */
.kw-sec .uk-panel > .kw-t--2       { margin-bottom: 0; }
.kw-sec .uk-panel > .kw-cols       { margin-bottom: 0; }
.kw-sec .kw-support__sub   { margin-bottom: 46px; }
.kw-sec .uk-panel > .kw-support__btns  { margin-bottom: 76px; }
.kw-sec .uk-panel > .kw-support__groups { margin-bottom: 0; }
.kw-sec .kw-claim__sub     { margin-bottom: 0; }
.kw-sec .kw-terms__sub     { margin-bottom: 34px; }
.kw-sec .kw-register__body { margin-bottom: 15px; }

/* THE SAME GAPS, FOR THE BLOCKS THAT ARE NOW CUSTOM ELEMENTS.
   Converting the page to native Builder elements changed the wrapper: YOOtheme puts a `text`
   element's markup inside `.uk-panel`, but a custom element renders its own root straight into the
   column. So every `.uk-panel > …` rule above silently stopped matching these — and the
   `.uk-panel > :last-child` reset stopped applying too, which is why a plain class is enough here
   and no extra specificity is needed. Values are unchanged; only the selector moved. */
.kw-sec .kw-cards            { margin-bottom: 18px; }
.kw-sec .kw-t                { margin-bottom: 38px; }
.kw-sec .kw-t--2             { margin-bottom: 0; }
.kw-sec .kw-cols             { margin-bottom: 0; }
.kw-sec .kw-support__groups  { margin-bottom: 0; }
/* ...and the same again for the CTAs, now native `button` elements rather than <a> in a text block */
.kw-sec .kw-support__btns    { margin-bottom: 76px; }
.kw-sec .kw-hero__cta        { margin-bottom: 56px; }
.kw-sec h2.kw-h2 {
  font: 700 40px/48px "Roboto Condensed", sans-serif; color: var(--kw-ink); margin: 0;
}

/* buttons — 52/50 pills, r100 */
.kw-sec a.kw-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 26px; border-radius: 100px; text-decoration: none; box-sizing: border-box;
  font: 700 15px/52px "Roboto Condensed", sans-serif; white-space: nowrap;
  transition: background-color .18s ease, color .18s ease;
}
.kw-sec a.kw-btn--yellow { background: var(--kw-yellow); color: var(--kw-ink); }
.kw-sec a.kw-btn--yellow:hover { background: #e8c900; }
.kw-sec a.kw-btn--ink { background: var(--kw-ink); color: var(--kw-yellow); height: 50px; line-height: 50px; }
.kw-sec a.kw-btn--ink:hover { background: #000; }
.kw-sec a.kw-btn:focus-visible { outline: 2px solid var(--kw-ink); outline-offset: 3px; }

/*
 * The two claim buttons sat flush against each other. They are a UIkit grid with
 * uk-grid-small, whose gutter comes from a negative margin on the grid and matching
 * padding on the children - and measured on the page both are 0, so the gutter
 * never applied here and the pills touched.
 *
 * A flex gap on the row is independent of that mechanism, so it works whether or
 * not UIkit's grid CSS is in play, and it cannot double up with a gutter that is
 * not there. Reported via Userback on /warranty-v2/ before the launch rename.
 */
.kw-sec .kw-support__btns .uk-grid {
	gap: 16px;
}

/* ---- 01 hero · 581 on #111111 ------------------------------------------- */
/* `isolation: isolate` makes the hero its own stacking context so the media layer below can use a
   negative z-index without dropping behind the band's own background. */
/* `isolation`/`overflow` are gone with the custom layer: the theme adds `.uk-cover-container`
   (position:relative, overflow:hidden) and puts the content container on `uk-position-relative`, so
   the video sits under the copy without a negative z-index to contain. */
.kw-sec.kw-hero { background-color: #111111; }
.kw-sec.kw-hero > .uk-container { padding-block: 67px; }

/* The design stacks two fills on this band: solid #111111, then a VIDEO paint at 20% opacity with
   scaleMode FILL. Reproduced as a real <video> at the same opacity over the same ground rather than
   as a scrim over a full-opacity video — those are not the same thing. A scrim darkens uniformly;
   20% opacity keeps the highlights and discards the mid-tones, which is why the footage was chosen
   for bright-shape-on-dark in the first place.

   `isolation: isolate` contains the layer so it cannot reach the copy, and z-index on the container
   puts the text above it — the same stacking bug that greyed out the About headline mid-sentence. */
/* z-index: -1, NOT 0. The layer is absolutely positioned and the copy around it is static, so at
   z-index 0 it painted over every word — positioned elements outrank static ones regardless of DOM
   order. Dropping it below the static flow is what puts the text back on top, and the isolate above
   is what stops -1 falling through the band's background.
   `inset: 0` resolves against .kw-hero. It briefly resolved against .uk-container instead — when
   that had position: relative — and the layer collapsed to zero height. */
/* YOOtheme's .uk-panel wrapper is `position: relative`, and because its only child here is
   absolutely positioned the panel itself computes to ZERO height. That made it the containing
   block and collapsed the media layer to 1240x0. Making this one wrapper static lets the layer
   resolve against .kw-hero instead, which is the band it is supposed to cover. */
/* The hero's footage is the SECTION'S OWN background video (`section.video`). The theme emits
   `<video uk-cover autoplay muted loop playsinline>` as a direct child of the band and raises the
   container above it with `uk-position-relative`, so cover sizing and stacking are the theme's
   problem now, not ours.

   This one rule is all that stays bespoke, and it is the one thing native cannot express: the
   design's second fill is the VIDEO ITSELF at 20%, not a scrim over it. `media_overlay` would
   darken uniformly; 20% opacity keeps the highlights and drops the mid-tones, which is why this
   footage was chosen for bright-shape-on-dark. Same result as before, one declaration instead of
   an element plus a layer stylesheet. */
.kw-hero > video {
  opacity: 0.2;
}

.kw-hero .kw-eyebrow { color: var(--kw-mute); margin-bottom: 13px; }
.kw-hero h1.kw-h1 {
  font: 700 46px/54px "Roboto Condensed", sans-serif; color: #fff; margin: 0 0 20px; max-width: 900px;
}
.kw-hero .kw-hero__sub {
  font: 400 17px/27px "Roboto", sans-serif; color: #b9b9b9; margin: 0 0 34px; max-width: 860px;
}
.kw-hero .kw-hero__cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 0 0 56px; }
.kw-hero .kw-hero__ctanote { font: 400 14px/17px "Roboto", sans-serif; color: var(--kw-mute); }

/* five 232x118 cards on a 252 pitch = 20px gutter */
.kw-cards {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;
  list-style: none; margin: 0 0 18px; padding: 0;
}
.kw-cards .kw-card {
  background: var(--kw-card); border-radius: 6px; min-height: 118px;
  padding: 20px; box-sizing: border-box; display: flex; flex-direction: column;
}
.kw-card .kw-card__big {
  font: 700 26px/31px "Roboto Condensed", sans-serif; color: var(--kw-yellow); margin-bottom: 9px;
}
.kw-card .kw-card__small { font: 400 12px/18px "Roboto", sans-serif; color: #9a9a9a; }
.kw-hero .kw-hero__note { font: 500 12px/15px "Roboto", sans-serif; color: #6b6b6b; margin: 0; }

/* ---- 02 coverage · 942 on #ffffff --------------------------------------- */
.kw-sec.kw-coverage { background-color: #fff; }
.kw-sec.kw-coverage > .uk-container { padding-block: 64px; }
.kw-coverage .kw-eyebrow { color: #6b6b6b; }
.kw-coverage h2.kw-h2 { margin-bottom: 34px; }

.kw-t { margin: 0 0 34px; }
.kw-t .kw-t__title { font: 700 14px/17px "Roboto Condensed", sans-serif; color: var(--kw-ink); margin: 0 0 17px; }
/* wide content scrolls inside its own box — the page body must never scroll sideways */
.kw-t__scroll { overflow-x: auto; }
.kw-t table { width: 100%; border-collapse: collapse; min-width: 720px; }
.kw-t thead th {
  background: var(--kw-ink); color: #fff; text-align: left;
  font: 700 12px/15px "Roboto Condensed", sans-serif; letter-spacing: .04em;
  padding: 16px 18px; height: 48px; box-sizing: border-box;
}
.kw-t tbody td {
  font: 400 13px/16px "Roboto", sans-serif; color: #424242;
  padding: 14px 18px; height: 44px; box-sizing: border-box; border: 0;
}
/* zebra from the design: odd rows white, even #f7f7f7 */
.kw-t tbody tr:nth-child(even) td { background: #f7f7f7; }
.kw-t tbody td.kw-t__val { font-weight: 700; color: var(--kw-ink); }
.kw-t .kw-t__fn { font: 400 12px/18px "Roboto", sans-serif; color: #575757; margin: 12px 0 0; }
.kw-t .kw-t__fn + .kw-t__fn { margin-top: 4px; }
.kw-coverage .kw-scope { font: 400 13px/20px "Roboto", sans-serif; color: #575757; margin: 16px 0 0; }

/* column positions from the design: 18 / 398 / 668 / 928 within the 1240 table */
.kw-t--4 thead th:nth-child(1), .kw-t--4 tbody td:nth-child(1) { width: 30.6%; }
.kw-t--4 thead th:nth-child(2), .kw-t--4 tbody td:nth-child(2) { width: 21.8%; }
.kw-t--4 thead th:nth-child(3), .kw-t--4 tbody td:nth-child(3) { width: 21%; }
.kw-t--2 thead th:nth-child(1), .kw-t--2 tbody td:nth-child(1) { width: 74.8%; }

/* ---- 03 register · 300 on #ffdd00 --------------------------------------- */
.kw-sec.kw-register { background-color: var(--kw-yellow); }
.kw-sec.kw-register > .uk-container { padding-block: 49px 50px; }
.kw-register .uk-grid > .kw-register__copy  { width: 61.29%; }   /* 760 / 1240 */
.kw-register .uk-grid > .kw-register__aside { width: 33.87%; margin-left: 4.84%; }  /* 420 + 60 gutter */
.kw-register .kw-eyebrow { color: #7a6a00; margin-bottom: 15px; }
.kw-register h2.kw-h2 { font-size: 36px; line-height: 44px; margin: 0 0 16px; max-width: 742px; }
.kw-register .kw-register__body {
  font: 400 15px/24px "Roboto", sans-serif; color: #3a3200; margin: 0 0 15px; max-width: 760px;
}

.kw-aside {
  background: var(--kw-ink); border-radius: 8px; padding: 22px 24px 20px; box-sizing: border-box;
  max-width: 420px; margin-left: auto;
}
.kw-aside .kw-aside__title {
  font: 700 11px/13px "Roboto Condensed", sans-serif; letter-spacing: .12em;
  color: var(--kw-yellow); margin: 0 0 19px;
}
.kw-aside ul { list-style: none; margin: 0; padding: 0; }
.kw-aside li {
  display: grid; grid-template-columns: 1fr auto 22px auto; align-items: center; gap: 8px;
  /* 40px row pitch. The ROW is 23 tall, not 16 — the "4 yrs" value is 19/23 and sets the height,
     which is why a 16px assumption ran the panel 29px long. 23 + 11 + 1 rule + 5 = 40. */
  padding: 0 0 11px; margin-bottom: 5px; border-bottom: 1px solid #2a2a2a;
}
.kw-aside li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.kw-aside .kw-aside__label { font: 500 13px/16px "Roboto", sans-serif; color: #fff; }
.kw-aside .kw-aside__from  { font: 400 14px/17px "Roboto", sans-serif; color: var(--kw-mute); }
.kw-aside .kw-aside__arrow { font: 700 14px/17px "Roboto Condensed", sans-serif; color: #6b6b6b; text-align: center; }
.kw-aside .kw-aside__to    { font: 700 19px/23px "Roboto Condensed", sans-serif; color: var(--kw-yellow); }
.kw-aside .kw-aside__foot  { font: 500 12px/16px "Roboto", sans-serif; color: #6b6b6b; margin: 14px 0 0; }

/* ---- 04 covered · 516 on #f2f2f2 ---------------------------------------- */
.kw-sec.kw-covered { background-color: #f2f2f2; }
.kw-sec.kw-covered > .uk-container { padding-block: 64px; }
.kw-covered .kw-eyebrow { color: #6b6b6b; }
.kw-covered h2.kw-h2 { margin-bottom: 54px; }
.kw-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.kw-cols .kw-col__h {
  font: 700 17px/20px "Roboto Condensed", sans-serif; color: var(--kw-ink); margin: 0 0 14px;
}
.kw-cols ul { list-style: none; margin: 0; padding: 0; }
.kw-cols li {
  display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start;
  font: 400 14px/20px "Roboto", sans-serif; color: #424242; margin-bottom: 18px;
}
.kw-mark { font: 700 14px/20px "Roboto", sans-serif; }
.kw-mark--yes { color: #1c7a4a; }
.kw-mark--no  { color: #a02020; }

/* ---- 05 claim · 446 on #ffffff ------------------------------------------ */
.kw-sec.kw-claim { background-color: #fff; }
.kw-sec.kw-claim > .uk-container { padding-block: 64px 56px; }  /* design closes 56 under the cards, not 64 */
.kw-claim .kw-claim__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.kw-claim .kw-eyebrow { color: #6b6b6b; }
.kw-claim .kw-claim__sub {
  font: 400 15px/24px "Roboto", sans-serif; color: #575757; margin: 20px 0 0; max-width: 900px;
}
.kw-sec a.kw-link {
  font: 700 15px/18px "Roboto Condensed", sans-serif; color: var(--kw-ink); text-decoration: none;
  white-space: nowrap;
}
.kw-sec a.kw-link:hover { text-decoration: underline; }

/* Steps — Figma 523:6812. The design has always specified CARDS here; the build rendered the copy
   bare on the band, which is why the numbers read as stray labels rather than steps.
     card    232x166, #f7f7f7, r6, 20px padding, on a 252 pitch -> a 20px gutter, not 30
     badge   34px circle, ink ground, yellow numeral, 20px in from the card's top-left
     rhythm  badge ends 278, title 290 (+12), title ends 309, body 326 (+17)
   5x232 + 4x20 = 1240, exactly the page measure, so `repeat(5, 1fr)` with a 20px gap reproduces
   the design's card width without hardcoding it. */
.kw-steps {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;
  /* 42, not 62: the design puts the card row at y=224 and the sub ends at 182 here. The old 62
     was tuned for the un-carded steps, which were 34px shorter. */
  list-style: none; margin: 42px 0 0; padding: 0;
  /* the badge numeral comes from here, not from a per-item field, so adding or reordering a step
     in the Builder renumbers the row automatically */
  counter-reset: kw-step;
}
.kw-steps li { counter-increment: kw-step; }
.kw-step__n::before { content: counter(kw-step, decimal-leading-zero); }
.kw-steps li {
  display: flex; flex-direction: column;
  background: #f7f7f7; border-radius: 6px;
  min-height: 166px;
  /* 13 at the bottom, not 20: the design's card is a fixed 166 and its longest body (3 lines at
     17) ends 13 short of the edge. A symmetric 20 made every card 173, since the grid stretches
     the row to its tallest. min-height still lets a card grow if copy ever outruns the design. */
  padding: 20px 20px 13px;
  box-sizing: border-box;
}
.kw-step__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 100px;
  background: var(--kw-ink); color: var(--kw-yellow);
  font: 700 12px/1 "Roboto Condensed", sans-serif; letter-spacing: .06em;
  margin-bottom: 12px;
  /* This IS a column flex container, so the cross axis is horizontal and a flex item would stretch
     to the full card width — the badge has to opt out or it renders as a 192px pill. */
  align-self: flex-start; flex: none;
}
.kw-step__t { font: 700 14px/19px "Roboto Condensed", sans-serif; color: var(--kw-ink); margin-bottom: 17px; }
.kw-step__b { font: 400 12px/17px "Roboto", sans-serif; color: #575757; }

/* ---- 06 terms · 700 on #f2f2f2 ------------------------------------------ */
.kw-sec.kw-terms { background-color: #f2f2f2; }
.kw-sec.kw-terms > .uk-container { padding-block: 64px 33px; }
.kw-terms .kw-eyebrow { color: #6b6b6b; }
.kw-terms .kw-terms__sub {
  font: 400 15px/24px "Roboto", sans-serif; color: #575757; margin: 12px 0 34px; max-width: 900px;
}
.kw-sec .kw-terms__sub { margin-top: 12px; }
.kw-acc { border-top: 1px solid var(--kw-line); }
.kw-acc__item { border-bottom: 1px solid var(--kw-line); }
.kw-acc__item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px 0; cursor: pointer; list-style: none;
  font: 700 16px/20px "Roboto Condensed", sans-serif; color: var(--kw-ink);
}
.kw-acc__item > summary::-webkit-details-marker { display: none; }
.kw-acc__item > summary:focus-visible { outline: 2px solid var(--kw-ink); outline-offset: 2px; }
/* the +/− is drawn, not typed, so it cannot be selected or read aloud */
.kw-acc__sign { position: relative; width: 14px; height: 14px; flex: 0 0 14px; }
.kw-acc__sign::before, .kw-acc__sign::after {
  content: ""; position: absolute; background: var(--kw-ink);
  transition: transform .2s ease, opacity .2s ease;
}
.kw-acc__sign::before { inset: 6px 0 6px 0; height: 2px; }
.kw-acc__sign::after  { inset: 0 6px 0 6px; width: 2px; }
.kw-acc__item[open] .kw-acc__sign::after { transform: rotate(90deg); opacity: 0; }
.kw-acc__body { padding: 0 0 20px; max-width: 900px; }
.kw-acc__body p { font: 400 14px/22px "Roboto", sans-serif; color: #424242; margin: 0 0 12px; }
.kw-acc__body p:last-child { margin-bottom: 0; }

/* The exclusions clause is an (i)–(x) list in the source document and the numbering is referenced
   elsewhere by numeral, so it is a real ordered list with roman markers — not decoration. */
.kw-acc__body ol.kw-roman { margin: 0 0 12px; padding-left: 30px; list-style: lower-roman; }
.kw-acc__body ol.kw-roman li {
  font: 400 14px/22px "Roboto", sans-serif; color: #424242; margin-bottom: 8px; padding-left: 4px;
}
.kw-acc__body ol.kw-roman li::marker { color: #6b6b6b; }

/* Two clauses are written in full caps in the source and stay that way — that emphasis is a legal
   convention, not a styling choice, so it is not "fixed". All-caps costs legibility, so it gets a
   slightly looser measure and line-height to compensate rather than being set solid. */
.kw-acc__body p.kw-legal {
  font: 500 13px/22px "Roboto", sans-serif; color: #333; letter-spacing: .01em;
  background: #f7f7f7; border-left: 3px solid #d8d8d8; padding: 14px 16px; max-width: 72ch;
}

.kw-acc__body a { color: inherit; text-decoration-color: var(--kw-yellow); text-underline-offset: 3px; }
.kw-acc__body a:hover { text-decoration-color: currentColor; }
.kw-acc__item--pending > summary .kw-acc__label { color: #6b6b6b; }
.kw-acc__pending {
  font: 500 13px/20px "Roboto", sans-serif !important; color: #9a5b00 !important;
  background: #fff6e0; border-left: 3px solid #e0a94a; padding: 10px 14px;
}
@media (prefers-reduced-motion: reduce) {
  .kw-acc__sign::before, .kw-acc__sign::after { transition: none; }
}

/* ---- 07 downloads · 331 on #f2f2f2 -------------------------------------- */
.kw-sec.kw-downloads { background-color: #f2f2f2; }
.kw-sec.kw-downloads > .uk-container { padding-block: 56px 83px; }
.kw-downloads .kw-eyebrow { color: #6b6b6b; }
.kw-downloads h2.kw-h2 { margin-bottom: 26px; }
.kw-doc {
  display: flex; align-items: center; gap: 22px;
  background: #fff; border-radius: 6px; padding: 24px 26px;
}
.kw-doc .kw-doc__kind {
  flex: 0 0 auto; font: 700 11px/13px "Roboto Condensed", sans-serif; letter-spacing: .1em;
  color: #fff; background: var(--kw-ink); padding: 8px 10px; border-radius: 3px;
}
.kw-doc .kw-doc__body { flex: 1 1 auto; min-width: 0; }
.kw-doc .kw-doc__title { display: block; font: 700 17px/20px "Roboto Condensed", sans-serif; color: var(--kw-ink); }
.kw-doc .kw-doc__meta  { display: block; font: 400 13px/18px "Roboto", sans-serif; color: #575757; margin-top: 4px; }
.kw-doc a.kw-doc__dl {
  flex: 0 0 auto; font: 700 14px/17px "Roboto Condensed", sans-serif;
  color: var(--kw-ink); text-decoration: none;
}
.kw-doc a.kw-doc__dl:hover { text-decoration: underline; }
/* no file yet: say so rather than offer a link to nothing */
.kw-doc .kw-doc__dl--off { flex: 0 0 auto; font: 500 13px/17px "Roboto", sans-serif; color: #9a5b00; }
.kw-doc--pending { border: 1px dashed #d8d2c0; }

/* ---- 08 support CTA · 560 on #f9f9f9 ------------------------------------ */
.kw-sec.kw-support { background-color: #f9f9f9; }
.kw-sec.kw-support > .uk-container { padding-block: 80px 60px; text-align: center; }
.kw-support .kw-support__h {
  font: 700 34px/42px "Roboto Condensed", sans-serif; color: var(--kw-ink);
  margin: 0 auto 20px; max-width: 900px; text-wrap: balance;
}
.kw-support .kw-support__sub {
  font: 400 15px/24px "Roboto", sans-serif; color: #575757;
  /* `margin: 0 auto` here was zeroing the 46px gap set earlier in this file — same trap the
     buttons hit. Only the horizontal centring belongs on this rule. */
  margin-inline: auto;
  /* the design gives this line 800px and one line; 640 wrapped it, and the extra 21px pushed
     every element below it down — the buttons by 16, the note by 26 */
  max-width: 800px;
}
/* The support headline and buttons are native `headline` and `button` elements now, so neither is
   wrapped in `.uk-panel` and the rules above no longer reach them. The button element also brings
   its own grid and `uk-text-center`, which makes the old flex-and-centre block redundant — and its
   `margin: 0` shorthand was silently zeroing the 76px gap set earlier in this file. */
.kw-sec .kw-support__h { margin-bottom: 16px; }
/* Yellow, matching the design: Figma 640:219 fills `cta btn primary` #fed208 with a #161616
   label. It had been ink-on-white, which made the page's main warranty CTA the one button that
   did not look like the brand's primary action. Same treatment as .kw-btn--yellow above — the
   hero and this CTA are the two yellow pills the design shows. */
.kw-sec a.kw-btn--primary { background: var(--kw-yellow); color: var(--kw-ink); }
.kw-sec a.kw-btn--primary:hover { background: #e8c900; color: var(--kw-ink); }
/* NO OUTLINE ON A FILLED BUTTON. Converting these CTAs to native YOOtheme button elements added
   `.uk-button-default`, and theme.1.css gives that `border: 2px solid #212c34` — so every solid
   pill picked up a dark ring it never had as a plain <a class="kw-btn">. The outline variant is
   `--secondary`, which sets its own border deliberately below. */
.kw-sec a.kw-btn--primary,
.kw-sec a.kw-btn--yellow,
.kw-sec a.kw-btn--ink,
.kw-sec a.kw-btn--secondary:hover {
  border: 0;
}
/* The claim CTA. Figma 523:6812 draws it as a dark PILL with a white label; as a native button
   element it was rendering square, in ink-on-ink, with the text-link underline hover still
   attached — dark text on a dark ground. */
.kw-sec a.kw-btn--dark {
  background: var(--kw-ink);
  color: #fff;
  border: 0;
  border-radius: 30px;
  text-decoration: none;
}
.kw-sec a.kw-btn--dark:hover {
  background: #000;
  color: #fff;
  text-decoration: none;
}
.kw-sec a.kw-btn--secondary { background: transparent; color: var(--kw-ink); border: 1px solid var(--kw-ink); }
.kw-sec a.kw-btn--secondary:hover { background: var(--kw-ink); color: #fff; }
/* .kw-marks and .kw-support__note removed with the old flat strip and the footnote. */

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 1279px) {
  .kw-sec > .uk-container { padding-inline: 60px; }
  .kw-cards { grid-template-columns: repeat(3, 1fr); }
  .kw-steps { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
}
@media (max-width: 959px) {
  /* 24, matching home and About — the three pages shared a design but not a gutter, so the text
     axis moved 8px whenever you crossed between them. */
  .kw-sec > .uk-container { padding-inline: 24px; }
  .kw-sec.kw-hero > .uk-container,
  .kw-sec.kw-coverage > .uk-container,
  .kw-sec.kw-covered > .uk-container,
  .kw-sec.kw-claim > .uk-container,
  .kw-sec.kw-terms > .uk-container,
  .kw-sec.kw-support > .uk-container { padding-block: 44px; }
  .kw-hero h1.kw-h1 { font-size: 32px; line-height: 38px; }
  .kw-sec h2.kw-h2 { font-size: 28px; line-height: 34px; }
  .kw-cards { grid-template-columns: repeat(2, 1fr); }
  /* `gap`, not `row-gap`: the base rule's 20px column gap survived otherwise, leaving the
     computed value as `28px 20px` on a single-column grid — inert, but it says the mobile case
     was never authored. */
  .kw-steps { grid-template-columns: 1fr; gap: 28px; margin-top: 36px; }
  .kw-cols { grid-template-columns: 1fr; gap: 34px; }
  .kw-register .uk-grid > .kw-register__copy,
  .kw-register .uk-grid > .kw-register__aside { width: 100%; }
  .kw-aside { margin: 26px 0 0; max-width: none; }
  .kw-claim .kw-claim__head { flex-direction: column; }
  .kw-doc { flex-wrap: wrap; }
}
@media (max-width: 639px) {
  .kw-cards { grid-template-columns: 1fr; }
}

/* ---- mobile ------------------------------------------------------------
   From _migration/checks/audit-responsive.mjs at 375 / 390. The page has no layout faults at those
   widths — the tables already scroll inside .kw-t__scroll — so this is tap targets only.

   Standalone calls to action get a 44px hit area. Links inside a sentence deliberately do NOT:
   WCAG 2.5.8 exempts targets in a block of text, and padding them out would break the line
   spacing of the prose they sit in. */
@media (max-width: 767px) {
  .kw-claim__head .kw-link,
  .kw-doc__dl,
  .kw-hero__cta .kw-btn,
  .kw-support__btns .kw-btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ---- support CTA: the "rest of Support" strip -----------------------------
   Figma 640:219, recorded in _migration/warranty-v2/support-cta-spec.json.

   Replaces a flat row of six uppercase labels on #efefef placeholder tiles. Those tiles read as
   loading skeletons, nothing signalled the labels were links, and both greys failed WCAG AA:
   the labels at 2.97:1 and the footnote at 2.43:1. Now two labelled groups of real link rows.

   The design's row pitch is 36, which suits a mouse. Below the desktop breakpoint the rows go to
   44 so the tap target clears the minimum — the audit that found the rest of this page's mobile
   faults would otherwise flag every one of these six. */
/* Design: eyebrow ends at 356, the group headings start at 374 — 18px. 8px put the eyebrow
   almost on top of "Get help". !important because YOOtheme's `* + .uk-margin` rule adds 20px of
   its own above the group block and cannot be beaten on specificity. */
.kw-support .kw-support__eyebrow {
  margin: 0 0 18px !important;
  text-align: left;
}
.kw-support .kw-support__groups {
  margin-top: 0 !important;
}
.kw-support__groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 120px;
  text-align: left;
}
.kw-support__grouph {
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--kw-line, #e5e5e5);
  font:
    700 15px/18px "Roboto Condensed",
    sans-serif;
  color: var(--kw-ink, #161616);
  text-transform: none;
}
.kw-links {
  margin: 0;
  padding: 0;
  list-style: none;
}
.kw-links li + li {
  border-top: 1px solid var(--kw-line, #e5e5e5);
}
/* The rule sits ON the row boundary, as in the design, rather than adding to it. A plain border
   pushed each row down a pixel and the pitch came out 37; shrinking the later rows did not help,
   because the pitch is set by the height of the row ABOVE plus the border. */
.kw-links li + li {
  margin-top: -1px;
}
.kw-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 36px;
  /* #414243, not the old #8a8b8d: 9.57:1 against the band where the tile label managed 2.97 */
  color: #414243;
  font:
    400 15px/18px "Roboto",
    sans-serif;
  text-decoration: none;
}
/* Yellow highlighter on hover — the same treatment as the home page's .kf-hl. A background-size
   transition rather than a pseudo-element: one compositor-friendly property, no extra DOM, and it
   degrades to a plain highlight when motion is refused. The stroke sits low and covers ~42% of the
   line box, where a real marker lands relative to a baseline.

   NOT `align-self: flex-start`, which the home rule carries. That rule guards against a stretched
   flex item in a COLUMN container; these rows are a horizontal flex with align-items: center, so
   the span is already content-width and align-self would only shunt the label to the top of the
   row. Same effect, different container — the declaration does not transfer. */
.kw-links a > span:first-child {
  background-image: linear-gradient(var(--kw-yellow), var(--kw-yellow));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 0 42%;
  transition: background-size 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.kw-links a:hover > span:first-child,
.kw-links a:focus-visible > span:first-child {
  background-size: 100% 42%;
}
.kw-links a:hover {
  color: var(--kw-ink, #161616);
}
/* the highlight already shows focus, so the outline only needs to be the keyboard-visible fallback */
.kw-links a:focus-visible {
  outline: 2px solid var(--kw-ink, #161616);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .kw-links a > span:first-child {
    transition: none;
  }
}
.kw-links__arrow {
  color: var(--kw-ink, #161616);
  flex: none;
}
@media (max-width: 767px) {
  .kw-support__groups {
    grid-template-columns: 1fr;
    row-gap: 28px;
  }
  .kw-links a {
    min-height: 44px;
  }
}

/* ---- coverage tables: stacked on mobile ---------------------------------
   Above 768 the table stays a table and scrolls inside .kw-t__scroll. Below it, horizontal
   scrolling was hiding the Period column — the actual answer — behind a swipe, so each row becomes
   a card: the first cell is the card's heading and every other cell prints its column name in
   front of the value, from the data-label the template writes.

   The header row is visually hidden rather than display:none, so it stays in the accessibility
   tree; the template's explicit roles keep the whole thing a table for assistive tech even though
   the boxes are no longer table boxes. */
@media (max-width: 767px) {
  .kw-t__scroll {
    overflow-x: visible;
  }
  .kw-t table,
  .kw-t tbody,
  .kw-t tr,
  .kw-t td {
    display: block;
    width: auto;
  }
  /* the 720px floor is what forces the desktop scroll; stacked, it is what kept the last column
     off screen even after the rows became cards */
  .kw-t table {
    min-width: 0;
  }
  /* The desktop COLUMN percentages (.kw-t--4 td:nth-child(1) { width: 30.6% } and friends) keep
     applying once the cells are blocks — which squeezed each value into a third of the card and
     wrapped "Indoor-rated" onto two lines. They have to be unset, not just overridden by the
     shorthand above, because they are more specific. */
  .kw-t--4 tbody td:nth-child(1),
  .kw-t--4 tbody td:nth-child(2),
  .kw-t--4 tbody td:nth-child(3),
  .kw-t--2 tbody td:nth-child(1) {
    width: auto;
  }
  /* striping is set on the CELLS, and it reads as noise once every row is its own bordered card */
  .kw-t tbody tr:nth-child(even) td {
    background: transparent;
  }
  .kw-t thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .kw-t tbody tr {
    border: 1px solid var(--kw-line, #e4e4e4);
    border-radius: 6px;
    padding: 4px 16px 6px;
    margin-bottom: 12px;
    background: #fff;
  }
  .kw-t tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding: 10px 0;
    border-bottom: 1px solid var(--kw-line, #e4e4e4);
    text-align: right;
  }
  .kw-t tbody td:last-child {
    border-bottom: 0;
  }
  .kw-t tbody td::before {
    content: attr(data-label);
    flex: 0 1 auto;
    text-align: left;
    font:
      700 12px/16px "Roboto Condensed",
      sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--kw-mute, #8a8a8a);
  }
  /* the first cell names the row, so it reads as the card's heading rather than a label/value pair */
  .kw-t tbody td:first-child {
    justify-content: flex-start;
    text-align: left;
    padding-top: 12px;
    font:
      700 16px/22px "Roboto Condensed",
      sans-serif;
    color: var(--kw-ink, #161616);
  }
  .kw-t tbody td:first-child::before {
    content: none;
  }
  /* zebra striping reads as noise once every row is its own card */
  .kw-t tbody tr:nth-child(even) {
    background: #fff;
  }

  /* On the four-column table the FIRST cell does not identify the row — the four rows are
     Fixture/Indoor, Fixture/Outdoor, LED engine/Indoor, LED engine/Outdoor, so stacking produced
     four cards headed "Fixture", "Fixture", "LED engine", "LED engine". What names a row is
     component AND rating together, so the rating is promoted into the card head as a subtitle
     rather than shown as one more label/value pair. */
  .kw-t--4 tbody td:nth-child(2) {
    justify-content: flex-start;
    text-align: left;
    padding-top: 0;
    padding-bottom: 12px;
    font:
      500 14px/18px "Roboto",
      sans-serif;
    color: var(--kw-mute, #8a8a8a);
  }
  .kw-t--4 tbody td:nth-child(2)::before {
    content: none;
  }
  /* the head is one unit, so only the rating carries the rule that closes it */
  .kw-t--4 tbody td:first-child {
    border-bottom: 0;
    padding-bottom: 2px;
  }
}

/* ---- coverage cards: a rail on mobile -----------------------------------
   Stacked, these five cards ran 670px down the hero — most of a phone screen spent on a list
   nobody reads top to bottom. As a rail they read as one glanceable row and the hero keeps its
   shape.

   The negative margin plus matching padding lets the row bleed to the page edges, so the card at
   the right is visibly cut and the row reads as scrollable without needing arrows. Scroll snapping
   makes each card settle in place rather than stopping halfway.

   The container's inline padding is 24px at this width — the bleed has to match it exactly or the
   first card no longer lines up with the copy above it. */
@media (max-width: 767px) {
  .kw-cards {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -24px;
    padding-inline: 24px;
    /* the bar now provides the gap to whatever follows */
    margin-bottom: 0;
    /* Without this the snap port ignores the padding: the browser snapped the first card's start
       edge to the padding edge, scrolling the rail 24px and putting the card flush against the
       screen instead of lined up with the copy above it. */
    scroll-padding-inline: 24px;
    /* the scroll container must not clip the card shadows vertically */
    padding-block: 2px;
  }
  .kw-cards::-webkit-scrollbar {
    display: none;
  }
  .kw-cards .kw-card {
    flex: 0 0 232px;
    min-height: 118px;
    scroll-snap-align: start;
  }

  /* The shared indicator (custom.css) on this band's dark ground. */
  .kw-hero {
    --kf-railbar-ground: rgba(255, 255, 255, 0.16);
    --kf-railbar-thumb: var(--kw-yellow);
  }
}

/* ---- mobile: from the independent layout review ------------------------- */
@media (max-width: 767px) {
  /* The "what you gain" panel carried a stray `margin-left: 15.0469px` from the desktop
     `uk-width-1-2@m` grid, so it sat indented on the left while flush on the right — the black card
     visibly started inboard of the heading and button above it. */
  .kw-register .uk-grid > .kw-register__aside {
    margin-left: 0;
    width: 100%;
  }
  .kw-aside {
    max-width: none;
    margin-inline: 0;
  }

  /* DOUBLED GAPS. UIkit adds `margin-top: 30px` to a stacked column on top of the flex `gap` that
     is already there, so three junctions rendered spacing nobody specified: the hero CTA and its
     note 48px apart, the claim heading and its button 54px, the register button and the aside 56px.
     The hero one was the worst — the note that qualifies the CTA floated free of it. */
  .kw-hero__cta.uk-grid > .uk-grid-margin,
  .kw-claim__head.uk-grid > .uk-grid-margin,
  .kw-register .uk-grid > .uk-grid-margin {
    margin-top: 0;
  }
  .kw-claim__head {
    row-gap: 20px;
  }
  .kw-register__aside {
    margin-top: 28px;
  }

  /* Support CTAs were 234 and 190 wide, centred, so both edges were ragged — and only 10px apart. */
  .kw-support__btns .uk-grid {
    row-gap: 16px;
  }
  .kw-support__btns .kw-btn {
    box-sizing: border-box;
    width: 100%;
  }

  /* Every other H2 on this page is left-aligned sentence case; this one was centred and shouting. */
  .kw-support > .uk-container {
    text-align: left;
  }
  .kw-support .kw-support__h {
    text-transform: none;
  }
}

/* Two microcopy blocks failed WCAG AA at 3.40:1 and 3.54:1 — and the hero one sits over PLAYING
   VIDEO, so its effective contrast is worse than a flat-colour reading suggests. */
.kw-hero .kw-hero__note,
.kw-aside .kw-aside__foot {
  color: #8a8b8d;
}

/* ---- the last three bands ran together ------------------------------------
   Terms (#f2f2f2) → Downloads (#f2f2f2) → Support (#f9f9f9). Those fills come from the design
   (design-sections.json), so they stay — but stacked on a phone they produced two problems the
   1600-wide frame never showed.

   1. Terms' 44px bottom padding plus Downloads' 56px top left 100px of one continuous grey with
      nothing in it. At full width the two bands read as separate because their content sits in
      different columns; stacked, it just reads as a hole. Downloads IS the terms document, so the
      answer is to let the two read as ONE band rather than to force an edge between them: close
      the gap to an ordinary block interval.
   2. #f2f2f2 → #f9f9f9 is a 7/255 step. On a phone, where you only ever see one band at a time,
      it does not register as a change of section at all — it reads as a stray lighter strip at the
      bottom of the page. A hairline gives the change an edge without repainting either band. */
.kw-sec.kw-support {
  border-top: 1px solid rgba(22, 22, 22, 0.1);
}
@media (max-width: 767px) {
  .kw-sec.kw-terms > .uk-container {
    padding-bottom: 8px;
  }
  .kw-sec.kw-downloads > .uk-container {
    padding-block: 32px 48px;
  }
}

/* The claim cards' 166px min-height is a design value for a five-across row, where every card has
   to match its neighbours. Stacked there are no neighbours, so all it does is hold a two-line card
   open and leave 47px of trailing space against the three-line cards' 30. */
@media (max-width: 767px) {
  .kw-steps li {
    min-height: 0;
  }
}