/*!
 * FPE HydCalculator 1.0.6 — styles for [fpe_hydcalc]
 * Every rule is scoped under .fpe-hc so Divi and other plugins are not affected (and do not affect it).
 * Layout follows the width of the calculator itself (container queries): ≥1200 desktop, 768–1199 tablet, <768 phone.
 * Values come from the approved design (canvas "V7 HydCalculator", desktop 1440 / phone 390).
 */

/* =========================================================================== root + reset */
.fpe-hc {
  --hc-fh: 'Bai Jamjuree', 'IBM Plex Sans Thai', Tahoma, sans-serif;
  --hc-fb: 'IBM Plex Sans Thai', 'Noto Sans Thai', Tahoma, sans-serif;
  --hc-fm: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow-x: hidden;
  overflow-x: clip;
  background: linear-gradient(180deg, #F1F4F8 0px, #E7ECF1 900px, #E6EBF0 100%);
  color: #103F72;
  font-family: var(--hc-fb);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: normal;
  word-spacing: normal;
  text-align: left;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  container-type: inline-size;
  container-name: fpehc;
}
.fpe-hc *, .fpe-hc *::before, .fpe-hc *::after { box-sizing: border-box; }
.fpe-hc h1, .fpe-hc h2, .fpe-hc h3, .fpe-hc p, .fpe-hc ul, .fpe-hc ol, .fpe-hc li { margin: 0; padding: 0; border: 0; }
.fpe-hc h1, .fpe-hc h2, .fpe-hc h3 { color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: normal; text-transform: none; }
.fpe-hc ul, .fpe-hc ol, .fpe-hc li { list-style: none; }
.fpe-hc a { color: inherit; text-decoration: none; background: none; box-shadow: none; }
.fpe-hc b, .fpe-hc strong { font-weight: 600; }
.fpe-hc button { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; letter-spacing: normal; text-transform: none; text-shadow: none; border-radius: 0; box-shadow: none; background-image: none; -webkit-appearance: none; appearance: none; }
.fpe-hc button:disabled { cursor: default; }
.fpe-hc input, .fpe-hc textarea { margin: 0; font-family: inherit; border-radius: 0; box-shadow: none; max-width: none; }
.fpe-hc img { max-width: none; border: 0; }
.fpe-hc a:focus-visible, .fpe-hc button:focus-visible { outline: 2px solid #1478B0; outline-offset: 2px; }
/* Divi: p:not(.has-background):last-of-type { padding-bottom: 0 } outranks single-class rules; keep our boxed paragraphs whole */
.fpe-hc.fpe-hc p.hc-pnote, .fpe-hc.fpe-hc p.hc-warn, .fpe-hc.fpe-hc p.hc-sh-disc { padding-bottom: 8px; }
.fpe-hc [hidden] { display: none !important; }
/* if a theme or plugin runs wpautop after shortcodes, its <p> wrappers (ours all have a class) must not add boxes */
.fpe-hc p:not([class]) { display: contents; }
.fpe-hc br:not([class]) { display: none; }
.fpe-hc .hc-nw { white-space: nowrap; }
.fpe-hc .hc-ic { display: block; flex-shrink: 0; }

/* which type is on screen: blocks marked data-show="1 2" etc. */
.fpe-hc[data-type="1"] [data-show]:not([data-show~="1"]),
.fpe-hc[data-type="2"] [data-show]:not([data-show~="2"]),
.fpe-hc[data-type="3"] [data-show]:not([data-show~="3"]) { display: none !important; }

/* phone-only / not-on-phone content */
@container fpehc (min-width: 768px) {
  .fpe-hc .hc-om { display: none !important; }
}
@container fpehc (max-width: 767px) {
  .fpe-hc .hc-nm { display: none !important; }
}

/* =========================================================================== page frame */
.fpe-hc .hc-main { max-width: 1440px; margin: 0 auto; padding: 20px 72px 80px; display: flex; flex-direction: column; gap: 56px; }
.fpe-hc .hc-crumbs { margin-bottom: -30px; }
.fpe-hc .hc-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 0; margin: 0 !important; padding: 0 !important; list-style: none !important; font-size: 14px; line-height: 1.5; color: #51637A; }
.fpe-hc .hc-crumbs li { margin: 0; padding: 0; list-style: none; }
.fpe-hc .hc-crumbs a { display: inline-flex; align-items: center; min-height: 28px; color: #17579B; }
.fpe-hc .hc-crumbs a:hover { color: #103F72; text-decoration: underline; }
.fpe-hc .hc-crumbs .hc-sep { color: #8A9AAE; }
.fpe-hc .hc-crumbs .hc-cur { color: #103F72; font-weight: 600; }

.fpe-hc .hc-sec { position: relative; flex-shrink: 0; scroll-margin-top: 110px; }
.fpe-hc .hc-board { position: relative; padding: 11px; border-radius: 10px; background: linear-gradient(180deg, #F4F6F8 0%, #D5DBE2 30%, #C2CAD3 72%, #D8DDE3 100%); box-shadow: 0 28px 46px -30px rgba(16, 40, 70, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.95); }
.fpe-hc .hc-surface { position: relative; border-radius: 3px; overflow: hidden; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, 0.8) 45%, rgba(255, 255, 255, 0) 56%), linear-gradient(115deg, rgba(255, 255, 255, 0) 61%, rgba(255, 255, 255, 0.5) 65%, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #F8FAFC 0%, #EEF2F6 100%); box-shadow: inset 0 0 0 1px rgba(20, 40, 60, 0.12), inset 0 2px 5px rgba(20, 40, 60, 0.12); }
.fpe-hc .hc-surface--intro { padding: 44px 56px 48px; }
.fpe-hc .hc-surface--std { padding: 48px 48px 52px; }
.fpe-hc .hc-surface--sim { padding: 48px 56px 48px; }
.fpe-hc .hc-surface--formulas { padding: 48px 56px 54px; }
.fpe-hc .hc-cap { position: absolute; display: block; width: 22px; height: 22px; border-radius: 5px; background: linear-gradient(180deg, #A9B3BE 0%, #8E99A5 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.fpe-hc .hc-cap--tl { left: -2px; top: -2px; }
.fpe-hc .hc-cap--tr { right: -2px; top: -2px; }
.fpe-hc .hc-cap--bl { left: -2px; bottom: -2px; }
.fpe-hc .hc-cap--br { right: -2px; bottom: -2px; }

.fpe-hc .hc-stack28, .fpe-hc .hc-stack30, .fpe-hc .hc-stack34, .fpe-hc .hc-stack36 { position: relative; display: flex; flex-direction: column; }
.fpe-hc .hc-stack28 { gap: 28px; }
.fpe-hc .hc-stack30 { gap: 30px; }
.fpe-hc .hc-stack34 { gap: 34px; }
.fpe-hc .hc-stack36 { gap: 36px; }

/* section heading row */
.fpe-hc .hc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 56px; }
.fpe-hc .hc-head-t { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fpe-hc .hc-eyebrow { display: flex; align-items: center; gap: 12px; font-family: var(--hc-fm); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; line-height: 1.7; color: #51637A; }
.fpe-hc .hc-eyebrow-line { display: block; width: 28px; height: 1px; background: #C4D4E6; }
.fpe-hc .hc-h2 { font-family: var(--hc-fh); font-size: 38px; font-weight: 600; line-height: 1.34; letter-spacing: -0.005em; color: #103F72; }
.fpe-hc .hc-lead { flex-shrink: 0; width: 460px; font-size: 16px; line-height: 1.8; color: #33465F; text-wrap: pretty; }
.fpe-hc .hc-lead--440 { width: 440px; }

/* =========================================================================== 00 intro */
.fpe-hc .hc-deco { display: contents; }
.fpe-hc .hc-intro { position: relative; display: flex; flex-direction: column; gap: 28px; }
.fpe-hc .hc-intro-top { display: flex; flex-direction: column; gap: 18px; }
.fpe-hc .hc-h1 { font-family: var(--hc-fh); font-size: 46px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: #103F72; white-space: nowrap; }
.fpe-hc .hc-h1-l { white-space: nowrap; }
.fpe-hc .hc-mark { position: relative; display: inline-block; white-space: nowrap; }
.fpe-hc .hc-mark-line { position: absolute; left: -1.5%; top: 100%; width: 103%; height: 18px; margin-top: -5px; overflow: visible; pointer-events: none; }
/* the same marker under the key word of each section heading (h2) and the call to action, a little lighter */
.fpe-hc .hc-mark--h2 .hc-mark-line { height: 14px; margin-top: -4px; }
.fpe-hc .hc-mark--h2 .hc-mark-line path { stroke-width: 4; }
.fpe-hc .hc-mark--sm .hc-mark-line { height: 10px; margin-top: -2px; }
.fpe-hc .hc-mark--sm .hc-mark-line path { stroke-width: 3; }
.fpe-hc .hc-intro-lead { max-width: 900px; font-size: 17px; line-height: 1.8; color: #33465F; text-wrap: pretty; }

.fpe-hc .hc-modes { display: flex; flex-direction: column; gap: 14px; }
.fpe-hc .hc-modes-t { font-family: var(--hc-fh); font-size: 19px; font-weight: 600; color: #103F72; }
.fpe-hc .hc-modes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fpe-hc .hc-mode { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; border: 1.5px solid #C4D4E6; border-radius: 6px; background: rgba(255, 255, 255, 0.6); color: #103F72; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; }
.fpe-hc .hc-mode:hover { border-color: #103F72; background: #FFFFFF; color: #103F72; }
/* the type in use: brand red (border, soft halo, number, badge) and a red magnet pinning the card to the board */
.fpe-hc .hc-mode[aria-current], .fpe-hc .hc-mode[aria-current]:hover { border: 2px solid #D10A0A; background: #FFFFFF; box-shadow: 0 0 0 4px rgba(209, 10, 10, 0.12), 0 14px 24px -18px rgba(16, 40, 70, 0.6); }
.fpe-hc .hc-mode[aria-current]:focus-visible { outline-color: #D10A0A; }
.fpe-hc .hc-mode-pin { display: none; }
.fpe-hc .hc-mode[aria-current] .hc-mode-pin { display: block; }
.fpe-hc .hc-mode-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fpe-hc .hc-mode-id { display: flex; align-items: center; gap: 10px; }
.fpe-hc .hc-mode-num { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; border: 2px solid #103F72; border-radius: 50%; background: #FFFFFF; font-family: var(--hc-fh); font-size: 17px; font-weight: 700; line-height: 1; color: #103F72; }
.fpe-hc .hc-mode[aria-current] .hc-mode-num { border-color: #D10A0A; background: #D10A0A; color: #FFFFFF; }
.fpe-hc .hc-mode-kicker { font-size: 13px; font-weight: 600; color: #51637A; white-space: nowrap; }
.fpe-hc .hc-mode-badge { display: none; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; background: #D10A0A; color: #FFFFFF; font-size: 12px; font-weight: 600; white-space: nowrap; }
.fpe-hc .hc-mode-go { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #17579B; white-space: nowrap; }
.fpe-hc .hc-mode[aria-current] .hc-mode-badge { display: inline-flex; }
.fpe-hc .hc-mode[aria-current] .hc-mode-go { display: none; }
.fpe-hc .hc-mode-body { display: flex; flex-direction: column; gap: 10px; }
.fpe-hc .hc-mode-title { font-family: var(--hc-fh); font-size: 19px; font-weight: 600; line-height: 1.4; color: #103F72; }
.fpe-hc .hc-mode-desc { font-size: 14px; line-height: 1.6; color: #33465F; }
.fpe-hc .hc-mode-icon { display: none; }

/* =========================================================================== buttons */
.fpe-hc .hc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 20px; border: 0; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.fpe-hc .hc-btn--primary, .fpe-hc .hc-btn--cta { gap: 12px; height: 52px; padding: 0 26px; background: #17579B; color: #FFFFFF; font-size: 16px; transition: background 0.25s ease; }
.fpe-hc .hc-btn--primary:hover, .fpe-hc .hc-btn--cta:hover { background: #103F72; color: #FFFFFF; }
.fpe-hc .hc-btn--cta2 { gap: 12px; height: 52px; padding: 0 24px; border: 1.5px solid #103F72; background: rgba(255, 255, 255, 0.6); color: #103F72; font-size: 16px; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.fpe-hc .hc-btn--cta2:hover { background: #103F72; color: #FFFFFF; border-color: #103F72; }
.fpe-hc .hc-btn--copy { background: #17579B; color: #FFFFFF; }
.fpe-hc .hc-btn--copy:hover { background: #103F72; color: #FFFFFF; }
.fpe-hc .hc-btn--line { background: #06C755; color: #0A2A14; }
.fpe-hc .hc-btn--line:hover { background: #05A948; color: #0A2A14; }
.fpe-hc .hc-btn--outline { border: 1.5px solid #103F72; background: #FFFFFF; color: #103F72; }
.fpe-hc .hc-btn--outline:hover { background: #103F72; color: #FFFFFF; }
.fpe-hc .hc-btn--print { display: flex; width: 100%; height: 54px; gap: 12px; background: #17579B; color: #FFFFFF; font-size: 16px; }
.fpe-hc .hc-btn--print:hover { background: #103F72; color: #FFFFFF; }

/* =========================================================================== 01 settings */
.fpe-hc .hc-set { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 28px; align-items: start; }
.fpe-hc[data-type="2"] .hc-set { display: flex; flex-direction: column; align-items: stretch; gap: 34px; }
.fpe-hc .hc-set-cards--split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; align-items: start; }
.fpe-hc .hc-set-cards--three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; align-items: start; }
.fpe-hc .hc-stack { display: flex; flex-direction: column; gap: 28px; }

.fpe-hc .hc-card { position: relative; background: #FFFFFF; border-radius: 3px; box-shadow: 0 0 0 1px rgba(20, 40, 60, 0.07), 0 10px 22px -14px rgba(16, 40, 70, 0.45); }
.fpe-hc .hc-card--in { padding: 28px 26px 26px; display: flex; flex-direction: column; gap: 20px; }
.fpe-hc .hc-mag { position: absolute; left: 50%; top: -8px; margin-left: -9px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0) 40%), #D10A0A; box-shadow: 0 3px 4px rgba(10, 22, 36, 0.32), inset 0 -2px 3px rgba(0, 0, 0, 0.28); }
.fpe-hc .hc-mag--blue { background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0) 40%), #17579B; }
.fpe-hc .hc-mag--black { background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0) 40%), #1F2933; }
.fpe-hc .hc-card-head { display: flex; align-items: center; gap: 12px; }
.fpe-hc .hc-num { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; border: 2px solid #103F72; border-radius: 50%; background: #FFFFFF; font-family: var(--hc-fh); font-size: 15px; font-weight: 700; line-height: 1; color: #103F72; }
.fpe-hc .hc-num--solid { background: #103F72; color: #FFFFFF; }
.fpe-hc .hc-card-ht { display: flex; flex-direction: column; }
.fpe-hc .hc-h3 { font-family: var(--hc-fh); font-size: 20px; font-weight: 600; line-height: 1.4; color: #103F72; }
.fpe-hc .hc-card-en { font-size: 13px; line-height: 1.5; color: #51637A; }

.fpe-hc .hc-field { display: flex; flex-direction: column; gap: 6px; }
.fpe-hc .hc-field-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fpe-hc .hc-label { font-size: 15px; font-weight: 500; line-height: 1.45; color: #103F72; }
.fpe-hc .hc-inwrap { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.fpe-hc .hc-in { -webkit-appearance: none; appearance: none; display: block; margin: 0; border: 1.5px solid #C4D4E6; border-radius: 0; background: #FFFFFF; color: #103F72; box-shadow: none; outline: none; }
.fpe-hc .hc-in:focus { outline: 2px solid #1478B0; outline-offset: 0; border-color: #1478B0; color: #103F72; background-color: #FFFFFF; }
.fpe-hc .hc-in::placeholder { color: #6B7D93; opacity: 1; }
.fpe-hc .hc-numin { width: 96px; height: 44px; padding: 0 10px; font-family: var(--hc-fm); font-size: 16px; font-weight: 500; line-height: normal; text-align: right; }
.fpe-hc .hc-unit { width: 46px; font-family: var(--hc-fm); font-size: 13px; color: #51637A; }
.fpe-hc .hc-hintrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fpe-hc .hc-hintrow--tall { min-height: 39px; /* = unit toggle incl. its 1.5px borders, so force ↔ pressure never jumps */ }
.fpe-hc .hc-hint { font-size: 13px; line-height: 1.5; color: #51637A; }
.fpe-hc .hc-conv { font-family: var(--hc-fm); font-size: 13px; color: #51637A; white-space: nowrap; }
.fpe-hc .hc-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.fpe-hc .hc-chips--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fpe-hc .hc-chip { height: 34px; padding: 0 4px; border: 1px solid #C4D4E6; background: #FFFFFF; color: #103F72; font-family: var(--hc-fm); font-size: 13px; font-weight: 500; line-height: 1; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.fpe-hc .hc-chip:hover { border-color: #103F72; }
.fpe-hc .hc-chip[aria-pressed="true"] { border-color: #103F72; background: #103F72; color: #FFFFFF; }
/* standard rods for the current bore: Rod-B (recommended, red tag), Rod-C, Rod-A */
.fpe-hc .hc-rodstd { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 4px; }
.fpe-hc .hc-rodstd-t { font-size: 13px; line-height: 1.5; color: #51637A; }
.fpe-hc .hc-rodstd-t b { font-family: var(--hc-fm); font-weight: 600; color: #103F72; }
.fpe-hc .hc-rodstd-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 6px; }
.fpe-hc .hc-rodstd-b { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; padding: 6px 4px; border: 1.5px solid #C4D4E6; background: #FFFFFF; color: #103F72; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.fpe-hc .hc-rodstd-b:hover { border-color: #103F72; }
.fpe-hc .hc-rodstd-b[aria-pressed="true"] { border-color: #103F72; background: #103F72; color: #FFFFFF; }
.fpe-hc .hc-rodstd-b:disabled { opacity: 0.45; cursor: default; border-color: #C4D4E6; background: #FFFFFF; color: #103F72; }
.fpe-hc .hc-rodstd-k { font-family: var(--hc-fh); font-size: 14px; font-weight: 700; line-height: 1.2; }
.fpe-hc .hc-rodstd-v { font-family: var(--hc-fm); font-size: 13px; font-weight: 500; line-height: 1.2; }
.fpe-hc .hc-rodstd-rec { position: absolute; top: -9px; right: 6px; padding: 0 7px; border-radius: 999px; background: #D10A0A; color: #FFFFFF; font-size: 11px; font-weight: 600; line-height: 17px; white-space: nowrap; }
.fpe-hc .hc-rodstd-none { font-size: 13px; line-height: 1.5; color: #51637A; }
.fpe-hc .hc-chips-t { padding-top: 2px; font-size: 13px; line-height: 1.5; color: #51637A; }
.fpe-hc .hc-warn { padding: 8px 12px; background: #FFF4F2; border: 1px solid #D10A0A; font-size: 13px; line-height: 1.6; color: #103F72; }

/* slider */
.fpe-hc .hc-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 36px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.fpe-hc .hc-range:focus:not(:focus-visible) { outline: none; } /* browsers without :focus-visible keep their own ring */
.fpe-hc .hc-range:focus-visible { outline: 2px solid #1478B0; outline-offset: 2px; }
.fpe-hc .hc-range::-webkit-slider-runnable-track { height: 3px; background: #C4D4E6; border: 0; }
.fpe-hc .hc-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -7.5px; border-radius: 50%; background: #D10A0A; border: 2px solid #FFFFFF; box-shadow: 0 0 0 1px rgba(16, 63, 114, 0.3); }
.fpe-hc .hc-range::-moz-range-track { height: 3px; background: #C4D4E6; border: 0; }
.fpe-hc .hc-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #D10A0A; border: 2px solid #FFFFFF; }

/* segmented toggles and the ± stepper */
.fpe-hc .hc-segfield { display: flex; flex-direction: column; gap: 8px; }
.fpe-hc .hc-seg { display: flex; width: 100%; border: 1.5px solid #103F72; background: #FFFFFF; }
.fpe-hc .hc-seg > button { flex: 1 1 0; min-width: 0; height: 36px; padding: 0 10px; border: 0; background: #FFFFFF; color: #103F72; font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.fpe-hc .hc-seg > button + button { border-left: 1.5px solid #103F72; }
.fpe-hc .hc-seg > button[aria-pressed="true"] { background: #103F72; color: #FFFFFF; }
.fpe-hc .hc-seg--unit { width: auto; flex-shrink: 0; }
.fpe-hc .hc-seg--unit > button { flex: none; padding: 0 12px; font-size: 13px; }
.fpe-hc[data-load="force"] .hc-load-p, .fpe-hc[data-load="pressure"] .hc-load-f { display: none; }
.fpe-hc .hc-stepper { display: flex; align-items: center; flex-shrink: 0; border: 1.5px solid #C4D4E6; background: #FFFFFF; }
.fpe-hc .hc-step { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: #FFFFFF; color: #103F72; cursor: pointer; transition: background 0.2s ease; }
.fpe-hc .hc-step:hover { background: #EEF4FA; }
.fpe-hc .hc-step:disabled { opacity: 0.35; background: #FFFFFF; }
.fpe-hc .hc-step-v { display: block; min-width: 54px; padding: 0 6px; border-left: 1px solid #C4D4E6; border-right: 1px solid #C4D4E6; font-family: var(--hc-fm); font-size: 16px; font-weight: 500; line-height: 44px; text-align: center; color: #103F72; }

/* live results ("ผลลัพธ์ทันที") */
.fpe-hc .hc-live { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "boxes" "links"; row-gap: 14px; }
.fpe-hc .hc-live-title { grid-area: title; display: flex; flex-direction: column; gap: 2px; padding-top: 6px; }
.fpe-hc .hc-live-t { font-family: var(--hc-fh); font-size: 20px; font-weight: 600; color: #103F72; }
.fpe-hc .hc-live-s { font-size: 14px; line-height: 1.6; color: #51637A; }
.fpe-hc .hc-live-s--above { display: none; }
.fpe-hc .hc-live-boxes { grid-area: boxes; display: flex; flex-direction: column; gap: 14px; }
.fpe-hc .hc-live-links { grid-area: links; display: flex; flex-direction: column; }
.fpe-hc .hc-box { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 14px 16px; border: 2px solid #103F72; border-radius: 7px; background: rgba(255, 255, 255, 0.72); }
.fpe-hc .hc-box-l { font-size: 14px; color: #51637A; }
.fpe-hc .hc-box-v { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.fpe-hc .hc-box-n { font-family: var(--hc-fh); font-size: 30px; font-weight: 700; line-height: 1.15; color: #103F72; white-space: nowrap; }
.fpe-hc .hc-box-u { font-size: 15px; font-weight: 600; color: #103F72; }
.fpe-hc .hc-box-s { font-size: 13px; color: #51637A; }
.fpe-hc .hc-jump { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: 15px; font-weight: 600; color: #17579B; }
.fpe-hc .hc-jump:hover { color: #103F72; }
.fpe-hc[data-type="2"] .hc-live { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title links" "boxes boxes"; align-items: end; column-gap: 24px; }
.fpe-hc[data-type="2"] .hc-live-title { padding-top: 0; }
.fpe-hc[data-type="2"] .hc-live-s--left { display: none; }
.fpe-hc[data-type="2"] .hc-live-s--above { display: inline; }
.fpe-hc[data-type="2"] .hc-live-links { flex-direction: row; gap: 28px; }
.fpe-hc[data-type="2"] .hc-live-boxes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

/* whiteboard pen tray under the settings board */
.fpe-hc .hc-tray { position: relative; height: 34px; margin: -3px 56px 0; }
.fpe-hc .hc-tray > span { position: absolute; display: block; }
.fpe-hc .hc-tray-rail { left: 0; right: 0; top: 0; height: 12px; background: linear-gradient(180deg, #74808D 0%, #9EA8B3 100%); }
.fpe-hc .hc-tray-pen { top: -6px; width: 128px; height: 16px; border-radius: 8px; box-shadow: 0 1px 1.5px rgba(10, 22, 36, 0.35), inset 0 -3px 4px rgba(0, 0, 0, 0.18), inset 0 2px 2px rgba(255, 255, 255, 0.75); }
.fpe-hc .hc-tray-pen--red { right: 224px; background: linear-gradient(90deg, #D10A0A 0 23%, #26313C 23% 24.5%, #F3F5F7 24.5% 86%, #D10A0A 86% 100%); }
.fpe-hc .hc-tray-pen--blue { right: 374px; background: linear-gradient(90deg, #17579B 0 23%, #26313C 23% 24.5%, #F3F5F7 24.5% 86%, #17579B 86% 100%); }
.fpe-hc .hc-tray-pen--black { right: 524px; background: linear-gradient(90deg, #1F2933 0 23%, #26313C 23% 24.5%, #F3F5F7 24.5% 86%, #1F2933 86% 100%); }
.fpe-hc .hc-tray-eraser { right: 90px; top: -11px; width: 112px; height: 24px; border-radius: 4px; background: linear-gradient(180deg, #2A64A4 0%, #1D4F8A 58%, #3A3F45 58%, #2D3136 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.fpe-hc .hc-tray-lip { left: 0; right: 0; top: 7px; bottom: 0; border-radius: 0 0 7px 7px; background: linear-gradient(180deg, #EEF1F4 0%, #CBD2DA 55%, #AFB9C4 100%); box-shadow: 0 12px 18px -12px rgba(16, 40, 70, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.9); }

/* =========================================================================== 02 simulation */
.fpe-hc .hc-sim { display: flex; flex-direction: column; gap: 16px; }
.fpe-hc .hc-sim-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.fpe-hc .hc-ctl { display: flex; background: #FFFFFF; border: 1px solid #C4D4E6; }
.fpe-hc .hc-ctl > button { height: 40px; padding: 0 16px; border: 0; background: #FFFFFF; color: #103F72; font-size: 15px; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.fpe-hc .hc-ctl > button + button { border-left: 1px solid #C4D4E6; }
.fpe-hc .hc-ctl > button:hover { background: #EEF4FA; }
.fpe-hc .hc-ctl > button[aria-pressed="true"] { background: #103F72; color: #FFFFFF; }
.fpe-hc .hc-ctl--1 > button { min-width: 150px; }
.fpe-hc .hc-legend { display: flex; flex-wrap: wrap; align-items: center; column-gap: 18px; row-gap: 4px; font-size: 13px; color: #51637A; }
.fpe-hc .hc-legend > span { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.fpe-hc .hc-lg { display: block; width: 22px; height: 3px; }
.fpe-hc .hc-lg--red { background: #D10A0A; }
.fpe-hc .hc-lg--blue { background: #1E88D8; }
.fpe-hc .hc-draw { position: relative; container-type: inline-size; }
/* Labels over the drawings keep the design size at a 1150 px wide drawing (1440 layout) and shrink with it on tablets,
   never below a readable size. cqw = % of the drawing width; old browsers keep the first (px) value. */
.fpe-hc .hc-draw--cyl { padding: 10px 6px 0; }
.fpe-hc .hc-draw--pump { padding: 6px 6px 0; }
.fpe-hc .hc-draw--cyl-m { margin: 0 -6px; padding-top: 6px; }
.fpe-hc .hc-draw--pump-m { margin: 0 -6px; padding-top: 4px; }
.fpe-hc .hc-draw svg { display: block; width: 100%; height: auto; overflow: visible; }
.fpe-hc .hc-sim-dims { font-family: var(--hc-fm); font-size: 12px; line-height: 1.6; color: #103F72; }
.fpe-hc .hc-sim-status { font-size: 15px; line-height: 1.6; color: #103F72; }
/* under the cylinder: status on the left, flow in/out at each port on the right */
.fpe-hc .hc-sim-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); column-gap: 40px; row-gap: 16px; align-items: start; }
.fpe-hc .hc-flow { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 16px; background: #FFFFFF; border: 1px solid #DCE6F0; box-shadow: 0 10px 22px -16px rgba(16, 40, 70, 0.35); }
.fpe-hc .hc-flow-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; } /* "L/min ต่อกระบอก" drops under the title on phones */
.fpe-hc .hc-flow-t { font-family: var(--hc-fh); font-size: 16px; font-weight: 600; line-height: 1.4; color: #103F72; }
.fpe-hc .hc-flow-u { font-family: var(--hc-fm); font-size: 12px; color: #51637A; white-space: nowrap; }
.fpe-hc .hc-flow-grid { display: flex; flex-direction: column; }
.fpe-hc .hc-flow-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 8px 8px; border-top: 1px solid #E3EAF2; transition: background 0.2s ease; }
.fpe-hc .hc-flow-row--h { padding-top: 0; border-top: 0; font-size: 12px; font-weight: 600; line-height: 1.4; color: #51637A; }
.fpe-hc .hc-flow-row--h small { font-size: 11px; font-weight: 500; }
.fpe-hc .hc-flow-row.is-on { background: #EEF4FA; }
.fpe-hc .hc-flow-k { font-size: 14px; font-weight: 600; color: #103F72; white-space: nowrap; }
.fpe-hc .hc-flow-v { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 13px; color: #33465F; white-space: nowrap; } /* a long number (big cylinders, phone width) drops under its label instead of spilling out of the cell */
.fpe-hc .hc-flow-v i { display: block; width: 16px; height: 3px; flex-shrink: 0; }
.fpe-hc .hc-flow-v--in i { background: #D10A0A; }
.fpe-hc .hc-flow-v--out i { background: #1E88D8; }
.fpe-hc .hc-flow-n { font-family: var(--hc-fm); font-size: 15px; font-weight: 600; color: #103F72; }
.fpe-hc .hc-flow-note { display: block; font-size: 13px; line-height: 1.6; color: #33465F; }
.fpe-hc .hc-sim-note { display: block; font-size: 13px; color: #51637A; }
.fpe-hc .hc-sim-note:empty { display: none; }

/* cylinder labels (desktop drawing) */
.fpe-hc .hc-lbl, .fpe-hc .hc-tag, .fpe-hc .hc-force, .fpe-hc .hc-count, .fpe-hc .hc-plbl, .fpe-hc .hc-pill { position: absolute; white-space: nowrap; pointer-events: none; }
.fpe-hc .hc-lbl { font-family: var(--hc-fm); font-size: 14px; font-size: clamp(11px, 1.2174cqw, 14px); font-weight: 500; color: #103F72; }
.fpe-hc .hc-lbl--D { left: 7.29%; top: 51.85%; transform: translate(-50%, -50%) rotate(-90deg); background: #FFFFFF; padding: 0 6px; }
.fpe-hc .hc-lbl--d { left: 53.33%; top: 26.81%; }
.fpe-hc .hc-lbl--L { left: 29.58%; top: 87.41%; transform: translate(-50%, -50%); background: #FFFFFF; padding: 0 8px; }
.fpe-hc .hc-tag { padding: 0.154em 0.615em; border-radius: 999px; font-size: 13px; font-size: clamp(11px, 1.1304cqw, 13px); font-weight: 600; color: #FFFFFF; top: 18.52%; opacity: 0; transition: opacity 0.2s ease; }
.fpe-hc .hc-tag--a { left: 18.75%; background: #D10A0A; }
.fpe-hc .hc-tag--b { left: 50%; background: #1E88D8; }
.fpe-hc .hc-force { left: 78.65%; top: 5.93%; transform: translateX(-50%); font-family: var(--hc-fh); font-size: 16px; font-size: clamp(12px, 1.3913cqw, 16px); font-weight: 700; color: #103F72; opacity: 0; transition: opacity 0.2s ease; }
.fpe-hc .hc-count { left: 66.25%; top: 87.41%; transform: translateY(-50%); padding: 0.214em 0.714em; border: 1.5px solid #103F72; background: #FFFFFF; font-family: var(--hc-fh); font-size: 14px; font-size: clamp(11px, 1.2174cqw, 14px); font-weight: 700; color: #103F72; }
.fpe-hc .hc-count:empty { display: none; }
/* cylinder labels (phone drawing) */
/* phone drawings: design size at a 336 px wide drawing (390 layout); grow a little on large phones */
.fpe-hc .hc-draw--cyl-m .hc-lbl--L { left: 22.06%; top: 90.08%; padding: 0 5px; font-size: 10px; font-size: clamp(10px, 2.976cqw, 13px); }
.fpe-hc .hc-draw--cyl-m .hc-tag { padding: 0.1em 0.6em; font-size: 10px; font-size: clamp(10px, 2.976cqw, 13px); top: 19.08%; }
.fpe-hc .hc-draw--cyl-m .hc-tag--a { left: 14.12%; }
.fpe-hc .hc-draw--cyl-m .hc-tag--b { left: 43.53%; }
.fpe-hc .hc-draw--cyl-m .hc-force { left: 80.44%; top: 6.11%; font-size: 11px; font-size: clamp(11px, 3.274cqw, 14px); }
.fpe-hc .hc-draw--cyl-m .hc-count { left: 66.47%; top: 90.08%; padding: 0.09em 0.636em; font-size: 11px; font-size: clamp(11px, 3.274cqw, 14px); }
/* gear pump labels */
.fpe-hc .hc-plbl { font-size: 14px; font-size: clamp(11px, 1.2174cqw, 14px); font-weight: 600; color: #103F72; }
.fpe-hc .hc-plbl--mono { font-family: var(--hc-fm); font-weight: 500; }
.fpe-hc .hc-plbl--tank { left: 9.32%; top: 75.86%; transform: translate(-50%, -50%); }
.fpe-hc .hc-plbl--suction { left: 27.5%; top: 56.9%; transform: translateX(-50%); }
.fpe-hc .hc-plbl--press { left: 83.33%; top: 34.14%; transform: translateX(-50%); }
.fpe-hc .hc-plbl--bar { left: 71.88%; top: 20.69%; transform: translateY(-50%); }
.fpe-hc .hc-plbl--rpm { left: 34.38%; top: 11.72%; transform: translateX(-100%); }
.fpe-hc .hc-plbl--size { left: 43.75%; top: 92.41%; transform: translate(-50%, -50%); }
.fpe-hc .hc-plbl--to { left: 98.12%; top: 68.62%; transform: translateX(-100%); font-weight: 500; color: #51637A; }
.fpe-hc .hc-pill { left: 98.12%; top: 56.9%; transform: translateX(-100%); padding: 0.2em 0.667em; border-radius: 999px; background: #D10A0A; font-family: var(--hc-fh); font-size: 15px; font-size: clamp(12px, 1.3043cqw, 15px); font-weight: 700; color: #FFFFFF; }
.fpe-hc .hc-draw--pump-m .hc-plbl { font-size: 11px; font-size: clamp(11px, 3.274cqw, 14px); }
.fpe-hc .hc-draw--pump-m .hc-plbl--tank { left: 10.81%; top: 48.97%; }
.fpe-hc .hc-draw--pump-m .hc-plbl--suction { left: 30.2%; top: 34.83%; }
.fpe-hc .hc-draw--pump-m .hc-plbl--press { left: 79.54%; top: 56.9%; }
.fpe-hc .hc-draw--pump-m .hc-plbl--bar { left: 79.54%; top: 5.52%; transform: translate(-50%, -50%); }
.fpe-hc .hc-draw--pump-m .hc-plbl--rpm { left: 35.64%; top: 11.72%; }
.fpe-hc .hc-draw--pump-m .hc-plbl--size { left: 50.5%; top: 92.41%; }
.fpe-hc .hc-draw--pump-m .hc-pill { left: 98.68%; top: 68.62%; padding: 0.09em 0.636em; font-size: 11px; font-size: clamp(11px, 3.274cqw, 14px); }

@keyframes fpeHcCw { to { transform: rotate(360deg); } }
@keyframes fpeHcCcw { to { transform: rotate(-360deg); } }
@keyframes fpeHcPipe { to { stroke-dashoffset: -22; } }
.fpe-hc .hc-gear-cw { animation: fpeHcCw 4s linear infinite; }
.fpe-hc .hc-gear-ccw { animation: fpeHcCcw 4s linear infinite; }
.fpe-hc .hc-pdash { stroke-dasharray: 9 13; animation: fpeHcPipe 1s linear infinite; }

/* =========================================================================== 03 results */
.fpe-hc .hc-res-list { display: flex; flex-direction: column; gap: 28px; }
.fpe-hc .hc-res { padding: 28px 30px 26px; display: flex; flex-direction: column; gap: 16px; }
.fpe-hc .hc-res-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fpe-hc .hc-res-title { display: flex; align-items: center; gap: 12px; }
.fpe-hc .hc-fchip { flex-shrink: 0; padding: 4px 10px; border: 1.5px solid #103F72; background: #FFFFFF; font-family: var(--hc-fm); font-size: 13px; font-weight: 500; color: #103F72; white-space: nowrap; }
.fpe-hc .hc-res-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 450px; grid-template-areas: "v1 v2 work" "sup sup work"; column-gap: 28px; row-gap: 18px; align-items: start; }
.fpe-hc .hc-val--1 { grid-area: v1; }
.fpe-hc .hc-val--2 { grid-area: v2; }
.fpe-hc .hc-sup { grid-area: sup; min-width: 0; }
.fpe-hc .hc-work { grid-area: work; }
.fpe-hc .hc-val { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fpe-hc .hc-val-l { font-size: 14px; color: #51637A; }
.fpe-hc .hc-val-v { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.fpe-hc .hc-val-n { font-family: var(--hc-fh); font-size: 36px; font-weight: 700; line-height: 1.15; color: #103F72; white-space: nowrap; }
.fpe-hc .hc-val-u { font-size: 18px; font-weight: 600; color: #103F72; }
.fpe-hc .hc-val-s { font-size: 14px; line-height: 1.55; color: #33465F; }
.fpe-hc .hc-work { padding: 12px 16px; background: #F3F6FA; border: 1px dashed #C4D4E6; font-family: var(--hc-fm); font-size: 13px; line-height: 1.8; color: #103F72; overflow-wrap: anywhere; }
.fpe-hc .hc-work-h { display: block; font-family: var(--hc-fb); font-size: 12px; color: #51637A; }
.fpe-hc .hc-work-f { font-family: var(--hc-fm); font-size: 12px; font-weight: 600; color: #103F72; }
.fpe-hc .hc-work-lines > span { display: block; }
.fpe-hc .hc-sup-t { font-size: 15px; font-weight: 600; color: #103F72; }
.fpe-hc .hc-cycle, .fpe-hc .hc-rpms { display: flex; flex-direction: column; gap: 8px; }
.fpe-hc .hc-cycle-row, .fpe-hc .hc-motor-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fpe-hc .hc-cycle-v { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.fpe-hc .hc-cycle-n { font-family: var(--hc-fh); font-size: 26px; font-weight: 700; line-height: 1.15; color: #103F72; white-space: nowrap; }
.fpe-hc .hc-cycle-u { font-size: 14px; font-weight: 600; color: #103F72; }
.fpe-hc .hc-bar { display: flex; border: 1px solid #C4D4E6; background: #FFFFFF; }
.fpe-hc .hc-bar--cycle { height: 14px; }
.fpe-hc .hc-bar-ext { display: block; background: #D10A0A; transition: width 0.3s ease; }
.fpe-hc .hc-bar-ret { display: block; background: #1E88D8; transition: width 0.3s ease; }
.fpe-hc .hc-bar--load { display: block; height: 12px; }
.fpe-hc .hc-bar--load > span { display: block; height: 100%; background: #17579B; transition: width 0.3s ease; }
.fpe-hc .hc-note { font-size: 13px; line-height: 1.6; color: #51637A; }
.fpe-hc .hc-motor { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border: 2px solid #103F72; border-radius: 7px; background: rgba(255, 255, 255, 0.72); }
.fpe-hc .hc-motor-v { font-family: var(--hc-fh); font-size: 28px; font-weight: 700; color: #103F72; white-space: nowrap; }
.fpe-hc .hc-motor-hp { font-size: 17px; font-weight: 600; }
.fpe-hc .hc-pnote { padding: 8px 12px; border: 1px solid #C4D4E6; background: #F3F6FA; font-size: 13px; line-height: 1.6; color: #103F72; transition: background 0.2s ease, border-color 0.2s ease; }
.fpe-hc .hc-pnote.is-warn { border-color: #D10A0A; background: #FFF4F2; }
.fpe-hc .hc-rpms-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fpe-hc .hc-rpm { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 14px; border: 1px solid #C4D4E6; background: #FFFFFF; }
.fpe-hc .hc-rpm.is-cur { border: 2px solid #103F72; }
.fpe-hc .hc-rpm-r { font-family: var(--hc-fm); font-size: 13px; color: #51637A; }
.fpe-hc .hc-rpm-q { font-family: var(--hc-fh); font-size: 22px; font-weight: 700; color: #103F72; white-space: nowrap; }
.fpe-hc .hc-rpm-t { font-size: 12px; color: #51637A; }
.fpe-hc .hc-actions { display: flex; flex-direction: column; gap: 10px; }
.fpe-hc .hc-actions-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* =========================================================================== 04 spec sheet */
.fpe-hc .hc-spec { display: grid; grid-template-columns: 460px minmax(0, 1fr); column-gap: 56px; row-gap: 36px; align-items: start; }
.fpe-hc .hc-spec-l { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.fpe-hc .hc-card--form { padding: 28px 26px 26px; display: flex; flex-direction: column; gap: 18px; }
.fpe-hc .hc-pfield { display: flex; flex-direction: column; gap: 6px; }
.fpe-hc .hc-plabel { font-size: 15px; font-weight: 500; color: #103F72; }
.fpe-hc .hc-text { width: 100%; height: 44px; padding: 0 12px; font-size: 16px; line-height: normal; }
.fpe-hc .hc-textarea { width: 100%; height: auto; min-height: 0; padding: 10px 12px; font-size: 16px; line-height: 1.6; resize: vertical; }
.fpe-hc .hc-print-note { min-height: 42px; font-size: 13px; line-height: 1.6; color: #51637A; }
.fpe-hc .hc-card--incl { padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 16px; }
.fpe-hc .hc-incl { display: flex; flex-direction: column; gap: 8px; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.fpe-hc .hc-incl li { display: flex; align-items: flex-start; gap: 10px; margin: 0 !important; padding: 0 !important; list-style: none !important; font-size: 15px; line-height: 1.6; color: #33465F; }
.fpe-hc .hc-incl .hc-ic { margin-top: 4px; color: #D10A0A; }
.fpe-hc .hc-spec-r { display: flex; flex-direction: column; align-items: center; gap: 16px; min-width: 0; }
.fpe-hc .hc-a4-cap { align-self: stretch; text-align: center; font-family: var(--hc-fm); font-size: 13px; letter-spacing: 0.08em; color: #51637A; }
.fpe-hc .hc-a4 { position: relative; width: 635px; max-width: 100%; aspect-ratio: 794 / 1123; flex-shrink: 0; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(20, 40, 60, 0.1), 0 18px 30px -18px rgba(16, 40, 70, 0.55); }
@supports not (aspect-ratio: 1 / 1) { .fpe-hc .hc-a4 { height: calc(1123px * var(--hc-a4s, 0.8)); } }
.fpe-hc .hc-a4-scale { position: absolute; left: 0; top: 0; width: 794px; height: 1123px; overflow: hidden; transform: scale(var(--hc-a4s, 0.8)); transform-origin: 0 0; pointer-events: none; }
.fpe-hc .hc-a4-mag { position: absolute; top: -7px; width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 3px 4px rgba(10, 22, 36, 0.32), inset 0 -2px 3px rgba(0, 0, 0, 0.28); }
.fpe-hc .hc-a4-mag--l { left: 76px; background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0) 40%), #D10A0A; }
.fpe-hc .hc-a4-mag--r { right: 76px; background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0) 40%), #17579B; }
.fpe-hc .hc-a4-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fpe-hc .hc-a4-text-t { font-family: var(--hc-fh); font-size: 16px; font-weight: 600; line-height: 1.4; color: #103F72; }
.fpe-hc .hc-a4-text-d { font-size: 13px; line-height: 1.6; color: #33465F; }

/* the A4 sheet itself (page preview and the print copy use the same markup) */
.fpe-hc .hc-sheet { position: relative; width: 794px; height: 1123px; padding: 40px 52px 30px; display: flex; flex-direction: column; gap: 15px; overflow: hidden; background: #FFFFFF; color: #13263F; font-family: var(--hc-fb); font-size: 13px; line-height: 1.5; text-align: left; }
.fpe-hc .hc-sh-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 14px; border-bottom: 2px solid #103F72; }
.fpe-hc .hc-sh-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.fpe-hc .hc-sh-brand img { display: block; width: 60px; height: 57px; flex-shrink: 0; max-width: none; }
.fpe-hc .hc-sh-co { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fpe-hc .hc-sh-th { font-family: var(--hc-fh); font-size: 16px; font-weight: 700; line-height: 1.35; color: #103F72; }
.fpe-hc .hc-sh-en { font-size: 12px; font-weight: 600; color: #103F72; }
.fpe-hc .hc-sh-addr { font-size: 12px; color: #3D5270; }
.fpe-hc .hc-sh-doc { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.fpe-hc .hc-sh-k { font-family: var(--hc-fm); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; color: #4A5D78; }
.fpe-hc .hc-sh-no { font-family: var(--hc-fm); font-size: 13px; font-weight: 600; color: #13263F; }
.fpe-hc .hc-sh-date { font-size: 12px; color: #3D5270; }
.fpe-hc .hc-sh-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.fpe-hc .hc-sh-tt { display: flex; flex-direction: column; gap: 2px; }
.fpe-hc .hc-sh-h { font-family: var(--hc-fh); font-size: 25px; font-weight: 700; line-height: 1.3; color: #103F72; }
.fpe-hc .hc-sh-mode { flex-shrink: 0; padding: 4px 12px; border: 1.5px solid #103F72; font-size: 13px; font-weight: 600; color: #103F72; white-space: nowrap; }
.fpe-hc .hc-sh-proj { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 18px; }
.fpe-hc .hc-sh-pf { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fpe-hc .hc-sh-pl { font-size: 12px; color: #4A5D78; }
.fpe-hc .hc-sh-pv { display: block; min-height: 25px; padding-bottom: 2px; border-bottom: 1px dotted #7F93AB; font-size: 14px; font-weight: 600; line-height: 1.5; color: #13263F; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fpe-hc .hc-sh-tables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.fpe-hc .hc-sh-col, .fpe-hc .hc-sh-scope { display: flex; flex-direction: column; min-width: 0; }
.fpe-hc .hc-sh-sec { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 1.5px solid #103F72; }
.fpe-hc .hc-sh-secn { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #103F72; font-family: var(--hc-fh); font-size: 12px; font-weight: 700; line-height: 1; color: #FFFFFF; }
.fpe-hc .hc-sh-sect { font-family: var(--hc-fh); font-size: 15px; font-weight: 700; color: #103F72; }
.fpe-hc .hc-sh-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 4px 2px; border-bottom: 1px solid #C9D3DF; }
.fpe-hc .hc-sh-rk { font-size: 12.5px; line-height: 1.45; color: #13263F; }
.fpe-hc .hc-sh-rv { flex-shrink: 0; font-family: var(--hc-fm); font-size: 12.5px; line-height: 1.45; color: #13263F; white-space: nowrap; }
.fpe-hc .hc-sh-rv b { font-weight: 600; }
.fpe-hc .hc-sh-sr { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 12px; padding: 5px 2px; border-bottom: 1px solid #C9D3DF; }
.fpe-hc .hc-sh-st { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #103F72; }
.fpe-hc .hc-sh-box { display: block; width: 10px; height: 10px; flex-shrink: 0; border: 1.5px solid #103F72; }
.fpe-hc .hc-sh-sd { font-size: 13px; line-height: 1.5; color: #13263F; }
.fpe-hc .hc-sh-notes { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.fpe-hc .hc-sh-lines { flex: 1 1 auto; min-height: 96px; overflow: hidden; background: repeating-linear-gradient(180deg, transparent 0, transparent 23px, #C9D3DF 23px, #C9D3DF 24px); font-size: 13px; line-height: 24px; color: #13263F; white-space: pre-line; overflow-wrap: anywhere; }
/* text longer than the ruled area stops at the last whole line (…) instead of showing a cut-off line: 4 lines with the port-flow section, 11 on the pump sheet */
.fpe-hc .hc-sh-ltxt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 11; overflow: hidden; }
.fpe-hc .hc-sheet--flow .hc-sh-ltxt { -webkit-line-clamp: 4; }
.fpe-hc .hc-sh-disc { margin: 0; padding: 8px 12px; background: #F3F6FA; border: 1px solid #D5DEE8; font-size: 12px; line-height: 1.6; color: #3D5270; }
.fpe-hc .hc-sh-sign { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; padding-top: 6px; }
.fpe-hc .hc-sh-sg { display: flex; align-items: flex-end; gap: 10px; font-size: 12px; color: #4A5D78; white-space: nowrap; }
.fpe-hc .hc-sh-sl { display: block; flex: 1; height: 19px; border-bottom: 1px dotted #7F93AB; }
.fpe-hc .hc-sh-sd2 { display: block; width: 96px; height: 19px; border-bottom: 1px dotted #7F93AB; }
.fpe-hc .hc-sh-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 10px; border-top: 1px solid #C9D3DF; font-size: 12px; color: #3D5270; }
/* port flows (types 1 and 2): section 3 with one row per stroke; that sheet sits a little tighter so the notes keep their 4 lines */
.fpe-hc .hc-sh-secr { margin-left: auto; font-size: 11.5px; line-height: 1.4; color: #4A5D78; white-space: nowrap; }
.fpe-hc .hc-sh-fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.fpe-hc .hc-sheet--flow { gap: 14px; }
.fpe-hc .hc-sheet--flow .hc-sh-row { padding-top: 3px; padding-bottom: 3px; }
.fpe-hc .hc-sheet--flow .hc-sh-sr { padding-top: 4px; padding-bottom: 4px; }
.fpe-hc .hc-sh-wm { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; pointer-events: none; }
.fpe-hc .hc-sh-wm > span { display: block; transform: rotate(-54deg); font-family: var(--hc-fh); font-size: 62px; font-weight: 700; letter-spacing: 0.08em; color: rgba(16, 63, 114, 0.075); white-space: nowrap; }

/* =========================================================================== 05 formulas */
.fpe-hc .hc-fgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; row-gap: 32px; }
.fpe-hc .hc-fg { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fpe-hc .hc-fg-t { margin: 0 0 6px; font-family: var(--hc-fh); font-size: 20px; font-weight: 600; color: #103F72; }
.fpe-hc .hc-fbox { display: flex; flex-direction: column; gap: 6px; }
.fpe-hc .hc-fmain { position: relative; align-self: flex-start; padding: 6px 14px; margin: 4px 0 6px 6px; }
.fpe-hc .hc-ring { position: absolute; left: -8px; top: -6px; width: calc(100% + 16px); height: calc(100% + 12px); overflow: visible; pointer-events: none; }
.fpe-hc .hc-fmain > span { position: relative; font-family: var(--hc-fm); font-size: 20px; font-weight: 500; color: #103F72; white-space: nowrap; }
.fpe-hc .hc-fline { display: block; font-family: var(--hc-fm); font-size: 16px; font-weight: 500; line-height: 1.9; color: #103F72; }
.fpe-hc .hc-fnotes { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; }
.fpe-hc .hc-fnotes > span { display: block; font-size: 14px; line-height: 1.65; color: #33465F; }
.fpe-hc .hc-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-top: 28px; border-top: 1px dashed #C4D4E6; }
.fpe-hc .hc-cta-t { display: flex; flex-direction: column; gap: 6px; }
.fpe-hc .hc-cta-h { font-family: var(--hc-fh); font-size: 24px; font-weight: 600; line-height: 1.4; color: #103F72; }
.fpe-hc .hc-cta-d { font-size: 15px; line-height: 1.7; color: #33465F; }
.fpe-hc .hc-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* =========================================================================== motion preferences */
@media (prefers-reduced-motion: reduce) {
  .fpe-hc .hc-gear, .fpe-hc .hc-pdash { animation: none !important; }
  .fpe-hc .hc-piston { transition: none !important; }
  .fpe-hc .hc-bar-ext, .fpe-hc .hc-bar-ret, .fpe-hc .hc-bar--load > span { transition: none !important; }
}

/* =========================================================================== narrow desktop 1200–1439 */
@container fpehc (max-width: 1439px) {
  .fpe-hc .hc-main { padding-left: 40px; padding-right: 40px; }
  .fpe-hc .hc-surface--std { padding: 44px 40px 48px; }
  .fpe-hc .hc-set { grid-template-columns: minmax(0, 1fr) 264px; column-gap: 24px; }
  .fpe-hc .hc-set-cards--split, .fpe-hc .hc-set-cards--three { column-gap: 24px; }
  .fpe-hc .hc-card--in { padding: 26px 22px 24px; }
  .fpe-hc .hc-res-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(360px, 450px); }
  .fpe-hc .hc-spec { grid-template-columns: 420px minmax(0, 1fr); column-gap: 40px; }
  .fpe-hc .hc-fgrid { column-gap: 36px; }
}

/* =========================================================================== tablet 768–1199 (and below) */
@container fpehc (max-width: 1199px) {
  .fpe-hc .hc-main { padding: 16px 24px 64px; gap: 40px; }
  .fpe-hc .hc-crumbs { margin-bottom: -22px; }
  .fpe-hc .hc-surface--intro { padding: 36px 36px 40px; }
  .fpe-hc .hc-surface--std { padding: 36px 30px 40px; }
  .fpe-hc .hc-surface--sim { padding: 36px 30px 36px; }
  .fpe-hc .hc-surface--formulas { padding: 36px 30px 40px; }
  .fpe-hc .hc-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .fpe-hc .hc-lead, .fpe-hc .hc-lead--440 { width: auto; max-width: 680px; }
  .fpe-hc .hc-h1 { font-size: 38px; white-space: normal; }
  .fpe-hc .hc-h2 { font-size: 32px; }
  .fpe-hc .hc-intro-lead { font-size: 16px; }
  .fpe-hc .hc-mode-title { font-size: 17px; }
  .fpe-hc .hc-set, .fpe-hc[data-type="2"] .hc-set { display: flex; flex-direction: column; align-items: stretch; gap: 28px; }
  .fpe-hc .hc-set-cards--split, .fpe-hc .hc-set-cards--three { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; }
  .fpe-hc .hc-set-cards--three > .hc-card:first-child { grid-row: span 2; }
  .fpe-hc .hc-stack { gap: 24px; }
  .fpe-hc .hc-card--in { padding: 26px 22px 24px; }
  .fpe-hc .hc-live, .fpe-hc[data-type="2"] .hc-live { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title links" "boxes boxes"; align-items: end; column-gap: 24px; }
  .fpe-hc .hc-live-title, .fpe-hc[data-type="2"] .hc-live-title { padding-top: 0; }
  .fpe-hc .hc-live-s--left, .fpe-hc[data-type="2"] .hc-live-s--left { display: none; }
  .fpe-hc .hc-live-s--above, .fpe-hc[data-type="2"] .hc-live-s--above { display: inline; }
  .fpe-hc .hc-live-links, .fpe-hc[data-type="2"] .hc-live-links { flex-direction: row; gap: 24px; }
  .fpe-hc .hc-live-boxes, .fpe-hc[data-type="2"] .hc-live-boxes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .fpe-hc .hc-box-n { font-size: 26px; }
  .fpe-hc .hc-tray { margin: -3px 36px 0; }
  .fpe-hc .hc-res { padding: 24px 24px 22px; }
  .fpe-hc .hc-res-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "v1 v2" "sup sup" "work work"; column-gap: 24px; }
  .fpe-hc .hc-sim-foot { grid-template-columns: minmax(0, 1fr); }
  .fpe-hc .hc-flow { max-width: 560px; }
  .fpe-hc .hc-res-grid--nosup { grid-template-areas: "v1 v2" "work work"; }
  .fpe-hc .hc-val-n { font-size: 32px; }
  .fpe-hc .hc-spec { grid-template-columns: minmax(0, 1fr); }
  .fpe-hc .hc-spec-l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
  .fpe-hc .hc-fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; }
}

/* =========================================================================== small tablet 768–991 (and below) */
@container fpehc (max-width: 991px) {
  .fpe-hc .hc-modes-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .fpe-hc .hc-mode, .fpe-hc .hc-mode[aria-current] { flex-direction: row; align-items: flex-start; gap: 12px; padding: 12px 14px; }
  .fpe-hc .hc-mode-kicker, .fpe-hc .hc-mode-go, .fpe-hc .hc-mode-badge, .fpe-hc .hc-mode[aria-current] .hc-mode-badge { display: none; }
  .fpe-hc .hc-mode-num { width: 30px; height: 30px; font-size: 15px; }
  .fpe-hc .hc-mode-body { flex: 1 1 auto; min-width: 0; gap: 2px; }
  .fpe-hc .hc-mode-title { font-size: 16px; }
  .fpe-hc .hc-mode-desc { font-size: 13px; line-height: 1.55; }
  .fpe-hc .hc-mode-icon { display: flex; flex-shrink: 0; padding-top: 6px; color: #17579B; }
  .fpe-hc .hc-mode-icon-cur { display: none; }
  .fpe-hc .hc-mode[aria-current] .hc-mode-icon { padding-top: 4px; color: #D10A0A; }
  .fpe-hc .hc-mode[aria-current] .hc-mode-icon-cur { display: flex; }
  .fpe-hc .hc-mode[aria-current] .hc-mode-icon-go { display: none; }
  .fpe-hc .hc-mode-icon-cur path { stroke-width: 2.8; }
  .fpe-hc .hc-tray { display: none; }
  .fpe-hc .hc-live-boxes, .fpe-hc[data-type="2"] .hc-live-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fpe-hc .hc-spec-l { grid-template-columns: minmax(0, 1fr); }
  .fpe-hc .hc-cta { flex-direction: column; align-items: flex-start; gap: 18px; }
}

/* =========================================================================== phone < 768 (designed at 390) */
@container fpehc (max-width: 767px) {
  .fpe-hc .hc-main { padding: 12px 8px 22px; gap: 12px; }
  .fpe-hc .hc-crumbs { margin-bottom: 0; padding: 0 8px; }
  .fpe-hc .hc-crumbs ol { font-size: 13px; }
  .fpe-hc .hc-crumbs a { min-height: 32px; }
  .fpe-hc .hc-sec { scroll-margin-top: 16px; }
  .fpe-hc .hc-board { padding: 7px; border-radius: 8px; box-shadow: 0 20px 32px -24px rgba(16, 40, 70, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.95); }
  .fpe-hc .hc-cap { width: 14px; height: 14px; }
  .fpe-hc .hc-surface--std, .fpe-hc .hc-surface--sim, .fpe-hc .hc-surface--formulas { padding: 22px 18px 24px; }
  .fpe-hc .hc-surface--intro { padding: 24px 16px 22px; }
  .fpe-hc .hc-intro { gap: 20px; }
  .fpe-hc .hc-intro-top { gap: 16px; }
  .fpe-hc .hc-eyebrow { gap: 10px; font-size: 11px; }
  .fpe-hc .hc-eyebrow-line { width: 24px; }
  .fpe-hc .hc-h1 { font-size: 34px; line-height: 1.26; }
  .fpe-hc .hc-h1-l { display: block; }
  .fpe-hc .hc-mark-line { margin-top: -4px; }
  .fpe-hc .hc-mark-line path { stroke-width: 4; }
  .fpe-hc .hc-mark--h2 .hc-mark-line { height: 12px; margin-top: -3px; }
  .fpe-hc .hc-mark--h2 .hc-mark-line path { stroke-width: 3.5; }
  .fpe-hc .hc-mark--sm .hc-mark-line path { stroke-width: 2.5; }
  .fpe-hc .hc-modes { gap: 10px; }
  .fpe-hc .hc-modes-t { font-size: 17px; }
  .fpe-hc .hc-stack34, .fpe-hc .hc-stack30 { gap: 16px; }
  .fpe-hc .hc-stack28, .fpe-hc .hc-stack36 { gap: 18px; }
  .fpe-hc .hc-head { gap: 14px; }
  .fpe-hc .hc-head-t { gap: 12px; }
  .fpe-hc .hc-h2 { font-size: 27px; }
  .fpe-hc .hc-h2-l { display: block; }
  .fpe-hc .hc-lead { font-size: 15px; }
  /* settings */
  .fpe-hc .hc-set, .fpe-hc[data-type="2"] .hc-set { gap: 16px; }
  .fpe-hc .hc-set-cards--split, .fpe-hc .hc-set-cards--three { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  .fpe-hc .hc-stack { gap: 16px; }
  .fpe-hc .hc-card--in { padding: 22px 16px 20px; gap: 16px; }
  .fpe-hc .hc-card-head .hc-num, .fpe-hc .hc-res .hc-num { width: 28px; height: 28px; font-size: 14px; }
  .fpe-hc .hc-h3 { font-size: 18px; }
  .fpe-hc .hc-label { font-size: 14px; }
  .fpe-hc .hc-numin { width: 86px; }
  .fpe-hc .hc-unit { width: 44px; }
  .fpe-hc .hc-chip { height: 40px; }
  .fpe-hc .hc-rodstd-b { min-height: 56px; }
  .fpe-hc .hc-seg > button { height: 44px; }
  .fpe-hc .hc-hintrow--tall { min-height: 47px; }
  .fpe-hc .hc-live, .fpe-hc[data-type="2"] .hc-live { display: block; padding: 12px; border: 1.5px dashed #17579B; background: #EEF4FA; }
  .fpe-hc .hc-live-title, .fpe-hc .hc-live-links, .fpe-hc[data-type="2"] .hc-live-links { display: none; }
  .fpe-hc .hc-live-boxes, .fpe-hc[data-type="2"] .hc-live-boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
  .fpe-hc .hc-box { gap: 0; padding: 0; border: 0; border-radius: 0; background: none; }
  .fpe-hc .hc-box-l { font-size: 12px; line-height: 1.45; }
  .fpe-hc .hc-box-v { gap: 4px; flex-wrap: nowrap; }
  .fpe-hc .hc-box-n { font-size: 17px; line-height: 1.7; }
  .fpe-hc .hc-box-u { font-family: var(--hc-fh); font-size: 13px; font-weight: 600; }
  .fpe-hc .hc-box-s { display: none; }
  /* simulation */
  .fpe-hc .hc-sim { gap: 12px; }
  .fpe-hc .hc-sim-bar { display: block; }
  .fpe-hc .hc-ctl--4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fpe-hc .hc-ctl--1 { display: grid; grid-template-columns: minmax(0, 1fr); }
  .fpe-hc .hc-ctl > button { height: 42px; padding: 0 12px; font-size: 14px; }
  .fpe-hc .hc-sim-status { font-size: 14px; }
  .fpe-hc .hc-sim-foot { row-gap: 12px; }
  .fpe-hc .hc-flow { max-width: none; padding: 14px 14px 12px; gap: 8px; }
  .fpe-hc .hc-flow-t { font-size: 15px; }
  .fpe-hc .hc-flow-row { grid-template-columns: 54px minmax(0, 1fr) minmax(0, 1fr); column-gap: 8px; padding: 8px 4px; }
  .fpe-hc .hc-flow-row--h small { display: block; }
  .fpe-hc .hc-flow-v { gap: 2px 6px; }
  .fpe-hc .hc-flow-v i { width: 12px; }
  .fpe-hc .hc-flow-n { font-size: 14px; }
  /* results */
  .fpe-hc .hc-res { padding: 24px 16px 18px; gap: 14px; }
  .fpe-hc .hc-res-list { gap: 18px; }
  .fpe-hc .hc-res-grid { column-gap: 18px; row-gap: 14px; }
  .fpe-hc .hc-val-l { font-size: 13px; }
  .fpe-hc .hc-val-n { font-size: 28px; }
  .fpe-hc .hc-val-u { font-size: 14px; }
  .fpe-hc .hc-val-s { font-size: 13px; line-height: 1.55; }
  .fpe-hc .hc-work { padding: 10px 12px; font-size: 12px; }
  .fpe-hc .hc-sup-t { font-size: 14px; }
  .fpe-hc .hc-cycle-n { font-size: 22px; }
  .fpe-hc .hc-motor { padding: 14px; }
  .fpe-hc .hc-motor-v { font-size: 24px; }
  .fpe-hc .hc-motor-hp { font-size: 15px; }
  .fpe-hc .hc-pnote { min-height: 58px; }
  .fpe-hc .hc-rpms-grid { gap: 8px; }
  .fpe-hc .hc-rpm { padding: 8px 10px; }
  .fpe-hc .hc-rpm-r { font-size: 12px; }
  .fpe-hc .hc-rpm-q { font-size: 18px; }
  .fpe-hc .hc-actions-row { display: grid; grid-template-columns: minmax(0, 1fr); }
  /* spec */
  .fpe-hc .hc-spec { row-gap: 18px; }
  .fpe-hc .hc-card--form { padding: 22px 16px 20px; }
  .fpe-hc .hc-plabel { font-size: 14px; }
  .fpe-hc .hc-textarea { height: 100px; }
  .fpe-hc .hc-print-note { min-height: 63px; }
  .fpe-hc .hc-spec-r { flex-direction: row; align-items: center; gap: 14px; padding: 4px 0 2px; }
  .fpe-hc .hc-a4 { width: 191px; }
  .fpe-hc .hc-a4-mag--l { left: 23px; }
  .fpe-hc .hc-a4-mag--r { right: 23px; }
  /* formulas */
  .fpe-hc .hc-fgrid { display: flex; flex-direction: column; gap: 16px; }
  .fpe-hc .hc-fg-t { margin: 0; font-size: 17px; line-height: 1.4; }
  .fpe-hc .hc-fbox { gap: 0; padding: 10px 12px; background: #F3F6FA; border: 1px dashed #C4D4E6; font-family: var(--hc-fm); font-size: 12px; line-height: 1.75; color: #103F72; overflow-wrap: anywhere; }
  .fpe-hc .hc-fmain { align-self: stretch; padding: 0; margin: 0; }
  .fpe-hc .hc-ring { display: none; }
  .fpe-hc .hc-fmain > span { display: block; font-size: 14px; font-weight: 600; white-space: normal; }
  .fpe-hc .hc-fline { font-size: 12px; font-weight: 400; line-height: 1.75; }
  .fpe-hc .hc-cta { gap: 14px; padding-top: 18px; align-items: stretch; }
  .fpe-hc .hc-cta-h { font-size: 19px; line-height: 1.6; } /* room for the red marker when the question wraps */
  .fpe-hc .hc-cta-btns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .fpe-hc .hc-btn--cta, .fpe-hc .hc-btn--cta2 { justify-content: space-between; padding: 0 20px; }
}

/* =========================================================================== print: only the A4 sheet */
.fpe-hc.fpe-hc--print { display: none; overflow: visible; background: none; container-type: normal; }
@media print {
  @page { size: A4; margin: 0; }
  /* html.fpe-hc-print is set by the script once the sheet exists; without it the page prints as it is */
  html.fpe-hc-print, html.fpe-hc-print > body { width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: #FFFFFF !important; overflow: visible !important; }
  html.fpe-hc-print > body > *:not(.fpe-hc--print) { display: none !important; }
  .fpe-hc.fpe-hc--print { display: block !important; position: static !important; width: 210mm; height: 296mm; margin: 0 !important; padding: 0 !important; overflow: hidden; background: #FFFFFF !important; }
  .fpe-hc.fpe-hc--print .hc-sheet { width: 210mm; height: 296mm; }
  .fpe-hc.fpe-hc--print, .fpe-hc.fpe-hc--print * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}

/* =========================================================================== fallback for browsers without container queries (same rules, by window width) */
@supports not (container-type: inline-size) {
  @media (min-width: 768px) {
  .fpe-hc .hc-om { display: none !important; }
  }
  @media (max-width: 767px) {
  .fpe-hc .hc-nm { display: none !important; }
  }
  @media (max-width: 1439px) {
  .fpe-hc .hc-main { padding-left: 40px; padding-right: 40px; }
  .fpe-hc .hc-surface--std { padding: 44px 40px 48px; }
  .fpe-hc .hc-set { grid-template-columns: minmax(0, 1fr) 264px; column-gap: 24px; }
  .fpe-hc .hc-set-cards--split, .fpe-hc .hc-set-cards--three { column-gap: 24px; }
  .fpe-hc .hc-card--in { padding: 26px 22px 24px; }
  .fpe-hc .hc-res-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(360px, 450px); }
  .fpe-hc .hc-spec { grid-template-columns: 420px minmax(0, 1fr); column-gap: 40px; }
  .fpe-hc .hc-fgrid { column-gap: 36px; }
  }
  @media (max-width: 1199px) {
  .fpe-hc .hc-main { padding: 16px 24px 64px; gap: 40px; }
  .fpe-hc .hc-crumbs { margin-bottom: -22px; }
  .fpe-hc .hc-surface--intro { padding: 36px 36px 40px; }
  .fpe-hc .hc-surface--std { padding: 36px 30px 40px; }
  .fpe-hc .hc-surface--sim { padding: 36px 30px 36px; }
  .fpe-hc .hc-surface--formulas { padding: 36px 30px 40px; }
  .fpe-hc .hc-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .fpe-hc .hc-lead, .fpe-hc .hc-lead--440 { width: auto; max-width: 680px; }
  .fpe-hc .hc-h1 { font-size: 38px; white-space: normal; }
  .fpe-hc .hc-h2 { font-size: 32px; }
  .fpe-hc .hc-intro-lead { font-size: 16px; }
  .fpe-hc .hc-mode-title { font-size: 17px; }
  .fpe-hc .hc-set, .fpe-hc[data-type="2"] .hc-set { display: flex; flex-direction: column; align-items: stretch; gap: 28px; }
  .fpe-hc .hc-set-cards--split, .fpe-hc .hc-set-cards--three { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; }
  .fpe-hc .hc-set-cards--three > .hc-card:first-child { grid-row: span 2; }
  .fpe-hc .hc-stack { gap: 24px; }
  .fpe-hc .hc-card--in { padding: 26px 22px 24px; }
  .fpe-hc .hc-live, .fpe-hc[data-type="2"] .hc-live { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title links" "boxes boxes"; align-items: end; column-gap: 24px; }
  .fpe-hc .hc-live-title, .fpe-hc[data-type="2"] .hc-live-title { padding-top: 0; }
  .fpe-hc .hc-live-s--left, .fpe-hc[data-type="2"] .hc-live-s--left { display: none; }
  .fpe-hc .hc-live-s--above, .fpe-hc[data-type="2"] .hc-live-s--above { display: inline; }
  .fpe-hc .hc-live-links, .fpe-hc[data-type="2"] .hc-live-links { flex-direction: row; gap: 24px; }
  .fpe-hc .hc-live-boxes, .fpe-hc[data-type="2"] .hc-live-boxes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .fpe-hc .hc-box-n { font-size: 26px; }
  .fpe-hc .hc-tray { margin: -3px 36px 0; }
  .fpe-hc .hc-res { padding: 24px 24px 22px; }
  .fpe-hc .hc-res-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "v1 v2" "sup sup" "work work"; column-gap: 24px; }
  .fpe-hc .hc-sim-foot { grid-template-columns: minmax(0, 1fr); }
  .fpe-hc .hc-flow { max-width: 560px; }
  .fpe-hc .hc-res-grid--nosup { grid-template-areas: "v1 v2" "work work"; }
  .fpe-hc .hc-val-n { font-size: 32px; }
  .fpe-hc .hc-spec { grid-template-columns: minmax(0, 1fr); }
  .fpe-hc .hc-spec-l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
  .fpe-hc .hc-fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; }
  }
  @media (max-width: 991px) {
  .fpe-hc .hc-modes-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .fpe-hc .hc-mode, .fpe-hc .hc-mode[aria-current] { flex-direction: row; align-items: flex-start; gap: 12px; padding: 12px 14px; }
  .fpe-hc .hc-mode-kicker, .fpe-hc .hc-mode-go, .fpe-hc .hc-mode-badge, .fpe-hc .hc-mode[aria-current] .hc-mode-badge { display: none; }
  .fpe-hc .hc-mode-num { width: 30px; height: 30px; font-size: 15px; }
  .fpe-hc .hc-mode-body { flex: 1 1 auto; min-width: 0; gap: 2px; }
  .fpe-hc .hc-mode-title { font-size: 16px; }
  .fpe-hc .hc-mode-desc { font-size: 13px; line-height: 1.55; }
  .fpe-hc .hc-mode-icon { display: flex; flex-shrink: 0; padding-top: 6px; color: #17579B; }
  .fpe-hc .hc-mode-icon-cur { display: none; }
  .fpe-hc .hc-mode[aria-current] .hc-mode-icon { padding-top: 4px; color: #D10A0A; }
  .fpe-hc .hc-mode[aria-current] .hc-mode-icon-cur { display: flex; }
  .fpe-hc .hc-mode[aria-current] .hc-mode-icon-go { display: none; }
  .fpe-hc .hc-mode-icon-cur path { stroke-width: 2.8; }
  .fpe-hc .hc-tray { display: none; }
  .fpe-hc .hc-live-boxes, .fpe-hc[data-type="2"] .hc-live-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fpe-hc .hc-spec-l { grid-template-columns: minmax(0, 1fr); }
  .fpe-hc .hc-cta { flex-direction: column; align-items: flex-start; gap: 18px; }
  }
  @media (max-width: 767px) {
  .fpe-hc .hc-main { padding: 12px 8px 22px; gap: 12px; }
  .fpe-hc .hc-crumbs { margin-bottom: 0; padding: 0 8px; }
  .fpe-hc .hc-crumbs ol { font-size: 13px; }
  .fpe-hc .hc-crumbs a { min-height: 32px; }
  .fpe-hc .hc-sec { scroll-margin-top: 16px; }
  .fpe-hc .hc-board { padding: 7px; border-radius: 8px; box-shadow: 0 20px 32px -24px rgba(16, 40, 70, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.95); }
  .fpe-hc .hc-cap { width: 14px; height: 14px; }
  .fpe-hc .hc-surface--std, .fpe-hc .hc-surface--sim, .fpe-hc .hc-surface--formulas { padding: 22px 18px 24px; }
  .fpe-hc .hc-surface--intro { padding: 24px 16px 22px; }
  .fpe-hc .hc-intro { gap: 20px; }
  .fpe-hc .hc-intro-top { gap: 16px; }
  .fpe-hc .hc-eyebrow { gap: 10px; font-size: 11px; }
  .fpe-hc .hc-eyebrow-line { width: 24px; }
  .fpe-hc .hc-h1 { font-size: 34px; line-height: 1.26; }
  .fpe-hc .hc-h1-l { display: block; }
  .fpe-hc .hc-mark-line { margin-top: -4px; }
  .fpe-hc .hc-mark-line path { stroke-width: 4; }
  .fpe-hc .hc-mark--h2 .hc-mark-line { height: 12px; margin-top: -3px; }
  .fpe-hc .hc-mark--h2 .hc-mark-line path { stroke-width: 3.5; }
  .fpe-hc .hc-mark--sm .hc-mark-line path { stroke-width: 2.5; }
  .fpe-hc .hc-modes { gap: 10px; }
  .fpe-hc .hc-modes-t { font-size: 17px; }
  .fpe-hc .hc-stack34, .fpe-hc .hc-stack30 { gap: 16px; }
  .fpe-hc .hc-stack28, .fpe-hc .hc-stack36 { gap: 18px; }
  .fpe-hc .hc-head { gap: 14px; }
  .fpe-hc .hc-head-t { gap: 12px; }
  .fpe-hc .hc-h2 { font-size: 27px; }
  .fpe-hc .hc-h2-l { display: block; }
  .fpe-hc .hc-lead { font-size: 15px; }
  /* settings */
  .fpe-hc .hc-set, .fpe-hc[data-type="2"] .hc-set { gap: 16px; }
  .fpe-hc .hc-set-cards--split, .fpe-hc .hc-set-cards--three { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  .fpe-hc .hc-stack { gap: 16px; }
  .fpe-hc .hc-card--in { padding: 22px 16px 20px; gap: 16px; }
  .fpe-hc .hc-card-head .hc-num, .fpe-hc .hc-res .hc-num { width: 28px; height: 28px; font-size: 14px; }
  .fpe-hc .hc-h3 { font-size: 18px; }
  .fpe-hc .hc-label { font-size: 14px; }
  .fpe-hc .hc-numin { width: 86px; }
  .fpe-hc .hc-unit { width: 44px; }
  .fpe-hc .hc-chip { height: 40px; }
  .fpe-hc .hc-rodstd-b { min-height: 56px; }
  .fpe-hc .hc-seg > button { height: 44px; }
  .fpe-hc .hc-hintrow--tall { min-height: 47px; }
  .fpe-hc .hc-live, .fpe-hc[data-type="2"] .hc-live { display: block; padding: 12px; border: 1.5px dashed #17579B; background: #EEF4FA; }
  .fpe-hc .hc-live-title, .fpe-hc .hc-live-links, .fpe-hc[data-type="2"] .hc-live-links { display: none; }
  .fpe-hc .hc-live-boxes, .fpe-hc[data-type="2"] .hc-live-boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
  .fpe-hc .hc-box { gap: 0; padding: 0; border: 0; border-radius: 0; background: none; }
  .fpe-hc .hc-box-l { font-size: 12px; line-height: 1.45; }
  .fpe-hc .hc-box-v { gap: 4px; flex-wrap: nowrap; }
  .fpe-hc .hc-box-n { font-size: 17px; line-height: 1.7; }
  .fpe-hc .hc-box-u { font-family: var(--hc-fh); font-size: 13px; font-weight: 600; }
  .fpe-hc .hc-box-s { display: none; }
  /* simulation */
  .fpe-hc .hc-sim { gap: 12px; }
  .fpe-hc .hc-sim-bar { display: block; }
  .fpe-hc .hc-ctl--4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fpe-hc .hc-ctl--1 { display: grid; grid-template-columns: minmax(0, 1fr); }
  .fpe-hc .hc-ctl > button { height: 42px; padding: 0 12px; font-size: 14px; }
  .fpe-hc .hc-sim-status { font-size: 14px; }
  .fpe-hc .hc-sim-foot { row-gap: 12px; }
  .fpe-hc .hc-flow { max-width: none; padding: 14px 14px 12px; gap: 8px; }
  .fpe-hc .hc-flow-t { font-size: 15px; }
  .fpe-hc .hc-flow-row { grid-template-columns: 54px minmax(0, 1fr) minmax(0, 1fr); column-gap: 8px; padding: 8px 4px; }
  .fpe-hc .hc-flow-row--h small { display: block; }
  .fpe-hc .hc-flow-v { gap: 2px 6px; }
  .fpe-hc .hc-flow-v i { width: 12px; }
  .fpe-hc .hc-flow-n { font-size: 14px; }
  /* results */
  .fpe-hc .hc-res { padding: 24px 16px 18px; gap: 14px; }
  .fpe-hc .hc-res-list { gap: 18px; }
  .fpe-hc .hc-res-grid { column-gap: 18px; row-gap: 14px; }
  .fpe-hc .hc-val-l { font-size: 13px; }
  .fpe-hc .hc-val-n { font-size: 28px; }
  .fpe-hc .hc-val-u { font-size: 14px; }
  .fpe-hc .hc-val-s { font-size: 13px; line-height: 1.55; }
  .fpe-hc .hc-work { padding: 10px 12px; font-size: 12px; }
  .fpe-hc .hc-sup-t { font-size: 14px; }
  .fpe-hc .hc-cycle-n { font-size: 22px; }
  .fpe-hc .hc-motor { padding: 14px; }
  .fpe-hc .hc-motor-v { font-size: 24px; }
  .fpe-hc .hc-motor-hp { font-size: 15px; }
  .fpe-hc .hc-pnote { min-height: 58px; }
  .fpe-hc .hc-rpms-grid { gap: 8px; }
  .fpe-hc .hc-rpm { padding: 8px 10px; }
  .fpe-hc .hc-rpm-r { font-size: 12px; }
  .fpe-hc .hc-rpm-q { font-size: 18px; }
  .fpe-hc .hc-actions-row { display: grid; grid-template-columns: minmax(0, 1fr); }
  /* spec */
  .fpe-hc .hc-spec { row-gap: 18px; }
  .fpe-hc .hc-card--form { padding: 22px 16px 20px; }
  .fpe-hc .hc-plabel { font-size: 14px; }
  .fpe-hc .hc-textarea { height: 100px; }
  .fpe-hc .hc-print-note { min-height: 63px; }
  .fpe-hc .hc-spec-r { flex-direction: row; align-items: center; gap: 14px; padding: 4px 0 2px; }
  .fpe-hc .hc-a4 { width: 191px; }
  .fpe-hc .hc-a4-mag--l { left: 23px; }
  .fpe-hc .hc-a4-mag--r { right: 23px; }
  /* formulas */
  .fpe-hc .hc-fgrid { display: flex; flex-direction: column; gap: 16px; }
  .fpe-hc .hc-fg-t { margin: 0; font-size: 17px; line-height: 1.4; }
  .fpe-hc .hc-fbox { gap: 0; padding: 10px 12px; background: #F3F6FA; border: 1px dashed #C4D4E6; font-family: var(--hc-fm); font-size: 12px; line-height: 1.75; color: #103F72; overflow-wrap: anywhere; }
  .fpe-hc .hc-fmain { align-self: stretch; padding: 0; margin: 0; }
  .fpe-hc .hc-ring { display: none; }
  .fpe-hc .hc-fmain > span { display: block; font-size: 14px; font-weight: 600; white-space: normal; }
  .fpe-hc .hc-fline { font-size: 12px; font-weight: 400; line-height: 1.75; }
  .fpe-hc .hc-cta { gap: 14px; padding-top: 18px; align-items: stretch; }
  .fpe-hc .hc-cta-h { font-size: 19px; line-height: 1.6; } /* room for the red marker when the question wraps */
  .fpe-hc .hc-cta-btns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .fpe-hc .hc-btn--cta, .fpe-hc .hc-btn--cta2 { justify-content: space-between; padding: 0 20px; }
  }
}