/* ═══════════════════════════════════════════════════════════════════════════
   RANCHER RXB45 — product page stylesheet. Loads AFTER kb.css and inherits
   every token from it. Scope: the RXB45 PDP only. Nothing here may leak to
   another catalogue page — every selector is prefixed `rx-`.

   v2 (2026-09-02) — REBUILT to the owner's industrial blueprint: sticky
   micro-bar · subnav with the direct CTA · two-column hero stage with a 3D
   tilt and ONE spec HUD at its base · four-card image-first feature deck with
   a modal · full-bleed + four application tiles · split-screen data sheet ·
   compact FAQ · dark close. High-contrast graphite / off-white surfaces, zinc
   hairlines, Keelambi red as a PRECISION accent (markers, numerals, actives)
   — saffron stays the ACTION colour, because `.kb-btn-pri` is the site's
   button and the phone dock mirrors it. No glass beyond the two sticky bars.
   Shadows: hover, the lifted stage, and — owner's spec — a soft ambient
   shadow at rest on the four feature cards. ONE gradient: the legibility
   scrim under the application-tile labels, also the owner's spec;
   verify-restraint R7.5b reports it by name so the exception stays visible.

   v2.1 (2026-09-02, later) — visual refinement on the owner's five-point
   brief: badges → HUD · warranty line → in-the-box pills · engineering
   billboard removed · applications onto the canvas · close anchored to the
   footer line.

   MICRO-COPY LAW. No block of running text exceeds two sentences. Every
   image slot is an aspect-locked plate with a fallback surface, so the page
   is pixel-identical before and after renders land.

   GATED CLAIMS. Supplier marketing lines (zero-stall, anti-burn, Japan,
   45% more power, GST, free delivery, kit contents, engine type) render only
   when catalog.claims.<key>.verified is true. rxb.js injects them; this file
   only styles the slots. Nothing here assumes they exist.

   KN-FALLBACK. Page ships lang="kn" with one approved Kannada string (the
   tagline). Everything else is ⟨KN-PENDING⟩ → English fallback, and the body
   rules below keep that English in the Latin faces. See the block just under
   the tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

body[data-rx="rxb45"]{
  --rx-graphite:#111317; --rx-graphite-2:#1A1D22; --rx-off:#F4F5F7; --rx-zinc:#E5E7EB;
  --rx-zinc-2:#D1D5DB; --rx-red:#C81E1E; --rx-red-ink:#A31515; --rx-mute:#6B7280;
  --rx-chrome-h:40px;
}

/* ═══ KN-FALLBACK — the page-wide fix (read before touching) ══════════════
   kb.css sets `html[lang="kn"] body{font-family:var(--f-kn)}`; with every
   product string pending, kb.js renders the ENGLISH sibling and that one rule
   dresses it in Noto Sans Kannada. So: the page's default is the Latin face;
   real Kannada takes Noto back; display headings keep Bebas; the phone dock
   (mobile-app.css:130 re-applies Noto inside it) gets its own override. */
html[lang="kn"] body[data-rx="rxb45"]{font-family:var(--f-body);line-height:1.5}
html[lang="kn"] body[data-rx="rxb45"] [data-kn]:not(.kn-fallback){font-family:var(--f-kn);line-height:1.7}
html[lang="kn"] body[data-rx="rxb45"] [data-en].kn-fallback{font-family:var(--f-body)}
html[lang="kn"] body[data-rx="rxb45"] .rx-h1 [data-en].kn-fallback,
html[lang="kn"] body[data-rx="rxb45"] .rx-h2 [data-en].kn-fallback,
html[lang="kn"] body[data-rx="rxb45"] .rx-close-h [data-en].kn-fallback{font-family:var(--f-display)}
html[lang="kn"] body[data-rx="rxb45"] .mapp-slot > *:has([data-en].kn-fallback){font-family:var(--f-body)}

/* ── container ── */
.rx-wrap{max-width:1200px;margin-inline:auto;padding-inline:20px}
@media(min-width:768px){.rx-wrap{padding-inline:40px}}
@media(min-width:1024px){.rx-wrap{padding-inline:56px}}

/* ── bands ── */
.rx-band{padding:clamp(56px,9vw,112px) 0}
.rx-band.off{background:var(--rx-off)}
.rx-band.hair{border-top:0.5px solid var(--rx-zinc)}
.rx-band.ink{background:var(--rx-graphite);color:#fff}

/* ═══ TYPE — seven steps, 64px ceiling ═══════════════════════════════════ */
.rx-kicker{display:block;font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--rx-red-ink)}
html[lang="kn"] .rx-kicker{letter-spacing:.02em;text-transform:none;font-size:13px;font-family:var(--f-kn)}
html[lang="kn"] .rx-kicker:has([data-kn].kn-fallback){font-family:var(--f-body);letter-spacing:.14em;text-transform:uppercase;font-size:11.5px}
.rx-band.ink .rx-kicker{color:#F27B7B}

.rx-h1{margin-top:10px;font-family:var(--f-display);font-weight:400;font-size:clamp(44px,5.6vw,64px);line-height:.94;letter-spacing:.02em}
html[lang="kn"] .rx-h1{font-family:var(--f-kn);font-weight:700;line-height:1.3;letter-spacing:0;font-size:clamp(26px,4vw,44px)}
html[lang="kn"] .rx-h1:has([data-kn].kn-fallback){font-family:var(--f-display);font-weight:400;line-height:.94;letter-spacing:.02em;font-size:clamp(44px,5.6vw,64px)}

.rx-h2{margin-top:10px;font-family:var(--f-display);font-weight:400;font-size:clamp(30px,4vw,48px);line-height:1;letter-spacing:.02em;max-width:22ch}
html[lang="kn"] .rx-h2{font-family:var(--f-kn);font-weight:700;line-height:1.34;letter-spacing:0;font-size:clamp(23px,3.4vw,37px)}
html[lang="kn"] .rx-h2:has([data-kn].kn-fallback){font-family:var(--f-display);font-weight:400;line-height:1;letter-spacing:.02em;font-size:clamp(30px,4vw,48px)}

.rx-lede{margin-top:12px;font-size:clamp(15px,1.6vw,17px);line-height:1.55;color:var(--ink-2);max-width:52ch}
html[lang="kn"] .rx-lede{line-height:1.8}
.rx-band.ink .rx-lede{color:rgba(255,255,255,.66)}
.rx-note{margin-top:12px;font-size:12.5px;line-height:1.55;color:var(--rx-mute);max-width:60ch}
.rx-band.ink .rx-note{color:rgba(255,255,255,.55)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[hidden]{display:none!important}

/* ═══ CHROME · sticky micro-bar (top:0) → kb-bar (34) → rail (94) ═════════
   The micro-bar is graphite so it reads as a utility strip above the site
   header, not as a second nav. It is accent-free: white text, zinc hairline
   dividers. Its items are painted by rxb.js from the catalogue — the free-
   delivery line appears only when its claim flag is verified. */
.rx-microbar{position:sticky;top:0;z-index:52;height:var(--rx-chrome-h);background:var(--rx-graphite);color:#fff}
.rx-microbar-in{display:flex;align-items:center;justify-content:center;gap:0;height:100%;
  max-width:1200px;margin-inline:auto;padding-inline:16px;overflow:hidden;white-space:nowrap}
.rx-micro{display:inline-flex;align-items:center;gap:7px;padding:0 14px;font-size:12px;font-weight:600;
  letter-spacing:.02em;color:rgba(255,255,255,.88);border-left:0.5px solid rgba(255,255,255,.16)}
.rx-micro:first-child{border-left:0}
.rx-micro svg{width:14px;height:14px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rx-micro a{display:inline-flex;align-items:center;min-height:var(--rx-chrome-h);color:inherit;text-decoration:none}
.rx-micro a:hover{text-decoration:underline;text-underline-offset:3px}
@media(max-width:599px){.rx-micro{padding:0 10px;font-size:11.5px}.rx-micro.opt{display:none}}
body[data-rx="rxb45"] .kb-bar{top:var(--rx-chrome-h)}

.rx-railbar{display:none}
@media(min-width:768px){
  .rx-railbar{display:block;position:sticky;top:calc(var(--rx-chrome-h) + 60px);z-index:40;
    background:rgba(255,255,255,.86);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
    border-bottom:0.5px solid var(--rx-zinc)}
  .rx-rail{display:flex;align-items:center;gap:22px;max-width:1200px;margin-inline:auto;padding-inline:40px}
  .rx-rail ul{list-style:none;display:flex;gap:4px;flex:1;min-width:0;margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
  .rx-rail ul::-webkit-scrollbar{display:none}
  .rx-rail a{position:relative;display:inline-block;padding:15px 10px;font-size:12.5px;font-weight:600;color:var(--rx-mute);
    text-decoration:none;white-space:nowrap}
  .rx-rail a::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;background:var(--rx-red);
    transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease)}
  .rx-rail a:hover{color:var(--ink)}
  .rx-rail a[aria-current="true"]{color:var(--ink)}
  .rx-rail a[aria-current="true"]::after{transform:scaleX(1)}
  .rx-rail-buy{display:none;align-items:center;gap:14px;flex:0 0 auto;padding:6px 0}
  html.rx-past-hero .rx-rail-buy{display:flex}
  html:not(.kb-js) .rx-rail-buy{display:flex}
  .rx-rail-p{font-size:13px;font-weight:800;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
  .rx-rail-buy .kb-btn{min-height:44px;padding:8px 20px;font-size:13.5px}
  @media(max-width:1023px){.rx-rail-p{display:none}}
}
@media(min-width:1024px){.rx-rail{padding-inline:56px}}
body[data-rx="rxb45"] section[id],body[data-rx="rxb45"] :target{scroll-margin-top:104px}
@media(min-width:768px){body[data-rx="rxb45"] section[id],body[data-rx="rxb45"] :target{scroll-margin-top:152px}}

/* ═══ 01 · HERO — the industrial stage ═══════════════════════════════════ */
.rx-crumbwrap{padding-top:12px}
.rx-hero{padding:14px 0 clamp(40px,6vw,72px)}
.rx-hero-grid{display:grid;gap:clamp(26px,4vw,40px)}
/* two columns from the rail breakpoint, not from 1024: a single-column 1:1
   plate at 768px is a full screen of empty stage with the name and price
   pushed below the fold. Stage left, copy right, from tablet up. */
@media(min-width:768px){
  .rx-hero-grid{grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
  .rx-hero-say{order:2}
  .rx-stage{order:1}
}
@media(min-width:1024px){
  /* the stage takes the larger share: this is a product page and the machine
     is the argument. At 1440 that is ~590px of photograph against ~440px of
     copy, which still holds a 64px Bebas headline and the order button. */
  .rx-hero-grid{grid-template-columns:1.35fr 1fr;gap:clamp(36px,4vw,60px)}
}

/* — the 3D stage. `perspective` on the wrapper, the transform on the card, so
     the HUD can sit at its own depth (translateZ) and the whole assembly
     tilts as one object under the pointer. rxb.js only writes two
     custom properties; everything else is CSS. Tilt is gated to fine pointers
     and to prefers-reduced-motion:no-preference — touch and reduced-motion
     users get the same composition, static. — */
.rx-stage{perspective:1400px;perspective-origin:50% 45%}
.rx-stage-3d{position:relative;transform:rotateX(var(--rx-tx,0deg)) rotateY(var(--rx-ty,0deg));
  transform-style:preserve-3d;transition:transform .55s var(--ease);will-change:transform}
/* The plate. Below 1024px it is 16:9 — the photograph's own aspect, so
   object-fit:contain has nothing to letterbox and the whole machine (guard to
   engine) stays in frame. From 1024px it is 16:11: the photograph sits at the
   top and the plate continues BELOW it in the photograph's own floor colour,
   which gives the HUD a place to stand that is clear of the machine (see
   .rx-hud). The floor is flat enough for this to be invisible — measured over
   the bottom 7% of the frame: mean #EAE6E4, std 2.5/255 — and #EBE7E4 is the
   value at the centre of the bottom row, where a seam would be most exposed.
   NO padding: the sweep already carries the machine's clearance (measured
   11.5% left, 13.8% right). No border and only the faintest lift: a hairline
   frame around a studio photograph turns it into a card. */
.rx-stage-img{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;margin:0;
  background:#EBE7E4;
  box-shadow:0 24px 50px -38px rgba(17,19,23,.22)}
.rx-stage-img picture{display:block;width:100%;height:100%}
.rx-stage-img img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 0}
/* the extension is sized for the tightest stage, not the widest: at 1024px the
   stage is ~505px and a 16:11 plate left the strip 7% clear of the machine; at
   1.4 it is 12%. From 1280px the stage is ~595px and 16:11 gives 9-10%. Both
   are re-measured by verify-rxb45 M13 / F. */
@media(min-width:1024px){.rx-stage-img{aspect-ratio:1.4}}
@media(min-width:1280px){.rx-stage-img{aspect-ratio:16/11}}

/* ═══ THE HUD — one spec strip at the base of the stage ═══════════════════
   Replaces the two floating badges (owner, 2026-09-02). Its placement is
   measured, not stylistic: the machine's lowest pixel sits at 92.3% of the
   photograph's height, so nothing can stand INSIDE the 16:9 frame at the base
   and keep R5's 8% clearance. From 1024px the plate is 16:11 and the strip
   stands on the floor extension below the photograph — at 1440 that is ~44px
   (13% of the frame) clear of the machine; verify-rxb45 M12/M13 re-measure
   it against the pixel mask on every run. Below 1024px the stage is too
   narrow for four cells in a row, so the strip drops into normal flow
   directly under the plate as a two-by-two grid.
   Glass without backdrop-filter: the surface beneath it is one flat colour,
   so translucent white alone gives the reading and AP.3 (glass outside the
   sticky chrome) stays clean.
   ⚠ R1 bans spec strips in a hero. This one is the owner's blueprint; it is
   NAMED so verify-restraint reports it (R1.1 / R1.4). */
.rx-hud{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:10px 0 0;padding:0;
  background:var(--rx-zinc);border:1px solid var(--rx-zinc);border-radius:16px;overflow:hidden}
/* 11.5px is this page's type floor (verify-rxb45 E13) — the labels sit on it,
   tracked a little tighter than a kicker so four cells stay one row. */
.rx-hud-item{display:flex;flex-direction:column-reverse;gap:2px;margin:0;padding:9px 14px;background:#fff}
.rx-hud dd{margin:0;font-weight:800;font-size:15px;line-height:1;letter-spacing:-0.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.rx-hud dt{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--rx-mute);line-height:1.2}
html[lang="kn"] .rx-hud dt{letter-spacing:0;text-transform:none}
html[lang="kn"] .rx-hud dt:has([data-kn].kn-fallback){letter-spacing:.06em;text-transform:uppercase}
/* single-column hero (phones): the strip moves BELOW the copy — photo → name
   → price → order → in the box → specs. In flow between the plate and the
   price it pushed the order button to the fold edge on a 360×780 screen. The
   stage wrappers become display:contents so the plate and the strip are
   ordered as grid items; the 3D tilt is fine-pointer-only and never ran here. */
@media(max-width:767px){
  .rx-stage,.rx-stage-3d{display:contents}
  .rx-stage-img{order:1}
  .rx-hero-say{order:2}
  .rx-hud{order:3;margin-top:0}
}
@media(min-width:1024px){
  .rx-hud{position:absolute;left:50%;bottom:12px;margin:0;transform:translateX(-50%) translateZ(30px);
    grid-template-columns:repeat(4,auto);gap:0;overflow:visible;
    background:rgba(255,255,255,.80);border:1px solid rgba(17,19,23,.08);border-radius:999px;
    box-shadow:0 12px 30px -18px rgba(17,19,23,.32)}
  .rx-hud-item{background:transparent;padding:8px 16px;border-left:1px solid rgba(17,19,23,.10)}
  .rx-hud-item:first-child{border-left:0}
  /* one line per cell, always: a wrapped label once made the strip 62px tall
     and cost the machine its clearance */
  .rx-hud dt,.rx-hud dd{white-space:nowrap}
  .rx-hud dd{font-size:16px}
}
@media(prefers-reduced-motion:reduce){.rx-stage-3d{transition:none;transform:none}}

/* — the copy column — */
.rx-eyebrow{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rx-mute)}
html[lang="kn"] .rx-eyebrow{letter-spacing:.02em;text-transform:none;font-family:var(--f-kn)}
html[lang="kn"] .rx-eyebrow:has([data-kn].kn-fallback){font-family:var(--f-body);letter-spacing:.14em;text-transform:uppercase}
.rx-tagline{margin-top:12px;font-family:var(--f-kn);font-weight:600;font-size:clamp(15px,1.7vw,18px);line-height:1.6;color:var(--ink)}
/* the tagline was Kannada-only until the 2026-09-03 copy brief gave it an English
   twin; the class sets the Kannada face on the <p>, so English needs the Latin one
   back. Typography only — no geometry changes. */
html[lang="en"] .rx-tagline{font-family:var(--f-body)}
.rx-sub{margin-top:10px;font-size:clamp(15px,1.6vw,17px);line-height:1.5;color:var(--ink-2);max-width:44ch}

.rx-price{display:block;margin-top:clamp(20px,3vw,28px);padding-top:18px;border-top:0.5px solid var(--rx-zinc)}
.rx-price-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rx-price-amt{font-weight:800;font-size:clamp(34px,4.2vw,48px);line-height:1;letter-spacing:-0.025em;color:var(--ink);font-variant-numeric:tabular-nums}
.rx-price-tag{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rx-red-ink)}
.rx-price-lab{display:block;margin-top:8px;font-size:13px;line-height:1.5;color:var(--ink-2)}
/* THE MRP ANCHOR (2026-09-03). Deliberately the quietest line in the block: the
   offer price must not have to compete with it (R4 — the block already spends
   its one accent on .rx-price-tag, so the anchor takes none). The word "MRP"
   is TEXT, never implied by the strike alone — a screen reader announcing a
   bare struck number would announce a price, not an anchor. No percentage
   chip: the catalogue states offPct 0 and nothing here computes one. */
.rx-price-mrp{display:flex;align-items:baseline;gap:6px;margin:0 0 6px;
  font-size:13px;font-weight:500;line-height:1.3;color:var(--rx-mute)}
.rx-price-mrp s{text-decoration:line-through;text-decoration-thickness:1px;text-underline-offset:2px;
  font-variant-numeric:tabular-nums}
.rx-close .rx-price-mrp{color:rgba(255,255,255,.55)}

.rx-actions{display:flex;flex-direction:column;gap:10px;margin-top:22px}
@media(min-width:600px){.rx-actions{flex-direction:row;flex-wrap:wrap;align-items:center}}
.rx-actions .kb-btn{flex:0 0 auto}
.rx-actions .kb-btn svg{width:18px;height:18px;flex:0 0 auto}
/* the phone dock MIRRORS the hero primary by cloning its child nodes — the
   inline WhatsApp glyph rides along, and with no size rule in the dock it
   filled the whole button. Size every button glyph on this page, wherever
   the button ends up. */
body[data-rx="rxb45"] .kb-btn svg,body[data-rx="rxb45"] .mapp-cta svg{width:18px;height:18px;flex:0 0 auto}
.rx-actions .kb-btn-sec{border-color:var(--rx-zinc-2)}
.rx-quiet{display:block;margin-top:12px;font-size:12.5px;color:var(--rx-mute)}
.rx-quiet a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* IN THE BOX — rendered by rxb.js from catalog.includedItems while
   includedItems.verified is true (flipped on the owner's instruction,
   2026-09-02). Pills under the CTAs, in place of the old warranty line. The
   tick is state (included), set in ink so the hero keeps one accent. */
.rx-kit{margin-top:22px}
.rx-kit-h{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rx-mute)}
html[lang="kn"] .rx-kit-h{letter-spacing:.02em;text-transform:none}
html[lang="kn"] .rx-kit-h:has([data-kn].kn-fallback){letter-spacing:.12em;text-transform:uppercase}
.rx-kit ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.rx-kit li{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:5px 13px 5px 11px;
  font-size:12.5px;font-weight:600;line-height:1.2;color:var(--ink);
  background:#fff;border:1px solid var(--rx-zinc);border-radius:999px}
.rx-kit li::before{content:"";flex:0 0 auto;width:9px;height:5px;margin-top:-2px;
  border:solid var(--ink);border-width:0 0 2px 2px;transform:rotate(-45deg)}

/* ═══ 02 · FEATURE DECK — four image-first cards → modal ═════════════════ */
.rx-deck{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:clamp(22px,3vw,32px)}
@media(min-width:900px){.rx-deck{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
/* crisp white surfaces on the off-white band: 1px zinc hairline, a soft
   ambient shadow at rest (owner's spec, 2026-09-02) and a 16:9 component
   viewport. The photograph meets the body with no rule between them. */
.rx-fcard{position:relative;display:flex;flex-direction:column;text-align:left;padding:0;margin:0;
  background:#fff;border:1px solid var(--rx-zinc);border-radius:18px;overflow:hidden;cursor:pointer;
  box-shadow:0 1px 2px rgba(17,19,23,.04),0 14px 34px -24px rgba(17,19,23,.18);
  font:inherit;color:inherit;transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease)}
.rx-fcard:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(17,19,23,.04),0 28px 52px -30px rgba(17,19,23,.32);border-color:var(--rx-zinc-2)}
.rx-fcard:focus-visible{outline:2px solid var(--saffron);outline-offset:3px}
.rx-fcard-img{position:relative;aspect-ratio:16/9;background:var(--rx-off);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.rx-fcard-img img{display:block;width:100%;height:100%;object-fit:cover}
/* the studio crops carry the photograph's own sweep, so the card's fallback
   surface matches them and a slow connection shows no grey flash */
.rx-fcard-img{background:#E7E0D9}
.rx-fcard-img.dark{background:var(--rx-graphite-2)}
/* white, not brand red: card 03 sits on the red engine cowl and a red numeral
   vanished into it. The shadow is legibility on a photograph, not decoration. */
.rx-fcard-n{position:absolute;top:10px;left:13px;z-index:1;font-family:var(--f-display);font-weight:400;
  font-size:18px;letter-spacing:.08em;color:#fff;text-shadow:0 1px 8px rgba(17,19,23,.65)}
.rx-fcard-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.rx-fcard h3{font-weight:700;font-size:clamp(14.5px,1.5vw,16px);letter-spacing:-0.012em;line-height:1.3}
/* the title IS the button (valid phrasing content inside <h3>), and its
   ::after stretches the hit area over the whole card — one control, whole
   card clickable, keyboard-reachable, 44px tall. */
.rx-fcard-btn{all:unset;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;
  font:inherit;color:inherit;letter-spacing:inherit}
.rx-fcard-btn::after{content:"";position:absolute;inset:0;border-radius:18px}
.rx-fcard:has(.rx-fcard-btn:focus-visible){outline:2px solid var(--saffron);outline-offset:3px}
html[lang="kn"] .rx-fcard h3{letter-spacing:0;line-height:1.5}
.rx-fcard p{font-size:12.5px;line-height:1.5;color:var(--ink-2)}
html[lang="kn"] .rx-fcard p{line-height:1.75}
.rx-claim{display:inline-flex;align-items:center;gap:6px;margin-top:2px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rx-red-ink)}
.rx-claim::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--rx-red)}
.rx-fcard-go{margin-top:auto;padding-top:8px;font-size:12px;font-weight:700;color:var(--ink);display:inline-flex;align-items:center;gap:6px}
.rx-fcard-go::after{content:"→";transition:transform .22s var(--ease)}
.rx-fcard:hover .rx-fcard-go::after{transform:translateX(3px)}
@media(max-width:599px){
  .rx-deck{grid-template-columns:1fr 1fr;gap:10px}
  .rx-fcard-body{padding:12px 12px 14px}
  .rx-fcard p{display:none}
}

/* - the section head sits straight on the deck. The workshop frame that used
     to open this section is gone (owner, 2026-09-02: a billboard above the
     cards); the four cards are the section's photography. - */
.rx-head{max-width:640px}

/* — the inspection modal — */
.rx-modal{width:min(720px,calc(100vw - 32px));max-height:calc(100vh - 32px);padding:0;border:0;border-radius:22px;
  background:#fff;color:var(--ink);box-shadow:0 40px 80px -30px rgba(17,19,23,.45);overflow:hidden}
.rx-modal::backdrop{background:rgba(17,19,23,.55)}
.rx-modal-img{aspect-ratio:16/9;background:var(--rx-off);border-bottom:0.5px solid var(--rx-zinc);display:flex;align-items:center;justify-content:center}
.rx-modal-img img{width:100%;height:100%;object-fit:cover}
.rx-modal-body{padding:22px 24px 26px;overflow:auto;max-height:calc(100vh - 32px - 40vw)}
.rx-modal-k{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rx-red-ink)}
.rx-modal h2{margin-top:6px;font-weight:800;font-size:clamp(20px,2.6vw,26px);letter-spacing:-0.02em;line-height:1.2}
.rx-modal p{margin-top:10px;font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:56ch}
.rx-modal dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;margin-top:16px;padding-top:16px;border-top:0.5px solid var(--rx-zinc)}
.rx-modal dt{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rx-mute)}
.rx-modal dd{margin-top:3px;font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}
.rx-modal-x{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.92);color:var(--ink);font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px -6px rgba(0,0,0,.3)}
.rx-modal-x:focus-visible{outline:2px solid var(--saffron);outline-offset:2px}
/* a feature can carry more than one published claim */
.rx-modal-claims{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.rx-modal-cta{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}
.rx-modal-cta .kb-btn{min-height:44px;padding:9px 20px;font-size:14px}
@media(max-width:599px){.rx-modal{width:calc(100vw - 16px);border-radius:18px}.rx-modal-body{padding:18px 16px 20px}}

/* ═══ 03 · APPLICATIONS ══════════════════════════════════════════════════
   THE PAGE'S ONE FULL-BLEED (R3 permits exactly one per page). It is spent
   here, on the transition from the product to the ground it works: the
   cinematic arecanut frame, edge to edge, with no copy over it. No scrim, no
   gradient, no vignette - the photograph is the whole argument, and anything
   laid over it would be decoration under R7.
   The section sits on the CANVAS, not on graphite (owner, 2026-09-02): the
   graphite strip read as a black void around four small tiles, and photo
   tiles are at their most tactile on white. */
.rx-band.opens-photo{padding-top:0}
.rx-bleed{position:relative;margin:0 0 clamp(34px,5vw,60px);width:100%;overflow:hidden;
  background:var(--rx-graphite-2);aspect-ratio:4/3}
/* Below 768 the stage is 4:3 and the 16:9 master loses 25% of its width to cover.
   70% was right for the old frame (subject right of centre); the field-operation frame
   puts the engine at x~130 and the cutting head at x~700 of 1672, so 70% sliced the
   engine off the left edge. 14% shows x 58-1313: engine, both hands, shaft, cutting
   head and the grass being cut all stay in, with plantation depth still on the right.
   Measured against the master at 0/8/14/20/40/70%. Above 768 the stage is 16:9 and
   centred, so nothing is cropped there and this value does not apply. */
.rx-bleed img{display:block;width:100%;height:100%;object-fit:cover;object-position:14% 50%}
/* ⚠ R7.2 OVERRIDE, owner-requested 2026-09-02. CLAUDE.md R7 and the
   Anti-Patterns list both ban "vignette" BY NAME; the class is named so
   verify-restraint reports it rather than letting it hide. It is weak on
   purpose - nothing at all inside 58% of the radius, 26% graphite only in the
   extreme corners - so it never touches Mr. Rancher or the machine. Deleting
   this one rule and the class in the markup takes R7.2 green again. */
.rx-stage-vignette::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(118% 92% at 50% 46%,rgba(17,19,23,0) 58%,rgba(17,19,23,.26) 100%)}
@media(min-width:768px){
  /* CONTAINED EDITORIAL STAGE (owner, 2026-09-02: the full-bleed read as an
     infinite scroll wall). The brief asks for max-height 500px - so the WIDTH
     is capped at 890px, because 890 x 9/16 = 500 and the frame then reaches
     the brief's height with NO crop at all: horns, boots and the machine all
     stay in. Cropping a 1440-wide bleed down to 500px would have thrown away
     38% of the height and taken his boots with it (measured, four candidates).
     Contained is also what R3 asks for by default; the page now has no
     full-bleed above 768px, which R3.3 permits (at most one). */
  .rx-band.opens-photo{padding-top:clamp(56px,9vw,112px)}
  /* min(): 890px is the cap that yields the brief's 500px height; the calc keeps
     the 40px gutter between 768 and 889px, because a 24px radius sitting hard
     against the viewport edge reads as a rendering fault, not as a stage. */
  .rx-bleed{aspect-ratio:16/9;max-width:min(890px,calc(100% - 80px));max-height:500px;
    margin-inline:auto;border-radius:24px}
  .rx-bleed img{object-position:center center}
}

/* ═══ 03b · APPLICATION TILES — 4 / 2 / snap-rail ════════════════════════
   Four 1:1 photo tiles, the label set over a scrim at the base. The scrim is
   the page's one gradient: it is legibility for white type on photography
   (owner's spec, 2026-09-02), not a background, and verify-restraint R7.5b
   lists it by name so the exception stays visible. No zoom, no frame. */
.rx-apps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:clamp(22px,3vw,32px)}
/* the hairline is transparent at rest and lights on hover, so hovering never
   shifts the grid by a pixel */
.rx-app{position:relative;aspect-ratio:1/1;margin:0;border-radius:18px;overflow:hidden;background:var(--rx-graphite-2);
  border:1px solid transparent;display:flex;align-items:flex-end;
  transition:border-color .24s var(--ease)}
.rx-app:hover{border-color:#374151}
.rx-app img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rx-app::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64%;pointer-events:none;
  background:linear-gradient(to top,rgba(17,19,23,.80) 0%,rgba(17,19,23,.42) 42%,rgba(17,19,23,0) 100%)}
.rx-app-cap{position:relative;z-index:1;padding:18px 18px 17px;width:100%}
/* full white title over a light grey line - the brief's contrast pair. Both
   sit on the scrim, so the ratio holds over any part of any photograph. */
.rx-app-cap b{display:block;font-weight:700;font-size:clamp(14.5px,1.5vw,17px);color:#FFFFFF;letter-spacing:-0.012em}
.rx-app-cap span{display:block;margin-top:4px;font-size:12px;color:#D1D5DB;line-height:1.45}
.rx-app-n{position:absolute;top:12px;left:16px;z-index:1;font-family:var(--f-display);font-size:17px;letter-spacing:.08em;
  color:#fff;text-shadow:0 1px 8px rgba(17,19,23,.6)}
@media(min-width:600px) and (max-width:899px){.rx-apps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:599px){
  .rx-apps{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;margin-inline:-20px;padding-inline:20px;scrollbar-width:none}
  .rx-apps::-webkit-scrollbar{display:none}
  .rx-app{flex:0 0 72%;scroll-snap-align:start}
}

/* ═══ 03c · FROM THE FIELD — real photography (2026-09-04) ═══════════════
   One list, two layouts, no painter. <ul.rx-field-list> is the manifest (see
   the markup comment). PHONES (<768): a film strip — every item is a card of
   one shared height whose WIDTH comes from the photograph's own ratio
   (style="--ar"), so a portrait frame is a narrower card and nothing is
   cropped; cards snap to the wrap's left edge with the next one peeking, the
   caption sits under the card, a counter under the rail says where you are.
   Cards beyond the viewport are content-visibility:auto, so their photographs
   are not fetched until they are about to be seen. 768–1023: the anchor spans
   the width, the two supports sit side by side beneath it. 1024+: an 8 / 4
   editorial spread — the anchor two rows tall, two supports stacked beside
   it and aligned to its top and bottom (their photographs are absolutely
   positioned, so they contribute no height and the anchor alone sizes the
   rows). Photographs only; captions live in the viewer. Items from the
   fourth are display:none from 768 (never fetched) and reachable through
   the viewer. Contained and rounded on the off canvas — R3's default; the
   page's one opening stage stays in Applications. Motion: a hover scale
   (state: this opens) and native scroll-snap, nothing ambient. One accent:
   the kicker's red, and the same red on the link's hover.
   THE VIEWER (.rx-field-lb): a full-viewport native <dialog> — top layer, so
   it clears the phone dock; the slides are a snap strip (native swipe), the
   photograph letterboxed on near-black, counter top-left, close top-right,
   prev / next at mid-height, the caption beneath. ═══ */
.rx-field{--rx-field-h:clamp(210px,60vw,300px);--rx-field-r:clamp(14px,2vw,22px)}
.rx-field-head{max-width:640px}
.rx-field-list{list-style:none;margin:clamp(22px,3vw,32px) 0 0;padding:0}
.rx-field-item{margin:0;min-width:0;min-height:0}
.rx-field-item figure{margin:0;height:100%}
.rx-field-open{all:unset;box-sizing:border-box;position:relative;display:block;width:100%;cursor:zoom-in;
  border-radius:var(--rx-field-r);overflow:hidden;background:var(--rx-zinc);-webkit-tap-highlight-color:transparent}
.rx-field-open:focus-visible{outline:2px solid var(--saffron);outline-offset:-3px}
.rx-field-open img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rx-field-cap{margin:10px 0 0;font-size:12.5px;font-weight:600;line-height:1.4;color:var(--rx-mute);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rx-field-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:clamp(8px,1.4vw,16px)}
.rx-field-all{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;
  font-size:14px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.rx-field-all:hover{color:var(--rx-red-ink)}
.rx-field-all:focus-visible{outline:2px solid var(--saffron);outline-offset:3px;border-radius:4px}
.rx-field-count{font-size:12.5px;font-weight:600;color:var(--rx-mute);font-variant-numeric:tabular-nums}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .rx-field-open img{transition:transform .7s var(--ease)}
  .rx-field-open:hover img{transform:scale(1.025)}
}
/* — phones: the film strip — */
@media(max-width:767px){
  .rx-field-list{display:flex;align-items:flex-start;gap:10px;height:calc(var(--rx-field-h) + 52px);
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:20px;
    margin-inline:-20px;padding-inline:20px;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .rx-field-list::-webkit-scrollbar{display:none}
  .rx-field-item{flex:0 0 auto;width:calc(var(--rx-field-h) * var(--ar,1.3333));scroll-snap-align:start;
    content-visibility:auto;contain-intrinsic-height:auto calc(var(--rx-field-h) + 52px)}
  .rx-field-open{height:var(--rx-field-h)}
  .rx-field-all{display:none}
}
/* — 768+: the editorial spread — */
@media(min-width:768px){
  .rx-field-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .rx-field-item:nth-child(n+4){display:none}
  .rx-field-item:first-child{grid-column:1 / -1}
  .rx-field-open{aspect-ratio:var(--ar,1.3333)}
  .rx-field-cap,.rx-field-count{display:none}
  .rx-field-foot{justify-content:flex-end}
}
@media(min-width:1024px){
  .rx-field-list{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:1fr 1fr}
  .rx-field-item:first-child{grid-column:1 / span 8;grid-row:1 / span 2}
  .rx-field-item:nth-child(2),.rx-field-item:nth-child(3){grid-column:9 / span 4}
  .rx-field-item:nth-child(2) .rx-field-open,.rx-field-item:nth-child(3) .rx-field-open{aspect-ratio:auto;height:100%}
}
/* — the viewer — */
.rx-field-lb{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:#0B0C0E;color:#fff;overflow:hidden}
.rx-field-lb::backdrop{background:#0B0C0E}
.rx-field-lb-bar{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 8px 0 20px}
.rx-field-lb-count{font-size:13px;font-weight:600;color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums}
.rx-field-lb-x,.rx-field-lb-nav{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:26px;line-height:1}
.rx-field-lb-x:hover,.rx-field-lb-nav:hover{background:rgba(255,255,255,.18)}
.rx-field-lb-x:focus-visible,.rx-field-lb-nav:focus-visible{outline:2px solid var(--saffron);outline-offset:2px}
.rx-field-lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;font-size:30px;padding-bottom:3px}
.rx-field-lb-nav.is-prev{left:10px}.rx-field-lb-nav.is-next{right:10px}
.rx-field-lb-nav:disabled{opacity:.28;cursor:default}
.rx-field-lb-strip{position:absolute;inset:56px 0 72px;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.rx-field-lb-strip::-webkit-scrollbar{display:none}
.rx-field-lb-slide{flex:0 0 100%;height:100%;display:flex;align-items:center;justify-content:center;scroll-snap-align:start;padding:0 12px;cursor:zoom-out}
.rx-field-lb-slide img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:6px;cursor:default}
.rx-field-lb-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;height:72px;padding:0 64px;display:flex;align-items:center;justify-content:center;
  text-align:center;font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.8)}
html.rx-lb-open{overflow:hidden}
/* phones: swipe is the navigation; the buttons stay for keyboards and switch access but
   sit in the bottom bar, flanking the caption, so they never cover the photograph */
@media(max-width:767px){.rx-field-lb-nav{top:auto;bottom:14px;transform:none}.rx-field-lb-nav.is-prev{left:12px}.rx-field-lb-nav.is-next{right:12px}}
@media(min-width:768px){.rx-field-lb-slide{padding:0 72px}.rx-field-lb-nav.is-prev{left:20px}.rx-field-lb-nav.is-next{right:20px}}
@media(prefers-reduced-motion:no-preference){
  .rx-field-lb[open]{animation:rx-field-in .18s var(--ease)}
  @keyframes rx-field-in{from{opacity:0}to{opacity:1}}
}
@media(prefers-reduced-motion:reduce){.rx-field-list,.rx-field-lb-strip{scroll-behavior:auto}}

/* ═══ 03d · ASK — what you are actually buying (bento) ════════════════════
   v2.7 (2026-09-03, owner brief: "Decision / buyer-proof section, bento").
   Replaces the v2.6 four-column layout the owner read as a slide. One
   elevated off-white panel (24px radius, 1px zinc) on the canvas band, and
   inside it an asymmetric bento:
     row 1 · the TRUTH CARD (graphite, 6/10): the displacement large, the
             owner's subtitle, three model / capacity / power rows, the mark
           · four HARDWARE TILES (white, 4/10, 2×2): power · ratio ·
             carburettor · tank, numerals large, labels small caps
     row 2 · TERRAIN FIT (white, 5/10): four pill chips (a crop FILTER — the
             owner's spec; the site's underline rule is for page tabs) and one
             reality line at a time, all four in the DOM
           · SUPPORT (white, 5/10): warranty · address · numbers · the kit
     v2.8 (owner copy brief): the disclosure strip and its plot-demo button are
     DELETED — Keelambi runs no plot demos for brush cutters — so the four
     blocks close the section and it carries no action of its own.
   Phones: the same blocks stack, tiles stay 2×2, the chips scroll sideways
   inside their row. Every figure is the catalogue's; every font-size below
   already exists on this page. Nothing here reaches outside #ask.
   ═══════════════════════════════════════════════════════════════════════ */
.rx-ask-panel{background:var(--rx-off);border:1px solid var(--rx-zinc);border-radius:24px;padding:clamp(20px,4vw,48px)}
.rx-ask-head{max-width:640px}
.rx-ask-bento{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:14px;margin-top:clamp(22px,3vw,32px)}
.rx-ask-b{grid-column:1 / -1;margin:0;min-width:0}
.rx-ask-lab{margin:0;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.3;color:var(--rx-mute)}
html[lang="kn"] .rx-ask-lab{letter-spacing:0;text-transform:none;font-size:12.5px}
html[lang="kn"] .rx-ask-lab:has([data-kn].kn-fallback){letter-spacing:.12em;text-transform:uppercase;font-size:11.5px}

/* — the truth card — */
.rx-ask-truth{display:flex;flex-direction:column;padding:clamp(22px,3vw,32px);border-radius:20px;background:var(--rx-graphite);color:#fff}
.rx-ask-truth .rx-ask-lab{color:rgba(255,255,255,.62)}
.rx-ask-big{margin:18px 0 0;line-height:1;color:#fff}
.rx-ask-big b{font-family:var(--f-body);font-weight:800;font-size:clamp(44px,5.6vw,64px);letter-spacing:-0.03em;font-variant-numeric:tabular-nums}
.rx-ask-big .rx-ask-u{margin-left:-.15em;font-size:20px;font-weight:700;color:#A1A1AA;vertical-align:.9em}
.rx-ask-not{margin-top:8px;font-size:20px;font-weight:600;line-height:1.2;color:#A1A1AA}
.rx-ask-dev{margin:22px 0 0;padding:0;border-top:1px solid rgba(255,255,255,.14)}
.rx-ask-dev div{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:0 16px;align-items:baseline;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.rx-ask-dev dt{font-weight:700;font-size:15px;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.rx-ask-dev dd{margin:0;font-size:12.5px;line-height:1.4;color:#A1A1AA;text-align:right}
/* a claim slot rides after a label with a middle dot, and vanishes with the claim */
.rx-ask .rx-ask-claim:not(:empty)::before{content:" · "}
.rx-ask-mark{position:relative;margin:auto 0 0;padding:16px 0 0 22px;font-size:12.5px;line-height:1.4;color:#A1A1AA}
.rx-ask-mark::before{content:"";position:absolute;left:1px;top:calc(16px + .45em);width:9px;height:5px;border:solid #fff;border-width:0 0 2px 2px;transform:rotate(-45deg)}

/* — the hardware tiles — */
.rx-ask-tiles{display:flex;flex-direction:column;gap:12px}
.rx-ask-grid4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;flex:1}
.rx-ask-tile{display:flex;flex-direction:column-reverse;justify-content:space-between;gap:8px;margin:0;min-width:0;min-height:104px;padding:16px 16px 14px;
  background:#fff;border:1px solid var(--rx-zinc);border-radius:16px;box-shadow:0 1px 2px rgba(17,19,23,.04)}
.rx-ask-tile dt{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.35;color:var(--rx-mute)}
html[lang="kn"] .rx-ask-tile dt{letter-spacing:0;text-transform:none;font-size:12.5px}
html[lang="kn"] .rx-ask-tile dt:has([data-kn].kn-fallback){letter-spacing:.06em;text-transform:uppercase;font-size:11.5px}
.rx-ask-tile dt .lat{text-transform:none;letter-spacing:0}
.rx-ask-tile dd{margin:0;line-height:1;color:var(--ink)}
.rx-ask-tile dd b{font-family:var(--f-body);font-weight:800;font-size:clamp(24px,2.9vw,38px);letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.rx-ask-tile .rx-ask-u{margin-left:-.12em;font-size:13px;font-weight:700;color:var(--rx-mute)}
.rx-ask-tile .rx-ask-sub{display:block;margin-top:6px;font-size:12.5px;font-weight:600;line-height:1.3;color:var(--rx-mute)}
.rx-ask dd.lat,.rx-ask dt.lat{white-space:normal}
/* kb.css puts white-space:nowrap on .lat; inside a 114px tablet tile the mix line
   ("40:1 (2T mix)") then overflows its own cell. Release it on the tile's own
   figures only — the phone numbers below keep their nowrap. */
.rx-ask-tile dd .lat{white-space:normal}

/* — terrain fit: the chips and one reality line — */
.rx-ask-fit,.rx-ask-who{padding:clamp(18px,2.6vw,26px);background:#fff;border:1px solid var(--rx-zinc);border-radius:20px}
.rx-ask-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.rx-ask-chip{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
  border:1px solid var(--rx-zinc-2);border-radius:var(--r-pill);background:#fff;color:var(--ink);
  font-family:var(--f-body);font-weight:600;font-size:13.5px;line-height:1.2;white-space:nowrap;
  transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease)}
html[lang="kn"] .rx-ask-chip [data-kn]:not(.kn-fallback){font-size:14px;line-height:1.4}
.rx-ask-chip:hover{border-color:var(--rx-mute)}
.rx-ask-chip[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.rx-ask-chip:focus-visible{outline:2px solid var(--saffron);outline-offset:2px}
.rx-ask-real{margin:16px 0 0;font-size:clamp(15px,1.6vw,17px);font-weight:500;line-height:1.5;color:var(--ink)}
html[lang="kn"] .rx-ask-real{line-height:1.7}
.rx-ask-real:not([hidden]){animation:rx-ask-fade .15s var(--ease)}
@keyframes rx-ask-fade{from{opacity:0}to{opacity:1}}

/* — support — */
.rx-ask-who h3{margin-top:6px;font-weight:700;font-size:18px;line-height:1.3;letter-spacing:-0.012em;color:var(--ink)}
html[lang="kn"] .rx-ask-who h3{letter-spacing:0;line-height:1.5}
.rx-ask-rows{margin:14px 0 0;padding:0;border-top:0.5px solid var(--rx-zinc)}
.rx-ask-rows > div{display:grid;grid-template-columns:minmax(84px,26%) minmax(0,1fr);gap:0 14px;align-items:center;margin:0;padding:8px 0;border-bottom:0.5px solid var(--rx-zinc)}
.rx-ask-rows dt{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.3;color:var(--rx-mute)}
html[lang="kn"] .rx-ask-rows dt{letter-spacing:0;text-transform:none;font-size:12.5px}
html[lang="kn"] .rx-ask-rows dt:has([data-kn].kn-fallback){letter-spacing:.08em;text-transform:uppercase;font-size:11.5px}
.rx-ask-rows dd{margin:0;font-size:13.5px;line-height:1.45;color:var(--ink)}
.rx-ask-rows .rx-ask-lead dd{font-size:15px;font-weight:700}
.rx-ask-rows dd small{display:block;margin-top:2px;font-size:12.5px;font-weight:500;color:var(--rx-mute)}
.rx-ask-rows dd a{display:inline-flex;align-items:center;min-height:44px;color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;font-variant-numeric:tabular-nums}
.rx-ask-rows dd .lat{font-weight:600}
.rx-ask-rows ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;font-weight:600;color:var(--ink)}
.rx-ask-rows li{position:relative;padding-left:14px}
.rx-ask-rows li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:4px;border:solid var(--ink);border-width:0 0 2px 2px;transform:rotate(-45deg)}

/* 768-899 is the tightest the 2x2 gets: 114px tiles. Twelve pixels of side
   padding keep a 24px numeral inside its cell without a new type step. */
@media(min-width:768px) and (max-width:899px){.rx-ask-tile{padding:14px 12px 12px}}
@media(min-width:768px){
  .rx-ask-bento{gap:16px}
  .rx-ask-truth{grid-column:1 / span 6}
  .rx-ask-tiles{grid-column:7 / span 4}
  .rx-ask-fit{grid-column:1 / span 5}
  .rx-ask-who{grid-column:6 / span 5}
}
@media(max-width:767px){
  .rx-ask-chips{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1 * clamp(18px,2.6vw,26px));padding-inline:clamp(18px,2.6vw,26px);
    scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .rx-ask-chips::-webkit-scrollbar{display:none}
  .rx-ask-chip{scroll-snap-align:start;flex:0 0 auto}
  .rx-ask-tile{padding:14px 12px 12px;min-height:96px}
  .rx-ask-dev dd{text-align:left}
}
@media(max-width:599px){
  .rx-ask-dev div{grid-template-columns:minmax(0,1fr);gap:2px 0}
}
@media(prefers-reduced-motion:reduce){
  .rx-ask-real:not([hidden]){animation:none}
  .rx-ask-chip{transition:none}
}

/* — the four spec glyphs (2026-09-04): inline SVG + CSS keyframes, nothing
     else. The markup IS the rest frame — piston at top dead centre, the gauge
     at its reading, the gears still, the tank at its 900 mark — so no-JS, no
     observer and prefers-reduced-motion:reduce all render the finished glyph
     and it never moves. rxb.js adds .rx-ma-on to a host once it enters the
     viewport (again on hover / tap); every run is bounded, nothing loops.
     Placement: on phones the glyph floats top-right of the numeral line
     (24px under 390; the tank's 20px there — the Kannada "900 ಮಿಲಿ" leaves
     29px and no more). From 768 the tiles stretch to the truth card, so the
     glyph sits in the empty band under the figure, right-aligned, clear of
     every line of text. One accent family: the page red, nothing else. — */
.rx-ma{display:block;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible;pointer-events:none}
.rx-ask-bigrow{display:flex;align-items:center;gap:18px;margin-top:18px}
.rx-ask-bigrow .rx-ask-big{margin:0}
.rx-ma-piston{flex:0 0 auto;width:32px;height:32px;margin-top:-3px;stroke:#fff}
.rx-ma-rod{transform-origin:16px 11px}
.rx-ma-crank{transform-origin:16px 25px}
.rx-ask-tile dd{position:relative}
.rx-ask-tile dd .rx-ma{float:right;width:28px;height:28px;margin:0 0 0 8px}
.rx-ma-tick{stroke:var(--rx-mute)}
.rx-ma-hub{fill:currentColor;stroke:none}
.rx-ma-arc{stroke:var(--rx-red);stroke-width:2;stroke-dasharray:35}
.rx-ma-ndl{transform-origin:14px 15px}
.rx-ma-teeth{stroke-width:2;stroke-linecap:butt;stroke-dasharray:1.445;stroke-dashoffset:.72}
.rx-ma-tb{stroke-dashoffset:2.17}
.rx-ma-ga{transform-origin:7.8px 14px}
.rx-ma-gb{transform-origin:18.84px 14px}
.rx-ma-fuel{fill:rgba(200,30,30,.14);stroke:var(--rx-red);stroke-opacity:.5;stroke-width:1}
@media(max-width:389px){
  .rx-ask-tile dd .rx-ma{width:24px;height:24px;margin-left:6px}
  .rx-ask-tile dd .rx-ma-tank{width:20px;height:20px;margin-left:4px}
}
@media(min-width:768px){
  .rx-ask-tile dd .rx-ma{float:none;position:absolute;right:0;top:calc(100% + 8px);margin:0}
}
@media(prefers-reduced-motion:no-preference){
  .rx-ma-on .rx-ma-pist{animation:rx-ma-stroke 1.4s ease-in-out 3}
  .rx-ma-on .rx-ma-rod{animation:rx-ma-rod 1.4s ease-in-out 3}
  .rx-ma-on .rx-ma-crank{animation:rx-ma-crank 1.4s linear 3}
  .rx-ma-on .rx-ma-arc{animation:rx-ma-gauge .8s cubic-bezier(.16,1,.3,1) both}
  .rx-ma-on .rx-ma-ndl{animation:rx-ma-needle .8s cubic-bezier(.16,1,.3,1) both}
  .rx-ma-on .rx-ma-ga{animation:rx-ma-spin-a 3s ease-in-out both}
  .rx-ma-on .rx-ma-gb{animation:rx-ma-spin-b 3s ease-in-out both}
  .rx-ma-on .rx-ma-fuel{animation:rx-ma-fill 1.1s cubic-bezier(.2,.8,.2,1) both}
  /* slider-crank: the pin runs a full turn per stroke, the piston follows the
     cosine (ease-in-out per half), the rod swings ±asin(4/10) about its wrist */
  @keyframes rx-ma-stroke{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
  @keyframes rx-ma-rod{0%,50%,100%{transform:rotate(0)}25%{transform:rotate(-23.6deg)}75%{transform:rotate(23.6deg)}}
  @keyframes rx-ma-crank{to{transform:rotate(360deg)}}
  @keyframes rx-ma-gauge{from{stroke-dashoffset:35}to{stroke-dashoffset:0}}
  @keyframes rx-ma-needle{from{transform:rotate(-220deg)}to{transform:rotate(0)}}
  /* 10 and 14 teeth: the driven gear turns 360/1.4 = 257.14° for the pinion's full turn */
  @keyframes rx-ma-spin-a{to{transform:rotate(360deg)}}
  @keyframes rx-ma-spin-b{to{transform:rotate(-257.14deg)}}
  @keyframes rx-ma-fill{0%{transform:translate(-2.5px,18px)}78%{transform:translate(.5px,-.5px)}100%{transform:none}}
}

/* ═══ 04 · TECHNICAL DATA — board · explorer · close ══════════════════════
   v2.5 (2026-09-03, owner brief: "complete information-experience redesign";
   the v2.4 ledger was rejected as a re-set table). Four layers, in reading
   order, one DOM:
     1 · THE BOARD  — six published figures at three sizes on one ruled
         plate: the hero HUD's bigger sibling. Values are the catalogue's,
         split typographically only (numeral · unit · second figure); every
         token of every published string is still printed.
     2 · THE EXPLORER — the four groups behind a sliding-underline tab strip
         from 768px (tabs never use pills), and a disclosure list on phones
         (button + aria-expanded), Engine open first. rxb.js swaps the
         behaviour on the 768 media query; the markup never changes.
     3 · THE ROWS — the chosen group's figures as a ruled matrix of
         label-over-value cells: two columns reading down from 768, one
         column on phones.
     4 · THE CLOSE — the footnote, then warranty and the service address as
         text and the two numbers as quiet secondary buttons.
   No cards, no fills, no charts, no counters: rules, scale, weight and
   tabular numerals carry it. One accent — the kicker and the tab indicator,
   both Rancher red. Every font-size below already exists in the CSS this
   page loads (R6.6 count unchanged). Nothing here reaches outside #specs.
   ═══════════════════════════════════════════════════════════════════════ */
.rx-sheet-head{max-width:640px}

/* ── 1 · the board ─────────────────────────────────────────────────────── */
.rx-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:clamp(24px,3.4vw,36px) 0 0;padding:0;
  background:var(--rx-zinc);border:1px solid var(--rx-zinc);border-radius:16px;overflow:hidden}
.rx-board-c{display:flex;flex-direction:column;justify-content:space-between;gap:12px;margin:0;min-width:0;padding:14px 16px 16px;background:#fff}
.rx-board dt{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.3;color:var(--rx-mute)}
html[lang="kn"] .rx-board dt{letter-spacing:0;text-transform:none;font-size:12.5px}
html[lang="kn"] .rx-board dt:has([data-kn].kn-fallback){letter-spacing:.08em;text-transform:uppercase;font-size:11.5px}
.rx-board dd{margin:0;line-height:1;color:var(--ink)}
/* .lat brings nowrap from kb.css; the second figure must be free to sit on its own line */
.rx-board dd.lat{white-space:normal}
.rx-board dd b{font-family:var(--f-body);font-weight:800;font-size:20px;line-height:1;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.rx-board-u{font-size:12.5px;font-weight:700;letter-spacing:0;color:var(--rx-mute)}
.rx-board-sub{display:block;margin-top:7px;font-size:13px;font-weight:600;line-height:1.3;color:var(--rx-mute)}
.rx-board-c.is-l dd b{font-size:clamp(44px,5.6vw,64px);letter-spacing:-0.03em}
.rx-board-c.is-l .rx-board-u{font-size:20px}
@media(min-width:600px){
  .rx-board-c.is-m dd b{font-size:clamp(26px,5vw,38px)}
  .rx-board-c.is-m .rx-board-u{font-size:15px}
}
@media(min-width:768px){.rx-board-c{padding:18px 20px 20px}}
/* one plate from 1024: the power cell stands two rows tall on the left,
   the two engine figures above the three small ones on the right */
@media(min-width:1024px){
  .rx-board{grid-template-columns:repeat(18,minmax(0,1fr))}
  .rx-board-c{grid-column:span 4}
  .rx-board-c.is-m{grid-column:span 6}
  .rx-board-c.is-l{grid-column:1 / span 6;grid-row:1 / span 2}
}

/* ── 2 · the explorer ──────────────────────────────────────────────────── */
.rx-tx{margin-top:clamp(28px,4vw,44px)}
.rx-tx-cap{margin:0 0 10px;font-size:12px;font-weight:500;line-height:1.5;color:var(--rx-mute)}
.rx-tx-tabs{position:relative;display:flex;gap:26px;border-bottom:0.5px solid var(--rx-zinc)}
.rx-tx-tab{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:inline-flex;align-items:center;min-height:46px;padding:12px 2px;
  font-family:var(--f-body);font-weight:600;font-size:13.5px;line-height:1.3;color:var(--rx-mute);white-space:nowrap;
  transition:color .18s var(--ease)}
html[lang="kn"] .rx-tx-tab [data-kn]:not(.kn-fallback){font-size:14px;line-height:1.5}
.rx-tx-tab:hover{color:var(--ink)}
.rx-tx-tab[aria-selected="true"]{color:var(--ink)}
.rx-tx-tab:focus-visible{outline:2px solid var(--saffron);outline-offset:-2px;border-radius:4px}
/* the one indicator slides between tabs (rxb.js writes its width and offset) */
.rx-tx-ind{position:absolute;left:0;bottom:-0.5px;height:2px;width:0;background:var(--rx-red);
  transition:transform .22s var(--ease),width .22s var(--ease)}

.rx-tx-g{margin:0}
.rx-tx-h{margin:0}
/* the phone's disclosure row: group label · figure count · chevron, 52px */
.rx-tx-btn{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:12px 0;
  font-family:var(--f-body);font-weight:700;font-size:12px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  border-bottom:0.5px solid var(--rx-zinc)}
html[lang="kn"] .rx-tx-btn{letter-spacing:0;text-transform:none;font-size:14px}
html[lang="kn"] .rx-tx-btn:has([data-kn].kn-fallback){letter-spacing:.12em;text-transform:uppercase;font-size:12px}
html[lang="kn"] body[data-rx="rxb45"] .rx-tx-btn [data-kn]{line-height:1.5}
.rx-tx-btn:focus-visible{outline:2px solid var(--saffron);outline-offset:2px;border-radius:4px}
/* the row count and the chevron are drawn by CSS, so the heading holds nothing
   but its label (R6.5): the count from data-n, kept out of the accessible name
   by the alt-text slash; the chevron as two borders, turning when open */
.rx-tx-btn::before{content:attr(data-n) / "";order:1;margin-left:auto;font-size:13px;font-weight:600;letter-spacing:0;color:var(--rx-mute);font-variant-numeric:tabular-nums}
.rx-tx-btn::after{content:"";order:2;flex:0 0 auto;width:8px;height:8px;margin:-5px 5px 0 2px;border:solid var(--ink);border-width:0 2px 2px 0;
  transform:rotate(45deg);transition:transform .2s var(--ease),margin .2s var(--ease)}
.rx-tx-btn[aria-expanded="true"]::after{margin-top:5px;transform:rotate(-135deg)}
.rx-tx-p{padding:0}
.rx-tx-p:not([hidden]){animation:rx-tx-in .18s var(--ease)}
@keyframes rx-tx-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ── 3 · the rows ──────────────────────────────────────────────────────── */
.rx-tx-rows{margin:0;padding:0}
.rx-tx-row{display:grid;grid-template-columns:minmax(0,1fr);gap:3px 0;margin:0;padding:10px 0;border-bottom:0.5px solid var(--rx-zinc)}
.rx-tx-row dt{font-size:12.5px;font-weight:500;line-height:1.4;color:var(--rx-mute)}
.rx-tx-row dd{margin:0;font-size:16px;font-weight:700;line-height:1.35;color:var(--ink);font-variant-numeric:tabular-nums}
/* .lat brings white-space:nowrap from kb.css; a long value must wrap, never
   push the page sideways. The modal keeps the same release. */
.rx-tx dd.lat,.rx-modal dd.lat{white-space:normal}
.rx-tx-row dd small{font-size:12.5px;font-weight:600;color:var(--rx-mute)}
html[lang="kn"] body[data-rx="rxb45"] .rx-tx-row dt [data-kn],
html[lang="kn"] body[data-rx="rxb45"] .rx-tx-row dd [data-kn]{line-height:1.5}
@media(min-width:768px){
  /* two columns reading DOWN (catalogue order kept), one hairline between
     them; --rx-n is the row count per column, written by rxb.js */
  .rx-tx-rows{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:column;
    grid-template-rows:repeat(var(--rx-n,1),auto);column-gap:48px}
  .rx-tx-rows::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 0.25px);width:0.5px;background:var(--rx-zinc)}
  .rx-tx-row{gap:5px 0;padding:14px 0 15px}
  .rx-tx-row dt{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
  html[lang="kn"] .rx-tx-row dt{letter-spacing:0;text-transform:none;font-size:12.5px}
  html[lang="kn"] .rx-tx-row dt:has([data-kn].kn-fallback){letter-spacing:.08em;text-transform:uppercase;font-size:11.5px}
  .rx-tx-row dd{font-weight:600;line-height:1.4}
}

/* ── 4 · the close ─────────────────────────────────────────────────────── */
.rx-spec-legend{margin-top:16px;font-size:12px;line-height:1.55;color:var(--rx-mute);max-width:64ch}
/* warranty and the address as text, the two numbers as quiet pill buttons
   (house style for a button; ghost, so the section keeps its one accent) */
.rx-supp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 24px;margin:40px 0 0;padding:26px 0 0;border-top:0.5px solid var(--rx-zinc)}
.rx-supp div{display:block;margin:0;min-width:0}
.rx-supp div:nth-child(-n+2){grid-column:1 / -1}
.rx-supp dt{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rx-mute)}
html[lang="kn"] .rx-supp dt{letter-spacing:0;text-transform:none;font-size:12.5px}
html[lang="kn"] .rx-supp dt:has([data-kn].kn-fallback){letter-spacing:.12em;text-transform:uppercase;font-size:11.5px}
.rx-supp dd{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink)}
.rx-supp div:first-child dd{font-size:16px;font-weight:600;line-height:1.4}
.rx-supp dd a{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:44px;padding:8px 18px;
  border:1px solid var(--rx-zinc-2);border-radius:var(--r-pill);color:var(--ink);font-size:14px;font-weight:600;text-decoration:none;
  font-variant-numeric:tabular-nums;transition:background .16s var(--ease),border-color .16s var(--ease)}
.rx-supp dd a:hover{background:var(--rx-off);border-color:var(--rx-mute)}
.rx-supp dd .lat{font-weight:600}
@media(min-width:768px){
  .rx-supp{grid-template-columns:1.1fr 1.7fr auto auto;gap:24px 32px;align-items:start}
  .rx-supp div:nth-child(-n+2){grid-column:auto}
  .rx-supp dd a{width:auto}
}
@media(prefers-reduced-motion:reduce){
  .rx-tx-p:not([hidden]){animation:none}
  .rx-tx-ind,.rx-tx-btn::after,.rx-tx-tab,.rx-supp dd a{transition:none}
}

/* ═══ 05 · FAQ — compact ═════════════════════════════════════════════════ */
.rx-faq{margin-top:clamp(18px,2.6vw,26px);border-top:0.5px solid var(--rx-zinc);max-width:760px}
.rx-faq details{border-bottom:0.5px solid var(--rx-zinc)}
.rx-faq summary{display:flex;align-items:center;gap:14px;min-height:52px;padding:12px 0;font-weight:600;font-size:14.5px;line-height:1.4;cursor:pointer;list-style:none}
.rx-faq summary::-webkit-details-marker{display:none}
.rx-faq summary::after{content:"+";margin-left:auto;flex:0 0 auto;font-weight:600;font-size:19px;color:var(--rx-mute)}
.rx-faq details[open] summary::after{content:"–"}
.rx-a{padding:0 0 16px;font-size:13.5px;line-height:1.6;color:var(--ink-2);max-width:64ch}
.rx-a a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ═══ 06 · CLOSE ═════════════════════════════════════════════════════════
   Mr. Rancher's second and last appearance, and the only one where he is
   the subject rather than the operator. The portrait is a 4:5 studio frame
   with a baked backdrop — there is no cutout — so it is treated as a
   BACKDROP PANEL, not a floating card (owner, 2026-09-02): it stands on the
   section's bottom edge (the band's bottom padding is removed), its bottom
   corners are square, and the photograph is bottom-anchored, so his boots
   and the machine sit on the footer line at every width. A 4:5 container for
   a 4:5 photograph means no vertical crop, anywhere. The copy column centres
   against the panel. On a phone he follows the CTAs in source order, so the
   order button is never pushed down the screen. */
.rx-close{display:grid;gap:22px}
#order.rx-band{padding-bottom:0}
@media(min-width:900px){
  .rx-close{grid-template-columns:minmax(0,1fr) minmax(280px,340px);align-items:end;gap:56px}
  .rx-close>div:first-child{align-self:center}
  .rx-close-fig{justify-self:end}
}
.rx-close .rx-actions{margin-top:26px}
/* THE SEAM, AND WHY IT IS SOLVED THIS WAY. The photograph has a BAKED warm
   studio backdrop - there is no cutout - so a dark plate behind it changes
   nothing: the picture is opaque and covers whatever it sits on. The plate
   below is the owner's graphite gradient and it is genuinely visible, because
   the photograph is MASKED: a single ellipse, opaque out to 55% of its radius
   and centred low at 82% height, so the top and the upper corners dissolve
   into the plate while Mr. Rancher, his boots and the machine at his feet all
   stay at full strength. Centring the ellipse low is what protects the
   machine - a symmetric edge-fade dimmed its cutting head (measured, eight
   candidates). If the mask is unsupported the photograph simply shows whole:
   the old hard rectangle, never a broken layout. */
.rx-close-fig{margin:0;border-radius:18px 18px 0 0;overflow:hidden;
  background:linear-gradient(180deg,#181B20 0%,#111317 100%);
  border:1px solid #27272A;border-bottom:0;aspect-ratio:4/5;width:100%;max-width:340px}
.rx-close-fig img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 100%;
  -webkit-mask-image:radial-gradient(115% 100% at 50% 82%,#000 55%,transparent 100%);
          mask-image:radial-gradient(115% 100% at 50% 82%,#000 55%,transparent 100%)}
@media(max-width:899px){.rx-close-fig{max-width:250px;justify-self:center;margin-top:10px}}
.rx-close-h{font-family:var(--f-display);font-weight:400;font-size:clamp(34px,4.4vw,56px);line-height:.96;letter-spacing:.02em}
.rx-close .rx-price{margin-top:14px;padding-top:0;border-top:0}
.rx-close .rx-price-amt{color:#fff}
.rx-close .rx-price-lab{color:rgba(255,255,255,.62)}
.rx-close .rx-actions{margin-top:0}
.rx-close .kb-btn-sec{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.rx-close .kb-btn-sec:hover{background:rgba(255,255,255,.08)}
body[data-rx="rxb45"] .kb-next{margin-top:0}
body[data-rx="rxb45"] .kb-foot{margin-top:0}

/* ═══ TAP TARGETS — page-scoped floor on inherited chrome ════════════════ */
body[data-rx="rxb45"] .kb-crumb a,
body[data-rx="rxb45"] .kb-crumb>span,
body[data-rx="rxb45"] .kb-foot a{display:inline-flex;align-items:center;min-height:44px}
body[data-rx="rxb45"] .kb-bar-logo{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
body[data-rx="rxb45"] .kb-langseg{height:44px}
body[data-rx="rxb45"] .kb-call{min-height:44px}

/* ═══ MOTION ═════════════════════════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  .rx-fcard,.rx-fcard-go::after,.rx-rail a::after{transition:none}
}