/* SPDX-License-Identifier: GPL-3.0-or-later */
/* The opening story: clear value, readable controls, a real working preview. */
.hero {
  grid-template-columns: .88fr 1.12fr;
  gap: 48px;
  padding: 54px 0 58px;
  align-items: center;
}
.hero-copy { max-width: 520px; padding: 0 0 36px; }
.hero-copy .eyebrow { font-size: 9px; letter-spacing: .095em; line-height: 1.6; }
.hero h1 { font-size: clamp(44px,4.7vw,65px); line-height: 1.09; letter-spacing: -.06em; margin: 22px 0 25px; }
.hero h1 em { color: #39765c; }
.hero-description { font-size: 17px; line-height: 1.85; max-width: 390px; color: #52665c; }
.hero-actions { gap: 20px; margin-top: 32px; }
.hero-actions .button { padding: 17px 24px; font-size: 14px; background: #234d39; box-shadow: 0 4px 10px #234d3912; }
.hero-actions .quiet-link { font-size: 12px; }
.compatibility { margin-top: 26px; font-size: 11px; color: #51665b; }
.compatibility>span { font-size: 10px; color: #75837b; }
.preview-topline { align-items: center; gap: 15px; font-size: 8px; line-height: 1.5; letter-spacing: .09em; color: #566e60; margin-bottom: 13px; }
.hero-preview-label { display: flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: 0; white-space: nowrap; }
.hero-preview-label i { width: 5px; height: 5px; border-radius: 50%; background: #4e8867; }
.notch-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; margin: 0 0 14px; padding: 5px; border: 1px solid #dce5de; background: #eef3ef; border-radius: 13px; }
.notch-tabs button,.notch-tabs button:last-child { width: 100%; min-height: 42px; padding: 10px 8px; margin: 0; border-radius: 9px; text-align: center; font-size: 12px; color: #597060; }
.notch-tabs button>span { font-size: 9px; color: #7c9383; }
.notch-tabs button[aria-selected=true] { background: #fff; color: #254c36; box-shadow: 0 2px 5px #203d2412; }
.notch-tabs button:hover { background: #e0eae2; }
.desktop-stage { height: auto; min-height: 420px; border: 6px solid #263d33; border-bottom-width: 9px; border-radius: 24px; padding-bottom: 28px; box-shadow: 0 24px 42px -30px #1f472e80; }
.desktop-stage:before { background: radial-gradient(ellipse at 100% 120%,#bccbaa,transparent 68%),radial-gradient(ellipse at 5% 10%,#75967f,transparent 62%),linear-gradient(125deg,#426556,#244a3b); }
.desktop-menubar { position: absolute; inset: 0 0 auto; font-size: 8px; color: #f1f7ed; padding: 11px 12px; }
.notch-demo { position: relative; left: auto; top: auto; transform: none; margin: 0 auto; width: calc(100% - 76px); max-width: 470px; min-height: 0; padding: 35px 20px 17px; border-radius: 0 0 24px 24px; background: #141a16; box-shadow: 0 18px 28px -15px #102a2090; }
.notch-native-heading { margin-bottom: 15px; }
.notch-native-heading>strong { font-size: 14px; }
.native-sample { font-size: 8px; color: #9eaaa2; }
.shelf-file { padding: 17px 8px; background: #202822; border-color: #cad6c320; }
.shelf-file strong { font-size: 11px; }
.shelf-file small { font-size: 9px; color: #a0ada4; }
.shelf-foot { font-size: 10px; color: #a5b4aa; margin-top: 17px; }
.notch-dock { margin-top: 14px; }
.notch-dock button { color: #a5b9aa; }
.notch-dock button[aria-current=page] { background: #99c3a820; }
.desktop-outcome { position: static; display: flex; align-items: center; gap: 12px; padding: 19px 0 0; min-height: 69px; }
.desktop-outcome .outcome-number { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid #cddbd0; border-radius: 50%; color: #60816b; font-size: 10px; flex-shrink: 0; }
.desktop-outcome p { color: #365541; font-size: 19px; font-weight: 500; line-height: 1.35; letter-spacing: -.035em; }
.desktop-outcome p br { display: none; }
.desktop-outcome p br:after { content: ' '; }
.demo-actionbar { margin: 14px 0 0; gap: 12px; border-top: 1px solid #dbe4de; padding-top: 14px; }
.demo-actionbar>button { min-height: 42px; padding: 10px 16px; font-size: 12px; color: #2b5940; border-color: #c8d9ce; }
.demo-actionbar>p { font-size: 10px; color: #678071; }
.demo-disclosure { font-size: 10px; color: #748578; line-height: 1.6; text-align: left; margin-top: 12px; }
.proof-strip { margin-top: 0; padding-block: 22px; }
@media(max-width:1050px) {
  .hero { gap: 30px; padding-top: 43px; }
  .hero h1 { font-size: 49px; }
  .hero-description { font-size: 16px; }
  .hero-actions { gap: 15px; }
  .hero-actions .button { padding: 15px 19px; font-size: 13px; }
  .preview-topline>span:first-child { max-width: 175px; }
  .notch-demo { width: calc(100% - 38px); padding-inline: 15px; }
}
@media(max-width:850px) {
  .hero { grid-template-columns: 1fr; gap: 32px; padding: 45px 0; }
  .hero-copy { margin: auto; padding: 0; text-align: center; max-width: 620px; }
  .hero-copy .eyebrow { justify-content: center; }
  .hero h1 { font-size: clamp(43px,7.5vw,64px); }
  .hero-description { max-width: 440px; margin-inline: auto; }
  .hero-actions { justify-content: center; margin-top: 25px; }
  .compatibility { margin-top: 20px; }
  .hero-product { max-width: 650px; margin-inline: auto; }
  .preview-topline>span:first-child { max-width: none; }
  .notch-demo { width: calc(100% - 76px); }
}
@media(max-width:600px) {
  .hero { padding-top: 36px; gap: 30px; }
  .hero-copy .eyebrow { font-size: 8px; letter-spacing: .07em; }
  .hero h1 { font-size: clamp(36px,9.8vw,54px); margin: 18px 0 20px; }
  .hero-description { font-size: 15px; line-height: 1.8; max-width: 340px; }
  .hero-actions { gap: 19px; }
  .hero-actions .button { font-size: 13px; padding: 15px 21px; }
  .hero-actions .quiet-link { font-size: 11px; }
  .compatibility { font-size: 10px; }
  .compatibility>span { font-size: 9px; }
  .preview-topline { font-size: 7px; gap: 8px; }
  .hero-preview-label { font-size: 9px; }
  .preview-topline>span:first-child { max-width: 170px; }
  .notch-tabs { gap: 3px; padding: 4px; margin-bottom: 12px; }
  .notch-tabs button,.notch-tabs button:last-child { padding: 8px 3px; font-size: 11px; min-height: 42px; }
  .notch-tabs button>span { display: none; }
  .desktop-stage { min-height: 0; padding-bottom: 25px; border-width: 4px; border-bottom-width: 7px; border-radius: 18px; }
  .desktop-menubar { display: none; }
  .notch-demo { width: calc(100% - 20px); padding: 32px 12px 13px; border-radius: 0 0 18px 18px; }
  .notch-native-heading { margin-bottom: 12px; }
  .notch-native-heading>strong { font-size: 13px; }
  .native-sample { font-size: 8px; }
  .shelf-file { padding: 15px 5px; }
  .shelf-file strong { font-size: 10px; }
  .shelf-file small { font-size: 9px; }
  .shelf-file>span { width: 34px; height: 43px; }
  .shelf-samples { min-height: 170px; gap: 6px; }
  .shelf-foot { font-size: 9px; }
  .notch-dock { margin-top: 12px; }
  .notch-dock button { width: 30px; flex-basis: 30px; }
  .explore-heading input { font-size: 11px; }
  .explore-destination strong { font-size: 10px; }
  .explore-grid { max-height: 280px; }
  .desktop-outcome { padding-top: 14px; min-height: 58px; gap: 9px; }
  .desktop-outcome p { font-size: 17px; }
  .demo-actionbar>p { font-size: 9px; max-width: 110px; }
  .demo-actionbar>button { font-size: 11px; padding: 9px 12px; gap: 10px; }
  .demo-disclosure { font-size: 9px; }
}

/* A floating glass navigation bar, with an opaque fallback for reduced transparency. */
.site-header {
  width: min(1240px,calc(100% - 48px));
  height: 78px;
  margin: 14px auto 0;
  padding: 0 24px;
  top: 14px;
  border: 1px solid rgba(197,216,203,.68);
  border-radius: 26px;
  background: rgba(250,253,251,.76);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95),0 8px 28px -17px rgba(29,64,43,.3);
}
.site-header nav { gap: 24px; }
.site-header .button { box-shadow: inset 0 1px 0 #ffffff15; }
@media(max-width:1050px) {
  .site-header { width:calc(100% - 32px); padding-inline:20px; }
  .site-header nav { gap:17px; }
}
@media(max-width:850px) {
  .site-header { padding-inline:17px; }
  .site-header nav { gap:13px; }
}
@media(max-width:600px) {
  .site-header { width:calc(100% - 20px); height:68px; top:8px; margin-top:8px; padding:0 12px; gap:9px; border-radius:22px; }
  .site-header .wordmark { font-size:21px; gap:6px; }
  .site-header .wordmark svg { width:24px; }
  .site-header>.button { font-size:10px; padding:11px 12px; gap:7px; }
  .landing-menu summary { padding:9px 10px; background:#ffffff3d; }
  .landing-menu nav { background:rgba(249,253,250,.97); box-shadow:0 15px 40px #1f40242b; }
}
@supports not (backdrop-filter:blur(1px)) { .site-header { background:#f7faf7; } }
@media(prefers-reduced-transparency:reduce) { .site-header { background:#f7faf7; backdrop-filter:none; -webkit-backdrop-filter:none; } }

/* The approved bird mark and existing Pip film belong to Notch only. */
.site-header .wordmark>.pip-brand {width:44px;height:44px;flex-basis:44px}
.hero-mascot-line {display:flex;align-items:center;gap:15px;margin-bottom:3px}
.hero-mascot-line .eyebrow {margin:0}
.hero-pip {width:70px;height:66px;flex:0 0 70px;position:relative}
.hero-pip video {width:70px;height:66px;object-fit:contain;mix-blend-mode:multiply;mask-image:radial-gradient(ellipse 66% 65% at center,#000 44%,transparent 76%)}



@media(prefers-reduced-motion:no-preference) {
 .site-header .pip-brand {animation:pip-mark-arrival .55s ease-out backwards}
 .home-intro:hover>img {animation:pip-small-hop .5s ease-out}
}
@keyframes pip-mark-arrival {0%{opacity:0;transform:translateY(5px) rotate(-8deg)}100%{opacity:1;transform:none}}
@keyframes pip-small-hop {0%,100%{transform:translateY(0)}45%{transform:translateY(-4px) rotate(-3deg)}}
@media(max-width:850px) {.hero-mascot-line{justify-content:center}}
@media(max-width:600px) {
 .site-header .wordmark>.pip-brand{width:34px;height:34px;flex-basis:34px}
 .hero-mascot-line{gap:12px}.hero-pip{width:59px;height:55px;flex-basis:59px}.hero-pip video{width:59px;height:55px}
}

.app-window .app-identity>img {display:block;width:36px;height:36px;flex:0 0 36px;object-fit:contain}

/* Match the native 4.0 island: graphite shell, sage state and rounded controls. */
.notch-demo {
  background:radial-gradient(circle at 88% 12%,#b2eabb0d,transparent 32%),linear-gradient(155deg,#111713,#080b09 72%);
  border:1px solid #ffffff12;
  border-top:0;
  border-radius:0 0 28px 28px;
  box-shadow:0 22px 38px -19px #06140dc7,0 1px 0 #ffffff0a inset;
}
.notch-camera {background:#020403;border-radius:0 0 12px 12px}
.notch-native-heading>strong {font-weight:650;letter-spacing:-.015em}
.notch-brand {border-radius:9px}
.demo-panel {border-radius:17px}
.shelf-empty {border-color:#b2eabb2b;border-radius:18px;background:#ffffff03}
.shelf-file {border-radius:14px;background:#171d19;border-color:#ffffff12;box-shadow:0 5px 14px -12px #000}
.capture-modes,.focus-modes {padding:5px;border:1px solid #ffffff0a;border-radius:11px;background:#0c100d}
.capture-modes span,.focus-modes span {border-radius:8px}
.capture-modes .current,.focus-modes .current {background:#b2eabb;color:#101712}
.capture-document {border-radius:12px;background:#1b211d}
.focus-ruler:after {background:#b2eabb}
.explore-grid {gap:9px}
.explore-tile {border-radius:14px;background:#111612;border-color:#ffffff12}
.explore-tile:hover {border-color:#b2eabb60;background:#171e19}
.explore-destination {border-radius:14px}
.notch-dock {height:43px;gap:7px;margin-top:13px;padding-top:7px;border-top-color:#ffffff17}
.notch-dock-scroll {gap:5px}
.notch-dock button {width:34px;height:34px;flex-basis:34px;border:1px solid #ffffff08;border-radius:11px;background:#ffffff04;color:#a9b6ad}
.notch-dock button:hover {background:#ffffff0a;border-color:#ffffff12;color:#e5eee7}
.notch-dock button[aria-current=page] {background:#b2eabb;color:#101712;border-color:#d8f5dd66;box-shadow:0 5px 12px -8px #b2eabb}
.notch-dock button[aria-current=page]:after {display:none}
.notch-dock button:focus-visible {outline-color:#b2eabb;outline-offset:2px}
@media(max-width:600px) {
  .notch-demo {border-radius:0 0 21px 21px}
  .notch-dock {height:41px;gap:5px}
  .notch-dock button {width:32px;height:32px;flex-basis:32px;border-radius:10px}
}