/* 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 strip under the hero -- */
/* Four pictures of the arrangement the page explains, with the arrows between
   them: a visitor who reads nothing else has the system right. */
.inv-flow-band{
  padding-block:clamp(24px,3.5vw,44px);
  border-bottom:1px solid var(--color-line);
  background:var(--color-surface);
}

.inv-flow__intro{
  margin:0 0 20px;
  font-size:14px;
  color:var(--color-muted);
  text-align:center;
}

.inv-flow{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  justify-content:center;
  gap:12px;
  margin:0;
  padding:0;
  list-style:none;
}

.inv-flow__node{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  min-width:200px;
  padding:14px 30px 14px 18px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  background:var(--color-surface);
}

.inv-flow__node:last-child{padding-right:18px}
.inv-flow__node--drive{border-color:var(--color-accent);background:var(--color-accent-pale)}
.inv-flow__node--water{border-color:var(--ill-water);background:var(--ill-water-pale)}

.inv-flow__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-flow__node--drive .inv-flow__icon{background:var(--color-surface)}
.inv-flow__node--water .inv-flow__icon{background:var(--color-surface);color:var(--ill-water)}
.inv-flow__label{font-size:14px;font-weight:600;line-height:1.3;color:var(--color-heading)}
.inv-flow__arrow{position:absolute;top:50%;right:8px;transform:translateY(-50%);color:var(--color-muted);font-size:15px}
.inv-flow__node:last-child .inv-flow__arrow{display:none}

/* ------------------------------------------------ The value, as one line -- */
/* The arrangement the section is about, read left to right. The drive is the
   node that carries the product photograph, so the middle of the line is the
   part being sold; the two nodes after it are the pump the visitor already has
   and the water that comes out of it. */
.value-flow{
  padding:clamp(22px,3vw,34px);
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  background:var(--color-surface);
}

/* Two arrangements, one under the other: the pump as it runs today, then the
   same pump with the array and the drive in front of it. */
.value-flow + .value-flow{margin-top:clamp(18px,2.4vw,28px)}

/* The first panel is read in the site's quiet grey, so the second is the one
   the eye lands on. */
.value-flow--before .value-flow__label{color:var(--color-muted)}

.value-flow__tag{
  margin:0 0 12px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--color-muted);
}

.value-flow__intro{margin:16px 0 0;max-width:72ch;font-size:16px;line-height:1.6;color:var(--color-muted)}

.value-flow__row{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  justify-content:center;
  gap:12px;
  margin:clamp(22px,3vw,32px) 0 0;
  padding:0;
  list-style:none;
}

/* A node is a card of its own and the arrow sits on its right edge, so the line
   wraps between nodes on a narrow screen rather than splitting one in two. */
.value-flow__node{
  position:relative;
  display:flex;
  flex:1 1 170px;
  max-width:360px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-width:0;
  padding:20px 32px 20px 20px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  background:var(--color-pale);
  text-align:center;
}

.value-flow__node:last-child{padding-right:20px}
.value-flow__node--drive{border-color:var(--color-accent);background:var(--color-accent-pale)}
.value-flow__node--water{border-color:var(--ill-water);background:var(--ill-water-pale)}

.value-flow__label{font-size:15px;font-weight:600;line-height:1.3;color:var(--color-heading)}
.value-flow__arrow{position:absolute;top:50%;right:9px;transform:translateY(-50%);color:var(--color-muted);font-size:16px}
.value-flow__node:last-child .value-flow__arrow{display:none}

/* The drive shown whole on a white ground of its own, so the node reads as the
   product the range below is sold as rather than as a picture that is there. The
   box takes the photograph's own proportions — most of the range is shot upright
   — and contain keeps any shape whole inside the node. */
.value-flow__photo{
  display:block;
  width:auto;
  max-width:100%;
  height:clamp(84px,8vw,108px);
  padding:8px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-sm);
  background:var(--color-surface);
  object-fit:contain;
}

.value-flow__note{margin:clamp(20px,2.6vw,28px) 0 0;font-size:13px;line-height:1.6;color:var(--color-muted)}

.value-note{margin-top:clamp(32px,5vw,64px)}
.value-note__photo{width:100%;height:100%;object-fit:cover}

/* ------------------------------------------------------ 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. */
.feature-cards,
.pump-cards{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

/* -------------------------------------------------------- Range cards -- */
.range-cards{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.range-card{display:flex;flex-direction:column;gap:10px}
.range-card__frame{margin:0 0 6px}

.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}

/* ----------------------------------------------------- Selection route -- */
.select-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(32px,4.5vw,64px);
  align-items:start;
}

.select-grid__steps{min-width:0}
.select-step__eg{display:block;margin-top:6px;font-size:13px;font-weight:600;color:var(--color-accent)}
.select-grid__media{position:sticky;top:calc(var(--header-height-compact) + 24px)}
.select-grid__photo{width:100%;height:100%;object-fit:cover}

.select-result{
  margin-top:28px;
  padding:clamp(20px,2.4vw,28px);
  border:1px solid var(--color-accent);
  border-radius:var(--radius-md);
  background:var(--color-accent-pale);
}

.select-result__label{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent)}
.select-result__title{margin:0 0 8px;font-size:20px;font-weight:700;color:var(--color-heading)}
.select-result__note{margin:0 0 20px;font-size:14px;line-height:1.55;color:var(--color-muted)}

/* ------------------------------------------------------- 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;
  overflow:hidden;
  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%}
.pump-card__photo{width:100%;height:100%;object-fit:contain}
.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 tabs -- */
/* Four families, one at a time. The list is the site's tab pattern's list — this
   sheet only says what it looks like.
 *
 * The class names carry the prefix "spec-families" rather than "spec-tabs" on
 * purpose: the legacy sheet the old datasheet tables used (inverter-specs.css)
 * had a rule ".spec-tabs{display:none}" for its own model-tab strip, and reusing
 * the name here hid this whole block on the live page. The prefix belongs to
 * this component and to nothing else. */
.spec-families{margin-top:clamp(24px,3vw,40px)}

.spec-families__list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:clamp(20px,2.4vw,32px);
}

.spec-families__tab{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-height:52px;
  padding:10px 18px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  background:var(--color-surface);
  color:var(--color-heading);
  font-family:inherit;
  text-align:left;
  cursor:pointer;
  transition:border-color var(--transition-mid),background var(--transition-mid),color var(--transition-mid);
}

.spec-families__tab:hover{border-color:var(--color-accent)}
.spec-families__tab[aria-selected="true"]{border-color:var(--color-accent);background:var(--color-accent-pale)}
.spec-families__tab-title{font-size:15px;font-weight:600;line-height:1.3}
.spec-families__tab[aria-selected="true"] .spec-families__tab-title{color:var(--color-accent)}
.spec-families__tab-range{font-size:12px;font-variant-numeric:tabular-nums;color:var(--color-muted)}

.spec-families__panel{
  padding:clamp(18px,2.4vw,28px);
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  background:var(--color-surface);
}

.spec-families__range{margin:0 0 18px;font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--color-heading)}

.spec-families__wrap{
  overflow-x:auto;
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  background:var(--color-surface);
  -webkit-overflow-scrolling:touch;
}

.spec-families__table{width:100%;border-collapse:collapse;font-size:14px}
.spec-families__table caption{text-align:left;padding:14px 16px 0;font-size:12px;color:var(--color-muted)}

.spec-families__table th,
.spec-families__table td{padding:12px 14px;border-bottom:1px solid var(--color-line);text-align:left;vertical-align:top}

.spec-families__table thead th{
  position:sticky;
  top:0;
  background:var(--color-pale);
  color:var(--color-heading);
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
}

.spec-families__field{width:220px;min-width:180px;font-weight:600;color:var(--color-heading);background:var(--color-surface)}
.spec-families__model{min-width:150px}
.spec-families__value{color:var(--color-text);min-width:150px}
.spec-families__table tbody tr:last-child th,
.spec-families__table tbody tr:last-child td{border-bottom:0}
.spec-families__table tbody tr:hover th,
.spec-families__table tbody tr:hover td{background:var(--color-pale)}

.spec-families__values{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.spec-families__values li{font-size:13px;line-height:1.45}
.spec-families__empty{color:var(--color-muted)}

.spec-families__handoffs{margin:20px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.spec-families__handoff{display:inline-flex;align-items:flex-start;gap:8px;font-size:13px;font-weight:600;line-height:1.45;text-decoration:none}

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

/* --------------------------------------------------------- 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){
  .select-grid,
  .hyb,
  .monitor,
  .inv-cta__grid{grid-template-columns:minmax(0,1fr);gap:28px}

  .select-grid__media{position:static}
}

/* The value's line is a column here: four cards side by side would be four
   narrow columns of wrapped words, and the arrow between them has no room. */
@media (max-width:860px){
  .value-flow__row{flex-direction:column}
  .value-flow__node{flex:0 0 auto;width:100%;max-width:none;padding:18px 20px}
  .value-flow__arrow{display:none}
}

@media (max-width:640px){
  .inv-flow__node{min-width:0;width:100%;padding-right:18px}
  .inv-flow__arrow{display:none}
  .spec-families__field{width:150px;min-width:130px}
  .spec-families__table{font-size:13px}
  .spec-families__table th,
  .spec-families__table td{padding:10px}
}