@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/assets/fonts/archivo-normal-400-800.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: 'Atkinson Hyperlegible Next';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/atkinson-next-italic-400.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: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/atkinson-next-normal-400.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: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/atkinson-next-normal-700.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;
}

:root{
  color-scheme:light;
  --bg:#F3F6F4;--surface:#FFFFFF;--surface-2:#EAF0EC;--ink:#1D2427;--ink-2:#3E4A51;--muted:#5B6870;
  --line:#D6DFDA;--line-2:#BCC8C2;
  --brand:#0B6E64;--brand-hover:#095C54;--on-brand:#FFFFFF;--brand-soft:#D4EDE8;--link:#0B6E64;
  --buy:#1B6A43;--buy-bg:#E2F3E8;--skip:#A3261D;--skip-bg:#FBE8E6;
  --r-sky:#DCEAF7;--r-mint:#DDF1E4;--r-butter:#FAEDC4;--r-lilac:#E8E1F7;--r-blush:#F8DFDB;--r-aqua:#D6EFF0;--r-pist:#E6F0D4;--r-stone:#E2E7ED;
  --k-sky:#2F6FA8;--k-mint:#2B8A5C;--k-butter:#9C7A0C;--k-lilac:#6B4FB0;--k-blush:#B8475A;--k-aqua:#1B7F87;--k-pist:#5A861D;--k-stone:#53647A;
  --wall:#1D2427;--head-bg:rgba(243,246,244,.9);
  --foot-bg:#1D2427;--foot-ink:#DCE5E1;--foot-link:#8FE3D8;--foot-line:#33424A;
  --shadow:0 1px 0 rgba(29,36,39,.05),0 14px 30px -18px rgba(29,36,39,.28);
  --f-head:"Archivo","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --f-body:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",Verdana,"Segoe UI",sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0F1517;--surface:#162024;--surface-2:#1C292E;--ink:#E6EEEB;--ink-2:#C3CFCA;--muted:#9BAAA4;
    --line:#263539;--line-2:#36494F;
    --brand:#3FD3C1;--brand-hover:#67E0D1;--on-brand:#05211D;--brand-soft:#123935;--link:#62DFCF;
    --buy:#86E3AE;--buy-bg:#15312A;--skip:#FFA196;--skip-bg:#3B1F1C;
    --r-sky:#1A2A39;--r-mint:#172F29;--r-butter:#322D18;--r-lilac:#28223D;--r-blush:#392127;--r-aqua:#143135;--r-pist:#223117;--r-stone:#222A33;
    --k-sky:#74ABE0;--k-mint:#5FCB95;--k-butter:#E2C04F;--k-lilac:#A98DEB;--k-blush:#EE8B9B;--k-aqua:#52C4CC;--k-pist:#9DCC57;--k-stone:#93A5BB;
    --wall:#CFDAD6;--head-bg:rgba(15,21,23,.88);
    --foot-bg:#0A0F11;--foot-ink:#C9D5D0;--foot-link:#62DFCF;--foot-line:#20302F;
    --shadow:0 1px 0 rgba(0,0,0,.25),0 16px 34px -20px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0F1517;--surface:#162024;--surface-2:#1C292E;--ink:#E6EEEB;--ink-2:#C3CFCA;--muted:#9BAAA4;
  --line:#263539;--line-2:#36494F;
  --brand:#3FD3C1;--brand-hover:#67E0D1;--on-brand:#05211D;--brand-soft:#123935;--link:#62DFCF;
  --buy:#86E3AE;--buy-bg:#15312A;--skip:#FFA196;--skip-bg:#3B1F1C;
  --r-sky:#1A2A39;--r-mint:#172F29;--r-butter:#322D18;--r-lilac:#28223D;--r-blush:#392127;--r-aqua:#143135;--r-pist:#223117;--r-stone:#222A33;
  --k-sky:#74ABE0;--k-mint:#5FCB95;--k-butter:#E2C04F;--k-lilac:#A98DEB;--k-blush:#EE8B9B;--k-aqua:#52C4CC;--k-pist:#9DCC57;--k-stone:#93A5BB;
  --wall:#CFDAD6;--head-bg:rgba(15,21,23,.88);
  --foot-bg:#0A0F11;--foot-ink:#C9D5D0;--foot-link:#62DFCF;--foot-line:#20302F;
  --shadow:0 1px 0 rgba(0,0,0,.25),0 16px 34px -20px rgba(0,0,0,.7);
}
*,*::before,*::after{box-sizing:inherit}
html{height:auto;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 88px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:1.125rem;line-height:1.62}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--head-bg);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px)}
img,svg{max-width:100%}
a{color:var(--link);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:6px}
h1,h2,h3,h4{font-family:var(--f-head);color:var(--ink);line-height:1.12;margin:0}
h1{font-size:clamp(2.05rem,1.15rem + 3.1vw,3.3rem);font-stretch:118%;font-weight:780;letter-spacing:-.012em}
h2{font-size:clamp(1.55rem,1.1rem + 1.5vw,2.2rem);font-stretch:112%;font-weight:730;letter-spacing:-.006em}
h3{font-size:1.42rem;font-stretch:108%;font-weight:700}
h2:focus{outline:none}
p{margin:0 0 1em}
kbd{font-family:var(--f-head);font-stretch:100%;font-weight:700;font-size:.78rem;min-width:1.6em;padding:1px 6px;border-radius:6px;border:1px solid var(--line-2);border-bottom-width:2px;background:var(--surface);color:var(--ink-2);display:inline-block;text-align:center;line-height:1.5}
.skip{position:absolute;left:-9999px;top:10px;z-index:100;background:var(--brand);color:var(--on-brand);padding:10px 14px;border-radius:10px;font-weight:700}
.skip:focus{left:12px}

/* header */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--head-bg);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.head-in{max-width:1320px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--f-head);font-stretch:116%;font-weight:760;font-size:1.1rem;white-space:nowrap}
.brand svg{width:36px;height:36px;flex:none}
.top-nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;margin-left:auto}
.top-nav::-webkit-scrollbar{display:none}
.top-nav a{padding:8px 12px;border-radius:999px;text-decoration:none;color:var(--ink-2);font-size:.98rem;white-space:nowrap}
.top-nav a:hover{background:var(--surface-2);color:var(--ink)}
.theme-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);border-radius:999px;padding:7px 12px;font:inherit;font-size:.92rem;cursor:pointer;white-space:nowrap}
.theme-btn svg{width:18px;height:18px}
@media (max-width:900px){
  .head-in{flex-wrap:wrap;gap:8px 12px}
  .theme-btn{margin-left:auto}
  .top-nav{order:3;width:calc(100% + 16px);margin:0 -8px}
}

/* layout with left rail */
.shell{max-width:1320px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:1200px){.shell{grid-template-columns:204px minmax(0,1fr);column-gap:44px}}
.rail{display:none}
@media (min-width:1200px){.rail{display:block;position:sticky;top:calc(env(safe-area-inset-top,0px) + 92px);align-self:start;margin-top:36px}}
.rail h2{font-family:var(--f-body);font-size:.92rem;font-weight:700;color:var(--muted);margin:0 0 10px 34px;letter-spacing:0}
.rail-map{position:relative}
.rail-map::before{content:"";position:absolute;left:12px;top:16px;bottom:16px;border-left:2px dashed var(--line-2)}
.rail-clean{position:absolute;left:11px;top:16px;width:4px;height:var(--clean,0px);background:var(--brand);border-radius:4px;transition:height .5s cubic-bezier(.2,.8,.2,1)}
.rail-bot{position:absolute;left:0;top:0;width:28px;height:28px;transform:translateY(var(--bot-y,4px));transition:transform .5s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.rail-bot svg{width:28px;height:28px;display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.18))}
.rail ol{list-style:none;margin:0;padding:0 0 0 34px}
.rail li{margin:2px 0}
.rail a{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:9px;padding:6px 8px;border-radius:10px;text-decoration:none;color:var(--ink-2);font-size:.95rem;line-height:1.25}
.rail a:hover{background:var(--surface-2);color:var(--ink)}
.rail a[aria-current="true"]{background:var(--surface);color:var(--ink);font-weight:700;box-shadow:inset 0 0 0 1px var(--line)}
.sw{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--room);font-size:.82rem;border:1px solid var(--line)}
.rail-hint{font-size:.85rem;color:var(--muted);margin:14px 0 0 34px;line-height:1.5}

/* sections */
main{min-width:0}
.sec{padding:56px 0;border-top:2px dashed var(--line)}
.sec-head{display:grid;grid-template-columns:54px minmax(0,1fr);gap:16px;align-items:start;margin-bottom:26px}
.chip{width:54px;height:54px;border-radius:15px;background:var(--room);display:grid;place-items:center;font-size:1.55rem;border:1px solid var(--line)}
.sec-sub{color:var(--ink-2);margin:8px 0 0;max-width:68ch}
.prose{max-width:70ch}

/* hero */
.hero{display:grid;gap:34px;padding:40px 0 48px;align-items:center}
@media (min-width:1000px){.hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.dek{font-size:1.2rem;color:var(--ink-2);max-width:58ch;margin:18px 0 0}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:22px;color:var(--muted);font-size:.98rem}
.byline .who{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:700}
.byline svg{width:42px;height:42px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:12px;font-weight:700;text-decoration:none;border:1px solid transparent;font:inherit;font-size:1rem;font-weight:700;cursor:pointer;line-height:1.25}
.btn-primary{background:var(--brand);color:var(--on-brand)}
.btn-primary:hover{background:var(--brand-hover)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{background:var(--surface-2)}
.btn svg{width:18px;height:18px;flex:none}
.plan{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:14px;box-shadow:var(--shadow)}
.plan-svg{display:block;width:100%;height:auto}
.plan-svg .sky{fill:var(--r-sky)}.plan-svg .butter{fill:var(--r-butter)}.plan-svg .mint{fill:var(--r-mint)}.plan-svg .lilac{fill:var(--r-lilac)}.plan-svg .aqua{fill:var(--r-aqua)}
.plan-svg .rug{fill:var(--surface);fill-opacity:.75;stroke:var(--line-2);stroke-dasharray:3 3}
.plan-svg .fringe{stroke:var(--line-2);stroke-width:1.5}
.plan-svg .furn{fill:var(--surface);stroke:var(--ink-2);stroke-width:1.4}
.plan-svg .furn-2{fill:var(--surface-2)}
.plan-svg .walls{fill:none;stroke:var(--wall);stroke-width:4;stroke-linecap:round}
.plan-svg .sill{fill:var(--k-butter)}
.plan-svg .dock{fill:var(--ink)}
.plan-svg .led{fill:#3FD3C1}
.plan-svg .cord{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.plan-svg .bowl{fill:var(--k-blush)}.plan-svg .bowl-in{fill:var(--surface)}
.plan-svg .clean-path{fill:none;stroke:var(--brand);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 5s linear .05s forwards;opacity:.85}
@keyframes draw{to{stroke-dashoffset:0}}
.plan-svg .bot-body{fill:var(--surface);stroke:var(--ink);stroke-width:2.4}
.plan-svg .bot-lidar{fill:var(--brand)}
.plan-svg .rl{font:700 13px var(--f-body);fill:var(--ink)}
.plan-svg .rs{font:400 12px var(--f-body);fill:var(--ink-2)}
.plan-svg .pin circle{fill:var(--surface);stroke:var(--brand);stroke-width:2.5}
.plan-svg .pin text{font-size:14px;text-anchor:middle;dominant-baseline:central}
.plan-svg .pin:hover circle,.plan-svg .pin:focus-visible circle{fill:var(--brand-soft);stroke-width:4}
.plan-svg .pin:focus{outline:none}
.plan-legend{list-style:none;margin:10px 0 0;padding:12px 6px 2px;border-top:1px dashed var(--line);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px;font-size:.95rem}
.plan-legend a{display:flex;gap:8px;text-decoration:none;color:var(--ink-2);padding:4px 6px;border-radius:8px;line-height:1.35}
.plan-legend a:hover{background:var(--surface-2);color:var(--ink)}
.plan-legend b{color:var(--ink)}
@media (max-width:560px){.plan-legend{grid-template-columns:1fr}}

/* short answer */
.answers{display:grid;grid-template-columns:1fr;background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden}
@media (min-width:760px){.answers{grid-template-columns:1fr 1fr}}
.ans{padding:20px 22px 18px;border-bottom:1px dashed var(--line);position:relative}
@media (min-width:760px){.ans:nth-child(odd){border-right:1px dashed var(--line)}.ans:nth-last-child(-n+2){border-bottom:0}}
.ans::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:5px;border-radius:0 4px 4px 0;background:var(--ink-room)}
.ans-for{font-size:.95rem;color:var(--muted);margin:0 0 2px;font-weight:700}
.ans-name{font-family:var(--f-head);font-stretch:108%;font-weight:720;font-size:1.25rem;margin:0 0 6px}
.ans-name a{color:var(--ink);text-decoration:none}
.ans-name a:hover{text-decoration:underline}
.ans-why{margin:0 0 10px;color:var(--ink-2)}
.ans-jump{font-weight:700;font-size:.98rem}
.small-note{font-size:.92rem;color:var(--muted);margin:14px 0 0}

/* filters + pick sheets */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}
.filters button{font:inherit;font-size:.96rem;padding:8px 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);cursor:pointer}
.filters button:hover{color:var(--ink);background:var(--surface-2)}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.filter-status{font-size:.92rem;color:var(--muted);margin:0 0 18px}
.pick{display:grid;gap:22px;background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--ink-room);border-radius:18px;padding:22px;margin:0 0 22px}
.pick[hidden]{display:none}
@media (min-width:900px){.pick{grid-template-columns:236px minmax(0,1fr);padding:26px 28px 24px}}
.pick-media{position:relative;background:var(--room);border-radius:14px;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;max-width:420px;width:100%}
@media (min-width:900px){.pick-media{align-self:start}}
.pick-media svg{width:78%;height:auto}
.rank{position:absolute;top:10px;left:10px;font-family:var(--f-head);font-stretch:122%;font-weight:800;font-size:1rem;background:var(--surface);color:var(--ink);padding:3px 10px;border-radius:999px;border:1px solid var(--line)}
.best-for{display:inline-block;font-weight:700;font-size:.94rem;color:var(--ink);background:var(--room);padding:4px 12px;border-radius:999px;margin:0 0 10px;border:1px solid var(--line)}
.pick h3{font-size:clamp(1.4rem,1.1rem + 1vw,1.85rem)}
.oneline{font-size:1.16rem;color:var(--ink);margin:10px 0 14px}
.facts{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0 0 16px}
.facts li{font-size:.92rem;padding:4px 11px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2);background:var(--bg)}
.review p{max-width:72ch}
.fit{display:grid;gap:12px;margin:6px 0 14px}
@media (min-width:720px){.fit{grid-template-columns:1fr 1fr}}
.fit > div{border-radius:12px;padding:12px 14px}
.fit h4{font-family:var(--f-body);font-size:1rem;margin:0 0 4px;display:flex;gap:7px;align-items:center}
.fit h4 svg{width:18px;height:18px;flex:none}
.fit p{margin:0;font-size:1rem}
.buy{background:var(--buy-bg)}.buy h4{color:var(--buy)}
.skip-if{background:var(--skip-bg)}.skip-if h4{color:var(--skip)}
.sources{font-size:.95rem;color:var(--muted);margin:0 0 14px}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.cta-note{flex-basis:100%;font-size:.88rem;color:var(--muted);margin:2px 0 0}
.roomba-note{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;background:var(--r-stone);border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin:4px 0 0}
.roomba-note p{margin:0}
.roomba-note .ic{font-size:1.4rem}

/* compare */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface);-webkit-overflow-scrolling:touch}
table{border-collapse:separate;border-spacing:0;width:100%;min-width:900px;font-size:.97rem}
caption{text-align:left;padding:12px 14px;color:var(--muted);font-size:.92rem;caption-side:bottom;border-top:1px solid var(--line)}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font-family:var(--f-head);font-stretch:106%;font-weight:700;background:var(--surface-2);white-space:nowrap}
tbody th{position:sticky;left:0;background:var(--surface);font-weight:700;min-width:200px;box-shadow:1px 0 0 var(--line)}
tbody th a{color:var(--ink);text-decoration:none}
tbody th a:hover{text-decoration:underline}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
.yes{color:var(--buy);font-weight:700}
.no{color:var(--muted)}

/* matcher */
.matcher{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px;display:grid;gap:22px}
@media (min-width:980px){.matcher{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);padding:28px}}
.q{border:0;margin:0 0 18px;padding:0}
.q legend{font-weight:700;margin-bottom:8px;padding:0}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt span{display:inline-block;padding:8px 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--bg);cursor:pointer;font-size:.98rem;color:var(--ink-2)}
.opt input:checked + span{background:var(--brand);border-color:var(--brand);color:var(--on-brand);font-weight:700}
.opt input:focus-visible + span{outline:3px solid var(--brand);outline-offset:2px}
.result{background:var(--r-lilac);border-radius:16px;padding:20px;align-self:start;border:1px solid var(--line)}
.result h3{font-size:1.3rem;margin-bottom:8px}
.result .r-why{color:var(--ink)}
.result ul{margin:10px 0 14px;padding-left:1.1em}
.result li{margin:4px 0}
.result .r-alt{font-size:.98rem;color:var(--ink-2)}
.result-empty{color:var(--ink-2)}

/* video */
.video{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#1D2427;border:1px solid var(--line)}
.video-poster{all:unset;cursor:pointer;display:block;width:100%;height:100%}
.video-poster svg{width:100%;height:100%;display:block}
.video-poster:focus-visible{outline:3px solid var(--brand);outline-offset:-3px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-meta{font-size:.98rem;color:var(--ink-2);margin:14px 0 0;max-width:72ch}
.ext{display:inline-flex;align-items:center;gap:5px;font-weight:700}
.ext svg{width:15px;height:15px}

/* guide */
.guide{display:grid;gap:0}
.g-item{display:grid;grid-template-columns:1fr;gap:14px;padding:22px 0;border-bottom:1px dashed var(--line)}
.g-item:first-child{padding-top:0}
.g-item:last-child{border-bottom:0}
@media (min-width:760px){.g-item{grid-template-columns:132px minmax(0,1fr);gap:24px}}
.g-art{width:132px;height:88px;border-radius:14px;background:var(--room);display:grid;place-items:center;border:1px solid var(--line)}
.g-art svg{width:112px;height:76px;color:var(--ink)}
.g-item h3{font-size:1.25rem;margin-bottom:8px}
.g-item p{max-width:70ch;margin-bottom:.6em}
.g-src{font-size:.92rem;color:var(--muted)}

/* method */
.src-list{display:grid;gap:12px;margin:20px 0 0;padding:0}
@media (min-width:760px){.src-list{grid-template-columns:1fr 1fr}}
.src-list div{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.src-list dt{font-weight:700}
.src-list dd{margin:4px 0 0;color:var(--ink-2);font-size:1rem}

/* accessories */
.acc{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin:0;padding:0;list-style:none}
.acc li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:start;padding:14px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.acc .ai{width:44px;height:44px;border-radius:12px;background:var(--room);display:grid;place-items:center;color:var(--ink)}
.acc .ai svg{width:28px;height:28px}
.acc b{display:block;line-height:1.3}
.acc span{font-size:.95rem;color:var(--ink-2);line-height:1.45;display:block;margin-top:3px}
.acc-kind{font-size:.92rem;color:var(--muted);margin:22px 0 10px;font-weight:700}
.acc-kind:first-of-type{margin-top:0}

/* faq */
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:14px;margin:0 0 10px}
.faq summary{cursor:pointer;list-style:none;padding:16px 52px 16px 18px;font-weight:700;position:relative;font-size:1.08rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:18px;top:50%;width:14px;height:14px;margin-top:-7px;background:linear-gradient(var(--ink-2),var(--ink-2)) center/14px 2px no-repeat,linear-gradient(var(--ink-2),var(--ink-2)) center/2px 14px no-repeat;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 18px 16px}
.faq .a p{margin:0;max-width:72ch;color:var(--ink-2)}

/* verdict */
.verdict{background:var(--brand-soft);border:1px solid var(--line);border-radius:20px;padding:24px 26px}
.verdict p{max-width:72ch}
.verdict p:last-child{margin-bottom:0}
.related{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.related a{display:inline-block;padding:8px 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);text-decoration:none;color:var(--ink);font-size:.96rem}
.related a:hover{background:var(--surface-2)}

/* footer */
.site-foot{background:var(--foot-bg);color:var(--foot-ink);margin-top:40px}
.foot-in{max-width:1320px;margin:0 auto;padding:44px 20px 34px;display:grid;gap:28px}
@media (min-width:900px){.foot-in{grid-template-columns:1.3fr 1fr 1fr}}
.site-foot a{color:var(--foot-link)}
.site-foot h2{font-family:var(--f-body);font-size:.95rem;color:var(--foot-ink);opacity:.8;margin:0 0 10px}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:1rem}
.foot-brand{display:flex;gap:12px;align-items:flex-start}
.foot-brand svg{width:40px;height:40px;flex:none}
.foot-brand b{font-family:var(--f-head);font-stretch:116%;font-size:1.15rem;display:block;color:#fff}
:root[data-theme="dark"] .foot-brand b{color:var(--foot-ink)}
.foot-brand p{margin:6px 0 0;font-size:.98rem;max-width:42ch}
.legal{grid-column:1/-1;border-top:1px solid var(--foot-line);padding-top:18px;font-size:.92rem;margin:0}

/* mobile jump */
.jump{position:fixed;right:0;bottom:0;z-index:55;padding:0 14px calc(14px + env(safe-area-inset-bottom,0px)) 0;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}
.jump > *{pointer-events:auto}
@media (min-width:1200px){.jump{display:none}}
.jump-btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:11px 16px 11px 12px;background:var(--ink);color:var(--bg);font:inherit;font-weight:700;font-size:.98rem;box-shadow:var(--shadow);cursor:pointer}
.jump-btn svg{width:24px;height:24px}
.jump-panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:8px;width:min(300px,calc(100vw - 28px));max-height:min(70vh,520px);overflow:auto}
.jump-panel ol{list-style:none;margin:0;padding:0}
.jump-panel a{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:center;padding:9px 10px;border-radius:10px;text-decoration:none;color:var(--ink)}
.jump-panel a[aria-current="true"]{background:var(--surface-2);font-weight:700}

@media (prefers-reduced-motion:reduce){
  .plan-svg .clean-path{animation:none;stroke-dashoffset:0}
  .rail-bot,.rail-clean,.faq summary::after{transition:none}
}


/* ---------- worries: what buyers actually care about ---------- */
.worries{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.worries{grid-template-columns:repeat(2,minmax(0,1fr))}}
.worry{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 18px 16px 74px;display:flex;flex-direction:column}
.worry.no-ic{padding-left:18px}
.worry .we{position:absolute;left:16px;top:16px;width:42px;height:42px;border-radius:12px;background:var(--r-blush);border:1px solid var(--line);display:grid;place-items:center;font-size:1.25rem;line-height:1}
.worry h3{font-size:1.16rem;font-stretch:104%;margin:2px 0 8px;line-height:1.25}
.worry p{margin:0 0 .6em;color:var(--ink-2)}
.worry .wp{margin:auto 0 0;padding-top:10px;border-top:1px dashed var(--line);color:var(--ink);font-size:.98rem;display:grid;gap:4px}
.worry .wp span{display:block}
.worry .wp b{font-weight:700}
.worry-src{font-size:.94rem;color:var(--muted);margin:16px 0 0;max-width:80ch}
.worry-jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0;list-style:none}
.worry-jump a{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);text-decoration:none;font-size:.95rem}
.worry-jump a:hover{background:var(--surface-2)}
.worry:target{box-shadow:0 0 0 3px var(--brand)}

/* ---------- pick cards: photo, notes, prices ---------- */
.pick-media img{width:84%;height:84%;object-fit:contain;background:#fff;border-radius:12px;display:block}
.angle{background:var(--surface-2);border-radius:12px;padding:10px 14px;margin:0 0 14px;font-size:1.02rem}
.angle b{font-weight:700}
.flag{display:flex;gap:10px;align-items:flex-start;background:var(--r-butter);border:1px solid var(--line);border-radius:12px;padding:9px 13px;margin:0 0 14px;font-size:.98rem;color:var(--ink)}
.price-line{flex-basis:100%;margin:0;font-size:.95rem;color:var(--ink-2)}
.pick-body{min-width:0}

/* ---------- matcher result extras ---------- */
.result .r-fit{color:var(--ink);font-weight:700;font-size:1rem}
.result .r-warn{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:.98rem}
.result .note{font-size:.92rem;color:var(--ink-2);margin:14px 0 0}
.result:focus{outline:none}

/* ---------- upkeep estimator ---------- */
.est{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px;display:grid;gap:22px}
@media (min-width:980px){.est{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);padding:28px}}
.nums{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-top:6px}
.num{display:grid;gap:6px;font-size:.96rem;font-weight:700;color:var(--ink-2)}
.num input{font:inherit;font-weight:400;font-size:1.05rem;padding:9px 12px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);width:100%}
.est .result{background:var(--r-butter)}
.e-total{font-family:var(--f-head);margin:0}
.e-total b{font-size:2.3rem;font-stretch:112%;font-weight:800;color:var(--ink)}
.e-total span{color:var(--ink-2);font-size:1.05rem}
.e-month{margin:0 0 12px;color:var(--ink-2)}
.e-table{min-width:0;font-size:.95rem;background:var(--surface);border-radius:10px;overflow:hidden}
.e-table th,.e-table td{padding:8px 10px}
.e-table tbody th{position:static;min-width:0;box-shadow:none}
.e-note{font-size:.95rem;margin:10px 0 0}

/* ---------- search-only model cards (Roborock) ---------- */
.scard{background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--k-sky);border-radius:16px;padding:18px 20px;margin:0 0 14px}
.scard h3{font-size:1.3rem;margin-bottom:8px}
.scard p{max-width:72ch}

/* ---------- timeline ---------- */
.timeline{list-style:none;margin:0;padding:0 0 0 22px;border-left:2px dashed var(--line-2);display:grid;gap:16px}
.timeline li{position:relative;max-width:74ch}
.timeline li::before{content:"";position:absolute;left:-30px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--surface);border:3px solid var(--brand)}
.timeline b{display:block;font-family:var(--f-head);font-stretch:106%;font-size:1.05rem}

/* ---------- lineup tables ---------- */
table.lineup{min-width:720px}
.note{font-size:.95rem;color:var(--ink-2);margin:12px 0 0}

/* ---------- alternatives, brands, prose blocks ---------- */
.alts{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.alt{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px}
.alt > a{font-family:var(--f-head);font-weight:700;font-size:1.1rem}
.alt p{margin:6px 0 0;color:var(--ink-2)}
.brand-b{padding:20px 0;border-bottom:1px dashed var(--line)}
.brand-b:first-of-type{padding-top:0}
.brand-b:last-child{border-bottom:0}
.brand-b h3{margin-bottom:8px}
.brand-b p{max-width:72ch}
.starts{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.starts a{display:inline-block;padding:6px 12px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);text-decoration:none;color:var(--ink);font-size:.95rem}
.starts a:hover{background:var(--surface-2)}
.pblock{max-width:72ch;margin:0 0 22px}
.pblock h3{margin-bottom:8px}

/* ---------- accessory cards ---------- */
.acc-cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.acc-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:8px}
.acc-card .ill{width:56px;height:56px;border-radius:14px;background:var(--room);display:grid;place-items:center;color:var(--ink);border:1px solid var(--line)}
.acc-card .ill svg{width:32px;height:32px}
.acc-card h3{font-size:1.1rem;line-height:1.3}
.acc-card p{margin:0;color:var(--ink-2);font-size:1rem}
.acc-card .tip{background:var(--surface-2);border-radius:10px;padding:8px 10px;font-size:.95rem}
.acc-card .btn{margin-top:auto;align-self:flex-start}
.acc-card:target{box-shadow:0 0 0 3px var(--brand)}

/* ---------- sub-page hero and breadcrumbs ---------- */
.hero-page{padding:30px 0 44px}
.hero-page h1{max-width:24ch}
.crumbs ol{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:6px;font-size:.95rem;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--line-2)}
.crumbs a{color:var(--ink-2)}

/* ---------- trust pages ---------- */
.shell.no-rail{grid-template-columns:minmax(0,1fr)}
.trust{max-width:760px;padding:34px 0 60px}
.trust h1{margin-bottom:22px}
.trust h2{font-size:1.4rem;margin:30px 0 10px}
.trust p{max-width:70ch}
.person{display:flex;align-items:center;gap:16px;margin:0 0 10px}
.person svg{width:72px;height:72px}
.updated{color:var(--muted);font-size:.95rem}

/* ---------- small screens ---------- */
@media (max-width:480px){
  .theme-btn{padding:8px 10px}
  .theme-btn .tl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .head-in{flex-wrap:wrap}
}
@media (max-width:560px){
  .sec{padding:44px 0}
  .worry{padding:16px 16px 14px 66px}
  .worry .we{left:12px;top:14px;width:40px;height:40px}
  .pick{padding:18px}
  .sec-head{grid-template-columns:46px minmax(0,1fr);gap:12px}
  .chip{width:46px;height:46px;font-size:1.3rem;border-radius:13px}
}
@media print{.rail,.jump,.site-head,.theme-btn,.filters,.copy{display:none!important}.pick{break-inside:avoid}}