:root {
  --ink: #17211c;
  --muted: #5f6b65;
  --paper: #f7f1e8;
  --surface: #fffdf8;
  --surface-2: #efe7da;
  --accent: #1f6a4f;
  --accent-dark: #164c39;
  --line: #d8cfc1;
  --danger: #9a332d;
  --shadow: 0 18px 50px rgba(27, 38, 32, 0.10);
  --radius: 22px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
.hidden { display: none !important; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px clamp(18px, 4vw, 64px);
  background: rgba(247, 241, 232, 0.94);
  border-bottom: 1px solid rgba(216, 207, 193, 0.7);
  backdrop-filter: blur(12px);
}

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; min-width: 220px; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 22px;
}
.brand strong { display: block; font-family: Georgia, serif; font-size: 20px; line-height: 1.1; }
.brand small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.account { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.admin-link { font-weight: 700; color: var(--accent-dark); }

.button {
  border: 0;
  border-radius: 999px;
  padding: 11px 17px;
  font-weight: 750;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
}
.button-primary { background: var(--accent); color: white; box-shadow: 0 7px 18px rgba(31, 106, 79, .18); }
.button-primary:hover { background: var(--accent-dark); }
.button-secondary { background: var(--surface-2); color: var(--ink); }
.button-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.button-large { min-height: 52px; padding: 14px 22px; font-size: 17px; }
.button-danger { background: #f3dedb; color: var(--danger); }
.full-width { width: 100%; }
.text-button { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 8px; text-decoration: underline; text-underline-offset: 3px; }
.icon-button { border: 0; background: transparent; font-size: 32px; line-height: 1; cursor: pointer; color: var(--muted); }

.hero {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(72px, 11vw, 150px) 24px clamp(62px, 8vw, 110px);
}
.eyebrow { margin: 0 0 12px; color: var(--accent-dark); font-size: 13px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.hero h1, .section-heading h2, .about-section h2, .admin-intro h1, .dialog h2 {
  font-family: Georgia, serif;
  letter-spacing: -0.025em;
}
.hero h1 { max-width: 790px; margin: 0; font-size: clamp(52px, 8vw, 102px); line-height: .94; font-weight: 500; }
.hero-copy { max-width: 670px; margin: 30px 0 0; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.4; color: #35413b; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.quiet { margin-top: 18px; max-width: 690px; color: var(--muted); line-height: 1.5; }

.principles {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px 70px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.principles article { padding: 22px; border-top: 1px solid var(--line); }
.principles strong { display: block; margin-bottom: 8px; font-size: 18px; }
.principles span { color: var(--muted); line-height: 1.45; }

.feed-section { background: #e9dfd0; padding: clamp(58px, 8vw, 100px) 24px; }
.section-heading { max-width: 1120px; margin: 0 auto 34px; display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.section-heading h2 { margin: 0; font-size: clamp(34px, 5vw, 60px); font-weight: 500; }
.filter-label { display: grid; gap: 7px; color: var(--muted); font-size: 13px; font-weight: 700; }
select, input, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  color: var(--ink);
  padding: 12px 13px;
  min-height: 46px;
}
textarea { resize: vertical; }
select:focus, input:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 3px solid rgba(31, 106, 79, .25); outline-offset: 2px; }

.wisdom-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.wisdom-card { overflow: hidden; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-media video { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #152019; }
.text-card-art {
  min-height: 280px;
  display: grid;
  place-items: center;
  padding: 40px;
  background: var(--accent-dark);
  color: white;
  font-family: Georgia, serif;
  font-size: clamp(26px, 4vw, 42px);
  line-height: 1.2;
  text-align: center;
}
.card-body { padding: 22px; }
.card-meta { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.topic-pill { display: inline-flex; padding: 6px 10px; border-radius: 999px; background: var(--surface-2); color: var(--accent-dark); font-size: 12px; font-weight: 800; }
.contributor { color: var(--muted); font-weight: 700; }
.advice-text { margin: 18px 0 0; padding: 0; border: 0; font-family: Georgia, serif; font-size: 26px; line-height: 1.32; }
.card-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.helpful-button { border: 0; background: transparent; cursor: pointer; padding: 8px 0; font-weight: 800; color: var(--accent-dark); }
.helpful-button.voted { color: var(--accent); }
.status-message { max-width: 1120px; margin: 16px auto; padding: 14px 16px; border-radius: 12px; color: var(--muted); background: rgba(255,255,255,.45); }

.sponsor-section { max-width: 1120px; margin: 0 auto; padding: 28px 24px; text-align: center; color: var(--muted); }
.sponsor-section a { margin-left: 6px; font-weight: 800; color: var(--ink); }
.about-section { max-width: 1120px; margin: 0 auto; padding: 80px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
.about-section h2 { margin: 0; font-size: clamp(34px, 5vw, 58px); font-weight: 500; line-height: 1.05; }
.about-section > p { margin: 28px 0 0; font-size: 20px; line-height: 1.65; color: #35413b; }
.site-footer { display: flex; justify-content: space-between; gap: 30px; padding: 32px clamp(18px, 4vw, 64px); border-top: 1px solid var(--line); color: var(--muted); }
.site-footer strong, .site-footer span { display: block; }
.site-footer strong { color: var(--ink); }
.site-footer p { margin: 0; }

.dialog { width: min(720px, calc(100vw - 24px)); max-height: 90vh; padding: 0; border: 0; border-radius: 24px; background: var(--surface); box-shadow: 0 30px 80px rgba(0,0,0,.25); }
.dialog::backdrop { background: rgba(14, 22, 18, .62); }
.dialog form { padding: 28px; }
.dialog-header { display: flex; justify-content: space-between; align-items: start; gap: 18px; margin-bottom: 22px; }
.dialog h2 { margin: 0; font-size: 38px; font-weight: 500; }
.dialog fieldset { border: 0; padding: 0; margin: 0; }
.dialog label { display: grid; gap: 7px; margin: 0 0 16px; font-weight: 750; }
.field-row { display: grid; grid-template-columns: 1fr 130px; gap: 14px; }
.field-help, .char-count { margin: -8px 0 16px; color: var(--muted); font-size: 13px; }
.char-count { text-align: right; }
.choice-group { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 20px !important; }
.choice-group legend { grid-column: 1 / -1; margin-bottom: 8px; font-weight: 800; }
.choice-card { display: flex !important; gap: 10px !important; align-items: flex-start; margin: 0 !important; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: white; cursor: pointer; }
.choice-card input { width: auto; min-height: 0; margin-top: 3px; }
.choice-card span { display: grid; gap: 3px; }
.choice-card small { color: var(--muted); font-weight: 500; line-height: 1.35; }
.choice-group.compact { margin-top: 4px !important; }
.checkbox-label { display: flex !important; gap: 10px !important; align-items: flex-start; font-weight: 600 !important; line-height: 1.45; }
.checkbox-label input { width: 20px; min-height: 20px; margin-top: 1px; }
.notice, .moderation-note { padding: 14px 16px; border-radius: 14px; background: var(--surface-2); color: #3d4943; line-height: 1.5; margin-bottom: 18px; }
.notice .button { margin-top: 12px; }
.file-check { margin: -8px 0 16px; font-weight: 700; color: var(--accent-dark); }
.file-check.error { color: var(--danger); }

.admin-main { max-width: 1120px; margin: 0 auto; padding: 70px 24px; }
.admin-intro h1 { margin: 0; font-size: clamp(44px, 7vw, 78px); font-weight: 500; }
.admin-intro p:last-child { color: var(--muted); font-size: 18px; }
.moderation-grid { display: grid; gap: 18px; margin-top: 30px; }
.moderation-card { background: var(--surface); border-radius: 18px; padding: 20px; box-shadow: var(--shadow); display: grid; grid-template-columns: 240px 1fr; gap: 22px; }
.moderation-card video { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; background: #17211c; }
.moderation-text-preview { min-height: 160px; display: grid; place-items: center; padding: 18px; border-radius: 12px; background: var(--accent-dark); color: white; font-family: Georgia, serif; font-size: 24px; text-align: center; }
.moderation-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; color: var(--muted); margin-bottom: 10px; font-size: 14px; }
.moderation-content h3 { margin: 0 0 12px; font-family: Georgia, serif; font-size: 30px; font-weight: 500; }
.moderation-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.uploader-detail { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }

@media (max-width: 850px) {
  .site-header { align-items: flex-start; }
  .header-actions { max-width: 55%; }
  .principles { grid-template-columns: repeat(2, 1fr); }
  .wisdom-grid { grid-template-columns: 1fr; }
  .about-section { grid-template-columns: 1fr; gap: 10px; }
  .moderation-card { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .site-header { position: static; flex-direction: column; gap: 12px; }
  .header-actions { max-width: none; width: 100%; justify-content: flex-start; }
  .hero { padding-top: 62px; }
  .principles { grid-template-columns: 1fr; }
  .section-heading { align-items: stretch; flex-direction: column; }
  .field-row, .choice-group { grid-template-columns: 1fr; }
  .site-footer { flex-direction: column; }
  .dialog form { padding: 20px; }
}

/* In-browser 10-second recorder */
.record-panel {
  margin: 4px 0 20px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}
.record-panel-copy { display: grid; gap: 4px; margin-bottom: 14px; }
.record-panel-copy strong { font-size: 19px; }
.record-panel-copy span { color: var(--muted); font-weight: 500; line-height: 1.4; }
.record-button { width: 100%; min-height: 58px; font-size: 18px; }
.recorder-stage, .recorded-preview { position: relative; margin-top: 14px; overflow: hidden; border-radius: 16px; background: #152019; }
.recorder-stage video, .recorded-preview video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #152019; }
.recording-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  pointer-events: none;
  color: white;
  text-shadow: 0 2px 16px rgba(0,0,0,.6);
}
.recording-overlay span { font-size: 18px; font-weight: 850; text-transform: uppercase; letter-spacing: .1em; }
.recording-overlay strong { font-family: Georgia, serif; font-size: clamp(78px, 20vw, 130px); line-height: .95; font-weight: 500; }
.stop-recording-button { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2; }
.recorded-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; background: white; }
.recorded-actions span { color: var(--accent-dark); font-weight: 850; }
.or-divider { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: var(--muted); font-size: 12px; font-weight: 850; text-transform: uppercase; letter-spacing: .12em; }
.or-divider::before, .or-divider::after { content: ""; height: 1px; background: var(--line); flex: 1; }

@media (max-width: 600px) {
  .record-panel { padding: 14px; }
  .recorded-actions { align-items: stretch; flex-direction: column; }
  .recorded-actions .button { width: 100%; }
}

.my-wisdom-list { display: grid; gap: .8rem; margin-top: 1rem; }
.my-wisdom-item { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: 1rem; border: 1px solid var(--line, #d8d0c4); border-radius: 16px; background: #fff; }
.my-wisdom-item div { display: grid; gap: .25rem; }
.my-wisdom-item small { color: var(--muted, #6d746f); text-transform: capitalize; }


/* Visible Wisdom IDs and removal workflow */
.card-media { position: relative; }
.wisdom-stamp { position: absolute; z-index: 2; top: 12px; right: 12px; padding: 6px 9px; border-radius: 999px; background: rgba(14, 22, 18, .82); color: #fff; font-size: 11px; font-weight: 850; letter-spacing: .03em; backdrop-filter: blur(5px); }
.footer-removal-button { display: inline; margin-left: .4rem; }
.admin-section { margin-top: 48px; }
.admin-section-heading { display: flex; justify-content: space-between; gap: 28px; align-items: end; }
.admin-section-heading h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(30px, 4vw, 46px); font-weight: 500; }
.admin-section-heading > p { max-width: 540px; margin: 0; color: var(--muted); line-height: 1.5; }
.removal-admin-section { padding-top: 42px; border-top: 1px solid var(--line); }
.removal-id-panel { min-height: 180px; display: grid; place-content: center; gap: 8px; text-align: center; border-radius: 14px; background: var(--accent-dark); color: white; }
.removal-id-panel span, .removal-id-panel small { opacity: .78; }
.removal-id-panel strong { font-family: Georgia, serif; font-size: 30px; font-weight: 500; }
.removal-notes { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.removal-accepted { border: 2px solid var(--accent); }
@media (max-width: 700px) { .admin-section-heading { display: grid; align-items: start; } }


/* My Wisdom is not wrapped in a form, so give it its own dialog spacing/scrolling. */
#myWisdomDialog {
  padding: 28px;
  overflow-y: auto;
  box-sizing: border-box;
}

#myWisdomDialog .my-wisdom-list {
  width: 100%;
}

#myWisdomDialog .my-wisdom-item {
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 700px) {
  #myWisdomDialog {
    padding: 20px;
    max-height: 90vh;
    overflow-y: auto;
  }

  #myWisdomDialog .my-wisdom-item {
    align-items: stretch;
    flex-direction: column;
  }

  #myWisdomDialog .remove-wisdom-button {
    width: 100%;
  }
}


.policy-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 48px 24px 80px;
  line-height: 1.65;
}
.policy-page h1 { margin-top: 24px; }
.policy-page h2 { margin-top: 32px; }
.policy-page p { max-width: 72ch; }
.policy-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 18px;
  font-size: 0.95rem;
}
.text-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 700px) {
  .policy-page { padding: 28px 20px 56px; }
}

/* =========================================================
   V17 PRODUCTION PRESENTATION LAYER
   One cohesive visual system based on approved tree concept.
   ========================================================= */
:root {
  --ink:#18333a; --muted:#5f6e70; --cream:#fff9f0; --surface:#fffdfa;
  --teal:#08746d; --teal-dark:#063d3a; --teal-soft:#e9f4f0;
  --sage:#426f5b; --gold:#e7a23b; --peach:#f2c394; --line:#e6ddd0;
  --shadow:0 14px 38px rgba(24,51,58,.10); --radius:22px;
}
body{background:var(--cream);color:var(--ink);}
.production-header{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px clamp(18px,3vw,46px);background:var(--teal-dark);border:0;box-shadow:0 5px 20px rgba(0,0,0,.12);}
.production-brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:365px;flex:0 0 auto;}
.production-brand-mark{width:68px;height:68px;display:block;object-fit:cover;border-radius:50%;}
.production-brand-text strong{display:block;color:#fff;font-family:Georgia,serif;font-size:28px;line-height:1.03;white-space:nowrap;}
.production-brand-text small{display:block;margin-top:5px;color:#f2b548;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;}
.production-header .header-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:nowrap;}
.production-header .button{white-space:nowrap;}
.production-header .button-ghost{color:white;border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.07);}
.production-header .button-primary{background:#15847d;color:#fff;box-shadow:none;}
.support-button{background:#f2b24e;color:#17343a!important;box-shadow:none;}
.production-header .account{display:flex;align-items:center;gap:8px;color:#fff;white-space:nowrap;}
.production-header .account #accountName,.production-header .text-button,.production-header .admin-link{color:#fff;}
.production-hero{max-width:none;margin:0;min-height:610px;display:grid;grid-template-columns:minmax(0,48%) minmax(0,52%);padding:0;background:var(--cream);overflow:hidden;}
.hero-copy-column{padding:clamp(64px,7vw,100px) clamp(28px,5vw,86px);display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2;}
.hero-copy-column .eyebrow{color:#a26a20;letter-spacing:.16em;}
.hero-copy-column h1{margin:0;font-family:Georgia,serif;font-size:clamp(64px,6.8vw,108px);line-height:.96;letter-spacing:-.04em;font-weight:500;color:var(--ink);max-width:720px;}
.hero-copy-column .hero-copy{margin-top:28px;max-width:620px;font-size:22px;line-height:1.55;color:#41575c;}
.hero-copy-column .hero-actions{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap;}
.hero-copy-column .quiet{margin-top:18px;max-width:650px;color:var(--muted);}
.hero-art{position:relative;min-height:610px;overflow:hidden;background:#f5e7d5;}
.hero-art::before{content:"";position:absolute;z-index:2;left:0;top:0;bottom:0;width:20%;background:linear-gradient(90deg,var(--cream),rgba(255,249,240,.76),transparent);pointer-events:none;}
.hero-art img{width:100%;height:100%;display:block;object-fit:cover;object-position:56% center;}
.principles{max-width:1160px;margin:-22px auto 0;padding:0 24px 58px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative;z-index:5;}
.principles article{background:var(--surface);border:1px solid rgba(24,51,58,.06);border-top:4px solid var(--teal);border-radius:18px;padding:22px;box-shadow:var(--shadow);min-height:158px;}
.principles article:nth-child(2){border-top-color:var(--gold)}.principles article:nth-child(3){border-top-color:#df866d}.principles article:nth-child(4){border-top-color:var(--sage)}
.principle-icon{width:38px;height:38px;display:block;margin:0 0 13px;border-radius:50%;background:var(--teal-soft);position:relative;overflow:visible;}
.principle-time::before{content:"";position:absolute;inset:8px;border:2px solid var(--teal);border-radius:50%;}.principle-time::after{content:"";position:absolute;width:2px;height:9px;background:var(--teal);left:18px;top:10px;transform-origin:bottom;transform:rotate(-35deg);}
.principle-life::before{content:"65";position:absolute;inset:0;display:grid;place-items:center;font-size:12px;font-weight:900;color:#a26a20;}.principle-life{background:#fff1da;}
.principle-kind::before{content:"♡";position:absolute;inset:0;display:grid;place-items:center;font-size:24px;color:#b96152;}.principle-kind{background:#fbe8e1;}
.principle-review::before{content:"✓";position:absolute;inset:0;display:grid;place-items:center;font-size:21px;font-weight:900;color:var(--sage);}.principle-review{background:#edf3ed;}
.feed-section{background:#f7efe5;padding:72px 24px 86px;border-top:1px solid #ecdfcf;}
.section-heading{max-width:1160px}.section-heading h2{color:var(--ink)}
.wisdom-grid{max-width:1160px;gap:18px}.wisdom-card{background:var(--surface);border:1px solid rgba(24,51,58,.07);border-radius:20px;box-shadow:0 10px 30px rgba(24,51,58,.08);}
.card-media video{background:#183d3b;}.text-card-art{background:linear-gradient(145deg,#0b746d,#183d3b);}
.topic-pill{background:#f4e4ce;color:#815221}.helpful-button{color:var(--teal)}.helpful-button.voted{color:#c95e69}
.support-section{max-width:1160px;margin:44px auto 0;padding:32px 36px;background:linear-gradient(135deg,#fff3e2,#edf7f3);border:1px solid #ead9c5;border-radius:24px;box-shadow:0 12px 34px rgba(24,51,58,.07);}
.button-warm{background:#e7a23b;color:#17343a;}
.about-section{max-width:1160px}.site-footer{background:var(--teal-dark);color:rgba(255,255,255,.78);border:0}.site-footer strong,.site-footer a{color:white}.footer-support-link{color:#f3c66f!important}
.dialog{background:var(--surface)}.dialog::backdrop{background:rgba(5,35,34,.65)}
.policy-page{max-width:860px}.policy-page h1,.policy-page h2{color:var(--ink)}.policy-page a{color:var(--teal)}
@media (max-width:980px){
 .production-header{align-items:flex-start;flex-wrap:wrap}.production-brand{min-width:300px}.production-brand-text strong{font-size:24px}.production-brand-mark{width:60px;height:60px}.production-header .header-actions{flex:1 1 100%;justify-content:flex-start;flex-wrap:wrap}
 .production-hero{grid-template-columns:1fr 48%;}.hero-copy-column{padding-left:34px;padding-right:28px}.hero-copy-column h1{font-size:clamp(58px,8vw,82px)}
}
@media (max-width:700px){
 .production-header{position:static;padding:14px 16px 16px;display:block}.production-brand{width:100%;min-width:0;margin-bottom:12px}.production-brand-mark{width:58px;height:58px}.production-brand-text{min-width:0}.production-brand-text strong{font-size:22px;white-space:normal}.production-brand-text small{font-size:9px;letter-spacing:.1em}
 .production-header .header-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.production-header .header-actions>.button{width:100%;min-height:48px;padding:10px;font-size:14px}.production-header #supportButton{grid-column:1/-1;order:3}.production-header #signInButton{order:1}.production-header #submitButton{order:2}.production-header .account{grid-column:1/-1;order:4;display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:9px;border-radius:14px;background:rgba(255,255,255,.08)}.production-header .account #accountName{grid-column:1/-1;padding:4px 7px}.production-header .account .text-button,.production-header .account .admin-link{text-align:center;padding:8px}
 .production-hero{display:flex;flex-direction:column;min-height:0}.hero-copy-column{padding:48px 20px 34px}.hero-copy-column h1{font-size:clamp(54px,15vw,76px);line-height:.94}.hero-copy-column .hero-copy{font-size:19px;line-height:1.5}.hero-copy-column .hero-actions{display:grid;grid-template-columns:1fr}.hero-copy-column .button{width:100%}
 .hero-art{min-height:310px;height:310px}.hero-art::before{left:0;right:0;top:0;bottom:auto;width:auto;height:20%;background:linear-gradient(180deg,var(--cream),rgba(255,249,240,.55),transparent)}.hero-art img{object-position:60% center}
 .principles{grid-template-columns:1fr;margin:0;padding:18px 16px 48px}.principles article{min-height:0;padding:20px}.feed-section{padding:56px 16px}.support-section{margin:30px 16px 0;padding:24px;display:block}.support-section .button{width:100%;margin-top:18px}.site-footer{padding:28px 20px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}


/* =========================================================
   v17.1 HOTFIX: hard layout reset for header + hero
   ========================================================= */

.production-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  align-items: center !important;
  gap: 24px !important;
  min-height: 88px !important;
  padding: 10px 28px !important;
  background: #063D3A !important;
  overflow: visible !important;
}

.production-brand {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  flex: 0 0 auto !important;
  text-decoration: none !important;
}

.production-brand-mark {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
  flex: 0 0 64px !important;
}

.production-brand-text {
  display: block !important;
  min-width: 0 !important;
}

.production-brand-text strong {
  display: block !important;
  color: #FFFDF9 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 26px !important;
  line-height: 1.02 !important;
  white-space: nowrap !important;
}

.production-brand-text small {
  display: block !important;
  margin-top: 5px !important;
  color: #E5A83D !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.production-header .header-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
}

.production-header .account {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: white !important;
  white-space: nowrap !important;
}

/* True two-column hero with no image overlap */
.production-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 48%) minmax(0, 52%) !important;
  align-items: stretch !important;
  min-height: 590px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #FFF9F0 !important;
  overflow: hidden !important;
}

.hero-copy-column {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 64px clamp(34px, 5vw, 78px) !important;
  background: #FFF9F0 !important;
}

.hero-copy-column h1 {
  margin: 0 !important;
  max-width: 690px !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(60px, 6.2vw, 96px) !important;
  line-height: .98 !important;
  letter-spacing: -.04em !important;
  color: #203642 !important;
}

.hero-copy-column .hero-copy {
  max-width: 620px !important;
  margin-top: 26px !important;
  font-size: 21px !important;
  line-height: 1.52 !important;
}

.hero-art {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 590px !important;
  overflow: hidden !important;
  background: #F4E6D3 !important;
}

.hero-art::before {
  content: "" !important;
  position: absolute !important;
  z-index: 2 !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 15% !important;
  height: auto !important;
  background: linear-gradient(90deg, #FFF9F0 0%, rgba(255,249,240,.62) 42%, transparent 100%) !important;
  pointer-events: none !important;
}

.hero-art img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 590px !important;
  object-fit: cover !important;
  object-position: 52% center !important;
}

/* Desktop account/header stability */
@media (min-width: 761px) {
  .production-header {
    max-height: 96px !important;
  }
}

/* Tablet */
@media (max-width: 1050px) and (min-width: 761px) {
  .production-header {
    grid-template-columns: 1fr !important;
    max-height: none !important;
  }

  .production-header .header-actions {
    justify-content: flex-start !important;
  }

  .production-brand-text strong {
    font-size: 23px !important;
  }

  .production-hero {
    grid-template-columns: minmax(0, 52%) minmax(0, 48%) !important;
  }

  .hero-copy-column {
    padding: 52px 32px !important;
  }
}

/* Mobile: intentionally stacked */
@media (max-width: 760px) {
  .production-header {
    position: static !important;
    display: block !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 12px 16px 16px !important;
  }

  .production-brand {
    width: 100% !important;
    margin-bottom: 12px !important;
  }

  .production-brand-mark {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    flex-basis: 54px !important;
  }

  .production-brand-text strong {
    font-size: 21px !important;
    white-space: normal !important;
  }

  .production-brand-text small {
    font-size: 9px !important;
    letter-spacing: .08em !important;
  }

  .production-header .header-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .production-header .header-actions > .button {
    width: 100% !important;
    min-height: 46px !important;
  }

  .production-header #supportButton {
    grid-column: 1 / -1 !important;
  }

  .production-header .account {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
    padding: 9px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.08) !important;
  }

  .production-header .account #accountName {
    grid-column: 1 / -1 !important;
    padding: 4px 7px !important;
  }

  .production-hero {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }

  .hero-copy-column {
    padding: 46px 20px 34px !important;
  }

  .hero-copy-column h1 {
    font-size: clamp(52px, 15vw, 74px) !important;
    line-height: .94 !important;
  }

  .hero-copy-column .hero-copy {
    font-size: 19px !important;
    line-height: 1.5 !important;
  }

  .hero-art {
    width: 100% !important;
    min-height: 300px !important;
    height: 300px !important;
  }

  .hero-art::before {
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: auto !important;
    width: auto !important;
    height: 18% !important;
    background: linear-gradient(180deg, #FFF9F0 0%, rgba(255,249,240,.45) 58%, transparent 100%) !important;
  }

  .hero-art img {
    min-height: 300px !important;
    height: 300px !important;
    object-position: 50% center !important;
  }
}
\n/* v18 approved standalone assets */\n.production-brand-mark{width:58px!important;height:58px!important;min-width:58px!important;max-width:58px!important;min-height:58px!important;max-height:58px!important;flex-basis:58px!important;object-fit:contain!important;background:transparent!important;border-radius:50%!important}\n.production-hero{grid-template-columns:minmax(0,46%) minmax(0,54%)!important;min-height:560px!important}\n.hero-art{min-height:560px!important;background:#fff9f0!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:0!important}\n.hero-art::before{display:none!important}\n.hero-art img{width:100%!important;height:auto!important;min-height:0!important;max-height:560px!important;object-fit:contain!important;object-position:center!important;display:block!important}\n@media(max-width:760px){.production-brand-mark{width:52px!important;height:52px!important;min-width:52px!important;max-width:52px!important;min-height:52px!important;max-height:52px!important;flex-basis:52px!important}.production-hero{display:flex!important;flex-direction:column!important;min-height:0!important}.hero-art{height:auto!important;min-height:0!important;padding:0!important}.hero-art img{width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important}}\n

/* v19 beta polish */
.prompt-box{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 18px;margin:4px 0 18px;border:1px solid rgba(45,123,120,.18);border-radius:16px;background:#f2f8f5}.prompt-box strong{display:block;margin-top:4px;color:#203642}.prompt-label{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#2d7b78}.success-dialog{max-width:520px}.report-dialog{max-width:520px}.about-story{max-width:760px}.about-story blockquote{margin:22px 0;padding:18px 22px;border-left:4px solid #e5a83d;background:#fff9f0;font:700 1.55rem/1.25 Georgia,serif;color:#203642}.about-closing{font-size:1.15rem;color:#2d7b78}.copyright{font-size:12px;opacity:.72}.reported-card{border-left:5px solid #d89b35}.moderation-actions button:disabled{opacity:.55;cursor:wait}@media(max-width:600px){.prompt-box{align-items:flex-start;flex-direction:column}}

/* v19.1 About page */
.about-page {
  max-width: 820px;
}
.about-page h1 {
  max-width: 760px;
}
.about-page p {
  font-size: 19px;
  line-height: 1.72;
}
.about-quote {
  margin: 34px 0;
  padding: 26px 30px;
  border-left: 5px solid #F3B45F;
  background: #FFF3E5;
  color: #203642;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(30px, 5vw, 48px);
  line-height: 1.2;
}
.about-closing {
  margin-top: 36px;
  font-size: 24px !important;
  color: #205D5B;
}


/* =========================================================
   v20 Discovery & Sharing
   ========================================================= */

.moderation-badge {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 999px;
  background: #E98362;
  color: white;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
}

.daily-wisdom-section {
  max-width: 1120px;
  margin: 0 auto;
  padding: 64px 24px 72px;
}

.daily-wisdom-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 24px;
}

.daily-wisdom-heading h2 {
  margin: 0;
  max-width: 720px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 500;
  line-height: 1.05;
}

.featured-wisdom-card {
  display: grid;
  grid-template-columns: minmax(0, 48%) minmax(0, 52%);
  max-width: 980px;
  margin: 0 auto;
  border: 1px solid rgba(229,168,61,.28);
  box-shadow: 0 20px 50px rgba(32,54,66,.12);
}

.featured-wisdom-card .card-media {
  min-height: 100%;
}

.featured-wisdom-card .card-media video,
.featured-wisdom-card .text-card-art {
  height: 100%;
  min-height: 340px;
}

.featured-wisdom-card .card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 34px;
}

.featured-wisdom-card .advice-text {
  font-size: clamp(30px, 4vw, 44px);
}

.secondary-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.share-button {
  color: #205D5B;
  font-weight: 800;
}

.most-helpful-section {
  background: #FFF8EF;
  padding: 64px 24px 74px;
}

.compact-heading {
  margin-bottom: 24px;
}

.most-helpful-list {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  gap: 10px;
}

.most-helpful-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 17px 20px;
  border: 1px solid rgba(32,54,66,.09);
  border-radius: 16px;
  background: #FFFDF9;
  box-shadow: 0 6px 18px rgba(32,54,66,.05);
}

.helpful-rank {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #205D5B;
  color: white;
  font-weight: 900;
}

.most-helpful-copy {
  display: grid;
  gap: 5px;
}

.most-helpful-copy strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  line-height: 1.3;
}

.most-helpful-copy span,
.most-helpful-count {
  color: #66727A;
  font-size: 13px;
}

.most-helpful-count {
  font-weight: 800;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .daily-wisdom-section {
    padding: 42px 16px 48px;
  }

  .daily-wisdom-heading {
    display: block;
  }

  .daily-wisdom-heading .text-button {
    margin-top: 10px;
    padding-left: 0;
  }

  .featured-wisdom-card {
    display: block;
  }

  .featured-wisdom-card .card-media video,
  .featured-wisdom-card .text-card-art {
    min-height: 230px;
    height: auto;
  }

  .featured-wisdom-card .card-body {
    padding: 22px;
  }

  .most-helpful-section {
    padding: 44px 16px 54px;
  }

  .most-helpful-row {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 15px;
  }

  .most-helpful-share {
    grid-column: 2 / -1;
    justify-self: start;
    padding-left: 0;
  }

  .most-helpful-count {
    font-size: 12px;
  }

  .secondary-card-actions {
    gap: 2px;
  }
}


/* =========================================================
   v20.1 Submission confirmation
   ========================================================= */

.success-dialog {
  width: min(760px, calc(100vw - 32px));
  max-width: 760px;
  padding: 30px 32px 32px;
  border-radius: 30px;
  overflow: visible;
}

.success-received-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.success-received {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.success-check {
  display: inline-grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: #24785F;
  color: white;
  font-size: 17px;
  font-weight: 900;
}

.success-hero {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  margin: 28px 0 22px;
}

.success-tree-mark {
  display: block;
  width: 104px;
  height: 104px;
  object-fit: contain;
  border-radius: 50%;
}

.success-dialog .success-hero h2 {
  margin: 0;
  max-width: 560px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: -0.025em;
}

.success-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 8px 0 24px;
}

.success-divider::before,
.success-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(32, 93, 91, .42);
}

.success-divider span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2D7B78;
}

.success-explanation {
  margin: 0 0 26px;
  font-size: 18px;
  line-height: 1.55;
}

.success-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  min-height: 142px;
  overflow: hidden;
  border: 1px solid rgba(32, 93, 91, .18);
  border-radius: 18px;
  background: #F7F8F1;
}

.success-next-copy {
  padding: 22px 24px;
}

.success-next h3 {
  margin: 0 0 8px;
  color: #205D5B;
  font-size: 20px;
}

.success-next p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

.success-next img {
  width: 100%;
  height: 100%;
  min-height: 142px;
  object-fit: cover;
  object-position: 66% 50%;
}

.success-done {
  margin-top: 24px;
  min-height: 56px;
}

@media (max-width: 640px) {
  .success-dialog {
    width: min(94vw, 560px);
    padding: 22px 20px 20px;
    border-radius: 24px;
  }

  .success-hero {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 15px;
    margin: 20px 0 18px;
  }

  .success-tree-mark {
    width: 68px;
    height: 68px;
  }

  .success-dialog .success-hero h2 {
    font-size: clamp(31px, 9vw, 42px);
  }

  .success-explanation {
    font-size: 16px;
  }

  .success-next {
    display: block;
  }

  .success-next-copy {
    padding: 18px;
  }

  .success-next img {
    display: none;
  }

  .success-done {
    margin-top: 18px;
  }
}


/* =========================================================
   v20.6 Featured Wisdom card cleanup
   ========================================================= */

.featured-text-art {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 340px;
  overflow: hidden;
  background: #173f3d;
}

.featured-text-art > img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  object-position: 64% center;
  filter: saturate(.9) brightness(.82);
}

.featured-text-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(6,61,58,.06) 0%,
    rgba(6,61,58,.42) 100%
  );
}

.featured-text-art-overlay {
  position: absolute;
  z-index: 2;
  left: 28px;
  right: 28px;
  bottom: 26px;
  display: flex;
  align-items: center;
  gap: 13px;
  color: #FFFDF9;
  font-weight: 800;
  font-size: 16px;
}

.featured-tree-logo {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 50%;
  object-fit: contain;
  background: rgba(255,255,255,.9);
}

@media (max-width: 760px) {
  .featured-text-art,
  .featured-text-art > img {
    min-height: 230px;
  }

  .featured-text-art-overlay {
    left: 18px;
    right: 18px;
    bottom: 18px;
    font-size: 14px;
  }

  .featured-tree-logo {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }
}


/* =========================================================
   v20.7 Wisdom of the Day dedicated component
   ========================================================= */

#wisdomOfDayCard {
  width: 100%;
}

.daily-feature-card {
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 54%);
  width: min(1120px, 100%);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(217, 164, 62, .28);
  border-radius: 26px;
  background: #FFFDF9;
  box-shadow: 0 18px 44px rgba(32, 54, 66, .10);
}

.daily-feature-media {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  background: #173F3D;
}

.daily-feature-media img,
.daily-feature-media video {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 390px !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: 63% center !important;
  margin: 0 !important;
  border: 0 !important;
}

.daily-feature-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(6,61,58,0) 52%,
    rgba(6,61,58,.22) 100%
  );
}

.daily-feature-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 34px 38px;
}

.daily-feature-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.daily-feature-contributor {
  color: #55656D;
  font-weight: 700;
  text-align: right;
  line-height: 1.35;
}

.daily-feature-quote {
  margin: 0;
  color: #203642;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1.14;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}

.daily-feature-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid rgba(32,54,66,.13);
}

.daily-feature-footer .wisdom-stamp {
  position: static !important;
  display: inline-flex !important;
  width: auto !important;
  max-width: 100%;
  margin: 0 !important;
}

.daily-feature-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.daily-feature-actions .text-button {
  margin: 0;
  padding: 4px 0;
}

@media (max-width: 900px) {
  .daily-feature-card {
    grid-template-columns: 42% 58%;
  }

  .daily-feature-content {
    padding: 28px;
  }

  .daily-feature-quote {
    font-size: clamp(30px, 5vw, 46px);
  }
}

@media (max-width: 700px) {
  .daily-feature-card {
    display: block;
    border-radius: 22px;
  }

  .daily-feature-media {
    min-height: 245px;
    height: 245px;
  }

  .daily-feature-media img,
  .daily-feature-media video {
    min-height: 245px !important;
    height: 245px !important;
    object-position: 58% center !important;
  }

  .daily-feature-content {
    padding: 24px 20px 22px;
  }

  .daily-feature-topline {
    display: block;
    margin-bottom: 20px;
  }

  .daily-feature-contributor {
    display: block;
    margin-top: 10px;
    text-align: left;
  }

  .daily-feature-quote {
    font-size: clamp(30px, 9vw, 44px);
  }

  .daily-feature-footer {
    display: block;
    margin-top: 26px;
    padding-top: 18px;
  }

  .daily-feature-actions {
    margin-top: 16px;
    justify-content: flex-start;
  }
}


/* =========================================================
   v20.8 Wisdom of the Day: single-card treatment
   ========================================================= */

#wisdomOfDayCard {
  width: 100%;
}

.daily-single-card {
  width: min(980px, 100%);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid rgba(217, 164, 62, .28);
  border-radius: 24px;
  background: #FFFDF9;
  box-shadow: 0 16px 38px rgba(32, 54, 66, .09);
}

.daily-single-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 30px;
}

.daily-single-contributor {
  color: #55656D;
  font-weight: 700;
  text-align: right;
  line-height: 1.35;
}

.daily-single-quote {
  max-width: 840px;
  color: #203642;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(38px, 5.2vw, 68px);
  line-height: 1.08;
  letter-spacing: -.03em;
}

.daily-single-video-wrap {
  margin-top: 28px;
  overflow: hidden;
  border-radius: 18px;
  background: #173F3D;
}

.daily-single-video-wrap video {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  background: #173F3D;
}

.daily-single-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid rgba(32,54,66,.13);
}

.daily-single-footer .wisdom-stamp {
  position: static !important;
  display: inline-flex !important;
  width: auto !important;
  margin: 0 !important;
}

.daily-single-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.daily-single-actions .text-button {
  margin: 0;
  padding: 4px 0;
}

@media (max-width: 700px) {
  .daily-single-card {
    padding: 24px 20px 22px;
    border-radius: 20px;
  }

  .daily-single-topline {
    display: block;
    margin-bottom: 22px;
  }

  .daily-single-contributor {
    display: block;
    margin-top: 10px;
    text-align: left;
  }

  .daily-single-quote {
    font-size: clamp(34px, 10vw, 48px);
  }

  .daily-single-footer {
    display: block;
    margin-top: 26px;
    padding-top: 18px;
  }

  .daily-single-actions {
    margin-top: 16px;
    justify-content: flex-start;
  }
}


/* =========================================================
   v20.9 Polished Wisdom of the Day card
   ========================================================= */

.daily-showcase-card {
  width: min(1120px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 28px;
  padding: 34px 38px 30px;
  border: 1px solid rgba(211, 168, 106, .38);
  border-radius: 28px;
  background: #FFFDF9;
  box-shadow: 0 14px 34px rgba(32,54,66,.08);
}

.daily-showcase-icon {
  display: grid;
  place-items: center;
  align-self: start;
  min-height: 170px;
}

.daily-showcase-icon svg {
  width: 138px;
  height: 138px;
  display: block;
}

.daily-showcase-main {
  min-width: 0;
}

.daily-showcase-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 28px;
}

.daily-showcase-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  flex-wrap: wrap;
}

.daily-showcase-contributor {
  color: #203642;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}

.daily-showcase-id {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 11px 18px;
  border-radius: 999px;
  background: #07594F;
  color: #FFFDF9;
  font-size: 14px;
  font-weight: 900;
}

.daily-showcase-quote {
  max-width: 860px;
  color: #173640;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(42px, 4.8vw, 66px);
  line-height: 1.1;
  letter-spacing: -.025em;
}

.daily-showcase-video {
  margin-top: 26px;
  overflow: hidden;
  border-radius: 18px;
  background: #173F3D;
}

.daily-showcase-video video {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: contain;
}

.daily-showcase-actions {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid rgba(32,54,66,.12);
  flex-wrap: wrap;
}

.daily-showcase-actions button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.daily-helpful-button {
  color: #D84A4A;
}

.daily-helpful-button .heart-icon {
  display: inline-block;
  margin-right: 8px;
  font-size: 22px;
  line-height: 1;
}

.daily-helpful-button.voted .heart-icon {
  color: #D84A4A;
}

.daily-share-button {
  color: #07594F;
}

.daily-report-button {
  color: #6B7378;
}

.daily-share-button span,
.daily-report-button span {
  display: inline-block;
  margin-right: 7px;
  font-size: 20px;
}

@media (max-width: 820px) {
  .daily-showcase-card {
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 22px;
    padding: 28px;
  }

  .daily-showcase-icon {
    min-height: 118px;
  }

  .daily-showcase-icon svg {
    width: 104px;
    height: 104px;
  }

  .daily-showcase-topline {
    align-items: flex-start;
  }

  .daily-showcase-quote {
    font-size: clamp(36px, 6vw, 52px);
  }
}

@media (max-width: 640px) {
  .daily-showcase-card {
    display: block;
    padding: 22px 20px 20px;
    border-radius: 22px;
  }

  .daily-showcase-icon {
    display: none;
  }

  .daily-showcase-topline {
    display: block;
    margin-bottom: 22px;
  }

  .daily-showcase-meta {
    display: block;
  }

  .daily-showcase-contributor {
    display: block;
    margin-top: 10px;
    font-size: 16px;
  }

  .daily-showcase-id {
    margin-top: 14px;
    font-size: 12px;
    padding: 9px 14px;
  }

  .daily-showcase-quote {
    font-size: clamp(34px, 10vw, 46px);
  }

  .daily-showcase-actions {
    gap: 18px;
    margin-top: 26px;
    padding-top: 18px;
  }

  .daily-showcase-actions button {
    font-size: 15px;
  }
}


/* =========================================================
   v20.10 Featured-card hard containment
   Prevent global/legacy media rules from escaping this component.
   ========================================================= */

#wisdomOfDayCard .daily-showcase-card {
  box-sizing: border-box !important;
  position: relative !important;
  width: min(1120px, 100%) !important;
  max-width: 1120px !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: 170px minmax(0, 1fr) !important;
  gap: 28px !important;
  margin: 0 auto !important;
  padding: 34px 38px 30px !important;
  border: 1px solid rgba(211,168,106,.38) !important;
  border-radius: 28px !important;
  background: #FFFDF9 !important;
  box-shadow: 0 14px 34px rgba(32,54,66,.08) !important;
}

#wisdomOfDayCard .daily-showcase-icon {
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  width: 170px !important;
  height: 170px !important;
  min-width: 170px !important;
  min-height: 170px !important;
  max-width: 170px !important;
  max-height: 170px !important;
  overflow: hidden !important;
}

#wisdomOfDayCard .daily-showcase-icon > svg {
  display: block !important;
  position: static !important;
  width: 138px !important;
  height: 138px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 138px !important;
  max-height: 138px !important;
  margin: 0 !important;
  transform: none !important;
}

#wisdomOfDayCard .daily-showcase-main {
  min-width: 0 !important;
  width: auto !important;
  overflow: hidden !important;
}

#wisdomOfDayCard .daily-showcase-quote {
  width: auto !important;
  max-width: 860px !important;
  min-height: 0 !important;
  overflow: visible !important;
}

@media (max-width: 820px) and (min-width: 641px) {
  #wisdomOfDayCard .daily-showcase-card {
    grid-template-columns: 118px minmax(0, 1fr) !important;
    gap: 22px !important;
    padding: 28px !important;
  }

  #wisdomOfDayCard .daily-showcase-icon {
    width: 118px !important;
    height: 118px !important;
    min-width: 118px !important;
    min-height: 118px !important;
    max-width: 118px !important;
    max-height: 118px !important;
  }

  #wisdomOfDayCard .daily-showcase-icon > svg {
    width: 104px !important;
    height: 104px !important;
    max-width: 104px !important;
    max-height: 104px !important;
  }
}

@media (max-width: 640px) {
  #wisdomOfDayCard .daily-showcase-card {
    display: block !important;
    padding: 22px 20px 20px !important;
    border-radius: 22px !important;
  }

  #wisdomOfDayCard .daily-showcase-icon {
    display: none !important;
  }
}


/* =========================================================
   v20.11 Social share menu + single-heart cleanup
   ========================================================= */

/* Wisdom of the Day uses the same Helpful button structure and vote-state logic as Recent Wisdom. */
#wisdomOfDayCard .daily-helpful-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #c95e69;
  font-weight: 800;
}

#wisdomOfDayCard .daily-helpful-button.voted {
  color: #c95e69;
}

/* Explicit social share popover. */
.social-share-menu {
  position: absolute;
  z-index: 10000;
  width: 220px;
  padding: 10px;
  border: 1px solid rgba(32,54,66,.14);
  border-radius: 16px;
  background: #FFFDF9;
  box-shadow: 0 18px 46px rgba(32,54,66,.18);
  color: #203642;
}

.social-share-title {
  padding: 8px 10px 10px;
  color: #203642;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.social-share-option {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #203642;
  text-decoration: none;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.social-share-option:hover,
.social-share-option:focus-visible {
  background: #F5F0E8;
  outline: none;
}

.social-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  font-weight: 900;
  line-height: 1;
}

.social-facebook {
  background: #1877F2;
  color: white;
  font-family: Arial, sans-serif;
  font-size: 18px;
}

.social-x {
  background: #111;
  color: white;
  font-size: 15px;
}

.social-bluesky {
  background: #EAF4FF;
  color: #1473E6;
  font-size: 15px;
}

.social-linkedin {
  border-radius: 5px;
  background: #0A66C2;
  color: white;
  font-family: Arial, sans-serif;
  font-size: 13px;
}

.social-email,
.social-copy {
  background: #F0EEE9;
  color: #52616A;
  font-size: 15px;
}

@media (max-width: 640px) {
  .social-share-menu {
    position: fixed;
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    top: auto !important;
    width: auto;
    max-height: 72vh;
    overflow-y: auto;
    border-radius: 20px;
  }

  .social-share-option {
    padding: 12px 10px;
    font-size: 16px;
  }
}


/* =========================================================
   V21.3 Compact standard wisdom cards
   ========================================================= */

.compact-text-wisdom-card .card-body {
  padding-top: 22px;
  padding-bottom: 18px;
}

.compact-text-wisdom-card .card-meta {
  margin-bottom: 0;
}

.compact-text-wisdom-card .advice-text {
  display: none !important;
}

.compact-text-wisdom-card .card-actions {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(32, 54, 66, .13);
}

@media (max-width: 700px) {
  .compact-text-wisdom-card .card-body {
    padding-top: 18px;
    padding-bottom: 16px;
  }

  .compact-text-wisdom-card .card-actions {
    margin-top: 16px;
    padding-top: 15px;
  }
}


/* =========================================================
   V22.3 OKLAHOMA production refresh
   Approved bright/hopeful design direction.
   ========================================================= */

:root {
  --ok-navy: #12385b;
  --ok-teal: #0797a3;
  --ok-teal-dark: #087b82;
  --ok-green: #58b83f;
  --ok-lime: #8fd14f;
  --ok-orange: #ff8c2f;
  --ok-gold: #ffc43d;
  --ok-coral: #ff6258;
  --ok-blue: #2f8ce5;
  --ok-purple: #8d4dcc;
  --ok-ink: #17384b;
  --ok-muted: #506b78;
  --ok-white: #ffffff;
  --ok-mint: #f0fbf5;
  --ok-sky: #eef7ff;
  --ok-peach: #fff4e9;
  --ok-lilac: #f8f1ff;
}

html, body {
  background: #fff !important;
}

body {
  color: var(--ok-ink) !important;
  background:
    radial-gradient(circle at 5% 4%, rgba(255,196,61,.10), transparent 22rem),
    radial-gradient(circle at 96% 15%, rgba(47,140,229,.08), transparent 24rem),
    linear-gradient(180deg,#fff 0%,#fbfdff 62%,#fffaf4 100%) !important;
}

/* HEADER */
.site-header {
  min-height: 112px !important;
  background: rgba(255,255,255,.98) !important;
  border-bottom: 1px solid rgba(18,56,91,.08) !important;
  box-shadow: 0 8px 26px rgba(18,56,91,.07) !important;
  color: var(--ok-navy) !important;
}

.site-header .brand,
.site-header .brand-mark,
.site-header .site-brand {
  display: flex !important;
  align-items: center !important;
}

.site-header .brand img,
.site-header .brand-mark img,
.site-header .site-brand img,
.site-header img[src*="logo-v22"] {
  width: min(360px, 34vw) !important;
  max-width: 360px !important;
  height: auto !important;
  object-fit: contain !important;
  opacity: 1 !important;
  filter: none !important;
}

.site-header a,
.site-header button,
.site-header .account-name,
.site-header .nav-link {
  color: var(--ok-navy) !important;
  font-weight: 700 !important;
}

.site-header .primary-button,
.site-header .share-wisdom-button {
  background: linear-gradient(135deg,var(--ok-orange),var(--ok-coral)) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 8px 18px rgba(255,98,88,.18) !important;
}

.site-header .secondary-button,
.site-header .sign-in-button {
  border: 2px solid var(--ok-teal) !important;
  color: var(--ok-teal) !important;
  background: #fff !important;
}

/* HERO */
.hero {
  min-height: 560px !important;
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 84% 18%, rgba(255,196,61,.26), transparent 12rem),
    radial-gradient(circle at 74% 70%, rgba(88,184,63,.18), transparent 17rem),
    radial-gradient(circle at 14% 84%, rgba(7,151,163,.11), transparent 18rem),
    linear-gradient(118deg,#fff 0%,#f4fff9 50%,#eef8ff 100%) !important;
  border-bottom: 0 !important;
}

.hero > *,
.hero-inner,
.hero-content,
.hero-copy {
  position: relative !important;
  z-index: 2 !important;
}

.hero h1,
.hero-title {
  color: var(--ok-navy) !important;
  font-size: clamp(56px,7vw,104px) !important;
  line-height: .98 !important;
  max-width: 860px !important;
  letter-spacing: -.035em !important;
}

.hero-highlight {
  background: linear-gradient(90deg,var(--ok-green),var(--ok-teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

.hero p,
.hero-copy p {
  color: #3e5d6c !important;
  font-size: clamp(18px,1.8vw,26px) !important;
  line-height: 1.5 !important;
  max-width: 720px !important;
}

/* Remove ominous old hero tree imagery */
.hero img[src*="hero-tree"],
.hero img[src*="hero-v18"],
.hero picture,
.hero .hero-image,
.hero .hero-media,
.hero .hero-art {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Bright abstract "sun/garden" visual instead */
.hero::before {
  content: "";
  position: absolute;
  right: 4%;
  top: 12%;
  width: min(42vw,560px);
  height: min(42vw,560px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 30%, rgba(255,255,255,.96) 0 10%, transparent 11%),
    radial-gradient(circle at 67% 32%, rgba(255,196,61,.9) 0 9%, transparent 10%),
    radial-gradient(circle at 45% 66%, rgba(88,184,63,.65) 0 13%, transparent 14%),
    radial-gradient(circle at 70% 66%, rgba(7,151,163,.62) 0 12%, transparent 13%),
    linear-gradient(145deg,#fff4dc 0%,#edfff5 56%,#edf8ff 100%);
  box-shadow: 0 22px 60px rgba(18,56,91,.10);
  z-index: 0;
}

.hero::after {
  content: "☀";
  position: absolute;
  right: 10%;
  top: 18%;
  z-index: 1;
  color: var(--ok-gold);
  font-size: clamp(60px,7vw,110px);
  text-shadow: 0 8px 26px rgba(255,196,61,.22);
}

.hero-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 30px;
  margin-top: 22px;
  font-weight: 800;
  font-size: 1rem;
}

.hero-benefits .benefit-people { color: var(--ok-teal); }
.hero-benefits .benefit-stories { color: var(--ok-coral); }
.hero-benefits .benefit-impact { color: var(--ok-orange); }

.hero .primary-button,
.hero .btn-primary {
  background: linear-gradient(135deg,var(--ok-teal),var(--ok-green)) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 10px 22px rgba(7,151,163,.16) !important;
}

.hero .secondary-button,
.hero .btn-secondary {
  background: #fff !important;
  color: var(--ok-teal) !important;
  border: 2px solid var(--ok-teal) !important;
}

/* SECTION TITLES */
.section-heading,
h2 {
  color: var(--ok-navy) !important;
}

.section-heading::after {
  width: 64px !important;
  height: 5px !important;
  background: linear-gradient(90deg,var(--ok-orange),var(--ok-gold)) !important;
}

/* WISDOM CARDS */
.wisdom-card {
  background: #fff !important;
  border: 1px solid rgba(18,56,91,.07) !important;
  border-radius: 24px !important;
  box-shadow: 0 14px 30px rgba(18,56,91,.07) !important;
}

.wisdom-card .card-body {
  background: #fff !important;
}

.text-card-art {
  background: linear-gradient(135deg,#0797a3 0%,#087b82 100%) !important;
  color: #fff !important;
}

.wisdom-card:nth-child(4n+2) .text-card-art {
  background: linear-gradient(135deg,#ffad35 0%,#ff7f3d 100%) !important;
}

.wisdom-card:nth-child(4n+3) .text-card-art {
  background: linear-gradient(135deg,#2f8ce5 0%,#3967d7 100%) !important;
}

.wisdom-card:nth-child(4n) .text-card-art {
  background: linear-gradient(135deg,#64c54e 0%,#26995f 100%) !important;
}

.topic-pill {
  background: #fff0d8 !important;
  color: #91551a !important;
}

.helpful-button {
  color: var(--ok-coral) !important;
}

.share-button {
  color: var(--ok-teal) !important;
}

/* WISDOM OF THE DAY */
#wisdomOfDaySection {
  background: linear-gradient(180deg,#f8fffb 0%,#fff 100%) !important;
}

#wisdomOfDayCard .daily-showcase-card {
  background:
    radial-gradient(circle at 90% 15%,rgba(255,196,61,.18),transparent 9rem),
    linear-gradient(140deg,#fff 0%,#f1fff8 100%) !important;
  border: 1px solid rgba(7,151,163,.13) !important;
  border-radius: 28px !important;
  box-shadow: 0 16px 38px rgba(7,151,163,.08) !important;
}

#wisdomOfDayCard .daily-showcase-icon circle {
  fill: #eafff1 !important;
}

#wisdomOfDayCard .daily-showcase-id {
  background: var(--ok-teal) !important;
}

/* PROMPT */
.question-card,
.question-of-the-week,
.prompt-card {
  background:
    radial-gradient(circle at 92% 18%,rgba(255,196,61,.28),transparent 9rem),
    linear-gradient(140deg,#fff8e9 0%,#fffdf7 100%) !important;
  border: 1px solid rgba(255,140,47,.15) !important;
  box-shadow: 0 14px 30px rgba(255,140,47,.08) !important;
}

.question-card .button,
.question-card button,
.question-of-the-week .button {
  background: linear-gradient(135deg,var(--ok-orange),var(--ok-coral)) !important;
  color: #fff !important;
}

/* SUPPORT */
.support-card,
.support-section {
  background:
    radial-gradient(circle at 90% 12%,rgba(143,209,79,.22),transparent 10rem),
    linear-gradient(135deg,#effff5 0%,#fff 100%) !important;
  border: 1px solid rgba(88,184,63,.14) !important;
  box-shadow: 0 14px 30px rgba(88,184,63,.07) !important;
}

.support-card .button,
.support-section .button {
  background: linear-gradient(135deg,var(--ok-teal),var(--ok-green)) !important;
  color: #fff !important;
}

/* CONTROLS */
button,
.button,
a.button {
  border-radius: 999px !important;
}

input,
textarea,
select {
  background: #fff !important;
  border-color: rgba(18,56,91,.14) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--ok-teal) !important;
  box-shadow: 0 0 0 3px rgba(7,151,163,.10) !important;
}

/* FOOTER */
footer,
.site-footer {
  background: linear-gradient(90deg,#087f85 0%,#1aa57f 55%,#62bd4a 100%) !important;
  color: #fff !important;
}

footer a,
.site-footer a {
  color: #fff !important;
}

@media (max-width: 800px) {
  .site-header {
    min-height: 86px !important;
  }

  .site-header .brand img,
  .site-header .brand-mark img,
  .site-header .site-brand img,
  .site-header img[src*="logo-v22"] {
    width: 240px !important;
  }

  .hero {
    min-height: auto !important;
    padding-bottom: 34px !important;
  }

  .hero::before {
    width: 220px;
    height: 220px;
    right: -80px;
    top: 60px;
    opacity: .60;
  }

  .hero::after {
    font-size: 52px;
    right: 18px;
    top: 62px;
  }

  .hero h1,
  .hero-title {
    font-size: clamp(44px,12vw,70px) !important;
  }
}


/* =========================================================
   V22.4 OKLAHOMA - approved mockup direction
   Larger branding + hopeful, human, contemporary presentation
   ========================================================= */

:root {
  --v224-navy: #0f3767;
  --v224-teal: #078e9a;
  --v224-green: #5bb53e;
  --v224-orange: #ff6818;
  --v224-gold: #ffb40d;
  --v224-coral: #ff4f25;
  --v224-blue: #1765d8;
  --v224-purple: #82299a;
  --v224-ink: #112d50;
}

/* Header */
.site-header {
  min-height: 128px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  background: #fff !important;
}

.site-header .brand img,
.site-header .brand-mark img,
.site-header .site-brand img,
.site-header img[src*="logo-v22"] {
  width: clamp(330px, 30vw, 500px) !important;
  max-width: 500px !important;
  min-width: 330px !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

.site-header nav,
.site-header .nav,
.site-header .header-actions {
  align-items: center !important;
}

.site-header .share-wisdom-button,
.site-header .primary-button {
  background: linear-gradient(135deg, #ff7b18, #ff4f25) !important;
  color: #fff !important;
}

/* Hero closer to approved mockup */
.hero {
  min-height: 540px !important;
  background:
    radial-gradient(circle at 38% 16%, rgba(255,180,13,.10), transparent 16rem),
    linear-gradient(90deg, #fff 0%, #fffdf8 44%, #f4fff8 100%) !important;
}

.hero h1,
.hero-title {
  font-size: clamp(58px, 6.3vw, 98px) !important;
  color: var(--v224-navy) !important;
  line-height: 1.01 !important;
}

.hero-highlight {
  background: linear-gradient(90deg, var(--v224-teal), #0aa1a3) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  font-style: italic;
}

.hero p,
.hero-copy p {
  color: #1c3558 !important;
  font-size: clamp(19px, 1.5vw, 25px) !important;
}

/* Remove V22.3 abstract circle/sun visual */
.hero::before,
.hero::after {
  display: none !important;
}

/* Create a lively photo-style panel using existing site imagery rather than ominous tree */
.hero {
  position: relative !important;
}

.hero .hero-inner,
.hero .hero-content {
  position: relative !important;
}

/* If the original hero media container exists, make it bright and rounded */
.hero .hero-image,
.hero .hero-media,
.hero .hero-art,
.hero picture {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 45px rgba(15,55,103,.13) !important;
}

/* Do not show the dark tree assets */
.hero img[src*="hero-tree"],
.hero img[src*="hero-v18"] {
  display: none !important;
}

/* Benefits */
.hero-benefits {
  gap: 24px 34px !important;
  font-size: 1.05rem !important;
  margin: 26px 0 24px !important;
}

.hero-benefits .benefit-people { color: var(--v224-teal) !important; }
.hero-benefits .benefit-stories { color: var(--v224-coral) !important; }
.hero-benefits .benefit-impact { color: var(--v224-orange) !important; }

/* CTA treatment */
.hero .primary-button,
.hero .btn-primary {
  background: linear-gradient(135deg, var(--v224-teal), #0aa39a) !important;
  color: #fff !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}

.hero .secondary-button,
.hero .btn-secondary {
  color: var(--v224-teal) !important;
  border: 2px solid var(--v224-teal) !important;
  background: #fff !important;
}

/* Recent wisdom area */
.wisdom-grid,
.cards-grid {
  gap: 22px !important;
}

.wisdom-card {
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 28px rgba(15,55,103,.08) !important;
}

.text-card-art {
  background: linear-gradient(135deg, #078e9a, #08737c) !important;
}
.wisdom-card:nth-child(4n+2) .text-card-art {
  background: linear-gradient(135deg, #ffb40d, #f58a17) !important;
}
.wisdom-card:nth-child(4n+3) .text-card-art {
  background: linear-gradient(135deg, #1765d8, #3b72e6) !important;
}
.wisdom-card:nth-child(4n) .text-card-art {
  background: linear-gradient(135deg, #82299a, #a84eb9) !important;
}

/* Question and support as colorful side-panel style */
.question-card,
.question-of-the-week,
.prompt-card {
  background:
    radial-gradient(circle at 88% 12%, rgba(255,180,13,.20), transparent 8rem),
    linear-gradient(135deg, #fff8ea, #fffdf9) !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255,104,24,.12) !important;
}

.support-card,
.support-section {
  background:
    radial-gradient(circle at 92% 12%, rgba(7,142,154,.13), transparent 8rem),
    linear-gradient(135deg, #effbfb, #f8ffff) !important;
  border-radius: 22px !important;
  border: 1px solid rgba(7,142,154,.12) !important;
}

/* Make the overall page feel crisp, not beige */
main,
.content,
.page-content {
  background-color: transparent !important;
}

.section-heading::after {
  background: linear-gradient(90deg, var(--v224-green), var(--v224-gold)) !important;
}

/* Footer is bright teal instead of dark memorial green */
footer,
.site-footer {
  background: linear-gradient(90deg, #087c85, #08a18f) !important;
}

@media (max-width: 900px) {
  .site-header {
    min-height: 100px !important;
  }
  .site-header .brand img,
  .site-header .brand-mark img,
  .site-header .site-brand img,
  .site-header img[src*="logo-v22"] {
    width: 300px !important;
    min-width: 0 !important;
  }
}

@media (max-width: 600px) {
  .site-header .brand img,
  .site-header .brand-mark img,
  .site-header .site-brand img,
  .site-header img[src*="logo-v22"] {
    width: 230px !important;
  }
  .hero h1,
  .hero-title {
    font-size: clamp(44px, 12vw, 64px) !important;
  }
}


/* =========================================================
   V22.5 OKLAHOMA - hopeful, calmer palette
   Based on approved bright clean mockup.
   ========================================================= */
:root {
  --calm-navy:#14345b;
  --calm-teal:#078b95;
  --calm-green:#659d3d;
  --calm-sage:#86aa63;
  --calm-sky:#5b91c9;
  --calm-plum:#765397;
  --calm-coral:#dc695b;
  --calm-cream:#fbfaf6;
  --calm-mint:#f1f8f4;
  --calm-bluewash:#f1f6fb;
  --calm-lilac:#f6f2f8;
}

/* eliminate duplicated standalone tagline */
.site-header .brand-subtitle,
.site-header .tagline {
  display:none !important;
}

/* crisp white header, strong readable brand/nav */
.site-header {
  background:#fff !important;
  border-bottom:1px solid rgba(20,52,91,.08) !important;
}
.site-header a,
.site-header button,
.site-header .nav-link,
.site-header .account-name {
  color:var(--calm-navy) !important;
}
.site-header .share-wisdom-button,
.site-header .primary-button {
  background:linear-gradient(135deg,var(--calm-green),#78a944) !important;
  color:#fff !important;
  box-shadow:0 8px 18px rgba(101,157,61,.16) !important;
}

/* quieter, hopeful hero */
.hero {
  background:
    radial-gradient(circle at 78% 18%,rgba(134,170,99,.12),transparent 14rem),
    linear-gradient(100deg,#fff 0%,#fbfcf8 48%,#f2f8f5 100%) !important;
}
.hero h1,.hero-title { color:var(--calm-navy) !important; }
.hero-highlight {
  background:linear-gradient(90deg,var(--calm-teal),#287d84) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
}
.hero p,.hero-copy p { color:#3c5369 !important; }
.hero .primary-button,.hero .btn-primary {
  background:linear-gradient(135deg,var(--calm-teal),#267d82) !important;
}
.hero .secondary-button,.hero .btn-secondary {
  color:var(--calm-teal) !important;
  border-color:var(--calm-teal) !important;
}
.hero-benefits .benefit-people {color:var(--calm-green)!important}
.hero-benefits .benefit-stories {color:var(--calm-coral)!important}
.hero-benefits .benefit-impact {color:var(--calm-sky)!important}

/* calmer varied cards */
.text-card-art {
  background:linear-gradient(135deg,#158d91,#357b7b) !important;
}
.wisdom-card:nth-child(4n+2) .text-card-art {
  background:linear-gradient(135deg,#7b9f55,#5f8849) !important;
}
.wisdom-card:nth-child(4n+3) .text-card-art {
  background:linear-gradient(135deg,#668fb9,#527aa4) !important;
}
.wisdom-card:nth-child(4n) .text-card-art {
  background:linear-gradient(135deg,#80649b,#6d5386) !important;
}

.topic-pill {
  background:#eef6ef !important;
  color:#527b43 !important;
}
.helpful-button {color:var(--calm-coral)!important}
.share-button {color:var(--calm-teal)!important}

/* panels */
.question-card,.question-of-the-week,.prompt-card {
  background:linear-gradient(140deg,#f6f8ee,#fff) !important;
  border-color:rgba(101,157,61,.15) !important;
}
.question-card .button,.question-card button,.question-of-the-week .button {
  background:linear-gradient(135deg,var(--calm-green),#79a94d) !important;
}
.support-card,.support-section {
  background:linear-gradient(140deg,#eef8f8,#fff) !important;
  border-color:rgba(7,139,149,.13) !important;
}
.support-card .button,.support-section .button {
  background:linear-gradient(135deg,var(--calm-teal),#267d82) !important;
}

/* understated accents */
.section-heading::after {
  background:linear-gradient(90deg,var(--calm-green),var(--calm-teal)) !important;
}
footer,.site-footer {
  background:linear-gradient(90deg,#176f74,#3c806c) !important;
}


/* =========================================================
   V22.6 OKLAHOMA - definitive header branding fix
   ========================================================= */

.site-header {
  min-height: 112px !important;
  background: #fff !important;
}

.site-header .brand,
.site-header .brand-mark,
.site-header .site-brand {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

/* Clean logo: tree + wordmark only */
.site-header img[src*="logo-v22-clean"] {
  width: clamp(300px, 27vw, 430px) !important;
  max-width: 430px !important;
  min-width: 300px !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  object-fit: contain !important;
}

/* Legacy textual wordmark/tagline must never render beside the image */
.site-header .brand-copy,
.site-header .brand-text,
.site-header .brand-title,
.site-header .brand-subtitle,
.site-header .site-title,
.site-header .site-subtitle,
.site-header .tagline,
.site-header .logo-text,
.site-header .logo-copy {
  display: none !important;
}

/* Keep navigation readable and aligned with single logo */
.site-header .header-inner,
.site-header .nav-wrap {
  display: flex !important;
  align-items: center !important;
}

@media (max-width: 800px) {
  .site-header img[src*="logo-v22-clean"] {
    width: 260px !important;
    min-width: 0 !important;
  }
}
@media (max-width: 520px) {
  .site-header img[src*="logo-v22-clean"] {
    width: 215px !important;
  }
}


/* =========================================================
   V22.7 OKLAHOMA - definitive header cleanup
   ========================================================= */

.site-header {
  min-height: 118px !important;
  background: #ffffff !important;
  border-bottom: 1px solid rgba(20,52,91,.08) !important;
  box-shadow: 0 8px 24px rgba(20,52,91,.06) !important;
}

.site-header .header-inner,
.site-header .nav-wrap,
.site-header .header-content {
  display: flex !important;
  align-items: center !important;
}

.site-header .brand-v227 {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  margin-right: 28px !important;
  text-decoration: none !important;
}

.site-header .brand-v227 img {
  display: block !important;
  width: clamp(340px, 30vw, 470px) !important;
  max-width: 470px !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  object-fit: contain !important;
}

/* Kill any legacy text-brand remnants regardless of class naming. */
.site-header .brand-copy,
.site-header .brand-text,
.site-header .brand-title,
.site-header .brand-subtitle,
.site-header .site-title,
.site-header .site-subtitle,
.site-header .tagline,
.site-header .logo-text,
.site-header .logo-copy {
  display: none !important;
}

/* Header palette: white + navy + teal + green only. */
.site-header a,
.site-header button,
.site-header .nav-link,
.site-header .account-name {
  color: #14345B !important;
}

.site-header .share-wisdom-button,
.site-header .primary-button {
  background: linear-gradient(135deg, #5F9643, #78A94D) !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 8px 18px rgba(95,150,67,.15) !important;
}

.site-header .secondary-button,
.site-header .sign-in-button {
  background: #ffffff !important;
  border: 2px solid #078B95 !important;
  color: #078B95 !important;
}

/* Mobile: logo remains a major brand element, not a tiny icon. */
@media (max-width: 900px) {
  .site-header {
    min-height: 104px !important;
  }

  .site-header .brand-v227 {
    width: 78vw !important;
    max-width: 420px !important;
    margin-right: 14px !important;
  }

  .site-header .brand-v227 img {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}

@media (max-width: 600px) {
  .site-header {
    min-height: 94px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .site-header .brand-v227 {
    width: 82vw !important;
    max-width: 360px !important;
    margin-right: 0 !important;
  }

  .site-header .brand-v227 img {
    width: 100% !important;
  }
}


/* =========================================================
   V22.8 OKLAHOMA - full-width hero
   Remove the unused right-hand hero column and let the
   existing hero content use the full available width.
   ========================================================= */

.hero {
  min-height: auto !important;
  padding-top: clamp(70px, 8vw, 125px) !important;
  padding-bottom: clamp(70px, 8vw, 120px) !important;
}

/* Collapse the old two-column hero layout to one column. */
.hero .hero-inner,
.hero .hero-content,
.hero > .container,
.hero > .wrap {
  display: block !important;
  grid-template-columns: 1fr !important;
}

/* Let the text occupy the full hero instead of half the page. */
.hero .hero-copy,
.hero .hero-text,
.hero .hero-left {
  width: 100% !important;
  max-width: none !important;
  flex: 1 1 100% !important;
  grid-column: 1 / -1 !important;
}

/* Old right-side media/visual column is intentionally unused for now. */
.hero .hero-image,
.hero .hero-media,
.hero .hero-art,
.hero .hero-right,
.hero picture {
  display: none !important;
}

/* Give the headline room to breathe across desktop. */
.hero h1,
.hero-title {
  max-width: 1180px !important;
  width: 100% !important;
  font-size: clamp(64px, 7.2vw, 118px) !important;
  line-height: .98 !important;
}

/* Eyebrow can run naturally across one line. */
.hero .eyebrow,
.hero .kicker,
.hero .section-kicker {
  max-width: 1100px !important;
}

/* Supporting copy gets a wider but readable measure. */
.hero p,
.hero-copy p {
  max-width: 920px !important;
}

/* Keep CTAs together below the copy. */
.hero .hero-actions,
.hero .cta-row,
.hero .button-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  max-width: 920px !important;
}

/* No decorative pseudo-column remnants. */
.hero::before,
.hero::after {
  display: none !important;
}

@media (max-width: 800px) {
  .hero {
    padding-top: 54px !important;
    padding-bottom: 58px !important;
  }

  .hero h1,
  .hero-title {
    font-size: clamp(48px, 13vw, 72px) !important;
    max-width: 100% !important;
  }

  .hero p,
  .hero-copy p {
    max-width: 100% !important;
  }
}


/* =========================================================
   V22.9 OKLAHOMA - desktop hero balance
   Mobile V22.8 layout intentionally preserved.
   ========================================================= */

@media (min-width: 901px) {
  .hero {
    padding-top: 76px !important;
    padding-bottom: 82px !important;
  }

  .hero .hero-inner,
  .hero .hero-content,
  .hero > .container,
  .hero > .wrap {
    width: min(94vw, 1680px) !important;
    max-width: 1680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero .hero-copy,
  .hero .hero-text,
  .hero .hero-left {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Use the desktop canvas instead of leaving a visual half-page blank. */
  .hero h1,
  .hero-title {
    width: 100% !important;
    max-width: 1500px !important;
    font-size: clamp(72px, 6.7vw, 116px) !important;
    line-height: .96 !important;
    text-wrap: balance !important;
  }

  .hero p,
  .hero-copy p {
    max-width: 1080px !important;
    font-size: clamp(20px, 1.45vw, 25px) !important;
  }

  .hero .hero-benefits {
    width: 100% !important;
    max-width: 1180px !important;
    display: flex !important;
    justify-content: flex-start !important;
    gap: 22px 44px !important;
  }

  .hero .hero-actions,
  .hero .cta-row,
  .hero .button-row {
    width: 100% !important;
    max-width: 1180px !important;
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
  }

  /* Subtle horizontal visual anchor across the formerly empty area. */
  .hero .hero-copy::after,
  .hero .hero-text::after,
  .hero .hero-left::after {
    content: "";
    display: block;
    width: min(72vw, 1180px);
    height: 5px;
    margin-top: 34px;
    border-radius: 999px;
    background: linear-gradient(
      90deg,
      rgba(7,139,149,.85) 0 28%,
      rgba(101,157,61,.70) 28% 52%,
      rgba(91,145,201,.55) 52% 74%,
      rgba(118,83,151,.38) 74% 100%
    );
  }
}


/* =========================================================
   V22.10 OKLAHOMA - TRUE full-width hero
   This targets the actual production hero markup directly.
   ========================================================= */

.production-hero.hero-v2210 {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background:
    radial-gradient(circle at 84% 22%, rgba(101,157,61,.10), transparent 22rem),
    radial-gradient(circle at 62% 88%, rgba(7,139,149,.07), transparent 25rem),
    linear-gradient(105deg, #fffaf3 0%, #fffdf9 48%, #f4faf7 100%) !important;
  overflow: hidden !important;
}

.production-hero.hero-v2210 .hero-copy-column {
  width: min(94vw, 1700px) !important;
  max-width: 1700px !important;
  margin: 0 auto !important;
  padding: clamp(66px, 6.5vw, 108px) 0 clamp(62px, 6vw, 96px) !important;
  display: block !important;
  background: transparent !important;
}

/* Eyebrow uses the desktop width instead of the old half-column. */
.production-hero.hero-v2210 .eyebrow {
  margin: 0 0 28px !important;
  max-width: none !important;
  color: #355b70 !important;
  letter-spacing: .15em !important;
  font-size: clamp(18px, 1.35vw, 26px) !important;
}

/* No forced BRs on desktop. Two spans sit on one line where space permits. */
.production-hero.hero-v2210 .hero-title-v2210 {
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 500 !important;
  font-size: clamp(68px, 7vw, 124px) !important;
  line-height: .97 !important;
  letter-spacing: -.045em !important;
  color: #14345b !important;
  text-wrap: balance !important;
}

.production-hero.hero-v2210 .hero-title-v2210 span {
  display: inline !important;
}

.production-hero.hero-v2210 .hero-title-v2210 span + span {
  margin-left: .16em !important;
}

/* Supporting copy reaches further into the desktop canvas while staying readable. */
.production-hero.hero-v2210 .hero-copy {
  margin-top: 34px !important;
  max-width: 1050px !important;
  font-size: clamp(20px, 1.45vw, 26px) !important;
  line-height: 1.52 !important;
  color: #415e6d !important;
}

/* Benefits form a broad horizontal row, further using the available width. */
.production-hero.hero-v2210 .hero-benefits {
  margin: 30px 0 0 !important;
  width: min(100%, 1180px) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px 38px !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
}

.production-hero.hero-v2210 .benefit-people { color: #659d3d !important; }
.production-hero.hero-v2210 .benefit-stories { color: #dc695b !important; }
.production-hero.hero-v2210 .benefit-impact { color: #5b91c9 !important; }

/* CTAs remain left-aligned but no longer live inside a 48% column. */
.production-hero.hero-v2210 .hero-actions {
  margin-top: 30px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  width: auto !important;
  max-width: none !important;
}

.production-hero.hero-v2210 .quiet {
  margin-top: 18px !important;
  max-width: 1000px !important;
  color: #667b83 !important;
}

/* The obsolete hero-art column no longer exists in the markup. */

/* Mobile deliberately keeps the stacked feel that was already working well. */
@media (max-width: 800px) {
  .production-hero.hero-v2210 .hero-copy-column {
    width: 100% !important;
    padding: 48px 20px 36px !important;
  }

  .production-hero.hero-v2210 .eyebrow {
    margin-bottom: 22px !important;
    font-size: 15px !important;
  }

  .production-hero.hero-v2210 .hero-title-v2210 {
    font-size: clamp(50px, 15vw, 74px) !important;
    line-height: .94 !important;
  }

  .production-hero.hero-v2210 .hero-title-v2210 span {
    display: block !important;
  }

  .production-hero.hero-v2210 .hero-title-v2210 span + span {
    margin-left: 0 !important;
    margin-top: .08em !important;
  }

  .production-hero.hero-v2210 .hero-copy {
    max-width: 100% !important;
    font-size: 19px !important;
    line-height: 1.5 !important;
  }

  .production-hero.hero-v2210 .hero-benefits {
    gap: 10px 18px !important;
    font-size: .92rem !important;
  }

  .production-hero.hero-v2210 .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .production-hero.hero-v2210 .hero-actions .button {
    width: 100% !important;
  }
}


/* =========================================================
   V23.0 OKLAHOMA - one-at-a-time wisdom loop
   Quiet engagement mechanics, no progress goals or negative voting.
   ========================================================= */

.wisdom-stream-section {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(54px, 6vw, 88px) 24px clamp(64px, 7vw, 96px);
}

.wisdom-stream-heading {
  align-items: end;
  margin-bottom: 24px;
}

.daily-wisdom-count {
  color: #466473;
  font-weight: 800;
  font-size: 1.05rem;
  white-space: nowrap;
  letter-spacing: .01em;
}

.wisdom-stream-actions {
  display: flex;
  justify-content: center;
  margin: 26px 0 0;
}

.another-wisdom-button {
  width: min(100%, 560px);
  min-height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 30px;
  padding-right: 26px;
  font-size: 1.08rem;
}

.another-wisdom-button span:last-child {
  font-size: 1.55rem;
  line-height: 1;
  transition: transform .16s ease;
}

.another-wisdom-button:hover span:last-child,
.another-wisdom-button:focus-visible span:last-child {
  transform: translateX(4px);
}

.stream-submit-cta {
  margin: 34px auto 0;
  padding-top: 30px;
  border-top: 1px solid rgba(20,52,91,.12);
  text-align: center;
  max-width: 720px;
}

.stream-submit-cta p {
  margin: 0 0 12px;
  color: #546b78;
  font-weight: 700;
}

/* The homepage is deliberately one item at a time. Keep legacy discovery DOM
   available to the current JS while removing the multi-card feed from view. */
.feed-section.hidden,
.homepage-discovery-hidden {
  display: none !important;
}

.field-optional {
  color: #71818a;
  font-weight: 500;
}

.location-assist-row {
  display: flex;
  gap: 14px;
  align-items: baseline;
  flex-wrap: wrap;
  margin-top: -4px;
  margin-bottom: 16px;
}

.detect-location-button {
  color: #0b6f74;
  font-weight: 800;
}

.combined-consent {
  padding: 14px 16px;
  border-radius: 14px;
  background: #fffaf1;
  border: 1px solid rgba(194,137,39,.22);
}

.combined-consent a {
  color: inherit;
  text-decoration-color: rgba(194,137,39,.65);
  text-underline-offset: 2px;
}

@media (max-width: 800px) {
  .wisdom-stream-section {
    padding: 44px 16px 64px;
  }

  .wisdom-stream-heading {
    display: flex;
    gap: 18px;
    align-items: flex-end;
  }

  .wisdom-stream-heading h2 {
    font-size: clamp(30px, 9vw, 42px);
  }

  .daily-wisdom-count {
    font-size: .96rem;
    padding-bottom: 4px;
  }

  .another-wisdom-button {
    width: 100%;
  }

  .submission-location-row {
    grid-template-columns: 1fr !important;
  }

  .location-assist-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
}

.auth-provider-buttons { display:flex; gap:.65rem; flex-wrap:wrap; margin-top:.75rem; }


/* Oklahoma V23.3: swipe/keyboard wisdom navigation */
#wisdomOfDayCard { overflow: hidden; }
.daily-showcase-card {
  touch-action: pan-y;
  transition: transform 220ms ease, opacity 220ms ease;
}
.daily-showcase-card.wisdom-enter-next { transform: translateX(22px); opacity: .72; }
.daily-showcase-card.wisdom-enter-previous { transform: translateX(-22px); opacity: .72; }
.daily-showcase-card.wisdom-enter-active { transform: translateX(0); opacity: 1; }

/* =========================================================
   OKLAHOMA V23.5 - TRUE WISDOM-FIRST MOBILE APP SHELL
   Rebuilds the mobile experience to match the approved visual
   direction while leaving the desktop V23.3 experience intact.
   ========================================================= */

.mobile-app-header,
.mobile-bottom-nav,
.mobile-menu-panel,
.mobile-wisdom-prev { display: none; }

@media (max-width: 700px) {
  html { scroll-padding-bottom: 92px; }
  body {
    padding: 0 0 86px !important;
    background: #f7f7f2 !important;
  }

  /* Replace the desktop header with a compact app header. */
  .site-header.production-header { display: none !important; }
  .mobile-app-header {
    position: sticky;
    top: 0;
    z-index: 80;
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    align-items: center;
    min-height: 76px;
    padding: 8px 14px;
    background: rgba(255,255,252,.96);
    border-bottom: 1px solid rgba(20,52,91,.08);
    box-shadow: 0 6px 20px rgba(20,52,91,.06);
    backdrop-filter: blur(12px);
  }
  .mobile-app-brand {
    display: flex;
    justify-content: center;
    min-width: 0;
  }
  .mobile-app-brand img {
    display: block;
    width: min(220px, 58vw);
    height: auto;
  }
  .mobile-header-icon,
  .mobile-account-icon {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #176f5e;
  }
  .mobile-header-icon {
    display: grid;
    place-content: center;
    gap: 5px;
  }
  .mobile-header-icon span {
    width: 26px;
    height: 2px;
    border-radius: 99px;
    background: currentColor;
  }
  .mobile-account-icon {
    display: grid;
    place-items: center;
    border: 2px solid #176f5e;
    font-size: 34px;
    line-height: 1;
  }
  .mobile-menu-panel {
    position: absolute;
    top: 68px;
    left: 12px;
    right: 12px;
    display: grid;
    gap: 4px;
    padding: 10px;
    border: 1px solid rgba(20,52,91,.10);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 46px rgba(20,52,91,.18);
  }
  .mobile-menu-panel.hidden { display: none !important; }
  .mobile-menu-panel a,
  .mobile-menu-panel button {
    display: block;
    width: 100%;
    padding: 13px 14px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #14345b;
    text-align: left;
    text-decoration: none;
    font: inherit;
    font-weight: 750;
  }
  .mobile-menu-panel a:active,
  .mobile-menu-panel button:active { background: #f0f6f3; }

  /* The old marketing hero does not belong in the mobile app flow. */
  .production-hero.hero-v2210 { display: none !important; }

  /* Compress the four principles into one quiet, horizontally scrollable rail. */
  .principles {
    position: relative;
    z-index: 4;
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    gap: 0 !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    margin: 0 !important;
    padding: 10px 10px 11px !important;
    background: rgba(255,255,252,.98) !important;
    border: 0 !important;
    box-shadow: 0 8px 22px rgba(20,52,91,.05);
    scrollbar-width: none;
  }
  .principles::-webkit-scrollbar { display: none; }
  .principles article {
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 0 !important;
    max-width: 235px;
    display: grid !important;
    grid-template-columns: 32px auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 8px;
    row-gap: 1px;
    scroll-snap-align: start;
    padding: 6px 16px !important;
    border: 0 !important;
    border-right: 1px solid rgba(20,52,91,.10) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .principles article:last-child { border-right: 0 !important; }
  .principles .principle-icon {
    grid-row: 1 / 3;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    margin: 0 !important;
  }
  .principles strong {
    margin: 0 !important;
    color: #173640 !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    white-space: nowrap;
  }
  .principles article > span:last-child {
    display: block !important;
    color: #65747a !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
    max-width: 170px;
  }

  /* The wisdom section is now a full visual stage. */
  .wisdom-stream-section {
    position: relative !important;
    isolation: isolate;
    display: grid !important;
    place-items: center;
    min-height: calc(100svh - 170px) !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 42px 70px 72px !important;
    overflow: hidden !important;
    background:
      linear-gradient(180deg, rgba(255,249,239,.32), rgba(10,44,42,.22)),
      url('./hero-v18.jpg') 64% center / cover no-repeat !important;
  }
  .wisdom-stream-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(16,53,50,.02) 52%, rgba(16,53,50,.28) 100%);
    pointer-events: none;
  }
  .wisdom-stream-heading { display: none !important; }
  #wisdomOfDayCard {
    width: min(100%, 560px) !important;
    overflow: visible !important;
  }

  /* Transform the existing functional daily card into the centered quote card. */
  #wisdomOfDayCard .daily-showcase-card {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 560px !important;
    min-height: 410px !important;
    margin: 0 auto !important;
    padding: 72px 30px 34px !important;
    overflow: visible !important;
    border: 1px solid rgba(255,255,255,.70) !important;
    border-radius: 26px !important;
    background: rgba(255,253,248,.96) !important;
    box-shadow: 0 20px 48px rgba(12,38,37,.24) !important;
    backdrop-filter: blur(7px);
  }
  #wisdomOfDayCard .daily-showcase-card::before {
    content: "“";
    position: absolute;
    left: 28px;
    top: 30px;
    color: #d79a2e;
    font-family: Georgia, serif;
    font-size: 64px;
    font-weight: 700;
    line-height: .7;
  }
  #wisdomOfDayCard .daily-showcase-icon { display: none !important; }
  #wisdomOfDayCard .daily-showcase-main {
    display: flex !important;
    flex-direction: column !important;
    min-height: 300px !important;
    overflow: visible !important;
  }
  #wisdomOfDayCard .daily-showcase-topline {
    order: 3;
    display: block !important;
    margin: 24px 0 0 !important;
    padding-top: 20px;
    border-top: 1px solid rgba(20,52,91,.10);
    text-align: center;
  }
  #wisdomOfDayCard .daily-showcase-meta {
    display: block !important;
    text-align: center !important;
  }
  #wisdomOfDayCard .topic-pill,
  #wisdomOfDayCard .daily-showcase-id { display: none !important; }
  #wisdomOfDayCard .daily-showcase-contributor {
    display: block !important;
    margin: 0 !important;
    color: #69757a !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-align: center !important;
  }
  #wisdomOfDayCard .daily-showcase-contributor::before { content: "— "; }
  #wisdomOfDayCard .daily-showcase-quote {
    order: 1;
    width: 100% !important;
    max-width: none !important;
    margin: auto 0 !important;
    color: #14345b !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(28px, 8.4vw, 43px) !important;
    font-weight: 500 !important;
    line-height: 1.17 !important;
    letter-spacing: -.025em !important;
    text-align: center !important;
    overflow-wrap: break-word !important;
  }
  #wisdomOfDayCard .daily-showcase-video {
    order: 2;
    margin: 22px -8px 0 !important;
    border-radius: 18px !important;
  }
  #wisdomOfDayCard .daily-showcase-video video {
    max-height: 44svh !important;
    border-radius: 18px !important;
  }
  #wisdomOfDayCard .daily-showcase-actions {
    position: absolute !important;
    top: 24px !important;
    right: 24px !important;
    display: flex !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  #wisdomOfDayCard .daily-showcase-actions button {
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    overflow: hidden;
    color: #6f7d80 !important;
    font-size: 0 !important;
    line-height: 1 !important;
  }
  #wisdomOfDayCard .daily-helpful-button::before {
    content: "♡";
    font-size: 31px;
    font-weight: 400;
  }
  #wisdomOfDayCard .daily-helpful-button.voted::before { content: "♥"; color: #c95e69; }
  #wisdomOfDayCard .daily-share-button::before { content: none !important; }
  #wisdomOfDayCard .daily-report-button { display: none !important; }

  /* Side navigation uses the same working Next button plus a real Back button. */
  .wisdom-stream-actions {
    position: absolute !important;
    inset: 0 !important;
    z-index: 3;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none;
  }
  .mobile-wisdom-nav {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    width: 58px !important;
    min-width: 58px !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    pointer-events: auto !important;
  }
  .mobile-wisdom-prev { left: 7px !important; }
  .mobile-wisdom-next { right: 7px !important; }
  .mobile-wisdom-nav > span:first-child {
    display: grid !important;
    place-items: center !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.96) !important;
    color: #28454c !important;
    box-shadow: 0 7px 20px rgba(10,40,38,.25) !important;
    font-size: 38px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
  }
  .mobile-wisdom-next > span:first-child { font-size: 0 !important; }
  .mobile-wisdom-next > span:first-child::before { content: "›"; font-size: 38px; }
  .mobile-wisdom-nav small {
    display: block !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 4px rgba(0,0,0,.45);
  }
  .mobile-wisdom-next > span:last-child {
    display: block !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 4px rgba(0,0,0,.45);
  }
  .mobile-wisdom-next > span:last-child::before { content: "Next"; }
  .mobile-wisdom-next > span:last-child { font-size: 0 !important; }
  .mobile-wisdom-next > span:last-child::before { font-size: 12px !important; }

  .stream-submit-cta { display: none !important; }

  /* Keep the rest of the website available below the app-like opening stage. */
  .feed-section,
  .support-section,
  .about-section,
  .site-footer { position: relative; z-index: 2; }

  /* Fixed native-app style navigation. */
  .mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    min-height: 78px;
    padding: 7px 5px max(7px, env(safe-area-inset-bottom));
    background: rgba(255,255,252,.97);
    border-top: 1px solid rgba(20,52,91,.10);
    box-shadow: 0 -8px 24px rgba(20,52,91,.08);
    backdrop-filter: blur(14px);
  }
  .mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    padding: 0 2px;
    border: 0;
    background: transparent;
    color: #747d7d;
    text-decoration: none;
    font: inherit;
  }
  .mobile-nav-item > span {
    font-size: 24px;
    line-height: 1;
  }
  .mobile-nav-item small {
    font-size: 9.5px;
    font-weight: 750;
    line-height: 1.1;
    white-space: nowrap;
  }
  .mobile-nav-item.active { color: #176f5e; }
  .mobile-nav-share { transform: translateY(-14px); }
  .mobile-nav-share > span {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-bottom: 1px;
    border-radius: 50%;
    background: #24785f;
    color: #fff;
    box-shadow: 0 8px 20px rgba(36,120,95,.30);
    font-size: 38px;
    font-weight: 300;
  }
  .mobile-nav-share small { color: #4f5b5d; }

  @media (max-width: 420px) {
    .wisdom-stream-section { padding-left: 62px !important; padding-right: 62px !important; }
    #wisdomOfDayCard .daily-showcase-card { padding-left: 22px !important; padding-right: 22px !important; }
    #wisdomOfDayCard .daily-showcase-quote { font-size: clamp(26px, 8.1vw, 37px) !important; }
    .mobile-wisdom-nav { width: 50px !important; min-width: 50px !important; }
    .mobile-wisdom-nav > span:first-child { width: 48px !important; height: 48px !important; }
  }
}

/* =========================================================
   OKLAHOMA V23.6 - ONE PRODUCT, EVERY SCREEN
   Extends the V23.5 app-shell visual language to desktop and
   fixes account/share semantics without changing the backend.
   ========================================================= */

/* Authentication state must win over any component display rule. */
#signInButton.hidden,
#facebookSignInButton.hidden,
#accountMenu.hidden,
#mobileMenuSignOut.hidden { display: none !important; }

@media (min-width: 701px) {
  body { background: #f6f6f0; }

  .site-header.production-header {
    position: sticky;
    top: 0;
    z-index: 70;
    min-height: 76px;
    padding: 8px clamp(22px, 4vw, 72px);
    background: rgba(255,255,252,.96);
    border-bottom: 1px solid rgba(20,52,91,.08);
    box-shadow: 0 6px 22px rgba(20,52,91,.06);
    backdrop-filter: blur(14px);
  }
  .brand-v227 img { width: min(255px, 28vw); height: auto; }
  .header-actions { gap: 12px; }
  .header-actions .button,
  .header-actions .text-button { white-space: nowrap; }
  #accountMenu { align-items: center; gap: 13px; }

  /* The old marketing hero no longer competes with the actual product. */
  .production-hero { display: none !important; }

  .principles {
    position: relative;
    z-index: 4;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px !important;
    width: min(1120px, calc(100% - 48px));
    margin: 16px auto 12px !important;
    padding: 0 !important;
    background: transparent !important;
  }
  .principles article {
    min-height: 0 !important;
    padding: 10px 13px !important;
    border: 1px solid rgba(36,120,95,.13) !important;
    border-radius: 999px !important;
    background: rgba(255,255,252,.92) !important;
    box-shadow: none !important;
    text-align: center;
  }
  .principles article .principle-icon { display: none !important; }
  .principles article strong {
    display: inline !important;
    margin-right: 4px;
    color: #176f5e !important;
    font-size: 13px !important;
  }
  .principles article > span:last-child {
    display: inline !important;
    color: #687474 !important;
    font-size: 12px !important;
  }

  .wisdom-stream-section {
    position: relative;
    isolation: isolate;
    width: min(1440px, calc(100% - 48px)) !important;
    min-height: min(720px, calc(100vh - 125px));
    margin: 0 auto 28px !important;
    padding: clamp(48px, 6vw, 90px) clamp(95px, 10vw, 170px) !important;
    overflow: hidden;
    border-radius: 34px;
    background:
      linear-gradient(90deg, rgba(18,55,50,.38), rgba(18,55,50,.08) 42%, rgba(18,55,50,.30)),
      linear-gradient(0deg, rgba(12,45,40,.20), rgba(255,255,255,.02)),
      url('./hero-tree-clean.jpg') center 48% / cover no-repeat;
    box-shadow: 0 22px 55px rgba(20,52,60,.16);
  }
  .wisdom-stream-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(circle at center, rgba(255,255,255,.08), transparent 60%);
    pointer-events: none;
  }
  .wisdom-stream-heading { display: none !important; }
  #wisdomOfDayCard {
    display: grid;
    place-items: center;
    min-height: 500px;
    overflow: visible;
  }
  #wisdomOfDayCard .daily-showcase-card {
    position: relative;
    display: flex !important;
    width: min(760px, 72vw) !important;
    min-height: 430px !important;
    margin: 0 auto !important;
    padding: clamp(46px, 5vw, 72px) clamp(48px, 6vw, 86px) !important;
    border: 1px solid rgba(255,255,255,.70) !important;
    border-radius: 30px !important;
    background: rgba(255,253,245,.95) !important;
    box-shadow: 0 28px 65px rgba(8,38,36,.27) !important;
    backdrop-filter: blur(7px);
  }
  #wisdomOfDayCard .daily-showcase-icon { display: none !important; }
  #wisdomOfDayCard .daily-showcase-main {
    display: flex !important;
    flex: 1;
    flex-direction: column !important;
    justify-content: center;
    min-width: 0;
  }
  #wisdomOfDayCard .daily-showcase-topline {
    order: 3;
    display: block !important;
    margin: 32px 0 0 !important;
    padding-top: 22px;
    border-top: 1px solid rgba(20,52,91,.10);
    text-align: center;
  }
  #wisdomOfDayCard .daily-showcase-meta { display: block !important; text-align: center !important; }
  #wisdomOfDayCard .topic-pill,
  #wisdomOfDayCard .daily-showcase-id { display: none !important; }
  #wisdomOfDayCard .daily-showcase-contributor {
    display: block !important;
    margin: 0 !important;
    color: #687474 !important;
    font-size: 16px !important;
    font-weight: 650 !important;
    text-align: center !important;
  }
  #wisdomOfDayCard .daily-showcase-contributor::before { content: "— "; }
  #wisdomOfDayCard .daily-showcase-quote {
    order: 1;
    width: 100% !important;
    margin: auto 0 !important;
    color: #14345b !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(34px, 3.2vw, 55px) !important;
    font-weight: 500 !important;
    line-height: 1.16 !important;
    letter-spacing: -.025em !important;
    text-align: center !important;
  }
  #wisdomOfDayCard .daily-showcase-video { order: 2; margin: 26px 0 0 !important; }
  #wisdomOfDayCard .daily-showcase-video video { max-height: 410px !important; border-radius: 18px !important; }
  #wisdomOfDayCard .daily-showcase-actions {
    position: absolute !important;
    top: 22px !important;
    right: 26px !important;
    display: flex !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  #wisdomOfDayCard .daily-showcase-actions button { border-radius: 999px; }

  .wisdom-stream-actions {
    position: absolute !important;
    inset: 0 !important;
    z-index: 5;
    display: block !important;
    margin: 0 !important;
    pointer-events: none;
  }
  .mobile-wisdom-nav {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 80px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: white !important;
    pointer-events: auto !important;
  }
  .mobile-wisdom-prev { left: 24px !important; }
  .mobile-wisdom-next { right: 24px !important; }
  .mobile-wisdom-nav > span:first-child {
    display: grid !important;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: rgba(255,255,255,.96);
    color: #28454c;
    box-shadow: 0 9px 24px rgba(10,40,38,.25);
    font-size: 40px;
  }
  .mobile-wisdom-nav small,
  .mobile-wisdom-next > span:last-child {
    color: white !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
  }
  .mobile-wisdom-next > span:first-child { font-size: 0 !important; }
  .mobile-wisdom-next > span:first-child::before { content: "›"; font-size: 40px; }
  .mobile-wisdom-next > span:last-child { font-size: 0 !important; }
  .mobile-wisdom-next > span:last-child::before { content: "Next"; font-size: 12px; }
  .stream-submit-cta { display: none !important; }

  /* Supporting content remains below the stage, quieter than the product. */
  .support-section,
  .about-section { width: min(1120px, calc(100% - 48px)); margin-left: auto !important; margin-right: auto !important; }
}

@media (max-width: 700px) {
  /* V23.6 terminology and account/share fixes. */
  .mobile-nav-share > span { font-size: 28px !important; font-weight: 500 !important; }
  .mobile-menu-panel button.hidden { display: none !important; }
}


/* =========================================================
   V23.7 Oklahoma cleanup
   ========================================================= */
/* Remove decorative opening quote from the advice panel. */
#wisdomOfDayCard .daily-showcase-card::before { content: none !important; display: none !important; }

@media (max-width: 700px) {
  /* The heart is useful only when its social proof is visible too. */
  #wisdomOfDayCard .daily-showcase-actions {
    align-items: center !important;
    gap: 10px !important;
  }
  #wisdomOfDayCard .daily-helpful-button {
    display: inline-flex !important;
    width: auto !important;
    min-width: 58px !important;
    height: 36px !important;
    padding: 0 8px !important;
    gap: 5px !important;
    overflow: visible !important;
    font-size: 0 !important;
  }
  #wisdomOfDayCard .daily-helpful-button::before {
    content: "♡" !important;
    font-size: 29px !important;
    line-height: 1 !important;
  }
  #wisdomOfDayCard .daily-helpful-button.voted::before {
    content: "♥" !important;
    color: #c95e69 !important;
  }
  #wisdomOfDayCard .daily-helpful-button .helpful-count {
    display: inline !important;
    color: #687474 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }
  #wisdomOfDayCard .daily-share-button {
    width: 36px !important;
    min-width: 36px !important;
  }
}

/* =========================================================
   V23.8 Oklahoma icon/alignment polish
   ========================================================= */
@media (min-width: 701px) {
  /* Restore the visual cues and use the same compact alignment as mobile. */
  .principles article {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 1px !important;
    text-align: left !important;
    border-radius: 18px !important;
    padding: 8px 13px !important;
  }
  .principles article .principle-icon {
    display: block !important;
    grid-row: 1 / 3 !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    margin: 0 !important;
  }
  .principles article strong {
    display: block !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    white-space: nowrap;
  }
  .principles article > span:last-child {
    display: block !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }
}

.share-icon { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
.daily-share-button { display: inline-flex !important; align-items: center !important; gap: 7px !important; }
.daily-share-button .share-icon { margin: 0 !important; }

@media (max-width: 700px) {
  /* Put social proof together on the left, with Share on the right. */
  #wisdomOfDayCard .daily-showcase-actions {
    top: 18px !important;
    right: 18px !important;
    left: 18px !important;
    width: auto !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  #wisdomOfDayCard .daily-helpful-button {
    order: 1 !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
  }
  #wisdomOfDayCard .daily-helpful-button .helpful-count {
    display: inline-block !important;
    margin: 0 !important;
    transform: none !important;
  }
  #wisdomOfDayCard .daily-share-button {
    order: 2 !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    justify-content: center !important;
    font-size: 0 !important;
  }
  #wisdomOfDayCard .daily-share-button .share-icon { width: 22px; height: 22px; }
  #wisdomOfDayCard .daily-report-button { order: 3 !important; }
  .mobile-nav-share > .share-icon { width: 28px !important; height: 28px !important; }
}

/* V23.9: one mobile share control, using the familiar three-node icon on the advice card. */
@media (max-width: 700px) {
  #wisdomOfDayCard .daily-share-button .share-icon {
    display: block !important;
    width: 23px !important;
    height: 23px !important;
  }
}

/* Oklahoma V23.24: preserve and display the question that inspired a submission. */
.daily-showcase-prompt {
  max-width: 860px;
  margin: 0 0 18px;
  padding: 13px 16px;
  border-radius: 14px;
  background: #F2F6F3;
  color: #294A48;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
}
.daily-showcase-prompt span,
.wisdom-card-prompt span {
  display: block;
  margin-bottom: 3px;
  color: #6A7B78;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.wisdom-card-prompt {
  margin: 0 0 14px;
  padding: 11px 13px;
  border-radius: 12px;
  background: #F2F6F3;
  color: #294A48;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.wisdom-prompt-inline {
  display: block;
  margin-bottom: 5px;
  color: #5C716E;
  font-size: 12px;
  line-height: 1.35;
}
@media (max-width: 640px) {
  .daily-showcase-prompt {
    margin-bottom: 14px;
    padding: 11px 13px;
    font-size: 15px;
  }
}


/* =========================================================
   v23.27 Featured question acquisition card
   ========================================================= */
.featured-question-card {
  width: min(900px, 100%);
  margin: 22px auto 0;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border: 1px solid rgba(45,123,120,.22);
  border-radius: 20px;
  background: #f2f8f5;
}
.featured-question-copy { min-width: 0; }
.featured-question-label {
  margin: 0 0 5px;
  color: #2d7b78;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.featured-question-card h3 {
  margin: 0;
  color: #203642;
  font: 700 clamp(1.05rem, 2vw, 1.3rem)/1.35 Georgia, serif;
}
.featured-question-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}
.featured-question-share { white-space: nowrap; }
.prompt-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.prompt-box.prompt-selected { border-color: rgba(45,123,120,.55); box-shadow: 0 0 0 2px rgba(45,123,120,.08); }
.prompt-box.prompt-selected .prompt-label::after { content: " · Selected"; }
@media(max-width:700px) {
  .featured-question-card { align-items:flex-start; flex-direction:column; gap:16px; padding:18px; }
  .featured-question-actions { width:100%; justify-content:space-between; }
  .featured-question-actions .button { flex:1; }
}

/* V23.33 simplified contribution form */
.submission-advice-first textarea { min-height: 150px; font-size: 1.08rem; line-height: 1.45; }
.submission-format-choice { margin-top: 0.85rem; }
.submission-person-row { margin-top: 1rem; }
.simplified-consent { margin-top: 1rem; }
.simplified-moderation { opacity: 0.8; }
@media (max-width: 680px) {
  #submissionDialog { width: min(96vw, 720px); }
  #submissionDialog .dialog-header { margin-bottom: 0.6rem; }
  #submissionDialog .field-row { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  #submissionDialog .submission-location-row { grid-template-columns: 1fr; }
  #submissionDialog .choice-group.compact { gap: 0.55rem; }
  #submissionDialog .choice-card { padding: 0.7rem 0.8rem; }
  .submission-advice-first textarea { min-height: 135px; }
}