/* BrandPOD: the OKTOPODS editorial system, scoped to product content.
   Keep the approved header untouched. This file also supports the integrated
   route's bp-* names so both copies use one set of layout decisions. */
/* The standalone header keeps its existing 16px desktop edge. Only main
   content adopts the wider shared page grid; the integrated header is external. */
body.brandpod-system { --okto-edge: 16px; }
.brandpod-system main,
.brandpod-system #bp-main {
  --okto-paper: #fff;
  --paper: #fff;
  --okto-edge: clamp(32px, calc(13.77vw - 70px), 160px);
  --pad: var(--okto-edge);
  --okto-focus-gap: #fff;
  --product-space: clamp(104px, 12svh, 160px);
  --product-gap: clamp(48px, 6vw, 88px);
  background: #fff;
}
.brandpod-system :is(.pad, .bp-pad) { padding-block: var(--product-space); }
.brandpod-system :is(.section-top, .bp-section-top) {
  margin-bottom: 64px;
  padding-top: 22px;
  border-color: var(--okto-line);
}
.brandpod-system :is(.hero, .bp-hero) { overflow: clip; }
.brandpod-system :is(.hero-grid, .bp-hero-grid) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--product-gap);
  padding-block: 24px;
}
.brandpod-system :is(.hero-copy, .bp-hero-copy) { padding-block: 32px; }
.brandpod-system :is(.hero-intro, .bp-hero-intro) { max-width: 34ch; }
.brandpod-system :is(.hero, .bp-hero) > :is(.hero-grid, .bp-hero-grid) > .okto-lens {
  width: min(100%, 70svh);
  justify-self: center;
}
.brandpod-system :is(.hero-bottom, .bp-hero-bottom) { margin-top: 24px; }
.brandpod-system :is(.split, .bp-split) { align-items: start; gap: var(--product-gap); }
.brandpod-system :is(.muted, .bp-muted, .cyan-mark, .bp-cyan-mark) {
  color: transparent;
  background: var(--okto-tech);
  background-clip: text;
  -webkit-background-clip: text;
  padding: 0;
}
.brandpod-system :is(.problem-body, .bp-problem-body) > .okto-type-body { margin: 0 0 40px; }
.brandpod-system :is(.friction-row, .bp-friction-row) {
  align-items: baseline;
  padding-block: 24px;
  gap: 24px;
}
.brandpod-system :is(.friction-row, .bp-friction-row) > span { font-size: 14px; }
.brandpod-system :is(.friction-row, .bp-friction-row) h3 {
  font-size: clamp(24px, 2.5vw, 36px);
  line-height: 1.15;
}
.brandpod-system :is(.closing-line, .bp-closing-line) {
  margin-top: 32px;
  font-size: 21px;
  line-height: 30px;
}

/* One optical material. Keep knowledge / people / tools around the clear lens. */
.brandpod-system :is(.system-visual-intro, .bp-system-visual-intro) {
  background: #fff;
  color: var(--okto-ink);
  margin: 0;
  padding: 0;
  gap: var(--product-gap);
  align-items: center;
}
.brandpod-system :is(.system-heading, .bp-system-heading) { gap: 40px; }
.brandpod-system :is(.system-heading, .bp-system-heading) > p { max-width: 36ch; }
.brandpod-system :is(.hero-art, .bp-hero-art) {
  position: relative;
  height: auto;
  aspect-ratio: 1;
  max-width: 640px;
  width: 100%;
  justify-self: center;
  margin: 0;
}
.brandpod-system :is(.hero-art, .bp-hero-art) .system-lens {
  position: absolute;
  width: 86%;
  inset: 7%;
  max-width: none;
}
.brandpod-system :is(.art-orbit, .bp-art-orbit) {
  /* At -22deg the ellipse's projected width is 1.22 times its box.
     An 80% box keeps the complete orbit inside the illustration at 320px too. */
  inset: 10%;
  width: 80%;
  height: 80%;
  border-color: #181b1826;
  transform: rotate(-22deg) scaleY(.78);
  pointer-events: none;
}
.brandpod-system :is(.orbit-label, .bp-orbit-label) {
  z-index: 4;
  background: #fff;
  color: var(--okto-ink);
  font-size: 16px;
  line-height: 24px;
  padding: 6px 12px;
}
.brandpod-system :is(.knowledge, .bp-knowledge) { left: 0; top: 14%; }
.brandpod-system :is(.people, .bp-people) { right: 0; top: 54%; }
.brandpod-system :is(.tools, .bp-tools) { left: 10%; bottom: 14%; }
.brandpod-system :is(.art-caption, .bp-art-caption) {
  bottom: -20px;
  color: var(--okto-muted);
  letter-spacing: 0;
}
.brandpod-system :is(.hero-art, .bp-hero-art) .okto-control {
  bottom: -24px;
  color: var(--okto-ink);
  background: #fff;
}
.brandpod-system :is(.system-explorer, .bp-system-explorer) {
  margin-top: 96px;
  padding-top: 40px;
  border-top: 1px solid var(--okto-line);
  gap: var(--product-gap);
  align-items: center;
}
.brandpod-system :is(.tabs, .bp-tabs) { margin-bottom: 40px; }
.brandpod-system :is(.tabs, .bp-tabs) .okto-tab[aria-selected=true]::after {
  height: 2px;
  background: var(--okto-tech);
}
.brandpod-system :is(#system-description, #bp-system-description) { max-width: 42ch; }
.brandpod-system :is(.plain-list, .bp-plain-list) { margin-top: 32px; }
.brandpod-system :is(.plain-list, .bp-plain-list) li {
  position: relative;
  padding: 19px 0 19px 48px;
  font-size: 18px;
  line-height: 26px;
}
.brandpod-system :is(.plain-list, .bp-plain-list) li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 16px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: linear-gradient(#fff, #fff) padding-box, var(--okto-tech) border-box;
  font-size: 14px;
  font-weight: 400;
}
.brandpod-system :is(.system-map, .bp-system-map) { min-height: 0; padding: 24px 0; }
.brandpod-system :is(.map-center, .bp-map-center) {
  padding: 28px 40px;
  width: min(100%, 360px);
  border-color: var(--okto-line);
  border-top: 2px solid;
  border-image: var(--okto-tech) 1;
}
.brandpod-system :is(.map-input, .bp-map-input, .map-branches, .bp-map-branches) { font-size: 18px; }
.brandpod-system :is(.map-center, .bp-map-center) .map-wordmark {
  font-size: clamp(42px, 3.8vw, 56px);
  line-height: 1.1;
  margin-top: 16px;
  white-space: nowrap;
}
.brandpod-system :is(.map-branches, .bp-map-branches) > div { font-size: 18px; }
.brandpod-system :is(.map-dot, .bp-map-dot, .tiny-dot, .bp-tiny-dot) { background: #2962ff; }
.brandpod-system :is(.map-caption, .bp-map-caption) { font-size: 16px; line-height: 24px; }

/* The example is a legible working document, within the same white page. */
.brandpod-system :is(.workflow, .bp-workflow) { background: #fff; color: var(--okto-ink); }
.brandpod-system :is(.workflow-heading, .bp-workflow-heading) { align-items: start; gap: var(--product-gap); }
.brandpod-system :is(.workflow, .bp-workflow) :is(.cyan-type, .bp-cyan-type) {
  color: transparent;
  background: var(--okto-tech);
  background-clip: text;
  -webkit-background-clip: text;
}
.brandpod-system :is(.workflow, .bp-workflow) :is(.subdued, .bp-subdued, .example-tag, .bp-example-tag) { color: var(--okto-muted); }
.brandpod-system :is(.workflow-heading, .bp-workflow-heading) .okto-type-caption { max-width: 42ch; }
.brandpod-system :is(.workflow-tabs, .bp-workflow-tabs) {
  margin-top: 64px;
  gap: 24px;
  border-color: var(--okto-line);
}
.brandpod-system :is(.workflow-tabs, .bp-workflow-tabs) .okto-tab { color: var(--okto-muted); }
.brandpod-system :is(.workflow-tabs, .bp-workflow-tabs) .okto-tab[aria-selected=true] { color: var(--okto-ink); }
.brandpod-system :is(.workflow-tabs, .bp-workflow-tabs) .okto-tab[aria-selected=true]::after { background: var(--okto-tech); }
.brandpod-system :is(.workflow-tabs, .bp-workflow-tabs) .okto-tab small { margin-bottom: 12px; }
.brandpod-system :is(.workflow-panel, .bp-workflow-panel) { gap: var(--product-gap); padding-top: 48px; min-height: 450px; align-items: start; }
.brandpod-system :is(.step-copy, .bp-step-copy) { padding-top: 16px; }
.brandpod-system :is(.step-copy, .bp-step-copy) .okto-type-label { color: var(--okto-muted); }
.brandpod-system :is(.step-copy, .bp-step-copy) > p { color: var(--okto-ink); max-width: 42ch; }
.brandpod-system :is(.example-sheet, .bp-example-sheet) {
  padding: 32px;
  background: #fff;
  border: 1px solid var(--okto-line);
  border-top: 2px solid #2962ff;
  box-shadow: none;
  min-height: 390px;
}
.brandpod-system :is(.example-sheet, .bp-example-sheet) h4 { font-size: clamp(30px, 3vw, 44px); line-height: 1.08; margin-block: 32px; }
.brandpod-system :is(.sheet-row, .bp-sheet-row) { grid-template-columns: 76px minmax(0, 1fr); margin-block: 20px; }
.brandpod-system :is(.sheet-row, .bp-sheet-row) > p { font-size: 16px; line-height: 24px; }
.brandpod-system :is(.sheet-foot, .bp-sheet-foot) { margin-top: 28px; font-size: 12px; line-height: 18px; }

/* Human responsibilities and the build sequence share an open editorial grid. */
.brandpod-system :is(.responsibilities, .bp-responsibilities, .engagement-steps, .bp-engagement-steps) { gap: 40px; margin-top: 64px; }
.brandpod-system :is(.responsibilities, .bp-responsibilities, .engagement-steps, .bp-engagement-steps) > div {
  padding-top: 24px;
  border-top: 1px solid;
  border-image: var(--okto-tech) 1;
}
.brandpod-system :is(.responsibilities, .bp-responsibilities, .engagement-steps, .bp-engagement-steps) h3 {
  font-size: clamp(24px, 2.7vw, 36px);
  line-height: 1.13;
  text-wrap: initial;
  margin-block: 24px 16px;
}
.brandpod-system :is(.step-number, .bp-step-number) {
  font-size: 52px;
  font-weight: 200;
  line-height: 1;
  color: transparent;
  background: var(--okto-tech);
  background-clip: text;
  -webkit-background-clip: text;
}
.brandpod-system :is(.foundations, .bp-foundations) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--product-gap);
  margin-top: 88px;
  padding-top: 40px;
}
.brandpod-system :is(.foundations, .bp-foundations) h3 { max-width: 16ch; }
.brandpod-system :is(.foundations, .bp-foundations) p:last-child { margin-bottom: 0; }
.brandpod-system :is(.contact, .bp-contact) .section-top,
.brandpod-system :is(.contact, .bp-contact) .bp-section-top { border-color: #ffffff40; }
.brandpod-system :is(.contact, .bp-contact) h2 { max-width: 17ch; }
.brandpod-system :is(.contact, .bp-contact) :is(.cyan-type, .bp-cyan-type) { color: #00e5ff; }

@media (min-width: 1600px) {
  .brandpod-system main,
  .brandpod-system #bp-main { --product-space: 160px; }
}
@media (max-width: 1100px) {
  .brandpod-system main,
  .brandpod-system #bp-main { --product-gap: 48px; }
  .brandpod-system :is(.hero, .bp-hero) .okto-product-name { font-size: clamp(64px, 7.778vw, 112px); }
  .brandpod-system :is(.responsibilities, .bp-responsibilities, .engagement-steps, .bp-engagement-steps) { gap: 28px; }
}
@media (max-width: 800px) {
  .brandpod-system main,
  .brandpod-system #bp-main { --product-space: 96px; --product-gap: 40px; }
  .brandpod-system :is(.hero-grid, .bp-hero-grid, .system-visual-intro, .bp-system-visual-intro, .foundations, .bp-foundations) { grid-template-columns: minmax(0, 1fr); }
  .brandpod-system :is(.hero-grid, .bp-hero-grid) { padding-block: 32px 16px; gap: 16px; }
  .brandpod-system :is(.hero-copy, .bp-hero-copy) { padding-block: 16px; }
  .brandpod-system :is(.hero, .bp-hero) > :is(.hero-grid, .bp-hero-grid) > .okto-lens { width: min(100%, 520px); }
  .brandpod-system :is(.hero-art, .bp-hero-art) { width: min(100%, 520px); height: auto; margin-block: 8px 24px; }
  .brandpod-system :is(.system-explorer, .bp-system-explorer) { margin-top: 64px; }
  .brandpod-system :is(.workflow-panel, .bp-workflow-panel) { min-height: 0; }
}
@media (max-width: 700px) {
  .brandpod-system main,
  .brandpod-system #bp-main { --okto-edge: 24px; }
  .brandpod-system :is(.section-top, .bp-section-top) { margin-bottom: 40px; gap: 16px; }
  .brandpod-system :is(.section-top, .bp-section-top) > :first-child { max-width: 65%; }
  .brandpod-system :is(.section-word, .bp-section-word) { max-width: 18ch; }
  .brandpod-system :is(.workflow-tabs, .bp-workflow-tabs) { gap: 12px; margin-top: 40px; }
  .brandpod-system :is(.workflow-tabs, .bp-workflow-tabs) .okto-tab { font-size: 14px; }
  .brandpod-system :is(.workflow-panel, .bp-workflow-panel) { padding-top: 32px; }
  .brandpod-system :is(.example-sheet, .bp-example-sheet) { padding: 24px; min-height: 0; }
  .brandpod-system :is(.sheet-header, .bp-sheet-header) { font-size: 11px; }
  .brandpod-system :is(.sheet-row, .bp-sheet-row) { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
  .brandpod-system :is(.sheet-row, .bp-sheet-row) > span { font-size: 10px; }
  .brandpod-system :is(.orbit-label, .bp-orbit-label) { font-size: 14px; padding: 4px 8px; }
  .brandpod-system :is(.responsibilities, .bp-responsibilities, .engagement-steps, .bp-engagement-steps) { gap: 32px; margin-top: 48px; }
  .brandpod-system :is(.engagement-steps, .bp-engagement-steps) h3 { margin: 0; }
  .brandpod-system :is(.foundations, .bp-foundations) { margin-top: 64px; }
}
@media (max-width: 360px) {
  .brandpod-system :is(.hero, .bp-hero) .okto-product-name { font-size: 58px; }
  .brandpod-system :is(.workflow-tabs, .bp-workflow-tabs) { gap: 8px; }
  .brandpod-system :is(.workflow-tabs, .bp-workflow-tabs) .okto-tab { font-size: 13px; }
  .brandpod-system :is(.example-sheet, .bp-example-sheet) { padding: 18px; }
}