:root {
  --forest: #123d30;
  --forest-deep: #08271f;
  --leaf: #2f6b4f;
  --gold: #f4b83f;
  --terracotta: #c85c3c;
  --cream: #f8f3e6;
  --paper: #fffdf7;
  --ink: #1a2621;
  --muted: #5d6d65;
  --line: #d9dfd9;
  --shadow: 0 22px 70px rgba(8, 39, 31, 0.12);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.7;
}

body.language-zh [data-en],
body.language-en [data-zh] {
  display: none !important;
}

a {
  color: inherit;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  background: #fff;
  transform: translateY(-140%);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  align-items: center;
  gap: 28px;
  min-height: 78px;
  padding: 12px clamp(20px, 4vw, 68px);
  color: #fff;
  background: rgba(8, 39, 31, 0.96);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  text-decoration: none;
  line-height: 1.2;
}

.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50% 50% 50% 12%;
  background: var(--gold);
  color: var(--forest-deep);
  font-family: Georgia, serif;
  font-size: 24px;
  font-weight: 800;
}

.brand.brand--hecsis .brand-logo {
  width: 46px;
  height: 46px;
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
}

.brand.brand--hecsis strong {
  font: 700 23px/1 Georgia, serif;
  letter-spacing: 0.08em;
}

.brand.brand--hecsis small {
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 0.06em;
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  font-size: 15px;
  letter-spacing: 0.02em;
}

.brand small {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
}

.brand-tagline {
  text-transform: none;
  white-space: nowrap;
}

.brand-tagline .tagline-initial {
  color: #f1b53d;
  font-family: Georgia, serif;
  font-size: 1.55em;
  line-height: 0.75;
  letter-spacing: 0;
  vertical-align: -0.04em;
}

.main-nav {
  display: flex;
  gap: 28px;
}

.main-nav a {
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--gold);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-attendance-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 15px;
  border: 1px solid rgba(244, 184, 63, 0.72);
  border-radius: 999px;
  color: var(--gold);
  text-decoration: none;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}

.header-attendance-link:hover,
.header-attendance-link:focus-visible {
  color: var(--forest-deep);
  background: var(--gold);
}

.language-switch {
  display: flex;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
}

.language-switch button {
  min-width: 48px;
  padding: 7px 11px;
  border: 0;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.language-switch button[aria-pressed="true"] {
  color: var(--forest-deep);
  background: var(--gold);
}

.header-back {
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.host-hero {
  padding: 118px max(24px, calc((100vw - 1080px) / 2));
  color: #fff;
  background:
    radial-gradient(circle at 82% 18%, rgba(244, 184, 63, 0.2), transparent 27%),
    linear-gradient(135deg, var(--forest-deep), var(--forest));
}

.host-hero-inner {
  max-width: 900px;
}

.host-hero h1 {
  max-width: 860px;
  font-size: clamp(42px, 6vw, 72px);
}

.host-hero-inner > p:not(.eyebrow) {
  max-width: 780px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 19px;
}

/* 財務託管合作說明頁 */
.host-guide-intro { display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; padding-top:92px; padding-bottom:78px; }
.host-guide-intro .host-prose { max-width:720px; }
.host-model { background:#edf1ee; }
.guide-flow { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; max-width:1160px; margin:42px auto 64px; padding:0; list-style:none; }
.guide-flow li { padding:24px 20px; background:#fff; border:1px solid #d6ded9; border-radius:16px; }
.guide-flow span { display:block; margin-bottom:14px; color:var(--terracotta); font-weight:900; }
.guide-flow strong { display:block; font-size:17px; }
.guide-flow p { margin:8px 0 0; color:var(--muted); font-size:14px; line-height:1.55; }
.allocation-card { display:grid; grid-template-columns:minmax(260px,.8fr) minmax(440px,1.2fr); gap:46px; align-items:start; max-width:1080px; margin:0 auto; padding:38px; background:var(--paper); border:1px solid #d5ddd7; border-radius:20px; box-shadow:0 16px 42px rgba(8,39,31,.08); }
.allocation-card h3 { margin:0 0 12px; font-size:27px; line-height:1.25; }
.allocation-card p { color:var(--muted); }
.allocation-card table { width:100%; border-collapse:collapse; font-size:14px; }
.allocation-card th,.allocation-card td { padding:13px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.allocation-card th { color:var(--forest); font-size:13px; }
.guide-questions { padding-top:94px; padding-bottom:104px; }
.question-list { max-width:980px; margin:42px auto 0; }
.question-list details { margin-bottom:12px; background:#fff; border:1px solid #d8e0db; border-radius:14px; box-shadow:0 8px 20px rgba(8,39,31,.04); }
.question-list summary { display:flex; align-items:center; gap:16px; padding:20px 22px; cursor:pointer; color:var(--forest-deep); font-size:18px; font-weight:850; list-style:none; }
.question-list summary::-webkit-details-marker { display:none; }
.question-list summary::after { margin-left:auto; color:var(--terracotta); content:'＋'; font-size:24px; font-weight:400; }
.question-list details[open] summary::after { content:'−'; }
.question-list summary span { display:grid; flex:0 0 35px; height:35px; place-items:center; border-radius:50%; color:var(--forest-deep); background:var(--gold); font-size:13px; }
.question-list .answer { padding:0 28px 24px 73px; color:#405149; }
.question-list .answer p { margin:0 0 14px; }
.question-list .answer p:last-child { margin-bottom:0; }
.answer-table-wrap { margin:20px 0; overflow-x:auto; }
.answer-table-wrap table { width:100%; min-width:560px; border-collapse:collapse; font-size:14px; }
.answer-table-wrap th,.answer-table-wrap td { padding:12px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.answer-table-wrap th { color:var(--forest); background:#f2f5f2; font-size:13px; }
.host-closing { padding:92px max(24px,calc((100vw - 920px)/2)); color:#fff; text-align:center; background:linear-gradient(135deg,var(--forest-deep),var(--leaf)); }
.host-closing h2 { margin:10px auto 16px; max-width:760px; font-size:clamp(31px,4vw,51px); line-height:1.2; }
.host-closing p:not(.eyebrow) { max-width:720px; margin:0 auto; color:rgba(255,255,255,.8); font-size:18px; }

@media (max-width:820px) { .host-guide-intro,.allocation-card { grid-template-columns:1fr; gap:28px; } .host-guide-intro { padding-top:58px; padding-bottom:52px; } .guide-flow { grid-template-columns:1fr; } .allocation-card { padding:26px; overflow-x:auto; } .question-list summary { padding:18px 16px; font-size:16px; } .question-list .answer { padding:0 18px 21px; } }

.host-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
}

.host-status-row span {
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: #ffe19a;
  font-size: 13px;
  font-weight: 800;
}

.website-demo-section {
  padding: 92px max(20px, calc((100vw - 1220px) / 2));
  background: #edf1ee;
}

.demo-intro {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: end;
  gap: 70px;
  margin-bottom: 36px;
}

.demo-intro h2 {
  margin-bottom: 0;
}

.demo-intro > p {
  margin-bottom: 5px;
  color: var(--muted);
}

.website-window {
  overflow: hidden;
  background: #fff;
  border: 1px solid #cfd8d2;
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(8, 39, 31, 0.17);
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 48px;
  padding: 0 16px;
  background: #e7ece9;
  border-bottom: 1px solid #d2dad5;
}

.browser-bar > span {
  width: 11px;
  height: 11px;
  background: #9aa8a0;
  border-radius: 50%;
}

.browser-bar > span:first-child {
  background: #d87359;
}

.browser-bar > span:nth-child(2) {
  background: #dcb04c;
}

.browser-bar > span:nth-child(3) {
  background: #68a57e;
}

.browser-bar div {
  width: min(520px, 62%);
  margin-left: 12px;
  padding: 6px 14px;
  overflow: hidden;
  color: #64736b;
  background: #f7f9f8;
  border: 1px solid #d4dcd7;
  border-radius: 7px;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-app {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: 680px;
}

.demo-sidebar {
  padding: 28px 16px;
  color: #fff;
  background: var(--forest-deep);
}

.demo-logo {
  display: grid;
  width: 42px;
  height: 42px;
  margin: 0 8px 12px;
  place-items: center;
  color: var(--forest-deep);
  background: var(--gold);
  border-radius: 50% 50% 50% 12%;
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 800;
}

.demo-sidebar > strong,
.demo-sidebar > small {
  display: block;
  margin-left: 8px;
}

.demo-sidebar > small {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 11px;
}

.demo-tabs {
  display: grid;
  gap: 7px;
  margin-top: 34px;
}

.demo-tabs button {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 12px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.demo-tabs button span {
  color: var(--gold);
  font-family: Georgia, serif;
}

.demo-tabs button:hover,
.demo-tabs button:focus-visible,
.demo-tabs button[aria-selected="true"] {
  color: var(--forest-deep);
  background: var(--gold);
}

.demo-tabs button[aria-selected="true"] span {
  color: var(--forest-deep);
}

.demo-privacy-note {
  margin: 34px 8px 0;
  padding: 12px;
  color: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  font-size: 11px;
}

.demo-screen {
  min-width: 0;
  padding: 34px;
  background: #f8faf8;
}

.demo-screen-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.demo-screen-header > div:first-child {
  min-width: 0;
}

.demo-screen-header h3,
.demo-screen-header p {
  margin-bottom: 3px;
}

.demo-screen-header h3 {
  font-size: 25px;
}

.demo-screen-header p {
  color: var(--muted);
  font-size: 12px;
}

.demo-kicker {
  color: var(--terracotta);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-state {
  margin-left: auto;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.demo-state.complete {
  color: #174d36;
  background: #dff1e6;
}

.demo-state.pending {
  color: #69460d;
  background: #ffedba;
}

.demo-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 24px;
}

.demo-stat-row > div {
  padding: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
}

.demo-stat-row span,
.demo-stat-row strong {
  display: block;
}

.demo-stat-row span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.demo-stat-row strong {
  margin-top: 6px;
  color: var(--forest);
  font-size: 16px;
}

.attendance-stats {
  grid-template-columns: repeat(4, 1fr);
}

.demo-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.demo-form-grid > div {
  min-width: 0;
  padding: 13px 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.demo-form-grid .wide {
  grid-column: 1 / -1;
}

.demo-form-grid label,
.demo-form-grid span {
  display: block;
}

.demo-form-grid label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.demo-form-grid span {
  margin-top: 4px;
  font-size: 13px;
}

.demo-check-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.demo-check-row span {
  padding: 6px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
}

.check-ok {
  color: #174d36;
  background: #dff1e6;
}

.check-wait {
  color: #69460d;
  background: #ffedba;
}

.demo-child-avatar {
  display: grid;
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  place-items: center;
  color: var(--forest-deep);
  background: var(--gold);
  border-radius: 50%;
  font-family: Georgia, serif;
  font-size: 19px;
  font-weight: 800;
}

.child-public-header > div:nth-child(2) {
  min-width: 0;
}

.demo-progress-card,
.formula-card,
.photo-proof,
.public-boundary {
  margin-top: 14px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.demo-progress-card > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 13px;
}

.demo-progress-card > div:first-child span,
.demo-progress-card p,
.demo-footnote {
  color: var(--muted);
}

.demo-progress-card p,
.demo-footnote {
  margin: 12px 0 0;
  font-size: 12px;
}

.demo-progress {
  height: 9px;
  margin-top: 12px;
  overflow: hidden;
  background: #dce5df;
  border-radius: 999px;
}

.demo-progress span {
  display: block;
  height: 100%;
  background: var(--leaf);
}

.public-boundary {
  display: flex;
  gap: 20px;
  color: #69460d;
  background: #fff2cc;
  border-color: #f1d68c;
  font-size: 12px;
}

.demo-table-wrap {
  margin-top: 14px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 9px;
}

.demo-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  background: #fff;
  font-size: 12px;
}

.demo-table th,
.demo-table td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.demo-table th {
  color: var(--muted);
  background: var(--cream);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.mini-state {
  display: inline-block;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.mini-state.ok {
  color: #174d36;
  background: #dff1e6;
}

.mini-state.leave {
  color: #69460d;
  background: #ffedba;
}

.mini-state.alert {
  color: #7b2e20;
  background: #f7d8d0;
}

.photo-proof {
  display: grid;
  grid-template-columns: 170px 1fr;
  align-items: center;
  gap: 20px;
}

.photo-placeholder {
  display: grid;
  min-height: 110px;
  place-content: center;
  padding: 15px;
  color: rgba(255, 255, 255, 0.88);
  background: linear-gradient(145deg, #234f3f, #0c3025);
  border-radius: 8px;
  text-align: center;
}

.photo-placeholder span,
.photo-placeholder small {
  display: block;
}

.photo-placeholder small {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 9px;
}

.photo-proof p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 12px;
}

.formula-card > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.formula-card > div {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.formula-card strong {
  color: var(--forest);
  font-size: 30px;
}

.formula-card small {
  color: var(--muted);
}

.formula-card b {
  color: var(--terracotta);
}

.allocation-visual {
  margin-top: 18px;
}

.allocation-bar {
  display: flex;
  height: 20px;
  overflow: hidden;
  border-radius: 999px;
}

.allocation-bar span {
  display: block;
}

.bar-family { width: 59.8%; background: var(--forest); }
.bar-school { width: 13.8%; background: var(--gold); }
.bar-ngo { width: 13.8%; background: var(--terracotta); }
.bar-platform { width: 4.6%; background: #72a88d; }
.bar-host { width: 8%; background: #75678b; }

.allocation-legend {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
  margin-top: 14px;
  font-size: 11px;
}

.allocation-legend span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.allocation-legend i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.legend-family { background: var(--forest); }
.legend-school { background: var(--gold); }
.legend-ngo { background: var(--terracotta); }
.legend-platform { background: #72a88d; }
.legend-host { background: #75678b; }

.evidence-path {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 24px;
}

.evidence-path > div {
  position: relative;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--leaf);
  border-radius: 6px;
}

.evidence-path .path-open {
  border-top-color: var(--gold);
}

.evidence-path span,
.evidence-path strong,
.evidence-path small {
  display: block;
}

.evidence-path span {
  color: var(--terracotta);
  font-family: Georgia, serif;
  font-weight: 800;
}

.evidence-path strong {
  margin-top: 9px;
  font-size: 12px;
}

.evidence-path small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}

.evidence-total {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 14px 18px;
  color: #fff;
  background: var(--forest);
  border-radius: 9px;
  font-size: 12px;
}

.evidence-total strong {
  color: var(--gold);
  font-size: 17px;
}

.screen-explainer {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 28px;
  margin-top: 18px;
  padding: 20px 24px;
  background: #fff;
  border-left: 5px solid var(--terracotta);
  border-radius: 3px 10px 10px 3px;
  box-shadow: 0 10px 28px rgba(8, 39, 31, 0.06);
}

.screen-explainer p {
  margin-bottom: 0;
  color: var(--muted);
}

.host-section {
  width: min(1080px, calc(100% - 40px));
  margin: 0 auto;
  padding: 96px 0;
}

.host-intro {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 80px;
}

.host-prose {
  padding-left: 30px;
  border-left: 3px solid var(--gold);
  color: var(--muted);
  font-size: 18px;
}

.host-principle {
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: center;
  gap: 48px;
  width: 100%;
  max-width: none;
  padding-right: max(24px, calc((100vw - 1080px) / 2));
  padding-left: max(24px, calc((100vw - 1080px) / 2));
  color: #fff;
  background: var(--terracotta);
}

.host-principle-mark {
  display: grid;
  width: 190px;
  height: 190px;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  color: #ffe19a;
  font-family: Georgia, serif;
  font-size: 42px;
  font-weight: 800;
}

.host-principle p:last-child {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 17px;
}

.allocation-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.allocation-five {
  grid-template-columns: repeat(6, 1fr);
}

.allocation-five .allocation-card {
  grid-column: span 2;
}

.allocation-five .allocation-card:first-child,
.allocation-five .allocation-card:nth-child(2) {
  grid-column: span 3;
}

.allocation-card {
  min-height: 260px;
  padding: 30px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 5px solid var(--leaf);
  border-radius: 5px 5px 16px 16px;
  box-shadow: 0 12px 34px rgba(8, 39, 31, 0.06);
}

.allocation-family {
  color: #fff;
  background: var(--forest);
  border-color: var(--forest);
}

.allocation-percent {
  display: block;
  margin-bottom: 24px;
  color: var(--terracotta);
  font-family: Georgia, serif;
  font-size: 36px;
  font-weight: 800;
}

.allocation-family .allocation-percent,
.allocation-family strong {
  color: var(--gold);
}

.allocation-card p {
  color: var(--muted);
}

.allocation-family p {
  color: rgba(255, 255, 255, 0.78);
}

.guidance-note {
  margin-top: 22px;
  padding: 24px 28px;
  background: var(--cream);
  border-left: 5px solid var(--gold);
  border-radius: 4px 12px 12px 4px;
}

.guidance-note p {
  margin: 6px 0 0;
  color: var(--muted);
}

.host-records {
  width: 100%;
  max-width: none;
  padding-right: max(24px, calc((100vw - 1080px) / 2));
  padding-left: max(24px, calc((100vw - 1080px) / 2));
  color: #fff;
  background: var(--forest-deep);
}

.host-flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  margin: 40px 0 24px;
  padding: 0;
  list-style: none;
}

.host-flow li {
  padding: 24px 20px;
  background: rgba(255, 255, 255, 0.075);
}

.host-flow div {
  padding: 24px 20px;
  background: rgba(255, 255, 255, 0.075);
}

.host-flow span,
.host-flow strong {
  display: block;
}

.host-flow span {
  margin-bottom: 36px;
  color: var(--gold);
  font-family: Georgia, serif;
  font-size: 26px;
  font-weight: 800;
}

.host-flow p,
.host-records-note {
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
}

.host-light-lead {
  color: rgba(255, 255, 255, 0.76);
}

.host-process-grid {
  grid-template-columns: repeat(4, 1fr);
}

.host-process-grid li:last-child {
  grid-column: auto;
}

.detail-block {
  margin-top: 78px;
  padding-top: 62px;
  border-top: 1px solid var(--line);
}

.responsibility-grid,
.control-grid,
.influence-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 34px;
}

.responsibility-grid article,
.control-grid article,
.influence-grid article {
  padding: 28px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.responsibility-grid article > span,
.influence-grid article > span {
  color: var(--terracotta);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.responsibility-grid h3,
.influence-grid h3 {
  margin: 12px 0;
}

.responsibility-grid ul,
.data-visibility ul,
.host-request ul {
  margin: 14px 0 0;
  padding-left: 20px;
  color: var(--muted);
}

.responsibility-grid li,
.data-visibility li,
.host-request li {
  margin: 7px 0;
}

.monthly-cycle,
.fund-path {
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.monthly-cycle li,
.fund-path li {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 28px;
  padding: 22px 4px;
  border-bottom: 1px solid var(--line);
}

.monthly-cycle li > span {
  color: var(--terracotta);
  font-weight: 900;
}

.monthly-cycle p,
.fund-path p {
  margin: 5px 0 0;
  color: var(--muted);
}

.data-visibility {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 34px;
}

.data-visibility article {
  padding: 30px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.detail-note {
  margin: 20px 0 0;
  padding: 16px 20px;
  color: var(--muted);
  background: #fff4df;
  border-left: 4px solid var(--gold);
  border-radius: 4px 10px 10px 4px;
  font-size: 14px;
}

.status-table-wrap {
  margin-top: 34px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.host-status-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  background: #fff;
  font-size: 14px;
}

.host-status-table th,
.host-status-table td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.host-status-table th {
  color: #fff;
  background: var(--forest);
  font-size: 13px;
}

.host-status-table tr:last-child td {
  border-bottom: 0;
}

.state-tag {
  display: inline-block;
  margin-right: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.state-ready {
  color: #174d36;
  background: #dff1e6;
}

.state-progress {
  color: #69460d;
  background: #ffedba;
}

.state-design,
.state-later {
  color: #5c456f;
  background: #eee5f5;
}

.fund-path li {
  grid-template-columns: 52px 1fr;
}

.fund-path li > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #fff;
  background: var(--forest);
  border-radius: 50%;
  font-family: Georgia, serif;
  font-weight: 800;
}

.control-grid article {
  background: #fff;
  border-top: 4px solid var(--leaf);
}

.control-grid h3 {
  margin-bottom: 10px;
}

.control-grid p,
.influence-grid p {
  margin-bottom: 0;
  color: var(--muted);
}

.host-records-note {
  margin-bottom: 0;
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.host-role-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.host-role-grid article {
  padding: 28px;
  background: var(--cream);
  border-radius: 12px;
}

.host-role-grid span {
  color: var(--terracotta);
  font-family: Georgia, serif;
  font-size: 24px;
  font-weight: 800;
}

.host-role-grid h3 {
  margin: 16px 0 8px;
}

.host-role-grid p {
  margin-bottom: 0;
  color: var(--muted);
}

.host-request {
  margin-top: 22px;
  padding: 32px;
  color: #fff;
  background: var(--forest);
  border-radius: 14px;
}

.host-request ul {
  color: rgba(255, 255, 255, 0.82);
}

.influence-section {
  width: 100%;
  max-width: none;
  padding-right: max(24px, calc((100vw - 1080px) / 2));
  padding-left: max(24px, calc((100vw - 1080px) / 2));
  background: var(--cream);
}

.influence-grid {
  grid-template-columns: repeat(3, 1fr);
}

.influence-grid article {
  background: #fff;
  border-top: 5px solid var(--gold);
}

.host-reflection {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 70px;
  padding: 92px max(24px, calc((100vw - 1080px) / 2));
  color: #fff;
  background: var(--terracotta);
}

.host-reflection > div > p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.84);
  font-size: 17px;
}

.host-reflection aside {
  align-self: center;
  padding: 28px;
  color: var(--forest-deep);
  background: #ffe19a;
  border-radius: 16px 4px 16px 4px;
}

.host-reflection ul {
  margin: 16px 0 0;
  padding-left: 20px;
}

.host-reflection li {
  margin: 10px 0;
}

.hero {
  position: relative;
  min-height: min(720px, 80vh);
  display: grid;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background: var(--forest-deep);
}

.hero-image,
.hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-image {
  object-fit: cover;
  object-position: center;
}

.hero-shade {
  background: linear-gradient(90deg, rgba(4, 25, 19, 0.92) 0%, rgba(8, 39, 31, 0.72) 36%, rgba(8, 39, 31, 0.08) 68%);
}

.hero-content {
  position: relative;
  z-index: 2;
  width: min(660px, 90vw);
  padding: 90px clamp(24px, 7vw, 118px);
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--gold);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.eyebrow.dark {
  color: var(--terracotta);
}

.eyebrow.light {
  color: #ffe19a;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  line-height: 1.2;
}

h1 {
  margin-bottom: 24px;
  font-family: Georgia, "Noto Serif TC", serif;
  font-size: clamp(42px, 5.2vw, 76px);
  font-weight: 700;
  letter-spacing: -0.04em;
}

body.language-en .hero h1 {
  font-size: clamp(38px, 4vw, 60px);
  line-height: 1.08;
}

h2 {
  margin-bottom: 20px;
  font-family: Georgia, "Noto Serif TC", serif;
  font-size: clamp(30px, 3.5vw, 50px);
  letter-spacing: -0.03em;
}

h3 {
  font-size: 20px;
}

.hero-copy {
  max-width: 580px;
  margin-bottom: 32px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 18px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
}

.button.primary {
  background: var(--gold);
  color: var(--forest-deep);
}

.button.secondary {
  border-color: rgba(255, 255, 255, 0.48);
  color: #fff;
  background: rgba(8, 39, 31, 0.22);
}

.button:hover,
.button:focus-visible {
  transform: translateY(-1px);
}

.image-note {
  position: absolute;
  z-index: 2;
  right: 24px;
  bottom: 14px;
  margin: 0;
  padding: 5px 9px;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(8, 39, 31, 0.64);
  font-size: 12px;
}

.principle-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  color: #fff;
  background: var(--forest);
}

.principle-strip div {
  min-height: 124px;
  padding: 26px clamp(18px, 3vw, 44px);
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.principle-strip strong,
.principle-strip span {
  display: block;
}

.principle-strip strong {
  color: var(--gold);
  font-family: Georgia, serif;
  font-size: 27px;
}

.principle-strip span {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
}

.section {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 110px 0;
}

.intro-section {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 90px;
}

.intro-copy {
  padding-left: 34px;
  border-left: 3px solid var(--gold);
  color: var(--muted);
  font-size: 19px;
}

.section-heading {
  max-width: 780px;
}

.section-heading.centered {
  margin: 0 auto 48px;
  text-align: center;
}

.section-lead {
  color: var(--muted);
  font-size: 17px;
}

.process-section {
  padding-top: 40px;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.process-grid li {
  min-height: 280px;
  padding: 28px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 5px solid var(--leaf);
  border-radius: 4px 4px 14px 14px;
  box-shadow: 0 12px 34px rgba(8, 39, 31, 0.05);
}

.process-grid li:nth-child(2),
.process-grid li:nth-child(5) {
  border-top-color: var(--gold);
}

.process-grid li:nth-child(3) {
  border-top-color: var(--terracotta);
}

.step-number {
  display: inline-block;
  margin-bottom: 44px;
  color: var(--terracotta);
  font-family: Georgia, serif;
  font-size: 28px;
  font-weight: 800;
}

.process-grid p {
  color: var(--muted);
  font-size: 15px;
}

.protection-section {
  width: 100%;
  max-width: none;
  padding: 60px clamp(20px, 6vw, 100px);
  background: var(--cream);
}

.protection-card {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 32px;
  width: min(1000px, 100%);
  margin: 0 auto;
  padding: clamp(32px, 5vw, 64px);
  color: #fff;
  background: var(--terracotta);
  border-radius: 20px 4px 20px 4px;
  box-shadow: var(--shadow);
}

.protection-icon {
  display: grid;
  width: 74px;
  height: 74px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  color: #ffe19a;
  font-size: 30px;
}

.protection-card p:last-child {
  max-width: 780px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 17px;
}

.records-section {
  width: min(1240px, calc(100% - 40px));
}

.live-record-card {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
  gap: clamp(28px, 5vw, 64px);
  margin-bottom: 76px;
  padding: clamp(28px, 5vw, 56px);
  color: #fff;
  background: var(--forest-deep);
  border: 1px solid rgba(244, 184, 63, 0.42);
  border-radius: 22px 6px 22px 6px;
  box-shadow: var(--shadow);
}

.live-record-kicker {
  margin: 0 0 12px;
  color: var(--gold);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.live-record-card h2 {
  max-width: 760px;
  margin-bottom: 16px;
  color: #fff;
  font-size: clamp(28px, 3.5vw, 46px);
}

.live-record-copy > p:not(.live-record-kicker) {
  max-width: 760px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 16px;
}

.live-record-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.live-record-meta > span {
  min-width: 126px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
}

.live-record-meta strong,
.live-record-meta small {
  display: block;
}

.live-record-meta strong {
  color: var(--gold);
  font-family: Georgia, serif;
  font-size: 25px;
}

.live-record-meta small {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
}

.live-record-actions {
  align-self: center;
}

.live-record-button {
  width: 100%;
  color: var(--forest-deep);
  background: var(--gold);
}

.next-record {
  margin-top: 16px;
  padding: 18px;
  color: var(--forest-deep);
  background: #fff4cf;
  border-radius: 12px;
}

.next-record strong,
.next-record > span {
  display: block;
}

.next-record strong {
  font-size: 15px;
}

.next-record > span {
  margin-top: 7px;
  color: #655536;
  font-size: 13px;
}

.records-heading {
  margin-bottom: 28px !important;
}

.demo-notice {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 24px;
  padding: 10px 16px;
  color: #6d4512;
  background: #fff2cc;
  border: 1px solid #f1d68c;
  border-radius: 10px;
  font-size: 14px;
}

.record-browser {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.child-picker {
  padding: 24px 16px;
  background: var(--forest-deep);
}

.picker-label {
  margin: 0 8px 14px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.child-option {
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 8px 0;
  padding: 13px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #fff;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.child-option:hover,
.child-option:focus-visible {
  border-color: rgba(244, 184, 63, 0.52);
  background: rgba(255, 255, 255, 0.06);
}

.child-option.is-active {
  color: var(--forest-deep);
  background: var(--gold);
}

.child-number {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: Georgia, serif;
  font-size: 15px;
  font-weight: 800;
}

.child-option strong,
.child-option small {
  display: block;
}

.child-option strong {
  font-size: 14px;
}

.child-option small {
  margin-top: 2px;
  opacity: 0.72;
  font-size: 12px;
}

.record-panel {
  min-width: 0;
  background: #fff;
}

.record-summary {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 34px;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}

.record-summary p,
.record-summary h3 {
  margin-bottom: 2px;
}

.record-avatar {
  display: grid;
  flex: 0 0 auto;
  width: 92px;
  height: 92px;
  place-items: center;
  border-radius: 50%;
  color: var(--forest-deep);
  background: var(--gold);
  font-family: Georgia, serif;
  font-size: 26px;
  font-weight: 800;
}

.demo-badge {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--terracotta);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.record-status {
  margin-left: auto;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.status-ok {
  color: #174d36;
  background: #dff1e6;
}

.status-excused {
  color: #69460d;
  background: #ffedba;
}

.status-followup {
  color: #7b2e20;
  background: #f7d8d0;
}

.record-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 12px 28px 0;
  border-bottom: 1px solid var(--line);
}

.record-tabs button {
  min-width: 98px;
  padding: 12px 14px;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
}

.record-tabs button[aria-selected="true"] {
  color: var(--forest);
  border-bottom-color: var(--terracotta);
}

.record-content {
  min-height: 340px;
  padding: 30px;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.metric-card {
  padding: 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.metric-card span,
.metric-card strong {
  display: block;
}

.metric-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.metric-card strong {
  margin-top: 7px;
  color: var(--forest);
  font-size: 18px;
}

.progress-block {
  margin-top: 24px;
  padding: 22px;
  background: var(--cream);
  border-radius: 12px;
}

.progress-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 9px;
  font-size: 14px;
  font-weight: 800;
}

.progress-track {
  height: 10px;
  overflow: hidden;
  background: #dce5df;
  border-radius: 999px;
}

.progress-bar {
  height: 100%;
  background: var(--leaf);
  border-radius: inherit;
}

.followup-message {
  margin: 20px 0 0;
  padding: 14px 16px;
  color: var(--forest-deep);
  background: #e8f2ec;
  border-left: 4px solid var(--leaf);
  border-radius: 4px;
  font-size: 14px;
}

.attendance-table,
.support-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.attendance-table th,
.attendance-table td,
.support-table th,
.support-table td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.attendance-table th,
.support-table th {
  color: var(--muted);
  background: var(--cream);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.attendance-mark,
.evidence-state {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.mark-present,
.evidence-complete {
  color: #174d36;
  background: #dff1e6;
}

.mark-excused,
.evidence-pending {
  color: #69460d;
  background: #ffedba;
}

.mark-followup {
  color: #7b2e20;
  background: #f7d8d0;
}

.support-total {
  color: var(--forest);
  font-size: 18px;
  font-weight: 900;
}

.table-note {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.evidence-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.evidence-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.evidence-list strong,
.evidence-list small {
  display: block;
}

.evidence-list small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.record-note {
  margin: 0;
  padding: 18px 28px;
  color: var(--muted);
  background: var(--cream);
  font-size: 13px;
}

.chain-section {
  padding-top: 90px;
  padding-bottom: 90px;
}

.chain-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.chain-list li {
  position: relative;
  padding: 22px 18px;
  border-top: 4px solid var(--gold);
  background: var(--cream);
}

.chain-list li:nth-child(even) {
  background: #fff4df;
}

.chain-list li:not(:last-child)::after {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: -11px;
  width: 22px;
  height: 22px;
  content: "→";
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--terracotta);
  border-radius: 50%;
  font-size: 13px;
}

.chain-list strong,
.chain-list span {
  display: block;
}

.chain-list strong {
  color: var(--forest);
  font-size: 16px;
}

.chain-list span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
}

.privacy-section {
  width: 100%;
  max-width: none;
  padding-right: max(20px, calc((100vw - 1180px) / 2));
  padding-left: max(20px, calc((100vw - 1180px) / 2));
  background: var(--cream);
}

.privacy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.publish-card {
  padding: clamp(28px, 4vw, 48px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.private-card {
  color: #fff;
  background: var(--forest-deep);
  border-color: var(--forest-deep);
}

.card-label {
  display: inline-block;
  margin-bottom: 22px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.card-label.public {
  color: var(--forest);
  background: #e2f3e9;
}

.card-label.private {
  color: #ffe19a;
  background: rgba(244, 184, 63, 0.15);
}

.publish-card ul {
  margin: 24px 0 0;
  padding-left: 22px;
}

.publish-card li {
  margin: 8px 0;
}

.private-card li {
  color: rgba(255, 255, 255, 0.8);
}

.finance-section {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 80px;
  width: 100%;
  max-width: none;
  padding-right: max(20px, calc((100vw - 1180px) / 2));
  padding-left: max(20px, calc((100vw - 1180px) / 2));
  color: #fff;
  background: var(--forest);
}

.finance-copy p:last-child {
  max-width: 720px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 17px;
}

.funding-list {
  display: grid;
  align-content: center;
  gap: 1px;
}

.funding-list span {
  padding: 16px 20px;
  color: var(--forest-deep);
  background: var(--gold);
  font-size: 14px;
  font-weight: 900;
}

.funding-list span:nth-child(4n + 3),
.funding-list span:nth-child(4n + 4) {
  background: #fff2cc;
}

.faq-list {
  width: min(820px, 100%);
  margin: 0 auto;
  border-top: 1px solid var(--line);
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  padding: 24px 42px 24px 4px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 800;
}

.faq-list p {
  padding: 0 44px 22px 4px;
  color: var(--muted);
}

.contact-section {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(42px, 7vw, 92px);
  align-items: start;
  padding-top: 72px;
}

.contact-intro > p:not(.eyebrow) {
  color: var(--muted);
  font-size: 17px;
}

.contact-safety {
  display: grid;
  gap: 5px;
  margin-top: 26px;
  padding: 17px 18px;
  border-left: 4px solid var(--gold);
  color: #654b0d;
  background: #fff7d9;
  font-size: 14px;
}

.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 20px 54px rgba(8, 39, 31, 0.08);
}

.contact-form label:not(.contact-consent) {
  display: grid;
  gap: 7px;
  color: var(--forest);
  font-size: 14px;
  font-weight: 850;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid #bacbc1;
  border-radius: 9px;
  color: var(--ink);
  background: #fbfcfb;
  font: inherit;
}

.contact-form textarea {
  min-height: 168px;
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: 3px solid rgba(241, 181, 61, 0.4);
  border-color: var(--green);
}

.contact-wide {
  grid-column: 1 / -1;
}

.contact-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.contact-consent input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.contact-submit {
  min-height: 50px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--forest);
  font-weight: 900;
  cursor: pointer;
}

.contact-submit:hover,
.contact-submit:focus-visible {
  background: var(--leaf);
}

.contact-submit:focus-visible {
  outline: 3px solid rgba(241, 181, 61, 0.68);
  outline-offset: 3px;
}

.contact-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.closing-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 84px max(20px, calc((100vw - 1180px) / 2));
  color: #fff;
  background: var(--terracotta);
}

.closing-section > div {
  max-width: 760px;
}

.closing-section p:last-child {
  color: rgba(255, 255, 255, 0.82);
}

.status-pill {
  flex: 0 0 auto;
  padding: 14px 20px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  color: #fff;
  font-weight: 900;
}

footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 28px clamp(20px, 4vw, 68px);
  color: rgba(255, 255, 255, 0.64);
  background: var(--forest-deep);
  font-size: 13px;
}

footer p {
  margin: 0;
}

@media (max-width: 980px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .main-nav {
    display: none;
  }

  .principle-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .process-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .process-grid li:last-child {
    grid-column: 1 / -1;
  }

  .record-browser,
  .finance-section,
  .contact-section {
    grid-template-columns: 1fr;
  }

  .live-record-card {
    grid-template-columns: 1fr;
  }

  .child-picker {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .picker-label {
    grid-column: 1 / -1;
  }

  .chain-list {
    grid-template-columns: 1fr;
  }

  .chain-list li:not(:last-child)::after {
    top: auto;
    right: 22px;
    bottom: -11px;
    content: "↓";
  }

  .host-flow {
    grid-template-columns: 1fr;
  }

  .host-process-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .allocation-five {
    grid-template-columns: repeat(2, 1fr);
  }

  .influence-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .demo-app {
    grid-template-columns: 180px minmax(0, 1fr);
  }

  .demo-screen {
    padding: 24px;
  }

  .attendance-stats,
  .evidence-path {
    grid-template-columns: repeat(2, 1fr);
  }

  .allocation-five .allocation-card,
  .allocation-five .allocation-card:first-child,
  .allocation-five .allocation-card:nth-child(2) {
    grid-column: auto;
  }

  .host-flow span {
    margin-bottom: 10px;
  }
}

@media (max-width: 720px) {
  .site-header {
    min-height: 68px;
    padding: 10px 16px;
  }

  .brand small {
    display: none;
  }

  .brand-mark {
    width: 38px;
    height: 38px;
  }

  .brand.brand--hecsis .brand-logo {
    width: 40px;
    height: 40px;
  }

  .header-actions {
    gap: 7px;
  }

  .header-attendance-link {
    min-height: 36px;
    padding: 6px 10px;
    font-size: 12px;
  }

  .language-switch button {
    min-width: 42px;
    padding-inline: 8px;
  }

  .hero {
    min-height: 720px;
    align-items: end;
  }

  .hero-image {
    object-position: 66% center;
  }

  .hero-shade {
    background: linear-gradient(0deg, rgba(4, 25, 19, 0.96) 0%, rgba(8, 39, 31, 0.68) 58%, rgba(8, 39, 31, 0.08) 100%);
  }

  .hero-content {
    width: 100%;
    padding: 180px 22px 84px;
  }

  h1 {
    font-size: clamp(38px, 11vw, 54px);
  }

  .image-note {
    right: 12px;
    bottom: 8px;
  }

  .principle-strip {
    grid-template-columns: 1fr 1fr;
  }

  .principle-strip div {
    min-height: 112px;
    padding: 20px;
  }

  .section {
    width: min(100% - 32px, 1180px);
    padding: 78px 0;
  }

  .live-record-card {
    margin-bottom: 58px;
    padding: 26px 20px;
  }

  .live-record-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .live-record-meta > span {
    min-width: 0;
    padding: 11px 10px;
  }

  .live-record-meta strong {
    font-size: 22px;
  }

  .intro-section,
  .privacy-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .intro-copy {
    padding-left: 20px;
  }

  .process-grid {
    grid-template-columns: 1fr;
  }

  .process-grid li:last-child {
    grid-column: auto;
  }

  .process-grid li {
    min-height: auto;
  }

  .step-number {
    margin-bottom: 22px;
  }

  .protection-section,
  .privacy-section,
  .finance-section {
    width: 100%;
    padding: 64px 20px;
  }

  .protection-card {
    grid-template-columns: 1fr;
    padding: 30px 24px;
  }

  .protection-icon {
    width: 58px;
    height: 58px;
  }

  .record-summary {
    align-items: flex-start;
    padding: 24px;
  }

  .record-avatar {
    width: 72px;
    height: 72px;
    font-size: 20px;
  }

  .record-status {
    margin-left: 0;
  }

  .record-summary {
    flex-wrap: wrap;
  }

  .record-status {
    width: 100%;
    text-align: center;
  }

  .child-picker {
    display: block;
  }

  .metric-grid {
    grid-template-columns: 1fr;
  }

  .record-tabs {
    padding-left: 12px;
    padding-right: 12px;
  }

  .record-tabs button {
    min-width: 84px;
  }

  .record-content {
    padding: 20px 16px;
  }

  .attendance-table,
  .support-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .closing-section {
    flex-direction: column;
    align-items: flex-start;
    padding: 64px 20px;
  }

  .contact-section {
    width: min(100% - 32px, 1180px);
    padding: 64px 0;
  }

  .contact-form {
    grid-template-columns: 1fr;
    padding: 22px 18px;
  }

  .contact-wide {
    grid-column: auto;
  }

  footer {
    flex-direction: column;
  }

  .host-header {
    grid-template-columns: 1fr auto;
  }

  .header-back {
    padding: 7px 10px;
    font-size: 12px;
  }

  .host-hero {
    padding: 78px 22px;
  }

  .website-demo-section {
    padding: 64px 16px;
  }

  .demo-intro,
  .demo-app,
  .screen-explainer {
    grid-template-columns: 1fr;
  }

  .demo-intro {
    gap: 16px;
  }

  .demo-app {
    min-height: 0;
  }

  .demo-sidebar {
    padding: 18px 14px;
  }

  .demo-logo,
  .demo-sidebar > strong,
  .demo-sidebar > small,
  .demo-privacy-note {
    display: none;
  }

  .demo-tabs {
    display: flex;
    gap: 6px;
    margin-top: 0;
    overflow-x: auto;
  }

  .demo-tabs button {
    flex: 0 0 auto;
    width: auto;
    padding: 10px;
  }

  .demo-screen {
    padding: 20px 14px;
  }

  .demo-screen-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .demo-state {
    width: 100%;
    margin-left: 0;
    text-align: center;
  }

  .demo-stat-row,
  .attendance-stats,
  .demo-form-grid,
  .allocation-legend,
  .evidence-path {
    grid-template-columns: 1fr;
  }

  .demo-form-grid .wide {
    grid-column: auto;
  }

  .photo-proof {
    grid-template-columns: 1fr;
  }

  .public-boundary {
    display: block;
  }

  .public-boundary strong {
    display: block;
    margin-bottom: 6px;
  }

  .evidence-total {
    grid-template-columns: 1fr auto;
  }

  .host-section {
    width: min(100% - 32px, 1080px);
    padding: 72px 0;
  }

  .host-intro,
  .host-principle,
  .allocation-grid,
  .allocation-five,
  .host-process-grid,
  .responsibility-grid,
  .control-grid,
  .data-visibility,
  .influence-grid,
  .host-role-grid,
  .host-reflection {
    grid-template-columns: 1fr;
  }

  .monthly-cycle li {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .host-principle,
  .host-records,
  .host-reflection {
    width: 100%;
    padding: 68px 20px;
  }

  .host-principle-mark {
    width: 132px;
    height: 132px;
    font-size: 30px;
  }

  .host-reflection {
    gap: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition: none !important;
  }
}