/* ===========================================================================
   Marketing Mapped Out -- canonical design tokens
   Source of truth: the Canva brand kit. Six colors, Poppins, nothing else.
   Locked by Alex, Sept 20 2026.

   THE SIX ARE THE LAW. Every other value in this file is a mechanical mix of
   two of them -- no new hue is introduced anywhere. If a design needs a color
   that is not in here, the design is wrong, not the palette.

   This file is the only place a raw value exists. Every page imports it.
   =========================================================================== */

:root{

  /* =======================================================================
     THE SIX BRAND COLORS. Do not edit. Do not add a seventh.
     ======================================================================= */
  --teal:   #2e4d4d;   /* oklch(39.6% .037 195.8) */
  --sage:   #769a9a;   /* oklch(65.9% .040 196.2) */
  --lime:   #b2c34a;   /* oklch(78.1% .146 116.7) */
  --black:  #000000;
  --white:  #ffffff;
  --mist:   #eaeff1;   /* oklch(94.9% .006 223.5) */

  /* =======================================================================
     DERIVED. Each one is stated as the mix that produced it, so anyone can
     regenerate it and nobody has to guess whether it is on-brand.
     ======================================================================= */

  /* Teal ramp */
  --teal-900:  #213939;  /* teal + 18% black. Hero band, closing CTA band.   */
  --teal-600:  #466767;  /* teal + 35% sage.  Links, secondary ink on light. */

  /* Sage ramp */
  --sage-lift: #a9c0c0;  /* sage + 45% mist.  Body copy on dark grounds.     */

  /* Hairlines */
  --border:      #d0dcdd;                 /* mist + 22% sage. Rules on light */
  --border-dark: rgba(169,192,192,.22);   /* sage-lift at 22%. Rules on dark */
  --border-hair: rgba(169,192,192,.12);   /* the lighter of the two on dark  */

  /* Lime ramp */
  --lime-deep: #8da755;  /* sampled from the logo gradient. Gradient end.    */
  --lime-soft: #d9e3c7;  /* lime + 72% mist. Tinted fill on light grounds.   */
  --lime-wash: rgba(178,195,74,.10);      /* lime at 10%. Fill on dark.      */
  --cta: linear-gradient(160deg, #b2c34a, #8da755);  /* the logo gradient    */

  /* Functional only. NOT a brand color. Form validation and nothing else.
     It never appears on a marketing surface. */
  --alert: #9e3b32;

  /* =======================================================================
     TYPE -- Poppins only
     ======================================================================= */
  --font: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
          Helvetica, Arial, sans-serif;

  --w-body: 400;   /* all body copy                       */
  --w-med:  600;   /* emphasis, labels, card titles, H4   */
  --w-btn:  700;   /* buttons and H3                      */
  --w-head: 800;   /* H1 and H2 only                      */

  --t-display: clamp(40px, 5.2vw, 66px);
  --t-h2:      clamp(30px, 3.6vw, 44px);
  --t-h3:      clamp(20px, 1.8vw, 24px);
  --t-h4:      18px;
  --t-lede:    clamp(18px, 1.6vw, 20px);
  --t-body:    16px;
  --t-small:   15px;
  --t-fine:    13px;

  --ls-tight: -.025em;   /* H1, H2            */
  --ls-snug:  -.015em;   /* H3, H4, numerals  */
  --lh-head:  1.08;
  --lh-sub:   1.25;
  --lh-body:  1.5;
  --lh-lede:  1.55;

  /* =======================================================================
     LAYOUT, SHAPE, MOTION
     ======================================================================= */
  --page:   1080px;   /* section container                  */
  --col:    680px;    /* reading measure. Prose never wider */
  --gutter: 20px;
  --band:   clamp(64px, 9vw, 120px);

  --r-sm:  4px;    /* inputs, chips    */
  --r:     6px;    /* buttons          */
  --r-lg: 10px;    /* cards, panels    */
  --ease:  cubic-bezier(.22,.9,.28,1);
  --dur:   .2s;
}

/* ===========================================================================
   BASE
   =========================================================================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--mist);
  color:var(--teal);
  font:var(--w-body) var(--t-body)/var(--lh-body) var(--font);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--lime);color:var(--teal-900)}

h1,h2{margin:0;font-weight:var(--w-head);letter-spacing:var(--ls-tight);
      line-height:var(--lh-head);text-wrap:balance}
h3{margin:0;font-weight:var(--w-btn);letter-spacing:var(--ls-snug);
   line-height:var(--lh-sub);font-size:var(--t-h3)}
h4{margin:0;font-weight:var(--w-med);line-height:1.35;font-size:var(--t-h4)}
h1{font-size:var(--t-display)}
h2{font-size:var(--t-h2)}
p{margin:0}

.wrap{max-width:var(--page);margin-inline:auto;padding-inline:var(--gutter)}
.measure{max-width:var(--col)}
.lede{font-size:var(--t-lede);line-height:var(--lh-lede);color:var(--teal-600)}
.small{font-size:var(--t-small)}
.fine{font-size:var(--t-fine);color:var(--teal-600)}

/* Sage is 2.64:1 on mist. It is NOT a body text color on light grounds.
   It is a hairline, and a label at 18px and up. Enforced here. */
.label{font-size:var(--t-h4);font-weight:var(--w-med);color:var(--sage)}

/* ===========================================================================
   BANDS -- the only four section grounds. Alternate them; never invent one.
   Type colors flip automatically. Never hand-set a color inside a band.
   =========================================================================== */
.band{padding-block:var(--band)}
.band--mist  {background:var(--mist)}
.band--white {background:var(--white)}
.band--teal  {background:var(--teal)}
.band--deep  {background:var(--teal-900)}

.band--teal, .band--deep{color:var(--sage-lift)}
.band--teal h1,.band--teal h2,.band--teal h3,.band--teal h4,
.band--deep h1,.band--deep h2,.band--deep h3,.band--deep h4{color:var(--white)}
.band--teal .lede,.band--deep .lede{color:var(--sage-lift)}
.band--teal .fine,.band--deep .fine{color:var(--sage-lift)}
.band--teal .label,.band--deep .label{color:var(--sage-lift)}
.band--teal strong,.band--deep strong{color:var(--mist);font-weight:var(--w-med)}
.band--teal .accent,.band--deep .accent{color:var(--lime)}

.band--mist h1,.band--mist h2,.band--mist h3,.band--mist h4,
.band--white h1,.band--white h2,.band--white h3,.band--white h4{color:var(--teal)}
.band--mist .lede,.band--white .lede{color:var(--teal-600)}
.band--mist strong,.band--white strong{color:var(--black);font-weight:var(--w-med)}

/* ===========================================================================
   BUTTONS -- one primary, one quiet. No third variant.
   Teal on lime is 4.73:1. It passes. Do not swap it for sage or white.
   =========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--cta);
  color:var(--teal);
  font:var(--w-btn) 17px/1.7 var(--font);
  padding:17px 32px 16px;
  border:0;border-radius:var(--r);
  text-decoration:none;cursor:pointer;
  transition:filter var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
.btn--sm{font-size:var(--t-small);padding:13px 22px 12px}

.btn--quiet{background:none;color:var(--teal);border:1px solid var(--border)}
.band--teal .btn--quiet,.band--deep .btn--quiet{
  color:var(--mist);border-color:var(--border-dark);
}
.btn--quiet:hover{filter:none;border-color:var(--lime);transform:none}

.textlink{
  font-size:var(--t-small);font-weight:500;text-decoration:none;
  color:var(--teal-600);
  border-bottom:1px solid var(--border);padding-bottom:3px;
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.band--teal .textlink,.band--deep .textlink{
  color:var(--mist);border-bottom-color:var(--border-dark);
}
.textlink:hover{border-bottom-color:var(--lime)}

/* ===========================================================================
   SURFACES -- flat fill, 1px border, no drop shadow, ever.
   =========================================================================== */
.card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:clamp(24px,3vw,36px);
}
.band--teal .card,.band--deep .card{
  background:rgba(255,255,255,.03);
  border-color:var(--border-dark);
}
.rule{border:0;border-top:1px solid var(--border);margin:0}
.band--teal .rule,.band--deep .rule{border-top-color:var(--border-hair)}

/* ===========================================================================
   FORMS
   =========================================================================== */
input,textarea,select{
  font:var(--w-body) var(--t-body)/var(--lh-body) var(--font);
  color:var(--teal);background:var(--white);
  border:1px solid var(--border);border-radius:var(--r-sm);
  padding:13px 14px;width:100%;
}
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--lime);outline-offset:1px;border-color:var(--lime);
}
.error{color:var(--alert);font-size:var(--t-fine);font-weight:var(--w-med)}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;
    scroll-behavior:auto !important}
}