/* Committed single-theme brand world: white ground, deep navy structure, ocean
   teal signal. Every colour is painted explicitly so the page holds on either
   host ground rather than borrowing the viewer's. */
/* ============================================================
   ReefReadyGear.com — Design System
   ------------------------------------------------------------
   DIRECTION CONTRACT
   One idea this site owns: the nautical chart as an interface.
   Bathymetric depth contours, coordinate ticks and sonar returns
   are the visual world; every surface is a chart panel, every
   product a logged position. Palette: white ground, deep navy
   structure, ocean teal as the single signal colour.
   The visitor understands: this is a research-led saltwater gear
   authority, not a listicle farm. The visitor does: enters a
   category hub or a buyers guide.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Core palette (brief: premium alternative) */
  --navy:#062B45;
  --navy-900:#041d2f;
  --navy-800:#062B45;
  --navy-700:#0b3d5e;
  --navy-600:#12547d;
  --teal:#0F9D8A;
  --teal-700:#0B7A6B;
  --teal-btn:#0A6E60;      /* white text passes AA (6.15:1) */
  --teal-btn-hover:#075A4F;
  --teal-300:#5FC9B8;
  --teal-100:#DFF3EF;

  /* Neutrals */
  --white:#FFFFFF;
  --surface:#F6F9FA;
  --surface-2:#EDF3F5;
  --border:#DCE5E9;
  --border-strong:#C3D2D9;
  --ink:#062B45;
  --body:#334155;
  --muted:#5C7080;

  /* Roles */
  --page-bg:var(--white);
  --card-bg:var(--white);
  --focus:#0F9D8A;

  /* Type */
  --display:"Newsreader",ui-serif,Georgia,"Times New Roman",serif;
  --ui:"Archivo","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* Spacing scale (4-base) */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem; --s10:8rem;

  /* Radii — concentric pairs for the double-bezel */
  --r-shell:1.75rem;
  --r-core:1.375rem;
  --r-md:.875rem;
  --r-sm:.5rem;
  --r-pill:999px;

  /* Elevation: offset + soft blur, tinted from the navy hue */
  --e1:0 1px 2px rgba(6,43,69,.05), 0 2px 8px rgba(6,43,69,.04);
  --e2:0 2px 4px rgba(6,43,69,.05), 0 12px 28px -8px rgba(6,43,69,.10);
  --e3:0 4px 8px rgba(6,43,69,.06), 0 24px 56px -16px rgba(6,43,69,.16);

  /* Motion */
  --ease:cubic-bezier(.32,.72,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:140ms; --t-mid:280ms; --t-slow:640ms;

  --maxw:1240px;
  --measure:68ch;
  --nav-h:82px;
}

/* ---------- 2. RESET / BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 1.5rem)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--page-bg);color:var(--body);
  font-family:var(--ui);font-size:1.0625rem;line-height:1.65;
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
/* Inline UI icons carry small viewBoxes; without an explicit size they would
   stretch to fill their container. Size them by viewBox, then let component
   rules later in this file override where a specific size is wanted. */
svg[viewBox="0 0 12 12"],svg[viewBox="0 0 16 16"],svg[viewBox="0 0 20 20"],svg[viewBox="0 0 24 24"]{
  width:1.05em;height:1.05em;flex:0 0 auto;display:inline-block;vertical-align:middle}
a{color:var(--teal-700);text-decoration-color:color-mix(in srgb,var(--teal) 40%,transparent);text-underline-offset:.18em}
a:hover{color:var(--teal)}
button{font:inherit}
:focus-visible{outline:2.5px solid var(--focus);outline-offset:3px;border-radius:4px}

h1,h2,h3,h4{font-family:var(--display);color:var(--ink);font-weight:600;line-height:1.08;letter-spacing:-.02em;margin:0 0 var(--s4)}
h1{font-size:clamp(2.6rem,6.2vw,5.25rem);letter-spacing:-.035em;font-variation-settings:"opsz" 40}
h2{font-size:clamp(2rem,3.8vw,3.25rem);letter-spacing:-.028em;font-variation-settings:"opsz" 32}
h3{font-size:clamp(1.35rem,2vw,1.75rem);letter-spacing:-.02em}
h4{font-size:1.125rem;letter-spacing:-.01em;font-family:var(--ui);font-weight:650}
p{margin:0 0 var(--s4);max-width:var(--measure)}
.lede{font-size:clamp(1.125rem,1.5vw,1.3125rem);line-height:1.6;color:var(--body)}

/* ---------- 3. LAYOUT ---------- */
.wrap{width:min(100% - 2.5rem,var(--maxw));margin-inline:auto}
.wrap-narrow{width:min(100% - 2.5rem,860px);margin-inline:auto}
.section{padding-block:clamp(3.5rem,8vw,7rem)}
.section--tight{padding-block:clamp(2.5rem,5vw,4rem)}
.section--surface{background:var(--surface)}
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s5);margin-bottom:var(--s7)}
.section-head p{margin:0;max-width:56ch;color:var(--muted)}
.section-head .h-block{max-width:34ch}
.section-head h2{margin-bottom:.35em}
@media (max-width:640px){.wrap,.wrap-narrow{width:min(100% - 2rem,var(--maxw))}}

/* Chart-tick rule: the site's signature divider */
.tickrule{height:14px;background-image:linear-gradient(90deg,var(--border-strong) 1px,transparent 1px);background-size:12px 100%;background-position:0 100%;background-repeat:repeat-x;opacity:.85;border-bottom:1px solid var(--border)}

/* ---------- 4. NAVIGATION ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:.75rem 1.25rem;z-index:200;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}

.topbar{background:var(--navy-900);color:#B9CBD6;font-size:.78rem;letter-spacing:.02em}
.topbar .wrap{display:flex;gap:var(--s4);align-items:center;justify-content:space-between;min-height:36px;flex-wrap:wrap}
@media (max-width:640px){.topbar{font-size:.72rem}.topbar .wrap>a{display:none}.topbar .wrap{padding-block:.35rem}}
.topbar a{color:#DCE9F0;text-decoration:none;border-bottom:1px solid rgba(220,233,240,.3)}
.topbar a:hover{color:var(--teal-300);border-color:var(--teal-300)}
.topbar__disc{display:flex;align-items:center;gap:.5rem}
.topbar__disc svg{width:14px;height:14px;flex:0 0 auto}

.nav{position:sticky;top:0;z-index:100;background:rgba(6,43,69,.94);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid rgba(255,255,255,.09);transition:box-shadow var(--t-mid) var(--ease)}
.nav.is-stuck{box-shadow:0 12px 32px -12px rgba(4,29,47,.55)}
.nav__inner{display:flex;align-items:center;gap:var(--s5);min-height:var(--nav-h);position:relative}

/* Brand wordmark. One <symbol>, referenced three times; the navy group is
   currentColor and the teal group reads --logo-accent, so the same asset
   serves the dark header and any light surface. */
.brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto;
  color:#fff;--logo-accent:#5FC9B8}
.brand__logo{height:44px;width:calc(44px * 3.361);display:block;
  transition:opacity var(--t-fast) var(--ease)}
.brand:hover .brand__logo{opacity:.86}
.brand:focus-visible{outline-offset:6px;border-radius:6px}
@media (max-width:1120px){.brand__logo{height:34px;width:calc(34px * 3.361)}}
@media (max-width:420px){.brand__logo{height:30px;width:calc(30px * 3.361)}}
/* on a light ground, if the wordmark is ever used there */
.brand--light{color:var(--navy);--logo-accent:var(--teal)}

.menu{display:flex;align-items:center;gap:.15rem;margin-left:auto;padding-left:.5rem;list-style:none;padding:0;margin-block:0}
.menu>li{position:static}
.menu__link{display:flex;align-items:center;gap:.32rem;padding:.62rem .68rem;border-radius:var(--r-sm);color:#D6E4EC;text-decoration:none;font-size:.845rem;font-weight:500;letter-spacing:.005em;white-space:nowrap;transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.menu__link:hover,.menu>li:hover>.menu__link,.menu__link[aria-expanded="true"]{color:#fff;background:rgba(255,255,255,.08)}
.menu__link[aria-current="page"]{color:var(--teal-300)}
.menu__link svg{width:9px !important;height:9px !important;transition:transform var(--t-fast) var(--ease);opacity:.7}
.menu>li:hover>.menu__link svg,.menu__link[aria-expanded="true"] svg{transform:rotate(180deg)}

.mega{position:absolute;top:calc(100% + 10px);right:0;left:auto;width:min(92vw,660px);background:var(--white);border-radius:var(--r-shell);box-shadow:var(--e3);border:1px solid var(--border);padding:.5rem;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease),visibility var(--t-mid)}
.menu>li:hover>.mega,.menu>li:focus-within>.mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega__inner{background:var(--surface);border-radius:var(--r-core);padding:1.5rem;display:grid;grid-template-columns:1fr 1fr;gap:.35rem 1.75rem}
.mega__title{grid-column:1/-1;font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 .6rem;padding-bottom:.6rem;border-bottom:1px solid var(--border)}
.mega a{display:block;padding:.5rem .6rem;border-radius:var(--r-sm);color:var(--ink);text-decoration:none;font-size:.9rem;font-weight:500;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.mega a:hover{background:var(--white);color:var(--teal-700);box-shadow:var(--e1)}
.mega__hub{grid-column:1/-1;margin-top:.75rem;padding-top:.85rem;border-top:1px solid var(--border)}
.mega__hub a{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-700);padding:.35rem .1rem}
.mega__hub a:hover{background:transparent;gap:.85rem}

.nav__tools{display:flex;align-items:center;gap:.35rem;flex:0 0 auto}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);border-radius:var(--r-pill);color:#D6E4EC;cursor:pointer;transition:all var(--t-fast) var(--ease)}
.icon-btn:hover{background:rgba(255,255,255,.13);color:#fff;border-color:rgba(255,255,255,.3)}
.icon-btn svg{width:17px;height:17px}
.burger{display:none}
.burger span{display:block;width:18px;height:1.7px;background:currentColor;border-radius:2px;transition:transform var(--t-mid) var(--ease),opacity var(--t-fast) var(--ease)}
.burger span+span{margin-top:5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Search overlay */
.searchbar{display:none;border-top:1px solid rgba(255,255,255,.1);background:rgba(4,29,47,.97)}
.searchbar.is-open{display:block}
.searchbar form{display:flex;gap:.6rem;padding:1rem 0;align-items:center}
.searchbar input{flex:1;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);color:#fff;padding:.85rem 1.1rem;border-radius:var(--r-pill);font-size:.95rem;font-family:var(--ui)}
.searchbar input::placeholder{color:#84A5B8}
.searchbar input:focus{outline:none;border-color:var(--teal);background:rgba(255,255,255,.1)}
.search-note{color:#84A5B8;font-size:.78rem;padding-bottom:1rem;margin:0;font-family:var(--mono)}

/* Mobile drawer */
.drawer{position:fixed;inset:0;z-index:150;background:rgba(4,29,47,.97);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);opacity:0;visibility:hidden;transition:opacity var(--t-mid) var(--ease),visibility var(--t-mid);overflow-y:auto;padding:1.1rem 0 4rem}
.drawer.is-open{opacity:1;visibility:visible}
.drawer__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.75rem}
.drawer__top .brand__logo{height:32px;width:calc(32px * 3.361)}
.drawer details{border-bottom:1px solid rgba(255,255,255,.1)}
.drawer summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:1.05rem .25rem;color:#fff;font-size:1.18rem;font-family:var(--display);font-weight:500;letter-spacing:-.015em}
.drawer summary::-webkit-details-marker{display:none}
.drawer summary svg{width:14px;height:14px}
.drawer summary::after{content:"";width:9px;height:9px;border-right:1.6px solid var(--teal-300);border-bottom:1.6px solid var(--teal-300);transform:rotate(45deg) translateY(-2px);transition:transform var(--t-fast) var(--ease)}
.drawer details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.drawer details ul{list-style:none;padding:0 0 1rem .25rem;margin:0;display:grid;gap:.1rem}
.drawer details a{display:block;padding:.5rem 0;color:#B9CBD6;text-decoration:none;font-size:.95rem}
.drawer details a:hover{color:var(--teal-300)}
.drawer__solo{display:block;padding:1.05rem .25rem;color:#fff;text-decoration:none;font-size:1.18rem;font-family:var(--display);border-bottom:1px solid rgba(255,255,255,.1)}
.drawer__items>*{opacity:0;transform:translateY(14px)}
.drawer.is-open .drawer__items>*{animation:driftUp .5s var(--ease-out) forwards}
.drawer.is-open .drawer__items>*:nth-child(1){animation-delay:.04s}
.drawer.is-open .drawer__items>*:nth-child(2){animation-delay:.08s}
.drawer.is-open .drawer__items>*:nth-child(3){animation-delay:.12s}
.drawer.is-open .drawer__items>*:nth-child(4){animation-delay:.16s}
.drawer.is-open .drawer__items>*:nth-child(5){animation-delay:.20s}
.drawer.is-open .drawer__items>*:nth-child(6){animation-delay:.24s}
.drawer.is-open .drawer__items>*:nth-child(7){animation-delay:.28s}
.drawer.is-open .drawer__items>*:nth-child(8){animation-delay:.32s}
@keyframes driftUp{to{opacity:1;transform:translateY(0)}}

@media (max-width:1120px){
  .menu{display:none}
  .burger{display:grid}
}

/* ---------- 5. BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:.7rem;padding:.9rem 1rem .9rem 1.5rem;border-radius:var(--r-pill);font-family:var(--ui);font-weight:600;font-size:.95rem;letter-spacing:-.005em;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background var(--t-mid) var(--ease),color var(--t-mid) var(--ease),transform var(--t-fast) var(--ease),box-shadow var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease)}
.btn:active{transform:scale(.978)}
.btn__ic{width:30px;height:30px;border-radius:var(--r-pill);display:grid;place-items:center;flex:0 0 auto;transition:transform var(--t-mid) var(--ease),background var(--t-mid) var(--ease)}
.btn__ic svg{width:13px;height:13px}
.btn:hover .btn__ic{transform:translate(3px,-1px) scale(1.06)}
.btn--primary{background:var(--teal-btn);color:#fff;box-shadow:0 2px 4px rgba(11,122,107,.18),0 14px 30px -12px rgba(11,122,107,.55)}
.btn--primary .btn__ic{background:rgba(255,255,255,.2)}
.btn--primary:hover{background:var(--teal-btn-hover);color:#fff;box-shadow:0 4px 8px rgba(11,122,107,.22),0 20px 40px -14px rgba(11,122,107,.6)}
.btn--ghost{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.28)}
.btn--ghost .btn__ic{background:rgba(255,255,255,.14)}
.btn--ghost:hover{background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.5)}
.btn--outline{background:var(--white);color:var(--ink);border-color:var(--border-strong)}
.btn--outline .btn__ic{background:var(--surface-2)}
.btn--outline:hover{color:var(--teal-700);border-color:var(--teal);box-shadow:var(--e2)}
.btn--sm{padding:.6rem .6rem .6rem 1.05rem;font-size:.85rem}
.btn--sm .btn__ic{width:25px;height:25px}
.btn--sm .btn__ic svg{width:11px;height:11px}
.btn--block{display:flex;justify-content:center;width:100%}

/* Amazon CTA — the site's single loudest control */
.btn--amazon{background:var(--teal-btn);color:#fff;box-shadow:0 2px 4px rgba(11,122,107,.2),0 12px 26px -12px rgba(11,122,107,.6)}
.btn--amazon .btn__ic{background:rgba(255,255,255,.2)}
.btn--amazon:hover{background:var(--teal-btn-hover);color:#fff}

/* ---------- 6. HERO ---------- */
.hero{position:relative;min-height:min(94dvh,860px);display:flex;align-items:flex-end;background:var(--navy-900);overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg svg{width:100%;height:100%;object-fit:cover}
.hero__scrim{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(4,29,47,.72) 0%,rgba(4,29,47,.32) 34%,rgba(4,29,47,.86) 78%,rgba(4,29,47,.97) 100%),
  radial-gradient(120% 80% at 78% 18%,rgba(15,157,138,.22) 0%,transparent 62%)}
.hero__inner{padding-block:clamp(4rem,12vh,8rem) clamp(3rem,7vh,5rem)}
.hero h1{color:#fff;max-width:15ch;margin-bottom:var(--s5);text-shadow:0 2px 40px rgba(4,29,47,.5)}
.hero h1 em{font-style:italic;color:var(--teal-300)}
.hero__sub{color:#CBDCE6;font-size:clamp(1.02rem,1.35vw,1.19rem);line-height:1.62;max-width:62ch;margin-bottom:var(--s6)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:clamp(2.5rem,6vh,4rem)}
.hero__strip{display:flex;flex-wrap:wrap;gap:var(--s2);border-top:1px solid rgba(255,255,255,.15);padding-top:var(--s5)}
.hero__strip a{flex:1 1 150px;display:flex;flex-direction:column;gap:.3rem;padding:.85rem 1rem;border-radius:var(--r-md);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);text-decoration:none;transition:background var(--t-mid) var(--ease),transform var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease)}
.hero__strip a:hover{background:rgba(255,255,255,.12);transform:translateY(-3px);border-color:rgba(95,201,184,.5)}
.hero__strip .n{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;color:var(--teal-300)}
.hero__strip .t{color:#fff;font-size:.92rem;font-weight:600;line-height:1.25}
@media (max-width:640px){.hero{min-height:auto}.hero__inner{padding-block:5rem 3rem}}

/* Animated sonar sweep */
.sonar-sweep{transform-origin:50% 100%;animation:sweep 7s linear infinite}
@keyframes sweep{from{transform:rotate(-38deg)}to{transform:rotate(38deg)}}
.drift-slow{animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{from{transform:translateX(-1.5%)}to{transform:translateX(1.5%)}}
@media (prefers-reduced-motion:reduce){
  .sonar-sweep,.drift-slow{animation:none}
  .drawer.is-open .drawer__items>*{animation:none;opacity:1;transform:none}
}

/* ---------- 7. DOUBLE-BEZEL PANEL ---------- */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-shell);padding:.4rem}
.panel__core{background:var(--white);border-radius:var(--r-core);padding:clamp(1.5rem,3vw,2.5rem);box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}

/* ---------- 8. CATEGORY GRID (asymmetric bento) ---------- */
.catgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s4)}
.cat{position:relative;grid-column:span 2;min-height:270px;border-radius:var(--r-shell);overflow:hidden;text-decoration:none;background:var(--navy-800);display:flex;flex-direction:column;justify-content:flex-end;padding:1.6rem;isolation:isolate;transition:transform var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease)}
.cat:hover{transform:translateY(-5px);box-shadow:var(--e3)}
.cat--wide{grid-column:span 3;min-height:330px}
.cat--tall{grid-column:span 3;min-height:330px}
.cat--full{grid-column:span 6;min-height:360px;padding:2rem 2.2rem}
.cat--full h3{font-size:clamp(1.6rem,2.6vw,2.35rem)}
.cat--full p{max-width:52ch;font-size:.95rem}
.cat__art{position:absolute;inset:0;z-index:-2}
.cat__art svg{width:100%;height:100%}
.cat::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(175deg,rgba(4,29,47,.15) 0%,rgba(4,29,47,.55) 45%,rgba(4,29,47,.93) 100%);transition:opacity var(--t-slow) var(--ease)}
.cat:hover::after{opacity:.88}
.cat__n{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:var(--teal-300);margin-bottom:.55rem}
.cat h3{color:#fff;margin:0 0 .5rem;font-size:clamp(1.25rem,1.8vw,1.7rem)}
.cat p{color:#C0D3DE;font-size:.87rem;line-height:1.5;margin:0;max-width:38ch}
.cat__go svg{width:13px;height:13px;flex:0 0 auto}
.cat__go{display:inline-flex;align-items:center;gap:.45rem;margin-top:1rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;transition:gap var(--t-mid) var(--ease)}
.cat:hover .cat__go{gap:.85rem;color:var(--teal-300)}
@media (max-width:900px){.catgrid{grid-template-columns:repeat(2,1fr)}.cat,.cat--wide,.cat--tall,.cat--full{grid-column:span 1;min-height:250px}}
@media (max-width:560px){.catgrid{grid-template-columns:1fr}}

/* ---------- 9. PRODUCT CARD ---------- */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:var(--s5)}
.pgrid--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){.pgrid--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.pgrid,.pgrid--3{grid-template-columns:1fr;gap:var(--s4)}}

.pcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-shell);padding:.4rem;transition:transform var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease),border-color var(--t-slow) var(--ease)}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--e3);border-color:var(--border-strong)}
.pcard__core{display:flex;flex-direction:column;flex:1;background:var(--white);border-radius:var(--r-core);overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.pcard__media{position:relative;aspect-ratio:1/1;background:#fff;display:grid;place-items:center;
  overflow:hidden;border-bottom:1px solid var(--border)}
.pcard__media svg{width:82%;height:82%;transition:transform var(--t-slow) var(--ease)}
.pcard:hover .pcard__media svg{transform:scale(1.045)}
/* Real product photography: square source, white ground, padding already baked
   into the file, so contain rather than cover and let the image fill the cell. */
.pcard__media img{width:100%;height:100%;object-fit:contain;background:#fff;
  transition:transform var(--t-slow) var(--ease)}
.pcard:hover .pcard__media img{transform:scale(1.04)}
.pcard--feature .pcard__media{background:#fff}
/* placeholder frames keep the old tinted ground so a missing image is obvious */
.pcard__media--placeholder{background:linear-gradient(160deg,#EDF3F5,#DCE7EC)}
.pcard__slot{position:absolute;bottom:.6rem;right:.7rem;font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;color:#46596B;text-transform:uppercase}
.pcard__body{padding:1.15rem 1.25rem 1.35rem;display:flex;flex-direction:column;flex:1}
.pcard__badges{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.75rem}
.pcard h3,.pcard h4{font-family:var(--ui);font-size:1.055rem;font-weight:650;letter-spacing:-.015em;line-height:1.28;margin:0 0 .5rem;color:var(--ink)}
.pcard__desc{font-size:.885rem;line-height:1.55;color:var(--body);margin:0 0 .9rem;max-width:none}
.pcard__specs{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:.3rem;font-size:.79rem;color:var(--muted)}
.pcard__specs li{display:flex;gap:.5rem;align-items:flex-start;line-height:1.45}
.pcard__specs li::before{content:"";width:5px;height:5px;border-radius:1px;background:var(--teal);flex:0 0 auto;margin-top:.5em;rotate:45deg}
.pcard__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding-top:.9rem;border-top:1px solid var(--border)}
.pcard__price{font-family:var(--mono);font-size:.8rem;color:var(--ink);letter-spacing:.02em;line-height:1.3}
.pcard__price small{display:block;font-size:.6rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-top:.15rem}

/* Featured variant */
.pcard--feature{border-color:var(--teal);background:var(--teal-100)}
.pcard--feature .pcard__media{background:linear-gradient(160deg,#E4F4F1,#CFE9E3)}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:.32rem;padding:.28rem .6rem;border-radius:var(--r-pill);font-family:var(--mono);font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;line-height:1.3;white-space:nowrap}
.badge--cat{background:var(--navy);color:#DCE9F0}
.badge--best{background:var(--teal-btn);color:#fff}
.badge--soft{background:var(--surface-2);color:var(--muted);border:1px solid var(--border)}
.badge--tier{background:var(--white);color:var(--navy-700);border:1px solid var(--border-strong)}

/* Rating placeholder — honest, never invented */
.pcard__price .rating-slot{display:flex;margin-top:.3rem}
.rating-slot{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.rating-slot svg{width:11px;height:11px;color:var(--border-strong)}

/* ---------- 10. COMPARISON TABLE ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-shell);background:var(--surface);padding:.4rem;-webkit-overflow-scrolling:touch}
.tablewrap>table{background:var(--white);border-radius:var(--r-core);overflow:hidden}
table.cmp{width:100%;border-collapse:collapse;font-size:.875rem;min-width:760px}
table.cmp th,table.cmp td{padding:.95rem 1.05rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--border)}
table.cmp thead th{background:var(--navy);color:#DCE9F0;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;border-bottom:none;position:sticky;top:0}
table.cmp tbody tr:last-child td{border-bottom:none}
table.cmp tbody tr:hover{background:var(--surface)}
table.cmp .p-name{font-weight:650;color:var(--ink);font-size:.93rem;display:block;margin-bottom:.3rem}
table.cmp .p-sub{font-size:.76rem;color:var(--muted);display:block}
table.cmp ul{margin:0;padding-left:1.05rem;font-size:.82rem;line-height:1.5}
table.cmp li{margin-bottom:.2rem}
.pro{color:#0B7A6B}
.con{color:#9A5B2B}

/* Spec table (mono, technical) */
table.spec{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:.78rem}
table.spec th,table.spec td{padding:.55rem .75rem;border-bottom:1px solid var(--border);text-align:left}
table.spec th{color:var(--muted);font-weight:400;letter-spacing:.04em;width:44%}
table.spec td{color:var(--ink)}

/* ---------- 11. COMPARE / GUIDE LINK LISTS ---------- */
.linkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s4)}
.linkcard{display:block;background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);padding:1.25rem 1.35rem;text-decoration:none;transition:transform var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease)}
.linkcard:hover{transform:translateY(-3px);box-shadow:var(--e2);border-color:var(--teal-300)}
.linkcard__k{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-700);display:block;margin-bottom:.5rem}
.linkcard__t{font-family:var(--ui);font-weight:650;font-size:1rem;color:var(--ink);line-height:1.35;margin:0 0 .35rem;letter-spacing:-.012em}
.linkcard__d{font-size:.83rem;color:var(--muted);margin:0;line-height:1.5}
.linkcard--vs .linkcard__t{font-family:var(--display);font-size:1.25rem;font-weight:600}

/* ---------- 12. TRUST ---------- */
.trustgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:var(--s2) var(--s6)}
.trustgrid li{display:flex;gap:.75rem;align-items:flex-start;padding:.7rem 0;border-bottom:1px solid var(--border);font-size:.93rem;color:var(--ink);font-weight:500}
.trustgrid svg{width:17px;height:17px;color:var(--teal);flex:0 0 auto;margin-top:.22em}

/* ---------- 13. NEWSLETTER ---------- */
.news{position:relative;background:var(--navy-900);overflow:hidden;isolation:isolate}
.news__art{position:absolute;inset:0;z-index:-1;opacity:.55}
.news .wrap{position:relative}
.news h2{color:#fff}
.news p{color:#B9CBD6}
.news__form{display:flex;gap:.6rem;flex-wrap:wrap;max-width:520px;margin-top:var(--s5)}
.news__form input{flex:1 1 240px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;padding:.95rem 1.25rem;border-radius:var(--r-pill);font-family:var(--ui);font-size:.95rem}
.news__form input::placeholder{color:#84A5B8}
.news__form input:focus{outline:none;border-color:var(--teal);background:rgba(255,255,255,.12)}
.news__note{font-family:var(--mono);font-size:.68rem;color:#7FA3B8;margin-top:var(--s4);letter-spacing:.04em}

/* ---------- 14. FOOTER ---------- */
.foot{background:var(--navy-900);color:#9FB8C7;padding-block:var(--s8) var(--s5);font-size:.875rem}
.foot__grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:var(--s6) var(--s5);padding-bottom:var(--s7);border-bottom:1px solid rgba(255,255,255,.1)}
@media (max-width:860px){.foot__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot__grid{grid-template-columns:1fr}}
.foot h4{color:#fff;font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;margin:0 0 1.1rem;font-weight:500}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.foot a{color:#9FB8C7;text-decoration:none;transition:color var(--t-fast) var(--ease)}
.foot a:hover{color:var(--teal-300)}
.foot__brand .brand__logo{height:42px;width:calc(42px * 3.361)}
.foot__brand p{color:#7FA3B8;font-size:.85rem;max-width:34ch;margin-top:1.35rem}
.foot__bottom{display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between;align-items:center;padding-top:var(--s5);font-size:.78rem;color:#7FA3B8}
.foot__legal{display:flex;gap:1.25rem;flex-wrap:wrap}

/* Affiliate disclosure block */
.disclosure{background:var(--surface);border:1px solid var(--border);border-left:1px solid var(--border);border-radius:var(--r-md);padding:1.1rem 1.35rem;font-size:.83rem;color:var(--muted);line-height:1.6;display:flex;gap:.85rem;align-items:flex-start}
.disclosure svg{width:16px;height:16px;color:var(--teal);flex:0 0 auto;margin-top:.2em}
.disclosure strong{color:var(--ink)}
.disclosure--dark{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:#9FB8C7}
.disclosure--dark strong{color:#fff}

/* ---------- 15. ARTICLE ---------- */
.crumbs{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--muted);padding-block:1.35rem;display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--teal-700)}
.crumbs span{opacity:.45}

.arthead{padding-block:var(--s5) var(--s6);border-bottom:1px solid var(--border)}
.artmeta{display:flex;flex-wrap:wrap;gap:.5rem 1.35rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--muted);margin-top:var(--s5);text-transform:uppercase}
.artmeta strong{color:var(--ink);font-weight:500}

.verdict{background:var(--navy);border-radius:var(--r-shell);padding:.4rem;margin-block:var(--s6)}
.verdict__core{background:var(--navy-800);border-radius:var(--r-core);padding:clamp(1.5rem,3vw,2.25rem);border:1px solid rgba(255,255,255,.09)}
.verdict h2{color:#fff;font-size:1.35rem;margin-bottom:.9rem;font-family:var(--ui);font-weight:650;letter-spacing:-.015em}
.verdict p{color:#D3E2EA;font-size:1.02rem;line-height:1.62;max-width:70ch}
.verdict p strong{color:#fff}
.verdict .btn{margin-top:.6rem}

.toc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-shell);padding:.4rem;margin-block:var(--s6)}
.toc__core{background:var(--white);border-radius:var(--r-core);padding:1.5rem 1.75rem}
.toc h2{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 1rem;font-weight:500}
.toc ol{margin:0;padding:0;list-style:none;counter-reset:toc;columns:2;column-gap:2.5rem}
@media (max-width:640px){.toc ol{columns:1}}
.toc li{counter-increment:toc;break-inside:avoid;margin-bottom:.55rem}
.toc a{display:flex;gap:.7rem;text-decoration:none;color:var(--ink);font-size:.9rem;line-height:1.45;align-items:baseline}
.toc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--mono);font-size:.66rem;color:var(--teal);flex:0 0 auto}
.toc a:hover{color:var(--teal-700)}

.prose{padding-block:var(--s6)}
.prose h2{margin-top:var(--s8);scroll-margin-top:calc(var(--nav-h) + 2rem)}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:var(--s6);scroll-margin-top:calc(var(--nav-h) + 2rem)}
.prose ul,.prose ol{max-width:var(--measure);padding-left:1.35rem;margin-bottom:var(--s4)}
.prose li{margin-bottom:.5rem}
.prose>figure{margin:var(--s6) 0}
/* Comparison tables break out of the reading measure so columns can breathe */
.prose .tablewrap{margin-block:var(--s5)}
.prose .tablewrap:has(table.cmp){margin-inline:calc(-1 * clamp(0px, (100vw - 900px)/2 - 1.25rem, 190px))}
.prose .tablewrap table.cmp{min-width:820px}
.prose .tablewrap table.cmp td,.prose .tablewrap table.cmp th{padding:1.05rem 1.15rem}
.prose .tablewrap .btn{white-space:nowrap}
.prose .tablewrap table.spec{min-width:0}
.prose table.spec th{width:32%}

.prose figcaption{font-family:var(--mono);font-size:.7rem;color:var(--muted);letter-spacing:.05em;margin-top:.75rem;line-height:1.5}

.callout{background:var(--teal-100);border:1px solid #7CBFB2;border-radius:var(--r-md);padding:1.35rem 1.5rem;margin-block:var(--s5)}
.callout h4,.callout .callout__t{color:var(--navy);margin:0 0 .6rem;font-size:1rem;
  font-family:var(--ui);font-weight:600;line-height:1.35}
.callout p:last-child,.callout ul:last-child{margin-bottom:0}
.callout--warn{background:#FDF4EC;border-color:#E8C9A8}

.checklist{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.checklist li{display:flex;gap:.7rem;align-items:flex-start;font-size:.93rem}
.checklist li::before{content:"";width:16px;height:16px;border:1.5px solid var(--teal);border-radius:4px;flex:0 0 auto;margin-top:.22em}

.faq details{border-bottom:1px solid var(--border);padding:.35rem 0}
.faq summary{cursor:pointer;list-style:none;padding:1rem 2.5rem 1rem 0;position:relative;font-family:var(--ui);font-weight:650;font-size:1.02rem;color:var(--ink);line-height:1.4;letter-spacing:-.012em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.4rem;top:1.35rem;width:9px;height:9px;border-right:1.6px solid var(--teal);border-bottom:1.6px solid var(--teal);transform:rotate(45deg);transition:transform var(--t-mid) var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{padding-bottom:1rem;margin:0;font-size:.95rem;color:var(--body)}
.faq details p+p{padding-top:0}

.author{display:flex;gap:1.35rem;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-shell);padding:1.6rem 1.75rem;margin-block:var(--s6)}
/* A real portrait replaces the placeholder glyph, so the avatar grows to a size a face
   actually reads at and the image fills the circle without distortion. */
.author__av{width:72px;height:72px;border-radius:var(--r-pill);background:var(--navy);
  flex:0 0 auto;object-fit:cover;object-position:50% 22%;display:block;
  border:2px solid var(--white);box-shadow:0 2px 10px rgba(6,43,69,.18)}
@media (max-width:520px){.author__av{width:60px;height:60px}}
.author h4,.author .author__name{margin:0 0 .1rem;font-family:var(--display);
  font-size:1.15rem;font-weight:600;color:var(--ink);line-height:1.25;max-width:none}
/* The role line sits tight under the name and reads as a credit, not body copy. */
.author__role{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--teal-700);margin:0 0 .55rem}
.dark-section .author__role{color:var(--teal-300)}
.author p{font-size:.865rem;color:var(--muted);margin:0;max-width:62ch}

.related{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--s4)}

/* Funnel / next-step rail */
.funnel{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.funnel li{position:relative;padding-left:1.75rem}
.funnel li::before{content:"";position:absolute;left:.32rem;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--teal)}
.funnel li::after{content:"";position:absolute;left:.62rem;top:1.5em;bottom:-.5rem;width:1px;background:var(--border-strong)}
.funnel li:last-child::after{display:none}
.funnel a{font-weight:600;color:var(--ink);text-decoration:none}
.funnel a:hover{color:var(--teal-700)}
.funnel span{display:block;font-size:.8rem;color:var(--muted)}

/* Pinterest-ready pin block */
.pinblock{background:var(--surface);border:1px dashed var(--border-strong);border-radius:var(--r-md);padding:1.25rem 1.4rem;margin-block:var(--s5)}
.pinblock h4,.pinblock .pinblock__t{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:.85rem;font-weight:500}
.pinblock ol{margin:0;padding-left:1.2rem;font-size:.88rem;color:var(--body)}

/* ---------- 16. SCROLL REVEAL ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity 760ms var(--ease-out),transform 760ms var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- 17. UTILITIES ---------- */
.mono-label{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.stack>*+*{margin-top:var(--s4)}
.mt6{margin-top:var(--s6)}.mt7{margin-top:var(--s7)}.mb0{margin-bottom:0}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.dark-section{background:var(--navy);color:#C6D9E3}
.dark-section h2,.dark-section h3{color:#fff}
.dark-section p{color:#B9CBD6}
.dark-section .trustgrid li{color:#DCE9F0;border-bottom-color:rgba(255,255,255,.14)}
.dark-section .trustgrid svg{color:var(--teal-300)}
.dark-section a{color:var(--teal-300)}


/* ---------- 18. PHOTOGRAPHY LAYERS ---------- */
/* Real photographs replacing the hand-built SVG art. Each sits behind a scrim
   the site already draws, so the rule here is only about fill and position. */
.hero__bg,.cat__art,.news__art,.cathero__art{display:block}
.hero__bg img,.cat__art img,.news__art img,.cathero__art img{
  width:100%;height:100%;object-fit:cover;display:block}
.hero__bg{position:absolute;inset:0;z-index:-2}
.cathero__art{position:absolute;inset:0;z-index:-2}
/* The category card photo sits under a gradient the card already paints. */
.cat__art{position:absolute;inset:0;z-index:-2;overflow:hidden}
.cat__art img{transition:transform 900ms var(--ease)}
.cat:hover .cat__art img{transform:scale(1.045)}
/* A 3:2 photograph in a panoramic card crops hard. Anchoring the crop above
   centre keeps the horizon and the subject in frame instead of empty water. */
.cat--full .cat__art img{object-position:50% 34%}
.cat--wide .cat__art img,.cat--tall .cat__art img{object-position:50% 42%}
.news__art{position:absolute;inset:0;z-index:-1;opacity:1}
.news__art img{opacity:.55}

/* Photography is busier than flat SVG, so the scrims work harder than before. */
.hero__scrim{background:
  linear-gradient(180deg,rgba(4,29,47,.78) 0%,rgba(4,29,47,.42) 32%,rgba(4,29,47,.88) 74%,rgba(4,29,47,.97) 100%),
  linear-gradient(90deg,rgba(4,29,47,.72) 0%,rgba(4,29,47,.30) 52%,rgba(4,29,47,.10) 100%),
  radial-gradient(120% 80% at 78% 18%,rgba(15,157,138,.18) 0%,transparent 62%)}
.cat::after{background:linear-gradient(175deg,rgba(4,29,47,.28) 0%,rgba(4,29,47,.62) 42%,rgba(4,29,47,.94) 100%)}

/* ---------- 19. ARTICLE FEATURED IMAGE ---------- */
.artfeature{margin:0 0 var(--s6);border-radius:var(--r-shell);overflow:hidden;
  border:1px solid var(--border);background:var(--surface);line-height:0}
.artfeature img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.artfeature figcaption{line-height:1.5;padding:.85rem 1.15rem;font-family:var(--mono);
  font-size:.7rem;letter-spacing:.05em;color:var(--muted);background:var(--white);
  border-top:1px solid var(--border)}


/* ---------- 19b. INSTRUCTIONAL DIAGRAMS ---------- */
/* Diagrams are drawings on a near-white ground, so unlike photography they must not be
   cropped: the container takes the image's own 4:3 ratio and the art is contained, never
   covered. The white inner ground keeps the drawing's paper reading as paper in dark UI. */
.diagram{margin:var(--s6) 0;border:1px solid var(--border);border-radius:var(--r-shell);
  overflow:hidden;background:#fff;line-height:0}
.diagram img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;background:#fff}
.diagram figcaption{line-height:1.5;padding:.85rem 1.15rem;font-family:var(--mono);
  font-size:.7rem;letter-spacing:.05em;color:var(--muted);background:var(--white);
  border-top:1px solid var(--border)}
/* On a dark section the frame follows the section, the drawing keeps its own paper. */
.dark-section .diagram{border-color:rgba(255,255,255,.16)}
.dark-section .diagram figcaption{background:#0B354F;color:#B9CEDA;
  border-top-color:rgba(255,255,255,.16)}
@media (max-width:640px){.diagram{margin:var(--s5) calc(-1 * var(--s4));border-radius:0;
  border-left:none;border-right:none}}

/* ---------- 19c. BUYER-GUIDE FURNITURE ---------- */
/* A breadcrumb whose middle step names two categories: both stay reachable,
   and the joining word is set apart from the "/" separators so it does not
   read as a fourth crumb. */
.crumbs__and{margin-inline:.45rem;color:var(--muted);font-size:.82em;
  text-transform:lowercase;letter-spacing:.02em}

/* The line that states whether a product ships with a motor. It answers the
   first question a reader has, so it sits above the spec table, not inside it. */
.classline{background:var(--surface);border-left:3px solid var(--teal-btn);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:.7rem 1rem;margin-block:1rem;
  font-size:.92rem;color:var(--body)}
.classline strong{color:var(--ink)}

/* Suitability grades. Colour carries a second signal, never the only one:
   the word itself is always present, so the table reads without colour. */
.rating{display:inline-block;font-family:var(--mono);font-size:.66rem;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;padding:.2rem .5rem;border-radius:var(--r-pill);
  white-space:nowrap;border:1px solid transparent}
.rating--excellent{background:#DCEFE9;color:#0A5C4F;border-color:#B6DCD2}
.rating--very-good{background:#E6F2EE;color:#0B6656;border-color:#C6E2DA}
.rating--good{background:var(--surface-2);color:#46596B;border-color:var(--border)}
.rating--limited{background:#FBF1DC;color:#7A5310;border-color:#EEDCB4}
.rating--not-ideal{background:#F7E6E4;color:#8C2F2A;border-color:#EBCAC6}
.dark-section .rating--good{background:rgba(255,255,255,.08);color:#DCE9F0;
  border-color:rgba(255,255,255,.18)}

/* ---------- 19d. KAYAK PRODUCT AND SECTION IMAGERY ---------- */
/* Product shots are square on a white ground. They are contained rather than
   cropped, and capped in width so a square frame does not push a 640px-tall
   block of mostly-white into the middle of the prose. */
.kshot{margin:1.5rem auto;max-width:520px;background:#fff;border:1px solid var(--border);
  border-radius:var(--r-shell);overflow:hidden;line-height:0;box-shadow:var(--e1)}
.kshot img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:#fff}

/* The same photograph at row scale, so the comparison table is scannable by
   shape and colour before the reader parses a single word. */
.kthumb{width:64px;height:64px;object-fit:contain;background:#fff;border:1px solid var(--border);
  border-radius:var(--r-sm);display:block;margin-bottom:.45rem;flex:0 0 auto}
/* The thumbnail narrows the model cell, which was breaking names across four
   lines. Give that column room so a model name reads as one or two lines. */
.cmp td:first-child{min-width:13.5rem}
.cmp td.num,.cmp th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.cmp td:first-child .p-name{display:block}

/* Scene-setting photography under a section heading. The 4:3 original is
   cropped to 3:2 here: wide enough to read as a banner, short enough that the
   text it introduces stays on screen with it. */
.secshot{margin:var(--s5) 0 var(--s6);border:1px solid var(--border);
  border-radius:var(--r-shell);overflow:hidden;background:var(--surface);line-height:0}
.secshot img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  object-position:50% 55%}
.secshot figcaption{line-height:1.5;padding:.85rem 1.15rem;font-family:var(--mono);
  font-size:.7rem;letter-spacing:.05em;color:var(--muted);background:var(--white);
  border-top:1px solid var(--border)}
@media (max-width:640px){
  .secshot{margin-inline:calc(-1 * var(--s4));border-radius:0;border-left:none;border-right:none}
  .secshot img{aspect-ratio:4/3}
  .kshot{max-width:100%}
}

/* A hub band that leads with the guide's own lineup photograph. */
.guideband{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.5rem,3vw,2.75rem);align-items:center;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-shell);overflow:hidden}
.guideband__media{line-height:0;height:100%}
.guideband__media img{width:100%;height:100%;object-fit:cover;display:block;min-height:240px}
.guideband__body{padding:clamp(1.5rem,3vw,2.5rem) clamp(1.5rem,3vw,2.5rem) clamp(1.5rem,3vw,2.5rem) 0}
.guideband__body h3{margin:.4rem 0 .6rem;font-size:clamp(1.25rem,2vw,1.6rem)}
.guideband__body p{color:var(--body);font-size:.95rem;margin:0 0 1.2rem;max-width:46ch}
@media (max-width:820px){
  .guideband{grid-template-columns:1fr}
  .guideband__body{padding:0 clamp(1.2rem,4vw,1.75rem) clamp(1.5rem,4vw,2rem)}
}

/* ---------- 20. PINTEREST ---------- */
/* Purpose-built 2:3 creatives, present for Pinterest's save button but never
   rendered. display:none keeps them out of layout and the accessibility tree;
   lazy loading keeps them off the network until something asks for them. */
.pin-hidden-set{display:none}
.pin-hidden{display:none}

/* ---------- 19e. SVG CHARTS ---------- */
/* Charts are vector, so the frame lets them keep their own aspect ratio rather
   than forcing one. The white ground is part of the drawing, not the container. */
.chartfig{margin:var(--s6) 0;border:1px solid var(--border);border-radius:var(--r-shell);
  overflow:hidden;background:#fff;line-height:0}
.chartfig__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;background:#fff}
.chartfig img{display:block;width:100%;height:auto;background:#fff}
/* Under about 760px the labels drawn inside the chart fall below 9px, so the drawing
   holds a legible minimum width and the figure scrolls instead of shrinking further. */
@media (max-width:760px){.chartfig img{width:700px;max-width:none}}
.chartfig figcaption{line-height:1.5;padding:.85rem 1.15rem;font-family:var(--mono);
  font-size:.7rem;letter-spacing:.05em;color:var(--muted);background:var(--white);
  border-top:1px solid var(--border)}
.dark-section .chartfig{border-color:rgba(255,255,255,.16)}
.dark-section .chartfig figcaption{background:#0B354F;color:#B9CEDA;
  border-top-color:rgba(255,255,255,.16)}
@media (max-width:640px){.chartfig{margin:var(--s5) calc(-1 * var(--s4));border-radius:0;
  border-left:none;border-right:none}}

/* ---------- 19f. REVIEWED-PRODUCT PHOTOGRAPHY ---------- */
/* One studio shot opens each pick. It keeps the white ground it was shot on and is
   contained, never cropped, so the full hull profile stays readable. Same width as
   the section photography, so the page holds one image rhythm. */
.pshot{margin:1.35rem 0 1.6rem;border:1px solid var(--border);border-radius:var(--r-shell);
  overflow:hidden;background:#fff;line-height:0}
.pshot img{display:block;width:100%;height:auto;object-fit:contain;background:#fff}
/* No forced ratio here: each frame already carries the proportions of the hull in
   it, and the width/height attributes reserve the right box before it loads. */
@media (max-width:640px){
  .pshot{margin-inline:calc(-1 * var(--s4));border-radius:0;border-left:none;border-right:none}
}


/* ---------- 21. FOOTER GUIDE LIBRARY ----------
   The guide list outgrew a single footer column, so it moves to a full-width
   band below the main footer row and groups by the sub-category the content
   strategy assigns. Adding guides adds rows, never a horizontal squeeze. */
.foot__grid{grid-template-columns:1.6fr 1fr 1fr}
@media (max-width:860px){.foot__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot__grid{grid-template-columns:1fr}}
.foot__guides{padding-top:var(--s6);margin-top:var(--s6);border-top:1px solid rgba(255,255,255,.1)}
.foot__guides-head{display:flex;align-items:center;justify-content:space-between;gap:.85rem 1rem;flex-wrap:wrap;margin-bottom:1.5rem}
.foot__guides-head h4{margin:0}
.foot__guides-head span{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:#7FA3B8;margin-right:auto}
.foot__dir-toggle{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:#DCE9F0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);border-radius:var(--r-pill);padding:.5rem 1rem;cursor:pointer;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.foot__dir-toggle:hover{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.4)}
.foot__dir-toggle:focus-visible{outline:2.5px solid var(--teal-300);outline-offset:2px}
.foot__dir{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.75rem 1.25rem;align-items:start}
.foot__cat{grid-column:span 1;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-md);padding:0 1.1rem;transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.foot__cat[open]{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16)}
.foot__cat--wide{grid-column:span 2}
.foot__cat summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.6rem;padding:1rem .1rem;position:relative;min-height:24px}
.foot__cat summary::-webkit-details-marker{display:none}
.foot__cat summary span:first-child{color:#fff;font-family:var(--ui);font-weight:600;font-size:.86rem;letter-spacing:-.005em;flex:1 1 auto}
.foot__cat__count{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;color:#7FA3B8;background:rgba(255,255,255,.07);border-radius:var(--r-pill);padding:.18rem .55rem;flex:0 0 auto}
.foot__cat summary::after{content:"";width:8px;height:8px;border-right:1.6px solid var(--teal-300);border-bottom:1.6px solid var(--teal-300);transform:rotate(45deg);transition:transform var(--t-fast) var(--ease);margin-left:.15rem;flex:0 0 auto}
.foot__cat[open] summary::after{transform:rotate(-135deg)}
.foot__cat__links{list-style:none;margin:0;padding:.1rem 0 1.1rem;display:grid;gap:.6rem}
.foot__cat__links[data-dense]{columns:2;column-gap:1.25rem}
.foot__cat__links li{break-inside:avoid}
.foot__cat__links a{font-size:.83rem;line-height:1.42;display:block;padding:.2rem 0}
@media (max-width:640px){
  .foot__dir{grid-template-columns:1fr;gap:.65rem}
  .foot__cat--wide{grid-column:span 1}
  .foot__cat__links[data-dense]{columns:1}
  .foot__cat summary{padding:1.05rem .1rem;min-height:44px}
  .foot__cat__links a{padding:.35rem 0}
  .foot__dir-toggle{padding:.65rem 1.15rem;width:100%;text-align:center}
  .foot__guides-head span{margin-right:0;width:100%}
}

.rt-page[hidden]{display:none}

/* Inline SVG charts follow the same mobile rule as chart images: hold a legible
   minimum width and let .chartfig__scroll scroll, rather than shrinking labels. */
@media (max-width:760px){.chartfig svg{width:700px !important;max-width:none !important}}