/* Widgets page. Quiet tokens from base.css. Layout only. */

.close-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 104px 32px;
}
.close {
  background: var(--amber-field);
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
}
.close-inner .sec-head {
  color: var(--ink);
  max-width: 22ch;
  margin-bottom: 16px;
}
.close-sub {
  font-size: 18px;
  color: var(--ink);
  max-width: 52ch;
  text-wrap: balance;
  margin-bottom: 32px;
}

.hero-head {
  font-size: clamp(38px, 5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--ink);
  text-wrap: balance;
  margin-bottom: 20px;
}
.hero-sub {
  font-size: 19px;
  max-width: 56ch;
  text-wrap: balance;
  margin-bottom: 16px;
}
.hero-note {
  font-size: 16px;
  color: var(--muted);
  max-width: 56ch;
  text-wrap: pretty;
}

.widgets .hero {
  padding: 36px 0 20px;
}
.widgets .hero-inner {
  max-width: 1200px;
}
.widgets .hero-head {
  max-width: 16ch;
  font-size: clamp(34px, 4.4vw, 48px);
  line-height: 1.08;
  margin-bottom: 16px;
}
.hero-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 20px;
  color: var(--amber);
}
.hero-stars svg {
  width: 18px;
  height: 18px;
  display: block;
}
.widgets .hero-stars {
  margin-bottom: 10px;
}
.widgets .hero-sub {
  max-width: 42ch;
  font-size: 17px;
  line-height: 1.5;
  margin-bottom: 0;
}
.widgets .hero-note {
  max-width: 46ch;
  margin-top: 12px;
  font-size: 17px;
}

/* Chapters: one section per widget */
.chapter {
  padding: 88px 0;
  border-top: 1px solid var(--hairline);
  scroll-margin-top: 72px;
}
.chapter:first-of-type {
  border-top: none;
  padding: 8px 0 56px;
}
.chapter .wrap {
  display: grid;
  grid-template-columns: minmax(240px, 360px) 1fr;
  gap: 64px;
  align-items: center;
}
.chapter:nth-of-type(even) .wrap {
  grid-template-columns: 1fr minmax(240px, 360px);
}
.chapter:nth-of-type(even) .chapter-copy {
  order: 2;
}
.chapter-copy h2 {
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin-bottom: 14px;
}
.chapter-copy h2 .plan-tag {
  margin-left: 0.4em;
  vertical-align: 0.2em;
}
.chapter-copy p {
  max-width: 36ch;
  font-size: 17.5px;
}
.chapter-well {
  --tilt-y: -2.5deg;
  --tilt-z: 0.5deg;
  min-width: 0;
}
.chapter:nth-of-type(even) .chapter-well {
  --tilt-y: 2.5deg;
  --tilt-z: -0.5deg;
}
.chapter-figure {
  appearance: none;
  display: block;
  width: 100%;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  position: relative;
  overflow: visible;
  box-shadow: none;
}
.chapter-figure .tile-illust-tilt {
  transform: perspective(900px) rotateY(0deg) rotate(0deg) translateY(0);
  transition: transform 160ms ease;
}
.chapter-figure img {
  pointer-events: none;
}
.chapter-well:hover .chapter-figure,
.chapter-figure:focus-visible {
  z-index: 1;
}
.chapter-well:hover .chapter-figure .tile-illust-tilt,
.chapter-figure:focus-visible .tile-illust-tilt {
  transform: perspective(900px) rotateY(var(--tilt-y)) rotate(var(--tilt-z)) translateY(-2px);
}
.chapter-well:active .chapter-figure .tile-illust-tilt {
  transform: perspective(900px) rotateY(var(--tilt-y)) rotate(var(--tilt-z)) translateY(1px);
  transition-duration: 70ms;
}
.after {
  padding: 88px 0;
  border-top: 1px solid var(--hairline);
}
.after-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
.after-facts h2 {
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin-bottom: 14px;
}
.after-facts p {
  max-width: 36ch;
  font-size: 17.5px;
}
.after-faq {
  margin-top: 72px;
}
.after-faq .faq {
  max-width: 760px;
}

.proof-b .darkband__inner {
  max-width: 880px;
}
.proof-b .quote {
  max-width: none;
  margin: 0 0 56px;
}
.proof-b .quote:last-child {
  margin-bottom: 0;
}
.proof-b .quote blockquote {
  font-size: clamp(24px, 3vw, 32px);
  color: var(--white);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.proof-b .quote figcaption {
  color: #a1a1a6;
}

/* Gallery: the three scenes of one widget, as a centred modal */
.gallery[hidden] {
  display: none !important;
}
.gallery:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
}
.gallery-backdrop {
  position: absolute;
  inset: 0;
  background: rgb(17 17 19 / 0.55);
  border: none;
  padding: 0;
  cursor: pointer;
}
.gallery-frame {
  position: relative;
  z-index: 1;
  width: min(1080px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: var(--white);
  border-radius: 20px;
  padding: 36px 36px 28px;
  box-shadow: var(--shadow-soft);
}
.gallery-x {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--white);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
}
.gallery-x:hover {
  background: var(--surface);
}
.gallery-frame h2 {
  font-size: 24px;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  padding-right: 48px;
}
.gallery-line {
  color: var(--muted);
  margin-bottom: 20px;
  max-width: 52ch;
}
.gallery-stage {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 12px;
  align-items: center;
}
.gallery-shot {
  background: var(--surface);
  border-radius: 12px;
  padding: 16px;
  min-height: 280px;
  display: grid;
  place-items: center;
}
/* All three scenes share one cell, so the box is as tall as the tallest
   and the controls stay put between slides. */
.gallery-shot > * {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
}
.gallery-shot > [hidden] {
  display: block;
  visibility: hidden;
}
.gallery-shot img {
  width: 100%;
  height: auto;
  max-height: 64vh;
  object-fit: contain;
}
.gallery-arrow {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--white);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.gallery-arrow:hover {
  background: var(--surface);
}
.gallery-arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gallery-caption {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 4px;
  font-size: 14px;
  color: var(--muted);
}
.gallery-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
.gallery-dots button {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: none;
  background: var(--hairline);
  padding: 0;
  cursor: pointer;
}
.gallery-dots button.is-active {
  background: var(--ink);
}
.gallery-dots button:hover:not(.is-active) {
  background: var(--muted);
}

@media (max-width: 900px) {
  .after {
    padding: 64px 0;
  }
  .after-facts {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .after-faq {
    margin-top: 56px;
  }
  .chapter .wrap,
  .chapter:nth-of-type(even) .wrap {
    grid-template-columns: 1fr;
  }
  .chapter:nth-of-type(even) .chapter-copy {
    order: 0;
  }
  /* The scene takes the full width; prev and next move below it, either
     side of the counter, so they never cover the screenshot. */
  .gallery-stage {
    grid-template-areas: "shot shot shot" "prev caption next";
    row-gap: 16px;
  }
  .gallery-shot {
    grid-area: shot;
    padding: 8px;
    min-height: 0;
  }
  .gallery-arrow--prev {
    grid-area: prev;
  }
  .gallery-arrow--next {
    grid-area: next;
  }
  .gallery-caption {
    grid-area: caption;
    margin: 0;
  }
  .close-inner {
    padding: 72px 20px;
  }
  .gallery-frame {
    width: calc(100vw - 24px);
    padding: 24px 16px 20px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .gallery-x,
  .gallery-arrow,
  .gallery-dots button {
    transition:
      background-color 140ms ease,
      color 140ms ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chapter-figure .tile-illust-tilt,
  .chapter-well:hover .chapter-figure .tile-illust-tilt,
  .chapter-figure:focus-visible .tile-illust-tilt,
  .chapter-well:active .chapter-figure .tile-illust-tilt {
    transition: none;
    transform: none;
  }
}