/* 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.
   Page gutters and container maximum follow the existing header (6 Nov 2026). */
#main[data-okto-system]{
  --okto-edge:var(--gutter);--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 .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,#main .continuation{padding-top:32px}
#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(--gutter);padding-block:96px 48px}
.site-footer[data-okto-system]>.container{width:100%}
.site-footer[data-okto-system] .footer-brand{font-size:calc(100cqw * .2153173);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}
#artwork-dialog .artwork-dialog-scroll:focus-visible{outline-offset:-3px}
#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]{--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-block:72px 32px}
  .site-footer[data-okto-system] .footer-legal{grid-template-columns:1fr 1fr;gap:16px}
}
@media(max-width:700px){
  #main .faq article{grid-template-columns:minmax(0,1fr);gap:24px}
}
@media(max-width:600px){
  #main[data-okto-system]{--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] .footer-legal{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  #main .output-index-arrow,#main .motion-toggle{transition:none}
}