/* ==========================================================================
   Modern Leads, v2 design preview
   Language inherited from moderninbound.com, inverted onto white:
   extralight Inter headlines, a short mint rule, one loud pill,
   mint and ember used only as light.
   ========================================================================== */

@property --trace { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  --paper: #ffffff;
  --ink: #0a0a0b;
  --ink-2: #27272a;
  --zinc: #71717a;
  --zinc-2: #a1a1aa;
  --zinc-3: #d4d4d8;
  --hair: #e4e4e7;
  --mist: #f4f4f5;
  --mist-2: #fafafa;
  --mint: #76e3ab;
  --mint-glow: rgba(118, 227, 171, 0.32);
  --emerald: #047857;
  --ember: #ff7a1a;
  --ember-soft: #ffb06e;

  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Newsreader", ui-serif, Georgia, serif;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --shadow-tile: 0 1px 1px rgba(10, 10, 11, 0.04), 0 6px 14px -6px rgba(10, 10, 11, 0.12), 0 22px 44px -22px rgba(10, 10, 11, 0.26);
  --shadow-lift: 0 2px 2px rgba(10, 10, 11, 0.04), 0 16px 30px -12px rgba(10, 10, 11, 0.18), 0 44px 80px -34px rgba(10, 10, 11, 0.34);
  --shadow-float: 0 0 0 1px rgba(10, 10, 11, 0.06), 0 20px 50px -20px rgba(10, 10, 11, 0.28), 0 50px 100px -40px rgba(10, 10, 11, 0.3);

  --container: 72rem;
  --gutter: 1.5rem;
  --prose: 42rem;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@view-transition { navigation: auto; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(118, 227, 171, 0.45); }
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Type ---------- */
.display {
  font-weight: 200;
  letter-spacing: -0.045em;
  line-height: 0.98;
  text-wrap: balance;
  margin: 0;
}
.sec-title {
  font-weight: 200;
  font-size: clamp(2.3rem, 4.6vw, 3.6rem);
  letter-spacing: -0.04em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}
.sec-sub { color: var(--zinc); font-size: 1.0625rem; margin: 1rem 0 0; max-width: 34rem; text-wrap: pretty; }
.rule { display: block; height: 2px; width: 7rem; background: var(--mint); border-radius: 2px; transform-origin: center; }
.rule.left { transform-origin: left; }

/* ---------- Header ---------- */
.hd {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, 0.74);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  transition: box-shadow 0.4s var(--ease);
}
.hd.is-scrolled { box-shadow: 0 1px 0 rgba(10, 10, 11, 0.07); }
.has-lnav .hd { position: relative; }
.hd-in { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 500; font-size: 1.0625rem; letter-spacing: -0.02em; }
.brand-mark { width: 30px; height: 20px; overflow: visible; }
.brand-mark .c1, .brand-mark .c2 { transition: transform 0.6s var(--ease-spring); }
.brand:hover .c1 { transform: translateX(-2.5px); }
.brand:hover .c2 { transform: translateX(2.5px); }
.brand-name span { color: var(--zinc-2); }
.hd-nav { display: flex; align-items: center; gap: 1.75rem; font-size: 0.9375rem; color: var(--zinc); }
.hd-nav a {
  background: linear-gradient(var(--ink), var(--ink)) left bottom / 0 1px no-repeat;
  padding-bottom: 2px;
  transition: color 0.3s var(--ease), background-size 0.45s var(--ease);
}
.hd-nav a:hover { color: var(--ink); background-size: 100% 1px; }
.search-btn {
  display: inline-flex; align-items: center; gap: 0.55rem; height: 36px; padding: 0 0.6rem 0 0.85rem;
  border: 0; border-radius: 999px; background: var(--mist); color: var(--zinc); font-size: 0.875rem; cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.18s var(--ease);
}
.search-btn:hover { background: #ececee; color: var(--ink); }
.search-btn:active { transform: scale(0.97); }
.search-btn kbd { font: 500 0.75rem/1 var(--sans); background: #fff; border-radius: 6px; padding: 0.3rem 0.4rem; color: var(--zinc); box-shadow: 0 1px 0 rgba(10,10,11,.08); }
.search-btn svg { width: 15px; height: 15px; }
@media (max-width: 760px) {
  .hd-nav a { display: none; }
  .search-btn .label, .search-btn kbd { display: none; }
  .search-btn { width: 36px; padding: 0; justify-content: center; }
}

/* ---------- Pills ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  height: 48px; padding: 0 1.75rem; border: 0; border-radius: 999px;
  font: 500 0.9375rem/1 var(--sans); cursor: pointer; white-space: nowrap;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.18s var(--ease);
}
.pill:active { transform: scale(0.97); }
.pill .arr { display: inline-block; transition: transform 0.3s var(--ease); }
.pill:hover .arr { transform: translateX(3px); }
.pill-ink { background: var(--ink); color: #fff; }
.pill-ink:hover { background: var(--mint); color: var(--ink); }
.pill-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--zinc-3); }
.pill-line:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.pill-sm { height: 38px; padding: 0 1.1rem; font-size: 0.875rem; }

/* ---------- The travelling light (moderninbound.com's film trace, in both brand colours) ---------- */
.trace { position: relative; }
.trace::before, .trace::after {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--trace),
    transparent 0deg 232deg,
    rgba(118, 227, 171, 0.0) 232deg,
    rgba(118, 227, 171, 0.95) 292deg,
    rgba(255, 176, 110, 0.95) 326deg,
    rgba(255, 122, 26, 1) 348deg,
    transparent 360deg);
  animation: trace-spin 9s linear infinite;
}
.trace::before {
  padding: 1.5px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  z-index: 2;
}
.trace::after { inset: 4px; filter: blur(22px); opacity: 0.38; z-index: -1; }
@keyframes trace-spin { to { --trace: 360deg; } }

/* ---------- Logo tiles ---------- */
.tile {
  --s: 64px;
  position: relative; display: grid; place-items: center; flex: none;
  width: var(--s); height: var(--s); border-radius: calc(var(--s) * 0.24);
  background: #fff; box-shadow: var(--shadow-tile); overflow: hidden;
}
.tile img { width: 100%; height: 100%; object-fit: cover; }
@supports (corner-shape: squircle) {
  .tile { corner-shape: squircle; border-radius: calc(var(--s) * 0.42); }
}
.tile.xs { --s: 22px; box-shadow: 0 0 0 1px rgba(10,10,11,.06); }
.tile.s { --s: 40px; }
.tile.m { --s: 56px; }
.tile.l { --s: 88px; }
.tile.xl { --s: clamp(104px, 13vw, 164px); }

/* ---------- Reveal (shared) ---------- */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
[data-reveal="left"] { transform: translateX(-48px); }
[data-reveal="right"] { transform: translateX(48px); }
[data-reveal="scale"] { transform: scale(0.96); }
[data-reveal].is-in { opacity: 1; transform: none; }
.rise { animation: rise 1s var(--ease) backwards; animation-delay: var(--d, 0s); }
@keyframes rise { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.draw { animation: draw 1.1s var(--ease) backwards; animation-delay: var(--d, 0.9s); }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ==========================================================================
   HOME
   ========================================================================== */
.hero { padding: clamp(6rem, 13vh, 9rem) 0 3.5rem; text-align: center; }
.hero h1 { font-size: clamp(2.9rem, 8.4vw, 6.6rem); }
.hero h1 span { display: block; }
.hero .rule { margin: 2.25rem auto 0; }
.hero-sub { color: var(--zinc); font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); line-height: 1.6; max-width: 36rem; margin: 1.6rem auto 0; text-wrap: balance; }

.compare {
  display: flex; align-items: center; gap: 0.5rem;
  width: min(100%, 40rem); margin: 3rem auto 0; padding: 0.5rem 0.5rem 0.5rem 1.35rem;
  border-radius: 999px; background: #fff; box-shadow: var(--shadow-tile);
}
.compare-icon { width: 18px; height: 18px; color: var(--zinc-2); flex: none; }
.compare-slot { position: relative; flex: 1; min-width: 0; height: 48px; display: flex; align-items: center; gap: 0.6rem; overflow: hidden; }
.compare-slot .roll { position: absolute; inset: 0; display: flex; align-items: center; gap: 0.6rem; transition: transform 0.7s var(--ease), opacity 0.7s var(--ease); }
.compare-slot .roll.out-up { transform: translateY(-110%); opacity: 0; }
.compare-slot .roll.in-down { transform: translateY(110%); opacity: 0; }
.compare-slot .tile { --s: 30px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(10,10,11,.06); }
@supports (corner-shape: squircle) { .compare-slot .tile { border-radius: 13px; } }
.compare-slot .nm { font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compare-vs { color: var(--zinc-2); font-size: 0.9375rem; flex: none; padding: 0 0.25rem; }
@media (max-width: 560px) {
  .compare { flex-wrap: wrap; border-radius: 26px; padding: 0.75rem; }
  .compare-icon { display: none; }
  .compare-slot { flex: 1 1 40%; }
  .compare .pill { flex: 1 1 100%; }
}

/* Logo river */
.river { position: relative; padding: 2.5rem 0 2.75rem; display: grid; gap: 0.35rem;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
.lane { overflow: visible; padding: 1.1rem 0 1.6rem; }
.belt { display: flex; gap: 1.1rem; width: max-content; animation: belt-right var(--dur, 70s) linear infinite; }
.lane[data-dir="left"] .belt { animation-name: belt-left; }
.lane:hover .belt { animation-play-state: paused; }
@keyframes belt-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes belt-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.rtile { position: relative; display: block; transition: transform 0.5s var(--ease-spring); }
.rtile .tile { --s: 76px; transition: box-shadow 0.5s var(--ease); }
.rtile:hover { transform: translateY(-8px) scale(1.06); z-index: 3; }
.rtile:hover .tile { box-shadow: var(--shadow-lift), 0 0 0 8px var(--mint-glow); }
.rtile .tip {
  position: absolute; left: 50%; top: calc(100% + 10px); transform: translate(-50%, -4px); opacity: 0;
  background: var(--ink); color: #fff; font-size: 0.75rem; font-weight: 500; padding: 0.3rem 0.6rem; border-radius: 999px; white-space: nowrap;
  transition: opacity 0.25s var(--ease), transform 0.35s var(--ease); pointer-events: none;
}
.rtile:hover .tip { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 760px) { .rtile .tile { --s: 58px; } .river { gap: 0.4rem; } }

/* Section scaffolding */
.sec { padding: clamp(5rem, 10vw, 8.5rem) 0; }
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: 2.75rem; }
.sec-head .rule { margin-top: 1.4rem; width: 4rem; }

/* Featured */
.feature {
  display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: clamp(2rem, 5vw, 4.5rem);
  border-radius: 32px; background: var(--mist-2); padding: clamp(1.5rem, 4vw, 3.5rem);
  box-shadow: inset 0 0 0 1px rgba(10,10,11,.04);
}
.feature-art { position: relative; aspect-ratio: 5 / 4; border-radius: 24px; background: radial-gradient(120% 90% at 50% 100%, rgba(118,227,171,.22), transparent 60%), #fff; display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 3vw, 2.25rem); overflow: hidden; }
.feature-art .vs { color: var(--zinc-2); font-size: 1rem; }
.feature-art .tile { --s: clamp(92px, 11vw, 132px); }
.feature-art .fa { transition: transform 1.1s var(--ease-spring); }
.feature-art .fa.a { transform: translateX(-70px) rotate(-8deg); }
.feature-art .fa.b { transform: translateX(70px) rotate(8deg); }
.feature.is-in .feature-art .fa { transform: none; }
.feature:hover .feature-art .fa.a { transform: translateX(-10px) rotate(-3deg); }
.feature:hover .feature-art .fa.b { transform: translateX(10px) rotate(3deg); }
.feature-kicker { font-size: 0.875rem; color: var(--emerald); font-weight: 500; }
.feature h2 { font-weight: 200; font-size: clamp(2.2rem, 4.4vw, 3.5rem); letter-spacing: -0.04em; line-height: 1.02; margin: 0.8rem 0 1rem; }
.feature p { color: var(--zinc); font-size: 1.125rem; line-height: 1.6; margin: 0 0 1.75rem; max-width: 28rem; }
.byl { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; color: var(--zinc); margin-bottom: 2rem; }
.byl b { color: var(--ink); font-weight: 500; }
.avatar {
  --a: 36px; width: var(--a); height: var(--a); border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: calc(var(--a) * 0.36); font-weight: 500; letter-spacing: 0.01em; color: var(--ink);
  background: radial-gradient(circle at 30% 25%, #fff, #e9f8f0 55%, #cdeedd);
  box-shadow: 0 0 0 1px rgba(10,10,11,.06), 0 0 0 4px #fff, 0 0 0 5px var(--mint);
}
@media (max-width: 860px) { .feature { grid-template-columns: 1fr; } }

/* Filter chips */
.chips { position: relative; display: flex; gap: 0.25rem; padding: 0.3rem; border-radius: 999px; background: var(--mist); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.chips::-webkit-scrollbar { display: none; }
.chip { position: relative; z-index: 1; border: 0; background: none; height: 34px; padding: 0 0.95rem; border-radius: 999px; font-size: 0.875rem; color: var(--zinc); cursor: pointer; white-space: nowrap; transition: color 0.35s var(--ease); }
.chip[aria-pressed="true"] { color: var(--ink); }
.chip-ind { position: absolute; z-index: 0; top: 0.3rem; left: 0; height: 34px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(10,10,11,.08), 0 4px 12px -4px rgba(10,10,11,.12); transition: transform 0.5s var(--ease-spring), width 0.5s var(--ease-spring); }

/* Post grid */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.25rem 1.75rem; }
@media (max-width: 960px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .posts { grid-template-columns: minmax(0, 1fr); } }
.post { display: block; }
.post-art {
  position: relative; aspect-ratio: 4 / 3; border-radius: 24px; background: var(--mist); overflow: hidden;
  display: grid; place-items: center; transition: background 0.6s var(--ease);
}
.post-art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 110%, var(--mint-glow), transparent 70%); opacity: 0; transition: opacity 0.6s var(--ease); }
.post:hover .post-art::after { opacity: 1; }
.pair { position: relative; display: flex; align-items: center; justify-content: center; }
.pair .tile { --s: clamp(70px, 8vw, 92px); transition: transform 0.7s var(--ease-spring), box-shadow 0.5s var(--ease); }
.pair .pa { transform: translateX(14px) rotate(-5deg); z-index: 1; }
.pair .pb { transform: translateX(-14px) rotate(5deg); z-index: 2; }
.post:hover .pair .pa { transform: translateX(-10px) rotate(-9deg); box-shadow: var(--shadow-lift); }
.post:hover .pair .pb { transform: translateX(10px) rotate(9deg); box-shadow: var(--shadow-lift); }
/* 3-5 tool cards: a fanned stack that deals out left to right on hover */
.pair.quad .tile { --s: clamp(54px, 6vw, 70px); margin-left: -20px; transition: transform 0.7s var(--ease-spring), margin 0.7s var(--ease-spring), box-shadow 0.5s var(--ease); }
.pair.quad .tile:first-child { margin-left: 0; }
.pair.quad .tile:nth-child(1) { transform: rotate(-9deg) translateY(5px); z-index: 1; }
.pair.quad .tile:nth-child(2) { transform: rotate(-3deg); z-index: 2; }
.pair.quad .tile:nth-child(3) { transform: rotate(3deg); z-index: 3; }
.pair.quad .tile:nth-child(4) { transform: rotate(9deg) translateY(5px); z-index: 4; }
.pair.quad .tile:nth-child(5) { transform: rotate(13deg) translateY(10px); z-index: 5; }
.post:hover .pair.quad .tile { transform: none; margin-left: 8px; box-shadow: var(--shadow-lift); }
.post:hover .pair.quad .tile:first-child { margin-left: 0; }
.post:hover .pair.quad .tile:nth-child(2) { transition-delay: 40ms; }
.post:hover .pair.quad .tile:nth-child(3) { transition-delay: 80ms; }
.post:hover .pair.quad .tile:nth-child(4) { transition-delay: 120ms; }
.fan { position: relative; width: 100%; height: 100%; }
.fan .tile { position: absolute; left: 50%; top: 50%; transition: transform 0.8s var(--ease-spring); }
.fan .f0 { --s: clamp(76px, 9vw, 100px); transform: translate(-50%, -50%); z-index: 3; }
.fan .f1, .fan .f2, .fan .f3, .fan .f4 { --s: 44px; transform: translate(-50%, -50%); }
.post:hover .fan .f1, .post.is-in .fan .f1 { transform: translate(calc(-50% - 88px), calc(-50% - 34px)) rotate(-10deg); }
.post:hover .fan .f2, .post.is-in .fan .f2 { transform: translate(calc(-50% + 88px), calc(-50% - 34px)) rotate(10deg); }
.post:hover .fan .f3, .post.is-in .fan .f3 { transform: translate(calc(-50% - 70px), calc(-50% + 46px)) rotate(8deg); }
.post:hover .fan .f4, .post.is-in .fan .f4 { transform: translate(calc(-50% + 70px), calc(-50% + 46px)) rotate(-8deg); }
.post:hover .fan .f1 { transform: translate(calc(-50% - 104px), calc(-50% - 40px)) rotate(-14deg); }
.post:hover .fan .f2 { transform: translate(calc(-50% + 104px), calc(-50% - 40px)) rotate(14deg); }
.post-meta { display: flex; gap: 0.9rem; margin: 1.15rem 0 0.45rem; font-size: 0.8125rem; color: var(--zinc); }
.post-meta .cat { color: var(--emerald); font-weight: 500; }
.post h3 { font-weight: 300; font-size: 1.55rem; letter-spacing: -0.03em; line-height: 1.15; margin: 0; transition: color 0.3s var(--ease); }
.post p { color: var(--zinc); margin: 0.5rem 0 0; font-size: 0.9688rem; line-height: 1.55; }
.post.is-hidden { display: none; }

/* Pinned category gallery */
.gal { position: relative; }
.gal-sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.gal-head { margin-bottom: 2.5rem; }
.gal-track { display: flex; gap: 1.5rem; padding: 0 var(--gutter); will-change: transform; }
.gal-card {
  position: relative; flex: none; width: clamp(280px, 30vw, 360px); aspect-ratio: 4 / 5; border-radius: 28px; background: var(--mist-2);
  box-shadow: inset 0 0 0 1px rgba(10,10,11,.05); padding: 1.75rem; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.gal-card:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px rgba(10,10,11,.05), var(--shadow-lift); }
.gal-card h3 { font-weight: 200; font-size: 2rem; letter-spacing: -0.04em; line-height: 1.02; margin: 0; }
.gal-card p { color: var(--zinc); font-size: 0.9375rem; margin: 0.75rem 0 0; }
.gal-stack { position: relative; height: 150px; }
.gal-stack .tile { --s: 64px; position: absolute; bottom: 0; transition: transform 0.7s var(--ease-spring); }
.gal-stack .tile:nth-child(1) { left: 0; transform: rotate(-6deg); }
.gal-stack .tile:nth-child(2) { left: 52px; bottom: 26px; transform: rotate(4deg); }
.gal-stack .tile:nth-child(3) { left: 104px; transform: rotate(-3deg); }
.gal-stack .tile:nth-child(4) { left: 156px; bottom: 30px; transform: rotate(7deg); }
.gal-card:hover .gal-stack .tile:nth-child(odd) { transform: translateY(-14px) rotate(0); }
.gal-card:hover .gal-stack .tile:nth-child(even) { transform: translateY(8px) rotate(0); }
.gal-link { font-size: 0.875rem; font-weight: 500; display: inline-flex; gap: 0.4rem; margin-top: 1.25rem; }
.gal-link .arr { transition: transform 0.3s var(--ease); }
.gal-card:hover .gal-link .arr { transform: translateX(3px); }
@media (max-width: 760px), (prefers-reduced-motion: reduce) {
  .gal { height: auto !important; }
  .gal-sticky { position: static; height: auto; padding: 5rem 0; }
  .gal-track { transform: none !important; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; scrollbar-width: none; }
  .gal-track::-webkit-scrollbar { display: none; }
  .gal-card { scroll-snap-align: start; }
}

/* Author strip */
.author { display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: center; max-width: 52rem; margin: 0 auto; }
.author .avatar { --a: 96px; }
.author h2 { font-weight: 200; font-size: clamp(1.8rem, 3.4vw, 2.6rem); letter-spacing: -0.035em; line-height: 1.1; margin: 0 0 0.8rem; text-wrap: balance; }
.author p { color: var(--zinc); margin: 0 0 1.25rem; font-size: 1.0625rem; max-width: 36rem; }
.author-links { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (max-width: 640px) { .author { grid-template-columns: 1fr; text-align: left; gap: 1.25rem; } }

/* Footer */
.ft { border-top: 1px solid var(--hair); padding: 3rem 0 3.5rem; margin-top: 2rem; font-size: 0.875rem; color: var(--zinc); }
.ft-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.ft-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.ft-links a:hover, .ft a.mail:hover { color: var(--ink); }

/* ==========================================================================
   ARTICLE
   ========================================================================== */
.ahero { position: relative; text-align: center; padding: clamp(4.5rem, 10vh, 7rem) 0 clamp(4rem, 9vh, 6rem); }
.ahero-pair { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 3vw, 2.5rem); margin-bottom: 3rem; }
.ahero-pair .vs { color: var(--zinc-2); font-size: 1.0625rem; }
.slot, .intro { display: block; }
.slot { will-change: transform; transform: translateX(calc(var(--p, 0) * var(--dir) * 90px)) rotate(calc(var(--p, 0) * var(--dir) * 10deg)); opacity: calc(1 - var(--p, 0) * 0.7); }
.slot.a { --dir: -1; }
.slot.b { --dir: 1; }
.intro { animation: meet 1.3s var(--ease-spring) backwards; }
.slot.a .intro { --from: -80px; --rot: -10deg; }
.slot.b .intro { --from: 80px; --rot: 10deg; animation-delay: 0.06s; }
@keyframes meet { from { opacity: 0; transform: translateX(var(--from)) rotate(var(--rot)) scale(0.92); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
.vt-arrived .intro { animation: none; }
.tilt { transition: transform 0.6s var(--ease); transform-style: preserve-3d; }
.tilt .glare { position: absolute; inset: 0; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.55), transparent 55%); opacity: 0; transition: opacity 0.4s var(--ease); pointer-events: none; }
.tilt:hover .glare { opacity: 1; }
.ahero h1 { font-size: clamp(3rem, 8vw, 6.4rem); }
.ahero-dek { color: var(--zinc); font-size: clamp(1.125rem, 2vw, 1.4rem); line-height: 1.5; max-width: 34rem; margin: 1.5rem auto 0; text-wrap: balance; }
.ahero .rule { margin: 2.25rem auto 0; }
.ahero .byl { justify-content: center; margin: 2.25rem 0 0; flex-wrap: wrap; row-gap: 0.5rem; }
.byl .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--zinc-3); }
.ahero-text { transform: translateY(calc(var(--p, 0) * -40px)); opacity: calc(1 - var(--p, 0) * 0.9); }

/* Local nav */
.lnav {
  position: sticky; top: 0; z-index: 55; height: 56px;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 rgba(10,10,11,.07);
  margin-bottom: -56px; transform: translateY(-100%); opacity: 0; pointer-events: none;
  transition: transform 0.5s var(--ease), opacity 0.4s var(--ease);
}
.lnav.is-on { transform: none; opacity: 1; pointer-events: auto; }
.lnav-in { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.lnav-title { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 500; font-size: 0.9375rem; letter-spacing: -0.01em; white-space: nowrap; }
.lnav-title .tile + .tile { margin-left: -8px; }
.lnav-title .t { margin-left: 0.45rem; }
.lnav-links { position: relative; display: flex; gap: 0.15rem; overflow-x: auto; scrollbar-width: none; }
.lnav-links::-webkit-scrollbar { display: none; }
.lnav-links a { position: relative; z-index: 1; padding: 0.45rem 0.8rem; border-radius: 999px; font-size: 0.8125rem; color: var(--zinc); white-space: nowrap; transition: color 0.3s var(--ease); }
.lnav-links a.is-active { color: var(--ink); }
.lnav-ind { position: absolute; z-index: 0; top: 50%; left: 0; height: 30px; margin-top: -15px; border-radius: 999px; background: var(--mist); transition: transform 0.5s var(--ease-spring), width 0.5s var(--ease-spring), opacity 0.3s; }
.lnav-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--mint), var(--ember-soft) 70%, var(--ember)); transform-origin: left; transform: scaleX(var(--read, 0)); }
@media (max-width: 760px) { .lnav-title .t { display: none; } }

/* Short answer, scrubbed */
.scrub-sec { position: relative; height: 230vh; }
.scrub-sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.scrub-label { font-size: 0.9375rem; color: var(--emerald); font-weight: 500; margin: 0 0 1.25rem; }
.scrub { font-weight: 300; font-size: clamp(1.8rem, 3.7vw, 3.05rem); letter-spacing: -0.035em; line-height: 1.22; margin: 0; max-width: 58rem; text-wrap: pretty; }
.scrub .w { opacity: calc(0.14 + var(--w, 0) * 0.86); transition: opacity 0.12s linear; }
.scrub .w.hl { background: linear-gradient(transparent 62%, rgba(118,227,171, calc(var(--w, 0) * 0.55)) 62%); }

/* At a glance */
.glance { max-width: 60rem; margin: 0 auto; }
.gl-head { position: sticky; top: 56px; z-index: 5; display: grid; grid-template-columns: 1fr 1fr; background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); padding: 1.25rem 0 1rem; margin-top: 3rem; border-bottom: 1px solid var(--hair); }
.gl-head div { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; font-weight: 500; }
.gl-row { display: grid; grid-template-columns: 1fr 1fr; padding: 2.1rem 0 2rem; border-bottom: 1px solid var(--hair); position: relative; }
.gl-label { grid-column: 1 / -1; text-align: center; font-size: 0.8125rem; color: var(--zinc); margin: 0 0 1rem; }
.gl-cell { text-align: center; padding: 0 1rem; }
.gl-cell b { display: block; font-weight: 200; font-size: clamp(1.9rem, 4vw, 2.9rem); letter-spacing: -0.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.gl-cell span { display: block; color: var(--zinc); font-size: 0.9375rem; margin-top: 0.45rem; }
.gl-cell.win b { color: var(--ink); }
.gl-cell.win::after { content: ""; display: block; width: 26px; height: 2px; border-radius: 2px; background: var(--mint); margin: 0.9rem auto 0; }
.src {
  display: inline-grid; place-items: center; vertical-align: super; width: 17px; height: 17px; margin-left: 3px; border: 0; border-radius: 50%;
  background: var(--mist); color: var(--zinc); font: 600 0.625rem/1 var(--sans); cursor: pointer; transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease-spring);
}
.src:hover, .src[aria-expanded="true"] { background: var(--mint); color: var(--ink); transform: scale(1.15); }

/* Cost */
.cost-card { margin-top: 3rem; border-radius: 32px; background: var(--mist-2); box-shadow: inset 0 0 0 1px rgba(10,10,11,.04); padding: clamp(1.5rem, 4vw, 3rem); }
.seat-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.seat-read { font-weight: 200; font-size: clamp(3rem, 7vw, 5rem); letter-spacing: -0.05em; line-height: 1; }
.seat-read small { font-size: 1.0625rem; letter-spacing: -0.01em; color: var(--zinc); font-weight: 400; margin-left: 0.6rem; }
.seat-hint { color: var(--zinc); font-size: 0.9375rem; }
.range { --v: 13.8%; -webkit-appearance: none; appearance: none; width: 100%; height: 40px; margin: 1.5rem 0 2.25rem; background: none; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--ink) var(--v), var(--zinc-3) var(--v)); }
.range::-moz-range-track { height: 4px; border-radius: 4px; background: var(--zinc-3); }
.range::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--ink); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -13px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0.5px rgba(10,10,11,.12), 0 3px 8px rgba(10,10,11,.18), 0 8px 20px -6px rgba(10,10,11,.25); transition: transform 0.25s var(--ease-spring), box-shadow 0.3s; }
.range::-moz-range-thumb { width: 30px; height: 30px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(10,10,11,.18); }
.range:active::-webkit-slider-thumb { transform: scale(1.12); box-shadow: 0 0 0 6px var(--mint-glow), 0 3px 8px rgba(10,10,11,.18); }
.crow { display: grid; grid-template-columns: 11rem 1fr 9.5rem; align-items: center; gap: 1.25rem; padding: 0.9rem 0; }
.crow-name { display: flex; align-items: center; gap: 0.75rem; font-weight: 500; }
.cbar { height: 14px; border-radius: 14px; background: rgba(10,10,11,.05); overflow: hidden; }
.cbar i { display: block; height: 100%; width: var(--w, 0%); border-radius: 14px; background: var(--ink); transition: width 0.9s var(--ease-spring); }
.crow.a .cbar i { background: linear-gradient(90deg, #3fcf8e, var(--mint)); }
.crow.b .cbar i { background: linear-gradient(90deg, var(--ember-soft), var(--ember)); }
.crow-val { text-align: right; font-weight: 300; font-size: 1.6rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.crow-val small { display: block; font-size: 0.75rem; color: var(--zinc); letter-spacing: 0; font-weight: 400; }
.cost-gap { margin: 1.75rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--hair); font-size: 1.125rem; }
.cost-gap b { font-weight: 500; }
.cost-note { color: var(--zinc-2); font-size: 0.8125rem; margin: 0.75rem 0 0; }
@media (max-width: 640px) { .crow { grid-template-columns: 1fr auto; } .crow .cbar { grid-column: 1 / -1; grid-row: 2; } }

/* Odometer */
.odo { display: inline-flex; font-variant-numeric: tabular-nums; }
.odo .dg { display: inline-block; height: 1.1em; overflow: hidden; position: relative; }
.odo .dg i { display: block; font-style: normal; transition: transform 0.8s var(--ease-spring); }
.odo .dg i span { display: block; height: 1.1em; line-height: 1.1em; }
.odo .st { display: inline-block; height: 1.1em; line-height: 1.1em; }

/* Diverging scores */
.dv { margin-top: 3.25rem; }
.dv-head, .dv-row { display: grid; grid-template-columns: 1fr 12rem 1fr; align-items: center; }
.dv-head { margin-bottom: 1.25rem; }
.dv-head .l { display: flex; align-items: center; gap: 0.7rem; justify-content: flex-end; font-weight: 500; }
.dv-head .r { display: flex; align-items: center; gap: 0.7rem; font-weight: 500; }
.dv-row { padding: 0.8rem 0; }
.dv-label { text-align: center; font-size: 0.9375rem; color: var(--ink-2); }
.dv-side { position: relative; height: 34px; display: flex; align-items: center; }
.dv-side.l { justify-content: flex-end; }
.dv-bar { height: 100%; width: 0; border-radius: 10px; background: var(--zinc-3); display: flex; align-items: center; transition: width 1.1s var(--ease-spring); transition-delay: calc(var(--i, 0) * 90ms); }
.dv-side.l .dv-bar { justify-content: flex-start; border-radius: 10px 4px 4px 10px; }
.dv-side.r .dv-bar { justify-content: flex-end; border-radius: 4px 10px 10px 4px; }
.dv-bar.win { background: var(--ink); color: #fff; }
.dv-bar span { font-size: 0.8125rem; font-weight: 500; padding: 0 0.7rem; opacity: 0; transition: opacity 0.4s var(--ease) 0.6s; font-variant-numeric: tabular-nums; }
.dv-bar:not(.win) span { color: var(--ink-2); }
.dv.is-in .dv-bar { width: var(--w); }
.dv.is-in .dv-bar span { opacity: 1; }
.dv-note { text-align: center; color: var(--zinc-2); font-size: 0.8125rem; margin-top: 1.5rem; }
@media (max-width: 640px) {
  .dv-head, .dv-row { grid-template-columns: 1fr 1fr; }
  .dv-label { grid-column: 1 / -1; grid-row: 1; margin-bottom: 0.4rem; }
  .dv-head .mid { display: none; }
}

/* Prose */
.prose { max-width: var(--prose); margin: 0 auto; font-family: var(--serif); font-size: 1.28rem; line-height: 1.72; color: var(--ink-2); }
.prose p { margin: 0 0 1.4rem; text-wrap: pretty; }
.prose h2 { font-family: var(--sans); font-weight: 300; font-size: clamp(1.85rem, 3.2vw, 2.4rem); letter-spacing: -0.035em; line-height: 1.12; color: var(--ink); margin: 4.5rem 0 1.4rem; text-wrap: balance; }
.prose h2::after { content: ""; display: block; width: 3rem; height: 2px; background: var(--mint); border-radius: 2px; margin-top: 1.1rem; }
.prose a { color: var(--ink); background: linear-gradient(var(--mint), var(--mint)) left bottom / 100% 2px no-repeat; transition: background-size 0.3s var(--ease); }
.prose a:hover { background-size: 100% 100%; }
.quote { margin: 5rem auto; max-width: 52rem; text-align: center; }
.quote p { font-weight: 200; font-size: clamp(2rem, 4.4vw, 3.4rem); letter-spacing: -0.045em; line-height: 1.08; margin: 0; text-wrap: balance; }
.quote .rule { margin: 2rem auto 0; width: 4rem; }
.quote cite { display: block; margin-top: 1.25rem; font-style: normal; font-size: 0.9375rem; color: var(--zinc); }

/* Verdict */
.verdict { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 3rem; }
.vcard { border-radius: 32px; background: var(--mist-2); box-shadow: inset 0 0 0 1px rgba(10,10,11,.04); padding: clamp(1.75rem, 3.5vw, 2.75rem); display: flex; flex-direction: column; }
.vcard .tile { margin-bottom: 1.75rem; }
.vcard h3 { font-weight: 200; font-size: clamp(1.9rem, 3.2vw, 2.5rem); letter-spacing: -0.04em; line-height: 1.05; margin: 0 0 1rem; }
.vcard .fit { font-size: 1.125rem; line-height: 1.55; margin: 0 0 1.25rem; text-wrap: pretty; }
.vcard .short { color: var(--zinc); font-size: 0.9688rem; margin: 0 0 2rem; }
.vcard .short b { color: var(--ink-2); font-weight: 500; }
.vcard .pill { margin-top: auto; align-self: flex-start; }
@media (max-width: 760px) { .verdict { grid-template-columns: 1fr; } }

/* Modern Inbound moment */
.mi { border-radius: 36px; background: #fff; box-shadow: var(--shadow-float); padding: clamp(2.5rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem); text-align: center; }
.mi h2 { font-weight: 200; font-size: clamp(2.3rem, 5vw, 4rem); letter-spacing: -0.045em; line-height: 1.02; margin: 0; text-wrap: balance; }
.mi p { color: var(--zinc); font-size: 1.125rem; max-width: 32rem; margin: 1.25rem auto 2.25rem; text-wrap: balance; }
.mi .rule { margin: 1.75rem auto 0; width: 4rem; }

/* FAQ */
.faq { max-width: var(--prose); margin: 3rem auto 0; }
.faq details { border-bottom: 1px solid var(--hair); interpolate-size: allow-keywords; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.5rem 0; font-size: 1.1875rem; font-weight: 400; letter-spacing: -0.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq .pm { position: relative; width: 14px; height: 14px; flex: none; transition: transform 0.45s var(--ease-spring); }
.faq .pm::before, .faq .pm::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; background: var(--ink); border-radius: 2px; }
.faq .pm::after { transform: rotate(90deg); transition: transform 0.45s var(--ease-spring); }
.faq details[open] .pm { transform: rotate(180deg); }
.faq details[open] .pm::after { transform: rotate(0deg); }
.faq details::details-content { height: 0; overflow: clip; transition: height 0.5s var(--ease), content-visibility 0.5s allow-discrete; }
.faq details[open]::details-content { height: auto; }
.faq .ans { padding: 0 2.5rem 1.6rem 0; font-family: var(--serif); font-size: 1.16rem; line-height: 1.65; color: var(--ink-2); }

/* Author card (article): same format as moderninbound.com */
.author-card { max-width: var(--prose); margin: 4rem auto 0; padding-top: 2rem; border-top: 1px solid #e8e6e0; display: flex; align-items: flex-start; gap: 1.25rem; }
.author-photo { width: 48px; height: 48px; flex: none; border-radius: 50%; object-fit: contain; background: #fff; box-shadow: 0 0 0 1px rgba(10,10,11,.06); }
.author-name { margin: 0; font-size: 0.9375rem; color: var(--ink); font-weight: 500; }
.author-name span { margin-left: 0.5rem; color: #96999c; font-weight: 400; }
.author-bio { margin: 0.4rem 0 0; max-width: 36rem; font-size: 0.9375rem; line-height: 1.7; color: var(--zinc); }
.author-bio a { margin-left: 0.6rem; color: #0e7a47; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(14,122,71,.3); transition: text-decoration-color .2s; }
.author-bio a:first-of-type { margin-left: 0.25rem; }
.author-bio a:hover { text-decoration-color: #0e7a47; }
@media (max-width: 640px) { .author-name span { display: block; margin: 0.1rem 0 0; } .author-bio a { white-space: nowrap; } }
.byl a { color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(10,10,11,.18); transition: text-decoration-color .2s; }
.byl a:hover { text-decoration-color: var(--mint); }
img.avatar { object-fit: contain; background: #fff; }

/* Related comparisons (article) */
.related { max-width: var(--prose); margin: 3.5rem auto 0; }
.related h2 { font-weight: 300; font-size: 1.5rem; letter-spacing: -0.02em; margin: 0 0 1rem; }
.related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.related a { display: flex; flex-direction: column; gap: 0.2rem; padding: 1rem 1.25rem; border-radius: 18px; background: var(--mist-2); box-shadow: inset 0 0 0 1px rgba(10,10,11,.04); color: var(--ink); text-decoration: none; transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s; }
.related a:hover { transform: translateX(4px); box-shadow: inset 0 0 0 1px rgba(118,227,171,.6); }
.related b { font-weight: 500; }
.related span { color: var(--zinc); font-size: 0.9375rem; }

/* Sources */
.sources { max-width: var(--prose); margin: 2rem auto 0; font-size: 0.9375rem; color: var(--zinc); }
.sources summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 0.5rem; }
.sources summary::-webkit-details-marker { display: none; }
.sources summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.4s var(--ease-spring); }
.sources[open] summary::after { transform: rotate(225deg) translateY(-1px); }
.sources ol { margin: 1rem 0 0; padding-left: 1.25rem; line-height: 1.8; }

/* Receipt popover */
.receipt {
  position: fixed; z-index: 90; width: min(22rem, calc(100vw - 2rem)); padding: 1.1rem 1.2rem 1rem;
  border-radius: 20px; background: rgba(255,255,255,.86); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  box-shadow: var(--shadow-float); transform-origin: var(--ox, 50%) var(--oy, 0%);
  opacity: 0; transform: scale(0.92) translateY(-4px); pointer-events: none; transition: opacity 0.22s var(--ease), transform 0.4s var(--ease-spring);
}
.receipt.is-open { opacity: 1; transform: none; pointer-events: auto; }
.receipt .rk { font-size: 0.75rem; color: var(--emerald); font-weight: 500; }
.receipt .rt { margin: 0.4rem 0 0.7rem; font-size: 0.9688rem; line-height: 1.45; color: var(--ink); }
.receipt .rs { font-size: 0.8125rem; color: var(--zinc); line-height: 1.5; }
@media (max-width: 640px) {
  .receipt { left: 0.75rem !important; right: 0.75rem; top: auto !important; bottom: 0.75rem; width: auto; transform: translateY(24px); transform-origin: 50% 100%; }
}

/* Command palette */
.palette-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity 0.25s var(--ease); }
.palette-backdrop.is-open { opacity: 1; pointer-events: auto; }
.palette { position: fixed; z-index: 101; left: 50%; top: 14vh; width: min(40rem, calc(100vw - 2rem)); transform: translateX(-50%) scale(0.96); opacity: 0; pointer-events: none; border-radius: 22px; background: rgba(255,255,255,.92); -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px); box-shadow: var(--shadow-float); overflow: hidden; transition: opacity 0.22s var(--ease), transform 0.4s var(--ease-spring); }
.palette.is-open { opacity: 1; transform: translateX(-50%) scale(1); pointer-events: auto; }
.palette input { width: 100%; border: 0; outline: 0; background: none; padding: 1.35rem 1.5rem; font: 300 1.375rem/1.2 var(--sans); letter-spacing: -0.02em; color: var(--ink); border-bottom: 1px solid var(--hair); }
.palette ul { list-style: none; margin: 0; padding: 0.5rem; max-height: 50vh; overflow: auto; }
.palette li a { display: flex; align-items: center; gap: 0.9rem; padding: 0.7rem 0.9rem; border-radius: 12px; }
.palette li a .pr { display: flex; }
.palette li a .pr .tile + .tile { margin-left: -8px; }
.palette li a .pc { margin-left: auto; font-size: 0.8125rem; color: var(--zinc); }
.palette li a:hover, .palette li a.is-sel { background: var(--mist); }
.palette .empty { padding: 1.5rem; color: var(--zinc); text-align: center; }

/* Toast + preview chip */
.toast { position: fixed; left: 50%; bottom: 1.5rem; z-index: 120; transform: translate(-50%, 20px); opacity: 0; background: var(--ink); color: #fff; font-size: 0.875rem; padding: 0.7rem 1.1rem; border-radius: 999px; box-shadow: var(--shadow-float); transition: opacity 0.3s var(--ease), transform 0.45s var(--ease-spring); pointer-events: none; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.pv { position: fixed; left: 1rem; bottom: 1rem; z-index: 80; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.8rem; border-radius: 999px; background: rgba(255,255,255,.8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 0 0 1px rgba(10,10,11,.07), 0 6px 18px -8px rgba(10,10,11,.2); font-size: 0.75rem; color: var(--zinc); }
.pv i { width: 7px; height: 7px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 3px rgba(255,122,26,.18); }
.pv .pv-more { display: none; }
.pv:hover .pv-more, .pv:focus-within .pv-more { display: inline; }

/* View transitions */
::view-transition-group(*) { animation-duration: 0.65s; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
::view-transition-old(root) { animation: 0.3s var(--ease) both vt-out; }
::view-transition-new(root) { animation: 0.55s var(--ease) 0.08s both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
  .belt { animation: none !important; }
  .trace::before, .trace::after { animation: none; }
  [data-reveal] { opacity: 1; transform: none; }
  .scrub .w { opacity: 1; }
  .scrub-sec { height: auto; }
  .scrub-sticky { position: static; height: auto; padding: 6rem 0; }
  .slot, .ahero-text { transform: none !important; opacity: 1 !important; }
}

/* ---------- Rendered Codex articles ---------- */
.prose h3 { font-family: var(--sans); font-weight: 500; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--ink); margin: 2.5rem 0 0.9rem; }
.prose ul, .prose ol { margin: 0 0 1.4rem; padding-left: 1.3rem; }
.prose li { margin-bottom: 0.5rem; }
.prose li::marker { color: var(--zinc-2); }
.prose strong { color: var(--ink); font-weight: 600; }
.cite { display: inline-block; vertical-align: super; font: 600 0.62rem/1 var(--sans); color: var(--emerald); background: none !important; padding: 0 1px; margin-left: 1px; }
.cite:hover { color: var(--ink); }
.prose .src { vertical-align: 0.35em; }
.ptable { margin: 2rem 0 2.25rem; overflow-x: auto; font-family: var(--sans); }
.ptable table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }
.ptable th { text-align: left; font-weight: 500; font-size: 0.8125rem; color: var(--zinc); padding: 0 1rem 0.75rem 0; border-bottom: 1px solid var(--hair); }
.ptable td { padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--hair); vertical-align: top; color: var(--ink-2); }
.ptable td:first-child { color: var(--ink); font-weight: 500; width: 30%; }
.ptable .fit { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 500; color: var(--ink); white-space: nowrap; }
/* Side-by-side matrix (3+ tools): breaks out of the prose column, first column sticks on scroll */
.ptable.matrix { width: min(1120px, calc(100vw - 32px)); margin-left: calc(50% - min(560px, 50vw - 16px)); padding-bottom: 0.25rem; }
.ptable.matrix table { min-width: 780px; table-layout: fixed; }
.ptable.matrix th { color: var(--ink); font-size: 0.9375rem; padding-right: 1.25rem; }
.ptable.matrix td { font-size: 0.875rem; padding-right: 1.25rem; }
.ptable.matrix th:first-child, .ptable.matrix td:first-child { position: sticky; left: 0; z-index: 1; width: 17%; background: #fff; box-shadow: 8px 0 12px -10px rgba(10,10,11,.12); }
.ptable.matrix tbody tr { transition: background-color .2s; }
.ptable.matrix tbody tr:hover, .ptable.matrix tbody tr:hover td:first-child { background: #f7faf8; }
.ahero-pair.multi { gap: clamp(0.5rem, 2vw, 1.5rem); flex-wrap: wrap; }
.ahero-pair.multi .tile.xl { --s: clamp(60px, 9vw, 116px); }
.ahero-pair.multi .vs { font-size: 0.9375rem; }
.ahero h1.display.long { font-size: clamp(2.5rem, 6.4vw, 5.5rem); line-height: 1.02; text-wrap: balance; }
.draft-chip { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 auto 1.75rem; padding: 0.4rem 0.85rem; border-radius: 999px; background: #fff7ed; color: #9a3412; font-size: 0.8125rem; }
.draft-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--ember); }
.sources-list { max-width: var(--prose); margin: 3rem auto 0; }
.sources-list h2 { font-weight: 300; font-size: 1.5rem; letter-spacing: -0.03em; margin: 0 0 1rem; }
.sources-list ol { margin: 0; padding-left: 1.4rem; color: var(--zinc); font-size: 0.9375rem; line-height: 1.8; }
.sources-list a { color: var(--ink); background: linear-gradient(var(--mint), var(--mint)) left bottom / 100% 1.5px no-repeat; }
.sources-list li:target { background: rgba(118,227,171,.18); border-radius: 6px; }
.receipt .rq { margin: 0.6rem 0 0; padding: 0.6rem 0.75rem; border-radius: 10px; background: var(--mist); font-family: var(--serif); font-style: italic; font-size: 0.9375rem; line-height: 1.45; color: var(--ink-2); }
.receipt .rq + .rq { margin-top: 0.5rem; }
.receipt .rq a { display: block; margin-top: 0.35rem; font-family: var(--sans); font-style: normal; font-size: 0.75rem; color: var(--emerald); }

/* Gallery: keep the heading and the first card on the page's one left edge */
.gal-sticky > .wrap { width: 100%; }
.gal-track { padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); padding-right: var(--gutter); }

/* Phone polish */
@media (max-width: 560px) {
  .ahero .byl .sep { display: none; }
  .ahero .byl { column-gap: 1rem; }
}
.dv.is-in .dv-bar { min-width: 2rem; }

/* Short answer: always clear the section bar, and scale long answers down so they fit one screen */
.scrub-sticky { padding-top: 64px; box-sizing: border-box; }
.scrub.long { font-size: clamp(1.45rem, 2.5vw, 2.15rem); line-height: 1.3; letter-spacing: -0.025em; }
.scrub.xlong { font-size: clamp(1.3rem, 2.1vw, 1.8rem); line-height: 1.35; letter-spacing: -0.02em; }
@media (max-width: 640px) { .scrub.long, .scrub.xlong { font-size: 1.35rem; } }

/* Vendor profiles (/tools/<key>) and the /tools directory */
.tool-hero .ahero-pair { margin-bottom: 2rem; }
.tool-crumb { font-size: 0.875rem; color: var(--zinc); margin: 0 0 1rem; }
.tool-crumb a { color: var(--zinc); text-decoration: none; }
.tool-crumb a:hover { color: var(--ink); }
.tool-crumb span { margin: 0 0.35rem; color: var(--zinc-3); }
.tool-glance { max-width: var(--prose); margin: 0 auto 2.5rem; padding: 1.75rem 2rem; border-radius: 24px; background: var(--mist-2); box-shadow: inset 0 0 0 1px rgba(10,10,11,.04); }
.tool-glance h2 { font-weight: 300; font-size: 1.5rem; letter-spacing: -0.02em; margin: 0 0 1rem; }
.tool-glance dl { margin: 0; display: grid; gap: 0.75rem; }
.tool-glance dl > div { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--hair); }
.tool-glance dl > div:first-child { border-top: 0; padding-top: 0; }
.tool-glance dt { color: var(--zinc); font-size: 0.875rem; }
.tool-glance dd { margin: 0; color: var(--ink); }
.tool-note { max-width: var(--prose); margin: 1rem auto 0; color: var(--zinc); font-size: 0.8125rem; line-height: 1.6; }
.tool-glance .tool-note { margin: 1rem 0 0; }
.tool-jump { max-width: var(--prose); margin: 0 auto 1rem; display: flex; flex-wrap: wrap; gap: 0.4rem; position: sticky; top: 64px; z-index: 5; padding: 0.5rem 0; background: linear-gradient(#fff 70%, rgba(255,255,255,0)); }
.tool-jump a { font-size: 0.8125rem; padding: 0.35rem 0.8rem; border-radius: 999px; background: var(--mist); color: var(--ink); text-decoration: none; transition: background .2s, transform .25s var(--ease); }
.tool-jump a:hover { background: #e7f7ee; transform: translateX(2px); }
.tool-group { max-width: var(--prose); margin: 2.5rem auto 0; scroll-margin-top: 120px; }
.tool-group h2 { font-weight: 300; font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.025em; margin: 0 0 0.75rem; display: flex; align-items: baseline; gap: 0.6rem; }
.tool-group h2 span { font-size: 0.8125rem; font-weight: 500; color: #0e7a47; background: #e7f7ee; border-radius: 999px; padding: 0.15rem 0.55rem; letter-spacing: 0; }
.tool-group ul { list-style: none; margin: 0; padding: 0; }
.fact { padding: 1.1rem 0; border-top: 1px solid var(--hair); }
.fact p { margin: 0; color: var(--ink); line-height: 1.6; }
.fact-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin-top: 0.4rem; font-size: 0.8125rem; color: var(--zinc); }
.fact-meta a { color: #0e7a47; text-decoration: none; }
.fact-meta a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fact details { margin-top: 0.4rem; font-size: 0.8125rem; }
.fact summary { cursor: pointer; color: var(--zinc); list-style: none; display: inline-flex; align-items: center; gap: 0.35rem; }
.fact summary::before { content: "+"; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--mist); font-size: 0.75rem; transition: transform .25s var(--ease); }
.fact details[open] summary::before { transform: rotate(45deg); }
.fact summary::-webkit-details-marker { display: none; }
.fact blockquote { margin: 0.6rem 0 0; padding: 0.75rem 1rem; border-left: 2px solid var(--mint); background: #f7faf8; border-radius: 0 12px 12px 0; color: var(--ink-2); font-family: "Newsreader", Georgia, serif; font-size: 0.9375rem; line-height: 1.55; }
.tool-peers { max-width: var(--prose); margin: 3rem auto 0; }
.tool-peers h2 { font-weight: 300; font-size: 1.5rem; letter-spacing: -0.02em; margin: 0 0 1rem; }
.tool-peers > div { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tool-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.9rem 0.45rem 0.5rem; border-radius: 999px; background: var(--mist-2); box-shadow: inset 0 0 0 1px rgba(10,10,11,.05); color: var(--ink); text-decoration: none; font-size: 0.9375rem; transition: transform .25s var(--ease), box-shadow .25s; }
.tool-chip:hover { transform: translateX(3px); box-shadow: inset 0 0 0 1px rgba(118,227,171,.7); }
.tool-method { margin-top: 2.5rem; }
.tool-cat { max-width: 1120px; margin: 3rem auto 0; scroll-margin-top: 80px; }
.tool-cat h2 { font-weight: 300; font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.025em; margin: 0 0 1.25rem; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.75rem; }
.tool-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 0.9rem; row-gap: 0.15rem; padding: 1.1rem 1.2rem; border-radius: 20px; background: var(--mist-2); box-shadow: inset 0 0 0 1px rgba(10,10,11,.04); color: var(--ink); text-decoration: none; transition: transform .35s var(--ease-spring), box-shadow .3s; }
.tool-card .tile { grid-row: 1 / span 3; --s: 44px; }
.tool-card b { font-weight: 500; }
.tool-card span { color: var(--zinc); font-size: 0.8125rem; line-height: 1.45; }
.tool-card em { font-style: normal; font-size: 0.75rem; color: #0e7a47; }
.tool-card:hover { transform: translateX(4px); box-shadow: inset 0 0 0 1px rgba(118,227,171,.7), var(--shadow-lift); }
.tool-soon p { color: var(--zinc); line-height: 1.7; max-width: 60rem; }
.rtile:not([href]) { cursor: default; }
@media (max-width: 640px) { .tool-glance { padding: 1.25rem; } .tool-glance dl > div { grid-template-columns: 1fr; gap: 0.2rem; } }
.tool-soon-line { margin: 0.9rem 0 0; color: var(--zinc); font-size: 0.875rem; line-height: 1.6; }
.tool-cat .tool-grid + .tool-soon-line { margin-top: 1rem; }

.ft-legal { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--hair); font-size: 0.75rem; line-height: 1.6; color: var(--zinc); max-width: 1120px; }

.byl-by { display: inline; white-space: normal; }
.byl-photo { vertical-align: middle; margin-right: 0.5rem; display: inline-block; width: 28px; height: 28px; border-radius: 50%; object-fit: contain; background: #fff; box-shadow: 0 0 0 1px rgba(10,10,11,.08), 0 0 0 3px #fff, 0 0 0 4px var(--mint); flex: none; }

/* Footer author block: the one place the author is named */
.ft-author { display: flex; align-items: flex-start; gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--hair); max-width: 1120px; }
.ft-author img { width: 44px; height: 44px; border-radius: 50%; object-fit: contain; background: #fff; flex: none; box-shadow: 0 0 0 1px rgba(10,10,11,.08), 0 0 0 3px #fff, 0 0 0 4px var(--mint); }
.ft-author p { margin: 0; max-width: 46rem; font-size: 0.875rem; line-height: 1.65; color: var(--zinc); }
.ft-author b { color: var(--ink); font-weight: 500; }
.ft-author span { color: var(--zinc); margin-left: 0.35rem; }
.ft-author a { color: #0e7a47; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(14,122,71,.3); margin-left: 0.5rem; }
.ft-author a:first-of-type { margin-left: 0.15rem; }
.author:not(:has(img)) { grid-template-columns: 1fr; max-width: 46rem; }
@media (max-width: 640px) { .mi .pill { white-space: normal; text-align: center; line-height: 1.35; max-width: 100%; } }

/* Generated home cards: one tool (alternatives/pricing pages), no tool (benchmarks), archive link */
.pair.solo .tile { --s: clamp(78px, 9vw, 104px); transform: rotate(-4deg); }
.post:hover .pair.solo .tile { transform: rotate(0deg) translateY(-4px); box-shadow: var(--shadow-lift); }
.pair.glyph .brand-mark { width: clamp(72px, 8vw, 96px); height: auto; transition: transform 0.7s var(--ease-spring); }
.post:hover .pair.glyph .brand-mark { transform: translateX(6px) scale(1.04); }
.post-more .post-art { background: linear-gradient(135deg, #f1fbf6, var(--mist)); }
.arch-n { font-size: 0.8125rem; font-weight: 500; color: #0e7a47; background: #e7f7ee; border-radius: 999px; padding: 0.15rem 0.55rem; letter-spacing: 0; vertical-align: middle; }
.tool-cat .related { max-width: none; margin: 0; }
.tool-cat .related ul { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0.75rem; }

/* Newsletter signup */
.nl { max-width: var(--prose); margin: 0 auto; display: grid; gap: 1.25rem; padding: 2rem 2.25rem; border-radius: 28px; background: linear-gradient(135deg, #f3fbf7 0%, #fafafa 60%); box-shadow: inset 0 0 0 1px rgba(10,10,11,.05); }
.nl-eyebrow { margin: 0 0 0.4rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #0e7a47; }
.nl h2 { margin: 0 0 0.5rem; font-weight: 300; font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: -0.03em; }
.nl-copy p:last-child { margin: 0; color: var(--zinc); line-height: 1.6; }
.nl-field { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.nl-field input[type=email] { flex: 1 1 240px; min-width: 0; padding: 0.85rem 1.1rem; border-radius: 999px; border: 1px solid #dcdcde; background: #fff; font: inherit; font-size: 1rem; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.nl-field input[type=email]:focus { outline: none; border-color: var(--mint); box-shadow: 0 0 0 4px rgba(118,227,171,.25); }
.nl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.nl-msg { margin: 0; min-height: 1.2em; font-size: 0.875rem; color: var(--zinc); }
.nl.nl-err .nl-msg { color: #b45309; }
.nl.nl-done .nl-field { display: none; }
.nl.nl-done .nl-msg { color: #0e7a47; font-size: 1rem; font-weight: 500; }
@media (max-width: 640px) { .nl { padding: 1.5rem; } .nl-field .pill { width: 100%; justify-content: center; } }