/* ============================================================
   LFSA Digital — design tokens & core components
   v1.0 · August 2026 · codified from lfsadigital.com

   Source of truth: the "LFSA Digital Design System" Claude Design
   project. Section 07 of that document is reproduced below, then
   extended with the states the document specifies in prose but could
   not express as inline styles (focus ring, range thumb, brand-icon
   hover).

   Two deliberate departures from section 07, resolving a drift in the
   source: --wrap is 1180px (07 said 1100px) and --sec-x tops out at
   28px (07 said 24px). The design document's own layout uses 1180px
   and 28px throughout, so those are canonical. Do not "restore" the
   07 values on a re-import.

   Head boilerplate that must accompany this file:
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
   Add &family=JetBrains+Mono:wght@400;500 when the page shows code or
   hex values in monospace.
   ============================================================ */

:root {
  /* brand */
  --navy:  #0A2463;
  --deep:  #061640;
  --gold:  #F5C518;
  --gold-hover: #d4a912;
  --blue:  #2DA0E0;

  /* support — each has exactly one sanctioned use */
  --logo-cyan: #2BBBFF;   /* the logo mark only, never UI */
  --whatsapp:  #25D366;   /* the WhatsApp button only */

  /* text on dark */
  --text:  #f4f4f5;
  --body:  #e5e7eb;
  --text-2:#cbd5e1;
  --mute:  #94a3b8;

  /* surfaces on dark */
  --card:   rgba(255,255,255,.04);
  --line:   rgba(255,255,255,.08);
  --divide: rgba(255,255,255,.07);
  --gold-tint: rgba(245,197,24,.10);
  --blue-tint: rgba(45,160,224,.10);

  /* light document surface */
  --doc-bg:   #fbfbfc;
  --doc-ink:  #16181d;
  --doc-mute: #5b6472;
  --doc-line: #e3e6ec;
  /* --blue on white is 2.91:1 and fails AA. This is the same blue darkened to
     75%, which clears it at 4.86:1. Use it for any accent text on a light
     surface; --blue stays the accent on navy, where it passes at 4.99:1. */
  --blue-ink: #2278a8;

  /* type */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* shape */
  --r-btn:  8px;
  --r-tile: 12px;
  --r-card: 16px;
  --r-pill: 20px;
  --r-full: 50%;

  /* rhythm */
  --sec-y:  clamp(64px,8vw,104px);
  --sec-x:  clamp(20px,5vw,28px);
  --wrap:   1180px;
  --nav-h:  72px;

  /* motion */
  --t: .2s;
}

/* ------------------------------------------------------------
   Page shell
   ------------------------------------------------------------ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}

body {
  background: var(--navy);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

h1, h2, h3, h4 { font-family: var(--font-display); }

a {
  color: var(--gold);
  text-decoration: none;
  transition: color var(--t), border-color var(--t), background var(--t),
              transform var(--t), box-shadow var(--t);
}
a:hover { color: var(--gold-hover); }

::selection { background: var(--gold); color: var(--navy); }

.sec  { padding: var(--sec-y) var(--sec-x); }
.dark { background: var(--deep); }
.wrap { max-width: var(--wrap); margin: 0 auto; }

/* Skip link — off-screen until focused, then pinned top-left over the nav.
   First tabbable element on every page. */
.skip-link {
  position: absolute; left: 8px; top: 8px; z-index: 200;
  transform: translateY(-150%);
  background: var(--gold); color: var(--deep);
  font-family: var(--font-display); font-weight: 700; font-size: .875rem;
  padding: 10px 18px; border-radius: var(--r-btn);
}
.skip-link:focus { transform: translateY(0); color: var(--deep); }

/* Footer fine print. rgba(255,255,255,.28) on navy is 2.4:1 and fails AA;
   --mute clears it at 5.6:1. */
.fineprint {
  font-family: var(--font-display);
  color: var(--mute); font-size: .78rem;
}

/* Focus ring — 2px solid gold, 2px offset, 6px radius. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ------------------------------------------------------------
   Buttons — one gold button per view. Everything else is
   outline or a text link. The label always names the thing.
   ------------------------------------------------------------ */

.btn-y {
  display: inline-flex; align-items: center; gap: 11px;
  background: var(--gold); color: var(--deep);
  padding: 16px 26px; border-radius: var(--r-btn);
  font-family: var(--font-display);
  font-weight: 700; font-size: 1rem; letter-spacing: .2px;
}
.btn-y:hover {
  background: var(--gold-hover);
  color: var(--deep);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(245,197,24,.28);
}

.btn-outline {
  display: inline-flex; align-items: center; gap: 9px;
  background: transparent; color: var(--text);
  border: 1px solid rgba(255,255,255,.18);
  padding: 16px 24px; border-radius: var(--r-btn);
  font-family: var(--font-display);
  font-weight: 600; font-size: .98rem;
}
.btn-outline:hover { border-color: var(--blue); color: var(--blue); }

.btn-nav {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--gold); color: var(--deep);
  padding: 10px 20px; border-radius: var(--r-btn);
  font-family: var(--font-display);
  font-weight: 700; font-size: .875rem; letter-spacing: .3px;
}
.btn-nav:hover {
  background: var(--gold-hover);
  color: var(--deep);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(245,197,24,.3);
}

.btn-text {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 600; font-size: 1rem;
  border-bottom: 1px solid rgba(245,197,24,.35);
  padding-bottom: 3px;
}
.btn-text:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* ------------------------------------------------------------
   Cards — standard, interactive, dashed. Nothing else.
   ------------------------------------------------------------ */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(22px,3vw,30px);
}

.card-i { transition: border-color var(--t), transform var(--t), box-shadow var(--t); }
.card-i:hover {
  border-color: rgba(245,197,24,.25);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,.3);
}

.card-dashed {
  background: transparent;
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: var(--r-card);
  padding: clamp(22px,3vw,30px);
}

/* ------------------------------------------------------------
   Section anatomy — eyebrow, heading, lede, then air.
   ------------------------------------------------------------ */

.eyebrow { display: flex; align-items: center; gap: 10px; }
.eyebrow .line { width: 24px; height: 1px; background: var(--blue); }
.eyebrow .txt {
  font-family: var(--font-display);
  text-transform: uppercase; font-size: .72rem;
  font-weight: 600; letter-spacing: 3px; color: var(--blue);
}

.lede { color: var(--mute); font-size: 1.1rem; max-width: 600px; text-wrap: pretty; }

/* ------------------------------------------------------------
   Form controls — translucent, never white. Gold only on focus
   and on the selected state.
   ------------------------------------------------------------ */

.input {
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 9px;
  color: var(--text);
  font-family: var(--font-body); font-size: .95rem;
  padding: 13px 15px;
  transition: border-color var(--t), background var(--t);
}
.input:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(245,197,24,.08);
}

.choice {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--text-2);
  border-radius: 9px; padding: 12px 14px; cursor: pointer;
  transition: border-color var(--t);
}
.choice:hover { border-color: rgba(245,197,24,.4); }

.choice.is-selected {
  background: var(--gold-tint);
  border-color: var(--gold);
  color: var(--text);
}

/* Range — 6px track, gold 22px thumb with a 3px deep-navy ring. */
.range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 3px;
  background: rgba(255,255,255,.12);
  outline: none;
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: var(--r-full);
  background: var(--gold);
  border: 3px solid var(--deep);
  cursor: pointer;
}
.range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: var(--r-full);
  background: var(--gold);
  border: 3px solid var(--deep);
  cursor: pointer;
}

/* ------------------------------------------------------------
   Pills, badges & step markers
   Names match the live site: the gold circle is .step-num (not .step,
   which the site uses for the step container). The bordered price
   chip is .chip (not .tag, which the site uses for the blue label
   that tokens calls .meta).
   ------------------------------------------------------------ */

.pill {
  font-size: .86rem; color: var(--text-2);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  padding: 7px 14px; border-radius: var(--r-pill);
}

.badge {
  font-family: var(--font-display);
  font-size: .62rem; font-weight: 700; letter-spacing: 1px;
  color: var(--deep); background: var(--gold);
  padding: 4px 9px; border-radius: 5px;
}

.chip {
  font-family: var(--font-display);
  font-weight: 600; font-size: .68rem; letter-spacing: 1.3px;
  text-transform: uppercase; color: var(--mute);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  padding: 4px 9px; border-radius: 5px;
}

.meta {
  font-family: var(--font-display);
  font-size: .7rem; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--blue);
}

.step-num {
  width: 64px; height: 64px; border-radius: var(--r-full);
  background: linear-gradient(135deg, rgba(245,197,24,.12), rgba(45,160,224,.06));
  border: 1px solid rgba(245,197,24,.18);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.35rem;
  font-weight: 700; color: var(--gold);
}

.tile {
  width: 64px; height: 64px; border-radius: 9px;
  background: linear-gradient(135deg, rgba(245,197,24,.14), rgba(45,160,224,.08));
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: 1.3rem;
}

/* Brand icons — muted by default, gold on hover.
   Never coloured to the platform brand. */
.brand-icon { color: var(--mute); transition: color var(--t); }
.brand-icon:hover { color: var(--gold); }

/* Nav links — secondary by default, gold on hover. Never more than six. */
.nav-link { color: var(--text-2); }
.nav-link:hover { color: var(--gold); }

/* ------------------------------------------------------------
   Grid rule — auto-fit for variable counts. For a fixed odd
   count, declare explicit columns per breakpoint or the last
   item orphans onto its own row.
   ------------------------------------------------------------ */

.steps5 { display: grid; grid-template-columns: repeat(5, 1fr); }
@media (max-width:1040px) { .steps5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width:660px)  { .steps5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:430px)  { .steps5 { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   Light document surface — reports, proposals, invoices,
   contracts. Dark PDFs don't print and don't get trusted.
   ------------------------------------------------------------ */

.doc {
  background: var(--doc-bg);
  color: var(--doc-ink);
  font-family: var(--font-body);
}
.doc .masthead {
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: -.6px;
  padding-bottom: 16px;
  border-bottom: 3px solid var(--navy);
}
.doc .mute { color: var(--doc-mute); }
.doc .rule { border-color: var(--doc-line); }
.doc .measure { max-width: 820px; font-size: 16px; line-height: 1.7; }
.doc .pull {
  border-left: 3px solid var(--gold);
  background: #fff;
  color: var(--doc-mute);
}
.doc .figure {
  background: var(--gold); color: var(--deep);
  border-radius: 10px; padding: 14px 18px;
  font-family: var(--font-display); font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; }
  .btn-y:hover, .btn-nav:hover, .card-i:hover { transform: none; }
}