:root{
  --bg:#0b0f14; --card:#111827; --text:#e7eefc; --muted:#a4b0c8; --brand:#22c55e; --brand-2:#f97316;
  --max: 1100px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.7}
a{color:var(--brand);text-decoration:none}
a:hover{opacity:.92;text-decoration:underline}
.container{max-width:var(--max);margin:0 auto;padding:24px}
.navbar{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;background:linear-gradient(90deg, rgba(21,24,34,.7), rgba(21,24,34,.3));position:sticky;top:0;backdrop-filter:blur(6px);z-index:5;border-bottom:1px solid #1e2230}
.navbar a.brand{color:#fff;font-weight:700;letter-spacing:.3px}
.navbar .menu a{margin-left:16px;color:var(--muted)}
.hero{padding:64px 0 24px;border-bottom:1px solid #1e2230;background: radial-gradient(1200px 600px at 20% -10%, rgba(124,92,255,.25), transparent 60%), radial-gradient(900px 600px at 100% -30%, rgba(34,211,238,.18), transparent 50%)}
.hero h1{font-size:clamp(28px,4vw,44px);margin:0 0 12px}
.hero p{color:var(--muted);max-width:760px;margin:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-top:24px}
.card{background:var(--card);border:1px solid #1e2230;border-radius:14px;padding:18px;transition:transform .15s ease, box-shadow .15s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.card h3{margin:0 0 8px;font-size:18px}
.meta{color:var(--muted);font-size:13px}
.post{max-width:820px;margin:0 auto;background:transparent}
.post h1{font-size:clamp(28px,3.2vw,42px);margin:8px 0 8px}
.post .meta{margin-bottom:14px}
.post .content{background:var(--card);border:1px solid #1e2230;border-radius:16px;padding:28px}
.post .content p{margin:0 0 14px}
.post .content h2{margin:28px 0 12px;border-bottom:1px dashed #2a2f45;padding-bottom:6px}
.post .content .toc{background:#121522;border:1px solid #23283c;border-radius:10px;padding:12px 14px;margin:10px 0 18px}
.post .content .toc strong{font-size:14px}
.related{margin-top:24px;background:transparent}
.related h3{margin:10px 0 12px}
.footer{padding:36px 0;color:var(--muted);text-align:center;border-top:1px solid #1e2230;margin-top:40px}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;background:#23283c;color:var(--muted);font-size:12px;margin-right:8px}
.internal{border-bottom:1px dashed rgba(124,92,255,.5)}
blockquote{border-left:3px solid var(--brand);padding:4px 12px;color:#c8cdf0;background:#121522;border-radius:6px;margin:12px 0}
ul,ol{padding-left:22px}
img{max-width:100%;border-radius:8px}
@media (max-width:600px){.navbar .menu{display:none}}

/* Cookie bar */

#cookiebar{position:fixed;left:12px;right:12px;bottom:12px;background:#0f1322;color:#e9ecff;border:1px solid #23283c;border-radius:12px;z-index:99;
  box-shadow:0 12px 40px rgba(0,0,0,.35)}
#cookiebar .cookie-inner{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:12px 14px}
#cookiebar .cookie-text{font-size:14px;line-height:1.5}
#cookiebar .cookie-actions{display:flex;gap:8px}
#cookiebar button{background:#7c5cff;color:#fff;border:none;border-radius:8px;padding:8px 12px;font-weight:600;cursor:pointer}
#cookiebar button.outline{background:transparent;border:1px solid #2a2f45;color:#c7cdf5}
@media(max-width:600px){#cookiebar .cookie-inner{flex-direction:column;align-items:flex-start}}

/* Sticky/Collapsible TOC */
.toc{position:relative}
.toc-sticky{position:sticky;top:84px;max-height:60vh;overflow:auto}
.toc .toc-toggle{display:none;border:1px solid #2a2f45;border-radius:8px;padding:6px 10px;margin-bottom:8px;background:#121522;color:#cbd1f8;font-size:13px}
@media(max-width:860px){
  .toc-sticky{position:relative;top:auto;max-height:none}
  .toc .toc-toggle{display:inline-block}
  .toc.collapsed ul{display:none}
}
/* v9 tweaks */
.navbar{flex-wrap:wrap}
.navbar .menu a{margin:8px 12px 0 12px;display:inline-block}
@media(min-width:760px){.navbar .menu a{margin:0 0 0 16px}}
/* Cookie button tap targets */
#cookiebar button{padding:10px 14px}

/* v10 tools */
.tool-form{background:var(--card);border:1px solid #1e2230;border-radius:12px;padding:18px;margin:12px 0}
.tool-form label{display:block;margin-bottom:4px;color:var(--muted);font-size:14px}
.tool-form input,.tool-form select{width:100%;padding:10px 12px;margin-bottom:12px;border-radius:8px;border:1px solid #2a2f45;background:#121522;color:#e7e7ef}
.tool-form button{background:#7c5cff;color:#fff;border:none;border-radius:8px;padding:10px 14px;cursor:pointer;font-weight:600}
.tool-results{background:#121522;border:1px solid #23283c;border-radius:10px;padding:12px;margin-top:12px}
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.tool-card{background:var(--card);border:1px solid #1e2230;border-radius:12px;padding:16px}
.tool-card h3{margin-top:0}
.sharebar{display:flex;gap:10px;align-items:center;margin:16px 0}
.sharebar button{padding:8px 12px;border:1px solid #2a2f45;border-radius:8px;background:#121522;color:#e7e7ef;cursor:pointer}
.sharebar a{padding:8px 12px;border:1px solid #2a2f45;border-radius:8px;background:#121522;color:#e7e7ef}

/* v14: simplify article card & remove nested rings */
.post .content{
  background: var(--card);
  border: 1px solid #1e2230;
  border-radius: 16px;
  padding: 28px;
  box-shadow: none;
}
.section{
  background: transparent;
  border: none;
  padding: 0;
}
/* Remove any obsolete TOC styles */
.toc, .toc-sticky { display: none !important; }

/* v15 layout cleanup */
.container{max-width:var(--max);margin:0 auto;padding:clamp(14px,4vw,24px)}
.post .content{background:var(--card);border:1px solid #1e2230;border-radius:16px;padding:clamp(18px,3.5vw,28px);box-shadow:none}
.section{background:transparent;border:none;padding:0}
/* ensure normal wrapping */
.post p, .post li{word-break:normal;overflow-wrap:anywhere}
/* hamburger */
.navbar{position:sticky;top:0;z-index:10}
.navbar .menu-toggle{display:none;background:#121522;color:#e7e7ef;border:1px solid #2a2f45;border-radius:8px;padding:8px 10px;cursor:pointer}
@media(max-width:860px){
  .navbar .menu{display:none;flex-direction:column;background:#0f1322;border-top:1px solid #1e2230;margin-top:8px;padding:8px;border-radius:8px}
  .navbar.open .menu{display:flex}
  .navbar .menu-toggle{display:inline-block;margin-left:auto}
  .navbar .menu a{margin:8px 0}
}

/* v16: single card + fluid type + polished menu */
:root{ --text-size: clamp(1rem, 1.6vw, 1.09rem); }
.post{font-size: var(--text-size); line-height: 1.8}
.post .content{
  background: var(--card);
  border: none;
  border-radius: 14px;
  padding: clamp(16px, 3.6vw, 26px);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
/* remove ring around sharebar */
.sharebar{background: transparent; border:none; padding:0; margin-bottom:12px}
.sharebar a, .sharebar button{border:1px solid #2a2f45;border-radius:8px;background:#121522;color:#e7e7ef;padding:8px 12px}
/* clean spacing for headings */
.post h2{margin:24px 0 10px; border-bottom:1px dashed #2a2f45; padding-bottom:6px}
/* container width & padding */
.container{max-width: 960px; width:100%; margin:0 auto; padding:clamp(14px,4vw,24px)}
/* ensure normal wrapping */
.post p, .post li{word-break:normal; overflow-wrap:anywhere}
/* hamburger polish */
@media(max-width:860px){
  .navbar .menu{transition:max-height .2s ease; overflow:hidden; max-height:0}
  .navbar.open .menu{max-height:400px}
  .navbar .menu a{padding:10px 0}
  .navbar .menu-toggle{padding:10px 12px}
}


/* v17 Light Theme — airy like CurlyHairGuide */
:root{
  --bg:#FAFAFC; --text:#111318; --muted:#626a7a; --brand:#0a66c2; --brand-2:#16a34a;
  --card:#ffffff; --line:#e9ebf0; --max: 1040px;
}
html,body{background:var(--bg);color:var(--text)}
a{color:var(--brand)}
a:hover{opacity:.9;text-decoration:underline}
/* Navbar */
.navbar{position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid var(--line);}
.navbar a.brand{color:#0f172a;font-weight:800;letter-spacing:.2px}
.navbar .menu a{color:#334155}
/* Container */
.container{max-width:var(--max);margin:0 auto;padding:clamp(16px,3.8vw,28px)}
/* Post layout: flat, no rings */
.post{font-size: clamp(1rem, 1.45vw, 1.1rem); line-height:1.85}
.post h1{font-size: clamp(1.8rem, 3.5vw, 2.25rem); line-height:1.2; margin: 4px 0 12px}
.post .meta{color:var(--muted);font-size:.94rem;margin-bottom:10px}
/* Make content flat and airy */
.post .content{
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  max-width: 760px;
}
/* Headings */
.post h2{margin:26px 0 12px; font-size: clamp(1.25rem, 2.4vw, 1.45rem); border-bottom:1px solid var(--line); padding-bottom:8px}
.post h3{margin:18px 0 8px; font-size: clamp(1.1rem, 2vw, 1.2rem)}
/* Lists and paragraphs */
.post p, .post li{color:#1f2937; word-break:normal; overflow-wrap:anywhere}
.post ul, .post ol{padding-left:20px}
/* Sharebar minimal */
.sharebar{display:flex;gap:10px;align-items:center;margin:16px 0 12px}
.sharebar a, .sharebar button{border:1px solid var(--line);background:#fff;color:#0f172a;padding:8px 12px;border-radius:10px}
/* Cards grid */
.card{background:#fff;border:1px solid var(--line); border-radius:14px}
.card h3{color:#0f172a}
/* Tools */
.tool-form{background:#fff;border:1px solid var(--line)}
.tool-results{background:#f7f9fc;border:1px solid var(--line)}
.tool-card{background:#fff;border:1px solid var(--line)}
/* Footer */
.footer{background:#fff;border-top:1px solid var(--line);color:var(--muted)}
/* Mobile nav polish */
.navbar .menu-toggle{background:#fff;color:#0f172a;border:1px solid var(--line);border-radius:10px}
@media(max-width:860px){
  .navbar .menu{background:#fff;border:1px solid var(--line)}
  .navbar .menu a{color:#0f172a}
}


/* Nav updates */
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{display:flex;align-items:center;gap:10px}
.brand .logo{display:block}
.hamburger{display:none;background:transparent;border:0;cursor:pointer;padding:10px;border-radius:12px}
.hamburger span{display:block;width:22px;height:2px;background:var(--text);margin:5px 0;border-radius:2px;opacity:.9}
.menu{display:flex;align-items:center;gap:16px}
.menu a{color:var(--muted)}
.menu a.active{color:var(--text)}
.dropdown{position:relative}
.dropbtn{background:transparent;border:1px solid rgba(255,255,255,.10);color:var(--text);padding:8px 12px;border-radius:12px;cursor:pointer}
.dropdown-content{position:absolute;left:50%;transform:translateX(-50%);top:44px;min-width:220px;background:rgba(17,24,39,.98);border:1px solid rgba(255,255,255,.08);border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.35);padding:10px;display:none}
.dropdown-content a{display:block;padding:10px 12px;border-radius:10px;color:var(--muted)}
.dropdown-content a:hover{background:rgba(255,255,255,.05);color:var(--text);text-decoration:none}
.dropdown:focus-within .dropdown-content,
.dropdown:hover .dropdown-content{display:block}
@media (max-width:740px){
  .hamburger{display:block}
  .menu{display:none;position:absolute;left:16px;right:16px;top:64px;background:rgba(17,24,39,.98);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:14px;flex-direction:column;align-items:stretch;gap:10px}
  .menu a{padding:10px 12px;border-radius:12px}
  .menu a:hover{background:rgba(255,255,255,.05);text-decoration:none;color:var(--text)}
  .dropdown-content{position:static;transform:none;min-width:auto;display:block;background:transparent;border:0;box-shadow:none;padding:0}
  .dropbtn{width:100%;text-align:left}
}
/* Homepage */
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:center}
.hero-card{background:transparent}
.section{padding:28px 0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:16px}
.panel{background:var(--card);border:1px solid #1e2230;border-radius:16px;padding:18px}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.featured{grid-template-columns:repeat(2,1fr)}
.feat{display:block;background:var(--card);border:1px solid #1e2230;border-radius:16px;padding:16px;transition:transform .15s ease, border-color .15s ease}
.feat:hover{transform:translateY(-2px);border-color:rgba(34,197,94,.45);text-decoration:none}
.feat-top{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px}
.trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.cta-row{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .featured{grid-template-columns:1fr}
}
.chart{width:100%;height:auto}

/* Tool pages */
.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:14px}
.tool label{display:block;font-size:14px;color:var(--muted);margin:10px 0 6px}
.tool input,.tool select{width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.10);background:#0b1220;color:var(--text)}
.tool .note{margin-top:12px;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);color:var(--muted)}
.kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}
.kpi{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);border-radius:14px;padding:12px}
.kpi-label{font-size:12px;color:var(--muted)}
.kpi-val{font-size:20px;font-weight:800;margin-top:4px}
.idea{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);border-radius:14px;padding:14px;margin-bottom:10px}
.idea h3{margin:0 0 8px;font-size:16px}
@media (max-width:900px){
  .tool-grid{grid-template-columns:1fr}
  .kpi-row{grid-template-columns:1fr}
}

/* Sitemap two columns */
.two-col{columns:2;column-gap:22px}
@media (max-width:700px){.two-col{columns:1}}

/* Revision 10.1 article polish */
.post{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  overflow: hidden;
}
.post-head{
  padding: 28px 24px 10px;
  background:
    radial-gradient(800px 280px at 10% 0%, rgba(99,102,241,.22), rgba(0,0,0,0)),
    radial-gradient(800px 280px at 90% 0%, rgba(34,197,94,.16), rgba(0,0,0,0));
}
.post-head h1{
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.12;
  margin: 10px 0 10px;
}
.post-head .lede{
  font-size: 1.08rem;
  line-height: 1.7;
  max-width: 70ch;
  opacity: .92;
}
.post-toolbar{
  padding: 14px 24px 0;
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap:wrap;
}
.post .content{
  padding: 18px 24px 26px;
  max-width: 76ch;
}
.post .content p{
  margin: 1.05em 0;
  font-size: 1.05rem;
  line-height: 1.85;
}
.post .content h2{
  margin: 1.9em 0 .6em;
  font-size: 1.35rem;
  line-height: 1.25;
  position: relative;
  padding-top: 10px;
}
.post .content h2:before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width: 72px;
  height: 3px;
  border-radius: 99px;
  background: rgba(99,102,241,.7);
}
.post .content h3{
  margin: 1.4em 0 .5em;
  font-size: 1.15rem;
}
.post .content ul, .post .content ol{
  margin: .8em 0 1.1em 1.2em;
  padding: 0;
}
.post .content li{
  margin: .45em 0;
  line-height: 1.75;
}
.post .content blockquote{
  margin: 1.3em 0;
  padding: 14px 16px;
  border-left: 3px solid rgba(34,197,94,.65);
  background: rgba(16,185,129,.08);
  border-radius: 14px;
}
.post .content a{
  text-decoration: none;
  border-bottom: 1px solid rgba(147,197,253,.45);
}
.post .content a:hover{
  border-bottom-color: rgba(147,197,253,.9);
}
.takeaways{
  margin: 14px 24px 0;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(650px 220px at 0% 0%, rgba(59,130,246,.18), rgba(0,0,0,0)),
    radial-gradient(650px 220px at 100% 0%, rgba(34,197,94,.14), rgba(0,0,0,0)),
    rgba(255,255,255,.03);
}
.takeaways h2{
  margin: 0 0 8px;
  font-size: 1.05rem;
}
.takeaways ul{
  margin: 0 0 0 1.1em;
}
.sources{
  margin: 1.6em 0 0;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.sources h2{
  margin: 0 0 8px;
  font-size: 1.05rem;
}
.source-list{
  margin: 0 0 0 1.1em;
}
.source-list li{
  margin: .5em 0;
}
@media (max-width: 640px){
  .post-head{padding: 22px 16px 8px}
  .post-toolbar{padding: 12px 16px 0}
  .takeaways{margin: 12px 16px 0}
  .post .content{padding: 16px}
}


/* Revision 10.2: Article polish */
.post .post-sub{font-size:1.05rem;max-width:70ch}
.prose{max-width:78ch;margin:0 auto}
.prose p{line-height:1.85;font-size:1.05rem}
.prose p.lead{font-size:1.15rem;line-height:1.75;color:var(--text);opacity:.95}
.prose h2{margin-top:2.2rem;padding-top:.6rem;font-size:1.35rem;border-top:1px solid rgba(255,255,255,.08)}
.prose ul{margin:1rem 0 1.2rem 1.2rem}
.prose li{margin:.45rem 0;line-height:1.7}
.takeaways{background:linear-gradient(180deg, rgba(88,101,242,.12), rgba(17,24,39,.0));border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:18px;margin:16px 0 22px}
.takeaways h2{border:0;margin:0 0 8px;padding:0;font-size:1.05rem;letter-spacing:.02em;text-transform:uppercase;opacity:.85}
.takeaways ul{margin:0 0 0 1.2rem}
.card .muted{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
a.internal{ text-decoration:none }
a.internal:hover{text-decoration:underline}


/* REV10 ARTICLE TYPOGRAPHY */
.post .prose{max-width:78ch;margin:0 auto;}
.prose p{font-size:1.05rem;line-height:1.85;margin:0 0 1.15rem;}
.prose p.lead,.prose .lead{font-size:1.15rem;line-height:1.8;}
.prose h2{font-size:1.45rem;margin:2.2rem 0 0.9rem;letter-spacing:-0.01em;}
.prose h2:before{content:'';display:block;height:1px;background:rgba(255,255,255,0.12);margin-bottom:0.85rem;}
.prose ul{margin:0.2rem 0 1.1rem 1.2rem;}
.prose li{margin:0.45rem 0;line-height:1.7;}
.takeaways{max-width:78ch;margin:1.2rem auto 0;padding:1rem 1.1rem;border-radius:16px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.10);}