/* Gallon palette matched to the founder-supplied Canva logo references. */
:root {
  color-scheme: light;
  --brand-mint: #3CBE8E;
  --brand-mint-hover: #38B487;
  --brand-forest: #173B2F;
  --brand-link: #20684D;
  --bg: #F5FAF7;
  --surface: #FFFFFF;
  --sunk: #F8FCFA;
  --surface-2: #F8FCFA;
  --ink: #173B2F;
  --ink2: #476255;
  --ink-2: #476255;
  --muted: #5C7367;
  --hair: #DDE9E2;
  --hair2: #EDF5F0;
  --rule: #DDE9E2;
  --rule-2: #EDF5F0;
  --em: #20684D;
  --em-h: #173B2F;
  --em-2: #3CBE8E;
  --em-soft: #E8F7F0;
  --em-ink: #FFFFFF;
  --accent: #20684D;
  --accent-h: #173B2F;
  --accent-soft: #E8F7F0;
  --accent-ink: #FFFFFF;
  --glow: rgba(60,190,142,.14);
  --g-bg: #F5FAF7;
  --g-surface: #FFFFFF;
  --g-sunk: #F8FCFA;
  --g-ink: #173B2F;
  --g-ink2: #476255;
  --g-muted: #5C7367;
  --g-hair: #DDE9E2;
  --g-em: #20684D;
  --g-em-h: #173B2F;
}
.logo .mark {
  background-image: url('/gallon-logo.svg?v=20261016-canva');
}
.btn.pri, .cta-band .btn.pri, .gate button.go,
.gallon-login button[type="submit"] {
  background: var(--brand-mint);
  border-color: var(--brand-mint);
  color: var(--brand-forest);
}
.btn.pri:hover, .cta-band .btn.pri:hover, .gate button.go:hover,
.gallon-login button[type="submit"]:hover {
  background: var(--brand-mint-hover);
  border-color: var(--brand-mint-hover);
  color: var(--brand-forest);
}
.progress, .sub .ind, .track i, .bar i, .vp .bar i, .steps .track i {
  background: var(--brand-mint);
}
.top nav a::after, .panel .hd span i, .sub a.os::before {
  background: var(--brand-mint);
}
.tabs button.on, .stepper .s.now i, .cal .day.today {
  border-color: var(--brand-mint);
}
.nav a.on {
  background: var(--accent-soft);
  color: var(--brand-forest);
  box-shadow: inset 2px 0 0 var(--brand-mint);
}
.hero h1 em .w, .hero .display em .w {
  background-image: linear-gradient(100deg,#173B2F 0%,#20684D 45%,#173B2F 100%);
}
.gallon-login {
  background: radial-gradient(circle at 14% 9%,#E8F7F0,transparent 34%),#F5FAF7;
  color: var(--brand-forest);
}
.gallon-login .brand { color: var(--brand-forest); }
.gallon-login p, .gallon-login .notice { color: var(--muted); }
.gallon-login input { color: var(--brand-forest); border-color: #BDCEC4; }
.gallon-login .card { border-color: var(--hair); }
.gallon-brand-mark { display: block; flex: none; }
.cta-band, .si-l { background: var(--brand-forest); }