/* Khinoa Mail Pro: deep space, matte black and silver. Apple-style type: the system's SF Pro or Segoe UI Variable,
   tight tracking on display sizes, generous leading on body text. */
.pro-html { --p-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; --p-ink: #f5f5f7; --p-ink-2: #a1a1a6; --p-ink-3: #86868b; --p-line: rgba(255, 255, 255, 0.1); --p-card: rgba(22, 22, 26, 0.62); --spring: cubic-bezier(0.22, 1, 0.36, 1); background: #000; color-scheme: dark; }
.pro-page { background: transparent; color: var(--p-ink); font-family: var(--p-font); }
.pro-page main { padding-top: 0; }

/* the space behind everything: the video drifts with the pointer (set by pro.js) */
.space { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #000; }
.space-video { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; transform: translate3d(var(--sx, 0px), var(--sy, 0px), 0) scale(1.04); will-change: transform; opacity: 0.95; }
.space-glow { position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 0%, rgba(90, 110, 255, 0.16), transparent 70%), linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.7)); }

/* arriving from the sky: black lifts away */
.warp-in { position: fixed; inset: 0; z-index: 90; pointer-events: none; background: #000; animation: warp-in 900ms var(--spring) 80ms both; }
@keyframes warp-in { to { opacity: 0; visibility: hidden; } }

/* nav in space: dark glass, light words */
.pro-page .nav-pill { background: rgba(18, 18, 22, 0.55); border-color: rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 30px -8px rgba(0, 0, 0, 0.7); }
.pro-page .brand { color: var(--p-ink); }
.pro-page .brand img { filter: none; }
.pro-page .nav-links a { color: var(--p-ink-2); }
.pro-page .nav-links a:hover { background: rgba(255, 255, 255, 0.08); color: var(--p-ink); }
.pro-page .nav-links a.nav-pro { color: var(--p-ink); }

.p-hero { min-height: 100svh; display: grid; place-content: center; justify-items: center; gap: 22px; padding: 120px 20px 60px; text-align: center; }
.p-badge { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--p-ink); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
.p-badge img { border-radius: 7px; }
.p-badge b { padding: 3px 10px; border-radius: 999px; background: linear-gradient(180deg, #f5f5f7, #9a9aa2); color: #111; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; }
.p-display { margin: 0; font: 700 clamp(3rem, 8.2vw, 7.4rem)/0.98 var(--p-font); letter-spacing: -0.045em; background: linear-gradient(180deg, #fff 30%, #9c9ca6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-wrap: balance; }
.p-lede { margin: 0; max-width: 40ch; color: var(--p-ink-3); font-size: clamp(1.15rem, 1.9vw, 1.6rem); line-height: 1.35; letter-spacing: -0.015em; }
.p-lede b { color: var(--p-ink); font-weight: 600; }
.p-stats { display: flex; flex-wrap: wrap; justify-content: center; margin: 18px 0 0; }
.p-stats div { padding: 4px 30px; border-left: 1px solid var(--p-line); }
.p-stats div:first-child { border-left: 0; }
.p-stats dt { color: var(--p-ink); font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; }
.p-stats dd { margin: 4px 0 0; color: var(--p-ink-3); font-size: 0.95rem; }
.p-note { margin: 10px 0 0; color: var(--p-ink-3); font-size: 0.88rem; }

/* the window rises and settles as it scrolls in (pro.js sets --t from 0 to 1) */
.p-stage { padding: 0 4vw 14vh; perspective: 1600px; }
.p-window { margin: 0 auto; max-width: 1240px; border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 40px 120px -30px rgba(80, 100, 255, 0.35), 0 30px 80px -20px rgba(0, 0, 0, 0.9); }
.p-window img, .p-panel img { display: block; width: 100%; height: auto; }
.tilt { transform: rotateX(calc((1 - var(--t, 1)) * 22deg)) scale(calc(0.9 + var(--t, 1) * 0.1)); transform-origin: 50% 100%; opacity: calc(0.35 + var(--t, 1) * 0.65); }

.p-sec { width: min(1240px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: 14vh 0; }
.p-title { margin: 0 0 6vh; font: 700 clamp(2.2rem, 5vw, 4.4rem)/1.02 var(--p-font); letter-spacing: -0.04em; color: var(--p-ink); text-wrap: balance; }
.p-title span { color: var(--p-ink-3); }
.p-card { padding: 30px 30px 32px; border: 1px solid var(--p-line); border-radius: 22px; background: var(--p-card); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); transition: transform 500ms var(--spring), border-color 300ms; }
.p-card:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.2); }
.p-card h3 { margin: 6px 0 10px; color: var(--p-ink); font-size: 1.45rem; font-weight: 650; letter-spacing: -0.025em; line-height: 1.15; }
.p-card p { margin: 0; color: var(--p-ink-2); font-size: 1.02rem; line-height: 1.5; }
.p-card kbd { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: var(--p-ink); }
.p-kicker { color: var(--p-ink-3) !important; font-size: 0.78rem !important; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.p-fine { margin-top: 14px !important; padding-top: 12px; border-top: 1px solid var(--p-line); color: var(--p-ink-3) !important; font-size: 0.86rem !important; }
.p-ai { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 6vh; }
.p-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

.p-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 6vw; align-items: center; }
.p-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.p-chips li { padding: 9px 15px; border: 1px solid var(--p-line); border-radius: 999px; background: rgba(255, 255, 255, 0.05); color: var(--p-ink); font-size: 0.98rem; }
.p-list { display: grid; gap: 14px; margin: 5vh 0 0; padding: 0; list-style: none; color: var(--p-ink-2); font-size: 1.08rem; line-height: 1.45; }
.p-list b { color: var(--p-ink); }
.p-panel { margin: 0; border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 30px 90px -20px rgba(0, 0, 0, 0.9); }

.p-close { display: grid; justify-items: center; gap: 22px; padding: 18vh 20px 22vh; text-align: center; }
.pro-foot { background: rgba(0, 0, 0, 0.55); border-top-color: var(--p-line); color: var(--p-ink-3); }
.pro-foot .foot-links a { color: var(--p-ink-2); }

/* things rise into place as they come into view */
.rise { opacity: 0; transform: translateY(28px); transition: opacity 900ms var(--spring), transform 900ms var(--spring); transition-delay: var(--d, 0ms); }
.rise.in { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .p-ai, .p-grid, .p-tools { grid-template-columns: 1fr; }
  .p-panel { max-width: 360px; justify-self: center; }
  .p-stats div { padding: 8px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none; }
  .tilt { transform: none; opacity: 1; }
  .warp-in { animation: none; display: none; }
  .space-video { transform: none; }
}


/* ---------- Apple-style polish ---------- */
/* instant feedback on press */
.p-card:active { transform: scale(0.985); transition-duration: 100ms; }
.p-chips li { transition: background-color 160ms, border-color 160ms; }
.p-chips li:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); }
/* size-specific tracking: body text slightly open over the dark glass, headings tight */
.p-card p, .p-list, .p-chips li { letter-spacing: 0.005em; }
.p-card h3 { font-weight: 680; }
/* reduced transparency: solid surfaces, no blur */
@media (prefers-reduced-transparency: reduce) {
  .p-card { background: #141418; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .pro-page .nav-pill { background: #111114; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* more contrast: solid cards with a defined edge */
@media (prefers-contrast: more) {
  .p-card, .p-chips li { background: #0d0d10; border-color: rgba(255, 255, 255, 0.45); }
  .p-title span, .p-lede, .p-stats dd { color: #d2d2d7; }
}
/* phones: stats stack neatly, hero fits */
@media (max-width: 560px) {
  .p-stats { display: grid; gap: 14px; }
  .p-stats div { border-left: 0; padding: 0; }
  .p-hero { padding-top: 110px; }
}