/* The Solar Pumping Inverter page.
 *
 * The page's own layout only. Everything it shares with the rest of the site —
 * the section rhythm, the cards, the image frames, the step list, the tables —
 * is in assets/css/sections.css and style.css, and the drawings are painted by
 * assets/css/illustrations.css. What is here is what is this page's alone: the
 * strip of pictures under the hero, the two arrangements side by side, the four
 * range cards, the selection route, the three power states, the specification
 * tabs and the inquiry at the end.
 *
 * Two habits this sheet keeps.
 *
 * A block is a single column on a narrow screen and a row above the breakpoint,
 * so nothing is positioned so tightly that a longer word or a translation
 * breaks it.
 *
 * Nothing is hidden by this sheet. A tab panel, a state panel and the diagram
 * arrangements are shown and hidden by the behaviour library and by
 * illustrations.css, so a visitor whose browser runs no script still reads the
 * whole page. */

/* ------------------------------------------- The picture in the hero -- */
/* The opening picture is one unit of the range on a white studio ground, and the
   hero frame is the site's pale grey one. The white is blended away exactly as the
   range cards and the pump cards further down blend theirs, so the unit stands on
   the frame instead of sitting in a white box on it. */
.page-hero__photo{mix-blend-mode:multiply}

/* --------------------------------------- The services under the hero -- */
/* Four short lines about how an order is placed — supplied from the factory,
   branded, configured to the buyer's own design, designed with the project. They
   are not products to compare, so the strip is typographic rather than a row of
   cards: four equal cells, a small icon and one line each, and a hairline between
   the cells. It sits on the surface colour with a hairline under it, the way the
   band it replaces did, so the navy hero still ends on a light line. */
.inv-services{
  padding-block:clamp(18px,2.4vw,28px);
  border-bottom:1px solid var(--color-line);
  background:var(--color-surface);
}

.inv-services__list{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin:0;
  padding:0;
  list-style:none;
}

.inv-service{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:0;
  padding-inline:clamp(10px,1.4vw,20px);
  border-left:1px solid var(--color-line);
}

.inv-service:first-child{border-left:0}

/* The same 32px tile the site gives an icon everywhere else, on the pale ground
   so it reads as a mark beside the words rather than as a button. */
.inv-service__icon{
  display:flex;
  flex:none;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:var(--radius-sm);
  background:var(--color-pale);
  color:var(--color-accent);
}

.inv-service__label{font-size:15px;font-weight:600;line-height:1.35;color:var(--color-heading)}

/* ------------------------------------ The conversion, as one compact card -- */
/* The product page names the conversion rather than explaining it again. One
   card holds it: the site's picture of the system on one side, the heading,
   the one paragraph and the single route to the page that tells the story in
   full on the other. It is a band rather than a column, so it reads as a
   passage between the service strip above and the capability cards below
   instead of as a section of its own. */
.conversion-card{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:center;
  gap:clamp(24px,3.4vw,48px);
  padding:clamp(22px,3vw,34px);
  background:var(--color-surface);
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-float);
}

/* The picture is contained in the pale frame rather than cropped to it: the card
   carries the whole system it names, at whatever shape the photograph has, the way
   every other frame on the site holds a product photograph. */
.conversion-card__media{overflow:hidden;border-radius:var(--radius-md)}
.conversion-card__photo{width:100%;height:100%;object-fit:contain}
.conversion-card__body .eyebrow{margin-bottom:14px}
.conversion-card__body h2{margin:0}
.conversion-card__text{margin:15px 0 0;max-width:52ch;font-size:16px;line-height:1.6;color:var(--color-muted)}

/* ------------------------------------------------------ Feature cards -- */
/* Six capabilities. The photograph comes first, the line drawing and the words
   under it: the picture says where the capability is, the words say what it is. */
.feature-card{display:flex;flex-direction:column;gap:14px}
.feature-card__frame{margin:0;background:var(--color-pale)}
.feature-card__photo{width:100%;height:100%;object-fit:cover}

.feature-card__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:var(--radius-sm);
  background:var(--color-accent-pale);
  color:var(--color-accent);
}

.feature-card__title{margin:0;font-size:17px;font-weight:600;line-height:1.35;color:var(--color-heading)}

/* Six of a kind read as two rows of three. The shared four-column grid fits
   four 220px cards at this width, which leaves the last two of six on a row of
   their own with two empty cells beside them. The minimum is raised here rather
   than the count fixed, so the row still folds to two and then to one as the
   screen narrows. The two four-card rows state their own columns further down. */
.pump-cards{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

/* -------------------------------------------------------- Range cards -- */
.range-card{display:flex;flex-direction:column;gap:10px}
.range-card__frame{margin:0 0 6px}

/* The same blend the pump cards and the rest of the site's product cards carry,
   for the same reason: four units photographed on white, shown in four pale
   frames, should read as four units and not as four white boxes. The frame's own
   contain is kept, so a tall cabinet and a wall-mounted unit are both shown
   whole in the one 4:3 box. */
.range-card__photo{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}

.range-card__range{
  margin:0;
  font-size:clamp(20px,2.2vw,26px);
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--color-heading);
  font-variant-numeric:tabular-nums;
}

.range-card__meta{margin:0;font-size:12px;letter-spacing:.02em;color:var(--color-muted)}
.range-card__title{margin:6px 0 0;font-size:15px;font-weight:600;color:var(--color-accent)}
.range-card__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:20px}
.range-card__actions .btn{min-height:44px;padding:10px 16px;font-size:14px}

/* The selection route is no longer laid out here: it is the one block on this
   page that is a set of answers and a panel that follows them, so it carries its
   own sheet (assets/css/inverter-selector.css) and the classes it prints all
   begin with "sel-" or "select-" and belong to it. */

/* ------------------------------------------------------- Power states -- */
/* The three states the system runs in, drawn as one picture: the array and the
   AC feed on either side of the inverter, the pump under it and the water at
   the end of the run. The equipment never moves, so a visitor compares three
   states of one system rather than reading three different drawings, and the
   state changes only what is switched on, how bright its line is and what the
   sky is doing.
 *
 * The rules below are written as the sunny state, which is the one the markup
 * ships in: a visitor whose browser runs no script — or who asked their system
 * for less motion — gets the whole system drawn, still, with nothing travelling
 * on it.
 *
 * The photograph behind the section is atmosphere only: laid at a seventh of
 * its strength under a white-to-transparent gradient, so the drawing keeps its
 * contrast whatever the picture is. */
.hybrid-section{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--color-surface);
}

.hybrid-section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:linear-gradient(180deg,var(--color-surface),transparent 78%),var(--hybrid-photo,none);
  background-position:center;
  background-size:cover;
  filter:blur(3px);
  opacity:.14;
}

/* The drawing takes about two thirds of the row and the words the rest. The DOM
   order already gives the order the section reads in — drawing, states,
   description, no-battery card, call to action — so a narrow screen only has to
   drop to one column. */
.hyb{
  display:grid;
  grid-template-columns:minmax(0,65fr) minmax(0,35fr);
  gap:clamp(24px,3.5vw,48px);
  align-items:start;
}

/* The drawing panel: the pale frame the site's pictures use, so a section that
   mixes a photograph and a drawing keeps one rhythm. It isolates its own layers
   because the sky behind the drawing is a negative z-index layer inside it. */
.hyb__stage{
  position:relative;
  isolation:isolate;
  /* The drawing inside is printed with overflow:visible, so its own ink — a
     label's leading, the sun's glow — can reach past the SVG box. The frame has
     to clip that without becoming a box a finger can drag sideways, which is what
     overflow:hidden makes of it and overflow:clip does not: clip paints the same
     picture and leaves nothing to scroll. The hidden line above is what a browser
     that does not read clip keeps. */
  overflow:hidden;
  overflow:clip;
  margin:0;
  padding:clamp(16px,2.4vw,28px);
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  background:var(--color-pale);
}

/* The sky the drawing stands in, behind everything else in the panel: a soft
   gradient rather than a picture, so the state changes the light without
   changing what the visitor has to read. All three are light on purpose — the
   page is a white/navy site and the labels on the drawing are navy — and only
   the ground colour changes, which is what lets the change interpolate in every
   browser instead of jumping. */
.hyb__weather{
  position:absolute;
  inset:0;
  z-index:-1;
  background-color:var(--color-pale);
  background-image:linear-gradient(180deg,transparent,var(--color-surface) 88%);
  transition:background-color 650ms ease;
}

.hyb[data-state="sunny"] .hyb__weather{background-color:var(--color-sun-pale)}
.hyb[data-state="cloudy"] .hyb__weather{background-color:var(--color-line)}
.hyb[data-state="night"] .hyb__weather{background-color:var(--color-field-line)}

/* The state said in words on the drawing itself, so the picture and the panel
   beside it can never disagree about which state is showing. It sits in the
   top-right corner rather than the top-left, because the sun's glow is drawn
   into that corner of both arrangements. */
.hyb__status{
  position:absolute;
  top:clamp(12px,1.6vw,18px);
  right:clamp(12px,1.6vw,18px);
  z-index:2;
  margin:0;
}

.hyb__chip{
  display:none;
  align-items:center;
  min-height:30px;
  padding:5px 14px;
  border:1px solid var(--color-line);
  border-radius:999px;
  background:rgba(255,255,255,.86);
  color:var(--color-heading);
  font-size:13px;
  font-weight:600;
  letter-spacing:.01em;
}

.hyb[data-state="sunny"] .hyb__chip[data-chip="sunny"],
.hyb[data-state="cloudy"] .hyb__chip[data-chip="cloudy"],
.hyb[data-state="night"] .hyb__chip[data-chip="night"]{display:inline-flex}

/* Two arrangements of the one drawing, one shown at a time: a phone gets a
   stacked system at its own size rather than a shrunken wide one. */
.hyb__svg{display:block;width:100%;height:auto;overflow:visible}
.hyb__svg--stack{display:none}
.hyb__caption{margin:14px 0 0;font-size:12px;line-height:1.5;color:var(--color-muted)}

/* ------------------------------------------------------- The drawing -- */
/* Every colour comes from the tokens, and the drive is the one filled, accented
   object: it is the part the page sells. The array's energy is the deeper amber
   rather than the sun accent, because a 2px line of the accent on white is not
   readable. */
.hyb-sky__disc{fill:var(--color-sun)}
.hyb-sky__glow{fill:var(--color-sun);opacity:0}
.hyb-sky__rays{stroke:var(--ill-energy-line);stroke-width:2;stroke-linecap:round}
.hyb-sky__moon{fill:var(--color-surface);stroke:var(--color-line);stroke-width:1.5}
.hyb-sky__cloud{fill:var(--color-surface);stroke:var(--color-line);stroke-width:1.5;stroke-linejoin:round}

/* The cloud and the moon are drawn in the markup but hidden here: the sunny
   state is the one the section starts in, and the sky shows one of the three. */
.hyb-sky__cloud,
.hyb-sky__moon{opacity:0}

.hyb-pv__frame{fill:var(--ill-panel);stroke:var(--ill-energy-line);stroke-width:2.5}
.hyb-pv__cells{fill:var(--color-pale);stroke:var(--ill-energy-line);stroke-width:1.5;stroke-linejoin:round}

.hyb-grid__base{stroke:var(--ill-structure);stroke-width:2.5;stroke-linecap:round}
.hyb-grid__tower{fill:none;stroke:var(--ill-structure);stroke-width:2;stroke-linecap:round}
.hyb-grid__set{fill:var(--color-surface);stroke:var(--ill-structure-soft);stroke-width:2}

.hyb-inv__body{fill:var(--ill-drive-pale);stroke:var(--ill-drive);stroke-width:2.5}
.hyb-inv__lid{fill:var(--ill-drive)}
.hyb-inv__display{fill:var(--color-surface);stroke:var(--ill-drive);stroke-width:1.5}
.hyb-inv__readout{fill:none;stroke:var(--ill-energy-line);stroke-width:2;stroke-linecap:round}
.hyb-inv__led{fill:var(--ill-energy-line)}
.hyb-inv__vents{fill:var(--ill-drive);opacity:.35}
.hyb-inv__terminals{fill:var(--color-surface);stroke:var(--ill-drive);stroke-width:1.5}
.hyb-inv__blocks{fill:var(--ill-drive)}

.hyb-pump__base{fill:var(--color-pale);stroke:var(--ill-structure);stroke-width:2}
.hyb-pump__motor{fill:var(--color-surface);stroke:var(--ill-structure);stroke-width:2.5}
.hyb-pump__fins{fill:var(--ill-structure-soft)}
.hyb-pump__coupling{fill:var(--ill-structure-soft)}
.hyb-pump__casing{fill:var(--color-surface);stroke:var(--ill-structure);stroke-width:2.5}
.hyb-pump__eye{fill:var(--ill-drive-pale);stroke:var(--ill-structure);stroke-width:1.5}
.hyb-pump__discharge{fill:var(--color-pale);stroke:var(--ill-structure);stroke-width:2}

.hyb-water__pipe{fill:none;stroke:var(--ill-water);stroke-width:4;stroke-linecap:round}
.hyb-water__drops{fill:var(--ill-water)}
.hyb-water__furrows{fill:none;stroke:var(--ill-water);stroke-width:1.5;stroke-linecap:round;opacity:.55}

.hyb-label{fill:var(--color-heading);font-family:var(--font-body);font-size:var(--hyb-fs,15px);font-weight:600}
.hyb-label--strong{font-weight:700}

/* Every colour a state changes is the same 200ms change the rest of the site
   uses for a colour, so the drawing never jumps from one state to the next. */
.hyb-link__line,
.hyb-link__head,
.hyb-sky__disc,
.hyb-sky__rays,
.hyb-sky__cloud,
.hyb-sky__moon,
.hyb-part--pv{transition:stroke var(--transition-mid),fill var(--transition-mid),opacity var(--transition-mid)}

/* A link is complete at rest — the picture needs no script — and normalised with
   pathLength="100", which is what lets one dash scale drive a line of any
   length: the line draws itself in, and a travelling highlight reads as a flow
   because a wide faint copy of the same path sits under a small bright one. */
.hyb-link__line{fill:none;stroke:var(--color-line);stroke-width:2;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0}
.hyb-link__head{stroke:none;fill:var(--color-line)}
.hyb-link[data-kind="solar"] .hyb-link__line{stroke:var(--ill-energy-line)}
.hyb-link[data-kind="solar"] .hyb-link__head{fill:var(--ill-energy-line)}
.hyb-link[data-kind="grid"] .hyb-link__line{stroke:var(--color-line);stroke-dasharray:7 6}
.hyb-link[data-kind="grid"] .hyb-link__head{fill:var(--color-line)}
.hyb-link[data-kind="out"] .hyb-link__line{stroke:var(--ill-drive)}
.hyb-link[data-kind="out"] .hyb-link__head{fill:var(--ill-drive)}
.hyb-link[data-kind="water"] .hyb-link__line{stroke:var(--ill-water)}
.hyb-link[data-kind="water"] .hyb-link__head{fill:var(--ill-water)}

/* Four speeds, so the four flows never move in lockstep. The particles are off
   until the section is being read (.is-live), which is what keeps the drawing
   still for a visitor who never scrolls to it. */
.hyb-link[data-kind="solar"]{--hyb-speed:3.2s}
.hyb-link[data-kind="grid"]{--hyb-speed:4.2s}
.hyb-link[data-kind="out"]{--hyb-speed:2.6s}
.hyb-link[data-kind="water"]{--hyb-speed:3.6s}

.hyb-flow__glow,
.hyb-flow__dot{fill:none;stroke-linecap:round;stroke-dasharray:10 90;stroke-dashoffset:100;opacity:0}

.hyb-flow__glow{stroke-width:12;stroke:var(--ill-energy-line)}
.hyb-flow__dot{stroke-width:6;stroke:var(--ill-energy-line)}
.hyb-link[data-kind="grid"] .hyb-flow__glow,
.hyb-link[data-kind="grid"] .hyb-flow__dot,
.hyb-link[data-kind="out"] .hyb-flow__glow,
.hyb-link[data-kind="out"] .hyb-flow__dot{stroke:var(--ill-drive)}
.hyb-link[data-kind="water"] .hyb-flow__glow,
.hyb-link[data-kind="water"] .hyb-flow__dot{stroke:var(--ill-water)}

.hyb.is-live .hyb-flow__dot{opacity:1;animation:hober-flow-dash var(--hyb-speed,3.2s) linear infinite}
.hyb.is-live .hyb-flow__glow{opacity:.16;animation:hober-flow-pulse var(--hyb-speed,3.2s) ease-in-out infinite}

/* --------------------------------------------------- What a state does -- */
/* Sunny: the array runs the pump. The solar path is lit and travelling, and the
   AC feed is on standby — drawn, dashed and still, which is what standby looks
   like, so a visitor can see the second source is there and not in use. */
.hyb[data-state="sunny"] .hyb-sky__glow{opacity:.35}
.hyb[data-state="sunny"] .hyb-link[data-kind="grid"] .hyb-flow__dot,
.hyb[data-state="sunny"] .hyb-link[data-kind="grid"] .hyb-flow__glow{opacity:0;animation:none}

/* Cloudy: the sun is behind the cloud and the array is still working, so the
   solar path stays lit but dimmer and slower — the sun's own numbers, said in
   motion — and the AC feed takes up the rest of the load. */
.hyb[data-state="cloudy"] .hyb-sky__disc,
.hyb[data-state="cloudy"] .hyb-sky__rays{opacity:.45}
.hyb[data-state="cloudy"] .hyb-sky__glow{opacity:.22}
.hyb[data-state="cloudy"] .hyb-sky__cloud{opacity:1}
.hyb[data-state="cloudy"] .hyb-link[data-kind="solar"] .hyb-link__line,
.hyb[data-state="cloudy"] .hyb-link[data-kind="solar"] .hyb-link__head{opacity:.75}
.hyb[data-state="cloudy"] .hyb-link[data-kind="solar"]{--hyb-speed:6.4s}
.hyb[data-state="cloudy"] .hyb-link[data-kind="grid"] .hyb-link__line{stroke:var(--ill-drive);stroke-dasharray:100}
.hyb[data-state="cloudy"] .hyb-link[data-kind="grid"] .hyb-link__head{fill:var(--ill-drive)}

/* Night: there is no array output to draw, so the array fades and its edges go
   grey and the solar path stops travelling — the state says so in words beside
   it as well. The moon takes the sun's place and the AC feed carries the pump. */
.hyb[data-state="night"] .hyb-sky__disc,
.hyb[data-state="night"] .hyb-sky__rays,
.hyb[data-state="night"] .hyb-sky__glow,
.hyb[data-state="night"] .hyb-sky__cloud{opacity:0}
.hyb[data-state="night"] .hyb-sky__moon{opacity:1}
.hyb[data-state="night"] .hyb-part--pv{opacity:.4}
.hyb[data-state="night"] .hyb-pv__frame,
.hyb[data-state="night"] .hyb-pv__cells{stroke:var(--ill-structure-soft)}
.hyb[data-state="night"] .hyb-link[data-kind="solar"] .hyb-link__line{stroke:var(--ill-structure-soft)}
.hyb[data-state="night"] .hyb-link[data-kind="solar"] .hyb-link__head{fill:var(--ill-structure-soft)}
.hyb[data-state="night"] .hyb-link[data-kind="solar"] .hyb-flow__dot,
.hyb[data-state="night"] .hyb-link[data-kind="solar"] .hyb-flow__glow{opacity:0;animation:none}
.hyb[data-state="night"] .hyb-link[data-kind="grid"] .hyb-link__line{stroke:var(--ill-drive);stroke-dasharray:100}
.hyb[data-state="night"] .hyb-link[data-kind="grid"] .hyb-link__head{fill:var(--ill-drive)}

/* ------------------------------------------------ The opening sequence -- */
/* Played once, in the order the system is built — sky, array, AC feed, drive,
   pump, water — with each part carrying its own delay in --hyb-in. Fill-mode
   backwards is what holds the start state during that delay, so a part does not
   appear before its turn, and nothing here flashes, pulses or loops. */
@keyframes hyb-part-in{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

@keyframes hyb-label-in{
  from{opacity:0}
  to{opacity:1}
}

@keyframes hyb-line-in{
  from{stroke-dashoffset:100}
  to{stroke-dashoffset:0}
}

@keyframes hyb-head-in{
  from{opacity:0}
  to{opacity:1}
}

.hyb.is-live .hyb-part > g{animation:hyb-part-in 500ms ease-out var(--hyb-in,0ms) 1 backwards}
.hyb.is-live .hyb-label{animation:hyb-label-in 500ms ease-out var(--hyb-in,0ms) 1 backwards}
.hyb.is-live .hyb-link__line{animation:hyb-line-in 550ms ease-out var(--hyb-in,0ms) 1 backwards}
.hyb.is-live .hyb-link__head{animation:hyb-head-in 300ms ease-out calc(var(--hyb-in,0ms) + 320ms) 1 backwards}

/* The loops that run while the section is being read: the sun's glow, the cloud
   drifting a few percent across it, the impeller turning in its casing and the
   spray falling on the furrows. All slow, and all of them stop together when
   the section is scrolled out of view. */
@keyframes hyb-glow-breathe{
  0%,100%{opacity:.28}
  50%{opacity:.5}
}

@keyframes hyb-cloud-drift{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(7px)}
}

@keyframes hyb-impeller{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

@keyframes hyb-spray{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(3px)}
}

.hyb.is-live[data-state="sunny"] .hyb-sky__glow,
.hyb.is-live[data-state="cloudy"] .hyb-sky__glow{animation:hyb-glow-breathe 6s ease-in-out infinite}
.hyb.is-live[data-state="cloudy"] .hyb-sky__cloud{animation:hyb-cloud-drift 12s ease-in-out infinite}
.hyb.is-live .hyb-pump__impeller{animation:hyb-impeller 7s linear infinite}
.hyb.is-live .hyb-water__drops{animation:hyb-spray 6.5s ease-in-out infinite}

/* The impeller turns about the centre of its own casing: the fill-box of that
   group is the three spokes, and their centre is the casing centre. The pump
   keeps running in every state, which is the point of the section. */
.hyb-pump__impeller{transform-box:fill-box;transform-origin:center}

/* Off screen the section keeps every pixel of its picture and loses only its
   motion: pausing is cheaper than stopping and leaves the drawing exactly where
   the visitor left it. Nothing is ever hidden here. */
.hyb.is-away .hyb-flow__dot,
.hyb.is-away .hyb-flow__glow,
.hyb.is-away .hyb-sky__glow,
.hyb.is-away .hyb-sky__cloud,
.hyb.is-away .hyb-pump__impeller,
.hyb.is-away .hyb-water__drops{animation-play-state:paused}

/* ------------------------------------------------------------ The tabs -- */
/* The state is the visitor's to choose, so the three states are the site's own
   state buttons: a pill, the site's transition on colour, and the accent when
   chosen. The tab set itself, and which panel is hidden, is assets/js/tabs.js
   and assets/css/tabs.css — this sheet only says what they look like. */
.hyb__aside{display:flex;flex-direction:column;gap:22px;min-width:0}
.hyb__list{display:flex;flex-wrap:wrap;gap:10px}

.hyb__tab{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:10px 18px;
  border:1px solid var(--color-line);
  border-radius:999px;
  background:var(--color-surface);
  color:var(--color-heading);
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition:background var(--transition-mid),border-color var(--transition-mid),color var(--transition-mid);
}

.hyb__tab:hover{border-color:var(--color-accent);color:var(--color-accent)}
.hyb__tab[aria-selected="true"]{border-color:var(--color-accent);background:var(--color-accent);color:#fff}
.hyb__tab:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.hyb__tab-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px}
.hyb__tab[aria-selected="true"] .hyb__tab-icon{color:#fff}

/* ----------------------------------------------------------- The panel -- */
/* The same three states as words, so the section answers a visitor who never
   touches a tab and a screen reader that is given the same three answers. */
.hyb__panels{min-width:0}
.hyb__panel-title{margin:0 0 10px;font-size:21px;font-weight:700;letter-spacing:-.01em;color:var(--color-heading)}
.hyb__panel-text{margin:0 0 18px;font-size:16px;line-height:1.6;color:var(--color-muted)}
.hyb__mix{margin:0}
.hyb__mix-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:7px 0}
.hyb__mix-row dt{margin:0;font-size:14px;font-weight:600;color:var(--color-heading)}
.hyb__mix-row dd{display:flex;align-items:center;gap:12px;margin:0}
.hyb__mix-bar{display:inline-block;width:56px;height:6px;border-radius:999px;background:var(--color-line);overflow:hidden}
.hyb__mix-fill{display:block;height:100%;width:var(--hyb-fill,0%);border-radius:999px;background:var(--ill-energy-line)}

/* Solar is the amber row and the AC feed is the blue one, in the drawing and in
   the figures: the two rows are told apart by where they are in the list rather
   than by a colour invented for them. */
.hyb__mix-row:nth-child(2) .hyb__mix-fill{background:var(--ill-drive)}
.hyb__mix-value{min-width:46px;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;color:var(--color-heading)}
.hyb__mix-note{margin:14px 0 0;font-size:13px;line-height:1.55;color:var(--color-muted)}

/* Not a battery: the section says why there is none, on the pale sun ground the
   page already uses for a note, and stays small so it never reads as a second
   panel beside the drawing. */
.hyb__battery{display:flex;align-items:flex-start;gap:14px;padding:14px 16px;border-radius:var(--radius-md);background:var(--color-sun-pale)}
.hyb__battery-icon{display:flex;flex:0 0 auto;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-sm);background:var(--color-surface);color:#7a5a12}
.hyb__battery-title{margin:0 0 4px;font-size:15px;font-weight:700;color:#7a5a12}
.hyb__battery-body p{margin:0 0 6px;font-size:13px;line-height:1.55;color:#7a5a12}
.hyb__battery-note{margin:0;font-size:12px;line-height:1.5;opacity:.85}

/* The way out of the section. The buttons and the row they sit in are the site's
   own; only the heading above them belongs to this component, and the rule above
   it is what separates the two questions — which state, and what to buy. */
.hyb__cta{margin:0;padding-top:22px;border-top:1px solid var(--color-line)}
.hyb__cta-title{margin:0;font-size:18px;font-weight:700;line-height:1.35;color:var(--color-heading)}

/* ---------------------------------------------------------- Responsive -- */
/* The wide arrangement is swapped for the stacked one at the same breakpoint
   illustrations.css uses for its own stacked diagrams. */
@media (max-width:820px){
  .hyb__svg--wide{display:none}
  .hyb__svg--stack{display:block}
}

/* A phone swipes the three states rather than wrapping them: three wrapped pills
   would push the drawing off the screen, and there is no hover on touch. */
@media (max-width:640px){
  .hyb__stage{padding:14px}
  .hyb__list{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .hyb__list::-webkit-scrollbar{display:none}
  .hyb__tab{flex:0 0 auto;scroll-snap-align:start}
}

/* Reduced motion: the states still change, they just arrive as a plain swap. No
   particle is ever drawn, nothing turns, nothing breathes and no colour eases —
   and the drawing is complete without any of it, so a visitor who asked for
   less motion gets the answer rather than an empty panel. */
@media (prefers-reduced-motion: reduce){
  .hyb,
  .hyb *{animation:none !important;transition:none !important}
  .hyb-flow__dot,
  .hyb-flow__glow{opacity:0 !important}
}

/* --------------------------------------------------------- Pump duties -- */
.pump-card{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.pump-card__frame{margin:0;width:100%}
/* A pump photograph is taken on white and the frame is the site's pale grey, so
   the white is blended away exactly as the site's own product cards do it
   (.product__photo, .card__photo, .series-card__photo): a picture that keeps its
   white ground sits in a white box inside the frame and reads as a pasted-in
   rectangle rather than as the product standing in the page. */
.pump-card__photo{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.pump-card__icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-sm);background:var(--color-accent-pale);color:var(--color-accent)}
.pump-card__title{margin:0;font-size:16px;font-weight:600;line-height:1.35;color:var(--color-heading)}
.pump-cards__cta{margin-top:28px}

/* --------------------------------------------------- Monitoring block -- */
.monitor{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,3.5vw,48px);
  align-items:start;
}

.monitor__screen{padding:clamp(16px,2.4vw,28px);border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-pale)}
.monitor__svg{display:block;width:100%;height:auto}
.monitor__body{display:flex;flex-direction:column;gap:20px;min-width:0}
.monitor__list{margin:0}
.monitor__connect{margin:0}
.monitor__shot{margin:0}
.monitor__photo{width:100%;height:100%;object-fit:cover}
.monitor__cta{margin-top:0}
.monitor__note{margin-top:0}

/* ------------------------------------------------ Specification table -- */
/* The whole range in one table: one row per model, one column per basic
   parameter, and a last column handing that model on to the page that publishes
   it in full. There is no tab strip to switch any more, so this block hides no
   row and no column, and its class names carry the prefix "inv-models" rather
   than the deleted component's "spec-families". */
.inv-models{
  margin-top:clamp(24px,3vw,40px);
  padding:clamp(18px,2.4vw,28px);
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  background:var(--color-surface);
}

/* The scrolling region. It carries tabindex="0" and role="region" in the markup,
   so a keyboard visitor can reach the table and scroll it. */
.inv-models__scroll{
  overflow-x:auto;
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  background:var(--color-surface);
  -webkit-overflow-scrolling:touch;
}

/* Nine columns stay legible because the table keeps a minimum width and the
   region scrolls instead: below that width the cells would fold a word per line.
   The header row is left plain rather than sticky — the region scrolls sideways
   only, so a sticky offset would hold it against an edge that never moves — and
   each row is read as one line of figures, which is why no figure cell wraps. */
.inv-models__table{width:100%;min-width:900px;border-collapse:collapse;font-size:14px}
.inv-models__table caption{text-align:left;padding:14px 16px 12px;font-size:12px;line-height:1.5;color:var(--color-muted)}

.inv-models__table th,
.inv-models__table td{padding:12px 14px;border-bottom:1px solid var(--color-line);text-align:left;vertical-align:middle;white-space:nowrap}

.inv-models__table thead th{
  background:var(--color-pale);
  color:var(--color-heading);
  font-size:13px;
  font-weight:700;
}

/* The model is the row's own heading, so it reads heavier than the figures
   beside it, and the figures are set in lining tabular digits so a column of
   them can be compared down the page. */
.inv-models__model{font-weight:600;color:var(--color-heading)}
.inv-models__value{color:var(--color-text);font-variant-numeric:tabular-nums}
/* A figure the model's own page does not state: quieter than a figure, because
   it is the absence of one rather than a value to compare. */
.inv-models__empty{color:var(--color-muted)}
.inv-models__action{white-space:nowrap}
/* The site's .text-link is a space-between row written for a card foot, so in a
   table cell it is set to hug its own words, the way the collection table's own
   action link is. */
.inv-models__action .text-link{display:inline-flex;font-size:13px}
.inv-models__table tbody tr:last-child th,
.inv-models__table tbody tr:last-child td{border-bottom:0}
.inv-models__table tbody tr:hover th,
.inv-models__table tbody tr:hover td{background:var(--color-pale)}

.inv-models__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.inv-models__note{margin:18px 0 0;font-size:13px;line-height:1.55;color:var(--color-muted);max-width:80ch}

/* The facet row above the table: three selects narrowing the rows the server has
   already printed. The row wraps rather than squeezing its fields — on a narrow
   screen the fields stack, one question per line — and every field keeps its own
   label above its own select, so a wrapped row still reads as three questions. */
.inv-models__filter{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 24px;margin:0 0 18px}
.inv-models__filter-title{margin:0;font-size:13px;font-weight:700;color:var(--color-heading)}
.inv-models__filter-fields{display:flex;flex-wrap:wrap;gap:12px 20px;min-width:0}
.inv-models__field{display:flex;flex-direction:column;gap:6px;min-width:0}
.inv-models__field-label{font-size:12px;font-weight:600;color:var(--color-muted)}
/* The site's own select is a full-width control; here three of them stand in a
   row, so each keeps a readable width of its own and never overflows its cell. */
.inv-models__field-select{width:auto;min-width:170px;max-width:100%}

/* The result line. It is the polite live region the script writes into and it is
   empty until a facet is chosen, so it is never hidden — only ever empty. */
.inv-models__count{margin:0;font-size:13px;line-height:1.5;color:var(--color-muted)}

/* The empty state, hidden until nothing matches: the count line has already said
   so in the live region, and this is the way out of the dead end. It is targeted
   by its own data attribute because .inv-models__empty is the em dash a table
   cell prints for a figure the source does not state. */
.inv-models__empty[data-spec-empty]{margin:0 0 18px;padding:clamp(16px,2vw,22px);border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-pale);font-size:14px;line-height:1.55;color:var(--color-text)}
.inv-models__empty[data-spec-empty] p{margin:0 0 14px}
.inv-models__empty[data-spec-empty] .btn{margin:0}
.inv-models__empty[data-spec-empty][hidden]{display:none}

/* --------------------------------------------------------- Applications -- */
.app-cards{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.app-card{display:flex;flex-direction:column;gap:14px;padding:0;overflow:hidden}
.app-card__frame{margin:0;border:0;border-radius:0;border-bottom:1px solid var(--color-line)}
.app-card__photo{width:100%;height:100%;object-fit:cover}
.app-card__body{display:flex;flex-direction:column;gap:8px;padding:0 clamp(18px,2.2vw,24px) clamp(18px,2.2vw,24px)}
.app-card__icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-sm);background:var(--color-accent-pale);color:var(--color-accent)}
.app-card__title{margin:0;font-size:17px;font-weight:600;color:var(--color-heading)}
.app-card__note{margin:0;font-size:14px;line-height:1.55;color:var(--color-muted)}
.app-cards__cta{margin-top:28px}

/* ------------------------------------------------------- Support block -- */
.support-photo{width:100%;height:100%;object-fit:cover}
.support-list{margin-top:24px;gap:20px}

/* ---------------------------------------------------------- The inquiry -- */
.inv-cta__grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(28px,4vw,56px);
  align-items:start;
}

.inv-cta__form{padding:clamp(20px,2.6vw,32px);border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-surface)}
.inv-cta__actions{margin-top:24px}
.inv-cta__aside{display:flex;flex-direction:column;gap:20px}
.inv-cta__photo{width:100%;height:100%;object-fit:cover}
.inv-cta__list{gap:18px}

/* ----------------------------------------------------------- Responsive -- */
@media (max-width:1000px){
  .hyb,
  .monitor,
  .inv-cta__grid{grid-template-columns:minmax(0,1fr);gap:28px}
}

/* The card folds to one column once the picture and the words no longer fit
   side by side: the picture keeps the top, the words follow it. */
@media (max-width:860px){
  .conversion-card{grid-template-columns:minmax(0,1fr)}
}

/* The service strip folds to two cells and then to one. The rule between the
   cells turns with the grid: a hairline above a cell rather than at its left, so
   the strip reads as rows of lines at every width. */
@media (max-width:860px){
  .inv-services__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inv-service{
    justify-content:flex-start;
    padding-block:12px;
    padding-inline:0;
    border-left:0;
    border-top:1px solid var(--color-line);
  }
  .inv-service:nth-child(-n+2){border-top:0}
}

@media (max-width:640px){
  .inv-services__list{grid-template-columns:minmax(0,1fr)}
  .inv-service:nth-child(-n+2){border-top:1px solid var(--color-line)}
  .inv-service:first-child{border-top:0}
  /* The table keeps its minimum width — the region scrolls it — so only the type
     and the cell padding come down and seven columns stay legible. */
  .inv-models{padding:14px}
  .inv-models__table{font-size:13px}
  .inv-models__table th,
  .inv-models__table td{padding:10px}
}

/* ------------------------------------- The system check before an order -- */
/* The energy path at 65% and the checks made before a configuration is
   recommended at 35%, on one baseline. The picture is shown whole — the frame is
   the site's own .media-frame, whose image is contained rather than cropped — and
   the words above it say what the drawing shows, so nothing in the picture is the
   only place a visitor can read it. Under the two columns, four lines in one row
   say what the check is worth. The block is wider than the page's other sections
   because the drawing carries the labels of the whole system; the cap is set
   here rather than in the shared container. */
.container.match__inner{max-width:1440px}
.match__grid{
  display:grid;
  grid-template-columns:minmax(0,65fr) minmax(0,35fr);
  gap:clamp(28px,4vw,56px);
  align-items:center;
}
.match__media{margin:0}
.match__label{margin:0 0 16px}
.match__label h3{margin:0;font-size:16px;font-weight:600;color:var(--color-heading)}
.match__label p{margin:5px 0 0;font-size:13px;line-height:1.5;color:var(--color-muted)}
.match__frame{border-radius:16px;background:var(--color-surface);box-shadow:var(--shadow-float)}
.match__diagram{display:block}

.match__title{
  margin:0;
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--color-accent);
}
.match__statement{
  margin:10px 0 0;
  font-size:clamp(21px,2.1vw,25px);
  font-weight:600;
  line-height:1.3;
  color:var(--color-heading);
}
.match__intro{margin:12px 0 0;font-size:15px;line-height:1.6;color:var(--color-muted)}

.match__checks{display:grid;gap:18px;margin:26px 0 0;padding:0;list-style:none}
.match__check{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:start}
.match__check-icon{
  grid-row:span 2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border:1px solid var(--color-line);
  border-radius:50%;
  background:var(--color-surface);
  color:var(--color-accent);
}
.match__check-title{margin:0;font-size:15px;font-weight:600;line-height:1.4;color:var(--color-heading)}
.match__check-text{margin:3px 0 0;font-size:14px;line-height:1.55;color:var(--color-muted)}

.match__note{
  margin:26px 0 0;
  padding:18px 20px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  background:var(--color-accent-pale);
}
.match__note p{margin:0;font-size:14px;line-height:1.55;color:var(--color-text)}
.match__note-lead{font-size:15px;font-weight:600;color:var(--color-heading)}
.match__note p + p{margin-top:6px}

.match__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:26px}
/* The secondary link sits beside a button rather than in a card, so it takes its
   own width instead of the row's, and it underlines on hover the way a link in
   running text does. */
.match__actions .text-link{width:auto;align-items:center}
.match__actions .text-link:hover{text-decoration:underline}

.match__trust{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,2.4vw,32px);
  margin:clamp(34px,4.5vw,56px) 0 0;
  padding:clamp(22px,3vw,32px) 0 0;
  border-top:1px solid var(--color-line);
  list-style:none;
}
.match__trust-item{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:start}
.match__trust-icon{grid-row:span 2;padding-top:2px;color:var(--color-accent)}
.match__trust-title{margin:0;font-size:15px;font-weight:600;line-height:1.4;color:var(--color-heading)}
.match__trust-text{margin:3px 0 0;font-size:13px;line-height:1.55;color:var(--color-muted)}

@media (max-width:980px){
  .match__grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .match__trust{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .match__trust{grid-template-columns:minmax(0,1fr);gap:18px}
}

/* ====================================================================== */
/* The restructured page.
 *
 * Everything from here down was added when the page was rebuilt: the facts
 * under a range card, the line under a pump card, and the three sections the
 * page now carries — quality, technology and support. It is appended rather
 * than threaded into the blocks above so that every rule the page already had
 * stays exactly as it was written, and so this addition can be read, and
 * removed, as one piece.
 *
 * Tokens still decide every colour, radius, shadow and transition; the one
 * hex value below is the tag colour the battery note already uses, which has
 * no token of its own.
 */

/* ------------------------------------------------------ Range card facts -- */
/* The four facts a range states — output phase, voltage, enclosure, how many
   models — are what a buyer reads before price, so they are a two-column list
   rather than four more sentences: the label at the left in the muted colour,
   the value at the right in the heading colour, and a hairline above every row
   including the first, which is what makes the block read as a table without
   carrying a table's weight. The card is already a flex column, so the list
   adds no margin of its own: it sits tight under .range-card__range and the
   headline keeps its place as the claim the facts support. Values are set in
   tabular digits so the four of them line up down the card. */
.range-card__specs{display:flex;flex-direction:column;margin:0;padding:0}
.range-card__spec{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--color-line)}
.range-card__spec dt{min-width:0;font-size:12px;font-weight:600;color:var(--color-muted)}
.range-card__spec dd{margin:0;font-size:13px;font-weight:600;text-align:right;color:var(--color-heading);font-variant-numeric:tabular-nums}

/* -------------------------------------------- One line under a pump card -- */
/* Each compatible-pump card gained one sentence saying what that pump is for,
   under the title and above the card's own foot. It is set at the card's own
   scale — 13px in the muted colour — rather than as a callout, so the picture
   and the title stay the card's headline.
 *
 * The selector is scoped to .pump-cards on purpose. The selection page styles
 * .pump-card__note as a sun-bordered quote for its own recommended card, that
 * sheet has no page condition and is printed after this one, so an unscoped
 * rule here would be overruled by its border, its padding and its pale ground.
 * The two classes say this is the pump grid's note and nothing else's. */
.pump-cards .pump-card__note{margin:0;font-size:13px;line-height:1.55;color:var(--color-muted)}

/* The lead above the grid says what the four cards have in common. 70ch keeps
   it a comfortable measure without a fixed width. It carries the pair's only
   margin — the grid's own margin is 0 — so the cards start below it, and it
   drops that margin when it happens to be the last thing in the block. */
.pump-cards__lead{margin:0 0 clamp(20px,2.6vw,28px);max-width:70ch;font-size:16px;line-height:1.6;color:var(--color-muted)}
.pump-cards__lead:last-child{margin-bottom:0}

/* ---------------------------------------------------------- Quality cards -- */
/* How the range is built: one photographed card per claim, then the checks the
   factory makes on every unit. The shared four-column grid is not used here —
   these cards are a photograph first, so the minimum is raised to 280px and the
   row folds to three, then two, then one as the screen narrows rather than
   shrinking the pictures. The card keeps the page's card anatomy: a flex column
   with a gap, a pale 16:9 frame, the 36px accent tile, then the words. */
.quality-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.quality-card{gap:14px}
.quality-card__frame{margin:0;background:var(--color-pale)}
/* The picture sits inside the 16:9 frame rather than filling it: one of the
   three is the certificate contact sheet, a tall portrait of documents, and a
   frame that fills crops it to a band of paper with the headings cut off. The
   claim the card makes is that the documents can be checked, so the sheet is
   shown whole. The other two letterbox in the same box, which is what makes the
   row read as three pictures of one size. The frame is named as well as the
   picture because the shared .media-frame img rule is one class plus one type:
   naming both writes the rule the row needs rather than leaving it to which of
   the two the cascade happens to pick. */
.quality-card__frame img,
.quality-card__photo{width:100%;height:100%;object-fit:contain}
.quality-card__icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-sm);background:var(--color-accent-pale);color:var(--color-accent)}
.quality-card__title{margin:0;font-size:16px;font-weight:600;line-height:1.35;color:var(--color-heading)}
.quality-card__note{margin:0;font-size:13px;line-height:1.55;color:var(--color-muted)}

/* The strip under the grid: what is checked on every unit, in the quietest form
   the page has — the pale ground and a hairline rather than another card — so it
   reads as a footnote to the pictures above it and not as a claim beside them.
   The shared .checklist carries a 25px margin written for a column of copy, so
   it is tightened here: the list belongs to the strip's own heading. */
.quality-note{margin:26px 0 0;padding:18px 20px;border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-pale)}
.quality-note__title{margin:0;font-size:15px;font-weight:600;color:var(--color-heading)}
.quality-note .checklist{margin:10px 0 0}
.quality-note .checklist li{margin:6px 0;font-size:14px;color:var(--color-muted)}
.quality-note .checklist li:last-child{margin-bottom:0}

/* ------------------------------------------------------------- Technology -- */
/* What the drive does rather than what it is: one card per technique, with the
   drawing the site holds for that technique above the words and the benefit held
   at the bottom of the card. The drawings are illustrations on a plain ground —
   4:3 or square — rather than photographs, so each one is contained in the frame
   instead of cropped, and the frame's own pale ground is what the drawing is
   read against. 260px is still the minimum: the cards carry a picture now, but
   the picture is wide and shallow, so four still fit a desktop row while the row
   folds cleanly on the way down. */
.tech-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.tech-card{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.tech-card__frame{align-self:stretch;margin:0;background:var(--color-pale)}
.tech-card__frame img,.tech-card__photo{width:100%;height:100%;object-fit:contain}
.tech-card__icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-sm);background:var(--color-accent-pale);color:var(--color-accent)}
.tech-card__title{margin:0;font-size:16px;font-weight:600;line-height:1.35;color:var(--color-heading)}

/* The condition a technique needs, said as a chip rather than as a sentence in
   front of the note: on the sun ground the page already uses for a
   qualification, and in the #7a5a12 the battery note is set in. That tag colour
   has no token of its own, which is why it is written as a value here exactly
   as it is there, and why it is the only literal colour in this block. */
.tech-card__flag{margin:0;padding:4px 10px;border-radius:999px;background:var(--color-sun-pale);color:#7a5a12;font-size:12px;font-weight:600;letter-spacing:.01em}

.tech-card__note{margin:0;font-size:14px;line-height:1.55;color:var(--color-muted)}

/* The benefit is the second half of the card: a hairline turns the note into the
   setup and this line into the answer. margin-top:auto holds it on the bottom
   edge, so benefits line up across cards whose notes are of different lengths.
   align-self:stretch is the one addition to the card's flex-start alignment, and
   it is what lets that hairline span the card instead of only the words on it. */
.tech-card__benefit{align-self:stretch;margin:auto 0 0;padding-top:10px;border-top:1px solid var(--color-line);font-size:14px;line-height:1.55;color:var(--color-heading)}

/* ---------------------------------------- The hybrid animation, compact -- */
/* The same component on a page that no longer has the height for it. The
   section's own spacing comes down, the drawing is capped and centred so the
   two columns stay balanced at the narrower width, and the caption and the
   panel's heading lose a few pixels each.
 *
 * This is a size change and nothing else. Nothing is hidden, clipped or
 * truncated — every word the full block prints is still printed — and the
 * weather, the part list, the three states and the four flows are not touched,
 * so a visitor who reads the compact variant has read the whole section. */
.hybrid-section--compact{padding-block:clamp(28px,4vw,52px)}
.hyb--compact{gap:clamp(18px,2.6vw,34px)}
.hyb--compact .hyb__stage{padding:clamp(12px,1.6vw,20px)}
.hyb--compact .hyb__svg{max-width:560px;margin-inline:auto}
.hyb--compact .hyb__caption{margin-top:10px;font-size:11px;line-height:1.45}
.hyb--compact .hyb__panel-title{font-size:18px}

/* -------------------------------------------------------- Support links -- */
/* The ways on from the page: a datasheet, a manual, an installer, a question
   answered. These are routes rather than claims, so the card is flat — the
   surface ground and a hairline, with the shadow arriving only under the
   pointer through .lift — and smaller than the page's other cards, and the whole
   title is the link, which is why the grid's own gap is tightened rather than
   left at the shared spacing. */
/* The line above the grid is the page's own .note-line, which carries a top
   margin and no bottom one: the gap under it is set here rather than on the
   shared class, which the page uses elsewhere against a card grid. */
.res-grid{margin-top:clamp(18px,2.4vw,26px);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(16px,2vw,24px)}
.res-card{display:flex;flex-direction:column;gap:8px;padding:18px 20px;border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-surface)}
.res-card__icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-sm);background:var(--color-accent-pale);color:var(--color-accent)}
.res-card__title{margin:0;font-size:15px;font-weight:600;line-height:1.35;color:var(--color-heading)}

/* The link inherits the title's colour, because on this card the heading is the
   link, and the underline waits for the pointer or the keyboard so the card
   reads as a heading at rest. */
.res-card__title a{color:inherit;text-decoration:none}
.res-card__title a:hover,.res-card__title a:focus-visible{text-decoration:underline}
.res-card__note{margin:0;font-size:13px;line-height:1.55;color:var(--color-muted)}

/* ------------------------------------------------------- The inquiry form -- */
/* The stocking questions are set apart from the fields every inquiry fills by a
   hairline and a line of their own, so a visitor asking about a pump or a model
   reads them as three optional wholesale questions rather than as three more
   fields the form is waiting for. */
.inv-cta__form .field__group{
  margin:0;
  padding-top:14px;
  border-top:1px solid var(--color-line);
  font-size:12.5px;
  font-weight:600;
  color:var(--color-muted);
}

/* ------------------------------------------------------------- Grid rows -- */
/* How many cards stand on a row is stated here rather than left to auto-fit.
   These blocks are read across — a range of families, the duties a drive is
   bought for, the services around it — and six cards that filled five places
   and left one alone on the next row read as a mistake, while a reader
   comparing two models does it down a column. So each grid names its columns:
   the two four-card rows stand as one row of four, six as two rows of three,
   and the eight routes as two rows of four. */
.feature-cards,.range-cards{grid-template-columns:repeat(4,minmax(0,1fr))}
.pump-cards,.tech-grid,.quality-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.res-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
/* The wholesale list stands in half the width, beside its photograph. */
.support-list{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Two of those counts cannot hold at every width without the cards becoming a
   column of words: the six-card grids drop to two — still equal rows — and the
   list beside the photograph to one, where its icons and lines have the room
   they were written for. The three photographed claims keep their row until the
   phone rule, since three cards across a tablet still compare. */
@media (max-width:1100px){
  /* The two four-card rows halve before anything else does: four cards at this
     width are still wider than the text they carry, and a fourth one left alone
     on a second row is the layout this rule replaced. */
  .feature-cards,.range-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pump-cards,.tech-grid,.res-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .support-list{grid-template-columns:minmax(0,1fr)}
  /* Three cards cannot be halved without leaving one alone, so the quality row
     holds its three columns while they still read (a tablet keeps ~275px a card,
     the width the grid was written for) and becomes one column rather than two. */
  .quality-grid{grid-template-columns:minmax(0,1fr)}
}

/* ---------------------------------------------------- The new blocks, narrow -- */
/* Below a phone's width the desktop padding comes down, because 20px of a 320px
   column is a fifth of the line, and every grid above folds to one column, where
   a card is read on its own rather than beside the one next to it. The compact
   animation needs no rule here: its clamps are already read at these widths, and
   the section's own small-screen rules above are left alone. */
@media (max-width:700px){
  .quality-note{padding:16px}
  .res-card{padding:16px}
  .feature-cards,.range-cards,.pump-cards,.tech-grid,.quality-grid,.res-grid{grid-template-columns:minmax(0,1fr)}
}