/* GENERATED FILE — DO NOT EDIT BY HAND.
   Source: syncera-design-system/package/src/marketing.css (v1.1.0).
   Regenerate: npm run sync:tokens. Drift check: npm run check:tokens. */
/* Syncera MARKETING layer — brand and collateral components (header band, claim
   stack, CTA block, data rows, footer, button, stat tile, site nav, chip, label,
   rule). Import after foundations/tokens.css.
   Screen build — for print, drop radii and shadows (see the system doc). */

.sy-surface { background: var(--sy-cream); color: var(--sy-navy); font-family: var(--sy-font-ui); }

/* ---- header band ---- */
.sy-header-band {
  background: var(--sy-navy);
  color: var(--sy-white);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--sy-space-7) var(--sy-space-5);
}

/* ---- label ---- */
.sy-label {
  font-family: var(--sy-font-ui); font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--sy-track-label);
  font-size: var(--sy-text-label); color: var(--sy-muted); margin: 0 0 var(--sy-space-3);
}
/* tone: accent is --sy-green-text (4.58:1 on cream), never raw --sy-green
   (1.8:1). See hard rule 6. */
.sy-label--muted  { color: var(--sy-muted); }
.sy-label--accent { color: var(--sy-green-text); font-weight: 600; }

/* ---- rule ---- */
.sy-rule { border: 0; border-top: var(--sy-rule) solid var(--sy-line); margin: 0; }

/* ---- claim stack ---- */
.sy-claim-stack { list-style: none; margin: 0; padding: 0; }
.sy-claim {
  font-family: var(--sy-font-display); font-weight: 700;
  font-size: clamp(20px, 3vw, 34px); color: var(--sy-navy);
  padding: var(--sy-space-4) 0;
  border-bottom: var(--sy-rule) solid var(--sy-line);
}
.sy-claim[data-last] { border-bottom: 0; }

/* ---- CTA block ---- */
.sy-cta {
  background: var(--sy-navy); color: var(--sy-white);
  padding: var(--sy-space-6) var(--sy-space-6);
}
.sy-cta-setup, .sy-cta-payoff {
  font-family: var(--sy-font-display); font-weight: 700;
  font-size: clamp(18px, 2.6vw, 30px); line-height: 1.25; margin: 0;
}
.sy-cta-payoff { color: var(--sy-green); }
.sy-cta-marker { color: var(--sy-white); }

/* ---- data rows ---- */
.sy-rows { margin: 0; }
.sy-row {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: var(--sy-space-4) 0;
  border-bottom: var(--sy-rule) solid var(--sy-line);
}
.sy-row-label, .sy-row-value {
  font-family: var(--sy-font-display); font-weight: 700;
  font-size: clamp(18px, 2.4vw, 28px); color: var(--sy-navy); margin: 0;
}
.sy-row-marker { color: var(--sy-green); }
.sy-row-unit {
  font-family: var(--sy-font-ui); font-weight: 400;
  font-size: 0.42em; color: var(--sy-muted); margin-left: 0.35em;
}

/* ---- footer ---- */
.sy-footer { display: flex; gap: var(--sy-space-5); align-items: flex-start; }
.sy-footer-qr { flex: 0 0 auto; line-height: 0; }
.sy-footer-url {
  font-family: var(--sy-font-ui); font-weight: 500;
  font-size: 16px; color: var(--sy-navy); margin: 0 0 var(--sy-space-2);
}
.sy-footer-note {
  font-family: var(--sy-font-ui); font-size: 11px;
  color: var(--sy-muted); margin: 0 0 2px; line-height: 1.45;
}
.sy-footer-marker { color: var(--sy-green); }

/* ---- status: never the brand green ---- */
.sy-status-ok   { color: var(--sy-status-green); }
.sy-status-warn { color: var(--sy-status-amber); }
.sy-status-bad  { color: var(--sy-status-red); }

/* ---- button ----
   One button, three fixed colourways. Primary is a green SURFACE with navy
   text — the only sanctioned way to make a button green (hard rule 6), and
   9.2:1. Radii are the two tokens; nothing here invents a third. */
.sy-btn {
  font-family: var(--sy-font-ui); font-weight: 600;
  display: inline-block; text-align: center; text-decoration: none;
  border: var(--sy-rule) solid transparent; border-radius: var(--sy-radius-sm);
  cursor: pointer; transition: transform 150ms ease, background-color 150ms ease,
    color 150ms ease, border-color 150ms ease;
}
.sy-btn:hover { transform: translateY(-1px); }
.sy-btn:focus-visible { outline: 2px solid var(--sy-green-text); outline-offset: 2px; }

.sy-btn--md { font-size: var(--sy-text-body);  padding: var(--sy-space-3) var(--sy-space-5); }
.sy-btn--sm { font-size: var(--sy-text-small); padding: var(--sy-space-2) var(--sy-space-4); }

.sy-btn--primary   { background: var(--sy-green); color: var(--sy-navy); }
.sy-btn--primary:hover { background: var(--sy-green-text); color: var(--sy-white); }

/* Border is --sy-muted, not --sy-line: a hairline on cream is 1.22:1, so the
   button's only affordance would be invisible (WCAG 1.4.11 wants 3:1 for the
   visual boundary of a control). --sy-muted is 4.51:1 and still reads light.
   This was MY defect, not the site's: syncerauk.com's own secondary button used a
   1.5px --sy-ink border at ~14.5:1 and was fine. I reached for --sy-line here and
   then briefly blamed the site for it. Corrected 2026-07-30. */
.sy-btn--secondary { background: transparent; color: var(--sy-navy); border-color: var(--sy-muted); }
.sy-btn--secondary:hover { border-color: var(--sy-navy); }

.sy-btn--quiet     { background: transparent; color: var(--sy-muted); padding-left: 0; padding-right: 0; }
.sy-btn--quiet:hover { color: var(--sy-navy); transform: none; }

/* On navy the secondary button's navy text would vanish. */
.sy-on-navy .sy-btn--secondary { color: var(--sy-white); border-color: var(--sy-on-navy-muted); }
.sy-on-navy .sy-btn--secondary:hover { border-color: var(--sy-white); }
.sy-on-navy .sy-btn--quiet { color: var(--sy-on-navy-muted); }
.sy-on-navy .sy-btn--quiet:hover { color: var(--sy-white); }

/* ---- stat tile ----
   A proof point: display-face figure, green LEFT RULE (never green type — brand
   green on white is 1.95:1, hard rule 6), note free to wrap. */
.sy-stat {
  background: var(--sy-white);
  border: var(--sy-rule) solid var(--sy-line);
  border-left: 3px solid var(--sy-green);
  border-radius: var(--sy-radius-sm);
  padding: var(--sy-space-4) var(--sy-space-4) var(--sy-space-4) var(--sy-space-5);
}
.sy-stat-figure {
  font-family: var(--sy-font-display); font-weight: 700;
  font-size: var(--sy-text-title); line-height: var(--sy-leading-tight);
  letter-spacing: -0.02em; color: var(--sy-navy);
  margin: 0 0 var(--sy-space-1);
}
.sy-stat-note {
  font-family: var(--sy-font-ui); font-size: var(--sy-text-small);
  line-height: 1.4; color: var(--sy-muted); margin: 0;
}
.sy-stat-grid { display: grid; gap: var(--sy-space-4); margin: var(--sy-space-5) 0; }
.sy-stat-grid--2 { grid-template-columns: repeat(2, 1fr); }
.sy-stat-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sy-stat-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 680px) {
  .sy-stat-grid--2, .sy-stat-grid--3, .sy-stat-grid--4 { grid-template-columns: 1fr; }
}
/* On navy the white tile would punch a hole in the block. */
.sy-on-navy .sy-stat { background: transparent; border-color: var(--sy-on-navy-muted); }
.sy-on-navy .sy-stat-figure { color: var(--sy-white); }
.sy-on-navy .sy-stat-note { color: var(--sy-on-navy-muted); }

/* ---- site nav ----
   Marketing header. HeaderBand is the navy collateral band and is NOT this. */
.sy-nav { border-bottom: var(--sy-rule) solid var(--sy-line); padding: var(--sy-space-5) 0; }
.sy-nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sy-space-4); flex-wrap: wrap;
}
.sy-nav-home { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.sy-nav-links { display: flex; align-items: center; gap: var(--sy-space-5); }
.sy-nav-link {
  font-family: var(--sy-font-ui); font-weight: 500; font-size: var(--sy-text-small);
  color: var(--sy-muted); text-decoration: none;
  padding-bottom: 2px; border-bottom: 2px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
}
.sy-nav-link:hover { color: var(--sy-navy); }
/* The underline marks where you are, but it is deliberately NOT the only signal:
   green on cream is 1.82:1, under the 3:1 WCAG 1.4.11 asks of a state indicator,
   so the label also moves --sy-muted -> --sy-navy and the element carries
   aria-current. Keep both. The same reasoning covers .sy-stat's green left rule
   (1.95:1) and the nav's bottom hairline (1.22:1) — those are pure decoration
   rather than state, so the threshold does not apply to them. */
.sy-nav-link.is-current { color: var(--sy-navy); border-bottom-color: var(--sy-green); }
/* Same underline, different claim: the conversion path, not where you are. */
.sy-nav-link.is-promoted { color: var(--sy-navy); font-weight: 600; border-bottom-color: var(--sy-green); }
.sy-nav-link.is-emphasis {
  background: var(--sy-navy); color: var(--sy-white);
  padding: var(--sy-space-2) var(--sy-space-4);
  border-radius: var(--sy-radius-sm); border-bottom-color: transparent;
}
.sy-nav-link.is-emphasis:hover { background: var(--sy-ink); color: var(--sy-white); }
.sy-nav-link:focus-visible { outline: 2px solid var(--sy-green-text); outline-offset: 2px; }
@media (max-width: 560px) {
  .sy-nav-links { gap: var(--sy-space-4); }
  .sy-nav-link { font-size: var(--sy-text-label); }
}

/* ---- chip (E4a) ----
   States a VALUE, never an action — no pointer, no hover lift, no focus ring,
   because it is not interactive. Tones are bound to the closed status set, so
   brand green cannot be used to mean "good" even by accident.
   Every text/fill pairing below is measured to pass AA on the fill AND on bare
   cream, so a chip is legible whether or not its fill renders. */
.sy-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--sy-font-ui);
  font-size: var(--sy-text-label);
  font-weight: 600;
  line-height: 1.35;
  padding: 2px 8px;
  border-radius: var(--sy-radius-sm);
  white-space: nowrap;
  vertical-align: baseline;
}
.sy-chip-glyph { font-size: 0.9em; line-height: 1; }

.sy-chip--neutral { background: #eceef2; color: #48556c; }
.sy-chip--success { background: #d6e9d8; color: #0f6b47; }
.sy-chip--warning { background: #f3e3bf; color: #6b4a00; }
.sy-chip--danger  { background: #f1dbd2; color: #8f2f26; }
.sy-chip--info    { background: #dfe3e6; color: #2b4c80; }

/* ---- application surfaces (E4a) ----
   Thin helpers, not a UI kit. They exist so an application author reaches for
   a token rather than inventing a grey — which is the whole point of E4a. */
.sy-app        { background: var(--sy-portal-bg); color: var(--sy-portal-text); font-family: var(--sy-font-ui); }
.sy-app-card   { background: var(--sy-portal-surface); border: var(--sy-rule) solid var(--sy-portal-border); border-radius: var(--sy-radius); }
.sy-app-text-2 { color: var(--sy-portal-text-secondary); }
.sy-app-text-3 { color: var(--sy-portal-text-tertiary); }

/* Visually hidden, still announced. Used by Field's required marker. */
.sy-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}