/* ByEco advice-article theme (13 Oct 2026).
   Loaded only on the advice article pages, after the inline styles, so it
   restyles them without touching the homepage, area pages or legal pages.
   Dark is the site default; :root.light is the site's light toggle. */

:root{
  --ar-bg:#050b09; --ar-panel:#0b1713; --ar-panel-2:#0f1f19; --ar-line:rgba(52,211,153,.18);
  --ar-ink:#d4d4d8; --ar-head:#ffffff; --ar-muted:#a1a1aa;
  --ar-emerald:#10b981; --ar-mint:#6ee7b7; --ar-teal:#2dd4bf; --ar-sky:#38bdf8; --ar-amber:#fbbf24;
  --ar-glow-a:rgba(16,185,129,.16); --ar-glow-b:rgba(56,189,248,.08);
  --ar-zebra:rgba(255,255,255,.025); --ar-hero-fade:5,11,9;
}
:root.light{
  --ar-bg:#f2f7ee; --ar-panel:#ffffff; --ar-panel-2:#f7fbf4; --ar-line:#d5e8dc;
  --ar-ink:#3f3f46; --ar-head:#14181a; --ar-muted:#5b6360;
  --ar-emerald:#059669; --ar-mint:#047857; --ar-teal:#0d9488; --ar-sky:#0284c7; --ar-amber:#d97706;
  --ar-glow-a:rgba(16,185,129,.10); --ar-glow-b:rgba(56,189,248,.08);
  --ar-zebra:rgba(5,150,105,.035); --ar-hero-fade:5,11,9;
}

/* ---------- page ground ---------- */
body{ background:var(--ar-bg); }
main.pt-28{
  background:
    radial-gradient(60rem 40rem at 100% 30rem, var(--ar-glow-b), transparent 70%),
    radial-gradient(50rem 36rem at 0% 70rem, var(--ar-glow-a), transparent 70%),
    var(--ar-bg);
}

/* reading progress bar (scroll-driven; browsers without support just skip it) */
@supports (animation-timeline: scroll()){
  main.pt-28::before{
    content:""; position:fixed; z-index:60; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg,var(--ar-emerald),var(--ar-teal),var(--ar-sky));
    transform-origin:0 50%; transform:scaleX(0);
    animation:ar-progress linear both; animation-timeline:scroll(root);
  }
  @keyframes ar-progress{ to{ transform:scaleX(1); } }
}

/* ---------- hero ---------- */
main.pt-28 > header{ border-bottom:0!important; overflow:hidden; }
main.pt-28 > header::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--ar-emerald) 25%,var(--ar-sky) 75%,transparent);
}
main.pt-28 > header > .absolute > img{ opacity:.75!important; }
main.pt-28 > header > .absolute > .absolute{
  background:
    linear-gradient(90deg, rgba(var(--ar-hero-fade),.96) 0%, rgba(var(--ar-hero-fade),.88) 45%, rgba(var(--ar-hero-fade),.45) 100%),
    linear-gradient(180deg, rgba(var(--ar-hero-fade),.25) 0%, rgba(var(--ar-hero-fade),.0) 50%, rgba(var(--ar-hero-fade),.85) 100%)!important;
}
main.pt-28 > header .inline-block.uppercase{
  padding:.35rem .8rem; border-radius:999px; color:#a7f3d0!important;
  background:rgba(16,185,129,.16); border:1px solid rgba(110,231,183,.35);
  box-shadow:0 0 24px -6px rgba(16,185,129,.6);
}
main.pt-28 > header h1{
  background:linear-gradient(100deg,#ffffff 0%,#ffffff 55%,#a7f3d0 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent!important;
}
main.pt-28 > header .mt-7 > span:not(.text-zinc-600){
  padding:.3rem .7rem; border-radius:999px; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10); color:#d4d4d8;
}
main.pt-28 > header .mt-7 > span.text-zinc-600{ display:none; }
main.pt-28 > header .mt-7{ gap:.5rem!important; }

/* ---------- table of contents ---------- */
nav.toc{
  position:relative; background:var(--ar-panel)!important; border:1px solid var(--ar-line)!important;
  box-shadow:0 20px 40px -24px rgba(0,0,0,.6);
}
nav.toc::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px; border-radius:1rem 1rem 0 0;
  background:linear-gradient(90deg,var(--ar-emerald),var(--ar-teal),var(--ar-sky));
}
nav.toc ol{ list-style:none!important; padding-left:0!important; counter-reset:toc; }
nav.toc li{ counter-increment:toc; display:flex; gap:.7rem; align-items:baseline; }
nav.toc li::before{
  content:counter(toc); flex:none; width:1.45rem; height:1.45rem; border-radius:999px; display:inline-grid;
  place-items:center; font-size:.72rem; font-weight:600; font-variant-numeric:tabular-nums;
  color:var(--ar-emerald); background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.3);
  transform:translateY(.15rem);
}
@media (min-width:768px){ nav.toc ol{ display:grid!important; grid-template-columns:1fr 1fr; column-gap:1.5rem; } }

/* ---------- article body ---------- */
.prose-eco{ color:var(--ar-ink); }
.prose-eco h2{ color:var(--ar-head); position:relative; padding-top:1.1rem; }
.prose-eco h2::before{
  content:""; position:absolute; top:0; left:0; width:3rem; height:4px; border-radius:4px;
  background:linear-gradient(90deg,var(--ar-emerald),var(--ar-teal));
}
.prose-eco h2:nth-of-type(4n+2)::before{ background:linear-gradient(90deg,var(--ar-sky),var(--ar-teal)); }
.prose-eco h2:nth-of-type(4n+3)::before{ background:linear-gradient(90deg,var(--ar-amber),#fb923c); }
.prose-eco h2:nth-of-type(4n)::before{ background:linear-gradient(90deg,var(--ar-teal),var(--ar-sky)); }
.prose-eco h3{ color:var(--ar-head); }
.prose-eco h3::before{ content:""; display:inline-block; width:.5rem; height:.5rem; border-radius:2px;
  background:var(--ar-emerald); margin-right:.6rem; transform:translateY(-.15rem) rotate(45deg); }
.prose-eco strong{ color:var(--ar-head); }
.prose-eco a{ color:var(--ar-emerald); }
.prose-eco ul > li::marker{ color:var(--ar-teal); }
.prose-eco ol > li::marker{ color:var(--ar-emerald); font-weight:600; }

/* key facts (first box) */
.keyfacts{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, rgba(16,185,129,.20) 0%, rgba(13,148,136,.12) 55%, rgba(56,189,248,.10) 100%)!important;
  border:1px solid rgba(110,231,183,.35)!important; border-radius:1.25rem!important;
  box-shadow:0 24px 48px -28px rgba(16,185,129,.55);
}
.keyfacts::after{
  content:""; position:absolute; right:-3rem; top:-3rem; width:10rem; height:10rem; border-radius:50%;
  background:radial-gradient(circle, rgba(110,231,183,.25), transparent 70%); pointer-events:none;
}
.keyfacts h2::before{ display:none; }
.keyfacts h2{ padding-top:0!important; display:flex; align-items:center; gap:.6rem; }
.keyfacts h2::after{ content:none; }
.keyfacts > h2:first-child::before{
  content:"\f0e7"; display:inline-grid!important; place-items:center; position:static; width:1.9rem; height:1.9rem;
  border-radius:.6rem; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:.85rem; letter-spacing:0;
  color:#04110c; background:linear-gradient(135deg,#6ee7b7,#2dd4bf);
}
.keyfacts ul > li::marker{ color:var(--ar-mint); }

/* closing CTA box: the last keyfacts in the article */
.prose-eco > .keyfacts:last-child{
  background:
    radial-gradient(30rem 14rem at 100% 0%, rgba(56,189,248,.35), transparent 70%),
    linear-gradient(135deg,#047857 0%,#0f766e 55%,#0e7490 100%)!important;
  border:0!important; color:#ecfdf5; padding:2rem 1.9rem!important;
  box-shadow:0 30px 60px -30px rgba(16,185,129,.8);
}
.prose-eco > .keyfacts:last-child h2{ color:#ffffff!important; font-size:1.5rem!important; text-transform:none!important; letter-spacing:-.02em!important; }
.prose-eco > .keyfacts:last-child > h2:first-child::before{ content:"\f015"; background:#ffffff; color:#047857; }
.prose-eco > .keyfacts:last-child p, .prose-eco > .keyfacts:last-child li{ color:#d1fae5; }
.prose-eco > .keyfacts:last-child a{ color:#ffffff; }
.prose-eco > .keyfacts:last-child button, .prose-eco > .keyfacts:last-child .bg-emerald-600{
  background:#ffffff!important; color:#065f46!important; box-shadow:0 10px 24px -10px rgba(0,0,0,.5);
  transition:transform .2s ease, box-shadow .2s ease;
}
.prose-eco > .keyfacts:last-child button:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(0,0,0,.55); }

/* callouts */
.callout{
  position:relative; border-left:0!important; border-radius:1rem!important; padding:1.15rem 1.35rem 1.15rem 3.6rem!important;
  background:linear-gradient(135deg, rgba(56,189,248,.18), rgba(16,185,129,.10))!important;
  border:1px solid rgba(56,189,248,.38)!important;
}
.callout::before{
  content:"\f0eb"; position:absolute; left:1.1rem; top:1.15rem; width:1.7rem; height:1.7rem; border-radius:.55rem;
  display:grid; place-items:center; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:.8rem;
  color:#04110c; background:linear-gradient(135deg,#7dd3fc,#5eead4);
}
.callout.warn{
  background:linear-gradient(135deg, rgba(251,191,36,.14), rgba(251,146,60,.07))!important;
  border-color:rgba(251,191,36,.35)!important;
}
.callout.warn::before{ content:"\f071"; background:linear-gradient(135deg,#fde68a,#fdba74); }

/* tables */
.tbl-wrap{ border:1px solid var(--ar-line)!important; border-radius:1rem!important; background:var(--ar-panel);
  box-shadow:0 18px 36px -26px rgba(0,0,0,.6); }
.prose-eco th{ background:linear-gradient(90deg, rgba(16,185,129,.22), rgba(56,189,248,.14))!important;
  color:var(--ar-head)!important; }
.prose-eco tbody tr:nth-child(even) td{ background:var(--ar-zebra); }
.prose-eco tbody tr:hover td{ background:rgba(16,185,129,.07); }

/* figure */
.prose-eco figure img{ border:0!important; border-radius:1.25rem!important;
  box-shadow:0 0 0 1px var(--ar-line), 0 30px 60px -30px rgba(0,0,0,.8), 0 0 60px -20px rgba(16,185,129,.35); }
.prose-eco figure figcaption{ padding-left:.2rem; }
.prose-eco figure figcaption::before{ content:"\f030"; font-family:"Font Awesome 6 Free"; font-weight:900;
  font-size:.75rem; color:var(--ar-emerald); margin-right:.45rem; }

/* sources */
.prose-eco h2#sources ~ ul{ background:var(--ar-panel); border:1px solid var(--ar-line); border-radius:1rem;
  padding:1.1rem 1.25rem 1.1rem 2.4rem; font-size:.9rem; }

/* ---------- FAQ ---------- */
main.pt-28 section.mt-16 > h2{ display:flex; align-items:center; gap:.75rem; }
main.pt-28 section.mt-16 > h2::before{
  content:"\3f"; display:inline-grid; place-items:center; width:2.2rem; height:2.2rem; border-radius:.7rem;
  font-family:"Font Awesome 6 Free"; font-weight:900; font-size:.95rem; color:#04110c;
  background:linear-gradient(135deg,#fde68a,#fbbf24);
}
main.pt-28 section.mt-16 details{
  background:var(--ar-panel)!important; border:1px solid var(--ar-line)!important; border-radius:1rem!important;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
main.pt-28 section.mt-16 details:hover{ border-color:rgba(16,185,129,.45)!important; }
main.pt-28 section.mt-16 details[open]{
  background:linear-gradient(135deg, rgba(16,185,129,.10), rgba(56,189,248,.05)), var(--ar-panel)!important;
  border-color:rgba(16,185,129,.5)!important; box-shadow:inset 3px 0 0 var(--ar-emerald);
}
main.pt-28 section.mt-16 details summary i{ width:1.6rem; height:1.6rem; border-radius:999px; display:grid; place-items:center;
  background:rgba(16,185,129,.14); }

/* ---------- related ---------- */
main.pt-28 > section.bg-zinc-950{
  background:linear-gradient(180deg, transparent, rgba(16,185,129,.07))!important; border-top-color:var(--ar-line)!important;
}
main.pt-28 > section.bg-zinc-950 a.group{
  background:var(--ar-panel)!important; border-color:var(--ar-line)!important; border-radius:1.25rem!important;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
main.pt-28 > section.bg-zinc-950 a.group:hover{ transform:translateY(-6px);
  box-shadow:0 24px 40px -20px rgba(16,185,129,.45); border-color:rgba(16,185,129,.55)!important; }
main.pt-28 > section.bg-zinc-950 a.group img{ transition:transform .5s ease; }
main.pt-28 > section.bg-zinc-950 a.group:hover img{ transform:scale(1.04); }

/* ---------- light theme touches ---------- */
:root.light main.pt-28 > header .inline-block.uppercase{ color:#a7f3d0!important; }
:root.light .keyfacts{ background:linear-gradient(135deg,#ecfdf5 0%,#e6fffa 55%,#eff8ff 100%)!important;
  border-color:#a7f3d0!important; box-shadow:0 18px 40px -28px rgba(5,150,105,.45); }
:root.light .prose-eco > .keyfacts:last-child p, :root.light .prose-eco > .keyfacts:last-child li{ color:#d1fae5!important; }
:root.light .prose-eco > .keyfacts:last-child h2{ color:#ffffff!important; }
:root.light .callout{ background:linear-gradient(135deg,#eff8ff,#ecfdf5)!important; border-color:#bae6fd!important; }
:root.light .callout.warn{ background:linear-gradient(135deg,#fffbeb,#fff7ed)!important; border-color:#fde68a!important; }
:root.light .prose-eco th{ background:linear-gradient(90deg,#d1fae5,#e0f2fe)!important; }
:root.light nav.toc, :root.light .tbl-wrap, :root.light main.pt-28 section.mt-16 details{ box-shadow:0 12px 30px -24px rgba(0,0,0,.25); }

@media (prefers-reduced-motion: reduce){
  main.pt-28::before{ display:none; }
  main.pt-28 > section.bg-zinc-950 a.group:hover, main.pt-28 > section.bg-zinc-950 a.group:hover img{ transform:none; }
}