/* =========================================================
   blog.css — LightCast blog shared styles
   Per-page <style> must define:
     --text, --muted, --dimmed, --border
     --accent  (primary theme color)
     --accent2 (secondary theme color)
     + theme color vars (--amber, --teal, --star-blue, etc.)
   Per-page also sets html/body background and #sky gradient.
   ========================================================= */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  --mono:'DM Sans',sans-serif;
  --serif:'Cormorant Garamond',Georgia,serif;
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --max-prose:740px;
}

/* ── ANIMATIONS ── */
@keyframes twinkle{0%,80%{opacity:var(--lo,0.15);}50%{opacity:var(--hi,0.4);}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-14px);}to{opacity:1;transform:none;}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
@keyframes gcpulse{0%,100%{opacity:0.35;transform:scale(1);}50%{opacity:1;transform:scale(1.25);}}
@keyframes scpulse{0%,100%{opacity:0.35;transform:scale(1);}50%{opacity:1;transform:scale(1.25);}}
@keyframes dcpulse{0%,100%{opacity:0.35;transform:scale(1);}50%{opacity:1;transform:scale(1.25);}}

html,body{min-height:100%;color:var(--text);font-family:var(--serif);overflow-x:hidden;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth;}

/* ── SKY — gradient & background defined per-page ── */
#sky{position:fixed;inset:0;z-index:0;}
#sky::before{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");opacity:0.04;mix-blend-mode:overlay;pointer-events:none;}

#stars{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.star{position:absolute;width:1px;height:1px;background:var(--text) transparent:30%; border-radius:50%;animation:twinkle var(--d,3s) ease-in-out infinite var(--delay,0s);}

#app{position:relative;z-index:10;min-height:100vh;display:flex;flex-direction:column;}


#sky.dc {
  background:
    radial-gradient(ellipse 160% 42% at 50% 100%, rgba(15, 100, 75, 0.45) 0%, transparent 52%),
    radial-gradient(ellipse 90% 55% at 25% 100%, rgba(16, 80, 65, 0.25) 0%, transparent 48%),
    radial-gradient(ellipse 90% 55% at 75% 100%, rgba(8, 50, 40, 0.3) 0%, transparent 48%),
    linear-gradient(to bottom, #020a08 0%, #031110 38%, #041411 68%, #020906 100%);
  transition: 2.8s ease;
}

#sky.gc {
  background:
    radial-gradient(ellipse 120% 40% at 50% 100%, rgba(232,129,42,0.30) 0%, transparent 65%),
    radial-gradient(ellipse 80% 30% at 30% 100%, rgba(217,79,32,0.20) 0%, transparent 60%),
    radial-gradient(ellipse 80% 30% at 70% 100%, rgba(245,197,24,0.18) 0%, transparent 60%),
    linear-gradient(to bottom,
      #1f1a22 0%,
      #2a1f28 25%,
      #3a2428 50%,
      #5a2f28 75%,
      #8a4a2c 100%) !important;
}

#sky.sc{background:radial-gradient(ellipse 80% 40% at 30% 20%,rgba(80,40,160,0.25) 0%,transparent 60%),radial-gradient(ellipse 60% 50% at 70% 10%,rgba(20,60,140,0.3) 0%,transparent 55%),radial-gradient(ellipse 100% 30% at 50% 100%,rgba(10,20,60,0.8) 0%,transparent 50%),linear-gradient(to bottom,#04060e 0%,#060818 40%,#080c1a 70%,#04060e 100%);}



/* ── NAV ── */
.nav-wrap{padding:1.5rem 1.5rem 0;position:relative;}
.nav-bar{display:flex;align-items:center;gap:0.8rem;font-family:var(--mono);font-size:0.52rem;letter-spacing:0.16em;text-transform:uppercase;position:relative;justify-content:center;}
.nav-link{color:var(--dimmed);text-decoration:none;padding:0.3rem 0.6rem;border:1px solid transparent;border-radius:8px;transition:color 0.2s,border-color 0.2s;white-space:nowrap;}
.nav-link:hover,.nav-link.active{color:var(--accent);border-color:var(--border);}
.nav-desktop{display:flex;align-items:center;gap:0.8rem;}
.nav-sep{color:var(--dimmed);flex-shrink:0;}
.nav-hamburger{display:none;flex-direction:column;justify-content:center;gap:4px;background:none;border:1px solid var(--border);border-radius:8px;padding:7px 9px;cursor:pointer;margin-left:auto;flex-shrink:0;}
.nav-hamburger span{display:block;width:16px;height:1.5px;background:var(--dimmed);transition:all 0.22s;}
.nav-hamburger.open span:nth-child(1){transform:translateY(5.5px) rotate(45deg);background:var(--text);}
.nav-hamburger.open span:nth-child(2){opacity:0;}
.nav-hamburger.open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);background:var(--text);}
/* default warm bg — override per page for drone (#061410), milky-way (#080c18), photo-guides (#0e0c18) */
.nav-mobile-menu{display:none;position:absolute;top:calc(100% + 8px);right:0;background:#1a0a06;border:1px solid var(--border);border-radius:10px;z-index:500;min-width:200px;box-shadow:0 12px 40px rgba(0,0,0,0.9);flex-direction:column;overflow:hidden;}
.nav-mobile-menu.open{display:flex;}
.nav-mobile-link{color:var(--dimmed);text-decoration:none;padding:0.9rem 1.2rem;font-family:var(--mono);font-size:0.56rem;letter-spacing:0.16em;text-transform:uppercase;border-bottom:1px solid rgba(253,244,232,0.05);transition:background 0.15s,color 0.15s;display:flex;align-items:center;min-height:48px;}
.nav-mobile-link:last-child{border-bottom:none;}
.nav-mobile-link:hover{background:rgba(255,255,255,0.04);color:var(--text);}
.nav-mobile-link.active{color:var(--accent);}
@media(max-width:640px){.nav-desktop{display:none;}.nav-hamburger{display:flex;}}
@media(min-width:641px){.nav-hamburger{display:none;}.nav-mobile-menu{display:none!important;}}

/* ── ARTICLE HERO ── */
.article-hero{padding:clamp(2.5rem,6vw,4.5rem) clamp(1rem,4vw,1.5rem) 0;display:flex;flex-direction:column;align-items:center;text-align:center;animation:fadeDown 0.9s ease both;max-width:900px;margin:0 auto;width:100%;}
.breadcrumb{font-family:var(--mono);font-size:0.54rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--dimmed);margin-bottom:1.4rem;display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;justify-content:center;}
.breadcrumb a{color:var(--dimmed);text-decoration:none;transition:color 0.2s;}
.breadcrumb a:hover{color:var(--accent);}
.breadcrumb-sep{opacity:0.4;}
.article-kicker{font-family:var(--mono);font-size:0.56rem;letter-spacing:0.26em;text-transform:uppercase;color:var(--accent);margin-bottom:1.1rem;display:flex;align-items:center;gap:0.5rem;}
.article-kicker::before{content:'';display:inline-block;width:5px;height:5px;background:var(--accent);border-radius:50%;animation:gcpulse 2.2s ease-in-out infinite;}
/* default warm em color — override for drone (rgba(238,250,248,0.72)) and milky-way (rgba(238,244,255,0.72)) */
.article-h1{font-family:var(--serif);font-weight:300;font-size:clamp(2.2rem,7vw,4.2rem);line-height:1.18;color:var(--text);max-width:20ch;margin-bottom:1.2rem;}
.article-h1 em{font-style:italic;color:rgba(253,244,232,0.75);}
.article-deck{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(1rem,2.5vw,1.25rem);color:var(--muted);max-width:52ch;line-height:1.65;margin-bottom:1.8rem;}
.article-meta{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:center;font-family:var(--mono);font-size:0.54rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--dimmed);}
.meta-dot{width:3px;height:3px;background:var(--dimmed);border-radius:50%;flex-shrink:0;}
.header-rule{width:60px;height:1px;background:linear-gradient(to right,transparent,var(--accent),transparent);margin:2rem auto 0;opacity:0.55;}

/* ── TOC ── */
.toc-wrap{width:100%;max-width:var(--max-prose);margin:3rem auto 0;padding:0 clamp(1rem,4vw,1.5rem);animation:fadeUp 0.8s ease both 0.3s;}
/* default warm bg — override for drone (rgba(4,16,14,0.65)) and milky-way (rgba(4,6,14,0.72)) */
.toc-card{background:
    radial-gradient(ellipse 140% 50% at 50% 120%, rgba(232,129,42,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 80% 40% at 20% 115%, rgba(245,197,24,0.12) 0%, transparent 50%),
    linear-gradient(to bottom, rgba(46,32,30,0.78) 0%, rgba(46,32,30,0.78) 100%);
  
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:12px;padding:1.4rem 1.6rem;position:relative;overflow:hidden;}
.toc-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,var(--accent) 40%,var(--accent2) 60%,transparent 95%);opacity:0.45;}
.toc-label{font-family:var(--mono);font-size:0.54rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--dimmed);margin-bottom:1rem;}
.toc-list{list-style:none;display:flex;flex-direction:column;gap:0.1rem;}
.toc-list li a{font-family:var(--mono);font-size:0.58rem;letter-spacing:0.06em;color:var(--muted);text-decoration:none;display:flex;align-items:baseline;gap:0.6rem;padding:0.4rem 0;border-bottom:1px solid rgba(253,244,232,0.04);transition:color 0.2s;}
.toc-list li:last-child a{border-bottom:none;}
.toc-list li a:hover{color:var(--accent);}
.toc-num{color:var(--dimmed);font-size:0.85em;flex-shrink:0;}

/* ── ARTICLE BODY ── */
.article-body{width:100%;max-width:var(--max-prose);margin:0 auto;padding:0 clamp(1rem,5vw,1.8rem);}
.section-marker{display:flex;align-items:center;gap:1rem;margin:5rem 0 2.2rem;}
.section-marker::before{content:'';flex:0 0 32px;height:1px;background:linear-gradient(to right,transparent,var(--border));}
.section-marker::after{content:'';flex:1;height:1px;background:linear-gradient(to right,var(--border),transparent);}
.section-kicker{font-family:var(--mono);font-size:0.54rem;letter-spacing:0.28em;text-transform:uppercase;color:var(--dimmed);white-space:nowrap;flex-shrink:0;}
/* default warm em color — override for drone and milky-way */
.section-h2{font-family:var(--serif);font-weight:300;font-size:clamp(1.6rem,4vw,2.4rem);line-height:1.25;color:var(--text);margin-bottom:1.1rem;scroll-margin-top:2rem;}
.section-h2 em{font-style:italic;color:rgba(253,244,232,0.75);}
.prose{font-family:var(--serif);font-weight:300;font-size:clamp(1.05rem,2.5vw,1.15rem);line-height:1.8;color:var(--muted);margin-bottom:1.4rem;}
.prose strong{color:var(--text);font-weight:600;}
.prose em{font-style:italic;}
.pull-quote{border-left:2px solid var(--accent);padding:0.3rem 0 0.3rem 1.4rem;margin:2.2rem 0;}
.pull-quote p{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.1rem,2.8vw,1.35rem);line-height:1.6;color:var(--text);}
/* default warm bg — override for drone (rgba(4,16,14,0.58)) and milky-way (rgba(4,6,14,0.65)) */
.info-card{background:
    radial-gradient(ellipse 140% 50% at 50% 120%, rgba(232,129,42,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 80% 40% at 20% 115%, rgba(245,197,24,0.12) 0%, transparent 50%),
    linear-gradient(to bottom, rgba(46,32,30,0.78) 0%, rgba(46,32,30,0.78) 100%);

  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:12px;padding:1.4rem 1.5rem;margin:2rem 0;position:relative;overflow:hidden;}
.info-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,var(--accent) 50%,transparent 95%);opacity:0.35;}
.info-card-label{font-family:var(--mono);font-size:0.54rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--accent);margin-bottom:0.65rem;display:flex;align-items:center;gap:0.4rem;}
.info-card-label::before{content:'✦';font-size:0.6rem;}
.info-card p{font-family:var(--mono);font-size:0.58rem;color:var(--muted);letter-spacing:0.05em;line-height:1.9;}
.info-card p strong{color:var(--text);}

/* ── DATA GRID ── */
.data-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin:2rem 0;}
/* default warm bg — override for drone (rgba(4,16,14,0.55)) and milky-way (rgba(4,6,14,0.6)) */
.data-cell{background:rgba(14,6,4,0.55);padding:1.3rem 1.2rem;}
.data-cell.span2{grid-column:1/-1;}
.data-cell-tag{font-family:var(--mono);font-size:0.54rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--accent);margin-bottom:0.45rem;}
.data-cell-name{font-family:var(--serif);font-weight:400;font-size:1.1rem;color:var(--text);margin-bottom:0.45rem;}
.data-cell-body{font-family:var(--mono);font-size:0.56rem;color:var(--dimmed);letter-spacing:0.04em;line-height:1.9;}
.data-cell-body strong{color:var(--muted);}
@media(max-width:520px){.data-grid{grid-template-columns:1fr;}.data-cell.span2{grid-column:1;}}

/* ── PRODUCT CARD ── */
/* default warm border/glow — override for drone and milky-way */
.product-card{background:
    radial-gradient(ellipse 140% 50% at 50% 120%, rgba(232,129,42,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 80% 40% at 20% 115%, rgba(245,197,24,0.12) 0%, transparent 50%),
    linear-gradient(to bottom, rgba(46,32,30,0.78) 0%, rgba(46,32,30,0.78) 100%);
  
  
  
  ;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(245,197,24,0.22);border-radius:12px;padding:2rem 1.8rem;margin:3rem 0;position:relative;overflow:hidden;}
.product-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,var(--accent) 40%,var(--accent2) 60%,transparent 95%);opacity:0.55;}
/* default warm glow — override for drone and milky-way */
.product-card::after{content:'';position:absolute;right:-40px;top:-40px;width:180px;height:180px;background:radial-gradient(circle,rgba(245,197,24,0.06) 0%,transparent 70%);pointer-events:none;}
.product-card-eyebrow{font-family:var(--mono);font-size:0.54rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--accent);margin-bottom:0.6rem;display:flex;align-items:center;gap:0.4rem;}
.product-card-eyebrow::before{content:'';display:inline-block;width:5px;height:5px;background:var(--accent);border-radius:50%;animation:gcpulse 2.2s ease-in-out infinite;}
.product-card-title{font-family:var(--serif);font-weight:300;font-size:clamp(1.3rem,3vw,1.7rem);color:var(--text);margin-bottom:0.55rem;line-height:1.3;}
.product-card-body{font-family:var(--mono);font-size:0.58rem;color:var(--dimmed);letter-spacing:0.05em;line-height:1.9;margin-bottom:1.4rem;max-width:52ch;}
.product-card-body strong{color:var(--muted);}
/* default warm gradient + dark text — override for drone and milky-way */
.product-btn{display:inline-flex;align-items:center;background:linear-gradient(135deg,var(--gold),var(--amber));color:#100806;border:none;border-radius:10px;font-family:var(--mono);font-size:0.56rem;letter-spacing:0.18em;text-transform:uppercase;padding:0.85rem 1.8rem;cursor:pointer;text-decoration:none;transition:opacity 0.2s,transform 0.15s;min-height:48px;}
.product-btn:hover{opacity:0.88;transform:translateY(-1px);}
.product-btn-secondary{display:inline-flex; -align-items:center;margin-left:1.2rem;font-family:var(--mono);font-size:0.5rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--dimmed);text-decoration:none;border-bottom:1px solid rgba(253,244,232,0.15);padding-bottom:0.1rem;transition:color 0.2s;}
.product-btn-secondary:hover{color:var(--accent);}

/* ── RELATED GUIDES ── */
/* default warm bg — override for milky-way (rgba(4,6,14,0.6)) */
.related-guides{color: var(--amber); display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0.8rem;margin:2rem 0 4rem;}
.related-card{background:
    radial-gradient(ellipse 140% 50% at 50% 120%, rgba(232,129,42,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 80% 40% at 20% 115%, rgba(245,197,24,0.12) 0%, transparent 50%),
    linear-gradient(to bottom, rgba(46,32,30,0.78) 0%, rgba(46,32,30,0.78) 100%);
  
  
  ;border:1px solid var(--border);border-radius:12px;padding:1.2rem;text-decoration:none;transition:border-color 0.2s;display:block;}
/* default warm hover — override for drone and milky-way */
.related-card:hover{border-color:rgba(245,197,24,0.22);}
.related-label{font-family:var(--mono);font-size:0.54rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--amber);margin-bottom:0.5rem;}
.related-title{font-family:var(--serif);font-weight:400;font-size:1.05rem;color:var(--text);line-height:1.4;}

/* ── BOTTOM CTA ── */
/* default warm bg/border — override for drone and milky-way */
.bottom-cta{background:
    radial-gradient(ellipse 140% 50% at 50% 120%, rgba(232,129,42,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 80% 40% at 20% 115%, rgba(245,197,24,0.12) 0%, transparent 50%),
    linear-gradient(to bottom, rgba(46,32,30,0.78) 0%, rgba(46,32,30,0.78) 100%);
  
  
  border:1px solid rgba(245,197,24,0.18);border-radius:12px;padding:2.5rem 2rem;text-align:center;margin:0 0 4rem;position:relative;overflow:hidden;}
.bottom-cta::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 10%,var(--accent) 40%,var(--accent2) 60%,transparent 90%);opacity:0.45;}
.bottom-cta-title{font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,4vw,2.2rem);color:var(--text);margin-bottom:0.6rem;line-height:1.3;}
.bottom-cta-sub{font-family:var(--mono);font-size:0.58rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-bottom:1.8rem;line-height:1.8;}
/* default warm gradient — override for drone and milky-way */
.bottom-cta-btn{display:inline-flex;align-items:center;background:linear-gradient(135deg,var(--gold),var(--amber));color:#100806;border:none;border-radius:10px;font-family:var(--mono);font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;padding:1rem 2.2rem;cursor:pointer;text-decoration:none;transition:opacity 0.2s,transform 0.15s;min-height:52px;}
.bottom-cta-btn:hover{opacity:0.88;transform:translateY(-1px);}
.cta-or{font-family:var(--mono);font-size:0.46rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--dimmed);margin:1rem 0;}
.cta-secondary{font-family:var(--mono);font-size:0.5rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--dimmed);text-decoration:none;border-bottom:1px solid rgba(253,244,232,0.15);padding-bottom:0.1rem;transition:color 0.2s;}
.cta-secondary:hover{color:var(--accent);}

/* ── READING PROGRESS ── */
/* default warm glow — override for drone and milky-way */
#progress{position:fixed;top:0;left:0;height:2px;z-index:1000;background:linear-gradient(to right,var(--accent),var(--accent2));width:0%;transition:width 0.1s linear;box-shadow:0 0 8px rgba(245,197,24,0.4);}

/* GLOBAL FOOTER */
/* ── 08. GLOBAL FOOTER ──────────────────────────────────── */

.site-footer {
  margin-top: auto;
  border-top: 1px solid var(--faint);
  padding: 3.5rem 2rem calc(2.5rem + var(--safe-bottom));
  position: relative;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(232,129,42,0.3), rgba(126,184,247,0.3), transparent);
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 3rem;
}

/* Footer brand column */
.footer-brand .footer-wordmark {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.5rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 0.8rem;
  text-decoration: none;
  display: inline-block;
}

.footer-brand .footer-wordmark .light { color: var(--amber); }
.footer-brand .footer-wordmark .cast  { color: var(--star); }

.footer-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--dimmed);
  line-height: 1.6;
  max-width: 22ch;
  margin-bottom: 1.2rem;
}

.footer-tools-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.footer-tools-list a {
  font-family: var(--mono);
  font-size: 0.5rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dimmed);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.2s;
  min-height: 32px;
}

.footer-tools-list a:hover { color: var(--amber); }

/* Footer expandable columns */
.footer-col-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
}

.footer-expandable {
  border: none;
  background: none;
  padding: 0;
  cursor: default;
}

.footer-expand-toggle {
  display: none; /* hidden on desktop — all items visible */
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.footer-links a {
  font-family: var(--mono);
  font-size: 0.49rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dimmed);
  text-decoration: none;
  transition: color 0.2s;
  display: block;
  padding: 0.2rem 0;
  min-height: 28px;
  display: flex;
  align-items: center;
}

.footer-links a:hover { color: var(--text); }

/* Footer bottom bar */
.footer-bottom {
  max-width: var(--max-width);
  margin: 2.5rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--faint);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-copy {
  font-family: var(--mono);
  font-size: 0.46rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.footer-credit {
  font-family: var(--mono);
  font-size: 0.46rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Mobile footer — stack and make expandable */
@media (max-width: 680px) {
  .site-footer { padding: 2.5rem 1.2rem calc(2rem + var(--safe-bottom)); }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .footer-brand {
    padding-bottom: 2rem;
    margin-bottom: 0;
    border-bottom: 1px solid var(--faint);
  }

  .footer-col {
    border-bottom: 1px solid var(--faint);
  }

  .footer-expand-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 0;
    width: 100%;
  }

  .footer-expand-toggle .footer-col-title {
    margin-bottom: 0;
  }

  .footer-expand-arrow {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--dimmed);
    transition: transform 0.25s;
    flex-shrink: 0;
  }

  .footer-expand-toggle.open .footer-expand-arrow {
    transform: rotate(180deg);
  }

  .footer-col-title {
    /* hidden on mobile when toggle is shown */
    display: none;
  }

  .footer-links {
    display: none;
    padding-bottom: 1.2rem;
    gap: 0.2rem;
  }

  .footer-links.open { display: flex; }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }
}

/* ── 05. NAVIGATION ─────────────────────────────────────── */

.nav-wrap {
  position: relative;
  padding: 1.6rem 2rem 0;
  z-index: 100;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Wordmark in nav */
.nav-wordmark {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.15rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  flex-shrink: 0;
  line-height: 1;
}

.nav-wordmark .light { color: var(--amber); }
.nav-wordmark .cast  { color: var(--star); }

/* Desktop links */
.nav-desktop {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.nav-link {
  color: var(--dimmed);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 0.5rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.4rem 0.7rem;
  border: 1px solid transparent;
  border-radius: 10px;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
  min-height: 36px;
  display: flex;
  align-items: center;
}

.nav-link:hover {
  color: var(--text);
  border-color: var(--border);
}

.nav-link.active {
  color: var(--amber);
  border-color: rgba(232,129,42,0.25);
}

.nav-sep {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.5rem;
  flex-shrink: 0;
  padding: 0 0.1rem;
}

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  flex-shrink: 0;
}

.nav-hamburger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--dimmed);
  transition: all 0.22s;
}

.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); background: var(--text); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); background: var(--text); }

/* Mobile menu */
.nav-mobile-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 2rem;
  background: #0a0806;
  border: 1px solid var(--border);
  border-radius: 10px;
  z-index: 500;
  min-width: 220px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.9);
  flex-direction: column;
  overflow: hidden;
}

.nav-mobile-menu.open { display: flex; }

.nav-mobile-link {
  color: var(--dimmed);
  text-decoration: none;
  padding: 0.95rem 1.3rem;
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--faint);
  transition: background 0.15s, color 0.15s;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 52px;
}

.nav-mobile-link:last-child { border-bottom: none; }
.nav-mobile-link:hover      { background: rgba(255,255,255,0.03); color: var(--text); }
.nav-mobile-link.active     { color: var(--amber); }

@media (max-width: 640px) {
  .nav-wrap { padding: 1.2rem 1.2rem 0; }
  .nav-desktop { display: none; }
  .nav-hamburger { display: flex; }
  .nav-mobile-menu { right: 1.2rem; }
}

@media (min-width: 641px) {
  .nav-hamburger { display: none; }
  .nav-mobile-menu { display: none !important; }
}



/* ── BLOG DIRECTORY CHIPS ── */
.city-dir{width:100%;max-width:900px;margin:2rem auto 0;padding:0 1.2rem;}
.city-chips{display:flex;flex-wrap:wrap;gap:0.45rem;margin-top:1.2rem;}
.city-chip{font-family:var(--mono);font-size:0.52rem;letter-spacing:0.12em;text-transform:uppercase;padding:0.4rem 0.9rem;border:1px solid var(--border);border-radius:20px;background:rgba(255,255,255,0.02);color:var(--dimmed);text-decoration:none;transition:color 0.2s,border-color 0.2s;min-height:36px;display:flex;align-items:center;}
.city-chip:hover{color:var(--text);border-color:rgba(240,238,232,0.22);}
/* always amber — consistent cross-page navigation */
.city-chip.current{color:#e8812a;border-color:rgba(232,129,42,0.4);background:rgba(232,129,42,0.05);}
.section-rule{display:flex;align-items:center;gap:1rem;width:100%;max-width:900px;margin:3rem auto 0;padding:0 1.5rem;}
.section-rule::before,.section-rule::after{content:'';flex:1;height:1px;background:linear-gradient(to right,transparent,var(--border),transparent);}
.section-rule span{font-family:var(--mono);font-size:0.5rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--dimmed);white-space:nowrap;}

/* ── VAR METERS — worth-shooting + drone ── */
.var-meters{display:flex;flex-direction:column;background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin:2rem 0;}
/* default warm bg — override for drone (rgba(4,16,14,0.55)) */
.var-row{background:rgba(14,6,4,0.55);padding:1.1rem 1.3rem;border-bottom:1px solid rgba(253,244,232,0.05);display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:start;}
.var-row:last-child{border-bottom:none;}
.var-name{font-family:var(--serif);font-weight:400;font-size:1rem;color:var(--text);margin-bottom:0.25rem;}
.var-desc{font-family:var(--mono);font-size:0.49rem;color:var(--dimmed);letter-spacing:0.04em;line-height:1.85;}
.var-desc strong{color:var(--muted);}
.var-badge{font-family:var(--mono);font-size:0.42rem;letter-spacing:0.14em;text-transform:uppercase;padding:0.25rem 0.6rem;border-radius:20px;white-space:nowrap;flex-shrink:0;margin-top:0.2rem;}
/* default warm gold — drone overrides badge-go to teal */
.badge-go{background:rgba(245,197,24,0.12);color:var(--gold);border:1px solid rgba(245,197,24,0.3);}
.badge-med{background:rgba(232,129,42,0.12);color:var(--amber);border:1px solid rgba(232,129,42,0.3);}
.badge-skip{background:rgba(253,244,232,0.05);color:var(--dimmed);border:1px solid var(--border);}

/* ── DECISION CHECKLIST — worth-shooting + drone ── */
.decision-checklist{list-style:none;display:flex;flex-direction:column;background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin:2rem 0;}
/* default warm bg — override for drone (rgba(4,16,14,0.55)) */
.dc-item{background:rgba(14,6,4,0.55);padding:1.1rem 1.3rem;border-bottom:1px solid rgba(253,244,232,0.05);display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:start;}
.dc-item:last-child{border-bottom:none;}
.dc-num{font-family:var(--mono);font-size:0.44rem;letter-spacing:0.14em;color:var(--dimmed);padding-top:0.2rem;flex-shrink:0;}
.dc-q{font-family:var(--serif);font-weight:400;font-size:1rem;color:var(--text);margin-bottom:0.25rem;}
.dc-body{font-family:var(--mono);font-size:0.49rem;color:var(--dimmed);letter-spacing:0.04em;line-height:1.85;}
.dc-body strong{color:var(--muted);}
.dc-verdict{font-family:var(--mono);font-size:0.41rem;letter-spacing:0.12em;text-transform:uppercase;padding:0.2rem 0.5rem;border-radius:20px;white-space:nowrap;flex-shrink:0;margin-top:0.2rem;align-self:start;}
/* default warm gold — drone overrides verdict-go to teal */
.verdict-go{background:rgba(245,197,24,0.1);color:var(--gold);border:1px solid rgba(245,197,24,0.25);}
.verdict-risk{background:rgba(232,129,42,0.1);color:var(--amber);border:1px solid rgba(232,129,42,0.25);}
.verdict-skip{background:rgba(253,244,232,0.04);color:var(--dimmed);border:1px solid var(--border);}
@media(max-width:480px){.dc-item{grid-template-columns:auto 1fr;}.dc-verdict{display:none;}}


/* ── APP CARDS GRID ─────────────────────────────────────── */

.apps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem;
  width: 100%;
  max-width: var(--max-width);
  margin: 1.8rem auto 0;
  padding: 0 1.5rem;
}

@media (max-width: 600px) {
  .apps-grid { grid-template-columns: 1fr; }
}


/* ── BASE CARD ── */
.app-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column; /* important for vertical stacking */
  animation: fadeUp 0.8s ease both;
  transition: border-color 0.3s, transform 0.28s cubic-bezier(0.34,1.4,0.64,1), box-shadow 0.3s;
  cursor: pointer;
  text-decoration: none;

  height: auto;      /* let content determine height */
  min-height: 0;     /* remove any enforced min-height */
  background: rgba(60, 38, 35, 0.78);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

@media (min-width: 600px) { .app-card { min-height: 450px; } }



/* Portrait card hover — slight lift */
.app-card--gold:hover,
.app-card--star:hover,
.app-card--drone:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

/* Per-card border accent on hover */
.app-card--gold:hover  { border-color: rgba(232,129,42,0.5); }
.app-card--star:hover  { border-color: rgba(126,184,247,0.45); }
.app-card--tri:hover   { border-color: rgba(232,129,42,0.4); }
.app-card--drone:hover { border-color: rgba(45,212,191,0.45); }

/* Animation stagger */
.app-card--gold  { animation-delay: 0.08s; }
.app-card--star  { animation-delay: 0.16s; }
.app-card--drone { animation-delay: 0.24s; }
.app-card--tri   { animation-delay: 0.32s; }

/* ── TOP ACCENT BAR (replaces the old sky gradient as primary device) ── */
.app-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 2;
  transition: opacity 0.3s;
  opacity: 0.6;
}
.app-card:hover::before { opacity: 1; }

.app-card--gold::before  { background: linear-gradient(90deg, transparent 0%, var(--amber) 30%, var(--gold) 70%, transparent 100%); }
.app-card--star::before  { background: linear-gradient(90deg, transparent 0%, #4a7fc8 30%, var(--star) 70%, transparent 100%); }
.app-card--tri::before   { background: linear-gradient(90deg, transparent 0%, var(--amber) 40%, var(--star) 80%, transparent 100%); }
.app-card--drone::before { background: linear-gradient(90deg, transparent 0%, var(--teal) 40%, #22d3ee 80%, transparent 100%); }

/* ── SKY ATMOSPHERE UPDATED ── */
.app-card--gold .app-card__sky {
  background:
    radial-gradient(ellipse 140% 50% at 50% 120%, rgba(232,129,42,0.35) 0%, transparent 60%),
    radial-gradient(ellipse 80% 40% at 20% 115%, rgba(245,197,24,0.25) 0%, transparent 50%),
    linear-gradient(to bottom, #1e0d05 0%, #2a0f04 55%, rgba(60,38,35,0.85) 100%);
}

.app-card--star .app-card__sky {
  background:
    radial-gradient(ellipse 140% 50% at 50% -10%, rgba(70,150,245,0.25) 0%, transparent 65%),
    radial-gradient(ellipse 80% 40% at 15% 5%, rgba(120,100,230,0.18) 0%, transparent 55%),
    linear-gradient(to bottom, #05070f 0%, #0a0f1c 50%, rgba(30,20,18,0.85) 100%);
}

.app-card--tri .app-card__sky {
  background:
    radial-gradient(ellipse 100% 55% at 0% 50%, rgba(232,129,42,0.22) 0%, transparent 55%),
    radial-gradient(ellipse 70% 55% at 100% 50%, rgba(70,150,245,0.12) 0%, transparent 55%),
    linear-gradient(to bottom, #0d0702 0%, #1a0b05 55%, rgba(30,20,18,0.85) 100%);
}

.app-card--drone .app-card__sky {
  background:
    radial-gradient(ellipse 140% 45% at 50% -5%, rgba(45,212,191,0.28) 0%, transparent 60%),
    radial-gradient(ellipse 80% 35% at 80% 15%, rgba(0,180,200,0.12) 0%, transparent 55%),
    linear-gradient(to bottom, #03070c 0%, #050d12 50%, rgba(30,20,18,0.85) 100%);
}

/* ── CARD INNER ── */
.app-card__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1rem 1rem 0;
}

/* Portrait cards: CTA lives in a separate bottom bar */
.app-card--gold .app-card__inner,
.app-card--star .app-card__inner,
.app-card--drone .app-card__inner {
  padding-bottom: 0;
}


/* ── CARD TYPOGRAPHY ── */
.app-card__eyebrow {
  font-family: var(--mono);
  font-size: 0.46rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  margin-bottom: 0.55rem;
}

.app-card--gold .app-card__eyebrow  { color: var(--amber); }
.app-card--star .app-card__eyebrow  { color: var(--star); }
.app-card--tri .app-card__eyebrow   { color: var(--amber); }
.app-card--drone .app-card__eyebrow { color: var(--teal); }

.app-card__name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.1rem, 4vw, 2.1rem); /* smaller max and min */
  letter-spacing: 0.12em;                /* slightly tighter */
  text-transform: uppercase;
  line-height: 1.1;                      /* more breathing room */
  margin-bottom: 0.75rem;
  word-wrap: break-word;                 /* prevent overflow on long words */
  color: var(--text);
}

/* Only shrink Dronecast title slightly */
#card-drone .app-card__name {
  font-size: clamp(1.8rem, 4.5vw, 2.6rem); /* slightly smaller max/min */
  line-height: 1.2;                          /* optional, better spacing */
}

.app-card__name em { font-style: normal; }
.app-card--gold .app-card__name em   { color: var(--amber); }
.app-card--star .app-card__name em   { color: var(--star); }
.app-card--tri .app-card__name .tri  { color: var(--amber); }
.app-card--tri .app-card__name .cast { color: var(--star); }
.app-card--drone .app-card__name em  { color: var(--teal); }

.app-card__desc {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 1.4rem;
  max-width: 26ch;
}


/* ── FEATURES LIST ── */
.app-card__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-bottom: 0;
  border-top: 1px solid var(--faint);
}

.app-card__features li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--mono);
  font-size: 0.51rem;
  letter-spacing: 0.07em;
  color: var(--muted);
  line-height: 1.3;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--faint);
}

.app-card__features li:last-child { border-bottom: none; }


@media (max-width: 480px) {
  .app-card__features li:nth-child(n+4) { display: none; }
}

.feat-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 0.6;
}

.app-card--gold .feat-dot  { background: var(--amber); }
.app-card--star .feat-dot  { background: var(--star); }
.app-card--tri .feat-dot   { background: var(--amber); }
.app-card--drone .feat-dot { background: var(--teal); }

/* ── CARD CTA — bottom bar for portrait cards ── */
.app-card__cta-bar {
  position: relative;
  z-index: 1;
  margin-top: auto;
  border-top: 1px solid var(--faint);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.8rem;
  transition: background 0.25s;
}

.app-card--gold .app-card__cta-bar  { background: rgba(232,129,42,0.05); }
.app-card--star .app-card__cta-bar  { background: rgba(126,184,247,0.05); }
.app-card--drone .app-card__cta-bar  { background: rgba(126,184,247,0.05); }
.app-card--gold:hover .app-card__cta-bar { background: rgba(232,129,42,0.1); }
.app-card--star:hover .app-card__cta-bar { background: rgba(126,184,247,0.08); }
.app-card--drone:hover .app-card__cta-bar { background: rgba(126,184,247,0.08); }

.app-card__cta-label {
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.2s;
}

.app-card--gold:hover .app-card__cta-label { color: var(--amber); }
.app-card--star:hover .app-card__cta-label { color: var(--star); }
.app-card--star:hover .app-card__cta-label { color: var(--teal); }

.app-card__cta-arrow {
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--dimmed);
  transition: transform 0.25s, color 0.2s;
}

.app-card--gold:hover .app-card__cta-arrow { color: var(--amber); transform: translateX(4px); }
.app-card--star:hover .app-card__cta-arrow { color: var(--star);  transform: translateX(4px); }
.app-card--star:hover .app-card__cta-arrow { color: var(--teal);  transform: translateX(4px); }



.app-card__btn:active { transform: scale(0.97); }


.app-card--drone .app-card__btn {
  background: teal;
  color: var(--muted);
  border: 1px solid var(--border);
}


/* ── FEATURE PILLS (wide cards) ── */
.card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.7rem;
}

.card-pill {
  font-family: var(--mono);
  font-size: 0.44rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.28rem 0.65rem;
  border-radius: 20px;
  color: var(--dimmed);
}



/* ── THINGS NEEDED TO KEEP FROM REGULAR ── */
    /* One plain-English sentence loaded from Open-Meteo on page load.
       Hides itself gracefully if the fetch fails. */
    .live-line {
      display: none; /* shown by JS once data loads */
      font-family: var(--mono);
      font-size: 0.56rem;
      letter-spacing: 0.08em;
      line-height: 1.6;
      padding: 0.6rem 0.9rem;
      border-radius: 10px;
      margin-bottom: 0.4rem;
      border-left: 2px solid;
      flex: 1;
    }

    .live-line.loaded { display: block;  height: 2px; }
    .app-card--gold  .live-line { color: rgba(240,238,232,0.65); background: rgba(232,129,42,0.07); border-color: rgba(232,129,42,0.35); }
    .app-card--star  .live-line { color: rgba(240,238,232,0.65); background: rgba(126,184,247,0.07); border-color: rgba(126,184,247,0.3); }
    .app-card--drone .live-line { color: rgba(240,238,232,0.65); background: rgba(77,208,225,0.07);  border-color: rgba(77,208,225,0.3); }
    /* Pulsing placeholder while loading */
    .live-line.fetching { display: block; animation: pulse 1.4s ease infinite; color: var(--dimmed); background: transparent; border-color: var(--border); }

    .app-card__btn { display: flex; align-items: center; justify-content: center; gap: 0.6rem; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.9rem 1.4rem; border-radius: 10px; border: none; cursor: pointer; min-height: 52px; transition: opacity 0.2s, transform 0.15s; text-decoration: none; align-self: stretch; margin-bottom: 1rem; }
    @media (min-width: 680px) { .card-full .app-card__btn { align-self: flex-start; } }
    .app-card__btn:active { transform: scale(0.98); }
    .app-card--gold  .app-card__btn { background: linear-gradient(135deg, var(--amber) 0%, var(--gold) 100%); color: #100806; }
    .app-card--star  .app-card__btn { background: linear-gradient(135deg, #2a4a8a 0%, var(--star) 100%); color: #04060e; }
    .app-card--drone .app-card__btn { background: linear-gradient(135deg, #4dd0e1  0%, #4dd0e1 100%); color: #04060e; }
 

     .app-card__eyebrow { font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 0.6rem; }
    .app-card--gold  .app-card__eyebrow { color: var(--amber); }
    .app-card--star  .app-card__eyebrow { color: var(--star); }
    .app-card--drone .app-card__eyebrow { color: #4dd0e1; }

     .app-card__name { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem,6vw,3.4rem); letter-spacing: 0.22em; text-transform: uppercase; line-height: 1; margin-bottom: 0.7rem; color: var(--text); }
    /* h2 inside cards — same visual style, proper semantics for Google */
    .app-card__name h2 { font: inherit; color: inherit; letter-spacing: inherit; margin: 0; }
    .app-card__name em { font-style: normal; }
    .app-card--gold  .app-card__name em { color: var(--amber); }
    .app-card--star  .app-card__name em { color: var(--star); }
    .app-card--drone .app-card__name em { color: #4dd0e1; }

    /* ── APP CARDS GRID DONE ─────────────────────────────────────── */

.hidden-guide { display: none !important; }
.hidden-guide.revealed { display: flex !important; }

.guides-more-wrap {
  width: 100%;
  max-width: 960px;
  margin: 0.8rem auto 0;
  padding: 0 clamp(1rem,4vw,1.5rem);
}
.guides-more-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 1.1rem 1.3rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: 10px;
  user-select: none;
  min-height: 48px;
  transition: 0.2s, border-color 0.2s;
}
.guides-more-toggle:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(240,238,232,0.18);
}
.guides-more-label {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.guides-more-arrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--dimmed);
  transition: transform 0.3s;
}
.guides-more-arrow.open { transform: rotate(180deg); }

/* ── MOBILE READABILITY ── */
@media (max-width: 600px) {
  .article-h1 { font-size: clamp(1.9rem, 8vw, 2.8rem); }
  .article-deck { font-size: clamp(1rem, 3vw, 1.15rem); }
  .section-h2 { font-size: clamp(1.4rem, 5vw, 2rem); }
  .data-grid { grid-template-columns: 1fr; }
  .data-cell.span2 { grid-column: 1; }
  .product-card { padding: 1.5rem 1.2rem; }
  .bottom-cta { padding: 2rem 1.2rem; }
  .toc-card { padding: 1.2rem 1.1rem; }
  .info-card { padding: 1.1rem 1.2rem; }
  .prose { font-size: 1.05rem; line-height: 1.85; }
}