/* Thriving Differently — Option B (Light) */
/* Warm, calm, professional. Accessible contrast. */

:root{
  --tdB-ink:#0f1b1a;
  --tdB-ink2:#223534;
  --tdB-muted:#4e6563;
  --tdB-bg:#f6efe6;     /* parchment */
  --tdB-bg2:#fbf6ee;    /* lighter paper */
  --tdB-card:#ffffffcc; /* soft white */
  --tdB-border:rgba(16,27,26,.16);

  --tdB-accent:#0b7f6a;   /* deep teal */
  --tdB-accent2:#00a77a;  /* brighter teal */
  --tdB-gold:#d9a63a;     /* sunflower gold */
  --tdB-gold2:#f0c45c;    /* lighter gold */

  --tdB-radius:18px;
  --tdB-max:1100px;
  --tdB-shadow:0 18px 60px rgba(15,27,26,.12);
}

*{box-sizing:border-box}
html,body{height:100%}
body.tdB{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--tdB-ink);
  background:
    radial-gradient(900px 420px at 72% 12%, rgba(217,166,58,.14), transparent 60%),
    radial-gradient(900px 520px at 18% 8%, rgba(11,127,106,.10), transparent 60%),
    linear-gradient(180deg, var(--tdB-bg2), var(--tdB-bg));
}

a{color:inherit}
a:focus{outline: 3px solid rgba(11,127,106,.25); outline-offset: 3px}
img{max-width:100%; height:auto}

.tdB-container{
  max-width:var(--tdB-max);
  margin:0 auto;
  padding:0 20px;
}

.tdB-skip{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px; height:1px;
  overflow:hidden;
}
.tdB-skip:focus{
  left:16px; top:12px;
  width:auto; height:auto;
  padding:10px 12px;
  background:var(--tdB-bg2);
  border:1px solid var(--tdB-border);
  border-radius:12px;
  z-index:9999;
}

/* Header */
.tdB-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(8px);
  background: rgba(251,246,238,.72);
  border-bottom: 1px solid rgba(16,27,26,.10);
}
.tdB-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 14px 0;
}
.tdB-brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.tdB-mark{
  width:34px;
  height:34px;
  border-radius:12px;
  background:
    radial-gradient(12px 12px at 30% 30%, rgba(240,196,92,.9), transparent 60%),
    radial-gradient(16px 16px at 70% 70%, rgba(0,167,122,.65), transparent 65%),
    linear-gradient(135deg, rgba(11,127,106,.18), rgba(217,166,58,.18));
  border: 1px solid rgba(16,27,26,.14);
  box-shadow: 0 10px 30px rgba(15,27,26,.10);
}
.tdB-brandText{
  font-weight: 750;
  letter-spacing: .01em;
}

.tdB-nav{
  display:flex;
  align-items:center;
  gap: 18px;
}
.tdB-navLink{
  text-decoration:none;
  color: var(--tdB-ink2);
  font-weight: 560;
  opacity:.9;
}
.tdB-navLink:hover{opacity:1; text-decoration: underline; text-underline-offset: 5px}

.tdB-headerCta{display:flex; align-items:center}

/* Buttons */
.tdB-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid rgba(16,27,26,.18);
  text-decoration:none;
  font-weight: 650;
  transition: transform .08s ease, box-shadow .12s ease, background .12s ease;
  box-shadow: 0 10px 28px rgba(15,27,26,.08);
}
.tdB-btn:hover{transform: translateY(-1px)}
.tdB-btn--primary{
  color: #08201b;
  background: linear-gradient(135deg, rgba(0,167,122,.75), rgba(240,196,92,.58));
  border-color: rgba(11,127,106,.26);
}
.tdB-btn--ghost{
  color: var(--tdB-ink2);
  background: rgba(255,255,255,.65);
}

/* Layout */
.tdB-main{
  padding: 26px 0 64px;
}

.tdB-page{
  max-width: var(--tdB-max);
  margin: 0 auto;
  padding: 0 20px;
}

.tdB-prose{
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(16,27,26,.12);
  border-radius: var(--tdB-radius);
  box-shadow: var(--tdB-shadow);
  padding: 26px;
}
.tdB-prose h1, .tdB-prose h2, .tdB-prose h3{
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  letter-spacing: .01em;
}
.tdB-prose h1{margin-top:0}
.tdB-prose p{color: var(--tdB-ink2); line-height: 1.65}
.tdB-prose a{color: var(--tdB-accent); text-decoration: underline; text-underline-offset: 4px}

/* Sections + landing styles */
.tdB-section{
  padding: 30px 0;
}
.tdB-card{
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(16,27,26,.12);
  border-radius: var(--tdB-radius);
  box-shadow: var(--tdB-shadow);
}

/* A simple hero utility you can reuse in your markdown */
.tdB-hero{
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--tdB-radius) + 6px);
  padding: 46px 22px;
  background:
    radial-gradient(520px 260px at 75% 35%, rgba(217,166,58,.26), transparent 65%),
    radial-gradient(560px 300px at 20% 30%, rgba(11,127,106,.18), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.55));
  border: 1px solid rgba(16,27,26,.12);
  box-shadow: var(--tdB-shadow);
}
.tdB-hero:after{
  content:"";
  position:absolute;
  inset:-40px -60px auto auto;
  width: 320px;
  height: 320px;
  background:
    radial-gradient(circle at 30% 30%, rgba(240,196,92,.45), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(0,167,122,.35), transparent 62%);
  transform: rotate(18deg);
  filter: blur(0px);
  opacity: .9;
  pointer-events:none;
}
.tdB-eyebrow{
  color: rgba(217,166,58,.95);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 12px;
  font-weight: 800;
  margin: 0 0 10px;
}
.tdB-h1{
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  font-size: clamp(34px, 4.1vw, 54px);
  line-height: 1.05;
  margin: 0 0 12px;
}
.tdB-subhead{
  color: var(--tdB-muted);
  font-size: 18px;
  line-height: 1.55;
  margin: 0 0 18px;
  max-width: 760px;
}
.tdB-actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.tdB-grid{
  display:grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 920px){
  .tdB-nav{display:none;}
  .tdB-grid{grid-template-columns: 1fr;}
}
.tdB-mini{
  padding: 16px;
  border-radius: var(--tdB-radius);
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(16,27,26,.10);
}
.tdB-mini h3{
  margin: 0 0 8px;
  font-size: 16px;
}
.tdB-mini p{
  margin: 0;
  color: var(--tdB-muted);
  line-height: 1.55;
}

/* Footer */
.tdB-footer{
  padding: 24px 0 44px;
}
.tdB-footer__inner{
  border-top: 1px solid rgba(16,27,26,.10);
  padding-top: 18px;
}
.tdB-footerText{
  margin:0;
  color: rgba(34,53,52,.78);
  font-size: 13px;
}