@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");

/* Simply C2 components: plain CSS classes over tokens.css. Type sizes below
   mirror the type styles in tokens.json (variables are not generated for
   type styles, so the values are restated here).

   Sep 2026 migration (simplyc2.com onto this system): Roboto replaces
   Figtree/DM Sans and the JetBrains Mono/IBM Plex Mono webfonts (mono is now
   a system stack). Interactive defaults moved to their accessible pairing
   (button label, selected tab, banner label); the old modifier classes still
   work and are now redundant, and a --brand-* modifier opts back into the
   exact, lower-contrast source colour where wanted. New sections (Layout,
   Type, Badge/chip, Hero, FAQ, Bands, Table, Alert) support the industries,
   guides and comparisons pages; each has its own component card. */

.sc-root { font-family: var(--font-sans); color: var(--ink); background: var(--surface-page); }
.sc-root, .sc-root *, .sc-root *::before, .sc-root *::after { box-sizing: border-box; }

/* ===== Type ============================================================ */
.sc-eyebrow { font: 500 11px/16px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin: 0; } /* CHANGED: sans + text-muted (was mono + text-eyebrow, 3.2:1) */
.sc-eyebrow--brand { font-family: var(--font-mono); color: var(--text-eyebrow); } /* ADDED: opt back into the exact source styling */
.sc-heading { font: 700 32px/36px var(--font-sans); letter-spacing: -.02em; color: var(--orange); margin: 0; }
.sc-h1 { font: 700 36px/42px var(--font-sans); letter-spacing: -.02em; color: var(--ink); margin: 0; } /* ADDED */
.sc-h2 { font: 700 24px/30px var(--font-sans); letter-spacing: -.01em; color: var(--ink); margin: 0; } /* ADDED */
.sc-h3 { font: 700 18px/26px var(--font-sans); color: var(--ink); margin: 0; } /* ADDED */
.sc-lead { font: 400 18px/26px var(--font-sans); color: var(--text-lead); max-width: 62ch; margin: 0; }
.sc-text { font: 400 16px/26px var(--font-sans); color: var(--text-lead); max-width: 68ch; margin: 0; } /* ADDED */
.sc-small { font: 400 13px/20px var(--font-sans); color: var(--text-muted); margin: 0; } /* ADDED */
.sc-accent { color: var(--orange-text); } /* ADDED: a highlighted phrase inside a heading */
.sc-prose > * + * { margin-top: var(--space-4); } /* ADDED: long-form flow */
.sc-prose > * + h2, .sc-prose > * + h3 { margin-top: var(--space-8); }
.sc-prose :where(p, li) { font-size: 16px; line-height: 1.65; color: var(--text-lead); }
.sc-prose :where(strong) { color: var(--ink); font-weight: 700; }
.sc-prose :where(ul, ol) { padding-left: 1.25em; margin: 0; }
.sc-prose :where(a) { color: var(--green-link); font-weight: 500; }

/* ===== Layout =========================================================== */
.sc-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; } /* ADDED */
.sc-container--narrow { max-width: var(--container-narrow); }
.sc-container--form { max-width: var(--form-width); }
.sc-section { padding-block: var(--space-12); } /* ADDED */
.sc-section--tight { padding-block: var(--space-8); }
.sc-section--sunken { background: var(--surface-sunken); }
.sc-section--card { background: var(--surface-card); }
.sc-stack { display: flex; flex-direction: column; gap: var(--space-4); } /* ADDED */
.sc-stack--md { gap: var(--space-6); }
.sc-stack--lg { gap: var(--space-8); }
.sc-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); } /* ADDED */
.sc-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-6); } /* ADDED */
.sc-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; } /* ADDED */
@media (min-width: 640px) { .sc-grid--2, .sc-grid--3, .sc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .sc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sc-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--green-deep); } /* ADDED: always pair with a word, per Accessibility */
.sc-dot--orange { background: var(--orange); }
.sc-dot--slate { background: var(--text-muted); }

/* ===== Button =========================================================== */
.sc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  box-sizing: border-box; height: var(--button-height); padding: 0 var(--space-5);
  border: 0; border-radius: var(--radius-md);
  background: var(--orange); color: var(--on-orange-ink); /* CHANGED: default label is now the accessible ink (was on-orange, 2.4:1) */
  text-decoration: none;
  font: 700 15px/20px var(--font-sans);
  box-shadow: var(--shadow-button); cursor: pointer;
}
.sc-btn:hover { background: var(--orange-hover); } /* ADDED: the source defines no hover state */
.sc-btn--secondary { background: var(--surface-card); color: var(--ink); border: 1.5px solid var(--orange); box-shadow: none; } /* ADDED */
.sc-btn--secondary:hover { background: var(--orange-tint); }
.sc-btn--block { display: flex; width: 100%; }
.sc-btn--sm { height: 40px; padding: 0 var(--space-4); font-size: 14px; } /* ADDED */
.sc-btn--ink-label { color: var(--on-orange-ink); } /* kept for compatibility: this is now the default */
.sc-btn--brand-label { color: var(--on-orange); } /* ADDED: opt back into the exact, 2.4:1 source white */
.sc-btn:disabled, .sc-btn[aria-disabled="true"] { background: var(--orange-disabled); color: var(--on-orange-ink); cursor: not-allowed; }
.sc-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.sc-btn__badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--radius-full); background: var(--surface-card); color: var(--ink); font: 700 13px/1 var(--font-sans); flex: none; }

/* Provider button that is not available yet */
.sc-btn--soon {
  display: flex; width: 100%; justify-content: space-between; height: 39px;
  padding: 0 var(--space-4); background: var(--surface-page); color: var(--text-disabled);
  border: 1px dashed var(--border-input); box-shadow: none; font: 400 14px/20px var(--font-sans);
}
.sc-btn--soon:hover, .sc-btn--soon:disabled, .sc-btn--soon[aria-disabled="true"] { background: var(--surface-page); color: var(--text-disabled); }
.sc-meta { font: 500 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }

/* ===== Forms ============================================================ */
.sc-field { display: flex; flex-direction: column; gap: 6px; }
.sc-field__row { display: flex; align-items: baseline; justify-content: space-between; }
.sc-label { font: 500 13px/18px var(--font-sans); color: var(--ink); } /* CHANGED: 600 → 500, Roboto has no 600 */
.sc-counter { font: 500 11px/16px var(--font-mono); color: var(--text-placeholder); }
.sc-input, .sc-select {
  box-sizing: border-box; width: 100%; height: var(--control-height); padding: 0 14px;
  border: 1px solid var(--border-input); border-radius: var(--radius-sm);
  background: var(--surface-card); color: var(--ink);
}
.sc-input { font: 400 14px/20px var(--font-mono); } /* unchanged: a code-like value, see TextField guidelines */
.sc-input::placeholder { color: var(--text-placeholder); opacity: 1; }
.sc-select { font: 400 15px/22px var(--font-sans); color: var(--ink-deep); height: 46px; }
.sc-input:focus-visible, .sc-select:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.sc-help { font: 400 11px/16px var(--font-sans); color: var(--text-muted); margin: 0; }

/* Tabs: two underlined segments */
.sc-tabs { display: flex; gap: var(--space-2); }
.sc-tab {
  flex: 1; padding: 12px 0 11px; background: none; border: 0; border-bottom: 2px solid var(--border);
  font: 500 14px/20px var(--font-sans); color: var(--text-muted); text-align: center; cursor: pointer;
}
.sc-tab[aria-selected="true"] { color: var(--orange-text); border-bottom-color: var(--orange); } /* CHANGED: default label is now orange-text (was orange, 2.4:1) */
.sc-tab--accessible[aria-selected="true"] { color: var(--orange-text); } /* kept for compatibility: this is now the default */
.sc-tab--brand[aria-selected="true"] { color: var(--orange); } /* ADDED: opt back into the exact, 2.4:1 source orange */
.sc-tab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }

/* ===== Card ============================================================= */
.sc-card { box-sizing: border-box; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.sc-card--sunken { background: var(--surface-sunken); } /* ADDED */
.sc-card--warm { background: var(--cream); border-color: var(--orange-line); } /* ADDED */
.sc-card--link { text-decoration: none; } /* ADDED: whole card is one <a> */
.sc-card--link:hover { border-color: var(--orange); }
.sc-card--link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.sc-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } /* ADDED */
.sc-card__label { font: 500 11px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.sc-card__title { font: 700 18px/26px var(--font-sans); color: var(--ink); margin: 0; }
.sc-card__text { font: 400 15px/1.6 var(--font-sans); color: var(--text-lead); margin: 0; }
.sc-card__foot { margin-top: auto; padding-top: var(--space-2); font-weight: 500; color: var(--green-link); }
.sc-card__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--text-muted); font: 700 14px/1 var(--font-sans); } /* ADDED */
.sc-card__icon--positive { background: var(--green-tint); color: var(--green-ink); }
.sc-card__icon--warm { background: var(--orange-tint); color: var(--orange-text); }
.sc-card__icon svg { width: 18px; height: 18px; }

/* ===== Badge, chip, breadcrumb ========================================= */
.sc-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--radius-full); font: 500 11px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; background: var(--surface-sunken); color: var(--text-muted); } /* ADDED */
.sc-badge--live { background: var(--green-tint); color: var(--green-ink); }
.sc-badge--soon { background: transparent; color: var(--text-muted); border: 1px dashed var(--border-input); }
.sc-badge--deal { background: var(--orange-tint); color: var(--orange-text); border: 1px solid var(--orange-line); }

.sc-chip { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: var(--radius-full); background: var(--surface-card); border: 1px solid var(--border-input); color: var(--ink); font: 500 14px/20px var(--font-sans); text-decoration: none; } /* ADDED */
a.sc-chip:hover { border-color: var(--orange); background: var(--orange-tint); }
a.sc-chip:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.sc-breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--text-muted); } /* ADDED */
.sc-breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--border-input); }
.sc-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.sc-breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.sc-breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 500; }

/* ===== Hero ============================================================= */
.sc-hero { padding-block: var(--space-12) var(--space-8); } /* ADDED */
.sc-hero__grid { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 900px) { .sc-hero__grid--split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.sc-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.sc-hero__media { background: var(--cream); border: 1px solid var(--orange-line); border-radius: var(--radius-lg); overflow: hidden; line-height: 0; }
.sc-hero__media :where(svg, img) { width: 100%; height: auto; display: block; }

/* ===== Point list (dot + title + sentence rows) ========================= */
.sc-point-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); } /* ADDED, Sep 2026 migration */
.sc-point { display: flex; gap: var(--space-4); align-items: flex-start; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); }
.sc-point .sc-dot { margin-top: 6px; }
.sc-point strong { display: block; color: var(--ink); font-size: 15px; margin-bottom: 4px; }
.sc-point span { display: block; color: var(--text-lead); font-size: 15px; line-height: 1.6; }

/* ===== Platform diagram (shared "how it works" card + connector) ======= */
.sc-platform { margin-block: var(--space-8); padding: var(--space-8) var(--space-6); background: var(--cream); border: 1px solid var(--orange-line); border-radius: var(--radius-lg); } /* ADDED, Sep 2026 migration: replaces the page-local .sc2ind-platform CSS every industries page was copying */
.sc-platform__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-4); margin-bottom: var(--space-6); }
.sc-platform__eyebrow { display: block; font: 700 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--green-deep); margin: 0 0 8px; }
.sc-platform__legend { display: flex; gap: var(--space-4); align-items: center; font-size: 13px; color: var(--text-muted); flex-wrap: wrap; }
.sc-platform__legend .sc-dot { margin-right: 6px; vertical-align: middle; }
.sc-platform__grid { display: grid; grid-template-columns: 1fr 140px 1fr; grid-template-rows: auto auto; gap: var(--space-5); align-items: stretch; }
.sc-platform__connector { grid-column: 2; grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; }
.sc-platform__connector svg { width: 100%; max-width: 150px; height: auto; display: block; }
.sc-platform__card { border-radius: var(--radius-lg); border: 2px solid var(--orange); background: var(--surface-card); padding: var(--space-5) var(--space-6); }
.sc-platform__card--green { border-color: var(--green-deep); }
.sc-platform__card--tl { grid-column: 1; grid-row: 1; }
.sc-platform__card--tr { grid-column: 3; grid-row: 1; }
.sc-platform__card--bl { grid-column: 1; grid-row: 2; }
.sc-platform__card--br { grid-column: 3; grid-row: 2; }
.sc-platform__num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--orange-tint); color: var(--orange-text); font: 700 14px/1 var(--font-sans); margin-bottom: 10px; }
.sc-platform__card--green .sc-platform__num { background: var(--green-tint); color: var(--green-ink); }
.sc-platform__card h3 { font: 700 16px/1.3 var(--font-sans); color: var(--orange-text); margin: 0 0 12px; }
.sc-platform__card--green h3 { color: var(--green-ink); }
.sc-platform__card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.sc-platform__card li { font-size: 14px; line-height: 1.5; color: var(--text-lead); padding-left: 15px; position: relative; }
.sc-platform__card li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.sc-platform__card--green li::before { background: var(--green-deep); }
@media (max-width: 820px) {
  .sc-platform__grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .sc-platform__connector { display: none; }
  .sc-platform__card--tl, .sc-platform__card--tr, .sc-platform__card--bl, .sc-platform__card--br { grid-column: 1; grid-row: auto; }
  .sc-platform__head { flex-direction: column; align-items: flex-start; }
}

/* ===== FAQ (details/summary: works without JavaScript) ================= */
.sc-faq { display: flex; flex-direction: column; gap: var(--space-3); } /* ADDED */
.sc-faq__item { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.sc-faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); cursor: pointer; list-style: none; font: 700 16px/1.4 var(--font-sans); color: var(--ink); }
.sc-faq__q::-webkit-details-marker { display: none; }
.sc-faq__q::after { content: "+"; flex: none; font-size: 22px; line-height: 1; color: var(--orange-text); }
.sc-faq__item[open] > .sc-faq__q::after { content: "\2212"; }
.sc-faq__q:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; border-radius: var(--radius-lg); }
.sc-faq__a { padding: 0 var(--space-5) var(--space-5); font-size: 15px; line-height: 1.65; color: var(--text-lead); }
.sc-faq__a > * { margin: 0; }
.sc-faq__a > * + * { margin-top: var(--space-3); }

/* ===== Bands and lists =================================================== */
.sc-cta-band { background: var(--ink); color: var(--on-ink); border-radius: var(--radius-lg); padding: var(--space-10, 40px) var(--space-8); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); } /* ADDED */
.sc-cta-band__title { margin: 0; font: 700 24px/1.25 var(--font-sans); color: var(--on-ink); }
.sc-cta-band__text { margin: 0; max-width: 56ch; font-size: 16px; color: var(--on-ink-muted); }
.sc-cta-band .sc-btn:focus-visible { outline-color: var(--surface-card); }

.sc-related { list-style: none; margin: 0; padding: 0; } /* ADDED */
.sc-related li { border-bottom: 1px solid var(--border); padding: var(--space-3) 0; }
.sc-related a { color: var(--green-link); font-weight: 500; text-decoration: none; }
.sc-related a:hover { text-decoration: underline; }

.sc-steps { list-style: none; margin: 0; padding: 0; counter-reset: sc-step; display: flex; flex-direction: column; gap: var(--space-5); } /* ADDED */
.sc-steps > li { counter-increment: sc-step; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--space-4); }
.sc-steps > li::before { content: counter(sc-step); display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-full); background: var(--orange-tint); border: 1px solid var(--orange-line); color: var(--orange-text); font: 700 14px/1 var(--font-sans); }

/* Notice: orange bar on a sunken ground */
.sc-notice {
  margin: 0; padding: 10px var(--space-4) 10px 12px; background: var(--surface-sunken);
  border-left: 3px solid var(--orange); border-radius: var(--radius-sm);
  font: 400 13px/18px var(--font-sans); color: var(--text-info);
}

/* Deal banner */
.sc-banner {
  display: flex; align-items: center; gap: var(--space-3); box-sizing: border-box; min-height: 45px;
  padding: 0 var(--space-4); background: var(--orange-tint); border: 1px solid var(--orange-line);
  border-radius: var(--radius-md); font: 400 13px/18px var(--font-sans); color: var(--brown-ink);
}
.sc-banner__label { font: 500 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--orange-text); flex: none; } /* CHANGED: orange-text (was orange-deep, 3.2:1) */
.sc-banner__label--brand { color: var(--orange-deep); } /* ADDED: opt back into the exact, 3.2:1 source colour */

/* Feature list */
.sc-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sc-features li { display: flex; align-items: flex-start; gap: 10px; min-height: 22px; font: 400 15px/22px var(--font-sans); color: var(--ink); }
.sc-features li::before { content: ""; flex: none; margin-top: 7px; width: var(--space-2); height: var(--space-2); background: var(--green-ui); border-radius: 1px; }

/* Link */
.sc-link { color: var(--green-link); font-weight: 500; text-decoration: none; }
.sc-link:hover { text-decoration: underline; }
.sc-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }

/* ===== Table ============================================================ */
.sc-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-card); } /* ADDED */
.sc-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
.sc-table :where(th, td) { padding: 12px var(--space-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.sc-table thead th { background: var(--surface-sunken); font: 700 13px/18px var(--font-sans); color: var(--ink); }
.sc-table tbody th { font-weight: 500; color: var(--ink); }
.sc-table tbody tr:last-child :where(th, td) { border-bottom: 0; }
.sc-yes { color: var(--green-ink); font-weight: 500; }
.sc-no { color: var(--text-muted); }

/* ===== Alert (form and validation messages) ============================ */
.sc-alert { margin: 0; padding: 10px var(--space-4); border: 1px solid; border-radius: var(--radius-sm); font-size: 13px; line-height: 18px; } /* ADDED */
.sc-alert--success { background: var(--success-bg); border-color: var(--success-line); color: var(--success-ink); }
.sc-alert--error { background: var(--error-bg); border-color: var(--error-line); color: var(--error-ink); }
.sc-alert--info { background: var(--info-bg); border-color: var(--info-line); color: var(--info-ink); }
.sc-alert--verified { background: var(--verified-bg); border-color: var(--verified-line); color: var(--verified-ink); }

/* ===== Utilities ========================================================= */
.sc-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ADDED */