.pulse-hero {
  min-height: calc(100svh - 76px);
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(480px, 1.12fr);
  gap: clamp(28px, 5vw, 84px);
  align-items: center;
  padding: 32px 0 72px;
}
.hero-copy h1 { max-width: 650px; font-size: clamp(3.2rem, 6.7vw, 7rem); }
.pulse-invitation { margin-top: 28px; color: var(--ink); font-size: .9rem; font-weight: 680; letter-spacing: .02em; }
.touch-instruction { display:none; }
.pulse-experience { --pulse-x: 50%; --pulse-y: 50%; --pulse-color: #243229; min-width: 0; text-align: center; }
.pulse-readout { min-height: 66px; display: grid; place-content: center; margin-bottom: 2px; }
.pulse-readout strong { font-size: clamp(1.15rem, 2vw, 1.45rem); letter-spacing: -.02em; }
.pulse-readout span { margin-top: 3px; color: var(--muted); font-size: .88rem; }
.pulse-field { position: relative; width: min(100%, 590px); aspect-ratio: 1; margin: 0 auto; touch-action: manipulation; }
.pulse-rings, .pulse-memory, .pulse-origin { position: absolute; left: var(--pulse-x); top: var(--pulse-y); pointer-events: none; }
.pulse-rings i { position: absolute; width: 72px; height: 72px; margin: -36px; border: 1.25px solid color-mix(in srgb, var(--pulse-color) 68%, transparent); border-radius: 50%; box-shadow: inset -2px -2px 3px rgba(36,50,41,.08), inset 2px 2px 3px rgba(255,255,255,.72); animation: pulse-ring 2.8s infinite ease-out; }
.pulse-rings i:nth-child(2) { animation-delay: -.7s; }.pulse-rings i:nth-child(3) { animation-delay: -1.4s; }.pulse-rings i:nth-child(4) { animation-delay: -2.1s; }
.pulse-memory { width: 126px; height: 126px; margin: -63px; border: 1px solid color-mix(in srgb, var(--pulse-color) 30%, transparent); border-radius: 50%; opacity: 0; transition: left .18s ease-out, top .18s ease-out, opacity .2s ease; }
.pulse-origin { width: 48px; height: 48px; margin: -24px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.85); border-radius: 50%; background: var(--paper-raised); box-shadow: -5px -6px 12px rgba(255,255,255,.8), 6px 8px 16px rgba(42,39,34,.14); transition: left .12s ease-out, top .12s ease-out, background-color .12s ease; }
.pulse-origin i { width: 11px; height: 11px; border-radius: 50%; background: var(--pulse-color); box-shadow: 5px 7px 10px color-mix(in srgb, var(--pulse-color) 24%, transparent); transition: background-color .16s ease; }
.emotion { position: absolute; width: 98px; min-height: 62px; transform: translate(-50%,-50%); border: 0; border-radius: 18px; background: transparent; color: var(--ink); font: inherit; font-size: .88rem; cursor: pointer; opacity: .78; transition: transform .16s ease, opacity .16s ease, background-color .16s ease; }
.emotion span { display: block; font-size: 1.55rem; line-height: 1.2; }
.emotion:focus-visible, .emotion[data-active="true"] { transform: translate(-50%,-50%) scale(1.08); background: color-mix(in srgb, var(--emotion-color) 13%, transparent); opacity: 1; outline: none; }
.emotion:focus-visible { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--emotion-color); }
.emotion-joy { --emotion-color:#E7AD32; left:78%; top:22%; }.emotion-love { --emotion-color:#C96E72; left:91%; top:50%; }.emotion-shame { --emotion-color:#A97688; left:78%; top:78%; }.emotion-disgust { --emotion-color:#719A7B; left:50%; top:91%; }.emotion-sadness { --emotion-color:#6689A8; left:22%; top:78%; }.emotion-anger { --emotion-color:#B75C45; left:9%; top:50%; }.emotion-fear { --emotion-color:#766A9A; left:22%; top:22%; }
.pulse-status { min-height: 28px; margin: -8px auto 0; color: var(--muted); font-size: .82rem; }
.product-story { padding-bottom: 40px; }
.story-row { min-height: 720px; display: grid; grid-template-columns: minmax(0,.78fr) minmax(320px,1.22fr); gap: clamp(36px,8vw,120px); align-items: center; border-top: 1px solid var(--line); }
.story-row:first-of-type { border-top: 0; }.story-row-reverse > div { order: 2; }.story-row img { justify-self: center; width: min(100%, 600px); max-height: 680px; object-fit: contain; filter: drop-shadow(0 30px 34px rgba(36,50,41,.12)); }
.story-row h3 { font-size: clamp(2rem,4vw,3.8rem); }.story-row p:not(.story-number) { max-width: 500px; color: var(--muted); font-size: 1.08rem; }.story-number { color: var(--moss); font-size: .75rem; font-weight: 760; letter-spacing: .18em; }
.download-section { padding: 110px 0; background: var(--ink); color: var(--paper-raised); }.download-inner { max-width: 840px; }.download-section h2 { color: var(--paper-raised); }.download-section p { color: #c9cec6; }.download-section .eyebrow { color: #aebaa7; }.download-section .store-badge { color: #c9cec6; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.17); text-decoration: none; }.download-section .store-badge strong { color: var(--paper-raised); }
@keyframes pulse-ring { 0% { opacity:0; transform:scale(.35) } 14% { opacity:.32 } 56% { opacity:.14 } 100% { opacity:0; transform:scale(4.3) } }
@media (hover: hover) and (pointer: fine) { .pulse-memory, .pulse-origin { transition-duration:.025s, .025s, .12s; transition-timing-function:linear, linear, ease; }.emotion:hover { transform:translate(-50%,-50%) scale(1.08); background:color-mix(in srgb,var(--emotion-color) 13%,transparent); opacity:1; outline:none; } }
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) { html { scroll-snap-type:y proximity; }.story-row, .download-section { scroll-snap-align:center; scroll-snap-stop:normal; } }
@media (max-width: 900px) { .pulse-hero { grid-template-columns: 1fr; padding-top: 34px; }.hero-copy { text-align: center; }.hero-copy h1, .hero-copy .lead { margin-left:auto; margin-right:auto; }.pulse-field { width:min(100%,540px); }.story-row { min-height: 620px; gap:36px; }.story-row img { max-height:580px; } }
@media (max-width: 620px) { .pulse-hero { gap:0; min-height:calc(100svh - 76px); padding:8px 0 28px; }.hero-copy .eyebrow, .hero-copy .lead, .pointer-instruction, .pulse-status { display:none; }.touch-instruction { display:block; }.hero-copy h1 { max-width:330px; margin:2px auto 10px; font-size:clamp(2.35rem,10vw,2.75rem); }.pulse-invitation { max-width:260px; margin:0 auto; color:var(--muted); font-size:.9rem; font-weight:520; letter-spacing:0; line-height:1.4; }.pulse-readout { min-height:42px; margin:0; }.pulse-readout:not([data-selected="true"]) { visibility:hidden; }.pulse-readout strong { font-size:1.02rem; }.pulse-readout span { font-size:.76rem; }.pulse-field { width:min(calc(100% + 20px),350px); margin-left:auto; margin-right:auto; touch-action:none; }.emotion { width:72px; min-height:50px; font-size:.76rem; }.emotion span { font-size:1.25rem; }.pulse-rings i { width:56px; height:56px; margin:-28px; }.pulse-origin { width:42px; height:42px; margin:-21px; }.story-row, .story-row.story-row-reverse { min-height:0; grid-template-columns:1fr; padding:64px 0; }.story-row-reverse > div { order:0; }.story-row img { max-height:560px; }.download-section { padding:78px 0; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; }.pulse-rings i { animation:none; opacity:.12; transform:scale(2.8); }.pulse-rings i:not(:first-child) { display:none; }.pulse-origin, .pulse-memory, .emotion { transition:none; } }