@import url("/brand/fonts.css");

:root {
  --ss-forest-900:#1F3A26; --ss-forest-700:#2F6B2A; --ss-forest-600:#44943A;
  --ss-sea-500:#4E9B77; --ss-leaf-500:#7AB069; --ss-lime-300:#A0D093;
  --ss-mint-300:#8AD6C4; --ss-teal-300:#8FC6C6; --ss-sage-300:#A3C6A6; --ss-sage-400:#88BFA0;
  --ss-gold-300:#C5C398; --ss-gold-500:#A39F63;
  --ss-mint-50:#EEF8F4; --ss-leaf-50:#F2F7EC; --ss-sage-100:#E3EFE4; --ss-gold-50:#F7F6EC;
  --ss-white:#FFFFFF; --ss-paper:#FBFCF8; --ss-ink:#1E2B22; --ss-ink-2:#465649; --ss-ink-3:#6B7A6F;
  --ss-line:#DCE6DD; --ss-line-2:#C2D2C5;
  --ss-danger:#B5523B; --ss-danger-50:#F9ECE8;

  --bg-page:var(--ss-paper); --surface-tint:var(--ss-mint-50);
  --text-heading:var(--ss-forest-900); --text-body:var(--ss-ink); --text-muted:var(--ss-ink-3); --text-brand:var(--ss-forest-700);
  --border:var(--ss-line); --border-strong:var(--ss-line-2);
  --action-primary:var(--ss-forest-700); --action-primary-hover:var(--ss-forest-900); --action-secondary:var(--ss-sage-100);
  --gradient-leaf:linear-gradient(90deg,var(--ss-lime-300) 0%,var(--ss-leaf-500) 55%,var(--ss-sea-500) 100%);

  --font-display:"Jost","Century Gothic",Futura,sans-serif;
  --font-body:"Mulish","Century Gothic",system-ui,sans-serif;
  --tracking-wordmark:0.06em; --tracking-eyebrow:0.16em;
  --radius-leaf:28px 4px 28px 4px; --container:1160px;
  --shadow-1:0 1px 2px rgba(31,58,38,.06),0 2px 8px rgba(31,58,38,.05);
  --shadow-2:0 8px 28px rgba(31,58,38,.09);
  --shadow-focus:0 0 0 3px rgba(138,214,196,.55);
  --ease-out:cubic-bezier(.22,.61,.36,1); --dur:220ms;
  color-scheme: light;
}

* { box-sizing: border-box; }
body { margin:0; font-family:var(--font-body); color:var(--text-body); background:var(--bg-page); }
img { max-width:100%; }
.wm { font-family:var(--font-display); text-transform:uppercase; letter-spacing:var(--tracking-wordmark); line-height:1.05; }
.wm b { font-weight:600; } .wm i { font-style:normal; font-weight:300; }
.eyebrow { font:600 12px var(--font-display); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--ss-sea-500); }
.btn { white-space:nowrap; display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:500; letter-spacing:.02em; border-radius:999px; border:1.5px solid transparent; cursor:pointer; padding:12px 24px; font-size:15px; text-decoration:none; transition:background var(--dur) var(--ease-out); }
.btn.p { background:var(--action-primary); color:#fff; } .btn.p:hover { background:var(--action-primary-hover); color:#fff; }
.btn.s { background:var(--action-secondary); color:var(--text-brand); }
.btn.o { border-color:var(--ss-sage-400); color:var(--text-brand); background:transparent; } .btn.o:hover { background:var(--ss-sage-100); }
.badge { display:inline-flex; padding:4px 12px; border-radius:999px; font:600 11px var(--font-display); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; background:var(--ss-mint-50); color:var(--ss-forest-700); }
.rule { height:4px; width:64px; border-radius:4px; background:var(--gradient-leaf); }
.lbl { display:block; font:500 14px var(--font-display); letter-spacing:.02em; color:var(--text-heading); margin-bottom:6px; }
.fld { width:100%; font:16px var(--font-body); border:1.5px solid var(--border-strong); border-radius:12px; padding:12px 14px; background:#fff; color:var(--text-body); outline:none; }
.fld:focus { border-color:var(--ss-sea-500); box-shadow:var(--shadow-focus); }
a { color:var(--text-brand); } a:hover { color:var(--ss-forest-900); }