/* Keep the complete scroll scene inside the space below the sticky navigation. */
:root{--site-header-height:clamp(76px,5.88vw,110px)}
.experience.is-pinned .experience-stage{padding-top:calc(var(--site-header-height) + 20px);padding-bottom:62px}
.experience.is-pinned .experience-phone{width:min(350px,calc((100svh - var(--site-header-height) - 86px)*.49093))}
.experience.is-pinned .experience-layout{margin:auto}
@media(min-width:760px) and (max-height:850px){
 .experience.is-pinned .experience-layout{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,6vw,100px)}
 .experience.is-pinned .experience-chapters{min-height:200px}
 .experience.is-pinned .experience-chapter h3{font-size:clamp(32px,3vw,42px);margin-bottom:16px}
 .experience.is-pinned .experience-chapter>p{font-size:14px;line-height:1.6}
 .experience.is-pinned .experience-device-panel{margin:12px 0 0}
 .experience.is-pinned .experience-device-panel>img{width:clamp(120px,23svh,184px)}
 .experience.is-pinned .experience-eyebrow{margin-bottom:18px}
}
@media(max-width:1000px){:root{--site-header-height:78px}}
@media(min-width:760px) and (max-width:899px){
 .experience.is-pinned .experience-layout{grid-template-columns:1.1fr 1fr;max-width:780px;gap:24px}
 .experience.is-pinned .experience-phone{width:min(310px,calc((100svh - var(--site-header-height) - 90px)*.49093))}
 .experience.is-pinned .experience-chapter h3{font-size:34px}
 .experience.is-pinned .experience-device-panel figcaption{font-size:12px;gap:8px}
}
@media(max-width:759px){
 .experience.is-pinned .experience-stage{padding:calc(var(--site-header-height) + 16px) 24px 58px}
 .experience.is-pinned .experience-layout{display:grid;grid-template-columns:1fr 1.8fr;gap:12px 20px;max-width:480px;align-items:center}
 .experience.is-pinned .experience-copy{display:contents}
 .experience.is-pinned .experience-eyebrow{grid-column:1/-1;margin:0;font-size:9px}
 .experience.is-pinned .experience-chapters{grid-column:1/-1;min-height:145px}
 .experience.is-pinned .experience-chapter h3{font-size:30px;line-height:1.06;margin-bottom:12px}
 .experience.is-pinned .experience-chapter>p{font-size:12px;line-height:1.55;max-width:430px}
 .experience.is-pinned .experience-input-panels{grid-column:1;grid-row:3;align-self:center}
 .experience.is-pinned .experience-device-panel{margin:0}
 .experience.is-pinned .experience-device-panel figcaption{font-size:11px;line-height:1.5;display:block;border:none;padding:0 0 14px;color:#bebeb5}
 .experience.is-pinned .experience-device-panel figcaption svg{display:block;width:20px;height:20px;margin-bottom:10px}
 .experience.is-pinned .experience-device-panel>img{width:110px}
 .experience.is-pinned .experience-nav{grid-column:1;grid-row:3;align-self:end;margin:0;gap:0}
 .experience.is-pinned .experience-nav a{width:32px}
 .experience.is-pinned .experience-visual{grid-column:2;grid-row:3}
 .experience.is-pinned .experience-phone{width:min(210px,calc((100svh - var(--site-header-height) - 270px)*.49093))}
 /* Remove secondary chrome, not touch target size, in the smaller phone preview. */
 .experience.is-pinned .xp-phone-brand{margin-top:4cqi}
 .experience.is-pinned .xp-phone-content{margin-top:3cqi}
 .experience.is-pinned .xp-capture-title{margin-top:3cqi}
 .experience.is-pinned .xp-waveform{height:7cqi;margin-top:2cqi;margin-bottom:2cqi}
 .experience.is-pinned .xp-recording-state,.experience.is-pinned .xp-transcript-label,.experience.is-pinned .xp-ready-summary div>span,.experience.is-pinned .xp-date,.experience.is-pinned .xp-home-note{display:none}
 .experience.is-pinned .xp-transcript-card blockquote{font-size:4.1cqi}
 .experience.is-pinned .xp-context-chips{margin-top:2cqi}
 .experience.is-pinned .xp-ready-summary{margin:3cqi 0}
 .experience.is-pinned .xp-actions-intro{margin:2cqi 0 3cqi}
 .experience.is-pinned .xp-action-row{min-height:16cqi;padding:2.5cqi 0}
 .experience-hint{font-size:9px;gap:6px}
}
@media(max-width:600px){:root{--site-header-height:72px}}
/* Native comparison: restrained surfaces, live typography, and one clear interaction. */
.comparison-native{background:#fff;padding-block:104px 90px}
.comparison-heading{text-align:center;margin-bottom:40px}
.comparison-heading .lc-eyebrow{justify-content:center}
.comparison-native .comparison-heading h2{font-family:Inter,'Helvetica Neue',sans-serif;font-weight:400;font-size:clamp(40px,4.1vw,64px);letter-spacing:-.055em;line-height:1.06}
.comparison-heading>p:last-child{font-size:20px;line-height:1.55;color:#20211e;letter-spacing:-.025em;margin:24px 0 0}
.comparison-heading>p:last-child span{color:#747671}
.comparison-controls{display:flex;justify-content:center;gap:5px;width:fit-content;padding:5px;border-radius:999px;background:#f2f2ef;margin:0 auto 30px}
.comparison-controls[hidden],.comparison-panel[hidden],.comparison-instruction[hidden]{display:none}
.comparison-controls button{display:flex;align-items:center;justify-content:center;gap:13px;min-height:46px;padding:0 26px;border-radius:999px;color:#72746d;font-family:Inter,sans-serif;font-size:13px;transition:background 200ms,color 200ms,box-shadow 200ms}
.comparison-controls button>span{font-size:10px;font-variant-numeric:tabular-nums;opacity:.65}
.comparison-controls button[aria-selected=true]{background:#fff;color:#1c1d19;box-shadow:0 2px 6px #00000009}
.comparison-controls button:hover{color:#161714}
.comparison-board{border:1px solid #e4e5df;border-radius:22px;overflow:hidden}
.comparison-categories,.comparison-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.comparison-category{position:relative;padding:32px 32px 28px;border-right:1px solid #e4e5df}
.comparison-category:last-child,.comparison-panel>div:last-child{border-right:0}
.comparison-pocket{background:#faf8f2}
.comparison-category>p{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#74766f;margin:23px 0 12px}
.comparison-pocket>p:first-of-type{color:#966f30}
.comparison-native .comparison-category h3{font-family:Inter,'Helvetica Neue',sans-serif;font-size:29px;font-weight:400;letter-spacing:-.045em;line-height:1.2;margin-bottom:11px}
.comparison-category>span{font-size:13px;line-height:1.5;color:#767870}
.comparison-icon{display:block;width:30px;height:30px;stroke:#494c44;stroke-width:1.2;fill:none;stroke-linejoin:round;stroke-linecap:round}
.comparison-brand{display:block;width:47px;height:30px}
.comparison-panel{border-top:1px solid #e4e5df}
.comparison-panel>div{min-width:0;padding:28px 32px 30px;border-right:1px solid #e4e5df;display:flex;flex-direction:column;min-height:265px}
.comparison-panel .comparison-panel-label{font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:#81837a;margin:0 0 12px}
.comparison-panel h4{font-size:20px;font-weight:400;letter-spacing:-.04em;line-height:1.3;margin:0 0 13px;color:#262822}
.comparison-panel p:not(.comparison-panel-label){font-size:14px;line-height:1.6;letter-spacing:-.015em;color:#767970;margin:0 0 28px}
.comparison-mini{display:flex;align-items:center;gap:10px;justify-content:space-between;min-height:48px;padding:11px 13px;border:1px solid #e9eae3;border-radius:9px;background:#fff;color:#71756a;font-size:10px;line-height:1.5;margin-top:auto}
.comparison-mini>span:last-child{flex:none}
.comparison-prompt>span{display:grid;place-items:center;border-radius:50%;width:24px;height:24px;background:#f0f1ed;color:#66695e;font-size:17px}
.comparison-recording>span{color:#c69b51;font-size:11px}.comparison-recording>i{height:18px;width:33px;opacity:.35;background:repeating-linear-gradient(90deg,#74776c 0 1px,transparent 1px 4px);clip-path:polygon(0 40%,20% 20%,35% 40%,45% 0,65% 30%,80% 10%,100% 50%,85% 90%,70% 60%,50% 100%,35% 65%,15% 80%,0 60%)}
.comparison-recording small{font-size:9px;font-variant-numeric:tabular-nums}
.comparison-press{justify-content:flex-start;color:#656453}.comparison-button-dot{width:24px;height:24px;border:1px solid #b9b7af;border-radius:50%;background:#272922;box-shadow:inset 0 0 0 3px #fff;flex:none}
.comparison-note{justify-content:flex-start;gap:6px;border-color:transparent;background:transparent;padding:11px 0}.comparison-note>span{padding:7px 10px;background:#f0f1eb;border-radius:5px}
.comparison-apps{gap:12px}.comparison-apps img{object-fit:contain;width:22px;height:22px}.comparison-apps span{font-size:9px;color:#816533;margin-left:auto}
.comparison-mobile-label{display:none}
.comparison-instruction{text-align:center;font-size:11px;line-height:1.7;color:#676b60;margin:20px 0 0!important}.comparison-instruction>span{color:#92958b;margin-left:8px}
.comparison-native .comparison-caveat{text-align:center;margin:30px auto 0!important;max-width:850px}
.lc-case-details{margin-top:22px;border-top:1px solid #e2e3db;grid-column:1/-1}
.lc-case-details summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;font-size:12px;color:#4e5346;min-height:53px;padding:14px 0 0}
.lc-case-details summary::-webkit-details-marker{display:none}
.lc-case-details summary>span{width:25px;height:25px;border:1px solid #d6d9cf;border-radius:50%;display:grid;place-items:center;font-size:18px;line-height:1;flex:none;transition:transform 220ms}
.lc-case-details[open] summary>span{transform:rotate(45deg)}
.lc-case-details dl{margin:16px 0 0;font-size:12px;line-height:1.6}.lc-case-details dl>div{padding:12px 0;border-top:1px solid #e9eae3}.lc-case-details dt{color:#30362a;margin-bottom:4px}.lc-case-details dd{margin:0;color:#797e71}
.lc-case-details[open] dl{animation:case-open 240ms ease-out}
@keyframes case-open{from{opacity:.3;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(max-width:1000px){
 .comparison-category{padding:26px 22px}.comparison-native .comparison-category h3{font-size:25px}
 .comparison-panel>div{padding:25px 22px}.comparison-panel h4{font-size:18px}.comparison-panel p:not(.comparison-panel-label){font-size:13px}
 .comparison-mini{flex-wrap:wrap;font-size:9px;gap:6px}.comparison-note>span{padding:5px 7px}
}
@media(max-width:640px){
 .comparison-native{padding:70px 22px}.comparison-heading{text-align:left;margin-bottom:27px}.comparison-heading .lc-eyebrow{justify-content:flex-start}
 .comparison-native .comparison-heading h2{font-size:42px}.comparison-heading>p:last-child{font-size:18px;margin-top:22px}
 .comparison-controls{width:100%;gap:2px;margin-bottom:24px;padding:4px}
 .comparison-controls button{flex:1;padding:0 10px;min-height:46px;font-size:11px;gap:6px}.comparison-controls button>span{font-size:9px}
 .comparison-categories{display:none}.comparison-panel{grid-template-columns:1fr;border-top:0}
 .comparison-panel>div{min-height:0;border-right:0;border-bottom:1px solid #e4e5df;padding:25px}
 .comparison-panel>div:last-child{border-bottom:0}
 .comparison-mobile-label{display:block;font-size:12px;color:#30352b;margin-bottom:17px;letter-spacing:-.02em}
 .comparison-pocket .comparison-mobile-label{color:#967031}
 .comparison-panel .comparison-panel-label{display:none}.comparison-panel h4{font-size:23px}.comparison-panel p:not(.comparison-panel-label){font-size:14px;margin-bottom:18px}
 .comparison-mini{font-size:11px;gap:10px}.comparison-recording small{font-size:10px}
 .comparison-instruction>span{display:block;margin-left:0}.comparison-native .comparison-caveat{text-align:left;font-size:10px}
 .lc-case-details summary{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.comparison-controls button,.lc-case-details summary>span{transition:none}.lc-case-details[open] dl{animation:none}}