/* ==========================================================================
   il.css — /intelligence-layer, the one dark page on cloutly.com.
   Two jobs. (1) Restyle the shared chrome (header, footer, Closing, Testimonial, the v2 hero ground) for this page only:
   every rule is scoped to html.il-dark so nothing leaks. Header.astro, Footer.astro, Closing.astro, Base.astro and the
   shared stylesheets are never edited. (2) The page's own sections: the "Where it's happening" compare reveal (the two
   grids stacked in one box, driven by public/js/il.js), the Decide queue, executive reporting, what it listens for.
   Loads after ask-hero.css.
   Palette per the brief: ground #0F0D19, raised #17152A / #1E1B33, hairline rgba(255,255,255,.08), text #F2F5FF,
   muted #A9ADC4 (8.7:1 on the ground), blue lifted to #5B86FF for text with #003DFF kept for fills, pink #FF416A,
   violet #9B8BFF. Nothing in a mock is smaller than 13px.
   ========================================================================== */

html.il-dark {
  --il-ground: #0F0D19;
  --il-s1: #17152A;
  --il-s2: #1E1B33;
  --il-line: rgba(255, 255, 255, .08);
  --il-line-2: rgba(255, 255, 255, .14);
  --il-text: #F2F5FF;
  --il-mute: #A9ADC4;
  --il-blue: #5B86FF;
  --il-pink: #FF416A;
  --il-violet: #9B8BFF;
  --il-warm: #FFC15E;
  --il-good: #5FD6A4;
  color-scheme: dark;
}

/* ---------- the ground ---------- */
html.il-dark body { background: var(--il-ground); color: var(--il-text); }
html.il-dark.v2 main { color: var(--il-text); }
html.il-dark .v2-hero { background: var(--il-ground); }
html.il-dark.v2 .h,
html.il-dark .v2-hero h1 { color: var(--il-text); }
html.il-dark.v2 .sub { color: var(--il-mute); }
html.il-dark.v2 .sub strong { color: var(--il-text); }
html.il-dark .v2-hero .fine { color: var(--il-mute); }
html.il-dark .v2-hero .fine b { color: var(--il-text); }
html.il-dark :focus-visible { outline-color: var(--il-blue); }
html.il-dark.v2 .btn--ink { background: #fff; color: #0F0D19; }
html.il-dark.v2 .btn--ink:hover { background: var(--il-text); }

/* ---------- header ---------- */
html.il-dark .site-header::before { background: rgba(15, 13, 25, .78); box-shadow: 0 1px 0 var(--il-line); }
html.il-dark .site-header.is-stuck::before { -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }
/* no light wordmark file exists in public/images, so the blue mark is knocked out to white */
html.il-dark .brand img, html.il-dark .ft-logo img { filter: brightness(0) invert(1); }
html.il-dark .nav-link { color: var(--il-text); }
html.il-dark .nav-item[data-open="true"] .nav-link { color: var(--il-blue); }
html.il-dark .nav-glow { background: rgba(255, 255, 255, .1); }
html.il-dark .nav-login { color: var(--il-text); }
html.il-dark .nav-login:hover { background: rgba(255, 255, 255, .1); }
/* the trial button stays ink on white: it is the one thing in the bar that must read at a glance */
html.il-dark .nav-cta { background: #fff; color: #0F0D19; }
html.il-dark .nav-cta i { background: rgba(15, 13, 25, .1); }
html.il-dark .nav-cta:hover { background: var(--il-text); color: #0F0D19; }
html.il-dark .nav-cta:hover i { background: rgba(15, 13, 25, .16); }
html.il-dark .nav-toggle { background: rgba(255, 255, 255, .1); }
html.il-dark .nav-toggle span { background: var(--il-text); }

/* the mobile sheet: the brand sits above it, and the wordmark is white now, so the sheet has to be dark or it vanishes */
@media (max-width: 991px) {
  html.il-dark .nav { background: var(--il-ground); }
  html.il-dark .nav-list > li + li { border-top-color: var(--il-line); }
  html.il-dark .panel { background: transparent; }
  html.il-dark .panel-col h3 { color: var(--il-mute); }
  html.il-dark .p-link strong { color: var(--il-text); }
  html.il-dark .p-link span, html.il-dark .p-ico { color: var(--il-mute); }
  html.il-dark .p-link:hover { background: rgba(255, 255, 255, .07); }
  html.il-dark .p-link:hover strong, html.il-dark .p-link:hover .p-ico { color: var(--il-blue); }
  html.il-dark .nav-sheet-actions .a-login { background: rgba(255, 255, 255, .1); color: var(--il-text); }
  html.il-dark .nav-sheet-actions .a-start { background: #fff; color: #0F0D19; }
}

/* ---------- footer ---------- */
html.il-dark .ft { background: var(--il-ground); border-top-color: var(--il-line); }
html.il-dark .ft-line { color: var(--il-mute); }
html.il-dark .ft-line em { color: var(--il-text); }
html.il-dark .ft-social a { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--il-line); }
html.il-dark .ft-social a:hover { background: rgba(255, 255, 255, .12); }
html.il-dark .ft-social img { filter: brightness(0) invert(1); opacity: .82; }
html.il-dark .ft-x { color: var(--il-text); }
html.il-dark .ft-col h3 { color: var(--il-text); }
html.il-dark .ft-col a { color: var(--il-mute); }
html.il-dark .ft-col a:hover { color: var(--il-blue); }
html.il-dark .ft-bottom { border-top-color: var(--il-line); }
html.il-dark .ft-legal { color: var(--il-mute); }
html.il-dark .ft-legal a { color: var(--il-mute); }
html.il-dark .ft-legal a:hover { color: var(--il-text); }

/* ---------- the enterprise Closing panel, and the big quote ---------- */
html.il-dark.v2 .close-panel { background: var(--il-s1); box-shadow: inset 0 0 0 1px var(--il-line); }
html.il-dark.v2 .close-lead, html.il-dark.v2 .close-fine, html.il-dark.v2 .close-facts, html.il-dark.v2 .close-alt { color: var(--il-mute); }
html.il-dark.v2 .close-fine b, html.il-dark.v2 .close-facts b { color: var(--il-text); }
html.il-dark.v2 .close-facts { border-top-color: var(--il-line); }
html.il-dark.v2 .close-alt a { color: var(--il-text); text-decoration-color: rgba(255, 255, 255, .35); }
html.il-dark.v2 .close-alt a:hover { color: var(--il-blue); }
html.il-dark .tq blockquote p { color: var(--il-text); }
html.il-dark .tq figcaption { border-top-color: var(--il-line); }
html.il-dark .tq-name { color: var(--il-text); }
html.il-dark .tq-role { color: var(--il-mute); }

/* ---------- the Ask hero and its deck, on dark ---------- */
/* the white pill is the brightest thing on the page, which is right; everything around it goes dark */
/* the aurora blooms rather than washes on dark: bg swapped to the ground, gain 1.1 on the element, canvas lifted to .8 */
html.il-dark .ask-hero .blob-canvas.is-loaded { opacity: .8; }
html.il-dark .ask-bar { box-shadow: 0 18px 60px -14px rgba(91, 134, 255, .5); }
html.il-dark .ask-glow::before { filter: blur(10px); opacity: .8; }
html.il-dark .ask-glow::after { opacity: .95; }
html.il-dark .ask-glow:focus-within { box-shadow: 0 0 0 3px rgba(91, 134, 255, .45); }
html.il-dark .ask-deck:focus-visible { outline-color: var(--il-blue); }
/* the card surface lifts one step per card of depth, so the two behind show as a lighter edge above the top one
   rather than as three panels. --d is the depth the script writes on each card: 0 on top, then 1 and 2. */
html.il-dark .deck-card {
  background: rgb(calc(23 + var(--d) * 15) calc(21 + var(--d) * 14) calc(42 + var(--d) * 16) / .95);
  box-shadow: 0 0 0 1px var(--il-line), 0 40px 90px -50px rgba(0, 0, 0, .9);
}
html.il-dark .deck-card:not(.is-top) { box-shadow: 0 0 0 1px var(--il-line-2); }
html.il-dark .deck-q { color: var(--il-text); }
html.il-dark .deck-a { color: #DFE3F5; }
html.il-dark .deck-a b { color: var(--il-text); }
html.il-dark .deck-ev li { border-top-color: var(--il-line); color: var(--il-mute); }
html.il-dark .deck-ev b { color: var(--il-text); font-weight: 500; }
html.il-dark .deck-quote { border-left-color: rgba(91, 134, 255, .5); color: #CBD1E8; }
html.il-dark .deck-quote cite { color: var(--il-mute); }
html.il-dark .deck-cap { color: var(--il-mute); }
html.il-dark .deck-nav span { color: var(--il-mute); }
html.il-dark .deck-nav button { background: rgba(255, 255, 255, .08); color: var(--il-text); }
html.il-dark .deck-nav button:hover { background: #fff; color: #0F0D19; }
html.il-dark .deck-nav button:focus-visible { outline-color: var(--il-blue); }
html.il-dark .ask-note { color: var(--il-mute); }

/* ---------- page sections ---------- */
.il-sec { position: relative; }
.il-sec .il-head { max-width: 760px; }
.il-sec .il-head .sub { margin-top: 14px; }
.il-invented { max-width: 860px; margin-top: 14px; font: 400 13.5px/1.55 var(--font-body); color: var(--il-mute); }
.il-invented b { color: var(--il-text); font-weight: 600; }

/* the mock shell: one screen per section, never a grid of same-size cards */
.il-mock { margin-top: 28px; border-radius: 20px; background: var(--il-s1); box-shadow: inset 0 0 0 1px var(--il-line), 0 40px 90px -60px #000; overflow: hidden; }
.il-mock-bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 18px; padding: 15px 20px; border-bottom: 1px solid var(--il-line); }
.il-mock-bar h3 { font: 500 20px/1.25 var(--font-serif); color: var(--il-text); }
.il-mock-bar .il-meta { font: 500 13px/1.4 var(--font-display); color: var(--il-mute); font-variant-numeric: tabular-nums; }
.il-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--il-line); }
.il-seg span { padding: 5px 12px; border-radius: 999px; font: 500 13px/1.3 var(--font-display); color: var(--il-mute); }
.il-seg span.is-on { background: #fff; color: #0F0D19; }
.il-body { padding: 18px 20px 20px; }
.il-foot { padding: 0 20px 18px; display: grid; gap: 5px; }
.il-foot p { margin: 0; font: 400 13px/1.5 var(--font-body); color: var(--il-mute); }

/* ---------- "Where it's happening": the compare reveal ----------
   Both grids sit in one grid cell, so the box takes the height of the taller and the reveal can never jump. The layer
   underneath is By classification; the layer on top is By location, clipped from the divider rightwards, so dragging
   left uncovers it. --rx is the divider position: il.js writes it, and the 50% default below is the still state under
   ?ix=off, reduced motion or no JS at all. The box, not the page, is the horizontal scroller at phone widths. */
.il-rev { --rx: 50%; display: grid; overflow-x: auto; overscroll-behavior-x: contain; }
.il-rev-stack, .il-rev-div { grid-area: 1 / 1; display: grid; min-width: 660px; }
.il-rev-layer { grid-area: 1 / 1; padding: 14px 20px 20px; }
/* the top layer carries its own ground, one step lighter than the box, so the two halves read as two surfaces meeting
   at the divider rather than as one wide table */
.il-rev-layer.is-after { clip-path: inset(0 0 0 var(--rx)); background: var(--il-s2); }
/* the side label is inside its own layer, so it clips with that layer instead of floating over the box */
.il-rev-tag { display: table; margin: 0 0 12px; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px var(--il-line-2); font: 500 13px/1.35 var(--font-display); color: var(--il-text); white-space: nowrap; }
.il-rev-tag.is-right { margin-left: auto; }
.il-rev-div { position: relative; pointer-events: none; }
.il-rev-line { position: absolute; top: 0; bottom: 0; left: var(--rx); width: 2px; margin-left: -1px; background: #fff; pointer-events: auto; cursor: ew-resize; }
.il-rev-handle { position: absolute; top: 50%; left: var(--rx); transform: translate(-50%, -50%); display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 6px 20px -4px rgba(0, 0, 0, .65); cursor: ew-resize; pointer-events: auto; touch-action: none; }
.il-rev-handle:focus-visible { outline: 2px solid var(--il-blue); outline-offset: 3px; }
.il-rev.is-dragging { cursor: ew-resize; user-select: none; }

/* the theme x month grid */
.il-scroll { overflow-x: auto; }
.il-tg { display: grid; grid-template-columns: 152px 118px repeat(6, minmax(46px, 1fr)); min-width: 620px; font-variant-numeric: tabular-nums; }
.il-tg > * { padding: 7px 4px; }
.il-tg .tg-h { font: 500 13px/1.3 var(--font-display); color: var(--il-mute); text-align: center; border-bottom: 1px solid var(--il-line); }
.il-tg .tg-h.tg-rowh { text-align: left; }
.il-tg .tg-h.tg-firsth { text-align: left; padding-left: 0; }
.il-tg .tg-rowh { font: 500 13px/1.35 var(--font-display); color: var(--il-text); text-align: left; padding-left: 0; padding-right: 10px; }
.il-tg .tg-c { display: grid; place-items: center; font: 500 13px/1.3 var(--font-display); color: var(--il-text); }
.il-tg .tg-c i { display: grid; place-items: center; width: 100%; padding: 5px 0; border-radius: 6px; font-style: normal; background: rgba(255, 65, 106, calc(var(--t) * .75)); }
.il-tg .tg-s { display: flex; align-items: center; gap: 7px; justify-content: flex-start; padding-left: 0; }
.il-tg .tg-s svg { flex: none; }
.il-tg .tg-tag { font: 500 13px/1.3 var(--font-display); white-space: nowrap; color: var(--il-mute); }
.il-tg .tg-tag.is-worse { color: #FF8AA4; }
.il-tg .tg-tag.is-better { color: #7FE0BA; }
.il-tg .tg-row-line { grid-column: 1 / -1; height: 1px; padding: 0; background: var(--il-line); }

/* the locations x themes matrix. Both layers of the reveal share one min-width so the divider means the same thing on
   either side of it, which is why the column track here is tighter than the grid it replaced. */
.il-vg { display: grid; grid-template-columns: repeat(4, minmax(58px, 1fr)) 62px 154px; min-width: 620px; font-variant-numeric: tabular-nums; }
.il-vg > * { padding: 7px 5px; }
.il-vg .vg-h { font: 500 13px/1.3 var(--font-display); color: var(--il-mute); text-align: center; align-self: end; border-bottom: 1px solid var(--il-line); }
.il-vg .vg-h.vg-last { text-align: right; padding-right: 0; }
.il-vg .vg-name { display: flex; justify-content: flex-end; align-items: center; font: 500 13px/1.35 var(--font-display); color: var(--il-text); text-align: right; padding-right: 0; }
.il-vg .vg-c { display: grid; place-items: center; font: 500 13px/1.3 var(--font-display); color: var(--il-text); }
.il-vg .vg-c i { display: grid; place-items: center; width: 100%; padding: 5px 0; border-radius: 6px; font-style: normal; background: rgba(255, 65, 106, calc(var(--t) * .75)); }
.il-vg .vg-rev { display: grid; place-items: center; font: 500 13px/1.3 var(--font-display); color: var(--il-mute); }
.il-vg .vg-line { grid-column: 1 / -1; height: 1px; padding: 0; background: var(--il-line); }

/* Decide: three things per card, nothing else. The headline is the signal in the guest's words. */
.il-card { padding: 20px 0; border-top: 1px solid var(--il-line); }
.il-card:first-child { border-top: 0; padding-top: 4px; }
.il-card h4 { max-width: 34ch; font: 500 clamp(19px, 1.6vw, 22px)/1.3 var(--font-serif); color: var(--il-text); text-wrap: pretty; }
.il-spark { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.il-spark span { font: 400 13px/1.3 var(--font-body); color: var(--il-mute); }
.il-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.il-btns i { padding: 6px 12px; border-radius: 999px; font: 500 13px/1.4 var(--font-display); font-style: normal; color: var(--il-text); background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--il-line-2); }
.il-btns i.is-primary { background: #fff; color: #0F0D19; box-shadow: none; }

/* executive reporting */
/* one screen since the monthly report document was cut; the wrapper survives for its top margin */
.il-exec { margin-top: 28px; }
.il-exec .il-mock { margin-top: 0; }
.il-rag { display: grid; gap: 16px; }
.il-rag section { padding: 0; }
.il-rag h4 { display: flex; align-items: center; gap: 9px; font: 600 14px/1.3 var(--font-display); color: var(--il-text); }
.il-rag h4 i { width: 9px; height: 9px; border-radius: 50%; }
.il-rag .r i { background: var(--il-pink); }
.il-rag .a i { background: var(--il-warm); }
.il-rag .g i { background: var(--il-good); }
.il-rag ul { display: grid; gap: 7px; margin: 9px 0 0; padding: 0; list-style: none; }
.il-rag li { font: 400 13.5px/1.5 var(--font-body); color: var(--il-mute); font-variant-numeric: tabular-nums; }
.il-rag li b { display: block; color: var(--il-text); font-weight: 500; }
.il-verts { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.il-verts li { padding: 9px 15px; border-radius: 999px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--il-line); font: 500 15px/1.35 var(--font-display); color: var(--il-text); }
.il-verts li.is-yours { background: rgba(155, 139, 255, .16); box-shadow: inset 0 0 0 1px rgba(155, 139, 255, .38); }
.il-dish { display: grid; grid-template-columns: minmax(0, 1fr) 96px 214px 76px; gap: 12px 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--il-line); font-variant-numeric: tabular-nums; }
.il-dish:first-of-type { border-top: 0; }
.il-dish .d-n { font: 500 14.5px/1.35 var(--font-body); color: var(--il-text); }
.il-dish .d-n span { display: block; margin-top: 3px; font: 400 13px/1.4 var(--font-body); color: var(--il-mute); }
.il-dish .d-m { font: 400 13px/1.4 var(--font-body); color: var(--il-mute); }
.il-dish .d-bar { display: grid; gap: 5px; }
.il-dish .d-bar i { display: block; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, .09); }
.il-dish .d-bar i b { display: block; height: 100%; border-radius: 999px; background: var(--il-blue); }
.il-dish .d-bar span { font: 500 13px/1.3 var(--font-display); color: var(--il-text); }
.il-dish .d-d { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font: 600 13px/1.3 var(--font-display); color: var(--il-good); }
.il-dish .d-d.is-down { color: #FF8AA4; }

/* ---------- responsive ---------- */
@media (max-width: 991px) {

}
@media (max-width: 767px) {
  .il-mock { border-radius: 16px; }
  .il-mock-bar { padding: 14px 16px; }
  .il-body { padding: 14px 16px 16px; }
  .il-foot { padding-left: 16px; padding-right: 16px; }
  .il-rev-layer { padding: 12px 16px 16px; }
  .il-dish { grid-template-columns: minmax(0, 1fr) 74px; gap: 8px 12px; }
  .il-dish .d-bar { grid-column: 1 / -1; }
  .il-dish .d-m { grid-column: 1 / -1; }
}