/* OKTOPODS shared content system v1, 29 October 2026.
   Canonical source: oktopods-relaunch-2026. Copy with sync-design-system.py.
   Opt-in components only. No global element/type resets; the locked header,
   opening and authored case compositions keep their existing styles. */
@font-face{font-family:OktoSystem;src:url('system/fonts/lausanne-100.otf') format('opentype');font-weight:100;font-display:swap}
@font-face{font-family:OktoSystem;src:url('system/fonts/lausanne-200.woff2') format('woff2');font-weight:200;font-display:swap}
@font-face{font-family:OktoSystem;src:url('system/fonts/lausanne-400.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:OktoSystem;src:url('system/fonts/lausanne-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:OktoSystem;src:url('system/fonts/lausanne-800.otf') format('opentype');font-weight:800;font-display:swap}
:root{
 --okto-paper:#f8f8f8;--okto-ink:#181b18;--okto-muted:#62665f;--okto-line:#d9dcd5;
 --okto-brand:linear-gradient(90deg,#ffd400,#ff1e1e);
 --okto-tech:linear-gradient(90deg,#00e5ff,#2962ff);
 --okto-creative:linear-gradient(90deg,#6a2bff,#ff2d95);
 --okto-font:OktoSystem,Lausanne,Arial,sans-serif;
 --okto-edge:16px;--okto-grid-gap:clamp(40px,6.667vw,96px);
 --okto-chapter-space:clamp(104px,12svh,176px);--okto-chapter-gap:clamp(48px,6svh,80px);
 --okto-context-gradient:var(--okto-brand);--okto-focus:#181b18;--okto-focus-gap:#f8f8f8;
}
[data-okto-heart=brand]{--okto-context-gradient:var(--okto-brand)}
[data-okto-heart=tech]{--okto-context-gradient:var(--okto-tech)}
[data-okto-heart=creative]{--okto-context-gradient:var(--okto-creative)}
.okto-surface-paper{background:var(--okto-paper);color:var(--okto-ink)}
.okto-surface-dark{--okto-focus:#f8f8f8;--okto-focus-gap:#181b18;background:var(--okto-ink);color:var(--okto-paper)}
.okto-equal-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--okto-grid-gap)}
.okto-equal-columns>*{min-width:0}
.okto-type-chapter.okto-type-chapter,.okto-type-statement.okto-type-statement,.okto-type-subsection.okto-type-subsection,.okto-type-body.okto-type-body,.okto-type-supporting.okto-type-supporting,.okto-type-caption.okto-type-caption,.okto-type-label.okto-type-label,.okto-type-ui.okto-type-ui{font-family:var(--okto-font)}
.okto-type-chapter.okto-type-chapter{font-size:clamp(45.6px,4.8vw,72px);line-height:1.02;font-weight:700;letter-spacing:-.04em;text-wrap:balance}
.okto-type-statement.okto-type-statement{font-size:clamp(40px,3.35vw,52px);line-height:1.12;font-weight:200;letter-spacing:-.035em;max-width:29ch}
.okto-type-subsection.okto-type-subsection{font-size:36px;line-height:42px;font-weight:700;letter-spacing:-.035em;text-wrap:balance}
.okto-type-body.okto-type-body{font-size:21px;line-height:30px;font-weight:200;letter-spacing:-.02em;max-width:58ch}
.okto-type-supporting.okto-type-supporting{font-size:18px;line-height:26px;font-weight:200;letter-spacing:-.01em}
.okto-type-caption.okto-type-caption{font-size:14px;line-height:20px;font-weight:200;letter-spacing:0;color:var(--okto-muted)}
.okto-type-label.okto-type-label{font-size:14px;line-height:20px;font-weight:400;letter-spacing:.15em;text-transform:uppercase}
.okto-type-ui.okto-type-ui{font-size:16px;line-height:20px;font-weight:400;letter-spacing:0}
.okto-product-name.okto-product-name{display:block;margin:0;font-family:var(--okto-font);font-size:clamp(72px,7.778vw,112px);line-height:1.04;letter-spacing:-.04em;font-weight:100;white-space:nowrap;color:var(--okto-ink);text-transform:none}
.okto-product-prefix.okto-product-prefix{font-family:var(--okto-font);font-weight:100;color:var(--okto-ink)}
.okto-product-pod.okto-product-pod{font-family:var(--okto-font);font-weight:800;background:var(--okto-context-gradient);background-clip:text;-webkit-background-clip:text;color:transparent}
.okto-product-pod.okto-product-pod{display:inline-block;padding-right:.035em;margin-right:-.035em}
.okto-product-name--teaser.okto-product-name--teaser{font-size:clamp(56px,5.556vw,80px)}
.okto-product-name--compact.okto-product-name--compact{font-size:56px}
.okto-product-descriptor.okto-product-descriptor{margin:16px 0 0;font-family:var(--okto-font);font-size:24px;line-height:32px;font-weight:200;letter-spacing:-.015em;color:var(--okto-ink);text-transform:none}
.okto-product-title.okto-product-title{font-family:var(--okto-font);font-size:clamp(45.6px,4.8vw,72px);line-height:1.02;font-weight:700;letter-spacing:-.04em;text-wrap:balance;text-transform:none}
.okto-action,.okto-text-action,.okto-control,.okto-tab{box-sizing:border-box;font-family:var(--okto-font);letter-spacing:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.okto-action.okto-action{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;width:fit-content;max-width:100%;min-height:56px;padding:17px 24px;border:1px solid var(--okto-ink);border-radius:0;background:var(--okto-ink);color:var(--okto-paper);font-size:16px;font-weight:700;line-height:20px;text-transform:uppercase;text-decoration:none;white-space:normal;box-shadow:none;cursor:pointer;transition:background-color 140ms ease,color 140ms ease,border-color 140ms ease}
.okto-action.okto-action:hover{background:#303530;border-color:#303530;color:var(--okto-paper);box-shadow:none;transform:none}
.okto-action.okto-action:active{background:#000;border-color:#000;transform:none}
.okto-action.okto-action--large{min-height:64px;padding-block:21px}
.okto-action.okto-action--inverse{--okto-focus:#f8f8f8;--okto-focus-gap:#181b18;background:var(--okto-paper);border-color:var(--okto-paper);color:var(--okto-ink)}
.okto-action.okto-action--inverse:hover{background:#e7eae4;border-color:#e7eae4;color:var(--okto-ink)}
.okto-action.okto-action--inverse:active{background:#cdd2c9;border-color:#cdd2c9}
.okto-action.okto-action:disabled,.okto-action.okto-action[aria-disabled=true]{background:var(--okto-line);border-color:var(--okto-line);color:var(--okto-muted);cursor:not-allowed}
.okto-action.okto-action--inverse:disabled{background:#3e433c;border-color:#3e433c;color:#a6ada1}
.okto-action :is(svg,img),.okto-text-action svg{width:20px;height:20px;flex:0 0 20px}
.okto-action .button-arrow{font-family:var(--okto-font);font-size:20px;line-height:20px;flex:0 0 20px;color:currentColor;background:none}
.okto-action .okto-icon,.okto-text-action .okto-icon{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:square;stroke-linejoin:miter}
.okto-text-action.okto-text-action{display:inline-flex;align-items:center;gap:20px;min-height:44px;max-width:100%;padding:10px 0;border:0;border-radius:0;background:none;color:inherit;font-size:16px;font-weight:400;line-height:24px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;cursor:pointer}
.okto-text-action.okto-text-action:hover{text-decoration-thickness:2px}
.okto-control.okto-control{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:10px;border:0;border-radius:0;font-family:var(--okto-font);font-size:16px;font-weight:400;line-height:24px;cursor:pointer}
.okto-control.okto-control[hidden]{display:none}
.okto-control.okto-control:disabled{cursor:default;opacity:.6}
.okto-control--text.okto-control--text{width:auto;gap:8px;padding-inline:8px;background:transparent;color:inherit;text-decoration:underline;text-underline-offset:5px}
.okto-tab.okto-tab{min-height:44px;padding-block:10px;font-family:var(--okto-font);font-size:16px;line-height:24px;font-weight:400;border-radius:0}
.okto-tab.okto-tab[aria-selected=true]{font-weight:700}
:is(.okto-action,.okto-text-action,.okto-control,.okto-tab,.okto-field):focus-visible{outline:2px solid var(--okto-focus);outline-offset:4px;box-shadow:0 0 0 4px var(--okto-focus-gap)}
.okto-field{font-family:var(--okto-font);font-size:18px;line-height:26px}
.okto-field[aria-invalid=true],.okto-field:user-invalid{border-color:#b02525}
/* Existing glass renderers, shared framing. They sleep offscreen/at rest. */
.okto-lens{position:relative;aspect-ratio:1;width:100%;min-width:0;container-type:inline-size;overflow:hidden;isolation:isolate;background:var(--okto-paper)}
.okto-lens :is(.clarity-lens-word,.brandpod-lens-word){position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;display:flex;align-items:baseline;white-space:nowrap;font-family:var(--okto-font);font-size:14.5cqw;font-weight:100;line-height:1;letter-spacing:-.05em;pointer-events:none;color:var(--okto-ink)}
.okto-lens .clarity-lens-word{filter:blur(calc((1 - var(--clarity-focus,0)) * max(7px,2.1cqw)))}
.okto-lens :is(.clarity-lens-word,.brandpod-lens-word)>strong{font-weight:800;background:var(--okto-context-gradient);background-clip:text;-webkit-background-clip:text;color:transparent}
.okto-lens :is(canvas,.clarity-lens-fallback,.brandpod-lens-fallback){position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.okto-lens canvas{z-index:2}
.okto-lens :is(.clarity-lens-fallback,.brandpod-lens-fallback){z-index:3;object-fit:contain}
.okto-lens[data-state=ready] :is(.clarity-lens-fallback,.brandpod-lens-fallback){visibility:hidden}
@media(max-width:1100px){:root{--okto-grid-gap:48px}.okto-type-chapter.okto-type-chapter,.okto-product-title.okto-product-title{font-size:clamp(42px,4.8vw,56px)}}
@media(max-width:800px){.okto-equal-columns{grid-template-columns:minmax(0,1fr);gap:40px}.okto-lens{max-width:640px;justify-self:center}}
@media(max-width:700px){
 :root{--okto-grid-gap:40px;--okto-chapter-space:96px;--okto-chapter-gap:40px}
 .okto-type-chapter.okto-type-chapter,.okto-product-title.okto-product-title{font-size:clamp(34px,8.72vw,44px);line-height:1.05}
 .okto-type-statement.okto-type-statement{font-size:32px;line-height:1.12}
 .okto-type-subsection.okto-type-subsection{font-size:25px;line-height:31px}
 .okto-type-body.okto-type-body{font-size:20px;line-height:29px}
 .okto-product-name.okto-product-name{font-size:clamp(52px,14.36vw,72px)}
 .okto-product-name--compact.okto-product-name--compact{font-size:48px}
 .okto-product-descriptor.okto-product-descriptor{font-size:20px;line-height:28px}
}
@media(prefers-reduced-motion:reduce){.okto-action.okto-action{transition:none}.okto-lens .clarity-lens-word{filter:none}}

/* Content hierarchy: large chapter messages, tangible outputs and one check.
   These opt-in roles grow with wide reading layouts; utility copy stays compact. */
.okto-copy-lead.okto-copy-lead{font-family:var(--okto-font);font-size:clamp(24px,1.35vw,32px);font-weight:200;line-height:1.38;letter-spacing:-.025em;max-width:44ch}
.okto-type-banner.okto-type-banner{font-family:var(--okto-font);font-size:clamp(64px,7.778vw,144px);line-height:.98;letter-spacing:-.045em;font-weight:700;text-transform:uppercase;text-wrap:balance;margin:0}
.okto-gradient{background:var(--okto-context-gradient);background-clip:text;-webkit-background-clip:text;color:transparent}
.okto-check.okto-check{display:grid;place-items:center;flex:none;width:36px;height:36px;padding:1.5px;border:0;border-radius:50%;background:var(--okto-context-gradient);box-sizing:border-box}
.okto-check.okto-check>svg{display:block;box-sizing:border-box;width:33px;height:33px;padding:7px;border-radius:50%;background:var(--okto-paper);fill:none;stroke:var(--okto-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.okto-deliverables{width:100%;min-width:0}
.okto-deliverables>h3{font-family:var(--okto-font);font-size:clamp(24px,2vw,36px);font-weight:700;line-height:1.12;letter-spacing:-.025em;margin:0 0 28px}
.okto-deliverables-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--okto-grid-gap);row-gap:0;list-style:none;margin:0;padding:0}
.okto-deliverable.okto-deliverable{display:grid;grid-template-columns:36px minmax(0,1fr);gap:20px;align-items:start;padding:28px 0 32px;border-top:1px solid var(--okto-line);min-width:0}
.okto-deliverable h4{font-family:var(--okto-font);font-size:clamp(26px,2vw,36px);font-weight:400;line-height:1.16;letter-spacing:-.03em;margin:0;text-wrap:balance;overflow-wrap:anywhere;hyphens:auto}
.okto-deliverable p{font-family:var(--okto-font);font-size:clamp(20px,1.1vw,26px);font-weight:200;line-height:1.38;letter-spacing:-.015em;margin:12px 0 0;max-width:40ch;color:var(--okto-ink)}
.okto-lens--value :is(.clarity-lens-word,.brandpod-lens-word){font-size:6.5cqw;font-weight:400;letter-spacing:-.025em;line-height:1.15;width:auto}
@media(min-width:1600px){.okto-deliverables--wide .okto-deliverables-grid{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:40px}}
@media(max-width:700px){
 .okto-copy-lead.okto-copy-lead{font-size:22px;line-height:1.35}
 .okto-type-banner.okto-type-banner{font-size:clamp(38px,10.5vw,72px);line-height:1.02;letter-spacing:-.04em;overflow-wrap:break-word}
 .okto-check.okto-check{width:32px;height:32px}.okto-check.okto-check>svg{width:29px;height:29px;padding:6px}
 .okto-deliverables-grid{grid-template-columns:minmax(0,1fr)}
 .okto-deliverables>h3{font-size:25px;margin-bottom:24px}
 .okto-deliverable.okto-deliverable{grid-template-columns:32px minmax(0,1fr);gap:16px;padding:24px 0}
 .okto-deliverable h4{font-size:25px;line-height:1.2}.okto-deliverable p{font-size:20px;line-height:1.4;margin-top:8px}
}


/* Layout spacing pass: wider page edges, calmer section rhythm and secondary text sized like boost.oktopods.com. */
:root{--pad:clamp(32px,calc(13.77vw - 70px),160px);--okto-edge:var(--pad);--okto-chapter-gap:clamp(56px,8svh,104px)}
.intro.section-pad,.services.section-pad,.connection.section-pad,.brandpod.section-pad,.contact.section-pad{padding-left:var(--pad);padding-right:var(--pad)}
.offering-page .offering-intro{padding-left:var(--pad);padding-right:var(--pad)}
.heart-index{max-width:calc(100% - 2 * var(--pad))}
.okto-type-supporting.okto-type-supporting{font-size:16px;line-height:26px}
.okto-type-caption.okto-type-caption,.home-product-footer .home-clarity-scope.okto-type-caption{font-size:16px;line-height:24px}
.ado-content li p{font-size:16px;line-height:24px}
/* Checklist descriptions share one size under their large titles. */
.offering-main .engagement-item-body.okto-type-supporting,.okto-deliverable.okto-deliverable p{font-size:20px;line-height:28px}
/* Heart heroes and handoffs start on the page edge like every other section. */
.arrival-content{padding-inline:0}
@media(min-width:801px){
 /* Engagement: the review points sit side by side under the message instead of leaving an empty column. */
 .engagement-grid{grid-template-columns:minmax(0,1fr);gap:40px}
 .engagement-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));column-gap:var(--heart-gutter);border-top:0}
 .engagement-item{border-top:1px solid #181b182e;border-bottom:0}
 .engagement-item-title{hyphens:auto;overflow-wrap:break-word}
 /* POD features: one block. The lens stays in view while the copy, deliverables and action scroll beside it. */
 .offering-page :is(.clarity-feature,.brandpod-feature){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--heart-gutter);row-gap:56px;align-items:start}
 :is(.clarity-feature-main,.brandpod-feature-main){display:contents}
 :is(.clarity-feature-copy,.brandpod-feature-copy){grid-column:1;grid-row:1}
 :is(.clarity-feature,.brandpod-feature) .okto-lens{grid-column:2;grid-row:1/span 3;position:sticky;top:calc(var(--heart-primary-height) + var(--heart-index-height) + 32px);width:min(100%,calc(100svh - var(--heart-primary-height) - var(--heart-index-height) - 64px));justify-self:end}
 :is(.clarity-feature-output-band,.brandpod-feature-output-band){grid-column:1;grid-row:2}
 :is(.clarity-feature,.brandpod-feature) .okto-deliverables-grid{grid-template-columns:minmax(0,1fr)}
 :is(.clarity-feature,.brandpod-feature) .product-feature-footer{grid-column:1;grid-row:3;flex-direction:column;align-items:flex-start;gap:24px}
}
/* One headline scale. Display (the POD wordmark size) opens a section; Heading and Subheading sit below it. */
@media(min-width:701px){
 :root{--okto-chapter-space:clamp(160px,19.5svh,240px);--okto-display:clamp(56px,7.778vw,112px);--okto-subheading:clamp(36px,3.9vw,56px)}
 .home-offerings .services-intro h2,.connection.section-pad>h2,.offering-page .engagement-heading.okto-type-banner{font-size:var(--okto-display);line-height:.96}
 .okto-product-name--teaser.okto-product-name--teaser,.home-product-identity .okto-product-name.okto-product-name{font-size:clamp(72px,7.778vw,112px)}
 :is(.home-clarity-copy,.brandpod-copy,.clarity-feature-copy,.brandpod-feature-copy) .okto-product-title.okto-product-title{font-size:var(--okto-subheading);line-height:1.06}
 .contact.section-pad .contact-heading h2{font-size:clamp(45.6px,4.8vw,72px)}
}
/* Every homepage section uses the same chapter spacing as the heart pages. */
.home-offerings.services.section-pad,.home-testimonials.home-testimonials,.connection.section-pad,.contact.section-pad{padding-top:var(--okto-chapter-space);padding-bottom:var(--okto-chapter-space)}
@media(max-width:700px){
 :root{--pad:24px;--okto-chapter-space:120px;--okto-chapter-gap:48px}
 .offering-main .engagement-item-body.okto-type-supporting,.okto-deliverable.okto-deliverable p{font-size:18px;line-height:26px}
}