/* securellm.ai: this site's own pieces, loaded after the shared kit.
   Everything shared (type, spacing, buttons, header, cards, short answer,
   footer, motion) comes from assets/kit.css; colors come from assets/theme.css.
   This file sets no colors of its own, only theme tokens. Anything here that
   should be on both sites belongs in the kit: ask through
   planning/requests-to-enterprisellm.md. */

/* DIVERGE: alert-use. Amber marks only where things go wrong. */
.eyebrow.alert { color: var(--alert-ink); }

/* Hero: a drawing instead of a photo, so no veil; the glow is this site's own. */
.hero { background: var(--bg); background-image: var(--hero-glow); border-bottom: 1px solid var(--rule); overflow: hidden; }
.hero > .wrap { display: grid; grid-template-columns: 1.35fr 1fr; gap: 48px; align-items: center; padding-top: 88px; padding-bottom: 88px; }
.hero-art { width: 100%; max-width: 420px; justify-self: end; }
.hero-art svg { width: 100%; height: auto; display: block; }
@media (max-width: 900px) {
  .hero > .wrap { grid-template-columns: 1fr; padding-top: 56px; padding-bottom: 56px; }
  .hero-art { max-width: 320px; justify-self: start; }
}
@media (max-width: 640px) { .section { padding: 56px 0; } }

/* The everyday picture, under the short answer */
.picture { background: var(--surface-2); border-radius: var(--radius); padding: 20px 24px; margin-top: 22px; color: var(--ink-2); }

/* The five questions. The lead card is the worry that brings most readers here. */
.q-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.q-card.lead-card { border-color: var(--alert); }
.q-card ul { margin: 4px 0 0; padding-left: 1.1em; color: var(--ink-2); font-size: 1rem; }
.q-card li { margin: 4px 0; }

/* Why it matters: two headline numbers. DIVERGE: chart-emphasis (the number is the risk). */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 34px; }
.stats .stat .num { font-size: clamp(3.6rem, 7vw, 5rem); color: var(--chart-hi); }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr; } }

/* Where information can leak: seven steps, with a reader-paced walk-through.
   (Named leak-step so it doesn't collide with the kit's .step on How it works pages.) */
.leak-steps { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 16px; }
.leak-step {
  display: grid; grid-template-columns: 56px 1fr; gap: 6px 22px; align-items: start;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 24px 26px;
  transition: opacity var(--slow) var(--ease), border-color var(--slow) var(--ease), background-color var(--slow) var(--ease);
}
.leak-step:focus { outline: none; }
.step-num { grid-row: span 4; width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; background: var(--surface-2); color: var(--ink); border: 1px solid var(--rule-strong); }
.leak-step h3 { margin: 0; font-size: 1.25rem; }
.leak-step .does { color: var(--ink-2); margin: 0; font-size: 1.02rem; }
/* DIVERGE: alert-use. The same look as the kit's .callout-risk, sized for a step card. */
.leak-step .risk { margin: 8px 0 0; padding: 12px 16px; border-radius: 10px; background: var(--alert-soft); border-left: 4px solid var(--alert); color: var(--ink); font-size: 1.02rem; }
.leak-step .risk strong { color: var(--alert-ink); }
.leak-step .ask { margin: 8px 0 0; font-size: 1.02rem; color: var(--ink-2); }
.walking .leak-step { opacity: 0.32; }
.walking .leak-step.is-current { opacity: 1; border-color: var(--accent); background: var(--surface-2); }
.walk-controls { display: none; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 22px; position: sticky; bottom: 0; padding: 14px 0; background: linear-gradient(to top, var(--band) 70%, transparent); }
.walking .walk-controls { display: flex; }
.walk-status { font-weight: 700; color: var(--ink-2); margin-left: 6px; }
.steps-link { margin-top: 26px; }

/* Who we are */
.built { grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; }
.built ul { color: var(--ink-2); }
.built aside { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 26px 28px; }
.built aside h3 { font-size: 1.2rem; }
.built aside p { color: var(--ink-2); font-size: 1.02rem; margin: 0; }
@media (max-width: 900px) { .built { grid-template-columns: 1fr; } }

/* Explainer videos come from YouTube (privacy-enhanced embed), not our own
   files. The kit styles .video-figure video; this does the same for the frame. */
.video-frame { aspect-ratio: 16 / 9; background: var(--surface-2); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }