/* 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);
}

/* The gradient word keeps its last letter whole: room for the ink, no shift in the line. */
#main .hero h1 .hero-clear-accent{display:inline-block;padding:.08em .06em .08em 0;margin:-.08em -.06em -.08em 0}

/* 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 ---------------------------------------------------------------
   One ruled list, one example. Pattern reference (Refero: Sana "Overview"): the
   list names the items, the selected one explains itself, a single large preview
   shows it. Rules instead of cards, as everywhere else on the product site. */
#main .output-explorer{margin:0}
#main .output{border-top:1px solid var(--line)}
#main .output:last-child{border-bottom:1px solid var(--line)}
#main .output-title{margin:0;scroll-margin-top:24px}
#main .output-toggle{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:baseline;width:100%;min-height:72px;margin:0;padding:22px 0;border:0;border-radius:0;background:none;color:var(--okto-ink);font:700 22px/1.2 var(--okto-font);letter-spacing:-.035em;text-align:left;cursor:default}
#main .output-toggle::before{content:attr(data-number);font:400 14px/20px var(--okto-font);letter-spacing:.12em;color:var(--okto-muted)}
#main .output-detail>p{margin:0;padding:0 0 28px 44px;max-width:calc(46ch + 44px)}
#main .output-detail>.artwork-open{display:block;width:100%;max-width:none;margin:0 0 28px;padding:0;border:0;background:none}
#main .output-detail .artwork-open>.artwork{width:100%;margin:0}

/* With the script: one row open at a time */
#main .output-explorer.is-enhanced .output-toggle{grid-template-columns:44px minmax(0,1fr) 24px;gap:0;cursor:pointer;font-weight:400}
#main .output-explorer.is-enhanced .output-toggle::after{content:"+";justify-self:end;font:200 24px/1 var(--okto-font);letter-spacing:0}
#main .output-explorer.is-enhanced .output.is-open .output-toggle{font-weight:700;cursor:default}
#main .output-explorer.is-enhanced .output.is-open .output-toggle::after{content:"\2013"}
#main .output-explorer.is-enhanced .output:not(.is-open) .output-toggle:is(:hover,:focus-visible){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
#main .output-explorer.is-enhanced .output:not(.is-open) .output-detail{display:none}
#main .output-explorer.is-enhanced .output.is-open{background:var(--okto-brand) top left/100% 2px no-repeat;border-top-color:transparent}

@media(min-width:901px){
  /* No script: each output is its own row, text left, example right */
  #main .output-explorer:not(.is-enhanced) .output-detail{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0 var(--okto-grid-gap);align-items:start}
  /* Script: the list is the left column, the open example fills the right */
  #main .output-explorer.is-enhanced{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:repeat(5,auto) 1fr;column-gap:var(--okto-grid-gap);align-items:start}
  #main .output-explorer.is-enhanced .output,#main .output-explorer.is-enhanced .output.is-open .output-detail{display:contents}
  #main .output-explorer.is-enhanced .output-title{grid-column:1;border-top:1px solid var(--line)}
  #main .output-explorer.is-enhanced .output.is-open .output-title{background:var(--okto-brand) top left/100% 2px no-repeat;border-top-color:transparent}
  #main .output-explorer.is-enhanced .output-detail>p{grid-column:1}
  #main .output-explorer.is-enhanced .output-detail>.artwork-open{grid-column:2;grid-row:1/-1;align-self:start;margin:0}
  #main .output-explorer.is-enhanced::after{content:"";grid-column:1;border-top:1px solid var(--line)}
  /* The example has the whole column: no label of the illustration is cut at its edge. */
  #main .output-detail .artwork,#main .output-detail .artwork .native-art{overflow:visible!important}
}
@media(max-width:640px){
  #main .output-toggle{min-height:64px;padding:20px 0;font-size:20px;grid-template-columns:36px minmax(0,1fr)}
  #main .output-explorer.is-enhanced .output-toggle{grid-template-columns:36px minmax(0,1fr) 24px}
  #main .output-detail>p{padding-left:36px}
}
#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-actions{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
#main .contact-actions>p{max-width:42ch;margin:0;font-size:16px;line-height:26px}
#main .contact-alt a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:underline;text-underline-offset:3px}
#main .section-action{display:flex;margin-top:40px}

/* 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 .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-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 .continuation-grid article{transition:none}
}