/* ============================================================
   appverse - editorial app-review magazine (FINAL canonical)
   Mobile-first. No horizontal overflow 320px to 1920px.
   No em/en dashes anywhere. Grafts + responsive fixes applied.
   Audit fixes applied: tap targets, contrast AA, focus-visible,
   ad-label separation, sticky-ad guard, overflow hardening.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

/* ---------- design tokens ---------- */
:root{
  --paper:#FBF6EE;
  --paper-2:#F5EDDF;
  --surface:#FFFFFF;
  --surface-warm:#FEFBF6;
  --ink:#211B17;
  --ink-soft:#534840;
  --ink-mute:#7A6E63;
  --line:#E7DDCE;
  --line-soft:#F0E8DA;
  --accent:#DA4F22;
  --accent-press:#B63D17;
  --accent-deep:#8F2F11;
  --accent-tint:#FBEAE1;
  --amber:#C77F1E;
  --slate:#2C4A45;
  --slate-tint:#E6EDEA;
  --focus:#1F6FEB;

  /* per-category accent hues (used only as swatches, left-borders, chip tints) */
  --cat-games:#7C5CE6;
  --cat-security:#1F9D74;
  --cat-tools:#5B6470;
  --cat-media:#1597A8;
  --cat-finance:#C8881F;
  --cat-social:#D6457E;
  --cat-entertainment:#9B4DCA;
  --cat-utilities:#3A6FB0;
  --cat-education:#2E7D8F;
  --cat-health:#2FA36B;

  --ff-display:'Fraunces',Georgia,'Times New Roman',serif;
  --ff-label:'Space Grotesk',system-ui,sans-serif;
  --ff-mono:'Space Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --ff-body:'DM Sans',system-ui,-apple-system,sans-serif;

  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:88px;
  --shadow-1:0 1px 2px rgba(33,27,23,.05), 0 2px 8px rgba(33,27,23,.05);
  --shadow-2:0 6px 16px rgba(33,27,23,.08), 0 2px 6px rgba(33,27,23,.05);
  --shadow-3:0 18px 48px rgba(33,27,23,.14), 0 6px 16px rgba(33,27,23,.08);
  --maxw:1200px;
  --nav-h:64px;
}

/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 14px)}
body{
  font-family:var(--ff-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  overflow-x:clip;
}
body.drawer-open{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-press);text-decoration:none}
a:hover{color:var(--accent-deep)}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul,ol{list-style:none}
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:600;line-height:1.1;letter-spacing:-.01em;color:var(--ink);overflow-wrap:break-word}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
::selection{background:var(--accent-tint);color:var(--accent-press)}

/* ---------- helpers ---------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(16px,5vw,40px)}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:8px;top:-48px;z-index:1200;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r-sm);font-family:var(--ff-label);font-weight:600;transition:top .15s}
.skip-link:focus{top:8px;color:#fff}
#main:focus{outline:none}
.eyebrow{font-family:var(--ff-label);font-weight:600;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-press)}

/* ---------- top nav + drawer ---------- */
.nav{position:sticky;top:0;z-index:1000;background:rgba(251,246,238,.92);border-bottom:1px solid var(--line)}
@supports ((backdrop-filter:blur(12px)) or (-webkit-backdrop-filter:blur(12px))){
  .nav{background:rgba(251,246,238,.82);-webkit-backdrop-filter:saturate(140%) blur(12px);backdrop-filter:saturate(140%) blur(12px)}
}
.nav__bar{display:flex;align-items:center;gap:var(--sp-3);min-height:var(--nav-h);padding-block:8px}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;font-family:var(--ff-display);font-weight:700;font-size:clamp(1.25rem,5vw,1.5rem);letter-spacing:-.02em;color:var(--ink);margin-right:auto;min-width:0}
.brand:hover{color:var(--ink)}
.brand__mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--accent);color:#fff;font-family:var(--ff-label);font-weight:700;font-size:1.1rem;flex-shrink:0;box-shadow:var(--shadow-1),0 0 0 4px rgba(218,79,34,.10)}
.brand__dot{color:var(--accent)}
.nav__links{display:none}
.nav__actions{display:flex;align-items:center;gap:var(--sp-2);flex-shrink:0}
.nav__search{display:none}
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--r-sm);color:var(--ink);border:1px solid transparent;background:none}
.icon-btn:hover{background:var(--paper-2)}
.nav__toggle,.nav__searchbtn{border:1px solid var(--line);background:var(--surface)}
.nav__searchbtn svg{width:20px;height:20px}

/* animated hamburger: three bars morph into an X */
.nav__toggle{position:relative}
.nav__toggle .bars,.nav__toggle .bars::before,.nav__toggle .bars::after{
  display:block;width:20px;height:2px;background:currentColor;border-radius:2px;
  transition:transform .25s ease,opacity .2s ease;
}
.nav__toggle .bars{position:relative}
.nav__toggle .bars::before,.nav__toggle .bars::after{content:"";position:absolute;left:0}
.nav__toggle .bars::before{top:-6px}
.nav__toggle .bars::after{top:6px}
.nav__toggle[aria-expanded="true"] .bars{background:transparent}
.nav__toggle[aria-expanded="true"] .bars::before{transform:translateY(6px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] .bars::after{transform:translateY(-6px) rotate(-45deg)}

@media(min-width:1024px){
  .nav__links{display:flex;align-items:center;gap:6px;font-family:var(--ff-label);font-weight:500;font-size:.94rem;min-width:0}
  .nav__links a{color:var(--ink-soft);padding:9px 13px;border-radius:var(--r-sm);min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
  .nav__links a:hover{color:var(--ink);background:var(--paper-2)}
  .nav__links a[aria-current="page"]{color:var(--accent-press);background:var(--accent-tint)}
  .nav__search{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 14px;min-width:0;flex:0 1 230px;color:var(--ink-mute)}
  .nav__search svg{flex-shrink:0}
  .nav__search input{border:none;background:none;font-family:var(--ff-body);font-size:.9rem;color:var(--ink);width:100%;min-width:0}
  .nav__search input:focus{outline:none}
  .nav__search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(218,79,34,.30)}
  .nav__toggle,.nav__searchbtn{display:none}
}

/* drawer */
.drawer{position:fixed;inset:0;z-index:1100;visibility:hidden;pointer-events:none}
.drawer.is-open{visibility:visible;pointer-events:auto}
.drawer__scrim{position:absolute;inset:0;background:rgba(33,27,23,.5);opacity:0;transition:opacity .25s}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer__panel{position:absolute;top:0;right:0;height:100vh;height:100dvh;width:min(86vw,360px);background:var(--paper);box-shadow:var(--shadow-3);transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;padding:var(--sp-4);overflow-y:auto;overscroll-behavior:contain}
.drawer.is-open .drawer__panel{transform:translateX(0)}
.drawer__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:var(--sp-4);border-bottom:1px solid var(--line)}
.drawer__head .brand{font-size:1.3rem}
.drawer__close{border:1px solid var(--line);width:44px;height:44px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--surface);flex-shrink:0}
.drawer__search{display:flex;align-items:center;gap:8px;margin-top:var(--sp-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:10px 16px}
.drawer__search svg{flex-shrink:0}
.drawer__search input{border:none;background:none;width:100%;min-width:0;font-family:var(--ff-body);font-size:1rem;color:var(--ink)}
.drawer__search input:focus{outline:none}
.drawer__search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(218,79,34,.30)}
.drawer__nav{display:flex;flex-direction:column;margin-top:var(--sp-4)}
.drawer__nav a{font-family:var(--ff-label);font-weight:500;font-size:1.12rem;color:var(--ink);padding:14px 8px;border-bottom:1px solid var(--line-soft);min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.drawer__nav a:hover,.drawer__nav a[aria-current="page"]{color:var(--accent-press)}
.drawer__nav a span{font-family:var(--ff-mono);font-size:.78rem;color:var(--ink-mute)}
@media(min-width:1024px){.drawer{display:none}}

/* ---------- section header (editorial rule) ---------- */
.section{padding-block:clamp(40px,7vw,80px)}
.section--tight{padding-block:clamp(28px,5vw,48px)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;padding-bottom:var(--sp-4);border-bottom:2px solid var(--ink);margin-bottom:var(--sp-6)}
.sec-head__l{display:flex;flex-direction:column;gap:8px;min-width:0}
.sec-head__num{font-family:var(--ff-mono);font-weight:700;font-size:.74rem;letter-spacing:.10em;text-transform:uppercase;color:var(--ink-mute)}
.sec-head h2{font-size:clamp(1.7rem,5vw,2.6rem)}
.sec-head__more{font-family:var(--ff-label);font-weight:600;font-size:.9rem;color:var(--accent-press);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;min-height:44px}
.sec-head__more:hover{gap:10px;color:var(--accent-deep)}
.sec-head__more svg{flex-shrink:0}

/* ---------- hero ---------- */
.hero{position:relative;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%);overflow:hidden}
.hero__grid{display:grid;gap:clamp(28px,5vw,56px);padding-block:clamp(40px,8vw,88px);align-items:center}
.hero__copy{max-width:46ch;min-width:0}
.hero h1{font-size:clamp(2.3rem,8.5vw,4.6rem);font-weight:600;letter-spacing:-.025em;margin-block:14px 18px;overflow-wrap:break-word}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero__lede{font-size:clamp(1.02rem,2.5vw,1.22rem);color:var(--ink-soft);max-width:52ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--sp-5)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--ff-label);font-weight:600;font-size:.96rem;padding:13px 22px;border-radius:var(--r-pill);min-height:48px;border:1px solid transparent;transition:transform .12s,background .15s,box-shadow .15s;text-align:center}
.btn:active{transform:translateY(1px)}
.btn svg{flex-shrink:0}
.btn--primary{background:var(--accent-press);color:#fff;box-shadow:var(--shadow-1)}
.btn--primary:hover{background:var(--accent-deep);color:#fff;box-shadow:var(--shadow-2)}
.btn--ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{background:var(--surface-warm);border-color:var(--ink-mute);color:var(--ink)}
.hero__stats{display:flex;flex-wrap:wrap;gap:clamp(18px,4vw,40px);margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--line)}
.hero__stat b{display:block;font-family:var(--ff-display);font-size:clamp(1.6rem,4vw,2.2rem);font-weight:600;color:var(--ink)}
.hero__stat span{font-family:var(--ff-label);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
.hero__feature{position:relative;min-width:0}
.feature-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(18px,4vw,26px);box-shadow:var(--shadow-3)}
.feature-card__tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--ff-label);font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-press);background:var(--accent-tint);padding:6px 12px;border-radius:var(--r-pill)}
.feature-card__top{display:flex;gap:16px;align-items:center;margin-top:16px}
.feature-card__icon{width:clamp(64px,16vw,84px);height:clamp(64px,16vw,84px);border-radius:22%;box-shadow:var(--shadow-1);flex-shrink:0;border:1px solid var(--line-soft);background:var(--paper-2)}
.feature-card__top>div{min-width:0}
.feature-card__name{font-size:clamp(1.25rem,4vw,1.7rem);overflow-wrap:break-word}
.feature-card__dev{font-family:var(--ff-label);font-size:.9rem;color:var(--ink-mute)}
.feature-card__body{margin-top:16px;color:var(--ink-soft);font-size:.98rem}
.feature-card__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft);flex-wrap:wrap}
@media(min-width:900px){.hero__grid{grid-template-columns:1.05fr .95fr}}

/* ---------- rating ---------- */
.rating{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-label);min-width:0;flex-wrap:wrap}
.rating__score{font-weight:700;font-size:1rem;color:var(--ink)}
.stars{--pct:100%;display:inline-block;font-size:1rem;line-height:1;position:relative;font-family:var(--ff-body);flex-shrink:0}
.stars::before{content:"\2605\2605\2605\2605\2605";color:var(--line)}
.stars::after{content:"\2605\2605\2605\2605\2605";color:var(--amber);position:absolute;inset:0;width:var(--pct);overflow:hidden;white-space:nowrap}
.rating__count{font-size:.82rem;color:var(--ink-mute);font-weight:500}
.rating--lg .stars{font-size:1.35rem}
.rating--lg .rating__score{font-size:1.4rem}

/* ---------- mono metadata chip (graft: real catalog feel) ---------- */
.meta-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--ff-mono);font-size:.72rem;font-weight:400;color:var(--ink-soft);background:var(--surface-warm);border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 9px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.meta-chip b{font-weight:700;color:var(--ink)}

/* free / paid price pill (graft) */
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--ff-label);font-weight:600;font-size:.78rem;padding:6px 12px;border-radius:var(--r-pill);white-space:nowrap}
.pill--free{color:var(--slate);background:var(--slate-tint)}
.pill--paid{color:var(--accent-press);background:var(--accent-tint)}

/* ---------- card grid + app card ---------- */
.card-grid{display:grid;gap:clamp(16px,2.5vw,24px);grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.app-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow-1);transition:transform .15s,box-shadow .15s,border-color .15s;position:relative;height:100%;min-width:0}
.app-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:var(--line)}
.app-card__top{display:flex;gap:14px;align-items:flex-start;min-width:0}
.app-card__icon{width:60px;height:60px;border-radius:22%;flex-shrink:0;box-shadow:var(--shadow-1);border:1px solid var(--line-soft);background:var(--paper-2)}
.app-card__head{min-width:0;flex:1}
.app-card__name{font-size:1.12rem;line-height:1.2;margin-bottom:3px;overflow-wrap:anywhere}
.app-card__name a{color:var(--ink)}
.app-card__name a:hover{color:var(--accent-press)}
.app-card__name a::after{content:"";position:absolute;inset:0}
.app-card__dev{font-family:var(--ff-label);font-size:.82rem;color:var(--ink-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.app-card__desc{margin-top:14px;font-size:.9rem;color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word}
.app-card__meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:14px}
.app-card__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft);flex-wrap:wrap}
.tag{font-family:var(--ff-label);font-weight:600;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);background:var(--paper-2);padding:5px 10px;border-radius:var(--r-pill);white-space:nowrap}
.tag--cat{color:var(--accent-press);background:var(--accent-tint)}
/* category-tinted tag uses --cat set on an ancestor or inline */
.tag--hue{color:var(--cat,var(--accent-press));background:color-mix(in srgb,var(--cat,var(--accent)) 14%,#fff);border:1px solid color-mix(in srgb,var(--cat,var(--accent)) 22%,#fff)}
.price{font-family:var(--ff-label);font-weight:600;font-size:.86rem;color:var(--slate)}
.price--free{color:var(--slate)}
.app-card__get{position:relative;z-index:2;font-family:var(--ff-label);font-weight:600;font-size:.82rem;color:var(--accent-press);border:1px solid var(--accent-tint);background:var(--accent-tint);padding:9px 14px;border-radius:var(--r-pill);min-height:44px;display:inline-flex;align-items:center}
.app-card__get:hover{background:var(--accent-press);color:#fff;border-color:var(--accent-press)}
.app-card__rank{position:absolute;top:-10px;left:-10px;width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-family:var(--ff-mono);font-weight:700;font-size:.9rem;box-shadow:var(--shadow-1);z-index:3}
/* category left-border accent (graft) */
.app-card--hue{border-left:3px solid var(--cat,var(--accent))}

/* in-feed native ad variant inside grid */
.app-card--feed{grid-column:1/-1;display:grid;gap:14px;background:var(--slate-tint);border-color:var(--slate-tint)}
@media(min-width:640px){.app-card--feed{grid-template-columns:auto 1fr auto;align-items:center}}

/* ---------- category grid ---------- */
.cat-grid{display:grid;gap:clamp(12px,2vw,18px);grid-template-columns:repeat(auto-fill,minmax(min(100%,168px),1fr))}
.cat-tile{display:flex;flex-direction:column;gap:6px;justify-content:space-between;min-height:120px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--cat,var(--accent));border-radius:var(--r-md);padding:16px;box-shadow:var(--shadow-1);transition:transform .15s,box-shadow .15s;position:relative;overflow:hidden;min-width:0}
.cat-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.cat-tile__emoji{font-size:1.6rem;line-height:1}
.cat-tile__name{font-family:var(--ff-display);font-weight:600;font-size:1.18rem;color:var(--ink);overflow-wrap:break-word}
.cat-tile__count{font-family:var(--ff-mono);font-size:.74rem;color:var(--ink-mute)}
.cat-tile::after{content:"";position:absolute;right:-30px;bottom:-30px;width:80px;height:80px;border-radius:50%;background:color-mix(in srgb,var(--cat,var(--accent)) 16%,#fff);opacity:.7;transition:transform .2s}
.cat-tile:hover::after{transform:scale(1.3)}
/* category hue map */
.cat--games{--cat:var(--cat-games)}
.cat--security{--cat:var(--cat-security)}
.cat--tools{--cat:var(--cat-tools)}
.cat--media{--cat:var(--cat-media)}
.cat--finance{--cat:var(--cat-finance)}
.cat--social{--cat:var(--cat-social)}
.cat--entertainment{--cat:var(--cat-entertainment)}
.cat--utilities{--cat:var(--cat-utilities)}
.cat--education{--cat:var(--cat-education)}
.cat--health{--cat:var(--cat-health)}

/* ---------- platform strip ---------- */
.platform-strip{display:flex;flex-wrap:wrap;gap:10px}
.platform-chip{display:inline-flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:11px 18px;min-height:48px;font-family:var(--ff-label);font-weight:600;font-size:.92rem;color:var(--ink);box-shadow:var(--shadow-1);transition:border-color .15s,transform .12s}
.platform-chip:hover{border-color:var(--accent);color:var(--accent-press);transform:translateY(-2px)}
.platform-chip svg{width:20px;height:20px;flex-shrink:0}
.platform-chip span{font-family:var(--ff-label);font-weight:500;font-size:.78rem;color:var(--ink-mute)}

/* ---------- breadcrumb ---------- */
.breadcrumb{font-family:var(--ff-label);font-size:.84rem;color:var(--ink-mute);padding-block:6px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.breadcrumb a{color:var(--ink-soft);display:inline-flex;align-items:center;min-height:44px}
.breadcrumb a:hover{color:var(--accent-press)}
.breadcrumb span[aria-current]{color:var(--ink)}
.breadcrumb .sep{color:var(--line)}

/* ---------- page header ---------- */
.page-head{border-bottom:1px solid var(--line);background:var(--surface-warm)}
.page-head__in{padding-block:clamp(28px,6vw,56px)}
.page-head h1{font-size:clamp(2rem,6vw,3.4rem);margin-block:10px 12px}
.page-head p{color:var(--ink-soft);max-width:62ch;font-size:clamp(1rem,2.2vw,1.12rem)}
.page-head--hue{border-top:4px solid var(--cat,var(--accent))}

/* ---------- filter chips ---------- */
.filters{display:flex;gap:10px;overflow-x:auto;padding-block:18px;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
.filters::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;font-family:var(--ff-label);font-weight:600;font-size:.86rem;color:var(--ink-soft);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:10px 16px;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap;transition:all .12s}
.chip:hover{border-color:var(--ink-mute);color:var(--ink)}
.chip[aria-pressed="true"],.chip.is-active{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ---------- search results meta + empty state ---------- */
.results-meta{font-family:var(--ff-label);font-size:.92rem;color:var(--ink-mute);padding-block:8px 18px}
.results-meta b{color:var(--ink)}
.empty{text-align:center;padding:clamp(36px,8vw,72px) 20px;border:1px dashed var(--line);border-radius:var(--r-lg);background:var(--surface-warm)}
.empty__emoji{font-size:2.4rem;line-height:1;margin-bottom:12px}
.empty h2{font-size:clamp(1.3rem,4vw,1.8rem);margin-bottom:8px}
.empty p{color:var(--ink-soft);max-width:42ch;margin:0 auto 18px}

/* ---------- app detail ---------- */
.detail{display:grid;gap:clamp(24px,4vw,44px);padding-block:clamp(24px,4vw,40px)}
@media(min-width:1024px){.detail{grid-template-columns:minmax(0,1fr) minmax(0,340px);align-items:start}}
.detail__main{min-width:0}
.detail-hero{display:flex;flex-direction:column;gap:18px}
.detail-hero__top{display:flex;gap:clamp(16px,3vw,24px);align-items:center;flex-wrap:wrap}
.detail-hero__icon{width:clamp(82px,20vw,116px);height:clamp(82px,20vw,116px);border-radius:23%;box-shadow:var(--shadow-2);border:1px solid var(--line-soft);flex-shrink:0;background:var(--paper-2)}
.detail-hero__id{min-width:0}
.detail-hero__id h1{font-size:clamp(1.6rem,5vw,2.6rem);line-height:1.08;overflow-wrap:break-word}
.detail-hero__dev{font-family:var(--ff-label);font-weight:500;font-size:1rem;color:var(--ink-mute);margin-top:6px}
.detail-hero__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* stat band */
.stat-band{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,104px),1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin-block:8px}
.stat{background:var(--surface);padding:16px;text-align:center;min-width:0}
.stat b{display:block;font-family:var(--ff-display);font-weight:600;font-size:1.3rem;color:var(--ink);overflow-wrap:break-word}
.stat span{font-family:var(--ff-label);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}

/* screenshot rail (contained) */
.shots{margin-block:8px}
.shots__rail{display:flex;gap:14px;overflow-x:auto;padding-bottom:14px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin;overscroll-behavior-x:contain}
.shots__rail img{height:clamp(340px,58vw,460px);width:auto;border-radius:var(--r-md);scroll-snap-align:start;box-shadow:var(--shadow-1);border:1px solid var(--line-soft);flex:0 0 auto;min-width:0;background:var(--paper-2)}

/* review prose */
.prose{font-size:1.04rem;color:var(--ink-soft);max-width:68ch;overflow-wrap:break-word}
.prose h2{font-size:clamp(1.4rem,4vw,1.9rem);margin-block:32px 12px;color:var(--ink)}
.prose h3{font-size:1.25rem;margin-block:24px 8px;color:var(--ink)}
.prose p{margin-bottom:16px}
.prose p:first-of-type::first-letter{font-family:var(--ff-display);font-size:3.4em;float:left;line-height:.78;padding:6px 10px 0 0;color:var(--accent);font-weight:600}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose ul{margin:0 0 16px;padding-left:0}
.prose ul li{position:relative;padding-left:22px;margin-bottom:8px}
.prose ul li::before{content:"";position:absolute;left:4px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* verdict box + score badge (graft) */
.verdict{background:var(--slate);color:#fff;border-radius:var(--r-lg);padding:clamp(20px,4vw,32px);margin-block:28px;box-shadow:var(--shadow-2)}
.verdict .eyebrow{color:#F4C99B}
.verdict h2{color:#fff;font-size:clamp(1.5rem,4vw,2rem);margin-block:8px 12px}
.verdict__score{display:flex;align-items:baseline;gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.18);flex-wrap:wrap}
.verdict__score b{font-family:var(--ff-display);font-size:3rem;font-weight:600;line-height:1}
.verdict__score span{font-family:var(--ff-label);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.verdict p{color:rgba(255,255,255,.88)}
.score-badge{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:64px;height:64px;border-radius:50%;background:var(--amber);color:var(--ink);flex-shrink:0;box-shadow:var(--shadow-1)}
.score-badge b{font-family:var(--ff-display);font-weight:700;font-size:1.5rem;line-height:1}
.score-badge span{font-family:var(--ff-mono);font-size:.56rem;letter-spacing:.04em;text-transform:uppercase}

/* pros / cons */
.proscons{display:grid;gap:16px;margin-block:24px}
@media(min-width:560px){.proscons{grid-template-columns:1fr 1fr}}
.pc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:18px;min-width:0}
.pc h3{font-family:var(--ff-label);font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px}
.pc--pro h3{color:var(--slate)}
.pc--con h3{color:var(--accent-press)}
.pc li{display:flex;gap:10px;font-size:.94rem;color:var(--ink-soft);padding:7px 0;overflow-wrap:anywhere}
.pc li::before{font-family:var(--ff-label);font-weight:700;flex-shrink:0}
.pc--pro li::before{content:"+";color:var(--slate)}
.pc--con li::before{content:"\2212";color:var(--accent-press)}

/* detail sidebar */
.detail__side{display:flex;flex-direction:column;gap:18px;min-width:0}
@media(min-width:1024px){.detail__side{position:sticky;top:calc(var(--nav-h) + 16px)}}
/* keep the 300x250 sidebar ad scrolling with the page (Better Ads / sticky-ad rules) */
@media(max-width:1100px){.detail__side{position:static}}
.side-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow-1);min-width:0}
.side-card h3{font-family:var(--ff-label);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:14px}
.get-app .price{font-size:1.05rem}
.get-app__price-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.get-app .btn{width:100%}
.get-app__note{font-size:.78rem;color:var(--ink-mute);margin-top:12px;line-height:1.5}
.info-list{display:flex;flex-direction:column}
.info-list div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:.9rem}
.info-list div:last-child{border-bottom:none}
.info-list dt{font-family:var(--ff-label);color:var(--ink-mute);flex-shrink:0}
.info-list dd{color:var(--ink);font-weight:500;text-align:right;font-family:var(--ff-mono);font-size:.84rem;overflow-wrap:anywhere;min-width:0}

/* ---------- ad slot ---------- */
.ad{margin-block:clamp(28px,5vw,44px)}
.ad__label{display:block;margin:0 0 6px;text-align:center;font-family:var(--ff-label);font-weight:600;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.ad__inner{background:repeating-linear-gradient(45deg,var(--paper-2),var(--paper-2) 12px,var(--surface-warm) 12px,var(--surface-warm) 24px);border:1px dashed var(--line);border-radius:var(--r-md);min-height:120px;display:grid;place-items:center;text-align:center;padding:20px;overflow:hidden}
.ad__inner>div,.ad__inner>ins{max-width:100%}
.ad__hint{font-family:var(--ff-mono);font-size:.74rem;color:var(--ink-soft);margin-top:4px}
.ad--sidebar .ad__inner{min-height:260px}
.ad--leaderboard .ad__inner{min-height:90px}
.ad :is(iframe,img,ins){max-width:100%}

/* ---------- article / news card + strip ---------- */
.news-grid{display:grid;gap:clamp(16px,2.5vw,24px);grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.news-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-1);transition:transform .15s,box-shadow .15s;height:100%;min-width:0}
.news-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.news-card__media{aspect-ratio:16/10;background:linear-gradient(135deg,var(--paper-2),var(--slate-tint));display:grid;place-items:center;font-family:var(--ff-display);font-size:2.4rem;color:var(--ink-mute)}
.news-card__body{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.news-card__kicker{font-family:var(--ff-label);font-weight:600;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-press)}
.news-card__title{font-size:1.2rem;line-height:1.2}
.news-card__title a{color:var(--ink)}
.news-card__title a:hover{color:var(--accent-press)}
.news-card__excerpt{font-size:.92rem;color:var(--ink-soft);flex:1}
.news-card__meta{font-family:var(--ff-mono);font-size:.74rem;color:var(--ink-mute);margin-top:6px;padding-top:12px;border-top:1px solid var(--line-soft)}

/* ---------- contact form ---------- */
.form-wrap{display:grid;gap:clamp(24px,4vw,40px)}
@media(min-width:880px){.form-wrap{grid-template-columns:1.3fr .7fr}}
.form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,4vw,32px);box-shadow:var(--shadow-1);min-width:0}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--ff-label);font-weight:600;font-size:.86rem;color:var(--ink);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;max-width:100%;font-family:var(--ff-body);font-size:1rem;color:var(--ink);background:var(--surface-warm);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;min-height:48px;transition:border-color .15s,box-shadow .15s}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(218,79,34,.35)}
.field__hint{font-size:.8rem;color:var(--ink-mute);margin-top:6px}
.form .btn{width:100%;margin-top:6px}
.form-aside{display:flex;flex-direction:column;gap:18px}

/* ---------- legal / editorial article prose ---------- */
.doc{padding-block:clamp(28px,5vw,56px)}
.doc__body{max-width:72ch;font-size:1.04rem;color:var(--ink-soft);overflow-wrap:break-word}
.doc__body h2{font-size:clamp(1.3rem,4vw,1.8rem);color:var(--ink);margin-block:28px 10px}
.doc__body h3{font-size:1.18rem;color:var(--ink);margin-block:20px 8px}
.doc__body p,.doc__body li{margin-bottom:12px}
.doc__body ul{padding-left:22px;list-style:disc}
.doc__body a{text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.doc__updated{font-family:var(--ff-mono);font-size:.78rem;color:var(--ink-mute);margin-bottom:20px}

/* ---------- pagination ---------- */
.pagination{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;padding-block:clamp(28px,5vw,48px)}
.pagination a,.pagination span{font-family:var(--ff-label);font-weight:600;font-size:.92rem;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink-soft);background:var(--surface)}
.pagination a:hover{border-color:var(--accent);color:var(--accent-press)}
.pagination [aria-current="page"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pagination .is-disabled{opacity:.4;pointer-events:none}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:#D9CCBF;margin-top:clamp(40px,7vw,80px)}
.footer__top{display:grid;gap:clamp(28px,5vw,48px);padding-block:clamp(40px,6vw,64px);grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.footer__brand{font-family:var(--ff-display);font-weight:700;font-size:1.5rem;color:#fff;display:flex;align-items:center;gap:10px}
.footer__brand .brand__mark{box-shadow:none}
.footer__about{font-size:.9rem;color:#B4A697;margin-top:14px;max-width:38ch}
.footer h4,.footer h2{font-family:var(--ff-label);font-weight:700;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.footer__col a{display:flex;align-items:center;min-height:44px;color:#C7B9AB;font-size:.92rem;padding:8px 0}
.footer__col a:hover{color:#fff}
.footer__disclaimer{border-top:1px solid rgba(255,255,255,.12);padding-block:24px;font-size:.82rem;color:#9C8E80;line-height:1.7}
.footer__disclaimer strong{color:#C7B9AB;font-weight:600}
.footer__bar{border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;padding-block:20px;font-family:var(--ff-label);font-size:.82rem;color:#9C8E80}
.footer__bar a{color:#9C8E80;display:inline-flex;align-items:center;min-height:44px}
.footer__bar a:hover{color:#fff}
.footer__legal{display:flex;flex-wrap:wrap;gap:16px}
.footer__legal a{display:inline-flex;align-items:center;min-height:44px}

/* ---------- 404 ---------- */
.notfound{min-height:60vh;display:grid;place-items:center;text-align:center;padding-block:clamp(48px,10vw,96px)}
.notfound__code{font-family:var(--ff-display);font-weight:700;font-size:clamp(5rem,22vw,11rem);line-height:.9;color:var(--accent);letter-spacing:-.04em}
.notfound h1{font-size:clamp(1.6rem,5vw,2.4rem);margin-block:8px 14px}
.notfound p{color:var(--ink-soft);max-width:46ch;margin-inline:auto;margin-bottom:24px}
.notfound__links{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* ---- responsive long-form pages: tables/media never cause horizontal overflow ---- */
.prose--page{max-width:78ch}
.prose table{display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-collapse:collapse;margin:1.1rem 0;font-size:.92rem}
.prose th,.prose td{padding:9px 12px;border:1px solid var(--line,#e7e2d8);text-align:left;vertical-align:top;white-space:normal;overflow-wrap:anywhere}
.prose th{font-weight:600;color:var(--ink,#1a1714);background:rgba(0,0,0,.025)}
.prose img,.prose video,.prose iframe{max-width:100%;height:auto}
.prose pre,.prose code{max-width:100%;overflow-x:auto;white-space:pre-wrap;word-break:break-word}
.prose--page a{overflow-wrap:anywhere}
img,svg,video{max-width:100%}

/* ---- hero carousel: auto-rotating featured reviews (first impression) ---- */
.hero-carousel{display:flex;flex-direction:column;gap:16px}
.hero-carousel__viewport{display:grid}
.hero-carousel__viewport>.hero-slide{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.hero-carousel__viewport>.hero-slide.is-active{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.hero-slide .feature-card__body{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:4.4em}
.hero-carousel__dots{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}
.hero-dot{position:relative;width:26px;height:6px;border-radius:99px;border:0;padding:0;cursor:pointer;background:var(--accent-tint);overflow:hidden;transition:width .3s ease,background .3s ease}
.hero-dot:hover{background:#f2cdbd}
.hero-dot.is-active{width:44px}
.hero-dot__fill{position:absolute;inset:0;width:0;border-radius:99px;background:var(--accent-press)}
.hero-dot.is-active .hero-dot__fill{animation:heroFill 6s linear forwards}
.hero-carousel.is-paused .hero-dot.is-active .hero-dot__fill{animation-play-state:paused}
.hero-dot:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@keyframes heroFill{from{width:0}to{width:100%}}
@media (prefers-reduced-motion:reduce){
  .hero-carousel__viewport>.hero-slide{transition:none;transform:none}
  .hero-dot.is-active .hero-dot__fill{animation:none;width:100%}
}

/* ---- contact page extras ---- */
.form__consent{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--ink-soft);line-height:1.5;margin:4px 0 18px}
.form__consent input{width:20px;height:20px;min-height:20px;margin-top:1px;flex:0 0 auto;accent-color:var(--accent)}
.form__consent a{color:var(--accent-press);font-weight:600}
.contact-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.contact-list li{display:flex;flex-direction:column;gap:2px}
.contact-list li span{font-size:.8rem;color:var(--ink-mute);font-family:var(--ff-label);font-weight:600;letter-spacing:.02em}
.contact-list li a{color:var(--accent-press);font-weight:600;word-break:break-word}
.filters .chip{cursor:pointer}

/* ---- apptidal brand: svg tide mark + Space Grotesk wordmark ---- */
.brand__mark{width:30px;height:30px;border-radius:0;background:none;box-shadow:none;padding:0;display:block;flex-shrink:0}
.footer__brand .brand__mark,.drawer__head .brand__mark{width:30px;height:30px;box-shadow:none}
.brand__wm{font-family:var(--ff-label);font-weight:700;letter-spacing:-.015em;line-height:1}
.brand__t{color:var(--accent)}
.footer__brand .brand__wm{color:#fff}

/* ================= App Wall hero (home) ================= */
.hw-hero{position:relative;overflow:hidden}
.hw-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center;padding-block:56px 40px}
.hw-copy{min-width:0}
.hw-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--ff-label);font-weight:600;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-press);background:var(--accent-tint);padding:7px 13px;border-radius:100px;border:1px solid #f3d3c4}
.hw-spark{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.hw-title{font-family:var(--ff-display);font-weight:600;letter-spacing:-.025em;font-size:clamp(2.4rem,6.2vw,4.4rem);line-height:1.02;margin:22px 0 0;color:var(--ink)}
.hw-title em{font-style:italic;font-weight:500;color:var(--accent-press)}
.hw-lede{font-size:clamp(1rem,1.6vw,1.14rem);color:var(--ink-soft);max-width:36ch;margin:20px 0 0}
.hw-search{margin-top:28px;max-width:520px}
.hw-search-row{display:flex;align-items:center;gap:8px;background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:8px 8px 8px 16px;box-shadow:0 1px 0 rgba(33,27,23,.03),0 14px 30px -22px rgba(33,27,23,.4);transition:border-color .15s,box-shadow .15s}
.hw-search-row:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-tint)}
.hw-search-row svg{flex:0 0 auto;color:var(--ink-mute)}
.hw-search-input{flex:1 1 auto;min-width:0;border:0;outline:0;background:transparent;font-family:var(--ff-body);font-size:1rem;color:var(--ink);padding:11px 4px;min-height:44px}
.hw-search-input::placeholder{color:var(--ink-mute)}
.hw-search-btn{flex:0 0 auto;font-family:var(--ff-label);font-weight:600;font-size:.9rem;color:#fff;background:var(--accent-press);border:0;border-radius:11px;padding:0 18px;min-height:44px;cursor:pointer;transition:background .15s}
.hw-search-btn:hover{background:var(--accent)}
.hw-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.hw-chip{font-family:var(--ff-label);font-weight:500;font-size:.8rem;color:var(--ink-soft);background:var(--surface);border:1px solid var(--line);border-radius:100px;padding:9px 14px;min-height:40px;display:inline-flex;align-items:center;transition:border-color .15s,color .15s,background .15s}
.hw-chip:hover{border-color:var(--accent);color:var(--accent-press);background:var(--accent-tint)}
.hw-stats{display:flex;gap:12px;margin:32px 0 0;flex-wrap:wrap}
.hw-stat{flex:1 1 120px;min-width:110px;border-top:2px solid var(--ink);padding-top:12px;margin:0}
.hw-n{font-family:var(--ff-display);font-weight:600;font-size:clamp(1.7rem,3.4vw,2.2rem);letter-spacing:-.02em;line-height:1;margin:0}
.hw-l{font-family:var(--ff-label);font-size:.7rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute);margin-top:7px}
.hw-wall{position:relative;height:540px;border-radius:22px;overflow:hidden;background:linear-gradient(180deg,var(--surface-warm),#fff);border:1px solid var(--line);box-shadow:0 40px 80px -50px rgba(33,27,23,.45)}
.hw-wall-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:16px;height:100%}
.hw-wall-col{position:relative;overflow:hidden}
.hw-wall-track{display:flex;flex-direction:column;gap:16px;will-change:transform}
.hw-wall-col:nth-child(1) .hw-wall-track{animation:hw-up 34s linear infinite}
.hw-wall-col:nth-child(2) .hw-wall-track{animation:hw-down 42s linear infinite}
.hw-wall-col:nth-child(3) .hw-wall-track{animation:hw-up 38s linear infinite}
@keyframes hw-up{from{transform:translateY(0)}to{transform:translateY(-33.333%)}}
@keyframes hw-down{from{transform:translateY(-33.333%)}to{transform:translateY(0)}}
.hw-tile{position:relative;aspect-ratio:1/1;border-radius:20px;overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:0 10px 22px -16px rgba(33,27,23,.5);flex:0 0 auto}
.hw-tile img{width:100%;height:100%;object-fit:cover}
.hw-wall::before,.hw-wall::after{content:"";position:absolute;left:0;right:0;height:80px;z-index:2;pointer-events:none}
.hw-wall::before{top:0;background:linear-gradient(180deg,var(--surface-warm),rgba(254,251,246,0))}
.hw-wall::after{bottom:0;background:linear-gradient(0deg,#fff,rgba(255,255,255,0))}
.hw-badge{position:absolute;z-index:3;left:16px;bottom:16px;right:16px;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 20px 40px -26px rgba(33,27,23,.55);transition:border-color .15s}
.hw-badge:hover{border-color:#d8cbb8}
.hw-bi{width:44px;height:44px;border-radius:11px;flex:0 0 auto;border:1px solid var(--line)}
.hw-bt{min-width:0}
.hw-k{font-family:var(--ff-label);font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-press)}
.hw-nm{font-family:var(--ff-display);font-weight:600;font-size:1rem;margin-top:2px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hw-mt{font-family:var(--ff-body);font-size:.8rem;color:var(--ink-mute)}
.hw-star{color:var(--accent);font-weight:700}
.hw-wall-mobile{display:none}
@media (max-width:980px){
  .hw-grid{grid-template-columns:1fr;gap:28px;padding-block:36px 22px}
  .hw-wall{display:none}
  .hw-wall-mobile{display:block;position:relative;height:120px;overflow:hidden;border-radius:18px;border:1px solid var(--line);background:linear-gradient(180deg,var(--surface-warm),#fff)}
  .hw-marq{display:flex;gap:14px;width:max-content;padding:14px;animation:hw-marq 40s linear infinite}
  .hw-marq .hw-tile{width:92px;height:92px;aspect-ratio:auto}
  .hw-wall-mobile::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--surface-warm),rgba(254,251,246,0) 12%,rgba(255,255,255,0) 88%,#fff)}
}
@keyframes hw-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:560px){ .hw-stat{flex-basis:calc(50% - 6px)} .hw-search-btn{padding:0 14px} }
@media (prefers-reduced-motion:reduce){ .hw-wall-track,.hw-marq{animation:none!important;transform:none!important} }

/* rotating editor's-pick badge (the lower banner that switches) */
.hw-badge-stack{position:absolute;z-index:3;left:16px;bottom:16px;right:16px;display:grid}
.hw-badge-stack .hw-badge{position:static;left:auto;right:auto;bottom:auto;grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .55s ease;pointer-events:none}
.hw-badge-stack .hw-badge.is-active{opacity:1;visibility:visible;pointer-events:auto}

/* ===== design-pieces (ab/hwr/nd/cg) v1 START ===== */
/* ========== ABOUT PAGE (ab-) ========== */
.ab-wrap { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3.5rem, 8vw, 6rem); }
.ab-wrap > * + * { margin-top: clamp(3rem, 7vw, 5.5rem); }

/* --- Intro / lede --- */
.ab-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}
@media (min-width: 900px) {
  .ab-intro { grid-template-columns: 1.5fr 1fr; gap: clamp(2.5rem, 5vw, 4rem); }
}
.ab-lede {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.35rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.ab-lede em { font-style: italic; color: var(--accent); }
.ab-intro__body { margin: 0; }
.ab-intro__body p {
  font-family: var(--ff-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}
.ab-intro__body p + p { margin-top: 1rem; }

/* --- Section scaffolding --- */
.ab-section__head { max-width: 46rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.ab-section__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0.5rem 0 0;
  text-wrap: balance;
}
.ab-section__dek {
  font-family: var(--ff-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-mute);
  margin: 0.75rem 0 0;
  max-width: 42rem;
}

/* --- Stat band --- */
.ab-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
@media (min-width: 720px) { .ab-stats { grid-template-columns: repeat(4, 1fr); } }
.ab-stat { background: var(--surface); padding: clamp(1.25rem, 3vw, 1.75rem); }
.ab-stat__num {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.ab-stat__label {
  font-family: var(--ff-label);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 0.6rem;
}

/* --- Values / principles cards --- */
.ab-values { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .ab-values { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ab-values { grid-template-columns: repeat(3, 1fr); } }
.ab-value {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(1.5rem, 3vw, 1.85rem);
  display: flex;
  flex-direction: column;
}
.ab-value__idx {
  font-family: var(--ff-label);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 0.9rem;
}
.ab-value__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 0.55rem;
}
.ab-value__text {
  font-family: var(--ff-body);
  font-size: 0.9688rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

/* --- Funding: highlighted editorial panel --- */
.ab-fund {
  background: var(--surface-warm);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(1.75rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 880px) { .ab-fund { grid-template-columns: 1.1fr 0.9fr; align-items: start; } }
.ab-fund__lead {
  font-family: var(--ff-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}
.ab-fund__lead + .ab-fund__lead { margin-top: 1rem; }
.ab-fund__lead a { color: var(--accent); text-underline-offset: 3px; }
.ab-fund__lead a:hover { color: var(--accent-press); }
.ab-quote {
  border-left: 3px solid var(--accent);
  padding-left: clamp(1rem, 2vw, 1.5rem);
  margin: 0;
}
.ab-quote p {
  font-family: var(--ff-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.2rem, 0.9rem + 1.1vw, 1.5rem);
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.ab-guard {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}
.ab-guard li {
  position: relative;
  padding-left: 1.85rem;
  font-family: var(--ff-body);
  font-size: 0.9688rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.ab-guard li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--accent-tint);
  border: 1px solid var(--accent);
}
.ab-guard li::after {
  content: "";
  position: absolute;
  left: 0.36rem;
  top: 0.42em;
  width: 0.34rem;
  height: 0.6rem;
  border-right: 2px solid var(--accent-press);
  border-bottom: 2px solid var(--accent-press);
  transform: rotate(40deg);
}

/* --- How we work: numbered steps --- */
.ab-steps { display: grid; grid-template-columns: 1fr; gap: 1.25rem; counter-reset: ab-step; }
@media (min-width: 780px) { .ab-steps { grid-template-columns: repeat(3, 1fr); } }
.ab-step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(1.5rem, 3vw, 1.85rem);
  counter-increment: ab-step;
}
.ab-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--ff-display);
  font-size: 1.05rem;
  margin-bottom: 1rem;
}
.ab-step__num::before { content: counter(ab-step, decimal-leading-zero); }
.ab-step__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--ink);
  margin: 0 0 0.5rem;
}
.ab-step__text {
  font-family: var(--ff-body);
  font-size: 0.9688rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

/* --- Closing CTA --- */
.ab-cta {
  background: var(--ink);
  color: var(--paper);
  border-radius: 20px;
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
}
.ab-cta__eyebrow {
  font-family: var(--ff-label);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.ab-cta__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0.75rem auto 0;
  max-width: 24ch;
  text-wrap: balance;
}
.ab-cta__text {
  font-family: var(--ff-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(251, 246, 238, 0.78);
  margin: 1rem auto 0;
  max-width: 48ch;
}
.ab-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
  margin-top: 1.75rem;
}
.ab-cta .btn--ghost {
  color: var(--paper);
  border-color: rgba(251, 246, 238, 0.35);
}
.ab-cta .btn--ghost:hover { border-color: var(--paper); background: rgba(251, 246, 238, 0.08); }

/* --- Disclaimer note --- */
.ab-note {
  border-top: 1px solid var(--line);
  padding-top: clamp(1.5rem, 3vw, 2rem);
}
.ab-note__label {
  font-family: var(--ff-label);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 0.75rem;
}
.ab-note p {
  font-family: var(--ff-body);
  font-size: 0.9063rem;
  line-height: 1.65;
  color: var(--ink-mute);
  margin: 0;
  max-width: 65ch;
}
.ab-note p + p { margin-top: 0.75rem; }
.ab-note a { color: var(--ink-soft); text-underline-offset: 2px; }
.ab-note a:hover { color: var(--accent); }

/* ============================================================
   HOW WE REVIEW  ·  prefix: hwr-
   ============================================================ */

.hwr-wrap {
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

.hwr-section {
  margin-top: clamp(3rem, 7vw, 5.5rem);
}
.hwr-section:first-child { margin-top: clamp(2rem, 5vw, 3.5rem); }

.hwr-section__head {
  max-width: 62ch;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.hwr-section__num {
  font-family: var(--ff-label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-block;
  margin-bottom: 0.85rem;
}
.hwr-section__title {
  font-family: var(--ff-display);
  font-weight: 550;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-size: clamp(1.55rem, 3.4vw, 2.35rem);
  margin: 0 0 0.7rem;
}
.hwr-section__lead {
  font-family: var(--ff-body);
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  line-height: 1.62;
  margin: 0;
}

/* ---- Promise / lede band ---- */
.hwr-promise {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(180deg, var(--surface-warm), var(--surface));
  padding: clamp(1.6rem, 4vw, 2.75rem);
  overflow: hidden;
}
.hwr-promise::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--accent);
}
.hwr-promise__eyebrow {
  font-family: var(--ff-label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.9rem;
}
.hwr-promise__text {
  font-family: var(--ff-display);
  font-weight: 400;
  color: var(--ink);
  font-size: clamp(1.12rem, 2.3vw, 1.5rem);
  line-height: 1.42;
  letter-spacing: -0.005em;
  margin: 0;
  max-width: 42ch;
}
.hwr-promise__meta {
  font-family: var(--ff-label);
  font-size: 0.8rem;
  color: var(--ink-mute);
  margin: 1.4rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
}

/* ---- Standards / principles strip ---- */
.hwr-principles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  grid-template-columns: 1fr;
}
.hwr-principle {
  background: var(--surface);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}
.hwr-principle__icon {
  width: 30px;
  height: 30px;
  color: var(--accent);
  margin-bottom: 0.9rem;
  display: block;
}
.hwr-principle__title {
  font-family: var(--ff-display);
  font-weight: 550;
  font-size: 1.1rem;
  color: var(--ink);
  margin: 0 0 0.4rem;
  letter-spacing: -0.005em;
}
.hwr-principle__text {
  font-family: var(--ff-body);
  color: var(--ink-soft);
  font-size: 0.94rem;
  line-height: 1.55;
  margin: 0;
}

/* ---- Rubric grid ---- */
.hwr-rubric {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
.hwr-rubric__item {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: clamp(1.15rem, 2.6vw, 1.5rem);
  display: grid;
  gap: 0.85rem;
}
.hwr-rubric__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.hwr-rubric__name {
  font-family: var(--ff-display);
  font-weight: 550;
  font-size: 1.08rem;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.005em;
}
.hwr-rubric__weight {
  font-family: var(--ff-label);
  font-weight: 600;
  font-size: 1rem;
  color: var(--accent);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.hwr-rubric__desc {
  font-family: var(--ff-body);
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
}
.hwr-rubric__bar {
  height: 6px;
  border-radius: 99px;
  background: var(--accent-tint);
  overflow: hidden;
}
.hwr-rubric__fill {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--accent);
}
.hwr-rubric__total {
  font-family: var(--ff-label);
  font-size: 0.82rem;
  color: var(--ink-mute);
  margin: 1.1rem 0 0;
  text-align: right;
}
.hwr-rubric__total strong { color: var(--ink); font-weight: 600; }

/* ---- Process (numbered) ---- */
.hwr-process {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  counter-reset: hwr-step;
}
.hwr-step {
  counter-increment: hwr-step;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  padding: clamp(1.35rem, 3vw, 1.85rem);
  padding-left: clamp(4.2rem, 9vw, 5.5rem);
}
.hwr-step::before {
  content: counter(hwr-step, decimal-leading-zero);
  position: absolute;
  top: clamp(1.35rem, 3vw, 1.85rem);
  left: clamp(1.2rem, 3vw, 1.75rem);
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.hwr-step__title {
  font-family: var(--ff-display);
  font-weight: 550;
  font-size: clamp(1.12rem, 2.2vw, 1.3rem);
  color: var(--ink);
  margin: 0 0 0.5rem;
  letter-spacing: -0.005em;
}
.hwr-step__text {
  font-family: var(--ff-body);
  color: var(--ink-soft);
  font-size: 0.96rem;
  line-height: 1.6;
  margin: 0;
}
.hwr-step__tags {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.hwr-step__tag {
  font-family: var(--ff-label);
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--surface-warm);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 0.3rem 0.75rem;
}

/* ---- Score bands ---- */
.hwr-bands {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.hwr-band {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0.6rem 1.1rem;
  padding: 0.95rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.hwr-band__score {
  font-family: var(--ff-label);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 5.5rem;
}
.hwr-band__label {
  font-family: var(--ff-body);
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.hwr-band__label strong {
  color: var(--ink);
  font-weight: 600;
}

/* ---- Two-column layout for scoring detail ---- */
.hwr-cols {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: 1fr;
}

/* ---- Sources / metadata card ---- */
.hwr-sources {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
.hwr-source {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-warm);
  padding: clamp(1.2rem, 2.8vw, 1.6rem);
}
.hwr-source__kicker {
  font-family: var(--ff-label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.6rem;
}
.hwr-source__title {
  font-family: var(--ff-display);
  font-weight: 550;
  font-size: 1.12rem;
  color: var(--ink);
  margin: 0 0 0.45rem;
}
.hwr-source__text {
  font-family: var(--ff-body);
  color: var(--ink-soft);
  font-size: 0.93rem;
  line-height: 1.58;
  margin: 0;
}
.hwr-attr {
  font-family: var(--ff-body);
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--ink-mute);
  margin: 1.25rem 0 0;
  max-width: 70ch;
}

/* ---- Independence pledge ---- */
.hwr-pledge {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.hwr-pledge__list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}
.hwr-pledge__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem;
  align-items: start;
  font-family: var(--ff-body);
  color: var(--ink-soft);
  font-size: 0.96rem;
  line-height: 1.55;
}
.hwr-pledge__check {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--accent);
  margin-top: 0.12rem;
}

/* ---- Callout / correction ---- */
.hwr-callout {
  margin-top: clamp(3rem, 7vw, 5.5rem);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--accent-tint), var(--surface-warm));
  padding: clamp(1.6rem, 4vw, 2.75rem);
  text-align: center;
}
.hwr-callout__title {
  font-family: var(--ff-display);
  font-weight: 550;
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  color: var(--ink);
  margin: 0 0 0.6rem;
  letter-spacing: -0.01em;
}
.hwr-callout__text {
  font-family: var(--ff-body);
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 auto 1.5rem;
  max-width: 52ch;
}
.hwr-callout__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* ---- Fine print ---- */
.hwr-fineprint {
  margin-top: clamp(2rem, 4vw, 3rem);
  font-family: var(--ff-body);
  font-size: 0.84rem;
  line-height: 1.65;
  color: var(--ink-mute);
  max-width: 74ch;
}
.hwr-fineprint a { color: var(--ink-soft); }

/* ---- Prose links ---- */
.hwr-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.hwr-link:hover { color: var(--accent-press); }

/* ============================================================
   Responsive
   ============================================================ */
@media (min-width: 620px) {
  .hwr-principles { grid-template-columns: 1fr 1fr; }
  .hwr-rubric { grid-template-columns: 1fr 1fr; }
  .hwr-sources { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .hwr-principles { grid-template-columns: repeat(3, 1fr); }
  .hwr-cols { grid-template-columns: 1.35fr 1fr; align-items: start; }
}

/* ============================================================
   Motion
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .hwr-rubric__fill {
    transform-origin: left;
    animation: hwr-grow 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  @keyframes hwr-grow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
}

/* ============ newsdesk: Guides and explainers ============ */
.nd{--nd-r:var(--r-lg)}

/* section head */
.nd-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-bottom:clamp(22px,3.4vw,34px)}
.nd-head__l{display:flex;flex-direction:column;gap:9px;min-width:0}
.nd-head__title{font-family:var(--ff-display);font-weight:500;letter-spacing:-.015em;line-height:1.05;font-size:clamp(1.7rem,4.4vw,2.6rem);color:var(--ink);margin:0}
.nd-head__more{display:inline-flex;align-items:center;gap:7px;font-family:var(--ff-label);font-weight:600;font-size:.9rem;color:var(--accent-press);white-space:nowrap;min-height:44px;padding-block:4px;transition:gap .18s ease,color .15s ease}
.nd-head__more svg{flex-shrink:0;transition:transform .2s ease}
.nd-head__more:hover{gap:11px;color:var(--accent-deep,var(--accent-press))}
.nd-head__more:hover svg{transform:translateX(3px)}
.nd-head__more:focus-visible{outline:2px solid var(--accent-press);outline-offset:3px;border-radius:var(--r-sm)}

/* grid */
.nd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,258px),1fr));gap:clamp(16px,2.4vw,24px)}

/* card */
.nd-card{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--nd-r);padding:clamp(20px,2.6vw,28px);box-shadow:var(--shadow-1);transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s ease,border-color .2s ease}
.nd-card::before{content:"";position:absolute;left:clamp(20px,2.6vw,28px);right:clamp(20px,2.6vw,28px);top:0;height:2px;border-radius:0 0 2px 2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.4,0,.2,1)}
.nd-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
.nd-card:hover::before{transform:scaleX(1)}

/* top row: icon chip + faint index numeral */
.nd-card__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.nd-card__chip{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border-radius:12px;background:var(--accent-tint);color:var(--accent-press);border:1px solid color-mix(in srgb,var(--accent) 16%,transparent);transition:background .2s ease,color .2s ease,transform .2s ease}
.nd-card__chip svg{display:block}
.nd-card:hover .nd-card__chip{background:var(--accent-press);color:#fff;transform:rotate(-4deg)}
.nd-card__no{font-family:var(--ff-display);font-weight:500;font-size:clamp(1.9rem,4vw,2.45rem);line-height:1;color:color-mix(in srgb,var(--ink) 13%,transparent);letter-spacing:-.02em;font-variant-numeric:tabular-nums;user-select:none}

/* text */
.nd-card__kicker{font-family:var(--ff-label);font-weight:600;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent-press);margin-bottom:9px}
.nd-card__title{font-family:var(--ff-display);font-weight:500;letter-spacing:-.012em;font-size:clamp(1.18rem,2.1vw,1.42rem);line-height:1.16;color:var(--ink);margin:0}
.nd-card__title a{color:inherit;text-decoration:none;transition:color .15s ease}
.nd-card__title a::after{content:"";position:absolute;inset:0;z-index:1}
.nd-card:hover .nd-card__title a{color:var(--accent-press)}
.nd-card__excerpt{margin:11px 0 0;font-family:var(--ff-body);font-size:.95rem;line-height:1.55;color:var(--ink-soft)}

/* read affordance */
.nd-card__read{margin-top:auto;padding-top:16px;display:inline-flex;align-items:center;gap:7px;font-family:var(--ff-label);font-weight:600;font-size:.86rem;color:var(--accent-press);border-top:1px solid var(--line);margin-top:20px}
.nd-card__read svg{flex-shrink:0;transition:transform .2s ease}
.nd-card:hover .nd-card__read svg{transform:translateX(4px)}

/* let read sit at the true bottom while keeping the hairline */
.nd-card__body-fill{flex:1 1 auto}

/* focus: ring the whole card via the stretched link */
.nd-card:has(.nd-card__title a:focus-visible){outline:2px solid var(--accent-press);outline-offset:3px;border-radius:var(--nd-r)}
.nd-card .nd-card__title a:focus-visible{outline:none}

@media (max-width:560px){
  .nd-card__chip{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){
  .nd-card,.nd-card::before,.nd-card__chip,.nd-card__read svg,.nd-head__more,.nd-head__more svg,.nd-card__title a{transition:none}
  .nd-card:hover{transform:none}
  .nd-card:hover::before{transform:scaleX(1)}
  .nd-card:hover .nd-card__chip{transform:none}
}

/* ============================================================
   Browse by category  (prefix: cg-)
   Richer, scannable category grid with per-slug accent hues.
   ============================================================ */
.cg{
  padding-block:clamp(2.75rem,6vw,4.75rem);
}
.cg-head{
  display:flex;
  flex-direction:column;
  gap:.55rem;
  max-width:60ch;
  margin-bottom:clamp(1.5rem,3.5vw,2.5rem);
}
.cg-head__eyebrow{
  font-family:var(--ff-label);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--accent);
  margin:0;
}
.cg-head__title{
  font-family:var(--ff-display);
  font-weight:600;
  font-size:clamp(1.7rem,3.4vw,2.5rem);
  line-height:1.08;
  letter-spacing:-.01em;
  color:var(--ink);
  margin:0;
}
.cg-head__lead{
  font-family:var(--ff-body);
  font-size:1rem;
  line-height:1.55;
  color:var(--ink-soft);
  margin:.15rem 0 0;
}

/* ---- grid ---- */
.cg-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:clamp(.75rem,1.6vw,1.1rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));
}

/* ---- tile ---- */
.cg-tile{
  --cg:var(--accent);
  --cg-tint:color-mix(in srgb,var(--cg) 12%,var(--surface));
  position:relative;
  display:flex;
  align-items:center;
  gap:.9rem;
  min-width:0;
  min-height:5.5rem;
  padding:1.05rem 1.15rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 1px 2px rgba(33,27,23,.04);
  text-decoration:none;
  overflow:hidden;
  isolation:isolate;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
/* soft hue wash that reveals on hover */
.cg-tile::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(135deg,color-mix(in srgb,var(--cg) 9%,transparent),transparent 62%);
  opacity:0;
  transition:opacity .18s ease;
}
/* top hairline accent in the category hue */
.cg-tile::after{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:var(--cg);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s ease;
}
.cg-tile:hover,
.cg-tile:focus-visible{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--cg) 40%,var(--line));
  box-shadow:0 12px 26px -14px color-mix(in srgb,var(--cg) 55%,transparent),0 2px 6px rgba(33,27,23,.06);
}
.cg-tile:hover::before,
.cg-tile:focus-visible::before{opacity:1}
.cg-tile:hover::after,
.cg-tile:focus-visible::after{transform:scaleX(1)}
.cg-tile:focus-visible{
  outline:2px solid var(--cg);
  outline-offset:3px;
}

/* ---- icon badge ---- */
.cg-tile__icon{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:2.9rem;
  height:2.9rem;
  border-radius:12px;
  color:var(--cg);
  background:var(--cg-tint);
  border:1px solid color-mix(in srgb,var(--cg) 22%,transparent);
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.cg-tile__icon svg{width:1.4rem;height:1.4rem;display:block}
.cg-tile:hover .cg-tile__icon,
.cg-tile:focus-visible .cg-tile__icon{
  background:var(--cg);
  color:var(--surface);
  border-color:var(--cg);
}

/* ---- text ---- */
.cg-tile__body{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:.15rem;
}
.cg-tile__name{
  margin:0;
  font-family:var(--ff-display);
  font-weight:600;
  font-size:1.12rem;
  line-height:1.15;
  color:var(--ink);
  overflow-wrap:break-word;
}
.cg-tile__count{
  font-family:var(--ff-label);
  font-size:.76rem;
  letter-spacing:.02em;
  color:var(--ink-mute);
}

/* ---- go arrow ---- */
.cg-tile__go{
  flex:0 0 auto;
  margin-left:auto;
  align-self:center;
  color:color-mix(in srgb,var(--cg) 70%,var(--ink-mute));
  opacity:0;
  transform:translateX(-4px);
  transition:opacity .18s ease,transform .18s ease;
}
.cg-tile__go svg{width:1.05rem;height:1.05rem;display:block}
.cg-tile:hover .cg-tile__go,
.cg-tile:focus-visible .cg-tile__go{opacity:1;transform:translateX(0)}

/* ---- 10 category hues ---- */
.cg--games{--cg:#6D54D4}
.cg--security{--cg:#1E9E72}
.cg--tools{--cg:#5A6472}
.cg--media{--cg:#1391A6}
.cg--finance{--cg:#C07A16}
.cg--social{--cg:#D24A7C}
.cg--entertainment{--cg:#9A45C6}
.cg--utilities{--cg:#3D6FB4}
.cg--education{--cg:#2C7C8C}
.cg--health{--cg:#2FA063}

@media (max-width:24rem){
  .cg-tile{padding:.95rem 1rem;gap:.75rem}
  .cg-tile__icon{width:2.6rem;height:2.6rem}
}

@media (prefers-reduced-motion:reduce){
  .cg-tile,
  .cg-tile::before,
  .cg-tile::after,
  .cg-tile__icon,
  .cg-tile__go{transition:none}
  .cg-tile:hover,
  .cg-tile:focus-visible{transform:none}
  .cg-tile__go{opacity:1;transform:none}
}
/* ===== design-pieces (ab/hwr/nd/cg) v1 END ===== */