/* Why us: process visuals, offer contrast, and a compact delivery preview. */
.why-hero__inner { display: grid; justify-items: start; gap: var(--sp-3); }
.why-hero h1 { max-width: 13ch; }
.why-hero .lead { margin: 0; max-width: 48ch; }

.why-reasons { padding-top: var(--sp-4); }
.why-reasons__list { display: grid; }
.why-reason {
  display: grid;
  gap: var(--sp-4);
  align-items: center;
  padding-block: var(--sp-6);
  border-top: 1px solid var(--ink-a12);
}
.why-reason:last-child { border-bottom: 1px solid var(--ink-a12); }
.why-reason__copy { display: grid; gap: var(--sp-2); align-content: center; }
.why-reason h2 { max-width: 16ch; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--track-h2); text-wrap: balance; }
.why-reason p { max-width: 42ch; color: var(--text-muted); }

/* Compact product UI diagrams; each shows the specific promise beside it. */
.why-visual {
  min-height: 216px;
  padding: var(--sp-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  background: var(--white);
  border: 1px solid var(--mist);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}
.visual-label { display: block; color: var(--text-muted); font-size: var(--fs-small); font-weight: 600; letter-spacing: .01em; }
.delivery-ui { width: min(100%, 380px); padding: var(--sp-2); background: var(--canvas); border: 1px solid var(--ink-a08); border-radius: 12px; }
.delivery-ui__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); padding-bottom: var(--sp-1); }
.delivery-ui__head strong { color: var(--cobalt); font-size: 1rem; }
.delivery-ui__step { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-1); padding: 9px 10px; background: var(--white); border: 1px solid var(--mist); border-radius: 8px; font-size: var(--fs-small); font-weight: 600; }
.delivery-ui__step b { color: var(--text-muted); font-size: var(--fs-small); }
.delivery-ui__samples { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: var(--sp-2); }
.delivery-ui__samples img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 7px; }
.delivery-ui__caption { display: block; padding-top: 8px; color: var(--text-muted); font-size: var(--fs-small); }

.why-visual--founder { background: var(--mist); }
.review-ui { width: min(100%, 380px); background: var(--white); border: 1px solid var(--ink-a08); border-radius: 12px; box-shadow: var(--shadow-sm); overflow: hidden; }
.review-ui__top, .review-ui__bottom { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.review-ui__top { justify-content: space-between; border-bottom: 1px solid var(--ink-a08); }
.review-status { color: var(--text-muted); font-size: var(--fs-small); font-weight: 600; }
.review-ui__body { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 14px; }
.review-thumb { width: 46px; height: 60px; flex: 0 0 46px; border-radius: 6px; background: var(--mist); position: relative; overflow: hidden; }
.review-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.review-ui__body strong, .review-ui__bottom strong { font-weight: 600; }
.review-ui__body p { margin: 4px 0 0; color: var(--text-muted); font-size: var(--fs-small); }
.review-ui__bottom { border-top: 1px solid var(--ink-a08); }
.founder-avatar { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 32px; border-radius: 50%; background: var(--ink); color: var(--white); font-family: var(--font-display); }
.review-ui__bottom > span:nth-child(2) { display: grid; gap: 1px; }
.review-ui__bottom small { color: var(--text-muted); font-size: 12px; }
.review-approve { margin-left: auto; padding: 7px 11px; border-radius: var(--r-pill); background: var(--cobalt); color: var(--white); font-size: var(--fs-small); font-weight: 600; }

.why-visual--hooks { flex-direction: column; gap: var(--sp-2); }
.hook-samples { width: min(100%, 430px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.hook-samples > div { position: relative; overflow: hidden; aspect-ratio: 9 / 16; border-radius: 8px; background: var(--mist); }
.hook-samples img { width: 100%; height: 100%; object-fit: cover; }
.hook-samples > div > span { position: absolute; z-index: 1; top: 6px; left: 6px; padding: 4px 7px; border-radius: var(--r-pill); background: var(--white); color: var(--text); font-size: 12px; font-weight: 600; }
.hook-samples > div::after { content: ""; position: absolute; inset: 48% 0 0; background: linear-gradient(transparent, rgb(0 0 0 / .78)); pointer-events: none; }
.hook-samples .hook-samples__caption { position: absolute; z-index: 1; bottom: 10px; left: 5px; right: 5px; margin: 0; color: var(--white); font-size: clamp(11px, 1.1vw, 14px); font-weight: 600; line-height: 1.3; text-align: center; }
.hook-caption { color: var(--text-muted); font-size: var(--fs-small); }

.why-visual--format { background: var(--mist); flex-direction: column; gap: var(--sp-2); padding-block: var(--sp-2); }
.format-frame { width: 100%; display: flex; justify-content: center; }
.format-scene { position: relative; width: min(100%, 160px); aspect-ratio: 9 / 16; overflow: hidden; border: 1px solid var(--ink-a12); border-radius: 10px; background: var(--white); }
.format-scene img { display: block; width: 100%; height: 100%; object-fit: cover; }
.format-scene figcaption { position: absolute; left: 4px; right: 4px; bottom: 4px; padding: 4px; border-radius: 3px; background: var(--ink); color: var(--white); text-align: center; font-size: 11px; line-height: 1.25; font-weight: 600; }
.format-destinations { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.format-destinations span { padding: 5px 10px; border: 1px solid var(--ink-a12); border-radius: var(--r-pill); background: var(--white); color: var(--text-muted); font-size: var(--fs-small); font-weight: 600; }

.comparison-section, .inbox-section { padding-block: var(--section-y); }
.comparison-section { overflow: clip; background: var(--white); }
.comparison-section .section-head { max-width: 50rem; }
.comparison-pair { display: grid; gap: var(--sp-3); align-items: stretch; }
.comparison-card { padding: var(--sp-4); border-radius: var(--r-card); }
.comparison-card h3 { margin-bottom: var(--sp-3); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--track-h3); }
.comparison-card ul { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.comparison-card li { position: relative; padding-left: 1.7rem; font-size: 1rem; line-height: 1.5; }
.comparison-card--old { opacity: .9; background: var(--canvas); border: 1px solid var(--ink-a12); color: var(--text-muted); }
.comparison-card--old li::before { content: ""; position: absolute; left: .2rem; top: .7em; width: .6rem; height: 1px; background: currentColor; }
.comparison-card--scenevale { position: relative; transform: translateY(-6px); z-index: 1; background: var(--white); border: 1px solid var(--cobalt); box-shadow: var(--shadow-card); }
.comparison-card--scenevale h3 { color: var(--cobalt); }
.comparison-card--scenevale li::before { content: ""; position: absolute; left: .2rem; top: .45em; width: .65rem; height: .35rem; border-left: 2px solid var(--cobalt); border-bottom: 2px solid var(--cobalt); transform: rotate(-45deg); }
.comparison-card__cta { margin-top: var(--sp-4); }
.comparison-note { margin-top: var(--sp-3); max-width: 70ch; color: var(--text-muted); font-size: var(--fs-small); }
@media (prefers-reduced-motion: no-preference) {
  .comparison-pair > * { transition: opacity var(--dur-premium) var(--ease-premium), transform var(--dur-premium) var(--ease-premium), box-shadow var(--dur-premium) var(--ease-premium); }
  .comparison-section.reveal-pending .comparison-card--old { opacity: 1; }
  .comparison-section.reveal-pending .comparison-card--scenevale { transform: translateY(8px); }
  .comparison-section.reveal-in .comparison-card--old { opacity: .9; }
  .comparison-section.reveal-in .comparison-card--scenevale { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
}

.inbox-section .section-head { margin-bottom: var(--sp-3); }
.inbox-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.inbox-tiles li { display: grid; align-content: start; gap: var(--sp-2); min-height: 118px; padding: var(--sp-3); border: 1px solid var(--ink-a12); border-radius: var(--r-card); background: var(--white); font-weight: 600; }
.inbox-preview { height: 96px; min-width: 0; font-size: 12px; line-height: 1.4; color: var(--text-muted); }
.inbox-files, .inbox-hooks { display: grid; align-content: center; gap: 6px; }
.inbox-files > span, .inbox-hooks > span { display: flex; align-items: center; gap: 8px; }
.inbox-files b, .inbox-hooks b { min-width: 26px; padding: 3px; border-radius: 4px; background: var(--mist); color: var(--cobalt); text-align: center; font-size: 10px; }
.inbox-caption { position: relative; width: 64px; margin-inline: auto; overflow: hidden; border-radius: 6px; background: var(--mist); }
.inbox-caption img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.inbox-caption > span { position: absolute; left: 4px; right: 4px; bottom: 8px; padding: 3px; background: var(--white); color: var(--ink); border-radius: 3px; font-size: 10px; text-align: center; }
.inbox-note { display: grid; align-content: center; gap: 8px; }
.inbox-note strong { color: var(--ink); }
.inbox-tile__label { font-size: 1rem; }
.inbox-qualifier, .inbox-ai { margin-top: var(--sp-2); color: var(--text-muted); font-size: var(--fs-small); }
.why-fit { padding-block: var(--sp-6); color: var(--text-muted); }
.why-fit a { color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.why-cta { padding-top: 0; }
.why-cta .cta-band { border-radius: var(--r-card); }

@media (min-width: 48em) {
  .why-reason { grid-template-columns: 1fr 1fr; gap: var(--sp-8); padding-block: var(--sp-8); }
  .why-reason--reverse .why-reason__copy { grid-column: 2; grid-row: 1; }
  .why-reason--reverse .why-visual { grid-column: 1; grid-row: 1; }
  .why-visual { min-height: 250px; padding: var(--sp-4); }
  .why-visual--format { min-height: 290px; }
  .format-scene { width: 170px; }
  .comparison-pair { grid-template-columns: 1fr 1.06fr; gap: var(--sp-4); align-items: center; }
  .comparison-card { padding: var(--sp-4); }
  .inbox-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
}

@media (min-width: 60em) {
  .why-hero__inner { grid-template-columns: 7fr 5fr; align-items: end; column-gap: var(--sp-6); }
  .why-hero h1 { grid-column: 1 / -1; }
  .why-hero .lead { grid-column: 1; align-self: center; }
  .why-hero .btn { grid-column: 2; justify-self: end; }
  .why-reason { grid-template-columns: 5fr 7fr; gap: var(--sp-12); }
  .why-reason--reverse .why-reason__copy { grid-column: 2; }
  .why-reason--reverse .why-visual { grid-column: 1; }
  .why-visual { min-height: 280px; }
  .why-visual--format { min-height: 320px; }
  .format-scene { width: 190px; }
}

@media (max-width: 47.999em) { .comparison-card--scenevale { transform: none; } }
@media (prefers-reduced-motion: reduce) { .comparison-card--scenevale { transform: none; } }