/* seals12.css - valve stem seals (2026-10-18): two products, no winner, crystal clear, staged like a cinema.
   One idea carries every effect: the heat. On the film: the two seal names (always, large) and one gauge
   (a live reading climbing 90 -> 150 -> 200 °C on a rail whose two marks wear the seals' colours). Around it, the page works with the film:
   - lights down: the silver band dims to graphite as the section arrives and lifts as it leaves (--dk, 0..1, scroll-linked);
   - the film opens from a letterbox slit (--open, 0..1, scroll-linked) and plays once fully open;
   - ambilight: the film's own live colour spills as soft light onto the stage around it;
   - a giant gold numeral behind the film counts with the film's gauge;
   - a gold line draws from the film's number to the same number in the table, which lights in gold.
   Identity colours: Acryl steel blue, Viton copper (neither means good or bad). Gold means "the heat on the film now". */
.band-sx{--acryl:#285685;--viton:#80441F;--gold:#E3B341;--dk:0;--open:1;
  --bg:color-mix(in oklab,#0E1013 calc(var(--dk) * 100%),#DDE1E5);
  --fg:#0F1215;--fg2:#2E363D;--fg3:#3A434B;--line:rgba(15,18,21,.16);--rule:#0F1215;--accent:#10305C;
  background:var(--bg);color:var(--fg);padding:104px 0 120px;position:relative;overflow:clip;isolation:isolate}
.band-sx.is-dark{--fg:#F4F5F7;--fg2:#C9D0D7;--fg3:#A3ACB5;--line:rgba(255,255,255,.16);--rule:#F4F5F7;--accent:#9FBBE0}
.band-sx :is(h2,.accent,.eyebrow,.sx-msg,.sx-foot,.sx-cap,.sx-code,td,th,.sx-big){transition:color .4s ease-out,border-color .4s ease-out}
.sx{display:grid;grid-template-columns:minmax(0,4.5fr) minmax(0,7.5fr);gap:52px;align-items:center;position:relative}
.sx-copy{position:relative;z-index:2}
.sx h2{color:var(--fg);font-size:clamp(38px,3.4vw,54px);text-wrap:balance}
.band-sx:not(.is-dark) .sx h2{color:#10305C}
.sx h2 .accent{color:#E3101E;white-space:nowrap}
.sx-copy .eyebrow{color:var(--fg2);font-size:14px;letter-spacing:.12em}
.sx-msg{font:500 clamp(18px,1.4vw,20px)/1.45 var(--body);color:var(--fg2);max-width:38ch;margin:22px 0 0;text-wrap:pretty}

/* ---------------------------------------------------------------- the table: a glass spec panel on the dark stage */
.sx-table{width:100%;border-collapse:separate;border-spacing:0;margin-top:28px;padding:6px 18px 4px;border-radius:12px;
  background:color-mix(in srgb,rgba(255,255,255,.045) calc(var(--dk) * 100%),rgba(255,255,255,0));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,rgba(255,255,255,.10) calc(var(--dk) * 100%),rgba(255,255,255,0))}
.sx-table thead td{width:27%}
.sx-table thead th{width:36.5%}
.sx-table thead th{vertical-align:bottom;text-align:left;padding:10px 8px 14px 0;border-bottom:2px solid var(--rule)}
.sx-seal{display:block;width:108px;height:108px;margin:0 0 6px -10px;perspective:500px}
.sx-seal img{display:block;width:100%;height:100%;object-fit:contain;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--fy,0px));
  filter:drop-shadow(0 10px 14px rgba(0,0,0,calc(.18 + var(--dk) * .3)));will-change:transform}
/* the same name plates as on the film: same colour, same order (Acryl left, Viton right) */
.sx-name{display:inline-block;padding:6px 12px 5px;border-radius:5px;font:700 24px/1 var(--display);letter-spacing:.03em;text-transform:uppercase;color:#fff}
.sx-name-a{background:var(--acryl)} .sx-name-v{background:var(--viton)}
.sx-code{display:block;margin-top:7px;font:500 14px/1.2 var(--body);letter-spacing:.02em;color:var(--fg3);white-space:nowrap}
.sx-table td,.sx-table tbody th{padding:15px 10px 15px 0;border-bottom:1px solid var(--line);vertical-align:middle;text-align:left;color:var(--fg2);font:500 18px/1.35 var(--body)}
.sx-table tbody tr:last-child > *{border-bottom:0}
.sx-table tbody th{font:600 16px/1.3 var(--body);color:var(--fg3);white-space:nowrap}
.sx-table .sx-big{display:inline-block;font:600 32px/1 var(--display);letter-spacing:-.005em;color:var(--fg);white-space:nowrap}
/* the heat cell the film is showing right now: gold outline and a gold wash, nothing moves or resizes */
.sx-table .r-heat td{position:relative}
.sx-table .sx-big small{font:500 15px/1 var(--body);letter-spacing:0;color:var(--fg3);margin-right:4px;vertical-align:.3em}
.sx-table .r-heat td::before{content:"";position:absolute;inset:4px 10px 4px -10px;border-radius:8px;z-index:-1;opacity:0;
  background:color-mix(in srgb,rgba(227,179,65,.16) calc(var(--dk) * 100%),#FBF1D3);box-shadow:inset 0 0 0 3px var(--gold),0 0 32px -6px rgba(227,179,65,calc(var(--dk) * .55));transition:opacity .5s ease-out}
.sx-table .r-heat td.is-now::before{opacity:1}
/* once the heat passes Acryl's rating its number turns its own light blue in a dashed blue frame: "150 vs 200" at a glance */
.sx-table .r-heat td.is-past::before{opacity:1;background:rgba(40,86,133,.22);box-shadow:none;outline:2px dashed #6E9CD0;outline-offset:-2px}
.sx-table .r-heat td.is-past .sx-big{color:#A9CBF2}
/* the close: both cells quietly outlined (gold means "the heat now", and the gauge is back at 90) */
.sx-table .r-heat td.is-rest::before{opacity:1;background:none;box-shadow:inset 0 0 0 1.5px rgba(244,245,247,.35)}
.sx-table tbody{position:relative;z-index:0}
.sx-foot{font:500 16px/1.5 var(--body);color:var(--fg3);margin-top:12px}
.sx-cta{margin-top:26px}

/* ---------------------------------------------------------------- the giant numeral is retired: it only ever showed as a sliver behind the header and the film's corner. The film's own gauge carries the heat. */
.sx-giant{display:none}
.gg-val{font:inherit;min-width:1.6em;text-align:right}

/* ---------------------------------------------------------------- the film */
.sx-film{margin:0;position:relative;z-index:1;transform-origin:50% 60%;will-change:transform}
/* ambilight: the film's live colour, a few pixels, blown up and blurred behind the stage */
.sx-amb{position:absolute;left:-8%;top:-10%;width:116%;height:120%;z-index:-1;pointer-events:none;
  filter:blur(56px) saturate(1.4);opacity:calc(.12 + var(--dk) * .4);transform:translateZ(0)}
.sx-stage{position:relative;aspect-ratio:16/9;background:#0C0D0F;border-radius:10px;overflow:hidden;isolation:isolate;
  clip-path:inset(calc((1 - var(--open)) * 47%) 0 calc((1 - var(--open)) * 47%) 0 round 10px);
  box-shadow:0 40px 80px -30px rgba(0,0,0,calc(.45 + var(--dk) * .35)),0 0 0 1px rgba(255,255,255,calc(var(--dk) * .08))}
.sx-stage video,.sx-stage .sx-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sx-stage video{opacity:0;transition:opacity .35s linear}
.sx-stage video.is-live{opacity:1}
.sx-cap{font:500 16px/1.5 var(--body);color:var(--fg3);margin-top:32px;text-align:right;padding-right:250px}

/* on the film: the bottom band only (no seal and no oil ever enters it), on a soft scrim */
.sx-hud{position:absolute;inset:0;pointer-events:none;z-index:2;container-type:inline-size}
.sx-hud::before{content:"";position:absolute;left:0;right:0;bottom:0;height:17%;background:linear-gradient(rgba(6,8,10,0),rgba(6,8,10,.55))}
.sx-label{position:absolute;bottom:1.5%;transform:translateX(-50%);border-radius:6px;color:#fff;white-space:nowrap;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 6px 18px rgba(0,0,0,.45)}
.sx-label{padding:.22em .55em .16em;font:700 clamp(18px,4.3cqw,44px)/1 var(--display);letter-spacing:.04em;text-transform:uppercase}
.sx-label-a{left:24%;background:var(--acryl)} .sx-label-v{left:76%;background:var(--viton)}
/* the gauge: one live reading and one rail. The two marks carry the seals' own colours (150 = Acryl blue, 200 = Viton
   copper), so the rail says "Acryl's rating, Viton's rating" without a word. Graphite glass, gold for the heat itself. */
.sx-gauge-film{position:absolute;left:50%;bottom:3%;transform:translateX(-50%);width:36%;padding:.6cqw 1.6cqw 1.2cqw;border-radius:8px;
  background:rgba(10,11,13,.8);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:inset 0 0 0 1px rgba(227,179,65,.3),0 6px 18px rgba(0,0,0,.45);
  transition:opacity .45s ease-out}
.sx-gauge-film.off{opacity:0}
.g-num{display:flex;justify-content:center;align-items:flex-start;gap:.08em;color:var(--gold);font:600 clamp(26px,5.4cqw,56px)/1 var(--display);font-variant-numeric:tabular-nums}
.g-num .u{font-size:.55em;margin-top:.08em}
.g-val{font:inherit;min-width:1.55em;text-align:right}
.g-rail{position:relative;height:clamp(7px,1cqw,11px);margin:1cqw .2cqw calc(clamp(20px,2.6cqw,26px) + 1.2cqw);border-radius:9px;background:rgba(255,255,255,.16)}
.g-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:inherit;background:linear-gradient(90deg,#B0802A,var(--gold) 60%,#FFD27A);box-shadow:0 0 12px rgba(227,179,65,.55)}
.g-mk{position:absolute;top:50%;width:3px;height:240%;transform:translate(-50%,-50%);border-radius:2px;background:#fff}
.g-mk span{position:absolute;top:calc(100% + 3px);left:50%;transform:translateX(-50%);padding:.12em .38em .08em;border-radius:4px;color:#fff;white-space:nowrap;
  font:700 clamp(20px,2.6cqw,26px)/1 var(--display);letter-spacing:.03em}
.g-a{background:#7EA8D6} .g-a span{background:var(--acryl)}
.g-n{background:#8A939C;height:180%} .g-n span{background:#3A4148;color:#C9D0D7;font-size:.8em}
.g-a.past{box-shadow:0 0 0 3px #A9CBF2}
.g-v{background:#D9A07A} .g-v span{background:var(--viton)}
.g-mk.passed{box-shadow:0 0 0 3px rgba(227,179,65,.35)}
/* the gold line: from the film's number to the same number in the table */
.sx-link{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}
.sx-link path{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(227,179,65,.6));opacity:0;transition:opacity .6s ease-out}
.sx-link path.on{opacity:.9}
.sx-link circle{fill:var(--gold);opacity:0;transition:opacity .4s ease-out}
.sx-link circle.on{opacity:1}

/* the pause control (WCAG 2.2.2), top right, away from the labels */
.sx-pause{position:absolute;right:12px;top:12px;z-index:3;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
  background:rgba(6,8,10,.6);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);transition:background-color .2s}
.sx-pause:hover{background:#10305C}
.sx-pause:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.sx-pause svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sx-pause .i-play{display:none;fill:currentColor;stroke-width:1.6}
.sx-pause[aria-pressed="true"] .i-pause{display:none} .sx-pause[aria-pressed="true"] .i-play{display:block}
.sx-stage.is-rest .sx-pause{display:none}

/* ---------------------------------------------------------------- tablet: heading, film, then the table */
.sx-strip{display:none}
@media (max-width:1100px){
  .sx{display:flex;flex-direction:column;gap:0;align-items:stretch}
  .sx-copy{display:contents}
  .sx-copy .eyebrow{order:1} .sx h2{order:2;margin-bottom:28px} .sx-film{order:3;margin-top:0} .sx-msg{order:4;margin-top:34px}
  .sx-table{order:5;max-width:none} .sx-foot{order:6} .sx-cta{order:7;align-self:flex-start}
  .sx-copy > *{position:relative;z-index:2}
  .sx-cap{padding-right:0}
  .sx-giant,.sx-link{display:none}
}
/* ---------------------------------------------------------------- phone: names stay on the film, the number moves under it */
@media (max-width:760px){
  .band-sx{padding:80px 0 56px}
  .sx h2{margin-bottom:24px} .sx-msg{margin-top:26px}
  .sx-film{margin:0 calc(-1 * var(--pad));display:flex;flex-direction:column}
  .sx-cap{text-align:left;padding-right:var(--pad)}
  .sx-stage{order:1;border-radius:0;clip-path:inset(calc((1 - var(--open)) * 47%) 0 calc((1 - var(--open)) * 47%) 0)} .sx-strip{order:2} .sx-cap{order:3;padding:0 var(--pad)}
  .sx-gauge-film,.sx-giant{display:none}
  .sx-label{font-size:20px}
  .sx-hud::before{height:24%}
  .sx-strip{display:block;padding:10px var(--pad) 4px;background:#0A0B0D;box-shadow:inset 0 -1px 0 rgba(227,179,65,.4)}
  .sx-strip .sx-gauge{max-width:340px;margin:0 auto}
  .sx-strip .g-num{font-size:40px}
  .sx-strip .g-rail{height:8px;margin:10px 4px 30px}
  .sx-strip .g-mk span{font-size:15px}
  /* the table fits a 320px phone: fixed columns, the material line and "about" wrap, nothing runs off the card */
  .sx-table{table-layout:fixed;padding:4px 10px}
  .sx-table thead td{width:23%} .sx-table thead th{width:38.5%;padding-right:6px}
  .sx-seal{width:76px;height:76px;margin-left:-8px}
  .sx-name{font-size:20px}
  .sx-code{white-space:normal;letter-spacing:0}
  .sx-code .sx-tip{display:inline}
  .sx-code .ic-i{display:inline-block;vertical-align:-3px;margin-left:4px;width:16px;height:16px}
  .sx-table td,.sx-table tbody th{padding-right:8px}
  .sx-table tbody th{white-space:normal;font-size:15px}
  .sx-table .sx-big{font-size:24px}
  .sx-table .sx-big small{display:block;margin:0 0 4px;vertical-align:0;font-size:14px}
  .sx-table td{font-size:17px}
  .sx-table .r-heat td::before{inset:4px 6px 4px -6px}
  .sx-cta{width:100%;justify-content:center}
}
/* the narrowest phones: the material line drops a size and may break inside a long word rather than run off the card */
@media (max-width:374px){
  .sx-table{padding:4px 8px}
  .sx-table thead td{width:21%} .sx-table thead th{width:39.5%}
  .sx-seal{width:68px;height:68px}
  .sx-code{font-size:13px;overflow-wrap:anywhere}
  .sx-table tbody th{font-size:14px;overflow-wrap:anywhere}
  .sx-table td{font-size:16px}
}
@media (prefers-reduced-motion: reduce){ .sx-film{transform:none!important} }
.sx-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* tooltips: a dotted underline (row labels) or a small (i) (codes); hover, focus or tap; one at a time; Esc closes */
.sx-tip{all:unset;cursor:help;position:relative;display:inline-flex;align-items:center;gap:5px;padding:10px 0;margin:-10px 0;
  text-decoration:underline dotted 1.5px;text-underline-offset:4px;text-decoration-color:color-mix(in srgb,currentColor 60%,transparent)}
.sx-tip-i{text-decoration:none}
.sx-tip:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:3px}
.ic-i{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;opacity:.8}
.ic-i .dot{fill:currentColor;stroke:none}
.sx-tipbox{position:fixed;z-index:60;max-width:min(300px,calc(100vw - 32px));padding:12px 14px;border-radius:8px;background:#22262B;color:#F4F5F7;
  font:500 16px/1.45 var(--body);letter-spacing:0;text-transform:none;text-align:left;white-space:normal;
  box-shadow:0 12px 28px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.14);opacity:0;transform:translateY(4px);transition:opacity .16s ease-out,transform .16s ease-out;pointer-events:auto}
.sx-tipbox.on{opacity:1;transform:none}
.sx-tipbox b{font-weight:700}
.sx-tipbox::after{content:"";position:absolute;left:var(--ax,50%);width:12px;height:12px;margin-left:-6px;background:#22262B;transform:rotate(45deg);
  box-shadow:1px 1px 0 rgba(255,255,255,.14)}
.sx-tipbox[data-side="top"]::after{bottom:-6px} .sx-tipbox[data-side="bottom"]::after{top:-6px;box-shadow:-1px -1px 0 rgba(255,255,255,.14)}
@media (prefers-reduced-motion: reduce){ .sx-tipbox{transform:none} }

/* the section says what it sells in its biggest type; Acryl or Viton is the line under it */
.sx h2{font-size:clamp(60px,6.3vw,98px);line-height:.92;letter-spacing:-.006em}
.sx-sub{display:block;margin-top:clamp(12px,1.2vw,18px);font-size:clamp(26px,2.5vw,38px);line-height:1.06;letter-spacing:0}
@media (max-width:760px){ .sx h2{font-size:clamp(58px,18vw,76px)} .sx-sub{font-size:clamp(25px,7.2vw,32px)} }

/* laptops and up: everything inside the window below the header. The title crosses both columns; type and spacing tighten with the window's height. */
.sx h2{position:relative;z-index:2}
@media (min-width:1101px){
  .band-sx{padding:clamp(22px,4.4vh,60px) 0 clamp(20px,4vh,56px)}
  .sx{grid-template-columns:minmax(0,4.5fr) minmax(0,7.5fr);gap:clamp(10px,2vh,20px) clamp(28px,3.4vw,52px);align-items:start}
  .sx h2{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 clamp(16px,1.8vw,28px);margin:0;font-size:clamp(46px,min(5.2vw,10.5vh),84px);line-height:1}
  .sx h2 br{display:none}
  .sx-sub{margin:0;font-size:clamp(22px,min(2.3vw,4.6vh),36px)}
  .sx-msg{margin-top:0;max-width:none;font-size:clamp(16px,min(1.3vw,2.4vh),20px);line-height:1.38}
  .sx-table{margin-top:clamp(8px,1.6vh,20px)}
  .sx-seal{width:clamp(56px,10vh,108px);height:clamp(56px,10vh,108px);margin:0 0 2px -6px}
  .sx-table thead th{padding:4px 8px 8px 0}
  .sx-name{font-size:clamp(18px,2.8vh,24px)}
  .sx-table td,.sx-table tbody th{padding:clamp(5px,1.1vh,15px) 10px clamp(5px,1.1vh,15px) 0;font-size:clamp(15px,2.2vh,18px)}
  .sx-table .sx-big{font-size:clamp(23px,3.6vh,32px)}
  .sx-foot{margin-top:clamp(4px,1vh,12px);font-size:clamp(15px,1.9vh,16px)}
  .sx-cta{margin-top:clamp(8px,1.6vh,26px)}
  .sx-film{width:min(100%,calc((var(--fit) - clamp(150px,27vh,240px)) * 16 / 9));justify-self:end}
  .sx-cap{margin-top:clamp(6px,1.2vh,20px);padding-right:0;text-align:center;font-size:clamp(15px,1.9vh,16px)}
}