/* Focus Insite components. Link AFTER tokens.css. Every color reads a token. Prefix: fi- */
:root{
  --font: var(--font-sans);
  --measure: 68ch;
  --ease-standard: cubic-bezier(.2,.6,.2,1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
}

body.fi{margin:0;font-family:var(--font-sans);background:var(--surface-page);color:var(--ink-secondary);-webkit-font-smoothing:antialiased}
.fi h1,.fi h2,.fi h3{color:var(--ink-primary);margin:0}
.fi-num{font-variant-numeric:tabular-nums}
.fi-prose{max-width:var(--measure)}

/* Layout */
.fi-container{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-5)}
.fi-section{padding:var(--section-y) 0;background:var(--surface-page)}
.fi-section--tight{padding:var(--section-y-tight) 0}
.fi-section--subtle{background:var(--surface-subtle)}
.fi-section--sunken{background:var(--surface-sunken)}
.fi-section--brand{background:var(--brand)}               /* display type and ink labels only inside */
.fi-section--brand .display,.fi-section--brand .h1{color:var(--on-brand)}
.fi-section--brand p{color:var(--ink-primary)}
.fi-rule{border:0;border-top:var(--rule-width-strong) solid var(--rule-strong);margin:0}

/* Eyebrow */
.fi-eyebrow{display:block;font-size:.875rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;line-height:1.2;color:var(--ink-muted);margin:0 0 var(--space-3)}
.fi-eyebrow--brand{color:var(--on-container)}
.fi-section--brand .fi-eyebrow{color:var(--ink-primary)}

/* Buttons */
.fi-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-sans);font-size:1rem;font-weight:600;line-height:1;padding:var(--btn-pad-y) var(--btn-pad-x);border-radius:var(--radius-button);border:var(--border-width) solid transparent;text-decoration:none;cursor:pointer;transition:background-color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
.fi-btn:focus-visible{outline:2px solid var(--brand-action);outline-offset:2px}
.fi-btn--primary{background:var(--brand-action);color:var(--on-brand)}
.fi-btn--primary:hover{background:var(--brand-action-hover)}
.fi-btn--primary:active{background:var(--brand-action-active)}
.fi-btn--secondary{background:var(--surface-page);color:var(--ink-primary);border-color:var(--border-default)}
.fi-btn--secondary:hover{border-color:var(--ink-primary)}
.fi-btn--ghost{background:transparent;color:var(--ink-primary)}
.fi-btn--ghost:hover{background:var(--surface-subtle)}
.fi-btn--on-brand{background:var(--surface-page);color:var(--ink-primary);border-color:var(--ink-primary)}
.fi-btn--sm{padding:10px 20px;font-size:.875rem}
.fi-btn--lg{padding:18px 36px;font-size:1.125rem}

/* Links */
.fi a:not(.fi-btn){color:var(--brand-action);text-decoration:none}
.fi a:not(.fi-btn):hover{color:var(--brand-action-hover);text-decoration:underline}

/* Badges */
.fi-badge{display:inline-flex;align-items:center;font-size:.8125rem;font-weight:500;line-height:1;padding:6px 12px;border-radius:var(--radius-pill);white-space:nowrap}
.fi-badge--brand{background:var(--brand-container);color:var(--on-container)}
.fi-badge--neutral{background:var(--surface-subtle);color:var(--ink-secondary)}
.fi-badge--outline{background:transparent;color:var(--ink-secondary);border:var(--border-width) solid var(--border-default)}
.fi-badge--solid{background:var(--brand-action);color:var(--on-brand)}

/* Cards */
.fi-card{background:var(--surface-card);border:var(--border-width) solid var(--border-default);border-radius:var(--radius-card);padding:var(--card-pad)}
.fi-callout{background:var(--surface-brand-wash);border-left:var(--accent-rule-width) solid var(--accent-rule);border-radius:0 var(--radius-card) var(--radius-card) 0;padding:var(--card-pad)}
.fi-callout h3{color:var(--ink-primary)}
.fi-callout p{color:var(--ink-secondary)}

/* Stat */
.fi-stat__value{font-size:3rem;font-weight:800;letter-spacing:-0.02em;line-height:1;color:var(--ink-primary);font-variant-numeric:tabular-nums}
.fi-stat__label{font-size:.875rem;color:var(--ink-muted);margin-top:var(--space-2)}

/* Step number: the red numeral used in place of icons */
.fi-step{font-size:1.5rem;font-weight:800;color:var(--brand);font-variant-numeric:tabular-nums;letter-spacing:-0.02em}

/* Form fields */
.fi-field{display:block;width:100%;box-sizing:border-box;font:inherit;font-size:1rem;color:var(--ink-primary);background:var(--surface-page);border:var(--border-width) solid var(--border-default);border-radius:var(--radius-input);padding:12px 14px}
.fi-field:focus{outline:2px solid var(--brand-action);outline-offset:1px;border-color:var(--ink-primary)}
.fi-label{display:block;font-size:.875rem;font-weight:500;color:var(--ink-primary);margin-bottom:var(--space-2)}

/* Nav */
.fi-nav{position:sticky;top:0;z-index:10;background:var(--surface-page);border-bottom:var(--border-width) solid var(--border-subtle)}
.fi-nav__inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.fi-nav__links{display:flex;gap:var(--space-5);font-size:.9375rem;font-weight:500}
.fi-nav__links a:not(.fi-btn){color:var(--ink-secondary)}