/* ==========================================================================
   KOBIL — Base: reset, typography, layout, shared building blocks
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Figma's phone reference frame is 393px wide — below that, absolutely-
     positioned mobile layouts (the new industry heroes especially) start
     overlapping/crushing rather than reflowing, so the whole site refuses
     to render narrower than the design's own minimum. */
  min-width: 393px;
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.44;
  color: var(--navy);
  background: var(--navy-20);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Set by build.py for pages whose Figma frame is white behind the sticky
   header as well — those have no hero for the nav pill to float over, so the
   default page ground would show as a grey band above the first section
   (/faqs/ is the first such page). */
body.body--white {
  background: var(--white);
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Page layout: content column with card sections ---- */

.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

/* Aug 2026 layout: sections butt against each other and run the full
   --page-max width, each holding its own 80px inset (the Figma frames are
   contiguous 1440-wide blocks with no gutter between them). Sections used on
   a flush page must therefore NOT carry the `calc(100% + --page-pad * 2)`
   breakout that the inset layout needs. */
.page--flush {
  padding: 0;
  gap: 0;
}

@media (max-width: 768px) {
  :root {
    --page-pad: 16px;
    --section-gap: 12px;
  }
}

/* ---- Continuous white area for grouped sections (Industries) ---- */

.page-surface {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius-sm);
  overflow: clip;
}

/* Variant: seamless against the sections above/below it (hero, cta) — no
   card gap, no rounded corners; the flow reads as one continuous page
   instead of a stack of separate cards (Aug 2026 industries redesign).
   Also breaks out to the full 1440px page width (matching hero/footer)
   instead of sitting inset within .page's own 40px side padding —
   sections inside center their own 1280px content independently. */
.page-surface--seamless {
  position: relative;
  isolation: isolate;
  width: calc(100% + var(--page-pad) * 2);
  margin-left: calc(-1 * var(--page-pad));
  margin-top: calc(-1 * var(--section-gap));
  border-radius: 0;
}

/* Themed background wash (Figma: 3 huge blurred blobs spread down the white
   content column — fill #3EBFFC at 10–12% opacity plus one per-page accent
   blob, each with a 222px Gaussian blur). Reproduced as soft radial
   gradients so it scales with the column instead of shipping 3 big PNGs.
   Pages set --surface-accent to their own Figma accent; the cyan is shared.
   Sections inside must not paint their own opaque background or they'd
   cover this. */
.page-surface--seamless::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(
      62% 22% at 86% 11%,
      color-mix(in srgb, var(--surface-cyan, #3ebffc) 13%, transparent) 0%,
      transparent 78%
    ),
    radial-gradient(
      66% 24% at 10% 42%,
      color-mix(in srgb, var(--surface-accent, #3ebffc) 13%, transparent) 0%,
      transparent 80%
    ),
    radial-gradient(
      62% 22% at 90% 74%,
      color-mix(in srgb, var(--surface-accent, #3ebffc) 12%, transparent) 0%,
      transparent 78%
    );
}

/* Variant: the card overlaps the section above it (Application Security —
   Figma 6087:53895, where Frame 2087325757 sits at x=40 / y=766 while the hero
   runs to 1208, so the card is pulled up over the hero gradient). 40px in from
   each side, which is exactly .page's own padding, so no width override is
   needed here — only the pull-up and the card chrome. */
.page-surface--overlap {
  position: relative;
  z-index: 1;
  /* The white area itself runs the FULL 1440 page width (it is the page
     background from the hero down), while its own 40px gutter keeps every
     section inside it at 1360 — so the sections stay 40px in from each edge
     but no page background shows through beside them. */
  width: calc(100% + var(--page-pad) * 2);
  margin-left: calc(-1 * var(--page-pad));
  padding: 0 var(--page-pad);
  margin-top: -442px;
  background: var(--white);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

@media (max-width: 1024px) {
  .page-surface--overlap {
    margin-top: -260px;
  }
}

@media (max-width: 768px) {
  .page-surface--overlap {
    margin-top: -120px;
  }
}

/* Variant: one white card pulled up over a full-bleed hero (Company).
   Figma D-Company 5882:51069 — the hero background runs the full 1440 and is
   1032 tall, the card is 1280 wide at x=80 and starts at y=598, so it
   overlaps the hero by 434. The page itself is `flush` (no side padding), so
   the card centres itself and every section inside owns its own inset. */
.page-surface--flush {
  position: relative;
  z-index: 1;
  width: var(--w1280);
  margin: calc(-1 * var(--w434)) auto 0;
  background: var(--white);
  border-radius: var(--w12) var(--w12) 0 0;
  /* Overrides .page-surface's clip: the white rail below has to escape
     sideways (the sections that genuinely bleed — vision, gartner — clip
     themselves, so nothing else needs cropping here). */
  overflow: visible;
}

/* Beside the card the frame is white too — the page ground only turns grey
   again where the next full-bleed section starts. Without this the default
   --navy-20 body shows as two grey rails down the length of the card. The
   layer starts where the hero gradient has faded out, so the card's rounded
   top corners still read against the gradient above it. */
.page-surface--flush::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: var(--w434);
  bottom: 0;
  left: calc(-1 * var(--w80));
  right: calc(-1 * var(--w80));
  background: var(--white);
}

@media (max-width: 768px) {
  .page-surface--flush::before {
    top: var(--m328);
    left: calc(-1 * var(--m24));
    right: calc(-1 * var(--m24));
  }
}

/* Phone (Figma M-Company 5882:51382): the card is 345 wide at x=24 and starts
   at y=430, over a 758-tall hero background → 328 of overlap. */
@media (max-width: 768px) {
  .page-surface--flush {
    width: var(--m345);
    margin-top: calc(-1 * var(--m328));
    border-radius: var(--m12) var(--m12) 0 0;
  }
}

/* ---- Eyebrow / Tagline: "● SECTION LABEL" ---- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--navy);
}

.eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
}

/* ---- Buttons (base — sections refine as needed) ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--btn-blue);
  color: var(--white);
}

.btn--primary:hover {
  background: #1e4fd6;
}

.btn--dark {
  background: var(--navy);
  color: var(--white);
}

.btn--dark:hover {
  background: #1a3164;
}

.btn--outline {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--navy-60);
}

.btn--outline:hover {
  border-color: var(--navy);
}

.btn--ghost-light {
  background: transparent;
  color: var(--white);
  border: 1px solid var(--white-70);
}

.btn--ghost-light:hover {
  background: var(--white-20);
}

.btn--small {
  font-size: 14px;
  line-height: 18px;
  padding: 10px 18px;
}

/* Kill the translucent blue tap flash mobile browsers paint on links and
   buttons — every interactive element here paints its own pressed state. */
a,
button {
  -webkit-tap-highlight-color: transparent;
}

/* ---- Scroll reveal (main.js observes [data-reveal]) ---- */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Screen-reader only ---- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}