/* One purpose per section; the hero and its entrance keep their existing geometry. */
.scenario-card img { aspect-ratio:1672 / 941; height:auto; object-fit:contain; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip-path:inset(50%); white-space:nowrap; border:0!important; }
.experience-section { background:#f5f5f7; padding-block:100px; }
.experience-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:48px; align-items:center; }
.experience-copy .section-description { margin:28px 0; max-width:360px; }
.interaction-instruction { max-width:320px; color:var(--secondary); font-size:1rem; line-height:1.6; margin:28px 0 18px; }
.interactive-product { min-width:0; }
.product-device.control-demo { container-type:inline-size; position:relative; width:100%; aspect-ratio:626 / 731; background:none; padding:0; border:0; border-radius:0; box-shadow:none; overflow:visible; margin:0; }
.demo-upper { position:absolute; bottom:calc(445 / 731 * 100%); width:100%; aspect-ratio:626 / 445; transform:perspective(1200px) rotateX(50deg); transform-origin:center bottom; border:5px solid #62656a; border-bottom:0; border-radius:30px 30px 0 0; padding:7px 7px 0; background:#101113; box-shadow:inset 0 0 0 2px #d1d3d7; }
.demo-desktop { position:relative; height:100%; overflow:hidden; border-radius:20px 20px 0 0; background:linear-gradient(150deg,#a6d7ff 5%,#5d99f1 48%,#1d49d0 100%); }
.demo-menubar { display:flex; align-items:center; gap:2.1cqw; height:5.6cqw; padding:0 2.6cqw; background:#e6efffd9; font:400 2cqw/1 var(--font); }
.demo-menubar time { margin-left:auto; }
.demo-window { position:absolute; width:83%; top:14%; left:8.5%; height:66%; background:#fffefa; border-radius:1.4cqw; box-shadow:0 2cqw 5cqw #12348155; }
.demo-window-bar { display:flex; align-items:center; gap:10cqw; height:6cqw; background:#fafafa; border-bottom:1px solid #d8d8dd; border-radius:1.4cqw 1.4cqw 0 0; font:500 2cqw/1 var(--font); padding:0 2cqw; }
.traffic-lights { color:#ed746b; letter-spacing:.3cqw; }
.product-device .typing-area { height:auto; min-height:0; padding:5cqw 4cqw; border:0; color:#242426; font:500 3.4cqw/1.6 var(--font); overflow-wrap:anywhere; }
.product-device .demo-pointer { position:absolute; width:2.6cqw; height:3.3cqw; left:72%; top:65%; fill:#101114; stroke:white; stroke-width:1; z-index:2; filter:drop-shadow(0 .4cqw .3cqw #0003); }
.demo-dock { position:absolute; bottom:2%; left:36%; width:28%; height:9%; display:flex; justify-content:center; align-items:center; gap:1.4cqw; border-radius:2cqw; background:#b0cdfdaa; }
.demo-dock img { height:5cqw; width:5cqw; object-fit:contain; }
.demo-deck { position:absolute; bottom:0; width:100%; aspect-ratio:626 / 445; container-type:inline-size; padding:0 7px 7px; background:#141519; border:5px solid #777a80; border-top:0; border-radius:0 0 30px 30px; box-shadow:inset 0 0 0 2px #e7e8e9,0 18px 22px -14px #0004; overflow:hidden; }
.deck-hinge { display:block; width:100%; height:4.7833cqw; object-fit:fill; }
.deck-toolbar { height:7.7728cqw; display:flex; align-items:center; padding-inline:1.7937cqw; gap:1.1958cqw; background:#d2d3d5; }
.product-device .keyboard-pills { display:flex; flex:1; gap:0; background:#c0c1c3; padding:0; height:4.4843cqw; border-radius:2.2422cqw; }
.product-device .keyboard-pills button { padding:0; flex:1; min-width:0; min-height:0; font:500 2.2422cqw/1 var(--font); border-radius:2.2422cqw; }
.product-device .keyboard-pills button[aria-pressed=true] { background:#fff; box-shadow:0 .2cqw .6cqw #0002; color:#111; }
.deck-icon,.deck-options summary { display:grid; place-items:center; height:6.577cqw; min-width:6.577cqw; padding:0; border:0; background:transparent; color:#333; cursor:pointer; font:400 3cqw/1 var(--font); }
.deck-icon img,.deck-options summary img { display:block; width:6.577cqw; height:6.577cqw; }
.deck-options { position:relative; }
.deck-options summary { list-style:none; letter-spacing:-.1cqw; font-size:2cqw; }
.deck-options summary::-webkit-details-marker { display:none; }
.deck-options > div { position:absolute; right:0; top:100%; width:230px; background:#fff; border:1px solid #ddd; border-radius:14px; padding:12px; box-shadow:0 12px 36px #0002; z-index:4; }
.deck-options button,.deck-options a { display:block; width:100%; padding:12px 8px; text-align:left; color:#1d1d1f; font:400 1rem/1.4 var(--font); border:0; background:none; }
.native-deck { position:relative; aspect-ratio:669 / 391.5; container-type:inline-size; background:#d2d3d5; border-radius:0 0 20px 20px; overflow:hidden; }
.product-device .keyboard { position:absolute; inset:1.7937cqw 3.3632cqw auto; padding:0; display:flex; flex-direction:column; gap:.5979cqw; background:none; }
.product-device .key-row { display:flex; height:6.7265cqw; gap:.5979cqw; margin:0; width:auto; padding:0; }
.product-device .key-row-home { margin-inline:4.858cqw; }
.product-device .key-row:last-child { margin-inline:-.6726cqw; }
.product-device .key-letter { text-transform:uppercase; }
.product-device .key { flex:var(--key-weight) 1 0; height:100%; min-width:0; max-width:none; min-height:0; padding:0; border:.1495cqw solid #38383b; border-radius:1.4948cqw; background:#1c1c1e; color:#fff; box-shadow:0 .2989cqw 0 #000,inset 0 .1495cqw 0 #ffffff26; font:400 2.6906cqw/1 var(--font); }
.product-device .key-utility { background:#1c1c1e; font-size:2.3916cqw; }
.product-device .key-space { background:#1c1c1e; font-size:2.3916cqw; }
.product-device .key-return { font-size:3.5874cqw; }
.product-device .key-icon { font-size:3.5874cqw; }
.product-device .keyboard[data-layer=navigation] .key { background:#1c1c1e; font-size:2.3916cqw; }
.product-device .keyboard[data-layer=navigation] .key-arrow { background:#1c1c1e; font-size:3.5874cqw; }
.product-device .keyboard[data-layer=navigation] .key-function,.product-device .keyboard[data-layer=navigation] .key-icon { font-size:3.6741cqw; }
.product-device .key[aria-pressed=true] { color:white; background:#007aff; }
.product-device .key:active { background:#c7c7cc; }
.product-device .trackpad { position:absolute; left:0; right:0; top:55.1724%; bottom:0; width:100%; height:auto; min-height:0; margin:0; padding:0; background:transparent; border:0; border-radius:0; touch-action:none; }
.product-device .trackpad::before { content:''; position:absolute; inset:0 14.3498cqw 5.2317cqw; border:.1121cqw solid #a2a3a4; border-radius:3.5874cqw; background:#d4d5d7; }
.native-deck::after { content:''; position:absolute; bottom:1.1958cqw; left:50%; width:21.5247%; height:.7474cqw; transform:translateX(-50%); border-radius:.3737cqw; background:#1c1c1e; pointer-events:none; }
.product-device .trackpad.active::before { background:#c8c9cb; }
.product-device .trackpad-mark { display:none; }
.full-screen-section { background:#fff; }
.gallery-description { max-width:650px; }
.menu-bar-stage { position:relative; max-width:900px; margin:52px auto 44px; border-radius:24px; background:#c7d4e4; box-shadow:0 12px 40px #28334510; }
.companion-menu { position:relative; }
.companion-menu summary { display:grid; place-items:center; width:50px; height:42px; border-radius:9px; cursor:pointer; list-style:none; }
.companion-menu summary::-webkit-details-marker { display:none; }
.companion-menu[open] summary { background:#bdc9dba6; }
.companion-menu svg { width:30px; height:24px; }
.companion-popover { position:absolute; top:calc(100% + 12px); right:-72px; width:310px; max-height:320px; overflow:auto; padding:22px; background:#fafafaf5; border:1px solid #ffffff; border-radius:16px; box-shadow:0 16px 45px #23354c30; z-index:3; }
.companion-popover > strong { display:block; font-size:1.125rem; }
.companion-subtitle { display:block; font-size:.875rem; color:#696970; margin:4px 0 18px; }
.companion-menu-row { display:flex; justify-content:space-between; gap:16px; font-size:.875rem; padding:12px 0; border-top:1px solid #e4e4e7; }
.companion-popover a { display:block; padding:12px 0; font-size:.875rem; }
.setup-cards { counter-reset:setup; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:24px; }
.setup-cards li { padding:28px!important; border:0!important; border-radius:22px; background:#fff; counter-increment:setup; min-width:0; }
.setup-cards li::before { content:counter(setup,decimal-leading-zero); display:block; position:static!important; margin-bottom:24px; color:#72727a; font:500 1rem/1 var(--font); }
.setup-cards li strong { font-size:1.125rem; }
.setup-cards li p { font-size:1rem; line-height:1.6; margin-top:12px; }
.lid-options .lid-choice {}
.lid-comparison { margin-top:56px; }
.lid-comparison figcaption { max-width:780px; line-height:1.6; }
.lid-comparison figcaption strong { display:block; font-size:1.5rem; margin-bottom:8px; }
.price-card-bottom { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.download-step { min-width:0; }
.download-step > span { display:block;  margin-bottom:14px; color:#66666d; }
.button:disabled { cursor:default;}
.product-footer { padding-block:48px 28px; }
.footer-columns { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; margin:36px 0 40px; }
.footer-columns h3 { margin:0 0 18px; font-size:.875rem; }
.footer-columns > div { min-width:0; overflow-wrap:anywhere; }
.footer-columns a { display:block; margin:14px 0; color:#64646b; font-size:.875rem; line-height:1.5; }
.footer-identity { font-size:.875rem; color:#78787f; margin:0 0 22px; }
@media(max-width:1050px) { .experience-layout { grid-template-columns:1fr; gap:48px; } .experience-copy .section-description { max-width:580px; } .interactive-product { width:min(100%,626px); margin:auto; } .interaction-instruction { max-width:none; } }
@media(max-width:650px) { .experience-section { padding-block:64px; } .experience-layout { gap:36px; } .demo-upper { border-width:3px; padding:4px 4px 0; border-radius:20px 20px 0 0; } .demo-deck { border-width:3px; padding:0 4px 4px; border-radius:0 0 20px 20px; } .demo-desktop { border-radius:12px 12px 0 0; } .native-deck { border-radius:0 0 12px 12px; } .menu-bar-stage { margin-top:32px; } .companion-popover { right:-72px; width:min(300px,calc(100vw - 66px)); } .setup-cards { grid-template-columns:1fr; gap:14px; } .setup-cards li { padding:24px!important; } .setup-cards li::before { margin-bottom:16px; } .price-card-bottom { grid-template-columns:1fr; gap:24px; } .footer-columns { grid-template-columns:1fr 1fr; gap:20px; } .product-footer .footer-bottom { align-items:flex-start; } }
@media(prefers-reduced-motion:reduce) { .product-device .caret { animation:none; } }
/* Keep the palm photograph below the live opening and interaction. */
.palm-story { text-align:center; padding-bottom:0; }
.palm-copy { max-width:900px; padding-inline:24px; margin:auto; }
.palm-copy .section-heading { font-size:clamp(3.25rem,7vw,6.25rem); }
.palm-copy .section-description { max-width:480px; margin:24px auto 0; }
.palm-art { display:block; width:min(100%,900px); margin:24px auto 0; }
.palm-art picture, .palm-art img { display:block; width:100%; }
.palm-art img { height:auto; }

/* The actual portable device is rendered once; live UI is projected from its camera. */
.product-device.control-demo { overflow:clip; }
.viewer-controls[hidden]{ display:none !important; }.viewer-hint[hidden] { display:none !important;}
.lid-options .lid-choice > span:nth-child(2) {}
.hero .availability { margin:8px auto 20px; color:var(--secondary); font-size:13px; line-height:1.5; padding-inline:24px; }
.illustration-label { color:var(--secondary); font-size:12px; line-height:1.5; margin:14px 0 0; }
.keyboard-policy-note,.readiness-note { color:var(--secondary); font-size:15px; line-height:1.5; max-width:620px; }
.readiness-note { margin-top:24px; }
.readiness-note a { color:#06c; }
.product-device .keyboard[hidden],.product-device .keyboard-pills[hidden] { display:none; }
.product-device[data-keyboard=hidden] .trackpad { top:0; }
.product-device[data-keyboard=hidden] .deck-toolbar { justify-content:flex-end; }
.note-editor-trigger { display:block; margin:22px auto 0; font-size:16px; }
.note-dialog { border:0; border-radius:22px; width:min(420px,calc(100% - 40px)); padding:28px; color:var(--ink); box-shadow:0 18px 80px #0003; }
.note-dialog::backdrop { background:#0004; backdrop-filter:blur(8px); }
.note-dialog h2 { margin:0; font-size:28px; letter-spacing:-.6px; }
.note-dialog p { color:var(--secondary); font-size:14px; line-height:1.5; margin:12px 0 22px; }
.note-dialog label { display:block; margin-bottom:8px; }
.note-dialog input { width:100%; min-height:44px; border:1px solid #c9c9cf; border-radius:10px; font:16px var(--font); padding:10px 12px; color:var(--ink); background:#fff; }
.note-dialog .button { margin-top:20px; float:right;}
.availability-panel { border-top:1px solid #e2e2e7; padding-top:20px; margin-top:24px; }
.availability-panel p { font-size:14px; line-height:1.5; color:var(--secondary); margin:0 0 10px; }
@media(max-width:650px) {
  .hero .availability { font-size:11.05px; margin-bottom:17px; }
  .keyboard-policy-note,.readiness-note { font-size:13px; }
  .illustration-label { font-size:11px; }
}
.demo-model { position:absolute; inset:0; pointer-events:none; }
.demo-model img { position:absolute; display:block; filter:drop-shadow(0 12px 12px #11182718); }
.demo-fold-backing { position:absolute; inset:0; display:block; width:100%; height:100%; }
.product-device.model-ready .demo-upper,
.product-device.model-ready .demo-deck { top:0; left:0; bottom:auto; width:626px; height:445px; aspect-ratio:auto; container-type:inline-size; transform-origin:0 0; border:0; padding:0; box-shadow:none; background:#d2d3d5; }
.product-device.model-ready .demo-upper { border-radius:20px 20px 0 0; overflow:hidden; }
.product-device.model-ready .demo-deck { border-radius:0 0 20px 20px; }
.product-device.model-ready .demo-desktop { border-radius:20px 20px 0 0; }
.product-device.model-ready .native-deck { border-radius:0 0 20px 20px; }
.product-device .keyboard-pills { margin:0; }
.product-device .key-row-home { padding:0; }
.product-device .keyboard[data-layer=navigation] .key-row:nth-child(2) { padding:0; }
.product-device .typing-area { margin:0; background:transparent; border-radius:0; }
.product-device:not(.model-ready) .demo-model,
.product-device:not(.model-ready) .demo-upper,
.product-device:not(.model-ready) .demo-deck { visibility:hidden; }
.product-device[data-model=fallback] .demo-upper,
.product-device[data-model=fallback] .demo-deck { visibility:visible; }
.product-device[data-model=fallback] .demo-upper { transform:none; height:39%; aspect-ratio:auto; }
.gallery-controls { justify-content:flex-end; }
.lid-options .lid-choice {}
.lid-options .lid-choice[aria-pressed=true] {}
.lid-options .lid-choice strong {}
.lid-options .lid-choice small {}
.lid-options .swatch { width:28px; height:28px; margin:0; }
.lid-options .choice-tick {}
.palm-story { padding-bottom:76px; }
.palm-art { width:min(1160px,calc(100% - 80px)); margin-top:44px; }
.palm-art img { border-radius:28px; }
.setup-label { margin:0 0 28px; color:#1d1d1f; font-size:1.25rem; font-weight:600; }
.setup-cards { gap:0; margin:0; }
.setup-cards li { padding:0 32px!important; border-radius:0; background:none; }
.setup-cards li:first-child { padding-left:0!important; }
.setup-cards li:last-child { padding-right:0!important; }
.setup-cards li+li { border-left:1px solid #d2d2d7!important; }
.setup-cards li::before { display:grid; place-items:center; width:30px; height:30px; margin:0 0 14px; border:1px solid #b8b8bf; border-radius:50%; content:counter(setup); color:#1d1d1f; font-size:.875rem; }
.setup-cards li strong { display:block; font-size:1.125rem; line-height:1.25; }
.setup-cards li p { margin:8px 0 0; line-height:1.45; }
.price-card-bottom { gap:28px; align-items:start; padding-top:28px; }
.download-step > span { color:#1d1d1f; font-weight:600; margin-bottom:15px; }
.app-store-download { display:inline-flex; padding:0; margin:0; border:0; border-radius:9px; background:none; line-height:0; }
.app-store-download img { display:block; width:180px; height:60px; }
.app-store-download:disabled { cursor:default; }
.download-step > small { display:block; color:#6e6e73; font-size:.75rem; line-height:1.4; margin-top:15px; }
.reactions-section { background:#f5f5f7; overflow:hidden; padding:92px 0 80px; }
.reactions-section .section-heading { max-width:760px; }
.reactions-label { font-size:.875rem; color:#6e6e73; margin:20px 0 36px; }
.reaction-track { display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding:0 max(24px,calc((100vw - 1060px) / 2)) 18px; scroll-padding-inline:max(24px,calc((100vw - 1060px) / 2)); scrollbar-width:thin; scrollbar-color:#d2d2d7 transparent; }
.reaction-card { flex:0 0 360px; min-width:0; min-height:356px; display:flex; flex-direction:column; padding:30px; border-radius:24px; background:#edf0e9; color:#263c32; margin:0; scroll-snap-align:start; }
.reaction-card:nth-child(3n+2) { background:#edf2fa; color:#244c7e; }
.reaction-card:nth-child(3n) { background:#fff; color:#1d1d1f; }
.reaction-card .reaction-kicker { font-size:.875rem; font-weight:500; line-height:1.4; margin:0 0 30px; color:#51585a; }
.reaction-card blockquote { font-size:1.875rem; font-weight:500; line-height:1.15; letter-spacing:-.025em; margin:0 0 34px; }
.reaction-card figcaption { font-size:.75rem; line-height:1.45; margin:auto 0 0; color:#51585a; }
.reaction-link { display:inline-flex; margin:0; }
.reaction-controls { align-items:center; gap:24px; }
@media (hover:hover) and (pointer:fine) {
 .scenario-track,.reaction-track { cursor:grab; user-select:none; }
}
.feature-grid.is-dragging,.scenario-track.is-dragging,.reaction-track.is-dragging { cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; user-select:none; }
@media(max-width:650px) {
 .product-device.control-demo { aspect-ratio:626 / 750; }
 .palm-story { padding-bottom:48px; }
 .palm-art { width:calc(100% - 32px); margin-top:32px; }
 .palm-art img { border-radius:20px; }
 .setup-cards { gap:24px; }
 .setup-cards li,.setup-cards li:first-child,.setup-cards li:last-child { position:relative; padding:0 0 0 46px!important; border:0!important; }
 .setup-cards li::before { position:absolute!important; left:0; top:0; }
 .price-card-bottom { gap:28px; }
 .reactions-section { padding:64px 0 56px; }
 .reaction-card { flex-basis:min(330px,calc(100vw - 64px)); padding:26px; }
 .reaction-card blockquote { font-size:1.625rem; }
}

/* Background exported from the editable Apple desktop template in Figma. */
.menu-bar-stage { max-width:1040px; container-type:inline-size; aspect-ratio:2; overflow:visible; background:#c7d8cf; }
.companion-desktop-template { display:block; width:100%; height:100%; border-radius:24px; object-fit:cover; }
.menu-bar-stage .companion-menu { position:absolute; left:65%; top:.6%; width:4%; }
.menu-bar-stage .companion-menu summary { width:100%; height:3.7cqw; border-radius:.65cqw; color:#fff; }
.menu-bar-stage .companion-menu svg { width:3.07cqw; height:2.3cqw; }
.menu-bar-stage .companion-menu[open] summary { background:#20383218; }
.menu-bar-stage .companion-popover { top:calc(100% + 8px); right:-90px; width:330px; padding:22px; border:1px solid #ffffffb3; backdrop-filter:blur(24px); background:#fcfcfcef; }
@media(max-width:650px) {
 .menu-bar-stage { aspect-ratio:1.06; overflow:hidden; }
 .companion-desktop-template { width:190%; max-width:none; object-fit:fill; transform:translateX(-42%); border-radius:20px; }
 .menu-bar-stage .companion-menu { left:auto; right:44%; width:7.5%; top:1%; }
 .menu-bar-stage .companion-menu summary { height:7cqw; min-height:28px; border-radius:6px; }
 .menu-bar-stage .companion-menu svg { width:5.8cqw; height:4.4cqw; }
 .menu-bar-stage .companion-popover { top:calc(100% + 8px); right:calc(-44cqw + 10px); width:calc(100cqw - 20px); max-width:330px; padding:18px; border-radius:14px; }
 .companion-popover > strong { font-size:1rem; }
 .companion-menu-row { gap:8px; padding:10px 0; font-size:.8125rem; }
 .companion-popover a { font-size:.8125rem; padding:10px 0; }
}