/* hr-skin.css: the HomeNoted MISE EN PLACE skin for the builder guide template (listing.php) and the presale review pages.
   v=20260910a (HR_SKIN_V1, 2026-09-10): built from DESIGN-SPEC.md section 10 (SKIN MAPPING) on the structure of pl-skin.css, section by section.
   Loaded after the template CSS (SKIN ORDER LAW), exactly like pl-skin.css. Order: self-hosted @font-face (Manrope and Rubik variable,
   Alegreya Sans static 400/500/700, upright only: the design uses no italics), the design tokens (--hr-*), the OI aliases the templates
   rely on, then per-template overrides: the guide (hero plate = the pantry label on the cast-iron board, the three-direction strip = the
   homepage rail, rank tiles = code chips, enamel trays with the iron rim, the one tomato button, iron table heads, FAQ tray rows), then
   the presales. Running text keeps its full measure (PL_FULL_MEASURE_V1); product images are square, contained, never zoomed (PRODUCT
   IMAGE LAW); ticks are ok-green (CHECKMARK LAW). Every offset is logical so the he edition mirrors without a left/right rule. */

/* ---- 1. self-hosted faces (/fonts/hr/, per script with unicode-range; Manrope 500..800 and Rubik 400..700 variable, Alegreya Sans static) ---- */
/* Alegreya Sans 400 cyrillic-ext */
@font-face {font-family:'Alegreya Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/hr/AlegreyaSans-400-cyrillic-ext-be4cdbc097.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
/* Alegreya Sans 400 cyrillic */
@font-face {font-family:'Alegreya Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/hr/AlegreyaSans-400-cyrillic-e051c0b310.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
/* Alegreya Sans 400 greek-ext */
@font-face {font-family:'Alegreya Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/hr/AlegreyaSans-400-greek-ext-e71ad1e9e7.woff2) format('woff2');unicode-range:U+1F00-1FFF}
/* Alegreya Sans 400 greek */
@font-face {font-family:'Alegreya Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/hr/AlegreyaSans-400-greek-2c0188c23c.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
/* Alegreya Sans 400 latin-ext */
@font-face {font-family:'Alegreya Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/hr/AlegreyaSans-400-latin-ext-2b1ccb4bd6.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Alegreya Sans 400 latin */
@font-face {font-family:'Alegreya Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/hr/AlegreyaSans-400-latin-623a60bd2c.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Alegreya Sans 500 cyrillic-ext */
@font-face {font-family:'Alegreya Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/hr/AlegreyaSans-500-cyrillic-ext-ce1875a6bb.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
/* Alegreya Sans 500 cyrillic */
@font-face {font-family:'Alegreya Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/hr/AlegreyaSans-500-cyrillic-c196903e1f.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
/* Alegreya Sans 500 greek-ext */
@font-face {font-family:'Alegreya Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/hr/AlegreyaSans-500-greek-ext-ab0cd13205.woff2) format('woff2');unicode-range:U+1F00-1FFF}
/* Alegreya Sans 500 greek */
@font-face {font-family:'Alegreya Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/hr/AlegreyaSans-500-greek-37ab71b563.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
/* Alegreya Sans 500 latin-ext */
@font-face {font-family:'Alegreya Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/hr/AlegreyaSans-500-latin-ext-06314bf09b.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Alegreya Sans 500 latin */
@font-face {font-family:'Alegreya Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/hr/AlegreyaSans-500-latin-dbb18b8846.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Alegreya Sans 700 cyrillic-ext */
@font-face {font-family:'Alegreya Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/hr/AlegreyaSans-700-cyrillic-ext-7098c184e7.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
/* Alegreya Sans 700 cyrillic */
@font-face {font-family:'Alegreya Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/hr/AlegreyaSans-700-cyrillic-9c2020af41.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
/* Alegreya Sans 700 greek-ext */
@font-face {font-family:'Alegreya Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/hr/AlegreyaSans-700-greek-ext-7047918393.woff2) format('woff2');unicode-range:U+1F00-1FFF}
/* Alegreya Sans 700 greek */
@font-face {font-family:'Alegreya Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/hr/AlegreyaSans-700-greek-419371c355.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
/* Alegreya Sans 700 latin-ext */
@font-face {font-family:'Alegreya Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/hr/AlegreyaSans-700-latin-ext-a342034912.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Alegreya Sans 700 latin */
@font-face {font-family:'Alegreya Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/hr/AlegreyaSans-700-latin-6cc1ee1709.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Manrope 500 800 cyrillic-ext */
@font-face {font-family:'Manrope';font-style:normal;font-weight:500 800;font-display:swap;src:url(/fonts/hr/Manrope-cyrillic-ext-28f2a82cce.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
/* Manrope 500 800 cyrillic */
@font-face {font-family:'Manrope';font-style:normal;font-weight:500 800;font-display:swap;src:url(/fonts/hr/Manrope-cyrillic-8fc0aa17e1.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
/* Manrope 500 800 greek */
@font-face {font-family:'Manrope';font-style:normal;font-weight:500 800;font-display:swap;src:url(/fonts/hr/Manrope-greek-75ae12b7d0.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
/* Manrope 500 800 latin-ext */
@font-face {font-family:'Manrope';font-style:normal;font-weight:500 800;font-display:swap;src:url(/fonts/hr/Manrope-latin-ext-623714ac1d.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Manrope 500 800 latin */
@font-face {font-family:'Manrope';font-style:normal;font-weight:500 800;font-display:swap;src:url(/fonts/hr/Manrope-latin-101877a7a9.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Rubik 400 700 hebrew */
@font-face {font-family:'Rubik';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/hr/Rubik-hebrew-4de858e820.woff2) format('woff2');unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
/* Rubik 400 700 latin */
@font-face {font-family:'Rubik';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/hr/Rubik-latin-94df5f5371.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---- 2. design tokens (DESIGN-SPEC section 2): the worktop, the enamelware, the one tomato ---- */
:root{
  --hr-stone:#EBEEE6;--hr-stone-2:#DDE2D7;--hr-line:#CDD1C8;--hr-enamel:#FFFFFF;--hr-enamel-2:#F6F7F3;
  --hr-iron:#2B2724;--hr-iron-2:#3A3531;--hr-iron-line:#4E4843;--hr-text:#2B2724;--hr-mute:#5C5752;--hr-on-iron:#F3F2EE;--hr-on-iron-2:#BDB8B2;
  --hr-tomato:#C7381E;--hr-tomato-text:#B32E17;--hr-tomato-tint:#F8E2DC;--hr-tomato-lit:#F2A38F;
  --hr-cta:var(--hr-tomato);--hr-cta-ink:#FFFFFF;--hr-cta-hover:var(--hr-iron);
  --hr-ok:#2F6B3A;--hr-ok-tint:#E2EEE3;--hr-warn:#9E2A14;--hr-warn-tint:#F8E2DC;--hr-focus:var(--hr-tomato);
  --hr-display:"Manrope","Helvetica Neue",Arial,sans-serif;--hr-text-face:"Alegreya Sans","Gill Sans","Segoe UI",Calibri,sans-serif;
  --hr-fs-0:.75rem;--hr-fs-1:.875rem;--hr-fs-2:1rem;--hr-fs-3:1.125rem;--hr-fs-4:1.3125rem;--hr-fs-5:clamp(1.75rem,2.6vw,2.5rem);--hr-fs-6:clamp(2.375rem,4.4vw,3.75rem);
  --hr-r-1:4px;--hr-r-2:10px;--hr-r-3:6px;--hr-r-4:999px;--hr-rim:1.5px;--hr-shadow:0 14px 36px rgba(43,39,36,.16);
  --hr-s-1:4px;--hr-s-2:8px;--hr-s-3:12px;--hr-s-4:16px;--hr-s-5:24px;--hr-s-6:32px;--hr-s-7:48px;--hr-s-8:64px;--hr-s-9:96px;
  --hr-wrap:1200px;--hr-gutter:clamp(16px,4vw,32px);--hr-gap:clamp(12px,1.6vw,20px);--hr-rail:44px;
  --hr-fade:linear-gradient(to right,rgba(255,255,255,0),#fff 70%);--hr-fade-start:linear-gradient(to left,rgba(255,255,255,0),#fff 70%);
  /* the marks: a white tick on the ok-green tile (CHECKMARK LAW), the warn cross on its tint, iron stars */
  --hr-i-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.6 10.4l3.7 3.7 7.1-8.2' fill='none' stroke='%23FFFFFF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --hr-i-tick-iron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.6 10.4l3.7 3.7 7.1-8.2' fill='none' stroke='%232B2724' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --hr-i-cross:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.6 5.6l8.8 8.8M14.4 5.6l-8.8 8.8' fill='none' stroke='%239E2A14' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --hr-i-cross-iron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.9 5.9l8.2 8.2M14.1 5.9l-8.2 8.2' fill='none' stroke='%232B2724' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --hr-i-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5l2.1 5.6 6 .3-4.7 3.7 1.6 5.8-5-3.3-5 3.3 1.6-5.8-4.7-3.7 6-.3z' fill='%232B2724'/%3E%3C/svg%3E");
  --hr-i-star-o:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2.2l1.9 4.9 5.2.3-4.1 3.2 1.4 5-4.4-2.9-4.4 2.9 1.4-5-4.1-3.2 5.2-.3z' fill='none' stroke='%232B2724' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:lang(he){--hr-display:"Rubik","Arial Hebrew",Arial,sans-serif;--hr-text-face:"Rubik","Arial Hebrew",Arial,sans-serif}
[dir=rtl]{--hr-fade:linear-gradient(to left,rgba(255,255,255,0),#fff 70%);--hr-fade-start:linear-gradient(to right,rgba(255,255,255,0),#fff 70%)}
/* the OI names the builder templates rely on (no template CSS has to change) */
:root{--paper:var(--hr-stone);--paper2:var(--hr-enamel);--sand:var(--hr-stone-2);--card:var(--hr-enamel);--line:var(--hr-line);
  --ink:var(--hr-text);--ink2:var(--hr-mute);--muted:var(--hr-mute);--navy:var(--hr-iron);--navy2:var(--hr-iron-2);
  --amber:var(--hr-tomato);--amber-deep:var(--hr-tomato-text);--amber-tint:var(--hr-tomato-tint);--amber-lit:var(--hr-tomato-lit);--red:var(--hr-warn);
  --serif:var(--hr-display);--sans:var(--hr-text-face)}
[lang=he]{--serif:var(--hr-display);--sans:var(--hr-text-face)}   /* Rubik through the :lang(he) token swap */
html{-webkit-text-size-adjust:100%;background:var(--hr-stone)}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:18px;line-height:1.55;font-variant-numeric:tabular-nums;font-kerning:normal;font-synthesis:none;-webkit-font-smoothing:antialiased}
b,strong{font-weight:700}
h1,h2,h3,h4{font-family:var(--serif);font-weight:800;letter-spacing:-.02em;overflow-wrap:anywhere;hyphens:manual;text-wrap:balance}
:is([lang=de],[lang=fi],[lang=hu],[lang=nl],[lang=sv],[lang=da],[lang=et],[lang=el],[lang=bg]) :is(h1,h2,h3){hyphens:auto;hyphenate-limit-chars:10 4 4}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--hr-iron);outline-offset:2px;box-shadow:0 0 0 7px var(--hr-tomato-tint);border-radius:var(--hr-r-1)}
.hero a:focus-visible,.foot a:focus-visible,.strip a:focus-visible{outline-color:var(--hr-tomato-lit);box-shadow:none}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* section pictogram and label from seed.direction, no per-page CSS (Pantry Label graft) */
body[data-section=cook]{--hr-sec-icon:"#i-pan"}body[data-section=drink]{--hr-sec-icon:"#i-cup"}body[data-section=care]{--hr-sec-icon:"#i-hanger"}
.nb{white-space:nowrap}
.co{unicode-bidi:isolate;direction:ltr}
[dir=rtl] .flip{transform:scaleX(-1)}

/* ---- 3. shared chrome: sitebar (the shelf) + footer (the cast-iron board), both templates ---- */
.sitebar{background:var(--hr-enamel);border-bottom:1px solid var(--hr-line);border-top:0}
.sitebar .wrap{padding-top:12px;padding-bottom:12px;gap:12px}
.sitebar .hr-logo,.sitebar .pl-logo,.sitebar .oi-logo{min-height:44px;padding:2px 0;display:inline-flex;align-items:center;flex:none;min-width:0}
.sitebar .hr-logo img,.sitebar .pl-logo img,.sitebar .oi-logo img{height:32px;width:auto}
@media(max-width:640px){.sitebar .hr-logo img,.sitebar .pl-logo img,.sitebar .oi-logo img{height:28px}}
@media(max-width:380px){.sitebar .hr-logo img,.sitebar .pl-logo img,.sitebar .oi-logo img{height:24px}}
.sitebar strong{color:var(--hr-text);font-weight:700;font-family:var(--hr-display)}
.sitebar .adv{font-family:var(--hr-display);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--hr-mute);margin-inline-start:auto;flex:0 1 auto;min-width:0;max-width:17ch;text-align:end;line-height:1.15;text-wrap:balance;overflow-wrap:anywhere;hyphens:manual}
.foot{background:var(--hr-iron);color:var(--hr-on-iron-2);border-top:0;font-size:16px;line-height:1.5;padding:48px 0 32px}
.foot::after{display:none}                                                   /* no edge strip: the board ends on the board */
.foot p{color:var(--hr-on-iron-2)}
.foot strong,.foot b{color:var(--hr-on-iron)}
.foot p a{color:var(--hr-on-iron);text-decoration:underline;text-decoration-color:var(--hr-tomato-lit);text-decoration-thickness:2px;text-underline-offset:3px}
.foot p a:hover,.foot p a:focus-visible{color:var(--hr-tomato-lit);text-decoration-color:var(--hr-on-iron)}
.foot-nav a{color:var(--hr-on-iron);font-weight:700;font-family:var(--hr-display);font-size:14px;text-decoration:none;min-height:40px;display:inline-flex;align-items:center}
.foot-nav a:hover{text-decoration:underline;text-decoration-color:var(--hr-tomato-lit);text-decoration-thickness:2px;text-underline-offset:4px}
.foot .wrap > a{color:var(--hr-on-iron);font-weight:400}
.foot .wrap > a:hover{text-decoration-color:var(--hr-tomato-lit)}

/* ---- 4. guide template (listing.php): hero = the cast-iron board, the plate = the pantry label ---- */
.hero{background:var(--hr-iron);color:var(--hr-on-iron);border-radius:0;background-image:none}
/* DESIGN-SPEC 10.1: the plate the page module emits (<span class="plate"><span class="l">C</span><svg/>Cook<span class="seg">C3 · Meat thermometers</span></span>)
   is the homepage pantry label set on iron: enamel label, the outlined iron letter chip, the 22 px pictogram, the section word in caps, the gate segment in mute */
.hero .plate{display:inline-flex;align-items:center;gap:8px;min-height:30px;max-width:100%;padding:3px 10px 3px 3px;background:var(--hr-enamel);border:1px solid var(--hr-enamel);border-radius:var(--hr-r-1);color:var(--hr-text);font-family:var(--hr-display);font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;line-height:1.15;margin-bottom:18px}
[dir=rtl] .hero .plate{padding:3px 3px 3px 10px}
.plate .l,.hero .plate .l{flex:none;display:inline-grid;place-items:center;min-width:26px;height:22px;padding:0 6px;background:var(--hr-enamel);color:var(--hr-iron);border:1.5px solid var(--hr-iron);border-radius:var(--hr-r-1);font-family:var(--hr-display);font-weight:800;font-size:12px;letter-spacing:.04em;line-height:1;text-transform:none;unicode-bidi:isolate;direction:ltr}
.plate svg,.hero .plate svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--hr-mute)}
.hero .plate .sec{font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--hr-text)}
.hero .plate .seg,.hero .plate .cat{font-weight:700;font-size:13px;letter-spacing:0;text-transform:none;color:var(--hr-mute);border-inline-start:1px solid var(--hr-line);padding-inline:10px 4px;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.hero .plate .code{display:inline-grid;place-items:center;min-width:34px;height:22px;padding:0 6px;border:1.5px solid var(--hr-iron);border-radius:var(--hr-r-1);background:var(--hr-enamel);color:var(--hr-iron);font-size:12px;letter-spacing:.04em;line-height:1;text-transform:none;direction:ltr}
.hero h1{font-family:var(--hr-display);font-weight:800;text-transform:none;line-height:1.02;letter-spacing:-.02em;font-size:clamp(2rem,4.2vw,3.5rem);max-width:20ch;margin-inline:auto;text-wrap:balance;color:var(--hr-on-iron)}
:is([lang=de],[lang=fi],[lang=hu],[lang=nl],[lang=el],[lang=pl],[lang=cs],[lang=sk],[lang=sl],[lang=hr],[lang=ro],[lang=pt],[lang=bg],[lang=lv],[lang=et]) .hero h1{font-size:clamp(1.75rem,3.6vw,3rem)}
@media(min-width:1000px){.hero h1{max-width:20ch}}
[lang=he] .hero h1{line-height:1.1;letter-spacing:0}
.hero .verify{font-family:var(--hr-display);font-weight:600;font-size:14px;letter-spacing:.02em;text-transform:none;color:var(--hr-on-iron-2);opacity:1;margin-top:18px}
.hero .verify b,.hero .verify strong{color:var(--hr-on-iron)}
.hero .verify bdi{font-variant-numeric:tabular-nums;color:var(--hr-on-iron)}
.hero .label,.hero .hero-kicker{font-family:var(--hr-display);font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--hr-tomato-lit)}
.hero .art{background:var(--hr-enamel);border:var(--hr-rim) solid var(--hr-enamel);border-radius:var(--hr-r-2);padding:12px}   /* the hero composition tray (HERO DISPLAY LAW: winner front, judged at 400 px) */
.hero .art img{border-radius:var(--hr-r-3);aspect-ratio:4/5;object-fit:cover;width:100%;display:block}

/* article */
.article{background:var(--hr-stone)}
.opener p{color:var(--hr-text);font-size:18px;line-height:1.55}
/* PL_OPENER_CHECK_V2 mechanics, HR mark: the pain-point lines hang on a 22 px ok-green tick box in the start gutter (the recipe-card tick box);
   the template's ::before emits the emoji "\2705" with margin-right after this file, so content and margin are forced */
.opener p.q{font-family:var(--hr-display);font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.01em;position:relative;padding-inline-start:34px;text-indent:0}
.opener p.q::before{content:"" !important;position:absolute;inset-inline-start:0;top:.12em;width:22px;height:22px;margin:0 !important;display:block;box-sizing:border-box;border-radius:var(--hr-r-3);border:1.5px solid var(--hr-iron);background:var(--hr-enamel) var(--hr-i-cross-iron) center/14px 14px no-repeat;vertical-align:baseline}   /* the pain-point mark: the outlined recipe-card box with an iron cross, never the ok-green tick (green stays the pros mark) */
.flow-h,.long-review h2{font-family:var(--hr-display);font-weight:800;font-size:clamp(28px,2.6vw,40px);line-height:1.05;letter-spacing:-.02em;color:var(--hr-text);padding-inline-start:0;position:relative;text-wrap:balance}
.flow-h::before,.long-review h2::before{display:none}                        /* no kicker square: the kicker is tomato-text caps */
.flow-h .kicker,.long-review .kicker{display:block;font-family:var(--hr-display);font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--hr-tomato-text);margin-bottom:8px}

/* listings = enamel trays; the rank is the code chip (rank 1 filled tomato, the featured rim tomato) */
.listing{background:var(--hr-enamel);border:var(--hr-rim) solid var(--hr-iron);border-radius:var(--hr-r-2);box-shadow:none;overflow:visible}
.listing.featured{border-color:var(--hr-tomato);border-width:var(--hr-rim);box-shadow:none}
.listing-rank{background:var(--hr-enamel);color:var(--hr-iron);border:1.5px solid var(--hr-iron);font-family:var(--hr-display);font-weight:800;font-size:16px;letter-spacing:0;border-radius:var(--hr-r-1);font-variant-numeric:tabular-nums;min-width:40px;height:40px;display:inline-grid;place-items:center;padding:0 10px;left:auto;right:auto;inset-inline-start:20px;top:-20px;line-height:1}
.listing.featured .listing-rank{background:var(--hr-tomato);border-color:var(--hr-tomato);color:#fff}
.winner-banner{background:var(--hr-enamel-2);color:var(--hr-text);border:1px solid var(--hr-line);border-radius:var(--hr-r-1);font-family:var(--hr-display);font-weight:700;font-size:13px;letter-spacing:0;text-transform:none}   /* a pantry label, sentence case */
.winner-banner b,.winner-banner strong{color:var(--hr-tomato-text)}
.prod-img{border:1px solid var(--hr-line);border-radius:var(--hr-r-3);background:var(--hr-enamel)}   /* PRODUCT IMAGE LAW: a square white well with a rule, so a white packshot reads as a product on a tray */
.listing-media .prod-img,.review-break .prod-img,.final-offer .prod-img{aspect-ratio:1/1;min-height:0!important;height:auto;padding:8px;box-sizing:border-box}
.prod-img img{width:100%!important;height:100%!important;max-height:none!important;object-fit:contain;object-position:center;transform:none!important}
.prod-img.placeholder{aspect-ratio:1/1;background:var(--hr-stone-2)}
.prod-img.placeholder span{color:var(--hr-mute);font-family:var(--hr-display);font-weight:700;letter-spacing:0;text-transform:none;font-size:13px}
.review-link{color:var(--hr-text);font-family:var(--hr-display);font-weight:700;font-size:15px;line-height:1.3;text-align:start;display:block;box-sizing:border-box;padding-block:9px;min-height:40px;text-decoration-color:var(--hr-tomato);text-decoration-thickness:2px;text-underline-offset:4px}   /* 15 px floor on light, start-aligned, a 40 px tap target */
.review-link:hover{color:var(--hr-tomato-text)}
.badge{background:var(--hr-enamel-2);color:var(--hr-mute);border:1px solid var(--hr-line);border-radius:var(--hr-r-1);font-family:var(--hr-display);font-weight:700;font-size:13px;letter-spacing:0;text-transform:none;padding:3px 8px}   /* = .chip */
.listing.featured .badge{color:var(--hr-text);border-color:var(--hr-iron);background:var(--hr-enamel)}
.pos{color:var(--hr-mute);font-family:var(--hr-display);font-weight:600;letter-spacing:0;text-transform:none}
.listing-main h3{font-family:var(--hr-display);font-weight:800;font-size:28px;line-height:1.1;letter-spacing:-.02em;color:var(--hr-text);text-transform:none}
.rating-row{color:var(--hr-mute);font-family:var(--hr-display);font-weight:600;font-size:15px;letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}
.rating-row strong{color:var(--hr-text)}
.rating-row em{font-style:normal}
.stars .star{color:transparent;-webkit-text-stroke:1px var(--hr-iron)}
.stars .star.on{-webkit-text-stroke:0;color:var(--hr-iron)}                                   /* iron stars, never amber */
.score-box{border:1px solid var(--hr-line);border-radius:var(--hr-r-3);background:var(--hr-enamel-2)}
.score-num{font-family:var(--hr-display);font-weight:800;font-variant-numeric:proportional-nums lining-nums;background:var(--hr-enamel);color:var(--hr-iron);border:1.5px solid var(--hr-iron);border-radius:var(--hr-r-1);padding:0 10px;display:inline-block;line-height:1.3}   /* proportional: tabular figures give the decimal comma a full figure width ('9, 1') */   /* the code chip carries the score */
.listing.featured .score-num{background:var(--hr-enamel);border-color:var(--hr-iron);color:var(--hr-iron)}   /* tomato budget: one filled tomato per column (the rank chip on the rim and the button); the score chip stays outlined iron */
.score-word{font-family:var(--hr-display);font-weight:700;letter-spacing:0;text-transform:none;color:var(--hr-mute)}
.score-rows,.spec-rows{font-variant-numeric:tabular-nums}                                     /* dotted-leader readout rows, as the homepage contents */
.score-rows div{display:flex;align-items:baseline;gap:10px;min-height:28px}
.score-rows div::before{content:"";order:2;flex:1 1 16px;border-bottom:2px dotted var(--hr-line);transform:translateY(-4px)}
.score-rows dd{order:3;margin:0;font-family:var(--hr-display);font-weight:800}
.price-label{color:var(--hr-mute);font-family:var(--hr-display);font-weight:600;letter-spacing:0;text-transform:none;font-size:14px}
.price-now{color:var(--hr-text);font-family:var(--hr-display);font-weight:800;font-variant-numeric:tabular-nums}
.listing.featured .price-now{color:var(--hr-text)}
.price-was{color:var(--hr-mute);font-variant-numeric:tabular-nums;text-decoration:line-through}
.benefits li{color:var(--hr-text)}
.benefits .check{color:#fff;background:var(--hr-ok);border-radius:var(--hr-r-3);width:22px;height:22px;display:inline-grid;place-items:center;font-weight:800;flex:none}   /* the recipe-card tick box, green on guide pages (CHECKMARK LAW) */
.drawbacks li{color:var(--hr-mute)}
.drawbacks .cross{color:var(--hr-warn);background:var(--hr-warn-tint);border-radius:var(--hr-r-3);width:22px;height:22px;display:inline-grid;place-items:center;font-weight:800;flex:none}
.deal-box{border:1px solid var(--hr-line);background:var(--hr-tomato-tint);border-radius:var(--hr-r-3)}   /* the tint is the spec's deal-box ground; the rim is a rule, not a second tomato inside the tomato rim */
.deal-box strong{color:var(--hr-text);font-weight:700}
.deal-box span{color:var(--hr-text)}
.deal-box em{color:var(--hr-warn);font-style:normal;font-family:var(--hr-display);font-weight:700;font-size:15px;letter-spacing:0;text-transform:none}
/* the one button */
.cta,.btn{background:var(--hr-cta);color:var(--hr-cta-ink);border:2px solid var(--hr-cta);border-radius:var(--hr-r-1);font-family:var(--hr-display);font-weight:800;font-size:17px;letter-spacing:.01em;text-transform:none;min-height:48px;transition:background .15s,color .15s,border-color .15s;box-shadow:none;text-decoration:none}
.cta:hover,.btn:hover{background:var(--hr-cta-hover);border-color:var(--hr-cta-hover);color:var(--hr-on-iron)}
.listing.featured .cta,.final-offer .cta{background:var(--hr-cta);color:var(--hr-cta-ink)}  /* same button everywhere */
.listing.featured .cta:hover,.final-offer .cta:hover{background:var(--hr-iron);border-color:var(--hr-iron);color:var(--hr-on-iron)}
.side-note{color:var(--hr-mute);background:transparent;border:0;border-top:1px solid var(--hr-line);border-radius:0;padding:10px 0 0;text-align:start}   /* a plain ruled note: the 6 px tomato tape belongs to the recipe card, not to a one-line disclaimer under the button */
.tile{background:var(--hr-enamel);border:var(--hr-rim) solid var(--hr-iron);border-radius:var(--hr-r-2);box-shadow:none}
.tile .tile-ic{background:var(--hr-enamel);border:1.5px solid var(--hr-iron);color:var(--hr-iron);border-radius:var(--hr-r-3)}
.tile h3{font-family:var(--hr-display);font-weight:800;font-size:18px;letter-spacing:-.01em;text-transform:none;color:var(--hr-text)}
.tile p{color:var(--hr-mute)}
.long-review article h3{font-family:var(--hr-display);font-weight:700;font-size:22px;letter-spacing:-.01em;color:var(--hr-text)}
.long-review .intro p,.long-review article p{color:var(--hr-text)}
.review-break{background:var(--hr-enamel);border:var(--hr-rim) solid var(--hr-iron);border-radius:var(--hr-r-2)}
.review-break p{color:var(--hr-mute)}
.review-hero,.review-figure{border-color:var(--hr-line);border-radius:var(--hr-r-3)}
.review-hero.is-cropped,.review-figure.is-cropped{background:var(--hr-stone-2)}
.important{background:var(--hr-enamel);border:1px solid var(--hr-line);border-top:6px solid var(--hr-tomato);border-radius:var(--hr-r-3);position:relative}
.important::before{display:none}
.important strong{font-family:var(--hr-display);font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:13px;color:var(--hr-tomato-text)}
.important p{color:var(--hr-mute)}
.final-offer{border:var(--hr-rim) solid var(--hr-tomato);border-radius:var(--hr-r-2);background:var(--hr-enamel);box-shadow:none}
.final-offer h2{font-family:var(--hr-display);font-weight:800;letter-spacing:-.02em;color:var(--hr-text)}
.final-offer p{color:var(--hr-text)}
.trust{background:var(--hr-enamel);border:1px solid var(--hr-line);border-radius:var(--hr-r-2)}
.trust .avatar{display:none}                      /* brand byline law: the pantry label with the brand initial replaces the persona */
.trust .meet{color:var(--hr-mute);font-family:var(--hr-display);font-weight:700;letter-spacing:0;text-transform:none;font-size:14px}
.trust h3{font-family:var(--hr-display);font-weight:800;color:var(--hr-text)}
.trust p{color:var(--hr-mute)}
.brandlink{color:var(--hr-text);text-decoration-color:var(--hr-tomato);text-decoration-thickness:2px;text-underline-offset:3px}
.brandlink:hover{color:var(--hr-tomato-text)}
/* comparison tables = the ruled recipe card */
.article table{border:1px solid var(--hr-line);border-radius:var(--hr-r-3);border-collapse:separate;border-spacing:0;background:var(--hr-enamel);font-variant-numeric:tabular-nums}
.article th{background:var(--hr-iron);color:var(--hr-on-iron);font-family:var(--hr-display);font-weight:700;letter-spacing:.02em;text-transform:none;font-size:13px}
.article td{border-top:1px solid var(--hr-line);color:var(--hr-text)}
.article tr:nth-child(even) td{background:var(--hr-enamel-2)}
.article td:first-child{font-weight:700;font-family:var(--hr-display)}     /* the CRITERION / WHAT WE CHECK two-column look (Stainless graft) */
.article .table-wrap{overflow-x:auto}
@media(max-width:640px){.article .table-wrap th:first-child,.article .table-wrap td:first-child{position:sticky;inset-inline-start:0;background:inherit}}
[lang=he] :is(.hero h1,.flow-h,.listing-main h3,.badge,.cta,.winner-banner,.sitebar .adv,.important strong,.rating-row,.price-label){letter-spacing:0}
/* caps and small labels never below 13 px (the 12 px floor is for code chips only); running text keeps its full measure (PL_FULL_MEASURE_V1) */
.pos,.score-word{font-size:14px}
.side-note{font-size:15px;line-height:1.45}
.opener p,.long-review .intro p,.long-review article p{max-width:none}
@media(max-width:640px){.badge,.prod-img.placeholder span{font-size:13px}.pos,.price-label,.score-word,.trust .meet{font-size:14px}.side-note,.deal-box em,.deal-box span,.rating-row,.review-link{font-size:15px}.listing,.tile,.review-break{border-radius:var(--hr-r-2)}}

/* ---- 4b. guide details (the PL_SKIN_V4 mechanics on the HR components): rank chip on the rim, sticky columns, SVG stars, tick tiles, offer column ---- */
.listing{padding:28px 20px 20px;margin:0 0 32px}   /* the rank chip rises 20 px out of the tray: the stack gap keeps it off the rim above */
@media(min-width:1024px){.listing-side{flex:0 0 224px;position:sticky;top:calc(var(--hr-rail) + 16px)}.listing-media{position:sticky;top:calc(var(--hr-rail) + 16px)}
  .listing.featured:not(.repeat) .benefits:has(> li:nth-child(8)){columns:2;column-gap:28px}
  .listing.featured:not(.repeat) .benefits:has(> li:nth-child(8)) li{break-inside:avoid;page-break-inside:avoid}}
.badge-row{flex-wrap:wrap;gap:6px 10px;align-items:center;margin-bottom:8px}
.badge{flex:0 1 auto;max-width:100%;line-height:1.25;white-space:normal;text-wrap:balance}   /* text-wrap:initial cancelled the nowrap in Chrome: a long badge now wraps evenly inside its chip instead of overflowing */
.pos{flex:1 1 auto;min-width:0;line-height:1.3}
.listing.featured .pos{display:none}
.listing-main h3{margin:2px 0 10px}
.rating-row{gap:8px 10px;align-items:center;margin-bottom:12px}
.rating-row em{display:none}   /* the rating hedge duplicates the score box and the label; HR_GUIDE_VISUAL_V1 drops it from the markup */
.stars{display:inline-flex;gap:2px;align-items:center;font-family:var(--hr-text-face);letter-spacing:0;text-transform:none;line-height:1}
.stars .star{display:inline-block;width:15px;height:15px;font-size:0;line-height:0;color:transparent;-webkit-text-stroke:0;background:var(--hr-i-star-o) center/15px 15px no-repeat}
.stars .star.on{background-image:var(--hr-i-star)}
.score-box .stars{display:none}
.price-block{gap:10px;align-items:baseline;flex-wrap:wrap;margin:0 0 14px}
.price-now{font-size:24px;line-height:1}
.price-was{font-size:15px}
/* pros and cons: one list, one size; list rows are blocks with the tile in the start gutter (an inline .nb inside a flex row would become its own item) */
.benefits li,.drawbacks li{font-size:16px;line-height:1.5;margin:0 0 8px;gap:10px;text-wrap:pretty;display:block;position:relative;padding-inline-start:32px;min-width:0}
.benefits .check,.drawbacks .cross{position:absolute;inset-inline-start:0;top:1px;margin:0;display:block;flex:none;width:22px;height:22px;font-size:0;line-height:0;color:transparent}
.benefits .check{background:var(--hr-ok) var(--hr-i-tick) center/20px 20px no-repeat}
.drawbacks .cross{background:var(--hr-warn-tint) var(--hr-i-cross) center/20px 20px no-repeat}
.benefits li .nb,.drawbacks li .nb,.rating-row em .nb,.deal-box .nb{display:inline}
/* deal box: iron price line, mute date and terms in body type; warn red only for the short status chip */
.deal-box{gap:6px;padding:12px 14px;margin:14px 0 4px}
.deal-box strong{font-size:15px;line-height:1.4;text-wrap:pretty}
.deal-box span{font-size:15px;font-weight:400;color:var(--hr-mute)}
.deal-box em{font-family:var(--hr-text-face);font-weight:400;font-size:15px;line-height:1.5;letter-spacing:0;text-transform:none;color:var(--hr-mute);text-wrap:pretty}
.deal-box em b,.deal-box .status{font-family:var(--hr-display);font-weight:700;font-size:15px;letter-spacing:0;text-transform:none;color:var(--hr-warn);margin-inline-end:6px}
.deal-box bdi{white-space:nowrap}
/* offer column: score chip, the one button (never wraps its chevron), the small recipe card note */
.listing-side{gap:12px}
.score-box{padding:12px 10px 10px;gap:4px}
.score-num{font-size:36px;line-height:1.25;padding:0 12px}
.cta,.btn{line-height:1.2}
.listing-side .cta{font-size:15px;letter-spacing:.01em;padding:12px 8px;text-wrap:balance;hyphens:manual;overflow-wrap:normal;display:block;text-align:center}
.cta .flip,.btn .flip{display:inline-block;margin-inline-start:.3em}
[dir=rtl] .cta .flip,[dir=rtl] .btn .flip{transform:none}   /* U+203A is bidi-mirrored inside the RTL run already (PL_SKIN_V4_12) */
:is([lang=sv],[lang=fi],[lang=hu],[lang=el],[lang=nl],[lang=de],[lang=da],[lang=it],[lang=pt],[lang=ro],[lang=pl],[lang=cs],[lang=sk],[lang=sl],[lang=hr],[lang=lv],[lang=et],[lang=bg]) .listing-side .cta{font-size:14px;letter-spacing:0;padding-inline:6px}   /* the long-label editions keep the rank-1 button on one line, the height of the four Amazon buttons */
.final-offer .cta{font-size:16px;letter-spacing:.01em;padding:12px 16px}
/* winner strip = the pantry label attached to the recap tray: the filled tomato chip "1" at the inline start, text start-aligned */
.winner-banner{display:block;text-align:start;font-size:15px;line-height:1.3;padding:8px 10px;margin:36px 0 0;border-radius:var(--hr-r-2) var(--hr-r-2) 0 0;border-bottom:0}   /* block: the strip carries <b>brand</b> in some languages and flex would eat the spaces around it */
.winner-banner::before{content:"1";display:inline-grid;place-items:center;vertical-align:-9px;margin-inline-end:12px;width:28px;height:28px;background:var(--hr-tomato);color:#fff;border-radius:var(--hr-r-1);font-weight:800;font-size:15px;letter-spacing:0;font-variant-numeric:tabular-nums}
.listing.repeat{margin-top:0;border-start-start-radius:0;border-start-end-radius:0}
.listing.repeat .listing-rank,.listing.repeat .benefits li:nth-child(n+4),.listing.repeat .drawbacks,.listing.repeat .deal-box,.listing.repeat .review-link,.listing.repeat .rating-row em{display:none}
/* value tiles: start-aligned trays, outlined icon box and title on one row, 16 px copy */
.tiles{gap:16px;margin:32px 0 8px}
.tile{display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:14px;align-items:center;text-align:start;padding:18px}
.tile .tile-ic{margin:0;width:46px;height:46px;grid-column:1;grid-row:1}
.tile h3{grid-column:2;grid-row:1;margin:0;font-size:18px;line-height:1.25;text-wrap:balance}
.tile p{grid-column:1/-1;margin:12px 0 0;font-size:16px;line-height:1.5;color:var(--hr-mute);text-wrap:pretty}
/* one body size on the page: 18/1.55 for the opener and the review; 16/1.55 for boxes */
.opener p{font-size:18px;line-height:1.55}
.long-review .intro p,.long-review article p{font-size:18px;line-height:1.55;margin:0 0 16px}
.long-review article h3{line-height:1.15;margin:28px 0 12px}
.review-hero,.review-figure{background:var(--hr-stone-2)}
.important p,.final-offer p{font-size:16px;line-height:1.55;text-wrap:pretty}
.final-offer h2{font-size:24px;line-height:1.1;margin-bottom:8px}
/* FAQ: each question is a tray row */
.faq{margin:32px 0 8px}
.faq details{background:var(--hr-enamel);border:var(--hr-rim) solid var(--hr-iron);border-radius:var(--hr-r-2);padding:0 20px;margin:0 0 10px}
.faq details:last-of-type{border-bottom:var(--hr-rim) solid var(--hr-iron)}
.faq summary{list-style:none;cursor:pointer;display:block;position:relative;min-height:56px;padding:16px 0;padding-inline-end:34px;font-family:var(--hr-display);font-weight:700;font-size:18px;line-height:1.25;color:var(--hr-text)}   /* block, not flex: a question carrying <span class=nb> or <bdi class=money> became one 628 px flex row on he */
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;inset-inline-end:2px;top:24px;width:13px;height:13px;border:0;border-right:2px solid var(--hr-iron);border-bottom:2px solid var(--hr-iron);transform:rotate(45deg) translateY(-3px);transition:transform .15s;border-radius:0;display:block}   /* physical borders: the chevron glyph is not mirrored, so it points down closed and up open in he too */
.faq details[open]{border-color:var(--hr-tomato)}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.faq details > :not(summary){padding:0 0 20px;margin:0;font-size:18px;line-height:1.55;color:var(--hr-text)}
.faq details p{font-size:18px;color:var(--hr-text);padding-bottom:20px}
/* Hebrew: heading tracking 0, and no uppercase transform on labels (Latin brand tokens inside Hebrew must not shout) */
[lang=he] :is(.hero h1,.flow-h,.long-review h2,.listing-main h3,.long-review article h3,.final-offer h2,.faq summary){letter-spacing:0}
[lang=he] :is(.badge,.pos,.winner-banner,.rating-row,.deal-box em b,.deal-box .status,.price-label,.score-word,.tile h3,.important strong,.sitebar .adv,.hero .verify,.cta,.btn,.article th,.prod-img.placeholder span,.trust .meet,.hero .plate,.hero .plate .sec){text-transform:none;letter-spacing:.02em}
/* phones and tablets under 900: the spec phone card, a 104 px thumbnail at the inline start beside chip, name, rating and price; lists and boxes below at full width */
@media(max-width:899px){
  .listing{padding:28px 16px 16px}
  .listing-rank{inset-inline-start:16px}
  .listing-cols{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:14px;row-gap:0;align-items:start}
  .listing-cols::after{display:none}
  .listing-media{float:none;width:auto;margin:0;grid-column:1;grid-row:1/span 4;align-self:start;position:static}
  .listing-media .prod-img{width:104px;padding:5px}
  .review-link{font-size:15px;line-height:1.25;margin-top:8px;text-wrap:balance}
  .listing-main{display:contents;min-width:0}
  .listing-main > :is(.badge-row,h3,.rating-row,.price-block){grid-column:2;min-width:0}
  .listing-main > :is(.benefits,.drawbacks,.deal-box){grid-column:1/-1;clear:none}
  .listing-main > .benefits{margin-top:6px}
  .listing-main h3{font-size:22px;line-height:1.12;margin:2px 0 8px}
  .price-block{column-gap:8px;row-gap:2px}
  .price-now{font-size:22px}
  .price-was{white-space:nowrap}
  .badge-row{gap:6px 8px}
  .rating-row{margin-bottom:10px}
  .listing-side{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:10px;align-items:stretch;width:100%;grid-column:1/-1;clear:none;margin-top:14px;position:static}
  .score-box{grid-column:1;grid-row:1;padding:6px 10px;gap:2px;justify-content:center;min-width:96px}
  .score-num{font-size:24px;line-height:1.3;padding:0 8px}
  .listing-side .cta{grid-column:2;grid-row:1;display:block;text-align:center;padding:14px 10px}   /* block, not flex: the chevron stays in the text run with its NBSP instead of floating to the far edge */
  .side-note{grid-column:1/-1}
  .final-offer{display:grid;grid-template-columns:112px minmax(0,1fr);column-gap:14px;row-gap:10px;align-items:start;text-align:start;padding:18px 16px}   /* the phone card pattern, never a float runaround */
  .final-offer::after{display:none}
  .final-offer .prod-img{float:none;width:auto;margin:0;grid-column:1;grid-row:1;align-self:start}
  .final-offer > div{display:contents}
  .final-offer h2,.final-offer h3.name{grid-column:2;grid-row:1;align-self:center;margin:0}
  .final-offer p{grid-column:1/-1;margin:0}
  .final-offer .cta{display:block;grid-column:1/-1;margin-top:0}
  .long-review article h3{text-wrap:pretty}
  .tile{padding:16px}
}

/* ---- 4c. the guide module's own chrome (data/msads-pl-guide-normalise.mjs): masthead language chip, the sticky three-direction strip
   (= the homepage rail), the criteria block, the FAQ, the four-column iron footer; the homepage's own values (hr-sitegen.py CSS_CORE) ---- */
body{background:linear-gradient(to top,var(--hr-iron) 0 var(--ctr-pad,0px),var(--hr-stone) var(--ctr-pad,0px))}   /* the consent reserve (consent.js sets --ctr-pad only while the bar is up): the iron board continues to the page end, never a pale band under the footer */
.langsel{position:relative;flex:none}
.langsel summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 12px;border:2px solid var(--hr-iron);border-radius:var(--hr-r-1);background:var(--hr-enamel);color:var(--hr-text);font-family:var(--hr-display);font-weight:700;font-size:14px;letter-spacing:.02em;text-transform:none;line-height:1;white-space:nowrap}
.langsel summary::-webkit-details-marker{display:none}
.langsel .ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.langsel .ico.chev{width:16px;height:16px;transition:transform .15s}
.langsel[open] summary{background:var(--hr-iron);color:var(--hr-on-iron)}
.langsel[open] summary .chev{transform:rotate(180deg)}
.langmenu{position:absolute;inset-inline-end:0;top:calc(100% + 8px);z-index:50;background:var(--hr-enamel);border:var(--hr-rim) solid var(--hr-iron);border-radius:var(--hr-r-2);padding:10px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;inline-size:min(560px,calc(100vw - 32px));box-shadow:var(--hr-shadow)}
.langmenu a{text-decoration:none;color:var(--hr-text);font-size:16px;font-weight:400;min-height:40px;padding:6px 10px;border-radius:var(--hr-r-3);display:flex;align-items:center;gap:10px;white-space:nowrap;line-height:1.2}
.langmenu a:hover{background:var(--hr-stone)}
.langmenu a.cur{background:var(--hr-iron);color:var(--hr-on-iron);font-weight:700}
.langmenu a .cc{font-family:var(--hr-display);font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--hr-mute);min-width:22px}
.langmenu a.cur .cc{color:var(--hr-tomato-lit)}
/* the sticky three-direction strip = the shelf edge */
.strip,.sitebar + .strip{position:sticky;top:0;z-index:30;background:var(--hr-enamel);color:var(--hr-text);border-top:1px solid var(--hr-line);border-bottom:var(--hr-rim) solid var(--hr-iron);border-block-end:var(--hr-rim) solid var(--hr-iron);min-height:44px}
.strip .wrap{display:flex;align-items:center;gap:8px;min-height:var(--hr-rail);overflow-x:auto;scrollbar-width:none;padding-top:0;padding-bottom:0;scroll-padding-inline:var(--hr-gutter)}
.strip .wrap::-webkit-scrollbar{display:none}
.strip a{flex:none;display:inline-flex;align-items:center;gap:8px;color:var(--hr-text);font-family:var(--hr-display);font-weight:700;font-size:14px;letter-spacing:0;text-transform:none;text-decoration:none;white-space:nowrap;min-height:44px;padding:0 10px;border-bottom:3px solid transparent;border-block-end:3px solid transparent;margin-block-end:-1.5px}
.strip a:hover,.strip a.on,.strip a[aria-current]{border-color:var(--hr-tomato)}
.strip a .l,.strip .l{flex:none;display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 5px;background:var(--hr-enamel-2);color:var(--hr-mute);border:1px solid var(--hr-line);border-radius:var(--hr-r-1);font-family:var(--hr-display);font-weight:700;font-size:12px;letter-spacing:.04em;line-height:1;unicode-bidi:isolate;direction:ltr}   /* the three-direction letter chips (= .code.rng) */
.strip a.on .l{background:var(--hr-enamel);color:var(--hr-iron);border:1.5px solid var(--hr-iron);font-weight:800}
.strip .code{border-color:var(--hr-line);color:var(--hr-mute);background:var(--hr-enamel-2)}
.strip .upd{margin-inline-start:auto;flex:none;font-family:var(--hr-text-face);font-weight:400;font-size:14px;letter-spacing:0;text-transform:none;color:var(--hr-mute);white-space:nowrap;padding-inline-start:12px}
/* every pain-point line is a ticked item: one list, one size, then the lead paragraph */
.opener p.q{margin:0 0 10px}
.opener p.q::before{top:.05em}
.opener p.q + p:not(.q){margin-top:18px}
/* criteria block: outlined iron numerals on tray rows */
.criteria{margin:32px 0 8px}
.crit-list{list-style:none;margin:0;padding:0;counter-reset:hr-crit;display:grid;gap:10px}
.crit-list li{counter-increment:hr-crit;position:relative;padding:14px 16px;padding-inline-start:64px;background:var(--hr-enamel);border:var(--hr-rim) solid var(--hr-iron);border-radius:var(--hr-r-2);font-size:16px;line-height:1.5;color:var(--hr-text);text-wrap:pretty}   /* logical padding: the gutter is at the inline start in he too */
.crit-list li::before{content:counter(hr-crit,decimal-leading-zero);position:absolute;inset-inline-start:14px;top:13px;box-sizing:border-box;min-width:36px;height:28px;padding:0 4px;display:inline-grid;place-items:center;background:var(--hr-enamel);color:var(--hr-tomato-text);border:1.5px solid var(--hr-iron);border-radius:var(--hr-r-1);font-family:var(--hr-display);font-weight:800;font-size:14px;font-variant-numeric:tabular-nums;letter-spacing:.02em;unicode-bidi:isolate}   /* the prep numerals 01..05: border-box so the 36 px chip clears the 64 px text start; no direction:ltr, which sent the chip to the left in he */
.crit-list li b{font-weight:700;font-family:var(--hr-display)}
/* footer: the homepage's four-column iron board, the brand lockup (mark + Home/Noted halves), publisher block, Company and Languages rows, copyright row */
.foot .foot-cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr);gap:40px 24px}
.foot .brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;color:var(--hr-on-iron);font-family:var(--hr-display);font-weight:800;font-size:22px;letter-spacing:-.02em;line-height:1;white-space:nowrap;direction:ltr}
.foot .brand .mark,.foot .foot-brand img.mark{width:34px;height:34px;flex:none;display:block}
.foot .foot-brand .r,.foot .brand .r{font-weight:500;color:var(--hr-on-iron)}
.foot .brand .and{font-weight:500;color:var(--hr-on-iron-2)}
.foot .note{margin:24px 0 0;max-width:48ch;text-wrap:pretty;font-size:14px;line-height:1.5}
.foot .note a{color:var(--hr-on-iron);text-decoration:underline;text-decoration-color:var(--hr-tomato-lit);text-decoration-thickness:2px;text-underline-offset:3px}
.foot .note a:hover,.foot .note a:focus-visible{color:var(--hr-tomato-lit);text-decoration-color:var(--hr-on-iron)}
.foot .pub{margin:16px 0 0;line-height:1.5;font-size:14px;max-width:36ch}
.foot .pub b{color:var(--hr-on-iron);font-weight:700}
.foot .pub a{color:var(--hr-on-iron);text-decoration:none;display:inline-flex;align-items:center;min-height:40px}
.foot .h{font-family:var(--hr-display);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--hr-on-iron);margin:0 0 12px;min-height:22px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}   /* min-height: a chip-less head (Company) kept its column 2 px above the chipped ones */
.foot .h .l{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 5px;border:1px solid var(--hr-iron-line);border-radius:3px;background:transparent;color:var(--hr-on-iron-2);font-family:var(--hr-display);font-weight:700;font-size:12px;letter-spacing:.04em;line-height:1;unicode-bidi:isolate;direction:ltr}   /* the footer column letter chip (= the homepage .fc) */
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.foot ul li{padding-block:0}
.foot ul a{color:var(--hr-on-iron);text-decoration:none;display:inline-flex;align-items:center;min-height:40px;padding-block:2px;overflow-wrap:break-word;max-width:100%}   /* break-word, not anywhere: a guide label broke mid-word ('Soap dispense/rs') in the two-column phone footer; a word still breaks when it alone exceeds the column */
.foot ul a:hover{text-decoration:underline;text-decoration-color:var(--hr-tomato-lit);text-decoration-thickness:2px;text-underline-offset:4px}
.foot ul a.cur{color:var(--hr-tomato-lit);font-weight:700}
:is([lang=de],[lang=fi],[lang=hu],[lang=nl],[lang=sv],[lang=da],[lang=et],[lang=el],[lang=bg]) .foot ul a{hyphens:auto;hyphenate-limit-chars:10 4 4}
.foot .langs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
.foot .copy{margin-top:40px;padding-top:24px;border-top:1px solid var(--hr-iron-line);display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center;font-size:14px}
.foot .copy .foot-nav{margin:0;display:flex;flex-wrap:wrap;gap:4px 16px}
.foot .copy .co{color:var(--hr-on-iron-2)}
[lang=he] :is(.strip a,.strip .upd,.langsel summary,.foot .h){letter-spacing:.02em;text-transform:none}
@media(max-width:1023px){.foot .foot-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px}.foot .foot-brand{grid-column:1/-1}}
@media(max-width:899px){
  .strip .upd{display:none}
  .strip .wrap{padding-inline-end:calc(var(--hr-gutter) + 24px);scroll-padding-inline-end:44px}
  .strip::after{content:"";position:absolute;inset-inline-end:0;top:0;height:100%;width:40px;background:var(--hr-fade);pointer-events:none;z-index:1}   /* the fade belongs on the sticky bar, at the true inline end: a sticky pseudo inside the scroller is pinned to its content box and bleached a word 56 px inboard */
}
@media(max-width:640px){
  .foot{padding:40px 0 24px}
  .foot .foot-cols{grid-template-columns:1fr 1fr;gap:24px 16px}
  .foot .foot-brand{grid-column:1/-1}
  .foot ul a{font-size:15px}
  .foot .copy .foot-nav{flex:1 1 100%;justify-content:flex-start}
  .sitebar .wrap{gap:8px}
  .langsel{position:static}
  .langsel summary{padding:6px 8px}
  .langsel summary .lbl{display:none}
  .langmenu{position:fixed;inset-inline:12px;top:66px;inline-size:auto;max-height:calc(100vh - 80px);overflow:auto;grid-template-columns:repeat(2,minmax(0,1fr))}
  .strip .wrap{gap:4px}
  .strip a{padding:0 8px}
  .crit-list li{padding:12px;padding-inline-start:60px}
  .crit-list li::before{inset-inline-start:10px;top:11px}
  .strip a .l,.strip .l,.strip .code.rng{display:none}   /* the homepage hides the range chips under 640 so the five rail labels nearly fit */
  .foot-nav{display:flex;flex-wrap:wrap;gap:0 16px}
}


/* ---- 4c-2. HR_GUIDE_SKIN_V2 (2026-09-11 visual-fix round): the guide fixes from the 13 visual QA audits.
   Every rule is written for BOTH the markup that is live while this lands and the markup HR_GUIDE_VISUAL_V1 emits
   (plate .sec/.code/.cat, rail .ico + .code.rng, footer .cols4 + .company + .readin + .legal, final offer h3.name),
   so the skin is right before and after the guide redeploy. Offsets stay logical: the he edition mirrors with them. ---- */
/* the hero composition sits in the enamel tray of DESIGN-SPEC 10.1 (the template's own .art.art-photo rule has the
   same weight and is beaten on order, the skin loading after the template CSS) */
.hero .art.art-photo{background:var(--hr-enamel);border:var(--hr-rim) solid var(--hr-enamel);border-radius:var(--hr-r-2);padding:12px;box-shadow:none;max-width:400px;box-sizing:border-box}
.hero .art.art-photo img{border-radius:var(--hr-r-3);display:block}
.hero .art.art-photo picture{display:block;width:100%;height:100%}
/* the pantry label wraps on phones instead of ellipsising the category it names */
@media(max-width:640px){.hero .plate{flex-wrap:wrap;row-gap:2px}
  .hero .plate .seg,.hero .plate .cat{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.2}}
/* the three-direction rail, new markup: the inline pictogram and the range chip (= the homepage rail) */
.strip a .ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--hr-mute)}
.strip .code.rng{flex:none;display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 6px;background:var(--hr-enamel-2);color:var(--hr-mute);border:1px solid var(--hr-line);border-radius:var(--hr-r-1);font-family:var(--hr-display);font-weight:700;font-size:12px;letter-spacing:.04em;line-height:1;unicode-bidi:isolate;direction:ltr}
/* display type: a product name is never hyphenated by a dictionary, and the long-word languages break later */
.listing-main h3,.final-offer h2,.final-offer h3,.tile h3,.winner-banner,.badge{hyphens:manual}
.hero h1,.flow-h,.long-review h2,.long-review article h3{hyphenate-limit-chars:14 6 6}
.hero h1,.long-review h2{text-wrap:pretty}   /* balance left an 11-character second line in a four-line headline */

/* display headings are never broken by a dictionary where there is room for the word: the size step is the job, not the hyphen
   (phones keep hyphens:auto with the strict limits above, so a long compound still fits a 358 px column) */
@media(min-width:1000px){.hero h1,.flow-h,.long-review h2,.long-review article h3{hyphens:manual}}
.faq summary{text-wrap:pretty}
/* value tiles: the header row is level across the row and the spare height stays at the foot of the tray */
.tile{align-content:start}
.tile h3{min-height:46px;display:flex;align-items:center}
/* the ranked stack: the rank chip rises 20 px out of the tray, so the heading above keeps its room */
section[data-top5-module=rankedStack] > .flow-h{margin-bottom:36px}
/* the winner strip and the recap tray under it share one rim */
.winner-banner{border:var(--hr-rim) solid var(--hr-tomato);border-bottom:0}
/* the seven-benefit winner tray reads in two columns on the worktop instead of leaving its offer column empty */
@media(min-width:1024px){.listing.featured:not(.repeat) .benefits:has(> li:nth-child(7)){columns:2;column-gap:28px}
  .listing.featured:not(.repeat) .benefits:has(> li:nth-child(7)) li{break-inside:avoid;page-break-inside:avoid}}
/* the long-review figures are capped by measure, never cropped (PL_FULL_MEASURE_V1 is about running text) */
@media(min-width:1000px){.review-hero,.review-figure{max-width:780px;margin-inline:auto}}
/* the criteria definition after the bold label */
.crit-list .cd{color:var(--hr-text)}
/* the final offer names the winner in an h3 on HR: it carries the h2 rules */
.final-offer h3.name{font-family:var(--hr-display);font-weight:800;font-size:24px;line-height:1.1;letter-spacing:-.02em;color:var(--hr-text);margin:0 0 8px;text-wrap:balance}
[lang=he] .final-offer h3.name{letter-spacing:0}
/* every price and money echo is its own bidi atom (a Latin currency word must not scramble a Hebrew line) */
.money,.price-now,.price-was,.deal-box bdi{unicode-bidi:isolate}
/* the footer board: four columns, then the Company row and the Read-in row (DESIGN-SPEC section 4, the homepage values) */
.foot .foot-cols.cols4{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr))}
/* cols4 outranks the generic tablet/phone tracks below, so it carries its own steps: four 60 px columns at 390 px
   broke a guide label to one character per line ('Win/e/aera/tors') */
@media(max-width:1023px){.foot .foot-cols.cols4{grid-template-columns:repeat(3,minmax(0,1fr))}.foot .foot-cols.cols4 .fcol.first{grid-column:1/-1}}
@media(max-width:640px){.foot .foot-cols.cols4{grid-template-columns:1fr 1fr;gap:24px 16px}.foot .foot-cols.cols4 .fcol.first{grid-column:1/-1}}
.foot .h .ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--hr-on-iron-2)}
.foot .fcol li a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 8px;align-items:center;min-height:40px;padding-block:2px}
.foot .fc{flex:none;display:inline-grid;place-items:center;min-width:32px;height:22px;padding:0 5px;border:1px solid var(--hr-iron-line);border-radius:3px;background:transparent;font-family:var(--hr-display);font-weight:700;font-size:12px;letter-spacing:.04em;line-height:1;color:var(--hr-on-iron-2);font-variant-numeric:tabular-nums;unicode-bidi:isolate;direction:ltr}
.foot .fcol li a:hover .fc{border-color:var(--hr-tomato-lit);color:var(--hr-tomato-lit)}
.foot .company{margin-top:var(--hr-s-6);padding-top:var(--hr-s-4);border-top:1px solid var(--hr-iron-line);display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.foot .readin{margin-top:var(--hr-s-3);display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px}
.foot .company .h,.foot .readin .h{margin:0;margin-inline-end:12px;min-height:0}
/* every link on the iron board is on-iron: the Company and Read-in rows of the new footer are bare anchors and fell back
   to the guide template's dark link colour, which read as disabled text on the board */
.foot a{color:var(--hr-on-iron)}
.foot .company a,.foot .readin a{display:inline-flex;align-items:center;min-height:40px;padding:4px 8px;border-radius:var(--hr-r-1);color:var(--hr-on-iron);text-decoration:none;overflow-wrap:normal;hyphens:manual;white-space:nowrap}
.foot .company a:hover,.foot .readin a:hover{color:var(--hr-tomato-lit);text-decoration:underline;text-decoration-color:var(--hr-tomato-lit);text-decoration-thickness:2px;text-underline-offset:4px}
.foot .legal .note a{color:var(--hr-on-iron);text-decoration:underline;text-decoration-color:var(--hr-tomato-lit);text-decoration-thickness:2px;text-underline-offset:3px}
.foot .readin a.cur{color:var(--hr-tomato-lit);font-weight:700}
.foot .legal{margin-top:var(--hr-s-5);padding-top:var(--hr-s-5);border-top:1px solid var(--hr-iron-line);display:grid;gap:var(--hr-s-4)}
.foot .legal .note{margin:0;max-width:100ch;font-size:14px}
.foot .legal .copy{margin-top:0;padding-top:var(--hr-s-4)}
.foot .legal .legal-line{overflow-wrap:normal;hyphens:manual}
/* until HR_GUIDE_VISUAL_V1 lands the footer still carries a sixth Languages column: it reads as the Read-in row,
   one full-width row of nowrap names (Rubik broke 'Slovenščina' mid-word in an 85 px sub-column on he) */
.foot .foot-cols:has(.langs){grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr))}
.foot .foot-cols > div:has(.langs){grid-column:1/-1;margin-top:8px}
.foot .langs{display:flex;flex-wrap:wrap;grid-template-columns:none;gap:2px 4px}
.foot .langs li{flex:none}
.foot .langs a{white-space:nowrap;overflow-wrap:normal;hyphens:manual;padding:4px 8px;border-radius:var(--hr-r-1);min-height:40px;max-width:none}
@media(max-width:899px){
  .listing-media .prod-img{padding:6px}
}
@media(max-width:640px){
  .foot .company,.foot .readin{margin-inline:-8px}
  .foot .company .h,.foot .readin .h{margin-inline-start:8px}
  .foot .foot-cols > div:has(.langs){grid-column:1/-1}
  .foot .copy .foot-nav{gap:0 20px}
  .foot .copy .foot-nav a{font-size:14px}
  .opener p.q{font-size:18px}
}
@media(max-width:640px){.strip a .l,.strip .l,.strip .code.rng{display:none}}   /* the range chips are defined later in this block than the 4c phone rule, so the hide belongs here (the homepage hides them under 640 too) */
@media(max-width:400px){.listing-main h3{font-size:20px}}
/* he sets wider in Rubik: one step down keeps the price and the struck was-price on one phone line */
@media(max-width:899px){[lang=he] .price-now{font-size:20px}[lang=he] .listing-side .cta{font-size:14px}}
/* ---- 5. presale (review) pages (DESIGN-SPEC 10.3, the sister-skin section 5 structure on the HR components) ----
   Written against the template classes in data/msads-top5-presale-page.mjs and the normaliser output classes (.p-trust .p-code .p-lead
   .p-step .p-verified .p-tick .p-cross .p-feat .p-kicker .p-features .p-ticks .p-crosses .p-offer-slot .p-comment). Cascade: the skin link follows
   the template <style> and the per-doc pack <style> (alc-* / cf-*), so equal-specificity rules here win. Logical properties only (he is RTL).
   Running text keeps the full column (PL_FULL_MEASURE_V1). Trays, chips, the one tomato button, iron table heads, ok-green ticks, warn crosses. */
.presale-article{background:var(--hr-stone)}
body[data-top5-presale-brand] .sitebar{position:static}
.presale-body{color:var(--hr-text);font-family:var(--hr-text-face);font-size:18px;line-height:1.55;overflow-wrap:anywhere;counter-reset:hr-row}
/* 5.1 type scale: one body size (18/1.55) on every viewport, Manrope 800 headings, 13 px caps floor */
.presale-body p,.presale-body li{color:var(--hr-text);font-size:18px;line-height:1.55}
.presale-body p{margin:0 0 16px}
.presale-body li{margin:0 0 8px}
.presale-body b,.presale-body strong{color:var(--hr-text);font-weight:700}
.presale-body s,.presale-body del{color:var(--hr-mute)}
.presale-body em,.presale-body i{font-style:normal}
.presale-body :is(p,li,td) :is(em,i):not(:is(b,strong) *):not(:is(b,strong)){font-weight:600}
.presale-body .p-hl{background:linear-gradient(180deg,transparent 60%,var(--hr-tomato-tint) 60%);padding:0;border-radius:0}   /* the only tint under text: a highlighter */
.presale-body h1,.presale-body h2,.presale-body h3,.presale-body h4,.presale-body h5{font-family:var(--hr-display);font-weight:800;color:var(--hr-text);letter-spacing:-.02em;text-wrap:balance;hyphens:manual}
.presale-body h1{font-weight:800;text-transform:none;line-height:1.02;letter-spacing:-.02em;font-size:clamp(2.125rem,4.2vw,3.5rem);margin:8px 0 18px}
:is([lang=de],[lang=fi],[lang=hu],[lang=nl],[lang=el]) .presale-body h1{font-size:clamp(1.75rem,3.6vw,3rem)}
.presale-body h2{font-size:clamp(28px,2.4vw,32px);line-height:1.1;padding-inline-start:0;position:relative;margin:40px 0 16px}
.presale-body h2::before{display:none}
.presale-body h2:first-child,.presale-body div:first-child>h2{margin-top:40px}
.presale-body h1+h2,.presale-body .p-meta+h2{margin-top:24px}
.presale-body h3{font-size:22px;line-height:1.15;margin:28px 0 10px}
.presale-body h2+h3{margin-top:20px}
.presale-body h4{font-size:22px;line-height:1.15;margin:28px 0 10px}
.presale-body h5{font-size:19px;line-height:1.2;margin:22px 0 8px}
.presale-body h6,.presale-body .p-kicker{font-family:var(--hr-display);font-weight:800;font-size:13px;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;color:var(--hr-tomato-text);margin:26px 0 6px}   /* the kicker */
.presale-body h6+div>div>p:only-child{display:inline;margin:0}
.presale-body h6+div>div{margin:0 0 8px}
[lang=he] .presale-body :is(h1,h2,h3,h4,h6){letter-spacing:0}
[lang=he] .presale-body :is(h1,h2,h3,h4,h5){text-wrap:pretty}   /* no balanced early break after a prefix hyphen (ה-Zealix) */
[lang=he] .presale-body h1{line-height:1.1;text-transform:none}
/* 5.2 the dek: only the true lead (after h1 / meta / hero figure) */
.presale-body img:first-of-type+p,.presale-body img:first-of-type+div{font-size:inherit;line-height:inherit;color:var(--hr-text);font-weight:400}
.presale-body .p-lead,.presale-body h1:not(:is(h1,h2,h3,h4,img,.p-meta) ~ h1):not(:is(h1,h2,h3,h4,img,.p-meta) ~ * h1)+p,.presale-body .p-meta+h4,.presale-body .p-meta+div>img:first-child+div>p,.presale-body .p-meta+div>div:first-child>img:first-child+div>p{font-family:var(--hr-text-face);font-size:21px;line-height:1.45;color:var(--hr-mute);font-weight:400;font-style:normal;letter-spacing:0;text-transform:none;text-wrap:pretty;margin:0 0 18px}
.presale-body :is(.p-lead,h1+p,.p-meta+h4,.p-meta+div>img:first-child+div>p,.p-meta+div>div:first-child>img:first-child+div>p) :is(b,strong,a){color:inherit;font-weight:600;font-style:normal}
.presale-body :is(.p-lead,h1+p,.p-meta+h4,.p-meta+div>img:first-child+div>p,.p-meta+div>div:first-child>img:first-child+div>p) :is(em,i){color:inherit;font-weight:inherit;font-style:normal}   /* a dek carries no emphasis: the doc wraps the whole lead in <i> */
.presale-body :is(.p-meta+div,.p-meta+script+div)>blockquote:first-child:not(.p-pull){border:0;background:transparent;border-radius:0;padding:0;margin:0 0 18px;font-family:var(--hr-text-face);font-size:21px;line-height:1.45;color:var(--hr-mute);font-weight:400;quotes:none}
.presale-body :is(.p-meta+div,.p-meta+script+div)>blockquote:first-child:not(.p-pull) :is(b,strong,a){color:inherit;font-weight:600}
/* 5.3 links: running-text links are iron text on a 2 px tomato underline; headings never underline */
.presale-body a{color:var(--hr-text);text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--hr-tomato)}
.presale-body a:not([data-presale-cta]){font-weight:inherit}
.presale-body a:hover{color:var(--hr-tomato-text);text-decoration-color:var(--hr-tomato)}
.presale-body :is(h1,h2,h3,h4,h5,h6) a{text-decoration:none;color:inherit}
.presale-body a[data-presale-cta],a[data-presale-cta]{background:var(--hr-cta);color:var(--hr-cta-ink);border:2px solid var(--hr-cta);border-radius:var(--hr-r-1);font-family:var(--hr-display);font-weight:800;font-size:17px;letter-spacing:.01em;text-transform:none;min-height:48px;box-shadow:none;text-decoration:none;text-wrap:balance;transition:background .15s,color .15s,border-color .15s}
.presale-body a[data-presale-cta]:hover,a[data-presale-cta]:hover{background:var(--hr-iron);border-color:var(--hr-iron);color:var(--hr-on-iron);transform:none}
/* 5.4 imagery: 6 px radius, 1 px line, no shadow; mid-size content images fill the column */
.presale-body img{border-radius:var(--hr-r-3);border-color:var(--hr-line);box-shadow:none;margin:8px auto 24px}
.presale-body img:first-of-type{max-height:none;object-fit:fill}
.presale-body img:is([width^="5"],[width^="6"],[width^="7"],[width^="8"],[width^="9"],[width="100%"]):not(.p-vector):not(.p-small):not(.p-icon):not(.p-avatar):not(.p-meta-ava):not(.p-c-ava):not(.p-packshot):not(.p-cutout):not(.p-product){width:100%;height:auto}
.presale-body img.p-avatar{display:none}          /* brand byline law */
.presale-body img.p-small{border-radius:var(--hr-r-3);margin:4px 0;margin-inline-end:10px}
.presale-body img.p-icon{margin:0;margin-inline-end:6px}
.presale-body :is(h1,h2,h3,h4,h5,h6) img{margin:0 !important;margin-inline-end:8px !important}
.presale-body .p-vector{color:var(--hr-iron)}
/* legacy presale-doc vectors: badges and clip art hidden, line-art and stars mapped to iron; flags keep their colours */
.presale-body img.p-vector[src*='/50off']{display:none}
.presale-body .p-iconrow:has(>img.p-vector[src*='/50off']:first-child){display:block}
.presale-body .p-iconrow:has(>img.p-vector[src*='/50off']:only-of-type):not(:has(p)){display:none}
.presale-body img.p-small[src*='guarantee']{display:none}
.presale-body img.p-small[src*='designimage']{display:none}
.presale-body .p-iconrow:has(>img.p-small[src*='designimage']){display:block}
.presale-body div>img.p-vector[src*='/icon']:first-child{display:none}
.presale-body img.p-vector:is([src*='/list'],[src*='/icon'],[src*='/ic'],[src*='/star']):not([src*='check']):not([src*='flag']){filter:grayscale(1) brightness(.6) contrast(5)}
.presale-body img.p-vector[src*='/stars']{max-height:16px;margin:0 auto 6px}
.presale-body p+img.p-vector[src*='/stars'],.presale-body [data-p-stack] img.p-vector[src*='/stars']{margin:0 0 6px}
/* 5.5 byline row: two hairlines, no card; the pantry label with the brand initial replaces the persona; the date-to-category separator belongs to the date (::after) so a wrapped row never starts with a dot, and on phones the category takes its own line */
.presale-body ul.p-byline{list-style:none;display:grid;grid-template-columns:minmax(0,max-content) minmax(0,max-content);justify-content:start;align-items:center;gap:4px 10px;margin:0;padding:0;margin-inline-start:0}   /* the byline list: the name owns line 1, the date and the category share line 2 (15 px floor on light) */
.presale-body ul.p-byline li{margin:0;color:var(--hr-mute);font-family:var(--hr-display);font-weight:600;font-size:15px;line-height:1.4;letter-spacing:0;text-transform:none}
.presale-body ul.p-byline li:not(:first-child)::before{content:"\B7";margin:0;margin-inline-end:10px;color:var(--hr-line)}
.presale-body ul.p-byline li.p-meta-name{flex-basis:100%;grid-column:1/-1;color:var(--hr-text);font-weight:700}
.presale-body ul.p-byline li.p-meta-name+li::before{display:none}
.presale-body ul.p-byline .brand{display:inline-flex;align-items:center;gap:8px;color:var(--hr-text)}
.presale-body ul.p-byline .brand[data-initial]::before{content:attr(data-initial);display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 5px;background:var(--hr-enamel);color:var(--hr-iron);border:1.5px solid var(--hr-iron);border-radius:var(--hr-r-1);font-weight:800;font-size:12px;letter-spacing:.04em;line-height:1}
/* byline separator (normaliser NOTES 19:3xZ): drawn at the END of the date row, never at a line start */
.presale-body ul.p-byline li.p-meta-sub+li.p-meta-cat::before{display:none}
.presale-body ul.p-byline li.p-meta-sub:has(+li.p-meta-cat)::after{content:"\B7";color:var(--hr-line);margin-inline-start:10px}
.presale-body img.p-avatar:not(.p-meta-ava):not(.p-c-ava)+div,.presale-body img.p-avatar:not(.p-meta-ava):not(.p-c-ava)+span,.presale-body img.p-avatar:not(.p-meta-ava):not(.p-c-ava)+ul{color:var(--hr-mute)}
.presale-body img.p-avatar+div b,.presale-body img.p-avatar+div strong{color:var(--hr-text)}
.presale-body .p-meta{background:transparent;border:0;border-top:1px solid var(--hr-line);border-bottom:1px solid var(--hr-line);border-radius:0;box-shadow:none;padding:12px 0;margin:12px 0 22px;flex-wrap:wrap;gap:12px;justify-content:space-between}   /* 5.20: a rating chip that wraps to its own line starts at the inline start, never flush right under a void (nutristeam-new-01, mealsure-new-01, trekspresso-new-03, steamcouture-new-02) */
.presale-body .p-meta-col{color:var(--hr-mute);flex:1 1 auto;min-width:0}   /* the byline column is sized by its content (ul.p-byline had made it full-width, pushing the rating chip to a second row): the chip shares the row when both fit, otherwise it drops below intact and the date · category line never breaks with a dangling separator */
.presale-body .p-meta-name{color:var(--hr-text);font-weight:700;font-size:15px}
.presale-body .p-meta-sub{color:var(--hr-mute);font-size:15px;line-height:1.4}
.presale-body .p-meta-rate{background:var(--hr-enamel);border:1px solid var(--hr-line);border-radius:var(--hr-r-3);max-width:100%;display:inline-grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;min-width:0;box-sizing:border-box;padding:6px 12px;align-items:start;flex:0 0 auto;margin-left:0;margin-right:0;margin-inline-start:0}
.presale-body .p-meta-rate .p-ustars{line-height:1.45}
.presale-body .p-meta-rate .p-ustars,.presale-body .p-ustars{color:var(--hr-iron);letter-spacing:2px}
.presale-body .p-meta-ratetxt{white-space:normal;overflow-wrap:break-word;text-wrap:pretty;line-height:1.45;font-size:15px;color:var(--hr-text);font-family:var(--hr-display);font-weight:700;letter-spacing:0;text-transform:none}
/* 5.6 lists: logical indent; icon bullets become 20 px tiles (ok-green tick / warn cross) with a hanging indent */
.presale-body ul,.presale-body ol{margin:0 0 18px;padding:0;margin-inline-start:24px}
.presale-body li img.p-icon,.presale-body li img.p-vector,.presale-body li img.p-small{margin:0;margin-inline-end:8px}
.presale-body li:has(> img.p-icon,> img.p-vector,> img.p-small),.presale-body li.p-tick,.presale-body li.p-cross{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:10px;align-items:start;list-style:none}
.presale-body li:has(> img.p-icon,> img.p-vector,> img.p-small)>img{grid-column:1;grid-row:1;margin:0;max-height:20px;width:auto;justify-self:center;align-self:center}
.presale-body li:has(> img:is([src*='/success.'],[src*='/icon-check.'],[src*='/no.']))>img{display:none}
.presale-body li:has(> img:is([src*='/success.'],[src*='/icon-check.']))::before,.presale-body li.p-tick::before{content:"";grid-column:1;grid-row:1;width:20px;height:20px;margin-top:4px;border-radius:var(--hr-r-3);background:var(--hr-ok) var(--hr-i-tick) center/18px 18px no-repeat}
.presale-body li:has(> img:is([src*='/no.']))::before,.presale-body li.p-cross::before{content:"";grid-column:1;grid-row:1;width:20px;height:20px;margin-top:4px;border-radius:var(--hr-r-3);background:var(--hr-warn-tint) var(--hr-i-cross) center/18px 18px no-repeat}
/* 5.7 feature rows (.p-iconrow and the shared-doc div>div(img)+div(p+text) blocks): 20 px display label, 18 px body, ok-green tick tile instead of clip art (numbers are reserved for .p-step) */
.presale-body .p-iconrow{grid-template-columns:32px minmax(0,1fr);column-gap:16px;align-items:start;text-align:start;margin:0 0 22px}
.presale-body .p-iconrow>img{grid-column:1;grid-row:1;margin:0;max-height:32px}
.presale-body .p-iconrow>div{grid-column:2;font-family:var(--hr-text-face);font-size:18px;line-height:1.55;color:var(--hr-text);font-weight:400}
.presale-body .p-iconrow>div>p:first-child,.presale-body .p-iconrow>div>div:first-child{color:var(--hr-text);font-weight:800;font-family:var(--hr-display);font-size:20px;line-height:1.2;letter-spacing:-.01em;margin:3px 0 4px}
.presale-body .p-iconrow>div>p{margin:0 0 8px}
.presale-body .p-iconrow:has(> img.p-vector:is([src*='/ic'],[src*='/list'])){counter-increment:hr-row}
.presale-body .p-iconrow:has(> img.p-vector:is([src*='/ic'],[src*='/list']))>img{display:none}
.presale-body .p-iconrow:has(> img.p-vector:is([src*='/ic'],[src*='/list']))::before,.presale-body div:has(> div:first-child > img:only-child):has(> div:nth-child(2) > p:first-child):not([data-p-row]):not(.p-iconrow)::before{content:"";grid-column:1;grid-row:1;width:32px;height:32px;border-radius:var(--hr-r-3);background:var(--hr-ok) var(--hr-i-tick) center/24px 24px no-repeat}
.presale-body div:has(> div:first-child > img:only-child):has(> div:nth-child(2) > p:first-child):not([data-p-row]):not(.p-iconrow){display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:16px;align-items:start;text-align:start;margin:0 0 24px;counter-increment:hr-row}
.presale-body div:has(> div:first-child > img:only-child):has(> div:nth-child(2) > p:first-child):not([data-p-row]):not(.p-iconrow)>div:first-child:has(> img.p-vector){display:none}
.presale-body div:has(> div:first-child > img:only-child):has(> div:nth-child(2) > p:first-child):not([data-p-row]):not(.p-iconrow)>div:first-child:has(> img:not(.p-vector)){grid-column:2;grid-row:2;margin:0}
.presale-body div:has(> div:first-child > img:only-child):has(> div:nth-child(2) > p:first-child):not([data-p-row]):not(.p-iconrow)>div:first-child>img{width:100%;height:auto;margin:4px 0 8px}
.presale-body div:has(> div:first-child > img:only-child):has(> div:nth-child(2) > p:first-child):not([data-p-row]):not(.p-iconrow)>div:nth-child(2){grid-column:2;grid-row:1;font-size:18px;line-height:1.55;color:var(--hr-text)}
.presale-body div:has(> div:first-child > img:only-child):has(> div:nth-child(2) > p:first-child):not([data-p-row]):not(.p-iconrow)>div:nth-child(2)>p:first-child{color:var(--hr-text);font-weight:800;font-family:var(--hr-display);font-size:20px;line-height:1.2;letter-spacing:-.01em;margin:3px 0 4px}
/* icon + heading rows (template PRESALE_V16 grid): the check rows become tick-tiled h3s, star rows stack */
.presale-body div:has(> img.p-vector[src*='/check']:first-child):has(> h6){display:block;margin:0 0 6px}
.presale-body div:has(> img.p-vector[src*='/check']:first-child):has(> h6)>img{display:none}
.presale-body div:has(> img.p-vector[src*='/check']:first-child):has(> h6)>h6,.presale-body h3.p-feat{position:relative;padding-inline-start:30px;font-family:var(--hr-display);font-size:22px;line-height:1.15;letter-spacing:-.02em;text-transform:none;color:var(--hr-text);font-weight:800;margin:24px 0 8px}
.presale-body div:has(> img.p-vector[src*='/check']:first-child):has(> h6)>h6::before,.presale-body h3.p-feat::before{content:"";position:absolute;inset-inline-start:0;top:.1em;width:20px;height:20px;border-radius:var(--hr-r-3);background:var(--hr-ok) var(--hr-i-tick) center/18px 18px no-repeat}
.presale-body div:has(> img.p-vector[src*='/stars']:first-child + :is(h2,h3,h4,h5,h6)){display:block}
.presale-body div:has(> img.p-vector[src*='/stars']:first-child + :is(h2,h3,h4,h5,h6))>img{max-height:16px;margin:0 0 6px}
.presale-body div:has(> img.p-vector[src*='/stars']:first-child + :is(h2,h3,h4,h5,h6))>h3{font-size:20px;margin:0 0 8px}
[dir=rtl] .presale-body .p-iconrow,[lang=he] .presale-body .p-iconrow{text-align:start}
[dir=rtl] .presale-body div:has(> :is(img.p-icon,img.p-small,img.p-vector):first-child + :is(h2,h3,h4,h5,h6)){text-align:start}
/* verified-customer label: tick tile + 15 px display text (the 15 px floor on light: HR_PRESALE_SKIN_V2 part 4, corkease-new-03) */
.presale-body span:has(> img.p-vector[src*='icon-check']),.presale-body .p-verified{display:inline-flex;align-items:center;gap:6px;font-family:var(--hr-display);font-weight:700;font-size:15px;letter-spacing:0;text-transform:none;color:var(--hr-mute)}
.presale-body span:has(> img.p-vector[src*='icon-check'])>img{display:none}
.presale-body span:has(> img.p-vector[src*='icon-check'])::before,.presale-body .p-verified::before{content:"";flex:none;width:16px;height:16px;border-radius:var(--hr-r-1);background:var(--hr-ok) var(--hr-i-tick) center/14px 14px no-repeat}
/* star rows: one iron text row instead of five image requests (only when the row is a full five) */
.presale-body ul.p-stars{margin:0 0 10px}
.presale-body ul.p-stars:has(> li:nth-child(5)) li{display:none}
.presale-body ul.p-stars:has(> li:nth-child(5))::before{content:"\2605\2605\2605\2605\2605";color:var(--hr-iron);font-size:15px;letter-spacing:2px;line-height:1}
.presale-body ul.p-stars img{max-height:16px}
/* star-row testimonials: the star row + paragraph pair reads as a quote tray */
.presale-body div:has(> ul.p-stars:first-child + p):not(.p-iconrow *){border:1px solid var(--hr-line);border-inline-start:4px solid var(--hr-tomato);background:var(--hr-enamel);border-radius:var(--hr-r-3);padding:16px 20px 10px;margin:0 0 16px}
.presale-body div:has(> ul.p-stars:first-child + p):not(.p-iconrow *)>p{margin:0 0 8px}
/* 5.8 the offer unit: the offer tray (tomato rim, enamel), tomato-text eyebrow, dotted-leader price rows, one button, warn urgency line, trust chips */
.p-offer,.presale-body .p-offer{border:var(--hr-rim) solid var(--hr-tomato);background:var(--hr-enamel);border-radius:var(--hr-r-2);box-shadow:none;max-width:none;padding:24px 24px 20px;margin:32px 0;text-align:center}
.presale-body .p-offer-coupon,.presale-body .p-offer-card,.presale-body .p-offer-strip,.p-offer-card,.presale-body .p-offer.p-offer-coupon{background:var(--hr-enamel);border:var(--hr-rim) solid var(--hr-tomato);border-radius:var(--hr-r-2);max-width:none}
.presale-body .p-offer-coupon{background:var(--hr-tomato-tint);border:1px solid var(--hr-tomato);border-radius:var(--hr-r-1)}
.presale-body .p-offer-strip{background:var(--hr-enamel-2)}
.presale-body .p-offer:last-child{margin-bottom:0}
.presale-body .p-offer-code{display:inline-block;background:var(--hr-tomato-tint);border:1px solid var(--hr-tomato);border-radius:var(--hr-r-1);padding:4px 10px;font-family:var(--hr-display);font-weight:800;letter-spacing:.06em;margin:0 0 12px;color:var(--hr-text)}
.presale-body .p-offer-head,.presale-body :is(h1,h2,h3,h4,h5,h6,p):has(+ .p-offer){text-align:inherit}
.p-offer-head,.presale-body .p-offer-head{border-bottom:0}
.presale-body h2.p-offer-head,.presale-body [data-p-row]:not([data-p-stack]) h2{padding-inline-start:0}
.presale-body h2.p-offer-head::before,.presale-body [data-p-row]:not([data-p-stack]) h2::before{display:none}
.p-offer-eyebrow,.presale-body .p-offer-eyebrow{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:0;position:static;color:var(--hr-tomato-text);font-family:var(--hr-display);font-weight:800;font-size:13px;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;margin:0 0 12px}
.presale-body .p-offer-eyebrow::before,.p-offer-eyebrow::before{display:none}
.presale-body .p-offer-stars{color:var(--hr-iron);letter-spacing:2px}
.presale-body .p-offer-price{display:grid;grid-template-columns:1fr;gap:2px;max-width:360px;margin:0 auto 16px;text-align:start}   /* the was/now pair as the recipe-card readout (DESIGN-SPEC 10.3 .p-offer-rows) */
.presale-body .p-offer-was,.presale-body .p-offer-now{display:flex;align-items:baseline;gap:10px;min-height:28px;font-family:var(--hr-display);font-weight:600;font-size:15px;color:var(--hr-mute);font-variant-numeric:tabular-nums;text-align:start}
.presale-body :is(.p-offer-was,.p-offer-now)::before{content:"";order:2;flex:1 1 16px;border-bottom:2px dotted var(--hr-line);transform:translateY(-4px)}
.presale-body .p-offer-was>s,.presale-body .p-offer-now>b{order:3;flex:none}
.presale-body .p-offer-label{order:1;flex:none;color:var(--hr-mute);font-family:var(--hr-display);font-weight:600;font-size:15px}   /* the readout label (no colon: the leader separates label and value) */
.presale-body .p-offer-was s{color:var(--hr-mute)}
.presale-body .p-offer-now{color:var(--hr-text);font-weight:700}
.presale-body .p-offer-now b{color:var(--hr-text);background:transparent;border-radius:0;padding:0;font-size:26px;font-weight:800;line-height:1.2}   /* the price is iron like the guide .price-now: the button is the one tomato fill in the tray */
.presale-body .p-offer-rows div{display:flex;align-items:baseline;gap:10px;min-height:28px}                 /* price rows as dotted-leader readout */
.presale-body .p-offer-rows div::before{content:"";order:2;flex:1 1 16px;border-bottom:2px dotted var(--hr-line);transform:translateY(-4px)}
.presale-body .p-offer a[data-presale-cta]{max-width:640px;margin:0 auto 12px}
.p-offer-urgency,.presale-body .p-offer-urgency{color:var(--hr-mute);font-family:var(--hr-display);font-weight:700;font-size:15px;line-height:1.4;letter-spacing:0;text-transform:none;text-wrap:balance;margin:0 auto 12px;max-width:56ch}
.p-offer-trust,.presale-body .p-offer-trust{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;border:0;padding:0;background:transparent;color:var(--hr-mute);font-family:var(--hr-display);font-weight:700;font-size:15px;letter-spacing:0;text-transform:none;line-height:1.3}
.presale-body .p-offer-trust>span,.p-offer-trust>span,.presale-body .p-offer-trust>p>span{display:inline-flex;flex:0 1 auto;align-items:center;gap:6px;border:1px solid var(--hr-line);border-radius:var(--hr-r-1);padding:5px 8px;background:var(--hr-enamel-2);white-space:normal;text-align:start;max-width:100%;justify-content:flex-start}   /* = .chip */
.presale-body [data-p-row] .p-offer-eyebrow{font-size:13px;line-height:1.4}.presale-body [data-p-row] .p-offer-trust{font-size:15px;line-height:1.4}   /* the eyebrow is tracked caps (13 px allowed); the trust chips are text and keep the 15 px floor */
.presale-body [data-p-row] .p-offer-trust{line-height:1.3}
.presale-body [data-p-row] .p-offer-urgency{font-size:15px;line-height:1.4}
.presale-body [data-p-row] :is(.p-offer-price,.p-offer){font-size:18px;line-height:1.55}
.presale-body .p-offer-trust>span.p-trust::before,.p-offer-trust>span.p-trust::before,.presale-body .p-offer-trust>p>span.p-trust::before{content:"";flex:none;width:16px;height:16px;border-radius:var(--hr-r-1);background:var(--hr-ok) var(--hr-i-tick) center/14px 14px no-repeat}
/* 5.9 quotes: trays with the iron rim; pull quotes on an iron bar */
.presale-body .p-pquote{border:var(--hr-rim) solid var(--hr-iron);border-radius:var(--hr-r-2);box-shadow:none;background:var(--hr-enamel)}
.presale-body .p-pquote-img{border-radius:var(--hr-r-3)}
.presale-body .p-pquote-mark{font-family:var(--hr-display);color:var(--hr-tomato);font-weight:800}
.presale-body .p-pquote-body{color:var(--hr-text)}
.presale-body .p-pquote-meta{color:var(--hr-mute);font-weight:700;font-size:15px}
.presale-body .p-pquote-meta .p-ustars{margin:0;margin-inline-end:6px}
.presale-body blockquote{border:1px solid var(--hr-line);border-inline-start:4px solid var(--hr-tomato);background:var(--hr-enamel);border-radius:var(--hr-r-3);box-shadow:none;padding:16px 20px 12px}
.presale-body blockquote p{color:var(--hr-text);font-size:18px}
.presale-body blockquote .p-attrib{color:var(--hr-text);font-weight:700;font-size:15px}
.presale-body blockquote.p-pull{border:0;background:transparent;border-inline-start:4px solid var(--hr-iron);padding:6px 0;padding-inline-start:22px;margin:28px 0}
.presale-body blockquote.p-pull p{font-family:var(--hr-display);font-weight:700;font-size:24px;line-height:1.2;color:var(--hr-text);margin:0}
.presale-body blockquote.p-pull :is(a,b,strong){font-weight:inherit;color:inherit;text-decoration:none}
/* 5.10 tables: iron heads in sentence case, centred mark columns, tiles for the tick/cross images, scroll inside on phones */
.presale-body table{border:1px solid var(--hr-line);border-radius:var(--hr-r-3);background:var(--hr-enamel);font-variant-numeric:tabular-nums;border-collapse:separate;border-spacing:0;overflow:hidden}
.presale-body th{background:var(--hr-iron);color:var(--hr-on-iron);font-family:var(--hr-display);font-weight:700;letter-spacing:.02em;text-transform:none;font-size:13px;white-space:normal}
.presale-body th:not(:first-child){text-align:center}
.presale-body td{border-top:1px solid var(--hr-line);color:var(--hr-text);vertical-align:middle;white-space:normal}
.presale-body td p{margin:0;font-size:inherit;line-height:1.4}
.presale-body tr:nth-child(even) td{background:var(--hr-enamel-2)}
.presale-body td:has(> img.p-vector),.presale-body td.p-tick,.presale-body td.p-cross{text-align:center}
.presale-body td>img.p-vector{display:block;margin:0 auto;max-height:20px}
.presale-body td:has(> img:is([src*='/success.'],[src*='/no.']))>img{display:none}
.presale-body td:has(> img[src*='/success.'])::before,.presale-body td.p-tick::before{content:"";display:inline-block;width:20px;height:20px;border-radius:var(--hr-r-3);vertical-align:middle;background:var(--hr-ok) var(--hr-i-tick) center/18px 18px no-repeat}
.presale-body td:has(> img[src*='/no.'])::before,.presale-body td.p-cross::before{content:"";display:inline-block;width:20px;height:20px;border-radius:var(--hr-r-3);vertical-align:middle;background:var(--hr-warn-tint) var(--hr-i-cross) center/18px 18px no-repeat}
.presale-body iframe,.presale-body video{border-radius:var(--hr-r-3);box-shadow:none}
.presale-body hr{border:0;height:1px;background:var(--hr-line)}              /* the seam between two boards */
/* 5.11 multi-column rows: flag grids, stacked reason rows with outlined step chips */
.presale-body [data-p-row]:has(> :nth-child(12)){grid-template-columns:repeat(6,minmax(0,1fr));gap:14px 8px;align-items:start}
@media(max-width:700px){.presale-body [data-p-row]:has(> :nth-child(12)){grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:560px){.presale-body [data-p-row]:has(> :nth-child(12)){grid-template-columns:repeat(3,minmax(0,1fr))}}
.presale-body [data-p-row]:has(> :nth-child(12)) img.p-vector{width:40px;max-height:30px;border:1px solid var(--hr-line);border-radius:2px;margin:0 auto 6px;box-shadow:none;filter:none}
.presale-body [data-p-row]:has(> :nth-child(12)) p{font-size:13px;line-height:1.3;margin:0}
.presale-body [data-p-stack]{text-align:start;align-items:center;gap:32px;margin:0 0 40px;counter-increment:hr-step}
.presale-body section:has([data-p-stack]),.presale-body div:has(> [data-p-stack]){counter-reset:hr-step}
.presale-body [data-p-stack] h2:first-child{margin-top:0}
.presale-body [data-p-stack] h2,.presale-body :is(h2,h3):has(> .p-step){padding-inline-start:0}
.presale-body [data-p-stack] h2::before,.presale-body :is(h2,h3):has(> .p-step)::before{display:none}
.presale-body [data-p-row]:has(.p-offer){grid-template-columns:1fr}
.presale-body [data-p-stack] img{margin:0}
.presale-body .p-step,.presale-body [data-p-stack]:not(:has(.p-step))>div>div:first-child>span:only-child,.presale-body [data-p-stack]:not(:has(.p-step))>div>div:first-child:not(:has(*))::before{display:inline-grid;place-items:center;min-width:34px;height:32px;padding:0 8px;background:var(--hr-enamel);color:var(--hr-tomato-text);border:1.5px solid var(--hr-iron);font-family:var(--hr-display);font-weight:800;font-size:16px;line-height:1;border-radius:var(--hr-r-1);font-variant-numeric:tabular-nums;margin:0 0 10px;vertical-align:middle;direction:ltr}   /* step tiles: the prep numerals on outlined iron chips */
.presale-body [data-p-stack]:not(:has(.p-step))>div>div:first-child:not(:has(*))::before{content:counter(hr-step,decimal-leading-zero)}
.presale-body [data-p-stack]:has(.p-step)>div>div:first-child:not(:has(*)){display:none}
.presale-body h2 .p-step,.presale-body h3 .p-step{margin:0;margin-inline-end:12px;vertical-align:middle}
.presale-body h3 .p-step{min-width:30px;height:28px;font-size:15px;margin-inline-end:10px}
.presale-body :is(h2,h3):has(> .p-step){display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:start}
.presale-body :is(h2,h3):has(> .p-step)>.p-step{margin:0;margin-top:.08em}
.presale-body h3:has(> .p-step){column-gap:10px}
/* 5.12 per-doc design packs (alc-*, cf-*) brought onto the system: 1 px line or the iron rim, 6/10 px radii, no shadows, no amber, no navy, no green pills */
.presale-body .alc-feats{gap:12px;counter-reset:hr-feat}
.presale-body .alc-feat{border:var(--hr-rim) solid var(--hr-iron);border-radius:var(--hr-r-2);box-shadow:none;background:var(--hr-enamel);padding:16px 18px;gap:14px;counter-increment:hr-feat}
.presale-body .alc-feat-ic{background:var(--hr-enamel-2);border-radius:var(--hr-r-3);flex:0 0 44px;width:44px;height:44px}
.presale-body .alc-feat-ic img{width:26px !important;height:26px !important;filter:grayscale(1) brightness(.6) contrast(5)}
.presale-body .alc-feat-ic:empty{flex-basis:32px;width:32px;height:32px;border-radius:var(--hr-r-3);display:grid;place-items:center;background:var(--hr-ok) var(--hr-i-tick) center/24px 24px no-repeat}
.presale-body .alc-feat-tx h4{color:var(--hr-text);font-size:20px;line-height:1.15;margin:0 0 6px;letter-spacing:-.01em}
.presale-body .alc-feat-tx p{font-size:16px;line-height:1.5;color:var(--hr-text);margin:0}
.presale-body figure.alc-quote,.presale-body figure.cf-quote{border:1px solid var(--hr-line);border-inline-start:4px solid var(--hr-tomato);border-radius:var(--hr-r-3);box-shadow:none;background:var(--hr-enamel);padding:18px 20px 14px;margin:0 0 14px}
.presale-body figure.alc-quote::before,.presale-body figure.cf-quote::before,.presale-body .alc-q-mark,.presale-body .cf-q-mark{display:none}
.presale-body .alc-q-body,.presale-body .cf-q-body{font-size:16px;line-height:1.55;color:var(--hr-text);text-align:start}
.presale-body .alc-q-body p,.presale-body .cf-q-body p,[dir=rtl] .presale-body .cf-q-body p,[dir=rtl] .presale-body .cf-q-body{font-size:inherit;line-height:inherit;margin:0;text-align:start}
.presale-body .alc-q-foot,.presale-body .cf-q-foot{border-top:1px solid var(--hr-line);gap:10px;margin-top:12px;padding-top:12px}
.presale-body .alc-q-ava,.presale-body .cf-q-ava{width:32px;height:32px;flex:0 0 32px;border-radius:var(--hr-r-1);background:var(--hr-enamel);border:1.5px solid var(--hr-iron);color:var(--hr-iron);font-family:var(--hr-display);font-weight:800;font-size:14px}
.presale-body .alc-q-who b,.presale-body .cf-q-who b{font-size:15px;color:var(--hr-text)}
.presale-body .alc-q-who i,.presale-body .cf-q-who i{color:var(--hr-mute);font-size:15px;letter-spacing:0}
.presale-body .cf-q-who em{font-size:15px;color:var(--hr-mute)}
.presale-body .alc-q-badge,.presale-body .cf-q-badge,[dir=rtl] .presale-body .alc-q-badge,[dir=rtl] .presale-body .cf-q-badge{background:var(--hr-enamel-2);border:1px solid var(--hr-line);color:var(--hr-mute);border-radius:var(--hr-r-1);font-family:var(--hr-display);font-weight:700;font-size:15px;letter-spacing:0;text-transform:none;padding:3px 8px;line-height:1.3;margin-left:0;margin-right:0;margin-inline-start:auto}
.presale-body .cf-quotes{grid-template-columns:1fr;gap:14px}
.presale-body .cf-kick{font-family:var(--hr-display);font-weight:800;font-size:13px;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;color:var(--hr-tomato-text);margin:32px 0 6px}
.presale-body .cf-kick+h2{margin-top:0}
/* 5.15 normaliser output (PL_PRESALE_NORMALISE_V1): feature trays, tick/cross lists, table marks, quote trays, offer slots, review cards */
.presale-body .p-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:8px 0 28px;counter-reset:hr-feat}
.presale-body .p-feature{border:var(--hr-rim) solid var(--hr-iron);border-radius:var(--hr-r-2);background:var(--hr-enamel);padding:16px 18px;margin:0;counter-increment:hr-feat;min-width:0}
.presale-body .p-feature h3{font-size:19px;line-height:1.2;margin:0 0 6px;position:relative;padding-inline-start:30px;min-height:0}
.presale-body .p-feature h3::before{content:"";position:absolute;inset-inline-start:0;top:.1em;width:20px;height:20px;border-radius:var(--hr-r-3);background:var(--hr-ok) var(--hr-i-tick) center/18px 18px no-repeat}
.presale-body .p-features.p-features-numbered .p-feature h3{padding-inline-start:44px;min-height:28px}
.presale-body .p-features.p-features-numbered .p-feature h3::before{content:counter(hr-feat,decimal-leading-zero);top:-2px;display:grid;place-items:center;width:34px;height:28px;background:var(--hr-enamel);color:var(--hr-tomato-text);border:1.5px solid var(--hr-iron);border-radius:var(--hr-r-1);font-family:var(--hr-display);font-weight:800;font-size:14px;line-height:1;font-variant-numeric:tabular-nums}
.presale-body .p-feature p{margin:0;font-size:17px;line-height:1.55}
.presale-body .p-feature p+p{margin-top:8px}
@media(min-width:561px){.presale-body .p-features>.p-feature:last-child:nth-child(odd){grid-column:1/-1}}
.presale-body ul.p-ticks,.presale-body ul.p-crosses{margin-inline-start:0;list-style:none}
.presale-body ul.p-ticks>li,.presale-body ul.p-crosses>li{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:10px;align-items:start;list-style:none}
.presale-body ul.p-ticks>li::before{content:"";grid-column:1;grid-row:1;width:20px;height:20px;margin-top:4px;border-radius:var(--hr-r-3);background:var(--hr-ok) var(--hr-i-tick) center/18px 18px no-repeat}
.presale-body ul.p-crosses>li::before{content:"";grid-column:1;grid-row:1;width:20px;height:20px;margin-top:4px;border-radius:var(--hr-r-3);background:var(--hr-warn-tint) var(--hr-i-cross) center/18px 18px no-repeat}
.presale-body td:has(> .p-yes,> .p-no){text-align:center;vertical-align:middle}
.presale-body .p-yes,.presale-body .p-no{display:inline-block;width:20px;height:20px;border-radius:var(--hr-r-3);vertical-align:middle;color:transparent;font-size:0;line-height:20px;overflow:hidden}
.presale-body .p-yes{background:var(--hr-ok) var(--hr-i-tick) center/18px 18px no-repeat}
.presale-body .p-no{background:var(--hr-warn-tint) var(--hr-i-cross) center/18px 18px no-repeat}
.presale-body blockquote.p-quote{background:var(--hr-enamel);margin:0 0 14px}
.presale-body blockquote .p-attrib,.presale-body blockquote.p-quote .p-attrib{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:15px;font-weight:700;color:var(--hr-text);margin:10px 0 0}
.presale-body .p-attrib .p-ustars{font-size:13px;letter-spacing:2px}
.presale-body .p-attrib .p-verified{margin-inline-start:auto}
.presale-body .p-offer-slot{margin:32px 0}
.presale-body .p-offer-slot>.p-offer{margin:0}
.presale-body .p-offer-slot:last-child{margin-bottom:0}
.presale-body .p-offer-slot a[data-presale-cta]::after{content:"\203A";margin-inline-start:.45em}   /* the guide button's chevron glyph; no RTL override: U+203A is bidi-mirrored inside the RTL run */
.presale-body .p-offer-slot .p-offer-trust>span::before,.presale-body .p-offer-slot .p-offer-trust>p>span::before{content:"";flex:none;width:16px;height:16px;border-radius:var(--hr-r-1);background:var(--hr-ok) var(--hr-i-tick) center/14px 14px no-repeat}
.presale-body .p-figcaption,.presale-body img:first-of-type+p.p-figcaption{font-family:var(--hr-display);font-weight:700;font-size:15px;line-height:1.4;letter-spacing:0;text-transform:none;color:var(--hr-mute);text-align:center;margin:-12px 0 20px}   /* (0,3,2) outranks the template's own dek rule for a caption after a section's first image */
.presale-body .p-nowrap{white-space:nowrap}
.presale-body .p-c-grid{gap:14px;margin:8px 0 24px;align-items:stretch}
.presale-body article.p-comment,.presale-body .p-comment{background:var(--hr-enamel);border:1px solid var(--hr-line);border-radius:var(--hr-r-2);padding:16px 18px}
.presale-body .p-c-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.presale-body .p-c-id{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 10px;line-height:1.3}
.presale-body .p-c-name{color:var(--hr-text);font-weight:700;font-size:15px}
.presale-body h4.p-c-title{font-size:18px;line-height:1.2;margin:0 0 6px;text-wrap:pretty}
.presale-body h4.p-c-title .p-ustars{font-size:13px;letter-spacing:2px;margin-inline-end:6px;vertical-align:1px}
.presale-body p.p-c-body,.presale-body .p-comment p{font-size:16px;line-height:1.5;margin:0;color:var(--hr-text)}
/* 5.16 normaliser p-wrapper tolerance: a chrome text wrapped in <p> must not become a box or a paragraph */
.presale-body :is(.p-meta-col,.p-meta-rate,.p-offer-eyebrow,.p-offer-price,.p-offer-was,.p-offer-now,.p-offer-urgency,.p-offer-trust,.p-c-head,.p-c-id,.p-attrib)>p{display:contents;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;line-height:inherit;margin:0}
/* 5.17 reason rows: always two columns on desktop, text at the inline start, image at the inline end */
.presale-body [data-p-stack]{grid-template-columns:repeat(2,minmax(0,1fr))}
.presale-body [data-p-stack]>div:not(:has(*)){display:none}
.presale-body [data-p-stack]>div:has(h2,h3){grid-column:1;grid-row:1}
.presale-body [data-p-stack]>img,.presale-body [data-p-stack]>div:has(> img:only-child){grid-column:2;grid-row:1;align-self:center}
.presale-body [data-p-stack]>img,.presale-body [data-p-stack]>div:has(> img:only-child)>img{width:100%;height:auto;margin:0}
@media(max-width:560px){.presale-body .p-features{grid-template-columns:1fr}.presale-body [data-p-stack]>div:has(h2,h3),.presale-body [data-p-stack]>img,.presale-body [data-p-stack]>div:has(> img:only-child){grid-column:auto;grid-row:auto;align-self:auto}}
/* 5.18 chrome on presale pages: the compact publisher nameplate row, the disclosure line on iron, 40 px tap targets, the 13 px masthead label on phones */
body[data-top5-presale-brand] .foot p a{color:var(--hr-on-iron);text-decoration:underline;text-decoration-color:var(--hr-tomato-lit);text-decoration-thickness:2px;text-underline-offset:3px}
body[data-top5-presale-brand] .foot p a:hover{color:var(--hr-tomato-lit);text-decoration-color:var(--hr-on-iron)}
body[data-top5-presale-brand] .foot-nav{margin:-9px 0 5px}
body[data-top5-presale-brand] .foot .copy .foot-nav{margin:0}
body[data-top5-presale-brand] .foot-nav a{display:inline-flex;align-items:center;padding:9px 0;min-height:40px;box-sizing:border-box}
@media(max-width:640px){body[data-top5-presale-brand] .foot .copy .foot-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}}   /* four legal links wrap 2 + 2 on phones */
body[data-top5-presale-brand] .foot ul li{padding-block:0}
body[data-top5-presale-brand] .foot ul a{display:inline-flex;align-items:center;padding-block:11px;line-height:18px;min-height:40px;min-width:40px;box-sizing:border-box;max-width:100%}
body[data-top5-presale-brand] .foot .langs{gap:0 12px}
body[data-top5-presale-brand] .foot .h{margin-bottom:4px}
body[data-top5-presale-brand] .foot .brand{min-height:40px}
body[data-top5-presale-brand] .foot .pub{font-size:14px;line-height:1.5;max-width:none}   /* one wrapping nameplate line (Stainless graft): LTR pages hide the br and put the separator after each value; RTL pages keep the stacked rows so no isolate glues to a Hebrew label */
html:not([dir=rtl]) body[data-top5-presale-brand] .foot .pub br{display:none}
html:not([dir=rtl]) body[data-top5-presale-brand] .foot .pub:not(:has(.row))>.co:not(:last-child)::after{content:" · ";color:var(--hr-on-iron-2);white-space:normal;font-weight:400}   /* shipped markup: the label text nodes sit between the .co spans, so the separator goes AFTER each value */
body[data-top5-presale-brand] .foot .pub .row{display:inline;unicode-bidi:isolate}   /* row markup (footer HANDOFF): each row its own bidi isolate, so he stops scrambling */
html:not([dir=rtl]) body[data-top5-presale-brand] .foot .pub .row{display:inline-block;margin-inline-end:6px;max-width:100%}   /* LTR: a row is an atom (its label never parts from its number at a line end); atoms wrap between themselves even without whitespace */
html:not([dir=rtl]) body[data-top5-presale-brand] .foot .pub .row:not(:last-child)::after{content:"\A0·";color:var(--hr-on-iron-2);font-weight:400}   /* the separator belongs to the row before it, so a wrapped nameplate never starts a line with a dot */
[dir=rtl] body[data-top5-presale-brand] .foot .pub>.co{margin-inline-end:0}
body[data-top5-presale-brand] .foot .pub a{display:inline-block;padding-block:11px;margin-block:-11px;line-height:inherit;min-height:0}
body[data-top5-presale-brand] .sitebar .hr-logo{min-height:40px}
@media(max-width:640px){body[data-top5-presale-brand] .sitebar .adv{font-size:13px}}
/* 5.13 comments */
.presale-body .p-comment{background:var(--hr-enamel);border:1px solid var(--hr-line);border-radius:var(--hr-r-2)}
.presale-body .p-comment p{color:var(--hr-text)}
.presale-body .p-c-name{color:var(--hr-text);font-weight:700}
.presale-body .p-c-time,.presale-body .p-c-count{color:var(--hr-mute)}
.presale-body .p-c-reply{background:var(--hr-enamel-2);border-color:var(--hr-line);border-radius:var(--hr-r-3)}
.presale-body .p-c-reacts img{border-color:var(--hr-enamel)}
.presale-body .p-c-sec h2 a{text-decoration-color:var(--hr-tomato)}
/* 5.14 he tracking, phones */
[lang=he] :is(.presale-body ul.p-byline li,.p-offer-eyebrow,.p-offer-urgency,.p-offer-trust,.presale-body h6,a[data-presale-cta],.presale-body .p-meta-ratetxt,.presale-body .cf-kick,.presale-body .alc-q-badge,.presale-body .cf-q-badge,.presale-body .p-verified){letter-spacing:.02em}
@media(max-width:760px){.presale-body{padding:22px var(--hr-gutter) 40px}.presale-body [data-p-stack]{gap:16px}.presale-body table:not(.p-t2){display:block;overflow-x:auto;overflow-y:hidden;width:100%;max-width:100%;box-sizing:border-box;-webkit-overflow-scrolling:touch;scrollbar-width:thin}.presale-body th,.presale-body td{padding:8px 6px;font-size:13px}.presale-body th{letter-spacing:0;overflow-wrap:normal;word-break:normal;hyphens:manual;vertical-align:bottom}.presale-body th:not(:first-child),.presale-body td:not(:first-child){width:auto;min-width:0}.presale-body td:first-child{hyphens:auto;hyphenate-limit-chars:8 4 4;position:sticky;inset-inline-start:0;background:inherit}}
@media(max-width:400px){.presale-body th,.presale-body td{padding-inline:4px}}
@media(max-width:640px){.presale-body h1,:is([lang=de],[lang=fi],[lang=hu],[lang=nl],[lang=el]) .presale-body h1{font-size:2.125rem}   /* one phone h1 floor for every language (DESIGN-SPEC 3: 34..44 px on phones); hyphens:manual + overflow-wrap:anywhere keep the long compounds safe */
.presale-body .p-meta-col{flex-basis:100%}.presale-body ul.p-byline{grid-template-columns:minmax(0,1fr)}.presale-body ul.p-byline li.p-meta-cat{flex-basis:100%}.presale-body ul.p-byline li.p-meta-sub::after{display:none}.presale-body h3{font-size:20px}.presale-body h4{font-size:20px}.presale-body blockquote.p-pull p{font-size:20px;line-height:1.2}.presale-body a[data-presale-cta],a[data-presale-cta]{font-size:16px;padding:14px 18px}.presale-body .p-offer{padding:20px 16px 16px}.presale-body .p-offer-trust>span,.presale-body .p-offer-trust>p>span{white-space:normal;text-align:start}.presale-body .p-meta-rate{margin-inline-start:0;display:inline-grid;grid-template-columns:minmax(0,1fr);row-gap:2px;width:fit-content;max-width:100%;line-height:1.45}.presale-body .p-meta-rate .p-ustars{margin:0}.presale-body .p-offer-trust{grid-template-columns:1fr;gap:4px;max-width:360px;margin-inline:auto}.presale-body .p-offer-trust>span,.presale-body .p-offer-trust>p>span{border:0;background:transparent;padding:3px 0;border-radius:0}.presale-body .p-attrib .p-verified{flex-basis:100%;margin-inline-start:0;margin-top:2px}.presale-body .alc-q-badge,.presale-body .cf-q-badge,[dir=rtl] .presale-body .alc-q-badge,[dir=rtl] .presale-body .cf-q-badge{flex-basis:100%;max-width:max-content;margin-inline-start:42px}}
@media(max-width:560px){.presale-body [data-p-row]:has(h2,h3,.p-offer,a[data-presale-cta]){grid-template-columns:1fr}:is([lang=de],[lang=fi],[lang=hu],[lang=nl],[lang=et],[lang=da]) .presale-body :is(p,li,[data-p-row] div):where(:not(.p-meta *,.p-offer *,.p-offer-slot *,.p-lead)){hyphens:auto;hyphenate-limit-chars:14 6 6}}

/* ---- 6. legacy Bootstrap guide markup, scoped by the injected body class (parity with the sister skins) ---- */
body.hr-legacy{font-family:var(--sans)!important;color:var(--ink)!important;background:var(--paper)!important}
.hr-legacy h1,.hr-legacy h2,.hr-legacy h3,.hr-legacy h4,.hr-legacy .h1,.hr-legacy .h2,.hr-legacy .h3{font-family:var(--serif)!important;font-weight:800!important;color:var(--ink);letter-spacing:-.02em}
.hr-legacy .bold,.hr-legacy .font-bold,.hr-legacy b,.hr-legacy strong{font-weight:700}
.hr-legacy .font-light{font-weight:400}
.hr-legacy .navbar.navbar-transparent{background:var(--hr-enamel)!important;border-top:0;border-bottom:1px solid var(--hr-line);padding-top:12px!important;padding-bottom:12px!important}
.hr-legacy .navbar img,.hr-legacy .navbar-brand{height:32px!important;width:auto!important;padding:0!important;max-width:none!important}
.hr-legacy .hero{background:var(--hr-iron)!important;background-image:none!important;color:var(--hr-on-iron)}
.hr-legacy .hero h1,.hr-legacy .hero .h1,.hr-legacy .hero .font-light,.hr-legacy .hero .text-dark,.hr-legacy .hero p{color:var(--hr-on-iron)!important}
.hr-legacy .label,.hr-legacy .label--success{background:var(--hr-enamel-2)!important;color:var(--hr-mute)!important;border:1px solid var(--hr-line);border-radius:var(--hr-r-1)!important;letter-spacing:0;font-size:13px!important;font-weight:700!important;font-family:var(--serif)!important;text-transform:none;line-height:1.4;padding:4px 8px!important}
.hr-legacy .hero .label,.hr-legacy .hero .label--success{background:transparent!important;border:0;padding:0!important;color:var(--hr-on-iron-2)!important}
.hr-legacy .btn-success,.hr-legacy .btn-primary,.hr-legacy .btn-warning{background-color:var(--hr-tomato)!important;border:2px solid var(--hr-tomato)!important;color:#fff!important;border-radius:var(--hr-r-1)!important;font-family:var(--serif)!important;font-weight:800;letter-spacing:.01em;text-transform:none;box-shadow:none!important}
.hr-legacy .btn-success:hover,.hr-legacy .btn-primary:hover,.hr-legacy .btn-warning:hover,.hr-legacy .btn-success:focus,.hr-legacy .btn-primary:focus{background-color:var(--hr-iron)!important;border-color:var(--hr-iron)!important;color:var(--hr-on-iron)!important}
.hr-legacy .rating{color:var(--hr-iron)!important}
.hr-legacy .rating--fill,.hr-legacy .rating:not(.rating--full),.hr-legacy .rating--empty{color:var(--hr-line)!important}
.hr-legacy .rating-title,.hr-legacy .text-warning:not(.rating){color:var(--hr-mute)!important}
.hr-legacy .text-primary,.hr-legacy .info-line__item:before,.hr-legacy .text-success,.hr-legacy .list-success__item:before{color:var(--hr-text)!important}
.hr-legacy .icon{stroke:var(--hr-iron)!important;fill:var(--hr-iron)!important}
.hr-legacy .bg-success,.hr-legacy .info-line__inner:before{background-color:var(--hr-tomato)!important}
.hr-legacy .choice,.hr-legacy .feedback,.hr-legacy .info-box,.hr-legacy .info-line__item{border-color:var(--hr-line)!important;border-radius:var(--hr-r-2)!important;box-shadow:none!important;background:var(--hr-enamel)}
.hr-legacy .choice:has(.choice__label){border:var(--hr-rim) solid var(--hr-tomato)!important;box-shadow:none!important}
.hr-legacy .choice__label{background:var(--hr-tomato)!important;color:#fff!important;font-family:var(--serif)!important;font-weight:800!important;font-size:13px!important;letter-spacing:0;text-transform:none;border-radius:var(--hr-r-1)!important}
.hr-legacy .choice__label:before,.hr-legacy .choice__label:after{display:none!important}
.hr-legacy .choice__rate{font-family:var(--serif)!important;font-weight:800!important;color:var(--hr-text);font-variant-numeric:tabular-nums}
.hr-legacy .bg-light,.hr-legacy .section.bg-light{background-color:var(--hr-enamel)!important}
.hr-legacy .text-dark,.hr-legacy .navbar-nav .nav-item .nav-link{color:var(--hr-text)!important}
.hr-legacy .footer,.hr-legacy .footer.footer--white{background:var(--hr-iron)!important;border-top:0;color:var(--hr-on-iron-2)}
.hr-legacy .footer-nav__link{color:var(--hr-on-iron)!important;font-weight:400}
.hr-legacy a{color:var(--hr-text)}
.hr-legacy .text-decoration-underline,.hr-legacy p a:not(.btn),.hr-legacy li a:not(.btn):not(.nav-link):not(.footer-nav__link){color:var(--hr-text)!important;text-decoration:underline!important;text-decoration-color:var(--hr-tomato)!important;text-decoration-thickness:2px;text-underline-offset:3px}
.hr-legacy .list-success__item:before{content:"\2713"!important;font-family:var(--sans)!important;color:#fff!important;background:var(--hr-ok)!important;border:0!important;border-radius:var(--hr-r-3);font-weight:800;font-size:13px!important}
.hr-legacy .container{max-width:1200px!important}
.hr-legacy a.popup,.hr-legacy .popup{font-family:var(--serif)!important;font-size:13px!important;font-weight:700;letter-spacing:0;text-transform:none;color:var(--hr-text)!important;text-decoration:none!important}

/* ---- 7. numbered presale variants (/reviews/<brand>/1/ Webflow + Bootstrap-theme pages, /2/ Tailwind pages), scoped by injected body classes ---- */
/* A1: Inter + Recoleta theme */
body.hr-var-smp1,.hr-var-smp1 *{font-family:var(--sans)!important}
.hr-var-smp1 h1,.hr-var-smp1 h2,.hr-var-smp1 h6,.hr-var-smp1 h1 *,.hr-var-smp1 h2 *,.hr-var-smp1 h6 *,.hr-var-smp1 .availability > h2,.hr-var-smp1 .limited__offer > h6,.hr-var-smp1 .head__side > p{font-family:var(--serif)!important;font-weight:800!important;color:var(--hr-text);letter-spacing:-.02em}
.hr-var-smp1 .head__side > p{color:var(--hr-on-iron)}
.hr-var-smp1 p,.hr-var-smp1 li,.hr-var-smp1 span,.hr-var-smp1 .hero__desc > p{color:var(--hr-text)}
.hr-var-smp1 .elem__wrapper > span,.hr-var-smp1 .author *,.hr-var-smp1 .elem__media > p,.hr-var-smp1 .desc__left *{color:var(--hr-mute)!important}
.hr-var-smp1 .link,.hr-var-smp1 a.link,.hr-var-smp1 .elem__wrapper > p a.link,.hr-var-smp1 .list__wrapper ul li a,.hr-var-smp1 .faq__content a,.hr-var-smp1 .small__feedback a{color:var(--hr-text)!important;border-bottom:2px solid var(--hr-tomato)!important}
.hr-var-smp1 .link:hover,.hr-var-smp1 a.link:hover{border-bottom-color:var(--hr-iron)!important}
.hr-var-smp1 .availability,.hr-var-smp1 .limited__offer{background:var(--hr-enamel)!important;border:var(--hr-rim) solid var(--hr-iron);border-radius:var(--hr-r-2)!important}
.hr-var-smp1 .limited__offer{background:var(--hr-tomato-tint)!important;border-color:var(--hr-tomato)}
.hr-var-smp1 .head__side{background:var(--hr-iron)!important;border-radius:var(--hr-r-2) var(--hr-r-2) 0 0!important}
.hr-var-smp1 .side__float,.hr-var-smp1 .faq__box,.hr-var-smp1 .small__feedback{border-radius:var(--hr-r-2)!important;box-shadow:none!important;border:1px solid var(--hr-line);background:var(--hr-enamel)}
.hr-var-smp1 footer{background-color:var(--hr-iron)!important;border-top:0;border-bottom:0}
.hr-var-smp1 footer *{color:var(--hr-on-iron-2)!important;font-weight:400!important}
.hr-var-smp1 footer a{color:var(--hr-on-iron)!important}
.hr-var-smp1 .hero__header > p{color:var(--hr-tomato-text)!important;font-family:var(--serif)!important;font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:13px}
.hr-var-smp1 img[src*="availability"]{filter:grayscale(1) contrast(1.1)}
.hr-var-smp1 .availability p,.hr-var-smp1 .availability em,.hr-var-smp1 .availability strong,.hr-var-smp1 .availability span:not(.link),.hr-var-smp1 .limited__offer p{color:var(--hr-mute)!important;font-style:normal!important}
.hr-var-smp1 .availability > h2,.hr-var-smp1 .limited__offer > h6{color:var(--hr-text)!important}
.hr-var-smp1 .limited__offer strong,.hr-var-smp1 .limited__offer b,.hr-var-smp1 .availability strong{letter-spacing:0;font-size:13px;color:var(--hr-text)!important;text-transform:none}
.hr-var-smp1 .btn,.hr-var-smp1 a[class*="btn"]{background:var(--hr-tomato)!important;color:#fff!important;border:2px solid var(--hr-tomato)!important;border-radius:var(--hr-r-1)!important;font-family:var(--serif)!important;font-weight:800!important;text-transform:none;letter-spacing:.01em;box-shadow:none!important}
.hr-var-smp1 .btn:hover,.hr-var-smp1 a[class*="btn"]:hover{background:var(--hr-iron)!important;border-color:var(--hr-iron)!important;color:var(--hr-on-iron)!important}
/* A2: Sandbox Bootstrap theme */
body.hr-var-zt1,.hr-var-zt1 :where(*:not(h1,h2,h3,h1 *,h2 *,h3 *,.zt-fb-post,.zt-fb-post *,[class*="fb-"])){font-family:var(--sans)!important}
.hr-var-zt1 h1,.hr-var-zt1 h2,.hr-var-zt1 h3,.hr-var-zt1 h1 *,.hr-var-zt1 h2 *,.hr-var-zt1 .zt-final-offer-title,.hr-var-zt1 .zt-zapfie-side-head h3{font-family:var(--serif)!important;font-weight:800!important;color:var(--hr-text)!important;letter-spacing:-.02em}
.hr-var-zt1 h1 i,.hr-var-zt1 h2 i,.hr-var-zt1 h3 i,.hr-var-zt1 h1 em,.hr-var-zt1 h2 em,.hr-var-zt1 h3 em,.hr-var-zt1 h2 .italic{font-style:normal!important}
.hr-var-zt1 p,.hr-var-zt1 li,.hr-var-zt1 .zt-copy{color:var(--hr-text)}
.hr-var-zt1 b,.hr-var-zt1 strong,.hr-var-zt1 .bold,.hr-var-zt1 .heavy{font-weight:700!important}
.hr-var-zt1 header > div[style]{background:var(--hr-iron)!important}
.hr-var-zt1 header > div[style] p{color:var(--hr-on-iron)!important;font-family:var(--serif)!important;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:13px!important}
.hr-var-zt1 .navbar,.hr-var-zt1 header.wrapper,.hr-var-zt1 .bg-soft-primary,.hr-var-zt1 .navbar-bg-light{background:var(--hr-enamel)!important;border-color:var(--hr-line)!important}
.hr-var-zt1 .colored,.hr-var-zt1 .bold.colored{color:var(--hr-tomato-text)!important}
.hr-var-zt1 a:not(.zt-cta-button):not(.zt-zapfie-btn):not(.zt-fb-post-link):not(.btn){color:var(--hr-text);text-decoration:underline;text-decoration-color:var(--hr-tomato);text-decoration-thickness:2px;text-underline-offset:3px}
.hr-var-zt1 a:not(.zt-cta-button):not(.zt-zapfie-btn):not(.zt-fb-post-link):not(.btn):hover{color:var(--hr-tomato-text)}
.hr-var-zt1 .zt-caption,.hr-var-zt1 .zt-caption-link > div,.hr-var-zt1 [class*="caption"]{background-color:var(--hr-enamel-2)!important;color:var(--hr-text)!important;font-weight:700!important;border-radius:var(--hr-r-3)!important;border:1px solid var(--hr-line)}
.hr-var-zt1 [class*="caption"] *{color:var(--hr-text)!important}
.hr-var-zt1 .zt-zapfie-side-head a,.hr-var-zt1 h3 a,.hr-var-zt1 h2 a,.hr-var-zt1 h1 a{text-decoration:none!important;color:var(--hr-text)!important}
.hr-var-zt1 h1 .colored,.hr-var-zt1 h2 .colored,.hr-var-zt1 h3 .colored,.hr-var-zt1 h2 a,.hr-var-zt1 h1 a{color:var(--hr-text)!important;text-decoration:underline!important;text-decoration-color:var(--hr-tomato)!important;text-decoration-thickness:3px!important;text-underline-offset:4px!important}
.hr-var-zt1 .zt-stars,.hr-var-zt1 .review-stars,.hr-var-zt1 .zt-post-stars,.hr-var-zt1 .zt-zapfie-rating .zt-stars{color:var(--hr-iron)!important}
.hr-var-zt1 .zt-zapfie-side{border:var(--hr-rim) solid var(--hr-iron)!important;border-radius:var(--hr-r-2)!important;box-shadow:none!important;background:var(--hr-enamel)}
.hr-var-zt1 .zt-zapfie-side-head{background:var(--hr-enamel-2)!important}
.hr-var-zt1 .zt-zapfie-rating{color:var(--hr-text)!important}
.hr-var-zt1 .zt-zapfie-copy{color:var(--hr-text)!important;font-weight:700!important}
.hr-var-zt1 .zt-cta-button,.hr-var-zt1 .zt-zapfie-btn,.hr-var-zt1 .btn-primary,.hr-var-zt1 .btn-success{background-color:var(--hr-tomato)!important;border:2px solid var(--hr-tomato)!important;color:#fff!important;border-radius:var(--hr-r-1)!important;font-family:var(--serif)!important;font-weight:800!important;letter-spacing:.01em;text-transform:none;box-shadow:none!important;text-decoration:none!important}
.hr-var-zt1 .zt-cta-button:hover,.hr-var-zt1 .zt-zapfie-btn:hover,.hr-var-zt1 .btn-primary:hover,.hr-var-zt1 .btn-success:hover{background-color:var(--hr-iron)!important;border-color:var(--hr-iron)!important;color:var(--hr-on-iron)!important}
.hr-var-zt1 .zt-feature-list{border:var(--hr-rim) solid var(--hr-iron)!important;border-radius:var(--hr-r-2)!important;box-shadow:none!important;background:var(--hr-enamel)}
.hr-var-zt1 .zt-feature-list li{border-bottom-color:var(--hr-line)!important}
.hr-var-zt1 .zt-feature-list li:nth-child(even){background:var(--hr-enamel-2)!important}
.hr-var-zt1 .zt-feature-list li::before{background:var(--hr-ok)!important;color:#fff!important;border-radius:var(--hr-r-3)}
.hr-var-zt1 .zt-feature-list b{color:var(--hr-text)!important;font-weight:700!important}
.hr-var-zt1 .zt-feature-list span{color:var(--hr-mute)!important}
.hr-var-zt1 .zt-testimonial,.hr-var-zt1 .quote__wrapper{background-color:var(--hr-enamel)!important;border:1px solid var(--hr-line);border-inline-start:4px solid var(--hr-tomato);border-radius:var(--hr-r-3)!important}
.hr-var-zt1 .zt-testimonial p:last-child{color:var(--hr-mute)!important;font-weight:700!important}
.hr-var-zt1 .zt-update-box{background-color:var(--hr-enamel)!important;border:1px solid var(--hr-line)!important;border-top:6px solid var(--hr-tomato)!important;border-radius:var(--hr-r-3)}
.hr-var-zt1 .zt-final-offer{border:var(--hr-rim) solid var(--hr-tomato)!important;border-radius:var(--hr-r-2)!important;box-shadow:none!important;background:var(--hr-enamel)}
.hr-var-zt1 .zt-final-offer-note{color:var(--hr-mute)!important;font-weight:700!important}
.hr-var-zt1 .zt-subquote{color:var(--hr-text)!important;font-weight:700!important}
.hr-var-zt1 footer.bg-dark,.hr-var-zt1 footer{background-color:var(--hr-iron)!important;border-top:0;border-bottom:0}
.hr-var-zt1 footer,.hr-var-zt1 footer *,.hr-var-zt1 .text-inverse,.hr-var-zt1 .text-inverse *{color:var(--hr-on-iron-2)!important}
.hr-var-zt1 footer a{color:var(--hr-on-iron)!important}
.hr-var-zt1 footer .zt-footer-logo,.hr-var-zt1 footer img[src*="logo"]{filter:brightness(0) invert(1) opacity(.9)}
.hr-var-zt1 a:has(.zt-zapfie-side-head),.hr-var-zt1 a:has(h1,h2,h3),.hr-var-zt1 .zt-zapfie-side a:not(.zt-zapfie-btn):not(.zt-cta-button),.hr-var-zt1 a:has(.zt-zapfie-side),.hr-var-zt1 a:has(.zt-stars),.hr-var-zt1 a:has(img),.hr-var-zt1 .zt-zapfie-side-head,.hr-var-zt1 .zt-zapfie-side-head *,.hr-var-zt1 .zt-final-offer h2,.hr-var-zt1 .zt-final-offer h3{text-decoration:none!important;border-bottom:0!important}
/* B: Tailwind pages: remap the theme custom properties, then the hard-coded greens */
body.hr-var-tw{--navy:#2B2724;--navy-light:#3A3531;--green-500:#2B2724;--green-600:#2B2724;--footer-bg:#2B2724;--font-primary:"Alegreya Sans","Gill Sans","Segoe UI",Calibri,sans-serif;font-family:var(--sans)!important;color:var(--hr-text)}
.hr-var-tw *{font-family:var(--sans)}
.hr-var-tw h1,.hr-var-tw h2,.hr-var-tw h3,.hr-var-tw h1 *,.hr-var-tw h2 *,.hr-var-tw h3 *{font-family:var(--serif)!important;font-weight:800!important;color:var(--hr-text)!important;letter-spacing:-.02em}
.hr-var-tw h2 em,.hr-var-tw h1 em,.hr-var-tw h2 i{font-style:normal}
.hr-var-tw b,.hr-var-tw strong,.hr-var-tw .font-bold,.hr-var-tw .bold{font-weight:700!important}
.hr-var-tw .hero-gradient{background:var(--hr-stone)!important}
.hr-var-tw [class*="before:bg-"]::before,.hr-var-tw [class*="bg-[#E4EDF5]"],.hr-var-tw [class*="bg-[#F2F6FB]"]{background-color:var(--hr-enamel-2)!important}
.hr-var-tw .nav-link{color:var(--hr-mute)!important;font-family:var(--serif)!important;font-weight:700!important;letter-spacing:0!important;text-transform:none!important;font-size:14px!important}
.hr-var-tw .nav-link:hover{color:var(--hr-text)!important}
.hr-var-tw .date-badge{background:var(--hr-enamel-2)!important;color:var(--hr-mute)!important;border:1px solid var(--hr-line);border-radius:var(--hr-r-1)!important;font-family:var(--serif)!important;font-weight:700;letter-spacing:0;text-transform:none}
.hr-var-tw .smpc-article a:not(.smpc-cta-btn):not(.zt-cta-button):not([class*="bg-green"]),.hr-var-tw .zt-article a:not(.zt-cta-button):not(.smpc-cta-btn):not([class*="bg-green"]),.hr-var-tw .zt-article .colored,.hr-var-tw .smpc-article .colored{color:var(--hr-text)!important;text-decoration:underline;text-decoration-color:var(--hr-tomato);text-decoration-thickness:2px;text-underline-offset:3px}
.hr-var-tw .smpc-article .small__list ul li > span,.hr-var-tw .smpc-article .availability h2,.hr-var-tw .smpc-article .availability span,.hr-var-tw .smpc-article .desc__left > span{color:var(--hr-text)!important}
.hr-var-tw .smpc-article .limited__offer,.hr-var-tw .smpc-article .availability,.hr-var-tw .smpc-article .desc{background:var(--hr-enamel)!important;border:var(--hr-rim) solid var(--hr-iron);border-radius:var(--hr-r-2)!important}
.hr-var-tw .smpc-article .limited__offer{background:var(--hr-tomato-tint)!important;border-color:var(--hr-tomato)}
.hr-var-tw .smpc-article .small__feedback,.hr-var-tw .smpc-article .faq__box,.hr-var-tw .zt-article .zt-feature-list,.hr-var-tw .zt-article .zt-final-offer{border-color:var(--hr-line)!important;border-radius:var(--hr-r-2)!important;box-shadow:none!important;background:var(--hr-enamel)}
.hr-var-tw .zt-article .zt-final-offer{border:var(--hr-rim) solid var(--hr-tomato)!important}
.hr-var-tw .smpc-article .faq__elem,.hr-var-tw .zt-article .zt-feature-list li{border-bottom-color:var(--hr-line)!important}
.hr-var-tw .zt-article .zt-feature-list li::before{background:var(--hr-ok)!important;color:#fff!important;border-radius:var(--hr-r-3)}
.hr-var-tw .smpc-cta-btn,.hr-var-tw .zt-cta-button,.hr-var-tw a[class*="bg-green"],.hr-var-tw [class*="bg-green-500"]{background-color:var(--hr-tomato)!important;color:#fff!important;border:2px solid var(--hr-tomato)!important;border-radius:var(--hr-r-1)!important;font-family:var(--serif)!important;font-weight:800!important;letter-spacing:.01em!important;text-transform:none!important;font-size:1.0625rem!important;box-shadow:none!important;text-decoration:none!important}
.hr-var-tw .smpc-cta-btn *,.hr-var-tw .zt-cta-button *,.hr-var-tw a[class*="bg-green"] *{color:#fff!important}
.hr-var-tw .smpc-cta-btn:hover,.hr-var-tw .zt-cta-button:hover,.hr-var-tw a[class*="bg-green"]:hover{background-color:var(--hr-iron)!important;border-color:var(--hr-iron)!important;color:var(--hr-on-iron)!important}
.hr-var-tw .smpc-cta-btn:hover *,.hr-var-tw .zt-cta-button:hover *,.hr-var-tw a[class*="bg-green"]:hover *{color:var(--hr-on-iron)!important}
.hr-var-tw .zt-article .zt-caption-link > div{background-color:var(--hr-enamel-2)!important;color:var(--hr-text)!important;border:1px solid var(--hr-line);border-radius:var(--hr-r-3)!important;text-transform:none!important;letter-spacing:0!important}
.hr-var-tw .zt-article .zt-caption-link > div *{color:var(--hr-text)!important;text-transform:none!important;letter-spacing:0!important}
.hr-var-tw [class*="text-yellow"],.hr-var-tw [class*="text-amber"],.hr-var-tw .zt-stars,.hr-var-tw .review-stars{color:var(--hr-iron)!important}
.hr-var-tw [class*="text-green"]{color:var(--hr-text)!important}
.hr-var-tw [class*="shadow-"]:not([class*="shadow-none"]){box-shadow:none!important}
.hr-var-tw [class*="rounded-"]:not(.rounded-full):not([class*="rounded-full"]){border-radius:var(--hr-r-2)!important}
.hr-var-tw .zt-update-box,.hr-var-tw .zt-article [class*="bg-blue"],.hr-var-tw .zt-article [class*="bg-sky"]{background-color:var(--hr-enamel)!important;border:1px solid var(--hr-line)!important;border-top:6px solid var(--hr-tomato)!important;border-radius:var(--hr-r-3)!important}
.hr-var-tw footer{background-color:var(--hr-iron)!important;border-top:0;border-bottom:0}
.hr-var-tw footer p,.hr-var-tw footer span{color:var(--hr-on-iron-2)}
.hr-var-tw footer a{color:var(--hr-on-iron)}
/* 5.19 HR_PRESALE_SKIN_V2 (visual fix round 2026-09-11): the rules below close the skin side of the presale visual QA (rounds/visual-fix-LOG.md) ---- */
/* running text: pretty wrapping against single-word orphans, the lead never hyphenates, brand tokens never break */
.presale-body p,.presale-body li,.presale-body blockquote p{text-wrap:pretty}
.presale-body .p-lead{hyphens:manual}
.presale-body .nb,.presale-body .p-nowrap{hyphens:manual;white-space:nowrap}
/* steps: tomato-text prep numerals on the ol, no balanced break inside a chip heading */
.presale-body ol>li::marker{color:var(--hr-tomato-text);font-family:var(--hr-display);font-weight:800;font-variant-numeric:tabular-nums}
.presale-body :is(h2,h3):has(> .p-step){text-wrap:pretty}
/* a photograph after a quote tray keeps the block rhythm */
.presale-body blockquote+img,.presale-body blockquote.p-quote+img,.presale-body blockquote+p>img:first-child{margin-top:24px}
/* lazy images paint as a stone-2 well while loading */
.presale-body img[loading=lazy]:not(.p-vector):not(.p-icon):not(.p-small):not(.p-packshot):not(.p-cutout):not(.p-product){background:var(--hr-stone-2)}
/* packshots and cut-outs (normaliser classes .p-packshot / .p-cutout / .p-product): the guide product well, enamel-2, contained, never a white slab in the wide column */
.presale-body img.p-packshot,.presale-body img.p-product,.presale-body img.p-cutout{display:block;width:auto;max-width:100%;max-height:420px;margin:8px auto 24px;padding:16px;background:var(--hr-enamel-2);border:1px solid var(--hr-line);border-radius:var(--hr-r-3);object-fit:contain;box-sizing:border-box}
.presale-body img.p-cutout{max-width:320px;max-height:320px}
/* display headings never hyphenate in the long-word languages either (the section 2 rule is (0,1,1); this one outranks it): the h1/h2 hyphenation items of the QA */
:is([lang=de],[lang=fi],[lang=hu],[lang=nl],[lang=sv],[lang=da],[lang=et],[lang=el],[lang=bg]) .presale-body :is(h1,h2,h3,h4,h5){hyphens:manual}
/* long headline step (presale-aerovinum#22, voltmill pl, trekspresso pt): the normaliser marks the title with data-h1-len="<n>" (visible characters); a title of 100 or more steps to 44 px at 1440 and one of 140 or more to 40 px, so a seven-line h1 becomes four or five; phones keep the 34 px floor (the clamp minimum). Prefix ladder because attribute selectors cannot compare numbers: the 1..39 exact values are excluded. */
.presale-body h1:is([data-h1-len^="1"],[data-h1-len^="2"],[data-h1-len^="3"]):not([data-h1-len="1"],[data-h1-len="2"],[data-h1-len="3"],[data-h1-len="10"],[data-h1-len="11"],[data-h1-len="12"],[data-h1-len="13"],[data-h1-len="14"],[data-h1-len="15"],[data-h1-len="16"],[data-h1-len="17"],[data-h1-len="18"],[data-h1-len="19"],[data-h1-len="20"],[data-h1-len="21"],[data-h1-len="22"],[data-h1-len="23"],[data-h1-len="24"],[data-h1-len="25"],[data-h1-len="26"],[data-h1-len="27"],[data-h1-len="28"],[data-h1-len="29"],[data-h1-len="30"],[data-h1-len="31"],[data-h1-len="32"],[data-h1-len="33"],[data-h1-len="34"],[data-h1-len="35"],[data-h1-len="36"],[data-h1-len="37"],[data-h1-len="38"],[data-h1-len="39"]){font-size:clamp(2.125rem,3.2vw,2.75rem)}
.presale-body h1:is([data-h1-len^="14"],[data-h1-len^="15"],[data-h1-len^="16"],[data-h1-len^="17"],[data-h1-len^="18"],[data-h1-len^="19"],[data-h1-len^="2"],[data-h1-len^="3"]):not([data-h1-len="14"],[data-h1-len="15"],[data-h1-len="16"],[data-h1-len="17"],[data-h1-len="18"],[data-h1-len="19"],[data-h1-len="2"],[data-h1-len="3"],[data-h1-len="20"],[data-h1-len="21"],[data-h1-len="22"],[data-h1-len="23"],[data-h1-len="24"],[data-h1-len="25"],[data-h1-len="26"],[data-h1-len="27"],[data-h1-len="28"],[data-h1-len="29"],[data-h1-len="30"],[data-h1-len="31"],[data-h1-len="32"],[data-h1-len="33"],[data-h1-len="34"],[data-h1-len="35"],[data-h1-len="36"],[data-h1-len="37"],[data-h1-len="38"],[data-h1-len="39"]){font-size:clamp(2.125rem,2.8vw,2.5rem)}
/* the brand byline chip on the meta row (normaliser: .p-meta-name[data-initial]): the same outlined iron chip as ul.p-byline .brand */
.presale-body .p-meta-name[data-initial],.presale-body .p-meta-name .brand[data-initial]{display:inline-flex;align-items:center;gap:8px}
.presale-body .p-meta-name[data-initial]::before,.presale-body .p-meta-name .brand[data-initial]::before{content:attr(data-initial);display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 5px;background:var(--hr-enamel);color:var(--hr-iron);border:1.5px solid var(--hr-iron);border-radius:var(--hr-r-1);font-family:var(--hr-display);font-weight:800;font-size:12px;letter-spacing:.04em;line-height:1}
/* the readout container the normaliser emits (.p-offer-rows > .p-offer-was + .p-offer-now, rows styled in 5.8) */
.presale-body .p-offer-rows{display:grid;gap:2px;max-width:360px;margin:0 auto 16px;text-align:start}
.presale-body .p-offer-rows>div,.presale-body .p-offer-rows dl{margin:0}
.presale-body .p-offer-rows dt{order:1;margin:0;font-family:var(--hr-display);font-weight:600;font-size:15px;color:var(--hr-mute)}
.presale-body .p-offer-rows dd{order:3;margin:0;font-family:var(--hr-display);font-weight:800;font-size:17px;color:var(--hr-text);font-variant-numeric:tabular-nums}
.presale-body .p-offer-rows dd s{color:var(--hr-mute);font-weight:600;font-size:15px}
.presale-body .p-offer-rows dd b{font-size:26px;line-height:1.2;color:var(--hr-text)}
/* legacy doc shapes until the normaliser lands (structure keyed, never a file name): extra h1s read as h2, Webflow icon rows become tick rows */
.presale-body :is(h1,h2,h3,.p-meta,img) ~ h1,.presale-body :is(h1,h2,h3,.p-meta,img) ~ * h1{font-size:clamp(28px,2.4vw,32px);line-height:1.1;margin:40px 0 16px}
.presale-body :is(h1,h2,h3,h4,.p-meta,img) ~ h1+p:not(.p-lead),.presale-body :is(h1,h2,h3,h4,.p-meta,img) ~ * h1+p:not(.p-lead),.presale-body :is(h2,h3,h4) ~ p+h1+p:not(.p-lead){font-family:var(--hr-text-face);font-size:18px;line-height:1.55;color:var(--hr-text);font-weight:400}   /* only the title's own paragraph is the dek */
.presale-body .p-feature>:first-child{margin-top:0}
.presale-body .p-feature>h2{font-size:22px;line-height:1.15;margin-bottom:6px}
.presale-body div[data-w-id]:has(> img.p-icon:first-child + div:last-child){display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:10px;align-items:start;margin:0 0 10px}
.presale-body div[data-w-id]:has(> img.p-icon:first-child + div:last-child)>img.p-icon{display:none}
.presale-body div[data-w-id]:has(> img.p-icon:first-child + div:last-child)::before{content:"";grid-column:1;grid-row:1;width:20px;height:20px;margin-top:4px;border-radius:var(--hr-r-3);background:var(--hr-ok) var(--hr-i-tick) center/18px 18px no-repeat}
.presale-body div[data-w-id]:has(> img.p-icon:first-child + div:last-child)>div{grid-column:2}
.presale-body div[data-w-id]:has(> img.p-icon:first-child + div:last-child) p{margin:0 0 4px}
/* 5.18b chrome on presale pages: the footer board laid out as DESIGN-SPEC 10.3 with the shipped markup: brand + disclosure at the inline start beside the guide columns, then the nameplate row, then the language row (the shipped div > p.h + ul.langs reads as the Read-in row), the consent reserve painted iron, the disclosure links 40 px tall, chip-less column heads on the chip baseline, the legal nav 2 + 2 on phones */
body[data-top5-presale-brand]{background:linear-gradient(to top,var(--hr-iron) 0 var(--ctr-pad,0px),var(--hr-stone) var(--ctr-pad,0px))}
body[data-top5-presale-brand] .foot .foot-cols{grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));gap:24px 24px}
body[data-top5-presale-brand] .foot .foot-cols.cols4{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr))}   /* the compact footer of SITES.homerated.footerCompact: brand + Cook/Drink/Care, Company and Read-in as their own rows */
body[data-top5-presale-brand] .foot .foot-cols.cols4>div:not(.foot-brand){grid-row:1/3}
body[data-top5-presale-brand] .foot .foot-cols>.foot-brand{display:contents}
body[data-top5-presale-brand] .foot .foot-cols>.foot-brand>.brand{grid-column:1;grid-row:1}
body[data-top5-presale-brand] .foot .foot-cols>.foot-brand>.note{grid-column:1;grid-row:2;margin:0;max-width:none;align-self:start}
body[data-top5-presale-brand] .foot .foot-cols>.foot-brand>.pub{grid-column:1/-1;order:5;margin:8px 0 0;padding-top:20px;border-top:1px solid var(--hr-iron-line)}
body[data-top5-presale-brand] .foot .foot-cols>div:not(.foot-brand):not(:has(> ul.langs)){grid-row:1/3}
body[data-top5-presale-brand] .foot .foot-cols>div:has(> ul.langs){grid-column:1/-1;order:6;display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;padding-top:16px;border-top:1px solid var(--hr-iron-line)}
body[data-top5-presale-brand] .foot .foot-cols>div:has(> ul.langs)>.h{margin:0;margin-inline-end:8px}
body[data-top5-presale-brand] .foot ul.langs{display:flex;flex-wrap:wrap;gap:2px 4px;flex:1 1 auto;grid-template-columns:none}
body[data-top5-presale-brand] .foot ul.langs li{display:block}
body[data-top5-presale-brand] .foot ul.langs a{padding:4px 8px;min-height:40px;border-radius:var(--hr-r-1);white-space:nowrap;overflow-wrap:normal;hyphens:manual}
body[data-top5-presale-brand] .foot .note a{display:inline-block;padding-block:11px;margin-block:-11px}
body[data-top5-presale-brand] .foot .h{min-height:22px}
body[data-top5-presale-brand] .foot .copy .foot-nav a[href="/get-in-touch"]{display:none}   /* Get in touch once: the Company column lists it (inert once the shared partial drops it from the legal nav) */
/* the homepage footer structure, when the shared footer partial emits it on presales (div.company, div.readin, div.legal) */
body[data-top5-presale-brand] .foot .company{margin-top:32px;padding-top:16px;border-top:1px solid var(--hr-iron-line);display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
body[data-top5-presale-brand] .foot .readin{margin-top:12px;display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px}
body[data-top5-presale-brand] .foot :is(.company,.readin) .h{font-family:var(--hr-display);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--hr-on-iron);margin:0;margin-inline-end:12px}
body[data-top5-presale-brand] .foot :is(.company,.readin) a{display:inline-flex;align-items:center;min-height:40px;padding:4px 8px;border-radius:var(--hr-r-1);color:var(--hr-on-iron);text-decoration:none}
body[data-top5-presale-brand] .foot :is(.company,.readin) a:hover{text-decoration:underline;text-decoration-color:var(--hr-tomato-lit);text-decoration-thickness:2px;text-underline-offset:4px}
body[data-top5-presale-brand] .foot .readin a.cur{color:var(--hr-tomato-lit);font-weight:700}
body[data-top5-presale-brand] .foot .legal{margin-top:24px;padding-top:24px;border-top:1px solid var(--hr-iron-line);display:grid;gap:16px}
body[data-top5-presale-brand] .foot .legal p{max-width:100ch;font-size:14px;margin:0}
body[data-top5-presale-brand] .foot .legal .row{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;font-size:14px}
body[data-top5-presale-brand] .foot .legal .row nav{display:flex;flex-wrap:wrap;gap:4px 8px;margin-inline-start:auto;font-family:var(--hr-display);font-weight:700;font-size:14px}
body[data-top5-presale-brand] .foot .legal .row nav a{display:inline-flex;align-items:center;min-height:40px;padding:4px 8px;border-radius:var(--hr-r-1);color:var(--hr-on-iron);text-decoration:none}
[lang=he] body[data-top5-presale-brand] .foot :is(.company,.readin) .h{letter-spacing:.02em;text-transform:none}
@media(max-width:1023px){body[data-top5-presale-brand] .foot .foot-cols,body[data-top5-presale-brand] .foot .foot-cols.cols4{grid-template-columns:repeat(3,minmax(0,1fr))}body[data-top5-presale-brand] .foot .foot-cols.cols4>div:not(.foot-brand){grid-row:auto}body[data-top5-presale-brand] .foot .foot-cols>.foot-brand>.brand,body[data-top5-presale-brand] .foot .foot-cols>.foot-brand>.note,body[data-top5-presale-brand] .foot .foot-cols>.foot-brand>.pub{grid-column:1/-1;grid-row:auto}body[data-top5-presale-brand] .foot .foot-cols>.foot-brand>.note{max-width:64ch}body[data-top5-presale-brand] .foot .foot-cols>div:not(.foot-brand):not(:has(> ul.langs)){grid-row:auto}}
@media(max-width:640px){body[data-top5-presale-brand] .foot .foot-cols,body[data-top5-presale-brand] .foot .foot-cols.cols4{grid-template-columns:1fr 1fr}body[data-top5-presale-brand] .sitebar .adv{padding-inline-start:12px;text-align:end;max-width:60%;line-height:1.25}body[data-top5-presale-brand] .foot .legal .row nav{margin-inline:-8px}body[data-top5-presale-brand] .foot :is(.company,.readin) .h{margin-inline-start:8px}}   /* the row is pulled -8px so the link TEXT meets the content edge (section 4c); the head takes the 8 px back */

/* 5.20 HR_PRESALE_SKIN_V2 part 3 (2026-09-12 presale leftover round): the skin items the 13 verifiers left open. 5.5 and 5.8 carry the
   meta-chip and trust-chip edits inline (a wrapped rating chip starts at the inline start; the trust chips are a centred wrapping row sized
   to their labels, so one long label never sets a two-line chip beside one-liners: hakusteel-new-06, zealix-new-04, thermoready-new-03,
   corkease-new-02, fuzzfix-new-01, sensorfresh-new-04, steamcouture-new-03). */
body[data-top5-presale-brand] .foot .legal-line{direction:inherit;unicode-bidi:isolate}   /* he: the entity sentence is laid out in the page direction; the shared .co rule forced ltr (presale-zealix-new-02) */
@media(max-width:640px){
html:not([dir=rtl]) body[data-top5-presale-brand] .foot .pub .row{display:block;margin-inline-end:0}   /* the phone nameplate stacks as rows, no separator dangling at a line end (fuzzfix-new-03, sensorfresh-new-03) */
html:not([dir=rtl]) body[data-top5-presale-brand] .foot .pub .row:not(:last-child)::after{content:none}
body[data-top5-presale-brand] .foot .company{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 8px;align-items:center}   /* the Company row 2 + 2, never 3 + 1 (thermoready-new-01) */
body[data-top5-presale-brand] .foot .company .h{grid-column:1/-1}
body[data-top5-presale-brand] .foot .legal .row nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 8px;flex:1 1 100%}   /* the legal nav in two columns, an odd last link spans the row instead of standing alone (thermoready#24 fi) */
body[data-top5-presale-brand] .foot .legal .row nav a:last-child:nth-child(odd){grid-column:1/-1}
.presale-body .p-offer-trust{flex-direction:column;align-items:stretch}   /* phones keep the stacked tick list of trust chips */
.presale-body h1:is([data-h1-len^="1"],[data-h1-len^="2"],[data-h1-len^="3"]):not([data-h1-len="1"],[data-h1-len="2"],[data-h1-len="3"],[data-h1-len="10"],[data-h1-len="11"],[data-h1-len="12"],[data-h1-len="13"],[data-h1-len="14"],[data-h1-len="15"],[data-h1-len="16"],[data-h1-len="17"],[data-h1-len="18"],[data-h1-len="19"],[data-h1-len="20"],[data-h1-len="21"],[data-h1-len="22"],[data-h1-len="23"],[data-h1-len="24"],[data-h1-len="25"],[data-h1-len="26"],[data-h1-len="27"],[data-h1-len="28"],[data-h1-len="29"],[data-h1-len="30"],[data-h1-len="31"],[data-h1-len="32"],[data-h1-len="33"],[data-h1-len="34"],[data-h1-len="35"],[data-h1-len="36"],[data-h1-len="37"],[data-h1-len="38"],[data-h1-len="39"]){font-size:2rem}   /* a title of 100 or more characters takes the 32 px phone floor of DESIGN-SPEC 10.3, 140 or more 30 px; short titles keep 34 px (voltmill-new-02, steamcouture-new-04) */
.presale-body h1:is([data-h1-len^="14"],[data-h1-len^="15"],[data-h1-len^="16"],[data-h1-len^="17"],[data-h1-len^="18"],[data-h1-len^="19"],[data-h1-len^="2"],[data-h1-len^="3"]):not([data-h1-len="14"],[data-h1-len="15"],[data-h1-len="16"],[data-h1-len="17"],[data-h1-len="18"],[data-h1-len="19"],[data-h1-len="2"],[data-h1-len="3"],[data-h1-len="20"],[data-h1-len="21"],[data-h1-len="22"],[data-h1-len="23"],[data-h1-len="24"],[data-h1-len="25"],[data-h1-len="26"],[data-h1-len="27"],[data-h1-len="28"],[data-h1-len="29"],[data-h1-len="30"],[data-h1-len="31"],[data-h1-len="32"],[data-h1-len="33"],[data-h1-len="34"],[data-h1-len="35"],[data-h1-len="36"],[data-h1-len="37"],[data-h1-len="38"],[data-h1-len="39"]){font-size:1.875rem}
}
/* ---- 8. consent banner (hr_consent, consent.js #ctr-consent): the enamel card with the iron rim and the 6 px tomato tape, tomato Accept, ghost Reject ---- */
#ctr-consent,[data-consent-banner]{background:var(--hr-enamel)!important;color:var(--hr-text)!important;border:var(--hr-rim) solid var(--hr-iron)!important;border-radius:var(--hr-r-2)!important;box-shadow:none!important;font-family:var(--hr-text-face)!important;font-size:16px!important;overflow:hidden}
#ctr-consent::before{content:"";position:absolute;inset-inline:0;top:0;height:6px;background:var(--hr-tomato)}
#ctr-consent p,#ctr-consent a,[data-consent-banner] a{color:var(--hr-text)!important;text-decoration-color:var(--hr-tomato)!important}
#ctr-consent a:hover{color:var(--hr-tomato-text)!important}
#ctr-consent button,[data-consent-banner] button{font-family:var(--hr-display)!important;font-weight:800!important;text-transform:none!important;letter-spacing:.01em!important;border-radius:var(--hr-r-1)!important;min-height:48px}
#ctr-consent #ctr-yes{background:var(--hr-tomato)!important;color:#fff!important;border:2px solid var(--hr-tomato)!important}
#ctr-consent #ctr-yes:hover{background:var(--hr-iron)!important;border-color:var(--hr-iron)!important;color:var(--hr-on-iron)!important}
#ctr-consent #ctr-no{background:transparent!important;color:var(--hr-text)!important;border:2px solid var(--hr-iron)!important}
#ctr-consent #ctr-no:hover{background:var(--hr-iron)!important;color:var(--hr-on-iron)!important}
#ctr-consent button:focus-visible,#ctr-consent a:focus-visible{outline:3px solid var(--hr-iron)!important;outline-offset:3px;box-shadow:0 0 0 7px var(--hr-tomato-tint)!important}

/* ---- 4c-3. HR_GUIDE_SKIN_V2 part 2 (2026-09-12 leftover round): the guide items the 13 verifiers left open. Appended at the END of the
   file so equal-specificity rules here win on order over 4c-2's tail; presale sections 5-7 untouched (SKIN FILE LAW). ---- */
/* FLEX-ITEM LAW: a tile title carries <bdi class=money> and text runs, so it is a block again; the 46 px header row is kept by padding */
.tile h3{display:block;box-sizing:border-box;min-height:46px;padding-block:calc((46px - 1.25em) / 2)}
/* 15 px floor on light: the price label, the score word, the position, the language chip, the rail labels; the chevron follows its button */
.pos,.price-label,.score-word{font-size:15px}
.langsel summary{font-size:15px}
.strip a{font-size:15px}
.cta .flip,.btn .flip{font-size:1em}
/* the pain-point mark is the cons mark (the warn cross on its tint): one cross language on the page, no outlined box that reads as a dismiss control */
.opener p.q::before{border:0;background:var(--hr-warn-tint) var(--hr-i-cross) center/14px 14px no-repeat}
/* the masthead label never breaks inside a word; above 640 the row has room and the label sets on one line */
.sitebar .adv{overflow-wrap:normal;hyphens:none;word-break:keep-all}
@media(min-width:641px){.sitebar .adv{max-width:none;white-space:nowrap}}
/* the deal box in the offer column (HR_GUIDE_VISUAL_V1 part 3): start-aligned between the score chip and the button */
.listing-side .deal-box{margin:0;text-align:start}
/* a trimmed review figure keeps the served derivative's own aspect: the stale crop box letterboxed the photo (78 px of stone under it at 1440) */
.review-hero.is-trimmed,.review-figure.is-trimmed{aspect-ratio:auto;height:auto}
.review-hero.is-trimmed img,.review-figure.is-trimmed img{transform:none!important}
/* the footer board: the code chip sits on the first line of a wrapped label */
.foot .fcol li a{align-items:start;padding-block:9px 7px}
/* phone display headings: a compound is not hyphenated where it fits the line (antihaftbe-schichteten, pluizenverwij-deraars); only a word of 22+ characters may break */
@media(max-width:999px){.hero h1,.long-review h2{hyphenate-limit-chars:22 10 8}}
@media(max-width:640px){
  /* Drink and Care share the right column beside the taller Cook list: no empty half-row on the board */
  .foot .foot-cols.cols4 .fcol:nth-child(2){grid-row:span 2}
  /* the rail: five labels at 15 px fit the phone ribbon without their pictograms */
  .strip a .ico{display:none}
  .strip a{padding:0 6px}
  .strip .wrap{gap:4px}
  .pos,.price-label,.score-word,.trust .meet{font-size:15px}
}
@media(max-width:899px){
  /* the price row: the label on its own line, the price and the struck was-price together on the next (no 1 px knife edge in any language) */
  .price-label{flex:0 0 100%}
  .price-block{row-gap:0}
  /* the review link leaves the 104 px thumbnail column: one line across the card under the thumbnail row */
  .listing-media{display:contents}
  .listing-media .prod-img{grid-column:1;grid-row:1/span 4;align-self:start;position:static;margin:0}
  .listing-media .review-link{grid-column:1/-1;grid-row:5;margin-top:6px;text-wrap:pretty}
  /* the final offer keeps its well on phones: the image spans the title and copy rows, the button spans the card */
  .final-offer > div:not(.prod-img){display:contents}
  .final-offer > .prod-img{display:block;grid-column:1;grid-row:1/3;width:112px;aspect-ratio:1/1;padding:8px;box-sizing:border-box;background:var(--hr-enamel);border:1px solid var(--hr-line);border-radius:var(--hr-r-3);float:none;margin:0}
  .final-offer h2,.final-offer h3.name{grid-column:2;grid-row:1;align-self:start;margin:0}
  .final-offer p{grid-column:2;grid-row:2;margin:0}
  .final-offer .cta{grid-column:1/-1;grid-row:3}
  /* the deal box under the score chip and button row on phones; the he button at the same 15 px as every other language */
  .listing-side .deal-box{grid-column:1/-1}
  [lang=he] .listing-side .cta{font-size:15px}
}