/* ============================================================================
   security.core Platform — page-specific styles.
   Reuses the ABOUT page's design system (styles.css): palette, typography,
   spacing, .hero, .cards-grid/.card, .grid-header, .final-cta, .btn-primary.
   This file only adds the platform-specific pieces — engine-name code style,
   pills, the lifecycle loop, engine cards, the capability grid, workflow
   steps, the compliance strip and the FAQ accordion. Everything is scoped to
   .page-platform so it can never leak elsewhere. Dark "tech" sections use the
   site navy with the teal accent (#00cccc), per the platform brand.
   ============================================================================ */

/* Keep platform section headings clean (no decorative over/under bars) */
.page-platform section h2::before,
.page-platform section h2::after { display: none !important; }

/* Uniform rhythm across every platform section: the header-to-content gap is
   the same everywhere, so nothing reads as ad hoc. (Per-grid margins below are
   set to match.) */
.page-platform section > .grid-header { margin-bottom: clamp(1.9rem, 3vw, 2.5rem); }

/* Engine names / technical terms — follow the site's default font and inherit
   the surrounding text colour, so they read the same as the body copy (no teal,
   no monospace). */
.page-platform code, .page-platform .eng {
  font-family: inherit; color: inherit; font-weight: inherit; letter-spacing: normal;
  background: none; padding: 0; border: 0;
}
.page-platform .on-dark code, .page-platform .on-dark .eng { color: inherit; }

/* ---- Hero : single-column, left-aligned (matches the about hero), with a
   one-line capability pill bar below. Compact height so the content is visible
   without scrolling. ---- */
.page-platform .hero { min-height: 54vh; padding-top: clamp(40px, 4.6vw, 66px);
  justify-content: flex-start; }
/* Ambient "connected platform" network behind the hero copy (js/hero-net.js).
   The hero already sets position:relative; overflow:hidden; isolation:isolate,
   so the canvas paints above the hero's gradient and below the content. */
.page-platform .hero-head { max-width: 880px; position: relative; z-index: 1; }
.page-platform .hero-content { max-width: 880px; position: relative; z-index: 1; }
/* Hero background field (js/hero-field.js): outward pulses and incoming threat
   vectors sweeping around the shield, plus ambient motes. The static hexagonal
   lattice this layer used to paint underneath them has been removed — it read as
   honeycomb wallpaper behind the copy and competed with the constellation.
   It reads the live position of .hero-anim and centres itself on the shield, so
   it stays aligned at any column width. z-index -1 puts it above the hero's
   gradient and below the copy — .hero has isolation: isolate in styles.css, and
   .hero-head / .hero-content already carry z-index 1 above.

   Shown at every width, including mobile. It used to be hidden below 901px, but
   this layer carries no text — it is pulses, threat streaks and motes — so it
   sits behind stacked copy without competing with it, and it still centres on
   the shield because it reads .hero-anim's live position. */
.page-platform .hero-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* The animation lives in a contained figure (fully visible), not a full-bleed
   background — sized like the homepage hero media. */
/* Taller than the 40vh this used to be, because the mark inside it is now a
   pointy-top hexagon: it stands 1.155x taller than it is wide, so height is
   what limits its size. In a 620x360 landscape box a portrait hexagon could
   only grow to about 310px across, leaving half the width empty and squeezing
   the four engine labels against the perimeter. Matching the engine sub-pages
   below gives the shape the vertical room it is actually sized by. */
.page-platform .hero-anim { position: relative; width: 100%; max-width: 620px; height: clamp(400px, 52vh, 560px); }
/* Feather the edges so the animation dissolves into the hero gradient instead of
   reading as a box. */
/* .hero-shield = platform overview (js/hero-shield.js); .hero-scan = the
   engine sub-page heroes (js/pentest-hero.js and its siblings). Same slot, same
   feathered edges, so every hero in the section sits identically. */
/* pentest.core's console (transcript + ledger + summary) and fuzz.core's storm
   (stream + findings list) both stack more into the figure than the ring-style
   heroes do, so they run taller. */
.page-pentest .hero-anim,
.page-fuzz .hero-anim,
.page-threat .hero-anim,
.page-vuln .hero-anim { height: clamp(400px, 55vh, 560px); }
.page-platform .hero-shield,
.page-platform .hero-scan { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 70%, transparent 100%);
          mask-image: radial-gradient(ellipse at center, #000 70%, transparent 100%); }
/* ...and they are built from rectangular panels, not a centred ring, so the
   radial feather above would cut their corners off — worst at narrow widths,
   where the panels fill more of the box. Declared after that rule so it wins at
   equal specificity. */
.page-pentest .hero-scan,
.page-fuzz .hero-scan,
.page-threat .hero-scan,
.page-vuln .hero-scan { -webkit-mask-image: none; mask-image: none; }
/* Desktop: text left, graphic right, vertically centered. */
@media (min-width: 901px) {
  .page-platform .hero { display: grid; grid-template-columns: minmax(0, 1fr) clamp(380px, 44vw, 620px);
    grid-template-areas: "head figure" "content figure"; column-gap: clamp(24px, 3vw, 48px);
    align-items: center; align-content: start; }
  .page-platform .hero-head { grid-area: head; align-self: end; }
  .page-platform .hero-content { grid-area: content; align-self: start; }
  /* Center the graphic so any leftover margin is split evenly top and bottom. */
  .page-platform .hero-anim { grid-area: figure; align-self: center; }
}
/* Small screens: stack heading -> animation -> content (DOM order). */
@media (max-width: 900px) {
  .page-platform .hero { min-height: auto; overflow-x: clip; }
  /* Let the heading wrap to the viewport instead of its 700px desktop cap, so it
     never forces horizontal overflow (which was pushing the graphic off-screen).
     !important: the base .page-platform .hero h1 max-width rule is declared later
     in the file, so it would otherwise win at equal specificity. */
  .page-platform .hero h1 { max-width: 100% !important; }
  .page-platform .hero-anim { width: 340px; max-width: 90vw; height: 300px; margin: 1.1rem auto 0.4rem; overflow: hidden; }
  /* The console and the storm both carry a panel under the main graphic, so
     they need more height once the hero stacks. */
  .page-pentest .hero-anim,
  .page-fuzz .hero-anim,
  .page-threat .hero-anim,
  .page-vuln .hero-anim { width: 400px; height: 380px; }
}
.page-platform .hero h1 { max-width: 720px; font-size: var(--fs-hero-h1); line-height: var(--lh-hero-h1); margin-bottom: 1.1rem; }
.page-platform .hero .sub-headline { max-width: 600px; margin-bottom: 1.9rem; }
/* "vulnerability.core" is the longest engine name on the section and must not
   break mid-word in the hero grid's narrower copy column. It used to be held at
   a smaller heading size than every other page to achieve that; now it runs at
   the shared --fs-hero-h1 like everything else and simply gets the room it
   needs instead. */
.page-vuln .hero h1 { max-width: 100%; }
.page-platform .hero h1 code,
.page-platform .hero h1 .eng { white-space: nowrap; }
.page-platform .hero-cta { margin-top: 0; display: flex; gap: 1rem; flex-wrap: wrap; justify-content: flex-start; }
/* Secondary hero button uses the site's shared ghost button (styles.css):
   the same 6px/12px/28px lozenge, padding and blue->navy hover fill + lift as
   .btn-primary, so it matches the buttons everywhere else. Only the small
   arrow gap is added here. */
.page-platform .btn-ghost { gap: .4rem; text-decoration: none; }

/* ---- Hero pill bar : engines / capabilities, kept on one line, in order ---- */
.page-platform .hero-pillbar {
  list-style: none; margin: 2.2rem 0 0; padding: 0;
  display: flex; flex-wrap: nowrap; gap: .6rem; justify-content: flex-start;
}
.page-platform .hero-pillbar li {
  flex: 0 0 auto; white-space: nowrap;
  padding: .48rem 1.05rem; border-radius: 22px;
  /* Dark-blue glass on the navy hero, matching the site's blue accent family
     rather than the old solid purple that made these pills stand apart. */
  background: rgba(77, 127, 230, .16); border: 1px solid rgba(77, 127, 230, .42); color: #dce7ff;
  font-family: var(--font-heading); font-weight: 600; font-size: .82rem;
  transition: transform .25s cubic-bezier(.16,1,.3,1), border-color .25s cubic-bezier(.16,1,.3,1), background .25s cubic-bezier(.16,1,.3,1);
}
/* Homepage-style keyword hover: a small lift + a brighter edge. */
.page-platform .hero-pillbar li:hover {
  transform: translateY(-3px);
  border-color: rgba(77, 127, 230, .75);
  background: rgba(77, 127, 230, .28);
}
.page-platform .hero-pillbar li code { color: inherit; font-size: .82rem; }

/* ============ SECTION RHYTHM — alternate dark / light like the About page =====
   Dark accents: the hero, the four-engines band, and the CTA. The loop and
   compliance sections are light — giving a Dark -> Light -> Dark -> Light flow
   with uniform section padding between each. */
.page-platform .engines {
  color: var(--color-white);
  background: radial-gradient(85% 110% at 50% 0%, rgba(73, 41, 154, .32), transparent 60%), var(--color-navy);
  /* A touch more top/bottom breathing room for the dark engines band */
  padding-block: clamp(80px, 6.6vw, 118px);
}
.page-platform .loop { background: var(--color-lavender); }
.page-platform .compliance { background: #fff; }
.page-platform .engines h2 { color: #fff; }
.page-platform .engines .grid-header p { color: #E8E8FC; }
.page-platform .section-intro { max-width: 760px; margin: 0 auto clamp(1.9rem, 3vw, 2.5rem); color: rgba(0, 0, 59, .72); font-size: 1.1rem; line-height: 1.7; text-align: center; }

/* ---- Lifecycle loop : four stages in a row ----
   Read left to right, with an arrow between each pair. The order is set in the
   markup: 01 Threat Intelligence, 02 Monitoring & Response, 03 Testing Layer,
   04 The Feedback Loop. */
.page-platform .loop-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem;
  max-width: 1200px; margin: 0 auto; align-items: stretch;
}
.page-platform .loop-stage {
  position: relative; background: #fff; border: 0;
  border-radius: 14px; padding: 1.7rem 1.4rem; box-shadow: 0 6px 20px rgba(73, 41, 154, .07);
  transition: var(--transition-smooth);
}
.page-platform .loop-stage:hover { transform: translateY(-5px); box-shadow: 0 12px 32px rgba(73, 41, 154, .14); }
.page-platform .loop-stage .stage-num {
  font-family: var(--font-heading); font-weight: 800; font-size: .82rem; letter-spacing: .12em;
  color: var(--color-purple); text-transform: uppercase;
}
.page-platform .loop-stage h3 { color: var(--color-navy); font-size: 1.12rem; margin: .55rem 0 .75rem; }
.page-platform .loop-stage p { color: rgba(0, 0, 59, .78); font-size: .95rem; line-height: 1.6; margin: 0; }
.page-platform .loop-stage:not(:last-child)::after {
  content: '→'; position: absolute; right: -1rem; top: 50%; transform: translateY(-50%);
  color: rgba(73, 41, 154, .45); font-size: 1.3rem; z-index: 1;
}

/* ---- Four engines grid ---- */
.page-platform .engine-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem;
  max-width: 1100px; margin: 0 auto;
}
.page-platform .engine-card {
  display: block; text-decoration: none; color: inherit; height: 100%;
  background: rgba(73, 41, 154, .2); border: 0; border-radius: 14px;
  padding: 1.9rem 1.8rem; transition: var(--transition-smooth);
}
.page-platform .engine-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(0, 0, 20, .4);
}
.page-platform .engine-card .eng-name { font-size: 1.15rem; display: block; margin-bottom: .15rem; }
.page-platform .engine-card .eng-tag { color: #9a7cf5; font-weight: 600; font-size: .82rem; letter-spacing: .02em; text-transform: uppercase; }
.page-platform .engine-card h3 { color: #fff; font-size: 1.02rem; margin: .35rem 0; display: none; }
.page-platform .engine-card p { color: #E8E8FC; font-size: .98rem; line-height: 1.6; margin: .7rem 0 1.1rem; }
.page-platform .eng-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.page-platform .eng-tags li {
  font-size: .72rem; font-weight: 600; color: #cfe9ff; background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 6px; padding: .28rem .6rem;
}
.page-platform .engine-card .card-link { color: #00dddd; font-weight: 700; font-size: .95rem; }
.page-platform .engine-card:hover .card-link { color: #fff; }

/* ---- Compliance badge strip (light section) ---- */
.page-platform .compliance { text-align: center; }
.page-platform .compliance p { color: rgba(0, 0, 59, .78); max-width: 760px; margin: 1rem auto 1.7rem; font-size: 1.08rem; line-height: 1.7; }
.page-platform .badge-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.page-platform .badge-strip li {
  padding: .5rem 1.1rem; border-radius: 22px; background: var(--color-purple); color: #fff;
  font-family: var(--font-heading); font-weight: 600; font-size: .9rem;
}

/* ============================ LIGHT SECTIONS ============================== */
/* Proof (lavender) + capability grid share the about card look */
.page-platform .proof { background: var(--color-lavender); text-align: center; }
.page-platform .proof .cards-grid { margin-top: 0; }
.page-platform .proof .card { text-align: left; }
/* Match the About "pillars" cards: no hover top-line, and solid purple numbers
   (like the about-page number popups) that stay purple on hover. */
.page-platform .proof .card::before { display: none !important; }
.page-platform .proof .card-num { color: var(--color-purple); }
.page-platform .proof .card:hover .card-num,
.page-platform .proof .card:nth-child(2n):hover .card-num { color: var(--color-purple) !important; }
.page-platform .iso-badges { display: flex; justify-content: center; align-items: center; gap: 2.5rem; margin-top: 2.6rem; flex-wrap: wrap; }
.page-platform .iso-badges img { width: 96px; height: 96px; object-fit: contain; transition: var(--transition-smooth); }
.page-platform .iso-badges img:hover { transform: scale(1.06); }

/* Capability grid (engine pages) — all five cards on one uniform line */
.page-platform .caps { background: var(--color-lavender); }
.page-platform .cap-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem;
  max-width: 1200px; margin: 0 auto;
}
.page-platform .cap-card {
  background: #fff; border: 0; border-radius: 14px; padding: 1.5rem 1.2rem;
  box-shadow: 0 6px 20px rgba(73, 41, 154, .07); transition: var(--transition-smooth);
}
.page-platform .cap-card:hover { transform: translateY(-5px); box-shadow: 0 12px 32px rgba(73, 41, 154, .14); }
.page-platform .cap-card .cap-ico {
  width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--color-purple), #241C74); color: #fff; margin-bottom: 1.15rem;
}
.page-platform .cap-card .cap-ico svg { width: 22px; height: 22px; }
.page-platform .cap-card h3 { color: var(--color-navy); font-size: 1rem; margin: 0 0 .65rem; line-height: 1.25; }
.page-platform .cap-card p { color: rgba(0, 0, 59, .78); font-size: .9rem; line-height: 1.55; margin: 0; }

/* Prose intro (engine "why it matters") — light band after the hero, so the
   dark accents fall on hero -> how -> CTA (same rhythm as the hub & About). */
.page-platform .intro { background: #fff; color: rgba(0, 0, 59, .78); }
.page-platform .intro .prose { max-width: 760px; margin: 0 auto; }
.page-platform .intro h2 { color: var(--color-navy); }
.page-platform .intro p { color: rgba(0, 0, 59, .78); font-size: 1.12rem; line-height: 1.75; margin: 0 0 1.2rem; }
.page-platform .intro strong { color: var(--color-navy); }

/* Workflow steps (engine "how it works") — the dark accent band (like the hub's
   engines section): a touch more top/bottom breathing room. */
.page-platform .how {
  background: radial-gradient(85% 110% at 50% 0%, rgba(73, 41, 154, .30), transparent 60%), var(--color-navy);
  color: #fff; padding-block: clamp(80px, 6.6vw, 118px);
}
.page-platform .how h2 { color: #fff; }
.page-platform .flow { list-style: none; counter-reset: step; padding: 0; max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; }
.page-platform .flow li {
  position: relative; background: rgba(73, 41, 154, .2);
  border: 1px solid rgba(160, 140, 235, .18);
  border-radius: 14px; padding: 1.6rem 1.35rem;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s cubic-bezier(.16, 1, .3, 1),
              border-color .45s cubic-bezier(.16, 1, .3, 1), background .45s cubic-bezier(.16, 1, .3, 1);
}
/* Emerge on hover — the same lift + brighter edge + deeper shadow the site's
   other dark-band cards use (the Industries claim / obligation cards). */
.page-platform .flow li:hover {
  transform: translateY(-6px);
  background: rgba(73, 41, 154, .3);
  border-color: rgba(143, 180, 255, .6);
  box-shadow: 0 16px 38px rgba(10, 4, 40, .45);
}
.page-platform .flow li::before {
  counter-increment: step; content: counter(step);
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%;
  background: #9a7cf5; color: var(--color-navy); font-family: var(--font-heading); font-weight: 800; font-size: 1rem; margin-bottom: .9rem;
}
.page-platform .flow li h3 { color: #fff; font-size: 1.02rem; margin: 0 0 .55rem; }
.page-platform .flow li p { color: #E8E8FC; font-size: .93rem; line-height: 1.55; margin: 0; }

/* ====================================================================
   "Where X.core fits" — a DIFFERENT layout per engine, so each page's
   section reflects that engine's role in the security.core system
   instead of the same flat text stack on all four:
     pentest.core       .fit-flow   horizontal pipeline (Test→Analyse→Remediate)
     fuzz.core          .fit-duo    two side-by-side cards
     threat.core        .fit-hub    inputs → hub → outputs
     vulnerability.core .fit-stack  vertical layer stack that closes the loop
   Shared: the white section, the container, the tick-list of deliverables
   and the service cross-link. Blue (#4d7fe6) marks the "you are here" engine.
   ==================================================================== */
.page-platform .fit-sec { background: var(--color-lavender); }
.page-platform .fit-wrap { max-width: 1000px; margin: 0 auto; }
.page-platform .fit-lead { color: rgba(0, 0, 59, .82); font-size: 1.08rem; line-height: 1.7; max-width: 760px; margin: 0 auto 2.4rem; text-align: center; }
.page-platform .fit-lead strong { color: var(--color-navy); }

/* Shared deliverables tick-list (used inside every variant) */
.page-platform .fit-gets-h { font-family: var(--font-heading); font-weight: 700; color: var(--color-navy); font-size: 1rem; margin: 0 0 .8rem; }
.page-platform .fit-gets { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.page-platform .fit-gets li { position: relative; padding-left: 1.7rem; color: rgba(0, 0, 59, .82); font-size: .96rem; line-height: 1.45; }
.page-platform .fit-gets li::before {
  content: ""; position: absolute; left: 0; top: .12em; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: rgba(77, 127, 230, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d7fe6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/.7rem no-repeat;
}
/* Shared service cross-link */
.page-platform .fit-service { margin: 2.4rem auto 0; text-align: center; color: rgba(0, 0, 59, .8); font-size: 1rem; }
.page-platform .fit-service a { color: var(--color-cyan-1); font-weight: 700; border-bottom: 1px solid currentColor; }

/* Panel primitive every variant builds on */
.page-platform .fit-panel {
  background: #fff; border: 1px solid var(--color-lavender); border-radius: 16px;
  padding: 1.7rem 1.6rem; box-shadow: 0 6px 22px rgba(0, 0, 59, .06);
  /* Named properties rather than `all`: the panel's background and its
     is-here ring should not animate, only the lift. */
  transition: transform .4s cubic-bezier(.16, 1, .3, 1),
              box-shadow .4s cubic-bezier(.16, 1, .3, 1),
              border-color .4s ease;
}
/* Lift on hover, matching the site's card behaviour. Applied to the primitive,
   so every fit variant across the four engine pages picks it up rather than
   pentest.core alone. The border warms toward the accent instead of turning
   full cyan, which is reserved for .is-here - a hover must not read as the
   "you are here" state. */
.page-platform .fit-panel:hover {
  transform: translateY(-6px);
  border-color: rgba(77, 127, 230, .45);
  box-shadow: 0 18px 40px rgba(73, 41, 154, .13);
}
.page-platform .fit-panel.is-here:hover {
  border-color: var(--color-cyan-1);
  box-shadow: 0 0 0 4px rgba(77, 127, 230, .1), 0 18px 40px rgba(73, 41, 154, .13);
}
@media (prefers-reduced-motion: reduce) {
  .page-platform .fit-panel { transition: none; }
  .page-platform .fit-panel:hover { transform: none; }
}
.page-platform .fit-panel.is-here { border-color: var(--color-cyan-1); box-shadow: 0 0 0 4px rgba(77, 127, 230, .1), 0 10px 30px rgba(0, 0, 59, .08); }
.page-platform .fit-tag { display: inline-block; font-family: var(--font-heading); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: none; color: rgba(0, 0, 59, .55); margin-bottom: .7rem; }
.page-platform .fit-panel h3 { color: var(--color-navy); font-size: 1.12rem; margin: 0 0 .5rem; }
.page-platform .fit-panel p { color: rgba(0, 0, 59, .78); font-size: .96rem; line-height: 1.6; margin: 0; }

/* 1 — pentest.core : horizontal pipeline ---------------------------- */
.page-platform .fit-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; position: relative; }
.page-platform .fit-flow .fit-step { text-align: center; position: relative; }
/* Centred on the box, not 1.4rem down. That offset lined the arrow up with the
   numbered dot back when the step was bare text; now that the step is a panel,
   the dot sits a padding-height lower and the arrow has to key off the box. */
.page-platform .fit-flow .fit-step:not(:last-child)::after {
  content: "\2192"; position: absolute; top: 50%; right: -1.55rem; transform: translateY(-50%);
  color: rgba(77, 127, 230, .5); font-size: 1.4rem; font-weight: 700;
}
.page-platform .fit-flow .fit-dot { width: 2.8rem; height: 2.8rem; border-radius: 50%; margin: 0 auto .9rem; display: grid; place-items: center;
  background: var(--color-lavender); color: var(--color-purple); font-family: var(--font-heading); font-weight: 800; }
.page-platform .fit-flow .is-here .fit-dot { background: var(--color-cyan-1); color: #fff; box-shadow: 0 0 0 5px rgba(77, 127, 230, .16); }
.page-platform .fit-flow h3 { color: var(--color-navy); font-size: 1.02rem; margin: 0 0 .35rem; }
.page-platform .fit-flow .is-here h3 { color: var(--color-cyan-1); }
.page-platform .fit-flow p { color: rgba(0, 0, 59, .72); font-size: .9rem; line-height: 1.5; margin: 0; }
.page-platform .fit-flow-gets { margin: 2.6rem auto 0; max-width: 680px; }
.page-platform .fit-flow-gets .fit-gets { grid-template-columns: 1fr 1fr; gap: .55rem 1.6rem; }

/* 2 — fuzz.core : two side-by-side cards ---------------------------- */
.page-platform .fit-duo { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.4rem; align-items: start; }

/* 3 — threat.core : inputs → hub → outputs -------------------------- */
.page-platform .fit-hub { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.4rem; align-items: center; }
.page-platform .fit-hub-io h4 { font-family: var(--font-heading); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(0, 0, 59, .5); margin: 0 0 .7rem; }
.page-platform .fit-hub-io ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.page-platform .fit-hub-io li { background: var(--color-lavender); border-radius: 10px; padding: .6rem .85rem; color: var(--color-navy); font-weight: 600; font-size: .92rem; }
.page-platform .fit-hub-io.outs { text-align: right; }
.page-platform .fit-hub-core { text-align: center; padding: 1.4rem 1.1rem; border-radius: 16px; background: linear-gradient(160deg, #05052c, var(--color-navy)); color: #fff; min-width: 168px; box-shadow: 0 12px 30px rgba(10, 4, 40, .3); }
.page-platform .fit-hub-core .fit-tag { color: #8fb4ff; }
.page-platform .fit-hub-core b { display: block; font-size: 1.05rem; }
.page-platform .fit-hub-core span { display: block; color: var(--color-text-light); font-size: .82rem; margin-top: .35rem; line-height: 1.4; }
.page-platform .fit-hub-arrow { text-align: center; color: rgba(77, 127, 230, .55); font-size: 1.3rem; }

/* threat.core : three equal cards (Takes In / Analysis Hub / Feeds), all the
   same colour — no card is singled out. */
.page-platform .fit-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; align-items: stretch; }

/* 4 — vulnerability.core : vertical layer stack + loop -------------- */
.page-platform .fit-stack { display: grid; gap: .7rem; max-width: 720px; margin: 0 auto; }
.page-platform .fit-layer { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.4rem; border-radius: 14px; border: 1px solid var(--color-lavender); background: #fff; }
.page-platform .fit-layer .fit-ln { font-family: var(--font-heading); font-weight: 800; color: var(--color-purple); opacity: .5; font-size: 1.1rem; flex-shrink: 0; width: 1.4rem; }
.page-platform .fit-layer b { color: var(--color-navy); font-size: 1rem; }
.page-platform .fit-layer span { color: rgba(0, 0, 59, .7); font-size: .92rem; }
.page-platform .fit-layer.is-here { border-color: var(--color-cyan-1); background: rgba(77, 127, 230, .05); box-shadow: 0 0 0 3px rgba(77, 127, 230, .08); }
/* Same hover as .fit-panel so the fit sections behave alike across all four
   engine pages. A shorter lift because these are wide rows, not cards - -6px on
   a 1.1rem-tall row reads as a jump rather than a lift. */
.page-platform .fit-layer {
  transition: transform .4s cubic-bezier(.16, 1, .3, 1),
              box-shadow .4s cubic-bezier(.16, 1, .3, 1),
              border-color .4s ease;
}
.page-platform .fit-layer:hover {
  transform: translateY(-3px);
  border-color: rgba(77, 127, 230, .45);
  box-shadow: 0 12px 28px rgba(73, 41, 154, .12);
}
.page-platform .fit-layer.is-here:hover {
  border-color: var(--color-cyan-1);
  box-shadow: 0 0 0 3px rgba(77, 127, 230, .08), 0 12px 28px rgba(73, 41, 154, .12);
}
@media (prefers-reduced-motion: reduce) {
  .page-platform .fit-layer { transition: none; }
  .page-platform .fit-layer:hover { transform: none; }
}
.page-platform .fit-layer.is-here .fit-ln { color: var(--color-cyan-1); opacity: 1; }
.page-platform .fit-loop { text-align: center; color: var(--color-cyan-1); font-weight: 600; font-size: .92rem; margin-top: .3rem; }
.page-platform .fit-loop::before { content: "\21ba  "; font-size: 1.1rem; }

@media (max-width: 780px) {
  .page-platform .fit-flow, .page-platform .fit-duo, .page-platform .fit-hub, .page-platform .fit-trio { grid-template-columns: 1fr; }
  .page-platform .fit-flow .fit-step:not(:last-child)::after { content: "\2193"; top: auto; bottom: -1.7rem; right: 50%; transform: translateX(50%); }
  .page-platform .fit-flow-gets .fit-gets { grid-template-columns: 1fr; }
  .page-platform .fit-hub-io.outs { text-align: left; }
}

/* ---- FAQ accordion (shared) ---- */
.page-platform .faq { background: #fff; }
.page-platform .accordion { max-width: 820px; margin: 0 auto; }
.page-platform .acc-item { border-bottom: 1px solid var(--color-lavender); }
.page-platform .acc-q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.25rem 0; font-family: var(--font-heading); font-weight: 600; font-size: 1.08rem; color: var(--color-navy);
}
.page-platform .acc-q[aria-expanded="true"] { color: var(--color-purple); }
.page-platform .acc-q .chev { flex: none; width: 20px; height: 20px; color: #00cccc; transition: transform .3s ease; }
.page-platform .acc-q[aria-expanded="true"] .chev { transform: rotate(180deg); }
.page-platform .acc-panel { overflow: hidden; max-height: 0; transition: max-height .35s ease; }
.page-platform .acc-panel p { color: rgba(0, 0, 59, .75); line-height: 1.7; margin: 0 0 1.2rem; }

/* ---- Responsive ---- */
@media (max-width: 1040px) {
  /* Cap cards go 3-up, then a clean 2-up — never a lopsided 4 + 1 */
  .page-platform .cap-grid { grid-template-columns: repeat(3, 1fr); max-width: 760px; }
}
@media (max-width: 1000px) {
  /* Below this the pills can't all fit one line — let them wrap cleanly */
  .page-platform .hero-pillbar { flex-wrap: wrap; }
}
@media (max-width: 900px) {
  .page-platform .loop-grid { grid-template-columns: 1fr 1fr; }
  .page-platform .loop-stage:not(:last-child)::after { display: none; }
  .page-platform .engine-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .page-platform .cap-grid { grid-template-columns: 1fr 1fr; max-width: 520px; }
}
@media (max-width: 600px) {
  .page-platform .loop-grid { grid-template-columns: 1fr; }
  .page-platform .iso-badges { gap: 1.6rem; }
}
@media (max-width: 440px) {
  .page-platform .cap-grid { grid-template-columns: 1fr; max-width: 340px; }
}