.filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

.cases { display: grid; gap: 20px; padding-bottom: var(--section); }
.case-card {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  overflow: hidden; text-decoration: none;
  transition: transform 0.4s var(--ease), box-shadow 0.4s, border-color 0.4s;
}
.case-card:not([hidden]) { animation: swap-in 0.5s var(--ease) both; }
.case-card:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -36px rgb(0 0 0 / 45%); border-color: var(--color-primary); }
.case-card:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.case-card:nth-child(even) .case-card__image { order: 2; }
.case-card__image { overflow: hidden; min-height: 420px; background: var(--color-tint); }
.case-card__image img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1.4s var(--ease); }
.case-card:hover .case-card__image img { transform: translateY(-8%) scale(1.05); }
.case-card__body { padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; gap: 18px; }
.case-card__body h2 { font-size: clamp(34px, 3.6vw, 44px); }
.case-card__body p { font-size: 20px; color: var(--color-muted); }
.case-card__body .link-arrow { margin-top: auto; }

.testimonials { columns: 2; column-gap: 18px; }
.testimonial {
  break-inside: avoid; margin: 0 0 18px; padding: 30px; display: flex; flex-direction: column; gap: 22px;
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 18px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s;
}
.testimonial:hover { transform: translateY(-5px) rotate(-0.4deg); box-shadow: 0 26px 40px -28px rgb(0 0 0 / 40%); }
.testimonial--primary { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.testimonial--accent { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }
.testimonial blockquote { margin: 0; font-size: 20px; line-height: 1.45; }
.testimonial figcaption { display: flex; gap: 14px; align-items: center; }
.testimonial img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.testimonial__role { font-size: 15px; opacity: 0.8; }

.case-meta { margin: 0; display: grid; gap: 16px; font-size: 16px; }
.case-meta dt { color: var(--color-muted); }
.case-meta dd { margin: 0; font-weight: 600; }
.case-shot { padding-bottom: var(--section); }
.case-shot .shot { aspect-ratio: 16 / 8; }
.case-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-bottom: var(--section); }
.case-stats .card { padding: 28px; }
.case-stats strong { display: block; font-size: clamp(40px, 4.4vw, 56px); font-weight: 700; letter-spacing: -0.05em; color: var(--color-primary); line-height: 1; }
.case-stats p { color: var(--color-muted); margin-top: 10px; }
.case-story { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: clamp(32px, 6vw, 72px); align-items: start; padding-bottom: var(--section); }
.case-story > div:last-child { display: grid; gap: 22px; font-size: 21px; }

.day-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.day {
  font: inherit; color: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 10px;
  background: var(--color-surface); border: 1.5px solid var(--color-line); border-radius: 18px; padding: 24px; min-height: 200px;
  transition: all 0.35s var(--ease);
}
.day:hover { border-color: var(--color-ink); }
.day[aria-selected="true"] { background: var(--color-dark); color: var(--color-on-dark); border-color: var(--color-dark); transform: translateY(-6px); }
.day strong { font-size: 24px; letter-spacing: -0.02em; }
.day span { color: var(--color-muted); font-size: 16px; }
.day[aria-selected="true"] span { color: var(--color-dark-muted); }

.sprint-bar { display: flex; height: 96px; border-radius: 18px; overflow: hidden; gap: 4px; }
.sprint-bar button {
  font: inherit; cursor: pointer; border: 0; text-align: left; padding: 18px 22px; display: flex; flex-direction: column; justify-content: space-between;
  font-weight: 600; color: var(--color-ink); background: var(--color-tint); transition: background 0.3s, color 0.3s;
}
.sprint-bar button:first-child { flex: 4; }
.sprint-bar button:last-child { flex: 1; background: var(--color-accent-soft); }
.sprint-bar button strong { font-size: 28px; letter-spacing: -0.03em; }
.sprint-bar button[aria-selected="true"] { background: var(--color-primary); color: var(--color-on-primary); }
.sprint-bar button:last-child[aria-selected="true"] { background: var(--color-accent); color: var(--color-on-accent); }
.sprint-panel { margin-top: 20px; padding: 36px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; }
.sprint-panel:not([hidden]), .systems-panel:not([hidden]) { animation: swap-in 0.45s var(--ease) both; }

.systems-panel { margin-top: 24px; }
.systems { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.system { background: var(--color-surface); border: 1.5px dashed var(--color-line); border-radius: 16px; padding: 22px; display: grid; gap: 6px; }
.system strong { font-size: 19px; }
.system span { color: var(--color-muted); font-size: 15px; }
.system--tilt:nth-child(odd) { transform: rotate(-1.2deg); }
.system--tilt:nth-child(even) { transform: rotate(1deg); }
.flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 20px; align-items: stretch; }
.flow__link { align-self: center; }
.flow__node { border-radius: 20px; padding: 30px; display: flex; flex-direction: column; gap: 8px; }
.flow__node--primary { background: var(--color-primary); color: var(--color-on-primary); }
.flow__node--dark { background: var(--color-dark); color: var(--color-on-dark); }
.flow__node strong { font-size: 26px; letter-spacing: -0.02em; }
.flow__node span { opacity: 0.85; }
.flow__link { display: grid; justify-items: center; gap: 6px; font-weight: 600; color: var(--color-accent-text); font-size: 15px; }
.flow__link svg { width: 40px; height: 40px; }

.suggest-box { padding: 36px 40px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 40px; align-items: center; }
.price-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; padding-block: 40px var(--section); }
.price-tier {
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 24px; padding: 40px;
  display: flex; flex-direction: column; gap: 14px; transition: all 0.45s var(--ease);
}
.price-tier.is-suggested { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); transform: translateY(-10px); box-shadow: 0 40px 60px -36px var(--color-primary); }
.price-tier__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.price-tier__head strong { font-size: 22px; }
.price-tier__flag { display: none; background: var(--color-accent); color: var(--color-on-accent); }
.price-tier.is-suggested .price-tier__flag { display: inline-block; animation: swap-in 0.4s var(--ease) both; }
.price-tier__price { font-size: clamp(52px, 5.6vw, 72px); font-weight: 700; letter-spacing: -0.05em; line-height: 0.9; }
.price-tier__price small { font-size: 20px; letter-spacing: 0; opacity: 0.7; }
.price-tier__meta { opacity: 0.75; }
.price-tier .ticks li { border-color: color-mix(in srgb, currentcolor 14%, transparent); }
.price-tier.is-suggested .ticks svg { color: var(--color-accent); }
.price-tier .btn { margin-top: auto; align-self: flex-start; }
.price-tier .btn--accent { display: none; }
.price-tier.is-suggested .btn--accent { display: inline-flex; }
.price-tier.is-suggested .btn--secondary { display: none; }

.policy-cards { padding-bottom: var(--section); }
.policy-cards .card { padding: 26px; }
.policy-cards p { color: var(--color-muted); margin-top: 8px; font-size: 16px; }

.underline-tabs { display: flex; flex-wrap: wrap; gap: 4px 26px; border-bottom: 1px solid var(--color-line); margin: 24px 0 8px; }
.underline-tabs button {
  font: inherit; cursor: pointer; background: none; border: 0; border-bottom: 3px solid transparent;
  padding: 14px 4px; font-size: 19px; font-weight: 600; color: var(--color-muted); transition: color 0.25s, border-color 0.25s;
}
.underline-tabs button:hover { color: var(--color-ink); }
.underline-tabs button[aria-selected="true"] { color: var(--color-ink); border-color: var(--color-primary); }
.price-table { width: 100%; border-collapse: collapse; font-size: 18px; }
.price-table:not([hidden]) { animation: swap-in 0.45s var(--ease) both; }
.price-table th, .price-table td { padding: 18px 0; border-top: 1px solid var(--color-line); text-align: left; font-weight: 400; }
.price-table td { text-align: right; font-weight: 600; color: var(--color-primary-text); }
.price-table tr { transition: background 0.2s; }
.price-table tr:hover { background: color-mix(in srgb, var(--color-tint) 50%, transparent); }
.price-table caption { caption-side: bottom; text-align: left; color: var(--color-muted); font-size: 15px; padding-top: 14px; }

.method { padding-bottom: var(--section); }
.method__step {
  position: sticky; display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start;
  border-radius: 24px; padding: clamp(32px, 5vw, 56px); min-height: 300px; margin-bottom: 28px;
  border: 1px solid var(--color-line); box-shadow: 0 -20px 40px -30px rgb(0 0 0 / 35%);
}
.method__step:nth-child(1) { top: 96px; background: var(--color-surface); }
.method__step:nth-child(2) { top: 118px; background: var(--color-tint); }
.method__step:nth-child(3) { top: 140px; background: var(--color-surface); }
.method__step:nth-child(4) { top: 162px; background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.method__step:nth-child(5) { top: 184px; background: var(--color-tint); }
.method__step:nth-child(6) { top: 206px; background: var(--color-dark); color: var(--color-on-dark); border-color: var(--color-dark); }
.method__num { font-size: clamp(90px, 10vw, 150px); line-height: 0.8; font-weight: 700; letter-spacing: -0.06em; color: var(--color-primary); }
.method__step:nth-child(4) .method__num, .method__step:nth-child(6) .method__num { color: var(--color-accent); }
.method__step h2 { font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -0.04em; }
.method__step p { font-size: 21px; opacity: 0.85; }

.calendar { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; margin-top: 22px; }
.calendar span {
  height: 64px; border-radius: 10px; background: color-mix(in srgb, var(--color-on-dark) 10%, transparent);
  display: flex; align-items: flex-end; padding: 8px; font-size: 12px; color: var(--color-dark-muted);
}
.calendar span { flex-direction: column; justify-content: space-between; align-items: flex-start; }
.calendar span i { display: flex; gap: 4px; }
.calendar span b { width: 9px; height: 9px; border-radius: 50%; background: var(--color-accent); }
.calendar span.is-hit { color: var(--color-on-dark); font-weight: 600; }
.calendar-total { margin-top: 26px; color: var(--color-dark-muted); }
.calendar-total strong { display: block; font-size: 64px; line-height: 1; letter-spacing: -0.05em; color: var(--color-accent); }
.calendar-panel:not([hidden]) { animation: swap-in 0.45s var(--ease) both; }
.calendar-panel p { margin-top: 18px; color: var(--color-dark-muted); }


.owner-box { padding: clamp(32px, 5vw, 56px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 56px; }
.owner-box .ticks { font-size: 19px; }

.founder { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: clamp(32px, 6vw, 72px); align-items: center; padding-bottom: var(--section); }
.photo-placeholder {
  aspect-ratio: 4 / 5; border-radius: 18px; display: grid; place-items: center; text-align: center; padding: 24px;
  color: var(--color-muted); font-size: 15px;
  background: repeating-linear-gradient(-45deg, var(--color-tint), var(--color-tint) 10px, color-mix(in srgb, var(--color-tint) 55%, var(--color-surface)) 10px, color-mix(in srgb, var(--color-tint) 55%, var(--color-surface)) 20px);
}
.founder__role { color: var(--color-accent-text); font-weight: 600; margin-top: 8px; }
.difference { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.difference div { border-top: 2px solid var(--color-accent); padding-top: 20px; }
.difference h3 { font-size: 21px; }
.difference p { margin-top: 10px; font-size: 16px; color: var(--color-dark-muted); }
.values .box { padding: 30px; }
.values p { color: var(--color-muted); }
.values__num { font-family: var(--font-mono); font-size: 13px; color: var(--color-accent-text); }
.talk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 48px; padding: 30px 0; border-top: 1px solid var(--color-line); }
.talk h3 { font-size: clamp(24px, 2.4vw, 30px); }
.talk p { color: var(--color-muted); font-size: 18px; }

.newsletter-card { padding: 40px; position: sticky; top: calc(var(--header-h) + 40px); }
.newsletter-card form { display: grid; gap: 10px; }
.newsletter-card label { font-size: 14px; font-weight: 600; }
.newsletter-card input[type="email"] {
  font: inherit; font-size: 17px; color: var(--color-ink); background: var(--color-surface);
  border: 1px solid var(--color-line); border-radius: 10px; padding: 14px 16px; width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.newsletter-card input[type="email"]:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 22%, transparent); }
.newsletter-card .btn { justify-self: start; }
.topics { display: grid; gap: 12px; margin-top: 48px; }
.topic { padding: 24px 26px; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; transition: border-color 0.3s, transform 0.3s var(--ease); }
.topic:hover { border-color: var(--color-primary); transform: translateX(6px); }
.topic p { color: var(--color-muted); }
.coming { border-bottom: 1px solid var(--color-line); }
.coming li { list-style: none; display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 32px; align-items: center; padding: 30px 0; border-top: 1px solid var(--color-line); }
.coming h3 { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.03em; }

.prose { max-width: 760px; display: grid; gap: 18px; padding-bottom: var(--section); }
.prose h2 { font-size: clamp(26px, 2.6vw, 32px); margin-top: 24px; }
.prose ul { padding-left: 22px; display: grid; gap: 8px; }
.prose a { color: var(--color-primary-text); }

@media (max-width: 960px) {
  .case-card, .case-card:nth-child(even) { grid-template-columns: 1fr; }
  .case-card:nth-child(even) .case-card__image { order: 0; }
  .case-card__image { min-height: 260px; }
  .testimonials { columns: 1; }
  .case-stats, .day-picker, .systems { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-story, .sprint-panel, .suggest-box, .owner-box, .founder, .talk, .topic, .flow { grid-template-columns: 1fr; }
  .price-tiers { grid-template-columns: 1fr; }
  .method__step { grid-template-columns: 1fr; gap: 16px; position: relative; top: auto !important; }
  .difference { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calendar { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .filters { justify-content: flex-start; }
  .flow__link svg { transform: rotate(90deg); }
}

@media (max-width: 600px) {
  .case-stats, .day-picker, .systems, .difference { grid-template-columns: 1fr; }
  .sprint-bar { height: auto; flex-direction: column; }
  .coming li { grid-template-columns: 1fr; gap: 8px; }
}

.values { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px; }
.values > * { grid-column: span 2; }
.values > :nth-child(4), .values > :nth-child(5) { grid-column: span 3; }
@media (max-width: 960px) {
  .values { grid-template-columns: 1fr 1fr; }
  .values > *, .values > :nth-child(4), .values > :nth-child(5) { grid-column: auto; }
}
@media (max-width: 600px) {
  .values { grid-template-columns: 1fr; }
}

.founder__photo { aspect-ratio: 2 / 3; border-radius: 22px; overflow: hidden; background: #f3eee4; }
.founder__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.founder__bio { display: grid; gap: 16px; margin-top: 22px; }
.founder__bio p:not(.lede) { color: var(--color-muted); font-size: 19px; }

.talks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
.talk-card { display: flex; flex-direction: column; gap: 10px; }
.talk-card h3 { font-size: clamp(22px, 2.2vw, 28px); }
.talk-card__event { font-family: var(--font-mono); font-size: 13px; color: var(--color-accent-text); margin-top: 10px; }
.talk-card__media { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--color-dark); }
.talk-card__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.talk-card__play { display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: none; }
.talk-card__play img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease), filter 0.4s; }
.talk-card__play:hover img { transform: scale(1.04); filter: brightness(0.85); }
.talk-card__icon {
  position: absolute; left: 20px; bottom: 20px; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; background: var(--color-accent); color: var(--color-on-accent);
  box-shadow: 0 16px 30px -12px rgb(0 0 0 / 50%); transition: transform 0.35s var(--ease);
}
.talk-card__play:hover .talk-card__icon { transform: scale(1.1); }
.talk-card__media--text { display: grid; place-items: center; background: var(--color-primary); }
.talk-card__media--text span { color: var(--color-on-primary); font-size: clamp(40px, 6vw, 72px); font-weight: 700; letter-spacing: -0.04em; }

@media (max-width: 760px) {
  .talks { grid-template-columns: 1fr; }
}

.kickoff { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 56px; align-items: start; }
.kickoff__intro { position: sticky; top: calc(var(--header-h) + 40px); display: grid; gap: 18px; }
.kickoff__intro .lede { font-size: 19px; }
.kickoff__cta { display: grid; gap: 10px; justify-items: start; margin-top: 10px; }
.kickoff__cta .muted { font-size: 15px; }
.kickoff__paper {
  position: relative; background: var(--color-surface); border-radius: 6px; padding: 40px 44px;
  box-shadow: 0 40px 70px -40px rgb(0 0 0 / 40%); transform: rotate(-0.6deg); transition: transform 0.5s var(--ease);
}
.kickoff__paper:hover { transform: rotate(0deg) translateY(-4px); }
.kickoff__paper::before { content: ""; position: absolute; inset: 0 0 auto; height: 10px; background: var(--color-primary); border-radius: 6px 6px 0 0; }
.kickoff__meta { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 13px; color: var(--color-muted); padding-bottom: 16px; border-bottom: 1px solid var(--color-line); margin-bottom: 6px; }
.kickoff__paper ul { list-style: none; }
.kickoff__paper li { display: grid; grid-template-columns: 30px 1fr auto; gap: 16px; align-items: start; padding: 18px 8px; margin: 0 -8px; border-bottom: 1px dashed var(--color-line); border-radius: 8px; transition: background 0.25s; }
.kickoff__paper li:hover { background: color-mix(in srgb, var(--color-tint) 50%, transparent); }
.kickoff__paper li p { color: var(--color-muted); font-size: 16px; margin-top: 4px; }
.kickoff__tick { width: 24px; height: 24px; border-radius: 7px; background: var(--color-primary); color: var(--color-on-primary); display: grid; place-items: center; margin-top: 2px; }
.kickoff__owners { display: grid; gap: 6px; justify-items: end; text-align: right; }
.kickoff__who { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.kickoff__who--us { background: var(--color-tint); color: var(--color-primary-text); }
.kickoff__who--you { background: var(--color-accent-soft); color: var(--color-accent-text); }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .kickoff__paper li { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
}

@media (max-width: 960px) {
  .kickoff { grid-template-columns: 1fr; gap: 32px; }
  .kickoff__intro { position: static; }
  .kickoff__paper { transform: none; padding: 28px 22px; }
  .kickoff__paper li { grid-template-columns: 28px 1fr; }
  .kickoff__owners { grid-column: 2; justify-items: start; text-align: left; }
  .kickoff__who { white-space: normal; }
}