/* ClarityPOD product composition, 30 October 2026.
   Core type/actions/inscriptions are copied from OKTOPODS. These rules only
   compose the product below its locked header and never restyle native art. */
#main[data-okto-system]{
  --gutter:var(--okto-edge);--section-space:clamp(112px,15svh,176px);
  --okto-paper:#fff;--paper:#fff;--ink:var(--okto-ink);--graphite:var(--okto-ink);
  --steel:var(--okto-muted);--line:var(--okto-line);--brand-gradient:var(--okto-context-gradient);
  --okto-focus-gap:#fff;
  background:#fff;color:var(--okto-ink);font-family:var(--okto-font);font-weight:200;
}
#main .container{max-width:1600px}
#main .hero{padding-block:clamp(48px,7svh,88px) 80px}
#main .hero-grid,.product-proof-intro,#main .sprint-intro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--okto-grid-gap);align-items:center}
#main .hero-copy{gap:40px;min-width:0}
.product-arrival .okto-product-name{font-size:clamp(64px,7.778vw,112px)}
.product-arrival .okto-product-descriptor{margin-top:12px}
#main .hero h1.okto-type-chapter{font-size:var(--okto-subheading,56px);line-height:1.06}
#main .hero-promise{gap:32px}
#main .hero-promise>p{max-width:48ch}
#main .hero-grid>.clarity-lens-stage{width:100%;max-width:700px;justify-self:center}
#main .okto-lens--value .clarity-lens-word{font-size:6.5cqw;font-weight:400;letter-spacing:-.025em;line-height:1.15;width:auto}
#main .client-strip-wrap{margin-top:clamp(56px,8svh,96px);padding-top:32px;border-top:1px solid var(--line)}
#main .client-strip-wrap>.motion-toggle{top:-20px}
#main .motion-toggle{position:absolute;padding:8px 12px;opacity:1;background:#fff}

/* Quotes remain verbatim in their original carousel, with the same quiet
   white ground as the rest of the site rather than a separate card surface. */
#main .testimonials{--quote-width:clamp(360px,36vw,560px);--quote-gap:48px;padding-block:72px 88px;background:#fff;border-bottom:1px solid var(--line)}
#main .testimonials>.motion-toggle{top:8px;right:var(--gutter)}
#main .testimonial-card{padding:24px 0;background:transparent;border-radius:0;gap:24px;border-top:1px solid var(--line)}
#main .testimonial-header{height:auto;min-height:48px}
#main .testimonial-person{width:auto;min-width:0;flex:1}
#main .testimonial-person p{font:200 14px/20px var(--okto-font);color:var(--okto-muted)}
#main .testimonial-person p:first-child{font-weight:400;color:var(--ink)}
#main .testimonial-card blockquote{font:200 21px/30px var(--okto-font);letter-spacing:-.02em;min-height:210px;color:var(--ink)}
#main .testimonial-rule{display:none}

/* A navigable inventory names all four outputs before the detailed examples.
   Native artwork is unchanged, including its white ground and aspect ratio. */
.product-proof-intro{align-items:center}
.product-proof-intro>.product-proof-art{max-width:656px;width:100%;justify-self:center}
#main .output-index{list-style:none;margin:40px 0 0;padding:0}
#main .output-index li{border-top:1px solid var(--line)}
#main .output-index a{display:grid;grid-template-columns:28px minmax(0,1fr) 20px;gap:16px;align-items:baseline;padding:18px 0;min-height:56px;font:200 21px/28px var(--okto-font);letter-spacing:-.02em}
#main .output-index a:hover>span:nth-child(2){text-decoration:underline;text-underline-offset:5px}
#main .output-index-number{font:400 14px/20px var(--okto-font);color:var(--steel)}
#main .output-index-arrow{font-size:20px;transition:transform .3s cubic-bezier(.22,1,.36,1)}
#main .output-index a:hover .output-index-arrow{transform:translateY(3px)}
#main .deliverable-list{margin-top:clamp(72px,10svh,112px)}
#main .deliverable,#main .deliverable.image-left{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--okto-grid-gap);align-items:center;padding-block:clamp(80px,12svh,144px);scroll-margin-top:48px}
#main .deliverable-copy{max-width:48ch;min-width:0}
#main .deliverable-number{display:block;margin-bottom:24px;color:var(--steel)}
#main .deliverable h3{font-size:clamp(36px,3.1vw,48px);line-height:1.08}
#main .deliverable-copy p{margin-top:28px}
#main .artwork-open-label{min-height:44px;display:flex;align-items:center;position:relative;top:auto;margin-top:16px;font:400 16px/24px var(--okto-font);color:var(--ink)}
#main .artwork-open:hover .artwork-open-label{text-decoration-thickness:2px}
#main .asset-inventory{max-width:88ch;padding-top:32px;border-top:1px solid var(--line);color:var(--steel)}
#main .scope-note{max-width:88ch;margin-top:24px;color:var(--steel)}

/* Method: one introduction, then three equivalent stages. */
#main .sprint{padding-top:clamp(64px,8svh,112px)}
#main .sprint-intro{align-items:start}
#main .sprint-intro>div:first-child>p{max-width:48ch;margin-top:32px}
#main .sprint-collaboration h3{margin-top:24px}
#main .sprint-collaboration p{max-width:40ch}
#main .gradient-rule{height:1px;background:var(--okto-context-gradient)}
#main .phases{gap:clamp(32px,3.4vw,64px);margin-top:72px}
#main .phase-copy{margin-top:32px}
#main .phase h3{font-size:clamp(28px,2.4vw,36px);line-height:1.12}
#main .phase p{margin-top:20px}

/* The case image leads; the unchanged proposition sits beside the proof. */
#main .work h2{max-width:22ch;margin-bottom:48px}
#main .case-tabs{gap:32px;align-items:stretch;padding-bottom:16px;margin-bottom:40px;border-bottom:1px solid var(--line)}
#main .case-tabs button{width:auto;min-width:0;padding-inline:0}
#main .case-panel{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(40px,5vw,80px);align-items:center}
#main .case-copy{max-width:48ch}
#main .case-copy h3{font-size:clamp(32px,2.6vw,40px);line-height:1.1}
#main .case-copy p{margin-top:28px}
#main .case-art{background:#fff}

/* Supporting chapters use shared column rhythm, without forced screen heights. */
#main .continuation-intro{max-width:58ch;margin-top:32px}
#main .continuation-grid{max-width:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(32px,3.4vw,64px);margin-top:56px}
#main .continuation-grid article{padding-top:28px}
#main .continuation-grid h3{font-size:clamp(28px,2.4vw,36px);line-height:1.12}
#main .continuation-grid h3 a{display:inline-flex;align-items:center;min-height:44px}
#main .continuation-grid p{margin-top:20px}
#main .faq{padding-top:48px}
#main .faq article{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--okto-grid-gap);padding-block:36px;border-top:1px solid var(--line)}
#main .faq article+article{margin-top:0}
#main .faq h3{font-size:clamp(28px,2.4vw,36px);line-height:1.12;max-width:24ch}
#main .faq p{margin:0;max-width:48ch}
#main .contact{padding-top:48px}
#main .contact .container{gap:32px;align-items:flex-start;text-align:left}
#main .contact .gradient-rule{margin-bottom:24px}
#main .contact p{max-width:48ch}
.site-footer[data-okto-system]{padding-inline:var(--okto-edge);padding-block:96px 48px}
.site-footer[data-okto-system]>.container{width:100%;max-width:1600px}
.site-footer[data-okto-system] .footer-brand{font-size:clamp(48px,19vw,360px);line-height:1.08;letter-spacing:-.04em;color:var(--okto-paper)}
.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],#cookie-dialog[data-okto-system]{--okto-paper:#fff;--paper:#fff;--ink:var(--okto-ink);background:#fff;color:var(--okto-ink)}
#artwork-dialog[data-okto-system] .artwork-dialog-header button{padding:8px 12px}
#main :is(h1,h2,h3){text-wrap:balance}

@media(min-width:901px) and (max-width:1100px){
  #main .hero-copy{gap:32px}
  .product-arrival .okto-product-name{font-size:clamp(58px,7vw,80px)}
  #main .hero h1.okto-type-chapter{font-size:44px}
  #main .case-panel{grid-template-columns:repeat(2,minmax(0,1fr))}
  #main .phases,#main .continuation-grid{gap:32px}
}
@media(max-width:900px){
  #main[data-okto-system]{--gutter:32px;--section-space:96px;--okto-grid-gap:40px}
  #main .hero{padding-block:48px 64px}
  #main .hero-grid,.product-proof-intro,#main .sprint-intro,#main .case-panel{grid-template-columns:minmax(0,1fr);gap:48px}
  #main .hero-copy{gap:32px}
  #main .hero h1.okto-type-chapter{font-size:clamp(36px,6.2vw,56px);line-height:1.05}
  #main .hero-grid>.clarity-lens-stage{max-width:540px}
  .product-arrival .okto-product-name{font-size:clamp(56px,10vw,80px)}
  .product-arrival .okto-product-descriptor{margin-top:12px}
  #main .client-strip-wrap{margin-top:48px}
  #main .testimonials{--quote-width:360px;--quote-gap:32px;padding-block:64px}
  #main .testimonial-card blockquote{min-height:240px}
  .product-proof-intro>.product-proof-art{max-width:540px}
  #main .output-index{margin-top:32px}
  #main .deliverable-list{margin-top:64px}
  #main .deliverable,#main .deliverable.image-left{display:flex;flex-direction:column;gap:40px;padding-block:64px;align-items:stretch}
  #main .deliverable h3{font-size:36px}
  #main .deliverable-copy{max-width:58ch}
  #main .deliverable-number{margin-bottom:20px}
  #main .deliverable-copy p{margin-top:24px}
  #main .artwork-open{max-width:640px}
  #main .phases{grid-template-columns:minmax(0,1fr);gap:56px;margin-top:56px}
  #main .phase{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center}
  #main .phase-copy{margin:0}
  #main .phase>.artwork{max-width:none}
  #main .case-tabs{gap:16px 24px;margin-bottom:32px}
  #main .case-panel{gap:32px}
  #main .case-copy{max-width:58ch}
  #main .continuation-grid{grid-template-columns:minmax(0,1fr);gap:32px;margin-top:40px}
  #main .continuation-grid article{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:32px}
  #main .continuation-grid p{margin:0}
  #main .faq article{gap:32px}
  #main .contact p{max-width:100%}
  .site-footer[data-okto-system]{padding-inline:32px;padding-block:72px 32px}
  .site-footer[data-okto-system] .footer-legal{grid-template-columns:1fr 1fr;gap:16px}
  .site-footer[data-okto-system] .footer-brand{font-size:19vw}
}
@media(max-width:600px){
  #main[data-okto-system]{--gutter:24px;--section-space:80px}
  #main .hero-grid{gap:24px}
  #main .hero-copy{gap:28px}
  #main .hero h1.okto-type-chapter{font-size:clamp(32px,8vw,44px)}
  #main .hero-promise{gap:28px}
  #main .hero-grid>.clarity-lens-stage{width:calc(100% + 24px);margin-inline:-12px}
  #main .testimonials{--quote-width:calc(100vw - 64px);--quote-gap:32px}
  #main .testimonial-header{gap:12px}
  #main .testimonial-person p{font-size:13px;line-height:18px}
  #main .testimonial-card blockquote{font-size:20px;line-height:28px;min-height:280px}
  #main .testimonial-logo{width:80px;transform:scale(.83);transform-origin:right center}
  #main .output-index a{font-size:20px;line-height:27px;grid-template-columns:24px minmax(0,1fr) 16px;gap:12px}
  #main .deliverable h3{font-size:32px}
  #main .phase,#main .faq article,#main .continuation-grid article{grid-template-columns:minmax(0,1fr);gap:24px}
  #main .phase>.artwork{max-width:380px;justify-self:center}
  #main .case-copy h3{font-size:32px}
  #main .work h2{margin-bottom:32px}
  #main .case-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  #main .faq{padding-top:32px}
  #main .faq article{padding-block:28px}
  .site-footer[data-okto-system]{padding-inline:24px}
  .site-footer[data-okto-system] .footer-legal{grid-template-columns:1fr}
  .site-footer[data-okto-system] .footer-brand{font-size:18.5vw}
}
@media(prefers-reduced-motion:reduce){
  #main .output-index-arrow,#main .motion-toggle{transition:none}
}