/* ClarityPOD standalone integration. Shared type, palette, product identity and
   actions live in assets/okto-system.css; the primary header remains untouched. */
#main[data-okto-system]{--gutter:16px;--section-space:clamp(104px,12svh,176px)}
#main .container{max-width:none}
#main .hero{padding-block:clamp(64px,8svh,112px) 96px}
.product-arrival{margin-bottom:0}
.product-arrival .okto-product-descriptor{margin-top:16px}
#main .hero-grid,.product-proof-intro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,6.667vw,96px);align-items:center}
#main .hero-copy{gap:32px}
#main .hero-promise{gap:32px}
#main .hero-promise>p{max-width:58ch}
#main .hero-grid>.clarity-lens-stage{width:100%;max-width:none}
#main .client-strip-wrap{margin-top:80px;padding-top:24px}
#main .client-strip-wrap>.motion-toggle{top:-24px}
#main .testimonials>.motion-toggle{top:20px;right:16px}
#main .motion-toggle{position:absolute;padding:8px 12px;opacity:1}
#main .testimonials{padding-block:96px}
.product-proof-intro>.product-proof-art{max-width:656px;width:100%;justify-self:center}
#main .deliverable-list{margin-top:80px}
#main .deliverable,#main .deliverable.image-left,#main .sprint-intro,#main .case-panel{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,6.667vw,96px)}
#main .deliverable-copy{max-width:58ch}
#main .artwork-open-label{min-height:44px;display:flex;align-items:center;position:relative;top:auto;margin-top:16px}
#main .case-tabs{gap:32px;align-items:stretch}
#main .case-tabs button{width:auto;min-width:0;padding-inline:0}
#main .case-copy{max-width:58ch}
#main .continuation-grid{max-width:920px;grid-template-columns:1fr}
#main .continuation-grid article{padding-top:32px}
#main .continuation-grid h3 a{display:inline-flex;align-items:center;min-height:44px}
#main .faq article{max-width:1040px}
#main .contact .container{gap:32px}
#main .contact p{max-width:58ch}
.site-footer[data-okto-system]{padding-inline:16px}
.site-footer[data-okto-system]>.container{width:100%;max-width:none}
.site-footer[data-okto-system] .footer-brand{font-size:clamp(48px,20.5vw,360px);line-height:1.04;letter-spacing:-.04em}
.site-footer[data-okto-system] .footer-brand .okto-product-prefix{color:inherit}
.site-footer[data-okto-system] .footer-legal{grid-template-columns:repeat(4,minmax(0,1fr))}
.site-footer[data-okto-system] .footer-legal a{display:inline-flex;min-height:44px;align-items:center}
.site-footer[data-okto-system] .footer-legal button{text-align:left;justify-content:flex-start}
#artwork-dialog[data-okto-system] .artwork-dialog-header button{padding:8px 12px}
@media(max-width:900px){
  #main[data-okto-system]{--section-space:96px}
  #main .hero{padding-top:48px;padding-bottom:64px}
  .product-arrival{margin-bottom:0}
  .product-arrival .okto-product-descriptor{margin-top:12px}
  #main .hero-grid,.product-proof-intro,#main .sprint-intro,#main .case-panel{grid-template-columns:1fr;gap:40px}
  #main .hero-grid>.clarity-lens-stage{max-width:560px;justify-self:center}
  #main .client-strip-wrap{margin-top:48px}
  #main .testimonials{padding-block:80px}
  #main .deliverable-list{margin-top:64px}
  #main .deliverable,#main .deliverable.image-left{gap:40px;padding-block:64px}
  #main .case-tabs{gap:16px 24px}
  #main .contact p{max-width:100%}
  .site-footer[data-okto-system] .footer-legal{grid-template-columns:1fr;gap:16px}
  .site-footer[data-okto-system] .footer-brand{font-size:20.5vw}
}
@media(prefers-reduced-motion:reduce){
  #main .motion-toggle{transition:none}
}
/* Local aliases let existing editorial surfaces read the canonical palette
   without changing the primary header or the authored example artwork. */
#main[data-okto-system],.site-footer[data-okto-system],dialog[data-okto-system]{--paper:var(--okto-paper);--ink:var(--okto-ink);--graphite:var(--okto-ink);--steel:var(--okto-muted);--line:var(--okto-line);--brand-gradient:var(--okto-context-gradient)}
.site-footer[data-okto-system] .footer-brand{color:var(--okto-paper)}
#artwork-dialog[data-okto-system],#cookie-dialog[data-okto-system]{background:var(--okto-paper);color:var(--okto-ink)}
#main .gradient-rule{height:1px;background:var(--okto-context-gradient)}