/* Skin for the partner's functional islands (check form, truth layer, dashboard): their component styles are kept,
   their design tokens are mapped onto the template's palette, type and controls. Loaded after the island CSS. */
.app-skin, .sc-dialog, :root {
  --q-bg: #F7FAFC; --q-tint: #EBF1F5; --q-tint-2: #DDE5EB; --q-line: #DDE5EB; --q-line-2: #C8D2DA;
  --q-ink: #101B2A; --q-ink-2: #3D4750; --q-mute: #545B5E;
  --q-pink: #101B2A; --q-pink-ink: #0A1423; --q-pink-soft: #BEE2FA;
  --q-ok: #0F6B47; --q-ok-soft: #DDF1E7; --q-warn: #9A4A12; --q-warn-soft: #F8EADB; --q-bad: #A3152E; --q-bad-soft: #FBE5E8;
  --q-r-card: 20px; --q-r-field: 12px; --q-r-small: 10px;
  --q-shadow: 0 1px 2px rgba(10, 20, 35, .04), 0 14px 32px -16px rgba(10, 20, 35, .18);
  --q-font: "Inter", system-ui, sans-serif;
  --q-measure: 760px; --q-wide: 1120px;
  font-family: var(--q-font); color: var(--q-ink); font-size: 16px; line-height: 1.55; letter-spacing: -.1px;
}
.app-skin :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure) { margin: 0; }
.app-skin :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 8px; }
.app-skin a { color: inherit; }
.app-skin input, .app-skin textarea, .app-skin select, .app-skin button { font-family: var(--q-font); }

/* buttons → template buttons: 12px radius, ink, accent wipe on hover */
.app-skin .q-btn, .sc-dialog .q-btn { position: relative; overflow: hidden; isolation: isolate; min-height: 52px; padding: 0 22px; border-radius: 12px; font: 500 15px/1 var(--q-font); letter-spacing: -.2px; transition: color .35s var(--e-out), border-color .2s; }
.app-skin .q-btn::before, .sc-dialog .q-btn::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 140%; border-radius: 12px; background: var(--accent); transform: translateY(105%); transition: transform .55s var(--e-out); z-index: -1; }
.app-skin .q-btn:not(:disabled):not([aria-disabled="true"]):hover::before, .sc-dialog .q-btn:not(:disabled):not([aria-disabled="true"]):hover::before { transform: translateY(-10%); }
.app-skin .q-btn-pink, .sc-dialog .q-btn-pink { background: var(--ink); color: var(--paper); }
.app-skin .q-btn-pink:hover, .sc-dialog .q-btn-pink:hover { background: var(--ink); color: var(--navy); }
.app-skin .q-btn-ghost, .sc-dialog .q-btn-ghost { background: var(--paper); color: var(--ink); border-color: var(--surface); }
.app-skin .q-btn-ghost:hover, .sc-dialog .q-btn-ghost:hover { color: var(--navy); border-color: transparent; }
.app-skin .q-btn-wide, .sc-dialog .q-btn-wide { min-height: 56px; font-size: 16px; }
.app-skin .q-chip, .sc-dialog .q-chip { border-radius: 8px; background: var(--paper); border-color: var(--surface); font: 500 13px/1 var(--q-font); color: var(--ink); min-height: 32px; transition: background .25s, border-color .25s; }
.app-skin button.q-chip:hover { background: var(--accent); border-color: var(--accent); }
.app-skin .q-badge { border-radius: 6px; height: 26px; font: 600 11.5px/1 var(--q-font); letter-spacing: .06em; background: var(--surface); color: var(--ink); }
.app-skin .q-badge-ok { background: var(--q-ok-soft); color: var(--q-ok); }
.app-skin .q-badge-warn { background: var(--q-warn-soft); color: var(--q-warn); }
.app-skin .q-badge-pink { background: var(--accent); color: var(--navy); }
.app-skin .q-arrow::after { color: var(--ink); }
.app-skin .q-link { color: var(--ink); }

/* fields */
.app-skin .q-field-label { font-size: 14px; font-weight: 500; letter-spacing: -.1px; color: var(--ink); }
.app-skin .q-input, .app-skin .q-textarea, .app-skin .q-select { border-radius: 12px; border-color: var(--surface); background: var(--paper); font: 400 16px/1.5 var(--q-font); letter-spacing: -.1px; padding: 14px 16px; }
.app-skin .q-input:focus, .app-skin .q-textarea:focus, .app-skin .q-select:focus { border-color: var(--ink); background: #fff; box-shadow: 0 0 0 4px rgba(190, 226, 250, .7); }
.app-skin .q-help, .app-skin .q-small { color: var(--q-mute); }

/* cards, callouts, details */
.app-skin .q-card { background: var(--paper); border-color: var(--surface); border-radius: 20px; }
.app-skin .q-card-tint { background: var(--surface); }
.app-skin .q-card h3 { font-weight: 500; letter-spacing: -.6px; }
.app-skin .q-callout { border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--surface); color: var(--q-ink-2); }
.app-skin .q-callout-warn { background: var(--q-warn-soft); box-shadow: none; }
.app-skin .q-details { border-top-color: var(--surface); }
.app-skin .q-details summary { font-weight: 500; font-size: 17px; letter-spacing: -.3px; padding: 22px 0; }
.app-skin .q-details summary::after { content: ""; width: 18px; height: 18px; flex: none; background: linear-gradient(var(--ink), var(--ink)) center / 18px 2px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 2px 18px no-repeat; transition: transform .45s var(--e-out); }
.app-skin .q-details[open] summary::after { content: ""; transform: rotate(135deg); }
.app-skin .q-list li::before { background: var(--ink); border-radius: 50%; width: 6px; height: 6px; }
.app-skin .q-section-title { font-weight: 400; letter-spacing: -1.4px; font-size: 40px; line-height: 1.08; }
.app-skin .q-section-lead { color: var(--muted); }
.app-skin .q-stat { font-weight: 400; letter-spacing: -2px; }
.app-skin .q-num { color: var(--ink); background: var(--accent); border: 0; border-radius: 10px; font-weight: 500; }
.app-skin .q-prose h2 { font-weight: 400; letter-spacing: -1px; font-size: 32px; }
.app-skin .q-prose h3 { font-weight: 500; }
.app-skin .q-prose a { color: var(--ink); }
.app-skin .q-prose code, .app-skin code { background: var(--paper); border-color: var(--surface); }
.app-skin pre { background: var(--navy) !important; color: #DDE5EB; border-radius: 16px !important; }
.app-skin pre code { background: none !important; border: 0 !important; color: inherit; }
.app-skin .q-prose blockquote { border-left-color: var(--accent); }
.app-skin .q-status { color: var(--q-ink-2); }

/* check page specifics */
.app-skin .check-steps li span { background: var(--surface); color: var(--ink); }
.app-skin .check-steps li[aria-current="step"] span { background: var(--ink); color: var(--paper); }
.app-skin .check-dot { background: var(--accent) !important; }
.app-skin .q-stack { max-width: none; padding: 0; margin: 0; }
.app-skin .check { padding-bottom: 0; }
.app-skin .check-card { background: var(--paper); border-color: var(--surface); box-shadow: none; border-radius: 20px; }
.app-skin .check-below { margin: 26px 0 8px; }

/* truth layer: our phone hero carries the title and the index */
.truth-skin .truth-head { display: none; }
.truth-skin .q-wrap, .dash-skin .q-wrap { max-width: none; padding: 0; margin: 0; }
.truth-skin .truth { padding-bottom: 8px; }
.truth-skin .truth-section:first-child { padding-top: 8px; }
.truth-skin .truth-kicker { color: var(--muted); }
.truth-skin .truth-motto { font-size: 40px !important; letter-spacing: -1.6px; font-weight: 400 !important; color: var(--ink); }
.dash-skin h1 { font-weight: 400 !important; letter-spacing: -2px !important; }
.dash-skin h2, .dash-skin h3 { font-weight: 500; letter-spacing: -.6px; }