@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');

:root {
    color-scheme: light;
    --ink: #193b32;
    --muted: #67746d;
    --green: #326b53;
    --paper: #f7f7f1;
    --line: #e2e6df;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: 'DM Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
}
.topbar {
    height: 82px;
    padding: 0 max(6.5vw, 24px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(25,59,50,.09);
}
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; }
.brand-mark { color: #518464; font-size: 29px; line-height: 1; }
.brand-name { font-size: 16px; font-weight: 700; letter-spacing: .075em; }
.brand-name small { display: block; margin-top: 3px; font-size: 9px; font-weight: 600; letter-spacing: .16em; }
.quiet { color: #4d6158; font-size: 13px; text-decoration: none; }
.quiet span { margin-left: 3px; }
.shell { max-width: 1190px; margin: 0 auto; padding: 76px 34px 25px; }
.hero { display: grid; grid-template-columns: 1.16fr .84fr; gap: clamp(45px, 8vw, 115px); align-items: center; }
.hero-copy { padding: 12px 0 25px; }
.eyebrow { color: #64806f; font-size: 10px; font-weight: 700; letter-spacing: .17em; }
h1 { margin: 23px 0 19px; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(43px, 5vw, 62px); font-weight: 500; line-height: 1.13; letter-spacing: -.035em; }
h1 em { color: var(--green); font-weight: 500; }
.lead { max-width: 540px; margin: 0; color: #63716a; font-size: 16px; line-height: 1.8; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 25px 0 28px; }
.chips span { padding: 9px 12px; border: 1px solid #e1e7df; border-radius: 999px; color: #56685e; font-size: 11px; }
.chips span span { padding: 0; border: 0; margin-right: 5px; color: var(--green); }
.primary-button { display: inline-flex; min-height: 51px; align-items: center; gap: 28px; padding: 0 20px; border-radius: 5px; background: #326b53; color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; box-shadow: 0 5px 14px rgba(35,85,62,.12); transition: background .2s, transform .2s; }
.primary-button:hover { background: #285840; transform: translateY(-1px); }
.primary-button b { font-size: 18px; font-weight: 400; }
.fine { margin: 13px 0 0; color: #849088; font-size: 11px; }
.card { border: 1px solid #e4e7df; border-radius: 9px; background: #fff; box-shadow: 0 15px 45px rgba(35,55,43,.055); }
.intro { padding: 34px 35px 28px; }
.flower { color: #518464; font-size: 27px; }
h2 { margin: 13px 0 10px; font-family: 'Playfair Display', Georgia, serif; font-size: 26px; font-weight: 500; letter-spacing: -.02em; }
.intro > p { margin: 0; color: #6a766f; font-size: 13px; line-height: 1.7; }
.intro ol { display: grid; gap: 14px; margin: 24px 0; padding: 0; list-style: none; counter-reset: steps; }
.intro li { display: flex; align-items: center; gap: 12px; color: #42584c; font-size: 12px; counter-increment: steps; }
.intro li::before { content: counter(steps, decimal-leading-zero); color: #558066; font-size: 10px; font-weight: 700; }
.notice { padding: 13px 14px; border-left: 2px solid #83a58d; background: #f3f7f2; color: #617168; font-size: 10px; line-height: 1.65; }
footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 68px; padding-top: 18px; border-top: 1px solid var(--line); color: #7a867e; font-size: 10px; }
footer span { color: #65756b; }
.formgrid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(35px, 6vw, 80px); align-items: start; }
.steps { position: sticky; top: 25px; }
.steps h2 { margin: 12px 0 23px; font-size: 25px; }
.step { display: flex; align-items: center; gap: 11px; padding: 12px 10px; border-left: 2px solid #e0e6df; color: #859088; font-size: 11px; line-height: 1.4; }
.step span { color: #94a097; font-size: 10px; font-weight: 700; }
.step.current { border-color: #548064; background: #eef4ee; color: #315c43; font-weight: 600; }
.step.current span { color: #477357; }
.step.complete { border-color: #d1e0d3; color: #55735d; }
.step.complete span { color: #548064; }
.steps .fine { margin-top: 20px; line-height: 1.6; }
.progresslabel { display: flex; justify-content: space-between; margin-bottom: 8px; color: #718077; font-size: 10px; font-weight: 700; letter-spacing: .1em; }
progress { display: block; width: 100%; height: 5px; margin: 0 0 20px; border: 0; border-radius: 99px; background: #e5eae3; accent-color: #4c7b5d; }
progress::-webkit-progress-bar { border-radius: 99px; background: #e5eae3; }
progress::-webkit-progress-value { border-radius: 99px; background: #4c7b5d; }
.form-card { padding: 30px clamp(23px, 4vw, 42px) 27px; }
.form-card h1 { margin: 12px 0 6px; font-size: 34px; }
.muted { margin: 0 0 25px; color: #78837b; font-size: 12px; }
.field { display: block; margin: 0 0 18px; color: #42584c; font-size: 12px; font-weight: 600; line-height: 1.5; }
.field input, .field select { display: block; width: 100%; min-height: 44px; margin-top: 7px; padding: 10px 12px; border: 1px solid #dfe5de; border-radius: 5px; outline: none; background: #fff; color: #283f33; font: 400 13px 'DM Sans', sans-serif; }
.field textarea { display: block; width: 100%; min-height: 92px; margin-top: 7px; padding: 11px 12px; border: 1px solid #dfe5de; border-radius: 5px; outline: none; resize: vertical; background: #fff; color: #283f33; font: 400 13px/1.6 'DM Sans', sans-serif; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #679173; box-shadow: 0 0 0 3px rgba(89,137,101,.12); }
.field input::placeholder { color: #a3aca5; }
.check { display: flex; align-items: flex-start; gap: 10px; margin: 23px 0 25px; color: #53665a; font-size: 12px; line-height: 1.6; }
.check input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: #326b53; flex: 0 0 auto; }
.actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 20px; border-top: 1px solid var(--line); }
.actions .primary-button { border: 0; font-family: inherit; cursor: pointer; }
.secondary { display: inline-flex; align-items: center; min-height: 44px; color: #607168; font-size: 12px; text-decoration: none; }
.form-errors { margin: 0 0 20px; padding: 13px 15px; border: 1px solid #ecd1ca; border-radius: 5px; background: #fff6f3; color: #8c4535; font-size: 12px; }
.form-errors ul { margin: 7px 0 0; padding-left: 19px; line-height: 1.7; }
.form-result { max-width: 680px; margin: 20px auto 0; padding: 48px; }
.form-result h1 { margin: 12px 0; font-size: 42px; }
.form-result p { max-width: 530px; margin: 0 0 24px; color: #65736b; font-size: 14px; line-height: 1.75; }
.pill { display: inline-flex; align-items: center; padding: 7px 11px; border: 1px solid #dfe7df; border-radius: 999px; background: #f4f7f3; color: #54715d; font-size: 10px; font-weight: 600; }
.login-shell { min-height: calc(100vh - 82px); display: flex; flex-direction: column; justify-content: center; }
.login-card { width: min(100%, 430px); margin: 5px auto 0; padding: 36px; }
.login-card h1 { margin: 12px 0 7px; font-size: 36px; }
.login-card .primary-button { border: 0; cursor: pointer; font-family: inherit; }
.login-back { margin-top: 15px; }
.dashboard { max-width: 1250px; padding-top: 48px; }
.dashboard h1 { margin: 10px 0 5px; font-size: clamp(36px, 4vw, 48px); }
.dashboard h2 { font-size: 24px; }
.heading { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.heading > button { flex: 0 0 auto; }
.admin-header { display: flex; align-items: center; gap: 16px; color: #617168; font-size: 12px; }
.admin-header form { margin: 0; }
.link-button { padding: 5px 0; border: 0; background: none; color: #497354; font: inherit; cursor: pointer; }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 28px 0 20px; }
.metrics .card { padding: 21px 24px; }
.metrics small { color: #718077; font-size: 9px; font-weight: 700; letter-spacing: .13em; }
.metrics strong { display: block; margin-top: 10px; color: #285a42; font-family: 'Playfair Display', Georgia, serif; font-size: 35px; font-weight: 500; }
.metrics p { margin: 3px 0 0; color: #7c8980; font-size: 11px; }
.filters { display: grid; grid-template-columns: minmax(170px, 1.4fr) repeat(3, minmax(120px, 1fr)) auto auto; align-items: center; gap: 9px; margin: 0 0 20px; }
.filters input, .filters select { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid #dfe5de; border-radius: 5px; background: #fff; color: #43584b; font: 12px 'DM Sans', sans-serif; }
.filters button, .filters .primary-button { min-height: 42px; justify-content: center; padding: 0 13px; white-space: nowrap; font-size: 11px; }
.filters .secondary { padding: 0 12px; border: 1px solid #dfe5de; border-radius: 5px; background: #fff; cursor: pointer; }
.summarygrid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 17px; margin-bottom: 20px; }
.summarygrid > .card, .answers-card { padding: 23px 25px; }
.summarygrid h2 { margin: 8px 0 5px; }
.summarygrid .muted { margin-bottom: 14px; font-size: 11px; }
.signal { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid #edf0eb; color: #42584c; font-size: 12px; }
.signal small { display: block; margin-top: 4px; color: #869188; font-size: 10px; }
.signal b { color: #326b53; font-size: 17px; }
.barrow { margin: 18px 0; color: #53665a; font-size: 11px; }
.barrow div { display: flex; justify-content: space-between; gap: 15px; }
.barrow b { color: #315f46; }
.barrow progress { height: 7px; margin: 8px 0 0; }
.answers-card .heading { margin-bottom: 15px; }
.answers-card h2 { margin: 8px 0 0; }
.tablewrap { width: 100%; overflow-x: auto; }
.tablewrap table { width: 100%; border-collapse: collapse; text-align: left; }
.tablewrap th { padding: 11px 13px; border-bottom: 1px solid #e7ebe5; color: #829087; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.tablewrap td { padding: 13px; border-bottom: 1px solid #edf0eb; color: #43584b; font-size: 11px; vertical-align: middle; }
.tablewrap td small { display: block; margin-top: 4px; color: #829087; font-size: 10px; }
.tablewrap td b { color: #254b39; }
.tablewrap td .secondary { white-space: nowrap; }
.status-badge { display: inline-flex; padding: 5px 8px; border-radius: 999px; font-size: 9px; font-weight: 600; white-space: nowrap; }
.status-done { background: #edf5ef; color: #39704d; }
.status-draft { background: #f7f2e7; color: #866b2c; }
.empty-cell { text-align: center; color: #849087 !important; padding: 28px !important; }
.detail-heading { margin: 22px 0 25px; }
.detail-heading .muted { margin: 5px 0 0; }
.response-section { margin: 15px 0; padding: 24px 26px; }
.response-section h2 { margin: 8px 0 18px; }
.answer-list { margin: 0; }
.answer { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.5fr); gap: 20px; padding: 12px 0; border-top: 1px solid #edf0eb; }
.answer dt { color: #6b7970; font-size: 11px; line-height: 1.6; }
.answer dd { margin: 0; color: #344c3e; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.dashboard footer { margin-top: 38px; }
@media (max-width: 760px) {
    body { overflow-x: hidden; }
    .topbar { position: sticky; top: 0; z-index: 20; height: 66px; padding: 0 17px; background: rgba(247,247,241,.94); backdrop-filter: blur(14px); }
    .brand { gap: 8px; }
    .brand-mark { font-size: 25px; }
    .brand-name { font-size: 14px; }
    .brand-name small { font-size: 8px; }
    .quiet { font-size: 11px; }
    .shell { width: 100%; padding: 35px 17px 20px; }
    .hero { grid-template-columns: 1fr; gap: 24px; }
    .hero-copy { padding: 0; }
    h1 { font-size: clamp(36px, 9vw, 48px); line-height: 1.1; }
    .hero-copy h1 { margin: 18px 0 14px; }
    .lead { font-size: 14px; line-height: 1.7; }
    .chips { gap: 7px; margin: 19px 0 22px; }
    .chips span { padding: 8px 10px; font-size: 10px; }
    .primary-button { min-height: 49px; border-radius: 8px; }
    .intro { padding: 24px 21px 20px; border-radius: 14px; }
    .formgrid { grid-template-columns: minmax(0, 1fr); gap: 17px; }
    .steps { position: static; display: block; padding: 14px 15px; border: 1px solid #e3e9e1; border-radius: 13px; background: #fff; box-shadow: 0 5px 20px rgba(35,55,43,.035); }
    .steps h2, .steps .fine { display: none; }
    .steps > .eyebrow { display: block; margin: 0 0 10px 2px; font-size: 9px; }
    .step:not(.current) { display: none; }
    .step.current { min-height: 45px; padding: 9px 11px; border: 0; border-radius: 8px; background: #eef4ee; font-size: 12px; }
    .step.current span { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: #dceade; font-size: 9px; }
    .progresslabel { margin-bottom: 9px; font-size: 9px; }
    progress { height: 6px; margin-bottom: 14px; }
    .form-card { padding: 22px 18px 18px; border-radius: 14px; }
    .form-card h1 { margin: 10px 0 6px; font-size: 30px; }
    .muted { margin-bottom: 20px; font-size: 12px; line-height: 1.6; }
    .field { margin-bottom: 17px; font-size: 12px; }
    .field input, .field select, .field textarea { margin-top: 8px; border-radius: 8px; font-size: 16px; }
    .field input, .field select { min-height: 49px; padding: 11px 12px; }
    .field textarea { min-height: 104px; padding: 12px; }
    .check { gap: 11px; margin: 21px 0; font-size: 12px; }
    .check input { width: 20px; height: 20px; }
    .actions { gap: 10px; padding-top: 16px; }
    .actions .secondary, .actions .primary-button { min-height: 48px; justify-content: center; padding: 0 13px; border-radius: 8px; }
    .actions .secondary { flex: 0 0 auto; border: 1px solid #dfe5de; }
    .actions .primary-button { flex: 1 1 auto; gap: 9px; }
    .form-result { margin-top: 8px; padding: 29px 22px; border-radius: 14px; }
    .form-result h1 { font-size: 34px; }
    .form-result p { font-size: 13px; }
    .login-shell { min-height: calc(100svh - 66px); justify-content: center; padding-top: 24px; }
    .login-card { padding: 27px 21px; border-radius: 14px; }
    .login-card h1 { font-size: 32px; }
    .login-card .primary-button { width: 100%; justify-content: center; }
    .admin-header { gap: 9px; }
    .admin-header > span:not(.pill) { display: none; }
    .admin-header .pill { max-width: 146px; padding: 6px 8px; font-size: 9px; }
    .dashboard { padding-top: 27px; }
    .dashboard h1 { font-size: clamp(34px, 8.5vw, 43px); }
    .dashboard h2 { font-size: 22px; }
    .dashboard > .heading { flex-direction: row; align-items: center; }
    .dashboard > .heading > div { min-width: 0; }
    .dashboard > .heading > button { padding: 0 12px; min-height: 42px; font-size: 10px; }
    .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 20px 0 14px; }
    .metrics .card { min-width: 0; padding: 13px 11px; border-radius: 11px; }
    .metrics small { font-size: 7px; letter-spacing: .06em; line-height: 1.4; }
    .metrics strong { margin-top: 7px; font-size: 27px; }
    .metrics p { display: none; }
    .filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
    .filters input { grid-column: 1 / -1; }
    .filters select[name="status"] { grid-column: 1 / -1; }
    .filters button, .filters .primary-button { width: 100%; }
    .filters select { min-width: 0; min-height: 44px; padding: 8px; font-size: 11px; }
    .filters button, .filters .primary-button { min-height: 44px; padding: 0 8px; font-size: 10px; }
    .summarygrid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .summarygrid > .card, .answers-card { padding: 19px 16px; border-radius: 13px; }
    .signal { padding: 11px 0; font-size: 11px; }
    .answers-card .heading { flex-direction: row; align-items: center; }
    .answers-card .heading .pill { white-space: nowrap; }
    .tablewrap { margin: 0; overflow: visible; border-radius: 8px; }
    .tablewrap table, .tablewrap tbody { display: block; width: 100%; min-width: 0; }
    .tablewrap thead { display: none; }
    .tablewrap tbody { display: grid; gap: 10px; }
    .tablewrap tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; border: 1px solid #e7ebe5; border-radius: 11px; background: #fff; }
    .tablewrap td { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 5px; padding: 11px 12px; border: 0; font-size: 11px; overflow-wrap: anywhere; }
    .tablewrap td::before { content: attr(data-label); color: #89948c; font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
    .tablewrap td:first-child { grid-column: 1 / -1; border-bottom: 1px solid #edf0eb; background: #fbfcfa; }
    .tablewrap td:last-child { grid-column: 1 / -1; border-top: 1px solid #edf0eb; }
    .tablewrap td:last-child a { min-height: 38px; align-self: stretch; justify-content: center; border: 1px solid #dfe7df; border-radius: 7px; background: #f8faf7; color: #326b53; }
    .tablewrap .empty-cell { display: block; grid-column: 1 / -1; }
    .detail-heading { margin: 18px 0 19px; }
    .detail-heading .eyebrow { font-size: 9px; line-height: 1.6; }
    .response-section { margin: 12px 0; padding: 19px 16px; border-radius: 13px; }
    .answer { grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 11px 0; }
    .answer dt { font-size: 10px; }
    .answer dd { font-size: 12px; }
    footer { margin-top: 35px; flex-direction: column; gap: 7px; padding-top: 14px; font-size: 9px; }
}

@media (max-width: 390px) {
    .topbar { padding: 0 13px; }
    .brand-name small { letter-spacing: .1em; }
    .topbar > .quiet { font-size: 10px; }
    .shell { padding-right: 13px; padding-left: 13px; }
    .dashboard > .heading { align-items: flex-start; flex-direction: column; }
    .dashboard > .heading > button { align-self: stretch; }
    .admin-header .pill { max-width: 122px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .metrics { gap: 6px; }
    .metrics .card { padding: 11px 8px; }
    .metrics small { font-size: 6.5px; }
    .metrics strong { font-size: 24px; }
    .filters { gap: 7px; }
    .filters button, .filters .primary-button { font-size: 9px; }
    .actions { align-items: stretch; }
    .actions .secondary { font-size: 11px; }
    .actions .primary-button { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}