/* ==========================================================================
   Techinfo Nepal — Design System (converted from the newdesign prototype)
   Single stylesheet built entirely from CSS custom properties (tokens).
   RULE: flat fills only. Every fill is solid or transparent.
   ========================================================================== */

/* ==== SELF-HOSTED FONTS (variable, latin subset, weights 300–700) ==== */
@font-face{font-family:"Inter";font-style:normal;font-weight:300 700;font-display:swap;src:url("../fonts/inter-latin.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url("../fonts/space-grotesk-latin.woff2") format("woff2")}

/* ==== TOKENS ==== */
:root{
  --deep-blue:#171717;
  --black:#0A0A0A;
  --yellow:#FFC72C;
  --white:#FFFFFF;
  --text-muted-dark:rgba(255,255,255,.55);
  --border-dark:rgba(255,255,255,.15);
  --ink:var(--black);
  --surface-primary:var(--white);
  --surface-secondary:var(--deep-blue);
  --surface-raised:var(--white);
  --panel:var(--deep-blue);            /* flat panel, no blur */
  --text-primary:var(--black);
  --text-secondary:rgba(10,10,10,.55);
  --text-muted:rgba(10,10,10,.55);
  --border:rgba(10,10,10,.12);
  --accent:var(--yellow);
  --accent-strong:var(--yellow);
  --accent-text:var(--black);
  --accent-soft:rgba(255,199,44,.16);
  --danger:var(--black);

  --shadow-sm:0 1px 2px rgba(10,10,10,.06), 0 2px 6px rgba(10,10,10,.05);
  --shadow-md:0 4px 10px rgba(10,10,10,.07), 0 10px 24px rgba(10,10,10,.07);
  --shadow-lg:0 10px 20px rgba(10,10,10,.09), 0 24px 48px rgba(10,10,10,.10);

  --radius-card:16px;
  --radius-btn:12px;
  --radius-pill:999px;

  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px;
  --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;

  --font-head:"Space Grotesk", system-ui, sans-serif;
  --font-body:"Inter", system-ui, sans-serif;

  --fs-100:1rem;     /* 16 */
  --fs-200:1.25rem;  /* 20 */
  --fs-300:1.5625rem;/* 25 */
  --fs-400:1.9375rem;/* 31 */
  --fs-500:2.4375rem;/* 39 */
  --fs-600:3.0625rem;/* 49 */
  --fs-50:.875rem;
  --fs-25:.75rem;

  --dur:200ms;
  --ease:cubic-bezier(.2,.7,.3,1);
  --maxw:1280px;

  color-scheme:light;
}

[data-theme="dark"]{
  --ink:var(--white);
  --surface-primary:var(--black);
  --surface-secondary:var(--deep-blue);
  --surface-raised:var(--deep-blue);
  --panel:var(--deep-blue);
  --text-primary:var(--white);
  --text-secondary:var(--text-muted-dark);
  --text-muted:var(--text-muted-dark);
  --border:var(--border-dark);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 4px 10px rgba(0,0,0,.45), 0 10px 24px rgba(0,0,0,.35);
  --shadow-lg:0 10px 20px rgba(0,0,0,.5), 0 24px 48px rgba(0,0,0,.4);

  color-scheme:dark;
}

/* ==== RESET / BASE ==== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}

html,body{
  background-color:var(--surface-primary);
  color:var(--text-primary);
  transition:background-color 250ms var(--ease), color 250ms var(--ease);
}
body{
  font-family:var(--font-body);
  font-size:var(--fs-100);
  line-height:1.6;
  font-weight:400;
  min-height:100vh;
}
h1,h2,h3,h4,h5{font-family:var(--font-head);font-weight:700;line-height:1.15;letter-spacing:-.015em}
a{color:inherit;text-decoration:none}
 :focus-visible{outline:2px solid var(--yellow);outline-offset:2px;border-radius:4px}
::selection{background:var(--accent);color:var(--accent-text)}

.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--s-4)}
@media(min-width:768px){.container{padding-inline:var(--s-5)}}
.section{padding-block:var(--s-7)}
@media(min-width:1024px){.section{padding-block:var(--s-8)}}
.visually-hidden,.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:var(--s-4);top:-64px;z-index:200;background:var(--accent);color:var(--accent-text);
  padding:var(--s-2) var(--s-4);border-radius:var(--radius-btn);transition:top var(--dur) var(--ease)}
.skip-link:focus{top:var(--s-4)}

/* ==== BUTTONS ==== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  font-family:var(--font-head);font-weight:600;font-size:var(--fs-50);
  padding:var(--s-3) var(--s-5);border-radius:var(--radius-btn);border:1px solid transparent;
  cursor:pointer;background:none;white-space:nowrap;text-align:center;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),transform 150ms var(--ease),box-shadow var(--dur) var(--ease)}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--accent);color:var(--accent-text)}
.btn--primary:hover{background:var(--accent-strong);box-shadow:var(--shadow-sm)}
.btn--secondary{border-color:var(--yellow);color:var(--black);background:var(--yellow);font-weight:700}
.btn--secondary:hover,.btn--secondary:focus-visible{border-color:var(--black);color:var(--yellow);background:var(--black)}
.btn--secondary:active,.btn--secondary.is-active,.btn--secondary[aria-pressed="true"]{border-color:var(--black);color:var(--yellow);background:var(--black);font-weight:700}
.btn--ghost{color:var(--text-secondary)}
.btn--ghost:hover{color:var(--accent)}
.btn--block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* ==== PILLS / BADGES ==== */
.pill{display:inline-flex;align-items:center;gap:var(--s-1);border-radius:var(--radius-pill);
  padding:var(--s-1) var(--s-3);font-size:var(--fs-25);font-weight:600;letter-spacing:.02em;
  background:var(--surface-secondary);color:var(--text-secondary);border:1px solid var(--border)}
.pill--accent{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}
.pill--soft{background:var(--accent-soft);color:var(--accent);border-color:transparent}

/* ==== PANEL / CARD SURFACES ==== */
.panel{--text-primary:var(--white);--text-secondary:var(--text-muted-dark);--text-muted:var(--text-muted-dark);--border:var(--border-dark);background:var(--panel);color:var(--white);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--s-5)}
.card{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--accent)}

/* ==== SECTION HEADING ==== */
.section-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s-4);
  margin-bottom:var(--s-5)}
.section-head__main{display:flex;min-width:0;align-items:center;gap:var(--s-3)}
.section-head__icon{width:40px;height:40px;flex-shrink:0;display:grid;place-items:center;color:var(--accent);
  background:var(--accent-soft);border-radius:var(--radius-btn)}
.section-head__icon svg{width:22px;height:22px}
.section-head__title{font-size:var(--fs-300);min-width:0}
.section-head__sub{font-size:var(--fs-50);color:var(--text-muted)}
.link-arrow{display:inline-flex;align-items:center;gap:var(--s-2);font-weight:600;font-size:var(--fs-50);color:var(--accent);white-space:nowrap}
.link-arrow svg{width:16px;height:16px;transition:transform var(--dur) var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}

/* ==== HEADER ==== */
.site-header{--text-secondary:var(--text-muted-dark);--border:var(--border-dark);position:sticky;top:0;z-index:100;background:rgba(255,255,255,.68);color:var(--black);
  border-bottom:1px solid rgba(10,10,10,.12);box-shadow:0 2px 12px rgba(10,10,10,.08);transition:box-shadow 250ms var(--ease),background-color 250ms var(--ease),border-color 250ms var(--ease)}
.site-header__inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s-4);
  height:72px}
.site-header.is-condensed{background:rgba(255,255,255,.84);box-shadow:0 4px 16px rgba(10,10,10,.14)}
.logo{display:flex;align-items:center;gap:var(--s-2);font-family:var(--font-head);font-weight:700;font-size:var(--fs-200);min-width:0}
.logo__mark{width:32px;height:32px;flex-shrink:0;border-radius:10px;background:var(--yellow);color:var(--black);
  display:grid;place-items:center;font-size:var(--fs-50)}
.logo__text{white-space:nowrap}
.logo__text span{color:var(--accent)}
.nav{display:none}
@media(min-width:1024px){.nav{display:flex;justify-content:center;gap:var(--s-2)}}
.nav__link{padding:var(--s-2) var(--s-3);border-radius:var(--radius-pill);font-size:var(--fs-50);font-weight:500;
  color:var(--black);transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.nav__link:hover{color:var(--yellow);background:rgba(255,255,255,.08);box-shadow:inset 2px 2px 5px rgba(10,10,10,.12),inset -2px -2px 5px rgba(255,255,255,.08)}
.nav__link.is-active{color:var(--accent-text);background:var(--accent)}
[data-theme="dark"] .nav__link{color:var(--white)}
[data-theme="dark"] .site-header{background:rgba(10,10,10,.72);border-bottom-color:rgba(255,255,255,.16);color:var(--white)}
[data-theme="dark"] .site-header.is-condensed{background:rgba(10,10,10,.88)}
.header-actions{display:flex;align-items:center;gap:var(--s-2)}
.icon-btn{width:40px;height:40px;flex-shrink:0;display:grid;place-items:center;border-radius:var(--radius-btn);
  border:1px solid transparent;background:none;color:var(--text-secondary);cursor:pointer;
  transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.icon-btn:hover{color:var(--accent);background:var(--accent-soft)}
.icon-btn svg{width:20px;height:20px}
.icon-btn--outline{border-color:var(--border)}
@media(min-width:1024px){.hamburger{display:none}}

/* theme toggle sun<->moon morph */
.theme-toggle{width:58px;height:32px;padding:3px;border:1px solid rgba(10,10,10,.16);border-radius:var(--radius-pill);background:rgba(255,255,255,.52);color:var(--black);cursor:pointer;box-shadow:inset 2px 2px 5px rgba(10,10,10,.1),inset -2px -2px 5px rgba(255,255,255,.8);transition:background-color 250ms var(--ease),box-shadow 250ms var(--ease),border-color 250ms var(--ease),color 250ms var(--ease)}
.theme-toggle:hover,.theme-toggle:focus-visible{border-color:var(--yellow);box-shadow:inset 2px 2px 5px rgba(10,10,10,.18),inset -2px -2px 5px rgba(255,255,255,.1)}
.theme-toggle__track{position:relative;display:block;width:100%;height:100%}
.theme-toggle__thumb{position:absolute;top:0;left:0;width:24px;height:24px;border-radius:50%;background:var(--yellow);box-shadow:3px 3px 7px rgba(10,10,10,.22),-2px -2px 5px rgba(255,255,255,.2);will-change:transform;transition:transform 280ms cubic-bezier(.2,.8,.2,1),background-color 250ms var(--ease)}
.theme-toggle__icon{position:absolute;top:4px;width:16px;height:16px;display:grid;place-items:center;color:var(--black);opacity:.7;transition:color 250ms var(--ease),opacity 250ms var(--ease),transform 280ms var(--ease)}
.theme-toggle__icon svg{width:14px;height:14px}
.theme-toggle__icon--sun{left:4px}.theme-toggle__icon--moon{right:4px}
[data-theme="dark"] .theme-toggle__thumb{transform:translateX(24px)}
[data-theme="light"] .site-header{color:var(--black);background:rgba(255,255,255,.78);border-bottom-color:rgba(10,10,10,.12);box-shadow:8px 8px 18px rgba(10,10,10,.1),-6px -6px 18px rgba(255,255,255,.9)}
[data-theme="light"] .site-header{--text-secondary:rgba(10,10,10,.55);--border:rgba(10,10,10,.12)}
[data-theme="light"] .theme-toggle{border-color:rgba(10,10,10,.12);background:rgba(255,255,255,.7);color:var(--black);box-shadow:inset 2px 2px 5px rgba(10,10,10,.12),inset -2px -2px 5px rgba(255,255,255,.9)}
[data-theme="light"] .theme-toggle__icon{color:var(--black)}
[data-theme="dark"] .theme-toggle{background:rgba(10,10,10,.52);border-color:rgba(255,255,255,.18);color:var(--white)}
[data-theme="dark"] .theme-toggle__icon{color:var(--white)}

/* ==== SEARCH OVERLAY ==== */
.search-overlay{position:fixed;inset:0;z-index:150;background:var(--surface-primary);display:grid;place-items:start center;
  padding-top:18vh;opacity:0;visibility:hidden;transform:scale(.98);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur)}
.search-overlay.is-open{opacity:1;visibility:visible;transform:none}
.search-overlay__box{width:min(720px,92vw)}
.search-overlay__field{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s-3);
  border:1px solid var(--border);background:var(--surface-secondary);border-radius:var(--radius-btn);padding:var(--s-3) var(--s-4)}
.search-overlay__field input{border:0;background:none;outline:none;font-size:var(--fs-200);width:100%}
.search-overlay__hint{margin-top:var(--s-3);font-size:var(--fs-50);color:var(--text-muted)}

/* ==== MOBILE PANEL ==== */
.mobile-panel{--text-secondary:var(--text-muted-dark);--border:var(--border-dark);position:fixed;inset:0 0 0 auto;width:min(320px,86vw);z-index:160;background:var(--deep-blue);color:var(--white);
  border-left:1px solid var(--border);padding:var(--s-5);transform:translateX(100%);
  transition:transform 250ms var(--ease);display:flex;flex-direction:column;gap:var(--s-4)}
.mobile-panel.is-open{transform:none}
.mobile-panel__link{padding:var(--s-3);border-radius:var(--radius-btn);font-family:var(--font-head);font-weight:600}
.mobile-panel__link:hover,.mobile-panel__link.is-active{background:var(--accent);color:var(--accent-text)}
.scrim{position:fixed;inset:0;z-index:155;background:rgba(10,10,10,.5);opacity:0;visibility:hidden;transition:opacity var(--dur)}
.scrim.is-open{opacity:1;visibility:visible}

/* ==== HERO ==== */
.hero{display:grid;gap:var(--s-5);grid-template-columns:1fr}
@media(min-width:1024px){.hero{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--s-6)}}
.hero-post{border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;background:var(--surface-raised)}
.hero-post__media{aspect-ratio:16/9;background:var(--surface-secondary)}
.hero-post__media img{width:100%;height:100%;object-fit:cover}
.hero-post__body{padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-3)}
.hero-post__title{font-size:var(--fs-400)}
@media(min-width:1024px){.hero-post__title{font-size:var(--fs-500)}}
.hero-post__excerpt{color:var(--text-secondary)}

/* ==== DEVICE FINDER ==== */
.finder{display:flex;flex-direction:column;gap:var(--s-4)}
.finder__icon{width:88px;height:88px;display:grid;place-items:center;border-radius:var(--radius-card);
  background:var(--accent-soft)}
.finder__icon img{width:64px;height:64px}
.field{display:flex;flex-direction:column;gap:var(--s-2)}
.field__label{font-size:var(--fs-25);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.input,.select{width:100%;padding:var(--s-3) var(--s-4);border-radius:var(--radius-btn);
  border:1px solid var(--border);background:var(--surface-raised);color:var(--text-primary);
  transition:border-color var(--dur) var(--ease)}
.input:hover,.select:hover{border-color:var(--accent)}
textarea.input{min-height:120px;resize:vertical}

/* ==== IDLE ANIMATIONS (max 2–3 focal elements per page) ==== */
@keyframes float-idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes pulse-idle{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.anim-float{animation:float-idle 3s var(--ease) infinite}
.anim-pulse{animation:pulse-idle 3s var(--ease) infinite}

/* ==== SCROLL REVEAL ==== */
.reveal{opacity:0;transform:translateY(10px);
  transition:opacity 250ms var(--ease),transform 250ms var(--ease);
  transition-delay:calc(var(--i,0) * 40ms)}
.reveal.is-visible{opacity:1;transform:none}

/* ==== ARTICLE CARD ==== */
.article-card{display:flex;flex-direction:column}
.article-card__media{aspect-ratio:16/10;background:var(--surface-secondary);position:relative}
.article-card__media img{width:100%;height:100%;object-fit:cover}
.article-card__media{height:220px;overflow:hidden}
@media(max-width:639px){.article-card__media{height:auto;aspect-ratio:16/10}}
.article-card__pills{position:absolute;left:var(--s-3);top:var(--s-3);display:flex;gap:var(--s-2);flex-wrap:wrap}
.article-card__body{padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-3);flex:1}
.article-card__title{font-size:var(--fs-200)}
.article-card__excerpt{font-size:var(--fs-50);color:var(--text-secondary)}
.article-card__meta{display:flex;align-items:center;gap:var(--s-2);font-size:var(--fs-25);color:var(--text-muted);
  margin-top:auto;flex-wrap:wrap}
.avatar{width:28px;height:28px;border-radius:var(--radius-pill);background:var(--surface-secondary);flex-shrink:0;object-fit:cover}
/* list variant, activated by .articles--list on the container */
.articles{display:grid;gap:var(--s-4);grid-template-columns:1fr}
@media(min-width:640px){.articles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1280px){.articles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.articles--list{grid-template-columns:1fr!important}
.articles--list .article-card{display:grid;grid-template-columns:1fr}
@media(min-width:640px){
  .articles--list .article-card{grid-template-columns:220px minmax(0,1fr)}
  .articles--list .article-card__media{aspect-ratio:1/1;height:100%}
}
.is-hidden-batch{display:none}

/* ==== DEVICE CARD ==== */
.device-card{padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-3);text-align:left}
.device-card__media{aspect-ratio:4/5;background:var(--surface-secondary);border-radius:var(--radius-btn);overflow:hidden}
.device-card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur) var(--ease)}
.device-card:hover .device-card__media img{transform:scale(1.04)}
.device-card__name{font-size:var(--fs-100);font-family:var(--font-head);font-weight:600}
.device-card__specs{font-size:var(--fs-25);color:var(--text-muted)}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);gap:var(--s-4);
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--s-3);scrollbar-width:thin}
.rail>*{scroll-snap-align:start}
@media(min-width:1024px){.rail{grid-auto-columns:minmax(220px,1fr)}}
.device-grid{display:grid;gap:var(--s-4);grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:768px){.device-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1280px){.device-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ==== RANKED LIST ==== */
.rank-row{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:var(--s-3);
  padding:var(--s-3) 0;border-bottom:1px solid var(--border)}
.rank-row:last-child{border-bottom:0}
.rank-row__num{font-family:var(--font-head);font-weight:700;font-size:var(--fs-200);color:var(--accent);width:28px;text-align:center}
.rank-row__thumb{width:44px;height:44px;border-radius:var(--radius-btn);object-fit:cover;background:var(--surface-secondary);flex-shrink:0}
.rank-row__name{font-size:var(--fs-50);font-weight:500;min-width:0}
.rank-row__stat{font-family:var(--font-head);font-weight:600;font-size:var(--fs-50);color:var(--text-secondary);white-space:nowrap}

/* ==== LAYOUT WITH SIDEBAR ==== */
.with-sidebar{display:grid;gap:var(--s-6);grid-template-columns:1fr}
@media(min-width:1024px){.with-sidebar{grid-template-columns:minmax(0,1fr) 320px}}
.sidebar{display:flex;flex-direction:column;gap:var(--s-5)}
.view-toggle{display:inline-flex;gap:var(--s-1);padding:var(--s-1);border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface-secondary)}
.view-toggle button{border:0;background:none;border-radius:var(--radius-pill);padding:var(--s-2) var(--s-3);cursor:pointer;color:var(--text-secondary);
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.view-toggle button[aria-pressed="true"]{background:var(--accent);color:var(--accent-text)}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);justify-content:space-between;margin-bottom:var(--s-5)}
.filter-pills{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.filter-pills .pill{cursor:pointer}
.filter-pills .pill:hover{border-color:var(--accent);color:var(--accent)}
.filter-pills .pill{background:var(--yellow);border-color:var(--yellow);color:var(--black);font-weight:700}
.filter-pills .pill.is-active,.filter-pills .pill[aria-pressed="true"]{background:var(--black);border-color:var(--black);color:var(--yellow);font-weight:700}

/* ==== CTA CARDS ==== */
.cta-grid{display:grid;gap:var(--s-4);grid-template-columns:1fr}
@media(min-width:768px){.cta-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cta-card{display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-6);
  background:var(--surface-secondary);border:1px solid var(--border);border-radius:var(--radius-card)}
.cta-card__icon{width:96px;height:96px;display:grid;place-items:center;background:var(--surface-raised);
  border:1px solid var(--border);border-radius:var(--radius-card)}
.cta-card__icon img{width:64px;height:64px}
.cta-card h3{font-size:var(--fs-300)}
.cta-card p{color:var(--text-secondary)}

/* ==== PAGE HEAD ==== */
.page-head{padding-block:var(--s-6) var(--s-5);border-bottom:1px solid var(--border)}
.page-head h1{font-size:var(--fs-500)}
.page-head p{color:var(--text-secondary);max-width:60ch;margin-top:var(--s-3)}
.breadcrumb{font-size:var(--fs-25);color:var(--text-muted);margin-bottom:var(--s-3)}

/* ==== PAGINATION ==== */
.pagination{display:flex;flex-wrap:wrap;gap:var(--s-2);justify-content:center;margin-top:var(--s-6)}
.pagination a,.pagination span,.pagination .page-numbers{min-width:40px;height:40px;display:grid;place-items:center;padding-inline:var(--s-3);
  border:1px solid var(--border);border-radius:var(--radius-btn);font-size:var(--fs-50);
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.pagination a:hover{border-color:var(--accent);color:var(--accent)}
.pagination .is-active,.pagination .current{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:var(--s-2);justify-content:center}

/* ==== ARTICLE BODY ==== */
.article-hero{aspect-ratio:21/9;background:var(--surface-secondary);border-radius:var(--radius-card);overflow:hidden}
.article-hero img{width:100%;height:100%;object-fit:cover}
.prose{max-width:72ch;font-size:var(--fs-100)}
.prose>*+*{margin-top:var(--s-4)}
.prose h2{font-size:var(--fs-400);margin-top:var(--s-6)}
.prose h3{font-size:var(--fs-300);margin-top:var(--s-5)}
.prose p{color:var(--text-secondary)}
.prose ul{list-style:disc;padding-left:var(--s-5);color:var(--text-secondary)}
.prose blockquote{border-left:4px solid var(--accent);padding:var(--s-3) var(--s-4);background:var(--surface-secondary);
  border-radius:0 var(--radius-btn) var(--radius-btn) 0;font-size:var(--fs-200);font-family:var(--font-head)}
.prose figure img{border-radius:var(--radius-card);width:100%}
.prose figcaption{font-size:var(--fs-25);color:var(--text-muted);margin-top:var(--s-2)}
.prose pre{background:var(--black);color:var(--white);padding:var(--s-4);border-radius:var(--radius-card);overflow-x:auto;font-size:var(--fs-50)}
.meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);color:var(--text-muted);font-size:var(--fs-50)}
.meta-row__item{display:inline-flex;align-items:center;gap:var(--s-1)}
.share-row{display:flex;gap:var(--s-2)}

/* ==== COMMENTS ==== */
.comment{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-3);padding-block:var(--s-4);border-bottom:1px solid var(--border)}
.comment__name{font-family:var(--font-head);font-weight:600}
.comment__date{font-size:var(--fs-25);color:var(--text-muted)}
.form-grid{display:grid;gap:var(--s-4);grid-template-columns:1fr}
@media(min-width:640px){.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid .form-grid__full{grid-column:1/-1}}

/* ==== BRAND GRID ==== */
.brand-grid{display:grid;gap:var(--s-3);grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:640px){.brand-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1024px){.brand-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.brand-tile{padding:var(--s-4);text-align:center;border:1px solid var(--border);border-radius:var(--radius-btn);
  background:var(--surface-raised);font-family:var(--font-head);font-weight:600;font-size:var(--fs-50);
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.brand-tile:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-4px)}
.brand-tile small{display:block;color:var(--text-muted);font-weight:400}

/* ==== PHONE FINDER (A-Z filter) ==== */
.alphabet{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--s-4)}
.alphabet__item{min-width:38px;height:38px;padding:0 var(--s-2);display:grid;place-items:center;
  border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface-raised);
  color:var(--text-secondary);font-family:var(--font-head);font-weight:600;font-size:var(--fs-25);cursor:pointer;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.alphabet__item:hover{border-color:var(--accent);color:var(--accent)}
.alphabet__item.is-active{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}
.finder-search{display:block}
.finder-search input{width:100%;max-width:260px;padding:var(--s-2) var(--s-3);border:1px solid var(--border);
  border-radius:var(--radius-pill);background:var(--surface-raised);color:var(--text-primary);
  transition:border-color var(--dur) var(--ease)}
.finder-search input:focus{outline:none;border-color:var(--accent)}

/* ==== HERO PHONE FINDER WIDGET ==== */
.phone-finder-widget{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--radius-card);background:var(--white);box-shadow:var(--shadow-md)}
.phone-finder-widget__header{display:flex;align-items:center;justify-content:center;gap:var(--s-2);padding:var(--s-4);background:var(--deep-blue);color:var(--white)}
.phone-finder-widget__header h2{font-size:var(--fs-50);letter-spacing:.14em;text-transform:uppercase}
.phone-finder-widget__search{width:20px;height:20px;animation:finder-search-pulse 700ms var(--ease) both}
@keyframes finder-search-pulse{0%{transform:scale(.8);opacity:.45}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.phone-finder-widget__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid rgba(10,10,10,.12);border-top:0}
@media(min-width:640px){.phone-finder-widget__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.phone-finder-widget__brand{position:relative;min-height:42px;padding:var(--s-2);border:0;border-right:1px solid rgba(10,10,10,.12);border-bottom:1px solid rgba(10,10,10,.12);background:var(--white);color:var(--black);font-size:var(--fs-25);cursor:pointer;transition:color 150ms ease-out}
.phone-finder-widget__brand:nth-child(8n+2),.phone-finder-widget__brand:nth-child(8n+4),.phone-finder-widget__brand:nth-child(8n+5),.phone-finder-widget__brand:nth-child(8n+7){background:rgba(18,36,74,.04)}
.phone-finder-widget__brand:hover,.phone-finder-widget__brand:focus-visible{color:var(--yellow)}
.phone-finder-widget__brand.is-selected{color:var(--black);font-weight:700}
.phone-finder-widget__brand.is-selected::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;background:var(--yellow)}
.phone-finder-widget__footer{display:grid;grid-template-columns:1fr 1fr;background:var(--black);color:var(--white)}
.phone-finder-widget__footer button{padding:var(--s-3) var(--s-2);border:0;border-right:1px solid var(--border-dark);background:none;color:inherit;font-size:var(--fs-25);font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:color 150ms ease-out,text-decoration-color 150ms ease-out}
.phone-finder-widget__footer button:last-child{border-right:0}
.phone-finder-widget__footer button:hover,.phone-finder-widget__footer button:focus-visible{color:var(--yellow);text-decoration:underline;text-underline-offset:3px}
@media(max-width:639px){.phone-finder-widget__brand{min-height:40px}}

/* ==== DEVICE HEADER BAND / SPECS ==== */
.device-band{background:var(--surface-secondary);border-bottom:1px solid var(--border);padding-block:var(--s-6)}
.device-band__inner{display:grid;gap:var(--s-5);grid-template-columns:1fr}
@media(min-width:768px){.device-band__inner{grid-template-columns:220px minmax(0,1fr);align-items:center}}
.device-band__media{aspect-ratio:4/5;max-width:220px;background:var(--surface-raised);border:1px solid var(--border);
  border-radius:var(--radius-card);overflow:hidden}
.quick-stats{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-block:var(--s-4)}
.spec-group{border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;margin-bottom:var(--s-4);background:var(--surface-raised)}
.spec-group__head{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s-3);
  padding:var(--s-3) var(--s-4);background:var(--surface-secondary);border:0;cursor:pointer;text-align:left;
  font-family:var(--font-head);font-weight:600}
.spec-group__head svg{width:18px;height:18px;transition:transform var(--dur) var(--ease)}
.spec-group[aria-expanded="false"] .spec-group__body,.spec-group.is-collapsed .spec-group__body{display:none}
.spec-group.is-collapsed .spec-group__head svg{transform:rotate(-90deg)}
.spec-table{width:100%;border-collapse:collapse;font-size:var(--fs-50)}
.spec-table th,.spec-table td{text-align:left;padding:var(--s-3) var(--s-4);vertical-align:top}
.spec-table th{width:34%;color:var(--text-muted);font-weight:500}
.spec-table tr:nth-child(even){background:var(--surface-secondary)}

/* ==== TABS ==== */
.tabs{border-bottom:1px solid var(--border);position:relative;display:flex;gap:var(--s-2);overflow-x:auto}
.tabs__btn{border:0;background:none;padding:var(--s-3) var(--s-4);cursor:pointer;color:var(--text-secondary);
  font-family:var(--font-head);font-weight:600;white-space:nowrap;transition:color var(--dur) var(--ease)}
.tabs__btn[aria-selected="true"]{color:var(--accent)}
.tabs__indicator{position:absolute;bottom:-1px;left:0;height:2px;background:var(--accent);
  transition:transform var(--dur) var(--ease),width var(--dur) var(--ease)}
.tabpanel[hidden]{display:none}

/* ==== COMPARE ==== */
.compare-grid{display:grid;gap:var(--s-4);grid-template-columns:1fr}
@media(min-width:768px){.compare-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.compare-col{padding:var(--s-4);background:var(--surface-secondary);border:1px solid var(--border);border-radius:var(--radius-card);
  display:flex;flex-direction:column;gap:var(--s-3)}
.compare-sticky{position:sticky;top:72px;z-index:20;background:var(--surface-primary);padding-block:var(--s-3)}
.switch{display:inline-flex;align-items:center;gap:var(--s-3);cursor:pointer;font-size:var(--fs-50);font-weight:500}
.switch__track{width:48px;height:28px;border-radius:var(--radius-pill);background:var(--surface-secondary);
  border:1px solid var(--border);position:relative;transition:background-color var(--dur) var(--ease)}
.switch__thumb{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:var(--radius-pill);
  background:var(--text-muted);transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch input:checked+.switch__track{background:var(--accent);border-color:var(--accent)}
.switch input:checked+.switch__track .switch__thumb{transform:translateX(20px);background:var(--accent-text)}
.switch input:focus-visible+.switch__track{outline:2px solid var(--accent);outline-offset:2px}
.compare-table{width:100%;border-collapse:collapse;font-size:var(--fs-50)}
.compare-table th,.compare-table td{padding:var(--s-3) var(--s-4);text-align:left;border-bottom:1px solid var(--border)}
.compare-table tbody tr:nth-child(even){background:var(--surface-secondary)}
.compare--diff-only tr[data-diff="false"]{display:none}

/* ==== EVENTS ==== */
.event-grid{display:grid;gap:var(--s-4);grid-template-columns:1fr}
@media(min-width:640px){.event-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.event-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.event-card{padding:var(--s-4);display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-4)}
.date-badge{width:64px;flex-shrink:0;border-radius:var(--radius-btn);background:var(--accent);color:var(--accent-text);
  text-align:center;padding:var(--s-2);font-family:var(--font-head)}
.date-badge strong{display:block;font-size:var(--fs-300);line-height:1}
.date-badge span{font-size:var(--fs-25);text-transform:uppercase;letter-spacing:.08em}
.events--list .event-grid{grid-template-columns:1fr}

/* ==== EXPLORE MASONRY ==== */
.masonry{columns:1;column-gap:var(--s-4)}
@media(min-width:640px){.masonry{columns:2}}
@media(min-width:1024px){.masonry{columns:3}}
.masonry>*{break-inside:avoid;margin-bottom:var(--s-4)}
.tile{padding:var(--s-5);background:var(--surface-secondary);border:1px solid var(--border);border-radius:var(--radius-card)}
.tile h3{font-size:var(--fs-200)}
.tile p{color:var(--text-secondary);font-size:var(--fs-50);margin-top:var(--s-2)}

/* ==== EMPTY STATE / 404 ==== */
.empty{text-align:center;max-width:520px;margin-inline:auto;padding-block:var(--s-8);display:flex;flex-direction:column;
  align-items:center;gap:var(--s-4)}
.empty__art{width:160px;height:160px;display:grid;place-items:center;border-radius:var(--radius-card);background:var(--surface-secondary);border:1px solid var(--border)}
.empty__art img{width:112px;height:112px}
.error-code{font-family:var(--font-head);font-size:var(--fs-600);color:var(--accent);line-height:1}
.search-big{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-3)}

/* ==== FOOTER ==== */
.site-footer{--text-secondary:rgba(255,255,255,.72);--text-muted:rgba(255,255,255,.55);--border:rgba(255,255,255,.18);background:var(--black);color:var(--white);border-top:2px solid var(--yellow);margin-top:var(--s-8);padding-block:var(--s-7)}
.footer-grid{display:grid;gap:var(--s-6);grid-template-columns:1fr}
@media(min-width:768px){.footer-grid{grid-template-columns:2fr 1fr 1fr 2fr}}
.footer-col h4{font-size:var(--fs-100);margin-bottom:var(--s-3)}
.footer-col li+li{margin-top:var(--s-2)}
.footer-col a{color:var(--text-secondary);font-size:var(--fs-50);transition:color var(--dur) var(--ease)}
.footer-col a:hover{color:var(--yellow)}
.social{display:flex;gap:var(--s-2);margin-top:var(--s-4)}
.social a{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--border);border-radius:var(--radius-btn);
  color:var(--text-secondary);transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.social a:hover{color:var(--yellow);border-color:var(--yellow)}
.newsletter{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-2);margin-top:var(--s-3)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:space-between;align-items:center;
  margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--border);font-size:var(--fs-25);color:var(--text-muted)}

/* ==== REDUCED MOTION ==== */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .anim-float,.anim-pulse{animation:none}
  .reveal{opacity:1;transform:none;transition-delay:0ms!important}
  *,*::before,*::after{transition-duration:120ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}
  .card:hover{transform:none}
}

/* Keep the home page on the black, white and yellow palette. */
.home .phone-finder-widget__brand:nth-child(8n+2),.home .phone-finder-widget__brand:nth-child(8n+4),.home .phone-finder-widget__brand:nth-child(8n+5),.home .phone-finder-widget__brand:nth-child(8n+7){background:rgba(10,10,10,.04)}

.home .cta-card{background:var(--black);border-color:rgba(255,255,255,.16);color:var(--white)}
.home .cta-card h3{color:var(--white)}
.home .cta-card p{color:rgba(255,255,255,.72)}
.site-header.is-condensed{background:rgba(18,36,74,.72);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border-bottom-color:rgba(255,255,255,.08)}
.latest-devices-widget{min-width:0;padding:var(--s-4);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-card);background:rgba(18,36,74,.55);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--shadow-md);color:var(--white)}.latest-devices-widget>header{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-3)}.latest-devices-widget h2{font-size:var(--fs-200)}.latest-devices-widget__icon{color:var(--yellow);animation:float-idle 3s var(--ease) infinite}.latest-devices-widget__grid{display:grid;gap:var(--s-2)}.latest-device-mini{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:var(--s-2);padding:6px;border-radius:var(--radius-btn);transition:transform 150ms var(--ease),background-color 150ms var(--ease)}.latest-device-mini:hover{transform:translateX(4px);background:rgba(255,255,255,.1)}.latest-device-mini__image{width:42px;height:50px;overflow:hidden;background:rgba(255,255,255,.1);border-radius:8px}.latest-device-mini__image img{width:100%;height:100%;object-fit:cover;transition:transform 400ms var(--ease)}.latest-device-mini:hover img{transform:scale(1.03)}.latest-device-mini strong,.latest-device-mini small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.latest-device-mini strong{font-size:var(--fs-50)}.latest-device-mini small{color:rgba(255,255,255,.65);font-size:var(--fs-25)}.latest-device-mini em{background:var(--yellow);color:var(--black);padding:3px 5px;border-radius:6px;font-size:10px;font-style:normal;font-weight:700;white-space:nowrap}.latest-devices-widget__link{display:block;margin-top:var(--s-3);color:var(--yellow);font-size:var(--fs-50);font-weight:700}.latest-devices-widget__link span{display:inline-block;transition:transform 150ms var(--ease)}.latest-devices-widget__link:hover span{transform:translateX(4px)}
.home .hero-post__media{overflow:hidden}.home .hero-post__media img{will-change:transform;transition:transform 300ms var(--ease)}.grain-layer{position:fixed;inset:0;z-index:250;pointer-events:none;opacity:.04;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media(prefers-reduced-motion:reduce){.latest-devices-widget__icon{animation:none}.home .hero-post__media img{transition:none}}
@media(max-width:767px){.latest-devices-widget{backdrop-filter:none;-webkit-backdrop-filter:none}.grain-layer{opacity:.03}}

/* ==== WEB STORIES ==== */
.web-stories{padding-block:16px;background:var(--white)}.web-stories__track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 10px;scrollbar-width:thin}.web-story{flex:0 0 78px;border:0;background:none;color:var(--black);cursor:pointer;padding:0;text-align:center;scroll-snap-align:start}.web-story__ring{display:block;width:70px;height:70px;padding:3px;border:3px solid var(--yellow);border-radius:50%;margin:auto;transition:transform 150ms var(--ease),border-color 150ms var(--ease)}.web-story:hover .web-story__ring{transform:scale(1.06)}.web-story img{width:100%;height:100%;border-radius:50%;object-fit:cover}.web-story strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:5px;font-size:11px}.web-story-viewer{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:rgba(10,10,10,.86);opacity:1;transition:opacity 220ms var(--ease)}.web-story-viewer[hidden]{display:none}.web-story-viewer__box{position:relative;width:min(92vw,420px);height:min(92vh,747px);overflow:hidden;background:var(--black);box-shadow:var(--shadow-lg)}.web-story-viewer__progress{position:absolute;z-index:3;top:12px;left:12px;right:12px;display:flex;gap:4px}.web-story-viewer__progress span{height:3px;flex:1;background:rgba(255,255,255,.3);overflow:hidden}.web-story-viewer__progress i{display:block;height:100%;width:0;background:var(--yellow)}.web-story-viewer__slide{height:100%;color:var(--white)}.web-story-viewer__slide img,.web-story-viewer__slide video{width:100%;height:100%;object-fit:cover}.web-story-viewer__caption{position:absolute;left:0;right:0;bottom:0;padding:48px 20px 24px;background:rgba(10,10,10,.4);color:var(--white)}.web-story-viewer__caption a{display:inline-block;margin-top:10px;padding:8px 14px;background:var(--yellow);color:var(--black);font-weight:700}.web-story-viewer__close{position:absolute;z-index:4;top:22px;right:14px;width:36px;height:36px;border:0;background:none;color:var(--white);font-size:30px;cursor:pointer}.web-story-viewer__prev,.web-story-viewer__next{position:absolute;z-index:2;top:0;bottom:0;width:50%;border:0;background:none;cursor:pointer}.web-story-viewer__prev{left:0}.web-story-viewer__next{right:0}
@media(max-width:767px){.web-story-viewer__box{width:100vw;height:100vh}.web-stories__track{padding-inline:4px}}

/* ==== LIVE SINGLE DEVICE PAGE ==== */
.single-device-page{background:var(--white);color:var(--black);padding-bottom:var(--s-7)}
.single-device-page .device-hero{background:var(--deep-blue);color:var(--white);border-radius:0 0 var(--radius-card) var(--radius-card)}
.single-device-page .device-hero__inner{display:grid;grid-template-columns:180px minmax(0,1fr);gap:var(--s-5);padding-block:var(--s-6) var(--s-4)}
.single-device-page .device-hero__product{display:flex;flex-direction:column;align-items:center;gap:var(--s-2);color:rgba(255,255,255,.7);font-size:var(--fs-25);text-align:center}.device-hero__image{width:150px;height:190px;object-fit:contain;filter:drop-shadow(0 12px 12px rgba(0,0,0,.28))}
.single-device-page .device-hero__top{display:flex;justify-content:space-between;gap:var(--s-4)}.single-device-page .device-hero h1{font-size:clamp(2rem,5vw,3.75rem);color:var(--white)}.single-device-page .device-kicker{color:var(--yellow);font-size:var(--fs-25);font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:var(--s-2)}
.device-share{width:42px;height:42px;border:1px solid rgba(255,255,255,.7);border-radius:var(--radius-btn);background:none;color:var(--white);cursor:pointer}.device-share:hover{color:var(--yellow);border-color:var(--yellow)}
.single-device-page .device-meta{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);margin-block:var(--s-4);color:rgba(255,255,255,.78);font-size:var(--fs-50)}.device-meta span{display:grid;grid-template-columns:auto auto;gap:var(--s-2)}.device-meta b{color:var(--yellow);font-size:var(--fs-25);letter-spacing:.08em}
.device-hero__actions{display:flex;flex-wrap:wrap;gap:var(--s-2)}.stat-pill{display:inline-flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-3);border:1px solid var(--yellow);border-radius:var(--radius-pill);background:none;color:var(--white);font-size:var(--fs-25);font-weight:700;cursor:pointer}.stat-pill small{font-size:inherit;color:var(--white)}.stat-pill span{color:var(--yellow)}.fan-button.is-active{background:var(--yellow);color:var(--black)}.fan-button.is-active small{color:var(--black)}
.single-device-page .quick-specs{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.25);padding-top:var(--s-4)}.quick-specs>div{display:grid;grid-template-columns:auto 1fr;column-gap:var(--s-2);align-items:center;border-right:1px solid rgba(255,255,255,.25);padding-inline:var(--s-4)}.quick-specs>div:last-child{border:0}.quick-specs>div>span{grid-row:span 2;color:var(--yellow);font-size:1.35rem}.quick-specs strong{font-family:var(--font-head);font-size:var(--fs-200)}.quick-specs small{color:rgba(255,255,255,.6);font-size:var(--fs-25);letter-spacing:.08em}
.device-tabs-wrap{position:sticky;top:0;z-index:40;background:var(--black);box-shadow:var(--shadow-md)}.device-tabs{display:flex;overflow-x:auto;position:relative;scrollbar-width:none}.device-tabs::-webkit-scrollbar{display:none}.device-tab{min-width:130px;padding:var(--s-4);border:0;background:none;color:rgba(255,255,255,.65);font-family:var(--font-head);font-weight:700;cursor:pointer;white-space:nowrap}.device-tab:hover,.device-tab[aria-selected="true"]{color:var(--yellow)}.device-tabs .tabs__indicator{bottom:0;background:var(--yellow)}
.single-device-page .device-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:var(--s-6);padding-block:var(--s-6)}.device-sidebar{display:flex;flex-direction:column;gap:var(--s-4);position:sticky;top:64px;align-self:start}.device-main{min-width:0;display:flex;flex-direction:column;gap:var(--s-6)}.device-module,.single-device-page .device-panel{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow-sm);padding:var(--s-5)}.device-module h2{color:var(--deep-blue);font-size:var(--fs-100);text-transform:uppercase;letter-spacing:.04em;padding-bottom:var(--s-2);margin-bottom:var(--s-3);position:relative}.device-module h2:after{content:"";display:block;width:32px;height:2px;background:var(--yellow);position:absolute;bottom:0;left:0}.device-module p{color:var(--text-secondary);font-size:var(--fs-50)}
.device-black-btn,.device-yellow-btn,.device-outline-btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--s-2) var(--s-4);border:1px solid var(--black);font-family:var(--font-head);font-size:var(--fs-25);font-weight:700;letter-spacing:.05em}.device-black-btn{background:var(--black);color:var(--white)}.device-yellow-btn{background:var(--yellow);color:var(--black);border-color:var(--yellow)}.device-outline-btn{background:var(--white);color:var(--deep-blue);border-color:var(--deep-blue)}.device-black-btn:hover{background:var(--deep-blue)}.device-outline-btn:hover{background:var(--deep-blue);color:var(--white)}.finder-module .device-black-btn{width:100%;margin-top:var(--s-4)}
.mini-prices,.news-list{list-style:none;padding:0;margin:0}.mini-prices li,.price-rows>div{display:flex;justify-content:space-between;gap:var(--s-3);padding-block:var(--s-3);border-bottom:1px solid var(--border);font-size:var(--fs-50)}.mini-prices strong,.price-rows strong{color:var(--deep-blue)}.mini-prices small,.news-list small{display:block;color:var(--text-muted);font-size:var(--fs-25)}.news-list li{display:grid;grid-template-columns:36px 1fr;gap:var(--s-2);padding-block:var(--s-2);font-size:var(--fs-25);font-weight:600}.news-list li span{width:36px;height:36px;background:var(--surface-secondary);border:1px solid var(--border)}.device-module-link{display:inline-block;color:var(--deep-blue);font-size:var(--fs-25);font-weight:700;margin-top:var(--s-3)}.review-mini{display:grid;grid-template-columns:80px 1fr;gap:var(--s-3)}.review-mini span{grid-row:span 2;width:80px;height:80px;background:var(--surface-secondary);border:1px solid var(--border)}.review-mini strong{color:var(--deep-blue)}.review-mini small{color:var(--text-muted)}.sparkline{height:56px}.sparkline svg{width:100%;height:100%}.old-price{text-decoration:line-through;color:var(--text-muted)!important}.deal-price{display:inline-block;margin-top:var(--s-2);padding:var(--s-2) var(--s-3);background:var(--yellow);color:var(--deep-blue);font-family:var(--font-head)}.thumb-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-3)}.thumb-grid a{color:var(--deep-blue);font-size:var(--fs-25)}.thumb-grid span,.thumb-grid a>span{display:block;aspect-ratio:1;background:var(--surface-secondary);border:1px solid var(--border);margin-bottom:var(--s-1)}
.single-device-page .section-title{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-4)}.section-title h2{color:var(--deep-blue);font-size:var(--fs-300)}.device-kicker+.section-title{}.versions,.spec-disclaimer{font-size:var(--fs-25);color:var(--text-muted)}.versions{margin-bottom:var(--s-3)}.spec-disclaimer{font-style:italic;margin-top:var(--s-3)}.info-icon{display:inline-grid;place-items:center;width:20px;height:20px;border:1px solid var(--deep-blue);border-radius:50%;font-size:var(--fs-25)}
.spec-table-wrap{overflow:hidden;border:1px solid var(--border)}.full-spec-table{width:100%;border-collapse:collapse;color:var(--black);font-size:var(--fs-50)}.full-spec-table tr{border-bottom:1px solid var(--border)}.full-spec-table tr:nth-child(even){background:rgba(18,36,74,.03)}.full-spec-table th{width:28%;padding:0;text-align:left;vertical-align:top;color:var(--deep-blue)}.full-spec-table td{padding:var(--s-4);line-height:1.9}.full-spec-table td strong{display:inline-block;min-width:100px;color:var(--text-muted);font-weight:600}.spec-group__head{width:100%;height:100%;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-2);padding:var(--s-4);border:0;background:none;color:var(--deep-blue);font-family:var(--font-head);font-weight:700;cursor:pointer;text-align:left}.spec-group__head small{font-size:var(--fs-25);color:var(--text-muted);font-weight:500}.spec-section.is-collapsed td{display:none}.spec-section.is-collapsed th{width:100%}.spec-section.is-collapsed .spec-group__head small{color:var(--yellow)}
.pricing-panel h3{color:var(--deep-blue);font-size:var(--fs-200);margin-top:var(--s-5);margin-bottom:var(--s-3)}.price-rows>div{padding:var(--s-4)}.price-rows>div:hover{background:rgba(255,199,44,.18)}.similar-rail{display:grid;grid-auto-flow:column;grid-auto-columns:145px;gap:var(--s-3);overflow-x:auto}.similar-card{display:flex;flex-direction:column;gap:var(--s-2);color:var(--deep-blue);font-size:var(--fs-25)}.similar-card>span{height:105px;background:var(--surface-secondary);border:1px solid var(--border)}.similar-card em{align-self:flex-start;background:var(--deep-blue);color:var(--yellow);padding:var(--s-1) var(--s-2);font-style:normal;font-weight:700}
.promo-review{display:grid;grid-template-columns:38% 1fr;min-height:240px;background:var(--yellow);color:var(--black);overflow:hidden;border-radius:var(--radius-card)}.promo-review__image{background:var(--deep-blue)}.promo-review>div{padding:var(--s-6)}.promo-review h2{font-size:var(--fs-300);margin-bottom:var(--s-2)}.promo-review p:not(.device-kicker){margin-bottom:var(--s-4)}.opinion{display:grid;grid-template-columns:auto 1fr;gap:var(--s-3);padding-block:var(--s-4);border-bottom:1px solid var(--border)}.opinion-avatar{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:var(--deep-blue);color:var(--white);font-family:var(--font-head);font-weight:700}.opinion strong{color:var(--deep-blue)}.opinion small{display:block;color:var(--text-muted);font-size:var(--fs-25)}.opinion p{margin-block:var(--s-2);color:var(--black)}.opinion a{color:var(--deep-blue);font-size:var(--fs-50);font-weight:700}.opinion-footer{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-3);padding-top:var(--s-4)}.opinion-footer span{color:var(--text-muted);font-size:var(--fs-50);margin-left:auto}
.video-review{position:relative;min-height:330px;display:flex;align-items:flex-end;overflow:hidden;background:var(--black);color:var(--white);border-radius:var(--radius-card)}.video-review__image{position:absolute;inset:0;background:var(--deep-blue)}.video-review__scrim{position:absolute;inset:0;background:rgba(10,10,10,.4)}.video-review h2{position:relative;z-index:1;max-width:70%;padding:var(--s-5);font-size:var(--fs-300)}.video-review__badge{position:absolute;z-index:1;top:var(--s-4);left:var(--s-4);background:var(--yellow);color:var(--black);padding:var(--s-1) var(--s-2);font-size:var(--fs-25);font-weight:700}.video-play{position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border:0;border-radius:50%;background:var(--yellow);color:var(--black);cursor:pointer;transition:transform 150ms var(--ease)}.video-play:hover{transform:translate(-50%,-50%) scale(1.1)}.placeholder-panel{display:flex;flex-direction:column;gap:var(--s-4)}
.video-review__embed{position:absolute;inset:0}.video-review__embed iframe{width:100%;height:100%;border:0}.related-blog__inner{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--s-5);align-items:center}.related-blog__inner>img{width:100%;height:150px;object-fit:cover}.related-blog h3{color:var(--deep-blue);font-size:var(--fs-200);margin-bottom:var(--s-2)}.related-blog p:not(.device-kicker){color:var(--text-secondary);margin-bottom:var(--s-3)}.device-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}.device-gallery a{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--surface-secondary)}.device-gallery img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur) var(--ease)}.device-gallery a:hover img{transform:scale(1.04)}
@media(max-width:767px){.single-device-page .device-hero__inner{grid-template-columns:1fr}.single-device-page .device-hero__product{margin-inline:auto}.single-device-page .device-meta{display:grid;grid-template-columns:1fr 1fr}.single-device-page .quick-specs{grid-template-columns:1fr 1fr;row-gap:var(--s-3)}.quick-specs>div{padding-inline:var(--s-2);border-right:0}.single-device-page .device-layout{display:flex;flex-direction:column;padding-block:var(--s-4)}.device-sidebar{order:2;position:static}.device-main{order:1}.full-spec-table td{padding:var(--s-3);font-size:var(--fs-25)}.full-spec-table td strong{display:block;line-height:1.2}.promo-review{grid-template-columns:1fr}.promo-review__image{min-height:130px}.promo-review>div{padding:var(--s-4)}.video-review{min-height:250px}.video-review h2{max-width:100%;font-size:var(--fs-200)}.single-device-page .section-title{flex-direction:column}.opinion-footer span{margin-left:0}}

/* ==== COMPARE TOOL ==== */
.compare-page{background:var(--white);color:var(--black)}.compare-top{background:var(--white);padding-block:var(--s-5)}.compare-top__grid{display:grid;grid-template-columns:280px minmax(0,1fr);gap:var(--s-5);align-items:stretch}.compare-finder{height:100%;box-shadow:var(--shadow-sm)}.compare-finder .phone-finder-widget__grid{grid-template-columns:repeat(2,1fr)}.compare-finder .phone-finder-widget__brand{min-height:48px}.compare-finder .phone-finder-widget__footer a{display:flex;align-items:center;justify-content:center;padding:var(--s-3) var(--s-2);border-right:1px solid var(--border-dark);color:var(--white);font-size:var(--fs-25);font-weight:700;text-transform:uppercase}.compare-finder .phone-finder-widget__footer a:last-child{border:0}.compare-hero{position:relative;min-height:260px;overflow:hidden;background:var(--black);border-radius:var(--radius-card)}.compare-hero img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}.compare-hero>span{position:absolute;inset:0;background:rgba(10,10,10,.45)}.compare-hero h1{position:absolute;bottom:var(--s-5);left:var(--s-5);margin:0;color:var(--white);font-size:clamp(2rem,5vw,3.75rem)}
.compare-section{padding-top:var(--s-5)}.compare-tool{position:relative}.compare-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5);position:relative}.compare-column{min-width:0;padding:var(--s-4);border:1px solid var(--border);border-radius:var(--radius-card);background:var(--white);box-shadow:var(--shadow-sm)}.compare-label{display:block;margin-bottom:var(--s-2);color:var(--text-muted);font-size:var(--fs-25);font-weight:700;letter-spacing:.12em}.compare-search{position:relative}.compare-search input{width:100%;height:44px;border:1px solid var(--border);border-radius:var(--radius-btn);background:var(--white);padding:var(--s-2) var(--s-3);outline:0}.compare-search input:focus{border-color:var(--yellow);box-shadow:0 0 0 3px rgba(255,199,44,.3)}.compare-results{position:absolute;z-index:20;top:calc(100% + 4px);left:0;right:0;background:var(--white);border:1px solid var(--border);box-shadow:var(--shadow-md);max-height:220px;overflow:auto}.compare-results[hidden]{display:none}.compare-results button{display:block;width:100%;padding:var(--s-2) var(--s-3);border:0;border-bottom:1px solid var(--border);background:var(--white);color:var(--deep-blue);text-align:left;cursor:pointer}.compare-results button:hover{background:rgba(255,199,44,.18)}.compare-column__content{min-height:330px;margin-top:var(--s-4)}.compare-device-card h2{color:var(--deep-blue);font-size:var(--fs-300);margin-bottom:var(--s-3)}.compare-device-card__row{display:grid;grid-template-columns:minmax(0,1fr) 100px;gap:var(--s-3);align-items:center}.compare-device-card__image{width:100%;height:190px;object-fit:contain;background:var(--surface-secondary);border-radius:var(--radius-btn)}.compare-device-card__row nav{display:flex;flex-direction:column;gap:var(--s-2);text-align:right}.compare-device-card__row nav a{color:var(--deep-blue);font-size:var(--fs-25);font-weight:600}.compare-device-card__row nav a:hover{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:3px}.compare-storage{margin-top:var(--s-3);color:var(--text-muted);font-size:var(--fs-50)}.compare-price{display:inline-block;color:var(--deep-blue);font-family:var(--font-head);font-size:var(--fs-200);margin-top:var(--s-2)}.retailer-placeholder{display:inline-block;margin-left:var(--s-2);padding:var(--s-1) var(--s-2);background:var(--surface-secondary);color:var(--text-muted);font-size:var(--fs-25)}.all-prices{display:block;margin-top:var(--s-3);color:var(--yellow);font-size:var(--fs-25);font-weight:700;text-align:right}.compare-empty{min-height:330px;display:grid;place-items:center;border:1px dashed var(--border);border-radius:var(--radius-btn);color:var(--text-muted);font-size:var(--fs-50)}.compare-placeholder-image{background:var(--surface-secondary)}.compare-column__content.is-swapping{opacity:.25;transform:translateX(8px);transition:opacity 200ms var(--ease),transform 200ms var(--ease)}.compare-swap{position:absolute;z-index:5;top:52px;width:34px;height:34px;border:0;border-radius:50%;background:var(--deep-blue);color:var(--white);font-size:1.1rem;cursor:pointer;transform:translateX(-50%);transition:background-color var(--dur) var(--ease),transform 200ms var(--ease)}.compare-swap:hover{background:var(--black);transform:translateX(-50%) scale(1.08)}.compare-swap[data-swap-pair="0"]{left:calc(33.333% - 7px)}.compare-swap[data-swap-pair="1"]{left:calc(66.666% + 7px)}
.compare-controls{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-2);margin-top:var(--s-5)}.compare-mode{display:inline-flex;padding:3px;border:1px solid var(--deep-blue);border-radius:var(--radius-pill);background:var(--white)}.compare-mode button{padding:var(--s-2) var(--s-4);border:0;border-radius:var(--radius-pill);background:var(--white);color:var(--deep-blue);font-family:var(--font-head);font-weight:700;cursor:pointer;transition:background-color 200ms var(--ease),color 200ms var(--ease)}.compare-mode button.is-active{background:var(--deep-blue);color:var(--white)}.compare-controls>a{color:var(--text-muted);font-size:var(--fs-25)}.compare-controls>a:hover{color:var(--yellow)}.compare-ad{display:grid;place-items:center;min-height:90px;margin-top:var(--s-5);border:1px solid var(--border);color:var(--text-muted);font-size:var(--fs-25);letter-spacing:.12em}.compare-table-wrap{margin-top:var(--s-6);overflow-x:auto;border:1px solid var(--border)}.compare-spec-table{width:100%;min-width:760px;border-collapse:collapse;color:var(--black);font-size:var(--fs-50)}.compare-spec-table th,.compare-spec-table td{padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--border);text-align:left;vertical-align:top}.compare-spec-table thead th{position:sticky;top:0;z-index:2;background:var(--white);color:var(--deep-blue);font-family:var(--font-head);box-shadow:0 4px 10px rgba(10,10,10,.08)}.compare-spec-table thead th:not(:first-child){font-size:var(--fs-100)}.compare-spec-table tbody tr:nth-child(even):not(.compare-section-row){background:rgba(18,36,74,.03)}.compare-spec-table tbody th{width:25%;color:var(--deep-blue);font-weight:700}.compare-section-row th{padding-block:var(--s-3);background:var(--deep-blue);color:var(--white);letter-spacing:.08em}.compare-spec-table tr[data-compare-row]{opacity:1;max-height:80px;transition:opacity 200ms var(--ease),max-height 200ms var(--ease)}.compare-spec-table tr.is-diff-hidden{opacity:0;max-height:0;overflow:hidden}.compare-spec-table td{color:var(--black)}.compare-size-row .size-up{border:0;border-radius:var(--radius-pill);padding:var(--s-1) var(--s-3);background:var(--deep-blue);color:var(--white);font-size:var(--fs-25);font-weight:700;cursor:pointer}.compare-price-row td{color:var(--deep-blue);font-weight:700}.compare-price-row td[data-price]:not([data-price="0"]){text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px}.compare-price-row td[data-price="0"]{color:var(--text-muted)}
@media(max-width:1023px){.compare-columns{grid-template-columns:repeat(2,minmax(0,1fr))}.compare-swap[data-swap-pair="0"]{left:50%}.compare-swap[data-swap-pair="1"]{left:auto;right:-17px;top:calc(50% + 20px)}}
@media(max-width:767px){.compare-top__grid{grid-template-columns:1fr}.compare-hero{min-height:190px}.compare-columns{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--s-3)}.compare-column{flex:0 0 min(86vw,340px);scroll-snap-align:start}.compare-swap{display:none}.compare-table-wrap{margin-inline:calc(var(--s-4) * -1)}.compare-spec-table{min-width:680px}.compare-ad{min-height:70px}.related-blog__inner{grid-template-columns:1fr}.device-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
.compare-page{--deep-blue:var(--black)}

/* ==== ADVANCED PHONE FINDER ==== */
.finder-page-top{background:var(--white);padding-block:var(--s-5)}.finder-page-top__grid{display:grid;grid-template-columns:280px minmax(0,1fr);gap:var(--s-5)}.finder-brand-widget{height:100%;box-shadow:var(--shadow-sm)}.finder-brand-widget .phone-finder-widget__grid{grid-template-columns:repeat(2,1fr)}.finder-brand-widget .phone-finder-widget__brand{min-height:48px}.finder-brand-widget .phone-finder-widget__footer a{display:flex;align-items:center;justify-content:center;padding:var(--s-3) var(--s-2);border-right:1px solid var(--border-dark);color:var(--white);font-size:var(--fs-25);font-weight:700;text-transform:uppercase}.finder-brand-widget .phone-finder-widget__footer a:last-child{border:0}.finder-hero{position:relative;min-height:260px;overflow:hidden;background:var(--black);border-radius:var(--radius-card)}.finder-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.finder-hero>span{position:absolute;inset:0;background:rgba(10,10,10,.35)}.finder-hero h1{position:absolute;left:var(--s-5);bottom:var(--s-5);margin:0;color:var(--white);font-size:clamp(2rem,5vw,3.75rem)}.finder-results-cta{display:inline-flex;align-items:center;gap:var(--s-2);background:var(--yellow);color:var(--black);border-radius:var(--radius-card);box-shadow:var(--shadow-md);padding:var(--s-3) var(--s-4);font-family:var(--font-head);font-weight:700;white-space:nowrap}.finder-results-cta:hover{background:var(--black);color:var(--yellow)}.finder-hero>.finder-results-cta{position:absolute;top:var(--s-4);right:var(--s-4);z-index:2}.finder-controls{padding-bottom:var(--s-4)}.finder-type-toggle{display:flex;justify-content:flex-end;border-bottom:1px solid var(--border)}.finder-type-toggle button{position:relative;min-width:130px;padding:var(--s-3) var(--s-5);border:1px solid var(--border);border-bottom:0;background:var(--white);color:var(--text-muted);font-family:var(--font-head);font-weight:700;cursor:pointer}.finder-type-toggle button.is-active{background:var(--deep-blue);color:var(--white)}.finder-type-toggle button.is-active:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--yellow)}
.finder-form-section{padding-bottom:var(--s-7)}.finder-form{display:flex;flex-direction:column;gap:var(--s-5)}.finder-group{min-width:0;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--white);padding:var(--s-5);box-shadow:var(--shadow-sm)}.finder-group legend{padding:0 var(--s-2);color:var(--deep-blue);font-family:var(--font-head);font-weight:700;font-size:var(--fs-200);letter-spacing:.04em}.finder-group legend:after{content:"";display:block;width:32px;height:2px;background:var(--yellow);margin-top:var(--s-2)}.finder-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4);margin-top:var(--s-3)}.finder-field{position:relative;min-width:0}.finder-field--wide{grid-column:1/-1}.finder-field>label:not(.finder-check){display:block;margin-bottom:var(--s-1);color:var(--text-muted);font-size:var(--fs-25);font-weight:600}.finder-field input[type="search"],.finder-field select{width:100%;height:42px;border:1px solid var(--border);border-radius:var(--radius-btn);background:var(--white);color:var(--black);padding:var(--s-2) var(--s-3);outline:0}.finder-field input[type="search"]:focus,.finder-field select:focus{border-color:var(--yellow);box-shadow:0 0 0 3px rgba(255,199,44,.3)}.finder-field select:disabled{background:rgba(10,10,10,.06);color:var(--text-muted);cursor:not-allowed}.finder-field input[type="range"]{width:100%;accent-color:var(--deep-blue);cursor:pointer}.finder-field input[type="range"]:focus{outline:2px solid var(--yellow);outline-offset:3px}.finder-field output{float:right;color:var(--deep-blue);font-weight:700}.range-max{display:block;text-align:right;color:var(--text-muted);font-size:var(--fs-25)}.finder-field--check{display:flex;align-items:center;min-height:42px}.finder-check{display:inline-flex!important;align-items:center;gap:var(--s-2);margin:0!important;color:var(--black)!important;font-size:var(--fs-50)!important;cursor:pointer}.finder-check input{position:absolute;opacity:0}.finder-check span{width:22px;height:22px;border:1px solid var(--border);border-radius:4px;background:var(--white);position:relative}.finder-check input:checked+span{border-color:var(--deep-blue);background:var(--deep-blue)}.finder-check input:checked+span:after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:var(--white);font-weight:700}.finder-check input:focus-visible+span{outline:2px solid var(--yellow);outline-offset:2px}.finder-mobile-cta{display:none}.device-finder-results{padding-top:0}
@media(max-width:767px){.finder-page-top__grid{grid-template-columns:1fr}.finder-hero{min-height:200px}.finder-hero>.finder-results-cta{display:none}.finder-type-toggle{justify-content:stretch}.finder-type-toggle button{flex:1}.finder-fields{grid-template-columns:1fr}.finder-field--wide{grid-column:auto}.finder-group{padding:var(--s-4)}.finder-mobile-cta{position:fixed;z-index:60;left:0;right:0;bottom:0;display:flex;justify-content:center;padding:var(--s-3);background:var(--white);border-top:1px solid var(--border);box-shadow:0 -4px 14px rgba(10,10,10,.12)}.finder-mobile-cta .finder-results-cta{width:100%;justify-content:center}.device-finder-results{padding-bottom:var(--s-7)}}

/* ==== FIXES ==== */
.device-band__media img{width:100%;height:100%;object-fit:contain}
.footer-col ul{list-style:none;padding:0;margin:0}
.masonry .article-card,.masonry .device-card{display:block}
.mobile-panel nav{display:flex;flex-direction:column;gap:var(--s-1)}
.mobile-panel__link{display:block}
.masonry>a,.tile{display:block}
.tile .link-arrow{display:inline-flex}

/* ==========================================================================
   WORDPRESS INTEGRATION — backend-rendered components restyled to the
   design-system tokens (events module, author box, review forms, comments).
   ========================================================================== */

/* ---- Events: tabs (upcoming / ongoing / past) -------------------------- */
.tin-events__tabs{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--s-5)}
.tin-events__tab{display:inline-flex;align-items:center;border-radius:var(--radius-pill);
  padding:var(--s-2) var(--s-4);font-size:var(--fs-25);font-weight:600;letter-spacing:.02em;
  background:var(--surface-raised);color:var(--text-secondary);border:1px solid var(--border);
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.tin-events__tab:hover{border-color:var(--accent);color:var(--accent)}
.tin-events__tab.is-active{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}
.tin-events__grid{display:grid;gap:var(--s-4);grid-template-columns:1fr}
@media(min-width:640px){.tin-events__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.tin-events__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tin-events__pagination{margin-top:var(--s-5);display:flex;justify-content:center}
.tin-events__empty{color:var(--text-secondary)}
.tin-events__pagination .page-numbers{min-width:40px;height:40px;display:inline-grid;place-items:center;padding-inline:var(--s-3);
  border:1px solid var(--border);border-radius:var(--radius-btn);font-size:var(--fs-50);margin-right:var(--s-2);
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.tin-events__pagination .page-numbers.current{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}
.tin-events__pagination .page-numbers:hover:not(.current){border-color:var(--accent);color:var(--accent)}

/* ---- Event card (tin_event_card) ---------------------------------------- */
.tin-event-card{padding:var(--s-4);display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-4);
  background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.tin-event-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--accent)}
.tin-event-card__media{display:block;border-radius:var(--radius-btn);overflow:hidden;background:var(--surface-secondary)}
.tin-event-card__media img{width:100%;height:100%;object-fit:cover}
.tin-event-card__body{display:flex;flex-direction:column;gap:var(--s-2);min-width:0}
.tin-event-card__cat{align-self:flex-start;padding:var(--s-1) var(--s-3);border-radius:var(--radius-pill);
  font-size:var(--fs-25);font-weight:600;background:var(--accent-soft);color:var(--accent)}
.tin-event-card__title{font-size:var(--fs-100);line-height:1.35}
.tin-event-card__title a{color:var(--text-primary)}
.tin-event-card__title a:hover{color:var(--accent)}
.tin-event-card__meta{display:flex;flex-direction:column;gap:var(--s-1);color:var(--text-muted);font-size:var(--fs-25)}
.tin-event-card__rating{display:flex;align-items:center;gap:var(--s-2);color:var(--text-muted);font-size:var(--fs-25)}
.tin-event-card__cta{margin-top:auto;align-self:flex-start}

/* ---- Status pill colours ------------------------------------------------ */
.tin-event-pill--upcoming{background:var(--accent-soft);color:var(--accent)}
.tin-event-pill--ongoing{background:var(--yellow);color:var(--black)}
.tin-event-pill--past{background:var(--danger);color:var(--accent-text)}

/* ---- Feedback alerts ------------------------------------------------------ */
.tin-alert{padding:var(--s-3) var(--s-4);border-radius:var(--radius-btn);font-weight:600;margin-bottom:var(--s-4)}
.tin-alert--ok{background:var(--accent-soft);color:var(--accent)}
.tin-alert--error{background:var(--danger);color:var(--accent-text)}

/* ---- Event details table (single event) ---------------------------------- */
.tin-event-details-table{width:100%;border-collapse:collapse;font-size:var(--fs-50)}
.tin-event-details-table th,.tin-event-details-table td{text-align:left;padding:var(--s-3) var(--s-4);vertical-align:top;border-bottom:1px solid var(--border)}
.tin-event-details-table th{width:34%;color:var(--text-muted);font-weight:500}
.tin-event-details-table a{color:var(--accent);font-weight:600}
.tin-event-details-table a:hover{color:var(--accent-strong)}

/* ---- Average rating block ------------------------------------------------ */
.tin-event-avg{display:inline-flex;align-items:baseline;gap:2px;font-size:var(--fs-500);font-weight:700;color:var(--text-primary)}
.tin-event-avg__score{color:var(--accent)}

/* ---- Star-rating input (radio stars) ------------------------------------- */
.tin-star-input{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:var(--s-1)}
.tin-star-input input{position:absolute;opacity:0;width:0;height:0}
.tin-star-input label{cursor:pointer;font-size:1.5rem;color:var(--border);transition:color var(--dur) var(--ease)}
.tin-star-input label:hover,
.tin-star-input label:hover ~ label,
.tin-star-input input:checked ~ label{color:var(--accent)}
.tin-star-input input:focus-visible + label{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ---- Forms (submit event / review) ---------------------------------------- */
.tin-submit-event__form,.tin-review-form{display:grid;gap:var(--s-4)}
.tin-submit-event__form label,.tin-review-form label{display:grid;gap:var(--s-2);font-weight:600;font-size:var(--fs-50);color:var(--text-primary)}
.tin-submit-event__form input,
.tin-submit-event__form select,
.tin-submit-event__form textarea,
.tin-review-form input,
.tin-review-form textarea{width:100%;padding:var(--s-3) var(--s-4);border-radius:var(--radius-btn);
  border:1px solid var(--border);background:var(--surface-raised);color:var(--text-primary);
  transition:border-color var(--dur) var(--ease)}
.tin-submit-event__form input:focus,
.tin-submit-event__form select:focus,
.tin-submit-event__form textarea:focus,
.tin-review-form input:focus,
.tin-review-form textarea:focus{outline:none;border-color:var(--accent)}
.tin-submit-event__row,.tin-review-form__row{display:grid;grid-template-columns:1fr;gap:var(--s-4)}
@media(min-width:640px){.tin-submit-event__row,.tin-review-form__row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tin-review-form__rating{gap:var(--s-2)!important}
.tin-review-form{border-top:1px solid var(--border);padding-top:var(--s-4)}

/* ---- Reviews (single-device + single-event lists) -------------------------- */
.reviews{list-style:none;padding:0;margin:0}
.review{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-3);padding-block:var(--s-4);border-bottom:1px solid var(--border)}
.review:last-child{border-bottom:0}
.review__img{width:44px;height:44px;border-radius:var(--radius-pill);object-fit:cover}
.review__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2);margin:0}
.review__author{font-family:var(--font-head);font-weight:600}
.review__date{font-size:var(--fs-25);color:var(--text-muted)}
.review__text{margin-top:var(--s-2);color:var(--text-secondary)}
.d-rating__stars{color:var(--accent);display:inline-flex;gap:2px}
.d-rating__score{font-family:var(--font-head);font-weight:700;color:var(--text-primary)}

/* ---- Author box [techinfo_author_box] -------------------------------------- */
.tauthor{position:relative;isolation:isolate;display:flex;gap:var(--s-5);align-items:flex-start;overflow:hidden;
  background:rgba(255,255,255,.58);border:1px solid rgba(255,255,255,.72);border-radius:24px;
  box-shadow:0 18px 40px rgba(10,10,10,.12),inset 0 1px 0 rgba(255,255,255,.9);
  padding:var(--s-6);margin-top:var(--s-6)}
.tauthor:before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");mix-blend-mode:multiply}
.tauthor:after{content:"";position:absolute;z-index:-1;width:180px;height:180px;right:-54px;top:-80px;border-radius:50%;background:var(--yellow);opacity:.22;pointer-events:none}
.tauthor__avatar{flex:0 0 auto}
.tauthor__avatar img{width:76px;height:76px;border-radius:22px;object-fit:cover;border:3px solid var(--yellow);box-shadow:0 8px 18px rgba(10,10,10,.16)}
.tauthor__body{flex:1;min-width:0}
.tauthor__top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap}
.tauthor__name{font-family:var(--font-head);font-size:var(--fs-200);font-weight:700;color:var(--black)}
.tauthor__role{color:var(--deep-blue);font-size:var(--fs-50);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.tauthor__bio{margin:var(--s-2) 0 var(--s-3);color:var(--text-secondary);font-size:var(--fs-50)}
.tauthor__social{display:flex;gap:var(--s-2);margin-bottom:var(--s-3)}
.tauthor__icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;
  background:var(--black);color:var(--white);font-size:var(--fs-50);transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.tauthor__icon:hover{transform:translateY(-2px)}
.tauthor__icon--facebook:hover,.tauthor__icon--twitter:hover,.tauthor__icon--instagram:hover,.tauthor__icon--linkedin:hover,.tauthor__icon--youtube:hover{background:var(--yellow);color:var(--black)}
.tauthor__more{display:block;text-align:right;font-size:var(--fs-50);font-weight:700;color:var(--deep-blue)}
.tauthor__more:hover{color:var(--black);text-decoration:underline;text-decoration-color:var(--yellow);text-underline-offset:3px}
.single-post .tauthor{max-width:860px;margin-inline:auto;margin-top:var(--s-7);background:rgba(255,255,255,.72);border:1px solid rgba(10,10,10,.12);border-top:3px solid var(--yellow)}
.single-post .tauthor__body{padding-top:var(--s-1)}
.single-post .tauthor__bio{max-width:68ch;line-height:1.7}
@media(max-width:479.98px){.tauthor{flex-direction:column}}
[data-theme="dark"] .tauthor{background:rgba(23,23,23,.72);border-color:rgba(255,255,255,.18);box-shadow:0 18px 40px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.12)}
[data-theme="dark"] .tauthor__name{color:var(--white)}

/* ==== MOBILE SAFETY LAYER ==== */
@media(max-width:767px){
  html,body{max-width:100%;overflow-x:hidden}
  .container{padding-inline:16px}
  .site-header__inner{height:64px;gap:8px}
  .logo{font-size:1rem;gap:6px}.logo__mark{width:30px;height:30px}
  .header-actions{gap:4px}.theme-toggle{width:52px;height:30px}.theme-toggle__thumb{width:22px;height:22px}.theme-toggle__track{height:22px}.theme-toggle__icon{top:3px}.theme-toggle__icon--sun{left:3px}.theme-toggle__icon--moon{right:3px}[data-theme="dark"] .theme-toggle__thumb{transform:translateX(22px)}
  .icon-btn{width:38px;height:38px}
  .section{padding-block:40px}
  .section-head{grid-template-columns:1fr;align-items:start;gap:12px}.section-head__main{align-items:flex-start}.section-head__title{font-size:1.25rem}.section-head>.link-arrow{justify-self:start}
  .hero-post__body{padding:16px}.hero-post__title{font-size:clamp(1.65rem,8vw,2.25rem)}
  .article-card__body{padding:16px}.article-card__meta{font-size:.7rem;gap:6px}.article-card__title{font-size:1.1rem}
  .rank-row{grid-template-columns:24px 40px minmax(0,1fr);gap:8px}.rank-row__stat{grid-column:3;font-size:.72rem}.rank-row__thumb{width:40px;height:40px}
  .device-grid{grid-template-columns:1fr 1fr;gap:12px}.device-card{padding:10px}.device-card__name{font-size:.9rem}.device-card__specs{font-size:.7rem}.device-card .pill{font-size:.65rem;padding:3px 7px}
  .finder-search input{max-width:none}.alphabet{overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px}.alphabet__item{flex:0 0 38px}
  .phone-finder-widget__brand{min-height:44px;padding:8px 4px;font-size:.7rem}
  .spec-table-wrap,.compare-table-wrap{max-width:100%;overflow-x:auto}.spec-table{min-width:520px}
  .tabs{gap:0}.tabs__btn{padding:12px 14px;font-size:.75rem}
  .tauthor{padding:20px;gap:16px}.tauthor__avatar img{width:64px;height:64px}.tauthor__top{align-items:flex-start;flex-direction:column;gap:4px}.tauthor__social{flex-wrap:wrap}.tauthor__more{text-align:left}
  .comment{grid-template-columns:36px minmax(0,1fr);gap:10px}.comment img{width:36px;height:36px}
  .article-hero{aspect-ratio:16/10}.prose{font-size:1rem}.prose h2{font-size:1.6rem}.prose h3{font-size:1.3rem}.prose img{height:auto!important;max-width:100%}
  .newsletter{grid-template-columns:1fr}.footer-bottom{align-items:flex-start;flex-direction:column}
  .compare-top__grid,.finder-page-top__grid{grid-template-columns:1fr}.compare-hero,.finder-hero{min-height:190px}.compare-columns{display:flex;overflow-x:auto}.compare-column{flex:0 0 86vw}.single-device-page .device-meta{grid-template-columns:1fr 1fr}.single-device-page .device-layout{display:flex;flex-direction:column}
}
@media(max-width:380px){.device-grid{grid-template-columns:1fr}.header-actions .theme-toggle{width:46px}.header-actions .icon-btn{width:34px;height:34px}.quick-specs{font-size:.85rem}}

/* ---- Team grid [techinfo_team] --------------------------------------------- */
.team-grid{display:grid;grid-template-columns:1fr;gap:var(--s-4)}
@media(min-width:640px){.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.team-card{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-card);
  padding:var(--s-5);text-align:center;border-top:4px solid var(--accent)}
.team-card img{width:90px;height:90px;border-radius:var(--radius-pill);object-fit:cover;border:3px solid var(--accent);margin:0 auto var(--s-3)}
.team-card__name{margin:0 0 var(--s-1);font-size:var(--fs-100);color:var(--text-primary)}
.team-card__role{margin:0 0 var(--s-2);font-size:var(--fs-50);color:var(--accent)}
.team-card__bio{margin:0;font-size:var(--fs-50);color:var(--text-secondary)}

/* ---- Native comment form (comment_form) ------------------------------------- */
.comment-form{display:grid;gap:var(--s-4)}
.comment-form label{display:block;font-weight:600;font-size:var(--fs-50);margin-bottom:var(--s-2);color:var(--text-primary)}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{width:100%;padding:var(--s-3) var(--s-4);border-radius:var(--radius-btn);
  border:1px solid var(--border);background:var(--surface-raised);color:var(--text-primary);
  transition:border-color var(--dur) var(--ease)}
.comment-form input:focus,.comment-form textarea:focus{outline:none;border-color:var(--accent)}
.comment-form .submit,.comment-form input[type="submit"]{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  font-family:var(--font-head);font-weight:600;font-size:var(--fs-50);padding:var(--s-3) var(--s-5);
  border-radius:var(--radius-btn);border:1px solid transparent;cursor:pointer;white-space:nowrap;
  background:var(--accent);color:var(--accent-text);transition:background-color var(--dur) var(--ease)}
.comment-form .submit:hover,.comment-form input[type="submit"]:hover{background:var(--accent-strong)}
.comment-respond .comment-reply-title{font-size:var(--fs-300)}
.comment-form .comment-notes,.comment-form .logged-in-as{font-size:var(--fs-25);color:var(--text-muted)}
.comment-respond{margin-top:var(--s-6)}
.comments-area .reviews{list-style:none;padding:0;margin:0}

/* ---- Device page (single-device.php) extras -------------------------------- */
.d-rating{display:inline-flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.d-rating__review{color:var(--accent);font-weight:600;font-size:var(--fs-50)}
.d-score-line{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--fs-50);margin-bottom:var(--s-2)}
.d-score-line strong{color:var(--accent)}
.progress{height:8px;border-radius:var(--radius-pill);background:var(--surface-secondary);overflow:hidden}
.progress-bar{display:block;height:100%;background:var(--accent);border-radius:var(--radius-pill);transition:width var(--dur) var(--ease)}
.progress-bar.d-poll-no{background:var(--danger)}
.progress-bar.d-poll-maybe{background:var(--text-muted)}

.logo__mark{font-weight:800}
.logo__text span{color:var(--yellow)}