:root {
  --bg: #f5f7fa;
  --surface: rgba(255, 255, 255, 0.96);
  --surface-strong: #ffffff;
  --surface-muted: rgba(255, 255, 255, 0.9);
  --text: #13365f;
  --text-soft: #5c6f82;
  --text-faint: #7b8c9d;
  --line: rgba(19, 54, 95, 0.1);
  --accent: #0b5f77;
  --accent-strong: #0f4567;
  --accent-soft: #dceeed;
  --sea: #a7d3d8;
  --success: #2e8c74;
  --warning: #d18a3b;
  --shadow: 0 10px 30px rgba(15, 69, 103, 0.04);
  --radius-xl: 28px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 12px;
  --shell: min(1120px, calc(100vw - 40px));
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

.shell {
  width: var(--shell);
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(12px);
  background: rgba(245, 247, 250, 0.9);
  border-bottom: 1px solid rgba(19, 54, 95, 0.07);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.92rem;
}

.brand-mark {
  width: 42px;
  height: 42px;
  position: relative;
  border: 2px solid var(--accent-strong);
  border-radius: 14px 14px 10px 10px;
}

.brand-mark::before,
.brand-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-strong);
}

.brand-mark::before {
  top: 7px;
  width: 18px;
  height: 2px;
  box-shadow: 0 7px 0 var(--accent-strong), 0 14px 0 var(--accent-strong);
}

.brand-mark::after {
  bottom: 6px;
  width: 24px;
  height: 3px;
  border-radius: 999px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  color: var(--text-soft);
  font-size: 0.96rem;
}

.main-nav a:hover,
.main-nav a.is-active,
.text-link:hover,
.preview-footer a:hover {
  color: var(--accent);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(15, 69, 103, 0.08);
}

.button-primary {
  background: var(--accent-strong);
  color: #fff;
}
a.button-primary:hover {
  color: #FFF;
}

.button-secondary {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(11, 95, 119, 0.24);
  color: var(--accent);
}

.button-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--text);
}

.section {
  padding: 72px 0;
}

.section-tint {
  background: #f8fafc;
}

.section-soft {
  background: #f9fbfd;
}

.hero {
  padding: 48px 0 20px;
}

.hero-grid,
.app-shell,
.hero-actions,
.hero-meta,
.trust-grid,
.steps-grid,
.campaign-grid,
.stats-grid,
.timeline,
.faq-grid,
.page-grid,
.registration-layout,
.field-grid,
.dashboard-grid,
.detail-grid,
.admin-layout,
.metric-grid,
.table-grid,
.dual-panel,
.stacked-cards {
  display: grid;
}

.hero-grid {
  grid-template-columns: 1.04fr 0.96fr;
  gap: 36px;
  align-items: center;
}

.eyebrow {
  margin: 0 0 16px;
  color: var(--accent);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: "Iowan Old Style", "Palatino Linotype", serif;
  font-weight: 700;
  letter-spacing: -0.03em;
}

h1 {
  font-size: clamp(2.8rem, 5.4vw, 4.3rem);
  line-height: 0.98;
}

h2 {
  font-size: clamp(1.8rem, 3.3vw, 2.5rem);
  line-height: 1.08;
}

h3 {
  font-size: 1.6rem;
}

h4 {
  font-size: 1.1rem;
  font-family: "Avenir Next", "Segoe UI", sans-serif;
}

.hero-text,
.section-note,
.step-card p,
.campaign-card p,
.stat-card p,
.faq-item p,
.site-footer p,
.preview-points li,
.consent-row p,
.inline-note,
.lede,
.microcopy,
.list-note,
.table-card p {
  color: var(--text-soft);
  line-height: 1.7;
  font-size: 1rem;
}

.hero-actions {
  display: flex;
  gap: 14px;
  margin: 24px 0 28px;
}

.hero-meta {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 640px;
}

.panel,
.hero-meta div,
.trust-grid article,
.step-card,
.stat-card,
.timeline-item,
.faq-item,
.campaign-card,
.page-card,
.metric-card,
.table-card,
.sidebar-card,
.list-card,
.mini-card,
.summary-strip article {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: none;
}

.panel,
.page-card,
.metric-card,
.table-card,
.sidebar-card,
.list-card,
.mini-card {
  border-radius: var(--radius-lg);
  padding: 24px;
}

.hero-meta div {
  padding: 18px 20px;
  border-radius: 20px;
}

.meta-label,
.label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-soft);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero-visual {
  min-height: 520px;
  position: relative;
}

.hero-skyline {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 40px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.28)),
    linear-gradient(180deg, #edf6f5 0%, #dceeed 48%, #b8dde0 100%);
  border: 1px solid rgba(19, 54, 95, 0.08);
  box-shadow: none;
}

.skyline,
.shoreline,
.lighthouse,
.runner {
  position: absolute;
}

.skyline-back {
  inset: auto -6% 34% -8%;
  height: 28%;
  background: linear-gradient(90deg, rgba(19, 54, 95, 0.1), rgba(19, 54, 95, 0.18));
  clip-path: polygon(0 80%, 12% 58%, 27% 64%, 38% 36%, 57% 56%, 73% 28%, 100% 70%, 100% 100%, 0 100%);
}

.skyline-mid {
  inset: auto -12% 24% -4%;
  height: 36%;
  background: linear-gradient(90deg, rgba(70, 137, 151, 0.55), rgba(15, 69, 103, 0.38));
  clip-path: polygon(0 78%, 17% 60%, 31% 68%, 46% 52%, 61% 58%, 79% 30%, 100% 46%, 100% 100%, 0 100%);
}

.shoreline {
  inset: auto -4% 0 -4%;
  height: 48%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 2%, rgba(183, 220, 223, 0.86) 34%, rgba(132, 186, 194, 0.92) 100%);
  clip-path: polygon(0 34%, 18% 43%, 34% 39%, 49% 50%, 67% 45%, 81% 35%, 100% 39%, 100% 100%, 0 100%);
}

.lighthouse {
  right: 14%;
  bottom: 30%;
  width: 110px;
  height: 200px;
  animation: floaty 5.2s ease-in-out infinite;
}

.tower {
  position: absolute;
  right: 35px;
  bottom: 38px;
  width: 26px;
  height: 126px;
  background: #fffdf8;
  border: 2px solid rgba(15, 69, 103, 0.2);
  border-bottom-width: 4px;
  border-radius: 8px 8px 4px 4px;
}

.roof {
  position: absolute;
  right: 28px;
  bottom: 158px;
  width: 40px;
  height: 20px;
  background: var(--accent-strong);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.house {
  position: absolute;
  right: 0;
  bottom: 24px;
  width: 78px;
  height: 48px;
  background: rgba(255, 255, 255, 0.93);
  border: 2px solid rgba(15, 69, 103, 0.15);
  border-radius: 8px;
  box-shadow: -18px -6px 0 0 rgba(21, 95, 119, 0.18);
}

.runner {
  width: 32px;
  height: 76px;
  bottom: 10%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(11, 95, 119, 0.25), rgba(11, 95, 119, 0.8));
  filter: blur(0.5px);
  animation: drift 7s linear infinite;
}

.runner::before,
.runner::after {
  content: "";
  position: absolute;
  background: rgba(11, 95, 119, 0.8);
  border-radius: 999px;
}

.runner::before {
  width: 26px;
  height: 8px;
  top: 18px;
  left: -10px;
  transform: rotate(24deg);
}

.runner::after {
  width: 26px;
  height: 8px;
  top: 42px;
  right: -12px;
  transform: rotate(-34deg);
}

.runner-one {
  left: 18%;
}

.runner-two {
  left: 30%;
  bottom: 12%;
  animation-duration: 8s;
  opacity: 0.75;
}

.trust-grid,
.steps-grid,
.campaign-grid,
.stats-grid,
.page-grid,
.metric-grid,
.table-grid {
  gap: 18px;
}

.trust-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.trust-grid article,
.step-card,
.stat-card,
.timeline-item,
.summary-strip article {
  border-radius: 24px;
  padding: 24px;
}

.section-heading {
  margin-bottom: 26px;
}

.section-heading h2 {
  
}

.split-heading {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: flex-start;
}

.split-heading .section-note {
  max-width: 420px;
  margin: 0;
}

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

.step-card {
  padding-top: 70px;
  position: relative;
}

.step-index,
.mini-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}

.mini-badge {
  position: static;
  width: auto;
  height: auto;
  padding: 6px 12px;
  font-size: 0.82rem;
}

.registration-layout,
.app-shell,
.detail-grid,
.dual-panel {
  gap: 18px;
}

.registration-layout,
.detail-grid,
.dual-panel {
  grid-template-columns: 1.05fr 0.95fr;
}

.mode-switch {
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(11, 95, 119, 0.1);
  margin-bottom: 28px;
}

.mode-button {
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
}

.mode-button.is-active {
  background: var(--accent-strong);
  color: #fff;
}

.registration-form,
.field-grid,
.stacked-cards,
.admin-nav,
.table-list,
.detail-list,
.bullet-list,
.progress-list {
  display: grid;
  gap: 18px;
}

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

label {
  display: grid;
  gap: 10px;
  font-size: 0.95rem;
  font-weight: 600;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid rgba(19, 54, 95, 0.12);
  border-radius: 18px;
  padding: 15px 16px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--text);
}

textarea {
  resize: vertical;
  min-height: 128px;
}

.consent-row,
.form-footer,
.preview-head,
.preview-footer,
.campaign-footer,
.row,
.table-row,
.chip-row,
.title-row,
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.consent-row {
  align-items: flex-start;
}

.checkmark {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  margin-top: 3px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--accent), var(--sea));
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.78);
}

.preview-label,
.preview-badge,
.text-link,
.chip {
  font-size: 0.94rem;
  font-weight: 600;
}

.preview-badge,
.chip-accent {
  color: var(--accent);
}

.preview-card,
.campaign-card,
.table-card,
.page-card {
  overflow: hidden;
}

.preview-photo,
.campaign-visual,
.cover-visual,
.stat-visual {
  min-height: 200px;
  background:
    linear-gradient(135deg, rgba(11, 95, 119, 0.1), rgba(167, 211, 216, 0.18)),
    radial-gradient(circle at 65% 20%, rgba(255, 255, 255, 0.82), transparent 22%),
    linear-gradient(180deg, rgba(124, 180, 190, 0.82), rgba(12, 86, 110, 0.45));
  position: relative;
}

.preview-photo::before,
.campaign-visual::before,
.cover-visual::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 48%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(247, 248, 244, 0.95));
}

.preview-photo::after,
.campaign-visual::after,
.cover-visual::after {
  content: "";
  position: absolute;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  right: 24px;
  bottom: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(11, 95, 119, 0.5));
  box-shadow:
    -28px -18px 0 -8px rgba(255, 255, 255, 0.45),
    -64px -10px 0 -18px rgba(11, 95, 119, 0.3);
}

.preview-content,
.campaign-body {
  padding: 20px;
}

.preview-content p,
.campaign-card p,
.page-card p {
  margin: 10px 0 18px;
}

.progress-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}

.progress-bar,
.progress-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(19, 54, 95, 0.08);
  overflow: hidden;
}

.progress-bar span,
.progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #69b7b3);
}

.preview-footer,
.campaign-footer,
.micro-row {
  margin-top: 14px;
  font-size: 0.92rem;
}

.preview-points,
.bullet-list,
.detail-list {
  margin: 22px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 12px;
}

.campaign-grid,
.stats-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.stat-card strong,
.metric-value {
  display: block;
  margin-bottom: 10px;
  font-family: "Iowan Old Style", "Palatino Linotype", serif;
  font-size: 2.4rem;
  color: var(--accent);
}

.stat-card span,
.metric-card h3 {
  font-weight: 700;
  font-size: 1.05rem;
}

.timeline {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.timeline-item {
  min-height: 156px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.faq-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.faq-item {
  border-radius: 22px;
  padding: 0 22px;
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 0;
  font-weight: 700;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item p {
  margin: 0 0 22px;
}

.site-footer {
  padding: 28px 0 42px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr 0.9fr;
  gap: 22px;
  padding: 32px 0 18px;
  border-top: 1px solid rgba(19, 54, 95, 0.08);
}

.footer-grid h3 {
  font-size: 1rem;
  margin-bottom: 14px;
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  letter-spacing: 0;
}

.footer-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
  color: var(--text-soft);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  color: var(--text-soft);
  font-size: 0.92rem;
}

.page-hero {
  padding: 24px 0 14px;
}

.page-hero .lede {
  max-width: 720px;
  margin-top: 18px;
}

.page-hero h1 {
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  line-height: 1.02;
}

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

.page-card .title-row {
  align-items: flex-start;
  margin-bottom: 12px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(220, 238, 237, 0.6);
  color: var(--accent-strong);
}

.chip-warning {
  background: rgba(209, 138, 59, 0.14);
  color: #9c621e;
}

.chip-success {
  background: rgba(46, 140, 116, 0.12);
  color: var(--success);
}

.chip-danger {
  background: rgba(179, 51, 51, 0.12);
  color: #a73030;
}

.summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.ipk-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 8px;
}

.ipk-stat {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(19, 54, 95, 0.08);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 18px 38px rgba(15, 69, 103, 0.06);
}

.ipk-stat strong {
  display: block;
  margin-bottom: 8px;
  font-size: 2rem;
  font-family: "Iowan Old Style", "Palatino Linotype", serif;
  color: var(--accent-strong);
}

.ipk-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.ipk-step-card {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  border-radius: 24px;
  padding: 24px;
}

.ipk-step-card strong {
  display: block;
  margin-bottom: 10px;
  color: var(--accent-strong);
  font-size: 1.1rem;
}

.note-band {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
  margin-top: 26px;
}

.note-band article {
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(19, 54, 95, 0.08);
  border-radius: 20px;
  padding: 22px;
}

.summary-strip strong {
  display: block;
  font-size: 1.5rem;
  margin-bottom: 8px;
}

.app-shell {
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: start;
}

.sidebar-card,
.list-card,
.mini-card {
  background: var(--surface-muted);
}

.admin-nav a,
.side-links a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  color: var(--text-soft);
}

.admin-nav a.is-active,
.admin-nav a:hover,
.side-links a:hover {
  background: rgba(220, 238, 237, 0.7);
  color: var(--accent-strong);
}

.dashboard-grid {
  grid-template-columns: 1.3fr 0.7fr;
  gap: 18px;
}

.metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

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

.table-card + .table-card,
.stacked-cards > * + * {
  margin-top: 0;
}

.table-head,
.table-row {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr 0.8fr 0.6fr;
  gap: 16px;
  align-items: center;
}

.table-head {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
  color: var(--text-soft);
  font-size: 0.9rem;
}

.table-row {
  padding: 16px 0;
  border-bottom: 1px solid rgba(19, 54, 95, 0.08);
}

.table-row:last-child {
  border-bottom: 0;
}

.avatar-line {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(11, 95, 119, 0.28), rgba(167, 211, 216, 0.78));
}

.stat-visual {
  min-height: 160px;
  border-radius: var(--radius-md);
}

.toolbar {
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.toolbar .field-grid {
  width: 100%;
}

.toolbar input,
.toolbar select {
  min-width: 180px;
}

.page-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.page-tabs a {
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--line);
  color: var(--text-soft);
}

.page-tabs a.is-active {
  background: var(--accent-strong);
  color: #fff;
}

.kpi-list {
  display: grid;
  gap: 12px;
}

.kpi-item {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(19, 54, 95, 0.08);
}

.kpi-item:last-child {
  border-bottom: 0;
}

.cover-visual {
  min-height: 280px;
  border-radius: var(--radius-lg);
}

.empty-state {
  padding: 26px;
  border: 1px dashed rgba(19, 54, 95, 0.22);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.5);
}

.status-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-soft);
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--success);
}

.status-dot.warning {
  background: var(--warning);
}

.cta-card {
  background: linear-gradient(135deg, rgba(15, 69, 103, 0.96), rgba(11, 95, 119, 0.9));
  color: #fff;
}

.cta-card p,
.cta-card .microcopy {
  color: rgba(255, 255, 255, 0.76);
}

.cta-card .button-secondary {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
}

.admin-body {
  background:
    linear-gradient(180deg, #eef3f8 0%, #f7f9fc 100%);
}

.admin-dashboard {
  padding: 24px 0 56px;
}

.admin-frame {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.admin-sidebar-shell {
  position: sticky;
  top: 104px;
  background: #163a63;
  color: rgba(255, 255, 255, 0.88);
  border-radius: 28px;
  padding: 24px 20px;
  box-shadow: none;
}

.admin-sidebar-shell .brand {
  color: #fff;
  margin-bottom: 24px;
}

.admin-sidebar-shell .brand-mark {
  border-color: rgba(255, 255, 255, 0.85);
}

.admin-sidebar-shell .brand-mark::before,
.admin-sidebar-shell .brand-mark::after {
  background: rgba(255, 255, 255, 0.85);
}

.admin-sidebar-title {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.admin-sidebar-nav {
  display: grid;
  gap: 8px;
}

.admin-sidebar-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.admin-sidebar-nav a:hover,
.admin-sidebar-nav a.is-active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.admin-sidebar-meta {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  gap: 12px;
}

.admin-sidebar-meta strong {
  display: block;
  margin-bottom: 4px;
}

.admin-main {
  gap: 16px;
}

.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(19, 54, 95, 0.08);
  border-radius: 24px;
  box-shadow: none;
}

.admin-topbar h1 {
  max-width: none;
  font-size: clamp(2rem, 3vw, 2.6rem);
  line-height: 1.02;
}

.admin-topbar p {
  margin: 8px 0 0;
  color: var(--text-soft);
}

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

.admin-search {
  min-width: 240px;
}

.admin-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.admin-kpi {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(19, 54, 95, 0.08);
  border-radius: 22px;
  padding: 18px;
  box-shadow: none;
}

.admin-kpi-value {
  display: block;
  margin: 12px 0 8px;
  font-size: 2.1rem;
  font-family: "Iowan Old Style", "Palatino Linotype", serif;
  color: var(--accent-strong);
}

.admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.admin-panel-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(19, 54, 95, 0.08);
  border-radius: 24px;
  padding: 18px;
  box-shadow: none;
}

.admin-panel-card h3 {
  font-size: 1.2rem;
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  letter-spacing: 0;
}

.admin-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.admin-mini-table {
  display: grid;
}

.admin-mini-table .table-row,
.admin-mini-table .table-head {
  grid-template-columns: 1.4fr 0.8fr 0.8fr 0.8fr;
}

.admin-feed {
  display: grid;
  gap: 14px;
}

.admin-feed-item {
  display: grid;
  gap: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(19, 54, 95, 0.08);
}

.admin-feed-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.admin-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #edf4fb;
  color: var(--accent-strong);
  font-size: 0.84rem;
  font-weight: 700;
}

.admin-toolbar-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(19, 54, 95, 0.08);
  border-radius: 18px;
}

.admin-toolbar-filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-toolbar-filters label {
  min-width: 180px;
}

.admin-data-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(19, 54, 95, 0.08);
  border-radius: 24px;
  padding: 18px;
  box-shadow: none;
}

.admin-data-card .table-head {
  grid-template-columns: 1.4fr 0.9fr 0.9fr 1fr 0.8fr;
}

.admin-data-card .table-row {
  grid-template-columns: 1.4fr 0.9fr 0.9fr 1fr 0.8fr;
}

.admin-registration-codes-card .table-head,
.admin-registration-codes-card .table-row {
  grid-template-columns: 1.3fr 1fr 0.8fr 1.2fr 0.8fr;
  min-width: 820px;
}

.admin-page-lede {
  margin: 0;
  color: var(--text-soft);
}

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes drift {
  0% { transform: translateX(0); }
  50% { transform: translateX(10px); }
  100% { transform: translateX(0); }
}

@media (max-width: 1040px) {
  .hero-grid,
  .registration-layout,
  .campaign-grid,
  .stats-grid,
  .timeline,
  .footer-grid,
  .trust-grid,
  .steps-grid,
  .faq-grid,
  .page-grid,
  .summary-strip,
  .app-shell,
  .detail-grid,
  .dashboard-grid,
  .metric-grid,
  .dual-panel,
  .admin-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-visual {
    min-height: 460px;
  }

  .split-heading {
    flex-direction: column;
    align-items: flex-start;
  }

  .table-head,
  .table-row {
    grid-template-columns: 1fr 1fr;
  }

  .admin-frame,
  .admin-kpis,
  .admin-grid,
  .ipk-stats,
  .ipk-steps,
  .note-band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-mini-table .table-head,
  .admin-mini-table .table-row,
  .admin-data-card .table-head,
  .admin-data-card .table-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 780px) {
  .header-inner,
  .hero-actions,
  .form-footer,
  .footer-bottom,
  .row,
  .toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .main-nav {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px 18px;
  }

  .hero-grid,
  .hero-meta,
  .registration-layout,
  .campaign-grid,
  .stats-grid,
  .timeline,
  .footer-grid,
  .trust-grid,
  .steps-grid,
  .faq-grid,
  .field-grid,
  .page-grid,
  .summary-strip,
  .app-shell,
  .detail-grid,
  .dashboard-grid,
  .metric-grid,
  .dual-panel,
  .admin-layout,
  .table-head,
  .table-row,
  .admin-frame,
  .admin-kpis,
  .admin-grid,
  .ipk-stats,
  .ipk-steps,
  .note-band {
    grid-template-columns: 1fr;
  }

  h1 {
    
  }

  .section {
    padding: 72px 0;
  }

  .hero {
    padding-top: 34px;
  }

  .hero-visual {
    min-height: 320px;
  }

  .panel,
  .page-card,
  .metric-card,
  .table-card,
  .sidebar-card,
  .list-card,
  .mini-card {
    padding: 22px;
  }

  .mode-switch {
    width: 100%;
  }

  .mode-button {
    width: 100%;
  }

  .admin-topbar,
  .admin-toolbar-card,
  .admin-panel-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-sidebar-shell {
    position: static;
  }

  .admin-mini-table .table-head,
  .admin-mini-table .table-row,
  .admin-data-card .table-head,
  .admin-data-card .table-row {
    grid-template-columns: 1fr;
  }
}

body {
  background:
    radial-gradient(circle at top left, rgba(220, 238, 237, 0.78), transparent 28%),
    linear-gradient(180deg, #f8fbfd 0%, #f4f7fb 100%);
}

.site-header {
  background: rgba(248, 251, 253, 0.82);
  border-bottom: 1px solid rgba(19, 54, 95, 0.06);
}

.header-inner {
  padding: 18px 0;
}

.main-nav {
  gap: 20px;
  font-size: 0.92rem;
}

.landing-hero {
  padding: 40px 0 24px;
}

.landing-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: 42px;
  align-items: center;
}

.landing-copy h1 {
  max-width: 10.5ch;
}

.landing-copy .hero-text {
  max-width: 560px;
  margin: 18px 0 0;
  font-size: 1.08rem;
}

.landing-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.landing-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(19, 54, 95, 0.08);
  background: rgba(255, 255, 255, 0.72);
  color: var(--text-soft);
}

.landing-art {
  position: relative;
}

.landing-illustration {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border: 1px solid rgba(19, 54, 95, 0.07);
  border-radius: 38px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.15)),
    linear-gradient(180deg, #edf6f7 0%, #deefef 42%, #b8d8dc 100%);
}

.floating-card {
  position: absolute;
  z-index: 2;
  min-width: 180px;
  padding: 16px 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(19, 54, 95, 0.08);
  box-shadow: 0 20px 40px rgba(15, 69, 103, 0.08);
}

.floating-card strong {
  display: block;
  font-size: 1.05rem;
  line-height: 1.3;
}

.card-event {
  left: 24px;
  bottom: 32px;
}

.card-total {
  right: 24px;
  top: 28px;
}

.landing-strip-section {
  padding-top: 12px;
}

.landing-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.impact-pill {
  display: grid;
  gap: 8px;
  padding: 20px 22px;
  border-radius: 24px;
  border: 1px solid rgba(19, 54, 95, 0.08);
  background: rgba(255, 255, 255, 0.78);
}

.impact-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #8fd0cc);
}

.impact-pill strong {
  font-size: 1.85rem;
  font-family: "Iowan Old Style", "Palatino Linotype", serif;
  color: var(--accent-strong);
}

.impact-pill span:last-child {
  color: var(--text-soft);
}

.focus-steps,
.featured-campaigns {
  display: grid;
  gap: 18px;
}

.focus-steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.focus-step,
.campaign-feature {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(19, 54, 95, 0.08);
  border-radius: 26px;
}

.focus-step {
  padding: 24px;
}

.focus-step strong {
  display: block;
  margin: 16px 0 10px;
  font-size: 1.08rem;
  color: var(--accent-strong);
}

.focus-step p {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.7;
}

.section-link {
  align-self: center;
  white-space: nowrap;
}

.featured-campaigns {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.campaign-feature {
  overflow: hidden;
}

.campaign-feature .campaign-visual {
  min-height: 220px;
}

.campaign-feature .campaign-body {
  padding: 22px;
}

.campaign-feature h3 {
  margin-top: 12px;
  font-size: 1.55rem;
}

.campaign-feature p {
  margin: 14px 0 18px;
  color: var(--text-soft);
  line-height: 1.72;
}

.cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 34px 38px;
  border-radius: 30px;
  background: linear-gradient(135deg, #143a62, #0b6178);
  color: #fff;
}

.cta-band h2 {
  max-width: 10.5ch;
}

.cta-band .eyebrow {
  color: rgba(255, 255, 255, 0.72);
}

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

.cta-band .button-secondary {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.page-hero {
  padding: 28px 0 8px;
}

.page-hero h1 {
  max-width: 10ch;
}

.page-tabs a,
.mode-switch,
.panel,
.sidebar-card,
.list-card,
.mini-card,
.admin-topbar,
.admin-kpi,
.admin-panel-card {
  box-shadow: 0 10px 30px rgba(15, 69, 103, 0.03);
}

.panel,
.sidebar-card,
.list-card,
.mini-card {
  background: rgba(255, 255, 255, 0.84);
}

.admin-body {
  background:
    linear-gradient(180deg, #edf2f7 0%, #f8fafc 100%);
}

.admin-dashboard {
  padding: 20px 0 56px;
}

.admin-frame {
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 22px;
}

.admin-sidebar-shell {
  top: 92px;
  padding: 22px 18px;
  border-radius: 30px;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.06), transparent 34%),
    #173a62;
}

.admin-sidebar-nav a {
  min-height: 44px;
}

.admin-sidebar-cta {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.admin-sidebar-cta .meta-label {
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.58);
}

.admin-topbar {
  padding: 18px 20px;
}

.admin-search {
  min-width: 280px;
  background: #fff;
}

.admin-kpis {
  gap: 14px;
}

.admin-kpi {
  padding: 20px;
}

.admin-grid {
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.7fr);
  align-items: start;
}

.admin-panel-large {
  min-height: 100%;
}

.admin-feed {
  display: grid;
  gap: 0;
}

.admin-feed-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(19, 54, 95, 0.08);
}

.admin-feed-item:last-child {
  border-bottom: 0;
}

.admin-feed-item strong {
  display: block;
  margin-bottom: 4px;
}

.admin-feed-item span,
.admin-feed-item time {
  color: var(--text-soft);
}

.admin-tag {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(220, 238, 237, 0.72);
  color: var(--accent-strong);
}

.admin-data-card {
  padding-bottom: 10px;
}

.site-footer {
  padding: 40px 0 42px;
}

.footer-grid {
  padding-top: 22px;
}

@media (max-width: 1100px) {
  .landing-shell,
  .featured-campaigns,
  .landing-strip,
  .admin-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .focus-steps,
  .admin-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .cta-band {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 820px) {
  .landing-shell,
  .landing-strip,
  .featured-campaigns,
  .focus-steps,
  .admin-frame,
  .admin-kpis {
    grid-template-columns: 1fr;
  }

  .landing-illustration {
    min-height: 460px;
  }

  .admin-sidebar-shell {
    position: static;
  }

  .admin-topbar,
  .admin-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-search {
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .hero-actions,
  .cta-band-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .landing-illustration {
    min-height: 380px;
  }

  .floating-card {
    min-width: 0;
    max-width: calc(100% - 40px);
  }

  .card-total {
    right: 20px;
    top: 20px;
  }

  .card-event {
    left: 20px;
    bottom: 20px;
  }

  .cta-band {
    padding: 28px 22px;
  }
}

.registration-panel,
.preview-panel {
  align-self: start;
}

.registration-head,
.form-section-head,
.preview-summary,
.admin-status-row,
.admin-donation-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.registration-head {
  margin-bottom: 18px;
}

.registration-head h3 {
  margin-top: 12px;
  font-size: 1.45rem;
}

.registration-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.registration-step {
  padding: 20px;
  border-radius: 22px;
  border: 1px solid rgba(19, 54, 95, 0.08);
  background: rgba(255, 255, 255, 0.65);
}

.registration-step.is-active {
  background: rgba(220, 238, 237, 0.5);
  border-color: rgba(11, 95, 119, 0.16);
}

.registration-step h4 {
  margin: 18px 0 10px;
  font-size: 1rem;
}

.registration-step p {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.7;
}

.form-section {
  display: grid;
  gap: 18px;
  padding: 22px;
  border-radius: 22px;
  border: 1px solid rgba(19, 54, 95, 0.08);
  background: rgba(255, 255, 255, 0.6);
}

.form-section + .form-section {
  margin-top: 4px;
}

.form-section-head h4 {
  font-size: 1rem;
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  letter-spacing: 0;
}

.preview-panel {
  position: sticky;
  top: 96px;
}

.preview-identity {
  display: grid;
  gap: 4px;
}

.preview-identity strong {
  font-size: 1.4rem;
}

.preview-summary {
  margin-top: 16px;
}

.preview-summary article {
  flex: 1;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(19, 54, 95, 0.08);
  background: rgba(255, 255, 255, 0.6);
}

.preview-summary strong {
  display: block;
  margin-top: 8px;
  font-size: 1rem;
}

.admin-status-row {
  margin-top: 2px;
}

.admin-inline-card {
  flex: 1;
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid rgba(19, 54, 95, 0.08);
  background: rgba(255, 255, 255, 0.78);
}

.admin-inline-card strong {
  display: block;
  margin-top: 8px;
  font-size: 1rem;
}

.admin-grid-bottom {
  margin-top: 0;
}

.admin-donation-list {
  display: grid;
  gap: 0;
}

.admin-donation-item {
  padding: 16px 0;
  border-bottom: 1px solid rgba(19, 54, 95, 0.08);
}

.admin-donation-item:last-child {
  border-bottom: 0;
}

.admin-donation-item div {
  display: grid;
  gap: 4px;
}

.admin-donation-item span {
  color: var(--text-soft);
}

@media (max-width: 980px) {
  .registration-steps,
  .admin-status-row {
    grid-template-columns: 1fr;
  }

  .preview-panel {
    position: static;
  }
}

@media (max-width: 780px) {
  .registration-steps,
  .preview-summary,
  .admin-status-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .registration-head,
  .form-section-head,
  .admin-donation-item {
    flex-direction: column;
    align-items: flex-start;
  }
}

.header-utility-link {
  color: var(--text-soft);
}

.site-header {
  position: static;
  background: rgba(255, 255, 255, 0.72);
}

.header-inner {
  padding: 16px 0;
}

.brand {
  gap: 12px;
  font-size: 0.88rem;
}

.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 14px;
}

.main-nav {
  gap: 18px;
  font-size: 0.84rem;
}

.main-nav .button {
  min-height: 42px;
  padding: 0 18px;
}

.landing-hero {
  padding: 22px 0 10px;
}

.landing-shell {
  gap: 18px;
  padding: 30px 32px 12px;
  border: 1px solid rgba(19, 54, 95, 0.07);
  border-radius: 24px 24px 0 0;
  background: rgba(255, 255, 255, 0.88);
}

.landing-copy h1 {
  max-width: 8ch;
  font-size: clamp(3.6rem, 6vw, 5.2rem);
  line-height: 0.95;
}

.landing-copy .hero-text {
  max-width: 450px;
  margin-top: 24px;
  font-size: 1.02rem;
  line-height: 1.6;
}

.hero-actions {
  margin-top: 22px;
}

.hero-actions .button {
  min-height: 48px;
  padding: 0 22px;
}

.landing-art {
  align-self: stretch;
}

.landing-illustration {
  min-height: 380px;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 82% 26%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0) 22%),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 10%, rgba(162, 195, 211, 0.2) 100%);
}

.landing-strip-section {
  padding: 0 0 20px;
}

.landing-strip-compact {
  gap: 18px;
  padding: 0 32px 26px;
  border: 1px solid rgba(19, 54, 95, 0.07);
  border-top: 0;
  border-radius: 0 0 24px 24px;
  background: rgba(255, 255, 255, 0.88);
}

.impact-inline {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
}

.impact-inline strong {
  display: block;
  font-size: 1.05rem;
  color: var(--accent-strong);
}

.impact-inline span:last-child {
  color: var(--text-soft);
  font-size: 0.86rem;
}

.impact-icon {
  width: 28px;
  height: 28px;
  position: relative;
  color: var(--accent-strong);
  flex: 0 0 auto;
}

.impact-runners::before,
.impact-runners::after,
.impact-heart::before,
.impact-fund::before,
.impact-education::before {
  content: "";
  position: absolute;
}

.impact-runners::before {
  inset: 9px 15px 3px 1px;
  border: 2px solid var(--accent-strong);
  border-radius: 10px 10px 8px 8px;
}

.impact-runners::after {
  inset: 3px 6px auto 6px;
  height: 8px;
  border-top: 2px solid var(--accent-strong);
  border-bottom: 2px solid var(--accent-strong);
}

.impact-heart::before {
  width: 16px;
  height: 16px;
  left: 6px;
  top: 7px;
  border: 2px solid var(--accent-strong);
  border-left: 0;
  border-top: 0;
  transform: rotate(45deg);
  border-radius: 2px 2px 6px 2px;
}

.impact-fund::before {
  inset: 5px;
  border: 2px solid var(--accent-strong);
  border-radius: 50%;
}

.impact-education::before {
  left: 3px;
  right: 3px;
  top: 6px;
  bottom: 8px;
  border: 2px solid var(--accent-strong);
  clip-path: polygon(50% 0, 100% 30%, 50% 58%, 0 30%);
}

.focus-steps-inline {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  padding: 0 18px;
}

.focus-step {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: 0;
}

.focus-step .mini-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(19, 54, 95, 0.12);
  border-radius: 999px;
  background: rgba(245, 249, 252, 0.9);
  font-size: 1.05rem;
}

.focus-step strong {
  margin: 0 0 6px;
  font-size: 1rem;
}

.focus-step p {
  font-size: 0.9rem;
  line-height: 1.6;
}

.section-tint {
  background: transparent;
}

.featured-campaigns {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.campaign-feature {
  border-radius: 12px;
  border: 1px solid rgba(19, 54, 95, 0.08);
  background: rgba(255, 255, 255, 0.9);
}

.campaign-feature .campaign-body {
  padding: 16px;
}

.campaign-person {
  display: flex;
  align-items: center;
  gap: 12px;
}

.campaign-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.85), transparent 30%),
    linear-gradient(180deg, rgba(163, 198, 213, 0.9), rgba(67, 113, 150, 0.95));
}

.campaign-feature h3 {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  letter-spacing: 0;
}

.campaign-distance,
.campaign-footer,
.campaign-stats-row span {
  color: var(--text-soft);
  font-size: 0.82rem;
}

.campaign-percent {
  font-weight: 700;
  color: var(--text-soft);
  font-size: 0.86rem;
}

.campaign-progress-line {
  height: 4px;
  margin: 14px 0 10px;
  border-radius: 999px;
  background: rgba(19, 54, 95, 0.08);
  overflow: hidden;
}

.campaign-progress-line span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2d7e97, #58a6bf);
}

.campaign-stats-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.campaign-stats-row strong {
  font-size: 0.9rem;
}

.closing-band {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 28px 32px;
  border: 1px solid rgba(19, 54, 95, 0.07);
  border-radius: 0 0 24px 24px;
  background: rgba(235, 244, 250, 0.65);
}

.closing-band h3 {
  font-size: 1.15rem;
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  letter-spacing: 0;
}

.closing-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(19, 54, 95, 0.08);
  position: relative;
}

.closing-icon::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 2px solid var(--accent-strong);
  clip-path: polygon(50% 0, 100% 30%, 50% 58%, 0 30%);
}

.faq-anchor-only {
  padding-top: 0;
}

.faq-anchor-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  border: 1px solid rgba(19, 54, 95, 0.07);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
}

.faq-anchor-card strong {
  font-size: 0.98rem;
}

.admin-dashboard {
  padding: 18px 0;
}

.admin-frame {
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 0;
  min-height: calc(100vh - 36px);
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(19, 54, 95, 0.08);
}

.admin-sidebar-shell {
  position: static;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 14px;
  border-radius: 0;
  background: linear-gradient(180deg, #12273f 0%, #0b1b2f 100%);
}

.admin-brand-block {
  margin-bottom: 8px;
}

.admin-brand-block .brand {
  color: #fff;
  text-transform: none;
  font-size: 0.8rem;
  letter-spacing: 0;
}

.admin-brand-block .brand-mark {
  width: 30px;
  height: 30px;
  border-color: rgba(255, 255, 255, 0.9);
}

.admin-brand-block .brand-mark::before,
.admin-brand-block .brand-mark::after {
  background: rgba(255, 255, 255, 0.9);
}

.admin-brand-subtitle {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
}

.admin-sidebar-nav {
  gap: 6px;
}

.admin-sidebar-nav a {
  min-height: 40px;
  padding: 0 12px;
  justify-content: flex-start;
  border-radius: 0;
  font-size: 0.88rem;
}

.admin-sidebar-nav a.is-active {
  background: rgba(60, 119, 170, 0.42);
  box-shadow: inset 3px 0 0 #79d0ff;
}

.admin-exit-link {
  margin-top: auto;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.85rem;
}

.admin-main {
  background: #f9fbfd;
}

.admin-topbar {
  padding: 18px 20px;
  border: 0;
  border-bottom: 1px solid rgba(19, 54, 95, 0.06);
  border-radius: 0;
  background: #fff;
}

.admin-topbar-title {
  display: flex;
  align-items: center;
  gap: 14px;
}

.admin-menu-icon,
.admin-top-icon {
  width: 18px;
  height: 18px;
  position: relative;
}

.admin-menu-icon::before,
.admin-menu-icon::after,
.admin-top-icon::before,
.admin-top-icon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
}

.admin-menu-icon::before {
  top: 3px;
  height: 2px;
  background: var(--accent-strong);
  box-shadow: 0 5px 0 var(--accent-strong), 0 10px 0 var(--accent-strong);
}

.admin-top-icon::before {
  top: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--text-soft);
  border-radius: 50%;
}

.admin-top-icon::after {
  top: 0;
  right: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d84d4d;
}

.admin-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #243d61;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
}

.admin-actions {
  gap: 16px;
  align-items: center;
}

.admin-search {
  min-width: 320px;
  min-height: 40px;
  border-radius: 10px;
}

.admin-kpis {
  gap: 14px;
  padding: 18px 18px 0;
}

.admin-kpi {
  position: relative;
  min-height: 180px;
  border-radius: 12px;
  padding: 18px;
  box-shadow: none;
}

.admin-kpi-value {
  margin: 22px 0 14px;
  font-size: 2.2rem;
}

.admin-kpi em {
  display: block;
  margin-top: 8px;
  color: var(--text-faint);
  font-style: normal;
  font-size: 0.82rem;
}

.admin-kpi-growth {
  color: #37a169;
  font-size: 0.86rem;
  font-weight: 700;
}

.admin-kpi-icon {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(32, 78, 124, 0.16);
  border-radius: 50%;
}

.admin-kpi-icon::before {
  content: "";
  position: absolute;
  inset: 11px;
  border: 2px solid rgba(38, 84, 130, 0.82);
  border-radius: 4px;
}

.admin-kpi-runners::before {
  inset: 12px 9px;
  border-radius: 10px;
}

.admin-kpi-heart::before {
  inset: 12px;
  border-left: 0;
  border-top: 0;
  transform: rotate(45deg);
  border-radius: 2px 2px 8px 2px;
}

.admin-kpi-flag::before {
  inset: 10px 14px;
  border-right: 0;
  border-bottom: 0;
}

.admin-grid {
  gap: 14px;
  padding: 14px 18px 0;
  grid-template-columns: minmax(0, 1.2fr) 280px;
}

.admin-panel-card {
  border-radius: 12px;
  box-shadow: none;
  padding: 18px;
}

.admin-panel-head h3 {
  font-size: 1.1rem;
}

.admin-feed-item {
  position: relative;
  padding: 18px 0 18px 28px;
  justify-content: space-between;
}

.admin-feed-badge {
  position: absolute;
  left: 0;
  top: 21px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
}

.admin-feed-green { background: #ddf4e6; border: 1px solid #8dc7a1; }
.admin-feed-amber { background: #fff1db; border: 1px solid #f0b45f; }
.admin-feed-blue { background: #e7f0ff; border: 1px solid #8bb0e7; }

.kpi-item {
  font-size: 0.98rem;
}

.admin-queue-button {
  width: 100%;
  margin-top: 18px;
  justify-content: center;
}

.admin-grid-bottom {
  padding-top: 14px;
  padding-bottom: 18px;
  grid-template-columns: 1fr;
}

.admin-toolbar-card,
.admin-data-card {
  margin: 14px 18px 0;
}

.admin-data-card .table-row p {
  margin: 6px 0 0;
  color: var(--text-soft);
  font-size: 0.86rem;
  line-height: 1.5;
}

.admin-mini-table .table-head,
.admin-mini-table .table-row {
  grid-template-columns: 1.15fr 1.3fr 0.7fr 0.9fr 0.75fr;
}

.table-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
}

.table-status.is-success {
  background: #e7f7ed;
  color: #2f8b59;
}

.table-status.is-waiting {
  background: #fff0d9;
  color: #b17216;
}

@media (max-width: 1100px) {
  .landing-shell,
  .landing-strip-compact,
  .featured-campaigns,
  .focus-steps-inline,
  .closing-band,
  .admin-kpis,
  .admin-grid {
    grid-template-columns: 1fr 1fr;
  }

  .admin-grid-bottom,
  .closing-band,
  .faq-anchor-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .landing-shell,
  .landing-strip-compact,
  .focus-steps-inline,
  .featured-campaigns,
  .admin-frame,
  .admin-kpis,
  .admin-grid,
  .admin-grid-bottom {
    grid-template-columns: 1fr;
  }

  .admin-frame {
    min-height: auto;
  }

  .admin-search {
    min-width: 0;
  }

  .faq-anchor-card {
    align-items: flex-start;
  }
}

:root {
  --shell: calc(100vw - 32px);
}

.shell {
  width: min(var(--shell), 100%);
}

.public-body,
.admin-body {
  min-height: 100vh;
}

.public-body {
  background:
    linear-gradient(180deg, #eef5fa 0%, #f7fbfe 100%);
}

.site-header {
  padding: 0 8px;
}

.landing-hero .shell,
.landing-strip-section .shell,
.section .shell {
  max-width: none;
}

.landing-shell,
.landing-strip-compact,
.closing-band,
.faq-anchor-card {
  margin-left: 8px;
  margin-right: 8px;
}

.landing-shell {
  grid-template-columns: minmax(520px, 1.02fr) minmax(520px, 0.98fr);
  min-height: 560px;
  padding: 48px 48px 12px;
}

.landing-copy {
  max-width: 560px;
}

.landing-copy h1 {
  font-size: clamp(4.4rem, 6.5vw, 6.2rem);
  max-width: 7.6ch;
}

.landing-illustration {
  min-height: 420px;
}

.landing-strip-compact {
  padding: 4px 48px 28px;
}

.impact-inline {
  justify-content: center;
}

.focus-steps-inline,
.featured-campaigns {
  padding-left: 20px;
  padding-right: 20px;
}

.focus-steps-inline {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
}

.featured-campaigns {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.closing-band {
  grid-template-columns: 92px minmax(0, 1fr) auto;
  padding: 34px 40px;
}

.closing-icon {
  width: 84px;
  height: 84px;
}

.admin-dashboard {
  padding: 16px;
}

.admin-frame {
  width: 100%;
  min-height: calc(100vh - 32px);
  grid-template-columns: 176px minmax(0, 1fr);
}

.admin-main {
  min-width: 0;
}

.admin-topbar,
.admin-kpis,
.admin-grid,
.admin-toolbar-card,
.admin-data-card {
  width: 100%;
}

.admin-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
}

.admin-grid-bottom {
  grid-template-columns: 1fr;
}

.admin-mini-table .table-head,
.admin-mini-table .table-row {
  grid-template-columns: 1.1fr 1.45fr 0.7fr 0.95fr 0.8fr;
}

@media (max-width: 1280px) {
  .landing-shell {
    grid-template-columns: minmax(0, 1fr) minmax(440px, 0.92fr);
    padding: 40px 36px 12px;
  }

  .landing-strip-compact,
  .closing-band {
    padding-left: 36px;
    padding-right: 36px;
  }
}

/* Conventional admin dashboard layout */
.admin-dashboard-standard {
  min-height: 100vh;
  padding: 0;
  background: #f4f6f9;
}

.admin-frame-standard {
  display: block;
  width: 100%;
  min-height: 100vh;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.admin-frame-standard .admin-sidebar-shell {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  width: 248px;
  height: 100vh;
  padding: 24px 18px;
  background: #17263c;
  overflow-y: auto;
}

.admin-frame-standard .admin-brand-block {
  padding: 0 8px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-frame-standard .admin-brand-block .brand {
  font-size: 0.92rem;
}

.admin-frame-standard .admin-brand-subtitle {
  margin: 6px 0 0 42px;
}

.admin-frame-standard .admin-sidebar-nav {
  margin-top: 10px;
}

.admin-frame-standard .admin-sidebar-nav a {
  min-height: 46px;
  padding: 0 14px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.72);
}

.admin-frame-standard .admin-sidebar-nav a:hover,
.admin-frame-standard .admin-sidebar-nav a.is-active {
  background: #29496f;
  color: #fff;
  box-shadow: none;
}

.admin-frame-standard .admin-exit-link {
  padding: 12px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-main-standard {
  width: calc(100% - 248px);
  min-height: 100vh;
  margin-left: 248px;
  padding-bottom: 32px;
  background: #f4f6f9;
}

.admin-topbar-standard {
  min-height: 104px;
  padding: 22px 28px;
  border-bottom: 1px solid #e4e8ee;
  background: #fff;
}

.admin-topbar-copy h1 {
  margin: 3px 0 4px;
  max-width: none;
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  font-size: 1.65rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.admin-topbar-copy p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.92rem;
}

.admin-overline {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.admin-topbar-standard .admin-actions {
  flex-wrap: nowrap;
}

.admin-topbar-standard .admin-search {
  width: min(330px, 28vw);
  min-width: 210px;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #f9fafb;
}

.admin-topbar-standard .button {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  white-space: nowrap;
}

.admin-kpis-standard {
  gap: 18px;
  padding: 24px 28px 0;
}

.admin-kpis-standard .admin-kpi {
  min-height: 148px;
  padding: 20px;
  border: 1px solid #e3e7ec;
  border-radius: 10px;
  background: #fff;
}

.admin-kpis-standard .admin-kpi-value {
  margin: 14px 0 12px;
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  font-size: clamp(1.65rem, 2.4vw, 2.15rem);
  letter-spacing: -0.04em;
}

.admin-kpis-standard .admin-kpi em {
  display: inline;
  margin-left: 8px;
}

.admin-highlights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 18px 28px 0;
}

.admin-highlight-card {
  padding: 16px 18px;
  border: 1px solid #e3e7ec;
  border-radius: 10px;
  background: #fff;
}

.admin-highlight-card .label {
  margin-bottom: 7px;
}

.admin-highlight-card strong {
  font-size: 0.95rem;
}

.admin-grid-standard {
  gap: 18px;
  padding: 18px 28px 0;
  grid-template-columns: minmax(0, 1.65fr) minmax(260px, 0.65fr);
}

.admin-grid-standard.admin-grid-bottom {
  grid-template-columns: 1fr;
  padding-bottom: 0;
}

.admin-grid-standard .admin-panel-card {
  margin: 0;
  padding: 20px;
  border: 1px solid #e3e7ec;
  border-radius: 10px;
  background: #fff;
}

.admin-grid-standard .admin-panel-head {
  margin-bottom: 12px;
}

.admin-grid-standard .admin-panel-head h3 {
  font-size: 1rem;
}

.admin-grid-standard .admin-feed-item {
  min-height: 64px;
  padding: 14px 0 14px 28px;
}

.admin-grid-standard .admin-feed-item strong {
  font-size: 0.9rem;
}

.admin-grid-standard .admin-feed-item span {
  font-size: 0.82rem;
}

.admin-grid-standard .admin-feed-badge {
  top: 17px;
}

.admin-side-card .kpi-item {
  padding: 15px 0;
}

.admin-side-card .admin-queue-button {
  border-radius: 8px;
}

.admin-grid-standard .admin-mini-table {
  overflow-x: auto;
}

.admin-grid-standard .admin-mini-table .table-head,
.admin-grid-standard .admin-mini-table .table-row {
  min-width: 760px;
}

.admin-toolbar-standard {
  width: auto;
  margin: 22px 28px 0;
  padding: 18px 20px;
  border: 1px solid #e3e7ec;
  border-radius: 10px;
  background: #fff;
}

.admin-toolbar-standard .admin-toolbar-filters {
  align-items: end;
}

.admin-toolbar-standard label {
  gap: 8px;
  color: var(--text-soft);
  font-size: 0.78rem;
}

.admin-toolbar-standard select {
  min-height: 42px;
  padding: 9px 12px;
  border-radius: 8px;
  background: #f9fafb;
}

.admin-data-standard {
  width: auto;
  margin: 18px 28px 0;
  padding: 20px;
  overflow-x: auto;
  border: 1px solid #e3e7ec;
  border-radius: 10px;
  background: #fff;
}

.admin-form-card {
  margin-bottom: 22px;
}

.admin-inline-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: end;
}

.admin-inline-form label {
  display: grid;
  gap: 7px;
  color: var(--text-soft);
  font-size: 0.82rem;
  font-weight: 700;
}

.admin-inline-form input,
.admin-inline-form select {
  width: 100%;
  border: 1px solid #d7e1e8;
  border-radius: 10px;
  padding: 12px 13px;
  color: #173b55;
  background: #fff;
}

.admin-inline-form-wide {
  grid-column: span 2;
}

.admin-data-standard .table-head,
.admin-data-standard .table-row {
  min-width: 820px;
}

.admin-campaigns-card .table-head,
.admin-campaigns-card .table-row {
  grid-template-columns: 1.4fr 0.8fr 0.85fr 0.9fr 0.8fr 0.75fr;
  min-width: 980px;
}

.admin-data-standard .table-head {
  color: var(--text-faint);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.admin-data-standard .table-row {
  min-height: 68px;
}

.admin-data-standard .chip {
  justify-content: center;
  white-space: nowrap;
}

.admin-campaign-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-campaign-actions .button {
  min-height: 38px;
  padding: 9px 12px;
}

.admin-campaign-actions .button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.admin-campaign-detail {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e3e7ec;
}

.admin-campaign-detail-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.admin-campaign-detail-grid img {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #e3e7ec;
}

.admin-campaign-detail-grid p {
  margin: 14px 0;
  color: #173b55;
  line-height: 1.6;
}

.admin-campaign-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}

.admin-campaign-meta div {
  border: 1px solid #e3e7ec;
  border-radius: 10px;
  padding: 10px 12px;
  background: #f8fbfc;
}

.admin-campaign-meta dt {
  color: var(--text-faint);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-campaign-meta dd {
  margin: 4px 0 0;
  color: #173b55;
  font-weight: 800;
}

.admin-campaign-link {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.admin-runner-detail {
  margin-bottom: 18px;
}

.admin-runner-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.admin-runner-detail-grid div {
  min-width: 0;
  border: 1px solid #e3e7ec;
  border-radius: 10px;
  padding: 12px;
  background: #f8fbfc;
}

.admin-runner-detail-grid span {
  display: block;
  margin-bottom: 5px;
  color: var(--text-faint);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-runner-detail-grid strong {
  display: block;
  overflow-wrap: anywhere;
  color: #173b55;
  font-size: 0.95rem;
}

.admin-table-runners .table-head,
.admin-table-runners .table-row {
  grid-template-columns: 1.35fr 0.5fr 0.75fr 0.65fr 0.75fr 0.7fr 0.55fr;
}

.admin-table-supporters .table-head,
.admin-table-supporters .table-row {
  grid-template-columns: 1.45fr 0.55fr 0.85fr 0.8fr 0.75fr 0.55fr;
}

.admin-cell-note {
  display: block;
  margin-top: 4px;
  color: var(--text-soft);
  font-size: 0.78rem;
}

.admin-kpi-warning {
  color: var(--warning);
  font-size: 0.86rem;
  font-weight: 700;
}

.admin-settings-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 20px;
  padding: 24px 28px 0;
}

.admin-settings-nav {
  position: sticky;
  top: 24px;
  align-self: start;
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid #e3e7ec;
  border-radius: 10px;
  background: #fff;
}

.admin-settings-nav a {
  padding: 12px 14px;
  border-radius: 7px;
  color: var(--text-soft);
  font-size: 0.9rem;
}

.admin-settings-nav a:hover,
.admin-settings-nav a.is-active {
  background: #edf3f8;
  color: var(--accent-strong);
  font-weight: 700;
}

.admin-settings-content {
  display: grid;
  gap: 18px;
}

.admin-settings-card {
  display: grid;
  gap: 18px;
  padding: 22px;
  border: 1px solid #e3e7ec;
  border-radius: 10px;
  background: #fff;
  scroll-margin-top: 20px;
}

.admin-settings-card h3 {
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  font-size: 1rem;
  letter-spacing: 0;
}

.admin-settings-card input,
.admin-settings-card select {
  min-height: 44px;
  border-radius: 8px;
  background: #f9fafb;
}

.admin-setting-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid #edf0f3;
}

.admin-setting-switch:last-child {
  border-bottom: 0;
}

.admin-setting-switch div {
  display: grid;
  gap: 5px;
}

.admin-setting-switch span {
  color: var(--text-soft);
  font-size: 0.85rem;
}

.setting-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #ccd4dd;
  cursor: pointer;
}

.setting-toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 160ms ease;
}

.setting-toggle.is-on {
  background: var(--success);
}

.setting-toggle.is-on::after {
  transform: translateX(20px);
}

@media (max-width: 1100px) {
  .admin-frame-standard {
    display: block;
  }

  .admin-frame-standard .admin-sidebar-shell {
    width: 210px;
  }

  .admin-main-standard {
    width: calc(100% - 210px);
    margin-left: 210px;
  }

  .admin-topbar-standard {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-topbar-standard .admin-actions {
    width: 100%;
  }

  .admin-topbar-standard .admin-search {
    width: 100%;
  }

  .admin-kpis-standard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-settings-layout {
    grid-template-columns: 170px minmax(0, 1fr);
  }

  .admin-runner-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-campaign-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .admin-dashboard-standard {
    padding: 0;
  }

  .admin-frame-standard {
    display: block;
  }

  .admin-frame-standard .admin-sidebar-shell {
    position: static;
    width: 100%;
    height: auto;
  }

  .admin-main-standard {
    width: 100%;
    margin-left: 0;
  }

  .admin-frame-standard .admin-sidebar-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-frame-standard .admin-exit-link {
    margin-top: 12px;
  }

  .admin-topbar-standard .admin-actions {
    flex-wrap: wrap;
  }

  .admin-topbar-standard .admin-search {
    min-width: 100%;
  }

  .admin-highlights,
  .admin-grid-standard {
    grid-template-columns: 1fr;
  }

  .admin-toolbar-standard {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-inline-form {
    grid-template-columns: 1fr;
  }

  .admin-inline-form-wide {
    grid-column: auto;
  }

  .admin-settings-layout {
    grid-template-columns: 1fr;
  }

  .admin-runner-detail-grid {
    grid-template-columns: 1fr;
  }

  .admin-campaign-meta {
    grid-template-columns: 1fr;
  }

  .admin-settings-nav {
    position: static;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .admin-topbar-standard,
  .admin-kpis-standard,
  .admin-highlights,
  .admin-grid-standard,
  .admin-settings-layout {
    padding-left: 16px;
    padding-right: 16px;
  }

  .admin-toolbar-standard,
  .admin-data-standard {
    margin-left: 16px;
    margin-right: 16px;
  }

  .admin-kpis-standard {
    grid-template-columns: 1fr;
  }

  .admin-frame-standard .admin-sidebar-nav {
    grid-template-columns: 1fr;
  }

  .admin-topbar-standard .admin-actions .button {
    width: 100%;
  }

  .admin-settings-nav {
    grid-template-columns: 1fr 1fr;
  }
}

/* Urla'da Biriz landing page */
.brand-logo {
  display: block;
  width: 64px;
  height: 58px;
  object-fit: contain;
  object-position: left center;
}

.brand-name {
  color: #0a294f;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.04em;
}

.public-body {
  --landing-navy: #092c54;
  --landing-teal: #087180;
  --landing-muted: #5d7086;
  --landing-line: #dce5ec;
  color: var(--landing-navy);
  background: #fff;
}

.public-body .site-header {
  position: relative;
  padding: 0;
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid #e6edf2;
  backdrop-filter: none;
}

.public-body .header-inner {
  width: min(1180px, calc(100vw - 64px));
  min-height: 82px;
  padding: 10px 0;
}

.public-body .main-nav {
  gap: clamp(20px, 3vw, 42px);
  color: #314d69;
  font-size: 0.88rem;
}

.public-body .main-nav a {
  white-space: nowrap;
}

.public-body .main-nav a.is-active {
  color: var(--landing-teal);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.nav-dropdown-toggle svg {
  width: 14px;
  height: 14px;
  transition: transform 160ms ease;
}

.nav-dropdown.is-active > .nav-dropdown-toggle,
.nav-dropdown-toggle:hover {
  color: var(--landing-teal);
}

.nav-dropdown-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 12px);
  left: 50%;
  display: grid;
  width: 220px;
  padding: 10px;
  visibility: hidden;
  opacity: 0;
  transform: translate(-50%, -8px);
  border: 1px solid #dce5ec;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(9, 44, 84, 0.15);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 14px;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, 0);
}

.public-body .nav-dropdown-menu a {
  padding: 9px 12px;
  border-radius: 7px;
  color: #314d69;
}

.public-body .nav-dropdown-menu a:hover,
.public-body .nav-dropdown-menu a.is-active {
  color: #086676;
  background: #edf6f6;
}

.public-body .registered-runners-link.is-active {
  color: var(--landing-teal);
}

.mobile-nav-toggle,
.mobile-site-nav {
  display: none;
}

.public-body .button {
  min-height: 48px;
  padding: 0 24px;
  border-radius: 4px;
  font-size: 0.94rem;
  font-weight: 700;
}

.public-body .button-primary {
  background: linear-gradient(180deg, #147988 0%, #086676 100%);
  box-shadow: 0 4px 10px rgba(8, 103, 119, 0.18);
}

.public-body .button-secondary {
  background: rgba(255, 255, 255, 0.88);
  border-color: #8fb4bf;
  color: #0a6172;
}

.public-body main {
  overflow: hidden;
}

.public-body .section {
  padding: 0;
}

.public-body .section .shell {
  width: min(1180px, calc(100vw - 64px));
  max-width: 1180px;
}

.public-body .landing-hero {
  position: relative;
  background: #fff;
}

.public-body .landing-shell {
  position: relative;
  display: block;
  min-height: 465px;
  margin: 0 auto;
  padding: 46px 0 30px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.public-body .landing-shell::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: -5vw;
  bottom: 0;
  left: 25%;
  background:
    linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.96) 8%, rgba(255, 255, 255, 0.18) 34%, rgba(255, 255, 255, 0) 54%),
    url("images/urla-runners-hero.png") right center / auto 100% no-repeat;
  pointer-events: none;
}

.public-body .landing-copy {
  position: relative;
  z-index: 1;
  max-width: 530px;
}

.public-body .landing-copy h1 {
  max-width: 9.2ch;
  color: #061f3d;
  font-family: "Iowan Old Style", "Baskerville", "Palatino Linotype", serif;
  font-size: clamp(4rem, 5.5vw, 5rem);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.055em;
}

.public-body .landing-copy .hero-text {
  max-width: 485px;
  margin: 28px 0 0;
  color: var(--landing-muted);
  font-size: 1.04rem;
  line-height: 1.58;
}

.public-body .hero-actions {
  display: flex;
  gap: 24px;
  margin: 30px 0 0;
}

.public-body .landing-art {
  display: none;
}

.public-body .landing-strip-section {
  position: relative;
  z-index: 2;
  padding: 0 0 30px;
  background: #fff;
}

.public-body .landing-strip-compact {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 auto;
  padding: 25px 28px;
  border: 0;
  border-radius: 4px;
  background: #fbfcfe;
  box-shadow: 0 6px 24px rgba(15, 58, 96, 0.035);
}

.public-body .impact-inline {
  justify-content: center;
  gap: 17px;
  padding: 0 12px;
}

.public-body .impact-inline strong {
  color: #071f3e;
  font-size: clamp(1.45rem, 2.1vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.04em;
}

.public-body .impact-inline span:last-child {
  margin-top: 4px;
  color: #526a84;
  font-size: 0.86rem;
}

.public-body .impact-icon {
  width: 38px;
  height: 38px;
  color: #0f4b7f;
}

.public-body .impact-runners::before {
  inset: 12px 20px 3px 1px;
}

.public-body .impact-runners::after {
  inset: 4px 7px auto;
  height: 11px;
}

.public-body .impact-heart::before {
  width: 21px;
  height: 21px;
  left: 7px;
  top: 8px;
}

.public-body .impact-fund::before {
  inset: 4px;
}

.public-body .impact-education::before {
  left: 2px;
  right: 2px;
  top: 7px;
  bottom: 7px;
}

.public-body main > .section:not(.landing-hero):not(.landing-strip-section) {
  padding: 25px 0 34px;
  background: #fff;
}

.public-body .section-heading {
  margin: 0 0 23px;
}

.public-body .section-heading h2 {
  max-width: none;
  color: #092d56;
  font-family: "Iowan Old Style", "Baskerville", "Palatino Linotype", serif;
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: -0.035em;
}

.public-body .focus-steps-inline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px;
  padding: 0;
}

.public-body .focus-step {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 18px;
  padding: 0;
}

.public-body .focus-step .mini-badge {
  width: 58px;
  height: 58px;
  border-color: #d6e2eb;
  background: #f7fafc;
  color: #0c3764;
  font-family: "Iowan Old Style", "Baskerville", serif;
  font-size: 1.55rem;
}

.public-body .focus-step strong {
  display: block;
  margin: 7px 0 5px;
  color: #122e4d;
  font-size: 0.95rem;
}

.public-body .focus-step p {
  margin: 0;
  color: #5a6d80;
  font-size: 0.84rem;
  line-height: 1.5;
}

.public-body .step-arrow {
  position: absolute;
  top: 17px;
  right: -32px;
  width: 22px;
  height: 22px;
  color: #b9c8d4;
}

.public-body #kampanyalar {
  padding-top: 28px;
  border-top: 1px solid #e4eaf0;
}

.public-body #kampanyalar .split-heading {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.public-body .section-link,
.public-body .campaign-footer .text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #1c5e93;
  font-size: 0.82rem;
  font-weight: 600;
}

.public-body .section-link svg,
.public-body .campaign-footer svg {
  width: 17px;
  height: 17px;
}

.public-body .featured-campaigns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  padding: 0;
}

.public-body .campaign-feature {
  min-width: 0;
  border: 1px solid #dfe6ec;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(21, 61, 94, 0.025);
}

.public-body .campaign-feature .campaign-body {
  padding: 23px 24px 0;
}

.public-body .campaign-person {
  gap: 16px;
}

.public-body .campaign-avatar {
  width: 62px;
  height: 62px;
  border: 3px solid #edf3f6;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0) 46%, rgba(7, 65, 100, 0.34) 47% 52%, rgba(255, 255, 255, 0) 53%),
    radial-gradient(circle at 55% 38%, #f0d4bd 0 10%, transparent 11%),
    linear-gradient(165deg, #b8d4e1 0 52%, #6a91a8 53% 100%);
}

.public-body .campaign-feature:nth-child(2) .campaign-avatar {
  background:
    linear-gradient(180deg, transparent 48%, rgba(34, 76, 96, 0.28) 49%),
    linear-gradient(155deg, #d7e7ed 0 55%, #7396aa 56% 100%);
}

.public-body .campaign-feature:nth-child(3) .campaign-avatar {
  background:
    linear-gradient(80deg, transparent 44%, #1f3241 45% 53%, transparent 54%),
    linear-gradient(155deg, #eee7dd 0 55%, #b6876f 56% 100%);
}

.public-body .campaign-feature h3 {
  margin-bottom: 6px;
  color: #102c4a;
  font-size: 0.92rem;
  font-weight: 600;
}

.public-body .campaign-percent {
  align-self: end;
  padding-bottom: 2px;
  color: #65778b;
}

.public-body .campaign-progress-line {
  height: 5px;
  margin: 27px 0 12px;
  background: #e5ecef;
}

.public-body .campaign-progress-line span {
  background: #0e7780;
}

.public-body .campaign-stats-row {
  padding-bottom: 20px;
}

.public-body .campaign-stats-row strong {
  color: #123552;
  font-size: 0.92rem;
}

.public-body .campaign-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 -24px;
  padding: 17px 24px;
  border-top: 1px solid #edf1f4;
}

.public-body .supporter-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.public-body .supporter-count svg {
  color: #315f88;
}

.public-body #etki {
  padding: 26px 0 0;
  background: linear-gradient(90deg, #edf7fb 0%, #f5fbfd 50%, #edf7fb 100%);
}

.public-body #etki .shell {
  width: 100%;
  max-width: none;
}

.public-body .closing-band {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) auto;
  gap: 30px;
  width: min(1180px, calc(100vw - 64px));
  margin: 0 auto;
  padding: 36px 26px 42px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.public-body .closing-icon {
  width: 84px;
  height: 84px;
  background: rgba(255, 255, 255, 0.86);
}

.public-body .closing-icon::before {
  display: none;
}

.public-body .closing-icon svg {
  position: absolute;
  inset: 20px;
  width: 44px;
  height: 44px;
  color: #0f4b7f;
}

.public-body .closing-band h3 {
  max-width: 650px;
  color: #153859;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  font-weight: 500;
  line-height: 1.35;
}

/* Urla'da BirİZ content pages */
.content-page-body main {
  overflow: visible;
}

.content-page-hero {
  padding: 66px 0 58px;
  background:
    radial-gradient(circle at 82% 20%, rgba(117, 189, 195, 0.24), transparent 25%),
    linear-gradient(135deg, #f6fbfb 0%, #eef6f7 100%);
  border-bottom: 1px solid #dfeaec;
}

.content-page-hero .shell,
.content-page-section .shell {
  width: min(1120px, calc(100vw - 64px));
}

.content-page-hero h1 {
  max-width: 780px;
  color: #061f3d;
  font-size: clamp(2.8rem, 5vw, 4.4rem);
  font-weight: 400;
}

.content-page-hero > .shell > p:last-child {
  max-width: 720px;
  margin: 22px 0 0;
  color: #526b80;
  font-size: 1.08rem;
  line-height: 1.7;
}

.content-page-section {
  padding: 64px 0 90px;
  background: #f8fafc;
}

.content-page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 32px;
  align-items: start;
}

.content-page-card,
.content-page-aside {
  border: 1px solid #e1e9ef;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(9, 44, 84, 0.06);
}

.content-page-card {
  min-width: 0;
  padding: clamp(28px, 5vw, 56px);
  color: #425e76;
  font-size: 1rem;
  line-height: 1.78;
}

.content-page-card h2 {
  margin: 40px 0 16px;
  color: #092c54;
  font-size: clamp(1.55rem, 3vw, 2rem);
}

.content-page-card h2:first-child {
  margin-top: 0;
}

.content-page-card p {
  margin: 0 0 18px;
}

.content-page-card ul,
.content-page-card ol {
  margin: 0 0 24px;
  padding-left: 22px;
}

.content-page-card li + li {
  margin-top: 10px;
}

.content-page-card a:not(.content-action-link) {
  color: #087180;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.content-page-card blockquote {
  margin: 32px 0 0;
  padding: 22px 26px;
  border-left: 4px solid #087180;
  border-radius: 0 12px 12px 0;
  color: #153859;
  background: #edf6f6;
  font-family: "Iowan Old Style", "Palatino Linotype", serif;
  font-size: 1.3rem;
}

.content-page-card img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 12px 0;
  border-radius: 12px;
}

.content-page-card .imported-table {
  overflow-x: auto;
  margin: 18px 0 26px;
}

.content-page-card table {
  width: 100%;
  border-collapse: collapse;
}

.content-page-card th,
.content-page-card td {
  padding: 12px 14px;
  border: 1px solid #dce7ec;
  text-align: left;
  vertical-align: top;
}

.content-page-card th {
  color: #092c54;
  background: #f5f9fa;
}

.content-page-aside {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 12px;
  padding: 26px;
}

.content-page-aside strong {
  color: #092c54;
  font-size: 1.12rem;
}

.content-page-aside span {
  color: #5d7086;
  line-height: 1.5;
}

.content-page-aside .button {
  width: 100%;
  margin-top: 8px;
}

.content-link-grid,
.archive-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.content-page-card .content-link-grid a,
.archive-grid a {
  display: grid;
  gap: 7px;
  padding: 22px;
  border: 1px solid #dce7ec;
  border-radius: 12px;
  color: #153859;
  background: #fbfdfd;
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease;
}

.content-page-card .content-link-grid a:hover,
.archive-grid a:hover {
  border-color: #75aeb6;
  transform: translateY(-2px);
}

.content-link-grid strong,
.archive-grid strong {
  color: #092c54;
  font-size: 1.06rem;
}

.content-link-grid span,
.archive-grid small {
  color: #647b90;
  line-height: 1.5;
}

.content-action-link {
  display: inline-flex;
  position: relative;
  z-index: 1;
  margin: 8px 0 24px;
  padding: 12px 16px;
  border: 1px solid #8fb4bf;
  border-radius: 8px;
  color: #086676;
  font-weight: 700;
  background: #f4fafa;
}

.partners-heading {
  text-align: center;
}

.partners-logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px;
  align-items: center;
  margin: 24px 0 36px;
}

.partners-logo-grid img {
  width: 100%;
  max-width: 180px;
  max-height: 108px;
  margin: 0 auto;
  object-fit: contain;
}

.partner-logo-monochrome {
  filter: brightness(0);
}

.solution-partners-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
  margin: 24px 0 36px;
}

.solution-partner-card {
  display: grid;
  place-items: center;
  min-height: 108px;
  padding: 18px;
  border: 1px solid #d7e3e7;
  border-radius: 14px;
  text-align: center;
  font-weight: 700;
  color: #244b57;
  background: #ffffff;
}

.solution-partner-card img {
  width: 100%;
  max-width: 220px;
  max-height: 140px;
  object-fit: contain;
}

@media (max-width: 640px) {
  .solution-partners-grid {
    grid-template-columns: 1fr;
  }
}

.content-video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.content-video-grid iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 12px;
}

.sponsor-placeholder {
  display: grid;
  gap: 7px;
  margin: 24px 0 36px;
  padding: 30px;
  border: 1px dashed #88adb6;
  border-radius: 14px;
  color: #5d7086;
  text-align: center;
  background: #f5fafa;
}

.sponsor-placeholder strong {
  color: #153859;
  font-size: 1.15rem;
}

.institution-logo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 24px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid #e4edf1;
}

.institution-logo-strip img {
  display: block;
  width: auto;
  max-width: 132px;
  max-height: 46px;
  object-fit: contain;
}

.institution-logo-strip img[src*="gsb-logo"],
.institution-logo-strip img[src*="izmir-buyuksehir"] {
  filter: brightness(0) saturate(100%);
}

.institution-logo-strip img[src*="urla-belediyesi"] {
  max-height: 58px;
}

.media-link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.content-page-card .media-link-list a {
  padding: 9px 14px;
  border-radius: 999px;
  color: #086676;
  background: #edf6f6;
  text-decoration: none;
}

.archive-grid a span {
  color: #087180;
  font-size: 2rem;
  font-weight: 700;
}

.archive-cover-image {
  width: min(100%, 620px);
  margin: 0 auto 34px !important;
}

.content-page-card h3 {
  margin: 28px 0 12px;
  color: #153859;
  font-size: 1.28rem;
}

.archive-results-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 24px 0 28px;
}

.archive-result-card {
  padding: 24px;
  border: 1px solid #dce7ec;
  border-radius: 14px;
  background: #fbfdfd;
}

.archive-result-card h3 {
  margin: 0 0 18px;
  color: #092c54;
}

.archive-result-card h4 {
  margin: 18px 0 6px;
  color: #087180;
  font-size: 0.96rem;
}

.archive-result-card ol {
  margin-bottom: 0;
  padding-left: 22px;
}

.archive-result-card li + li {
  margin-top: 4px;
}

.archive-result-highlight {
  padding: 18px 20px;
  border-left: 4px solid #087180;
  border-radius: 0 12px 12px 0;
  color: #153859;
  background: #edf6f6;
}

.archive-poster-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 24px 0 36px;
}

.archive-poster-grid img {
  width: 100%;
  margin: 0;
}

/* Registered runners */
.registered-runners-section {
  padding: 60px 0 90px;
  background: #f8fafc;
}

.registered-runners-section > .shell {
  width: min(1120px, calc(100vw - 64px));
}

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

.registered-runners-heading h2 {
  color: #092c54;
}

.registered-runners-heading p {
  margin: 10px 0 0;
  color: #647b90;
}

.registered-runners-heading > span {
  padding: 9px 14px;
  border-radius: 999px;
  color: #086676;
  font-weight: 700;
  background: #e5f2f2;
  white-space: nowrap;
}

.registered-runners-table {
  overflow-x: auto;
  border: 1px solid #dfe8ee;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(9, 44, 84, 0.06);
}

.registered-runners-table table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
}

.registered-runners-table th,
.registered-runners-table td {
  padding: 19px 24px;
  text-align: left;
  border-bottom: 1px solid #e7edf2;
}

.registered-runners-table th {
  color: #526b80;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: #f5f9fa;
}

.registered-runners-table td {
  color: #425e76;
}

.registered-runners-table tbody tr:last-child td {
  border-bottom: 0;
}

.registered-runners-table tbody tr:hover {
  background: #f8fbfb;
}

.registered-runners-table td:first-child {
  display: flex;
  align-items: center;
  gap: 13px;
  color: #092c54;
}

.runner-list-avatar {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 35%, #fff 0 18%, transparent 19%),
    linear-gradient(145deg, #7fb5bb, #0b6577);
  box-shadow: inset 0 0 0 1px rgba(9, 44, 84, 0.08);
}

@media (max-width: 1050px) {
  .public-body .header-inner,
  .public-body .section .shell,
  .public-body .closing-band {
    width: min(100% - 40px, 940px);
  }

  .public-body .main-nav {
    gap: 17px;
    font-size: 0.8rem;
  }

  .public-body .header-utility-link {
    margin-left: 12px;
  }

  .public-body .landing-shell {
    min-height: 465px;
  }

  .public-body .landing-shell::after {
    right: -14vw;
    left: 20%;
  }

  .public-body .landing-copy h1 {
    font-size: clamp(3.7rem, 6vw, 4.25rem);
  }

  .public-body .featured-campaigns {
    gap: 18px;
  }
}

@media (max-width: 820px) {
  .public-body .header-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .public-body .main-nav {
    display: none;
  }

  .public-body .header-inner {
    position: relative;
  }

  .mobile-nav-toggle {
    display: grid;
    width: 44px;
    height: 44px;
    padding: 11px 9px;
    border: 1px solid #dce5ec;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
  }

  .mobile-nav-toggle > span:not(.sr-only) {
    display: block;
    width: 100%;
    height: 2px;
    margin: auto;
    border-radius: 999px;
    background: #153859;
    transition: transform 160ms ease, opacity 160ms ease;
  }

  .mobile-nav-toggle.is-open > span:first-child {
    transform: translateY(7px) rotate(45deg);
  }

  .mobile-nav-toggle.is-open > span:nth-child(2) {
    opacity: 0;
  }

  .mobile-nav-toggle.is-open > span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .mobile-site-nav {
    position: absolute;
    z-index: 40;
    top: calc(100% + 1px);
    right: 0;
    left: 0;
    display: none;
    max-height: calc(100vh - 84px);
    padding: 18px 20px 22px;
    overflow-y: auto;
    border: 1px solid #dce5ec;
    border-radius: 0 0 14px 14px;
    background: #fff;
    box-shadow: 0 20px 42px rgba(9, 44, 84, 0.14);
  }

  .mobile-site-nav.is-open {
    display: grid;
  }

  .mobile-site-nav strong {
    padding: 8px 10px;
    color: #092c54;
  }

  .mobile-site-nav > a:not(.button) {
    padding: 10px;
    border-radius: 7px;
    color: #425e76;
  }

  .mobile-site-nav > a.is-active {
    color: #086676;
    background: #edf6f6;
  }

  .mobile-site-nav .button {
    margin-top: 10px;
  }

  .content-page-layout {
    grid-template-columns: 1fr;
  }

  .content-page-aside {
    position: static;
  }

  .registered-runners-heading {
    align-items: flex-start;
  }

  .public-body .brand-logo {
    width: 58px;
    height: 52px;
  }

  .public-body .landing-shell {
    min-height: 710px;
    padding-top: 46px;
  }

  .public-body .landing-shell::after {
    top: 310px;
    right: -26vw;
    bottom: 0;
    left: -10vw;
    background:
      linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.18) 22%, rgba(255, 255, 255, 0) 50%),
      url("images/urla-runners-hero.png") 70% center / auto 100% no-repeat;
  }

  .public-body .landing-copy h1 {
    max-width: 9ch;
    font-size: clamp(3.35rem, 13vw, 4.5rem);
  }

  .public-body .landing-copy .hero-text {
    max-width: 530px;
  }

  .public-body .landing-strip-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 24px;
  }

  .public-body .focus-steps-inline {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .public-body .step-arrow {
    display: none;
  }

  .public-body .featured-campaigns {
    grid-template-columns: 1fr;
  }

  .public-body .closing-band {
    grid-template-columns: 84px minmax(0, 1fr);
  }

  .public-body .closing-band .button {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 560px) {
  .public-body .header-inner,
  .public-body .section .shell,
  .public-body .closing-band {
    width: calc(100% - 32px);
  }

  .public-body .landing-shell {
    min-height: 650px;
    padding-top: 34px;
  }

  .public-body .landing-shell::after {
    top: 350px;
    right: -60vw;
    left: -26vw;
  }

  .public-body .landing-copy h1 {
    font-size: clamp(2.85rem, 14vw, 3.8rem);
  }

  .public-body .landing-copy .hero-text {
    margin-top: 22px;
    font-size: 0.96rem;
  }

  .public-body .hero-actions {
    align-items: stretch;
    gap: 12px;
    margin-top: 24px;
  }

  .public-body .hero-actions .button {
    width: 100%;
  }

  .public-body .landing-strip-compact {
    grid-template-columns: 1fr;
    padding: 24px;
  }

  .public-body .impact-inline {
    justify-content: flex-start;
  }

  .public-body #kampanyalar .split-heading {
    align-items: flex-start;
  }

  .public-body .closing-band {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .public-body .closing-icon,
  .public-body .closing-band .button {
    grid-column: auto;
    justify-self: center;
  }

  .content-page-hero .shell,
  .content-page-section .shell {
    width: calc(100% - 32px);
  }

  .content-page-hero {
    padding: 48px 0 42px;
  }

  .content-page-section {
    padding: 32px 0 60px;
  }

  .content-page-card {
    padding: 26px 22px;
  }

  .registered-runners-section > .shell {
    width: calc(100% - 32px);
  }

  .registered-runners-section {
    padding: 34px 0 60px;
  }

  .registered-runners-heading {
    flex-direction: column;
    gap: 16px;
  }

  .registered-runners-table th,
  .registered-runners-table td {
    padding: 16px 18px;
  }

  .content-link-grid,
  .archive-grid,
  .content-video-grid,
  .archive-results-grid,
  .archive-poster-grid {
    grid-template-columns: 1fr;
  }
}

/* Donation page */
.donation-body main {
  overflow: visible;
}

.donation-body .donation-section {
  min-height: calc(100vh - 82px);
  padding: 48px 0 72px;
  background: #f5f8fa;
}

.donation-body .donation-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(440px, 0.82fr);
  gap: clamp(48px, 6vw, 76px);
  align-items: start;
  width: min(1080px, calc(100vw - 64px));
  padding: 48px;
  border: 1px solid #e2e9ee;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(15, 58, 96, 0.045);
}

.donation-campaign {
  position: sticky;
  top: 48px;
  padding-top: 4px;
}

.donation-back-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 54px;
  color: #1c5e93;
  font-size: 0.86rem;
  font-weight: 600;
}

.donation-back-link svg,
.donation-supporters svg {
  width: 18px;
  height: 18px;
}

.donation-runner {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}

.donation-runner .campaign-avatar {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  border: 3px solid #edf3f6;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0) 46%, rgba(7, 65, 100, 0.34) 47% 52%, rgba(255, 255, 255, 0) 53%),
    radial-gradient(circle at 55% 38%, #f0d4bd 0 10%, transparent 11%),
    linear-gradient(165deg, #b8d4e1 0 52%, #6a91a8 53% 100%);
}

.donation-runner .campaign-avatar-image {
  object-fit: cover;
  background: none;
}

.donation-runner div {
  display: grid;
  gap: 4px;
}

.donation-runner strong {
  color: #102c4a;
  font-size: 1rem;
}

.donation-runner span:last-child,
.donation-story,
.donation-payment-heading p,
.donation-security {
  color: #5d7086;
}

.donation-runner span:last-child {
  font-size: 0.86rem;
}

.donation-campaign h1 {
  color: #061f3d;
  font-family: "Iowan Old Style", "Baskerville", "Palatino Linotype", serif;
  font-size: clamp(3.2rem, 5vw, 4.45rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.donation-story {
  max-width: 540px;
  margin: 28px 0 0;
  font-size: 1rem;
  line-height: 1.7;
}

.donation-progress {
  max-width: 540px;
  margin-top: 42px;
  padding-top: 25px;
  border-top: 1px solid #e1e8ed;
}

.donation-progress-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  color: #64778b;
  font-size: 0.88rem;
}

.donation-progress-heading strong {
  color: #123552;
  font-size: 1.18rem;
}

.donation-progress .campaign-progress-line {
  height: 6px;
  margin: 13px 0;
  background: #e5ecef;
}

.donation-progress .campaign-progress-line span {
  display: block;
  height: 100%;
  background: #0e7780;
}

.donation-supporters {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #536b82;
  font-size: 0.84rem;
}

.donation-payment {
  padding: 34px 36px 32px;
  border: 1px solid #dfe7ed;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(15, 58, 96, 0.055);
}

.donation-payment-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e7edf1;
}

.donation-payment-heading h2 {
  max-width: none;
  color: #092d56;
  font-family: "Iowan Old Style", "Baskerville", "Palatino Linotype", serif;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: -0.035em;
}

.donation-payment-heading p {
  margin: 8px 0 0;
  font-size: 0.88rem;
}

.donation-payment-heading > svg {
  width: 26px;
  height: 26px;
  color: #0e7780;
}

.donation-form {
  display: grid;
  gap: 18px;
  padding-top: 24px;
}

.donation-form label,
.donation-amount-fieldset legend {
  color: #173956;
  font-size: 0.86rem;
  font-weight: 600;
}

.donation-form input {
  min-height: 48px;
  border-color: #d9e2e8;
  border-radius: 3px;
  background: #fff;
  font-size: 0.92rem;
}

.donation-form input:focus {
  border-color: #0e7780;
  outline: 3px solid rgba(14, 119, 128, 0.1);
}

.donation-amount-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.donation-amount-fieldset legend {
  margin-bottom: 10px;
}

.donation-amounts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.donation-amounts button {
  min-height: 44px;
  padding: 0 8px;
  border: 1px solid #d7e1e7;
  border-radius: 3px;
  background: #fff;
  color: #294963;
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 700;
}

.donation-amounts button.is-selected {
  border-color: #0e7780;
  background: #edf7f7;
  color: #086676;
}

.donation-amounts button:focus-visible {
  outline: 2px solid #0e7780;
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .donation-amounts button:hover {
    border-color: #a9c9cf;
    background: #f7fbfb;
    color: #1f5f69;
  }
}

.donation-custom-amount {
  margin-top: 12px;
}

.donation-input-suffix {
  position: relative;
  display: block;
}

.registration-donation-input {
  margin-top: 8px;
}

.registration-donation-amounts {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 8px;
}

.donation-input-suffix input {
  padding-right: 46px;
}

.donation-input-suffix > span {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  color: #64778b;
  font-size: 0.84rem;
  font-weight: 700;
}

.donation-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.donation-card-details {
  grid-template-columns: 1.3fr 0.7fr;
}

.donation-anonymous {
  display: flex !important;
  grid-template-columns: none;
  align-items: center;
  gap: 10px !important;
  color: #526a80 !important;
  font-weight: 500 !important;
}

.donation-anonymous input {
  width: 17px;
  min-height: 17px;
  margin: 0;
  accent-color: #0e7780;
}

.donation-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 18px;
  border-top: 1px solid #e7edf1;
  color: #526a80;
  font-size: 0.9rem;
}

.donation-total strong {
  color: #092d56;
  font-size: 1.25rem;
}

.donation-body .donation-submit {
  width: 100%;
  min-height: 54px;
  border: 0;
  cursor: pointer;
}

.donation-submit svg {
  width: 19px;
  height: 19px;
}

.donation-security {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
}

.donation-security svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: #0e7780;
}

@media (max-width: 980px) {
  .donation-body .donation-layout {
    grid-template-columns: 1fr;
    gap: 46px;
    width: min(680px, calc(100vw - 40px));
    padding: 40px;
    max-width: 680px;
  }

  .donation-campaign {
    position: static;
  }

  .donation-back-link {
    margin-bottom: 40px;
  }
}

@media (max-width: 560px) {
  .donation-body .donation-section {
    padding: 20px 0 44px;
    background: #fff;
  }

  .donation-body .donation-layout {
    width: 100%;
    padding: 18px 16px 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .donation-campaign h1 {
    font-size: clamp(2.75rem, 13vw, 3.6rem);
  }

  .donation-payment {
    padding: 26px 20px 24px;
  }

  .donation-amounts,
  .donation-field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .registration-donation-amounts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .donation-card-details {
    grid-template-columns: 1.3fr 0.7fr;
  }
}

/* Registration page */
.registration-body main {
  overflow: visible;
}

.registration-body .registration-hero {
  min-height: calc(100vh - 82px);
  padding: 64px 0 88px;
  background:
    linear-gradient(90deg, #fff 0%, #fff 56%, #f7fbfc 56%, #f7fbfc 100%);
}

.registration-body .registration-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(520px, 1fr);
  gap: clamp(64px, 9vw, 130px);
  align-items: start;
}

.registration-intro {
  position: sticky;
  top: 64px;
  padding-top: 34px;
}

.registration-intro h1 {
  max-width: 7ch;
  color: #061f3d;
  font-family: "Iowan Old Style", "Baskerville", "Palatino Linotype", serif;
  font-size: clamp(3.6rem, 5.5vw, 4.8rem);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.055em;
}

.registration-intro p {
  max-width: 430px;
  margin: 26px 0 0;
  color: var(--landing-muted);
  font-size: 1.02rem;
  line-height: 1.65;
}

.registration-back-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 32px;
  color: #1c5e93;
  font-size: 0.88rem;
  font-weight: 600;
}

.registration-back-link svg {
  width: 18px;
  height: 18px;
}

.simple-registration-form {
  display: grid;
  gap: 22px;
  padding: 38px 40px 40px;
  border: 1px solid #dfe7ed;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(15, 58, 96, 0.055);
}

.registration-form-heading {
  padding-bottom: 8px;
}

.registration-form-heading h2 {
  max-width: none;
  color: #092d56;
  font-family: "Iowan Old Style", "Baskerville", "Palatino Linotype", serif;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: -0.035em;
}

.registration-form-heading p {
  margin: 9px 0 0;
  color: var(--landing-muted);
  font-size: 0.92rem;
}

.simple-registration-form label {
  gap: 9px;
  color: #173956;
  font-size: 0.88rem;
  font-weight: 600;
}

.simple-registration-form input,
.simple-registration-form select {
  min-height: 52px;
  border: 1px solid #d7e1e8;
  border-radius: 3px;
  padding: 0 15px;
  background: #fff;
  color: #102f4f;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.simple-registration-form input::placeholder {
  color: #8a9aaa;
}

.simple-registration-form input:focus,
.simple-registration-form select:focus {
  border-color: #17808d;
  box-shadow: 0 0 0 3px rgba(23, 128, 141, 0.1);
}

.registration-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.simple-registration-form .registration-consent {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  color: #617387;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.55;
}

.simple-registration-form .registration-consent input {
  width: 18px;
  min-height: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: #087180;
}

.registration-consent a {
  color: #0a6172;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.registration-body .registration-submit {
  width: 100%;
  min-height: 54px;
  margin-top: 2px;
  border: 0;
  cursor: pointer;
}

@media (max-width: 980px) {
  .registration-body .registration-hero {
    background: #fff;
  }

  .registration-body .registration-shell {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .registration-intro {
    position: static;
    padding-top: 0;
  }

  .registration-intro h1 {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .registration-body .registration-hero {
    min-height: 0;
    padding: 42px 0 64px;
  }

  .registration-body .registration-shell {
    gap: 30px;
  }

  .registration-intro h1 {
    font-size: clamp(3rem, 14vw, 3.7rem);
  }

  .registration-back-link {
    margin-top: 24px;
  }

  .simple-registration-form {
    gap: 19px;
    padding: 28px 22px 30px;
  }

  .registration-field-grid {
    grid-template-columns: 1fr;
    gap: 19px;
  }
}

/* Login page */
.login-body main {
  overflow: visible;
}

.login-section {
  min-height: calc(100vh - 82px);
  padding: 76px 0 88px;
  background:
    linear-gradient(90deg, #fff 0%, #fff 54%, #f7fbfc 54%, #f7fbfc 100%);
}

.login-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 0.72fr);
  gap: clamp(70px, 10vw, 150px);
  align-items: center;
  max-width: 1040px;
}

.login-intro h1 {
  max-width: 8ch;
  color: #061f3d;
  font-family: "Iowan Old Style", "Baskerville", "Palatino Linotype", serif;
  font-size: clamp(3.8rem, 5.7vw, 5rem);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.055em;
}

.login-intro p {
  max-width: 430px;
  margin: 26px 0 0;
  color: var(--landing-muted);
  font-size: 1.02rem;
  line-height: 1.65;
}

.login-form {
  display: grid;
  gap: 21px;
  padding: 38px 40px 34px;
  border: 1px solid #dfe7ed;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(15, 58, 96, 0.055);
}

.login-form-heading {
  margin-bottom: 2px;
}

.login-form-heading h2 {
  max-width: none;
  color: #092d56;
  font-family: "Iowan Old Style", "Baskerville", "Palatino Linotype", serif;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: -0.035em;
}

.login-form-heading p {
  margin: 9px 0 0;
  color: var(--landing-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.login-form > label {
  gap: 9px;
  color: #173956;
  font-size: 0.88rem;
  font-weight: 600;
}

.login-form input[type="email"],
.login-form input[type="password"] {
  min-height: 52px;
  border: 1px solid #d7e1e8;
  border-radius: 3px;
  padding: 0 15px;
  background: #fff;
  color: #102f4f;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.login-form input::placeholder {
  color: #8a9aaa;
}

.login-form input:focus {
  border-color: #17808d;
  box-shadow: 0 0 0 3px rgba(23, 128, 141, 0.1);
}

.login-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: #617387;
  font-size: 0.82rem;
}

.login-remember {
  display: inline-flex;
  grid-template-columns: none;
  align-items: center;
  gap: 9px;
  font-weight: 400;
}

.login-remember input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: #087180;
}

.login-options a,
.login-register a {
  color: #0a6172;
  font-weight: 600;
}

.login-submit {
  width: 100%;
  min-height: 54px;
  border: 0;
  cursor: pointer;
}

.login-register {
  margin: 0;
  padding-top: 3px;
  color: #617387;
  font-size: 0.84rem;
  text-align: center;
}

@media (max-width: 900px) {
  .login-section {
    background: #fff;
  }

  .login-shell {
    grid-template-columns: 1fr;
    gap: 38px;
    max-width: 620px;
  }

  .login-intro h1 {
    max-width: none;
  }
}

@media (max-width: 560px) {
  .login-section {
    min-height: 0;
    padding: 44px 0 64px;
  }

  .login-shell {
    gap: 30px;
  }

  .login-intro h1 {
    font-size: clamp(3rem, 14vw, 3.7rem);
  }

  .login-form {
    padding: 28px 22px 26px;
  }

  .login-options {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
}
/* Runner account and campaign forms */
.account-body,
.campaign-form-body {
  min-height: 100vh;
  background: #fff;
}

.account-main,
.campaign-form-main {
  min-height: calc(100vh - 91px);
}

.account-main .shell {
  width: min(1000px, calc(100vw - 48px));
}

.campaign-form-main .shell {
  width: min(920px, calc(100vw - 48px));
}

.account-hero {
  padding: 62px 0 46px;
  background:
    radial-gradient(circle at 86% 12%, rgba(167, 211, 216, 0.35), transparent 27%),
    linear-gradient(180deg, #f7fbfc 0%, #fff 100%);
  border-bottom: 1px solid var(--landing-line, #dce5ec);
}

.account-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 42px;
}

.account-kicker {
  margin: 0 0 16px;
  color: var(--landing-teal, #087180);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.account-heading h1,
.campaign-form-intro h1 {
  max-width: 650px;
  color: var(--landing-navy, #092c54);
  font-size: clamp(2.5rem, 5vw, 4.2rem);
  line-height: 1;
}

.account-heading > div:first-child > p:last-child,
.campaign-form-intro > p {
  max-width: 680px;
  margin: 20px 0 0;
  color: var(--landing-muted, #5d7086);
  font-size: 1.08rem;
  line-height: 1.7;
}

.account-runner-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}

.account-runner-meta span,
.account-section-heading > span {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  padding: 0 15px;
  border: 1px solid #d9e5eb;
  border-radius: 999px;
  color: var(--landing-navy, #092c54);
  background: rgba(255, 255, 255, 0.78);
  font-size: 0.9rem;
  font-weight: 600;
}

.account-section {
  padding: 46px 0;
}

.account-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(240px, 0.4fr);
  gap: 20px;
  align-items: stretch;
}

.account-campaign,
.account-share-card,
.account-empty,
.campaign-simple-form {
  border: 1px solid #dce5ec;
  border-radius: 24px;
  background: #fff;
}

.account-campaign {
  padding: 32px;
}

.account-campaign-image {
  display: block;
  width: 100%;
  max-height: 360px;
  margin: 24px 0;
  border-radius: 18px;
  object-fit: cover;
}

.account-card-heading,
.account-progress-copy,
.account-section-heading,
.campaign-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.account-card-heading {
  align-items: flex-start;
}

.account-status {
  display: inline-flex;
  margin-bottom: 12px;
  color: #087180;
  font-size: 0.84rem;
  font-weight: 700;
}

.account-card-heading h2,
.account-section-heading h2,
.account-empty h2 {
  color: var(--landing-navy, #092c54);
}

.account-edit-button {
  min-height: 44px;
  padding: 0 18px;
  flex: 0 0 auto;
}

.account-edit-button svg {
  width: 18px;
  height: 18px;
}

.account-campaign-message {
  max-width: 760px;
  margin: 24px 0 30px;
  color: var(--landing-muted, #5d7086);
  line-height: 1.75;
}

.account-progress {
  padding: 22px 0 26px;
  border-top: 1px solid #e7eef2;
  border-bottom: 1px solid #e7eef2;
}

.account-progress-copy {
  align-items: flex-end;
  margin-bottom: 13px;
}

.account-progress-copy div {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.account-progress-copy strong {
  color: var(--landing-navy, #092c54);
  font-family: "Iowan Old Style", "Palatino Linotype", serif;
  font-size: 1.65rem;
}

.account-progress-copy span {
  color: var(--landing-muted, #5d7086);
  font-size: 0.9rem;
}

.account-progress-copy > span {
  color: var(--landing-teal, #087180);
  font-weight: 700;
}

.account-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding-top: 26px;
}

.account-stats div {
  display: grid;
  gap: 7px;
}

.account-stats span {
  color: var(--landing-muted, #5d7086);
  font-size: 0.84rem;
}

.account-stats strong {
  color: var(--landing-navy, #092c54);
}

.account-share-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px;
  background: #f1f8f8;
  border-color: #d3e7e7;
}

.account-share-card h3 {
  color: var(--landing-navy, #092c54);
}

.account-share-card p,
.account-section-heading p {
  color: var(--landing-muted, #5d7086);
  line-height: 1.65;
}

.account-share-card .button {
  margin-top: 8px;
}

.account-donors-section {
  padding-top: 12px;
  padding-bottom: 62px;
}

.account-section-heading {
  margin-bottom: 20px;
}

.account-section-heading p {
  margin: 8px 0 0;
}

.account-donor-list {
  border-top: 1px solid #dce5ec;
}

.account-donor-row {
  display: grid;
  grid-template-columns: 46px minmax(150px, 0.75fr) minmax(220px, 1.5fr) auto;
  gap: 16px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid #e5edf1;
}

.account-donor-avatar {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #087180;
  background: #dceeed;
  font-weight: 700;
}

.account-donor-person {
  display: grid;
  gap: 5px;
}

.account-donor-person span,
.account-donor-row p {
  color: var(--landing-muted, #5d7086);
  font-size: 0.9rem;
}

.account-donor-row p {
  margin: 0;
  line-height: 1.55;
}

.account-donor-amount {
  color: var(--landing-navy, #092c54);
  white-space: nowrap;
}

.account-empty {
  max-width: 720px;
  margin: 20px auto 50px;
  padding: 58px 42px;
  text-align: center;
  background: #f8fbfc;
}

.account-empty-mark {
  display: inline-flex;
  width: 78px;
  height: 78px;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  border-radius: 50%;
  color: #087180;
  background: #dceeed;
}

.account-empty-mark svg {
  width: 42px;
  height: 42px;
}

.account-empty p {
  max-width: 520px;
  margin: 16px auto 28px;
  color: var(--landing-muted, #5d7086);
  line-height: 1.7;
}

.campaign-form-section {
  padding: 52px 0 72px;
  background:
    radial-gradient(circle at 10% 8%, rgba(167, 211, 216, 0.25), transparent 24%),
    #f8fbfc;
}

.campaign-form-shell {
  display: grid;
  grid-template-columns: minmax(230px, 0.65fr) minmax(500px, 1.35fr);
  gap: clamp(36px, 6vw, 64px);
  align-items: start;
}

.campaign-form-intro {
  position: sticky;
  top: 130px;
  padding-top: 12px;
}

.campaign-form-intro .registration-back-link {
  margin-bottom: 36px;
}

.campaign-form-intro h1 {
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
}

.campaign-simple-form {
  display: grid;
  gap: 23px;
  padding: 34px;
}

.campaign-simple-form label {
  color: var(--landing-navy, #092c54);
}

.campaign-simple-form input,
.campaign-simple-form select,
.campaign-simple-form textarea {
  border-radius: 12px;
  border-color: #cfdde5;
  background: #fff;
}

.campaign-simple-form input:focus,
.campaign-simple-form select:focus,
.campaign-simple-form textarea:focus {
  outline: 3px solid rgba(8, 113, 128, 0.12);
  border-color: #087180;
}

.form-help {
  color: var(--landing-muted, #5d7086);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.5;
}

.campaign-form-actions {
  justify-content: flex-start;
  padding-top: 4px;
}

@media (max-width: 900px) {
  .account-body .main-nav,
  .campaign-form-body .main-nav {
    display: flex;
    width: auto;
  }

  .account-body .header-inner,
  .campaign-form-body .header-inner {
    flex-direction: row;
  }

  .account-body .header-utility-link,
  .campaign-form-body .main-nav .button {
    display: none;
  }

  .campaign-form-body .header-utility-link {
    margin-left: 0;
  }

  .account-heading,
  .account-card-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .account-runner-meta {
    justify-content: flex-start;
  }

  .account-layout,
  .campaign-form-shell {
    grid-template-columns: 1fr;
  }

  .campaign-form-intro {
    position: static;
  }

  .account-share-card {
    align-items: flex-start;
  }
}

@media (max-width: 680px) {
  .account-hero {
    padding: 50px 0 40px;
  }

  .account-section {
    padding: 38px 0;
  }

  .account-campaign,
  .account-share-card,
  .account-empty,
  .campaign-simple-form {
    padding: 24px;
    border-radius: 18px;
  }

  .account-stats {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .account-section-heading,
  .account-progress-copy,
  .campaign-form-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .account-donor-row {
    grid-template-columns: 42px 1fr auto;
  }

  .account-donor-row p {
    grid-column: 2 / -1;
  }

  .campaign-form-section {
    padding: 38px 0 60px;
  }
}