:root {
  --bg: #ececea;
  --bg-2: #f6f6f4;
  --fg: #111110;
  --muted: #5f5f5b;
  --line: rgba(0, 0, 0, 0.12);
  --accent: #c41f22;
  --on-photo: #f6f6f4;
  --max: 1440px;
  --gutter: clamp(20px, 4vw, 56px);
  --sans: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

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

a:focus-visible, button:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.mono {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Nav: full-width over the photo at the top of the page; once scrolled it
   detaches into a floating rounded bar, with a strip naming the current section */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  color: var(--on-photo);
  transition: padding 0.35s, color 0.3s;
}
.nav.scrolled, .nav.open { color: var(--fg); }
.nav.scrolled { padding: 12px 16px 0; }
.nav-shell {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  border: 1px solid transparent;
  border-radius: 36px;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, border-radius 0.3s;
}
.nav.scrolled .nav-shell {
  background: rgba(246, 246, 244, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: var(--line);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
}
.nav.has-sub .nav-shell { border-radius: 22px; }
.nav-shell > .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  transition: height 0.35s;
}
/* In the floating bar the links row is the same 48px as the section strip */
.nav.scrolled .nav-shell > .wrap { height: 48px; padding-inline: 28px; }

/* Current-section strip under the links: collapsed until a section is reached */
.nav-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s;
}
.nav-sub-inner {
  margin: 0;
  max-width: none;
  min-height: 0;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-size: 15px;
}
.nav.has-sub .nav-sub { grid-template-rows: 1fr; }
.nav.has-sub .nav-sub-inner {
  border-top: 1px solid var(--line);
  height: 48px;
  padding: 0 28px;
}
.nav-sub-title { font-weight: 500; white-space: nowrap; }
.nav-sub-desc { color: var(--muted); text-align: right; }
.logo {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 15px;
}
.nav-links a:not(.btn) { color: inherit; opacity: 0.8; transition: opacity 0.2s; }
.nav-links a:not(.btn):hover { opacity: 1; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--fg);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  background: var(--fg);
  color: var(--bg);
  transition: background 0.2s, color 0.2s;
}
.btn:hover { background: transparent; color: var(--fg); }
.btn.ghost { background: transparent; color: var(--fg); }
.btn.ghost:hover { background: var(--fg); color: var(--bg); }
/* Inverted pill while the nav sits over the photo */
.nav:not(.scrolled):not(.open) .btn { background: var(--on-photo); border-color: var(--on-photo); color: var(--fg); }
.nav:not(.scrolled):not(.open) .btn:hover { background: transparent; color: var(--on-photo); }

.menu-toggle {
  display: none;
  background: none;
  border: 0;
  color: inherit;
  padding: 8px;
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  width: 22px;
  height: 1px;
  background: currentColor;
  margin: 6px 0;
  transition: transform 0.3s, opacity 0.3s;
}
.nav.open .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.open .menu-toggle span:nth-child(2) { opacity: 0; }
.nav.open .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Hero: the photo is fixed to the viewport, so the headline, stats and every
   later section scroll up over it until it is covered */
/* Pull the hero up under the full nav height: 68px bar + 1px bottom border */
.hero {
  position: relative;
  padding-bottom: 72px;
}
.hero .wrap { position: relative; z-index: 2; }
.hero-media {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  background: var(--bg);
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Crop the sky above the scanner so the tunnel portal and the ground in front of
     it stay in view, while the scanner head still clears the nav on wide screens */
  object-position: 50% 72%;
}
/* Blur and darken the sky behind the nav so the links stay readable */
.hero-media::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 0 auto 0;
  height: 150px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent);
  mask-image: linear-gradient(to bottom, #000 45%, transparent);
  background: linear-gradient(to bottom, rgba(10, 10, 10, 0.7), rgba(10, 10, 10, 0));
}
/* Translucent page-colour wash behind the text, solid by the bottom edge */
.hero-media::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(236, 236, 234, 0) 0%, rgba(236, 236, 234, 0) 28%,
    rgba(236, 236, 234, 0.55) 42%, rgba(236, 236, 234, 0.6) 100%);
}
.hero-copy {
  text-align: center;
  color: var(--muted);
  /* Leave the scanner visible above the headline */
  padding-top: clamp(180px, calc(42vh - 69px), 400px);
}
.hero h1 {
  font-size: clamp(44px, 6.4vw, 100px);
  line-height: 0.95;
  letter-spacing: -0.045em;
  font-weight: 500;
  color: var(--fg);
  margin: 0 auto;
  max-width: 16ch;
}
.hero-copy p { font-size: 21px; line-height: 1.4; margin: 28px auto 0; max-width: 34ch; }
/* Secondary text over the photo needs a little more weight than the page's muted grey */
.hero-copy p, .hero .stat .mono { color: #3a3a37; }
.hero-cta { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.hero-copy .hero-cta { justify-content: center; }

/* Sections */
main > section:not(.hero), footer {
  position: relative;
  z-index: 1;
  background: var(--bg);
}
.section { padding-block: clamp(72px, 10vw, 144px); }
/* The first section after the hero eases in over the fixed photo across its top
   padding, instead of cutting it off with a hard edge */
#solutions {
  --fade: clamp(72px, 10vw, 144px);
  background: linear-gradient(to bottom,
    rgba(236, 236, 234, 0) 0,
    rgba(236, 236, 234, 0.45) calc(var(--fade) * 0.4),
    rgba(236, 236, 234, 0.85) calc(var(--fade) * 0.75),
    var(--bg) var(--fade));
}

.section-head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  margin-bottom: clamp(40px, 6vw, 80px);
}
.section-head .mono { grid-column: 1 / span 3; padding-top: 12px; }
.section-head h2 { grid-column: 4 / span 9; }

h2 {
  font-size: clamp(36px, 5.2vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 500;
  margin: 0;
}
h3 {
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 500;
  margin: 0 0 20px;
}

.lead {
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin: 0;
}
.lead .dim { color: var(--muted); }

.overview-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.overview-grid .mono { grid-column: 1 / span 3; padding-top: 10px; }
.overview-grid .body { grid-column: 4 / span 9; }

/* Proof strip */
/* Round scroll cue pinned to the bottom of the viewport; hidden once the visitor scrolls on */
.scroll-cue {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 40;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg);
  color: var(--fg);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  transition: background 0.2s, color 0.2s, opacity 0.3s;
}
.scroll-cue:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16); }
.scroll-cue.hidden { opacity: 0; pointer-events: none; }
/* One bob every 2.2s; the colour steps to the next one at the start of each bob:
   black first, then blue, red and the rest of the rainbow, looping (6 x 2.2s = 13.2s) */
.scroll-cue svg {
  animation: bob 2.2s ease-in-out infinite, rainbow 13.2s step-end infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(3px); }
}
@keyframes rainbow {
  0%       { color: #111110; } /* black */
  16.6667% { color: #1e6fd9; } /* blue */
  33.3333% { color: #e52428; } /* red */
  50%      { color: #c8551a; } /* dark orange */
  66.6667% { color: #2e9e4f; } /* green */
  83.3333% { color: #8e3fb8; } /* violet */
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(32px, 4vw, 56px);
}
.stat {
  padding: 28px 24px 28px 0;
}
.stat + .stat { padding-left: 24px; }
.stat b {
  display: block;
  font-size: clamp(44px, 6vw, 88px);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1;
  margin-bottom: 12px;
}

/* Features */
/* Product cards stack: each sticks below the floating bar and the next one slides up over it */
.feature {
  position: sticky;
  top: 128px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: center;
  min-height: 520px;
  padding: clamp(32px, 4vw, 56px);
  margin-bottom: 40px;
  background: var(--bg-2);
  border-radius: 48px;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
}
.feature:last-of-type { margin-bottom: 0; }
/* Text keeps a 10% breathing space on the side facing the diagram */
.feature .text { grid-column: 1 / span 7; padding-inline-end: 10%; }
.feature .text .mono { display: block; margin-bottom: 24px; }
.feature .text p { color: var(--muted); margin: 0 0 16px; }
.feature .text p.hl { color: var(--fg); margin-bottom: 28px; }
.feature .fig {
  grid-column: 8 / span 5;
  border: 1px solid var(--line);
  border-radius: 48px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.05);
  background: var(--bg);
  aspect-ratio: 4 / 3;
  padding: 24px;
  position: relative;
}
.feature .fig svg { width: 100%; height: 100%; }
.feature .fig .mono { position: absolute; top: 16px; left: 20px; }
.feature.flip .text { grid-column: 6 / span 7; grid-row: 1; padding-inline-end: 0; padding-inline-start: 10%; }
.feature.flip .fig { grid-column: 1 / span 5; grid-row: 1; }

.tag {
  font-style: normal;
  color: var(--accent);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 8px;
  white-space: nowrap;
}

.pulse { animation: pulse 2.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.8); }
}

/* Team */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 20px;
  margin-top: clamp(48px, 6vw, 72px);
}
.person .portrait {
  aspect-ratio: 1;
  border-radius: 4px;
  margin-bottom: 14px;
  display: grid;
  place-items: center;
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--muted);
  background: linear-gradient(180deg, #f6f6f4, #e2e2df);
  border: 1px solid var(--line);
  transition: transform 0.4s;
}
.person:hover .portrait { transform: translateY(-4px); }
.person .name { font-weight: 500; letter-spacing: -0.01em; }
.person .role { color: var(--muted); font-size: 14px; }

footer {
  padding-block: 48px;
}
footer .wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}
.foot-mark {
  /* Sized so the full line fits the content width on a wide screen; wraps below that */
  font-size: clamp(34px, 5.3vw, 78px);
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 0.95;
  width: 100%;
  color: #dcdcd9;
  margin-bottom: 40px;
  user-select: none;
}
footer address { font-style: normal; color: var(--muted); font-size: 14px; }
footer nav { display: flex; gap: 24px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
footer nav a:hover { color: var(--fg); }

/* Reveal: only hide content when JS is running to reveal it again */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .pulse, .scroll-cue svg { animation: none; }
}

/* Responsive */
@media (max-width: 1024px) {
  .team-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px), (max-height: 760px) {
  .feature { position: static; min-height: 0; }
}

@media (max-width: 768px) {
  body { font-size: 16px; }
  .menu-toggle { display: block; }
  /* Anchored to the sticky nav, so it always opens directly below it */
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 24px var(--gutter) 32px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s;
  }
  .nav-links a:not(.btn) { font-size: 22px; color: var(--fg); }
  .nav.open .nav-links { opacity: 1; transform: none; pointer-events: auto; }
  .nav.open .nav-shell { background: var(--bg); border-radius: 0; }
  .nav.open { padding: 0; }
  .nav.scrolled .nav-shell > .wrap { padding-inline: var(--gutter); }
  .nav-sub-desc { display: none; }

  .section-head, .overview-grid, .feature {
    grid-template-columns: 1fr;
  }
  .section-head .mono, .section-head h2,
  .overview-grid .mono, .overview-grid .body,
  .feature .text, .feature .fig, .feature.flip .text, .feature.flip .fig {
    grid-column: 1;
    grid-row: auto;
  }
  .feature .text, .feature.flip .text { padding-inline: 0; }

  .stats { grid-template-columns: 1fr; }
  .stat + .stat { padding-left: 0; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Book-a-demo prompt and booking window */
.avatar {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f6f6f4, #d9d9d6);
  border: 1px solid var(--line);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.02em;
  color: var(--muted);
  flex: none;
}
.avatar.lg { width: 92px; height: 92px; font-size: 30px; }
.demo-prompt {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 45;
  display: flex;
  align-items: stretch;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
.demo-prompt.hidden { display: none; }
.demo-open, .demo-dismiss, .demo-close, .demo-month-nav button, .demo-clock button, .demo-link {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
.demo-open {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 20px 8px 8px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.demo-open:hover { background: var(--bg); }
.demo-dismiss {
  display: grid;
  place-items: center;
  padding: 0 16px;
  border-left: 1px solid var(--line);
  color: var(--muted);
}
.demo-dismiss:hover { color: var(--fg); background: var(--bg); }

.demo-dialog {
  width: min(1100px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--bg-2);
  color: var(--fg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
  display: none;
  grid-template-columns: 380px minmax(0, 1fr);
  overflow: hidden;
}
.demo-dialog[open] { display: grid; }
.demo-dialog::backdrop { background: rgba(10, 10, 10, 0.35); backdrop-filter: blur(6px); }
.demo-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--muted);
}
.demo-close:hover { background: var(--bg); color: var(--fg); }
.demo-side {
  padding: 40px 36px;
  border-right: 1px solid var(--line);
  font-size: 17px;
}
.demo-host { display: flex; align-items: center; gap: 20px; }
.demo-name { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
.demo-facts { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; color: var(--muted); }
.demo-facts li { display: flex; gap: 14px; align-items: flex-start; }
.demo-facts svg { flex: none; margin-top: 2px; }
.demo-tz { display: flex; align-items: center; gap: 24px; margin: 18px 0 0 36px; }
.demo-link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; padding: 0; }
.demo-clock { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.demo-clock button { padding: 6px 16px; border-radius: 999px; color: var(--muted); }
.demo-clock button.on { background: var(--bg); color: var(--fg); }
.demo-side hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
.demo-side h3 { font-size: 18px; margin: 0 0 14px; }
.demo-agenda { margin: 0; padding: 0 0 0 28px; color: var(--muted); }
.demo-agenda li { margin-bottom: 12px; padding-left: 8px; }
.demo-agenda li::marker { font-size: 13px; color: var(--muted); }

.demo-main {
  padding: 40px 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px 48px;
  align-content: start;
}
.demo-main h2 { grid-column: 1 / -1; font-size: 28px; letter-spacing: -0.03em; margin: 0; }
.demo-month { display: flex; justify-content: space-between; align-items: center; font-size: 22px; letter-spacing: -0.02em; margin-bottom: 18px; }
.demo-month-nav button { width: 40px; height: 40px; border-radius: 50%; color: var(--muted); display: inline-grid; place-items: center; }
.demo-month-nav button:hover { background: var(--bg); color: var(--fg); }
.demo-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.demo-grid .dow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--muted); text-align: center; padding: 8px 0 12px; }
.demo-grid .day {
  font: inherit;
  font-size: 18px;
  aspect-ratio: 1;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--muted);
  display: grid;
  place-items: center;
  position: relative;
  cursor: default;
}
.demo-grid .day.open { background: rgba(196, 31, 34, 0.08); color: var(--accent); font-weight: 500; cursor: pointer; }
.demo-grid .day.open:hover { background: rgba(196, 31, 34, 0.16); }
.demo-grid .day.selected { background: var(--accent); color: #fff; }
.demo-grid .day.today::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 8px; height: 2px; background: currentColor; }
.demo-day-head { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; font-size: 20px; letter-spacing: -0.02em; margin-top: 54px; }
.demo-day-head .dim { font-size: 17px; }
.demo-slots { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.demo-slots button {
  font: inherit;
  font-size: 18px;
  padding: 14px 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
  color: var(--fg);
  cursor: pointer;
}
.demo-slots button:hover { border-color: var(--fg); }
.demo-slots .none { color: var(--muted); }

@media (max-width: 900px) {
  .demo-dialog { grid-template-columns: 1fr; overflow: auto; }
  .demo-side { border-right: 0; border-bottom: 1px solid var(--line); padding: 28px 24px; }
  .demo-main { grid-template-columns: 1fr; padding: 28px 24px; }
  .demo-day-head { margin-top: 0; }
}
@media (max-width: 768px) {
  .demo-prompt { right: 16px; bottom: 92px; }
  .demo-open { font-size: 15px; gap: 10px; padding-right: 14px; }
  .avatar { width: 36px; height: 36px; font-size: 13px; }
}

/* Blog index (blog.html) */
.subpage main { padding-top: 96px; }
.blog-index h1 {
  font-size: clamp(44px, 6vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.045em;
  font-weight: 500;
  margin: 0;
}
.blog-intro { color: var(--muted); font-size: 19px; max-width: 56ch; margin: 20px 0 0; }
.post-list {
  list-style: none;
  margin: clamp(48px, 6vw, 88px) 0 0;
  padding: 0;
  max-width: 760px;
}
.post + .post { margin-top: clamp(40px, 5vw, 64px); }
.post .mono { margin-bottom: 12px; }
.post h2 {
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 500;
  margin: 0 0 12px;
}
.post h2 a { text-decoration: none; transition: color 0.2s; }
.post h2 a:hover { color: var(--accent); }
.post p { color: var(--muted); margin: 0; max-width: 60ch; }