/* Duet blog shell — sits on top of Google Docs export CSS (transformed to dark theme) */

:root {
  --bg:#07090F; --surface:#0C101A; --surface2:#101420; --surface3:#161B2A;
  --border:#1A2236; --border2:#222840;
  --text:#E6EDF7; --text2:#F0F4FF; --text3:#D7DFEC; --text4:#97A8C0;
  --white:#F0F4FF;
  --green:#00C27C; --green-hi:#00D688;
  --green-bg:rgba(0,194,124,.06); --green-border:rgba(0,194,124,.18);
}

html { scroll-behavior:smooth; }

body.blog-body {
  background:var(--bg) !important;
  color:var(--text);
  font-family:'DM Sans',sans-serif;
  margin:0 !important;
  padding:0 !important;
  max-width:none !important;
  -webkit-font-smoothing:antialiased;
}

::selection { background:var(--green); color:#04342C; }

/* ═══ NAV ═══ */
.blog-nav {
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 48px;
  background:rgba(7,9,15,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.blog-logo {
  font-family:'Fraunces',serif;
  font-size:19px; font-weight:600;
  letter-spacing:.06em;
  color:var(--white);
  text-decoration:none;
}
.blog-logo span { color:var(--green); }
.blog-back {
  font-size:13px;
  color:var(--text2);
  text-decoration:none;
  transition:color .18s;
  font-family:'DM Sans',sans-serif;
}
.blog-back:hover { color:var(--green); }

/* ═══ ARTICLE — overrides Google Docs .c28 wrapper ═══ */
.blog-article {
  max-width:720px;
  margin:0 auto;
  padding:64px 32px 96px;
  background:transparent !important;
  font-size:16px;
  line-height:1.72;
}

/* Re-style callout tables (Google Docs exports inline quote boxes as 1-cell tables) */
.blog-article table {
  border-collapse:collapse;
  margin:28px 0;
  width:100% !important;
  border-radius:10px;
  overflow:hidden;
}
.blog-article table tr { border:none !important; }
.blog-article table td {
  padding:22px 26px !important;
  vertical-align:top;
  border:1px solid var(--border) !important;
}

/* Single-cell tables → full-width callout quote */
.blog-article table tr:only-child td:only-child {
  background:var(--green-bg) !important;
  border:none !important;
  border-left:3px solid var(--green) !important;
  border-radius:8px;
}
.blog-article table tr:only-child td:only-child p,
.blog-article table tr:only-child td:only-child span {
  font-family:'Fraunces',serif !important;
  font-style:italic;
  color:var(--white) !important;
}

/* Closing DUET block (typically has "DUET" + "Starting at $25,000" — usually the last table) */
.blog-article > table:last-of-type td,
.blog-article > div:last-of-type table td {
  background:var(--surface) !important;
  border:1px solid var(--green-border) !important;
  border-radius:10px;
}

/* Lists */
.blog-article ul, .blog-article ol {
  margin:14px 0 22px 24px !important;
  padding-left:8px !important;
}
.blog-article li {
  margin:6px 0;
  color:var(--text);
}
.blog-article li::marker { color:var(--green); }

/* Links */
.blog-article a { color:var(--green); text-decoration:underline; text-underline-offset:3px; }
.blog-article a:hover { color:var(--green-hi); }

/* ═══ FOOTER ═══ */
.blog-footer {
  padding:56px 48px 64px;
  border-top:1px solid var(--border);
  text-align:center;
  background:var(--surface);
}
.blog-footer-logo {
  font-family:'Fraunces',serif;
  font-size:22px; font-weight:600;
  letter-spacing:.06em;
  color:var(--white);
  margin-bottom:14px;
}
.blog-footer-logo span { color:var(--green); }
.blog-footer-copy {
  color:var(--text2);
  margin-bottom:18px;
  font-size:14px;
  font-weight:300;
  max-width:480px;
  margin-left:auto;
  margin-right:auto;
  line-height:1.7;
}
.blog-footer-links { font-size:13px; }
.blog-footer-links a {
  color:var(--text2);
  text-decoration:none;
  transition:color .18s;
}
.blog-footer-links a:hover { color:var(--green); }
.blog-footer-sep { color:var(--text4); margin:0 10px; }

/* ═══ MOBILE ═══ */
@media (max-width:768px) {
  .blog-nav { padding:14px 20px; }
  .blog-article { padding:40px 20px 64px; font-size:15px; }
  .blog-article table td { padding:16px 18px !important; }
  .blog-footer { padding:40px 20px; }
}