@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap');
/* QuestWorks module library stylesheet. Loaded after tokens.css; color values live in tokens.json. */
.ds-frame { font-family: var(--font-sans); } .ds-frame .stage { border: 0; border-radius: 0; }
/* QuestWorks module library. Tokens from the QuestWorks Design System (colors_and_type.css).
   Headings use regular and medium weights only. Every module reads its colors from the tokens below,
   so data-theme="swap" on any ancestor switches it. */

:root, [data-theme="light"] {
  --btn-bg: linear-gradient(99deg, #3079AE, #7ABDED);
  --btn-ink: #FFFFFF;
  --btn2-bg: transparent;
  --btn2-ink: #296590;
  --btn2-line: #CFDDEA;
  --shadow: 0 2px 16px rgba(41,101,144,.08);
  --shadow-lg: 0 18px 50px rgba(30,78,112,.16);
  --grad: linear-gradient(117deg, #3079AE 24%, #7ABDED);
  --grad-text: linear-gradient(97deg, #3079AE, #7ABDED);
  --glass: rgba(255,255,255,.6);
  --logo-filter: grayscale(1) brightness(.35) opacity(.75);
  color-scheme: light;
}
[data-theme="swap"] {
  /* Swap: white becomes the gradient, the gradient becomes white. */
  --btn-bg: #FFFFFF;
  --btn-ink: #1E4E70;
  --btn2-bg: transparent;
  --btn2-ink: #FFFFFF;
  --btn2-line: rgba(255,255,255,.55);
  --shadow: none;
  --shadow-lg: none;
  --grad: rgba(255,255,255,.18);
  --grad-text: linear-gradient(#FFFFFF, #FFFFFF);
  --glass: rgba(255,255,255,.12);
  --logo-filter: brightness(0) invert(1) opacity(.85);
  color-scheme: light;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: 'League Spartan', system-ui, sans-serif; color: var(--ink); background: var(--bg-alt); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--core); text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; color: var(--head); letter-spacing: -0.015em; text-wrap: balance; }
p { margin: 0; }

/* ---------------- Library chrome ---------------- */
.lib { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.lib-nav { position: sticky; top: 0; height: 100vh; overflow: auto; padding: 26px 22px 40px; border-right: 1px solid var(--line); background: var(--bg); }
.lib-nav .logo { height: 26px; width: auto; margin-bottom: 6px; }
[data-theme="swap"] .lib-nav .logo { filter: brightness(0) invert(1); }
.lib-nav .sub { font-size: 13px; color: var(--ink-3); margin-bottom: 18px; }
.lib-nav h4 { font-size: 11px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 22px 0 6px; }
.lib-nav a { display: block; font-size: 14px; color: var(--ink-2); padding: 3px 0; }
.lib-nav a:hover { color: var(--core); }
.lib-nav a span { color: var(--ink-3); display: inline-block; width: 26px; }
.lib-main { padding: 34px 40px 120px; min-width: 0; }
.lib-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; padding-bottom: 26px; border-bottom: 1px solid var(--line); margin-bottom: 30px; }
.lib-head h1 { font-size: 44px; line-height: 1.05; }
.lib-head p { color: var(--ink-2); margin-top: 10px; max-width: 46em; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 999px; padding: 3px; background: var(--bg); }
.seg button { font: inherit; font-size: 14px; border: 0; background: none; color: var(--ink-2); padding: 7px 16px; border-radius: 999px; cursor: pointer; }
.seg button.on { background: var(--core); color: #fff; }
.lib-group { font-size: 13px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--core); margin: 56px 0 18px; }
.mod { margin-bottom: 34px; }
.mod-meta { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.mod-meta .id { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mod-meta h2 { font-size: 21px; font-weight: 400; color: var(--ink); letter-spacing: -0.01em; }
.mod-meta p { font-size: 14px; color: var(--ink-3); flex: 1 1 320px; }
.mod-meta .t { font: inherit; font-size: 12px; border: 1px solid var(--line-2); background: var(--bg); color: var(--ink-2); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.stage { background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.stage.alt { background: var(--bg-alt); }
.pad { padding: 56px 56px; } .pad-s { padding: 32px; }

/* ---------------- Shared primitives ---------------- */
.qm-eyebrow { font-size: 12px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--core); }
.qm-display { font-size: 64px; line-height: 1.02; font-weight: 400; letter-spacing: -0.025em; color: var(--head); }
.qm-h2 { font-size: 40px; line-height: 1.1; font-weight: 400; letter-spacing: -0.02em; }
.qm-h3 { font-size: 22px; line-height: 1.25; font-weight: 400; letter-spacing: -0.01em; }
.qm-lead { font-size: 20px; line-height: 1.5; color: var(--ink-2); }
.qm-muted { color: var(--ink-2); } .qm-small { font-size: 14px; color: var(--ink-3); }
.qm-btn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 16px; font-weight: 400; padding: 13px 22px; border-radius: 10px; background: var(--btn-bg); color: var(--btn-ink); border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.qm-btn.ghost { background: var(--btn2-bg); color: var(--btn2-ink); border-color: var(--btn2-line); }
.qm-btn.sm { font-size: 14px; padding: 9px 14px; }
.qm-link { color: var(--core); font-weight: 400; } .qm-link::after { content: " \2192"; }
.qm-micro { font-size: 14px; color: var(--ink-3); }
.qm-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.qm-tag { display: inline-block; font-size: 11px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 999px; padding: 2px 8px; }
.qm-soon { display: inline-block; font-size: 11px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--core-ink); background: var(--alice); border-radius: 999px; padding: 3px 9px; }
.pill { display: inline-block; font-size: 12px; font-weight: 400; padding: 3px 10px; border-radius: 999px; color: #fff; white-space: nowrap; }
.pill.Thriving { background: var(--thriving); } .pill.Performing { background: var(--performing); } .pill.Developing { background: var(--developing); } .pill.Forming { background: var(--forming); } .pill.Strained { background: var(--strained); }
.bar { height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; } .bar i { display: block; height: 100%; background: var(--grad); border-radius: 999px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); } .g4 { display: grid; grid-template-columns: repeat(4, 1fr); }
.hair > * { border-left: 1px solid var(--line); padding: 0 28px; } .hair > *:first-child { border-left: 0; padding-left: 0; }

/* ---------------- Chrome modules ---------------- */
.qm-announce { display: flex; justify-content: center; gap: 12px; align-items: center; padding: 10px 16px; font-size: 14px; background: var(--wash); color: var(--ink-2); border-bottom: 1px solid var(--line); }
.qm-header { display: flex; align-items: center; gap: 28px; height: 68px; padding: 0 32px; border-bottom: 1px solid var(--line); background: var(--bg); }
.qm-header .logo { height: 28px; width: auto; } [data-theme="swap"] .qm-header .logo, [data-theme="swap"] .qm-footer .logo { filter: brightness(0) invert(1); }
.qm-header nav { display: flex; gap: 22px; flex: 1; font-size: 15px; color: var(--ink-2); }
.qm-header nav span::after { content: ""; display: inline-block; width: 6px; height: 6px; border-right: 1.2px solid currentColor; border-bottom: 1.2px solid currentColor; transform: rotate(45deg); margin: 0 0 3px 7px; }
.qm-header nav span.plain::after { display: none; }
.qm-header .right { display: flex; align-items: center; gap: 16px; font-size: 15px; color: var(--ink-2); }
.qm-menu { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 8px 28px; padding: 24px 32px; border-bottom: 1px solid var(--line); background: var(--bg); }
.qm-menu h5 { margin: 0 0 6px; font-size: 11px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.qm-menu a { display: block; padding: 7px 0; color: var(--ink); font-size: 15px; } .qm-menu a span { display: block; font-size: 13px; color: var(--ink-3); }
.qm-menu .feat { background: var(--wash); border-radius: 12px; padding: 18px; }
.qm-crumbs { display: flex; gap: 8px; font-size: 14px; color: var(--ink-3); padding: 22px 32px; } .qm-crumbs b { font-weight: 400; color: var(--ink); }
.qm-footer { padding: 48px 32px 28px; background: var(--bg-alt); }
.qm-footer .cols { display: grid; grid-template-columns: 1.4fr repeat(5, 1fr); gap: 24px; font-size: 14px; }
.qm-footer h5 { margin: 0 0 10px; font-size: 11px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.qm-footer a { display: block; color: var(--ink-2); margin: 6px 0; }
.qm-footer .legal { display: flex; justify-content: space-between; margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.qm-sticky { display: flex; justify-content: center; padding: 14px; border-top: 1px solid var(--line); background: var(--bg); max-width: 390px; margin: 0 auto; }
.qm-sticky .qm-btn { width: 100%; justify-content: center; }

/* ---------------- Heroes ---------------- */
.qm-hero-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; padding: 72px 56px; }
.qm-hero-split .qm-lead { margin: 22px 0 30px; max-width: 30em; }
.qm-compose { position: relative; padding: 0 0 56px 28px; }
.qm-compose .frame { border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.qm-compose .float { position: absolute; left: -8px; bottom: 0; width: 66%; min-width: 300px; }
.qm-compose .float2 { position: absolute; right: -10px; top: -16px; width: 52%; }
.qm-hero-center { text-align: center; padding: 88px 56px 64px; }
.qm-hero-center .qm-display { max-width: 12em; margin: 18px auto 0; }
.qm-hero-center .qm-lead { max-width: 36em; margin: 20px auto 30px; }
.qm-hero-q { padding: 64px 56px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: start; }
.qm-hero-q .qm-display { font-size: 52px; }
.qm-answer { border-left: 3px solid var(--core); padding: 4px 0 4px 22px; margin-top: 26px; font-size: 20px; color: var(--ink); max-width: 34em; }
.qm-inshort { background: var(--wash); border-radius: 16px; padding: 26px 28px; }
.qm-inshort ul { margin: 12px 0 0; padding-left: 18px; color: var(--ink-2); } .qm-inshort li { margin: 6px 0; }

/* ---------------- Proof ---------------- */
.qm-logos { padding: 34px 56px; text-align: center; }
.qm-logos p { font-size: 14px; color: var(--ink-3); margin-bottom: 18px; }
.qm-logos .row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 48px; }
.qm-logos img { height: 28px; width: auto; max-width: 130px; object-fit: contain; filter: var(--logo-filter); }
.qm-logos span { font-size: 20px; font-weight: 400; color: var(--ink-3); }
.qm-stats .stat { padding: 8px 28px; } .qm-stats .stat:first-child { padding-left: 0; }
.qm-stats b { display: block; font-size: 64px; line-height: 1; font-weight: 300; letter-spacing: -0.03em; color: var(--head); }
.qm-stats span { display: block; margin-top: 12px; color: var(--ink-2); max-width: 20em; }
.qm-stats sup { font-size: 13px; color: var(--ink-3); }
.qm-stat-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.qm-stat-cards div { background: var(--grad); color: #fff; border-radius: 16px; padding: 28px; }
.qm-stat-cards b { display: block; font-size: 72px; line-height: 1; font-weight: 300; letter-spacing: -0.03em; }
.qm-stat-cards span { display: block; margin-top: 12px; color: rgba(255,255,255,.92); }
.qm-quote-big { text-align: center; padding: 80px 56px; }
.qm-quote-big blockquote { margin: 0 auto; max-width: 30em; font-size: 30px; line-height: 1.35; font-weight: 300; color: var(--head); letter-spacing: -0.01em; }
.qm-person { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; text-align: left; font-size: 14px; }
.qm-person img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.qm-person b { display: block; font-weight: 400; color: var(--ink); } .qm-person span { color: var(--ink-3); }
.qm-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.qm-quotes figure { margin: 0; background: var(--glass); border: 1px solid var(--line); border-radius: 16px; padding: 26px; display: flex; flex-direction: column; backdrop-filter: blur(14px); }
.qm-quotes p { font-size: 17px; color: var(--ink); flex: 1; }
.qm-wash { background: linear-gradient(135deg, var(--wash) 0%, var(--bg-alt) 100%); }
.qm-stories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.qm-story { overflow: hidden; display: flex; flex-direction: column; }
.qm-story .img { aspect-ratio: 16/9; background: linear-gradient(135deg, var(--wash), var(--surface-2)); display: grid; place-items: center; color: var(--ink-3); font-size: 22px; }
.qm-story .body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.qm-story .who { font-size: 18px; font-weight: 400; color: var(--ink); }
.qm-story .res { font-size: 15px; color: var(--ink-2); flex: 1; }

/* ---------------- Explaining ---------------- */
.qm-props h3 { margin: 14px 0 8px; } .qm-props p { color: var(--ink-2); }
.qm-props .n { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.qm-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.qm-steps .vis { height: 190px; border-radius: 14px; background: linear-gradient(135deg, var(--wash), var(--surface-2)); display: grid; place-items: center; padding: 20px; overflow: hidden; position: relative; }
.qm-steps h3 { margin: 18px 0 6px; } .qm-steps .n { color: var(--core); margin-right: 8px; } .qm-steps p { color: var(--ink-2); }
.qm-accordion { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.qm-acc-item { border-top: 1px solid var(--line); padding: 18px 0; cursor: pointer; }
.qm-acc-item h3 { color: var(--ink-3); transition: color .2s; } .qm-acc-item p { display: none; color: var(--ink-2); margin-top: 6px; }
.qm-acc-item.on h3 { color: var(--head); } .qm-acc-item.on p { display: block; }
.qm-acc-vis { min-height: 300px; border-radius: 18px; background: linear-gradient(135deg, var(--wash), var(--surface-2)); display: grid; place-items: center; padding: 28px; }
.qm-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.qm-bento .qm-card { padding: 26px; display: flex; flex-direction: column; gap: 18px; }
.qm-bento .big { grid-column: 1 / -1; }
.qm-bento .ui { background: var(--bg-alt); border-radius: 12px; padding: 18px; margin-top: auto; }
.qm-alt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.qm-alt-row ul { list-style: none; padding: 0; margin: 18px 0 0; } .qm-alt-row li { padding: 8px 0 8px 26px; position: relative; color: var(--ink-2); }
.qm-alt-row li::before { content: ""; position: absolute; left: 0; top: 15px; width: 12px; height: 2px; background: var(--core); }
.qm-statement { padding: 88px 56px; text-align: center; }
.qm-statement p { font-size: 38px; line-height: 1.25; font-weight: 300; color: var(--head); max-width: 22em; margin: 0 auto; letter-spacing: -0.015em; }
.qm-statement em { font-style: normal; color: var(--core); }
.qm-define { display: grid; grid-template-columns: 220px 1fr; gap: 28px; padding: 40px 56px; }
.qm-define dt { font-size: 28px; font-weight: 400; color: var(--head); } .qm-define dd { margin: 0; font-size: 20px; color: var(--ink); }
.qm-define dd small { display: block; margin-top: 10px; font-size: 14px; color: var(--ink-3); }
.qm-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.qm-table th { text-align: left; font-weight: 400; color: var(--ink-3); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; padding: 0 16px 12px; border-bottom: 1px solid var(--line-2); }
.qm-table td { padding: 16px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.qm-table td:first-child, .qm-table th:first-child { padding-left: 0; color: var(--ink); }
.qm-table .us { color: var(--head); background: var(--alice); }
.qm-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.qm-vs .side { padding: 26px; } .qm-vs .side.us { border-color: var(--core); box-shadow: 0 0 0 1px var(--core) inset; }
.qm-vs .flow { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0; }
.qm-vs .flow span { font-size: 13px; border: 1px solid var(--line-2); border-radius: 999px; padding: 5px 11px; color: var(--ink-2); }
.qm-vs .us .flow span { border-color: var(--core); color: var(--core-ink); }
.qm-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.qm-faq div { padding: 18px 0; border-top: 1px solid var(--line); }
.qm-faq h3 { font-size: 18px; font-weight: 400; color: var(--ink); margin-bottom: 6px; } .qm-faq p { color: var(--ink-2); }
.qm-gloss { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; }
.qm-gloss div { padding: 16px 0; border-top: 1px solid var(--line); } .qm-gloss b { font-weight: 400; color: var(--ink); display: block; } .qm-gloss span { font-size: 15px; color: var(--ink-2); }

/* ---------------- QuestWorks modules ---------------- */
.qm-score { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; box-shadow: var(--shadow-lg); color: var(--ink); }
.qm-score .top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.qm-score .num { display: flex; align-items: baseline; gap: 6px; margin: 12px 0 4px; }
.qm-score .num span.pill { color: #fff; margin-left: 4px; }
.qm-score .top span:first-child { white-space: nowrap; }
.qm-score .num b { font-size: 64px; line-height: .9; font-weight: 300; letter-spacing: -0.03em; color: var(--head); } .qm-score .num span { color: var(--ink-3); margin-right: 8px; }
.qm-score .delta { font-size: 13px; color: var(--thriving); }
.qm-score .q { display: grid; grid-template-columns: 120px 1fr 28px; gap: 10px; align-items: center; font-size: 14px; margin-top: 10px; } .qm-score .q b { font-weight: 400; text-align: right; color: var(--head); }
.qm-ring { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; }
.qm-ring svg { width: 200px; height: 200px; }
.qm-ring .lbl { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; fill: var(--ink-3); }
.qm-scale { position: relative; }
.qm-scale .track { display: grid; grid-template-columns: 60fr 15fr 10fr 10fr 5fr; height: 10px; border-radius: 999px; overflow: hidden; }
.qm-scale .track i:nth-child(1) { background: var(--strained); } .qm-scale .track i:nth-child(2) { background: var(--forming); } .qm-scale .track i:nth-child(3) { background: var(--developing); } .qm-scale .track i:nth-child(4) { background: var(--performing); } .qm-scale .track i:nth-child(5) { background: var(--thriving); }
.qm-scale .mark { position: absolute; top: -8px; width: 2px; height: 26px; background: var(--head); }
.qm-scale .mark span { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); font-size: 13px; color: var(--head); white-space: nowrap; }
.qm-scale .ticks { position: relative; height: 18px; margin-top: 8px; font-size: 12px; color: var(--ink-3); } .qm-scale .ticks span { position: absolute; transform: translateX(-50%); }
.qm-scale .legend { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 18px; }
.qm-scale .legend div { border: 1px solid var(--line); border-radius: 10px; padding: 10px; font-size: 13px; color: var(--ink-3); } .qm-scale .legend b { display: block; font-weight: 400; color: var(--ink); }
.qm-scale .legend .on { border-color: var(--core); background: var(--alice); }
.qm-teams .t { display: grid; grid-template-columns: 110px 1fr 36px 100px; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; }
.qm-teams .t:first-child { border-top: 0; } .qm-teams .t b { font-weight: 400; text-align: right; color: var(--head); }
.qm-profile { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.qm-profile h4 { font-size: 13px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.qm-profile .q { display: grid; grid-template-columns: 170px 1fr 30px; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); font-size: 15px; }
.qm-profile .q b { font-weight: 400; text-align: right; color: var(--head); } .qm-profile .q.na { color: var(--ink-3); }
.qm-chart svg { width: 100%; height: auto; }
.qm-chart .legend { display: flex; gap: 22px; font-size: 14px; color: var(--ink-2); margin-top: 10px; }
.qm-chart .legend i { display: inline-block; width: 18px; height: 3px; vertical-align: middle; margin-right: 8px; border-radius: 2px; }
.qm-report { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 28px; box-shadow: var(--shadow-lg); max-width: 520px; }
.qm-report .head { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-3); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.qm-report .head b { font-weight: 400; color: var(--ink); font-size: 15px; display: block; }
.qm-report .f { display: grid; grid-template-columns: 24px 1fr; gap: 10px; padding: 12px 0; border-top: 1px dashed var(--line); font-size: 15px; }
.qm-report .f i { width: 22px; height: 22px; border-radius: 50%; background: var(--alice); color: var(--core-ink); font-style: normal; font-size: 12px; display: grid; place-items: center; }
.qm-report .f small { display: block; color: var(--ink-3); font-size: 13px; }
.qm-report .acts { display: flex; gap: 8px; margin-top: 14px; }
.qm-timeline { display: grid; grid-template-columns: repeat(6, 1fr); position: relative; }
.qm-timeline::before { content: ""; position: absolute; top: 15px; left: 8%; right: 8%; height: 1px; background: var(--line-2); }
.qm-timeline div { text-align: center; position: relative; font-size: 14px; color: var(--ink-3); }
.qm-timeline i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 10px; background: var(--bg); border: 1px solid var(--line-2); font-style: normal; font-size: 13px; color: var(--ink-2); position: relative; }
.qm-timeline .done i { background: var(--core); border-color: var(--core); color: #fff; } .qm-timeline .here i { box-shadow: 0 0 0 5px var(--alice); border-color: var(--core); color: var(--core); }
.qm-timeline b { display: block; font-weight: 400; color: var(--ink); }
.qm-quest { position: relative; border-radius: 16px; overflow: hidden; }
.qm-quest figcaption { display: flex; justify-content: space-between; gap: 16px; padding: 14px 4px 0; font-size: 15px; color: var(--ink-2); }
.qm-herotypes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.qm-hero-card { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.qm-hero-card .top { display: flex; gap: 14px; align-items: center; }
.qm-hero-card .mono { width: 52px; height: 52px; border-radius: 50%; background: var(--alice); color: var(--core-ink); display: grid; place-items: center; font-size: 18px; }
.qm-hero-card img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.qm-hero-card h3 { font-size: 22px; } .qm-hero-card .comp { font-size: 13px; color: var(--ink-3); }
.qm-hero-card dl { margin: 0; font-size: 14px; } .qm-hero-card dt { color: var(--ink-3); margin-top: 8px; } .qm-hero-card dd { margin: 2px 0 0; color: var(--ink); }
.qm-worlds { display: flex; gap: 14px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.qm-worlds img { width: 150px; aspect-ratio: 3/4; object-fit: cover; border-radius: 12px; flex: none; }
.qm-loop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.qm-loop > div { padding: 22px 24px; border: 1px solid var(--line); margin-left: -1px; background: var(--surface); position: relative; }
.qm-loop > div:first-child { border-radius: 14px 0 0 14px; } .qm-loop > div:last-child { border-radius: 0 14px 14px 0; }
.qm-loop .k { font-size: 13px; color: var(--core); } .qm-loop h3 { margin: 6px 0; } .qm-loop p { font-size: 15px; color: var(--ink-2); }
.qm-loop-back { margin-top: 12px; font-size: 13px; color: var(--ink-3); text-align: center; }
.qm-never { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); }
.qm-never div { padding: 22px 22px 0 0; } .qm-never div + div { padding-left: 22px; border-left: 1px solid var(--line); }
.qm-never h3 { font-size: 19px; } .qm-never p { font-size: 15px; color: var(--ink-2); margin-top: 6px; }
.qm-may { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.qm-may > div { padding: 26px; } .qm-may h3 { margin-bottom: 12px; }
.qm-may ul { list-style: none; margin: 0; padding: 0; } .qm-may li { padding: 9px 0 9px 28px; border-top: 1px solid var(--line); position: relative; color: var(--ink-2); }
.qm-may .yes li::before { content: "\2713"; position: absolute; left: 2px; color: var(--thriving); } .qm-may .no li::before { content: "\2715"; position: absolute; left: 2px; color: var(--ink-3); }
.qm-optin { max-width: 440px; padding: 22px; }
.qm-optin .o { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); font-size: 15px; }
.qm-optin .o:first-of-type { border-top: 0; } .qm-optin .o span small { display: block; color: var(--ink-3); font-size: 13px; }
.qm-switch { width: 40px; height: 24px; border-radius: 999px; background: var(--line-2); position: relative; flex: none; }
.qm-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; }
.qm-switch.on { background: var(--core); } .qm-switch.on::after { left: 19px; }
.qm-cred { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center; padding: 20px 22px; max-width: 520px; }
.qm-cred .seal { width: 64px; height: 64px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; color: #fff; font-size: 13px; letter-spacing: .06em; }
.qm-cred h3 { font-size: 20px; } .qm-cred p { font-size: 14px; color: var(--ink-3); }
.qm-note { max-width: 520px; padding: 22px; }
.qm-note .to { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.qm-note blockquote { margin: 12px 0 16px; padding: 14px 16px; background: var(--bg-alt); border-radius: 12px; color: var(--ink); }
.qm-slack { display: grid; grid-template-columns: 36px 1fr; gap: 12px; max-width: 460px; padding: 16px 18px; font-size: 15px; }
.qm-slack .app { width: 36px; height: 36px; border-radius: 8px; background: var(--grad); }
.qm-slack b { font-weight: 400; color: var(--ink); } .qm-slack .badge { font-size: 10px; background: var(--surface-2); color: var(--ink-3); border-radius: 3px; padding: 1px 4px; margin: 0 6px; }
.qm-slack .time { font-size: 12px; color: var(--ink-3); } .qm-slack p { margin: 4px 0 10px; color: var(--ink); }
.qm-int { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.qm-int a { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.qm-int img { max-height: 26px; max-width: 96px; object-fit: contain; filter: var(--logo-filter); }
.qm-int a.soon { border-style: dashed; } .qm-int a.soon img { opacity: .5; }
.qm-band-dark { background: #1D2839; color: #fff; padding: 56px; text-align: center; }
.qm-band-dark p { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; background: linear-gradient(97deg,#4FA8E3,#A9D5F5); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 26px; }
.qm-band-dark .row { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 52px; align-items: center; }
.qm-band-dark img { height: 26px; width: auto; filter: brightness(0) invert(1) opacity(.85); }
.qm-bench { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.qm-bench .peer { padding: 22px; position: relative; }
.qm-bench .peer .r { display: grid; grid-template-columns: 1fr 90px 36px; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; }
.qm-bench .peer .r.you { color: var(--head); } .qm-bench .peer .r b { font-weight: 400; text-align: right; }
.qm-bench .veil { filter: blur(3px); opacity: .6; }

/* ---------------- Conversion ---------------- */
.qm-pricing { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 16px; }
.qm-pricing > div { padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.qm-pricing .price { font-size: 48px; font-weight: 300; letter-spacing: -0.03em; color: var(--head); line-height: 1; }
.qm-pricing .price small { font-size: 16px; color: var(--ink-3); letter-spacing: 0; }
.qm-pricing ul { list-style: none; padding: 0; margin: 8px 0 0; font-size: 15px; } .qm-pricing li { padding: 7px 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.qm-pricing .free { background: var(--grad); color: #fff; border: 0; } .qm-pricing .free h3, .qm-pricing .free .price { color: #fff; } .qm-pricing .free li { color: rgba(255,255,255,.92); border-color: rgba(255,255,255,.25); }
.qm-pricing .free .qm-btn { background: #fff; color: #1E4E70; margin-top: auto; align-self: flex-start; }
.qm-band { padding: 80px 56px; text-align: center; background: var(--grad); color: #fff; }
.qm-band h2 { color: #fff; font-size: 44px; } .qm-band p { color: rgba(255,255,255,.9); margin: 12px 0 26px; font-size: 19px; }
.qm-band .qm-btn { background: #fff; color: #1E4E70; } .qm-band .qm-micro { color: rgba(255,255,255,.8); margin-top: 14px; }
.qm-band.plain { background: var(--wash); color: var(--ink); } .qm-band.plain h2 { color: var(--head); } .qm-band.plain p { color: var(--ink-2); }
.qm-band.plain .qm-btn { background: var(--btn-bg); color: var(--btn-ink); } .qm-band.plain .qm-micro { color: var(--ink-3); }
.qm-inline { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 28px; border-left: 3px solid var(--core); max-width: 760px; }
.qm-ready { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.qm-ready div { padding: 20px 22px; } .qm-ready .ck { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--core); color: var(--core); font-size: 13px; margin-bottom: 12px; }
.qm-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 720px; }
.qm-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink-2); }
.qm-form input, .qm-form select, .qm-form textarea { font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); color: var(--ink); }
.qm-form .full { grid-column: 1 / -1; }
.qm-who { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.qm-who a { padding: 22px; min-height: 170px; display: flex; flex-direction: column; color: var(--ink); }
.qm-who a span { color: var(--ink-2); margin-top: 6px; font-size: 15px; } .qm-who a em { margin-top: auto; font-style: normal; color: var(--core); font-size: 14px; padding-top: 14px; }
.qm-next { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.qm-next a { padding: 22px 24px 22px 0; color: var(--ink); } .qm-next a + a { padding-left: 24px; border-left: 1px solid var(--line); }
.qm-next span { display: block; color: var(--ink-3); font-size: 14px; margin-top: 4px; }
.qm-hub { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.qm-hub a { padding: 16px 18px; color: var(--ink); font-size: 16px; } .qm-hub a span { display: block; color: var(--ink-3); font-size: 13px; margin-top: 2px; }
.qm-tabs { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.qm-tabs span { font-size: 14px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); } .qm-tabs span.on { background: var(--head); color: var(--bg); border-color: var(--head); }
.qm-policies { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.qm-policies a { padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; color: var(--ink); }
.qm-policies a span { font-size: 13px; color: var(--ink-3); }
.qm-article { display: grid; grid-template-columns: 1.1fr 1fr; overflow: hidden; }
.qm-article .img { background: url(/_blob/d0e92f09cf68f41f6e9e29f5ca252658) center/cover; min-height: 280px; }
.qm-article .body { padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.qm-article .meta { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-3); }
.qm-article h3 { font-size: 28px; line-height: 1.2; }
.qm-facts { display: grid; grid-template-columns: 220px 1fr; gap: 0; }
.qm-facts dt, .qm-facts dd { padding: 14px 0; border-top: 1px solid var(--line); margin: 0; } .qm-facts dt { color: var(--ink-3); font-size: 15px; } .qm-facts dd { color: var(--ink); }
.qm-people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.qm-people div { padding: 20px; } .qm-people i { width: 48px; height: 48px; border-radius: 50%; background: var(--alice); color: var(--core-ink); display: grid; place-items: center; font-style: normal; margin-bottom: 12px; }
.qm-people b { display: block; font-weight: 400; color: var(--ink); } .qm-people span { font-size: 14px; color: var(--ink-3); }
.qm-market { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.qm-market div { padding: 0 28px; border-left: 1px solid var(--line); } .qm-market div:first-child { padding-left: 0; border-left: 0; }
.qm-market b { display: block; font-size: 56px; font-weight: 300; letter-spacing: -0.03em; color: var(--head); line-height: 1; } .qm-market span { color: var(--ink-2); display: block; margin-top: 10px; }
.qm-empty { text-align: center; padding: 56px; border: 1px dashed var(--line-2); border-radius: 16px; color: var(--ink-3); }
.qm-404 { text-align: center; padding: 80px 56px; }
.qm-404 .code { font-size: 96px; font-weight: 200; color: var(--line-2); letter-spacing: -0.04em; line-height: 1; }

/* ---------------- Phone ---------------- */
@media (max-width: 960px) {
  .lib { grid-template-columns: 1fr; } .lib-nav { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .lib-nav .groups { display: none; }
  .lib-main { padding: 20px 14px 80px; }
  .pad { padding: 32px 20px; } .pad-s { padding: 20px; }
  .qm-display { font-size: 40px; } .qm-h2 { font-size: 30px; } .qm-statement p { font-size: 26px; } .qm-quote-big blockquote { font-size: 23px; }
  .qm-hero-split, .qm-hero-q, .row2, .qm-accordion, .qm-alt-row, .qm-bench, .qm-article, .qm-ring { grid-template-columns: 1fr; padding-left: 20px; padding-right: 20px; }
  .qm-hero-split { padding-top: 40px; padding-bottom: 40px; } .qm-hero-center, .qm-statement, .qm-quote-big, .qm-band, .qm-404 { padding: 56px 20px; }
  .g3, .g4, .qm-quotes, .qm-stories, .qm-steps, .qm-bento, .qm-vs, .qm-faq, .qm-gloss, .qm-herotypes, .qm-loop, .qm-never, .qm-may, .qm-pricing, .qm-ready, .qm-form, .qm-who, .qm-next, .qm-policies, .qm-people, .qm-market, .qm-stat-cards, .qm-profile, .qm-menu { grid-template-columns: 1fr; }
  .qm-bento .big { grid-row: auto; }
  .hair > *, .qm-never div + div, .qm-market div, .qm-next a + a { border-left: 0; padding-left: 0; }
  .hair > * { padding: 16px 0; border-top: 1px solid var(--line); } .hair > *:first-child { border-top: 0; }
  .qm-header nav { display: none; } .qm-footer .cols { grid-template-columns: 1fr 1fr; }
  .qm-int, .qm-hub { grid-template-columns: repeat(2, 1fr); }
  .qm-timeline { grid-template-columns: repeat(3, 1fr); row-gap: 18px; } .qm-timeline::before { display: none; }
  .qm-scale .legend { grid-template-columns: repeat(2, 1fr); }
  .qm-define, .qm-facts { grid-template-columns: 1fr; padding-left: 20px; padding-right: 20px; }
  .qm-teams .t { grid-template-columns: 90px 1fr 32px; } .qm-teams .t .pill { display: none; }
  .qm-loop > div { margin-left: 0; margin-top: -1px; border-radius: 0 !important; }
  .qm-inline { flex-direction: column; align-items: flex-start; }
}
/* Titles inside link cards keep the heading style. */
.qm-next a span.qm-h3, .qm-who a span.qm-h3 { display: block; color: var(--head); font-size: 20px; margin: 0; }
.qm-article .img { background-image: url(/_blob/d0e92f09cf68f41f6e9e29f5ca252658); }

/* Emphasis is the design system text gradient, never a heavier weight (Asa, 2026-10-23).
   Buttons use the design system button gradient. On a gradient surface both fall back to white. */
b, strong { font-weight: inherit; }
.qm-em, .qm-statement em, .qm-eyebrow, .qm-link, .qm-stats b, .qm-market b, .qm-score .num b, .qm-pricing .price, .qm-ring-num,
.qm-steps .n, .qm-props .n, .qm-loop .k, .qm-tabs span.on, .qm-404 .code {
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.qm-btn { background: var(--btn-bg); color: var(--btn-ink); box-shadow: 0 4px 14px rgba(48, 121, 174,.25); }
.qm-btn:hover { background: linear-gradient(99deg, #1F7FC7, #6BAFE0); }
.qm-btn.ghost { background: transparent; box-shadow: none; color: var(--btn2-ink); }
.qm-btn.ghost:hover { background: var(--alice); }
.qm-tabs span.on { border-color: var(--core); }
/* On gradient and photo surfaces: white button, white emphasis. */
.qm-pricing .free .price { color: #fff; }

/* Worlds as text: genre names and one line, no cover art (Asa, 2026-10-23: avoid overt fantasy imagery). */
.qm-genres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 32px; }
.qm-genres div { padding: 14px 0; border-top: 1px solid var(--line); }
.qm-genres b { display: block; color: var(--ink); } .qm-genres span { font-size: 14px; color: var(--ink-3); }
@media (max-width: 960px) { .qm-genres { grid-template-columns: 1fr 1fr; } }

/* =====================================================================
   Second run (Asa review, 2026-10-23)
   Rule: the sky blue #7ABDED never appears alone; it only ever ends a gradient.
   ===================================================================== */

.v2tag { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: 2px 8px; color: #fff; background: linear-gradient(99deg, #3079AE, #7ABDED); }
.gline { height: 2px; border-radius: 2px; background: linear-gradient(90deg, #3079AE, #7ABDED); }
.gicon { width: 44px; height: 44px; }
.gicon * { vector-effect: non-scaling-stroke; }
.reveal .draw { stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1.4s cubic-bezier(.25,.46,.45,.94); }
.reveal.in .draw { stroke-dashoffset: 0; }
.qm-card-link { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; color: var(--ink); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; cursor: pointer; }
.qm-card-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: transparent; }
.qm-card-link:focus-visible { outline: 2px solid var(--core); outline-offset: 3px; }
.qm-card-link .t { font-size: 20px; color: var(--head); letter-spacing: -0.01em; }
.qm-card-link .d { font-size: 15px; color: var(--ink-2); }
.qm-card-link .go { margin-top: auto; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: var(--ink-3); }
.qm-arrow { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--head); transition: all .2s ease; flex: none; }
.qm-card-link:hover .qm-arrow { background: linear-gradient(99deg, #3079AE, #7ABDED); color: #fff; border-color: transparent; transform: translateX(4px); }
.qm-card-link:hover .t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* 10 Answer hero */
.qa2 { display: grid; grid-template-columns: 1.35fr 1fr; gap: 48px; padding: 64px 56px; align-items: start; }
.qa2 h1 { font-size: 56px; line-height: 1.04; letter-spacing: -0.025em; margin: 14px 0 26px; }
.qa2 .ans { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 24px 26px; box-shadow: var(--shadow); }
.qa2 .ans .lbl { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-3); margin-bottom: 10px; }
.qa2 .ans .lbl i { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(99deg, #3079AE, #7ABDED); }
.qa2 .ans p { font-size: 20px; line-height: 1.5; color: var(--ink); }
.qa2 .ans .typed { min-height: 3em; }
.qa2 .src { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.qa2 .src a { font-size: 13px; color: var(--ink-2); background: var(--bg-alt); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; }
.qa2 .src a span { color: var(--ink-3); margin-right: 6px; font-variant-numeric: tabular-nums; }
.qa2 .rel h4 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.qa2 .rel a { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 15px 0; border-top: 1px solid var(--line); color: var(--ink); font-size: 17px; transition: color .15s; }
.qa2 .rel a:hover { color: var(--head); } .qa2 .rel a:hover .qm-arrow { background: linear-gradient(99deg,#3079AE,#7ABDED); color: #fff; border-color: transparent; }

/* 14 Quote rotator */
.qr { padding: 72px 56px 56px; display: grid; grid-template-columns: 120px 1fr; gap: 32px; }
.qr .mark { width: 96px; height: 80px; }
.qr blockquote { margin: 0; font-size: 34px; line-height: 1.3; font-weight: 300; color: var(--head); letter-spacing: -0.015em; min-height: 3.9em; transition: opacity .35s ease, transform .35s ease; }
.qr blockquote.out { opacity: 0; transform: translateY(8px); }
.qr .who { display: flex; gap: 12px; margin-top: 28px; }
.qr .who button { flex: 1; display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; text-align: left; background: none; border: 0; padding: 0 0 12px; cursor: pointer; font: inherit; color: var(--ink-3); position: relative; opacity: .6; transition: opacity .2s; }
.qr .who button.on { opacity: 1; color: var(--ink); }
.qr .who img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.qr .who small { display: block; font-size: 13px; color: var(--ink-3); }
.qr .who button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line); border-radius: 2px; }
.qr .who button .bar2 { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; z-index: 1; border-radius: 2px; background: linear-gradient(90deg,#3079AE,#7ABDED); }
.qr .who button.on .bar2 { animation: fillbar 6s linear forwards; }
@keyframes fillbar { to { width: 100%; } }

/* 15 Quote wall */
.qw2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; height: 460px; overflow: hidden; padding: 0 56px; mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); }
.qw2 .col { display: flex; flex-direction: column; gap: 16px; animation: up 38s linear infinite; }
.qw2 .col.rev { animation-direction: reverse; animation-duration: 44s; }
.qw2:hover .col { animation-play-state: paused; }
@keyframes up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.qw2 figure { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.qw2 figure p { font-size: 16px; color: var(--ink); }
.qw2 figure.big p { font-size: 21px; line-height: 1.4; color: var(--head); font-weight: 300; }

/* 16 Story switcher */
.ss { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; }
.ss .feat { border-radius: 20px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); display: grid; grid-template-rows: 220px auto; }
.ss .feat .img { background: url(/_blob/d0e92f09cf68f41f6e9e29f5ca252658) center/cover; position: relative; }
.ss .feat .img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,22,34,0) 40%, rgba(10,22,34,.55)); }
.ss .feat .img span { position: absolute; left: 22px; bottom: 16px; z-index: 1; color: #fff; font-size: 22px; }
.ss .feat .body { padding: 24px 26px; }
.ss .metric { font-size: 56px; font-weight: 300; letter-spacing: -0.03em; line-height: 1; }
.ss .list { display: flex; flex-direction: column; gap: 10px; }
.ss .list button { all: unset; cursor: pointer; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); transition: all .2s; }
.ss .list button:hover { border-color: var(--line-2); }
.ss .list button.on { border-color: transparent; box-shadow: var(--shadow-lg); }
.ss .list button.on .qm-arrow { background: linear-gradient(99deg,#3079AE,#7ABDED); color: #fff; border-color: transparent; }
.ss .list b { color: var(--ink); display: block; } .ss .list small { color: var(--ink-3); font-size: 13px; }

/* 17 Value props with symbols */
.vp2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.vp2 > div { padding: 8px 32px 8px 0; } .vp2 > div + div { padding-left: 32px; border-left: 1px solid var(--line); }
.vp2 svg { width: 48px; height: 48px; margin-bottom: 22px; overflow: visible; }
.vp2 h3 { font-size: 24px; margin-bottom: 8px; } .vp2 p { color: var(--ink-2); }
.vp2 .tagline { margin-top: 18px; font-size: 13px; color: var(--ink-3); letter-spacing: .04em; }

/* 18 Steps that play */
.st2 .track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; margin-bottom: 20px; }
.st2 .track .num { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ink-3); }
.st2 .track .num i { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font-style: normal; color: var(--ink-2); transition: all .3s; flex: none; }
.st2 .track .num .ln { flex: 1; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.st2 .track .num .ln b { display: block; height: 100%; width: 0; background: linear-gradient(90deg,#3079AE,#7ABDED); }
.st2 .step.on .num i, .st2 .step.done .num i { background: linear-gradient(99deg,#3079AE,#7ABDED); color: #fff; border-color: transparent; }
.st2 .step.done .ln b { width: 100%; } .st2 .step.on .ln b { animation: fillbar 3.2s linear forwards; }
.st2 .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.st2 .tile { border-radius: 18px; background: linear-gradient(135deg, var(--wash), var(--surface-2)); height: 220px; display: grid; place-items: center; padding: 22px; transition: transform .4s ease, box-shadow .4s ease, opacity .4s; opacity: .55; }
.st2 .tile.on { transform: translateY(-6px); box-shadow: var(--shadow-lg); opacity: 1; }
.st2 .tile.done { opacity: 1; }
.st2 h3 { margin-top: 18px; } .st2 p { color: var(--ink-2); margin-top: 4px; }

/* 19 Feature list with progress */
.fl2 .item { position: relative; padding: 18px 0 20px; border-top: 1px solid var(--line); cursor: pointer; }
.fl2 .item h3 { color: var(--ink-3); transition: color .3s; }
.fl2 .item p { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s ease, opacity .4s ease, margin .4s; color: var(--ink-2); }
.fl2 .item.on h3 { color: var(--head); } .fl2 .item.on p { max-height: 120px; opacity: 1; margin-top: 8px; }
.fl2 .item .prog { position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: linear-gradient(90deg,#3079AE,#7ABDED); }
.fl2 .item.on .prog { animation: fillbar 5s linear forwards; }
.fl2.paused .item.on .prog { animation-play-state: paused; }
.fl2 .vis { position: relative; min-height: 340px; }
.fl2 .vis > div { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .55s ease, transform .55s ease; }
.fl2 .vis > div.on { opacity: 1; transform: none; }

/* 23 Dictionary entry */
.dict { display: grid; grid-template-columns: 1fr 300px; gap: 48px; padding: 56px; }
.dict .term { font-size: 56px; line-height: 1; letter-spacing: -0.025em; color: var(--head); }
.dict ol { margin: 28px 0 0; padding: 0; list-style: none; counter-reset: s; }
.dict li { counter-increment: s; display: grid; grid-template-columns: 36px 1fr; gap: 8px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 19px; color: var(--ink); }
.dict li::before { content: counter(s); font-size: 15px; color: var(--ink-3); padding-top: 3px; }
.dict li small { display: block; font-size: 14px; color: var(--ink-3); margin-top: 6px; }
.dict aside { border-left: 1px solid var(--line); padding-left: 28px; font-size: 15px; }
.dict aside h4 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px; }
.dict aside .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.dict aside .chips a { border: 1px solid var(--line-2); border-radius: 999px; padding: 5px 11px; color: var(--ink-2); }
.dict aside .not span { display: inline-block; margin: 0 8px 8px 0; color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line-2); }

/* 24 Comparison with tabs */
.cmp2 .tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; border: 1px solid var(--line); margin-bottom: 24px; background: var(--bg-alt); }
.cmp2 .tabs button { all: unset; cursor: pointer; font-size: 14px; padding: 8px 16px; border-radius: 999px; color: var(--ink-2); }
.cmp2 .tabs button.on { background: var(--surface); color: var(--head); box-shadow: var(--shadow); }

/* 32 QuestDash team profile */
.tp { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tp .pil { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px 22px 14px; }
.tp .ph { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.tp .ph h3 { font-size: 22px; } .tp .ph p { font-size: 14px; color: var(--ink-3); }
.tp .ph b { font-size: 40px; font-weight: 300; letter-spacing: -0.03em; line-height: 1; } .tp .ph small { font-size: 14px; color: var(--ink-3); }
.tp .r { padding: 13px 0; display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; }
.tp .r span { color: var(--ink); } .tp .r p { grid-column: 1; font-size: 13px; color: var(--ink-3); }
.tp .r b { grid-row: 1; grid-column: 2; font-weight: 400; color: var(--head); } .tp .r b small { color: var(--ink-3); font-size: 12px; }
.tp .r .bar { grid-column: 1 / -1; margin-top: 8px; height: 5px; } .tp .r .bar i { width: 0; transition: width 1.1s cubic-bezier(.25,.46,.45,.94); }
.tp.in .r .bar i { width: var(--w); }
.tp .still { border-top: 1px dashed var(--line-2); margin-top: 6px; padding-top: 12px; font-size: 14px; }
.tp .still div { display: flex; justify-content: space-between; padding: 5px 0; color: var(--ink-2); }
.tp .still em { font-style: normal; font-size: 12px; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); color: var(--ink-3); }
.tp .still em.b { background: var(--alice); color: var(--core-ink); }

/* 36 Timeline in motion */
.tl2 .top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 26px; }
.tl2 .top b { font-size: 44px; font-weight: 300; letter-spacing: -0.03em; }
.tl2 .rail { position: relative; height: 6px; border-radius: 999px; background: var(--surface-2); }
.tl2 .rail .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: linear-gradient(90deg,#3079AE,#7ABDED); }
.tl2 .node { position: absolute; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line-2); transition: all .3s; }
.tl2 .node.lit { border-color: transparent; background: linear-gradient(135deg,#3079AE,#7ABDED); box-shadow: 0 0 0 6px var(--alice); }
.tl2 .cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 26px; }
.tl2 .cards div { border: 1px solid var(--line); border-radius: 12px; padding: 12px; font-size: 13px; color: var(--ink-3); background: var(--surface); transition: all .3s; }
.tl2 .cards div b { display: block; font-weight: 400; color: var(--ink); font-size: 15px; }
.tl2 .cards div.lit { box-shadow: var(--shadow); border-color: transparent; }
.tl2 .cards div.lit em { font-style: normal; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tl2 .cards div.lock { opacity: .55; }

/* 38 HeroType glyph cards */
.ht2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ht2 .c { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 24px; }
.ht2 .g { width: 64px; height: 64px; margin-bottom: 18px; }
.ht2 h3 { font-size: 24px; } .ht2 .comp { color: var(--ink-3); font-size: 14px; margin-top: 2px; }
.ht2 dl { margin: 16px 0 0; font-size: 15px; } .ht2 dt { color: var(--ink-3); font-size: 13px; margin-top: 10px; } .ht2 dd { margin: 2px 0 0; color: var(--ink); }
.ht2-key { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 20px; }
.ht2-key div { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.ht2-key svg { width: 26px; height: 26px; flex: none; }

.cm2 { display: grid; grid-template-columns: 1fr 1.6fr; gap: 56px; }
.cm2 .lead2 p { color: var(--ink-2); margin: 14px 0 22px; font-size: 18px; }
.cm2 ul { list-style: none; margin: 0; padding: 0; }
.cm2 li { display: grid; grid-template-columns: 52px 1fr auto; gap: 18px; align-items: center; padding: 20px 0; border-top: 1px solid var(--line); }
.cm2 li svg { width: 40px; height: 40px; }
.cm2 li b { font-weight: 400; color: var(--ink); font-size: 18px; display: block; } .cm2 li span { color: var(--ink-3); font-size: 15px; }
.cm2 li em { font-style: normal; font-size: 12px; color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 999px; padding: 2px 9px; }

.mm2 { border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.mm2 .hd { display: grid; grid-template-columns: 1fr 1fr; }
.mm2 .hd div { padding: 22px 26px; display: flex; align-items: center; gap: 12px; font-size: 22px; color: var(--head); }
.mm2 .hd div.y { background: linear-gradient(120deg, rgba(48, 121, 174,.10), rgba(122,189,237,.06)); }
.mm2 .hd svg { width: 26px; height: 26px; }
.mm2 .rw { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.mm2 .rw div { padding: 16px 26px; color: var(--ink); display: flex; gap: 12px; } .mm2 .rw div + div, .mm2 .hd div + div { border-left: 1px solid var(--line); }
.mm2 .rw div.n { color: var(--ink-2); }
.mm2 .rw svg { width: 18px; height: 18px; flex: none; margin-top: 3px; }
.mm2 .ft { border-top: 1px solid var(--line); padding: 16px 26px; text-align: center; color: var(--ink-3); font-size: 15px; }

/* 50 Pricing, meet in the middle */
.pr2 .head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.pr2 .free { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 14px; background: linear-gradient(99deg, rgba(48, 121, 174,.12), rgba(122,189,237,.10)); color: var(--ink); font-size: 15px; }
.pr2 .free i { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(99deg,#3079AE,#7ABDED); display: grid; place-items: center; color: #fff; font-style: normal; font-size: 13px; flex: none; }
.pr2 .grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
.pr2 .main { background: var(--surface); border-radius: 20px; padding: 28px; position: relative; box-shadow: var(--shadow-lg); }
.pr2 .main::before { content: ""; position: absolute; inset: 0; border-radius: 20px; padding: 1.5px; background: linear-gradient(135deg,#3079AE,#7ABDED); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.pr2 .price { display: flex; align-items: baseline; gap: 10px; } .pr2 .price b { font-size: 64px; font-weight: 300; letter-spacing: -0.03em; line-height: 1; }
.pr2 .price span { color: var(--ink-3); } .pr2 .save { font-size: 13px; color: var(--thriving); margin-left: 6px; }
.pr2 .feat { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin: 22px 0 24px; padding: 0; list-style: none; font-size: 15px; color: var(--ink); }
.pr2 .feat li { display: flex; gap: 10px; } .pr2 .feat svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.pr2 .adds { display: flex; flex-direction: column; gap: 12px; }
.pr2 .adds .cap { font-size: 13px; color: var(--ink-3); display: flex; align-items: center; gap: 10px; } .pr2 .adds .cap::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.pr2 .add { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.pr2 .add .t { display: flex; justify-content: space-between; align-items: baseline; } .pr2 .add .t b { font-weight: 400; font-size: 19px; color: var(--ink); }
.pr2 .add p { font-size: 14px; color: var(--ink-2); margin-top: 6px; }
.pr2 .spend { margin-top: 16px; border-radius: 16px; border: 1px solid var(--line); overflow: hidden; }
.pr2 .spend div { display: flex; justify-content: space-between; padding: 12px 18px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-2); } .pr2 .spend div:first-child { border-top: 0; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

/* 52 Inline call to action */
.ic2 { display: grid; grid-template-columns: 200px 1fr auto; gap: 28px; align-items: center; padding: 22px 28px 22px 22px; border-radius: 20px; background: linear-gradient(120deg, var(--wash), var(--surface-2)); }
.ic2 .mini { background: var(--surface); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow); } .ic2 .mini b { font-size: 38px; font-weight: 300; letter-spacing: -0.03em; line-height: 1; }

/* 53 Install checklist */
.ck2 { display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: center; }
.ck2 label { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); margin-bottom: 10px; cursor: pointer; transition: box-shadow .2s, border-color .2s; }
.ck2 label:hover { border-color: var(--line-2); }
.ck2 input { appearance: none; width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid var(--line-2); margin: 0; display: grid; place-items: center; cursor: pointer; transition: all .2s; }
.ck2 input:checked { border-color: transparent; background: linear-gradient(135deg,#3079AE,#7ABDED); }
.ck2 input:checked::after { content: ""; width: 10px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.ck2 label b { font-weight: 400; color: var(--ink); display: block; } .ck2 label small { color: var(--ink-3); font-size: 14px; }
.ck2 .go2 { text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 28px; }
.ck2 .go2 svg { width: 120px; height: 120px; } .ck2 .go2 .qm-btn[disabled] { opacity: .45; pointer-events: none; }

/* 55 Audience switcher */
.au .tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 28px; overflow-x: auto; }
.au .tabs button { all: unset; cursor: pointer; padding: 12px 16px; font-size: 16px; color: var(--ink-3); position: relative; white-space: nowrap; }
.au .tabs button.on { color: var(--head); } .au .tabs button.on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: linear-gradient(90deg,#3079AE,#7ABDED); }
.au .pane { display: none; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .au .pane.on { display: grid; animation: rise .45s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.au h3 { font-size: 32px; } .au ul { list-style: none; padding: 0; margin: 18px 0 24px; } .au li { padding: 10px 0 10px 28px; position: relative; border-top: 1px solid var(--line); color: var(--ink-2); }
.au li::before { content: ""; position: absolute; left: 0; top: 18px; width: 14px; height: 2px; border-radius: 2px; background: linear-gradient(90deg,#3079AE,#7ABDED); }

/* 56 and 57 */
.nx2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hb2 .bar4 { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.hb2 .tabs button { all: unset; cursor: pointer; font-size: 14px; padding: 8px 14px; border-radius: 999px; color: var(--ink-2); border: 1px solid var(--line-2); margin-right: 6px; }
.hb2 .tabs button span { color: var(--ink-3); margin-left: 6px; }
.hb2 .tabs button.on { color: #fff; border-color: transparent; background: linear-gradient(99deg,#3079AE,#7ABDED); } .hb2 .tabs button.on span { color: rgba(255,255,255,.85); }
.hb2 input { font: inherit; font-size: 15px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); width: 240px; }
.hb2 .count { font-size: 13px; color: var(--ink-3); margin-top: 14px; }

/* 60 Spec sheet */
.sp { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.sp section { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 8px 22px 14px; }
.sp h4 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding: 14px 0 6px; margin: 0; }
.sp .f { display: grid; grid-template-columns: 120px 1fr 28px; gap: 14px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; }
.sp .f span { color: var(--ink-3); } .sp .f p { color: var(--ink); }
.sp .f button { all: unset; cursor: pointer; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-3); opacity: 0; transition: opacity .15s; }
.sp .f:hover button { opacity: 1; } .sp .f button:hover { background: var(--bg-alt); color: var(--head); }
.sp .stamp { grid-column: 1 / -1; font-size: 13px; color: var(--ink-3); }

@media (max-width: 960px) {
  .qa2, .qr, .ss, .vp2, .st2 .track, .st2 .tiles, .dict, .tp, .ht2, .ht2-key, .cm2, .mm2 .hd, .mm2 .rw, .pr2 .grid, .pr2 .feat, .ic2, .ck2, .au .pane, .nx2, .sp, .tl2 .cards { grid-template-columns: 1fr; }
  .qa2 { padding: 32px 20px; } .qa2 h1 { font-size: 36px; } .qr { padding: 40px 20px; } .qr blockquote { font-size: 24px; }
  .vp2 > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 24px; margin-top: 16px; }
  .dict { padding: 28px 20px; } .dict aside { border-left: 0; padding-left: 0; }
  .qw2 { grid-template-columns: 1fr; padding: 0 20px; } .qw2 .col:nth-child(n+2) { display: none; }
  .ht2-key { grid-template-columns: 1fr 1fr; }
}

[data-switch] [data-pane]:not(.on) { display: none !important; }

.tl2 .rail { margin: 0 8.33%; }
.fl2 .vis { min-height: 380px; } .fl2 .vis .qm-score { width: 100%; max-width: 420px; }


/* =====================================================================
   Third run (Asa review, 2026-10-23)
   ===================================================================== */

/* Gradient on headings: one gradient per heading, never two (Asa, 2026-10-23, fourth review).
   Multi-word headings stay solid ink and carry the gradient on one key phrase (.qm-em).
   Short one-line labels take the gradient across the whole label, sized to the text.
   Headings on gradient or photo surfaces stay white. */
.stage h4, .stage h5, .stage .vp2 h3, .stage .fl2 .item h3, .stage .ht2 h3, .stage .tp .ph h3, .stage .qm-faq h3,
.stage .qm-cred h3, .stage .st2 .tiles h3, .stage .hcard .t, .stage .qm-menu h5, .stage .qm-footer h5 {
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  width: fit-content; max-width: 100%;
}
.qm-em { -webkit-box-decoration-break: slice; box-decoration-break: slice; }
.qm-band:not(.plain) .qm-em { background: none; color: #fff; }
.v2tag.v3 { background: linear-gradient(99deg, #1E4E70, #3079AE 60%, #7ABDED); }

/* Bento: one idea per tile, the visual on top, two lines below (Ramp, FLORA). */
.bn3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "a a b" "c d b"; gap: 16px; }
.bn3 .a { grid-area: a; } .bn3 .b { grid-area: b; } .bn3 .c { grid-area: c; } .bn3 .d { grid-area: d; }
.bn3 .tile { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 28px; display: flex; flex-direction: column; }
.bn3 .fig { flex: 1; min-height: 200px; display: grid; place-items: center; margin-bottom: 24px; }
.bn3 h3 { font-size: 24px; line-height: 1.2; } .bn3 p { color: var(--ink-2); margin-top: 6px; max-width: 34em; }
.bn3 .bscale { width: 100%; max-width: 560px; position: relative; padding-top: 64px; }
.bn3 .bscale .bands { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.bn3 .bscale .bands span { height: 34px; border-radius: 8px; font-size: 12px; color: #fff; display: grid; place-items: center; }
.bn3 .bscale .bands .strained { background: var(--strained); } .bn3 .bscale .bands .forming { background: var(--forming); } .bn3 .bscale .bands .developing { background: var(--developing); } .bn3 .bscale .bands .performing { background: var(--performing); } .bn3 .bscale .bands .thriving { background: var(--thriving); }
.bn3 .bscale .pin { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.bn3 .bscale .pin b { font-size: 40px; line-height: 1; font-weight: 300; letter-spacing: -0.03em; } .bn3 .bscale .pin small { font-size: 12px; color: var(--ink-3); }
.bn3 .bscale { padding-top: 70px; } .bn3 .bscale .pin::after { content: ""; width: 0; height: 0; margin-top: 6px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 8px solid #3079AE; }
.bn3 .stack { display: flex; flex-direction: column; gap: 10px; justify-content: center; align-items: stretch; }
.bn3 .chip { display: flex; justify-content: space-between; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); }
.bn3 .chip b { font-size: 22px; font-weight: 300; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bn3 .big { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
.bn3 .big b { font-size: 96px; line-height: .9; font-weight: 200; letter-spacing: -0.05em; } .bn3 .big span { color: var(--ink-3); }
.bn3 .logos { display: grid; grid-template-columns: repeat(2, 76px); gap: 12px; }
.bn3 .logos i { width: 76px; height: 76px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; place-items: center; }
.bn3 .logos img { max-width: 48px; max-height: 22px; filter: var(--logo-filter); }

/* Comparison: a plain table with full-width hairlines (Ramp, Notion). */
.ct3 table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 16px; }
.ct3 col.c1 { width: 26%; } .ct3 col.us { width: 37%; }
.ct3 th, .ct3 td { text-align: left; vertical-align: top; padding: 18px 20px; border-bottom: 1px solid var(--line); font-weight: 400; }
.ct3 thead th { font-size: 15px; color: var(--ink-3); padding-top: 22px; padding-bottom: 16px; border-bottom-color: var(--line-2); }
.ct3 tbody th { color: var(--ink); }
.ct3 td { color: var(--ink-2); } .ct3 td.us { color: var(--ink); }
.ct3 td svg { width: 18px; height: 18px; vertical-align: -3px; margin-right: 10px; }
.ct3 td span { transition: opacity .2s; } .ct3.swap td.them span, .ct3.swap .them-h { opacity: 0; }
.ct3 .us { background: var(--alice); }
.ct3 thead th.us { color: var(--head); background: var(--alice); border-top-left-radius: 14px; border-top-right-radius: 14px; box-shadow: inset 0 3px 0 0 #3079AE; position: relative; }
.ct3 thead th.us::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 14px 14px 0 0; background: linear-gradient(90deg, #3079AE, #7ABDED); }
.ct3 thead th.us span { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; }
.ct3 thead th.us img { width: 24px; height: 24px; }
.ct3 tbody tr:last-child td.us { border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; border-bottom-color: transparent; }
.ct3 .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Score dial */
.dl3 { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: center; }
.dl3 svg { width: 300px; height: 300px; font-family: 'League Spartan', sans-serif; }
.dl3 .tk { stroke: var(--line-2); stroke-width: 2; stroke-linecap: round; transition: stroke .25s ease var(--d); }
.dl3.in .tk.lit { stroke: url(#dlg); }
.dl3 .bd { fill: none; stroke-width: 3; stroke-linecap: round; opacity: .9; }
.dl3 .bl { font-size: 11px; fill: var(--ink-3); }
.dl3 .n { font-size: 76px; font-weight: 200; letter-spacing: -0.04em; fill: url(#dlg); }
.dl3 .b { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; fill: var(--ink-2); }
.dl3 .dt { font-size: 13px; fill: var(--thriving); }
.dl3 .key { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; }
.dl3 .key span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); }
.dl3 .key i { width: 10px; height: 10px; border-radius: 3px; } .dl3 .key small { color: var(--ink-3); font-size: 13px; }

/* Band scale */
.bs3 .top { display: flex; justify-content: space-between; align-items: center; }
.bs3 .readout { display: flex; align-items: center; gap: 16px; }
.bs3 .readout b { font-size: 80px; line-height: 1; font-weight: 300; letter-spacing: -0.04em; }
.bs3 .readout .pill { font-size: 14px; padding: 5px 14px; }
.bs3 .rail { position: relative; margin: 44px 0 0; }
.bs3 .segs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.bs3 .sg { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 12px 12px 10px; border-radius: 10px; color: #fff; opacity: .4; transition: opacity .2s; }
.bs3 .sg.on { opacity: 1; }
.bs3 .sg span { display: block; font-size: 15px; } .bs3 .sg small { display: block; font-size: 12px; opacity: .9; }
.bs3 .sg.strained { background: var(--strained); } .bs3 .sg.forming { background: var(--forming); } .bs3 .sg.developing { background: var(--developing); } .bs3 .sg.performing { background: var(--performing); } .bs3 .sg.thriving { background: var(--thriving); }
.bs3 .thr { position: absolute; top: -28px; bottom: -6px; width: 0; border-left: 1.5px dashed var(--ink-3); }
.bs3 .thr span { position: absolute; top: -2px; left: 8px; white-space: nowrap; font-size: 12px; color: var(--ink-3); }
.bs3 .thumb { position: absolute; top: -10px; bottom: -10px; width: 4px; margin-left: -2px; border-radius: 4px; background: linear-gradient(#3079AE, #7ABDED); box-shadow: 0 0 0 3px var(--bg), 0 4px 14px rgba(48, 121, 174,.35); pointer-events: none; }
.bs3 .thumb::before { content: ""; position: absolute; top: -8px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: linear-gradient(135deg, #3079AE, #7ABDED); box-shadow: 0 0 0 3px var(--bg); }
.bs3 input[type=range] { position: absolute; inset: -16px 0; width: 100%; height: calc(100% + 32px); opacity: 0; cursor: ew-resize; margin: 0; }
.bs3 .out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 32px 0 0; border-top: 1px solid var(--line); }
.bs3 .out div { padding: 18px 24px 0 0; } .bs3 .out div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.bs3 dt { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .bs3 dd { margin: 6px 0 0; color: var(--ink); }

/* Teams on one scale: one row per team */
.tm3 .ctl { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; flex-wrap: wrap; gap: 12px; }
.tm3 .plot { position: relative; }
.tm3 .zones { position: absolute; left: 110px; right: 72px; top: -26px; bottom: 26px; display: grid; grid-template-columns: 20fr 30fr 20fr 20fr 10fr; pointer-events: none; }
.tm3 .zones div { border-left: 1px solid var(--line); position: relative; } .tm3 .zones div:first-child { border-left: 0; }
.tm3 .zones .z1 { background: color-mix(in srgb, var(--strained) 7%, transparent); } .tm3 .zones .z2 { background: color-mix(in srgb, var(--forming) 7%, transparent); } .tm3 .zones .z3 { background: color-mix(in srgb, var(--developing) 8%, transparent); } .tm3 .zones .z4 { background: color-mix(in srgb, var(--performing) 7%, transparent); } .tm3 .zones .z5 { background: color-mix(in srgb, var(--thriving) 8%, transparent); }
.tm3 .zones span { position: absolute; top: 0; left: 8px; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.tm3 .row, .tm3 .axis { display: grid; grid-template-columns: 110px 1fr 72px; align-items: center; position: relative; }
.tm3 .row { height: 46px; } .tm3 .row:first-of-type { margin-top: 26px; }
.tm3 .nm { font-size: 15px; color: var(--ink); }
.tm3 .lane { position: relative; height: 100%; }
.tm3 .lane::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--line-2); }
.tm3 .dot { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: linear-gradient(135deg, #3079AE, #7ABDED); box-shadow: 0 0 0 4px var(--bg); }
.tm3 .was { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; border: 2px solid var(--ink-3); background: var(--bg); opacity: 0; transition: opacity .4s; }
.tm3 .trail { position: absolute; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; background: linear-gradient(90deg, rgba(48, 121, 174,.25), #3079AE 70%, #7ABDED); transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.25,.46,.45,.94); }
.tm3 .v { text-align: right; } .tm3 .v b { font-size: 18px; color: var(--head); } .tm3 .v em { font-style: normal; font-size: 13px; color: var(--thriving); margin-left: 6px; opacity: 0; transition: opacity .4s; }
.tm3.chg .was, .tm3.chg .v em { opacity: 1; } .tm3.chg .trail { transform: scaleX(1); }
.tm3 .axis { height: 26px; } .tm3 .axis .lane::before { display: none; }
.tm3 .axis .lane span { position: absolute; top: 4px; transform: translateX(-50%); font-size: 12px; color: var(--ink-3); }

/* Leading indicator, as a hypothesis */
.li3 .hd { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.li3 .hyp { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); border: 1.5px dashed var(--ink-3); border-radius: 999px; padding: 4px 12px; }
.li3 .hd p { color: var(--ink-2); font-size: 15px; }
.li3 .body { display: grid; grid-template-columns: 1fr 240px; gap: 32px; align-items: start; }
.li3 svg { width: 100%; height: auto; display: block; overflow: visible; }
.li3 .ln { stroke-dasharray: 1400; stroke-dashoffset: 1400; transition: stroke-dashoffset 1.8s cubic-bezier(.25,.46,.45,.94); }
.li3 .ln2 { stroke-dasharray: 2 8; transition: none; stroke-dashoffset: 0; opacity: 0; }
.li3.in .ln { stroke-dashoffset: 0; } .li3.in .ln2 { opacity: 1; transition: opacity .8s ease 1.4s; }
.li3 .lead { opacity: 0; transition: opacity .6s ease 2s; } .li3.in .lead { opacity: 1; } .li3.in rect.lead { opacity: .55; }
.li3 .cap { display: none; }
.li3 .side { display: flex; flex-direction: column; gap: 8px; }
.li3 .side button { all: unset; cursor: pointer; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.li3 .side button b { display: block; color: var(--ink); } .li3 .side button small { font-size: 13px; color: var(--ink-3); }
.li3 .side button.on { border-color: transparent; box-shadow: var(--shadow-lg); }
.li3 .side button.on b { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; }

/* Worlds: the original cover art */
.wd3 .hd { text-align: center; margin-bottom: 28px; } .wd3 .hd p { margin-top: 8px; }
.wd3 .rows { display: flex; flex-direction: column; gap: 14px; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); overflow: hidden; }
.wd3 .track { display: flex; gap: 14px; width: max-content; animation: wdrift 60s linear infinite; }
.wd3 .r.rev .track { animation-direction: reverse; animation-duration: 70s; }
.wd3 .rows:hover .track { animation-play-state: paused; }
.wd3 figure { margin: 0; width: 176px; height: 176px; border-radius: 16px; overflow: hidden; flex: none; transform: translateZ(0); }
.wd3 figure:hover { transform: none; }
.wd3 figure img { transition: transform .35s ease; } .wd3 figure:hover img { transform: scale(1.06); }
.wd3 figure img { width: 100%; height: 100%; object-fit: cover; }
@keyframes wdrift { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .wd3 .track { animation: none; } .wd3 .rows { overflow-x: auto; } }

/* Adaptive loop: a climbing coil */
.lp3 { display: grid; grid-template-columns: 420px 1fr; gap: 48px; align-items: center; }
.lp3 svg { width: 100%; height: auto; overflow: visible; font-family: 'League Spartan', sans-serif; }
.lp3 .coil-bg { fill: none; stroke: var(--line-2); stroke-width: 1.5; }
.lp3 .coil { fill: none; stroke: url(#lp3g); stroke-width: 3; stroke-linecap: round; }
.lp3 .st { fill: var(--bg); stroke: var(--line-2); stroke-width: 2; transition: all .3s; }
.lp3 .st.lit { stroke: #3079AE; fill: #3079AE; }
.lp3 .lv { font-size: 18px; fill: var(--head); }
.lp3 .runner { filter: drop-shadow(0 2px 6px rgba(48, 121, 174,.5)); }
.lp3 .steps { list-style: none; margin: 18px 0 0; padding: 0; counter-reset: s; }
.lp3 .steps li { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); color: var(--ink-3); transition: color .3s; min-height: 56px; }
.lp3 .steps li b { font-weight: 400; color: var(--ink-3); }
.lp3 .steps li.on, .lp3 .steps li.done { color: var(--ink); }
.lp3 .steps li.on b { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; }
.lp3 .steps li:not(.on):not(.done) span { opacity: .35; }
.lp3 .laps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 18px; }
.lp3 .laps span { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; color: var(--ink-3); transition: all .3s; }
.lp3 .laps b { display: block; font-size: 24px; font-weight: 300; } .lp3 .laps small { font-size: 12px; }
.lp3 .laps span.done { color: var(--ink-2); } .lp3 .laps span.on { border-color: transparent; box-shadow: var(--shadow-lg); color: var(--ink); }
.lp3 .laps span.on b { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; }

/* Player opt-in */
.pv3 { display: grid; grid-template-columns: 1fr 1.25fr; gap: 72px; align-items: start; }
.pv3 .now { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink-2); }
.pv3 .now span { color: var(--head); }
.pv3 .o { display: grid; grid-template-columns: 44px 1fr auto; gap: 20px; align-items: center; padding: 26px 0; border-top: 1px solid var(--line); }
.pv3 .o:last-child { border-bottom: 1px solid var(--line); }
.pv3 .o b { display: block; color: var(--ink); font-size: 18px; } .pv3 .o small { display: block; color: var(--ink-3); font-size: 14px; margin-top: 4px; }
.pv3 .meter { display: flex; gap: 3px; align-items: flex-end; height: 22px; }
.pv3 .meter i { width: 9px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--line-2); }
.pv3 .meter i:nth-child(1) { height: 8px; } .pv3 .meter i:nth-child(2) { height: 14px; } .pv3 .meter i:nth-child(3) { height: 22px; }
.pv3 .meter i.in { background: var(--alice); border-color: var(--core); } .pv3 .meter i:not(.in) { opacity: .4; }
.pv3 .o.on .meter i.in { background: linear-gradient(#7ABDED, #3079AE); border-color: transparent; }
.pv3 .sw { all: unset; cursor: pointer; width: 46px; height: 26px; border-radius: 999px; background: var(--line-2); position: relative; transition: background .2s; }
.pv3 .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s; }
.pv3 .sw.on { background: linear-gradient(99deg, #3079AE, #7ABDED); } .pv3 .sw.on::after { transform: translateX(20px); }
.pv3 .sw:focus-visible { outline: 2px solid var(--core); outline-offset: 3px; }

/* Send kit */
.sk3 { max-width: 760px; margin: 0 auto; }
.sk3 .ctl { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.sk3 .who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .sk3 .who .qm-small { margin-right: 4px; }
.sk3 .who button { all: unset; cursor: pointer; font-size: 15px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); }
.sk3 .who button.on { border-color: transparent; background: linear-gradient(99deg, #3079AE, #7ABDED); color: #fff; }
.sk3 .card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 26px 28px; box-shadow: var(--shadow); }
.sk3 .meta { font-size: 13px; color: var(--ink-3); }
.sk3 .sub { margin-top: 12px; font-size: 19px; color: var(--head); }
.sk3 .msg { margin-top: 10px; font-size: 17px; line-height: 1.6; color: var(--ink); }
.sk3 .acts { display: flex; justify-content: flex-end; margin-top: 22px; }

/* Coming soon preview: pitch beside a dashed outline of the unbuilt feature */
.cs3 { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.cs3 .copy h3 { margin: 16px 0 10px; }
.cs3 .notify { display: flex; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
.cs3 .notify input { flex: 1; min-width: 200px; font: inherit; font-size: 15px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); }
.cs3 .ghost { border: 1.5px dashed var(--line-2); border-radius: 20px; padding: 22px 24px; background: repeating-linear-gradient(135deg, transparent 0 10px, var(--bg-alt) 10px 11px); }
.cs3 .gh { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 10px; }
.cs3 .r { display: grid; grid-template-columns: 96px 1fr 30px; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-3); }
.cs3 .r.you { color: var(--ink); } .cs3 .r b { font-weight: 400; text-align: right; } .cs3 .r.you b { color: var(--head); }
.cs3 .r .bar.dashed { background: none; height: 10px; border: 1.5px dashed var(--line-2); border-radius: 999px; width: var(--w); }
.cs3 .r.you .bar { height: 10px; }

/* Hub grid: square cards with an emblem */
.hb2 .hgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.hcard { aspect-ratio: 1 / 1; display: flex; flex-direction: column; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.hcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: transparent; }
.hcard:focus-visible { outline: 2px solid var(--core); outline-offset: 3px; }
.hcard .em { width: 60px; height: 60px; border-radius: 10px; display: grid; place-items: center; background: var(--alice); }
.hcard .em svg { width: 34px; height: 34px; }
.hcard .t { margin-top: auto; font-size: 19px; line-height: 1.2; color: var(--head); }
.hcard .go { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 13px; color: var(--ink-3); }
.hcard:hover .qm-arrow { background: linear-gradient(99deg, #3079AE, #7ABDED); color: #fff; border-color: transparent; transform: translateX(4px); }

@media (max-width: 960px) {
  .bn3, .dl3, .lp3, .pv3, .cs3, .li3 .body { grid-template-columns: 1fr; } .bn3 { grid-template-columns: minmax(0, 1fr); grid-template-areas: "a" "b" "c" "d"; } .bn3 .bscale .bands span { font-size: 0; height: 22px; }
  .dl3 svg { width: 260px; height: 260px; margin: 0 auto; } .dl3, .pv3, .cs3, .lp3 { gap: 32px; }
  .bs3 .sg span { font-size: 12px; } .bs3 .sg small { display: none; } .bs3 .out { grid-template-columns: 1fr; } .bs3 .out div + div { padding-left: 0; border-left: 0; }
  .tm3 .zones { left: 80px; right: 52px; } .tm3 .row, .tm3 .axis { grid-template-columns: 80px 1fr 52px; }
  .ct3 table, .ct3 tbody, .ct3 thead { display: block; } .ct3 colgroup { display: none; }
  .ct3 tr { display: grid; grid-template-columns: 1fr 1fr; } .ct3 thead th:first-child { display: none; }
  .ct3 tbody th { grid-column: 1 / -1; padding: 16px 4px 6px; border-bottom: 0; }
  .ct3 th, .ct3 td { padding: 10px 12px 14px; font-size: 15px; } .ct3 td svg { display: block; margin: 0 0 6px; }
  .ct3 thead th.us { border-radius: 12px 12px 0 0; } .ct3 tbody tr:last-child td.us { border-radius: 0 0 12px 12px; }
  .ct3 .cmp2 .tabs { display: flex; flex-wrap: wrap; border-radius: 16px; }
  .bs3 .sg { padding: 10px 4px; text-align: center; } .bs3 .sg span { visibility: hidden; } .bs3 .readout b { font-size: 60px; }
  .bs3 .rail { margin-top: 64px; } .bs3 .thr { top: -46px; } .bs3 .thr span { top: -4px; }
  .li3 svg text { display: none; } .li3 .cap { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--ink-3); margin-top: 6px; }
  .tm3 .zones span { display: none; } .tm3 .axis .lane span:nth-child(5) { display: none; }
  .hb2 .hgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .hcard { padding: 14px; aspect-ratio: auto; min-height: 168px; } .hcard .t { font-size: 16px; } .hcard .em { width: 48px; height: 48px; } .wd3 figure { width: 132px; height: 132px; }
}

/* ===================== Fourth run: simple (Asa, 2026-10-23) ===================== */
/* Bento lead tile: the number and one bar. */
.bn3 .one { width: 100%; max-width: 420px; }
.bn3 .one .n { display: flex; align-items: baseline; gap: 8px; } .bn3 .one .n b { font-size: 96px; line-height: 1; font-weight: 200; letter-spacing: -0.05em; } .bn3 .one .n span { color: var(--ink-3); font-size: 20px; }
.bn3 .one .track { height: 8px; border-radius: 999px; background: var(--surface-2); margin-top: 18px; overflow: hidden; } .bn3 .one .track i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #3079AE, #7ABDED); }

/* Score dial: one arc, one number, one word. */
.sd4 { display: grid; grid-template-columns: 340px 1fr; gap: 64px; align-items: center; }
.sd4 .g { position: relative; }
.sd4 svg { width: 100%; height: auto; display: block; }
.sd4 .arc { transition: stroke-dasharray 1.2s cubic-bezier(.25,.46,.45,.94); }
.sd4 .v { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; }
.sd4 .v b { display: block; width: fit-content; margin: 0 auto; font-size: 88px; line-height: .9; font-weight: 200; letter-spacing: -0.05em; }
.sd4 .v span { display: block; margin-top: 8px; font-size: 16px; color: var(--ink-2); }
.sd4 .t p { margin-top: 12px; font-size: 18px; }

/* Band scale: number, word, one sentence, one line, five words. */
.bs4 { max-width: 760px; margin: 0 auto; text-align: center; }
.bs4 .readout { display: flex; align-items: baseline; justify-content: center; gap: 16px; }
.bs4 .readout b { font-size: 96px; line-height: 1; font-weight: 200; letter-spacing: -0.05em; }
.bs4 .bw { font-size: 28px; color: var(--head); }
.bs4 .mean { margin: 10px auto 0; max-width: 32em; color: var(--ink-2); font-size: 18px; min-height: 1.6em; }
.bs4 .rail { position: relative; height: 28px; margin-top: 40px; }
.bs4 .line { position: absolute; left: 0; right: 0; top: 11px; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bs4 .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #3079AE, #7ABDED); }
.bs4 .thumb { position: absolute; top: 0; width: 28px; height: 28px; margin-left: -14px; border-radius: 50%; background: var(--surface); border: 2px solid #3079AE; pointer-events: none; }
.bs4 input[type=range] { position: absolute; inset: -10px 0; width: 100%; height: 48px; opacity: 0; cursor: ew-resize; margin: 0; }
.bs4 .names { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 12px; font-size: 14px; color: var(--ink-3); }
.bs4 .names span.on { color: var(--head); }

/* Comparison: two columns of words (Ramp). */
.ct4 .tabs { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; font-size: 15px; }
.ct4 .tabs > span { color: var(--ink-3); }
.ct4 .tabs button { all: unset; cursor: pointer; color: var(--ink-2); padding: 6px 0; border-bottom: 2px solid transparent; }
.ct4 .tabs button.on { color: var(--head); border-image: linear-gradient(90deg, #3079AE, #7ABDED) 1; border-bottom-width: 2px; border-bottom-style: solid; }
.ct4 .tabs button:focus-visible { outline: 2px solid var(--core); outline-offset: 4px; }
.ct4 table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ct4 th, .ct4 td { text-align: left; font-weight: 400; padding: 20px 16px 20px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.ct4 thead th { padding-top: 0; font-size: 18px; color: var(--ink-2); }
.ct4 thead th.us { color: var(--head); } .ct4 thead th.us img { width: 22px; height: 22px; display: inline-block; vertical-align: -4px; margin-right: 10px; }
.ct4 tbody th { color: var(--ink-3); font-size: 15px; width: 26%; }
.ct4 td.us { color: var(--ink); font-size: 17px; } .ct4 td.them { color: var(--ink-3); font-size: 17px; }
.ct4 td span, .ct4 .them-h { transition: opacity .2s; } .ct4.swap td.them span, .ct4.swap .them-h { opacity: 0; }
.ct4 .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 960px) {
  .sd4 { grid-template-columns: 1fr; gap: 24px; } .sd4 .g { max-width: 300px; margin: 0 auto; width: 100%; }
  .bs4 .readout b { font-size: 72px; } .bs4 .names { font-size: 11px; }
  .ct4 table, .ct4 thead, .ct4 tbody { display: block; } .ct4 tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .ct4 thead th:first-child { display: none; } .ct4 tbody th { grid-column: 1 / -1; width: auto; padding-bottom: 4px; border-bottom: 0; }
}

/* ===================== New kinds (Relume-style library) ===================== */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.v2tag.new { background: linear-gradient(99deg, #1E4E70, #3079AE); }
.ph1 { padding-bottom: 32px; border-bottom: 1px solid var(--line); } .ph1 h1 { margin: 16px 0 12px; } .ph1 .qm-lead { max-width: 36em; }
.sp1 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.sp1 > div { border-top: 1px solid var(--line-2); padding-top: 20px; }
.sp1 .k { font-size: 15px; letter-spacing: .08em; display: inline-block; } .sp1 h3 { font-size: 22px; margin: 14px 0 8px; } .sp1 p { color: var(--ink-2); }
.fq1 { max-width: 780px; margin: 0 auto; border-top: 1px solid var(--line); }
.fq1 details { border-bottom: 1px solid var(--line); }
.fq1 summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-size: 19px; color: var(--head); }
.fq1 summary::-webkit-details-marker { display: none; }
.fq1 summary i { position: relative; width: 14px; height: 14px; flex: none; }
.fq1 summary i::before, .fq1 summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #3079AE, #7ABDED); transition: transform .2s; }
.fq1 summary i::after { transform: rotate(90deg); } .fq1 details[open] summary i::after { transform: rotate(0); }
.fq1 summary:focus-visible { outline: 2px solid var(--core); outline-offset: 2px; }
.fq1 details p { padding: 0 40px 22px 0; color: var(--ink-2); }
.bg1 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .bg1 .t { font-size: 20px; }
.nl1 { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding: 32px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.nl1 form { display: flex; gap: 8px; flex: 1; max-width: 460px; min-width: 260px; }
.nl1 input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); }
.cr1 { border-top: 1px solid var(--line); }
.cr1 a { display: grid; grid-template-columns: 2fr 1fr 1fr 40px; gap: 16px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 15px; transition: padding .2s; }
.cr1 a .t { font-size: 19px; color: var(--head); } .cr1 a:hover { padding-left: 8px; }
.cr1 a:hover .qm-arrow { background: linear-gradient(99deg, #3079AE, #7ABDED); color: #fff; border-color: transparent; }
.cr1 a:focus-visible { outline: 2px solid var(--core); outline-offset: 2px; } .cr1 p { margin-top: 12px; }
.ev1 { display: grid; grid-template-columns: 88px 1fr auto; gap: 28px; align-items: center; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.ev1 .d { text-align: center; border-right: 1px solid var(--line); padding-right: 24px; } .ev1 .d span { display: block; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.ev1 .d b { display: block; width: fit-content; margin: 0 auto; font-size: 44px; font-weight: 200; line-height: 1; }
.lf1 { max-width: 68ch; margin: 0 auto; font-size: 18px; line-height: 1.7; color: var(--ink); }
.lf1 h2 { font-size: 34px; margin-bottom: 16px; } .lf1 h3 { font-size: 22px; margin: 32px 0 10px; } .lf1 p + p { margin-top: 16px; }
.lf1 ul { padding-left: 20px; margin: 0; } .lf1 li + li { margin-top: 6px; } .lf1 li::marker { color: #3079AE; }
.lf1 blockquote { margin: 28px 0; padding-left: 20px; border-left: 2px solid #3079AE; font-size: 22px; color: var(--head); }
@media (max-width: 960px) {
  .sp1, .bg1 { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .cr1 a { grid-template-columns: 1fr 40px; } .cr1 a span:not(.t):not(.qm-arrow) { display: none; }
  .ev1 { grid-template-columns: 64px 1fr; } .ev1 .qm-btn { grid-column: 1 / -1; justify-self: start; } .ev1 .d { padding-right: 12px; }
  .nl1 form { min-width: 0; max-width: none; width: 100%; }
}

/* Checklist, fourth run: a plain list and one button. */
.ck4 { max-width: 640px; margin: 0 auto; }
.ck4 ul { list-style: none; margin: 24px 0 28px; padding: 0; border-top: 1px solid var(--line); }
.ck4 li { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--line); }
.ck4 li svg { flex: none; margin-top: 2px; }
.ck4 li b { display: block; color: var(--ink); font-size: 18px; } .ck4 li small { display: block; color: var(--ink-3); font-size: 15px; margin-top: 2px; }

@media (max-width: 960px) { .au .tabs { flex-wrap: wrap; max-width: 100%; } .au .tabs button { flex: none; } }

/* Bento, benchmark and comparison tiles: labeled bars (Asa: "unclear"). */
.bn3 .bm, .bn3 .cmp { width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 18px; }
.bn3 .bm .r, .bn3 .cmp .r { display: grid; grid-template-columns: 110px 1fr 44px; gap: 14px; align-items: center; }
.bn3 .l { font-size: 15px; color: var(--ink); }
.bn3 .bm .bar, .bn3 .cmp .bar { height: 12px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bn3 .bm .bar i, .bn3 .cmp .bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #3079AE, #7ABDED); }
.bn3 .bm .std .bar i { background: var(--line-2); } .bn3 .bm .std .l, .bn3 .bm .std b { color: var(--ink-3); }
.bn3 .bm b, .bn3 .cmp b { font-weight: 400; font-size: 22px; text-align: right; color: var(--head); }
.bn3 .bm .you b { font-size: 34px; font-weight: 300; }
.bn3 .cmp { gap: 14px; } .bn3 .cmp .r { grid-template-columns: 76px 1fr 32px; } .bn3 .cmp b { font-size: 18px; }
.bn3 .cmp .r:not(.top) .bar i { opacity: .55; }
.bn3 .cap { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } .bn3 .cap.note { text-transform: none; letter-spacing: 0; font-size: 14px; }

/* One bar row everywhere (Asa: "the bullet lines arent aligned anywhere"): the same label column, bar height
   and right-aligned tabular value in every module that draws labeled bars. */
:root {
  --bar-label: 120px;
  --bar-val: 40px;
  --bar-h: 8px;
  --bar-gap: 14px;
}
.qm-score .q, .qm-teams .t, .cs3 .r, .bn3 .bm .r, .bn3 .cmp .r { grid-template-columns: var(--bar-label) minmax(0, 1fr) var(--bar-val); gap: var(--bar-gap); }
.qm-teams .t:has(.pill) { grid-template-columns: var(--bar-label) minmax(0, 1fr) var(--bar-val) 96px; }
.qm-score .q .bar, .qm-teams .t .bar, .cs3 .r .bar, .bn3 .bm .bar, .bn3 .cmp .bar, .tp .r .bar { height: var(--bar-h); }
.cs3 .r .bar.dashed { height: var(--bar-h); }
.qm-score .q b, .qm-teams .t b, .cs3 .r b, .bn3 .bm b, .bn3 .cmp b, .tp .r b { font-variant-numeric: tabular-nums; text-align: right; }
/* Bento: graphics share the text's left edge. */
.bn3 .fig { place-items: center start; }
.bn3 .bm, .bn3 .cmp { max-width: none; }
.bn3 .big { align-items: flex-start; }
.bn3 .bm .you b { font-size: 22px; font-weight: 400; }
@media (max-width: 960px) { :root {
  --bar-label: 92px;
  --bar-val: 36px;
} }

/* Flat: no large shadows anywhere (Asa, 2026-10-23). Surfaces separate with a 1px line; hover and
   selected states change the line to blue instead of lifting. */
:root, [data-theme="light"], [data-theme="swap"] {
  --shadow: none;
  --shadow-lg: none;
}
.qm-btn, .qm-btn:hover { box-shadow: none; }
.bs3 .thumb, .bs4 .thumb { box-shadow: 0 0 0 3px var(--bg); }
.pv3 .sw::after { box-shadow: none; }
.qm-card-link:hover, .hcard:hover { transform: none; border-color: #3079AE; }
.ss .list button.on, .li3 .side button.on, .lp3 .laps span.on, .tl2 .cards div.lit { border-color: #3079AE; }
.qm-score, .qm-compose .float .qm-score { border: 1px solid var(--line); }
.bn3 .chip, .bn3 .logos i, .sk3 .card { border: 1px solid var(--line); }
.tl2 .node.lit { box-shadow: none; }

/* Score bars, dots and arcs take their band's color (set by modules.js from the value). */
.qm-score .q .bar i, .qm-teams .t .bar i, .bn3 .cmp .bar i, .bn3 .bm .you .bar i, .cs3 .r.you .bar i, .tp .r .bar i { background: var(--bandc, linear-gradient(90deg, #3079AE, #7ABDED)); }
.bn3 .cmp .r:not(.top) .bar i { opacity: 1; }
.tm3 .dot { background: var(--bandc, linear-gradient(135deg, #3079AE, #7ABDED)); }

.bn3 .cmp { --bar-label: 72px; --bar-val: 30px; --bar-gap: 10px; }
.pv3 .meter:not(:has(i.in))::after { content: ""; }

/* Bar chart (replaces the dot plot; Asa: "aim for the 4th graders"). */
.bc4 { max-width: 760px; }
.bc4 .ctl { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.bc4 .r { display: grid; grid-template-columns: var(--bar-label) minmax(0, 1fr) var(--bar-val); gap: var(--bar-gap); align-items: center; padding: 10px 0; }
.bc4 .l { font-size: 16px; color: var(--ink); }
.bc4 .bar { height: 14px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bc4 .bar i { display: block; height: 100%; border-radius: 999px; background: var(--bandc, #3079AE); transition: width .5s ease, background-color .5s ease; }
.bc4 b { font-weight: 400; font-size: 20px; text-align: right; color: var(--head); font-variant-numeric: tabular-nums; }
.bc4 .qm-small { margin-top: 14px; }

/* First, then: two steps and an arrow (replaces the line chart). */
.ft4 { max-width: 820px; margin: 0 auto; text-align: center; }
.ft4 .hyp { display: inline-block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); border: 1.5px dashed var(--ink-3); border-radius: 999px; padding: 4px 12px; }
.ft4 .steps { display: grid; grid-template-columns: 1fr 80px 1fr; align-items: center; gap: 16px; margin: 32px 0 24px; }
.ft4 .s { display: flex; flex-direction: column; align-items: center; }
.ft4 .k { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.ft4 .s svg { width: 56px; height: 56px; margin: 16px 0; }
.ft4 h3 { font-size: 30px; margin: 0 auto; } .ft4 .s p { margin-top: 8px; color: var(--ink-2); }
.ft4 .arrow svg { width: 64px; height: 24px; }
@media (max-width: 960px) { .ft4 .steps { grid-template-columns: 1fr; } .ft4 .arrow { transform: rotate(90deg); justify-self: center; } }

/* Timeline, fourth run: one line, labels under the points. */
.tl4 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); position: relative; }
.tl4::before { content: ""; position: absolute; left: 0; right: calc(100% / 6 - 8px); top: 7px; height: 2px; background: linear-gradient(90deg, #3079AE, #7ABDED); }
.tl4 li { position: relative; padding-top: 30px; }
.tl4 i { position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid #3079AE; }
.tl4 li.end i { background: linear-gradient(135deg, #3079AE, #7ABDED); border-color: transparent; }
.tl4 b { display: block; font-weight: 400; font-size: 17px; color: var(--ink); } .tl4 span { font-size: 14px; color: var(--ink-3); }
.tl4 li.end b { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; }
@media (max-width: 960px) {
  .tl4 { grid-template-columns: 1fr; gap: 18px; padding-left: 30px; }
  .tl4::before { left: 7px; right: auto; top: 8px; bottom: 36px; width: 2px; height: auto; background: linear-gradient(#3079AE, #7ABDED); }
  .tl4 li { padding-top: 0; } .tl4 i { left: -30px; top: 3px; }
}

/* List markers sit on the middle of the first line of text (Asa: "see misalignment"). Dash markers and
   icons are placed from the line height (lh), so they stay centered at any font size. */
.qm-alt-row li::before { top: calc(8px + 0.5lh - 1px); }
.au li::before { top: calc(10px + 0.5lh - 1px); }
.mm2 .rw svg, .pr2 .feat svg { margin-top: calc(0.5lh - 9px); }
.ck4 li svg { margin-top: calc(0.5lh - 11px); }
.ck4 li b { line-height: inherit; }

/* Steps, fourth run: large numerals carry the module. */
.sp4 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.sp4 li { position: relative; }
.sp4 li + li::before { content: none; }
.sp4 .n { display: block; width: fit-content; font-size: 128px; line-height: .9; font-weight: 200; letter-spacing: -0.06em; }
.sp4 .c { display: inline-block; margin-top: 18px; font-size: 13px; color: var(--core-ink); background: var(--alice); border-radius: 999px; padding: 3px 10px; }
.sp4 h3 { font-size: 24px; margin: 14px 0 6px; } .sp4 p { color: var(--ink-2); }
.qm-int.logos-only a { justify-content: center; min-height: 84px; } .qm-int.logos-only img { max-height: 26px; }
@media (max-width: 960px) { .sp4 { grid-template-columns: 1fr; gap: 32px; } .sp4 li + li::before { display: none; } .sp4 .n { font-size: 88px; } }

/* Developing is a softer gold (Asa: "gold in the eighties looks too hard"); its pill uses dark text for contrast. */
.pill.Developing { color: #5A4210; }

/* Directory cards carry a one-line byline under the title. */
.hcard .d { display: block; margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--ink-2); }

/* ===================== Standard set, added after the audit ===================== */
.mm4 { max-width: 390px; margin: 0 auto; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); overflow: hidden; }
.mm4 .bar { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); } .mm4 .bar img { height: 22px; width: auto; } [data-theme="swap"] .mm4 .bar img { filter: brightness(0) invert(1); }
.mm4 .x { font-size: 28px; line-height: 1; color: var(--ink-2); }
.mm4 nav a { display: flex; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 18px; } .mm4 nav a span { color: var(--ink-3); }
.mm4 .foot { display: flex; flex-direction: column; gap: 12px; padding: 20px; } .mm4 .foot .qm-btn { justify-content: center; }
.ck5 { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); max-width: 720px; margin: 0 auto; }
.ck5 div { display: flex; gap: 8px; }
.vd4 { margin: 0 auto; max-width: 720px; } .vd4 .play { all: unset; cursor: pointer; position: relative; display: block; border-radius: 18px; overflow: hidden; }
.vd4 .play img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.vd4 .pb { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #3079AE, #7ABDED); transition: transform .2s; }
.vd4 .play:hover .pb { transform: scale(1.06); } .vd4 .play:focus-visible { outline: 2px solid var(--core); outline-offset: 4px; }
.vd4 figcaption { margin-top: 12px; color: var(--ink-2); }
.toc4 { display: flex; flex-direction: column; max-width: 280px; border-left: 1px solid var(--line); padding-left: 0; }
.toc4 .qm-small { padding: 0 0 10px 16px; } .toc4 a { padding: 7px 16px; color: var(--ink-2); font-size: 15px; margin-left: -1px; border-left: 2px solid transparent; }
.toc4 a.on { color: var(--head); border-left-color: #3079AE; }
.rs4 { max-width: 720px; border-top: 1px solid var(--line); }
.rs4 > div { display: grid; grid-template-columns: 48px 1fr auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.rs4 .ft { width: 44px; height: 52px; border-radius: 8px; border: 1px solid var(--line-2); display: grid; place-items: center; font-size: 11px; letter-spacing: .06em; color: var(--ink-3); }
.rs4 b { display: block; font-weight: 400; color: var(--ink); } .rs4 small { color: var(--ink-3); font-size: 14px; }
.ah4 { max-width: 760px; } .ah4 h1 { margin: 12px 0; } .ah4 .by { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.ah4 i, .ab4 i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 14px; color: #fff; background: linear-gradient(135deg, #3079AE, #7ABDED); flex: none; }
.ah4 .by span { color: var(--ink); } .ah4 .by small { display: block; color: var(--ink-3); font-size: 14px; }
.ab4 { display: flex; gap: 16px; align-items: center; max-width: 640px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .ab4 b { font-weight: 400; color: var(--ink); font-size: 18px; }
.pg4 { display: flex; justify-content: space-between; align-items: center; gap: 12px; max-width: 640px; font-size: 15px; }
.pg4 > a { color: var(--ink-2); } .pg4 span { display: flex; gap: 4px; align-items: center; }
.pg4 span a { min-width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; color: var(--ink-2); } .pg4 span a.on { color: #fff; background: linear-gradient(99deg, #3079AE, #7ABDED); } .pg4 em { font-style: normal; color: var(--ink-3); padding: 0 6px; }
.pg4 a:focus-visible { outline: 2px solid var(--core); outline-offset: 2px; }
.cl4 { list-style: none; margin: 0; padding: 0; max-width: 720px; border-top: 1px solid var(--line); }
.cl4 li { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.cl4 .d { color: var(--ink-3); font-size: 14px; padding-top: 2px; } .cl4 b { font-weight: 400; color: var(--ink); font-size: 18px; } .cl4 p { color: var(--ink-2); } .cl4 + .qm-small { margin-top: 12px; }
.fd4 { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.chip4 { font-size: 14px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); } .chip4.on { color: #fff; border-color: transparent; background: linear-gradient(99deg, #3079AE, #7ABDED); }
.ff4 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; max-width: 720px; }
.ff4 label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink-2); }
.ff4 input:not([type=checkbox]), .ff4 select { font: inherit; font-size: 16px; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); min-height: 44px; }
.ff4 input:focus-visible, .ff4 select:focus-visible { outline: 2px solid var(--core); outline-offset: 1px; }
.ff4 .err input { border-color: var(--strained); } .ff4 .err small { color: var(--strained); font-size: 13px; }
.ff4 .ch { flex-direction: row; align-items: center; gap: 10px; font-size: 15px; color: var(--ink); } .ff4 .ch input { width: 18px; height: 18px; accent-color: #3079AE; }
.dg4 { position: relative; display: grid; place-items: center; min-height: 280px; border-radius: 16px; background: rgba(13,27,42,.45); }
.dg4 .box { width: min(420px, 90%); background: var(--surface); border-radius: 16px; padding: 24px; border: 1px solid var(--line); }
.dg4 .acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
@media (max-width: 960px) { .ff4 { grid-template-columns: 1fr; } .cl4 li { grid-template-columns: 1fr; gap: 4px; } .rs4 > div { grid-template-columns: 44px 1fr; } .rs4 .qm-btn { grid-column: 2; justify-self: start; } .pg4 { font-size: 14px; } .pg4 span a { min-width: 34px; } }

/* Steps numerals at a supporting size (Asa: "way too big"). */
.sp4 .n { font-size: 56px; line-height: 1; letter-spacing: -0.04em; font-weight: 300; }
@media (max-width: 960px) { .sp4 .n { font-size: 48px; } }

/* Icon cards: one 48px line icon per card. */
.ht2 .g { width: 48px; height: 48px; }

/* Report findings: the target is the aspirational part, so it gets its own column and the gradient. */
.qm-report .f4 { display: grid; grid-template-columns: 32px minmax(0, 1fr) 220px; gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.qm-report .f4 i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 13px; color: var(--head); border: 1px solid var(--line-2); }
.qm-report .f4 p { color: var(--ink); font-size: 17px; }
.qm-report .f4 .tg { text-align: right; }
.qm-report .f4 .k { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.qm-report .f4 b { display: block; width: fit-content; margin-left: auto; font-size: 24px; font-weight: 300; line-height: 1.2; }
.qm-report .f4 small { display: block; font-size: 13px; color: var(--ink-2); }
@media (max-width: 960px) { .qm-report .f4 { grid-template-columns: 28px minmax(0, 1fr); } .qm-report .f4 .tg { grid-column: 2; text-align: left; } .qm-report .f4 b { margin-left: 0; } }

.qm-report .pl4 { padding: 16px 0 4px; border-top: 1px solid var(--line); } .qm-report .pl4 .k { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); } .qm-report .pl4 p { margin-top: 4px; color: var(--ink); font-size: 17px; }
.pill.Developing, .qm-score .num span.pill.Developing, .qm-report .pill.Developing { color: #5A4210; }

/* Band markers are colored text, not pills (Asa, 2026-10-23). Text uses a darker ink per band so it reads
   on white (all at least 4.5:1); bars keep the lighter band colors. */


.pill, .qm-score .num span.pill { background: none !important; padding: 0; border-radius: 0; font-size: 15px; letter-spacing: 0; }
.pill.Strained { color: var(--strained-ink) !important; } .pill.Forming { color: var(--forming-ink) !important; } .pill.Developing { color: var(--developing-ink) !important; }
.pill.Performing { color: var(--performing-ink) !important; } .pill.Thriving { color: var(--thriving-ink) !important; }

/* Card icons carry an echo: the same shape, half transparent, offset down and right (Asa, 2026-10-23). */


@media (max-width: 960px) { .stage .qm-btn { white-space: normal; text-align: center; } .qm-header .right { flex-wrap: wrap; justify-content: flex-end; } }

/* One color rule for scores (Asa: "these colors dont add up"). Band colors appear only where they mean a
   band: a score's own number and band word take the band ink, bars take the band color. Every other number
   is plain ink, and change is neutral with an arrow. The brand gradient stays on headings and buttons. */
.band-num { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; }
.band-num.strained { color: var(--strained-ink) !important; } .band-num.forming { color: var(--forming-ink) !important; } .band-num.developing { color: var(--developing-ink) !important; }
.band-num.performing { color: var(--performing-ink) !important; } .band-num.thriving { color: var(--thriving-ink) !important; }
.qm-score .q b, .bc4 b, .bn3 .cmp b, .bn3 .bm b, .tp .r b, .cs3 .r b, .qm-teams .t b, .bn3 .chip b { color: var(--ink) !important; background: none !important; }
.qm-score .delta { color: var(--ink-2); }
.bs4 .bw { color: var(--band-ink, var(--head)); }

/* Card icon echo: a large, faint copy of the icon in the card's upper-right corner, cut off by the edge
   (Asa, 2026-10-23). The small icon stays where it is. */
.hcard, .ht2 .c { position: relative; overflow: hidden; }
.echo { position: absolute; top: -64px; right: -72px; width: 230px; height: 230px; opacity: .06; pointer-events: none; }
.echo svg { width: 100%; height: 100%; stroke-width: .9; }
[data-theme="swap"] .echo { opacity: .1; }
.hcard > :not(.echo), .ht2 .c > :not(.echo) { position: relative; }

/* ===================== Game interface (from the game frontend and the site hero loop) ===================== */
.gi-narr { display: flex; gap: 18px; align-items: center; max-width: 760px; padding: 16px 20px; border: 2px solid #3079AE; border-radius: 12px; background: var(--surface); }
.gi-narr .av { position: relative; width: 64px; height: 64px; flex: none; }
.gi-narr .av > svg { width: 64px; height: 64px; } .gi-narr .av i { position: absolute; inset: 8px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #3079AE, #7ABDED); }
.gi-narr .ring { transition: stroke-dasharray .25s linear; }
.gi-narr .who, .gi-hint .k, .gi-prompt .k { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.gi-narr .line { font-size: 20px; line-height: 1.4; color: var(--ink); margin-top: 2px; min-height: 1.4em; }
.gi-narr .line .w { opacity: 0; transition: opacity .25s ease; } .gi-narr .line .w.on { opacity: 1; }
.gi-reply { display: flex; gap: 12px; align-items: flex-end; margin-top: 14px; }
.gi-reply .pa { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 13px; color: var(--head); background: var(--alice); border: 1px solid var(--line-2); }
.gi-reply .bub { background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px 14px 14px 4px; padding: 11px 16px; font-size: 18px; line-height: 1.3; color: var(--ink); min-height: 46px; display: flex; align-items: center; }
.gi-reply .dots { display: none; gap: 5px; } .gi-reply .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: gidot 1.1s infinite ease-in-out; } .gi-reply .dots i:nth-child(2) { animation-delay: .18s; } .gi-reply .dots i:nth-child(3) { animation-delay: .36s; }
.gi-reply.typing .dots { display: inline-flex; } .gi-reply.typing .txt { display: none; }
.gi-reply.enter { animation: gienter .3s ease-out; }
@keyframes gidot { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes gienter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.gi-prompt { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.gi-prompt .chip { display: inline-block; padding: 8px 16px; border-radius: 999px; border: 1.5px solid #3079AE; color: var(--head); font-size: 17px; background: var(--surface); }
.gi-hint { max-width: 400px; padding: 12px 16px; border-radius: 8px; border: 1px solid var(--line); border-left: 4px solid #3079AE; background: var(--surface); margin-top: 14px; }
.gi-hint p { color: var(--ink); margin-top: 2px; } .gi-hint.enter { animation: gienter .3s ease-out; }
.gi-convo .replies { min-height: 120px; }
@media (prefers-reduced-motion: reduce) { .gi-narr .line .w { opacity: 1; transition: none; } .gi-reply.enter, .gi-hint.enter { animation: none; } }
@media (max-width: 960px) { .gi-narr { align-items: flex-start; } .gi-narr .line { font-size: 17px; } .gi-reply .bub { font-size: 16px; } }

.gi-dice .row { display: flex; gap: 10px; }
.gi-dice .d { width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center; font-size: 24px; color: #fff; background: var(--surface-2); color: var(--ink-3); transition: background-color .2s, color .2s, transform .2s; font-variant-numeric: tabular-nums; }
.gi-dice .d.s6 { background: var(--thriving); color: #fff; } .gi-dice .d.s4, .gi-dice .d.s5 { background: var(--developing); color: #5A4210; }
.gi-dice .d.s2, .gi-dice .d.s3 { background: var(--forming); color: #fff; } .gi-dice .d.s1 { background: var(--strained); color: #fff; }
.gi-dice .d.roll { transform: rotate(-8deg) scale(.94); }
.gi-dice .res { margin-top: 14px; font-size: 18px; color: var(--ink); } .gi-dice .res .k, .gi-timer .k { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-right: 8px; }
.gi-dice .res b { font-weight: 400; color: var(--thriving-ink); }
.gi-timer { max-width: 360px; } .gi-timer .k { display: block; }
.gi-timer .t { display: block; font-size: 56px; font-weight: 200; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.gi-timer .line { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-top: 8px; } .gi-timer .line i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #3079AE, #7ABDED); transition: width 1s linear; }
.gi-timer.low .t { color: var(--strained-ink); animation: gipulse 1s infinite; } .gi-timer.low .line i { background: var(--strained); }
@keyframes gipulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .gi-timer.low .t { animation: none; } }



/* ===================== Imagery and patterns, Dashboard placement (Cowork, 2026-10-23) =====================
   Rule: game imagery appears only inside measurement. A quest picture always carries a score, a measured
   behavior or a timeline in the same frame. Patterns are drawn from team data, never decoration. Flat: no shadows. */
.qi-head { max-width: 640px; margin-bottom: 32px; } .qi-head .qm-h2 { margin-top: 10px; } .qi-head .qm-lead { margin-top: 14px; }
.qi-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; align-items: center; }
.qi-row-top { align-items: start; } .qi-row .qi-head { margin-bottom: 0; }
.qi-fig { margin: 0; position: relative; } .qi-fig svg { display: block; width: 100%; height: auto; }
.qi-fig figcaption { margin-top: 12px; font-size: 14px; color: var(--ink-3); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.qi-ticks { position: relative; height: 22px; margin-top: 8px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
.qi-ticks span { position: absolute; top: 6px; transform: translateX(-50%); white-space: nowrap; } .qi-ticks span:first-child { transform: none; } .qi-ticks span:last-child { transform: translateX(-100%); }
.qi-signal svg { height: 224px; }
.qi-inline-score { border: 0; padding: 0; margin-top: 18px; max-width: 560px; background: none; }
/* Turn-taking ribbon */
.qi-ribbon { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
.qi-ribbon { align-items: stretch; } .qi-lanes { display: flex; flex-direction: column; padding-bottom: 30px; } .qi-lanes div { display: flex; align-items: center; font-size: 13px; color: var(--ink-3); }
.qi-track svg { height: auto; } .qi-mark { stroke: var(--line-2); stroke-dasharray: 3 4; }
/* Network */
.qi-node { fill: var(--surface); stroke: #3079AE; stroke-width: 2; } .qi-node-quiet { stroke: var(--ink-3); stroke-dasharray: 3 3; }
/* Contours */
.qi-contour { position: relative; } .qi-contour svg { height: 300px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.qi-c { stroke-width: 1; } .qi-c-strong { stroke-width: 1.8; } .qi-peak { fill: var(--surface); stroke: #3079AE; stroke-width: 2; }
.qi-pin { position: absolute; transform: translate(12px, -50%); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; display: flex; gap: 8px; align-items: baseline; font-size: 13px; color: var(--ink-2); }
.qi-pin b { font-size: 22px; font-weight: 300; }
/* Strata */
.qi-stratum { opacity: .16; } .qi-stratum-label { font: 11px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; fill: var(--ink-3); }
.qi-sdot { stroke: var(--surface); stroke-width: 2; }
.qi-strata svg { height: 240px; border: 1px solid var(--line); border-radius: 12px; }
.qi-strata-top { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; } .qi-big { font-size: 48px; font-weight: 300; line-height: 1; letter-spacing: -0.03em; }
.qi-days { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); margin-top: 6px; }
/* Heatmap */
.qi-heat { display: flex; flex-direction: column; gap: 6px; }
.qi-hrow { display: grid; grid-template-columns: var(--bar-label) minmax(0, 1fr) var(--bar-val); gap: var(--bar-gap); align-items: center; font-size: 14px; }
.qi-hrow > span { color: var(--ink-2); } .qi-hrow b { font-weight: 400; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.qi-cells { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; } .qi-cells i { height: 26px; border-radius: 6px; }
.qi-hweeks .qi-cells span { font-size: 11px; color: var(--ink-3); text-align: center; }
.qi-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 16px; font-size: 13px; color: var(--ink-2); }
.qi-legend span { display: inline-flex; gap: 6px; align-items: center; } .qi-legend i { width: 12px; height: 12px; border-radius: 3px; }
/* Measured moment, evidence, method */
.qi-frame { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
.qi-frame img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.qi-frame-s img { aspect-ratio: 4 / 3; } .qi-frame-xs img { aspect-ratio: 1; }
.qi-mpin { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; color: #fff; background: linear-gradient(135deg, #3079AE, #7ABDED); outline: 3px solid rgba(255,255,255,.9); }
.qi-rec { position: absolute; left: 12px; top: 12px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--head); background: var(--surface); border-radius: 999px; padding: 4px 10px; border: 1px solid var(--line); }
.qi-scrub { position: relative; height: 6px; margin-top: 18px; background: var(--surface-2); border-radius: 999px; }
.qi-scrub-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #3079AE, #7ABDED); }
.qi-ev { position: absolute; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: var(--head); background: var(--surface); border: 1px solid #3079AE; }
.qi-moments { list-style: none; margin: 20px 0 12px; padding: 0; border-top: 1px solid var(--line); }
.qi-moments li { display: grid; grid-template-columns: 28px minmax(0, 1fr) 40px; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: start; }
.qi-moments i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 13px; color: var(--head); border: 1px solid var(--line-2); margin-top: calc(0.5lh - 13px); }
.qi-moments b { display: block; font-weight: 400; color: var(--head); } .qi-moments p { color: var(--ink-2); font-size: 15px; }
.qi-moments .qi-val { color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 300; }
.qi-method { display: grid; grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr); gap: 16px; align-items: start; }
.qi-method figcaption { display: block; } .qi-method figcaption b { display: block; font-weight: 400; color: var(--head); font-size: 20px; margin: 8px 0 4px; }
.qi-method figcaption .qm-eyebrow { display: block; } .qi-method figcaption { color: var(--ink-2); font-size: 15px; }
.qi-arrow { align-self: center; margin-top: -60px; text-align: center; font-size: 24px; color: var(--core); }
.qi-signals { border: 1px solid var(--line); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 14px; aspect-ratio: 4 / 3; justify-content: center; }
.qi-signals div { font-size: 13px; color: var(--ink-2); } .qi-signals .bar { margin-top: 6px; }
.qi-method .qm-score { aspect-ratio: 4 / 3; display: flex; flex-direction: column; justify-content: center; }
.qi-evidence { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.qi-ev-cell figcaption { display: block; } .qi-ev-cell figcaption b { display: block; font-weight: 400; color: var(--head); }
.qi-ev-cell figcaption span { color: var(--ink-2); font-size: 14px; }
/* Dashboard */
.qi-dash { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; font-size: 14px; min-width: 640px; }
.qi-dash-bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--head); }
.qi-dash-body { display: grid; grid-template-columns: 56px minmax(0, 1fr); }
.qi-dash nav { border-right: 1px solid var(--line); padding: 16px 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.qi-dash nav i { width: 22px; height: 6px; border-radius: 3px; background: var(--surface-2); } .qi-dash nav i:first-child { background: linear-gradient(90deg, #3079AE, #7ABDED); }
.qi-dash main { padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--bg-alt); }
.qi-dash-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; }
.qi-tile { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.qi-tile .num { display: flex; align-items: baseline; gap: 4px; } .qi-tile .num b { font-size: 48px; font-weight: 300; line-height: 1; letter-spacing: -0.03em; } .qi-tile .num span { color: var(--ink-3); }
.qi-tile .qm-teams .t { padding: 7px 0; font-size: 14px; }
.qi-spark { width: 100%; height: 64px; } .qi-spark polyline { fill: none; stroke: #3079AE; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.qi-edge { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; margin-right: -56px; }
.qi-edge-media { overflow: hidden; padding: 4px 0; } .qi-edge-media .qi-dash { width: 760px; border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.qi-rise { position: relative; margin: 40px 0 -56px; height: 380px; }
.qi-rise .qi-dash { min-width: 0; width: min(780px, 100%); margin: 0 auto; height: 420px; border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.qi-callout { position: absolute; display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; font-size: 15px; color: var(--head); }
.qi-callout i { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, #3079AE, #7ABDED); }
.qi-ptiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.qi-ptile-art { aspect-ratio: 4 / 3; border-radius: 22px; display: grid; place-items: center; padding: 24px; background: linear-gradient(160deg, var(--alice) 0%, var(--wash) 55%, var(--bg-alt) 100%); border: 1px solid var(--line); }
.qi-ptile figcaption { display: block; } .qi-ptile figcaption b { display: block; font-weight: 400; font-size: 20px; color: var(--head); margin-bottom: 4px; }
.qi-ptile figcaption { color: var(--ink-2); font-size: 15px; }
.qi-mini { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; width: 100%; max-width: 260px; display: flex; flex-direction: column; gap: 6px; }
.qi-mini b { font-weight: 400; color: var(--ink); } .qi-mini .num b { font-size: 44px; font-weight: 300; }
.qi-target { width: fit-content; font-size: 20px; font-weight: 300; background: linear-gradient(97deg, #3079AE, #7ABDED); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qi-mini-msg .qm-btn { align-self: flex-start; }
.qi-fan { height: 360px; overflow: hidden; margin: 8px -56px -56px; position: relative; }
.qi-fan-grid { position: absolute; left: 50%; top: 30px; width: 1100px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; transform: translateX(-50%) rotate(-8deg) skewX(8deg); }
.qi-fan-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; min-height: 160px; display: flex; flex-direction: column; gap: 8px; }
.qi-fan-card b { font-weight: 400; color: var(--ink); } .qi-fan-card .num { display: flex; align-items: baseline; gap: 4px; } .qi-fan-card .num b { font-size: 40px; font-weight: 300; }
.qi-fbar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .qi-fbar i { display: block; height: 100%; background: var(--bandc); }
.qi-pindex { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.qi-pi { display: grid; grid-template-columns: 44px minmax(0, 1fr) 16px; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); transition: border-color .2s; }
.qi-pi:hover { border-color: #3079AE; } .qi-pi:focus-visible { outline: 2px solid var(--core); outline-offset: 2px; }
.qi-pi-ic { width: 44px; height: 44px; border-radius: 10px; background: var(--bg-alt); display: grid; place-items: center; }
.qi-pi-ic svg { width: 22px; height: 22px; fill: none; stroke: #3079AE; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qi-pi small { display: block; font-size: 12px; color: var(--ink-3); } .qi-pi b { font-weight: 400; color: var(--head); font-size: 15px; } .qi-pi-go { color: var(--core); }
.qi-replace { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 760px; margin: 0 auto; padding: 24px; border: 1.5px dashed var(--line-2); border-radius: 22px; }
.qi-rtile { position: relative; aspect-ratio: 1.4; border: 1px solid var(--line); border-radius: 14px; display: grid; place-items: center; color: var(--ink-3); background: var(--surface); }
.qi-rself { border-color: #3079AE; display: flex; flex-direction: column; justify-content: center; gap: 2px; } .qi-rself b { font-size: 40px; font-weight: 300; line-height: 1; }
.qi-minus { position: absolute; top: -9px; left: -9px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; line-height: 1; color: #fff; background: var(--ink-2); }
.qi-checks { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 24px; font-size: 15px; color: var(--ink); }
.qi-checks span { display: inline-flex; gap: 8px; align-items: center; } .qi-checks i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; color: #fff; background: linear-gradient(135deg, #3079AE, #7ABDED); }
@media (max-width: 960px) {
  .qi-row, .qi-edge, .qi-method, .qi-ptiles { grid-template-columns: 1fr; gap: 28px; } .qi-edge { margin-right: -20px; }
  .qi-arrow { margin: 0; transform: rotate(90deg); } .qi-evidence, .qi-pindex, .qi-replace { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qi-ribbon { grid-template-columns: 48px minmax(0, 1fr); } .qi-signal svg { height: 160px; }
  .qi-fan { margin: 8px -20px -32px; } .qi-rise { margin-bottom: -32px; height: 320px; } .qi-callout { display: none; }
  .qi-cells i { height: 18px; } .qi-cells { gap: 2px; }
}

/* second set: modules adapted from Perplexity, Origin, Ramp and Calendly references */
.qi-frame-wide img { aspect-ratio: 21 / 9; filter: saturate(.55) contrast(.85) brightness(1.08); }
.qi-scene { margin-bottom: 32px; }
.qi-live { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 12px 20px 12px 16px; white-space: nowrap; }
.qi-live b { display: block; font-weight: 400; color: var(--head); } .qi-live small { display: block; font-size: 12px; color: var(--ink-3); }
.qi-live-dot { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, #3079AE, #7ABDED); box-shadow: 0 0 0 4px var(--alice); }
.qi-live-v { font-size: 22px; font-weight: 300; padding-left: 14px; border-left: 1px solid var(--line); color: var(--ink); }
.qi-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.qi-setup { background: var(--bg-alt); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; }
.qi-setup ol { list-style: none; margin: 12px 0 0; padding: 0; }
.qi-setup li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.qi-setup li i { font-style: normal; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.qi-setup li small { font-size: 13px; color: var(--ink-3); }
.qi-setup li.done span { color: var(--ink); } .qi-setup li.done i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 0; background: linear-gradient(135deg, #3079AE, #7ABDED); }
.qi-setup li.done i::after { content: "\2713"; font-size: 12px; color: #fff; }
.qi-setup li.now { color: var(--head); box-shadow: inset 2px 0 0 #3079AE; padding-left: 10px; margin-left: -10px; }
.qi-worlds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.qi-world { border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: var(--surface); }
.qi-world-top { display: flex; gap: 12px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.qi-world-art { margin: -6px -6px 14px; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 10; }
.qi-world-art img, .qi-wm-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qi-world-top { justify-content: space-between; }
.qi-wm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.qi-wm { border: 1px solid var(--line); border-radius: 16px; padding: 10px 10px 14px; background: var(--surface); }
.qi-wm-art { border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; }
.qi-wm figcaption { display: block; margin-top: 0; padding: 12px 6px 0; } .qi-wm figcaption small { font-size: 12px; color: var(--ink-3); }
.qi-wm .qi-inline-score { margin-top: 6px; --bar-label: 132px; }
.qi-world-top small { display: block; font-size: 12px; color: var(--ink-3); } .qi-world-top b { font-weight: 400; color: var(--head); }
.qi-world .qi-inline-score { margin-top: 6px; --bar-label: 112px; }
.qi-people { position: relative; padding-bottom: 48px; }
.qi-people-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qi-people-grid img { aspect-ratio: 3 / 4; }
.qi-readout { position: absolute; left: 8%; right: 8%; bottom: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.qi-readout small { display: block; font-size: 12px; color: var(--ink-3); } .qi-readout b { font-size: 34px; font-weight: 300; line-height: 1.1; }
.qi-readout > div:nth-child(2) b { color: var(--ink); font-size: 24px; }
.qi-readout-bar { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .qi-readout-bar i { display: block; height: 100%; background: linear-gradient(90deg, #3079AE, #7ABDED); }
.qi-reasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.qi-reason { background: var(--bg-alt); border: 1px solid var(--line); border-radius: 16px; padding: 24px 24px 0; overflow: hidden; display: flex; flex-direction: column; min-height: 320px; }
.qi-reason > b { font-weight: 400; font-size: 20px; color: var(--head); } .qi-reason p { color: var(--ink-2); font-size: 15px; margin-top: 6px; }
.qi-reason-ui { --bar-label: 92px; --bar-val: 32px; --bar-gap: 10px; margin-top: auto; padding-top: 24px; transform: translateY(14px); }
.qi-reason-ui .qi-mini, .qi-reason-ui .qi-inline-score { max-width: none; background: var(--surface); border: 1px solid var(--line); border-radius: 14px 14px 0 0; padding: 14px 16px 26px; }
.qi-acc details { border-top: 1px solid var(--line); padding: 16px 0 16px 16px; } .qi-acc details:last-child { border-bottom: 1px solid var(--line); }
.qi-acc details[open] { box-shadow: inset 2px 0 0 #3079AE; }
.qi-acc summary { list-style: none; cursor: pointer; } .qi-acc summary::-webkit-details-marker { display: none; }
.qi-acc summary b { font-weight: 400; font-size: 20px; color: var(--head); } .qi-acc details:not([open]) summary b { color: var(--ink-3); }
.qi-acc p { color: var(--ink-2); margin-top: 6px; }
.qi-acc-art { aspect-ratio: 1; } .qi-acc-art .qm-score { width: 100%; max-width: 360px; }
.qi-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: 300px; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: -56px; padding-right: 56px; scrollbar-width: none; }
.qi-car { scroll-snap-align: start; } .qi-car figcaption { display: block; color: var(--ink-2); font-size: 15px; } .qi-car figcaption b { display: block; font-weight: 400; font-size: 20px; color: var(--head); margin-bottom: 4px; }
.qi-demo { display: grid; grid-template-columns: 1fr 1.2fr; grid-template-rows: auto auto; gap: 16px; }
.qi-demo > div { background: var(--bg-alt); border: 1px solid var(--line); border-radius: 16px; padding: 22px; overflow: hidden; display: flex; flex-direction: column; gap: 6px; }
.qi-demo-t { font-weight: 400; font-size: 20px; color: var(--head); }
.qi-email { display: flex; gap: 8px; align-items: center; margin-top: 14px; padding: 6px 6px 6px 14px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); color: var(--ink-3); justify-content: space-between; }
.qi-demo-crop { margin: 10px -22px -22px 0; height: 210px; overflow: hidden; } .qi-demo-crop .qi-dash { min-width: 560px; border-right: 0; border-bottom: 0; }
.qi-demo-c .qi-frame { margin-top: 10px; } .qi-demo-c img { aspect-ratio: 16 / 7; } .qi-demo-c .qi-inline-score { margin-top: 12px; }
.qi-demo-d .qi-mini { margin-top: 10px; max-width: none; }
@media (max-width: 960px) {
  .qi-worlds, .qi-reasons, .qi-demo, .qi-wm-grid { grid-template-columns: 1fr; }
  .qi-live { position: static; transform: none; margin: 12px auto 0; width: fit-content; white-space: normal; } .qi-frame-wide { overflow: visible; border: 0; } .qi-frame-wide img { border-radius: 16px; }
  .qi-carousel { margin-right: -20px; padding-right: 20px; grid-auto-columns: 260px; }
}

/* ===================== Product pieces at full size, more brand (Cowork, 2026-10-23) =====================
   Product UI is shown at the size of its column, never shrunk into a tinted well.
   Brand cues: a 2px gradient line on top of product cards, gradient eyebrows, gradient icon strokes, the hybrid dial. */
.qp-ey { display: block; width: fit-content; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; background: linear-gradient(97deg, #3079AE, #7ABDED); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qp-card { position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 230px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.qp-card::before, .qi-reason::before, .qi-demo > div::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, #3079AE, #7ABDED); }
.qp-line { font-weight: 400; font-size: 20px; line-height: 1.3; color: var(--ink); }
.qp-target-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.qp-target-row .qi-target { font-size: 28px; white-space: nowrap; }
.qp-dial { display: flex; align-items: center; gap: 16px; }
.qp-dial .qd-word { display: block; margin: 0 0 2px; font-size: 15px; } .qp-dial .qm-small { display: block; font-size: 13px; }
.qp-dial.lg .qd-s { width: 168px; } .qp-dial.lg .qd-s .v b { font-size: 44px; }
.qp-card .qm-teams .t { padding: 8px 0; }
.qi-ptile .qp-card { aspect-ratio: 4 / 3; min-height: 0; }
.qi-ptile figcaption, .qi-car figcaption { margin-top: 14px; }
.qi-car .qp-card { aspect-ratio: 1; min-height: 0; }
.qp-acc { min-height: 0; gap: 16px; } .qp-acc .qi-inline-score { margin-top: 4px; padding: 16px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; max-width: none; }
/* Reason tiles: white card, slice under a line */
.qi-reason { position: relative; background: var(--surface); padding: 24px; min-height: 0; }
.qi-reason-ui { transform: none; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.qi-reason-ui .qi-inline-score { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.qi-reason p { margin-bottom: 24px; }
/* Demo bento */
.qi-demo > div { position: relative; background: var(--surface); }
.qp-slice { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line); flex: 1; }
.qi-demo-crop .qi-dash { border-color: var(--line-2); }
/* Product index */
.qi-pi { position: relative; overflow: hidden; grid-template-columns: 32px minmax(0, 1fr) 34px; padding: 16px; }
.qi-pi-ic { width: 32px; height: 32px; background: none; border-radius: 0; }
.qi-pi-ic svg, .qi-pi-echo svg { width: 28px; height: 28px; fill: none; stroke: url(#qig); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.qi-pi-echo { position: absolute; right: -14px; top: 50%; transform: translateY(-50%); opacity: .07; pointer-events: none; }
.qi-pi-echo svg { width: 84px; height: 84px; stroke-width: 1.5; }
.qi-pi > :not(.qi-pi-echo) { position: relative; }
.qi-pi .qp-ey { font-size: 11px; margin-bottom: 2px; }
.qi-pi:hover .qm-arrow { background: linear-gradient(99deg, #3079AE, #7ABDED); color: #fff; border-color: transparent; }

@media (max-width: 960px) { .qi-ptile .qp-card, .qi-car .qp-card { aspect-ratio: auto; min-height: 200px; } }

/* ===================== Score dial, hybrid (Cowork, 2026-10-23) =====================
   Familiar: one semicircle, one number, one band word, arc in the band color.
   Distinctive: notches at the band thresholds (60, 75, 85, 95) and rings for earlier game days. */
.sd4.qd { grid-template-columns: 360px 1fr; }
.qd-dial { position: relative; }
.qd-dial svg { width: 100%; height: auto; display: block; overflow: visible; }
.qd-scale { font: 11px var(--font-sans, inherit); fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.qd-trail { fill: var(--surface); stroke: none; opacity: .75; } .qd-trail.last { opacity: 1; }
.sd4.qd .v { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; }
.sd4.qd .v b { display: block; width: auto; margin: 0; font-size: 64px; line-height: 1; font-weight: 300; letter-spacing: -0.03em; }
.qd-word { display: inline-block; margin-top: 10px; font-size: 15px; letter-spacing: .02em; }
.qd-word.strained { color: #C93D37; } .qd-word.forming { color: #B85F17; } .qd-word.developing { color: #94690C; } .qd-word.performing { color: #1F74B8; } .qd-word.thriving { color: #176BBA; }
.qd-change { margin-top: 16px; text-align: center; font-size: 13px; color: var(--ink-2); }
.qd-sizes { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.qd-row { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.qd-row .qd-word { margin-top: 2px; font-size: 14px; } .qd-s-t { display: block; font-weight: 400; color: var(--head); font-size: 15px; }
.qd-s { width: 112px; flex: none; }
.qd-s .v { position: absolute; left: 0; right: 0; bottom: -2px; text-align: center; }
.sd4.qd .qd-s .v b, .qd-s .v b { font-size: 28px; font-weight: 300; line-height: 1; letter-spacing: -0.02em; }
.qd-s .v b.performing { color: #1F74B8; } .qd-s .v b.thriving { color: #176BBA; } .qd-s .v b.developing { color: #94690C; } .qd-s .v b.forming { color: #B85F17; } .qd-s .v b.strained { color: #C93D37; }
.qd-s .qd-trail { display: none; }
@media (max-width: 960px) { .sd4.qd { grid-template-columns: 1fr; } .sd4.qd .g { max-width: 320px; } .sd4.qd .v b { font-size: 56px; } }

/* ===================== Signature: standard line, trail, measured window, and the subtle details (Cowork, 2026-10-23) ===================== */
.qs-std { position: relative; }
.qs-track { position: relative; height: 6px; border-radius: 999px; background: linear-gradient(90deg, #7ABDED, #3079AE); }
.qs-track::after { content: ""; position: absolute; inset: -1px 0; pointer-events: none;
  background: linear-gradient(90deg, transparent calc(60% - 1.5px), var(--surface) calc(60% - 1.5px), var(--surface) calc(60% + 1.5px), transparent calc(60% + 1.5px),
    transparent calc(75% - 1.5px), var(--surface) calc(75% - 1.5px), var(--surface) calc(75% + 1.5px), transparent calc(75% + 1.5px),
    transparent calc(85% - 1.5px), var(--surface) calc(85% - 1.5px), var(--surface) calc(85% + 1.5px), transparent calc(85% + 1.5px),
    transparent calc(95% - 1.5px), var(--surface) calc(95% - 1.5px), var(--surface) calc(95% + 1.5px), transparent calc(95% + 1.5px)); }
.qs-lg .qs-track { height: 8px; margin-top: 52px; } .qs-xs .qs-track { height: 2px; } .qs-sm .qs-track { height: 4px; } .qs-sm .qs-track::after, .qs-xs .qs-track::after { inset: -1px 0; background: linear-gradient(90deg, transparent calc(60% - 1px), var(--surface) calc(60% - 1px), var(--surface) calc(60% + 1px), transparent calc(60% + 1px), transparent calc(75% - 1px), var(--surface) calc(75% - 1px), var(--surface) calc(75% + 1px), transparent calc(75% + 1px), transparent calc(85% - 1px), var(--surface) calc(85% - 1px), var(--surface) calc(85% + 1px), transparent calc(85% + 1px), transparent calc(95% - 1px), var(--surface) calc(95% - 1px), var(--surface) calc(95% + 1px), transparent calc(95% + 1px)); }
.qs-mk { position: absolute; top: 50%; z-index: 1; }
.qs-mk i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 3px solid var(--bandc); box-sizing: border-box; }
.qs-sm .qs-mk i { left: -6px; top: -6px; width: 12px; height: 12px; border-width: 2.5px; }
.qs-mk em { position: absolute; bottom: 14px; left: 0; transform: translateX(-50%); font-style: normal; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.qs-mk em b { font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }
.qs-mk:nth-child(even) em { bottom: 32px; }
.qs-scale { position: relative; height: 18px; margin-top: 10px; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.qs-scale span { position: absolute; transform: translateX(-50%); } .qs-scale span:first-child { transform: none; } .qs-scale span:last-child { transform: translateX(-100%); }
.qs-words { position: relative; height: 18px; margin-top: 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.qs-words span { position: absolute; text-align: center; white-space: nowrap; } .qs-words span:last-child { width: auto !important; left: auto !important; right: 0; text-align: right; }
.qs-demo { padding: 8px 0 4px; }
.qs-uses { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.qs-divider-demo { margin-top: 14px; } .qs-h { display: block; font-weight: 400; font-size: 22px; color: var(--head); margin-bottom: 10px; }
.qs-inline { display: flex; align-items: center; gap: 14px; margin-top: 14px; } .qs-inline > b { font-size: 40px; font-weight: 300; line-height: 1; } .qs-inline .qs-std { width: 140px; } .qs-inline .qd-word { margin: 0; }
/* Trail */
.qs-trail-demo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.qs-trail-svg { display: block; width: 100%; height: auto; margin-top: 12px; overflow: visible; }
.qs-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.qs-step b { display: block; font-size: 48px; font-weight: 300; line-height: 1; letter-spacing: -0.04em; width: fit-content; background: linear-gradient(97deg, #3079AE, #7ABDED); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: calc(.3 + var(--k) * .233); }
.qs-step span { display: block; margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.qs-delta { margin-top: 10px; font-size: 13px; color: var(--ink-2); }
/* Subtle 3: the trail mark before every change line */
.qs-trailmark { display: inline-block; width: 20px; height: 6px; margin-right: 7px; vertical-align: middle; position: relative; top: -1px;
  background: radial-gradient(circle, rgba(48, 121, 174,.25) 2px, transparent 2.6px) 0 50% / 6px 6px no-repeat,
              radial-gradient(circle, rgba(48, 121, 174,.55) 2px, transparent 2.6px) 7px 50% / 6px 6px no-repeat,
              radial-gradient(circle, #3079AE 2.4px, transparent 3px) 14px 50% / 6px 6px no-repeat; }
/* Measured window */
.qs-wins { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; align-items: stretch; }
.qs-win { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); display: flex; flex-direction: column; }
.qs-win-art, .qi-world-art, .qi-wm-art { position: relative; }
.qs-win-art img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.qs-win-wide .qs-win-art img { aspect-ratio: 16 / 9; }
.qs-win-art::after, .qi-world-art::after, .qi-wm-art::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0) 50%, rgba(122,189,237,.28) 74%, rgba(236,246,255,.86) 90%, var(--surface) 100%); }
.qs-win-body { position: relative; margin-top: -36px; padding: 0 22px 22px; display: flex; flex-direction: column; gap: 10px; }
.qs-win-body .qi-inline-score { margin-top: 0; }
.qs-win-score { display: flex; align-items: center; gap: 16px; } .qs-win-score > b { font-size: 64px; font-weight: 300; line-height: 1; letter-spacing: -0.03em; }
.qs-win-score .qd-word { margin: 0; font-size: 15px; } .qs-win-score .qs-delta { margin-top: 4px; }
.qi-world-art, .qi-wm-art { border-radius: 12px 12px 0 0; } .qi-world-top { border-bottom: 0; padding-bottom: 6px; }
/* Subtle 1: graduation ticks at the band thresholds on every score bar's empty track (hidden under the fill) */
.qm-score .q .bar, .qm-teams .t .bar { position: relative; }
.qm-score .q .bar > i, .qm-teams .t .bar > i { position: relative; z-index: 1; }
.qm-score .q .bar::after, .qm-teams .t .bar::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(90deg, transparent calc(60% - .5px), var(--line-2) calc(60% - .5px), var(--line-2) calc(60% + .5px), transparent calc(60% + .5px),
    transparent calc(75% - .5px), var(--line-2) calc(75% - .5px), var(--line-2) calc(75% + .5px), transparent calc(75% + .5px),
    transparent calc(85% - .5px), var(--line-2) calc(85% - .5px), var(--line-2) calc(85% + .5px), transparent calc(85% + .5px),
    transparent calc(95% - .5px), var(--line-2) calc(95% - .5px), var(--line-2) calc(95% + .5px), transparent calc(95% + .5px)); }
/* Subtle 2: the eyebrow lead-in, a miniature standard line */
.qm-eyebrow::before, .qp-ey::before { content: ""; display: inline-block; width: 18px; height: 2px; margin-right: 8px; vertical-align: middle; position: relative; top: -2px; border-radius: 1px; background: linear-gradient(90deg, #7ABDED, #3079AE); }
/* Trail applied: sparklines and setup numerals */
.qi-spark polyline { stroke: url(#qstr-spark); }
.qi-setup li:not(.done) i { color: #3079AE; } .qi-setup li:nth-child(3) i { opacity: .9; } .qi-setup li:nth-child(4) i { opacity: .6; } .qi-setup li:nth-child(5) i { opacity: .4; }
@media (max-width: 960px) { .qs-uses, .qs-trail-demo, .qs-wins { grid-template-columns: 1fr; } .qs-words { display: none; } .qs-lg .qs-mk em { display: none; } .qs-lg .qs-track { margin-top: 16px; } .qs-scale span:first-child, .qs-scale span:last-child { display: none; } }
.qi-rself .qs-std { width: 72%; margin-top: 10px; }
.qs-words span:last-child { display: none; }

/* ===================== Background signatures: threads, measurement grid, echo rings (Cowork, 2026-10-23) ===================== */
.qs-threads { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.qs-th { fill: none; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.qs-th-pulse { fill: none; stroke: #3079AE; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 18 982; stroke-dashoffset: 1000; opacity: .8; animation: qs-pulse 4.2s cubic-bezier(.25,.46,.45,.94) infinite; }
@keyframes qs-pulse { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .qs-th-pulse { animation: none; opacity: 0; } }
.qh-thread-wrap { position: absolute; z-index: 0; pointer-events: none; }
/* Measurement grid */
.qs-grid { position: relative; isolation: isolate; }
.qs-grid::before { content: ""; position: absolute; inset: -64px; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(48, 121, 174,.22) 1px, transparent 1.4px); background-size: 20px 20px;
  -webkit-mask: radial-gradient(closest-side, #000 40%, transparent); mask: radial-gradient(closest-side, #000 55%, transparent); }
/* Echo rings */
.qs-rings { position: relative; isolation: isolate; }

/* Hero */
.qh-copy { max-width: 860px; } .qh-h1 { margin-top: 12px; font-size: 64px; line-height: 1.02; font-weight: 400; letter-spacing: -0.025em; color: var(--head); }
.qh-copy .qm-lead { margin-top: 18px; max-width: 620px; }
.qh-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 72px; align-items: end; margin-top: 40px; }
.qh-stage > .qh-card-wrap, .qh-stage > .qh-game { position: relative; z-index: 1; } .qh-card { position: relative; }
.qh-stage > .qh-thread-wrap { left: calc((100% - 72px) / 2.05 - 60px); width: 192px; top: 0; bottom: 0; }
.qh-card { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px 28px; align-items: center; padding: 26px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.qh-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 18px 18px 0 0; background: linear-gradient(90deg, #3079AE, #7ABDED); }
.qh-dial { text-align: center; } .qh-dial .qd-dial { width: 170px; margin: 0 auto 10px; }
.qh-dial .v { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; } .qh-dial .v b { font-size: 48px; font-weight: 300; line-height: 1; letter-spacing: -0.03em; }
.qh-dial .v b.performing { color: #1F74B8; } .qh-dial .v b.developing { color: #94690C; } .qh-dial .v b.forming { color: #B85F17; } .qh-dial .v b.thriving { color: #176BBA; } .qh-dial .v b.strained { color: #C93D37; }
.qh-dial .qp-ey { margin: 0 auto; font-size: 11px; } .qh-dial .qd-word { margin-top: 4px; font-size: 14px; }
.qh-rows { border: 0; padding: 0 0 0 28px; border-left: 1px solid var(--line); border-radius: 0; background: none; display: flex; flex-direction: column; gap: 16px; }
.qh-q-top { display: flex; justify-content: space-between; font-size: 15px; color: var(--ink); } .qh-q-top b { font-weight: 400; font-variant-numeric: tabular-nums; }
.qh-q .bar { margin-top: 6px; } .qh-q .bar i { background: var(--bandc); } .qh-q small { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-2); }
.qm-score .qh-q .bar { position: relative; } .qm-score .qh-q .bar > i { position: relative; z-index: 1; }
/* Background demo */
.qs-bg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.qs-bg-cell .qm-small { margin-top: 12px; }
.qs-bg-th { position: relative; height: 180px; margin-top: 12px; display: flex; justify-content: space-between; align-items: center; }
.qs-bg-th > .qh-thread-wrap { left: 60px; right: 60px; top: 0; bottom: 0; }
.qs-bg-a, .qs-bg-b { position: relative; z-index: 1; width: 96px; height: 120px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; font-size: 13px; color: var(--ink-3); }
.qs-bg-a { background: linear-gradient(160deg, #3a4a5e, #1d2839); color: rgba(255,255,255,.7); border: 0; }
.qs-bg-grid { height: 180px; margin-top: 12px; display: grid; place-items: center; }
.qs-bg-obj { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 22px; } .qs-bg-obj b { display: block; font-size: 40px; font-weight: 300; line-height: 1.1; }
.qs-bg-rings { height: 180px; margin-top: 12px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.qs-bg-rings .qd-dial { width: 150px; } .qs-bg-rings .v { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; } .qs-bg-rings .v b { font-size: 40px; font-weight: 300; line-height: 1; color: #1F74B8; }
/* Threads mixed into existing modules */
.qi-row.qs-th-row { position: relative; } .qi-row.qs-th-row > :not(.qh-thread-wrap) { position: relative; z-index: 1; }
.qi-row.qs-th-row > .qh-thread-wrap { left: calc((100% - 48px) / 2.15 - 64px); width: 176px; top: 8%; bottom: 30%; }
.qi-method { position: relative; } .qi-method > figure { position: relative; z-index: 1; }
.qi-method .qi-arrow { position: relative; align-self: stretch; margin: 0; font-size: 0; }
.qi-method .qi-arrow .qh-thread-wrap { left: -48px; right: -48px; top: 18%; height: 40%; }
.qi-moment .qi-frame { background: var(--surface); }
@media (max-width: 960px) {
  .qh-h1 { font-size: 40px; } .qh-stage { grid-template-columns: 1fr; gap: 20px; } .qh-stage > .qh-game { order: -1; }
  .qh-card { grid-template-columns: 1fr; } .qh-rows { padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .qh-stage > .qh-thread-wrap { display: none; } .qs-bg { grid-template-columns: 1fr; }
  .qi-method .qi-arrow { display: none; }
}

.qh-card-ey { grid-column: 1 / -1; }
.qi-method .qi-signals, .qi-method .qm-score { background: var(--surface); }
.qs-rings svg { overflow: visible; }

/* ===================== Spoken transcript, crosstalk to clarity (Cowork, 2026-10-23) ===================== */
.qt { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.qt-line { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; }
.qt-av { position: relative; width: 14px; height: 14px; margin-top: 7px; border-radius: 50%; } .qt-v1 { background: #3079AE; } .qt-v2 { background: linear-gradient(135deg, #3079AE, #7ABDED); } .qt-v3 { background: #1E4E70; } .qt-v4 { background: #B9DDF6; }
.qt-wave { position: absolute; right: -9px; bottom: -9px; width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, #3079AE, #7ABDED); display: flex; align-items: center; justify-content: center; gap: 1.5px; opacity: 0; animation: qt-speak var(--cycle, 9s) linear infinite; }
.qt-wave b { width: 2px; height: 6px; border-radius: 1px; background: #fff; animation: qt-bar .6s ease-in-out infinite alternate; } .qt-wave b:nth-child(2) { height: 9px; animation-delay: .2s; } .qt-wave b:nth-child(3) { animation-delay: .4s; }
.qt-who { display: flex; gap: 8px; align-items: baseline; font-size: 13px; color: var(--head); } .qt-who time { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.qt-text { margin-top: 2px; font-size: 17px; line-height: 1.45; color: var(--ink); }
.qt-w { animation: qt-word var(--cycle, 9s) linear infinite; animation-delay: var(--d); }
.qt-fill { color: var(--ink-3); }
.qt-ov { position: relative; display: flex; flex-direction: column; gap: 10px; padding-left: 18px; }
.qt-ov::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 8px; border: 1.5px solid var(--line-2); border-right: 0; border-radius: 6px 0 0 6px; }
.qt-ov-k { position: absolute; left: -2px; top: -18px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.qt-ov .qt-line:first-of-type .qt-wave, .qt-ov .qt-line:nth-of-type(2) .qt-wave { opacity: 1; animation: none; }
@keyframes qt-word { 0% { opacity: .15; color: var(--ink-3); } 3% { opacity: 1; color: var(--ink-3); } 7%, 92% { opacity: 1; color: inherit; } 100% { opacity: .15; } }
@keyframes qt-bar { to { transform: scaleY(.45); } }
@keyframes qt-speak { 0%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .qt-w, .qt-wave b { animation: none; } }
.qt-narr { margin-bottom: 26px; } .qt + .gi-hint { margin: 22px 0 6px; }
.qt-ov + .qt-line, .qt-line + .qt-ov { margin-top: 10px; } .qt > .qt-ov:first-child { margin-top: 18px; }
/* Crosstalk to clarity */
.qx { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.qx-panel { border: 1px solid var(--line); border-radius: 16px; padding: 22px; background: var(--surface); display: flex; flex-direction: column; }
.qx-cap { margin: 0 0 14px; }
.qx-lanes { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: stretch; }
.qx-names { display: flex; flex-direction: column; justify-content: space-around; font-size: 12px; color: var(--ink-3); }
.ql { display: block; width: 100%; height: 120px; }
.ql-guide { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ql-zone { fill: rgba(138,148,163,.12); }
.ql-seg { fill: #8A94A3; fill-opacity: .55; } .ql-seg.ql-clear { fill-opacity: 1; }
.qx-panel .qt { margin-top: 20px; flex: 1; }
.qx-panel .qt-text { font-size: 15px; }
.qx-meas { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.qx-stat b { display: block; font-size: 32px; font-weight: 300; line-height: 1.1; color: var(--ink); } .qx-meas .qi-inline-score { margin: 0; --bar-label: 112px; }
.qx-band-wrap { margin-top: 32px; } .qx-band { display: block; width: 100%; height: 96px; margin-top: 10px; }
@media (max-width: 960px) { .qx { grid-template-columns: 1fr; } .qx-meas { grid-template-columns: 1fr; gap: 10px; } }

/* Crosstalk to clarity, team's view */
.qx-cap b { display: block; margin-top: 6px; font-weight: 400; font-size: 22px; color: var(--head); }
.qx-pile { position: relative; height: 230px; margin-top: 8px; }
.qx-b { display: inline-block; max-width: 230px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px 14px 14px 4px; font-size: 16px; line-height: 1.35; color: var(--ink-2); }
.qx-pile .qx-b { position: absolute; white-space: nowrap; }
.qx-flowbox { position: relative; display: flex; flex-direction: column; gap: 14px; margin-top: 8px; padding: 6px 0; }
.qx-flow { position: relative; z-index: 1; align-self: flex-start; color: var(--ink); border-color: rgba(48, 121, 174,calc(.25 + var(--k) * .22)); }
.qx-flow.r { align-self: flex-end; border-radius: 14px 14px 4px 14px; }
.qx-thread { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.qx-team { display: grid; grid-template-columns: auto auto 1fr; gap: 28px; align-items: center; margin-top: 16px; padding: 18px 22px; border: 1px solid var(--line); border-radius: 16px; }
.qx-team-t { display: block; font-weight: 400; font-size: 20px; color: var(--head); }
.qx-team-v { display: flex; align-items: baseline; gap: 10px; } .qx-from { font-size: 28px; font-weight: 300; color: var(--ink-3); } .qx-arrow { color: var(--core); } .qx-team-v b { font-size: 44px; font-weight: 300; line-height: 1; }
.qx-team .qm-small:last-child { justify-self: end; max-width: 280px; text-align: right; }
@media (max-width: 960px) { .qx-team { grid-template-columns: 1fr; gap: 10px; } .qx-team .qm-small:last-child { justify-self: start; text-align: left; } .qx-pile { height: 300px; } .qx-pile .qx-b { white-space: normal; max-width: 60%; } }
.qi-fig figcaption.qx-cap { display: block; margin: 0 0 14px; }
.qi-fig .qx-flowbox svg.qx-thread { position: absolute; inset: 0; width: 100%; height: 100%; }
.qx-pile { height: 220px; }
/* Big figures with source, stacked under 960px: a hairline list with even spacing */
@media (max-width: 960px) {
  .qm-market div { padding: 20px 0; border-left: 0; border-top: 1px solid var(--line); }
  .qm-market div:first-child { padding-top: 0; border-top: 0; }
  .qm-market div:last-child { padding-bottom: 0; }
}

/* Worlds for every team */
.qi-wm figcaption { display: block; padding: 12px 6px 0; } .qi-wm-t { display: block; font-weight: 400; font-size: 18px; color: var(--head); } .qi-wm figcaption small { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-3); }
.qi-wm-strip { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; margin-top: 16px; padding: 18px 22px; border: 1px solid var(--line); border-radius: 16px; }
.qi-wm-strip-t { margin-top: 4px; font-size: 18px; color: var(--ink); }
.qi-wm-quals { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .qi-wm-quals span { font-size: 14px; padding: 6px 14px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink-2); }
@media (max-width: 960px) { .qi-wm-strip { grid-template-columns: 1fr; gap: 14px; } .qi-wm-quals { justify-content: flex-start; } }
/* Directory and icon-card backdrop icons: fainter */
.echo { opacity: .035; } [data-theme="swap"] .echo { opacity: .07; }

.qi-measure { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); max-width: 640px; } .qi-measure .qi-inline-score { margin-top: 8px; }

/* Directory grid: keep a fixed gap between the emblem and the title when cards are not square (under 960px) */
.hcard .em { flex: none; margin-bottom: 16px; }

/* ===================== Swap theme: generated from every gradient rule (Cowork, 2026-10-23) =====================
   White becomes the gradient, the gradient becomes white. */
[data-theme="swap"] .qi-target, [data-theme="swap"] .qp-ey, [data-theme="swap"] .qs-step b { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
[data-theme="swap"] .v2tag { background: #fff !important; color: #1E4E70 !important; }
[data-theme="swap"] .gline { background: #fff !important; }
[data-theme="swap"] .qm-card-link:hover .qm-arrow { background: #fff !important; color: #1E4E70 !important; }
[data-theme="swap"] .qa2 .ans .lbl i { background: #fff !important; }
[data-theme="swap"] .qa2 .rel a:hover .qm-arrow { background: #fff !important; color: #1E4E70 !important; }
[data-theme="swap"] .qr .who button .bar2 { background: #fff !important; }
[data-theme="swap"] .ss .list button.on .qm-arrow { background: #fff !important; color: #1E4E70 !important; }
[data-theme="swap"] .st2 .track .num .ln b { background: #fff !important; }
[data-theme="swap"] .st2 .step.on .num i, [data-theme="swap"] .st2 .step.done .num i { background: #fff !important; color: #1E4E70 !important; }
[data-theme="swap"] .fl2 .item .prog { background: #fff !important; }
[data-theme="swap"] .tl2 .rail .fill { background: #fff !important; }
[data-theme="swap"] .tl2 .node.lit { background: #fff !important; }
[data-theme="swap"] .pr2 .free i { background: #fff !important; color: #1E4E70 !important; }
[data-theme="swap"] .pr2 .main::before { background: #fff !important; }
[data-theme="swap"] .ck2 input:checked { background: #fff !important; }
[data-theme="swap"] .au .tabs button.on::after { background: #fff !important; }
[data-theme="swap"] .au li::before { background: #fff !important; }
[data-theme="swap"] .hb2 .tabs button.on { background: #fff !important; color: #1E4E70 !important; }
[data-theme="swap"] .v2tag.v3 { background: #fff !important; }
[data-theme="swap"] .ct3 thead th.us::before { background: #fff !important; }
[data-theme="swap"] .bs3 .thumb { background: #fff !important; }
[data-theme="swap"] .bs3 .thumb::before { background: #fff !important; }
[data-theme="swap"] .tm3 .dot { background: #fff !important; }
[data-theme="swap"] .tm3 .trail { background: #fff !important; }
[data-theme="swap"] .pv3 .o.on .meter i.in { background: #fff !important; }
[data-theme="swap"] .pv3 .sw.on { background: #fff !important; }
[data-theme="swap"] .sk3 .who button.on { background: #fff !important; color: #1E4E70 !important; }
[data-theme="swap"] .hcard:hover .qm-arrow { background: #fff !important; color: #1E4E70 !important; }
[data-theme="swap"] .bn3 .one .track i { background: #fff !important; }
[data-theme="swap"] .bs4 .fill { background: #fff !important; }
[data-theme="swap"] .ct4 .tabs button.on { background: #fff !important; }
[data-theme="swap"] .v2tag.new { background: #fff !important; }
[data-theme="swap"] .fq1 summary i::before, [data-theme="swap"] .fq1 summary i::after { background: #fff !important; }
[data-theme="swap"] .cr1 a:hover .qm-arrow { background: #fff !important; color: #1E4E70 !important; }
[data-theme="swap"] .bn3 .bm .bar i, [data-theme="swap"] .bn3 .cmp .bar i { background: #fff !important; }
[data-theme="swap"] .qm-score .q .bar i, [data-theme="swap"] .qm-teams .t .bar i, [data-theme="swap"] .bn3 .cmp .bar i, [data-theme="swap"] .bn3 .bm .you .bar i, [data-theme="swap"] .cs3 .r.you .bar i, [data-theme="swap"] .tp .r .bar i { background: #fff !important; }
[data-theme="swap"] .tm3 .dot { background: #fff !important; }
[data-theme="swap"] .tl4::before { background: #fff !important; }
[data-theme="swap"] .tl4 li.end i { background: #fff !important; }
[data-theme="swap"] .tl4::before { background: #fff !important; }
[data-theme="swap"] .vd4 .pb { background: #fff !important; }
[data-theme="swap"] .ah4 i, [data-theme="swap"] .ab4 i { background: #fff !important; color: #1E4E70 !important; }
[data-theme="swap"] .pg4 span a.on { background: #fff !important; color: #1E4E70 !important; }
[data-theme="swap"] .chip4.on { background: #fff !important; color: #1E4E70 !important; }
[data-theme="swap"] .gi-narr .av i { background: #fff !important; }
[data-theme="swap"] .gi-timer .line i { background: #fff !important; }
[data-theme="swap"] .qi-mpin { background: #fff !important; color: #1E4E70 !important; }
[data-theme="swap"] .qi-scrub-fill { background: #fff !important; }
[data-theme="swap"] .qi-dash nav i:first-child { background: #fff !important; }
[data-theme="swap"] .qi-callout i { background: #fff !important; }
[data-theme="swap"] .qi-checks i { background: #fff !important; color: #1E4E70 !important; }
[data-theme="swap"] .qi-live-dot { background: #fff !important; }
[data-theme="swap"] .qi-setup li.done i { background: #fff !important; }
[data-theme="swap"] .qi-readout-bar i { background: #fff !important; }
[data-theme="swap"] .qp-card::before, [data-theme="swap"] .qi-reason::before, [data-theme="swap"] .qi-demo > div::before { background: #fff !important; }
[data-theme="swap"] .qi-pi:hover .qm-arrow { background: #fff !important; color: #1E4E70 !important; }
[data-theme="swap"] .qs-track { background: #fff !important; }
[data-theme="swap"] .qm-eyebrow::before, [data-theme="swap"] .qp-ey::before { background: #fff !important; }
[data-theme="swap"] .qh-card::after { background: #fff !important; }
[data-theme="swap"] .qt-wave { background: #fff !important; }

/* Swap theme: grounds, glass surfaces, SVG paint and details */
[data-theme="swap"] body, [data-theme="swap"] .stage, [data-theme="swap"] .stage.alt { background: linear-gradient(117deg, #1F7FC7 0%, #3079AE 38%, #6BAFE0 100%); color: var(--ink); }
[data-theme="swap"] stop { stop-color: #FFFFFF; }
[data-theme="swap"] [stroke="#3079AE"], [data-theme="swap"] [stroke="#7ABDED"] { stroke: #FFFFFF; }
[data-theme="swap"] [fill="#3079AE"], [data-theme="swap"] [fill="#7ABDED"] { fill: #FFFFFF; }
[data-theme="swap"] img { box-shadow: none; }
[data-theme="swap"] .qs-grid::before { background-image: radial-gradient(circle, rgba(255,255,255,.35) 1px, transparent 1.4px); }
[data-theme="swap"] .qd-scale { fill: rgba(255,255,255,.8); }
[data-theme="swap"] .qd-dial line[stroke="var(--surface)"] { stroke: #3A97DC; }
[data-theme="swap"] .qs-track::after { filter: none; }
[data-theme="swap"] .qs-track { background: #FFFFFF !important; }
[data-theme="swap"] .qs-mk i { background: #3079AE; }
[data-theme="swap"] .qm-btn.ghost, [data-theme="swap"] .qm-ghost { color: #fff !important; border-color: rgba(255,255,255,.6) !important; background: transparent !important; }
[data-theme="swap"] .qt-v1 { background: #FFFFFF; } [data-theme="swap"] .qt-v2 { background: rgba(255,255,255,.7); } [data-theme="swap"] .qt-v3 { background: #1E4E70; } [data-theme="swap"] .qt-v4 { background: rgba(255,255,255,.4); }
[data-theme="swap"] .qx-b { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); color: #fff; }
[data-theme="swap"] .qs-trailmark { filter: brightness(0) invert(1); }
[data-theme="swap"] .qd-word.strained, [data-theme="swap"] .qd-s .v b.strained, [data-theme="swap"] .qh-dial .v b.strained { color: var(--strained-ink); }
[data-theme="swap"] .qd-word.forming, [data-theme="swap"] .qd-s .v b.forming, [data-theme="swap"] .qh-dial .v b.forming { color: var(--forming-ink); }
[data-theme="swap"] .qd-word.developing, [data-theme="swap"] .qd-s .v b.developing, [data-theme="swap"] .qh-dial .v b.developing { color: var(--developing-ink); }
[data-theme="swap"] .qd-word.performing, [data-theme="swap"] .qd-s .v b.performing, [data-theme="swap"] .qh-dial .v b.performing { color: var(--performing-ink); }
[data-theme="swap"] .qd-word.thriving, [data-theme="swap"] .qd-s .v b.thriving, [data-theme="swap"] .qh-dial .v b.thriving { color: var(--thriving-ink); }
[data-theme="swap"] .qi-frame-wide img { filter: none; }
/* Floating cards that overlap a photo stay solid in swap, so they never turn see-through over the picture */
[data-theme="swap"] .qm-compose .float > *, [data-theme="swap"] .qi-live, [data-theme="swap"] .qi-readout, [data-theme="swap"] .qi-callout, [data-theme="swap"] .qi-rec, [data-theme="swap"] .qh-card, [data-theme="swap"] .qi-method .qi-signals, [data-theme="swap"] .qi-method .qm-score, [data-theme="swap"] .qs-bg-b { background: #2E8FDA !important; border-color: rgba(255,255,255,.4) !important; }
[data-theme="swap"] .qs-win-art::after, [data-theme="swap"] .qi-world-art::after, [data-theme="swap"] .qi-wm-art::after { background: linear-gradient(180deg, rgba(48, 121, 174,0) 55%, rgba(48, 121, 174,.45) 100%); }

/* Slack and Teams logos always sit on white, in every theme (never on a gradient). A white chip or button with a gradient border is the allowed treatment. */
.qm-brandchip, img[data-brand="slack"], img[data-brand="teams"] { box-sizing: content-box; border: 1px solid transparent; border-radius: 12px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(117deg, #3079AE, #7ABDED) border-box; padding: 8px 14px; filter: none !important; opacity: 1 !important; }
.qm-brandchip { display: inline-flex; align-items: center; gap: 10px; color: #1E4E70; font-size: 15px; }
.qm-brandchip img { filter: none !important; height: 22px; width: auto; }
[data-theme="swap"] .qm-int a { border: 1px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(117deg, #3079AE, #7ABDED) border-box; color: #1E4E70; }
[data-theme="swap"] .qm-int a:not(.soon) img { filter: grayscale(1) brightness(.35) opacity(.75); }
[data-theme="swap"] .qm-int a img[data-brand="slack"], [data-theme="swap"] .qm-int a img[data-brand="teams"] { filter: none; padding: 0; border: 0; background: none; }
.qm-int a img[data-brand="slack"], .qm-int a img[data-brand="teams"] { padding: 0; border: 0; background: none; }

/* Situation wheel: universal situations whip in on a flat 3D wheel; each arrival pulses down the threads and updates the measurement. */
.qsw { position: relative; --qsw-w: 560px; --qsw-n: 5; --qsw-sw: calc(var(--qsw-w) / 7); --qsw-r: 572px; --qsw-D: 430px; --qsw-rs: 1528px; --qsw-h: 360px; --qsw-tilt: -3deg; }
.qsw-stage { position: relative; height: var(--qsw-h); perspective: 1400px; perspective-origin: 50% 40%; }
.qsw-ring { position: absolute; left: 50%; top: 8px; width: var(--qsw-w); margin-left: calc(var(--qsw-w) / -2); aspect-ratio: 16 / 9; transform-style: preserve-3d; transform: rotateZ(var(--qsw-tilt)) translateZ(calc(-1 * var(--qsw-D))) rotateY(var(--qsw-a, 0deg)); transition: transform var(--qsw-t, 0.9s) var(--qsw-ease, cubic-bezier(0.7, 0, 0.15, 1)); }
.qsw-panel { position: absolute; inset: 0; margin: 0; border-radius: 16px; overflow: hidden; background: #13263b; border: 1px solid var(--line); backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: rotateY(calc(var(--k) * 360deg / var(--qsw-n))) translateZ(var(--qsw-r)); transition: opacity .9s ease; }
.qsw-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qsw-cams { position: absolute; right: 12px; top: 12px; display: flex; gap: 6px; }
.qsw-cam { position: relative; flex: 0 0 96px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; border: 2px solid #fff; background: #13263b; }
.qsw-cam > img, .qsw-cam > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qsw-cam em { position: absolute; left: 4px; bottom: 3px; font-style: normal; font-size: 10px; letter-spacing: .04em; color: #fff; background: rgba(20,38,59,.62); border-radius: 4px; padding: 0 5px; }
.qsw-narr.gi-narr { position: absolute; left: 12px; bottom: 12px; max-width: 74%; gap: 10px; padding: 8px 12px; border-width: 1.5px; box-sizing: border-box; }
.qsw-narr .av, .qsw-narr .who { display: none; }
.qsw-narr .av, .qsw-narr .av > svg { width: 32px; height: 32px; }
.qsw-narr .av i { inset: 5px; }
.qsw-narr .who { font-size: 10px; }
.qsw-narr .line { font-size: 15px; line-height: 1.35; margin-top: 0; }
/* threads from the wheel down into the measurement; a pulse runs on every arrival */
.qsw-threads { position: absolute; pointer-events: none; z-index: 1; }
.qsw-threads svg { display: block; width: 100%; height: 100%; overflow: visible; }
.qsw-threads .qs-th { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.qsw-threads .qsw-pulse { fill: none; stroke: url(#qsw-pulse-g); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 140 1000; stroke-dashoffset: 140; opacity: 0; }
.qsw-threads.go-a .qsw-pulse { animation: qsw-pulse-a 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
.qsw-threads.go-b .qsw-pulse { animation: qsw-pulse-b 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
.qsw-threads .qsw-pulse:nth-child(2) { animation-delay: .08s; }
.qsw-threads .qsw-pulse:nth-child(3) { animation-delay: .16s; }
@keyframes qsw-pulse-a { 0% { stroke-dashoffset: 140; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { stroke-dashoffset: -1000; opacity: 0; } }
@keyframes qsw-pulse-b { 0% { stroke-dashoffset: 140; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { stroke-dashoffset: -1000; opacity: 0; } }
.qsw-readout { position: relative; z-index: 2; }
.qsw-readout .bar i, .qsw-readout .arc { transition: width 1s ease, stroke-dasharray 1s ease; }
.qsw-readout.got { animation: qsw-got .7s ease; }
@keyframes qsw-got { 0% { border-color: var(--line); } 30% { border-color: var(--core); } 100% { border-color: var(--line); } }
@media (max-width: 960px) { .qsw { --qsw-w: 300px; --qsw-r: 307px; --qsw-h: 210px; } .qsw-narr.gi-narr { max-width: none; right: 10px; } .qsw-cam { flex-basis: 64px; } .qsw-cam em { display: none; } .qsw-narr .av { display: none; } .qsw-narr .line { font-size: 12px; } .qsw-threads { display: none; } }
@media (prefers-reduced-motion: reduce) { .qsw-ring { transition: none; } .qsw-threads .qsw-pulse { animation: none !important; } }

/* curved screens: bundle.js cuts each screen into seven 8° strips on one cylinder, like a curved flatscreen */
.qsw-panel.curved { inset: 0; overflow: visible; background: none; border: 0; border-radius: 0; transform: rotateY(calc(var(--k) * 360deg / var(--qsw-n))) translateZ(var(--qsw-D)); transform-style: preserve-3d; }
.qsw-strip { position: absolute; top: 0; height: 100%; left: calc((var(--qsw-w) - var(--qsw-sw)) / 2); width: calc(var(--qsw-sw) + 2px); overflow: hidden; background: #13263b; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-sizing: border-box; transform: translateZ(calc(-1 * var(--qsw-rs))) rotateY(var(--d)) translateZ(var(--qsw-rs)); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.qsw-strip.first { border-left: 1px solid var(--line); border-radius: 14px 0 0 14px; }
.qsw-strip.last { border-right: 1px solid var(--line); border-radius: 0 14px 14px 0; width: var(--qsw-sw); }
.qsw-face { position: absolute; top: -1px; bottom: -1px; width: var(--qsw-w); left: calc(var(--j) * var(--qsw-sw) * -1); }
.qsw-strip.first .qsw-face { left: -1px; }
.qsw-shade { position: absolute; inset: 0; background: #0b1826; pointer-events: none; }
.qsw-readout.qsw-score-only { display: flex; flex-direction: column; align-items: center; text-align: center; }
@media (max-width: 960px) { .qsw { --qsw-r: 307px; } }
.qsw-label { position: absolute; left: 12px; top: 12px; background: #fff; color: var(--head); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 13px; line-height: 1.3; }
.qsw-readout.qsw-score-only { border: 0; padding: 0; background: none; }
/* rounded-square motion and fading threads */
.qsw-threads .qs-th { stroke-width: 1.25; }
.qsw-threads .qsw-pulse { stroke-width: 3; stroke-dasharray: 220 1000; stroke-dashoffset: 220; }
.qsw-threads.go-a .qsw-pulse { animation: qsw-pulse-a 1s cubic-bezier(0.45, 0, 0.55, 1) .55s both; }
.qsw-threads.go-b .qsw-pulse { animation: qsw-pulse-b 1s cubic-bezier(0.45, 0, 0.55, 1) .55s both; }
.qsw-threads.go-a .qsw-pulse:nth-child(2), .qsw-threads.go-b .qsw-pulse:nth-child(2) { animation-delay: .65s; }
.qsw-threads.go-a .qsw-pulse:nth-child(3), .qsw-threads.go-b .qsw-pulse:nth-child(3) { animation-delay: .75s; }
@keyframes qsw-pulse-a { 0% { stroke-dashoffset: 220; opacity: 1; } 100% { stroke-dashoffset: -1000; opacity: 1; } }
@keyframes qsw-pulse-b { 0% { stroke-dashoffset: 220; opacity: 1; } 100% { stroke-dashoffset: -1000; opacity: 1; } }
@media (max-width: 960px) { .qsw { --qsw-D: 232px; --qsw-rs: 818px; } }
.qsw-stage { z-index: 2; }

/* no lines in the white space mid-turn: slices carry no borders or backing, and hidden slices leave the render */
.qsw-strip, .qsw-strip.first, .qsw-strip.last { border: 0 !important; background: none !important; outline: 1px solid transparent; -webkit-font-smoothing: antialiased; transition: opacity .9s ease, visibility .9s step-end; }
.qsw-face { top: 0; bottom: 0; }


/* fade at the sides; label, cameras and narrator pop forward of the curved screen; narration plays */
.qsw-stage { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 80%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 80%, transparent 100%); }
.qsw-pop { position: absolute; inset: 0; pointer-events: none; transform: translateZ(26px); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.qsw-pop .qsw-label { left: 18px; top: 16px; }
.qsw-pop .qsw-cams { right: 18px; top: 16px; left: auto; }
.qsw-pop .qsw-narr.gi-narr { left: 18px; bottom: 16px; max-width: 76%; padding: 8px 14px 8px 8px; }
.qsw-pop .qsw-narr .av { display: block; width: 34px; height: 34px; }
.qsw-pop .qsw-narr .av > svg { width: 34px; height: 34px; }
.qsw-pop .qsw-narr .line .w { opacity: 1; }
.qsw-panel.live .qsw-narr .line .w { opacity: 0; animation: qsw-word .3s ease forwards; animation-delay: var(--wd); }
.qsw-panel.live .qsw-ring-p { animation: qsw-ring 4.4s linear both; }
.qsw-panel.live .qsw-narr .av i svg path { animation: qsw-wave .9s ease-in-out infinite alternate; transform-origin: center; }
@keyframes qsw-ring { from { stroke-dasharray: 0 100; } to { stroke-dasharray: 100 100; } }
@keyframes qsw-word { to { opacity: 1; } }
@keyframes qsw-wave { from { transform: scaleY(.55); } to { transform: scaleY(1); } }
@media (max-width: 960px) { .qsw-pop { transform: translateZ(14px); } .qsw-pop .qsw-narr .av { display: none; } .qsw-pop .qsw-narr.gi-narr { left: 8px; right: 8px; bottom: 8px; max-width: none; } }
@media (prefers-reduced-motion: reduce) { .qsw-panel.live .qsw-narr .line .w, .qsw-panel.live .qsw-ring-p, .qsw-panel.live .qsw-narr .av i svg path { animation: none; opacity: 1; } }

/* gaps, subtle parallax, two-speed pulses, narration across the whole turn */
.qsw { --qsw-D: 445px; }
.qsw-pop { transform: translateZ(5px); }
.qsw-panel.live .qsw-ring-p { animation-duration: 4.5s; }
.qsw-threads .qsw-drip { fill: none; stroke: url(#qsw-pulse-g); stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 90 1000; stroke-dashoffset: 90; opacity: .7; animation: qsw-drip 3.4s linear infinite; }
.qsw-threads .qsw-drip:nth-child(2) { animation-delay: -1.1s; }
.qsw-threads .qsw-drip:nth-child(3) { animation-delay: -2.3s; }
@keyframes qsw-drip { from { stroke-dashoffset: 90; } to { stroke-dashoffset: -1000; } }
.qsw-threads.go-a .qsw-pulse, .qsw-threads.go-b .qsw-pulse { animation-duration: .6s; animation-delay: .7s; }
.qsw-threads.go-a .qsw-pulse:nth-child(2), .qsw-threads.go-b .qsw-pulse:nth-child(2) { animation-delay: .75s; }
.qsw-threads.go-a .qsw-pulse:nth-child(3), .qsw-threads.go-b .qsw-pulse:nth-child(3) { animation-delay: .8s; }
@media (max-width: 960px) { .qsw { --qsw-D: 238px; } .qsw-pop { transform: translateZ(3px); } }
@media (prefers-reduced-motion: reduce) { .qsw-threads .qsw-drip { animation: none; opacity: 0; } }

/* one-line narration; the arriving screen waits with an empty line; screens fade on opacity alone */
.qsw-pop .qsw-narr.gi-narr { max-width: 90%; }
.qsw-pop .qsw-narr .line { white-space: nowrap; font-size: 14.5px; }
.qsw-panel.cue .qsw-narr .line .w { opacity: 0; }
.qsw-panel.cue .qsw-ring-p { stroke-dasharray: 0 100; }
.qsw-panel { transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
@media (max-width: 960px) { .qsw-pop .qsw-narr .line { white-space: normal; font-size: 11px; } }

/* ===== Situation wheel, final structure: the overlay lives inside each slice ===== */
.qsw-pop { display: none; }
.qsw-ov { position: absolute; inset: 0; }
.qsw-ov .qsw-label { position: absolute; left: 16px; top: 14px; white-space: nowrap; }
.qsw-ov .qsw-cams { position: absolute; right: 16px; top: 14px; left: auto; display: flex; gap: 6px; }
.qsw-ov .qsw-cam { flex: 0 0 auto; width: 96px; }
.qsw-ov .qsw-narr.gi-narr { position: absolute; left: 16px; right: 16px; bottom: 14px; max-width: none; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; }
.qsw-ov .qsw-narr .av { display: block; width: 32px; height: 32px; }
.qsw-ov .qsw-narr .av > svg { width: 32px; height: 32px; }
.qsw-ov .qsw-narr .line { margin: 0; min-height: 0; font-size: 14.5px; white-space: nowrap; overflow: hidden; }
.qsw-threads .qsw-drip, .qsw-threads .qsw-pulse { stroke: var(--pc, var(--core)); transition: stroke .6s ease; }
.qsw-threads { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 62%, transparent 100%); }
@media (max-width: 960px) { .qsw-ov .qsw-narr .av { display: none; } .qsw-ov .qsw-narr .line { white-space: normal; font-size: 10px; } .qsw-ov .qsw-cam { width: 48px; } .qsw-ov .qsw-cam em { display: none; } }

/* room inside the masked stage for the tilted, curved screens, so the corners are never clipped */
.qsw-stage { height: calc(var(--qsw-h) + 72px); margin-top: -36px; }
.qsw-ring { top: 44px; }
@media (max-width: 960px) { .qsw-stage { height: calc(var(--qsw-h) + 40px); margin-top: -20px; } .qsw-ring { top: 28px; } }

/* ===== Guardrails ===== */
/* standard line: in a narrow container, drop the 95 label so 95 and 100 never collide */
.qs-std.qs-lg { container-type: inline-size; }
@container (max-width: 520px) { .qs-scale span:nth-child(5) { display: none; } }
/* scene narrators on marketing pages: one line, no speaker label */
.gi-narr.qw-narr1 .who { display: none; }
.gi-narr.qw-narr1 .line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* threads easy to see and starting at the screen's bottom edge; fast slide, slow drift */
.qsw-threads { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); }
.qsw-threads .qs-th { stroke-width: 1.75; }
.qsw-threads .qsw-drip { stroke-width: 2.6; opacity: .85; animation-duration: 4s; }
.qsw-threads .qsw-pulse { stroke-width: 3.4; }
.qsw-threads.go-a .qsw-pulse, .qsw-threads.go-b .qsw-pulse { animation-duration: .5s; animation-delay: .5s; }
.qsw-threads.go-a .qsw-pulse:nth-child(2), .qsw-threads.go-b .qsw-pulse:nth-child(2) { animation-delay: .55s; }
.qsw-threads.go-a .qsw-pulse:nth-child(3), .qsw-threads.go-b .qsw-pulse:nth-child(3) { animation-delay: .6s; }
.qsw-panel.live .qsw-ring-p { animation-duration: 4.85s; }
.qsw-panel.live .qsw-ring-p { animation-duration: 3.05s; }

/* ===== Score bands: no green; blue bands draw as gradients ===== */
[style*="--bandc:var(--thriving)"] .bar i, [style*="--bandc: var(--thriving)"] .bar i, .bar i[style*="var(--thriving)"] { background: linear-gradient(90deg, #176BBA, #3079AE) !important; }
[style*="--bandc:var(--performing)"] .bar i, [style*="--bandc: var(--performing)"] .bar i, .bar i[style*="var(--performing)"] { background: linear-gradient(90deg, #3079AE, #7ABDED) !important; }
/* the gauge arc takes its band's gradient (bundle.js adds the qd-g-* gradients to the page) */
.qd-dial .arc[stroke="var(--strained)"] { stroke: url(#qd-g-strained); }
.qd-dial .arc[stroke="var(--forming)"] { stroke: url(#qd-g-forming); }
.qd-dial .arc[stroke="var(--developing)"] { stroke: url(#qd-g-developing); }
.qd-dial .arc[stroke="var(--performing)"] { stroke: url(#qd-g-performing); }
.qd-dial .arc[stroke="var(--thriving)"] { stroke: url(#qd-g-thriving); }
[data-theme="swap"] .qd-dial .arc { stroke: #FFFFFF !important; }

/* =====================================================================
   Module library, wave 2: layouts and sections for variety.
   Each module is flat (1px lines, no shadows), carries one decoration at most,
   and keeps game imagery next to a measurement.
   ===================================================================== */
:root { --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --ink-ground: #0F2236; }
.qm-mono { font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.ml-h2 { margin: 0; font-size: 40px; font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; color: var(--head); }
.ml-lead { margin: 14px 0 0; font-size: 18px; line-height: 1.5; color: var(--ink-2); max-width: 34em; }
.ml-link { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--core-ink); text-decoration: none; }
.ml-link::after { content: "→"; }

/* Section grounds: change the ground every few sections */
.qm-ground-ink { background: linear-gradient(160deg, #0F2236 0%, #16324D 100%); color: #fff; --head: #FFFFFF; --ink: #FFFFFF; --ink-2: rgba(255,255,255,.78); --ink-3: rgba(255,255,255,.6); --line: rgba(255,255,255,.14); --line-2: rgba(255,255,255,.24); --surface: rgba(255,255,255,.06); --surface-2: rgba(255,255,255,.08); --core-ink: #9CCDF2; }
.qm-ground-grad { background: linear-gradient(117deg, #1F7FC7 0%, #6BAFE0 100%); color: #fff; --head: #FFFFFF; --ink: #FFFFFF; --ink-2: rgba(255,255,255,.88); --ink-3: rgba(255,255,255,.74); --line: rgba(255,255,255,.28); --core-ink: #FFFFFF; }
.qm-ground-wash { background: linear-gradient(180deg, #F5FAFF 0%, #ECF6FF 100%); }
.qm-ground-art { position: relative; color: #fff; overflow: hidden; --head: #FFFFFF; --ink-2: rgba(255,255,255,.88); }
.qm-ground-art > .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qm-ground-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,34,54,.15) 0%, rgba(15,34,54,.78) 100%); }
.qm-ground-art > :not(.bg) { position: relative; }
.ml-grounds { display: grid; gap: 12px; }
.ml-grounds > div { border-radius: 16px; padding: 28px 32px; min-height: 120px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; border: 1px solid var(--line); }
.ml-grounds b { font-weight: 400; font-size: 22px; color: var(--head); }
.ml-grounds span { font-size: 14px; color: var(--ink-2); }

/* Sticky heading list: heading holds on the left, numbered rows scroll on the right */
.ml-sticky { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.ml-sticky > header { position: sticky; top: 96px; }
.ml-sticky > header .qm-btn { margin-top: 24px; }
.ml-sticky ol { list-style: none; margin: 0; padding: 0; }
.ml-sticky li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 18px; align-items: start; padding: 22px 0; border-top: 1px solid var(--line); }
.ml-sticky li:last-child { border-bottom: 1px solid var(--line); }
.ml-sticky li .n { display: inline-grid; place-items: center; width: 34px; height: 26px; border: 1px solid var(--line-2); border-radius: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }
.ml-sticky li b { display: block; font-size: 20px; font-weight: 400; line-height: 1.3; color: var(--head); }
.ml-sticky li p { margin: 4px 0 0; font-size: 15px; color: var(--ink-2); }
.ml-sticky li .side { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--ink-3); white-space: nowrap; padding-top: 4px; }

/* Edge carousel: a row that runs off the right edge */
.ml-edge { overflow: hidden; }
.ml-edge .hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.ml-edge .arrows { display: flex; gap: 8px; }
.ml-edge .arrows button { all: unset; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; cursor: pointer; color: var(--head); }
.ml-edge .arrows button:hover { border-color: var(--core); }
.ml-edge .arrows button:focus-visible { outline: 2px solid var(--core); outline-offset: 2px; }
.ml-edge .track { display: flex; gap: 16px; margin-top: 32px; margin-right: -56px; padding-right: 56px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.ml-edge .track::-webkit-scrollbar { display: none; }
.ml-edge .card { flex: 0 0 320px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; color: inherit; text-decoration: none; }
.ml-edge .art { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
.ml-edge .art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ml-edge .art .pill { position: absolute; z-index: 1; left: 12px; bottom: 12px; display: inline-flex; align-items: baseline; gap: 8px; background: #fff !important; border: 1px solid #E2EBF4; border-radius: 10px; padding: 4px 10px; font-size: 12px; color: #4E5A6B; backdrop-filter: none; }
.ml-edge .art .pill b { font-size: 22px; font-weight: 300; }
.ml-edge .card b { font-size: 19px; font-weight: 400; color: var(--head); }
.ml-edge .card span { font-size: 15px; color: var(--ink-2); }

/* Feature switcher: rows on the left, one visual on the right that follows the active row */
@keyframes ml-progress { to { width: 100%; } }

/* Mixed-media grid: four ways in, four different kinds of tile */
.ml-mix { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.ml-mix .tile { position: relative; border-radius: 18px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); min-height: 260px; display: flex; flex-direction: column; justify-content: flex-end; padding: 26px; }
.ml-mix .tile h3 { margin: 0; font-size: 24px; font-weight: 400; color: var(--head); }
.ml-mix .tile p { margin: 6px 0 0; font-size: 15px; color: var(--ink-2); }
.ml-mix .tile.form { justify-content: flex-start; }
.ml-mix .tile.form .field { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.ml-mix .tile.form input { font: inherit; font-size: 15px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; }
.ml-mix .tile.crop { padding-right: 46%; }
.ml-mix .tile.crop .ui { position: absolute; right: -24px; top: 24px; bottom: -24px; width: 52%; border: 1px solid var(--line); border-radius: 14px 0 0 0; background: #fff; padding: 16px; }
.ml-mix .tile.photo { color: #fff; --head: #fff; --ink-2: rgba(255,255,255,.88); }
.ml-mix .tile.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ml-mix .tile.photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,34,54,0) 35%, rgba(15,34,54,.8) 100%); z-index: 1; }
.ml-mix .tile.photo > :not(img) { position: relative; z-index: 2; }
.ml-mix .tile .tag { position: absolute; top: 22px; left: 26px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); z-index: 2; }
.ml-mix .tile.photo .tag { color: rgba(255,255,255,.8); }

/* UI-fragment bento: real interface fragments, not icons */
.ml-frag { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.ml-frag .tile { position: relative; grid-column: span 6; min-height: 300px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--line); padding: 26px; overflow: hidden; }
.ml-frag .tile.w7 { grid-column: span 7; } .ml-frag .tile.w5 { grid-column: span 5; }
.ml-frag .tile b { display: block; font-size: 20px; font-weight: 400; color: var(--head); }
.ml-frag .tile > p { margin: 4px 0 0; max-width: 24em; font-size: 15px; color: var(--ink-2); }
.ml-frag .frag { position: absolute; right: 26px; bottom: 26px; display: flex; flex-direction: column; gap: 8px; width: min(300px, 70%); }
.ml-frag .chip { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 16px; color: #292929; }
.ml-frag .chip .plus { width: 22px; height: 22px; border: 1px solid var(--line-2); border-radius: 6px; display: grid; place-items: center; color: #4E5A6B; font-size: 14px; }
.ml-frag .chip .v { font-size: 20px; font-weight: 300; }
.ml-frag .bubble { align-self: flex-end; max-width: 260px; background: linear-gradient(117deg, #3079AE, #7ABDED); color: #fff; border-radius: 16px 16px 4px 16px; padding: 14px 16px; font-size: 18px; line-height: 1.3; }
.ml-frag .who { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.ml-frag .who img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.ml-frag .toggle { display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 15px; color: #292929; }
.ml-frag .toggle i { width: 36px; height: 20px; border-radius: 999px; background: linear-gradient(90deg, #3079AE, #7ABDED); position: relative; }
.ml-frag .toggle i::after { content: ""; position: absolute; right: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }

/* Full-bleed scene: one dramatic quest image with its measurement on top */
.ml-bleed { position: relative; border-radius: 28px; overflow: hidden; min-height: 560px; display: flex; flex-direction: column; justify-content: space-between; padding: 48px; color: #fff; }
.ml-bleed > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ml-bleed::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,34,54,.78) 0%, rgba(15,34,54,.35) 38%, rgba(15,34,54,.1) 58%, rgba(15,34,54,.7) 100%); }
.ml-bleed > :not(.bg) { position: relative; }
.ml-bleed .ml-h2 { color: #fff; max-width: 14em; }
.ml-bleed .ml-lead { color: rgba(255,255,255,.88); }
.ml-bleed .cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ml-bleed .card { background: #fff; color: #292929; border-radius: 16px; padding: 18px 20px; border: 1px solid #E2EBF4; }
.ml-bleed .card .qm-mono { color: #4E5A6B; }
.ml-bleed .card .v { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.ml-bleed .card .v b { font-size: 40px; font-weight: 200; line-height: 1; }
.ml-bleed .card p { margin: 8px 0 0; font-size: 14px; color: #4E5A6B; }

/* Case study cards: one big number per customer */
.ml-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ml-cases .case { background: #fff; color: #292929; border: 1px solid #E2EBF4; border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; }
.ml-cases .case .logo { font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #296590; padding-bottom: 14px; border-bottom: 1px solid #E2EBF4; }
.ml-cases .case .k { margin-top: 10px; font-size: 15px; color: #4E5A6B; }
.ml-cases .case .num { font-size: 72px; font-weight: 200; line-height: 1; letter-spacing: -0.04em; background: linear-gradient(97deg, #1E4E70, #3079AE 60%, #7ABDED); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ml-cases .case .ml-link { margin-top: 8px; color: #227BBE; }

/* Press marquee and award */
.ml-press { display: flex; align-items: center; gap: 28px; }
.ml-press .lab { flex: none; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.ml-press .rail { position: relative; flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ml-press .run { display: flex; gap: 56px; width: max-content; animation: ml-marquee 32s linear infinite; }
.ml-press .run span { font-size: 26px; font-weight: 300; letter-spacing: -0.01em; color: #8A94A3; white-space: nowrap; }
.ml-press .rail:hover .run { animation-play-state: paused; }
@keyframes ml-marquee { to { transform: translateX(-50%); } }
.ml-award { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 30px; position: relative; text-align: center; }
.ml-award svg { position: absolute; top: 50%; width: 26px; height: 56px; transform: translateY(-50%); }
.ml-award svg.l { left: 0; } .ml-award svg.r { right: 0; transform: translateY(-50%) scaleX(-1); }
.ml-award b { font-size: 15px; font-weight: 400; color: var(--head); }
.ml-award span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

/* Jump nav: a pill of anchors for long pages */
.ml-jump { display: flex; align-items: center; gap: 4px; padding: 6px 8px 6px 18px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); overflow-x: auto; scrollbar-width: none; }
.ml-jump .lab { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-right: 10px; white-space: nowrap; }
.ml-jump a { padding: 8px 14px; border-radius: 999px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.ml-jump a:hover { background: var(--alice); color: var(--head); }
.ml-jump a.on { color: var(--head); box-shadow: inset 0 -2px 0 #3079AE; border-radius: 0; }

/* Video feature: one full-width video with a measurement chip */
.ml-video { position: relative; display: block; border-radius: 28px; overflow: hidden; aspect-ratio: 16 / 8; border: 1px solid var(--line); background: #13263b; }
.ml-video > img, .ml-video > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ml-video::before { content: ""; position: absolute; inset: 0; background: rgba(15,34,54,.35); z-index: 1; }
.ml-video .mid { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.ml-video .mid h3 { margin: 0; font-size: 48px; font-weight: 400; letter-spacing: -0.02em; color: #fff; text-align: center; }
.ml-video .play { all: unset; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.18); border: 1.5px solid rgba(255,255,255,.8); cursor: pointer; transition: transform .2s ease; }
.ml-video .play:hover { transform: scale(1.06); }
.ml-video .play:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.ml-video .chip { position: absolute; left: 22px; bottom: 22px; z-index: 2; display: inline-flex; align-items: baseline; gap: 8px; background: #fff; border-radius: 10px; padding: 6px 12px; font-size: 13px; color: #4E5A6B; }
.ml-video .chip b { font-size: 24px; font-weight: 300; }

/* Article cards */
.ml-articles .hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.ml-articles .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ml-articles a.card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; }
.ml-articles .art { aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.ml-articles .art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ml-articles b { font-size: 19px; font-weight: 400; line-height: 1.3; color: var(--head); }
.ml-articles p { margin: 0; font-size: 15px; color: var(--ink-2); }

/* Setup checklist: numbered cards on the ink ground */
.ml-setup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ml-setup .step { border: 1px solid var(--line); border-radius: 16px; padding: 22px; background: var(--surface); display: flex; flex-direction: column; gap: 10px; min-height: 190px; }
.ml-setup .step .qm-mono { color: var(--ink-3); }
.ml-setup .step b { font-size: 20px; font-weight: 400; color: var(--head); }
.ml-setup .step p { margin: 0; font-size: 15px; color: var(--ink-2); flex: 1; }
.ml-setup .step a { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--head); text-decoration: underline; text-underline-offset: 4px; }

/* Contact panel: a form card on a gradient panel */
.ml-contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; border-radius: 28px; padding: 56px; background: linear-gradient(117deg, #1F7FC7 0%, #6BAFE0 100%); color: #fff; }
.ml-contact form { background: #fff; color: #292929; border-radius: 18px; padding: 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; min-width: 0; }
.ml-contact form h3 { grid-column: 1 / -1; margin: 0 0 6px; font-size: 26px; font-weight: 400; color: #296590; }
.ml-contact label { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 13px; color: #4E5A6B; }
.ml-contact label.full { grid-column: 1 / -1; }
.ml-contact input, .ml-contact select, .ml-contact textarea { font: inherit; font-size: 15px; padding: 11px 12px; border: 1px solid #CFDDEA; border-radius: 10px; background: #fff; color: #292929; box-sizing: border-box; width: 100%; min-width: 0; }
.ml-contact textarea { min-height: 88px; resize: vertical; }
.ml-contact form .qm-btn { grid-column: 1 / -1; justify-content: center; }
.ml-contact .copy .qm-mono { color: rgba(255,255,255,.85); }
.ml-contact .copy h2 { margin: 10px 0 0; font-size: 40px; font-weight: 400; line-height: 1.12; letter-spacing: -0.02em; color: #fff; }
.ml-contact .copy p { margin: 14px 0 0; font-size: 17px; color: rgba(255,255,255,.9); }

@media (max-width: 960px) {
  .ml-sticky, .ml-mix, .ml-contact { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ml-sticky > header { position: static; }
  .ml-frag .tile, .ml-frag .tile.w7, .ml-frag .tile.w5 { grid-column: 1 / -1; }
  .ml-bleed { padding: 24px; min-height: 0; gap: 120px; } .ml-bleed .cards, .ml-cases, .ml-articles .grid, .ml-setup { grid-template-columns: minmax(0, 1fr); }
  .ml-edge .track { margin-right: -20px; padding-right: 20px; } .ml-edge .card { flex-basis: 78%; }
  .ml-mix .tile.crop { padding-right: 26px; padding-top: 220px; } .ml-mix .tile.crop .ui { left: 26px; right: -24px; width: auto; bottom: auto; height: 180px; }
  .ml-video { aspect-ratio: 4 / 3; } .ml-video .mid h3 { font-size: 30px; }
  .ml-contact { padding: 24px; } .ml-contact form { grid-template-columns: minmax(0, 1fr); }
  .ml-press { flex-direction: column; align-items: flex-start; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { .ml-press .run { animation: none; } }

/* =====================================================================
   Frosted glass. Use it where something sits over imagery, video or a
   gradient: chips, score cards, the narrator, menus and the sticky header.
   On plain white it does nothing, so use a solid surface there.
   ===================================================================== */
:root {
  --glass-light: rgba(255, 255, 255, 0.62);
  --glass-light-strong: rgba(255, 255, 255, 0.78);
  --glass-light-line: rgba(255, 255, 255, 0.7);
  --glass-dark: rgba(14, 33, 54, 0.38);
  --glass-dark-line: rgba(255, 255, 255, 0.24);
  --glass-blur: blur(18px) saturate(170%);
}
.qm-glass { background: var(--glass-light) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-light-line) !important; }
.qm-glass-strong { background: var(--glass-light-strong) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-light-line) !important; }
.qm-glass-dark { background: var(--glass-dark) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-dark-line) !important; color: #fff !important; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .qm-glass, .qm-glass-strong { background: rgba(255, 255, 255, 0.92) !important; }
  .qm-glass-dark { background: rgba(14, 33, 54, 0.78) !important; }
}

/* modules that sit on imagery or gradients use glass by default */
.ml-bleed .card, .ml-mix .tile.crop .ui, .ml-cases .case, .ml-edge .art .pill, .ml-video .chip, .ml-contact form {
  background: var(--glass-light-strong) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-light-line) !important; }
.ml-video .play { background: var(--glass-dark); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid rgba(255, 255, 255, 0.55); }
.ml-mix .tile.photo .tag, .ml-bleed > .qm-mono { display: inline-block; width: max-content; background: var(--glass-dark); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-dark-line); border-radius: 999px; padding: 5px 11px; color: #fff; }
.ml-contact input, .ml-contact select, .ml-contact textarea { background: rgba(255, 255, 255, 0.85); }
.qsw-label { background: var(--glass-dark) !important; color: #fff !important; border: 1px solid var(--glass-dark-line) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.qsw-cam em { background: var(--glass-dark) !important; -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%); }
.qsw-narr.gi-narr { background: var(--glass-light-strong) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
/* Frost gradient: where text sits on imagery, the picture frosts over toward the text and
   clears away from it, so the image still shows. Light frost ends in the surface color
   (text on white below); dark frost ends in ink (white text over the picture). */
.qm-frost-b, .qm-frost-t, .qm-frost-b-dark, .qm-frost-t-dark { position: relative; }
.qm-frost-b::after, .qm-frost-t::after, .qm-frost-b-dark::after, .qm-frost-t-dark::after { content: ""; position: absolute; inset: 0; pointer-events: none; -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); }
.qm-frost-b::after { background: linear-gradient(180deg, rgba(255,255,255,0) 45%, rgba(255,255,255,.55) 78%, var(--surface, #fff) 100%); -webkit-mask-image: linear-gradient(180deg, transparent 40%, #000 80%); mask-image: linear-gradient(180deg, transparent 40%, #000 80%); }
.qm-frost-t-dark::after { background: linear-gradient(180deg, rgba(14,33,54,.62) 0%, rgba(14,33,54,.3) 40%, rgba(14,33,54,0) 65%); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 62%); mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 62%); }
.qm-frost-b-dark::after { background: linear-gradient(180deg, rgba(14,33,54,0) 35%, rgba(14,33,54,.35) 60%, rgba(14,33,54,.72) 100%); -webkit-mask-image: linear-gradient(180deg, transparent 35%, #000 70%); mask-image: linear-gradient(180deg, transparent 35%, #000 70%); }

/* full-bleed scene: a blurred copy of the art frosts the top behind the heading and clears through
   the middle; a tint keeps white text readable. Uses filter: blur on a second <img class="bg frost">,
   which renders the same in every browser (masked backdrop-filter does not). */
.ml-bleed > img.bg { z-index: 0; }
.ml-bleed > img.frost { z-index: 1; filter: blur(22px) saturate(1.25); transform: scale(1.12);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 24%, transparent 54%, transparent 70%, rgba(0,0,0,.75) 100%); mask-image: linear-gradient(180deg, #000 0%, #000 24%, transparent 54%, transparent 70%, rgba(0,0,0,.75) 100%); }
.ml-bleed::before { z-index: 2; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; -webkit-mask-image: none !important; mask-image: none !important;
  background: linear-gradient(180deg, rgba(14,33,54,.55) 0%, rgba(14,33,54,.3) 30%, rgba(14,33,54,0) 55%, rgba(14,33,54,0) 70%, rgba(14,33,54,.35) 100%) !important; }
.ml-bleed > :not(.bg) { z-index: 3; }

/* mixed-media photo tiles: label top left; title on a blurred, tinted bottom */
.ml-mix .tile.photo > .tag { position: absolute; top: 22px; left: 26px; }
.ml-mix .tile.photo > img.frost { z-index: 1; filter: blur(18px) saturate(1.2); transform: scale(1.1);
  -webkit-mask-image: linear-gradient(180deg, transparent 40%, #000 74%); mask-image: linear-gradient(180deg, transparent 40%, #000 74%); }
.ml-mix .tile.photo::before { z-index: 2 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; -webkit-mask-image: none !important; mask-image: none !important;
  background: linear-gradient(180deg, rgba(14,33,54,0) 42%, rgba(14,33,54,.32) 66%, rgba(14,33,54,.62) 100%) !important; }
.ml-mix .tile.photo > :not(img) { z-index: 3; }
/* product crop: runs off the edge, but the numbers stay inside the tile */
.ml-mix .tile.crop { padding-right: 52%; }
.ml-mix .tile.crop .ui { right: -40px; width: 54%; padding-right: 52px; box-sizing: border-box; }

/* ===== threads: fade out while turning, reach down in the band color ===== */
.qsw-threads { transition: opacity .45s ease; }
.qsw-threads.out { opacity: 0; transition: opacity .22s ease; }
.qsw-threads .qs-th { stroke: var(--pc, var(--core)) !important; stroke-width: 2; stroke-dasharray: none !important; animation: none !important; }
/* reach down: reveal the whole thread from the screen to the score, solid the whole way */
.qsw-threads svg { clip-path: inset(0 0 0 0); }
.qsw-threads.go-a svg { animation: qsw-reach-a .9s cubic-bezier(0.25, 0.1, 0.2, 1) both; }
.qsw-threads.go-b svg { animation: qsw-reach-b .9s cubic-bezier(0.25, 0.1, 0.2, 1) both; }
@keyframes qsw-reach-a { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes qsw-reach-b { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
/* the color is the thread: no dashes, drips or bursts on top of it */
.qsw-threads .qsw-pulse, .qsw-threads .qsw-drip { display: none !important; }
@media (prefers-reduced-motion: reduce) { .qsw-threads svg { animation: none !important; } .qsw-threads.out { opacity: 1; } }

/* ===== Measured reveal: the game plays, then frosted glass lifts over it with the score ===== */
.ml-reveal .scr { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #13263b; isolation: isolate; }
.ml-reveal .scr > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ml-reveal .lab { position: absolute; left: 3%; top: 4.5%; z-index: 2; background: rgba(14,33,54,.58); color: #fff; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 6px 14px; font-size: 15px; }
.ml-reveal .cams { position: absolute; right: 2.5%; top: 4%; z-index: 2; display: flex; gap: 8px; width: 46%; }
.ml-reveal .cam { position: relative; flex: 1; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; border: 2px solid rgba(255,255,255,.85); background: #1b2b3d; }
.ml-reveal .cam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ml-reveal .cam em { position: absolute; left: 6px; bottom: 5px; font-style: normal; font-size: 12px; color: #fff; background: rgba(14,33,54,.62); border-radius: 5px; padding: 1px 7px; }
.ml-reveal .narr { position: absolute; left: 3%; right: 3%; bottom: 4%; z-index: 2; display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.92); border: 1.5px solid #3079AE; border-radius: 14px; padding: 9px 16px 9px 9px; animation: mlr-narr .5s ease 2s both; }
.ml-reveal .narr i { flex: none; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(117deg, #3079AE, #7ABDED); }
.ml-reveal .narr p { margin: 0; font-size: 16px; color: #292929; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-reveal .glass { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; z-index: 3; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 56px; align-items: center; padding: 40px 56px;
  background: rgba(255,255,255,.8); -webkit-backdrop-filter: blur(28px) saturate(140%); backdrop-filter: blur(28px) saturate(140%); border-top: 1px solid rgba(255,255,255,.9); border-radius: 22px;
  transform: translateY(104%); animation: mlr-glass 1s cubic-bezier(0.2, 0.8, 0.2, 1) 2s both; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ml-reveal .glass { background: rgba(255,255,255,.94); } }
.ml-reveal .score .num { display: flex; align-items: baseline; gap: 12px; margin-top: 6px; }
.ml-reveal .score .num b { font-size: 120px; font-weight: 200; line-height: .95; letter-spacing: -0.04em; }
.ml-reveal .score .num .qd-word { font-size: 20px; }
.ml-reveal .score .chg { display: block; margin-top: 10px; font-size: 15px; color: #4E5A6B; }
.ml-reveal .score .who { display: block; margin-top: 14px; }
.ml-reveal .rows .qm-score { margin-top: 12px; }
.ml-reveal .rows .bar i { transform-origin: left center; animation: mlr-bar 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 2.5s both; }
.ml-reveal[data-wait] .glass, .ml-reveal[data-wait] .rows .bar i, .ml-reveal[data-wait] .narr { animation-play-state: paused; }
@keyframes mlr-glass { from { transform: translateY(104%); } to { transform: translateY(0); } }
@keyframes mlr-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mlr-narr { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ml-reveal .glass, .ml-reveal .rows .bar i, .ml-reveal .narr { animation: none; transform: none; } .ml-reveal .narr { opacity: 0; } }
@media (max-width: 760px) { .ml-reveal .glass { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px 18px; } .ml-reveal .score .num b { font-size: 56px; } .ml-reveal .narr p { font-size: 12px; } .ml-reveal .cams { width: 56%; gap: 4px; } .ml-reveal .lab { font-size: 11px; padding: 3px 9px; } }

/* Logo button: a button that carries a Slack or Teams logo is white with a 1px gradient border and navy text,
   on every ground. Applies to .qm-btn.logo and to any .qm-btn that holds an <img>. */
.qm-btn.logo, .qm-btn:has(> img) { background: linear-gradient(#fff, #fff) padding-box, linear-gradient(117deg, #3079AE, #7ABDED) border-box !important; border: 1px solid transparent !important; color: #1E4E70 !important; }
.qm-btn.logo:hover, .qm-btn:has(> img):hover { background: linear-gradient(#F5FAFF, #F5FAFF) padding-box, linear-gradient(117deg, #3079AE, #7ABDED) border-box !important; }
.qm-btn.logo img, .qm-btn:has(> img) img { filter: none !important; }

/* ===== Directories v2 ===== */
/* camera tiles used by Next pages and Directory */
.qw-camrow{position:absolute;display:flex;gap:6px;z-index:2}
.qw-cam{position:relative;display:block}
.qw-cam img{display:block;width:64px;height:48px;object-fit:cover;border-radius:10px;border:2px solid #fff;box-sizing:border-box}
.qw-cam em{position:absolute;left:5px;bottom:5px;font-style:normal;font-size:10px;letter-spacing:.04em;color:#fff;background:rgba(20,38,59,.62);border-radius:5px;padding:1px 5px}


/* ===== The problem (qw-pains): plain observations, no quote cards ===== */
.qw-pains .qi-head{max-width:760px}
.qw-pain-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:40px}
.qw-pain{display:flex;flex-direction:column;gap:12px;padding-top:20px;border-top:1px solid var(--line-2,#C9D6E3)}
.qw-pain .qm-mono{color:var(--core,#3079AE)}
.qw-pain p{margin:0;font-size:19px;line-height:1.45;color:var(--ink)}
@media (max-width:860px){.qw-pain-row{grid-template-columns:1fr;gap:24px}}

/* ===== Next pages as picture cards (qw-nxg) ===== */
.qw-nxg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}
.qw-nx{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:var(--surface,#fff);border:1px solid var(--line);text-decoration:none;color:inherit;transition:border-color .25s ease, transform .35s cubic-bezier(.2,.7,.2,1)}
.qw-nx:hover,.qw-nx:focus-visible{border-color:#7ABDED;transform:translateY(-3px)}
.qw-nx .art{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#DDEBF7}
.qw-nx .art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.qw-nx:hover .art>img{transform:scale(1.05)}
.qw-nx .art>img.fr{filter:blur(16px) saturate(1.1);transform:scale(1.15);-webkit-mask-image:linear-gradient(to bottom,transparent 45%,#000 85%);mask-image:linear-gradient(to bottom,transparent 45%,#000 85%)}
.qw-nx:hover .art>img.fr{transform:scale(1.2)}
.qw-nx .art::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(248,251,255,0) 50%,rgba(248,251,255,.55) 100%)}
.qw-nx .qw-camrow{left:14px;right:auto;top:auto;bottom:14px;z-index:2}
.qw-nx .qw-camrow .qw-cam img{width:52px;height:39px;border-radius:8px}
.qw-nx .sec{position:absolute;left:14px;top:14px;z-index:2;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#14263B;
  background:rgba(255,255,255,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:999px;padding:5px 11px}
.qw-nx .bd{display:flex;flex-direction:column;gap:6px;padding:20px 24px 22px;flex:1}
.qw-nx .t{font-size:22px;line-height:1.2;color:var(--head);letter-spacing:-.01em}
.qw-nx .d{font-size:15px;line-height:1.4;color:var(--ink-2)}
.qw-nx .go{margin-top:auto;padding-top:12px;display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--core,#3079AE)}
.qw-nx .go .qm-arrow{transition:transform .25s ease}
.qw-nx:hover .go .qm-arrow{transform:translateX(4px)}
.qw-nxg.many .qw-nx .art{aspect-ratio:16/8}
@media (max-width:960px){.qw-nxg{grid-template-columns:1fr}.qw-nx .art{aspect-ratio:16/8}}

/* ===== Split directory (dr) ===== */
.dr{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;margin-top:40px;align-items:start}
.dr-l .tabs{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--surface-2,#EEF4FA);margin-bottom:12px}
.dr-l .tabs button{border:0;background:transparent;font:inherit;font-size:15px;color:var(--ink-2);padding:8px 16px;border-radius:999px;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.dr-l .tabs button span{font-family:var(--font-mono);font-size:11px;opacity:.7}
.dr-l .tabs button.on{background:#fff;color:var(--head);box-shadow:0 1px 0 var(--line)}
.dr-list{display:flex;flex-direction:column}
.dr-row{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) 18px;gap:14px;align-items:center;padding:16px 4px 16px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.dr-row::before{content:"";position:absolute;left:-16px;top:14px;bottom:14px;width:3px;border-radius:3px;background:linear-gradient(#3079AE,#7ABDED);opacity:0;transition:opacity .2s}
.dr-row .ix{font-family:var(--font-mono);font-size:12px;color:var(--ink-3)}
.dr-row .tx{display:flex;flex-direction:column;gap:2px}
.dr-row .n{font-size:21px;color:var(--head);transition:color .2s}
.dr-row .d{font-size:14px;color:var(--ink-2)}
.dr-row .qm-arrow{color:var(--ink-3);transition:transform .25s, color .2s}
.dr-row.on::before{opacity:1}
.dr-row.on .n{color:var(--core,#3079AE)}
.dr-row.on .qm-arrow{color:var(--core,#3079AE);transform:translateX(4px)}
.dr-r{position:sticky;top:96px}
.dr-view{position:relative;display:block;height:660px;border-radius:24px;overflow:hidden;text-decoration:none;color:inherit;animation:drIn .5s cubic-bezier(.2,.7,.2,1)}
@keyframes drIn{from{transform:scale(.985)}to{transform:none}}
.dr-view .bg{animation:drImg .7s cubic-bezier(.2,.7,.2,1)}@keyframes drImg{from{transform:scale(1.06)}to{transform:none}}
.dr-view .bg,.dr-view .fr{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dr-view .fr{filter:blur(22px) saturate(1.1);transform:scale(1.12);-webkit-mask-image:linear-gradient(to bottom,transparent 35%,#000 70%);mask-image:linear-gradient(to bottom,transparent 35%,#000 70%)}
.dr-view .qw-camrow{left:20px;right:auto;top:20px}
.dr-view .qw-camrow .qw-cam img{width:84px;height:63px}
.dr-view .gl{position:absolute;left:20px;right:20px;bottom:20px;display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding:28px 30px;border-radius:18px;
  background:rgba(255,255,255,.8);backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2);border:1px solid rgba(255,255,255,.7)}
.dr-view .h{font-size:38px;line-height:1.08;letter-spacing:-.015em;color:var(--head)}
.dr-view .by{font-size:17px;line-height:1.45;color:var(--ink-2);max-width:34em}
.dr-view .qm-btn{margin-top:6px;display:inline-flex;gap:8px;align-items:center}
.dr-view .rd{position:absolute;right:20px;top:20px;display:flex;flex-direction:column;align-items:flex-end;gap:4px;padding:14px 18px;border-radius:16px;background:rgba(255,255,255,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.dr-view .rd .qm-mono{font-size:10px}
.dr-view .rd b{font-size:44px;line-height:1;font-weight:500;background:linear-gradient(135deg,#176BBA,#7ABDED);-webkit-background-clip:text;background-clip:text;color:transparent}
.dr-view .rd .qd-word{margin:0}
@media (max-width:960px){.dr{grid-template-columns:1fr}.dr-r{display:none}.dr-row::before{left:-10px}}


.dr-view[hidden],.dr-list[hidden]{display:none}

/* ===== Closing CTA band: one vertical rhythm (2026-10-25) ===== */
.qm-band.qm-band{display:flex;flex-direction:column;align-items:center;text-align:center;padding:96px 56px}
.qm-band.qm-band > *{margin-top:0;margin-bottom:0}
.qm-band.qm-band > .qw-faces{margin-bottom:32px}
.qm-band.qm-band > h2{margin:0}
.qm-band.qm-band > p:not(.qm-micro){margin-top:16px;max-width:40em}
.qm-band.qm-band > .qm-btn{margin-top:32px}
.qm-band.qm-band > .qm-micro{margin-top:16px;font-size:14px}
@media (max-width:860px){.qm-band.qm-band{padding:64px 20px}.qm-band.qm-band > .qm-btn{margin-top:28px}}

/* ===== Graphics after the getdx comp (qg-) ===== */
.qg-ey { display: inline-flex; align-items: center; gap: 8px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: .14em; color: var(--ink-3); }
.qg-sq { width: 7px; height: 7px; border-radius: 2px; background: linear-gradient(117deg, #3079AE, #7ABDED); display: inline-block; }
.qg-hl { fill: none; stroke: var(--line-2); stroke-width: 1; }
.qg-acc { fill: none; stroke: url(#qgg); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qg-node { fill: var(--surface); stroke: var(--line-2); stroke-width: 1; }
.qg-dot { fill: url(#qgg); }
.qg-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: .12em; fill: var(--ink-3); }
.qg-core { fill: var(--surface); stroke: url(#qgg); stroke-width: 2; }
.qg-core-n { font-size: 40px; font-weight: 300; fill: var(--head); }
.qg-core-l { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; letter-spacing: .14em; fill: var(--ink-3); }
.qg-concepts { display: grid; gap: 56px; max-width: 980px; margin: 0 auto; }
.qg-crow { display: grid; grid-template-columns: 220px 1fr; gap: 64px; align-items: center; }
.qg-crow.flip { grid-template-columns: 1fr 220px; } .qg-crow.flip .qg-tile { order: 2; }
.qg-tile { width: 220px; height: 220px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); display: grid; place-items: center; }
.qg-tile-svg { width: 190px; height: 190px; }
.qg-ctext h3 { font-size: 26px; font-weight: 400; color: var(--head); margin: 0 0 10px; }
.qg-ctext p { font-size: 17px; line-height: 1.5; color: var(--ink-2); margin: 0 0 14px; max-width: 460px; }
.qg-hub { max-width: 1000px; margin: 0 auto; } .qg-hub-svg { width: 100%; height: auto; display: block; }
.qg-ring { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: center; max-width: 1080px; margin: 0 auto; }
.qg-ring-svg { width: 100%; height: auto; }
.qg-ql { font-size: 14px; fill: var(--ink-3); } .qg-ql.on { fill: var(--ink); font-size: 15px; }
.qg-ring-side { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.qg-ring-side p { color: var(--ink-2); font-size: 17px; line-height: 1.5; margin: 6px 0 8px; }
.qg-big { font-size: 64px; font-weight: 300; line-height: 1; color: var(--head); }
.qg-split { display: grid; grid-template-columns: 1fr 1.25fr; gap: 64px; align-items: center; max-width: 1080px; margin: 0 auto 64px; }
.qg-split:last-child { margin-bottom: 0; }
.qg-split.flip { grid-template-columns: 1.25fr 1fr; } .qg-split.flip .qg-bl { order: 2; }
.qg-bl { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.qg-boldlead { font-size: 26px; line-height: 1.35; color: var(--ink-3); margin: 0; max-width: 460px; }
.qg-boldlead b { font-weight: 400; color: var(--ink); }
.qg-rank { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 18px 20px; }
.qg-rank-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.qg-sel { font-size: 13px; color: var(--ink-3); border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; } .qg-sel b { font-weight: 400; color: var(--ink); }
.qg-rk { display: grid; grid-template-columns: 28px 1fr 40px 120px; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 10px; opacity: .45; border: 1px solid transparent; }
.qg-rk .n { font-size: 13px; color: var(--ink-3); border: 1px solid var(--line); border-radius: 6px; text-align: center; padding: 2px 0; }
.qg-rk .t { font-size: 15px; color: var(--ink); display: flex; flex-direction: column; } .qg-rk .t small { font-size: 12px; color: var(--ink-3); }
.qg-rk .t i { font-style: normal; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: linear-gradient(117deg, #3079AE, #7ABDED); border-radius: 4px; padding: 2px 6px; margin-left: 8px; vertical-align: 2px; }
.qg-rk b { font-weight: 400; text-align: right; font-variant-numeric: tabular-nums; }
.qg-rk .bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; } .qg-rk .bar i { display: block; height: 100%; background: var(--bandc); border-radius: 3px; }
.qg-rk.you { opacity: 1; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(117deg, #3079AE, #7ABDED) border-box; }
.qg-ui { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 20px; }
.qg-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.qg-stats div { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.qg-stats span { font-size: 12px; color: var(--ink-3); } .qg-stats b { font-size: 28px; font-weight: 300; color: var(--head); } .qg-stats small { font-size: 12px; color: var(--ink-3); }
.qg-spark { width: 100%; height: auto; display: block; }
.qg-ba { display: grid; grid-template-columns: 150px 1fr 32px; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.qg-ba:first-of-type { border-top: 0; margin-top: 8px; }
.qg-ba div { display: flex; flex-direction: column; gap: 4px; } .qg-ba i { display: block; height: 6px; border-radius: 3px; }
.qg-ba i.was, .qg-key i.was { background: var(--line-2); } .qg-ba i.now, .qg-key i.now { background: linear-gradient(90deg, #3079AE, #7ABDED); }
.qg-ba b { font-weight: 400; text-align: right; }
.qg-key { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--ink-3); margin: 10px 0 0; } .qg-key i { width: 14px; height: 6px; border-radius: 3px; display: inline-block; margin-left: 10px; } .qg-key i:first-child { margin-left: 0; }
.qg-navs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.qg-nav { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 22px 20px; color: inherit; text-decoration: none; }
.qg-nav:hover { border-color: var(--core); }
.qg-nav h3 { font-size: 24px; font-weight: 400; color: var(--head); margin: 2px 0 0; } .qg-nav p { font-size: 15px; line-height: 1.45; color: var(--ink-2); margin: 0; min-height: 44px; }
.qg-frag { margin: 10px 0 12px; display: grid; gap: 9px; padding-top: 14px; border-top: 1px solid var(--line); }
.qg-nq { display: grid; gap: 4px; font-size: 12px; color: var(--ink-3); opacity: .7; } .qg-nq.on { color: var(--ink); opacity: 1; }
.qg-nq i { height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; } .qg-nq b { display: block; height: 100%; background: var(--line-2); border-radius: 3px; }
.qg-nq.on b { background: linear-gradient(90deg, #3079AE, #7ABDED); }
.qg-nav .qm-link { margin-top: auto; font-size: 14px; }
.qg-covers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.qg-cover-card { margin: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.qg-cover { background: var(--bg-alt); height: 300px; display: grid; place-items: center; position: relative; }
.qg-cover-k { position: absolute; top: 18px; left: 20px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.qg-cover > b { position: absolute; left: 20px; bottom: 18px; right: 20px; font-size: 19px; font-weight: 400; color: var(--head); line-height: 1.2; }
.qg-cover-art { width: 220px; height: 220px; }
.qg-stripe { stroke: #AFC6DC; stroke-width: 1.2; } .qg-std { stroke-width: 3; }
[data-theme="swap"] .qg-stripe { stroke: rgba(255,255,255,.45); } .qg-notch { stroke: var(--bg-alt); stroke-width: 3; }
.qg-cover-card figcaption { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.qg-cover-card figcaption p { font-size: 18px; color: var(--ink); margin: 0 0 6px; }
[data-theme="swap"] .qg-acc, [data-theme="swap"] .qg-core { stroke: #FFFFFF; }
[data-theme="swap"] .qg-dot, [data-theme="swap"] .qg-sq { fill: #FFFFFF; background: #FFFFFF; }
[data-theme="swap"] .qg-rk.you { background: rgba(255,255,255,.16); border-color: #FFFFFF; }
[data-theme="swap"] .qg-rk .t i { background: #FFFFFF; color: #1E4E70; }
[data-theme="swap"] .qg-ba i.now, [data-theme="swap"] .qg-key i.now, [data-theme="swap"] .qg-nq.on b { background: #FFFFFF; }
[data-theme="swap"] .qg-cover { background: rgba(255,255,255,.08); } [data-theme="swap"] .qg-notch { stroke: #2E8FDA; }
@media (max-width: 960px) {
  .qg-crow, .qg-crow.flip, .qg-split, .qg-split.flip, .qg-ring { grid-template-columns: 1fr; gap: 24px; }
  .qg-crow.flip .qg-tile, .qg-split.flip .qg-bl { order: 0; }
  .qg-navs, .qg-covers { grid-template-columns: 1fr 1fr; }
  .qg-boldlead { font-size: 22px; }
}
.qg-hub-list, .qg-qlist { display: none; }
@media (max-width: 600px) {
  .qg-hub-svg { display: none; }
  .qg-hub-list { display: grid; gap: 18px; }
  .qg-hub-list p { margin: 6px 0 0; font-size: 15px; color: var(--ink-3); padding-left: 14px; border-left: 1px solid var(--line-2); }
  .qg-hub-list p.on { color: var(--ink); border-left: 2px solid var(--core); }
  .qg-hub-mid { display: flex; align-items: baseline; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .qg-hub-mid b { font-size: 48px; font-weight: 300; color: var(--head); } .qg-hub-mid span { font-size: 14px; color: var(--ink-3); }
  .qg-ql { display: none; }
  .qg-qlist { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; padding: 0; margin: 14px 0 0; list-style: none; counter-reset: q; width: 100%; }
  .qg-qlist li { font-size: 13px; color: var(--ink-3); counter-increment: q; } .qg-qlist li::before { content: counter(q) ". "; } .qg-qlist li.on { color: var(--ink); }
}
@media (max-width: 600px) { .qg-rk { grid-template-columns: 24px 1fr 30px 56px; gap: 10px; padding: 10px; } .qg-rank { padding: 14px 12px; } .qg-rank-top { flex-wrap: wrap; gap: 8px; } .qg-navs, .qg-covers, .qg-stats { grid-template-columns: 1fr; } .qg-ba { grid-template-columns: 110px 1fr 28px; } }

/* Slim-down refinements (Oct 27, 2026) */
.ft4-eq .eq { display: grid; grid-template-columns: 1fr 40px 1fr 40px 1fr; align-items: center; gap: 8px; margin-top: 18px; }
.ft4-eq .t { border: 1px solid var(--line); border-radius: 14px; padding: 28px 18px; display: flex; flex-direction: column; gap: 6px; background: var(--surface); }
.ft4-eq .t b { font-size: 22px; font-weight: 400; color: var(--head); } .ft4-eq .t span { font-size: 14px; color: var(--ink-3); }
.ft4-eq .t.res { border-color: transparent; background: linear-gradient(117deg, #3079AE 24%, #7ABDED); } .ft4-eq .t.res b, .ft4-eq .t.res span { color: #fff; }
.ft4-eq .eq > i { font-style: normal; font-size: 26px; color: var(--ink-3); text-align: center; }
[data-theme="swap"] .ft4-eq .t.res { background: #fff; } [data-theme="swap"] .ft4-eq .t.res b, [data-theme="swap"] .ft4-eq .t.res span { color: #1E4E70; }
.qm-stats .src { display: block; margin-top: 6px; font-size: 12px; letter-spacing: .04em; color: var(--ink-3); }
.qr-result { font-size: 15px; color: var(--ink-2); margin: 0 0 14px; }
.qr-num { display: flex; align-items: baseline; gap: 16px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.qr-num b { font-size: 48px; font-weight: 300; color: var(--head); line-height: 1; } .qr-num span { font-size: 15px; color: var(--ink-2); }
.qm-menu .qm-menu-frag { background: none; border: 1px solid var(--line); }
.qm-menu-frag .mf { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 14px; }
.qm-menu-frag .mf span { font-size: 12px; color: var(--ink-3); } .qm-menu-frag .mf > b { font-size: 40px; font-weight: 300; color: var(--head); line-height: 1; }
.qm-menu-frag .mf em { font-style: normal; font-size: 13px; color: var(--ink-2); }
.qm-menu-frag .mf i { display: block; height: 6px; border-radius: 3px; background: var(--surface-2); margin-top: 6px; } .qm-menu-frag .mf i b { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #3079AE, #7ABDED); }
[data-theme="swap"] .qm-menu-frag .mf i b { background: #fff; }
@media (max-width: 760px) { .ft4-eq .eq { grid-template-columns: 1fr; } .ft4-eq .eq > i { padding: 2px 0; } }