/* INSPIRO Intelligence: page styles. Tokens are scoped to .ii and follow the site's own variables (light and dark). */
.ii {
  --ii-bg: var(--bg); --ii-ink: var(--fg); --ii-muted: var(--muted); --ii-line: var(--line);
  --ii-card: color-mix(in srgb, var(--bg) 94%, var(--fg) 6%);
  --ii-surface: color-mix(in srgb, var(--bg) 90%, var(--fg) 10%);
  --ii-field: color-mix(in srgb, var(--bg) 97%, var(--fg) 3%);
  --ii-field-line: color-mix(in srgb, var(--fg) 28%, var(--bg) 72%);
  --ii-accent: var(--accent); --ii-accent-ink: #ffffff; --ii-accent-soft: var(--tint);
  --ii-ok: #17794f; --ii-warn: #9a5b00; --ii-bad: #a3262a;
  --ii-ok-bg: #e6f5ee; --ii-warn-bg: #fff1d6; --ii-bad-bg: #fbe6e7; --ii-flag-bg: #fff8e8; --ii-flag-line: #f3e1b8;
  --ii-serif: var(--font-display); --ii-sans: var(--font-body);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ii {
    --ii-ok: #4CC38A; --ii-warn: #F0B04A; --ii-bad: #FF7A80;
    --ii-ok-bg: rgba(76,195,138,.14); --ii-warn-bg: rgba(240,176,74,.14); --ii-bad-bg: rgba(255,122,128,.14); --ii-flag-bg: rgba(240,176,74,.10); --ii-flag-line: rgba(240,176,74,.30);
  }
}
:root[data-theme="dark"] .ii {
  --ii-ok: #4CC38A; --ii-warn: #F0B04A; --ii-bad: #FF7A80;
  --ii-ok-bg: rgba(76,195,138,.14); --ii-warn-bg: rgba(240,176,74,.14); --ii-bad-bg: rgba(255,122,128,.14); --ii-flag-bg: rgba(240,176,74,.10); --ii-flag-line: rgba(240,176,74,.30);
}
.ii * { box-sizing: border-box; }
.ii { font-family: var(--ii-sans); color: var(--ii-ink); background: var(--ii-bg); line-height: 1.55; }
.ii-wrap { max-width: 920px; margin: 0 auto; padding: 0 22px; }
.ii h1, .ii h2, .ii h3 { font-family: var(--ii-serif); font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.ii h1 { font-size: clamp(30px, 5vw, 46px); margin: 8px 0 14px; }
.ii h2 { font-size: 26px; margin: 0 0 6px; }
.ii h3 { font-size: 19px; margin: 0 0 8px; }
.ii-eyebrow { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ii-muted); font-weight: 600; }
.ii-lede { font-size: 18px; color: var(--ii-muted); max-width: 640px; }
.ii-hero { padding: 56px 0 28px; }
.ii-dot { color: var(--ii-accent); }

.ii-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 26px 0 40px; }
.ii-card { background: var(--ii-card); border: 1px solid var(--ii-line); border-radius: 16px; padding: 26px; display: flex; flex-direction: column; }
.ii-card p { color: var(--ii-muted); }
.ii-card .ii-btn { margin-top: auto; align-self: flex-start; }
.ii-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 20px; }
.ii-chip { font-size: 12px; border: 1px solid var(--ii-line); border-radius: 99px; padding: 4px 10px; color: var(--ii-muted); }

.ii-panel { background: var(--ii-card); border: 1px solid var(--ii-line); border-radius: 16px; padding: 26px; margin: 18px 0; }
.ii-step { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.ii-step b { width: 28px; height: 28px; border-radius: 50%; background: var(--ii-accent-soft); color: var(--ii-accent); display: grid; place-items: center; font-size: 13px; flex: none; }
.ii-field { margin-bottom: 16px; }
.ii-field label, .ii-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.ii-hint { font-size: 12px; color: var(--ii-muted); margin: 0 0 6px; }
.ii-in { width: 100%; font: inherit; color: inherit; background: var(--ii-field); border: 1px solid var(--ii-field-line); border-radius: 10px; padding: 10px 12px; }
.ii-in:focus { outline: 2px solid var(--ii-accent); outline-offset: 1px; border-color: transparent; }
textarea.ii-in { min-height: 84px; resize: vertical; }
.ii-in[aria-invalid="true"] { border-color: var(--ii-bad); }
.ii-err { color: var(--ii-bad); font-size: 12px; margin-top: 4px; }
.ii-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ii-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ii-dim { border-top: 1px solid var(--ii-line); padding: 18px 0 4px; }
.ii-dim:first-of-type { border-top: 0; }
.ii-dim h4 { margin: 0 0 2px; font-size: 16px; }
.ii-dim .ii-hint { margin-bottom: 10px; }
.ii-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ii-muted); margin: 10px 0; }
.ii-check input { margin-top: 4px; }
.ii-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }

.ii-btn { font: inherit; font-weight: 600; border: 0; border-radius: 10px; padding: 12px 20px; cursor: pointer; background: var(--ii-accent); color: var(--ii-accent-ink); text-decoration: none; display: inline-block; }
.ii-btn:hover { filter: brightness(1.08); }
.ii-btn:disabled { opacity: .55; cursor: wait; }
.ii-btn.ii-ghost { background: transparent; color: var(--ii-ink); border: 1px solid var(--ii-field-line); }
.ii-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.ii-note { background: var(--ii-card); border: 1px solid var(--ii-line); border-radius: 12px; padding: 14px 16px; font-size: 13px; color: var(--ii-muted); }
.ii-status { font-size: 14px; margin-top: 12px; color: var(--ii-muted); }
.ii-status.bad { color: var(--ii-bad); }

.ii-report[hidden] { display: none; }
.ii-score { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 4px; }
.ii-score b { font-family: var(--ii-serif); font-size: 64px; line-height: 1; letter-spacing: -.03em; }
.ii-bar { height: 8px; background: var(--ii-surface); border-radius: 8px; overflow: hidden; }
.ii-bar i { display: block; height: 100%; background: var(--ii-accent); }
.ii-pill { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 99px; padding: 3px 10px; background: var(--ii-accent-soft); color: var(--ii-accent); }
.ii-pill.pass { background: var(--ii-ok-bg); color: var(--ii-ok); }
.ii-pill.human_review, .ii-pill.unavailable { background: var(--ii-warn-bg); color: var(--ii-warn); }
.ii-pill.fail { background: var(--ii-bad-bg); color: var(--ii-bad); }
.ii-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ii-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ii-table th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ii-muted); border-bottom: 1px solid var(--ii-line); padding: 8px 6px; }
.ii-table td { border-bottom: 1px solid var(--ii-line); padding: 10px 6px; vertical-align: top; }
.ii-table .n { text-align: right; font-variant-numeric: tabular-nums; }
.ii-flag { font-size: 13px; color: var(--ii-warn); background: var(--ii-flag-bg); border: 1px solid var(--ii-flag-line); border-radius: 10px; padding: 8px 12px; margin: 6px 0; }
.ii-item { border-top: 1px solid var(--ii-line); padding: 14px 0; }
.ii-item:first-child { border-top: 0; }
.ii-item p { margin: 4px 0; font-size: 14px; }
.ii-item .k { color: var(--ii-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.ii-road { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ii-road > div { background: var(--ii-card); border: 1px solid var(--ii-line); border-radius: 12px; padding: 14px; font-size: 13px; }
.ii-road h4 { margin: 0 0 8px; font-size: 14px; }
.ii-cta { background: #1b1826; border: 1px solid var(--ii-line); color: #fff; border-radius: 16px; padding: 28px; margin: 24px 0 48px; }
.ii-cta h3 { color: #fff; }
.ii-cta p { color: #cfc9db; }
.ii-foot { font-size: 12px; color: var(--ii-muted); }

.ii-q { border: 0; padding: 0; margin: 14px 0 0; min-width: 0; }
.ii-q legend { font-weight: 600; font-size: 15px; padding: 0; margin-bottom: 2px; }
.ii-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ii-opt { display: flex; align-items: flex-start; gap: 8px; border: 1px solid var(--ii-field-line); border-radius: 10px; padding: 8px 14px; background: var(--ii-field); cursor: pointer; font-size: 14px; }
.ii-opt input { margin-top: 3px; accent-color: var(--ii-accent); }
.ii-opt small { display: block; color: var(--ii-muted); font-size: 12px; font-weight: 400; margin-top: 2px; }
.ii-opt:has(input:checked) { border-color: var(--ii-accent); background: var(--ii-accent-soft); }
.ii-opt:focus-within { outline: 2px solid var(--ii-accent); outline-offset: 2px; }
.ii-stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ii-stages .ii-opt { padding: 12px 14px; }
.ii-stack { display: grid; grid-template-columns: 1fr; gap: 12px; }
.ii-file { font: inherit; font-size: 13px; max-width: 100%; }
.ii-files { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--ii-muted); }
.ii-evidence { margin-top: 12px; }
.ii-doclist { list-style: none; padding: 0; margin: 8px 0 0; font-size: 14px; }
.ii-doclist li { padding: 8px 0; border-top: 1px solid var(--ii-line); }
.ii-doclist li:first-child { border-top: 0; }
.ii-modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ii-modes .ii-opt { padding: 14px 16px; }
.ii-path { margin-top: 8px; padding-top: 6px; }
.ii-guide { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 10px 0; }
.ii-guide-card { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--ii-line); border-radius: 12px; padding: 12px 14px; background: var(--ii-field); font-size: 13px; cursor: pointer; }
.ii-guide-card:has(.ii-covers:checked) { border-color: var(--ii-accent); background: var(--ii-accent-soft); }
.ii-guide-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; font-size: 14px; }
.ii-guide-need { color: var(--ii-ink); }
.ii-guide-ex { color: var(--ii-muted); }
.ii-guide-tick { font-weight: 600; margin-top: 2px; }
.ii-guide-tick input { accent-color: var(--ii-accent); }
.ii-cover { font-size: 14px; border-radius: 10px; padding: 10px 14px; background: var(--ii-card); color: var(--ii-muted); margin: 6px 0 10px; }
.ii-cover.warn { background: var(--ii-flag-bg); color: var(--ii-warn); border: 1px solid var(--ii-flag-line); }
.ii-cover.good { background: var(--ii-ok-bg); color: var(--ii-ok); }
.ii-checklist { margin: 6px 0 12px; padding-left: 20px; font-size: 14px; }
.ii-checklist li { margin: 4px 0; }
.ii-more { margin: 14px 0 6px; }
.ii-more summary { cursor: pointer; font-size: 13px; color: var(--ii-accent); font-weight: 600; }
.ii-goals { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.ii-goal { font: inherit; font-size: 13px; border: 1px solid var(--ii-accent); background: transparent; color: var(--ii-accent); border-radius: 99px; padding: 6px 14px; cursor: pointer; }
.ii-goal:hover { background: var(--ii-accent-soft); }
[aria-invalid="true"].ii-opts { outline: 2px solid var(--ii-bad); outline-offset: 4px; border-radius: 10px; }

@media (max-width: 760px) {
  .ii-stages, .ii-modes, .ii-guide { grid-template-columns: 1fr; }
  .ii-cards, .ii-two, .ii-three, .ii-grid, .ii-road { grid-template-columns: 1fr; }
  .ii-hero { padding-top: 32px; }
}
@media print {
  .ii-noprint, .ii-actions, header, footer, nav { display: none !important; }
  .ii { background: #fff; --ii-ink: #1b1826; --ii-muted: #655f73; --ii-line: #e6e2ec; --ii-card: #f7f5fb; --ii-surface: #ece9f3; --ii-field: #fff; --ii-accent-soft: #f0ecff; }
  .ii-cta { background: #fff; color: #1b1826; border: 1px solid #1b1826; } .ii-cta h3, .ii-cta p { color: #1b1826; }
  .ii-panel { border: 0; padding: 8px 0; break-inside: avoid; }
  .ii-report[hidden] { display: none; }
}

/* monthly cap notice */
.ii-cap { padding: 22px 24px; }
.ii-cap-h { font-size: 20px; margin: 0 0 10px; color: var(--ii-ink); }
.ii-cap p { margin: 0 0 10px; }
.ii-cap-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.ii-cap-btn { font-weight: 600; border-radius: 10px; padding: 12px 20px; background: var(--ii-accent); color: var(--ii-accent-ink); text-decoration: none; display: inline-block; }
.ii-cap-btn.alt { background: transparent; color: var(--ii-ink); border: 1px solid var(--ii-field-line); }

/* SkillReady: course type */
.ii-course { background: var(--ii-accent-soft); border-radius: 12px; padding: 14px 16px; margin: 12px 0; }
.ii-course h5 { margin: 0 0 8px; font-size: 14px; color: var(--ii-ink); }
.ii-course p { margin: 0 0 8px; }
.ii-course ul { margin: 0 0 10px; padding-left: 20px; }
.ii-kvh { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.ii-overview td, .ii-overview th { text-align: left; vertical-align: top; }

/* SkillReady: add another skill */
.ii-addskill { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 6px 0 4px; }
.ii-addskill .ii-hint { margin: 0; }
[data-skill-row][hidden] { display: none; }
.ii-addskill .ii-btn[hidden] { display: none; }
.ii-basis { font-size: 12px; color: var(--ii-muted); min-width: 200px; max-width: 320px; text-align: left; }

/* brand insight preview */
.ii-insight h4 { margin: 22px 0 8px; font-size: 15px; }
.ii-ins-row { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 6px 18px; padding: 10px 0; border-top: 1px solid var(--ii-line); }
.ii-ins-row:first-child { border-top: 0; }
.ii-ins-row p { margin: 0; font-size: 14.5px; }
.ii-ins-k { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.ii-ins-tag { font-size: 11px; font-weight: 700; border-radius: 99px; padding: 2px 9px; background: var(--ii-accent-soft); color: var(--ii-accent); }
.ii-ins-tag.s-thin { background: var(--ii-warn-bg, #fff1d6); color: var(--ii-warn, #9a5b00); }
.ii-ins-tag.s-missing { background: var(--ii-bad-bg, #fbe6e7); color: var(--ii-bad, #a3262a); }
.ii-story { margin-top: 20px; }
@media (max-width: 640px) { .ii-ins-row { grid-template-columns: 1fr; } }

/* SkillReady preview: sections unlocked in a session */
.ii-locked { border: 1px dashed var(--ii-accent); border-radius: 12px; padding: 14px 16px; margin: 12px 0; background: var(--ii-accent-soft); }
.ii-locked-top { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
.ii-locked p { margin: 6px 0 0; font-size: 14px; color: var(--ii-muted); }