/* Spatial paper model: real CSS planes, no video or heavyweight 3D runtime. */
.brand { width: 150px; gap: 10px; }
.brand > .brand-icon-img { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }
.brand > .brand-wordmark-shell { flex: 1; min-width: 0; }
.mail-journey { border-block: 1px solid var(--line); background: var(--surface); }
.mail-stage { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 50px; min-height: 720px; padding-block: 70px; }
.mail-journey.is-enhanced { height: 340vh; }
.is-enhanced .mail-stage { position: sticky; top: 76px; height: calc(100vh - 76px); min-height: 620px; }
.mail-story-copy > p:not(.eyebrow) { margin-top: 25px; color: var(--muted); }
.mail-story-copy h2 { font-size: clamp(2.5rem,4vw,4rem); }
.mail-story-steps { list-style: decimal-leading-zero; padding-left: 28px; margin: 30px 0; }
.mail-story-steps li { padding: 6px 0 6px 10px; color: var(--muted); }
.mail-story-steps li[aria-current] { color: var(--mint); }
.story-play { display:inline-flex; align-items:center; gap:10px; min-height:46px; margin-top:28px; padding:10px 16px; color:var(--mint-ink); background:var(--mint); border:0; border-radius:7px; font-weight:650; }
.story-play[aria-pressed=true] { background:var(--surface-raised); color:var(--ink); border:1px solid var(--line); }
.mail-object-scene { position: relative; height: 500px; perspective: 1400px; cursor: grab; touch-action: none; user-select: none; }
.mail-object-scene.is-dragging { cursor: grabbing; }
.mail-object-scene.is-settling .mail-object { transition: transform 180ms var(--ease); }
.mail-object { width: 390px; height: 270px; position: absolute; left: calc(50% - 195px); top: 165px; transform-style: preserve-3d; transform: translate3d(var(--travel-x,0px),var(--travel-y,0px),var(--travel-z,0px)) rotateZ(var(--roll,0deg)) rotateX(calc(var(--object-x,-12deg) + var(--drag-x,0deg))) rotateY(calc(var(--object-y,-15deg) + var(--drag-y,0deg))); }
.envelope-back,.envelope-front,.envelope-flap { position: absolute; inset: 0; border-radius: 10px; }
.envelope-back { background: #183a3d; border: 1px solid #588781; transform: translateZ(-3px); }
.envelope-front { display: flex; align-items: center; flex-direction: column; justify-content: end; padding-bottom: 30px; gap: 14px; background: linear-gradient(145deg,#375a5b,#182e3a); clip-path: polygon(0 0,50% 44%,100% 0,100% 100%,0 100%); transform: translateZ(8px); opacity: var(--envelope-opacity,1); }
.envelope-front .brand-icon-img { width: 76px; height: auto; }
.envelope-front > span { color: #dcece8; font-size: .72rem; }
.envelope-flap { height: 150px; background: linear-gradient(160deg,#537b79,#264b4e); clip-path: polygon(0 0,100% 0,50% 100%); transform-origin: top; transform: translateZ(var(--flap-z,12px)) rotateX(var(--flap,0deg)); backface-visibility:hidden; }
.letter-sheet { position: absolute; inset: 14px 15px 0; background: #f0f3ea; color: #203936; padding: 24px; border-radius: 6px; transform: translateY(var(--letter-y,-90px)); opacity:var(--letter-visible,0); box-shadow: 0 15px 35px #0002; }
.letter-heading { display: flex; gap: 10px; align-items: center; }
.letter-heading > span { display: grid; place-items: center; border-radius: 50%; width: 32px; height: 32px; background: #d7e6da; font-size: .68rem; }
.letter-heading b,.letter-heading small { display: block; font-size: .7rem; }
.letter-heading small { color: #50675e; font-size: .6rem; }
.letter-sheet h3 { color: #203936; font-size: 1.05rem; margin-top: 20px; }
.letter-sheet p { font-size: .72rem; margin-top: 9px; }
.letter-highlight { margin-top: 14px; font-size: .68rem; background: #d7e6da; padding: 8px; display: flex; justify-content: space-between; }
.letter-lines { height: 20px; margin-top: 12px; background: repeating-linear-gradient(transparent 0 8px,#ccd8ce 8px 9px); width: 75%; }
.letter-sheet > * { opacity:var(--letter-content-opacity,1); }
.extracted-category { position: absolute; right: -20px; top: -105px; background: var(--mint); color: var(--mint-ink); border-radius: 6px; padding: 9px 16px; font-size: .82rem; transform: translate3d(var(--category-x,0px),0,65px); opacity: var(--category-opacity,1); }
.extracted-category small { margin-left: 20px; font-size: .65rem; }
.extracted-task { position: absolute; left: 15px; top: 45px; display: flex; gap: 14px; padding: 22px; width: 325px; background: var(--surface-raised); border: 1px solid var(--mint); border-radius: 10px; transform: translate3d(var(--task-x,60px),var(--task-y,0px),100px); opacity: var(--task-opacity,1); box-shadow: 0 20px 45px #0003; }
.extracted-task small,.extracted-task b,.extracted-task div > span { display: block; }
.extracted-task small { font-size: .68rem; color: var(--mint); }
.extracted-task b { font-size: .9rem; margin-block: 5px; color: var(--ink); }
.extracted-task div > span { font-size: .64rem; color: var(--muted); }
.task-check { color: var(--mint); }
.extracted-reply { position: absolute; top: 175px; left: -30px; width: 330px; background: var(--bg); border: 1px solid var(--line); padding: 20px; border-radius: 10px; transform: translate3d(0,var(--reply-y,0px),145px); opacity: var(--reply-opacity,1); box-shadow: 0 20px 45px #0003; }
.extracted-reply small { color: var(--muted); font-size: .66rem; }
.extracted-reply p { font-size: .76rem; margin-block: 10px; }
.extracted-reply b { color: var(--mint); font-size: .68rem; }
.mail-object-shadow { position: absolute; width: 75%; height: 90px; background: radial-gradient(ellipse,#163c32,transparent 70%); bottom: 0; left: 10%; opacity:var(--shadow-opacity,.3); transform:scale(var(--shadow-scale,1)); }
.mail-finale { background:var(--bg); border-bottom:1px solid var(--line); }
.mail-finale.is-enhanced { height:240vh; }
.finale-stage { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; min-height:680px; padding-block:80px; }
.mail-finale.is-enhanced .finale-stage { position:sticky; top:76px; height:calc(100vh - 76px); }
.finale-copy h2 { font-size:clamp(2.3rem,3.4vw,3.6rem); }
.finale-copy > p:not(.eyebrow) { margin-top:24px; color:var(--muted); }
.finale-copy label { display:block; margin-top:30px; font-size:.8rem; }
#reply-scrub { width:100%; max-width:360px; min-height:44px; accent-color:var(--mint); }
.finale-copy .demo-caption { padding:0; text-align:left; margin:8px 0 25px; }
.finale-desk { position:relative; min-height:440px; perspective:1200px; }
.finale-composer { position:relative; background:var(--surface); border:1px solid var(--line); padding:28px; border-radius:12px; box-shadow:0 25px 60px #163c3214; transform:rotateX(var(--draft-fold,0deg)) scale(var(--draft-scale,1)); opacity:var(--draft-opacity,1); transform-origin:50% 100%; }
.finale-address { padding-bottom:18px; border-bottom:1px solid var(--line); }
.finale-address span,.finale-address small { display:block; }
.finale-address small { color:var(--muted); }
.finale-composer > p { min-height:150px; padding-top:24px; }
.finale-validation { display:flex; gap:12px; align-items:center; justify-content:space-between; opacity:var(--validation-opacity,1); font-size:.8rem; }
.finale-validation b { padding:10px 18px; background:var(--mint); color:var(--mint-ink); border-radius:6px; }
.finale-envelope { position:absolute; top:100px; left:calc(50% - 100px); width:200px; height:140px; display:grid; place-items:center; background:linear-gradient(155deg,#6e9a8a,#365e50); border-radius:8px; box-shadow:0 20px 45px #163c3222; transform:translate3d(var(--send-x,0px),var(--send-y,0px),0) rotate(var(--send-rotate,0deg)); opacity:var(--send-opacity,0); }
.finale-envelope:before { content:''; position:absolute; inset:0; clip-path:polygon(0 0,100% 0,50% 65%); background:#91b3a1; }
.finale-envelope .brand-icon-img { position:relative; width:62px; height:auto; margin-top:55px; }
.finale-received { position:absolute; top:70px; inset-inline:0; text-align:center; opacity:var(--received-opacity,0); }
.finale-received > span { display:grid; place-items:center; width:60px; height:60px; margin:0 auto 24px; border:1px solid var(--mint); border-radius:50%; color:var(--mint); font-size:1.8rem; }
.finale-received strong,.finale-received small { display:block; }
.finale-received strong { color:var(--ink); font-size:1.5rem; }
.finale-received small { color:var(--muted); margin-top:12px; }
.finale-status { position:absolute; bottom:0; left:0; right:0; text-align:center; font-size:.8rem; color:var(--muted); }
html[data-appearance="light"] .envelope-back { background:#a5bdab; border-color:#749780; }
html[data-appearance="light"] .envelope-front { background:linear-gradient(145deg,#c1d2be,#8eae99); }
html[data-appearance="light"] .envelope-front > span { color:#203b36; }
html[data-appearance="light"] .envelope-flap { background:linear-gradient(160deg,#d6e0ce,#9db8a4); }
@media not all and (prefers-color-scheme:dark) {
  html:not([data-appearance="dark"]) .envelope-back { background:#a5bdab; border-color:#749780; }
  html:not([data-appearance="dark"]) .envelope-front { background:linear-gradient(145deg,#c1d2be,#8eae99); }
  html:not([data-appearance="dark"]) .envelope-front > span { color:#203b36; }
  html:not([data-appearance="dark"]) .envelope-flap { background:linear-gradient(160deg,#d6e0ce,#9db8a4); }
}
@media(max-width:900px),(max-height:700px) {
  .mail-finale.is-enhanced { height:auto; }
  .mail-finale.is-enhanced .finale-stage { position:relative; top:0; height:auto; }
  .finale-stage { grid-template-columns:1fr; gap:35px; padding-block:55px; }
  .finale-desk { overflow:clip; padding-bottom:55px; }
}
@media(prefers-reduced-motion:reduce) {
  .mail-object-scene { cursor:default; touch-action:auto; }
  .mail-finale.is-enhanced { height:auto; }
  .mail-finale.is-enhanced .finale-stage { position:relative; top:0; height:auto; }
  .mail-object { transform:none; }
  .finale-composer,.finale-envelope { transform:none; }
}
@media(max-width:1100px) { .mail-stage { gap: 20px; } .mail-object { scale: .85; } }
@media(max-width:900px),(max-height:700px) {
  .mail-journey.is-enhanced { height: auto; }
  .is-enhanced .mail-stage { position: relative; top: 0; height: auto; min-height: 0; }
  .mail-stage { grid-template-columns: 1fr; padding-block: 50px; }
  .mail-story-copy h2 { font-size: 2.6rem; }
  .mail-story-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 25px; font-size: .8rem; }
  .mail-object-scene { height: 470px; overflow: clip; }
}
@media(max-width:600px) {
  .nav-bar > .brand,.brand { width: 118px; max-width: 118px; }
  .brand > .brand-icon-img { width: 28px; height: 28px; }
  .nav-bar { gap: 10px; }
  .nav-actions .btn { padding-inline: 9px; }
  .mail-object { scale: .72; transform-origin: center; top: 110px; }
  .mail-object-scene { height: 380px; }
}
@media(prefers-reduced-motion:reduce) {
  .mail-journey.is-enhanced { height: auto; }
  .is-enhanced .mail-stage { position: relative; top: 0; height: auto; }
}
@media(forced-colors:active) {
  .mail-finale.is-enhanced { height:auto; }
  .mail-finale.is-enhanced .finale-stage { position:relative; top:0; height:auto; }
  .finale-envelope,.finale-received { display:none; }
  .finale-composer { opacity:1; transform:none; }
  .finale-validation { opacity:1; }
  .mail-object-scene { display: none; }
  .mail-journey.is-enhanced { height: auto; }
  .is-enhanced .mail-stage { position: relative; height: auto; top: 0; }
  .mail-stage { display: block; }
}

/* Size the actual artwork by height, preserving the envelope's wide aspect ratio. */
.nav-bar > .brand,.brand { width:auto; max-width:none; gap:10px; --logo-height:28px; }
.brand > .brand-icon-img { width:auto; height:var(--logo-height); }
.brand > .brand-wordmark-shell { flex:none; width:auto; }
.brand > .brand-wordmark-shell > svg { width:auto; height:var(--logo-height); }
.trust-map { min-width:0; padding:30px 0; }
.trust-path { height:70px; position:relative; margin:25px 0 12px; }
.trust-path:before { content:''; position:absolute; inset:35px 16.66% auto; border-top:2px solid var(--line); }
.trust-mail { display:grid; place-items:center; width:33.333%; height:70px; transform:translateX(calc(var(--trust-step,0) * 100%)); transition:transform 650ms var(--ease); }
.trust-mail .brand-icon-img { width:60px; height:auto; padding:8px; background:var(--surface); border:1px solid var(--mint); border-radius:8px; }
.trust-stations { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.trust-stations button { background:transparent; border:1px solid transparent; color:var(--text); padding:14px 8px; border-radius:8px; text-align:center; min-height:110px; }
.trust-stations button[aria-pressed=true] { background:var(--surface); border-color:var(--mint); }
.trust-stations span,.trust-stations strong,.trust-stations small { display:block; }
.trust-stations span { color:var(--mint); font-size:.72rem; margin-bottom:8px; }
.trust-stations strong { font-size:.88rem; }
.trust-stations small { font-size:.72rem; color:var(--muted); margin-top:7px; }
.trust-explanation { margin-top:22px; min-height:84px; font-size:.95rem; color:var(--muted); }
.trust-explanation strong { color:var(--ink); font-weight:750; }
.trust-content .trust-team { padding:25px 0 0; }
.motion-paused .trust-mail { transition:none; }
@media(max-width:600px) {
  .nav-bar > .brand,.brand { --logo-height:21px; }
  .trust-map { padding:0; }
  .trust-stations strong { font-size:.8rem; }
  .trust-stations button { padding-inline:4px; }
}
@media(max-width:360px) {
  .nav-bar > .brand { --logo-height:17px; gap:6px; }
  .nav-bar { gap:6px; }
  .nav-actions .btn { font-size:.7rem; }
}

/* Small screens use a fitted stage and explicit, thumb-sized chapter controls. */
.story-mobile-controls { display:none; }
@media (max-width:900px), (max-height:700px) {
  .mail-stage { gap:20px; }
  .mail-story-steps { display:none; }
  .story-play { margin-top:20px; min-height:48px; }
  .mail-object-scene { height:calc(620px * var(--mobile-scale,.5)); overflow:visible; touch-action:pan-y pinch-zoom; cursor:default; }
  .mail-object { top:calc(310px * var(--mobile-scale,.5) - 135px); scale:var(--mobile-scale,.5); transform-origin:50% 50%; transform:rotateX(-6deg) rotateY(-8deg); }
  .mail-object-scene.is-settling .mail-object { transition:none; }
  .mail-object-shadow { bottom:24px; }
  .story-mobile-controls { display:block; position:relative; z-index:1; }
  .mail-object-scene .mail-object { pointer-events:none; }
  .story-positions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
  .story-positions button { min-height:48px; padding:8px 4px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); font-size:.85rem; font-weight:650; }
  .story-positions button[aria-pressed=true] { color:var(--mint-ink); background:var(--mint); border-color:var(--mint); }
  .story-mobile-controls p { min-height:3.5em; margin-top:16px; font-size:1rem; font-weight:650; color:var(--ink); }
  .finale-stage { gap:24px; }
  .finale-desk { min-width:0; padding-bottom:70px; }
  .finale-composer { padding:20px; }
  .finale-composer > p { min-height:190px; }
  .finale-status { padding-inline:10px; }
  .finale-validation { flex-wrap:wrap; }
}
@media (pointer:coarse) { .mail-object-scene { touch-action:pan-y pinch-zoom; cursor:default; } }
@media (prefers-reduced-motion:reduce) { .mail-object { transform:none; } }

html[data-appearance="dark"] .mail-object-shadow { background:radial-gradient(ellipse,#3b2c51,transparent 70%); }
html[data-appearance="dark"] .letter-sheet { background:#f3eff7; color:#30243d; }
html[data-appearance="dark"] .letter-heading > span { background:#e2d9eb; }
html[data-appearance="dark"] .letter-heading small { color:#695a75; }
html[data-appearance="dark"] .letter-sheet h3 { color:#30243d; }
html[data-appearance="dark"] .letter-highlight { background:#e3d9ee; }
html[data-appearance="dark"] .letter-lines { background:repeating-linear-gradient(transparent 0 8px,#d1c5dc 8px 9px); }
html[data-appearance="dark"] .finale-composer { box-shadow:0 25px 60px #2b203c24; }
html[data-appearance="dark"] .finale-envelope { background:linear-gradient(155deg,#80699a,#4a385e); box-shadow:0 20px 45px #2b203c22; }
html[data-appearance="dark"] .finale-envelope:before { background:#aa93c2; }
@media (prefers-color-scheme:dark) {
  html:not([data-appearance="light"]) .mail-object-shadow { background:radial-gradient(ellipse,#3b2c51,transparent 70%); }
  html:not([data-appearance="light"]) .letter-sheet { background:#f3eff7; color:#30243d; }
  html:not([data-appearance="light"]) .letter-heading > span { background:#e2d9eb; }
  html:not([data-appearance="light"]) .letter-heading small { color:#695a75; }
  html:not([data-appearance="light"]) .letter-sheet h3 { color:#30243d; }
  html:not([data-appearance="light"]) .letter-highlight { background:#e3d9ee; }
  html:not([data-appearance="light"]) .letter-lines { background:repeating-linear-gradient(transparent 0 8px,#d1c5dc 8px 9px); }
  html:not([data-appearance="light"]) .finale-composer { box-shadow:0 25px 60px #2b203c24; }
  html:not([data-appearance="light"]) .finale-envelope { background:linear-gradient(155deg,#80699a,#4a385e); box-shadow:0 20px 45px #2b203c22; }
  html:not([data-appearance="light"]) .finale-envelope:before { background:#aa93c2; }
}

/* The phone tells one visual story at a time; the controls let people set its pace. */
@media(max-width:600px) {
  .mail-journey { border:0; background:transparent; }
  .mail-stage { display:block; min-height:0; padding:44px 0 30px; }
  .mail-story-copy > p,.mail-story-steps,.story-play { display:none; }
  .mail-story-copy h2 { max-width:11ch; font-size:2.15rem; line-height:1.08; }
  .mail-object-scene { margin-top:12px; height:350px; overflow:hidden; }
  .mail-object { scale:.64; top:98px; }
  .mail-object-shadow { bottom:14px; }
  .story-mobile-controls { margin-top:0; }
  .story-positions { gap:8px; }
  .story-positions button { min-height:52px; border-radius:999px; font-size:.72rem; }
  .story-mobile-controls p { min-height:0; margin:14px 4px 0; color:var(--muted); font-size:.9rem; font-weight:500; }
}