/* tilijo — Main Stylesheet */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* Brand Tokens */
  --red: #F93D45;        /* primary action + identity */
  --red-600: #E22C34;    /* hover */
  --red-700: #C4232B;    /* pressed */
  --red-wash: #FFECEE;   /* tint surfaces, CH-edge chips */
  --ink: #1B2436;        /* primary text, trust, uniforms */
  --ink-soft: #3A4457;   /* secondary text */
  --muted: #6B7482;      /* tertiary text, captions */
  --faint: #98A1AE;      /* disabled, placeholder */

  /* Neutrals */
  --paper: #F6F8FA;      /* page background */
  --surface: #FFFFFF;    /* cards */
  --line: #E4E8EE;       /* hairlines */
  --line-strong: #CFD5DE;

  /* Functional */
  --done: #17A673;       /* escrow released / task done */
  --done-wash: #E4F6EF;
  --warn: #E8A317;       /* waiting */
  --warn-wash: #FCF2DC;
  --info: #2E6FD6;

  /* Trust Tiers */
  --tier-standard: #7B8698;
  --tier-pro: #1B2436;
  --tier-premium: #C0912A;
  --tier-premium-wash: #F7EFDA;

  /* Radii */
  --r-xs: 6px; 
  --r-sm: 8px; 
  --r-md: 12px; 
  --r-lg: 16px; 
  --r-xl: 22px; 
  --r-pill: 999px;

  /* Elevation */
  --sh-1: 0 1px 2px rgba(27, 36, 54, 0.06), 0 1px 3px rgba(27, 36, 54, 0.05);
  --sh-2: 0 4px 12px rgba(27, 36, 54, 0.08), 0 1px 3px rgba(27, 36, 54, 0.05);
  --sh-3: 0 12px 32px rgba(27, 36, 54, 0.12);
  --sh-red: 0 6px 18px rgba(249, 61, 69, 0.28);

  /* Fonts */
  --font-display: 'Fredoka', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;

  /* Spacing */
  --s1: 4px; 
  --s2: 8px; 
  --s3: 12px; 
  --s4: 16px; 
  --s5: 24px; 
  --s6: 32px; 
  --s7: 48px; 
  --s8: 64px; 
  --s9: 96px;

  /* Transition */
  --tr-duration: 160ms;
  --tr-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  /* Dark Mode Overrides */
  --paper: #0E131F;
  --surface: #1B2436;
  --ink: #F6F8FA;
  --ink-soft: #CFD5DE;
  --muted: #98A1AE;
  --faint: #6B7482;
  --line: #2E3A52;
  --line-strong: #3A4457;

  --red-wash: rgba(249, 61, 69, 0.15);
  --done-wash: rgba(23, 166, 115, 0.15);
  --warn-wash: rgba(232, 163, 23, 0.15);

  --tier-pro: #F6F8FA;

  --sh-1: 0 1px 3px rgba(0, 0, 0, 0.3);
  --sh-2: 0 4px 16px rgba(0, 0, 0, 0.4);
  --sh-3: 0 12px 40px rgba(0, 0, 0, 0.5);
}

/* Base resets & styles */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  background-color: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  transition: background-color var(--tr-duration) var(--tr-ease), color var(--tr-duration) var(--tr-ease);
  -webkit-font-smoothing: antialiased;
}

/* Typography styles */
h1, h2, h3, .brand-display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
}

h1 {
  font-size: 2.875rem; /* 46px */
  line-height: 1.1;
}

h2 {
  font-size: 2rem; /* 32px */
  line-height: 1.2;
}

h3 {
  font-size: 1.1875rem; /* 19px */
  line-height: 1.3;
}

p {
  font-size: 1rem; /* 16px */
  line-height: 1.55;
}

small, .text-small {
  font-size: 0.8125rem; /* 13px */
}

.font-mono {
  font-family: var(--font-mono);
  font-size: 0.75rem; /* 12px */
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Hidden helper */
[hidden] {
  display: none !important;
}

/* Skip Link for accessibility */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--red);
  color: #fff;
  padding: var(--s3) var(--s5);
  z-index: 1000;
  text-decoration: none;
  font-weight: 600;
  border-bottom-right-radius: var(--r-md);
  transition: top var(--tr-duration) var(--tr-ease);
}
.skip-link:focus {
  top: 0;
}

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--s5);
}

/* Header & Nav */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(var(--paper), 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transition: background-color var(--tr-duration) var(--tr-ease), border-color var(--tr-duration) var(--tr-ease);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}
.logo {
  display: flex;
  align-items: center;
  gap: var(--s2);
  text-decoration: none;
  color: var(--ink);
}
.logo__tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--red);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.45rem;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm); /* rounded app tile ~22% of icon size */
  padding-bottom: 2px; /* optical alignment for font baseline */
  flex-shrink: 0;
  line-height: 1;
}
.logo__text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--ink);
  letter-spacing: -0.03em;
}
.nav-menu {
  display: flex;
  gap: var(--s5);
  list-style: none;
}
.nav-link {
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--tr-duration) var(--tr-ease);
}
.nav-link:hover {
  color: var(--red);
}
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

/* Control buttons (Theme & Language) */
.ctrl-select {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--ink-soft);
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 6px 28px 6px 12px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7482' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px;
  transition: border-color var(--tr-duration) var(--tr-ease), color var(--tr-duration) var(--tr-ease);
}
.ctrl-select:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}
.ctrl-select:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.theme-toggle {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-soft);
  transition: border-color var(--tr-duration) var(--tr-ease), color var(--tr-duration) var(--tr-ease);
}
.theme-toggle:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
[data-theme="dark"] .theme-toggle__sun {
  display: block;
}
[data-theme="dark"] .theme-toggle__moon {
  display: none;
}
.theme-toggle__sun {
  display: none;
}
.theme-toggle__moon {
  display: block;
}

/* Burger menu (Mobile nav) */
.burger-btn {
  display: none;
  background: none;
  border: none;
  color: var(--ink);
  font-size: 1.75rem;
  cursor: pointer;
}

/* Button System */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  padding: 12px 20px;
  border-radius: var(--r-md);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 120ms var(--tr-ease), background-color var(--tr-duration) var(--tr-ease), box-shadow var(--tr-duration) var(--tr-ease), color var(--tr-duration) var(--tr-ease);
}
.btn:active {
  transform: translateY(1px);
}
.btn:disabled {
  background-color: var(--line) !important;
  color: var(--faint) !important;
  cursor: not-allowed;
  box-shadow: none !important;
  transform: none !important;
}
.btn:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.btn--primary {
  background-color: var(--red);
  color: #FFFFFF;
  box-shadow: var(--sh-red);
}
.btn--primary:hover {
  background-color: var(--red-600);
}
.btn--primary:active {
  background-color: var(--red-700);
}
.btn--secondary {
  background-color: var(--ink);
  color: var(--paper);
}
.btn--secondary:hover {
  background-color: var(--ink-soft);
}
.btn--ghost {
  background-color: transparent;
  border: 1.5px solid var(--line-strong);
  color: var(--ink);
}
.btn--ghost:hover {
  background-color: var(--line);
}
.btn--sm {
  font-size: 0.875rem;
  padding: 8px 14px;
}

/* Dot System */
.sdot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  vertical-align: middle;
}
.sdot--live {
  background: var(--red);
}
.sdot--live::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--red);
  opacity: 0.5;
  animation: ping 1.6s cubic-bezier(0, 0, .2, 1) infinite;
}
.sdot--wait {
  background: var(--warn);
}
.sdot--done {
  background: var(--done);
}
.sdot--idle {
  background: var(--line-strong);
}

@keyframes ping {
  0% {
    transform: scale(1);
    opacity: .6;
  }
  80%, 100% {
    transform: scale(2.2);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sdot--live::after {
    animation: none;
    opacity: .4;
  }
  .btn, .theme-toggle, body, .ctrl-select, .faq-accordion__trigger {
    transition: none !important;
  }
}

/* Sections Base */
.section {
  padding: var(--s9) 0; /* 96px */
}
.section--alt {
  background-color: var(--surface);
}
.section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--s6) auto;
}
.section-header h2 {
  margin-bottom: var(--s2);
}
.section-header p {
  color: var(--ink-soft);
  font-size: 1.125rem;
}

/* Hero Section */
.hero {
  padding: var(--s9) 0 var(--s8) 0;
  text-align: center;
}
.hero__title {
  max-width: 800px;
  margin: 0 auto var(--s4) auto;
}
.hero__title span {
  color: var(--red);
}
.hero__subtitle {
  max-width: 600px;
  margin: 0 auto var(--s6) auto;
  color: var(--ink-soft);
  font-size: 1.25rem;
  line-height: 1.6;
}
.hero__ctas {
  display: flex;
  justify-content: center;
  gap: var(--s4);
  flex-wrap: wrap;
}

/* How It Works Section */
.how-works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
}
.how-works-card {
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s5);
  box-shadow: var(--sh-1);
  text-align: center;
  transition: transform var(--tr-duration) var(--tr-ease), box-shadow var(--tr-duration) var(--tr-ease);
}
.how-works-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
}
.how-works-card__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--red-wash);
  color: var(--red);
  padding: var(--s2) var(--s4);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-weight: 700;
  margin-bottom: var(--s4);
}
.how-works-card h3 {
  margin-bottom: var(--s3);
}
.how-works-card p {
  color: var(--ink-soft);
}

/* Role Sections (Clients & Taskers) */
.roles-layout {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s6);
}
.role-card {
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--s6);
  box-shadow: var(--sh-1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.role-card__header {
  margin-bottom: var(--s5);
}
.role-card__tag {
  display: inline-block;
  background-color: var(--line);
  color: var(--ink-soft);
  padding: 4px var(--s3);
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: var(--s3);
}
.role-card h3 {
  font-size: 1.75rem;
  margin-bottom: var(--s2);
}
.role-card__intro {
  color: var(--ink-soft);
  margin-bottom: var(--s4);
  font-size: 1.0625rem;
}
.role-card__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-bottom: var(--s6);
}
.role-card__list-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  color: var(--ink-soft);
}
.role-card__list-item svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--done);
  margin-top: 2px;
}

/* Trust Section */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
}
.trust-item {
  text-align: center;
  padding: var(--s4);
}
.trust-item__icon {
  width: 56px;
  height: 56px;
  background-color: var(--paper);
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s4);
  color: var(--red);
  box-shadow: var(--sh-1);
}
.trust-item__icon svg {
  width: 28px;
  height: 28px;
}
.trust-item h3 {
  margin-bottom: var(--s3);
}
.trust-item p {
  color: var(--ink-soft);
}

/* FAQ Section (Accordion) */
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.faq-accordion {
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.faq-accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s4) var(--s5);
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--tr-duration) var(--tr-ease);
}
.faq-accordion__trigger:hover {
  background-color: var(--paper);
}
.faq-accordion__trigger:focus-visible {
  outline: 2px solid var(--red) inset;
}
.faq-accordion__trigger-icon {
  width: 18px;
  height: 18px;
  color: var(--muted);
  transition: transform var(--tr-duration) var(--tr-ease);
}
.faq-accordion__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--tr-duration) var(--tr-ease);
}
.faq-accordion__panel-inner {
  padding: 0 var(--s5) var(--s4) var(--s5);
  color: var(--ink-soft);
  font-size: 0.9375rem;
}
.faq-accordion[open] .faq-accordion__trigger-icon {
  transform: rotate(180deg);
}
.faq-accordion[open] .faq-accordion__panel {
  max-height: 200px; /* adjusted dynamically via JS or large enough placeholder */
}

/* Embedded Waitlist Callout Section */
.waitlist-banner {
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--s8) var(--s5);
  box-shadow: var(--sh-1);
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}
.waitlist-banner h2 {
  margin-bottom: var(--s2);
}
.waitlist-banner p {
  color: var(--ink-soft);
  max-width: 500px;
  margin: 0 auto var(--s5) auto;
}

/* Footer */
.footer {
  background-color: var(--surface);
  border-top: 1px solid var(--line);
  padding: var(--s6) 0;
  transition: background-color var(--tr-duration) var(--tr-ease), border-color var(--tr-duration) var(--tr-ease);
}
.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s4);
}
.footer__logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ink);
  text-decoration: none;
}
.footer-links {
  display: flex;
  gap: var(--s5);
  list-style: none;
}
.footer-link {
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--tr-duration) var(--tr-ease);
}
.footer-link:hover {
  color: var(--red);
}
.footer__copy {
  color: var(--muted);
  font-size: 0.875rem;
}

/* Form & Modal Dialog Styling */
.dialog {
  border: none;
  border-radius: var(--r-xl);
  background-color: var(--surface);
  box-shadow: var(--sh-3);
  max-width: 580px;
  width: 90%;
  margin: auto;
  outline: none;
  transition: background-color var(--tr-duration) var(--tr-ease);
}
.dialog::backdrop {
  background-color: rgba(27, 36, 54, 0.5);
  backdrop-filter: blur(4px);
}
.dialog__wrapper {
  padding: var(--s6);
  position: relative;
}
.dialog__close {
  position: absolute;
  top: var(--s4);
  right: var(--s4);
  background: none;
  border: none;
  color: var(--muted);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--tr-duration) var(--tr-ease), color var(--tr-duration) var(--tr-ease);
}
.dialog__close:hover {
  background-color: var(--paper);
  color: var(--ink);
}
.dialog__close svg {
  width: 18px;
  height: 18px;
}
.dialog__header {
  margin-bottom: var(--s5);
}
.dialog__header h2 {
  font-size: 1.75rem;
  margin-bottom: var(--s2);
}
.dialog__header p {
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

/* Form Steps Indicators */
.form-steps {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s5);
  list-style: none;
}
.form-step-item {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--faint);
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.form-step-item--active {
  color: var(--red);
  font-weight: 700;
}
.form-step-item--done {
  color: var(--done);
}

/* Form Layout */
.form-group {
  margin-bottom: var(--s4);
}
.form-group label {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink);
  margin-bottom: var(--s2);
}
.form-control {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 10px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background-color: var(--surface);
  color: var(--ink);
  outline: none;
  transition: border-color var(--tr-duration) var(--tr-ease);
}
.form-control:focus {
  border-color: var(--red);
}
.form-control::placeholder {
  color: var(--faint);
}
.form-control--mono {
  font-family: var(--font-mono);
}
textarea.form-control {
  resize: vertical;
  min-height: 80px;
}

/* Custom Select & Option cards for role choice */
.role-choice {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-bottom: var(--s5);
}
.role-choice-card {
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s4);
  display: flex;
  align-items: center;
  gap: var(--s4);
  cursor: pointer;
  background-color: var(--surface);
  transition: border-color var(--tr-duration) var(--tr-ease), background-color var(--tr-duration) var(--tr-ease);
}
.role-choice-card:hover {
  border-color: var(--line-strong);
}
.role-choice-card input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--red);
}
.role-choice-card__label {
  font-weight: 600;
  color: var(--ink);
}
.role-choice-card--selected {
  border-color: var(--red);
  background-color: var(--red-wash);
}

/* Radio button selections for enums */
.radio-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s2);
}
.radio-option {
  position: relative;
  display: flex;
}
.radio-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.radio-option label {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px;
  text-align: center;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color var(--tr-duration) var(--tr-ease), background-color var(--tr-duration) var(--tr-ease), color var(--tr-duration) var(--tr-ease);
  margin-bottom: 0;
}
.radio-option label:hover {
  border-color: var(--line-strong);
}
.radio-option input[type="radio"]:checked + label {
  border-color: var(--red);
  background-color: var(--red-wash);
  color: var(--ink);
  font-weight: 600;
}

/* Checkbox alignment */
.checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  margin-bottom: var(--s5);
}
.checkbox-group input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--red);
}
.checkbox-group label {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--ink-soft);
  line-height: 1.4;
  margin-bottom: 0;
}
.checkbox-group label a {
  color: var(--red);
  text-decoration: underline;
}

/* Cloudflare Turnstile block container */
.turnstile-container {
  display: flex;
  justify-content: center;
  margin-bottom: var(--s4);
}

/* Form actions */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s3);
}

/* Error states & fields validation styling */
.form-control.is-invalid {
  border-color: var(--red);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23F93D45' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
  padding-right: 40px;
}
.invalid-feedback {
  color: var(--red);
  font-size: 0.75rem;
  font-weight: 500;
  margin-top: var(--s1);
  display: block;
}
.form-summary-error {
  display: flex;
  align-items: center;
  gap: var(--s2);
  background-color: var(--red-wash);
  color: var(--red-700);
  border: 1px solid var(--red);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  margin-bottom: var(--s4);
  font-size: 0.875rem;
  font-weight: 600;
}

/* Success Card */
.success-card {
  text-align: center;
  padding: var(--s5) var(--s4);
}
.success-card__icon {
  width: 64px;
  height: 64px;
  background-color: var(--done-wash);
  color: var(--done);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s4);
}
.success-card__icon svg {
  width: 32px;
  height: 32px;
}
.success-card h3 {
  font-size: 1.75rem;
  margin-bottom: var(--s3);
}
.success-card p {
  color: var(--ink-soft);
  font-size: 1.0625rem;
}

/* Mobile & Responsive adaptations */
@media (max-width: 991px) {
  h1 {
    font-size: 2.25rem;
  }
  h2 {
    font-size: 1.75rem;
  }
  .section {
    padding: var(--s7) 0;
  }
  .how-works-grid {
    grid-template-columns: 1fr;
    gap: var(--s4);
  }
  .roles-layout {
    grid-template-columns: 1fr;
    gap: var(--s5);
  }
  .trust-grid {
    grid-template-columns: 1fr;
    gap: var(--s4);
  }
}

@media (max-width: 767px) {
  .header__inner {
    height: 70px;
  }
  .nav-menu {
    display: none; /* simple menu hiding for mobile */
  }
  .burger-btn {
    display: block;
  }
  /* Show collapsible mobile menu if .is-active */
  .header.is-active .nav-menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    background-color: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: var(--s5);
    box-shadow: var(--sh-2);
    gap: var(--s3);
    z-index: 99;
  }
  .radio-group {
    grid-template-columns: 1fr;
  }
  .dialog__wrapper {
    padding: var(--s4);
  }
}

/* Legal Pages Custom styles */
.legal-container {
  max-width: 800px;
  margin: var(--s6) auto;
  padding: 0 var(--s4);
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-1);
}
.legal-content {
  padding: var(--s6);
}
.legal-content h1 {
  font-size: 2.25rem;
  margin-bottom: var(--s5);
  border-bottom: 2px solid var(--line);
  padding-bottom: var(--s3);
}
.legal-content h2 {
  font-size: 1.5rem;
  margin: var(--s5) 0 var(--s3) 0;
}
.legal-content h3 {
  font-size: 1.125rem;
  margin: var(--s4) 0 var(--s2) 0;
}
.legal-content p {
  margin-bottom: var(--s4);
  color: var(--ink-soft);
  font-size: 0.9375rem;
}
.legal-content ul {
  margin-bottom: var(--s4);
  padding-left: var(--s5);
  color: var(--ink-soft);
  font-size: 0.9375rem;
}
.legal-content li {
  margin-bottom: var(--s2);
}
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  color: var(--red);
  text-decoration: none;
  font-weight: 600;
  margin-bottom: var(--s5);
}
.legal-back:hover {
  text-decoration: underline;
}