/* The one-pager's sections, in page order. */

/* ---------- 1. Hero ---------- */

.hero {
  padding-block: 32px calc(var(--section-gap) / 2);
}

.hero__inner {
  display: grid;
  gap: 40px;
}

.hero__lead {
  margin-top: var(--s-lg);
  max-width: 34rem;
}

.promise-line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm) var(--s-xl);
  margin-top: var(--s-xl);
  font-size: 0.9375rem;
  font-weight: 600;
}

.promise-line li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.promise-line .icon {
  width: 18px;
  height: 18px;
  color: var(--success);
}

.cta {
  margin-top: var(--s-xxl);
}

.cta__note {
  margin-top: var(--s-md);
  max-width: 30rem;
}

.cta__live {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-md);
}

.cta__live[hidden],
.cta__soon[hidden] {
  display: none;
}

.cta--center .cta__note {
  margin-inline: auto;
}

.cta--center .cta__live {
  justify-content: center;
}

.hero__visual {
  display: grid;
  justify-items: center;
  gap: var(--s-md);
}

@media (min-width: 900px) {
  .hero {
    padding-block: 56px 48px;
  }

  .hero__inner {
    grid-template-columns: 8fr 4fr;
    align-items: center;
    gap: 48px;
  }
}

/* ---------- The phone and the demo inside it ---------- */

.phone {
  position: relative;
  width: min(260px, 72vw);
  aspect-ratio: 300 / 650;
  padding: 9px;
  border-radius: 46px;
  background: var(--ink);
  box-shadow: var(--shadow-phone);
}

@media (min-width: 900px) {
  .phone {
    width: 300px;
  }
}

.phone--small {
  width: min(210px, 60vw);
  padding: 7px;
  border-radius: 38px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 37px;
  /* The camera's picture stands in as a dim room: no photo, no fake scene. */
  background: radial-gradient(120% 80% at 50% 35%, #3a3a48 0%, var(--camera-screen) 55%, #212129 100%);
  /* Everything inside is sized against the screen's width, so both phone sizes share one set of rules. */
  container-type: inline-size;
}

.phone--small .phone__screen {
  border-radius: 31px;
}

.demo__stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.demo__user {
  opacity: 0;
  transition: opacity 320ms var(--ease);
}

[data-step='beside'] .demo__user[data-state='beside'],
[data-step='almost'] .demo__user[data-state='almost'],
[data-step='hold'] .demo__user[data-state='match'],
[data-step='still'] .demo__user[data-state='match'],
[data-step='taken'] .demo__user[data-state='match'] {
  opacity: 1;
}

/* At the top, by the lens: watching the bar, you look into the camera. */
.demo__bars {
  position: absolute;
  top: 9cqw;
  left: 6cqw;
  right: 6cqw;
  display: grid;
  gap: 2cqw;
  color: var(--surface);
}

/* app/src/components/MatchBar.tsx, on a screen 390 points wide. */
.matchbar {
  display: flex;
  align-items: center;
  gap: 3cqw;
  height: 11.3cqw;
  padding-inline: 4.1cqw;
  border: 0.4cqw solid transparent;
  border-radius: var(--r-full);
  background: var(--camera-control);
}

/* How full each drawn bar is: written by `npm run demo`, from the app's own scores. */
/* demo:fills */
.matchbar {
  --fill: 68%;
}

.matchbar[data-fill='9'] {
  --fill: 9%;
}

.matchbar[data-fill='68'] {
  --fill: 68%;
}

.matchbar[data-fill='92'] {
  --fill: 92%;
}
/* /demo:fills */

.matchbar__score {
  min-width: 11.8cqw;
  font-size: 4.4cqw;
  line-height: 1.3;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.matchbar__track {
  position: relative;
  flex: 1;
  height: 2cqw;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.25);
}

.matchbar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--fill);
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.9);
  transition: width 600ms var(--ease);
}

/* Where a match starts: 80%, MATCH_CONFIG.threshold. */
.matchbar__mark {
  position: absolute;
  top: -1cqw;
  left: 80%;
  width: 0.5cqw;
  min-width: 2px;
  height: 4cqw;
  margin-left: -0.25cqw;
  border-radius: 1px;
  background: var(--surface);
}

.matchbar.is-holding {
  border-color: var(--pose-good);
}

.matchbar.is-holding .matchbar__fill {
  background: var(--pose-good);
}

/* Holding the match fills the rest of the bar in 1200 ms (MATCH_CONFIG.holdMs), flashing. */
.matchbar.is-snapping .matchbar__fill {
  transition: width 1200ms linear;
}

.matchbar.is-snapping {
  animation: matchbar-flash 280ms ease-in-out infinite;
}

@keyframes matchbar-flash {
  50% {
    background-color: rgba(189, 236, 104, 0.4);
    transform: scale(1.03);
  }
}

/* app/src/components/HintBar.tsx: the one thing to do now. */
.hintbar {
  display: none;
  align-items: center;
  gap: 2cqw;
  min-height: 11.3cqw;
  padding: 2cqw 4.1cqw;
  border-radius: 5.6cqw;
  background: var(--camera-control);
  font-size: 3.85cqw;
  line-height: 1.3;
  font-weight: 600;
}

.hintbar .icon {
  width: 5.1cqw;
  height: 5.1cqw;
}

.hintbar--fix .icon {
  color: var(--pose-warning);
}

.hintbar--good .icon {
  color: var(--pose-good);
}

.hintbar.is-shown,
[data-step='beside'] > .phone__screen [data-hint='beside'],
[data-step='almost'] > .phone__screen [data-hint='almost'],
[data-step='hold'] > .phone__screen [data-hint='hold'],
[data-step='still'] > .phone__screen [data-hint='still'],
[data-step='taken'] > .phone__screen [data-hint='taken'] {
  display: flex;
  animation: hint-appear 200ms var(--ease);
}

@keyframes hint-appear {
  from {
    opacity: 0;
  }
}

/* The latest photo, bottom right; the number is how many the shoot has. */
.demo__last {
  position: absolute;
  right: 5cqw;
  bottom: 7cqw;
  display: grid;
  place-items: center;
  width: 18cqw;
  height: 18cqw;
  border: 0.6cqw solid var(--surface);
  border-radius: 3.6cqw;
  background: var(--camera-control);
  color: var(--surface);
  font-size: 5cqw;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.demo.is-taken .demo__last,
[data-step='taken'].phone--small .demo__last {
  background: linear-gradient(160deg, #6b6b7c, #3a3a48);
}

.demo__flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

.demo.is-flashing .demo__flash {
  animation: demo-flash 360ms ease-out;
}

@keyframes demo-flash {
  15% {
    opacity: 0.9;
  }
}

.demo__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-sm);
  min-height: 44px;
  padding: var(--s-sm) var(--s-lg);
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--ink-2-web);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

.demo__toggle:hover {
  background: var(--surface-muted);
  color: var(--ink);
}

.demo__toggle[hidden],
.demo__toggle [hidden] {
  display: none;
}

.demo__toggle .icon {
  width: 16px;
  height: 16px;
}

/* No container units (Safari 15, Firefox before 110): the silhouette and outline without the bars, rather than unsized ones. */
@supports not (width: 1cqw) {
  .demo__bars,
  .demo__last {
    display: none;
  }
}

/* ---------- 2. Sound familiar? ---------- */

.quotes {
  display: grid;
  gap: var(--s-md);
}

.quote {
  display: grid;
  align-items: center;
  padding: var(--s-xl);
  font-family: var(--font-tagline);
  font-style: italic;
  font-weight: 500;
  font-size: 1.1875rem;
  line-height: 1.4;
  text-wrap: balance;
}

.familiar__close {
  max-width: 38rem;
  margin: var(--s-section) auto 0;
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.55;
  text-wrap: pretty;
}

@media (min-width: 600px) {
  .quotes {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-lg);
  }
}

@media (min-width: 900px) {
  .quotes {
    grid-template-columns: repeat(4, 1fr);
  }

  .quote {
    padding: var(--s-xxl);
  }
}

/* ---------- 3. How it works ---------- */

/* app/src/ui/StepCard.tsx. On a phone a step is a row, so all four show without swiping. */
.steps {
  display: grid;
  gap: var(--s-md);
}

.step {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--s-lg);
  align-items: center;
  padding: var(--s-sm);
}

.step__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--surface-muted);
}

.step__media > picture img,
.step__media > svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Step 1: the app's Browse grid, three poses and an empty slot. */
.step__media--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
  padding: 3px;
}

.step__media--grid picture,
.step__more {
  overflow: hidden;
  border-radius: var(--r-xs);
  min-height: 0;
}

.step__media--grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.step__more {
  display: grid;
  place-items: center;
  background: var(--border);
  color: var(--ink-2-web);
}

.step__media--camera {
  background: radial-gradient(120% 80% at 50% 35%, #3a3a48 0%, var(--camera-screen) 55%, #212129 100%);
}

.step__badge {
  position: absolute;
  top: var(--s-sm);
  left: var(--s-sm);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.step__label {
  position: absolute;
  left: 6px;
  bottom: 6px;
  font-size: 0.6875rem;
}

.step__label .icon {
  width: 12px;
  height: 12px;
}

.step__text {
  padding-right: var(--s-sm);
}

.step__text p {
  margin-top: var(--s-xs);
  font-size: 0.9375rem;
  line-height: 1.45;
}

@media (min-width: 900px) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-xxl);
  }

  .step {
    grid-template-columns: 1fr;
    align-items: start;
    align-content: start;
    gap: var(--s-md);
  }

  .step__text {
    padding: 0 var(--s-sm) var(--s-md);
  }

  .step__label {
    left: var(--s-sm);
    bottom: var(--s-sm);
    font-size: 0.75rem;
  }
}

/* ---------- 4. One hint at a time ---------- */

/* On the dark band the app's own coral is 6.2:1. */
.section--dark .h2 em {
  color: var(--primary);
}

.moments {
  display: grid;
  gap: 48px;
  justify-items: center;
}

.moment {
  display: grid;
  justify-items: center;
  max-width: 20rem;
  text-align: center;
}

.moment .h3 {
  margin-top: var(--s-xxl);
}

.moment p {
  margin-top: var(--s-sm);
  color: var(--on-dark-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}

@media (min-width: 900px) {
  .moments {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    gap: var(--s-section);
  }
}

/* ---------- 5. Ready to use ---------- */

.after {
  display: grid;
  gap: 40px;
}

.features {
  display: grid;
  gap: var(--s-xxl);
}

.feature {
  display: flex;
  gap: var(--s-lg);
}

.feature p {
  margin-top: var(--s-xs);
}

.after__note {
  margin-top: var(--s-xxl);
}

.after__visual {
  justify-self: center;
  width: min(420px, 100%);
}

.framing {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
}

.framing img {
  width: 100%;
}

/* app/src/photos/frame.ts: the 4:5 frame is the whole crop, the square sits inside it. */
.framing__frame {
  position: absolute;
  left: 5%;
  right: 5%;
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--r-sm);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.framing__frame .glass-pill {
  position: absolute;
  top: 8px;
  right: 8px;
}

.framing__frame--portrait {
  top: 4%;
  bottom: 4%;
}

.framing__frame--square {
  top: 15%;
  aspect-ratio: 1;
  border-style: dashed;
}

.framing__frame--square .glass-pill {
  top: auto;
  bottom: 8px;
}

.framing__label {
  position: absolute;
  left: calc(5% + 10px);
  bottom: calc(4% + 10px);
}

.platforms {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-sm);
  margin-top: var(--s-lg);
}

@media (min-width: 900px) {
  .after {
    grid-template-columns: 6fr 5fr;
    align-items: center;
    gap: 64px;
  }
}

/* ---------- 6. The poses ---------- */

/* On a phone the tiles run off the edge, which is what says "swipe". */
.container--bleed {
  padding-inline: 0;
}

.poses {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 240px;
  gap: var(--s-md);
  overflow-x: auto;
  padding: var(--s-xs) var(--gutter) var(--s-xl);
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
}

/* The row runs edge to edge, so its ring goes inside. */
.poses:focus-visible {
  outline-offset: -2px;
}

.pose {
  scroll-snap-align: start;
  padding: var(--s-sm) var(--s-sm) var(--s-lg);
}

.pose picture {
  display: block;
  overflow: hidden;
  border-radius: var(--r-sm);
  aspect-ratio: 4 / 5;
  background: var(--surface-muted);
}

.pose img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pose .h3 {
  margin: var(--s-md) var(--s-xs) 0;
  font-size: 1rem;
}

.pose p {
  margin: var(--s-xs) var(--s-xs) 0;
}

.pose--more {
  display: grid;
  align-content: center;
  justify-items: center;
  padding: var(--s-xxl);
  border-radius: var(--r-lg);
  background: var(--surface-muted);
  text-align: center;
}

.pose--more .icon-well {
  background: var(--surface);
  color: var(--ink-2-web);
}

.poses__note {
  margin-top: var(--s-xs);
}

@media (min-width: 900px) {
  .container--bleed {
    padding-inline: var(--gutter);
  }

  .poses {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-xxl);
    overflow: visible;
    padding-inline: 0;
  }
}

/* ---------- 7. Free, private, real ---------- */

.promises {
  display: grid;
  gap: var(--s-md);
}

.promise {
  display: grid;
  align-content: start;
  gap: var(--s-sm);
  padding: var(--s-xl);
}

.promise .h3 {
  margin-top: var(--s-xs);
}

.promise--catch {
  background: transparent;
  padding-inline: var(--s-xs);
}

.promise--catch strong {
  color: var(--ink);
}

.promise details {
  margin-top: var(--s-xs);
  border-top: 1px solid var(--border);
}

summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  min-height: 44px;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary .icon {
  width: 16px;
  height: 16px;
  color: var(--ink-2-web);
  transition: transform 200ms var(--ease);
}

details[open] > summary .icon {
  transform: rotate(180deg);
}

.promise summary {
  font-size: 0.875rem;
  color: var(--primary-text);
}

.promise details p {
  padding-bottom: var(--s-xs);
  font-size: 0.9375rem;
  line-height: 1.5;
}

@media (min-width: 600px) {
  .promises {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-lg);
  }
}

@media (min-width: 900px) {
  .promises {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-xxl);
  }

  .promise {
    padding: var(--s-xxl);
  }

  .promise--catch {
    padding-inline: var(--s-md);
  }
}

/* ---------- 8. Photo tips ---------- */

.tips {
  display: grid;
  gap: var(--s-lg);
}

.tip {
  padding: var(--s-sm) var(--s-sm) var(--s-xl);
}

.tip__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-sm);
}

.tip__pair figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm);
  aspect-ratio: 4 / 5;
  background: var(--surface-muted);
}

.tip__pair img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tip__pair figcaption {
  position: absolute;
  left: var(--s-sm);
  bottom: var(--s-sm);
}

.glass-pill--good {
  background: rgba(24, 96, 46, 0.88);
}

.tip .h3 {
  margin: var(--s-lg) var(--s-sm) 0;
}

.tip p {
  margin: var(--s-xs) var(--s-sm) 0;
}

@media (min-width: 900px) {
  .tips {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-xxl);
  }
}

/* ---------- 9. Good questions ---------- */

.faq__item {
  border-bottom: 1px solid var(--border);
}

.faq__item:first-child {
  border-top: 1px solid var(--border);
}

.faq__item summary {
  min-height: 60px;
  padding-block: var(--s-md);
  font-size: 1.0625rem;
}

.faq__item p {
  max-width: 40rem;
  padding-bottom: var(--s-xl);
  color: var(--ink-2-web);
}

@media (min-width: 900px) {
  .faq {
    display: grid;
    grid-template-columns: 4fr 7fr;
    gap: 64px;
    align-items: start;
  }

  .faq .section__head {
    position: sticky;
    top: calc(var(--header-height) + 32px);
  }
}

/* ---------- 10. Final call ---------- */

.final {
  padding-block: var(--section-gap);
}

.final__inner {
  display: grid;
  justify-items: center;
  text-align: center;
}

.final .cta {
  margin-top: var(--s-section);
}