/* ==========================================================================
   Emusary v2 page layer
   Mirrors the design handoff's page-level <style> overrides and replaces
   every inline style from the prototype with classes (the site ships a
   strict CSP with no 'unsafe-inline', so styles must live here).
   Loads AFTER styles.css — order matters for the overrides below.
   ========================================================================== */

/* Element polish the design environment provided globally. */
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
button { cursor: pointer; }

/* Tighten the gap between "01 THE WHY" and "02 ADAPTIVE APPLICATION CONTROL". */
#why { padding-bottom: clamp(52px, 5vw, 80px); }
/* Tighten the gap between "02 ADAPTIVE APPLICATION CONTROL" and "03 SECURE BY DESIGN". */
#aac { padding-bottom: clamp(52px, 5vw, 80px); }

/* 03 Secure by design: two substantive panels instead of the seven-card trust grid. */
#trust .trust-grid { grid-template-columns: 1.06fr 1fr; }
#trust .trust-card { display: flex; flex-direction: column; min-height: 0; padding: 34px; }
#trust .trust-card--lead { grid-row: auto; justify-content: flex-start; }
/* line-height is loosened from .65 so the numeral's ink stays inside its own box. */
#trust .trust-card--lead .trust-card__big { font-size: clamp(132px, 11vw, 200px); line-height: .8; margin: 30px 0 22px; }
#trust .trust-card--lead h3 { margin: 0 0 14px; }
#trust .trust-card:not(.trust-card--lead) h3 { margin: 22px 0 14px; font-size: 30px; }
#trust .trust-card p { max-width: 44em; font-size: 14.5px; line-height: 1.6; }
#trust .section-heading h2 { font-size: clamp(42px, 4.6vw, 82px); }
#trust .section-heading h2 span { display: block; }
@media (min-width: 761px) { #trust .section-heading h2 span { white-space: nowrap; } }
@media (max-width: 1080px) { #trust .trust-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { #trust .section-heading h2 { font-size: clamp(29px, 8.4vw, 46px); } }

.trust-card__more { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--line); }
.trust-card__more h4 { margin: 0 0 10px; color: var(--paper); font-size: 20px; font-weight: 700; letter-spacing: -.03em; }

/* Tighter lead-in above every section's index line; bottom rhythm unchanged. */
.section { padding-top: clamp(40px, 3.6vw, 58px); }
@media (max-width: 760px) { .section { padding-top: 34px; } }

/* The design system's global a:hover (cyan-soft) outranks .button's own color and made the
   label unreadable against the paper fill that wipes in on hover. Pin the on-cyan ink. */
a.button:is(:hover, :focus-visible), a.button:is(:hover, :focus-visible) span, a.button:is(:hover, :focus-visible) b { color: #00110f; }

/* v2: five nav links, keep them on one line and collapse to the menu earlier. */
.nav__links > a:not(.button), .nav .button { white-space: nowrap; }
@media (max-width: 1120px) { .nav__links { gap: 22px; } }
@media (max-width: 940px) {
  .nav-toggle { display: block; }
  .nav__links { position: fixed; inset: var(--header) 0 auto; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 12px 17px 22px; border-bottom: 1px solid var(--line); background: rgba(5, 7, 9, 0.98); }
  .nav__links.is-open { display: flex; }
  .nav__links > a:not(.button) { padding: 17px 6px; border-bottom: 1px solid var(--line); }
  .nav__links .button { margin-top: 14px; }
}

/* v2: app-control bento, ring flourishes aligned along the column seam. */
.bento-card[data-ring="bottom-left"]::after { right: auto; left: -160px; bottom: -160px; top: auto; }
.bento-card[data-ring="top-left"]::after { right: auto; left: -160px; top: -160px; bottom: auto; }

/* v2: research lineage, image band keeps the brand illustration, project index tucks up into it. */
#research { position: relative; background: radial-gradient(circle at 86% 62%, rgba(82, 244, 232, .06), transparent 44%), var(--ink); border-bottom: 1px solid var(--line); }
#research .lineage { min-height: 760px; border-bottom: 0; }
#research .lineage__content { padding-block: clamp(84px, 8vw, 116px) clamp(132px, 11vw, 188px); }
#research .lineage__content h2 { font-size: clamp(56px, 6.4vw, 108px); }
#research .lineage__content > p:not(.kicker) { max-width: 700px; }
#research .lineage__content > p:not(.kicker) + p { margin-top: 20px; font-size: 16px; color: #97a5a7; }
.research-index { position: relative; z-index: 3; margin-top: calc(-1 * clamp(64px, 6vw, 112px)); padding-bottom: clamp(84px, 8vw, 122px); }
.research-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line); }
.project-card { position: relative; display: flex; flex-direction: column; min-height: 306px; padding: 26px 26px 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(6, 10, 13, .93); backdrop-filter: blur(14px); overflow: hidden; }
.project-card--origin { background: radial-gradient(circle at 78% 108%, rgba(82, 244, 232, .13), transparent 62%), rgba(6, 10, 13, .93); }
.project-card__head { display: grid; grid-template-columns: auto 1fr; align-items: center; row-gap: 13px; padding-bottom: 15px; margin-bottom: 22px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.project-card__num { color: var(--cyan); }
.project-card__kind { grid-column: 1 / -1; color: #7c8c8f; white-space: nowrap; }
.project-card__state { justify-self: end; color: #8d9b9d; white-space: nowrap; }
.project-card--origin .project-card__state { color: var(--cyan-soft); }
.project-card h3 { margin: 0; color: var(--paper); font-size: 25px; font-weight: 730; letter-spacing: -.035em; line-height: 1.04; text-wrap: pretty; }
.project-card > p { margin: 15px 0 0; color: #9aa8aa; font-size: 14px; line-height: 1.6; text-wrap: pretty; }
.project-card__foot { margin-top: auto; padding-top: 26px; }
.project-card__repo { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 12px 15px; border: 1px solid var(--line-strong); background: rgba(5, 8, 11, .55); color: #7b8b8e; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: color 180ms cubic-bezier(.2,.7,.2,1), border-color 180ms cubic-bezier(.2,.7,.2,1), background 180ms cubic-bezier(.2,.7,.2,1); }
.project-card__repo b { display: inline-flex; align-items: center; gap: 10px; color: #d3dedf; font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: none; white-space: nowrap; }
.project-card__repo em { font-style: normal; color: var(--cyan); transition: transform 220ms cubic-bezier(.16,1,.3,1); }
.project-card__repo:is(:hover, :focus-visible) { color: var(--cyan-soft); border-color: var(--cyan); background: rgba(5, 8, 11, .8); }
.project-card__repo:is(:hover, :focus-visible) b { color: var(--cyan); }
.project-card__repo:is(:hover, :focus-visible) em { transform: translateX(5px); }
@media (max-width: 1200px) { .research-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
  .research-grid { grid-template-columns: 1fr; }
  .project-card { min-height: 0; }
}

/* v2: status indicator dots removed site-wide. */
.pulse-dot,
.kicker i,
.hero__ticker i,
.trace__topbar i,
.incident-ui__bar i,
.story-visual__top i { display: none; }

/* 04 The team: display headline, fuller intro copy, two substantive founder cards. */
#team .team__intro h2 { max-width: 15em; font-weight: 730; letter-spacing: -.062em; line-height: .95; text-transform: uppercase; }
#team .team__intro p { max-width: 44em; font-size: 14.5px; line-height: 1.62; }
#team .team__intro p + p { margin-top: 16px; }
/* Initials squares removed 2026-08-04: collapse the avatar column at every breakpoint
   (outranks the 92px/70px grids in styles.css). */
#team .person-card { grid-template-columns: 1fr; padding: 36px 0; align-items: start; }
#team .person-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
#team .person-card__head::after { content: ""; flex: 1; min-width: 24px; height: 1px; background: var(--line); }
#team .person-card__alias { color: var(--cyan); font-family: var(--mono); font-size: var(--micro-compact); font-weight: 700; letter-spacing: .09em; }
#team .person-card h3 { margin: 12px 0 12px; font-size: 30px; }
#team .person-card div > span { max-width: 44em; line-height: 1.62; }
#team .person-card__credits { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
#team .person-card__credits li { padding: 7px 11px; border: 1px solid var(--line); color: #a9b6b7; font-family: var(--mono); font-size: var(--micro-compact); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 760px) { #team .person-card h3 { font-size: 26px; } }

/* --------------------------------------------------------------------------
   Hero title (was inline on the h1 in the prototype)
   -------------------------------------------------------------------------- */
.hero h1 { font-size: clamp(44px, 3.9vw, 70px); word-spacing: 0.12em; }
.hero h1 span { white-space: normal; }
.hero h1 span.hero__line--nowrap { white-space: nowrap; }
.hero h1 span.hero__line--accent { color: #52f4e8; text-shadow: 0 0 40px rgba(82, 244, 232, 0.22); }

.trace__topbar span { white-space: nowrap; }

/* --------------------------------------------------------------------------
   Hero: user action context panel (was inline-styled in the prototype)
   -------------------------------------------------------------------------- */
.ctx-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 26px;
  padding: 24px 20px;
  background:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 24px 24px;
}

.ctx-feed { display: grid; gap: 5px; align-content: space-between; }

.ctx-event {
  display: grid;
  grid-template-columns: 76px 80px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 14px 12px;
  border: 1px solid transparent;
}
.ctx-event--flag { position: relative; border-color: rgba(255,96,79,.25); background: rgba(255,96,79,.04); }
.ctx-event--review { border-color: rgba(82,244,232,.18); background: rgba(82,244,232,.04); }
.ctx-event--approve { position: relative; border-color: rgba(114,240,142,.25); background: rgba(114,240,142,.04); }

.ctx-event time { color: #657578; font-family: var(--mono); font-size: 9px; }
.ctx-event__tag { color: #657578; font-family: var(--mono); font-size: 9px; letter-spacing: .07em; }
.ctx-event__tag--danger { color: #ff604f; }
.ctx-event__tag--cyan { color: #52f4e8; }
.ctx-event__tag--safe { color: #72f08e; }

.ctx-event p { margin: 0; color: #aab8ba; font-size: 12.5px; }
.ctx-event--flag p, .ctx-event--approve p { color: #eef8f7; }
.ctx-event--review p { font-family: var(--mono); font-size: 9.5px; }
.ctx-event p b { font-family: var(--mono); font-weight: 500; font-size: 11.5px; color: #cbd7d8; }
.ctx-event--review p b { font-family: inherit; font-weight: 700; font-size: inherit; color: #52f4e8; }

.ctx-cards { display: grid; grid-template-rows: 1fr 1fr; gap: 14px; }
.ctx-card { display: grid; grid-template-rows: auto 1fr; border: 1px solid rgba(82,244,232,.28); background: rgba(5,8,11,.85); }
.ctx-card--approve { border-color: rgba(114,240,142,.3); }
.ctx-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid rgba(224,255,251,.13); }
.ctx-card__title { color: #ff604f; font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }
.ctx-card--approve .ctx-card__title { color: #52f4e8; }
.ctx-card__meta { color: #657578; font-family: var(--mono); font-size: 7px; }
.ctx-card__body { display: grid; gap: 12px; align-content: center; padding: 14px; }
.ctx-card__badge { display: grid; place-items: center; height: 44px; border: 1px solid rgba(82,244,232,.7); background: #040608; color: #52f4e8; font-family: var(--mono); font-size: 10.5px; letter-spacing: .11em; }
.ctx-card--approve .ctx-card__badge { border-color: rgba(114,240,142,.6); color: #72f08e; }
.ctx-card__body p { margin: 0; color: #8d9c9e; font-size: 11.5px; }

.ctx-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }

.ctx-footline { position: relative; z-index: 2; padding: 16px 20px 20px 30px; border-top: 1px solid rgba(224,255,251,.13); }
.ctx-footline strong { display: block; font-size: 21px; letter-spacing: -.02em; }

/* Not in the prototype (it was desktop-only): stack the context panel on
   small screens so the feed stays legible. The connector wires detect the
   stacked geometry and simply don't draw. */
@media (max-width: 700px) {
  .ctx-grid { grid-template-columns: 1fr; }
  .ctx-cards { grid-template-rows: none; }
}

/* --------------------------------------------------------------------------
   02 Adaptive Application Control heading + rotator (was inline)
   -------------------------------------------------------------------------- */
h2.aac-heading { margin: 0; font-size: clamp(38px, 3.6vw, 62px); font-weight: 760; letter-spacing: -.06em; line-height: .92; text-transform: uppercase; }
.aac-heading__line { display: block; }
.aac-heading__lockup { display: flex; align-items: baseline; gap: .3em; white-space: nowrap; }
.aac-heading__static { color: #eef8f7; }

.rotator { position: relative; display: inline-block; color: #52f4e8; white-space: nowrap; }
.rotator__sizer { display: block; visibility: hidden; white-space: nowrap; }
.rotator__slot { position: absolute; inset: 0; display: block; white-space: nowrap; text-shadow: 0 0 40px rgba(82, 244, 232, 0.22); }
.rotator__next { position: absolute; inset: 0; display: block; white-space: nowrap; clip-path: inset(-20% 100% -20% 0%); text-shadow: 0 0 40px rgba(82, 244, 232, 0.22); }
.rotator__band { position: absolute; top: -0.08em; bottom: -0.04em; left: 0; width: 3px; background: #b5fff8; opacity: 0; box-shadow: 0 0 18px rgba(82, 244, 232, 0.85), 0 0 46px rgba(82, 244, 232, 0.45); pointer-events: none; }

/* Not in the prototype: let the lockup wrap on small screens instead of clipping. */
@media (max-width: 940px) {
  .aac-heading__lockup { flex-wrap: wrap; white-space: normal; }
}
@media (max-width: 760px) {
  h2.aac-heading { font-size: clamp(29px, 8.4vw, 46px); }
}

/* --------------------------------------------------------------------------
   Bento columns + approval record card (was inline)
   -------------------------------------------------------------------------- */
.bento__col { display: flex; flex-direction: column; gap: 14px; }
/* Heading + paragraph only, no head strip: drop the 370px/430px bento floor and the
   48px h3 offset that clears that strip, so these hug their copy with even padding. */
.bento-card--tight { min-height: 0; }
.bento-card--tight > h3:first-child { margin-top: 0; }
.bento-card--stack { display: flex; flex-direction: column; }
.bento-card--fill { flex: 1; display: flex; flex-direction: column; }
.incident-ui--bento { flex: 1; display: flex; flex-direction: column; margin-top: 0; }
.incident-ui--bento .rule-stack { margin-top: 0; }
.incident-ui__summary span.incident-ui__summary-note { color: #b5fff8; }

/* Two-column layout only: dissolve the column wrappers so all four cards become items of
   .bento itself, which puts both --tight cards in row 1 and sizes that row to the taller
   of the two. Column-major flow maps the existing DOM order onto the same cells it holds
   today. Below 1081px styles.css collapses .bento to one column, where the flex wrappers
   must survive to keep the stacked order (card, record, card, compare). */
@media (min-width: 1081px) {
  .bento { grid-auto-flow: column; grid-template-rows: auto 1fr; }
  .bento__col { display: contents; }
}

/* Static allowlist vs adaptive control comparison table (was inline) */
.compare-wrap { position: relative; margin-top: auto; padding-top: 30px; }
.compare { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); background: #06090b; font-family: var(--mono); }
.compare > * { border-bottom: 1px solid var(--line); }
.compare > :nth-child(odd) { border-right: 1px solid var(--line); }
.compare > :nth-last-child(-n+2) { border-bottom: 0; }
.compare__head { display: flex; align-items: center; gap: 7px; padding: 10px 12px; font-size: 8px; letter-spacing: .11em; color: #ff604f; }
.compare__head--good { color: #72f08e; }
.compare__cell { padding: 13px 12px; font-size: 10.5px; line-height: 1.5; color: #667679; }
.compare__cell--good { color: #cbd7d8; }