/* Future Technology v2 Redesign
   Override stylesheet loaded after inline styles
   ============================================== */

/* ── Refined atmosphere ── */
body{
  background:
    radial-gradient(ellipse 1400px 700px at 50% -280px,rgba(34,211,238,.045) 0%,transparent 55%),
    radial-gradient(ellipse 600px 400px at 85% -60px,rgba(59,130,246,.035) 0%,transparent 55%),
    repeating-linear-gradient(0deg,rgba(34,211,238,.012) 0 1px,transparent 1px 72px),
    repeating-linear-gradient(90deg,rgba(34,211,238,.012) 0 1px,transparent 1px 72px),
    var(--bg)
}

/* ── Sticky glass nav ── */
header.site{
  position:sticky;top:0;z-index:100;
  backdrop-filter:blur(24px) saturate(1.5);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);
  background:rgba(7,11,24,.82);
  border-bottom:1px solid rgba(30,42,74,.5);
  transition:background .3s,box-shadow .3s
}
.brand img{box-shadow:0 0 0 2px rgba(34,211,238,.3),0 0 12px rgba(34,211,238,.1)}
.cta{box-shadow:0 2px 12px rgba(34,211,238,.2);letter-spacing:.02em}
.cta:hover{box-shadow:0 4px 24px rgba(34,211,238,.35)}

/* ── Hero ── */
.hero{
  background:linear-gradient(150deg,#111d40 0%,#0d1630 45%,var(--card) 100%);
  border:1px solid rgba(34,211,238,.1);
  border-radius:22px;
  padding:40px 44px 36px;
  margin:6px 0 28px
}
.hero::before{width:320px;height:320px;background:radial-gradient(circle,rgba(34,211,238,.07) 0%,transparent 60%)}
.hero::after{height:2px;background:linear-gradient(90deg,var(--cyan),var(--blue),var(--cyan));border-radius:0 0 22px 22px}
.hero h2{font-size:38px;line-height:1.08;letter-spacing:-.028em;font-weight:800}
.hero p{font-size:16.5px;line-height:1.65;max-width:42em}
.hero .kicker{
  font-size:11px;letter-spacing:.2em;
  padding:4px 11px;
  background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.15);
  border-radius:5px;display:inline-block
}
.hero .meta{font-size:13.5px;margin-top:16px}

/* ── Section heads ── */
.section-head{
  margin:36px 0 14px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(30,42,74,.35);
  align-items:center
}
.section-head .kicker{font-size:13px;letter-spacing:.2em}
.section-head a{font-weight:600;transition:color .15s}
.section-head a:hover{color:var(--cyan);text-decoration:none}

/* ── Cards grid ── */
.cards{gap:18px;margin:14px 0 6px}

/* ── Card styling ── */
.card{
  background:linear-gradient(168deg,rgba(15,21,42,.95) 0%,rgba(10,15,30,1) 100%);
  border:1px solid rgba(30,42,74,.45);
  border-radius:16px;
  padding:22px;
  position:relative;overflow:hidden;
  transition:border-color .25s,transform .2s ease,box-shadow .25s
}
/* subtle top highlight */
.card::before{
  content:'';position:absolute;top:0;left:20%;right:20%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.18),transparent);
  transition:left .3s,right .3s,opacity .3s
}
/* bottom accent on hover */
.card::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),var(--blue),transparent);
  opacity:0;transition:opacity .3s
}
.card:hover{
  border-color:rgba(34,211,238,.2);
  transform:translateY(-4px);
  box-shadow:0 14px 44px rgba(0,0,0,.4),0 0 0 1px rgba(34,211,238,.06),0 0 28px rgba(34,211,238,.04)
}
.card:hover::before{left:8%;right:8%}
.card:hover::after{opacity:1}
/* -- Featured card (lead story) -- */
.card.featured{
  grid-column:span 2;
  border-color:rgba(34,211,238,.15);
  background:linear-gradient(155deg,rgba(17,29,64,.95) 0%,rgba(10,15,30,1) 100%)
}
.card.featured::before{
  left:10%;right:10%;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.25),transparent)
}
.card.featured h3{
  font-size:24px;
  line-height:1.18;
  letter-spacing:-.02em
}
.card.featured p{
  font-size:15px;
  line-height:1.62
}
.card.featured .kicker{
  font-size:11px;letter-spacing:.2em;
  padding:3px 9px;
  background:rgba(34,211,238,.1);
  border:1px solid rgba(34,211,238,.12)
}
.card.featured .meta{font-size:13px}
.card.featured .card-img img{aspect-ratio:1200/500;object-fit:cover}
@media(max-width:900px){
  .card.featured{grid-column:span 2}
  .card.featured h3{font-size:22px}
}
@media(max-width:580px){
  .card.featured{grid-column:span 1}
  .card.featured h3{font-size:20px}
  .card.featured p{font-size:14px}
}
.card h3{font-size:18px;font-weight:700;line-height:1.28;letter-spacing:-.01em;margin:8px 0 8px}
.card p{font-size:14px;line-height:1.58;color:var(--muted)}
.card .kicker{
  font-size:10.5px;letter-spacing:.18em;
  padding:2px 7px;background:rgba(34,211,238,.06);
  border-radius:3px;display:inline-block
}
.card .meta{font-size:12px;margin:12px 0 0;padding-top:10px;border-top:1px solid rgba(30,42,74,.3)}

/* ── Card images ── */
.card-img{
  border-radius:16px 16px 0 0!important;
  margin:-22px -22px 14px!important;
  position:relative;overflow:hidden
}
.card-img::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:50px;
  background:linear-gradient(to top,rgba(10,15,30,.65) 0%,transparent 100%);
  pointer-events:none
}
.card-img img{transition:transform .4s ease}
.card:hover .card-img img{transform:scale(1.03)}

/* ── Article pages ── */
article{
  background:linear-gradient(168deg,rgba(15,21,42,.9) 0%,rgba(10,15,30,1) 100%);
  border:1px solid rgba(30,42,74,.4);
  border-radius:22px;
  position:relative;
  box-shadow:0 8px 32px rgba(0,0,0,.18)
}
article::after{
  content:'';position:absolute;top:0;left:15%;right:15%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.15),transparent)
}
article h1{font-weight:800;letter-spacing:-.025em}

/* ── Newsletter box ── */
.nl-box{
  background:linear-gradient(155deg,#111d40 0%,#0d1428 50%,var(--card) 100%);
  border:1px solid rgba(34,211,238,.1);
  border-radius:22px;
  padding:40px 34px;
  position:relative;overflow:hidden
}
.nl-box::before{
  content:'';position:absolute;top:-100px;right:-80px;width:280px;height:280px;
  background:radial-gradient(circle,rgba(34,211,238,.06) 0%,transparent 60%);
  pointer-events:none
}
.nl-box::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),var(--blue),transparent)
}
.nl-box h2{font-weight:800;letter-spacing:-.02em}
.nl-form input[type=email]{
  background:rgba(7,11,24,.8);border:1px solid rgba(30,42,74,.6);
  border-radius:10px;padding:12px 16px;font-size:15px;
  backdrop-filter:blur(8px)
}
.nl-form input[type=email]:focus{
  border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(34,211,238,.15),0 0 20px rgba(34,211,238,.08)
}
.nl-form button{border-radius:10px;letter-spacing:.02em}

/* ── Inline CTA ── */
.inline-cta{
  background:linear-gradient(155deg,#111d40 0%,var(--card) 60%);
  border:1px solid rgba(34,211,238,.12);
  border-left:3px solid var(--cyan);
  border-radius:14px;
  position:relative;overflow:hidden
}

/* ── Takeaways ── */
.takeaways{
  background:linear-gradient(155deg,rgba(34,211,238,.04) 0%,rgba(10,15,31,.9) 40%);
  border:1px solid rgba(34,211,238,.15);border-radius:14px
}

/* ── Footer ── */
footer.site{
  border-top:none;margin-top:52px;padding:36px 0 48px;
  position:relative;
  background:linear-gradient(to bottom,transparent 0%,rgba(7,11,24,.5) 100%)
}
footer.site::before{
  content:'';position:absolute;top:0;left:5%;right:5%;height:1px;
  background:linear-gradient(90deg,transparent,var(--line),rgba(34,211,238,.3),var(--line),transparent)
}
.footer-brand{font-size:16px!important;letter-spacing:.01em}
.footer-links a{font-size:13px}
.footer-links a:hover{color:var(--cyan)!important}
.footer-social a{transition:color .15s,transform .15s}
.footer-social a:hover{transform:translateY(-2px)}

/* ── Share buttons ── */
.share a{border-radius:10px;transition:color .15s,border-color .15s,background .15s,transform .15s}
.share a:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.2)}

/* ── Pagination ── */
.page-btn.active{box-shadow:0 2px 12px rgba(34,211,238,.25)}

/* ── Search overlay ── */
.nav-search-results{
  border:1px solid rgba(34,211,238,.1);border-radius:12px;
  backdrop-filter:blur(20px);background:rgba(13,19,38,.95)
}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(34,211,238,.3)}

/* ── Responsive: Tablet ── */
@media(max-width:1024px){
  .hero{padding:36px 36px 32px;border-radius:20px}
  .hero h2{font-size:34px}
}
/* ── Responsive: Small tablet ── */
@media(max-width:768px){
  .hero{padding:30px 26px 26px;border-radius:18px}
  .hero h2{font-size:28px}
  .hero .kicker{font-size:10.5px;padding:3px 9px}
  .nl-box{padding:32px 22px;border-radius:18px}
  .section-head{margin:30px 0 12px}
  .card{padding:20px}
  .card-img{margin:-20px -20px 12px!important;border-radius:14px 14px 0 0!important}
  .card .meta{padding-top:8px}
  article::after{left:10%;right:10%}
}
/* ── Responsive: Mobile ── */
@media(max-width:680px){
  .hero{padding:26px 20px 22px}
  .hero h2{font-size:25px}
  .cards{gap:14px}
  .card{padding:18px;border-radius:14px}
  .card-img{margin:-18px -18px 12px!important;border-radius:14px 14px 0 0!important}
  .nl-box{padding:28px 18px;border-radius:16px}
  footer.site{margin-top:40px}
}
/* ── Responsive: Small phone ── */
@media(max-width:480px){
  .hero{padding:22px 16px 20px;border-radius:14px}
  .hero h2{font-size:23px}
  .hero p{font-size:14px}
  .card{padding:16px}
  .card-img{margin:-16px -16px 10px!important;border-radius:12px 12px 0 0!important}
  .card h3{font-size:16.5px}
  .nl-box{padding:24px 16px;border-radius:14px}
}
/* ── Responsive: Tiny phone ── */
@media(max-width:380px){
  .hero{padding:20px 14px}
  .hero h2{font-size:21px}
  .card{padding:14px}
  .card-img{margin:-14px -14px 10px!important}
}

/* ============================================================
   Phase 1 Quick Wins  --  appended to v2.css
   ============================================================ */

/* 1. Hide search on mobile (safety net) */
@media(max-width:680px){
  .nav-search{display:none!important}
}

/* 2. Hero with image - side-by-side grid layout */
.hero:has(.hero-img){
  display:grid!important;
  grid-template-columns:1.1fr 1fr;
  padding:0!important;
  min-height:300px;
  overflow:hidden
}
.hero-img{
  grid-column:1;grid-row:1/span 5;
  overflow:hidden
}
.hero-img img{
  width:100%;height:100%;min-height:300px;object-fit:cover;
  transition:transform .4s ease
}
.hero:hover .hero-img img{transform:scale(1.03)}
.hero:has(.hero-img) .kicker{
  grid-column:2;grid-row:1;
  background:var(--cyan)!important;color:#051018!important;
  border:none!important;font-weight:700;
  padding:5px 14px!important;margin:28px 32px 0!important;
  justify-self:start;align-self:start;
  border-radius:6px
}
.hero:has(.hero-img) h2{
  grid-column:2;grid-row:2;
  margin:10px 32px 6px!important;padding:0!important
}
.hero:has(.hero-img) p{
  grid-column:2;grid-row:3;
  margin:0 32px!important;padding:0!important;align-self:start
}
.hero:has(.hero-img) .meta{
  grid-column:2;grid-row:4;
  margin:auto 32px 24px!important;padding:0!important;
  align-self:end;
  border-top:1px solid rgba(30,42,74,.3);
  padding-top:12px!important
}
/* Hero without image - just upgrade the kicker chip */
.hero:not(:has(.hero-img)) .kicker{
  background:var(--cyan)!important;color:#051018!important;
  border:none!important;font-weight:700;border-radius:6px
}
@media(max-width:900px){
  .hero:has(.hero-img){grid-template-columns:1fr!important;min-height:auto}
  .hero-img{grid-column:1;grid-row:1;max-height:240px}
  .hero-img img{min-height:auto;max-height:240px}
  .hero:has(.hero-img) .kicker{grid-column:1;grid-row:2;margin:20px 24px 0!important}
  .hero:has(.hero-img) h2{grid-column:1;grid-row:3;margin:8px 24px!important}
  .hero:has(.hero-img) p{grid-column:1;grid-row:4;margin:0 24px!important}
  .hero:has(.hero-img) .meta{grid-column:1;grid-row:5;margin:12px 24px 20px!important}
}
@media(max-width:480px){
  .hero:has(.hero-img) .kicker{margin:16px 18px 0!important}
  .hero:has(.hero-img) h2{margin:6px 18px!important}
  .hero:has(.hero-img) p{margin:0 18px!important}
  .hero:has(.hero-img) .meta{margin:10px 18px 16px!important}
}

/* 3. Category color accents (classes added by Phase 2 generator) */
.card.cat-ai{border-left:3px solid #a78bfa}
.card.cat-security{border-left:3px solid #f87171}
.card.cat-cybersecurity{border-left:3px solid #f87171}
.card.cat-computing{border-left:3px solid #34d399}
.card.cat-hardware{border-left:3px solid #34d399}
.card.cat-science{border-left:3px solid #fbbf24}
.card.cat-space{border-left:3px solid #fbbf24}
.card.cat-technology{border-left:3px solid #22d3ee}
.card.cat-news{border-left:3px solid #64748b}
.card.cat-gadgets{border-left:3px solid #f472b6}
.card.cat-evs{border-left:3px solid #2dd4bf}
.card.cat-self-driving{border-left:3px solid #2dd4bf}
.card.cat-reviews{border-left:3px solid #fb923c}
.card.cat-tools{border-left:3px solid #818cf8}
.card.cat-software{border-left:3px solid #818cf8}
.card.cat-policy{border-left:3px solid #94a3b8}
.card.cat-robotics{border-left:3px solid #a78bfa}
.card.cat-free-report{border-left:3px solid #22d3ee}
/* Featured card in hero position should not show left border */
.card.featured[class*="cat-"]{border-left:none!important}

/* 4. Cookie banner - brand-matched compact glass sheet */
.ftc-banner{
  background:rgba(7,11,24,.88)!important;
  backdrop-filter:blur(20px) saturate(1.4)!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.4)!important;
  border-top:1px solid rgba(34,211,238,.15)!important;
  box-shadow:0 -2px 20px rgba(0,0,0,.35)!important;
  padding:12px 20px!important;
  gap:12px!important;
  font-family:Inter,-apple-system,sans-serif!important
}
.ftc-banner-text{font-size:13px!important;line-height:1.45!important;color:var(--muted)!important}
.ftc-banner-text a{color:var(--cyan)!important}
.ftc-btn-accept{
  background:linear-gradient(135deg,var(--cyan),var(--blue))!important;
  color:#051018!important;padding:8px 18px!important;
  border-radius:8px!important;font-size:13px!important;font-weight:600!important;
  border:none!important
}
.ftc-btn-accept:hover{box-shadow:0 4px 16px rgba(34,211,238,.3)!important}
.ftc-btn-reject{
  background:transparent!important;
  border:1px solid var(--line)!important;color:var(--muted)!important;
  padding:8px 18px!important;border-radius:8px!important;font-size:13px!important
}
.ftc-btn-reject:hover{background:rgba(34,211,238,.06)!important;border-color:rgba(34,211,238,.2)!important}
.ftc-btn-manage{color:var(--cyan)!important;font-size:13px!important;background:transparent!important;border:none!important}
.ftc-settings-btn{
  background:rgba(7,11,24,.88)!important;border-color:var(--line)!important;
  backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important;
  font-family:Inter,-apple-system,sans-serif!important;font-size:11px!important;
  padding:6px 12px!important;border-radius:16px!important;color:var(--muted)!important
}
.ftc-settings-btn:hover{border-color:var(--cyan)!important;color:var(--cyan)!important}
/* Cookie modal */
.ftc-modal{background:rgba(13,19,38,.98)!important;border-color:var(--line)!important}
.ftc-modal-header{border-color:var(--line)!important}
.ftc-modal-title{font-family:'Space Grotesk',sans-serif!important;color:var(--fg)!important}
.ftc-category{border-color:var(--line)!important}
.ftc-toggle input:checked+.ftc-toggle-track{background:var(--cyan)!important}
.ftc-category-badge{color:var(--cyan)!important;background:rgba(34,211,238,.1)!important}
.ftc-modal-footer{border-color:var(--line)!important}

/* 5. Newsletter popup - bottom slide-up toast */
#ft-exit-overlay{
  align-items:flex-end!important;
  background:rgba(7,11,24,.65)!important;
  backdrop-filter:blur(6px)!important;
  -webkit-backdrop-filter:blur(6px)!important
}
#ft-exit-overlay>div{
  border-radius:20px 20px 0 0!important;
  max-width:560px!important;width:100%!important;
  animation:ftNlUp .4s ease-out!important;
  background:rgba(13,19,38,.98)!important;
  border:1px solid var(--line)!important;
  border-bottom:none!important
}
@keyframes ftNlUp{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}
/* Sticky bar - compact glass */
#ft-sticky-bar{
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
  background:rgba(7,11,24,.82)!important;
  border-top:1px solid rgba(34,211,238,.1)!important;
  padding:10px 0!important
}

/* 6. Card active states */
.card{transition:border-color .25s,transform .15s ease,box-shadow .25s!important}
.card:active{transform:scale(.985)!important;transition:transform .08s ease!important}

/* 7. Tighten vertical spacing on mobile */
@media(max-width:680px){
  .section-head{margin:20px 0 8px!important}
  main{padding-top:16px!important}
  .hero{margin-bottom:18px!important}
}
@media(max-height:600px) and (max-width:680px){
  .hero{padding:20px 18px 18px!important;margin-bottom:14px!important}
  .hero h2{font-size:22px!important}
  .hero p{font-size:13.5px!important;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
  .section-head{margin:16px 0 6px!important}
}

/* ============================================================
   Trending Section + Topic Rails
   ============================================================ */

/* ── Trending ── */
.trending{
  margin:0 0 28px;
  padding:20px 24px 18px;
  background:linear-gradient(168deg,rgba(15,21,42,.7) 0%,rgba(10,15,30,.9) 100%);
  border:1px solid rgba(30,42,74,.4);
  border-radius:16px;
  position:relative;overflow:hidden
}
.trending::before{
  content:'';position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.15),transparent)
}
.trending-head{
  font-family:'Space Grotesk',sans-serif;
  font-size:12px;font-weight:700;
  letter-spacing:.2em;color:var(--cyan);
  margin-bottom:14px
}
.trending-list{
  display:flex;flex-direction:column;gap:0
}
.trending-item{
  display:flex;align-items:center;gap:14px;
  padding:10px 0;
  border-bottom:1px solid rgba(30,42,74,.25);
  color:var(--text);
  transition:background .15s,padding-left .15s
}
.trending-item:last-child{border-bottom:none}
.trending-item:hover{
  background:rgba(34,211,238,.03);
  padding-left:6px;
  text-decoration:none
}
.trending-rank{
  font-family:'Space Grotesk',sans-serif;
  font-size:28px;font-weight:700;
  color:var(--cyan);opacity:.5;
  min-width:32px;text-align:center;
  line-height:1
}
.trending-item:hover .trending-rank{opacity:.85}
.trending-text{
  display:flex;flex-direction:column;gap:4px;min-width:0
}
.trending-title{
  font-size:14.5px;font-weight:600;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden
}
.chip{
  font-family:'Space Grotesk',sans-serif;
  font-size:10px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--cyan);font-weight:700;
  background:rgba(34,211,238,.06);
  border-radius:3px;padding:2px 7px;
  display:inline-block;align-self:flex-start;
  white-space:nowrap
}

/* Category chip colors (reuse card border palette) */
.chip.cat-ai{color:#a78bfa;background:rgba(167,139,250,.08)}
.chip.cat-security,.chip.cat-cybersecurity{color:#f87171;background:rgba(248,113,113,.08)}
.chip.cat-computing,.chip.cat-hardware{color:#34d399;background:rgba(52,211,153,.08)}
.chip.cat-space,.chip.cat-science{color:#fbbf24;background:rgba(251,191,36,.08)}
.chip.cat-gadgets{color:#f472b6;background:rgba(244,114,182,.08)}
.chip.cat-evs,.chip.cat-self-driving{color:#2dd4bf;background:rgba(45,212,191,.08)}
.chip.cat-reviews{color:#fb923c;background:rgba(251,146,60,.08)}
.chip.cat-tools,.chip.cat-software{color:#818cf8;background:rgba(129,140,248,.08)}
.chip.cat-policy{color:#94a3b8;background:rgba(148,163,184,.08)}
.chip.cat-robotics{color:#a78bfa;background:rgba(167,139,250,.08)}
.chip.cat-technology,.chip.cat-news{color:#22d3ee;background:rgba(34,211,238,.06)}
.chip.cat-free-report{color:#22d3ee;background:rgba(34,211,238,.08)}

/* ── Topic Rails ── */
.topic-rail{margin:28px 0 0}
.topic-rail-head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:12px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(30,42,74,.3)
}
.topic-rail-head .kicker{font-size:13px;letter-spacing:.2em}
.topic-rail-head a{
  font-size:13.5px;font-weight:600;
  color:var(--muted);transition:color .15s
}
.topic-rail-head a:hover{color:var(--cyan);text-decoration:none}

.rail-track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  gap:14px;
  padding-bottom:6px;
  -ms-overflow-style:none;
  scrollbar-width:none
}
.rail-track::-webkit-scrollbar{display:none}

.rail-card{
  flex:0 0 280px;
  scroll-snap-align:start;
  background:linear-gradient(168deg,rgba(15,21,42,.95) 0%,rgba(10,15,30,1) 100%);
  border:1px solid rgba(30,42,74,.45);
  border-radius:14px;
  overflow:hidden;
  display:flex;flex-direction:column;
  color:var(--text);
  transition:border-color .25s,transform .2s,box-shadow .25s
}
.rail-card:hover{
  border-color:rgba(34,211,238,.2);
  transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 0 1px rgba(34,211,238,.06);
  text-decoration:none
}
.rail-card-img{overflow:hidden;aspect-ratio:16/9}
.rail-card-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .4s ease
}
.rail-card:hover .rail-card-img img{transform:scale(1.03)}

.rail-card .chip{margin:12px 14px 6px}
.rail-card-title{
  font-family:'Space Grotesk',sans-serif;
  font-size:14.5px;font-weight:600;line-height:1.35;
  padding:0 14px 14px;
  display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden
}

/* Category left-border on rail cards */
.rail-card.cat-ai{border-left:3px solid #a78bfa}
.rail-card.cat-security,.rail-card.cat-cybersecurity{border-left:3px solid #f87171}
.rail-card.cat-computing,.rail-card.cat-hardware{border-left:3px solid #34d399}
.rail-card.cat-space,.rail-card.cat-science{border-left:3px solid #fbbf24}
.rail-card.cat-gadgets{border-left:3px solid #f472b6}
.rail-card.cat-evs,.rail-card.cat-self-driving{border-left:3px solid #2dd4bf}
.rail-card.cat-reviews{border-left:3px solid #fb923c}
.rail-card.cat-tools,.rail-card.cat-software{border-left:3px solid #818cf8}
.rail-card.cat-policy{border-left:3px solid #94a3b8}
.rail-card.cat-technology,.rail-card.cat-news{border-left:3px solid #22d3ee}

/* ── Responsive: Tablet ── */
@media(max-width:1024px){
  .rail-card{flex:0 0 260px}
}

/* ── Responsive: Mobile ── */
@media(max-width:680px){
  .trending{padding:16px 18px 14px;border-radius:14px;margin-bottom:18px}
  .trending-rank{font-size:24px;min-width:28px}
  .trending-title{font-size:13.5px}
  .trending-item{gap:10px;padding:8px 0}
  .rail-card{flex:0 0 78vw}
  .rail-card-title{font-size:14px;padding:0 12px 12px}
  .rail-card .chip{margin:10px 12px 4px}
  .topic-rail{margin:20px 0 0}
}

/* ── Responsive: Small phone ── */
@media(max-width:480px){
  .trending{padding:14px 14px 12px;border-radius:12px}
  .trending-head{font-size:11px;margin-bottom:10px}
  .trending-rank{font-size:22px;min-width:26px}
  .trending-title{font-size:13px}
  .trending-item{gap:8px;padding:7px 0}
  .chip{font-size:9.5px;padding:2px 6px}
  .rail-card{flex:0 0 82vw}
}
'
/* ============================================================
   Mobile polish - September 2026
   ============================================================ */

/* Prevent horizontal scroll globally */
html{overflow-x:hidden}
body{overflow-x:hidden}

/* Safe-area padding for notched phones and pop-out/standalone browser */
body{
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right)
}
header.site{
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right)
}
footer.site{
  padding-bottom:calc(env(safe-area-inset-bottom) + 12px)
}

/* ---- Mobile header compact ---- */
@media(max-width:680px){
  header.site{padding:10px 0!important}
  .brand img{height:32px!important;width:32px!important}
  .brand b{font-size:15px!important}
  .brand{gap:8px!important}
  .cta{
    font-size:11.5px!important;
    padding:8px 12px!important;
    margin-left:8px!important;
    white-space:nowrap!important;
    border-radius:8px!important
  }
  .menu-toggle{
    padding:6px 8px!important;
    margin-left:6px!important
  }
}

/* ---- Homepage hero: tighten on mobile ---- */
@media(max-width:680px){
  .hero{
    margin-top:4px!important;
    margin-bottom:14px!important
  }
  .hero h2{margin-bottom:4px!important}
  .hero p{margin-top:4px!important;margin-bottom:4px!important}
  .hero .meta{margin-top:8px!important}
}
@media(max-width:480px){
  .hero{margin-bottom:10px!important}
  .hero .meta{margin-top:6px!important}
}

/* ---- Article pages: tighter title area ---- */
@media(max-width:680px){
  .breadcrumb-nav{margin-bottom:8px!important;font-size:12px!important}
  article .kicker{margin-bottom:2px!important;display:inline-block}
  article h1{
    font-size:23px!important;
    margin-top:4px!important;
    margin-bottom:4px!important
  }
  article .meta{margin:2px 0 10px!important}
  article .takeaways{margin-top:12px!important}
}
@media(max-width:480px){
  article h1{font-size:21px!important}
}

/* ---- Article body text: constrain width and prevent overflow ---- */
article{
  overflow-x:hidden;
  word-wrap:break-word;
  overflow-wrap:break-word
}
article p,article h2,article h3,article ul,article ol,article blockquote,
article .sources,article .share,article .takeaways,article .inline-cta{
  max-width:100%;
  overflow-wrap:break-word;
  word-break:break-word
}
article img{max-width:100%;height:auto}
article pre,article code{
  max-width:100%;
  overflow-x:auto;
  word-break:break-all
}
@media(max-width:680px){
  article{padding:22px 20px!important}
  article p{font-size:15.5px!important;line-height:1.7!important}
  article h2{font-size:19px!important;margin-top:22px!important;margin-bottom:8px!important}
}
@media(max-width:480px){
  article{padding:20px 16px!important}
  article p{font-size:15px!important}
  article h2{font-size:18px!important}
}
@media(max-width:380px){
  article{padding:18px 14px!important}
}

/* ---- Wrap container: safe-area aware ---- */
@media(max-width:680px){
  .wrap{
    padding:0 16px!important;
    padding-left:max(16px,env(safe-area-inset-left))!important;
    padding-right:max(16px,env(safe-area-inset-right))!important
  }
}

/* ---- Standalone/PWA display mode fixes ---- */
@media(display-mode:standalone),
@media(display-mode:fullscreen){
  body{padding-top:env(safe-area-inset-top)}
  header.site{
    padding-top:env(safe-area-inset-top)!important
  }
}
/* ---- Hero image: reduce dead space on mobile ---- */
@media(max-width:680px){
  .hero:has(.hero-img) .hero-img{max-height:180px!important}
  .hero:has(.hero-img) .hero-img img{max-height:180px!important}
  .hero:has(.hero-img){min-height:auto!important}
  .hero:not(:has(.hero-img)){padding:20px 18px 18px!important}
  .hero:not(:has(.hero-img)) h2{font-size:22px!important}
}
@media(max-width:480px){
  .hero:has(.hero-img) .hero-img{max-height:150px!important}
  .hero:has(.hero-img) .hero-img img{max-height:150px!important}
}

/* Article body (.content) padding and text containment */
.content{padding:0 20px;max-width:720px;margin:0 auto;overflow-x:hidden;word-wrap:break-word;overflow-wrap:break-word}
.content p,.content h2,.content h3,.content ul,.content ol,.content blockquote,.content .tk{max-width:100%;overflow-wrap:break-word;word-break:break-word}
.content img{max-width:100%;height:auto}
.content pre,.content code{max-width:100%;overflow-x:auto;word-break:break-all}
@media(max-width:680px){
  .content{padding:0 20px}
  .content p{font-size:15.5px!important;line-height:1.7!important}
  .content h2{font-size:19px!important;margin-top:22px!important;margin-bottom:8px!important}
}
@media(max-width:480px){
  .content{padding:0 16px}
  .content p{font-size:15px!important}
  .content h2{font-size:18px!important}
}
@media(max-width:380px){.content{padding:0 14px}}

/* Article page header: compact nav on mobile */
@media(max-width:680px){
  header.site nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
  header.site nav a:not(.cta){font-size:13px!important;padding:4px 6px!important}
  header.site nav .cta{font-size:11.5px!important;padding:7px 10px!important;white-space:nowrap}
  header.site nav input[type="search"]{display:none!important}
}
@media(max-width:480px){
  header.site nav a:not(.cta){font-size:12px!important}
}

/* ============================================================
   Card Redesign - Compact Horizontal Mobile + Hero Cleanup
   September 2026 v3
   ============================================================ */

/* Desktop: clamp description to 2 lines for tighter cards */
.card p{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin:4px 0 0
}
.card .meta{margin:8px 0 0;padding-top:8px}

/* ---- Mobile: Horizontal card layout with thumbnail ---- */
@media(max-width:680px){
  .cards{gap:10px!important}

  /* Cards WITH images: horizontal grid */
  .card:has(.card-img){
    display:grid!important;
    grid-template-columns:88px 1fr;
    grid-template-rows:auto auto auto;
    gap:0 12px;
    padding:10px!important;
    align-items:center
  }
  .card:has(.card-img) .card-img{
    grid-column:1;grid-row:1/span 3;
    margin:0!important;
    border-radius:10px!important;
    width:88px;height:88px;
    align-self:center;
    overflow:hidden
  }
  .card:has(.card-img) .card-img::after{display:none}
  .card:has(.card-img) .card-img img{
    width:88px!important;height:88px!important;
    aspect-ratio:1!important;object-fit:cover;
    min-height:auto!important
  }
  .card:has(.card-img) .kicker{
    grid-column:2;grid-row:1;
    align-self:end;
    font-size:9px!important;
    padding:1px 5px!important;
    margin:0!important
  }
  .card:has(.card-img) h3{
    grid-column:2;grid-row:2;
    font-size:14.5px!important;
    margin:2px 0!important;
    line-height:1.3!important;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden
  }
  .card:has(.card-img) p{display:none!important}
  .card:has(.card-img) .meta{
    grid-column:2;grid-row:3;
    font-size:11px!important;
    margin:0!important;padding:0!important;
    border-top:none!important;
    align-self:start
  }

  /* Cards WITHOUT images: compact vertical */
  .card:not(:has(.card-img)){padding:12px 14px!important}
  .card:not(:has(.card-img)) p{display:none!important}
  .card:not(:has(.card-img)) h3{
    font-size:15px!important;margin:3px 0!important
  }
  .card:not(:has(.card-img)) .meta{
    margin:4px 0 0!important;padding-top:0!important;
    border-top:none!important;font-size:11px!important
  }

  /* Featured card: slightly larger thumbnail */
  .card.featured:has(.card-img){
    grid-template-columns:110px 1fr!important
  }
  .card.featured:has(.card-img) .card-img{
    width:110px!important;height:110px!important
  }
  .card.featured:has(.card-img) .card-img img{
    width:110px!important;height:110px!important
  }
  .card.featured:has(.card-img) h3{
    font-size:15.5px!important;
    -webkit-line-clamp:3
  }
  .card.featured:has(.card-img) p{display:none!important}

  /* Softer hover on compact cards */
  .card:hover{
    transform:translateY(-2px)!important;
    box-shadow:0 6px 20px rgba(0,0,0,.3),0 0 0 1px rgba(34,211,238,.08)!important
  }
}
@media(max-width:480px){
  .cards{gap:8px!important}
  .card:has(.card-img){
    grid-template-columns:76px 1fr;
    padding:8px!important
  }
  .card:has(.card-img) .card-img{width:76px!important;height:76px!important}
  .card:has(.card-img) .card-img img{width:76px!important;height:76px!important}
  .card:has(.card-img) h3{font-size:14px!important}
  .card:has(.card-img) .kicker{font-size:8.5px!important}
  .card:has(.card-img) .meta{font-size:10.5px!important}

  .card.featured:has(.card-img){grid-template-columns:96px 1fr!important}
  .card.featured:has(.card-img) .card-img{width:96px!important;height:96px!important}
  .card.featured:has(.card-img) .card-img img{width:96px!important;height:96px!important}
}

/* ---- Hero: compact on mobile, hide description ---- */
@media(max-width:680px){
  .hero p{
    display:none!important
  }
  .hero .meta{margin-top:6px!important}
  .hero h2{margin-bottom:4px!important}
  /* Tighter hero image */
  .hero:has(.hero-img) .hero-img{max-height:160px!important}
  .hero:has(.hero-img) .hero-img img{max-height:160px!important}
}
@media(max-width:480px){
  .hero p{display:none!important}
  .hero:has(.hero-img) .hero-img{max-height:140px!important}
  .hero:has(.hero-img) .hero-img img{max-height:140px!important}
}

/* ---- Section heads: cyan accent bar ---- */
.section-head .kicker{
  position:relative;
  padding-left:16px!important
}
.section-head .kicker::before{
  content:'';position:absolute;
  left:0;top:50%;
  transform:translateY(-50%);
  width:4px;height:18px;
  background:linear-gradient(180deg,var(--cyan),var(--blue));
  border-radius:2px
}

/* ---- Trending: left accent + tighter ---- */
.trending{
  border-left:3px solid var(--cyan)!important
}
@media(max-width:680px){
  .trending{margin-bottom:12px!important}
}

/* ---- Topic rails: underline accent on heading ---- */
.topic-rail-head{position:relative}
.topic-rail-head::after{
  content:'';position:absolute;
  bottom:0;left:0;
  width:48px;height:2px;
  background:linear-gradient(90deg,var(--cyan),transparent);
  border-radius:1px
}

/* 10. Lead-magnet report page -- scope reset to prevent v2e homepage styles leaking */
.pg-lm .hero{
  background:transparent!important;
  border:none!important;
  border-radius:0!important;
  margin:0!important;
  padding:80px 0 64px!important;
  position:relative;overflow:hidden}
.pg-lm .hero::before{
  content:"";position:absolute;top:-200px;left:50%;transform:translateX(-50%);
  width:800px;height:800px;
  background:radial-gradient(circle,rgba(34,211,238,.06) 0%,transparent 70%)!important;
  pointer-events:none;border-radius:0!important;
  left:50%!important;right:auto!important;top:-200px!important;height:800px!important}
.pg-lm .hero::after{display:none!important}
.pg-lm .hero h2,.pg-lm .hero h1{
  font-size:48px!important;font-weight:700!important;line-height:1.15!important;
  letter-spacing:normal!important;
  background:linear-gradient(135deg,var(--text) 0%,var(--cyan) 100%)!important;
  -webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;
  background-clip:text!important}
.pg-lm .hero .kicker{
  font-size:13px!important;letter-spacing:.1em!important;
  padding:6px 16px!important;border-radius:100px!important;
  background:rgba(34,211,238,.08)!important;border:1px solid rgba(34,211,238,.2)!important;
  color:var(--cyan)!important;font-weight:600!important;
  font-family:"Space Grotesk",sans-serif!important;margin-bottom:24px!important}
/* Report page cards -- neutralise homepage card chrome */
.pg-lm .card{
  background:var(--card)!important;
  border:1px solid var(--line)!important;
  border-radius:14px!important;
  padding:32px!important;
  border-left-width:1px!important}
.pg-lm .card::before,.pg-lm .card::after{display:none!important}
.pg-lm .card:hover{
  transform:none!important;
  box-shadow:none!important;
  border-color:rgba(34,211,238,.3)!important}
.pg-lm .card h3{font-size:20px!important;font-weight:600!important;margin:0 0 10px!important;letter-spacing:normal!important}
.pg-lm .card p{font-size:15px!important;line-height:1.6!important}
.pg-lm .card .card-icon{margin-bottom:20px}
/* Report page sections -- seamless dark bg */
.pg-lm .section{padding:80px 0!important;background:transparent!important}
.pg-lm .inside-section{border-top:1px solid var(--line)!important;background:transparent!important}
.pg-lm .audience-section{border-top:1px solid var(--line)!important;background:transparent!important}
.pg-lm .final-cta{border-top:1px solid var(--line)!important;background:transparent!important}
/* Report page signup form */
.pg-lm .signup-form input[type="email"]{
  background:var(--card)!important;
  border:1px solid var(--line)!important;
  color:var(--text)!important;
  border-radius:10px!important}
.pg-lm .signup-form input[type="email"]:focus{border-color:var(--cyan)!important}
.pg-lm .signup-form button{
  background:linear-gradient(135deg,var(--cyan),var(--blue))!important;
  color:var(--bg)!important;border-radius:10px!important}
/* Report page audience items */
.pg-lm .audience-item{
  background:var(--card)!important;
  border:1px solid var(--line)!important;
  border-radius:12px!important}
/* Mobile adjustments */
@media(max-width:768px){
  .pg-lm .hero{padding:60px 0 48px!important}
  .pg-lm .hero h2,.pg-lm .hero h1{font-size:34px!important}
  .pg-lm .section{padding:60px 0!important}
  .pg-lm .card{padding:24px!important}
}
@media(max-width:480px){
  .pg-lm .hero h2,.pg-lm .hero h1{font-size:28px!important}
  .pg-lm .card{padding:24px!important}
}

/* 11. Cookie settings button -- hide emoji, use text-only minimal style */
.ftc-settings-btn .ftc-settings-icon{font-size:0!important;width:0!important;overflow:hidden!important;margin:0!important;padding:0!important;display:none!important}
.ftc-settings-btn{
  font-size:11px!important;gap:0!important;
  opacity:.5!important;transition:opacity .2s,border-color .2s!important}
.ftc-settings-btn:hover{opacity:1!important}

/* ============================================================
   12. Homepage Redesign v4 - September 2026
   ============================================================ */

/* ---- Hero: full-width image with gradient overlay ---- */
a.hero:has(.hero-cover){
  display:block!important;
  position:relative!important;
  border-radius:16px!important;
  overflow:hidden!important;
  margin:0 0 12px!important;
  border:none!important;
  padding:0!important;
  background:transparent!important;
  min-height:auto!important;
  max-width:none!important
}
.hero::before,.hero::after{display:none!important}
.hero-cover{
  width:100%;height:300px;
  object-fit:cover;display:block
}
.hero-overlay{
  position:absolute;bottom:0;left:0;right:0;
  padding:22px 24px;
  background:linear-gradient(to top,rgba(7,11,24,.95) 0%,rgba(7,11,24,.65) 50%,transparent 100%)
}
.hero-overlay h2{
  font-size:24px!important;font-weight:800!important;
  line-height:1.15!important;letter-spacing:-.02em!important;
  color:#fff!important;margin:8px 0 6px!important;
  padding:0!important
}
.hero-overlay .chip{margin-bottom:2px}
.hero-meta{
  font-size:12.5px;color:rgba(255,255,255,.6);margin:0
}
.hero:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 8px 32px rgba(0,0,0,.4),0 0 0 1px rgba(34,211,238,.15)!important;
  border-color:transparent!important
}
/* Hide legacy hero elements that no longer exist in new markup */
.hero>p{display:none!important}
.hero>.kicker{display:none!important}
.hero>.meta{display:none!important}
.hero>h2{
  font-size:24px!important;margin:8px 0 6px!important;padding:0!important
}

/* ---- Secondary stories: compact text-only ---- */
.secondary-stories{
  display:flex;flex-direction:column;
  margin:0 0 14px;
  border:1px solid rgba(30,42,74,.3);
  border-radius:12px;
  overflow:hidden;
  background:rgba(13,19,38,.5)
}
.sec-item{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,.06);
  color:var(--text);
  transition:background .15s
}
.sec-item:last-child{border-bottom:none}
.sec-item:hover{background:rgba(34,211,238,.03);text-decoration:none}
.sec-title{
  flex:1;min-width:0;
  font-size:14px;font-weight:600;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.sec-time{
  font-size:11.5px;color:var(--muted);
  white-space:nowrap;flex-shrink:0
}

/* ---- Latest feed: horizontal cards ---- */
.latest-feed{
  display:flex;flex-direction:column;
  gap:0;margin:8px 0 0
}
.feed-item{
  display:flex;align-items:center;gap:14px;
  padding:12px 0;
  border-bottom:1px solid rgba(30,42,74,.25);
  color:var(--text);
  transition:background .15s,padding-left .15s
}
.feed-item:last-child{border-bottom:none}
.feed-item:hover{
  background:rgba(34,211,238,.03);
  padding-left:6px;text-decoration:none
}
.feed-thumb{
  width:80px;height:80px;
  border-radius:10px;
  object-fit:cover;flex-shrink:0
}
.feed-text{
  display:flex;flex-direction:column;gap:3px;
  min-width:0
}
.feed-title{
  font-size:14.5px;font-weight:600;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden
}
.feed-time{font-size:11.5px;color:var(--muted)}

/* ---- Newsletter: dark theme override ---- */
.nl-slim{
  background:#070b18!important;
  border:1px solid rgba(30,42,74,.4)!important;
  border-radius:14px!important;
  margin:24px auto!important;
  padding:22px 24px!important
}

/* ---- Footer: tighter spacing ---- */
.site.footer{padding:28px 0 20px!important}

/* ---- Responsive: hero ---- */
@media(max-width:680px){
  a.hero:has(.hero-cover){margin:0 0 10px!important}
  .hero-cover{height:260px}
  .hero-overlay{padding:18px 20px}
  .hero-overlay h2{font-size:22px!important}
}
@media(max-width:480px){
  .hero-cover{height:220px}
  .hero-overlay{padding:16px 18px}
  .hero-overlay h2{font-size:19px!important}
  .hero-meta{font-size:11.5px}
}
@media(max-width:380px){
  .hero-cover{height:200px}
  .hero-overlay h2{font-size:17px!important}
}

/* ---- Responsive: secondary stories ---- */
@media(max-width:480px){
  .sec-item{padding:10px 14px;gap:8px}
  .sec-title{font-size:13px}
  .sec-time{font-size:10.5px}
  .sec-item .chip{font-size:9px;padding:1px 5px}
}

/* ---- Responsive: latest feed ---- */
@media(max-width:480px){
  .feed-item{gap:10px;padding:10px 0}
  .feed-thumb{width:68px;height:68px;border-radius:8px}
  .feed-title{font-size:13.5px}
  .feed-time{font-size:10.5px}
}

/* ---- Fix "More from" section overlap on article pages ---- */
.more-stories .cards{gap:16px!important}
.more-stories .card{overflow:visible!important;margin:0!important}
/* ---- Hero v4b: hide OG cover image, use gradient bg ---- */
a.hero:has(.hero-cover){
  background:linear-gradient(160deg,#111d40 0%,#0d1630 45%,#0b1228 100%)!important;
  min-height:200px!important
}
.hero-cover{display:none!important}
.hero-overlay{
  position:relative!important;
  background:transparent!important;
  padding:28px 24px 24px!important
}
/* ---- Height reduction: tighten spacing ---- */
.nl-slim{margin:16px 0!important;padding:16px 18px!important}
.nl-slim h3{margin:0 0 6px!important;font-size:17px!important}
.nl-slim p{margin:0 0 10px!important;font-size:13px!important}
footer{margin-top:20px!important;padding-top:20px!important;padding-bottom:8px!important}
.trending{margin-bottom:4px!important;padding-bottom:6px!important}
.section-head{margin:12px 0 6px!important}