/* Authored sample screens. Frame and status chrome are illustrative, not controls. */
.phone-showcase { padding: 78px 0 88px; border-bottom: 1px solid var(--line); }
.phone-showcase-heading { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.phone-showcase h2 { font-size: clamp(34px,4vw,54px); line-height: 1.15; letter-spacing: -.03em; }
.phone-showcase-heading p { color: var(--ink-mid); font-size: 17px; margin-top: 18px; }
.phone-sample-label { color: var(--ink-mid); font-size: 12px; margin: 20px 0 38px; }
.phone-gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 48px; max-width: 1080px; margin: auto; align-items: start; }
.phone-example { min-width: 0; }
.phone-example h3 { font: 500 25px/1.3 var(--font-display); letter-spacing: -.02em; margin: 27px 0 9px; }
.phone-example > p { font-size: 14px; color: var(--ink-mid); line-height: 1.7; max-width: 31ch; }
.product-phone { width: 100%; max-width: 320px; margin: auto; background: #18231e; border: 6px solid #28352d; border-radius: 40px; padding: 0 3px 10px; box-shadow: 0 22px 44px #10201820; color: #20382b; direction: inherit; }
.phone-status { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 19px; color: #f3f7f1; font: 600 11px/1 var(--font); direction: ltr; }
.phone-status i { width: 70px; height: 18px; border-radius: 14px; background: #090f0c; }
.phone-screen { background: #fbfcf9; border-radius: 22px 22px 28px 28px; overflow: hidden; min-height: 560px; display: flex; flex-direction: column; }
.phone-header { display: flex; gap: 11px; align-items: center; padding: 19px 16px 15px; border-bottom: 1px solid #dce4da; }
.phone-header > img { opacity: .7; filter: grayscale(1); }
.phone-header strong { display: block; font-size: 18px; font-weight: 650; line-height: 1.4; }
.phone-header small { display: block; color: #536957; font-size: 12px; margin-top: 3px; line-height: 1.6; }
.phone-content { padding: 0 16px 17px; flex: 1; }
.phone-date { text-align: center; font-size: 12px; color: #536957; padding: 17px 0; margin: 0; }
.phone-bubble { border-radius: 14px 14px 14px 3px; padding: 14px; margin-bottom: 12px; font-size: 14px; line-height: 1.6; }
.phone-bubble p { margin: 0; }
.phone-bubble small { display: block; text-align: end; font-size: 12px; color: #536957; margin-top: 6px; }
.phone-incoming { background: #eaf0e6; margin-inline-end: 18px; }
.phone-outgoing { background: #dcebdc; margin-inline-start: 30px; border-radius: 14px 14px 3px 14px; }
.phone-meta { font-size: 12px; color: #536957; display: block; }
.phone-bubble .voice-print { height: 32px; margin: 9px 0; }
.phone-bubble .voice-bars { gap: 2px; }
.phone-bubble .voice-bars i { height: calc(var(--peak) * .6px); }
.phone-insight { padding: 11px 0 2px; font-size: 13px; line-height: 1.6; }
.phone-insight strong { font-weight: 650; }
.phone-insight p { margin: 3px 0 0; color: #536957; }
.phone-compose { display: flex; align-items: center; justify-content: space-between; margin: 0 13px 16px; border: 1px solid #c8d5ca; border-radius: 21px; padding: 11px 13px; color: #536957; font-size: 12px; gap: 10px; }
.phone-compose img { filter: grayscale(1); opacity: .7; }
.phone-home { width: 92px; height: 4px; background: #829084; border-radius: 2px; margin: 9px auto 0; }
.phone-answer { padding: 9px 1px 12px; font-size: 14px; line-height: 1.65; }
.phone-answer-title { font: 500 28px/1.15 var(--font-display); letter-spacing: -.025em; margin: 14px 0; }
.phone-answer > p { margin: 0; }
.phone-citation { padding-top: 14px; margin-top: 18px; border-top: 1px solid #c8d5ca; font-size: 12px; line-height: 1.7; color: #536957; }
.phone-citation p { margin: 6px 0 0; }
.phone-reader { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid #dce4da; font-size: 14px; }
.phone-reader small { color: #536957; font-size: 12px; }
.phone-policy { margin-top: 22px; font-size: 14px; }
.phone-policy p { margin: 6px 0; font-size: 13px; }
.phone-note { color: #536957; font-size: 12px; line-height: 1.7; margin: 19px 0 0; }
.phone-footnote { color: #536957; text-align: center; font-size: 12px; padding: 10px 13px 18px; }
.phone-verified { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 0 20px; color: #345d43; font-size: 12px; }
.phone-verified img { filter: grayscale(1); }
.cell-customer-phone { padding: 0 0 0 12px; }
.cell-customer-phone .cell-customer-label, .phone-caption { text-align: center; }
.cell-customer-phone .cell-customer-label { margin-bottom: 18px; }
.phone-caption { font-size: 12px; color: var(--ink-mid); margin-top: 18px; }
.verified-phone { max-width: 316px; }
.verified-phone .phone-screen { min-height: 425px; }
.verified-phone .phone-header small { color: #345d43; }
.verified-phone .phone-incoming { margin-top: 5px; }
.verified-phone .phone-outgoing { margin-top: 24px; }
/* Existing scene states relate the signed outbound message to the phone reply. */
[data-story-state="1"] .cell-phone-incoming, [data-story-state="2"] .cell-phone-reply { outline: 2px solid #638565; outline-offset: 2px; }
[data-story-state="1"] .cell-phone-incoming, [data-story-state="2"] .cell-phone-reply { animation: phone-arrive .6s var(--ease-out-expo) both; }
.phone-voice .voice-ink { animation: voice-follow 4.7s ease-in-out infinite; }
@keyframes phone-arrive { from { transform: translateY(7px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
:root[data-motion-paused="true"] .cell-phone-incoming,
:root[data-motion-paused="true"] .cell-phone-reply,
:root[data-page-hidden="true"] .cell-phone-incoming,
:root[data-page-hidden="true"] .cell-phone-reply,
:root[data-motion-paused="true"] .phone-voice .voice-ink,
:root[data-page-hidden="true"] .phone-voice .voice-ink,
.phone-showcase:not([data-motion-visible="true"]) .voice-ink { animation-play-state: paused !important; }
:dir(rtl) .phone-header > img { transform: rotate(180deg); }
:dir(rtl) .phone-showcase h2, :dir(rtl) .phone-example h3, :dir(rtl) .phone-answer-title { letter-spacing: 0; line-height: 1.5; }
@media (max-width: 1050px) { .phone-gallery { gap: 24px; } .phone-content { padding-inline: 12px; } .phone-bubble { padding: 11px; } }
@media (max-width: 767px) {
 .phone-showcase { padding: 58px 0; }
 .phone-showcase-heading { align-items: start; flex-direction: column; gap: 8px; }
 .phone-showcase-heading p { font-size: 15px; }
 .phone-sample-label { margin-top: 10px; }
 .phone-gallery { grid-template-columns: 1fr; gap: 46px; max-width: 340px; }
 .phone-example > h3, .phone-example > p { max-width: 320px; margin-inline: auto; }
 .phone-example > p { margin-top: 10px; }
 .cell-customer-phone { padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
 .phone-voice .voice-ink, .cell-phone-incoming, .cell-phone-reply { animation: none !important; }
}

.verified-phone .phone-header strong::after { content: "✓"; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-inline-start: 7px; border-radius: 50%; background: #345d43; color: white; font: 700 12px/1 sans-serif; vertical-align: 2px; }

/* Genuine captures retain every app pixel, including native status and navigation. */
.captured-phone { padding: 3px; overflow: hidden; border-radius: 38px; }
.app-capture { display: block; width: 100%; height: auto; border-radius: 27px; }
.phone-example .capture-meta { font-size: 12px; margin-top: 14px; }
.capture-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; min-height: 44px; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.capture-link img { filter: grayscale(1); }

/* Real operator UI stays at its desktop aspect ratio; the capture is never redrawn. */
.cell-captures { margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--line); }
.cell-captures > h3 { font: 500 30px/1.3 var(--font-display); letter-spacing: -.02em; }
.cell-capture-note { color: var(--ink-mid); max-width: 78ch; font-size: 13px; line-height: 1.7; margin: 14px 0 28px; }
.cell-capture-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.cell-capture { margin: 0; min-width: 0; }
.cell-capture > img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; }
.cell-capture h4 { font: 500 24px/1.4 var(--font-display); margin: 22px 0 8px; }
.cell-capture figcaption > p { color: var(--ink-mid); font-size: 14px; line-height: 1.7; max-width: 55ch; }
.cell-capture a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; margin-top: 8px; }
:dir(rtl) .cell-captures h3, :dir(rtl) .cell-captures h4 { letter-spacing: 0; line-height: 1.5; }
@media(max-width: 767px) { .cell-capture-grid { grid-template-columns: 1fr; gap: 28px; } }

.cell-customer-showcase { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 72px; margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--line); }
.cell-customer-explanation h3 { max-width: 15ch; font: 500 clamp(30px,3.2vw,44px)/1.17 var(--font-display); letter-spacing: -.025em; }
.cell-customer-explanation > p { color: var(--ink-mid); font-size: 17px; line-height: 1.7; max-width: 43ch; margin-top: 24px; }
.cell-customer-explanation dl { margin-top: 36px; }
.cell-customer-explanation dl > div { border-top: 1px solid var(--line); padding: 19px 0; }
.cell-customer-explanation dt { font-size: 17px; font-weight: 600; }
.cell-customer-explanation dd { color: var(--ink-mid); font-size: 14px; line-height: 1.7; margin: 8px 0 0; max-width: 49ch; }
.cell-customer-example { margin: 0; }
.cell-customer-example .product-phone { max-width: 354px; }
.cell-customer-example figcaption { max-width: 354px; margin: 18px auto 0; color: var(--ink-mid); font-size: 12px; line-height: 1.7; }
.cell-customer-example figcaption a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; }
:dir(rtl) .cell-customer-explanation h3 { letter-spacing: 0; line-height: 1.5; }
@media(max-width:767px) { .cell-customer-showcase { grid-template-columns: 1fr; gap: 32px; } .cell-customer-explanation h3 { max-width: 20ch; } }