:root {
  --green:#059669; --green-dk:#047857; --green-lt:#d1fae5;
  --orange:#ea580c; --blue:#2563eb; --purple:#7c3aed; --sky:#0369a1;
  --g50:#f9fafb; --g100:#f3f4f6; --g200:#e5e7eb; --g300:#d1d5db;
  --g400:#9ca3af; --g500:#6b7280; --g600:#4b5563; --g700:#374151;
  --g800:#1f2937; --g900:#111827; --white:#fff;
  --sh-sm:0 1px 3px rgba(0,0,0,.08);
  --sh-md:0 4px 16px rgba(0,0,0,.10);
  --sh-lg:0 12px 40px rgba(0,0,0,.15);
}
* { box-sizing:border-box; margin:0; padding:0; }

/* ── SECTION ───────────────────────────────────────────────── */
.wtd-section {
  padding:80px 20px;
  background:linear-gradient(135deg,#ecfdf5 0%,#f9fafb 50%,#fffbeb 100%);
  position:relative; overflow:hidden;
}
.wtd-section::before {
  content:''; position:absolute; width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle,rgba(5,150,105,.07),transparent 70%);
  top:-200px; left:-150px; pointer-events:none;
}
.wtd-section::after {
  content:''; position:absolute; width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle,rgba(234,88,12,.06),transparent 70%);
  bottom:-130px; right:-100px; pointer-events:none;
}
.wtd-inner { max-width:800px; margin:0 auto; position:relative; z-index:1; }

/* ── HEADER ────────────────────────────────────────────────── */
.wtd-hdr { text-align:center; margin-bottom:52px; }
.wtd-eye {
  display:inline-flex; align-items:center; gap:10px;
  font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green-dk); margin-bottom:14px;
}
.wtd-eye::before,.wtd-eye::after {
  content:''; width:28px; height:2px; background:var(--green-dk); border-radius:2px;
}
.wtd-title {
  font-family:'Playfair Display',serif;
  font-size:clamp(1.9rem,3.5vw,2.8rem); font-weight:700;
  color:var(--g900); line-height:1.2; margin-bottom:14px;
}
.wtd-title em { font-style:italic; color:var(--green-dk); }
.wtd-sub { font-size:.96rem; color:var(--g500); max-width:440px; margin:0 auto 26px; }
.wtd-pill {
  display:inline-flex; align-items:center; gap:9px;
  background:var(--white); padding:9px 18px; border-radius:40px;
  box-shadow:var(--sh-sm); border:1px solid var(--g200);
  font-size:.85rem; font-weight:700; color:var(--g700);
}
.wtd-pill .wtd-stars { color:#f59e0b; font-size:.95rem; letter-spacing:1px; }
.wtd-pill .wtd-cnt   { color:var(--g500); font-weight:600; }

/* ── SLIDER SHELL ──────────────────────────────────────────── */
.wtd-slider-outer {
  border-radius:22px; overflow:hidden;
  box-shadow:var(--sh-lg); position:relative;
}
.wtd-progress {
  position:absolute; top:0; left:0; height:3px;
  background:rgba(255,255,255,.55); z-index:20; width:0%; transition:none;
}
.wtd-slider-track { display:flex; transition:transform .6s cubic-bezier(.4,0,.2,1); }

/* ── SLIDE ─────────────────────────────────────────────────── */
.wtd-slide { flex-shrink:0; width:100%; }

/* ── PANEL (full-width, single column) ────────────────────── */
.wtd-panel {
  padding:52px 56px 52px;
  display:flex; flex-direction:column; justify-content:flex-start;
  position:relative; overflow:hidden;
  min-height:340px;
}
/* decorative large quote mark */
.wtd-panel::after {
  content:'\201C';
  position:absolute; bottom:-40px; right:14px;
  font-family:'Playfair Display',serif; font-size:16rem; line-height:1;
  color:rgba(255,255,255,.09); pointer-events:none; z-index:1;
}

/* ── VIEW LETTER button — top right ────────────────────────── */
.wtd-view-letter {
  position:absolute; top:20px; right:22px; z-index:10;
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.18); border:1.5px solid rgba(255,255,255,.5);
  color:#fff; font-size:.7rem; font-weight:800;
  letter-spacing:.07em; text-transform:uppercase;
  padding:6px 13px; border-radius:20px; cursor:pointer;
  backdrop-filter:blur(4px);
  transition:background .2s, transform .15s, box-shadow .2s;
}
.wtd-view-letter:hover {
  background:rgba(255,255,255,.32);
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  transform:translateY(-1px);
}
.wtd-view-letter svg { width:11px; height:11px; fill:#fff; flex-shrink:0; }

/* ── STARS ─────────────────────────────────────────────────── */
.wtd-panel-stars {
  color:#fbbf24; font-size:1rem; letter-spacing:3px;
  margin-bottom:20px; position:relative; z-index:2;
}

/* ── QUOTE ─────────────────────────────────────────────────── */
.wtd-quote {
  font-family:'Playfair Display',serif;
  font-size:1.1rem; font-style:italic; color:#fff !important;
  line-height:1.82; margin-bottom:32px;
  position:relative; z-index:2;
  text-shadow:0 2px 10px rgba(0,0,0,.4);
}
.wtd-q-short { display:inline; }
.wtd-q-full  { display:none;   }

/* see more / see less toggle buttons */
.wtd-toggle {
  display:inline; background:none; border:none; cursor:pointer;
  color:rgba(255,255,255,.78); font-size:.82rem; font-weight:700; font-style:normal;
  text-decoration:underline; text-underline-offset:3px;
  padding:0; position:relative; z-index:3;
  transition:color .15s;
}
.wtd-toggle:hover { color:#fff; }

/* ── AUTHOR ────────────────────────────────────────────────── */
.wtd-author {
  display:flex; align-items:center; gap:16px;
  position:relative; z-index:2; margin-top:auto;
}
.wtd-monogram {
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.25); border:2px solid rgba(255,255,255,.6);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; font-weight:800; flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,.22);
}
.wtd-aname  { color:#fff !important; font-weight:800; font-size:.94rem; text-shadow:0 2px 6px rgba(0,0,0,.55); }
.wtd-achild { color:#fff !important; font-size:.78rem; opacity:.9; text-shadow:0 1px 4px rgba(0,0,0,.5); margin-top:1px; }
.wtd-apos   { color:#fff !important; font-size:.72rem; font-weight:700; margin-top:2px; opacity:.82; text-shadow:0 1px 4px rgba(0,0,0,.5); }

/* ── VERIFIED badge — bottom right ────────────────────────── */
.wtd-verified {
  position:absolute; bottom:20px; right:22px; z-index:10;
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.38);
  color:rgba(255,255,255,.92); font-size:.67rem; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase;
  padding:4px 10px; border-radius:20px;
  backdrop-filter:blur(4px);
}
.wtd-verified svg { width:10px; height:10px; fill:rgba(255,255,255,.92); }

/* ── NAVIGATION ────────────────────────────────────────────── */
.wtd-nav {
  display:flex; justify-content:center; align-items:center;
  gap:18px; margin-top:28px;
}
.wtd-nb {
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--g200); background:var(--white);
  box-shadow:var(--sh-sm); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--g700); font-size:.95rem;
  transition:all .2s;
}
.wtd-nb:hover { background:var(--green); color:var(--white); border-color:var(--green); box-shadow:0 4px 14px rgba(5,150,105,.3); }

/* slide counter  "3 / 8" */
.wtd-counter {
  font-size:.88rem; font-weight:700; color:var(--g600);
  background:var(--white); padding:7px 18px; border-radius:20px;
  border:1px solid var(--g200); box-shadow:var(--sh-sm);
  min-width:72px; text-align:center;
}

/* ── STATS BAR ─────────────────────────────────────────────── */
.wtd-stats {
  display:flex; justify-content:center; margin-top:52px;
  background:var(--white); border-radius:18px;
  box-shadow:var(--sh-sm); border:1px solid var(--g100);
  overflow:hidden; flex-wrap:wrap;
}
.wtd-stat { flex:1; min-width:130px; padding:24px 14px; text-align:center; position:relative; }
.wtd-stat+.wtd-stat::before {
  content:''; position:absolute; left:0; top:22%; height:56%; width:1px; background:var(--g200);
}
.wtd-stat-n {
  font-family:'Playfair Display',serif;
  font-size:2.1rem; font-weight:700; color:var(--green-dk); line-height:1; margin-bottom:5px;
}
.wtd-stat-l { font-size:.75rem; color:var(--g500); font-weight:700; text-transform:uppercase; letter-spacing:.06em; }

/* ── LIGHTBOX ──────────────────────────────────────────────── */
.wtd-lb {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.88); z-index:9999;
  align-items:center; justify-content:center;
  padding:20px; backdrop-filter:blur(6px);
}
.wtd-lb.open { display:flex; animation:lbIn .25s ease; }
@keyframes lbIn { from{opacity:0} to{opacity:1} }
.wtd-lb-box {
  position:relative; max-width:840px; width:100%; max-height:92vh;
  background:var(--white); border-radius:20px; overflow:hidden;
  box-shadow:0 32px 80px rgba(0,0,0,.5);
  display:flex; flex-direction:column;
  animation:lbUp .3s cubic-bezier(.4,0,.2,1);
}
@keyframes lbUp { from{transform:translateY(28px);opacity:0} to{transform:translateY(0);opacity:1} }
.wtd-lb-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 22px 14px; border-bottom:1px solid var(--g100); flex-shrink:0;
}
.wtd-lb-lbl  { font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--green-dk); margin-bottom:2px; }
.wtd-lb-name { font-family:'Playfair Display',serif; font-size:1.1rem; font-weight:700; color:var(--g900); }
.wtd-lb-x {
  width:34px; height:34px; border-radius:50%; border:1px solid var(--g200);
  background:var(--g50); display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:1rem; color:var(--g600); transition:all .2s; flex-shrink:0;
}
.wtd-lb-x:hover { background:var(--g200); color:var(--g900); }
.wtd-lb-img { flex:1; overflow-y:auto; display:flex; align-items:flex-start; justify-content:center; padding:20px; background:var(--g50); }
.wtd-lb-img img { max-width:100%; height:auto; border-radius:8px; box-shadow:var(--sh-md); display:block; }
.wtd-lb-foot { padding:11px 22px; border-top:1px solid var(--g100); flex-shrink:0; }
.wtd-lb-note { font-size:.76rem; color:var(--g500); font-style:italic; }

/* ── EMPTY STATE ───────────────────────────────────────────── */
.wtd-empty { text-align:center; padding:60px 20px; }
.wtd-empty-icon { font-size:3rem; margin-bottom:16px; }
.wtd-empty h3 { font-size:1.2rem; color:var(--g700); margin-bottom:8px; }
.wtd-empty p  { font-size:.9rem; color:var(--g500); }

/* ── MOBILE ────────────────────────────────────────────────── */
@media(max-width:700px){
  .wtd-section { padding:56px 16px; }
  .wtd-panel   { padding:36px 26px 56px; }
  .wtd-stat-n  { font-size:1.8rem; }
  .wtd-title   { font-size:1.85rem; }
  .wtd-lb-box  { border-radius:14px; }
  .wtd-verified{ display:none; }
}