/* ClarityPOD clear structure — 9 November 2026.
   Everything below the hero/logos. Header, hero and client strip are untouched.
   Reference lock: ClarityPOD's own Lausanne / Ink-on-white / Brand-gradient system is primary.
   Borrowed (Refero: Displace "gallery meets operating manual"): an operational fact panel next to
   the offer statement, flat panels instead of shadows, ruled question rows in a 1/3–2/3 split.
   Secondary text sizes follow boost.oktopods.com (16/26 body, 18/28 lead). */

#main[data-okto-system]{
  --cs-panel:#f6f6f4;--cs-radius:8px;--cs-space:clamp(96px,10vw,152px);
  --cs-head-gap:clamp(40px,4.5vw,64px);
}

/* Shared section rhythm ------------------------------------------------------ */
#main>.section:not(.hero){padding-block:var(--cs-space) 0}
#main>.hero+.section{padding-top:clamp(72px,7vw,112px)}
#main>.section.contact{padding-block:var(--cs-space)}
#main>.section+.section:not(.contact){border-top:0}
#main .section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px var(--okto-grid-gap);align-items:end;margin-bottom:var(--cs-head-gap)}
#main .section-head>.section-eyebrow{grid-column:1/-1}
#main .section-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 4px;font:400 14px/20px var(--okto-font);letter-spacing:.12em;text-transform:uppercase;color:var(--okto-muted)}
#main .section-eyebrow-number{display:inline-grid;place-items:center;min-width:32px;height:24px;padding-inline:8px;border-radius:999px;background:var(--okto-brand);color:var(--okto-ink);font-weight:400;letter-spacing:.04em}
#main .section-head h2.okto-type-chapter,#main .section-head-title h2.okto-type-chapter{margin:0;max-width:22ch}

/* Secondary text: boost.oktopods.com scale (hero excluded) */
#main>.section:not(.hero) .okto-type-body{font-size:16px;line-height:26px}
#main .sprint-intro>div:first-child>p,#main .continuation-intro{font-size:18px!important;line-height:28px!important}
#main>.section:not(.hero) .okto-type-supporting{font-size:14px;line-height:22px}

/* 01 The Sprint ------------------------------------------------------------------ */
#main .sprint-intro{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:32px var(--okto-grid-gap)}
#main .sprint-intro>div:first-child>p{max-width:46ch;margin-top:24px}
#main .sprint-facts{position:relative;padding:28px 32px 32px;background:var(--cs-panel);border-radius:var(--cs-radius);overflow:hidden}
#main .sprint-facts>.gradient-rule{position:absolute;inset:0 0 auto;height:4px}
#main .sprint-facts h3.okto-type-subsection{margin:0;font-size:28px;line-height:1.15}
#main .sprint-facts p{max-width:44ch;margin-top:12px}

#main .phase-track{position:relative;height:28px;margin-top:var(--cs-head-gap)}
#main .phase-track>span{position:absolute;left:0;right:0;top:50%;height:2px;transform:translateY(-50%);background:var(--okto-brand);border-radius:2px}
#main ol.phases{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;counter-reset:phase}
#main ol.phases>.phase{counter-increment:phase;position:relative;display:flex;flex-direction:column;padding:24px;border:1px solid var(--line);border-radius:var(--cs-radius);background:#fff}
#main ol.phases>.phase::before{content:counter(phase,decimal-leading-zero);position:absolute;top:-58px;left:24px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#fff;border:2px solid var(--okto-ink);font:400 13px/1 var(--okto-font);color:var(--okto-ink)}
#main ol.phases>.phase>.artwork{width:100%;max-width:none;margin:0;background:var(--cs-panel);border-radius:calc(var(--cs-radius) - 2px)}
#main ol.phases .phase-copy{margin-top:24px}
#main ol.phases .phase h3{font-size:20px;line-height:1.25}
#main ol.phases .phase p{margin-top:8px}

/* 02 What you get --------------------------------------------------------------- */
#main .deliverable-details .deliverable-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:0}
#main .deliverable-details .deliverable,#main .deliverable-details .deliverable.image-left{display:flex;flex-direction:column;gap:0;padding:0;border:1px solid var(--line);border-radius:var(--cs-radius);background:#fff;overflow:hidden;align-items:stretch;scroll-margin-top:120px}
#main .deliverable-details .artwork-open{order:-1;position:relative;display:flex;flex-direction:column;width:100%;padding:56px 32px 24px;background:#fff;border:0;border-bottom:1px solid var(--line);text-align:left;cursor:zoom-in}
#main .deliverable-details .artwork-open>.artwork{width:100%;margin:0}
#main .deliverable-details .artwork-open-label{position:absolute;top:16px;right:16px;left:auto;width:auto;max-width:calc(100% - 32px);min-height:0;margin:0;padding:6px 14px;border-radius:999px;background:var(--cs-panel);font:400 13px/18px var(--okto-font);text-decoration:none;transition:background .3s cubic-bezier(.22,1,.36,1)}
#main .deliverable-details .artwork-open:is(:hover,:focus-visible) .artwork-open-label{background:var(--okto-brand)}
#main .deliverable-details .deliverable-copy{max-width:none;padding:28px 32px 32px}
#main .deliverable-details .deliverable-number{margin-bottom:12px;font-size:13px;letter-spacing:.12em}
#main .deliverable-details .deliverable-copy h3.okto-type-subsection{font-size:24px;line-height:1.2;max-width:24ch}
#main .deliverable-details .deliverable-copy p{margin-top:12px;max-width:52ch}
#main .deliverable-included{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px var(--okto-grid-gap);margin-top:24px;padding:24px 32px;background:var(--cs-panel);border-radius:var(--cs-radius)}
#main .deliverable-included .asset-inventory{margin:0;padding:0;border:0;max-width:none;color:var(--okto-ink);font-weight:400}
#main .deliverable-included .scope-note{margin:0;max-width:none}

/* 03 Proof ---------------------------------------------------------------------------- */
#main .work .section-head{margin-bottom:32px}
#main .work .case-panel{align-items:center}
#main .work .case-art{margin:0;border-radius:var(--cs-radius);overflow:hidden}
#main .work .case-copy h3.okto-type-subsection{font-size:28px}
#main .testimonial-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:clamp(56px,6vw,88px)}
#main .testimonial-grid .testimonial-card{display:flex;flex-direction:column;gap:20px;width:auto;padding:28px;border:1px solid var(--line);border-top:1px solid var(--line);border-radius:var(--cs-radius);background:#fff}
#main .testimonial-grid .testimonial-stars{order:-2;display:flex;gap:2px}
#main .testimonial-grid .testimonial-stars img{width:16px;height:auto}
#main .testimonial-grid blockquote{order:-1;flex:1;margin:0;font:200 18px/28px var(--okto-font);letter-spacing:-.01em}
#main .testimonial-grid .testimonial-header{align-items:center;gap:16px;padding-top:20px;border-top:1px solid var(--line)}

/* 04 Questions ----------------------------------------------------------------------- */
#main .faq .container{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--okto-grid-gap);align-items:start}
#main .faq .section-head{display:block;margin:0}
#main .faq .section-head h2{font-size:var(--clarity-subsection);margin:0}
#main .faq .faq-list{border-bottom:1px solid var(--line)}
#main .faq .faq-list article{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:12px 40px;padding-block:28px}
#main .faq .faq-list h3.okto-type-subsection{font-size:20px;line-height:1.3;max-width:none}

/* 05 Next steps ------------------------------------------------------------------------ */
#main .continuation .section-head{align-items:end}
#main .continuation .section-head .continuation-intro{grid-column:2;grid-row:2;margin:0;max-width:46ch}
#main .continuation .section-head>h2{grid-column:1;grid-row:2;font-size:var(--clarity-subsection)}
#main .continuation-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0}
#main .continuation-grid article{position:relative;display:flex;flex-direction:column;padding:28px;border-radius:var(--cs-radius);background:var(--cs-panel);transition:background .3s cubic-bezier(.22,1,.36,1)}
#main .continuation-grid article:hover{background:#efefec}
#main .continuation-grid h3{font-size:20px}
#main .continuation-grid h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
#main .continuation-grid p{margin-top:8px}

/* Contact ----------------------------------------------------------------------------------- */
#main .contact .container{display:block}
#main .contact-panel{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px var(--okto-grid-gap);align-items:end;padding:clamp(40px,5vw,72px);border-radius:var(--cs-radius);background:var(--cs-panel);overflow:hidden}
#main .contact-panel>.gradient-rule{position:absolute;inset:0 0 auto;height:4px;margin:0}
#main .contact-panel>h2{grid-row:1/3;margin:0;font-size:clamp(44px,5vw,72px);line-height:1.02}
#main .contact-panel>p{max-width:42ch!important;font-size:18px!important;line-height:28px!important}
#main .contact-panel>.button{justify-self:start}

/* Tablet ------------------------------------------------------------------------------------- */
@media(max-width:1100px){
  #main .sprint-intro{grid-template-columns:minmax(0,1fr)}
  #main ol.phases{grid-template-columns:minmax(0,1fr);gap:20px;margin-top:0}
  #main .phase-track{display:none}
  #main ol.phases>.phase{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center}
  #main ol.phases>.phase::before{position:static;grid-column:1/-1;width:28px;height:28px;font-size:12px}
  #main ol.phases .phase-copy{margin:0}
  #main .faq .container{grid-template-columns:minmax(0,1fr);gap:32px}
  #main .testimonial-grid{grid-template-columns:minmax(0,1fr);gap:16px}
}
@media(max-width:900px){
  #main .section-head,#main .deliverable-included,#main .contact-panel{grid-template-columns:minmax(0,1fr)}
  #main .continuation .section-head .continuation-intro,#main .continuation .section-head>h2{grid-column:1;grid-row:auto}
  #main .contact-panel>h2{grid-row:auto}
  #main .deliverable-details .deliverable-list{grid-template-columns:minmax(0,1fr)}
  #main .continuation-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  #main .continuation-grid article{display:flex}
  #main .work .case-panel{align-items:start}
}
@media(max-width:640px){
  #main[data-okto-system]{--cs-space:88px;--cs-head-gap:32px}
  #main ol.phases>.phase{grid-template-columns:minmax(0,1fr);padding:20px}
  #main .sprint-facts{padding:24px 20px}
  #main .deliverable-details .artwork-open{padding:52px 16px 16px}
  #main .deliverable-details .deliverable-copy{padding:20px 20px 24px}
  #main .deliverable-details .deliverable-copy h3.okto-type-subsection{font-size:22px}
  #main .deliverable-included{padding:20px}
  #main .faq .faq-list article{grid-template-columns:minmax(0,1fr);padding-block:20px}
  #main .testimonial-grid .testimonial-card{padding:20px}
  #main .contact-panel{padding:32px 20px}
}
@media(prefers-reduced-motion:reduce){
  #main .deliverable-details .artwork-open-label,#main .continuation-grid article{transition:none}
}