/* ===========================================================
   CASE STUDY — editorial detail layout
   Light canvas, deck-first, single centred reading column for
   the supporting context. Inspired by long-form customer
   stories: deck up top, context below.
   =========================================================== */

.case-article {
  margin: 0 auto;
  max-width: 1040px;
  padding: clamp(120px, 13vw, 180px) 0 clamp(96px, 12vw, 160px);
}

/* --- Hero --- */
.case-hero {
  margin: 0 auto clamp(48px, 6vw, 72px);
  max-width: 840px;
  padding: 0 clamp(12px, 2vw, 24px);
}

.case-breadcrumb {
  color: rgba(0, 0, 0, 0.5);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  margin: 0 0 clamp(48px, 5vw, 64px);
}

.case-breadcrumb-arrow {
  display: inline-block;
  margin-right: 10px;
}

.case-back {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  padding: 0;
  text-transform: inherit;
  transition: color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.case-back:hover {
  color: #111;
}

.case-title {
  align-items: center;
  color: #111;
  display: flex;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 600;
  gap: 14px;
  letter-spacing: 0;
  line-height: 1.05;
  margin: 0 0 24px;
}

.case-work-badge {
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 100px;
  color: rgba(0, 0, 0, 0.38);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 5px 12px;
  white-space: nowrap;
}

.case-subtitle {
  color: rgba(0, 0, 0, 0.68);
  font-family: var(--font-display);
  font-size: clamp(17px, 1.3vw, 19px);
  font-weight: var(--fw-book);
  letter-spacing: 0;
  line-height: 1.5;
  margin: 0 0 24px;
}

.case-meta {
  color: rgba(0, 0, 0, 0.5);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: var(--fw-book);
  letter-spacing: 0;
  margin: 0;
}

/* --- Info block --- */
.case-info-block {
  margin: 0;
}

.case-info-separator {
  background: rgba(0, 0, 0, 0.07);
  height: 1px;
  width: 100%;
}

.case-info-inner {
  display: flex;
  flex-direction: row;
  gap: 56px;
  margin: 20px 0;
}

.case-info-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.case-info-label {
  color: #111;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
}

.case-info-value {
  color: rgba(0, 0, 0, 0.48);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: var(--fw-book);
  letter-spacing: 0;
  line-height: 1.4;
}

@media (max-width: 600px) {
  .case-info-inner {
    flex-direction: column;
    gap: 14px;
  }
}

/* --- Deck — full-width slide stack --- */
.case-deck {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 48px);
  left: 50%;
  margin-bottom: clamp(72px, 8vw, 112px);
  margin-left: max(-50vw, -720px);
  margin-right: max(-50vw, -720px);
  max-width: 1440px;
  padding-left: clamp(40px, 6vw, 96px);
  padding-right: clamp(40px, 6vw, 96px);
  position: relative;
  right: 50%;
  width: 100vw;
}

/* Three slide treatments
   - Default (.case-slide)            16/9 cover ratio (slides, covers, illustrations)
   - .case-slide-prototype            Fixed tall height for live iframe embeds
   - .case-slide-screenshot           Fixed tall height for full-page web screenshots
   The two tall variants share one height clamp so prototypes and
   screenshots read at the same rhythm. */
.case-slide {
  aspect-ratio: 16 / 9;
  background: #ffffff;
  border: 0.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  /* Layered soft drop — diffuse ambient at top, tighter contact at bottom.
     Picks up on hover (stronger spread + slightly darker contact) so the
     slide reads as 'lifting' as the corners round, matching the
     border-radius + box-shadow timing on the homepage craft-rail cards. */
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.04),
    0 2px 6px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  position: relative;
  transition:
    border-radius 0.4s ease-out,
    box-shadow 0.4s ease-out;
}

.case-slide:hover {
  border-radius: 28px;
  box-shadow:
    0 28px 60px rgba(0, 0, 0, 0.08),
    0 6px 14px rgba(0, 0, 0, 0.05);
}

.case-slide-screenshot {
  aspect-ratio: auto;
  height: clamp(680px, 80vh, 960px);
}

/* Prototype slides scale a fixed 1280×900 iframe to fit the container.
   JS (initPrototypeScaling) applies transform: scale() on load + resize.
   aspect-ratio matches the 1280×900 native viewport so the container
   height is always proportional — no fixed clamp needed. */
.case-slide-prototype {
  aspect-ratio: 1280 / 900;
}

.case-slide iframe {
  border: 0;
  display: block;
  height: 100%;
  width: 100%;
}

.case-slide img,
.case-slide-cover img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: top;
  width: 100%;
}

/* Gentle breathing while the iframe inside a prototype slide loads.
   JS adds .is-loading on mount and removes it when the iframe fires
   load(). The whole container fades 1 ↔ 0.6 so the empty gray frame
   doesn't feel inert — once content paints over the background the
   pulse just naturally disappears. */
.case-slide-prototype {
  transition:
    border-radius 400ms ease-out,
    box-shadow 400ms ease-out,
    opacity 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.case-slide-prototype.is-loading {
  animation: case-slide-breathe 2.6s ease-in-out infinite;
}

@keyframes case-slide-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  .case-slide-prototype.is-loading { animation: none; }
}

/* Iframe renders at native 1280×900; JS scales it down to fit container.
   Override .case-slide iframe's 100%/100% so the layout box stays at
   the native size and transform doesn't cause unwanted reflow. */
.case-slide-prototype iframe {
  height: 900px;
  transform-origin: top left;
  width: 1280px;
}

/* --- Deck facade (click-to-load placeholder) ---
   Figma decks and Vercel prototype iframes are expensive to fetch and
   render. The facade renders an interactive placeholder inside the
   slide; on click it's swapped for the real iframe. */
.case-deck-facade {
  --facade-poster: linear-gradient(180deg, #f4f4f5 0%, #e6e6e7 100%);
  align-items: center;
  background-color: #ececed;
  background-image: var(--facade-poster);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  border: 0;
  color: #111;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  gap: 14px;
  height: 100%;
  inset: 0;
  justify-content: center;
  overflow: hidden;
  padding: clamp(24px, 4vw, 48px);
  position: absolute;
  text-align: center;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
  width: 100%;
}

/* Veil over the poster image so the glass icon + labels stay readable.
   Only visible when an actual image poster is set (gradient fallback
   already provides legible contrast on its own). */
.case-deck-facade::before {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.05) 0%,
    rgba(0, 0, 0, 0.18) 60%,
    rgba(0, 0, 0, 0.32) 100%
  );
  content: "";
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.case-deck-facade[style*="--facade-poster"]::before {
  opacity: 1;
}

.case-deck-facade > * {
  position: relative;
  z-index: 1;
}

.case-deck-facade:hover .case-deck-facade-icon {
  transform: scale(1.06);
}

.case-deck-facade:focus-visible {
  outline: 2px solid #111;
  outline-offset: -6px;
}

/* Liquid-glass play button. We rebuild the shadow stack from scratch
   instead of using var(--glass-shadow) — that token includes a
   small-radius drop (0 0.25em 0.125em -0.125em rgba(0,0,0,0.2)) that
   reads as a hard dark ring on the larger 72 px disc. Keep the inset
   highlights for glass material, swap the drop for two layered soft
   diffuse blurs. */
/* Material (background, conic ring, inset highlights, drop shadow)
   inherited from the shared .footer-icon-btn glass treatment +
   .glass-button-root > .glass-button-shadow wrapper rendered by the
   case-deck-facade markup. Here we only set the case-specific size. */
.case-deck-facade-icon {
  color: #111;
  font-size: 20px;
  height: 72px;
  text-shadow: none;
  width: 72px;
}

/* Hover anywhere on the parent facade lights up the inner glass icon
   (same custom-property changes that .footer-icon-btn:hover applies)
   plus tightens the drop shadow. The shadow wrapper part mirrors
   .glass-button-root:has(.footer-icon-btn:hover) — we just route the
   trigger through .case-deck-facade:hover so hovering the label area
   counts too. */
.case-deck-facade:hover .case-deck-facade-icon {
  --glass-angle-1: -125deg;
  --glass-shadow-blur: clamp(2px, 0.0625em, 6px);
  --glass-shadow-top: 0.125em;
  --glass-shadow-hover:
    inset 0 0.125em 0.125em rgba(0, 0, 0, 0.03),
    inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.3),
    0 0.1em 0.04em -0.08em rgba(0, 0, 0, 0.12),
    0 0 0.04em 0.08em inset rgba(255, 255, 255, 0.28),
    0 0 0 0 #ffffff;
  box-shadow: var(--glass-shadow-hover);
}

.case-deck-facade:hover .glass-button-shadow {
  filter: blur(clamp(2px, 0.08em, 7px));
}

.case-deck-facade:hover .glass-button-shadow::after {
  opacity: 1;
  top: calc(var(--glass-shadow-cutoff-fix) - 0.68em);
}

.case-deck-facade-icon svg {
  height: 30px;
  width: 30px;
}

.case-deck-facade-label {
  color: #111;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
  margin-top: 4px;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.45);
}

.case-deck-facade-sub {
  color: rgba(0, 0, 0, 0.55);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);
}

/* When a real photo poster is behind, swap text color to white for
   legibility — text-shadow gives a slight outline. */
.case-deck-facade[style*="--facade-poster"] .case-deck-facade-label {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.case-deck-facade[style*="--facade-poster"] .case-deck-facade-sub {
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.case-deck-facade.is-loading {
  cursor: progress;
}

.case-deck-facade.is-loading .case-deck-facade-icon {
  opacity: 0.5;
}

/* All case-deck sections use the full-width breakout (set on .case-deck above) */

.case-deck-cta {
  align-self: flex-start;
  color: #111;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  margin-left: 4px;
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.25);
  text-underline-offset: 3px;
  transition: text-decoration-color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.case-deck-cta:hover {
  text-decoration-color: #111;
}

/* --- Body — single 840px reading column --- */
.case-body {
  margin: 0 auto;
  max-width: 840px;
  padding: 0 clamp(12px, 2vw, 24px);
}

.case-section + .case-section {
  margin-top: clamp(52px, 5vw, 72px);
}

.case-eyebrow {
  color: rgba(0, 0, 0, 0.5);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  margin: 0 0 10px;
}

.case-body-lead {
  color: #111;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.55;
  margin: 0 0 16px;
}

.case-body-text {
  color: rgba(0, 0, 0, 0.72);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: var(--fw-book);
  letter-spacing: 0;
  line-height: 1.6;
  margin: 0;
}

.case-body-note {
  color: rgba(0, 0, 0, 0.55);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--fw-book);
  letter-spacing: 0;
  line-height: 1.55;
  margin: 0;
}

/* --- Selected notes --- */
.case-note-list {
  color: #111;
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  list-style: none;
  margin: 0;
  padding: 0;
}

.case-note-list li {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5;
  padding: 16px 0;
}

.case-note-list li + li {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* --- Related methods --- */
.case-method-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.case-method-list a {
  color: #111;
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
  padding: 14px 0;
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.25);
  text-underline-offset: 3px;
  transition: text-decoration-color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.case-method-list a:hover {
  text-decoration-color: #111;
}

.case-method-list li + li a {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* --- Related methods — Lovable-style card grid --- */
.case-related-section {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  margin-top: clamp(96px, 11vw, 160px) !important;
  padding-top: clamp(48px, 5vw, 72px);
}

.case-related-heading {
  color: #111;
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 0 0 clamp(24px, 3vw, 36px);
}

.case-related-grid {
  display: grid;
  gap: 32px 48px;
  grid-template-columns: repeat(2, 1fr);
}

.case-related-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.case-related-card:hover {
  transform: scale(1.01);
}

.case-related-cover {
  align-items: center;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.case-related-cover-label {
  color: rgba(0, 0, 0, 0.3);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.case-related-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 2px;
}

.case-related-cat {
  color: rgba(0, 0, 0, 0.45);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--fw-book);
  letter-spacing: 0;
}

.case-related-title {
  color: #111;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
  margin: 0;
}

.case-related-date {
  color: rgba(0, 0, 0, 0.4);
  font-family: var(--font-display);
  font-size: 13px;
  margin-top: 4px;
}

@media (max-width: 600px) {
  .case-related-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Responsive --- */
@media (max-width: 700px) {
  .case-hero,
  .case-body {
    padding: 0;
  }
}

/* --- Inline image grid (shared across all case study pages) --- */
.case-img-grid {
  display: grid;
  gap: clamp(24px, 3vw, 36px);
  margin: clamp(24px, 3vw, 36px) 0 0;
}

.case-img-grid.col-2 { grid-template-columns: 1fr 1fr; }
.case-img-grid.col-3 { grid-template-columns: 1fr 1fr 1fr; }
.case-img-grid.col-2-1 { grid-template-columns: 2fr 1fr; }
.case-img-grid.col-1-2 { grid-template-columns: 1fr 2fr; }

.case-img-grid img,
.case-img-single img,
.case-img-grid video,
.case-img-single video,
.case-body img,
.case-body video {
  border: 0.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  display: block;
  height: auto;
  width: 100%;
}

.case-img-cell { display: flex; flex-direction: column; }

.case-img-single {
  margin: clamp(24px, 3vw, 36px) 0 0;
}

@media (max-width: 680px) {
  .case-img-grid.col-2,
  .case-img-grid.col-3,
  .case-img-grid.col-2-1,
  .case-img-grid.col-1-2 {
    grid-template-columns: 1fr;
  }
}

/* ===========================================================
   CASE STUDY — shared content components
   Card surface, labels, titles, body text, divider cells,
   and live link cards aliased across the project-specific
   class names used in each work detail page's inline <style>.
   Single source of truth — typography updates here apply
   everywhere.
   =========================================================== */

/* --- Card surface (gray #ececec + 0.5px hairline + 12px radius) --- */
.pod-callout,
.pod-freq-cell,
.pod-decision-flow,
.pricing-slider-cell,
.pricing-live-card,
.flow-cell,
.prefill-cell,
.merchant-cell,
.ab-result-card,
.deck-placeholder-card,
.homepage-section-row,
.homepage-ref,
.homepage-live-card,
.proto-live-card {
  background: #ececec;
  border: 0.5px solid rgba(0, 0, 0, 0.05);
  border-radius: 12px;
}

/* --- Small label — 13px sentence-case (no uppercase, no wide letter-spacing) --- */
.case-img-label,
.case-img-caption,
.pricing-live-card-label,
.proto-live-card-label,
.homepage-live-card-label,
.pricing-slider-label,
.pricing-icp-tier,
.stat-label,
.principle-num,
.flow-cell-label,
.prefill-source,
.merchant-type,
.homepage-ref-label,
.deck-placeholder-label,
.retention-stat-label,
.pod-callout-label,
.pod-freq-label,
.pod-trust-period,
.pod-decision-flow .flow-label {
  color: rgba(0, 0, 0, 0.5);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
  margin: 0 0 8px;
  text-transform: none;
}

/* Image captions sit BELOW their media — flip the margin so we get
   top breathing room from the image instead of bottom. Scoped to the
   img-grid / img-single containers to win over the shared label
   `margin: 0 0 8px` no matter what's loaded later. */
.case-img-single .case-img-label,
.case-img-single .case-img-caption,
.case-img-grid .case-img-label,
.case-img-grid .case-img-caption,
.case-img-cell .case-img-label,
.case-img-cell .case-img-caption {
  margin: 16px 0 0;
}

/* --- Card title — 16px / 600 --- */
.pricing-slider-title,
.pricing-icp-name,
.flow-cell-title,
.prefill-title,
.merchant-title,
.principle-title,
.homepage-section-title,
.homepage-pillar-name,
.ab-result-metric,
.pod-freq-action,
.pod-trust-mindset {
  color: #111;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
  margin: 0 0 8px;
}

/* --- Card body text — 14px / muted / 1.55 (compact detail) --- */
.pricing-slider-desc,
.pricing-icp-segment,
.stat-desc,
.principle-desc,
.prefill-desc,
.merchant-desc,
.homepage-section-goal,
.homepage-section-desc,
.homepage-pillar-benefit,
.ab-result-note,
.deck-placeholder-text,
.retention-stat-desc,
.flow-step,
.pod-freq-detail,
.pod-trust-mechanism {
  color: rgba(0, 0, 0, 0.55);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.55;
  margin: 0;
}

/* --- Callout body — 16px / richer (callout-style longer copy) --- */
.pod-callout p {
  color: rgba(0, 0, 0, 0.72);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.6;
  margin: 0;
}

/* --- Divider cell (top hairline, no card bg) --- */
.stat-cell,
.pricing-icp-cell,
.principle-cell,
.homepage-pillar,
.retention-stat-cell,
.pod-trust-step {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  padding-top: 14px;
}

.stat-cell.is-highlight,
.retention-stat-cell.is-highlight {
  border-top-color: #111;
}

/* --- Display number — large case-study stat (used in stat / retention /
   A/B-result cards). One size, one source of truth. --- */
.ab-result-delta,
.stat-number,
.retention-stat-number {
  color: #111;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  margin: 0 0 8px;
}

/* --- Reference list — editorial row layout (no nested pills in card) ---
   When tags / reference items sit inside a card surface, render them as a
   two-column list with hairline dividers instead of stacking gray pills
   on a gray card.
   ---------------------------------------------------------------- */
.homepage-ref-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.homepage-ref-item {
  align-items: baseline;
  background: transparent;
  border-radius: 0;
  color: #111;
  display: grid;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  gap: clamp(12px, 2vw, 24px);
  grid-template-columns: clamp(90px, 14vw, 130px) 1fr;
  letter-spacing: 0;
  padding: 10px 0;
}

.homepage-ref-item + .homepage-ref-item {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.homepage-ref-item span {
  color: rgba(0, 0, 0, 0.55);
  font-size: 14px;
  font-weight: 400;
  margin: 0;
}

@media (max-width: 560px) {
  .homepage-ref-item {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* --- Outlined pill — used when a pill sits inside a card surface, to
   avoid the "gray pill on gray card" double-tone problem. Pills that sit
   on the page background (e.g. .homepage-flow-step) keep their filled
   gray look since they're not nested. --- */
.pricing-step-pill,
.ab-result-badge {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 100px;
  color: rgba(0, 0, 0, 0.65);
  display: inline-block;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  padding: 4px 12px;
}

.pricing-step-pill.is-primary {
  background: #111;
  border-color: #111;
  color: #fff;
  font-weight: 600;
}

/* --- Tables — inherit the editorial method-table look --- */
.phase-table,
.findings-table {
  border-collapse: collapse;
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.55;
  margin: clamp(20px, 2.5vw, 28px) 0 0;
  width: 100%;
}

.phase-table th,
.findings-table th {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.5);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  padding: 0 16px 10px 0;
  text-align: left;
  text-transform: none;
}

.phase-table th:first-child,
.findings-table th:first-child { padding-left: 0; }

.phase-table th:last-child,
.findings-table th:last-child { padding-right: 0; }

.phase-table td,
.findings-table td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  color: rgba(0, 0, 0, 0.72);
  padding: 12px 16px 12px 0;
  vertical-align: top;
}

.phase-table td:first-child,
.findings-table td:first-child {
  color: #111;
  font-weight: 500;
  padding-left: 0;
  padding-right: 24px;
  white-space: nowrap;
}

.phase-table td:last-child,
.findings-table td:last-child { padding-right: 0; }

.phase-table tr:last-child td,
.findings-table tr:last-child td { border-bottom: none; }

/* --- Live link card — hover radius shift to match the card system --- */
.pricing-live-card,
.proto-live-card,
.homepage-live-card {
  display: block;
  padding: clamp(18px, 2.5vw, 24px) clamp(20px, 3vw, 28px);
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, border-radius 0.4s ease-out;
}

.pricing-live-card:hover,
.proto-live-card:hover,
.homepage-live-card:hover {
  border-color: rgba(0, 0, 0, 0.12);
  border-radius: 20px;
}

.pricing-live-card-inner,
.proto-live-card-inner,
.homepage-live-card-inner {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.pricing-live-card-left,
.proto-live-card-left,
.homepage-live-card-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pricing-live-card-url,
.proto-live-card-url,
.homepage-live-card-url {
  color: rgba(0, 0, 0, 0.8);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
}

.pricing-live-card-arrow,
.proto-live-card-arrow,
.homepage-live-card-arrow {
  color: rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
  font-size: 20px;
  transition: color 0.15s ease, transform 0.15s ease;
}

.pricing-live-card:hover .pricing-live-card-arrow,
.proto-live-card:hover .proto-live-card-arrow,
.homepage-live-card:hover .homepage-live-card-arrow {
  color: rgba(0, 0, 0, 0.6);
  transform: translate(2px, -2px);
}