/* ================================================================
   Stats strip (.kstat-*)
   Figma node 9:3152. Tight section padding (64px).
   Two rows: the stat counters card, then G2 card | rule | customer quote.
   ================================================================ */

.kstat {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-32);
  padding: var(--section-pad-y-tight) var(--section-pad-x);
  background: var(--color-surface-canvas);
}

/* ---- Stat counters card --------------------------------------- */
.kstat-card {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-64);
  width: 100%; max-width: var(--content-max);
  padding: var(--space-32);
  /* Tinted, matching the scenario pages, which are the standard. Both cards use
     the same fill so they read as one set, and the tint holds against every
     backdrop the strip sits on: the hero gradient, canvas, and white. */
  background: var(--color-info-background);
  border-radius: var(--radius-2xl);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
/* Strip that stands on its own rather than inside a gradient band. The card
   tint is now the default, so this only sets the section. */
.kstat--subtle { background: var(--color-surface-card); }

.kstat-item { display: flex; flex-direction: column; gap: var(--space-12); align-items: center; text-align: center; }
.kstat-number {
  margin: 0;
  font-family: var(--font-family-primary); font-weight: 700;
  font-size: var(--font-size-h2); line-height: var(--line-height-h2);
  color: var(--color-text-brand);
}
.kstat-label {
  margin: 0;
  font-family: var(--font-family-secondary); font-weight: 400;
  font-size: var(--font-size-b2); line-height: var(--line-height-b2);
  color: var(--color-text-secondary);
}

/* ---- G2 rating card ------------------------------------------ */
/* Figma 394:1981 (Frame 155): a single 148px-tall row, 401px wide, with 24px
   padding and 12px gaps — the G2 logo, then the score stacked over its stars,
   then the two award badges. Height comes from the 100px badges plus the
   padding; width follows the content rather than being fixed the way the older
   single-column card was. The whole card links to the Keytos seller page on
   G2, so the hit target is the card rather than the logo. It is an <a>, hence
   the decoration reset. */
.kstat-g2 {
  display: flex; flex-direction: row;
  align-items: center; justify-content: center;
  /* Lets the badges drop to a second line instead of overflowing on the
     narrowest screens, where the card goes full width. */
  flex-wrap: wrap;
  gap: var(--space-12);
  flex: 0 0 auto; max-width: 100%;
  /* .kstat-social stretches its children; Figma centres this card against the
     taller quote beside it. */
  align-self: center;
  padding: var(--space-24);
  background: var(--color-info-background);
  border-radius: var(--radius-2xl);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  text-decoration: none; color: inherit;
  transition: box-shadow 0.15s ease;
}
.kstat-g2:hover { box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12); }
.kstat-g2:focus-visible { outline: 2px solid var(--color-text-brand); outline-offset: 2px; }

/* Score over stars. Figma Frame 182: 4px between the two. */
.kstat-g2-meta { display: flex; flex-direction: column; gap: var(--space-4); }
.kstat-g2-score { margin: 0; display: flex; align-items: baseline; gap: var(--space-4); }
.kstat-g2-rating {
  font-family: var(--font-family-primary); font-weight: 700;
  font-size: var(--font-size-h2); line-height: var(--line-height-h2);
  color: var(--color-text-brand);
}
.kstat-g2-max {
  font-family: var(--font-family-secondary); font-weight: 400;
  font-size: var(--font-size-b2); line-height: var(--line-height-b2);
  color: var(--color-text-secondary);
}
.kstat-g2-logo {
  width: 44px; height: 44px; flex-shrink: 0;
  display: block; object-fit: contain;
}

/* Award badges. 100px tall in Figma; each keeps its own aspect ratio, so the
   width comes from the file rather than being declared here. The frame draws
   them 87 and 86 wide where the files' own ratios give 86.0 and 86.8 — within
   a pixel either way, and honouring the files avoids stretching the artwork.
   The pair is wrapped so flex-wrap moves both together: left as siblings of
   the score, the card wrapped between them on narrow screens and left one
   badge orphaned on its own line. */
.kstat-g2-badges { display: flex; align-items: center; gap: var(--space-12); }
.kstat-g2-badge {
  height: 100px; width: auto; flex-shrink: 0;
  display: block;
}
/* No gap: the star glyphs carry their own padding inside a 20px box, so butting
   them up is what produces the even spacing in the Figma frame. */
.kstat-stars { display: flex; align-items: center; }
.kstat-star { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-star); }

/* Compact variant: one column, score over the G2 logo over the stars, no award
   badges. Figma "Keytos Shield Landing Pages" 34:3398 — a 164px card with 32px
   padding and 12px gaps, stretched to the row height.
   Used by the Keytos Shield overview. Shield is new and has none of the G2
   awards the badges represent, so showing them on its page would credit it with
   standing it has not earned yet.
   Deliberately declared above the responsive block: the ≤920px rules set
   width:100% at the same specificity, and they should win when the row stacks. */
.kstat-g2--compact {
  flex-direction: column;
  width: 164px;
  /* The badge row is what shrank the padding to 24px; without it this goes back
     to the original 32px. */
  padding: var(--space-32);
  /* .kstat-social stretches its children, which is what the old design did.
     The badge layout opted out with align-self:center; this opts back in. */
  align-self: stretch;
}
.kstat-g2--compact .kstat-g2-logo { width: 40px; height: 40px; }

/* Award badge placeholders. Not used by any page or by the styleguide since the
   strip was rebuilt around the G2 card; kept only so the component can be
   restored when real award art exists. Safe to delete otherwise. */
.kstat-badges {
  display: flex; flex-wrap: wrap; gap: var(--space-16); align-items: center; justify-content: center;
}
.kstat-badge {
  width: 70px; height: 80px; border-radius: var(--radius-md); flex-shrink: 0;
  background: linear-gradient(135deg, #10233b 0%, #0b3a5c 55%, #0091ce 100%);
}
.kstat-badge img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ---- Quote variant: card | rule | quote on one row ------------ */
/* Figma 9:3152. The three sit on a single centred row, which is what closed the
   band of empty space the old centred G2 card left once the badges came out. */
.kstat-social {
  display: flex; align-items: stretch; justify-content: center;
  gap: var(--space-32);
  width: 100%; max-width: var(--content-max);
}
.kstat-divider {
  flex: 0 0 1px; align-self: stretch;
  background: var(--color-border-default);
}
.kstat-quote {
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--space-16); max-width: var(--body-max);
}
/* Inter rather than the display face: this is a long body-copy quote, not a heading,
   and it now matches its attribution below. Left-aligned against the rule. */
.kstat-quote-text {
  margin: 0; text-align: left;
  font-family: var(--font-family-secondary); font-weight: 400;
  font-size: var(--font-size-h4); line-height: var(--line-height-h3);
  color: var(--color-text-primary);
}
/* One short emphasised phrase per quote. 600 rather than the browser default
   700, matching .ms-compare__feature strong, so it lifts off the 400 body
   without turning into a second heading. */
.kstat-quote-text strong { font-weight: 600; }
.kstat-quote-attr {
  margin: 0; text-align: left;
  font-family: var(--font-family-secondary); font-weight: 400;
  font-size: var(--font-size-b3); line-height: var(--line-height-b3);
  color: var(--color-text-secondary);
}

/* ---- Responsive ---------------------------------------------- */
@media (max-width: 1072px) {
  .kstat { padding-block: var(--space-32); padding-inline: var(--space-32); }
  /* Two-up below desktop. Four columns fit in only ~150-196px each here, which is
     narrower than the widest first line a label can hold ("Cryptographic
     operations", 218px), so the deliberate two-line labels shattered into three
     and four lines. Two columns keep every item at 304px or wider. */
  .kstat-card { grid-template-columns: repeat(2, 1fr); gap: var(--space-32); }
  .kstat-social { gap: var(--space-20); }
  .kstat-quote-text { font-size: var(--font-size-h5); line-height: var(--line-height-b1); }
}
/* The row stacks once the quote gets too narrow to read.
   Side by side the quote takes whatever the card leaves:
     quote = content width - 401 card - 1 rule - 2x20 gaps - 2x32 gutters
           = content width - 505.7
   so it drops under 400px once the content box is narrower than ~906px
   (measured 400.3px at 906, 399.3px at 905). Media queries match the viewport,
   which is about 15px wider than the content box wherever a classic scrollbar
   is present, so this sits at 920px rather than 906px: that stacks at a 400px
   quote with a scrollbar, and some 14px early without one, which is the
   harmless direction to be wrong in.
   A 400px column already runs this pull quote to six lines; much below that it
   shreds. The row used to stack at the 767px mobile breakpoint, which was fine
   while the card was 249px wide, but the card is 401px now and 767px would
   have left the quote at roughly 246px.
   Recompute if the card's width changes again:
     breakpoint = 400 + card + 1 + 2x20 + 2x32 + 15
   A vertical rule between stacked blocks reads as a stray line, so it goes.
   Once stacked the card fills the width like the counters above it, rather
   than sitting as a fixed block with dead space either side. */
@media (max-width: 920px) {
  .kstat-social { width: 100%; flex-direction: column; align-items: stretch; gap: var(--space-24); }
  .kstat-g2 { width: 100%; }
  .kstat-divider { display: none; }
  .kstat-quote { max-width: 100%; }
  /* 100px is a lot of badge once the card is stacked and the strip is the whole
     column, so they come down to 80px here. Only the height is set: the base
     rule's width:auto keeps each badge on its own file's aspect ratio, and
     flex-shrink:0 stops the row squeezing it off that ratio. */
  .kstat-g2-badge { height: 80px; }
}
@media (max-width: 767px) {
  .kstat { padding-block: var(--space-24); padding-inline: var(--space-16); }
  .kstat-card { gap: var(--space-24); }
  .kstat-badge { width: 56px; height: 64px; }
}
@media (max-width: 479px) {
  .kstat-card { grid-template-columns: 1fr; }
}

/* ================================================================
   Certified strip (.kcert-*)
   Figma 264:2163. Centered brand-blue heading + canvas-color card
   with ISO 27001, AICPA SOC 2, and Microsoft Solutions Partner.
   ================================================================ */
.kcert-section {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-32);
  padding-block: var(--section-pad-y);
  padding-inline: var(--section-pad-x);
}

.kcert-heading {
  margin: 0; text-align: center;
  font-family: var(--font-family-primary); font-weight: 700;
  font-size: var(--font-size-h2); line-height: var(--line-height-h2);
  color: var(--color-text-brand);
}

.kcert-card {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: var(--space-64);
  width: 100%; max-width: var(--content-max);
  padding: var(--space-32);
  background: var(--color-surface-card);
  border-radius: var(--radius-xl);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 2px 4px 0 rgba(0, 0, 0, 0.04);
}

.kcert-logo--badge { width: 80px; height: 80px; object-fit: cover; object-position: center; flex-shrink: 0; }
.kcert-logo--partner { height: 80px; width: auto; max-width: 100%; object-fit: contain; flex-shrink: 1; }

/* Frame keeps the 80px slot height (matching the badges) while scaling a
   visually heavy logo down inside it. */
.kcert-frame {
  display: flex; align-items: center; justify-content: center;
  height: 80px; flex-shrink: 1;
}
.kcert-frame .kcert-logo { height: 60px; width: auto; max-width: 100%; object-fit: contain; }

@media (max-width: 1072px) {
  .kcert-section { padding-block: var(--space-48); padding-inline: var(--space-32); }
}
@media (max-width: 767px) {
  .kcert-section { padding-block: var(--space-32); padding-inline: var(--space-16); }
  .kcert-card { gap: var(--space-32); }
}