/* ============================================================================
   v5-type-align.css — typography alignment for /compliance-v5-test
   Aligns the page's EDITORIAL type layer (section titles, intro copy, card
   titles, card copy, small print, button labels) to the site system as it is
   actually rendered on /solutions/mcp-security (measured via CDP, Chrome 153).

   Scope     : every selector is prefixed [data-cv2="wrap"].
   Contents  : typography only (font-family / size / weight / line-height /
               letter-spacing). No layout, colour or spacing.
   Load order: MUST be linked AFTER 6aa926f60b2f3a579a8bb2d4_cv5c-compliance.css
               (most selectors intentionally mirror that file's specificity and
               win on source order). Rules marked !important only exist to beat
               inline style="" attributes or an existing !important in that file.

   Font files that exist in the site stylesheet (verified 200 OK):
     Figtree         500, 600
     "Inter 18 Pt"   400, 500, 600
     "Exo 2"         400, 500, 600, 700
   Nothing below requests a weight outside those sets.

   Deliberately NOT aligned (display tier, keep the page's own voice):
     .hero h1, .stat .n, .mk-kpi .val, .fn .v, .quote blockquote, .qmark,
     product-mock UI text (.mk-*, .d30-h/.d30-v, .chip, mono text).
   ========================================================================== */


/* ---- 0. Sans token: point the page's --sans at the site's Inter build -----
   The page CSS resolves body text through var(--sans) = Google "Inter".
   The site uses the self-hosted "Inter 18 Pt" (optical-size cut). Redefining
   the token on the same element flips every var(--sans) consumer at once,
   including the wrap's own inherited font-family. Weights used by the page
   through --sans are 400/500/600 — all exist for "Inter 18 Pt". The one 700
   request (.lk-brand b) will resolve to the 600 file (nearest-weight match,
   no synthetic bold). */
[data-cv2="wrap"]{
  --sans:"Inter 18 Pt",Arial,sans-serif;
  font-family:var(--sans);
}


/* ---- 1. Section titles → site .enk-h3 as rendered ------------------------
   Reference: Figtree 500, letter-spacing normal, line-height 1.2,
   28px ≤767 · 32px 768–1279 · 36px 1280–1439 · 40px ≥1440.
   Ours before: "Exo 2" 700, -0.025…-0.03em, lh 1.1–1.13, 34–40px fixed. */
[data-cv2="wrap"] .sec-head h2,
[data-cv2="wrap"] .d30-head h2,
[data-cv2="wrap"] .lb-in h2,
[data-cv2="wrap"] .code-grid h2,
[data-cv2="wrap"] .band h2{
  font-family:Figtree,Arial,sans-serif;
  font-weight:500;
  font-size:32px;
  line-height:1.2;
  letter-spacing:normal;
}
/* Three H2s in the .infog / .code-sec sections carry inline style="" with
   font-family/size/weight/letter-spacing — only !important can beat that. */
[data-cv2="wrap"] h2[style]{
  font-family:Figtree,Arial,sans-serif!important;
  font-weight:500!important;
  line-height:1.2!important;
  letter-spacing:normal!important;
}
/* Only the two 34px inline H2s are section titles; the 26px one
   ("From 44,118 interactions") is a panel sub-title and keeps its size. */
[data-cv2="wrap"] h2[style*="font-size:34px"]{font-size:32px!important}
@media screen and (min-width:1280px){
  [data-cv2="wrap"] .sec-head h2,
  [data-cv2="wrap"] .d30-head h2,
  [data-cv2="wrap"] .lb-in h2,
  [data-cv2="wrap"] .code-grid h2,
  [data-cv2="wrap"] .band h2{font-size:36px}
  [data-cv2="wrap"] h2[style*="font-size:34px"]{font-size:36px!important}
}
@media screen and (min-width:1440px){
  [data-cv2="wrap"] .sec-head h2,
  [data-cv2="wrap"] .d30-head h2,
  [data-cv2="wrap"] .lb-in h2,
  [data-cv2="wrap"] .code-grid h2,
  [data-cv2="wrap"] .band h2{font-size:40px}
  [data-cv2="wrap"] h2[style*="font-size:34px"]{font-size:40px!important}
}
@media screen and (max-width:767px){
  /* The page CSS has `[data-cv2="wrap"] h2{font-size:25px!important}` inside
     @container (max-width:640px). Higher specificity + !important wins. */
  [data-cv2="wrap"] .sec-head h2,
  [data-cv2="wrap"] .d30-head h2,
  [data-cv2="wrap"] .lb-in h2,
  [data-cv2="wrap"] .code-grid h2,
  [data-cv2="wrap"] .band h2,
  [data-cv2="wrap"] h2[style*="font-size:34px"]{font-size:28px!important;line-height:1.2!important}
  /* Same rule leaks into the FAQ (#FAQS sits INSIDE the wrap): 25px vs the
     reference's 28px. Restore the site value. */
  [data-cv2="wrap"] .section_faq .enk-h3{font-size:28px!important;line-height:1.2!important}
}


/* ---- 2. Section intro copy + hero sub → site .enk-text-regular ----------
   Reference: "Inter 18 Pt" 400, lh 1.5, 16px 1280–1439 · 18px ≥1440.
   Ours before: Inter 400, lh 1.55–1.65, 15.5–17px fixed.
   JUDGMENT: the site ladder drops to 12px (768–1279) and 10px (≤767) — below
   any sensible body-copy minimum. Not copied; 16px is held as the floor.
   To copy the reference exactly instead, see the commented block at the end. */
[data-cv2="wrap"] .hero .sub,
[data-cv2="wrap"] .sec-head p,
[data-cv2="wrap"] .d30-head p,
[data-cv2="wrap"] .lb-in p,
[data-cv2="wrap"] .code-grid>div>p,
[data-cv2="wrap"] .band p{
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.5;
  letter-spacing:normal;
}
/* The .code-sec intro paragraph carries inline style="font-size:16px;
   line-height:1.65" — only !important can beat it. */
[data-cv2="wrap"] .code-grid>div>p[style]{
  font-size:16px!important;
  line-height:1.5!important;
}
@media screen and (min-width:1440px){
  [data-cv2="wrap"] .hero .sub,
  [data-cv2="wrap"] .sec-head p,
  [data-cv2="wrap"] .d30-head p,
  [data-cv2="wrap"] .lb-in p,
  [data-cv2="wrap"] .code-grid>div>p,
  [data-cv2="wrap"] .band p{font-size:18px}
  [data-cv2="wrap"] .code-grid>div>p[style]{font-size:18px!important}
}
@media screen and (max-width:767px){
  /* page CSS: `.hero .sub,.sub{font-size:15.5px!important}` in a container query */
  [data-cv2="wrap"] .hero .sub{font-size:16px!important;line-height:1.5!important}
}


/* ---- 3. Card / panel / accordion titles → site heading face --------------
   Reference card titles (.enk-h5.figtree-equivalent): Figtree 500, ls normal,
   20px 768–1279 · 24px ≥1280 · 28px ≥1440, lh 1.
   Ours before: "Exo 2" 700, -0.012…-0.018em, 16.5–21px.
   JUDGMENT: family/weight/tracking are aligned; size is held at the site's
   20px step because these cards are far denser than the reference's three
   integration cards. Opt-in ladder in the commented block at the end. */
[data-cv2="wrap"] .card h3,
[data-cv2="wrap"] .d30-top h3,
[data-cv2="wrap"] .api-row h3,
[data-cv2="wrap"] .illu h4,
[data-cv2="wrap"] .cv-head,
[data-cv2="wrap"] .acc-item .at,
[data-cv2="wrap"] .cv-item .cvt{
  font-family:Figtree,Arial,sans-serif;
  font-weight:500;
  font-size:20px;
  line-height:1.2;
  letter-spacing:normal;
}
/* Expanded-state bolding in the page CSS requests 700 — Figtree has no 700
   file (would resolve to the 600 cut). Keep the site's medium weight. */
[data-cv2="wrap"] .acc-item[aria-expanded="true"] .at,
[data-cv2="wrap"] .cv-item[aria-expanded="true"] .cvt{font-weight:500}


/* ---- 4. Card / accordion body copy → site small text ---------------------
   Reference card copy (.card-v3 p / .enk-text-small): "Inter 18 Pt" 400 14px.
   Ours before: Inter 400, 13.8–14.5px, lh 1.55–1.6.
   Line-height: reference renders 1.2 on card copy; 1.5 (the site's
   .enk-text-regular value) is used here for multi-line readability. */
[data-cv2="wrap"] .card p,
[data-cv2="wrap"] .d30-top p,
[data-cv2="wrap"] .acc-item .ad,
[data-cv2="wrap"] .cv-item .cvb li,
[data-cv2="wrap"] .spec>div>span{
  font-family:var(--sans);
  font-weight:400;
  font-size:14px;
  line-height:1.5;
  letter-spacing:normal;
}


/* ---- 5. Small print → site .enk-text-small as rendered (≥1280) -----------
   Reference: "Inter 18 Pt" 400 14px lh 1.2. */
[data-cv2="wrap"] .fbot,
[data-cv2="wrap"] .qwho,
[data-cv2="wrap"] .stat .l{
  font-family:var(--sans);
  font-size:14px;
  line-height:1.2;
  letter-spacing:normal;
}
[data-cv2="wrap"] .fbot,
[data-cv2="wrap"] .qwho{font-weight:400}
/* .stat .l stays 500 (it is a caption under a display numeral); 500 exists. */


/* ---- 6. Button labels → site CTA label as rendered ----------------------
   Reference primary/secondary CTA label (.enk-text-small.inter inside the
   button): "Inter 18 Pt" 400 14px lh 1.2. Ours before: Inter 600/500 15px.
   Mobile size is left to the page CSS (12.5px); the site's 9px is not copied. */
[data-cv2="wrap"] .cta,
[data-cv2="wrap"] .cta-2,
[data-cv2="wrap"] .cta-sm{
  font-family:var(--sans);
  font-weight:400;
  font-size:14px;
  line-height:1.2;
  letter-spacing:normal;
}


/* ---- 7. Eyebrows ----------------------------------------------------------
   The reference page has no section eyebrows; nothing to match. Family now
   follows --sans (Inter 18 Pt 600 exists). Size/tracking left as designed. */


/* ---- OPT-IN: copy the reference ladders exactly (currently disabled) ------
@media screen and (max-width:1279px){
  [data-cv2="wrap"] .hero .sub,[data-cv2="wrap"] .sec-head p,[data-cv2="wrap"] .d30-head p,
  [data-cv2="wrap"] .lb-in p,[data-cv2="wrap"] .code-grid>div>p,[data-cv2="wrap"] .band p{font-size:12px}
}
@media screen and (max-width:767px){
  [data-cv2="wrap"] .hero .sub,[data-cv2="wrap"] .sec-head p,[data-cv2="wrap"] .d30-head p,
  [data-cv2="wrap"] .lb-in p,[data-cv2="wrap"] .code-grid>div>p,[data-cv2="wrap"] .band p{font-size:10px!important}
}
@media screen and (min-width:1280px){
  [data-cv2="wrap"] .card h3,[data-cv2="wrap"] .d30-top h3,[data-cv2="wrap"] .api-row h3,[data-cv2="wrap"] .illu h4,
  [data-cv2="wrap"] .cv-head,[data-cv2="wrap"] .acc-item .at,[data-cv2="wrap"] .cv-item .cvt{font-size:24px;line-height:1}
}
@media screen and (min-width:1440px){
  [data-cv2="wrap"] .card h3,[data-cv2="wrap"] .d30-top h3,[data-cv2="wrap"] .api-row h3,[data-cv2="wrap"] .illu h4,
  [data-cv2="wrap"] .cv-head,[data-cv2="wrap"] .acc-item .at,[data-cv2="wrap"] .cv-item .cvt{font-size:28px}
}
--------------------------------------------------------------------------- */

/* ---- Hero headline on the site face (ENABLED) -----------------------------
   Matches the reference hero exactly: Figtree 500, ladder
       28px <=767 | 40px 768-1279 | 44px >=1280 | 48px >=1440
   line-height 1.2, letter-spacing normal.
   The page previously used "Exo 2" 700 at 52px with -1.87px tracking.
   The <=767 rule needs !important to beat the page CSS's own container-query
   step-down on h1; a @container twin is included because this page's mobile
   layout is split across @media and @container and the two are NOT reliably
   paired.
   ------------------------------------------------------------------------ */
[data-cv2="wrap"] .hero h1{
  font-family:Figtree,Arial,sans-serif;
  font-weight:500;
  font-size:40px;
  line-height:1.2;
  letter-spacing:normal;
}
@media screen and (min-width:1280px){[data-cv2="wrap"] .hero h1{font-size:44px}}
@media screen and (min-width:1440px){[data-cv2="wrap"] .hero h1{font-size:48px}}
@media screen and (max-width:767px){
  [data-cv2="wrap"] .hero h1{font-size:28px!important;line-height:1.2!important;letter-spacing:normal!important}
}
@container (max-width:767px){
  [data-cv2="wrap"] .hero h1{font-size:28px!important;line-height:1.2!important;letter-spacing:normal!important}
}
/* ═══ compliance-v5-test — MOBILE FIXES (<=767px) ════════════════════════════
   Measured at 390px. Desktop untouched: every rule sits inside a max-width
   block. Written into BOTH @media and @container because this page's mobile
   layout is split across the two and they are not reliably paired
   (@container serves the in-page preview toggle, @media serves devices).
   767px is used, not 640px, because the site's small-type ladder
   (.enk-text-regular 10px / .enk-text-small 9px) switches on at <=767px and
   the CTA + FAQ rules exist to undo exactly that ladder across its whole range.

   1. "How it works" diagram (.bleed-band .dgm-wrap) — KEPT, not hidden: its
      content (5 log families -> Compliance API -> 5 detectors -> 3 violation
      classes) has no equivalent elsewhere on the page. The 680px scroller was
      rendering labels at 4.4-7.6px (viewBox scale 0.58). The scroller stays,
      the SVG is enlarged to a 1400px content width (scale 1.197, i.e. ~11%
      larger than the 1256px desktop rendering) so labels land at 9-15.6px,
      and a right-edge fade shows there is more to swipe. The transparent
      right border adds run-out so the last column is never under the fade
      when scrolled to the end (border, not padding/margin, because it is
      guaranteed to count toward scrollable overflow in every engine).
   2. CTA tap targets: height was 39px (24px padding + 15px arrow icon). The
      14px label with its 1.2 line-height (16.8px) becomes the tallest flex
      item and lifts the box to 40.8px (42.8px for .btn-light incl. border).
      No padding change needed.
   3. Reused site components: CTA label 9px -> 14px (= desktop value), FAQ
      question 10px -> 16px, FAQ answer body 10px -> 15px. FAQ rules use #FAQS
      so they land at (1,1,1) and cannot lose to the (0,1,0) reset tie.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width:767px){
  /* 1. diagram */
  [data-cv2="wrap"] .bleed-band .dgm-wrap{
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:thin;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);
  }
  [data-cv2="wrap"] .bleed-band .dgm{
    min-width:1448px;                     /* border-box: 1400px content + 48px run-out */
    border-right:48px solid transparent;
  }

  /* 2 + 3. CTA label (site ladder sets .enk-text-small to 9px here) */
  [data-cv2="wrap"] .btn-orange .enk-text-small,
  [data-cv2="wrap"] .btn-light .enk-text-small,
  [data-cv2="wrap"] .btn-black .enk-text-small{font-size:14px;line-height:1.2}

  /* 3. FAQ (site ladder sets .enk-text-regular to 10px here) */
  #FAQS .faq1_question .enk-text-regular{font-size:16px;line-height:1.4}
  #FAQS .faq1_answer .enk-text-regular{font-size:15px;line-height:1.6}
}

@container (max-width:767px){
  /* 1. diagram */
  [data-cv2="wrap"] .bleed-band .dgm-wrap{
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:thin;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);
  }
  [data-cv2="wrap"] .bleed-band .dgm{
    min-width:1448px;
    border-right:48px solid transparent;
  }

  /* 2 + 3. CTA label */
  [data-cv2="wrap"] .btn-orange .enk-text-small,
  [data-cv2="wrap"] .btn-light .enk-text-small,
  [data-cv2="wrap"] .btn-black .enk-text-small{font-size:14px;line-height:1.2}

  /* 3. FAQ */
  #FAQS .faq1_question .enk-text-regular{font-size:16px;line-height:1.4}
  #FAQS .faq1_answer .enk-text-regular{font-size:15px;line-height:1.6}
}

/* ═══ MOBILE: hero console chrome — badge wrap + pill height consistency ════
   Measured with offsetHeight (getBoundingClientRect is unreliable here: these
   elements carry scPopH/scInH scene animations that scale them, so rect
   heights fluctuate mid-flight).
     READ-ONLY badge  44px (wrapped to "READ-" / "ONLY")  ->  28px, one line
     chrome bar       69px                                ->  53px
     three status pills  66 / 47 / 47px                   ->  31 / 31 / 31px
   Cause: the row is flex/nowrap, so flex-shrink squeezed the three pills until
   their text wrapped to 3, 2 and 2 lines respectively. Letting the ROW wrap and
   keeping each pill on ONE line makes them naturally uniform; min-height
   normalises the last few px between .mk-btn (7px pad, no border) and .chip
   (6px pad + 1px border).
   The row's inline style sets align-items:center, which is kept — no
   !important needed because nothing here fights an inline property.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:767px){
  [data-cv2="wrap"] .chrome-bar .pill{white-space:nowrap}
  [data-cv2="wrap"] .hero .dash-main > div:first-child{flex-wrap:wrap;row-gap:8px}
  [data-cv2="wrap"] .hero .dash-main > div:first-child > .mk-btn,
  [data-cv2="wrap"] .hero .dash-main > div:first-child > .chip{
    white-space:nowrap;flex:0 0 auto;min-height:30px;
    display:inline-flex;align-items:center;
  }
}
@container (max-width:767px){
  [data-cv2="wrap"] .chrome-bar .pill{white-space:nowrap}
  [data-cv2="wrap"] .hero .dash-main > div:first-child{flex-wrap:wrap;row-gap:8px}
  [data-cv2="wrap"] .hero .dash-main > div:first-child > .mk-btn,
  [data-cv2="wrap"] .hero .dash-main > div:first-child > .chip{
    white-space:nowrap;flex:0 0 auto;min-height:30px;
    display:inline-flex;align-items:center;
  }
}

/* ═══ MOBILE: framework-map card was losing 36px a side ═════════════════════
   Chain at 390px:  .wrap 16px  +  .fwmap inner div 20px (INLINE style)
                    = 36px per side, 72px of 390 (18.5%), content 318px.
   This is a DIFFERENT card from the console mock (.pane-stack), which was
   fixed separately — the 20px here is an inline style, so it needs
   !important; a class rule cannot beat it.
   Content goes 318px -> 334px.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:767px){
  [data-cv2="wrap"] .fwmap > div[style*="padding:20px"]{padding:12px!important}
}
@container (max-width:767px){
  [data-cv2="wrap"] .fwmap > div[style*="padding:20px"]{padding:12px!important}
}

/* ═══ CTA buttons — band contrast + label weight ════════════════════════════
   BAND: .band-in is the orange->pink gradient. The site's .btn-light is built
   for white backgrounds — transparent fill, #b6c4e4 border, and a label at
   color #181c23 with .op-60 (60% opacity). Near-black at 60% on a saturated
   pink reads as washed out. Solid white fill + full-opacity dark label gives
   a clear secondary against the gradient.
   WEIGHT: the site sets .inter to font-weight 400, which is thin for a button
   label. 600 is used here — "Inter 18 Pt" ships 400/500/600, so this is a real
   font file, not a synthesised bold. Applies at every breakpoint, hero + band.
   ═══════════════════════════════════════════════════════════════════════════ */
[data-cv2="wrap"] .band .btn-light{background:#fff;border-color:#fff}
[data-cv2="wrap"] .band .btn-light .op-60{opacity:1;color:#181c23}

[data-cv2="wrap"] .btn-orange .enk-text-small,
[data-cv2="wrap"] .btn-light .enk-text-small,
[data-cv2="wrap"] .btn-black .enk-text-small{font-weight:600}

/* ═══ Orange CTA — real drop shadow ═════════════════════════════════════════
   The site ships .btn-orange with box-shadow:0 16px 12px #ffb5821f — a pale
   peach at 12% opacity. On the light hero it is barely visible; on the band's
   orange->pink gradient it is LIGHTER than the background, so it renders as
   nothing. Replaced with a shadow that actually reads, tinted per context:
     hero (light ground)     warm orange glow
     band (pink gradient)    plum-tinted, because an orange glow on orange/pink
                             has nothing to separate against
   ═══════════════════════════════════════════════════════════════════════════ */
[data-cv2="wrap"] .btn-orange{
  box-shadow:0 8px 18px rgba(255,127,0,.34), 0 2px 6px rgba(160,55,0,.18);
  transition:box-shadow .18s ease;
}
[data-cv2="wrap"] .btn-orange:hover{
  box-shadow:0 12px 26px rgba(255,127,0,.44), 0 3px 8px rgba(160,55,0,.24);
}
[data-cv2="wrap"] .band .btn-orange{
  box-shadow:0 10px 24px rgba(125,20,65,.34), 0 2px 6px rgba(125,20,65,.22);
}
[data-cv2="wrap"] .band .btn-orange:hover{
  box-shadow:0 14px 30px rgba(125,20,65,.42), 0 3px 8px rgba(125,20,65,.26);
}
@media (prefers-reduced-motion:reduce){
  [data-cv2="wrap"] .btn-orange{transition:none}
}