:root {
  --photo-hero-veil: #ffffffb8;
  --photo-light-veil: #ffffffc7;
  --photo-access-veil: #edf3f0cc;
  --photo-accent-veil: #f8e9e7e6;
  --photo-footer-veil: #ffffffdb;
}
body { isolation: isolate; }
.page-backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #e5ece5; }
.page-backdrop-layer { position: absolute; inset: 0; opacity: 0; transition: opacity .75s ease; }
.page-backdrop-layer.is-active { opacity: 1; }
.page-backdrop-layer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.88) contrast(.9);
}
.page-backdrop-layer[data-photo="two"] img { object-position: 50% 42%; }
.page-backdrop-layer[data-photo="four"] img { object-position: 50% 45%; }
.site-header { background: #fffffff0; }
.hero {
  background: var(--photo-hero-veil);
  color: #14291f;
}
.hero .eyebrow,.hero-detail,.hero-action > span,.hero-bottom > span { color: #1c3227; }
.hero .eyebrow { font-size: 12px; }
.hero-action > span { font-size: 12px; }
.hero-bottom > span { font-size: 10px; }
.hero-bottom { border-top-color: #14291f4d; }
.scene-controls .icon-button { background: #ffffffb3; }
.creation,.workspace-section,.workflow-section {
  background: var(--photo-light-veil);
  color: #14291f;
}
.creation {
  background-image: linear-gradient(90deg, #ffffff14 0%, #ffffff0a 42%, #ffffff00 72%, #ffffff00 100%);
}
.workspace-section {
  background-image: linear-gradient(180deg, #ffffff14 0%, #ffffff0a 35%, #ffffff00 76%, #ffffff0a 100%);
}
.workflow-section {
  background-image: linear-gradient(180deg, #ffffff0a 0%, #ffffff14 100%);
}
.creation,.access-section,.workspace-section { border-bottom: 0; }
.creation,.workspace-section,.workflow-section {
  --ink: #14291f;
  --line: #253e3540;
}
.creation .product-intro,.creation .format-details p,.creation .capacity-note,
.creation .product-eyebrow,.creation .format-tab,.creation .modes-heading > p,
.workspace-section .product-heading > p,.workspace-section .product-eyebrow,
.workspace-section .workspace-heading span,.workspace-section .workspace-intro,
.workspace-section .feature-list p,.workspace-section .online-note,
.workspace-section .workspace-preview figcaption,.workflow-section .product-heading > p,
.workflow-section .product-eyebrow,.workflow-section .workflow-grid p { color: #1c3227; }
.creation-preview { background: transparent; border-color: transparent; }
.product-screen-label,.creation-preview figcaption {
  background: transparent;
  color: #1c3227;
  padding: 9px 0;
}
.product-section .phone-frame {
  box-shadow: 0 24px 48px -18px #182e244d, 0 5px 12px #182e241a;
}
.format-tabs { border-bottom-color: #253e3533; }
.format-tab[aria-selected="true"] { background: #ffffffa6; }
.format-tab:hover { background: #ffffffbf; }
.capability-strip { background: var(--photo-accent-veil); }
.capability-strip li span,.mode-item p { color: #1c3227; }
.mode-item { background: #edf4eef0; }
.mode-item:nth-child(2) { background: #faeeebf0; }
.mode-item:nth-child(3) { background: #eff0f7f0; }
.access-section {
  --ink: #233c34;
  --line: #36594b33;
  color: #233c34;
  background-color: var(--photo-access-veil);
  background-image: linear-gradient(180deg, #edf3f014 0%, #edf3f00a 60%, #edf3f014 100%);
}
.access-section .product-eyebrow,.access-section .product-heading > p,.access-extra p { color: #263f35; }
.access-item { background: #fcfdfbeb; border-color: #36594b26; }
.access-item > svg { color: #9a4c3c; }
.access-item:nth-child(2) > svg { color: #3d6b4a; }
.access-item:nth-child(3) > svg { color: #4667a0; }
.access-item > p,.access-use,.access-number { color: #40554b; }
.access-use { border-top-color: #36594b26; }
.access-extra > svg { color: #587468; }
.access-extras { border-top: 1px solid #36594b26; padding-top: 28px; }
.workspace-heading > svg,.feature-list li > svg { color: #365844; }
.workflow-grid li:not(:last-child)::after { background: #253e3559; }
.file-care { background: #edf0f5f0; border-left-color: #8293ad; color: #354453; }
.file-care strong,.file-care > svg { color: #435776; }
.download-section { background: #e4efeaeb; }
.download-section .product-eyebrow,.download-copy p:last-child,.download-action > span { color: #1c3227; }
.company-footer,.site-footer { background: var(--photo-footer-veil); }
.company-wordmark img { mix-blend-mode: multiply; background: transparent; border: 0; box-shadow: none; }
.company-footer-layout > p,.company-wordmark h2,.footer-bottom { color: #1c3227; }
.workflow-section .wrap { border-top: 0; padding-top: 0; }
@media (max-width: 650px) {
  .hero-detail { font-size: 12px; }
  .creation,.workspace-section,.workflow-section {
    background-image: linear-gradient(180deg, #ffffff14 0%, #ffffff0a 60%, #ffffff00 100%);
  }
  .access-section {
    background-image: linear-gradient(180deg, #edf3f014 0%, #edf3f00a 100%);
  }
  .workspace-preview,#secret-map .workspace-preview { background: transparent; }
  .access-extras { padding-top: 24px; }
  .page-backdrop-layer[data-photo="one"] img { object-position: 54% center; }
  .page-backdrop-layer[data-photo="two"] img { object-position: 45% center; }
  .page-backdrop-layer[data-photo="three"] img { object-position: 51% center; }
  .page-backdrop-layer[data-photo="four"] img { object-position: 53% center; }
}
@media (prefers-reduced-motion: reduce) {
  .page-backdrop-layer { transition: none !important; }
}
