:root {
    --gold:   #EDB516; /* bright gold (was #C9A020) */
    --dark:   #111111;
    --cream:  #F7F4EE;
    --border: #E8E8E8;
    --muted:  #888888;
}

* { box-sizing: border-box; }
a { text-decoration: none; color: inherit; }
html { overflow-x: clip; }
body { overflow-x: clip; }
body { font-family: 'Poppins', 'Poppins Fallback', sans-serif; color: var(--dark); background: #fff; margin: 0; }

/* CURSOR TRAIL */
.cursor-trail {
    position:fixed;
    width:7px; height:7px;
    border-radius:50%;
    background:var(--gold);
    pointer-events:none;
    z-index:9999;
    transform:translate(-50%,-50%);
    animation:trailFade .65s ease forwards;
}
@keyframes trailFade {
    0%   { opacity:.75; transform:translate(-50%,-50%) scale(1); }
    100% { opacity:0;   transform:translate(-50%,-50%) scale(0); }
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

/* TOP BAR */
.topbar { background:#111; border-bottom:1px solid #222; font-size:10.5px; color:#aaa; padding:9px 0; letter-spacing:.6px; text-transform:uppercase; }
.btn-submit-top { border:1.5px solid #aaa; color:#aaa; font-size:10px; font-weight:500; letter-spacing:.5px; padding:4px 16px; border-radius:20px; background:transparent; cursor:pointer; font-family:'Poppins',sans-serif; }
.btn-submit-top:hover { background:#aaa; color:#111; }

/* NAVBAR */
.main-nav { border-bottom:1px solid var(--border); padding:9px 0; background:#fff; position:sticky; top:0; z-index:1000; box-shadow:0 1px 4px rgba(0,0,0,.05); }
.brand-logo { height:22px; width:auto; max-width:none; object-fit:contain; display:block; }
.brand { font-family:'Poppins',sans-serif; font-size:22px; color:var(--dark); letter-spacing:-.3px; white-space:nowrap; }
.brand .light { font-weight:800; color:var(--dark); }
.brand .bold  { font-weight:400; color:var(--gold); }
.nav-lnk { font-size:10.5px; font-weight:600; letter-spacing:.7px; text-transform:uppercase; color:#444; padding:4px 8px; white-space:nowrap; transition:color .2s; }
.nav-lnk:hover { color:var(--gold); }
.nav-date { font-size:10px; color:#aaa; font-weight:400; white-space:nowrap; letter-spacing:.2px; }
.btn-login { background:var(--gold); color:#fff; font-size:11px; font-weight:600; padding:7px 18px; border-radius:3px; border:none; white-space:nowrap; cursor:pointer; font-family:'Poppins',sans-serif; }
.btn-login:hover { background:#a88010; }
.btn-featured { display:inline-flex; align-items:center; gap:5px; background:#fff; color:var(--dark); font-size:11px; font-weight:700; padding:8px 15px; border-radius:4px; border:1.5px solid var(--gold); white-space:nowrap; cursor:pointer; font-family:'Poppins',sans-serif; text-decoration:none; letter-spacing:.3px; transition:all .2s; }
.btn-featured:hover { background:var(--gold); color:#111; border-color:var(--gold); }
.btn-featured i { font-size:9px; }
@media (max-width:575px) { .btn-featured { font-size:10px; padding:6px 10px; } .btn-featured i { display:none; } }
.btn-nav-wa { display:inline-flex; align-items:center; gap:5px; background:#15803d; color:#fff; font-size:11px; font-weight:700; padding:8px 13px; border-radius:4px; white-space:nowrap; font-family:'Poppins',sans-serif; text-decoration:none; letter-spacing:.2px; opacity:0; pointer-events:none; max-width:0; overflow:hidden; padding-left:0; padding-right:0; transition:opacity .3s, max-width .35s, padding .35s; }
.btn-nav-wa.visible { opacity:1; pointer-events:all; max-width:160px; padding:8px 13px; }
.btn-nav-wa.wa-shake { animation:waShake .65s ease; }
.btn-nav-wa:hover { background:#166534; color:#fff; }
.btn-nav-wa i { font-size:13px; flex-shrink:0; display:inline-block; width:13px; }
/* Fixed height: the icon font loads after first paint, and an icon-only button would
   otherwise grow when it arrives and push the whole page down (layout shift) */
.btn-nav-wa { height:36px; }

/* MOBILE NAV ROW */
.mobile-nav-row { display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; padding-bottom:6px; flex-wrap:nowrap; }
.mobile-nav-row::-webkit-scrollbar { display:none; }

/* HERO */
.hero { padding:28px 16px 22px; text-align:center; overflow:hidden; }
.hero h1 { font-size:clamp(22px,3.2vw,44px); font-weight:700; line-height:1.1; color:var(--dark); margin-bottom:10px; white-space:nowrap; }
.hero h1 em { color:var(--gold); font-style:italic; }
.hero .sub { font-size:12px; color:var(--muted); white-space:nowrap; margin:0 auto 20px; line-height:1.5; }
.btn-dark-solid { background:var(--dark); color:#fff; font-size:11px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; padding:12px 26px; border-radius:3px; border:none; cursor:pointer; transition:background .2s; display:inline-block; font-family:'Poppins',sans-serif; }
.btn-dark-solid:hover { background:#333; color:#fff; }
.btn-dark-outline { background:transparent; color:var(--dark); font-size:11px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; padding:12px 26px; border-radius:3px; border:1.5px solid var(--dark); cursor:pointer; transition:all .2s; display:inline-block; font-family:'Poppins',sans-serif; }
.btn-dark-outline:hover { background:var(--dark); color:#fff; }

/* SECTION HEADER */
.sec-head { margin-bottom:12px; border-bottom:1px solid #e0e0e0; padding-bottom:7px; }
.sec-head h2 { font-size:13px; font-weight:600; margin:0; letter-spacing:.2px; }

/* SECTION HEADER + SLIDER ARROWS */
.sec-head-flex { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; border-bottom:1px solid #e0e0e0; padding-bottom:7px; gap:12px; }
.sec-head-flex h2 { font-size:13px; font-weight:600; margin:0; letter-spacing:.2px; }
.sec-head-flex h2 em { color:var(--gold); font-style:italic; }
.sec-head-flex p  { font-size:11px; color:var(--muted); margin:3px 0 0; }
.slider-btns { display:flex; gap:6px; flex-shrink:0; }
.slider-btn { width:28px; height:28px; border-radius:50%; border:1px solid #ddd; background:#f5f5f5; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:12px; color:#888; transition:all .2s; line-height:1; }
.slider-btn:hover { border-color:#aaa; background:#eee; color:#444; }
.slider-btn.next { border-color:#ddd; background:#f5f5f5; color:#888; }
.slider-btn.next:hover { border-color:var(--gold); background:var(--gold); color:#fff; }

/* FEATURED THIS WEEK - HORIZONTAL SCROLL */
.fw-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.fw-scroll::-webkit-scrollbar { display:none; }
.fw-row { display:flex; gap:14px; padding-bottom:4px; }
.fw-card { flex-shrink:0; width:190px; cursor:pointer; color:inherit; display:block; }
.fw-card .art-img { width:100%; aspect-ratio:3/2; border-radius:6px; margin-bottom:8px; transition:opacity .2s; object-fit:cover; object-position:center top; display:block; }
.fw-card:hover .art-img { opacity:.86; }

/* RANKED MAGAZINE SECTION */
.top10-section { background:#fff; padding:14px 0 18px; }
.top10-head { display:flex; align-items:center; justify-content:space-between; padding-bottom:10px; border-bottom:1px solid #e0e0e0; margin-bottom:14px; }
.top10-head h2 { font-size:13px; font-weight:600; color:#111; margin:0; letter-spacing:.2px; }
.top10-btn { background:#f5f5f5 !important; border-color:#ddd !important; color:#888 !important; }
.top10-btn:hover { border-color:#aaa !important; background:#eee !important; color:#444 !important; }

.top10-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.top10-scroll::-webkit-scrollbar { display:none; }
.top10-row { display:flex; align-items:flex-end; padding-bottom:4px; }

.top10-item { display:flex; align-items:flex-end; flex-shrink:0; margin-right:12px; }

/* Bold outlined number — on white background use light stroke */
.top10-num {
    font-size:150px;
    font-weight:900;
    line-height:1;
    color:transparent;
    -webkit-text-stroke:3px #c8c8c8;
    width:100px;
    min-width:100px;
    text-align:right;
    user-select:none;
    letter-spacing:-6px;
    margin-right:-10px;
    position:relative;
    z-index:1;
    font-family:'Arial Black','Arial Bold',Impact,sans-serif;
}

.top10-card {
    width:115px;
    min-width:115px;
    aspect-ratio:2/3;
    border-radius:6px;
    overflow:hidden;
    position:relative;
    z-index:2;
    display:block;
    color:inherit;
    text-decoration:none;
    flex-shrink:0;
    box-shadow:0 4px 16px rgba(0,0,0,.15);
    transition:transform .25s;
}
.top10-card:hover { transform:scale(1.04); }
.top10-card img { width:100%; height:100%; object-fit:cover; display:block; }
.top10-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,0) 55%); display:flex; flex-direction:column; justify-content:flex-end; padding:8px 9px; }
.top10-vol { font-size:7px; text-transform:uppercase; letter-spacing:1.2px; color:var(--gold); margin-bottom:3px; font-weight:600; }
.top10-title { font-size:10.5px; font-weight:700; color:#fff; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* EDITOR'S PICK */
.ep-card { border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.ep-img { height:100%; min-height:320px; object-fit:cover; width:100%; }
.ep-body { padding:40px 36px; display:flex; flex-direction:column; justify-content:center; }
.tag-gold { display:inline-block; background:var(--gold); color:#fff; font-size:9px; font-weight:600; letter-spacing:1px; text-transform:uppercase; padding:3px 10px; border-radius:20px; margin-bottom:14px; }
.ep-title { font-size:clamp(20px,2.5vw,30px); font-weight:700; line-height:1.25; color:var(--dark); margin-bottom:14px; }
.ep-desc { font-size:14px; color:#555; line-height:1.72; margin-bottom:14px; }
.ep-author { font-size:12px; color:var(--muted); margin-bottom:22px; }
.read-lnk { font-size:12px; font-weight:600; color:var(--gold); text-transform:uppercase; letter-spacing:.5px; }
.read-lnk:hover { color:var(--dark); }

/* ARTICLE CARD */
.art-card { cursor:pointer; }
.art-img { width:100%; aspect-ratio:3/2; object-fit:cover; object-position:center top; border-radius:6px; margin-bottom:10px; transition:opacity .2s; display:block; }
.art-card:hover .art-img { opacity:.86; }
.art-cat { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.9px; color:var(--gold); margin-bottom:5px; }
.art-title { font-size:11.5px; font-weight:600; line-height:1.35; color:#222; margin-bottom:3px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.art-date { font-size:10px; color:#aaa; font-weight:400; }
.art-author { font-size:11px; color:var(--muted); }

/* TRENDING */
.trending-item { display:flex; align-items:flex-start; gap:14px; padding:14px 0; border-bottom:1px solid #f0f0f0; }
.t-num { font-size:28px; font-weight:700; color:#e0e0e0; line-height:1; min-width:36px; }
.t-cat { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.9px; color:var(--gold); margin-bottom:4px; }
.t-title { font-size:14px; font-weight:600; color:var(--dark); line-height:1.35; margin-bottom:4px; }
.t-author { font-size:11px; color:var(--muted); }
.t-thumb { width:70px; height:65px; object-fit:cover; border-radius:5px; flex-shrink:0; }

/* QUOTE SECTION */
.quote-sec { background:var(--cream); padding:86px 0; text-align:center; }
.why-label { font-size:10px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase; color:#666; margin-bottom:28px; }
.big-quote { font-size:clamp(20px,3vw,36px); font-weight:400; line-height:1.5; color:var(--dark); max-width:780px; margin:0 auto 18px; }
.big-quote em { font-style:italic; font-weight:600; border-bottom:2px solid var(--dark); }
.quote-tagline { font-size:15px; color:#555; }

/* RISING STARS */
.rs-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.rs-scroll::-webkit-scrollbar { display:none; }
.rs-row { display:flex; gap:20px; padding-bottom:4px; justify-content:flex-start; }
.rs-item { text-align:center; flex-shrink:0; min-width:110px; }
.rs-img { width:88px; height:88px; border-radius:50%; object-fit:cover; margin:0 auto 8px; box-shadow:0 3px 12px rgba(0,0,0,.13); }
.rs-sector { font-size:8.5px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:var(--gold); margin-bottom:3px; }
.rs-name { font-size:13px; font-weight:700; color:var(--dark); margin-bottom:2px; }
.rs-company { font-size:11px; color:var(--muted); }

/* FOUNDER VOICES */
.fv-card { padding:26px 22px; border-radius:8px; height:100%; display:flex; flex-direction:column; }
.fv-mark { font-size:48px; line-height:1; margin-bottom:4px; opacity:.4; }
.fv-text { font-size:13px; line-height:1.65; font-style:italic; margin-bottom:14px; flex-grow:1; }
.fv-name { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.fv-role { font-size:11px; opacity:.65; }

/* NEWSLETTER */
.nl-sec { background:linear-gradient(160deg,#0a0f1a 0%,#1a2744 55%,#2a1f0a 100%); border-top:2px solid rgba(201,160,32,.3); color:#fff; padding:86px 0; text-align:center; }
.nl-sec h2 { font-size:clamp(24px,4vw,48px); font-weight:700; color:#fff; line-height:1.2; margin-bottom:8px; }
.nl-sec h2 em { color:var(--gold); font-style:italic; }
.nl-sub { font-size:12px; color:#aaa; margin-bottom:30px; }
.nl-input { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15); border-right:none; color:#fff; padding:13px 16px; font-size:13px; border-radius:3px 0 0 3px; min-width:0; flex:1; outline:none; font-family:'Poppins',sans-serif; }
.nl-input::placeholder { color:#888; }
.nl-input:focus { border-color:rgba(201,160,32,.5); background:rgba(255,255,255,.1); }
.nl-btn { background:#8a6a10; color:#fff; border:none; font-size:11px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; padding:13px 20px; border-radius:0 3px 3px 0; white-space:nowrap; cursor:pointer; font-family:'Poppins',sans-serif; }
.nl-btn:hover { background:#6e5410; }

/* ARCHIVE */
.art-card { cursor:pointer; display:block; text-decoration:none; color:inherit; }
.arc-img-wrap { border-radius:8px; overflow:hidden; margin-bottom:9px; }
.arc-img { width:100%; height:190px; object-fit:cover; display:block; transition:transform .4s ease; }
.art-card:hover .arc-img { transform:scale(1.06); }
.art-card:hover .arc-img-wrap { box-shadow:0 8px 24px rgba(201,160,32,.22); }
.arc-cat { font-size:9px; font-weight:700; color:#8a6a10; text-transform:uppercase; letter-spacing:.7px; margin-bottom:4px; }
.arc-title { font-size:17px; font-weight:500; line-height:1.32; color:var(--dark); }

/* SUBMIT STORY */
.submit-sec { background:var(--cream); padding:60px 0; }
.submit-sec .eyebrow { font-size:10px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:#666; margin-bottom:12px; }
.submit-sec h2 { font-size:clamp(22px,3.5vw,38px); font-weight:700; margin-bottom:8px; }
.submit-sec p { font-size:14px; color:#666; margin:0; }
.submit-lnk { font-size:13px; font-weight:600; color:var(--dark); border-bottom:2px solid var(--dark); padding-bottom:2px; white-space:nowrap; }
.submit-lnk:hover { color:var(--gold); border-color:var(--gold); }

/* FOOTER */
.site-footer { background:linear-gradient(145deg,#0d1117 0%,#1a2744 100%); border-top:2px solid rgba(201,160,32,.25); color:#888; padding:48px 0 26px; }
.ft-row { display:flex; flex-wrap:wrap; gap:36px 64px; }
.ft-about { flex:1 1 320px; }
.ft-col { flex:0 0 auto; min-width:150px; }
.ft-brand { display:inline-block; font-size:30px; margin-bottom:14px; text-decoration:none; }
.ft-brand-inc { color:#fff; font-weight:800; }
.ft-brand-biz { color:var(--gold); font-weight:400; }
.ft-desc { font-size:13.5px; line-height:1.7; color:#9aa3b2; max-width:340px; margin:0; }
.ft-head { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:#fff; margin-bottom:18px; }
.ft-links { list-style:none; padding:0; margin:0; }
.ft-links li { margin-bottom:11px; }
.ft-links a { font-size:13.5px; color:#9aa3b2; text-decoration:none; transition:color .2s; }
.ft-links a i { margin-right:6px; }
.ft-links a:hover { color:var(--gold); }
.ft-bottom { border-top:1px solid rgba(255,255,255,.08); margin-top:36px; padding-top:18px; font-size:12px; color:#6b7385; }
.ft-bottom a { color:#555; }
.ft-bottom a:hover { color:var(--gold); }

/* ============ WHATSAPP CTA BANNER ============ */
.wa-banner { background:linear-gradient(145deg,#0d1117 0%,#1a2744 100%); border-bottom:1px solid rgba(201,160,32,.25); }
.wa-banner-inner { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 20px; max-width:1320px; margin:0 auto; }
.wa-banner-left { display:flex; align-items:center; gap:12px; flex:1; min-width:0; }
.wa-icon { width:26px; height:26px; background:#25D366; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; animation:waPulse 2s ease-in-out infinite; }
.wa-icon i { color:#fff; font-size:14px; }
@keyframes waPulse {
    0%,100% { box-shadow:0 0 0 0 rgba(37,211,102,.5); }
    50%      { box-shadow:0 0 0 8px rgba(37,211,102,0); }
}
@keyframes waShake {
    0%,100% { transform:translateX(0) rotate(0); }
    15%     { transform:translateX(-5px) rotate(-2deg); }
    30%     { transform:translateX(5px) rotate(2deg); }
    45%     { transform:translateX(-4px) rotate(-1deg); }
    60%     { transform:translateX(4px) rotate(1deg); }
    75%     { transform:translateX(-2px); }
    88%     { transform:translateX(2px); }
}
.wa-cta.wa-shake { animation:waShake .65s ease; }
.wa-text { display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0; }
.wa-tag { background:var(--gold); color:#111; font-size:8.5px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; padding:2px 7px; border-radius:3px; flex-shrink:0; }
.wa-msg { font-size:12.5px; color:#ccc; line-height:1.3; }
.wa-msg strong { color:#fff; }
.wa-cta { background:#15803d; color:#fff; font-size:11px; font-weight:700; padding:6px 14px; border-radius:6px; text-decoration:none; white-space:nowrap; display:flex; align-items:center; gap:6px; flex-shrink:0; transition:background .2s; letter-spacing:.3px; }
.wa-cta:hover { background:#0f6b30; color:#fff; }
.wa-close { background:none; border:none; color:#555; font-size:18px; cursor:pointer; padding:2px 4px; flex-shrink:0; line-height:1; transition:color .2s; }
.wa-close:hover { color:#fff; }

@media (max-width:767px) {
    .wa-banner-inner { padding:6px 14px; gap:8px; }
    .brand-logo { height:20px; }
    .wa-tag { display:none; }
    .wa-msg { font-size:11.5px; }
    .wa-cta { padding:5px 10px; font-size:10px; }
    .wa-cta .bi-arrow-right { display:none; }
}

/* ============ HAMBURGER BUTTON ============ */
.hbg-btn { background:none; border:none; cursor:pointer; padding:6px; display:flex; flex-direction:column; justify-content:center; gap:5px; width:36px; height:36px; }
.hbg-btn span { display:block; width:22px; height:2px; background:var(--dark); border-radius:2px; transition:transform .3s, opacity .3s; }

/* ============ DRAWER OVERLAY ============ */
.hbg-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1040; opacity:0; pointer-events:none; transition:opacity .3s; }
.hbg-overlay.open { opacity:1; pointer-events:all; }

/* ============ SLIDE DRAWER ============ */
.hbg-drawer { position:fixed; top:0; left:0; height:100dvh; width:290px; max-width:85vw; background:#fff; z-index:1050; transform:translateX(-100%); transition:transform .35s cubic-bezier(.25,.46,.45,.94); display:flex; flex-direction:column; box-shadow:6px 0 40px rgba(0,0,0,.18); }
.hbg-drawer.open { transform:translateX(0); }

.hbg-drawer-head { display:flex; align-items:center; justify-content:space-between; padding:18px 20px 14px; border-bottom:1px solid var(--border); flex-shrink:0; }
.hbg-logo { font-size:19px; letter-spacing:-.3px; }
.hbg-light { font-weight:800; color:var(--dark); }
.hbg-bold { font-weight:400; color:var(--gold); }

.hbg-close { background:none; border:1px solid var(--border); border-radius:6px; font-size:13px; cursor:pointer; color:#666; padding:5px 9px; line-height:1; }
.hbg-close:hover { background:var(--dark); color:#fff; border-color:var(--dark); }

.hbg-nav { flex:1; overflow-y:auto; padding:8px 0; }
.hbg-lnk { display:flex; align-items:center; gap:12px; padding:14px 20px; font-size:14px; font-weight:500; color:#333; text-decoration:none; border-bottom:1px solid #f7f7f7; transition:background .15s, color .15s; }
.hbg-lnk i { font-size:15px; color:#bbb; width:18px; text-align:center; flex-shrink:0; }
.hbg-lnk:hover { background:var(--cream); color:var(--dark); }
.hbg-lnk:hover i { color:var(--gold); }

.hbg-footer { padding:16px 20px; border-top:1px solid var(--border); flex-shrink:0; background:#fff; }
.hbg-login-btn { width:100%; padding:13px; background:var(--gold); color:#111; border:none; border-radius:7px; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; letter-spacing:.3px; transition:background .2s; display:flex; align-items:center; justify-content:center; gap:7px; text-decoration:none; box-shadow:0 0 0 3px rgba(201,160,32,.2); }
.hbg-login-btn:hover { background:#b38a15; color:#111; }

/* ============ SCROLL REVEAL ============ */
.reveal {
    opacity:0;
    transform:translateY(24px);
    transition:opacity .55s ease, transform .55s ease;
}
.reveal.revealed {
    opacity:1;
    transform:translateY(0);
}

/* ============ SIDEBAR: ABOUT US ============ */
.hm-about { background:var(--cream); border-radius:10px; padding:18px 16px; border-left:3px solid var(--gold); }
.hm-about-logo { font-size:20px; margin-bottom:10px; letter-spacing:-.5px; }
.hm-about-light { color:var(--dark); font-weight:800; }
.hm-about-bold { color:var(--gold); font-weight:400; }
.hm-about-desc { font-size:11.5px; color:#555; line-height:1.65; margin-bottom:12px; }
.hm-about-lnk { font-size:10.5px; font-weight:700; color:var(--dark); text-decoration:none; display:inline-flex; align-items:center; gap:5px; letter-spacing:.3px; }
.hm-about-lnk:hover { color:var(--gold); }

/* ============ SIDEBAR: RISING STARS WITH CIRCLES ============ */
.hm-side-rs-item { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #222; text-decoration:none; color:inherit; }
.hm-side-rs-item:last-of-type { border-bottom:none; }
.hm-side-rs-img { width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0; border:1.5px solid rgba(201,160,32,.4); }
.hm-side-rs-info { flex:1; min-width:0; }
.hm-side-rs-name { font-size:12px; font-weight:600; color:#e8e8e8; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hm-side-rs-co { font-size:10px; color:#777; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ============ SIDEBAR: EDITOR'S PICK ============ */
.hm-side-pick { background:#fff; border:1px solid var(--border); border-radius:10px; padding:14px; }
.hm-side-pick-label { font-size:9px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin-bottom:10px; }
.hm-side-pick-img-wrap { position:relative; border-radius:7px; overflow:hidden; aspect-ratio:16/9; margin-bottom:10px; }
.hm-side-pick-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .35s; display:block; }
.hm-side-pick:hover .hm-side-pick-img-wrap img { transform:scale(1.05); }
.hm-side-pick-cat { position:absolute; bottom:8px; left:8px; background:var(--gold); color:#111; font-size:7px; font-weight:800; letter-spacing:1px; text-transform:uppercase; padding:3px 7px; border-radius:3px; }
.hm-side-pick-title { font-size:13px; font-weight:700; color:var(--dark); line-height:1.35; margin-bottom:6px; }
.hm-side-pick-excerpt { font-size:11px; color:var(--muted); line-height:1.5; margin-bottom:10px; }
.hm-side-pick-lnk { font-size:10px; font-weight:700; color:var(--dark); text-decoration:none; letter-spacing:.5px; display:flex; align-items:center; gap:5px; }
.hm-side-pick-lnk:hover { color:var(--gold); }

/* ============ SIDEBAR: TOPICS ============ */
.hm-side-topics { background:var(--cream); border-radius:10px; padding:14px 16px; }
.hm-side-topics-head { font-size:9px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.hm-topics-wrap { display:flex; flex-wrap:wrap; gap:7px; }
.hm-topic { display:inline-block; padding:5px 11px; border-radius:20px; background:#fff; border:1px solid var(--border); font-size:10.5px; font-weight:500; color:#444; text-decoration:none; transition:all .2s; white-space:nowrap; }
.hm-topic:hover { background:var(--dark); color:#fff; border-color:var(--dark); }
.hm-topic-gold { background:var(--gold); color:#111 !important; border-color:var(--gold) !important; font-weight:700; }
.hm-topic-gold:hover { background:#b38a15; border-color:#b38a15; }

/* ============ SIDEBAR: NEWSLETTER ============ */
.hm-side-nl { background:linear-gradient(160deg,#0a0f1a 0%,#1a2744 55%,#2a1f0a 100%); border-radius:10px; padding:18px 16px; text-align:center; border-top:2px solid rgba(201,160,32,.5); }
.hm-side-nl-icon { font-size:24px; margin-bottom:8px; }
.hm-side-nl-title { font-size:14px; font-weight:700; color:#fff; margin-bottom:4px; }
.hm-side-nl-sub { font-size:11px; color:#aaa; line-height:1.5; margin-bottom:14px; }
.hm-side-nl-input { width:100%; padding:9px 12px; border-radius:6px; border:1px solid #333; background:#1e1e1e; color:#fff; font-size:11.5px; margin-bottom:8px; outline:none; font-family:inherit; }
.hm-side-nl-input::placeholder { color:#666; }
.hm-side-nl-input:focus { border-color:var(--gold); }
.hm-side-nl-btn { width:100%; padding:9px; border-radius:6px; background:var(--gold); color:#111; font-size:11px; font-weight:800; letter-spacing:1px; border:none; cursor:pointer; text-transform:uppercase; transition:opacity .2s; font-family:inherit; }
.hm-side-nl-btn:hover { opacity:.85; }

/* GET FEATURED sidebar card */
.hm-side-gf { background:linear-gradient(145deg,#fff8e8 0%,#fff3d0 100%); border:1.5px solid rgba(201,160,32,.35); border-radius:10px; padding:20px 16px; text-align:center; }
.hm-side-gf-star { font-size:22px; color:var(--gold); margin-bottom:10px; }
.hm-side-gf-title { font-size:15px; font-weight:800; color:#111; letter-spacing:.3px; margin-bottom:6px; }
.hm-side-gf-sub { font-size:11px; color:#666; line-height:1.6; margin-bottom:14px; }
.hm-side-gf-btn { display:inline-flex; align-items:center; gap:6px; background:var(--dark); color:var(--gold); font-size:11px; font-weight:700; padding:9px 20px; border-radius:5px; text-decoration:none; letter-spacing:.3px; transition:all .2s; border:1.5px solid var(--dark); }
.hm-side-gf-btn:hover { background:var(--gold); color:#111; border-color:var(--gold); }

/* UTILS */
.bg-off { background:#fafafa; }

/* TABLET */
@media (max-width:991px) {
    .ep-body { padding:24px 22px; }
    .ep-img { min-height:240px; }
    .rs-img { width:130px; height:130px; }
    .rs-row { gap:20px; }
}

/* ============ TWO-COLUMN HOMEPAGE ============ */
.hm-wrap { padding:28px 0 32px; }
.hm-label { font-size:9.5px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.hm-sec-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; border-bottom:1px solid var(--border); padding-bottom:8px; }
.hm-sec-title { font-size:22px; font-weight:700; margin:0; color:var(--dark); }
.hm-see-all { font-size:9.5px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#8a6a10; text-decoration:none; white-space:nowrap; }
.hm-see-all:hover { color:var(--dark); }

/* Magazine grid: 5 columns */
.hm-mags-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:32px; }
.hm-mag-card { display:block; color:inherit; text-decoration:none; animation:hmFadeUp .5s ease both; }
.hm-mag-card:nth-child(1) { animation-delay:.05s; }
.hm-mag-card:nth-child(2) { animation-delay:.12s; }
.hm-mag-card:nth-child(3) { animation-delay:.19s; }
.hm-mag-card:nth-child(4) { animation-delay:.26s; }
.hm-mag-card:nth-child(5) { animation-delay:.33s; }
@keyframes hmFadeUp {
    from { opacity:0; transform:translateY(22px); }
    to   { opacity:1; transform:translateY(0); }
}
.hm-mag-img-wrap { position:relative; border-radius:10px; overflow:hidden; margin-bottom:10px; transition:box-shadow .25s; }
.hm-mag-img-wrap img { width:100%; height:auto; transition:transform .4s ease; display:block; }
.hm-mag-card:hover .hm-mag-img-wrap { box-shadow:0 10px 28px rgba(0,0,0,.18); }
.hm-mag-card:hover .hm-mag-img-wrap img { transform:scale(1.07); }
.hm-mag-badge { position:absolute; top:12px; left:12px; background:rgba(0,0,0,.55); backdrop-filter:blur(4px); color:#fff; font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:4px 8px; border-radius:3px; }
.hm-mag-rank { position:absolute; bottom:8px; right:12px; font-size:68px; font-weight:900; color:rgba(255,255,255,.15); line-height:1; font-family:'Arial Black',Impact,sans-serif; }
.hm-mag-foot { padding:0 2px; }
.hm-mag-title { font-size:14.5px; font-weight:700; color:var(--dark); margin-bottom:6px; line-height:1.3; }
.hm-mag-meta { display:flex; justify-content:space-between; align-items:center; }
.hm-mag-cat { font-size:10.5px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; color:var(--muted); }
.hm-mag-date { font-size:10.5px; color:var(--gold); font-weight:600; }

/* Stories grid: 3 columns using archive card style */
.hm-stories-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }

/* Latest news list: compact rows — small thumb left, kicker + title + byline right */
.hm-news-list { display:grid; grid-template-columns:repeat(3,1fr); gap:24px 20px; }
.hm-news-row { display:flex; gap:12px; align-items:flex-start; padding-bottom:20px; border-bottom:1px solid var(--border); text-decoration:none; color:inherit; }
.hm-news-thumb { width:104px; flex-shrink:0; border-radius:8px; overflow:hidden; background:#f0f0f0; }
.hm-news-thumb img { width:100%; height:82px; object-fit:cover; display:block; transition:transform .4s ease; }
.hm-news-row:hover .hm-news-thumb img { transform:scale(1.06); }
.hm-news-body { min-width:0; }
.hm-news-kicker { font-size:9.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--dark); margin-bottom:5px; }
.hm-news-title { font-size:15px; font-weight:700; line-height:1.32; color:var(--dark); margin:0 0 6px; }
.hm-news-row:hover .hm-news-title { color:#8a6a10; }
.hm-news-meta { font-size:11.5px; color:var(--muted); }

/* SIDEBAR CARDS */
.hm-side-card { background:linear-gradient(145deg,#0d1117 0%,#1a2744 100%); border-radius:10px; padding:18px 16px; border-top:2px solid rgba(201,160,32,.35); }
.hm-side-head { display:flex; justify-content:space-between; align-items:center; font-size:10.5px; font-weight:800; letter-spacing:2px; color:#fff; margin-bottom:14px; }
.hm-side-dot { width:7px; height:7px; border-radius:50%; background:var(--gold); flex-shrink:0; }

/* Rising Stars sidebar */
.hm-rs-item { display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-bottom:1px solid #222; text-decoration:none; color:inherit; }
.hm-rs-item:last-of-type { border-bottom:none; }
.hm-rs-title { font-size:12.5px; font-weight:600; color:#e8e8e8; line-height:1.3; }
.hm-rs-num { font-size:10px; font-weight:700; color:var(--gold); flex-shrink:0; margin-left:10px; }

/* Trending sidebar */
.hm-trend-item { display:flex; gap:10px; align-items:flex-start; padding:11px 0; border-bottom:1px solid #222; text-decoration:none; color:inherit; }
.hm-trend-item:last-of-type { border-bottom:none; }
.hm-trend-num { font-size:13px; font-weight:800; color:var(--gold); flex-shrink:0; min-width:22px; line-height:1.3; }
.hm-trend-title { font-size:12px; font-weight:400; color:#bbb; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* Explore All button */
.hm-side-btn { display:block; margin-top:14px; background:var(--gold); color:#111 !important; text-align:center; padding:10px; border-radius:6px; font-size:9.5px; font-weight:800; letter-spacing:1.5px; text-decoration:none !important; text-transform:uppercase; transition:opacity .2s; }
.hm-side-btn:hover { opacity:.85; }

/* Responsive */
@media (max-width:991px) {
    .hm-mags-grid { grid-template-columns:repeat(3,1fr); }
    .hm-stories-grid { grid-template-columns:repeat(2,1fr); }
    .hm-sec-title { font-size:18px; }
    /* Tablet: keep the 3-column news grid, just tighten gaps and thumb size */
    .hm-news-list { gap:20px 14px; }
    .hm-news-thumb { width:84px; }
    .hm-news-thumb img { height:66px; }
    .hm-news-title { font-size:13.5px; }
    .hm-news-kicker { font-size:9px; }
    .hm-news-meta { font-size:10.5px; }
}
@media (max-width:767px) {
    .hm-wrap { padding:16px 0 20px; }
    /* Magazines: horizontal scroll on mobile — 2 full + half of 3rd visible */
    .hm-mags-grid { display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; gap:10px; padding-bottom:6px; grid-template-columns:unset; padding-right:12px; }
    .hm-mags-grid::-webkit-scrollbar { display:none; }
    .hm-mags-grid .hm-mag-card { width:calc((100vw - 58px) / 2.5); min-width:calc((100vw - 58px) / 2.5); flex-shrink:0; }
    /* Stories: 1 column on mobile */
    .hm-stories-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
    .hm-sec-title { font-size:17px; }
    /* Phone: back to a single-column list with a bigger, full-width-style thumb */
    .hm-news-list { grid-template-columns:1fr; gap:0; }
    .hm-news-row { gap:12px; padding:14px 0; border-bottom:1px solid var(--border); }
    .hm-news-thumb { width:112px; border-radius:8px; }
    .hm-news-thumb img { height:76px; }
    .hm-news-kicker { font-size:9.5px; margin-bottom:4px; }
    .hm-news-title { font-size:14.5px; margin-bottom:5px; }
    .hm-news-meta { font-size:11px; }
}

/* MOBILE */
@media (max-width:767px) {
    .hero { padding:24px 16px 20px; }
    .hero h1 { white-space:normal; font-size:clamp(22px,6vw,36px); }
    .hero .sub { white-space:normal; text-align:center; }
    .ep-img { min-height:220px; }
    .quote-sec, .nl-sec { padding:56px 0; }

    /* Tighten section vertical padding so 3 sections fit above fold */
    .sec-home-tight { padding-top:10px !important; padding-bottom:10px !important; }

    /* Featured cards: slightly narrower on mobile */
    .fw-card { width:145px; }

    /* Ranked magazines: scale down on mobile */
    .top10-num { font-size:100px; width:68px; min-width:68px; margin-right:-8px; -webkit-text-stroke:2px #c8c8c8; }
    .top10-card { width:78px; min-width:78px; }
    .top10-item { margin-right:6px; }

    /* Rising Stars: compact but name visible */
    .rs-img { width:64px; height:64px; }
    .rs-name { font-size:11px; }
    .rs-company { display:none; }
    .rs-row { gap:10px; justify-content:flex-start; }
    .rs-item { min-width:72px; }

    /* Archive: portrait on mobile */
    .arc-img { height:160px; }
    .arc-title { font-size:15px; }
}

/* ── MOBILE APP-STYLE TAB BAR (below 992px) ── */
.app-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    display: flex; background: #fff; border-top: 1px solid var(--border);
    box-shadow: 0 -4px 18px rgba(0,0,0,.06);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.app-tab {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 4px 2px; color: #777; text-decoration: none; font-size: 10.5px; font-weight: 600;
    line-height: 1.15; text-align: center; border-radius: 10px; transition: color .15s;
}
.app-tab i { font-size: 20px; line-height: 1; }
.app-tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.app-tab.active, .app-tab:hover { color: var(--dark); }
.app-tab.active i { color: var(--gold); }
@media (max-width: 991px) {
    /* Room for the tab bar inside the dark footer, so no white strip shows below it */
    .site-footer { padding-bottom: calc(28px + 64px + env(safe-area-inset-bottom)); }
    .back-to-top-btn { bottom: calc(78px + env(safe-area-inset-bottom)) !important; }
}

/* ── LISTING PAGES (News, Stories, AI Tools) ── */
.lst-wrap { padding: 26px 0 56px; }
.lst-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.lst-card { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--border); color: inherit; text-decoration: none; }
.lst-grid > .lst-card:nth-child(-n+2) { border-top: none; padding-top: 4px; }
.lst-card-img { width: 200px; aspect-ratio: 16 / 10; height: auto; flex-shrink: 0; border-radius: 8px; object-fit: cover; background: #f0f0f0; align-self: flex-start; }
.lst-card-img.is-designed-cover { object-position: left center; }
.lst-card-img.is-news-cover { aspect-ratio: 1200 / 630; object-position: center; } /* whole cover, logo in the middle */

/* Guide cards (AI Tools list / homepage): gold-framed cover, title, summary, byline */
.gc-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 26px; }
/* 12-column grid: the first 3 guides get a row of 3 big cards (span 4),
   every guide after that sits in rows of 4 smaller cards (span 3) */
.gc-grid > * { grid-column: span 3; }
.gc-grid > :nth-child(-n+3) { grid-column: span 4; }
.gc-grid > :nth-child(n+4) .gc-body { padding: 16px 18px 18px; }
.gc-grid > :nth-child(n+4) .gc-title { font-size: 16.5px; line-height: 1.32; margin-bottom: 14px; -webkit-line-clamp: 3; }
.gc-grid > :nth-child(n+4) .gc-meta { font-size: 11.5px; }
.gc-grid > :nth-child(n+4) .gc-tool { width: 24px; height: 24px; }
.gc-grid > :nth-child(n+4) .gc-tool img { width: 16px; height: 16px; }
.gc-grid > :nth-child(n+4) .gc-img { border-width: 2px; }
.gc-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e4e4e4; border-radius: 6px; overflow: hidden; color: inherit; text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
/* Hover lift only where there is a real hover (mouse/trackpad). On touch screens a hover
   style on the first tap made phones need a second tap to open the post. */
@media (hover: hover) and (pointer: fine) {
    .gc-card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 12px 28px rgba(20,26,46,.10); }
    .gc-card:hover .gc-title { color: #8a6a10; }
}
/* No 300ms double-tap-zoom wait on links and buttons */
a, button { touch-action: manipulation; }
.gc-img { border: 3px solid var(--gold); border-radius: 6px 6px 0 0; overflow: hidden; background: #eef4fc; } /* cover runs edge to edge */
.gc-img picture { display: block; }
.gc-img img { display: block; width: 100%; aspect-ratio: 1200 / 630; height: auto; object-fit: cover; }
.gc-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.gc-title { font-size: clamp(18px, 1.45vw, 20px); font-weight: 600; line-height: 1.3; color: var(--dark); margin: 0 0 16px;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    min-height: 2.6em; } /* always room for 2 lines, so the font swap can't change card heights */
/* Footer: overlapping round logos of the listed tools, then author · date */
.gc-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.gc-tools { display: inline-flex; align-items: center; padding-left: 6px; }
.gc-tool { width: 28px; height: 28px; margin-left: -6px; border-radius: 50%; background: #fff; border: 1.5px solid #e6eaf2;
    display: inline-flex; align-items: center; justify-content: center; overflow: hidden; font-size: 11px; font-weight: 600; color: #16213d; }
.gc-tool img { width: 18px; height: 18px; object-fit: contain; display: block; }
.gc-more { background: #f1f4fa; font-size: 10.5px; color: #4b5266; }
.gc-sum { font-size: 16px; font-weight: 400; line-height: 1.4; color: #555; margin: 0 0 16px; max-height: 2.8em; overflow: hidden; }
.gc-meta { font-size: 12px; color: #6b7280; white-space: nowrap; }
@media (max-width: 1199px) { .gc-grid > :nth-child(n+4) .gc-title { font-size: 15.5px; } }
/* tablet and phone: two (then one) equal columns, so every card gets the same size */
@media (max-width: 991px)  { .gc-grid { gap: 20px; } .gc-grid > *, .gc-grid > :nth-child(-n+3) { grid-column: span 6; }
    .gc-grid > * .gc-body, .gc-grid > :nth-child(n+4) .gc-body { padding: 18px 20px 20px; }
    .gc-grid > * .gc-title, .gc-grid > :nth-child(n+4) .gc-title { font-size: 17px; line-height: 1.3; margin-bottom: 14px; } }
@media (max-width: 575px)  { .gc-grid { gap: 18px; } .gc-grid > *, .gc-grid > :nth-child(-n+3) { grid-column: span 12; } } /* keep the cover's left-aligned title in the crop */
.lst-card-body { min-width: 0; padding-top: 2px; }
.lst-title { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 16px; line-height: 1.35; color: var(--dark); margin: 0 0 6px; transition: color .15s; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.lst-card:hover .lst-title { color: var(--gold); }
.lst-summary { font-size: 13px; color: #666; line-height: 1.5; margin: 0 0 6px; } /* shown in full: excerpts are written short, never cut with … */
.lst-meta { font-size: 11px; color: #6b7280; white-space: nowrap; }
.lst-empty { text-align: center; padding: 56px 16px; color: #999; font-size: 14px; border: 1px dashed var(--border); border-radius: 12px; }
.lst-empty i { font-size: 28px; display: block; margin-bottom: 8px; opacity: .5; }
.lst-pager { margin-top: 26px; }

/* Category filter chips pinned under the header — one horizontally scrolling row */
.lst-filters { position: sticky; top: 63px; z-index: 990; background: #fff; border-bottom: 1px solid var(--border); }
.lst-filters-row { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.lst-filters-row::-webkit-scrollbar { display: none; }
.lst-chip { flex-shrink: 0; font-size: 12.5px; font-weight: 500; padding: 7px 15px; border-radius: 20px; border: 1px solid var(--border); color: #777; background: #fff; text-decoration: none; white-space: nowrap; transition: all .15s; }
.lst-chip:hover { border-color: #bbb; color: #444; }
.lst-chip.active { background: #333; border-color: #333; color: #fff; }

.nav-lnk.active { color: #fff; }

@media (max-width: 991px) {
    .lst-grid { grid-template-columns: 1fr; }
    .lst-grid > .lst-card:nth-child(2) { border-top: 1px solid var(--border); padding-top: 18px; }
}
@media (max-width: 575px) {
    .lst-wrap { padding: 18px 0 32px; }
    .lst-card { gap: 12px; padding: 14px 0; }
    .lst-card-img { width: 112px; aspect-ratio: 4 / 3; }
    .lst-card-img.is-news-cover { width: 132px; aspect-ratio: 1200 / 630; }
    .lst-title { font-size: 14.5px; -webkit-line-clamp: 3; }
    .lst-summary { display: none; } /* phones: title and date only, so cards stay clean */
    .lst-filters { top: 59px; }
}
.lst-results { transition: opacity .18s ease; }
.lst-results.is-loading { opacity: .35; }
@media (max-width: 767px) {
    /* Show every filter at once: an even 4-column grid of small chips */
    .lst-filters-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; gap: 6px; padding: 8px 0; }
    .lst-chip { font-size: 10.5px; padding: 5px 4px; text-align: center; overflow: hidden; text-overflow: ellipsis; }
}

/* ── AI Categories directory (/ai-categories, /ai-categories/{slug}, /ai-tool/{slug}) ── */
.dir-hero { position: relative; overflow: hidden; color: #fff;
    background: radial-gradient(1200px 520px at 85% 115%, #2a3c6e 0%, transparent 60%), var(--navy-band); }
.dir-hero::before { content: ""; position: absolute; width: 760px; height: 760px; right: -220px; top: -330px; border-radius: 50%; pointer-events: none;
    background: repeating-radial-gradient(circle, transparent 0 46px, rgba(201,160,32,.16) 46px 47.5px); }
.dir-hero-fade { position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(31,47,90,0) 28%, rgba(52,82,140,.55) 52%, rgba(160,184,224,.85) 74%, #eef2f8 100%); }
/* Same hero as the AI Tools homepage: same fade, height and card overlap */
.dir-hero-inner { position: relative; padding-top: 34px; padding-bottom: 190px; }
.dir-crumbs ol { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; font-size: 12.5px; }
.dir-crumbs li { color: rgba(255,255,255,.72); }
.dir-crumbs li + li::before { content: "›"; margin: 0 8px; color: rgba(255,255,255,.4); }
.dir-crumbs a { color: rgba(255,255,255,.55); text-decoration: none; }
.dir-crumbs a:hover { color: #fff; }
.dir-title { font-size: clamp(28px, 3.6vw, 40px); font-weight: 700; line-height: 1.12; letter-spacing: -.6px; color: #fff; margin: 0; }
.dir-title span { color: var(--gold); }
.dir-sub { font-size: 15px; color: #c3cbe0; margin: 10px 0 0; max-width: 680px; line-height: 1.55; }
.dir-facts { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.dir-facts li { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #aeb7cf; }
.dir-facts i { color: var(--gold); display: inline-block; width: 1em; }
.dir-wrap { background: #eef2f8; padding: 0 0 56px; }
.dir-wrap > .container-xl { position: relative; margin-top: -150px; }
.dir-panel { background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(13,17,23,.08); }

/* Tool logo: saved site icon in a soft rounded square, or the name's first letter */
.dir-logo { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: #fff;
    border: 1px solid #e6eaf2; overflow: hidden; font-weight: 700; color: #16213d; }
.dir-logo img { width: 62%; height: 62%; object-fit: contain; display: block; }

/* Index: category cards with their top 10 tools */
.dir-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.dir-card { display: flex; flex-direction: column; padding: 22px 18px 18px; }
.dir-card-head { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 17px; font-weight: 600; color: var(--dark);
    padding-bottom: 14px; margin-bottom: 8px; border-bottom: 2px solid; border-image: linear-gradient(90deg, #EDB516, #4f74c8) 1; }
.dir-card-head i { color: #c9971a; font-size: 19px; }
.dir-card-head a { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .dir-card-head a:hover { color: #8a6a10; } }
.dir-top { list-style: none; margin: 0 0 16px; padding: 0; counter-reset: top; }
.dir-top li { counter-increment: top; border-bottom: 1px solid #eef1f6; }
.dir-top li:last-child { border-bottom: 0; }
.dir-top a { display: flex; align-items: center; gap: 10px; padding: 13px 2px; color: var(--dark); text-decoration: none; font-size: 14.5px; }
.dir-top a::before { content: counter(top) "."; width: 14px; text-align: right; font-size: 13px; color: #9aa0ad; flex-shrink: 0; }
.dir-top .dir-name { flex: 1; min-width: 0; white-space: nowrap; line-height: 1.3; }
/* What the tool does, one muted line under its name */
.dir-top .dir-name small { display: block; font-size: 12.5px; color: #6b7280; margin-top: 2px; }
.dir-top a i { color: #c3c8d4; font-size: 12px; }
.dir-all { margin-top: auto; display: block; text-align: center; padding: 11px; border-radius: 10px; background: #16213d; color: #fff; font-size: 13px;
    font-weight: 500; letter-spacing: .02em; text-decoration: none; }
.dir-soon { margin-top: 26px; text-align: center; font-size: 13px; color: #5f6675; }
@media (hover: hover) and (pointer: fine) {
    .dir-top a:hover .dir-name { color: #8a6a10; }
    .dir-all:hover { background: #22325c; color: #fff; }
}

/* Category: one row per tool */
.dir-list { list-style: none; margin: 0; padding: 8px 26px; }
.dir-row { border-bottom: 1px solid #eef1f6; }
.dir-row:last-child { border-bottom: 0; }
.dir-row a { display: flex; align-items: flex-start; gap: 18px; padding: 20px 0; color: inherit; text-decoration: none; }
.dir-row-body { min-width: 0; }
.dir-row h2 { font-size: 18px; font-weight: 600; color: var(--dark); margin: 2px 0 4px; }
.dir-row p { font-size: 14.5px; color: #4b5266; margin: 0 0 8px; line-height: 1.45; }
.dir-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12.5px; color: #7a8193; }
.dir-tags i { color: #a9afbd; }
.dir-tags span + span::before { content: "·"; margin-right: 10px; color: #c3c8d4; }
.dir-guide { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; padding: 14px 18px; border-radius: 12px; background: #fff8e6; color: #5b4708; font-size: 14px; text-decoration: none; border: 1px solid #f3e1a8; }
.dir-guide i { color: #c9971a; font-size: 18px; }
.dir-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dir-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid #e1e6ef; font-size: 13px; color: #33394a; text-decoration: none; }
.dir-chip i { color: #c9971a; }
.dir-h { font-size: 18px; font-weight: 600; color: var(--dark); margin: 34px 0 6px; }
@media (hover: hover) and (pointer: fine) { .dir-row a:hover h2 { color: #8a6a10; } .dir-chip:hover { border-color: var(--gold); } }

/* Tool page */
.dir-tool-head { display: flex; align-items: center; gap: 18px; }
.dir-tool-head .dir-logo { border: 0; border-radius: 14px; }
.dir-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.dir-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 10px; font-size: 14px; font-weight: 600; text-decoration: none; }
.dir-btn-gold { background: var(--gold); color: #16213d; }
.dir-btn-ghost { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: #fff; }
.dir-tool { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.dir-main { padding: 26px 28px 30px; }
.dir-shot { margin: 0 0 22px; border-radius: 10px; overflow: hidden; border: 1px solid #e6eaf2; }
.dir-shot img { display: block; width: 100%; height: auto; }
.dir-main h2 { font-size: 20px; font-weight: 600; color: var(--dark); margin: 26px 0 10px; }
.dir-main h2:first-of-type { margin-top: 0; }
.dir-main > p { font-size: 16px; line-height: 1.65; color: #33394a; }
.dir-uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dir-use { padding: 16px; border-radius: 12px; background: #f6f8fc; border: 1px solid #e8ecf4; }
.dir-use b { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: #16213d; font-size: 13px; align-items: center; justify-content: center; }
.dir-use h3 { font-size: 15px; font-weight: 600; color: var(--dark); margin: 10px 0 6px; }
.dir-use p { font-size: 14px; line-height: 1.5; color: #4b5266; margin: 0; }
.dir-india { margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: #fff8e6; border: 1px solid #f3e1a8; font-size: 14.5px; color: #5b4708; }
.dir-similar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dir-sim { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid #e8ecf4; text-decoration: none; color: inherit; }
.dir-sim b { display: block; font-size: 14.5px; font-weight: 600; color: var(--dark); }
.dir-sim span { display: block; font-size: 12.5px; color: #7a8193; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dir-sim > div { min-width: 0; }
.dir-side { padding: 22px; position: sticky; top: 76px; }
.dir-side h2 { font-size: 15px; font-weight: 600; color: var(--dark); margin: 0 0 12px; }
.dir-side dl { margin: 0; }
.dir-side dt { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #8a91a2; font-weight: 600; margin-top: 12px; }
.dir-side dd { margin: 3px 0 0; font-size: 14.5px; color: #22283a; line-height: 1.45; }
.dir-side a { color: #A87A00; }
.dir-src { margin-top: 16px; padding-top: 12px; border-top: 1px solid #eef1f6; font-size: 12px; color: #8a91a2; line-height: 1.6; }
.dir-src a { color: #8a91a2; word-break: break-all; }
@media (hover: hover) and (pointer: fine) { .dir-sim:hover { border-color: var(--gold); } }

/* 4 cards a row only on wide screens; below that each card needs the room so every one-line description fits */
@media (max-width: 1399px) { .dir-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991px)  { .dir-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 991px) {
    .dir-tool { grid-template-columns: minmax(0, 1fr); } /* minmax: never wider than the screen */
    .dir-side { position: static; }
    .dir-uses, .dir-similar { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575px) {
    .dir-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .dir-hero-inner { padding-top: 30px; padding-bottom: 150px; }
    .dir-wrap > .container-xl { margin-top: -110px; }
    .dir-list { padding: 4px 16px; }
    .dir-row a { gap: 14px; }
    .dir-main { padding: 20px 18px 24px; }
}

/* Tool page (/ai-tool/{slug}): everything on one desktop screen */
.tp-hero { position: relative; overflow: hidden; color: #fff;
    background: radial-gradient(1200px 520px at 85% 115%, #2a3c6e 0%, transparent 60%), var(--navy-band); }
.tp-hero::before { content: ""; position: absolute; width: 640px; height: 640px; right: -200px; top: -300px; border-radius: 50%; pointer-events: none;
    background: repeating-radial-gradient(circle, transparent 0 46px, rgba(201,160,32,.16) 46px 47.5px); }
.tp-hero-inner { position: relative; padding-top: 18px; padding-bottom: 22px; }
.tp-hero .dir-crumbs ol { margin-bottom: 12px; }
.tp-head { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.tp-title { font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; letter-spacing: -.4px; color: #fff; margin: 0; line-height: 1.15; }
.tp-tagline { font-size: 15px; color: #c3cbe0; margin: 4px 0 0; }
.tp-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.tp-wrap { background: #eef2f8; padding: 18px 0 28px; }
.tp-grid { display: grid; grid-template-columns: 1.15fr 1fr .85fr; gap: 16px; align-items: stretch; }
.tp-card { background: #fff; border-radius: 14px; box-shadow: 0 8px 24px rgba(13,17,23,.06); padding: 18px 20px; min-width: 0; }
.tp-card h2 { font-size: 16px; font-weight: 600; color: var(--dark); margin: 0 0 10px; }
.tp-shot { margin: 0 0 14px; border-radius: 10px; overflow: hidden; border: 1px solid #e6eaf2; aspect-ratio: 16 / 9; }
.tp-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tp-about p { font-size: 14.5px; line-height: 1.55; color: #33394a; margin: 0; }
.tp-about .tp-india { margin-top: 10px; padding: 9px 12px; border-radius: 10px; background: #fff8e6; border: 1px solid #f3e1a8; font-size: 13.5px; color: #5b4708; }
.tp-uses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tp-uses li { display: flex; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #f6f8fc; border: 1px solid #e8ecf4; }
.tp-uses b { flex-shrink: 0; display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: #16213d; font-size: 13px; align-items: center; justify-content: center; }
.tp-uses h3 { font-size: 14.5px; font-weight: 600; color: var(--dark); margin: 2px 0 3px; }
.tp-uses p { font-size: 13.5px; line-height: 1.45; color: #4b5266; margin: 0; }
.tp-facts dl { margin: 0; }
.tp-facts dt { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #8a91a2; font-weight: 600; margin-top: 10px; }
.tp-facts dt:first-child { margin-top: 0; }
.tp-facts dd { margin: 2px 0 0; font-size: 14px; color: #22283a; line-height: 1.4; }
.tp-facts a { color: #A87A00; }
.tp-src { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid #eef1f6; font-size: 11.5px; color: #8a91a2; line-height: 1.5; }
.tp-src a { color: #8a91a2; word-break: break-all; }
.tp-similar { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tp-similar-h { font-size: 13px; font-weight: 600; color: #4b5266; margin-right: 4px; }
.tp-similar a { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; background: #fff; border: 1px solid #e1e6ef; font-size: 13px; color: #33394a; text-decoration: none; }
.tp-similar .dir-logo { border-radius: 50%; }
@media (hover: hover) and (pointer: fine) { .tp-similar a:hover { border-color: var(--gold); } }
@media (max-width: 1199px) { .tp-grid { grid-template-columns: 1fr 1fr; } .tp-facts { grid-column: 1 / -1; } }
@media (max-width: 767px) {
    .tp-grid { grid-template-columns: minmax(0, 1fr); }
    .tp-actions { width: 100%; }
    .tp-actions .dir-btn { flex: 1; justify-content: center; }
}
/* Short laptop screens (1366x768 and similar): tighter, so the tool page still fits without scrolling */
@media (min-width: 1200px) and (max-height: 800px) {
    .tp-hero-inner { padding-top: 12px; padding-bottom: 14px; }
    .tp-hero .dir-crumbs ol { margin-bottom: 8px; }
    .tp-wrap { padding-top: 12px; padding-bottom: 16px; }
    .tp-card { padding: 14px 16px; }
    .tp-shot { aspect-ratio: 16 / 7; margin-bottom: 10px; }
    .tp-uses { gap: 8px; }
    .tp-uses li { padding: 10px 12px; }
    .tp-about p { font-size: 14px; line-height: 1.5; }
    .tp-similar { margin-top: 10px; }
}
/* Quick facts as light labels */
.tp-labels { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.tp-labels li, .tp-labels a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: #f4f6fa; border: 1px solid #e6eaf2;
    font-size: 13px; color: #4b5266; line-height: 1.3; text-decoration: none; }
.tp-labels li:has(> a) { padding: 0; border: 0; background: none; }
.tp-labels i { color: #9aa3b5; font-size: 13px; }
.tp-labels .bi-dot { margin: 0 -4px 0 -6px; font-size: 16px; }
.tp-labels .is-good { background: #eefaf3; border-color: #cdeedb; color: #1f7a4a; } .tp-labels .is-good i { color: #2e9b61; }
.tp-labels .is-warn { background: #fff7e8; border-color: #f6e2b4; color: #8a6312; } .tp-labels .is-warn i { color: #c9971a; }
.tp-labels .is-muted { color: #8a91a2; }
.tp-labels .is-price { background: #eef3ff; border-color: #cfdcfb; color: #2a4a9a; font-weight: 500; } .tp-labels .is-price i { color: #4f74c8; }
.tp-sub { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #8a91a2; font-weight: 600; margin: 16px 0 8px; }
@media (hover: hover) and (pointer: fine) { .tp-labels a:hover { border-color: var(--gold); color: #22283a; } }
@media (min-width: 1200px) and (max-height: 800px) { .tp-sub { margin: 12px 0 6px; } .tp-labels { gap: 6px; } .tp-labels li, .tp-labels a { padding: 4px 10px; } }
/* Tool page FAQs (below the one-screen part) */
.tp-faq { margin-top: 30px; }
.tp-faq h2 { font-size: 20px; font-weight: 600; color: var(--dark); margin: 0 0 12px; }
.tp-faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.tp-faq-item { background: #fff; border-radius: 12px; border: 1px solid #e6eaf2; padding: 0 16px; }
.tp-faq-item summary { cursor: pointer; list-style: none; padding: 14px 24px 14px 0; position: relative; font-size: 15px; font-weight: 600; color: var(--dark); }
.tp-faq-item summary::-webkit-details-marker { display: none; }
.tp-faq-item summary::after { content: "+"; position: absolute; right: 0; top: 12px; font-size: 20px; color: #c9971a; font-weight: 400; }
.tp-faq-item[open] summary::after { content: "–"; }
.tp-faq-item p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.55; color: #4b5266; }
@media (max-width: 767px) { .tp-faq-list { grid-template-columns: minmax(0, 1fr); } }
.tp-src { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-note { margin: 6px 0 0; font-size: 11.5px; color: #8a91a2; line-height: 1.5; }
.tp-note i { color: #b3b9c6; margin-right: 2px; }
.tp-note a { color: #8a91a2; }
.dir-note { margin-top: 12px; font-size: 12.5px; }
/* Category page: tool list + related guides on the right */
.cat-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.cat-main { min-width: 0; }
.dir-row .tp-labels { margin-top: 2px; }
.dir-row .tp-labels li { font-size: 12.5px; padding: 4px 10px; }
.cat-side { position: sticky; top: 76px; background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(13,17,23,.08); padding: 18px; }
.cat-side h2 { font-size: 15px; font-weight: 600; color: var(--dark); margin: 0 0 12px; }
.cat-guide { display: block; text-decoration: none; color: inherit; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #eef1f6; }
.cat-guide:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.cat-guide img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: 8px; border: 2px solid var(--gold); }
.cat-guide span { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--dark); margin-top: 8px; }
@media (hover: hover) and (pointer: fine) { .cat-guide:hover span { color: #8a6a10; } }
@media (max-width: 991px) { .cat-layout { grid-template-columns: minmax(0, 1fr); } .cat-side { position: static; } }

/* Typed gold word in a heading (partials/typed-word): every word stacked in one grid cell,
   so the box is as wide as the longest and nothing around it moves */
.at-rot { display: inline-grid; vertical-align: bottom; }
.at-rot > * { grid-area: 1 / 1; }
.at-rot-size { visibility: hidden; }
.at-rot-word { white-space: nowrap; color: var(--gold); }
.at-caret { display: inline-block; width: 3px; height: .9em; margin-left: 4px; vertical-align: -.08em; background: var(--gold); border-radius: 2px; animation: at-blink 1s steps(1) infinite; }
@keyframes at-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .at-caret { display: none; } }

/* Navy header and the hero bands under it share one left-to-right gradient (--navy-band), and the
   heroes' lighter glow sits low, so their top edge is exactly the header's colour: no seam */
:root { --navy-band: linear-gradient(90deg, #0d1117 0%, #16213d 55%, #1f2f5a 100%); }
.main-nav { background: var(--navy-band); border-bottom: 0; box-shadow: none; }
.main-nav .nav-lnk { color: rgba(255,255,255,.72); }
.main-nav .nav-lnk:hover { color: var(--gold); }
.main-nav .nav-lnk.active { color: #fff; box-shadow: inset 0 -2px 0 var(--gold); }
.main-nav .nav-date { color: rgba(255,255,255,.5); }
.main-nav .nav-search { font-size: 18px; color: #fff; }
.main-nav .brand .light { color: #fff; }
/* Pages that open with a navy hero: the hero runs up behind the header (54px), and the header is
   see-through until you scroll, so the hero's rings continue right to the top of the page */
main > .at-hero:first-child, main > .dir-hero:first-child, main > .tp-hero:first-child, main > .news-band:first-child { margin-top: -54px; padding-top: 54px; }
body:has(main > .at-hero:first-child, main > .dir-hero:first-child, main > .tp-hero:first-child, main > .news-band:first-child) .main-nav:not(.is-scrolled) { background: transparent; }
.main-nav { transition: background .2s; }
/* AI Categories hero: title left, facts right; facts drop below on narrow screens */
.dir-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; }
.dir-head .dir-facts { margin: 0 0 6px; }

/* News page (/news): chips in the hero, then main story + 3 + 3, then rows of 4 */
.nl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.nl-chips .lst-chip { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #dfe4f1; }
.nl-chips .lst-chip.active { background: var(--gold); border-color: var(--gold); color: #16213d; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .nl-chips .lst-chip:hover { background: rgba(255,255,255,.16); color: #fff; } }
.nl-top { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 20px; align-items: stretch; }
.nl-lead { background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(13,17,23,.08); }
.nl-lead { display: flex; flex-direction: column; overflow: hidden; color: inherit; text-decoration: none; }
.nl-lead img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; }
.nl-lead-body { padding: 18px 22px 22px; }
.nl-lead h2 { font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--dark); margin: 8px 0 10px; }
.nl-lead p { font-size: 15px; line-height: 1.55; color: #4b5266; margin: 0 0 12px; }
.nl-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a6a10; background: #fff8e6; border: 1px solid #f3e1a8; padding: 3px 9px; border-radius: 999px; }
.nl-meta { font-size: 12px; color: #6b7280; }
.nl-col { display: flex; flex-direction: column; gap: 16px; } /* each story its own card, with a gap between */
.nl-item { display: flex; gap: 14px; align-items: center; padding: 14px; background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(13,17,23,.08); color: inherit; text-decoration: none; flex: 1; }
.nl-item img { display: block; width: 150px; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.nl-item h3 { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--dark); margin: 0 0 6px; }
.nl-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 26px; }
.nl-three .gc-card { border: 0; border-radius: 14px; box-shadow: 0 10px 30px rgba(13,17,23,.08); }
.nl-three .gc-img { border-radius: 14px 14px 0 0; }
.nl-list { margin-top: 0; background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(13,17,23,.08); padding: 4px 22px; }
.nl-list .lst-card:first-child { border-top: 0; }
@media (max-width: 991px) { .nl-three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .nl-three { grid-template-columns: minmax(0, 1fr); } .nl-list { padding: 4px 16px; } }
@media (hover: hover) and (pointer: fine) { .nl-lead:hover h2, .nl-item:hover h3 { color: #8a6a10; } }
@media (max-width: 1199px) { .nl-top { grid-template-columns: 1fr 1fr; } .nl-lead { grid-column: 1 / -1; } }
@media (max-width: 767px)  { .nl-top { grid-template-columns: minmax(0, 1fr); } .nl-lead h2 { font-size: 19px; } .nl-item img { width: 104px; } }
.nl-item picture { flex-shrink: 0; width: 150px; } /* fixed thumbnail size whatever the title length */
.nl-item img { width: 100%; }
@media (max-width: 767px) { .nl-item picture { width: 110px; } }
/* Side stories: the cover runs edge to edge down the card's left side, gold-framed like the AI Tools cards */
.nl-item { padding: 0; gap: 0; align-items: stretch; overflow: hidden; }
.nl-item picture { width: 46%; flex-shrink: 0; display: block; border-right: 3px solid var(--gold); background: #eef4fc; }
.nl-item img { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-fit: cover; object-position: center; }
.nl-item > div { padding: 14px 16px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.nl-lead picture { display: block; border-bottom: 3px solid var(--gold); }
@media (max-width: 767px) { .nl-item picture { width: 40%; } }
/* Side covers fill their slot edge to edge; the slot is a touch wider so the centre of a news
   cover (logo, founders) stays fully in view */
.nl-item picture { width: 50%; }
/* Side-story covers framed on all four sides in gold, like the AI Tools cards */
.nl-item picture { border: 3px solid var(--gold); border-radius: 14px 0 0 14px; overflow: hidden; }
.nl-lead picture { border: 3px solid var(--gold); border-radius: 14px 14px 0 0; overflow: hidden; }
.nl-item .nl-tag { align-self: flex-start; margin-bottom: 8px; font-size: 10px; padding: 2px 8px; }

/* Homepage sections (Funding News, AI Categories, AI Resources) */
.hm-sec { margin-top: 56px; }
.hm-sec.hm-first { margin-top: 0; }
.hm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; margin-bottom: 20px; }
.hm-head-after { margin: 18px 0 0; justify-content: flex-end; }

.hm-title { font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; letter-spacing: -.4px; color: var(--dark); margin: 0; }
.hm-sub { font-size: 14.5px; color: #555b6b; margin: 6px 0 0; }
.hm-all { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #8a6a10; text-decoration: none; white-space: nowrap; }
.hm-all i { transition: transform .15s; }
@media (hover: hover) and (pointer: fine) { .hm-all:hover i { transform: translateX(3px); } }
.dir-wrap { padding-bottom: 64px; }
/* Homepage AI Categories: one sideways-scrolling row. 3.5 cards in view on desktop (the half card
   shows there's more), about 1.2 on phones; cards snap into place */
.hm-scroll { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 2px;
    padding: 4px 2px 44px; margin: -4px -2px -26px; scrollbar-width: thin; /* room for the cards' shadow to fade out (else it shows as a grey band) */ scrollbar-color: #c9d1e0 transparent; -webkit-overflow-scrolling: touch; }
/* Rows still scroll sideways (swipe, trackpad, the arrow buttons); the scrollbar itself is hidden */
.hm-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.hm-scroll::-webkit-scrollbar { display: none; }
.hm-scroll > .dir-card { flex: 0 0 calc((100% - 3 * 20px) / 3.5); scroll-snap-align: start; }
@media (max-width: 991px) { .hm-scroll > .dir-card { flex-basis: calc((100% - 20px) / 1.6); } }
@media (max-width: 575px) { .hm-scroll { gap: 14px; } .hm-scroll > .dir-card { flex-basis: 82%; } }
/* Homepage AI Resources: same sideways row; guide cards keep one size (the 3-big/4-small grid rules don't apply here) */
.hm-scroll > .gc-card { flex: 0 0 calc((100% - 3 * 20px) / 3.5); scroll-snap-align: start; grid-column: auto; }
.hm-guides > .gc-card { border: 0; border-radius: 12px; box-shadow: 0 10px 30px rgba(13,17,23,.08); }
.hm-guides .gc-img { border-radius: 12px 12px 0 0; }
.hm-guides > .gc-card .gc-title { font-size: 17px; line-height: 1.32; }
.hm-guides > .gc-card .gc-body { padding: 16px 18px 18px; }
@media (max-width: 991px) { .hm-scroll > .gc-card { flex-basis: calc((100% - 20px) / 1.6); } }
@media (max-width: 575px) { .hm-scroll > .gc-card { flex-basis: 82%; } }
/* Side columns always have 3 equal slots, so a card keeps its size even when a column has fewer posts */
.nl-col { display: grid; grid-auto-rows: minmax(0, 1fr); gap: 16px; }
.nl-item { flex: none; min-height: 0; }
@media (max-width: 767px) { .nl-col { grid-template-rows: none; } }

/* News: list on the left, sidebar on the right (stacks under the list on narrow screens) */
.nl-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; margin-top: 30px; }
.nl-side { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 90px; }
.ns-box { background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(13,17,23,.08); padding: 18px 20px; }
.ns-head { font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 700; color: var(--dark); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.ns-head i { color: var(--gold); }
.ns-rank { list-style: none; counter-reset: ns; padding: 0; margin: 0; }
.ns-rank li { counter-increment: ns; display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.ns-rank li:first-child { border-top: 0; padding-top: 0; }
.ns-rank li::before { content: counter(ns); font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 20px; color: var(--gold); line-height: 1.1; min-width: 18px; }
.ns-rank a { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--dark); text-decoration: none; }
.ns-rank a:hover, .ns-model:hover span { color: #8a6a10; }
.ns-model { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); color: inherit; text-decoration: none; }
.ns-head + .ns-model { border-top: 0; padding-top: 0; }
.ns-model img { width: 96px; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border: 2px solid var(--gold); border-radius: 8px; flex: none; }
.ns-model span { font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--dark); }
.ns-all { display: inline-flex; gap: 6px; margin-top: 10px; font-size: 13px; font-weight: 600; color: #8a6a10; text-decoration: none; }
.ns-wa { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 14px; background: #e8f8ee; border: 1px solid #b7e4c7; color: #14532d; text-decoration: none; }
.ns-wa i { font-size: 26px; color: #25d366; }
.ns-wa b { font-family: 'Poppins', sans-serif; font-size: 15.5px; }
.ns-wa span { font-size: 13.5px; line-height: 1.45; }
@media (max-width: 991px) { .nl-split { grid-template-columns: minmax(0, 1fr); } .nl-side { position: static; } }
.gr-loading { text-align: center; color: #6b7385; font-size: 14px; padding: 18px 0 22px; }
.hm-all-light { color: #e9c45a; }
.hm-all-light:hover { color: #fff; }

/* Tool page, lighter on text: icon use cases, big free-plan and price tiles */
.tp-about { display: flex; flex-direction: column; }
/* The screenshot fills its card edge to edge */
.tp-about { padding: 0; overflow: hidden; }
.tp-about .tp-shot { margin: 0; flex: 1; aspect-ratio: 16 / 10; border: 0; border-radius: 0; }
/* A wider first column so the card is about the screenshot's own 16:10 shape and little gets cut */
.tp-grid { grid-template-columns: 1.35fr 1fr .85fr; }
@media (max-width: 1199px) { .tp-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .tp-grid { grid-template-columns: minmax(0, 1fr); } }
.tp-about .tp-shot { position: relative; overflow: hidden; background: #f4f6fa; }
/* The whole screenshot, never cropped; any spare room is filled with a blurred copy of it */
.tp-about .tp-shot::before { content: ""; position: absolute; inset: -30px; background: var(--shot) center / cover no-repeat; filter: blur(22px) saturate(1.1); opacity: .55; }
.tp-about .tp-shot img { position: relative; object-fit: contain; object-position: center; }
.tp-about .tp-india { margin: 0; border-radius: 0; border-width: 1px 0 0; }
.tp-about .tp-india { display: flex; gap: 8px; align-items: flex-start; }
.tp-use-ic { flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px; background: #fff4d6; color: #a87a00; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; }
.tp-uses li { align-items: center; }
.tp-uses h3 { font-size: 15.5px; margin: 0 0 2px; }
.tp-uses p { font-size: 13px; color: #6b7385; }
.tp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px; }
.tp-stat { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 12px 14px; border-radius: 12px; background: #f4f6fa; border: 1px solid #e6eaf2; min-height: 74px; }
.tp-stat i { font-size: 20px; color: #9aa3b5; }
.tp-stat b { font-family: 'Poppins', sans-serif; font-size: clamp(16px, 1.35vw, 20px); white-space: nowrap; font-weight: 700; color: var(--dark); line-height: 1.2; }
.tp-stat small { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #8a91a2; font-weight: 600; }
.tp-stat.is-good { background: #eefaf3; border-color: #cdeedb; } .tp-stat.is-good i, .tp-stat.is-good b { color: #1f7a4a; }
.tp-stat.is-warn { background: #fff7e8; border-color: #f6e2b4; } .tp-stat.is-warn i, .tp-stat.is-warn b { color: #8a6312; }
.tp-stat.is-muted b { color: #6b7385; font-size: 17px; }
.tp-src i { color: #2e9b61; }
.tp-facts .tp-src { white-space: normal; }
.tp-desc { line-height: 1.55; max-width: 860px; }
.tp-head .dir-tool-head { align-items: flex-start; }

/* Back pill + breadcrumb on one row (AI Tools category and tool pages), same as on posts */
.dir-topline { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.dir-topline .dir-crumbs ol, .tp-hero .dir-topline .dir-crumbs ol { margin: 0; }
.dir-back { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: #c3cbe0; text-decoration: none;
    padding: 6px 12px 6px 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 20px; transition: all .15s; }
.dir-back:hover { color: #fff; border-color: rgba(255,255,255,.45); }
/* Small "visit website" icon right after the tool's name */
.tp-visit-ic { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-left: 12px; vertical-align: middle;
    border-radius: 8px; background: rgba(255,255,255,.1); color: #c3cbe0; font-size: 15px; text-decoration: none; transition: all .15s; }
.tp-visit-ic:hover { background: var(--gold); color: #16213d; }

/* AI Tools search and filters (frontend.ai-directory._filters) */
/* A compact panel, centred: the search on top, one row of filters under it */
.dir-filter-bar { position: relative; max-width: 720px; margin: 0 auto 18px; background: #fff; border-radius: 16px; box-shadow: 0 8px 24px rgba(13,17,23,.06); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.dir-search { display: flex; align-items: center; gap: 10px; background: #f4f6fa; border: 1px solid #e3e8f1; border-radius: 12px; padding: 0 6px 0 14px; margin: 0; }
.dir-search:focus-within { border-color: var(--gold); background: #fff; }
.dir-search i { color: #8a93a8; font-size: 16px; }
.dir-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 15.5px; padding: 11px 0; color: #16213d; }
/* Category dropdown inside the search box, after a thin divider */
.dir-cat { flex: 0 0 auto; max-width: 46%; border: 0; border-left: 1px solid #dfe5ef; background: transparent; padding: 6px 8px 6px 14px; font-size: 14px; font-weight: 500; color: #33394a; font-family: inherit; cursor: pointer; outline: 0; }
.dir-fchips { display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; overflow-x: auto; scrollbar-width: none; }
.dir-fchips::-webkit-scrollbar { display: none; }
.dir-fchip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid #dfe5ef; font-size: 13px; color: #33394a; cursor: pointer; transition: all .15s; font-family: inherit; white-space: nowrap; }
.dir-fchip i { color: #8a93a8; }
.dir-fchip:hover { border-color: var(--gold); }
.dir-fchip[aria-pressed="true"] { background: #16213d; border-color: #16213d; color: #fff; }
.dir-fchip[aria-pressed="true"] i { color: var(--gold); }
.dir-fchip:disabled { opacity: .4; cursor: default; }
.dir-fcount { font-size: 11.5px; color: #8a91a2; background: #f1f4f9; border-radius: 999px; padding: 1px 7px; }
.dir-fchip[aria-pressed="true"] .dir-fcount { background: rgba(255,255,255,.14); color: #dfe5ef; }
.dir-sel { flex-shrink: 0; border: 1px solid #dfe5ef; border-radius: 999px; padding: 6px 12px; font-size: 13px; color: #33394a; background: #fff; font-family: inherit; cursor: pointer; }
.dir-sel.is-on { background: #16213d; border-color: #16213d; color: #fff; }
/* "More" opens a small panel under the row with the other filters and sort */
/* Reset shows once any search, filter or sort is on */
.dir-reset { flex-shrink: 0; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid #f3e1a8; border-radius: 50%; background: #fff8e6; padding: 0; font-size: 15px; font-weight: 600; color: #A87A00; cursor: pointer; font-family: inherit; }
.dir-reset[hidden] { display: none; }
.dir-reset:hover { color: #7a5a00; }
.dir-fscroll .dir-fchips { gap: 6px; }
.dir-fscroll .dir-fchip { padding: 6px 10px; font-size: 12.5px; gap: 5px; }
.dir-fscroll .dir-fcount { padding: 1px 6px; font-size: 11px; }
.dir-more-btn.is-on { border-color: #16213d; }
.dir-more-n { font-size: 11px; font-weight: 700; color: #16213d; background: var(--gold); border-radius: 999px; padding: 1px 7px; }
.dir-more { position: absolute; z-index: 20; top: calc(100% - 6px); right: 16px; width: min(440px, calc(100% - 32px)); background: #fff; border: 1px solid #e3e8f1; border-radius: 14px;
    box-shadow: 0 16px 40px rgba(13,17,23,.16); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.dir-more[hidden] { display: none; }
.dir-more-h { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a91a2; margin-bottom: 6px; }
.dir-more-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.dir-fstatus { max-width: 720px; margin: -6px auto 14px; font-size: 13.5px; color: #4b5266; }
.dir-fstatus button { border: 0; background: none; padding: 0; margin-left: 6px; color: #A87A00; font-weight: 600; cursor: pointer; text-decoration: underline; }
.dir-fscroll { position: relative; }
.dir-fscroll::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 64px; pointer-events: none; opacity: 0; transition: opacity .2s;
    background: linear-gradient(to right, rgba(255,255,255,0), #fff 70%); }
.dir-fmore { position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 1; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #dfe5ef;
    background: #fff; color: #33394a; display: none; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(13,17,23,.08); }
.dir-fscroll.has-more::after { opacity: 1; }
.dir-fscroll.has-more .dir-fmore { display: inline-flex; }
@media (max-width: 767px) {
    .dir-fchips { margin: 0 -16px; padding: 0 16px; }
    .dir-cat { max-width: 42%; font-size: 13px; }
}
/* Search results on /ai-tools: the same width as the filter panel, centred under it */
.dir-results { max-width: 720px; margin: 0 auto 20px; }
.dir-results .dir-list { padding: 4px 20px; }
.dir-results .dir-row a { gap: 14px; padding: 14px 0; }
.dir-results .dir-logo { width: 44px !important; height: 44px !important; }
.dir-results .dir-row h2 { font-size: 16px; }
.dir-results .dir-row p { font-size: 13.5px; margin-bottom: 6px; }
.dir-row[hidden] { display: none; }
.dir-row-cat { margin-left: 10px; font-size: 11.5px; font-weight: 600; color: #8a6312; background: #fff7e8; border: 1px solid #f6e2b4; border-radius: 999px; padding: 2px 9px; vertical-align: middle; }
@media (max-width: 767px) {
    .dir-fchips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
    .dir-fchips::-webkit-scrollbar { display: none; }
    .dir-fchip { flex-shrink: 0; }
    .dir-sort { max-width: 42%; }
}
/* Category pages: the filter panel runs the full width of the list */
.cat-main .dir-filter-bar, .cat-main .dir-fstatus { max-width: none; margin-left: 0; margin-right: 0; }
/* Sort as an icon; the native select sits invisibly on top so a click opens its list */
.dir-sort-btn { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0;
    border-radius: 50%; border: 1px solid #dfe5ef; background: #fff; color: #33394a; font-size: 14px; cursor: pointer; }
.dir-sort-btn select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dir-sort-btn:hover { border-color: var(--gold); }
.dir-sort-btn.is-on { background: #16213d; border-color: #16213d; color: var(--gold); }
.dir-sort-btn { margin-left: auto; }
.dir-reset:not([hidden]) + .dir-sort-btn { margin-left: 0; }

/* Filter chips under a listing title (Business Models sectors, AI Resources topics, News categories) */
.bm-chips { display: flex; gap: 8px; margin-top: 18px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.bm-chips::-webkit-scrollbar { display: none; }
.bm-chips a { flex: 0 0 auto; font-size: 12.5px; font-weight: 500; color: #d6dcec; text-decoration: none; white-space: nowrap;
    padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); }
.bm-chips a:hover { color: #fff; border-color: rgba(255,255,255,.45); }
.bm-chips a.on { color: #16213d; background: var(--gold); border-color: var(--gold); font-weight: 600; }
.bm-chips span { opacity: .7; margin-left: 3px; }
.dir-head .bm-chips { flex: 0 0 100%; }
.dir-hero.has-chips .dir-hero-inner { padding-bottom: 200px; }
@media (max-width: 767px) { .dir-hero.has-chips .dir-hero-inner { padding-bottom: 160px; } }

/* Sidebar extras for AI Resources / Business Models (partials.list-sidebar) */
.ns-plain li::before { content: none; }
.ns-plain li { gap: 0; }
.ns-cats { display: flex; flex-wrap: wrap; gap: 7px; }
.ns-cats a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: #f4f6fa; border: 1px solid #e6eaf2; font-size: 13px; color: #33394a; text-decoration: none; }
.ns-cats a i { color: #A87A00; }
.ns-cats a:hover { border-color: var(--gold); }

/* Phones: form fields at 16px or more, so iPhone Safari doesn't zoom the page in when one is tapped
   (the zoom also left the page panned sideways) */
@media (max-width: 991.98px) {
    input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; }
}
@media (max-width: 991.98px) {
    /* the category dropdown keeps room for "All categories" at 16px */
    .dir-cat { max-width: 52%; padding: 6px 2px 6px 10px; }
}
@media (max-width: 340px) { .dir-cat { max-width: 58%; } }