/* Finishing details shared by the standalone website. Content remains visible without JS. */
:root { --page-ease: cubic-bezier(.22, 1, .36, 1); }

/* Keep the mobile header and its expanding scroll panel out of page snapshots. */
@media (min-width: 901px) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) {
    animation-duration: 240ms;
    animation-timing-function: ease-in-out;
  }
  .header { view-transition-name: site-header; }
  ::view-transition-group(site-header) { animation-duration: 240ms; }
}

:where(.button) { gap: 12px; }
.button { transition: background .2s, color .2s, border-color .2s, box-shadow .25s, transform .25s var(--page-ease); }
.text-link > span[aria-hidden] { display: inline-block; transition: transform .3s var(--page-ease); }
@media (hover: hover) and (pointer: fine) {
  main .button:hover { transform: translateY(-2px); box-shadow: 0 5px 12px #202a3418; }
  main .button:active { transform: translateY(0); box-shadow: none; }
  .text-link:hover > span[aria-hidden] { transform: translateX(4px); }
}
.footer-links a { transition: color .2s, text-decoration-color .2s; }
.footer-links a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #7bd3bf; }

/* The company artwork sits against a cut paper plane, anchored to its own section. */
.about-hero { position: relative; isolation: isolate; background: #f0f4f3; }
.about-intro { animation: none; }
.about-hero::before { content: ''; position: absolute; z-index: -1; inset: 0 0 0 auto; width: 46%; background: #dce8e3; clip-path: polygon(15% 0,100% 0,100% 100%,0 100%); }
.about-company-art { border: 1px solid #526273; border-top: 3px solid #50baa4; box-shadow: 0 18px 38px #202a341c, 8px 8px 0 #c5d7d0; }
.about-purpose-copy { border-top-color: #9bada6; }
.about-people { box-shadow: inset 0 6px 0 #d3e2dc; }
.about-principles { background: linear-gradient(115deg,#242932 58%,#2b373b); }
.about-principles-list > div { border-top-color: #8190a3; }
.about-review { background: #edf2f1; border: 1px solid #c0cec9; border-left: 4px solid #1b705f; box-shadow: 7px 7px 0 #e2e9e6; }
.about-review-links a { transition: color .2s, background .2s; }
.about-review-links a:hover, .about-review-links a:focus-visible { background: #e2ece7; }
.about-company { background: #eef2f1; }
.about-closing { background: linear-gradient(110deg,#1b5c4f 68%,#174f44); border-top: 4px solid #50baa4; }
.about-page-navigation a[aria-current=location] { color: #1b705f; }
.about-page-navigation a[aria-current=location]::after { transform: scaleX(1); }
.company-topic-nav a[aria-current=location] { color: #155a4d; }
.company-topic-nav a[aria-current=location]::before { opacity: 1; }
.company-topic-nav a[aria-current=location]::after { transform: scaleX(1); }

/* A purposeful contact surface; controls and the form never move on entry. */
.contact-masthead { position: relative; isolation: isolate; }
.contact-masthead::before { content: ''; position: absolute; inset: 0 0 0 auto; width: 36%; z-index: -1; background: #d6e5df; clip-path: polygon(24% 0,100% 0,100% 100%,0 100%); }
.contact-preparation dl > div { border-top: 2px solid #9cafab; }
body[data-page=contact] .contact-workspace { border-top: 3px solid #1b705f; box-shadow: 0 12px 28px #202a340a; transition: box-shadow .25s, border-color .25s; }
body[data-page=contact] .contact-workspace:focus-within { box-shadow: 0 12px 28px #202a340a, 0 0 0 3px #1b705f14; }
body[data-page=contact] .contact-directory { box-shadow: 7px 7px 0 #dbe5e1; }
body[data-page=contact] .inquiry-options label { transition: background .2s, color .2s, border-color .2s; }

/* Policies keep an uninterrupted reading surface, with a more defined contents rail. */
body:has(.legal-document) .page-hero { background: linear-gradient(110deg,#e4eeeb 68%,#d9e7e1); }
body:has(.legal-document) .legal-layout > aside { box-shadow: 4px 4px 0 #e5ece9; }
body:has(.legal-document) .legal-index a { transition: color .2s, background .2s, box-shadow .2s; }
body[data-page=unsubscribe] .preference-section > .wrap { box-shadow: 6px 6px 0 #e2e9e6; }

/* Existing homepage reveals retain their ownership of the scroll story and product views. */
.motion-ready [data-reveal] { transition-timing-function: var(--page-ease); }
.marketing-home .benefit-item { transition: opacity .5s var(--page-ease), transform .65s var(--page-ease), border-color .3s, background .3s; }
.marketing-home .benefit-item:hover { border-top-color: #7bd3bf; background-color: #ffffff03; }
.marketing-home .review-resources > a { transition: background .25s, border-color .25s; }
.marketing-home .review-resources > a:hover { background: #eaf1ee; border-color: #a0b8af; }

/* Site actions: a quiet header link and a decisive, flat primary action. */
.button.site-cta {
  --cta-surface: #242932;
  --cta-foreground: #fff;
  --cta-hover: #343b46;
  min-height: 54px;
  max-width: 100%;
  justify-content: space-between;
  gap: 30px;
  padding: 15px 22px;
  border: 1px solid var(--cta-surface);
  border-radius: 0;
  background: var(--cta-surface);
  color: var(--cta-foreground);
  font-size: 16px;
  line-height: 1.4;
  white-space: normal;
  text-align: left;
  box-shadow: none;
  transform: none;
  transition: background .2s, border-color .2s, color .2s;
}
.button.site-cta:hover { background: var(--cta-hover); border-color: var(--cta-hover); box-shadow: none; transform: none; }
.button.site-cta:active { box-shadow: none; transform: none; }
button.button.site-cta { justify-content: center; }
button.button.site-cta:disabled, button.button.site-cta:disabled:hover {
  background: #526273; border-color: #526273; color: #fff; cursor: wait;
}
.cta-arrow { display: block; width: 24px; height: 24px; flex: 0 0 24px; transition: transform .2s var(--page-ease); }
:is(.hero-copy, .detail-closing, .about-closing, .company-closing, .pricing-photographic-closing) .button.site-cta {
  --cta-surface: #fff;
  --cta-foreground: #202a34;
  --cta-hover: #e4eeeb;
}
.detail-closing .button.site-cta { min-height: 56px; }
.header .button.site-cta {
  position: relative;
  min-height: 46px;
  gap: 16px;
  padding: 10px 0;
  border: 0;
  border-bottom: 2px solid #50baa4;
  background: none;
  color: #f2f5f8;
  font-size: 15px;
  white-space: nowrap;
}
.header .button.site-cta:hover, .header .button.site-cta:active { background: none; color: #82d5c1; }
.header .cta-arrow { width: 20px; height: 20px; flex-basis: 20px; }
@media (hover: hover) and (pointer: fine) {
  .site-cta:hover .cta-arrow { transform: translateX(3px); }
  .site-cta:hover .cta-arrow-down { transform: translateY(3px); }
}
@media (max-width: 900px) {
  .header .nav-links.is-open .mobile-demo.site-cta {
    --cta-surface: #242932;
    --cta-foreground: #fff;
    --cta-hover: #343b46;
    min-height: 54px;
    width: min(100%, 280px);
    justify-self: end;
    padding: 14px 18px;
    gap: 14px;
    border: 1px solid var(--cta-surface);
    background: var(--cta-surface);
    color: var(--cta-foreground);
    font-size: 16px;
    white-space: normal;
  }
  .header .nav-links.is-open .mobile-demo.site-cta:hover { background: var(--cta-hover); border-color: var(--cta-hover); }
}

@media (max-width: 900px) {
  .about-hero::before { width: 42%; }
  body:has(.legal-document) .legal-layout > aside { box-shadow: none; }
}
@media (max-width: 600px) {
  .about-hero { background: linear-gradient(160deg, #f0f4f3, #dce8e3); }
  .about-hero::before { display: none; }
  .about-company-art { box-shadow: 0 12px 24px #202a3414, 4px 4px 0 #c5d7d0; }
  .contact-masthead::before { width: 25%; background: #dde9e4; }
  .about-review, body[data-page=contact] .contact-directory { box-shadow: 4px 4px 0 #dbe5e1; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  main .button:hover, .text-link:hover > span[aria-hidden] { transform: none; }
  .site-cta .cta-arrow { transition: none; }
  .site-cta:hover .cta-arrow { transform: none; }
}
@media print {
  .about-hero::before, .contact-masthead::before { display: none; }
}