/* A product gallery. The captures are native Fovea, without recreated controls. */
:root {
  color-scheme: dark;
  --paper: #000;
  --ink: #efede7;
  --muted: #a3a19b;
  --line: #383837;
  --wash: #202020;
}
html { background: var(--paper); }
::selection { background: #45443f; color: var(--ink); }
:focus-visible { outline-color: #b9b5a7; }
.skip-link { color: var(--paper); }
.btn-primary:hover { background: #d5d2c9; }
.compat-dialog::backdrop { background: #0009; }
.home { --home-nav-height: 104px; --home-hero-top: clamp(24px,8svh,80px); min-height: 100svh; display: flex; flex-direction: column; }
.home #main { flex: 1 0 auto; }
.home .hero { padding-bottom: 40px; }
.hero-description { margin-top: 24px; max-width: 29ch; color: var(--ink); font-size: 18px; line-height: 1.5; }
.product-gallery { min-width: 0; margin-top: 48px; }
.product-window { position: relative; isolation: isolate; aspect-ratio: 1199 / 768; border-radius: .7% / 1.1%; overflow: hidden; }
.product-shot { display: block; border-radius: inherit; }
.product-shot img { width: 100%; height: auto; }
.product-tabs { display: flex; justify-content: center; gap: 32px; margin-top: 17px; }
.product-tabs a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; color: var(--muted); font-size: 13px; }
.product-tabs a[aria-current="true"] { color: var(--ink); }
.product-tabs a[aria-current="true"]::after { content: ''; position: absolute; left: 2px; right: 2px; bottom: 4px; height: 1px; background: currentColor; }
.product-tabs a:hover { color: var(--ink); }
/* Only complete windows get an edge light; detail crops have no window frame. */
@property --rim-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.product-window::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  border-radius: inherit; padding: .5px; pointer-events: none;
  background: conic-gradient(from calc(var(--rim-origin, 0deg) + var(--rim-angle)), transparent 0deg 235deg, #efede70c 255deg, #efede728 280deg, #efede72e 300deg, #efede718 330deg, transparent 360deg), linear-gradient(#efede708, #efede708);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: window-rim 20s linear infinite;
}
@keyframes window-rim {
  from, to { --rim-angle: -6deg; opacity: .8; }
  50% { --rim-angle: 6deg; opacity: 1; }
}
.home .nav-download { border: 0; border-radius: 0; padding-inline: 0; gap: 10px; }
.home .nav-download svg { color: var(--muted); transition: color 160ms; }
.home .nav-download:hover svg { color: var(--ink); }
/* Functional walkthrough, in normal document flow. */
.product-feature { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.43fr); column-gap: clamp(44px,6vw,96px); align-items: start; padding-block: clamp(72px,7vw,112px); }
.feature-copy { grid-column: 2; grid-row: 1; }
.feature-copy h2 { font-family: var(--serif); font-size: clamp(32px,3vw,48px); font-weight: 400; line-height: 1.08; letter-spacing: -.045em; margin: -.1em 0 28px; }
.feature-copy p { max-width: 38ch; font-size: 16px; line-height: 1.65; color: #b2afa8; }
.feature-copy p + p { margin-top: 20px; }
.feature-copy kbd { font: inherit; color: var(--ink); }
.feature-shot { grid-column: 1; grid-row: 1; position: relative; aspect-ratio: 1.4; overflow: hidden; border-radius: 0; }
/* These are cuts through a larger view, so the cut line must not read as a frame. */
.feature-shot { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28px); mask-image: linear-gradient(to bottom, transparent, #000 28px); }
.feature-shot-cull { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16px); mask-image: linear-gradient(to bottom, transparent, #000 16px); }
/* The Develop header meets the right edge in these two details. Keep that corner. */
.feature-shot-edit, .feature-shot-color { -webkit-mask-image: none; mask-image: none; border-top-right-radius: 8px; }
.feature-shot-edit::before, .feature-shot-color::before {
  content: ''; position: absolute; top: 0; right: 0; width: 160px; height: 160px;
  z-index: 3; pointer-events: none;
  padding: .5px .5px 0 0;
  border-top-right-radius: inherit;
  background: linear-gradient(225deg, #efede72e 15%, transparent 60%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.feature-shot img, .feature-shot video { position: absolute; max-width: none; height: auto; }
.feature-shot-edit img, .feature-shot-color img { top: 0; transform: translateY(calc(-100% * 78 / 820)); }
/* Enlarge native UI details. The opposite side recedes into the native dark background. */
.feature-shot::after { z-index: 2; content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--paper), transparent 65%), linear-gradient(0deg, var(--paper), transparent 13%); }
.feature-shot-cull img { width: 185%; right: 0; top: -16.4%; }
.feature-shot-edit img { width: 180%; right: 0; }
.feature-shot-edit::after { background: linear-gradient(90deg, var(--paper), transparent 50%), linear-gradient(0deg, var(--paper), transparent 13%); }
.feature-shot-color img { width: 155%; right: 0; }
.feature-shot-color::after { background: linear-gradient(90deg, var(--paper), transparent 48%), linear-gradient(0deg, var(--paper), transparent 10%); }
.feature-shot-area { aspect-ratio: 1280 / 708; }
.feature-shot-area img { width: 100%; right: 0; top: 0; transform: translateY(calc(-100% * 78 / 820)); }
.feature-shot-area::after { background: linear-gradient(90deg, var(--paper), transparent 8%), linear-gradient(0deg, var(--paper), transparent 6%); }
.library-demo { grid-column: 1; grid-row: 1; min-width: 0; }
.feature-shot-library img, .feature-shot-library video { width: 135%; left: 0; top: -5%; }
.feature-shot-library::after { background: linear-gradient(270deg, var(--paper), transparent 24%), linear-gradient(0deg, var(--paper), transparent 10%); }
.feature-shot-library .shortcut-keystroke { z-index: 3; }
.feature-shot-library:has(video[controls]) { aspect-ratio: 1280 / 820; mask-image: none; -webkit-mask-image: none; }
.feature-shot-library video[controls] { position: static; width: 100%; }
.feature-shot-library:has(video[controls])::after { display: none; }
.product-feature-reverse { grid-template-columns: minmax(0,.43fr) minmax(0,1fr); }
.product-feature-reverse .feature-copy { grid-column: 1; }
.product-feature-reverse .feature-shot { grid-column: 2; }
.purchase-page { min-height: 100svh; display: flex; flex-direction: column; }
.purchase-page #main { flex: 1 0 auto; }
.purchase-section, .purchase-faq { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.7fr); column-gap: clamp(44px,6vw,96px); align-items: start; }
.product-pricing { padding-block: clamp(72px,8vw,128px) clamp(128px,14vw,224px); }
.purchase-intro { padding-block: clamp(56px,8vw,120px) clamp(72px,8vw,120px); }
.purchase-copy h1, .purchase-copy h2 { font-family: var(--serif); font-size: clamp(40px,4.6vw,72px); font-weight: 400; line-height: 1.06; letter-spacing: -.045em; margin-top: -.1em; text-wrap: balance; }
.purchase-copy p { margin-top: 28px; max-width: 42ch; color: #b2afa8; font-size: 16px; line-height: 1.65; }
.purchase-price { margin-top: -.1em; margin-left: -.035em; font-family: var(--serif); font-size: clamp(64px,6.4vw,96px); line-height: 1.06; letter-spacing: -.055em; }
.purchase-description { margin-top: 20px; color: #b2afa8; font-size: 15px; line-height: 1.7; }
.purchase-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 28px; }
.purchase-trial { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 13px; }
.purchase-trial:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.purchase-faq { padding-bottom: clamp(80px,9vw,144px); }
.purchase-faq h2 { font-family: var(--serif); font-size: clamp(32px,3vw,48px); font-weight: 400; line-height: 1.08; letter-spacing: -.045em; }
.purchase-faq .faq-section { max-width: none; padding-bottom: 0; }
.product-footer { border-top: 0; }
.product-footer .footer-bottom { min-height: 0; padding-block: 24px 32px; border-top: 1px solid #efede714; }
.product-footer .brand { min-height: 44px; font-size: 22px; color: var(--muted); }
.product-footer .footer-legal a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
@media (min-width: 1000px) {
  .home .wrap-wide, .purchase-page .wrap-wide { width: min(calc(100% - 96px),1600px); max-width: none; }
  .home .nav-inner { min-height: var(--home-nav-height); }
  .home .hero { display: grid; grid-template-columns: minmax(0,.43fr) minmax(0,1fr); gap: clamp(44px,4vw,72px); align-items: start; padding-top: var(--home-hero-top); min-height: calc(100svh - var(--home-nav-height)); }
  .hero-copy h1 { margin-top: -.12em; font-size: clamp(40px,4.1vw,68px); line-height: 1.04; }
  .hero-copy h1 > span { display: inline; }
  .product-gallery { width: 100%; max-width: calc(max(280px, 100svh - var(--home-nav-height) - var(--home-hero-top) - 101px) * 1199 / 768); margin-top: 0; justify-self: end; }
}
@media (min-width: 1000px) and (max-height: 800px) {
  .home { --home-nav-height: 72px; --home-hero-top: 32px; }
}
@media (max-width: 999px) {
  .home .hero { padding-bottom: 80px; }
  .purchase-section, .purchase-faq { grid-template-columns: 1fr; row-gap: 44px; }
  .product-feature, .product-feature-reverse { grid-template-columns: 1fr; row-gap: 36px; }
  .feature-copy, .feature-shot, .product-feature-reverse .feature-copy, .product-feature-reverse .feature-shot { grid-column: 1; grid-row: auto; }
  .library-demo { grid-column: 1; grid-row: auto; }
  .feature-copy p { max-width: 48ch; }
}
@media (max-width: 600px) {
  .product-pricing { padding-block: 72px 128px; }
  .purchase-intro { padding-block: 44px 64px; }
  .purchase-copy p { margin-top: 24px; }
  .product-footer .footer-bottom { display: grid; grid-template-columns: 1fr 1fr; min-height: 0; gap: 12px; }
  .product-footer .copyright { font-size: 11px; text-align: right; }
  .product-footer .footer-legal { gap: 0 20px; font-size: 11px; }
  .product-gallery { margin-top: 36px; }
  .product-tabs { margin-top: 10px; gap: 30px; }
  .product-feature { padding-block: 56px; }
  .feature-copy h2 { margin-bottom: 22px; }
  .feature-copy p + p { margin-top: 16px; }
  .feature-shot { aspect-ratio: .8; }
  .feature-shot-cull img { width: 305%; top: -14.8%; }
  .feature-shot-cull::after { background: linear-gradient(90deg, var(--paper), transparent 50%), linear-gradient(0deg, var(--paper), transparent 13%); }
  .feature-shot-edit img { width: 260%; }
  .feature-shot-edit::after { background: linear-gradient(90deg, var(--paper), transparent 34%), linear-gradient(0deg, var(--paper), transparent 13%); }
  .feature-shot-color img { width: 260%; }
  .feature-shot-color::after { background: linear-gradient(90deg, var(--paper), transparent 34%), linear-gradient(0deg, var(--paper), transparent 8%); }
  .feature-shot-area { aspect-ratio: 1280 / 708; }
  .feature-shot-library { aspect-ratio: 1.15; }
  .feature-shot-library img { width: 180%; top: -5%; }
  .feature-shot-library video { width: 145%; }
  .feature-shot-library::after { background: linear-gradient(270deg, var(--paper), transparent 8%), linear-gradient(0deg, var(--paper), transparent 14%); }
}

/* A native keyboard sequence, with a key display tied to video time. */
.shortcut-demo { grid-column: 2; grid-row: 1; min-width: 0; }
.shortcut-demo video { display: block; width: 100%; height: auto; }
.shortcut-keystroke { position: absolute; left: 43%; bottom: 13%; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 12px; background: #181818ed; box-shadow: 0 3px 16px #0003; color: var(--ink); pointer-events: none; opacity: 0; transform: translate(-50%, 5px); transition: opacity 140ms, transform 200ms cubic-bezier(.2,.8,.2,1); }
.shortcut-keystroke.is-visible { opacity: 1; transform: translate(-50%, 0); }
.shortcut-keystroke kbd { display: grid; place-items: center; min-width: 38px; height: 38px; padding-inline: 10px; border-radius: 6px; background: #efede7; color: #171717; font: 500 17px var(--font); }
.shortcut-keystroke span { font-size: 14px; white-space: nowrap; }
.shortcut-playback { display: flex; align-items: center; gap: 7px; margin-left: auto; min-height: 44px; padding: 0 2px 0 12px; border: 0; background: none; color: var(--muted); font-size: 12px; }
.shortcut-playback:hover { color: var(--ink); }
.shortcut-playback .pause-icon, .shortcut-playback[data-state="pause"] .play-icon { display: none; }
.shortcut-playback[data-state="pause"] .pause-icon { display: block; }
@media (max-width: 999px) { .shortcut-demo { grid-column: 1; grid-row: auto; } }
@media (max-width: 600px) {
  .shortcut-keystroke { padding: 6px 10px 6px 6px; gap: 8px; border-radius: 8px; }
  .shortcut-keystroke kbd { min-width: 28px; height: 28px; padding-inline: 7px; font-size: 13px; border-radius: 4px; }
  .shortcut-keystroke span { font-size: 11px; }
}