/* v5 base layout: the static page (no JavaScript, reduced motion). Motion-only rules live in motion.css.
   Derived from the v4 design.css; colours are overridden by palette.css. */
@font-face{font-family:Plex;src:url('vendor/plex-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Plex;src:url('vendor/plex-medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Plex;src:url('vendor/plex-semibold.woff2') format('woff2');font-weight:600;font-display:swap}
/* Subsets of Noto Sans JP / Noto Serif JP (SIL OFL 1.1) holding only the characters this page uses */
@font-face{font-family:NotoSansJPsub;src:url('vendor/noto-sans-jp-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:NotoSansJPsub;src:url('vendor/noto-sans-jp-500.woff2') format('woff2');font-weight:500 600;font-display:swap}
@font-face{font-family:NotoSerifJPsub;src:url('vendor/noto-serif-jp-500.woff2') format('woff2');font-weight:500;font-display:swap}

:root{
  --paper:#f5f3ed;--ink:#233d34;--muted:#58685e;--line:#cbd1c5;--green:#203e34;--accent:#d4dfb3;
  --sans:Plex,NotoSansJPsub,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans CJK JP","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  --serif:NotoSerifJPsub,"Hiragino Mincho ProN","Noto Serif CJK JP","Noto Serif JP","Yu Mincho",serif;
  --header-h:74px;--gutter:56px;
}
*{box-sizing:border-box}
html{scroll-padding-top:var(--header-h)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.8 var(--sans);letter-spacing:.03em;line-break:strict;-webkit-text-size-adjust:100%;text-size-adjust:100%}
button,input,select,textarea{font:inherit;letter-spacing:inherit}
button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-underline-offset:5px}
button{cursor:pointer}
img{display:block;max-width:100%}
h1,h2,h3,p{margin-top:0}
main:focus,section:focus{outline:none}

/* Headings: one authored line per .line. Inside a line, wrap only at <wbr> (phrase) or punctuation. */
h1,h2{font-weight:400;line-height:1.32;letter-spacing:.02em;font-feature-settings:"palt";word-break:keep-all;overflow-wrap:anywhere}
h1 em,h2 em{font-family:var(--serif);font-style:normal;font-weight:500;letter-spacing:.01em}
.line{display:block}
h2{font-size:clamp(36px,3.9vw,60px);margin-bottom:28px}
h3,h4{font-size:22px;line-height:1.45;font-weight:500;letter-spacing:.02em;font-feature-settings:"palt";word-break:keep-all;overflow-wrap:anywhere}
.wrap{width:calc(100% - 2*var(--gutter));max-width:1360px;margin-inline:auto}
.eyebrow{font-size:12px;letter-spacing:.14em;font-weight:500;line-height:1.5;margin-bottom:24px}
.lead{font-size:21px;line-height:1.65;letter-spacing:.02em;font-feature-settings:"palt"}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;min-height:54px;border-radius:3px;padding:14px 22px;text-decoration:none;font-size:15px;font-weight:500;border:1px solid transparent}
.button span{font-size:20px}
.button-light{background:var(--paper);color:var(--green)}
.button-light:hover{background:var(--accent)}
.button-dark{background:var(--green);color:var(--paper)}
.button-dark:hover{background:#325849}
.text-link{display:inline-flex;gap:24px;align-items:center;font-size:15px;font-weight:500;text-decoration:none;padding-bottom:5px;border-bottom:1px solid currentColor}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;top:12px;left:12px;background:white;color:var(--ink);padding:10px;z-index:200;transform:translateY(-160%)}
.skip:focus{transform:none}
[hidden]{display:none!important}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}

/* Header (absolute without JS, fixed with JS) */
.site-header{position:absolute;inset:0 0 auto;z-index:30;height:var(--header-h);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);color:#fff;border-bottom:1px solid #ffffff30}
.js .site-header{position:fixed}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:22px;letter-spacing:-.01em;white-space:nowrap}
.brand b{font-weight:400;letter-spacing:.02em;margin-left:.15em}
.brand-mark{display:flex;align-items:center;gap:3px;height:27px;transform:rotate(-28deg)}
.brand-mark i{display:block;border:1px solid currentColor;border-radius:50%;width:10px;height:25px}
.site-header nav{display:flex;align-items:center;gap:34px;font-size:14px}
.site-header nav a{text-decoration:none}
.site-header nav a:not(.nav-cta):hover{text-decoration:underline}
.nav-cta{padding:11px 18px;border:1px solid #ffffff70;border-radius:3px;display:flex;gap:18px;align-items:center}

/* Hero */
.hero{position:relative;height:100svh;min-height:560px;color:#fff;background:#322e25;isolation:isolate;overflow:hidden}
.hero-media,.hero-image,.hero-image img,.hero-shade,.hero-dim{position:absolute;inset:0;width:100%;height:100%}
.hero-image img{object-fit:cover;object-position:70% 50%}
.hero-dim{background:#0c1c23;opacity:0}
.hero-content{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--header-h) + 24px) var(--gutter) 96px}
.hero-group{max-width:1000px}
.hero h1{font-size:clamp(52px,5.6vw,88px);margin-bottom:28px}
.hero-deck{max-width:540px;font-size:18px;line-height:1.85;margin-bottom:32px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.hero-foot{position:absolute;bottom:26px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:12px}
.hero-foot a{text-decoration:none;display:flex;gap:40px;align-items:center;font-size:14px}
.hero-foot p{margin:0;color:#e6e8dd}

/* Intro */
.intro{padding-block:100px 108px}
.intro-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:100px}
.intro-grid h2{max-width:640px}
.intro-grid>div{max-width:520px}
.intro-grid p:not(.lead){color:var(--muted);margin-bottom:24px}
.feature-heading{font-size:13px;line-height:1.5;font-weight:500;letter-spacing:.08em;margin:36px 0 10px;color:var(--ink)}

/* Installation: static version (stills). The animated stage is enabled by motion.css. */
.scene{position:relative;background:#e8ece3;padding-block:90px 70px}
.scene-copy-in{width:calc(100% - 2*var(--gutter));max-width:1360px;margin-inline:auto}
.scene-copy h2{font-size:clamp(36px,3.9vw,60px)}
.scene-text{max-width:520px;color:var(--muted);font-size:15px}
.steps{list-style:none;padding:0;margin:30px 0;font-size:15px;position:relative}
.steps li{padding:9px 0 9px 14px;display:flex;gap:18px}
.steps li span{font-size:12px;letter-spacing:.06em}
.steps-bar{display:none}
.scene-track{width:calc(100% - 2*var(--gutter));max-width:1360px;margin-inline:auto}
.phase-row,.stage-frame,.sequence-controls{display:none}
.stage{position:relative;width:100%;aspect-ratio:4/3}
.stage-cam,.stage .poster,.stage canvas{position:absolute;inset:0;width:100%;height:100%}
.stage .poster{object-fit:contain}
.stage-tag{position:absolute;bottom:8px;left:16px;font-size:10px;letter-spacing:.12em}
.stage-tag span{display:block;letter-spacing:.02em;color:var(--muted);font-size:11px;margin-top:4px}
.concept-note{font-size:12px;line-height:1.65;max-width:520px;color:var(--muted);margin:18px 0 0}
.load-note{font-size:13px;padding:12px 0}
.stage-stills{margin-top:28px}
.static-note,.reduced-note{font-size:12px;margin:0 0 6px;color:var(--muted)}
.reduced-note{display:none}
.js .reduced-note{display:block}
.stills-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:18px}
.stills-row figure{margin:0}
.stills-row img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.stills-row figcaption{font-size:13px;margin-top:6px}

/* Building */
.building-story{position:relative;isolation:isolate;background:#263e33;color:white}
.building-sticky{position:relative;min-height:760px;overflow:hidden}
.building-media,.building-media picture,.building-media img,.building-shade{position:absolute;inset:0;height:100%;width:100%}
.building-media img{object-fit:cover;object-position:50% 40%}
.building-content{position:relative;min-height:760px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding-block:110px 80px}
.building-content h2{font-size:clamp(36px,3.9vw,60px);max-width:880px;margin-bottom:22px}
.building-content>p:not(.eyebrow){max-width:470px;font-size:17px;margin-bottom:32px}
.photo-note{position:absolute;bottom:26px;right:var(--gutter);font-size:12px;color:#e5e8de;z-index:2}

/* Approach / FAQ / Review / Footer (v4) */
.approach{padding-block:110px}
.section-heading{max-width:700px}
.section-heading>p:last-child{max-width:520px;color:var(--muted)}
/* The trial heading's Japanese lines are long: keep them at two lines on desktop, and give the longer lead fewer lines */
@media(min-width:761px){.approach .section-heading{max-width:none}.approach .section-heading>p:last-child{max-width:720px}}
.review-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;margin-top:62px;border-top:1px solid var(--line);padding-top:28px;position:relative}
.step-number{font-size:12px;letter-spacing:.08em}
.review-steps h3{margin:24px 0 16px}
.review-steps p{color:var(--muted);font-size:15px}
.questions{padding-block:40px 100px;display:grid;grid-template-columns:.9fr 1.1fr;gap:90px}
.questions h2{font-size:38px;max-width:12em}
.faq-list details{border-top:1px solid var(--line)}
.faq-list details:last-child{border-bottom:1px solid var(--line)}
summary{list-style:none;display:flex;justify-content:space-between;gap:20px;padding:22px 0;font-weight:500;cursor:pointer;line-height:1.5}
summary::-webkit-details-marker{display:none}
summary>span{font-size:23px;font-weight:400}
details[open] summary>span{transform:rotate(45deg)}
details p{font-size:15px;color:var(--muted);max-width:560px;padding-bottom:10px}
.review-section{padding-block:95px;background:var(--green);color:var(--paper)}
.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px}
.review-grid>div:last-child{max-width:500px}
.review-grid h2{font-size:clamp(40px,4.6vw,72px)}
.review-grid>div>p:not(.eyebrow){color:#e0e7dc}
.preview-note{font-size:13px;margin-top:22px;max-width:420px}
.fallback-checklist{font-size:15px;margin-top:30px}
.fallback-checklist h3{font-size:18px}
.js-ready .fallback-checklist{display:none}
footer{display:grid;grid-template-columns:1fr 1.2fr;gap:30px;padding-block:48px;font-size:13px;color:var(--muted)}
footer .brand{color:var(--ink)}
footer p{margin:0}
footer .credits{grid-column:2;font-size:12px}
dialog{color:var(--ink);background:var(--paper);border:0;border-radius:5px;max-width:580px;width:calc(100% - 32px);max-height:calc(100svh - 40px);padding:32px;overflow:auto;overscroll-behavior:contain}
dialog::backdrop{background:#101e17a8;backdrop-filter:blur(5px)}
.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.dialog-head .eyebrow{margin:0}
.close-button{border:0;background:transparent;color:var(--ink);font-size:28px;width:44px;height:44px}
.dialog-intro{font-size:14px;color:var(--muted)}
.dialog-terms{margin:10px 0 0;padding:10px 12px;border-left:3px solid var(--accent);font-size:14px;line-height:1.7}
dialog h2{font-size:34px;margin-bottom:18px}
dialog label{display:block;font-size:14px;margin-top:16px;margin-bottom:6px}
.field-note{font-size:13px;color:var(--muted);margin:-2px 0 6px}
.field-hint{font-size:13px;color:var(--muted);margin:6px 0 0}
dialog select,dialog textarea{width:100%;background:#fffefa;border:1px solid #a6b6a4;border-radius:2px;color:var(--ink);padding:10px;resize:vertical}
dialog form>.button{margin-top:22px;width:100%}
.brief-actions{display:flex;gap:24px;align-items:center;margin-top:18px;flex-wrap:wrap}
#brief-status{font-size:13px;color:var(--muted);margin:16px 0 0}


/* Footnote numbers in the text; the sources are listed at the end of the page */
sup.fn{font-size:.62em;line-height:0;margin-left:.08em;letter-spacing:0;font-feature-settings:normal}
sup.fn a{text-decoration:none;color:inherit;padding:0 .1em}
sup.fn a:hover{text-decoration:underline}
/* the headline's note number: small, in the text face, level with the top of the letters (JA: after 。) */
.hero h1 sup.fn{font-family:var(--sans);font-size:.32em;font-weight:400;letter-spacing:0;vertical-align:1.9em;margin-left:-.5em}
html[lang="en"] .hero h1 sup.fn{vertical-align:1.45em;margin-left:.08em}

/* Mechanism (static parts; the motion version draws inside the sticky stage) */
.scene-source{font-size:12px;color:var(--muted);margin-top:14px}
.mech-stage{background:#e7eef0}
.mech{display:block;width:100%;height:100%}
.mech-water{fill:#cfe7f2}
.mech-steel{fill:url(#steel-g)}
.mech-pipeview .mech-steel{fill:url(#steel-ring-g)}
.mech-hatch-line{stroke:#56626a;stroke-width:1.6}
.mech-red,.mech-rust-ring{fill:#a3593b}
.mech-rust-ring{fill-rule:evenodd}
.mech-pores ellipse{fill:#76392a}
.mech-black{fill:#2b3134}
.mech-interface{stroke:#46525a;stroke-width:2}
.mech-leader{stroke:#23343b;stroke-width:1.5}
.mech-labels text{font-size:22px;fill:#23343b;font-family:var(--sans);letter-spacing:.02em}
.mech-device-ring{fill:none;stroke:#b8c1c5;stroke-width:22}
.mech-focus{fill:none;stroke:#23343b;stroke-width:3}
/* the small pipe cross-section, top right: clear of the water molecules and electrons at every step (outer edge r 39.5 around 730,63) */
.mech-inset-device{fill:none;stroke:#b8c1c5;stroke-width:7}
.mech-inset-steel{fill:#76838b}
.mech-inset-water{fill:#cfe7f2;stroke:#a3593b;stroke-width:3}
.mech-inset-focus{fill:none;stroke:#23343b;stroke-width:2}
.stage-tag-note{right:12px;left:auto;bottom:8px;font-size:11px;letter-spacing:.04em;color:var(--muted)}
.mech-stills{margin-top:22px}
.mech-still-list{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;font-size:13px}
.mech-still-list svg{display:block;width:100%;height:auto;aspect-ratio:4/3;margin-bottom:6px;background:#e7eef0}
.mech-still-list b{font-weight:500;margin-right:.4em}

/* Cases */
.cases{padding-block:110px 90px}
.case-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:40px}
.case{border-top:1px solid var(--line);padding-top:22px;display:flex;flex-direction:column}
.case-type{font-size:12px;letter-spacing:.08em;color:var(--muted);margin:0 0 6px}
.case-name{margin:0 0 16px;font-size:22px}
.case-facts{margin:0 0 18px;font-size:14px;display:grid;gap:8px}
.case-facts div{display:grid;grid-template-columns:6.5em 1fr;gap:10px}
.case-facts dt{color:var(--muted)}
.case-facts dd{margin:0}
.case-chart{margin:auto 0 0;padding-top:8px}
.bars{display:flex;align-items:flex-end;gap:22px;height:170px;border-bottom:1px solid var(--ink);padding:0 6px}
.bar{position:relative;flex:1;height:100%}
.bar::before{content:'';position:absolute;left:0;right:0;bottom:0;height:calc(var(--v) * 78%);background:#9fb0b6;transform-origin:50% 100%;transform:scaleY(var(--k,1))}
.bar-after::before{background:var(--green)}
.bar b{position:absolute;left:0;right:0;bottom:calc(var(--v) * 78% * var(--k,1) + 6px);text-align:center;font-size:20px;font-weight:500;letter-spacing:.01em;white-space:nowrap}
.bar span{position:absolute;left:0;right:0;top:calc(100% + 6px);text-align:center;font-size:12px;color:var(--muted)}
.case-chart figcaption{font-size:12px;color:var(--muted);margin-top:30px}
.case-source{font-size:12px;color:var(--muted);margin:10px 0 0}
.cases-note{font-size:12px;color:var(--muted);max-width:760px;margin-top:40px}

/* Track record */
.record{background:var(--green);color:var(--paper);padding-block:100px}
.record h2{font-size:clamp(34px,3.6vw,54px)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px;margin-top:48px;border-top:1px solid #ffffff40;padding-top:30px}
.stat-num{font-size:clamp(42px,4.2vw,64px);white-space:nowrap;line-height:1.1;font-weight:400;letter-spacing:.01em;margin:0 0 8px;font-feature-settings:"palt"}
.stat-num small{font-size:.32em;margin-left:.2em;letter-spacing:.04em}
.stat-label{font-size:15px;margin:0;color:#dfe7e3}
.record-source{font-size:12px;margin-top:36px;color:#dfe7e3}

/* Trial-first evaluation flow */
.flow-bar{display:none}
.review-steps article{color:var(--ink)}

/* Video */
.video-section{padding-block:100px}
.video-frame{margin:40px 0 0}
.video-frame video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#0c1c23;border-radius:3px}
.video-frame figcaption{font-size:13px;color:var(--muted);margin-top:12px}
.video-status{display:block;margin-top:4px;color:var(--ink)}

/* Footer sources */
.credits-title{font-size:13px;font-weight:500;letter-spacing:.08em;margin:0 0 8px;color:var(--ink)}
.sources{margin:0 0 14px;padding-left:1.6em;font-size:12px;line-height:1.7}
.sources li{padding-left:.2em}
.sources li:target{background:#f0bd7533}

/* v2 additions */
.hero-foot{justify-content:flex-end}
.mech-red{fill:url(#mech-layered)}
.mech-black{fill:url(#mech-spinel)}
.mech-red-bg{fill:#a3593b}
.mech-layer-atoms circle{fill:#bf7254}
.mech-layer-fe circle{fill:#5b2a1d}
.mech-black-bg{fill:#2b3134}
.mech-spinel-o circle{fill:#4b545a}
.mech-spinel-fe circle{fill:#14181a}
.mech-o{fill:#2f5f78}
.mech-h{fill:#fff;stroke:#7d939c;stroke-width:1}
.mech-oh{stroke:#6f858e;stroke-width:2.2}
.mech-hb{stroke:#2f5f78;stroke-width:1.4;stroke-dasharray:2.5 3}
.mech-e circle{fill:#f0bd75;stroke:#81613b;stroke-width:1.5}
.mech-e text{font-size:12px;fill:#182f37;text-anchor:middle;font-family:var(--sans);font-weight:500}
.mech-legend text{font-size:15px;fill:#23343b;font-family:var(--sans)}
.mech-captions{margin-top:18px;font-size:14px;counter-reset:cap}
.mech-caption{counter-increment:cap;margin-bottom:12px}
.mech-caption::before{content:'0' counter(cap) ' ';font-size:12px;color:var(--muted)}
.motion .mech-caption::before{content:none}
.formula{font-feature-settings:normal;letter-spacing:.02em;color:var(--muted);white-space:nowrap;overflow-x:auto}
.case-feature{grid-column:auto;display:flex;flex-direction:column}
.case-name small{font-size:.62em;font-weight:400;margin-left:.3em;color:var(--muted)}
.case-figure{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin:4px 0 14px}
.case-figure b{font-size:34px;font-weight:500;line-height:1.1;letter-spacing:.01em}
.case-figure b small{font-size:.5em;margin-left:.15em}
.case-figure .arrow{font-size:22px;color:var(--muted)}
.case-figure .unit{font-size:14px;color:var(--muted)}
.case-figure .period{font-size:14px}
.case-feature .case-figure b{font-size:46px}
.case .bars{height:96px}
.case .bar::before{height:max(2px,calc(var(--v) * 92%))}
.case-line{margin:0}
.case-line svg{display:block;width:100%;height:auto;overflow:visible}
.case-line .grid{stroke:#d6dbd2;stroke-width:1}
.case-line .base{stroke:var(--ink);stroke-width:2}
.case-line .tick{font-size:13px;fill:#526168;font-family:var(--sans)}
.case-line .series{fill:none;stroke:var(--green);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.case-line .pt circle{fill:var(--paper);stroke:var(--green);stroke-width:2.5}
.case-line .pt text{font-size:14px;fill:#23343b;font-weight:500;font-family:var(--sans)}
.case-line figcaption{font-size:12px;color:var(--muted);margin:0 0 6px}
.cases-line{font-size:18px;margin-top:44px;max-width:760px}
.record-title{font-size:13px;font-weight:500;letter-spacing:.14em;margin:0}
.stat-num-text{font-size:clamp(34px,3.6vw,56px)}
.record-note{font-size:15px;margin-top:34px;max-width:760px;color:#e6ece8}
.role{margin-top:36px;max-width:760px;font-size:15px;color:var(--ink)}
.role strong{display:block;font-size:12px;letter-spacing:.12em;font-weight:500;color:var(--muted);margin-bottom:6px}
.review-steps .step-number{font-size:13px}
.video-box{position:relative}
.video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;border:0;border-radius:40px;padding:12px 22px 12px 16px;background:#152e38e6;color:#fff;font-size:15px;font-weight:500;white-space:nowrap}
.hero-overlay{position:absolute;inset:0;pointer-events:none}
.xray{position:absolute;left:calc(var(--x,74) * 1%);top:calc(var(--y,52) * 1%);width:min(22vw,40svh);height:min(22vw,40svh);transform:translate(-50%,-50%);overflow:visible}
.xray-rim{fill:none;stroke:#ffffffb3;stroke-width:3}
.no-js .xray,.no-js .xray-lead,.no-js .xray-label{display:none}
/* The window is a magnified view of one point of the pipe in the photo: a short label and a thin leader line to that point (not a video, no play mark) */
.xray-lead{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.xray-lead line{stroke:#fff;stroke-width:1.6;stroke-linecap:round}.xray-lead line.under{stroke:#10262dcc;stroke-width:4.5}
.xray-lead circle{fill:#fff;stroke:#10262d;stroke-width:2}
.xray-label{position:absolute;left:calc(var(--lx,0) * 1px);top:calc(var(--ly,0) * 1px);transform:translate(-50%,-100%);font-size:14px;line-height:1.3;letter-spacing:.08em;font-weight:500;color:#fff;background:#10262de0;border:1px solid #ffffff59;border-radius:3px;padding:5px 11px;white-space:nowrap}
.xray-label.is-left{transform:translate(-100%,-50%)}
.no-js .video-play{display:none}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none}
.hero-video.is-playing{opacity:1}
.video-play:hover{background:#183b43}
.video-play-icon{width:0;height:0;border-left:14px solid var(--accent);border-top:9px solid transparent;border-bottom:9px solid transparent}
.footer-main p{margin:0 0 8px}
.preview-mark{font-weight:500;color:var(--ink)}
.notes{list-style:none;margin:0 0 14px;padding:0;font-size:12px;line-height:1.7}
/* the note's number (*1, ※1) only: a wider rule also hit the screen-reader " (opens in a new tab)" inside a note's link, and its
   min-width beat .sr-only's 1px, so the hidden text, placed where the link ends, reached past the right edge on phones */
.notes li > span:first-child{display:inline-block;min-width:2.6em;color:var(--ink)}
.notes li:target,.notes li:focus{background:#f0bd7533;outline:none}
sup.fn{font-size:.58em}

/* Compare (v3) */
.compare{padding-block:100px}
.compare-table{margin-top:48px}
.compare-table table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:15px;line-height:1.6}
.compare-table th,.compare-table td{text-align:left;vertical-align:top;padding:16px 18px;border-bottom:1px solid var(--line)}
.compare-table thead th{font-size:14px;font-weight:500;color:var(--muted);border-bottom:1px solid var(--ink);vertical-align:bottom}
.compare-table tbody th{font-size:13px;font-weight:500;letter-spacing:.06em;color:var(--muted);width:7.5em}
.compare-table thead th:first-child{width:7.5em}
.compare-table .is-nmr{background:var(--green);color:var(--paper);font-weight:500;border-bottom-color:#ffffff30}
.compare-table thead .is-nmr{color:var(--paper);border-top:4px solid var(--accent);border-radius:4px 4px 0 0;font-size:16px}
.compare-table tbody tr:last-child .is-nmr{border-radius:0 0 4px 4px}
.compare-close{font-size:20px;line-height:1.7;margin-top:36px;max-width:820px;font-feature-settings:"palt";letter-spacing:.02em}
.about{background:var(--green);color:var(--paper);padding-block:100px}
.about-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:90px;align-items:start}
.about h2{font-size:clamp(36px,3.9vw,60px)}
.about .lead{color:var(--paper);margin:0}

/* v4 sections */
.symptoms{padding-block:100px}
.symptoms-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:80px;align-items:start}
.checklist{list-style:none;margin:0 0 30px;padding:0;border-top:1px solid var(--line)}
.checklist li{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);font-size:18px;line-height:1.5}
.check{flex:0 0 28px;width:28px;height:28px}
.check-box{fill:none;stroke:var(--ink);stroke-width:1.6}
.check-mark{fill:none;stroke:#b4552f;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:0}
.scope-line{font-size:14px;color:var(--muted)}
.why{padding-block:100px}
.why-table{margin-top:46px}
.why-head{display:grid;grid-template-columns:8em 1fr 1fr;gap:0 18px;align-items:end}
.why-art{margin:0;text-align:center}
.why-art svg{display:block;width:100%;max-width:300px;height:auto;margin:0 auto;border-radius:6px}
.art-label{font-size:15px;fill:#23343b;font-family:var(--sans);font-weight:500}.art-label.on-steel{fill:#fff}
.why-art figcaption{font-size:22px;font-weight:500;margin-top:8px}
.why-red figcaption{color:#9a4528}.why-black figcaption{color:#1f262a}
.why-table table{width:100%;border-collapse:separate;border-spacing:18px 0;margin:6px -18px 0;table-layout:fixed;font-size:16px;line-height:1.6}
.why-table th{width:8em;text-align:left;font-size:13px;font-weight:500;color:var(--muted);letter-spacing:.06em;padding:16px 0;border-bottom:1px solid var(--line);vertical-align:top}
.why-table td{padding:16px 16px;vertical-align:top;border-bottom:1px solid var(--line)}
.why-table td.red{background:#f6e6dd;color:#5a2716}
.why-table td.black{background:#1f262a;color:#f2f4f2;border-bottom-color:#00000040}
.why-three{font-size:18px;line-height:1.8;max-width:820px;margin-top:40px}
.why-close{font-size:16px;line-height:1.8;max-width:820px;color:var(--muted)}
.cases-head{max-width:none}
.cases-hero{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin:10px 0 18px}
.cases-hero b{font-size:clamp(72px,9vw,140px);line-height:1;font-weight:500;letter-spacing:-.01em;color:var(--green)}
.cases-hero span{font-size:26px;font-weight:500}
.cases-hero small{font-size:14px;color:var(--muted);flex-basis:100%}
.case-pct{display:flex;align-items:baseline;gap:4px;margin:0 0 4px}
.case-pct b{font-size:56px;line-height:1;font-weight:500;color:var(--green)}
.case-pct span{font-size:20px;font-weight:500}
.case-values{font-size:14px;color:var(--muted);margin:0 0 14px}
.case-values .period{margin-left:.3em}
.case{border:1px solid var(--line);border-radius:6px;padding:22px 22px 18px;background:#fffdf8}
.case-feature .case-pct b{font-size:72px}
.press{margin-top:30px;border-top:1px solid var(--line);padding-top:18px}
.press-lead{margin:8px 0 0;font-size:14px;color:var(--muted)}
.press-list{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 36px}
.press-item{display:flex;gap:18px;align-items:flex-start}
.press-text{flex:1;min-width:0}
.press-kind{display:block;font-size:13px;font-weight:500;color:var(--muted);letter-spacing:.04em;margin-bottom:4px}
.press-list p{margin:0;font-size:15px;line-height:1.8}
.press-list .press-doc{margin-top:8px;font-size:12px;line-height:1.6;color:var(--muted)}
.doc-thumb{flex:0 0 150px;position:relative;display:block;background:#fff;border:1px solid var(--line);border-radius:2px;box-shadow:0 8px 20px #10262d24;overflow:hidden;transition:transform .2s,box-shadow .2s}
.doc-thumb img{display:block;width:100%;height:auto}
.doc-thumb:hover{transform:translateY(-2px);box-shadow:0 12px 26px #10262d33}
.doc-thumb:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.doc-thumb-stack{overflow:visible;margin:0 10px 10px 0;box-shadow:5px 5px 0 -1px #fff,5px 5px 0 0 #c3cbc8,10px 10px 0 -1px #fff,10px 10px 0 0 #c3cbc8,0 8px 20px #10262d24}
.doc-thumb-stack:hover{box-shadow:5px 5px 0 -1px #fff,5px 5px 0 0 #c3cbc8,10px 10px 0 -1px #fff,10px 10px 0 0 #c3cbc8,0 12px 26px #10262d33}
.doc-inline .doc-thumb-stack{margin:0 6px 6px 0;box-shadow:3px 3px 0 -1px #fff,3px 3px 0 0 #c3cbc8,6px 6px 0 -1px #fff,6px 6px 0 0 #c3cbc8,0 6px 14px #10262d24}
.doc-tag{position:absolute;left:0;right:0;bottom:0;padding:4px 8px;font-size:11px;line-height:1.4;color:#fff;background:#10262dd9;letter-spacing:.04em}
.doc-inline{display:flex;gap:12px;align-items:center;margin-top:16px;color:inherit;text-decoration:none;font-size:13px;line-height:1.6}
.doc-inline .doc-thumb{flex-basis:64px}
.doc-inline b{display:block;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.doc-inline small{display:block;color:var(--muted);font-size:12px}
.doc-inline p{margin:0;cursor:pointer}
@media(max-width:1000px){.press-list{grid-template-columns:1fr}}
@media(max-width:760px){.press-list{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-inline:calc(-1 * var(--gutter));padding:4px var(--gutter) 12px;scroll-padding-inline:var(--gutter)}.press-item{flex:0 0 86%;scroll-snap-align:start;gap:12px}.doc-thumb{flex-basis:88px}.doc-tag{font-size:10px;padding:3px 5px;letter-spacing:0;white-space:nowrap}.press-list p{font-size:14px;line-height:1.75}}
dialog.doc-viewer{max-width:min(1120px,calc(100% - 32px));width:100%;height:calc(100svh - 40px);padding:0;overflow:hidden}
dialog.doc-viewer[open]{display:flex;flex-direction:column}
.doc-viewer-head{display:flex;align-items:center;gap:14px;padding:8px 10px 8px 20px;border-bottom:1px solid var(--line)}
.doc-viewer-title{flex:1;min-width:0;margin:0;font-size:15px;font-weight:500;line-height:1.5}
.doc-viewer-count{margin:0;font-size:13px;color:var(--muted);white-space:nowrap}
.doc-viewer-note{margin:0;padding:6px 20px 7px;border-bottom:1px solid var(--line);font-size:12px;line-height:1.55;color:var(--muted)}
.doc-viewer-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;background:#55646a;padding:16px}
.doc-page{margin:0 auto;max-width:1000px}
.doc-page + .doc-page{margin-top:44px}
.doc-page-label{display:inline-block;margin:0 0 8px;padding:3px 12px;border-radius:999px;background:#10262d;color:#fff;font-size:12px;line-height:1.6;letter-spacing:.04em}
.doc-page img{display:block;width:100%;height:auto;background:#fff;box-shadow:0 10px 30px #0006}
.doc-viewer.is-zoomed .doc-page{max-width:none;width:1600px}
.doc-viewer-nav{display:flex;justify-content:space-between;gap:8px;padding:10px 12px;border-top:1px solid var(--line)}
.doc-viewer-nav .button{min-height:40px;padding:8px 14px}
.doc-nav{display:flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.35;min-width:0;max-width:40%}
.doc-nav small{font-size:11px;font-weight:400;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.doc-nav-next{align-items:flex-end;text-align:right}
.doc-nav:disabled{opacity:.35;cursor:default}
@media(max-width:760px){.doc-viewer-nav .button{padding:6px 10px}.doc-page + .doc-page{margin-top:32px}dialog.doc-viewer{max-width:none;width:100%;height:100%;max-height:none;border-radius:0}.doc-viewer-head{padding-left:14px}.doc-viewer-note{padding:5px 14px 6px;font-size:11.5px}.doc-viewer-title{font-size:14px}.doc-viewer-body{padding:10px}.doc-viewer.is-zoomed .doc-page{width:220%}}
.cases-call{font-size:18px;margin-top:18px;padding:16px 20px;border-left:4px solid var(--accent);background:#f0bd7522;max-width:820px}
.mech-more{padding-block:20px 100px}
.tech{border-top:1px solid var(--line);border-bottom:1px solid var(--line);max-width:980px;margin:0 auto 70px}
.tech summary{font-size:18px}
.tech-body{padding-bottom:26px;font-size:15px;color:var(--ink)}
.tech-body p{max-width:760px}
.tech-fig{margin:22px 0}
.tech-fig svg{display:block;width:100%;max-width:640px;height:auto;background:#eef3f4;border-radius:6px}
.tech-fig figcaption{font-size:12px;color:var(--muted);margin-top:6px}
.tech .formula{font-size:15px;color:var(--ink);margin:6px 0}
.video-section{max-width:1100px;margin:0 auto}
.video-head{margin-bottom:0}
.video-end{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;background:#0c1c23c7;border-radius:3px;padding:20px}
.trial-more{padding-bottom:100px}
.trial-term{font-size:17px;font-weight:500;max-width:820px}
.trial-flow{list-style:none;padding:0;margin:26px 0;display:flex;flex-wrap:wrap;gap:10px 8px;counter-reset:fl}
.trial-flow li{counter-increment:fl;display:flex;align-items:baseline;gap:8px;padding:10px 14px;border:1px solid var(--line);border-radius:999px;font-size:14px;background:#fffdf8}
.trial-flow li::before{content:counter(fl);font-size:12px;color:var(--muted)}
.trial-flow li small{font-size:12px;color:var(--muted)}
.trial-roles{font-size:15px;color:var(--muted);max-width:820px}
.record .about-grid{margin-top:70px;padding-top:50px;border-top:1px solid #ffffff30}
dialog input[type=tel],dialog input[type=text]{width:100%;background:#fffefa;border:1px solid #738991;border-radius:2px;color:var(--ink);padding:10px}

/* TV-explainer parts (same colours as the explainer video) */
.w-o{fill:#86c1de;stroke:#2c5662;stroke-width:1.5}
.w-h{fill:#fff;stroke:#2c5662;stroke-width:1.5}
.w-hl{fill:rgba(255,255,255,.75)}
.e-glow{fill:url(#e-glow-g)}
.e-core{fill:#ffec8c}
.rust{fill:#b85e3e;stroke:#7a3b25;stroke-width:5;stroke-linejoin:round}
.rust-spot{fill:#7e3a24}
.tile-body{fill:#1f262a;stroke:#0d1214;stroke-width:2.5}
.tile-hl{fill:rgba(120,138,148,.55)}
.tile-dot{fill:rgba(235,242,245,.9)}
.tech-label{font-size:15px;fill:#23343b;font-family:var(--sans)}
@media(min-width:1800px){.site-header{padding-inline:calc((100vw - 1360px)/2)}.hero-content{padding-inline:calc((100vw - 1360px)/2)}.hero-foot{left:calc((100vw - 1360px)/2);right:calc((100vw - 1360px)/2)}}
@media(max-width:1000px){:root{--gutter:32px}.scene-copy h2{font-size:clamp(28px,3.6vw,44px)}.questions h2{font-size:clamp(28px,3.6vw,38px)}.intro-grid{gap:45px}.questions,.review-grid{gap:45px}.review-steps{gap:28px}.site-header nav{gap:22px}}
@media(max-width:760px){
  :root{--gutter:20px;--header-h:64px}
  .brand{font-size:19px;gap:8px}.brand-mark{display:none}
  .site-header nav{gap:0}.site-header nav>a:not(.nav-cta){display:none}
  .nav-cta{font-size:12px;padding:9px 11px;gap:10px}
  .hero-image img{object-position:60% 50%}
  .hero-content{justify-content:flex-end;padding-bottom:84px}
  .hero h1{font-size:clamp(26px,8.4vw,40px);margin-bottom:20px}
  .hero .eyebrow{font-size:11px;margin-bottom:18px}
  .hero-deck{font-size:15px;line-height:1.8;max-width:420px;margin-bottom:24px}
  .hero-actions{flex-direction:column;align-items:flex-start;gap:16px}
  .hero-foot{bottom:20px;align-items:flex-end}
  .hero-foot a{gap:14px;font-size:12px}
  .hero-foot p{font-size:10px;white-space:nowrap;text-align:right}
  h2,.scene-copy h2{font-size:clamp(27px,9.2vw,38px)}
  .intro{padding-block:66px}
  .intro-grid{grid-template-columns:1fr;gap:4px}
  .lead{font-size:19px}
  .intro p{font-size:15px}
  .eyebrow{font-size:11px}
  .feature-list li{grid-template-columns:9.5em 1fr!important;gap:12px!important}
  .scene{padding-block:66px 50px}
  .stills-row{grid-template-columns:1fr;gap:14px}
  .stills-row figure{display:grid;grid-template-columns:44% 1fr;align-items:center;gap:14px}
  .mech-still-list{grid-template-columns:1fr 1fr;gap:12px}
  .symptoms,.why{padding-block:66px}
  .symptoms-grid{grid-template-columns:1fr;gap:18px}
  .checklist li{font-size:16px;padding:13px 0}
  .why-head{grid-template-columns:0 1fr 1fr;gap:0 10px}
  .why-art figcaption{font-size:18px}
  .why-table table{border-spacing:10px 0;margin:6px -10px 0;font-size:14px}
  .why-table th{width:0;padding:0;overflow:hidden;font-size:0}
  .why-table tr{position:relative}
  .why-table td{padding:30px 10px 12px}
  .why-table td.red::before,.why-table td.black::before{content:attr(data-label);position:absolute;font-size:11px;letter-spacing:.06em;margin-top:-20px;color:inherit;opacity:.75}
  .why-three{font-size:16px}
  .cases-hero b{font-size:88px}
  .case-feature .case-pct b{font-size:60px}
  .case{padding:18px 16px 14px}
  .tech{margin-bottom:50px}
  .video-end{gap:10px}
  .video-end .button{font-size:13px;min-height:44px;padding:10px 14px;gap:14px}
  .trial-more{padding-bottom:66px}
  .compare{padding-block:66px}
  .compare-table{margin-top:30px}
  .compare-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .compare-table table,.compare-table tbody,.compare-table tr,.compare-table th,.compare-table td{display:block;width:auto}
  .compare-table tr{border-top:1px solid var(--ink);padding:12px 0 8px}
  .compare-table tbody th{width:auto;padding:0 0 8px;border:0;font-size:13px}
  .compare-table td{display:grid;grid-template-columns:8.5em 1fr;gap:10px;padding:8px 0;font-size:14px;border-bottom:1px solid var(--line)}
  .compare-table td::before{content:attr(data-label);font-size:12px;color:var(--muted);line-height:1.6}
  .compare-table td.is-nmr{padding:10px 10px;border-radius:4px;border-bottom:0;margin-top:4px}
  .compare-table td.is-nmr::before{color:#dfe7e3}
  .compare-close{font-size:17px}
  .about{padding-block:66px}
  .about-grid{grid-template-columns:1fr;gap:20px}
  .nav-cta{max-width:11.5em;line-height:1.3;word-break:keep-all;font-size:11px;padding:7px 10px}.nav-cta span{display:none}

  .case-grid{grid-template-columns:1fr}
  .video-play{font-size:13px;padding:10px 16px 10px 12px}
  .xray{width:33vw;height:33vw}
  .xray-label{font-size:12px;padding:4px 8px;letter-spacing:.04em}
  .case-feature .case-figure b{font-size:38px}
  .cases-line{font-size:16px}
  .cases{padding-block:66px}
  .case-grid{margin-top:36px;gap:34px}
  .record{padding-block:66px}
  .stats{grid-template-columns:1fr;gap:22px}
  .video-section{padding-block:66px}
  .building-sticky{min-height:640px}
  .building-content{min-height:640px;justify-content:flex-end;padding-block:90px 56px}
  .building-content h2{font-size:clamp(26px,8.4vw,40px);margin-bottom:12px}
  .building-content>p:not(.eyebrow){font-size:15px;max-width:none}
  .photo-note{right:20px;bottom:20px;font-size:10px}
  .approach{padding-block:66px}
  .review-steps{grid-template-columns:1fr;gap:24px;margin-top:36px;padding-top:24px}
  .review-steps article:not(:last-child){border-bottom:1px solid var(--line);padding-bottom:14px}
  .review-steps h3{margin:12px 0}
  .questions{grid-template-columns:1fr;gap:20px;padding-block:20px 66px}
  .questions h2{font-size:clamp(27px,9.2vw,34px);max-width:none}
  .questions summary{font-size:15px}
  .review-section{padding-block:62px}
  .review-grid{grid-template-columns:1fr;gap:12px}
  .review-grid h2{font-size:clamp(30px,9.6vw,40px)}
  .review-grid .button{width:100%}
  footer{grid-template-columns:1fr;gap:20px;padding-block:35px}
  footer .credits{grid-column:auto}
  dialog{padding:22px}dialog h2{font-size:28px}
}
@media(max-width:360px){.nav-cta{font-size:10px;gap:6px;max-width:none;padding:7px 10px;letter-spacing:0}.nav-cta span{display:none}.brand{font-size:15px}.site-header{gap:8px}.hero-deck{font-size:14px}.button{font-size:14px;gap:22px}}

/* Pre-launch trial round (texts and deadline from promo.json): a thin band under the hero that stays under the header */
:root{--band-h:40px;--top-h:calc(var(--header-h) + var(--band-h))}
html{scroll-padding-top:var(--top-h)}
.promo-band{position:sticky;top:var(--header-h);z-index:25;height:var(--band-h);background:#10262d;color:#fff;border-bottom:1px solid #ffffff26;font-size:13px;line-height:1.2;letter-spacing:.04em}
.promo-band-in{height:100%;margin:0;display:flex;align-items:center;gap:18px;padding:0 var(--gutter);white-space:nowrap;overflow:hidden}
.promo-state{font-weight:500;color:var(--accent)}
.promo-short{display:none}
.promo-region,.promo-slots,.promo-count{display:inline-flex;align-items:center;gap:0}
.promo-count{gap:0}.promo-count b{margin:0 2px}
.promo-region::before,.promo-slots::before,.promo-count::before{content:'';width:1px;height:14px;background:#ffffff4d;margin-right:12px}
.promo-count b{font-weight:500;font-variant-numeric:tabular-nums}
.promo-link{margin-left:auto;flex:none;display:inline-flex;align-items:center;min-height:28px;padding:3px 12px;border:1px solid #ffffff80;border-radius:3px;text-decoration:none;font-size:12px}
.promo-link:hover{background:#ffffff1f}
.promo-ended .promo-state{color:#fff}
@media(min-width:1800px){.promo-band-in{padding-inline:calc((100vw - 1360px)/2)}}
@media(max-width:760px){
  :root{--band-h:36px}
  .promo-band{font-size:12px;letter-spacing:0}
  .promo-band-in{gap:9px;padding:0 16px}
  .promo-long,.promo-region{display:none}.promo-short{display:inline}
  html.promo-days .promo-date{display:none}
  .promo-region::before,.promo-slots::before,.promo-count::before{display:none}
  .promo-count{gap:0}
  .promo-link{padding:3px 9px;font-size:11px;min-height:26px}
}
@media(max-width:360px){.promo-band{font-size:11px;letter-spacing:0}.promo-band-in{gap:7px;padding:0 12px}.promo-state{display:none}.promo-ended .promo-state{display:inline}}

.offer{background:var(--green);color:var(--paper);padding-block:110px}
.offer h2{font-size:clamp(36px,3.9vw,60px)}
.offer .lead{max-width:760px;color:#e6ece8}
.offer-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;margin-top:56px;max-width:960px}
.offer-card{border-top:1px solid #ffffff4d;padding-top:22px}
.offer-num{display:block;font-size:13px;letter-spacing:.12em;color:var(--accent);margin-bottom:14px}
.offer-card h3{font-size:22px;margin-bottom:12px}
.offer-card p{font-size:15px;color:#dfe7e3;margin:0}
.offer .fn a{color:inherit}
.offer-deadline,.offer-after{margin-top:56px;padding:32px;border:1px solid #ffffff40;border-radius:4px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:center}
.offer-reason{grid-column:1/-1;margin:0;font-size:16px;color:#e6ece8;max-width:820px}
.offer-count{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.offer-main{font-size:clamp(24px,2.6vw,36px);font-weight:400;letter-spacing:.02em;font-feature-settings:"palt"}
.offer-days{font-size:16px;color:var(--accent)}.offer-days b{font-size:22px;font-weight:500;margin:0 2px;font-variant-numeric:tabular-nums}
.offer-count small{font-size:13px;color:#dfe7e3}
.offer-after .offer-reason{grid-column:auto}
.fallback-mail{font-size:15px;margin-top:18px}
@media(max-width:1000px){.offer-cards{grid-template-columns:1fr;gap:28px}}
@media(max-width:760px){
  .offer{padding-block:66px}
  .offer h2{font-size:clamp(28px,8.4vw,40px)}
  .offer-cards{margin-top:36px}
  .offer-deadline,.offer-after{grid-template-columns:1fr;padding:22px 18px;margin-top:40px}
  .offer-deadline .button,.offer-after .button{width:100%}
}

/* Consultation dialog (promo C) */
.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.symptom-fields{border:0;padding:0;margin:18px 0 0}
.symptom-fields legend{font-size:14px;margin-bottom:6px;padding:0}
dialog .check-field{display:flex;gap:10px;align-items:flex-start;margin:8px 0 0;font-size:14px;line-height:1.5}
.check-field input{width:18px;height:18px;margin:1px 0 0;flex:none;accent-color:var(--green)}
#brief-form .brief-actions{margin-top:24px;gap:12px}
#brief-form .brief-actions .button{flex:1 1 220px;justify-content:center;gap:14px}
#brief-form .field-note{margin-top:12px}
#brief-text:not(.sr-only){width:100%;margin-top:14px}
@media(max-width:420px){.field-pair{grid-template-columns:1fr}}

/* こんな建物に: the checklist over the building photo */
.building-content .checklist{width:min(100%,560px);margin:0;border-top-color:#ffffff40}
.building-content .checklist li{border-bottom-color:#ffffff33;font-size:17px;padding:13px 0;color:#fff}
.building-content .check-box{stroke:#ffffffcc}
.building-content .check-mark{stroke:var(--accent)}
.building-content>.button{margin-top:30px}
.symptoms-after{padding-block:64px 8px}
.symptoms-after .lead{max-width:820px;margin-bottom:14px}
@media(max-width:760px){
  .building-content .checklist li{font-size:14px;line-height:1.45;padding:9px 0;gap:12px}
  .building-content .check{flex-basis:22px;width:22px;height:22px}
  .building-content>.button{margin-top:18px;width:100%}
  .symptoms-after{padding-block:44px 0}
}
@media(max-width:760px) and (max-height:640px){
  .building-content .checklist li{font-size:13px;padding:7px 0}
  .building-content h2{font-size:24px}
}
/* Short phones (iPhone SE size): the hero text reaches the pipes, so the window is left out there */
@media(max-width:760px) and (max-height:700px){.xray,.xray-lead,.xray-label{display:none}}
/* Phones: the explainer video runs edge to edge so its burned-in captions (70 px of 1920) stay readable (about 14 px at 390 px) */
@media(max-width:760px){.video-frame{margin-inline:calc(-1 * var(--gutter))}.video-frame video{border-radius:0}.video-frame figcaption{padding-inline:var(--gutter)}}
/* 仕組みをもっと: its own section after the sticky mechanism scene (the scene's sticky copy ends with the scene track) */
.mech-more-section{position:relative;z-index:1}
.hero-promo{font-size:14px;line-height:1.6;margin:18px 0 0;color:#e6ece8;letter-spacing:.03em}
.brief-to{font-size:13px;line-height:1.6;margin:10px 0 0;color:var(--muted)}
.brief-to a{color:var(--ink);font-weight:500}
.review-mail{font-size:16px;margin:0 0 22px}
.review-mail a{color:inherit;font-weight:500}
dialog select:invalid{color:var(--muted)}
dialog [aria-invalid="true"]{outline:2px solid #b4552f;outline-offset:1px}
@media(max-width:760px){.hero-promo{font-size:13px;margin-top:14px}}
/* 事例: before = rust brown, filling the card's own scale; after = clear blue-green, a thin line; the drop is the biggest number.
   Every chart has the same plot height (--plot-h, also read by the British Museum line in motion.js) and 28px under the baseline for its labels. */
.case-grid{--plot-h:240px}
.case .case-chart{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:28px}
.case .bars{height:var(--plot-h);gap:0;padding:0 2px;border-bottom:2px solid var(--ink)}
.case .bar::before{height:max(4px,calc(var(--v) * 100%));background:linear-gradient(180deg,#c46a45,#9a4a2c);border-radius:4px 4px 0 0}
.case .bar-after::before{background:#2aa39f;box-shadow:0 0 0 2px #2aa39f40}
.bar-arrow{flex:0 0 auto;align-self:center;font-style:normal;font-size:46px;font-weight:700;line-height:1;color:var(--ink);padding:0 12px;margin-top:-30px}
.case .bar span{font-size:13px;font-weight:500;color:var(--ink)}
.case .bar:not(.bar-after) span{color:#8a3f22}
.case .bar-after span{color:#16807c}
.case-pct b,.case-feature .case-pct b{font-size:76px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.case-pct span{font-size:24px}
.case-line .series{stroke:#2aa39f;stroke-width:5}
.case-line .pt circle{fill:#fff;stroke:#2aa39f;stroke-width:3}
.case-line .pt:first-child circle{fill:#b85e3e;stroke:#8a3f22;r:8}
.case-line .pt:last-child circle{fill:#2aa39f;stroke:#16807c;r:9}
@media(max-width:760px){.case-pct b,.case-feature .case-pct b{font-size:60px}.bar-arrow{font-size:38px}}
/* なぜ黒錆: the two pictures are the table's first row (same columns as 赤錆 and 黒錆) */
.why-table .why-art-row td{background:none;border:0;padding:0 0 10px;vertical-align:bottom}
.why-table .why-art-row .why-art-gap{width:8em}
@media(max-width:760px){.why-table .why-art-row td{padding:0 0 8px}.why-table .why-art-row .why-art-gap{width:0;padding:0}.why-table .why-art-row td:not(.why-art-gap){width:50%}}
/* 仕組みの図: 赤錆 is written on the rust itself (not over the water); the small cross-section is left out on phones */
.mech-labels text.on-steel{fill:#fff;font-weight:500}
.mech-labels text.on-rust{fill:#fff;font-weight:500;paint-order:stroke;stroke:#7a3b25;stroke-width:3px}
@media(max-width:760px){.mech-inset{display:none}}
/* 比べる on phones: 取り替え and NMR first; the other two methods open with a button (all shown without JavaScript) */
.compare-more{display:none}
@media(max-width:760px){
  .js-ready .compare-table:not(.show-all) td.is-other{display:none}
  .js-ready .compare-more{display:block;margin-top:14px;width:100%;min-height:46px;border:1px solid var(--ink);border-radius:3px;background:none;color:var(--ink);font-size:14px;font-weight:500}
}
/* なぜ黒錆: cracks in the red lump */
.rust-cracks path{fill:none;stroke:#6e2f1b;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
/* the columns are set once for the picture row and every row below it */
.why-table .col-head{width:8em}
@media(max-width:760px){.why-table .col-head{width:0}.why-table .col-red,.why-table .col-black{width:50%}}
/* Phone menu (the desktop links are hidden at 760 px and below) */
.menu-toggle{display:none}
.site-menu{position:fixed;left:0;right:0;top:var(--header-h);z-index:45;background:var(--paper);color:var(--ink);border-bottom:1px solid var(--line);box-shadow:0 12px 30px #10262d33;max-height:calc(100svh - var(--header-h));overflow:auto}
.site-menu nav{display:flex;flex-direction:column;padding:8px 20px 20px}
.site-menu nav a:not(.button){display:block;padding:14px 2px;border-bottom:1px solid var(--line);text-decoration:none;font-size:16px}
.site-menu .button{margin-top:16px;justify-content:center;gap:14px}
@media(max-width:760px){
  .menu-toggle{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:40px;margin-left:8px;padding:6px 10px;border:1px solid currentColor;border-radius:3px;background:none;color:inherit;font-size:12px;font-weight:500}
  .menu-toggle i{width:14px;height:10px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;position:relative}
  .menu-toggle i::after{content:'';position:absolute;left:0;right:0;top:2px;border-top:2px solid currentColor}
  .site-header nav{margin-left:auto}
}
@media(max-width:400px){.menu-toggle .menu-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.menu-toggle{padding:6px 9px;margin-left:6px}}
.no-js .menu-toggle{display:none}
/* skip a long pinned part */
.skip-next{display:inline-flex;gap:8px;align-items:center;font-size:13px;font-weight:500;margin:0 0 14px;text-underline-offset:4px;opacity:.85}
.skip-next:hover,.skip-next:focus-visible{opacity:1}
/* dialog: the close button stays at the top while the form scrolls; required and optional marks */
dialog{--dp:32px}
.dialog-head{position:sticky;top:calc(-1 * var(--dp));z-index:2;background:var(--paper);margin:calc(-1 * var(--dp)) calc(-1 * var(--dp)) 16px;padding:calc(var(--dp) - 10px) var(--dp) 10px}
.field-req,.field-opt{display:inline-block;font-size:11px;font-weight:500;line-height:1;padding:3px 5px;border-radius:2px;margin-left:6px;vertical-align:1px}
.field-req{background:#b4552f;color:#fff}
.field-opt{border:1px solid var(--line);color:var(--muted)}
#brief-form .brief-to{margin:22px 0 0;color:var(--ink);font-size:14px}
#brief-form .brief-to + .brief-actions{margin-top:10px}
@media(max-width:760px){dialog{--dp:22px}}
/* こんな症状が: a plain list with check marks (no boxes that look clickable) */
.check-box{display:none}
@media(max-width:360px){.site-header{padding:0 12px;gap:6px}.brand{font-size:14px}.nav-cta{padding:6px 8px}.menu-toggle{margin-left:4px;padding:6px 8px}}
/* the hero grows with its content on short screens (the first line never slides under the fixed header) */
.hero{height:auto;min-height:max(100svh,560px)}
.hero-content{height:auto;min-height:max(100svh,560px)}
/* black rust: a thin glossy film along the wall */
.film{fill:#1c2428;stroke:#0d1214;stroke-width:1.2}
.film-hl{fill:none;stroke:#8fa3ad;stroke-width:1.6;opacity:.7;stroke-linecap:round}
.film-glint{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;opacity:.9}
/* Tengcle logo (official lockup, drawn in currentColor so it reads on the dark hero and on light sections) */
.brand-logo{display:block;height:46px;width:auto;aspect-ratio:1987/637;fill:currentColor}
.brand-sub{font-size:11px;line-height:1.35;letter-spacing:.06em;white-space:nowrap;padding-left:12px;border-left:1px solid currentColor;opacity:.85}
.footer-brand .brand-logo{height:46px;aspect-ratio:1967/637}
@media(max-width:1000px){.brand-sub{display:none}}
@media(max-width:760px){.brand-logo{height:38px}}
@media(max-width:360px){.brand-logo{height:32px}}
/* Footer: company, contact and the page's contents */
.footer-top{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px 48px;align-items:start;padding-bottom:28px;border-bottom:1px solid var(--line);margin-bottom:24px}
.footer-company p{margin:6px 0 0;font-size:14px}
.footer-name{font-weight:500}
.footer-links a,.footer-mail a{color:var(--ink);font-weight:500}
.footer-links .ext{font-size:12px;margin-left:4px}
.footer-nav{display:grid;grid-template-columns:repeat(3,auto);gap:10px 28px;font-size:14px}
.footer-nav a{text-decoration:none;color:var(--ink)}
.footer-nav a:hover{text-decoration:underline}
@media(max-width:760px){.footer-top{grid-template-columns:1fr}.footer-nav{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 自動で見る (motion only; not with reduced motion or without JavaScript) */
.autoplay{position:fixed;right:18px;bottom:18px;z-index:40;min-height:40px;padding:8px 14px;border:1px solid #ffffff59;border-radius:20px;background:#10262de6;color:#fff;font-size:13px;font-weight:500;box-shadow:0 6px 20px #10262d40}
.autoplay[aria-pressed="true"]{background:var(--accent);color:var(--action-ink);border-color:#81613b}
html:not(.motion) .autoplay{display:none}
@media(max-width:760px){.autoplay{right:12px;bottom:12px;font-size:12px;min-height:36px;padding:6px 12px;transition:opacity .3s}.autoplay.is-away:not([aria-pressed="true"]){opacity:0;pointer-events:none}.video-hint{margin:10px 20px 0;font-size:12px;color:var(--muted)}}
/* phones: 「鉄分91〜99%減」 stays one unit on one line (the figure never breaks inside) */
@media(max-width:760px){.cases-hero{gap:4px 8px;margin-bottom:14px}.cases-hero b{font-size:clamp(44px,14vw,60px);white-space:nowrap;flex-shrink:0}.cases-hero span{font-size:22px;flex-shrink:0}.cases-hero small{margin-top:2px}}
/* phones: the documents strip gets a 「資料を見る 1/4」 row with ← →, and each quote folds to three lines behind 「詳しく読む」 */
.press-controls{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:12px}
.press-count{margin:0;font-size:13px;color:var(--muted);min-width:7.5em;text-align:center}
.press-count b{color:var(--ink);font-weight:500}
.press-step{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:#fffdf8;color:var(--ink);font-size:17px;line-height:1}
.press-step:disabled{opacity:.35}
.press-more{margin-top:4px;padding:6px 0;border:0;background:none;color:var(--ink);font-size:13px;font-weight:500;text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){.press-list{margin-top:8px}.press-folds .press-item:not(.is-open) .press-quote{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}}
/* phones: a shorter read. Smaller bar charts in the case cards and tighter section spacing (desktop unchanged) */
@media(max-width:760px){.case-grid{--plot-h:96px;gap:24px}.intro,.symptoms,.why,.compare,.about,.cases,.record,.video-section,.offer,:root .approach{padding-block:48px}.scene{padding-block:48px 36px}.trial-more{padding-bottom:48px}.mech-more{padding-bottom:56px}:root .scene-copy{padding-top:44px}.stats{margin-top:32px;padding-top:22px}.about-grid{margin-top:40px;padding-top:30px}.review-steps{margin-top:24px}.questions{padding-bottom:48px}.review-section{padding-block:48px}footer{padding-block:28px}.offer-deadline{margin-top:28px}.questions summary{padding-block:16px}.notes{line-height:1.55}.why-table td{padding:26px 10px 10px}.case-pct b,.case-feature .case-pct b{font-size:52px}.press{margin-top:22px}.compare-table td{padding-block:6px}.case{padding:16px 16px 12px}.cases-call{margin-top:14px;padding:12px 16px}.trial-flow{margin-top:18px}.why-three{margin-top:28px}.stats{gap:16px}.offer-cards{margin-top:28px}.why-table{margin-top:34px}.symptoms-after{padding-top:32px}.offer-deadline{padding-block:16px}.case-grid{gap:18px}.questions summary{padding-block:14px}.notes{line-height:1.5}}
/* the English page (site/en/): Latin type only, so the Japanese subsets are never downloaded; Latin spacing */
html[lang="en"]{--sans:Plex,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--serif:Georgia,"Times New Roman",Times,serif}
html[lang="en"] body{letter-spacing:0;line-break:auto}
html[lang="en"] .why-art figcaption small{display:block;font-size:.62em;font-weight:400;color:var(--muted);letter-spacing:.02em}
/* English page type (2026-10-10): every heading in IBM Plex Sans 600, no serif second line (it keeps its emphasis by colour),
   tighter tracking and leading for Latin text; calmer body leading; firmer buttons. The Japanese page is untouched. */
html[lang="en"] h1,html[lang="en"] h2{font-weight:600;letter-spacing:-.015em;line-height:1.12;font-feature-settings:normal;word-break:normal}
html[lang="en"] h3,html[lang="en"] h4{font-weight:600;letter-spacing:-.01em;line-height:1.2}
html[lang="en"] h1 em,html[lang="en"] h2 em{font-family:var(--sans);font-weight:600;letter-spacing:inherit;color:#2b6672}
html[lang="en"] [data-tone="dark"] h1 em,html[lang="en"] [data-tone="dark"] h2 em{color:#f3dcb8}
html[lang="en"] h2,html[lang="en"] .scene-copy h2,html[lang="en"] .building-content h2,html[lang="en"] .offer h2,html[lang="en"] .about h2{font-size:clamp(32px,3.3vw,50px)}
html[lang="en"] .hero h1{font-size:clamp(46px,4.9vw,76px);margin-bottom:24px}
html[lang="en"] .record h2{font-size:clamp(30px,3vw,46px)}
html[lang="en"] .questions h2{font-size:32px}
html[lang="en"] .review-grid h2{font-size:clamp(34px,3.8vw,58px)}
html[lang="en"] dialog h2{font-size:28px}
html[lang="en"] .stat-num,html[lang="en"] .case-pct b,html[lang="en"] .cases-hero b{font-weight:600;letter-spacing:-.02em}
html[lang="en"] .cases-hero b{font-size:clamp(64px,7.4vw,116px)}
html[lang="en"] body{line-height:1.65}
html[lang="en"] .lead{line-height:1.55;letter-spacing:0}
html[lang="en"] .hero-deck{line-height:1.6;margin-bottom:16px}
html[lang="en"] .button,html[lang="en"] .nav-cta{font-weight:600}
html[lang="en"] .eyebrow{font-weight:600;letter-spacing:.06em;font-size:12.5px}
html[lang] .hero-points{list-style:none;display:flex;flex-wrap:wrap;gap:6px 22px;margin:0 0 28px;padding:0;font-size:15px;font-weight:500;color:#fff}
html[lang] .hero-points li{display:flex;align-items:center;gap:8px;white-space:nowrap}
html[lang] .hero-points li::before{content:"";width:9px;height:5px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:translateY(-2px) rotate(-45deg);flex:none}
html[lang] .building-for{margin:-8px 0 22px;font-size:17px;line-height:1.5;color:#ffffffd9;max-width:36em}
@media(max-width:760px){
  html[lang="en"] .hero h1{font-size:clamp(30px,8.8vw,40px);margin-bottom:16px}
  html[lang="en"] h2,html[lang="en"] .scene-copy h2,html[lang="en"] .building-content h2,html[lang="en"] .offer h2,html[lang="en"] .about h2{font-size:clamp(26px,7.6vw,34px)}
  html[lang="en"] .questions h2{font-size:clamp(26px,7.6vw,32px)}
  html[lang="en"] .review-grid h2{font-size:clamp(28px,8.2vw,36px)}
  html[lang="en"] .hero-deck{font-size:16px;line-height:1.55;margin-bottom:12px}
  html[lang] .hero-points{font-size:14px;gap:4px 16px;margin-bottom:20px}
  html[lang] .building-for{font-size:15px;margin:-4px 0 14px}
}
/* the purchase term printed next to every free-trial button (English page) */
html[lang] .cta-terms{margin:12px 0 0;max-width:34em;font-size:13.5px;line-height:1.5;color:#ffffffd9}
html[lang] .review-commit{margin:18px 0 0;padding:12px 16px;border-left:3px solid var(--accent);background:#ffffff12;font-size:15px;line-height:1.55}
html[lang] .press-note{margin:6px 0 0;font-size:14px;color:var(--muted)}
html[lang] .dialog-photos{margin:10px 0 0;font-size:14px;line-height:1.55}
#brief-form #brief-status:empty{display:none}
#brief-form #brief-status{margin:10px 0 0;font-size:14px;line-height:1.55}
/* narrow phones (360 and below 390): keep the hero text clear of the pipe window; the promo line repeats the band just below */
@media(max-width:380px){html[lang="en"] .hero-promo{display:none}html[lang="en"] .hero .cta-terms{font-size:12.5px;margin-top:10px}}
/* the Japanese page: the same, only where the pipe window is shown (taller than 700px), so short phones keep the line */
@media(max-width:380px) and (min-height:701px){html[lang="ja"] .hero-promo{display:none}html[lang="ja"] .hero .cta-terms{font-size:12.5px;margin-top:10px}}
/* Japanese page: the strengths follow the hero text closely, as on the English page */
html[lang="ja"] .hero-deck{margin-bottom:16px}
@media(max-width:760px){html[lang="ja"] .hero-deck{margin-bottom:12px}}
/* the purchase term on the video-end screen (Japanese page) */
html[lang] .video-end .cta-terms{flex-basis:100%;margin:0;max-width:none;text-align:center}
@media(max-width:760px){html[lang] .video-end .cta-terms{font-size:12px;line-height:1.45}}
@media(max-width:380px){.video-end{padding:10px;gap:8px}.video-end .button,.video-end .button-primary{min-height:38px;padding:8px 12px;font-size:12px;gap:10px;white-space:nowrap}html[lang] .video-end .cta-terms{font-size:11px;line-height:1.4}}
/* the two articles: cited with a link to the publisher's page (the reprints are not shown) */
.press-cites{margin-top:26px;padding-top:16px;border-top:1px solid var(--line)}
.press-cites ul{list-style:none;padding:0;margin:4px 0 0;display:grid;gap:8px}
.press-cites li{max-width:60em;font-size:14px;line-height:1.7}
.press-cites li a{margin-left:.4em;color:inherit;white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
.press-cites .ext{margin-left:3px;font-size:12px}
html[lang] .press-disclaimer{max-width:60em;font-size:13px}
/* the English page keeps the scope and no-endorsement notes under the documents, as small print */
html[lang] .press-cites~.press-note{max-width:60em;font-size:13px}html[lang] .press-cites+.press-note{margin-top:14px}
@media(max-width:760px){html[lang="ja"] .doc-viewer-nav{gap:6px;padding:8px}html[lang="ja"] .doc-viewer-nav .button{font-size:13px;padding:6px 8px;white-space:nowrap}html[lang="ja"] .doc-nav small{font-size:10px}}
.doc-lang[aria-pressed="true"]{background:var(--accent);color:var(--action-ink)}
@media(max-width:760px){html[lang="ja"] .doc-viewer-nav .button span{font-size:13px}}
/* English phones: the same compact nav, so 「Fit to screen」 stays on one line and the nav keeps its height when the zoom changes */
@media(max-width:760px){html[lang="en"] .doc-viewer-nav{gap:6px;padding:8px}html[lang="en"] .doc-viewer-nav .button{font-size:13px;padding:6px 8px}html[lang="en"] .doc-viewer-nav .button span{font-size:14px}html[lang="en"] .doc-viewer-nav [data-doc-zoom]{white-space:nowrap;flex:none}}
/* narrow phones: 「和文を見る」 and 拡大 on the first row, the previous/next documents on the second */
@media(max-width:380px){html[lang="ja"] .doc-viewer-nav{flex-wrap:wrap}html[lang="ja"] .doc-viewer-nav .button{flex:1 1 40%}html[lang="ja"] .doc-viewer-nav .doc-lang,html[lang="ja"] .doc-viewer-nav [data-doc-zoom]{order:-1;justify-content:center}}
/* a letter card's second, smaller link: the case report that goes with it */
.doc-sublink{display:inline-block;margin-top:6px;font-size:13px;line-height:1.5;color:inherit;text-decoration:underline;text-underline-offset:3px}
.doc-sublink::before{content:"";display:inline-block;width:9px;height:11px;margin-right:6px;border:1px solid currentColor;border-radius:1px;vertical-align:-1px;box-shadow:2px 2px 0 -1px #fff,2px 2px 0 0 currentColor}
@media(max-width:760px){.doc-sublink{margin-top:4px;font-size:12.5px}}
/* installation: the supported main sizes in US units, and the size-to-model table (folded) */
.size-badge{display:inline-block;margin:14px 0 0;padding:5px 12px;border:1px solid var(--green);border-radius:999px;font-size:14px;font-weight:500;line-height:1.4;color:var(--green);background:#ffffff8c}
.size-table{margin:14px 0 0;max-width:440px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.size-table summary{padding:10px 0;font-size:14px;gap:12px}
.size-tables{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:2px 0 6px;align-items:start}
.size-tables table{width:100%;border-collapse:collapse;font-size:13px;line-height:1.4}
.size-tables th{text-align:left;font-weight:500;color:var(--muted);padding:4px 6px;border-bottom:1px solid var(--line)}
.size-tables td{padding:4px 6px;border-bottom:1px solid #0000000f;font-variant-numeric:tabular-nums;white-space:nowrap}
.size-table .size-note{margin:0;padding:0 0 10px;font-size:13px}
@media(max-width:760px){.size-badge{margin-top:10px;padding:4px 10px;font-size:13px}.size-table{margin-top:8px}.size-table summary{padding:8px 0;font-size:13px}.size-tables{gap:12px}.size-tables table{font-size:12.5px}}
/* desktop: the copy column is pinned to one screen. An open table takes the place of the step list (the stage shows the steps too);
   on short screens (780px and lower) the column scrolls inside itself while the table is open */
@media(min-width:761px){.motion .size-table[open] ~ .steps{display:none}}
@media(min-width:761px) and (max-height:780px){.motion .scene-copy:has(.size-table[open]){align-items:flex-start}.motion .scene-copy:has(.size-table[open]) .scene-copy-in{max-height:calc(100svh - var(--top-h) - 16px);overflow-y:auto;overscroll-behavior:contain;padding-right:8px}}
/* privacy note: the links beside the inquiry address and in the footer */
.footer-links a + a{margin-left:22px}
.privacy-link{margin:8px 0 0;font-size:14px}
#brief-form .brief-to{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:16px;row-gap:2px}
#brief-form .brief-privacy{font-size:13px;color:var(--muted);white-space:nowrap}
/* the privacy note pages (site/privacy/, site/en/privacy/): a plain document, no motion and no scripts */
.privacy-page .wrap{max-width:736px}
.privacy-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.privacy-head .brand-logo{height:40px}
.privacy-back{font-size:14px;text-underline-offset:4px}
.privacy-page .privacy{padding:44px 0 56px}
.privacy-page .privacy h1{font-size:clamp(30px,4.2vw,44px);margin-bottom:6px}
.privacy-page .privacy h2{font-size:19px;line-height:1.45;font-weight:500;letter-spacing:.02em;margin:30px 0 6px}
.privacy-page .privacy p,.privacy-page .privacy address{font-size:16px;line-height:1.8;margin-bottom:0;font-style:normal}
.privacy-page .privacy p+p,.privacy-page .privacy ul+p,.privacy-page .privacy p+address{margin-top:10px}
.privacy-page .privacy h3{font-size:16px;line-height:1.5;font-weight:500;margin:22px 0 4px}
.privacy-page .privacy ul{margin:8px 0 0;padding-left:1.3em;font-size:16px;line-height:1.8}
.privacy-page .privacy li+li{margin-top:4px}
.privacy-page .privacy a{overflow-wrap:anywhere}   /* a written-out URL (Cloudflare's privacy policy) breaks instead of pushing the page wider at 320 px */
.privacy-page .privacy-date{color:var(--muted);font-size:14px!important;margin-bottom:26px!important}
footer.privacy-foot{display:block;padding:22px 0 40px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.privacy-foot p{margin:0}
@media(max-width:760px){.privacy-head .brand-logo{height:32px}.privacy-back{font-size:13px}.privacy-page .privacy{padding:32px 0 44px}}
/* the guide pages (site/en/guide/*): a reading page, one column, no motion and no scripts */
.guide-page .guide-head,.guide-page .guide{max-width:760px}
.guide-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.guide-head .brand-logo{height:40px}
.guide-head .privacy-back{font-size:14px;text-underline-offset:4px}
.guide{padding:48px 0 64px}
.guide h1{font-size:clamp(30px,4.2vw,44px);line-height:1.28;margin-bottom:22px;word-break:normal}
.guide h2{font-size:clamp(22px,2.4vw,27px);line-height:1.4;font-weight:500;letter-spacing:.01em;margin:44px 0 12px;word-break:normal}
.guide p,.guide li{font-size:17px;line-height:1.85;letter-spacing:.01em}
.guide p{margin-bottom:0}
.guide p+p,.guide ul+p,.guide ol+p,.guide table+p,.guide p+table{margin-top:14px}
.guide .guide-lead{font-size:20px;line-height:1.7;margin-bottom:0}
.guide ul,.guide ol{margin:12px 0 0;padding-left:1.4em}
.guide li+li{margin-top:8px}
.guide .guide-table{width:100%;border-collapse:collapse;margin-top:16px;font-size:15px;line-height:1.65}
.guide .guide-table th,.guide .guide-table td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;border:0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.65;font-weight:400}
.guide .guide-table thead th{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:.04em;border-bottom:1px solid var(--ink)}
.guide .guide-table tbody th{font-weight:500}
.guide .guide-table tbody tr:last-child td,.guide .guide-table tbody tr:last-child th{border-bottom:1px solid var(--ink)}
.guide .guide-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.guide .guide-actions .button{flex:1 1 260px}
/* under the buttons: where to write when the mail button opens nothing (no mail app set up). The address is plain text, not a
   mailto link (that would fail the same way); one tap or click selects all of it for copying */
.guide .guide-mail-note{margin-top:12px;font-size:14px;line-height:1.65;letter-spacing:.01em;color:var(--muted)}
.guide .guide-mail-note .mail-copy{color:var(--ink);font-weight:500;-webkit-user-select:all;user-select:all;overflow-wrap:anywhere}
.guide sup.fn{font-size:.62em}
/* illustrations: the column's full width, a quiet caption in the notes' grey; the page stays text-led */
.guide .guide-fig{margin:28px 0 0}
.guide .guide-fig img{width:100%;height:auto;border-radius:3px;background:var(--green)}
.guide .guide-fig figcaption{margin-top:10px;font-size:14px;line-height:1.65;letter-spacing:.01em;color:var(--muted)}
.guide .guide-fig+p{margin-top:24px}
.notes li a{overflow-wrap:anywhere}
@media(max-width:600px){
  .guide{padding:32px 0 44px}
  .guide-head .brand-logo{height:32px}.guide-head .privacy-back{font-size:13px}
  .guide .guide-lead{font-size:18px}
  .guide .guide-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .guide .guide-table,.guide .guide-table tbody,.guide .guide-table tr,.guide .guide-table th,.guide .guide-table td{display:block;width:auto}
  .guide .guide-table tr{padding:10px 0 6px;border-top:1px solid var(--line)}
  .guide .guide-table tbody tr:first-child{border-top:1px solid var(--ink)}
  .guide .guide-table tbody tr:last-child{border-bottom:1px solid var(--ink)}
  .guide .guide-table th,.guide .guide-table td,.guide .guide-table tbody tr:last-child td,.guide .guide-table tbody tr:last-child th{border-bottom:0;padding:4px 0}
  .guide .guide-table td::before,.guide .guide-table th[scope="row"]::before{content:attr(data-label);display:block;font-size:12px;color:var(--muted);line-height:1.5}
  .guide .guide-table th[scope="row"]{font-size:16px}
}
.guide-page footer.wrap{max-width:760px;grid-template-columns:1fr}
.guide-page footer .credits{grid-column:auto;order:-1;padding-bottom:20px;border-bottom:1px solid var(--line)}
.guide-page .notes{font-size:13px;line-height:1.75}
/* cases: the U.S. results first, as their own group (a heading, the two DC cards as h4 under it, a line on how they were measured);
   the other cases follow, three across on wide screens. In that grid each card's rows (text, chart, document) line up across the
   row, so the bars and the British Museum line keep one baseline when a card has no document under it */
.cases-group{margin:40px 0 0;font-size:24px}
.cases-group+.case-grid{margin-top:18px}
.cases-group-note{font-size:15px;color:var(--muted);max-width:760px;margin:16px 0 0}
@supports(grid-template-rows:subgrid){@media(min-width:761px){.case-grid-more .case{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}}}
@media(min-width:1100px){.case-grid-more{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* the stats: whose record the numbers are, above them */
.stats-lead{font-size:17px;font-weight:500;margin:0;color:#e6ece8}
.stats-lead+.stats{margin-top:20px}
/* the trial: how it is judged (the FAQ answer's sentences, as a list); the English page folds it like "For engineers" */
.trial-judged{max-width:820px;margin:34px 0 30px}
.trial-judged h3{font-size:20px;margin:0 0 10px}
.trial-judged ul{margin:0;padding-left:1.2em;font-size:15px;line-height:1.7}
.trial-judged li+li{margin-top:6px}
details.trial-judged{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
details.trial-judged summary{font-size:18px}
details.trial-judged ul{padding-bottom:22px}
@media(max-width:760px){.cases-group{margin-top:32px;font-size:20px}.cases-group-note{font-size:14px}.trial-judged{margin:26px 0 24px}.trial-judged h3{font-size:18px}details.trial-judged summary{font-size:16px}}
/* English page, 8-section frame (2026-10-16). 1: the symptoms as a short list right under the hero, with who Round 1 is for;
   2: one short comparison table under the installation; 3: documents and press folded under the cases; 4: the terms, the timing and
   how the trial is judged in one dark section; 5: the diagram's heading sits under 「Red rust vs. black rust」; 7: the questions that
   decide first, the rest folded. All selectors are classes only the English page uses (or scoped to it). */
.symptoms-short{padding-block:72px 64px}
.symptoms-short-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px 72px;align-items:start}
.symptoms-short h2{margin-bottom:18px}
.symptoms-for{font-size:18px;line-height:1.55;margin:0 0 16px;max-width:30em}
.scope-chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.scope-chips li{padding:6px 12px;border:1px solid var(--green);border-radius:999px;font-size:14px;font-weight:500;line-height:1.35;color:var(--green);background:#ffffff8c}
.symptoms-short .scope-line{margin:12px 0 0}
.symptoms-short .checklist{margin:0}
.symptoms-short .checklist li{font-size:17px;padding:13px 0}
.compare-short{padding-block:64px 80px}
.compare-title{font-size:26px;margin:0 0 10px}
.compare-short .compare-close{margin:0;font-size:18px}
.compare-short .compare-table{margin-top:28px}
.compare-note{margin:14px 0 0;font-size:13px;line-height:1.55;color:var(--muted);max-width:60em}
.press-fold{margin-top:36px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.press-fold>summary{font-size:18px}
.press-fold .press{margin-top:0;padding-bottom:24px}
html[lang] .cases-disclaimer{margin-top:14px}
html[lang] .offer-cards-3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}
.offer .trial-flow{margin:44px 0 0}
.offer .trial-flow li{background:transparent;border-color:#ffffff40;color:#fff}
.offer .trial-flow li::before,.offer .trial-flow li small{color:#dfe7e3}
.offer details.trial-judged{border-color:#ffffff40;margin:28px 0 0;max-width:none}
.offer details.trial-judged summary{color:#fff}
.offer details.trial-judged ul{color:#e6ece8;max-width:820px}
.offer .offer-deadline{margin-top:44px}
html[lang="en"] .scene-copy h3.scene-title{font-size:clamp(28px,2.6vw,40px);line-height:1.15;margin-bottom:20px}
.about-roles{margin:18px 0 0;font-size:15px;line-height:1.6;color:#dfe7e3;max-width:40em}
.faq-more{margin-top:32px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.faq-more>summary{font-size:16px}
.faq-more .faq-list details:last-child{border-bottom:0}
.review-section .review-roles{font-size:15px;line-height:1.6;margin:0 0 22px}
.dialog-points{list-style:none;margin:6px 0 0;padding:0;font-size:14.5px;line-height:1.5}
.dialog-points li{position:relative;padding:7px 0 7px 22px;border-top:1px solid var(--line)}
.dialog-points li:last-child{border-bottom:1px solid var(--line)}
.dialog-points li::before{content:"";position:absolute;left:2px;top:.95em;width:9px;height:5px;border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)}
.brief-more{margin-top:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.brief-more>summary{padding:12px 0;font-size:15px}
.brief-more>div{padding-bottom:16px}
.brief-more>div>label:first-child,.brief-more>div>.field-pair:first-child label{margin-top:0}
@media(max-width:1000px){html[lang] .offer-cards-3{grid-template-columns:1fr}}
@media(max-width:760px){
  .symptoms-short{padding-block:44px 40px}
  .symptoms-short-grid{grid-template-columns:1fr;gap:20px}
  .symptoms-for{font-size:16px}
  .scope-chips li{font-size:13px;padding:5px 10px}
  .symptoms-short .checklist li{font-size:15px;padding:10px 0;gap:12px}
  .symptoms-short .check{flex-basis:22px;width:22px;height:22px}
  .compare-short{padding-block:40px 48px}
  .compare-title{font-size:21px}
  .compare-short .compare-close{font-size:16px}
  .press-fold{margin-top:24px}
  .press-fold>summary{font-size:16px}
  .offer .trial-flow{margin-top:28px}
  .offer .offer-deadline{margin-top:28px}
  html[lang="en"] .scene-copy h3.scene-title{font-size:clamp(24px,7vw,30px)}
  .faq-more{margin-top:24px}
}
.scope-chips .scope-key{background:var(--green);color:var(--paper)}
.offer-scope{margin:26px 0 0;font-size:15px;line-height:1.6;color:#e6ece8;max-width:820px}
.case-note{margin:-2px 0 6px;font-size:13px;line-height:1.45;color:var(--muted)}
/* results: the fit check, and under it a small "Email me the results" for visitors without photos yet (English page) */
.cases-next{margin-top:28px;max-width:760px}
.results-mail{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);max-width:620px}
.results-mail-label{display:block;font-size:15px;line-height:1.55;margin-bottom:10px}
.results-mail-row{display:flex;flex-wrap:wrap;gap:10px}
.results-mail-row input{flex:1 1 240px;min-width:0;min-height:46px;background:#fffefa;border:1px solid #738991;border-radius:2px;color:var(--ink);padding:10px 12px;font-size:15px}
.results-mail-row input::placeholder{color:#526168;opacity:1}
.results-mail-row input[aria-invalid="true"]{border-color:#a3412f;box-shadow:inset 0 0 0 1px #a3412f}
.results-mail-row .button{flex:0 0 auto;min-height:46px;padding:10px 18px;gap:12px;font-size:14px;background:transparent;color:var(--green);border-color:var(--green)}
.results-mail-row .button:hover{background:#18343b14}
.results-mail-row .button:disabled{opacity:.6}
.results-mail-status{margin:8px 0 0;font-size:15px;line-height:1.55}
.results-mail-status:empty{margin:0}
.results-mail.is-sent .results-mail-status{font-weight:500}
.results-mail-note{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.results-mail-hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.results-mail-nojs{margin:20px 0 0;font-size:15px;line-height:1.6;max-width:620px}
@media(max-width:760px){
  .cases-next{margin-top:22px}
  .cases-next>.button{width:100%;justify-content:center;gap:14px}
  .results-mail-label{font-size:14px}
  .results-mail-row input,.results-mail-row .button{flex:1 1 100%}
  .results-mail-row .button{justify-content:center}
}