/* C19 (klara, Nov 3): home v2. Teal #0E7490 on navy #0A1630 (C1 Deep Cyan). Loaded after trust-layer / mobile-home. */
:root{--c19-teal:#0E7490;--c19-navy:#0A1630;--c19-teal-ink:#7cc7d8}
/* 1. slim hero: shorter block so the top of #products shows on the first screen at 1440x900 */
.al-hero--c19{padding-top:clamp(40px,5vw,72px)!important;padding-bottom:clamp(32px,4vw,56px)!important}
.al-hero--c19 + .alx-trust,.c19s-pattern + .alx-trust{padding-top:clamp(40px,4.5vw,64px)}
@media (min-width:1025px){
  /* the example desk keeps its geometry, drawn at 72% so the hero is ~470px tall (CLS-safe: zoom is static, set before paint) */
  .al-hero--c19 .alx-deskwrap{zoom:.62}
  .al-hero--c19{padding-top:28px!important;padding-bottom:24px!important}
  .al-hero--c19 .al-hero__grid{min-height:0;align-items:center}
  .al-hero--c19 h1{font-size:clamp(2.5rem,3.9vw,3.4rem)}
  .al-hero--c19 + .alx-trust .tl-head h2,.c19s-pattern + .alx-trust .tl-head h2{font-size:clamp(30px,3vw,42px)}
  .al-hero--c19 + .alx-trust .tl15-body,.c19s-pattern + .alx-trust .tl15-body{align-items:start}
  .al-hero--c19 + .alx-trust,.c19s-pattern + .alx-trust{padding-top:28px}
  .al-hero--c19 + .alx-trust .tl-head,.c19s-pattern + .alx-trust .tl-head{margin-bottom:18px}
  .al-hero--c19 + .alx-trust .tl-line,.c19s-pattern + .alx-trust .tl-line{min-height:0;margin-bottom:14px}
  .al-hero--c19 + .alx-trust .tl-card,.c19s-pattern + .alx-trust .tl-card{min-height:118px;padding:18px 20px 16px;gap:10px}
  .al-hero--c19 + .alx-trust .tl-card--wide,.c19s-pattern + .alx-trust .tl-card--wide{min-height:96px}
  /* SourceSeal (C20.3 Dor): top row half-width keys = 0 Cloud + Lightweight; second row full-width key frame = 50ms (tl-card--full) */
  .al-hero--c19 + .alx-trust .tl-col--seal .tl-card--key:not(.tl-card--full),.c19s-pattern + .alx-trust .tl-col--seal .tl-card--key:not(.tl-card--full){order:-2}
  .al-hero--c19 + .alx-trust .tl-col--seal .tl-card--full.tl-card--key,.c19s-pattern + .alx-trust .tl-col--seal .tl-card--full.tl-card--key{grid-column:1/-1;order:0;min-height:96px;flex-direction:row;align-items:center;justify-content:flex-start;gap:22px}
  .al-hero--c19 + .alx-trust .tl-col--seal .tl-card:not(.tl-card--key),.c19s-pattern + .alx-trust .tl-col--seal .tl-card:not(.tl-card--key){grid-column:1/-1;min-height:96px;flex-direction:row;align-items:center;justify-content:flex-start;gap:22px}
}
.al-hero--c19 .al-lead{max-width:34em}
/* 2. Trust Layer (#products) */
.alx-trust .c19-anchor{position:absolute;top:0}
.alx-trust .tl-note{display:block;margin-top:10px;padding-top:10px;border-top:1px solid var(--ail-border-dark,#1f3558);font:500 14px/1.4 Inter,sans-serif;color:var(--ail-text-on-dark,#e8eef6);opacity:.88}
.alx-trust .tl-card--key{border-color:color-mix(in srgb,var(--c19-teal) 70%,#9fe7f5);background:linear-gradient(180deg,color-mix(in srgb,var(--c19-teal) 30%,var(--c19-navy)),color-mix(in srgb,var(--c19-teal) 12%,var(--c19-navy)));box-shadow:0 0 0 1px color-mix(in srgb,var(--c19-teal) 45%,transparent),0 10px 32px -12px color-mix(in srgb,var(--c19-teal) 70%,transparent)}
.alx-trust .tl-card--key .tl-ico{stroke:#bfeef8}
/* C20.3 Dor: 50ms Real time also gets the teal key frame, but stays full-width under the top key row */
.alx-trust .tl-col--seal .tl-card--full.tl-card--key{grid-column:1/-1;order:0;flex-direction:row;align-items:center;justify-content:flex-start;gap:22px;min-height:96px}
.alx-trust .tl-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:22px}
.alx-trust .tl-cta{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:10px;background:var(--c19-teal);color:#fff;font:600 16px Inter,sans-serif;text-decoration:none;transition:background .2s}
.alx-trust .tl-cta:hover,.alx-trust .tl-cta:focus-visible{background:#0b5f76}
.alx-trust .tl-link2{display:inline-flex;align-items:center;min-height:44px;color:var(--c19-teal-ink);font:600 15px Inter,sans-serif;text-decoration:none;border-bottom:1.5px solid currentColor}
.alx-trust .tl-link2:hover{color:#fff}
.alx-trust.tl-armed .tl-ctas{opacity:1}
/* 3. Built for: slim chip band right after #products. Wraps cleanly at 360/390 (room for more audiences). */
.c19-builtfor{background:var(--c19-navy);padding:clamp(22px,3vw,32px) var(--ail-space-5,24px)!important;border-top:1px solid #16294a;border-bottom:1px solid #16294a}
.c19-builtfor__in{max-width:var(--ail-container,1200px);margin:0 auto}
.c19-chips{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px}
.c19-chips__lbl{color:#c9d6e6;font:600 15px Inter,sans-serif;white-space:nowrap}
.c19-chips__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.c19-chip{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid color-mix(in srgb,var(--c19-teal) 75%,#1f3558);background:color-mix(in srgb,var(--c19-teal) 20%,var(--c19-navy));color:#fff;font:500 15px Inter,sans-serif;text-decoration:none;white-space:nowrap}
.c19-chip:hover,.c19-chip:focus-visible{background:var(--c19-teal)}
@media (max-width:700px){
  .c19-builtfor{padding:20px 16px!important}
  .c19-chips{justify-content:flex-start}
  .c19-chips__lbl{flex-basis:100%}
  .c19-chips__list{justify-content:flex-start;gap:8px}
  .c19-chip{padding:0 14px;font-size:14px}
  /* key SourceSeal tiles first in their swipe row, so 0 cloud compute + Lightweight show without swiping */
  .alx-trust .tl-col--seal .tl-card--key{order:-1}
  .alx-trust .tl-ctas{gap:4px 16px}
  .alx-trust .tl-cta{flex:1 1 100%;justify-content:center}
  body.al-home-m .tl-note{font-size:13px;margin-top:6px;padding-top:6px}
}
@media (prefers-reduced-motion:reduce){.c19-chip,.alx-trust .tl-cta{transition:none}}
/* C19b: Built for chips inside the hero (variant A), under the line + buttons */
.c19-chips--hero{justify-content:flex-start;margin-top:22px;gap:8px 10px}
.c19-chips--hero .c19-chips__list{justify-content:flex-start;gap:8px}
.c19-chips--hero .c19-chip{min-height:36px;padding:0 13px;font-size:14px}
.c19-chips--hero .c19-chips__lbl{font-size:14px}
@media (max-width:700px){.c19-chips--hero{margin-top:18px}.c19-chips--hero .c19-chips__lbl{flex-basis:auto}.c19-chips--hero .c19-chip{min-height:44px}}
.al-hero__copy>.c19-chips--hero,.al-hero--alx .c19-chips--hero{order:4}   /* hero children are flex/grid-ordered (style.css); chips follow the buttons */

/* ===== C19c ===== */
/* Try it: sample file names never break mid-word (full name in title=) */
.alx .sample b.c19-fn{white-space:nowrap!important;word-break:normal!important;overflow:hidden;text-overflow:ellipsis}
/* Built for: one row at desktop (label inline), slightly tighter chips; the row may run past the text column */
@media (min-width:1100px){
  .c19-chips--hero{flex-wrap:nowrap;width:max-content;max-width:calc(100% + 120px);gap:6px;margin-top:16px}
  .c19-chips--hero .c19-chips__list{flex-wrap:nowrap;gap:6px}
  .c19-chips--hero .c19-chips__lbl{font-size:13px;margin-right:2px}
  .c19-chips--hero .c19-chip{min-height:32px;padding:0 11px;font-size:13px}
  .al-hero--c19 .al-hero__copy{position:relative;z-index:2}
}
/* First screen (1440x900 and 1366x768): hero + Trust Layer head + the SourceSeal key tiles */
@media (min-width:1025px){
  .al-hero--c19{padding-top:20px!important;padding-bottom:18px!important}
  .al-hero--c19 h1{font-size:clamp(2.4rem,3.3vw,3rem);margin-bottom:.35em}
  .al-hero--c19 .al-lead{margin-top:0;margin-bottom:16px;font-size:17px}
  .al-hero--c19 .alx-deskwrap{zoom:.56}
  .al-hero--c19 + .alx-trust,.c19s-pattern + .alx-trust{padding-top:18px}
  .al-hero--c19 + .alx-trust .tl-head,.c19s-pattern + .alx-trust .tl-head{margin-bottom:10px}
  .al-hero--c19 + .alx-trust .tl-head h2,.c19s-pattern + .alx-trust .tl-head h2{font-size:clamp(28px,2.5vw,36px)}
  .al-hero--c19 + .alx-trust .tl-sub,.c19s-pattern + .alx-trust .tl-sub{margin-top:4px;font-size:15px}
  /* tiles come right after the column title; the column line follows them (no content dropped) */
  .al-hero--c19 + .alx-trust .tl-col,.c19s-pattern + .alx-trust .tl-col{display:flex;flex-direction:column}
  .al-hero--c19 + .alx-trust .tl-colhead,.c19s-pattern + .alx-trust .tl-colhead{order:1;margin-bottom:10px}
  .al-hero--c19 + .alx-trust .tl-cards,.c19s-pattern + .alx-trust .tl-cards{order:2}
  .al-hero--c19 + .alx-trust .tl-line,.c19s-pattern + .alx-trust .tl-line{order:3;margin:14px 0 0}
  .al-hero--c19 + .alx-trust .tl-ctas,.c19s-pattern + .alx-trust .tl-ctas{order:4}
  .al-hero--c19 + .alx-trust .tl-colhead h3,.c19s-pattern + .alx-trust .tl-colhead h3{font-size:24px}
  .al-hero--c19 + .alx-trust .tl-card,.c19s-pattern + .alx-trust .tl-card{min-height:104px;padding:14px 18px 14px}
  .al-hero--c19 + .alx-trust .tl-col--seal .tl-card--key .tl-num,.c19s-pattern + .alx-trust .tl-col--seal .tl-card--key .tl-num{line-height:1.05}
}
@media (min-width:1025px) and (max-height:800px){
  .al-hero--c19 h1{font-size:2.5rem}
  .al-hero--c19 .alx-deskwrap{zoom:.5}
}
@media (min-width:1100px){
  .al-hero--c19.al-hero--proof .al-hero__grid--proof{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:40px}
  .c19-chips--hero{max-width:none}
}
@media (min-width:1100px) and (max-width:1439px){
  .c19-chips--hero .c19-chip{padding:0 10px;font-size:12.5px}
}
/* C19c (b35): #use-cases now has 4 tiles (Defense and intelligence cut) -> one even row of 4 on desktop */
@media (min-width:1025px){
  #use-cases .ail-usecases:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
  #use-cases .ail-usecases:has(> :nth-child(4):last-child) > *{grid-column:auto!important}
}

/* ===== C19i (klara, Nov 3, Morin via Bro): dark-to-light after the Trust Layer. Flag: c19-home.json c19i.light_after_trust (body.c19i-light).
   Hero + #products stay dark. #attack-tiles = very light brand tint, #try = white (its demo window stays a dark app panel),
   then the page continues light as before. Navy #0A1630 text, teal #0E7490 accents/links; cyan stays on dark only. */
body.c19i-light #attack-tiles{background:#F5F9FB!important;color:#0A1630;border:0!important;box-shadow:none!important}
body.c19i-light #attack-tiles::before,body.c19i-light #attack-tiles::after{display:none!important}
body.c19i-light #attack-tiles .db-attack{--db-bg:#FFFFFF;--db-s1:#FFFFFF;--db-s2:#EEF5F8;--db-b:#D6E3E8;--db-bs:#6B8797;--db-t:#0A1630;--db-m:#475764;--db-a:#0E7490;background:none!important;color:#0A1630}
body.c19i-light #attack-tiles .db-tile{box-shadow:0 1px 2px rgba(10,22,48,.06)}
body.c19i-light #attack-tiles .db-tile:hover{border-color:#0E7490}
body.c19i-light #attack-tiles .db-art .k2{stroke:#FFFFFF}
body.c19i-light #attack-tiles .db-center{border-color:#9FB6C2;background:#FFFFFF}
body.c19i-light #attack-tiles .db-head1{color:#0A1630}
body.c19i-light #attack-tiles .db-head{color:#0E7490}
body.c19i-light #attack-tiles :focus-visible{outline-color:#0E7490}
body.c19i-light #try,body.c19i-light #try .demo{background:#FFFFFF!important;color:#0A1630;border-color:transparent!important}
body.c19i-light #try .demo::before,body.c19i-light #try .demo::after{display:none!important}
body.c19i-light #try .demo>.wrap>.eyebrow{color:#0E7490!important}
body.c19i-light #try .demo>.wrap>h2{color:#0A1630!important}
body.c19i-light #try .demo>.wrap>.lead{color:#475764!important}
body.c19i-light #try .panel{box-shadow:0 18px 40px rgba(10,22,48,.18);color:var(--ail-text-on-dark)}   /* app window stays dark: its own text colours */
body.c19i-light #try .demo>.wrap>a,body.c19i-light #try .demo>.wrap>p a{color:#0E7490}

/* ===== C19j (klara, Nov 3, Bro QA on C19i): white section next to white section = paddings stacked (96 + 96 = ~192px of empty white).
   Desktop (>960px) only; phones already use 36px steps. The second of two neighbouring white sections starts at 48px, so the gap
   is 96 + 48 = 144px, the same as the existing reference pair #press -> #team (48 + 96). #try (white since C19i) ends at 96px like
   the other sections (was 110). Section colour changes (dark/tint <-> white) keep their full padding. */
@media (min-width:961px){
  body.home .entry-content > section.al-section:not(.al-dark):not(.al-cta):not(.tc-poc):not(.al-hero):not(#press) + section.al-section:not(.al-dark):not(.al-cta):not(.tc-poc):not(.al-hero),
  body.c19i-light .entry-content > #try + section.al-section:not(.al-dark):not(.al-cta):not(.tc-poc):not(.al-hero){padding-top:48px!important}
  body.c19i-light #try > .demo{padding-bottom:96px!important}
}

/* ===== C19o (klara, Nov 3, Morin): hero CTAs = Book a demo (primary, cyan) + Start with a free POC (secondary, ghost outline, same 48px height)
   + Try the API (3rd button = text link, site rule in text-cut.css). Phones (<=600px): primary and POC stacked full width, link below (44px tap). */
@media (max-width:600px){
  .al-hero--c19 .wp-block-buttons{flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:10px!important;width:100%}
  .al-hero--c19 .wp-block-buttons>.wp-block-button:nth-child(-n+2){width:100%!important;max-width:none!important}
  .al-hero--c19 .wp-block-buttons>.wp-block-button:nth-child(-n+2) .wp-block-button__link{width:100%;justify-content:center;text-align:center}
  .al-hero--c19 .wp-block-buttons>.wp-block-button:nth-child(3){align-self:flex-start!important}
  .al-hero--c19 .wp-block-buttons>.wp-block-button:nth-child(3) .wp-block-button__link{min-height:44px;display:inline-flex;align-items:center}
  /* C19p nit (a): text-link start flush with the buttons' left edge (text-cut.css gives the 3rd button padding-inline:6px) */
  body .al-hero--c19 .wp-block-buttons>.wp-block-button:nth-child(3) .wp-block-button__link{padding-inline-start:0!important;margin-inline-start:0!important}
}