/*
Theme Name: Verenlow
Theme URI: https://verenlow.com/
Author: Verenlow
Author URI: https://verenlow.com/about/
Description: Smart Home Made Simple. A fast, editorial theme for the Verenlow.com smart home publication. Ships its own design system, navigation, search and newsletter blocks, and installs all site pages on activation.
Version: 1.0.6
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: verenlow
Tags: blog, custom-menu, editor-style, featured-images, translation-ready, block-styles, wide-blocks
*/

/* ==========================================================================
   Verenlow — Smart Home Made Simple
   Design system: Modern / Clean / Premium / Trustworthy
   Mobile-first. No external requests. Light theme.
   ========================================================================== */

/* ---------- Tokens ----------
   Palette is drawn from the Verenlow brand mark: a deep navy ink and a teal
   accent taken from the same hue family as the cyan in the logo. Surfaces stay
   neutral so the brand colour stays an accent, never the dominant note. */
:root{
  --ink:#0A1C3E;
  --ink-soft:#16263F;
  --body:#404A57;
  --muted:#6B7480;
  --muted-2:#8A93A0;
  --line:#E5E8ED;
  --line-strong:#D2D8E0;
  --surface:#F7F8FA;
  --surface-2:#F1F3F6;
  --white:#FFFFFF;

  --accent:#0B6E77;
  --accent-ink:#0A5C64;
  --accent-soft:#E7F5F7;
  --accent-line:#BFE5EA;

  --brand-cyan:#10D0D0;

  --warm:#C77A2E;
  --warm-soft:#FDF5EC;

  --ok:#137A54;
  --ok-soft:#ECF7F1;

  --radius-xs:8px;
  --radius-sm:10px;
  --radius:14px;
  --radius-lg:20px;
  --radius-xl:26px;
  --radius-pill:999px;

  --shadow-xs:0 1px 2px rgba(10,12,16,.05);
  --shadow-sm:0 1px 2px rgba(10,12,16,.04), 0 2px 6px -2px rgba(10,12,16,.06);
  --shadow-md:0 12px 28px -18px rgba(10,12,16,.28), 0 2px 6px -2px rgba(10,12,16,.06);
  --shadow-lg:0 32px 60px -32px rgba(10,12,16,.32);

  --maxw:1180px;
  --maxw-narrow:820px;
  --gutter:20px;

  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  --ease:cubic-bezier(.2,.6,.2,1);
  --header-h:64px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.65;
  color:var(--body);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;height:auto;display:block}
button,input{font:inherit;color:inherit}
a{color:var(--accent-ink);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4,h5{color:var(--ink);margin:0 0 .5em;line-height:1.18;letter-spacing:-.018em;font-weight:700}
h1{font-size:clamp(1.85rem,5.2vw,2.6rem)}
h2{font-size:clamp(1.4rem,3.6vw,1.95rem)}
h3{font-size:clamp(1.08rem,2.2vw,1.22rem)}
h4{font-size:1rem}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em;padding-left:1.25em}
li{margin-bottom:.45em}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent-soft);color:var(--ink)}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 var(--radius-sm) 0;
}
.skip-link:focus{left:0;text-decoration:none}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.wrap-narrow{max-width:var(--maxw-narrow)}
.section{padding:56px 0}
.section--tight{padding:40px 0}
.section--surface{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section--ink{background:var(--ink);color:#B9C0CB}
.section--ink h2,.section--ink h3{color:#fff}
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:760px){
  .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .section{padding:76px 0}
  .section--tight{padding:52px 0}
}
@media(min-width:1000px){
  :root{--gutter:32px;--header-h:72px}
  .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .section{padding:96px 0}
  .section--tight{padding:64px 0}
}

/* ---------- Section headers ---------- */
.eyebrow{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.85rem;
}
.section--ink .eyebrow{color:#7FA8FF}
.sec-head{max-width:720px;margin-bottom:34px}
.sec-head p{font-size:1.02rem;color:var(--muted);margin-bottom:0}
.sec-head--row{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between;max-width:none}
.sec-head--row .sec-head__text{max-width:640px}
.sec-head--row p{font-size:1.02rem;color:var(--muted)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border-radius:var(--radius-pill);
  font-size:.94rem;font-weight:600;line-height:1;
  border:1px solid transparent;cursor:pointer;
  transition:transform .16s var(--ease),background .16s var(--ease),border-color .16s var(--ease),box-shadow .16s var(--ease);
  text-decoration:none;white-space:nowrap;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--accent);color:#fff;box-shadow:0 8px 18px -10px rgba(11,95,255,.7)}
.btn--primary:hover{background:var(--accent-ink)}
.btn--ghost{background:var(--white);color:var(--ink);border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--ink);background:var(--white)}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:var(--ink-soft)}
.btn--sm{padding:10px 16px;font-size:.86rem}
.btn--block{width:100%}
.link-arrow{font-weight:600;font-size:.94rem;display:inline-flex;align-items:center;gap:6px}
.link-arrow svg{transition:transform .16s var(--ease)}
.link-arrow:hover svg{transform:translateX(3px)}

/* ---------- Header ---------- */
.header{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.header.is-stuck{border-bottom-color:var(--line);box-shadow:0 1px 0 rgba(10,12,16,.02)}
.header__inner{display:flex;align-items:center;gap:14px;height:var(--header-h)}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;color:var(--ink);font-size:1.16rem;letter-spacing:-.03em;text-decoration:none}
.logo:hover{text-decoration:none}
.logo__mark{width:30px;height:30px;flex:none;object-fit:contain}
.logo__sub{display:none}

.nav{display:none}
@media(min-width:1080px){
  .nav{display:flex;align-items:center;gap:2px;margin-left:14px}
}
.nav__item{position:relative}
.nav__link{
  display:inline-flex;align-items:center;gap:5px;
  padding:9px 12px;border-radius:var(--radius-pill);
  font-size:.9rem;font-weight:500;color:var(--ink-soft);
  background:none;border:0;cursor:pointer;text-decoration:none;
  transition:background .16s var(--ease),color .16s var(--ease);
}
.nav__link:hover{background:var(--surface);text-decoration:none}
.nav__link[aria-expanded="true"]{background:var(--surface);color:var(--ink)}
.nav__link svg{opacity:.5;transition:transform .2s var(--ease)}
.nav__link[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav__panel{
  position:absolute;top:calc(100% + 10px);left:-8px;min-width:290px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:10px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s var(--ease),transform .16s var(--ease),visibility .16s;
}
/* The panel opens 10px below its trigger, which leaves a dead strip the pointer
   has to cross on the way down. Crossing it fires mouseleave and the menu shuts
   before it can be clicked. This invisible bridge spans exactly that gap so the
   pointer is always over the item. It inherits the panel's visibility, so it
   stays inert while the panel is closed and cannot open it by itself. */
.nav__panel::before{
  content:"";position:absolute;left:0;right:0;top:-10px;height:10px;
}
.nav__item.is-open .nav__panel{opacity:1;visibility:visible;transform:translateY(0)}
.nav__panel a{
  display:block;padding:9px 12px;border-radius:var(--radius-xs);
  font-size:.9rem;color:var(--ink-soft);font-weight:500;text-decoration:none;
}
.nav__panel a:hover{background:var(--surface);text-decoration:none}
.nav__panel a span{display:block;font-size:.79rem;font-weight:400;color:var(--muted);line-height:1.4;margin-top:2px}
.nav__panel-label{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700;
  color:var(--muted-2);padding:10px 12px 4px;
}
.nav__panel-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 6px;min-width:520px}

.header__actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:var(--radius-pill);
  background:none;border:1px solid transparent;cursor:pointer;color:var(--ink-soft);
  transition:background .16s var(--ease),border-color .16s var(--ease);
}
.icon-btn:hover{background:var(--surface);border-color:var(--line)}
.header__cta{display:none}
@media(min-width:620px){.header__cta{display:inline-flex}}
.menu-btn{display:inline-flex}
@media(min-width:1080px){.menu-btn{display:none}}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:120;visibility:hidden;pointer-events:none;
}
.drawer.is-open{visibility:visible;pointer-events:auto}
.drawer__scrim{position:absolute;inset:0;background:rgba(10,12,16,.42);opacity:0;transition:opacity .22s var(--ease)}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer__panel{
  position:absolute;top:0;right:0;bottom:0;width:min(400px,92vw);background:#fff;
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .26s var(--ease);
}
.drawer.is-open .drawer__panel{transform:translateX(0)}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);height:var(--header-h)}
.drawer__body{overflow-y:auto;padding:10px 10px 40px;flex:1}
.drawer__group{border-bottom:1px solid var(--line)}
.drawer__toggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:15px 12px;background:none;border:0;cursor:pointer;
  font-size:.98rem;font-weight:600;color:var(--ink);text-align:left;
}
.drawer__toggle svg{transition:transform .2s var(--ease);opacity:.5;flex:none}
.drawer__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.drawer__sub{display:none;padding:0 12px 12px}
.drawer__toggle[aria-expanded="true"] + .drawer__sub{display:block}
.drawer__sub a{display:block;padding:9px 10px;font-size:.92rem;color:var(--body);border-radius:var(--radius-xs);text-decoration:none}
.drawer__sub a:hover{background:var(--surface);text-decoration:none}
.drawer__flat a{
  display:block;padding:15px 12px;font-size:.98rem;font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--line);text-decoration:none;
}
.drawer__cta{padding:18px 12px 6px;display:grid;gap:10px}

/* Search overlay */
.search{
  position:fixed;inset:0;z-index:130;display:none;
}
.search.is-open{display:block}
.search__scrim{position:absolute;inset:0;background:rgba(10,12,16,.45)}
.search__box{
  position:relative;max-width:660px;margin:8vh auto 0;background:#fff;
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;
  width:calc(100% - 32px);
}
.search__field{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.search__field input{flex:1;border:0;background:none;outline:none;font-size:1.05rem;color:var(--ink)}
.search__field input::placeholder{color:var(--muted-2)}
.search__kbd{
  font-size:.7rem;color:var(--muted);border:1px solid var(--line-strong);
  border-radius:6px;padding:3px 7px;background:var(--surface);font-family:var(--mono);
}
.search__results{max-height:min(58vh,520px);overflow-y:auto;padding:8px}
.search__hint{padding:22px 16px;color:var(--muted);font-size:.92rem}
.search__result{display:block;padding:11px 14px;border-radius:var(--radius-sm);text-decoration:none}
.search__result:hover,.search__result:focus{background:var(--surface);text-decoration:none}
.search__result b{display:block;color:var(--ink);font-size:.95rem;font-weight:600}
.search__result span{font-size:.82rem;color:var(--muted)}
.search__tag{
  font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;
  color:var(--accent);background:var(--accent-soft);border-radius:var(--radius-pill);
  padding:2px 8px;margin-left:8px;vertical-align:1px;
}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  padding:44px 0 52px;
  background:linear-gradient(180deg,#FFFFFF 0%,#FBFCFD 100%);
  border-bottom:1px solid var(--line);
}
.hero__grid{display:grid;gap:36px;align-items:center}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.76rem;font-weight:600;letter-spacing:.02em;color:var(--ink-soft);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:6px 14px 6px 10px;margin-bottom:20px;box-shadow:var(--shadow-xs);
}
.hero__eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--accent);display:block}
.hero h1{font-size:clamp(2.05rem,7.2vw,3.5rem);letter-spacing:-.032em;margin-bottom:.45em;max-width:14ch}
.hero__dek{font-size:clamp(1.02rem,2.4vw,1.16rem);color:var(--muted);max-width:46ch;margin-bottom:28px}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.hero__trust{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.83rem;color:var(--muted);padding-top:20px;border-top:1px solid var(--line)}
.hero__trust span{display:inline-flex;align-items:center;gap:7px}
.hero__trust svg{color:var(--accent);flex:none}
.hero__art{margin:0}
/* The hero photograph. aspect-ratio keeps the layout stable before the image
   loads, and object-fit means a differently shaped source is cropped rather than
   squashed. */
.hero__art picture{display:block}
.hero__art img{
  display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--radius);background:var(--surface-2);
}
@media(min-width:1000px){
  .hero{padding:70px 0 84px}
  .hero__grid{grid-template-columns:1.02fr .98fr;gap:56px}
}

/* ---------- Cards ---------- */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;display:flex;flex-direction:column;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease);
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.card h3{margin-bottom:.4em;font-size:1.04rem;letter-spacing:-.015em}
.card p{font-size:.9rem;color:var(--muted);margin-bottom:0;line-height:1.6}
.card__icon{
  width:44px;height:44px;border-radius:12px;background:var(--surface);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;color:var(--ink);flex:none;
}
.card__icon svg{width:22px;height:22px}
.card--link{text-decoration:none;color:inherit}
.card--link:hover{text-decoration:none}
.card__foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}
.card__meta{
  display:block;margin-bottom:8px;
  font-size:.76rem;color:var(--muted-2);text-transform:uppercase;letter-spacing:.08em;font-weight:600;
}

/* Category tiles */
.cat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(min-width:760px){.cat-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
@media(min-width:1000px){.cat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.cat{
  display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;text-decoration:none;color:inherit;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease);
}
.cat:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--accent-line);text-decoration:none}
.cat__icon{
  width:42px;height:42px;border-radius:11px;background:var(--accent-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;color:var(--accent-ink);
}
.cat__icon svg{width:21px;height:21px}
.cat b{display:block;font-size:.98rem;color:var(--ink);letter-spacing:-.01em;margin-bottom:5px}
.cat span{display:block;font-size:.83rem;color:var(--muted);line-height:1.5}
/* Category tiles lead with a photograph of the kind of room the category lives in.
   The fixed aspect ratio keeps the grid even when the sources are not all the same
   shape, and object-fit stops any of them stretching. */
.cat__photo{display:block;margin:-6px 0 16px}
.cat__photo img{
  display:block;width:100%;aspect-ratio:4/3;height:auto;
  object-fit:cover;border-radius:calc(var(--radius) - 4px);background:var(--surface-2);
}

/* Product cards */
.prod{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease);
}
.prod:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.prod__media{
  background:var(--surface);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;padding:22px;
}
.prod__media picture{display:block}
.prod__media img{width:100%;max-width:230px;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:calc(var(--radius) - 6px);background:var(--surface-2)}
.prod__body{padding:18px;display:flex;flex-direction:column;flex:1}
.prod__cat{font-size:.7rem;text-transform:uppercase;letter-spacing:.11em;font-weight:700;color:var(--accent);margin-bottom:7px}
.prod__name{font-size:1.02rem;color:var(--ink);font-weight:700;letter-spacing:-.015em;margin-bottom:4px;line-height:1.3}
.prod__brand{font-size:.82rem;color:var(--muted);margin-bottom:14px}
.prod__list{list-style:none;padding:0;margin:0 0 14px;font-size:.86rem;color:var(--body)}
.prod__list li{position:relative;padding-left:18px;margin-bottom:6px;line-height:1.5}
.prod__list li::before{
  content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:2px;
  background:var(--accent-soft);border:1px solid var(--accent-line);
}
.prod__spec{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.prod__spec dt{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--muted-2);margin-bottom:6px}
.prod__spec dd{margin:0 0 12px;font-size:.83rem;color:var(--body);line-height:1.5}
.chips{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0}
.chips li{
  font-size:.75rem;font-weight:600;color:var(--ink-soft);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-pill);padding:4px 10px;margin:0;
}

/* Compact product card used inside guides and reviews */
.pick{
  display:grid;gap:18px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:20px;
}
@media(min-width:620px){
  .pick{grid-template-columns:150px minmax(0,1fr);gap:24px;align-items:start}
}
.pick__media{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px;display:flex;align-items:center;justify-content:center;
}
.pick__media picture{display:block}
.pick__media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:calc(var(--radius) - 6px);background:var(--surface-2)}
.pick h3{font-size:1.05rem;margin-bottom:.5em}
.pick__cat{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.11em;font-weight:700;
  color:var(--accent);margin-bottom:6px;
}
.prod__spec-label{
  font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;
  color:var(--muted-2);margin-bottom:8px;
}
.hero__art svg{width:100%;height:auto;display:block}
.feature__art svg{width:100%;height:auto;display:block}
.prose .rows{margin-top:20px}
.prose .pick{margin-bottom:16px}

/* Badge / pill */
.pill{
  display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:600;
  border-radius:var(--radius-pill);padding:4px 11px;
  background:var(--surface);border:1px solid var(--line);color:var(--ink-soft);
}
.pill--accent{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-ink)}
.pill--ok{background:var(--ok-soft);border-color:#CBE8DB;color:var(--ok)}

/* List rows (buying guides / how-to / reviews) */
.rows{display:grid;gap:14px}
.row{
  display:grid;gap:16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;text-decoration:none;color:inherit;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease);
}
@media(min-width:760px){.row{grid-template-columns:1fr auto;align-items:center;gap:26px}}
.row:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--line-strong);text-decoration:none}
.row__num{
  font-family:var(--mono);font-size:.74rem;font-weight:700;color:var(--muted-2);
  letter-spacing:.06em;display:block;margin-bottom:7px;
}
.row h3{font-size:1.06rem;margin-bottom:.35em}
.row p{font-size:.89rem;color:var(--muted);margin:0;max-width:62ch}
.row__cta{white-space:nowrap}

/* Comparison blocks */
.compare{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease);
}
.compare:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.compare__top{padding:20px;border-bottom:1px solid var(--line);background:var(--surface)}
.compare__vs{display:flex;align-items:center;gap:12px}
.compare__side{flex:1;min-width:0}
.compare__side b{display:block;font-size:1rem;color:var(--ink);letter-spacing:-.015em}
.compare__side span{font-size:.8rem;color:var(--muted)}
.compare__vs i{
  font-size:.72rem;font-weight:800;font-style:normal;color:var(--muted-2);
  border:1px solid var(--line-strong);border-radius:var(--radius-pill);
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;flex:none;background:#fff;
}
.compare__body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.compare__body p{font-size:.89rem;color:var(--muted);margin-bottom:16px}
.compare__body .link-arrow{margin-top:auto}

/* Compatibility grid */
.compat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(min-width:700px){.compat{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1000px){.compat{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
.compat__item{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;
  display:flex;gap:14px;align-items:flex-start;text-decoration:none;color:inherit;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease);
}
.compat__item:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--accent-line);text-decoration:none}
.compat__mark{
  width:40px;height:40px;border-radius:11px;background:var(--surface);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.compat__mark svg{width:20px;height:20px}
.compat__item b{display:block;font-size:.96rem;color:var(--ink);margin-bottom:3px}
.compat__item span{font-size:.83rem;color:var(--muted);line-height:1.5}
.compat__item .pill{margin-top:9px}

/* Protocol feature band */
.feature{display:grid;gap:32px;align-items:center}
@media(min-width:960px){.feature{grid-template-columns:1fr 1fr;gap:56px}}
.feature--flip .feature__art{order:-1}
@media(min-width:960px){.feature--flip .feature__art{order:-1}}
.feature ul{list-style:none;padding:0;margin:22px 0 26px}
.feature li{position:relative;padding-left:30px;margin-bottom:12px;font-size:.94rem}
.feature li svg{position:absolute;left:0;top:.3em;color:var(--accent)}
.feature__art{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px}
.section--ink .feature__art{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}

/* Topic cloud */
.topics{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.topics li{margin:0}
.topics a{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:9px 16px;font-size:.88rem;font-weight:500;color:var(--ink-soft);text-decoration:none;
  transition:border-color .16s var(--ease),background .16s var(--ease),transform .16s var(--ease);
}
.topics a:hover{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent-ink);text-decoration:none;transform:translateY(-1px)}
.topics a em{font-style:normal;font-size:.74rem;color:var(--muted-2)}

/* Newsletter */
.newsletter{
  background:var(--ink);color:#A9B2BE;border-radius:var(--radius-xl);
  padding:34px 24px;position:relative;overflow:hidden;
}
@media(min-width:760px){.newsletter{padding:52px 48px}}
.newsletter h2{color:#fff;max-width:20ch;margin-bottom:.5em}
.newsletter p{max-width:52ch;font-size:1rem;margin-bottom:24px}
.newsletter__form{display:grid;gap:10px;max-width:520px}
@media(min-width:560px){.newsletter__form{grid-template-columns:1fr auto}}
.newsletter__form input{
  padding:14px 18px;border-radius:var(--radius-pill);border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);color:#fff;outline:none;font-size:.96rem;
}
.newsletter__form input::placeholder{color:#8B95A3}
.newsletter__form input:focus{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.1)}
.newsletter__note{font-size:.79rem;color:#7E8896;margin:14px 0 0}
.newsletter__msg{font-size:.88rem;color:#9DE0C4;margin:12px 0 0;display:none}
.newsletter__msg.is-on{display:block}
.newsletter--inline{
  border-radius:var(--radius-lg);padding:26px 22px;margin-top:8px;
}

/* ---------- Article / guide layout ---------- */
.page-head{
  padding:32px 0 30px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#FFFFFF 0%,#FBFCFD 100%);
}
@media(min-width:1000px){.page-head{padding:48px 0 44px}}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:.8rem;color:var(--muted);margin-bottom:18px;list-style:none;padding:0}
.crumbs li{margin:0;display:flex;align-items:center;gap:7px}
.crumbs li+li::before{content:"/";color:var(--line-strong)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink);font-weight:600}
.page-head h1{max-width:26ch;margin-bottom:.5em;font-size:clamp(1.8rem,5vw,2.5rem)}
.page-head__dek{font-size:clamp(1rem,2.2vw,1.1rem);color:var(--muted);max-width:62ch;margin-bottom:22px}
.page-head__meta{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:.82rem;color:var(--muted-2)}

.article-grid{display:grid;gap:40px;padding:44px 0 60px}
@media(min-width:1040px){
  .article-grid{grid-template-columns:minmax(0,1fr) 290px;gap:64px;padding:56px 0 84px}
}

/* Article lead photograph. Sits full width between the page header and the body,
   capped at the same measure as the text so it does not run wider than the column
   it belongs to, with a caption that states where the picture came from. */
.lead{margin:0 auto 40px;max-width:var(--maxw);padding:0 var(--gutter)}
.lead__img{
  display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--radius);background:var(--surface-2);
}
.lead figcaption{
  margin-top:11px;font-size:.78rem;line-height:1.6;color:var(--muted-2);
  max-width:74ch;
}
@media(min-width:1040px){.lead{margin-bottom:48px}}

.prose{max-width:74ch}
.prose h2{margin-top:2.2em;padding-top:.1em;scroll-margin-top:calc(var(--header-h) + 20px)}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.8em;scroll-margin-top:calc(var(--header-h) + 20px)}
.prose h4{margin-top:1.5em;color:var(--ink-soft)}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin-bottom:.55em}
.prose strong{color:var(--ink);font-weight:650}
.prose a{text-decoration:underline;text-decoration-color:var(--accent-line);text-underline-offset:2px}
.prose a:hover{text-decoration-color:var(--accent)}
.prose blockquote{
  margin:1.8em 0;padding:18px 22px;background:var(--surface);
  border-left:3px solid var(--accent);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:.97rem;color:var(--ink-soft);
}
.prose blockquote p:last-child{margin-bottom:0}
.prose code{font-family:var(--mono);font-size:.87em;background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:var(--ink-soft)}

.callout{
  margin:1.9em 0;padding:20px 22px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface);
}
.callout__title{
  font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700;
  color:var(--accent-ink);margin-bottom:9px;display:flex;align-items:center;gap:8px;
}
.callout p:last-child{margin-bottom:0}
.callout--note{background:var(--warm-soft);border-color:#F0E0CC}
.callout--note .callout__title{color:#8A5420}
.callout--ok{background:var(--ok-soft);border-color:#CBE8DB}
.callout--ok .callout__title{color:var(--ok)}

.steps{list-style:none;padding:0;margin:1.6em 0;counter-reset:step}
.steps li{
  position:relative;padding-left:52px;margin-bottom:26px;counter-increment:step;
}
.steps li::before{
  content:counter(step);position:absolute;left:0;top:1px;
  width:34px;height:34px;border-radius:50%;
  background:#fff;border:1px solid var(--accent-line);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;
  font-size:.86rem;font-weight:700;font-family:var(--mono);
}
.steps li b{display:block;color:var(--ink);font-size:1rem;margin-bottom:5px;letter-spacing:-.01em}
.steps li p{margin-bottom:.6em}
.steps li p:last-child{margin-bottom:0}

.table-wrap{margin:1.9em 0;overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.88rem;min-width:520px}
caption{
  caption-side:top;text-align:left;padding:15px 18px 0;font-size:.8rem;
  color:var(--muted);font-weight:500;
}
th,td{padding:12px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
thead th{
  background:var(--surface);font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);font-weight:700;white-space:nowrap;
}
tbody tr:last-child td{border-bottom:0}
tbody th{font-weight:600;color:var(--ink)}
td strong{color:var(--ink)}

.faq{margin-top:1.2em;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;padding:17px 30px 17px 0;font-weight:600;color:var(--ink);
  font-size:.98rem;list-style:none;position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq__a{padding:0 0 20px;font-size:.94rem}
.faq__a p:last-child{margin-bottom:0}

/* Sidebar */
.sidebar{display:grid;gap:22px;align-content:start}
@media(min-width:1040px){.sidebar{position:sticky;top:calc(var(--header-h) + 24px)}}
.side-card{border:1px solid var(--line);border-radius:var(--radius);padding:20px;background:#fff}
.side-card h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted-2);margin-bottom:14px;font-weight:700}
.side-card ul{list-style:none;padding:0;margin:0;font-size:.89rem}
.side-card li{margin-bottom:2px}
.side-card a{display:block;padding:7px 0;color:var(--body);text-decoration:none;border-bottom:1px solid var(--surface-2)}
.side-card li:last-child a{border-bottom:0}
.side-card a:hover{color:var(--accent-ink)}
.side-card p{font-size:.88rem;color:var(--muted);margin-bottom:14px}
.side-card--accent{background:var(--accent-soft);border-color:var(--accent-line)}
.side-card--accent h4{color:var(--accent-ink)}

/* Related cards */
.related{padding:56px 0 0;border-top:1px solid var(--line);margin-top:56px}
@media(min-width:1000px){.related{padding-top:72px;margin-top:72px}}

/* ---------- Hub grids ---------- */
.hub-grid{display:grid;gap:18px}
@media(min-width:760px){.hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.hub-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:#98A2AE;padding:56px 0 0;margin-top:0}
@media(min-width:1000px){.footer{padding:72px 0 0}}
.footer a{color:#C6CDD6;text-decoration:none}
.footer a:hover{color:#fff;text-decoration:underline}
.footer__top{display:grid;gap:36px}
@media(min-width:900px){.footer__top{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px}}
.footer__brand .logo{color:#fff;margin-bottom:16px}
.footer__brand p{font-size:.88rem;max-width:36ch;line-height:1.65;margin-bottom:18px}
.footer__brand .pill{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#C6CDD6}
.footer h4{
  color:#fff;font-size:.74rem;text-transform:uppercase;letter-spacing:.13em;
  margin-bottom:16px;font-weight:700;
}
.footer__col ul{list-style:none;padding:0;margin:0;font-size:.89rem}
.footer__col li{margin-bottom:10px}
.footer__bottom{
  margin-top:44px;padding:22px 0;border-top:1px solid rgba(255,255,255,.1);
  display:grid;gap:14px;font-size:.8rem;color:#7E8896;
}
@media(min-width:760px){.footer__bottom{grid-template-columns:1fr auto;align-items:center}}
.footer__legal{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;padding:0;margin:0}
.footer__legal li{margin:0}
.footer__disclosure{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  border-radius:var(--radius);padding:16px 20px;margin-top:36px;font-size:.81rem;
  color:#8B95A3;line-height:1.6;
}
.footer__disclosure strong{color:#C6CDD6}

/* ---------- Cookie notice ----------
   A first-party notice, not a consent gate. The site loads no analytics and no
   advertising scripts, so there is nothing to switch off before it loads; what the
   notice has to do is say that plainly and remember it has been read. */
.cookie-note{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  padding:0 14px 14px;
  /* The strip spans the viewport so the card can be centred in it, but it must
     not swallow clicks aimed at the page underneath. The card takes them back. */
  pointer-events:none;
}
.cookie-note[hidden]{display:none}
.cookie-note__inner{
  pointer-events:auto;
  max-width:1080px;margin:0 auto;
  display:grid;gap:14px;align-items:center;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 14px 38px rgba(10,28,62,.18);
  padding:15px 17px;
  animation:cookie-rise .3s ease-out both;
}
@media(min-width:860px){
  .cookie-note__inner{grid-template-columns:1fr auto;gap:24px;padding:15px 22px}
}
.cookie-note__text{margin:0;font-size:.875rem;line-height:1.6;color:var(--body)}
.cookie-note__text strong{color:var(--ink)}
.cookie-note__text a{color:var(--accent-ink);text-decoration:underline}
.cookie-note__actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* The notice is fixed, so it would sit over the last row of the footer. Reserve
   the space instead of covering content, and give it back when it is dismissed. */
body.has-cookie-note{padding-bottom:132px}
@media(min-width:860px){body.has-cookie-note{padding-bottom:96px}}
@keyframes cookie-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.cookie-note__inner{animation:none}}

/* ---------- Utility ---------- */
.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;
}
.stack-sm>*+*{margin-top:14px}
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}
.text-c{text-align:center}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.center-cta{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.meta-note{
  font-size:.79rem;color:var(--muted-2);border-top:1px solid var(--line);
  padding-top:14px;margin-top:26px;line-height:1.6;
}
.divider-band{
  background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:26px 0;
}
.divider-band__inner{display:flex;flex-wrap:wrap;gap:14px 30px;align-items:center;justify-content:space-between;font-size:.86rem;color:var(--muted)}
.divider-band__list{display:flex;flex-wrap:wrap;gap:10px 24px;list-style:none;padding:0;margin:0}
.divider-band__list li{margin:0;display:inline-flex;align-items:center;gap:8px}
.divider-band__list svg{color:var(--accent);flex:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}
@media print{
  .header,.drawer,.search,.newsletter,.footer__bottom,.sidebar{display:none !important}
  body{color:#000}
}


/* ==========================================================================
   WordPress integration layer
   ========================================================================== */

/* Admin bar offsets */
body.admin-bar .header{top:32px}
@media screen and (max-width:782px){body.admin-bar .header{top:46px}}

/* WP-generated pagination */
.pagination,.wp-block-query-pagination,.nav-links{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin-top:28px;
}
.pagination .page-numbers,.nav-links .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;
  padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-pill);
  font-size:.9rem;font-weight:600;color:var(--ink-soft);text-decoration:none;background:#fff;
}
.pagination .page-numbers.current,.nav-links .page-numbers.current{
  background:var(--ink);border-color:var(--ink);color:#fff;
}
.pagination .page-numbers:hover,.nav-links .page-numbers:hover{border-color:var(--ink);text-decoration:none}

/* WP captions and embeds */
.wp-caption{max-width:100%;margin:1.8em 0}
.wp-caption-text,.wp-element-caption{
  font-size:.83rem;color:var(--muted);margin-top:8px;text-align:left;
}
.wp-block-image img{border-radius:var(--radius-sm)}
.alignleft{float:left;margin:0 1.5em 1em 0}
.alignright{float:right;margin:0 0 1em 1.5em}
.aligncenter{margin-left:auto;margin-right:auto}
.screen-reader-text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
embed,iframe,object,video{max-width:100%}
.sticky .card__meta::after{content:" · Featured"}

/* Block editor content inside a page body keeps theme typography */
.entry-content > *{max-width:74ch}
.entry-content > .alignwide{max-width:var(--maxw)}
.entry-content > .alignfull{max-width:none}