/* enterprise.css — page-specific layout for /enterprise (the white-label page).
 *
 * Loaded AFTER site.css, which provides the tokens, base reset, shared nav,
 * footer, buttons, theme-toggle, and mobile nav. EVERY rule here is scoped under
 * `body.ent`, so this file cannot affect index/security/legal pages, and it
 * reuses site.css for chrome. It ports the redesign's section layouts (asymmetric
 * hero + brand-panel, even feature grid, editorial "we sign the engine" rows,
 * numbered "safe to put your name on" rows, asymmetric final CTA) in var(--token)
 * only, so the theme toggle drives everything.
 *
 * Dark is the signed-off default. The deliberate light palette lives in one block
 * at the bottom (:root[data-theme="light"] .ent) with its OWN chosen values, the
 * same first-class, WCAG-AA palette as the homepage, not a reuse of the dark
 * tokens. Scroll-reveal mirrors the homepage: hidden only under html.js, so with
 * JS off the page is fully visible, and gated behind prefers-reduced-motion.
 */

/* ---- neutralise site.css element selectors inside this page's scope ----
   site.css sets `section{padding:100px 32px}` and `.hero{padding:100px 32px 120px}`;
   the redesign manages its own padding via each section's -inner wrapper. */
.ent section { padding: 0; }
.ent .hero { padding: 0; }

.ent .mono { font-family: var(--font-mono); }

/* eyebrow: mono lower-case label with the breathing encryption tick
   (overrides site.css's upper-case .eyebrow) */
.ent .eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: none;
  color: var(--paper-mute); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 0; font-weight: 400; }
.ent .eyebrow .tick { width: 7px; height: 7px; border-radius: 50%; background: var(--signal);
  box-shadow: 0 0 10px var(--signal); display: inline-block; flex-shrink: 0; }

/* ---- HERO: asymmetric, claim left + branded-page proof right ---- */
.ent .hero { position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line); background: none; text-align: left; }
.ent .hero::before { content: ''; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(130% 90% at 82% -10%, color-mix(in srgb, var(--signal) 12%, transparent) 0%, transparent 52%); }
.ent .hero::after { content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(100% 75% at 84% 6%, black 0%, transparent 62%);
  mask-image: radial-gradient(100% 75% at 84% 6%, black 0%, transparent 62%); }
.ent .hero-inner { max-width: var(--max-w); margin: 0 auto; padding: 92px 40px 100px;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 60px; align-items: center; text-align: left; }
.ent .hero-copy { max-width: 560px; }
.ent .hero .eyebrow { margin-bottom: 28px; }
.ent .hero h1 { font-size: clamp(42px, 5vw, 72px); font-weight: 600; line-height: 1.0; letter-spacing: -0.035em; color: var(--paper); margin: 0 0 26px; animation: none; }
.ent .hero h1 .accent { color: var(--signal); }
.ent .hero .lede { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: var(--paper-dim); margin: 0 0 34px; max-width: 480px; animation: none; }
.ent .hero .lede strong { color: var(--paper); font-weight: 500; }
.ent .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-start; margin-bottom: 0; animation: none; }

/* branded-page proof panel: a generic page that IS the client's */
.ent .brandpanel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ent .bp-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.ent .bp-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.ent .bp-url { margin-left: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--signal); }
.ent .bp-body { padding: 26px 22px 28px; }
.ent .bp-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.ent .bp-logo .glyph { width: 30px; height: 30px; border-radius: 7px; background: var(--signal); display: flex; align-items: center; justify-content: center; color: var(--ink); font-weight: 700; font-size: 16px; }
.ent .bp-logo .name { font-weight: 600; font-size: 16px; letter-spacing: -0.01em; color: var(--paper); }
.ent .bp-drop { border: 1px dashed var(--line-strong); border-radius: 10px; padding: 28px 18px; text-align: center; color: var(--paper-mute); font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ent .bp-drop i { font-size: 22px; color: var(--paper-dim); }
.ent .bp-cta { margin-top: 14px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; background: var(--signal); color: var(--ink); }
.ent .bp-foot { margin-top: 16px; font-family: var(--font-mono); font-size: 10.5px; color: var(--paper-mute); display: flex; align-items: center; justify-content: center; gap: 7px; }
.ent .bp-foot .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 8px var(--signal); }

/* ---- EXPLAINER VIDEO (real iframe to /media/) ---- */
.ent .explainer { border-bottom: 1px solid var(--line); background: var(--surface); }
.ent .explainer-inner { max-width: var(--max-w); margin: 0 auto; padding: 80px 40px; }
.ent .explainer-top { max-width: 600px; margin-bottom: 36px; }
.ent .explainer-top h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 600; letter-spacing: -0.025em; color: var(--paper); margin: 14px 0 0; line-height: 1.12; }
.ent .video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--ink); }
.ent .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* ---- WHAT YOU GET: even 3x2 feature grid, one accent ---- */
.ent .features { border-bottom: 1px solid var(--line); }
.ent .features-inner { max-width: var(--max-w); margin: 0 auto; padding: 96px 40px; }
.ent .features-top { max-width: 640px; margin-bottom: 52px; }
.ent .features-top h2 { font-size: clamp(30px, 3.6vw, 46px); font-weight: 600; line-height: 1.1; letter-spacing: -0.025em; color: var(--paper); margin: 14px 0 16px; max-width: none; }
.ent .features-top p { font-size: 17px; color: var(--paper-dim); margin: 0; max-width: none; }
.ent .fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ent .feat { background: var(--ink); padding: 30px 26px; transition: background 200ms ease, transform 200ms ease; }
.ent .feat:hover { background: var(--surface); transform: translateY(-2px); }
.ent .feat.accent-feat { background: var(--surface); position: relative; }
.ent .feat.accent-feat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--signal); }
.ent .feat i { color: var(--signal); font-size: 22px; }
.ent .feat h3 { font-size: 18px; font-weight: 500; letter-spacing: -0.015em; color: var(--paper); margin: 16px 0 8px; }
.ent .feat p { font-size: 14.5px; color: var(--paper-mute); margin: 0; line-height: 1.6; }
.ent .feat .code { font-family: var(--font-mono); font-size: 13px; color: var(--paper-dim); }

/* ---- POWERED BY / WE SIGN THE ENGINE: editorial split + 3 rows ---- */
.ent .signed { border-bottom: 1px solid var(--line); background: var(--surface); }
.ent .signed-inner { max-width: var(--max-w); margin: 0 auto; padding: 96px 40px; }
.ent .signed-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 56px; }
.ent .signed-head h2 { font-size: clamp(30px, 3.6vw, 46px); font-weight: 600; line-height: 1.08; letter-spacing: -0.025em; color: var(--paper); margin: 14px 0 0; max-width: none; }
.ent .signed-head p { font-size: 17px; color: var(--paper-dim); margin: 0; max-width: none; }
.ent .signed-rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ent .srow { background: var(--ink); padding: 30px 26px; }
.ent .srow .n { font-family: var(--font-mono); font-size: 12px; color: var(--signal); margin-bottom: 16px; display: flex; align-items: center; gap: 9px; }
.ent .srow .n::before { content: ''; width: 20px; height: 1px; background: var(--signal); }
.ent .srow h3 { font-size: 19px; font-weight: 500; letter-spacing: -0.015em; color: var(--paper); margin: 0 0 10px; }
.ent .srow p { font-size: 14.5px; color: var(--paper-mute); margin: 0; line-height: 1.6; }

/* ---- SAFE TO PUT YOUR NAME ON: numbered editorial rows ---- */
.ent .cannot { border-bottom: 1px solid var(--line); background: none; }
.ent .cannot-inner { max-width: var(--max-w); margin: 0 auto; padding: 96px 40px; }
.ent .cannot-head { max-width: 680px; margin-bottom: 48px; }
.ent .cannot-head h2 { font-size: clamp(30px, 3.6vw, 46px); font-weight: 600; line-height: 1.08; letter-spacing: -0.025em; color: var(--paper); margin: 14px 0 16px; max-width: none; }
.ent .cannot-head p { font-size: 17px; color: var(--paper-dim); margin: 0; max-width: none; }
.ent .crow { display: grid; grid-template-columns: 64px 1fr 1.1fr; gap: 32px; align-items: start; padding: 30px 0; border-top: 1px solid var(--line); transition: padding-left 200ms ease; }
.ent .crow:last-child { border-bottom: 1px solid var(--line); }
.ent .crow:hover { padding-left: 8px; }
.ent .cnum { font-family: var(--font-mono); font-size: 13px; color: var(--signal); }
.ent .crow h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: var(--paper); margin: 0; line-height: 1.2; }
.ent .crow p { font-size: 15.5px; color: var(--paper-mute); margin: 0; line-height: 1.6; }
.ent .crow .mech { font-family: var(--font-mono); font-size: 12px; color: var(--success); margin-top: 10px; display: flex; align-items: center; gap: 7px; }

/* ---- FINAL CTA: asymmetric ---- */
.ent .final { position: relative; overflow: hidden; isolation: isolate; border-top: 1px solid var(--line); background: none; text-align: left; }
.ent .final::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(100% 120% at 18% 100%, color-mix(in srgb, var(--signal) 9%, transparent) 0%, transparent 52%); }
.ent .final-inner { max-width: var(--max-w); margin: 0 auto; padding: 112px 40px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.ent .final h2 { font-size: clamp(32px, 4.2vw, 56px); font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; color: var(--paper); margin: 0; max-width: none; }
.ent .final h2 .accent { color: var(--signal); }
.ent .final-side p { font-size: 17px; color: var(--paper-dim); margin: 0 0 24px; max-width: none; }
.ent .final-side .btn { margin-bottom: 14px; }
.ent .final-note { font-size: 13px; color: var(--paper-mute); margin: 0; }
.ent .final-note a { color: var(--paper-dim); border-bottom: 1px solid var(--line-strong); }

/* ---- hero entrance (pure CSS; ends visible even with JS off / reduced motion) ---- */
@keyframes entFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.ent .fu { animation: entFadeUp 700ms ease both; }
.ent .fu2 { animation: entFadeUp 800ms ease both; animation-delay: 120ms; }
.ent .fu3 { animation: entFadeUp 900ms ease both; animation-delay: 220ms; }

/* breathing encryption tick */
@keyframes entBreathe { 0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--signal); } 50% { opacity: 0.55; box-shadow: 0 0 14px var(--signal); } }
.ent .eyebrow .tick { animation: entBreathe 2.8s ease-in-out infinite; }

/* ---- scroll reveal: ONLY hidden when JS is on (html.js), so JS-off shows all ---- */
html.js .ent .reveal { opacity: 0; transform: translateY(22px); transition: opacity 700ms cubic-bezier(.16,1,.3,1), transform 700ms cubic-bezier(.16,1,.3,1); }
html.js .ent .reveal.in { opacity: 1; transform: translateY(0); }
html.js .ent .stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 600ms cubic-bezier(.16,1,.3,1), transform 600ms cubic-bezier(.16,1,.3,1); }
html.js .ent .stagger.in > * { opacity: 1; transform: translateY(0); }
html.js .ent .stagger.in > *:nth-child(1) { transition-delay: 0ms; }
html.js .ent .stagger.in > *:nth-child(2) { transition-delay: 70ms; }
html.js .ent .stagger.in > *:nth-child(3) { transition-delay: 140ms; }
html.js .ent .stagger.in > *:nth-child(4) { transition-delay: 210ms; }
html.js .ent .stagger.in > *:nth-child(5) { transition-delay: 280ms; }
html.js .ent .stagger.in > *:nth-child(6) { transition-delay: 350ms; }

/* ---- responsive ---- */
@media (max-width: 820px) {
  .ent .final-inner { grid-template-columns: 1fr; gap: 28px; padding: 80px 24px; }
}
@media (max-width: 760px) {
  .ent .hero-inner { grid-template-columns: 1fr; gap: 40px; padding: 64px 24px 72px; }
  .ent .fgrid { grid-template-columns: 1fr; }
  .ent .signed-rows { grid-template-columns: 1fr; }
  .ent .signed-head { grid-template-columns: 1fr; gap: 14px; }
  .ent .crow { grid-template-columns: 1fr; gap: 10px; }
  .ent .explainer-inner, .ent .features-inner, .ent .signed-inner, .ent .cannot-inner { padding: 64px 24px; }
}

/* ---- reduced motion: static, fully readable ---- */
@media (prefers-reduced-motion: reduce) {
  .ent * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html.js .ent .reveal, html.js .ent .stagger > * { opacity: 1 !important; transform: none !important; }
}

/* ============================================================================
   LIGHT THEME: the same deliberate, first-class palette as the homepage, scoped
   to .ent. Dark mode is unchanged; site.css is untouched. Chosen for light (not
   inverted): headings ~19:1, body ~12.9:1, muted >=5.8:1, accent/links 4.7-6.1:1,
   borders dark-at-low-opacity so structure shows, surfaces are real off-white steps.
   ============================================================================ */
:root[data-theme="light"] .ent {
  --ink: #E9EDF3;
  --surface: #FFFFFF;
  --surface-2: #DDE3EC;
  --paper: #0B0F16;
  --paper-dim: #2A323F;
  --paper-mute: #4B5563;
  --signal: #006C82;
  --signal-dim: #005A6E;
  --success: #08714C;
  --line: rgba(15, 23, 33, 0.14);
  --line-strong: rgba(15, 23, 33, 0.24);
  --nav-bg: rgba(233, 237, 243, 0.82);
  --overlay-bg: rgba(233, 237, 243, 0.97);
}
/* Primary button (and the brand-panel CTA/glyph) are deep-teal FILLS in light
   mode; site.css hard-codes the button text to #06222A (dark-on-teal, 2.7:1), so
   carry light text on the homepage's teal fills here instead. */
:root[data-theme="light"] .ent .btn-primary { color: var(--ink); }