.remorse-page { max-width:1600px; padding:0 36px; }
.remorse-hero,.remorse-story { position:relative; overflow:hidden; background:#101110; isolation:isolate; }
.remorse-hero { min-height:650px; height:min(80vh,900px); margin:20px 0 0; display:flex; align-items:end; }
.remorse-hero video,.remorse-hero>.motion-fallback { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.remorse-hero::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg,#080908f5 0%,#080908a8 32%,#08090808 80%); }
.remorse-hero-copy { width:100%; display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:28px 65px; padding:45px; }
.remorse-hero h1 { font-size:clamp(36px,4.5vw,68px); line-height:1.05; font-weight:450; letter-spacing:-.045em; margin:20px 0 4px; }
.remorse-hero .eyebrow { color:#ccc; font-size:11px; }
.remorse-hero .lead { font-size:clamp(22px,2.3vw,32px); line-height:1.3; letter-spacing:-.025em; max-width:510px; }
.remorse-hero p { color:#dedede; }
.remorse-hero .text-link { display:inline-block; margin-top:18px; }
.remorse-intro { display:grid; grid-template-columns:1fr 1fr; gap:65px; padding:60px 0; border-bottom:1px solid #ffffff24; }
.remorse-intro h2 { font-size:clamp(30px,3.5vw,48px); max-width:600px; line-height:1.15; letter-spacing:-.04em; }
.remorse-intro p { color:#bcbcbc; font-size:17px; max-width:570px; }
.remorse-intro .eyebrow { font-size:11px; margin-bottom:16px; }
.remorse-recording { padding:42px 0 10px; }
.remorse-recording-header { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:16px; }
.remorse-recording-header p { font:11px/1.6 var(--mono); color:#bbb; }
.remorse-recording-header a { font-size:13px; }
.remorse-story { width:100%; min-height:clamp(420px,40vw,570px); aspect-ratio:16/9; display:flex; align-items:end; }
.remorse-story video,.remorse-story>.motion-fallback { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:-2; }
.remorse-story::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg,#070807fa,#070807bd 20%,transparent 65%); }
.remorse-story-copy { padding:30px 38px; max-width:850px; }
.remorse-story h2 { font-size:clamp(30px,3.4vw,48px); line-height:1.1; letter-spacing:-.045em; margin-bottom:15px; }
.remorse-story-copy p { max-width:700px; font-size:16px; line-height:1.7; color:#d4d4d4; }
.remorse-evidence { display:grid; grid-template-columns:1fr 1fr; gap:40px; padding:20px 0 32px; border-bottom:1px solid #ffffff24; }
.remorse-evidence p { color:#aaa; font-size:14px; }
.remorse-evidence strong { color:#ddd; font-weight:500; }
.remorse-evidence a { color:#eee; text-underline-offset:5px; }
.remorse-notes { display:grid; grid-template-columns:1fr 1fr; gap:65px; padding:65px 0; }
.remorse-notes h2 { font-size:clamp(30px,4vw,48px); line-height:1.1; letter-spacing:-.04em; margin-bottom:20px; }
.remorse-notes p { color:#bcbcbc; }
.remorse-notes .text-link { display:inline-block; margin-top:22px; }
.remorse-notes-list { margin:0; }
.remorse-notes-list>div { padding:19px 0; border-bottom:1px solid #ffffff24; }
.remorse-notes-list dt { color:#f0f0f0; font-size:18px; margin-bottom:7px; }
.remorse-notes-list dd { margin:0; color:#aaa; font-size:15px; }
.remorse-notes-list a { color:#ddd; }
@media(max-width:800px) {
 .remorse-page { padding:0 18px; }
 .remorse-hero { min-height:590px; height:auto; padding-top:260px; }
 .remorse-hero video,.remorse-hero>.motion-fallback { height:auto; aspect-ratio:16/9; object-fit:contain; }
 .remorse-hero::before { background:linear-gradient(0deg,#0b0c0b 10%,#0b0c0bed 54%,transparent 80%); }
 .remorse-hero-copy { display:block; padding:25px 20px; }
 .remorse-hero h1 { font-size:clamp(76px,18vw,135px); margin-bottom:24px; }
 .remorse-hero .lead { font-size:25px; }
 .remorse-intro,.remorse-notes { grid-template-columns:1fr; gap:25px; padding:38px 0; }
 .remorse-recording { padding-top:30px; }
 .remorse-recording-header { align-items:start; }
 .remorse-recording-header p { max-width:60%; }
 .remorse-story { display:block; min-height:0; aspect-ratio:auto; }
 .remorse-story video,.remorse-story>.motion-fallback { position:relative; height:auto; aspect-ratio:16/9; }
 .remorse-story::before { display:none; }
 .remorse-story-copy { padding:22px 18px; background:#101110; }
 .remorse-story h2 { font-size:32px; }
 .remorse-evidence { grid-template-columns:1fr; gap:12px; }
}
@media(max-width:430px) { .remorse-hero { padding-top:190px; }.remorse-hero-copy { padding-inline:16px; } }

/* Feature excerpts retain their full frames so the interface stays readable. */
.remorse-feature { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:center; padding:48px 0; border-bottom:1px solid #ffffff24; }
.remorse-feature figure { margin:0; min-width:0; background:#101110; }
.remorse-feature video,.remorse-feature .motion-fallback { display:block; width:100%; height:auto; }
.remorse-feature figcaption { padding:16px 18px; color:#bbb; font:14px/1.6 var(--mono); }
.remorse-feature-copy h2 { font-size:clamp(30px,3.5vw,48px); line-height:1.08; letter-spacing:-.04em; margin:14px 0 20px; }
.remorse-feature-copy p { color:#c4c4c4; max-width:540px; }
.remorse-feature-copy .eyebrow { font-size:11px; }
.remorse-feature-copy .text-link { display:inline-block; margin-top:20px; }
@media(max-width:800px) { .remorse-feature { grid-template-columns:1fr; gap:22px; padding:32px 0; } }

.remorse-mobile figure { max-width:432px; width:100%; justify-self:center; background:#080808; }
.remorse-mobile img { width:100%; height:auto; }
.remorse-mobile .remorse-feature-copy p+p { margin-top:16px; }

.remorse-interface-reference { margin-top:28px; background:#0b0b0b; }
.remorse-interface-reference img { width:100%; height:auto; }
.remorse-wearable .wearable-photo { max-width:540px; justify-self:center; }
.remorse-wearable img { width:100%; height:auto; }
.remorse-wearable .watch-screen { width:min(100%,280px); margin-top:24px; background:#000; }
.remorse-wearable p+p { margin-top:16px; }

/* Keep interface pixels readable and show the complete recording above its copy. */
.remorse-hero { height:auto; min-height:0; display:block; }
.remorse-hero video,.remorse-hero>.motion-fallback { position:relative; inset:auto; z-index:auto; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; }
.remorse-hero::before { display:none; }
.remorse-hero-copy { padding:28px 24px; gap:28px; }
.remorse-hero h1 { font-size:clamp(36px,4.5vw,68px); }
.remorse-intro { padding-block:34px; }
.remorse-feature { padding-block:32px; gap:32px; }
#speaker-diarization>figure { max-width:672px; justify-self:center; }
#haptic-events>figure { max-width:754px; justify-self:center; }
#conversation-cues>figure { max-width:716px; justify-self:center; }
@media(max-width:800px) {
 .remorse-hero { padding-top:0; }
 .remorse-hero-copy { padding:24px 18px; }
 .remorse-feature-copy h2 { font-size:32px; }
}