/* Depth and motion for the existing public page. No layout or palette changes. */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --shadow-card: 0 2px 3px #173c3204, 0 12px 28px #173c3208, 0 32px 64px #173c3206;
  --shadow-raised: 0 3px 7px #173c3208, 0 18px 36px #173c3211, 0 40px 70px #173c3209;
}
body {
  background: radial-gradient(ellipse 60% 16% at 100% 0, #d6e68b20, transparent 80%),
    radial-gradient(ellipse 50% 12% at 0 8%, #f477550a, transparent 80%), var(--cream);
}
.site-header {
  position: relative;
  z-index: 2;
  background: linear-gradient(120deg, #fffdf780, #f6f3ebc9);
  box-shadow: 0 1px 0 #fffdf7cc, 0 12px 32px #173c3204;
}
.hero { position: relative; isolation: isolate; }
.hero::before {
  content: "";
  position: absolute;
  inset: 4% 0 1% 28%;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(ellipse at 70% 35%, #d6e68b45, transparent 64%),
    radial-gradient(ellipse at 65% 75%, #f4775515, transparent 64%);
}
.hero h1 { text-shadow: 0 2px 0 #fffdf7a6, 0 14px 36px #173c320b; }
.headline-accent {
  background-image: linear-gradient(transparent 78%, #f477551c 78%, #f477551c 96%, transparent 96%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.main-nav a { position: relative; }
.main-nav a::after {
  content: "";
  position: absolute;
  height: 2px;
  left: 0;
  right: 0;
  bottom: 3px;
  border-radius: 2px;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease-out);
}
.main-nav a:hover { text-decoration: none; }
.main-nav a:focus-visible::after { transform: scaleX(1); }
.button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow: 0 2px 3px #173c320b, 0 9px 22px #173c3214, inset 0 1px 0 #fffdf729;
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), background .2s ease;
}
.button-coral { box-shadow: 0 2px 3px #173c320b, 0 10px 25px #f4775533, inset 0 1px 0 #fffdf780; }
.button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, #fffdf728 49%, transparent 73%);
  transform: translateX(-125%);
  pointer-events: none;
}
.button .icon { transition: transform .28s var(--ease-out); }
.button:active { transform: translateY(1px); }
.preview-window {
  border-color: #173c32b3;
  background: linear-gradient(145deg, #fffefb, var(--paper));
  box-shadow: 11px 15px 0 #dce3d5, 0 5px 10px #173c320c, 0 24px 56px #173c3221, 0 44px 90px #173c320e;
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.preview-topbar {
  background: linear-gradient(115deg, #173c32, #245344);
  box-shadow: 0 3px 12px #173c321f;
}
.preview-body { background: radial-gradient(ellipse at 100% 0, #d6e68b13, transparent 60%); }
.preview-complete { box-shadow: 0 2px 5px #173c3206, inset 0 1px 0 #fffdf7; }
.preview-metrics strong { text-shadow: 0 5px 16px #173c3211; }
.sample-finding {
  background: linear-gradient(140deg, #fffefb, #f8f9f0);
  box-shadow: 0 2px 4px #173c3204, 0 10px 24px #173c3208, inset 0 1px 0 #fffdf7;
}
.sample-priority { box-shadow: 0 2px 5px #173c3208; }
.preview-next-icon { background: #fffdf7; box-shadow: 0 5px 10px #173c3208; }
.preview-sticker {
  background: linear-gradient(135deg, #f98c68, var(--coral));
  box-shadow: 0 3px 0 #173c3212, 0 14px 24px #173c321a, 0 25px 45px #f477551c;
}
.preview-orbit { border-color: #b9cba2; box-shadow: inset 0 0 42px #d6e68b12, 0 0 40px #d6e68b0e; }
.principle-strip { box-shadow: 0 2px 0 #fffdf780; }
.step { transition: border-color .3s ease; }
.step-number { color: #b9482b; text-shadow: 0 5px 14px #f4775515; }
.features-section {
  background: radial-gradient(ellipse at 0 0, #d6e68b20, transparent 65%), var(--sage);
  box-shadow: inset 0 1px 0 #fffdf799, inset 0 -1px 0 #fffdf766;
}
.feature {
  background: linear-gradient(140deg, #fffdf7, var(--cream));
  border-color: #d5decd;
  box-shadow: var(--shadow-card), inset 0 1px 0 #fffdf7;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s ease;
}
.feature-icon {
  background: linear-gradient(140deg, #eaf0d9, #dfe7d6);
  box-shadow: 0 3px 7px #173c3208, inset 0 1px 0 #fffdf7b3;
  transition: transform .4s var(--ease-out), box-shadow .35s ease;
}
.scope-section {
  background: radial-gradient(ellipse at 100% 0, #d6e68b12, transparent 65%),
    linear-gradient(135deg, #173c32, #1c4538);
  box-shadow: inset 0 1px 0 #fffdf712, inset 0 -1px 0 #102c2459;
}
.scope-points article { transition: border-color .3s ease; }
.faq-list details { transition: border-color .25s ease; }
.faq-list summary { transition: color .2s ease; }
.faq-list summary::after { box-shadow: 0 2px 5px #173c3207; transition: background .2s ease, box-shadow .2s ease; }
.faq-list details[open] { border-color: #afc09f; }
.faq-list details[open] summary { color: #245344; }
.faq-list details[open] summary::after { background: var(--lime); box-shadow: 0 3px 8px #173c3210; }
.closing-card {
  background: linear-gradient(115deg, #f47755, #f98c68 66%, #f47755);
  box-shadow: 0 3px 7px #173c3207, 0 20px 45px #f4775524, 0 40px 75px #173c320b, inset 0 1px 0 #fffdf766;
}
.closing-asterisk { text-shadow: 0 10px 35px #fffdf710; }
.site-footer { box-shadow: 0 -1px 0 #fffdf780; }

/* Content stays visible unless the observer has been successfully installed. */
@media (prefers-reduced-motion: no-preference) {
  .landing-motion-active .motion-pending {
    opacity: 0;
    transform: translateY(14px);
  }
  .landing-motion-active .motion-reveal {
    transition: opacity .65s var(--ease-out), transform .65s var(--ease-out);
  }
  .landing-motion-active .motion-reveal.motion-delay-1 { transition-delay: .07s; }
  .landing-motion-active .motion-reveal.motion-delay-2 { transition-delay: .14s; }
  .landing-motion-active .motion-reveal.motion-delay-3 { transition-delay: .21s; }
  .landing-motion-active .motion-reveal:focus-within {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .landing-motion-active .hero-copy > * { animation: landing-rise .65s var(--ease-out) both; }
  .landing-motion-active .hero-copy > :nth-child(2) { animation-delay: .06s; }
  .landing-motion-active .hero-copy > :nth-child(3) { animation-delay: .12s; }
  .landing-motion-active .hero-copy > :nth-child(4) { animation-delay: .18s; }
  .landing-motion-active .hero-copy > :nth-child(5) { animation-delay: .24s; }
  .landing-motion-active .hero-copy > :nth-child(6) { animation-delay: .3s; }
  .landing-motion-active .hero-copy > :focus-within { animation: none; opacity: 1; transform: none; }
  .landing-motion-active .preview-window { animation: landing-float 4.4s ease-in-out .25s 1; }
  .landing-motion-active .hero .status-dot { position: relative; }
  .landing-motion-active .hero .status-dot::after {
    content: "";
    position: absolute;
    inset: -5px;
    border: 1px solid #49625770;
    border-radius: 50%;
    pointer-events: none;
    animation: landing-beacon 1.5s ease-out .35s 2 both;
  }
  .faq-list details[open] > div { animation: landing-rise .3s var(--ease-out) both; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .main-nav a:hover::after { transform: scaleX(1); }
  .button:hover { transform: translateY(-3px); box-shadow: 0 4px 7px #173c320c, 0 16px 32px #173c3226; }
  .button-coral:hover { box-shadow: 0 4px 7px #173c320a, 0 16px 32px #f4775545; }
  .button:hover::before { animation: landing-sheen .65s ease-out 1; }
  .button:hover .icon,.text-link:hover .icon,.scope-link:hover .icon { transform: translateX(3px); }
  .product-preview:hover .preview-window { transform: translateY(-4px); }
  .feature:hover { transform: translateY(-5px); border-color: #a4b793; box-shadow: var(--shadow-raised), inset 0 1px 0 #fffdf7; transition-delay: 0s; }
  .feature:hover .feature-icon { transform: translateY(-2px) rotate(-5deg); box-shadow: 0 7px 14px #173c3211; }
  .step:hover { border-color: #496257; }
  .scope-points article:hover { border-color: #7b966c; }
  .faq-list summary:hover::after { background: #e4ebd9; box-shadow: 0 5px 12px #173c3210; }
}
@keyframes landing-rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes landing-float { 0%,100% { transform: translateY(0); } 45% { transform: translateY(-4px); } }
@keyframes landing-beacon { from { opacity: .7; transform: scale(.6); } to { opacity: 0; transform: scale(1.7); } }
@keyframes landing-sheen { from { transform: translateX(-125%); } to { transform: translateX(125%); } }
.landing-motion-paused *,.landing-motion-paused *::before,.landing-motion-paused *::after { animation-play-state: paused !important; }
@media (hover: none), (pointer: coarse) {
  .button:hover { transform: none; }
}
@media (max-width: 650px) {
  .preview-window { box-shadow: 7px 10px 0 #dce3d5, 0 15px 32px #173c321c; }
  .feature { box-shadow: 0 3px 6px #173c3204, 0 12px 24px #173c3208, inset 0 1px 0 #fffdf7; }
  .closing-card { box-shadow: 0 12px 28px #f4775524, 0 22px 40px #173c3209; }
  .hero::before { inset: 5% 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation: none !important; transition: none !important; }
  .motion-reveal,.motion-pending { opacity: 1 !important; transform: none !important; }
  .button:hover,.button:active,.feature:hover,.product-preview:hover .preview-window,.feature:hover .feature-icon { transform: none; }
}
@media print {
  *,*::before,*::after { animation: none !important; transition: none !important; box-shadow: none !important; text-shadow: none !important; }
  .motion-reveal,.motion-pending { opacity: 1 !important; transform: none !important; }
  body { background: white; }
}