/* Native Flutter captures inside a locally served Pro-style hardware asset. */
body.app-showcase-page { background:#fafafb; --app-accent:#ff4b2b; --app-ink:#17181a; --app-sub:#626873; --app-line:#e8e9ed }
body.app-showcase-page main { overflow:clip }
body.app-showcase-page :is(.app-intro,.app-feature-section,.app-personal-section,.app-closing) { scroll-margin-top:104px }
body.app-showcase-page button { cursor:pointer }
body.app-showcase-page :is(button,a,input) { -webkit-tap-highlight-color:transparent }
body.app-showcase-page svg { width:22px; height:22px; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; fill:none; flex-shrink:0 }
body.app-showcase-page .app-eyebrow { display:block; font-size:12px; line-height:1.6; font-weight:650; letter-spacing:.1em; color:var(--app-sub) }
body.app-showcase-page .app-intro { display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:52px; align-items:center; padding:52px 0 60px }
body.app-showcase-page .app-intro-copy { padding-bottom:20px; min-width:0 }
body.app-showcase-page .app-intro h1 { font-size:clamp(36px,4vw,58px); font-weight:650; line-height:1.3; letter-spacing:-.045em; margin:24px 0 }
body.app-showcase-page .app-intro h1>span { color:var(--app-accent) }
body.app-showcase-page .app-intro-lead { color:var(--app-sub); font-size:17px; line-height:1.9; margin:0; letter-spacing:0 }
body.app-showcase-page .app-value-tags { display:flex; flex-wrap:wrap; gap:8px 20px; padding:0; margin:24px 0 34px; list-style:none; color:var(--app-sub); font-size:13px }
body.app-showcase-page .app-value-tags li+li { position:relative }
body.app-showcase-page .app-value-tags li+li::before { content:''; width:3px; height:3px; border-radius:50%; background:#b4b8c0; position:absolute; left:-11px; top:50% }
body.app-showcase-page .app-store-links { display:flex; flex-wrap:wrap; gap:12px }
body.app-showcase-page .app-store-link { flex:1 1 175px; max-width:220px; min-height:66px; display:flex; align-items:center; gap:12px; padding:12px 16px; border:1px solid #e0e2e7; border-radius:15px; background:#fff; color:var(--app-ink); box-shadow:0 4px 10px #17203404; transition:transform .2s,box-shadow .2s }
body.app-showcase-page .app-store-link.app-store-ios { color:#fff; background:#17181a; border-color:#17181a }
body.app-showcase-page .app-store-link>span:nth-child(2) { flex:1 }
body.app-showcase-page .app-store-link b { display:block; font-size:16px; font-weight:600 }
body.app-showcase-page .app-store-link small { display:block; font-size:12px; opacity:.7; margin-bottom:2px }
body.app-showcase-page .app-os-mark { font-size:20px; font-weight:600; letter-spacing:-.04em }
body.app-showcase-page .app-store-link[aria-disabled="true"] { opacity:.55; cursor:not-allowed; box-shadow:none }
body.app-showcase-page .app-download-status { min-height:38px; max-width:430px; margin:12px 0 16px; color:var(--app-sub); font-size:12px; line-height:1.6 }
body.app-showcase-page .app-tour-link { display:inline-flex; align-items:center; gap:22px; padding:10px 0; font-size:14px; color:var(--app-ink); border-bottom:1px solid #dce0e6 }
body.app-showcase-page .app-tour-link span { color:var(--app-accent) }

body.app-showcase-page .app-showroom {
  --demo-bg:#fafafb; --demo-paper:#fff; --demo-group:#f5f5f7; --demo-text:#17181a;
  --demo-sub:#5f6368; --demo-line:#ecedef; --demo-glow:#ffffffb3;
  min-width:0; position:relative;
}
body.app-showcase-page .app-showroom[data-demo-theme="dark"] {
  --demo-bg:#0b0d0e; --demo-paper:#151719; --demo-group:#1a1c1f;
  --demo-text:#f7f7f8; --demo-sub:#bcc0c5; --demo-line:#ffffff21; --demo-glow:#ffffff08;
}
body.app-showcase-page .showroom-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; position:relative; z-index:3; padding:0 4px }
body.app-showcase-page .showroom-label { font-size:12px; color:#737985; letter-spacing:.17em; font-weight:600 }
body.app-showcase-page .app-theme-switch { display:flex; gap:4px; padding:4px; border:1px solid #edeff2; border-radius:30px; background:#f6f7f9 }
body.app-showcase-page .app-theme-switch button { display:flex; align-items:center; justify-content:center; gap:7px; min-height:38px; padding:7px 15px; border:1px solid transparent; border-radius:24px; background:transparent; font-size:13px; color:var(--app-sub) }
body.app-showcase-page .app-theme-switch svg { width:17px; height:17px }
body.app-showcase-page .app-stage { position:relative; height:744px; perspective:1400px; isolation:isolate; touch-action:pan-y }
body.app-showcase-page .app-stage::before { content:''; position:absolute; inset:12% -5% 4%; background:radial-gradient(ellipse at 55% 60%,#e6e8ec9c,transparent 65%),radial-gradient(ellipse at 80% 20%,#ff4b2b08,transparent 45%); pointer-events:none; z-index:-1 }
body.app-showcase-page .app-stage-rig { --tilt-x:2deg; --tilt-y:-6deg; width:100%; height:100%; position:relative; transform-style:preserve-3d; transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transition:transform .45s cubic-bezier(.2,.7,.25,1) }
body.app-showcase-page .app-stage-rig.is-tracking { transition:transform .16s ease-out }
body.app-showcase-page .app-device { position:absolute; width:344px; max-width:calc(100% - 12px); aspect-ratio:866 / 1817; left:50%; top:8px; transform:translateX(-44%) translateZ(28px); filter:drop-shadow(0 26px 22px #17203424) drop-shadow(0 4px 4px #17203412) }
body.app-showcase-page :is(.app-device-frame,.app-device-camera) { position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; pointer-events:none; user-select:none }
body.app-showcase-page .app-device-frame { z-index:0 }
/* Screen and optical cutout coordinates map to the original 866 x 1817 asset. */
body.app-showcase-page .app-demo-surface { position:absolute; left:8.31%; top:4.13%; width:83.38%; height:91.64%; box-sizing:border-box; border-radius:15.3% / 6.7%; overflow:hidden; padding:0; display:block; background:var(--demo-bg); color:var(--demo-text); z-index:1; transition:background .28s,color .28s }
body.app-showcase-page .app-device-camera { z-index:2; clip-path:inset(5.34% 37.42% 91.08% 37.88% round 999px) }
body.app-showcase-page .app-device-status { position:absolute; z-index:2; inset:0 7.5% auto; height:6.65%; display:flex; justify-content:space-between; align-items:center; padding:0; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; user-select:none; pointer-events:none }
body.app-showcase-page .app-device-status>div { display:flex; align-items:center; gap:3px }
body.app-showcase-page .app-device-status svg { width:15px; height:14px; stroke-width:1.8 }
body.app-showcase-page .app-device-status svg:last-child { width:22px }
body.app-showcase-page .app-device-gesture { position:absolute; z-index:2; inset:auto 0 0; height:3.77%; display:grid; place-items:center; pointer-events:none }
body.app-showcase-page .app-device-gesture>span { height:4px; width:32%; border-radius:4px; background:var(--demo-text); opacity:.85 }
/* Capture is 390 x 902 logical pixels, including App safe areas and native navigation. */
body.app-showcase-page .app-native-screen { display:block; width:100%; height:100%; max-width:none; object-fit:contain; user-select:none; pointer-events:none }
body.app-showcase-page .app-scene-nav { position:absolute; z-index:3; left:4.1%; width:91.8%; top:88.6%; height:7.55%; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
body.site-shell.app-showcase-page .app-showroom .app-screen-hotspot { appearance:none; min-width:0; min-height:0; padding:0; margin:0; border:0!important; border-radius:12px; background:transparent!important; box-shadow:none!important; color:transparent!important }
body.site-shell.app-showcase-page .app-screen-hotspot:focus-visible { outline:2px solid var(--app-accent); outline-offset:-3px }
body.app-showcase-page .app-native-back { position:absolute; z-index:3; left:2.5%; top:6.65%; width:13%; height:5.8% }
body.app-showcase-page .app-screen-feedback { position:absolute; z-index:4; inset:9% 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; background:var(--demo-bg); color:var(--demo-sub); font-size:13px }
body.app-showcase-page .app-screen-feedback button { border:1px solid var(--demo-line); border-radius:10px; background:var(--demo-paper); color:var(--demo-text); min-height:44px; padding:8px 16px }
body.app-showcase-page .app-showroom [hidden] { display:none!important }
body.app-showcase-page .app-screen-caption { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 14px; font-size:12px; line-height:1.6; color:var(--app-sub) }
body.app-showcase-page .app-screen-caption strong { color:var(--app-ink); font-weight:550 }
body.app-showcase-page .app-native-models { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:5px; margin-top:12px; font-size:12px }
body.app-showcase-page .app-native-models>span { margin-right:4px; color:var(--app-sub) }
body.app-showcase-page .app-native-models button { border:1px solid var(--app-line); border-radius:10px; background:#fff; color:var(--app-sub); min-height:40px; padding:6px 10px; font-size:12px }
body.site-shell.app-showcase-page .app-native-models button[aria-pressed="true"] { background:#fff!important; color:var(--app-accent)!important; border-color:var(--app-accent)!important; box-shadow:none!important }
body.app-showcase-page .app-depth-card { position:absolute; width:176px; padding:19px; border:1px solid #ffffff80; border-radius:20px; color:#fff; background:linear-gradient(135deg,#24272d,#111317); box-shadow:0 20px 38px -22px #17203470; pointer-events:none }
body.app-showcase-page .app-depth-model { left:-12px; top:142px; transform:translateZ(-65px) rotateZ(-7deg); border-color:#ffffff20 }
body.app-showcase-page .app-depth-kicker { display:block; font-size:12px; line-height:1.6; letter-spacing:.08em; opacity:.55; margin-bottom:10px }
body.app-showcase-page .app-depth-card>strong { display:block; font-size:20px; line-height:1.5; letter-spacing:-.03em }
body.app-showcase-page .app-depth-icons { display:flex; gap:5px; margin:18px 0; padding:8px; background:#ffffffeb; border-radius:12px }
body.app-showcase-page .app-depth-icons img { width:33px; height:33px; object-fit:contain }
body.app-showcase-page .app-depth-card>span:last-child { display:block; font-size:12px; opacity:.65; line-height:1.6 }
body.app-showcase-page .showroom-footer { display:flex; justify-content:center; align-items:center; gap:18px; padding:16px 0 0; position:relative; z-index:2 }
body.app-showcase-page .showroom-footer>label { display:flex; align-items:center; gap:12px; font-size:12px; color:var(--app-sub) }
body.app-showcase-page .showroom-footer input { width:120px; height:44px; accent-color:var(--app-accent); cursor:ew-resize }
body.app-showcase-page .showroom-footer>button { border:1px solid var(--app-line); border-radius:11px; min-height:44px; background:#fff; padding:7px 12px; font-size:12px; box-shadow:0 2px 6px #17203405 }
body.app-showcase-page .showroom-footer :disabled { opacity:.5; cursor:default }
body.app-showcase-page .app-demo-disclaimer { text-align:center; color:#747b86; font-size:12px; line-height:1.6; margin:10px 0 0 }

body.app-showcase-page .app-feature-section { padding:46px 0 24px; border-top:1px solid var(--app-line) }
body.app-showcase-page .app-section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:32px }
body.app-showcase-page .app-section-heading h2 { font-size:clamp(27px,2.7vw,38px); letter-spacing:-.04em; font-weight:600; margin:12px 0 0 }
body.app-showcase-page .app-section-heading p { font-size:15px; color:var(--app-sub); margin:0 0 5px; line-height:1.8 }
body.app-showcase-page .app-feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px }
body.app-showcase-page .app-feature-card { min-width:0; border:1px solid var(--app-line); border-radius:26px; padding:32px; background:#fff; box-shadow:0 8px 28px -18px #17203416; display:flex; flex-direction:column }
body.app-showcase-page .app-feature-card>header { display:flex; align-items:center; justify-content:space-between; margin-bottom:26px }
body.app-showcase-page .app-feature-number { font-size:12px; font-weight:550; letter-spacing:.05em; color:var(--app-sub) }
body.app-showcase-page .app-feature-card>header svg { color:var(--app-accent) }
body.app-showcase-page .app-feature-card h3 { font-size:26px; font-weight:600; line-height:1.4; letter-spacing:-.04em; margin:0 0 12px }
body.app-showcase-page .app-feature-card>p { max-width:420px; font-size:15px; line-height:1.9; color:var(--app-sub); margin:0 }
body.app-showcase-page .app-feature-timeline { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:32px 0; margin-top:auto }
body.app-showcase-page .app-feature-timeline span { position:relative; display:flex; flex-direction:column; gap:14px; font-size:13px; color:var(--app-sub); padding-top:12px; border-top:1px solid #e1e3e8 }
body.app-showcase-page .app-feature-timeline i { position:absolute; left:0; top:-3px; width:6px; height:6px; border-radius:50%; background:var(--app-accent) }
body.app-showcase-page .app-feature-models { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; padding:24px 0 }
body.app-showcase-page .app-feature-models span { display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; font-size:12px; color:var(--app-sub); line-height:1.5 }
body.app-showcase-page .app-feature-models img { object-fit:contain; border:1px solid #f0f1f4; background:#fff; border-radius:12px; padding:4px; box-sizing:content-box }
body.app-showcase-page .app-feature-cta { display:flex; justify-content:space-between; align-items:center; gap:15px; min-height:44px; padding:12px 0 0; background:none; border:0; border-top:1px solid var(--app-line); text-align:left; color:var(--app-ink); font-size:14px; margin-top:auto }
body.app-showcase-page .app-feature-cta>span { color:var(--app-accent); font-size:20px }
body.app-showcase-page .app-personal-section { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:24px; margin-top:0 }
body.app-showcase-page .app-appearance-story { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); align-items:center; gap:26px; padding:32px; border:1px solid var(--app-line); border-radius:26px; background:#fff }
body.app-showcase-page .app-personal-section h2 { font-size:29px; line-height:1.35; font-weight:600; letter-spacing:-.04em; margin:14px 0 }
body.app-showcase-page .app-personal-section p { color:var(--app-sub); font-size:14px; line-height:1.9; margin:0 0 26px }
body.app-showcase-page .app-theme-study { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
body.app-showcase-page .app-theme-sample { border:1px solid #e8e9ed; background:#fafafb; padding:18px 14px; border-radius:18px; box-shadow:0 8px 18px -12px #17203420 }
body.app-showcase-page .app-theme-sample>span { font-size:12px; letter-spacing:.04em; white-space:nowrap }
body.app-showcase-page .app-theme-sample>b { display:block; margin:36px 0 10px; font-size:46px; font-weight:550; letter-spacing:-.06em }
body.app-showcase-page .app-theme-sample>p { font-size:12px; margin:0 0 22px; white-space:nowrap; color:inherit; opacity:.65 }
body.app-showcase-page .app-theme-sample>div { display:flex; gap:4px }
body.app-showcase-page .app-theme-sample i { width:20px; height:4px; border-radius:3px; background:#e5e6ea }
body.app-showcase-page .app-theme-sample i:first-child { background:var(--app-accent) }
body.app-showcase-page .app-theme-sample.dark { color:#f7f7f8; background:linear-gradient(155deg,#25282d,#0b0d0e); border-color:#202328; margin-top:24px; margin-bottom:-24px }
body.app-showcase-page .app-theme-sample.dark i:not(:first-child) { background:#45494f }
body.app-showcase-page .app-personal-story { padding:32px; display:flex; flex-direction:column; border-radius:26px; border:1px solid var(--app-line); background:linear-gradient(145deg,#fff,#f7f8fa) }
body.app-showcase-page .app-personal-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:26px }
body.app-showcase-page .app-personal-chips>span { padding:6px 9px; border:1px solid var(--app-line); border-radius:9px; background:#fff; font-size:12px; color:var(--app-sub) }
body.app-showcase-page .app-managed-campaign { display:flex; align-items:center; justify-content:space-between; gap:30px; background:#fff; padding:24px 28px; border:1px solid var(--app-line); border-radius:20px; margin-top:30px }
body.app-showcase-page .app-managed-campaign h2 { font-size:24px; margin:6px 0 }
body.app-showcase-page .app-managed-campaign p { font-size:14px; color:var(--app-sub) }
body.app-showcase-page .app-managed-campaign img { width:40%; height:130px; object-fit:contain; border-radius:10px }
body.app-showcase-page .app-closing { display:flex; align-items:center; gap:24px; padding:56px 0 28px; margin-top:48px; border-top:1px solid var(--app-line) }
body.app-showcase-page .app-closing img { border-radius:18px; box-shadow:0 8px 24px #1720340a }
body.app-showcase-page .app-closing h2 { font-size:28px; font-weight:600; letter-spacing:-.035em; margin:0 0 8px }
body.app-showcase-page .app-closing p { font-size:14px; color:var(--app-sub); margin:0 }
body.app-showcase-page .app-closing>a { margin-left:auto; min-height:48px }
body.app-showcase-page .app-research-note { font-size:12px; color:var(--app-sub); line-height:1.8; margin-bottom:50px }
body.app-showcase-page .app-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0 }
/* Additional demo scenes share the exact same theme tokens and frame. */
@media(hover:hover) and (pointer:fine) {
  body.app-showcase-page .app-store-link:not([aria-disabled="true"]):hover { transform:translateY(-3px); box-shadow:0 10px 24px -10px #17203438 }
  body.app-showcase-page .app-feature-cta:hover { color:var(--app-accent) }
  body.app-showcase-page .app-feature-card { transition:box-shadow .25s,border-color .25s }
  body.app-showcase-page .app-feature-card:hover { border-color:#dce0e6; box-shadow:0 14px 32px -20px #17203430 }
}
@media(max-width:1100px) {
  body.app-showcase-page .app-intro { gap:28px; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr) }
  body.app-showcase-page .app-depth-model { left:-8px; width:140px; padding:14px }
  body.app-showcase-page .app-device { width:326px; transform:translateX(-47%) translateZ(20px) }
  body.app-showcase-page .app-stage { height:710px }
  body.app-showcase-page .app-depth-icons img { width:25px; height:25px }
  body.app-showcase-page .app-appearance-story { padding:26px; gap:16px }
  body.app-showcase-page .app-personal-section { grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) }
}
@media(max-width:900px) {
  body.app-showcase-page .app-intro { grid-template-columns:minmax(0,1fr); gap:26px; padding-top:36px }
  body.app-showcase-page .app-intro-copy { text-align:center; padding:0 }
  body.app-showcase-page .app-intro h1 { font-size:44px; margin:16px 0 }
  body.app-showcase-page .app-intro-lead { font-size:16px }
  body.app-showcase-page .app-value-tags,body.app-showcase-page .app-store-links { justify-content:center }
  body.app-showcase-page .app-download-status { margin-inline:auto }
  body.app-showcase-page .app-showroom { width:min(620px,100%); margin:0 auto }
  body.app-showcase-page .app-device { width:344px }
  body.app-showcase-page .app-stage { height:744px }
  body.app-showcase-page .app-depth-model { left:12px; width:165px }
  body.app-showcase-page .app-feature-card { padding:26px }
  body.app-showcase-page .app-feature-card h3 { font-size:23px }
  body.app-showcase-page .app-personal-section { grid-template-columns:minmax(0,1fr) }
  body.app-showcase-page .app-theme-study { max-width:300px; justify-self:end; width:100% }
  body.app-showcase-page .app-personal-story { padding:28px }
}
@media(max-width:620px) {
  body.app-showcase-page .app-intro { padding-bottom:36px }
  body.app-showcase-page .app-intro h1 { font-size:36px; letter-spacing:-.04em }
  body.app-showcase-page .app-intro-lead { font-size:15px }
  body.app-showcase-page .app-value-tags { font-size:12px; margin-bottom:24px }
  body.app-showcase-page .app-store-links { gap:8px }
  body.app-showcase-page .app-store-link { flex-basis:140px; padding:12px; gap:9px }
  body.app-showcase-page .app-store-link b { font-size:14px }
  body.app-showcase-page .app-store-link small { font-size:12px }
  body.app-showcase-page .app-showroom { padding:0 }
  body.app-showcase-page .showroom-label { font-size:12px; letter-spacing:.1em }
  body.app-showcase-page .app-theme-switch button { min-height:38px; padding:6px 11px; gap:5px }
  body.app-showcase-page .app-depth-card { display:none }
  body.app-showcase-page .app-stage { height:700px; perspective:1800px }
  body.app-showcase-page .app-device { width:320px; max-width:100%; left:50%; transform:translateX(-50%); top:8px }
  body.app-showcase-page .app-section-heading { display:block; margin-bottom:24px }
  body.app-showcase-page .app-section-heading p { margin-top:10px; font-size:14px }
  body.app-showcase-page .app-feature-grid { grid-template-columns:minmax(0,1fr); gap:16px }
  body.app-showcase-page .app-personal-section { gap:16px }
  body.app-showcase-page .app-feature-card,body.app-showcase-page .app-personal-story { padding:24px; border-radius:20px }
  body.app-showcase-page .app-feature-card>p { font-size:14px }
  body.app-showcase-page .app-feature-card>header { margin-bottom:20px }
  body.app-showcase-page .app-appearance-story { padding:24px; grid-template-columns:minmax(0,1fr); gap:24px; border-radius:20px }
  body.app-showcase-page .app-appearance-story h2 br,body.app-showcase-page .app-personal-story h2 br { display:none }
  body.app-showcase-page .app-theme-study { max-width:none; padding-bottom:24px }
  body.app-showcase-page .app-theme-sample { padding:22px }
  body.app-showcase-page .app-personal-section h2 { font-size:26px }
  body.app-showcase-page .app-closing { flex-wrap:wrap; gap:14px; margin-top:32px; padding-top:30px }
  body.app-showcase-page .app-closing h2 { font-size:22px }
  body.app-showcase-page .app-closing img { width:48px; height:48px; border-radius:12px }
  body.app-showcase-page .app-closing>a { margin:12px 0 0; width:100% }
  body.app-showcase-page .app-closing p { font-size:12px }
  body.app-showcase-page .app-managed-campaign { padding:20px; gap:16px; flex-wrap:wrap }
  body.app-showcase-page .app-managed-campaign img { width:100%; height:130px }
}
@media(max-width:360px) {
  body.app-showcase-page .app-stage { height:650px }
  body.app-showcase-page .app-device { width:296px }
  body.app-showcase-page .app-store-links { flex-direction:column; align-items:stretch }
  body.app-showcase-page .app-store-link { flex-basis:auto; max-width:none }
  body.app-showcase-page .app-feature-models { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
}
@media(prefers-reduced-motion:reduce) {
  body.app-showcase-page .app-stage-rig { transform:none!important }
  body.app-showcase-page .app-stage-rig,body.app-showcase-page .app-demo-surface { transition:none!important }
}