[id="god-moments"], [id="guided-god-moment"], [id="inside-a-memory"], [id="monthly-memories"], [id="your-choice"] { scroll-margin-top: 4rem; }
.moments-hero-visual { position: relative; display: grid; justify-items: center; margin: 0; }
.moments-hero-visual .device-shot { position: relative; }
.moments-orbit { position: absolute; width: 95%; aspect-ratio: 1; top: 15%; border: 1px solid var(--line); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--ink) 6%, transparent), transparent 68%); }
.moments-orbit::before { content: ""; position: absolute; inset: -2rem; border: 1px solid var(--line); border-radius: 50%; opacity: .45; }
.moments-hero-visual figcaption, .moments-phone figcaption { margin-top: 1.75rem; color: var(--muted); font-size: .75rem; line-height: 1.7; text-align: center; }
.moments-split { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: clamp(3rem, 8vw, 8rem); }
.moments-split .section-heading { margin-bottom: 1.75rem; }
.moments-phone { display: grid; justify-items: center; margin: 0; min-width: 0; }
.moments-phone .device-shot { width: min(20rem, 100%); }
.moment-details { display: grid; gap: 1.25rem; list-style: none; margin: 2.5rem 0 0; padding: 0; }
.moment-details li { display: flex; gap: 1rem; align-items: flex-start; }
.moment-details li > span { display: grid; place-items: center; flex: 0 0 2.5rem; height: 2.5rem; border: 1px solid var(--line); border-radius: 50%; font-size: 1.2rem; }
.moment-details strong, .moment-details div > span { display: block; font-size: .875rem; line-height: 1.7; }
.moment-details div > span { color: var(--muted); font-size: .8rem; }
.moments-section-heading { display: grid; grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: end; margin-bottom: 4rem; }
.moments-section-heading .section-heading { margin: 0; }
.guided-moments-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; max-width: 53rem; margin: 0 auto; padding: 3rem; border: 1px solid var(--line); border-radius: 2rem; background: var(--surface-raised); }
.guided-moments-preview figcaption span { margin-right: .5rem; font-size: .65rem; letter-spacing: .12em; color: var(--quiet); }
.moments-disclosure { max-width: 49rem; margin: 2.5rem auto 0; color: var(--muted); font-size: .8rem; line-height: 1.9; text-align: center; }
.moments-disclosure a { text-underline-offset: .2em; }
.memory-insights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 3.5rem; border-top: 1px solid var(--line); }
.memory-insights article { min-width: 0; padding: 2.5rem clamp(1.25rem, 3vw, 3rem); border-bottom: 1px solid var(--line); }
.memory-insights article:nth-child(odd) { border-right: 1px solid var(--line); }
.memory-insights h3 { margin: 0 0 1rem; max-width: 23rem; font: 400 clamp(1.5rem, 2.4vw, 2rem)/1.3 "Noto Serif", Georgia, serif; letter-spacing: -.03em; text-wrap: balance; }
.memory-insights p { margin: 0; max-width: 29rem; color: var(--muted); font-size: .95rem; line-height: 1.85; }
.memory-insights .eyebrow { font-size: .65rem; }
@media (max-width: 680px) {
  .memory-insights { grid-template-columns: minmax(0, 1fr); margin-top: 2.5rem; }
  .memory-insights article { padding: 1.75rem 0; }
  .memory-insights article:nth-child(odd) { border-right: 0; }
  .memory-insights p { font-size: .9rem; line-height: 1.75; }
}
.memory-sources { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 4rem; border-top: 1px solid var(--line); }
.memory-sources article { display: flex; flex-direction: column; align-items: flex-start; padding: 2.5rem 2rem; border-bottom: 1px solid var(--line); }
.memory-sources article:not(:nth-child(3n)) { border-right: 1px solid var(--line); }
.memory-sources h3, .memory-steps h3 { margin: 0 0 .8rem; font-family: "Noto Serif", Georgia, serif; font-weight: 400; font-size: 1.5rem; line-height: 1.4; letter-spacing: -.025em; }
.memory-sources p, .memory-steps p { margin: 0 0 .75rem; color: var(--muted); font-size: .875rem; line-height: 1.8; }
.memory-sources .text-link { margin-top: auto; }
.memory-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; max-width: 70rem; margin: 4rem auto 0; }
.memory-example { display: flex; flex-direction: column; align-items: center; min-width: 0; margin: 0; }
.memory-example .device-shot { width: min(19rem, 100%); }
.memory-example figcaption { max-width: 19rem; margin-top: 2.25rem; }
.memory-example h3 { margin: 0 0 .8rem; font: 400 1.5rem/1.4 "Noto Serif", Georgia, serif; letter-spacing: -.025em; }
.memory-example p { margin: 0; color: var(--muted); font-size: .875rem; line-height: 1.8; }
.memory-sources ~ .memory-steps { margin-top: 4rem; padding-top: 3rem; border-top: 1px solid var(--line); }

/* A continuous Memory story; the separate guided-capture demo remains tabbed. */
#monthly-memories { overflow: hidden; overflow: clip; }
.memory-story { display: grid; gap: clamp(4rem, 8vw, 7rem); margin-top: 4rem; }
.memory-story-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(3rem, 7vw, 7rem); margin: 0; }
.memory-story-row + .memory-story-row { padding-top: clamp(4rem, 8vw, 7rem); border-top: 1px solid var(--line); }
.memory-story-visual { grid-column: 1; grid-row: 1; display: grid; place-items: center; min-width: 0; padding: 1rem; }
.memory-story-visual .device-shot { width: min(19rem, 100%); }
.memory-story-copy { grid-column: 2; grid-row: 1; min-width: 0; max-width: 30rem; justify-self: center; }
.memory-story-row:nth-child(even) .memory-story-visual { grid-column: 2; }
.memory-story-row:nth-child(even) .memory-story-copy { grid-column: 1; }
.memory-story-copy h3 { margin: 0 0 1.5rem; font: 400 clamp(2rem, 3.4vw, 3rem)/1.15 "Noto Serif", Georgia, serif; letter-spacing: -.035em; text-wrap: balance; }
.memory-story-copy > p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.85; }
.memory-story-copy > .memory-story-example { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: .85rem; }
@media (prefers-reduced-motion: no-preference) {
  .marketing-motion .memory-story-row .reveal { transition: opacity 700ms ease, transform 700ms cubic-bezier(.2, .65, .3, 1); }
  .marketing-motion .memory-story-visual.reveal,
  .marketing-motion .memory-story-row:nth-child(even) .memory-story-copy.reveal { transform: translateX(-36px); }
  .marketing-motion .memory-story-copy.reveal,
  .marketing-motion .memory-story-row:nth-child(even) .memory-story-visual.reveal { transform: translateX(36px); }
}
@media (max-width: 680px) {
  .memory-story { gap: 3rem; margin-top: 2.5rem; }
  .memory-story-row { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .memory-story-row + .memory-story-row { padding-top: 3rem; }
  .memory-story-row:nth-child(n) .memory-story-copy { grid-column: 1; grid-row: 1; justify-self: stretch; max-width: none; }
  .memory-story-row:nth-child(n) .memory-story-visual { grid-column: 1; grid-row: 2; padding: 1rem 0; }
  .memory-story-visual .device-shot { width: min(17rem, 100%); }
  .memory-story-copy > p { font-size: .95rem; line-height: 1.75; }
  .memory-story-copy > .memory-story-example { margin-top: 1.25rem; padding-top: 1.25rem; }
}
.memory-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; list-style: none; margin: 0; padding: 0; }
.cta > .moments-capture-note { font-size: .7rem; max-width: 38rem; margin-top: 2rem; }
@media (max-width: 900px) {
  .moments-split, .moments-section-heading { grid-template-columns: 1fr; gap: 3rem; }
  .moments-hero-visual { max-width: 28rem; width: 100%; margin-inline: auto; }
  .memory-sources { grid-template-columns: repeat(2, 1fr); }
  .memory-sources article:not(:nth-child(3n)) { border-right: none; }
  .memory-sources article:nth-child(odd) { border-right: 1px solid var(--line); }
  .memory-steps { gap: 1.5rem; }
  .memory-gallery { grid-template-columns: 1fr; gap: 4rem; }
  .memory-example { flex-direction: row; justify-content: center; gap: 2.5rem; }
  .memory-example figcaption { margin-top: 0; }
}
@media (max-width: 680px) {
  .moments-orbit::before { inset: -.5rem; }
  .moments-phone .device-shot { width: min(19rem, 100%); }
  .guided-moments-preview { grid-template-columns: 1fr; gap: 3.5rem; padding: 0; border: 0; background: none; }
  .memory-sources { grid-template-columns: 1fr; margin-top: 2.5rem; }
  .memory-sources article { padding: 2rem .25rem; }
  .memory-sources article:nth-child(odd) { border-right: 0; }
  .memory-steps { grid-template-columns: 1fr; gap: 2rem; }
  .memory-example { flex-direction: column; gap: 0; }
  .memory-example figcaption { margin-top: 2rem; }
  .moments-disclosure { text-align: left; }
}

/* Page-specific polish; shared brand typography and section surfaces are retained. */
.moments-page { --quiet: color-mix(in srgb, var(--ink) 66%, var(--surface)); }
.moments-page h1, .moments-page h2 { text-wrap: balance; }
.moments-page .device-shot { box-shadow: 0 0 0 1px var(--strong-line), var(--shadow); }
.moments-hero-visual .hero-memory-excerpt { position: absolute; bottom: 0; left: -2rem; width: min(19rem, 90%); padding: 1.5rem; border: 1px solid var(--line); border-radius: 1.25rem; background: var(--surface); box-shadow: var(--shadow); text-align: left; color: var(--ink); }
.hero-memory-excerpt .eyebrow { font-size: .58rem; margin-bottom: .75rem; }
.hero-memory-excerpt blockquote { margin: 0 0 1rem; font: 400 1.15rem/1.55 "Noto Serif", Georgia, serif; letter-spacing: -.02em; }
.hero-memory-excerpt > span:last-child { color: var(--muted); font-size: .7rem; }
.moments-split { grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); }
.moment-details svg { width: 1.2rem; height: 1.2rem; }
.god-moment-excerpt { margin: 1.75rem 0; padding-left: 1.25rem; border-left: 2px solid var(--strong-line); }
.god-moment-excerpt p { margin: 0; font: 400 1.2rem/1.65 "Noto Serif", Georgia, serif; color: var(--ink); }
.god-moment-excerpt footer { margin-top: 1rem; color: var(--muted); font-size: .7rem; line-height: 1.7; }
.god-moment-second-example { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); margin: 4rem 0 0; padding-top: 3rem; border-top: 1px solid var(--line); }
.god-moment-second-example h3 { margin: 0 0 1rem; font: 400 clamp(1.75rem, 3vw, 2.5rem)/1.25 "Noto Serif", Georgia, serif; letter-spacing: -.03em; text-wrap: balance; }
.god-moment-second-example .example-label { font-size: .7rem; color: var(--muted); }
.god-moment-second-example blockquote { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.85; }
.god-moment-second-example blockquote p { margin: 0; }
.god-moment-second-example blockquote p + p { margin-top: 1rem; }
.moment-scene { position: relative; min-height: 42rem; justify-items: end; align-content: end; padding-top: 8rem; }
.moment-scene-photo { position: absolute; inset: 0 0 auto; height: 30rem; overflow: hidden; border-radius: 1.75rem; }
.moment-scene-photo img { width: 100%; height: 30rem; object-fit: cover; object-position: 30% center; }
.moment-scene .device-shot { width: min(17rem, 55%); margin-right: 1.5rem; z-index: 1; }
.moment-scene figcaption { width: 100%; font-size: .7rem; }
.moments-disclosure .text-link { display: flex; margin: .75rem auto 0; }
.moments-section-heading { align-items: center; margin-bottom: 3rem; }
.memory-sources { margin-top: 3rem; }
.memory-sources article { padding: 2rem 1.75rem; }

/* Without JavaScript, every example stays in document order. */
.demo-controls[hidden], [data-demo-panel][hidden] { display: none; }
.memory-example h3, .guided-moments-preview h3 { margin: 0 0 1rem; font: 400 2rem/1.25 "Noto Serif", Georgia, serif; letter-spacing: -.035em; text-wrap: balance; }
.guided-moments-preview figcaption { text-align: left; color: var(--ink); }
.guided-moments-preview figcaption > p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.8; }
.memory-excerpt { margin: 1.5rem 0; padding-left: 1.25rem; border-left: 2px solid var(--strong-line); }
.memory-excerpt p { margin: 0 0 1rem; font: 400 1.5rem/1.6 "Noto Serif", Georgia, serif; letter-spacing: -.02em; color: var(--ink); }
.memory-excerpt footer { color: var(--muted); font-size: .72rem; line-height: 1.6; }
.moment-demo.is-enhanced { padding: 2rem clamp(1.25rem, 4vw, 4rem) 3rem; border: 1px solid var(--line); border-radius: 2rem; background: var(--surface-raised); }
.demo-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1.5rem; max-width: 40rem; margin-inline: auto; border-bottom: 1px solid var(--strong-line); }
.demo-tabs button { min-width: 0; min-height: 3.5rem; margin-bottom: -1px; padding: .85rem .5rem; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; color: var(--muted); font: 600 .85rem/1.5 "Manrope", sans-serif; text-wrap: balance; cursor: pointer; }
.demo-tabs button:hover { color: var(--ink); }
.demo-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.demo-tabs button:focus-visible, [data-demo-panel]:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.demo-hint { color: var(--muted); text-align: center; font-size: .75rem; margin: 1rem 0 2rem; }
.is-enhanced .memory-gallery, .is-enhanced .guided-moments-preview { display: block; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.is-enhanced [data-demo-panel]:not([hidden]) { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.is-enhanced [data-demo-panel] .device-shot { grid-column: 2; grid-row: 1; justify-self: center; }
.is-enhanced [data-demo-panel] figcaption { grid-column: 1; grid-row: 1; margin: 0; max-width: 26rem; justify-self: center; }
.demo-status.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 900px) {
  .moments-split { grid-template-columns: 1fr; gap: 2.5rem; }
  .moments-hero-visual .hero-memory-excerpt { left: 0; }
  .moment-scene { width: 100%; max-width: 40rem; margin-inline: auto; }
  .memory-sources { grid-template-columns: repeat(3, 1fr); }
  .memory-sources article { padding: 1.5rem 1rem; }
  .memory-sources article:nth-child(odd) { border-right: 0; }
  .memory-sources article + article { border-left: 1px solid var(--line); }
}
@media (max-width: 680px) {
  .moments-page .section { padding-block: 4rem; }
  .moments-hero-visual .hero-memory-excerpt { width: min(18rem, 92%); padding: 1.15rem; }
  .hero-memory-excerpt blockquote { font-size: 1rem; }
  .moment-scene { min-height: 34rem; padding-top: 10rem; }
  .moment-scene-photo, .moment-scene-photo img { height: 22rem; }
  .moment-scene .device-shot { width: min(17rem, 78%); margin-right: .75rem; }
  .god-moment-excerpt p { font-size: 1.05rem; }
  .god-moment-second-example { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-top: 3rem; padding-top: 2rem; }
  .god-moment-second-example blockquote { font-size: .95rem; line-height: 1.8; }
  .moment-demo.is-enhanced { padding: 1.25rem 1rem 1.75rem; border-radius: 1.5rem; }
  .demo-tabs { gap: .25rem; }
  .demo-tabs button { padding: .75rem .25rem; font-size: .75rem; }
  .demo-hint { margin-bottom: 1.5rem; }
  .is-enhanced [data-demo-panel]:not([hidden]) { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .is-enhanced [data-demo-panel] figcaption { grid-column: 1; grid-row: 1; width: 100%; }
  .is-enhanced [data-demo-panel] .device-shot { grid-column: 1; grid-row: 2; width: min(17rem, 100%); }
  .memory-example h3, .guided-moments-preview h3 { font-size: 1.6rem; }
  .memory-example figcaption > p, .guided-moments-preview figcaption > p { font-size: .85rem; }
  .is-enhanced .memory-excerpt { display: none; }
  .memory-sources { grid-template-columns: 1fr; margin-top: 2rem; }
  .memory-sources article { padding: 1.5rem 0; }
  .memory-sources article + article { border-left: none; }
  .memory-steps { margin-top: 2rem; }
  .moments-disclosure .text-link { margin-inline: 0; }
}