/* rp-skin3.css: RestPicked DESIGN v2, the skin of the SHARED Top5BestValue templates the app renders (the guides RP_T5_BODY_V1, the
   reviews RP_T5_PRESALE_BODY_V1 of both body kinds). RP_SKIN3_V1 v=20260928c (wave 11 DESIGN v2, the SKIN builder lane, 2026-09-28): built by
   design2/build/skin/make-skin3.py from the approved final mockup skin design2/final/mock/rp-v2.css (revision r2.1, md5 94d3ce1f5a15) and the faces
   of design2/build/skin/fonts2/fonts2.css, on DESIGN-SPEC-V2 sections 3 to 6 and 8 to 10. The system: a white sheet, ink type in Inter Tight
   (display) over Inter (text), Heebo in the same stack for Hebrew, one hot accent that fills the owned buttons and nothing else, thin ink
   marks, the score as a tabular reading, the price as a receipt row, the deal facts as ledger rows, the winner as the only framed sheet, the
   rivals as rows, the review's own button pinned as a bar, the bar of 8.3 drawn when the app prints it. No shadow, no tint, one radius on
   actions, rules instead of cards. Loaded after the template's inline style (SKIN ORDER LAW) in place of rp-skin2.css, which stays untouched
   in the docroot. No node moved, added, hidden or removed (the one hide is the footer group head's letter tile). Logical properties where the
   template allows (he mirrors); a positioned label keeps the template's physical corner. Section 1 inlines the seventeen face rules (nine
   woff2 from /fonts/rp/v2/ with unicode-range and font-display swap, eight fallback families with computed metric overrides: the swap moves
   no line). Character law: no em dash, no en dash, no exclamation character in this file. */

/* ---- 1. self-hosted faces (/fonts/rp/v2/, per script with unicode-range: Inter Tight 600 to 800, Inter 400 to 700, Heebo 400 to 800; the
   latin-ext files are local fontTools subsets; then the fallback families with size-adjust and the ascent, descent and line gap overrides) ---- */
@font-face{font-family:'Heebo';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/rp/v2/Heebo-hebrew-26d34c3fcf.woff2) format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/rp/v2/Inter-cyrillic-9f73b2f43e.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/rp/v2/Inter-greek-c68aff863e.woff2) format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/rp/v2/Inter-latin-ext-ef1588119f.woff2) format('woff2');unicode-range:U+0100-024F, U+02BB-02FF, U+0300-036F, U+1E9E, U+2020, U+20A0-20C0, U+2113}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/rp/v2/Inter-latin-f11d729bb0.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}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600 800;font-display:swap;src:url(/fonts/rp/v2/InterTight-cyrillic-8beeaad1d2.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600 800;font-display:swap;src:url(/fonts/rp/v2/InterTight-greek-721b69551c.woff2) format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600 800;font-display:swap;src:url(/fonts/rp/v2/InterTight-latin-ext-4f37b12764.woff2) format('woff2');unicode-range:U+0100-024F, U+02BB-02FF, U+0300-036F, U+1E9E, U+2020, U+20A0-20C0, U+2113}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600 800;font-display:swap;src:url(/fonts/rp/v2/InterTight-latin-4179443c53.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}
@font-face{font-family:'Inter Tight Fallback';font-style:normal;font-weight:600 800;src:local('Arial Bold'),local('Liberation Sans Bold');size-adjust:97.94%;ascent-override:98.92%;descent-override:24.63%;line-gap-override:0.00%}
@font-face{font-family:'Inter Fallback';font-style:normal;font-weight:400 500;src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans');size-adjust:107.48%;ascent-override:90.14%;descent-override:22.44%;line-gap-override:0.00%}
@font-face{font-family:'Inter Fallback';font-style:normal;font-weight:600 700;src:local('Arial Bold'),local('Liberation Sans Bold');size-adjust:101.32%;ascent-override:95.61%;descent-override:23.81%;line-gap-override:0.00%}
@font-face{font-family:'Heebo Fallback';font-style:normal;font-weight:400 500;src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans');size-adjust:104.70%;ascent-override:100.08%;descent-override:40.20%;line-gap-override:0.00%}
@font-face{font-family:'Heebo Fallback';font-style:normal;font-weight:600 800;src:local('Arial Bold'),local('Liberation Sans Bold');size-adjust:106.46%;ascent-override:98.43%;descent-override:39.54%;line-gap-override:0.00%}
@font-face{font-family:'Inter Tight Fallback Roboto';font-style:normal;font-weight:600 800;src:local('Roboto Bold'),local('Roboto-Bold');size-adjust:104.09%;ascent-override:93.07%;descent-override:23.17%;line-gap-override:0.00%}
@font-face{font-family:'Inter Fallback Roboto';font-style:normal;font-weight:400 500;src:local('Roboto'),local('Roboto Regular'),local('Roboto-Regular');size-adjust:106.91%;ascent-override:90.62%;descent-override:22.56%;line-gap-override:0.00%}
@font-face{font-family:'Inter Fallback Roboto';font-style:normal;font-weight:600 700;src:local('Roboto Bold'),local('Roboto-Bold');size-adjust:107.68%;ascent-override:89.96%;descent-override:22.40%;line-gap-override:0.00%}

/* ---- 2. tokens (DESIGN-SPEC-V2 sections 4 and 3.3) ---- */
:root{
  --ink:#0F1112;--ink-2:#33383C;--mute:#5F6469;--paper:#FFFFFF;--well:#F5F4F1;--line:#E5E3DE;--line-2:#C8C5BF;--mark:#8A9299;
  --hot:#FF5A1F;--hot-2:#F04E12;--hot-text:#C2410C;
  --display:"Inter Tight","Heebo","Inter Tight Fallback","Inter Tight Fallback Roboto",system-ui,Arial,sans-serif;
  --text:"Inter","Heebo","Inter Fallback","Inter Fallback Roboto",system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  --t-label:14px;--t-ui:16px;--t-body:18px;--t-lede:20px;--t-h3:24px;--t-h2s:28px;--t-h2:36px;--t-h1:40px;--t-num:64px;
  --r:6px;--wrap:1232px;--gutter:24px;--measure:700px;--t:120ms;
  --i-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.6l3.3 3.3L13 5' fill='none' stroke='%230F1112' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-cross:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7' fill='none' stroke='%238A9299' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --i-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.4l2.05 4.3 4.75.55-3.5 3.25 0.95 4.7L8 11.85l-4.25 2.35 0.95-4.7-3.5-3.25 4.75-.55z' fill='%230F1112'/%3E%3C/svg%3E");
  --i-star-off:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.4l2.05 4.3 4.75.55-3.5 3.25 0.95 4.7L8 11.85l-4.25 2.35 0.95-4.7-3.5-3.25 4.75-.55z' fill='%23C8C5BF'/%3E%3C/svg%3E");
}
:lang(he){--display:"Heebo","Inter Tight","Heebo Fallback","Inter Tight Fallback Roboto",system-ui,Arial,sans-serif;--text:"Heebo","Inter","Heebo Fallback","Inter Fallback Roboto",system-ui,Arial,sans-serif}
@media (prefers-reduced-motion:reduce){:root{--t:0s}}
/* the phone h1 is continuous (revision, builder item 3): clamp(22px, 7.1vw, 30px) fits every one of the 286 guide h1 segments (the longest,
   fi "kokovartalohierontamattoa," 374.8 px at 30 px) in the column at every width from 320 up, with no language factor and no 360 step */
@media (max-width:760px){:root{--t-h3:22px;--t-h2s:24px;--t-h2:28px;--t-h1:clamp(22px,7.1vw,30px);--t-num:44px;--gutter:16px}}
@media (max-width:360px){:root{--t-h2:26px;--t-h2s:23px}}

/* ---- 3. the page ---- */
html{-webkit-text-size-adjust:100%;background:var(--paper)}
body{font-family:var(--text);font-size:var(--t-body);line-height:1.6;color:var(--ink);background:var(--paper);font-kerning:normal;font-synthesis:none;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
h1,h2,h3,h4,h5{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.08;color:var(--ink);font-variant-numeric:lining-nums;text-wrap:balance;hyphens:manual;overflow-wrap:break-word}
:lang(he) :is(h1,h2,h3,h4,h5){letter-spacing:0;line-height:1.16}
b,strong{font-weight:700}
i,em{font-style:normal}
a{transition:color var(--t),background-color var(--t),border-color var(--t)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
bdi{unicode-bidi:isolate}
.nb{white-space:nowrap}
.co{unicode-bidi:isolate}
#ctr-consent{display:none}
body[data-dr] :is(.langsel,nav.strip){display:none}
.wrap{max-width:var(--wrap);padding:0 var(--gutter)}
.article{background:var(--paper)}

/* ---- 4. the sitebar: the wordmark and the legal tag on a hairline; static (the offer is what persists) ---- */
.sitebar{position:static;background:var(--paper);border-bottom:1px solid var(--line)}
.sitebar .wrap{min-height:56px;padding-top:6px;padding-bottom:6px;gap:16px}
.sitebar .rp-logo{min-height:44px;display:inline-flex;align-items:center;flex:none}
.sitebar .rp-logo img{height:26px;width:auto;max-width:58vw;display:block}
.sitebar .adv{display:inline-flex;align-items:center;min-height:32px;padding:0 10px;border:1px solid var(--line-2);border-radius:4px;background:var(--paper);font-family:var(--text);font-weight:600;font-size:var(--t-label);line-height:1;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
:lang(he) .sitebar .adv{letter-spacing:0}

/* ---- 5. the guide ---- */
/* 5.1 the opening (5.1): the headline in ink on white at the wrap, the verification line as a small fact; no band */
.hero{background:var(--paper);background-image:none;color:var(--ink);max-width:var(--wrap);margin:0 auto;padding:20px var(--gutter) 10px;text-align:start;border-bottom:1px solid var(--line)}
.hero h1{font-family:var(--display);font-weight:800;font-size:var(--t-h1);line-height:1.04;letter-spacing:-.03em;max-width:36ch;margin:0;color:var(--ink)}
:lang(he) .hero h1{letter-spacing:0;line-height:1.14}
.hero .verify{margin-top:8px;font-family:var(--text);font-size:var(--t-label);font-weight:500;line-height:1.4;color:var(--mute);opacity:1;letter-spacing:0}
/* 5.2 the opener (5.2): the three pain lines with a thin ink mark, the plain lines at the measure; two balanced columns at desktop */
.opener{padding:10px 0 0}
.opener p{font-size:var(--t-body);line-height:1.6;color:var(--ink-2);margin:0 0 8px;max-width:var(--measure)}
@media (min-width:1024px){.opener{columns:2;column-gap:48px;column-fill:balance}.opener p{max-width:none;break-inside:avoid;line-height:1.55}.opener p.q+p:not(.q){margin-top:0}}
.opener p.q{position:relative;font-weight:600;color:var(--ink);padding-inline-start:32px;line-height:1.45;margin-bottom:12px}
.opener p.q::before{content:"";position:absolute;inset-inline-start:0;top:2px;width:20px;height:20px;margin:0;border-radius:0;background:var(--i-tick) center/20px no-repeat}
.opener p.q+p:not(.q){margin-top:24px}
/* 5.3 the picks heading (5.3): a section starts on a 2 px ink rule */
.flow-h{font-family:var(--display);font-weight:800;font-size:var(--t-h2);line-height:1.06;letter-spacing:-.03em;margin:12px 0 10px;padding-top:10px;border-top:2px solid var(--ink);color:var(--ink)}
:lang(he) .flow-h{letter-spacing:0}
/* 5.4 the cards (5.3, 5.4): the winner is the only framed sheet; the rivals are rows on line-2 rules; three columns: packshot, receipt cluster, decision */
.listing{position:relative;background:none;border:0;border-top:1px solid var(--line-2);border-radius:0;box-shadow:none;margin:0;padding:28px 0 32px}
.listing.featured{background:var(--paper);border:2px solid var(--ink);padding:16px 24px 24px;margin:0 0 8px}
.listing.featured+.listing{border-top:0;padding-top:24px}
.listing-rank{top:-1px;left:0;right:auto;background:var(--ink);color:#fff;font-family:var(--display);font-weight:700;font-size:var(--t-label);line-height:1;padding:8px 10px;border-radius:0;box-shadow:none;font-variant-numeric:tabular-nums}
.listing.featured .listing-rank{top:-2px;left:-2px;background:var(--ink);color:#fff}
.listing-cols{display:grid;grid-template-columns:240px minmax(0,1fr) 288px;gap:0 32px;align-items:start}
.listing.featured .listing-cols{grid-template-columns:360px minmax(0,1fr) 288px}
.listing-media{grid-column:1;grid-row:1 / span 5;flex:none;width:auto;min-width:0}
.listing-main{display:contents}
.listing-main>*{grid-column:2;min-width:0}
.badge-row{grid-row:1}
.listing-main>h3{grid-row:2}
.price-block{grid-row:3}
.rating-row{grid-row:4}
.deal-box{grid-row:5}
.listing-main>ul.benefits{grid-column:1 / span 2;grid-row:6;columns:2;column-gap:32px}
.listing-main>ul.drawbacks{grid-column:1 / span 2;grid-row:7;columns:2;column-gap:32px}
.listing-side{grid-column:3;grid-row:1 / span 5;flex:none;width:auto;display:flex;flex-direction:column;gap:12px;align-items:stretch;text-align:start;position:static;min-width:0}
/* the winner at 1024 and up (revision, media buyer item 5): the ticks join the card grid; the last three (the commerce facts: the offer, the
   guarantee, the delivery) sit in the decision column directly under the button as 14 px facts, the others pair up in columns 1 and 2 */
@media (min-width:1024px){
  /* the winner's rows: the media 1 to 7, the receipt cluster 1 to 4 then the ledger over 5 to 7, the decision column 1 to 4, the three facts in
     rows 5, 6 and 7 beside the ledger (so they start where the side note ends), the feature ticks from row 8 */
  .listing.featured .listing-cols{grid-auto-flow:row dense}
  .listing.featured .listing-media{grid-row:1 / span 7}
  .listing.featured .listing-side{grid-row:1 / span 4}
  .listing.featured .deal-box{grid-row:5 / span 3;align-self:start}
  .listing.featured .listing-main>ul.benefits{display:contents}
  .listing.featured ul.benefits>li{grid-column:1;grid-row:auto;margin:0 0 10px;min-width:0}
  .listing.featured ul.benefits>li:nth-child(even){grid-column:2}
  .listing.featured ul.benefits>li:nth-last-child(-n+3){grid-column:3;font-size:var(--t-label);font-weight:500;line-height:1.4;margin:0 0 6px;color:var(--ink)}
  .listing.featured ul.benefits>li:nth-last-child(3){grid-row:5;margin-top:2px}
  .listing.featured ul.benefits>li:nth-last-child(2){grid-row:6}
  .listing.featured ul.benefits>li:nth-last-child(1){grid-row:7}
  .listing.featured ul.benefits>li:nth-last-child(-n+3) .check{flex-basis:16px;width:16px;height:16px;background-size:16px;margin-top:1px}
  .listing.featured .listing-main>ul.drawbacks{grid-row:auto}
}
@media (min-width:1024px) and (max-width:1179px){
  .listing-cols{grid-template-columns:220px minmax(0,1fr) 260px;gap:0 24px}
  .listing.featured .listing-cols{grid-template-columns:280px minmax(0,1fr) 260px}
}
.prod-img{background:var(--paper);border:1px solid var(--line);border-radius:0;min-height:0;aspect-ratio:4/3;padding:8px}
.prod-img.tall{min-height:0}
.prod-img img{object-fit:contain;width:100%;height:100%;max-height:none}
.listing:not(.featured) .prod-img{background:var(--well);border:0;padding:12px}
.listing:not(.featured) .prod-img img{mix-blend-mode:multiply}
.prod-img.placeholder span{color:var(--mute);font-size:var(--t-label)}
.review-link{display:inline-flex;align-items:center;min-height:44px;margin-top:0;color:var(--ink);font-family:var(--text);font-size:var(--t-label);font-weight:600;text-decoration:underline;text-decoration-color:var(--ink);text-decoration-thickness:1px;text-underline-offset:4px;text-align:start}
.review-link:hover{color:var(--hot-text);text-decoration-color:var(--hot)}
.badge-row{gap:8px 10px;flex-wrap:wrap;margin-bottom:10px;align-items:center}
.badge{background:var(--paper);color:var(--ink);border:1px solid var(--line-2);font-family:var(--text);font-weight:600;font-size:var(--t-label);line-height:1;letter-spacing:.06em;text-transform:uppercase;padding:6px 8px;border-radius:4px}
.listing.featured .badge{background:var(--ink);color:#fff;border-color:var(--ink)}
.pos{font-family:var(--text);font-size:var(--t-label);font-weight:600;color:var(--mute);letter-spacing:.06em;text-transform:uppercase;line-height:1.3;font-variant-numeric:tabular-nums}
:lang(he) :is(.badge,.pos){letter-spacing:0}
.listing-main h3{font-family:var(--display);font-weight:800;font-size:var(--t-h2s);line-height:1.08;letter-spacing:-.02em;margin:0 0 8px;color:var(--ink)}
.rating-row{gap:4px 10px;font-size:var(--t-label);color:var(--mute);margin-bottom:12px;line-height:1.4}
.rating-row strong{color:var(--ink);font-weight:600}
.rating-row em{color:var(--mute);font-style:normal}
/* the stars are drawn marks like the ticks (revision, builder item 15): no hosted face carries U+2605, so the glyph prints at 0 px and the
   mark is the background; the row keeps its role img and its label */
.stars{display:inline-flex;gap:1px;line-height:1;unicode-bidi:isolate;direction:ltr}
.stars .star{display:inline-block;width:14px;height:14px;font-size:0;line-height:0;color:transparent;overflow:hidden;background:var(--i-star-off) center/14px no-repeat}
.stars .star.on{background-image:var(--i-star)}
/* the price as a receipt row (the d graft): the label at the start, the struck list price then the price today at the inline end */
.price-block{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin:0 0 12px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.price-label{font-family:var(--text);font-size:var(--t-label);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);order:1}
.price-was{order:2;margin-inline-start:auto;color:var(--mute);font-size:var(--t-ui);text-decoration-thickness:1px;font-variant-numeric:tabular-nums lining-nums}
.price-now{order:3;font-family:var(--display);color:var(--ink);font-size:var(--t-h2s);font-weight:800;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums}
.price-block:not(:has(.price-was)) .price-now{margin-inline-start:auto}
[dir=rtl] :is(.price-now,.price-was){direction:ltr;unicode-bidi:isolate}
/* 5.5 ticks and crosses: thin marks, no squares, no discs (CHECKMARK LAW: the glyph at 0 px, the mark drawn) */
.benefits{margin:0 0 4px}
.benefits li{gap:10px;font-size:var(--t-ui);line-height:1.45;margin:0 0 8px;color:var(--ink);break-inside:avoid}
.benefits .check,.drawbacks .cross{flex:0 0 18px;width:18px;height:18px;margin-top:2px;border-radius:0;font-size:0;line-height:0;color:transparent;overflow:hidden;border:0;background:none}
.benefits .check{background:var(--i-tick) center/18px no-repeat}
.drawbacks{margin:4px 0 4px}
.drawbacks li{gap:10px;font-size:var(--t-ui);line-height:1.45;margin:0 0 8px;color:var(--ink-2);break-inside:avoid}
.drawbacks .cross{background:var(--i-cross) center/18px no-repeat}
/* 5.6 the deal box as a ledger (the d graft): three hairline rows, the offer line in ink, no bar, no tint, no dash */
.deal-box{display:grid;gap:0;border:0;border-top:1px solid var(--line);background:none;border-radius:0;padding:0;margin:0 0 16px}
.deal-box>*{padding:8px 0;border-bottom:1px solid var(--line)}
.deal-box strong{color:var(--ink);font-family:var(--display);font-size:var(--t-h3);font-weight:800;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums lining-nums}
.deal-box span{font-size:var(--t-label);font-weight:500;color:var(--ink);line-height:1.4}
.deal-box em{font-size:var(--t-label);color:var(--mute);font-style:normal;line-height:1.4}
/* 5.7 the decision column: the score as an instrument reading, the button, the note */
.score-box{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-items:center;align-content:center;column-gap:12px;row-gap:2px;background:none;border:0;border-top:2px solid var(--ink);border-radius:0;padding:10px 0 4px;text-align:start}
.score-box .score-num{grid-column:1;grid-row:1 / span 2;align-self:center}
.score-box .score-word{grid-column:2;grid-row:1;align-self:end;margin:0}
.score-box .stars{grid-column:2;grid-row:2;align-self:start}
.listing.featured .score-box{background:none;border-color:var(--ink)}
.score-num{font-family:var(--display);font-weight:800;font-size:var(--t-num);line-height:1;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.listing:not(.featured) .score-num{font-size:var(--t-h2)}
.score-word{font-family:var(--text);font-size:var(--t-label);font-weight:600;color:var(--mute);letter-spacing:.06em;text-transform:uppercase;line-height:1.2}
:lang(he) .score-word{letter-spacing:0}
.score-box .stars .star{width:12px;height:12px;background-size:12px}
.cta{display:flex;align-items:center;justify-content:center;gap:6px;min-height:56px;background:var(--hot);color:var(--ink);border:0;font-family:var(--text);font-weight:600;font-size:var(--t-ui);line-height:1.2;letter-spacing:0;text-decoration:none;text-align:center;padding:14px 18px;border-radius:var(--r);text-transform:none;box-shadow:none;font-variant-numeric:tabular-nums}
.cta:hover{background:var(--hot-2);color:var(--ink)}
.cta-block{display:flex;width:100%}
.listing-side .cta{padding:14px 12px}
/* the rival's Amazon anchor is a TEXT LINK, not a button (revision, media buyer item 4): no object on the page but the owned button has a
   button's shape; the string, the chevron and the new tab as printed */
.listing .cta:not([data-top5-owned-checkout]){display:inline-flex;align-self:flex-start;justify-content:flex-start;min-height:44px;padding:0;background:none;color:var(--ink);border:0;border-radius:0;font-size:var(--t-ui);font-weight:600;text-decoration:underline;text-decoration-color:var(--line-2);text-decoration-thickness:1px;text-underline-offset:5px;text-align:start}
.listing .cta:not([data-top5-owned-checkout]):hover{background:none;color:var(--hot-text);text-decoration-color:var(--hot)}
.side-note{font-size:var(--t-label);line-height:1.4;color:var(--mute);margin:0}
/* 5.8 the reinforcement heading as a section label on the rule, the recap card as the winner card */
.winner-banner{background:none;color:var(--ink);font-family:var(--text);font-weight:700;font-size:var(--t-label);line-height:1.3;letter-spacing:.06em;text-transform:uppercase;border-radius:0;border-top:2px solid var(--ink);padding:20px 0 0;margin:56px 0 20px;text-align:start}
:lang(he) .winner-banner{letter-spacing:0}
/* 5.9 the value tiles as three facts on a ruled grid */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:48px 0 0;border-top:2px solid var(--ink)}
.tile{flex:none;background:none;border:0;border-inline-end:1px solid var(--line);border-radius:0;box-shadow:none;padding:24px 24px 24px 0;text-align:start}
.tile+.tile{padding-inline-start:24px}
.tile:last-child{border-inline-end:0}
.tile .tile-ic{width:32px;height:32px;margin:0 0 16px;border-radius:4px;background:var(--ink);color:#fff;font-size:0}
.tile .tile-ic svg{width:18px;height:18px}
.tile h3{font-family:var(--display);font-weight:700;font-size:var(--t-lede);line-height:1.2;letter-spacing:-.01em;text-transform:none;margin:0 0 10px;color:var(--ink)}
.tile p{font-size:var(--t-ui);line-height:1.5;color:var(--ink-2)}
/* 5.10 the long review (5.9): a centred reading column, the hero figure and the h2 at the full wrap, the figures at the measure */
.long-review{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--measure)) minmax(0,1fr);column-gap:0;padding:8px 0 0}
.long-review>*{grid-column:2;min-width:0}
.long-review>h2,.long-review>figure.review-hero{grid-column:1 / -1}
.long-review h2{font-family:var(--display);font-weight:800;font-size:var(--t-h2);line-height:1.06;letter-spacing:-.03em;margin:56px 0 24px;padding-top:20px;border-top:2px solid var(--ink);color:var(--ink);max-width:24ch}
:lang(he) .long-review h2{letter-spacing:0}
.long-review .intro p,.long-review article p{font-size:var(--t-body);line-height:1.65;margin:0 0 18px;color:var(--ink-2);max-width:none}
.long-review .intro p:first-child{font-size:var(--t-lede);line-height:1.5;font-weight:500;color:var(--ink)}
.long-review article h3{font-family:var(--display);font-weight:700;font-size:var(--t-h3);line-height:1.15;letter-spacing:-.01em;margin:32px 0 10px;color:var(--ink);max-width:none}
.review-hero,.review-figure{border-radius:0;border:1px solid var(--line);background:var(--paper);margin:24px 0 28px;max-width:none}
.review-hero.is-cropped,.review-figure.is-cropped{background:var(--well)}
.review-break{background:var(--paper);border:1px solid var(--line);border-radius:0}
.review-break p{font-size:var(--t-label);color:var(--ink-2)}
/* 5.11 the important note (5.10): the ledger note at the measure, the head on its own line between a 2 px rule and a hairline */
.important{background:none;border:0;border-top:2px solid var(--ink);border-bottom:1px solid var(--line);border-radius:0;padding:16px 0;margin:40px auto;max-width:var(--measure)}
.important strong{display:block;font-family:var(--text);font-size:var(--t-label);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:8px}
:lang(he) .important strong{letter-spacing:0}
.important p{font-size:var(--t-ui);line-height:1.5;color:var(--ink-2);margin:0}
/* 5.12 the final offer (5.11): the last receipt in a 2 px frame at the wrap */
.final-offer{display:grid;grid-template-columns:240px minmax(0,1fr);gap:32px;align-items:center;background:var(--paper);border:2px solid var(--ink);border-radius:0;box-shadow:none;padding:28px;margin:40px 0 64px}
.final-offer .prod-img{flex:none;min-height:0;width:auto}
.final-offer h2{font-family:var(--display);font-weight:800;font-size:var(--t-h2s);line-height:1.08;letter-spacing:-.02em;margin:0 0 8px;color:var(--ink)}
.final-offer p{font-size:var(--t-ui);line-height:1.5;margin:0 0 18px;color:var(--ink-2);max-width:60ch}
.final-offer .cta{display:inline-flex;min-width:280px;padding:14px 28px}
/* 5.13 the trust module where a page prints it */
.trust{background:var(--paper);border:1px solid var(--line-2);border-radius:0;box-shadow:none;padding:28px;gap:24px;margin:40px 0 64px}
.trust .avatar{background:var(--ink);color:#fff;font-family:var(--display);border-radius:4px}
.trust .team-photo{border-radius:0;border:1px solid var(--line);box-shadow:none}
.trust .meet{font-family:var(--text);font-size:var(--t-label);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.trust h3{font-family:var(--display);font-weight:800;font-size:var(--t-h3);line-height:1.15;margin-bottom:8px;color:var(--ink)}
.trust p{font-size:var(--t-ui);line-height:1.5;color:var(--ink-2)}
.trust p+p{margin-top:8px}
.trust p strong{color:var(--ink);font-weight:600}
section[data-top5-module="finalOffer"]:has(+ section[data-top5-module="trust"]) .final-offer{margin-bottom:32px}

/* ---- 6. the review: one reading column on white, the headline in the display face, the offer pinned as a bar ---- */
.presale-article{background:var(--paper)}
.presale-body{max-width:calc(var(--measure) + 2 * var(--gutter));margin:0 auto;padding:32px var(--gutter) 96px;background:none;border:0;border-radius:0;box-shadow:none}
.presale-body :is(h1,h2,h3,h4,h5){font-family:var(--display);color:var(--ink)}
.presale-body :is(h1,h2,h3){font-variant-emoji:text}
.presale-body h1{font-weight:800;font-size:var(--t-h2);line-height:1.06;letter-spacing:-.03em;margin:8px 0 22px}
.presale-body h2{font-weight:800;font-size:var(--t-h2s);line-height:1.1;letter-spacing:-.02em;margin:44px 0 14px;padding-top:20px;border-top:1px solid var(--line)}
.presale-body h3{font-weight:700;font-size:var(--t-h3);line-height:1.15;letter-spacing:-.01em;margin:32px 0 10px}
.presale-body h4{font-weight:700;font-size:var(--t-body);line-height:1.25;letter-spacing:0;margin:26px 0 8px;color:var(--ink)}
.presale-body h5{font-weight:700;font-size:var(--t-body);line-height:1.25;margin:24px 0 8px}
.presale-body h6{font-family:var(--text);font-size:var(--t-label);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin:24px 0 8px}
:lang(he) .presale-body :is(h1,h2,h3,h6){letter-spacing:0}
.presale-body p{font-size:var(--t-body);line-height:1.65;margin:0 0 18px;color:var(--ink-2)}
.presale-body li{font-size:var(--t-body);line-height:1.55;margin:0 0 10px;color:var(--ink-2)}
.presale-body :is(ul,ol){margin:0 0 20px;padding-inline-start:22px;margin-inline-start:0}
.presale-body b,.presale-body strong{color:var(--ink)}
.presale-body i,.presale-body em{font-style:normal}
.presale-body p>i:only-child{font-weight:500}
.presale-body s,.presale-body del{color:var(--mute)}
.presale-body u{text-decoration-color:var(--line-2);text-underline-offset:3px}
.presale-body h1+p:has(> i:only-child){font-size:var(--t-lede);line-height:1.45;color:var(--ink-2);font-weight:500}
.presale-body h1+p:has(> i:only-child) i{font-weight:500}
.presale-body img:first-of-type+p,.presale-body img:first-of-type+div{font-size:var(--t-body);line-height:1.6;color:var(--ink);font-weight:500}
.presale-body img:first-of-type+p b{font-weight:600}
.presale-body .p-lead{font-family:var(--display);font-weight:800;color:var(--ink);letter-spacing:-.02em}
.presale-body .p-hl{background:none;padding:0;margin:0;border-radius:0;box-shadow:inset 0 -2px 0 var(--hot)}
/* 6.1 links: the checkout links in ink on the hot underline, the earliest path on the page */
.presale-body a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--hot);text-decoration-thickness:2px;text-underline-offset:4px}
.presale-body a:hover{color:var(--hot-text)}
/* 6.2 pictures: square on the hairline, the hero first and full */
.presale-body img{border-radius:0;border:1px solid var(--line);box-shadow:none;margin:16px auto 24px}
.presale-body>img:first-of-type{margin-top:0;max-height:320px;width:100%;object-fit:cover}
.presale-body img.p-vector,.presale-body img.p-icon,.presale-body img.p-small{border:none;border-radius:0;box-shadow:none}
.presale-body li img.p-vector{max-height:22px;filter:grayscale(1) contrast(1.4)}
.presale-body li:has(>img.p-vector) b{color:var(--ink);font-weight:700}
.presale-body img.p-avatar{border:0;box-shadow:none;border-radius:50%}
.presale-body iframe,.presale-body video{border-radius:0;box-shadow:none;border:1px solid var(--line)}
/* 6.3 the byline row of the doc kind: facts on two hairlines */
.presale-body .p-meta{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;margin:8px 0 24px;gap:10px 12px}
.presale-body .p-meta-ava{border:0;box-shadow:none}
.presale-body .p-meta-col{flex:1 1 160px;min-width:0}
.presale-body .p-meta-name{font-family:var(--text);font-weight:700;font-size:var(--t-label);color:var(--ink)}
.presale-body .p-meta-sub{font-size:var(--t-label);color:var(--mute)}
.presale-body .p-meta-rate{background:none;border:0;border-radius:0;padding:0;gap:8px;box-shadow:none;margin-inline-start:auto}
.presale-body .p-meta-rate .p-ustars{font-size:var(--t-label)}
.presale-body .p-meta-ratetxt{font-size:var(--t-label);font-weight:600;color:var(--ink)}
.presale-body .p-ustars,.presale-body .p-offer-stars{color:var(--ink);letter-spacing:1px}
.presale-body ul.p-byline,.presale-body ul.p-byline li{color:var(--mute);font-size:var(--t-label)}
.presale-body ul.p-byline li:not(:first-child)::before{color:var(--line-2)}
/* 6.4 the BestLifeHacks price line as the receipt line (6.5): the ink rule, the display figure in ink */
.presale-body p:has(> b > i > bdi.p-price){font-family:var(--display);font-size:var(--t-h2s);font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--ink);border-top:2px solid var(--ink);padding-top:14px;margin:28px 0 12px;font-variant-numeric:tabular-nums lining-nums}
.presale-body p:has(> b > i > bdi.p-price) bdi.p-price{color:var(--ink)}
/* 6.5 the checkout button (6.7): the hot fill, the ink word; a button that is a direct child of the column (the BestLifeHacks kind) is pinned
   to the bottom edge as a BAR (a paper ground with a hairline above it), on screen from the first scroll; the column's end padding clears it */
a[data-presale-cta],.presale-body a[data-presale-cta]{display:flex;align-items:center;justify-content:center;min-height:56px;max-width:none;margin:24px 0 28px;background:var(--hot);color:var(--ink);border:0;font-family:var(--text);font-weight:600;font-size:var(--t-ui);line-height:1.2;letter-spacing:0;text-decoration:none;text-align:center;padding:14px 20px;border-radius:var(--r);text-transform:none;box-shadow:none;transform:none}
a[data-presale-cta]:hover,.presale-body a[data-presale-cta]:hover{background:var(--hot-2);color:var(--ink);transform:none}
.presale-body>a[data-presale-cta]{position:sticky;bottom:0;z-index:3;background:var(--paper);border-radius:0;padding:8px;margin:24px -8px 28px;border-top:1px solid var(--line);min-height:73px}
.presale-body>a[data-presale-cta]::before{content:"";position:absolute;inset:8px;background:var(--hot);border-radius:var(--r);z-index:-1;transition:background-color var(--t)}
.presale-body>a[data-presale-cta]:hover{background:var(--paper)}
.presale-body>a[data-presale-cta]:hover::before{background:var(--hot-2)}
.presale-body>a[data-presale-cta]:focus-visible{z-index:4}
/* 6.6 the doc kind offer unit as the receipt (6.6): the 2 px frame, the eyebrow as a mute label, the ledger rows, the button, the one heat line, the trust row */
.p-offer,.presale-body .p-offer{background:var(--paper);border:2px solid var(--ink);border-radius:0;box-shadow:none;padding:24px;margin:32px 0;max-width:none;text-align:start}
.presale-body .p-offer-coupon{border-style:solid;border-width:2px;background:var(--paper)}
.presale-body .p-offer-strip{background:var(--paper);border-radius:0}
.presale-body :is(h1,h2,h3,h4,h5,h6,p):has(+ .p-offer),.presale-body .p-offer-head{text-align:start}
.p-offer-eyebrow,.presale-body .p-offer-eyebrow{font-family:var(--text);font-size:var(--t-label);font-weight:600;letter-spacing:.06em;color:var(--mute);text-transform:uppercase;margin:0 0 12px}
:lang(he) .presale-body .p-offer-eyebrow{letter-spacing:0}
.p-offer-price,.presale-body .p-offer-price{display:grid;gap:0;align-items:stretch;justify-content:stretch;margin:0 0 16px}
.presale-body .p-offer-was,.presale-body .p-offer-now{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.presale-body .p-offer-now{border-bottom:1px solid var(--line)}
.presale-body .p-offer-was{font-size:var(--t-label);color:var(--mute);font-variant-numeric:tabular-nums lining-nums}
.presale-body .p-offer-was s{color:var(--mute);font-size:var(--t-ui)}
.presale-body .p-offer-now{font-size:var(--t-ui);color:var(--ink);font-weight:500}
.presale-body .p-offer-now b{font-family:var(--display);font-weight:800;font-size:var(--t-h2);line-height:1;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
[dir=rtl] :is(.p-offer-was s,.p-offer-now b,bdi.p-price){direction:ltr;unicode-bidi:isolate}
.p-offer a[data-presale-cta],.presale-body .p-offer a[data-presale-cta]{margin:0 0 12px;max-width:none}
.p-offer-urgency,.presale-body .p-offer-urgency{font-size:var(--t-label);font-weight:500;color:var(--mute);margin:0 0 14px;line-height:1.4}
.p-offer-trust,.presale-body .p-offer-trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 16px;justify-content:start;padding-top:12px;border-top:1px solid var(--line);font-size:var(--t-label);font-weight:500;color:var(--mute);line-height:1.35}
.presale-body .p-offer-trust span{white-space:normal}
.presale-body .p-offer-trust span::first-letter{color:var(--ink)}
/* 6.7 quotes: the ink rule at the inline start, the stars as a small ink row, the name as a fact */
.presale-body blockquote{background:none;border:0;border-inline-start:2px solid var(--ink);border-radius:0;box-shadow:none;padding:4px 0 4px;padding-inline-start:20px;margin:0 0 24px}
.presale-body blockquote p{font-size:var(--t-ui);line-height:1.55;margin-bottom:8px;color:var(--ink-2)}
.presale-body blockquote p.p-ustars{font-size:var(--t-label);margin-bottom:6px;color:var(--ink)}
.presale-body blockquote .p-attrib{font-family:var(--text);font-weight:700;font-size:var(--t-label);color:var(--ink);margin:2px 0 0}
.presale-body blockquote.p-pull{background:none;border:0;border-inline-start:2px solid var(--ink);border-radius:0;padding:4px 0 4px;padding-inline-start:20px;margin:32px 0}
.presale-body blockquote.p-pull p{font-family:var(--display);font-size:var(--t-h3);line-height:1.3;font-weight:700;letter-spacing:-.01em;color:var(--ink);margin:0}
.presale-body blockquote.p-pull i{font-style:normal}
.presale-body .p-pquote{border:1px solid var(--line);border-radius:0;box-shadow:none;background:var(--paper)}
.presale-body .p-pquote-mark{font-family:var(--display);color:var(--ink)}
.presale-body .p-pquote-body{font-size:var(--t-ui);color:var(--ink-2)}
.presale-body .p-pquote-meta{color:var(--ink);font-size:var(--t-label)}
/* 6.8 rows, tables, comments */
.presale-body .p-iconrow>div>p:first-child,.presale-body .p-iconrow>div>div:first-child{color:var(--ink);font-weight:700}
.presale-body [data-p-row] p,.presale-body [data-p-row] div{font-size:var(--t-ui)}
.presale-body [data-p-stack] p,.presale-body [data-p-stack] div{font-size:var(--t-body)}
.presale-body table{border:0;border-top:2px solid var(--ink);border-radius:0}
.presale-body th{background:var(--paper);color:var(--ink);font-family:var(--text);font-weight:700;font-size:var(--t-label);letter-spacing:.04em;border-bottom:1px solid var(--ink)}
.presale-body td,.presale-body th{font-size:var(--t-ui)}
.presale-body td{border-top:1px solid var(--line)}
.presale-body tr:nth-child(even) td{background:var(--well)}
.presale-body .p-comment{background:var(--paper);border:1px solid var(--line);border-radius:0}
.presale-body .p-comment p{font-size:var(--t-ui);color:var(--ink-2)}
.presale-body .p-c-name{color:var(--ink)}
.presale-body .p-c-time,.presale-body .p-c-count{color:var(--mute)}
.presale-body .p-c-reply{background:var(--well);border:0;border-radius:0}
.presale-body .p-c-reacts img{border-color:var(--paper)}
.presale-body hr{border-top:1px solid var(--line)}
.presale-body .p-rate-solo{color:var(--ink)}
/* 6.9 the doc design packs on this look */
.presale-body :is(figure.bob-quote,figure.ach-quote){border:1px solid var(--line);border-radius:0;background:var(--paper);box-shadow:none}
.presale-body :is(figure.bob-quote,figure.ach-quote)::before{background:var(--ink)}
.presale-body :is(.bob-q-mark,.ach-q-mark){font-family:var(--display);color:var(--ink)}
.presale-body :is(.bob-q-body,.ach-q-body),.presale-body :is(.bob-q-body,.ach-q-body) p{color:var(--ink-2)}
.presale-body .bob-q-body{font-size:var(--t-ui)}
.presale-body .ach-q-body{font-size:var(--t-ui)}
.presale-body :is(.bob-q-foot,.ach-q-foot){border-top-color:var(--line)}
.presale-body :is(.bob-q-ava,.ach-q-ava){background:var(--ink);color:#fff}
.presale-body :is(.bob-q-who,.ach-q-who) b{color:var(--ink)}
.presale-body :is(.bob-q-who,.ach-q-who) i{color:var(--ink)}
.presale-body :is(.bob-q-badge,.ach-q-badge){background:var(--paper);border-color:var(--line-2);color:var(--ink);font-size:var(--t-label);border-radius:4px}
.presale-body .ach-check :is(h4,h6){font-family:var(--display);font-weight:700;font-size:var(--t-body);line-height:1.3;color:var(--ink);letter-spacing:0;text-transform:none}
body[data-top5-presale-brand="achesoothe"] .presale-body .p-meta{background:var(--paper);border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;padding:12px 0;box-shadow:none}
body[data-top5-presale-brand="achesoothe"] .presale-body .p-meta::before{background:var(--ink);color:#fff;box-shadow:none;font-family:var(--text);border-radius:4px}
body[data-top5-presale-brand="achesoothe"] .presale-body .p-meta:has(> .p-meta-ava)::before{content:none;display:none}

/* ---- 6b. THE BAR (DESIGN-SPEC-V2 8.3, D1 b, build step 2b): one node the app prints after main on guides and reviews, aside.rail[data-rp-bar]
   (the r2 rail node with the V2 children: div.bar-only with the name and the price today, a.btn.bar-btn the owned button); fixed at the
   bottom edge at every width on a 1 px ink rule; shown by the bar script (body.rp-bar) once the winner's button has been passed on a guide
   and after 240 px on a review, hidden while an in body owned button or the footer is on screen; hidden from print and from reduced widths
   under 320. While the node exists the guide's phone button is in flow (no top pin). ---- */
aside.rail[data-rp-bar]{display:none;position:fixed;inset-inline:0;bottom:0;z-index:30;align-items:center;gap:12px;min-height:56px;padding:6px max(var(--gutter),calc(50% - 592px));background:var(--paper);border-top:1px solid var(--ink);font-family:var(--text);color:var(--ink)}
body.rp-bar aside.rail[data-rp-bar]{display:flex}
aside.rail[data-rp-bar] .bar-only{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
aside.rail[data-rp-bar] .b-name{font-size:var(--t-label);font-weight:700;line-height:1.25;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
aside.rail[data-rp-bar] .b-price{font-size:var(--t-label);line-height:1.25;color:var(--mute);white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
aside.rail[data-rp-bar] .b-price s{color:var(--mute);text-decoration-thickness:1px}
aside.rail[data-rp-bar] .b-price b{font-family:var(--display);font-weight:800;font-size:var(--t-ui);letter-spacing:-.02em;color:var(--ink);margin-inline-start:4px}
[dir=rtl] aside.rail[data-rp-bar] .b-price{direction:ltr;unicode-bidi:isolate}
aside.rail[data-rp-bar] .bar-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;min-height:44px;padding:10px 16px;background:var(--hot);color:var(--ink);border:0;border-radius:var(--r);font-family:var(--text);font-weight:600;font-size:var(--t-label);line-height:1.2;text-decoration:none;text-align:center;white-space:nowrap;box-shadow:none}
aside.rail[data-rp-bar] .bar-btn:hover{background:var(--hot-2);color:var(--ink)}
@media (min-width:761px){
  aside.rail[data-rp-bar]{min-height:64px;gap:24px}
  aside.rail[data-rp-bar] .bar-only{flex-direction:row;align-items:baseline;gap:16px}
  aside.rail[data-rp-bar] .b-name{font-size:var(--t-ui)}
  aside.rail[data-rp-bar] .b-price b{font-size:var(--t-h3)}
  aside.rail[data-rp-bar] .bar-btn{min-height:48px;min-width:240px;font-size:var(--t-ui);padding:12px 24px}
}
@media print{aside.rail[data-rp-bar]{display:none}}

/* ---- 7. the footer: white on the 2 px ink rule, small facts ---- */
.foot{background:var(--paper);border-top:2px solid var(--ink);color:var(--mute);font-family:var(--text);font-size:var(--t-label);line-height:1.5;padding:40px 0 24px;margin-top:0}
.foot .foot-cols{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));gap:28px 28px}
.foot .foot-cols:not(:has(> div:nth-of-type(3))){grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.foot .brand{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--ink);text-decoration:none;font-family:var(--display);font-weight:800;font-size:var(--t-h3);letter-spacing:-.02em;line-height:1;white-space:nowrap;direction:ltr}
.foot .brand .mark{width:26px;height:26px;flex:none;display:block}
.foot .brand .mark path:first-child{fill:var(--ink)}
.foot .brand .picked{color:var(--hot-text)}
.foot .note{margin:14px 0 0;max-width:60ch;font-size:var(--t-label);line-height:1.5;color:var(--mute)}
.foot .note a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-decoration-thickness:1px;text-underline-offset:3px}
.foot .pub{margin:10px 0 0;color:var(--ink);font-weight:500;font-size:var(--t-label)}
.foot .pub b{font-weight:700}
.foot .h{display:flex;align-items:center;gap:8px;min-height:24px;margin:0 0 6px;font-family:var(--text);font-size:var(--t-label);font-weight:700;line-height:1.3;color:var(--ink);letter-spacing:0;text-transform:none}
.foot .h .l{display:none}
.foot .h svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.foot ul{list-style:none;margin:0;padding:0}
.foot ul a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;color:var(--ink);text-decoration:none;font-size:var(--t-label);line-height:1.3}
.foot ul a:hover{text-decoration:underline;text-decoration-color:var(--hot)}
.foot ul a.cur{font-weight:700;text-decoration:underline;text-decoration-color:var(--hot);text-decoration-thickness:2px;text-underline-offset:4px}
.foot .copy{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 24px;margin-top:28px;padding-top:12px;border-top:1px solid var(--line);color:var(--mute);font-size:var(--t-label)}
.foot .copy .foot-nav{display:flex;flex-wrap:wrap;gap:0 20px;margin:0}
.foot-nav a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;color:var(--ink);font-family:var(--text);font-weight:500;font-size:var(--t-label);text-decoration:none}
.foot-nav a:hover{text-decoration:underline;text-decoration-color:var(--hot)}

/* ---- 8. widths ---- */
/* the tablet card, 761 to 1023 (revision, builder item 12): two columns (the packshot, the receipt cluster); the decision column is a row
   under the receipt (the score beside the button, the note under both); the ticks and the crosses follow across both columns */
@media (min-width:761px) and (max-width:1023px){
  .listing-cols,.listing.featured .listing-cols{grid-template-columns:220px minmax(0,1fr);gap:0 24px}
  .listing-side{grid-column:2;grid-row:6;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:4px 0 12px}
  .listing-side .score-box{padding-bottom:0}
  .listing-main>ul.benefits{grid-row:7}
  .listing-main>ul.drawbacks{grid-row:8}
}
@media (max-width:1023px){
  .listing.featured{padding:24px}
  .foot .foot-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot .foot-brand{grid-column:1/-1}
  .foot .foot-cols:not(:has(> div:nth-of-type(3))){grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .tiles{grid-template-columns:minmax(0,1fr)}
  .tile{border-inline-end:0;border-bottom:1px solid var(--line);padding:20px 0}
  .tile+.tile{padding-inline-start:0}
  .tile:last-child{border-bottom:0}
  .listing-main>ul.benefits,.listing-main>ul.drawbacks{columns:1}
}
@media (max-width:760px){
  .sitebar .wrap{min-height:52px;padding-top:4px;padding-bottom:4px}
  .sitebar .rp-logo img{height:22px}
  .hero{padding:24px var(--gutter) 18px}
  .hero h1{line-height:1.08}
  .hero .verify{margin-top:12px}
  .opener{padding-top:20px}
  .opener p{font-size:var(--t-body)}
  .flow-h{margin:32px 0 20px;padding-top:16px}
  .listing{padding:24px 0 28px}
  .listing.featured{padding:20px 16px 16px;margin-bottom:8px}
  .listing-rank{padding:7px 9px}
  /* the phone card (9.2): one grid of the card's own children in the sales sheet order; the price beside the score; the owned button held at
     the TOP edge only while the evidence scrolls (it can never appear before the name, the price and the score); the DOM order stays */
  .listing-cols,.listing.featured .listing-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 16px;align-items:start}
  .listing-main,.listing-side,.listing-media{display:contents}
  .listing-cols>*,.listing-main>*,.listing-side>*,.listing-media>*,.listing-main>h3,.listing-main>ul.benefits,.listing-main>ul.drawbacks{grid-column:1/-1;grid-row:auto;min-width:0}
  .badge-row{order:1;margin:0}
  .listing-main>h3{order:2;margin:0}
  .prod-img{order:3}
  .prod-img,.listing:not(.featured) .prod-img{aspect-ratio:3/2;padding:12px}
  /* the in page jump link follows the ticks (revision, media buyer item 9): never the first pressable thing before the price and the button */
  .review-link{order:10;margin-top:0}
  .rating-row{order:4;margin:0}
  .price-block{order:5;grid-column:auto;flex-direction:column;align-items:flex-start;gap:4px;margin:0;padding:12px 0 0;border-bottom:0;border-top:2px solid var(--ink)}
  .price-label,.price-was,.price-now{order:0;margin-inline-start:0}
  .price-block:not(:has(.price-was)) .price-now{margin-inline-start:0}
  .listing:not(.featured) .price-block{border-top-color:var(--line-2)}
  .score-box{order:6;grid-column:auto;padding:12px 0 0;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;row-gap:4px;align-content:start}
  .score-box .score-num{grid-column:1;grid-row:1}
  .score-box .score-word{grid-column:1;grid-row:2;align-self:start}
  .score-box .stars{grid-column:1;grid-row:3}
  .score-word{white-space:nowrap}
  .listing:not(.featured) .score-box{border-top-color:var(--line-2)}
  .score-num{font-size:var(--t-num)}
  .listing:not(.featured) .score-num{font-size:var(--t-h2)}
  .price-now{font-size:var(--t-h2s)}
  .listing-side .cta{order:7;margin:4px 0 0}
  .listing-side .cta[data-top5-owned-checkout]{position:sticky;top:0;z-index:3;background:var(--paper);border-radius:0;padding:8px;margin:4px -8px 0;border-bottom:1px solid var(--line);min-height:73px}
  .listing-side .cta[data-top5-owned-checkout]::before{content:"";position:absolute;inset:8px 8px 9px;background:var(--hot);border-radius:var(--r);z-index:-1;transition:background-color var(--t)}
  .listing-side .cta[data-top5-owned-checkout]:hover{background:var(--paper)}
  .listing-side .cta[data-top5-owned-checkout]:hover::before{background:var(--hot-2)}
  /* while the bar node exists (8.3, step 2b) the guide's phone button is in flow: the bar carries the offer once the button has been passed */
  body:has(aside.rail[data-rp-bar]) .listing-side .cta[data-top5-owned-checkout]{position:static;background:var(--hot);border:0;border-radius:var(--r);padding:14px 16px;margin:4px 0 0;min-height:56px}
  body:has(aside.rail[data-rp-bar]) .listing-side .cta[data-top5-owned-checkout]::before{content:none}
  body:has(aside.rail[data-rp-bar]) .listing-side .cta[data-top5-owned-checkout]:hover{background:var(--hot-2)}
  .listing-main>ul.benefits{order:8;margin:8px 0 0;columns:1}
  /* the winner's ticks join the card grid (revision, media buyer item 5): the last three (the commerce facts) follow the button as 14 px facts,
     then the feature ticks on a hairline; the DOM and the tab order stay */
  .listing.featured .listing-main>ul.benefits{display:contents}
  .listing.featured ul.benefits>li{grid-column:1/-1;grid-row:auto;order:9;margin:0 0 8px;min-width:0}
  .listing.featured ul.benefits>li:first-child{margin-top:4px;padding-top:12px;border-top:1px solid var(--line)}
  .listing.featured ul.benefits>li:nth-last-child(-n+3){order:8;font-size:var(--t-label);font-weight:500;line-height:1.4;margin:0 0 6px}
  .listing.featured ul.benefits>li:nth-last-child(3){margin-top:4px}
  .listing.featured ul.benefits>li:nth-last-child(-n+3) .check{flex-basis:16px;width:16px;height:16px;background-size:16px;margin-top:2px}
  .listing-main>ul.drawbacks{order:11;margin:0;columns:1}
  .deal-box{order:12;margin:4px 0 0}
  .side-note{order:13;margin:0}
  .presale-body>img:first-of-type{max-height:200px;width:100%;object-fit:cover}
  /* the phone bar: a long pack string (the doc kind's) wraps to two lines inside 60 percent of the row, so the name and the price stay readable */
  aside.rail[data-rp-bar] .bar-btn{max-width:60%;white-space:normal;text-align:center;line-height:1.15;padding:8px 14px}
  aside.rail[data-rp-bar] .bar-only{flex:1 1 0}
  .winner-banner{margin-top:40px;padding-top:16px}
  .tiles{margin-top:32px}
  .long-review h2{margin:40px 0 20px;padding-top:16px}
  .long-review article h3{margin-top:26px}
  .review-hero,.review-figure{margin:18px 0 22px}
  .important{padding:14px 0;margin:32px 0}
  .final-offer{grid-template-columns:minmax(0,1fr);gap:18px;padding:20px 16px;margin:32px 0 48px;text-align:start}
  .final-offer .prod-img{width:100%}
  .final-offer .cta{display:flex;width:100%;min-width:0}
  .trust{padding:20px 16px}
  .presale-body{padding:20px var(--gutter) 96px}
  .presale-body h1{margin:4px 0 18px}
  .presale-body h2{margin:36px 0 12px;padding-top:16px}
  .presale-body h3{margin:26px 0 8px}
  .presale-body p,.presale-body li{font-size:var(--t-body)}
  .presale-body h1+p:has(> i:only-child){font-size:var(--t-body)}
  .presale-body blockquote.p-pull p{font-size:var(--t-h3)}
  .p-offer,.presale-body .p-offer{padding:20px 16px 16px;margin:28px 0}
  .p-offer-trust,.presale-body .p-offer-trust{grid-template-columns:minmax(0,1fr);gap:6px}
  a[data-presale-cta],.presale-body a[data-presale-cta]{min-height:56px;font-size:var(--t-ui);padding:14px 16px}
  .foot{padding:32px 0 20px}
  .foot .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px}
  .foot .copy{flex-direction:column;align-items:flex-start}
}
@media (max-width:480px){
  /* the legal tag wraps (revision, builder item 4): el and bg are 227 and 201 px as one line at 390; the word is untouched */
  .sitebar .adv{white-space:normal;text-align:center;line-height:1.2;padding:5px 8px;flex:0 1 auto;min-width:0}
  .presale-body .p-meta-rate{max-width:100%;margin-inline-start:0}
  .presale-body .p-meta-ratetxt{white-space:normal}
  .foot .foot-cols{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:380px){
  .listing-cols,.listing.featured .listing-cols{gap:10px 12px}
}
/* short laptops (1366 x 650, 1280 x 620): the review hero at 260 px so the lede's first line and the first checkout link sit above the
   pinned bar (ruling 17, media buyer item 8); after every width block, so it wins the equal specificity contest with 5.2 */
@media (min-width:1024px) and (max-height:700px){.presale-body>img:first-of-type{max-height:260px}}

/* ---- 9. RP_SKIN3_V1 build fixes (the SKIN builder lane, 2026-09-28): what the proof builds of four guides and four reviews (en, de, he,
   hu) showed that the final mockups (short form scores only) could not; appended after the mockup sections, so the rules win at equal
   specificity. No node moved, added, hidden or removed. ---- */
/* 9.1 THE SCORE INSTRUMENT HOLDS THE TEN FORM. Two groups (ab trainers, snoring aids) print the score as "9,8/10" or "9.8 / 10" in every
   language: about 200 px at 64 px, so the mockup's two column grid left 76 px for the word and "HERAUSRAGEND" broke inside (de at 1440 and
   1024, he at 1024). From 761 px the box is a flow root with the numeral FLOATED at the inline start and the word an atomic inline (an
   inline block on one line, never broken): the word and the drawn stars sit beside the numeral when they fit and the line drops under it
   when they do not (CSS 2.1 section 9.5: a line box too narrow for its content shifts below the float; Blink moves a line that holds one
   atomic inline, not a nowrap text run, so the word is the inline block). The short form keeps the approved look: the numeral beside the
   word over the stars, the pair centred on it (an 80 px box, as the mockup). Physical margins, because the numeral runs left to right in
   both directions (9.2) and its logical end would otherwise land on the outer edge in he. */
@media (min-width:761px){
  .score-box,.listing.featured .score-box{display:flow-root;grid-template-columns:none;grid-template-rows:none}
  .score-box .score-num{float:left;margin-right:12px;line-height:1}
  [dir=rtl] .score-box .score-num{float:right;margin-right:0;margin-left:12px}
  .score-box .score-word{display:inline-block;white-space:nowrap;max-width:100%;padding-top:16px;margin:0;vertical-align:top}
  .listing:not(.featured) .score-box .score-word{padding-top:2px}
  .score-box .stars{display:flex;margin-top:2px}
  [dir=rtl] .score-box .stars{justify-content:flex-end}
}
/* 9.2 the score reads left to right in he (DESIGN-SPEC-V2 section 10: scores inside a left to right run): the template prints "9.8 / 10" and
   the bidi algorithm mirrored it to "10 / 9.8" in the right to left card */
[dir=rtl] .score-num{direction:ltr;unicode-bidi:isolate}
/* 9.3 the phone card's pinned button covers the card's padding: the template's .cta-block sets width 100 percent, which the mockup's negative
   margins shifted instead of widening (8 px of the ticks showed beside the paper bar at the inline end, looked at on the en and de builds) */
@media (max-width:760px){
  .listing-side .cta[data-top5-owned-checkout]{width:auto;margin:4px -16px 0;padding:8px 16px}
  .listing-side .cta[data-top5-owned-checkout]::before{inset:8px 16px 9px}
}
/* 9.4 the phone score numeral never breaks and the ten form fits the half width box: at 320 the box is 120 px and "9,8/10" at 44 px is 138,
   so the figure broke inside ("9,8/1" over "0", de at 320) and the he "9.8 / 10" wrapped at its space ("9.8 /" over "10"); the numeral is one
   line with its spaces tightened (the he form reads as the de form) and under 380 px its size follows the width (11.5vw, 44 px from 383 up:
   36.8 px at 320, 41.4 at 360; measured 108 to 137 px inside the 120 to 150 px boxes on the he and de builds) */
.score-num{white-space:nowrap;word-spacing:-.25em}
@media (max-width:380px){:root{--t-num:min(44px,11.5vw)}}
/* 9.5 the phone section h2 is continuous like the h1 (DESIGN-SPEC-V2 3.3, the same bound): the 28 / 26 steps cut the fi long review h2
   compound "kokovartalohierontamatot:" inside at 320 (the edition sweep); clamp(22px, 7.2vw, 28px) keeps 28 at 390 and 25.9 at 360 (the
   spec's 28 and 26) and reaches 23 at 320, where every heading word up to 375 px at 30 px fits the 288 px column */
@media (max-width:760px){:root{--t-h2:clamp(22px,7.2vw,28px)}}
/* 9.6 the 14 px floor on the blackoutbliss pack's quote card star row (RP-TY-3): the pack's own style prints the star characters at 11.5 px
   with a 2.5 px tracking; the skin recoloured them to ink (6.9) and now sizes them as THE LABEL (the achesoothe pack's row too) */
.presale-body :is(.bob-q-who,.ach-q-who) i{font-size:var(--t-label);letter-spacing:1px}
/* 9.7 the pack quote cards fit the 320 px column (RP-PH-1) and the 14 px floor (RP-TY-3): the blackoutbliss pack's verified buyer badge is
   nowrap with a 46 px margin inside a 1fr grid track (minmax(auto,1fr)), so the card's min content widened the track to 336 px on the el
   edition at 320 (the sweep); the card may shrink (min-width 0) and the badge wraps at every width (at 14 px the el badge is 230 px, wider
   than the 183 px inside a desktop card of the three column grid). The packs' 13.5 px name, 11 to 12 px badges and 13 px star row come up
   to THE LABEL on both packs (the ach rows too). */
.presale-body :is(figure.bob-quote,figure.ach-quote){min-width:0;max-width:100%}
.presale-body :is(.bob-q-who,.ach-q-who) b{font-size:var(--t-label)}
.presale-body :is(.bob-q-badge,.ach-q-badge){font-size:var(--t-label);line-height:1.25;white-space:normal;text-align:start;max-width:100%}
/* 9.8 THE LEDGER RIDES THE FACTS' ROWS (the fidelity critic, 2026-09-28). At 1024 and up the deal ledger (column 2) spans the three rows
   the commerce facts take (column 3), and where the facts run longer than the ledger (three to five lines each at 14 px in the 288 px
   column: hu, el, de) the winner sheet held a 90 to 210 px white void between the ledger's last hairline and the first tick row (measured
   on the proof builds at 1440: en 38, de 89, he 16, hu 167, el 128, pl 16; at 1024: hu 207, el 148, de 70, pl 50). The ledger is now a
   subgrid of those three rows, so each of its hairline rows ends where the fact beside it ends and the ticks follow at once; an engine
   without subgrid keeps the spanning box (the void, never a break). The phone and tablet cards are outside this block and unchanged. */
@media (min-width:1024px){
  @supports (grid-template-rows:subgrid){
    .listing.featured .deal-box{display:grid;grid-template-rows:subgrid;align-self:stretch}
  }
}
/* 9.9 A WRAPPED BUTTON STRING BALANCES (the fidelity critic, 2026-09-28): in the 260 px decision column of the 1024 to 1179 grid the hu key
   "ELÉRHETŐSÉG ELLENŐRZÉSE ›" wrapped with the chevron alone on its second line (looked at on the hu build at 1024); the bar's phone button
   wraps to two lines by design (8.3). Both balance their lines where they wrap; a one line string is unchanged. */
.listing-side .cta[data-top5-owned-checkout],aside.rail[data-rp-bar] .bar-btn{text-wrap:balance}
/* 9.10 THE BAR'S PRICE PAIR WRAPS ON THE PHONE (the bar engineer lane, wave 11B BAR, 2026-09-28; DESIGN-SPEC-V2 8.3): beside a two line
   button the text column at 320 is about 103 px and the nowrap pair ran under the button (de, hu builds); on the phone the two figures are a
   wrapping row, each figure whole; the desktop pair is unchanged. */
@media (max-width:760px){
  aside.rail[data-rp-bar] .b-price{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:4px}
  aside.rail[data-rp-bar] .b-price b{margin-inline-start:0}
}
/* 9.11 RP_HERO_FULL_V1 (the fix2 skin lanes K1 and K2, 2026-10-22, the page query v=20261022a, the operator's second order): the first picture of the achesoothe, flyrest, harmonymat and hoopaloop review columns shows whole at its natural aspect in every media context, the ruling 17 band lifted for these four brands only, hooked on the body attribute the pages print; the other eleven brands keep the band */
body[data-top5-presale-brand="achesoothe"] .presale-body>img:first-of-type,body[data-top5-presale-brand="flyrest"] .presale-body>img:first-of-type,body[data-top5-presale-brand="harmonymat"] .presale-body>img:first-of-type,body[data-top5-presale-brand="hoopaloop"] .presale-body>img:first-of-type{max-height:none;height:auto;object-fit:fill}
/* 9.12 GUIDE_OPENER_LOOK_V2 (2026-11-02): the intro, one column, the cross on the problem lines; the record intro-fix/v2/RECORD.md */
.opener.opn-on{columns:auto}
.opn{margin:0}
.opn p{max-width:none;margin:0 0 10px}
.opn:last-child>p:last-child{margin-bottom:0}
:is(.opn-you,.opn-tried) p{position:relative;padding-inline-start:30px}
:is(.opn-you,.opn-tried) p::before{content:"";position:absolute;inset-inline-start:0;top:4px;width:20px;height:20px;background:var(--i-cross) center/20px no-repeat}
[data-opn$=emoji] :is(.opn-you,.opn-tried) p{padding-inline-start:0}
[data-opn$=emoji] :is(.opn-you,.opn-tried) p::before{content:none}
.opn:is(.opn-you,.opn-tried)+.opn:not(.opn-you,.opn-tried){margin-top:24px}
/* 9.13 FULL_WIDTH_TEXT_V1 (2026-11-02): the review and the important note at the full wrap */
.long-review{display:block}
.long-review h2{max-width:none}
.important{max-width:none}
/* 9.14 FULL_WIDTH_OFFER_V1 (2026-11-02): the closing offer's paragraph at the full width */
.final-offer p{max-width:none}
/* 9.15 TITLES_FULL_WIDTH_V1 (2026-11-02): every guide title at the full width, no balance */
.hero h1{max-width:none}
body[data-top5-artifact=MSADS_TOP5_PAGE_ARTIFACT_V1] :is(h1,h2,h3,h4,h5){text-wrap:wrap}
/* 9.16 INTRO_EMPHASIS_V1 (2026-11-02): the intro's key parts in bold */
.opn p strong{font-weight:700;color:var(--ink)}
/* 9.17 BRAND_LINKS_V1 (2026-11-03): the winner's brand links in the review, bold with the 2 px accent underline (BRAND_STYLE_V1) */
.brandlink{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--hot);text-decoration-thickness:2px;text-underline-offset:3px}
.brandlink:hover{color:var(--hot-text);text-decoration-color:var(--hot-text)}