/* Lenslead brand — tokens, fonts and the reusable primitives.
   Design authority: tmp/leadchimp_landing/design_handoff_lenslead_landing/README.md.
   Rules: radius 0 everywhere, hard offset shadows only (0 3px 0 / 0 4px 0),
   2px solid borders as the default, no gradients, no blur.
   This file is the ONLY place tokens live. The marketing site links it
   together with site.css; the customer portal links it alone (served by the
   app at /site-assets/brand.css) so both wear the same brand with no copying. */

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/DMSans-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/DMSans-Bold.ttf") format("truetype");
}

:root {
  --gron: #2D6A4F;        /* skogsgrön — primär, ramar, sektionsbakgrund, siffror */
  --morkgron: #1E4C36;    /* kantlinje på gröna ytor */
  --ljusgron: #BFE0CE;    /* etikett på grön botten */
  --ljusgron2: #DCEBE1;   /* brödtext på grön botten */
  --gradde: #FAF8F0;      /* sidbakgrund, inre rutor */
  --terra: #C75B39;       /* knappar, betygsstaplar, "lead" i ordmärket */
  --morkterra: #A2431F;   /* knappkant och knappskugga */
  --terrahover: #B24F30;  /* knapphover */
  --ljusterra: #E08A6C;   /* maskotens hud, hover i toppremsan */
  --black: #1E1B16;       /* bläck — text, ramar, toppremsa, kortskugga */
  --brod: #3A362E;        /* sekundär text (aldrig ljusare än detta) */
  --sand: #E4DFCE;        /* tomma betygsstaplar, avdelare */
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
/* The hero card stack's rotated layers overhang the viewport by a few px on
   purpose (handoff); clip on html too — iOS Safari can ignore overflow-x on
   body alone and let the page pan sideways. */
html { scroll-behavior: smooth; overflow-x: clip; }
html, body { margin: 0; padding: 0; background: var(--gradde); }
body { font-family: "DM Sans", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased;
       color: var(--black); overflow-x: hidden; }
a { color: var(--gron); }
a:hover { color: var(--terra); }
input, button { font-family: inherit; }

.container { max-width: 1120px; margin: 0 auto; padding-inline: clamp(20px, 4vw, 48px); }
.monolabel { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em;
             text-transform: uppercase; color: var(--gron); }

/* Ordmärke — "lens" grönt, "lead" terrakotta, gemener. Storleken sätts av sammanhanget. */
.wordmark { font-weight: 700; letter-spacing: -0.02em; text-decoration: none; }
.wordmark .l1 { color: var(--gron); }
.wordmark .l2 { color: var(--terra); }

/* Primärknapp — en enda CTA genom hela sidan */
.btn-primary { display: block; max-width: 420px; background: var(--terra); color: #fff;
               text-decoration: none; text-align: center; font-size: 19px; font-weight: 700;
               padding: 20px 18px; border: 2px solid var(--morkterra);
               box-shadow: 0 3px 0 var(--morkterra); cursor: pointer;
               transition: background-color 120ms ease; }
.btn-primary:hover { background: var(--terrahover); box-shadow: 0 2px 0 var(--morkterra); color: #fff; }
.btn-primary:disabled { cursor: default; }
.btn-primary.on-green { border-color: var(--black); box-shadow: 0 3px 0 var(--black); }
.btn-primary.on-green:hover { box-shadow: 0 2px 0 var(--black); }

/* Liten knapp (sidhuvud) */
.btn-small { text-decoration: none; background: var(--terra); color: #fff; font-size: 15px;
             font-weight: 700; padding: 12px 16px; border: 2px solid var(--morkterra); }
.btn-small:hover { background: var(--terrahover); color: #fff; }