:root{--bg:#f6f8fc;--card:#fff;--text:#111827;--muted:#677185;--line:#e5e9f0;--blue:#286df5;--soft:#eef4ff;--shadow:0 18px 45px rgba(20,30,50,.08)}[data-theme=dark]{--bg:#0c1118;--card:#151b24;--text:#f5f7fb;--muted:#a7b0bf;--line:#293241;--blue:#75a4ff;--soft:#18243a;--shadow:0 18px 45px rgba(0,0,0,.28)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}.wrap{width:min(1160px,calc(100% - 30px));margin:auto}.top{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.nav{min-height:70px;display:flex;align-items:center;gap:20px}.brand{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:850;font-size:20px}.logo{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,#286df5,#7657ff);color:#fff}.links{margin-left:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}.links a{color:var(--text);font-size:14px;font-weight:650}.theme{border:1px solid var(--line);background:var(--card);color:var(--text);padding:8px 11px;border-radius:12px}.hero{padding:68px 0 38px}.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:center}.eyebrow{font-size:12px;font-weight:850;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}h1{font-size:clamp(42px,7vw,74px);line-height:1.02;letter-spacing:-.045em;margin:10px 0 18px}h2{font-size:clamp(27px,4vw,38px);line-height:1.15;letter-spacing:-.025em;margin:38px 0 16px}h3{font-size:20px;line-height:1.25;margin:10px 0}.lead{font-size:20px;color:var(--muted);max-width:760px}.card,.article,.search,.source{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}.hero-visual{padding:18px}.phone{background:#121927;border-radius:36px;padding:14px;max-width:330px;margin:auto}.screen{background:linear-gradient(145deg,#eef4ff,#dce8ff);border-radius:27px;min-height:360px;padding:24px;color:#111827}.notch{width:90px;height:24px;border-radius:20px;background:#111827;margin:0 auto 30px}.tile{background:white;border-radius:16px;padding:14px;margin:12px 0;box-shadow:0 7px 18px rgba(20,40,80,.1)}.search{display:flex;gap:10px;padding:14px;margin:24px 0}.search input{flex:1;border:1px solid var(--line);background:var(--bg);color:var(--text);padding:14px 16px;border-radius:13px;font-size:16px}.btn{display:inline-flex;padding:12px 17px;border-radius:13px;background:var(--blue);color:white!important;font-weight:750}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.card{padding:22px;color:var(--text)}.card p{color:var(--muted);margin:6px 0}.icon{font-size:27px}.badge{display:inline-flex;padding:4px 9px;border-radius:999px;background:var(--soft);color:var(--blue);font-size:12px;font-weight:800}.section{padding:18px 0 34px}.article-wrap{width:min(900px,calc(100% - 30px));margin:30px auto}.article{padding:34px}.article h1{font-size:clamp(38px,6vw,60px)}.summary{font-size:19px;color:var(--muted);border-left:4px solid var(--blue);padding-left:17px}.meta{font-size:14px;color:var(--muted)}.steps{counter-reset:st;display:grid;gap:11px}.step{position:relative;padding:15px 18px 15px 54px;border:1px solid var(--line);background:var(--bg);border-radius:16px}.step:before{counter-increment:st;content:counter(st);position:absolute;left:15px;top:13px;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff;font-weight:800;font-size:13px}.source{padding:18px;margin-top:28px}.related{display:grid;grid-template-columns:1fr 1fr;gap:10px}.related a{padding:13px 15px;border:1px solid var(--line);border-radius:13px;background:var(--bg);color:var(--text);font-weight:650}.footer{margin-top:60px;border-top:1px solid var(--line);padding:36px 0 48px;color:var(--muted)}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:26px}.footer a{display:block;margin:6px 0}.list a{display:block;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:15px;padding:15px 17px;margin:10px 0}.list span{display:block;color:var(--muted);font-size:14px}@media(max-width:900px){.hero-grid,.grid,.footer-grid{grid-template-columns:1fr}.links a:not(.keep){display:none}.hero-visual{display:none}.related{grid-template-columns:1fr}}
/* BIG editorial build */
.brand{min-width:0;text-decoration:none!important}.brand-logo{display:block;width:auto;height:46px;max-width:330px;object-fit:contain;object-position:left center}[data-theme="dark"] .brand-logo{background:#fff;border-radius:14px;padding:4px 8px}.home-brand{width:min(690px,100%);display:block;margin-bottom:22px}[data-theme="dark"] .home-brand{background:#fff;border-radius:22px;padding:12px 16px}.topic-strip{display:flex;gap:9px;flex-wrap:wrap;margin:18px 0}.topic-strip a{display:inline-flex;padding:7px 11px;border:1px solid var(--line);border-radius:999px;color:var(--text);background:var(--card);font-size:13px;font-weight:700}.answer-box{background:linear-gradient(135deg,var(--soft),var(--card));border:1px solid var(--line);border-radius:20px;padding:20px;margin:22px 0}.toc{border:1px solid var(--line);background:var(--bg);border-radius:18px;padding:16px 18px;margin:22px 0}.toc strong{display:block;margin-bottom:8px}.toc a{display:block;margin:5px 0}.checklist{display:grid;gap:9px;margin:14px 0}.check{padding:12px 14px 12px 42px;position:relative;background:var(--bg);border-radius:14px;border:1px solid var(--line)}.check:before{content:"✓";position:absolute;left:14px;top:10px;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:var(--green);color:white;font-size:12px;font-weight:900}.review-score{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;border:1px solid var(--line);background:var(--bg);border-radius:18px;padding:18px;margin:18px 0}.score-num{min-width:88px;height:88px;border-radius:24px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:30px;font-weight:900}.source-list{display:grid;gap:9px;margin-top:10px}.source-list a{display:block;padding:10px 12px;background:var(--bg);border:1px solid var(--line);border-radius:12px}.popular-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.popular-grid a{background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:16px;padding:15px;font-weight:700}.editor-note{font-size:14px;color:var(--muted);border-top:1px solid var(--line);margin-top:25px;padding-top:16px}@media(max-width:1050px){.brand-logo{height:40px;max-width:270px}.popular-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.brand-logo{height:36px;max-width:220px}.popular-grid{grid-template-columns:1fr}.review-score{grid-template-columns:1fr}}

/* SEO FINAL 2027 */
.byline-seo{font-size:13px;color:var(--muted);margin:-8px 0 18px}.byline-seo a{color:inherit;text-decoration:underline;text-underline-offset:3px}.seo-expert-block{margin:22px 0;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--card)}.seo-expert-block h2{margin-top:0}.seo-related{margin:28px 0;padding:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.seo-related h2{margin-top:0}.seo-related ul{columns:2;column-gap:28px;padding-left:20px}.seo-related li{break-inside:avoid;margin:8px 0}@media(max-width:700px){.seo-related ul{columns:1}}


/* =========================================================
   UI FINAL — header / search / theme / homepage / responsive
   ========================================================= */

.top{
  position:sticky;
  top:0;
  z-index:100;
  background:color-mix(in srgb,var(--bg) 94%,transparent);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
}

.nav{
  width:min(1380px,calc(100% - 40px));
  margin:0 auto;
  min-height:76px;
  display:flex;
  align-items:center;
  gap:28px;
}

.brand{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  text-decoration:none!important;
}

.brand-logo{
  display:block;
  width:auto;
  height:42px;
  max-width:330px;
  object-fit:contain;
}

[data-theme="dark"] .brand-logo{
  background:#fff;
  border-radius:12px;
  padding:4px 8px;
}

.navlinks{
  margin-left:auto;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:22px;
  white-space:nowrap;
}

.navlinks a{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  color:var(--text);
  font-size:14px;
  font-weight:720;
  line-height:1;
  text-decoration:none;
  transition:color .18s ease,opacity .18s ease,transform .18s ease;
}

.navlinks a:hover{
  color:var(--blue);
  text-decoration:none;
}

.navlinks .keep{
  padding-left:18px;
  border-left:1px solid var(--line);
}

.theme{
  flex:0 0 auto;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--card);
  color:var(--text);
  font-size:18px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 5px 18px rgba(15,23,42,.05);
}

.theme:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--blue) 45%,var(--line));
}

.hero{
  padding:72px 0 46px;
}

.hero-grid{
  grid-template-columns:minmax(0,1.15fr) minmax(330px,.65fr);
  gap:56px;
}

.hero-copy{
  min-width:0;
}

.hero .eyebrow{
  margin-bottom:16px;
}

.hero h1{
  max-width:880px;
}

.home-brand{
  display:none!important;
}

.search-box{
  width:min(760px,100%);
  margin:26px 0 16px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:stretch;
  gap:12px;
}

.search-box input{
  width:100%;
  min-width:0;
  height:54px;
  padding:0 18px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--card);
  color:var(--text);
  font:inherit;
  font-size:15px;
  outline:none;
  box-shadow:0 7px 22px rgba(15,23,42,.04);
}

.search-box input:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 14%,transparent);
}

.search-box .btn,
.search-box button.btn{
  min-width:158px;
  height:54px;
  border:0;
  border-radius:15px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 22px;
  background:var(--blue);
  color:#fff!important;
  font:inherit;
  font-size:15px;
  font-weight:800;
  cursor:pointer;
  text-decoration:none!important;
  box-shadow:0 10px 24px color-mix(in srgb,var(--blue) 23%,transparent);
}

.search-box .btn:hover,
.search-box button.btn:hover{
  filter:brightness(.97);
  transform:translateY(-1px);
}

.hero-card{
  align-self:center;
  border:1px solid color-mix(in srgb,var(--blue) 15%,var(--line));
  border-radius:30px;
  padding:28px;
  background:linear-gradient(150deg,
    color-mix(in srgb,var(--blue) 7%,var(--card)),
    color-mix(in srgb,var(--blue) 2%,var(--card)));
  box-shadow:0 22px 55px rgba(30,64,175,.08);
}

.hero-phone{
  background:transparent;
  border-radius:0;
  padding:0;
}

.hero-card .screen{
  min-height:0;
  padding:0;
  background:transparent;
  color:var(--text);
  border-radius:0;
}

.hero-card .pill{
  display:none;
}

.hero-card strong{
  display:block;
  margin-bottom:14px;
  font-size:18px;
}

.trend-list{
  display:grid;
  gap:12px;
}

.hero-card a.tile{
  margin:0;
  min-height:66px;
  padding:16px 18px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  border:1px solid var(--line);
  border-radius:17px;
  background:var(--card);
  color:var(--text);
  font-size:15px;
  font-weight:720;
  text-decoration:none;
  box-shadow:0 7px 20px rgba(15,23,42,.04);
}

.hero-card a.tile:hover{
  border-color:color-mix(in srgb,var(--blue) 40%,var(--line));
  transform:translateY(-1px);
  text-decoration:none;
}

.tile-icon{
  font-size:21px;
}

.tile-arrow{
  color:var(--blue);
  font-size:18px;
  font-weight:900;
}

.topic-strip{
  gap:10px;
  margin-top:18px;
}

.topic-strip a{
  padding:8px 12px;
  transition:border-color .18s ease,transform .18s ease;
}

.topic-strip a:hover{
  border-color:color-mix(in srgb,var(--blue) 45%,var(--line));
  transform:translateY(-1px);
  text-decoration:none;
}

.rumapa-feature{
  overflow:hidden;
  position:relative;
}

.rumapa-grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);
  gap:28px;
  align-items:center;
}

.rumapa-actions{
  display:grid;
  gap:10px;
}

.rumapa-actions a{
  display:block;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--bg);
  color:var(--text);
  font-weight:700;
  text-decoration:none;
}

.rumapa-actions a:hover{
  border-color:color-mix(in srgb,var(--blue) 40%,var(--line));
  text-decoration:none;
}

.rumapa-cta{
  margin-top:18px;
}

.rumapa-cta a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:800;
}

.listing[data-search-list]{
  margin-top:22px;
}

.listing[data-search-list] > a{
  display:grid;
  gap:5px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
  color:var(--text);
  text-decoration:none;
}

.listing[data-search-list] > a:hover strong{
  color:var(--blue);
}

.listing[data-search-list] span{
  color:var(--muted);
  font-size:14px;
}

.search-empty{
  margin-top:22px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--card);
  color:var(--muted);
}

@media (max-width:1180px){
  .nav{
    width:min(100% - 28px,1100px);
    min-height:auto;
    padding:12px 0 10px;
    flex-wrap:wrap;
    gap:8px 18px;
  }

  .brand-logo{
    height:38px;
  }

  .navlinks{
    width:100%;
    margin-left:0;
    justify-content:flex-start;
    gap:18px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
    padding:2px 0 4px;
  }

  .navlinks::-webkit-scrollbar{
    display:none;
  }

  .navlinks .keep{
    border-left:0;
    padding-left:0;
  }

  .theme{
    position:absolute;
    right:14px;
    top:11px;
  }
}

@media (max-width:920px){
  .hero{
    padding:48px 0 30px;
  }

  .hero-grid,
  .rumapa-grid{
    grid-template-columns:1fr;
    gap:28px;
  }

  .hero-card{
    max-width:none;
  }

  .hero h1{
    font-size:clamp(42px,11vw,64px);
  }
}

@media (max-width:620px){
  .nav{
    width:calc(100% - 20px);
  }

  .brand-logo{
    height:34px;
    max-width:250px;
  }

  .navlinks{
    gap:14px;
  }

  .navlinks a{
    font-size:13px;
  }

  .search-box{
    grid-template-columns:1fr;
    gap:10px;
  }

  .search-box .btn,
  .search-box button.btn{
    width:100%;
  }

  .hero-card{
    padding:20px;
    border-radius:22px;
  }

  .hero-card a.tile{
    grid-template-columns:auto 1fr auto;
    min-height:60px;
    padding:14px;
  }
}

/* Search visibility fix */
[data-search-item][hidden] {
  display: none !important;
}

/* ===== HEADER LOGO FINAL ===== */
.nav {
  padding-left: 14px;
  padding-right: 14px;
  box-sizing: border-box;
}

.brand {
  padding: 3px 0;
  overflow: visible;
}

.brand-logo {
  height: 50px !important;
  width: auto !important;
  max-width: 370px !important;
  object-fit: contain !important;
  object-position: left center !important;
  overflow: visible !important;
}

@media (max-width: 1180px) {
  .brand-logo {
    height: 46px !important;
    max-width: 340px !important;
  }
}

@media (max-width: 620px) {
  .nav {
    padding-left: 8px;
    padding-right: 8px;
  }

  .brand-logo {
    height: 42px !important;
    max-width: 285px !important;
  }
}

/* ===== HEADER FINAL CLEAN ===== */
.brand {
  flex: 0 0 auto;
  overflow: visible !important;
}

.brand-logo {
  display: block !important;
  height: 54px !important;
  width: auto !important;
  max-width: 410px !important;
  object-fit: contain !important;
  object-position: left center !important;
}

@media (max-width: 1180px) {
  .brand-logo {
    height: 50px !important;
    max-width: 370px !important;
  }
}

@media (max-width: 620px) {
  .brand-logo {
    height: 44px !important;
    max-width: 300px !important;
  }
}

/* ===== LOGO SIZE FINAL ===== */
.brand-logo {
  height: 62px !important;
  max-width: 460px !important;
}

@media (max-width: 1180px) {
  .brand-logo {
    height: 56px !important;
    max-width: 415px !important;
  }
}

@media (max-width: 620px) {
  .brand-logo {
    height: 48px !important;
    max-width: 320px !important;
  }
}

/* ===== LOGO VERTICAL ALIGN FINAL ===== */
.brand-logo {
  transform: translateY(-4px);
}

@media (max-width: 620px) {
  .brand-logo {
    transform: translateY(-2px);
  }
}

/* DARK LOGO — 2026-10-22 */
[data-theme="dark"] .brand-logo{
  content:url("/assets/brand/logo-header-clean-dark.png?v=20261022-dark1");
  background:transparent !important;
  border-radius:0 !important;
  padding:0 !important;
}