/* The English pages after the rebuild (2026-10-17): the landing page (en/index.html), the results page (en/proof/) and
   the technical page (en/details/). Only these three pages load this file; the Japanese page, the guide and the privacy
   notes do not. Loaded after the shared design.css and palette.css (unchanged).

   Look: direction C, "the engineering figure" (the owner's choice, 2026-10-22 01:53; work/design-direction-1022/向き-v2).
   A paper ground, ink type and hairline rules, the device drawn in lines. Headings and the large numbers in Archivo (wide,
   weight 700); body, small numbers and buttons in IBM Plex Sans. Colour is kept for meaning only: the rust in the pictures and the "before" bars,
   blue-green for "after", and the yellow main button. Sections are separated by an ink rule across the column, not by
   tinted bands; the last section is set in ink.

   Only five things can be pressed, and each has one look (unchanged from the stage 4 specimen, 2026-10-17):
     main button   yellow fill, dark text, thin brown edge, no arrow. One wording: "Check if it fits my pipes".
     side button   outline only (2px green), no fill. At most one per section.
     text link     underlined. Underlines are used for links and nothing else.
     open row      the whole row is pressable, + on the right; open = the row turns dark green and the + becomes -.
     note mark     small raised * with its number (*1); always underlined, body-text colour.
   Everything else (information, steps, results) has no fill, no outline, no rounded box and no hover.

   Motion (stage 5): nothing moves on its own except the installation scene, once (lp.js). Short answers to a press:
   the header button fades in and out (0.2 s), an open row opens and closes (0.2 s), the dialog fades (0.2 s), a button
   changes colour (0.15 s), the mechanism picture changes (0.2 s). With "reduce motion" all of them happen at once.
   No smooth scrolling, no sticky scenes, no counting up, no blur. */

/* Archivo, the variable Roman from google/fonts (axes wdth and wght), instanced to wdth 100-112 and wght 400-800 and
   subset to the characters of the English pages by tools/fonts/build_archivo.py (OFL, no Reserved Font Name). Headings
   and the large numbers only; everything else stays in Plex. Wide (112%) and bold (700) from 761 px up; on the phone
   the width goes back to 100% so the headings keep their lines (owner, 2026-10-25: the third type option). */
@font-face{font-family:"Archivo";src:url('../vendor/archivo-variable.woff2') format('woff2');font-weight:400 800;font-stretch:100% 112%;font-style:normal;font-display:swap}

:root{
  --accent-hover:#f5cc93;  /* palette.css .button-primary:hover */
  --accent-edge:#81613b;   /* palette.css .button-primary border */
  --green-hover:#25535f;   /* palette.css .button-dark:hover */
  --field:#fffefa;         /* design.css input background */
  --field-edge:#738991;    /* palette.css / design.css input border */
  --focus:#76511f;         /* palette.css focus ring */
  --press-min:44px;
  --bar-h:72px;
  interpolate-size:allow-keywords;
}
/* direction C: the page's own ground, ink and rules (these pages only) */
body.lp2{
  --paper:#f3f0e8; --ink:#142026; --muted:#46555b; --rule:#142026; --line:#c9c4b8; --hair:#d9d4c8;
  --before:#b4532f; --after:#16807c; --on-dark:#d8dedd; --drawn:#4f6064;
  --head:"Archivo",Plex,Arial,sans-serif; --head-wide:112%;
  background:var(--paper);color:var(--ink);font-size:16px;line-height:1.65;letter-spacing:.005em;font-variant-numeric:tabular-nums}
html{scroll-padding-top:calc(var(--bar-h) + 16px)}
.lp2 main{display:block}

/* ---------- type: headings and large numbers in Archivo, everything else in Plex ---------- */
.lp2 h1.h1,.lp2 h2.h2,.lp2 dialog.fit h2,.lp2 h2.case-group{font-family:var(--head);font-weight:700;font-stretch:var(--head-wide);word-break:normal;overflow-wrap:normal}
.lp2 h1.h1{margin:10px 0 0;font-size:min(102px,9.1vw);line-height:1.1;letter-spacing:-.02em}   /* just above 1100 px the wide face shrinks a little, so "without repiping." stays on one line */
.lp2 h2.h2{margin:0 0 20px;font-size:54px;line-height:1.06;letter-spacing:-.015em;max-width:22em}
.lp2 h3.h3{margin:40px 0 12px;font-size:20px;font-weight:600;line-height:1.3;letter-spacing:0;word-break:normal}
.lp2 .ask{margin:0 0 14px;font-size:15px;font-weight:600;line-height:1.5;color:var(--ink);letter-spacing:.01em}
/* Headings: even out a last line of one word. The first screen's headline, and the other headlines
   that set their lines with <br>, stay on those authored lines (balance would reflow them). */
.lp2 h1,.lp2 h2,.lp2 h3,.lp2 h4,.lp2 summary{text-wrap:balance}
.lp2 #hero-title,.lp2 #cases-title,.lp2 #offer-title,.lp2 #why-title,.lp2 #review-title{text-wrap:wrap}

/* ---------- focus ring (the live one: white inside, brown outside) ---------- */
.lp2 a:focus-visible,.lp2 button:focus-visible,.lp2 summary:focus-visible,.lp2 input:focus-visible,.lp2 select:focus-visible,.lp2 textarea:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 7px var(--focus)}
.faq summary:focus-visible{position:relative;z-index:1}

/* ---------- 1. Main button ---------- */
.lp2 .button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:14px 28px;border:1px solid transparent;border-radius:2px;
  font:600 16px/1.3 var(--sans);letter-spacing:0;text-align:center;text-decoration:none;cursor:pointer;transition:background-color .15s ease}
.lp2 .button-primary{background:var(--accent);color:var(--action-ink);border-color:var(--accent-edge)}
.lp2 .button-primary:hover{background:var(--accent-hover)}

/* ---------- 2. Side button (outline only) ---------- */
.lp2 .button-secondary{min-height:46px;padding:10px 20px;font-size:15px;background:transparent;color:var(--green);border:2px solid var(--green)}
.lp2 .button-secondary:hover{background:#18343b14}
.lp2 .button-secondary:disabled{cursor:default;opacity:1}

/* ---------- 3. Text link (underline = link) ---------- */
.tlink{display:inline-flex;align-items:center;min-height:var(--press-min);color:inherit;font-weight:500;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.tlink:hover{text-decoration-thickness:2px}
.tlink.in-text{display:inline-block;min-height:0;padding:13px 2px;margin:-13px -2px}
/* a button that reads as a text link (the dialog's "Copy the details") */
button.tlink{border:0;background:none;padding:0;font:inherit;font-weight:500;cursor:pointer;color:inherit;text-align:left}
/* links inside running text (answers, notes, documents) */
.lp2 .prose a:not(.button):not(.tlink),.lp2 .notes a,.lp2 .footer-main a,.lp2 .footer-line a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* ---------- 4. Open row (the FAQ form) ---------- */
.faq{max-width:820px;margin:0;border-bottom:1px solid var(--rule)}
.faq details{border-top:1px solid var(--rule)}
.faq details+details{border-top-color:var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:58px;padding:14px 16px;
  font-size:17px;font-weight:500;line-height:1.4;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary>.sign{flex:none;width:24px;text-align:center;font-size:28px;font-weight:400;line-height:1;color:var(--green)}
.faq summary>.sign::before{content:"+"}
.faq details[open]>summary>.sign::before{content:"\2212"}
.faq summary:hover{background:var(--mist)}
.faq details[open]>summary{background:var(--green);color:#f7f4ee}
.faq details[open]>summary>.sign{color:#f7f4ee}
.faq details[open]>summary:hover{background:var(--green-hover)}
.faq .answer{background:var(--mist);padding:16px 16px 20px}
.faq .answer p{margin:0 0 10px;max-width:640px;font-size:16px;line-height:1.6;color:var(--ink)}
.faq .answer p:last-child{margin-bottom:0}
.faq details::details-content{block-size:0;overflow-y:clip;transition:block-size .2s ease,content-visibility .2s allow-discrete}
.faq details[open]::details-content{block-size:auto}

/* ---------- 5. Note mark: *1, always underlined; the tap area is 44 x 44 around it, the text does not move ---------- */
sup.note-mark{font-size:.72em;font-weight:600;line-height:0;vertical-align:super;margin-left:.08em;letter-spacing:0}
sup.note-mark a{display:inline-block;min-width:var(--press-min);padding:16px 0;margin:-16px -15px;line-height:12px;text-align:center;color:var(--green);
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:2px}   /* a link colour and a firmer line: readers did not see the mark as a link (10/17) */
.on-dark sup.note-mark a{color:#f7f4ee}
sup.note-mark a:hover{text-decoration-thickness:2px}

/* ---------- 6. Information: plain text ---------- */
.info{max-width:40em;margin:0 0 10px}
.kicker{margin:0;padding-top:12px;border-top:1px solid var(--rule);font-size:15px;font-weight:500;line-height:1.55;color:var(--ink);letter-spacing:.01em}
.lead-short{margin:0;font-size:18px;line-height:1.5;max-width:30em}
.howto{margin:12px 0 0;max-width:34em;font-size:15px;line-height:1.55;color:var(--muted)}
.terms{margin:12px 0 0;max-width:36em;font-size:14px;line-height:1.55;color:var(--muted)}
.terms-first{font-size:15px;color:var(--ink)}
.checks{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 32px}
.checks li{position:relative;padding-left:22px;font-size:17px;line-height:1.5}
.checks li::before{content:"";position:absolute;left:0;top:.78em;width:11px;height:1px;background:var(--ink)}   /* a drawn dash: not a box to tick (reader test, 10/17) */
.scope{margin:32px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:15px;line-height:1.55;color:var(--muted);max-width:40em}
/* Body only: paragraphs, lists, figure notes, quotes, table cells. Not headings.
   design.css already sets this on p and li; here it also covers captions and cells. Unknown browsers ignore it. */
.lp2 p,.lp2 li,.lp2 figcaption,.lp2 th,.lp2 td,.lp2 blockquote{text-wrap:pretty}

/* ---------- 7. Steps: a measured line with a tick and a number for each step, not pressable ---------- */
.steps-line{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 20px;counter-reset:step;border-top:1px solid var(--rule)}
.steps-line li{position:relative;padding-top:34px;font-size:15px;line-height:1.45;counter-increment:step}
.steps-line li::before{content:"";position:absolute;left:0;top:-7px;width:1px;height:13px;background:var(--rule)}
.steps-line li::after{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:10px;font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.04em}
.deadline{margin:32px 0 4px;font-weight:600}
.deadline-why{margin:0 0 18px;font-size:15px;color:var(--muted);max-width:40em}
.promises{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 48px;max-width:980px;margin:12px 0 0}
.promise{border-top:1px solid var(--rule);padding-top:16px}
.lp2 h3.promise-h{margin:0 0 8px;font-size:20px;font-weight:600;line-height:1.3;letter-spacing:0}
.promise p{margin:0 0 6px;font-size:16px;line-height:1.55}

/* ---------- 8. Result card: name, the percentage, then two drawn columns, before and after, on one base line ----------
   The "before" column is full height and the "after" column its share of it, in each card (each card reads on its own:
   "did it work here"); the values sit above the columns, so the drop is seen before it is read. */
.results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;margin:44px 0 0}
.result{border-top:1px solid var(--rule);padding-top:18px;min-width:0;display:flex;flex-direction:column}
.result p{margin:0}
.lp2 h3.result-name{margin:0 0 14px;min-height:48px;font-size:18px;font-weight:600;line-height:24px;letter-spacing:0}
.result-big{display:flex;align-items:baseline;gap:10px;line-height:1}
.result-big b{font-family:var(--head);font-size:60px;font-weight:700;font-stretch:var(--head-wide);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.result-big span{font-size:20px;font-weight:400}
.result-unit{margin-top:12px!important;font-size:15px;color:var(--ink)}
.rbars{--plot:176px;position:relative;width:max-content;margin:16px 0 0;display:grid;grid-template-columns:repeat(2,112px);gap:0 28px}
.rbars::before{content:"";position:absolute;left:0;right:0;top:calc(var(--plot) + 30px);height:1px;background:var(--rule)}   /* the base line under both columns */
.rbar-row{display:flex;flex-direction:column-reverse;min-width:0}
.rbar-row>span:first-child{margin-top:7px;font-size:14px;line-height:20px;color:var(--muted)}   /* Before / After, under the base line */
.rbar-track{display:flex;flex-direction:column-reverse;align-items:stretch;height:calc(var(--plot) + 30px)}
.rbar{display:block;width:100%;height:max(3px,calc(var(--plot) * var(--f,1)))}
.rbar-before{background:var(--before)}
.rbar-after{background:var(--after)}
.rbar-value{margin-bottom:6px;font-size:18px;font-weight:500;line-height:24px;font-variant-numeric:tabular-nums;white-space:nowrap}
/* each card's "after" column, as a share of its "before" (no inline styles: the page's CSP allows none) */
.f-dc-building .rbar-after{--f:.0161}
.f-dc-residence .rbar-after{--f:.087}
.f-holiday-inn .rbar-after{--f:.0105}
.f-british-museum .rbar-after{--f:.01}
.f-rbs .rbar-after{--f:.0273}
.result-period{margin-top:10px!important;font-size:14px;color:var(--ink)}
.lp2 h3.result-name a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;padding:10px 0;margin:-10px 0}
.lp2 h3.result-name a:hover{text-decoration-thickness:2px}
.result-meta{margin-top:6px!important;font-size:14px;line-height:1.5}
.result-note{margin-top:6px!important;font-size:14px;line-height:1.5;color:var(--muted)}
.result>.tlink{align-self:flex-start;margin-top:6px}

/* ---------- 9. Header bar: logo, links into the page, the main button (hidden while a main button in the page is in view) ---------- */
.topbar{position:sticky;top:0;z-index:30;height:var(--bar-h);background:var(--paper);color:var(--ink);border-bottom:1px solid var(--rule)}
.topbar-in{height:100%;display:flex;align-items:center;gap:28px;padding:0 var(--gutter)}
.topbar-logo{display:inline-flex;align-items:center;min-height:var(--press-min);margin-right:auto;color:var(--ink);text-decoration:none}
.topbar-logo .brand-logo{display:block;height:42px;width:auto;aspect-ratio:1987/637;fill:currentColor}
.topbar-nav{display:flex;align-items:center;gap:4px 24px}
.topbar-nav a{display:inline-flex;align-items:center;min-height:var(--press-min);min-width:var(--press-min);font-size:15px;font-weight:500;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;white-space:nowrap}
.topbar-nav a:hover{text-decoration-thickness:2px}
.lp2 .topbar-cta{min-height:var(--press-min);padding:9px 18px;font-size:14px;white-space:nowrap;
  transition:opacity .2s ease,transform .2s ease,visibility 0s linear 0s,background-color .15s ease}
.js .topbar-cta:not(.is-shown){opacity:0;transform:translateY(-6px);visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}

/* ---------- 10. Results and Details pages: "Back to the main page" beside the main button, top and bottom ---------- */
.page-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;padding:10px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--line)}
.page-end{margin-top:56px}
.step-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;max-width:560px;margin-top:20px}
.step-nav .is-off{visibility:hidden}
.step-count{margin:0;font-size:15px;color:var(--muted)}
.step-count b{color:var(--ink);font-weight:600}
.lp2 .step-title{margin:6px 0 0;font-size:22px;font-weight:600;line-height:1.3;letter-spacing:0}

/* ---------- the section set in ink (the last one) ---------- */
.on-dark{background:var(--ink);color:#f7f4ee}
.on-dark .info,.on-dark .terms,.on-dark .howto{color:var(--on-dark)}
.on-dark .tlink{color:#f7f4ee}

/* ---------- the email field beside the side button ---------- */
.mail{max-width:640px;margin-top:32px}
.mail-label{display:block;margin:0 0 10px;font-size:15px;line-height:1.55}
.mail-row{display:flex;flex-wrap:wrap;gap:10px}
.mail-row input{flex:1 1 240px;min-width:0;min-height:46px;padding:10px 12px;background:var(--field);border:1px solid var(--field-edge);border-radius:2px;color:var(--ink);font:400 15px/1.4 var(--sans)}
.mail-row input::placeholder{color:var(--muted);opacity:1}
.mail-row input[aria-invalid="true"]{outline:2px solid #b4552f;outline-offset:1px}
.mail-note,.mail-status{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.mail-status:empty{display:none}
.mail.is-sent .mail-status{font-size:15px;color:var(--ink)}
.mail-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mail-nojs{max-width:640px;margin:32px 0 0;font-size:15px;line-height:1.6}

/* ---------- page layout: one column 1200 wide; each section opens with an ink rule across the column ---------- */
.lp2 .wrap{width:calc(100% - 2*var(--gutter));max-width:1200px;margin-inline:auto}
.lp2{--gutter:120px}
.sec{padding-block:72px}
#cases.sec{padding-bottom:48px}   /* the results run on into the trial that tests them: a shorter break after the email field */
.sec>.wrap{border-top:1px solid var(--rule);padding-top:14px}
.sec.on-dark>.wrap{border-top-color:#f7f4ee55}
.sec-link{margin:20px 0 0}   /* the section's own link stays with its matter */
/* a section with its heading on the left and the matter on the right (symptoms, why, the questions) */
.split{display:grid;grid-template-columns:minmax(0,35fr) minmax(0,65fr);column-gap:48px;align-items:start}
.split-head .h2{margin-bottom:0}
.split-body>:first-child{margin-top:4px}

/* 1. first screen: the kicker and the headline across, then the short text and the next step beside the drawing */
.first{padding-block:40px 64px}
.first-grid{display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);column-gap:40px;
  grid-template-areas:"k k" "h h" "lead fig" "proof fig" "act fig";grid-template-rows:auto auto auto auto 1fr}
.first .kicker{grid-area:k}
.first .h1{grid-area:h}
.first .lead-short{grid-area:lead;margin-top:32px}
.proof-first{grid-area:proof;display:flex;align-items:baseline;min-width:0;margin:16px 0 0;padding-top:13px;border-top:1px solid var(--rule);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.35}
.proof-first .proof-item{flex:0 1 auto;min-width:0}   /* each item as wide as its text, shrinking in step: the long one wraps once, not three times */
.lp2 .nobr{white-space:nowrap}   /* the last word keeps its note mark */
.stats3 span.nobr{display:inline;margin-top:0}   /* .stats3 span is a block; the mark's wrap stays inline */
@media(max-width:340px){.stats3 .nobr{white-space:normal}}   /* at 320 px "installations*2" is wider than its column: let the mark wrap rather than overflow */
.proof-first .proof-item+.proof-item{margin-left:14px;padding-left:14px;border-left:1px solid var(--rule)}
.proof-first b{font-family:var(--head);font-weight:700;font-stretch:var(--head-wide);font-variant-numeric:tabular-nums;font-size:30px;line-height:1;color:var(--ink)}
/* below 1280 px the left column is too narrow for the two facts side by side: one per line, no rule between */
@media(max-width:1279px){.proof-first{flex-direction:column;align-items:flex-start;gap:4px}.proof-first .proof-item+.proof-item{margin-left:0;padding-left:0;border-left:0}}
.first-act{grid-area:act;margin-top:28px}
.first-act>.tlink{margin-top:12px}
.first-after{margin:14px 0 0;font-size:15px;font-weight:600}
.first-pic{grid-area:fig;position:relative;margin:18px calc(-1 * var(--gutter)) 0 0;min-width:0}
@media(min-width:1101px){.first-grid{grid-template-columns:minmax(0,36fr) minmax(0,64fr)}}   /* wide screens: the drawing takes more of the row (40/60 below 1101 px) */
.first-pic .pic{position:relative}
.first-pic img{display:block;width:100%;height:auto}
.first-pic .over{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.first-pic .axis line{stroke:var(--ink);stroke-width:1;stroke-dasharray:22 5 3 5;vector-effect:non-scaling-stroke}
.first-pic .leader line{stroke:var(--ink);stroke-width:1.75;vector-effect:non-scaling-stroke}
.first-pic .sp{display:none}
.first-pic .dot{position:absolute;left:18%;top:53.3%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--ink)}
.first-pic .loupe{position:absolute;left:7.5%;top:7.6%;width:13%;height:auto;aspect-ratio:1;overflow:visible}
.loupe .ring{fill:none;stroke:var(--ink);stroke-width:2.5;vector-effect:non-scaling-stroke}
.xray-cap{margin:6px 0 0;font-size:13px;line-height:1.45;color:var(--ink)}
/* on wide screens the caption sits in the drawing's empty lower right corner, like a note on a figure */
@media(min-width:1101px){.xray-cap{position:absolute;right:calc(var(--gutter) + 0px);bottom:3%;max-width:16em;margin:0;text-align:right}}

/* 2. installation: one scene that plays once (lp.js); three still pictures without JavaScript or with reduced motion */
.scene-box{max-width:960px;margin:32px 0 0}
.play{position:relative;margin:0;background:var(--paper);aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line)}
.play canvas,.play img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.play-steps{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 28px;font-size:15px;color:var(--muted)}
.play-steps li.is-on{color:var(--ink);font-weight:600}
.scene-play{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;align-items:start}
.scene-play>.play{grid-column:1/-1}
.play-again{margin:10px 0 0;min-height:var(--press-min)}   /* beside the step names; hidden (not removed) until the scene has played, so nothing moves */
.play-again .button{visibility:hidden}
.play-again.is-ready .button{visibility:visible}
.stills{display:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}
.stills figure{margin:0}
.stills img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--paper);border:1px solid var(--line)}
.stills figcaption{margin-top:6px;font-size:14px}
.no-js .scene-play,.lp2.is-still .scene-play{display:none}
.no-js .stills,.lp2.is-still .stills{display:grid}
.load-note{margin:10px 0 0;font-size:14px;color:var(--muted)}
.inst-text{margin-top:28px}

/* 3. results */
.res-text{max-width:40em}

/* 5. why black rust: two drawn panels with a caption each */
.rusts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;max-width:860px;margin:32px 0 0}
.rusts figure{margin:0}
.rusts svg{display:block;width:100%;height:auto;aspect-ratio:240/150;border:1px solid var(--rule)}
.rusts figcaption{margin-top:10px;font-size:16px;line-height:1.55}
/* the red and black rust panels drawn like the first screen's circle: paper for the water, hatched steel, ink edges */
.lp2 svg[data-art] .mech-water{fill:var(--paper)}
.lp2 svg[data-art] .mech-steel{fill:#dcd7cc}
.lp2 .mech-hatch-line{stroke:var(--ink);stroke-width:1.3}
.lp2 svg[data-art] .rust{stroke:var(--ink);stroke-width:2.5}
.lp2 svg[data-art] .art-label{fill:var(--ink)}
.lp2 svg[data-art] .art-label.on-steel{fill:var(--ink);paint-order:stroke;stroke:#dcd7cc;stroke-width:4px}

/* 6. who stands behind it */
.stats3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 40px;margin:0;padding:0;list-style:none}
.stats3 li{padding-top:4px}
.stats3 b{display:block;font-family:var(--head);font-size:56px;font-weight:700;font-stretch:var(--head-wide);line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stats3 span{display:block;margin-top:8px;font-size:16px}
.roles{margin:32px 0 0;max-width:40em}

/* 8. last section (ink) */
.final .h2{color:#f7f4ee;max-width:12em}
.final .info{max-width:36em}
.final .button{margin-top:18px}
.contact{margin:14px 0 0;font-size:15px;line-height:1.55;color:var(--on-dark)}

/* the fit-check dialog */
dialog.fit{max-width:620px;padding:24px 28px 28px;border-radius:4px;background:var(--paper);color:var(--ink);opacity:1;transition:opacity .2s ease,display .2s allow-discrete,overlay .2s allow-discrete}
@starting-style{dialog.fit[open]{opacity:0}}
dialog.fit::backdrop{background:#101e17a8;backdrop-filter:none}
.fit-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.lp2 dialog.fit h2{margin:4px 0 8px;font-size:32px;letter-spacing:-.01em;line-height:1.1}
.fit-close{flex:none;margin:-6px -10px 0 0;border:0;background:transparent;color:var(--ink);font-size:30px;line-height:1;width:44px;height:44px;cursor:pointer}
.fit-intro{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.fit-steps{list-style:none;margin:12px 0 4px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;font-size:14px;line-height:1.35}
.fit-steps b{display:block;font-size:20px;font-weight:600;line-height:1.2}
dialog.fit label{display:block;margin:12px 0 4px;font-size:14px;font-weight:600}
dialog.fit select,dialog.fit input[type=text],dialog.fit input[type=tel],dialog.fit textarea:not(.sr-only){width:100%;min-height:44px;padding:9px 10px;background:var(--field);border:1px solid var(--field-edge);border-radius:2px;color:var(--ink);font:400 15px/1.4 var(--sans)}
dialog.fit select:invalid{color:var(--muted)}
dialog.fit [aria-invalid="true"]{outline:2px solid #b4552f;outline-offset:1px}
.fit .field-hint{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.fit-more{margin:16px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fit-more>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding:8px 4px;font-size:15px;font-weight:500;cursor:pointer;list-style:none}
.fit-more>summary::-webkit-details-marker{display:none}
.fit-more>summary>.sign{font-size:24px;line-height:1;color:var(--green)}
.fit-more>summary>.sign::before{content:"+"}
.fit-more[open]>summary>.sign::before{content:"\2212"}
.fit-more>summary:hover{background:var(--mist)}
.fit-more>div{padding:0 0 16px}
.fit-more fieldset{border:0;margin:12px 0 0;padding:0}
.fit-more legend{padding:0;font-size:14px;font-weight:600}
.fit .check-field{display:flex;gap:10px;align-items:flex-start;margin:8px 0 0;font-size:14px;font-weight:400;line-height:1.5}
.fit .check-field input{width:18px;height:18px;margin:1px 0 0;flex:none;accent-color:var(--green)}
.fit .field-pair{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.fit-photos-h{margin:16px 0 6px;font-size:14px;font-weight:600}
.fit-guide{margin:0 0 8px;font-size:14px;line-height:1.5}
.fit-help{margin:0 0 8px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.fit-contact{margin:10px 0 0;font-size:15px;line-height:1.55}
.fit-photos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 12px}
.fit-photos figure{margin:0}
.fit-photos svg{display:block;width:100%;max-width:220px;height:auto;aspect-ratio:2/1}
.fit-photos figcaption{margin:2px 0 0;font-size:13px;line-height:1.35;color:var(--muted)}
.fit .button-primary{display:flex;width:100%}
.fit-status{margin:10px 0 0;font-size:14px;line-height:1.5}
.fit-status:empty{display:none}
.fit-note{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.fit-sent{margin:0 0 6px;font-size:13px;line-height:1.4;color:var(--ink)}
.fit-copy{margin:4px 0 0;font-size:14px}
.fit-copy .tlink{min-height:var(--press-min)}
/* the two example drawings: ink lines on the paper, like the first screen's figure (the thing to photograph in ink, outline
   heavier than its parts, the pipe in the drawn grey); the camera frame's four corners mark what goes in the shot */
.fit-photo-art .p-frame{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:square}
.fit-photo-art .p-out{fill:var(--paper);stroke:var(--ink);stroke-width:2.2;stroke-linejoin:round}
.fit-photo-art .p-part{fill:var(--paper);stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round}
.fit-photo-art .p-fine{fill:none;stroke:var(--ink);stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.fit-photo-art .p-pipe{fill:none;stroke:var(--drawn);stroke-width:1.4}
.fit-photo-art .p-pipe-fine{fill:none;stroke:var(--drawn);stroke-width:1;stroke-linecap:round}
.fit-photo-art .p-support{fill:var(--paper);stroke:var(--drawn);stroke-width:1}
.fit-photo-art .p-tag{fill:var(--paper);stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.fit-photo-art text.p-name{font:600 13px var(--sans);fill:var(--ink);letter-spacing:0}
.fit-photo-art text.p-mark{font:600 26px var(--sans);fill:var(--ink);letter-spacing:0}

/* the document viewer (results page): design.css styles it; the buttons take the side-button look, the page labels are plain text */
.lp2 .doc-viewer-nav .button{min-height:44px;padding:8px 14px;font-size:14px;background:transparent;color:var(--green);border:2px solid var(--green)}
.lp2 .doc-viewer-nav .button:disabled{visibility:hidden}
.lp2 .doc-page-label{display:block;padding:0;border-radius:0;background:none;color:#fff;font-size:13px}

/* ---------- Results and Details pages: the page title ---------- */
.page-head{padding-block:28px 8px}
.page-head .h1{margin:40px 0 24px;font-size:72px;line-height:1.02}
.page-intro{max-width:40em;font-size:18px;line-height:1.6;margin:0}

/* ---------- Results page (en/proof/) ---------- */
.lp2 h2.case-group{margin:72px 0 0;padding-top:14px;border-top:1px solid var(--rule);font-size:32px;line-height:1.15;letter-spacing:-.01em;color:var(--ink)}
.results-5{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 56px;margin-top:24px}
.results-5 .result{border-top-color:var(--line)}
.results-5 h3.result-name{min-height:0;margin-bottom:2px}
.results-5 .result-meta{margin:0 0 16px!important}
.results-5 .result-wide{grid-column:1/-1}
.bm-line{margin:24px 0 0;max-width:620px;--plot-h:200px}
.bm-line svg{display:block;width:100%;height:auto;overflow:visible}
.doc-row{display:flex;gap:14px;align-items:flex-start;margin-top:16px}
.doc-row .doc-thumb{flex:0 0 72px}
.doc-row p{margin:0;font-size:14px;line-height:1.5}
.doc-row small{display:block;color:var(--muted);font-size:13px}
.lp2 h2.h2-docs{margin-top:88px;padding-top:14px;border-top:1px solid var(--rule);font-size:40px;max-width:none}
.docs{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:36px;max-width:920px}
.docs>li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:22px;align-items:start;padding-top:24px;border-top:1px solid var(--line)}
.docs .doc-thumb{flex:none}
.doc-kind{display:block;margin:0 0 6px;font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.02em}
.doc-quote{margin:0 0 8px;font-size:16px;line-height:1.6}
.doc-meta{margin:0;font-size:14px;color:var(--muted)}
.doc-links{margin:4px 0 0;display:flex;flex-wrap:wrap;gap:0 22px}
.cites{margin:40px 0 0;max-width:920px}
.cites ul{margin:8px 0 0;padding-left:1.2em}
.cites li{margin:0 0 10px;line-height:1.6}
.cites a.cite-line{white-space:nowrap}   /* the link's own words stay on one line */
.small-note{margin:24px 0 0;font-size:14px;line-height:1.55;color:var(--muted);max-width:60em}
.notes-sec{padding-block:56px 64px}
.lp2 .notes{list-style:none;margin:10px 0 0;padding:0;font-size:13px;line-height:1.7;max-width:62em}
.lp2 .notes li{padding:4px 6px;border-radius:0}
.lp2 .notes li>span:first-child{display:inline-block;min-width:2.8em;color:var(--ink);font-weight:600}
.lp2 .notes li:target{background:#f0bd7533}

/* ---------- Details page (en/details/) ---------- */
.toc{margin:24px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:0 28px}
.toc a{font-size:16px}
.prose{max-width:46em}
.prose p{margin:0 0 14px}
.prose ul{margin:0 0 14px;padding-left:1.25em}
.prose li{margin:0 0 8px;line-height:1.6}
.qa h3{margin:28px 0 8px;font-size:18px;font-weight:600;line-height:1.35;letter-spacing:0}
.qa p{margin:0 0 12px;max-width:46em}
/* tables: rules across only (a strong one under the head), figures right-aligned */
.model-tables{display:grid;grid-template-columns:repeat(2,minmax(0,300px));gap:32px;margin:12px 0 8px;align-items:start}
.lp2 table.plain{width:100%;border-collapse:collapse;font-size:15px;line-height:1.4}
.lp2 table.plain th{text-align:left;font-weight:600;color:var(--muted);padding:8px 12px 8px 0;border-bottom:1.5px solid var(--ink)}
.lp2 table.plain td{padding:9px 12px 9px 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.lp2 table.plain .num{text-align:right;padding-right:0}
.size-note{max-width:46em;font-size:14px;color:var(--muted)}
.facts{list-style:none;margin:12px 0 0;padding:0;max-width:46em}
.facts li{padding:10px 0;border-top:1px solid var(--line)}
.facts b{font-weight:600;margin-right:.4em}
.det-stills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:16px 0 0;padding:0;list-style:none;max-width:960px}
.det-stills figure{margin:0}
.det-stills img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--paper);border:1px solid var(--line)}
.det-stills figcaption{margin-top:6px;font-size:14px}
.lp2 .compare-short{padding:0;margin:48px 0 0}
.lp2 .compare-title{font-size:21px;font-weight:600;margin:0 0 8px;letter-spacing:0}
/* the comparison: the NMR column is marked by the yellow rule on top and heavier type, not by a filled box */
.lp2 .compare-table thead th{border-bottom-color:var(--rule)}
.lp2 .compare-table .is-nmr{background:transparent;color:var(--ink);font-weight:600;border-bottom-color:var(--line);border-radius:0}
.lp2 .compare-table thead .is-nmr{color:var(--ink);border-top:4px solid var(--accent);border-radius:0}
.lp2 .compare-table tbody tr:last-child .is-nmr{border-radius:0}
@media(max-width:760px){.lp2 .compare-table td.is-nmr::before{color:var(--muted)}}   /* design.css sets a pale label for the live page's green cell; here the cell is on paper */
.lp2 .why-table{margin-top:20px;max-width:980px}
.mech-box{max-width:820px;margin:28px 0 0}
.mech-pics{position:relative;aspect-ratio:4/3;background:#e7eef0;overflow:hidden;border:1px solid var(--rule)}
.mech-pics svg{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .2s ease}
.mech-pics svg.is-on{opacity:1}
.mech-cap{margin:12px 0 0;max-width:40em}
.mech-js .step-count{margin-top:14px}
.mech-list{list-style:none;margin:16px 0 0;padding:0;max-width:46em}
.mech-list li{padding:10px 0;border-top:1px solid var(--line)}
.mech-list b{display:block;font-weight:600}
.js .mech-list{display:none}
.no-js .mech-js{display:none}
.lp2 .tech-fig svg{background:transparent;border:1px solid var(--line)}
.lp2 .formula{white-space:normal}

/* ---------- footer ---------- */
.lp2 footer.foot{display:block;padding-block:40px 48px;font-size:14px;color:var(--muted)}
.lp2 footer.foot>.wrap{border-top:1px solid var(--rule);padding-top:20px}
.foot-links{display:flex;flex-wrap:wrap;gap:0 24px;margin:0 0 12px}
.foot-links a{color:var(--ink)}
.footer-line{margin:0 0 12px;color:var(--ink);font-weight:500}
.lp2 .footer-main p{margin:0 0 6px}
.foot-photo{margin:12px 0 0;font-size:13px}
.foot-notes{margin:12px 0 0;font-size:13px;color:var(--ink)}
.lp2 h2.notes-h{margin:0 0 6px;font-size:18px;font-weight:600;letter-spacing:0;line-height:1.3}

/* ---------- Unfolded foldables and small laptops (about 884 wide) ---------- */
@media(max-width:1100px){
  .lp2{--gutter:40px}
  .lp2 h1.h1{font-size:72px}
  .lp2 h2.h2{font-size:42px}
  .page-head .h1{font-size:56px}
  .first-pic{margin-right:0}
  .results{gap:0 28px}
  .result-big b{font-size:52px}
  .rbars{--plot:150px;grid-template-columns:repeat(2,88px);gap:0 22px}
  .steps-line{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px}
  .stats3 b{font-size:44px}
  .split{column-gap:32px}
}

/* 761–860 px: the four links, the logo and the button do not fit in the bar, and a link must not wrap: hide the links as on phones */
@media(max-width:860px){.topbar-nav{display:none}}

/* ---------- Phones ---------- */
@media(max-width:760px){
  body.lp2{--head-wide:100%}
  :root{--bar-h:60px}
  .lp2{--gutter:20px}
  body.lp2{font-size:16px}
  .topbar-in{gap:12px}
  .topbar-nav{display:none}
  .topbar-logo .brand-logo{height:36px}
  .lp2 .topbar-cta{padding:8px 14px}
  .lp2 .button-primary:not(.topbar-cta){display:flex;width:100%}
  .sec{padding-block:32px}   /* 84be149 kept phones at 40px between sections; 32px since 2026-10-22 (the ink rule marks the break) */
  .sec-link{margin-top:14px}
  .lp2 h1.h1{font-size:min(44px,(100vw - 2 * var(--gutter)) / 8)}   /* the wide face: "without repiping." is about 7.7 em, so below about 390 px the size follows the width */
  .lp2 h2.h2{font-size:32px;line-height:1.1}
  .page-head .h1{font-size:40px;margin-top:24px}
  .lp2 .ask{font-size:14px;margin-bottom:10px}
  .kicker{font-size:14px;line-height:21px}
  .first{padding-block:16px 40px}
  .first-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"k" "h" "lead" "proof" "fig" "act";grid-template-rows:none}
  .first .lead-short{margin-top:14px;font-size:17px;line-height:25px}
  .proof-first{margin:4px 0 0;font-size:15px}
  .proof-first b{font-size:24px}
  .first-pic{margin:0 calc(-1 * var(--gutter)) 0}   /* the proof line above takes the drawing's 4 px top margin, so the button drops only by the proof line's height */
  .first-pic .pc{display:none}
  .first-pic .sp{display:inline}
  .first-pic .dot{left:18%;top:61.6%}
  .first-pic .loupe{left:4%;top:3%;width:19.5%}
  .xray-cap{padding:0 var(--gutter)}
  .first-act{margin-top:12px}
  .first-act>.tlink{margin-top:4px}
  .howto,.terms-first{font-size:14px;line-height:21px;margin-top:10px}
  .split{grid-template-columns:minmax(0,1fr)}
  .split-head .h2{margin-bottom:20px}
  .checks{grid-template-columns:1fr;gap:10px}
  .checks li{font-size:16px}
  .steps-line{grid-template-columns:1fr;gap:0;border-top:0;border-left:1px solid var(--rule);margin-left:4px}
  .steps-line li{padding:0 0 16px 40px}
  .steps-line li::before{left:-6px;top:.72em;width:12px;height:1px}
  .steps-line li::after{left:14px;top:.18em}
  .results,.promises,.results-5{grid-template-columns:1fr;gap:32px}
  .results{gap:24px}   /* three cards in a row down the page: one rhythm, the source link close to its note */
  #cases .results{margin-top:20px}
  .result>.tlink{margin-top:0}
  .lp2 h3.result-name{min-height:0;font-size:17px}
  .result-big b{font-size:48px}
  .rbars{--plot:136px;grid-template-columns:repeat(2,100px);gap:0 26px}
  .mail{margin-top:32px}
  .lp2 footer.foot{padding-block:32px 36px}
  .rusts{grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
  .rusts figcaption{font-size:14px}
  .stats3{grid-template-columns:1fr;gap:12px}
  .stats3 li{display:grid;grid-template-columns:11rem minmax(0,1fr);align-items:baseline;gap:12px;padding-top:10px;border-top:1px solid var(--line)}
  .stats3 li:first-child{border-top:0;padding-top:0}
  .stats3 b{font-size:34px}
  .stats3 span{margin:0}
  .faq summary{font-size:16px;padding:12px 12px}
  .faq .answer{padding:14px 12px 18px}
  .mail-row input,.mail-row .button{flex:1 1 100%}
  .stills,.det-stills{grid-template-columns:1fr;gap:16px}
  .play-steps{flex-direction:column;gap:2px}
  .scene-box{margin-top:20px}
  .inst-text{margin-top:14px}
  .page-top .button-primary{width:100%}
  .docs>li{grid-template-columns:72px minmax(0,1fr);gap:14px}
  .lp2 h2.case-group{font-size:26px;margin-top:48px}
  .lp2 h2.h2-docs{font-size:30px;margin-top:56px}
  .model-tables{grid-template-columns:1fr;gap:0}
  .model-tables table+table thead{display:none}
  dialog.fit{width:100%;max-width:none;max-height:100svh;height:100svh;margin:0;padding:12px 16px 24px;border-radius:0}
  .lp2 dialog.fit h2{font-size:26px;margin:6px 0 6px}
  .fit-intro{font-size:13.5px;line-height:1.45}
  .fit-steps{grid-template-columns:1fr;gap:0;margin:8px 0 0}
  .fit-steps li{display:flex;align-items:baseline;gap:8px}
  .fit-steps b{display:inline;font-size:16px}
  dialog.fit label{margin-top:8px}
  .fit-more{margin-top:12px}
  .fit-photos-h{margin-top:10px}
  .fit-photos{margin:4px 0 6px;gap:10px}
  .fit-photos figcaption{font-size:12.5px}
  .fit-photos svg{max-width:none}   /* the drawings fill their column (about 174 px at 390); the draft button still ends inside the first screen (830 of 844 px) */
  /* the dialog on a 390 x 844 phone: the draft button stays on the first screen (no scrolling) */
  dialog.fit{padding-top:8px}
  .lp2 dialog.fit h2{margin:2px 0 4px}
  .fit-intro{font-size:12.5px;line-height:1.35}
  .fit-steps{margin-top:4px;font-size:13px;line-height:1.25}
  dialog.fit label{margin-top:4px;font-size:13.5px}
  .fit-more{margin-top:8px}
  .fit-more>summary{min-height:44px;padding:6px 4px}
  .fit-photos-h{margin:6px 0 2px;font-size:13.5px}
  .fit-help,.fit-guide{font-size:12.5px;line-height:1.35;margin-bottom:2px}
  .fit-photos figcaption{font-size:13px;line-height:1.3}
  .fit-sent{font-size:12.5px;margin-bottom:4px}
  .mech-pics{aspect-ratio:4/3}
}
@media(max-width:360px){
  .topbar-in{padding:0 12px;gap:8px}
  /* after the round closes the header button reads "Notify me about the next round": two lines, so it fits at 320 */
  .promo-ended .lp2 .topbar-cta,.promo-ended .topbar-cta{white-space:normal;max-width:9.5em;line-height:1.15;padding:5px 10px;font-size:12.5px}
  .topbar-logo .brand-logo{height:30px}
  .lp2 .topbar-cta{padding:8px 10px;font-size:13px}
  .lp2 h1.h1{font-size:36px}   /* the wide face: two lines at 320 */
  .lp2 h2.h2{font-size:28px}
  .result-big b{font-size:42px}
}

/* ---------- Reduce motion: the same changes, at once ---------- */
@media(prefers-reduced-motion:reduce){
  .lp2 .topbar-cta,.js .topbar-cta:not(.is-shown){transition:none;transform:none}
  .faq details::details-content{transition:none}
  dialog.fit{transition:none}
  .lp2 .button{transition:none}
  .mech-pics svg{transition:none}
}