:root {
  --ink: #18332c;
  --muted: #66746f;
  --forest: #183f35;
  --forest-2: #285f50;
  --cream: #f6f2e9;
  --paper: #fffdf8;
  --gold: #d6a05d;
  --gold-soft: #f5e7ce;
  --coral: #c96652;
  --coral-soft: #f8e4de;
  --sage: #dfe9df;
  --blue: #4a7182;
  --line: #dfe3dc;
  --shadow: 0 18px 50px rgba(28, 54, 46, .10);
  --radius: 22px;
}
* { box-sizing: border-box; }
html { background: var(--cream); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(circle at 90% -10%, #f0dcc2 0, transparent 32rem), var(--cream); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid #8bbcb0; outline-offset: 2px; }
.skip-link { position: fixed; top: -60px; left: 16px; z-index: 99; padding: 10px 14px; color: white; background: var(--forest); border-radius: 10px; }
.skip-link:focus { top: 12px; }
.shell { min-height: 100vh; padding-bottom: 88px; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: rgba(246,242,233,.92); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(24,63,53,.08); }
.brand { display: flex; align-items: center; gap: 10px; font-family: Georgia, serif; font-weight: 800; letter-spacing: -.03em; font-size: 24px; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--gold-soft); background: var(--forest); font-family: Georgia, serif; font-size: 23px; }
.version-chip { padding: 3px 6px; border-radius: 999px; color: #7a5521; background: var(--gold-soft); font-family: Inter,ui-sans-serif,system-ui,sans-serif; font-size: 8px; font-weight: 850; letter-spacing: .08em; }
.role-button { max-width: 53vw; border: 1px solid #d9ddd6; background: var(--paper); color: var(--ink); padding: 8px 11px; border-radius: 13px; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 14px rgba(28,54,46,.05); }
.role-button small { display: block; color: var(--muted); font-size: 10px; text-align: left; }
.role-button strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.avatar { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--coral); font-weight: 800; font-size: 12px; }
.content { width: min(1180px, 100%); margin: 0 auto; padding: 22px 16px 36px; }
.eyebrow { margin: 0 0 6px; color: var(--coral); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; line-height: 1.08; margin-top: 0; }
h1 { margin-bottom: 10px; font-size: clamp(31px, 7vw, 52px); letter-spacing: -.04em; }
h2 { margin-bottom: 14px; font-size: clamp(24px, 5vw, 34px); letter-spacing: -.03em; }
h3 { margin-bottom: 8px; font-size: 19px; }
p { line-height: 1.55; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.hero { overflow: hidden; position: relative; padding: 26px 22px; color: white; border-radius: 28px; background: linear-gradient(135deg, #173d34, #285e50); box-shadow: var(--shadow); }
.hero::after { content: ""; position: absolute; right: -80px; top: -120px; width: 270px; height: 270px; border: 26px dotted rgba(214,160,93,.35); border-radius: 50%; transform: rotate(12deg); }
.hero > * { position: relative; z-index: 1; }
.hero .eyebrow { color: #f4cf99; }
.hero p { max-width: 660px; margin-bottom: 18px; color: #e6eee9; }
.hero-actions, .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.update-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 14px 0 0; padding: 15px 17px; border: 1px solid #d9c69f; border-radius: 18px; background: linear-gradient(110deg,#fffaf0,#eef3ec); box-shadow: 0 7px 22px rgba(28,54,46,.05); }
.update-card h3 { margin: 7px 0 2px; }
.update-card p { margin: 0; color: var(--muted); font-size: 11px; }
.button { border: 0; border-radius: 14px; padding: 11px 15px; font-weight: 750; color: white; background: var(--forest); transition: transform .15s ease, opacity .15s ease; }
.button:hover { transform: translateY(-1px); }
.button.secondary { color: var(--ink); background: var(--gold-soft); }
.button.ghost { color: var(--forest); background: transparent; border: 1px solid #c8d1ca; }
.button.danger { background: var(--coral); }
.button.light { color: var(--forest); background: white; }
.button.gold { color: #402a0e; background: #f2c988; }
.button.sm { padding: 8px 11px; border-radius: 11px; font-size: 12px; }
.grid { display: grid; gap: 14px; }
.stats { grid-template-columns: repeat(2, minmax(0,1fr)); margin: 16px 0 26px; }
.stat, .card { background: rgba(255,253,248,.92); border: 1px solid rgba(24,63,53,.09); border-radius: var(--radius); box-shadow: 0 8px 28px rgba(28,54,46,.06); }
.stat { padding: 17px; }
.stat strong { display: block; font-family: Georgia, serif; font-size: 29px; }
.stat span { color: var(--muted); font-size: 12px; }
.card { padding: 18px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin: 28px 0 12px; }
.section-head h2 { margin: 0; }
.section-head p { margin: 4px 0 0; }
.opportunity-grid { display: grid; gap: 14px; }
.opportunity { display: grid; gap: 14px; padding: 18px; }
.opportunity-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.icon-tile { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--sage); font-size: 20px; }
.opportunity h3 { margin: 2px 0 6px; }
.meta { display: flex; flex-wrap: wrap; gap: 7px 12px; color: var(--muted); font-size: 12px; }
.badge { display: inline-flex; align-items: center; gap: 5px; width: fit-content; padding: 5px 9px; border-radius: 999px; color: var(--forest); background: var(--sage); font-size: 10px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.badge.matching { color: #315361; background: #dcecf1; }
.badge.attention { color: #783628; background: var(--coral-soft); }
.badge.provided { color: #39502c; background: #e4edd7; }
.badge.private { color: #5e4471; background: #eee3f4; }
.progress { height: 7px; overflow: hidden; background: #e8ebe6; border-radius: 999px; }
.progress > span { display: block; height: 100%; border-radius: inherit; background: var(--gold); }
.stamp { display: inline-flex; align-items: center; gap: 10px; width: fit-content; padding: 9px 12px; border: 1px solid #d9bd8e; border-radius: 14px; color: #674b21; background: linear-gradient(135deg,#fffaf0,#f5e7ce); font-size: 12px; transform: rotate(-.5deg); box-shadow: inset 0 0 0 3px rgba(255,255,255,.55); }
.stamp.collective { color: var(--forest); border-color: #bfcfc4; background: linear-gradient(135deg,#f7fbf7,#dfe9df); }
.stamp strong, .stamp small { display: block; }
.stamp small { margin-top: 2px; opacity: .72; font-size: 9px; }
.provision-symbol { width: 35px; height: 35px; object-fit: contain; flex: 0 0 auto; }
.provision-symbol.mini { width: 31px; height: 31px; padding: 4px; border-radius: 50%; background: rgba(255,255,255,.68); box-shadow: 0 3px 10px rgba(25,71,59,.12); }
.quote { margin: 24px 0 0; padding: 18px; border-left: 3px solid var(--gold); background: rgba(255,255,255,.45); color: #43544e; font-family: Georgia, serif; font-size: 17px; font-style: italic; }
.bottom-nav { position: fixed; z-index: 25; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); padding: 7px max(8px, env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); background: rgba(255,253,248,.96); border-top: 1px solid #dfe3dc; backdrop-filter: blur(18px); }
.nav-item { display: grid; justify-items: center; gap: 2px; border: 0; padding: 5px 2px; color: #77827e; background: transparent; font-size: 9px; font-weight: 750; }
.nav-item .nav-icon { font-size: 18px; filter: grayscale(1); }
.nav-item.active { color: var(--forest); }
.nav-item.active .nav-icon { filter: none; }
.tabs, .segmented { display: flex; gap: 6px; padding: 4px; overflow-x: auto; background: #e9ece5; border-radius: 14px; }
.tabs button, .segmented button { flex: 1 0 auto; border: 0; padding: 8px 12px; border-radius: 10px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 750; }
.tabs button.active, .segmented button.active { color: var(--forest); background: white; box-shadow: 0 3px 12px rgba(28,54,46,.08); }
.filters { display: flex; gap: 7px; overflow-x: auto; padding: 2px 0 10px; }
.filter { flex: 0 0 auto; border: 1px solid #d7ddd7; border-radius: 999px; padding: 7px 11px; color: var(--muted); background: rgba(255,255,255,.55); font-size: 11px; }
.filter.active { color: white; background: var(--forest); border-color: var(--forest); }
.form-grid { display: grid; gap: 13px; }
.field { display: grid; gap: 6px; }
.field label, .field-label { font-size: 12px; font-weight: 750; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid #cfd7d1; border-radius: 13px; padding: 11px 12px; color: var(--ink); background: white; }
.field textarea { min-height: 94px; resize: vertical; }
.hint { margin: 0; color: var(--muted); font-size: 11px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid #eceeea; }
.toggle-row:last-child { border-bottom: 0; }
.toggle { width: 43px; height: 25px; padding: 3px; border: 0; border-radius: 999px; background: #bbc3be; transition: .2s; }
.toggle::after { content: ""; display: block; width: 19px; height: 19px; border-radius: 50%; background: white; box-shadow: 0 2px 5px rgba(0,0,0,.18); transition: .2s; }
.toggle.on { background: var(--forest-2); }
.toggle.on::after { transform: translateX(18px); }
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0; }
.calendar-title { font-family: Georgia, serif; font-size: 19px; font-weight: 800; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 4px; }
.weekday { padding: 5px 1px; color: var(--muted); text-align: center; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.day { min-height: 67px; border: 1px solid #e1e5df; border-radius: 10px; padding: 5px; background: rgba(255,255,255,.55); }
.day.outside { opacity: .35; }
.day.today { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.day-num { display: block; margin-bottom: 5px; color: var(--muted); font-size: 10px; }
.event-dot { display: flex; align-items: center; gap: 3px; width: 100%; overflow: hidden; margin: 3px 0; border: 0; border-radius: 6px; padding: 4px; text-align: left; color: var(--forest); background: #dce9df; font-size: 8px; font-weight: 700; }
.event-dot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-dot.attention { color: #7b392c; background: var(--coral-soft); }
.event-dot.provided { color: #294233; background: linear-gradient(90deg,#f4e6c8,#e3eddf); box-shadow: inset 3px 0 0 var(--gold); }
.event-dot .calendar-mark { width: 16px; height: 16px; }
.day.provision-day { border-color: #d9c08f; background: radial-gradient(circle at 90% 12%,rgba(214,160,93,.18),transparent 40%),#fffdf8; }
.day.attention-day { box-shadow: inset 0 -3px 0 rgba(201,102,82,.55); }
.timeline { display: grid; gap: 10px; }
.timeline-item { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: start; }
.timeline-time { padding-top: 11px; color: var(--muted); text-align: right; font-size: 11px; }
.timeline-card { position: relative; overflow: hidden; width: 100%; }
.timeline-card.provision-event { border-color: #d8c18f; background: linear-gradient(120deg,#fffdf8,#f4ead6); }
.timeline-mark { position: absolute; right: 13px; top: 11px; width: 44px; height: 44px; opacity: .9; }
.provided-note { display: block; margin-top: 10px; color: #765729; font-size: 10px; font-weight: 750; }
.provision-summary { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr auto; gap: 16px; overflow: hidden; margin: 12px 0 18px; padding: 22px; color: white; border-radius: 24px; background: linear-gradient(135deg,#153d33 0%,#245b4c 64%,#8a7045 145%); box-shadow: 0 16px 40px rgba(24,63,53,.16); }
.provision-summary::before { content: ""; position: absolute; z-index: -1; right: -45px; top: -75px; width: 230px; height: 230px; border: 19px dotted rgba(240,204,148,.20); border-radius: 50%; }
.provision-story .eyebrow { color: #f2cc91; }
.provision-story h2 { max-width: 560px; margin-bottom: 8px; font-size: clamp(22px,4vw,34px); }
.provision-story > p:not(.eyebrow) { max-width: 590px; margin: 0; color: #dde9e4; font-size: 12px; }
.provision-marks { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 35px; margin-top: 14px; }
.provision-summary .provision-symbol.mini { background: rgba(255,255,255,.88); }
.provision-ring { align-self: center; display: grid; place-items: center; width: 100px; height: 100px; border-radius: 50%; background: conic-gradient(#f0c77f 0 var(--provision),rgba(255,255,255,.14) var(--provision) 360deg); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.provision-ring::before { content: ""; grid-area: 1/1; width: 75px; height: 75px; border-radius: 50%; background: #1e4d41; }
.provision-ring div { z-index: 1; grid-area: 1/1; text-align: center; }
.provision-ring strong, .provision-ring span { display: block; }
.provision-ring strong { font-family: Georgia,serif; font-size: 25px; }
.provision-ring span { color: #dbe8e3; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.provision-counts { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.15); }
.provision-count { padding: 9px 10px; border-radius: 12px; background: rgba(255,255,255,.08); }
.provision-count strong, .provision-count span { display: block; }
.provision-count strong { font-family: Georgia,serif; font-size: 20px; }
.provision-count span { color: #dce7e3; font-size: 9px; }
.provision-count.fulfilled { box-shadow: inset 3px 0 0 #f0c77f; }
.provision-count.progressing { box-shadow: inset 3px 0 0 #86b8b1; }
.provision-count.outstanding { box-shadow: inset 3px 0 0 #d78372; }
.benefit { position: relative; overflow: hidden; }
.benefit::after { content: ""; position: absolute; right: -35px; bottom: -35px; width: 110px; height: 110px; border: 14px dotted rgba(214,160,93,.25); border-radius: 50%; }
.benefit-offer { margin: 9px 0; color: var(--forest); font-family: Georgia, serif; font-size: 25px; font-weight: 800; }
.qr { display: grid; grid-template-columns: repeat(7, 1fr); width: 140px; padding: 9px; gap: 2px; border: 1px solid #d8ddd7; border-radius: 10px; background: white; }
.qr i { aspect-ratio: 1; background: var(--ink); }
.qr i.light { background: transparent; }
.phone { width: min(340px, 100%); margin: 0 auto; border: 9px solid #222b28; border-radius: 34px; overflow: hidden; background: #eef1ec; box-shadow: var(--shadow); }
.phone-top { padding: 9px; text-align: center; color: #e5ebe7; background: #222b28; font-size: 10px; }
.conversation { min-height: 390px; padding: 16px 12px; background: linear-gradient(#e9eee9, #f8f5ef); }
.bubble { max-width: 84%; margin: 7px 0; padding: 10px 12px; border-radius: 16px 16px 16px 4px; background: white; box-shadow: 0 2px 8px rgba(0,0,0,.05); font-size: 12px; line-height: 1.45; }
.bubble.out { margin-left: auto; border-radius: 16px 16px 4px 16px; color: white; background: var(--forest-2); }
.sms-actions { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-top: 9px; }
.sms-actions button { border: 1px solid #ccd5cf; border-radius: 9px; padding: 7px 3px; color: var(--forest); background: white; font-size: 9px; font-weight: 800; }
.notice { padding: 12px 14px; border: 1px solid #edd7b5; border-radius: 14px; color: #694d24; background: #fff5e3; font-size: 12px; line-height: 1.5; }
.notice.safe { border-color: #cfe0d1; color: #36513e; background: #edf6ed; }
.role-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.role-option { border: 1px solid #d8ddd7; border-radius: 15px; padding: 12px; text-align: left; color: var(--ink); background: white; }
.role-option.active { color: white; background: var(--forest); border-color: var(--forest); }
.role-option span { display: block; font-size: 18px; }
.role-option strong { display: block; margin: 4px 0 2px; font-size: 12px; }
.role-option small { display: block; color: inherit; opacity: .72; font-size: 9px; }
.drawer-overlay, .modal-overlay { position: fixed; inset: 0; z-index: 50; display: grid; align-items: end; background: rgba(14,34,28,.44); backdrop-filter: blur(3px); }
.drawer, .modal { max-height: 88vh; overflow-y: auto; padding: 20px; border-radius: 26px 26px 0 0; background: var(--paper); box-shadow: 0 -20px 70px rgba(0,0,0,.2); }
.drawer { width: min(560px, 100%); margin: 0 auto; }
.modal { width: min(680px, 100%); margin: auto auto 0; }
.modal-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.close { width: 36px; height: 36px; border: 0; border-radius: 50%; color: var(--ink); background: #ecefe9; font-size: 19px; }
.detail-list { display: grid; gap: 11px; margin: 18px 0; }
.detail-row { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; }
.detail-row strong { display: block; font-size: 12px; }
.detail-row span { color: var(--muted); font-size: 12px; }
.stepper { display: grid; gap: 0; margin: 15px 0; }
.step { position: relative; display: grid; grid-template-columns: 25px 1fr; gap: 10px; min-height: 50px; }
.step:not(:last-child)::after { content: ""; position: absolute; left: 11px; top: 22px; bottom: 0; width: 2px; background: #d7ddd7; }
.step-mark { position: relative; z-index: 1; width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; color: white; background: #bdc6c0; font-size: 10px; }
.step.done .step-mark, .step.current .step-mark { background: var(--forest-2); }
.step.current .step-mark { box-shadow: 0 0 0 5px #dce9df; }
.step b { display: block; margin-top: 2px; font-size: 11px; }
.step small { color: var(--muted); }
.table { width: 100%; border-collapse: collapse; font-size: 11px; }
.table th, .table td { padding: 10px 7px; border-bottom: 1px solid #e4e7e2; text-align: left; vertical-align: top; }
.table th { color: var(--muted); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.empty { padding: 30px 20px; text-align: center; color: var(--muted); }
.empty span { display: block; margin-bottom: 8px; font-size: 30px; }
.brand-study { margin-top: 34px; }
.brand-options { display: grid; gap: 12px; }
.brand-option { display: grid; grid-template-columns: 92px 1fr; gap: 15px; align-items: center; min-height: 130px; padding: 16px; border: 1px solid rgba(24,63,53,.1); border-radius: 20px; background: rgba(255,253,248,.9); box-shadow: 0 8px 25px rgba(28,54,46,.05); }
.brand-option.current { background: linear-gradient(135deg,#eef3ec,#fffdf8); }
.brand-option > img { width: 88px; height: 75px; object-fit: contain; }
.brand-study-mark { width: 72px; height: 72px; display: grid; place-items: center; margin: auto; border-radius: 50%; color: var(--gold-soft); background: var(--forest); font-family: Georgia,serif; font-size: 46px; }
.brand-option h3 { margin: 8px 0 3px; }
.brand-option p { margin: 0; color: var(--muted); font-size: 11px; }
.stewardship-study { display: grid; gap: 18px; margin-top: 12px; padding: 20px; border: 1px solid #d8e0da; border-radius: 22px; background: linear-gradient(135deg,#fffdf8,#eaf0e8); }
.stewardship-examples { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.stewardship-examples > div { min-width: 0; padding: 10px 7px; text-align: center; border-radius: 14px; background: white; }
.stewardship-examples strong, .stewardship-examples small { display: block; }
.stewardship-examples strong { margin-top: 5px; font-size: 10px; }
.stewardship-examples small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.stewardship-sheep { display: flex; align-items: end; justify-content: center; min-height: 34px; }
.stewardship-sheep img { width: 25px; height: 25px; object-fit: contain; margin-left: -7px; }
.stewardship-sheep img:first-child { margin-left: 0; }
.toast-region { position: fixed; z-index: 100; left: 50%; bottom: 88px; width: min(420px, calc(100% - 30px)); transform: translateX(-50%); }
.toast { margin-top: 8px; padding: 12px 14px; border-radius: 13px; color: white; background: #263c35; box-shadow: var(--shadow); font-size: 12px; animation: toast-in .2s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@media (min-width: 720px) {
  .shell { padding: 0 0 40px 216px; }
  .topbar { padding: 16px 28px; }
  .content { padding: 30px 28px; }
  .bottom-nav { top: 0; right: auto; width: 216px; height: 100vh; grid-template-columns: 1fr; grid-auto-rows: min-content; align-content: center; gap: 5px; padding: 24px 14px; border-top: 0; border-right: 1px solid #dfe3dc; }
  .nav-item { grid-template-columns: 28px 1fr; justify-items: start; align-items: center; padding: 11px 14px; border-radius: 13px; font-size: 12px; text-align: left; }
  .nav-item.active { background: #e5ece4; }
  .stats { grid-template-columns: repeat(4,1fr); }
  .opportunity-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .two-col { grid-template-columns: minmax(0,1.4fr) minmax(280px,.8fr); align-items: start; }
  .three-col { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .form-grid.cols { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .role-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .drawer-overlay { align-items: stretch; justify-items: end; }
  .drawer { width: 430px; max-height: none; height: 100vh; margin: 0; border-radius: 26px 0 0 26px; padding: 26px; }
  .modal-overlay { align-items: center; }
  .modal { max-height: 88vh; margin: auto; border-radius: 26px; }
  .day { min-height: 108px; }
  .event-dot { font-size: 10px; }
  .brand-options { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .brand-option { grid-template-columns: 1fr; align-content: start; text-align: center; }
  .stewardship-study { grid-template-columns: minmax(260px,.8fr) minmax(420px,1.2fr); align-items: center; }
}
@media (max-width: 480px) {
  .update-card { align-items: flex-start; flex-direction: column; }
  .provision-summary { grid-template-columns: 1fr; padding: 19px; }
  .provision-ring { position: absolute; right: 15px; top: 15px; width: 72px; height: 72px; }
  .provision-ring::before { width: 55px; height: 55px; }
  .provision-ring strong { font-size: 18px; }
  .provision-story h2 { max-width: calc(100% - 70px); font-size: 24px; }
  .provision-story > p:not(.eyebrow) { padding-right: 12px; }
  .provision-counts { grid-column: auto; }
  .stewardship-examples { grid-template-columns: 1fr; }
  .stewardship-examples > div { display: grid; grid-template-columns: 100px 1fr; align-items: center; text-align: left; }
  .stewardship-examples small { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Approved Flock identity v0.3 */
:root {
  --ink: #0e2a4a;
  --muted: #55708b;
  --forest: #0f4c81;
  --forest-2: #1268a9;
  --cream: #e8f4ff;
  --paper: #ffffff;
  --gold: #c18a29;
  --gold-soft: #fff1cf;
  --coral: #b96f18;
  --coral-soft: #fff0d2;
  --sage: #e1f4e8;
  --blue: #38bdf8;
  --line: #d3e3f0;
  --shadow: 0 14px 38px rgba(14,42,74,.10);
}
html { background: var(--cream); color: var(--ink); font-family: "Segoe UI", Inter, ui-sans-serif, system-ui, sans-serif; }
body { background: linear-gradient(180deg,#e8f4ff 0,#f7fbff 300px,#edf7ff 100%); }
h1, h2, h3 { color: var(--ink); font-family: "Arial Rounded MT Bold", "Segoe UI", ui-sans-serif, system-ui, sans-serif; letter-spacing: -.025em; }
.topbar { min-height: 72px; padding: 9px 16px; background: linear-gradient(110deg,#0f4c81,#1688cf 62%,#38bdf8); border-bottom: 0; box-shadow: 0 8px 22px rgba(14,42,74,.16); }
.brand { min-width: 0; gap: 5px; }
.brand-lockup { display: flex; align-items: center; gap: 7px; min-width: 0; color: #fff; }
.brand-flock { width: 76px; height: 42px; object-fit: contain; flex: 0 0 auto; }
.brand-word { display: grid; line-height: 1; }
.brand-word strong { color: #fff; font-family: "Arial Rounded MT Bold", "Segoe UI", sans-serif; font-size: 27px; letter-spacing: -.04em; }
.brand-word small { margin-top: 4px; color: #e8f7ff; font-family: "Segoe UI", sans-serif; font-size: 8px; font-weight: 650; letter-spacing: 0; white-space: nowrap; }
.brand-mark { display: none; }
.version-chip { color: #0e2a4a; background: #fff; box-shadow: 0 2px 8px rgba(14,42,74,.15); }
.role-button { color: var(--ink); border-color: rgba(255,255,255,.68); background: rgba(255,255,255,.94); }
.role-button small { color: #57738c; }
.avatar { background: #0f4c81; }
.eyebrow { color: #0f6fac; }
.hero { min-height: 300px; display: flex; flex-direction: column; justify-content: center; padding: 32px 28px; color: white; background-image: linear-gradient(90deg,rgba(5,35,70,.12),rgba(5,35,70,.2) 36%,rgba(5,35,70,.85) 72%,rgba(5,35,70,.94)),url('./assets/flock-landscape-v03.png'); background-size: cover; background-position: center; box-shadow: 0 18px 42px rgba(14,42,74,.2); }
.hero::after { display: none; }
.hero .eyebrow, .hero h1, .hero > p, .hero .hero-actions { width: min(530px,100%); margin-left: auto; }
.hero .eyebrow { color: #d9f2ff; }
.hero h1 { color: white; font-size: clamp(34px,6vw,58px); text-shadow: 0 2px 12px rgba(0,26,61,.3); }
.hero > p { color: #eef9ff; }
.button { background: #0f6fac; box-shadow: 0 5px 14px rgba(15,76,129,.16); }
.button.sm { min-width: 40px; min-height: 40px; }
.button:hover { background: #0c5f94; }
.button.secondary, .button.gold { color: #0e2a4a; background: #ffd888; }
.button.light { color: #0f4c81; background: white; }
.button.ghost { color: #0f4c81; border-color: #bcd4e5; background: rgba(255,255,255,.72); }
.button.danger { background: #a95f14; }
.update-card { border-color: #bddcf1; background: linear-gradient(110deg,#fff,#e7f6ff); }
.stat, .card { border-color: #d3e3f0; background: rgba(255,255,255,.97); box-shadow: var(--shadow); }
.stat strong { color: #0f4c81; }
.stats .stat:nth-child(1) { border-top: 4px solid #16864b; }
.stats .stat:nth-child(2) { border-top: 4px solid #38bdf8; }
.stats .stat:nth-child(3) { border-top: 4px solid #c18a29; }
.stats .stat:nth-child(4) { border-top: 4px solid #98b8cf; }
.badge { color: #0f4c81; background: #e8f4ff; }
.badge.matching { color: #075c93; background: #d9f2ff; }
.badge.attention { color: #875d0e; background: #fff0cc; }
.badge.provided { color: #0d6738; background: #dcf3e4; }
.badge.private { color: #334f7b; background: #e9eff8; }
.icon-tile { color: #0f4c81; background: #e8f4ff; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.progress > span { background: linear-gradient(90deg,#16864b,#52b26f); }
.bottom-nav { border-color: #d5e5f1; background: rgba(255,255,255,.97); }
.nav-item { color: #6a849b; }
.nav-item { min-height: 48px; }
.nav-item.active { color: #0f6fac; }
.tabs, .segmented { background: #dbeefa; }
.tabs button.active, .segmented button.active { color: #0f4c81; }
.filter { border-color: #c7ddeb; background: white; }
.filter { min-height: 36px; }
.filter.active { border-color: #0f6fac; background: #0f6fac; }
.field input, .field select, .field textarea { border-color: #bed5e5; color: #0e2a4a; }
.toggle.on { background: #16864b; }
.toggle { width: 48px; height: 30px; }
.toggle::after { width: 24px; height: 24px; }
.toggle.on::after { transform: translateX(18px); }
.notice { color: #76520b; border-color: #edd29c; background: #fff5df; }
.notice.safe { color: #0e6538; border-color: #bfe1c8; background: #ebf8ef; }
.calendar-title { color: #0e2a4a; }
.day { border-color: #d4e3ef; background: rgba(255,255,255,.92); }
.day.today { border-color: #1688cf; box-shadow: inset 0 0 0 2px #38bdf8; }
.day.provision-day { border-color: #a8d9b7; background: #effaf2; }
.day.attention-day { box-shadow: inset 0 -3px 0 #c18a29; }
.event-dot { color: #0e2a4a; background: #e7f4fb; }
.event-dot.attention { color: #76520b; background: #fff0cf; }
.event-dot.provided { color: #0c6135; background: #dcf3e4; box-shadow: inset 3px 0 0 #16864b; }
.timeline-card.provision-event { border-color: #bfe0c8; background: linear-gradient(120deg,#fff,#edf9f1); }
.provided-note { color: #0d6738; }
.provision-summary { color: white; background-image: linear-gradient(90deg,rgba(7,39,75,.9),rgba(7,39,75,.72)),url('./assets/flock-landscape-v03.png'); background-size: cover; background-position: center 60%; box-shadow: 0 18px 42px rgba(14,42,74,.2); }
.provision-summary::before { display: none; }
.provision-story .eyebrow { color: #bfeaff; }
.provision-story h2 { color: white; }
.provision-ring { background: conic-gradient(#36b66a 0 var(--provision),rgba(255,255,255,.23) var(--provision) 360deg); }
.provision-ring::before { background: #0f4c81; }
.provision-count { background: rgba(255,255,255,.14); }
.provision-count.fulfilled { box-shadow: inset 4px 0 0 #49cf7b; }
.provision-count.progressing { box-shadow: inset 4px 0 0 #f0b93b; }
.provision-count.outstanding { box-shadow: inset 4px 0 0 #b8cde0; }
.stamp { color: #75500a; border-color: #dfbe7c; background: linear-gradient(135deg,#fffaf0,#ffedc2); }
.stamp.collective { color: #75500a; border-color: #dfbe7c; background: linear-gradient(135deg,#fffaf0,#ffedc2); }
.quote { color: #244d70; border-color: #38bdf8; background: rgba(255,255,255,.72); font-family: "Segoe UI",sans-serif; }
.benefit::after { border-color: rgba(56,189,248,.18); }
.benefit-offer { color: #0f4c81; font-family: "Arial Rounded MT Bold","Segoe UI",sans-serif; }
.phone { border-color: #0e2a4a; background: #e8f4ff; }
.phone-top { background: #0e2a4a; }
.conversation { background: linear-gradient(#e8f4ff,#f9fcff); }
.bubble.out { background: #0f6fac; }
.role-option.active { background: #0f6fac; border-color: #0f6fac; }
.role-option { min-height: 96px; }
.role-sheep { display: inline-flex; align-items: center; justify-content: center; width: 88px; min-height: 56px; padding: 5px 7px; border-radius: 12px; background: linear-gradient(135deg,#38bdf8,#0f4c81); }
.role-sheep img { width: 74px; height: 44px; object-fit: contain; }
.role-sheep.compact { min-height: 27px; padding: 3px 5px; }
.role-sheep.compact { width: 48px; }
.role-sheep.compact img { width: 40px; height: 24px; }
.stewardship-examples.approved { grid-template-columns: repeat(2,minmax(0,1fr)); }
.stewardship-role { min-height: 115px; display: flex !important; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #cce1ef; background: white; }
.stewardship-role strong { color: #0e2a4a; font-size: 12px; }
.stewardship-role small { color: #55708b; }
.brand-study { padding: 18px; border-radius: 22px; background: linear-gradient(135deg,#dff3ff,#f8fcff); }
.qr i { background: #0e2a4a; }
.close { color: #0e2a4a; background: #e3f1fa; }
@media (min-width:720px) {
  .bottom-nav { background: linear-gradient(180deg,#0e2a4a,#0f4c81); border-right: 0; }
  .nav-item { color: #cae6f6; }
  .nav-item.active { color: white; background: rgba(56,189,248,.24); }
  .brand-flock { width: 88px; height: 48px; }
  .brand-word strong { font-size: 31px; }
  .stewardship-examples.approved { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width:560px) {
  .topbar { min-height: 64px; }
  .brand { gap: 3px; }
  .brand-lockup { gap: 4px; }
  .brand-flock { width: 44px; height: 32px; }
  .brand-word strong { font-size: 21px; }
  .brand-word small { display: none; }
  .brand .version-chip { display: none; }
  .hero { min-height: 330px; padding: 25px 20px; background-image: linear-gradient(180deg,rgba(5,35,70,.08),rgba(5,35,70,.42) 45%,rgba(5,35,70,.94) 78%),url('./assets/flock-landscape-v03.png'); background-position: 35% center; }
  .hero .eyebrow, .hero h1, .hero > p, .hero .hero-actions { width: 100%; margin-left: 0; }
  .hero { justify-content: flex-end; }
  .hero h1 { font-size: 35px; }
  .role-button { min-width: 0; max-width: 56vw; overflow: hidden; }
  .role-button > span:nth-child(2) { min-width: 0; }
  .role-sheep.compact { display: none; }
}

/* Guest welcome and Scripture enhancement */
.hero .hero-scripture { width: min(530px,100%); margin: 2px 0 16px auto; padding-left: 15px; border-left: 3px solid #ffd888; }
.hero-scripture p { margin: 0 0 5px; color: #fff; font-size: clamp(18px,2.2vw,24px); font-weight: 700; line-height: 1.35; }
.hero-scripture cite { color: #d9f2ff; font-size: 12px; font-style: normal; font-weight: 800; letter-spacing: .06em; }
.guest-primary-actions .button { min-height: 48px; }
.guest-assurance { display: grid; grid-template-columns: auto 1fr; gap: 9px 14px; align-items: center; margin-top: 14px; padding: 15px 18px; border: 1px solid #bfe1c8; border-radius: 18px; color: #0e6538; background: #ebf8ef; box-shadow: 0 7px 22px rgba(14,42,74,.05); }
.guest-assurance span { color: #355d49; font-size: 12px; line-height: 1.5; }
.scripture-card { margin: 16px 0; padding: 18px 20px; border: 1px solid #bddcf1; border-left: 4px solid #0f6fac; border-radius: 16px; color: #173d5d; background: linear-gradient(120deg,#fff,#edf8ff); box-shadow: 0 8px 24px rgba(14,42,74,.07); }
.scripture-card p { margin: 0 0 7px; font-family: Georgia,"Times New Roman",serif; font-size: 17px; line-height: 1.55; }
.scripture-card cite, .scripture-reference { color: #0f6fac; font-size: 11px; font-style: normal; font-weight: 850; letter-spacing: .05em; }
.scripture-card.compact { padding: 14px 17px; }
.scripture-card.compact p { font-size: 15px; }
.guest-flow-modal { width: min(720px,calc(100% - 24px)); }
.privacy-flow { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid #bed5e5; border-radius: 15px; color: #0e2a4a; background: #e8f4ff; }
.privacy-flow span { color: #46657e; font-size: 12px; line-height: 1.5; }
.consent-row { display: flex; gap: 10px; align-items: flex-start; color: #29475f; font-size: 12px; line-height: 1.5; }
.consent-row input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; accent-color: #0f6fac; }
.membership-points { display: grid; gap: 10px; }
.membership-points > div { display: grid; grid-template-columns: 26px 1fr; gap: 9px; align-items: start; padding: 11px 13px; border: 1px solid #d3e3f0; border-radius: 14px; background: #f8fcff; }
.membership-points > div > span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #16864b; font-weight: 900; }
.membership-points p { margin: 0; color: #55708b; font-size: 12px; line-height: 1.5; }
.membership-points strong { color: #0e2a4a; }
.private-queue-card { border-color: #c9d6e8; background: linear-gradient(120deg,#fff,#f1f5fb); }

@media (max-width:560px) {
  .hero .hero-scripture { width: 100%; margin-left: 0; }
  .hero-scripture p { font-size: 18px; }
  .guest-primary-actions { display: grid; grid-template-columns: 1fr; }
  .guest-primary-actions .button { width: 100%; }
  .guest-assurance { grid-template-columns: 1fr; }
  .scripture-card { padding: 14px 15px; }
  .scripture-card p, .scripture-card.compact p { font-size: 14px; }
}

/* Calendar Pulse, completion stamps, and universal actions */
.calendar-page-head { align-items: center; margin-top: 0; padding: 20px 22px; border-radius: 22px; color: #fff; background-image: linear-gradient(90deg,rgba(7,39,75,.96),rgba(15,76,129,.78)),url('./assets/flock-landscape-v03.png'); background-size: cover; background-position: center 52%; box-shadow: 0 14px 34px rgba(14,42,74,.18); }
.calendar-page-head h1, .calendar-page-head .eyebrow { color: #fff; }
.calendar-page-head p { margin: 5px 0 0; color: #e8f6ff; }
.pulse-note { margin-top: 8px !important; color: #cde9f8 !important; font-size: 10px !important; }
.pulse-empty { grid-template-columns: 1fr; }
.monthly-summary { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 12px; align-items: center; margin: 0 0 16px; padding: 14px 16px; border: 1px solid #c9dfed; border-radius: 18px; background: #fff; box-shadow: 0 8px 24px rgba(14,42,74,.07); }
.monthly-summary h3, .monthly-summary p { margin: 0; }
.monthly-summary p { color: #55708b; font-size: 10px; }
.monthly-count { min-width: 105px; padding: 9px 12px; border-radius: 13px; background: #edf7fd; }
.monthly-count strong, .monthly-count span { display: block; }
.monthly-count strong { color: #0f4c81; font-size: 22px; }
.monthly-count span { color: #55708b; font-size: 9px; }
.calendar-grid { width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; grid-template-columns: repeat(7,minmax(72px,1fr)); padding-bottom: 7px; scrollbar-color: #98b8cf transparent; }
.day { position: relative; min-height: 96px; }
.day.outside.provision-day { opacity: 1; }
.day.outside.provision-day .day-num { opacity: .55; }
.calendar-stamps { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin: 2px 0 5px; }
.calendar-stamps .calendar-stamp { width: 27px; height: 27px; padding: 2px; border-radius: 50%; background: rgba(255,250,240,.95); box-shadow: 0 2px 7px rgba(117,80,10,.2); }
.timeline-provision { display: flex; align-items: center; min-height: 68px; padding: 14px 18px; border-color: #dfbe7c; background: linear-gradient(120deg,#fff,#fff5df); }
.timeline-stamps { margin: 0; }
.timeline-stamps .calendar-stamp { width: 40px; height: 40px; }
.universal-actions { position: fixed; z-index: 24; right: 22px; bottom: 20px; display: flex; gap: 8px; padding: 7px; border: 1px solid rgba(255,255,255,.72); border-radius: 18px; background: rgba(255,255,255,.93); backdrop-filter: blur(16px); box-shadow: 0 10px 30px rgba(14,42,74,.19); }
.universal-action { min-height: 44px; display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 13px; padding: 9px 14px; color: #fff; background: #0f6fac; font-size: 12px; font-weight: 800; }
.universal-action span { font-size: 17px; line-height: 1; }
.universal-action.share { color: #0f4c81; border: 1px solid #bcd4e5; background: #fff; }
.share-preview { display: grid; gap: 5px; padding: 15px 17px; border: 1px solid #c9dfed; border-radius: 16px; background: #edf7fd; }
.share-preview span { color: #55708b; font-size: 12px; }
.share-preview code { overflow-wrap: anywhere; color: #0f4c81; font-size: 10px; }
.share-actions a.button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

@media (min-width:720px) {
  .day { min-height: 118px; }
}

@media (max-width:719px) {
  .shell { padding-bottom: 154px; }
  .universal-actions { right: 10px; bottom: calc(75px + env(safe-area-inset-bottom)); }
  .universal-action { min-height: 42px; padding: 8px 11px; font-size: 11px; }
  .monthly-summary { grid-template-columns: 1fr 1fr; }
  .monthly-summary > div:first-child { grid-column: 1/-1; }
  .monthly-count { min-width: 0; }
  .calendar-page-head { padding: 17px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .daily-scripture { transition: none; animation: none; }
}