/* ============================================
   META TEAM — COMPONENTS
   ============================================ */

/* Big hero octagon stat (brochure-style) */
.oct-hero-row{ display:flex; justify-content:center; gap:28px; flex-wrap:wrap; }
.oct-hero{
  position:relative;
  width:148px; height:148px;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  clip-path: polygon(29% 0%, 71% 0%, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0% 71%, 0% 29%);
  border:2.5px solid var(--orange-500);
}
.oct-hero .oh-value{ font-size:1.9rem; font-weight:800; color:#fff; line-height:1; }
.oct-hero .oh-label{ font-size:0.72rem; color:var(--navy-100); margin-top:6px; text-align:center; padding:0 12px; line-height:1.3; }

/* Octagon stat badge (Pectus motif) */
.oct-badge{
  position:relative;
  width:112px; height:112px;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column;
}
.oct-badge svg{ position:absolute; inset:0; width:100%; height:100%; }
.oct-badge .oct-value{ position:relative; font-size:1.5rem; font-weight:800; color:var(--navy-900); }
.oct-badge .oct-value small{ font-size:0.85rem; }
.oct-badge.on-dark .oct-value{ color:#fff; }
.oct-badge-sm{ width:80px; height:80px; }
.oct-badge-sm .oct-value{ font-size:1.1rem; }

/* Generic card */
.card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:32px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent; }
.card h3,.card h4{ margin-bottom:10px; }
.card p{ font-size:0.96rem; }

.card-dark{
  background:var(--navy-800);
  color:#fff;
  border:1px solid rgba(255,255,255,0.08);
}
.card-dark p{ color:var(--navy-100); }
.card-dark h3,.card-dark h4{ color:#fff; }

/* Grids */
.grid{ display:grid; gap:28px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-5{ grid-template-columns:repeat(5,1fr); }
@media (max-width:980px){
  .grid-3,.grid-4,.grid-5{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:620px){
  .grid-2,.grid-3,.grid-4,.grid-5{ grid-template-columns:1fr; }
}

/* Stat strip */
.stat-strip{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:24px;
  text-align:center;
}
.stat{ }
.stat .num{ font-size:clamp(1.8rem,3vw,2.6rem); font-weight:800; color:var(--orange-500); line-height:1; }
.stat .label{ font-size:0.85rem; color:var(--text-soft); margin-top:8px; }
.section.dark .stat .label{ color:var(--navy-100); }

/* Cost chips grid */
.cost-grid{ display:flex; flex-wrap:wrap; gap:12px; }
.cost-chip{
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:999px;
  padding:11px 20px 11px 14px;
  font-size:0.9rem; font-weight:600;
}
.cost-chip .dot{ width:8px; height:8px; border-radius:50%; background:var(--orange-500); flex-shrink:0; }

/* Numbered process (real sequences only) */
.process{ display:grid; gap:0; }
.process-step{
  display:grid; grid-template-columns:64px 1fr; gap:24px;
  padding:28px 0;
  border-top:1px solid var(--border);
}
.process-step:first-child{ border-top:none; padding-top:0; }
.section.dark .process-step{ border-color:rgba(255,255,255,0.12); }
.process-num{
  font-family:var(--font-display);
  font-size:1.6rem; font-weight:800;
  color:var(--orange-500);
}
.process-step h4{ margin-bottom:6px; }

/* Horizontal engine flow */
.engine-flow{
  display:grid; grid-template-columns:repeat(6,1fr); gap:16px;
}
.engine-step{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:22px 18px;
  position:relative;
}
.engine-step .e-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px;
  background:var(--navy-900); color:var(--orange-500);
  font-weight:800; font-size:0.85rem;
  border-radius:50%;
  margin-bottom:14px;
}
.engine-step h4{ font-size:0.98rem; margin-bottom:8px; }
.engine-step p{ font-size:0.85rem; }
@media (max-width:980px){
  .engine-flow{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:620px){
  .engine-flow{ grid-template-columns:1fr 1fr; }
}

/* Octagon badge (brand shape used for stats and step numbers) */
.octa{ position:relative; display:flex; align-items:center; justify-content:center; }
.octa svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.octa .octa-inner{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 14px; }
.octa .octa-value{ font-family:var(--font-display); font-weight:800; line-height:1; color:#fff; }
.octa.on-light .octa-value{ color:var(--navy-900); }

/* Octagon step flow — used for process/journey sequences */
.oct-flow{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
.oct-flow-item{ background:var(--white); border:1px solid var(--border); border-radius:var(--radius-md); padding:26px 22px; }
.oct-flow-item.cream{ background:var(--paper-warm); border-color:#e6ddc9; }
.oct-flow-item.step-dark{ background:var(--navy-900); border-color:var(--navy-700); }
.oct-flow-item .octa{ width:44px; height:44px; }
.oct-flow-item .octa .octa-value{ font-size:0.78rem; color:var(--orange-600); }
.oct-flow-item h4{ font-size:0.8rem; font-weight:800; letter-spacing:0.03em; text-transform:uppercase; color:var(--navy-900); margin:16px 0 0; min-height:2.1em; line-height:1.3; }
.oct-flow-item.step-dark h4{ color:#fff; }
.oct-flow .oct-flow-item h4{ color:var(--navy-900); }
.oct-flow .oct-flow-item.step-dark h4{ color:#fff; }
.oct-flow-item .oct-divider{ display:flex; align-items:center; margin:12px 0 14px; }
.oct-flow-item .oct-divider::before{ content:''; flex:1; height:1px; background:var(--border); }
.oct-flow-item.step-dark .oct-divider::before{ background:rgba(255,255,255,0.2); }
.oct-flow-item .oct-divider::after{ content:'\2192'; margin-left:8px; color:var(--orange-500); font-size:0.85rem; line-height:1; }
.oct-flow-item p{ font-size:0.85rem; color:var(--slate-700); line-height:1.5; }
.oct-flow-item.step-dark p{ color:var(--navy-100); }
@media (max-width:980px){ .oct-flow{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:620px){ .oct-flow{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .oct-flow{ grid-template-columns:1fr; } }

/* Variant: oct-flow sitting directly on a navy section — cards need to read
   against a dark page background, so light cards get a stronger border and
   the "dark" card variant lifts to a lighter navy so it doesn't disappear. */
.oct-flow.on-navy .oct-flow-item{ border-color:rgba(255,255,255,0.14); }
.oct-flow.on-navy .oct-flow-item p{ color:var(--slate-700); }
.oct-flow.on-navy .oct-flow-item.step-dark{ background:var(--navy-700); border-color:var(--navy-500); }
.oct-flow.on-navy .oct-flow-item.step-dark p{ color:var(--navy-100); }

/* Formula display */
.formula{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:14px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.05rem,2.1vw,1.7rem);
  text-align:center;
}
.formula .f-part{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.formula .f-part span.label{ font-size:0.72rem; font-weight:600; letter-spacing:0.02em; text-transform:none; color:var(--navy-300); max-width:160px; }
.formula .f-op{ color:var(--orange-500); font-size:1.4em; }
.formula .f-inner{ color:#fff; }
.formula .f-outer{ color:var(--orange-500); }
.formula .f-constraints{ color:var(--slate-300); text-decoration:underline; text-decoration-color:var(--red-500); text-decoration-thickness:2px; }

/* Constraint loop (circular diagram) */
.loop-wrap{ display:flex; justify-content:center; padding:20px 0; }
.loop-svg{ width:100%; max-width:340px; }
.loop-legend{ display:grid; gap:14px; margin-top:24px; }
.loop-legend-item{ display:flex; gap:14px; align-items:flex-start; }
.loop-legend-item .sw{ width:14px; height:14px; border-radius:3px; flex-shrink:0; margin-top:5px; }
.loop-legend-item h5{ font-size:0.95rem; font-weight:700; margin-bottom:3px; }
.loop-legend-item .pct{ color:var(--orange-500); font-weight:700; }
.loop-legend-item p{ font-size:0.85rem; }

/* Team type tab cards */
[data-tabpanel]{ display:none; }
[data-tabpanel].is-active{ display:block; }
.team-tabs{ display:flex; gap:10px; margin-bottom:32px; flex-wrap:wrap; }
.team-tab-btn{
  padding:12px 22px; border-radius:999px;
  font-weight:700; font-size:0.92rem;
  border:1.5px solid var(--border);
  background:var(--white);
  transition:all .2s;
}
.team-tab-btn.active,.team-tab-btn:hover{
  background:var(--navy-900); color:#fff; border-color:var(--navy-900);
}

/* Testimonial card */
.testimonial{
  background:var(--white);
  border-left:3px solid var(--orange-500);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  padding:26px 28px;
  box-shadow:var(--shadow-sm);
}
.testimonial p{ font-style:italic; color:var(--navy-800); font-size:0.98rem; margin-bottom:14px; }
.testimonial cite{ font-style:normal; font-weight:700; font-size:0.85rem; color:var(--slate-500); }
.section.dark .testimonial{ background:rgba(255,255,255,0.04); }
.section.dark .testimonial p{ color:#fff; }

/* Logo strip */
.logo-strip{ display:flex; flex-wrap:wrap; align-items:center; gap:44px; opacity:0.85; }
.logo-strip img{ height:28px; width:auto; filter:grayscale(1); opacity:0.7; transition:opacity .2s,filter .2s; }
.logo-strip img:hover{ opacity:1; filter:grayscale(0); }

/* Screenshot frame for platform shots */
.screenshot-frame{
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  border:1px solid var(--border);
}
.screenshot-frame img{ width:100%; display:block; }
.browser-chrome{
  background:var(--navy-50);
  padding:10px 14px;
  display:flex; gap:6px;
  border-bottom:1px solid var(--border);
}
.browser-chrome span{ width:10px; height:10px; border-radius:50%; background:var(--navy-100); }

/* Feature row (alternating image/text) */
.feature-row{
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
}
.feature-row.reverse .feature-text{ order:2; }
.feature-row.reverse .feature-media{ order:1; }
@media (max-width:900px){
  .feature-row,.feature-row.reverse{ grid-template-columns:1fr; }
  .feature-row.reverse .feature-text,.feature-row.reverse .feature-media{ order:initial; }
}
.feature-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  border:2px solid var(--orange-500); color:var(--orange-600);
  font-weight:800; border-radius:50%;
  margin-bottom:18px;
}

/* Habit card */
.habit-card{
  display:flex; gap:16px; align-items:flex-start;
  padding:22px; border-radius:var(--radius-md);
  background:var(--white); border:1px solid var(--border);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.habit-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.habit-icon{ width:46px; height:46px; flex-shrink:0; }
.habit-card.inner{ border-top:3px solid var(--navy-700); }
.habit-card.outer{ border-top:3px solid var(--orange-500); }
.habit-card h4{ margin-bottom:4px; }
.habit-card p{ font-size:0.88rem; }

/* Table */
.mt-table{ width:100%; border-collapse:collapse; }
.mt-table th{
  text-align:left; font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--slate-500); padding:12px 16px; border-bottom:2px solid var(--navy-900);
}
.mt-table td{ padding:16px; border-bottom:1px solid var(--border); font-size:0.94rem; }
.mt-table tr:hover td{ background:var(--navy-50); }

/* Pull quote */
.pull-quote{
  font-family:var(--font-display);
  font-size:clamp(1.4rem,2.4vw,2rem);
  font-weight:700;
  line-height:1.3;
  max-width:780px;
}
.pull-quote .hl{ color:var(--orange-500); }

/* Speech bubble — wraps a pull-quote to read as something said, not just stated */
.speech-bubble{
  position:relative;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:36px 44px;
  box-shadow:var(--shadow-sm);
}
.speech-bubble::before{
  content:"";
  position:absolute;
  left:50%; bottom:-17px;
  transform:translateX(-50%);
  width:0; height:0;
  border-left:16px solid transparent;
  border-right:16px solid transparent;
  border-top:16px solid var(--border);
}
.speech-bubble::after{
  content:"";
  position:absolute;
  left:50%; bottom:-15px;
  transform:translateX(-50%);
  width:0; height:0;
  border-left:15px solid transparent;
  border-right:15px solid transparent;
  border-top:15px solid var(--white);
}
.speech-bubble .pull-quote{ max-width:none; margin:0; }
.speech-bubble.on-dark{ background:var(--navy-800); border-color:var(--navy-700); }
.speech-bubble.on-dark::before{ border-top-color:var(--navy-700); }
.speech-bubble.on-dark::after{ border-top-color:var(--navy-800); }
@media (max-width:680px){ .speech-bubble{ padding:26px 26px; } }

/* CTA banner */
.cta-banner{
  background:var(--navy-900);
  border-radius:var(--radius-lg);
  padding:64px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.cta-banner::before{
  content:"";
  position:absolute; top:-40%; right:-10%;
  width:480px; height:480px;
  background:radial-gradient(circle, rgba(251,129,0,0.25), transparent 70%);
}
.cta-banner h2{ color:#fff; }
.cta-banner p{ color:var(--navy-100); margin:16px auto 32px; max-width:560px; }
@media (max-width:680px){ .cta-banner{ padding:44px 28px; } }

/* Three-step strip (diagnose/debrief/decide) */
.three-step{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:rgba(255,255,255,0.12);
  border-radius:var(--radius-md);
  overflow:hidden;
}
.three-step-item{ background:var(--navy-800); padding:28px; }
.three-step-item .ts-label{ font-weight:800; color:var(--orange-500); font-size:1.05rem; }
.three-step-item .ts-time{ font-size:0.82rem; color:var(--navy-100); margin:4px 0 12px; }
.three-step-item p{ font-size:0.86rem; color:var(--navy-100); }
@media (max-width:780px){ .three-step{ grid-template-columns:1fr; } }

/* ============ FORMULA DIAGRAM (HTML/SVG, replaces deck screenshot) ============ */
.formula-diagram{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:28px; padding:8px 0;
}
.formula-diagram .fd-term{ display:flex; flex-direction:column; align-items:center; gap:6px; flex-shrink:0; width:240px; }
.formula-diagram .fd-term-label{ font-family:var(--font-display); font-weight:800; font-size:1.05rem; letter-spacing:0.01em; white-space:nowrap; }
.formula-diagram .fd-term-sub{ font-size:0.74rem; color:var(--navy-300); font-style:italic; text-align:center; max-width:150px; line-height:1.3; }
.formula-diagram .fd-op{ font-family:var(--font-display); font-weight:800; font-size:1.8rem; color:var(--orange-500); flex-shrink:0; }
.fd-equals{ color:#fff; }
.fd-ring{ position:relative; width:200px; height:200px; flex-shrink:0; }
.fd-ring svg{ width:100%; height:100%; }
.fd-quad-label{ font-family:var(--font-display); font-size:11px; font-weight:800; fill:#fff; text-anchor:middle; letter-spacing:0.02em; }
@media (max-width:780px){
  .fd-ring{ width:150px; height:150px; }
  .fd-quad-label{ font-size:9px; }
  .formula-diagram{ gap:14px; }
  .formula-diagram .fd-op{ font-size:1.3rem; }
}
@media (max-width:560px){
  .formula-diagram{ flex-direction:column; }
}

/* ============ THREE GEARS (HTML/SVG, replaces deck screenshot) ============ */
.gears-diagram{ position:relative; width:100%; max-width:460px; margin:0 auto; aspect-ratio:1/0.95; }
.gears-diagram svg{ width:100%; height:100%; }
.gear-label{ font-family:var(--font-display); font-size:13px; font-weight:800; fill:var(--navy-900); text-anchor:middle; }
.gear-label tspan{ font-size:12px; }
.gears-caption{ display:flex; justify-content:center; gap:6px; flex-wrap:wrap; margin-top:18px; font-size:0.82rem; font-weight:700; text-align:center; }
.gears-caption .seg{ display:flex; align-items:center; gap:6px; }
.gears-caption .arrow{ color:var(--orange-500); }
@media (max-width:560px){ .gears-caption{ flex-direction:column; gap:4px; } .gears-caption .arrow{ display:none; } }

.breadcrumb{ font-size:0.84rem; color:var(--slate-500); margin-bottom:18px; }
.breadcrumb a{ color:var(--slate-500); }
.breadcrumb a:hover{ color:var(--orange-600); }

/* Featured case study split card */
.case-split{ display:grid; grid-template-columns:1fr 1fr; }
@media (max-width:780px){ .case-split{ grid-template-columns:1fr; } .case-split > div{ border-right:none !important; border-bottom:1px solid var(--border); } }

/* page hero (sub pages) */
.page-hero{
  background:var(--navy-900);
  color:#fff;
  padding:64px 0 80px;
  position:relative;
  overflow:hidden;
}
.page-hero::after{
  content:""; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22175.5%22%20height%3D%22175.5%22%20viewBox%3D%220%200%20175.5%20175.5%22%3E%0A%20%20%3Cpolygon%20points%3D%2287.77%2C36.35%2036.35%2C87.77%20-36.35%2C87.77%20-87.77%2C36.35%20-87.77%2C-36.35%20-36.35%2C-87.77%2036.35%2C-87.77%2087.77%2C-36.35%22%20fill%3D%22none%22%20stroke%3D%22%232d5278%22%20stroke-width%3D%221%22/%3E%3Cpolygon%20points%3D%22263.31%2C36.35%20211.89%2C87.77%20139.18%2C87.77%2087.77%2C36.35%2087.77%2C-36.35%20139.18%2C-87.77%20211.89%2C-87.77%20263.31%2C-36.35%22%20fill%3D%22none%22%20stroke%3D%22%232d5278%22%20stroke-width%3D%221%22/%3E%3Cpolygon%20points%3D%2287.77%2C211.89%2036.35%2C263.31%20-36.35%2C263.31%20-87.77%2C211.89%20-87.77%2C139.18%20-36.35%2C87.77%2036.35%2C87.77%2087.77%2C139.18%22%20fill%3D%22none%22%20stroke%3D%22%232d5278%22%20stroke-width%3D%221%22/%3E%3Cpolygon%20points%3D%22263.31%2C211.89%20211.89%2C263.31%20139.18%2C263.31%2087.77%2C211.89%2087.77%2C139.18%20139.18%2C87.77%20211.89%2C87.77%20263.31%2C139.18%22%20fill%3D%22none%22%20stroke%3D%22%232d5278%22%20stroke-width%3D%221%22/%3E%3Cpolygon%20points%3D%22175.54%2C124.12%20124.12%2C175.54%2051.41%2C175.54%200.00%2C124.12%20-0.00%2C51.41%2051.41%2C-0.00%20124.12%2C0.00%20175.54%2C51.41%22%20fill%3D%22none%22%20stroke%3D%22%232d5278%22%20stroke-width%3D%221%22/%3E%0A%3C/svg%3E");
  background-size:180px 180px;
  opacity:0.55;
  pointer-events:none;
  z-index:0;
}
.page-hero .container{ position:relative; z-index:1; }
.page-hero h1{ color:#fff; margin-top:14px; max-width:780px; }
.page-hero .lede{ margin-top:18px; color:var(--navy-100); max-width:640px; }

/* sub-nav pills (method/partner sections) */
.subnav{ display:flex; gap:10px; flex-wrap:wrap; margin-top:28px; }
.subnav a{
  padding:9px 18px; border-radius:999px;
  font-size:0.85rem; font-weight:700;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.16);
  color:#fff;
  transition:background .2s;
}
.subnav a:hover,.subnav a.active{ background:var(--orange-500); border-color:var(--orange-500); color:var(--navy-900); }

/* Accordion */
.accordion-item{ border-bottom:1px solid var(--border); }
.accordion-trigger{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding:22px 0; font-weight:700; font-size:1.02rem; text-align:left;
}
.accordion-trigger .plus{ font-size:1.4rem; color:var(--orange-500); transition:transform .25s; flex-shrink:0; margin-left:16px; }
.accordion-item.open .plus{ transform:rotate(45deg); }
.accordion-panel{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.accordion-item.open .accordion-panel{ max-height:500px; }
.accordion-panel-inner{ padding-bottom:22px; }
.accordion-panel-inner p{ font-size:0.94rem; }

/* Comparison columns */
.compare-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--border); border-radius:var(--radius-md); overflow:hidden; }
.compare-col{ background:var(--white); padding:36px; }
.compare-col.highlight{ background:var(--navy-900); color:#fff; }
.compare-col.highlight li{ color:var(--navy-100); }
.compare-col h3{ margin-bottom:20px; }
.compare-col.highlight h3{ color:#fff; }
.compare-col ul{ display:grid; gap:12px; margin-bottom:20px; }
.compare-col li{ display:flex; gap:10px; font-size:0.94rem; color:var(--text-soft); }
.compare-col .result{ font-size:0.88rem; font-style:italic; padding-top:16px; border-top:1px solid var(--border); }
.compare-col.highlight .result{ border-color:rgba(255,255,255,0.15); }
@media (max-width:780px){ .compare-grid{ grid-template-columns:1fr; } }

/* before/after radar pair */
.radar-pair{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.radar-pair figure{ text-align:center; }
.radar-pair figcaption{ font-weight:700; font-size:0.85rem; margin-top:10px; text-transform:uppercase; letter-spacing:0.05em; }
@media (max-width:560px){ .radar-pair{ grid-template-columns:1fr; } }


/* Octagon lattice watermark, for use on any dark/navy section */
.lattice-watermark{ position:relative; overflow:hidden; }
.lattice-watermark::after{
  content:"";
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22175.5%22%20height%3D%22175.5%22%20viewBox%3D%220%200%20175.5%20175.5%22%3E%0A%20%20%3Cpolygon%20points%3D%2287.77%2C36.35%2036.35%2C87.77%20-36.35%2C87.77%20-87.77%2C36.35%20-87.77%2C-36.35%20-36.35%2C-87.77%2036.35%2C-87.77%2087.77%2C-36.35%22%20fill%3D%22none%22%20stroke%3D%22%232d5278%22%20stroke-width%3D%221%22/%3E%3Cpolygon%20points%3D%22263.31%2C36.35%20211.89%2C87.77%20139.18%2C87.77%2087.77%2C36.35%2087.77%2C-36.35%20139.18%2C-87.77%20211.89%2C-87.77%20263.31%2C-36.35%22%20fill%3D%22none%22%20stroke%3D%22%232d5278%22%20stroke-width%3D%221%22/%3E%3Cpolygon%20points%3D%2287.77%2C211.89%2036.35%2C263.31%20-36.35%2C263.31%20-87.77%2C211.89%20-87.77%2C139.18%20-36.35%2C87.77%2036.35%2C87.77%2087.77%2C139.18%22%20fill%3D%22none%22%20stroke%3D%22%232d5278%22%20stroke-width%3D%221%22/%3E%3Cpolygon%20points%3D%22263.31%2C211.89%20211.89%2C263.31%20139.18%2C263.31%2087.77%2C211.89%2087.77%2C139.18%20139.18%2C87.77%20211.89%2C87.77%20263.31%2C139.18%22%20fill%3D%22none%22%20stroke%3D%22%232d5278%22%20stroke-width%3D%221%22/%3E%3Cpolygon%20points%3D%22175.54%2C124.12%20124.12%2C175.54%2051.41%2C175.54%200.00%2C124.12%20-0.00%2C51.41%2051.41%2C-0.00%20124.12%2C0.00%20175.54%2C51.41%22%20fill%3D%22none%22%20stroke%3D%22%232d5278%22%20stroke-width%3D%221%22/%3E%0A%3C/svg%3E");
  background-size:180px 180px;
  opacity:0.5;
  pointer-events:none;
  z-index:0;
}
.lattice-watermark > *{ position:relative; z-index:1; }
.lattice-watermark.on-light::after{ opacity:0.16; }

/* Reusable content-card patterns: watermark-icon cards, positive/negative framing, ticks */
.card-wm{ position:relative; overflow:hidden; }
.card-wm .wm-icon{ position:absolute; top:-18px; right:-18px; width:104px; height:104px; opacity:0.07; pointer-events:none; z-index:0; }
.card-wm h4,.card-wm p{ position:relative; z-index:1; }
.tick{ color:#149c4a; font-weight:800; }
.neg-card{ text-align:center; background:var(--red-100); border:1px solid var(--red-500); border-top:3px solid var(--red-500); }
.pos-card{ text-align:center; background:var(--green-100); border:1px solid var(--green-500); border-top:3px solid var(--green-500); }
.dir-badge{ width:38px; height:38px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; font-size:1.2rem; font-weight:800; }
.tag-line{ margin-top:12px; font-size:0.76rem; font-weight:800; letter-spacing:0.05em; text-transform:uppercase; }

/* Octagon content panel — for step/stage copy that needs more room than a stat badge */
.oct-panel{ background:var(--navy-900); border:2px solid var(--orange-500); padding:42px 34px; text-align:center; clip-path:polygon(29% 0%, 71% 0%, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0% 71%, 0% 29%); }
.oct-panel h3{ color:#fff; margin-top:14px; }
.oct-panel p{ color:var(--navy-100); margin-top:10px; font-size:0.88rem; line-height:1.55; }
.oct-panel .tag-chip{ background:rgba(255,255,255,0.12); color:var(--orange-500); }
.oct-panel-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media (max-width:860px){ .oct-panel-row{ grid-template-columns:1fr; max-width:380px; margin:0 auto; } }

/* Partner proof cards — logo + headshot */
.partner-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.partner-logo{ height:34px; width:auto; max-width:130px; object-fit:contain; flex-shrink:0; }
.testimonial-row{ display:flex; align-items:center; gap:16px; }
.testimonial-row .testimonial{ flex:1; }
.partner-photo{ width:60px; height:60px; border-radius:50%; object-fit:cover; flex-shrink:0; box-shadow:0 0 0 3px #fff, 0 0 0 4px var(--border); }