/* ===========================================================
   Cadi marketing site — design tokens + base styles
   Source of truth for colour, type, spacing and the shared pieces.
   Pages: see /pages/*.md. Components preview: components.html
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* ---- Ink (navy family — never black or grey) ---- */
  --navy: #1A2150;          /* all headings, dark sections, nav */
  --navy-raised: #232B62;   /* cards sitting on navy */
  --ink-body: #454C7A;      /* body copy on light */
  --ink-muted: #5A6189;     /* captions, meta */
  --ink-faint: #7A80A3;     /* hints */
  --on-navy: #FFFFFF;
  --on-navy-body: #C9CDE6;  /* body copy on navy */
  --on-navy-muted: #9EA4C8;

  /* ---- Grounds ---- */
  --white: #FFFFFF;
  --paper: #F4F6FB;         /* alternate sections, footers */
  --line: #E3E6F0;
  --line-soft: #EEF0F7;

  /* ---- Main colours: each has ONE job ---- */
  --blue: #4F78FF;          /* Run / the brand, the logo dot */
  --blue-button: #3F6BDD;   /* buttons with white text (contrast-safe) */
  --blue-deep: #2F4FCF;     /* blue text on white */
  --blue-tint: #DEE5FF;

  --green: #2FD27F;         /* MONEY + Grow. Fills, bars, figures on navy */
  --green-deep: #137A45;    /* money text on white */
  --green-tint: #D5F6E4;    /* "Valid", "Paid" */

  --yellow: #FFD23F;        /* ACTION + highlight: Start free, highlighted phrase, ticker, Ceiling */
  --amber-deep: #8A5A00;    /* "Due" text */
  --amber-tint: #FFF1C7;    /* "Due" fill */

  --orange: #FF7A2F;        /* CONNECT — every route to Connect, the whole FM side */
  --orange-deep: #B8471A;
  --orange-tint: #FFE3D3;

  /* ---- Accents: small doses only, never a whole section ---- */
  --cyan: #5CD6F5;          /* tags, thin lines, a dot */
  --cyan-deep: #0E6F86;
  --cyan-tint: #D3F3FB;
  --pink: #FF6FB5;          /* Conference / in person only */
  --pink-deep: #B8246D;
  --pink-tint: #FFE1EF;     /* also: "Overdue" fill (text --pink-deep) */

  /* ---- Type ---- */
  --font: 'Plus Jakarta Sans', system-ui, sans-serif;

  /* ---- Radius / spacing ---- */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-pill: 999px;
  --section-pad-m: 52px 20px;   /* mobile section padding */
  --section-pad-d: 110px 64px;  /* desktop section padding */
  --max: 1312px;                /* desktop content width */
}

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font); color: var(--navy); background: var(--white); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { max-width: 100%; display: block; }

/* ---- Type scale (mobile → desktop) ---- */
.label   { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 0; }
.h1      { font-size: clamp(36px, 6vw, 78px); font-weight: 800; letter-spacing: -.03em; line-height: 1.06; margin: 0; }
.h2      { font-size: clamp(30px, 4vw, 52px); font-weight: 800; letter-spacing: -.025em; line-height: 1.08; margin: 0; }
.h3      { font-size: clamp(20px, 2vw, 26px); font-weight: 800; letter-spacing: -.015em; line-height: 1.2; margin: 0; }
.body    { font-size: 17px; line-height: 1.65; color: var(--ink-body); margin: 0; }
.body-lg { font-size: 19px; line-height: 1.6; color: var(--ink-body); margin: 0; }
.caption { font-size: 12px; color: var(--ink-muted); margin: 8px 0 0; }
.big-num { font-size: clamp(52px, 7vw, 84px); font-weight: 800; letter-spacing: -.04em; line-height: 1; margin: 0; }
/* Headlines: sentence case. Labels: tracked caps. Never all-caps headlines. */

/* ---- Highlight: ONE phrase per headline ---- */
.hl        { padding: 0 .22em; border-radius: .18em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hl-yellow { background: var(--yellow); color: var(--navy); }
.hl-navy   { background: var(--navy); color: var(--white); }
.hl-green  { background: var(--green); color: var(--navy); }
.hl-orange { background: var(--orange); color: var(--navy); }

/* ---- Buttons (min 56px tall, full width on mobile) ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 28px; border-radius: var(--r-pill); font: 800 16px/1 var(--font); text-decoration: none; border: 0; cursor: pointer; }
.btn-start   { background: var(--yellow); color: var(--navy); }          /* Start free — the main action */
.btn-blue    { background: var(--blue-button); color: var(--white); }    /* Start free on white sections */
.btn-navy    { background: var(--navy); color: var(--white); }
.btn-outline { background: transparent; color: var(--navy); border: 2px solid var(--navy); }
.btn-outline-light { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,.6); }
.btn-connect { background: var(--orange); color: var(--navy); }          /* Book a demo / Connect */
@media (max-width: 720px) { .btn { width: 100%; } }

/* ---- Connect door: every route to Connect looks like this ---- */
.door { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 0 20px; border-radius: 16px; background: var(--orange); color: var(--navy); font-weight: 800; text-decoration: none; }
.door::after { content: '→'; font-size: 22px; }

/* ---- Pills / tags ---- */
.pill { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.pill-valid   { background: var(--green-tint);  color: var(--green-deep); }
.pill-due     { background: var(--amber-tint);  color: var(--amber-deep); }
.pill-overdue { background: var(--pink-tint);   color: var(--pink-deep); }
/* Ceiling categories */
.cat-money     { background: var(--green-tint);  color: var(--green-deep); }  /* [01] Money */
.cat-sales     { background: var(--blue-tint);   color: var(--blue-deep); }   /* [02] Sales */
.cat-ops       { background: var(--cyan-tint);   color: var(--cyan-deep); }   /* [03] Operations */
.cat-contracts { background: var(--orange-tint); color: var(--orange-deep); } /* [04] Contracts */

/* ---- Cards ---- */
.card { background: var(--white); border-radius: var(--r-lg); box-shadow: 0 22px 40px -30px rgba(26,33,80,.5); }
.card-flat { background: var(--paper); border-radius: var(--r-md); }

/* ---- Photos: always real, always captioned ---- */
.photo { position: relative; overflow: hidden; border-radius: var(--r-md); background: var(--line); }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---- Signature 1: the ceiling line (self-serve side) ---- */
.ceiling-line { position: absolute; left: -20px; right: -20px; display: flex; align-items: center; gap: 10px; z-index: 2; pointer-events: none; }
.ceiling-line::before { content: ''; height: 2px; width: 30px; background: currentColor; }
.ceiling-line span { font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.ceiling-line::after { content: ''; height: 2px; flex: 1; background: currentColor; opacity: .8; }

/* ---- Signature 2: the door arch (FM side) ---- */
.door-arch { background: var(--orange); border-radius: 999px 999px 0 0; padding: 24px 24px 0; }
.door-arch .photo { border-radius: 999px 999px 0 0; height: 100%; }

/* ---- Ticker ---- */
.ticker { display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 20px; overflow: hidden; white-space: nowrap; background: var(--yellow); color: var(--navy); font-size: 17px; }
.ticker b { font-weight: 800; }
.ticker i { font-style: normal; width: 8px; height: 8px; border-radius: 50%; background: var(--navy); flex-shrink: 0; }

/* ---- Sticky CTA (mobile, self-serve) ---- */
.sticky-cta { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); height: 64px; border-radius: var(--r-pill); background: var(--navy); display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 20px; color: var(--white); font-size: 13px; font-weight: 600; box-shadow: 0 14px 30px -14px rgba(26,33,80,.7); z-index: 50; }
.sticky-cta .btn { width: auto; min-height: 48px; }

/* ---- Rules list (thin navy dividers) ---- */
.rule-list > * { padding: 16px 0; border-top: 1.5px solid rgba(26,33,80,.14); }
.rule-list > *:last-child { border-bottom: 1.5px solid rgba(26,33,80,.14); }

/* ---- Motion: keep it calm ---- */
@media (prefers-reduced-motion: no-preference) {
  .ticker-track { animation: tick 40s linear infinite; }
  @keyframes tick { to { transform: translateX(-50%); } }
}