/* ==========================================================================
   FPFX Tech - design system
   Built from Figma: FPFX Branding / FPFX Tech Home Page (node 1184-9330)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* brand */
  --blue: #0038e1;
  --blue-bright: #4876ff;
  --blue-deep: #0040ff;
  --violet: #6d3bf5;
  --violet-light: #a78bfa;
  --cyan: #3ad4d4;

  /* PropAccount palette - used by hero slide 2 (kept from the previous build,
     the slide-2 artwork is colour-matched to these) */
  --pa-ink: #080c18;
  --pa-gold: #d5a754;
  --pa-gold-lite: #f3d27c;
  --g-hero: linear-gradient(180deg, #16122e 0%, #07101d 100%);
  --g-panel: linear-gradient(180deg, #1b1b3e, #121226);
  --g-edge: linear-gradient(51deg, #42429a, #1b1b3e);
  --g-gold-135: linear-gradient(135deg, #a0844c, #f3d27c);

  /* surfaces */
  --ink: #0b0620;            /* page background, darkest */
  --ink-2: #120a2e;          /* raised dark surface */
  --ink-3: #1b1040;          /* dark card */
  --purple-deep: #3a1194;    /* hero gradient top */
  --paper: #ffffff;
  --paper-2: #f4f8fc;        /* light section background */
  --paper-3: #e8f1f8;        /* light section, cooler */

  /* text */
  --text-on-dark: #fcfcff;
  --text-on-dark-dim: rgba(252, 252, 255, .66);
  --text-on-light: #10142c;
  --text-on-light-dim: #5a6274;

  /* lines */
  --line-dark: rgba(255, 255, 255, .12);
  --line-light: #e2e8f0;

  /* layout */
  --wrap: 1320px;
  --gutter: clamp(1.25rem, 4vw, 3.75rem);
  --radius-sm: 10px;
  --radius: 17px;
  --radius-lg: 28px;
  --radius-pill: 60px;

  /* rhythm */
  --section-y: clamp(4rem, 9vw, 7.5rem);

  /* type */
  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-on-dark);
  background: transparent;   /* the canvas is on html, the page column on .page */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.01em;
}
p { margin: 0; }

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

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

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; }

/* light sections sit as inset rounded panels, like the mockup */
.section--light {
  background: linear-gradient(160deg, var(--paper) 0%, var(--paper-2) 45%, var(--paper-3) 100%);
  color: var(--text-on-light);
  border-radius: var(--radius-lg);
  margin-inline: var(--gutter);
  padding-inline: 0;
}
.section--light .wrap { padding-inline: clamp(1.25rem, 4vw, 3.75rem); }

.section-head { text-align: center; max-width: 52rem; margin-inline: auto; }
.section-head h2 { margin-bottom: .75rem; }
.section-head p { color: var(--text-on-light-dim); }
.section--dark .section-head p,
.section-head--on-dark p { color: var(--text-on-dark-dim); }

/* --------------------------------------------------------------------------
   4. Typography scale
   -------------------------------------------------------------------------- */
.h-display { font-size: clamp(2.4rem, 5.6vw, 4.7rem); font-weight: 300; }
.h-section { font-size: clamp(2rem, 4.2vw, 3.5rem); font-weight: 300; }
.h-card    { font-size: clamp(1.4rem, 2.2vw, 2rem);  font-weight: 300; }

.eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue-bright);
  margin-bottom: 1rem;
}
.eyebrow--light { color: var(--blue); }

.lede { font-size: clamp(1rem, 1.3vw, 1.125rem); color: var(--text-on-dark-dim); }
.section--light .lede { color: var(--text-on-light-dim); }

/* glow bar behind the tail of a heading, as in the mockup */
.glow-word {
  position: relative;
  display: inline-block;
  isolation: isolate;
}
.glow-word::after {
  content: "";
  position: absolute;
  inset: 42% -8% 2% -8%;
  z-index: -1;
  border-radius: 999px;
  filter: blur(22px);
  opacity: 1;
  background: linear-gradient(90deg,
    rgba(109, 59, 245, 0) 0%,
    var(--violet) 22%,
    var(--blue-deep) 62%,
    rgba(58, 212, 212, 0) 100%);
}
.glow-word--cyan::after {
  background: linear-gradient(90deg,
    rgba(58, 212, 212, 0) 0%,
    var(--cyan) 35%,
    rgba(72, 118, 255, .9) 75%,
    rgba(72, 118, 255, 0) 100%);
  opacity: .75;
}
/* on light panels the glow sits under the text, so keep it softer */
.section--light .glow-word::after { opacity: .5; filter: blur(20px); }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--blue);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  min-height: 52px;
  padding: .875rem 2rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 56, 225, .38);
}
.btn:active { transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text-on-dark);
  border-color: rgba(255, 255, 255, .45);
  background-image: linear-gradient(-5deg, rgba(0,0,0,0) 0%, rgba(255,255,255,.14) 128%);
}
.btn--ghost:hover {
  box-shadow: 0 12px 28px rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .8);
}

.btn--sm { min-height: 44px; padding: .625rem 1.5rem; }

/* text link with arrow */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 500;
  color: var(--blue);
  transition: gap .18s ease;
}
.link-more::after {
  content: "";
  width: 20px; height: 12px;
  background: currentColor;
  -webkit-mask: url("/img/icons/arrow.svg") no-repeat center / contain;
  mask: url("/img/icons/arrow.svg") no-repeat center / contain;
}
.link-more:hover { gap: .875rem; }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
/* announcement bar + header: one sticky block (.site-top) */
.site-top { position: sticky; top: 0; z-index: 60; }
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .25rem .875rem;
  padding: .75rem 1rem;
  background: linear-gradient(90deg, #0d131d, #1b2140);
  border-bottom: 1px solid rgba(255, 217, 113, .35);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
}
.topbar__dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffd971;
  box-shadow: 0 0 0 4px rgba(255, 217, 113, .22);
  margin-right: .125rem;
}
.topbar__link { color: #ffd971; white-space: nowrap; transition: color .18s; }
.topbar:hover .topbar__link, .topbar:focus-visible .topbar__link { color: #fff; }
.topbar:focus-visible { outline: 2px solid #ffd971; outline-offset: -2px; }
@media (max-width: 600px) {
  .topbar { padding: .5625rem .75rem; font-size: .6875rem; letter-spacing: .1em; gap: .125rem .625rem; }
}
@media (max-width: 420px) {
  .topbar__dot { display: none; }
}

.site-header {
  position: relative;
  background: rgba(11, 6, 32, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-dark);
}
.site-header__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 84px;
}
.site-header__logo { flex-shrink: 0; display: block; line-height: 0; }
.site-header__logo svg { width: 98px; height: 55px; }

.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.site-nav a { font-size: .9375rem; color: var(--text-on-dark); opacity: .9; transition: opacity .18s ease; }
.site-nav a:hover { opacity: 1; }
.site-nav .btn { margin-left: .75rem; }

/* burger */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  position: relative;
  width: 18px; height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute; left: 0;
  width: 18px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .2s ease, top .2s ease;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   7. Hero carousel
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(109, 59, 245, .45) 0%, rgba(11, 6, 32, 0) 60%),
    linear-gradient(180deg, var(--purple-deep) 0%, #1a0b47 42%, var(--ink) 100%);
}
.hero__track {
  display: flex;
  align-items: stretch;
  width: 100%;
  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}
.hero__slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;   /* flex items must be allowed to shrink, or they force a wide page */
  /* a grid item is sized by the slide itself, so the inner .wrap still centres
     on the slide - with flex the auto margins resolve against the whole track */
  display: grid;
  align-content: center;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

/* slide 1 - centered; the taller slide 2 sets the track height, so centre in it */
.hero-1 { text-align: center; }
.hero-1 .hero__lede { max-width: 34rem; margin: 1.5rem auto 2.25rem; }

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
.hero-stats__label {
  width: 100%;
  text-align: center;
  font-size: .8125rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-on-dark-dim);
  margin-bottom: .5rem;
}
.stat {
  flex: 1 1 200px;
  max-width: 280px;
  padding: 1.5rem 1.25rem;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 100%);
}
.stat__value { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 300; line-height: 1.1; }
.stat__label {
  margin-top: .375rem;
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-on-dark-dim);
}

/* slide 2 - PropAccount panel.
   The artwork ships with its own opaque black backing plates (they carry the
   glow and the device shadows and must not be cut away), so the panel behind
   it is near-black: the plates then read as part of the slide. */
.hero-2 {
  background: var(--pa-ink);
  padding: clamp(.75rem, 1.6vw, 1.5rem) clamp(.75rem, 3vw, 3rem) 0;
  align-content: stretch;
}
.hero-2__panel {
  position: relative;
  isolation: isolate;        /* one stacking context: the artwork blends with the panel bg below */
  overflow: hidden;
  border-radius: 25px 25px 0 0;
  /* Figma slide-2 panel: violet at the top fading into deep navy */
  background:
    radial-gradient(60% 70% at 78% 32%, rgba(99, 95, 234, .28) 0%, rgba(99, 95, 234, 0) 70%),
    linear-gradient(180deg, #1c0e50 0%, #120a3a 30%, #0d0630 100%);
  padding-block: clamp(2.4rem, 4.4vw, 3.6rem) clamp(3rem, 5vw, 4.5rem);
}
/* no z-index here on purpose - a stacking context on .wrap would stop the
   artwork's mix-blend-mode from seeing the panel background */
.hero-2__panel > .wrap { position: relative; }

/* slide 2 - split */
.hero-2__grid {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(1.5rem, 4vw, 3.2rem);
  align-items: center;
}
.hero-2__kicker { font-size: clamp(1.125rem, 1.8vw, 1.5rem); font-weight: 300; opacity: .92; }
.hero-2 h2 { margin-bottom: 1rem; }
.hero-2 .hero__lede { max-width: 32rem; margin-bottom: 2rem; opacity: .7; }
.hero-2__actions { display: flex; flex-wrap: wrap; gap: .875rem; margin-bottom: 2.5rem; }

.pill-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1.75rem; }
/* PropAccount wordmark, pushed to the right end of the pill row */
.hero-2__brand { margin-left: auto; display: block; transition: opacity .18s; }
.hero-2__brand:hover { opacity: .8; }
.hero-2__brand img { display: block; height: 46px; width: auto; }
@media (max-width: 600px) {
  /* keep pills + wordmark on one line on phones */
  .hero-2 .pill-row { flex-wrap: nowrap; gap: .375rem; }
  .hero-2 .pill { padding: .4rem .6rem; font-size: .6875rem; border-radius: 10px; white-space: nowrap; }
  .hero-2__brand { flex: 0 0 auto; }
  .hero-2__brand img { height: 18px; }
}
@media (max-width: 380px) {
  .hero-2 .pill { padding: .35rem .45rem; }
  .hero-2__brand img { height: 15px; }
}
@media (max-width: 340px) {
  .hero-2 .pill-row { flex-wrap: wrap; }
}
.pill {
  padding: .625rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: var(--radius);
  font-size: .9375rem;
  background-image: linear-gradient(-5deg, rgba(0,0,0,0) 0%, rgba(255,255,255,.14) 128%);
}

.checks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .875rem 1.5rem;
}
.checks { list-style: none; margin: 0; padding: 0; }
.checks li {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: .95rem;
  font-weight: 400;
  color: #fff;
}
.tick { flex: 0 0 auto; width: 18px; height: 14px; }
.tick--yes { color: var(--pa-gold-lite); }
.tick--no  { color: rgba(255, 255, 255, .5); }

/* No frame around the artwork - as on propaccount.com the devices sit straight
   on the slide background and the glow spills out freely.
   Two layers: the swoosh (gold on pure black) is blended with `screen`, which
   drops the black and only adds light where the glow is; the devices are a
   real alpha PNG drawn normally on top, so their dark screens are not lifted. */
.hero-2__visual {
  position: relative;
  margin-block: calc(-1 * clamp(1rem, 3vw, 2.5rem));
}
.hero-2__visual picture,
.hero-2__visual img { display: block; }

/* devices: sized to the column, pushed slightly out to the right edge */
.hero-2__devices { position: relative; z-index: 1; }
.hero-2__devices img {
  width: 112%;
  max-width: none;
  margin-inline: -4% -8%;
}

/* swoosh: much wider than the column, running behind the devices and out
   under the text column to the left, like the reference slide */
.hero-2__swoosh {
  position: absolute;
  /* negative z: below the text and devices, directly on the panel background
     (the panel is `isolation: isolate`, so its background is in the backdrop) */
  z-index: -1;
  left: -62%;
  right: -14%;
  bottom: 4%;
  pointer-events: none;
  /* blend on the stacking-context element itself, never on the <img> inside
     it - an inner blend would only see the empty <picture> and paint black */
  mix-blend-mode: screen;
}
.hero-2__swoosh img { width: 100%; }

.hero-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: 1.5rem clamp(1rem, 3vw, 2rem);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .04);
}
.hero-metrics > * + * { border-left: 1px solid var(--line-dark); padding-left: 1rem; }
.hero-metrics__value { font-size: clamp(1.4rem, 2.6vw, 2.25rem); font-weight: 300; }
.hero-metrics__label {
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-on-dark-dim);
  margin-top: .25rem;
}

/* carousel controls */
.hero__controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding-bottom: 2rem;
}
.hero__dots { display: flex; gap: .5rem; }

/* arrows: at the sides of the slide on desktop, in the dots row on mobile */
.hero__arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}
.hero__arrow--prev { left: clamp(.5rem, 2vw, 1.5rem); }
.hero__arrow--next { right: clamp(.5rem, 2vw, 1.5rem); }
.hero__arrow:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .7); }
.hero__arrow svg { width: 20px; height: 20px; }
.hero__dot {
  width: 9px; height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .28);
  cursor: pointer;
  transition: background-color .2s ease, width .2s ease;
}
.hero__dot[aria-selected="true"] { width: 26px; border-radius: 999px; background: var(--blue-bright); }

/* --------------------------------------------------------------------------
   8. Solutions (who we are)
   -------------------------------------------------------------------------- */
/* Solutions + Products form one continuous white panel: the first is rounded
   at the top only, the second at the bottom only, and they sit flush. */
.solutions.section--light { border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding-bottom: 0; }
.solutions + .section--light { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

.solutions__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
/* Figma "Vector 1771": the 2px gradient rule along the bottom edge of the
   section, where the cut-out figure ends. Spans the content width. */
.solutions__grid::after {
  content: "";
  position: absolute;
  left: clamp(1.25rem, 4vw, 3.75rem);
  right: clamp(1.25rem, 4vw, 3.75rem);
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #0038e1 0%, #5e1bfb 51%, #6fe7ea 100%);
}
.solutions__copy p + p { margin-top: 1rem; }
.solutions__copy .lede { margin-block: 1.25rem 2rem; }
.solutions__figure {
  position: relative;
  display: flex;
  justify-content: center;
}
.solutions__figure::before {
  content: "";
  position: absolute;
  inset: 6% 0 0 6%;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, rgba(58, 212, 212, .16) 0%, rgba(72, 118, 255, .10) 45%, rgba(255, 255, 255, 0) 75%);
}
.solutions__figure img {
  position: relative;
  max-height: 520px;
  width: auto;
  align-self: end;   /* the cut-out sits on the section's bottom edge */
}

/* --------------------------------------------------------------------------
   9. Products and features (light)
   -------------------------------------------------------------------------- */
.tabs {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem;
  padding: .3125rem;
  margin: 2.25rem auto 0;
  border: 1px solid var(--blue);
  border-radius: var(--radius-pill);
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: .875rem;
  padding: .875rem 1.75rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--blue);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.tab__icon {
  width: 26px; height: 30px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("/img/icons/fingerprint.svg") no-repeat center / contain;
  mask: url("/img/icons/fingerprint.svg") no-repeat center / contain;
}
.tab[aria-selected="true"] { background: var(--blue); color: #fff; }

.tab-panels { margin-top: clamp(2.5rem, 5vw, 4rem); }
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, #fbfdff 0%, #eef5fb 100%);
  box-shadow: 0 18px 40px rgba(16, 20, 44, .06);
}
.card__body { padding: clamp(1.5rem, 3vw, 2.5rem); }
.card__kicker { color: var(--blue); font-weight: 600; margin-bottom: .5rem; }
.card h3 { margin-bottom: 1rem; color: var(--text-on-light); }
.card p { color: var(--text-on-light-dim); margin-bottom: 1.5rem; }
.card__media {
  margin-top: auto;
  /* inset on all three sides: the artwork floats inside the card, it does not
     touch the bottom edge */
  padding: 0 clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem);
}
/* the <picture> is the clipping box, so the radius applies to all four corners
   of what is actually shown (clipping on .card__media would cut the bottom
   corners off) */
.card__media picture {
  display: block;
  max-height: 290px;
  overflow: hidden;
  border-radius: var(--radius);
}
.card__media img { width: 100%; }

/* --------------------------------------------------------------------------
   10. Logo wall
   -------------------------------------------------------------------------- */
.logo-wall { text-align: center; }
.logo-wall h2 { margin-bottom: clamp(3rem, 6vw, 4.5rem); }
/* platform logo carousel, mirroring propaccount.com's Elementor carousel:
   10 / 6 / 4 / 2 logos in view by breakpoint, one step every 3s (700ms
   ease), infinite - app.js clones the set so the loop never shows a gap */
.platforms { --per-view: 7; --gap: 32px; overflow: hidden; }
.platforms__track {
  display: flex;
  align-items: center;
  gap: var(--gap);
  transition: transform .7s ease;
  will-change: transform;
}
.platforms__track.is-jumping { transition: none; }
/* icon-only marks (e.g. PropX) are near-square: cap by height so they sit
   at the same visual size as the 4:1 wordmarks instead of filling the slot */
.platforms__track img.platforms__mark { width: auto; height: 36px; }
@media (max-width: 767px) { .platforms__track img.platforms__mark { height: 27px; } }
.platforms__track > * {
  flex: 0 0 calc((100% - var(--gap) * (var(--per-view) - 1)) / var(--per-view));
  display: flex;
  align-items: center;
  justify-content: center;
}
.platforms__track img {
  display: block;
  width: 100%;
  /* files are 316x80 (2x upscale of propaccount's 158x40 thumbs); shown
     larger than the source site on purpose - client wants them bigger */
  max-width: 200px;
  height: auto;
  opacity: .92;
}
@media (max-width: 1200px) { .platforms { --per-view: 5; } }
@media (max-width: 1024px) { .platforms { --per-view: 4; } }
@media (max-width: 767px)  { .platforms { --per-view: 2; --gap: 16px; } }

/* --------------------------------------------------------------------------
   11. Who we help
   -------------------------------------------------------------------------- */
.who { position: relative; overflow: hidden; }
.who__lines { position: absolute; inset: 0; pointer-events: none; opacity: .5; }
.who__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
  text-align: center;
}
.who__icon {
  width: 68px; height: 68px;
  margin: 0 auto 1.5rem;
  color: var(--blue-bright);
}
.who__item:nth-child(2) .who__icon { color: var(--violet-light); }
.who__item:nth-child(3) .who__icon { color: var(--cyan); }
.who__item h3 {
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--blue-bright);
  margin-bottom: 1.25rem;
}
.who__item:nth-child(2) h3 { border-color: var(--violet-light); }
.who__item:nth-child(3) h3 { border-color: var(--cyan); }
.who__item p { color: var(--text-on-dark-dim); font-size: .9375rem; }

/* --------------------------------------------------------------------------
   12. Band: testimonials -> press -> contact
   One wrapper paints the full-bleed white sheet from the mockup. It starts
   225px below the top of the testimonial cards and ends 323px above the
   bottom of the contact panel, so both straddle its edges (Figma: cards
   4658-5065 on a sheet starting 4883; panel 5869-6586 on a sheet ending 6263).
   -------------------------------------------------------------------------- */
.band {
  --band-top: 225px;
  --band-bottom: 323px;
  color: #110948;
  background: linear-gradient(180deg,
    var(--ink) 0, var(--ink) var(--band-top),
    #fff var(--band-top), #fff calc(100% - var(--band-bottom)),
    var(--ink) calc(100% - var(--band-bottom)));
}

/* generic scroll-snap slider + the dots pill (134x47, white -> #e0eff6) */
.slider { position: relative; --per-view: 3; --slide-gap: 19px; }
.slider__track {
  display: flex;
  gap: var(--slide-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__track > * {
  flex: 0 0 calc((100% - var(--slide-gap) * (var(--per-view) - 1)) / var(--per-view));
  scroll-snap-align: start;
}
.slider__dots {
  display: flex;
  gap: 14px;
  width: max-content;
  margin: 20px auto 0;
  padding: 16px;
  border-radius: 23.5px;
  background: linear-gradient(135deg, #fff 0%, #e0eff6 100%);
}
.slider__dots:empty { display: none; }
.slider__dot {
  width: 15px; height: 15px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(17, 9, 72, .1);
  cursor: pointer;
  transition: background-color .2s ease;
}
.slider__dot[aria-current="true"] { background: var(--blue); }

/* testimonials: 396px cards, 23px apart, three in view, inset in the wrap */
.testimonials { padding-block: 0; }
.testimonials .slider { max-width: 1234px; margin-inline: auto; --slide-gap: 23px; }
.quote {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 24px;
  border: 1px solid #fff;
  border-radius: 16px;
  background: linear-gradient(114.55deg, #fff 0%, #e0eff6 100%);
  color: #0d052e;
}
.quote__logo {
  display: grid;
  place-items: center;
  aspect-ratio: 348 / 201;
  background: #110948;
}
/* the <picture> is the single centred grid item (with display:contents its
   <source> became a second, invisible item and pushed the logo down) */
.quote__logo picture { display: flex; align-items: center; justify-content: center; width: 72%; height: 100%; min-height: 0; }
/* wide wordmarks and square award badges share the slot: one height cap so
   a square badge is not taller than the wordmarks */
.quote__logo img { width: auto; height: auto; max-width: 100%; max-height: 90px; object-fit: contain; }
@media (max-width: 680px) { .quote__logo img { max-height: 72px; } }
/* generated placeholder fills the whole plate (it already is 348:201) */
.quote__logo--cover { overflow: hidden; }
.quote__logo--cover picture { width: 100%; height: 100%; }
.quote__logo--cover img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.quote__stars { display: flex; gap: 1px; color: #0d052e; }
.quote__stars svg { width: 15px; height: 15px; }
.quote blockquote { margin: 0; }
.quote p { font-size: 1rem; line-height: 1.2; color: rgba(13, 5, 46, .7); }
.quote__who { font-weight: 500; color: #0d052e; }

/* press: left-aligned intro (110px in from the wrap), 427px cards, 19px gap */
.press { padding-block: clamp(4rem, 7vw, 103px) 0; }
.press__head { max-width: 55rem; padding-left: clamp(0px, 7.6vw, 110px); }
.press__head h2 { margin-bottom: .75rem; }
.press__head p { color: rgba(17, 9, 72, .7); }
.press .slider { margin-top: 26px; }
.press-card {
  display: flex;
  flex-direction: column;
  gap: 19px;
  padding: 19px;
  border-radius: 19px;
  background: linear-gradient(122deg, #fbfdfe 0%, #e0eff6 100%);
  color: #0d052e;
}
.press-card__media {
  position: relative;
  aspect-ratio: 16 / 9;   /* thumbnails are 16:9 video frames - show them uncropped */
  overflow: hidden;
  border-radius: 12.75px;
  background: var(--ink-2);
}
.press-card__media img { width: 100%; height: 100%; object-fit: cover; }
.press-card--video .press-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .3);
}
.press-card__play {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
}
.press-card__play img { width: 57px; height: 57px; }
.press-card__title {
  display: inline-flex;
  align-items: baseline;
  line-height: 1.3;
  gap: 10px;
  font-size: 19px;
  font-weight: 600;
}
.press-card__title svg { width: 13px; height: 13px; flex: 0 0 auto; }

/* contact: 24px-radius gradient panel, 872px content column */
.contact { padding-block: 70px 0; }
.contact__panel {
  padding: clamp(2.5rem, 6vw, 87px) clamp(1.25rem, 4vw, 3rem) clamp(2.5rem, 6vw, 84px);
  border-radius: 24px;
  background: linear-gradient(130.84deg, #fbfdfe 0%, #e0eff6 100%);
  color: #110948;
}
.contact__in { max-width: 872px; margin-inline: auto; }
.contact .section-head p { color: rgba(17, 9, 72, .7); }
.contact-form { margin-top: 51px; }
.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.field { display: block; }
.field--full { grid-column: 1 / -1; }
.field input,
.field textarea {
  width: 100%;
  padding: 16px;
  font: inherit;
  line-height: 24px;
  color: #0d052e;
  background: #fff;
  border: 1px solid rgba(17, 9, 72, .1);
  border-radius: 6px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field textarea { min-height: 156px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: rgba(13, 5, 46, .5); }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 56, 225, .12);
}
.contact-form__actions { display: flex; justify-content: center; margin-top: 24px; }
.contact-form .btn {
  border-radius: 13px;
  padding: 1.5rem;
  font-size: 15px;
  letter-spacing: .23em;
}

.form-note { margin-top: 1rem; text-align: center; font-size: .875rem; }
.form-note--ok { color: #0a7d55; }
.form-note--err { color: #c0392b; }

/* honeypot */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 1080px) {
  .slider { --per-view: 2; }
}
@media (max-width: 680px) {
  .slider { --per-view: 1; }
  .band { --band-top: 200px; --band-bottom: 260px; }
}

/* --------------------------------------------------------------------------
   15. Page canvas + page end (awards -> rule -> lockup -> footer)
   The mockup puts the 1440px page on a violet canvas that shows either side
   on wider screens (sampled from the Figma export: dark at the top, #5e1bfb
   around the middle, dark again at the bottom). The page itself fades from
   ink into purple over its last stretch, with a glowing pillar in each bottom
   corner - Figma "Rectangle 3469296 / 3469298".
   -------------------------------------------------------------------------- */
/* The Figma canvas shows violet strips either side of the 1440px artboard;
   the client does not want them - the page runs edge to edge on ink. */
html { background: var(--ink); }
.page {
  position: relative;
  width: 100%;
  background: var(--ink);
}
.page-end {
  position: relative;
  overflow: hidden;
  padding-bottom: 150px;
  background: linear-gradient(180deg, var(--ink) 0%, #150642 10%, #2e0d82 100%);
}
/* (the Figma corner pillars - Rectangle 3469296 / 3469298 - were built here
   and then removed at the client's request; do not bring them back) */

/* Vector 1741 - the 2px gradient rule that opens the footer on every page,
   inside the content wrap with rounded ends (the client tried a full-bleed
   version and asked for this one back) */
.rule {
  height: 2px;
  margin: 76px 0 77px;
  border: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, #0038e1 21%, #5e1bfb 46.5%, #6fe7ea 72%);
}

/* vertical hairline used inside the awards box and the lockup (Vector 1783 /
   1782: violet, fading out towards both ends) */
.vrule {
  flex: 0 0 auto;
  align-self: stretch;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(94, 27, 251, 0) 0%, rgba(94, 27, 251, .5) 50%, rgba(94, 27, 251, 0) 100%);
}

.awards__title,
.lockup__title {
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  color: #fafcfe;
}
.awards__label,
.lockup__label {
  font-size: 11.62px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}

/* --------------------------------------------------------------------------
   16. Certified and awarded
   -------------------------------------------------------------------------- */
.awards { padding: 92px 0 0; text-align: center; }
.awards__box {
  display: inline-flex;
  align-items: center;
  gap: 52px;
  margin-top: 16px;
  padding: 34px;
  border: 1px solid var(--blue);
  border-radius: 24px;
  background-image: linear-gradient(-4.7deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, .14) 128%);
}
.awards__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 178px;
}
.awards__item img { height: 118px; width: auto; }
.awards__item--cert { gap: 21px; }
.awards__item--cert img { height: 133px; }
.awards__note {
  max-width: 443px;
  margin: 16px auto 0;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
}

/* --------------------------------------------------------------------------
   17. Lockup (one platform, two ways in)
   -------------------------------------------------------------------------- */
.lockup { text-align: center; }
.lockup__box {
  display: inline-flex;
  align-items: stretch;
  gap: 38px;
  margin-top: 21px;
  padding: 21px 35px 35px;
}
.lockup__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}
.lockup__side svg { width: 99px; height: auto; color: #fff; }
.lockup__pa { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lockup__pa img { display: block; }
.lockup__text a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.45); }
.lockup__text a:hover { text-decoration-color: #fff; }
.lockup__text {
  max-width: 620px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  opacity: .7;
}
.lockup__text + .lockup__text { margin-top: 1rem; }

/* --------------------------------------------------------------------------
   18. Footer - copyright + social row, as in the mockup
   -------------------------------------------------------------------------- */
.site-footer { padding-top: 18px; text-align: center; }
.site-footer__legal { font-size: 16px; line-height: 24px; color: #c0c0c0; }
.site-footer__social {
  display: flex;
  justify-content: center;
  gap: 24.6px;
  margin-top: 19px;
}
.site-footer__social a {
  display: block;
  width: 16.4px; height: 16.4px;
  color: rgba(255, 255, 255, .85);
  transition: color .18s ease;
}
.site-footer__social a:hover { color: #fff; }
.site-footer__social svg { width: 100%; height: 100%; fill: currentColor; }

@media (max-width: 860px) {
  .awards { padding-top: 64px; }
  /* the three badges stay in one row on phones - the box fills the wrap and
     badges + labels scale down with the viewport instead of stacking */
  .awards__box {
    display: flex;
    width: 100%;
    gap: clamp(8px, 3vw, 28px);
    padding: clamp(14px, 4vw, 28px) clamp(8px, 3vw, 24px);
  }
  .awards__item { flex: 1 1 0; min-width: 0; min-height: 0; gap: 10px; }
  .awards__item img { height: clamp(54px, 15vw, 100px); }
  .awards__item--cert { gap: 10px; }
  .awards__item--cert img { height: clamp(60px, 17vw, 112px); }
  .awards__label { font-size: clamp(8px, 2.3vw, 11px); line-height: 1.3; letter-spacing: .05em; }
  .lockup__box .vrule {
    width: 60%; height: 2px; align-self: center;
    background: linear-gradient(90deg, rgba(94, 27, 251, 0) 0%, rgba(94, 27, 251, .5) 50%, rgba(94, 27, 251, 0) 100%);
  }
  .rule { margin-block: 56px; }
  .lockup__box { flex-direction: column; gap: 28px; padding: 16px 0 28px; }
  .page-end { padding-bottom: 110px; }
}

/* --------------------------------------------------------------------------
   19. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  /* single-column layout: both slides share one fixed height (the taller of
     the two), content centred - the client wants equal slides on mobile */
  .hero__track { align-items: stretch; }
  .hero__slide { align-self: stretch; }
  /* arrows move into the dots row */
  .hero__arrow { position: static; transform: none; width: 40px; height: 40px; }

  .hero-2__grid { grid-template-columns: 1fr; }
  /* stacked: no device artwork on slide 2 (client request) - text only */
  .hero-2__visual { display: none; }
  /* the panel already provides a side gutter - don't double it up */
  .hero-2 { padding-inline: .5rem; }
  .hero-2__panel > .wrap { padding-inline: clamp(1rem, 4vw, 2rem); }
  .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
  .hero-metrics > * + * { border-left: 0; padding-left: 0; }
  .solutions__grid { grid-template-columns: 1fr; }
  .solutions__figure { order: -1; }
  /* stacked: the copy ends the section, so give it room above the bottom rule
     (on desktop the figure sits on the edge and the section has no bottom pad) */
  .solutions__copy { padding-bottom: clamp(2rem, 6vw, 3rem); }
  .who__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem var(--gutter) 1.5rem;
    background: rgba(11, 6, 32, .98);
    border-bottom: 1px solid var(--line-dark);
    display: none;
  }
  .site-nav[data-open="true"] { display: flex; }
  .site-nav a { padding: .875rem 0; border-bottom: 1px solid var(--line-dark); }
  .site-nav .btn { margin: 1rem 0 0; }
  .cards { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .section--light { margin-inline: 0; border-radius: 0; }
  .who__grid { grid-template-columns: 1fr; }
  .field-grid { grid-template-columns: 1fr; }
  .checks { grid-template-columns: 1fr; }
  .hero-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-stats { flex-direction: column; align-items: stretch; }
  .stat { max-width: none; flex: 0 0 auto; }
  .hero__slide { padding-block: clamp(2.5rem, 7vw, 4rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* --------------------------------------------------------------------------
   21. Contact page (/contact): info cards on the dark page + the same form
   panel as the home section
   -------------------------------------------------------------------------- */
.contact-hero { padding-bottom: 0; }
.contact-hero { text-align: center; }
.contact-hero .blog-hero__intro { margin-inline: auto; }
.contact-page { padding-top: clamp(2rem, 4vw, 3.5rem); }
.contact-page__form-title { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 300; color: #110948; text-align: center; }
.contact-page__form-note { margin-top: .35rem; color: rgba(17, 9, 72, .7); text-align: center; }
.contact-page .contact-form { margin-top: 2rem; }
.contact-page__social { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); }
.contact-page__social-title { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-bright); }
.social-row { display: flex; gap: .75rem; }
.social-row a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-dark); border-radius: 50%; transition: border-color .18s, background-color .18s; }
.social-row a:hover { border-color: var(--blue-bright); background: rgba(72,118,255,.14); }
.social-row svg { width: 17px; height: 17px; fill: currentColor; }


/* --------------------------------------------------------------------------
   22. Inner-page hero + Tech Kit page (/tech-kit)
   -------------------------------------------------------------------------- */
.page-hero { text-align: center; padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.page-hero__in { max-width: 62rem; }
.page-hero .hero__lede { max-width: 46rem; margin: 1.5rem auto 0; }
/* a stand-alone light panel (no Products panel under it): round all corners
   and keep the figure sitting on the bottom edge */
.techkit-why.section--light { border-radius: var(--radius-lg); padding-bottom: 0; }
.techkit-why .solutions__grid::after { content: none; }
.techkit-why .solutions__copy { padding-bottom: var(--section-y); }
.techkit-why .solutions__figure img { max-height: 560px; }
.techkit__jump { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 2rem; }
.techkit__jump a { padding: .55rem 1.25rem; border: 1px solid var(--line-dark); border-radius: var(--radius-pill); font-size: .875rem; color: var(--text-on-dark-dim); transition: color .18s, border-color .18s; }
.techkit__jump a:hover { color: #fff; border-color: var(--blue-bright); }
.techkit__group { margin-top: clamp(2.5rem, 5vw, 4rem); scroll-margin-top: 150px; }
.techkit__group-title { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; font-size: .8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-bright); }
.techkit__group-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(72,118,255,.6), rgba(72,118,255,0)); }
.techkit__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.feature-card { display: flex; flex-direction: column; padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid var(--line-dark); border-radius: var(--radius-lg); background: linear-gradient(160deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 100%); }
.feature-card--wide { grid-column: 1 / -1; }
.feature-card h4 { color: #fff; margin-bottom: .875rem; }
.feature-card p { color: var(--text-on-dark-dim); font-size: .9375rem; line-height: 1.7; }
.feature-card p a { color: var(--blue-bright); text-decoration: underline; text-underline-offset: 3px; }
.feature-card .link-more { margin-top: 1.25rem; color: var(--blue-bright); }
/* the contact panel used outside the home page's white band */
.insights + .contact { padding-bottom: clamp(2rem, 5vw, 4rem); }
/* latest posts block (home, Tech Kit) */
.insights .section-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.insights .section-head .eyebrow { margin-bottom: .75rem; }
.insights .section-head p a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.insights__more { display: flex; justify-content: center; margin-top: clamp(2rem, 4vw, 3rem); }
.techkit + .insights { padding-top: 0; }
.post-cta .link-more { margin-top: 1rem; color: var(--blue-bright); }
@media (max-width: 860px) { .techkit__grid { grid-template-columns: 1fr; } }
@media (max-width: 1080px) { .techkit-why .solutions__copy { padding-bottom: 2.5rem; } }

/* ==========================================================================
   20. Blog
   ========================================================================== */
.blog-hero { padding: clamp(3rem, 6vw, 5rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.blog-hero__intro { max-width: 46rem; margin-top: 1rem; }
.blog-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.blog-filter a {
  padding: .5rem 1.1rem;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-pill);
  font-size: .875rem;
  color: var(--text-on-dark-dim);
  transition: color .18s, border-color .18s, background-color .18s;
}
.blog-filter a:hover { color: #fff; border-color: rgba(255,255,255,.4); }
.blog-filter a.is-active { color: #fff; background: var(--blue); border-color: var(--blue); }
.blog-list { padding-top: 1rem; }
.blog-empty { color: var(--text-on-dark-dim); }

/* cards */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.post-card {
  display: flex; flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, #fbfdff 0%, #e9f2f9 100%);
  color: var(--text-on-light);
  transition: transform .2s ease, box-shadow .2s ease;
}
.post-card:hover { transform: translateY(-3px); box-shadow: 0 22px 48px rgba(0,0,0,.35); }
.post-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-2); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
/* generated covers are 2:1 with text laid out for that frame - show the whole
   image, never crop the title off */
.post-card--generated .post-card__media { aspect-ratio: 2 / 1; }
.post-card--generated .post-card__media img { object-fit: contain; }
.post-card--featured.post-card--generated .post-card__media { aspect-ratio: auto; }
.post-card--featured.post-card--generated .post-card__media img { object-fit: cover; object-position: left center; }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__body { display: flex; flex-direction: column; gap: .75rem; padding: 1.5rem; flex: 1; }
.post-card__meta { display: flex; flex-wrap: wrap; gap: .75rem; font-size: .8125rem; color: var(--text-on-light-dim); }
.post-card__cat { font-weight: 600; color: var(--blue); }
.post-card__title { font-size: 1.25rem; font-weight: 500; line-height: 1.3; }
.post-card__title a:hover { color: var(--blue); }
.post-card__excerpt { font-size: .9375rem; color: var(--text-on-light-dim); }
.post-card .link-more { margin-top: auto; }
.post-card--featured { grid-column: 1 / -1; flex-direction: row; }
.post-card--featured .post-card__media { flex: 0 0 55%; aspect-ratio: auto; }
.post-card--featured .post-card__body { justify-content: center; padding: clamp(1.5rem, 3vw, 3rem); }
.post-card--featured .post-card__title { font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 300; }

/* pagination */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.pager__btn { padding: .625rem 1.25rem; border: 1px solid var(--line-dark); border-radius: var(--radius-sm); font-size: .875rem; transition: border-color .18s; }
.pager__btn:hover { border-color: rgba(255,255,255,.5); }
.pager__btn.is-disabled { opacity: .35; pointer-events: none; }
.pager__pages { display: flex; gap: .375rem; }
.pager__page, .pager__gap { display: grid; place-items: center; min-width: 40px; height: 40px; border-radius: var(--radius-sm); font-size: .875rem; }
.pager__page:hover { background: rgba(255,255,255,.08); }
.pager__page.is-current { background: var(--blue); color: #fff; }
.pager__gap { color: var(--text-on-dark-dim); }

/* article header */
.post-header { padding-top: clamp(2rem, 4vw, 3.5rem); }
.post-header__in { max-width: 56rem; }
.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .8125rem; color: var(--text-on-dark-dim); margin-bottom: 1.25rem; }
.crumbs a:hover { color: #fff; }
.post-title { font-size: clamp(2rem, 4.2vw, 3.25rem); font-weight: 300; line-height: 1.12; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.25rem; font-size: .875rem; color: var(--text-on-dark-dim); }
.post-meta__author { display: inline-flex; align-items: center; gap: .5rem; color: #fff; }
.post-meta__author img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.post-meta__draft { padding: .2rem .6rem; border-radius: 4px; background: #c0392b; color: #fff; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.post-cover { margin: clamp(1.5rem, 3vw, 2.5rem) auto 0; max-width: var(--wrap); padding-inline: var(--gutter); }
.post-cover img { width: 100%; border-radius: var(--radius-lg); aspect-ratio: 16 / 8; object-fit: cover; }
.post-cover figcaption { margin-top: .5rem; font-size: .75rem; color: var(--text-on-dark-dim); text-align: right; }

/* article layout: body + sticky side */
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(2rem, 5vw, 5rem); padding-block: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3rem); }
.post-side__sticky { position: sticky; top: 150px; display: flex; flex-direction: column; gap: 1.5rem; }
.post-cta { padding: 1.5rem; border: 1px solid var(--line-dark); border-radius: var(--radius); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); }
.post-cta h3 { font-size: 1.25rem; font-weight: 400; margin: .25rem 0 .5rem; }
.post-cta p:not(.eyebrow) { font-size: .9375rem; color: var(--text-on-dark-dim); margin-bottom: 1rem; }
.post-toc { font-size: .875rem; }
.post-toc__title { font-weight: 600; margin-bottom: .5rem; letter-spacing: .04em; text-transform: uppercase; font-size: .75rem; color: var(--text-on-dark-dim); }
.post-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line-dark); }
.post-toc li a { display: block; padding: .35rem 0 .35rem 1rem; color: var(--text-on-dark-dim); border-left: 2px solid transparent; margin-left: -1px; transition: color .18s, border-color .18s; }
.post-toc li a:hover, .post-toc li a.is-active { color: #fff; border-left-color: var(--blue-bright); }

/* article typography */
.prose { font-size: 1.0625rem; line-height: 1.75; color: rgba(252,252,255,.88); }
.prose > * + * { margin-top: 1.25em; }
.prose h2 { margin-top: 2.4em; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 400; line-height: 1.25; color: #fff; scroll-margin-top: 150px; }
.prose h3 { margin-top: 1.8em; font-size: 1.25rem; font-weight: 500; color: #fff; }
.prose a { color: var(--blue-bright); text-decoration: underline; text-decoration-color: rgba(72,118,255,.4); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: currentColor; }
.prose strong { color: #fff; font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li + li { margin-top: .5em; }
.prose ul li::marker { color: var(--blue-bright); }
/* labelled points ("Label: text") - the import turns runs of these into a callout list */
.prose .callout-list { list-style: none; padding: 0; display: grid; gap: .75rem; }
.prose .callout-list li { padding: 1rem 1.25rem 1rem 1.5rem; border-left: 3px solid var(--blue-bright); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: rgba(255,255,255,.05); }
.prose .callout-list strong { display: block; margin-bottom: .2rem; }
.prose blockquote { margin: 1.5em 0; padding: 1rem 1.5rem; border-left: 3px solid var(--violet-light); background: rgba(109,59,245,.1); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-style: italic; }
.prose .note, .prose .tip, .prose .warning { padding: 1rem 1.25rem; border-radius: var(--radius-sm); border: 1px solid; }
.prose .note { border-color: rgba(72,118,255,.5); background: rgba(72,118,255,.1); }
.prose .tip { border-color: rgba(58,212,212,.5); background: rgba(58,212,212,.08); }
.prose .warning { border-color: rgba(213,167,84,.6); background: rgba(213,167,84,.1); }
.prose .table-wrap { overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--line-dark); }
.prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.5; }
.prose th, .prose td { padding: .875rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-dark); }
.prose th { background: rgba(255,255,255,.07); color: #fff; font-weight: 600; white-space: nowrap; }
.prose tr:last-child td { border-bottom: 0; }
.prose tbody tr:nth-child(even) td { background: rgba(255,255,255,.025); }
.prose td:first-child { color: #fff; font-weight: 500; }
.prose .post-figure { margin: 2.5em 0; }
.prose .post-figure img { width: 100%; border-radius: var(--radius); aspect-ratio: 16 / 9; object-fit: cover; }
.prose .post-figure figcaption { margin-top: .5rem; font-size: .75rem; color: var(--text-on-dark-dim); text-align: right; }
.prose img:not(.post-figure img) { border-radius: var(--radius); }
.prose hr { border: 0; border-top: 1px solid var(--line-dark); margin: 2.5em 0; }
.prose code { padding: .1em .4em; border-radius: 4px; background: rgba(255,255,255,.1); font-size: .9em; }

/* FAQ */
.post-faq { margin-top: 3em; }
.faq-item { border-top: 1px solid var(--line-dark); }
.faq-item:last-child { border-bottom: 1px solid var(--line-dark); }
.faq-item summary { cursor: pointer; padding: 1rem 2.25rem 1rem 0; font-weight: 500; color: #fff; list-style: none; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: .25rem; top: .85rem; font-size: 1.4rem; color: var(--blue-bright); transition: transform .2s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: 0 0 1.25rem; color: rgba(252,252,255,.8); }

.post-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.5em; }
.post-tags a { padding: .3rem .8rem; border-radius: var(--radius-pill); background: rgba(255,255,255,.07); font-size: .8125rem; color: var(--text-on-dark-dim); }
.post-tags a:hover { color: #fff; background: rgba(255,255,255,.12); }

/* author */
.author-box { display: flex; gap: 1.5rem; margin-top: 3em; padding: 1.75rem; border-radius: var(--radius-lg); background: linear-gradient(155deg, #fbfdff 0%, #e9f2f9 100%); color: var(--text-on-light); }
.author-box__avatar { flex: 0 0 auto; }
.author-box__avatar img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.author-box__label { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-on-light-dim); }
.author-box__name { font-size: 1.25rem; font-weight: 500; margin-top: .25rem; }
.author-box__role { font-size: .875rem; color: var(--blue); font-weight: 500; }
.author-box__bio { margin-top: .75rem; font-size: .9375rem; line-height: 1.6; color: var(--text-on-light-dim); }
.author-box__links { display: flex; gap: 1rem; margin-top: .75rem; font-size: .875rem; font-weight: 500; }
.author-box__links a { color: var(--blue); }

.read-next { padding-top: 0; }
.read-next h2 { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }

@media (max-width: 1080px) {
  .post-layout { grid-template-columns: 1fr; }
  .post-side { display: none; }
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .post-grid { grid-template-columns: 1fr; }
  .post-card--featured { flex-direction: column; }
  .post-card--featured .post-card__media { flex: none; aspect-ratio: 16 / 10; }
  .post-card--featured.post-card--generated .post-card__media { aspect-ratio: 2 / 1; }
  .post-card--featured.post-card--generated .post-card__media img { object-fit: contain; }
  .author-box { flex-direction: column; }
  .pager__pages { display: none; }
  .prose { font-size: 1rem; }
}