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